/* Zkus si být táborníkem — herní režim plánku (panel, okna, minihry). */
.planek-hra {
    position: absolute;
    top: 3.4rem;
    left: 0.75rem;
    z-index: 2;
    padding: 0.4rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: #C9862A;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: var(--stin-maly);
}

.planek-hra:hover { background: #B5771F; }
.hra-aktivni .planek-hra,
.hra-aktivni .planek-tempo { display: none !important; }

.hra-panel {
    position: absolute;
    top: 3.4rem;
    left: 0.75rem;
    z-index: 3;
    width: 17.5rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.7rem 0.85rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.96);
    color: #14241D;
    box-shadow: var(--stin-maly);
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hra-hlavicka { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; }
.hra-hlavicka > span:nth-child(2) { flex: 1 1 100%; order: 9; font-variant-numeric: tabular-nums; font-size: 0.85rem; opacity: 0.8; }
.hra-druzstvo { margin-right: auto; }
.hra-druzstvo { padding: 0.1rem 0.6rem; border-radius: 999px; color: #fff; font-weight: 700; }
.hra-konec { border: 0; background: transparent; font-size: 1rem; line-height: 1; padding: 0.2rem 0.4rem; }
.hra-body { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hra-druzstva { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-size: 0.78rem; opacity: 0.85; }
.hra-druzstva .moje { font-weight: 700; }
.hra-teda { margin: 0.2rem 0 0; }
.hra-panel p { margin: 0; }

.hra-tl {
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #14502F;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.hra-tl:hover:not([disabled]) { background: #0C3A21; }
.hra-tl[disabled] { opacity: 0.55; }
.hra-tl.hra-svetly { background: #E7EDE4; color: #14241D; }
.hra-velke { min-height: 3.4rem; font-size: 1.1rem; flex: 1; }
.hra-dvojice { display: flex; gap: 0.6rem; margin-top: 0.6rem; }

.hra-hlaska {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    translate: -50% 0;
    z-index: 4;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(8, 49, 31, 0.94);
    color: #fff;
    max-width: calc(100% - 2rem);
}

.hra-okno {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 49, 31, 0.55);
    padding: 0.75rem;
}

.hra-okno[hidden] { display: none; }

.hra-okno-obsah {
    width: min(26rem, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: 1.1rem 1.2rem;
    border-radius: 1rem;
    background: #fff;
    color: #14241D;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hra-okno-obsah p { margin: 0; }
.hra-nadpis { font-size: 1.2rem; margin: 0; }
.hra-popis { color: #34443A; }
.hra-stav { font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.hra-vzdat { align-self: center; }

.hra-minihra { display: flex; flex-direction: column; gap: 0.6rem; }
.hra-platno { width: 100%; max-width: 320px; align-self: center; border-radius: 0.6rem; touch-action: none; }

.hra-pasek, .hra-lano { height: 1.1rem; border-radius: 999px; background: #E7EDE4; overflow: hidden; position: relative; }
.hra-pasek-vypln { height: 100%; width: 0; background: #C9862A; }
.hra-lano { height: 2.4rem; overflow: visible; background: #D8C9A5; }
.hra-lano-uzel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 1.6rem; }

.hra-casovani { position: relative; height: 1.6rem; border-radius: 999px; background: #E7EDE4; }
.hra-zelene { position: absolute; left: 72%; width: 16%; top: 0; bottom: 0; background: #7BC47F; border-radius: 999px; }
.hra-ukazatel { position: absolute; top: -0.15rem; bottom: -0.15rem; width: 0.4rem; background: #B23A2E; border-radius: 2px; }

.hra-plocha { position: relative; height: 15rem; border-radius: 0.8rem; background: #EEF3EA; touch-action: manipulation; }
.hra-cil { position: absolute; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); font-size: 1.5rem; }
.hra-cil.hotovo { opacity: 0; transform: scale(0.4); transition: all 0.2s; }

.hra-kameny { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.hra-kamen, .hra-cislo { height: 3rem; text-align: center; font-size: 1.2rem; border-radius: 0.6rem; border: 1px solid #B8C4B2; background: #F4F7F1; }
.hra-cislo { width: 100%; }

.hra-skladacka { display: grid; gap: 2px; aspect-ratio: 4 / 3; max-width: 22rem; margin: 0 auto; width: 100%; }
.hra-kousek { border: 1px solid #fff; padding: 0; background-image: url('../img/tabor-z-dronu.jpg'); background-repeat: no-repeat; }
.hra-kousek.vybrano { outline: 3px solid #C9862A; z-index: 1; }

.hra-formulare { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin: 0; font-size: 0.8rem; min-height: 1.5rem; }
.hra-formulare li { padding: 0.1rem 0.55rem; border-radius: 999px; background: #E7EDE4; }
.hra-okenka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.hra-okenko { padding: 0.4rem 0.2rem; font-size: 0.8rem; }

.hra-stezka { position: relative; height: 6rem; border-radius: 0.8rem; background: #0F1A14; overflow: hidden; }
.hra-svicka { position: absolute; bottom: 0.6rem; left: 0; font-size: 2rem; transition: opacity 0.1s; }
.hra-duch { position: absolute; right: 1rem; top: 0.8rem; font-size: 2.4rem; opacity: 0; }
.hra-stezka.buu .hra-duch { opacity: 1; }
.hra-kostka { font-size: 4rem; text-align: center; margin: 0; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
    .hra-cil.hotovo, .hra-svicka { transition: none; }
}

/* Kapitánská štafeta */
.hra-provaz { display: flex; gap: 0.2rem; justify-content: space-between; }
.hra-bezec { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 1.5rem; padding: 0.2rem 0; border-radius: 0.5rem; }
.hra-bezec.ja { background: #FFF3D6; outline: 2px solid #C9862A; }
.hra-bezec small { font-size: 0.62rem; min-height: 0.8rem; }
.hra-vec { min-height: 1.8rem; }

/* --- Celá obrazovka plánku (pravá, nebo plocha přes celé okno) ------------------------------- */
html.planek-bez-posunu, html.planek-bez-posunu body { overflow: hidden; overscroll-behavior: none; }

html body .planek.planek-cela {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    left: 0;
    transform: none;
    margin: 0;
    display: block;
    background: #0F1A14;
}

html body .planek.planek-cela .planek-svg { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
html body .planek.planek-cela .planek-hodiny { position: absolute; top: calc(0.5rem + env(safe-area-inset-top)); left: calc(0.5rem + env(safe-area-inset-left)); }
html body .planek.planek-cela .planek-ovladani {
    position: absolute;
    top: calc(0.5rem + env(safe-area-inset-top));
    right: calc(0.5rem + env(safe-area-inset-right));
    order: 0;
    flex-wrap: nowrap;
    gap: 0.4rem;
}
html body .planek.planek-cela .planek-zprava { top: calc(3.3rem + env(safe-area-inset-top)); bottom: auto; }

/* Úzká obrazovka: hodiny nahoře, ovládání mapy pod nimi (aby se nepřekrývaly). */
@media (max-width: 720px) {
    html body .planek.planek-cela .planek-ovladani { top: calc(3.1rem + env(safe-area-inset-top)); right: auto; left: calc(0.5rem + env(safe-area-inset-left)); }
    html body .planek.planek-cela .planek-ovladani button { min-width: 2.4rem; height: 2.4rem; padding: 0 0.5rem; }
    html body .planek.planek-cela .planek-zprava { top: calc(6rem + env(safe-area-inset-top)); }
}
html body .planek.planek-cela .planek-hra { display: none; }

/* --- Rozhraní hry podle zařízení a natočení (atributy nastavuje hra.js) ----------------------- */
.hra-panel button, .hra-okno button, .hra-okno { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hra-okno { overscroll-behavior: contain; padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)); }
.hra-minihra, .hra-okno-obsah { user-select: none; -webkit-user-select: none; }

/* Telefon na výšku: panel jako spodní lišta, minihra přes celou obrazovku. */
[data-hra-zarizeni='telefon'][data-hra-orientace='vyska'] .hra-panel {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    border-radius: 1rem 1rem 0 0; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
    font-size: 0.95rem; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}
[data-hra-zarizeni='telefon'][data-hra-orientace='vyska'] .hra-druzstva { display: none; }
[data-hra-zarizeni='telefon'][data-hra-orientace='vyska'] .hra-hlaska { bottom: 11rem; }
[data-hra-zarizeni='telefon'][data-hra-orientace='vyska'] .hra-okno { align-items: flex-end; padding: 0; }
[data-hra-zarizeni='telefon'][data-hra-orientace='vyska'] .hra-okno-obsah { width: 100%; max-height: 100%; min-height: 55%; border-radius: 1rem 1rem 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Telefon na šířku: panel na levém okraji, minihra rozložená do dvou sloupců, aby se vešla do nízké obrazovky. */
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-panel {
    top: calc(2.9rem + env(safe-area-inset-top)); bottom: 0.5rem; left: calc(0.5rem + env(safe-area-inset-left)); width: 14.5rem;
    font-size: 0.82rem; overflow-y: auto; padding: 0.5rem 0.6rem;
}
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-druzstva { font-size: 0.72rem; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-hlaska { left: 55%; bottom: 0.5rem; max-width: 60%; font-size: 0.85rem; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-okno-obsah { width: min(46rem, 100%); max-height: 100%; padding: 0.7rem 1rem; gap: 0.4rem; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-platno { width: auto; height: min(320px, 62dvh); max-width: 100%; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-minihra { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1rem; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-minihra > .hra-popis,
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-minihra > .hra-nadpis { flex-basis: 100%; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-plocha { height: 9rem; flex-basis: 100%; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-skladacka { max-width: min(20rem, 60dvh * 1.333); }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-kostka { font-size: 2.6rem; }
[data-hra-zarizeni='telefon'][data-hra-orientace='sirka'] .hra-velke { min-height: 2.8rem; }

/* Tablet: větší dotykové plochy, panel nahoře vlevo jako na počítači. */
[data-hra-zarizeni='tablet'] .hra-panel { width: 21rem; font-size: 1rem; top: calc(3.6rem + env(safe-area-inset-top)); }
[data-hra-zarizeni='tablet'] .hra-tl { padding: 0.75rem 1.2rem; font-size: 1.05rem; }
[data-hra-zarizeni='tablet'] .hra-konec { font-size: 1.3rem; padding: 0.4rem 0.7rem; }
[data-hra-zarizeni='tablet'][data-hra-orientace='vyska'] .hra-okno-obsah { width: min(34rem, 100%); }
[data-hra-zarizeni='tablet'] .hra-platno { max-width: 420px; }
[data-hra-zarizeni='tablet'][data-hra-orientace='sirka'] .hra-platno { height: min(420px, 62dvh); width: auto; }

/* Mimo celou obrazovku na úzkém okně (např. po opuštění celé obrazovky) panel nezakrývá mapu. */
@media (max-width: 720px) {
    .planek:not(.planek-cela) .planek-hra,
    .planek:not(.planek-cela) .hra-panel { position: static; width: auto; max-width: none; margin: 0.4rem 0; align-self: stretch; order: 3; }
    .planek:not(.planek-cela) .hra-okno { position: fixed; }
}

/* --- Šťáva minihier: plovoucí body, částice, konfety, odpočet, otřes -------------------------- */
.hra-minihra { position: relative; }
.hra-plovouci, .hra-castice, .hra-konfeta { position: absolute; pointer-events: none; z-index: 6; }
.hra-plovouci { translate: -50% -50%; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); white-space: nowrap; animation: hra-plav 0.9s ease-out forwards; }
.hra-castice { translate: -50% -50%; font-size: 1.1rem; animation: hra-letet 0.8s ease-out forwards; }
.hra-konfeta { top: -1.5rem; animation: hra-pad 2s linear forwards; }
.hra-okno-obsah { position: relative; overflow-x: hidden; }

@keyframes hra-plav { from { opacity: 1; transform: translateY(0) scale(0.8); } 20% { transform: translateY(-8px) scale(1.15); } to { opacity: 0; transform: translateY(-46px) scale(1); } }
@keyframes hra-letet { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); } }
@keyframes hra-pad { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(110vh) rotate(540deg); opacity: 0.9; } }
@keyframes hra-otres { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(3px, 1px); } }
@keyframes hra-otres-silny { 0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-8px, 4px) rotate(-1.5deg); } 35% { transform: translate(8px, -4px) rotate(1.5deg); } 55% { transform: translate(-6px, -2px) rotate(-1deg); } 75% { transform: translate(6px, 2px) rotate(1deg); } }
@keyframes hra-zablesk { from { box-shadow: inset 0 0 0 100vmax var(--zablesk, rgba(255, 255, 255, 0.4)); } to { box-shadow: inset 0 0 0 100vmax transparent; } }
@keyframes hra-puls { from { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 25% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.hra-trast { animation: hra-otres 0.28s; }
.hra-trast-silny { animation: hra-otres-silny 0.4s; }
.hra-zablesk { animation: hra-zablesk 0.35s ease-out; }
.hra-odpocet { position: absolute; left: 50%; top: 45%; z-index: 8; font-size: 5rem; font-weight: 900; color: #C9862A; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); pointer-events: none; transform: translate(-50%, -50%); }
.hra-odpocet.puls { animation: hra-puls 0.5s ease-out; }
.hra-odpocet.start { color: #1F7A3A; font-size: 3.6rem; }

.hra-kombo { min-height: 1.4rem; margin: 0; text-align: center; font-weight: 800; color: #E8731A; }
.hra-rekord { margin: 0; text-align: center; font-weight: 600; color: #8A6B1F; }

/* Cíle v klikacích úkolech */
.hra-cil { animation: hra-nask 0.18s ease-out; }
.hra-cil.zlaty { background: radial-gradient(circle, #FFF3B0, #E8A317); box-shadow: 0 0 12px 3px rgba(232, 163, 23, 0.7); }
.hra-cil.zmizel { opacity: 0; transform: scale(0.5); transition: all 0.25s; }
@keyframes hra-nask { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Sprint */
.hra-zavod { display: flex; flex-direction: column; gap: 0.3rem; }
.hra-draha { position: relative; height: 2.1rem; border-radius: 0.5rem; background: repeating-linear-gradient(90deg, #E7EDE4 0 18px, #DCE5D6 18px 36px); }
.hra-draha.ja { outline: 2px solid #C9862A; }
.hra-draha small { position: absolute; right: 0.4rem; top: 0.4rem; opacity: 0.6; }
.hra-bezec-ikona { position: absolute; top: 0.1rem; left: 0; font-size: 1.5rem; transition: left 0.1s linear; }
.hra-zavod.turbo .hra-draha.ja { box-shadow: 0 0 14px 4px rgba(232, 115, 26, 0.6); }

/* Paměť, skládačka, propustka */
.hra-kamen.odkryty { background: #FFF3B0; transform: scale(1.08); font-weight: 800; }
.hra-kousek.spravne { outline: 3px solid #3E9B5A; outline-offset: -3px; }
.hra-okenko.uspech { animation: hra-nask 0.3s ease-out; background: #3E9B5A; }
.hra-formulare li.novy { animation: hra-nask 0.3s ease-out; }

/* Sběr borůvek */
.hra-labyrint { max-width: min(100%, 340px); touch-action: none; image-rendering: crisp-edges; }
.hra-sipky { display: grid; grid-template-columns: repeat(3, 3.4rem); grid-template-areas: '. u .' 'l d r'; gap: 0.3rem; justify-content: center; }
.hra-sipky .hra-tl { padding: 0.5rem 0; font-size: 1.3rem; }
.hra-sipky .hra-tl:nth-child(1) { grid-area: u; }
.hra-sipky .hra-tl:nth-child(2) { grid-area: l; }
.hra-sipky .hra-tl:nth-child(3) { grid-area: d; }
.hra-sipky .hra-tl:nth-child(4) { grid-area: r; }
@media (pointer: fine) { .hra-sipky { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .hra-plovouci, .hra-castice, .hra-konfeta, .hra-trast, .hra-trast-silny, .hra-zablesk, .hra-odpocet.puls, .hra-cil, .hra-okenko.uspech { animation: none; }
}

/* --- Rozhovory (RPG okno) --------------------------------------------------------------------- */
.hra-dialog { display: flex; flex-direction: column; gap: 0.7rem; }
.hra-dialog-hlava { display: flex; align-items: center; gap: 0.7rem; }
.hra-portret { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #FFF3D6; font-size: 2.1rem; box-shadow: inset 0 0 0 2px #C9862A; }
.hra-dialog-text { min-height: 5.5rem; padding: 0.8rem 0.9rem; border-radius: 0.8rem; background: #F4F7F1; font-size: 1.02rem; line-height: 1.45; cursor: pointer; }
.hra-dialog-volby { display: flex; flex-direction: column; gap: 0.45rem; }
.hra-dialog-volby .hra-tl { text-align: left; border-radius: 0.8rem; }

/* --- Hradiště (stavba vesničky) -------------------------------------------------------------- */
.hra-hradiste { display: flex; flex-direction: column; gap: 0.5rem; }
.hra-hr-hlava { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; justify-content: space-between; font-size: 0.88rem; }
.hra-hr-zdroje { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; font-weight: 700; }
.hra-hr-mapa { position: relative; }
.hra-hr-teren { display: grid; gap: 2px; padding: 3px; border-radius: 0.7rem; background: #6E9B58; }
.hra-hr-bunka { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0.35rem; background: #B7D58B; font-size: clamp(1.1rem, 4.4vw, 1.9rem); line-height: 1; }
.hra-hr-bunka:not(.strom):not(.budova):hover { background: #D4E8AA; outline: 2px dashed #C9862A; }
.hra-hr-bunka.strom { background: #4E7E3E; }
.hra-hr-bunka.budova { background: #E8D9A9; }
.hra-hr-potulky { position: absolute; inset: 3px; pointer-events: none; }
.hra-hr-tvor { position: absolute; translate: -50% -50%; font-size: clamp(0.9rem, 3.2vw, 1.4rem); transition: left 1.2s ease, top 1.2s ease; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.hra-hr-zprava { min-height: 2.6rem; }
.hra-hr-lesnicci { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.hra-hr-lesnicek { padding: 0.2rem 0.6rem; border: 1px solid #B8C4B2; border-radius: 999px; background: #fff; font-size: 0.82rem; }
.hra-hr-lesnicek.vybrano { background: #FFF3D6; border-color: #C9862A; }
.hra-hr-paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.35rem; max-height: 11rem; overflow-y: auto; }
.hra-hr-volba { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.3rem 0.2rem; border: 1px solid #B8C4B2; border-radius: 0.6rem; background: #fff; }
.hra-hr-volba .ikona { font-size: 1.5rem; }
.hra-hr-volba small { font-size: 0.68rem; text-align: center; line-height: 1.1; }
.hra-hr-volba.vybrano { background: #FFF3D6; border-color: #C9862A; box-shadow: 0 0 0 2px #C9862A; }
.hra-hr-volba[disabled] { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) { .hra-hr-tvor { transition: none; } }

/* Noční alarm */
.hra-nastup { padding: 0.4rem 0.6rem; border-radius: 0.6rem; background: #DCE8CF; min-height: 3.2rem; }
.hra-vlajka { font-weight: 700; font-size: 0.85rem; }
.hra-nastup-rada { display: flex; gap: 0.2rem; flex-wrap: wrap; min-height: 1.6rem; font-size: 1.4rem; }
.hra-stoji { animation: hra-nask 0.25s ease-out; }
.hra-stany { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.6rem, 1fr)); gap: 0.4rem; }
.hra-stan { display: flex; flex-direction: column; align-items: center; padding: 0.4rem 0.2rem; border: 2px solid #B8C4B2; border-radius: 0.6rem; background: #3E5C46; color: #fff; min-height: 4.2rem; }
.hra-stan.spi { background: #2B3F5E; }
.hra-stan.ja { border-color: #C9862A; }
.hra-stan[disabled] { opacity: 0.6; background: #6A8F72; }
.hra-spac { font-size: 1.7rem; min-height: 2rem; }
.hra-stan small { font-size: 0.7rem; }

/* --- Hradiště ve 2,5D (izometrický pohled) ---------------------------------------------------- */
.hra-okno-obsah.siroke { width: min(72rem, 100%); height: 100%; max-height: 100%; display: flex; flex-direction: column; padding: 0.6rem 0.8rem; gap: 0.35rem; }
.hra-okno-obsah.siroke .hra-hradiste { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.hra-iso-sloupec { position: relative; flex: 1; min-height: 12rem; display: flex; }
.hra-iso-obal { flex: 1; overflow: auto; border-radius: 0.7rem; background: #CFE8F5; overscroll-behavior: contain; }
.hra-iso { display: block; touch-action: none; image-rendering: auto; }
.hra-hr-lupa { position: absolute; right: 0.6rem; top: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.hra-hr-lupa button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); font-size: 1.2rem; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.hra-hr-nastroje { display: flex; gap: 0.3rem; overflow-x: auto; padding-bottom: 0.1rem; }
.hra-hr-nastroj { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 3.7rem; padding: 0.25rem 0.3rem; border: 1px solid #B8C4B2; border-radius: 0.6rem; background: #fff; }
.hra-hr-nastroj .ikona { font-size: 1.25rem; line-height: 1.2; }
.hra-hr-nastroj small { font-size: 0.66rem; }
.hra-hr-nastroj.vybrano { background: #FFF3D6; border-color: #C9862A; box-shadow: 0 0 0 2px #C9862A; }
.hra-hr-paleta { display: flex; gap: 0.3rem; overflow-x: auto; padding-bottom: 0.1rem; max-height: none; }
.hra-hr-paleta .hra-hr-volba { flex: 0 0 5.2rem; }
.hra-hr-volba.nedostupne { opacity: 0.55; }
.hra-hr-lesnicci { max-height: 3.6rem; overflow-y: auto; }
.hra-hr-zprava { min-height: 2.4rem; text-align: left; font-weight: 500; }
@media (max-height: 520px) { .hra-hr-lesnicci, .hra-hr-zdroje { display: none; } }

/* Evakuace */
.hra-vnitrek { position: relative; height: 13rem; border-radius: 0.8rem; background: repeating-linear-gradient(90deg, #C9B38C 0 14px, #BDA77F 14px 28px); overflow: hidden; }
.hra-vec-stan { position: absolute; padding: 0; border: 0; background: transparent; line-height: 1; transition: transform 0.2s, opacity 0.2s; }
.hra-vec-stan.zabaleno { opacity: 0; transform: translateY(-1.2rem) scale(0.4); pointer-events: none; }
.hra-vec-stan.drobna { opacity: 0.85; }

/* Široká obrazovka (počítač, tablet, telefon na šířku): nástroje vlevo, mapa uprostřed, budovy vpravo. */
@media (min-width: 700px) {
    .hra-okno-obsah.siroke .hra-hradiste { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 6.4rem; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'hlava hlava hlava' 'zdroje zdroje zdroje' 'nastroje mapa paleta' 'nastroje zprava paleta' 'lesnicci lesnicci lesnicci' 'hotovo hotovo hotovo'; gap: 0.35rem 0.5rem; }
    .hra-okno-obsah.siroke .hra-hr-hlava { grid-area: hlava; }
    .hra-okno-obsah.siroke .hra-hr-zdroje { grid-area: zdroje; }
    .hra-okno-obsah.siroke .hra-iso-sloupec { grid-area: mapa; min-height: 0; }
    .hra-okno-obsah.siroke .hra-hr-zprava { grid-area: zprava; min-height: 0; margin: 0; font-size: 0.85rem; }
    .hra-okno-obsah.siroke .hra-hr-nastroje { grid-area: nastroje; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
    .hra-okno-obsah.siroke .hra-hr-paleta { grid-area: paleta; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
    .hra-okno-obsah.siroke .hra-hr-paleta .hra-hr-volba { flex: 0 0 auto; }
    .hra-okno-obsah.siroke .hra-hr-lesnicci { grid-area: lesnicci; max-height: 2.4rem; }
    .hra-okno-obsah.siroke .hra-dvojice { grid-area: hotovo; margin: 0; }
    .hra-okno-obsah.siroke .hra-dvojice .hra-velke { min-height: 2.4rem; }
}

/* Hradiště: devět nástrojů, delší paleta */
.hra-hr-nastroj { min-width: 3.4rem; }
@media (min-width: 700px) { .hra-okno-obsah.siroke .hra-hr-nastroje { gap: 0.2rem; } .hra-okno-obsah.siroke .hra-hr-nastroj { padding: 0.15rem 0.2rem; } .hra-okno-obsah.siroke .hra-hr-nastroj .ikona { font-size: 1.1rem; } }