/* Instalign Golf: the play screen. The HUD is HTML laid lightly over the canvas. */
.game{position:relative;width:100%;height:100vh;height:100dvh;min-height:300px;overflow:hidden;background:#F2C48D;color:#2E2318;font-family:Figtree,system-ui,sans-serif;user-select:none;-webkit-user-select:none}
.gcanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gcanvas[hidden]{display:none}
.touch{position:absolute;inset:0;touch-action:none;cursor:grab}
.gload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#F6C38B,#FBE3B8 55%,#86A845 55%,#6E8F3A);text-align:center;z-index:5}
.gload[hidden]{display:none}.gload-name{font:800 2rem Nunito,sans-serif;margin:0}.gload p{margin:.2rem;background:rgba(255,247,234,.86);padding:.3rem 1rem;border-radius:999px}
.mapnote{position:absolute;left:50%;top:4.6rem;transform:translateX(-50%);z-index:7;margin:0;width:max-content;max-width:min(34rem,92%);background:#FFF7EA;padding:.6rem .9rem;border-radius:14px;font-size:.95rem;box-shadow:0 6px 20px rgba(46,35,24,.3);text-align:center;border:2px solid #A9501A}
.mapnote[hidden]{display:none}.mapnote p{margin:0}.note-btns{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.5rem!important}
.note-btns button{min-height:44px;padding:.3rem .9rem;border-radius:999px;border:2px solid #3F6B3A;background:#3F6B3A;color:#fff;font:700 .9rem Nunito,sans-serif;cursor:pointer}.note-btns button[hidden]{display:none}
.leave{position:absolute;left:-999px;bottom:0;background:#FFF7EA;color:#2E2318;padding:.5rem .9rem;border-radius:10px;font-weight:700;pointer-events:auto;z-index:9}
.leave:focus{left:50%;transform:translateX(-50%);bottom:50%}
/* PC5: the ?fps=1 counter sits under the small map, where nothing else is, on every screen size */
.fps{position:absolute;left:max(.6rem,env(safe-area-inset-left));top:calc(7.6rem + 219px);z-index:6;margin:0;background:#2E2318;color:#FFF7EA;font:600 .8rem/1.2 ui-monospace,monospace;padding:.2rem .5rem;border-radius:6px;white-space:nowrap}
.fps[hidden]{display:none}
.hud{position:absolute;inset:0;pointer-events:none;z-index:3;padding:max(.6rem,env(safe-area-inset-top)) max(.6rem,env(safe-area-inset-right)) max(.6rem,env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left))}
.hud[hidden]{display:none}
.hud button,.hud input,.hud .minimap,.hud .ctl{pointer-events:auto}
.panel{background:rgba(255,247,234,.93);border-radius:16px;box-shadow:0 4px 16px rgba(46,35,24,.18);padding:.5rem .8rem}
.hud p{margin:0}
.hud-tl{position:absolute;left:max(.6rem,env(safe-area-inset-left));top:max(.6rem,env(safe-area-inset-top));min-width:9.5rem}
.h-hole{font:800 1.1rem/1.2 Nunito,sans-serif;display:flex;align-items:center;gap:.45rem}
.h-num{display:inline-flex;width:1.7em;height:1.7em;border-radius:50%;background:#3F6B3A;color:#fff;align-items:center;justify-content:center;font-size:.95em}
.h-sub{font-size:.88rem;color:#5d4d3c}.h-pin b{font:800 1.7rem/1.1 Nunito,sans-serif;font-variant-numeric:tabular-nums}.h-pin{font-size:.9rem;color:#5d4d3c}
.hud-tr{position:absolute;right:max(.6rem,env(safe-area-inset-right));top:max(.6rem,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;max-width:62%}
.h-score{display:flex;align-items:baseline;gap:.35rem}.h-score b{font:800 1.35rem/1 Nunito,sans-serif;font-variant-numeric:tabular-nums}.lbl{font-size:.78rem;color:#5d4d3c;text-transform:uppercase;letter-spacing:.04em}.lbl2{margin-left:.5rem}
.h-wind{display:flex;align-items:center;gap:.5rem}.h-wind svg{width:38px;height:38px;transition:transform .4s}.wa-ring{fill:#DCEBF0;stroke:#2E2318;stroke-width:1.5}.wa-head{fill:#A9501A}.wa-tail{stroke:#A9501A;stroke-width:3.4;stroke-linecap:round}
.h-windtxt b{font:800 1.25rem/1 Nunito,sans-serif}
.h-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem}
.h-btns button{min-width:44px;min-height:44px;padding:.3rem .65rem;border-radius:999px;border:0;background:rgba(255,247,234,.93);color:#2E2318;font:700 .86rem Nunito,sans-serif;box-shadow:0 3px 10px rgba(46,35,24,.18);cursor:pointer}
.h-btns button[aria-pressed=true]{background:#3F6B3A;color:#fff}.h-btns button[hidden]{display:none}
.minimap{position:absolute;left:max(.6rem,env(safe-area-inset-left));top:7.6rem;width:150px;height:205px;border-radius:14px;box-shadow:0 4px 16px rgba(46,35,24,.25);border:3px solid rgba(255,247,234,.93);cursor:crosshair;background:#5F7F35}
.toast{position:absolute;left:50%;top:38%;transform:translateX(-50%);background:rgba(46,35,24,.86);color:#FFF7EA;font:700 1.02rem Nunito,sans-serif;padding:.5rem 1rem;border-radius:999px;max-width:92%;text-align:center}
.caption{position:absolute;left:50%;top:47%;transform:translateX(-50%);background:#2E2318;color:#fff;padding:.2rem .7rem;border-radius:6px;font-size:.95rem}
/* while putting, the shot message sits above the putt, not over the ball and the hole */
.hud[data-putt="1"] .toast{top:15%}
.toast[hidden],.caption[hidden]{display:none}
.hud-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 max(.6rem,env(safe-area-inset-right)) max(.6rem,env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;gap:.45rem}
.caddie{background:rgba(255,247,234,.93);padding:.4rem .95rem;border-radius:22px;font-size:1rem;line-height:1.35;box-shadow:0 3px 12px rgba(46,35,24,.18);max-width:min(100%,50rem);text-align:center}
.caddie:empty{display:none}
.caddie-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;max-width:100%}
.bold{min-height:44px;padding:.3rem 1rem;border-radius:999px;border:2px solid #A9501A;background:#FFF7EA;color:#8A3F12;font:800 .95rem Nunito,sans-serif;box-shadow:0 3px 12px rgba(46,35,24,.18);cursor:pointer;white-space:nowrap}
.bold[aria-pressed=true]{background:#A9501A;color:#fff}.bold[hidden]{display:none}
.hud[data-mode=flight] .bold,.hud[data-mode=meter] .bold{visibility:hidden}
.paper-moments{list-style:none;margin:.5rem auto;padding:0;max-width:30rem;font-size:.98rem;color:#3d3226}.paper-moments[hidden]{display:none}.paper-moments li{padding:.12rem 0}.paper-moments li::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:#FFC65C;border:1.5px solid #2E2318;margin-right:.5em;vertical-align:.08em}
.paper-pic[hidden]{display:none}.paper-pic canvas{display:block;width:100%;max-width:34rem;height:auto;margin:.6rem auto 0;border-radius:12px;border:1.5px solid #2E2318}
.menu-back{position:sticky;bottom:-1.25rem;margin:0 -1.4rem -1.2rem!important;padding:.6rem 1.4rem .8rem;background:#FFFBF0;border-top:1.5px solid #E6D9C3;text-align:center;border-radius:0 0 20px 20px}
.menu-links{margin-bottom:.8rem!important}
.ctl{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:.5rem;width:100%;max-width:60rem}
.grp{background:rgba(255,247,234,.95);border-radius:18px;box-shadow:0 4px 16px rgba(46,35,24,.2);padding:.4rem;display:flex;align-items:center;gap:.4rem}
.grp button{min-width:48px;min-height:48px;border-radius:14px;border:0;background:#DCEBF0;color:#2E2318;font:800 1.2rem Nunito,sans-serif;cursor:pointer}
.grp button:disabled{opacity:.35;cursor:default}.grp button:active{background:#FFC65C}
.grp-lbl{font:700 .9rem Nunito,sans-serif;padding:0 .2rem}
.clubname{display:flex;flex-direction:column;align-items:center;min-width:8.6rem;line-height:1.15;text-align:center}.clubname b{font:800 1.2rem Nunito,sans-serif}.clubname span{font-size:.78rem;color:#5d4d3c;max-width:12.5rem;white-space:normal}
.swingctl{flex:1 1 17rem;min-width:15rem;gap:.6rem}
.meter,.steady{flex:1}.meter[hidden],.steady[hidden]{display:none}
.m-track{position:relative;height:26px;border-radius:13px;background:#E6D9C3;overflow:hidden;border:2px solid #2E2318}
.m-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8FC27F,#FFC65C 75%,#E89055);width:0}
.m-strike{position:absolute;left:14%;top:0;bottom:0;width:4px;margin-left:-2px;background:#2E2318}
.m-strike::before{content:"";position:absolute;left:-9px;right:-9px;top:0;bottom:0;background:rgba(63,107,58,.35)}
.m-target{position:absolute;top:0;bottom:0;width:0;border-left:3px dashed #A9501A;margin-left:-1.5px}
.m-mark{position:absolute;top:-2px;bottom:-2px;width:8px;margin-left:-4px;background:#fff;border:2px solid #2E2318;border-radius:4px;left:14%}
.m-labels{display:grid;grid-template-columns:14% 1fr auto;font-size:.8rem;line-height:1.2;color:#4d3f30;margin-top:3px;column-gap:.5rem}.m-l-strike{text-align:center;overflow:visible;white-space:nowrap;font-weight:700}.m-l-power{text-align:center;white-space:nowrap}.m-l-full{text-align:right;white-space:nowrap}
.steady label{font:700 .9rem Nunito,sans-serif;display:flex;justify-content:space-between}.steady input{width:100%;min-height:32px;accent-color:#3F6B3A}
.swing{min-width:6.2rem!important;min-height:56px!important;background:#3F6B3A!important;color:#fff!important;font-size:1.25rem!important;border-radius:16px!important}
.swing:active{background:#A9501A!important}
.game :focus-visible{outline:3px solid #A9501A;outline-offset:2px}
.hud[data-mode=holeEnd] .hud-bottom,.hud[data-mode=card] .hud-bottom,.hud[data-mode=holeEnd] .h-pin,.hud[data-mode=card] .h-pin{visibility:hidden}
/* F12e: with the menu, the scorecard or the first-run question open, the top buttons underneath are not left peeping out round the paper */
.game:has(#o-menu:not([hidden])) .h-btns,.game:has(#o-card:not([hidden])) .h-btns,.game:has(#o-first:not([hidden])) .h-btns{visibility:hidden}
.menu-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .8rem!important}.menu-quick .btn{min-height:44px;padding:.35rem .9rem;font-size:.95rem}.menu-quick .btn[aria-pressed=true]{background:#3F6B3A;color:#fff}
.hud[data-mode=flight] .aimctl,.hud[data-mode=flight] .clubctl,.hud[data-mode=flight] .meter,.hud[data-mode=flight] .steady{opacity:.45}
.overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(46,35,24,.38);padding:1rem;overflow:auto}
.overlay[hidden]{display:none}
.slip,.paper{background:#FFF7EA;border-radius:20px;box-shadow:0 12px 40px rgba(46,35,24,.4);padding:1.2rem 1.4rem;max-width:34rem;width:100%;text-align:center;position:relative}
.slip h2,.paper h2{font:800 1.5rem Nunito,sans-serif;margin:.1rem 0 .6rem}
.slip-line{font:800 1.3rem/1.3 Nunito,sans-serif;margin:0 0 .4rem!important}.slip-score{color:#5d4d3c;margin:0 0 .9rem!important}
#o-hole{align-items:flex-end;background:none;pointer-events:none;padding-bottom:9.5rem}#o-hole .slip{pointer-events:auto}
.paper{max-width:46rem;background:#FFFBF0 repeating-linear-gradient(#FFFBF0 0 31px,#EFE3CB 31px 32px);border:1px solid #E6D9C3;max-height:96%;overflow:auto}
.paper-sub{font:600 1rem Figtree,sans-serif;color:#6B5A48}
.paper-lantern{position:absolute;right:16px;top:14px;width:16px;height:22px;border-radius:4px 4px 6px 6px;background:#FFC65C;box-shadow:0 0 14px 4px rgba(255,198,92,.7);border:2px solid #2E2318}
.paper-scroll{overflow-x:auto}
table.card{border-collapse:collapse;margin:0 auto;font:700 1.05rem Nunito,sans-serif;font-variant-numeric:tabular-nums;background:#FFFBF0}
table.card th,table.card td{border:1.5px solid #2E2318;padding:.3rem .5rem;min-width:2.3rem;text-align:center;height:2.4rem}
table.card thead th{background:#3F6B3A;color:#fff}table.card tbody th{text-align:left;background:#F3E6CF}
table.card .tot{background:#F3E6CF;font-weight:800}
table.card #t-card-score td{font-family:"Segoe Print","Bradley Hand",Nunito,cursive;color:#3b3b6b}
.paper-total{font:800 1.3rem Nunito,sans-serif;margin:.8rem 0 .2rem}.paper-stats{font-size:.95rem;color:#5d4d3c;margin:.2rem 0}.paper-note{font-weight:600;margin:.4rem 0;min-height:1.2em}.paper-thanks{margin:.4rem 0}
.paper-btns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.9rem 0 .2rem}
.game .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.55rem 1.2rem;border-radius:999px;border:0;background:#3F6B3A;color:#fff;font:800 1.05rem Nunito,sans-serif;text-decoration:none;cursor:pointer}
.game .btn[hidden]{display:none}.game .btn-quiet{background:none;color:#3F6B3A;border:2px solid #3F6B3A}
.game .small{font-size:.9rem;color:#6B5A48}
.menu{text-align:left}.menu-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem .8rem;align-items:center}
.menu select,.menu input[type=range]{min-height:40px;width:100%;min-width:0;font:inherit}.menu select{background:#fff;border:1.5px solid #6B5A48;border-radius:10px;padding:.3rem .5rem;color:#2E2318}
.menu-checks{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.8rem 0!important}.menu-checks label{display:inline-flex;align-items:center;gap:.4rem;min-height:40px}
.menu details{margin:.4rem 0}.menu summary{font:800 1rem Nunito,sans-serif;cursor:pointer;min-height:40px;display:flex;align-items:center}
/* V5: the Controls line is a disclosure; show that it opens */
.menu summary{gap:.5rem;list-style:none}.menu summary::-webkit-details-marker{display:none}.menu summary::before{content:"";width:0;height:0;border-left:.5em solid currentColor;border-top:.34em solid transparent;border-bottom:.34em solid transparent;transition:transform .15s}.menu details[open] summary::before{transform:rotate(90deg)}.menu summary::after{content:"(show)";font:600 .88rem Figtree,sans-serif;color:#5d4d3c}.menu details[open] summary::after{content:"(hide)"}
table.keys{border-collapse:collapse;font-size:.9rem;width:100%;background:#FFFBF0}table.keys th,table.keys td{border-bottom:1px solid #E6D9C3;padding:.3rem .4rem;text-align:left;vertical-align:top}
.nojs{position:absolute;inset:0;background:#FFF7EA;padding:1.5rem;overflow:auto;z-index:20}
.game.large .panel,.game.large .caddie,.game.large .clubname b{font-size:118%}.game.large .h-pin b{font-size:2.1rem}.game.large .m-track{height:34px}
@media (max-width:640px){
  .minimap{width:86px;height:118px;left:.6rem;right:auto;top:6.9rem}
  .hud-tl{min-width:0;padding:.4rem .6rem}.h-pin b{font-size:1.45rem}.h-hole{font-size:1rem}
  .hud-tr{max-width:58%;gap:.3rem}.h-wind svg{width:30px;height:30px}.h-wind,.h-score{padding:.35rem .6rem}
  .h-btns{gap:.25rem;max-width:13.2rem}.h-btns button{font-size:.8rem;padding:.2rem .6rem;min-width:44px}
  #b-card,#b-grid,#b-map,#b-mute{display:none}
  .m-labels{font-size:.8rem}
  .caddie{font-size:.9rem;border-radius:14px;padding:.35rem .7rem}
  .ctl{gap:.35rem}.grp{padding:.25rem;border-radius:14px;gap:.25rem}.grp button{min-width:44px;min-height:44px}
  .aimctl{order:1;flex:0 0 auto}.aimctl .grp-lbl{display:none}.clubctl{order:2;flex:1 1 auto;justify-content:space-between}.swingctl{order:3;flex:1 1 100%;min-width:0}
  .clubname{min-width:5.6rem}.clubname b{font-size:1.05rem}.clubname span{max-width:9.2rem}
  #o-hole{padding-bottom:10.5rem}
  table.card th,table.card td{min-width:1.5rem;padding:.15rem .1rem;font-size:.84rem;height:2rem}table.card tbody th{padding-left:.25rem}.mk{min-width:1.45em;height:1.45em}
  .slip,.paper{padding:1rem .8rem}
  .toast{top:36%;font-size:.9rem;border-radius:16px}
  .fps{top:calc(6.9rem + 130px);left:.6rem;font-size:.66rem}.fps-more{display:none}
  .hud[data-putt="1"] .toast{top:20%}
  .bold{font-size:.88rem;padding:.25rem .8rem}
  .menu-back{margin:0 -.8rem -1rem!important;bottom:-1.05rem;padding:.5rem .8rem .7rem}
  .menu-grid{gap:.4rem .6rem}.menu select{padding:.3rem .35rem}
}
/* A phone on its side (330 to 430 px high): everything in one row along the bottom, two buttons at the top, no caddie
   line and no small map (the Map view and the menu still have them). Nothing may sit below the bottom edge. */
@media (max-height:520px){
  .minimap{display:none}.caddie{font-size:.8rem;padding:.15rem .7rem;border-radius:10px;line-height:1.25}.hud-tl .h-sub{display:none}
  #b-card,#b-grid,#b-map,#b-mute{display:none}
  .hud-tl{padding:.3rem .6rem;min-width:0}.h-hole{font-size:.95rem}.h-pin b{font-size:1.2rem}
  .hud-tr{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.3rem;max-width:72%}.h-score,.h-wind{padding:.25rem .6rem}.h-wind svg{width:28px;height:28px}
  .h-btns{flex-wrap:nowrap}.h-btns button{min-height:44px;font-size:.8rem}
  .hud-bottom{gap:.25rem}.ctl{flex-wrap:nowrap;gap:.35rem;max-width:none}.grp{padding:.25rem;border-radius:14px;gap:.25rem}.grp button{min-width:44px;min-height:44px}
  .aimctl{order:1;flex:0 0 auto}.aimctl .grp-lbl{display:none}.clubctl{order:2;flex:0 1 auto}.swingctl{order:3;flex:1 1 12rem;min-width:11rem}
  .clubname{min-width:5.6rem}.clubname b{font-size:1rem}.clubname span{font-size:.72rem;max-width:9rem}
  .swing{min-height:44px!important;min-width:5rem!important;font-size:1.1rem!important}.m-track{height:22px}.m-labels{font-size:.72rem}.m-l-full{display:none}
  #o-hole{padding-bottom:4.4rem}.slip{padding:.7rem 1rem}.slip-line{font-size:1.05rem}
  .mapnote{top:3.4rem}.toast{top:30%}
  .fps{top:4.6rem;left:.6rem;font-size:.66rem}.fps-more{display:none}
  .caddie-row{flex-wrap:nowrap}.bold{font-size:.8rem;min-height:36px;padding:.1rem .7rem}
}
.game.nohud .hud,.game.nohud .fps,.game.nohud .overlay{display:none}
/* v1.1.0: money (SPEC 13.4). One primary action; warm, never loud. */
.slip-pay{background:#FFC65C;color:#2E2318;border-radius:12px;padding:.45rem .8rem;margin:0 0 .8rem!important;font-weight:600}
.slip-pay[hidden]{display:none}.slip-pay a,.paper-pay a{color:#2E2318;margin-left:.3rem}.slip-pay a[hidden]{display:none}
.paper-pay{max-width:34rem;margin:.6rem auto!important}.paper-pay[hidden]{display:none}
/* v1.1.3: what is free and the two prices on the playing screen. Text only; it takes no clicks and covers no control.
   Never under 13px. Every line is one unbreakable piece, so nothing wraps except where this file says: side by side
   with the dot between the prices where there is room (desktop under the small map, a phone held sideways under the
   hole panel), one price to a line and no dot on an upright phone. The cream ground is nearly opaque, so the dark
   text reads the same over morning, golden-hour and dusk courses. */
.h-price{position:absolute;left:max(.6rem,env(safe-area-inset-left));top:calc(7.6rem + 219px);box-sizing:border-box;width:max-content;min-width:156px;max-width:calc(100% - 1.2rem);background:rgba(255,247,234,.95);color:#2E2318;font-size:max(13px,.84rem);line-height:1.32;padding:.35rem .65rem .4rem;border-radius:12px;box-shadow:0 3px 12px rgba(46,35,24,.2);text-align:center;pointer-events:none}
.h-price[hidden],.h-price [hidden]{display:none}
.hp-l{display:block;white-space:nowrap}.hp-p,.hp-dot{white-space:nowrap}
.hp-a{font-weight:800}.hp-b{font-weight:700}.hp-c{font-weight:600;color:#56452F}
.game:has(.h-price:not([hidden])) .fps{margin-top:4.9rem}
@media (max-width:640px){.h-price{top:calc(6.9rem + 130px);left:.6rem;min-width:0}.hp-p{display:block}.hp-dot{display:none}.game:has(.h-price:not([hidden])) .fps{margin-top:6rem}}
@media (max-height:520px){.h-price{top:4.55rem;left:.6rem;min-width:0;text-align:left;padding:.25rem .6rem .3rem}.hp-p{display:inline}.hp-dot{display:inline}.game:has(.h-price:not([hidden])) .fps{margin-top:4.6rem}
  /* on a phone held sideways the hole-end slip and the scorecard reach over the left edge: the line steps aside for them (it would show cut in half) */
  .hud[data-mode=holeEnd] .h-price,.hud[data-mode=card] .h-price{visibility:hidden}}
/* v1.1.4: the after-shot message ("Carry 223 yards ...") is placed by a share of the screen's height and the price
   lines by a fixed distance from the top, so on an upright phone the message reached over the last price line for the
   seconds it is up. While the price lines are shown it now starts below them wherever the two could meet. Putting
   messages sit higher on purpose and are left where they are. */
@media (max-width:1000px){.game:has(.h-price:not([hidden])) .hud:not([data-putt="1"]) .toast{top:max(38%,calc(7.6rem + 219px + 5.2rem))}}
@media (max-width:640px){.game:has(.h-price:not([hidden])) .hud:not([data-putt="1"]) .toast{top:max(36%,calc(6.9rem + 130px + 6rem))}}
@media (max-height:520px){.game:has(.h-price:not([hidden])) .hud:not([data-putt="1"]) .toast{top:max(30%,calc(4.55rem + 4.7rem))}}