/* =====================================================================
   EKRAN IGRE – preko cijelog zaslona (Germania obrazac)
   portrait: tanka gornja traka · landscape: uska lijeva traka (rail)
   100dvh + viewport-fit=cover + safe-area insets
   ===================================================================== */
.ekran-igre { position: fixed; inset: 0; z-index: 200; height: 100vh; height: 100dvh; width: 100vw; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--mv-dubina); color: var(--mv-bijela); overflow: hidden; }
.ekran-igre[hidden] { display: none; }
html.u-igri, html.u-igri body { overflow: hidden; overscroll-behavior: none; }
.ekran-igre :focus-visible { outline: 3px solid var(--mv-sunce); outline-offset: 2px; }

.traka-igre { min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--mv-dubina); border-bottom: 2px solid var(--mv-tirkiz-tamni);
  padding: calc(4px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); }
/* Logo Morske vile na lijevom rubu trake (ukrasni, NIJE poveznica – klik ne smije prekinuti partiju). Znak je u boji i dobro se čita na Dubini. */
.traka-igre__logo { flex: none; display: flex; align-items: center; justify-content: center; padding-inline: 2px 4px; pointer-events: none; user-select: none; }
.traka-igre__logo img { display: block; height: 42px; width: auto; max-width: none; }
.traka-igre__naziv { flex: 1; min-width: 0; font-weight: 800; font-size: var(--mv-fs-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 8px; }
.veza { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 92px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: var(--mv-bijela); font-size: 14px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.veza__tocka { width: 11px; height: 11px; flex: none; border-radius: 50%; background: #a9b7ba; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.veza[data-stanje="dobra"] .veza__tocka { background: #42d477; }
.veza[data-stanje="slabija"] .veza__tocka { background: #ffd24a; }
.veza[data-stanje="losa"] .veza__tocka { background: #ff615b; }
.gumb-traka { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 52px; padding: 4px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--mv-bijela); font-weight: 800; font-size: 15px; line-height: 1.1; cursor: pointer; }
.gumb-traka:hover { background: var(--mv-tirkiz-tamni); }
.gumb-traka[aria-pressed="true"] { background: var(--mv-tirkiz-tamni); }
.gumb-traka--izlaz { background: var(--mv-sunce); color: var(--mv-dubina); flex-direction: row; gap: 6px; padding: 0 14px; font-size: 17px; }
.gumb-traka--izlaz:hover { background: var(--mv-sunce-hover); }
.gumb-traka .ikona { width: 24px; height: 24px; }
:root[data-vel-slova="da"] .gumb-traka { font-size: 17px; }

.stol { position: relative; min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; background: var(--mv-logo-krem, #FFF8E7); color: var(--mv-dubina);
  padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.mv-game-frame { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; border: 0; background: var(--mv-dubina); }
.mv-game-frame--priprema { visibility: hidden; }
.mv-game-frame[hidden], .pokretanje[hidden] { display: none; }
.pokretanje__status--greska { color: #8b1e1e; }

/* Landscape → lijevi rail */
@media (orientation: landscape) {
  .ekran-igre { grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr); }
  .traka-igre { flex-direction: column; justify-content: flex-start; gap: 4px; width: calc(88px + env(safe-area-inset-left)); border-bottom: 0; border-right: 2px solid var(--mv-tirkiz-tamni);
    padding: max(8px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); overflow-y: auto; }
  :root[data-vel-slova="da"] .traka-igre { width: calc(100px + env(safe-area-inset-left)); }
  .traka-igre__naziv { display: none; }
  .veza { order: 10; width: 100%; min-width: 0; margin-top: auto; flex-direction: column; gap: 3px; padding: 6px 2px; border-radius: 12px; font-size: 12px; }
  .traka-igre__logo { width: 100%; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 2px solid var(--mv-tirkiz-tamni); }
  .traka-igre__logo img { height: 60px; }
  .gumb-traka { width: 100%; }
  .gumb-traka--izlaz { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 15px; margin-bottom: 6px; min-height: 60px; }
  .stol { padding-left: 6px; }
}
@media (orientation: landscape) and (max-height: 360px) { .gumb-traka { min-height: 48px; } .gumb-traka .ikona { width: 22px; height: 22px; } .traka-igre__logo { padding-bottom: 4px; margin-bottom: 2px; } .traka-igre__logo img { height: 40px; } .veza { padding-block: 4px; } }

/* „Okreni mobitel” – samo mobitel/tablet u portretu */
.okreni { display: none; position: absolute; inset: 0; z-index: 5; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px 24px max(24px, env(safe-area-inset-bottom)); background: var(--mv-svijetli-tirkiz); color: var(--mv-dubina); }
.okreni h2 { font-size: var(--mv-fs-h2); }
.okreni p { max-width: 30ch; font-weight: 600; }
.okreni__mobitel { width: 180px; height: 180px; }
.okreni__mobitel .tijelo { transform-origin: 75px 75px; animation: okreni 2.6s ease-in-out infinite; }
.okreni__mobitel .strelica { animation: blijedi 2.6s ease-in-out infinite; }
@keyframes okreni { 0%, 20% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes blijedi { 0%, 15% { opacity: 1; } 45%, 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .okreni__mobitel .tijelo { animation: none; transform: rotate(-90deg); }
  .okreni__mobitel .strelica { animation: none; opacity: 1; }
}
@media (orientation: portrait) and (max-width: 1024px) { .okreni { display: flex; } }
/* Igra koja se igra uspravno (polje uspravno, 3. 11. 2026.) ne traži okretanje mobitela. */
.ekran-igre--uspravno .okreni { display: none !important; }

/* Savjet za iPhone (PWA) */
.ios-savjet { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 8; width: min(560px, calc(100% - 24px)); background: var(--mv-bijela); color: var(--mv-dubina); border-radius: 20px; padding: 20px; box-shadow: 0 16px 50px rgba(0,0,0,.35); display: grid; gap: 12px; border: 3px solid var(--mv-sunce); }
.ios-savjet[hidden] { display: none; }
.ios-savjet h2 { font-size: var(--mv-fs-h3); }
.ios-savjet ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; font-weight: 600; }
.ios-savjet .gumbi { display: flex; gap: 10px; flex-wrap: wrap; }
.ios-savjet .gumbi .mv-gumb { flex: 1 1 auto; }
.ikona-dijeli { display: inline-block; width: 22px; height: 22px; vertical-align: -4px; }
@media (orientation: landscape) and (max-height: 500px) { .ios-savjet { left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; width: min(460px, 60%); padding: 14px 16px; gap: 8px; } .ios-savjet ol { gap: 0; } }

/* Dijalozi unutar igre */
.dijalog-igre { border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.dijalog-igre__unutra { padding: 22px; display: grid; gap: 14px; overflow: auto; max-height: calc(100dvh - 24px); }
.dijalog-igre__unutra ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.dijalog-igre .gumbi { display: flex; gap: 10px; flex-wrap: wrap; }
.dijalog-igre .gumbi .mv-gumb { flex: 1 1 160px; }
@media (orientation: portrait) and (max-width: 480px) { .traka-igre__naziv .mv-meta { display: none; } .gumb-traka { min-width: 52px; padding: 4px 4px; } }

/* Zaslon pokretanja („Otvara se igra…”) – ovdje se ugrađuje prava igra */
.pokretanje { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; width: min(520px, 100%); }
.pokretanje__logo { width: min(420px, 100%, 52vh); aspect-ratio: 8 / 5; border-radius: 20px; background: var(--mv-bijela); border: 2px solid var(--mv-logo-krem-rub, #F1E2BF); box-shadow: 0 2px 10px rgba(120,84,20,.10); overflow: hidden; }
.pokretanje__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pokretanje__naziv { margin: 0; font-size: var(--mv-fs-h2); font-weight: 900; line-height: 1.15; color: var(--mv-dubina); }
.pokretanje__status { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-size: var(--mv-fs-tekst); font-weight: 700; color: var(--mv-dubina); }
.pokretanje__krug { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 4px solid var(--mv-svijetli-tirkiz); border-top-color: var(--mv-tirkiz-tamni); animation: mv-vrti 1.4s linear infinite; }
@keyframes mv-vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pokretanje__krug { animation: none; border-color: var(--mv-tirkiz-tamni); border-style: dotted; } }
@media (orientation: landscape) and (max-height: 500px) { .pokretanje { gap: 8px; } .pokretanje__logo { width: min(300px, 44vh * 1.6); } }