:root{--night:#0d0f1c;--panel:#171a2e;--line:#2b3050;--ink:#f1e9d6;--mute:#9b97ad;--gold:#f2c14e;--hp:#e2524f;--xp:#5fc3ff;--key:#8be0a0;--ui:"Press Start 2P",monospace;--ko:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font-family:var(--ko);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}#app{max-width:430px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}#game{width:100%;aspect-ratio:9/10;background:#1b2a1f;position:relative}#game canvas{display:block;width:100%!important;height:100%!important;image-rendering:pixelated}#ui{display:flex;flex-direction:column;gap:6px;padding:6px 8px 10px}.hud{display:flex;justify-content:space-between;gap:6px;font-family:var(--ui);font-size:8px;color:var(--mute);font-variant-numeric:tabular-nums;padding:6px 8px;background:var(--panel);border-bottom:2px solid var(--line)}.hud b{color:var(--ink);font-weight:400}.hud .gold{color:var(--gold)}.bars{display:grid;gap:4px}.bar{display:grid;grid-template-columns:44px 1fr 72px;align-items:center;gap:6px;font-family:var(--ui);font-size:7px;color:var(--mute)}.track{height:8px;background:var(--night);border:1px solid var(--line);position:relative}.fill{position:absolute;inset:0;width:0%}.fill.hp{background:var(--hp)}.fill.xp{background:var(--xp)}.fill.gate{background:var(--gold)}.bar .v{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}.party{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.card{background:var(--night);border:1px solid var(--line);padding:6px;display:grid;gap:4px;font-size:11px;color:var(--mute)}.card b{color:var(--ink);font-weight:700}.card .lv{font-family:var(--ui);font-size:7px;color:var(--key)}.card button{font-size:7px;padding:7px 4px}.card.locked{opacity:.45}.dlg{min-height:64px;background:var(--night);border:2px solid var(--line);padding:8px 10px;display:grid;gap:3px;cursor:pointer;position:relative}.dlg .who{font-family:var(--ui);font-size:7px;color:var(--key)}.dlg p{margin:0;font-size:13px}.dlg .tap{position:absolute;right:8px;bottom:3px;font-size:10px;color:var(--mute)}.dlg.idle{opacity:.7;cursor:default}.actions{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:6px}button{font-family:var(--ui);font-size:7px;padding:10px 4px;background:var(--line);color:var(--ink);border:0;cursor:pointer;line-height:1.5}button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button[disabled]{opacity:.45;cursor:default}button.skill{background:#3b2f55}button.skill.ready{background:#5a3f8a}button.primary{background:#7a5a1a;color:#fff}.modal{position:fixed;inset:0;background:#0d0f1ce6;display:grid;place-items:center;padding:16px;z-index:20}.modal .box{background:var(--panel);border:3px solid var(--line);padding:14px;width:min(400px,100%);display:grid;gap:10px;max-height:90vh;overflow:auto}.modal h2{font-family:var(--ui);font-size:9px;color:var(--gold);margin:0;font-weight:400}.modal p{margin:0;font-size:13px}.modal .num{font-family:var(--ui);font-size:12px;color:var(--gold)}.modal table{width:100%;border-collapse:collapse;font-size:12px}.modal td{padding:3px 4px;border-bottom:1px solid var(--line)}.modal td.lv{font-family:var(--ui);font-size:8px;text-align:right}.modal tr.me td{color:var(--gold)}.grid28{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.grid28 div{aspect-ratio:1;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--ui);font-size:7px;color:var(--mute)}.grid28 div.done{background:#2b3a2e;color:var(--key)}.grid28 div.today{border-color:var(--gold);color:var(--gold)}.grid28 div.hi{border-style:double}.toast{position:fixed;left:50%;top:38%;transform:translate(-50%);font-family:var(--ui);font-size:20px;color:var(--gold);text-shadow:0 2px 0 #000;z-index:30;pointer-events:none;animation:toast .9s ease-out forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-20px)}}.note{font-size:10px;color:var(--mute);text-align:center}textarea{width:100%;min-height:70px;background:var(--night);color:var(--ink);border:1px solid var(--line);font-size:11px}@media(prefers-reduced-motion:reduce){.toast{animation:none}}