:root{color-scheme:dark;--ink:#f7f2df;--muted:#b9bba8;--panel:rgba(17,30,30,.93);--line:rgba(255,245,200,.2);--gold:#ffd166;--green:#83d39a;--red:#ff7c6f}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102b2a;font-family:Georgia,"Times New Roman",serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}
body{display:grid;place-items:center;padding:0}
.game-shell{position:relative;width:100%;height:var(--escapee-vh,100dvh);overflow:hidden;background:#183d3a;isolation:isolate}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;image-rendering:auto}
.hud{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none;text-shadow:0 2px 2px #08211d}
.hud-side{display:flex;gap:7px;align-items:flex-start}.hud-side.right{text-align:right}.hud-card{min-width:92px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:rgba(8,24,23,.73);backdrop-filter:blur(5px)}.hud-card.compact{min-width:72px}.hud-card span,.hud-card small{display:block;color:#c7cbb7;font:700 10px/1.1 ui-monospace,monospace;letter-spacing:.1em}.hud-card strong{display:block;color:#fff4bd;font:900 22px/1.05 ui-monospace,monospace}.hud-card small{margin-top:2px;color:#a2b0a0;font-size:9px}.hud-center{flex:1;text-align:center}.turn-label{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(8,24,23,.73);font:700 12px/1.1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.wind-label{margin-top:7px;color:#fff3b0;font:900 13px/1 ui-monospace,monospace;letter-spacing:.1em}
.aim-panel{position:absolute;z-index:4;left:50%;bottom:max(13px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(710px,calc(100% - 28px));padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(8,24,23,.86);box-shadow:0 8px 28px rgba(0,0,0,.25);backdrop-filter:blur(7px)}.aim-panel[hidden]{display:none}.mode-toggle{display:block;margin:0 auto 7px;min-height:40px;padding:7px 12px;border:1px solid rgba(255,245,200,.32);border-radius:999px;background:#1f5144;color:#fff4bd;font:900 11px ui-monospace,monospace;letter-spacing:.06em;touch-action:manipulation}.mode-toggle[aria-pressed=true]{background:#754b25}.slider-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}.slider-controls.is-disabled{display:none}.slider-controls label{display:grid;grid-template-columns:1fr auto;gap:4px;color:#d0d4c3;font:800 11px ui-monospace,monospace;letter-spacing:.08em}.slider-controls output{color:#fff4bd}.slider-controls input{grid-column:1/-1;width:100%;accent-color:var(--gold);min-height:32px}.fire-button,.primary-button,.secondary-button{min-height:48px;padding:0 20px;border:2px solid #ffe493;border-radius:9px;background:#c36f2d;color:#fff8d8;font:900 14px ui-monospace,monospace;letter-spacing:.08em;box-shadow:0 3px 0 #713d24;touch-action:manipulation}.fire-button span{display:block;font-size:9px;opacity:.7;margin-top:2px}.fire-button:disabled{opacity:.45;filter:grayscale(.7)}.drag-hint{margin:5px 0 0;text-align:center;color:#b9c5b6;font:600 11px/1.2 ui-monospace,monospace}
.game-overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:rgba(6,20,19,.48);backdrop-filter:blur(3px)}.game-overlay.hidden{display:none}.panel{width:min(720px,100%);max-height:100%;overflow:auto;padding:28px;border:1px solid rgba(255,245,200,.27);border-radius:18px;background:var(--panel);box-shadow:0 20px 70px rgba(0,0,0,.45);text-align:center}.eyebrow{margin:0 0 8px;color:var(--gold);font:900 11px ui-monospace,monospace;letter-spacing:.16em}.panel h1{margin:0;color:#fff3b0;font-size:clamp(36px,7vw,70px);line-height:.95}.panel h2{margin:22px 0 10px;color:#fff3b0;font-size:clamp(22px,4vw,34px)}.lead{max-width:560px;margin:16px auto;color:#d1d6c7;font-size:17px;line-height:1.4}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.character-choice{min-height:150px;padding:13px 8px;border:1px solid rgba(255,245,200,.22);border-radius:12px;background:#183b35;color:var(--ink);font:inherit;touch-action:manipulation}.character-choice:hover,.character-choice:focus-visible{border-color:var(--gold);background:#245043;outline:none}.choice-sprite{display:block;width:48px;height:70px;margin:0 auto 7px;image-rendering:pixelated;background-repeat:no-repeat;background-size:48px 70px}.sterling-sprite{background:linear-gradient(#33241d 0 16%,transparent 16%),linear-gradient(90deg,transparent 0 19%,#204f3c 19% 80%,transparent 80%);background-color:#e5b17a;border:3px solid #132f2a;border-radius:45% 45% 20% 20%}.ryan-sprite{height:76px;background:linear-gradient(#9c4e31 0 12%,transparent 12%),linear-gradient(90deg,transparent 0 15%,#783d2d 15% 84%,transparent 84%);background-color:#e2ae79;border:3px solid #132f2a;border-radius:48% 48% 16% 16%}.cooper-sprite{background:linear-gradient(#d9bc64 0 16%,transparent 16%),linear-gradient(90deg,transparent 0 17%,#a66b36 17% 83%,transparent 83%);background-color:#dba573;border:3px solid #132f2a;border-radius:45% 45% 20% 20%}.character-choice strong,.character-choice small{display:block}.character-choice strong{font-size:17px;color:#fff3b0}.character-choice small{margin-top:4px;color:#b7c5b4;font-size:11px}.controls-note{margin:20px auto 0;max-width:600px;color:#abb9ab;font:600 11px/1.4 ui-monospace,monospace}.result-panel{width:min(440px,100%)}.result-panel h2{margin-top:10px}.result-panel p:not(.eyebrow){color:#d1d6c7;line-height:1.4}.primary-button,.secondary-button{display:block;width:100%;margin-top:14px}.secondary-button{border-color:rgba(255,245,200,.3);background:#244b42;box-shadow:none;color:#d5dfd0}.final-score{margin:18px 0 6px;padding:12px;border-radius:10px;background:#0d2523}.final-score span{display:block;color:#abb9ab;font:900 10px ui-monospace,monospace;letter-spacing:.12em}.final-score strong{display:block;color:#fff3b0;font:900 36px ui-monospace,monospace}
@media(max-width:620px){.hud{gap:4px}.hud-card{min-width:64px;padding:6px 7px}.hud-card.compact{min-width:54px}.hud-card strong{font-size:17px}.hud-card span{font-size:8px}.hud-card small{font-size:7px}.turn-label{padding:6px 7px;font-size:9px}.wind-label{font-size:10px}.slider-controls{grid-template-columns:1fr 1fr}.fire-button{grid-column:1/-1;width:100%;min-height:50px}.aim-panel{padding:8px 10px}.panel{padding:22px 16px}.lead{font-size:15px}.character-grid{gap:6px}.character-choice{min-height:132px;padding:8px 4px}.choice-sprite{transform:scale(.8);margin-bottom:-4px}.character-choice strong{font-size:14px}.character-choice small{font-size:9px}.controls-note{margin-top:13px;font-size:10px}}
@media(orientation:portrait){.hud{align-items:flex-start}.hud-center{position:absolute;top:58px;left:0;right:0}.aim-panel{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100% - 16px);padding:8px 10px;border-radius:16px}.mode-toggle{width:100%;margin-bottom:6px}.slider-controls{grid-template-columns:1fr;gap:3px}.slider-controls label{grid-template-columns:1fr auto;gap:2px}.slider-controls input{min-height:30px;margin:0}.fire-button{grid-column:1/-1;width:100%;min-height:56px;margin-top:3px}.fire-button span{display:none}.drag-hint{font-size:10px;line-height:1.15}.panel h1{font-size:42px}}
@media(max-height:570px) and (orientation:landscape){.hud{top:6px}.aim-panel{padding:5px 9px;bottom:6px}.mode-toggle{margin-bottom:2px;padding:5px}.drag-hint{display:none}.panel{padding:14px}.start-panel h2{margin:10px 0 6px}.character-choice{min-height:105px}.choice-sprite{transform:scale(.58);margin-top:-13px;margin-bottom:-16px}.controls-note{margin-top:8px}.panel h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){.game-overlay{backdrop-filter:none}}

/* Approved Greenwood Duel art replaces the temporary CSS silhouettes. */
.choice-sprite{width:64px;height:80px;background-repeat:no-repeat;background-size:320px 80px;background-position:0 0;border:0;border-radius:0;background-color:transparent}
.sterling-sprite{background-image:url('./assets/archers/sterling-aim.png')}
.ryan-sprite{height:80px;background-image:url('./assets/archers/ryan-aim.png')}
.cooper-sprite{background-image:url('./assets/archers/cooper-aim.png')}