/* Tarok 124 — title page. Screen/menu styling lives in menu.css; this only sets the page
   ground and the splash layout (logo up top, Igraj/Prijava + version pinned near the bottom). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.is-title { background: #0b0f0d; -webkit-user-select: none; user-select: none; }

.screen--splash .screen__head { margin-top: 7vh; }
.brand-logo-h { margin: 0; }
.brand-explainer { margin-top: 10px; font-family: var(--font-display, Georgia, serif); color: #c8b78f; font-weight: 500;
  font-size: clamp(11px, 3vw, 15px); letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.brand-explainer b { color: #f2d585; font-weight: 700; letter-spacing: 2px; }
.splash-actions { margin-top: auto; margin-bottom: 1.2vh; display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(84vw, 420px); }
.splash-actions .menu-item { height: 62px; }

/* SPLASH-ONLY language toggle, top-right. Segmented SL|EN pill in the game's dark-glass +
   gold-hairline language; the ACTIVE segment sits on a SLIDING gold thumb (acct-status.premium
   chip recipe) so a tap feels like a native game switch: title.js flips .is-en, the thumb glides
   across, THEN the /lang/:loc link is followed (cookie + reload — the exact settings-panel
   mechanism). Anchors work with JS disabled too (no slide, straight reload). Absolute inside
   #scr-splash (the section is fixed inset:0), so it lives and dies with the splash screen only.
   One state source: .is-en on the nav drives thumb position, text colours and tap-ability. */
.splash-lang { --seg-w: 46px; --seg-h: 30px;
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 10;
  display: flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: rgba(11,17,13,.55); border: 1px solid rgba(210,175,110,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.7); transition: border-color .2s ease; }
.splash-lang:hover { border-color: rgba(240,201,106,.6); }
.splash-lang__thumb { position: absolute; top: 3px; left: 3px; width: var(--seg-w); height: var(--seg-h); border-radius: 999px;
  background: linear-gradient(180deg, #e7c983, #c9a24e);
  box-shadow: 0 0 14px -4px rgba(240,201,106,.55), inset 0 1px 0 rgba(255,248,220,.5);
  transition: transform .24s cubic-bezier(.3,.9,.35,1.2); /* slight overshoot = game-native snap */ }
.splash-lang.is-en .splash-lang__thumb { transform: translateX(calc(var(--seg-w) + 3px)); }
.splash-lang__opt { position: relative; z-index: 1; display: grid; place-items: center; width: var(--seg-w); height: var(--seg-h); border-radius: 999px;
  text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
  font-family: var(--font-sans); font-weight: 800; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(216,201,164,.72); transition: color .2s ease, transform .08s ease; }
.splash-lang__opt:hover { color: #f2e7c8; }
.splash-lang__opt:active { transform: scale(.94); }
/* the CURRENT language rides the thumb: dark text, not tappable (nothing to switch to) */
.splash-lang:not(.is-en) .splash-lang__opt[data-lang="sl"],
.splash-lang.is-en .splash-lang__opt[data-lang="en"] { pointer-events: none; color: #23160a; }
/* mid-flight (thumb sliding, reload imminent): swallow further taps */
.splash-lang.is-committing { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .splash-lang__thumb { transition: none; } }

/* DESKTOP (the project's wide-landscape gate, same as .desktop-logo): the corner of a big monitor
   needs air — the mobile 12/14px offsets read as "stuck in the corner". Roomier offsets on the
   splash art's margin rhythm + a slightly chunkier pill so it holds its own at arm's length. */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .splash-lang { --seg-w: 56px; --seg-h: 34px;
    top: clamp(20px, 3.6vh, 40px); right: clamp(24px, 3.2vw, 52px); }
  .splash-lang__opt { font-size: 12.5px; }
}

/* subtle top-right music mute toggle */
.music-mute { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); z-index: 2000;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center;
  background: rgba(11,17,13,.5); border: 1px solid rgba(210,175,110,.35);
  transition: opacity .2s ease, border-color .2s ease, transform .08s ease; opacity: .6; }
.music-mute:hover { opacity: 1; border-color: rgba(240,201,106,.6); }
.music-mute:active { transform: scale(.93); }
.music-mute svg { width: 22px; height: 22px; fill: none; stroke: #e6cf95; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.music-mute svg .spk { fill: #e6cf95; stroke: none; }
.music-mute .slash { display: none; }
.music-mute.muted { opacity: .5; }
.music-mute.muted .waves { display: none; }
.music-mute.muted .slash { display: block; stroke: #dd9070; }
.music-mute.muted svg .spk { fill: #b6a888; }






/* APP MODE — sol-alt köşe çıkış ikonu: .music-mute ikizi (aynı boy/deri), yalnız konum aynalanır */
.app-exit-corner { right: auto; left: max(14px, env(safe-area-inset-left)); }
/* dokunma alanı: görsel 42px daire aynı kalır, vuruş kutusu her yandan taşar (özellikle sağa — credits
   komşuluğunda hedefi kaçıran parmak yine güce insin; 2026-09-06 sahibi isteği) */
.app-exit-corner::after { content: ''; position: absolute; inset: -8px -16px -8px -10px; }

/* Çıkış ikonu YALNIZ açılış ekranında (kullanıcı 2026-09-02): başka bir ekran açıkken (splash gizliyken) yok */
body:has(#scr-splash[hidden]) .app-exit-corner { display: none; }