:root {
  --bg: #0c0a1f;
  --bg2: #15113a;
  --card: rgba(255, 255, 255, .06);
  --card2: rgba(255, 255, 255, .11);
  --line: rgba(255, 255, 255, .10);
  --tx: #f6f4ff;
  --mut: #a9a5d1;
  --lime: #a3e635;
  --lime-d: #4d7c0f;
  --cyan: #22d3ee;
  --orange: #fb923c;
  --pink: #f472b6;
  --violet: #8b5cf6;
  --yellow: #facc15;
  --ok: #4ade80;
  --ko: #fb7185;
  --r: 22px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--tx); }
body {
  font: 600 17px/1.45 Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100dvh; overscroll-behavior-y: none;
  background:
    radial-gradient(800px 500px at 0% -10%, rgba(139, 92, 246, .35), transparent 60%),
    radial-gradient(700px 450px at 110% 5%, rgba(34, 211, 238, .20), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(163, 230, 53, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, .fred { font-family: Fredoka, Nunito, system-ui, sans-serif; letter-spacing: .2px; margin: 0; font-weight: 600; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 800; color: #fff; }
input, textarea, select {
  width: 100%; background: rgba(255, 255, 255, .07); border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 16px; outline: none; font-weight: 700; transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: var(--cyan); }
textarea { min-height: 130px; resize: vertical; line-height: 1.45; }
select option { background: var(--bg2); }
::placeholder { color: rgba(255, 255, 255, .35); }

#app { max-width: 600px; margin: 0 auto; padding: calc(14px + var(--safe-t)) 16px calc(100px + var(--safe-b)); min-height: 100dvh; }
body.full #app { padding-bottom: calc(24px + var(--safe-b)); }
body.full .tabs { display: none; }

/* ── tab bar (telefono) / rail (tablet) ── */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 4px;
  padding: 6px 8px calc(6px + var(--safe-b)); background: rgba(12, 10, 31, .88); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tabs a {
  flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0;
  border-radius: 16px; font-size: 12.5px; font-weight: 800; color: var(--mut); position: relative;
}
.tabs a span { font-size: 25px; line-height: 1.1; filter: grayscale(.7) opacity(.8); transition: transform .15s; }
.tabs a.on { color: var(--tx); background: rgba(163, 230, 53, .13); }
.tabs a.on span { filter: none; transform: translateY(-2px) scale(1.1); }
.tabs a i.dot {
  position: absolute; top: 2px; right: calc(50% - 22px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  background: var(--ko); color: #fff; font: 800 12px/20px Nunito; font-style: normal;
}
.tabs .logo { display: none; }

@media (min-width: 900px) {
  #app { max-width: 1120px; padding: calc(28px + var(--safe-t)) 36px 40px 148px; }
  body.full #app { max-width: 820px; padding-left: 36px; }
  .tabs {
    top: 0; bottom: 0; right: auto; width: 112px; flex-direction: column; justify-content: flex-start; gap: 8px;
    padding: 22px 10px; border-top: 0; border-right: 1px solid var(--line);
  }
  .tabs a { flex: none; max-width: none; padding: 12px 0; font-size: 13.5px; }
  .tabs a span { font-size: 30px; }
  .tabs .logo { display: block; margin: 0 auto 14px; width: 74px; }
  .two { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
  .two > .side { position: sticky; top: 28px; }
  .grid-t { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 640px) and (max-width: 899px) {
  #app { max-width: 760px; padding-left: 28px; padding-right: 28px; }
  .grid-t { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── generic ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mut { color: var(--mut); }
.small { font-size: 14.5px; }
.tiny { font-size: 12.5px; }
.center { text-align: center; }
.mt { margin-top: 16px; } .mt2 { margin-top: 26px; } .mb { margin-bottom: 12px; }
.sec { font: 600 21px Fredoka, sans-serif; margin: 28px 2px 14px; display: flex; align-items: center; gap: 10px; }
.sec small { font: 700 14px Nunito; color: var(--mut); margin-left: auto; }
.hide { display: none !important; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 12px 18px;
  border-radius: 18px; font: 600 19px Fredoka, sans-serif; color: #1a2e05; letter-spacing: .3px;
  background: var(--lime); box-shadow: 0 6px 0 var(--lime-d); transition: transform .08s, box-shadow .08s, filter .15s;
  text-transform: uppercase;
}
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--lime-d); }
.btn.alt { background: var(--card2); color: var(--tx); box-shadow: 0 5px 0 rgba(0, 0, 0, .4); border: 1px solid var(--line); }
.btn.alt:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.btn.cyan { background: var(--cyan); color: #042f3a; box-shadow: 0 6px 0 #0e7490; }
.btn.orange { background: var(--orange); color: #3b1302; box-shadow: 0 6px 0 #c2410c; }
.btn.pink { background: var(--pink); color: #3d0722; box-shadow: 0 6px 0 #be185d; }
.btn.violet { background: var(--violet); color: #fff; box-shadow: 0 6px 0 #5b21b6; }
.btn.ko { background: var(--ko); color: #3f0712; box-shadow: 0 6px 0 #be123c; }
.btn.gold { background: var(--yellow); color: #3a2a00; box-shadow: 0 6px 0 #a16207; }
.btn:disabled { filter: grayscale(1) brightness(.6); pointer-events: none; }
.btn.sm { min-height: 46px; font-size: 16px; border-radius: 14px; padding: 8px 14px; }
.btn.inline { width: auto; display: inline-flex; }
.link { color: var(--cyan); font-weight: 800; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card2); font-weight: 800; font-size: 15px; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--card2); }
.chip.warn { background: rgba(251, 146, 60, .2); color: #fdba74; }
.chip.hot { background: rgba(251, 113, 133, .22); color: #fda4af; }
.chip.ok { background: rgba(74, 222, 128, .18); color: #86efac; }
.bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--lime)); transition: width .6s cubic-bezier(.3, 1.4, .5, 1); }
.x { width: 46px; height: 46px; border-radius: 15px; background: var(--card2); font-size: 20px; display: grid; place-items: center; flex: none; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--lime); animation: rot .8s linear infinite; display: inline-block; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.err { color: var(--ko); font-weight: 800; }

/* ── header home ── */
.hello { display: flex; align-items: center; gap: 12px; }
.ava { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; font-size: 34px; background: linear-gradient(135deg, var(--violet), var(--pink)); flex: none; box-shadow: 0 5px 0 #5b21b6; }
.stats { display: flex; gap: 8px; margin-left: auto; }
.stat { display: flex; align-items: center; gap: 4px; font: 700 18px Fredoka; padding: 6px 11px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.stat.fire { color: var(--orange); }
.stat.fire.off { color: var(--mut); filter: grayscale(1); }
.stat.xp { color: var(--yellow); }

/* ── neuro (mascotte) ── */
.neuro { width: 84px; flex: none; }
.neuro svg { width: 100%; height: auto; display: block; overflow: visible; }
.neuro.bob svg { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.say { display: flex; gap: 12px; align-items: flex-end; }
.bubble { position: relative; background: #fff; color: #1e1b4b; border-radius: 20px 20px 20px 6px; padding: 12px 16px; font-weight: 800; flex: 1; }
.bubble b { color: #6d28d9; }

/* ── meta del giorno ── */
.goal { display: flex; gap: 16px; align-items: center; }
.ring { width: 76px; height: 76px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .lbl { position: absolute; inset: 0; display: grid; place-items: center; font: 700 17px Fredoka; text-align: center; line-height: 1; }

/* ── mappa del corso ── */
.isla { margin-top: 26px; }
.isla-h {
  border-radius: 24px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 45%, #000);
}
.isla-h .em { font-size: 40px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25)); }
.isla-h h3 { font-size: 21px; }
.isla-h p { margin: 2px 0 0; font-size: 14.5px; opacity: .92; }
.isla-h .cnt { margin-left: auto; font: 700 16px Fredoka; background: rgba(0, 0, 0, .22); padding: 6px 11px; border-radius: 12px; white-space: nowrap; }
.isla.locked .isla-h { filter: grayscale(.85) brightness(.6); }
.path { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 6px; }
.node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.node:nth-child(3n+1) { transform: translateX(-62px); }
.node:nth-child(3n+3) { transform: translateX(62px); }
.node .b {
  width: 82px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 34px;
  background: var(--c); box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 50%, #000); transition: transform .1s;
}
.node .b:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 50%, #000); }
.node.done .b { background: var(--yellow); box-shadow: 0 7px 0 #a16207; }
.node.lock .b { background: #2c2950; box-shadow: 0 7px 0 #17153a; filter: grayscale(1); font-size: 26px; }
.node .t { font-weight: 800; font-size: 14px; max-width: 150px; text-align: center; color: var(--mut); }
.node.cur .t { color: #fff; }
.node.cur .b { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 50%, #000), 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 50% { box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 50%, #000), 0 0 0 14px transparent; } }
.node .go { position: absolute; top: -30px; background: #fff; color: #1e1b4b; font: 800 13px Nunito; padding: 4px 10px; border-radius: 10px; letter-spacing: .5px; animation: bob 1.6s ease-in-out infinite; white-space: nowrap; }
.node .go::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }

/* ── missioni ── */
.mis { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.mis .em { font-size: 30px; width: 46px; text-align: center; flex: none; }
.mis.ready { border-color: var(--yellow); background: rgba(250, 204, 21, .08); }

/* ── lezione / player ── */
.top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.top .bar { flex: 1; height: 16px; }
.step { animation: in .28s ease; }
@keyframes in { from { opacity: 0; transform: translateY(12px); } }
.step h2 { font-size: 26px; margin-bottom: 12px; line-height: 1.15; }
.step .big-e { font-size: 76px; text-align: center; line-height: 1; margin: 10px 0 16px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
.step p.txt { font-size: 19px; white-space: pre-line; margin: 0; line-height: 1.5; }
.qq { font: 600 23px/1.25 Fredoka; margin-bottom: 18px; }
.opts { display: flex; flex-direction: column; gap: 12px; }
.opt {
  text-align: left; padding: 16px 18px; border-radius: 18px; background: var(--card); border: 2px solid var(--line);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35); font-weight: 800; font-size: 17.5px; transition: transform .08s;
}
.opt:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.opt.sel { border-color: var(--cyan); background: rgba(34, 211, 238, .12); }
.opt.ok { border-color: var(--ok); background: rgba(74, 222, 128, .16); }
.opt.ko { border-color: var(--ko); background: rgba(251, 113, 133, .16); animation: shake .35s; }
.opt[disabled] { pointer-events: none; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tfb { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tfb .opt { text-align: center; font: 600 21px Fredoka; padding: 22px 10px; }
.foot {
  position: sticky; bottom: 0; margin: 26px -16px 0; padding: 16px 16px calc(16px + var(--safe-b));
  background: linear-gradient(transparent, var(--bg) 30%);
}
.fb { border-radius: 20px; padding: 16px 18px; margin-bottom: 14px; animation: in .25s ease; }
.fb.ok { background: rgba(74, 222, 128, .15); border: 2px solid rgba(74, 222, 128, .5); }
.fb.ko { background: rgba(251, 113, 133, .13); border: 2px solid rgba(251, 113, 133, .5); }
.fb.info { background: rgba(34, 211, 238, .12); border: 2px solid rgba(34, 211, 238, .45); }
.fb h3 { font-size: 20px; margin-bottom: 4px; }
.fb.ok h3 { color: var(--ok); } .fb.ko h3 { color: var(--ko); } .fb.info h3 { color: var(--cyan); }
.sortcard { text-align: center; padding: 26px 18px; border-radius: 22px; background: #fff; color: #1e1b4b; font: 600 22px Fredoka; box-shadow: 0 6px 0 #c7c3ef; margin-bottom: 18px; animation: in .25s ease; }
.ordl { display: flex; flex-direction: column; gap: 10px; }
.ordl .opt { display: flex; gap: 12px; align-items: center; }
.ordl .n { width: 32px; height: 32px; border-radius: 10px; background: var(--card2); display: grid; place-items: center; font: 700 16px Fredoka; flex: none; }
.ordl .opt.sel .n { background: var(--cyan); color: #042f3a; }
.wordgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wordgrid div { background: #fff; color: #1e1b4b; border-radius: 16px; padding: 14px; text-align: center; font: 600 20px Fredoka; }
.timer { font: 700 44px Fredoka; text-align: center; color: var(--yellow); }
.reading { background: #fff; color: #1e1b4b; border-radius: 22px; padding: 20px; font-size: 18.5px; line-height: 1.55; }
.reading b { color: #6d28d9; }
.checks .opt { display: flex; gap: 12px; align-items: center; }
.checks .bx { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--mut); display: grid; place-items: center; flex: none; font-size: 16px; }
.checks .opt.ok .bx { background: var(--ok); border-color: var(--ok); color: #052e16; }

/* flashcard */
.flash { perspective: 1200px; }
.flash .in { position: relative; min-height: 230px; transition: transform .5s; transform-style: preserve-3d; }
.flash.flip .in { transform: rotateY(180deg); }
.flash .f, .flash .bk {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 24px; padding: 24px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; font: 600 23px/1.3 Fredoka;
}
.flash .f { background: linear-gradient(135deg, #312e81, #4c1d95); border: 2px solid rgba(255, 255, 255, .15); }
.flash .bk { background: #fff; color: #1e1b4b; transform: rotateY(180deg); }
.flash .lab { font: 800 12.5px Nunito; letter-spacing: 1px; text-transform: uppercase; opacity: .65; margin-bottom: 10px; }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grades button { border-radius: 18px; padding: 12px 6px; font: 600 15px Fredoka; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.grades button span { font-size: 30px; }
.grades .g0 { background: rgba(251, 113, 133, .2); border: 2px solid rgba(251, 113, 133, .5); }
.grades .g1 { background: rgba(250, 204, 21, .16); border: 2px solid rgba(250, 204, 21, .45); }
.grades .g2 { background: rgba(74, 222, 128, .17); border: 2px solid rgba(74, 222, 128, .5); }
.grades button.sug { outline: 3px solid #fff; }

/* curva */
.curva svg { width: 100%; height: auto; display: block; }

/* temas */
.grid-t { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tema { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 5px 0 rgba(0, 0, 0, .3); transition: transform .1s; }
.tema:active { transform: translateY(3px); }
.tema .em { font-size: 34px; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--card2); flex: none; }
.tema h3 { font-size: 19px; line-height: 1.2; }
.new { border: 2px dashed rgba(163, 230, 53, .5); background: rgba(163, 230, 53, .06); justify-content: center; align-items: center; min-height: 150px; color: var(--lime); font: 600 19px Fredoka; }
.subj { display: flex; flex-wrap: wrap; gap: 8px; }
.subj button { padding: 9px 13px; border-radius: 14px; background: var(--card2); border: 2px solid transparent; font-weight: 800; font-size: 15px; }
.subj button.on { border-color: var(--lime); background: rgba(163, 230, 53, .14); }
.pags { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pag { position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; background: var(--card2); display: grid; place-items: center; font-size: 30px; border: 1px solid var(--line); }
.pag img { width: 100%; height: 100%; object-fit: cover; }
.pag .ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(12, 10, 31, .65); font: 800 12px Nunito; text-align: center; padding: 6px; }
.pag .ov.e { background: rgba(127, 29, 29, .75); }
.pag .del { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 9px; background: rgba(0, 0, 0, .55); font-size: 14px; display: grid; place-items: center; }
.acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.act { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 5px 0 rgba(0, 0, 0, .3); text-align: left; }
.act:active { transform: translateY(3px); }
.act .em { font-size: 30px; }
.act b { font: 600 17px Fredoka; }
.act.hl { background: linear-gradient(135deg, rgba(163, 230, 53, .2), rgba(34, 211, 238, .12)); border-color: rgba(163, 230, 53, .5); }
.ideas li { margin: 8px 0; }
.ideas { padding-left: 4px; list-style: none; margin: 0; }
.ideas li { display: flex; gap: 10px; align-items: flex-start; }
.ideas li .x { width: 36px; height: 36px; font-size: 17px; border-radius: 12px; }
.klist .k { padding: 12px 14px; border-radius: 14px; background: var(--card); margin-bottom: 8px; }
.plan .d { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.plan .d:last-child { border-bottom: 0; }
.plan .d .e { font-size: 24px; width: 32px; text-align: center; }
.plan .d.today { background: rgba(163, 230, 53, .08); border-radius: 12px; padding: 10px; }

/* foco */
.fring { width: min(300px, 76vw); aspect-ratio: 1; margin: 10px auto; position: relative; }
.fring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fring .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fring .lbl b { font: 700 58px Fredoka; }
.breath { width: 200px; height: 200px; margin: 20px auto; border-radius: 50%; background: radial-gradient(circle, var(--cyan), var(--violet)); display: grid; place-items: center; font: 700 22px Fredoka; transform: scale(.55); box-shadow: 0 0 60px rgba(34, 211, 238, .4); }

/* yo */
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.medal { text-align: center; padding: 12px 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.medal .em { font-size: 34px; }
.medal .n { font-weight: 800; font-size: 12.5px; line-height: 1.2; margin-top: 4px; }
.medal.off { opacity: .35; filter: grayscale(1); }
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sgrid div { padding: 14px 8px; border-radius: 18px; background: var(--card); text-align: center; }
.sgrid b { display: block; font: 700 24px Fredoka; }
.sgrid span { font-size: 12.5px; color: var(--mut); font-weight: 800; }
.week { display: flex; gap: 8px; align-items: flex-end; height: 110px; }
.week div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.week i { width: 100%; border-radius: 8px 8px 4px 4px; background: linear-gradient(var(--lime), var(--cyan)); min-height: 4px; }
.week span { font-size: 12px; color: var(--mut); font-weight: 800; }
.avas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avas button { font-size: 30px; padding: 8px 0; border-radius: 14px; background: var(--card2); }
.avas button.on { outline: 3px solid var(--lime); }

/* modal, toast, festa */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(5, 4, 20, .72); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 600px; max-height: 92dvh; overflow: auto; background: var(--bg2); border-radius: 28px 28px 0 0; padding: 22px 18px calc(22px + var(--safe-b)); border: 1px solid var(--line); animation: up .3s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes up { from { transform: translateY(60px); opacity: 0; } }
@media (min-width: 640px) { .modal { align-items: center; } .sheet { border-radius: 28px; } }
.party { text-align: center; padding: 10px 0; }
.party .big { font-size: 90px; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.2) rotate(-20deg); } }
.party h2 { font-size: 30px; margin: 8px 0; }
.xpgain { font: 700 44px Fredoka; color: var(--yellow); }
.toast { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); z-index: 80; background: #fff; color: #1e1b4b; padding: 12px 18px; border-radius: 16px; font-weight: 800; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: drop .3s ease; max-width: 92vw; }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.mic { width: 52px; height: 52px; border-radius: 16px; background: var(--card2); font-size: 24px; display: grid; place-items: center; flex: none; }
.mic.on { background: var(--ko); animation: pulse2 1.2s infinite; }
@keyframes pulse2 { 50% { box-shadow: 0 0 0 10px rgba(251, 113, 133, .25); } }
.stars { font-size: 30px; letter-spacing: 4px; }
.login { min-height: 90dvh; display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 420px; margin: 0 auto; }
.login .neuro { width: 140px; margin: 0 auto; }
.brand { font: 700 38px/1 Fredoka; text-align: center; }
.brand span { color: var(--lime); }