/* MathGuru — board.css */
/* Tavoletta, caselle, operatori, jolly e relative animazioni */

/* ---------- tavoletta ---------- */
.icb.bank.aid.full{border-color:var(--gold);color:var(--gold);box-shadow:0 0 16px rgba(255,210,63,.3);animation:none}
/* cronometro congelato durante l'analisi */
.gauge.frozen{border-color:rgba(34,230,255,.85);animation:none;
  box-shadow:0 0 0 1px rgba(34,230,255,.5), 0 0 30px rgba(34,230,255,.35)}
.gauge.frozen .v{color:var(--ion);animation:froze 1s ease-in-out infinite alternate}
@keyframes froze{from{opacity:1}to{opacity:.42}}
/* scansione sulla tavoletta mentre la macchina espone la scelta */
.tablet.scan::after{content:"";position:absolute;left:0;right:0;height:32%;top:-32%;
  pointer-events:none;border-radius:20px;
  background:linear-gradient(180deg,transparent,rgba(34,230,255,.26),transparent);
  animation:scanline 1.35s ease-in-out infinite}
@keyframes scanline{to{top:100%}}
/* la tavoletta occupa tutta l'altezza fra la gauge e la console */
/* colonna di gioco: la tavoletta occupa quel che resta, la console sta
   sempre in fondo e non si comprime mai. E' la tavoletta che cede.
   Niente overflow:hidden qui: taglierebbe gli aloni esterni della
   tavoletta e delle caselle accese. A garantire che nulla trabocchi
   basta il minmax(0,1fr) delle righe. */
.stage{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.tablet{position:relative;flex:1;min-height:0;display:flex;
  border-radius:20px;padding:calc(var(--gap) + 5px);
  background:linear-gradient(160deg,rgba(124,60,255,.30),rgba(8,4,26,.86) 45%),rgba(6,3,20,.7);
  border:1px solid rgba(160,140,255,.34);
  box-shadow:0 26px 70px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.14), 0 0 60px rgba(124,60,255,.14);
  backdrop-filter:blur(4px)}
.board{position:relative;flex:1;min-height:0;display:grid;
  /* minmax(0,1fr) e non 1fr: il minimo implicito di 1fr e' auto, cioe'
     il contenuto, e le caselle vincolate ad aspect-ratio pretenderebbero
     il doppio della loro larghezza. La griglia si rifiuterebbe di
     rimpicciolirsi e traboccherebbe sotto la console. */
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:var(--gap);touch-action:none}
#links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}

.cell{position:relative;min-width:0;
  /* la riga si allunga per riempire la tavoletta, la casella conserva
     una proporzione da pulsante e si centra: l'eccedenza diventa respiro */
  aspect-ratio:1/2;align-self:center;max-height:100%;
  border-radius:13px;display:grid;place-items:center;
  font-family:var(--fd);font-weight:900;font-size:clamp(17px,5vw,38px);line-height:1;
  color:var(--tc);
  background:radial-gradient(120% 96% at 50% 4%, color-mix(in srgb,var(--tc) 26%, transparent), transparent 62%),
             linear-gradient(180deg,#1a1140,#0b0620);
  border:1.5px solid color-mix(in srgb,var(--tc) 48%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 5px 12px rgba(0,0,0,.5);
  text-shadow:0 0 12px color-mix(in srgb,var(--tc) 75%, transparent);
  user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;
  transition:transform .13s ease, box-shadow .2s, filter .2s}
/* OPERATORI: categoria visiva opposta alle cifre.
   Le cifre sono tessere scure rettangolari con glifo colorato;
   gli operatori sono pastiglie chiare con glifo scuro, anello
   bianco e respiro luminoso. La differenza è di forma e di
   polarità, non di sfumatura: si individuano senza cercarli.  */
.cell.op{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:800;
  font-size:clamp(24px,7vw,52px);
  border-radius:999px;
  color:#140826;
  text-shadow:none;
  background:
    radial-gradient(120% 82% at 50% 10%, #ffffff 0%,
      color-mix(in srgb, var(--tc) 55%, #ffffff) 46%, var(--tc) 100%);
  border:3px solid #fff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--tc) 42%, transparent),
    0 0 26px color-mix(in srgb, var(--tc) 85%, transparent),
    0 0 56px color-mix(in srgb, var(--tc) 45%, transparent),
    inset 0 3px 0 rgba(255,255,255,.85),
    0 8px 18px rgba(0,0,0,.55);
  transform:scale(1.05);
  z-index:4;
  animation:opBeacon 2.8s ease-in-out infinite;
}
@keyframes opBeacon{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.22) saturate(1.15)}
}
/* quando la catena finisce con una cifra, il prossimo passo utile
   è un operatore: i quattro dischi si mettono in evidenza */
.board.need-op .cell.op:not(.sel){animation:opCall 1.05s ease-in-out infinite}
@keyframes opCall{
  0%,100%{transform:scale(1.05);box-shadow:0 0 0 4px rgba(255,255,255,.55),
    0 0 26px color-mix(in srgb,var(--tc) 85%, transparent), 0 8px 18px rgba(0,0,0,.55),
    inset 0 3px 0 rgba(255,255,255,.85)}
  50%{transform:scale(1.13);box-shadow:0 0 0 7px rgba(255,255,255,.9),
    0 0 40px color-mix(in srgb,var(--tc) 95%, transparent), 0 8px 18px rgba(0,0,0,.55),
    inset 0 3px 0 rgba(255,255,255,.85)}
}
/* alloggiamento vuoto: la cifra è stata polverizzata, resta il vano */
.cell.void{
  pointer-events:none;cursor:default;color:transparent;text-shadow:none;
  background:rgba(2,0,10,.42);
  border:1px dashed rgba(150,125,255,.22);
  box-shadow:inset 0 8px 20px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.05);
  animation:sink .34s ease}
@keyframes sink{from{transform:scale(1.18);opacity:0}to{transform:none;opacity:1}}
/* tessera jolly: pulsa, poi si dissolve nell'arco della sua vita */
.cell.jolly{
  cursor:pointer;color:#1a0a2e;
  background:linear-gradient(140deg,#ffd23f,#ff2fb9 46%,#22e6ff);
  border:2px solid #fff;
  text-shadow:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.45), 0 0 26px rgba(255,210,63,.75),
             0 0 58px rgba(255,47,185,.45);
  animation:jollyBeat 1.05s ease-in-out infinite alternate,
            jollyLife var(--jl,10s) linear forwards;
  z-index:7}
@keyframes jollyBeat{from{transform:scale(1) rotate(-5deg)}to{transform:scale(1.12) rotate(5deg)}}
@keyframes jollyLife{0%,58%{opacity:1}100%{opacity:0}}
/* casella ACCESA: colore pieno, anello bianco, alone e battito */
.cell.sel{
  color:#0b0518;
  background:linear-gradient(180deg, color-mix(in srgb,var(--tc) 52%, #fff), var(--tc) 82%);
  border-color:#fff;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  transform:translateY(-4px) scale(1.1);
  z-index:6;
  box-shadow:0 0 0 3px rgba(255,255,255,.92),
             0 0 22px var(--tc),
             0 0 48px color-mix(in srgb,var(--tc) 62%, transparent),
             0 10px 20px rgba(0,0,0,.6);
  animation:selPulse .8s ease-in-out infinite alternate,
            zap .22s cubic-bezier(.2,1.7,.4,1);
}
.cell.sel::after{
  content:attr(data-ord);position:absolute;top:-6px;left:-6px;
  min-width:16px;height:16px;padding:0 3px;border-radius:99px;
  display:grid;place-items:center;
  font-family:var(--fd);font-weight:900;font-size:9px;line-height:1;
  background:#fff;color:#0b0518;box-shadow:0 0 12px rgba(255,255,255,.85)}
@keyframes selPulse{from{filter:brightness(1) saturate(1)}to{filter:brightness(1.32) saturate(1.18)}}
@keyframes zap{from{transform:translateY(-4px) scale(1.34)}to{transform:translateY(-4px) scale(1.1)}}
/* operatore selezionato: torna a colore pieno con glifo bianco,
   così l'accensione resta leggibile anche partendo da una
   pastiglia già chiara */
.cell.op.sel{
  background:linear-gradient(180deg, color-mix(in srgb,var(--tc) 78%, #fff), var(--tc));
  color:#fff;
  text-shadow:0 0 14px rgba(0,0,0,.55);
  border-color:#fff;
  animation:selPulse .8s ease-in-out infinite alternate;
  box-shadow:0 0 0 5px rgba(255,255,255,.95),
             0 0 34px var(--tc), 0 0 66px color-mix(in srgb,var(--tc) 65%, transparent),
             0 10px 20px rgba(0,0,0,.6);
}
.cell.deny{animation:deny .3s ease}
@keyframes deny{
  0%,100%{transform:none}
  25%{transform:translateX(-4px) scale(.95);box-shadow:0 0 0 3px #ff3b5c, 0 0 26px rgba(255,59,92,.7)}
  75%{transform:translateX(4px) scale(.95);box-shadow:0 0 0 3px #ff3b5c, 0 0 26px rgba(255,59,92,.7)}}
.cell.boom{animation:boom .38s cubic-bezier(.3,.7,.3,1) forwards}
.cell.recycle{animation:recycle .38s ease forwards}
.cell.pop{animation:pop .34s cubic-bezier(.2,1.4,.4,1)}
@keyframes boom{
  0%{transform:scale(1)}
  35%{transform:scale(1.3);filter:brightness(3) saturate(.2)}
  100%{transform:scale(.2) rotate(14deg);opacity:0;filter:brightness(4)}}
@keyframes recycle{to{transform:rotateY(90deg) scale(.75);opacity:.05}}
@keyframes pop{from{transform:rotateX(-88deg) scale(.8);opacity:0;filter:brightness(2.4)}to{transform:none;opacity:1}}
.tablet.nope{animation:nope .32s}
@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}45%{transform:translateX(7px)}70%{transform:translateX(-4px)}}

/* lampo di vittoria sulla tavoletta quando non restano mosse possibili */
.tablet.victory{animation:victory 1.1s ease}
@keyframes victory{
  0%{filter:none}
  18%{filter:brightness(2.4) saturate(1.4)}
  100%{filter:none}
}