/* Final responsive layout — AZUR 0.3, desktop and real touch kept separate. */
html, body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
html {overflow:clip;}
body {position:fixed;inset:0;margin:0;}
body[data-screen="menu"] #backdrop {
  background-image: radial-gradient(ellipse at 50% 66%, #0d77a4 0%, #093962 32%, #06172f 75%);
}
body[data-screen="menu"] #backdrop::after {
  content:"";position:absolute;inset:0;opacity:.22;
  background-image:linear-gradient(30deg,transparent 49.6%,#5488b8 50%,transparent 50.4%),linear-gradient(-30deg,transparent 49.6%,#5488b8 50%,transparent 50.4%);
  background-size:140px 82px;mask-image:linear-gradient(transparent,#000 45%,transparent);
}
body[data-screen="menu"] .menu-left {top:22%;}
body[data-screen="menu"] .menu-left h1 {font-size:clamp(48px,5.5vw,78px);}
body[data-screen="menu"] .character-label {top:20%;}
body[data-tab="locker"] .page-preview-label {top:auto;bottom:13%;}
body[data-tab="locker"] .page-preview-label p {margin:6px 0;font-size:12px;}
body[data-tab="locker"] .preview-caption {display:none;}
.minimap-box canvas {border-radius:5px;}
.touch-btn.pressed {background:#ffda55!important;color:#092544;transform:scale(.93);}
.avatar-thumb.is-ready ~ .avatar-thumb-status {display:none;}
@media (min-width:821px) and (min-height:551px) {
  .game-hint {bottom:150px;font-size:11px;background:rgba(3,22,41,.43);padding:10px;border-radius:6px;}
  .game-toolbar .btn {min-width:34px;min-height:32px;}
  .phase-banner {pointer-events:none;}
}
@media (max-width:820px) {
  body[data-tab="locker"] .page-preview-label {display:none;}
  body[data-screen="menu"] .character-label {top:19%;}
}
body:not(.touch-ui) .touch-controls {display:none!important;}
body.touch-ui .game-hint {display:none!important;}
@media (max-height:550px) and (orientation:landscape) {
  body[data-screen="menu"] .menu-left {top:25%;}
  body[data-screen="menu"] .menu-left h1 {font-size:40px;}
  body[data-screen="menu"] .character-label {top:18%;}
  body[data-tab="locker"] .page-preview-label {display:none;}
  body[data-tab="locker"] .scroll-panel {left:3%;right:3%;}
  .phase-banner {top:35px;max-width:36%;}
  .game-hint {display:none;}
}