/* Pinwheel: a fairground dart booth at night. A striped canopy strung with bulbs, a painted wooden
   prize wheel hung from a beam, the midway blurred into bokeh behind. The world is painted on the
   two canvases (script.js: #bg is the still booth, #canvas everything that moves); this sheet styles
   the sign-painted furniture laid over it. */
@import url("https://fonts.googleapis.com/css2?family=Rye&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

*, *::before, *::after { box-sizing: border-box; }

:root {
  --gold: #f2b53e;
  --gold-hi: #ffe2a0;
  --red: #c8202f;
  --cream: #f7e8c8;
  --plum: #140a1c;
  --rye: "Rye", Georgia, "Times New Roman", serif;
  /* shared toy chrome (assets/toy-chrome.css): marquee gold on the plum night, titles in carnival woodtype */
  --tc-accent: #f2b53e;
  --tc-on: #2a1206;
  --tc-display: var(--rye);
  --tc-ground: #170a1d;
}

html, body {
  -webkit-tap-highlight-color: transparent;
  margin: 0; height: 100%; overflow: hidden;
  background: var(--plum);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: none; overscroll-behavior: none;
}

#bg, #lights, #canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: none;
}
#bg, #lights { z-index: 0; pointer-events: none; }
#canvas { z-index: 1; cursor: crosshair; }
#canvas:focus-visible { outline: none; }
#safe {
  position: fixed; inset: 0; visibility: hidden; pointer-events: none; z-index: -1;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- HUD: a ticket-booth plaque, gold leaf on plum ---------- */
.hud {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  z-index: 5; display: inline-flex; align-items: center; pointer-events: none;
}
html.tc .hud.hud {
  padding: 4px 10px 4px 4px; gap: 4px; border-radius: 12px;
  background: linear-gradient(180deg, #2b1530 0%, #1a0b1f 100%);
  border: 1px solid rgba(242, 181, 62, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 24px -10px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 226, 160, 0.18);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hud__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 54px; padding: 3px 9px 4px; border-radius: 8px;
  background: radial-gradient(120% 140% at 50% 0%, #2a1018 0%, #120609 75%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(242, 181, 62, 0.16);
}
html.tc .hud .hud__k { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 214, 140, 0.6); line-height: 1.3; }
.hud__cell > span:last-child {
  font: 400 20px/1.1 var(--rye); font-variant-numeric: tabular-nums;
  color: var(--gold-hi); text-shadow: 0 1px 0 #7a1420, 0 0 10px rgba(255, 190, 80, 0.35);
}
.hud__cell.is-bump > span:last-child { animation: bump 260ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes bump { 0% { transform: scale(1.28); } 100% { transform: scale(1); } }
.pips { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.pips i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 226, 160, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 226, 160, 0.35);
}
.pips i.on { background: var(--gold); box-shadow: 0 0 6px rgba(255, 190, 80, 0.7), inset 0 0 0 1px #fff2c8; }
.pips i.now { background: #fff; box-shadow: 0 0 8px rgba(255, 230, 170, 0.95); }
.pips i.boss {
  width: 12px; height: 12px; border-radius: 0;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: rgba(255, 110, 110, 0.4); box-shadow: none;
}
.pips i.boss.now { background: #ff5a5f; }
.pips i.boss.on { background: var(--gold); }

/* ---------- sound switch: a brass-rimmed button ---------- */
.topbtns {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  z-index: 6; display: inline-flex; align-items: center; gap: 8px;
}
.iconbtn {
  appearance: none; font-family: inherit; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(242, 181, 62, 0.62);
  background: linear-gradient(180deg, #2b1530 0%, #160919 100%);
  color: var(--gold-hi);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 226, 160, 0.18), 0 8px 18px -10px rgba(0, 0, 0, 0.9);
  transition: border-color 140ms ease, color 140ms ease, transform 120ms ease;
}
.iconbtn:hover { border-color: var(--gold-hi); color: #fff4d8; }
.iconbtn:active { transform: translateY(1px); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--plum), 0 0 0 4px var(--gold-hi); }
.iconbtn[aria-pressed="false"] { color: rgba(255, 226, 160, 0.34); }

/* ---------- the card ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 40%, rgba(20, 8, 24, 0.42), rgba(8, 3, 10, 0.84));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 280ms ease;
}
.overlay.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 280ms ease, visibility 0s linear 280ms; }
.panel { animation: pop 340ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; }
@keyframes pop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* a sign-painter's double border, gold pinstripe inside the card edge */
html.tc .overlay .panel.panel {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(242, 181, 62, 0.14),
    inset 0 0 0 5px color-mix(in srgb, var(--tc-accent) 13%, var(--tc-ground) 87%),
    inset 0 0 0 6px rgba(242, 181, 62, 0.34);
}
html.tc .overlay .panel__title {
  font-weight: 400; letter-spacing: 0.01em; font-size: clamp(40px, 12vw, 54px); line-height: 1.02;
  color: var(--cream); padding-bottom: 4px;
  text-shadow: 0 2px 0 #b3202e, 0 4px 0 #6d0f1a, 0 10px 22px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 170, 70, 0.2);
}
html.tc .overlay .panel__title.is-over { color: #ffd7a8; }
.panel__text .newbest { color: var(--gold-hi); font-weight: 600; }

/* ---------- frame + hint ---------- */
.frame { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.frame__corner {
  position: absolute; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247, 232, 200, 0.55); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.frame__corner--tl { display: none; } /* the HUD holds the top-left */
.frame__corner--tr { display: none; } /* the sound switch holds the top-right */
.frame__corner--bl { bottom: max(14px, calc(env(safe-area-inset-bottom) + 4px)); left: max(16px, env(safe-area-inset-left)); }
.frame__corner a { color: inherit; text-decoration: none; pointer-events: auto; }
.frame__corner a:hover { color: var(--gold-hi); }
.frame__corner a:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 3px; }

.hint {
  position: fixed; bottom: max(15px, calc(env(safe-area-inset-bottom) + 4px)); left: 50%; transform: translateX(-50%); z-index: 4; margin: 0;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(247, 232, 200, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  pointer-events: none; white-space: nowrap; transition: opacity 400ms ease; max-width: 92vw; text-align: center;
}
.hint.is-gone { opacity: 0; }

@media (max-width: 620px) {
  .hint { font-size: 0.66rem; letter-spacing: 0.02em; }
}

/* Dock the shared tip-jar / fullscreen badges bottom-right, clear of the wheel (their default is
   right-center, which sits on the rim's darts on a phone). */
.opt-tipjar.opt-tipjar { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }
.opt-fs.opt-fs { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 54px); transform: none; }
.opt-tipjar.opt-tipjar.tj-nudge { animation: none; }

/* ---------- short landscape (a phone on its side, 874 x 402) ----------
   The card goes two columns: the words on the left, the actions on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  html.tc #overlay > .panel.panel {
    width: min(100%, 650px); max-width: 650px; padding: 16px 26px 14px; text-align: left;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-content: start; grid-auto-flow: dense;
  }
  html.tc #overlay > .panel > * { grid-column: 2; }
  html.tc #overlay > .panel > .panel__lede { grid-column: 1; grid-row: 1 / span 12; }
  html.tc #overlay > .panel > .play-btn { max-width: none; margin: 4px 0 0; }
  html.tc .overlay .panel__title { font-size: 40px; margin-bottom: 6px; }
  html.tc #overlay .panel__text { margin-bottom: 4px; }
  html.tc #overlay .panel .mg { margin-top: 10px; }
  html.tc #overlay .panel .opt-share { margin-top: 10px; }
  html.tc .hud.hud { padding: 3px 8px 3px 3px; }
  .hud__cell { min-width: 46px; padding: 2px 7px 3px; }
  .hud__cell > span:last-child { font-size: 17px; }
  .mg-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .overlay, .hint { transition: none; }
  .hud__cell.is-bump > span:last-child { animation: none; }
}