:root{--bg: #0a0d07;--panel: rgba(16, 21, 12, .92);--panel-solid: #101510;--olive: #4c5a30;--olive-dim: #2a3320;--amber: #ffb020;--amber-dim: #8a5f13;--sand: #ded3ae;--sand-dim: #8d8666;--blood: #e0402f;--steel: #7f8fa0;--p0: #e8443a;--p1: #3d8ff0;--p2: #46c85f;--p3: #f0b429;--fx-fast: .14s;--shell: clamp(8px, 2.6vw, 18px);--stencil: "Oswald", "Haettenschweiler", "Arial Narrow", "Impact", system-ui, sans-serif;--mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--sand);font-family:var(--mono);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%}#app{position:fixed;inset:0;overflow:hidden}#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#app:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.6) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0px,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px);mix-blend-mode:overlay}.hidden{display:none!important}.stencil-mark{font-family:var(--stencil);font-size:.72rem;letter-spacing:.42em;color:var(--amber-dim);text-transform:uppercase}.panel-title{font-family:var(--stencil);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(1.4rem,6vw,2.2rem);margin:.2em 0 .6em;color:var(--sand);text-shadow:0 0 24px rgba(255,176,32,.25)}.panel-title.big{font-size:clamp(2.2rem,12vw,4rem);letter-spacing:.1em}.hazard{height:6px;background:repeating-linear-gradient(-45deg,var(--amber) 0 8px,#1a1a12 8px 16px);opacity:.5}.screen{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);background:radial-gradient(90% 60% at 50% 30%,rgba(70,84,40,.22),transparent 70%),linear-gradient(180deg,#060804eb,#060804f7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto;animation:fade-in .26s ease-out}@keyframes fade-in{0%{opacity:0}}.screen-inner{width:min(560px,100%);max-width:100%;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 18px;position:relative;border:1px solid var(--olive-dim);background:linear-gradient(180deg,#141a0fdb,#0a0d08db);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}.game-title{font-family:var(--stencil);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,11.2vw,4.2rem);line-height:.92;margin:0;max-width:100%;overflow-wrap:break-word;letter-spacing:.02em;color:var(--sand);text-shadow:0 2px 0 #000,0 0 30px rgba(255,176,32,.3)}.game-title em{display:block;font-style:normal;color:var(--amber);-webkit-text-stroke:0}.game-title .colon{color:var(--blood)}.tagline{margin:0;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sand-dim)}.field{width:100%;min-width:0;margin-top:4px}.field-label{font-family:var(--stencil);font-size:.68rem;letter-spacing:.3em;color:var(--amber-dim);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}.field-label:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--olive),transparent)}.faction-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.faction-card{--c: var(--p0);min-width:0;position:relative;border:1px solid var(--olive-dim);background:#00000059;color:var(--sand-dim);padding:10px 10px 10px 14px;text-align:left;font-family:var(--stencil);text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;cursor:pointer;transition:all var(--fx-fast) ease;min-height:54px}.faction-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c);opacity:.55;transition:opacity var(--fx-fast)}.faction-card small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;opacity:.65;margin-top:2px}.faction-card[aria-pressed=true]{border-color:var(--c);color:var(--sand);background:#ffffff0d;box-shadow:0 0 0 1px #ffffff0f inset,0 0 24px -8px var(--c)}.faction-card[aria-pressed=true]:before{opacity:1}.seg{display:flex;gap:6px}.seg button{flex:1 1 0;min-width:0;padding:11px 4px;border:1px solid var(--olive-dim);background:#00000059;color:var(--sand-dim);font-family:var(--stencil);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;cursor:pointer;transition:all var(--fx-fast)}.seg button[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:#14180c;font-weight:700}.deploy-btn{width:100%;margin-top:6px;padding:16px;border:0;background:linear-gradient(180deg,var(--amber),#d38c0c);color:#14180c;font-family:var(--stencil);font-weight:700;font-size:1.15rem;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);box-shadow:0 0 40px -10px var(--amber);transition:transform var(--fx-fast),filter var(--fx-fast)}.deploy-btn:active{transform:translateY(2px) scale(.99);filter:brightness(1.15)}.opts{display:flex;flex-wrap:wrap;gap:6px;width:100%;justify-content:center}.opt-btn{flex:1 1 auto;padding:10px 12px;border:1px solid var(--olive-dim);background:transparent;color:var(--sand-dim);font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}.opt-btn.wide{flex-basis:100%}.opt-btn.danger{color:var(--blood);border-color:#e0402f73}.opt-btn:active{background:#ffffff0f}.brief-inner{text-align:left;align-items:stretch;max-height:100%}.brief-body{overflow-y:auto;font-size:.78rem;line-height:1.6;color:var(--sand-dim);padding-right:4px}.brief-body h3{font-family:var(--stencil);letter-spacing:.22em;color:var(--amber);font-size:.76rem;text-transform:uppercase;margin:16px 0 4px}.brief-body b{color:var(--sand)}.brief-body ul{margin:4px 0;padding-left:18px}.brief-body li{margin-bottom:4px}.brief-powers{display:flex;flex-direction:column;gap:6px;margin-top:10px}.brief-power{display:flex;gap:10px;align-items:flex-start;border-left:3px solid var(--amber-dim);padding:6px 8px;background:#0000004d}.brief-power .glyph{font-size:1.2rem;line-height:1.2}.brief-power b{font-family:var(--stencil);letter-spacing:.14em;color:var(--sand);display:block;font-size:.8rem}.stats{width:100%;display:flex;flex-direction:column;gap:4px;font-size:.72rem}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-left:4px solid var(--c, var(--olive));background:#00000059;letter-spacing:.1em}.stat-row .rank{font-family:var(--stencil);color:var(--amber);letter-spacing:.2em}.hud{position:absolute;inset:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}.hud button{pointer-events:auto}.top{padding:calc(env(safe-area-inset-top) + 8px) var(--shell) 0}.armies{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.army{--c: var(--p0);position:relative;background:linear-gradient(180deg,#0c1009e6,#0c10099e);border-top:2px solid var(--c);padding:5px 6px 6px;overflow:hidden;transition:transform .2s ease,background .2s ease}.army.active{background:linear-gradient(180deg,#ffb02029,#0c1009b3);transform:translateY(2px)}.army.active:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--amber);animation:pulse-bar 1.1s ease-in-out infinite}@keyframes pulse-bar{50%{opacity:.25}}.army.dead{opacity:.42;filter:grayscale(.7)}.army .name{font-family:var(--stencil);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.army .sub{font-size:.5rem;letter-spacing:.1em;color:var(--sand-dim);display:flex;justify-content:space-between;margin-top:2px}.army .pips{display:flex;gap:2px;margin-top:4px}.army .pip{flex:1;height:4px;background:#ffffff21}.army .pip.home{background:var(--c);box-shadow:0 0 6px var(--c)}.army .pip.out{background:#fff6}.army .badge{position:absolute;top:4px;right:4px;font-size:.5rem;letter-spacing:.08em;color:var(--amber)}.announce{position:absolute;left:0;right:0;top:26%;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.toast{font-family:var(--stencil);text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.95rem,4.6vw,1.5rem);padding:7px 18px;background:#080a06c7;border-left:3px solid var(--amber);border-right:3px solid var(--amber);color:var(--sand);animation:toast-in .26s cubic-bezier(.2,1.4,.4,1) both;text-shadow:0 0 18px rgba(0,0,0,.9)}.toast.kill{border-color:var(--blood);color:#ffdad6;background:#460a06cc}.toast.good{border-color:var(--p2)}.toast.out{animation:toast-out .3s ease-in forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(14px) scale(.94)}}@keyframes toast-out{to{opacity:0;transform:translateY(-10px) scale(.98)}}.bottom{padding:0 var(--shell) calc(env(safe-area-inset-bottom) + 10px);display:flex;flex-direction:column;gap:8px;background:linear-gradient(0deg,rgba(6,8,4,.82),transparent)}.powerbar{display:flex;gap:6px;justify-content:center;min-height:4px;flex-wrap:wrap}.power-chip{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:7px 11px 7px 8px;border:1px solid var(--amber-dim);background:#0e120ae6;color:var(--sand);font-family:var(--stencil);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);animation:chip-in .22s cubic-bezier(.2,1.4,.4,1) both;transition:filter var(--fx-fast),transform var(--fx-fast)}.power-chip .glyph{font-size:1.05rem}.power-chip:disabled{opacity:.35;filter:grayscale(1);cursor:default}.power-chip.armed{background:var(--amber);color:#14180c;border-color:#fff}.power-chip:not(:disabled):active{transform:translateY(2px)}@keyframes chip-in{0%{opacity:0;transform:translateY(10px) scale(.9)}}.actionrow{display:flex;align-items:center;justify-content:center;gap:12px}.icon-btn{width:46px;height:46px;flex:none;border:1px solid var(--olive-dim);background:#0e120ad9;color:var(--sand-dim);font-family:var(--stencil);font-size:.62rem;letter-spacing:.1em;cursor:pointer}.icon-btn:active{background:#ffffff14}.roll-btn{position:relative;flex:1;max-width:260px;height:62px;border:0;background:linear-gradient(180deg,#2f3a1f,#171f0f);border-top:2px solid var(--amber);color:var(--sand);font-family:var(--stencil);font-size:1.1rem;letter-spacing:.34em;text-transform:uppercase;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:filter var(--fx-fast),transform var(--fx-fast);overflow:hidden}.roll-btn:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,176,32,.1) 0 10px,transparent 10px 20px);opacity:0;transition:opacity .2s}.roll-btn.ready:before{opacity:1;animation:slide-stripes 1.4s linear infinite}@keyframes slide-stripes{to{transform:translate(28px)}}.roll-btn.ready{box-shadow:0 0 34px -8px var(--amber)}.roll-btn:disabled{opacity:.42;cursor:default;filter:grayscale(.6)}.roll-btn:not(:disabled):active{transform:translateY(2px);filter:brightness(1.2)}.roll-label{position:relative}.dice-value{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.6rem;letter-spacing:0;color:var(--amber);text-shadow:0 0 16px var(--amber)}.hint{text-align:center;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sand-dim);min-height:1em;transition:color .2s}.hint.alert{color:var(--amber)}.targeting{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 150px);display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 12px;background:#5a1008db;border-top:1px solid var(--blood);border-bottom:1px solid var(--blood);font-family:var(--stencil);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;animation:target-in .2s ease-out both}@keyframes target-in{0%{opacity:0;transform:translateY(8px)}}.cancel-btn{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;padding:5px 10px;cursor:pointer}.boot{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);transition:opacity .4s ease}.boot.done{opacity:0;pointer-events:none}.boot-bar{width:min(240px,60vw);height:3px;background:var(--olive-dim);overflow:hidden}.boot-bar i{display:block;height:100%;width:40%;background:var(--amber);animation:boot-slide .9s ease-in-out infinite}@keyframes boot-slide{0%{transform:translate(-110%)}to{transform:translate(280%)}}.boot-text{font-family:var(--stencil);font-size:.66rem;letter-spacing:.34em;color:var(--sand-dim);text-transform:uppercase}.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate(-1px,1px)}20%,80%{transform:translate(3px,-2px)}30%,50%,70%{transform:translate(-5px,2px)}40%,60%{transform:translate(5px,-1px)}}@media(min-width:760px){.armies{max-width:720px;margin:0 auto;gap:8px}.army .name{font-size:.7rem}.army .sub{font-size:.58rem}.bottom{align-items:center}.actionrow,.powerbar{width:min(560px,100%)}.hint{font-size:.66rem}}@media(min-width:760px)and (min-height:700px){.faction-pick{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}