/* ─────────────────────────────────────────────────────────────────────────
   Nocturne pro MacBook (verze pro Kamču): sólo na šířku, myš a klávesnice.
   Samostatná kopie hry – tento soubor v iPad verzi neexistuje.

   Stůl: středový sloupec (--col) s jednotkami a lištou hrdiny, hrdina
   uprostřed lišty. Ruka hráče je dole celá vidět (karty se zmenší podle výšky
   okna), při najetí myší se karta zvětší. Ruka bota kouká shora. Šev stolu je
   posunutý nahoru o --shift, aby obě bojiště byla stejně vysoká. Ukončit tah
   stojí v pravém okraji u švu, jako v Hearthstone.
   ───────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) {
  :root {
    --col: min(1120px, calc(100vw - 380px));
    /* Hand cards (also their presentation copies) scale with the window height. */
    --hand-height: clamp(120px, 17.5dvh, 172px);
    --hand-width: calc(var(--hand-height) * 0.78);
    --card-label-size: 11px;
    --hand-stat-size: 20px;
    /* Room for the whole hand: card + padding + a small gap to the edge. */
    --peek: calc(var(--hand-height) + 28px);
    --bot-peek: clamp(40px, 6dvh, 54px);
    --bar-h: 84px;
    --shift: calc((var(--peek) - var(--bot-peek)) / 2);
  }
  .tabletop {
    grid-template-rows: minmax(0, calc(50% - var(--shift))) minmax(0, 1fr);
  }
  .table-seam-left {
    top: calc(50% - var(--shift));
  }
  .tabletop {
    max-width: none;
    width: 100%;
  }
  /* Nothing ever scrolls the table (focus, a card half below the edge). */
  html:has(.tabletop),
  html:has(.tabletop) body,
  .tabletop {
    overflow: clip;
  }
  .player-zone {
    padding: 8px max(22px, calc((100% - var(--col)) / 2)) 0;
  }
  .player-zone > .board-row {
    flex: 1 1 0;
    min-height: 0;
    padding: 8px 0;
    /* Units never get taller than the row: the window height decides. */
    --unit-max-h: calc(50dvh - var(--shift) - 8px - var(--bar-h) - 10px - var(--bot-peek) - 18px);
  }
  .board-row > .compact {
    --fit-width: min(
      var(--unit-width),
      calc((100% - (var(--unit-count, 1) - 1) * var(--unit-gap, 18px)) / var(--unit-count, 1)),
      calc(var(--unit-max-h) * var(--unit-w) / var(--unit-h))
    );
  }
  .board-row > .pending-unit {
    flex-basis: var(--fit-width, var(--unit-width));
    width: min(var(--unit-width), calc(var(--unit-max-h) * var(--unit-w) / var(--unit-h)));
    height: auto;
    aspect-ratio: var(--unit-w) / var(--unit-h);
  }
  /* The bot's lane says nothing (its text would read upside down). */
  .tabletop.solo .player-zone.p1 .empty-board {
    visibility: hidden;
  }

  /* ── Hero bar: name and mana · deck · HERO · power · (controls) */
  .tabletop .player-bar {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
    column-gap: 18px;
    flex: 0 0 var(--bar-h);
    min-height: var(--bar-h);
    max-height: var(--bar-h);
    margin: 4px 0 6px;
    z-index: 5;
  }
  .tabletop .player-bar > * {
    grid-row: 1;
  }
  .tabletop .player-bar > .hero-meta {
    grid-column: 1;
    justify-self: end;
    text-align: right;
    min-width: 0;
  }
  .tabletop .player-bar > .hero-meta .mana {
    justify-content: flex-end;
  }
  .tabletop .player-bar > .deck-pile {
    grid-column: 2;
  }
  .tabletop .player-bar > .hero-portrait {
    grid-column: 3;
  }
  .tabletop .player-bar > .power {
    grid-column: 4;
  }
  .tabletop .player-bar > .turn-controls {
    grid-column: 5;
    justify-self: start;
  }
  .tabletop .player-bar::before {
    left: 24px;
  }

  /* End turn (and the Spark) in the right margin, at the seam. */
  .player-zone.p0 .player-bar > .turn-controls:not(.bot-controls) {
    position: fixed;
    z-index: 24;
    top: calc(50% - var(--shift));
    right: max(18px, calc((100vw - var(--col)) / 4 - 80px));
    translate: 0 -50%;
    align-items: stretch;
    gap: 10px;
  }
  .player-zone.p0 .player-bar > .turn-controls:not(.bot-controls) .end-turn {
    min-width: 160px;
    min-height: 64px;
    font-size: 15px;
  }
  /* Menu button moves up in the right margin, out of the end-turn's way. */
  .table-seam:not(.table-seam-left) {
    top: 18px;
    right: 18px;
    transform: none;
  }

  /* No class-colour glow rising from the bar over the table. */
  .tabletop .bar-aura {
    display: none;
  }

  /* ── Your hand: whole, at the bottom edge */
  .player-zone.p0 > .hand {
    flex: 0 0 var(--peek);
    min-height: 0;
    height: var(--peek);
    padding-top: 8px;
    align-items: flex-start;
    overflow: visible;
    z-index: auto;
  }
  .player-zone.p1 > .hand {
    flex: 0 0 var(--bot-peek);
    min-height: 0;
    height: var(--bot-peek);
    padding-top: 4px;
    align-items: flex-start;
    overflow: visible;
  }
}

/* ── Card preview: the whole screen, card left, its notes right. */
@media (orientation: landscape) {
  .player-zone.p0 > .detail-panel.centered-preview {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 24px 40px;
    overflow: auto;
  }
  .player-zone.p0 > .centered-preview .detail-notes {
    height: auto;
    width: 860px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 380px);
    grid-template-rows: 1fr auto auto 1fr;
    align-content: stretch;
    column-gap: 40px;
    row-gap: 12px;
    text-align: left;
  }
  .player-zone.p0 > .centered-preview .preview-stage {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    padding: 0;
    scale: 1.3;
    margin: 60px 46px;
  }
  .player-zone.p0 > .centered-preview .detail-notes:has(.explanations:empty) {
    grid-template-columns: auto;
    justify-items: center;
  }
  .player-zone.p0 > .centered-preview .detail-notes:has(.explanations:empty) > * {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }
  .player-zone.p0 > .centered-preview .detail-notes > :not(.preview-stage) {
    grid-column: 2;
    justify-self: stretch;
  }
  .player-zone.p0 > .centered-preview .detail-meta {
    grid-row: 2;
    justify-content: flex-start;
    font-size: 13px;
  }
  .player-zone.p0 > .centered-preview .explanations {
    grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .player-zone.p0 > .centered-preview .card-availability {
    grid-row: 4;
    align-self: start;
  }
  .player-zone.p0 > .centered-preview .keyword-note h3 {
    font-size: 17px;
  }
  .player-zone.p0 > .centered-preview .keyword-note p {
    font-size: 14px;
    line-height: 1.4;
  }
  .player-zone.p0 > .centered-preview .explanations:empty {
    display: none;
  }

  /* ── Opening hand: over the whole table, cards at full size. */
  .player-zone.p0 > .mulligan.choosing {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: radial-gradient(ellipse at 50% 55%, #0c1726c4, #04080edd 75%);
  }
  .player-zone.p0 > .mulligan.choosing .mull-card {
    --s: 1;
  }
  .tabletop:has(.mulligan.choosing) .turn-controls,
  .tabletop:has(.player-zone.p0 .mulligan.choosing) .player-zone.p1 .mulligan.waiting {
    visibility: hidden;
  }
}
@media (orientation: landscape) and (max-height: 760px) {
  .player-zone.p0 > .mulligan.choosing .mull-card {
    --s: 0.86;
  }
}

/* Mouse: the card under the pointer rises whole out of the hand. */
@media (orientation: landscape) and (hover: hover) {
  .tabletop .player-zone.p0 > .hand > .card:hover:not(.selected) {
    z-index: 9;
    rotate: 0deg;
    transform-origin: 50% 100%;
    scale: 1.4;
    translate: 0 -16px;
    transition:
      translate 0.16s cubic-bezier(0.2, 0.8, 0.3, 1.1),
      scale 0.16s cubic-bezier(0.2, 0.8, 0.3, 1.1),
      rotate 0.16s ease;
    box-shadow:
      0 18px 34px #000b,
      0 0 0 1px #ffffff22;
  }
  .tabletop .player-zone.p0 > .hand > .card:hover:not(.selected) + .card {
    translate: 26px 0;
  }
  .tabletop .player-zone.p0 > .hand > .card:has(+ .card:hover:not(.selected)) {
    translate: -26px 0;
  }
}

/* The hero medallion already shows the weapon; its name would spill out of the bar. */
@media (orientation: landscape) {
  .tabletop .player-bar .weapon-name {
    display: none;
  }
}

/* Header of the main menu: a small heart for Kamča. */
.kamca-heart {
  font-style: normal;
  color: #e46a83;
  margin-left: 4px;
  text-shadow: 0 0 10px #e46a8380;
}

/* ── Návod: a spotlight ring over one part of the table and a small card. */
.tut {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.tut-ring {
  position: fixed;
  border-radius: 18px;
  border: 2px solid #f1c87e;
  box-shadow:
    0 0 0 9999px #050a12b8,
    0 0 26px #f1c87e66;
  pointer-events: none;
  transition: all 0.25s ease;
}
.tut-panel {
  position: fixed;
  width: min(340px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  border: 1px solid #c5a46a88;
  border-radius: 14px;
  background: linear-gradient(180deg, #16263a, #0d1826);
  box-shadow: 0 18px 40px #000a;
  color: #f3e9ce;
  font: 15px/1.45 Georgia, serif;
  animation: tut-in 0.22s ease-out;
}
@keyframes tut-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}
.tut-panel small {
  font: 600 10px Arial, sans-serif;
  letter-spacing: 0.2em;
  color: #c5a46a;
}
.tut-panel h3 {
  margin: 4px 0 6px;
  font: 400 21px Georgia, serif;
}
.tut-panel p {
  margin: 0;
  color: #d8dccf;
}
.tut-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.tut-actions button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font: 600 13px Arial, sans-serif;
  cursor: pointer;
}
.tut-next {
  border: 1px solid #f1c87e;
  background: #c5a46a;
  color: #101c2b;
}
.tut-skip {
  border: 1px solid #c5a46a55;
  background: transparent;
  color: #c9c3ad;
}
@media (prefers-reduced-motion: reduce) {
  .tut-ring,
  .tut-panel {
    transition: none;
    animation: none;
  }
}