:root{--bg:#0b0713;--panel:#171026;--panel2:#221836;--line:#3a2a58;--fg:#f3ecff;--mut:#b2a3cf;--gold:#ffd36b;--red:#e5484d;--green:#46d37a;--accent:#c1272d;--r:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 system-ui,-apple-system,"Segoe UI","Noto Sans KR","Noto Sans JP","Noto Sans SC",Roboto,sans-serif}
a{color:var(--gold)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--fg);text-decoration:none}.brand img{width:36px;height:36px;border-radius:8px;image-rendering:pixelated}
.hero{position:relative;min-height:78vh;display:flex;align-items:center;background:linear-gradient(90deg,rgba(11,7,19,.92) 0%,rgba(11,7,19,.55) 55%,rgba(11,7,19,.15) 100%),url(/img/hero.jpg) center/cover;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(2rem,6vw,3.8rem);line-height:1.1;margin:0 0 16px;text-shadow:0 3px 0 #000}
.hero p{max-width:34em;color:#e6dcf7;font-size:1.15rem;margin:0 0 28px}
.eyebrow{color:var(--gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:12px;border:2px solid #ff8a8f;background:var(--accent);color:#fff;font:800 1.1rem inherit;text-decoration:none;box-shadow:0 5px 0 #6c1015;cursor:pointer}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #6c1015}
.langs{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.langs a{display:block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--mut);text-decoration:none;font-size:.85rem}.langs a[aria-current]{background:var(--panel2);color:var(--gold);border-color:var(--gold)}
section{padding:56px 0}h2{font-size:1.7rem;margin:0 0 24px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}.card h3{margin:0 0 8px;color:var(--gold)}.card p{margin:0;color:var(--mut)}
details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:10px}summary{cursor:pointer;font-weight:700}details p{color:var(--mut);margin:10px 0 0}
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--mut);font-size:.92rem}footer nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.doc{max-width:760px;margin:0 auto;padding:32px 16px 64px}.doc h1{margin-top:0}.doc p{color:#e0d6f2}
.picker{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}.picker .langs{justify-content:center;max-width:620px;margin:20px auto}.picker .langs a{padding:10px 18px;font-size:1rem}
/* game */
body.game{overflow:hidden;height:100dvh;display:flex;flex-direction:column;touch-action:none;user-select:none}
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:6px 10px;background:linear-gradient(#2a1a44,#171026);border-bottom:2px solid #5b3d8f;font-weight:700;font-size:.95rem}
.hud .res{display:flex;align-items:center;gap:5px;white-space:nowrap}.hud .res b{color:var(--gold)}
.hud .sp{flex:1}
.hp{width:140px;height:12px;border:2px solid #000;border-radius:6px;background:#2a0a0c;overflow:hidden}.hp>i{display:block;height:100%;width:100%;background:linear-gradient(#ff6a6f,#c1272d)}
.stage-box{position:relative;flex:1;min-height:0;background:#05030a;overflow:hidden}
#stage{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;aspect-ratio:44/30;image-rendering:pixelated;cursor:crosshair;touch-action:none;border:2px solid #000}
.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;background:linear-gradient(#171026,#0e0a18);border-top:2px solid #5b3d8f}
.tb{min-width:64px;min-height:56px;padding:4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--panel2);color:var(--fg);border:2px solid #5b3d8f;border-radius:12px;font:600 .72rem inherit;cursor:pointer}
.tb img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}.tb[aria-pressed=true]{border-color:var(--gold);background:#3a2658;box-shadow:0 0 0 2px #ffd36b55}
.tb.sm{min-height:44px;min-width:52px;flex-direction:row;gap:6px;font-size:.8rem}
.log{position:absolute;left:8px;top:8px;max-width:min(360px,60vw);font-size:.8rem;color:#e6dcf7;text-shadow:0 1px 2px #000;pointer-events:none}
.toast{z-index:30;position:absolute;top:8px;left:50%;transform:translate(-50%,-8px);background:#000c;border:2px solid var(--gold);padding:10px 18px;border-radius:12px;opacity:0;transition:.25s;pointer-events:none;font-weight:700;text-align:center;max-width:90%}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.danger{border-color:var(--red);color:#ffb3b6}
#hint{position:absolute;left:8px;bottom:8px;max-width:min(420px,70vw);font-size:.78rem;color:var(--mut);text-shadow:0 1px 2px #000;pointer-events:none}
.end{position:absolute;inset:0;background:#000c;display:grid;place-items:center;text-align:center;padding:24px;z-index:5}.end[hidden],#loading[hidden]{display:none}.end p{font-size:1.4rem;font-weight:800;margin:0 0 20px}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);z-index:9;font-weight:800}
@media (max-width:640px){.hud{font-size:.8rem}.hp{width:90px}.tb{min-width:54px;min-height:50px;font-size:.62rem}.tb img{width:22px;height:22px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:640px){.log{display:none}#hint{display:none}}
/* overlays / panels */
.ov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:12px;background:radial-gradient(circle at 50% 40%,rgba(20,10,40,.55),rgba(3,1,8,.8));backdrop-filter:blur(3px);overflow:auto}
.ov[hidden]{display:none}
.panel{width:min(420px,100%);background:linear-gradient(#241638,#150d24);border:2px solid #5b3d8f;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px #000a;max-height:100%;overflow:auto}
.panel.wide{width:min(560px,100%)}.panel h2{margin:0 0 4px;text-align:center;color:var(--gold);font-size:1.35rem;text-shadow:0 2px 0 #000}.panel h3{margin:8px 0 0;color:var(--mut);font-size:.95rem}
.panel .btn{width:100%;min-height:48px;font-size:1rem;background:#3a2658;border-color:#7b57b8;box-shadow:0 4px 0 #1b1030;padding:0 16px;text-align:center}
.panel .btn.primary{background:var(--accent);border-color:#ff8a8f;box-shadow:0 4px 0 #6c1015}.panel .btn.sm{min-height:42px;font-size:.88rem}.panel .btn:disabled{opacity:.45;cursor:not-allowed}.panel .btn.perk{justify-content:flex-start;text-align:left}
.panel .row{display:flex;gap:8px}.panel .row .btn{flex:1}.panel .sub{margin:0;text-align:center;color:var(--mut);font-size:.88rem}.panel .big{margin:0;text-align:center;font-size:1.2rem;font-weight:800}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.chip{background:#0007;border:1px solid #5b3d8f;border-radius:999px;padding:3px 12px;font-weight:700;font-size:.85rem}.chip.hot{border-color:#ff9f43;color:#ffb86b}
.cards{display:grid;gap:10px}.card-btn{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;gap:0 12px;text-align:left;padding:12px 14px;background:#3a2658;color:var(--fg);border:2px solid #7b57b8;border-radius:14px;cursor:pointer;font:inherit}
.card-btn:hover,.card-btn:focus-visible{border-color:var(--gold);background:#4a3170}.card-btn .ic{grid-row:1/3;font-size:2rem;text-align:center}.card-btn .fx{color:var(--gold);font-weight:700;font-size:.9rem}.card-btn small{grid-column:2;color:var(--mut);letter-spacing:.1em}
.runs{list-style:none;margin:0;padding:0;font-size:.88rem;color:var(--mut)}.runs li{padding:4px 0;border-bottom:1px solid #3a2a58}.runs li.done{color:var(--fg)}
@media (min-width:760px){.panel.pickwide{width:min(720px,100%)}.pickwide .cards{grid-template-columns:repeat(3,1fr)}.pickwide .card-btn{grid-template-columns:1fr;text-align:center;justify-items:center;gap:6px;padding:18px 10px}.pickwide .card-btn .ic{grid-row:auto}.pickwide .card-btn small{grid-column:1}}