/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
 * Hallmark · app skin (redesign, component-scope) · genre: playful · theme: Hum
 * Scope: signed-in views (Play · Scenes · Create · modals · toast). Same routes, same IA —
 * the old palette tokens in styles.css are remapped onto the Hum system, then components
 * are polished. Loads after styles.css + hum.css. No macrostructure — these are app views.
 * states: default · hover · focus-visible · active · disabled covered here; loading/error/success
 * come from the app's existing state classes (.ok/.bad/.hint/.skeleton), recolored below.
 */

/* ---- remap the app's legacy tokens onto Hum ---- */
:root {
  --bg: var(--color-paper);
  --panel: var(--color-card);
  --panel-2: var(--color-paper-2);
  --text: var(--color-ink);
  --dim: var(--color-dim);
  --muted: var(--color-dim);
  --accent: var(--color-mint-deep);   /* success · found · positive ledger */
  --accent-2: var(--color-amber);     /* hints · prices */
  --bad: var(--color-accent-3-deep);  /* misses · errors */
  --line: var(--color-rule);
  --radius: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
}

/* ---- chrome: brand + nav ---- */
.topbar { border-bottom-color: var(--color-rule); }
.topbar h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.brand-emoji { display: none; }
.brand-mark {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-inline-end: 0.28em;
  position: relative;
  vertical-align: -0.02em;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0 22% 22% 0;
  border: 0.11em solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-accent);
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 36%;
  height: 0.11em;
  background: var(--color-ink);
  border-radius: var(--radius-pill);
  transform: rotate(45deg);
  transform-origin: right bottom;
}

.navbtn {
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  white-space: nowrap;
}
.navbtn.active {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-ink);
}

/* ---- the push button, app-sized ---- */
.btn {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-ink);
  white-space: nowrap;
  box-shadow: 0 3px 0 0 var(--color-accent-deep);
  transition: transform 140ms var(--ease-press), box-shadow 140ms var(--ease-press), opacity 160ms;
}
.btn:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 0 var(--color-accent-deep);
}
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 var(--color-accent-deep);
  transition-duration: 70ms;
}
.btn:disabled {
  transform: none;
  box-shadow: 0 3px 0 0 var(--color-accent-deep);
}
.btn.ghost {
  background: transparent;
  color: var(--color-ink);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.btn.ghost:hover {
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.btn.ghost:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}

/* tabs · stakes · auth tabs — active is pear with ink, never white-on-colour */
.tab.active,
.auth-tab.active,
.stake.selected {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-ink);
}
.auth-role { background: var(--color-mint-deep); }
.tab, .stake, .auth-tab { border-radius: var(--radius-pill); }

/* ---- focus is visible everywhere, instantly ---- */
.btn:focus-visible,
.tab:focus-visible,
.navbtn:focus-visible,
.stake:focus-visible,
.auth-tab:focus-visible,
.package:focus-visible,
.profile-close:focus-visible,
.custom-box > summary:focus-visible,
.play-help summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.auth-field input:focus-visible,
.create-form textarea:focus-visible,
.create-form input:focus-visible,
.create-opts input:focus-visible,
.create-opts select:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

/* ---- play view ---- */
.stat { border-radius: var(--radius-input); border-color: var(--color-rule); }
.stat .label {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.1em;
}
.pane { border-radius: var(--radius-card); }
.pane figcaption {
  font-family: var(--font-label);
  letter-spacing: 0.1em;
  font-size: 11px;
}
.play-help { border-radius: var(--radius-card); }
.play-help summary::before { content: none; }
kbd { font-family: var(--font-label); }

/* ---- manage: color-shift scene cards ---- */
.scene-card {
  border-radius: var(--radius-card);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.scene-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -18px oklch(from var(--color-ink) l c h / 0.35);
}
.scene-card .thumb { background: var(--color-paper-2); }
.tag { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.06em; }

/* ---- modals · profile · toast ---- */
.modal, .profile-view { background: oklch(from var(--color-ink) l c h / 0.45); }
.modal-card, .profile-card {
  border-radius: var(--radius-card);
  border: 0;
  box-shadow: 0 1px 2px oklch(from var(--color-ink) l c h / 0.1),
    0 24px 60px -24px oklch(from var(--color-ink) l c h / 0.35);
}
.auth-field input { border-radius: var(--radius-input); }
.toast { border-radius: var(--radius-pill); color: var(--color-paper); }
.package { border-radius: var(--radius-input); transition: transform 160ms var(--ease-out), border-color 160ms; }
.package:hover { transform: translateY(-2px); }
.buy-panel { border-radius: var(--radius-input); border-color: var(--color-mint-deep); }
.credit-panel, .ledger-row { border-radius: var(--radius-input); }

/* ---- create view ---- */
.panel-card { border-radius: var(--radius-card); box-shadow: 0 1px 2px oklch(from var(--color-ink) l c h / 0.05); }
.surprise-hero {
  background: var(--band-pear);
  border-color: transparent;
}
.create-form textarea, .create-form input[type="file"] { border-radius: var(--radius-input); }
.skeleton {
  background: linear-gradient(100deg, var(--color-paper-2) 30%, var(--color-card) 50%, var(--color-paper-2) 70%);
  background-size: 200% 100%;
  border-radius: var(--radius-input);
}
.skeleton.failed { background: var(--band-coral); border-color: var(--color-accent-3-deep); }

/* the create page's character — a drawn die, tilted, in place of the 🎲 */
.surprise-die {
  width: 46px;
  height: 46px;
  margin: 0 auto 2px;
  border-radius: 12px;
  border: 2.5px solid var(--color-ink);
  background-color: var(--color-card);
  background-image:
    radial-gradient(circle at 27% 27%, var(--color-ink) 3.5px, transparent 4.2px),
    radial-gradient(circle at 73% 27%, var(--color-ink) 3.5px, transparent 4.2px),
    radial-gradient(circle at 50% 50%, var(--color-accent-3) 3.5px, transparent 4.2px),
    radial-gradient(circle at 27% 73%, var(--color-ink) 3.5px, transparent 4.2px),
    radial-gradient(circle at 73% 73%, var(--color-ink) 3.5px, transparent 4.2px);
  box-shadow: 0 3px 0 0 var(--color-ink);
  transform: rotate(-6deg);
  transition: transform 220ms var(--ease-out);
}
.surprise-hero:hover .surprise-die { transform: rotate(6deg); }

/* ---- destructive actions: delete scene + confirm dialog ---- */
/* the per-card delete is understated (outline) until hovered, then turns coral */
.scene-delete {
  background: transparent;
  color: var(--color-dim);
  box-shadow: inset 0 0 0 1.5px var(--color-rule);
}
.scene-delete:hover {
  background: var(--band-coral);
  color: var(--color-accent-3-deep);
  box-shadow: inset 0 0 0 1.5px var(--color-accent-3-deep);
  transform: none;
}
.scene-delete:active { transform: translateY(1px); box-shadow: inset 0 0 0 1.5px var(--color-accent-3-deep); }

/* the confirmation's primary button is coral — clearly a destructive commit */
.btn.danger {
  background: var(--color-accent-3-deep);
  color: var(--color-paper);
  box-shadow: 0 3px 0 0 oklch(from var(--color-accent-3-deep) calc(l - 0.1) c h);
}
.btn.danger:hover { transform: translateY(-1px); box-shadow: 0 4px 0 0 oklch(from var(--color-accent-3-deep) calc(l - 0.1) c h); filter: none; }
.btn.danger:active { transform: translateY(2px); box-shadow: 0 1px 0 0 oklch(from var(--color-accent-3-deep) calc(l - 0.1) c h); }

.confirm-card { max-width: 420px; text-align: left; }
.confirm-card h2 { color: var(--color-accent-3-deep); }
.confirm-card p { color: var(--color-dim); }
.confirm-actions { display: flex; gap: var(--space-xs); justify-content: flex-end; margin-top: var(--space-md); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active,
  .scene-card, .scene-card:hover,
  .package, .package:hover,
  .surprise-die, .surprise-hero:hover .surprise-die {
    transform: none;
    transition-duration: 150ms;
  }
}