:root{--me:#ff9a2e;--me2:#ffd9a3;--foe:#36d0ff;--foe2:#bdf2ff;--hit:#ff4d5e;--ok:#73e3a2;--mute:#8b94ab;--line:#26314f;--panel:rgba(10,14,26,.78);--ink:#ebe8df}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#05070c;color:var(--ink);font-family:'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;overflow:hidden;user-select:none}
#app{position:fixed;inset:0}
#stage{position:absolute;inset:0}
.stage3d{display:block;touch-action:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:800;font-size:16px;padding:13px 22px;border:1px solid var(--line);background:#172038;color:var(--ink)}
.btn.pri{background:linear-gradient(180deg,var(--me2),var(--me));color:#1b1204;border:0;box-shadow:0 8px 30px rgba(255,154,46,.3)}
.btn:disabled{opacity:.4;cursor:default}
.card{background:var(--panel);border:1px solid rgba(120,140,190,.22);border-radius:14px;backdrop-filter:blur(8px)}
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);background:#121a31;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:700}
.seg button.on{background:var(--me);color:#000;border-color:var(--me)}

/* 로비 */
#lobby{position:absolute;inset:0;display:flex;align-items:safe center;overflow-y:auto;padding:32px 7vw;background:linear-gradient(90deg,rgba(5,7,12,.95) 0%,rgba(5,7,12,.75) 42%,rgba(5,7,12,0) 70%);z-index:20}
#lobby .inner{max-width:540px}
.home{position:absolute;left:22px;top:18px;color:var(--mute);font-weight:700;font-size:13px;letter-spacing:.08em;text-decoration:none;z-index:30}
.kicker{font-weight:700;font-size:13px;letter-spacing:.4em;color:var(--mute)}
.logo{font:900 clamp(56px,9vw,96px)/.95 'Segoe UI Black','Segoe UI',sans-serif;margin:12px 0 0}
.logo b{color:var(--me)}
.lead{font-size:18px;line-height:1.6;color:#c9cfdd;margin:18px 0 28px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.opt{display:flex;gap:12px;align-items:center;margin:10px 0;font-size:13px;font-weight:700;color:var(--mute)}
.opt>span{min-width:76px}
.howto{margin-top:18px;font-size:13px;color:#aab2c5;line-height:1.7}
.howto summary{cursor:pointer;font-weight:800;color:var(--ink)}
.howto ul{padding-left:18px;margin:8px 0}

.inp{background:#0e1426;border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:9px 12px;font:inherit;font-size:15px;min-width:200px}
.joinhead{font-size:18px;font-weight:800;color:var(--me2);margin:4px 0 10px}
.roompanel{padding:14px 16px;margin-top:12px;display:flex;flex-direction:column;gap:10px;max-width:520px}
.linkrow{display:flex;gap:8px}.linkrow .inp{flex:1;min-width:0;font-size:13px}
.rstat{font-size:14px;font-weight:700;color:var(--ok)}
.lmsg{min-height:20px;font-size:14px;font-weight:700;color:var(--hit)}
.netmsg{font-size:12px;font-weight:800;color:var(--hit)}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10}
#hud>*{pointer-events:auto}
.pbar{position:absolute;top:14px;width:min(380px,40vw);padding:10px 14px}
.pbar.a{left:14px}.pbar.b{right:14px;text-align:right}
.pbar .nm{font-weight:800;font-size:15px;display:flex;justify-content:space-between;gap:8px}
.pbar.b .nm{flex-direction:row-reverse}
.hp{display:flex;gap:3px;margin-top:8px}.pbar.b .hp{justify-content:flex-end}
.hp span{flex:1;max-width:24px;height:10px;border-radius:2px;transform:skewX(-18deg);background:#26314f;transition:background .2s}
.en{display:flex;gap:3px;margin-top:6px}.pbar.b .en{justify-content:flex-end}
.en span{width:10px;height:14px;border-radius:2px;transform:skewX(-14deg);background:#26314f}
.wins{font-size:14px;letter-spacing:2px}
#center{position:absolute;left:50%;top:10px;transform:translateX(-50%);text-align:center;pointer-events:none}
#center .lbl{font-weight:800;font-size:12px;letter-spacing:.3em;color:var(--mute);white-space:nowrap}
#timer{font:900 40px 'Segoe UI',sans-serif;text-shadow:0 0 18px rgba(255,154,46,.5)}
#oppstate{font-size:12px;font-weight:700;color:var(--ok)}
#warn{font-size:12px;font-weight:800;color:var(--hit);margin-top:2px}
#gear{position:absolute;right:14px;top:96px;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:18px}
#mute{position:absolute;right:62px;top:96px;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:16px}
#quit{position:absolute;left:14px;top:96px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:13px;font-weight:700;padding:0 12px}
#qpanel{position:absolute;right:14px;top:142px;padding:12px}

/* 계획 패널 */
#plan{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:14px;align-items:center;padding:12px 14px;max-width:calc(100vw - 20px)}
.slots,.acts{display:flex;gap:8px}
.slot{width:96px;height:84px;border-radius:12px;border:1px solid var(--line);background:rgba(23,32,56,.85);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:800;font-size:13px}
.slot .n{position:absolute;left:8px;top:5px;font-size:11px;color:var(--mute)}
.slot .ic{font-size:22px}
.slot.f{border-color:var(--me);background:linear-gradient(180deg,rgba(255,154,46,.22),rgba(255,154,46,.05))}
.slot.cur{border-style:dashed;border-color:var(--me2)}
.act{width:74px;height:70px;border-radius:12px;border:1px solid var(--line);background:#121a31;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;font-size:12px;position:relative}
.act .ic{font-size:20px}
.act .c{position:absolute;right:6px;top:3px;font-size:11px;font-weight:900;color:var(--me)}
.act .k{position:absolute;left:6px;top:3px;font-size:10px;color:var(--mute)}
.act.sel{border-color:var(--me2);box-shadow:0 0 0 1px var(--me2) inset}
.act:disabled{opacity:.3}
.sep{width:1px;align-self:stretch;background:var(--line)}
.side{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.enlbl{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--mute)}
#hint{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--me2);background:rgba(0,0,0,.55);padding:6px 12px;border-radius:8px;pointer-events:none;white-space:nowrap}

#coach{position:absolute;left:50%;bottom:178px;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));padding:16px 18px;display:flex;flex-direction:column;gap:8px;border-color:rgba(255,154,46,.55);box-shadow:0 0 30px rgba(255,154,46,.18)}
#coach .ct{font-weight:900;font-size:17px;color:var(--me2)}
#coach .cb{font-size:14px;line-height:1.65;color:#d5dae6}
#coach .btn{align-self:flex-end;padding:8px 18px;font-size:14px}
@media (max-width:820px){#coach{bottom:auto;top:120px}}
/* 실행 */
.bar{position:absolute;left:0;right:0;height:9vh;background:#000;transition:transform .4s;pointer-events:none}
#barT{top:0;transform:translateY(-100%)}#barB{bottom:0;transform:translateY(100%)}
.exec #barT,.exec #barB{transform:none}
#timeline{position:absolute;left:50%;bottom:1.2vh;transform:translateX(-50%);display:grid;grid-template-columns:44px repeat(3,118px);gap:4px 6px;align-items:center;font-weight:800;font-size:12px}
#timeline div{padding:4px;border-radius:6px;text-align:center;border:1px solid var(--line);opacity:.45}
#timeline div.now{opacity:1}
#timeline .m.now{background:var(--me);color:#000;border-color:var(--me)}
#timeline .o.now{background:var(--foe);color:#000;border-color:var(--foe)}
#banner{position:absolute;left:0;right:0;top:30%;text-align:center;pointer-events:none}
#banner .big{font:900 clamp(48px,8vw,88px) 'Segoe UI Black','Segoe UI',sans-serif;letter-spacing:.05em;color:#fff;text-shadow:0 0 26px rgba(255,154,46,.85),0 0 60px rgba(255,120,30,.45)}
#banner .sub{font-weight:700;font-size:17px;color:var(--me2);margin-top:6px}
#banner.foe .big{text-shadow:0 0 26px rgba(54,208,255,.85),0 0 60px rgba(54,208,255,.4)}
#banner.foe .sub{color:var(--foe2)}
.dmg{position:absolute;font:900 34px 'Segoe UI Black','Segoe UI',sans-serif;color:var(--hit);text-shadow:0 2px 0 #000,0 0 14px rgba(255,77,94,.6);pointer-events:none;animation:dmg 1.1s ease-out forwards;white-space:nowrap}
.dmg small{display:block;font-size:14px;color:#fff;letter-spacing:.1em}
@keyframes dmg{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{transform:translate(-50%,-10px) scale(1.15);opacity:1}100%{transform:translate(-50%,-60px) scale(1);opacity:0}}

/* 결과 */
#result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,7,12,.72);backdrop-filter:blur(4px);z-index:15;text-align:center;padding:20px}
#result .big{font:900 clamp(60px,11vw,120px)/1 'Segoe UI Black','Segoe UI',sans-serif}
#result .stats{display:flex;gap:14px;margin:26px 0;flex-wrap:wrap;justify-content:center}
#result .stats .card{min-width:180px;padding:16px}
#result .stats b{display:block;font-size:40px}
#result .stats span{color:var(--mute);font-size:12px;font-weight:800;letter-spacing:.2em}

@media (max-width:820px){
  .pbar{width:calc(50vw - 20px);padding:8px 10px}.pbar .nm{font-size:13px}
  #center{top:74px}#timer{font-size:30px}
  #gear,#quit,#mute{top:auto;bottom:212px}
  #plan{flex-wrap:wrap;justify-content:center;gap:8px;bottom:8px;padding:8px}
  .sep{display:none}
  .slot{width:78px;height:62px}.act{width:52px;height:56px;font-size:10px}.act .ic{font-size:17px}.act .k{display:none}
  #hint{bottom:178px;font-size:12px}
  #lobby{padding:0 18px;background:linear-gradient(180deg,rgba(5,7,12,.6),rgba(5,7,12,.95))}
  #timeline{grid-template-columns:36px repeat(3,84px);font-size:11px}
}