/* MathGuru — layout.css */
/* Impianto della pagina, testata, icone e quadranti HUD */

/* ---------- impianto ---------- */
#app{position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;
  padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
  gap:8px;max-width:1180px;margin:0 auto}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{font-family:var(--fd);font-weight:900;font-size:clamp(17px,4.6vw,26px);letter-spacing:.14em;
  background:linear-gradient(92deg,var(--ion),#fff 32%,var(--plasma) 62%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:shine 7s linear infinite;white-space:nowrap}
@keyframes shine{to{background-position:220% 0}}
.brand small{display:block;font-family:var(--fb);font-weight:500;font-size:9px;letter-spacing:.34em;
  color:var(--dim);-webkit-text-fill-color:var(--dim);margin-top:-2px}
.icons{display:flex;gap:6px}
.icb{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
  display:grid;place-items:center;font-size:14px;transition:.2s}
.icb:hover{border-color:var(--ion);color:var(--ion);transform:translateY(-1px)}
.icb.off{opacity:.4}
/* altoparlante: onde visibili se acceso, barra obliqua se spento */
.icb.spk svg{width:18px;height:18px}
.icb.spk{color:var(--lime);border-color:rgba(139,255,63,.5);box-shadow:0 0 14px rgba(139,255,63,.25)}
.icb.spk .slash{opacity:0;transition:opacity .18s}
.icb.spk .w1,.icb.spk .w2{transition:opacity .18s}
.icb.spk.mute{color:var(--dim);border-color:var(--line);box-shadow:none}
.icb.spk.mute .w1,.icb.spk.mute .w2{opacity:0}
.icb.spk.mute .slash{opacity:1}
.splash-spk{width:46px;height:46px;border-radius:14px;margin:0 auto 16px}
.splash-spk svg{width:22px;height:22px}
/* riserva di tempo: cronometro che si incrementa, spendibile in un colpo solo */
.icb.bank{width:auto;padding:0 10px;gap:6px;display:flex;align-items:center;
  font-family:var(--fd);font-weight:900;font-size:12px;font-variant-numeric:tabular-nums}
.icb.bank svg{width:17px;height:17px;flex-shrink:0}
.icb.bank[disabled]{opacity:.32;cursor:default}
.icb.bank[disabled]:hover{transform:none;border-color:var(--line);color:inherit}
.icb.bank.full{border-color:var(--lime);color:var(--lime);
  box-shadow:0 0 16px rgba(139,255,63,.32);animation:bankPulse 1.7s ease-in-out infinite}
@keyframes bankPulse{50%{box-shadow:0 0 28px rgba(139,255,63,.7)}}
.icb.bank.charge{animation:charge .5s ease}
@keyframes charge{0%{transform:none}30%{transform:scale(1.24);color:#fff;border-color:#fff}100%{transform:none}}

/* ---------- quadranti HUD ---------- */
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gauge{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;
  position:relative;overflow:hidden;backdrop-filter:blur(9px)}
.gauge::after{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.k{font-size:9px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.v{font-family:var(--fd);font-weight:900;font-size:clamp(18px,5.2vw,28px);line-height:1.1;
  font-variant-numeric:tabular-nums}
.v.ion{color:var(--ion);text-shadow:0 0 16px rgba(34,230,255,.55)}
.v.gold{color:var(--gold);text-shadow:0 0 16px rgba(255,210,63,.5)}
.v.lv{color:var(--plasma);text-shadow:0 0 16px rgba(255,47,185,.55)}
.gauge .badge{position:absolute;top:6px;right:8px;font-family:var(--fd);font-weight:900;
  font-size:11px;padding:2px 6px;border-radius:99px;color:#1a0a2e;
  background:linear-gradient(120deg,#ffd23f,#ff2fb9);
  box-shadow:0 0 16px rgba(255,47,185,.6);animation:bankPulse 1.1s ease-in-out infinite}
.gauge .badge[hidden]{display:none}
.bar{height:4px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;width:0%;border-radius:99px;transition:width .35s cubic-bezier(.2,.9,.2,1)}
/* gauge obiettivo: sviluppo orizzontale, tutto su una riga */
.gauge.wide{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:6px 12px;flex-wrap:wrap}
.gauge.wide .k{white-space:nowrap;display:flex;align-items:center;gap:5px}
.gauge.wide .k b{font-family:var(--fd);font-weight:900;font-size:12px;letter-spacing:0;
  color:var(--ink);font-variant-numeric:tabular-nums}
.gauge.wide .bar{flex:1 1 80px;margin-top:0;height:5px;min-width:60px}
#targetBar i{background:linear-gradient(90deg,var(--violet),var(--plasma))}
#timeBar i{background:linear-gradient(90deg,var(--ion),var(--lime));transition:width .1s linear}
.gauge.panic{border-color:rgba(255,47,90,.85);animation:panic .9s steps(2,end) infinite}
.gauge.panic .v{color:#ff3b5c;text-shadow:0 0 22px rgba(255,59,92,.8)}
.gauge.panic #timeBar i{background:#ff3b5c}
@keyframes panic{50%{background:rgba(255,47,90,.22);box-shadow:0 0 26px rgba(255,47,90,.45)}}

/* lampeggio verde del cronometro a ogni guadagno di tempo */
.gauge.boost{animation:boost .62s ease}
@keyframes boost{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 2px var(--lime), 0 0 34px rgba(139,255,63,.55)}}