:root{
  --ink:#12101c;
  --cream:#f3ece1;
  --panel:#1c1830;
  --panel-2:#241f3d;
  --gold:#e8b84b;
  --gold-2:#ffd166;
  --terracotta:#c1502e;
  --danger:#e2574c;
  --good:#5ecb85;
  --line:rgba(243,236,225,0.14);
  --text-dim:rgba(243,236,225,0.65);
  --text-faint:rgba(243,236,225,0.45);
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--ink); color:var(--cream);
  font-family:'Work Sans', sans-serif;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.display{ font-family:'Fredoka', sans-serif; }
.mono{ font-family:'JetBrains Mono', monospace; }

#app{ position:relative; width:100%; height:100%; }
.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  padding:24px;
  overflow-y:auto;
}
.hidden{ display:none !important; }

/* ---------- HOME ---------- */
#screen-home{
  background: radial-gradient(ellipse at 50% 0%, #3a2f63 0%, #1c1830 55%, #12101c 100%);
  user-select:none;
}
.back-link{
  position:absolute; top:16px; left:18px;
  font-size:13px; font-weight:600; color:var(--text-dim);
  text-decoration:none; padding:4px 2px;
}
.back-link:hover{ color:var(--gold-2); }
.crane-mark{ width:100px; height:100px; margin-bottom:4px; }
.title-block{ text-align:center; max-width:420px; }
.title-block h1{ font-size:2.2rem; font-weight:700; margin:6px 0 4px; letter-spacing:0.2px; }
.title-block p{ margin:0 0 22px; opacity:0.72; font-size:0.92rem; line-height:1.5; }

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; width:100%; max-width:380px;
}
.home-panel{ text-align:left; }

.field{ width:100%; margin-bottom:14px; text-align:left; }
.field label{ display:block; font-size:0.78rem; opacity:0.65; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.06em; }
.field input{
  width:100%; padding:12px 13px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel-2);
  color:var(--cream); font-size:1rem; font-family:'Work Sans',sans-serif;
  outline:none;
}
.field input:focus{ border-color:var(--gold); }
.field input.code-input{ text-transform:uppercase; letter-spacing:4px; font-family:'JetBrains Mono',monospace; text-align:center; font-size:1.15rem; }

button{
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:0.96rem;
  border:none; border-radius:10px; padding:13px 18px; cursor:pointer;
  transition:transform .12s ease, filter .12s ease, border-color .12s ease;
  touch-action:manipulation;
}
button:active{ transform:scale(0.97); }
.btn-primary{ background:var(--gold-2); color:#241a05; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-secondary{ background:transparent; color:var(--cream); border:1px solid var(--line); }
.btn-secondary:hover{ border-color:var(--cream); }
.btn-full{ width:100%; }
button:disabled{ opacity:0.4; cursor:not-allowed; }

.tabs{
  display:flex; background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; padding:3px; gap:3px; margin-bottom:16px;
}
.tab-btn{
  flex:1; padding:9px 0; border:0; border-radius:8px; background:transparent;
  color:var(--text-dim); font-size:13px; font-weight:700; cursor:pointer;
}
.tab-btn.active{ background:var(--panel); color:var(--cream); box-shadow:inset 0 0 0 1px var(--line); }

.eyebrow{
  font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-faint); margin:0 0 8px;
}
.mode-choice{ display:flex; gap:8px; margin-bottom:6px; }
.mode-choice label{
  flex:1; border:1px solid var(--line); border-radius:10px; padding:10px;
  cursor:pointer; font-size:0.85rem; text-align:center; color:var(--text-dim);
  background:var(--panel-2); transition:all .12s ease;
}
.mode-choice input{ display:none; }
.mode-choice input:checked + span{ font-weight:700; color:var(--cream); }
.mode-choice label:has(input:checked){ border-color:var(--gold); background:var(--panel); }

.solo-link{
  background:transparent; border:0; color:var(--text-faint); font-size:12.5px;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  padding:4px; margin-top:16px;
}
.solo-link:hover{ color:var(--text-dim); }
.solo-panel{ margin-top:14px; text-align:left; }

.error-msg{ color:var(--danger); font-size:0.85rem; margin-top:8px; min-height:18px; }
.small-note{ font-size:0.78rem; opacity:0.6; margin:8px 0; text-align:center; }

.player-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.player-list li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel-2); padding:10px 12px; border-radius:9px; font-size:0.9rem;
}
.player-list .join-room-btn{ flex-shrink:0; padding:6px 12px; font-size:12px; background:var(--gold); color:#241a05; }
.link-btn{
  background:none; border:none; color:var(--text-dim); text-decoration:underline;
  text-underline-offset:2px; padding:4px; font-weight:600; font-size:0.85rem;
}
.link-btn:hover{ color:var(--gold-2); }

/* ---------- LOBBY ---------- */
#screen-lobby{ background:radial-gradient(ellipse at 50% 0%, #3a2f63 0%, #1c1830 55%, #12101c 100%); }
.lobby-card{ width:100%; max-width:380px; background:var(--panel); border-radius:16px; padding:26px; border:1px solid var(--line); }
.code-display{ text-align:center; margin-bottom:18px; }
.code-display .code{ font-family:'JetBrains Mono',monospace; font-size:2.4rem; letter-spacing:8px; color:var(--gold-2); font-weight:700; }
.code-display .hint{ font-size:0.78rem; opacity:0.6; margin-top:4px; }
#inviteLinkInput{ min-width:0; flex:1; font-size:12px; }
.player-row{ display:flex; align-items:center; gap:10px; background:var(--panel-2); padding:10px 12px; border-radius:9px; }
.player-dot{ width:9px; height:9px; border-radius:50%; background:var(--gold-2); flex-shrink:0; }
.player-row.eliminated .player-dot{ background:var(--text-faint); }
.player-row .pname{ flex:1; font-size:0.95rem; }
.player-row .host-tag{ font-size:0.7rem; opacity:0.55; }
.waiting-note{ text-align:center; font-size:0.85rem; opacity:0.65; margin-top:6px; }

/* ---------- GAME SCREEN ---------- */
#screen-game{ padding:0; align-items:stretch; justify-content:stretch; overflow:hidden; }
#gameCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.hud-top{
  position:absolute; top:0; left:0; right:0; padding:16px 18px;
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none; z-index:5;
}
.height-readout{ font-family:'JetBrains Mono',monospace; }
.height-readout .num{ font-size:2rem; font-weight:700; color:var(--gold-2); text-shadow:0 2px 10px rgba(0,0,0,0.4); line-height:1; }
.height-readout .lbl{ font-size:0.68rem; opacity:0.6; letter-spacing:0.5px; margin-top:2px; }
.height-readout .timer-lbl{ margin-top:6px; font-size:0.9rem; opacity:1; color:var(--gold-2); font-weight:700; }
.stability-bar{
  margin-top:8px; width:90px; height:7px; border-radius:4px;
  background:rgba(243,236,225,0.15); overflow:hidden;
}
.stability-fill{
  height:100%; width:100%; border-radius:4px; background:var(--good);
  transition:width .2s ease, background-color .2s ease;
}
.combo-badge{
  position:absolute; top:70px; left:50%; transform:translateX(-50%);
  font-family:'Fredoka',sans-serif; font-weight:700; color:var(--gold-2);
  font-size:1.1rem; opacity:0; pointer-events:none; z-index:6;
  text-shadow:0 2px 8px rgba(0,0,0,0.5); transition:opacity .2s ease;
}
.quit-btn{
  position:absolute; top:14px; right:14px; z-index:6;
  width:36px; height:36px; padding:0; border-radius:50%;
  background:rgba(28,24,48,0.7); color:var(--cream); font-size:1.3rem;
  line-height:1; display:flex; align-items:center; justify-content:center;
}
.quit-btn:hover{ background:rgba(28,24,48,0.9); }
.leaderboard{
  background:rgba(28,24,48,0.82); backdrop-filter:blur(6px);
  border-radius:12px; padding:10px 12px; min-width:150px;
  border:1px solid var(--line); pointer-events:none;
}
.leaderboard .lb-title{ font-size:0.68rem; opacity:0.55; margin-bottom:6px; letter-spacing:0.4px; }
.lb-row{ display:flex; align-items:center; gap:6px; font-size:0.82rem; padding:2px 0; }
.lb-row .lb-icon{ width:14px; text-align:center; flex-shrink:0; }
.lb-row .lb-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px; }
.lb-row .lb-h{ font-family:'JetBrains Mono',monospace; opacity:0.8; }
.lb-row.eliminated{ opacity:0.4; text-decoration:line-through; }
.lb-row.winner{ color:var(--gold-2); }

.countdown-overlay, .end-overlay, .spectate-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; background:rgba(10,8,20,0.72); z-index:10; text-align:center; padding:24px;
}
.countdown-num{ font-family:'Fredoka',sans-serif; font-size:5rem; font-weight:700; color:var(--gold-2); }
.countdown-sub{ opacity:0.7; margin-top:8px; }

.end-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px; max-width:360px; width:100%; }
.end-card h2{ margin:0 0 4px; font-size:1.6rem; }
.end-card .end-sub{ opacity:0.7; font-size:0.9rem; margin-bottom:20px; }
.end-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.end-row:last-child{ border-bottom:none; }
.end-row .rank{ opacity:0.5; margin-right:8px; }
.end-row.winner-row{ color:var(--gold-2); font-weight:700; }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

@media (max-width: 420px){
  .crane-mark{ width:80px; height:80px; }
  .title-block h1{ font-size:1.8rem; }
  .panel{ padding:18px; }
  .end-card{ padding:22px; }
}