/* Final viewport and short-landscape layer. Desktop composition remains unchanged. */
:root {
  --app-vw: 100dvw;
  --app-vh: 100dvh;
  --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, body, #app { width: 100%; height: 100%; width: 100dvw; height: 100dvh; overflow: hidden; }
.screen, #menu-overlay, #tutorial-overlay, .modal, .overlay { max-width: 100dvw; max-height: 100dvh; }

.rotate-device {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: max(24px, var(--safe-top)) max(24px, var(--safe-right)) max(24px, var(--safe-bottom)) max(24px, var(--safe-left));
  overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #351055 0%, #13031f 54%, #07020c 100%);
  color: #fff7d8;
  text-align: center;
}
.rotate-device__logo { width: min(64vw, 280px); height: auto; max-height: 28dvh; object-fit: contain; }
.rotate-device__phone { position: relative; width: 58px; height: 96px; border: 4px solid #f4cf55; border-radius: 12px; box-shadow: 0 0 24px rgba(193, 76, 227, .48); animation: rotatePhone 1.8s ease-in-out infinite; }
.rotate-device__phone span { position: absolute; left: 50%; bottom: 5px; width: 18px; height: 3px; transform: translateX(-50%); border-radius: 2px; background: #f4cf55; }
.rotate-device h1 { margin: 5px 0 0; color: #f7d65d; font: 800 clamp(25px, 7vw, 38px)/1 var(--font-display); letter-spacing: 0; }
.rotate-device p { margin: 0; color: rgba(255,255,255,.82); font-size: clamp(13px, 3.8vw, 17px); }
.rotate-device__action {
  min-width: 190px;
  min-height: 48px;
  margin-top: 5px;
  padding: 10px 22px;
  border: 1px solid #f8d75f;
  border-radius: 7px;
  background: linear-gradient(#8e2bc2, #4a0a70);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 0 22px rgba(211,80,255,.32);
  color: #fff7d8;
  font: 800 14px/1 var(--font-body);
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.rotate-device__action:active { transform: translateY(1px); filter: brightness(1.12); }
@keyframes rotatePhone { 0%, 25% { transform: rotate(0); } 65%, 100% { transform: rotate(90deg); } }

.is-mobile-device body,
.is-mobile-device #app,
.is-mobile-device body > #app > .screen,
.is-mobile-device body > #app > .overlay,
.is-mobile-device body > #app > .modal {
  width: var(--app-vw);
  height: var(--app-vh);
  max-width: var(--app-vw);
  max-height: var(--app-vh);
}
.is-mobile-device body { position: fixed; inset: 0; }
.is-mobile-device #app { position: fixed; inset: 0; }

@media (orientation: landscape) {
  .is-mobile-device .load-stage,
  .is-mobile-device .lobby-stage,
  .is-mobile-device .game-stage {
    width: var(--app-vw);
    height: var(--app-vh);
    aspect-ratio: auto;
  }

  .game-hud {
    left: max(2%, var(--safe-left));
    right: max(2%, var(--safe-right));
    top: max(1.6%, var(--safe-top));
  }
  .game-footer {
    left: max(1.7%, var(--safe-left));
    right: max(1.7%, var(--safe-right));
    bottom: max(1.25%, var(--safe-bottom));
  }
  .lobby-header { left: max(1.5%, var(--safe-left)); right: max(1.5%, var(--safe-right)); top: max(1.5%, var(--safe-top)); }
  .lobby-main { left: max(2%, var(--safe-left)); right: max(2%, var(--safe-right)); }
  .lobby-bottom { bottom: max(1.8%, var(--safe-bottom)); }

  .overlay, .modal {
    padding-top: max(12px, var(--safe-top));
    padding-right: max(16px, var(--safe-right));
    padding-bottom: max(12px, var(--safe-bottom));
    padding-left: max(16px, var(--safe-left));
    overflow: hidden;
  }
  .pause-panel, .modal-card, #setup-overlay .setup-panel, .coins-panel, .tutorial-card {
    max-width: calc(var(--app-vw) - max(32px, var(--safe-left)) - max(32px, var(--safe-right)));
    max-height: calc(var(--app-vh) - max(24px, var(--safe-top)) - max(24px, var(--safe-bottom)));
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .load-logo { top: 38%; width: min(29cqi, 250px); max-height: 48dvh; }
  .load-card { width: min(10cqi, 82px); max-height: 32dvh; }
  .load-card--tl, .load-card--tr { top: 5%; }
  .load-card--bl, .load-card--br { bottom: 18%; }
  .loading { bottom: max(3%, var(--safe-bottom)); width: min(54%, 470px); gap: 3px; }
  .loading-track { height: clamp(18px, 5dvh, 24px); }
  .loading-text { font-size: clamp(10px, 2.8dvh, 13px); }
  .loading-percent { font-size: 10px; }

  .lobby-brand { top: 4.5%; width: 17cqi; }
  .lobby-tier { top: 22.5%; min-width: 24cqi; padding-bottom: 2px; }
  .lobby-tier-name { font-size: 2cqi; }
  .lobby-main { top: 31%; bottom: 15%; }
  .lobby-sidebar { flex-basis: 9.5cqi; }
  .free-coins-pig { width: 8.2cqi; }
  .level-card { height: min(20cqi, 78%); }
  .level-card--featured { height: min(21cqi, 84%); }
  .lobby-ad-btn { min-width: 34cqi; padding-block: .55cqi; }

  .game-stage {
    --card-w-pile: clamp(46px, 6.1cqi, 57px);
    --card-h-pile: calc(var(--card-w-pile) * 1.48);
    --card-w-hand: clamp(55px, 7.1cqi, 66px);
    --card-h-hand: calc(var(--card-w-hand) * 1.48);
    --card-w-mini: clamp(24px, 3.2cqi, 30px);
    --card-h-mini: calc(var(--card-w-mini) * 1.48);
  }
  .game-hud { height: 46px; top: max(4px, var(--safe-top)); }
  .game-hud__left, .game-hud__right { gap: 6px; }
  .hud-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 7px; }
  #menu-btn::before { width: 19px; height: 14px; background-size: 100% 2px, 100% 2px, 100% 2px; }
  .hud-stats { gap: clamp(10px, 1.8vw, 20px); }
  .hud-stat { font-size: clamp(8px, 2.1dvh, 10px); }
  .hud-stat strong { font-size: clamp(12px, 3.2dvh, 15px); }
  .hud-coin { width: 14px; height: 14px; }
  .game-note-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .game-note { width: 42px; max-height: 44px; }

  .game-table-wrap {
    top: 47px;
    left: max(7px, var(--safe-left));
    right: max(7px, var(--safe-right));
    width: auto;
    height: calc(var(--app-vh) - 96px - var(--safe-top) - var(--safe-bottom));
    transform: none;
  }
  .game-table-img { object-fit: cover; object-position: center; }
  .game-table-surface { top: 8%; left: 6%; right: 6%; bottom: 8%; }
  .opponent-group { top: -9%; width: 48%; gap: 2px; }
  .avatar-wrap { width: 44px; height: 44px; padding: 2px; }
  .score-panel { min-width: 112px; padding: 4px 8px 4px 15px; border-radius: 6px; }
  .score-panel__pts { font-size: 12px; }
  .score-panel__name { font-size: 9px; }
  .ai-hand-wrap, .ai-hand-wrap .hand { height: var(--card-h-mini); }
  .play-zone { right: 2%; top: 34%; gap: 14px; }
  .play-zone::before, .play-zone::after { top: -13px; font-size: 8px; }
  .pile-cue { top: calc(100% + 4px); padding: 3px 5px; border-radius: 4px; font-size: 7px; }
  .player-zone { width: min(62%, 510px); bottom: -3%; }
  .deadwood-capsule { margin-bottom: 3px; padding: 3px 11px; font-size: 10px; border-width: 1px; }
  .player-hand-zone { height: calc(var(--card-h-hand) + 8px); }
  .player-hud { left: -3%; bottom: 0; }
  .player-hud .avatar-wrap { width: 42px; height: 42px; }
  .player-hud .score-panel { min-width: 100px; }
  .game-timer { left: -2%; bottom: 24%; width: 48px; }

  .game-footer { height: 46px; gap: 6px; bottom: max(3px, var(--safe-bottom)); }
  #game-screen .btn--knock, #game-screen .btn--gin { width: clamp(82px, 11cqi, 105px); height: 44px; min-width: 82px; min-height: 44px; }
  .action-buttons { gap: 4px; }
  .hint-wrap { min-width: 230px; max-width: 32cqi; padding: 6px 20px; }
  .hint-wrap::before, .hint-wrap::after { width: 34px; }
  .hint-pill { font-size: 10px; }
  .util-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 23px; }
  .game-footer__utils { gap: 5px; }
  .util-btn__card { width: 14px; height: 21px; }
  #game-screen.is-left-handed .player-hud { right: -3%; }
  #game-screen.is-left-handed .game-timer { right: -2%; }

  .pause-drawer { width: min(230px, 31vw); padding-top: max(6px, var(--safe-top)); padding-bottom: max(6px, var(--safe-bottom)); }
  .drawer-close { margin: 0 0 2px max(7px, var(--safe-left)); width: 44px; height: 44px; }
  .drawer-item { min-height: 48px; padding: 6px 16px; gap: 11px; font-size: 15px; }
  .drawer-item img, .drawer-item__icon { width: 28px; height: 28px; flex-basis: 28px; }
  .drawer-item--minor { min-height: 44px; font-size: 13px; }

  .pause-panel { width: min(650px, calc(var(--app-vw) - 48px)); max-height: calc(var(--app-vh) - 16px); border-radius: 14px; }
  .premium-panel__crown { top: 7px; left: 36px; width: 42px; height: 34px; transform: none; }
  .pause-panel__header { height: 52px; padding-top: 10px; }
  .pause-panel__header h2 { font-size: 22px; transform: translateY(-5px); }
  .premium-panel__brand { bottom: 5px; font-size: 7px; }
  .panel-close { width: 44px; height: 44px; top: 3px; right: 3px; }
  .setting-row { min-height: 48px; grid-template-columns: 38px 1fr auto; padding: 0 14px; gap: 8px; font-size: 14px; }
  .setting-row > img, .setting-row__symbol { width: 30px; height: 30px; }
  .menu-toggle { width: 82px; height: 34px; }
  .menu-toggle__knob { width: 30px; height: 30px; }
  .menu-toggle.is-on .menu-toggle__knob { left: 48px; }
  .menu-toggle__state { font-size: 12px; }

  .rules-panel { width: min(720px, calc(var(--app-vw) - 40px)); height: calc(var(--app-vh) - 16px); min-height: 0; }
  .rules-pages { height: calc(100% - 52px); min-height: 0; padding: 10px 52px 42px; overflow-y: auto; overscroll-behavior: contain; }
  .rules-page p { margin-bottom: 8px; font-size: 13px; line-height: 1.25; }
  .rules-example { gap: 9px; margin-top: 5px; }
  .rule-group { grid-template-columns: repeat(3, 42px); }
  .rule-group--dead { grid-template-columns: repeat(2, 42px); }
  .rules-card { --rule-card-width: 49px; margin-left: -7px; }
  .rule-group b { margin-bottom: 4px; font-size: 13px; }
  .rules-page h3 { margin: 7px 0 10px; font-size: 22px; }
  .rules-steps { margin-top: 24px; }
  .rules-score-grid { margin-top: 20px; }
  .rules-score-grid span { padding: 13px 8px; font-size: 14px; }
  .rules-arrow { top: 51%; width: 44px; height: 56px; }
  .rules-dots { bottom: 10px; }
  .rules-tutorial-btn { bottom: 7px; min-height: 36px; }
  .stats-rank { padding: 8px 22px 7px; }
  .stats-rank > span { font-size: 18px; }
  .stats-rank > strong { margin: 3px 0 5px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); padding: 1px 6px 7px; }
  .stats-grid > div { min-height: 54px; padding: 5px 9px; flex-direction: column; justify-content: center; gap: 4px; }
  .stats-grid span { font-size: 10px; }
  .stats-grid strong { font-size: 17px; }

  #setup-overlay { padding: max(8px, var(--safe-top)) max(14px, var(--safe-right)) max(8px, var(--safe-bottom)) max(14px, var(--safe-left)); }
  #setup-overlay .setup-panel { width: min(650px, calc(var(--app-vw) - 40px)); max-height: calc(var(--app-vh) - 16px); padding: 8px 24px 9px; }
  #setup-overlay .setup-close { top: 5px; left: 5px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  #setup-overlay .setup-header { min-height: 36px; }
  #setup-overlay .setup-crown { width: 34px; height: 27px; margin: 0; }
  #setup-overlay .setup-title__line { font-size: 9px; }
  #setup-overlay .setup-title__premium { font-size: 17px; }
  #setup-overlay .setup-section-head { margin: 1px 0 2px; }
  #setup-overlay .setup-section-head__text { font-size: 13px; }
  #setup-overlay .setup-level-details { margin: 0 auto 1px; }
  #setup-overlay .setup-inset { padding: 3px 6px 4px; }
  #setup-overlay .setup-bet { height: 50px; min-height: 46px; padding: 1px 4px 4px; }
  #setup-overlay .setup-bet__art, #setup-overlay .setup-bet .bet-icon { width: 31px; height: 26px; margin-bottom: 0; }
  #setup-overlay .setup-target { height: 44px; }
  #setup-overlay .setup-content > .setup-start { width: 62%; height: 46px; min-height: 44px; margin-top: 3px; }

  .coins-panel { width: min(520px, calc(var(--app-vw) - 40px)); max-height: calc(var(--app-vh) - 16px); padding: 15px 20px 12px; }
  .coins-panel__pig-img { width: 62px; }
  .coins-panel__title { font-size: 20px; }
  .coins-panel__sub, .coins-panel__status { margin-bottom: 7px; }

  .tutorial-card { width: min(520px, calc(var(--app-vw) - 32px)); max-height: calc(var(--app-vh) - 20px); bottom: max(8px, var(--safe-bottom)); padding: 12px 18px 10px; }
  .tutorial-card--prompt { top: 50%; bottom: auto; padding-top: 52px; }
  .tutorial-card__crown { top: 4px; width: 62px; height: 43px; }
  .tutorial-card h2 { margin: 3px 0 5px; font-size: 21px; }
  .tutorial-card p { margin-bottom: 7px; font-size: 12px; line-height: 1.25; }
  .tutorial-card__progress { margin-bottom: 7px; }
  .tutorial-btn { min-width: 112px; min-height: 44px; padding: 7px 14px; font-size: 13px; }

  #round-modal, #match-modal { padding: max(8px, var(--safe-top)) max(12px, var(--safe-right)) max(8px, var(--safe-bottom)) max(12px, var(--safe-left)); }
  #round-modal .round-result, #match-modal .match-result {
    width: min(560px, calc(var(--app-vw) - 32px));
    min-height: 0;
    max-height: calc(var(--app-vh) - 16px);
    overflow: hidden;
    padding: 44px 32px 14px;
    border-radius: 22px;
  }
  .round-result__crown, .match-result__crown { top: 3px; width: 64px; height: 45px; }
  #round-modal .round-result::before, .match-result::before { top: 26px; height: 14px; background-size: min(70%, 330px) 14px; }
  .round-result__corner, .match-result__corner { width: 36px; height: 36px; }
  .round-result__brand, .match-result__brand { margin-bottom: 5px; font-size: 9px; }
  .round-result__message, .match-result__eyebrow { font-size: 15px; }
  .round-result__title, .match-result__title { margin: 3px 0 0; font-size: 39px; }
  .match-result--loss .match-result__title { font-size: 31px; }
  .round-result__divider, .match-result__divider { height: 18px; margin: 0 auto 3px; }
  .round-result__score, .match-result__score { min-height: 70px; border-radius: 14px; }
  .round-result__score-cell, .match-result__score-cell { gap: 3px; }
  .round-result__score-cell span, .match-result__score-cell span { font-size: 15px; }
  .round-result__score-cell strong, .match-result__score-cell strong { font-size: 31px; }
  .round-result__score-divider, .match-result__score-divider { height: 44px; }
  .round-result__score-divider::after { margin-top: 18px; }
  .match-result__rewards { margin-top: 5px; }
  .match-result__rewards span { padding: 5px 9px; }
  .round-result__continue, .match-result__button { width: 76%; height: 48px; min-height: 44px; margin-top: 7px; padding: 10px 22px 6px; border-radius: 14px; }
  .round-result__button-text, .match-result__button-text { font-size: 19px; }
}

@media (orientation: landscape) and (min-height: 501px) and (max-height: 820px) {
  #round-modal, #match-modal {
    padding-top: max(12px, var(--safe-top));
    padding-bottom: max(12px, var(--safe-bottom));
  }
  #round-modal .round-result, #match-modal .match-result {
    min-height: 0;
    max-height: calc(var(--app-vh) - 24px);
    padding-top: 82px;
    overflow: hidden;
  }
  .round-result__crown, .match-result__crown {
    top: 5px;
    width: 82px;
    height: 64px;
  }
  #round-modal .round-result::before, .match-result::before { top: 51px; }
}

@media (orientation: landscape) and (max-height: 380px) {
  .hud-stats { gap: 9px; }
  .hint-wrap { min-width: 190px; padding-inline: 12px; }
  .player-zone { bottom: -5%; }
  .game-table-wrap { top: 45px; height: calc(var(--app-vh) - 91px - var(--safe-top) - var(--safe-bottom)); }
  .setting-row { min-height: 46px; }
  .rules-card { --rule-card-width: 45px; }
}

@media (orientation: portrait) and (max-width: 600px) {
  .is-mobile-portrait.is-game-landscape-required body > #app > .screen,
  .is-mobile-portrait.is-game-landscape-required body > #app > .overlay,
  .is-mobile-portrait.is-game-landscape-required body > #app > .modal,
  .is-mobile-portrait.is-game-landscape-required #menu-overlay,
  .is-mobile-portrait.is-game-landscape-required #tutorial-overlay {
    visibility: hidden;
    pointer-events: none;
  }
  .is-mobile-portrait.is-game-landscape-required #rotate-device {
    visibility: visible;
    pointer-events: auto;
  }
}