/* Hoop Shots: the gym, the court area, the home screen. */
:root{--lacquer:#101826;--lacquer-hi:#18233a;--brass:#FFB25E;--brass-lo:#C8641E;--brass-hi:#FFD9A8;--hair:rgba(255,178,94,.3);--ink-soft:#C9C2B4}
body{background:radial-gradient(ellipse at 50% 30%,#22324f,#101826 72%)}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}
.pill{color:#3a1a06}

/* home */
.home{align-items:center;justify-content:center;gap:1em;padding:1.2em;text-align:center}
.home .title{font-size:clamp(2.6em,11vw,4.4em);color:#FFE2BC;text-shadow:0 2px 0 #7a3510,0 6px 18px rgba(0,0,0,.5)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.hoop-art{width:7.5em;height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.tagline{margin:0;color:var(--ink);font-size:1.1em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.6em;width:min(24em,100%)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:.35em;width:100%}
.levels .choice{min-height:46px;font-weight:800;font-size:1.05em;padding:.3em .2em;position:relative}
.levels .choice:disabled{opacity:.4;cursor:default}
.levels .choice .tick{position:absolute;right:.3em;top:.1em;font-size:.75em;color:#7EE2A8}
.levels .choice[aria-pressed=true] .tick{color:#1b5a33}
.level-line{margin:0;color:var(--ink-soft);font-size:.98em;min-height:1.4em}
.level-line b{color:var(--brass-hi)}
.menu-col .pill{min-width:12em;min-height:50px}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:.98em}
@media (max-width:400px){.levels .choice{font-size:.98em}}
@media (max-height:480px){
  .home{display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:0 1.2em;padding:.5em 1em}
  .home .title{font-size:2em}
  .hoop-art{width:4.6em}
  .tagline{font-size:.95em}
  .menu-col{gap:.35em;width:100%}
  .levels{grid-template-columns:repeat(8,1fr);gap:.25em}
  .levels .choice{min-height:44px;padding:.2em 0}
  .level-line{font-size:.9em}
  .menu-col .pill{min-height:46px;padding:.4em 2em}
  .links .link{padding:.3em .5em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}
  html:not(.hw-embed) .home .lead{padding-top:52px}}
@media (max-height:300px){.hoop-art{display:none}}

/* the game */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{padding:max(.4em,env(safe-area-inset-top)) .6em .3em;gap:.5em;align-items:center}
#game .bar .jewel{flex:none;width:2.75em;height:2.75em}
.hud{flex:1;display:flex;gap:.45em;justify-content:center;min-width:0}
.chip{flex:1 1 0;max-width:10em;min-width:0;display:flex;flex-direction:column;align-items:center;padding:.2em .6em .3em;border-radius:.8em;
  background:rgba(12,18,30,.82);border:1px solid var(--hair);line-height:1.15}
.chip small{color:var(--ink-soft);font-size:.78em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip b{font:900 1.75em/1.05 var(--sans);font-variant-numeric:tabular-nums;color:#fff}
.chip.low{box-shadow:0 0 0 2px #FF5B4A,0 0 16px rgba(255,91,74,.4)}
.chip.low b{color:#FF8A7A}
.chip.fire{box-shadow:0 0 0 2px #FF9A2E,0 0 18px rgba(255,140,40,.5);background:linear-gradient(180deg,rgba(90,30,8,.9),rgba(12,18,30,.85))}
.chip.fire b{color:#FFD08A}
.chip.bump b{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.3)}}
.felt{flex:1;position:relative;min-height:0;touch-action:none}
#court{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.banner{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);max-width:calc(100% - 16px);pointer-events:none;padding:.35em 1em;border-radius:999px;
  background:rgba(10,14,22,.84);border:1px solid var(--hair);font-weight:700;font-size:.98em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.banner:empty{opacity:0}
/* a short wide screen: the numbers stand in a column beside the court */
@media (max-height:500px) and (min-aspect-ratio:6/5){
  #game{flex-direction:row}
  #game .bar{flex-direction:column;justify-content:flex-start;align-items:flex-start;width:8.6em;flex:none;padding:max(.4em,env(safe-area-inset-top)) .4em .4em max(.5em,env(safe-area-inset-left))}
  .hud{flex-direction:column;justify-content:flex-start;flex:none;width:100%;gap:.35em}
  .chip{max-width:none;flex:none;padding:.15em .5em .2em}
  .chip b{font-size:1.5em}
}
.card .big{font:800 1.25em/1.3 var(--serif);text-align:center;margin:0 0 .4em}
.card .game-name{text-align:center;color:var(--brass);font-weight:700;margin:0 0 .3em}
.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,.card .link{min-height:44px}
.card .actions{background:#18233a}
.card{background:linear-gradient(180deg,#22314d,#18233a 40%)}