:root{
  --panel: rgba(8,14,28,.62);
  --panel2: rgba(8,14,28,.48);
  --stroke: rgba(255,255,255,.16);
  --stroke2: rgba(0,190,255,.22);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --accent: rgba(0,190,255,.95);
  --warn: rgba(255,210,102,.95);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  overflow:hidden;
  background:#050a16;
}

/* quando il setup è aperto sfoca il board e disabilita i click */
body.setup-open .canvas{
  filter:blur(4px) brightness(.7);
  pointer-events:none;
}
body.setup-open #bg{opacity:0.35;}

/* BACKGROUND LAYER (robusto online) */
#bg{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:0;
  pointer-events:none;

  background:
    /* mettiamo prima l'immagine per tenerla sopra i gradienti */
    url("./assets/bg_2.png") center/cover no-repeat,
    radial-gradient(circle at 60% 45%, rgba(0,190,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(5,10,22,0.92), rgba(2,4,12,0.92));

  filter:saturate(1.05);
}

#bg::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(circle at 60% 45%,
      rgba(255,255,255,.10) 0 2px,
      transparent 3px
    ) 0 0/14px 14px;
  opacity:.10;
  pointer-events:none;
}

.canvas{
  position:relative;
  z-index:1;

  width:100vw;
  height:100vh;

  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.topbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2% 2.0%;
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(90deg, rgba(0,150,255,.22), rgba(0,0,0,0));
}

.title{display:flex;align-items:center;gap:1.6%;min-width:0}

.classNo{
  font-size:clamp(42px,3.9vw,70px);
  font-weight:900;
  line-height:0.9;
  display:flex;
  align-items:center;
  margin-top:6px;
}

.title>div:nth-child(2){
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  margin-top:4px;
  min-width:0;
}

.className{
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.05;
}

.subtitle{
  margin-top:2px;
  font-size:clamp(13px,1.1vw,18px);
  color:var(--muted);
  font-weight:750
}

.badges{display:flex;gap:10px;align-items:center;flex-shrink:0}

.badge{
  padding:12px 16px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:rgba(0,0,0,.20);
  font-size:clamp(14px,1.25vw,20px);
  color:var(--muted);
  font-weight:950;
}

.badge.live{border-color:var(--stroke2);color:var(--accent)}
.badge.official{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}

.led{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:8px;
  background:rgba(0,0,0,.25);
  box-shadow:none;
  vertical-align:middle;
}

.badge.live .led{
  background:rgba(80,255,140,.95);
  box-shadow:0 0 10px rgba(80,255,140,.55), 0 0 20px rgba(80,255,140,.35);
  animation:ledBlink 1s infinite;
}

@keyframes ledBlink{
  0%,45%{opacity:1}
  46%,100%{opacity:.25}
}

.main{flex:1 1 0;min-height:0;padding:1% 2% 1% 2%}

.bottomStats{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1%;
  padding:0.6% 1.2% 1.2% 1.2%
}

.stat{
  border:1px solid var(--stroke);
  background:var(--panel);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  aspect-ratio:1/1;
  backdrop-filter:blur(6px);
}

.stat .label{
  font-size:clamp(13px,1.05vw,16px);
  color:var(--muted);
  font-weight:900;
  text-align:center
}

.stat .value{
  font-size:clamp(22px,2vw,34px);
  font-weight:950;
  text-align:center;
  line-height:1.1
}

.panel{
  border:1px solid var(--stroke);
  background:var(--panel);
  border-radius:12px;
  overflow:hidden;
  min-height:0;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column
}

.panelHeader{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:clamp(6px,1vh,12px) 14px;
  border-bottom:1px solid var(--stroke);
  font-weight:950;
  font-size:clamp(14px,1.2vw,17px);
  background:linear-gradient(90deg, rgba(0,190,255,.16), rgba(0,0,0,0));
  color:rgba(255,255,255,.86)
}

.clearRoundTag{
  margin-left:auto;
  font-size:clamp(11px,1vw,15px);
  color:var(--muted);
  font-weight:800;
  letter-spacing:.3px;
  white-space:nowrap;
}

.rows{flex:1 1 0;min-height:0;overflow:hidden}

.row{
  display:grid;
  grid-template-columns:80px 54px 1fr 150px 110px;
  gap:clamp(6px,1vw,14px);
  align-items:center;
  padding:clamp(6px,1.2vh,14px) clamp(10px,1.2vw,18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.08);
}

.row:nth-child(2n){background:rgba(0,0,0,.12)}

.row.last{
  background:linear-gradient(90deg, rgba(255,220,120,.62), rgba(0,0,0,.18));
  outline:1px solid rgba(255,220,120,.65);
  position:relative;
}

.row.last::before{
  content:"LAST";
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  font-size:12px;
  letter-spacing:1.6px;
  font-weight:900;
  color:rgba(0,0,0,.55);
  background:rgba(255,220,120,.95);
  padding:4px 8px;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.30);
}

/* Prize rows (FISE andanti a premio – national only) */
.row.prize .pos{color:rgba(255,210,80,.95)}
.row.prizeLast{border-bottom:2.5px solid rgba(255,200,60,.55)}

.prizeTag{
  font-size:clamp(11px,1vw,15px);
  color:rgba(255,210,80,.85);
  font-weight:800;
  letter-spacing:.3px
}

.rowSlideIn{
  animation:rowSlideIn 1.4s cubic-bezier(.25,.85,.2,1) forwards;
}

@keyframes rowSlideIn{
  from{opacity:0;transform:translateX(32px);}
  to{opacity:1;transform:translateX(0);}
}

.pos{font-weight:950;text-align:right;font-size:clamp(18px,1.6vw,28px)}

.flag{
  width:40px;
  height:28px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 0 8px rgba(0,0,0,.38);
}

.flag img{width:100%;height:100%;display:block}

.name{min-width:0}

.riderLine{
  font-weight:900;
  font-size:clamp(16px,1.5vw,24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.1
}

.horseLine{
  font-size:clamp(14px,1.25vw,20px);
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
  font-weight:750
}

.score,.time{text-align:right;font-weight:950;font-size:clamp(16px,1.6vw,26px)}
.score{text-align:right;font-weight:950;font-size:clamp(16px,1.6vw,26px)}
.small{font-size:clamp(12px,1.05vw,15px);color:var(--muted);font-weight:850}

.gridLive{
  height:100%;
  display:grid;
  grid-template-columns:62% 38%;
  grid-template-rows:minmax(0,1fr);
  gap:1.6%;
  min-height:0
}

.right{height:100%;display:flex;flex-direction:column;gap:0.6%;min-height:0;overflow:hidden}

.box{
  border:1px solid var(--stroke);
  background:var(--panel2);
  border-radius:12px;
  overflow:hidden;
  backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column
}

.boxHeader{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(4px,1vh,12px) 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:950;
  font-size:clamp(12px,1.1vw,16px);
  background:linear-gradient(90deg, rgba(0,190,255,.10), rgba(0,0,0,0))
}

.boxBody{padding:clamp(4px,1vh,12px) clamp(8px,1vw,14px);flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}

.bigLine{
  font-weight:950;
  font-size:clamp(17px,1.6vw,24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.midLine{
  margin-top:2px;
  font-weight:800;
  color:rgba(255,255,255,.86);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(12px,1.35vw,20px)
}

.kv{margin-top:clamp(2px,1vh,12px);display:flex;justify-content:space-between;font-weight:950}
.kv3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 10px;align-items:flex-start}
.sideBox{flex:1 1 0;min-height:0;container-type:size;}
.sideBox .bigLine{font-size:clamp(15px,min(1.95vw,14cqh),30px);}
.sideBox .midLine{font-size:clamp(13px,min(1.6vw,12cqh),24px);}
.sideBox .kv{margin-top:clamp(2px,min(1vh,4cqh),12px);}
.sideBox .kv .small{font-size:clamp(11px,min(1.2vw,9cqh),17px);}
.sideBox .kv span:not(.small){font-size:clamp(13px,min(1.6vw,12cqh),24px);font-weight:950;}

.currentBox{flex:1.8 1 0;min-height:0;container-type:size;}
.currentBox .bigLine{font-size:clamp(17px,min(2.1vw,10cqh),34px);}
.currentBox .midLine{font-size:clamp(14px,min(1.95vw,8cqh),27px);}
.currentBox .kv{margin-top:clamp(4px,min(1.2vh,4cqh),16px);}
.currentKv{display:flex;flex-direction:column;gap:clamp(2px,0.8vh,10px);}
.currentKv .metric{display:flex;align-items:baseline;gap:10px;}
.currentLabel{font-size:clamp(17px,min(2.1vw,10cqh),34px);font-weight:950;letter-spacing:.2px;line-height:1;}
.currentBox .livePenalty,
.currentBox .liveState{font-size:clamp(17px,min(2.1vw,10cqh),34px);font-weight:950;line-height:1.05;}

#currentRank{color:#ffb347;}

#nextRider.lastOnCourse{
  color:var(--warn);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  text-align:center;
  width:100%;
  letter-spacing:.4px;
  line-height:1.1;
}

/* Expanded NEXT box (when no chronometer) */
.nextBox.expanded{flex:2.8 1 0;}
.nextList{
  padding:0 clamp(8px,1vw,14px) clamp(6px,1vh,10px);
  overflow-y:auto;
  flex:1 1 0;
  min-height:0;
}
.nextList .nextEntry{
  display:grid;
  grid-template-columns:32px 40px 1fr;
  gap:8px;
  align-items:center;
  padding:clamp(4px,0.6vh,8px) 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nextEntry .nextPos{font-weight:950;text-align:right;font-size:clamp(14px,1.2vw,20px);color:rgba(255,255,255,.6)}
.nextEntry .flag{width:36px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.2);overflow:hidden}
.nextEntry .flag img{width:100%;height:100%;display:block}
.nextEntry .nextInfo{min-width:0}
.nextEntry .nextRiderName{font-weight:950;font-size:clamp(15px,1.4vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextEntry .nextHorseName{font-weight:800;font-size:clamp(13px,1.2vw,18px);color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gridFinal{height:100%;display:flex;flex-direction:column}
.column{height:100%}

/* flag icons in LAST/NEXT */
.flagIcon{
  width:clamp(24px,3vw,40px);
  height:clamp(16px,2vw,28px);
  border-radius:4px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  object-fit:cover;
  margin-right:clamp(4px,0.6vw,12px);
  flex:0 0 auto;
  box-shadow:0 0 8px rgba(0,0,0,.38);
}

.bigLine{display:flex;align-items:center;min-width:0}
.bigLine span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bib{margin-left:10px;font-size:12px;color:var(--muted);font-weight:900;flex:0 0 auto}

.livePenalty.penalty-nonzero{color:#ffb347}
.livePenalty.penalty-flag{color:#ff6b6b;font-weight:950}
.liveState{font-weight:900}
.state-running{color:#5be37d}
.state-finished{color:#7dd0ff}
.state-idle{color:var(--muted)}
.state-countdown{color:#ffa500}

/* stats under NEXT */
.rightStats{flex:0 0 auto;margin-top:clamp(2px,0.5vh,6px);display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(4px,0.8vh,10px)}

.statMini{
  border:1px solid var(--stroke);
  background:var(--panel);
  border-radius:14px;
  padding:clamp(8px,1.2vh,14px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(2px,0.5vh,6px);
  backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
}

.statMini .label{
  font-size:clamp(11px,1.15vw,18px);
  color:rgba(255,255,255,.82);
  font-weight:900;
  letter-spacing:.25px;
  text-align:center
}

.statMini .value{
  font-size:clamp(16px,2.1vw,36px);
  font-weight:950;
  text-align:center;
  line-height:1.1
}

#statEta{
  font-size:clamp(16px,2.1vw,36px);
  line-height:1.2;
  word-break:break-word;
  white-space:normal;
}

.etaPending{
  animation: etaDots 1.2s infinite steps(3,end);
}

@keyframes etaDots{
  0%{opacity:0.4;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-1px)}
  100%{opacity:0.4;transform:translateY(0)}
}

.statMini.total{--p:0%;padding-bottom:clamp(22px,2.5vh,30px)}

.statMini.total::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:
    linear-gradient(90deg, rgba(0,190,255,.75), rgba(0,220,255,.85)) 0 0/var(--p) 100% no-repeat,
    rgba(255,255,255,.06);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}

/* final results: single panel, two columns with only a small gap */
.finalPanel{height:100%}
.finalTwoCols{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.finalTwoCols .rows{height:100%;overflow:hidden}
.finalTwoCols .divider{display:none}

/* setup */
.setup{
  position:fixed;
  top:0;left:0;right:0;bottom:0;  /* compatibile con browser TV (no inset) */
  z-index:999999;                  /* valore sicuro per tutti i browser */
  background:#000000;              /* fallback solido */
  background:rgba(0,0,0,.88);     /* più opaco: compensa assenza backdrop-filter */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  pointer-events:auto;       /* assicura click/input */
  opacity:1;
  transition:opacity .18s ease;
}

.setup.hidden{
  opacity:0;
  pointer-events:none;
}

.setupCard{
  position:relative;
  width:760px;
  max-width:96vw;            /* fallback compatibile (no min()) */
  border:1px solid rgba(255,255,255,.16);
  border:1px solid var(--stroke);
  background:#0a1020;        /* fallback solido per browser senza rgba */
  background:rgba(8,14,28,.94);
  border-radius:14px;
  padding:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  color:#eee;                /* fallback colore testo */
  color:var(--text);
}

.setupCard h2{margin:0 0 10px 0;font-size:18px;color:#eee}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

label{font-size:12px;color:#aab;color:var(--muted);font-weight:900;display:block;margin-bottom:6px}

input,select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:#0d1424;             /* fallback solido */
  background:rgba(0,0,0,.25);
  color:#eee;                     /* fallback colore testo */
  color:var(--text)
}

.controls{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

button{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,190,255,.30);
  background:#0a2a40;             /* fallback solido */
  background:rgba(0,190,255,.18);
  color:#eee;                     /* fallback */
  color:rgba(255,255,255,.92);
  font-weight:950;
  cursor:pointer
}

button.secondary{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.10)}
.hint{margin-top:8px;font-size:12px;color:var(--muted)}

.arenaRow{display:flex;gap:10px;align-items:center}
.arenaRow.desktopOnly{display:flex}
.smallBtn{padding:10px 14px;font-weight:950;white-space:nowrap}
.mobileOnly{display:none}
.testieraMobile{display:none}
.mobileManual{display:none}
.mobileAdvanced{/* visibile su desktop */}
.desktopOnly{display:block}
.arenaButtons{display:none}
.hintMini{margin-top:8px;font-size:12px;color:rgba(255,255,255,.72)}

.inlineInput{
  display:inline-block;
  vertical-align:middle;
  width:240px;
  margin-left:6px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);
  color:var(--text)
}

.setupStatus{
  margin-left:auto;
  font-size:12px;
  color:#ccc;
  color:rgba(255,255,255,.78);
  font-weight:900
}

/* floating button to riaprire il setup */
.setupToggle{
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.20);
  color:var(--muted);
  font-weight:950;
  font-size:clamp(14px,1.25vw,20px);
  padding:12px 16px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:none;
  transition:border-color .2s, color .2s, background .2s;
}
.setupToggle:hover{
  border-color:var(--stroke2);
  color:var(--accent);
  background:rgba(0,190,255,.12);
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  body{
    overflow:auto;
  }
  .canvas {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .topbar {
    height: auto;
    padding: 12px 14px 10px 14px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .title {
    flex: 1 1 100%;
    min-width: 0;
  }

  .classNo {
    font-size: 28px;
  }

  .className {
    font-size: 16px;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }

  .subtitle {
    font-size: 11px;
    opacity: .9;
  }

  .badges {
    display: none;
  }

  .main {
    height: auto;
    padding: 8px 10px 12px 10px;
    overflow: visible;
    flex: 1;
  }

  .gridLive {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    min-height: 0;
  }

  /* order on mobile: LAST, CURRENT, NEXT, stats */
  .right { order: 1; width: 100%; height: auto; flex-direction: column; gap: 10px; overflow: visible; }
  .lastBox{order:1;}
  .currentBox{order:2;}
  .nextBox{order:3;}
  .panel { order: 2; width: 100%; min-height: 200px; background: rgba(8,14,28,.82); }
  .rightStats { order: 3; margin-top: 6px; }

  .gridLive .panel { height: auto; min-height: 220px; }
  .gridLive .rows {
    flex: 0 1 auto;
    max-height: calc(10 * 52px);
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* final ranking mobile: single column, scrollable */
  .gridFinal { height: auto; }
  .finalPanel { height: auto; }
  .finalTwoCols {
    grid-template-columns: 1fr;
    gap: 0;
    flex: 0 1 auto;
    min-height: auto;
  }
  .finalTwoCols .rows {
    height: auto;
    max-height: calc(10 * 52px);
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #rowsFinalRight { display: none; }

  /* boxes: non tagliare il contenuto */
  .box { width: 100%; min-height: auto; overflow: visible; }
  .sideBox, .currentBox { flex: 0 0 auto; min-height: auto; container-type: normal; }
  .boxBody { flex: 0 0 auto; overflow: visible; }

  /* expanded next box mobile */
  .nextBox.expanded { flex: 0 0 auto; }
  .nextList { flex: 0 1 auto; min-height: auto; max-height: 300px; overflow: hidden auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .nextEntry { grid-template-columns: 28px 28px 1fr !important; gap: 6px !important; }
  .nextEntry .flag { width: 26px; height: 18px; }
  .nextEntry .nextRiderName { font-size: 14px; }
  .nextEntry .nextHorseName { font-size: 12px; }

  .rightStats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    margin-top: 1.2%;
  }

  .panelHeader, .boxHeader {
    padding: 12px 14px;
    font-size: 14px;
  }

  .badge {
    font-size: 12px;
    padding: 8px 12px;
  }
  /* badges nascosti su mobile (led, clock, setup) */

  .layoutRow { display: none; }

  .row {
    grid-template-columns: 28px 28px 1fr auto auto;
    gap: 6px;
    padding: 8px 10px;
  }

  .row .flag { width: 26px; height: 18px; border-radius: 3px; }

  .row.last::before{
    display:block;
    font-size:9px;
    padding:2px 4px;
    left:2px;
  }

  .pos {
    font-size: 15px;
    text-align: center;
  }

  .flagIcon {
    width: 28px;
    height: 20px;
    margin-right: 6px;
  }

  .panelHeader {
    margin-top: 6px;
  }

  .riderLine{ font-size: 14px; }
  .horseLine{ font-size: 12px; }
  .testieraMobile { display: inline; font-size: 12px; color: var(--muted); font-weight: 700; }
  .riderLine .small { display: none; }

  .row .score { text-align: right; font-size: 14px; }
  .row .score .small { display: none; }
  .row .time { font-size: 13px; text-align: right; min-width: 50px; }

  .statMini {
    aspect-ratio: auto;
    padding: 10px 10px 24px 10px;
    min-height: 80px;
  }


  .statMini .label {
    font-size: 11px;
  }

  .statMini .value {
    font-size: 18px;
  }

  .statMini.total::after {
    bottom: 6px;
    height: 8px;
    left: 8px;
    right: 8px;
  }

  /* ---- SETUP PAGE MOBILE ---- */
  .setup {
    padding: 0;
    align-items: flex-start;
  }

  .setupCard {
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    border-radius: 0;
    padding: 20px 16px;
    box-shadow: none;
    border: none;
  }

  .mobileLogo {
    text-align: center;
    margin-bottom: 10px;
  }
  .mobileLogo img {
    height: 60px;
    width: auto;
    object-fit: contain;
  }

  .setupCard h2 {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .setup .grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .setup label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .setup input,
  .setup select {
    padding: 12px;
    font-size: 16px;
  }

  .mobileOnly{display:block;width:100%;text-align:center;margin-bottom:6px}
  .mobileManual{display:none;width:100%;padding:12px;text-align:center;margin-bottom:6px}
  .mobileManual.visible{display:block}
  .mobileAdvanced{/* nascosto di default su mobile, visibile solo flusso B */}
  .mobileAdvanced.hidden{display:none!important}
  .desktopOnly{display:none!important}

  /* Bottoni arena mobile */
  .arenaButtons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
  }
  .arenaButtons:empty{display:none}
  .arenaBtn{
    flex:1 1 calc(50% - 5px);
    min-width:120px;
    padding:14px 10px;
    font-size:15px;
    font-weight:700;
    text-align:center;
    border:2px solid rgba(255,255,255,.25);
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    transition:all .15s ease;
  }
  .arenaBtn:active{
    transform:scale(.96);
  }
  .arenaBtn.selected{
    border-color:#4CAF50;
    background:rgba(76,175,80,.25);
  }
  .arenaBtn .arenaLive{
    display:block;
    font-size:11px;
    color:#4CAF50;
    margin-top:2px;
  }

  .mobileStartBtn{
    width:100%;
    margin-top:14px;
    padding:14px;
    font-size:16px;
    font-weight:800;
    letter-spacing:.5px;
    color:#fff;
    background:rgba(0,190,255,.22);
    border:1.5px solid rgba(0,190,255,.4);
    border-radius:12px;
    cursor:pointer;
    transition:all .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mobileStartBtn:active{
    transform:scale(.97);
    background:rgba(0,190,255,.35);
  }

  .arenaRow {
    flex-direction: column;
    align-items: stretch;
  }

  .setup .controls {
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }

  .setup #startBtn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  .setupStatus {
    margin-left: 0;
    text-align: center;
    width: 100%;
    font-size: 13px;
  }
}

/* ---- MOBILE BOTTOM BAR ---- */
.mobileBottomBar{
  display:none;  /* hidden on desktop */
}

@media (max-width: 768px){
  .mobileBottomBar{
    display:flex;
    justify-content:center;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px)) 16px;
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(5,10,22,.65) 30%,
        rgba(5,10,22,.92) 100%);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .mobileBackBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:340px;
    padding:13px 24px;
    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;
    color:rgba(180,200,220,.85);
    background:rgba(255,255,255,.06);
    border:1.5px solid rgba(255,255,255,.14);
    border-radius:14px;
    cursor:pointer;
    transition:all .2s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .mobileBackBtn:active{
    transform:scale(.96);
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.25);
  }
}