/* ─── play.fozbal · دوزة (Douza) — liquid sort race ─── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* HTML `hidden` must win over any explicit display rule (.btn etc.) */
[hidden]{display:none!important}
html{background:#FFF7ED}
html:not(.fonts-ready) body{visibility:hidden}
html.fonts-ready body{visibility:visible}

:root{
  --bg:#FFF7ED;
  --surface:#FFFFFF;
  --surface-2:#FFFBF4;
  --ink:#1A0F0A;
  --ink-dim:#5b443a;
  --ink-mute:#7a665b;
  --line:rgba(26,15,10,.08);
  --line-strong:rgba(26,15,10,.16);
  --signal:#FF3D5A;
  --signal-2:#FF8A3D;
  --signal-3:#FFC700;
  --success:#19C162;
  --danger:#D4423A;
  --radius:18px;
  --radius-sm:12px;
}

body{
  font-family:'Tajawal',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100dvh;direction:rtl;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
}

.backdrop{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(26,15,10,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,15,10,.10) 1px,transparent 1px),
    linear-gradient(rgba(26,15,10,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,15,10,.05) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 50% 40%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 95% 85% at 50% 40%,#000 55%,transparent 100%);
}

.screen{
  display:none;
  position:relative;z-index:1;
  min-height:100dvh;
  max-width:680px;margin:0 auto;
  padding:18px 16px 30px;
  flex-direction:column;
}
.screen.active{display:flex}
@supports(padding-top:env(safe-area-inset-top)){
  .screen{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(30px + env(safe-area-inset-bottom))}
}

.centered-card{
  margin:auto;
  width:100%;max-width:360px;
  display:flex;flex-direction:column;gap:14px;
  text-align:center;
  padding:24px 4px;
}
.logo{margin-bottom:14px}
.brand-mini{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--ink-mute);margin-bottom:18px}
.brand-mini .dot{color:var(--signal)}
.title{
  font-size:3.6rem;font-weight:900;line-height:1;
  background-image:linear-gradient(135deg,var(--signal),var(--signal-2) 55%,var(--signal-3));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:10px;
}
.title-sm{font-size:2.4rem;font-weight:900;line-height:1;margin-bottom:6px}
.title-sm .grad,
.page-title .grad{
  background-image:linear-gradient(135deg,var(--signal),var(--signal-2) 55%,var(--signal-3));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  /* Extend the gradient's paint box upward so Arabic diacritics (the dot above
     ز and the two dots above ة) fall inside the masked area instead of being
     painted as transparent. Small font sizes + font-weight:900 + Tajawal's
     tight ascent metrics caused this to clip otherwise. */
  display:inline-block;
  line-height:1.35;
  padding-top:.12em;
}
.subtitle{font-size:.95rem;color:var(--ink-mute);font-weight:600}
.greeting{font-size:1.1rem;font-weight:700;color:var(--ink-dim);margin-bottom:8px}

.input-group{margin-bottom:4px;text-align:right}
.input-group label,.opt-label{
  display:block;
  font-family:'Tajawal',sans-serif;
  font-size:.82rem;
  color:var(--ink-mute);margin-bottom:6px;font-weight:700;
}
.input{
  width:100%;padding:14px 16px;
  background:var(--surface);
  border:1.5px solid var(--line);border-radius:14px;
  color:var(--ink);font-family:'Tajawal',sans-serif;font-size:1rem;font-weight:600;
  outline:none;transition:border-color .2s;direction:rtl;
  /* Generous line-height so Arabic diacritics (hamza on أ, the dots above ت
     and ن, etc.) aren't clipped by the input's intrinsic overflow:clip. */
  line-height:1.6;
}
.input:focus{border-color:var(--signal)}
.input::placeholder{color:#a8a0b8}

.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:15px 20px;
  border:none;border-radius:14px;cursor:pointer;
  font-family:'Tajawal',sans-serif;font-size:1.02rem;font-weight:800;
  transition:transform .15s, box-shadow .25s, background .2s;
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:linear-gradient(135deg,var(--signal),var(--signal-2));color:#fff;
  box-shadow:0 8px 22px rgba(255,61,90,.30);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(255,61,90,.40)}
.btn-secondary-strong{
  background:var(--surface);color:var(--ink);
  border:1.5px solid var(--line);
  box-shadow:0 4px 12px rgba(26,15,10,.05);
}
.btn-secondary-strong:hover{border-color:var(--signal);color:var(--signal)}
.btn-link{
  display:inline-block;background:none;border:none;cursor:pointer;
  font-family:'Tajawal',sans-serif;font-size:.88rem;font-weight:700;
  color:var(--ink-mute);text-decoration:none;
  padding:10px;margin-top:4px;
  transition:color .2s;
}
.btn-link:hover{color:var(--signal)}
.btn-link.danger{color:#b73a32}
.btn-link.danger:hover{color:var(--danger)}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--ink-mute);text-decoration:none}
.brand .dot{color:var(--signal)}
.brand:hover{color:var(--ink)}
.page-title{font-size:1.4rem;font-weight:900}
.spacer-sm{width:38px;height:38px}

.card{
  background:var(--surface);
  border:1px solid var(--line);border-radius:16px;
  padding:18px;margin-bottom:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -16px rgba(26,15,10,.15);
}
.card-title{font-size:1rem;font-weight:900;color:var(--ink);margin-bottom:14px}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;margin-bottom:8px}
.toggle-label{font-size:.95rem;font-weight:700;color:var(--danger)}
.toggle-label.is-public{color:var(--success)}
.toggle-switch{
  width:48px;height:26px;border-radius:13px;
  background:rgba(212,66,58,.85);
  cursor:pointer;position:relative;transition:background .25s;
}
.toggle-switch.active{background:var(--success)}
.toggle-switch::after{
  content:'';position:absolute;width:22px;height:22px;border-radius:50%;
  background:#fff;top:2px;left:2px;transition:transform .25s;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.toggle-switch.active::after{transform:translateX(22px)}

.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;margin-bottom:8px;flex-wrap:wrap}
.levels{display:flex;gap:6px}
.lvl{
  padding:6px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-dim);
  font-family:'Tajawal',sans-serif;font-size:.85rem;font-weight:800;
  cursor:pointer;transition:all .2s;
}
.lvl:hover{border-color:var(--line-strong);color:var(--ink)}
.lvl.active{
  background:linear-gradient(135deg,var(--signal),var(--signal-2));color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(255,61,90,.30);
}

.code-boxes{display:flex;gap:10px;justify-content:center;margin:10px 0 14px}
.code-box{
  width:54px;height:62px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;
  text-align:center;font-family:'Tajawal',sans-serif;font-size:1.6rem;font-weight:900;
  color:var(--ink);text-transform:uppercase;outline:none;
  transition:border-color .2s;
}
.code-box:focus{border-color:var(--signal)}

.rooms-divider{
  text-align:center;margin:14px 0 10px;
  font-family:'Tajawal',sans-serif;font-size:.82rem;
  color:var(--ink-mute);font-weight:700;
}
.rooms-list{display:flex;flex-direction:column;gap:8px}
.room-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
}
.room-item-info{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.room-item-code{font-weight:800;font-size:.95rem;letter-spacing:3px;font-family:monospace;color:var(--signal)}
.room-item-meta{font-size:.78rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-item .btn-mini{
  background:linear-gradient(135deg,var(--signal),var(--signal-2));color:#fff;
  border:none;padding:8px 18px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:.85rem;font-weight:800;
}
.no-rooms{text-align:center;padding:18px;color:var(--ink-mute);font-size:.88rem;font-weight:600}

.room-code-card{text-align:center;margin-bottom:18px}
.rc-label{font-family:'Tajawal',sans-serif;font-size:.85rem;color:var(--ink-mute);margin-bottom:8px;font-weight:700}
.rc-boxes{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.rc-box{
  width:54px;height:64px;
  background:linear-gradient(135deg,var(--signal),var(--signal-2));color:#fff;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-family:monospace;font-size:1.8rem;font-weight:900;
  box-shadow:0 6px 16px rgba(255,61,90,.30);
}
.rc-badges{display:flex;gap:8px;justify-content:center;margin-top:6px}
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:.7rem;font-weight:800;
  background:rgba(26,15,10,.07);color:var(--ink-dim);
}
.badge.public{background:rgba(25,193,98,.15);color:#0E6443}
.badge.private{background:rgba(212,66,58,.12);color:#9c2e26}

/* ── SVG icon system ─────────────────────────────────
   Icons are SVGs used as CSS masks so the visual color comes from
   `background-color`. Set size via --icon-size on the element. */
.icon{
  display:inline-block;
  width:var(--icon-size,1em);height:var(--icon-size,1em);
  background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  flex:none;vertical-align:middle;
}
.icon-sound-on  { -webkit-mask-image:url('../assets/icons/sound-on.svg');  mask-image:url('../assets/icons/sound-on.svg');  }
.icon-sound-off { -webkit-mask-image:url('../assets/icons/sound-off.svg'); mask-image:url('../assets/icons/sound-off.svg'); }
.icon-undo      { -webkit-mask-image:url('../assets/icons/undo.svg');      mask-image:url('../assets/icons/undo.svg');      }
.icon-lock      { -webkit-mask-image:url('../assets/icons/lock.svg');      mask-image:url('../assets/icons/lock.svg');      }
.icon-globe     { -webkit-mask-image:url('../assets/icons/globe.svg');     mask-image:url('../assets/icons/globe.svg');     }
.icon-medal     { -webkit-mask-image:url('../assets/icons/medal.svg');     mask-image:url('../assets/icons/medal.svg');     }
.icon-check     { -webkit-mask-image:url('../assets/icons/check.svg');     mask-image:url('../assets/icons/check.svg');     }
/* Inline X-mark SVG for "decline" — paired with .icon-check for vote buttons */
.icon-x{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' fill-rule='evenodd' d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 0 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' fill-rule='evenodd' d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 0 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414z'/></svg>");
}
/* Color tokens for icons in specific contexts */
.icon.is-success{color:#19C162}
.icon.is-danger{color:#FF3D5A}
.icon.is-ink{color:var(--ink)}
.icon.is-gold{color:#D4A017}
/* Topbar mute/undo buttons — icons sized to 60% of button */
.icon-btn .icon{--icon-size:60%}
.copy-btn{
  background:var(--surface);color:var(--ink-mute);
  border:1px solid var(--line);padding:7px 18px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:700;margin-top:6px;
  transition:all .2s;
}
.copy-btn:hover{border-color:var(--signal);color:var(--signal)}

.players-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.players-list li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
}
.players-list .avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-weight:800;font-size:.85rem;flex-shrink:0;
}
.av-1{background:linear-gradient(135deg,#E91E63,#FF7A00)}
.av-2{background:linear-gradient(135deg,#FF7A00,#FFD600)}
.av-3{background:linear-gradient(135deg,#FFD600,#19C162)}
.av-4{background:linear-gradient(135deg,#19C162,#10B5C7)}
.av-5{background:linear-gradient(135deg,#10B5C7,#2962FF)}
.av-6{background:linear-gradient(135deg,#2962FF,#7C3AED)}
.av-7{background:linear-gradient(135deg,#7C3AED,#E91E63)}
.av-8{background:linear-gradient(135deg,#FF3D5A,#FFC700)}
.players-list .pname{flex:1;font-weight:700;font-size:.92rem;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players-list .host-badge{
  font-size:.75rem;font-weight:800;
  padding:3px 10px;border-radius:999px;
  background:rgba(255,138,61,.15);color:#a8531e;
}
.players-list .you-tag{
  font-size:.7rem;font-weight:700;color:var(--ink-mute);padding:0 4px;
}
.players-list .kick{
  background:rgba(212,66,58,.10);color:var(--danger);
  border:none;width:26px;height:26px;border-radius:50%;cursor:pointer;
  font-size:.8rem;font-weight:800;
}
.players-list .kick:hover{background:var(--danger);color:#fff}

.waiting-msg{text-align:center;color:var(--ink-mute);padding:14px 0;font-size:.95rem;font-weight:600}
.dots{display:inline-flex;gap:4px;margin-right:8px}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:bounce 1.4s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}

.hud{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:16px;
  padding:11px 16px;margin-bottom:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -16px rgba(26,15,10,.18);
}
.hud-item{display:flex;flex-direction:column;line-height:1.05;flex:1;min-width:0}
.hud-label{font-family:'Tajawal',sans-serif;font-size:.78rem;color:var(--ink-mute);margin-bottom:3px;font-weight:700}
.hud-val{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .25s ease}
.hud-val.pulse{animation:pulse-num .28s ease}
@keyframes pulse-num{0%{transform:scale(1);color:var(--ink)}50%{transform:scale(1.25);color:var(--signal)}100%{transform:scale(1);color:var(--ink)}}
.icon-btn{
  width:36px;height:36px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-dim);
  cursor:pointer;font-size:1.05rem;line-height:1;
  display:grid;place-items:center;
  transition:background .2s,border-color .2s,color .2s,transform .12s,box-shadow .2s;
  font-family:inherit;
}
.icon-btn:hover{background:#fff;border-color:rgba(255,61,90,.4);color:var(--signal);box-shadow:0 4px 12px rgba(255,61,90,.18)}
.icon-btn:active{transform:scale(.93)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

/* Minimal opponents row — no chips, just compact text lines */
.opponents{
  display:flex;flex-direction:column;gap:4px;
  padding:6px 4px 12px;
  max-height:96px;overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.opponents::-webkit-scrollbar{display:none}
.opp{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 10px;
  font-size:.88rem;font-weight:700;color:var(--ink-dim);
  white-space:nowrap;
}
.opp .opp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.opp .opp-progress{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  color:var(--ink-mute);font-variant-numeric:tabular-nums;
}
.opp.done{color:var(--success)}
.opp.done .opp-progress{color:var(--success)}
.opp.done .opp-progress::after{content:' ✓';font-weight:900}
/* Round indicator in HUD */
.round-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,61,90,.10),rgba(255,138,61,.10));
  border:1px solid rgba(255,61,90,.25);
  font-family:'Tajawal',sans-serif;font-size:.82rem;font-weight:800;color:var(--signal);
}
.round-pill .num{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}

.board{
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
  gap:22px 8px;align-content:start;justify-items:center;
  padding:18px 4px 10px;
  overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.board::-webkit-scrollbar{display:none}

.tube{
  --tube-w:62px;--tube-h:220px;
  position:relative;
  width:var(--tube-w);height:var(--tube-h);
  cursor:pointer;display:block;
  transition:transform .32s cubic-bezier(.4,1.4,.5,1), filter .25s ease;
}
.tube-svg{
  width:100%;height:100%;display:block;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.5))
    drop-shadow(0 8px 14px rgba(26,15,10,.12))
    drop-shadow(0 2px 4px rgba(26,15,10,.08));
}
.tube.selected{transform:translateY(-22px) rotate(-2.5deg);z-index:5}
.tube.selected .tube-svg{filter:drop-shadow(0 14px 18px rgba(255,61,90,.32)) drop-shadow(0 6px 8px rgba(0,0,0,.15))}
.tube.locked{cursor:default;opacity:.75}

.tube.pouring{z-index:20;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.tube.pouring.tilt-left{transform-origin:18% 90%;transform:translate(-28px,-22px) rotate(-46deg)}
.tube.pouring.tilt-right{transform-origin:82% 90%;transform:translate(28px,-22px) rotate(46deg)}
.tube.pouring .tube-svg{filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
.tube-svg .liquid{transition:y .28s cubic-bezier(.4,1.2,.5,1), height .28s cubic-bezier(.4,1.2,.5,1)}
.tube-svg .meniscus, .tube-svg .meniscus-shadow{transition:cy .28s cubic-bezier(.4,1.2,.5,1), opacity .2s ease}

.tube.shake{animation:tube-shake .35s}
@keyframes tube-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px) rotate(-1deg)}
  40%{transform:translateX(5px) rotate(1deg)}
  60%{transform:translateX(-4px) rotate(-1deg)}
  80%{transform:translateX(3px) rotate(.5deg)}
}

.lid-svg{
  position:absolute;top:-2px;left:0;right:0;
  width:100%;height:24px;
  pointer-events:none;opacity:0;
  transform:translateY(-40px) scale(.9);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.30));
  transition:none;z-index:3;
}
.tube.completed .lid-svg{animation:lid-drop .55s cubic-bezier(.3,1.6,.5,1) .15s forwards}
.tube.has-lid .lid-svg{opacity:1;transform:translateY(0) scale(1);animation:none}
@keyframes lid-drop{
  0%{opacity:0;transform:translateY(-40px) scale(.9)}
  50%{opacity:1;transform:translateY(2px) scale(1.03)}
  75%{transform:translateY(-1px) scale(1)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.tube.completed:not(.has-lid)::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle, var(--glow-color, #FFC700) 0%, transparent 65%);
  opacity:0;pointer-events:none;z-index:-1;
  animation:tube-glow .9s ease-out;filter:blur(2px);
}
@keyframes tube-glow{
  0%{opacity:0;transform:scale(.55)}
  35%{opacity:.85;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.45)}
}
.tube.completed:not(.has-lid){animation:tube-celebrate .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes tube-celebrate{
  0%{transform:translateY(0)}
  35%{transform:translateY(-12px)}
  60%{transform:translateY(3px)}
  100%{transform:translateY(0)}
}
.tube.has-lid{cursor:default}

.status-bar{
  text-align:center;font-size:.85rem;color:var(--ink-mute);
  padding:14px 10px 4px;line-height:1.7;font-weight:600;
}

.trophy{font-size:4rem;line-height:1;margin-bottom:10px;filter:drop-shadow(0 6px 12px rgba(255,138,61,.35))}
.winner-name{font-size:2.2rem;font-weight:900;letter-spacing:-.01em;
  background-image:linear-gradient(135deg,var(--signal),var(--signal-2) 55%,var(--signal-3));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:4px;
}
.winner-label{font-size:.9rem;color:var(--ink-mute);font-weight:700;margin-bottom:20px}
.rankings{
  width:100%;display:flex;flex-direction:column;gap:8px;
  margin-bottom:20px;
}
.rank-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  animation:rank-in .4s cubic-bezier(.3,1.4,.5,1) both;
}
.rank-item.me{border-color:rgba(255,61,90,.40);background:linear-gradient(135deg,rgba(255,61,90,.06),rgba(255,138,61,.06))}
@keyframes rank-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.rank-num{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.9rem;
  background:rgba(26,15,10,.06);color:var(--ink-dim);
  flex-shrink:0;
}
.rank-item:nth-child(1) .rank-num{background:linear-gradient(135deg,gold,orange);color:#333}
.rank-item:nth-child(2) .rank-num{background:linear-gradient(135deg,silver,#a0a0a0);color:#333}
.rank-item:nth-child(3) .rank-num{background:linear-gradient(135deg,#cd7f32,sienna);color:#fff}
.rank-name{flex:1;font-weight:800;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-time{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink-dim);font-variant-numeric:tabular-nums;font-size:.92rem}
.rank-time.dnf{color:var(--danger);font-size:.78rem;font-weight:800;letter-spacing:.06em}

#toast-container{position:fixed;top:14px;left:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:12px;
  font-size:.85rem;font-weight:700;text-align:center;
  animation:toast-in .25s ease-out, toast-out .3s ease-in 2.4s forwards;
  box-shadow:0 8px 24px rgba(0,0,0,.30);
  max-width:340px;
}
.toast.success{background:linear-gradient(135deg,#19C162,#0E8843)}
.toast.warning{background:linear-gradient(135deg,var(--signal-2),var(--signal))}
.toast.error{background:linear-gradient(135deg,var(--danger),#8e2622)}
@keyframes toast-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-12px)}}

.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.confetti-container i{
  position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;
  animation:confetti-fall 2.6s cubic-bezier(.2,.6,.3,1) forwards;will-change:transform,opacity;
}
@keyframes confetti-fall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:.85}
}

@media(max-width:380px){
  .tube{--tube-w:48px;--tube-h:180px}
  .board{gap:14px 4px;grid-template-columns:repeat(auto-fit,minmax(50px,1fr));padding:10px 2px 6px}
  .page-title{font-size:1.1rem}
  .hud-val{font-size:.95rem}
  .hud-label{font-size:.68rem}
  .title{font-size:3rem}
  .hud{padding:8px 10px;gap:6px}
  .round-pill{padding:5px 9px;font-size:.74rem}
  .icon-btn{width:32px;height:32px;font-size:.95rem}
  .screen{padding:10px 10px 18px}
  .opponents{max-height:60px;padding:4px 2px 6px}
  .opp{font-size:.78rem;padding:2px 6px}
  .status-bar{padding:8px 8px 2px;font-size:.78rem}
}
@media(max-height:680px){
  .tube{--tube-h:170px}
  .opponents{max-height:48px}
  .board{padding:8px 2px 4px;gap:12px 4px}
}
@media(min-width:760px){
  .tube{--tube-w:74px;--tube-h:260px}
  .board{gap:26px 12px;grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
}

::selection{background:rgba(255,61,90,.22);color:var(--ink)}

/* ── Connection status dot ───────────────────────── */
.page-title{display:inline-flex;align-items:center;gap:8px}
.conn-status{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--success);box-shadow:0 0 0 0 rgba(25,193,98,.5);
  transition:background .2s, box-shadow .2s;
}
.conn-status.online{background:var(--success);animation:conn-pulse 2.6s ease-in-out infinite}
.conn-status.reconnecting{background:#FFB400;animation:conn-pulse-fast 1s ease-in-out infinite}
.conn-status.offline{background:var(--danger)}
@keyframes conn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(25,193,98,.5)}50%{box-shadow:0 0 0 6px rgba(25,193,98,0)}}
@keyframes conn-pulse-fast{0%,100%{box-shadow:0 0 0 0 rgba(255,180,0,.6)}50%{box-shadow:0 0 0 6px rgba(255,180,0,0)}}

/* ── Start button disabled-look (still clickable to show toast) ── */
.btn.disabled-look,
.btn:disabled{
  opacity:.55;cursor:not-allowed;
  background:linear-gradient(135deg,#cbcbcb,#a0a0a0);
  box-shadow:none;
}
.btn.disabled-look:hover,
.btn:disabled:hover{transform:none;box-shadow:none}

/* ── Round-complete splash (between rounds) ──────── */
.round-splash{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;
  background:rgba(26,15,10,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.round-splash.show{display:flex;opacity:1}
.rs-card{
  background:#fff;border-radius:22px;padding:26px 36px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.30);
  animation:rs-pop .55s cubic-bezier(.3,1.5,.5,1);
  max-width:88%;
}
@keyframes rs-pop{0%{opacity:0;transform:scale(.6) translateY(20px)}60%{opacity:1;transform:scale(1.06) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.rs-check{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--success),#0E8843);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;font-weight:900;margin:0 auto 12px;
  box-shadow:0 8px 20px rgba(25,193,98,.40);
}
.rs-title{font-size:1.5rem;font-weight:900;color:var(--ink);margin-bottom:6px}
.rs-sub{font-size:.95rem;font-weight:700;color:var(--ink-mute)}
.rs-num{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  color:var(--signal);font-size:1.15rem;
}

/* ── 3-2-1-GO countdown ──────────────────────────── */
.start-countdown{
  position:fixed;inset:0;z-index:130;display:none;
  align-items:center;justify-content:center;
  background:rgba(26,15,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.start-countdown.show{display:flex;opacity:1}
.sc-num{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:8rem;
  color:#fff;line-height:1;
  background-image:linear-gradient(135deg,var(--signal),var(--signal-2) 55%,var(--signal-3));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:sc-pop .8s ease;
  text-shadow:0 8px 22px rgba(255,61,90,.5);
}
.sc-num.sc-go{font-size:6rem}
@keyframes sc-pop{
  0%{opacity:0;transform:scale(.4)}
  50%{opacity:1;transform:scale(1.18)}
  100%{opacity:.95;transform:scale(1)}
}