/* Fit the usable viewport, including browser chrome, cutouts and gesture bars. */
body { align-items:start; }
.login-hero { flex-shrink:0; }
.login-body { align-content:start; overflow-x:hidden; scroll-behavior:auto; overflow-anchor:none; scroll-padding-block:8px; }
.login-auth-panels > [data-auth-panel] { align-content:start; }
.login-card input { font-size:16px; }
.login-password-heading { gap:8px; min-width:0; }
.login-password-heading #forgotPassword { border:0; background:none; color:#dfc486; padding:4px 0 4px 8px; font:inherit; font-size:12px; line-height:1.4; text-align:right; white-space:nowrap; cursor:pointer; }
body.auth-compact .login-hero { padding:10px 12px!important; }
body.auth-compact .login-hero h2 { font-size:18px!important; }
body.auth-compact .login-hero > div:last-child { gap:5px!important; }
body.auth-compact .login-hero div[style*="width:84px"] { width:42px!important; height:42px!important; border-radius:12px!important; }
body.auth-compact .login-hero div[style*="width:84px"] i { font-size:24px!important; }
body.auth-compact .login-hero .mini { display:none; }
body.auth-compact .login-body { padding:10px 12px!important; gap:9px!important; }
.login-auth-panels { overflow:visible; min-height:max-content; }
.password-recovery-panel { display:grid; gap:10px; text-align:left; align-content:start!important; }
.password-recovery-panel h3 { margin:0; color:#f5c73d; }
.password-recovery-panel p { margin:0; color:#c4bca7; font-size:12px; line-height:1.5; }
.password-recovery-panel [data-recovery-email] { color:#f3dfb8; font-size:12px; overflow-wrap:anywhere; }
.password-recovery-panel [data-verification-email] { color:#f3dfb8; font-size:12px; overflow-wrap:anywhere; }
.password-recovery-panel form { display:grid; gap:8px; }
.password-recovery-panel label { color:#f5c73d; font-size:12px; font-weight:700; }
.password-recovery-panel input { min-width:0; width:100%; background:#27241b; color:#f8f6ef; border:1px solid #544e3b; border-radius:12px; padding:11px 12px; font-size:16px; }
.password-recovery-panel #recoveryCode { letter-spacing:.4em; font-size:22px; text-align:center; }
.password-recovery-panel #registrationCode { letter-spacing:.4em; font-size:22px; text-align:center; }
.password-recovery-panel .btn-link { border:0; background:none; color:#dfc486; padding:7px 0; font:inherit; font-size:12px; cursor:pointer; }
.password-recovery-panel .btn-link:disabled { opacity:.6; cursor:default; }
.password-recovery-panel .recovery-back { justify-self:start; }
.recovery-slide-in { animation:recoverySlideIn 260ms ease-out both; }
@keyframes recoverySlideIn { from { opacity:0; transform:translateX(36px); } to { opacity:1; transform:translateX(0); } }
@media(prefers-reduced-motion:reduce) { .recovery-slide-in { animation:none; } }
.app-shell > .hud { grid-row:1; }
.app-shell > .screen-root { grid-row:2; }
.app-shell > .bottom-nav { grid-row:3; }
.screen-root > .login-card { height:100%; max-height:100%; overflow:hidden!important; }
/* Card sizes follow the map's usable height as well as its width; coordinates stay in the save. */
.region-map .map-scene { container-type:size; }
.region-map .crime-icon-balloon, .region-map .crime-icon-balloon.size-sm, .region-map .crime-icon-balloon.size-md, .region-map .crime-icon-balloon.size-lg { width:min(16cqw,12cqh,80px); }
.region-map .marker-title { font-size:min(2cqw,2cqh,9px); }
.region-map .balloon-body { padding:min(3px,.6cqh); gap:min(1px,.2cqh); }
.region-map .marker-subtitle, .region-map .crime-lock-note { font-size:min(6px,1.7cqh); }
.region-map .marker-icon { width:min(16px,3cqh); height:min(16px,3cqh); }
.region-map .marker-icon i { font-size:min(12px,2.5cqh); }
.region-map .crime-order-badge { font-size:min(7px,1.8cqh); min-width:min(18px,5cqh); }
@media (max-width: 768px) {
  .hud { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); }
  .bottom-nav { padding-left:max(6px, env(safe-area-inset-left)); padding-right:max(6px, env(safe-area-inset-right)); }
  .screen-root { padding-left:max(5px, env(safe-area-inset-left)); padding-right:max(5px, env(safe-area-inset-right)); }
}
@media (max-width: 350px) {
  .hud-strip { gap:3px; }
  .hud-strip .resource-pill:not(.hud-settings-btn) { padding:3px 4px!important; gap:2px!important; }
  .hud-strip .hud-settings-btn { width:32px!important; height:34px!important; min-width:32px!important; flex-basis:32px!important; }
  .hud-strip [data-hud-energy], .hud-strip [data-hud-coins], .hud-strip [data-hud-gems], .hud-strip [data-hud-xp] { font-size:10px!important; }
  .hud-strip .hud-regen-label { font-size:8px!important; max-width:26px!important; }
}
@media (max-height: 700px) {
  .region-map .marker-subtitle, .region-map .crime-lock-note { display:none; }
  .board-content .compact-request-panel { min-height:98px; }
  .board-content .request-character, .board-content .request-character img { width:72px; height:72px; }
}
@media (max-height: 570px) {
  .hud { padding-top:max(3px,env(safe-area-inset-top)); padding-bottom:3px; }
  .bottom-nav { padding-top:2px; min-height:44px; }
  .nav-btn { padding-top:3px; padding-bottom:3px; }
  .board-content .compact-request-panel { min-height:72px; }
  .board-content .request-character, .board-content .request-character img { width:48px; height:48px; }
  .board-content .board-toolbar { height:44px; min-height:44px; max-height:44px; }
  .board-content .board-toolbar .field-ops-grid .btn { width:36px; min-width:36px; height:36px; min-height:36px; }
  .wp-stage, .wp-stage.is-clue-collapsed { gap:4px; grid-template-rows:36px auto auto minmax(0,1fr) auto; }
  .wp-answer-panel { padding:3px 6px; border-width:8px; border-image-width:8px; }
  .wp-slots { max-width:min(100%,calc(var(--wp-slot-count) * 44px + (var(--wp-slot-count) - 1) * var(--wp-slot-gap))); }
  .wp-letter-board, .wp-stage.is-clue-collapsed .wp-letter-board { padding:3px 6px; border-width:8px; border-image-width:8px; }
  .wp-letter-tile, .wp-stage.is-clue-collapsed .wp-letter-tile { min-height:0; height:min(100%,36px); font-size:clamp(12px,3.8vw,20px); }
  .wp-tiles { gap:3px; }
  .wp-letter-board .wp-panel-title, .wp-answer-panel .wp-panel-title { margin-bottom:3px; font-size:11px; }
  .wp-stage .wp-action-btn { min-height:36px; gap:1px; padding:3px 2px; }
}
.puzzle-content .jigsaw-screen { overflow:hidden; }
@media (max-height: 700px) {
  .puzzle-content .jg-stage { min-height:0; padding:6px; gap:5px; }
  .puzzle-content .jg-title-plaque { min-height:44px; }
  .puzzle-content .jg-back { top:6px; left:6px; height:44px; }
  .puzzle-content .jg-tray { min-height:64px; height:64px; padding:6px 8px; grid-auto-columns:46px; gap:8px; }
  .puzzle-content .jg-piece-btn { min-width:46px; width:46px; min-height:46px; height:46px; }
  .puzzle-content .jg-actions { min-height:40px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .puzzle-content .jg-action { min-width:0; min-height:40px; font-size:10px; padding:3px 1px; gap:2px; }
}
@media (orientation: landscape) and (max-height: 570px) {
  .app-shell { width:100%; max-width:none; border:0; }
  .hud, .bottom-nav, .screen-root { padding-left:max(6px,env(safe-area-inset-left)); padding-right:max(6px,env(safe-area-inset-right)); }
  .screen-root.board-content .board-main { display:grid!important; grid-template-columns:140px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) 44px; gap:4px!important; }
  .board-content .orders-container { grid-column:1; grid-row:1/3; flex-direction:column; justify-content:center; align-items:center; gap:3px!important; padding:0!important; overflow:hidden!important; }
  .board-content .compact-request-panel { min-width:0!important; width:100%; min-height:48px; flex:1 1 0; max-height:80px; }
  .board-content .request-character, .board-content .request-character img { width:32px; height:32px; }
  .board-content [data-board-active-goal] { grid-column:2; grid-row:1; }
  .board-content .board-playfield { grid-column:2; grid-row:2; }
  .board-content .board-grid { width:min(100%, var(--board-grid-height)); }
  .board-content .board-field-ops-slot { grid-column:1/-1; grid-row:3; }
  .board-content .board-case-panel-wrap { max-width:200px; }
  .puzzle-content .jg-stage { grid-template-columns:minmax(0,1fr) 180px; grid-template-areas:"title title" "board progress" "board tray" "board actions"; grid-template-rows:44px 28px minmax(0,1fr) 40px; }
  .puzzle-content .jg-stage.is-completed { grid-template-areas:"title title" "board progress" "board actions"; grid-template-rows:44px 28px minmax(0,1fr); }
  .puzzle-content .jg-progress-card { min-height:0; padding:3px 5px; }
  .puzzle-content .jg-tray { height:100%; min-height:0; align-content:center; }
}