/* Roller — a fresh lime-plaster courtyard getting its first coat, seen from above in morning sun.
   The courtyard, the roller and the paint are drawn on the canvas (script.js); this sheet styles
   the limewash-and-terracotta instruments laid over it. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

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

:root {
  --lime: #f3eedf;           /* limewash */
  --terra: #d9774c;          /* sunlit terracotta */
  --terra-lo: #8f3f22;
  --shade: #2a1810;          /* the portico in shade */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  /* shared toy chrome (assets/toy-chrome.css): sunlit terracotta on the shaded portico */
  --tc-accent: #e2895c;
  --tc-on: #2b1209;
  --tc-display: var(--display);
  --tc-ground: #1d120c;
}

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

#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;
}

/* ---------- HUD: two limewash plaques with terracotta numerals ---------- */
.hud {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left));
  z-index: 5; display: inline-flex; align-items: stretch; pointer-events: none;
}
html.tc .hud.hud {
  padding: 4px; gap: 4px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(58, 34, 22, 0.86), rgba(34, 20, 13, 0.9));
  border: 1px solid rgba(226, 137, 92, 0.38);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 220, 190, 0.08);
}
.hud__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 58px; padding: 4px 10px 5px; border-radius: 10px;
  background: linear-gradient(180deg, #f7f2e6 0%, #e9e1cf 100%);
  box-shadow: inset 0 -2px 0 rgba(150, 120, 90, 0.25), inset 0 1px 0 #fffdf6;
}
html.tc .hud .hud__k {
  font: 600 8px/1.2 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9a7a62;
}
.hud__cell > span:last-child {
  font: 800 21px/1.05 var(--display); font-variant-numeric: tabular-nums lining-nums;
  color: #b04f2a;
}
.hud__cell.is-bump > span:last-child { animation: bump 260ms cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- top buttons: round limewash plaques ---------- */
.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; cursor: pointer; padding: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(226, 137, 92, 0.4);
  background: linear-gradient(180deg, rgba(58, 34, 22, 0.9), rgba(34, 20, 13, 0.94));
  color: #f3e6d4;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 220, 190, 0.1);
  transition: border-color 140ms ease, color 140ms ease, transform 120ms ease, opacity 160ms ease;
}
.iconbtn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .spk { fill: currentColor; stroke-width: 1.4; }
.iconbtn .mute { display: none; }
.iconbtn[aria-pressed="false"] { color: rgba(243, 230, 212, 0.45); }
.iconbtn[aria-pressed="false"] .wave { display: none; }
.iconbtn[aria-pressed="false"] .mute { display: inline; }
.iconbtn:hover { border-color: var(--terra); color: #fff; }
.iconbtn:active { transform: translateY(1px) scale(0.96); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--shade), 0 0 0 4px var(--tc-accent); }
.iconbtn:disabled { opacity: 0.38; cursor: default; }
.iconbtn:disabled:hover { border-color: rgba(226, 137, 92, 0.4); color: #f3e6d4; }
/* "no way back from here": the undo plaque calls for a tap, three times, then rests */
.iconbtn.is-call { border-color: var(--tc-accent); color: #fff; animation: call 900ms ease-in-out 3; }
@keyframes call {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 137, 92, 0.0), 0 8px 18px -10px rgba(0, 0, 0, 0.9); }
  50% { box-shadow: 0 0 0 7px rgba(226, 137, 92, 0.32), 0 8px 18px -10px rgba(0, 0, 0, 0.9); }
}

/* ---------- overlay: the card over the shaded courtyard ---------- */
.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% 45%, rgba(30, 18, 12, 0.38), rgba(18, 10, 6, 0.8));
  transition: opacity 260ms ease;
}
.overlay[hidden] { display: none; }
.overlay.is-hidden { opacity: 0; pointer-events: none; }
.panel { animation: pop 320ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
html.tc .overlay .panel.panel {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 70px rgba(226, 137, 92, 0.14),
    inset 0 1px 0 rgba(255, 225, 200, 0.08);
}
html.tc .overlay .panel__title {
  font-weight: 800; font-size: clamp(42px, 12vw, 56px); line-height: 1; letter-spacing: -0.01em;
  padding-bottom: 4px; font-variation-settings: "opsz" 144;
  /* wet paint: a glossy roll of the level's color */
  background-image: linear-gradient(178deg, #fff1e4 0%, var(--paint-hi, #f6b590) 34%, var(--paint, #d9774c) 66%, var(--paint-lo, #8f3f22) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.35));
}
.panel__text .newbest { color: #f6c89a; font-weight: 600; }
.panel__text .par { color: #f3e6d4; font-weight: 600; }
.ov-link {
  appearance: none; background: none; border: 0; cursor: pointer; margin: 12px auto 0; display: block;
  font: 500 13px/1.4 "Geist", system-ui, sans-serif; color: var(--tc-faint);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(226, 137, 92, 0.4);
}
.ov-link[hidden] { display: none; }
.ov-link:hover { color: #f3e6d4; }
.ov-link:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- 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(243, 230, 212, 0.55);
}
.frame__corner--tl { display: none; } /* top-left holds the HUD */
.frame__corner--tr { display: none; } /* top-right holds the buttons */
.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: #fff; }
.frame__corner a:focus-visible { outline: 2px solid var(--tc-accent); 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(243, 230, 212, 0.66);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none; white-space: nowrap; transition: opacity 300ms ease, color 200ms ease; max-width: 92vw; text-align: center;
}
.hint.is-gone { opacity: 0; }
.hint.is-warn { color: #ffd2b4; }

@media (max-width: 620px) {
  .frame__corner--bl { display: none; }
  .hint { font-size: 0.66rem; letter-spacing: 0.02em; }
}
@media (max-width: 430px) {
  .hint { white-space: normal; line-height: 1.4; bottom: max(10px, calc(env(safe-area-inset-bottom) + 2px)); }
}

/* the shared tip-jar / fullscreen badges dock bottom-right, clear of the courtyard's middle */
.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) ----------
   The HUD and the buttons stand in columns at the two sides so the courtyard can use the full
   height (script.js measures them). */
@media (orientation: landscape) and (max-height: 500px) {
  html.tc .hud.hud {
    top: 50%; transform: translateY(-50%); flex-direction: column;
    left: max(12px, env(safe-area-inset-left));
  }
  .topbtns {
    top: 50%; transform: translateY(-50%); flex-direction: column;
    right: max(12px, env(safe-area-inset-right));
  }
  /* two columns as a grid (WebKit mispaints CSS columns): the words on the left, the actions on the right */
  html.tc #overlay > .panel.panel {
    width: min(100%, 680px); max-width: 680px; padding: 16px 26px 14px; text-align: left;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; 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: 4px; }
  html.tc #overlay .panel__text { margin-bottom: 4px; }
  .ov-link { margin: 8px 0 0; text-align: center; width: 100%; }
  html.tc #overlay .panel__keys { margin-top: 6px; text-align: center; }
  html.tc #overlay .panel .mg { margin-top: 8px; }
  html.tc #overlay .panel .opt-share { margin-top: 6px; }
}

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