/* Odmiany platformy (public/js/platform): .web-only widoczne tylko w odmianie web, .android-only tylko w odmianie Android */
.android-only { display: none !important; }
body.plat-android .android-only { display: block !important; }
body.plat-android .web-only { display: none !important; }

.langbtn { margin-top: 10px; font-size: 15px; padding: 9px 14px; background: #6b7384; }
#langlist { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
#langlist button { margin: 0; text-align: left; font-size: 17px; background: var(--steel-d); color: #fff; box-shadow: 0 4px 0 var(--ink); }
#langlist button.on { background: var(--gold); color: var(--ink); }
#langpick h2, #store h2 { margin: 0; text-align: center; color: var(--gold); font-size: 26px; }

#storelist { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.prod { display: flex; align-items: center; gap: 12px; background: var(--steel-d); border: 3px solid var(--ink); border-radius: 12px; padding: 10px 12px; }
.prod svg { flex: none; width: 44px; height: 44px; }
.prod .pn { flex: 1; min-width: 0; font-size: 17px; line-height: 1.1; }
.prod .pn small { display: block; margin-top: 3px; font: 600 12.5px "Segoe UI", sans-serif; color: #aab2c0; }
.prod button { width: auto; margin: 0; padding: 8px 14px; font-size: 15px; white-space: nowrap; }
.prod button.done { background: #5dff8a; }
#storesoon { margin-top: 10px; text-align: center; font: 700 13px "Segoe UI", sans-serif; color: #8f98a8; border: 3px dashed #4a5160; border-radius: 12px; padding: 12px; }
#storerestore { font-size: 14px; padding: 9px 14px; }

.admock { position: fixed; inset: 0; z-index: 200; background: rgba(8, 6, 12, .96); display: flex; align-items: center; justify-content: center; }
.admock-box { text-align: center; padding: 28px 36px; border: 4px dashed #5a6275; border-radius: 18px; color: #c5ccd8; }
.admock-tag { font-size: 34px; letter-spacing: 6px; color: var(--gold); }
.admock-sub { margin: 6px 0 18px; font: 600 13px "Segoe UI", sans-serif; opacity: .8; }
.admock-go { width: auto; padding: 10px 26px; margin: 0; }

/* ---------- bezpieczne strefy (wycięcie kamery, zaokrąglone rogi, pasek gestów) — wartości liczy js/platform/safearea.js ---------- */
:root {
  --sa-t: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sa-r: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
  --sa-b: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --sa-l: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
}
body .screen { padding: max(12px, var(--sa-t)) max(12px, var(--sa-r)) max(12px, var(--sa-b)) max(12px, var(--sa-l)); }
body #err { left: calc(8px + var(--sa-l)); top: calc(8px + var(--sa-t)); }
body #fs { right: calc(8px + var(--sa-r)); top: calc(8px + var(--sa-t)); }
body #mute { left: calc(8px + var(--sa-l)); }
body:has(#menu:not(.hidden)) #mute, body:has(#lobby:not(.hidden)) #mute { bottom: calc(8px + var(--sa-b)); }
body #chat { left: calc(12px + var(--sa-l)); bottom: calc(150px + var(--sa-b)); }
body #ver { right: calc(12px + var(--sa-r)); bottom: calc(8px + var(--sa-b)); }
body #netdot { top: calc(12px + var(--sa-t)); right: calc(14px + var(--sa-r)); }
body #toasts { top: calc(13% + var(--sa-t)); }

/* okno „Wyjść z gry?” (przycisk Wstecz w aplikacji) */
#exitdlg { position: fixed; inset: 0; z-index: 150; background: rgba(8, 6, 12, .72); display: flex; align-items: center; justify-content: center; padding: max(12px, var(--sa-t)) max(12px, var(--sa-r)) max(12px, var(--sa-b)) max(12px, var(--sa-l)); }
#exitdlg .panel { width: min(360px, 92vw); text-align: center; }
#exitdlg h2 { margin: 0 0 14px; color: var(--gold); font-size: 24px; }
#exitdlg .exitrow { display: flex; gap: 10px; }
#exitdlg .exitrow button { flex: 1; margin: 0; }

/* ---------- dotyk (telefon): cele co najmniej 48 dp, okna bez ucinania, przyciski pływające nie zasłaniają paneli ---------- */
@media (pointer: coarse) {
  body button, body input:not([type=checkbox]):not([type=radio]) { min-height: 48px; }
  body #mute, body #fs { width: 48px; height: 48px; font-size: 21px; }
  body #mute { top: calc(44% - 6px); }
  body #delacct { min-height: 48px; padding: 14px 12px; }
  body .vtab, body .rk-tab, body .rk-x, body .id-save, body .id-del, body .prod button { min-height: 48px; }
  body .rk-x { min-width: 48px; }
  body .rk-tab, body .vtab { min-width: 48px; }
  /* okno otwarte → przyciski dźwięku / czatu nie zasłaniają jego treści (w menu zostają) */
  body:has(#panel:not(.hidden), #cards:not(.hidden), #shop:not(.hidden), #loot:not(.hidden), #over:not(.hidden), #rkov:not(.hidden), #idov:not(.hidden), #wrov:not(.hidden)) #mute { display: none; }
}
/* kolumnowe okna (karty, sklep, łup): wyśrodkowanie, które przy przepełnieniu nie ucina początku (górna część była nieosiągalna) */
body #cards, body #shop, body #loot { justify-content: flex-start; }
body #cards > :first-child, body #shop > :first-child, body #loot > :first-child { margin-top: auto; }
body #cards > :last-child, body #shop > :last-child, body #loot > :last-child { margin-bottom: auto; }
body #cardinfo { margin-top: 8px; }
@media (pointer: coarse) and (orientation: portrait) {
  /* sklep w pionie to długa lista: przycisk ZAMKNIJ zostaje przy dolnej krawędzi */
  body #shop #shopclose { position: sticky; bottom: calc(6px + var(--sa-b)); z-index: 3; flex: none; }
}

/* paski przewijania w oknach Rankingu / Tożsamości / Szatni: cienkie i w kolorach gry; na dotyku ukryte (przewijanie zostaje) */
.rk, .rk-body { scrollbar-width: thin; scrollbar-color: #5a6275 transparent; }
.rk::-webkit-scrollbar, .rk-body::-webkit-scrollbar { width: 6px; }
.rk::-webkit-scrollbar-thumb, .rk-body::-webkit-scrollbar-thumb { background: #5a6275; border-radius: 3px; }
.rk::-webkit-scrollbar-track, .rk-body::-webkit-scrollbar-track { background: transparent; }
@media (pointer: coarse) {
  .rk, .rk-body { scrollbar-width: none; }
  .rk::-webkit-scrollbar, .rk-body::-webkit-scrollbar { display: none; }
}