/* ============ UNO · afterdark.sh ============ */
:root {
  --red: #e0322e;
  --red-d: #a31f1c;
  --yellow: #f7c531;
  --yellow-d: #c79a14;
  --green: #3aa547;
  --green-d: #237030;
  --blue: #2266c8;
  --blue-d: #154a96;
  --ink: #14161c;
  --felt1: #1b2335;
  --felt2: #0c0f18;
  --panel: #1d2230;
  --panel-2: #272e41;
  --text: #eef1f8;
  --muted: #9aa3b8;
  --accent: #ffd23f;
  --cardw: clamp(58px, 10.5vw, 96px);
  --cardh: calc(var(--cardw) * 1.5);
  --radius: calc(var(--cardw) * 0.13);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--felt2);
  color: var(--text);
  overflow: hidden;
  user-select: none;
}
button { font: inherit; cursor: pointer; border: 0; color: inherit; background: none; }
input {
  font: inherit; color: var(--text);
  background: var(--panel-2);
  border: 2px solid #3a4258; border-radius: 12px;
  padding: 12px 14px; outline: none; width: 100%;
}
input:focus { border-color: var(--accent); }
.hidden { display: none !important; }

#app, .view { position: absolute; inset: 0; }
.view { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }

/* ============ buttons ============ */
.btn {
  border-radius: 14px; padding: 12px 22px; font-weight: 700; letter-spacing: .3px;
  background: var(--panel-2); transition: transform .12s, filter .12s, box-shadow .12s;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn-big { font-size: 1.25rem; padding: 15px 30px; width: 100%; }
.btn-red { background: linear-gradient(180deg, #f0453f, var(--red-d)); }
.btn-blue { background: linear-gradient(180deg, #3b82e0, var(--blue-d)); }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 2px #3a4258; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ============ HOME ============ */
#view-home { background: radial-gradient(120% 90% at 50% 0%, var(--felt1), var(--felt2)); }
.home-bg {
  position: absolute; inset: -10%;
  background:
    radial-gradient(closest-side, rgba(224,50,46,.16), transparent 70%) 12% 18% / 44vmax 44vmax no-repeat,
    radial-gradient(closest-side, rgba(34,102,200,.16), transparent 70%) 88% 30% / 44vmax 44vmax no-repeat,
    radial-gradient(closest-side, rgba(58,165,71,.13), transparent 70%) 22% 88% / 40vmax 40vmax no-repeat,
    radial-gradient(closest-side, rgba(247,197,49,.12), transparent 70%) 80% 86% / 40vmax 40vmax no-repeat;
  animation: drift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift { to { transform: translate(2%, -3%) scale(1.06); } }

.logo-wrap { text-align: center; z-index: 1; }
.logo-card {
  display: inline-block; background: var(--ink);
  padding: 3vmin 6vmin; border-radius: 22px;
  position: relative; transform: rotate(-5deg);
  box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 0 0 5px #fff;
  animation: logo-pop .7s cubic-bezier(.2,1.6,.4,1) both;
}
.logo-card::before {
  content: ""; position: absolute; inset: 12% 6%;
  background: var(--red); border-radius: 50%;
  transform: rotate(-26deg);
}
.logo-uno {
  position: relative; font-size: clamp(3rem, 11vmin, 6.2rem);
  font-weight: 900; font-style: italic; letter-spacing: -2px;
  color: var(--accent);
  text-shadow: 3px 3px 0 #fff, 6px 6px 14px rgba(0,0,0,.45);
}
@keyframes logo-pop { from { transform: rotate(-5deg) scale(.4); opacity: 0; } }
.logo-sub { margin-top: 10px; color: var(--muted); letter-spacing: 4px; font-weight: 600; }

.panel {
  position: relative;
  z-index: 1; width: min(420px, 92vw);
  background: rgba(29,34,48,.92); backdrop-filter: blur(8px);
  border: 1px solid #323a52; border-radius: 22px;
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: panel-in .45s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes panel-in { from { transform: translateY(26px) scale(.97); opacity: 0; } }
.field-label { font-size: .8rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#avatar-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avatar-opt {
  font-size: 1.5rem; aspect-ratio: 1; border-radius: 12px;
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
  transition: transform .1s, box-shadow .1s;
}
.avatar-opt:hover { transform: scale(1.12); }
.avatar-opt.sel { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.1); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #3a4258; }
.join-row { display: flex; gap: 10px; }
#inp-code { text-transform: uppercase; letter-spacing: 8px; font-weight: 800; text-align: center; font-size: 1.2rem; }
.home-foot { z-index: 1; color: var(--muted); font-size: .85rem; }

/* ============ LOBBY ============ */
#view-lobby { background: radial-gradient(120% 90% at 50% 0%, var(--felt1), var(--felt2)); }
.lobby-panel { align-items: stretch; text-align: center; }
.code-box { background: var(--panel-2); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.code-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }
.code-big { font-size: 3rem; font-weight: 900; letter-spacing: 14px; padding-left: 14px; color: var(--accent); text-shadow: 0 4px 18px rgba(255,210,63,.35); }
.lobby-players { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 70px; }
.lobby-player {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel-2); padding: 10px 14px; border-radius: 14px; min-width: 86px;
  animation: pop-in .35s cubic-bezier(.2,1.6,.4,1) both;
}
.lobby-player .av { font-size: 1.9rem; }
.lobby-player .nm { font-size: .85rem; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-player .host-tag { font-size: .65rem; color: var(--accent); font-weight: 800; letter-spacing: 1px; }
.lobby-wait { color: var(--muted); font-style: italic; padding: 8px; }
@keyframes pop-in { from { transform: scale(.5); opacity: 0; } }

/* ============ GAME TABLE (Vegas 3D scene) ============ */
#view-game {
  justify-content: stretch;
  background: linear-gradient(180deg, #060912 0%, #0b1022 46%, #131a30 100%);
}

#scene {
  position: absolute; inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 24%;
  overflow: hidden;
}

#char3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 38; pointer-events: none; }
.char-wrap.spacer3d { aspect-ratio: 200/230; }
.char-img { width: 100%; display: block; }

/* the room behind the table */
#room { position: absolute; inset: 0; pointer-events: none; }
.room-glow {
  position: absolute; left: 50%; top: 22%; width: 130vmax; height: 60vmax;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(38,80,180,.28), transparent 70%) 18% 50% / 46vmax 30vmax no-repeat,
    radial-gradient(closest-side, rgba(150,40,160,.16), transparent 70%) 82% 46% / 44vmax 30vmax no-repeat,
    radial-gradient(closest-side, rgba(224,50,46,.1), transparent 70%) 50% 30% / 56vmax 26vmax no-repeat;
}
.neon-strip {
  position: absolute; left: -4%; right: -4%; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, transparent, #2e7fff 18%, #6db1ff 50%, #2e7fff 82%, transparent);
  box-shadow: 0 0 14px 2px rgba(64,140,255,.55);
  opacity: .5;
}
.neon-strip.n1 { top: 13%; }
.neon-strip.n2 { top: 19%; opacity: .28; transform: scaleX(1.04); }
.spotlight {
  position: absolute; left: 50%; top: -12%; width: 110vmin; height: 90vmin;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 0%, rgba(140,180,255,.14), transparent 75%);
}

/* the 3D table */
#table3d-wrap {
  position: absolute; left: 50%; top: 60%;
  width: min(160vmin, 1200px); aspect-ratio: 1.5;
  transform: translate(-50%, -50%);
  z-index: 40; pointer-events: none;
}
#table3d {
  position: absolute; inset: 0;
  transform: rotateX(52deg);
  transform-style: preserve-3d;
  border-radius: 50%;
  pointer-events: auto;
  background:
    radial-gradient(58% 58% at 50% 42%, #2c5aa8 0%, #1d4084 38%, #16306a 62%, #122850 100%);
  box-shadow:
    0 0 0 10px #0c0f1a,
    0 0 0 14px rgba(64, 150, 255, .85),
    0 0 46px 16px rgba(54, 130, 255, .32),
    0 60px 80px rgba(0, 0, 0, .55),
    inset 0 0 110px rgba(0, 0, 0, .55);
}
#felt-inner {
  position: absolute; inset: 9% 12%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px rgba(120, 180, 255, .22), inset 0 0 60px rgba(0,0,0,.3);
  pointer-events: none;
}

#dir-ind {
  position: absolute; left: 50%; top: 50%;
  width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%);
  color: rgba(150, 200, 255, .12); pointer-events: none;
  animation: spin-cw 14s linear infinite; transition: color .3s;
}
#dir-ind.ccw { animation: spin-ccw 14s linear infinite; }
#dir-ind.flash { color: rgba(255, 210, 63, .5); }
@keyframes spin-cw { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes spin-ccw { from { transform: translate(-50%,-50%) scaleY(-1) rotate(0); } to { transform: translate(-50%,-50%) scaleY(-1) rotate(360deg); } }

#piles {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  display: flex; gap: clamp(20px, 7vmin, 70px); align-items: center;
}

/* cards-on-felt seats for each opponent */
#table-seats { position: absolute; inset: 0; pointer-events: none; }
.table-seat {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.table-seat .minihand { display: flex; height: calc(var(--cardw) * .62); }
.table-seat .minicard {
  width: calc(var(--cardw) * .42); height: calc(var(--cardw) * .62);
  border-radius: 4px; background: linear-gradient(160deg, #23232e, #0e0e16);
  box-shadow: inset 0 0 0 1.5px #fff2, 0 2px 4px rgba(0,0,0,.5);
  position: relative; margin-left: calc(var(--cardw) * -.14);
  background-image: radial-gradient(ellipse 34% 27% at 50% 50%, #c43a32 96%, transparent 100%);
}
.table-seat .minicard:first-child { margin-left: 0; }
.table-seat .cnt {
  background: #1c478f; color: #fff; font-size: .72rem; font-weight: 800;
  border-radius: 999px; padding: 1px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.45);
  border: 1.5px solid rgba(140,190,255,.5);
}
.table-seat .opp-prop { position: static; width: clamp(26px, 5vmin, 40px); margin-top: 2px; }

#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; z-index: 30; }
.tb-item { font-weight: 800; letter-spacing: 3px; color: var(--muted); background: rgba(0,0,0,.3); padding: 6px 12px; border-radius: 10px; }
.tb-spacer { flex: 1; }
.tb-btn { font-size: 1.25rem; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.3); position: relative; }
.tb-btn:hover { background: rgba(0,0,0,.5); }
#chat-dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: block; }

#table { position: absolute; inset: 0; }

/* ---- opponents: seated around the far arc of the table ---- */
#opponents { position: absolute; inset: 0; pointer-events: none; }
.opp {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translate(-50%, -82%) scale(var(--sc, 1));
  transform-origin: 50% 100%;
  pointer-events: auto;
  transition: filter .25s;
}
.opp.turn { filter: drop-shadow(0 0 18px rgba(255,210,63,.55)); }
.opp.turn .char-svg { filter: drop-shadow(0 7px 10px rgba(0,0,0,.38)) drop-shadow(0 0 10px rgba(255,210,63,.35)); }
/* thinking bubble over whoever's turn it is */
.opp.turn .char-wrap::after {
  content: "💭"; position: absolute; top: -20px; right: -14px;
  font-size: 1.25rem; animation: think 1.3s ease-in-out infinite;
}
@keyframes think { 50% { transform: translateY(-5px) scale(1.12); } }
.opp.offline { opacity: .45; }
.opp .av { font-size: clamp(1.5rem, 4vmin, 2.2rem); position: relative; }
.opp .av .zzz { position: absolute; top: -8px; right: -12px; font-size: .8rem; }
.opp .nm {
  font-size: .76rem; font-weight: 700; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(5,8,16,.72); padding: 2px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(3px);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.opp .score {
  font-size: .62rem; color: var(--accent); font-weight: 700;
  background: rgba(0,0,0,.5); padding: 0 8px; border-radius: 999px;
}
.opp .uno-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-8deg);
  background: var(--red); color: var(--accent); font-weight: 900; font-style: italic;
  font-size: .8rem; padding: 2px 10px; border-radius: 8px; border: 2px solid #fff;
  animation: uno-bounce .5s cubic-bezier(.2,1.8,.4,1) both; z-index: 2;
}
@keyframes uno-bounce { from { transform: translateX(-50%) rotate(-8deg) scale(0); } }
.btn-catch {
  margin-top: 4px; background: linear-gradient(180deg, #f0453f, var(--red-d));
  font-size: .75rem; font-weight: 800; padding: 5px 12px; border-radius: 999px;
  animation: pulse 1s infinite; box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
@keyframes pulse { 50% { transform: scale(1.1); } }

#draw-pile { position: relative; width: var(--cardw); height: var(--cardh); cursor: pointer; }
#draw-pile .card { position: absolute; left: 0; top: 0; }
#draw-pile .stack3 { transform: translate(6px, 5px) rotate(3deg); }
#draw-pile .stack2 { transform: translate(3px, 2px) rotate(-2deg); }
#draw-pile:hover .stack1 { transform: translateY(-7px); }
#draw-pile.my-turn .stack1 { animation: breathe 1.6s ease-in-out infinite; box-shadow: 0 0 22px rgba(255,210,63,.5); }
@keyframes breathe { 50% { transform: translateY(-6px); } }
#draw-count {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); font-size: .7rem; font-weight: 700; color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
}
#pending-badge {
  position: absolute; top: -14px; right: -14px; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #ff6a64, var(--red) 55%, var(--red-d));
  color: #fff; font-weight: 900; font-style: italic;
  font-size: clamp(.9rem, 2.6vmin, 1.2rem); padding: 8px 12px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(224,50,46,.6);
  animation: pulse .8s infinite;
}

#discard-wrap { position: relative; width: var(--cardw); height: var(--cardh); }
#discard { position: absolute; inset: 0; }
#discard .card { position: absolute; left: 0; top: 0; }
#color-ring {
  position: absolute; inset: -16%; border-radius: 24%;
  transition: box-shadow .4s, background .4s; pointer-events: none;
}
#color-ring.red    { box-shadow: 0 0 0 4px var(--red),    0 0 48px 6px rgba(224,50,46,.55); }
#color-ring.yellow { box-shadow: 0 0 0 4px var(--yellow), 0 0 48px 6px rgba(247,197,49,.55); }
#color-ring.green  { box-shadow: 0 0 0 4px var(--green),  0 0 48px 6px rgba(58,165,71,.55); }
#color-ring.blue   { box-shadow: 0 0 0 4px var(--blue),   0 0 48px 6px rgba(34,102,200,.55); }

/* ---- status ---- */
#status {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--cardh) + 64px);
  text-align: center; padding: 4px 12px; z-index: 60;
  pointer-events: none;
}
#status-text { font-weight: 800; font-size: clamp(.95rem, 2.6vmin, 1.25rem); min-height: 1.5em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
#status-text.mine { color: var(--accent); animation: pop-in .3s both; }
#timerbar { width: min(300px, 60vw); height: 5px; margin: 6px auto 0; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; }
#timerbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--yellow), var(--red)); border-radius: 99px; transform-origin: left; }

/* ---- my hand ---- */
#me {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 0 max(14px, env(safe-area-inset-bottom));
  min-height: calc(var(--cardh) + 40px); z-index: 70;
  pointer-events: none;
}
#me > * { pointer-events: auto; }
#hand { display: flex; justify-content: center; align-items: flex-end; height: calc(var(--cardh) + 26px); padding: 0 10px; }
#hand .card {
  margin: 0 calc(var(--cardw) * -0.18);
  transition: transform .18s, filter .18s, margin .18s;
  transform: translateY(var(--fan-y, 0)) rotate(var(--fan-r, 0deg));
  cursor: pointer; flex-shrink: 1; min-width: 0;
}
#hand .card.playable { filter: drop-shadow(0 0 9px rgba(255,210,63,.65)); }
#hand .card.playable:hover { transform: translateY(calc(var(--fan-y, 0px) - 22px)) rotate(0deg) scale(1.07); z-index: 50 !important; }
#hand .card.dud { filter: saturate(.45) brightness(.62); }
#hand .card.dealt { animation: deal-in .45s cubic-bezier(.2,1.4,.4,1) both; }
#hand .card.sel {
  transform: translateY(calc(var(--fan-y, 0px) - 30px)) rotate(0deg) scale(1.05);
  z-index: 60 !important;
  filter: drop-shadow(0 0 12px rgba(255,210,63,.95));
}

#btn-playsel {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  z-index: 25; white-space: nowrap; animation: pop-in .2s cubic-bezier(.2,1.5,.4,1) both;
}

.kick-btn {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--red-d); color: #fff;
  font-size: .7rem; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  opacity: .65; transition: opacity .15s, transform .15s;
}
.kick-btn:hover { opacity: 1; transform: scale(1.18); background: var(--red); }
.lobby-player { position: relative; }
@keyframes deal-in { from { transform: translateY(60vh) rotate(20deg); } }

#btn-uno {
  position: absolute; right: clamp(8px, 3vw, 40px); bottom: max(18px, env(safe-area-inset-bottom));
  width: clamp(74px, 14vmin, 104px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6a64, var(--red) 55%, var(--red-d));
  color: var(--accent); font-weight: 900; font-style: italic; font-size: clamp(1.1rem, 3vmin, 1.5rem);
  border: 4px solid #fff; box-shadow: 0 8px 24px rgba(224,50,46,.5), 0 4px 0 rgba(0,0,0,.4);
  animation: pulse 0.9s infinite; z-index: 20; letter-spacing: -1px;
}
#btn-uno:active { transform: scale(.92); }

/* ============ CARDS ============ */
.card {
  width: var(--cardw); height: var(--cardh);
  border-radius: var(--radius); position: relative;
  background: var(--cc, #888);
  box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 0 0 calc(var(--cardw) * .055) #fff;
  font-style: italic; font-weight: 900; color: #fff;
  overflow: hidden;
}
.card.red { --cc: var(--red); --ccd: var(--red-d); }
.card.yellow { --cc: var(--yellow); --ccd: var(--yellow-d); }
.card.green { --cc: var(--green); --ccd: var(--green-d); }
.card.blue { --cc: var(--blue); --ccd: var(--blue-d); }
.card.wild { --cc: var(--ink); --ccd: #000; }
.card .oval {
  position: absolute; inset: 9% 7%;
  background: rgba(255,255,255,.92); border-radius: 50%;
  transform: rotate(-28deg);
}
.card.wild .oval { background: conic-gradient(var(--red) 0 25%, var(--blue) 0 50%, var(--yellow) 0 75%, var(--green) 0); }
.card .mid {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cardw) * .52); color: var(--cc);
  text-shadow: calc(var(--cardw)*.025) calc(var(--cardw)*.025) 0 var(--ccd, #0008);
  z-index: 1;
}
.card.wild .mid { color: #fff; text-shadow: 0 0 calc(var(--cardw)*.08) #000; font-size: calc(var(--cardw) * .3); letter-spacing: -1px; }
.card .mid.sym { font-size: calc(var(--cardw) * .44); font-style: normal; }
.card .corner {
  position: absolute; font-size: calc(var(--cardw) * .19); color: #fff; z-index: 1;
  text-shadow: 1px 1px 0 #0007; font-style: italic;
}
.card .corner.tl { top: 5%; left: 8%; }
.card .corner.br { bottom: 5%; right: 8%; transform: rotate(180deg); }

.card.back { background: var(--ink); }
.card.back::before {
  content: ""; position: absolute; inset: 9% 7%;
  background: var(--red); border-radius: 50%; transform: rotate(-28deg);
}
.card.back::after {
  content: "UNO"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: calc(var(--cardw) * .3);
  text-shadow: 2px 2px 0 #fff5;
}

/* flying animation clones */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
#fx-layer .card { position: fixed; margin: 0; transition: transform .42s cubic-bezier(.5,.1,.3,1.05); will-change: transform; }

/* big center flashes (UNO! / SKIP / etc) */
#big-fx { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 95; }
.bigtext {
  font-size: clamp(2.6rem, 12vmin, 7rem); font-weight: 900; font-style: italic;
  color: var(--accent); -webkit-text-stroke: 3px var(--red);
  text-shadow: 0 10px 40px rgba(0,0,0,.7), 4px 4px 0 var(--red);
  animation: big-pop 1.15s cubic-bezier(.2,1.5,.4,1) both;
  letter-spacing: -2px; white-space: nowrap;
}
@keyframes big-pop {
  0% { transform: scale(0) rotate(-14deg); opacity: 0; }
  18% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  30% { transform: scale(1) rotate(0); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ============ MODALS ============ */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,7,12,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: var(--panel); border: 1px solid #323a52; border-radius: 22px;
  padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center;
  width: min(420px, 92vw); text-align: center;
  animation: pop-in .3s cubic-bezier(.2,1.5,.4,1) both;
  max-height: 88vh; overflow-y: auto;
}
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.color-opt {
  aspect-ratio: 1.5; border-radius: 16px; box-shadow: 0 5px 0 rgba(0,0,0,.4);
  transition: transform .12s;
}
.color-opt:hover { transform: scale(1.07); }
.color-opt[data-color="red"] { background: linear-gradient(135deg, #f0453f, var(--red-d)); }
.color-opt[data-color="yellow"] { background: linear-gradient(135deg, #ffd95e, var(--yellow-d)); }
.color-opt[data-color="green"] { background: linear-gradient(135deg, #4cc35b, var(--green-d)); }
.color-opt[data-color="blue"] { background: linear-gradient(135deg, #3b82e0, var(--blue-d)); }
.modal-btns { display: flex; gap: 12px; align-items: center; justify-content: center; width: 100%; }
#drawn-card-slot { display: flex; justify-content: center; }
#drawn-card-slot .card { animation: pop-in .35s cubic-bezier(.2,1.6,.4,1) both; }

/* round end */
.round-box { gap: 10px; }
#round-char { width: 132px; margin: -6px auto -10px; animation: winner-in .6s cubic-bezier(.2,1.6,.4,1) both; }
#round-char .char-bob { animation: winner-dance .7s ease-in-out infinite; transform-origin: 100px 200px; }
@keyframes winner-in { from { transform: translateY(40px) scale(.4); opacity: 0; } }
@keyframes winner-dance { 25% { transform: rotate(-3deg) translateY(-4px); } 75% { transform: rotate(3deg) translateY(-4px); } }
#round-banner { font-size: clamp(1.6rem, 6vmin, 2.4rem); font-weight: 900; font-style: italic; color: var(--accent); }
#round-points { color: var(--muted); }
#score-table { width: 100%; border-collapse: collapse; }
#score-table td { padding: 8px 10px; border-bottom: 1px solid #323a52; text-align: left; }
#score-table td:last-child { text-align: right; font-weight: 800; }
#score-table tr.winner td { color: var(--accent); }
#score-table tr.me td:first-child::after { content: " (you)"; color: var(--muted); font-size: .8em; }

#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.conf {
  position: absolute; top: -4vh; width: 10px; height: 16px; border-radius: 2px;
  animation: conf-fall linear both;
}
@keyframes conf-fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* ============ CHAT ============ */
#chat {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 88vw);
  background: rgba(20,24,34,.96); backdrop-filter: blur(8px);
  border-left: 1px solid #323a52; z-index: 40;
  display: flex; flex-direction: column;
  animation: chat-in .25s ease both;
}
@keyframes chat-in { from { transform: translateX(100%); } }
#chat-head { padding: max(12px, env(safe-area-inset-top)) 14px 10px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #323a52; }
#btn-chat-close { font-size: 1rem; padding: 4px 8px; }
#chat-msgs { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { font-size: .9rem; line-height: 1.35; word-wrap: break-word; animation: pop-in .2s both; }
.chat-msg .who { font-weight: 800; color: var(--accent); margin-right: 6px; }
.chat-msg.sys { color: var(--muted); font-style: italic; font-size: .82rem; }
#chat-emotes { display: flex; gap: 4px; padding: 6px 10px; border-top: 1px solid #323a52; }
#chat-emotes button { font-size: 1.3rem; padding: 4px 7px; border-radius: 8px; }
#chat-emotes button:hover { background: var(--panel-2); transform: scale(1.15); }
#chat-form { display: flex; gap: 8px; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
#chat-form .btn { padding: 8px 14px; }

/* ============ TOASTS ============ */
#toasts { position: fixed; top: max(54px, calc(env(safe-area-inset-top) + 48px)); left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(15,18,26,.94); border: 1px solid #3a4258; border-radius: 12px;
  padding: 10px 18px; font-weight: 600; font-size: .92rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: toast-in .25s cubic-bezier(.2,1.5,.4,1) both;
}
.toast.err { border-color: var(--red); color: #ffb4b1; }
@keyframes toast-in { from { transform: translateY(-16px) scale(.9); opacity: 0; } }
.toast.bye { animation: toast-out .3s ease both; }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }

/* ============ characters ============ */
.char-svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 7px 10px rgba(0,0,0,.38)); }
.char-bob { animation: char-bob 3.8s ease-in-out infinite; transform-origin: 100px 180px; }
@keyframes char-bob { 50% { transform: translateY(3px) rotate(.4deg); } }
.eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95%, 97% { transform: scaleY(.08); } }
.halo { animation: halo-float 3s ease-in-out infinite; }
@keyframes halo-float { 50% { transform: translateY(4px); } }
.opp:nth-child(2n) .char-bob { animation-delay: -1.9s; }
.opp:nth-child(3n) .char-bob { animation-delay: -.9s; }
.opp:nth-child(2n) .eye { animation-delay: -2.2s; }

.char-wrap { position: relative; width: clamp(52px, 9.5vw, 96px); }
.opp .char-wrap { width: clamp(92px, 19vmin, 188px); }
.char-wrap .zzz { position: absolute; top: -4px; right: -6px; font-size: 1rem; }
.opp-prop { position: absolute; bottom: -6px; right: -16px; width: 32px; }
.prop-svg { width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.steam { animation: steam 2.2s ease-in-out infinite; opacity: .7; }
@keyframes steam { 50% { transform: translateY(-3px); opacity: .25; } }

.opp.acted .char-svg, #me-seat.acted .char-svg { animation: char-act .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes char-act { 30% { transform: translateY(-12px) scale(1.06); } }
.opp.hit .char-svg, #me-seat.hit .char-svg { animation: char-hit .6s ease; }
@keyframes char-hit { 15%,45%,75% { transform: translateX(-6px) rotate(-2deg); } 30%,60%,90% { transform: translateX(6px) rotate(2deg); } }

.vipname { color: var(--accent); text-shadow: 0 0 10px rgba(255,210,63,.5); }
.vip-badge { margin-right: 3px; font-size: .8em; }

#me-seat {
  position: absolute; left: clamp(6px, 2.5vw, 36px); bottom: max(10px, env(safe-area-inset-bottom));
  width: clamp(86px, 15vmin, 150px); z-index: 15; pointer-events: none;
  transition: filter .3s;
}
#me-seat.turn { filter: drop-shadow(0 0 14px rgba(255,210,63,.65)); }
#me-prop { position: absolute; bottom: 0; right: -22px; width: 34px; }

/* ============ chips / economy ============ */
.chips-pill {
  background: linear-gradient(180deg, #3a3320, #2a2415);
  border: 1px solid #8f650f; color: var(--accent);
  font-weight: 800; padding: 6px 13px; border-radius: 999px; font-size: .92rem;
  white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,210,63,.25);
}
#home-chips { position: absolute; top: 14px; right: 14px; z-index: 2; }
#home-char-row { display: flex; gap: 16px; align-items: center; padding-top: 6px; }
#home-char {
  width: 128px; flex-shrink: 0; padding: 10px 6px 0;
  background:
    radial-gradient(70% 28% at 50% 96%, rgba(255,210,63,.22), transparent 75%),
    radial-gradient(120% 110% at 50% 0%, #2c3450, #1a1f30 80%);
  border: 1px solid #3a4258; border-radius: 18px;
  overflow: hidden;
}
#home-char-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
#home-char-side .field-label { margin-bottom: -4px; }
#btn-studio { width: 100%; }

/* ============ character studio ============ */
#view-studio {
  background: radial-gradient(120% 90% at 50% 0%, var(--felt1), var(--felt2));
  justify-content: flex-start; gap: 0;
}
#studio-head {
  width: min(860px, 96vw); display: flex; align-items: center; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 8px 10px;
}
.studio-title { flex: 1; text-align: center; font-weight: 900; font-size: 1.25rem; font-style: italic; letter-spacing: 1px; }
#studio-main {
  width: min(860px, 96vw); flex: 1; min-height: 0;
  display: flex; gap: 16px; align-items: stretch;
}
#studio-left {
  width: clamp(160px, 30%, 260px); flex-shrink: 0; position: relative;
  background: radial-gradient(80% 60% at 50% 70%, rgba(255,210,63,.07), transparent), var(--panel);
  border: 1px solid #323a52; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px;
}
#studio-preview { width: 100%; max-width: 230px; flex: 1; min-height: 250px; }
#studio-preview canvas { width: 100%; height: 100%; display: block; }
#studio-prop-preview { width: 56px; position: absolute; bottom: 18px; right: 14px; }
#studio-viptag {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  color: var(--accent); font-weight: 900; letter-spacing: 3px; font-size: .85rem;
  text-shadow: 0 0 14px rgba(255,210,63,.7);
}
#studio-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#slot-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.slot-tab {
  padding: 9px 16px; border-radius: 999px; background: var(--panel-2);
  font-weight: 800; font-size: .85rem; white-space: nowrap; color: var(--muted);
}
.slot-tab.active { background: var(--accent); color: #1d1606; }
#item-grid {
  flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
  align-content: start; padding-bottom: 10px;
}
.item-tile {
  background: var(--panel); border: 2px solid #323a52; border-radius: 16px;
  padding: 8px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.item-tile:hover { transform: translateY(-3px); border-color: #4a5474; }
.item-tile.equipped { border-color: var(--accent); box-shadow: 0 0 16px rgba(255,210,63,.25); }
.item-tile.locked .item-pv { filter: grayscale(.55) brightness(.6); }
.item-pv { width: 74px; }
.item-pv .prop-svg { padding: 8px; }
.pv-none { font-size: 2rem; color: var(--muted); padding: 16px 0; }
.item-name { font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.15; }
.item-tag { font-size: .68rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.item-tag.on { background: var(--accent); color: #1d1606; }
.item-tag.price { background: #3a3320; color: var(--accent); border: 1px solid #8f650f; }
.item-tag.vip { background: linear-gradient(180deg, #ffe28a, #c2920e); color: #1d1606; }

#vip-banner {
  width: min(860px, 96vw); margin: 10px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(100deg, #2a2415, #4a3a12 45%, #2a2415);
  border: 1.5px solid #c2920e; border-radius: 18px;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 30px rgba(255,210,63,.06);
}
.vip-text { flex: 1; min-width: 0; }
.vip-title { font-weight: 900; font-style: italic; color: var(--accent); letter-spacing: 1px; }
.vip-perks { font-size: .8rem; color: #cdbd8a; }
.btn-gold {
  background: linear-gradient(180deg, #ffe28a, #d9a722);
  color: #1d1606; white-space: nowrap;
}
.btn-gold:disabled { opacity: .8; cursor: default; }

/* ============ small screens ============ */
@media (max-width: 560px) {
  :root { --cardw: clamp(50px, 13.5vw, 72px); }
  .opp .nm { max-width: 64px; font-size: .7rem; }
  .opp { padding: 5px 6px; }
  #opponents { gap: 4px; }
  .code-big { font-size: 2.2rem; letter-spacing: 9px; padding-left: 9px; }
  .char-wrap { width: clamp(44px, 13vw, 64px); }
  #me-seat { width: 56px; }
  #me-prop { right: -14px; width: 26px; }
  #studio-main { flex-direction: column; }
  #studio-left { width: 100%; flex-direction: row; justify-content: flex-start; gap: 10px; }
  #studio-preview { max-width: 130px; }
  #vip-banner { flex-direction: column; text-align: center; gap: 8px; padding: 10px; }
  #home-char { width: 90px; }
}
@media (max-height: 620px) {
  :root { --cardw: clamp(44px, 9vh, 70px); }
  #opponents { padding-top: 42px; }
}