:root{color-scheme:dark;font-family:monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#17131f;color:#e8dcc4;font-family:monospace}
body{padding:10px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#hk{width:min(100%,960px);margin:0 auto}
.hk-title{margin:0 0 8px;font-size:16px;color:#ffd166;letter-spacing:.08em;text-align:center}
#hall{width:100%;max-width:960px;height:auto;max-height:calc(100vh - 190px);object-fit:contain;image-rendering:pixelated;display:block;margin:0 auto;touch-action:none}
.hk-meter{min-height:15px;margin:5px 0 0;color:#ffd166;font-size:12px;text-align:left}
.hk-hud{width:min(100%,960px);margin:8px auto;display:flex;justify-content:space-between;gap:8px}
.hk-btn{border:2px solid #6b6459;background:#2a2338;color:#e8dcc4;padding:8px 12px;font-size:12px;font-weight:bold;letter-spacing:.04em;text-decoration:none}
.hk-btn-go{border-color:#7fd9e8;color:#7fd9e8}.hk-btn:hover,.hk-btn:focus-visible{background:#3a3150;color:#fff5d1}
.hk-panel{width:min(100%,960px);min-height:64px;margin:0 auto;padding:9px 11px;background:rgba(42,35,56,.78);border:2px solid #6b6459}
.hk-panel-head{margin:0 0 5px;color:#ffd166;font-size:12px;font-weight:bold;letter-spacing:.06em}.hk-panel-body{margin:0;color:#e8dcc4;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
@media (max-width:520px){body{padding-top:6px}.hk-title{font-size:14px;margin-bottom:5px}.hk-btn{font-size:10px;padding:7px 8px}.hk-panel-body{font-size:12px}}