/* The range uses the same carved oak and parchment as Sherwood's signs and conversations. */
#game-dialog{--range-oak:#49301f;--range-ink:#442d19;--range-gold:#f4d594;background:#182819 url('/assets/ui/oak.webp') center/512px;background-blend-mode:multiply;color:#f4deb0}
#game-dialog[open]{grid-template-rows:76px minmax(0,1fr) 86px 34px;overflow:hidden}
#game-dialog .game-header{display:grid;grid-template-columns:minmax(0,1fr) auto 106px 106px;gap:12px;align-items:center;padding:10px 22px;background:var(--range-oak) url('/assets/ui/oak.webp') center/512px;border-bottom:3px solid #987242;box-shadow:inset 0 -4px #24190e66}
#game-dialog .game-header h1{font-size:18px;line-height:1.4;color:var(--range-gold);text-shadow:1px 2px #24180f;margin:0;max-width:none}
#game-dialog .game-stats{display:flex;flex-direction:row;gap:10px;align-items:center;font-size:14px}
#game-dialog .game-stats>span,#game-dialog .game-stats>strong{padding:8px 14px;background:#eddbad url('/assets/ui/parchment.webp') center/512px;color:var(--range-ink);border:1px solid #b48a50;box-shadow:2px 3px #24190e66;line-height:1.25}
#game-dialog .game-header button,#game-dialog #shoot,#game-dialog .game-overlay button{display:flex;align-items:center;justify-content:center;border:0;background:transparent url('/assets/ui/destination-plaque.png') center/100% 100% no-repeat;color:var(--range-ink);box-shadow:none;text-shadow:0 1px #ffe1a0;image-rendering:pixelated;min-height:52px;padding:13px 20px;line-height:1.3;font-weight:700}
#game-dialog button:hover:not(:disabled){filter:brightness(1.1)}
#game-dialog button:focus-visible,#game-dialog #aim-pad:focus-visible{outline:2px dashed #ffdc90;outline-offset:3px}
#game-dialog button:disabled{opacity:.5;filter:saturate(.35)}
#game-dialog #game-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 20px;min-height:0;background:linear-gradient(#112213e8,#112213ed),url('/assets/world/archery-clearing-v1.png') center/cover}
#game-dialog .stage-copy{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 24px;flex:none;max-width:100%;padding:8px 22px;color:var(--range-ink);background:#eddbad url('/assets/ui/parchment.webp') center/512px;border-block:2px solid #937046;text-align:center;line-height:1.4}
#game-dialog .stage-copy>span{font:12px/1.4 Silkscreen,monospace;color:#3f4929}
#game-dialog .stage-copy small{font-size:12px;color:#574227}
#game-dialog .stage-hint{display:none}
#game-dialog #range{flex:none;border:5px solid #8c633a;box-shadow:0 0 0 2px #382718,0 0 0 3px #bd955b,0 8px 24px #080f0970;max-width:100%;max-height:100%;border-radius:2px}
#game-dialog .game-controls{gap:20px;padding:12px 22px 8px;background:var(--range-oak) url('/assets/ui/oak.webp') center/512px;border-top:3px solid #987242}
#game-dialog .mouse-help{color:#f0dab0;font-size:14px}
#game-dialog .mouse-help small{color:#d3bf98}
#game-dialog #shoot{min-width:170px;height:64px;font-size:15px;padding-inline:28px}
#game-dialog #aim-pad{color:var(--range-ink);background:#eddbad url('/assets/ui/parchment.webp') center/512px;border:2px dashed #896438;box-shadow:inset 0 0 0 3px #d9bd83;border-radius:3px;min-height:52px;line-height:1.3}
#game-dialog #aim-pad span+span{color:#57703b}
#game-dialog .shot-status{height:100%;display:flex;align-items:center;justify-content:center;background:var(--range-oak) url('/assets/ui/oak.webp') center/512px;color:#f4deb0;padding:0 12px 6px;font-size:13px;line-height:1.3}
#game-dialog .game-overlay{padding:18px;background:#102011ba;align-items:safe center;z-index:3}
#game-dialog .game-overlay>div{width:min(540px,100%);background:#eddbad url('/assets/ui/parchment.webp') center/512px;color:var(--range-ink);border:10px solid #624429;border-image:url('/assets/ui/oak.webp') 20 round;box-shadow:inset 0 0 28px #a3772922,5px 7px #0b140b88;padding:30px}
#game-dialog .game-overlay h2{font-size:24px;line-height:1.4;color:#3f4929;margin-bottom:18px}
#game-dialog .game-overlay p{font-size:16px;line-height:1.5}
#game-dialog .game-overlay .small{font-size:13px;color:#665034}
#game-dialog .game-overlay .actions{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:18px}
#game-dialog .game-overlay button{min-height:68px;flex:1 1 180px;padding:18px 26px;font-size:14px}
#game-dialog .game-overlay .big-score{font:30px/1.4 Silkscreen,monospace;color:#3f592d}
#game-dialog #level-cue{top:12%;width:min(330px,calc(100% - 28px));padding:18px 28px;background:#eddbad url('/assets/ui/parchment.webp') center/512px;border:7px solid #624429;box-shadow:3px 5px #0b140b77;color:var(--range-ink)}
#game-dialog #level-cue span{font:12px/1.4 Silkscreen,monospace}
#game-dialog #level-cue strong{color:#425d30;text-shadow:1px 1px #fff0c5;font-size:46px}
#game-dialog #level-cue small{font-size:13px;line-height:1.4}
#game-dialog #level-cue.ready{border-color:#59703b}
@media(max-width:700px){
 #game-dialog[open]{grid-template-rows:100px minmax(0,1fr) 90px 42px}
 #game-dialog .game-header{grid-template-columns:minmax(0,1fr) 74px 74px;gap:2px 6px;padding:6px 10px}
 #game-dialog .game-header h1{font-size:12px}
 #game-dialog .game-header button{grid-row:1;min-height:44px;font-size:12px;padding:10px 12px}
 #game-dialog #pause{grid-column:2}#game-dialog #exit-game{grid-column:3}
 #game-dialog .game-stats{grid-row:2;grid-column:1/-1;justify-content:center;gap:8px;font-size:12px}
 #game-dialog .game-stats>span,#game-dialog .game-stats>strong{padding:5px 12px}
 #game-dialog #game-area{gap:10px;padding:10px 12px}
 #game-dialog .stage-copy{gap:3px 12px;padding:6px 10px;width:100%}
 #game-dialog .stage-copy>span{font-size:11px;flex-basis:100%}
 #game-dialog .stage-copy small{font-size:11px}
 #game-dialog .game-controls{gap:10px;padding:10px 12px}
 #game-dialog #aim-pad{display:flex;flex:1;min-width:0;font-size:12px;padding:8px 14px}
 #game-dialog #shoot{width:132px;min-width:0;min-height:60px;font-size:13px;padding:15px 20px}
 #game-dialog .shot-status{font-size:12px}
 #game-dialog .game-overlay{padding:10px}
 #game-dialog .game-overlay>div{padding:20px 16px;border-width:7px}
 #game-dialog .game-overlay h2{font-size:20px;margin-bottom:12px}
 #game-dialog .game-overlay p{font-size:14px}
 #game-dialog .game-overlay button{min-height:58px;padding:14px 24px;font-size:13px}
 #game-dialog #level-cue{top:15%;padding:12px 20px}#game-dialog #level-cue strong{font-size:38px}
}
@media(max-height:500px) and (orientation:landscape){
 #game-dialog[open]{grid-template-rows:54px minmax(0,1fr) 60px 26px}
 #game-dialog .game-header{grid-template-columns:minmax(0,1fr) auto 85px 85px;padding:4px 12px;gap:6px}
 #game-dialog .game-header h1{font-size:13px}
 #game-dialog .game-stats{grid-column:auto;grid-row:auto;font-size:12px}
 #game-dialog #pause,#game-dialog #exit-game{grid-row:auto;grid-column:auto}
 #game-dialog .game-header button{min-height:44px;font-size:12px}
 #game-dialog #game-area{gap:6px;padding:6px 12px}
 #game-dialog .stage-copy{width:auto;gap:6px 14px;padding:3px 14px}
 #game-dialog .stage-copy>span{flex-basis:auto;font-size:10px}#game-dialog .stage-copy small{font-size:10px}
 #game-dialog .game-controls{padding:4px 14px;gap:18px}
 #game-dialog #shoot{height:48px;min-height:44px;font-size:13px}
 #game-dialog #aim-pad{min-height:44px;height:44px;max-width:270px}
 #game-dialog .shot-status{font-size:11px;padding-bottom:3px}
 #game-dialog .game-overlay>div{width:min(640px,100%);padding:16px 22px}
 #game-dialog .game-overlay .actions{margin-top:6px;gap:10px}
 #game-dialog .game-overlay h2{font-size:18px;margin-bottom:8px}
 #game-dialog .game-overlay p{font-size:13px;margin-bottom:8px}
 #game-dialog .game-overlay button{min-height:50px;padding:12px 24px}
 #game-dialog #level-cue{top:8%;width:290px;padding:8px 20px;border-width:5px}
 #game-dialog #level-cue strong{font-size:30px;margin:0}
 #game-dialog #level-cue small{font-size:11px}
}