/* Telefono (giro del 2 ottobre 2026): la partita sul telefono, in verticale e in orizzontale.
   La classe "phone" su <html> la mette ui.js (setupPhone) per gli schermi piccoli; "land" = telefono girato.
   Idea: la mappa prima di tutto. Obiettivi e classifica chiusi (pulsante 📋), barra dei comandi su una riga con le opzioni
   avanzate dietro ⚙️, scheda della città e chat come "fogli" che non coprono tutto, un solo foglio aperto alla volta.
   --top-h = dove finisce la barra in alto (misurata da ui.js), --cmd-h = altezza della barra dei comandi (già misurata). */

#panels-btn, .cmd-more, #home-btn { display: none; }

/* ------------------------------------------------------------------ comune (verticale e orizzontale) */
.phone #panels-btn { display: grid; }
.phone #panels-btn .pn-ic { font-size: 16px; }
.phone #panels-btn[aria-pressed="true"], .phone #chat-btn.on { background: var(--gold); }
.phone #hud.spectating #panels-btn { display: none; }
.phone #legend { display: none; }
.phone .icon-btn { width: 32px; font-size: 15px; }
.phone #topbar { gap: 5px; }

/* obiettivi e classifica: chiusi, si aprono con 📋 come un foglio sotto la barra in alto */
.phone #objectives, .phone #leaderboard { display: none; }
.phone #hud.panels-open #leaderboard, .phone #hud.panels-open #objectives { display: block; }
.phone #hud.panels-open #objectives:empty { display: none; }
.phone #hud.panels-open #right { position: fixed; left: 6px; right: 6px; width: auto; top: calc(var(--top-h, 120px) + 6px); height: auto;
  max-height: 38vh; overflow-y: auto; z-index: 21; }
.phone #hud.panels-open #left { z-index: 21; }
.phone #hud.panels-open #objectives { max-height: 30vh; overflow-y: auto; }
.phone #hud.panels-open #objectives h3 { display: inline-flex; }
.phone #hud.panels-open #objectives .obj:nth-of-type(n+3) { display: flex; }

/* gli avvisi d'attacco restano sempre visibili, piccoli, sotto la barra in alto */
.phone #left { top: calc(var(--top-h, 120px) + 6px); width: min(250px, calc(100vw - 12px)); gap: 6px; }
.phone .alert { padding: 5px 8px; }
.phone .al-body small { display: none; }

/* barra dei comandi: una riga (quante truppe mandare + ⚙️); il resto si apre con ⚙️ */
.phone #command { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px; left: 6px; right: 6px; bottom: 6px;
  width: auto; margin: 0; }
.phone #command .group label { display: none; }
.phone #command > .group:not(#pct-group) { display: none; }
.phone #hud.cmd-open #command > .group { display: flex; }
.phone #hud.cmd-open #command { max-height: calc(100vh - var(--top-h, 120px) - 20px); overflow-y: auto; }
.phone #pct-group { order: 0; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.phone .pct-slider { flex: 1; margin-top: 0; min-width: 50px; }
.phone .cmd-more { order: 1; display: flex; align-items: center; gap: 4px; flex: none; height: 36px; padding: 0 10px; border: 2px solid var(--ink);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: 800 12px var(--font); box-shadow: 0 2px 0 var(--ink); cursor: pointer; }
.phone .cmd-more[aria-expanded="true"] { background: var(--gold); }
.phone #command > .group:not(#pct-group) { order: 2; }
.phone .seg button { padding: 6px 8px; font-size: 13px; min-height: 34px; }
.phone .seg button .lbl { display: none; }
.phone #hud.cmd-open .seg button .lbl { display: inline; }
.phone #hud.cmd-open #command .group label { display: block; margin-bottom: 4px; }
.phone #hud.cmd-open #command > .group { flex-direction: column; align-items: flex-start; }
.phone #hud.cmd-open #pct-group { flex-direction: row; align-items: center; flex-basis: calc(100% - 90px); }
.phone #hud.cmd-open #pct-group label { display: none; }
.phone kbd { display: none; }

/* scheda della città: un foglio che si può scorrere, mai più alto di metà schermo */
.phone #card { left: 6px; right: 6px; width: auto; bottom: calc(var(--cmd-h, 60px) + 12px); max-height: 48vh; overflow-y: auto;
  padding: 10px 12px; overscroll-behavior: contain; }
.phone #hud:has(#card:not(.hidden)) #mission-btn { display: none; }
.phone #card .head h2 { font-size: 21px; }

/* missione: solo il bollino e il titolo */
.phone #mission-btn { left: 6px; bottom: calc(var(--cmd-h, 60px) + 12px); width: auto; padding: 4px 10px 4px 5px; }
.phone #mission-btn .mb-t small { display: none; }

/* proposte (alleanze, tregue, rally): compatte, al massimo due alla volta */
.phone #proposals { top: calc(var(--top-h, 120px) + 6px); left: 6px; right: 6px; transform: none; gap: 6px; }
.phone .proposal { min-width: 0; padding: 8px 10px; }
.phone .proposal .sub { display: none; }
.phone .proposal .title { font-size: 13.5px; }
.phone #proposals > :nth-child(n+3) { display: none; }

/* chat: un foglio, sopra la barra dei comandi */
.phone #hud.chat-open #chatbox { display: flex; position: fixed; left: 6px; right: 6px; top: calc(var(--top-h, 120px) + 6px); width: auto;
  bottom: calc(var(--cmd-h, 60px) + 12px); min-height: 0; z-index: 20; }
.phone #toasts { width: calc(100vw - 24px); }
.phone #banner { top: calc(var(--top-h, 120px) + 10px); }
.phone #ach-pop { top: calc(var(--top-h, 120px) + 8px); }

/* ------------------------------------------------------------------ verticale */
.phone:not(.land) .me-text small { display: none; }
.phone:not(.land) #hud:not(.spectating) .me-text { display: none; }   /* la bandiera basta: lo spazio serve ai pulsanti */
.phone:not(.land) .me { flex: 0 0 auto; min-width: 0; padding: 5px 6px; }

/* ------------------------------------------------------------------ orizzontale: tutto su una riga in alto, la mappa al centro */
.phone.land #topbar { flex-wrap: nowrap; top: 4px; left: 6px; right: 6px; gap: 4px; }
.phone.land .me { flex: 0 0 auto; min-width: 0; padding: 3px 6px; gap: 6px; }
.phone.land .me-text small { display: none; }
.phone.land .me-text b { font-size: 14px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone.land .res { order: 0; flex: 1 1 auto; flex-basis: auto; min-width: 0; padding: 3px 4px; }
.phone.land .stat { padding: 0 3px; }
.phone.land .stat .chipi { display: none; }
.phone.land .stat b { font-size: 13px; }
.phone.land .stat small { font-size: 9px; }
.phone.land .stat.power, .phone.land .stat.allies { display: none; }
.phone.land .match { flex: 0 0 auto; min-width: 0; max-width: 120px; padding: 3px 8px; gap: 3px; }
.phone.land .match-top small { display: none; }
.phone.land .match-top b { font-size: 15px; }
.phone.land .icon-btn { width: 30px; }

/* orizzontale: barra dei comandi in basso al centro, stretta */
.phone.land #command { left: 50%; right: auto; transform: translateX(-50%); width: min(520px, calc(100vw - 12px)); bottom: 4px; padding: 4px 6px; }
.phone.land #hud.cmd-open #command { left: 6px; right: 6px; transform: none; width: auto; max-height: calc(100vh - var(--top-h, 50px) - 14px); }
.phone.land .seg button { min-height: 30px; padding: 4px 7px; }
.phone.land .cmd-more { height: 32px; }

/* orizzontale: scheda, chat e pannelli sono colonne sui lati, la mappa resta in mezzo */
.phone.land #card { left: auto; right: 6px; width: min(320px, 46vw); top: calc(var(--top-h, 50px) + 6px); bottom: calc(var(--cmd-h, 44px) + 10px);
  max-height: none; }
.phone.land #hud.chat-open #chatbox { left: auto; right: 6px; width: min(340px, 48vw); bottom: calc(var(--cmd-h, 44px) + 10px); }
.phone.land #hud.panels-open #right { left: auto; right: 6px; width: min(300px, 44vw); max-height: calc(100vh - var(--top-h, 50px) - var(--cmd-h, 44px) - 22px); }
.phone.land #hud.panels-open #objectives { max-height: calc(100vh - var(--top-h, 50px) - var(--cmd-h, 44px) - 22px); }
.phone.land #left { width: min(240px, 36vw); }
.phone.land #mission-btn { bottom: 6px; }
.phone.land #hud:has(#command) #mission-btn { bottom: calc(var(--cmd-h, 44px) + 10px); }
.phone.land #proposals { left: 50%; right: auto; transform: translateX(-50%); width: min(420px, calc(100vw - 12px)); }
.phone.land #proposals > :nth-child(n+2) { display: none; }
.phone.land #tip { display: none; }
.phone.land #toasts { bottom: calc(var(--cmd-h, 44px) + 10px); width: min(420px, calc(100vw - 24px)); }

/* orizzontale, scelta della nazione: la lista è una colonna a sinistra, la mappa a destra */
.phone.land #hud.picking #left { top: calc(var(--top-h, 50px) + 6px); bottom: 6px; left: 6px; right: auto; width: min(330px, 46vw); }
.phone.land #picker { max-height: 100%; }
.phone.land #hud.picking #card { left: auto; right: 6px; bottom: 6px; top: calc(var(--top-h, 50px) + 6px); width: min(300px, 44vw); max-height: none; }
.phone.land #lobby-panel { left: auto; right: 6px; width: min(320px, 46vw); transform: none; }

/* rifiniture dopo la prova: in verticale il cursore della percentuale c'è solo con ⚙️ aperto (bastano 25/50/75/100%), il
   timer della partita non si taglia */
.phone:not(.land) #hud:not(.cmd-open) .pct-slider { display: none; }
.phone:not(.land) #pct-group .seg { flex: 1; display: flex; }
.phone:not(.land) #pct-group .seg button { flex: 1; }
.phone .match { min-width: 70px; flex: 0 0 auto; }
.phone:not(.land) .match { flex: 1 1 auto; }
.phone #tip { left: 6px; right: 6px; width: auto; transform: none; }
.phone:not(.land) #topbar { gap: 4px; }
.phone:not(.land) .icon-btn { width: 30px; }
.phone:not(.land) .match { min-width: 58px; flex: 1 1 0; }
/* verticale, 📋 aperto: prima la classifica, sotto gli obiettivi (--right-h misurata da ui.js) */
.phone:not(.land) #hud.panels-open #left { top: calc(var(--top-h, 100px) + var(--right-h, 0px) + 12px); left: 6px; right: 6px; width: auto; }
.phone:not(.land) #hud.panels-open #objectives { max-height: calc(100vh - var(--top-h, 100px) - var(--right-h, 0px) - var(--cmd-h, 60px) - 34px); }
.phone:not(.land) #hud.panels-open #right { max-height: 34vh; }
/* orizzontale, 📋 aperto: obiettivi a sinistra, classifica a destra */
.phone.land #hud.panels-open #left { left: 6px; width: min(300px, 44vw); }
.phone .keys { display: none; }

/* menù sul telefono (anche girato): prima logo e QUICK PLAY, poi nome e login */
.phone .land-grid > .landing-card { order: 0; }
.phone .land-side > #acct-panel { order: 1; }
/* telefono girato: menù su due colonne (gioco a sinistra, account e il resto a destra), così QUICK PLAY si vede subito */
.phone.land #landing { align-items: flex-start; }
.phone.land .land-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(860px, 100%); gap: 10px; align-items: start; }
.phone.land .land-side { display: contents; }
.phone.land .land-grid > .landing-card { grid-column: 1; grid-row: 1 / span 12; }
.phone.land .land-side > * { grid-column: 2; }
.phone.land .logo-mark { width: 56px; height: 56px; }
.phone.land .logo { font-size: 40px; }
.phone.land .tagline { margin: 4px 0 8px; }
/* la chat sul telefono si apre solo con 💬 (girato, il telefono è più largo di 760 px e la chat restava aperta) */
.phone #chatbox { display: none; }
.phone #hud.chat-open #chatbox { display: flex; }
.phone #chat-btn { display: grid; }
.phone #ctx { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.phone #ach-drop { top: calc(var(--top-h, 100px) + 6px); }

/* ------------------------------------------------------------------ secondo giro sul telefono (2 ottobre 2026, pomeriggio) */
/* pulsante per tornare sulla propria nazione: piccolo, sul lato destro sotto la barra in alto (G.goHome in main.js) */
.phone #home-btn { display: grid; place-items: center; position: fixed; right: 8px; top: calc(var(--top-h, 120px) + 10px); z-index: 19;
  width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--ink); cursor: pointer; }
.phone #home-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.phone #hud.spectating #home-btn, .phone #hud.panels-open #home-btn, .phone #hud.cmd-open #home-btn { display: none; }
/* in orizzontale la scheda della città sta a destra: il pulsante non le va sotto */
.phone.land #hud:has(#card:not(.hidden)) #home-btn { display: none; }
/* tenere premuto mostra la spiegazione (hovertip.js), non la selezione del testo e il menù "Copia · Ricerca web" del telefono */
.phone body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.phone input, .phone textarea, .phone [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.phone #hovertip { max-width: min(300px, calc(100vw - 16px)); font-size: 13px; }