/* Meld — molten glass in a jar over the furnace. Self-contained. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap");

:root{
  --ink: #fff6ea;
  --dim: rgba(255, 238, 220, 0.62);
  --faint: rgba(255, 238, 220, 0.34);
  --glow: #ffae4a;
  --hot: #ff5a3c;
  --line: rgba(255, 200, 150, 0.16);
  --panel: rgba(14, 9, 7, 0.86);
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{
  height: 100%; margin: 0; overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body{ background: #0a0706; }
#c{
  position: fixed; inset: 0; display: block; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}

/* ---------- HUD ---------- */
.hud{
  position: fixed; z-index: 5; pointer-events: none;
  top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 22px; align-items: flex-end;
  font-family: var(--font-mono);
  padding: 7px 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(14, 8, 6, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hud[hidden]{ display: none; }
.hud__cell{ display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px; }
.hud__k{ font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.hud__cell > span:not(.hud__k){ font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
#score{ color: var(--glow); }
#best.is-target{ color: var(--hot); }
.hud__cell--next{ min-width: 36px; }
#nextC{ width: 30px; height: 30px; display: block; margin-top: -3px; }

/* ---------- Callout ---------- */
.callout{
  position: fixed; z-index: 6; pointer-events: none;
  left: 50%; top: 34%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; white-space: nowrap;
}
.callout[hidden]{ display: none; }
.callout__big{
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: clamp(1.3rem, 6vw, 2.3rem); line-height: 1;
  color: #fff;
  text-shadow: 0 0 18px var(--glow), 0 0 42px rgba(255, 120, 40, 0.8), 0 4px 24px rgba(0, 0, 0, 0.8);
}
.callout__sub{
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); opacity: 0.88;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}
.callout__sub:empty{ display: none; }
.callout.is-bad .callout__big{ text-shadow: 0 0 14px var(--hot), 0 0 40px rgba(255, 60, 40, 0.9), 0 4px 24px rgba(0, 0, 0, 0.9); }
.callout.is-pop{ animation: pop 320ms cubic-bezier(.2, 1.4, .4, 1); }
.callout.is-out{ opacity: 0; transition: opacity 400ms ease; }
@keyframes pop{ from{ transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to{ transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ---------- Sound ---------- */
.sound-btn{
  position: fixed; z-index: 6;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(14, 8, 6, 0.6); color: var(--ink);
  font-size: 15px; cursor: pointer; backdrop-filter: blur(8px);
  transition: transform 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.sound-btn:hover{ transform: translateY(-1px); border-color: var(--glow); }
.sound-btn[aria-pressed="false"]{ opacity: 0.45; }

/* ---------- Music: beside the sound button on a wide screen, top-left on a
   phone, where the frame number is hidden and nothing else sits ---------- */
.music-btn{
  position: fixed; z-index: 6;
  top: max(12px, env(safe-area-inset-top));
  right: max(58px, calc(env(safe-area-inset-right) + 58px));
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); background: rgba(14, 8, 6, 0.6); color: var(--ink);
  cursor: pointer; backdrop-filter: blur(8px);
  transition: transform 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.music-btn:hover{ transform: translateY(-1px); border-color: var(--glow); }
.music-btn[aria-pressed="false"]{ opacity: 0.45; }
.music-btn[aria-pressed="false"] svg{ opacity: 0.6; }
.music-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255, 190, 120, 0.5); }
.sound-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255, 190, 120, 0.5); }

/* ---------- Overlay ---------- */
.overlay{
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: radial-gradient(90% 70% at 50% 46%, rgba(10, 6, 4, 0.42), rgba(4, 2, 2, 0.86));
  transition: opacity 260ms ease;
  overflow-y: auto;
  touch-action: pan-y;
}
.overlay[hidden]{ display: none; }
.overlay.is-out{ opacity: 0; pointer-events: none; }
.panel{
  max-width: 500px; width: 100%; text-align: center; margin: auto;
  padding: clamp(22px, 5vw, 34px);
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.85), 0 0 70px -30px rgba(255, 130, 40, 0.6);
}
.panel__eyebrow{ margin: 0 0 6px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--glow); }
.panel__title{
  margin: 0 0 12px; font-size: clamp(2.3rem, 10vw, 3.6rem); font-weight: 900; letter-spacing: 0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fffbea 10%, #ffcf7a 55%, #ff7a2a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 140, 50, 0.45));
}
.panel__text{ margin: 0 0 18px; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7; color: var(--dim); }
.panel__text b{ color: var(--ink); font-weight: 600; }
.panel__text .win{ color: #ffd27a; font-weight: 700; }
.panel__text .short{ color: var(--hot); }
.result{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 2px 0 12px; text-align: left; line-height: 1.6;
}
.result__orb{ width: 56px; height: 56px; flex: none; filter: drop-shadow(0 0 14px rgba(255, 150, 60, 0.35)); }
.demo{ margin: 0 auto 18px; display: block; width: min(320px, 82vw); height: auto; }
.demo[hidden]{ display: none; }
.play-btn{
  appearance: none; font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  padding: 13px 32px; border-radius: 999px; cursor: pointer;
  border: 0; background: linear-gradient(180deg, #fff3d6, #ffb35a);
  color: #2a1204; box-shadow: 0 10px 30px -8px rgba(255, 140, 40, 0.7);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.play-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px -10px rgba(255, 140, 40, 0.85); }
.play-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255, 210, 150, 0.6); }
.ghost-btn{
  appearance: none; display: block; margin: 12px auto 0;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 174, 74, 0.45);
  background: rgba(255, 174, 74, 0.1);
  color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease;
}
.ghost-btn[hidden], .text-btn[hidden]{ display: none; }
.ghost-btn:hover{ background: rgba(255, 174, 74, 0.2); border-color: var(--glow); }
.ghost-btn:focus-visible, .text-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255, 210, 150, 0.45); }
.text-btn{
  appearance: none; display: block; margin: 10px auto 0; padding: 4px 8px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--faint); text-decoration: underline; text-underline-offset: 3px;
  border-radius: 6px;
}
.text-btn:hover{ color: var(--ink); }
.panel__keys{ margin: 16px 0 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--faint); }

/* ---------- Frame corners + hint ---------- */
.frame{ position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.frame__corner{
  position: fixed; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
}
.frame__corner--tl{ top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.frame__corner--tr{ top: max(14px, env(safe-area-inset-top)); right: max(104px, calc(env(safe-area-inset-right) + 104px)); }
.frame__corner--bl{ bottom: max(14px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); pointer-events: auto; }
.frame__corner--bl a{ color: var(--faint); text-decoration: none; }
.frame__corner--bl a:hover{ color: var(--glow); }

.hint{
  position: fixed; z-index: 4; pointer-events: none;
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 6px)); left: 50%; transform: translateX(-50%);
  margin: 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--faint); white-space: nowrap;
  transition: opacity 600ms ease;
}
.hint.is-gone{ opacity: 0; }

@media (max-width: 620px){
  .music-btn{ right: auto; left: max(12px, env(safe-area-inset-left)); }
  .frame__corner--tr{ display: none; }
  .frame__corner--tl{ display: none; }
  .hint{ display: none; }
  .hud{ gap: 14px; padding: 6px 12px; }
  .hud__cell{ min-width: 44px; }
  .hud__k{ font-size: 7px; letter-spacing: 0.12em; }
  .hud__cell > span:not(.hud__k){ font-size: 16px; }
}
@media (max-height: 520px){
  .hud{
    top: 50%; left: max(12px, env(safe-area-inset-left)); transform: translateY(-50%);
    flex-direction: column; align-items: flex-start; gap: 8px; padding: 9px 12px;
  }
  .hud__cell{ align-items: flex-start; }
  .frame__corner--tl{ display: none; }
  .hint{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .play-btn, .sound-btn, .overlay{ transition: none; }
  .callout.is-pop{ animation: none; }
}

/* The shared tip-jar / fullscreen badges default to right-CENTRE, which is on
   the glass. Landscape: a column under the sound button, clear of the ladder.
   Portrait: a row at the bottom right, under the ladder. Doubled classes
   out-specify the components' own injected styles. */
.opt-tipjar.opt-tipjar{
  top: max(60px, calc(env(safe-area-inset-top) + 48px));
  transform: none;
}
.opt-fs.opt-fs{
  top: max(112px, calc(env(safe-area-inset-top) + 100px));
  transform: none;
}
.opt-tipjar.opt-tipjar.tj-nudge{ animation: none; }
@media (max-aspect-ratio: 11/10){
  .opt-tipjar.opt-tipjar{ top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
  .opt-fs.opt-fs{ top: auto; bottom: max(12px, env(safe-area-inset-bottom)); right: max(62px, calc(env(safe-area-inset-right) + 54px)); }
}