@import "./assets/depth-tokens.css";

/* Visible surrounding surfaces. Never put hidden art beneath opaque canvases. */
body.fp-depth-art .hero,
body.fp-depth-art .map-card,
body.fp-depth-art .play-ad,
body.fp-depth-art .sheet {
  color: var(--fp-ink);
  background-color: var(--fp-paper);
  background-image: url("./assets/depth-paper-grain.svg");
}
body.fp-depth-art .hero::before {
  content: "";
  display: block;
  height: 64px;
  margin: 0 0 var(--fp-space-3);
  background: url("./assets/depth-prize-booth.svg") center / contain no-repeat;
  pointer-events: none;
}
body.fp-depth-art .hero h1 { color: var(--fp-magenta); }
body.fp-depth-art .btn,
body.fp-depth-art .hud .btn,
body.fp-depth-art .hud .fortpop-scout-panel .btn,
body.fp-depth-art .map-card { min-height: var(--fp-touch); min-width: var(--fp-touch); }
body.fp-depth-art .btn { white-space: normal; overflow-wrap: anywhere; }
body.fp-depth-art .btn--mag,
body.fp-depth-art #btn-wave.is-early:not(:disabled) { background: var(--fp-magenta); color: var(--fp-paper); }
body.fp-depth-art .btn.is-on,
body.fp-depth-art .btn[aria-pressed="true"] { background: var(--fp-teal); color: var(--fp-paper); }
body.fp-depth-art .shop .btn.is-on { outline: 3px solid var(--fp-ticket); outline-offset: -6px; }
body.fp-depth-art .btn:disabled { opacity: .48; }
body.fp-depth-art .stat {
  background: var(--fp-paper);
  color: var(--fp-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
body.fp-depth-art .stat b,
body.fp-depth-art .end-score b,
body.fp-depth-art .end-best.is-new,
body.fp-depth-art .end-stars,
body.fp-depth-art .map-stars { color: var(--fp-magenta); font-variant-numeric: tabular-nums; }
body.fp-depth-art .stat.is-up b { color: var(--fp-teal); }
body.fp-depth-art .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.fp-depth-art .shop .btn { min-width: 0; padding: var(--fp-space-2); }
body.fp-depth-art .shop .toy > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
body.fp-depth-art .shop .cost { font-variant-numeric: tabular-nums; }
body.fp-depth-art .inspect { color: var(--fp-ink); }
body.fp-depth-art .inspect p { width: 100%; overflow-wrap: anywhere; }
body.fp-depth-art .map-card[data-map="1"] { background-color: var(--fp-mint); }
body.fp-depth-art .map-card[data-map="2"] { background-color: var(--fp-violet); }
body.fp-depth-art .map-card[data-map="3"] { background-color: var(--fp-sand); }
body.fp-depth-art .map-card { min-width: 0; overflow-wrap: anywhere; }
body.fp-depth-art .overlay {
  overflow-y: auto;
  align-items: safe center;
  padding-block: max(var(--fp-space-4), env(safe-area-inset-top)) max(var(--fp-space-4), env(safe-area-inset-bottom));
}
body.fp-depth-art .sheet { max-width: 100%; min-width: 0; }
body.fp-depth-art .end-score,
body.fp-depth-art .end-stats dd { overflow-wrap: anywhere; }
body.fp-depth-art .sheet .row > .btn { flex: 1 1 8rem; }
body.fp-depth-art .btn:focus-visible,
body.fp-depth-art .map-card:focus-visible {
  outline: 3px solid var(--fp-focus);
  outline-offset: 3px;
}
body.fp-depth-art #stage:focus-visible { outline: 4px solid var(--fp-ticket); outline-offset: -4px; }
@media (max-width: 959px) {
  /* Parent-approved flow: same HUD, same canvas, original measured cellAt. */
  body.fp-depth-art[data-screen="play"] { overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  body.fp-depth-art .play-rail { height: auto; grid-template-rows: auto auto; }
  body.fp-depth-art .arena { height: auto; grid-template-rows: auto auto; }
  body.fp-depth-art .hud {
    position: static;
    padding: var(--fp-space-2);
    gap: var(--fp-space-2);
    background: var(--fp-sky);
    border-bottom: 2px solid var(--fp-ink);
  }
  body.fp-depth-art .hud > .stat { flex: 1 1 100px; }
  body.fp-depth-art .hud .btn { padding: .45rem .65rem; }
  body.fp-depth-art .stage-wrap { height: max(22rem, calc(100vw * 9 / 7)); }
  body.fp-depth-art .play-ad { padding-bottom: max(var(--fp-space-3), env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  body.fp-depth-art .hero { padding: var(--fp-space-4); }
  body.fp-depth-art .hero::before { height: 48px; }
  body.fp-depth-art .shop .toy { font-size: .875rem; }
  body.fp-depth-art .shop .toy small { font-size: .75rem; }
  body.fp-depth-art .sheet { padding: var(--fp-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  body.fp-depth-art .btn,
  body.fp-depth-art .map-card { transition: none; transform: none; }
}