/* JJ — tokens (GAME_DESIGN 9-2) + UI shell */
:root{
  --bg0:#05070F;--bg1:#0B1020;--glass:rgba(24,33,58,.72);--ember:#FF8A3D;--emberHi:#FFD0A8;--azure:#3D9BFF;--azureHi:#BFE2FF;
  --slack:#E8EEF7;--taut:#4FE3D1;--strain:#FF4FD8;--resonance:#FFD84F;--hazard:#FF3B5C;--ok:#58F2A5;
  --text:#E6ECF8;--muted:#8A96B8;--font-d:'Orbitron','Noto Sans KR',sans-serif;--font-b:'Noto Sans KR','Orbitron',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg0);color:var(--text);font-family:var(--font-b);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#gl{position:fixed;inset:0;display:block;z-index:0}
#game{position:fixed;inset:0;display:block;touch-action:none;z-index:1;background:transparent}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;animation:fadeIn .25s ease;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:rgba(5,7,15,.35)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.panel{width:min(92vw,560px);max-height:94vh;overflow:auto;background:var(--glass);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:24px 22px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.panel.small{width:min(90vw,340px)} .panel.wide{width:min(96vw,820px)}
.panel h2{font-family:var(--font-d);font-weight:700;letter-spacing:.3em;font-size:1.05rem;color:var(--muted)}
.btn{font-family:var(--font-d);font-weight:700;letter-spacing:.12em;cursor:pointer;border:0;color:var(--text);padding:13px 28px;border-radius:999px;font-size:.9rem;transition:transform .12s,filter .2s,opacity .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;touch-action:manipulation}
.btn:active{transform:scale(.96)} .btn:disabled{opacity:.35;cursor:default}
.btn-primary{background:linear-gradient(135deg,var(--ember),#b85cff 55%,var(--azure));box-shadow:0 10px 30px rgba(61,155,255,.35),0 0 0 1px rgba(255,255,255,.12) inset;color:#fff}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)} .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn.small{padding:8px 14px;font-size:.7rem} .btn.home{color:var(--taut);border-color:rgba(79,227,209,.35)}
.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 10px 30px rgba(61,155,255,.35)}50%{box-shadow:0 10px 44px rgba(255,138,61,.6)}}
.row{display:flex;gap:10px;align-items:center;justify-content:center} .row.wrap{flex-wrap:wrap}
.ember{color:var(--ember)} .azure{color:var(--azure)}

/* title */
.title-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:20px}
.logo{font-family:var(--font-d);font-weight:900;font-size:clamp(4rem,16vw,8rem);line-height:1;letter-spacing:-.02em;display:flex;gap:.05em}
.logo .l1{color:var(--ember);text-shadow:0 0 40px rgba(255,138,61,.6)} .logo .l2{color:var(--azure);text-shadow:0 0 40px rgba(61,155,255,.6)}
.tagline{color:var(--muted);letter-spacing:.14em;font-size:.85rem}
.forms{display:flex;gap:14px;font-family:var(--font-d);font-size:.75rem;letter-spacing:.14em} .forms .rope{color:var(--taut)}
.title-sub{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:.72rem;letter-spacing:.1em}

/* lobby */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.mode-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .2s,background .2s}
.mode-card b{font-family:var(--font-d);letter-spacing:.18em;font-size:.85rem} .mode-card span{font-size:.8rem} .mode-card small{color:var(--muted);font-size:.68rem}
.mode-card.on{border-color:var(--taut);background:rgba(79,227,209,.08)} .mode-card.locked{opacity:.55;cursor:not-allowed}
.mode-card input{margin-top:6px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text);padding:6px;text-align:center;letter-spacing:.3em;font-family:var(--font-d);width:100%}
.slots{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;width:100%;align-items:stretch}
.slot{border:1px dashed rgba(255,255,255,.18);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:84px;justify-content:center;transition:all .2s}
.slot.filled{border-style:solid} .slot.ember.filled{border-color:var(--ember);box-shadow:0 0 30px rgba(255,138,61,.2) inset} .slot.azure.filled{border-color:var(--azure);box-shadow:0 0 30px rgba(61,155,255,.2) inset}
.slot-name{font-family:var(--font-d);letter-spacing:.16em;font-size:.78rem} .slot.ember .slot-name{color:var(--ember)} .slot.azure .slot-name{color:var(--azure)}
.slot-dev{font-size:.85rem;color:var(--muted)} .slot.filled .slot-dev{color:var(--text)}
.slot-mid{display:flex;flex-direction:column;gap:8px;justify-content:center}
.keytest{font-size:.72rem;color:var(--muted);min-height:1.2em;letter-spacing:.04em}
.field{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.field input[type=text],.field input[type=number],.field select{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--text);padding:6px 8px;font-family:var(--font-b);font-size:.8rem;width:9em}
.field input[type=number]{width:4.5em}
.field input[type=range]{width:7em;accent-color:#3D9BFF}
.keys{font-size:.72rem;color:var(--muted);display:flex;flex-direction:column;gap:3px;line-height:1.5}

/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;z-index:5;padding:calc(10px + env(safe-area-inset-top)) 14px 0}
.hud-top{display:grid;grid-template-columns:1fr minmax(200px,420px) 1fr;align-items:start;gap:12px}
.hud-p{font-family:var(--font-d);font-size:.72rem;letter-spacing:.16em;padding:4px 0;opacity:.85} .hud-p.azure{text-align:right}
.hud-p.active{text-decoration:underline;text-underline-offset:4px;opacity:1}
.hud-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.tension{position:relative;width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:visible}
.tension-fill{height:100%;width:0;border-radius:2px;transition:width .05s linear}
.tension .tick{position:absolute;top:-4px;width:1px;height:12px;background:rgba(255,255,255,.35)} .tick.t1{left:46.15%} .tick.t2{left:76.9%}
.hud-sub{font-size:.68rem;color:var(--muted);letter-spacing:.08em}
.hud-corner{position:absolute;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;pointer-events:auto}
.hud-modetag{font-size:.62rem;letter-spacing:.2em;color:var(--muted);font-family:var(--font-d)}
.toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:rgba(11,16,32,.9);border:1px solid rgba(255,255,255,.12);padding:10px 18px;border-radius:999px;font-size:.8rem;z-index:30}

/* result */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.res-grid div{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.04);border-radius:12px;padding:10px}
.res-grid small{font-size:.62rem;letter-spacing:.2em;color:var(--muted);font-family:var(--font-d)} .res-grid b{font-family:var(--font-d);font-size:1.1rem}
.contribs{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.contrib{display:flex;flex-direction:column;gap:3px;font-size:.78rem;background:rgba(255,255,255,.04);border-radius:12px;padding:10px;text-align:left}
.contrib b{font-family:var(--font-d);letter-spacing:.16em;font-size:.75rem} .contrib.ember b{color:var(--ember)} .contrib.azure b{color:var(--azure)}

@media (max-width:640px){ .modes{grid-template-columns:1fr} .slots{grid-template-columns:1fr} .slot-mid{flex-direction:row} .res-grid{grid-template-columns:repeat(2,1fr)} .hud-top{grid-template-columns:1fr 2fr 1fr} }

/* stage select */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tab{font-family:var(--font-d);font-size:.72rem;letter-spacing:.14em;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}
.tab.on{border-color:var(--taut);color:var(--taut)} .tab.locked{opacity:.4}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.stage{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .2s,background .2s}
.stage:hover{border-color:var(--azure);background:rgba(61,155,255,.08)}
.stage.locked{opacity:.35;cursor:not-allowed} .stage.cleared{border-color:rgba(88,242,165,.35)}
.stage-no{font-family:var(--font-d);font-size:.68rem;letter-spacing:.2em;color:var(--muted)} .stage-name{font-weight:700;font-size:.95rem}
.stage-verbs{font-size:.7rem;color:var(--muted)} .stage-stars{color:var(--resonance);letter-spacing:.1em} .stage-stars .dim{color:rgba(255,255,255,.15)}
.stage-best{font-size:.68rem;color:var(--muted);font-family:var(--font-d);letter-spacing:.06em}
.stars{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:1.6rem;letter-spacing:.15em} .stars .on{color:var(--resonance);text-shadow:0 0 18px rgba(255,216,79,.6)} .stars .dim{color:rgba(255,255,255,.15)} .stars small{font-size:.62rem;color:var(--muted);letter-spacing:.08em}
@media (max-width:640px){ .stages{grid-template-columns:repeat(2,1fr)} }

/* daily / random */
.modes.gen{grid-template-columns:1fr 1.4fr;margin-bottom:4px}
.mode-card.static{cursor:default}
.mode-card .row{gap:6px;flex-wrap:wrap;margin-top:4px}
.mode-card select,.mode-card input[type=text]{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--text);padding:6px 8px;font-family:var(--font-b);font-size:.8rem}
.mode-card input[type=text]{width:7em;text-align:center;letter-spacing:.2em;font-family:var(--font-d);text-transform:uppercase}
#card-daily{cursor:pointer} #card-daily:hover{border-color:var(--resonance)}
@media (max-width:640px){ .modes.gen{grid-template-columns:1fr} }

/* 1.0.0: 접근성·모드·PHOTO·리플레이 */
.hud-cap{position:absolute;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));text-align:center;font-size:.9rem;color:#E6ECF7;text-shadow:0 1px 6px rgba(0,0,0,.8);letter-spacing:.04em;pointer-events:none;transition:opacity .2s}
body.hud-big .hud-p{font-size:1rem} body.hud-big .hud-sub{font-size:.95rem} body.hud-big .hud-cap{font-size:1.25rem} body.hud-big .tension{height:10px}
.photo-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:var(--glass);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px 12px;font-size:.78rem;color:var(--muted);z-index:12}
.keymap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:flex-start;padding:10px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;width:100%}
.km-col{display:flex;flex-direction:column;gap:6px;min-width:150px} .km-col b{font-family:var(--font-d);font-size:.72rem;letter-spacing:.12em;margin-bottom:4px}
.btn.km{justify-content:flex-start;text-align:left;font-size:.74rem} .btn.km.waiting{border-color:#FFD84F;color:#FFD84F}
.modes-row{justify-content:center;font-size:.76rem} .mode-tags{font-family:var(--font-d);font-size:.66rem;letter-spacing:.12em;color:#FFD84F}
.stage-best .hc{color:#FF4FD8;font-size:.68rem} .stage-best i{color:#FFD84F;font-style:normal;font-weight:700}
.res-tags{font-family:var(--font-d);font-size:.68rem;letter-spacing:.14em;color:#FFD84F;min-height:1em}
.a11y{font-size:.76rem}

/* 1.1.0: 온라인 */
.online-status{font-size:.74rem;color:#FFD84F;min-height:1.2em;letter-spacing:.04em}
.mode-card input#online-code{width:6em;text-align:center;letter-spacing:.3em;font-family:var(--font-d);font-weight:700;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);border-radius:8px;color:var(--text);padding:6px 8px;margin-top:6px}
.field.tiny{font-size:.68rem;margin-top:4px} .field.tiny input{width:3.6em}

/* 1.2.0: SYNC 게이지 */
.sync{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:3px}
.sync-fill{height:100%;width:0;background:linear-gradient(90deg,#4FE3D1,#FFD84F);transition:width .15s}
.sync-fill.res{background:#FFD84F;box-shadow:0 0 10px #FFD84F;animation:resPulse .6s ease-in-out infinite alternate}
@keyframes resPulse{from{opacity:.7}to{opacity:1}}
.contrib .mvp{color:#FFD84F;font-weight:700}
.res-grid{grid-template-columns:repeat(3,1fr)}

/* 1.3.0: DAILY 리더보드 */
.board{width:100%;margin-top:8px;text-align:left;font-size:.72rem;display:flex;flex-direction:column;gap:3px}
.bhead{font-family:var(--font-d);font-size:.62rem;letter-spacing:.14em;color:#FFD84F;margin-bottom:2px}
.brow{display:grid;grid-template-columns:1.4em 1fr auto;gap:6px;align-items:baseline;color:var(--text)} .brow b{color:#FFD84F;font-family:var(--font-d)} .brow i{font-style:normal;font-family:var(--font-d);font-size:.7rem} .brow small{grid-column:2/4;color:var(--muted);font-size:.62rem}

/* 1.4.0: 통계·스킨·LDtk */
.res-grid.stats{grid-template-columns:repeat(3,1fr);text-align:left} .res-grid.stats b{font-size:.95rem}
label.btn input[type=file]{display:none}