/* DUEL SOLARIA — il vestito del telefono, in orizzontale.
   Il motore di lotta porta il suo stile (style.css, lo stesso del PC); qui sta
   solo quello che serve a farlo stare in uno schermo basso e largo, e le tre
   schermate dell'app. */

:root{
  --d-fondo:#070b18; --d-fondo2:#0e1530; --d-carta:rgba(22,30,58,.78); --d-riga:rgba(140,160,255,.16);
  --d-testo:#eef1ff; --d-spento:#8e98bf; --d-oro:#f5c451; --d-oro2:#ff9a3c;
  --d-tuo:#4f8cff; --d-loro:#ff4f6d;
  --d-alto:env(safe-area-inset-top,0px); --d-basso:env(safe-area-inset-bottom,0px);
  --d-sx:env(safe-area-inset-left,0px); --d-dx:env(safe-area-inset-right,0px);
}
html,body.duel{margin:0;height:100%;background:var(--d-fondo);color:var(--d-testo);overflow:hidden;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.duel{font:500 15px/1.35 Rajdhani,system-ui,"Segoe UI",sans-serif;-webkit-user-select:none;user-select:none}
body.duel button{font-family:inherit;cursor:pointer}
body.duel input{font-family:inherit}
/* ⚠ «hidden» vale sempre: la scheda della mossa del motore ha un display suo, e senza
   questa riga restava una striscia vuota sopra le mosse */
body.duel [hidden]{display:none !important}

.duel-app{position:fixed;inset:0;overflow:hidden;
  background:
    radial-gradient(90% 70% at 18% 0%,rgba(245,196,81,.16),transparent 60%),
    radial-gradient(70% 80% at 100% 100%,rgba(79,140,255,.16),transparent 60%),
    linear-gradient(160deg,var(--d-fondo2),var(--d-fondo) 70%)}

/* ── il logo ── */
.duel-logo{display:flex;align-items:center;gap:.35em;letter-spacing:.06em;line-height:1}
.duel-logo b{font:900 1.9em/1 Cinzel,Georgia,serif;
  background:linear-gradient(180deg,#fff6d6,var(--d-oro) 55%,var(--d-oro2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(245,160,60,.35))}
.duel-logo i{font:700 1.05em/1 Cinzel,Georgia,serif;font-style:normal;color:#dfe6ff;letter-spacing:.32em;opacity:.92}
.duel-sole{width:1.5em;height:1.5em;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 50%,#fff8d8 0 22%,var(--d-oro) 42%,var(--d-oro2) 64%,transparent 66%);
  box-shadow:0 0 22px rgba(245,180,60,.65);animation:dSole 6s ease-in-out infinite}
@keyframes dSole{50%{box-shadow:0 0 34px rgba(255,170,60,.9);transform:scale(1.06)}}
.duel-logo.grande{font-size:clamp(26px,6.2vh,46px);flex-wrap:wrap}

/* ── il caricamento ── */
.duel-carica{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-size:clamp(22px,7vh,40px)}
.duel-barra{width:min(360px,60vw);height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.duel-barra span{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--d-oro),var(--d-oro2));transition:width .3s ease}
.duel-carica small{font-size:14px;color:var(--d-spento);letter-spacing:.04em}

/* ── LE SCENE DEI SOL dietro il caricamento e la home (Andrea, 13/9 sera):
   dieci illustrazioni che si alternano in dissolvenza, con un lento zoom, e un
   velo scuro sopra perché testo e pulsanti restino leggibili. ── */
.d-sfondo{position:absolute;inset:0;overflow:hidden;background:var(--d-fondo)}
/* ⚠ SOLO LA SCENA VISIBILE SI MUOVE: dieci immagini a tutto schermo animate insieme,
   anche quelle invisibili, sono dieci strati da comporre a ogni fotogramma — e
   sul telefono si sente. Le altre stanno ferme e nascoste. */
.d-sfondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;
  transition:opacity 1.6s ease,visibility 0s linear 1.6s;transform:scale(1.04)}
.d-sfondo img.on{opacity:1;visibility:visible;transition:opacity 1.6s ease;animation:dKen 16s ease-in-out infinite alternate;will-change:transform}
@keyframes dKen{to{transform:scale(1.13) translate(-1.5%,-1%)}}
.d-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,24,.30),rgba(7,11,24,.10) 35%,rgba(7,11,24,.88))}
.d-home .d-velo{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.45) 62%,#000 100%)}
.d-carica-dentro{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.d-icona-grande{width:clamp(72px,24vh,140px);height:auto;border-radius:22%;
  box-shadow:0 0 44px rgba(245,180,60,.55),0 10px 30px rgba(0,0,0,.6);animation:dSole 6s ease-in-out infinite}
.d-marchio{display:flex;align-items:center;gap:12px}
.d-icona-media{width:clamp(44px,12vh,74px);height:auto;border-radius:22%;box-shadow:0 0 22px rgba(245,180,60,.5),0 6px 16px rgba(0,0,0,.6)}
.d-home-dx{padding:10px;border-radius:22px;background:rgba(7,11,24,.42);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.d-musica{width:34px;height:34px;border-radius:50%;border:1px solid var(--d-riga);background:rgba(255,255,255,.06);font-size:16px;line-height:1;padding:0}
.d-motto,.d-livello span,.d-versione small{text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* ── gira il telefono ── */
.duel-ruota{display:none}
@media (orientation:portrait){
  .duel-ruota{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    background:radial-gradient(80% 60% at 50% 30%,#1a2550,#070b18);color:#fff;text-align:center;padding:24px}
  .duel-ruota b{font:900 24px/1.1 Cinzel,Georgia,serif;color:var(--d-oro)}
  .duel-ruota small{color:var(--d-spento);font-size:15px}
  .duel-ruota-tel{width:54px;height:92px;border:4px solid #dfe6ff;border-radius:12px;margin-bottom:14px;position:relative;animation:dRuota 2.2s ease-in-out infinite}
  .duel-ruota-tel::after{content:"";position:absolute;left:50%;bottom:6px;width:14px;height:3px;margin-left:-7px;border-radius:3px;background:#dfe6ff}
  @keyframes dRuota{0%,20%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
}

/* ── pulsanti comuni ── */
.d-icona{width:40px;height:40px;border-radius:12px;border:1px solid var(--d-riga);background:rgba(255,255,255,.06);color:#fff;
  font-size:26px;line-height:1;display:grid;place-items:center;flex:0 0 auto}
.d-icona:active{transform:scale(.94)}
.d-bt{padding:10px 18px;border-radius:12px;border:1px solid var(--d-riga);background:rgba(255,255,255,.07);color:#fff;font-weight:700;font-size:15px;letter-spacing:.03em}
.d-bt.primo{background:linear-gradient(135deg,var(--d-oro),var(--d-oro2));color:#241400;border:none;box-shadow:0 6px 20px rgba(255,150,50,.35)}
.d-bt.pericolo{background:#5a1624;border-color:#ff6b81;color:#ffd3da}

/* ═══ HOME ═══ */
/* la home (13/9 sera): la scena a tutto schermo che sfuma nel nero in basso; sopra,
   in tre posti fissi, la scritta (alto a sinistra), i formati (destra) e il
   piede con livello e aggiornamento (in basso) */
.d-home{position:absolute;inset:0;display:block}
.d-home-testa{position:absolute;left:calc(22px + var(--d-sx));top:calc(14px + var(--d-alto));z-index:2;display:flex;align-items:center;gap:12px}
.d-home-dx{position:absolute;right:calc(18px + var(--d-dx));top:50%;transform:translateY(-50%);width:min(46%,420px);z-index:2}
.d-home-piede{position:absolute;left:calc(22px + var(--d-sx));right:calc(18px + var(--d-dx));bottom:calc(10px + var(--d-basso));z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.d-home-piede .d-livello{margin:0}
.d-home-piede .d-versione{margin:0}
/* la scritta deve leggersi anche sopra una scena chiara: ombra scura dietro le lettere */
.d-home-testa{filter:drop-shadow(0 2px 4px rgba(0,0,0,.95)) drop-shadow(0 0 14px rgba(0,0,0,.8))}
.d-home .duel-logo i{color:#fff;text-shadow:0 2px 6px #000,0 0 16px rgba(0,0,0,.95)}
.d-home .d-velo{background:radial-gradient(60% 45% at 8% 6%,rgba(0,0,0,.55),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 64%,#000 100%)}
.d-motto{margin:0;color:var(--d-spento);font-size:clamp(14px,3.6vh,19px);letter-spacing:.03em}
.d-livello{display:flex;align-items:center;gap:10px;margin-top:6px}
.d-livello span{color:var(--d-spento);font-size:14px;margin-right:4px}
.d-livello button{width:38px;height:38px;border-radius:50%;border:1px solid var(--d-riga);background:rgba(255,255,255,.07);color:#fff;font-size:22px}
/* la versione e il pulsante Aggiorna: in basso, discreti finché non c'è una novità */
.d-versione{display:flex;align-items:center;gap:10px;margin-top:14px}
.d-versione small{color:var(--d-spento);font-size:12px}
.d-versione button{padding:6px 14px;border-radius:999px;border:1px solid var(--d-riga);background:rgba(255,255,255,.06);color:#dfe6ff;font:600 13px 'Rajdhani',system-ui,sans-serif;letter-spacing:.04em}
.d-versione button:disabled{opacity:.7}
.d-versione button.nuova{border-color:#f5c451;color:#1a1300;background:linear-gradient(180deg,#ffd873,#e9a92a);box-shadow:0 0 16px rgba(245,196,81,.55);animation:dPulsa 1.6s ease-in-out infinite}
@keyframes dPulsa{50%{box-shadow:0 0 4px rgba(245,196,81,.2)}}
.d-livello b{min-width:40px;text-align:center;font-size:24px;font-weight:700}
.d-home-dx h2{margin:0 0 10px;font:700 clamp(13px,3.2vh,16px)/1 Rajdhani,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--d-spento)}
/* LE VOCI DEI FORMATI (Andrea, 13/9 sera: «un altro stile, più consono a tutto»):
   non più quattro riquadri, ma quattro righe una sotto l'altra, vetro scuro con
   un filo dorato a sinistra su quella scelta — lo stesso linguaggio del logo e
   del pulsante LOTTA. A sinistra il formato grande, accanto la spiegazione, a
   destra i pallini delle due squadre. */
.d-home-dx{padding:0;background:none;border:none}
.d-formati{display:flex;flex-direction:column;gap:clamp(6px,1.6vh,10px)}
.d-formato{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"vs dice sagome";align-items:center;column-gap:12px;
  padding:clamp(7px,1.9vh,12px) 14px clamp(7px,1.9vh,12px) 16px;border-radius:14px;text-align:left;
  background:linear-gradient(90deg,rgba(7,11,24,.80),rgba(12,18,40,.55));border:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 18px rgba(0,0,0,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow:hidden}
.d-formato::after{display:none}
.d-formato::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:0 3px 3px 0;background:rgba(255,255,255,.14)}
.d-formato.on{border-color:rgba(245,196,81,.55);background:linear-gradient(90deg,rgba(245,196,81,.20),rgba(12,18,40,.60));box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(245,196,81,.25)}
.d-formato.on::before{background:linear-gradient(180deg,#ffe28a,var(--d-oro2));box-shadow:0 0 10px rgba(245,196,81,.9)}
.d-formato b{grid-area:vs;font:900 clamp(17px,4.6vh,24px)/1 Cinzel,Georgia,serif;letter-spacing:.04em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.d-formato.on b{color:var(--d-oro)}
.d-formato small{grid-area:dice;color:var(--d-spento);font-size:clamp(12px,3vh,14px)}
.d-formato-vs{grid-area:sagome;margin:0;gap:6px}
.d-formato-vs em{font-size:10px}
.d-formato{position:relative}
.d-formato:active{transform:scale(.97)}
.d-formato-vs{display:flex;align-items:center}
.d-formato-vs em{font-style:normal;font-weight:700;color:var(--d-oro);letter-spacing:.1em}
.d-sagome{display:flex;gap:3px}
.d-sagome i{width:9px;height:9px;border-radius:50%}
.d-sagome.tuo i{background:var(--d-tuo);box-shadow:0 0 8px var(--d-tuo)}
.d-sagome.loro i{background:var(--d-loro);box-shadow:0 0 8px var(--d-loro)}

/* ═══ SQUADRE ═══ */
.d-squadre{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(8px + var(--d-alto)) calc(12px + var(--d-dx)) calc(8px + var(--d-basso)) calc(12px + var(--d-sx))}
.d-barra{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.d-barra-formati{display:flex;gap:6px;background:rgba(255,255,255,.05);padding:4px;border-radius:14px;border:1px solid var(--d-riga)}
.d-pill{min-width:48px;padding:6px 10px;border-radius:10px;border:none;background:transparent;color:var(--d-spento);font-weight:700;font-size:15px}
.d-pill.on{background:rgba(245,196,81,.18);color:var(--d-oro)}
.d-lv{color:var(--d-spento);font-weight:600;margin-left:auto}
.d-lotta{padding:9px 26px;border-radius:14px;border:none;font:900 18px/1 Cinzel,Georgia,serif;letter-spacing:.08em;color:#231300;
  background:linear-gradient(135deg,#ffe28a,var(--d-oro) 40%,var(--d-oro2));box-shadow:0 6px 22px rgba(255,150,50,.45)}
.d-lotta.spento{filter:grayscale(.8);opacity:.5;box-shadow:none}
.d-lotta.scuoti{animation:dScuoti .35s}
@keyframes dScuoti{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.d-campo{flex:1;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;gap:10px}
.d-vs{align-self:center;font:900 22px/1 Cinzel,Georgia,serif;color:var(--d-oro);text-shadow:0 0 18px rgba(245,180,60,.6)}
.d-lato{min-height:0;display:flex;flex-direction:column;border-radius:18px;padding:8px;border:1px solid var(--d-riga);background:rgba(10,15,34,.55)}
.d-lato.tuo{box-shadow:inset 3px 0 0 var(--d-tuo)}
.d-lato.loro{box-shadow:inset -3px 0 0 var(--d-loro)}
.d-lato header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px}
.d-lato header b{font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.d-lato.tuo header b{color:#9fc0ff}
.d-lato.loro header b{color:#ff9fb0}
.d-caso{padding:4px 12px;border-radius:9px;border:1px solid var(--d-riga);background:rgba(255,255,255,.06);color:#dfe6ff;font-weight:600;font-size:13px}
.d-carte{flex:1;min-height:0;display:grid;gap:8px;grid-auto-rows:1fr;overflow:auto}
.n1 .d-carte{grid-template-columns:1fr}
.n2 .d-carte{grid-template-columns:1fr}
.n3 .d-carte,.n4 .d-carte{grid-template-columns:1fr 1fr}
.d-carta{position:relative;min-height:0;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 26%,#141b36),#10162c);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.d-carta.vuota{justify-content:center;flex-direction:column;gap:2px;border:1.5px dashed var(--d-riga);background:rgba(255,255,255,.03);color:var(--d-spento)}
.d-piu{font-size:28px;line-height:1;color:#cfd6ff}
.d-carta-tocca{flex:0 0 auto;height:100%;max-height:140px;aspect-ratio:1;border:none;padding:0;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);border-radius:12px}
.d-carta-tocca img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.d-carta-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.d-carta-info b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n3 .d-carta-info b,.n4 .d-carta-info b{font-size:14px}
.d-tipi{display:flex;gap:4px;flex-wrap:wrap}
.d-tipi i{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:8px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.d-mosse{align-self:flex-start;max-width:100%;padding:3px 9px;border-radius:8px;border:1px solid var(--d-riga);background:rgba(0,0,0,.25);color:#cfd6ff;
  font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n3 .d-mosse,.n4 .d-mosse{display:none}
.d-via{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;font-size:16px;line-height:1}

/* ═══ SCELTA DEL SOL ═══ */
.d-scelta{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;background:#060914;
  padding:calc(8px + var(--d-alto)) calc(12px + var(--d-dx)) 0 calc(12px + var(--d-sx));-webkit-user-select:none}
.d-scelta-testa{display:flex;align-items:center;gap:10px}
.d-scelta-testa b{font-size:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.d-scelta-testa b.tuo{color:#9fc0ff}.d-scelta-testa b.loro{color:#ff9fb0}
.d-scelta-testa input{flex:1;min-width:0;height:40px;border-radius:12px;border:1px solid var(--d-riga);background:rgba(255,255,255,.07);color:#fff;padding:0 14px;font-size:16px;-webkit-user-select:text;user-select:text}
.d-scelta-tipi{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
.d-scelta-tipi::-webkit-scrollbar{display:none}
.d-chip{flex:0 0 auto;padding:5px 12px;border-radius:20px;border:1px solid color-mix(in srgb,var(--tc,#8e98bf) 60%,transparent);background:color-mix(in srgb,var(--tc,#8e98bf) 16%,transparent);color:#e8ecff;font-weight:600;font-size:13px}
.d-chip.on{background:var(--tc,#f5c451);color:#fff;border-color:transparent}
.d-scelta-griglia{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;padding:2px 0 calc(12px + var(--d-basso));align-content:start;-webkit-overflow-scrolling:touch}
.d-sol{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tc) 40%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 22%,#121933),#0d1226);color:#fff}
.d-sol img{width:72px;height:72px;object-fit:contain}
.d-sol b{font-size:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-sol:active{transform:scale(.95)}
.d-vuoto{grid-column:1/-1;text-align:center;color:var(--d-spento)}

/* ═══ LOTTA ═══ */
.d-arena{position:absolute;inset:0}
.d-palco{position:absolute;inset:0}
.d-esci{position:absolute;z-index:60;top:calc(6px + var(--d-alto));left:calc(6px + var(--d-sx));width:34px;height:34px;font-size:22px;background:rgba(0,0,0,.45)}

/* ═══ LA LOTTA: le regole della scena stanno in arena-sw.css (condivise col PC) ═══ */

/* ═══ IL BANCO DELLE MOSSE (lo stesso del PC) a tutto schermo ═══
   la spiegazione lunga sul telefono si mangiava mezzo schermo: le regole dei posti
   si leggono gia' sulle caselle («max G1», «max G2»...) */
body.duel .bm-ov{padding:0;z-index:6000;background:#060914}
body.duel .bm{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:none;
  padding:calc(8px + var(--d-alto)) calc(14px + var(--d-dx)) calc(12px + var(--d-basso)) calc(14px + var(--d-sx))}
body.duel .bm-nota{display:none}
body.duel .bm-top h3{font-size:16px}
body.duel .bm-sel,body.duel .bm-f{font-size:15px;min-height:38px}

/* ═══ FINE ═══ */
/* il tasto «Torna all'Arena» del motore: qui c'e' la carta di fine lotta */
body.duel #duelLotta .sol-racconto.finita .sol-comandi{display:none}

.d-fine,.d-domanda{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(4,6,14,.72);animation:dEntra .3s ease}
@keyframes dEntra{from{opacity:0}to{opacity:1}}
.d-fine-carta,.d-domanda-carta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 30px;border-radius:22px;
  background:linear-gradient(160deg,#1a2550,#0c1228);border:1px solid var(--d-riga);box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:center;max-width:90vw}
.d-fine-carta b{font:900 clamp(30px,10vh,52px)/1 Cinzel,Georgia,serif;letter-spacing:.08em}
.d-fine.vinta .d-fine-carta b{background:linear-gradient(180deg,#fff6d6,var(--d-oro),var(--d-oro2));-webkit-background-clip:text;background-clip:text;color:transparent}
.d-fine.persa .d-fine-carta b{color:#ff8da0}
.d-fine-carta small,.d-domanda-carta p{color:var(--d-spento);margin:0;font-size:15px}
.d-domanda-carta b{font-size:20px}
.d-fine-bt{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* il banco con le tessere del catalogo, sul telefono: una colonna, tessere
   piene, testi leggibili col dito */
body.duel .bm-griglia{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px}
body.duel .bm-slot{padding:8px 10px}
body.duel .cat-m{padding:9px 11px; gap:6px}
body.duel .cat-m-nome{font-size:14px}
body.duel .cat-eff{font-size:11px}
body.duel .bm-scegli{white-space:nowrap}