/* =============================================================================
   SheetHead — styles
   Sections: 1 base / shared UI   2 cards   3 game table   4 seats   5 me area
             6 effects & banners  7 responsive families   8 reduced motion
============================================================================= */

/* ---------- 1. base / shared UI ---------- */
:root {
  --radius: 10px;
  --gold: #e9c46a;
  --teal: #19E3C1;
  --violet: #7C5CFF;
  --amber: #FFB547;
  --coral: #FF5D73;
  --ink: #0B1020;
  --cw: 72px;
}
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: #F5F6FA;
  background: radial-gradient(1200px 700px at 20% 0%, #1a1a55 0%, #0B1020 45%, #05060F 100%);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
::selection { background: #7C5CFF; color: #fff; }
button { font: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(124,92,255,.85); }

.felt { background: radial-gradient(1200px 700px at 50% 40%, #146247 0%, #0B3324 55%, #06251B 100%); }

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in .35s ease both; }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.shake { animation: shake .4s ease both; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(124,92,255,.7); } 100% { box-shadow: 0 0 0 18px rgba(124,92,255,0); } }
.ring-pulse { animation: ring 1.6s ease-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.float { animation: float 3s ease-in-out infinite; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .7rem 1.1rem; border-radius: 12px; font-weight: 600;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; user-select: none; color: inherit;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: linear-gradient(135deg,#7C5CFF,#5B3EE0); color: #fff; }
.btn-primary:hover { box-shadow: 0 0 0 2px rgba(124,92,255,.6), 0 10px 30px rgba(124,92,255,.35); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-teal { background: linear-gradient(135deg,#19E3C1,#0FB096); color: #05241B; }
.btn-coral { background: linear-gradient(135deg,#FF5D73,#D8304A); color: #fff; }
.btn-amber { background: linear-gradient(135deg,#FFC766,#FF9F2E); color: #2a1600; }
.btn-disabled { opacity: .45; pointer-events: none; }

.panel {
  background: rgba(19,25,51,.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: .78rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.08); color: inherit;
}
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }
.safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); }

.confetti-piece { position: absolute; width: 10px; height: 14px; border-radius: 2px; top: -20px; animation: fall 3s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }
.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: rgba(11,16,32,.94); border: 1px solid rgba(255,255,255,.12);
  padding: .65rem 1rem; border-radius: 12px; z-index: 80;
  animation: fade-in .3s ease both; max-width: min(90vw, 520px); text-align: center;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 2. cards ---------- */
/* Every card sizes from --cw; containers override --cw for their own scale. */
.card {
  width: var(--cw); height: calc(var(--cw) * 1.42);
  border-radius: calc(var(--cw) * .11);
  position: relative; flex: none; box-sizing: border-box;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  font-family: "Space Grotesk", Inter, sans-serif;
}
.card.is-face {
  background: linear-gradient(165deg, #ffffff 0%, #f1f3fb 100%);
  color: #14172b;
  box-shadow: 0 calc(var(--cw) * .07) calc(var(--cw) * .16) -2px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
}
.card.is-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0 14%, transparent 15%),
    repeating-linear-gradient(45deg, #1b2160 0 5px, #141a4d 5px 10px);
  border: calc(var(--cw) * .05) solid #f4f5fb;
  box-shadow: 0 calc(var(--cw) * .07) calc(var(--cw) * .16) -2px rgba(0,0,0,.6);
}
.card.is-back::after {
  content: ''; position: absolute; inset: 10%; border-radius: calc(var(--cw) * .06);
  border: 1px solid rgba(233,196,106,.55);
}
.card .idx { position: absolute; top: 5%; left: 8%; line-height: .95; text-align: center; font-weight: 700; }
.card .idx .r { display: block; font-size: calc(var(--cw) * .34); letter-spacing: -.03em; }
.card .idx .s { display: block; font-size: calc(var(--cw) * .26); margin-top: calc(var(--cw) * -.02); }
.card .big { position: absolute; right: 7%; bottom: 3%; font-size: calc(var(--cw) * .66); line-height: 1; }
.card .big.mid { right: 50%; transform: translateX(50%); bottom: 12%; }
.card.red { color: #d3202f; }
.card.black { color: #14172b; }
.card .joker-mark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%; color: #6b3df5; }
.card .joker-mark .star { font-size: calc(var(--cw) * .5); line-height: 1; }
.card .joker-mark .word { font-size: calc(var(--cw) * .17); font-weight: 800; letter-spacing: .12em; }
.card .declared {
  position: absolute; left: 50%; bottom: -8%; transform: translateX(-50%);
  background: #6b3df5; color: #fff; border-radius: 99px; white-space: nowrap;
  padding: .1em .55em; font-size: max(9px, calc(var(--cw) * .2)); font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
/* Card states. Position is driven by --lift / --sc so hover, selection and tap feedback compose instead of
   overriding each other. */
.card { transform: translateY(var(--lift, 0px)) scale(var(--sc, 1)); transition: transform .24s cubic-bezier(.2,.9,.3,1.25), box-shadow .2s ease, filter .2s ease; }
.card.is-interactive { cursor: pointer; touch-action: manipulation; }
.card.is-interactive:not(.is-selected):hover { --lift: -5px; }
/* playable but not selected: quiet outline, no lift */
/* playable: fully lit, normal colours, a soft teal light around it. Not playable: light off, grey, but still clearly readable. */
.card.is-legal { filter: brightness(1.05) saturate(1.06); box-shadow: 0 0 0 calc(var(--cw) * .03) rgba(25,227,193,.75), 0 0 calc(var(--cw) * .22) rgba(25,227,193,.45), 0 calc(var(--cw) * .07) calc(var(--cw) * .16) -2px rgba(0,0,0,.55); }
.card.is-illegal { filter: grayscale(.92) brightness(.8) contrast(.96); }
.card.is-illegal.is-face { box-shadow: 0 calc(var(--cw) * .04) calc(var(--cw) * .1) -2px rgba(0,0,0,.45); }
/* selected: raised, scaled, thick white + teal ring and glow: unmistakable next to any other state */
.card.is-selected {
  --lift: calc(var(--cw) * -.32); --sc: 1.06;
  box-shadow: 0 0 0 calc(var(--cw) * .045) #fff, 0 0 0 calc(var(--cw) * .1) var(--teal), 0 calc(var(--cw) * .28) calc(var(--cw) * .3) -6px rgba(25,227,193,.7), 0 0 calc(var(--cw) * .5) rgba(25,227,193,.55);
  animation: selPop .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes selPop { 0% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
/* stick-eligible: gold pulse + STICK tag (only exists during a real stick window) */
.card.is-stick { box-shadow: 0 0 0 calc(var(--cw) * .04) var(--gold), 0 0 calc(var(--cw) * .3) rgba(233,196,106,.85); animation: stickPulse 1.1s ease-in-out infinite; --lift: calc(var(--cw) * -.1); }
@keyframes stickPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }
.card.tap-armed { --lift: calc(var(--cw) * -.2); --sc: 1.07; box-shadow: 0 0 0 calc(var(--cw) * .05) #fff, 0 0 calc(var(--cw) * .5) rgba(233,196,106,1); }
.card.is-interrupt { box-shadow: 0 0 0 calc(var(--cw) * .04) var(--amber), 0 0 22px rgba(255,181,71,.7); animation: amberPulse 1s ease-in-out infinite; }
.card.is-dim { filter: brightness(.86) saturate(.9); }
.card .badge {
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font: 800 11px/1 Inter, sans-serif; letter-spacing: 0; z-index: 6; pointer-events: none;
}
.card .badge.bolt { background: var(--amber); color: #2a1600; }
.card .badge.stick { top: -11px; background: var(--gold); color: #2a1a00; font-size: 9px; letter-spacing: .06em; height: 20px; padding: 0 7px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
@keyframes amberPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* ---------- 3. game table ---------- */
.gs {
  --hdr: 56px; --cwh: 72px; --cwo: 38px; --cwp: 74px; --cwc: 64px; --avatar: 68px;
  position: relative; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  background:
    radial-gradient(60vw 40vh at 4% 0%, rgba(255,140,60,.28), transparent 60%),
    radial-gradient(60vw 40vh at 96% 0%, rgba(255,90,60,.26), transparent 60%),
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%) 0 0 / 44px 44px,
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%) 22px 22px / 44px 44px,
    radial-gradient(900px 600px at 50% 40%, #1c2a78 0%, #0e1447 55%, #070a26 100%);
}
.gs-top {
  flex: none; height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; position: relative; z-index: 20;
}
.gs-top .title { font: 700 16px/1 "Space Grotesk", Inter, sans-serif; text-align: center; min-width: 0; }
.gs-top .title small { display: block; font: 500 11px/1.2 Inter, sans-serif; color: rgba(255,255,255,.6); margin-top: 3px; }
.gs-top .chips { display: flex; gap: 6px; align-items: center; }
.gs-stage { position: relative; flex: 1 1 0; min-height: 0; }

.game-table { position: absolute; inset: var(--t-top, 8%) var(--t-side, 9%) var(--t-bottom, 2%); filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)); }
.game-table .rail {
  position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(180deg, #34343a 0%, #17171b 55%, #0c0c0f 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), inset 0 3px 0 rgba(255,255,255,.12);
}
.game-table .rail::before {  /* gold inlay */
  content: ''; position: absolute; inset: 1.6%; border-radius: 999px;
  border: 2px solid transparent;
  background: linear-gradient(180deg, #f6dc8b, #a97a22 60%, #e9c46a) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .95;
}
.game-table .felt-top {
  position: absolute; inset: 4.2% 3.2%; border-radius: 999px;
  background:
    radial-gradient(70% 70% at 50% 42%, #c81f2c 0%, #9c1523 52%, #6d0d18 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.35);
}
.game-table .felt-top::before {  /* inner racetrack line */
  content: ''; position: absolute; inset: 9% 6%; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.14);
}
.game-table .felt-top::after {  /* clockwise ring hint */
  content: ''; position: absolute; inset: 15% 12%; border-radius: 999px;
  border: 2px dashed rgba(255,255,255,.10);
  animation: spin-dash 40s linear infinite;
}
@keyframes spin-dash { to { transform: rotate(360deg); } }
.game-table .brand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font: 800 clamp(20px, 5vw, 54px)/1 "Space Grotesk", Inter, sans-serif; letter-spacing: .3em; color: rgba(255,255,255,.07);
  white-space: nowrap; pointer-events: none;
}
.game-table.my-turn .rail { box-shadow: inset 0 0 0 2px rgba(25,227,193,.55), 0 0 30px rgba(25,227,193,.35); }

.table-center {
  position: absolute; inset: 9% 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--cwp) * .12);
}
.piles { display: flex; align-items: center; justify-content: center; gap: calc(var(--cwp) * .34); min-width: 0; }
.pile-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile-cap { font: 700 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; }
.pile { --cw: var(--cwp); position: relative; width: var(--cwp); height: calc(var(--cwp) * 1.42); }
.pile .count {
  position: absolute; right: calc(var(--cwp) * -.16); top: calc(var(--cwp) * -.14); z-index: 10;
  min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font: 800 12px/1 Inter, sans-serif;
  background: var(--violet); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.pile.burn .count { background: var(--amber); color: #2a1600; }
.pile .empty {
  position: absolute; inset: 0; border-radius: calc(var(--cwp) * .11);
  border: 2px dashed rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font: 600 11px/1.2 Inter, sans-serif; text-align: center; padding: 6px; box-sizing: border-box;
}
.pile-table { width: calc(var(--cwp) * 1.55); }
.pile-table .card { position: absolute; left: 50%; top: 0; margin-left: calc(var(--cwp) * -.5); transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
.pile-table .card.landing { animation: land .5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes land {
  from { transform: translate(calc(var(--fx) * var(--cwp)), calc(var(--fy) * var(--cwp))) rotate(calc(var(--rot) * 3)) scale(.8); opacity: .15; }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 1; }
}
.pile-draw .card { position: absolute; left: 0; top: 0; }
.pile-burn .flame {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--amber);
  border-radius: calc(var(--cwp) * .11); background: linear-gradient(160deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); border: 2px solid rgba(255,181,71,.35);
}
.pile-burn.has .flame { animation: flicker 1.6s ease-in-out infinite; }
@keyframes flicker { 0%,100% { filter: drop-shadow(0 0 4px rgba(255,181,71,.6)); } 50% { filter: drop-shadow(0 0 14px rgba(255,120,40,.95)); } }

.effect {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; max-width: 100%;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 5px 10px;
  font: 600 12px/1.25 Inter, sans-serif; text-align: center; backdrop-filter: blur(4px);
}
.effect .t { font-weight: 800; color: #fff; }
.effect .via { color: #c9b8ff; }
.effect .note { color: rgba(255,255,255,.75); }
.effect .ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.effect .ranks span { min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: rgba(25,227,193,.16); color: #b6fff1; font: 800 11px/1 Inter, sans-serif; border: 1px solid rgba(25,227,193,.4); }

/* ---------- 4. seats ---------- */
.seat { position: absolute; z-index: 10; display: flex; align-items: center; gap: 8px; }
.seat.pos-top { left: 50%; top: 0; transform: translateX(-50%); flex-direction: row; }
.seat.pos-left { left: max(4px, 1%); top: 50%; transform: translateY(-50%); flex-direction: column; }
.seat.pos-right { right: max(4px, 1%); top: 50%; transform: translateY(-50%); flex-direction: column; }
.seat .who { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.avatar-wrap { position: relative; width: var(--avatar); height: var(--avatar); flex: none; }
.avatar {
  position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--avatar) * .58); line-height: 1;
  background: radial-gradient(circle at 35% 28%, hsl(var(--hue) 85% 68%), hsl(var(--hue) 70% 32%) 75%);
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.18);
}
.avatar-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; overflow: visible; z-index: 3; }
.avatar-ring circle { fill: none; stroke-width: 3.6; }
.avatar-ring .track { stroke: rgba(255,255,255,.16); }
.avatar-ring .prog { stroke-linecap: round; transition: stroke-dashoffset .12s linear, stroke .3s ease; }
.avatar-ring.ok .prog { stroke: var(--teal); filter: drop-shadow(0 0 5px rgba(25,227,193,.95)); }
.avatar-ring.warn .prog { stroke: var(--amber); filter: drop-shadow(0 0 5px rgba(255,181,71,.95)); }
.avatar-ring.danger .prog { stroke: #ff3b5c; stroke-width: 4.4; filter: drop-shadow(0 0 8px rgba(255,59,92,1)); animation: ringDanger .5s ease-in-out infinite alternate; }
.avatar-ring.danger .track { stroke: rgba(255,59,92,.3); }
@keyframes ringDanger { from { opacity: 1; } to { opacity: .55; } }
.urgent {
  position: absolute; left: 50%; top: 50%; width: calc(100% + 16px); aspect-ratio: 1; box-sizing: border-box; z-index: 6; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(255,90,120,.97), rgba(150,8,40,.97));
  color: #fff; font: 900 calc(var(--avatar) * .8)/1 "Space Grotesk", Inter, sans-serif; letter-spacing: -.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,.65); box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255,59,92,.95);
  animation: tickPop 1s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes tickPop { 0% { transform: translate(-50%,-50%) scale(1.5); opacity: .6; } 22% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 78% { transform: translate(-50%,-50%) scale(1); } 100% { transform: translate(-50%,-50%) scale(.94); } }
.vignette { position: absolute; inset: 0; z-index: 40; pointer-events: none; box-shadow: inset 0 0 90px 10px rgba(255,59,92,.55); animation: vignettePulse 1s ease-in-out infinite; }
@keyframes vignettePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.turn-chip .chip-name { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-chip b { font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.turn-chip.warn { border-color: rgba(255,181,71,.7); }
.turn-chip.danger { border-color: rgba(255,59,92,.9); background: rgba(255,59,92,.25); }
.seat:not(.active):not(.out) .avatar { filter: saturate(.8) brightness(.92); }
.seat.active .avatar { box-shadow: 0 0 0 3px var(--teal), 0 0 28px rgba(25,227,193,.65), 0 6px 16px rgba(0,0,0,.5); }
.seat.out { opacity: .5; filter: grayscale(.7); }
.plate { text-align: center; line-height: 1.15; min-width: 0; }
.plate .name { font: 700 13px/1.1 Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.plate .sub { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 9px; font: 800 10px/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; background: rgba(0,0,0,.5); color: #e7eaff; border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.tag.hand { background: rgba(124,92,255,.35); border-color: rgba(156,130,255,.6); }
.tag.up { background: rgba(25,227,193,.25); border-color: rgba(25,227,193,.6); color: #c8fff4; }
.tag.down { background: rgba(255,93,115,.28); border-color: rgba(255,93,115,.6); color: #ffd7dd; }
.tag.turn { background: var(--teal); color: #032c24; border-color: transparent; }

.cluster { --cw: var(--cwo); position: relative; display: flex; gap: calc(var(--cw) * .12); padding-bottom: calc(var(--cw) * .1); }
.cluster .slot { position: relative; width: var(--cw); height: calc(var(--cw) * 1.42 + var(--cw) * .36); }
.cluster .slot .fd { position: absolute; left: 0; top: 0; }
.cluster .slot .fu { position: absolute; left: 0; top: calc(var(--cw) * .36); }
.fan { --cw: var(--cwo); position: relative; height: calc(var(--cw) * 1.42); flex: none; }
.fan .card { position: absolute; top: 0; }
.fan .more { position: absolute; top: 50%; transform: translateY(-50%); font: 800 11px/1 Inter, sans-serif; background: rgba(0,0,0,.6); border-radius: 9px; padding: 3px 6px; }
.seat .stuff { display: flex; align-items: flex-end; gap: calc(var(--cwo) * .3); }
.seat.pos-left .stuff, .seat.pos-right .stuff { flex-direction: column; align-items: center; gap: 4px; }

/* ---------- 5. me area ---------- */
.gs-me {
  flex: none; position: relative; z-index: 15;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: linear-gradient(180deg, rgba(4,6,24,0) 0%, rgba(4,6,24,.72) 22%, rgba(4,6,24,.92) 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}
.gs-me.my-turn { border-top-color: rgba(25,227,193,.7); box-shadow: 0 -10px 30px -12px rgba(25,227,193,.5); }
.me-grid { display: grid; gap: 6px 16px; max-width: 1280px; margin: 0 auto; }
.me-plate { grid-area: plate; display: flex; align-items: center; gap: 10px; min-width: 0; align-self: center; }
.me-plate .avatar-wrap { --avatar: var(--avatarme, 56px); }
.me-status { grid-area: status; font: 600 13px/1.25 Inter, sans-serif; color: rgba(255,255,255,.88); min-height: 1.25em; align-self: center; }
.me-status strong { color: #fff; }
.my-stack { grid-area: stack; align-self: end; }
.actions { grid-area: actions; align-self: end; }
.zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.zone-cap { font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); display: flex; gap: 6px; align-items: center; }
.zone.active .zone-cap { color: var(--teal); }
.zone.active .zone-cap::after { content: 'ACTIVE'; background: var(--teal); color: #032c24; border-radius: 6px; padding: 2px 5px; letter-spacing: .06em; }
.zone.inactive { opacity: .85; }
.cluster.me { --cw: var(--cwc); }
.hand-fan { --cw: var(--cwh); position: relative; width: 100%; height: calc(var(--cwh) * 1.42 + var(--cwh) * .34); padding-top: calc(var(--cwh) * .34); box-sizing: content-box; overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.hand-fan::-webkit-scrollbar { display: none; }
.hand-fan .inner { position: relative; height: 100%; margin: 0; box-sizing: border-box; }
.hand-fan .card { position: absolute; bottom: 0; transition: transform .26s cubic-bezier(.2,.9,.3,1.25), box-shadow .2s ease, filter .2s ease, left .3s cubic-bezier(.2,.85,.3,1), width .25s ease, height .25s ease; }
.hand-empty { color: rgba(255,255,255,.6); font: 600 12px/1.3 Inter, sans-serif; padding: 24px 12px; }
.actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; justify-content: flex-end; min-width: 140px; }
.actions .btn { width: 100%; }
.callouts { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px 8px; pointer-events: none; z-index: 25; }
.callout {
  pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 680px;
  padding: 8px 12px; border-radius: 14px; font: 700 13px/1.25 Inter, sans-serif; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.callout.interrupt { background: linear-gradient(135deg, rgba(255,181,71,.28), rgba(255,93,115,.28)), rgba(8,10,32,.95); border: 1px solid rgba(255,181,71,.8); animation: amberPulse 1s ease-in-out infinite; }
.callout.stick { background: linear-gradient(rgba(25,227,193,.2), rgba(25,227,193,.2)), rgba(8,10,32,.95); border: 1px solid rgba(25,227,193,.75); }
.mini-cards { display: inline-flex; gap: 3px; }
.mini-cards .card { --cw: 26px; }
.mini-cards-pick .card { cursor: pointer; }
.interrupt-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- 6. effects & banners ---------- */
.banners { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: min(92%, 460px); }
.banner {
  padding: 7px 16px; border-radius: 999px; font: 800 clamp(13px, 2.6vw, 18px)/1.15 "Space Grotesk", Inter, sans-serif; letter-spacing: .02em; text-align: center;
  color: #fff; background: rgba(9,12,38,.88); border: 2px solid rgba(255,255,255,.3); box-shadow: 0 8px 26px rgba(0,0,0,.55);
  animation: banner 2.1s cubic-bezier(.2,.9,.25,1) both;
}
.banner.hot { background: linear-gradient(135deg, #ff7a18, #ff2f56); border-color: #ffd29b; }
.banner.good { background: linear-gradient(135deg, #12b39a, #19E3C1); color: #032c24; border-color: #c8fff4; }
.banner.warn { background: linear-gradient(135deg, #ffb547, #ff8a2e); color: #2a1600; border-color: #ffe2b4; }
.banner.bad { background: linear-gradient(135deg, #6a2a3c, #a1284a); border-color: #ff9bb0; }
@keyframes banner {
  0% { opacity: 0; transform: translateY(14px) scale(.85); }
  12% { opacity: 1; transform: translateY(0) scale(1.06); }
  20% { transform: scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}
.pile-table .card.burning { animation: burnaway .95s ease-in both; pointer-events: none; }
@keyframes burnaway {
  0% { opacity: 1; filter: brightness(1); }
  35% { opacity: 1; filter: brightness(1.7) sepia(1) saturate(4) hue-rotate(-20deg); }
  100% { opacity: 0; filter: brightness(2.4) sepia(1) saturate(6) hue-rotate(-30deg); transform: translate(var(--dx), calc(var(--dy) - 60px)) rotate(calc(var(--rot) * 2)) scale(.6); }
}
.sparks { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.sparks i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 10px #ff7a18; animation: spark .9s ease-out both; }
@keyframes spark { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; } }
.gs.flash-illegal .game-table { animation: shake .4s ease both; }
.turn-note { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 12; font: 700 12px/1 Inter, sans-serif; padding: 5px 12px; border-radius: 99px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16); white-space: nowrap; }
.dots i { display: inline-block; width: 4px; height: 4px; margin: 0 1px; border-radius: 50%; background: #fff; animation: dots 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- 7. responsive families ---------- */
/* WIDE (desktop / laptop / phone landscape): seats around the oval, my cards in one row under it */
.gs[data-family="wide"] .game-table { --t-top: calc(var(--avatar) * .72); --t-side: clamp(96px, 13%, 230px); --t-bottom: calc(var(--avatar) * .5); }
.gs[data-family="wide"] .table-center { inset: 22% 8% 6%; }
.gs[data-family="wide"] .banners { top: auto; bottom: 14%; flex-direction: column-reverse; }
.gs[data-family="wide"] .seat.pos-top { top: 4px; }
.gs[data-family="wide"] .seat.pos-top .plate { text-align: left; }
.gs[data-family="wide"] .seat.pos-top .plate .sub { justify-content: flex-start; }
.gs[data-family="wide"] .me-grid { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "plate status status" "cluster hand actions"; column-gap: clamp(12px, 2.4vw, 36px); }

/* TALL (phone portrait / tablet): stacked; side seats hug the oval; me area is a full-width tray */
.gs[data-family="tall"] .game-table { --t-top: calc(var(--avatar) * .9); --t-side: 5%; --t-bottom: 1%; }
.gs[data-family="tall"] .game-table .rail::before { inset: 2.2%; }
.gs[data-family="tall"] .game-table .felt-top { inset: 4% 4%; }
.gs[data-family="tall"] .table-center { inset: 58% 4% 3%; }
.gs[data-family="tall"] .seat.pos-top { top: 2px; gap: 8px; }
.gs[data-family="tall"] .seat.pos-left { left: 2px; top: 25%; transform: none; }
.gs[data-family="tall"] .seat.pos-right { right: 2px; top: 25%; transform: none; }
.gs[data-family="tall"] .banners { top: 40%; }
.gs[data-family="tall"] .plate .name { max-width: 84px; font-size: 12px; }
.gs[data-family="tall"] .me-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "plate cluster" "status status" "hand hand" "actions actions"; column-gap: 10px; }
.gs[data-family="tall"] .actions { flex-direction: row; min-width: 0; width: 100%; justify-content: center; min-height: 44px; }
.gs[data-family="tall"] .actions .btn { width: auto; flex: 1 1 0; max-width: 220px; }

/* phone specifics */
.gs[data-mode="phone"] .gs-top .title small { display: none; }
.gs[data-mode="phone"] .plate .sub .tag { height: 16px; font-size: 9px; padding: 0 5px; }
.gs[data-mode="phone"] .effect { font-size: 11px; padding: 4px 8px; }
.gs[data-mode="phone"] .effect .ranks span { min-width: 18px; height: 18px; font-size: 10px; }
.gs[data-mode="phone"] .pile-cap { display: none; }
.gs[data-mode="phone"] .zone-cap { font-size: 9px; }
.gs[data-mode="compact-landscape"] .effect .note, .gs[data-mode="compact-landscape"] .pile-cap { display: none; }
.gs[data-mode="compact-landscape"] .effect { font-size: 10.5px; padding: 3px 8px; }
.gs[data-mode="compact-landscape"] .plate .name { font-size: 11px; }
.gs[data-mode="compact-landscape"] .gs-me { padding-top: 4px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }
.gs[data-mode="compact-landscape"] .me-grid { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "plate cluster hand actions"; column-gap: 10px; align-items: end; }
.gs[data-mode="compact-landscape"] .me-plate { flex-direction: column; gap: 4px; align-self: end; }
.gs[data-mode="compact-landscape"] .me-plate .avatar-wrap { --avatar: 34px; }
.gs[data-mode="compact-landscape"] .me-plate > div:last-child > div:first-child { display: none; }
.gs[data-mode="compact-landscape"] .me-status { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); z-index: 25; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.16); border-radius: 99px; padding: 3px 12px; font-size: 11px; white-space: nowrap; }
.gs[data-mode="compact-landscape"] .plate .sub .tag:not(.hand):not(.up):not(.down):not(.turn) { display: none; }
.gs[data-mode="compact-landscape"] .table-center { inset: 30% 6% 4%; }
.gs[data-mode="compact-landscape"] .banners { bottom: 20%; }
.gs[data-mode="compact-landscape"] .actions { min-width: 96px; }
.gs[data-mode="compact-landscape"] .btn { min-height: 38px; padding: .4rem .7rem; font-size: 13px; }
.gs[data-mode="compact-landscape"] .turn-note { display: none; }

/* ---------- 8. reduced motion ---------- */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) {
  .gs *, .gs *::before, .gs *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* phone: opponents' hand-back fans are redundant with the numeric count */
.gs[data-mode="phone"] .fan-wrap { display: none; }
.gs[data-mode="phone"] .wide-only { display: none; }
.gs[data-mode="phone"] .piles { gap: calc(var(--cwp) * .12); }
.gs[data-mode="phone"] .pile-table { width: calc(var(--cwp) * 1.25); }
.gs[data-mode="phone"] .effect .note { display: none; }

/* compact landscape: keep the top opponent's plate beside its avatar so it stays clear of the piles */
.gs[data-mode="compact-landscape"] .seat.pos-top .who { flex-direction: row; gap: 6px; }
.gs[data-mode="compact-landscape"] .seat.pos-top .plate { text-align: left; }

/* ---------- own cards: one tray, two depth layers (reserve behind, hand in front) ---------- */
.my-stack {
  --capH: 22px; position: relative; width: 100%; min-width: 0; margin: 0 auto;
  height: calc(var(--capH) + var(--cwc) * 1.78 + var(--cwh) * 1.42 - var(--cwc) * .6);
}
.my-stack::before {  /* shared tray: makes it obvious both layers belong to the same player */
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--capH) - 6px); bottom: -4px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(233,196,106,.10), rgba(233,196,106,.03)); border: 1px solid rgba(233,196,106,.28); pointer-events: none;
}
.reserve { position: absolute; left: 50%; top: var(--capH); transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; }
.layer-cap { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.reserve .layer-cap { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; }
.hand-layer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.hand-layer .layer-cap { position: absolute; left: 8px; top: calc(var(--cwh) * .34 - 18px); z-index: 0; }
.my-stack .hand-fan { width: 100%; }
.my-stack.hand-empty .reserve { top: auto; bottom: 0; animation: dropIn .4s cubic-bezier(.2,.9,.25,1) both; }
.my-stack.hand-empty .cluster.me { --cw: var(--cwh); }
@keyframes dropIn { from { transform: translateX(-50%) translateY(-22px); opacity: .5; } to { transform: translateX(-50%); opacity: 1; } }
.reserve:not(.active) .cluster { opacity: .95; }

.gs[data-family="wide"] .me-grid { grid-template-columns: minmax(150px, 215px) minmax(0, 1fr) auto; grid-template-areas: "plate stack actions" "status stack actions"; align-items: end; }
.gs[data-family="wide"] .me-plate { align-self: end; }
.gs[data-family="wide"] .me-status { align-self: start; }
.gs[data-family="tall"] .me-grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plate status" "stack stack" "actions actions"; column-gap: 12px; }
.gs[data-mode="compact-landscape"] .me-grid { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "plate stack actions"; }
.gs[data-mode="compact-landscape"] .my-stack { --capH: 18px; }
.gs[data-mode="phone"] .my-stack { --capH: 18px; }
.gs[data-mode="phone"] .layer-cap .tag { height: 15px; font-size: 8.5px; padding: 0 5px; }

/* ---------- four-of-a-kind burst (presentation only; the engine has already resolved the burn) ---------- */
.quad-burst { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 36; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.quad-flash { position: absolute; left: -60%; right: -60%; top: -140%; bottom: -70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,170,.95) 0%, rgba(255,150,40,.55) 30%, rgba(255,60,20,0) 68%); opacity: 0; animation: quadFlash 1.9s ease-out both; }
@keyframes quadFlash { 0%,28% { opacity: 0; transform: scale(.4); } 38% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.quad-cards { --cw: var(--cwp); position: relative; width: var(--cwp); height: calc(var(--cwp) * 1.42); }
.quad-cards .card { --o: calc(var(--i) - 1.5); position: absolute; left: 0; top: 0; transition: none;
  animation: quadCard 1.9s cubic-bezier(.2,.8,.25,1) both; box-shadow: 0 0 calc(var(--cw) * .35) rgba(255,205,90,.95), 0 0 0 calc(var(--cw) * .03) #ffe08a; }
@keyframes quadCard {
  0%   { opacity: 0; transform: translate(calc(var(--o) * var(--cw) * 2.6), calc(var(--cw) * -2.2)) rotate(calc(var(--o) * 46deg)) scale(.4); filter: brightness(1.6); }
  22%  { opacity: 1; transform: translate(calc(var(--o) * var(--cw) * .55), 0) rotate(calc(var(--o) * 9deg)) scale(1.15); filter: brightness(1.25); }
  32%  { transform: translate(calc(var(--o) * var(--cw) * .5), calc(var(--cw) * .05)) rotate(calc(var(--o) * 8deg)) scale(1.25); }
  58%  { opacity: 1; transform: translate(calc(var(--o) * var(--cw) * .5), 0) rotate(calc(var(--o) * 8deg)) scale(1.2); filter: brightness(1.15); }
  78%  { opacity: 1; transform: translate(calc(var(--o) * var(--cw) * .45), calc(var(--cw) * -.15)) rotate(calc(var(--o) * 12deg)) scale(1.1); filter: brightness(2) sepia(1) saturate(5) hue-rotate(-25deg); }
  100% { opacity: 0; transform: translate(calc(var(--o) * var(--cw) * .4), calc(var(--cw) * -1.1)) rotate(calc(var(--o) * 22deg)) scale(.55); filter: brightness(2.6) sepia(1) saturate(7) hue-rotate(-35deg); }
}
.quad-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--cwp) * 1.6); height: calc(var(--cwp) * 1.6); margin: calc(var(--cwp) * -.8) 0 0 calc(var(--cwp) * -.8);
  border-radius: 50%; border: 4px solid #ffd76a; box-shadow: 0 0 24px #ff9a2e, inset 0 0 24px rgba(255,154,46,.7); opacity: 0; animation: quadRing 1.9s ease-out both; }
.quad-ring.r2 { animation-delay: .18s; border-color: #ff7a2e; }
@keyframes quadRing { 0%,30% { opacity: 0; transform: scale(.2); } 36% { opacity: 1; } 100% { opacity: 0; transform: scale(3.2); } }
.quad-sparks { position: absolute; left: 50%; top: 50%; }
.quad-sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #ffb547); box-shadow: 0 0 12px var(--c, #ff7a18);
  opacity: 0; animation: quadSpark 1.9s cubic-bezier(.15,.7,.3,1) var(--dl, 0ms) both; }
@keyframes quadSpark { 0%,34% { opacity: 0; transform: translate(0,0) scale(1); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.15); } }
.quad-title { position: absolute; left: 50%; bottom: calc(50% + var(--cwp) * .95); transform: translateX(-50%); text-align: center; white-space: nowrap; animation: quadTitle 1.9s cubic-bezier(.2,.9,.25,1.2) both; }
.quad-title .q-big { display: block; font: 900 clamp(22px, 4.6vw, 46px)/1 "Space Grotesk", Inter, sans-serif; letter-spacing: .04em; color: #fff3c4;
  text-shadow: 0 0 10px #ffb02e, 0 0 26px #ff6a1a, 0 4px 0 #a13a00, 0 8px 18px rgba(0,0,0,.6); }
.quad-title .q-sub { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 99px; font: 800 clamp(11px, 1.8vw, 14px)/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #2a1600; background: linear-gradient(135deg, #ffe08a, #ffa53a); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
@keyframes quadTitle {
  0% { opacity: 0; transform: translateX(-50%) scale(.5); }
  16% { opacity: 1; transform: translateX(-50%) scale(1.22); }
  26% { transform: translateX(-50%) scale(1); }
  82% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(1.04); }
}
.gs.quad-on .game-table { animation: tableQuake .55s ease-out .55s both; }
@keyframes tableQuake { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-6px,3px); } 30% { transform: translate(5px,-4px); } 45% { transform: translate(-4px,2px); } 60% { transform: translate(3px,-2px); } 80% { transform: translate(-1px,1px); } }
.gs.quad-on .game-table .rail { box-shadow: inset 0 0 0 2px rgba(255,200,90,.9), 0 0 46px rgba(255,150,40,.75); transition: box-shadow .3s; }
.reduce-motion .quad-cards, .reduce-motion .quad-flash, .reduce-motion .quad-ring, .reduce-motion .quad-sparks { display: none; }
.reduce-motion .quad-title { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gs .quad-cards, .gs .quad-flash, .gs .quad-ring, .gs .quad-sparks { display: none; }
  .gs .quad-title { animation: none; opacity: 1; }
}

/* ---------- Joker ---------- */
/* The artwork is a real illustration (src/assets/joker.jpg). The card keeps the deck's white frame, corner radius and
   shadow; the art sits in an inset window like a printed face card, cropped to hat + face and blended with a light vignette. */
:root { --joker-art: url("assets/joker.jpg"); }
.card.is-joker { background: linear-gradient(165deg, #ffffff 0%, #f3edff 100%); }
.card .j-photo {
  position: absolute; inset: 4.2%; border-radius: calc(var(--cw) * .07); overflow: hidden;
  background: #1a0b2e var(--joker-art) 50% 0% / 123.5% auto no-repeat;
  box-shadow: inset 0 0 0 calc(var(--cw) * .012) rgba(255,215,120,.85), 0 0 0 1px rgba(30,10,60,.45);
}
.card .j-photo::after {   /* vignette + soft gloss so the illustration sits inside the card instead of on top of it */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 22%),
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(20,6,45,.55) 100%),
    linear-gradient(0deg, rgba(20,6,45,.85) 0%, rgba(20,6,45,0) 30%);
}
.card .joker-idx { top: 6.4%; left: 9.5%; z-index: 2; padding: calc(var(--cw) * .03) calc(var(--cw) * .05); border-radius: calc(var(--cw) * .07);
  background: rgba(22,8,46,.78); box-shadow: 0 0 0 1px rgba(255,215,120,.6); line-height: .95; }
.card .joker-idx .js { color: #ffd54a; }
.card .joker-idx .jr { color: #ffd54a; font-size: calc(var(--cw) * .3); }
.card .joker-idx .s.js { font-size: calc(var(--cw) * .16); margin-top: 0; }
.card .joker-idx .r.js { font-size: calc(var(--cw) * .2); }
.card .j-word-bottom { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; z-index: 2; }
.card .j-word-bottom span { font: 900 calc(var(--cw) * .15)/1 "Space Grotesk", Inter, sans-serif; letter-spacing: .16em; text-indent: .16em; color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 calc(var(--cw) * .12) rgba(180,120,255,.95); }
/* declared-rank ribbon: identity + chosen rank, always on the card itself */
.card .j-decl {
  position: absolute; left: 7%; right: 7%; bottom: 6%; height: 20%; z-index: 3; border-radius: calc(var(--cw) * .09); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--cw) * .04); padding: 0 3%;
  background: linear-gradient(90deg, #4a1fc0, #7c3cf0); box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.25); color: #fff;
}
.card .j-decl .j-word { font: 900 calc(var(--cw) * .12)/1 "Space Grotesk", Inter, sans-serif; letter-spacing: .06em; opacity: .9; }
.card .j-decl .j-arrow { font: 900 calc(var(--cw) * .2)/1 Inter, sans-serif; color: #ffd54a; }
.card .j-decl .j-rank { font: 900 calc(var(--cw) * .3)/1 "Space Grotesk", Inter, sans-serif; color: #ffd54a; text-shadow: 0 1px 0 rgba(0,0,0,.4); letter-spacing: -.03em; }
.gs[data-mode="phone"] .card .j-decl .j-word, .gs[data-mode="compact-landscape"] .card .j-decl .j-word { display: none; }
/* effect ribbon chip for a Joker on top of the pile */
.effect .joker-via { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 3px; border-radius: 99px; background: linear-gradient(90deg, #4a1fc0, #7c3cf0); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.joker-face { display: inline-block; flex: none; border-radius: 50%; background: #1a0b2e var(--joker-art) 48% 47% / 250% auto no-repeat; box-shadow: 0 0 0 1.5px #ffd54a; }
.effect .joker-via .mini-joker { width: 24px; height: 24px; }
.effect .joker-via b { color: #ffd54a; font-size: 15px; }
.effect .joker-via em { font-style: normal; font-weight: 600; opacity: .85; }
.joker-preview { display: flex; justify-content: center; margin: 4px 0 14px; --cw: 92px; }

/* ---------- drag & drop of the selection onto the table pile ---------- */
.card.is-selected { touch-action: none; cursor: grab; }
.card.is-drag-src { opacity: .22; filter: saturate(.4); }
.drag-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.drag-layer .card.drag-ghost {
  position: fixed; left: 0; top: 0; margin: 0; --lift: 0px; --sc: 1; transition: transform 70ms linear; will-change: transform; animation: none; z-index: 1;
  box-shadow: 0 0 0 calc(var(--cw) * .05) #fff, 0 0 0 calc(var(--cw) * .1) var(--teal), 0 26px 44px -8px rgba(0,0,0,.75), 0 0 34px rgba(25,227,193,.65);
}
.drag-layer.phase-return .card.drag-ghost { transition: transform .38s cubic-bezier(.2,.9,.3,1.08); }
.drag-layer.phase-drop .card.drag-ghost { transition: transform .26s cubic-bezier(.5,0,.9,.4), opacity .26s ease-in; opacity: 0; }
.pile-col[data-drop] .pile-table { transition: transform .18s ease, box-shadow .18s ease, outline-color .18s; }
.pile-col.drop-armed .pile-table { outline: 2px dashed rgba(255,255,255,.8); outline-offset: 9px; border-radius: 16px; animation: dropPulse 1s ease-in-out infinite; }
@keyframes dropPulse { 0%,100% { outline-offset: 9px; } 50% { outline-offset: 14px; } }
.pile-col.drop-armed.drop-hot.drop-ok .pile-table { outline: 3px solid var(--teal); box-shadow: 0 0 46px rgba(25,227,193,.9); transform: scale(1.07); animation: none; }
.pile-col.drop-armed.drop-hot.drop-bad .pile-table { outline: 3px solid #ff5d73; box-shadow: 0 0 40px rgba(255,93,115,.85); animation: none; }
.pile-cap.drop-cap { color: #fff; font-weight: 800; background: rgba(0,0,0,.6); padding: 3px 10px; border-radius: 9px; }
.drop-ok .pile-cap.drop-cap { background: rgba(9,140,118,.9); }
.drop-bad .pile-cap.drop-cap { background: rgba(160,30,60,.92); }

/* any hand card can start a drag: vertical touch gestures reach us, horizontal pans still scroll a large hand */
.hand-fan .card.is-interactive { touch-action: pan-x; }
.cluster .card.is-interactive { touch-action: none; }
.card.is-selected { touch-action: none; }

.drag-layer.bad .card.drag-ghost { box-shadow: 0 0 0 calc(var(--cw) * .05) #fff, 0 0 0 calc(var(--cw) * .1) #ff5d73, 0 26px 44px -8px rgba(0,0,0,.75), 0 0 34px rgba(255,93,115,.7); }

.fx-joker-probe { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; background-image: var(--joker-art); }


/* ---------- PixiJS layers on: the DOM visuals they replace become invisible (kept for accessibility, layout and tests) ---------- */
.gs.pixi-on .game-table { filter: none; }
.gs.pixi-on .game-table .rail, .gs.pixi-on .game-table .felt-top, .gs.pixi-on .game-table .brand { display: none; }
.gs.pixi-on .pile .card, .gs.pixi-on .pile .flame { opacity: 0; animation: none; }
.gs.pixi-on .pile-table .card.burning, .gs.pixi-on .pile-table .sparks { display: none; }
.gs.pixi-on .quad-cards, .gs.pixi-on .quad-flash, .gs.pixi-on .quad-ring, .gs.pixi-on .quad-sparks { display: none; }
.gs.pixi-on.quad-on .game-table { animation: none; }
/* cards still in the air (dealt / drawn / picked up) stay hidden until the flight lands exactly on them */
.card.is-arriving { opacity: 0 !important; transition: none !important; }
.gs.dealing .seat .stuff { opacity: 0; }
.gs .seat .stuff { transition: opacity .35s ease; }


/* ---------- landing hero + lobby polish ---------- */
.landing-fan { position: relative; height: 190px; margin: 0 auto 1.25rem; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.landing-card { position: absolute; bottom: 0; transform-origin: 50% 120%; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.lobby-card { position: relative; overflow: hidden; }
.lobby-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.lobby-card:hover::after { opacity: 1; }
.lobby-card.acc-violet::after { background: radial-gradient(120% 80% at 50% 0%, rgba(124,92,255,.22), transparent 60%); }
.lobby-card.acc-teal::after { background: radial-gradient(120% 80% at 50% 0%, rgba(25,227,193,.2), transparent 60%); }
.lobby-card.acc-amber::after { background: radial-gradient(120% 80% at 50% 0%, rgba(255,181,71,.22), transparent 60%); }
@media (max-width: 480px) { .landing-fan { height: 150px; transform: scale(.82); } }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.seg-btn { min-height: 38px; padding: 0 14px; border-radius: 9px; font-weight: 600; font-size: 13px; color: rgba(255,255,255,.7); transition: background .2s, color .2s; }
.seg-btn:hover { color: #fff; }
.seg-btn.on { background: linear-gradient(135deg,#7C5CFF,#5B3EE0); color: #fff; box-shadow: 0 4px 14px rgba(124,92,255,.35); }

/* finished players / SheetHead (normal games play on until one player is left holding cards) */
.seat.out { opacity: .86; filter: none; }

.tag.out { background: linear-gradient(135deg, #ffe08a, #e3b75a); color: #2a1600; border-color: transparent; font-weight: 800; }
.tag.sheethead { background: #7a4a1c; color: #ffe9c4; border-color: #c98a3c; font-weight: 800; letter-spacing: .04em; }

/* ---------- table pile: previous card visible, hover / tap fan, mirror badge, mandatory pickup ---------- */
.pile-table .card { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--sc, 1)); transition: transform .24s cubic-bezier(.22,1,.36,1); }
@keyframes land {
  from { transform: translate(calc(var(--fx) * var(--cwp)), calc(var(--fy) * var(--cwp))) rotate(calc(var(--rot) * 3)) scale(.8); opacity: .15; }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--sc, 1)); opacity: 1; }
}
.pile-col { position: relative; }
.pile-col.fanned .pile-table { width: calc(var(--cwp) * 3.2); margin: 0 calc(var(--cwp) * -.825); }   /* keeps the hover area under the spread cards */
.pile-mirror { position: absolute; left: 50%; top: calc(var(--cwp) * -.2); transform: translateX(-50%); z-index: 12; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 99px;
  background: rgba(12,9,11,.86); color: #fff3c4; box-shadow: 0 0 0 1.5px #e3b75a, 0 6px 14px rgba(0,0,0,.5); font: 800 13px/1 Inter, sans-serif; pointer-events: none; white-space: nowrap; animation: mirrorIn .35s cubic-bezier(.2,.9,.3,1.3) both; }
.pile-mirror b { font: 800 15px/1 var(--f-display, Inter, sans-serif); } .pile-mirror i { font-style: normal; color: #e3b75a; font-size: 15px; }
@keyframes mirrorIn { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.8); } }
.pile-col.must-pickup { cursor: pointer; outline: none; }
.pile-col.must-pickup .pile-table::before { content: ''; position: absolute; inset: calc(var(--cwp) * -.06) calc(var(--cwp) * .12); border-radius: calc(var(--cwp) * .2); pointer-events: none; z-index: 30;
  box-shadow: 0 0 0 3px #ff3b5c, 0 0 34px 6px rgba(255,59,92,.85), inset 0 0 26px rgba(255,59,92,.55); animation: pickupPulse 1s ease-in-out infinite; }
.pile-col.must-pickup:focus-visible .pile-table::before { box-shadow: 0 0 0 4px #fff, 0 0 38px 8px rgba(255,59,92,.95), inset 0 0 26px rgba(255,59,92,.6); }
@keyframes pickupPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.045); } }
.pile-cap.must { padding: 5px 11px; border-radius: 99px; background: #ff3b5c; color: #fff; text-shadow: none; letter-spacing: .1em; box-shadow: 0 0 18px rgba(255,59,92,.75); animation: capBlink 1s ease-in-out infinite; }
@keyframes capBlink { 50% { background: #c81e3d; } }
.reduce-motion .pile-col.must-pickup .pile-table::before, .reduce-motion .pile-cap.must { animation: none; }
.reduce-motion .pile-table .card { transition: none; }

/* ---------- first place: crown, celebration jump, skip badge ---------- */
.avatar-wrap .crown { position: absolute; left: 50%; top: -40%; width: 66%; z-index: 6; transform: translateX(-50%) rotate(-7deg); filter: drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,214,110,.75)); pointer-events: none; }
.avatar-wrap .crown.fresh { animation: crownDrop .9s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes crownDrop { 0% { opacity: 0; transform: translateX(-50%) translateY(-190%) rotate(-32deg) scale(1.9); } 60% { opacity: 1; transform: translateX(-50%) translateY(6%) rotate(-3deg) scale(1.05); } 100% { transform: translateX(-50%) rotate(-7deg); } }
.avatar-wrap.jump { animation: avJump .6s cubic-bezier(.3,.7,.4,1) 3; z-index: 8; }
.avatar-wrap.jump .avatar { box-shadow: 0 0 0 3px #ffd76a, 0 0 34px rgba(255,214,110,.95); }
@keyframes avJump { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-34%) scale(1.14, 1.08); } 70% { transform: translateY(2%) scale(1.06, .94); } }
.avatar-wrap .win-ring { position: absolute; inset: -8%; border-radius: 50%; border: 3px solid #ffd76a; pointer-events: none; animation: winRing 1.1s ease-out 2 both; }
@keyframes winRing { from { opacity: .95; transform: scale(.9); } to { opacity: 0; transform: scale(2.1); } }
.seat.out .avatar-wrap { filter: none; } .seat.out .avatar { filter: grayscale(.55); }
.avatar-wrap.skipped .avatar { animation: avSkip .5s ease-in-out 2; filter: saturate(.6); }
@keyframes avSkip { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7%) rotate(-5deg); } 75% { transform: translateX(7%) rotate(5deg); } }
.skip-badge { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; margin: -31% 0 0 -31%; border-radius: 50%; display: grid; place-items: center; z-index: 7; pointer-events: none;
  background: rgba(255,59,92,.94); box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0,0,0,.55); animation: skipPop .45s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes skipPop { from { opacity: 0; transform: scale(.3) rotate(-40deg); } }
.reduce-motion .avatar-wrap.jump, .reduce-motion .avatar-wrap .crown.fresh, .reduce-motion .avatar-wrap .win-ring, .reduce-motion .avatar-wrap.skipped .avatar, .reduce-motion .skip-badge { animation: none; }
@media (prefers-reduced-motion: reduce) { .avatar-wrap.jump, .avatar-wrap .crown.fresh, .avatar-wrap .win-ring, .avatar-wrap.skipped .avatar, .skip-badge { animation: none; } }