/* Hexwerk-Design: Farben, Schrift und fertige Bausteine für Menü und Spiel-HUD.
   Werte entsprechen der Design-Leinwand (_source/) und docs/hex-ui-konzept-2026-10-21. */

:root {
  /* Grund */
  --hx-bg-0: #0a100c;
  --hx-bg-1: #0f1a15;
  --hx-bg-2: #1a2d24;
  --hx-line: #41594a;
  --hx-text: #f6f2e4;
  --hx-muted: #bfd0c6;
  --hx-focus: #ffe198;

  /* Hex-Familien: Rand (Verlauf), Rille, Füllung, Schrift */
  --hx-gold-rim: linear-gradient(170deg, #fff3c4, #e9b949 45%, #9c6a17);
  --hx-gold-groove: #7a5414;
  --hx-gold-fill: radial-gradient(circle at 50% 28%, #ffe9a0, #f4c552 48%, #dc9c2c);
  --hx-gold-ink: #2a1f10;
  --hx-green-rim: linear-gradient(170deg, #a9c98f, #5f8a5a 50%, #2e4b33);
  --hx-green-groove: #102117;
  --hx-green-fill: radial-gradient(circle at 50% 26%, #4a8059, #2b5638 52%, #1d3d28);
  --hx-green-ink: #f4ecd6;
  --hx-cream-rim: linear-gradient(170deg, #fffaf0, #d8c79c 55%, #9c8a5d);
  --hx-cream-groove: #7b6c49;
  --hx-cream-fill: radial-gradient(circle at 50% 28%, #fffaf0, #f1e6c6 55%, #dfcd9f);
  --hx-cream-ink: #2b281f;
  --hx-fog-rim: linear-gradient(170deg, #56625b, #323c37);
  --hx-fog-groove: #1a201d;
  --hx-fog-fill: radial-gradient(circle at 50% 30%, #46514b, #2c3430 70%);
  --hx-fog-ink: #c9d2cc;

  /* Spiel-HUD */
  --hx-panel-edge: linear-gradient(170deg, #e9c46a, #8a6a26 60%, #c9a24a);
  --hx-panel-fill: linear-gradient(180deg, #17301f, #0f2219);
  --hx-gold-text: #f3c94c;
  --hx-capsule-fill: linear-gradient(180deg, #172c21, #0e1d16);
  --hx-capsule-line: #46634f;
  --hx-danger-fill: linear-gradient(180deg, #7d2a22, #521812);
  --hx-danger-line: #a8463a;

  /* Seltenheit: Rand / Abzeichen (weiße Schrift ≥ 4,5 : 1) */
  --hx-common: #4fa35a;   --hx-common-badge: #2f7d3a;
  --hx-uncommon: #35b3a6; --hx-uncommon-badge: #1b7a72;
  --hx-rare: #4f8fe0;     --hx-rare-badge: #2f63b0;
  --hx-epic: #9b4fe0;     --hx-epic-badge: #7a32b8;
  --hx-legendary: #ef9a3a; --hx-legendary-badge: #a8530c;

  /* Schrift (OFL, als WOFF2 selbst hosten) */
  --hx-font-title: 'Fraunces', Georgia, serif;
  --hx-font-ui: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;

  /* Formen */
  --hx-shape: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hx-chamfer: 10px;
}

/* Dunkelgrünes Paneel mit feiner Goldkante und abgeschrägten Ecken (#6) */
.hx-panel {
  --c: var(--hx-chamfer);
  padding: 2px;
  background: var(--hx-panel-edge);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  font-family: var(--hx-font-ui);
  color: var(--hx-green-ink);
}
.hx-panel > .hx-panel-inner {
  --c: calc(var(--hx-chamfer) - 1px);
  height: 100%;
  box-sizing: border-box;
  background: var(--hx-panel-fill);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.hx-panel.is-highlight { background: linear-gradient(170deg, #fff3c4, #e9b949 50%, #f3d58a); filter: drop-shadow(0 0 10px rgba(246, 201, 90, .55)); }
.hx-panel.is-boss { background: linear-gradient(170deg, #ff9a7a, #8a2a1c 60%, #d0574a); }
.hx-panel.is-boss > .hx-panel-inner { background: linear-gradient(180deg, #3a1a16, #22100d); }
/* Schatten auf einem Wrapper setzen: clip-path schneidet filter am Element selbst ab. */

/* Ressourcen-Kapsel (#7) */
.hx-capsule {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--hx-capsule-line); background: var(--hx-capsule-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 8px rgba(0, 0, 0, .35);
  font: 700 22px/1 var(--hx-font-ui); color: var(--hx-green-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hx-capsule .hx-income { color: var(--hx-gold-text); }

/* Preis-Knopf (#10): bereit, zu teuer, gesperrt, gewählt */
.hx-price {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; min-width: 64px; padding: 0 10px; border-radius: 8px;
  font: 700 18px var(--hx-font-ui);
  border: 2px solid #9c6a17; background: linear-gradient(180deg, #ffe48a, #e8ac38); color: #2a1f10;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 #7a5414;
}
.hx-price.is-expensive { border-color: #6e766f; background: linear-gradient(180deg, #4a524e, #343b37); color: #e6ebe7; box-shadow: 0 3px 0 #222826; }
.hx-price.is-locked { border-color: #56625b; background: linear-gradient(180deg, #3a4440, #2c3430); color: #c9d2cc; box-shadow: 0 3px 0 #1a201d; }
.hx-price.is-chosen { border-color: #7fe08a; background: linear-gradient(180deg, #2b5638, #1d3d28); color: #d8f5d8; box-shadow: 0 3px 0 #102117; }

/* Wellenstart (#12): zusammen mit .hx-panel verwenden, z. B. class="hx-panel hx-wave is-ready" */
.hx-wave.is-locked { background: #56625b; }
.hx-wave.is-locked > .hx-panel-inner { background: linear-gradient(180deg, #3a4440, #2c3430); color: #c9d2cc; }
.hx-wave.is-ready { background: #9c6a17; }
.hx-wave.is-ready > .hx-panel-inner { background: linear-gradient(180deg, #ffe48a, #e8ac38); color: #2a1f10; }

/* Verkaufen (zweistufig) */
.hx-sell { min-height: 48px; border-radius: 8px; border: 2px solid var(--hx-danger-line); background: var(--hx-danger-fill); color: #fff3ec; font: 700 18px var(--hx-font-ui); box-shadow: 0 3px 0 #3d120c; }
.hx-sell.is-confirm { border-color: #ffb3a0; background: linear-gradient(180deg, #a3302a, #6e1c17); box-shadow: 0 0 12px rgba(255, 120, 100, .45), 0 3px 0 #3d120c; }

/* Handkarte (#14): Seltenheit über data-rarity */
.hx-card { border: 4px solid var(--hx-epic); border-radius: 12px; background: linear-gradient(180deg, #fffaf0, #f6ecd3 55%, #eadbb4); color: #2b281f; font-family: var(--hx-font-ui); }
.hx-card[data-rarity="common"] { border-color: var(--hx-common); --badge: var(--hx-common-badge); }
.hx-card[data-rarity="uncommon"] { border-color: var(--hx-uncommon); --badge: var(--hx-uncommon-badge); }
.hx-card[data-rarity="rare"] { border-color: var(--hx-rare); --badge: var(--hx-rare-badge); }
.hx-card[data-rarity="epic"] { border-color: var(--hx-epic); --badge: var(--hx-epic-badge); }
.hx-card[data-rarity="legendary"] { border-color: var(--hx-legendary); --badge: var(--hx-legendary-badge); }
.hx-card .hx-badge { background: var(--badge, var(--hx-epic-badge)); color: #fff; border-radius: 5px; padding: 2px 7px; font-weight: 700; letter-spacing: .04em; }
.hx-card.is-selected { transform: translateY(-18px); outline: 3px solid var(--hx-focus); outline-offset: 2px; }
/* Gewählt, aber nicht platzierbar: roter Rand + Grund als Streifen (.hx-card-reason) */
.hx-card.is-invalid { transform: translateY(-18px); outline: 3px solid #ff6a5a; outline-offset: 2px; box-shadow: 0 0 18px rgba(255, 90, 70, .65); }
.hx-card .hx-card-reason { background: #2c3430; color: #f2f4f2; border-radius: 6px; font-weight: 700; font-size: 12px; }
.hx-card.is-invalid .hx-card-reason { background: #8a1f18; }

/* Kapsel-Zustände (#9): Warnung bleibt sichtbar, Zuwachs leuchtet kurz auf */
.hx-capsule.is-warning { border-color: #f2555f; box-shadow: 0 0 0 3px rgba(242, 85, 95, .22), 0 3px 8px rgba(0, 0, 0, .35); }
.hx-capsule.is-gain { animation: hx-gain .9s ease-out 1; }
@keyframes hx-gain { 0% { border-color: #f3c94c; box-shadow: 0 0 0 0 rgba(243, 201, 76, .7); } 100% { box-shadow: 0 0 0 14px rgba(243, 201, 76, 0); } }

/* Phasenschild-Varianten: Belohnung, Sieg, Niederlage */
.hx-panel.is-reward { background: linear-gradient(170deg, #fff3c4, #c9952f 60%, #f3d58a); }
.hx-panel.is-victory { background: linear-gradient(170deg, #fff6d6, #e9b949 60%, #fff3c4); filter: drop-shadow(0 0 12px rgba(255, 225, 152, .5)); }
.hx-panel.is-victory > .hx-panel-inner { background: linear-gradient(180deg, #2b5638, #1a3a26); }
.hx-panel.is-defeat { background: linear-gradient(170deg, #a9a39c, #5a2a24 60%, #8a8f8b); }
.hx-panel.is-defeat > .hx-panel-inner { background: linear-gradient(180deg, #2a1e1c, #1a1312); }

/* Tastaturfokus für alle Hex-Bausteine */
.hx-focusable:focus-visible { outline: 3px solid var(--hx-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hx-card, .hx-panel, .hx-price, .hx-capsule { transition: none !important; animation: none !important; }
}