/* MathGuru — console.css */
/* Plancia di calcolo: display incassato, totalizzatore e tasti arcade */

/* ══════════ PLANCIA ══════════
   Non un pannello di vetro con del testo dentro, ma un modulo di
   macchina: cornice con squadre agli angoli, filo luminoso sul
   bordo, display incassato e tasti che affondano davvero.      */
.console{
  position:relative;flex-shrink:0;
  padding:13px 12px 12px;
  border-radius:var(--r);
  background:
    linear-gradient(180deg, rgba(46,26,104,.5), rgba(10,5,30,.8)),
    var(--panel);
  border:1px solid rgba(150,125,255,.36);
  box-shadow:
    inset 0 -2px 0 rgba(255,255,255,.06),
    0 18px 44px rgba(0,0,0,.55),
    0 0 44px rgba(124,60,255,.13);
  backdrop-filter:blur(9px);
  display:flex;flex-direction:column;gap:11px;
}
.console::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ion),var(--plasma),transparent);
  opacity:.75;
}
/* squadre d'angolo: il marchio delle interfacce di macchina */
.console::after{
  content:"";position:absolute;inset:5px;pointer-events:none;opacity:.5;
  background:
    linear-gradient(var(--ion),var(--ion))       left   top    /13px 2px no-repeat,
    linear-gradient(var(--ion),var(--ion))       left   top    /2px 13px no-repeat,
    linear-gradient(var(--ion),var(--ion))       right  top    /13px 2px no-repeat,
    linear-gradient(var(--ion),var(--ion))       right  top    /2px 13px no-repeat,
    linear-gradient(var(--plasma),var(--plasma)) left   bottom /13px 2px no-repeat,
    linear-gradient(var(--plasma),var(--plasma)) left   bottom /2px 13px no-repeat,
    linear-gradient(var(--plasma),var(--plasma)) right  bottom /13px 2px no-repeat,
    linear-gradient(var(--plasma),var(--plasma)) right  bottom /2px 13px no-repeat;
}

/* ══════════ DISPLAY INCASSATO ══════════ */
.readout{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  min-height:54px;padding:9px 11px;border-radius:11px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    radial-gradient(120% 160% at 50% -30%, rgba(34,230,255,.14), transparent 62%),
    linear-gradient(180deg,#07021a,#0c0526);
  box-shadow:
    inset 0 3px 16px rgba(0,0,0,.92),
    inset 0 0 0 1px rgba(34,230,255,.22),
    0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .25s;
}
/* riflesso che attraversa lentamente il vetro */
.sheen{
  position:absolute;top:0;bottom:0;width:34%;pointer-events:none;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.06),transparent);
  animation:sheen 6s ease-in-out infinite;
}
@keyframes sheen{0%{left:-40%}55%{left:110%}100%{left:110%}}

/* cursore lampeggiante a riposo, freccia mentre si compone */
.readout::before{
  content:"\25B8";color:var(--ion);font-weight:700;font-size:13px;
  opacity:.85;flex-shrink:0;line-height:1;
}
.readout.idle::before{content:"\25AE";animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:.12}}

/* lo stato del calcolo tinge il vetro, non solo il testo */
.readout.ok{box-shadow:inset 0 3px 16px rgba(0,0,0,.92),
  inset 0 0 0 1px rgba(139,255,63,.5), 0 0 22px rgba(139,255,63,.2)}
.readout.err{box-shadow:inset 0 3px 16px rgba(0,0,0,.92),
  inset 0 0 0 1px rgba(255,59,92,.5), 0 0 22px rgba(255,59,92,.18)}

.expr{
  font-family:var(--fd);font-weight:900;
  font-size:clamp(17px,5vw,27px);letter-spacing:.06em;line-height:1.15;
  color:var(--ion);text-shadow:0 0 12px rgba(34,230,255,.6);
  word-break:break-all;
}
.expr .op{
  display:inline-block;margin:0 3px;padding:1px 6px;border-radius:6px;
  color:#170a02;background:linear-gradient(180deg,#ffe27a,var(--gold));
  text-shadow:none;box-shadow:0 0 14px rgba(255,210,63,.55);
}
.hint{color:var(--dim);font-size:clamp(10.5px,3vw,13px);letter-spacing:.02em;line-height:1.3}
.hint.warn{color:#ff5c7a;font-weight:700}

/* ── totalizzatore: il risultato ha la sua finestra ── */
.res{
  margin-left:auto;flex-shrink:0;
  font-family:var(--fd);font-weight:900;
  font-size:clamp(16px,4.6vw,26px);letter-spacing:.03em;
  padding:5px 11px;border-radius:9px;
  color:var(--lime);
  background:linear-gradient(180deg,rgba(139,255,63,.14),rgba(139,255,63,.05));
  border:1px solid rgba(139,255,63,.5);
  text-shadow:0 0 14px rgba(139,255,63,.65);
  box-shadow:0 0 20px rgba(139,255,63,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
.res:empty{display:none}
.res.bad{
  color:#ff5c7a;font-family:var(--fb);font-weight:700;letter-spacing:.05em;
  font-size:clamp(10.5px,3vw,14px);
  background:linear-gradient(180deg,rgba(255,59,92,.15),rgba(255,59,92,.05));
  border-color:rgba(255,59,92,.5);
  text-shadow:0 0 12px rgba(255,59,92,.5);
  box-shadow:0 0 18px rgba(255,59,92,.18);
}
.res.jack{
  color:#fff;
  background:linear-gradient(120deg,rgba(255,210,63,.32),rgba(255,47,185,.32));
  border-color:#fff;
  text-shadow:0 0 16px var(--gold), 0 0 34px var(--plasma);
  box-shadow:0 0 26px rgba(255,210,63,.5), inset 0 1px 0 rgba(255,255,255,.35);
  animation:selPulse .5s ease-in-out infinite alternate;
}

/* ══════════ STRISCIA DELLA SCELTA AUTOMATICA ══════════ */
.helpbar{
  position:relative;border-radius:10px;padding:8px 11px;
  font-size:clamp(11px,3.1vw,13.5px);letter-spacing:.02em;color:#dff8ff;
  background:linear-gradient(96deg,rgba(34,230,255,.2),rgba(124,60,255,.2));
  border:1px solid rgba(34,230,255,.55);
  box-shadow:0 0 22px rgba(34,230,255,.22);
  animation:helpIn .3s ease;
}
.helpbar[hidden]{display:none}
.helpbar b{font-family:var(--fd);font-weight:900;letter-spacing:.12em;color:var(--ion)}
@keyframes helpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ══════════ TASTIERA ══════════
   Tasti con spessore reale: uno zoccolo scuro sotto la superficie
   che si accorcia alla pressione, così il dito sente l'affondamento. */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.btn{
  position:relative;
  border-radius:12px;padding:13px 10px 14px;
  font-family:var(--fd);font-weight:900;font-size:13px;letter-spacing:.12em;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  box-shadow:0 4px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .1s, box-shadow .1s, border-color .18s, color .18s, background .18s;
}
.btn:active{transform:translateY(4px);
  box-shadow:0 0 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1)}
.btn::before{margin-right:7px;font-size:12px;opacity:.9}

/* tasto d'azione: tutta la larghezza, è il gesto principale */
.btn.go{
  grid-column:1/-1;
  padding:16px 12px 17px;font-size:15px;letter-spacing:.2em;
  color:#fff;border-color:transparent;
  background:linear-gradient(180deg,#b558ff,var(--violet) 42%,var(--plasma));
  box-shadow:0 5px 0 #5a1a9e, 0 10px 26px rgba(255,47,185,.34),
             inset 0 2px 0 rgba(255,255,255,.35);
}
.btn.go::before{content:"\25B6"}
.btn.go:active{transform:translateY(5px);
  box-shadow:0 0 0 #5a1a9e, 0 4px 12px rgba(255,47,185,.3),
             inset 0 2px 0 rgba(255,255,255,.25)}
.btn.go[disabled]{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--dim);border-color:var(--line);cursor:not-allowed;transform:none;
  box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.go[disabled]::before{opacity:.35}
.btn.go.ready{animation:ready 1.1s ease-in-out infinite}
@keyframes ready{
  50%{box-shadow:0 5px 0 #5a1a9e, 0 12px 40px rgba(255,47,185,.75),
      0 0 0 3px rgba(255,47,185,.22), inset 0 2px 0 rgba(255,255,255,.35)}
}
.btn.go.danger{
  background:linear-gradient(180deg,#ff7a6b,#ff3b5c 55%,#ff8a3b);
  box-shadow:0 5px 0 #8e1226, 0 10px 26px rgba(255,59,92,.4),
             inset 0 2px 0 rgba(255,255,255,.35);
  animation:none;
}
.btn.go.danger::before{content:"\26A0"}

/* tasti secondari: zoccolo colorato, si distinguono a colpo d'occhio */
.btn.ghost{color:#cdd6f7}
.btn.ghost:hover{color:#fff}
#btnClear{border-color:rgba(34,230,255,.42);
  box-shadow:0 4px 0 #0b3a52, inset 0 1px 0 rgba(255,255,255,.16)}
#btnClear::before{content:"\2715";color:var(--ion)}
#btnClear:hover{border-color:var(--ion);
  background:linear-gradient(180deg,rgba(34,230,255,.16),rgba(34,230,255,.05))}
#btnClear:active{box-shadow:0 0 0 #0b3a52, inset 0 1px 0 rgba(255,255,255,.1)}
#btnShuffle{border-color:rgba(255,210,63,.42);
  box-shadow:0 4px 0 #5c4406, inset 0 1px 0 rgba(255,255,255,.16)}
#btnShuffle::before{content:"\21C4";color:var(--gold)}
#btnShuffle:hover{border-color:var(--gold);
  background:linear-gradient(180deg,rgba(255,210,63,.16),rgba(255,210,63,.05))}
#btnShuffle:active{box-shadow:0 0 0 #5c4406, inset 0 1px 0 rgba(255,255,255,.1)}

/* ══════════ PUNTEGGIO VOLANTE ══════════ */
.pop-score{
  position:fixed;z-index:40;pointer-events:none;
  font-family:var(--fd);font-weight:900;font-size:clamp(24px,7vw,44px);
  color:var(--gold);text-shadow:0 0 26px rgba(255,210,63,.85);
  animation:rise 1.05s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes rise{
  from{transform:translate(-50%,0) scale(.6);opacity:0}
  25%{transform:translate(-50%,-16px) scale(1.12);opacity:1}
  100%{transform:translate(-50%,-90px) scale(.9);opacity:0}
}
.pop-score.time{color:var(--lime);text-shadow:0 0 24px rgba(139,255,63,.85);font-size:clamp(18px,5vw,30px)}
.pop-score.pen{color:#ff3b5c;text-shadow:0 0 24px rgba(255,59,92,.85);font-size:clamp(18px,5vw,30px)}
.pop-score.jack{color:#fff;text-shadow:0 0 26px var(--gold), 0 0 60px var(--plasma);font-size:clamp(30px,9vw,58px)}

@media (min-width:900px){ .btn{font-size:14px} }

/* ══════════ SCHERMI BASSI ══════════
   Sotto una certa altezza la plancia si comprime: meno imbottitura e
   caratteri leggermente ridotti, così alla tavola resta spazio vero. */
@media (max-height:780px){
  .console{padding:9px 10px 10px;gap:8px}
  .readout{min-height:42px;padding:6px 9px}
  .expr{font-size:clamp(16px,4.6vw,24px)}
  .res{font-size:clamp(14px,4vw,22px);padding:4px 9px}
  .acts{gap:7px}
  .btn{padding:10px 8px 11px;font-size:12px;letter-spacing:.1em}
  .btn.go{padding:12px 10px 13px;font-size:13.5px;letter-spacing:.16em}
}
@media (max-height:640px){
  .console{gap:7px}
  .readout{min-height:38px}
  .btn{padding:8px 6px 9px;font-size:11px}
  .btn.go{padding:10px 8px 11px;font-size:12.5px}
}