/* NoU: a loud game-show table. Red radial stage, glowing center, chunky cards, big pops. */
:root {
  --red: #ed1c24; --green: #00a651; --blue: #0051a0; --yellow: #ffd700; --ink: #17151c; /* official card colors */
  --c-r: var(--red); --c-g: var(--green); --c-b: var(--blue); --c-y: var(--yellow);
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-pop: cubic-bezier(.22, 1, .36, 1);
  --stage-1: #ffb347; --stage-2: #f0612a; --stage-3: #c4161c; --stage-4: #5e0710;
  --paper: #fff8ee; --gold: #ffd25a; --text: #fff;
  --panel: rgba(70, 6, 12, .62); --panel-line: rgba(255, 210, 90, .35);
  --cw: clamp(58px, 15vw, 96px);
  --font: "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font); color: var(--text); background: var(--stage-4);
  background-image: radial-gradient(circle at 50% 45%, var(--stage-1) 0, var(--stage-2) 22%, var(--stage-3) 52%, var(--stage-4) 100%);
  background-attachment: fixed; overflow-x: hidden; -webkit-tap-highlight-color: transparent;
}
body::before { /* faceted rays */
  content: ""; position: fixed; inset: -50%; pointer-events: none; opacity: .16;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #fff 0 4deg, transparent 4deg 22deg);
  mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 60%);
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { opacity: .75; }
.loading { text-align: center; margin-top: 40vh; font-size: 1.2rem; }
#app { position: relative; z-index: 1; min-height: 100dvh; }

/* ambient confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.confetti i {
  position: absolute; width: 10px; height: 14px; background: #ff4d4d; opacity: .5; border-radius: 2px;
  transform: rotate(var(--rot)); animation: drift 14s linear infinite;
}
.confetti i:nth-child(3n) { background: #ffb02e; width: 7px; height: 10px; }
.confetti i:nth-child(4n) { background: #8c0b14; }
@keyframes drift {
  0% { transform: translate(0, 0) rotate(var(--rot)); }
  50% { transform: translate(18px, 30px) rotate(calc(var(--rot) + 160deg)); }
  100% { transform: translate(0, 0) rotate(calc(var(--rot) + 360deg)); }
}

/* ---------- buttons, panels ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  background: var(--paper); color: var(--stage-3); box-shadow: 0 4px 0 #b9a58a, 0 8px 18px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #b9a58a, 0 4px 10px rgba(0, 0, 0, .25); }
.btn:disabled { opacity: .45; }
.btn.hot { background: linear-gradient(#ffe27a, var(--gold)); color: #6b1a00; box-shadow: 0 4px 0 #c98a00, 0 10px 24px rgba(255, 180, 0, .35); }
.btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.btn.tiny { min-height: 34px; padding: 0 14px; font-size: .85rem; }
.link { background: none; border: 0; color: var(--gold); text-decoration: underline; padding: 8px; }
.panel {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 20px; padding: 18px;
  backdrop-filter: blur(6px); display: grid; gap: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.panel.center { text-align: center; justify-items: center; }
.panel h2 { margin: 4px 0 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.panel h2 small { color: #fff; opacity: .7; letter-spacing: 0; text-transform: none; }
label { font-weight: 700; }
input, select {
  font: inherit; font-size: 1.05rem; min-height: 48px; width: 100%; padding: 0 16px; border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .28); color: #fff;
}
select option { color: #000; }
input::placeholder { color: rgba(255, 255, 255, .45); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > input { flex: 1; min-width: 0; }
.codein { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; }
.notice { background: rgba(0, 0, 0, .35); border: 1px solid var(--panel-line); padding: 10px 14px; border-radius: 10px; margin: 8px 16px; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--gold); }
.chip { font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .16); margin-left: 6px; vertical-align: middle; }
.chip.host { background: var(--gold); color: #6b1a00; }

/* ---------- home ---------- */
.home, .lobby { max-width: 460px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 16px; }
.back { color: #fff; opacity: .85; text-decoration: none; font-weight: 700; }
.hero { position: relative; height: 150px; margin-top: 4px; }
.hero .card { position: absolute; left: 50%; top: 10px; --cw: 92px; }
.hero .h1c { transform: translateX(-140%) rotate(-18deg); animation: bob 3.2s ease-in-out infinite; }
.hero .h2c { transform: translateX(-50%) translateY(-8px); animation: bob 3.2s .4s ease-in-out infinite; z-index: 1; }
.hero .h3c { transform: translateX(40%) rotate(18deg); animation: bob 3.2s .8s ease-in-out infinite; }
@keyframes bob { 50% { margin-top: -8px; } }
.title { /* logo: yellow lettering on a red tilted ellipse */
  position: relative; isolation: isolate; width: fit-content; margin: 18px auto 8px; padding: 0 .12em; text-align: center;
  font-size: clamp(4rem, 22vw, 6.5rem); line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -.04em;
  color: var(--yellow); -webkit-text-stroke: .03em var(--ink); text-shadow: .05em .07em 0 var(--ink); transform: rotate(-8deg);
}
.title::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 1.95em; height: 1.18em; border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-6deg); background: radial-gradient(circle at 40% 30%, #ff4a50, var(--red) 55%, #a80f15);
  border: .05em solid #fff; box-shadow: 0 .06em 0 #4a040b, 0 .2em .4em rgba(0, 0, 0, .35);
}
.title i { font-style: italic; color: #fff; display: inline-block; transform: scaleX(-1); }
.title.small { font-size: 3.4rem; }
.lead { text-align: center; margin: 0; font-size: 1.05rem; line-height: 1.45; }

/* ---------- lobby ---------- */
.top { display: flex; justify-content: space-between; align-items: center; }
.tcode { font-weight: 800; letter-spacing: .12em; }
.bigcode { margin: 0; font-size: 3rem; font-weight: 900; letter-spacing: .25em; color: var(--gold); text-shadow: 0 4px 0 #6b1a00; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .2); border-radius: 14px; }
.plist .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plist .ok { color: #9dffb0; font-size: .85rem; }
.plist .wait { opacity: .7; font-size: .85rem; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rules label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .2); cursor: pointer; }
.rules label.ro { cursor: default; }
.rules input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--gold); flex: none; }
.rules span { display: grid; gap: 2px; }
.rules small { opacity: .78; font-weight: 400; line-height: 1.35; font-family: system-ui, sans-serif; }
.presets { gap: 8px; }
.dock { position: sticky; bottom: 0; display: grid; gap: 8px; justify-items: center; padding: 14px 0 calc(10px + env(safe-area-inset-bottom)); }
.dock .btn { width: 100%; }
.hint { margin: 0; text-align: center; opacity: .9; }

/* ---------- discs ---------- */
.disc {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; font-weight: 900; color: #fff;
  border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.disc.off { filter: grayscale(1); opacity: .6; }
.d0 { background: #ff7a1a; } .d1 { background: #3fbf9b; } .d2 { background: #8a5cf6; }
.d3 { background: #ff4f8b; } .d4 { background: #2bb3ff; } .d5 { background: #9acd32; }

/* ---------- cards ---------- */
.card {
  --c: var(--ink); position: relative; display: inline-block; width: var(--cw); aspect-ratio: 2 / 3; flex: none;
  border-radius: calc(var(--cw) * .12); background: #fff; padding: calc(var(--cw) * .06); overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 6px 14px rgba(0, 0, 0, .32); user-select: none;
}
.card::before { /* colored face inside the white border, lit from the top left */
  content: ""; position: absolute; inset: calc(var(--cw) * .06); border-radius: calc(var(--cw) * .08);
  background:
    radial-gradient(120% 80% at 25% 10%, rgba(255, 255, 255, .32), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 70%, #000));
}
.k-R { --c: var(--red); } .k-G { --c: var(--green); } .k-B { --c: var(--blue); } .k-Y { --c: var(--yellow); } .k-W { --c: var(--ink); }
.card .oval { /* the tilted white ellipse of the classic card */
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 74%; height: 86%; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%) rotate(32deg) scaleX(.82);
  box-shadow: inset 0 0 0 calc(var(--cw) * .012) rgba(0, 0, 0, .12);
}
.card .oval.rainbow {
  background: conic-gradient(from -58deg, var(--red) 0 25%, var(--blue) 0 50%, var(--yellow) 0 75%, var(--green) 0);
  box-shadow: 0 0 0 calc(var(--cw) * .025) #fff;
}
.card .num, .card .sym {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--c); line-height: 1;
}
.card .num {
  font-size: calc(var(--cw) * .56); font-weight: 900; font-style: italic; letter-spacing: -.04em;
  text-shadow: calc(var(--cw) * .025) calc(var(--cw) * .025) 0 var(--ink); -webkit-text-stroke: calc(var(--cw) * .012) var(--ink);
}
.card .num.u { text-decoration: underline; text-decoration-thickness: calc(var(--cw) * .04); text-underline-offset: calc(var(--cw) * .04); }
.card .sym { width: 56%; display: grid; filter: drop-shadow(calc(var(--cw) * .02) calc(var(--cw) * .02) 0 rgba(0, 0, 0, .55)); }
.card .sym svg { width: 100%; height: auto; overflow: visible; }
.card.k-W .sym { width: 66%; }
.card .ix {
  position: absolute; z-index: 3; display: grid; place-items: center; min-width: calc(var(--cw) * .2); height: calc(var(--cw) * .22);
  font-weight: 900; font-style: italic; color: #fff; font-size: calc(var(--cw) * .19); line-height: 1;
  text-shadow: calc(var(--cw) * .012) calc(var(--cw) * .012) 0 var(--ink); -webkit-text-stroke: calc(var(--cw) * .006) var(--ink);
}
.card .ix svg { width: calc(var(--cw) * .2); height: auto; color: #fff; filter: drop-shadow(1px 1px 0 var(--ink)); }
.card .ix svg rect { fill: #fff; }
.card .tl { top: calc(var(--cw) * .1); left: calc(var(--cw) * .1); }
.card .br { bottom: calc(var(--cw) * .1); right: calc(var(--cw) * .1); transform: rotate(180deg); }
.mini-wheel {
  display: block; width: calc(var(--cw) * .14); aspect-ratio: .75; border-radius: 50%; border: 1px solid #fff;
  background: conic-gradient(var(--red) 0 25%, var(--blue) 0 50%, var(--yellow) 0 75%, var(--green) 0); transform: rotate(32deg);
}
.card.back::before { background: radial-gradient(circle at 50% 45%, #2a2a2a, #050505 75%); }
.card.back .oval { background: var(--red); box-shadow: inset 0 0 0 calc(var(--cw) * .02) rgba(0, 0, 0, .25); }
.card.back .logo {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-22deg);
  font-weight: 900; font-style: italic; font-size: calc(var(--cw) * .3); letter-spacing: -.03em; color: var(--yellow);
  -webkit-text-stroke: calc(var(--cw) * .012) var(--ink); text-shadow: calc(var(--cw) * .02) calc(var(--cw) * .025) 0 var(--ink);
}
.card.back .logo i { font-style: italic; color: #fff; display: inline-block; transform: scaleX(-1); }

/* small card chips in the move history */
.chipcard {
  display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 5px; vertical-align: -3px;
  background: var(--c); color: #fff; font-weight: 900; font-size: .78rem; text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ring, transparent);
}
.chipcard.k-W { background: conic-gradient(var(--red) 0 25%, var(--blue) 0 50%, var(--yellow) 0 75%, var(--green) 0); }

/* ---------- table ---------- */
.table { position: relative; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); z-index: 3; }
.bar .back { font-size: 1.3rem; padding: 4px 8px; }
.bar .round { opacity: .85; }
.bar .dir { font-size: .85rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: rgba(0, 0, 0, .28); white-space: nowrap; }
.icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: 12px; border: 0; background: rgba(0, 0, 0, .28); color: #fff;
  font-size: 1.15rem; font-weight: 900; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn[aria-expanded="true"] { background: var(--gold); color: #6b1a00; }
.bar .grow { flex: 1; }
.felt { position: relative; min-height: 0; }
.ring {
  position: absolute; left: 50%; top: 58%; width: min(78vw, 56vh, 520px); aspect-ratio: 1.45; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
}
.ring::before { /* the glowing play-direction ring, tinted with the current color */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 10px solid color-mix(in srgb, var(--c, #fff) 55%, #fff); opacity: .55;
  box-shadow: 0 0 40px color-mix(in srgb, var(--c, #fff) 70%, transparent), inset 0 0 40px color-mix(in srgb, var(--c, #fff) 50%, transparent);
  transition: border-color .4s ease, box-shadow .4s ease;
}
.ring span { position: absolute; inset: -6px; border-radius: 50%; animation: turn 9s linear infinite; }
.ring span::before, .ring span::after { /* two arrowheads travelling around the ring */
  content: "➤"; position: absolute; font-size: 28px; color: #fff; text-shadow: 0 0 12px var(--c, #fff);
}
.ring span::before { left: 50%; top: -14px; transform: translateX(-50%); }
.ring span::after { left: 50%; bottom: -14px; transform: translateX(-50%) rotate(180deg); }
.ccw .ring span { animation-direction: reverse; }
.ccw .ring span::before { transform: translateX(-50%) scaleX(-1); }
.ccw .ring span::after { transform: translateX(-50%) rotate(180deg) scaleX(-1); }
@keyframes turn { to { transform: rotate(360deg); } }
.col-R { --c: var(--red); --cur: var(--red); } .col-G { --c: var(--green); --cur: var(--green); }
.col-B { --c: var(--blue); --cur: var(--blue); } .col-Y { --c: var(--yellow); --cur: var(--yellow); }

.seat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; z-index: 2; }
.seat .fan { display: flex; height: calc(var(--cw) * .9); }
.seat .fan .card { --cw: clamp(30px, 8vw, 48px); margin-left: calc(var(--cw) * -.62); transform: rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * 1.2px)); transform-origin: 50% 120%; }
.seat .fan .card:first-child { margin-left: 0; }
.tag {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 14px; background: rgba(40, 3, 8, .7);
  border: 2px solid transparent; max-width: 42vw; white-space: nowrap; transition: background .3s ease, box-shadow .3s ease;
}
.tag .nou-badge { position: absolute; right: -14px; top: -16px; }
.clock { /* turn timer: a ring that drains around the active player's disc */
  position: absolute; left: -4px; top: -4px; width: 44px; height: 44px; transform: rotate(-90deg); pointer-events: none; z-index: 1;
}
.clock circle {
  fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100;
  animation: drain calc(var(--total) * 1s) linear calc((var(--left) - var(--total)) * 1s) forwards,
    late .3s linear calc((var(--left) - 5) * 1s) forwards;
}
@keyframes drain { to { stroke-dashoffset: 100; } }
@keyframes late { to { stroke: #ff3b3b; } }
.secs { display: inline-block; min-width: 3.2em; padding: 1px 8px; border-radius: 99px; background: rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; }
.hurry .secs { background: #d0161d; animation: pulse .5s ease-in-out infinite alternate; }
.seat.turn::before { /* spotlight on the player to move */
  content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 160px; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 220, 120, .45), transparent); pointer-events: none;
}
.arrive .tag { animation: arrive .55s var(--ease-pop); }
@keyframes arrive { 0% { transform: scale(1.22); box-shadow: 0 0 0 10px rgba(255, 210, 90, .5), 0 0 50px var(--gold); } }
.skipped .tag { filter: grayscale(.85) brightness(.8); }
.skipped::after, .hit::after {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 4; padding: 2px 10px; border-radius: 99px;
  font-weight: 900; font-size: .8rem; white-space: nowrap; animation: fade .2s ease;
}
.skipped::after { content: "⊘ passe son tour"; background: var(--ink); color: #fff; }
.hit .tag { animation: hit .45s ease; }
@keyframes hit { 30% { transform: translateX(-6px); background: #d0161d; } 60% { transform: translateX(6px); } }
.winner .tag { background: linear-gradient(var(--gold), #f39c12); color: #5a1a00; box-shadow: 0 0 40px var(--gold); }
.tag b { overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.tag .disc { width: 32px; height: 32px; border-width: 2px; border-radius: 10px; font-size: .9rem; }
.count { min-width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: #fff; color: var(--stage-3); font-weight: 900; font-size: .9rem; }
.turn > .tag, .mine.turn .tag { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 90, .35), 0 0 24px rgba(255, 210, 90, .7); background: #a3460a; }
.nou-badge {
  font-weight: 900; color: #fff; background: var(--red); padding: 2px 10px; border-radius: 99px; border: 2px solid #fff;
  transform: rotate(-8deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); font-size: .85rem;
}
.catch {
  border: 0; border-radius: 99px; padding: 8px 14px; font-weight: 900; color: #6b1a00; background: var(--gold);
  box-shadow: 0 4px 0 #c98a00; animation: pulse .7s ease-in-out infinite alternate;
}
@keyframes pulse { to { transform: scale(1.08); } }

.center { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: clamp(18px, 6vw, 40px); }
.deck { position: relative; border: 0; background: none; padding: 0; width: var(--cw); aspect-ratio: 2 / 3; }
.deck .card { position: absolute; left: 0; top: 0; }
.deck .d2 { transform: translate(-3px, -3px); } .deck .d3 { transform: translate(-6px, -6px); }
.deck:not(:disabled) .d3 { animation: nudge 1.2s ease-in-out infinite; box-shadow: 0 0 0 4px var(--gold), 0 0 30px var(--gold); }
@keyframes nudge { 50% { transform: translate(-6px, -12px); } }
.deck .cta {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font-weight: 900; font-size: .85rem; color: var(--gold); white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.pile { position: relative; width: var(--cw); aspect-ratio: 2 / 3; }
.pile .card { position: absolute; left: 0; top: 0; transform: rotate(var(--r)); }
.pile .card.top {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 0 44px color-mix(in srgb, var(--cur, var(--c)) 80%, transparent), 0 12px 24px rgba(0, 0, 0, .45);
  transition: box-shadow .4s ease;
}
.pending {
  position: absolute; right: -24px; top: -20px; z-index: 5; font-size: 1.7rem; font-weight: 900; color: #fff; background: var(--ink);
  border: 3px solid #fff; border-radius: 14px; padding: 2px 10px; transform: rotate(10deg); animation: pulse .6s ease-in-out infinite alternate;
}
.swatch {
  position: absolute; left: 50%; bottom: calc(var(--cw) * -.95); transform: translateX(-50%); width: 46px; height: 12px; border-radius: 99px;
  background: var(--c, transparent); box-shadow: 0 0 16px var(--c, transparent); border: 2px solid rgba(255, 255, 255, .7);
}

.status { margin: 0 0 46px; text-align: center; font-weight: 800; font-size: 1.05rem; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); padding: 0 16px; z-index: 2; }
.mine { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 3; }
.mine .tag { position: absolute; left: 12px; top: -38px; }
.actions { position: absolute; right: 14px; top: -54px; display: flex; gap: 10px; align-items: center; }
.nou-btn {
  width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle at 35% 30%, #ff7b7f, var(--red) 60%, #a1141a);
  font-weight: 900; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 0 #6b0a0f; box-shadow: 0 6px 0 #7a0a10, 0 10px 24px rgba(0, 0, 0, .4);
  transform: rotate(-8deg);
}
.nou-btn.urgent { animation: pulse .5s ease-in-out infinite alternate; box-shadow: 0 6px 0 #7a0a10, 0 0 0 6px rgba(255, 210, 90, .6), 0 0 40px var(--gold); }
.hand { display: flex; justify-content: center; perspective: 900px; padding: 22px 12px 0; min-height: calc(var(--cw) * 1.5 + 22px); width: 100%; }
.hc {
  --ov: min(calc(var(--cw) * .55), calc((100vw - 24px - var(--cw)) / max(var(--n) - 1, 1)));
  position: relative; border: 0; background: none; padding: 0; margin-left: calc(var(--ov) - var(--cw));
  transform: translateY(calc(var(--i) * var(--i) * .9px)) rotate(calc(var(--i) * 2.2deg)); transform-origin: 50% 140%;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .18s ease;
}
.hc:first-child { margin-left: 0; }
.hc.ok { transform: translateY(-16px) rotate(calc(var(--i) * 2.2deg)); }
.hc.ok .card { box-shadow: 0 0 0 3px var(--gold), 0 12px 24px rgba(0, 0, 0, .35); }
.hc.ok:hover, .hc.ok:focus-visible { transform: translateY(-30px) rotate(0deg) scale(1.08); z-index: 5; }
.hc.ok:hover .card, .hc.ok:focus-visible .card { box-shadow: 0 0 0 3px var(--gold), 0 0 28px color-mix(in srgb, var(--c) 70%, var(--gold)), 0 18px 30px rgba(0, 0, 0, .4); }
.hc:not(.ok, .jump):hover { transform: translateY(calc(var(--i) * var(--i) * .9px - 8px)) rotate(calc(var(--i) * 2.2deg)); }
.hc.no .card { filter: brightness(.62) saturate(.7); }
.hc.jump .card { box-shadow: 0 0 0 3px #7dfcff, 0 0 24px #7dfcff; }
.hc.jump::after { content: "Intercepter !"; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-size: .7rem; font-weight: 900; color: #7dfcff; white-space: nowrap; }
.hc.drawn { z-index: 4; }
.hc.drawn .card { animation: pulse .6s ease-in-out infinite alternate; }
.hand.dealt .hc { animation: dealIn .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc((var(--i) + 4) * 45ms); }
@keyframes dealIn { from { opacity: 0; translate: 0 80px; } }
.hand.dealt .hc .card { animation: flip .5s var(--ease-out) backwards; animation-delay: calc((var(--i) + 4) * 45ms + 120ms); }
@keyframes flip { 0% { transform: rotateY(180deg); filter: brightness(.15); } 50% { transform: rotateY(90deg); filter: brightness(.5); } }


/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(40, 0, 5, .55); backdrop-filter: blur(5px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: min(420px, 100%); max-height: 88dvh; overflow: auto; background: var(--paper); color: #3a0a0e; border-radius: 24px; padding: 22px;
  display: grid; gap: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); animation: rise .28s var(--ease-pop);
}
.sheet h2 { margin: 0; font-size: 1.5rem; text-align: center; }
.sheet p { margin: 0; line-height: 1.45; }
.sheet .rules label { background: #f3e6d2; }
.sheet .btn.ghost, .sheet .link { color: #7a0a10; }
.sheet .btn { box-shadow: 0 4px 0 #c7b49a; background: #fff; }
.sheet .btn.hot { background: linear-gradient(#ffe27a, var(--gold)); box-shadow: 0 4px 0 #c98a00; }
.sheet.hot h2 { font-size: 3rem; color: var(--red); }
@keyframes rise { from { transform: translateY(30px) scale(.94); opacity: 0; } }
.wheel-pick { /* the four colors as quadrants of a disc, the wild card in the hub */
  position: relative; width: min(280px, 74vw); aspect-ratio: 1; margin: 6px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  border-radius: 50%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
}
.pick {
  position: relative; border: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 75%, #fff), var(--c) 70%);
  color: #fff; font-weight: 900; font-size: 1rem; text-transform: capitalize; text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  transition: transform .16s var(--ease-out), filter .16s ease; display: grid; padding: 18%;
}
.pick:nth-child(1) { border-radius: 100% 0 0; place-items: start start; }
.pick:nth-child(2) { border-radius: 0 100% 0 0; place-items: start end; }
.pick:nth-child(3) { border-radius: 0 0 0 100%; place-items: end start; }
.pick:nth-child(4) { border-radius: 0 0 100%; place-items: end end; }
.pick.k-Y { color: #3a2a00; text-shadow: none; }
.pick kbd { font: inherit; font-size: .72rem; opacity: .75; }
.pick:hover, .pick:focus-visible { transform: scale(1.06); filter: brightness(1.12) drop-shadow(0 0 14px var(--c)); z-index: 1; }
.wheel-pick .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); --cw: 64px; pointer-events: none; }
.wheel-pick .hub .card { box-shadow: 0 0 0 6px var(--paper), 0 8px 18px rgba(0, 0, 0, .35); }
.targets { display: grid; gap: 10px; }
.targets .btn { justify-content: flex-start; }

.result { background: radial-gradient(circle at 50% 30%, rgba(255, 210, 90, .35), rgba(30, 0, 4, .8) 70%); overflow: hidden; }
.result::before { /* stage rays turning behind the podium */
  content: ""; position: absolute; left: 50%; top: 30%; width: 180vmax; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 220, 120, .16) 0 6deg, transparent 6deg 18deg);
  mask-image: radial-gradient(circle, #000, transparent 45%); animation: turn 40s linear infinite;
}

.podium { position: relative; width: min(520px, 100%); display: grid; gap: 16px; justify-items: center; animation: rise .4s var(--ease-pop); }
.banner {
  margin: 0; font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: .02em;
  text-shadow: 0 4px 0 #8a2c00, 0 0 40px rgba(255, 200, 60, .8);
}
.ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rank {
  width: min(108px, 21vw); aspect-ratio: 2 / 3; border-radius: 16px; border: 5px solid #fff; background: var(--red); display: grid; justify-items: center;
  align-content: center; gap: 4px; padding: 8px; text-align: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); animation: rise .5s backwards;
}
.rank:nth-child(2) { animation-delay: .08s; } .rank:nth-child(3) { animation-delay: .16s; } .rank:nth-child(4) { animation-delay: .24s; }
.rank b { font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .pts { font-size: clamp(1.3rem, 6vw, 1.8rem); font-weight: 900; }
.rank small { font-size: .7rem; opacity: .9; }
.rank.win { background: linear-gradient(var(--gold), #f39c12); color: #5a1a00; transform: scale(1.08); animation: rise .5s backwards, glow 1.6s .5s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 0 4px #fff, 0 0 50px var(--gold); } }
.podium .btn { min-width: 220px; }

/* ---------- effects ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.flyer { position: absolute; left: 0; top: 0; will-change: transform; }
.pop {
  position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 2.6rem; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); animation: popIn 1.4s var(--ease-pop) forwards;
}
.pop.nou { color: var(--gold); font-size: 2.2rem; }
.pop.win { font-size: 5rem; color: var(--gold); }
.pop.jump { color: #7dfcff; font-size: 1.6rem; }
.pop.caught { color: #ff8a8a; font-size: 1.8rem; }
.pop.skip { font-size: 3.4rem; }
@keyframes popIn {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-12deg); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(1) rotate(-6deg); opacity: 0; }
}
.burst { position: absolute; transform: translate(-50%, -50%); }
.burst b {
  display: block; font-size: 9rem; line-height: 1; font-weight: 900; color: var(--c); -webkit-text-stroke: 3px #fff;
  filter: drop-shadow(0 0 24px var(--c)); animation: blast 1s ease-out forwards;
}
.burst.k-W b { color: #fff; }
@keyframes blast {
  0% { transform: scale(.3) rotate(-30deg); opacity: 0; }
  25% { transform: scale(1.1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.6) rotate(20deg); opacity: 0; }
}
.burst.color { width: 0; height: 0; }
.burst.color i {
  position: absolute; width: 46px; height: 46px; border-radius: 10px; background: var(--c); border: 3px solid #fff;
  box-shadow: 0 0 24px var(--c); animation: cube 1s cubic-bezier(.2, .8, .3, 1) forwards;
}
.burst.color i:nth-child(1) { --tx: -70px; --ty: -90px; } .burst.color i:nth-child(2) { --tx: 70px; --ty: -90px; }
.burst.color i:nth-child(3) { --tx: -70px; --ty: 40px; } .burst.color i:nth-child(4) { --tx: 70px; --ty: 40px; }
@keyframes cube {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  35% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(25deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx) * 1.3), calc(-50% + var(--ty) - 60px)) scale(.6) rotate(60deg); opacity: 0; }
}
.spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c), 0 0 3px #fff; }
.spark.k-W { --c: #fff; }
.ghost {
  position: absolute; width: var(--cw); aspect-ratio: 2 / 3; border-radius: calc(var(--cw) * .12);
  background: color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 0 30px var(--c);
}
.bubble {
  position: absolute; max-width: 220px; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink);
  font-weight: 700; font-size: .95rem; line-height: 1.3; translate: -10% -150%; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  overflow-wrap: anywhere; animation: bubble 4s var(--ease-out) forwards;
}
@keyframes bubble { 0% { opacity: 0; scale: .6; } 8% { opacity: 1; scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: -10% -190%; } }

/* ---------- history and chat ---------- */
.log, .chat {
  position: absolute; z-index: 8; background: rgba(40, 3, 8, .86); border: 1px solid var(--panel-line); border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .4); backdrop-filter: blur(6px);
}
.log { left: 10px; top: calc(60px + env(safe-area-inset-top)); width: min(280px, calc(100vw - 20px)); max-height: 46dvh; overflow: auto; padding: 10px 12px; animation: fade .2s ease; }
.log h2 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .86rem; line-height: 1.35; }
.log li { padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.log li:first-child { animation: rise .3s var(--ease-out); }
.log .ev-win { color: var(--gold); font-weight: 800; }
.chat { right: 10px; top: calc(60px + env(safe-area-inset-top)); width: min(330px, calc(100vw - 20px)); padding: 12px; display: grid; gap: 10px; animation: rise .22s var(--ease-out); }
.chat .lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 30dvh; overflow: auto; font-size: .9rem; }
.chat .lines li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.chat .lines .disc { width: 24px; height: 24px; border-width: 2px; border-radius: 8px; font-size: .7rem; }
.emotes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emotes button { border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 1.3rem; min-height: 40px; transition: transform .12s var(--ease-out); }
.emotes button:hover, .emotes button:focus-visible { transform: scale(1.18); background: rgba(255, 255, 255, .2); }
.chat input { min-height: 40px; font-size: 1rem; }

.rain {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; background: var(--c);
  animation: fall var(--d) ease-in forwards;
}
@keyframes fall { to { transform: translate(var(--x), 110vh) rotate(720deg); } }
#toast {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 40; max-width: calc(100vw - 32px);
  background: var(--ink); color: #fff; border: 2px solid var(--gold); padding: 10px 18px; border-radius: 16px; font-weight: 700; text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4); animation: rise .25s ease;
}

@media (width >= 760px) {
  :root { --cw: clamp(80px, 8vw, 104px); }
  .ring { top: 55%; } .center { top: 55%; }
}
@media (width >= 1100px) { /* the history stays open in a side column */
  .log { top: 70px; bottom: 200px; max-height: none; width: 260px; }
  .log-open .felt { margin-left: 270px; }
}
@media (width <= 420px) {
  .bar { gap: 6px; padding-inline: 8px; }
  .bar .round, .bar .tcode { display: none; }
  .icon-btn { width: 36px; height: 36px; }
}
:fullscreen body, body:fullscreen { background-attachment: scroll; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .confetti { display: none; }
}