:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html[data-shell] :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.otp input) {
  font-size: max(16px, 1em);
  min-height: 44px;
}
html[data-shell] .match-room #sg-photo { font-size: max(16px, 1em); }
html[data-shell="onboarding"] .resend button,
html[data-public-page] :is(.link-entra, .hero-login a, .foot a) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
html[data-shell="app"] .support-compose { width: min(460px, calc(100% - var(--safe-left) - var(--safe-right))); left: calc(50% + (var(--safe-left) - var(--safe-right)) / 2); }
html[data-shell="app"] .support-compose .chat-input input { min-width: 0; }
html[data-shell="app"] .support-compose .chat-input button { flex-shrink: 0; }
html[data-shell="app"] .support-photo-button { min-height: 44px; }
html[data-shell="app"] .backlink { min-height: 44px; }
html[data-shell="app"] [data-view="support"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; animation: none; }
html[data-shell="app"] [data-view="support"] > * { grid-column: 1 / -1; min-width: 0; }
html[data-shell="app"] [data-view="support"] > .backlink { grid-column: 2; grid-row: 1; align-self: center; }
html[data-shell="app"] [data-view="support"] > h1 { grid-column: 1; grid-row: 1; align-self: center; margin-top: 0; }
html[data-shell="app"] .support-compose { padding: 8px 12px; }
html[data-shell="app"] .support-photo-picker { margin-top: 6px; }
#nameOv { top: var(--name-viewport-top, 0px); bottom: auto; height: var(--name-viewport-height, 100dvh); padding: max(12px, var(--safe-top)) var(--safe-right) 0 var(--safe-left); }
#nameForm { max-height: 100%; padding-bottom: calc(16px + max(var(--safe-bottom), var(--mini-bottom, 0px))); scroll-padding-block: 12px; }
body { padding-left: var(--safe-left); padding-right: var(--safe-right); }
button, a, input[type="submit"], [role="button"] { touch-action: manipulation; }
@media (display-mode: standalone) { html { overscroll-behavior-y: contain; } }

html[data-shell="app"] .phone:has(.active-banner) { padding-bottom: calc(var(--nav-h) + 106px + max(var(--safe-bottom), var(--mini-bottom, 0px))); }
html[data-shell="app"] .phone:not(:has(.active-banner)) { padding-bottom: calc(var(--nav-h) + 16px + max(var(--safe-bottom), var(--mini-bottom, 0px))); }
html[data-shell="app"] .phone[data-public-page] { padding-bottom: 16px; }
html[data-shell="app"] .phone:has([data-room-shell="compact"]) { padding-bottom: 0; }
html[data-shell="app"] .phone > header { padding-top: calc(12px + var(--safe-top)); }
html[data-shell="app"] nav, html[data-shell="app"] .pz-compose,
html[data-shell="trial"] .cta-dock {
  width: min(460px, calc(100% - var(--safe-left) - var(--safe-right)));
  left: calc(50% + (var(--safe-left) - var(--safe-right)) / 2);
}
html[data-shell="app"] .match-room:not(.play-ticket) .cta-dock,
html[data-shell="trial"] .cta-dock {
  padding-bottom: calc(14px + max(var(--safe-bottom), var(--mini-bottom, 0px)));
}
html[data-shell="app"] .active-banner { bottom: calc(var(--nav-h) + 10px + max(var(--safe-bottom), var(--mini-bottom, 0px))); }
html[data-shell="app"] .pz-new { bottom: calc(var(--nav-h) + 74px + var(--safe-bottom)); }
html[data-shell="app"] .pz-toast { top: calc(72px + var(--safe-top)); }
html[data-shell="onboarding"] .phone {
  padding-top: var(--safe-top); padding-bottom: calc(40px + var(--safe-bottom));
}
html[data-shell="trial"] .phone {
  padding-top: var(--safe-top); padding-bottom: calc(120px + max(var(--safe-bottom), var(--mini-bottom, 0px)));
}
html[data-public-page] .top, html[data-public-page] .dock {
  padding-left: max(var(--gutter), var(--safe-left));
  padding-right: max(var(--gutter), var(--safe-right));
}
@supports (min-height: 100svh) { .phone { min-height: 100svh; } }

html[data-shell="onboarding"] .skip a, html[data-shell="onboarding"] .cta-area > .skip > a,
.manual-tag > summary, .manual-tag button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.manual-tag > summary { cursor: pointer; color: var(--muted); }
.manual-tag .field { margin-top: 12px; }
html[data-shell="app"] .active-banner .t1, html[data-shell="app"] .active-banner .t2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html[data-shell="app"] .active-banner .open { flex: 0 0 auto; }

html[data-public-page="home"] .game--cr.is-soon { filter: grayscale(1); opacity: .55; cursor: default; }
html[data-public-page="home"] .game-coming { display: block; padding: 18px; font-weight: 700; }

.game-hero[aria-disabled="true"] { filter: grayscale(1); cursor: default; }

@media (display-mode: standalone) {
  html:is([data-shell="app"], [data-shell="trial"]) {
    height: 100dvh;
    overflow: hidden;
  }
  html:is([data-shell="app"], [data-shell="trial"]) body {
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  html[data-shell="app"] body:has(> .legal-links):has(nav) {
    padding-bottom: calc(var(--nav-h) + 16px + max(var(--safe-bottom), var(--mini-bottom, 0px)));
  }
}