/* Mini Golf Garden: the course canvas, the home screen, the bar and the banner. */
body{background:#13301C}
#course{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1}

/* home */
.home{align-items:center;justify-content:center;gap:1em;padding:1.2em 1.2em 1.6em;text-align:center}
.home .title{font-size:clamp(2.5em,11vw,4.4em);font-weight:900;color:#FFF7D6;text-shadow:0 3px 0 #1A5A2A,0 8px 22px rgba(0,0,0,.45)}
.home .title .pre{display:block;font-size:.5em;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.08em}
.tagline{margin:0;color:var(--ink);font-size:1.15em;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.6em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.7em;width:min(25em,100%)}
.levels{display:grid;grid-template-columns:1fr 1fr;gap:.45em;width:100%}
.levels .choice{min-height:56px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;font-size:1.05em;
  background:rgba(19,48,28,.82);backdrop-filter:blur(2px)}
.levels .choice small{font-weight:400;font-size:.74em;opacity:.9}
.levels .choice[aria-pressed=true]{background:var(--brass);color:#3A2A00;border-color:var(--brass-hi)}
.levels .choice[aria-pressed=true] small{opacity:1}
.menu-col .pill{min-width:12em;min-height:52px}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:1em;color:var(--brass-hi)}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:.4em 1.6em;padding:.5em 1em}
  .home .title{font-size:2.2em}
  .lead{max-width:15em}
  .menu-col{gap:.4em;width:min(21em,100%)}
  .menu-col .pill{min-height:46px}
  .levels .choice{min-height:48px;font-size:.98em}
  .tagline{font-size:1em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}}
@media (max-height:480px) and (max-width:620px){.home .lead{display:none}}

/* the game */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:grab}
#game.dragging{cursor:grabbing}
#game .bar{padding:max(.35em,env(safe-area-inset-top)) max(.7em,env(safe-area-inset-right)) .3em max(.7em,env(safe-area-inset-left));gap:.6em;cursor:default;
  background:linear-gradient(180deg,rgba(19,48,28,.85),rgba(19,48,28,0))}
#game .bar .jewel{flex:none;width:2.6em;height:2.6em;min-width:44px;min-height:44px}
.field{flex:1}
.hud{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;line-height:1.15}
.hud b{font:800 1.3em/1.1 var(--serif);color:#FFF7D6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hud span{color:var(--ink-soft);font-weight:700;white-space:nowrap}
.score{flex:none;display:flex;flex-direction:column;align-items:flex-end;min-width:4.4em;line-height:1.1}
.score b{font:800 1.45em/1 var(--serif);color:var(--brass);font-variant-numeric:tabular-nums}
.score span{color:var(--ink-soft);font-size:.85em;font-weight:700;white-space:nowrap}
.score.tight b{color:#FF9A8A}
@media (max-height:480px){
  #game .bar{padding-top:max(.2em,env(safe-area-inset-top));padding-bottom:.15em}
  #game .bar .jewel{width:44px;height:44px}
  .hud{flex-direction:row;gap:.8em;align-items:baseline}
  .score{flex-direction:row;align-items:baseline;gap:.4em}
}
.banner{position:absolute;left:50%;top:var(--bt,4.5em);transform:translateX(-50%);pointer-events:none;padding:.3em 1.1em;border-radius:999px;white-space:nowrap;
  font:800 1.5em/1.2 var(--serif);color:#FFF7D6;background:rgba(19,48,28,.72);box-shadow:0 4px 18px rgba(0,0,0,.3);transition:opacity .3s,transform .3s}
.banner:empty{opacity:0;transform:translateX(-50%) scale(.9)}
.banner.big{font-size:2em;color:var(--brass)}

.card .big{font:800 1.35em/1.3 var(--serif);text-align:center;margin:0 0 .4em;color:var(--brass-hi)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice{min-height:44px}
.card .row{color:var(--ink);font-size:1em}
.scorecard{width:100%;border-collapse:collapse;font-size:.85em;margin:.2em 0 .5em;font-variant-numeric:tabular-nums;table-layout:fixed}
.scorecard td,.scorecard th{text-align:center;padding:.18em 0;border-bottom:1px solid rgba(255,209,102,.12)}
.scorecard th{color:var(--ink-dim);font-weight:700;text-align:left;width:3.4em}
.scorecard .u{color:#8FE3A0;font-weight:800}
.scorecard .o{color:#FFB3A6}
@media (max-height:420px){.card{padding:.9em 1.1em .8em;font-size:.9em}.card h2{margin-bottom:.35em}.card .actions{margin-top:.5em;gap:.2em}.card .big{margin:0 0 .2em}}
@media (max-height:480px){.card .scorecard{display:none}}
.card .actions{background:var(--lacquer-hi)}