/* CSS Legacy 1.10.10 — Board + Overlay (compatibile Android 5+) */

/* ---- Board styles ---- */
.bsb-root{
  --bsb-gap: 18px;
  --bsb-radius: 16px;
  --bsb-surface: rgba(0,0,0,.18);
  --bsb-surface-2: rgba(0,0,0,.28);
  --bsb-surface-3: rgba(0,0,0,.2);
  --bsb-chip: rgba(255,255,255,.22);
  --bsb-key: rgba(255,255,255,.12);
  --bsb-text: #fff;
  --bsb-accent: #ff2f70;
  --bsb-brandbar-max: 560px;
}

.bsb-wrap{width:100%;}

.bsb-root{
  width:100%;
  background:transparent;
  padding:18px;
  border-radius:20px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  /* Fallback font-family per browser vecchi */
  font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.bsb-header-3{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  gap:18px;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

/* Grid fallback - usiamo flexbox dove possibile */
@supports (display: grid) {
  .bsb-header-3{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:18px;
    gap:var(--bsb-gap, 18px);
  }
}

.bsb-name{
  min-width:0;
  font-weight:800;
  font-size:20px;
  color:#fff;
  color:var(--bsb-text, #fff);
  padding:14px 16px;
  border-radius:24px;
  background:-webkit-linear-gradient(top, rgba(255,255,255,.18), rgba(255,255,255,.10));
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.18);
  -webkit-box-shadow:0 10px 30px rgba(0,0,0,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  text-align:center;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  gap:10px;
}

.bsb-name .row{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:8px;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
}

.bsb-setbtn{
  font-size:12px;
  font-weight:900;
  padding:8px 14px; /* Area touch più grande */
  min-width:44px; /* Minimo 44px per accessibilità touch */
  min-height:44px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  background:rgba(0,0,0,.35);
  color:#fff;
  /* Touch ottimizzato */
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.bsb-sets{
  font-weight:900;
  background:rgba(255,255,255,.22);
  padding:6px 10px;
  border-radius:999px;
  min-width:34px;
  text-align:center;
}

.bsb-newholder{
  min-width:0;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  gap:10px;
}

.bsb-actions{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:10px;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.bsb-game-actions{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:10px;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.bsb-btn-newmatch{
  background:#ff2f70;
  background:var(--bsb-accent, #ff2f70);
  color:#fff;
  border:none;
  border-radius:16px;
  padding:14px 20px; /* Area touch più grande */
  min-height:48px;
  font-weight:900;
  letter-spacing:.2px;
  -webkit-box-shadow:0 12px 28px rgba(255,47,112,.35);
  box-shadow:0 12px 28px rgba(255,47,112,.35);
  /* Touch ottimizzato */
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-btn-endset{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;
  padding:14px 20px; /* Area touch più grande */
  min-height:48px;
  font-weight:900;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-btn-fs{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:12px 16px; /* Area touch più grande */
  min-height:44px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-btn-reset-scores{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:12px 16px; /* Area touch più grande */
  min-height:44px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-offline-flag{
  margin-left:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#a33;
  color:#fff;
  font-weight:800;
  font-size:12px;
  -webkit-box-shadow:0 6px 18px rgba(163,51,51,.35);
  box-shadow:0 6px 18px rgba(163,51,51,.35);
  display:none;
}

.bsb-root[data-offline="1"] .bsb-offline-flag{display:inline-block;}

.bsb-brandbar--split{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:560px;
  max-width:var(--bsb-brandbar-max, 560px);
  margin:12px auto 6px;
  position:relative;
}

@supports (display: grid) {
  .bsb-brandbar--split{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

.bsb-brandbar--split::before{
  content:'';
  position:absolute;
  top:4px;
  bottom:4px;
  left:50%;
  width:1px;
  background:rgba(255,255,255,.9);
}

.bsb-brand-left{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:start;
  -webkit-justify-content:flex-start;
  -ms-flex-pack:start;
  justify-content:flex-start;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.15);
  min-height:46px;
}

.bsb-brand-right{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-align:end;
  -webkit-align-items:flex-end;
  -ms-flex-align:end;
  align-items:flex-end;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  gap:4px;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.15);
  min-height:46px;
}

.bsb-brand-logo{max-height:38px; width:auto; display:block;}
.bsb-dev-logo{max-height:28px; width:auto; display:block;}
.bsb-dev-text{font-weight:800; opacity:.95;}

.bsb-scores{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:18px;
  gap:var(--bsb-gap, 18px);
  margin-top:18px;
  margin-top:var(--bsb-gap, 18px);
}

@supports (display: grid) {
  .bsb-scores{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.bsb-scores > *{
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
}

.bsb-score{
  position:relative;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  height:120px; /* Fallback fisso */
  background:rgba(0,0,0,.28);
  background:var(--bsb-surface-2, rgba(0,0,0,.28));
  border-radius:24px;
  padding:10px;
}

/* clamp fallback */
@media (min-width: 500px) {
  .bsb-score { height: 180px; }
}
@media (min-width: 800px) {
  .bsb-score { height: 240px; }
}

.bsb-score span[class$='-score']{
  font-size:54px; /* Fallback fisso */
  line-height:1;
  font-weight:900;
}

@media (min-width: 500px) {
  .bsb-score span[class$='-score'] { font-size: 80px; }
}
@media (min-width: 800px) {
  .bsb-score span[class$='-score'] { font-size: 130px; }
}

.bsb-prev{
  position:absolute;
  left:10px;
  top:8px;
  font-size:13px;
  background:rgba(0,0,0,.35);
  padding:4px 8px;
  border-radius:999px;
}

.bsb-open-history-p1,
.bsb-open-history-p2{
  position:absolute;
  right:10px;
  bottom:8px;
  background:none;
  border:none;
  color:#fff;
  text-decoration:underline;
  font-weight:700;
  cursor:pointer;
  padding:8px 12px; /* Area touch più grande */
  min-width:44px;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}

@-webkit-keyframes bsb-blink { 0%,100% { opacity:1 } 50% { opacity:.2 } }
@keyframes bsb-blink { 0%,100% { opacity:1 } 50% { opacity:.2 } }

.bsb-score .bsb-flash {
  -webkit-animation: bsb-blink .5s linear 5;
  animation: bsb-blink .5s linear 5;
}

.bsb-panels{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:18px;
  gap:var(--bsb-gap, 18px);
  margin-top:18px;
  margin-top:var(--bsb-gap, 18px);
}

@supports (display: grid) {
  .bsb-panels{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.bsb-panels > *{
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
}

.bsb-keypad{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  gap:12px;
  background:rgba(0,0,0,.2);
  background:var(--bsb-surface-3, rgba(0,0,0,.2));
  padding:12px;
  border-radius:16px;
}

@supports (display: grid) {
  .bsb-keypad{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(56px,1fr);
  }
}

/* Flexbox fallback: ogni tasto occupa ~30% */
.bsb-keypad > .bsb-key{
  -webkit-box-flex:0;
  -webkit-flex:0 0 calc(33.333% - 8px);
  -ms-flex:0 0 calc(33.333% - 8px);
  flex:0 0 calc(33.333% - 8px);
}

.bsb-key{
  display:block;
  min-height:64px; /* Più grande per touch */
  min-width:64px;
  font-size:28px;
  font-weight:800;
  padding:8px;
  background:rgba(255,255,255,.12);
  background:var(--bsb-key, rgba(255,255,255,.12));
  border:none;
  border-radius:12px;
  cursor:pointer;
  width:100%;
  /* Touch ottimizzato - CRITICO per Android 5 */
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  touch-action:manipulation;
  /* Feedback visivo per touch */
  -webkit-transition:background .1s, -webkit-transform .1s;
  transition:background .1s, transform .1s;
}

.bsb-key:active{
  background:rgba(255,255,255,.25);
  -webkit-transform:scale(0.95);
  -ms-transform:scale(0.95);
  transform:scale(0.95);
}

/* ---- MODALI ---- */
.bsb-hist-mask,
.bsb-name-mask,
.bsb-cfm-mask{
  position:fixed;
  /* Fallback per inset:0 */
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  -webkit-transition:opacity .2s;
  transition:opacity .2s;
  z-index:99998;
}

.bsb-hist-mask.open,
.bsb-name-mask.open,
.bsb-cfm-mask.open{
  opacity:1;
  pointer-events:auto;
}

.bsb-hist-modal,
.bsb-name-modal,
.bsb-cfm-modal{
  position:fixed;
  left:50%;
  top:50%;
  /* Fallback per transform */
  -webkit-transform:translate(-50%, -50%) scale(.92);
  -ms-transform:translate(-50%, -50%) scale(.92);
  transform:translate(-50%, -50%) scale(.92);
  background:rgba(0,0,0,.92);
  color:#fff;
  border-radius:16px;
  -webkit-box-shadow:0 20px 50px rgba(0,0,0,.6);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  padding:18px;
  /* Fallback per min() */
  width:96%;
  max-width:720px;
  opacity:0;
  pointer-events:none;
  -webkit-transition:opacity .2s, -webkit-transform .2s;
  transition:opacity .2s, transform .2s;
  z-index:99999;
}

.bsb-hist-modal.open,
.bsb-name-modal.open,
.bsb-cfm-modal.open{
  opacity:1;
  pointer-events:auto;
  -webkit-transform:translate(-50%, -50%) scale(1);
  -ms-transform:translate(-50%, -50%) scale(1);
  transform:translate(-50%, -50%) scale(1);
}

.bsb-hist-grid{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:12px;
  max-height:70vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

@supports (display: grid) {
  .bsb-hist-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

.bsb-hist-grid > *{
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
}

.bsb-hist-grid table{width:100%; border-collapse:collapse;}
.bsb-hist-grid th,
.bsb-hist-grid td{
  padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:14px;
  line-height:1.2;
}
.bsb-hist-grid .muted{opacity:.8; text-align:center;}

.bsb-hist-grid.solo-p1{
  display:block;
}
.bsb-hist-grid.solo-p2{
  display:block;
}
.bsb-hist-grid.solo-p1 .side-p2{display:none;}
.bsb-hist-grid.solo-p2 .side-p1{display:none;}

/* Pulsanti conferma con area touch adeguata */
.bsb-cfm-yes,
.bsb-cfm-no{
  min-width:80px;
  min-height:48px;
  padding:12px 20px;
  font-size:16px;
  font-weight:700;
  border-radius:12px;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-cfm-yes{
  background:rgba(255,255,255,.15);
  color:#fff;
}

.bsb-cfm-no{
  background:rgba(255,255,255,.15);
  color:#fff;
}

/* Input nome con area adeguata */
.bsb-name-input{
  width:100%;
  padding:14px 16px;
  font-size:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);
  color:#fff;
  -webkit-appearance:none;
  appearance:none;
}

.bsb-name-save,
.bsb-name-cancel{
  min-width:80px;
  min-height:48px;
  padding:12px 20px;
  font-size:16px;
  font-weight:700;
  border-radius:12px;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-name-save{
  background:rgba(255,255,255,.15);
  color:#fff;
}

.bsb-name-cancel{
  background:rgba(255,255,255,.15);
  color:#fff;
}

/* Chiudi storico */
.bsb-hist-close{
  min-width:60px;
  min-height:44px;
  padding:10px 16px;
  -webkit-tap-highlight-color:transparent;
}

/* ---- RESPONSIVE ---- */
@media (max-width:540px){
  .bsb-root{
    padding:20px 14px;
  }

  .bsb-header-3{
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
  }

  @supports (display: grid) {
    .bsb-header-3{
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      grid-template-areas:'btn btn' 'p1 p2';
    }
    .bsb-header-3 .bsb-p1-name{grid-area:p1;}
    .bsb-header-3 .bsb-p2-name{grid-area:p2;}
    .bsb-header-3 .bsb-newholder{grid-area:btn;}
  }

  .bsb-actions{
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
  }

  .bsb-btn-newmatch,
  .bsb-btn-endset{
    font-size:14px;
    padding:12px 16px;
  }

  .bsb-btn-fs,
  .bsb-btn-reset-scores{
    padding:10px 14px;
  }

  .bsb-brandbar--split{
    max-width:92vw;
  }
}

/* ---- Overlay v2 (logos affiancati e centro fisso) ---- */
.bsb-overlay.bsb-ovv2{
  --ov-logo-h: calc(var(--ov-h) * 0.48);   /* altezza logo */
  --ov-center-w: calc(var(--ov-h) * 2.4);  /* larghezza blocco loghi */
  height: var(--ov-h);
  color: var(--ov-tx);
  background: var(--ov-bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  overflow:hidden;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

.ov2-bar{
  display:grid;
  grid-template-columns: minmax(0,1fr) var(--ov-center-w) minmax(0,1fr);
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  width:100%;
  gap: clamp(10px, calc(var(--ov-h) * .22), 26px);
  padding: 0 clamp(8px, calc(var(--ov-h) * .18), 20px);
}

.ov2-side{
  display:grid;
  grid-auto-flow:column;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  gap: calc(var(--ov-h) * .18);
  min-width:0;
}

.ov2-left  { grid-template-columns:auto auto auto; justify-self:end; }
.ov2-right { grid-template-columns:auto auto auto; justify-self:start; }

.ov2-name{
  font-weight:800;
  font-size:calc(var(--ov-h) * .32);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:42vw;
}

.ov2-score{
  font-weight:900;
  font-size:calc(var(--ov-h) * .5);
  min-width:calc(var(--ov-h) * 1.5);
  height:calc(var(--ov-h) - 10px);
  padding:0 10px;
  border-radius:8px;
  background:rgba(0,0,0,.35);
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.ov2-left-score{ background:var(--ov-p1); }
.ov2-right-score{ background:var(--ov-p2); }

.ov2-sets .ov2-setbox{
  display:-webkit-inline-box;
  display:-webkit-inline-flex;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  min-width:calc(var(--ov-h) * .55);
  height:calc(var(--ov-h) * .55);
  font-weight:900;
  border-radius:6px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
}

.ov2-center{
  justify-self:center;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.ov2-logos{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:row;
  -ms-flex-direction:row;
  flex-direction:row;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  gap: calc(var(--ov-h) * .12);
  width: var(--ov-center-w);
  max-width: var(--ov-center-w);
}

.ov2-logo{
  height: var(--ov-logo-h) !important;
  max-height: var(--ov-logo-h) !important;
  width:auto !important;
  -webkit-box-flex:0 !important;
  -webkit-flex:0 0 auto !important;
  -ms-flex:0 0 auto !important;
  flex:0 0 auto !important;
}

.ov2-dot{
  font-size:calc(var(--ov-h) * .7);
  color:var(--ov-ac);
  line-height:1;
}

/* ===== Timer Modal (Legacy) ===== */
.bsb-timer-mask{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  -webkit-transition:opacity .2s;
  transition:opacity .2s;
  z-index:99998;
}

.bsb-timer-mask.open{
  opacity:1;
  pointer-events:auto;
}

.bsb-timer-modal{
  position:fixed;
  left:50%;
  top:50%;
  -webkit-transform:translate(-50%,-50%) scale(.92);
  -ms-transform:translate(-50%,-50%) scale(.92);
  transform:translate(-50%,-50%) scale(.92);
  opacity:0;
  pointer-events:none;
  -webkit-transition:opacity .2s, -webkit-transform .2s;
  transition:opacity .2s, transform .2s;
  z-index:99999;
  width:94%;
  max-width:420px;
  background:rgba(0,0,0,.92);
  color:#fff;
  border-radius:16px;
  -webkit-box-shadow:0 20px 50px rgba(0,0,0,.6);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  padding:16px;
}

.bsb-timer-modal.open{
  opacity:1;
  pointer-events:auto;
  -webkit-transform:translate(-50%,-50%) scale(1);
  -ms-transform:translate(-50%,-50%) scale(1);
  transform:translate(-50%,-50%) scale(1);
}

.bsb-timer-head{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  -ms-flex-pack:justify;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.bsb-timer-title{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.bsb-timer-close{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
  min-height:44px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-timer-display{
  font-size:48px;
  font-weight:900;
  letter-spacing:2px;
  text-align:center;
  padding:14px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  margin-bottom:12px;
}

@media (min-width: 400px) {
  .bsb-timer-display { font-size: 64px; }
}

.bsb-timer-actions{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  gap:10px;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.bsb-timer-actions button{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:12px;
  padding:12px 18px;
  min-height:48px;
  min-width:80px;
  font-weight:900;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}

.bsb-timer-actions button:active{
  background:rgba(255,255,255,.25);
}

.bsb-btn-timer{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:12px 16px;
  min-height:44px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}