:root{--bg: #f4efe6;--ink: #2a2622;--muted: #6b635a;--chip: #ebe4d8;--accent: #3d3832;--wood: #c4a574}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}#app{display:flex;flex-direction:column;height:100%}.chrome{display:flex;align-items:baseline;gap:.85rem;padding:.65rem 1.1rem;border-bottom:1px solid #ddd4c6;background:#f4efe6eb}.chrome h1{margin:0;font-size:1.05rem;font-weight:560;letter-spacing:.01em}.back{color:var(--muted);text-decoration:none;font-size:.85rem}.tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}#viewport{flex:1;min-height:0;position:relative}#viewport canvas{display:block;width:100%;height:100%}.hud{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;padding:.7rem 1.1rem .9rem;border-top:1px solid #ddd4c6;background:#f7f2ea}.mode-chip{display:inline-flex;border:1px solid #cfc5b5;border-radius:999px;overflow:hidden;background:var(--chip)}.mode-chip button{border:0;background:transparent;padding:.35rem .85rem;font:inherit;font-size:.8rem;color:var(--muted);cursor:pointer}.mode-chip button.is-on{background:var(--accent);color:#f7f2ea}.aim-block{display:flex;gap:.85rem;flex-wrap:wrap}.aim-block label{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}.aim-block input[type=range]{width:110px}.actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}.shots{font-size:.8rem;color:var(--muted)}.shots.hidden{display:none}button#fire,button#reset{font:inherit;font-size:.82rem;padding:.4rem .9rem;border-radius:6px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#f7f2ea}button#reset.ghost{background:transparent;color:var(--accent)}.status{flex:1 1 100%;margin:0;font-size:.78rem;color:var(--muted)}@media(max-width:720px){.actions{margin-left:0;width:100%}.aim-block input[type=range]{width:90px}}