/* ===== 기본 ===== */
:root{
  --bg:#10162b;
  --bg2:#1b2547;
  --ink:#f3f6ff;
  --dim:#9fb0d8;
  --line:rgba(255,255,255,.14);
  --go:#ffd23f;
  --go-ink:#3a2a00;
  --hot:#ff4d6d;
  --cool:#4cc9f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Gothic A1',-apple-system,'Malgun Gothic',sans-serif;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}
button{font-family:inherit; cursor:pointer; border:0}
[hidden]{display:none !important}

.screen{
  position:fixed; inset:0;
  display:none; flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.is-on{display:flex}

/* ===== 1. 고르기 ===== */
#screen-pick{
  align-items:center; justify-content:flex-start;
  overflow-y:auto;
  background:
    radial-gradient(1100px 600px at 50% -10%, #2b3a72 0%, transparent 60%),
    var(--bg);
}
.top{text-align:center; padding:clamp(22px,4vh,52px) 20px 8px}
h1{
  font-family:'Jua',sans-serif; font-weight:400;
  font-size:clamp(30px,5.4vw,58px); margin:0;
  letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff,#ffd23f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{margin:8px 0 0; color:var(--dim); font-size:clamp(13px,1.6vw,17px)}
.sub b{color:var(--go)}

.load-state{display:flex; flex-direction:column; align-items:center; gap:16px; padding:12vh 20px; color:var(--dim)}
.spinner{
  width:40px; height:40px; border-radius:50%;
  border:4px solid rgba(255,255,255,.15); border-top-color:var(--go);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.pick-body{width:min(940px,100%); padding:14px 20px 40px; display:flex; flex-direction:column; gap:18px}
.pick-block h2{
  margin:0 0 10px; font-size:13px; font-weight:700;
  color:var(--dim); letter-spacing:.16em;
}
.chip-row{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  flex:1 1 96px; min-height:60px;
  border-radius:14px; background:var(--bg2);
  border:2px solid var(--line); color:var(--ink);
  font-size:clamp(16px,2vw,20px); font-weight:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:transform .12s, border-color .12s, background .12s;
}
.chip small{font-size:11px; font-weight:500; color:var(--dim)}
.chip:hover{border-color:rgba(255,210,63,.5)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--go); color:var(--go-ink); border-color:var(--go)}
.chip.on small{color:rgba(58,42,0,.7)}
.chip:disabled{opacity:.3; pointer-events:none}

.roster-box{background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.roster-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; font-weight:700}
.count{color:var(--go)}
.roster-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px;
  max-height:31vh; overflow-y:auto;
}
.roster-list li{
  font-size:14px; color:var(--dim); padding:5px 8px;
  background:rgba(255,255,255,.05); border-radius:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.roster-list li b{color:var(--ink); font-weight:700}
.roster-list li i{font-style:normal; opacity:.55; margin-right:5px; font-size:12px}

.btn-go{
  width:100%; min-height:68px; border-radius:18px;
  background:linear-gradient(180deg,#ffe17a,#ffc61a);
  color:var(--go-ink); font-family:'Jua',sans-serif;
  font-size:clamp(21px,3vw,29px);
  box-shadow:0 8px 0 #c79400, 0 14px 26px rgba(0,0,0,.4);
  transition:transform .1s, box-shadow .1s;
}
.btn-go:active{transform:translateY(6px); box-shadow:0 2px 0 #c79400}
.btn-go:disabled{filter:grayscale(.75) brightness(.65); box-shadow:none; pointer-events:none}
.btn-sub{
  min-height:52px; padding:0 26px; border-radius:14px;
  background:rgba(255,255,255,.1); color:var(--ink);
  border:1px solid var(--line); font-size:16px; font-weight:700;
}
.btn-snd{
  align-self:center; min-height:42px; padding:0 20px; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--dim);
  border:1px solid var(--line); font-size:14px; font-weight:700;
}
.btn-snd.off{color:var(--hot); border-color:rgba(255,77,109,.4)}

.fetch-note{margin:0; text-align:center; color:var(--dim); font-size:12.5px; line-height:1.6}
.fetch-note b{color:var(--cool)}
#fetched-at{display:block; opacity:.6; font-size:11.5px}

.load-error{text-align:center; padding:10vh 24px; display:flex; flex-direction:column; gap:16px; align-items:center}
.load-error p{color:var(--hot); margin:0; font-size:15px; line-height:1.7; word-break:break-all}

/* ===== 2. 레이스 ===== */
#screen-race{background:#0c1124}
#stage{position:absolute; inset:0; width:100%; height:100%; display:block}

.hud{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,20,.82),transparent);
}
.hud-left{display:flex; align-items:baseline; gap:10px}
.hud-class{font-size:clamp(14px,1.8vw,19px); font-weight:700; color:var(--dim)}
.hud-alive{font-family:'Jua',sans-serif; font-size:clamp(30px,5vw,52px); color:var(--go); line-height:1}
.hud-unit{font-size:clamp(12px,1.4vw,15px); color:var(--dim)}
.hud-right{display:flex; align-items:center; gap:12px; pointer-events:auto}
.hud-lap{font-size:13px; font-weight:700; color:var(--cool); letter-spacing:.06em}
.btn-quit{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:17px;
}

.kill-feed{
  position:absolute; right:14px; top:88px;
  display:flex; flex-direction:column; gap:5px; align-items:flex-end;
  pointer-events:none;
}
.kill-feed div{
  background:rgba(255,77,109,.9); color:#fff;
  padding:5px 12px; border-radius:8px;
  font-size:clamp(12px,1.5vw,15px); font-weight:700;
  animation:killIn .3s ease-out, killOut .5s ease-in 2.4s forwards;
}
@keyframes killIn{from{opacity:0; transform:translateX(30px)}}
@keyframes killOut{to{opacity:0; transform:translateX(30px)}}

.stage-banner{
  position:absolute; left:0; right:0; top:34%;
  text-align:center; pointer-events:none;
  font-family:'Jua',sans-serif; font-size:clamp(30px,7vw,76px);
  color:#fff; text-shadow:0 0 30px rgba(255,77,109,.9), 0 6px 0 rgba(0,0,0,.35);
  opacity:0;
}
.stage-banner.show{animation:bannerPop 1.7s ease-out}
@keyframes bannerPop{
  0%{opacity:0; transform:scale(.5)}
  18%{opacity:1; transform:scale(1.06)}
  28%{transform:scale(1)}
  76%{opacity:1}
  100%{opacity:0; transform:scale(1.12)}
}

.countdown{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,20,.55); pointer-events:none;
}
.countdown span{
  font-family:'Jua',sans-serif; font-size:clamp(80px,22vw,240px); color:var(--go);
  text-shadow:0 0 60px rgba(255,210,63,.6);
  animation:cdPop .85s ease-out;
}
@keyframes cdPop{0%{transform:scale(2.4); opacity:0}26%{transform:scale(1); opacity:1}100%{transform:scale(.94); opacity:1}}

/* ===== 3. 당첨 ===== */
#screen-win{
  align-items:center; justify-content:center;
  background:radial-gradient(800px 600px at 50% 40%, #342f6b 0%, #0c1124 70%);
}
#confetti{position:absolute; inset:0; width:100%; height:100%}
.win-card{position:relative; text-align:center; padding:24px; animation:winIn .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes winIn{from{opacity:0; transform:scale(.6) translateY(30px)}}
.win-label{
  margin:0; font-size:13px; font-weight:900; letter-spacing:.5em;
  color:var(--go); padding-left:.5em;
}
.win-meta{margin:14px 0 2px; color:var(--dim); font-size:clamp(15px,2.2vw,22px); font-weight:700}
.win-name{
  margin:0; font-family:'Jua',sans-serif;
  font-size:clamp(58px,15vw,170px); line-height:1.05;
  background:linear-gradient(180deg,#fff 30%,#ffd23f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 30px rgba(255,210,63,.35));
}
.win-sub{margin:10px 0 0; color:var(--dim); font-size:14px}
.win-actions{display:flex; gap:12px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.win-actions .btn-go{width:auto; padding:0 40px; min-height:62px}