/* ───── MOBILE: gioco in orizzontale, tocco comodo, niente scroll/zoom involontari ───── */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
.screen, #modal .modal-box { -webkit-overflow-scrolling: touch; }

/* Telefono in verticale: il gioco e' pensato in orizzontale, in ogni schermata */
#rotate { gap: 16px; padding: 24px; line-height: 1.2; }
#rotate small { display: block; margin-top: 4px; font-size: 15px; font-family: system-ui, sans-serif; color: #cdbf9d; }
#rotate .btn { margin-top: 6px; }
@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) {
  #rotate { display: flex; }
  #screen-home, #screen-chars, #screen-shop, #screen-detail, #screen-road, #screen-board, #screen-missions, #screen-azrael, #screen-pass, #screen-forge { visibility: hidden; }
}
#rotate [data-fs] { display: none; }
body.can-fs #rotate [data-fs] { display: inline-flex; }

/* Tocco: bersagli piu' grandi sui dispositivi senza mouse */
@media (pointer: coarse) {
  .btn, .sqbtn, .keycap, .wtile, .card, .hm-b, .hm-sq, .hm-rect { touch-action: manipulation; }
  .btn { min-height: 40px; }
  .sqbtn { min-width: 40px; min-height: 40px; }
  .hm-sq { min-width: 34px; min-height: 34px; }
  .help-list .btn { min-height: 52px; }
  *::-webkit-scrollbar { width: 0; height: 0; }
}

/* ───── Telefono in orizzontale (altezza <= 480px): intestazioni e griglie compatte ───── */
@media (max-height: 480px) {
  .sub-top { gap: 8px; padding: calc(5px + var(--safe-t)) calc(10px + var(--safe-r)) 3px calc(10px + var(--safe-l)); }
  .sub-top h2 { font-size: 20px; -webkit-text-stroke-width: 3px; white-space: nowrap; }
  .sub-top .sqbtn { width: 38px; height: 38px; font-size: 20px; margin-bottom: 4px; border-width: 3px; }
  .sub-top .btn { padding: 4px 12px; font-size: 14px; min-height: 36px; }
  .chip { padding: 2px 10px 2px 6px; font-size: 13px; gap: 5px; border-width: 2px; }
  .chip .cico { width: 18px; height: 18px; }
  .curgrp { gap: 8px; }
  .filters { gap: 5px; } .filters button { padding: 2px 9px 3px; font-size: 12px; border-width: 2px; }
  .ms-tabs button, .ms-tabs .btn { padding: 3px 10px; font-size: 13px; }

  /* Personaggi */
  .grid { top: calc(48px + var(--safe-t)); grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; padding: 8px calc(10px + var(--safe-r)) 20px calc(10px + var(--safe-l)); }
  .card { border-width: 3px; border-radius: 12px; }
  .card .cname { font-size: 13px; bottom: 22px; padding-top: 12px; }
  .card .rolei { width: 22px; height: 22px; font-size: 13px; top: 4px; right: 4px; }
  .card .lvbadge { width: 28px; height: 28px; font-size: 13px; top: 3px; left: 3px; }
  .card .lock { font-size: 22px; top: 4px; left: 5px; } .card .up { font-size: 20px; bottom: 26px; right: 3px; }
  .souls { left: 3px; right: 3px; bottom: 3px; height: 18px; } .souls .pbar { height: 16px; border-width: 2px; margin-left: 12px; } .souls .pbar b { font-size: 10px; -webkit-text-stroke-width: 2px; } .souls img { width: 22px; height: 22px; left: -4px; }
  .card .cname { bottom: 41px; }
  .card .souls.tierc { bottom: 21px; height: 17px; } .card .souls.tierc .tieremb-svg { height: 26px; left: -5px; }
  .card .souls.tierc .pbar { height: 14px; border-width: 2px; margin-left: 12px; } .card .souls.tierc .pbar b { font-size: 9px; -webkit-text-stroke-width: 2px; }
  .card .tstars { bottom: 22px; } .card .tieremb { top: 30px; } .card .tieremb .tieremb-svg { height: 40px; }
  .sub-top .filters { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; } .sub-top .filters button, .sub-top .chip, .sub-top .ms-tabs { flex: none; }
}

/* Scheda eroe su telefono in orizzontale */
@media (max-height: 480px) {
  #screen-detail .dgrid { top: calc(46px + var(--safe-t)); grid-template-columns: minmax(96px, 21%) 1fr minmax(250px, 47%); gap: 8px; padding: 0 calc(10px + var(--safe-r)) calc(6px + var(--safe-b)) calc(10px + var(--safe-l)); }
  .d-left { gap: 5px; padding-top: 2px; }
  .dname { font-size: 26px; -webkit-text-stroke-width: 4px; text-shadow: 0 3px 0 var(--ink); }
  .ribbon { font-size: 13px; padding: 1px 12px 2px 7px; border-width: 3px; box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.4); }
  .rolepill { font-size: 12px; padding: 1px 10px 2px 5px; }
  .descp { padding: 5px 8px; border-width: 2px; border-radius: 10px; } .descp p { display: none; } .descp h4 { font-size: 12px; margin: 0; -webkit-text-stroke-width: 2px; }
  .d-actions { padding-top: 2px; gap: 2px; }
  .d-actions .btn, .d-actions .btn.big { font-size: 13px; padding: 5px 4px; min-height: 34px; -webkit-text-stroke-width: 2px; }
  .arow { gap: 5px; } .acol .btn { margin-bottom: 2px; }
  .soulrow { padding-left: 6px; } .soulrow img { width: 30px; height: 30px; margin-right: -10px; }
  .soulrow .pbar, .tierrow .pbar { height: 16px; border-width: 2px; } .soulrow .pbar b { font-size: 10px; -webkit-text-stroke-width: 2px; }
  .tierrow .tieremb-svg { height: 32px; width: auto; }
  .upcost { font-size: 12px; } .upcost .cico { width: 16px; height: 16px; }
  .d-right { padding-top: 0; gap: 5px; }
  .d-right h3 { font-size: 15px; -webkit-text-stroke-width: 3px; }
  .wfeat { padding: 5px 8px; gap: 8px; margin: 3px 0 5px; border-radius: 10px; }
  .wf-ico { width: 54px; } .wf-n { font-size: 16px; -webkit-text-stroke-width: 3px; } .wf-r { font-size: 9px; }
  .wf-main .wi-act .btn { padding: 3px 10px; font-size: 12px; min-height: 30px; }
  .wtiles { gap: 5px; } .wtiles .wtile { width: 42px; height: 42px; border-radius: 9px; }
  .atk-grid { gap: 5px; }
  .atk-card { padding: 4px 5px 5px; gap: 2px; border-radius: 8px; }
  .atk-card .ai { width: 26px; font-size: 15px; border-width: 2px; } .atk-card .a-mana { font-size: 12px; } .atk-card > b { font-size: 11px; -webkit-text-stroke-width: 2.5px; }
  .statbar { gap: 5px; } .stat { padding: 2px 4px; gap: 4px; border-radius: 10px; } .stat .ico { font-size: 18px; } .stat b { font-size: 15px; -webkit-text-stroke-width: 2px; }
}

/* Forgia, Negozio e altre schermate su telefono in orizzontale */
@media (max-height: 480px) {
  .d-left { padding-top: 6px; } .dname { line-height: 1.1; }
  .fg-body { top: calc(46px + var(--safe-t)); left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); bottom: calc(6px + var(--safe-b)); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .fg-left { padding: 6px; gap: 5px; } .fg-f { gap: 4px; } .fg-f button { padding: 3px 8px; font-size: 11px; }
  .fg-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; padding: 3px 2px 6px; }
  .fg-t { padding: 4px 2px 3px; } .fg-t .wicon { width: 38px; height: 38px; } .fg-t em { font-size: 9px; min-height: 20px; }
  .fg-hint { display: none; }
  .fg-stage { height: clamp(78px, 30vh, 120px); }
  .shop-body { top: calc(48px + var(--safe-t)); padding: 8px calc(10px + var(--safe-r)) 20px calc(10px + var(--safe-l)); gap: 10px; }
  .road-body { top: calc(48px + var(--safe-t)); }
  .lb-list { top: calc(48px + var(--safe-t)); bottom: calc(52px + var(--safe-b)); }
  .lb-me-bar { bottom: calc(4px + var(--safe-b)); }
}

/* Finestre (modali) su telefono in orizzontale */
@media (max-height: 480px) {
  #modal { padding: 6px; }
  .modal-box { padding: 10px 14px; border-radius: 12px; max-height: 96vh; }
  .modal-box h2, .modal-box h1 { font-size: 22px; margin-bottom: 6px; -webkit-text-stroke-width: 3px; }
  .modal-box h3 { font-size: 16px; margin: 8px 0 6px; }
  .help-list { gap: 5px; margin: 4px 0 8px; } .help-list .btn { min-height: 40px; padding: 5px 12px; font-size: 15px; } .help-list .btn small { font-size: 11px; }
  .help-note { font-size: 11px; margin: 0; }
  .btn-row .btn { min-height: 36px; padding: 5px 14px; font-size: 15px; }
}

/* Home leggibile anche sui telefoni piccoli: meno contorno sul testo, niente nomi tagliati */
@media (max-height: 480px) {
  .hm-rect, .hm-b, .hm-online, .hm-az-t, .hm-name, .hm-lvn, .hm-rbar b, .hm-streak { letter-spacing: 0; -webkit-text-stroke-width: 1.8px; }
  .hm-col { width: clamp(112px, 17vw, 176px); }
  .hm-b { font-size: clamp(10px, min(2.3vh, 1.5vw), 15px); }
}
@media (max-height: 480px) and (max-width: 660px) {
  .hm-tl { grid-template-columns: 1fr 1fr 1fr; }
  .hm-rk .hm-rkt, .hm-lb .hm-rkt { display: none; }
}

/* Prestazioni sui dispositivi touch: niente sfocature in tempo reale, sfondi fermi, meno livelli animati */
@media (pointer: coarse) {
  #modal, .chip, .side-btn, .modebtn, .fg-left, .filters button { -webkit-backdrop-filter: none; backdrop-filter: none; }
  #modal { background: rgba(6, 4, 2, .88); }
  .chip, .modebtn { background: linear-gradient(rgba(46, 33, 54, .9), rgba(14, 9, 20, .94)); }
  .fg-left { background: rgba(16, 10, 6, .9); }
  .filters button { background: rgba(14, 9, 20, .9); }
  .bgfx .rays, .bgfx .grid, .bgfx .dots { animation: none; }
  .bgfx .rays { width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; }
  .wf-halo, .d-stage::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}

/* Battaglia su telefono: barra del mana tra i due gruppi di pulsanti (non sopra l'azione) e HUD piu' leggero */
@media (pointer: coarse) and (max-height: 480px) {
  .b-mana { height: 26px; border-width: 3px; opacity: .92; } .b-mana-num { font-size: 14px; }
  .b-title { font-size: 13px; letter-spacing: 2px; } .b-sub { font-size: 16px; }
  .b-top .b-btn { width: 44px; height: 44px; font-size: 22px; border-width: 3px; border-radius: 14px; }
}
@media (pointer: coarse) and (max-height: 480px) and (min-width: 640px) {
  .b-mid { bottom: calc(8px + var(--safe-b)); width: clamp(120px, 22vw, 230px); }
}
@media (pointer: coarse) and (max-height: 480px) and (max-width: 639px) {
  .b-mid { bottom: calc(76px + var(--safe-b)); width: 150px; opacity: .85; }
}