/* ============================================================
   Meliškológ-style game UI kit
   Charred stone grounds, riveted bronze plates, chunky beveled
   buttons, gold extruded display type, parchment banners.

   Deliberately single-theme: this is a game world, not a
   document, so it commits to one dark palette in both schemes.
   ============================================================ */

:root {
  /* grounds */
  --char:      #14100c;
  --char-2:    #1d1710;
  --stone:     #2b2219;
  --stone-hi:  #3a2e22;
  --slate:     #241d16;

  /* bronze frame */
  --bronze:      #7a5630;
  --bronze-hi:   #c9a063;
  --bronze-lo:   #4a3218;
  --bronze-deep: #2a1c0e;

  /* text */
  --cream:     #f2e7d0;
  --cream-dim: #b9a888;
  --parch:     #d9c9a3;
  --parch-ink: #2e2418;

  /* accents */
  --ember:     #e8721f;
  --gold:      #f5c14a;
  --gold-lo:   #a9631a;

  /* button families */
  --green-hi: #8dc23e; --green-lo: #547f1f; --green-edge: #34500f; --green-drop: #263a0b;
  --blue-hi:  #57a8dc; --blue-lo:  #2b6a9d; --blue-edge:  #1a4467; --blue-drop:  #12314b;
  --amber-hi: #f2b845; --amber-lo: #bf7c18; --amber-edge: #7c4c0b; --amber-drop: #593606;
  --red-hi:   #d45743; --red-lo:   #962c1e; --red-edge:   #5f1a11; --red-drop:   #43110b;
  --slab-hi:  #4a3c2d; --slab-lo:  #2a211a; --slab-edge:  #16110c; --slab-drop:  #0e0a07;

  /* fonts */
  --f-display: Georgia, "Times New Roman", serif;
  --f-ui: "Arial Black", "Arial Bold", "Helvetica Neue", Impact, sans-serif;
  --f-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-num: ui-monospace, "SF Mono", "Cascadia Code", "Courier New", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* reusable grunge — fractal noise, no external asset */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background-color: var(--char);
  color: var(--cream);
  font-family: var(--f-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Charred ground with ember glow ---------- */
.ground {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 8%,  rgba(232, 114, 31, 0.13), transparent 60%),
    radial-gradient(ellipse 55% 40% at 84% 88%, rgba(232, 114, 31, 0.10), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, #241c14 0%, #14100c 60%, #0c0906 100%);
}
.ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.22;
  mix-blend-mode: overlay;
}

/* ---------- Riveted panel ---------- */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, var(--stone-hi) 0%, var(--slate) 55%, #1b150f 100%);
  border: 3px solid var(--bronze);
  border-radius: 14px;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, 0.20),
    inset 0 -4px 10px rgba(0, 0, 0, 0.65),
    0 6px 0 var(--bronze-deep),
    0 16px 34px rgba(0, 0, 0, 0.72);
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--noise);
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* corner rivets — four dots inset from the frame */
.rivets::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: inherit;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 0 0,       var(--bronze-hi) 0 2.4px, var(--bronze-lo) 2.4px 4.4px, transparent 4.6px),
    radial-gradient(circle at 100% 0,    var(--bronze-hi) 0 2.4px, var(--bronze-lo) 2.4px 4.4px, transparent 4.6px),
    radial-gradient(circle at 0 100%,    var(--bronze-hi) 0 2.4px, var(--bronze-lo) 2.4px 4.4px, transparent 4.6px),
    radial-gradient(circle at 100% 100%, var(--bronze-hi) 0 2.4px, var(--bronze-lo) 2.4px 4.4px, transparent 4.6px);
}

/* ---------- Gold extruded display type ---------- */
.gold-type {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffe9a3 0%, var(--gold) 42%, #d8912c 58%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(1.5px 0 0 #3a2110) drop-shadow(-1.5px 0 0 #3a2110)
    drop-shadow(0 1.5px 0 #3a2110) drop-shadow(0 -1.5px 0 #3a2110)
    drop-shadow(0 5px 0 #1f1207)
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.85));
  text-wrap: balance;
}

/* ---------- Chunky game button ---------- */
.gbtn {
  --hi: var(--slab-hi); --lo: var(--slab-lo); --edge: var(--slab-edge); --drop: var(--slab-drop);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-ui);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  background: linear-gradient(180deg, var(--hi) 0%, var(--lo) 100%);
  border: 2px solid var(--edge);
  border-radius: 11px;
  padding: 14px 30px;
  cursor: pointer;
  position: relative;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.34),
    inset 0 -5px 0 rgba(0, 0, 0, 0.30),
    0 5px 0 var(--drop),
    0 10px 16px rgba(0, 0, 0, 0.6);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.15s ease;
}
.gbtn:hover { filter: brightness(1.09); }
.gbtn:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.30),
    0 0 0 var(--drop),
    0 3px 7px rgba(0, 0, 0, 0.6);
}
.gbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gbtn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.gbtn:disabled:active { transform: none; }

.gbtn--green { --hi: var(--green-hi); --lo: var(--green-lo); --edge: var(--green-edge); --drop: var(--green-drop); }
.gbtn--blue  { --hi: var(--blue-hi);  --lo: var(--blue-lo);  --edge: var(--blue-edge);  --drop: var(--blue-drop); }
.gbtn--amber { --hi: var(--amber-hi); --lo: var(--amber-lo); --edge: var(--amber-edge); --drop: var(--amber-drop); }
.gbtn--red   { --hi: var(--red-hi);   --lo: var(--red-lo);   --edge: var(--red-edge);   --drop: var(--red-drop); }
.gbtn--sm    { font-size: 12px; padding: 9px 16px; border-radius: 9px; }

/* small square icon button, as in the kit's ✓ / ✕ / ? / gear tiles */
.gtile {
  --hi: var(--slab-hi); --lo: var(--slab-lo); --edge: var(--slab-edge); --drop: var(--slab-drop);
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  font-family: var(--f-ui);
  font-size: 17px;
  color: var(--cream);
  background: linear-gradient(180deg, var(--hi) 0%, var(--lo) 100%);
  border: 2px solid var(--edge);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.30),
    inset 0 -4px 0 rgba(0, 0, 0, 0.30),
    0 4px 0 var(--drop),
    0 8px 13px rgba(0, 0, 0, 0.55);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.15s ease;
}
.gtile:hover { filter: brightness(1.12); }
.gtile:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 0 0 var(--drop), 0 2px 5px rgba(0,0,0,.6); }
.gtile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gtile--green { --hi: var(--green-hi); --lo: var(--green-lo); --edge: var(--green-edge); --drop: var(--green-drop); }
.gtile--red   { --hi: var(--red-hi);   --lo: var(--red-lo);   --edge: var(--red-edge);   --drop: var(--red-drop); }
.gtile--amber { --hi: var(--amber-hi); --lo: var(--amber-lo); --edge: var(--amber-edge); --drop: var(--amber-drop); }

/* ---------- Swallowtail banner ---------- */
.banner {
  --b-hi: var(--blue-hi);
  --b-lo: var(--blue-lo);
  position: relative;
  display: inline-block;
  padding: 11px 40px;
  font-family: var(--f-ui);
  font-size: 14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, var(--b-hi), var(--b-lo));
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28);
}
.banner--parch {
  --b-hi: #e6d7b2;
  --b-lo: #bfa87c;
  color: var(--parch-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.banner--green { --b-hi: var(--green-hi); --b-lo: var(--green-lo); }
.banner--amber { --b-hi: var(--amber-hi); --b-lo: var(--amber-lo); }

/* ---------- Stat plate ---------- */
.plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 108px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #332a20, #1c1610);
  border: 2px solid var(--bronze-lo);
  border-radius: 11px;
  box-shadow: inset 0 2px 0 rgba(255, 220, 160, 0.14), inset 0 -3px 8px rgba(0, 0, 0, 0.6);
}
.plate .val {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
  line-height: 1.1;
}
.plate .key {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---------- Progress bar with badge ---------- */
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-badge {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  font-size: 19px;
  color: #4a2c05;
  background: linear-gradient(180deg, #ffd873, var(--gold-lo));
  border: 2px solid #6d3f08;
  border-radius: 10px;
  transform: rotate(-8deg);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 4px 0 #4a2a05, 0 7px 12px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.bar {
  position: relative;
  flex: 1;
  height: 30px;
  background: linear-gradient(180deg, #100c08, #221a12);
  border: 2px solid var(--bronze-lo);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85);
}
.bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, var(--green-hi) 0%, var(--green-lo) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 6px rgba(0, 0, 0, 0.35);
  transition: width 0.55s var(--ease-out);
}
.bar-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
}

/* ---------- Step dots ---------- */
.steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: center; }
.step {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--cream-dim);
  background: linear-gradient(180deg, #4b4036, #2a231b);
  border: 2px solid #14100b;
  border-radius: 50%;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 3px 0 #100c08;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}
.step-link { width: 14px; height: 4px; background: #2a231b; flex-shrink: 0; }
.step.is-done {
  background: linear-gradient(180deg, var(--green-hi), var(--green-lo));
  border-color: var(--green-edge);
  color: #16280a;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--green-drop);
}
.step.is-now {
  background: linear-gradient(180deg, #f9a03c, #cf6512);
  border-color: #7d3806;
  color: #3a1a02;
  transform: scale(1.18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 #5e2a04, 0 0 14px rgba(232, 114, 31, 0.65);
}
.step.is-miss {
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  border-color: var(--red-edge);
  color: #f2e7d0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 3px 0 var(--red-drop);
}

/* ---------- Crest / shield badge ---------- */
.crest {
  position: relative;
  width: 168px; height: 190px;
  display: grid;
  place-items: center;
  padding-bottom: 22px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 64%, 50% 100%, 0% 64%);
  background: linear-gradient(180deg, #4a3b2a 0%, #2a2018 100%);
  border-top: 3px solid var(--bronze);
  filter: drop-shadow(0 8px 0 var(--bronze-deep)) drop-shadow(0 14px 20px rgba(0, 0, 0, 0.8));
}
.crest::before {
  content: "";
  position: absolute;
  inset: 7px;
  clip-path: inherit;
  border: 2px solid rgba(201, 160, 99, 0.4);
  pointer-events: none;
}
.crest--gold  { background: linear-gradient(180deg, #7a5c22, #3a2a0e); }
.crest--green { background: linear-gradient(180deg, #3f5c1c, #22300e); }
.crest--red   { background: linear-gradient(180deg, #6e2b1c, #33130c); }

/* ---------- Parchment tip bubble ---------- */
.bubble {
  position: relative;
  background: linear-gradient(180deg, #e6d7b2, #c4ad81);
  color: var(--parch-ink);
  border: 2px solid #8a744a;
  border-radius: 12px;
  padding: 13px 17px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 5px 0 #6b5734, 0 10px 18px rgba(0, 0, 0, 0.55);
}
.bubble a { color: #7a3d06; }
.bubble--blue {
  background: linear-gradient(180deg, var(--blue-hi), var(--blue-lo));
  color: var(--cream);
  border-color: var(--blue-edge);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 5px 0 var(--blue-drop), 0 10px 18px rgba(0, 0, 0, 0.55);
}
.bubble--blue a { color: #ffe9a3; }

/* ---------- Status-bar face (Doom-style recessed box) ----------
   Sprite is 24x29; the box keeps that ratio and scales it with
   nearest-neighbour so the pixels stay square and hard-edged. */
.avatar {
  position: relative;
  width: 54px; height: 65px;
  flex-shrink: 0;
  overflow: hidden;
  background: #0d0a07;
  border: 3px solid;
  border-color: #16110c #7a6650 #7a6650 #16110c;   /* sunken bevel */
  box-shadow:
    inset 0 0 0 1px #0a0705,
    inset 0 3px 7px rgba(0, 0, 0, 0.9),
    0 3px 0 var(--bronze-deep);
  image-rendering: pixelated;
}
.avatar img,
.avatar canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.avatar.pop { animation: avatar-pop 0.4s var(--ease-out); }
@keyframes avatar-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
.avatar--lg { width: 84px; height: 101px; }

/* ---------- Section label ---------- */
.slabel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}
.slabel::after {
  content: "";
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bronze-lo), transparent);
}

/* ---------- Inputs, styled as inset stone ---------- */
.ginput {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 13px;
  border-radius: 9px;
  border: 2px solid var(--bronze-lo);
  background: linear-gradient(180deg, #16110c, #241c14);
  color: var(--cream);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8);
}
.ginput::placeholder { color: #6f6252; }
.ginput:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
select.ginput { cursor: pointer; }

/* ============================================================
   Sheet art
   Slices lifted straight from the Meliškológ graphic set, in
   assets/. Every rule here is additive — drop the art class and
   the CSS-drawn component underneath still stands on its own.
   ============================================================ */

/* painted art is not pixel art — undo the sprite scaling */
.avatar img {
  image-rendering: auto;
  object-fit: cover;
}

/* an icon riding inside a chip, button or label */
.ico-art {
  display: block;
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
.ico-art--lg { width: 2.3em; height: 2.3em; }
/* the small button's type is tiny, so its icon needs the wider ratio */
.gbtn--sm .ico-art { width: 2em; height: 2em; margin: -3px -6px -3px 0; }

/* a tile that *is* the painted plate, so the CSS bevel steps aside */
.gtile--art {
  background: none;
  border: 0;
  box-shadow: none;
  width: 46px; height: 46px;
  padding: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.7));
}
.gtile--art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gtile--art:active { transform: translateY(4px); box-shadow: none; }

/* wordmark */
.logo-art {
  display: block;
  width: min(360px, 84%);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}

/* character portrait — framed the way the kit frames him on its own
   panels, so the crop's edge reads as a frame rather than a seam */
.hero-art {
  display: block;
  width: min(300px, 78%);
  height: auto;
  border: 3px solid var(--bronze);
  border-radius: 12px;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, 0.2),
    0 5px 0 var(--bronze-deep),
    0 12px 26px rgba(0, 0, 0, 0.7);
}
.hero-art--tall { width: min(150px, 34%); }

/* shield badge, standing in for the CSS crest */
.badge-art {
  display: block;
  width: 172px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8));
}

/* section label with a plate icon */
.slabel .ico-art { width: 26px; height: 26px; }

/* the progress bar's badge, painted rather than drawn */
.bar-badge.art {
  background: none;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7));
}
.bar-badge.art img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}