/* Hallmark · macrostructure: Sticker sheet / mascot HUD · theme: polar-sprout cream */
/* Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V5 · source-feel thicken 2026-09-07 */

:root {
  --snow: oklch(98% 0.012 85);
  --cream: oklch(95% 0.02 85);
  --mat: oklch(90% 0.035 80);
  --ink: oklch(26% 0.035 55);
  --mute: oklch(48% 0.03 55);
  --line: oklch(38% 0.045 55);
  --sprout: oklch(78% 0.09 155);
  --ice: oklch(78% 0.08 230);
  --honey: oklch(88% 0.13 92);
  --blush: oklch(72% 0.12 18);
  --puddle: oklch(68% 0.12 230);
  --arm-idle: oklch(62% 0.045 70);
  --cell: oklch(99% 0.012 85);
  --font-display: "M PLUS Rounded 1c", sans-serif;
  --font-body: "M PLUS Rounded 1c", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
  background: var(--snow);
  color: var(--ink);
  font-family: var(--font-body);
}
body {
  min-height: 100svh;
  background-image:
    radial-gradient(90% 40% at 50% -8%, oklch(88% 0.08 92 / 0.55), transparent 58%),
    radial-gradient(40% 28% at 12% 88%, oklch(82% 0.06 155 / 0.28), transparent 70%),
    linear-gradient(180deg, var(--cream), var(--snow) 42%, oklch(90% 0.03 230 / 0.35));
}

.wrap {
  width: min(28rem, calc(100% - 1.1rem));
  margin: 0 auto;
  padding: 0.55rem 0 1.6rem;
  padding-top: max(0.55rem, env(safe-area-inset-top));
}

.hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.7rem;
  align-items: start;
}
.kun {
  width: 4.6rem;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
}
.kun__face {
  width: 4.6rem;
  height: 4.6rem;
  object-fit: contain;
  background: oklch(99% 0.01 85);
  border: 3px solid var(--line);
  border-radius: 42%;
  transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.kun__say {
  margin: 0;
  max-width: 100%;
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: white;
  border: 2px solid var(--line);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
.kun.is-spill .kun__face {
  border-color: var(--puddle);
  animation: kun-spill 0.55s ease;
}
.kun.is-warm .kun__face {
  border-color: var(--honey);
  animation: kun-warm 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.kun.is-react .kun__say { animation: say-pop 0.28s ease; }
.hud__copy { min-width: 0; }
.hud__where {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--sprout);
}
h1 {
  margin: 0.08rem 0 0.35rem;
  font-family: var(--font-display), sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: clamp(1.25rem, 6.2vw, 1.7rem);
  overflow-wrap: anywhere;
  min-width: 0;
  line-height: 1.2;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
}
.chip {
  display: inline-grid;
  place-items: center;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
  background: white;
}
.chip--live { color: oklch(42% 0.08 92); border-color: var(--honey); background: oklch(97% 0.04 92); }
.chip--fault {
  color: white;
  background: var(--puddle);
  border-color: var(--puddle);
  animation: fault-chip 0.7s ease-in-out infinite;
}
.chip--mute { color: var(--mute); }
.chip[hidden] { display: none; }

.pulse {
  margin: 0.45rem 0 0.12rem;
  min-height: 1.4em;
  color: var(--mute);
  font-size: 0.9rem;
  font-weight: 700;
}
.pulse.is-fault { color: oklch(42% 0.12 230); font-weight: 800; }
.pulse.is-clear {
  color: oklch(42% 0.11 92);
  animation: pulse-clear 0.4s ease;
}

.legend {
  margin: 0 0 0.55rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.board-wrap {
  padding: 0.62rem;
  background:
    linear-gradient(180deg, oklch(93% 0.03 80), var(--mat));
  border: 3px solid var(--line);
  border-radius: 1.45rem;
  box-shadow:
    inset 0 1px 0 oklch(100% 0.01 85 / 0.65),
    0 8px 18px oklch(40% 0.03 55 / 0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.board-wrap.is-fault {
  border-color: var(--puddle);
  box-shadow:
    inset 0 0 2.4rem oklch(68% 0.12 230 / 0.38),
    0 0 0 3px oklch(68% 0.12 230 / 0.25);
}
.board-wrap.is-fault.is-shake {
  animation: board-shake 0.42s ease;
}
.board-wrap.is-clear {
  border-color: var(--honey);
  box-shadow:
    inset 0 0 1.8rem oklch(88% 0.13 92 / 0.35),
    0 0 0 3px oklch(88% 0.13 92 / 0.22);
}
.board-wrap.is-clear.is-pop {
  animation: board-pop 0.48s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.board {
  display: grid;
  gap: 0.28rem;
}

.cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border: 2.5px solid oklch(58% 0.04 70);
  border-radius: 28%;
  padding: 0;
  background:
    linear-gradient(180deg, var(--cell), oklch(94% 0.02 85));
  box-shadow:
    inset 0 1px 0 oklch(100% 0.01 85 / 0.9),
    0 2px 0 oklch(70% 0.03 80 / 0.45);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cell:not(:disabled):active {
  transform: scale(0.94);
  box-shadow: inset 0 2px 4px oklch(50% 0.03 55 / 0.18);
}
.cell.is-spin {
  animation: cell-spin-pop 0.28s cubic-bezier(0.34, 1.55, 0.64, 1);
}
.cell:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 2px;
}
.cell.is-none {
  cursor: default;
  border-color: transparent;
  background: oklch(84% 0.025 80 / 0.42);
  box-shadow: inset 0 0 0 1px oklch(70% 0.02 80 / 0.25);
}
.cell.is-locked {
  cursor: default;
  border-style: dashed;
  border-color: oklch(55% 0.03 55);
  background:
    repeating-linear-gradient(
      -45deg,
      oklch(96% 0.01 85),
      oklch(96% 0.01 85) 4px,
      oklch(92% 0.02 85) 4px,
      oklch(92% 0.02 85) 8px
    );
}
.cell.is-locked:active { transform: none; box-shadow: inset 0 1px 0 oklch(100% 0.01 85 / 0.9); }
.cell.is-live {
  background: oklch(97% 0.07 92);
  border-color: var(--honey);
  box-shadow:
    inset 0 1px 0 oklch(100% 0.02 92 / 0.85),
    0 0 0 1px oklch(88% 0.13 92 / 0.35);
}
.cell.is-src.is-live {
  box-shadow: 0 0 0 2px var(--honey), 0 0 12px oklch(88% 0.13 92 / 0.45);
}
.cell.is-lamp.is-live {
  background: oklch(97% 0.06 88);
  box-shadow: 0 0 1.15rem oklch(88% 0.13 92 / 0.65);
}
.cell.is-chain {
  box-shadow:
    0 0 0 2px oklch(88% 0.13 92 / 0.7),
    0 0 1.35rem oklch(88% 0.12 92 / 0.85);
  animation: chain-ring 0.55s ease;
}
.cell.is-fault {
  background: oklch(88% 0.05 230);
  border-color: oklch(58% 0.1 230);
}
.cell.is-leak.is-hot {
  background: var(--puddle);
  border-color: oklch(48% 0.12 230);
  animation: fault-pulse 0.65s ease-in-out infinite;
  box-shadow: 0 0 1.2rem oklch(68% 0.12 230 / 0.65);
}
.cell.is-killed {
  background: oklch(88% 0.02 80);
  box-shadow: inset 0 0 0 2px oklch(55% 0.08 230 / 0.6);
  opacity: 0.72;
}
.cell.is-in { animation: hop-cell 0.26s cubic-bezier(0.34, 1.55, 0.64, 1); }
.cell.is-lamp.is-live.is-in { animation: hop-lamp 0.34s cubic-bezier(0.34, 1.6, 0.64, 1); }

.rotor {
  position: absolute;
  inset: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.55, 0.64, 1);
  will-change: transform;
}

.arm {
  position: absolute;
  background: var(--arm-idle);
  pointer-events: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px oklch(45% 0.04 55 / 0.25);
}
.cell.is-live .arm {
  background: var(--honey);
  box-shadow: 0 0 10px oklch(88% 0.13 92 / 0.75);
}
.cell.is-fault .arm,
.cell.is-leak.is-hot .arm {
  background: var(--puddle);
  box-shadow: 0 0 10px oklch(68% 0.12 230 / 0.6);
}
.cell.is-killed .arm { background: oklch(72% 0.02 80); box-shadow: none; }

.arm-n { left: 32%; right: 32%; top: 0; height: 60%; }
.arm-s { left: 32%; right: 32%; bottom: 0; height: 60%; }
.arm-e { top: 32%; bottom: 32%; right: 0; width: 60%; }
.arm-w { top: 32%; bottom: 32%; left: 0; width: 60%; }

.slug {
  position: absolute;
  background: white;
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
}
.cell.is-live .slug { opacity: 1; }
.cell.is-fault .slug,
.cell.is-leak.is-hot .slug { background: oklch(96% 0.03 230); opacity: 1; }
.cell.is-killed .slug { opacity: 0; }
.slug-n { left: 37%; right: 37%; top: 0; height: 30%; animation: crawl-n 0.62s linear infinite; }
.slug-s { left: 37%; right: 37%; bottom: 0; height: 30%; animation: crawl-s 0.62s linear infinite; }
.slug-e { top: 37%; bottom: 37%; right: 0; width: 30%; animation: crawl-e 0.62s linear infinite; }
.slug-w { top: 37%; bottom: 37%; left: 0; width: 30%; animation: crawl-w 0.62s linear infinite; }

.hub {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: oklch(78% 0.04 75);
  border: 2px solid oklch(55% 0.04 55 / 0.35);
  pointer-events: none;
}
.cell.is-live .hub {
  background: var(--honey);
  border-color: oklch(70% 0.1 92 / 0.5);
  box-shadow: 0 0 10px var(--honey);
}
.cell.is-src .hub,
.cell.is-lamp .hub,
.cell.is-leak .hub { opacity: 0; }
.cell.is-fault .hub,
.cell.is-leak.is-hot .hub { background: var(--puddle); box-shadow: none; opacity: 1; border-color: transparent; }
.cell.is-killed .hub { background: oklch(78% 0.02 80); opacity: 1; }

.face {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
.cell.is-lamp.is-live .face {
  filter: drop-shadow(0 0 8px oklch(88% 0.13 92 / 0.9));
}
.cell.is-killed .face { opacity: 0.28; filter: grayscale(0.75) brightness(0.9); }
.cell.is-leak.is-hot .face {
  filter: drop-shadow(0 0 8px oklch(68% 0.12 230 / 0.85));
  animation: leak-face 0.65s ease-in-out infinite;
}

.spark {
  position: absolute;
  width: 0.48rem;
  height: 0.48rem;
  margin: -0.24rem;
  background: var(--honey);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  box-shadow: 0 0 6px oklch(88% 0.13 92 / 0.8);
}
.spark.is-on {
  opacity: 1;
  animation: spark 0.32s steps(2, end) infinite;
}
.spark.is-fault {
  background: var(--puddle);
  box-shadow: 0 0 6px oklch(68% 0.12 230 / 0.8);
}
.spark-n { left: 50%; top: 0; }
.spark-s { left: 50%; top: 100%; }
.spark-e { left: 100%; top: 50%; }
.spark-w { left: 0; top: 50%; }

.note {
  min-height: 1.35em;
  margin: 0.55rem 0 0.7rem;
  color: var(--mute);
  font-size: 0.88rem;
  font-weight: 700;
}

.dock { display: grid; gap: 0.45rem; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
}
.ghost, .share, .pip {
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.ghost, .share {
  min-height: 2.9rem;
  width: 100%;
  border-radius: 999px;
}
.ghost {
  border: 2px solid var(--line);
  color: var(--ink);
  background: white;
}
.ghost:disabled {
  opacity: 0.4;
  cursor: default;
}
.share {
  border: 0;
  color: var(--ink);
  background: var(--honey);
}
.share[hidden] { display: none; }
.pips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}
.pip {
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.35rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--mute);
  font-size: 0.72rem;
}
.pip.is-on { background: var(--honey); color: var(--ink); border-color: var(--honey); }
.pip.is-done { background: var(--sprout); color: white; border-color: var(--sprout); }
.ghost:focus-visible,
.share:focus-visible,
.pip:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 3px;
}

@keyframes crawl-n { from { transform: translateY(120%); } to { transform: translateY(-160%); } }
@keyframes crawl-s { from { transform: translateY(-120%); } to { transform: translateY(160%); } }
@keyframes crawl-e { from { transform: translateX(-120%); } to { transform: translateX(160%); } }
@keyframes crawl-w { from { transform: translateX(120%); } to { transform: translateX(-160%); } }
@keyframes spark {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.2; transform: scale(0.7); }
}
@keyframes hop-cell {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes hop-lamp {
  0% { transform: scale(0.86); filter: brightness(1.15); }
  55% { transform: scale(1.12); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes fault-pulse {
  50% { filter: brightness(1.18); transform: scale(1.03); }
}
@keyframes leak-face {
  50% { transform: scale(1.06); }
}
@keyframes board-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-0.4deg); }
  40% { transform: translateX(4px) rotate(0.4deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes board-pop {
  0% { transform: scale(0.985); }
  45% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes cell-spin-pop {
  0% { transform: scale(0.92); }
  55% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes chain-ring {
  0% { box-shadow: 0 0 0 0 oklch(88% 0.13 92 / 0.9), 0 0 0.4rem oklch(88% 0.12 92 / 0.4); }
  100% { box-shadow: 0 0 0 2px oklch(88% 0.13 92 / 0.7), 0 0 1.35rem oklch(88% 0.12 92 / 0.85); }
}
@keyframes kun-spill {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-3deg); }
  55% { transform: translateX(3px) rotate(3deg); }
}
@keyframes kun-warm {
  0% { transform: scale(0.92) translateY(2px); }
  55% { transform: scale(1.08) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes say-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes pulse-clear {
  0% { letter-spacing: 0; opacity: 0.7; }
  40% { letter-spacing: 0.02em; opacity: 1; }
  100% { letter-spacing: 0; }
}
@keyframes fault-chip {
  50% { filter: brightness(1.12); transform: scale(1.04); }
}

@media (max-width: 360px) {
  .kun, .kun__face { width: 3.7rem; height: 3.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rotor,
  .cell.is-in,
  .cell.is-spin,
  .cell.is-chain,
  .slug,
  .spark.is-on,
  .cell.is-leak.is-hot,
  .board-wrap.is-shake,
  .board-wrap.is-pop,
  .kun.is-spill .kun__face,
  .kun.is-warm .kun__face,
  .kun.is-react .kun__say,
  .pulse.is-clear,
  .chip--fault,
  .cell.is-lamp.is-live.is-in {
    animation: none !important;
    transition: none !important;
  }
  .cell.is-live .slug { opacity: 0.7; }
  .cell:not(:disabled):active { transform: none; }
}