/* ============================================================
   Spiel-HUD „Ink“ — katama-dunkel (Claude Autobuild, 02.10.2026)
   Nutzer 02.10. 02:10 „egal zieh durch mach voll“ auf „Spielbildschirm auch dunkel?“.
   Gleiche Linie wie landing-dark.css: Schwarz + Karmin/Orange/Amber, keine Goldrahmen.
   Greift nur, wenn die Ink-Leiste gewählt ist (Vorgabe, hud-skins.js). Lack-Leisten unter
   Settings → Table bleiben unverändert. Kartendesign (.card) bleibt unangetastet.
   ============================================================ */
body:has(.hud-skin[data-theme="ink"]) {
  --i-bg: oklch(0.135 0.006 35);
  --i-panel: oklch(0.168 0.008 35 / 0.94);
  --i-panel-2: oklch(0.205 0.01 35 / 0.96);
  --i-ink: oklch(0.95 0.008 70);
  --i-ink-2: oklch(0.75 0.012 60);
  --i-ink-3: oklch(0.56 0.012 55);
  --i-crimson: oklch(0.57 0.2 25);
  --i-crimson-2: oklch(0.64 0.2 27);
  --i-orange: oklch(0.7 0.18 48);
  --i-amber: oklch(0.81 0.155 72);
  --i-hair: color-mix(in oklch, white 9%, transparent);
  --i-font: 'Switzer', 'Segoe UI', system-ui, sans-serif;
  --i-head: 'Clash Display', 'Switzer', 'Segoe UI', system-ui, sans-serif;
}

/* ---- Eigene Leiste unten ------------------------------------------------- */
@media (min-width:760px),(max-height:500px) and (orientation:landscape){
  body.stage-on .game.has-hud-skin .hud-skin[data-theme="ink"] { color: var(--i-ink); font-family: var(--i-font) }
  /* Ink hat keinen gemalten Rand unter dem Bild → Leiste nicht absenken, Grund bis an die Fensterränder */
  body.stage-on .game.has-hud-skin:has(.hud-skin[data-theme="ink"]) { --drop: 0px }
  .hud-skin[data-theme="ink"]::before {
    content: ""; position: absolute; left: calc((var(--W) - 100vw) / 2); right: calc((var(--W) - 100vw) / 2); top: 26%; bottom: 0; pointer-events: none;
    background:
      linear-gradient(90deg, transparent, var(--i-crimson) 22%, var(--i-orange) 50%, var(--i-crimson) 78%, transparent) top / 100% 2px no-repeat,
      radial-gradient(ellipse 40% 90% at 50% 120%, oklch(0.57 0.2 25 / .16), transparent 70%),
      linear-gradient(180deg, oklch(0.115 0.006 35 / .9), oklch(0.09 0.005 35 / .98));
    box-shadow: 0 -10px 30px oklch(0 0 0 / .55);
  }
  .hud-skin[data-theme="ink"] .hud-wing { display: none }
  .hud-skin[data-theme="ink"] .hud-portrait {
    background: var(--i-bg); box-shadow: 0 0 0 2px var(--i-crimson), 0 0 0 5px oklch(0.57 0.2 25 / .18), inset 0 0 12px #000;
  }
  .hud-skin[data-theme="ink"] :is(.hud-name, .hud-orbs, .hud-count) {
    background: var(--i-panel) !important; border: 1px solid var(--i-hair); border-radius: .5em;
  }
  .hud-skin[data-theme="ink"] .hud-name b { font: 600 1.3em/1.1 var(--i-head); letter-spacing: -.01em; color: var(--i-ink) }
  .hud-skin[data-theme="ink"] .hud-name small { color: var(--i-ink-2); font-family: var(--i-font) }
  .hud-skin[data-theme="ink"] .hud-hp { background: oklch(0.2 0.05 25); border-radius: .5em; box-shadow: inset 0 0 0 1px var(--i-hair) }
  .hud-skin[data-theme="ink"] .hud-hp i { background: linear-gradient(90deg, var(--i-crimson), var(--i-crimson-2)) }
  .hud-skin[data-theme="ink"] .hud-hp b { font: 700 1.2em var(--i-font); font-variant-numeric: tabular-nums; color: #fff }
  .hud-skin[data-theme="ink"] .hud-orbs i { border-color: oklch(0.45 0.08 55) !important; background: oklch(0.16 0.01 35) !important }
  .hud-skin[data-theme="ink"] .hud-orbs i.on {
    background: radial-gradient(circle at 38% 32%, oklch(0.97 0.05 85) 0 8%, var(--i-amber) 34%, var(--i-orange) 64%, oklch(0.42 0.13 40)) !important;
    box-shadow: 0 0 .6em oklch(0.75 0.17 60 / .7) !important;
  }
  .hud-skin[data-theme="ink"] .hud-orbs b { font: 700 1.25em/1 var(--i-font); font-variant-numeric: tabular-nums; color: var(--i-ink) }
  .hud-skin[data-theme="ink"] .hud-orbs b small { color: var(--i-ink-3); font-family: var(--i-font); text-transform: uppercase }
  /* site-premium.css setzt Deck/Ablage für die abgesenkten Bildleisten an den Fensterrand — Ink hat keinen Rand: Feld aus hud-skins.js */
  body.stage-on .game.has-hud-skin .hud-skin[data-theme="ink"] .hud-count {
    top: 64% !important; bottom: auto !important; height: 26% !important; min-height: 0;
    background: var(--i-panel) !important; border-color: var(--i-hair) !important; box-shadow: none !important;
  }
  .hud-skin[data-theme="ink"] .hud-count small { font: 600 .7em var(--i-font) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--i-ink-2) }
  .hud-skin[data-theme="ink"] .hud-count :is(b, button) { font: 700 1.35em var(--i-font) !important; font-variant-numeric: tabular-nums; color: var(--i-ink) }

  /* End Turn: Karmin-Siegel statt gemaltem Knopf, Schrift sichtbar */
  body.stage-on .game.has-hud-skin .hud-skin[data-theme="ink"] .hud-end {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
    color: var(--i-ink); font-size: 1em;
    background: radial-gradient(circle at 50% 35%, oklch(0.53 0.19 25), oklch(0.47 0.18 25) 60%, oklch(0.33 0.13 24));
    box-shadow: 0 0 0 1px oklch(1 0 0 / .14) inset, 0 0 0 4px oklch(0.57 0.2 25 / .22), 0 10px 26px oklch(0 0 0 / .6);
  }
  .hud-skin[data-theme="ink"] .hud-end span { font: 700 2.6em/1 'Shippori Mincho B1', serif }
  .hud-skin[data-theme="ink"] .hud-end small { font: 600 .95em var(--i-font); letter-spacing: .1em; text-transform: uppercase }
  .hud-skin[data-theme="ink"] .hud-end:hover:not(:disabled), .hud-skin[data-theme="ink"] .hud-end:focus-visible {
    box-shadow: 0 0 0 3px var(--i-amber), 0 0 2em oklch(0.7 0.18 48 / .7);
  }
  body.stage-on .game.has-hud-skin .hud-skin[data-theme="ink"] .hud-end:disabled {
    background: radial-gradient(circle at 50% 35%, oklch(0.3 0.02 30), oklch(0.18 0.01 30)); color: var(--i-ink-2);
  }
  @keyframes ink-end-pulse { 50% { box-shadow: 0 0 0 3px var(--i-amber), 0 0 2.4em oklch(0.7 0.18 48 / .8) } }
  .hud-skin[data-theme="ink"] .hud-end.is-last { animation: ink-end-pulse 1.5s ease-in-out infinite }

  /* ---- Gegnerleiste oben ------------------------------------------------- */
  body.stage-on .game.has-hud-skin .hud-enemy[data-theme="ink"] { color: var(--i-ink); font-family: var(--i-font) }
  .hud-enemy[data-theme="ink"]::before {
    content: ""; position: absolute; inset: 6% 0 25% 14%; border-radius: .7em; pointer-events: none;
    background:
      linear-gradient(90deg, transparent, var(--i-crimson) 30%, var(--i-orange) 50%, var(--i-crimson) 70%, transparent) bottom / 100% 2px no-repeat,
      linear-gradient(180deg, oklch(0.09 0.005 35 / .97), oklch(0.13 0.006 35 / .92));
    border: 1px solid var(--i-hair);
  }
  .hud-enemy[data-theme="ink"] :is(.hud-name, .hud-turn) { background: transparent }
  .hud-enemy[data-theme="ink"] .hud-name b { font: 600 1.1em/1.1 var(--i-head); color: var(--i-ink) }
  .hud-enemy[data-theme="ink"] :is(.hud-name small, .hud-turn small) { color: var(--i-ink-2); font-family: var(--i-font) }
  .hud-enemy[data-theme="ink"] .hud-turn b { font: 600 1.15em var(--i-head); color: var(--i-amber) }
  .hud-enemy[data-theme="ink"] .hud-hp { background: oklch(0.2 0.05 25); border-radius: .4em }
  .hud-enemy[data-theme="ink"] .hud-hp i { background: linear-gradient(90deg, var(--i-crimson), var(--i-crimson-2)) }
  .hud-enemy[data-theme="ink"] .hud-hp b { font: 700 1em var(--i-font); font-variant-numeric: tabular-nums }
  .hud-enemy[data-theme="ink"] .hud-enemy-cards i {
    border: 1px solid oklch(0.57 0.2 25 / .55); border-radius: .35em;
    background: radial-gradient(circle at 50% 50%, oklch(0.57 0.2 25 / .5) 0 14%, transparent 15%), linear-gradient(160deg, oklch(0.2 0.01 35), oklch(0.11 0.006 35));
  }
  .hud-enemy[data-theme="ink"] .hud-enemy-cards i.gone { background: transparent; border-color: var(--i-hair); opacity: .35 }
  .hud-enemy[data-theme="ink"] .hud-enemy-cards em { font: 700 .9em var(--i-font); background: var(--i-crimson); border-color: var(--i-orange) }
}

/* ---- Spiel-Rahmen um die Leisten (Kopf, Gespielt, Hinweise, Handlimit, Kartenfokus) ---- */
body:has(.hud-skin[data-theme="ink"]) .game-head { border-color: var(--i-hair) !important; background: oklch(0.1 0.005 35 / .82) !important }
body:has(.hud-skin[data-theme="ink"]) .game-head .game-emblem .brand-mark { background: var(--i-crimson); color: #fff; box-shadow: 0 0 0 1px oklch(1 0 0 / .18), 0 0 0 4px oklch(0.57 0.2 25 / .22) }
body:has(.hud-skin[data-theme="ink"]) .game-head .game-house { font-family: var(--i-head); letter-spacing: .06em; color: var(--i-ink) }
body:has(.hud-skin[data-theme="ink"]) .rail-status .status-pill { border-color: var(--i-hair) !important; background: var(--i-panel) !important; font-family: var(--i-font) }
body:has(.hud-skin[data-theme="ink"]) .rail-status .status-pill b { font-family: var(--i-head) !important; color: var(--i-ink) }
body:has(.hud-skin[data-theme="ink"]) .rail-status .status-pill small { font-family: var(--i-font) !important; letter-spacing: .12em; color: var(--i-ink-3) }
body:has(.hud-skin[data-theme="ink"]) .rail-status .status-coin { background: var(--i-amber); color: oklch(0.2 0.02 50) }
body:has(.hud-skin[data-theme="ink"]) :is(.rail-status .hud-settings, .hud-skin .hud-settings) { border-color: var(--i-hair); background: var(--i-panel); color: var(--i-ink) }
body:has(.hud-skin[data-theme="ink"]) .play-rail { border-color: var(--i-hair) !important; background: var(--i-panel) !important; font-family: var(--i-font) }
body:has(.hud-skin[data-theme="ink"]) .play-rail :is(h2, h3, header, .eyebrow) { font-family: var(--i-head) !important; color: var(--i-ink) }
body.stage-on:has(.hud-skin[data-theme="ink"]) .game .turn-guide {
  border-color: var(--i-hair) !important; border-left: 2px solid var(--i-orange) !important; background: var(--i-panel) !important;
  font-family: var(--i-font) !important; color: var(--i-ink) !important;
}
body:has(.hud-skin[data-theme="ink"]) .discard-bar { background: oklch(0.16 0.04 25 / .95) !important; border-color: oklch(0.57 0.2 25 / .6) !important; font-family: var(--i-font) }
body:has(.hud-skin[data-theme="ink"]) .discard-bar button { font-family: var(--i-font); border-color: var(--i-hair) }
body:has(.hud-skin[data-theme="ink"]) .game .watch-line { font-family: var(--i-font); border-color: var(--i-hair); background: var(--i-panel) }
body:has(.hud-skin[data-theme="ink"]) .game .arena > .leader:not(.enemy) { border-color: var(--i-hair) !important; background: var(--i-panel) !important; font-family: var(--i-font) }
body:has(.hud-skin[data-theme="ink"]) .game .selection-panel { border-color: var(--i-hair) !important; background: oklch(0.12 0.006 35 / .96) !important; font-family: var(--i-font) }
body:has(.hud-skin[data-theme="ink"]) .game .selection-panel :is(h2, h3) { font-family: var(--i-head) !important; letter-spacing: -.01em }

/* ---- Handy/Hochkant (< 760 px: ohne Leiste, Anführerbalken + Aktionsleiste) ---- */
@media (max-width:759px) and (min-height:501px),(max-width:759px) and (orientation:portrait){
  body.stage-on:has(.hud-skin[data-theme="ink"]) .game .arena > .leader { border-color: var(--i-hair) !important; background: var(--i-panel) !important; font-family: var(--i-font) }
  body.stage-on:has(.hud-skin[data-theme="ink"]) .game .arena > .leader :is(h2, h3, .leader-name, strong) { font-family: var(--i-head) !important; color: var(--i-ink) }
  body.stage-on:has(.hud-skin[data-theme="ink"]) .game .action-strip { background: oklch(0.1 0.005 35 / .94) !important; border-color: var(--i-hair) !important; font-family: var(--i-font) }
  body.stage-on:has(.hud-skin[data-theme="ink"]) .game .action-strip .primary {
    background: linear-gradient(180deg, var(--i-crimson-2), var(--i-crimson)) !important; color: #fff !important; border-color: oklch(1 0 0 / .14) !important;
    font-family: var(--i-font) !important; letter-spacing: .08em; box-shadow: 0 6px 18px oklch(0.57 0.2 25 / .35) !important;
  }
  body.stage-on:has(.hud-skin[data-theme="ink"]) .game .action-strip .primary:disabled { background: oklch(0.25 0.01 30) !important; color: var(--i-ink-3) !important; box-shadow: none !important }
}