:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f0e6cd;background:#111919;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden;user-select:none;-webkit-user-select:none;overscroll-behavior:none}#app{width:100%;height:100vh;height:100dvh;position:relative;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#game{width:100%;height:100%}canvas{display:block;touch-action:none;-webkit-touch-callout:none}#hud{position:fixed;pointer-events:none;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:46px 26px 30px auto;align-content:start;align-items:center;gap:8px 14px;padding:12px}.identity{grid-column:1 / 3;grid-row:1;display:flex;align-items:center;gap:9px}.identity strong{font-size:21px;letter-spacing:.13em;display:block}.identity small{color:#a9b5a6;font-size:10px;display:block;margin-top:2px}.seal{width:32px;height:36px;display:grid;place-items:center;border:1px solid #b7955e;color:#d5b479;font-family:serif;font-size:24px}.vitals{grid-column:1 / 4;grid-row:2;font-size:11px}.vitals b{float:right;font-weight:500;font-variant-numeric:tabular-nums}.hp-track,.xp-track{height:4px;background:#353c34;margin-top:5px}#hp-fill{height:100%;width:100%;background:#91b39b}.counter{grid-row:3;display:flex;align-items:baseline;gap:6px}.counter small{color:#a9b5a6;font-size:10px}.counter strong{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}.counter:nth-of-type(3){grid-column:2}.counter:nth-of-type(4){grid-column:3}.experience{grid-column:1;grid-row:3;font-size:11px;min-width:110px}#level{color:#c9d9b2;font-weight:600;margin-right:8px}#xp{color:#a9c7bd;font-size:10px}#xp-fill{height:100%;width:0;background:#6dbcae}#loadout{grid-column:1 / 4;grid-row:4;font-size:10px;color:#b9c2a8;line-height:1.6}#bonuses{grid-column:1 / 4;grid-row:5;font-size:10px;color:#a9c7bd}button{font:inherit;min-height:44px;min-width:44px;border:1px solid #8b7a58;border-radius:3px;color:#f0e6cd;background:#23312c;cursor:pointer;padding:9px 14px;touch-action:manipulation}button:hover{background:#34463b}button:focus-visible{outline:2px solid #e7ca84;outline-offset:2px}button:disabled{opacity:.5;cursor:default}#pause{grid-column:3;grid-row:1;pointer-events:auto;font-size:11px;padding:8px}.instructions{position:absolute;bottom:14px;left:12px;right:12px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#a4b09c;font-size:10px}#modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#0a1111d9;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}[hidden]{display:none!important}.panel{max-width:430px;max-height:100%;overflow-y:auto;width:100%;background:#1a2724;border:1px solid #706548;padding:22px;text-align:center;box-shadow:0 20px 80px #0006;touch-action:pan-y;overscroll-behavior:contain}.eyebrow{font-size:10px;color:#bba775;letter-spacing:.13em}h1{font-family:serif;font-size:29px;margin:16px 0 10px;font-weight:500}.panel p{color:#b9c2b3;font-size:12px;line-height:1.7;white-space:pre-line;margin:0 0 18px}.panel button{width:100%}#cards{display:grid;gap:10px;margin-bottom:14px}.growth-card{text-align:left;display:flex;flex-direction:column;gap:5px;padding:14px;min-height:99px;border-left:3px solid #d2bd86;touch-action:pan-y}.growth-card.flame{border-left-color:#e89c62}.growth-card.thunder{border-left-color:#b1c3f8}.growth-card.stat{border-left-color:#8dc3ab}.growth-card small{font-size:10px;color:#b3bca8}.growth-card strong{font-size:17px;font-weight:500}.growth-card span{color:#b9c2b3;font-size:11px;line-height:1.6}#growth-hint{font-size:10px;margin-bottom:12px}#debug-xp{position:fixed;bottom:8px;right:8px;z-index:5;font-size:10px;background:#443a24}@media(max-width:360px){#hud{gap:6px 8px;padding:9px}.identity strong{font-size:18px}.seal{display:none}.panel{padding:16px}.growth-card{padding:11px}}@media(orientation:landscape){#hud{padding:5px;gap:2px 5px;grid-template-rows:44px 20px 28px auto}.seal,.identity small,.instructions{display:none}.identity strong{font-size:12px}.experience{min-width:70px}#loadout{font-size:8px}.counter{gap:2px}.counter strong{font-size:12px}.counter small{font-size:8px}}
