:root{--panel-bg: rgba(8, 10, 14, .62);--panel-border: rgba(255, 255, 255, .16);--panel-blur: blur(6px);--text-bright: #e8ecef;--text-dim: #8d959e}*{margin:0;padding:0;box-sizing:border-box}.glass{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur)}html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#cfd4da;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif}#app,#app canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:28px 32px;transition:opacity .8s ease,visibility 0s}#hud.idle{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}#hud.idle *{pointer-events:none}#title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}#header-controls{display:flex;align-items:center;gap:8px;margin-left:auto}#title h1{font-size:20px;font-weight:600;letter-spacing:.12em;color:#e8ecef;text-shadow:0 1px 8px rgba(0,0,0,.8)}#title p{margin-top:6px;font-size:12px;letter-spacing:.06em;color:#8d959e}#legend{position:relative}.pill{padding:7px 16px;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text-dim);font-size:11.5px;letter-spacing:.08em;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);transition:color .2s,border-color .2s}.pill:hover{color:var(--text-bright);border-color:#ffffff59}#legend.open #legend-toggle{color:var(--text-bright)}#legend-body{display:none;position:absolute;top:calc(100% + 10px);right:0;width:300px;padding:16px 18px;text-align:left;border-radius:10px;border-color:#ffffff14}#legend.open #legend-body{display:block}.legend-item{display:flex;align-items:center;gap:10px;margin-bottom:10px}.legend-item:last-child{margin-bottom:0}.legend-item svg{width:60px;height:16px;flex-shrink:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}.legend-item strong{display:block;font-size:12px;color:#e8ecef}.legend-item span{display:block;font-size:10.5px;line-height:1.5;color:#8d959e}#status{align-self:flex-end;font-size:10px;letter-spacing:.08em;color:#59616a}#status a{color:inherit;text-decoration:none;pointer-events:auto;border-bottom:1px solid rgba(255,255,255,.12);transition:color .2s,border-color .2s}#status a:hover{color:var(--text-bright);border-color:#fff6}#loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#000;transition:opacity .7s ease}#loading.done{opacity:0;pointer-events:none}#loading p{font-size:12px;letter-spacing:.14em;color:#6b747d}#loading .spinner{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:#ffffff8c;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#fallback-notice{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#05070a;text-align:center;z-index:10}#fallback-notice[hidden]{display:none}#fallback-notice h2{font-size:18px;margin-bottom:12px;color:#e8ecef}#fallback-notice p{font-size:13px;color:#8d959e}#help-button{flex-shrink:0;width:34px;height:34px;border-radius:50%;color:#aeb6bf;font-size:16px;cursor:pointer;pointer-events:auto;transition:color .2s,border-color .2s}#help-button:hover{color:#fff;border-color:#fff6}#modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20}#modal[hidden]{display:none}#modal-card{max-width:480px;margin:20px;padding:28px 32px;background:#0c0f14f5;border:1px solid rgba(255,255,255,.1);border-radius:14px}#modal-card h2{font-size:17px;letter-spacing:.1em;color:#e8ecef;margin-bottom:14px}#modal-card p{font-size:13px;line-height:1.9;color:#b9c0c7;margin-bottom:12px}#modal-card strong{color:#e8ecef;font-weight:600}#modal-card p.fine{font-size:11px;line-height:1.7;color:#79828b;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}#modal-close{margin-top:6px;padding:8px 22px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#cfd4da;font-size:13px;cursor:pointer}#modal-close:hover{background:#ffffff14}@media(max-width:720px){#hud{padding:18px 16px}#title h1{font-size:16px}#title p{font-size:10.5px}.pill{padding:6px 12px;font-size:10.5px}#title{gap:12px}#header-controls{gap:6px}#legend-body{width:auto;min-width:240px;padding:8px 10px}#legend.open #legend-body{display:flex;justify-content:space-around;align-items:center;gap:6px}.legend-item{margin:0;flex-direction:column;gap:3px}.legend-item svg{width:44px;height:12px}.legend-item strong{font-size:10px;white-space:nowrap}.legend-item span{display:none}#status{font-size:9px}#modal-card{max-height:82vh;overflow-y:auto;padding:20px 22px}#modal-card p{font-size:12px;line-height:1.75}}