/* 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; --felt2: #1f9090; --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; --forest: #228B22; --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; } /* ── HEADER ── */ header { text-align: center; margin-bottom: 0.3rem; } .menu-btn { position: fixed; top: 0.5rem; left: 0.4rem; z-index: 100; 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); } 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(--gold); 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(--gold); 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; font-size: 20px; color: var(--cornflower); z-index: 26; pointer-events: none; transform: translateX(-50%); 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; } .trick-slot .slot-lbl { font-family:'Boogaloo',cursive; font-size:0.75rem; color:rgba(255,255,255,0.7); letter-spacing:0.06em; } .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; left: 50%; 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; } .bima-line1 { top: 10%; color: var(--hotpink); transform: translateX(calc(-50% - 57px)) rotate(-8deg); } .bima-line2 { top: 18%; color: var(--gold); transform: translateX(calc(-50% + 64px)) rotate(-8deg); } /* 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( #2d6e2d 0deg, #2d6e2d 30deg, var(--felt) 30deg, var(--felt) 60deg, #2d6e2d 60deg, #2d6e2d 90deg, var(--felt) 90deg, var(--felt) 120deg, #2d6e2d 120deg, #2d6e2d 150deg, var(--felt) 150deg, var(--felt) 180deg, #2d6e2d 180deg, #2d6e2d 210deg, var(--felt) 210deg, var(--felt) 240deg, #2d6e2d 240deg, #2d6e2d 270deg, var(--felt) 270deg, var(--felt) 300deg, #2d6e2d 300deg, #2d6e2d 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 { font-family:'Boogaloo',cursive; color:var(--hotpink); font-size:1.1rem; letter-spacing:0.05em; -webkit-text-stroke:1px var(--ink); paint-order:stroke fill; } .status-msg { font-family:'Boogaloo',cursive; color:var(--cream); 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:#fff; } 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(--forest); color: #fff; } button.go-btn .suit-sym { font-size: 1.3rem; vertical-align: middle; line-height: 1; } button.pass-btn { background-color: var(--red-orange); color: #fff; } button.accept-btn { background-color: var(--forest); color: #fff; } 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 ── */ .log-wrap { position: fixed; bottom: 1rem; right: -190px; width: 280px; z-index: 50; transition: right 0.3s ease; } .log-wrap:hover { right: -170px; } .log-wrap.open { right: 1rem; } .log-toggle { background: none; border: none; box-shadow: none; color: var(--tan); 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(--forest) !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; } .decl-trump-caller { position: absolute; top: calc(19.5% + 2px); left: 135px; transform: rotate(-8deg); font-family: 'Boogaloo', cursive; font-size: 2.6rem; font-style: italic; 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: left; 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(19.5% + 30px); right: 133px; transform: rotate(-8deg); font-family: 'Boogaloo', cursive; font-size: 2.6rem; font-style: italic; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.04em; line-height: 1.2; text-align: right; 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(--purple); 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: #2d6e2d; 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(--hotpink); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; 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: #2d6e2d; } .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(--gold); } .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(--forest); color: #fff; 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: #2d6e2d; 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-modal .subtitle { font-family: 'Boogaloo', cursive; color: rgba(255,255,255,0.7); font-size: 1.1rem; margin-bottom: 0.7rem; letter-spacing: 0.02em; } .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(--forest); color: #fff; 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(--forest); color: #fff; } .decl-seat-verdict.killed { background: var(--red-orange); color: #fff; } .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(--gold); } .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(--red-orange); 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(--cream); -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); opacity: 0.7; 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(--felt2); color: var(--cream); } .quit-confirm { background-color: var(--ink); 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; z-index:100; } .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(--forest); 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(--forest); color: #fff; } .winner-banner.us { background: var(--forest); color: #fff; } .winner-banner.them { background: var(--forest); color: #fff; } .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-row.special { border: 1.5px solid rgba(0,0,0,0.35); border-radius: 4px; padding: 0.04rem 0.05rem; box-shadow: 1px 1px 0 rgba(0,0,0,0.15); } .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%; } .setup-title { font-family: 'Boogaloo', cursive; font-size: 1.5rem; 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); } .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: 280px; 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; } /* 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); } .lobby-team-empty { font-family: 'Boogaloo', cursive; font-size: 0.95rem; color: var(--cream); opacity: 0.7; 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(--cream); 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( #2d6e2d 0deg, #2d6e2d 30deg, var(--felt) 30deg, var(--felt) 60deg, #2d6e2d 60deg, #2d6e2d 90deg, var(--felt) 90deg, var(--felt) 120deg, #2d6e2d 120deg, #2d6e2d 150deg, var(--felt) 150deg, var(--felt) 180deg, #2d6e2d 180deg, #2d6e2d 210deg, var(--felt) 210deg, var(--felt) 240deg, #2d6e2d 240deg, #2d6e2d 270deg, var(--felt) 270deg, var(--felt) 300deg, #2d6e2d 300deg, #2d6e2d 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: 2.6rem; } .ky-logo-big .ky-small { font-size: 1.5rem; } .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); z-index: 210; overflow-y: auto; } .rules-screen.show { display: flex; flex-direction: column; } .rules-inner::-webkit-scrollbar { width: 6px; } .rules-inner::-webkit-scrollbar-track { background: transparent; } .rules-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; } .rules-inner::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); } .rules-inner { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; } .rules-inner { max-width: 1060px; width: 100%; margin: 0 auto; padding: 0.8rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; } .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(--gold); -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 { border-top: 3px solid var(--felt2); 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: 52px; min-height: 74px; 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.85rem; color: var(--ink); font-weight: 700; line-height: 1; } .co-arrow { font-size: 1.3rem; color: var(--ink); font-weight: 700; }