:root{--ink: #f6ecdf;--ink-dim: #c3b3a3;--panel: rgba(24, 18, 26, .62);--panel-edge: rgba(255, 214, 224, .16);--accent: #ff9ec4;--accent-2: #ffd27a;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b0d16;color:var(--ink);font-family:system-ui,Segoe UI,Inter,sans-serif}#app{position:fixed;inset:0}canvas{display:block}#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 20%,#2a2140,#120f1c 60%,#090a12);transition:opacity .9s ease,visibility .9s}#loader.done{opacity:0;visibility:hidden}.loader-inner{text-align:center;width:min(420px,80vw)}.loader-petal{font-size:44px;color:var(--accent);animation:spinpetal 3.4s linear infinite;text-shadow:0 0 26px rgba(255,158,196,.55)}@keyframes spinpetal{to{transform:rotate(360deg)}}.loader-title{margin-top:14px;font-size:21px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}.loader-sub{margin-top:8px;font-size:12px;color:var(--ink-dim);font-family:var(--mono)}.loader-bar{margin-top:18px;height:3px;border-radius:3px;background:#ffffff1a;overflow:hidden}.loader-bar-fill{width:0%;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}#hud{position:fixed;inset:0;z-index:20;pointer-events:none}#hud>*{pointer-events:auto}.card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 12px 40px #0006}#titlecard{position:absolute;top:18px;left:20px;padding:14px 18px 12px;max-width:330px}#titlecard h1{margin:0;font-size:16px;letter-spacing:.11em;text-transform:uppercase;font-weight:650}#titlecard h1 .jp{color:var(--accent);font-size:15px;letter-spacing:.28em}#titlecard p{margin:6px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-dim)}#panel{position:absolute;right:18px;top:18px;width:272px;padding:12px 14px 14px}#panel h2{margin:0 0 9px;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}.row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.row:last-child{margin-bottom:0}button.btn{appearance:none;cursor:pointer;flex:1 1 auto;padding:7px 9px;border-radius:9px;font-size:11px;letter-spacing:.04em;color:var(--ink);border:1px solid rgba(255,255,255,.12);background:#ffffff0d;transition:background .16s,border-color .16s,transform .12s,color .16s;font-family:inherit;white-space:nowrap}button.btn:hover{background:#ffffff21;transform:translateY(-1px)}button.btn.on{background:linear-gradient(140deg,#ff9ec4e6,#ffd27ad9);color:#2c1620;border-color:transparent;font-weight:650}.field{margin:10px 0 4px}.field label{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-family:var(--mono)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:ew-resize;margin:2px 0 0}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#26364f,#f7c86b 42%,#ff9ec4 72%,#2b2f57)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:2px solid #2c1620;box-shadow:0 2px 8px #00000080}input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#26364f,#f7c86b 42%,#ff9ec4 72%,#2b2f57)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #2c1620}#stats{position:absolute;left:20px;bottom:18px;padding:9px 13px;font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--ink-dim)}#stats b{color:var(--accent-2);font-weight:600}#hint{position:absolute;bottom:20px;right:20px;padding:8px 13px;font-size:11px;color:var(--ink-dim);font-family:var(--mono)}#hint kbd{font-family:var(--mono);font-size:10px;color:var(--ink);border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:0 4px}#shotflash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40;transition:opacity .5s ease}#shotflash.on{opacity:.85;transition:none}@media(max-width:900px){#panel{width:224px}#titlecard{max-width:210px}#titlecard p{display:none}}