/* ==========================================================================
   Minihry – dlaždice na stránce Domů a stránka Velor (sdílené nr-* komponenty z common.css)
   Kořen: .nr-page.nr-theme.f-{frakce hráče}
   ========================================================================== */

:root {
  --vl-r0: #B48CFF; --vl-r0-rgb: 180, 140, 255;   /* vnější kruh */
  --vl-r1: #7FB2FF; --vl-r1-rgb: 127, 178, 255;   /* prostřední */
  --vl-r2: #E8C27A; --vl-r2-rgb: 232, 194, 122;   /* vnitřní */
  --vl-ok: #8FE0AE; --vl-bad: #FF8A7A;
}

/* ---------- Domů: dlaždice miniher ---------- */
.mg-head-note { margin-top: 4px; }
.mg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mg-tile {
  position: relative; border-radius: 10px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.mg-tile-name {
  margin: 0; font-family: var(--nr-display); font-weight: 700; font-size: 19px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 12px rgba(var(--nr-glow-rgb), .6);
}
.mg-tile-desc { margin: 0; color: var(--nr-muted); font-size: 13px; line-height: 1.5; flex: 1; }
.mg-tile-state { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.mg-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(var(--nr-glow-rgb), .4); color: var(--nr-rune); }
.mg-chip.is-done { border-color: rgba(143, 224, 174, .5); color: var(--vl-ok); }
.mg-chip.is-reward { border-color: rgba(232, 194, 122, .5); color: var(--nr-gold); }
.mg-tile .nr-stone { width: 100%; }
.mg-tile.is-soon { opacity: .6; }
.mg-tile.is-soon .nr-stone { pointer-events: none; filter: grayscale(.6) brightness(.8); }

/* výběr obtížnosti (dialog) */
.mg-dialog {
  width: min(440px, calc(100% - 32px)); padding: 0; border: 0; background: none; color: var(--nr-fg);
}
.mg-dialog::backdrop { background: rgba(5, 3, 9, .75); backdrop-filter: blur(2px); }
.mg-dialog-body { border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.mg-dialog-title { margin: 0; font-family: var(--nr-display); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.mg-diff-list { display: flex; flex-direction: column; gap: 10px; }
.mg-diff-list .nr-stone { width: 100%; }
.mg-diff-note { display: block; font-family: 'Sora', system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--nr-muted); margin-top: 4px; }
.mg-dialog-close { align-self: flex-end; }

@media (max-width: 900px) {
  .mg-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* na stránce Domů je .nr-page vnořená do kontejneru – bez vlastních okrajů */
.mg-page { margin: 24px 0 40px; padding: 0; }

/* ---------- Velor ----------
   Hra přes celou obrazovku (vlastní layout templates/Velor/@layout.latte, bez posouvání):
   obrázek pařezu vyplní okno (jako background cover), deska leží v obrázku na 49.93 % / 46.05 %, průměr 36.5 % šířky.
   Vlevo od desky kameny z ruky (2 sloupce), vpravo cíle kruhů, skóre a tlačítka, vpravo nahoře ? a domeček.
   --vl-sw = šířka obrázku, --vl-free = volné místo vedle desky (od kraje okna k okraji desky). */
/* blok Zakázky na úvodní stránce (Home/default.latte) */
.ct-home .nr-sub b { color: #fff; font-variant-numeric: tabular-nums; }
.ct-home-body { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.ct-home-state { margin: 0; display: flex; flex-direction: column; gap: 4px; color: var(--nr-muted); }
.ct-home-state b { color: #F1EAFF; font-family: var(--nr-display); font-size: 17px; letter-spacing: .03em; }
.ct-home-timer { color: #F6DCA5; font-variant-numeric: tabular-nums; }

.mg-body { overflow: hidden; background: #0A0806; color: var(--nr-fg, #ECE6F5); font-family: 'Sora', system-ui, sans-serif; }
.vl-screen {
  --vl-sw: max(100vw, calc(100vh * 1437 / 773));
  --vl-free: calc(50vw - .1825 * var(--vl-sw));
  --vl-stone-size: clamp(48px, 8.2vh, 96px);
  position: fixed; inset: 0; overflow: hidden;
}
.vl-scene {
  position: absolute; left: 50%; top: 50%; width: var(--vl-sw); aspect-ratio: 1437 / 773; transform: translate(-50%, -50%);
  background: url('../img/velor/board.webp') center / 100% 100% no-repeat;
}
.vl-board { position: absolute; left: 49.93%; top: 46.05%; width: 36.5%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.vl-board svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* vpravo nahoře: pravidla a domů */
.mg-top { position: fixed; top: 16px; right: 18px; z-index: 3; display: flex; gap: 8px; }
.mg-icon { width: 56px; min-height: 50px; padding: 0; font-size: 20px; letter-spacing: 0; }
.mg-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(var(--nr-glow-rgb), .7)); }

/* zprávy po akci – nahoře uprostřed */
.mg-flashes { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4; width: min(560px, calc(100vw - 180px)); display: flex; flex-direction: column; gap: 8px; }
.mg-flashes .alert { background-color: rgba(10, 7, 15, .92); margin: 0; }

/* výběr obtížnosti – uprostřed přes obrázek */
.vl-choose {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: min(760px, calc(100vw - 32px)); padding: 28px; border-radius: 12px; display: flex; flex-direction: column; gap: 14px;
  background-color: rgba(5, 4, 7, .88);
}
.vl-choose-title { margin: 0; font-family: var(--nr-display); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px rgba(var(--nr-glow-rgb), .6); }
.vl-choose-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vl-choose-list .nr-stone { width: 100%; min-height: 84px; }

/* ruka: jen kameny frakce s hodnotou, 2 sloupce (10 karet = 5 řad), uprostřed volného místa vlevo od desky */
.vl-handcol { position: absolute; z-index: 2; top: 50%; left: calc(var(--vl-free) / 2); transform: translate(-50%, -50%); }
.vl-hand { display: grid; grid-template-columns: repeat(2, var(--vl-stone-size)); gap: calc(var(--vl-stone-size) * .2) calc(var(--vl-stone-size) * .28); }

/* vpravo: cíle kruhů, skóre, tlačítka – uprostřed volného místa vpravo od desky */
.vl-results {
  position: absolute; z-index: 2; top: 50%; right: calc(var(--vl-free) / 2); transform: translate(50%, -50%);
  width: clamp(260px, calc(var(--vl-free) - 40px), 360px); display: flex; flex-direction: column; gap: 10px;
}
.vl-when { margin: 0 0 2px; font-size: 12px; color: var(--nr-muted); text-shadow: 0 1px 3px #000; }
.vl-when b { color: #fff; font-family: var(--nr-display); letter-spacing: .08em; text-transform: uppercase; }
.vl-results .vl-goal, .vl-results .vl-score { background-color: rgba(5, 4, 7, .84); }

/* důlek = tlačítko; obrázek důlku z návrhu, kroužek v barvě kruhu */
.vl-pit {
  position: absolute; width: var(--vl-pit-size, 14.5%); aspect-ratio: 1; transform: translate(-50%, -50%);
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: url('../img/velor/pit.webp') center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
  transition: filter .2s ease, transform .15s ease;
}
.vl-pit::after {
  content: ""; position: absolute; inset: 24%; border-radius: 50%;
  box-shadow: 0 0 10px 3px rgba(var(--vl-c), .55); opacity: .5; transition: opacity .2s ease;
}
.vl-pit:hover, .vl-board.is-armed .vl-pit:not(.is-filled) { filter: drop-shadow(0 0 7px rgba(var(--vl-c), .9)); }
.vl-board.is-armed .vl-pit:not(.is-filled)::after { opacity: 1; }
.vl-pit:focus-visible { outline: 2px solid var(--nr-rune); outline-offset: 3px; }
.vl-pit.is-filled::after { opacity: 0; }
.vl-pit:disabled { cursor: default; }

/* kámen frakce s hodnotou (v důlku i v ruce) */
.vl-stone { position: absolute; inset: 6%; display: block; }
.vl-stone img { width: 100%; height: 100%; display: block; filter: var(--vl-stone-filter) drop-shadow(0 0 6px var(--vl-stone-glow)); }
.vl-stone b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--nr-display); font-weight: 800; font-size: clamp(14px, 2.6vh, 26px); color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 10px #000;
}
[data-faction] { --vl-stone-filter: brightness(1.1); --vl-stone-glow: rgba(201, 196, 212, .35); }
[data-faction="noctis"] { --vl-stone-filter: sepia(.7) saturate(3.4) hue-rotate(225deg) brightness(1.15); --vl-stone-glow: rgba(155, 107, 255, .8); }
[data-faction="ignis"]  { --vl-stone-filter: sepia(.8) saturate(4) hue-rotate(-28deg) brightness(1.1); --vl-stone-glow: rgba(255, 90, 70, .75); }
[data-faction="vitae"]  { --vl-stone-filter: sepia(.7) saturate(3.2) hue-rotate(95deg) brightness(1.1); --vl-stone-glow: rgba(70, 220, 150, .7); }

/* kámen v ruce (tlačítko); název karty v bublině při najetí */
.vl-card {
  position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--nr-fg); cursor: pointer;
  transition: transform .15s ease, filter .2s ease, opacity .2s ease;
}
.vl-card .vl-stone { inset: 0; }
.vl-card .vl-stone b { font-size: calc(var(--vl-stone-size) * .36); }
.vl-card:hover:not(:disabled) { transform: translateY(-3px) scale(1.05); }
.vl-card:focus-visible { outline: 2px solid var(--nr-rune); outline-offset: 3px; }
.vl-card.is-selected { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(var(--nr-glow-rgb), .95)) drop-shadow(0 0 3px #fff); }
.vl-card.is-used { opacity: .25; cursor: default; transform: none; }
.vl-card-value, .vl-card-name { font-family: var(--nr-display); font-size: 13px; } /* jen bez JS */

/* cíle kruhů */
.vl-goals { display: flex; flex-direction: column; gap: 8px; }
.vl-goal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 12px;
  padding: 9px 14px; border-radius: 8px; transition: box-shadow .2s ease;
}
.vl-dot { width: 12px; height: 12px; border-radius: 50%; }
.vl-ring-0 { background: var(--vl-r0); box-shadow: 0 0 8px var(--vl-r0); }
.vl-ring-1 { background: var(--vl-r1); box-shadow: 0 0 8px var(--vl-r1); }
.vl-ring-2 { background: var(--vl-r2); box-shadow: 0 0 8px var(--vl-r2); }
.vl-goal-name { font-size: 12px; color: var(--nr-muted); line-height: 1.3; }
.vl-goal-name strong { display: block; color: var(--nr-fg); font-size: 14px; font-weight: 600; }
.vl-goal-sum { font-family: var(--nr-display); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-goal-sum small { font-family: 'Sora', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--nr-muted); }
.vl-goal-bonus { grid-column: 2 / 4; font-size: 12px; color: var(--nr-gold); }
.vl-goal.is-done { box-shadow: 0 0 0 1px rgba(143, 224, 174, .45), 0 0 14px rgba(143, 224, 174, .15); }
.vl-goal.is-done .vl-goal-sum b { color: var(--vl-ok); }
.vl-goal.is-over .vl-goal-sum b { color: var(--vl-bad); }

/* skóre a tlačítka */
.vl-score { padding: 12px 16px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.vl-score > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vl-score .nr-note { margin: 0; }
.vl-score-big { font-family: var(--nr-display); font-weight: 800; font-size: 28px; color: var(--nr-gold); font-variant-numeric: tabular-nums; }
.vl-score-big small { font-size: 16px; color: var(--nr-muted); }
.vl-score ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; color: var(--nr-muted); font-size: 13px; }
.vl-score.is-win { box-shadow: 0 0 0 1px rgba(232, 194, 122, .5), 0 0 24px rgba(232, 194, 122, .2); }
.vl-reward { color: var(--nr-gold); }
.vl-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.vl-actions .nr-stone { width: 100%; font-size: 13px; }
.vl-submit { margin: 0; display: flex; max-width: none; }
.nr-stone:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5) drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }

/* pravidla (dialog z „?“) */
.mg-rules-dialog { width: min(620px, calc(100% - 32px)); }
.vl-rules { margin: 0; padding-left: 20px; color: var(--nr-muted); font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.vl-rules b { color: var(--nr-fg); }

/* na úzké, vysoké nebo nízké obrazovce se vedle desky nic nevejde → stránka se posouvá:
   výřez pařezu kolem desky (čtverec), pod ním cíle a tlačítka, pak kameny */
@media (max-aspect-ratio: 7/5), (max-width: 1000px), (max-height: 560px) {
  /* blok Zakázky na úvodní stránce (Home/default.latte) */
.ct-home .nr-sub b { color: #fff; font-variant-numeric: tabular-nums; }
.ct-home-body { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.ct-home-state { margin: 0; display: flex; flex-direction: column; gap: 4px; color: var(--nr-muted); }
.ct-home-state b { color: #F1EAFF; font-family: var(--nr-display); font-size: 17px; letter-spacing: .03em; }
.ct-home-timer { color: #F6DCA5; font-variant-numeric: tabular-nums; }

.mg-body { overflow: auto; }
  .vl-screen { position: relative; inset: auto; overflow: visible; min-height: 100vh; padding: 82px 16px 32px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .vl-scene {
    position: relative; left: auto; top: auto; transform: none; width: min(100%, 680px); aspect-ratio: 1; border-radius: 10px;
    background-size: 260% auto; background-position: 50% 36.1%;
  }
  .vl-board { left: 50%; top: 50%; width: 94.9%; }
  .vl-handcol, .vl-results { position: static; transform: none; width: min(100%, 680px); }
  .vl-handcol { order: 2; }
  .vl-screen { --vl-stone-size: 64px; }
  .vl-hand { grid-template-columns: repeat(auto-fill, var(--vl-stone-size)); gap: 10px; justify-content: center; }
  .vl-choose { position: relative; left: auto; top: auto; transform: none; order: -1; }
}
@media (max-width: 640px) {
  .vl-choose-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-pit, .vl-card, .vl-goal { transition: none; }
}

/* ---------- Doprovod karavany ----------
   Hra přes celou obrazovku (layout templates/@minigame.latte): mýtina vyplní okno (cover, 1920 × 1072),
   tábor A vlevo a tábor B vpravo jako panely u krajů, vůz jede mezi nimi po mýtině (pozice v % obrázku),
   nahoře pravidla této karavany, dole jízdy a tlačítka. */
.cv-screen {
  --cv-sw: max(100vw, calc(100vh * 1920 / 1072));
  --cv-camp-w: clamp(230px, 19vw, 300px);
  position: fixed; inset: 0; overflow: hidden;
}
.cv-scene {
  position: absolute; left: 50%; top: 50%; width: var(--cv-sw); aspect-ratio: 1920 / 1072; transform: translate(-50%, -50%);
  background: url('../img/caravan/forest.webp') center / 100% 100% no-repeat;
}

/* vůz: kůň míří k táboru, kam jede (u B otočený zpět) */
.cv-wagon {
  position: absolute; z-index: 1; left: 36%; top: 66%; width: 20%; transform: translate(-50%, -50%);
  /* animace až po prvním vykreslení (is-ready), ať vůz při načtení stránky nepřejíždí */
}
.cv-wagon.is-b { left: 64%; }
.cv-wagon-img { display: block; width: 100%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .65));  }
.cv-wagon.is-b .cv-wagon-img { transform: scaleX(-1); }
.cv-wagon.is-ready { transition: left 1.2s ease-in-out; }
/* otočit se až po dojezdu: zpoždění = délka jízdy */
.cv-wagon.is-ready .cv-wagon-img { transition: transform .4s ease 1.2s; }
.cv-wagon.is-shaking .cv-wagon-img { animation: cv-shake .4s ease; }
@keyframes cv-shake { 25% { translate: -6px 0; } 50% { translate: 6px 0; } 75% { translate: -3px 0; } }

/* místa ve voze: kozlík (řidič) + pasažéři – nad vozem */
.cv-seats {
  position: absolute; left: 50%; bottom: 92%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(5, 4, 7, .72); white-space: nowrap;
}
.cv-seat-label { align-self: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nr-muted); }
.cv-seat { width: 52px; height: 52px; border-radius: 50%; border: 2px dashed rgba(217, 198, 255, .35); }
.cv-seat.is-driver-seat { border-color: rgba(232, 194, 122, .6); }

/* tábory */
.cv-camp {
  position: absolute; z-index: 2; top: 55%; transform: translateY(-50%); width: var(--cv-camp-w);
  padding: 12px; border-radius: 10px; background-color: rgba(5, 4, 7, .78); transition: box-shadow .3s ease;
}
.cv-camp-a { left: 1.5vw; }
.cv-camp-b { right: 1.5vw; }
.cv-camp.has-wagon { box-shadow: 0 0 0 1px rgba(232, 194, 122, .5), 0 0 22px rgba(232, 194, 122, .2); }
.cv-camp-title { margin: 0 0 8px; font-family: var(--nr-display); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
/* počet lidí v táboře (lucerna počítá jen lidi) – vůz se počítá k táboru, ze kterého odjíždí */
.cv-people { margin-left: 6px; font-family: 'Sora', system-ui, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--nr-muted); }
.cv-people.has-lantern { color: var(--nr-gold); }
.cv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; min-height: 90px; }
.cv-card-text { font-size: 12px; } /* jen bez JS */

/* karta = portrét (ilustrace v kroužku), jméno a vlastnosti */
.cv-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px; border: 0; background: none;
  color: var(--nr-fg); text-align: center; cursor: pointer; transition: transform .15s ease, opacity .2s ease;
}
.cv-card:disabled { cursor: default; }
.cv-camp:not(.has-wagon) .cv-card:not(:disabled) { opacity: .7; }
.cv-card.is-here:hover { transform: translateY(-3px); }
.cv-card:focus-visible { outline: 2px solid var(--nr-rune); outline-offset: 2px; border-radius: 8px; }
.cv-face {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #1C1429; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 3px 8px rgba(0, 0, 0, .6);
}
.cv-card.is-driver .cv-face { box-shadow: 0 0 0 2px rgba(232, 194, 122, .85), 0 3px 8px rgba(0, 0, 0, .6); }
.cv-face img { width: 100%; height: 100%; object-fit: cover; }
.cv-initial { font-family: var(--nr-display); font-size: 22px; }
.cv-name { font-size: 11px; font-weight: 600; line-height: 1.2; max-width: 84px; }
.cv-tags { font-size: 9.5px; line-height: 1.2; color: var(--nr-gold); max-width: 84px; }
.cv-card.is-seated .cv-face { width: 52px; height: 52px; }
.cv-card.is-seated .cv-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-card.is-seated .cv-tags { display: none; }

/* pravidla této karavany – nahoře uprostřed */
.cv-rules {
  position: absolute; z-index: 2; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 2 * var(--cv-camp-w) - 60px)); padding: 10px 16px; border-radius: 10px;
  background-color: rgba(5, 4, 7, .8); font-size: 13px;
}
.cv-rules ul { margin: 4px 0 0; padding-left: 18px; color: var(--nr-fg); display: grid; gap: 2px; }

/* dole uprostřed: jízdy, zpráva, tlačítka */
.cv-hud {
  position: absolute; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 2 * var(--cv-camp-w) - 60px)); padding: 12px 16px; border-radius: 10px;
  background-color: rgba(5, 4, 7, .84); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.cv-hud .nr-note { margin: 0; }
.cv-status { display: flex; align-items: baseline; gap: 10px; }
.cv-message { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--nr-fg); }
.cv-message.is-bad { color: var(--vl-bad); font-weight: 600; }
.cv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.cv-actions .nr-stone { width: 100%; font-size: 12px; min-height: 52px; }
.cv-actions .vl-submit { grid-column: 3; grid-row: 1; }
.cv-actions [hidden] { display: none; }

/* malá / úzká / nízká obrazovka: vše pod sebou a stránka se posouvá */
@media (max-aspect-ratio: 7/5), (max-width: 1000px), (max-height: 600px) {
  .cv-screen { position: relative; inset: auto; overflow: visible; min-height: 100vh; padding: 82px 12px 24px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-content: start; }
  .cv-scene { position: relative; left: auto; top: auto; transform: none; width: 100%; grid-column: 1 / -1; order: 1; border-radius: 10px; }
  .cv-rules, .cv-hud, .cv-camp { position: static; transform: none; width: auto; }
  .cv-rules { grid-column: 1 / -1; order: 0; }
  .cv-camp { order: 2; }
  .cv-hud { grid-column: 1 / -1; order: 3; }
  .cv-cards { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .cv-seats { transform: translateX(-50%) scale(.75); transform-origin: bottom center; }
  .vl-choose { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-wagon, .cv-wagon-img, .cv-card { transition: none; }
  .cv-wagon.is-shaking .cv-wagon-img { animation: none; }
}

/* správné řešení po potvrzení výsledku */
.vl-show-best { align-self: center; margin-top: 4px; }
.cv-solution { width: 100%; max-height: 38vh; overflow-y: auto; text-align: left; padding: 8px 4px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.cv-solution ol { margin: 6px 0 0; padding-left: 24px; font-size: 13px; display: grid; gap: 3px; }

/* ---------- Noirův příběh ----------
   Hra přes celou obrazovku (layout templates/@minigame.latte) na obrázku 16 : 9 (story/board.webp, cover):
   vlevo lesní půda – vyprávění a nápovědy, uprostřed kamenná deska (x 33,5–67 %, y 7,5–91 %) – mřížka 5 kol × 5 karet,
   vpravo dřevěný špalek (x 73,5–97 %, y 8–91 %) – karty u ohně 5 × 5. Rozměry v cqw = % šířky obrázku. */
.st-screen { position: fixed; inset: 0; overflow: hidden; background: #0A0806; color: #F1EAFF; }
.st-scene {
  position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 1920 / 1072)); aspect-ratio: 1920 / 1072;
  transform: translate(-50%, -50%); container-type: inline-size;
  background: url('../img/story/board.webp') 0 0 / 100% 100% no-repeat;
}

/* vlevo: příběh (na užším okně je obrázek po stranách oříznutý – panel začíná až u viditelného kraje) */
.st-story {
  position: absolute; top: 4.5%; bottom: 4.5%; right: 69.5%; left: max(1.5%, calc((100cqw - 100vw) / 2 + 18px));
  overflow-y: auto; padding: 1.3cqw 1.5cqw; border-radius: 10px; background: rgba(5, 4, 7, .74);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45); scrollbar-width: thin;
}
.st-story .vl-when { color: #D8CDE8; }
.st-title { margin: 6px 0 8px; font-family: var(--nr-display); font-size: clamp(18px, 1.25cqw, 26px); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 0 12px rgba(var(--nr-glow-rgb), .6); }
.st-intro { margin: 0 0 12px; font-size: 13px; color: #D8CDE8; }
.st-quote { margin: 0; padding: 8px 14px; border-left: 3px solid var(--nr-gold); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(16px, 1.05cqw, 22px); font-style: italic; line-height: 1.5; color: #fff; }
.st-hints-title { margin: 18px 0 8px; font-family: var(--nr-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--nr-gold); }
.st-hints { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(14px, .82cqw, 17px); line-height: 1.5; }
.st-hints b { display: inline-block; min-width: 2.6em; margin-right: 6px; font-family: 'Sora', system-ui, sans-serif; font-size: 12px; color: var(--nr-gold); }
.st-none { margin: 0; font-size: 13px; color: #D8CDE8; font-family: 'Sora', system-ui, sans-serif; }
.st-result { margin-top: 18px; padding: 14px; border-radius: 10px; background: rgba(0, 0, 0, .45); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.st-result .nr-note { margin: 0; }
.st-share { margin: 0; font-family: inherit; font-size: 18px; line-height: 1.25; letter-spacing: 2px; }
.st-solution { margin: 4px 0 0; padding-left: 22px; text-align: left; display: grid; gap: 6px; font-size: 14px; width: 100%; }
.st-type { margin-left: 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--nr-muted); }

/* uprostřed: kamenná deska – mřížka 5 kol × 5 karet a tlačítka */
.st-board { position: absolute; left: 35.2%; width: 30.2%; top: 9.3%; height: 79.5%; display: flex; flex-direction: column; gap: .55cqw; }
.st-round { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: clamp(11px, .7cqw, 15px); color: #E6DCF2; text-shadow: 0 1px 3px #000; }
.st-round b { color: #fff; }
.st-grid { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: .5cqw; }
.st-grid-row { display: grid; grid-template-columns: 1.3cqw repeat(5, minmax(0, 1fr)); gap: .45cqw; min-height: 0; }
.st-grid-no { align-self: center; font-family: var(--nr-display); font-size: clamp(11px, .8cqw, 17px); color: var(--nr-gold); text-shadow: 0 1px 3px #000; }
.st-grid-row:not(.is-current) .st-grid-no { opacity: .55; }
.st-grid-row.is-current .st-grid-no { opacity: 1; text-shadow: 0 0 8px rgba(232, 194, 122, .8); }
.st-slot {
  min-height: 0; border-radius: .4cqw; border: .12cqw dashed rgba(217, 198, 255, .55); background: rgba(5, 4, 7, .55);
  color: #E6DCF2; font-family: var(--nr-display); font-size: clamp(12px, .9cqw, 20px); cursor: pointer; padding: 0;
}
.st-slot:hover { border-color: rgba(var(--nr-glow-rgb), .9); }
.st-slot.is-empty { border-color: rgba(217, 198, 255, .2); background: rgba(5, 4, 7, .25); cursor: default; }
.st-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .6cqw; }
.st-actions .nr-stone { width: 100%; min-height: clamp(46px, 3.2cqw, 64px); font-size: clamp(11px, .7cqw, 14px); }

/* vpravo: dřevěný špalek – karty u ohně 5 × 5 */
.st-wood { position: absolute; left: 76.4%; width: 18.2%; top: 12.5%; height: 74%; display: flex; flex-direction: column; gap: .4cqw; }
.st-pool-title { margin: 0; text-align: center; font-family: var(--nr-display); font-size: clamp(13px, .9cqw, 19px); letter-spacing: .1em; text-transform: uppercase; color: #3A2412; text-shadow: 0 1px 0 rgba(255, 235, 200, .5); }
.st-legend { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; font-size: clamp(10px, .6cqw, 13px); font-weight: 600; color: #3A2412; }
.st-legend i { display: inline-block; width: .7em; height: .7em; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.st-legend i.is-g { background: #2F9A5C; }
.st-legend i.is-b { background: #2E6CB8; }
.st-legend i.is-x { background: #2A2333; }
.st-pool { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: .35cqw; }

/* malá celá karta: ilustrace (nebo kámen frakce) a jméno */
.st-mini {
  min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: center;
  border-radius: .4cqw; border: .12cqw solid var(--vl-stone-glow); background: #120D1A; color: #F1EAFF;
  box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .55); transition: transform .15s ease, opacity .2s ease, box-shadow .2s ease;
}
button.st-mini { cursor: pointer; }
button.st-mini:hover:not(:disabled) { transform: translateY(-.15cqw) scale(1.04); box-shadow: 0 0 .6cqw rgba(var(--nr-glow-rgb), .8); }
button.st-mini:disabled { cursor: default; }
.st-mini:focus-visible { outline: 2px solid var(--nr-rune); outline-offset: 2px; }
.st-mini-art { position: relative; flex: 1; min-height: 0; background: radial-gradient(circle, #2A1E3A, #120D1A); }
.st-mini-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-mini-art img.is-stone { object-fit: contain; padding: 14%; box-sizing: border-box; filter: var(--vl-stone-filter) drop-shadow(0 0 4px var(--vl-stone-glow)); }
.st-mini-name {
  flex: 0 0 auto; padding: .18cqw .2cqw .22cqw; font-size: clamp(8px, .55cqw, 12px); font-weight: 600; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em;
}
.st-draft { position: absolute; left: 3px; top: 3px; font-size: clamp(7px, .45cqw, 10px); letter-spacing: .08em; text-transform: uppercase; color: #0B0811; background: var(--nr-gold); border-radius: 3px; padding: 0 4px; font-weight: 700; }
/* barvy: v mřížce odehraná kola, u ohně nejlepší známá barva karty */
.st-mini.is-g { border-color: #3FCF7E; box-shadow: 0 0 0 .12cqw #3FCF7E, 0 0 .7cqw rgba(63, 207, 126, .55); }
.st-mini.is-g .st-mini-name { background: #2F7A4C; }
.st-mini.is-b { border-color: #5B9CF0; box-shadow: 0 0 0 .12cqw #5B9CF0; }
.st-mini.is-b .st-mini-name { background: #2E5E9E; }
.st-mini.is-x { opacity: .5; filter: grayscale(.7); }
.st-mini.in-slot.is-locked { border-color: #3FCF7E; box-shadow: 0 0 0 .12cqw #3FCF7E, 0 0 .7cqw rgba(63, 207, 126, .55); }
.st-mini.is-used { opacity: .22; }

/* karty u ohně: při najetí (a výběru klávesnicí) se zvětší nad ostatní, ať je vidět, co to je – celé jméno */
.st-pool .st-mini { position: relative; transform-origin: center; }
.st-pool button.st-mini:hover, .st-pool button.st-mini:focus-visible {
  z-index: 5; transform: scale(2.1); opacity: 1; filter: none;
  box-shadow: 0 .4cqw 1.2cqw rgba(0, 0, 0, .75), 0 0 0 .08cqw rgba(var(--nr-glow-rgb), .9);
}
.st-pool button.st-mini:hover .st-mini-name, .st-pool button.st-mini:focus-visible .st-mini-name { -webkit-line-clamp: 4; }
/* krajní sloupce se zvětšují dovnitř, ať nevyjedou ze špalku */
.st-pool .st-mini:nth-child(5n + 1) { transform-origin: left center; }
.st-pool .st-mini:nth-child(5n) { transform-origin: right center; }
.st-pool .st-mini:nth-child(-n + 5) { transform-origin: center top; }
.st-pool .st-mini:nth-child(1) { transform-origin: left top; }
.st-pool .st-mini:nth-child(5) { transform-origin: right top; }
.st-pool .st-mini:nth-child(n + 21) { transform-origin: center bottom; }
.st-pool .st-mini:nth-child(21) { transform-origin: left bottom; }
.st-pool .st-mini:nth-child(25) { transform-origin: right bottom; }

/* úzké, vysoké nebo nízké okno: obrázek by se moc ořízl → části pod sebou, stránka se posouvá */
@media (max-aspect-ratio: 4/3), (max-width: 1000px), (max-height: 560px) {
  .mg-body:has(.st-screen) { overflow: auto; }
  .st-screen { position: relative; inset: auto; overflow: visible; min-height: 100vh; background: url('../img/story/board.webp') center / cover fixed #0A0806; }
  .st-scene { position: static; width: auto; aspect-ratio: auto; transform: none; background: none; padding: 80px 12px 24px; display: grid; gap: 16px; }
  .st-story, .st-board, .st-wood { position: static; width: auto; height: auto; padding: 14px; border-radius: 10px; background: rgba(5, 4, 7, .82); }
  .st-board { gap: 10px; }
  .st-grid { grid-template-rows: none; gap: 6px; }
  .st-grid-row { grid-template-columns: 1.6em repeat(5, minmax(0, 1fr)); gap: 5px; height: 96px; }
  .st-pool { grid-template-rows: none; grid-auto-rows: 96px; gap: 5px; }
  .st-pool-title, .st-legend { color: var(--nr-gold); text-shadow: none; }
  .st-mini { border-width: 1px; border-radius: 6px; }
  .st-mini-name { font-size: 10px; padding: 2px; }
  .st-actions .nr-stone { min-height: 52px; font-size: 12px; }
}

/* vývojový režim (develop: true v local.neon) – lišta „nová hra“ vlevo nahoře */
.mg-develop { position: fixed; top: 10px; left: 10px; z-index: 50; display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-radius: 10px; background: rgba(120, 20, 20, .85); border: 1px dashed #ffb3b3; color: #fff; font-size: 13px; }
.mg-develop b { letter-spacing: .1em; color: #ffd0d0; }
.mg-develop a { color: #fff; text-decoration: underline; }

/* ---------- Aréna na domovské stránce: vlevo postava ze sestavy, vpravo vstup ---------- */
.ar-home-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ar-home-hero { width: 180px; flex: none; }
.ar-home-empty {
  aspect-ratio: 627 / 967; border-radius: 10px;
  border: 2px dashed rgba(var(--nr-glow-rgb), .35); background: rgba(255, 255, 255, .03);
}
/* staty bojovníka mezi postavou a tlačítky (.nr-fstats z common.css) */
.ar-home-stats { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.ar-home-stats .nr-fstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-home-actions { display: flex; flex-direction: column; gap: 14px; flex: none; }
.ar-home-enter { min-width: 260px; }
/* s odpočtem do dalšího souboje se tlačítko dělí 10 : 2 – vlevo název, vpravo čas (skript v Home/default.latte); bez něj jen název uprostřed */
.ar-home-enter.has-timer { display: grid; grid-template-columns: 10fr 2fr; align-items: center; column-gap: 6px; }
.ar-home-timer { color: var(--nr-rune); font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: right; }
.ar-home-timer:empty { display: none; }
/* úplně dole v sekci Aréna: kde hráč na výpravách je */
.ar-home-expedition {
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid rgba(var(--nr-glow-rgb), .2);
  color: var(--nr-muted); font-size: 14px;
}
.ar-home-expedition b { color: #fff; }