/* =========================================================================
   OVERWORLD skin for Spritecraft Siege
   Re-themes the whole game UI (HUD, modals, cards, HUD bars) and the canvas
   palette with the OVERWORLD kit's look: warm parchment, ink borders,
   hard offset block shadows, cobalt / vermillion / moss accents.

   Loaded AFTER plastic-mule's system.css — only token overrides + a few
   component-face swaps. No markup changes.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap");

:root {
  /* Palette — OVERWORLD hues, mapped onto the game's token roles.
     primary stays a moss green (it IS the meadow), vermillion takes danger,
     cobalt takes frost/focus. */
  --sc-bg: #f2ead6;
  --sc-surface: #fffaef;
  --sc-surface-sunken: #f6eddc;
  --sc-ink: #161310;
  --sc-ink-soft: #3a332a;
  --sc-muted: #6b6254;
  --sc-line: #161310;

  --sc-primary: #3f8a56;
  --sc-primary-hi: #7bd374;
  --sc-primary-lo: #20512f;
  --sc-primary-shadow: rgba(32, 81, 47, 0.55);
  --sc-primary-highlight: rgba(123, 211, 116, 0.99);
  --sc-primary-pressed: #20512f;

  --sc-secondary: #c08b46;
  --sc-secondary-hi: #f7cf87;
  --sc-secondary-lo: #7d5316;

  --sc-tertiary: #2e5dd6;
  --sc-tertiary-hi: #8fb7ff;
  --sc-tertiary-lo: #1f3f78;

  --sc-danger: #e2522e;
  --sc-danger-hi: #ff8a66;
  --sc-danger-lo: #8f2a10;

  --sc-on-primary: #fffaef;
  --sc-on-surface: #161310;
  --sc-focus: #2e5dd6;

  /* Typography — OVERWORLD faces. */
  --sc-font-display: "Pixelify Sans", "Courier New", monospace;
  --sc-font-body: "VT323", "Courier New", monospace;
  --sc-font-micro: "Silkscreen", "Courier New", monospace;

  /* Borders — ink, chunky, no softness. */
  --sc-border-thin: 2px solid var(--sc-line);
  --sc-border-thick: 3px solid var(--sc-line);

  /* Elevation — hard offset block shadows, no blur. */
  --sc-bevel-light: 4px 4px 0 0 var(--sc-ink);
  --sc-bevel-primary: 3px 3px 0 0 var(--sc-ink);
  --sc-drop-1: 0 6px 0 0 rgba(22, 19, 16, 0.25);
  --sc-drop-2: 0 8px 0 0 rgba(22, 19, 16, 0.25);
  --sc-drop-3: 0 10px 0 0 rgba(22, 19, 16, 0.2);
}

/* --- Component faces ---------------------------------------------------- */

/* Chips get the sticker treatment: ink border, tap shadow, slight tilt. */
.sc-chip {
  border: var(--sc-border-thin);
  box-shadow: 2px 2px 0 0 var(--sc-ink);
  transform: rotate(-1.5deg);
}
.sc-chip--green { transform: rotate(1.2deg); }
.sc-chip--gold { transform: rotate(-1deg); }
.sc-chip--cyan { transform: rotate(1.6deg); }
.sc-chip--red { transform: rotate(-1.4deg); }
.gf-hud__chips .sc-chip:first-child { transform: none; }   /* title chip stays straight */

/* Buttons: hard shadow, real press (translate into the page). */
.sc-btn {
  border: var(--sc-border-thick);
  border-radius: 0;
  box-shadow: 4px 4px 0 0 var(--sc-ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.sc-btn:hover,
.sc-btn:focus-visible { box-shadow: 5px 5px 0 0 var(--sc-ink); }
.sc-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--sc-ink);
}

/* Modal + level-up cards: bone panel, chunky ink frame, card-block shadow. */
.sc-card,
.gf-choice {
  border: var(--sc-border-thick);
  border-radius: 0;
  box-shadow: 6px 6px 0 0 var(--sc-ink);
}
.gf-choice:hover,
.gf-choice:focus-visible { box-shadow: 7px 7px 0 0 var(--sc-ink); }
.gf-choice--picked { box-shadow: 8px 8px 0 0 var(--sc-ink); }

/* Headlines lean into OVERWORLD's blocky editorial stance. */
.gf-modal .sc-card__title,
#overlay-title,
.sc-title-panel h1 {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* HUD bars: tan trough, ink frame, sunken strip. */
.sc-questbar { border: var(--sc-border-thin); }