/* Superevent dashboard layout — fixed 1920×1080 canvas.
   Components are absolutely positioned by the active template's coord map
   (see js/templates/*.js). This file owns the stage chrome and per-component
   panel styling; the grid columns of the old responsive layout are gone. */

:root {
  --stage-w: 1920px;
  --stage-h: 1080px;
}

.superevent-stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  /* Metal texture simulated with pure CSS. Three layers:
       1. Inline SVG `feTurbulence` noise → grungy grain (small data-URI).
       2. repeating-linear-gradient → faint vertical brushed-metal streaks.
       3. Base dark colour.
     No external asset, no library, scales to any size. Tune opacity /
     baseFrequency inside the SVG to get more/less grain. */
  background-color: #13161a;
  background-image:
    /* Brushed-metal scratches — anisotropic SVG noise (very wide X, tight
       Y frequency) produces horizontal streaks that read as scratches in
       a milled steel plate. */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='tno-stage-noise'><feTurbulence type='fractalNoise' baseFrequency='0.04 0.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0.30 0'/></filter><rect width='100%25' height='100%25' filter='url(%23tno-stage-noise)'/></svg>"),
    /* Vertical brushed striations — alternating light/dark 1-px lines
       give the chromed/brushed directionality metal has. */
    repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.035) 0 1px,
        transparent 1px 3px,
        rgba(0, 0, 0, 0.06) 3px 4px,
        transparent 4px 6px
      ),
    /* Vertical tonal gradient — lighter at top, darker at bottom.
       Suggests overhead light on a real metal surface. */
    linear-gradient(180deg, #1c1f23 0%, #0e1014 100%);
  background-blend-mode: overlay, normal, normal;
  border: 1px solid #2a2d31;
  box-shadow:
    inset 0 0 100px rgba(0, 0, 0, 0.5),
    0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Every host div inside the stage is absolutely positioned by the
   template. Default to filling its assigned box. */
.superevent-stage > [id^="se-"] {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

/* Hidden components — completely hidden in view mode, semi-transparent 
   in edit mode so they can still be selected and shown again. */
.superevent-stage > [id^="se-"].is-hidden {
  display: none;
}
.superevent-stage.is-debug > [id^="se-"].is-hidden {
  display: block;
  opacity: 0.2;
  pointer-events: auto;
}

/* ── Universal riveted-metal frame ───────────────────────────────────
   Every stage host gets a thin textured frame by default. The frame
   lives INSIDE the host's allocated rectangle (box-sizing: border-box
   on the rule above), so two adjacent components can never paint over
   each other's borders — the 5px ring always stays within each host's
   own coordinates.

   Opted out via class-based :not(): components that provide their own
   framing (leader portrait image, title banner, newspaper paper +
   pieces, pie chart wrapper). To ADD a component to the opt-out list,
   just include its host class in the :not() list below — no per-file
   CSS edits needed.

   Specificity is zeroed with :where() so any component CSS that sets
   its own border (e.g. the thick variant below for heavy panels) wins
   without needing !important. */
:where(
  .superevent-stage
    > [id^="se-"]:not(
      .leader-portrait,
      .event-title,
      .newspaper-piece,
      .newspaper-panel,
      .pie-frame
    )
) {
  border-style: solid;
  border-width: var(--frame-width);
  border-color: transparent;
  border-image: var(--ui-tiled) var(--frame-slice) / var(--frame-width) / 0
    stretch;
}

/* Pie frame — the one host div that contains its own title+chart stack. */
.pie-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: radial-gradient(ellipse at center, #14171a 0%, #060503 80%);
  border: 1px solid #3c3f43;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 40px rgba(0, 0, 0, 0.7);
}
.pie-frame-title {
  font-family: var(--font-title);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212, 210, 202, 0.2);
  width: 80%;
  text-align: center;
}
#pie-host {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pie-host > * {
  max-height: 100%;
  max-width: 100%;
}

/* Heavy-panel variant of the frame — widens the 5px default to 14px
   for components that want the in-game chunky-metal look. The border
   properties come from the universal rule above; we only override
   width + slice here, plus add the panel interior gradient, inset
   highlights, and padding.

   Add a new component to this list to give it the thick frame;
   remove one to drop it back to the default 5px. */
.national-spirits,
.economic-system,
.country-info-card,
.music-player,
.biography-panel,
.alliance-panel,
.relations-panel {
  border-width: var(--frame-width-thick);
  border-image: var(--ui-tiled) var(--frame-slice) / var(--frame-width-thick) /
    0 stretch;
  /* Interior plate — based on --panel-interior so the panel body
     matches every other component interior across the dashboard. */
  background: linear-gradient(
    180deg,
    #1b2029 0%,
    var(--panel-interior-lo) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 36px rgba(0, 0, 0, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.55);
  padding: 6px 10px;
  position: relative;
  height: 100%;
}

/* Leader portrait gets its own frame — see misc-components.css. */