/* Final reference layout. Clean artwork slots intentionally remain unset until supplied.
   No screenshot is used as a gameplay backdrop; the 360 × 460 SVG stays interactive. */
body[data-view=flick] .game{padding:10px 12px 8px;background-image:var(--gameplay-mountain-background,none),radial-gradient(ellipse at 50% 0,#23303b,#111b24 40%,#080f14 90%);background-size:cover;background-position:center}
body[data-view=flick] header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;height:72px;min-height:72px;margin:0 0 8px;border:0}
body[data-view=flick] header .brand{grid-column:2;grid-row:1;justify-self:center;font-size:32px;font-weight:850;font-style:italic;letter-spacing:-1px;color:#f8d18a;text-shadow:0 2px 5px #000}
body[data-view=flick] header .brand-mark{display:none}body[data-view=flick] #nav-back{grid-column:1;grid-row:1}body[data-view=flick] #pause{grid-column:3;grid-row:1;margin:0}body[data-view=flick] header .icon{width:40px;height:40px;min-height:40px;border-color:#d5a85f;background:linear-gradient(#24333b,#08151d);box-shadow:0 0 0 2px #533b2055,inset 0 1px 4px #f6da8a33;color:#f5cf83}
body[data-view=flick] #flick-screen{gap:6px;position:relative}#playtest-report-open{min-height:30px;height:30px;flex-shrink:0;border:1px solid #d7a555;clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);border-radius:0;padding:3px 18px;background:linear-gradient(#213139,#0c1920);box-shadow:inset 0 0 0 2px #ae7b3555;font-size:12px}
#flick-screen .flick-hud{position:relative;padding:0;margin:0;flex-shrink:0}#flick-level{font-size:12px;line-height:16px;margin:0 0 3px;color:#eac16d}#flick-shooter-label{display:none}#flick-replay-label{position:absolute;right:0;top:0;font-size:8px;margin:0;color:#d8b36a}
#flick-screen #flick-objective{font-size:15px;line-height:1.25;font-weight:750;white-space:pre-line;margin:0;min-height:36px;color:#ffe3a7;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
#flick-rules{position:relative;margin:3px 0 6px;z-index:7;color:#e2bf80;font-size:9px}#flick-rules>summary{cursor:pointer;list-style:none;min-height:18px;line-height:18px;display:flex;align-items:center;justify-content:space-between}#flick-rules>summary::-webkit-details-marker{display:none}#flick-rules[open]>summary span{transform:rotate(180deg)}#flick-objective-details{position:absolute;top:100%;left:0;right:0;max-height:min(50svh,400px);overflow:auto;background:#0c1b23f7;border:1px solid #c4994e;border-radius:10px;padding:12px;box-shadow:0 8px 25px #000b;color:#f2dfba}#flick-objective-details h3{color:#e4bd78;font-size:10px;margin:10px 0 4px}#flick-objective-details h3:first-child{margin-top:0}#flick-objective-details p{font-size:12px;line-height:1.5}
.flick-counters{padding:7px 10px;min-height:48px;gap:0;border-radius:4px;clip-path:polygon(0 10%,2% 0,98% 0,100% 10%,100% 90%,98% 100%,2% 100%,0 90%)}.flick-counters div{text-align:center;align-items:center}.flick-counters div+div{border-left:1px solid #b48b4340}.flick-counters small{font-size:8px;margin:0}.flick-counters strong{font-size:19px;line-height:22px}
#flick-screen .flick-field{width:100%;max-width:none;margin:0;flex:1;min-height:140px;align-items:center;justify-content:center}#flick-board{width:min(100cqw,78.26087cqh);height:auto;max-width:100%;max-height:100%;aspect-ratio:360/460;background-image:var(--gameplay-board-texture,none);background-size:100% 100%}
.flick-controls{position:relative;display:grid;grid-template-columns:116px 1fr 44px 44px;gap:10px;align-items:center;flex-shrink:0;min-height:48px;margin:0 0 0}.flick-controls .flick-power-row{grid-column:1;display:grid;grid-template-columns:1fr;grid-template-rows:17px 8px;gap:3px;margin:0;padding:6px 10px;border:1px solid #b58b47;border-radius:20px;background:linear-gradient(#253641,#0a1922);height:44px}.flick-controls .flick-power-row>span{min-width:0;display:flex;justify-content:space-between;font-size:9px;color:#f6dfac}.flick-controls #flick-power{font-size:13px;color:#e9b75a}.flick-controls #flick-power-bar{width:100%;height:8px;min-height:8px;flex:none;border-color:#b48a47}.flick-controls #flick-restart{grid-column:3;margin:0;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #d0a259;border-radius:50%;background:linear-gradient(#2a3942,#0a1820);box-shadow:0 0 0 2px #6a492344,inset 0 1px 3px #ffe7a133;color:#f7c77e;font-size:31px;font-weight:500;z-index:1}
body[data-view=flick] .flick-controls>.flick-help,body[data-view=flick] .flick-controls>.flick-help[open]{grid-column:4;position:relative;inset:auto;width:44px;height:44px;padding:0;margin:0;border:0;background:none;box-shadow:none;z-index:8;font-size:12px}body[data-view=flick] .flick-help>summary{display:grid;place-items:center;padding:0;list-style:none;border:1px solid #d0a259;border-radius:50%;width:44px;height:44px;background:linear-gradient(#2a3942,#0a1820);color:#f7c77e;font-size:30px;line-height:1;box-shadow:0 0 0 2px #6a492344}body[data-view=flick] .flick-help>summary::-webkit-details-marker{display:none}.aim-panel{position:absolute;bottom:54px;right:0;width:min(350px,calc(100vw - 32px));max-height:55svh;overflow:auto;background:#10212af7;border:1px solid #c4994e;border-radius:12px;padding:14px;box-shadow:0 -8px 30px #0009;color:#f0ddb7}.flick-help[open] .aim-panel p{display:block;font-size:11px;line-height:1.45}.aim-panel label{font-size:12px}.aim-panel input{min-width:0}
#flick-feedback{font-size:10px;line-height:14px;height:18px;min-height:18px;margin:0;color:#e4bd77}.flick-controls:before{content:'';grid-column:2;grid-row:1;height:1px;background:linear-gradient(90deg,#9f783c,transparent)}
@media(max-height:680px){body[data-view=flick] header{height:42px;min-height:42px;margin-bottom:3px}body[data-view=flick] header .brand{font-size:25px}body[data-view=flick] .game{padding:6px 10px}#flick-screen #flick-objective{font-size:13px;min-height:30px}.flick-counters{min-height:40px;padding:4px 8px}.flick-counters strong{font-size:16px}.flick-controls{min-height:44px;gap:7px;grid-template-columns:110px 1fr 40px 40px}.flick-controls #flick-restart,body[data-view=flick] .flick-help>summary,body[data-view=flick] .flick-controls>.flick-help,body[data-view=flick] .flick-controls>.flick-help[open]{width:40px;height:40px;min-height:40px}}

/* Reference-derived raster layers; interactive bodies stay in the original SVG coordinates. */
:root{--gameplay-mountain-background:url('../assets/gameplay-mountains.png')}
.gameplay-brand-image{display:none}
body[data-view=flick] .game{background-image:linear-gradient(#03080e1a,#03070b33),var(--gameplay-mountain-background);background-size:cover;background-position:center top;border-inline:1px solid #ac884c}
body[data-view=flick] header .brand{font-size:0;text-shadow:none;width:160px;height:70px;display:grid;place-items:center}
body[data-view=flick] .gameplay-brand-image{display:block;max-width:100%;width:160px;height:70px;object-fit:contain;filter:drop-shadow(0 3px 3px #0009)}
#flick-board{background:none;border-radius:0;filter:drop-shadow(0 5px 5px #000b)}
#flick-board .body-label{fill:#fff4dd;stroke:#372c22;stroke-width:5px;stroke-linejoin:round;paint-order:stroke;pointer-events:none}
#flick-screen .flick-counters{background:linear-gradient(#10191de8,#0b1114ed);border-color:#d2a45a;box-shadow:inset 0 0 0 1px #d3ac6433}
#playtest-report-open{position:relative;background:linear-gradient(#263137e8,#0a1218f2);color:#f6d18a;outline:1px solid #cda059;box-shadow:inset 0 0 0 2px #cf9f5066;text-shadow:0 1px 2px #000}
#playtest-report-open:before,#playtest-report-open:after{content:'◇';position:absolute;top:1px;color:#e0b265;font-size:20px;line-height:25px}#playtest-report-open:before{left:12px}#playtest-report-open:after{right:12px}
@media(max-height:680px){body[data-view=flick] header .brand{font-size:0;width:130px;height:42px}body[data-view=flick] .gameplay-brand-image{width:130px;height:42px}}

body[data-view=flick] .game{background-image:linear-gradient(#02060b22 0%,#02060b77 30%,#01030544 100%),var(--gameplay-mountain-background)}

/* Final mobile polish: a 25% ivory veil reduces felt contrast only, preserving red/gold. */
body[data-view=flick] header{height:64px;min-height:64px}body[data-view=flick] header .brand,body[data-view=flick] .gameplay-brand-image{height:64px}
body[data-view=flick] #flick-screen{gap:7px}body[data-view=flick] #playtest-report-open{height:32px;min-height:32px}body[data-view=flick] #flick-level{margin:1px 0 4px}body[data-view=flick] #flick-objective{font-size:15px;line-height:20px;min-height:40px}
body[data-view=flick] #flick-rules{margin:4px 0 8px}body[data-view=flick] #flick-rules>summary{min-height:22px;line-height:22px;gap:8px}body[data-view=flick] #flick-rules>summary span{transform:none}body[data-view=flick] #flick-rules[open] .rules-chevron{transform:rotate(180deg)}.rules-toggle-text{font-size:10px;font-weight:700}.marker-key{margin-left:auto;font-size:9px;color:#f5d89b}.marker-explanation{padding:8px 10px;background:#bd955117;border:1px solid #b58e4355;border-radius:7px;color:#f5dfb6}
body[data-view=flick] .flick-counters{min-height:52px;padding:8px 10px}
body[data-view=flick] #flick-board [data-objective-marker^="★"] .body-label{fill:#ffe8a2;stroke:#49321d}body[data-view=flick] #flick-board [data-objective-marker="✕"] .body-label,body[data-view=flick] #flick-board [data-objective-marker="⛔"] .body-label{fill:#ffe9e1;stroke:#632d28}
body[data-view=flick] .flick-controls{grid-template-columns:132px 1fr 56px 56px;gap:10px;min-height:58px}body[data-view=flick] .flick-controls .flick-power-row{height:56px;padding:8px 12px;grid-template-rows:20px 12px;gap:4px;border-radius:24px}body[data-view=flick] .flick-power-row>span{font-size:11px}body[data-view=flick] #flick-power{font-size:16px}body[data-view=flick] #flick-power-bar{height:12px;min-height:12px}
body[data-view=flick] .flick-controls #flick-restart,body[data-view=flick] .flick-help>summary,body[data-view=flick] .flick-controls>.flick-help,body[data-view=flick] .flick-controls>.flick-help[open]{width:56px;height:56px;min-height:56px}body[data-view=flick] .flick-controls #flick-restart,body[data-view=flick] .flick-help>summary{font-size:36px}.aim-panel{bottom:66px}body[data-view=flick] .aim-panel input[type=range]{min-height:44px}body[data-view=flick] .aim-panel button{min-height:48px}
@media(max-width:340px){body[data-view=flick] .flick-controls{grid-template-columns:122px 1fr 52px 52px;gap:8px}body[data-view=flick] .flick-controls #flick-restart,body[data-view=flick] .flick-help>summary,body[data-view=flick] .flick-controls>.flick-help,body[data-view=flick] .flick-controls>.flick-help[open]{width:52px;height:52px;min-height:52px}.marker-key{font-size:8px}}
@media(max-height:680px){body[data-view=flick] header{height:42px;min-height:42px}body[data-view=flick] header .brand,body[data-view=flick] .gameplay-brand-image{height:42px}body[data-view=flick] #flick-objective{font-size:13px;line-height:17px;min-height:34px}body[data-view=flick] .flick-counters{min-height:44px;padding:5px 8px}}

body[data-view=flick] .flick-counters strong{display:block;white-space:nowrap}

/* Mandatory objectives stay in the main HUD. Long stages scroll the page, not a clipped goal. */
body[data-view=flick]:has(#flick-screen:not([data-phase=won]):not([data-phase=lost])) .game{height:auto;min-height:100svh;overflow:visible}
body[data-view=flick] #flick-screen:not([data-phase=won]):not([data-phase=lost]){flex:1;min-height:calc(100svh - 90px)}
body[data-view=flick] #flick-screen:not([data-phase=won]):not([data-phase=lost]) #flick-objective{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:14px;line-height:19px;min-height:0;white-space:pre-line}
body[data-view=flick] #flick-screen:not([data-phase=won]):not([data-phase=lost]) .flick-field{height:max(360px,calc(100svh - 400px));min-height:360px;flex:none}
body[data-view=flick] #flick-screen:not([data-phase=won]):not([data-phase=lost]) #flick-board{height:100%;width:auto;max-width:100%}

/* Restart is a new attempt, never an undo of a verified shot. */
body[data-view=flick] #flick-restart{display:flex;flex-direction:column;justify-content:center;gap:0}body[data-view=flick] #flick-restart>span{font-size:25px;line-height:26px}body[data-view=flick] #flick-restart>small{font-size:8px;line-height:10px;white-space:normal}body[data-view=flick] #flick-restart:disabled{opacity:.4;filter:grayscale(1);cursor:not-allowed}

/* Icon-only restart: its accessible name and tooltip remain on the button. */
body[data-view=flick] #flick-restart{display:grid;place-items:center;padding:0;line-height:1}body[data-view=flick] #flick-restart>span{display:block;font-size:30px;line-height:1}body[data-view=flick] #flick-restart>small{display:none}