/* v15: safe areas, responsive landscape play, reliable layered dialogs and PWA install layout.
   This is loaded last intentionally, after premium.css. */
html, body { width: 100%; max-width: 100%; overflow: hidden; }
.screen { max-width: 100%; overflow-x: hidden; overscroll-behavior: contain; }
.screen > .panel { min-width: 0; box-sizing: border-box; }
.panel > *, .row > *, .topbar > *, .steps > *, .step > * { min-width: 0; }
.panel, .panel button { max-width: 100%; }
.panel .field { min-width: 0; max-width: 100%; }
.panel .ribbon { box-sizing: border-box; max-width: min(90%, 420px); text-align: center; }

/* Real overlays: dialogs opened from "הפסקת קבב" always sit ABOVE the pause layer.
   Nested privacy/terms dialogues also return to settings, then to pause. */
.screen.pause-overlay { z-index: 75; background: rgba(8, 14, 24, .985); }
.screen.pause-overlay > .panel { z-index: 1; }
#pause { z-index: 42; }

/* Installation is deliberately usable in portrait before the app is installed. */
#s-install { width: 100%; max-width: 100vw; padding: max(40px, calc(30px + env(safe-area-inset-top, 0px))) max(14px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); overflow: auto; }
#s-install > .panel { width: min(460px, 100%); max-width: 100%; min-width: 0; margin: 12px auto 16px; flex: 0 0 auto; padding: 34px clamp(10px, 3vw, 18px) 18px; }
#s-install .ribbon { max-width: 88%; height: clamp(42px, 9vw, 60px); font-size: clamp(1.05rem, 4.8vw, 1.5rem); padding-inline: 6px; }
#s-install .phone-art { position: relative; display: block; flex: none; width: clamp(54px, 17vw, 80px); height: auto; aspect-ratio: 1 / 1; margin: 4px auto; overflow: hidden; }
#s-install .phone-art img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
#s-install .steps { gap: 8px; min-width: 0; }
#s-install .step { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
#s-install .step .n { width: 34px; height: 34px; font-size: 1rem; }
#s-install .step p { overflow-wrap: anywhere; font-size: clamp(.82rem, 3.4vw, .97rem); }
#s-install .btn { white-space: normal; text-wrap: balance; }
#install-external, #install-ios, #install-android, #install-samsung, #install-desktop { max-width: 100%; }

/* Landscape-only after mobile installation. iOS can ignore manifest orientation, so
   provide an explicit, full-size blocking prompt rather than letting portrait controls run. */
#rotate-overlay { display: none; position: fixed; inset: 0; z-index: 250; padding: max(22px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 11px, transparent 11px 23px), #0f1724; color: #fff6e3; text-align: center; align-items: center; justify-content: center; }
.rotate-card { width: min(410px, 100%); display: grid; justify-items: center; gap: 16px; padding: 25px 22px; background: #213044; border: 4px solid #0f141c; box-shadow: 6px 6px 0 #05080d; }
.rotate-card h2 { margin: 0; font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.1; font-weight: 900; }
.rotate-card p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.rotate-symbol { width: 78px; height: 78px; display: grid; place-items: center; background: #ffae22; color: #0f141c; border: 4px solid #0f141c; font-weight: 900; font-size: 4rem; line-height: 1; }
.rotate-phone { width: 96px; height: 52px; border: 5px solid #a7e6fa; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #ffd23f; font-size: 2rem; transform: rotate(0); }
@media (orientation: portrait) { html.installed-mobile #rotate-overlay { display: flex; } }

/* Short, wide phone screens: no overflowing panels, overlapping HUD or huge icons. */
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  .screen { height: 100dvh; justify-content: flex-start; padding: max(34px, calc(26px + env(safe-area-inset-top, 0px))) max(10px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
  .screen > .panel { flex: none; max-height: none; margin: 12px auto 18px; }
  .panel { padding: 30px 12px 12px; width: min(730px, 100%); gap: 7px; }
  .panel.narrow { width: min(550px, 100%); }
  .ribbon { top: -24px; height: 46px; max-width: 88%; font-size: clamp(1.04rem, 3vh, 1.35rem); }
  .close-x { top: -19px; inset-inline-end: -4px; }
  .btn { height: 45px; font-size: clamp(.88rem, 3.3vh, 1.15rem); gap: .3em; }
  .btn.xl { height: 54px; font-size: clamp(1.06rem, 4.2vh, 1.35rem); min-width: 0; }
  .btn .ico { width: 22px; height: 22px; flex: none; }
  .panel .row { gap: 6px; }
  .panel .setrow { gap: 6px; padding-block: 5px; }
  .panel .setrow .field { font-size: 16px; }
  #s-main { justify-content: space-between; display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 2px 10px; overflow: hidden; padding: max(7px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(7px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
  #s-main .topbar { width: 100%; grid-column: 1 / -1; }
  #s-main .hero { grid-column: 2; grid-row: 2; margin: 0; gap: 4px; max-width: 100%; }
  #s-main .hero img { width: min(19vh, 90px); max-width: 100%; height: auto; }
  #s-main .hero .title { font-size: clamp(1.6rem, 9vh, 2.9rem); }
  #s-main .hero .tag { font-size: clamp(.67rem, 2.8vh, .98rem); padding: 2px 8px; }
  #s-main .menu-actions { grid-column: 1; grid-row: 2; gap: 6px; min-width: 0; width: min(100%, 360px); }
  #s-main .menu-grid { gap: 6px; }
  #s-main .menu-grid .btn { font-size: clamp(.75rem, 3.6vh, 1.02rem); padding-inline: 4px; }
  #s-main .footer { grid-column: 1 / -1; grid-row: 3; }
  #s-main .footer .legal-line { font-size: clamp(.55rem, 1.9vh, .74rem); }
  #s-main .avatar { width: 38px; height: 38px; font-size: 1.1rem; }
  #s-main .pname b { font-size: .86rem; max-width: 24vw; }
  #s-main .pname small { font-size: .65rem; }
  #s-main .ibtn, #cinema-toggle { width: 39px; height: 39px; }
  #s-main .chip { height: 35px; font-size: .8rem; padding-inline: 8px; }
  .slide .art { width: 76px; height: 76px; font-size: 2.25rem; }
  .slides { min-height: 0; }
  #s-chars .charstage { height: min(55vh, 215px); }
  .stats-box { width: min(262px, 36vw); min-width: 0; padding: 4px 8px; gap: 2px; }
  .respect { gap: 3px; align-items: center; }
  .respect b { font-size: clamp(1rem, 3.6vh, 1.35rem); }
  .respect span { font-size: .64rem; }
  .meter { grid-template-columns: 2rem minmax(0, 1fr); gap: 4px; font-size: .61rem; }
  .hud-chips { gap: 3px; }
  .hud-chips .chip { height: 25px; font-size: clamp(.63rem, 2vh, .76rem); padding-inline: 4px; }
  #hud { gap: 6px; }
  #hud .tools { gap: 4px; }
  #hud .timechip { height: 39px; padding: 0 5px; gap: 3px; }
  #hud .timechip .tc-ico { width: 24px; height: 24px; }
  #hud .timechip .clk { font-size: .8rem; }
  #hud .ibtn { width: 38px; height: 38px; }
  #mission { top: calc(95px + env(safe-area-inset-top, 0px)); inset-inline-start: max(8px, env(safe-area-inset-right, 0px)); inset-inline-end: auto; width: min(325px, 40vw); max-width: 40vw; min-height: 0; padding: 4px 7px; gap: 4px; font-size: clamp(.62rem, 2.35vh, .78rem); line-height: 1.15; flex-wrap: wrap; }
  #mission .m-label { font-size: .57rem; padding: 1px 3px; }
  #wallet { top: calc(160px + env(safe-area-inset-top, 0px)); inset-inline-start: 8px; max-width: min(330px, 41vw); font-size: .7rem; }
  #police { top: calc(66px + env(safe-area-inset-top, 0px)); left: 50%; font-size: .8rem; height: 34px; }
  #toasts { top: calc(70px + env(safe-area-inset-top, 0px)); inset-inline: 36%; }
  #joy { width: clamp(78px, 28vh, 110px); height: clamp(78px, 28vh, 110px); left: max(9px, env(safe-area-inset-left, 0px)); bottom: max(9px, env(safe-area-inset-bottom, 0px)); }
  #joy-knob { width: 52%; height: 52%; margin: -26%; }
  .acts { --touch-btn: clamp(40px, 13vh, 51px); --touch-gap: 4px; right: max(8px, env(safe-area-inset-right, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px)); grid-template-columns: repeat(4, var(--touch-btn)); grid-template-rows: repeat(2, var(--touch-btn)); gap: var(--touch-gap); }
  .acts button { width: var(--touch-btn); height: var(--touch-btn); font-size: clamp(.65rem, 2.2vh, .8rem); }
  .acts .e { width: var(--touch-btn); height: calc(2 * var(--touch-btn) + var(--touch-gap)); font-size: .82rem; }
  .has-touch #prompt { max-width: 36vw; bottom: max(10px, env(safe-area-inset-bottom, 0px)); overflow: hidden; font-size: .75rem; text-overflow: ellipsis; }
  .has-touch #speedo { bottom: calc(55px + env(safe-area-inset-bottom, 0px)); padding: 3px 7px; }
  #speedo b { font-size: 1.4rem; }
  #speedo .bbar { width: 85px; }
  #s-install { padding-top: max(36px, env(safe-area-inset-top, 0px)); }
  #s-install > .panel { margin-top: 14px; padding: 27px 12px 12px; max-width: min(540px, 100%); }
  #s-install .phone-art { width: 54px; }
  #s-install .step p { font-size: .83rem; }
}
@media (orientation: landscape) and (max-height: 380px) and (pointer: coarse) {
  #s-main .hero img { width: min(15vh, 58px); }
  #s-main .hero .title { font-size: clamp(1.4rem, 7.5vh, 2rem); }
  #s-main .hero .tag { font-size: .7rem; }
  #s-main .menu-actions { gap: 3px; }
  #s-main .btn { height: 39px; }
  #s-main .btn.xl { height: 48px; }
  #mission { top: calc(87px + env(safe-area-inset-top, 0px)); }
}

/* v15: dynamic viewport instead of the previous portrait viewport after rotating.
   Use the real fixed container size when WebGL recalculates its drawing buffer. */
#app { position: fixed; inset: 0; width: 100%; width: 100dvw; height: 100%; height: 100dvh; overflow: hidden; }
#app > canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; }
@supports (height: 100dvh) {
  html, body { width: 100%; height: 100%; min-height: 100dvh; }
}
/* While iOS changes viewport axes, cover the stale/partial 3D frame until it
   has been resized to the final landscape dimensions. */
#rotation-resize-cover { display: none; position: fixed; inset: 0; z-index: 249;
  align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  background: #0f1724; color: #fff6e3; text-align: center; font-size: 1.05rem;
  padding: 20px; pointer-events: all; }
#rotation-resize-cover .spinner { width: 38px; height: 38px; border: 4px solid #72859c; border-top-color: #ffae22;
  border-radius: 50%; animation: rotation-spin .7s linear infinite; }
@keyframes rotation-spin { to { transform: rotate(360deg); } }
@media (orientation: landscape) {
  html.installed-mobile.viewport-settling #rotation-resize-cover { display: flex; }
}

/* v16: new water balloon and wallet touch UI */
.acts .b { background: url("../assets/ui/sharp/blue_S.png") center / 100% 100% no-repeat; }
#wallet { pointer-events: auto; max-width: min(420px, calc(100vw - 20px)); box-sizing: border-box; }
#wallet button { min-height: 38px; padding: 5px 12px; touch-action: manipulation; cursor: pointer; white-space: nowrap; }
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  #wallet { top: calc(172px + env(safe-area-inset-top, 0px)); inset-inline-start: 7px; inset-inline-end: auto; max-width: min(330px, 39vw); padding: 3px 5px; font-size: .68rem; line-height: 1.2; }
  #wallet button { font-size: .78rem; min-height: 34px; }
  .hud-chips { flex-wrap: wrap; justify-content: flex-end; }
  .stats-box { max-width: min(290px, 42vw); }
}
@media (orientation: landscape) and (max-height: 380px) and (pointer: coarse) {
  #wallet { top: calc(154px + env(safe-area-inset-top, 0px)); }
}

/* V17 – the text is always the action: disabled buttons cannot fake an action. */
.acts button:disabled {opacity:.38;filter:grayscale(.7);pointer-events:none;transform:none!important;}
.acts button { line-height:1.07; overflow:hidden; text-align:center; word-break:keep-all; font-size:clamp(.64rem,2.2vh,.79rem); }
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse) {
 .acts button {font-size:clamp(.58rem,2.1vh,.75rem);padding-inline:2px;}
 .acts .e {font-size:clamp(.65rem,2.3vh,.84rem);}
}