/* drop.css — HOOP DROP's screen (DESIGN.md "Hoop Drop"). Built on the game's own tokens (tokens.css) and buttons; the
   backdrop is the world's Midjourney picture, everything on top is code (drop-art.js). Fits a 390×844 phone (stacked)
   and a short wide window like 413×475 (the board beside the words). */
.hd-screen { padding: 0 !important; }
.hd { position: relative; min-height: calc(100dvh - var(--topbar-h, 60px)); display: flex; flex-direction: column; isolation: isolate; }
.hd-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #070814; }
.hd-still, .hd-loop { position: absolute; inset: -4%; width: 108%; height: 108%; background-size: cover; background-position: center; object-fit: cover; will-change: transform; }
.hd-loop { opacity: 0; transition: opacity 1.2s ease; }
.hd-loop.on { opacity: 1; }
.hd-far { position: absolute; inset: 0; pointer-events: none; }
.hd-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(5, 6, 20, 0.05) 0%, rgba(5, 6, 20, 0.55) 100%); pointer-events: none; }
.hd { height: calc(100dvh - var(--hd-top, 64px)); min-height: 0; overflow: hidden; }
.hd-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas: "head balls" "say say" "stage stage" "pile pile" "btns btns"; gap: 4px 10px; padding: 4px 10px calc(env(safe-area-inset-bottom) + 6px); }
.hd-head { grid-area: head; display: flex; flex-direction: column; min-width: 0; }
.hd-num { font: 800 11px/1 var(--font, ui-rounded, system-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow, #FFC93C); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.hd-name { margin: 1px 0 0; font: 900 clamp(19px, 5.6vw, 26px)/1.05 var(--font, ui-rounded, system-ui); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 0 18px rgba(80, 200, 255, 0.35); }
.hd-tune { font: 800 11px/1.2 var(--font, ui-rounded, system-ui); color: #FFE9A8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }   /* the whole tune name, wrapped, never cut (critic, 2026-10-19) */
.hd-say { grid-area: say; min-width: 0; min-height: 66px; display: flex; align-items: center; }   /* room for three lines, so a longer line never shrinks the board (round 14) */
.hd-say > * { flex: 1 1 auto; min-width: 0; }
.hd-say .say-row { margin: 0; gap: 6px; align-items: center; }
.hd-say .swish { width: 42px; height: 42px; flex: 0 0 42px; }
.hd-say .bubble { padding: 6px 10px; font-size: 14px; line-height: 1.25; gap: 6px; }
.hd-say .bubble p { margin: 0; font-size: 14px; }
.hd-say .bubble button { width: 36px; height: 36px; min-width: 36px; max-height: 36px; flex: 0 0 36px; align-self: center; }   /* round, never a tall oval (round 14) */
.hd-say .bubble button svg { width: 18px; height: 18px; }
.hd-wait { color: #fff; font-weight: 800; }
.hd-balls { grid-area: balls; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: flex-end; max-width: 150px; align-self: end; }
.hd-balls b { width: 100%; text-align: right; color: #fff; font: 800 14px var(--font, ui-rounded, system-ui); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.hd-b.is-small { width: 8px; height: 8px; } .hd-b.is-tiny { width: 6px; height: 6px; box-shadow: none; }
.hd-b { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFB070, #FF8A3D 55%, #C4561C); box-shadow: 0 0 6px rgba(255, 138, 61, 0.8); }
.hd-pile { grid-area: pile; display: flex; align-items: center; gap: 6px; background: rgba(10, 12, 40, 0.66); border: 2px solid rgba(255, 201, 60, 0.75); border-radius: 14px; padding: 3px 10px; color: #fff; font: 800 13px var(--font, ui-rounded, system-ui); min-width: 0; }
.hd-pile { height: 40px; box-sizing: border-box; flex-wrap: nowrap; }
.hd-pile.is-empty { visibility: hidden; }   /* the row keeps its room: the board never jumps when a win shows (critic 10/19; round 14 found [hidden] took the room away) */
.hd-pile.bump { animation: hd-bump 0.4s ease; }
.hd-coins { display: inline-flex; flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 1px; min-width: 0; flex: 1 1 auto; height: 30px; }   /* one line, always: a growing pile shrank the board until the labels were cut (round 14) */
.hd-total { margin-left: auto; color: var(--yellow, #FFC93C); font-size: 17px; white-space: nowrap; }
.hd-play { align-self: flex-start; margin-top: 3px; font: 800 9px var(--font, ui-rounded, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.45); border-radius: 8px; padding: 3px 7px; }   /* in the heading, off the board's frame (critic, round 13) */
.hd-btns { grid-area: btns; display: flex; gap: 6px; height: 46px; }   /* one fixed row — with or without "Count my coins", and while the tray counts — so the board never jumps (round 14) */
.hd-btns .kbtn { flex: 1 1 0; min-height: 44px; height: 44px; padding: 6px 8px; font-size: 15px; margin: 0; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hd-btns .hd-count { flex: 2 1 0; }
.hd-stage { grid-area: stage; position: relative; min-height: 0; touch-action: none; }
.hd-board, .hd-near { position: absolute; left: 0; top: 0; }
.hd-near { pointer-events: none; mix-blend-mode: screen; }
.hd-board { cursor: pointer; outline: none; border-radius: 18px; }
.hd-board:focus-visible { box-shadow: 0 0 0 3px var(--yellow, #FFC93C); }
.hd-stage.is-teeter { animation: hd-teeter 0.16s ease-in-out infinite alternate; }
.hd-hand { position: absolute; top: -2px; transform: translate(-50%, 0); font-size: 30px; opacity: 0; pointer-events: none; transition: opacity 0.3s; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); }
.hd-hand.is-on { opacity: 1; animation: hd-tap 1.1s ease-in-out infinite; }
/* the world opening: an iris of light, the world's name dropping in */
.hd-reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; }
.hd-reveal:not(.is-on) { visibility: hidden; }   /* nothing dark over a grown-up's card while the world waits for it */
.hd-reveal.is-on { pointer-events: auto; }
.hd-iris { position: absolute; inset: 0; overflow: hidden; }
/* a ring of light opens from the middle onto the new world (the dark is the ring's huge shadow) */
.hd-iris i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%);
  border: 5px solid var(--hd-ring, #7DF9FF); box-shadow: 0 0 0 220vmax #04050f, 0 0 28px 6px var(--hd-ring, #7DF9FF), inset 0 0 28px 6px var(--hd-ring, #7DF9FF); }
.hd-reveal.is-on .hd-iris i { animation: hd-iris 1.5s cubic-bezier(.55, 0, .25, 1) 0.4s both; }
.hd-title { position: relative; text-align: center; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9), 0 0 30px rgba(120, 220, 255, 0.7); }
.hd-title small { display: block; font: 900 16px var(--font, ui-rounded, system-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--yellow, #FFC93C); }
.hd-title b { display: block; font: 900 clamp(34px, 11vw, 54px)/1 var(--font, ui-rounded, system-ui); max-width: 92vw; }
.hd-reveal.is-on .hd-title { animation: hd-name 1.9s cubic-bezier(.2, 1.4, .4, 1) both; }
.hd-reveal.is-gone { opacity: 0; transition: opacity 0.6s; pointer-events: none; }
.hd-reveal.is-calm .hd-iris, .hd-reveal.is-calm .hd-title { animation: none; }
.hd-reveal.is-calm .hd-iris { opacity: 0; transition: opacity 0.4s; }
.hd.is-lap .hd-name { color: #FFE08A; }
@keyframes hd-iris { from { width: 0; height: 0; } 85% { border-width: 5px; } to { width: 260vmax; height: 260vmax; border-width: 0; } }
@keyframes hd-name { 0% { transform: translateY(-60px) scale(0.6); opacity: 0; } 25% { transform: translateY(0) scale(1.08); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.04); opacity: 0; } }
@keyframes hd-tap { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }
@keyframes hd-teeter { from { transform: translateX(-1px) rotate(-0.15deg); } to { transform: translateX(1px) rotate(0.15deg); } }
@keyframes hd-bump { 50% { transform: scale(1.06); } }
/* a short, wide window (his 413×475, a phone on its side): the words beside the board */
@media (min-aspect-ratio: 4/5) {
  .hd-main { grid-template-columns: minmax(140px, 1fr) auto; grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "head stage" "balls stage" "say stage" "pile stage" "btns stage"; }
  .hd-balls { justify-content: flex-start; max-width: none; align-self: start; }
  .hd-balls b { text-align: left; }
  .hd-btns { flex-direction: column; align-self: end; height: auto; }
  .hd-btns .kbtn { flex: 0 0 auto; min-height: 40px; height: auto; font-size: 14px; }
  .hd-stage { height: 100%; aspect-ratio: 360 / 640; }
  .hd-say .swish { display: none; }
}
@media (max-width: 359px) { .hd-say .swish { width: 48px; } }
@media (prefers-reduced-motion: reduce) { .hd-hand.is-on, .hd-stage.is-teeter, .hd-pile.bump { animation: none; } }
.hd[data-world="neon"] { --hd-ring: #7DF9FF; }
.hd[data-world="underwater"] { --hd-ring: #5FF2DA; }
.hd[data-world="candy"] { --hd-ring: #FFB0E0; }
.hd[data-world="volcano"] { --hd-ring: #FF7A2E; }
.hd[data-world="crystal"] { --hd-ring: #B9A2FF; }
.hd[data-world="cloud"] { --hd-ring: #FFE7A8; }
.hd[data-world="robot"] { --hd-ring: #2FF0D2; }
.hd[data-world="aurora"] { --hd-ring: #9DF7D6; }
.hd[data-world="temple"] { --hd-ring: #E9C873; }
.hd[data-world="finals"] { --hd-ring: #FFC94A; }
/* a tap kept while a ball falls: the hand waits where the next ball will drop (round 14: "taps do nothing for 6 s") */
.hd-hand.is-queued { opacity: 0.9; animation: hd-tap 0.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hd-hand.is-queued { animation: none; } }
.hd-kind { display: inline-flex; align-items: center; gap: 1px; margin-right: 4px; } .hd-kind b { font: 900 13px var(--font, ui-rounded, system-ui); color: #fff; }
@media (max-width: 360px) { .hd-btns .kbtn { font-size: 13px; padding: 6px 4px; } .hd-btns { gap: 4px; } }   /* a narrow phone: every button word fits on its one line */