:root{
  --bg:#1E1B2E; --panel:#2A2640; --panel2:#332E4E;
  --lamp:#FFB65C; --text:#F5EFE6; --muted:#A79FC4;
  --ok:#7FDB9A; --bad:#FF7A8A;
  --radius:18px;
  --vh:1vh;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Nunito',system-ui,sans-serif;
  touch-action:manipulation; overflow-x:hidden;
  background-image:radial-gradient(circle at 80% -10%, #3a3060 0%, transparent 55%);
  min-height:calc(var(--vh, 1vh) * 100);
}
h1,h2,h3,.display{font-family:'Fredoka','Nunito',system-ui,sans-serif;}
.screen{display:none; min-height:calc(var(--vh, 1vh) * 100); padding:calc(20px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto;}
.screen.active{display:block; animation:screenIn .32s cubic-bezier(.2,.8,.3,1);}
@keyframes screenIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
button{font-family:inherit; cursor:pointer; border:none;}
.btn{
  background:var(--lamp); color:#3A2A10; font-weight:800; font-size:17px;
  border-radius:14px; padding:14px 26px; width:100%;
  box-shadow:0 4px 0 #C98A3A; transition:transform .08s, box-shadow .08s, opacity .2s;
  min-height:48px;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #C98A3A;}
.btn.ghost{background:var(--panel2); color:var(--text); box-shadow:0 4px 0 #1c1930;}
.btn.small{width:auto; padding:10px 18px; font-size:15px; min-height:auto;}
.btn:disabled{opacity:.55; pointer-events:none;}
.btn.loading{color:transparent; position:relative;}
.btn.loading::after{
  content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:3px solid rgba(58,42,16,.35); border-top-color:#3A2A10; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- LOGIN / NICKNAME ---------- */
#screen-login{display:none; text-align:center;}
#screen-login.active{display:flex; flex-direction:column; justify-content:center; align-items:center;}
.big-cat{font-size:72px; margin-bottom:4px;}
.big-cat.bounce{animation:catBounce 2.6s ease-in-out infinite;}
@keyframes catBounce{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-6px) rotate(-4deg);}}
#screen-login h1{font-size:40px; margin:0 0 4px; letter-spacing:1px;}
#screen-login .sub{color:var(--muted); margin:0 0 26px; padding:0 8px;}
.name-form{width:100%; max-width:320px;}
.name-input-wrap{position:relative; margin-bottom:16px;}
#name-input{
  width:100%; font-size:18px; font-weight:700; color:var(--text);
  background:var(--panel); border:2px solid #45406b; border-radius:14px;
  padding:15px 16px; text-align:center; font-family:inherit;
  transition:border-color .15s, transform .12s;
}
#name-input:focus{outline:none; border-color:var(--lamp);}
#name-input.shake{animation:shake .35s;}
.pin-msg{min-height:22px; color:var(--bad); font-weight:700; margin-top:14px; transition:opacity .15s;}
.pin-msg.ok{color:var(--ok);}
.name-hint{color:var(--muted); font-size:12.5px; margin-top:10px;}

/* ---------- TOPBAR condivisa ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px;}
.topbar h2{margin:0; font-size:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- HUB ---------- */
.hub-hello{color:var(--muted); font-size:14px; margin:0 0 16px; font-weight:600;}
.hub-hello b{color:var(--text);}
.hub-grid{display:flex; flex-direction:column; gap:12px;}
.game-card{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:var(--panel); border-radius:var(--radius); padding:14px 16px;
  color:var(--text); box-shadow:0 4px 0 #1c1930; transition:transform .1s;
}
.game-card:active{transform:translateY(3px); box-shadow:0 1px 0 #1c1930;}
.game-card.soon{opacity:.45; pointer-events:none;}
.game-card .gc-emoji{font-size:38px; line-height:1; flex:0 0 auto;}
.game-card .gc-body{flex:1; min-width:0;}
.game-card .gc-title{font-family:'Fredoka','Nunito',sans-serif; font-size:20px; font-weight:600;}
.game-card .gc-tag{color:var(--muted); font-size:13px; font-weight:600; margin-top:1px;}
.game-card .gc-bar{height:6px; border-radius:6px; background:var(--panel2); overflow:hidden; margin-top:8px;}
.game-card .gc-fill{height:100%; background:linear-gradient(90deg,var(--lamp),#ffd08a); border-radius:6px; transition:width .5s cubic-bezier(.2,.8,.3,1);}
.game-card .gc-count{color:var(--muted); font-size:11.5px; font-weight:700; margin-top:5px;}
.hub-soon-title{color:var(--muted); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px; margin:22px 0 10px;}

/* ---------- LEVEL SELECT ---------- */
.chapters{display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:14px; scrollbar-width:none;}
.chapters::-webkit-scrollbar{display:none;}
.chapters button{
  flex:0 0 auto; background:var(--panel); color:var(--muted);
  border-radius:12px; padding:9px 15px; font-weight:800; font-size:14px;
  transition:background .15s, color .15s;
}
.chapters button.sel{background:var(--lamp); color:#3A2A10;}
.lv-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.lv{
  aspect-ratio:1; border-radius:14px; background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--text); font-weight:800; font-size:16px; position:relative;
  box-shadow:0 3px 0 #1c1930; transition:transform .1s;
  min-height:44px;
}
.lv:active{transform:scale(.93);}
.lv .paws{font-size:9px; letter-spacing:1px; margin-top:2px; height:11px;}
.lv.done{background:#3E5A46; box-shadow:0 3px 0 #2b3f31;}
.lv.locked{opacity:.35; pointer-events:none;}
.lv.next{outline:3px solid var(--lamp); animation:nextPulse 1.8s ease-in-out infinite;}
@keyframes nextPulse{0%,100%{outline-offset:0; box-shadow:0 3px 0 #1c1930, 0 0 0 rgba(255,182,92,0);}50%{outline-offset:2px; box-shadow:0 3px 0 #1c1930, 0 0 14px rgba(255,182,92,.55);}}
.progress-line{color:var(--muted); font-size:14px; margin:4px 0 14px;}
.progress-bar{height:8px; border-radius:6px; background:var(--panel2); overflow:hidden; margin:0 0 14px;}
.progress-bar-fill{height:100%; background:linear-gradient(90deg,var(--lamp),#ffd08a); border-radius:6px; transition:width .5s cubic-bezier(.2,.8,.3,1);}

/* ---------- GAME (chrome condiviso) ---------- */
.hud{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px;}
.hud .lvl{font-family:'Fredoka'; font-size:22px; font-weight:600;}
.hearts{font-size:20px; letter-spacing:2px;}
.hearts span{display:inline-block; transition:transform .25s, opacity .25s, filter .25s;}
.hearts .lost{opacity:.25; filter:grayscale(1); transform:scale(.8);}
.hearts .just-lost{animation:heartPop .4s ease;}
@keyframes heartPop{0%{transform:scale(1.5);}60%{transform:scale(.7);}100%{transform:scale(.8);}}
.hud .time{font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700;}
#board-wrap{display:flex; justify-content:center; margin:6px 0 16px; position:relative;}
#board{
  display:grid; width:min(92vw,480px); aspect-ratio:1;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
  background:#241f38; border-radius:14px;
}
.board-clip{width:min(92vw,480px); border-radius:14px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.45);}
.board-clip #board{box-shadow:none; border-radius:0;}
.cell{
  display:flex; align-items:center; justify-content:center;
  font-size:calc(min(92vw,480px)/var(--n)*0.55);
  position:relative; color:#3a3430;
}
.controls{display:flex; gap:10px; flex-wrap:wrap;}
/* i bottoni si dividono la riga; se sono troppi vanno a capo a coppie
   invece di stringersi fino a spezzare le parole */
.controls .btn{font-size:15px; padding:12px 10px; width:auto; flex:1 1 120px;}
/* comando armato: aspetta un tocco sulla griglia */
.controls .btn.armed{background:var(--ok); color:#123021; box-shadow:0 4px 0 #4E9A68; animation:armedPulse 1.1s ease-in-out infinite;}
.controls .btn.spent{opacity:.5;}
@keyframes armedPulse{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
.hint-txt{text-align:center; color:var(--muted); font-size:13px; margin-top:14px; line-height:1.5;}
#board-wrap.shake-board{animation:boardShake .35s;}
@keyframes boardShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}50%{transform:translateX(4px);}75%{transform:translateX(-3px);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}50%{transform:translateX(6px);}75%{transform:translateX(-4px);}}
.flash-overlay{position:fixed; inset:0; pointer-events:none; z-index:45; opacity:0;}
.flash-overlay.bad{background:radial-gradient(circle,transparent 40%, rgba(255,90,90,.28) 100%); animation:flashOut .45s ease-out;}
.flash-overlay.good{background:radial-gradient(circle,transparent 40%, rgba(127,219,154,.22) 100%); animation:flashOut .55s ease-out;}
@keyframes flashOut{0%{opacity:1;}100%{opacity:0;}}

/* ---------- MIAODOKU: celle a badge ---------- */
.cell .icon-badge{
  position:absolute; inset:8%;
  display:flex; align-items:center; justify-content:center;
  border-radius:26%;
  transform:scale(.25); opacity:0;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), opacity .18s;
  pointer-events:none; z-index:1;
}
.cell.cat-in{z-index:3;}
.cell.cat-in .icon-badge{
  transform:scale(1.34);
  opacity:1;
  background:radial-gradient(circle at 35% 30%, #fff8ec 0%, #ffe4b0 60%, #ffcf82 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.35) inset;
}
.cell.marked-in{z-index:2;}
.cell.marked-in .icon-badge{
  transform:scale(1.08);
  opacity:1;
  background:rgba(255,122,138,.16);
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.cell .icon-badge .icon{
  display:inline-block; font-size:1em; line-height:1;
  transform:scale(1); transition:transform .12s;
}
.cell.marked-in .icon-badge .icon{font-size:.62em; font-weight:900; color:#c0293d;}
.cell.cat-pop .icon-badge{animation:catPop .38s cubic-bezier(.34,1.56,.64,1);}
@keyframes catPop{0%{transform:scale(.2) rotate(-10deg);}55%{transform:scale(1.5) rotate(4deg);}100%{transform:scale(1.34) rotate(0);}}
.cell.err{animation:shake .35s;}
.cell.err .icon-badge{background:rgba(255,90,90,.35) !important;}
.cell.correct-flash::before{
  content:''; position:absolute; inset:-2px; border-radius:26%;
  box-shadow:0 0 0 0 rgba(127,219,154,.65);
  animation:ringOut .5s ease-out;
  pointer-events:none;
}
@keyframes ringOut{
  0%{box-shadow:0 0 0 0 rgba(127,219,154,.65);}
  100%{box-shadow:0 0 0 14px rgba(127,219,154,0);}
}

/* ---------- MIAO & NAP ---------- */
#board.mn{background:#2a2440; gap:3px; padding:3px; border-radius:14px;}
.mn-cell{
  border-radius:12%; background:#3b3458; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(min(92vw,480px)/var(--n)*0.5);
  transition:background .15s;
}
.mn-cell.given{background:#4b4370; box-shadow:inset 0 0 0 2px rgba(255,182,92,.35);}
/* casella svelata con una sbirciatina: verde, e non si tocca più */
.mn-cell.seen{background:#39543f; box-shadow:inset 0 0 0 2px rgba(127,219,154,.7);}
.mn-cell.bad{background:#70344a; box-shadow:inset 0 0 0 2px rgba(255,122,138,.75);}
.mn-cell .sym{
  line-height:1; display:block;
  animation:mnPop .26s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mnPop{0%{transform:scale(.3);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
.mn-cell .sign{
  position:absolute; z-index:6; pointer-events:none;
  width:1.6em; height:1.6em; font-size:max(9px, calc(min(92vw,480px)/var(--n)*0.2));   /* il minimo tiene leggibili i segni nelle 10×10 */
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--bg); color:var(--lamp);
  font-weight:900; box-shadow:0 0 0 2px rgba(255,182,92,.5);
}
.mn-cell .sign.h{right:0; top:50%; transform:translate(58%,-50%);}
.mn-cell .sign.v{bottom:0; left:50%; transform:translate(-50%,58%);}
.mn-cell .sign.x{color:var(--bad); box-shadow:0 0 0 2px rgba(255,122,138,.5);}
#board.mn .mn-cell{overflow:visible;}
.mn-legend{display:flex; justify-content:center; gap:16px; color:var(--muted); font-size:12.5px; font-weight:700; margin-top:-6px; margin-bottom:12px;}
.mn-legend b{color:var(--text);}

/* ---------- CETRIOLI! (campo minato) ---------- */
#board.ms{background:#2f2a48; gap:3px; padding:3px; border-radius:14px;}
.ms-cell{
  border-radius:14%; background:linear-gradient(160deg,#7fa86a,#5d8a4e);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:calc(min(92vw,480px)/var(--n)*0.46);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18); transition:background .12s;
}
.ms-cell.open{background:#e6dcc2; box-shadow:none;}
.ms-cell.flag{background:linear-gradient(160deg,#8fb87a,#6c9a5c); font-size:calc(min(92vw,480px)/var(--n)*0.42);}
.ms-cell.boom{background:#70344a; box-shadow:inset 0 0 0 2px rgba(255,122,138,.7);}

/* ---------- CUCCE (tende e alberi) ---------- */
#board.tents{background:#2f2a48; gap:3px; padding:3px; border-radius:14px;}
.tents-cell{
  border-radius:14%; background:#6f9a5e;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(min(92vw,480px)/var(--n)*0.5); color:#25402a;
}
.tents-cell.kennel{background:#b98a5a;}
.tents-cell.cat{background:#ffd9a0;}
.tents-cell.grass{background:#5a8250; color:rgba(255,255,255,.45); font-weight:900;}
.tents-count{
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:var(--muted);
  font-size:calc(min(92vw,480px)/var(--n)*0.42);
}
.tents-count.ok{color:var(--ok);}
.tents-count.over{color:var(--bad);}

/* ---------- FUSA (candeline) ---------- */
#board.akari{background:#2f2a48; gap:2px; padding:2px; border-radius:14px;}
.akari-cell{
  background:#443c66; border-radius:10%;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(min(92vw,480px)/var(--n)*0.5); color:rgba(255,255,255,.35);
  transition:background .15s;
}
.akari-cell.lit{background:#7a6438;}
.akari-cell.clash{background:#70344a; box-shadow:inset 0 0 0 2px rgba(255,122,138,.75);}
.akari-wall{
  background:#1a1730; border-radius:10%;
  display:flex; align-items:center; justify-content:center;
  color:#cfc6ea; font-weight:900;
  font-size:calc(min(92vw,480px)/var(--n)*0.44);
}
.akari-wall.ok{color:var(--ok);}
.akari-wall.over{color:var(--bad);}

/* ---------- FILI: GOMITOLO e PESCIOLINI ---------- */
#board.drag{touch-action:none;}
.arms{position:absolute; inset:0; pointer-events:none;}
.arms i{position:absolute; display:block; background:transparent; border-radius:2px;}
.arms .a-up{left:33%; top:0; width:34%; height:52%;}
.arms .a-down{left:33%; bottom:0; width:34%; height:52%;}
.arms .a-left{top:33%; left:0; height:34%; width:52%;}
.arms .a-right{top:33%; right:0; height:34%; width:52%;}
.arms .a-dot{left:33%; top:33%; width:34%; height:34%; border-radius:22%;}

#board.yarn{background:#2f2a48; gap:2px; padding:2px; border-radius:14px;}
.yarn-cell{
  position:relative; background:#3f3760; border-radius:10%;
  display:flex; align-items:center; justify-content:center;
}
.yarn-cell.on{background:#4a4170;}
.yarn-cell .arms i.on, .yarn-cell.on .a-dot{background:var(--lamp);}
.yarn-cell.head .a-dot{background:#fff3d8;}
.yarn-num{
  position:relative; z-index:2; font-weight:900; color:#3A2A10;
  background:#fff3d8; border-radius:50%;
  width:66%; height:66%; display:flex; align-items:center; justify-content:center;
  font-size:calc(min(92vw,480px)/var(--n)*0.4);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

#board.flow{background:#2f2a48; gap:2px; padding:2px; border-radius:14px;}
.flow-cell{
  position:relative; background:#3f3760; border-radius:10%;
  display:flex; align-items:center; justify-content:center;
}
.flow-fish{
  position:relative; z-index:2; border-radius:50%;
  width:74%; height:74%; display:flex; align-items:center; justify-content:center;
  font-size:calc(min(92vw,480px)/var(--n)*0.42);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* ---------- MIAOCROSS (nonogramma) ---------- */
#board.nono{background:#221d38; gap:0; padding:6px; border-radius:14px;}
.nono-corner{background:transparent;}
.nono-cell{
  background:#6a62a8; border:1px solid #3a3358;
  display:flex; align-items:center; justify-content:center;
  color:#ffb3be; font-weight:900;
  font-size:calc(min(92vw,480px)/var(--n)*0.44);
  transition:background .1s;
}
.nono-cell.fill{background:var(--lamp); border-color:#d99b45;}
.nono-cell.mark{background:#3d3663;}
/* linee di riferimento ogni 5 caselle, come sulla carta a quadretti */
.nono-cell.b-left{border-left:2px solid #cfc6ea;}
.nono-cell.b-top{border-top:2px solid #cfc6ea;}
.nono-cell.done{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.nono-clue{
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-weight:800;
  font-size:calc(min(92vw,480px)/var(--n)*0.44);
  transition:opacity .15s, color .15s;
}
.nono-clue.col{align-items:flex-end; padding-bottom:2px;}
.nono-clue.row{justify-content:flex-end; padding-right:4px;}
/* indizio soddisfatto: si spegne, così si vede a colpo d'occhio cosa manca */
.nono-clue.done{color:var(--ok); opacity:.45;}

/* ---------- 2048 DEI GATTI ---------- */
#board.t2048{position:relative; background:#2f2a48; border-radius:16px; touch-action:none; display:block;}
.t2048-bg, .t2048-tiles{position:absolute; inset:0;}
.t2048-slot{position:absolute; background:#3f3760; border-radius:12%;}
.t2048-tile{
  position:absolute; border-radius:12%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:left .12s ease-out, top .12s ease-out;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.t2048-tile .t-emo{font-size:min(11vw,54px); line-height:1;}
.t2048-tile .t-val{font-size:min(3.2vw,15px); font-weight:900; color:rgba(40,25,10,.65); margin-top:2px;}
.t2048-tile.born{animation:tileBorn .18s ease-out;}
@keyframes tileBorn{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}
.t2048-tile.merged{animation:tileMerge .2s ease-out;}
@keyframes tileMerge{0%{transform:scale(1);}45%{transform:scale(1.16);}100%{transform:scale(1);}}
.gc-count.arcade{margin-top:8px;}

/* ---------- ALCHIMIAO (travaso delle pozioni) ---------- */
#board.pot{display:flex; flex-direction:column; justify-content:center; background:#241f38;}
/* le provette escono dai bordi mentre versano: solo qui la griglia non taglia */
.board-clip.open{overflow:visible;}
.pot-row{flex:1 1 0; min-height:0; display:flex; align-items:stretch; justify-content:center;}
.pot-slot{flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.pot-tube{
  position:relative;
  display:flex; flex-direction:column-reverse;
  border-radius:16% 16% 44% 44% / 4% 4% 14% 14%;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16), 0 4px 12px rgba(0,0,0,.4);
  overflow:hidden;
  transition:transform .24s cubic-bezier(.3,.75,.4,1);
}
/* riflesso del vetro */
.pot-tube::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(102deg,
    rgba(255,255,255,.18) 0 13%, rgba(255,255,255,.05) 13% 21%, transparent 21%);
}
.pot-seg{width:100%; background-color:transparent; transform-origin:bottom; transition:background-color .16s linear;}
.pot-seg.top{border-radius:38% 38% 0 0 / 18% 18% 0 0;}
.pot-seg.in{animation:potFill .22s ease-out;}
@keyframes potFill{from{transform:scaleY(.15);} to{transform:scaleY(1);}}
.pot-tube.sel{transform:translateY(-14%);}
.pot-tube.pouring{z-index:30;}
.pot-tube.done{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 0 18px rgba(255,255,255,.22);}
.pot-tube.nope{animation:potNope .32s;}
@keyframes potNope{0%,100%{transform:translateX(0);}25%{transform:translateX(-7%);}50%{transform:translateX(7%);}75%{transform:translateX(-4%);}}
.pot-badge{
  position:absolute; z-index:2; top:5%; left:50%;
  width:52%; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.92); color:#2b7a4b;
  display:flex; align-items:center; justify-content:center;
  font-size:min(3.2vw,15px); font-weight:900; line-height:1;
  transform:translateX(-50%) scale(0);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pot-badge.show{transform:translateX(-50%) scale(1);}

/* ---------- OVERLAYS ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(20,17,35,.85); z-index:50;
  display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(2px);
}
.overlay.active{display:flex; animation:overlayIn .2s ease;}
@keyframes overlayIn{from{opacity:0;} to{opacity:1;}}
.card{
  background:var(--panel); border-radius:22px; padding:30px 24px; width:100%;
  max-width:340px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5);
  animation:cardIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cardIn{from{opacity:0; transform:scale(.85) translateY(20px);} to{opacity:1; transform:scale(1) translateY(0);}}
.card .emo{font-size:60px; animation:emoPop .5s cubic-bezier(.3,1.6,.5,1) .1s both;}
@keyframes emoPop{from{transform:scale(0) rotate(-20deg);} to{transform:scale(1) rotate(0);}}
.card h2{margin:8px 0 6px; font-size:26px;}
.card p{color:var(--muted); margin:0 0 22px; font-weight:600;}
.card .btn + .btn{margin-top:10px;}
/* ---------- COME SI GIOCA ---------- */
.help-card{max-width:400px; text-align:left; max-height:88vh; display:flex; flex-direction:column; padding:22px 20px;}
.help-head{display:flex; align-items:center; gap:12px; margin-bottom:6px;}
.help-cat{font-size:46px; line-height:1; animation:catBounce 2.6s ease-in-out infinite;}
.help-card h2{margin:0; font-size:22px;}
.help-sub{color:var(--muted); margin:2px 0 0; font-size:13px; font-weight:600;}
.help-body{overflow-y:auto; margin:14px 0 16px; padding-right:4px;}
.help-h{
  margin:16px 0 6px; font-size:15px; color:var(--lamp);
  text-transform:uppercase; letter-spacing:.6px;
}
.help-h:first-child{margin-top:0;}
.help-p{margin:0 0 8px; color:var(--text); font-size:14.5px; line-height:1.5; font-weight:600;}
.help-p b{color:var(--lamp);}
.mini{display:inline-grid; gap:2px; background:#221d38; padding:3px; border-radius:8px; flex:0 0 auto;}
.mini div{
  width:26px; height:26px; border-radius:5px; background:#4a4270;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:var(--text);
}
.mini div.num{font-size:13px; color:#cfc6ea;}
.mini div.seen{background:#39543f; box-shadow:inset 0 0 0 2px rgba(127,219,154,.8);}
.help-ex{display:flex; align-items:center; gap:12px; margin:10px 0;}
.ex-cap{font-size:13.5px; color:var(--muted); font-weight:700; line-height:1.4;}
.ex-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; font-size:12px;
  margin-right:7px; vertical-align:-3px; color:#1b1830; font-weight:900;
}
.ex-badge.ok{background:var(--ok);}
.ex-badge.no{background:var(--bad);}
.help-pair{display:flex; gap:14px; margin:10px 0; flex-wrap:wrap;}
.pair-item{flex:1 1 130px;}
.pair-cap{font-size:12.5px; color:var(--muted); font-weight:700; margin-top:6px; line-height:1.35;}
.pair-item .ex-badge{margin-bottom:5px;}
.btn.icon{flex:0 0 auto; width:56px; padding:12px 0;}

.paw-rain{position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden;}
.paw-rain span{position:absolute; top:-40px; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(340deg);}}
#gen-loading{position:fixed; inset:0; z-index:40; background:var(--bg); display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:12px;}
#gen-loading.active{display:flex;}
#gen-loading .big-cat{animation:wiggle 1s infinite;}
@keyframes wiggle{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(8deg);}}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}