/* Q130 - Cirulla App Preview mobile (Android / iOS) */
:root{
  --q130-bar-h:68px;
  --q130-safe-bottom:env(safe-area-inset-bottom,0px);
}
.q130-app-shell,.q130-app-backdrop,.q130-app-sheet,.q130-section-nav{display:none}

@media (max-width:820px){
  /* Q130d: nella versione app la navigazione è tutta nella barra inferiore.
     L'hamburger web originale resta disponibile su desktop. */
  html.q130-app-preview .mobile-menu-toggle{
    display:none!important;
  }

  html.q130-app-preview{
    background:#07150f;
    scroll-padding-bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 12px);
  }
  html.q130-app-preview body{
    padding-bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 10px)!important;
    overscroll-behavior-y:contain;
    -webkit-tap-highlight-color:transparent;
  }
  html.q130-app-preview body.q130-sheet-open{overflow:hidden}
  html.q130-app-preview main{
    max-width:100%!important;
    overflow-x:clip;
  }

  .q130-app-shell{
    position:fixed;z-index:9000;left:0;right:0;bottom:0;
    display:grid;grid-template-columns:repeat(5,1fr);
    min-height:var(--q130-bar-h);
    padding:6px 6px calc(6px + var(--q130-safe-bottom));
    background:rgba(5,28,19,.96);
    border-top:1px solid rgba(255,215,96,.28);
    box-shadow:0 -10px 30px rgba(0,0,0,.28);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .q130-app-shell a,.q130-app-shell button{
    min-width:0;border:0;background:transparent;color:#dfeee7;text-decoration:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font:700 10px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    padding:4px 2px;border-radius:14px;cursor:pointer;
  }
  .q130-app-shell .q130-icon{font-size:21px;line-height:1}
  .q130-app-shell a[aria-current="page"]{color:#ffd65a;background:rgba(255,214,90,.08)}
  .q130-app-shell .q130-primary{
    color:#07150f;background:#f4c744;transform:translateY(-7px);
    box-shadow:0 8px 22px rgba(0,0,0,.28);margin:0 3px;
  }

  .q130-app-backdrop{
    display:block;position:fixed;z-index:9010;inset:0;background:rgba(0,0,0,.58);
    opacity:0;pointer-events:none;transition:opacity .16s ease;
  }
  .q130-app-backdrop.show{opacity:1;pointer-events:auto}

  .q130-app-sheet{
    display:block;position:fixed;z-index:9020;left:8px;right:8px;bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 6px);
    max-height:min(72vh,620px);overflow:auto;
    background:#0b261b;border:1px solid rgba(255,214,90,.28);border-radius:24px;
    box-shadow:0 18px 60px rgba(0,0,0,.48);padding:14px;
    transform:translateY(24px);opacity:0;pointer-events:none;
    transition:transform .18s ease,opacity .18s ease;
  }
  .q130-app-sheet.show{transform:translateY(0);opacity:1;pointer-events:auto}
  .q130-sheet-handle{width:42px;height:4px;border-radius:999px;background:rgba(255,255,255,.28);margin:0 auto 12px}
  .q130-sheet-title{font:800 18px/1.2 system-ui;color:#fff;margin:0 0 12px}
  .q130-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .q130-sheet-link{
    display:flex!important;align-items:center;gap:10px;min-height:52px;padding:10px 12px!important;
    border:1px solid rgba(255,255,255,.10)!important;border-radius:16px!important;
    background:rgba(255,255,255,.045)!important;color:#f2f7f4!important;text-decoration:none!important;
    font:700 13px/1.25 system-ui!important;
  }
  .q130-sheet-link span:first-child{font-size:20px}
  .q130-sheet-group{margin-top:14px}
  .q130-sheet-group h3{font:800 11px/1.2 system-ui;text-transform:uppercase;letter-spacing:.08em;color:#f2c952;margin:0 0 7px}
  .q130-sheet-close{
    position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;
    background:rgba(255,255,255,.08);color:#fff;font-size:20px;
  }

  /* Navigatore rapido per pagine lunghe */
  .q130-section-nav{
    display:flex;gap:7px;overflow-x:auto;padding:7px 2px 10px;margin:0 auto 8px;
    scrollbar-width:none;scroll-snap-type:x proximity;
  }
  .q130-section-nav::-webkit-scrollbar{display:none}
  .q130-section-nav a{
    flex:0 0 auto;scroll-snap-align:start;text-decoration:none;
    padding:8px 11px;border-radius:999px;border:1px solid rgba(255,214,90,.22);
    background:rgba(8,35,24,.82);color:#e8f1ec;font:700 11px/1 system-ui;
  }
  .q130-anchor{scroll-margin-top:12px}

  /* Tabelle e blocchi larghi non allungano/deformano il layout: scorrono in orizzontale. */
  html.q130-app-preview table{font-size:12px}
  html.q130-app-preview .table-wrap,
  html.q130-app-preview .ranking-table-wrap,
  html.q130-app-preview .tournament-table-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }

  /* Righe di card: swipe orizzontale al posto di colonne chilometriche, solo dove già esistono grid note. */
  html.q130-app-preview .stats-grid,
  html.q130-app-preview .home-stats-grid,
  html.q130-app-preview .achievement-grid,
  html.q130-app-preview .record-grid,
  html.q130-app-preview .champion-grid{
    display:flex!important;overflow-x:auto!important;gap:10px!important;
    scroll-snap-type:x mandatory;padding-bottom:6px!important;
  }
  html.q130-app-preview .stats-grid>*,
  html.q130-app-preview .home-stats-grid>*,
  html.q130-app-preview .achievement-grid>*,
  html.q130-app-preview .record-grid>*,
  html.q130-app-preview .champion-grid>*{
    flex:0 0 min(82vw,330px)!important;scroll-snap-align:start;
  }

  /* Pulsanti più comodi da toccare, senza gonfiare il gioco. */
  html.q130-app-preview body:not(.game-page) button,
  html.q130-app-preview body:not(.game-page) .button{
    touch-action:manipulation;
  }
}

/* Nelle schermate di gioco la bottom bar non deve coprire il tavolo. */
@media (max-width:820px){
  html.q130-game-screen body{padding-bottom:0!important}
  html.q130-game-screen .q130-app-shell,
  html.q130-game-screen .q130-section-nav{display:none!important}
}


/* Q130e - rifiniture mobile navigazione, tornei e pagine lunghe */
@media (max-width:820px){
  /* Barra inferiore: tutti e cinque i comandi allineati; Gioca resta evidenziato ma non "sale". */
  .q130-app-shell{align-items:stretch}
  .q130-app-shell a,.q130-app-shell button{
    min-height:56px;
    position:relative;
  }
  .q130-app-shell .q130-primary{
    transform:none!important;
    margin:0 3px;
  }
  .q130-app-shell a[aria-current="page"],
  .q130-app-shell button[aria-current="page"]{
    color:#ffd65a;
    background:rgba(255,214,90,.10);
    box-shadow:inset 0 0 0 1px rgba(255,214,90,.18);
  }
  .q130-app-shell .q130-primary[aria-current="page"]{
    color:#07150f;
    background:#f4c744;
    box-shadow:0 7px 18px rgba(0,0,0,.24);
  }

  /* Header Home: ID sempre intero anche su iPhone SE. */
  html.q130-app-preview .royal-home-nav{
    overflow:hidden;
  }
  html.q130-app-preview .royal-brand-with-avatar{
    min-width:0!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  html.q130-app-preview .royal-brand{
    min-width:0!important;
    flex:1 1 auto!important;
    white-space:nowrap!important;
    font-size:clamp(25px,8.4vw,34px)!important;
    letter-spacing:.02em!important;
  }
  html.q130-app-preview .home-player-id{
    flex:0 0 auto!important;
    max-width:none!important;
    margin-left:auto!important;
  }
  html.q130-app-preview .home-player-id-mobile{
    white-space:nowrap!important;
    font-size:12px!important;
    padding:8px 9px!important;
  }

  /* Chip delle sezioni: swipe/drag reale, indicazione visiva che continuano a destra. */
  .q130-section-nav{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    touch-action:pan-x!important;
    cursor:grab;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 91%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 91%,transparent 100%);
  }
  .q130-section-nav.q130-dragging{cursor:grabbing;scroll-snap-type:none!important}
  .q130-section-nav a{user-select:none;-webkit-user-select:none}

  /* Menu completo senza scroll su schermi piccoli: stesso contenuto, densità più compatta. */
  .q130-app-sheet.q130-menu-sheet{
    top:max(8px,env(safe-area-inset-top,0px));
    bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 5px);
    max-height:none!important;
    overflow:hidden!important;
    padding:10px 12px 9px!important;
    border-radius:22px;
  }
  .q130-menu-sheet .q130-sheet-handle{margin-bottom:6px;height:3px}
  .q130-menu-sheet .q130-sheet-title{font-size:16px;margin:0 0 7px;padding-right:38px}
  .q130-menu-sheet .q130-sheet-close{width:31px;height:31px;top:8px;right:9px;font-size:18px}
  .q130-menu-sheet .q130-sheet-group{margin-top:7px}
  .q130-menu-sheet .q130-sheet-group h3{font-size:9px;margin:0 0 4px;letter-spacing:.075em}
  .q130-menu-sheet .q130-sheet-grid{gap:5px 7px}
  .q130-menu-sheet .q130-sheet-link{
    min-height:39px!important;
    padding:5px 9px!important;
    border-radius:13px!important;
    gap:7px!important;
    font-size:11.5px!important;
  }
  .q130-menu-sheet .q130-sheet-link span:first-child{font-size:16px}

  /* Navigazione rapida delle fasi torneo, sempre a portata di pollice. */
  .q130-tournament-tabs{
    position:fixed;
    z-index:8995;
    left:8px;right:8px;
    bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 7px);
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:6px;
    border:1px solid rgba(255,214,90,.22);
    border-radius:16px;
    background:rgba(5,28,19,.95);
    box-shadow:0 8px 24px rgba(0,0,0,.32);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .q130-tournament-tabs::-webkit-scrollbar{display:none}
  .q130-tournament-tabs a{
    flex:0 0 auto;
    padding:7px 10px;
    border-radius:11px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    color:#f5e8c6;
    text-decoration:none;
    font:800 10.5px/1 system-ui,-apple-system,sans-serif;
    white-space:nowrap;
  }
  html.q130-app-preview:has(.q130-tournament-tabs) body{
    padding-bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 58px)!important;
  }

  /* Torna in cima: compare solo dopo un po' di scroll e non copre la bottom bar. */
  .q130-back-top{
    position:fixed;
    z-index:8996;
    right:12px;
    bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 14px);
    width:42px;height:42px;
    border-radius:50%;
    border:1px solid rgba(255,214,90,.35);
    background:rgba(7,36,25,.95);
    color:#ffd65a;
    box-shadow:0 8px 24px rgba(0,0,0,.34);
    display:grid;
    place-items:center;
    font:900 23px/1 system-ui;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity .15s ease,transform .15s ease;
  }
  .q130-back-top.show{opacity:1;transform:none;pointer-events:auto}
  html.q130-app-preview:has(.q130-tournament-tabs) .q130-back-top{
    bottom:calc(var(--q130-bar-h) + var(--q130-safe-bottom) + 62px);
  }
}

@media (max-width:390px) and (max-height:700px){
  .q130-menu-sheet .q130-sheet-link{
    min-height:36px!important;
    padding:4px 8px!important;
    font-size:11px!important;
  }
  .q130-menu-sheet .q130-sheet-group{margin-top:5px}
  .q130-menu-sheet .q130-sheet-group h3{margin-bottom:3px}
}

@media (max-width:820px){
  html.q130-game-screen .q130-back-top,
  html.q130-game-screen .q130-tournament-tabs{display:none!important}
}


/* Q130f - header, menu ed evidenziazione torneo */
@media (max-width:820px){
  /* L'ID non deve mai entrare sopra CIRULLA GENOVA. */
  html.q130-app-preview .royal-brand-with-avatar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:7px!important;
    width:100%!important;
  }
  html.q130-app-preview .royal-brand{
    display:block!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    font-size:clamp(22px,7.25vw,28px)!important;
    letter-spacing:.015em!important;
  }
  html.q130-app-preview .home-player-id{
    position:static!important;
    transform:none!important;
    margin:0!important;
    justify-self:end!important;
    align-self:center!important;
    z-index:2!important;
  }
  html.q130-app-preview .home-player-id-mobile{
    display:inline-flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    font-size:11px!important;
    padding:7px 8px!important;
  }

  /* Menu generale: tessere un po' più grandi, restando dentro l'iPhone SE. */
  .q130-menu-sheet .q130-sheet-link{
    min-height:46px!important;
    padding:7px 11px!important;
    font-size:12.5px!important;
    font-weight:800!important;
  }
  .q130-menu-sheet .q130-sheet-link span:first-child{
    font-size:18px!important;
  }
  .q130-menu-sheet .q130-sheet-close{
    width:35px!important;
    height:35px!important;
    background:#b64236!important;
    color:#fff4dc!important;
    border:1px solid rgba(255,214,90,.45)!important;
    box-shadow:0 5px 14px rgba(0,0,0,.25)!important;
    font-weight:900!important;
  }
  .q130-menu-sheet .q130-sheet-close:active{
    transform:scale(.94);
  }
  .q130-menu-sheet .q130-sheet-logout{
    color:#ffe5dc!important;
    background:rgba(182,66,54,.22)!important;
    border-color:rgba(231,105,90,.55)!important;
  }
  .q130-menu-sheet .q130-sheet-logout span:first-child{
    color:#ff8f7f!important;
  }
}

/* Anche su desktop, quando il browser porta la partita umana in vista,
   lascia sempre spazio sopra al badge "LA TUA PARTITA". */
html{
  scroll-padding-top:72px;
}
.tournament-page .human-match,
.tournament-page .bracket-match.human,
.tournament-page .bracket-match.human-match{
  scroll-margin-top:84px!important;
}