@import "tailwindcss";

/* v2 — force re-evaluation */

/* ===========================================================
   PR Party — battle map aesthetic
   The page is a dim chamber; the printed battle map is a lit
   table in the center. Everything outside the map is crema oscuro.
   =========================================================== */

:root {
  /* room — outside the map */
  --room:        #1E1A14;
  --room-edge:   #14110C;   /* vignette towards the borders */
  --room-rim:    #2A241C;   /* faint warm rim near the map */

  /* parchment table — used by HUD frames and panels */
  --parchment:        #E9DCB7;
  --parchment-deep:   #C7B485;
  --parchment-ink:    #2B2418;

  /* ink colors that read on the dim room */
  --fg:         #EFE4C9;   /* warm ivory */
  --fg-muted:   #B6A684;
  --fg-soft:    #7A6D52;

  /* rules */
  --border:        rgba(233, 220, 183, 0.14);
  --border-strong: rgba(233, 220, 183, 0.28);
  --border-gold:   #B0884B;   /* HUD frame */
  --border-gold-hi: #E0BB72;

  /* shadows */
  --shadow-map:
    0 60px 120px -40px rgba(0, 0, 0, 0.85),
    0 18px 40px -12px rgba(0, 0, 0, 0.55);
  --shadow-panel:
    0 24px 50px -22px rgba(0, 0, 0, 0.75),
    0 4px 10px -4px rgba(0, 0, 0, 0.35);
  --shadow-robot:
    0 18px 24px -12px rgba(0, 0, 0, 0.55),
    0 4px 8px -2px rgba(0, 0, 0, 0.35);
}

/* Tailwind v4 theme tokens — per-character accents + fonts */
@theme inline {
  --color-aegis:  #C2410C;
  --color-schema: #0E7490;
  --color-pixel:  #BE185D;
  --color-atlas:  #4D7C0F;
  --color-echo:   #6D28D9;
  --color-codex:  #B45309;

  --color-verdict-ok:   #4D7C0F;
  --color-verdict-warn: #B45309;
  --color-verdict-bad:  #B91C1C;

  --font-sans:    var(--font-inter);
  --font-mono:    var(--font-jetbrains-mono);
  --font-display: var(--font-fraunces);
}

html,
body {
  background: var(--room);
  color: var(--fg);
}

body {
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11", "calt";
  -webkit-font-smoothing: antialiased;
  overflow: hidden;            /* the board is a fixed stage */

  /* dim room: a warm pool of light around the table, falling off to near-black */
  background-image:
    radial-gradient(120% 90% at 50% 55%, var(--room-rim) 0%, var(--room) 38%, var(--room-edge) 100%);
  background-attachment: fixed;
}

/* very fine film grain on the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.9'/></svg>");
}

::selection {
  background: rgba(224, 187, 114, 0.30);
  color: var(--fg);
}

/* ===========================================================
   Atmosphere keyframes
   =========================================================== */

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes halo-breath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}

@keyframes ring-out {
  0%   { transform: scale(0.6); opacity: 0.65; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes ember-rise {
  0%   { transform: translate(0, 0)   scale(1);   opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translate(var(--vx, 0), -38px) scale(0.4); opacity: 0; }
}

@keyframes crit-shake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-3px, 1px); }
  40%      { transform: translate(3px, -1px); }
  60%      { transform: translate(-2px, 2px); }
  80%      { transform: translate(2px, -1px); }
}

/* hotspot debug grid — toggled by data-debug on the board */
[data-debug="true"] .hotspot {
  outline: 1px dashed rgba(224, 187, 114, 0.55);
  outline-offset: -1px;
}
[data-debug="true"] .hotspot::after {
  content: attr(data-character);
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(224, 187, 114, 0.85);
  pointer-events: none;
  white-space: nowrap;
}