/* Self-hosted Boogaloo (extracted from portable.html) — eliminates the Google Fonts dependency and the FOUT/serif flash on first paint. font-display: block hides text for up to ~3s while the local woff2 loads, then renders correctly with no swap. The HTML head also preloads this file so it downloads in parallel with main.css. */ @font-face { font-family: 'Boogaloo'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/boogaloo.woff2') format('woff2'); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } #game-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 1.2rem 0 0; gap: 0.3rem; } :root { --bg: #fff5d6; --felt: #2ab5b5; /* --felt-deep is the *visible* darker shade — the blended color the table-wrap's #1a6060 triangles produce at 30% opacity over --felt. Used as the solid bg of inverted surfaces (decl modal + drop zone) so they read as a true mirror of the table: table panel = --felt, table triangles look like --felt-deep; decl panel = --felt-deep, decl triangles paint --felt at 100%. */ --felt-deep: #259c9c; --red-orange: #e8420a; --red-orange-light: #ff6b35; --red-orange-dim: rgba(232,66,10,0.3); --card-bg: #fff9f0; --card-border: #1a1a1a; --ink: #1a1a1a; --text: #1a1a1a; --gold: #f5c800; --gold-hover: #ffe066; --outline: #1a1a1a; --purple: #9d6fd4; --cornflower: #7ba7e0; --cream: #fff5d6; --team-us: #d97a2e; --team-them: #c94870; --shadow: var(--purple); --hotpink: #ff69b4; --tan: #8B6914; } /* Multiplayer absolute team color: NS = orange, EW = raspberry. The net-client adds .team-raspberry to for EW-team players so their own seats render raspberry and opponents render orange, carrying the lobby team pick through into the game view. */ body.team-raspberry { --team-us: #c94870; --team-them: #d97a2e; } html { overflow: hidden; } body { font-family: 'Boogaloo', cursive; background: var(--bg); min-height: 100vh; color: var(--text); overflow: hidden; } /* Auto-fit on shorter viewports — the table is hardcoded at 800x665px and with the score bar / status bar / header on top the layout totals ~870px tall. Anything shorter than that overflows behind overflow:hidden and the bottom of the table gets clipped. Scaling the whole game-wrap proportionally lets it fit any viewport, matching what manual browser zoom would do. */ @media (max-height: 870px) { #game-wrap { transform: scale(calc(100vh / 870)); transform-origin: top center; } } /* ── HEADER ── */ header { text-align: center; margin-bottom: 0.3rem; } .menu-btn { position: fixed; top: 0.5rem; left: 0.4rem; /* Higher than .setup-screen / .lobby-screen (200) and .modal-overlay (250 below) so the menu is always reachable when shown. The selectors below hide it on the start screens — those have their own navigation. */ z-index: 300; font-family: 'Boogaloo', cursive; font-size: 0.9rem; background: var(--cream); color: var(--ink); border: 2px solid var(--shadow); border-radius: 20px; padding: 0.3rem 0.8rem; box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; transition: all 0.12s; } .menu-btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--shadow); } .menu-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--shadow); } /* Hide menu on the start screens — solo setup uses a .show class, MP lobby uses inline display:flex (set by the head shim and by net-client showLobby). The menu only applies during gameplay; start screens have their own navigation (Back to single-player link, Leave Room button). */ body:has(.setup-screen.show) .menu-btn, body:has(.lobby-screen[style*="flex"]) .menu-btn { display: none; } /* Only haze during true scrimmed modals — drop-zone-wrap and bima-overlay show without darkening the rest of the page, so a hazed menu button there reads as broken (dim button next to a fully-bright page). */ body:has(.modal-overlay.show) .menu-btn, body:has(.decl-overlay.show) .menu-btn { filter: brightness(0.4); pointer-events: none; } h1 { font-family: 'Boogaloo', cursive; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--purple); letter-spacing: 0.04em; -webkit-text-stroke: 3px var(--felt); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--felt); line-height: 1; font-style: italic; } /* ── SCORE BAR ── */ .score-bar { display: flex; gap: 0.5rem; width: 100%; max-width: 800px; margin-bottom: 0.3rem; } .score-box { flex: 1; background: #fff; border: 3px solid var(--shadow); border-radius: 42% 58% 38% 62% / 52% 48% 52% 48%; box-shadow: 3px 3px 0 var(--shadow); padding: 0.15rem 0.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .score-box .label { font-family: 'Boogaloo', cursive; font-size: clamp(0.75rem, 1.8vw, 0.9rem); color: var(--cream); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .score-box .val { font-family: 'Boogaloo', cursive; font-size: 1.1rem; color: var(--ink); line-height: 1.1; } .score-box.team-us .val { color: var(--ink); } .score-box.team-them .val { color: var(--ink); } .score-box.team-us { background: var(--team-us); } .score-box.team-them { background: var(--team-them); } .score-box.target { background: var(--felt); border-color: var(--shadow); } .score-box.target .val { font-size: 1.1rem; color: var(--ink); } .score-box.split-box { flex-direction: row; justify-content: center; align-items: flex-end; gap: 0; padding: 0.15rem 0.5rem; } .split-sep { font-family: 'Boogaloo', cursive; font-size: clamp(0.75rem, 1.8vw, 0.9rem); color: var(--cream); padding: 0 0.3em; } .split-col { display: flex; flex-direction: column; align-items: center; } .split-col .label { font-size: clamp(0.75rem, 1.8vw, 0.9rem); } .split-col .val { font-size: 1.1rem; } .val-row { display: flex; align-items: baseline; justify-content: center; gap: 0.2rem; } .score-box.target .val-row { justify-content: center; gap: 1.8rem; } .val-row .val { flex: 0; } .val-row .val + .val { margin-left: 0.3rem; } .sub-label { font-family: 'Boogaloo', cursive; font-size: 0.75rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; } /* ── TABLE ── */ .table-wrap { width: 720px; min-width: 720px; max-width: 800px; background: var(--felt); border-radius: 48% 52% 45% 55% / 42% 48% 56% 62%; border: 5px solid var(--shadow); box-shadow: 6px 6px 0 var(--shadow), inset 0 0 60px rgba(0,0,0,0.15), inset 0 -40px 40px rgba(0,0,0,0.12); padding: 0.8rem 1.6rem 0.8rem; display: grid; grid-template-rows: 109px 6px 352px 6px 112px 52px; grid-template-columns: 104px 540px 104px; gap: 0.25rem; position: relative; width: 800px; min-width: 800px; max-width: 800px; height: 665px; box-sizing: border-box; overflow: visible; } /* ── PLAYER NAME BADGES ── */ .player-name { position: absolute; font-family: 'Boogaloo', cursive; /* 17px (was 20px) — fits 5-char MP names like "Mommy" / "Wxxxx" in the ~52px slot between trump and dealer badges. At 20px those overflowed the slot (gaps dropped to 1px or even -1px = overlap). translateY(2px) nudges the name's optical centre down to match the badges' centre line — at 20px they were 2px high. */ font-size: 17px; z-index: 26; pointer-events: none; transform: translate(-50%, 2px); line-height: 1; } .player-name-us { color: var(--team-us); } .player-name-them { color: var(--team-them); } /* ── PLAYER AREAS ── */ .player-area { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .player-area.north { grid-column: 2; grid-row: 1; min-height: 109px; height: 109px; overflow: visible; align-items: center; justify-content: center; padding-top: 0; margin-top: -4px; } .player-area.west { grid-column: 1; grid-row: 3; align-items: center; padding-left: 0; padding-right: 0; height: 352px; min-height: 352px; max-height: 352px; width: 104px; min-width: 104px; max-width: 104px; justify-content: center; overflow: visible; position: relative; } .player-area.east { grid-column: 3; grid-row: 3; align-items: center; padding-left: 0; padding-right: 0; height: 352px; min-height: 352px; max-height: 352px; width: 104px; min-width: 104px; max-width: 104px; justify-content: center; overflow: visible; position: relative; margin-left: -10px; } .player-area.west > .cards-row, .player-area.east > .cards-row { margin-top: 0; } /* Player label clusters — absolutely positioned on table-wrap */ /* Player labels now in SVG overlay */ .badge { font-family: 'Boogaloo', cursive; font-size: 0.9rem; letter-spacing: 0.04em; padding: 0 0.35rem; border-radius: 20px; border: 2px solid var(--shadow); box-shadow: 2px 2px 0 var(--shadow); display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 22px; padding-top: 2px; box-sizing: border-box; } .badge.dealer { background: var(--gold); color: var(--ink); border-color: var(--shadow); } /* Dealer deck stack */ .dealer-deck { position: absolute; display: none; z-index: 10; } .dealer-deck.show { display: block; } .dealer-deck .deck-card { position: absolute; width: 66px; height: 94px; border-radius: 4px; background: var(--purple); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 10px); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); } .dealer-deck .deck-card:nth-child(1) { transform: translate(0px, 0px); } .dealer-deck .deck-card:nth-child(2) { transform: translate(-2px, -2px); } .dealer-deck .deck-card:nth-child(3) { transform: translate(-4px, -4px); } .dealer-deck .deck-card:nth-child(4) { transform: translate(-6px, -6px); } /* ── SHUFFLE ANIMATION ── */ .shuffle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; } .shuffle-card { position: absolute; width: 66px; height: 94px; border-radius: 4px; background: var(--purple); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 10px); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); opacity: 0; will-change: transform, opacity; } /* Spray out phase */ .shuffle-card.spray { animation: shuffleSpray var(--spray-dur, 0.35s) ease-out forwards; animation-delay: var(--spray-delay, 0s); } @keyframes shuffleSpray { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 100% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(1); } } /* Cascade back phase */ .shuffle-card.cascade { animation: shuffleCascade var(--cascade-dur, 0.25s) ease-in forwards; animation-delay: var(--cascade-delay, 0s); } @keyframes shuffleCascade { 0% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(1); } } .badge.partner { background: none; border-color: transparent; box-shadow: none; color: var(--gold); font-size: 1rem; } .badge.active { background: var(--red-orange); color: var(--gold); border-color: var(--shadow); animation: pulse 0.8s ease-in-out infinite; min-width: 26px; justify-content: center; } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } } /* card rows for north/south (horizontal) */ .cards-row { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; align-items: center; } /* North: keep everything in one row so side cards sit to the right */ .player-area.north .cards-row { flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0; min-height: 94px; } .player-area.south { grid-column: 2; grid-row: 5; min-height: 112px; height: 112px; overflow: visible; justify-content: center; align-items: center; display: flex; flex-direction: column; } .player-area.south .cards-row { flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0; position: relative; top: 9px; } .player-area.south .cards-row.full-hand { display: flex; justify-content: center; align-items: center; gap: 0; } /* ── DEAL WOBBLE ── */ /* North & South: alternate up/down */ .player-area.north .cards-row:not(.neat) .card:nth-child(odd) { transform: rotate(-2deg) translateY(-3px); } .player-area.north .cards-row:not(.neat) .card:nth-child(even) { transform: rotate(2deg) translateY(3px); } .player-area.south .cards-row:not(.neat) .card:nth-child(odd) { transform: rotate(-2deg) translateY(-3px); } .player-area.south .cards-row:not(.neat) .card:nth-child(even) { transform: rotate(2deg) translateY(3px); } /* East & West: alternate up/down (portrait cards stacked vertically) */ .player-area.east .cards-row:not(.neat) .card:nth-child(odd) { transform: translateX(-3px) rotate(-2deg); } .player-area.east .cards-row:not(.neat) .card:nth-child(even) { transform: translateX(3px) rotate(2deg); } .player-area.west .cards-row:not(.neat) .card:nth-child(odd) { transform: translateX(-3px) rotate(-2deg); } .player-area.west .cards-row:not(.neat) .card:nth-child(even) { transform: translateX(3px) rotate(2deg); } /* Neat: cards settle with transition */ .cards-row .card { transition: transform 0.15s ease, margin-right 0.12s ease-out; } .cards-row.neat .card { transform: none !important; } .side-row .card { transition: transform 0.35s ease; } .side-row.neat .card { transform: none !important; } .player-area .side-row.neat .card:first-child, .player-area .side-row.neat .card:last-child { transform: none !important; } .player-area.south .cards-row .card { margin-right: -23px; } .player-area.south .cards-row .card:last-child { margin-right: 0; } .player-area.north .cards-row .card { margin-right: -23px; } .player-area.north .cards-row .card:last-child { margin-right: 0; } /* card columns for east/west — physically sideways cards */ .player-area.west .cards-row, .player-area.east .cards-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0; width: 94px; min-width: 94px; } .player-area.west .cards-row .card, .player-area.east .cards-row .card, .player-area.west .cards-row .card.small, .player-area.east .cards-row .card.small { width: 94px !important; height: 66px !important; margin-bottom: -23px; } .player-area.west .cards-row .card:last-child, .player-area.east .cards-row .card:last-child, .player-area.west .cards-row .card.small:last-child, .player-area.east .cards-row .card.small:last-child { margin-bottom: 0; } /* hide text on landscape cards */ .player-area.west .cards-row .card .card-corner, .player-area.east .cards-row .card .card-corner, .player-area.west .cards-row .card .card-mid, .player-area.east .cards-row .card .card-mid { display: none; } /* ── CARDS ── */ .card { width: 58px; height: 82px; background: var(--card-bg); border: 3px solid var(--ink); border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 5px; box-shadow: 3px 3px 0 var(--ink); flex-shrink: 0; transition: transform 0.12s, box-shadow 0.12s; cursor: default; position: relative; } .card.played { opacity: 0; width: 0 !important; margin-right: 0 !important; transform: scale(0) !important; transition: opacity 80ms ease-out, width 0.15s ease-out, height 0.15s ease-out, margin-right 0.15s ease-out, margin-bottom 0.15s ease-out, transform 80ms ease-out; } .player-area.west .card.played, .player-area.east .card.played { height: 0 !important; margin-bottom: 0 !important; } /* ── Card flight animation (play-to-trick glide) ── */ /* Card appear animation at trick slot */ .card-slot-appear { opacity: 0; transform: scale(0.92); transition: opacity 150ms ease-out, transform 150ms ease-out; } .card-slot-appear.visible { opacity: 1; transform: scale(1); } .card.playable { cursor: pointer; border: 3px solid var(--hotpink); box-shadow: 3px 3px 0 var(--hotpink); background: var(--card-bg); } .card.playable:hover { transform: translateY(-14px) !important; transition: transform 0.1s ease !important; } .card.declarable { border: 3px solid var(--hotpink); box-shadow: 3px 3px 0 var(--hotpink); } .card.declarable:hover { transform: translateY(-14px) !important; transition: transform 0.1s ease !important; } .card.played-card { box-shadow: 3px 3px 0 var(--hotpink); border: 3px solid var(--hotpink); } .card.red { color: var(--red-orange); } .card.black { color: var(--ink); } .card.face-down { background: var(--purple); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 10px); border-color: var(--ink); cursor: default; } .card.trump-proposal { box-shadow: 3px 3px 0 var(--hotpink); border: 3px solid var(--hotpink); transform: translateY(-4px); } .card-corner { display:flex; flex-direction:column; align-items:center; line-height:1; position: absolute; } .card-corner.top { top: 4px; left: 5px; } .card-corner.bot { bottom: 4px; right: 5px; transform:rotate(180deg); } .card-corner .rank { font-family:'Boogaloo',cursive; font-size:0.85rem; font-weight:700; } .card-corner .sym { font-size:0.65rem; margin-top:1px; } .card-mid { text-align:center; font-size:1.3rem; line-height:1; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); } /* Smaller cards for computer hands */ .card.small { width: 52px; height: 74px; padding: 3px 4px; } .card.small .card-corner .rank { font-size: 0.75rem; } .card.small .card-corner .sym { font-size: 0.58rem; } .card.small .card-mid { font-size: 1.15rem; } /* Larger cards for south hand and trick centre */ .card.large { width: 66px; height: 94px; padding: 4px 5px; } .card.large .card-corner .rank { font-size: 0.95rem; } .card.large .card-corner .sym { font-size: 0.72rem; } .card.large .card-mid { font-size: 1.45rem; } /* side card group */ .side-group { display:flex; flex-direction:column; align-items:center; } .player-area.north .side-group { margin-left: 2.4rem; align-self: center; } .player-area.south .side-group { margin-left: 2.4rem; align-self: center; } .player-area.east .side-group, .player-area.west .side-group { margin-top: 0.6rem; } .side-row { display:flex; gap:0; flex-direction: row; position: relative; } /* North: fan outward — left card tilts left, right card tilts right */ .player-area.north .side-row { gap: 0.4rem; } .player-area.north .side-row .card:first-child { transform: rotate(-8deg) translateY(4px); } .player-area.north .side-row .card:last-child { transform: rotate(8deg) translateY(4px); } /* South: overlap second card over first */ .player-area.south .side-row .card:first-child { transform: rotate(-6deg) translateY(6px); margin-right: -24px; z-index: 1; } .player-area.south .side-row .card:last-child { transform: rotate(6deg) translateY(6px); z-index: 2; } /* East/West side cards: landscape stacked vertically */ .side-cards-ew { margin-top: 0; } .side-cards-ew .side-row { flex-direction: column; gap: 0; align-items: center; } .side-cards-ew .side-row .card { width: 94px !important; height: 66px !important; margin-bottom: -20px; } .side-cards-ew .side-row .card:last-child { margin-bottom: 0; } #side-west .card, #side-east .card { width: 94px !important; height: 66px !important; } /* West: both tilt right, increasing (top card less, bottom more) */ .player-area.west .side-row .card:first-child { transform: rotate(4deg); } .player-area.west .side-row .card:last-child { transform: rotate(12deg); } /* East: mirror of west — top card more tilt, bottom less */ .player-area.east .side-row .card:first-child { transform: rotate(-4deg); } .player-area.east .side-row .card:last-child { transform: rotate(-12deg); } /* ── TRICK CENTRE ── */ .trick-centre { grid-column: 2; grid-row: 3; display: grid; grid-template-areas: ". n ." "w c e" ". s ."; grid-template-columns: minmax(104px, 1fr) minmax(160px, 1fr) minmax(104px, 1fr); grid-template-rows: 115px 122px 115px; gap: 0.25rem; min-height: 90px; position: relative; } .trick-slot { display:flex; flex-direction:column; align-items:center; gap:2px; } .trick-slot.n { grid-area:n; justify-content: center; } .trick-slot.w { grid-area:w; justify-content: center; align-items: flex-end; } .trick-slot.c { grid-area:c; position: relative; } .trick-slot.e { grid-area:e; justify-content: center; align-items: flex-start; } .trick-slot.s { grid-area:s; justify-content: center; } .bima-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 18%; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 0.35s ease; } .bima-overlay.show { opacity: 1; } .bima-line1, .bima-line2 { position: absolute; font-family: 'Boogaloo', cursive; font-size: 2.6rem; font-style: italic; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; } /* Anchor matches the declarations drop-zone pair: top line left-anchored at left:135px, bottom line right-anchored at right:133px, both rotated -8deg. The two-line stagger reads as a torn-page label across the table. */ /* Both lines truly centered horizontally on the parent via 50% + translateX, and vertically spaced for clear two-line stacking. */ .bima-line1, .bima-line2 { left: 50%; transform: translateX(-50%); text-align: center; color: var(--hotpink); } .bima-line1 { top: 5%; } .bima-line2 { top: 18%; } /* trump indicator centre */ .trump-centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width: 100px; height: 100px; border-radius: 50%; /* Outer ring: conic-gradient stripes */ background: conic-gradient( var(--felt-deep) 0deg, var(--felt-deep) 30deg, var(--felt) 30deg, var(--felt) 60deg, var(--felt-deep) 60deg, var(--felt-deep) 90deg, var(--felt) 90deg, var(--felt) 120deg, var(--felt-deep) 120deg, var(--felt-deep) 150deg, var(--felt) 150deg, var(--felt) 180deg, var(--felt-deep) 180deg, var(--felt-deep) 210deg, var(--felt) 210deg, var(--felt) 240deg, var(--felt-deep) 240deg, var(--felt-deep) 270deg, var(--felt) 270deg, var(--felt) 300deg, var(--felt-deep) 300deg, var(--felt-deep) 330deg, var(--felt) 330deg, var(--felt) 360deg ); border: 3px solid var(--shadow); box-shadow: 0 0 0 1px var(--shadow), 4px 4px 0 var(--shadow); transition: background 0.3s; pointer-events: none; z-index: 5; } /* Inner circle mask — felt face */ .trump-centre::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background-color: var(--felt); background-image: none; border: 1.5px solid var(--shadow); z-index: 1; } /* KY logo on idle teal face */ .ky-logo { position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - 1px), -50%) rotate(-20deg); z-index: 2; pointer-events: none; opacity: 1; transition: opacity 0.08s; display: flex; flex-direction: column; align-items: center; } .trump-centre.active .ky-logo { opacity: 0; } .trump-centre.flipping-out .ky-logo { opacity: 0; transition: opacity 0.05s; } .trump-centre.flipping-in .ky-logo { opacity: 0; } .ky-line { display: block; font-family: 'Boogaloo', cursive; font-style: italic; color: var(--purple); -webkit-text-stroke: 1px var(--felt); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--felt); white-space: nowrap; line-height: 0.85; } .ky-line:first-child { transform: translateX(-6px); } .ky-line:last-child { transform: translateX(12px); margin-top: -2px; } .ky-big { font-size: 2.2rem; } .ky-small { font-size: 1.6rem; } /* Push text above the mask */ .trump-centre > *:not(.ky-logo) { position: relative; z-index: 2; } .trump-centre.active::before { background-color: var(--felt); background-image: none; } .trump-centre.decl-back::before { background-color: var(--felt); background-image: none; } @keyframes chip-flip-out { from { transform: translate(-50%, -50%) scaleX(1); } to { transform: translate(-50%, -50%) scaleX(0); } } @keyframes chip-flip-in { from { transform: translate(-50%, -50%) scaleX(0); } to { transform: translate(-50%, -50%) scaleX(1); } } .trump-centre.flipping-out { animation: chip-flip-out 0.15s ease-in forwards; } .trump-centre.flipping-in { animation: chip-flip-in 0.15s ease-out forwards; } .trump-sym { font-size:1.8rem; line-height:1; } .dealer-side-centre.fading { opacity: 0; transition: opacity 0.5s ease; } .dealer-side-centre { display: flex; flex-direction: row; gap: 0; align-items: center; justify-content: center; margin-top: 0.3rem; } /* N/S slots: portrait cards side by side */ #dealer-side-n, #dealer-side-s { flex-direction: row; gap: 0; align-items: center; } #dealer-side-s { margin-top: 20px; } #dealer-side-n .card, #dealer-side-s .card { width: 66px !important; height: 94px !important; } #dealer-side-n .card:first-child, #dealer-side-s .card:first-child { z-index: 1; } #dealer-side-n .card:last-child, #dealer-side-s .card:last-child { margin-left: -20px; z-index: 2; } /* North: flipped card leans toward North (top of table) */ #dealer-side-n .card.trump-proposal { z-index: 2; transform: rotate(10deg) translateY(-8px); } /* South: flipped card leans toward South (bottom of table) */ #dealer-side-s .card.trump-proposal { z-index: 2; transform: rotate(10deg) translateY(4px); } /* E/W slots: portrait cards with lean toward dealer */ #dealer-side-e, #dealer-side-w { flex-direction: column; gap: 0; margin-top: 0; align-items: center; } #dealer-side-e .card, #dealer-side-w .card { width: 66px !important; height: 94px !important; } #dealer-side-e .card:first-child, #dealer-side-w .card:first-child { z-index: 1; } #dealer-side-e .card:last-child, #dealer-side-w .card:last-child { margin-top: -28px; z-index: 2; } /* West: both cards lean toward West */ #dealer-side-w .card:first-child { transform: rotate(-15deg); } #dealer-side-w .card.trump-proposal { z-index: 2; transform: rotate(-22deg) translateX(-4px); } /* East: both cards lean toward East */ #dealer-side-e .card:first-child { transform: rotate(15deg); } #dealer-side-e .card.trump-proposal { z-index: 2; transform: rotate(22deg) translateX(4px); } /* Hide text on face-down dealer side N cards */ #dealer-side-n .card.face-down .card-corner, #dealer-side-n .card.face-down .card-mid { display: none; } /* trump announcement banner */ .trump-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--gold); color: var(--ink); border: 3px solid var(--shadow); border-radius: 44% 56% 50% 50% / 58% 42% 60% 40%; box-shadow: 5px 5px 0 var(--shadow); padding: 0.6rem 1.2rem; min-width: 160px; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Boogaloo', cursive; font-size: 1.5rem; white-space: nowrap; z-index: 50; text-align: center; animation: bannerPop 0.25s ease-out; } @keyframes bannerPop { from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* ── STATUS ── */ .status-bar { width: 100%; max-width: 800px; background: var(--felt); border: 3px solid var(--shadow); border-radius: 35% 65% 60% 40% / 55% 45% 55% 45%; box-shadow: 3px 3px 0 var(--shadow); padding: 0.18rem 1rem 0.22rem; text-align: center; display: flex; gap: 0.6rem; align-items: center; justify-content: center; flex-wrap: nowrap; overflow: hidden; height: 2.2rem; min-height: 2.2rem; margin-bottom: 0.3rem; } .status-phase { display: none; } .status-msg { font-family:'Boogaloo',cursive; color:var(--ink); font-size:1.1rem; letter-spacing:0.02em; } /* ── ACTIONS ── */ .action-area { grid-column: 1 / -1; grid-row: 6; display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center; align-items: center; padding: 0; margin-top: 0; align-self: flex-end; padding-bottom: 0; margin-top: 4px; } .action-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; align-items: center; } button { font-family:'Boogaloo',cursive; font-size:1rem; letter-spacing:0.05em; padding:0.35rem 1.3rem; border:3px solid var(--shadow); background-color:#fff; color:var(--ink); cursor:pointer; transition:all 0.12s; border-radius: 20px; box-shadow: 3px 3px 0 var(--shadow); } button:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--shadow); background-image: linear-gradient(rgba(157,111,212,0.35), rgba(157,111,212,0.35)); } button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--shadow); } button.primary { background-color:var(--red-orange); color:var(--cream); } button.suit-btn { background-color: var(--gold); color: var(--ink); text-shadow: none; } button.suit-btn .suit-sym { font-size: 1.3rem; vertical-align: middle; line-height: 1; } button.suit-btn.red-suit { color: var(--red-orange); } button.go-btn { background-color: var(--gold); color: var(--ink); } button.go-btn .suit-sym { font-size: 1.3rem; vertical-align: middle; line-height: 1; } button.pass-btn { background-color: var(--red-orange); color: var(--cream); } button.accept-btn { background-color: var(--gold); color: var(--red-orange); } button.accept-btn .suit-sym { font-size: 1.3rem; vertical-align: baseline; line-height: 0; } .bima-banner { font-family: 'Boogaloo', cursive; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--ink); background: var(--gold); border: 3px solid #c49a10; border-radius: 20px; box-shadow: 3px 3px 0 #8a6a00; padding: 0.18rem 1.1rem 0.22rem; text-shadow: none; white-space: nowrap; } button:disabled { opacity:0.35; cursor:not-allowed; } /* ── LOG ── */ /* Anchored bottom-left so it doesn't fight the bottom-right chat panel. Slides in from the left edge on hover/open. text-align:right pushes the toggle button to the right side of the wrap so it stays visible when the wrap is shifted off-screen to the left. */ .log-wrap { position: fixed; bottom: 1rem; left: -190px; width: 280px; z-index: 50; text-align: right; transition: left 0.3s ease; } .log-wrap:hover { left: -170px; } .log-wrap.open { left: 1rem; } .log-toggle { background: none; border: none; box-shadow: none; color: var(--ink); font-family: 'Boogaloo', cursive; font-size: 0.9rem; cursor: pointer; padding: 0.2rem 0.4rem; opacity: 0.7; } .log-toggle:hover { opacity: 1; } .log { width:100%; background-color:var(--cream); border:3px solid var(--shadow); border-radius: 38% 62% 55% 45% / 52% 42% 58% 48%; box-shadow: 4px 4px 0 var(--shadow); padding: 1rem 1.2rem; max-height:130px; overflow-y:auto; margin-top: 0.3rem; overflow-x: visible; } .log-entry { font-size:0.9rem; color:var(--ink) !important; padding:0.15rem 0; border-bottom:1px solid rgba(157,111,212,0.2); font-weight:600; font-family:'Boogaloo',cursive; } .log-entry.hi { color:var(--cornflower) !important; font-weight:700; } .log-entry.good{ color:var(--ink) !important; font-weight:700; } .log-entry.bad { color:var(--red-orange) !important; font-weight:700; } .card.dragging { opacity: 0.35; transform: scale(0.92) rotate(-3deg); } .card.drag-over { transform: translateY(-12px) rotate(2deg); box-shadow: 5px 8px 0 var(--ink); } .card[draggable="true"] { cursor: grab; } .card[draggable="true"]:active { cursor: grabbing; } /* ── DECLARATION DROP ZONE ── */ .decl-drop-zone-wrap { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-48% + 20px)); z-index: 30; width: 470px; flex-direction: column; align-items: center; gap: 0.3rem; opacity: 0; pointer-events: none; transition: opacity 0.08s ease; } .decl-drop-zone-wrap.show { opacity: 1; pointer-events: auto; } /* Caller + heading stack vertically and center horizontally above the drop zone (mirrors the bima banner pair: no rotation, two-line vertical stack via top values + translateX(-50%)). */ .decl-trump-caller { position: absolute; top: calc(17.5% + 12px); left: 50%; transform: translateX(-50%); font-family: 'Boogaloo', cursive; font-size: 2.6rem; font-style: italic; line-height: 1; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.04em; text-align: center; pointer-events: none; white-space: nowrap; z-index: 40; opacity: 0; transition: opacity 0.4s ease; } .decl-trump-caller.revealed { opacity: 1; } .decl-drop-zone-heading { position: absolute; top: calc(17.5% + 63px); left: 50%; transform: translateX(-50%); font-family: 'Boogaloo', cursive; font-size: 2.6rem; font-style: italic; line-height: 1; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.04em; text-align: center; pointer-events: none; white-space: nowrap; z-index: 40; opacity: 0; transition: opacity 0.4s ease; } .decl-drop-zone-heading.show { opacity: 1; } .decl-drop-zone-countdown { position: absolute; top: 120px; right: 18px; font-family: 'Boogaloo', cursive; font-size: 2.2rem; font-style: italic; color: var(--cornflower); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.04em; line-height: 1; text-align: right; pointer-events: none; white-space: nowrap; z-index: 40; opacity: 0; transition: opacity 0.3s ease, color 0.2s ease; } .decl-drop-zone-countdown.show { opacity: 1; } .decl-drop-zone-countdown.urgent { color: var(--hotpink); animation: decl-countdown-pulse 0.8s ease-in-out infinite; } .decl-modal-countdown { font-family: 'Boogaloo', cursive; font-size: 2.2rem; font-style: italic; color: var(--cornflower); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.04em; text-align: center; margin: 0.2rem 0 0.6rem; pointer-events: none; transition: color 0.2s ease; } .decl-modal-countdown.urgent { color: var(--hotpink); animation: decl-countdown-pulse 0.8s ease-in-out infinite; } @keyframes decl-countdown-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .decl-modal h2 { font-family: 'Boogaloo', cursive; color: var(--cornflower); font-size: 2.4rem; margin-top: 0.1rem; margin-bottom: 0.6rem; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.06em; line-height: 1.1; font-style: italic; } .decl-drop-zone { margin-top: 18px; width: 100%; height: 232px; min-height: 232px; max-height: 232px; background: var(--felt-deep); border: 3px solid var(--shadow); border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%; box-shadow: 4px 4px 0 var(--shadow); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: center; padding: 0.5rem 0.8rem; position: relative; transition: background 0.15s; } .decl-drop-zone.shake { animation: dropShake 0.4s ease; } @keyframes dropShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .decl-drop-label { font-family: 'Boogaloo', cursive; font-size: 1.3rem; color: var(--ink); pointer-events: none; text-align: center; line-height: 1.25; } .decl-drop-label .decl-drop-sub { display: block; margin-top: 0.3rem; font-style: italic; } .decl-drop-zone .card { width: 66px; height: 94px; cursor: pointer; } .decl-drop-zone .card:hover { transform: translateY(-4px); } .decl-drop-zone-btns { display: flex; gap: 0.5rem; justify-content: center; margin-top: -20px; position: relative; z-index: 10; } .decl-drop-zone-btns button { min-width: 180px; } /* ── BELLA FLASH ── */ .bella-flash { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 200; border: 4px solid var(--shadow); border-radius: 42% 58% 48% 52% / 52% 44% 56% 48%; box-shadow: 6px 6px 0 var(--shadow); padding: 1rem 1.5rem; font-family: 'Boogaloo', cursive; text-align: center; pointer-events: none; animation: bellaFlash 2s ease forwards; background: var(--gold); } .bella-flash-seat { border: 3px solid var(--shadow); border-radius: 55% 45% 50% 50% / 48% 55% 45% 52%; box-shadow: 2px 2px 0 var(--shadow); padding: 0.5rem 1.2rem 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .bella-flash-seat.seat-us { background: var(--team-us); } .bella-flash-seat.seat-them { background: var(--team-them); } .bella-flash-name { font-family: 'Boogaloo', cursive; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); } .bella-flash-title { font-size: 2rem; font-style: italic; color: var(--purple); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.04em; margin: 0; } .bella-flash-cards { display: flex; gap: 0.4rem; justify-content: center; margin: 0.4rem 0; } .bella-flash-cards .card { width: 36px; height: 52px; cursor: default; } .bella-flash-cards .card .card-corner .rank { font-size: 0.56rem; } .bella-flash-cards .card .card-corner .sym { font-size: 0.44rem; } .bella-flash-cards .card .card-mid { font-size: 0.9rem; } .bella-flash-badge { display: inline-block; font-family: 'Boogaloo', cursive; font-size: 0.9rem; padding: 0.12rem 0.55rem; border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%; border: 2px solid var(--shadow); box-shadow: 1px 1px 0 var(--shadow); background: var(--hotpink); color: var(--cream); margin-top: 0.3rem; } @keyframes bellaFlash { 0% { opacity:0; transform: translate(-50%,-50%) scale(0.6); } 8% { opacity:1; transform: translate(-50%,-50%) scale(1.05); } 14% { transform: translate(-50%,-50%) scale(1); } 85% { opacity:1; transform: translate(-50%,-50%) scale(1); } 100% { opacity:0; transform: translate(-50%,-50%) scale(1); } } /* ── DECLARATION MODAL ── */ .decl-overlay { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; padding: 0.8rem; pointer-events: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.08s ease; } .decl-overlay.show { opacity: 1; pointer-events: all; } .decl-modal { background: var(--felt-deep); border: 4px solid var(--shadow); border-radius: 38% 62% 48% 52% / 44% 42% 54% 56%; box-shadow: 6px 6px 0 var(--shadow); padding: 1.4rem 1.8rem 1rem; width: 100%; max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; } .decl-seats { display: grid; grid-template-areas: ". north ." "west . east" ". south ."; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 0.4rem; margin-bottom: 0.7rem; align-items: center; justify-items: center; } /* Suppress loser overlay until resolution */ .decl-seat-south { grid-area: south; } .decl-seat-west { grid-area: west; } .decl-seat-east { grid-area: east; } .decl-seat { background: var(--team-them); border: 3px solid var(--shadow); border-radius: 62% 38% 44% 56% / 50% 58% 42% 50%; box-shadow: 3px 3px 0 var(--shadow); overflow: visible; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0.4rem 0.7rem 0.6rem; justify-content: flex-start; width: 250px; height: 180px; transition: background-color 0.3s, opacity 0.3s, filter 0.3s; } .decl-seat-north { grid-area: north; padding-top: 0.9rem; border-radius: 45% 55% 44% 56% / 50% 58% 42% 50%; } .decl-seat-south, .decl-seat-north { background-color: var(--team-us); } .decl-seat.winner { border-color: var(--shadow); } .decl-seat.loser { position: relative; } .decl-seat.loser::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.55); border-radius: 62% 38% 44% 56% / 50% 58% 42% 50%; pointer-events: none; z-index: 2; animation: loserFade 0.3s ease forwards; } .decl-seat-north.loser::after { border-radius: 45% 55% 44% 56% / 50% 58% 42% 50%; } @keyframes loserFade { from { opacity: 0; } to { opacity: 1; } } .decl-seat.loser .decl-seat-verdict.killed { z-index: 3; position: relative; } .decl-seat.loser .decl-claim { z-index: 3; position: relative; } .decl-seat.loser .decl-bella-section { position: relative; z-index: 3; } .decl-seat.loser .decl-seat-verdict.counts { z-index: 3; position: relative; opacity: 1 !important; filter: none !important; } .decl-seat.loser .decl-seat-verdict.bella-through { position: relative; z-index: 3; background: var(--gold); color: var(--ink); opacity: 1 !important; filter: none !important; } .decl-seat-verdict { font-family: 'Boogaloo', cursive; font-size: 0.9rem; padding: 0.12rem 0.55rem; border-radius: 20px; border: 2px solid var(--shadow); margin-top: 0.1rem; box-shadow: 1px 1px 0 var(--shadow); } .decl-seat-verdict.counts { background: var(--gold); color: var(--ink); } .decl-seat-verdict.killed { background: var(--red-orange); color: var(--cream); } .decl-seat-name { font-family: 'Boogaloo', cursive; font-size: 1.1rem; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 0.15rem 0.6rem 0.1rem; background: none; color: var(--cream); } .decl-seat-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; } .decl-claim { font-family: 'Boogaloo', cursive; font-size: 1.1rem; color: var(--ink); } .decl-reveal { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .decl-cards-row { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: center; max-width: 100%; min-height: 52px; } .decl-cards-row .card { width: 36px; height: 52px; } .decl-cards-row .card .card-corner .rank { font-size: 0.56rem; } .decl-cards-row .card .card-corner .sym { font-size: 0.44rem; } .decl-cards-row .card .card-mid { font-size: 0.9rem; } .decl-value { font-family: 'Boogaloo', cursive; font-size: 1.1rem; color: var(--ink); text-shadow: none; } .decl-seat-south .decl-value, .decl-seat-north .decl-value { color: var(--ink); } .decl-none { color: var(--ink); font-style: normal; font-size: 1.1rem; font-family: 'Boogaloo', cursive; letter-spacing: 0.02em; min-height: 52px; display: flex; align-items: center; justify-content: center; } .decl-pending { font-family: 'Boogaloo', cursive; color: var(--ink); font-size: 1.1rem; animation: pulse 0.8s ease-in-out infinite; } .decl-result { background: rgba(255,255,255,0.75); border: 2px solid var(--shadow); border-radius: 55% 45% 60% 40% / 42% 55% 45% 58%; box-shadow: 2px 2px 0 var(--shadow); padding: 0.45rem 0.8rem; margin-bottom: 0; font-family: 'Boogaloo', cursive; font-size: 0.95rem; color: var(--ink); min-height: 0; } .decl-result:empty { visibility: hidden; } .decl-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; min-height: 2.8rem; align-items: center; margin-top: 0.5rem; } /* ── DECLARATIONS SIDE PANEL ── */ .table-and-panel { display: flex; gap: 0.5rem; width: 100%; max-width: 1100px; align-items: flex-start; justify-content: center; margin-top: 0.3rem; margin-bottom: 0; position: relative; } .table-and-panel .table-wrap { flex: 0 0 800px; width: 800px; } .decl-side-panel { display: none; width: 200px; background: var(--felt); border: 3px solid var(--shadow); border-radius: 48% 52% 42% 58% / 60% 40% 55% 45%; box-shadow: 4px 4px 0 var(--shadow); padding: 0.7rem 0.8rem; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); z-index: 20; } .side-panel-title { font-family: 'Boogaloo', cursive; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--purple); text-transform: uppercase; margin-bottom: 0.6rem; text-align: center; border-bottom: 2px solid #eee; padding-bottom: 0.4rem; } .side-panel-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; color: var(--ink); padding: 0.2rem 0; border-bottom: 1px solid #f0f0f0; gap: 0.3rem; font-weight: 600; } .side-panel-row.side-panel-highlight { color: var(--ink); } .side-panel-pts { font-family: 'Boogaloo', cursive; color: var(--purple); font-size: 0.9rem; flex-shrink: 0; } /* ── QUIT CONFIRMATION MODAL ── */ .quit-modal { background: var(--felt); border: 4px solid var(--shadow); border-radius: 50% 50% 46% 54% / 48% 52% 48% 52%; box-shadow: 8px 8px 0 var(--shadow); padding: 3rem 3rem 2.5rem; min-width: 280px; max-width: 420px; width: 88%; text-align: center; } .quit-modal h2 { font-family: 'Boogaloo', cursive; font-size: 2rem; color: var(--cornflower); font-style: italic; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); margin-bottom: 0.5rem; } .quit-modal p { font-family: 'Boogaloo', cursive; font-size: 1rem; color: var(--ink); margin-bottom: 1.4rem; } .quit-modal-btns { display: flex; gap: 0.8rem; justify-content: center; } .quit-btn { font-family: 'Boogaloo', cursive; font-size: 1rem; border: 3px solid var(--shadow); border-radius: 20px; padding: 0.5rem 1.2rem; cursor: pointer; box-shadow: 3px 3px 0 var(--shadow); transition: all 0.12s; } .quit-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--shadow); } .quit-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--shadow); } .quit-cancel { background-color: var(--gold); color: var(--ink); } .quit-confirm { background-color: var(--red-orange); color: var(--cream); } /* ── SCORE MODAL ── */ .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; /* Higher than .setup-screen / .lobby-screen (200) so the quit modal (and any other) shows above them when triggered from the always-visible menu button. */ z-index:250; } .modal-overlay.show { display:flex; } .modal { background: var(--team-us); border: 4px solid var(--shadow); border-radius: 54% 46% 42% 58% / 44% 58% 46% 56%; box-shadow: 8px 8px 0 var(--shadow); padding: 2.6rem 2.8rem 3.8rem 2.8rem; min-width:340px; max-width:520px; width:94%; text-align:center; } .modal-inner { padding: 0; } /* U1: ready row + countdown inside score modal (MP only). Empty in solo. */ .modal-ready-row { display: none; flex-direction: row; justify-content: center; gap: 0.8rem; margin: 0.6rem 0 0.4rem; flex-wrap: wrap; } .modal-ready-row.show { display: flex; } .modal-ready-seat { font-family: 'Boogaloo', cursive; font-size: 1rem; color: var(--ink); letter-spacing: 0.03em; min-width: 90px; text-align: center; line-height: 1.1; } .modal-ready-seat .modal-ready-name { display: block; color: var(--ink); } .modal-ready-seat .modal-ready-state { display: block; margin-top: 0.15rem; font-style: italic; color: rgba(26,26,26,0.55); } .modal-ready-seat.is-ready .modal-ready-state { color: var(--ink); font-style: normal; font-weight: 700; } .modal-countdown { display: none; font-family: 'Boogaloo', cursive; font-size: 1.6rem; font-style: italic; color: var(--cornflower); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); letter-spacing: 0.04em; text-align: center; margin: 0.2rem 0 0.6rem; pointer-events: none; transition: color 0.2s ease; } .modal-countdown.show { display: block; } .modal-countdown.urgent { color: var(--hotpink); animation: decl-countdown-pulse 0.8s ease-in-out infinite; } .modal h2 { font-family:'Boogaloo',cursive; color:var(--cornflower); font-size:2.4rem; margin-bottom:1.2rem; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.06em; line-height: 1.1; font-style: italic; padding: 0; } .scorecard-bleed { margin: 0; } .scorecard { width: 88%; margin: 0 auto; border-collapse: collapse; font-size: 1rem; margin-bottom: 0.8rem; table-layout: fixed; } .scorecard th.row-label, .scorecard td.row-label { width: 32%; } .scorecard th:not(.row-label), .scorecard td:not(.row-label) { width: 34%; } .scorecard th { font-family: 'Boogaloo', cursive; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding: 0.3rem 0.5rem; border: none; text-align: center; text-shadow: none; } .scorecard th.row-label { text-align: left; color: var(--ink); } .scorecard thead th { border-bottom: none; } .scorecard tbody tr:first-child td { border-top: 2px solid rgba(122,26,26,0.5); } .scorecard td { padding: 0.3rem 0.5rem; border: none; text-align: center; color: var(--ink); } .scorecard th:last-child, .scorecard td:last-child { } .scorecard td.row-label { text-align: left; color: var(--ink); font-size: 1rem; font-family: 'Boogaloo', cursive; } .scorecard tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(122,26,26,0.25); } .scorecard tbody tr:first-child td { border-top: 2px solid rgba(122,26,26,0.5); border-bottom: 1px solid rgba(122,26,26,0.25); } .scorecard td.scored { color: var(--ink); font-family: 'Boogaloo', cursive; font-size: 1rem; font-weight: 900; } .scorecard tr.total-row td { border-top: none; border-bottom: none; font-family: 'Boogaloo', cursive; font-size: 1rem; color: var(--ink); font-weight: 900; text-shadow: none; padding-top: 0.5rem; } .scorecard tr.total-row td { border-top: 2px solid rgba(122,26,26,0.5) !important; border-bottom: none !important; } .scorecard tr.total-row td.row-label { color: var(--ink); } .scorecard tr.running-row td, .scorecard tr.running-row td.row-label, .scorecard tr.running-row td.scored { font-size: 1rem !important; color: var(--ink) !important; text-shadow: none !important; opacity: 0.55; } .scorecard tr.forfeit-row td { border-top: 2px solid rgba(122,26,26,0.4); font-family: 'Boogaloo', cursive; font-size: 1rem; color: var(--ink); padding-top: 0.4rem; text-shadow: none; } .scorecard tr.forfeit-row td.row-label { color: var(--ink); font-weight: 900; } .score-total { font-family:'Boogaloo',cursive; font-size:1.1rem; color: var(--gold); margin-top:0.8rem; } .winner-banner { font-family:'Boogaloo',cursive; font-size:1.1rem; margin:0.6rem auto; padding:0.55rem 2rem; display:inline-block; border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%; border: 2.5px solid var(--shadow); box-shadow: 2px 2px 0 var(--shadow); background: var(--gold); color: var(--ink); } .winner-banner.us { background: var(--gold); color: var(--ink); } .winner-banner.them { background: var(--gold); color: var(--ink); } .modal.modal-them { background: var(--team-them); } /* ── CARD ORDER REFERENCE ── */ /* ── STRENGTH TABLES ── */ .strength-panel { width: 95px; min-width: 95px; max-width: 110px; flex-shrink: 0; align-self: flex-start; background: #2ab5b5; border: 3px solid var(--shadow); border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%; box-shadow: 4px 4px 0 var(--shadow); padding: 1.4rem 0.9rem 2.6rem 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0; visibility: hidden; opacity: 0; transition: opacity 0.35s ease; } .strength-panel.visible { visibility: visible; opacity: 1; } .sp-title { font-family: 'Boogaloo', cursive; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-weight: 900; text-align: center; margin-bottom: 0.1rem; } .sp-suit { font-size: 1.3rem; line-height: 1.1; display: block; text-align: center; margin-bottom: 0.15rem; } .sp-divider { display: none; } .sp-dir { font-family: 'Boogaloo', cursive; font-size: 0.75rem; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 900; align-self: center; text-align: center; width: 100%; } .sp-dir.weak { align-self: flex-start; margin-top: 0.05rem; } .sp-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.04rem 0.05rem; border-radius: 5px; } .sp-rank { font-family: 'Boogaloo', cursive; font-size: 0.95rem; line-height: 1; color: var(--ink); min-width: 1.4rem; text-align: left; } .sp-row.sp-red .sp-rank { color: var(--red-orange); } .sp-pts { font-family: 'Boogaloo', cursive; font-size: 0.9rem; color: var(--ink); line-height: 1; } .setup-screen { display: none; position: fixed; inset: 0; background: var(--felt); z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; } .setup-screen.show { display: flex; } .setup-logo { font-family: 'Boogaloo', cursive; font-size: clamp(3rem, 12vw, 6rem); color: var(--purple); font-style: italic; -webkit-text-stroke: 3px var(--felt); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--felt); line-height: 1; } .setup-card { background: var(--cream); border: 4px solid var(--shadow); border-radius: 42% 58% 38% 62% / 52% 48% 52% 48%; box-shadow: 6px 6px 0 var(--shadow); padding: 3rem 5.5rem 5rem; text-align: center; max-width: 650px; width: 100%; /* Match the MP lobby-create card's natural height so the title doesn't jump up when navigating Solo → Play Online. The in-room lobby card grows past this when the team picker is open; that jump is fine since it accompanies a deliberate user action. */ min-height: 27.5rem; } /* Solo setup card: vertically centre content within the cream panel. Keeping the original asymmetric padding (3rem top / 5rem bottom) biases the centring upward, which lands closer to optical centre — the chunky buttons carry more visual weight than the heading, so geometric centring reads as "too low" to the eye. MP lobby cards intentionally don't get this — their content stacks tightly from the top with their own spacing rules. */ #setup-screen .setup-card { display: flex; flex-direction: column; justify-content: center; } .setup-title { font-family: 'Boogaloo', cursive; font-size: 2.4rem; color: var(--cornflower); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.03em; display: inline-block; margin-bottom: 1.2rem; } .setup-btns { display: flex; flex-direction: column; gap: 0.35rem; } .setup-btn { font-family: 'Boogaloo', cursive; font-size: 1.2rem; padding: 0.7rem 1.5rem; text-align: left; padding-left: 2.5rem; border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; transition: all 0.12s; background-color: var(--gold); color: var(--red-orange); width: 75%; margin: 0 auto; display: block; } .setup-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow); } .setup-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--shadow); } .setup-btn.alt { background-color: var(--purple); } .setup-divider { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); font-size: 0.9rem; font-weight: 700; margin: 0; } .setup-divider::before, .setup-divider::after { content: none; } .custom-target-row { position: relative; width: 75%; margin: 0 auto; } .custom-target-row input { font-family: 'Boogaloo', cursive; font-size: 1.2rem; width: 100%; padding: 0.7rem 1.5rem; padding-right: 61%; border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); box-sizing: border-box; background: var(--gold); color: var(--red-orange); text-align: left; padding-left: 2.5rem; outline: none; } .custom-target-row input::placeholder { color: var(--red-orange); opacity: 1; } .custom-target-row input::-webkit-inner-spin-button, .custom-target-row input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .custom-target-row input[type=number] { -moz-appearance: textfield; } button.setup-btn-go { position: absolute; right: 0; top: 0; bottom: 4px; font-family: 'Boogaloo', cursive; font-size: 1.2rem !important; padding: 0.5rem 0 !important; width: 59.5%; border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; transition: all 0.12s; background-color: var(--gold) !important; color: var(--red-orange) !important; white-space: nowrap; } button.setup-btn-go:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow); } button.setup-btn-go:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--shadow); } .setup-area { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; width: 100%; max-width: 800px; } /* ── RULES STICKER ── */ .rules-sticker { cursor: pointer; transition: transform 0.15s; filter: drop-shadow(3px 3px 0 var(--shadow)); position: absolute; bottom: 2rem; left: 2.5rem; } .rules-sticker:hover { transform: rotate(15deg) scale(1.12); } .rules-sticker:active { transform: rotate(5deg) scale(0.95); } .multiplayer-sticker { cursor: pointer; transition: transform 0.15s; filter: drop-shadow(3px 3px 0 var(--shadow)); position: absolute; bottom: 2rem; right: 2.5rem; } .multiplayer-sticker:hover { transform: rotate(-15deg) scale(1.12); } .multiplayer-sticker:active { transform: rotate(-5deg) scale(0.95); } /* ── LOBBY SCREEN ── */ .lobby-screen { display: none; position: fixed; inset: 0; background: var(--felt); z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem; } .lobby-screen.show { display: flex; } .lobby-status { font-family: 'Boogaloo', cursive; color: var(--cornflower); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; font-size: 1.1rem; letter-spacing: 0.04em; } .lobby-row { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-bottom: 1rem; } #lobby-create .setup-btn { width: 60%; padding: 0.55rem 1.2rem; text-align: center; padding-left: 1.2rem; } #lobby-room .setup-btn { width: 240px; max-width: 80%; padding: 0.45rem 1.2rem; text-align: center; padding-left: 1.2rem; display: block; margin: 0 auto; } #lobby-create .custom-target-row { width: 60%; margin-top: 0.3rem !important; } #lobby-create .custom-target-row input { padding: 0.55rem 1.2rem; padding-right: 61%; } #lobby-create .lobby-row { margin-bottom: 1.6rem; } #lobby-create .setup-btns { margin-top: 1.6rem !important; } .lobby-label { font-family: 'Boogaloo', cursive; color: var(--cornflower); font-size: 1.1rem; } .lobby-input { font-family: 'Boogaloo', cursive; font-size: 1.2rem; padding: 0.55rem 1.2rem; border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); background: var(--gold); color: var(--red-orange); text-align: center; outline: none; width: 60%; } .lobby-target-btns { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .lobby-target-btn { font-family: 'Boogaloo', cursive; font-size: 1.2rem; padding: 0.55rem 1.4rem; border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); background: var(--gold); color: var(--red-orange); cursor: pointer; transition: all 0.12s; } .lobby-target-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow); } .lobby-target-btn.selected { background: var(--red-orange); color: var(--gold); } .lobby-target-custom { font-family: 'Boogaloo', cursive; font-size: 1.2rem; padding: 0.55rem 1rem; border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); background: var(--gold); color: var(--red-orange); text-align: center; outline: none; width: 100px; } .lobby-target-custom::placeholder { color: var(--red-orange); opacity: 1; } .lobby-target-custom.selected { background: var(--red-orange); color: var(--gold); } .lobby-target-custom.selected::placeholder { color: var(--gold); } /* Override Chrome's pale blue autofill background that otherwise wins over .selected. Inset box-shadow paints the bg color (Chrome refuses to let `background` alone override autofill). text-fill-color owns the typed-in glyph color when autofill is active. */ .lobby-target-custom:-webkit-autofill, .lobby-target-custom:-webkit-autofill:hover, .lobby-target-custom:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--gold) inset; -webkit-text-fill-color: var(--red-orange); caret-color: var(--red-orange); } .lobby-target-custom.selected:-webkit-autofill, .lobby-target-custom.selected:-webkit-autofill:hover, .lobby-target-custom.selected:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--red-orange) inset; -webkit-text-fill-color: var(--gold); caret-color: var(--gold); } .lobby-room-code { font-family: 'Boogaloo', cursive; font-size: 2.2rem; color: var(--purple); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.08em; text-align: center; margin-bottom: 0.3rem; } .lobby-room-code span { color: var(--red-orange); letter-spacing: 0.15em; } .lobby-room-target { font-family: 'Boogaloo', cursive; color: var(--cornflower); font-size: 1.35rem; text-align: center; margin-bottom: 1rem; letter-spacing: 0.03em; } /* ── TEAM PICKER ── */ .lobby-team { max-width: 360px; margin: 0 auto 0.7rem; padding: 0.7rem 0.9rem 0.85rem; border: 3px solid var(--shadow); /* Wobbly border-radius matching the score-box / table aesthetic. */ border-radius: 42% 58% 38% 62% / 52% 48% 52% 48%; background: var(--cream); box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s; } .lobby-team:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow); } .lobby-team:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--shadow); } .lobby-team.is-mine { cursor: default; } .lobby-team.is-mine:hover { transform: none; box-shadow: 4px 4px 0 var(--shadow); } .lobby-team.is-full { cursor: not-allowed; } .lobby-team.is-full:hover { transform: none; box-shadow: 4px 4px 0 var(--shadow); } /* Filled team backgrounds with purple border + shadow, mirroring the in-game .score-box.team-us / .team-them style (so the lobby boxes feel like the same family as the score boxes during play). Uses absolute identity colors, not the relative --team-us / --team-them. */ .lobby-team-orange { background: #d97a2e; border-color: var(--shadow); box-shadow: 4px 4px 0 var(--shadow); } .lobby-team-orange:hover { box-shadow: 6px 6px 0 var(--shadow); } .lobby-team-orange.is-mine:hover, .lobby-team-orange.is-full:hover { box-shadow: 4px 4px 0 var(--shadow); } .lobby-team-raspberry { background: #c94870; border-color: var(--shadow); box-shadow: 4px 4px 0 var(--shadow); } .lobby-team-raspberry:hover { box-shadow: 6px 6px 0 var(--shadow); } .lobby-team-raspberry.is-mine:hover, .lobby-team-raspberry.is-full:hover { box-shadow: 4px 4px 0 var(--shadow); } /* No-Team box: felt teal background + gold header + dash pattern, mirroring the in-game .score-box.target (the middle "Target / Hand" box in the score bar). Lets the lobby's three boxes parallel the three score-bar boxes during play. min-height locks the box to the chip-mode height (header + 2-row 2x2 grid + padding ≈ 131px) so status-only mode doesn't shrink — eliminates the 10px jump that happened when the last unassigned player picked a team. */ .lobby-team-unassigned { background: var(--felt); border-color: var(--shadow); box-shadow: 4px 4px 0 var(--shadow); min-height: 8.3rem; } /* In status-only mode (no chips), drop the header from the layout so the status text vertically centers within the full box rather than sitting below an invisible header. */ .lobby-team-unassigned.is-status .lobby-team-name { display: none; } /* No Team box: 2-column grid so 4 chips always lay out as 2 rows of 2. Reserve 2 chip-rows of vertical space so the box doesn't shrink when chips leave (the 4-chip 2x2 state is the tallest — we lock to that height always). Status-text-only state spans both columns. */ .lobby-team-unassigned .lobby-team-chips { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-content: center; gap: 0.4rem; min-height: 4.6rem; } .lobby-team-unassigned .lobby-team-status { grid-column: 1 / -1; } .lobby-team-unassigned.is-status { cursor: default; } .lobby-team-unassigned.is-status:hover { transform: none; box-shadow: 4px 4px 0 var(--shadow); } .lobby-team-name { font-family: 'Boogaloo', cursive; font-size: 1.15rem; color: var(--ink); letter-spacing: 0.05em; margin-bottom: 0.45rem; text-align: center; } /* Headers on filled team boxes: gold, matching the in-game .score-box .label color so the lobby boxes feel like the same family. */ .lobby-team-orange .lobby-team-name { color: var(--gold); } .lobby-team-raspberry .lobby-team-name { color: var(--gold); } .lobby-team-unassigned .lobby-team-name { color: var(--gold); } .lobby-team-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; min-height: 2.2rem; align-items: center; } /* Lock the orange/raspberry team-chips containers to the 2-chip-row + hint-row height. Without this, an empty team box (which has 2 small Add-Bot pills) is ~10px shorter than a populated box (2 full chips), causing a vertical jump as members come and go. Matches the max-size-always pattern already used by .lobby-team-unassigned. */ .lobby-team-orange .lobby-team-chips, .lobby-team-raspberry .lobby-team-chips { min-height: 3.75rem; } /* Lobby chips mirror the in-game dealer/play badge convention: red-orange border + red-orange text on both hot-pink and gold fills. */ .lobby-chip { font-family: 'Boogaloo', cursive; font-size: 1.1rem; padding: 0.32rem 0.85rem; border: 2px solid var(--red-orange); border-radius: 18px; background: var(--hotpink); color: var(--red-orange); letter-spacing: 0.03em; } /* "You" chip swaps to gold (matching the dealer badge fill); border + text stay red-orange. Only marker for self now that we dropped the "(you)" suffix. */ .lobby-chip.is-mine { background: var(--gold); } /* Bot chip — cornflower fill + ink border/text. Cornflower is the palette's "cool/informational" tone, reads as "computer player" without a glyph. Click-to-remove (same-team-or-host); otherwise the click falls through to the team box and joins that team. */ .lobby-chip.is-bot { background: var(--cornflower); border-color: var(--ink); color: var(--ink); cursor: pointer; } /* "+ Add Bot" placeholder shown in empty slots inside team boxes. Dashed cornflower outline so it reads as "potential bot" without being a filled chip. Sized smaller than a chip so it doesn't dominate the empty team box (the box itself is the click-to-join affordance and needs to read as the primary surface). */ .lobby-add-bot { font-family: 'Boogaloo', cursive; font-size: 0.8rem; padding: 0.18rem 0.55rem; border: 2px dashed var(--cornflower); border-radius: 14px; background: transparent; color: var(--cornflower); letter-spacing: 0.02em; cursor: pointer; } .lobby-add-bot:hover { background: var(--cornflower); color: var(--ink); border-style: solid; } /* Hint shown inside a team box that the viewer isn't on, when the team still has room. Makes the "click here to join" affordance explicit without ceremony. Hidden on the viewer's own team and on full teams. flex-basis 100% forces the hint to its own row inside the flex chips container; pointer-events:none lets clicks pass through to the parent team box (so clicking on the hint still joins). */ .lobby-team-hint { flex-basis: 100%; font-family: 'Boogaloo', cursive; font-size: 0.85rem; color: var(--cream); font-style: italic; margin-top: 0.2rem; text-align: center; letter-spacing: 0.03em; pointer-events: none; } .lobby-team-empty { font-family: 'Boogaloo', cursive; font-size: 0.95rem; color: var(--cream); font-style: italic; padding: 0.32rem 0.6rem; } /* Status text shown inside the No Team box when nobody is unassigned. Cream on the felt-teal bg gives strong contrast (matches solo's status-bar text style). Ready state bumps to gold for emphasis. */ .lobby-team-status { font-family: 'Boogaloo', cursive; font-size: 1rem; color: var(--ink); text-align: center; letter-spacing: 0.03em; padding: 0.4rem 0.6rem; } .lobby-team-status.is-ready { color: var(--gold); } /* In status-only mode (header is display:none), expand the chips container to fill the box's content area so the status text centres against the full box rather than the smaller 2-row chip footprint. Without this the text sits ~18px above optical centre. */ .lobby-team-unassigned.is-status .lobby-team-chips { min-height: 6.75rem; } .setup-btn-ghost { font-family: 'Boogaloo', cursive; font-size: 1.2rem; padding: 0.45rem 1.2rem; border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); background: var(--red-orange); color: var(--gold); cursor: pointer; width: 240px; max-width: 80%; margin: 0.6rem auto 0; display: block; transition: all 0.12s; } .setup-btn-ghost:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--shadow); } .setup-btn-ghost:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--shadow); } .lobby-back { position: absolute; bottom: 1.2rem; left: 1.2rem; font-family: 'Boogaloo', cursive; font-size: 0.9rem; background: var(--felt); color: var(--red-orange); border: 2px solid var(--shadow); border-radius: 20px; padding: 0.3rem 0.8rem; box-shadow: 3px 3px 0 var(--shadow); text-decoration: none; cursor: pointer; transition: all 0.12s; } .lobby-back:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--shadow); background-image: linear-gradient(rgba(157,111,212,0.35), rgba(157,111,212,0.35)); } .lobby-back:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--shadow); } /* ── TARGET in score bar ── */ /* ── GAME OVER MODAL ── */ /* ── GAME OVER MODAL ── */ .modal.modal-gameover { background: var(--gold); padding: 2.8rem 2.8rem 3.4rem; min-width: 400px; max-width: 580px; width: 96%; } .modal.modal-gameover h2 { color: var(--cornflower); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); } .game-over-medallion { width: 140px; height: 140px; margin: 0.4rem auto 1rem; border-radius: 50%; background: conic-gradient( var(--felt-deep) 0deg, var(--felt-deep) 30deg, var(--felt) 30deg, var(--felt) 60deg, var(--felt-deep) 60deg, var(--felt-deep) 90deg, var(--felt) 90deg, var(--felt) 120deg, var(--felt-deep) 120deg, var(--felt-deep) 150deg, var(--felt) 150deg, var(--felt) 180deg, var(--felt-deep) 180deg, var(--felt-deep) 210deg, var(--felt) 210deg, var(--felt) 240deg, var(--felt-deep) 240deg, var(--felt-deep) 270deg, var(--felt) 270deg, var(--felt) 300deg, var(--felt-deep) 300deg, var(--felt-deep) 330deg, var(--felt) 330deg, var(--felt) 360deg ); border: 4px solid var(--shadow); box-shadow: 6px 6px 0 var(--shadow); position: relative; display: flex; align-items: center; justify-content: center; } .game-over-medallion::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid var(--shadow); } .ky-logo-big { transform: translate(calc(-50% - 3px), -50%) rotate(-20deg); } .ky-logo-big .ky-big { font-size: 3.4rem; } .ky-logo-big .ky-small { font-size: 2rem; } .ky-logo-big .ky-line { -webkit-text-stroke: 2px var(--felt); text-shadow: 3px 3px 0 var(--felt); } .game-over-medallion.us::before { background: var(--team-us); } .game-over-medallion.them::before { background: var(--team-them); } .game-over-banner { font-family: 'Boogaloo', cursive; font-size: 1.8rem; margin: 0.6rem 0; padding: 0; border: none; box-shadow: none; border-radius: 0; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); } .game-over-banner.us { background: none; color: var(--team-us); } .game-over-banner.them { background: none; color: var(--team-them); } .game-over-score { font-family: 'Boogaloo', cursive; font-size: 1.2rem; font-weight: 900; color: var(--ink); margin: 0.4rem 0 0.2rem; } /* MP non-host's "Waiting for [host] to start a new game…" message inside the game-over modal — sits where the Play Again button is for the host. Cornflower on gold reads well. */ .game-over-waiting { font-family: 'Boogaloo', cursive; font-size: 1.05rem; color: var(--cornflower); margin-top: 1.2rem; letter-spacing: 0.03em; } .rules-screen { display: none; position: fixed; inset: 0; background: var(--felt-deep); z-index: 210; overflow-y: auto; } .rules-screen.show { display: block; } .rules-screen::-webkit-scrollbar { width: 6px; } .rules-screen::-webkit-scrollbar-track { background: transparent; } .rules-screen::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; } .rules-screen::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); } .rules-screen { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; } .rules-inner { max-width: calc(70ch + 2.4rem); width: 100%; margin: 0 auto; padding: 0.8rem 1.2rem 1.2rem; } .rules-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.6rem; flex-shrink: 0; } .rules-back { font-family: 'Boogaloo', cursive; font-size: 1rem; background: var(--gold); color: var(--ink); border: 2px solid var(--shadow); border-radius: 30px; box-shadow: 3px 3px 0 var(--shadow); padding: 0.3rem 0.9rem; cursor: pointer; white-space: nowrap; transition: all 0.12s; flex-shrink: 0; } .rules-back:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--shadow); background: var(--gold-hover); } .rules-title { font-family: 'Boogaloo', cursive; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--purple); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); margin: 0; font-style: italic; } .rules-grid { display: flex; flex-direction: column; gap: 0.6rem; } .rules-card { padding: 0.8rem 0; color: var(--ink); font-size: 1.2rem; line-height: 1.7; } .rules-card + .rules-card { padding-top: 1rem; } .rules-card p { margin: 0; } .rules-card p + p { margin-top: 0.45rem; } .rules-card > p { padding-left: 1.1rem; text-indent: -1.1rem; } .rules-card > p::before { content: "• "; font-weight: 700; color: var(--ink); } .rules-card h3 { font-family: 'Boogaloo', cursive; font-size: 1.7rem; margin: 0 0 0.4rem; color: var(--hotpink); line-height: 1.3; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); } .rc-icon { font-size: 1.4rem; margin-bottom: 0.3rem; } .card-order { display: flex; flex-wrap: wrap; gap: 0.15rem; align-items: center; justify-content: center; margin: 0.3rem 0 0; } .co-card { display: inline-flex; flex-direction: column; align-items: center; background: #fff; border: 2.5px solid var(--ink); border-radius: 7px; padding: 0.3rem 0.15rem; font-family: system-ui, -apple-system, sans-serif; font-size: 1.2rem; line-height: 1; font-weight: 700; min-width: 46px; min-height: 70px; justify-content: space-between; text-align: center; color: var(--red-orange); box-shadow: 2px 2px 0 var(--shadow); -webkit-font-smoothing: antialiased; } .co-card.co-special { background: #fff; border-color: var(--ink); color: var(--red-orange); } .co-special-group { display: inline-flex; align-items: center; gap: 0.15rem; border: 1.5px solid var(--ink); border-radius: 8px; padding: 2px 4px 5px; } .co-pts { font-size: 0.75rem; color: var(--ink); font-weight: 700; line-height: 1; } .co-arrow { font-size: 1.5rem; color: var(--ink); font-weight: 700; } /* ── Chat panel (URL flag: ?chat=1) ───────────── Two visual modes: collapsed → pill (interactive control family, like buttons) expanded → mild wobble (panel/container family) Border-radius transitions between the two on toggle. */ .chat-panel { display: none; position: fixed; right: 1.2rem; bottom: 1.2rem; width: 280px; flex-direction: column; background: var(--cream); border: 3px solid var(--shadow); border-radius: 38% 62% 55% 45% / 52% 42% 58% 48%; box-shadow: 4px 4px 0 var(--shadow); font-family: system-ui, -apple-system, sans-serif; z-index: 250; transition: transform 0.12s, box-shadow 0.12s; } .chat-panel.collapsed { border-radius: 20px; width: auto; } /* Triangles are container decoration — only on expanded panel. Strip them off the collapsed pill (which acts as a button) in both lobby and game skins. !important + higher specificity needed to override the bg-shapes-injected rules. */ .chat-panel.collapsed, .chat-panel.chat-panel-game.collapsed { background-image: none !important; } .chat-panel.collapsed:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow); } /* Purple haze overlay for collapsed-pill hover. Pseudo-element layer because the bg-shapes triangle config sets background-image with !important on .chat-panel and would otherwise override a hover gradient. */ .chat-panel.collapsed::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(157, 111, 212, 0); transition: background 0.12s; pointer-events: none; } .chat-panel.collapsed:hover::before { background: rgba(157, 111, 212, 0.35); } .chat-header { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.6rem 2.4rem 0.5rem; cursor: pointer; user-select: none; } .chat-panel.collapsed .chat-header { padding: 0.3rem 1.6rem 0.3rem 0.9rem; } .chat-title { font-family: 'Boogaloo', cursive; color: var(--cornflower); font-size: clamp(0.75rem, 1.8vw, 0.9rem); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 900; text-align: center; } .chat-unread { display: none; margin-left: 0.35rem; color: var(--ink); font-family: 'Boogaloo', cursive; font-size: 1.1rem; } .chat-toggle { position: absolute; right: 0.9rem; top: 50%; font-size: 1rem; color: var(--ink); transform: translateY(-50%) rotate(180deg); transition: transform 0.15s; } .chat-panel.collapsed .chat-toggle { transform: translateY(-50%) rotate(0deg); } .chat-body { display: flex; flex-direction: column; max-height: 320px; } .chat-panel.collapsed .chat-body { display: none; } .chat-messages { overflow-y: auto; padding: 1.6rem 0.9rem 0.4rem; font-size: 0.85rem; line-height: 1.35; height: 200px; } .chat-msg { margin-bottom: 0.35rem; color: var(--ink); } .chat-msg-name { font-family: 'Boogaloo', cursive; font-weight: 400; letter-spacing: 0.02em; margin-right: 0.4rem; color: var(--cornflower); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; } .chat-msg.chat-team-orange .chat-msg-name { color: #a05010; } .chat-msg.chat-team-raspberry .chat-msg-name { color: #8a2050; } .chat-msg.chat-msg-me .chat-msg-name { color: var(--purple); } .chat-msg-text { font-family: system-ui, -apple-system, sans-serif; } .chat-form { display: flex; gap: 0.5rem; padding: 0.4rem 0.9rem 1.4rem; align-items: center; } .chat-input { flex: 1; min-width: 0; font-family: 'Boogaloo', cursive; font-size: 0.95rem; padding: 0.35rem 0.8rem; border: 3px solid var(--shadow); border-radius: 30px; background: var(--gold); color: var(--red-orange); outline: none; } .chat-input::placeholder { color: var(--red-orange); opacity: 1; } .chat-send { font-family: 'Boogaloo', cursive; font-size: 0.95rem; padding: 0.3rem 0.95rem; background: var(--gold); color: var(--red-orange); border: 3px solid var(--shadow); border-radius: 30px; box-shadow: 4px 4px 0 var(--shadow); cursor: pointer; transition: all 0.12s; } .chat-send:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); background-image: linear-gradient(rgba(157,111,212,0.35), rgba(157,111,212,0.35)); } /* In-game skin — chat joins the table's surface family (--felt panel + darker --felt-deep-tone triangles at 30%), matching the table-wrap treatment. Triggered by the .chat-panel-game class added on gameStarting. */ .chat-panel.chat-panel-game { background: var(--felt); } /* In-game title — match the score-bar label convention (cream, uppercase, weight 900, no stroke) like TARGET / HAND. */ .chat-panel.chat-panel-game .chat-title { color: var(--cream); font-size: clamp(0.75rem, 1.8vw, 0.9rem); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 900; -webkit-text-stroke: 0; text-shadow: none; } /* In-game name colors — stroke is inherited from base. Switch fills to higher-contrast tokens that match the table's player-label convention (brighter team colors than the dark red/raspberry the lobby skin uses). */ .chat-panel.chat-panel-game .chat-msg-name { color: var(--cream); } .chat-panel.chat-panel-game .chat-msg.chat-team-orange .chat-msg-name { color: #d97a2e; } .chat-panel.chat-panel-game .chat-msg.chat-team-raspberry .chat-msg-name { color: #c94870; } .chat-panel.chat-panel-game .chat-msg.chat-msg-me .chat-msg-name { color: var(--gold); } .chat-send:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }