@font-face{font-family:'Geist Pixel';src:url('assets/fonts/GeistPixel-Regular-VariableFont_ELSH.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--font:'Geist Pixel',monospace;--ivory:#f5f2df;--lemon:#f7d864;--slate:#444661;--slate-light:#777b8e;--slate-dark:#222537;--black:#080a10;--blue:#343ded;--red:#e20619}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080b11;color:var(--ivory)}
body{font-family:var(--font)}
button,.help summary{font:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
button:focus-visible,.help summary:focus-visible,a:focus-visible{outline:3px solid var(--lemon);outline-offset:3px}
.cabinet{min-height:100dvh;display:grid;place-items:center;padding:8px}
.screen-frame{position:relative;width:min(100%,calc((100dvh - 16px)*16/9));aspect-ratio:16/9;overflow:hidden;background:#1e5137;container-type:inline-size}
.screen-frame:not([data-screen='title']){width:min(100%,calc((100dvh - 16px)*640/340));aspect-ratio:640/340}
.canvas-mask{position:absolute;inset:0 0 6.471% 0;overflow:hidden}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
#game{background:#7bc9d8}
.screen-frame[data-screen='title'] .canvas-mask{inset:0}
.game-ui{position:absolute;inset:0;z-index:2;pointer-events:none;font-variation-settings:'ELSH' 90}
.screen-frame[data-screen='title'] .game-ui{display:none}
.screen-frame[data-screen='menu'] .game-ui{display:none}
/* Score type stays on the course; a small control rail sits below it. */
.topbar{position:absolute;top:1.15cqw;right:1.2cqw;z-index:4}
.mini-brand{display:none}
.top-actions{display:flex;gap:.35cqw;align-items:center;pointer-events:auto}
.text-button,.help summary{padding:.3cqw .5cqw;min-height:2cqw;border:2px solid var(--black);background:#4b4d67;color:var(--ivory);font-size:clamp(11px,.9cqw,17px);line-height:1;text-shadow:1px 1px 0 var(--black);box-shadow:inset 2px 2px 0 #9295a4,inset -2px -2px 0 #222637,2px 2px 0 #080a10}
.text-button:hover,.help summary:hover{color:var(--lemon);background:#5c5e78}
.help{position:relative}
.help summary{list-style:none}
.help summary::-webkit-details-marker{display:none}
.help-copy{position:absolute;right:0;top:calc(100% + 6px);width:min(31cqw,420px);min-width:250px;padding:9px 12px;border:3px solid var(--black);background:#454761;color:var(--ivory);font-size:clamp(10px,.75cqw,14px);line-height:1.25;text-shadow:none;box-shadow:inset 2px 2px 0 #9a9baa,inset -2px -2px 0 #222535,4px 4px 0 var(--black)}
.help-copy p{margin:0 0 .45em}.help-copy p:last-child{margin-bottom:0}.help-copy a{color:var(--lemon)}.help-built{font-size:1.08em}
.course-readout{position:absolute;top:1.05cqw;left:1.2cqw;font-size:clamp(12px,1.05cqw,21px);line-height:1.18;letter-spacing:.012em;text-shadow:2px 2px 0 #0b1919,0 0 3px #0b1919;white-space:nowrap}
.course-readout strong{font-weight:700}.hole-label{color:var(--ivory)}.hole-label span{padding:0 .18em;color:var(--ivory)}
.distance-label{margin-top:.1cqw;color:var(--lemon)}.distance-label strong{font-size:1.13em}.distance-label span{font-size:.86em}
.strokes-label{color:var(--ivory)}.strokes-label strong{color:var(--lemon)}.strokes-label span:last-child{display:none}
.wind-widget{position:absolute;right:1.2cqw;top:3.85cqw;display:flex;align-items:center;gap:.32cqw;padding:.18cqw .4cqw .18cqw .18cqw;border:2px solid var(--black);background:#5b5d70;box-shadow:inset 2px 2px 0 #a5a6b0,inset -2px -2px 0 #292d3b,2px 2px 0 var(--black)}
.wind-dial{display:grid;place-items:center;width:2.25cqw;height:2.25cqw;min-width:28px;min-height:28px;border:2px solid var(--black);background:#07552f;box-shadow:inset 1px 1px 0 #35965c}
.wind-dial svg{width:75%;height:75%;fill:none;stroke:#fffdf0;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter}
.wind-caption{display:flex;align-items:baseline;gap:.23em;line-height:1;text-shadow:1px 1px 0 var(--black)}.wind-caption strong{font-size:clamp(14px,1.18cqw,24px)}.wind-caption span{font-size:clamp(10px,.74cqw,15px)}
.playbar{position:absolute;inset:auto 0 0;height:6.471%;padding:.32cqw 1cqw .36cqw;display:flex;align-items:stretch;gap:.5cqw;background-color:#333449;background-image:repeating-linear-gradient(45deg,transparent 0 11px,#155d6b 11px 12px,transparent 12px 22px),repeating-linear-gradient(-45deg,transparent 0 11px,#155d6b 11px 12px,transparent 12px 22px);border-top:.34cqw solid #9da2af;box-shadow:inset 0 .18cqw 0 #1c1e2f,0 -.16cqw 0 #090c16;text-shadow:1px 1px 0 var(--black)}
.playbar::before{content:'';position:absolute;left:.25cqw;right:.25cqw;top:-.18cqw;height:.12cqw;background:#222533;pointer-events:none}
.shot-info{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:14cqw;min-width:0;padding:.12cqw .65cqw;background:var(--slate);border:2px solid var(--black);box-shadow:inset 2px 2px 0 #85889c,inset -2px -2px 0 #292c3e}
.shot-info span,.shot-info small{font-size:clamp(9px,.65cqw,13px);line-height:1}.shot-info span{color:#d4d3df}.shot-info strong{font-size:clamp(13px,1.13cqw,23px);line-height:1.05;white-space:nowrap}.shot-info small{display:none}
.power-widget{position:absolute;left:1.2cqw;bottom:calc(100% + 1.3cqw);width:8.6cqw;display:flex;flex-direction:column;align-items:center;min-width:0;text-shadow:1px 2px 0 #0b1919,0 0 3px #0b1919}
.power-label{order:2;display:flex;gap:.36cqw;align-items:baseline;color:var(--ivory);font-size:clamp(11px,.73cqw,15px);white-space:nowrap}.power-label strong{font-size:clamp(15px,1.1cqw,23px);color:var(--lemon)}
.power-dial{order:1;display:block;width:7.2cqw;height:7.2cqw;min-width:72px;min-height:72px;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(2px 3px 0 #12271d)}
#powerPrompt{display:none;position:absolute;left:100%;top:2.7cqw;width:13cqw;color:var(--lemon);font-size:clamp(10px,.72cqw,15px);line-height:1.05;text-align:left;white-space:nowrap}.power-widget.charging #powerPrompt{display:block}
.controls{margin-left:auto;display:flex;align-items:stretch;justify-content:flex-end;gap:.42cqw;min-width:0;pointer-events:auto}
.control-pair{display:flex;align-items:center;gap:0;min-width:0;padding-left:.5cqw;background:var(--slate);border:2px solid var(--black);box-shadow:inset 2px 2px 0 #85889c,inset -2px -2px 0 #292c3e}
.control-pair span{margin-right:.4cqw;color:var(--lemon);font-size:clamp(10px,.72cqw,15px)}
.controls button{min-width:0;padding:.3cqw .65cqw;border:2px solid var(--black);background:#575a73;color:var(--ivory);box-shadow:inset 2px 2px 0 #a0a2b0,inset -2px -2px 0 #2c2f42;font-size:clamp(11px,.9cqw,18px);line-height:1;white-space:nowrap;text-shadow:1px 1px 0 var(--black)}
.control-pair button{height:100%;padding:.24cqw .58cqw;border-top:0;border-bottom:0;font-size:clamp(14px,1.13cqw,22px)}.control-pair button:last-child{border-right:0}
.controls button:hover{background:#74768c;color:var(--lemon)}.controls button:active,.controls button.pressed{background:#383a52;box-shadow:inset 2px 2px 0 #151727;color:var(--lemon)}
.controls .swing-button{min-width:13cqw;background:#454963;color:var(--ivory)}.controls .swing-button:hover{background:#575c82}.controls .next-button{display:none}
/* Title keeps the supplied artwork, with one quiet, period-appropriate menu. */
.title-screen,.result-screen{position:absolute;inset:0;z-index:5;text-align:center}
.title-screen{background:#5e8c8d;isolation:isolate;pointer-events:auto}.title-screen[hidden],.result-screen[hidden]{display:none}
.title-art{position:absolute;left:-13%;top:0;width:113%;aspect-ratio:1376/768;overflow:hidden;pointer-events:none;background:#78a2b3}.title-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top left;image-rendering:pixelated;will-change:transform;pointer-events:none}
.title-inner{position:relative;z-index:1;width:100%;height:100%;pointer-events:none}.title-inner>*{position:absolute;pointer-events:auto;margin:0}
.layer-ball>img{display:block;width:100%;height:100%;image-rendering:pixelated}
/* Keep every full-canvas layer on the same ratio, including the mobile border.
   The nested ball fills its layer; the other images use object-fit:contain. */
@media(max-width:720px){.title-art{box-sizing:content-box}}
/* Individual translate composes with the pointer parallax's transform. The
   swan artwork includes its wake/reflection, not a second stationary bird. */
.layer-swan{animation:title-swan-swim 28s ease-in-out infinite}
@keyframes title-swan-swim{0%,50%,100%{translate:0 0}25%{translate:.8% 0}75%{translate:-.8% 0}}
.screen-frame:not([data-screen='title']) .layer-swan{animation-play-state:paused}
#titleRampLink{position:absolute;left:59.0116%;top:72.2656%;width:13.7355%;height:7.0313%;min-height:44px;pointer-events:auto;cursor:pointer}
.blimp-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
#blimpHitArea{fill:transparent;pointer-events:all;cursor:pointer}
#blimpLink:focus-visible{outline:none}
#blimpLink:focus-visible #blimpHitArea{stroke:#fffdf1;stroke-width:1;stroke-dasharray:3 2}
.title-stack{left:53.5%;top:6.3%;transform:translateX(-50%);width:96%;display:flex;flex-direction:column;align-items:center;gap:1.38cqw;text-align:center;font-variation-settings:'ELSH' 90}.title-stack>*{position:static;margin:0;pointer-events:auto}
h1{width:max-content;max-width:100%;margin:0;color:#fff5d8;font-size:clamp(50px,7.5625cqw,152.5px);font-weight:700;line-height:.95;letter-spacing:-.085em;white-space:nowrap;text-shadow:4px 4px 0 #173855,8px 8px 0 #071d30,12px 12px 0 #071624}h1 .title-name{display:block}
.title-tagline{color:#fff8df;font-size:clamp(17px,1.55cqw,32px);font-weight:700;text-shadow:3px 3px 0 #082539,5px 5px 0 #071a27}
.round-choices{display:flex;gap:.35cqw;margin-top:1.05cqw!important;padding:.25cqw;border:3px solid var(--black);background:#33364c;box-shadow:inset 2px 2px 0 #828697,inset -2px -2px 0 #1c1e2d,4px 4px 0 var(--black)}.round-choices[hidden]{display:none}.round-option{min-width:8.7cqw;min-height:3.1cqw;padding:.5cqw .9cqw;border:2px solid var(--black);background:#565a73;color:var(--ivory);font-size:clamp(16px,1.25cqw,27px);font-weight:700;text-shadow:1px 1px 0 var(--black);box-shadow:inset 2px 2px 0 #999cad,inset -2px -2px 0 #303449}.round-option.selected,.round-option:hover{background:#ddd7ad;color:#1b2134;text-shadow:none;box-shadow:inset 2px 2px 0 #fff5d9,inset -2px -2px 0 #817c5d}.round-option.selected::before{content:'▶ ';font-size:.7em;color:#d11323}
.start-button{min-width:29cqw;min-height:4cqw;margin-top:.35cqw!important;padding:.7cqw 1.5cqw;border:3px solid var(--black);background:#be3539;color:#fff7df;font-size:clamp(22px,1.82cqw,38px);font-weight:700;letter-spacing:.015em;text-shadow:2px 2px 0 #671f27;box-shadow:inset 3px 3px 0 #ec8d78,inset -3px -3px 0 #751f2d,5px 5px 0 var(--black)}.start-button::before{content:'▶';margin-right:.45em;color:var(--lemon);font-size:.65em}.start-button:hover{background:#d14444}.start-button:active{box-shadow:inset 3px 3px 0 #681f2a;transform:translate(3px,3px)}
.title-sound-button{padding:.28cqw .55cqw;border:2px solid var(--black);background:#565a73;color:#fff7df;font-size:clamp(13px,1.05cqw,21px);font-weight:700;box-shadow:inset 2px 2px 0 #9295a4,inset -2px -2px 0 #262a3c,2px 2px 0 var(--black)}.title-sound-button:hover{color:var(--lemon)}
.title-disclaimer{left:50%;bottom:1.8%;transform:translateX(-50%);width:max-content;max-width:96%;text-align:center;color:#f9f2da;font-size:clamp(10px,.8cqw,16px);line-height:1.2;text-shadow:2px 2px 0 #071a2c,0 0 5px #071a2c}
.result-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;background:rgba(4,7,16,.82);font-variation-settings:'ELSH' 90}.result-screen>p,.result-screen>h2{margin:0}#resultKicker{padding:.4cqw 1.3cqw;border:3px solid var(--black);background:var(--slate);box-shadow:inset 2px 2px 0 #8d91a3;font-size:clamp(12px,1cqw,20px)}#resultTitle{max-width:94%;color:var(--lemon);font-size:clamp(38px,5cqw,95px);line-height:1;font-weight:700;text-shadow:4px 4px 0 #07101d}#resultScore{font-size:clamp(17px,1.5cqw,30px)}#continueButton{margin-top:.7cqw;padding:.55cqw 1cqw;border:3px solid var(--black);background:#bd363b;color:var(--ivory);box-shadow:inset 2px 2px 0 #eb887b,inset -2px -2px 0 #742631,4px 4px 0 var(--black);font-size:clamp(15px,1.2cqw,23px)}
.leaderboard-screen{position:absolute;inset:0;z-index:6;display:grid;place-items:center;overflow:auto;padding:2cqw;background:rgba(6,9,20,.94);font-variation-settings:'ELSH' 90}
.leaderboard-screen[hidden],#leaderboardForm[hidden]{display:none}
.leaderboard-panel{width:min(82cqw,1050px);max-width:100%;padding:2.3cqw 2.7cqw 1.8cqw;border:4px solid #0b0d18;background:#42455f;box-shadow:inset 4px 4px 0 #9195a8,inset -4px -4px 0 #232638,7px 7px 0 #05060d;text-align:left}
.leaderboard-panel p,.leaderboard-panel h2{margin:0}
.leaderboard-kicker{color:var(--lemon);font-size:clamp(12px,1.05cqw,20px);letter-spacing:.13em}
#leaderboardTitle{margin:.15em 0 0;color:var(--ivory);font-size:clamp(28px,3.4cqw,62px);line-height:1;letter-spacing:-.035em;text-shadow:3px 3px 0 #151827}
.leaderboard-week{margin:.35em 0 1em!important;color:#d6d8dc;font-size:clamp(12px,1.04cqw,19px)}
.leaderboard-columns{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:2.5cqw;padding:1.3cqw 0;border-top:3px solid #1b1e31;border-bottom:3px solid #1b1e31}
.leaderboard-entry{display:flex;flex-direction:column;gap:1.05cqw;min-width:0}
.leaderboard-score{color:var(--lemon);font-size:clamp(17px,1.75cqw,32px);font-weight:700;line-height:1.1}
#leaderboardForm label{display:block;margin-bottom:.45em;font-size:clamp(12px,1.05cqw,20px)}
.leaderboard-form-row{display:flex;gap:.65cqw}
#initialsInput{width:5.5em;min-width:0;padding:.38em .45em;border:3px solid #111322;border-radius:0;background:#e6dfc4;color:#202336;font:700 clamp(20px,2cqw,36px)/1 var(--font);letter-spacing:.1em;text-align:center;text-transform:uppercase;box-shadow:inset 3px 3px 0 #a5a188}
#initialsInput::placeholder{color:#949088}
#submitScoreButton,.leaderboard-done{padding:.5em .85em;border:3px solid #0a0b16;border-radius:0;background:#b93539;color:var(--ivory);font:700 clamp(13px,1.08cqw,21px)/1 var(--font);white-space:nowrap;box-shadow:inset 2px 2px 0 #e27b70,inset -2px -2px 0 #76262d,3px 3px 0 #080a10}
#submitScoreButton:hover,.leaderboard-done:hover{background:#d04243}
#submitScoreButton:disabled{opacity:.6;cursor:wait}
.leaderboard-message{min-height:2em;color:#d9d8df;font-size:clamp(11px,.95cqw,18px);line-height:1.2}
.leaderboard-rankings{min-width:0}
.leaderboard-table-head,.leaderboard-rankings li{display:grid;grid-template-columns:1fr 1.55fr 1.3fr 1fr;align-items:center;gap:.35em}
.leaderboard-table-head{padding:0 .5em .4em;border-bottom:2px solid #a6a9b7;color:var(--lemon);font-size:clamp(10px,.82cqw,16px)}
#leaderboardList{display:block;max-height:21cqw;min-height:3cqw;overflow:auto;margin:0;padding:0;list-style:none;scrollbar-color:#c7bd8c #292d3e}
.leaderboard-rankings li{padding:.28em .5em;font-size:clamp(12px,1.07cqw,20px);line-height:1.1}
.leaderboard-rankings li:nth-child(even){background:#34374f}
.leaderboard-rankings li.leaderboard-mine{background:#82723e;color:#fff6ce}
.leaderboard-rankings li.leaderboard-empty{display:block;padding:1em .5em;color:#d9d8df}
.leaderboard-done{display:block;margin:1.25cqw 0 0 auto;background:#575b75;box-shadow:inset 2px 2px 0 #989baa,inset -2px -2px 0 #2b2e43,3px 3px 0 #080a10}
.leaderboard-done:hover{background:#71748c}
@media(min-width:721px){
  .text-button,.help summary{font-size:clamp(13.75px,1.125cqw,21.25px)}
  .help-copy{font-size:clamp(12.5px,.9375cqw,17.5px)}
  .course-readout{font-size:clamp(15px,1.3125cqw,26.25px)}
  .wind-caption strong{font-size:clamp(17.5px,1.475cqw,30px)}
  .wind-caption span{font-size:clamp(12.5px,.925cqw,18.75px)}
  .shot-info span,.shot-info small{font-size:clamp(11.25px,.8125cqw,16.25px)}
  .shot-info strong{font-size:clamp(16.25px,1.4125cqw,28.75px)}
  .power-label{font-size:clamp(13.75px,.9125cqw,18.75px)}
  .power-label strong{font-size:clamp(18.75px,1.375cqw,28.75px)}
  #powerPrompt{width:17cqw;font-size:clamp(12.5px,.9cqw,18.75px)}
  .control-pair span{font-size:clamp(12.5px,.9cqw,18.75px)}
  .controls button{font-size:clamp(13.75px,1.125cqw,22.5px)}
  .control-pair button{font-size:clamp(17.5px,1.4125cqw,27.5px)}
  #resultKicker{font-size:clamp(15px,1.25cqw,25px)}
  #resultTitle{font-size:clamp(47.5px,6.25cqw,118.75px)}
  #resultScore{font-size:clamp(21.25px,1.875cqw,37.5px)}
  #continueButton{font-size:clamp(18.75px,1.5cqw,28.75px)}
}
@media(max-width:720px){
  .cabinet{display:block;padding:5px}
  .screen-frame:not([data-screen='title']){width:100%;height:calc(100vw + 126px);aspect-ratio:auto;overflow:hidden}
  .screen-frame:not([data-screen='title']) .canvas-mask{top:0;right:0;bottom:auto;left:0;height:calc(100% - 70px)}
  .screen-frame:not([data-screen='title']) #game,.screen-frame:not([data-screen='title']) .blimp-overlay{position:absolute;left:-50%;top:0;width:200%;height:100%}
  .screen-frame[data-screen='title']{width:100%;height:max(720px,calc(100dvh - 10px));aspect-ratio:auto}
  .topbar{top:6px;right:6px}.top-actions{gap:3px}.text-button,.help summary{min-height:25px;padding:3px 5px;border-width:1px;font-size:9px;box-shadow:inset 1px 1px 0 #9295a4,1px 1px 0 var(--black)}
  .help-copy{z-index:9;width:min(92vw,300px);min-width:230px;font-size:10px}
  .course-readout{top:7px;left:7px;font-size:10px}.distance-label{margin-top:1px}.wind-widget{top:42px;right:7px;padding:2px;gap:3px;border-width:1px}.wind-dial{width:22px;height:22px;min-width:22px;min-height:22px;border-width:1px}.wind-caption strong{font-size:12px}.wind-caption span{font-size:7px}
  .playbar{height:70px;padding:9px 6px;border-top:4px solid #9da2af;gap:4px}.shot-info{width:66px;flex:none;align-items:center;padding:4px}.shot-info span{display:none}.shot-info strong{font-size:11px}.shot-info small{display:none}
  .power-widget{left:auto;right:5px;bottom:calc(100% + 9px);width:82px}.power-label{gap:3px;font-size:9px}.power-label strong{font-size:12px}.power-dial{width:70px;height:70px;min-width:70px;min-height:70px}#powerPrompt{left:auto;right:80px;top:22px;width:auto;font-size:9px;text-align:right}
  .controls{flex:1;gap:3px;justify-content:stretch}.control-pair{flex:1;justify-content:space-around;padding-left:2px}.control-pair span{font-size:8px;margin-right:1px}.controls button{padding:4px 5px;border-width:2px;font-size:10px}.control-pair button{font-size:16px;padding:4px 5px}.controls .club-button{min-width:61px}.controls .swing-button{min-width:104px;flex:1}
  .title-screen{background:#33364c}.title-art{width:160%;left:-18%;border-bottom:4px solid var(--black)}.title-stack{left:50%;top:max(43%,calc(90vw));width:96%;gap:14px}h1{font-size:clamp(38px,11vw,60px);text-shadow:2px 2px 0 #173855,4px 4px 0 #071d30}.title-tagline{font-size:clamp(13px,3.5vw,18px);text-shadow:2px 2px 0 #111627}.round-choices{gap:4px!important;margin-top:10px!important;padding:4px;border-width:2px}.round-option{min-width:108px;min-height:42px;padding:7px 9px;border-width:2px;font-size:15px}.start-button{min-width:260px;min-height:53px;margin-top:5px!important;padding:9px 12px;border-width:2px;font-size:17px;box-shadow:inset 2px 2px 0 #ec8d78,3px 3px 0 var(--black)}.title-sound-button{font-size:12px;padding:5px 9px}.title-disclaimer{left:5%;right:5%;bottom:4%;width:auto;max-width:none;transform:none;font-size:9px;line-height:1.35}
  #resultTitle{font-size:clamp(34px,10vw,48px)}
  .screen-frame[data-screen='leaderboard']{height:max(680px,calc(100dvh - 10px))}
  .leaderboard-screen{display:block;padding:16px 12px}
  .leaderboard-panel{width:100%;padding:18px 17px 16px;border-width:3px;box-shadow:inset 2px 2px 0 #9195a8,inset -2px -2px 0 #232638,4px 4px 0 #05060d}
  #leaderboardTitle{font-size:clamp(29px,8vw,40px)}
  .leaderboard-week{margin-bottom:12px!important}
  .leaderboard-columns{display:block;padding:12px 0}
  .leaderboard-entry{gap:8px;margin-bottom:14px}
  .leaderboard-form-row{gap:8px}
  #initialsInput{width:92px;font-size:25px}
  #submitScoreButton{flex:1;font-size:14px}
  .leaderboard-message{min-height:1.2em}
  .leaderboard-table-head{font-size:10px}
  .leaderboard-rankings li{font-size:14px;padding:5px}
  #leaderboardList{max-height:270px}
  .leaderboard-done{margin-top:14px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.title-layer{will-change:auto}.layer-swan{animation:none;translate:none}}

/* Ramp Brand Library palette: dark surfaces, white type, selective Solar. */
:root{--ivory:#fff;--solar:#e4f222;--lemon:var(--solar);--slate:#3d3b37;--slate-light:#6d6a65;--slate-dark:#1a1919;--black:#0c0a08;--blue:#5683d2;--red:#e96516}
html,body{background:var(--black)}
button:focus-visible,.help summary:focus-visible,a:focus-visible{outline-color:var(--lemon)}
.text-button,.help summary{background:#3d3b37;color:#fff;box-shadow:inset 2px 2px 0 #86837e,inset -2px -2px 0 #1a1919,2px 2px 0 var(--black)}
.text-button:hover,.help summary:hover{background:#54524d;color:#fff}
.help-copy{background:#3d3b37;color:#fff;box-shadow:inset 2px 2px 0 #86837e,inset -2px -2px 0 #1a1919,4px 4px 0 var(--black)}
.help-copy a{color:#fff;text-decoration-color:var(--lemon);text-decoration-thickness:2px;text-underline-offset:3px}
.course-readout{color:#fff}.hole-label,.hole-label span,.distance-label,.strokes-label,.strokes-label strong{color:#fff}
.distance-label{border-left:.18cqw solid var(--lemon);padding-left:.3cqw}
.wind-widget{background:#3d3b37;box-shadow:inset 2px 2px 0 #86837e,inset -2px -2px 0 #1a1919,2px 2px 0 var(--black)}
.wind-dial{background:#1a1919;box-shadow:inset 1px 1px 0 #54524d}.wind-dial svg{stroke:var(--lemon)}
.playbar{background:#1a1919;background-image:none;border-top-color:#6d6a65;box-shadow:inset 0 .18cqw 0 #3d3b37,0 -.16cqw 0 var(--black)}
.playbar::before{background:var(--lemon)}
.shot-info,.control-pair{background:#3d3b37;box-shadow:inset 2px 2px 0 #86837e,inset -2px -2px 0 #1a1919}
.shot-info span,.shot-info strong,.control-pair span{color:#fff}
.power-label,#powerPrompt{color:#fff}.power-label strong{color:var(--lemon)}.power-dial{filter:drop-shadow(2px 3px 0 var(--black))}
.controls button{background:#54524d;color:#fff;box-shadow:inset 2px 2px 0 #a09e98,inset -2px -2px 0 #1a1919}
.controls button:hover{background:#6d6a65;color:#fff}.controls button:active,.controls button.pressed{background:#3d3b37;color:#fff;box-shadow:inset 2px 2px 0 var(--black)}
.control-pair{border-left:.2cqw solid var(--lemon)}
.controls .swing-button{background:#3d3b37;color:#fff;border-bottom-color:var(--lemon)}.controls .swing-button:hover{background:#54524d}
h1{color:#fff;text-shadow:4px 4px 0 #3d3b37,8px 8px 0 #1a1919,12px 12px 0 var(--black)}

.title-tagline{color:#fff;text-shadow:3px 3px 0 #1a1919,5px 5px 0 var(--black)}
.round-choices{background:#1a1919;box-shadow:inset 2px 2px 0 #54524d,inset -2px -2px 0 var(--black),4px 4px 0 var(--black)}
.round-option{background:#3d3b37;color:#fff;box-shadow:inset 2px 2px 0 #86837e,inset -2px -2px 0 #1a1919}
.round-option.selected,.round-option:hover{background:var(--lemon);color:var(--black);box-shadow:inset 2px 2px 0 #f5ff78,inset -2px -2px 0 #6d6a65;text-shadow:none}
.round-option.selected::before{color:var(--black)}
.start-button{background:#1a1919;color:#fff;border-bottom-color:var(--lemon);text-shadow:2px 2px 0 var(--black);box-shadow:inset 3px 3px 0 #6d6a65,inset -3px -3px 0 var(--black),5px 5px 0 var(--black)}
.start-button::before{color:var(--lemon)}.start-button:hover{background:#3d3b37}.start-button:active{box-shadow:inset 3px 3px 0 var(--black);transform:translate(3px,3px)}
.title-sound-button{background:#3d3b37;color:#fff;box-shadow:inset 2px 2px 0 #86837e,inset -2px -2px 0 #1a1919,2px 2px 0 var(--black)}.title-sound-button:hover{color:#fff;background:#54524d}
.title-disclaimer{color:#fff;text-shadow:2px 2px 0 var(--black),0 0 5px var(--black)}
.result-screen{background:rgba(12,10,8,.88)}#resultKicker{background:#3d3b37;color:#fff;box-shadow:inset 2px 2px 0 #86837e;border-bottom-color:var(--lemon)}
#resultTitle{color:#fff;text-shadow:4px 4px 0 var(--black)}#resultScore{color:#fff}
#continueButton{background:#1a1919;color:#fff;border-bottom-color:var(--lemon);box-shadow:inset 2px 2px 0 #6d6a65,inset -2px -2px 0 var(--black),4px 4px 0 var(--black)}#continueButton:hover{background:#3d3b37}
.leaderboard-screen{background:rgba(12,10,8,.95)}.leaderboard-panel{background:#3d3b37;border-color:var(--black);border-top-color:var(--lemon);box-shadow:inset 4px 4px 0 #86837e,inset -4px -4px 0 #1a1919,7px 7px 0 var(--black)}
.leaderboard-kicker,.leaderboard-score,.leaderboard-table-head,#leaderboardTitle{color:#fff}#leaderboardTitle{text-shadow:3px 3px 0 var(--black)}
.leaderboard-kicker::before{content:'■';margin-right:.55em;color:var(--lemon)}
.leaderboard-week,.leaderboard-message,.leaderboard-rankings li.leaderboard-empty{color:#d7d4ce}
.leaderboard-columns{border-color:#1a1919}#initialsInput{background:#f9f8f5;color:var(--black);border-color:var(--black);box-shadow:inset 3px 3px 0 #bbb8b3}#initialsInput::placeholder{color:#86837e}
#submitScoreButton,.leaderboard-done{background:#1a1919;color:#fff;border-color:var(--black);border-bottom-color:var(--lemon);box-shadow:inset 2px 2px 0 #6d6a65,inset -2px -2px 0 var(--black),3px 3px 0 var(--black)}
#submitScoreButton:hover,.leaderboard-done:hover{background:#54524d}
.leaderboard-table-head{border-bottom-color:#a09e98}#leaderboardList{scrollbar-color:#86837e #1a1919}
.leaderboard-rankings li:nth-child(even){background:#54524d}.leaderboard-rankings li.leaderboard-mine{background:#1a1919;color:#fff;box-shadow:inset 4px 0 0 var(--lemon)}
@media(max-width:720px){
  .title-screen{background:#1a1919}
  h1{text-shadow:2px 2px 0 #3d3b37,4px 4px 0 var(--black)}
  
  .start-button{box-shadow:inset 2px 2px 0 #6d6a65,3px 3px 0 var(--black)}
  .playbar{border-top-color:#6d6a65}
  .text-button,.help summary{box-shadow:inset 1px 1px 0 #86837e,1px 1px 0 var(--black)}
  .leaderboard-panel{box-shadow:inset 2px 2px 0 #86837e,inset -2px -2px 0 #1a1919,4px 4px 0 var(--black)}
}

/* The level screen borrows the simple grass field and cursor of a 16-bit menu. */
.menu-screen{position:absolute;inset:0;z-index:6;display:grid;place-items:center;overflow:hidden;background-color:#176027;background-image:repeating-linear-gradient(0deg,transparent 0 4px,rgba(8,52,18,.24) 4px 6px),repeating-linear-gradient(90deg,transparent 0 6px,rgba(87,155,43,.2) 6px 8px),repeating-linear-gradient(135deg,transparent 0 15px,rgba(10,65,21,.18) 15px 17px);border:7px solid #082b16;box-shadow:inset 4px 4px 0 #4b9a40,inset -4px -4px 0 #0a3717;color:#fff}
.menu-screen[hidden]{display:none}
.menu-screen::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.48;background-image:radial-gradient(#b9d26a 1px,transparent 1px),radial-gradient(#092f16 1px,transparent 1px);background-size:11px 13px,17px 19px;background-position:3px 5px,8px 2px}
.menu-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(68%,680px);gap:.65cqw;text-align:center;text-shadow:3px 3px 0 #071c0d,-1px -1px 0 #071c0d,1px -1px 0 #071c0d,-1px 1px 0 #071c0d}
.menu-content h2{margin:0 0 .25cqw;font-size:clamp(38px,4.5cqw,78px);line-height:1;letter-spacing:.045em;color:#fff;border-bottom:4px solid #e4f222;padding-bottom:.15em;white-space:nowrap}
.difficulty-choices{display:flex;flex-direction:column;gap:.25cqw;width:min(100%,470px)}
.difficulty-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.7em;width:100%;min-height:3.4cqw;padding:.35cqw .7cqw .35cqw 1.65cqw;border:0;background:transparent;color:#fff;text-align:left;text-shadow:3px 3px 0 #08200d,-1px -1px 0 #08200d,1px -1px 0 #08200d,-1px 1px 0 #08200d}
.difficulty-option strong{font-size:clamp(25px,2.5cqw,46px);line-height:1}.difficulty-option span{font-size:clamp(12px,.95cqw,18px);line-height:1.2;white-space:nowrap}
.difficulty-option.selected::before{content:'▶';position:absolute;left:.12cqw;top:50%;transform:translateY(-50%);color:#e4f222;font-size:clamp(20px,2cqw,38px);text-shadow:2px 2px 0 #08200d}
.difficulty-option:hover,.difficulty-option:focus-visible{background:rgba(6,37,16,.5)}
.menu-label{margin:.45cqw 0 0;color:#e4f222;font-size:clamp(13px,1.08cqw,20px);font-weight:700;letter-spacing:.1em}
.menu-screen .round-choices{margin:0!important;padding:.2cqw;border-color:#082b16;background:#174a25;box-shadow:inset 2px 2px 0 #4b9a40,3px 3px 0 #082b16}
.menu-screen .round-option{min-height:2.65cqw;min-width:7.8cqw;padding:.3cqw .7cqw;font-size:clamp(16px,1.3cqw,25px);background:#123d21;box-shadow:inset 2px 2px 0 #3c8840,inset -2px -2px 0 #092913}
.menu-screen .round-option.selected{background:#e4f222;color:#0c0a08;box-shadow:inset 2px 2px 0 #f6ff89,inset -2px -2px 0 #8d9b17}
.menu-start-button{margin-top:.35cqw;padding:.4cqw 1.2cqw;border:3px solid #082b16;border-bottom-color:#e4f222;background:#111f18;color:#fff;font-size:clamp(18px,1.55cqw,29px);font-weight:700;text-shadow:2px 2px 0 #06130a;box-shadow:inset 2px 2px 0 #537b59,3px 3px 0 #06170b}
.menu-start-button:hover{background:#244a2d}.menu-hint{margin:0;color:#f3f6db;font-size:clamp(11px,.78cqw,15px)}
.menu-golf-ball{position:absolute;width:5.5cqw;height:5.5cqw;background:url('assets/game-art/ui-golf-ball.png?v=55') center/contain no-repeat;filter:drop-shadow(5px 6px 0 #0b3618);image-rendering:pixelated}
.ball-one{left:7%;top:12%}.ball-two{right:9%;top:13%;width:3.8cqw;height:3.8cqw}.ball-three{right:16%;bottom:7%;width:5cqw;height:5cqw}
.cancel-button{position:absolute;left:100%;top:5cqw;padding:.35cqw .55cqw;border:2px solid #0c0a08;border-bottom-color:#e4f222;background:#1a1919;color:#fff;font-size:clamp(11px,.75cqw,15px);white-space:nowrap;box-shadow:inset 2px 2px 0 #6d6a65,2px 2px 0 #0c0a08;pointer-events:auto}
.cancel-button[hidden]{display:none}.cancel-button:hover{background:#3d3b37}
@media(max-width:720px){
  .screen-frame[data-screen='menu']{width:100%;height:max(720px,calc(100dvh - 10px));aspect-ratio:auto}
  .menu-screen{border-width:4px}.menu-content{width:92%;gap:7px}.menu-content h2{font-size:clamp(29px,8vw,44px);border-bottom-width:3px}
  .difficulty-choices{width:min(96%,390px);gap:4px}.difficulty-option{min-height:48px;padding:4px 4px 4px 32px;gap:6px}.difficulty-option strong{font-size:clamp(22px,6vw,30px)}.difficulty-option span{font-size:clamp(9px,2.55vw,12px)}
  .menu-label{margin:5px 0 0;font-size:12px}.menu-screen .round-choices{gap:5px!important;padding:4px}.menu-screen .round-option{min-width:110px;min-height:40px;font-size:16px;padding:5px}
  .menu-start-button{min-height:44px;padding:8px 10px;font-size:clamp(14px,4vw,18px)}.menu-hint{font-size:10px}.menu-golf-ball{width:32px;height:32px}.ball-two{width:25px;height:25px}.ball-three{width:28px;height:28px}
  /* Reserve two control rows below the course, preserving the canvas height. */
  .playbar{height:144px;display:grid;grid-template-rows:50px 58px;row-gap:12px;padding:10px 6px}
  .screen-frame:not([data-screen='title']):not([data-screen='menu']) .canvas-mask{height:calc(100% - 144px)}
  .shot-info{position:absolute;left:6px;bottom:calc(100% + 8px);width:88px;height:31px;z-index:2}
  .controls{grid-row:2;width:100%;margin:0;gap:4px}.control-pair{flex:1.15;min-width:92px;padding-left:3px}.control-pair span{margin-right:2px;font-size:9px}.control-pair button{flex:1;min-width:31px;padding:4px 2px;font-size:18px}
  .controls .club-button{min-width:82px;padding:4px 3px;font-size:11px}.controls .swing-button{min-width:105px;flex:1;padding:4px 3px;font-size:10px}
  .cancel-button{left:auto;right:0;top:calc(100% + 19px);z-index:3;min-width:100px;min-height:50px;padding:6px 8px;font-size:11px}
  .power-widget.charging #powerPrompt{display:none}
}

/* The title prompt is type, while its full area remains tappable. */
.start-button,.start-button:hover,.start-button:active{
  display:flex;flex-direction:column;align-items:center;gap:.1cqw;
  min-width:0;min-height:0;margin-top:.35cqw!important;padding:.18cqw .65cqw;
  border:0;background:transparent;box-shadow:none;color:#fff;
  font-family:var(--font);font-weight:700;text-align:center;
}
.start-button::before{display:none}
.start-label{font-size:clamp(29px,2.45cqw,51px);line-height:1;letter-spacing:.04em;text-shadow:3px 3px 0 #173855,6px 6px 0 #071d30}
.start-key{font-size:clamp(14px,1.12cqw,23px);line-height:1.15;letter-spacing:.04em;color:#fff;text-shadow:2px 2px 0 #071d30}
.start-button:hover .start-label,.start-button:focus-visible .start-label{color:var(--lemon)}
.start-button:active{transform:translateY(2px)}

/* Club art, name, and selector share one place in the control rail. */
.club-module{display:flex;align-items:stretch;width:19cqw;min-width:0;flex:none;pointer-events:auto}
.club-module .shot-info{display:flex;flex-direction:row;align-items:center;gap:.35cqw;flex:1;width:auto;min-width:0;padding:.12cqw .35cqw}
.club-art{display:block;width:clamp(25px,2.85cqw,48px);height:clamp(25px,2.85cqw,48px);flex:none;object-fit:contain;image-rendering:pixelated}
.club-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.club-copy strong{overflow:hidden;text-overflow:clip}
.club-module .club-button{width:3.1cqw;min-width:29px;padding:0;border:2px solid var(--black);border-left:0;background:#54524d;color:#fff;font:700 clamp(14px,1.15cqw,23px)/1 var(--font);text-shadow:1px 1px 0 var(--black);box-shadow:inset 2px 2px 0 #a09e98,inset -2px -2px 0 #1a1919;cursor:pointer;touch-action:none}
.club-module .club-button:hover{background:#6d6a65;color:var(--lemon)}
.club-module .club-button:active{background:#3d3b37;box-shadow:inset 2px 2px 0 var(--black)}

@media(max-width:720px){
  .start-button,.start-button:hover,.start-button:active{margin-top:5px!important;padding:4px 12px}
  .start-label{font-size:clamp(25px,7vw,37px);text-shadow:2px 2px 0 #173855,4px 4px 0 #071d30}
  .start-key{font-size:clamp(13px,3.7vw,17px)}
  .club-module{position:static;grid-row:1;width:174px;height:50px;z-index:2}
  .club-module .shot-info{position:static;width:auto;height:auto;padding:3px 5px;gap:5px}
  .club-art{width:34px;height:34px}
  .club-copy span{display:block;font-size:8px;line-height:1}
  .club-copy strong{font-size:13px;line-height:1.08}
  .club-module .club-button{width:36px;min-width:36px;font-size:18px}
}

/* Hole completion is a line of type, with no framed badge. */
#resultKicker{padding:0;border:0;background:transparent;box-shadow:none;color:#fff;font-size:clamp(18px,1.4cqw,30px);font-weight:700;letter-spacing:.08em;text-shadow:2px 2px 0 var(--black)}

/* A small title link opens the sound and art credits as their own screen. */
.title-bottom{left:50%;bottom:1.3%;transform:translateX(-50%);width:96%;display:flex;flex-direction:column;align-items:center;gap:.35cqw}
.title-bottom .title-disclaimer{position:static;left:auto;bottom:auto;transform:none;width:auto;max-width:100%;margin:0}
.credits-link{border:0;background:transparent;color:#fff;font:700 clamp(11px,.8cqw,16px)/1 var(--font);text-decoration:underline;text-decoration-color:var(--lemon);text-underline-offset:3px;text-shadow:2px 2px 0 var(--black)}
.credits-link:hover{color:var(--lemon)}
.credits-screen{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow:auto;padding:3cqw;background:rgba(12,10,8,.94)}
.credits-screen[hidden]{display:none}
.credits-panel{width:min(76cqw,820px);max-width:100%;padding:2cqw 2.5cqw;border:4px solid var(--black);border-top-color:var(--lemon);background:#3d3b37;box-shadow:inset 3px 3px 0 #86837e,inset -3px -3px 0 #1a1919,6px 6px 0 var(--black);font-size:clamp(13px,1.12cqw,21px);line-height:1.3}
.credits-panel h2{margin:0 0 .5em;color:#fff;font-size:clamp(30px,3.6cqw,64px);line-height:1}
.credits-panel p{margin:.4em 0}.credits-panel a{color:#fff;text-decoration-color:var(--lemon);text-decoration-thickness:2px;text-underline-offset:3px}
.credits-panel a.credits-glass-link{color:var(--solar)}
#creditsClose{margin-top:1.15em;padding:.45em .8em;border:2px solid var(--black);border-bottom-color:var(--lemon);background:#1a1919;color:#fff;font-weight:700;font-size:1em;box-shadow:inset 2px 2px 0 #6d6a65,3px 3px 0 var(--black)}
@media(max-width:720px){
  .title-bottom{bottom:2%;gap:9px}.title-bottom .title-disclaimer{font-size:9px}
  .credits-link{font-size:13px}
  .credits-screen{padding:15px}.credits-panel{width:100%;padding:20px 17px;font-size:13px}.credits-panel h2{font-size:36px}
}

/* The public site currently has a final score screen, without score posting. */
.leaderboard-panel{width:min(65cqw,760px);text-align:center}
.leaderboard-columns{display:block}
.leaderboard-entry{align-items:center}
.leaderboard-rankings[hidden]{display:none}
@media(max-width:720px){.leaderboard-panel{width:100%}}