:root{--ink:#f6eadb;--ink-dim:#c9b49a;--glass:#18100a8c;--line:#ffdcb429;--ember:#ffb46a;color:var(--ink);background:#0b0806;font-family:Pretendard,Apple SD Gothic Neo,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}canvas{touch-action:none;display:block}button{font:inherit;color:inherit;cursor:pointer}.enter{background:radial-gradient(1200px 700px at 50% 70%,#3a2214 0%,#120b07 55%,#070504 100%);place-items:center;display:grid;position:fixed;inset:0}.enter-card{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:22px;width:min(560px,92vw);padding:36px 34px 28px;box-shadow:0 30px 80px #00000080}.eyebrow{letter-spacing:.14em;color:var(--ember);margin:0 0 6px;font-size:12px}.enter-card h1{letter-spacing:-.01em;margin:0 0 10px;font-size:26px;font-weight:700}.lede{color:var(--ink-dim);margin:0 0 22px;font-size:14px;line-height:1.6}.enter-maps{grid-template-columns:1fr 1fr;gap:12px;display:grid}.map-btn{text-align:left;border:1px solid var(--line);background:#ffffff08;border-radius:14px;gap:6px;padding:16px;transition:border-color .2s,background .2s,transform .2s;display:grid}.map-btn:hover{border-color:var(--ember);background:#ffb46a14;transform:translateY(-2px)}.map-btn.on{border-color:#ffb46a80}.map-btn strong{font-size:16px}.map-btn span{color:var(--ink-dim);font-size:12.5px}.keys{color:#9c8a74;margin:18px 0 0;font-size:12px;line-height:1.6}.hud{pointer-events:none;justify-content:space-between;display:flex;position:fixed;top:14px;left:14px;right:14px}.hud>*{pointer-events:auto;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:8px 14px;font-size:13px;transition:border-color .2s}.chip:hover,.chip.on{border-color:var(--ember)}.chip.on{color:var(--ember)}.veil{opacity:0;pointer-events:none;background:#000;transition:opacity .6s;position:fixed;inset:0}.veil.on{opacity:1}.loading{pointer-events:none;opacity:0;background:radial-gradient(900px 600px at 50% 65%,#2c190e 0%,#100a06 60%,#070504 100%);place-items:center;transition:opacity .5s;display:grid;position:fixed;inset:0}.loading.on{opacity:1;pointer-events:auto;transition-delay:.25s}.loading-card{text-align:center;justify-items:center;gap:10px;display:grid}.loading-card strong{letter-spacing:-.01em;font-size:18px}.loading-card p{color:var(--ink-dim);margin:0;font-size:13px}.loading-ember{background:radial-gradient(circle at 50% 60%,#ffd27a 0%,#ff9a4a 35%,#ff783200 70%);border-radius:50%;width:46px;height:46px;margin-bottom:6px;animation:1.6s ease-in-out infinite ember}@keyframes ember{0%,to{opacity:.75;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}.loading-bar{background:#ffffff14;border-radius:3px;width:160px;height:3px;margin-top:4px;overflow:hidden}.loading-bar i{transform-origin:0;background:linear-gradient(90deg,#ffb46a,#ff6a3d);height:100%;transition:transform .4s;display:block}@media (prefers-reduced-motion:reduce){.loading-ember{animation:none}}.hud,.hud-bottom,.hints{transition:opacity .8s}.hud.idle,.hud-bottom.idle{opacity:0}.hud.idle:hover,.hud-bottom.idle:hover{opacity:1}.chip.small{padding:5px 11px;font-size:12px}.chip.ghost{background:0 0}.panel{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:16px;width:250px;padding:14px 16px;position:fixed;top:60px;right:14px}.mixer .row{grid-template-columns:70px 1fr;align-items:center;gap:10px;padding:5px 0;font-size:13px;display:grid}.mixer input[type=range]{width:100%;accent-color:var(--ember)}.divider{background:var(--line);height:1px;margin:6px 0}.hud-bottom{align-items:center;gap:10px;display:flex;position:fixed;bottom:14px;left:14px}.timer,.gauge{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:10px;padding:8px 10px 8px 14px;font-size:13px;display:flex}.timer-phase{color:var(--ink-dim)}.timer.focus .timer-phase{color:var(--ember)}.timer.break .timer-phase{color:#9fd4a8}.timer-clock{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:16px;font-weight:600}.timer-count{color:var(--ink-dim);padding-right:4px;font-size:12px}.gauge{padding-right:16px}.gauge .dim{color:var(--ink-dim);font-size:12px}.gauge-bar{background:#ffffff1a;border-radius:4px;width:64px;height:4px;overflow:hidden}.gauge-bar i{transform-origin:0;background:linear-gradient(90deg,#ffb46a,#ff6a3d);height:100%;transition:transform 1.5s;display:block}.hints{pointer-events:none;gap:8px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.hint{pointer-events:auto;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:6px 12px;font-size:12.5px}.hint:hover{border-color:var(--ember)}@media (width<=640px){.enter-maps{grid-template-columns:1fr}.hud-bottom{flex-wrap:wrap;bottom:8px;left:8px;right:8px}.hints{bottom:64px}}.chip,.timer,.gauge{white-space:nowrap}@media (width<=640px){.hud{flex-wrap:wrap;gap:6px;top:8px;left:8px;right:8px}.hud>*{flex-wrap:wrap;gap:6px}.chip{padding:6px 10px;font-size:12px}.panel{top:92px;right:8px}.hints{top:92px;bottom:auto}}.dock{flex-direction:column;gap:8px;transition:opacity .8s;display:flex;position:fixed;top:50%;right:14px;transform:translateY(-50%)}.dock.idle{opacity:0}.dock.idle:hover{opacity:1}.dock-btn{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;border-radius:14px;align-items:center;gap:8px;padding:8px 12px 8px 9px;font-size:12.5px;transition:border-color .2s,transform .2s;display:flex}.dock-btn:hover{border-color:var(--ember);transform:translate(-3px)}.dock-btn.on{border-color:var(--ember);color:var(--ember)}.dock-icon{font-size:16px;line-height:1}@media (width<=640px){.dock{top:auto;bottom:64px;right:8px;transform:none}.dock-label{display:none}.dock-btn{padding:8px}}.speech{color:#3a2a1c;white-space:nowrap;background:#fffaf2;border-radius:16px;padding:8px 14px;font-size:14px;font-weight:700;animation:.35s cubic-bezier(.2,1.6,.4,1) both pop;position:relative;box-shadow:0 6px 18px #00000040}.speech:after{content:"";border:8px solid #0000;border-top-color:#fffaf2;border-bottom:0;position:absolute;bottom:-7px;left:50%;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
