/* ============================================================
   Katapult Design System v1.0 — tokens + core components
   Source of truth: Design/DesignSystem.md (from Concept/ art)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital@0;1&family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');

:root {
  /* Surfaces */
  --k-bg: #12101f;
  --k-bg-raised: #1c1930;
  --k-bg-inset: #252140;
  --k-line: #3a3458;

  /* Gold */
  --k-gold: #c9a45c;
  --k-gold-bright: #e8c477;
  --k-gold-dim: #8a713f;

  /* Parchment & ink */
  --k-parchment: #ece2c6;
  --k-parchment-dim: #d8cba9;
  --k-ink: #241f38;

  /* Categories */
  --k-troop: #b23a2e;       --k-troop-deep: #4a1d18;
  --k-apparatus: #3f7fa6;   --k-apparatus-deep: #16303f;
  --k-special: #5f8f4e;     --k-special-deep: #1e3320;
  --k-element: #d9a933;     --k-element-deep: #3f2f14;

  /* States */
  --k-ice: #8fd8f0;
  --k-fire: #e8722c;
  --k-haunt: #8d6fc4;
  --k-hp: #cf3f3f;
  --k-danger: #d64541;
  --k-ok: #7fb069;

  /* Type — compact tool UI, with a separate authored card face */
  --k-font-ui: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', Arial, sans-serif;
  --k-font-ui-heading: 'Inter Tight', 'Arial Narrow', 'Segoe UI', Arial, sans-serif;
  --k-font-display: var(--k-font-ui-heading);
  --k-font-body: var(--k-font-ui);
  --k-font-brand: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --k-font-card-display: 'Cinzel', 'Trajan Pro', serif;
  --k-font-card-body: 'EB Garamond', Georgia, serif;

  /* Motion */
  --k-ease: cubic-bezier(.25, .46, .45, .94);

  /* Canonical brand and game-object assets */
  --k-asset-wordmark: url('/Design/assets/brand/katapult-wordmark.svg');
  --k-asset-card-silhouette: url('/Katapult_Engine/game/assets/cards/card-silhouette.svg');
  --k-asset-card-back: url('/Katapult_Engine/game/assets/cards/back_tarot_v1.webp');
  --k-asset-katapult: url('/Katapult_Engine/game/assets/icons/catapult.svg');

  /* Canonical long-hex card silhouette */
  --k-card-aspect: 1 / 1.946;
  --k-card-clip: polygon(
    50% 0,
    58% 3.04%,
    92% 15.96%,
    100% 27.7%,
    100% 73.3%,
    92% 84.88%,
    58% 97.12%,
    50% 100%,
    42% 97.12%,
    8% 84.88%,
    0 73.3%,
    0 27.7%,
    8% 15.96%,
    42% 3.04%
  );
}

/* ---------- Base ---------- */
.k-app {
  background: radial-gradient(ellipse at 50% -20%, #1e1b36 0%, var(--k-bg) 60%);
  color: var(--k-parchment);
  font-family: var(--k-font-body);
  font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1;
  font-synthesis: none;
  min-height: 100vh;
}

.k-title, .k-h1 {
  font-family: var(--k-font-display);
  color: var(--k-gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
}

.k-label {
  font-family: var(--k-font-display);
  color: var(--k-gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
}

/* Exact path-based identity. No box, crest, or ornamental wrapper. */
.k-wordmark {
  display: inline-block;
  width: 9em;
  max-width: 100%;
  aspect-ratio: 984 / 346;
  flex: 0 0 auto;
  color: inherit;
  background: currentcolor;
  -webkit-mask: var(--k-asset-wordmark) center / contain no-repeat;
  mask: var(--k-asset-wordmark) center / contain no-repeat;
}

/* The physical siege engine. Direction is data, not a baked-in variant. */
.k-katapult-mark {
  display: inline-block;
  width: 1em;
  aspect-ratio: 1;
  flex: 0 0 auto;
  color: inherit;
  background: currentcolor;
  -webkit-mask: var(--k-asset-katapult) center / contain no-repeat;
  mask: var(--k-asset-katapult) center / contain no-repeat;
}

.k-katapult-mark[data-facing="left"] { transform: scaleX(-1); }

/* Ornamented section header:  — ◆ TEXT ◆ — */
.k-ornament {
  display: flex; align-items: center; gap: .75em;
  font-family: var(--k-font-display); color: var(--k-gold);
  text-transform: uppercase; letter-spacing: .18em;
}
.k-ornament::before, .k-ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-gold-dim));
}
.k-ornament::after { background: linear-gradient(90deg, var(--k-gold-dim), transparent); }

/* ---------- Panels ---------- */
.k-panel {
  background: var(--k-bg-raised);
  border: 1px solid var(--k-gold-dim);
  position: relative;
  padding: 16px;
}
/* corner ticks */
.k-panel::before, .k-panel::after {
  content: ''; position: absolute; width: 8px; height: 8px;
  border-color: var(--k-gold); border-style: solid;
}
.k-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.k-panel::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* ---------- Buttons ---------- */
.k-btn {
  font-family: var(--k-font-display);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  padding: .65em 1.6em; cursor: pointer;
  clip-path: polygon(4% 0, 96% 0, 100% 30%, 100% 70%, 96% 100%, 4% 100%, 0 70%, 0 30%);
  transition: all .18s var(--k-ease);
  border: 1px solid var(--k-gold);
}
.k-btn--primary {
  background: linear-gradient(180deg, var(--k-gold-bright), var(--k-gold));
  color: var(--k-ink);
}
.k-btn--primary:hover { filter: brightness(1.1); box-shadow: 0 0 14px rgba(232,196,119,.4); }
.k-btn--primary:active { transform: translateY(1px); }
.k-btn--primary:disabled { background: var(--k-gold-dim); color: #4a4234; cursor: not-allowed; box-shadow: none; }
.k-btn--secondary { background: transparent; color: var(--k-gold); }
.k-btn--secondary:hover { color: var(--k-gold-bright); border-color: var(--k-gold-bright); }
.k-btn--danger { background: transparent; color: var(--k-danger); border-color: var(--k-danger); }

/* ---------- Cards ---------- */
.k-card {
  width: 110px;
  height: auto;
  aspect-ratio: var(--k-card-aspect);
  clip-path: var(--k-card-clip);
  background: var(--k-bg-raised);
  border: 2px solid var(--k-gold);
  display: flex; flex-direction: column;
  position: relative; cursor: grab; user-select: none;
  transition: transform .18s var(--k-ease), box-shadow .18s var(--k-ease);
}
.k-card:hover { transform: translateY(-4px); box-shadow: 0 0 12px rgba(232,196,119,.35); border-color: var(--k-gold-bright); }
.k-card.dragging { opacity: .5; }

.k-card__art {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; image-rendering: pixelated;
}
.k-card__art img { image-rendering: pixelated; max-width: 80%; }

.k-card__name {
  background: var(--k-parchment); color: var(--k-ink);
  font-family: var(--k-font-display); font-variant: small-caps;
  font-size: .68rem; letter-spacing: .06em; font-weight: 600;
  text-align: center; padding: 3px 2px;
}
.k-card__power {
  position: absolute; top: 6px; right: 6px;
  background: var(--k-parchment); color: var(--k-ink);
  font-family: var(--k-font-display); font-weight: 700; font-size: .8rem;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* diamond */
}

/* Category accents: art backdrop + name-plate underline + power color */
.k-card--troop    .k-card__art { background: var(--k-troop-deep); }
.k-card--troop    .k-card__power { color: var(--k-troop); }
.k-card--troop    { border-color: color-mix(in srgb, var(--k-troop) 45%, var(--k-gold)); }
.k-card--apparatus .k-card__art { background: var(--k-apparatus-deep); }
.k-card--apparatus .k-card__power { color: var(--k-apparatus); }
.k-card--apparatus { border-color: color-mix(in srgb, var(--k-apparatus) 45%, var(--k-gold)); }
.k-card--special  .k-card__art { background: var(--k-special-deep); }
.k-card--special  .k-card__power { color: var(--k-special); }
.k-card--special  { border-color: color-mix(in srgb, var(--k-special) 45%, var(--k-gold)); }
.k-card--element  .k-card__art { background: var(--k-element-deep); }
.k-card--element  .k-card__power { color: var(--k-element); }
.k-card--element  { border-color: color-mix(in srgb, var(--k-element) 55%, var(--k-gold)); }

/* Mythic (fused) shimmer */
.k-card--mythic { border: 2px solid transparent; }
.k-card--mythic {
  background:
    linear-gradient(var(--k-bg-raised), var(--k-bg-raised)) padding-box,
    linear-gradient(120deg, var(--k-gold-bright), var(--k-haunt), var(--k-gold-bright)) border-box;
  animation: k-shimmer 2.4s linear infinite;
  background-size: auto, 300% 300%;
}
@keyframes k-shimmer { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } }

/* Face-down opponent card */
.k-card--back .k-card__art {
  background:
    repeating-linear-gradient(45deg, #221e3d 0 6px, #1c1930 6px 12px);
}

/* ---------- Katapult slots ---------- */
.k-slot {
  width: 110px;
  height: auto;
  aspect-ratio: var(--k-card-aspect);
  clip-path: var(--k-card-clip);
  border: 2px dashed var(--k-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--k-line); font-family: var(--k-font-display);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  transition: all .18s var(--k-ease);
}
.k-slot--droppable { border-color: var(--k-gold-bright); color: var(--k-gold-bright); box-shadow: 0 0 10px rgba(232,196,119,.3) inset; }
.k-slot--fusable   { border-color: var(--k-element); box-shadow: 0 0 12px rgba(217,169,51,.45) inset; }

/* ---------- Realm tiles ---------- */
.k-tile {
  background: var(--k-bg-inset);
  border: 1px solid var(--k-line);
  padding: 8px; text-align: center;
}
.k-tile__name { font-family: var(--k-font-display); color: var(--k-gold); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.k-tile__hp { color: var(--k-hp); letter-spacing: 2px; }
.k-tile--damaged { filter: brightness(.75); }
.k-tile--destroyed { filter: grayscale(.9) brightness(.5); opacity: .5; }
.k-tile--frozen { box-shadow: 0 0 10px var(--k-ice) inset; border-color: var(--k-ice); }
.k-tile--burning { box-shadow: 0 0 10px var(--k-fire) inset; border-color: var(--k-fire); }

/* ---------- Timer ---------- */
.k-timer {
  font-family: var(--k-font-display); font-weight: 700;
  padding: .3em .9em; border: 1px solid var(--k-gold-dim);
  color: var(--k-ink); background: var(--k-ok);
  transition: background .3s var(--k-ease);
}
.k-timer--warn { background: var(--k-element); }
.k-timer--critical { background: var(--k-danger); color: var(--k-parchment); animation: k-pulse .8s infinite; }
@keyframes k-pulse { 50% { filter: brightness(1.35); } }

/* ---------- Messages ---------- */
.k-message {
  font-family: var(--k-font-body); font-style: italic;
  color: var(--k-parchment); text-align: center;
}

/* ---------- Forms ---------- */
/* native file inputs, themed (the OS default clashed with the art direction) */
input[type="file"] { color: var(--k-parchment-dim); }
input[type="file"]::file-selector-button {
  background: var(--k-bg-inset);
  color: var(--k-parchment);
  border: 1px solid var(--k-gold-dim);
  padding: 2px 10px;
  margin-right: 8px;
  font-family: var(--k-font-display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--k-gold); color: var(--k-gold-bright); }

/* ---------- Pixel art ---------- */
.k-pixel, .k-pixel img { image-rendering: pixelated; }