/* ============================================================
   Dictée — two material worlds: the slate, and the graded copy.
   ============================================================ */
:root{
  --board-deep:#14231d; --board-mid:#1b2f27; --board-edge:#0d1713;
  --wood-1:#8a5c33; --wood-2:#5e3b20; --wood-3:#3c2513;
  --chalk:#eee9db; --chalk-dim:rgba(238,233,219,.58); --chalk-faint:rgba(238,233,219,.24);
  --chalk-warm:#f2d68c;
  --paper:#f7f2e4; --paper-shade:#e9e0cb; --rule:#b8cbdc; --ink:#2b3a4f;
  --pen:#c0392b; --pen-soft:rgba(192,57,43,.14);
  --gold:#e9c46a; --silver:#cfd4d8; --bronze:#c98b56;
  --win:#5fa877; --lose:#c0724b;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hand:'Caveat','Comic Sans MS',cursive;
  --r-m:16px; --r-l:26px; --tap:48px;
}
html[data-board="noir"]{ --board-deep:#191817; --board-mid:#232120; --board-edge:#0b0a0a; }
html[data-board="craie"]{ --board-deep:#1d2a38; --board-mid:#26374a; --board-edge:#101a24; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:var(--ui);color:var(--chalk);background:#22160d;
  overscroll-behavior:none;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea{font:inherit}
:focus-visible{outline:3px solid var(--chalk-warm);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:0;height:0}

#app{
  min-height:100dvh;display:flex;flex-direction:column;width:100%;max-width:760px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 12px)
          calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 12px);
  background:radial-gradient(120% 80% at 50% -10%, #3a2415 0%, #22160d 60%, #180f08 100%);
}
.slate{
  position:relative;flex:1;display:flex;flex-direction:column;min-height:0;
  border-radius:var(--r-l);padding:14px;
  background:linear-gradient(155deg,var(--wood-1) 0%,var(--wood-2) 42%,var(--wood-3) 100%);
  box-shadow:0 1px 0 rgba(255,224,180,.35) inset,0 -2px 0 rgba(0,0,0,.45) inset,0 26px 50px -22px rgba(0,0,0,.85);
}
.slate::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-l);pointer-events:none;opacity:.7;
  background:repeating-linear-gradient(97deg,rgba(0,0,0,.10) 0 2px,rgba(255,255,255,.045) 2px 5px,rgba(0,0,0,0) 5px 11px);
  mix-blend-mode:overlay;
}
.board{
  position:relative;flex:1;min-height:0;border-radius:14px;padding:18px 16px 12px;
  display:flex;flex-direction:column;overflow:hidden;transition:background .5s ease;
  background:
    radial-gradient(140% 100% at 20% 0%,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 55%),
    radial-gradient(120% 90% at 80% 100%,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 50%),
    linear-gradient(180deg,var(--board-mid) 0%,var(--board-deep) 55%,var(--board-edge) 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.5) inset,0 14px 34px -10px rgba(0,0,0,.7) inset;
}
.board::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;filter:blur(2px);
  background:
    radial-gradient(60% 22% at 22% 34%,rgba(238,233,219,.10),transparent 70%),
    radial-gradient(52% 18% at 76% 62%,rgba(238,233,219,.075),transparent 70%),
    radial-gradient(40% 14% at 48% 84%,rgba(238,233,219,.06),transparent 70%);
}
#dust{position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;opacity:.7}

.screen{display:none;flex:1;min-height:0;flex-direction:column;position:relative;z-index:2}
.screen.on{display:flex;animation:screenIn .26s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}

/* ---------- chalk typography ---------- */
.board-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.brand{font-family:var(--hand);font-size:26px;line-height:1;font-weight:700;text-shadow:0 0 8px rgba(238,233,219,.22)}
.brand small{display:block;font-size:14px;color:var(--chalk-dim);font-weight:500}
.date{font-family:var(--hand);font-size:19px;color:var(--chalk-dim);text-align:right;line-height:1.15;white-space:nowrap}
.date b{display:block;color:var(--chalk-warm);font-weight:600}
.kicker{font-family:var(--hand);font-size:23px;color:var(--chalk-dim)}
.title{font-family:var(--hand);font-weight:700;font-size:clamp(32px,8.5vw,50px);line-height:1.02;margin:0;
  text-shadow:0 0 10px rgba(238,233,219,.18),0 1px 0 rgba(0,0,0,.4)}
h2.sect{font-family:var(--hand);font-size:26px;margin:14px 0 6px;font-weight:700}
.underline-chalk{height:9px;width:min(230px,60%);margin-top:6px;filter:blur(.4px);opacity:.85;
  background:
    radial-gradient(50% 100% at 10% 50%,rgba(238,233,219,.9),transparent 70%),
    radial-gradient(60% 90% at 55% 40%,rgba(238,233,219,.75),transparent 72%),
    radial-gradient(45% 80% at 92% 60%,rgba(238,233,219,.6),transparent 72%);
}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{font-size:12px;font-weight:500;padding:6px 11px;border-radius:999px;color:var(--chalk-dim);
  border:1px dashed rgba(238,233,219,.34)}
.pill.warm{color:var(--chalk-warm);border-color:rgba(242,214,140,.5)}
.pill.solid{background:rgba(238,233,219,.1);border-style:solid;border-color:transparent;color:var(--chalk)}
.muted{color:var(--chalk-dim);font-size:13.5px;line-height:1.6}

/* ---------- buttons ---------- */
.cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:0 24px;border-radius:999px;font-family:var(--hand);font-size:25px;font-weight:700;
  color:#17231e;background:linear-gradient(180deg,#f6f2e6,#ded7c4);
  box-shadow:0 6px 0 -1px rgba(0,0,0,.45),0 12px 22px -10px rgba(0,0,0,.8);
  transition:transform .12s ease,box-shadow .12s ease}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 -1px rgba(0,0,0,.45)}
.cta.ghost{background:transparent;color:var(--chalk);border:2px solid rgba(238,233,219,.42);box-shadow:none;font-size:21px}
.cta.ghost:active{transform:translateY(2px);box-shadow:none}
.cta.small{min-height:38px;font-size:19px;padding:0 16px}
.cta[disabled]{opacity:.42;pointer-events:none}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.linkish{font-size:13.5px;color:var(--chalk-dim);text-decoration:underline;text-underline-offset:4px;
  text-decoration-style:dotted;padding:10px 2px}
.icon-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(238,233,219,.26);color:var(--chalk-dim)}
.icon-btn:active{background:rgba(238,233,219,.1)}
.board-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:10px}
.chalk-stick{width:70px;height:12px;border-radius:4px;transform:rotate(-2.5deg);flex:none;
  background:linear-gradient(180deg,#fbf7ec,#cfc7b2 70%,#a89f8c);box-shadow:0 5px 12px -4px rgba(0,0,0,.8)}
.chalk-stick.short{width:36px;opacity:.75;transform:rotate(5deg)}
.tray{display:flex;align-items:flex-end;gap:10px}

/* ---------- tab bar ---------- */
.tabs{display:flex;gap:4px;margin-top:12px;padding:5px;border-radius:16px;background:rgba(0,0,0,.35)}
.tabs button{flex:1;padding:9px 4px;border-radius:12px;font-size:12px;font-weight:500;color:var(--chalk-dim);
  display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
.tabs button .ic{font-size:17px;line-height:1}
.tabs button.on{background:rgba(238,233,219,.14);color:var(--chalk);font-weight:600}
.tabs.hidden{display:none}

/* ---------- dictation ---------- */
.phase-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.phase{font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:999px;color:var(--chalk-faint);
  border:1px solid rgba(238,233,219,.18)}
.phase.active{color:#17231e;background:var(--chalk-warm);border-color:transparent}
.phase.done{color:var(--chalk-dim);border-color:rgba(238,233,219,.4)}
.progress{height:4px;border-radius:999px;background:rgba(238,233,219,.14);overflow:hidden;margin:12px 0 4px}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--chalk-warm),var(--chalk));transition:width .35s linear}
.speaking{font-family:var(--hand);font-size:21px;color:var(--chalk-dim);display:flex;align-items:center;gap:10px;min-height:28px}
.wave{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.wave i{width:3px;height:5px;background:var(--chalk-warm);border-radius:2px;animation:w 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}
.wave i:nth-child(4){animation-delay:.36s}.wave i:nth-child(5){animation-delay:.48s}
@keyframes w{0%,100%{height:5px}50%{height:18px}}
.wave.idle i{animation:none;height:5px;background:var(--chalk-faint)}
#answer{flex:1;min-height:120px;width:100%;resize:none;background:transparent;border:0;padding:6px 2px 10px;
  color:var(--chalk);font-family:var(--hand);font-size:27px;line-height:38px;caret-color:var(--chalk-warm);
  background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(238,233,219,.16) 37px 38px);
  background-position:0 6px;background-attachment:local}
#answer::placeholder{color:var(--chalk-faint)}
#answer:focus{outline:none}
#answer:disabled{opacity:.55}
.accents{display:flex;gap:6px;overflow-x:auto;padding:6px 0 2px}
.accents button{min-width:36px;height:36px;border-radius:9px;font-family:var(--hand);font-size:22px;flex:none;
  background:rgba(238,233,219,.09);border:1px solid rgba(238,233,219,.16);color:var(--chalk)}
.accents button:active{background:rgba(238,233,219,.22)}
.counter{font-size:12px;color:var(--chalk-faint);text-align:right;padding-top:4px}
.replays{font-size:12.5px;color:var(--chalk-dim);display:flex;align-items:center;gap:7px}
.dots{display:inline-flex;gap:4px;align-items:center}
.dots span.d{width:7px;height:7px;border-radius:50%;background:var(--chalk-warm)}
.dots span.d.spent{background:rgba(238,233,219,.2)}

/* ---------- graded copy ---------- */
.paper{flex:1;min-height:0;overflow-y:auto;border-radius:8px;padding:18px 16px 22px 44px;color:var(--ink);position:relative;
  background:linear-gradient(90deg,transparent 0 30px,rgba(217,132,122,.8) 30px 31.5px,transparent 31.5px),
             linear-gradient(180deg,var(--paper),var(--paper-shade));
  box-shadow:0 20px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.25)}
.paper h2{font-family:var(--hand);font-size:34px;margin:0 0 2px;font-weight:700;line-height:32px}
.paper .sub{font-size:13px;color:#6a7488;margin-bottom:16px}
.grade{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-family:var(--hand);color:var(--pen);
  border-bottom:2px solid var(--pen-soft);padding-bottom:8px;margin-bottom:12px}
.grade .note{font-size:60px;font-weight:700;line-height:.9;transform:rotate(-4deg)}
.grade .over{font-size:25px;opacity:.75}
.grade .fautes{font-size:24px;margin-left:auto;transform:rotate(-2deg)}
.appreciation{font-family:var(--hand);font-size:22px;color:var(--pen);line-height:29px;transform:rotate(-.7deg);margin-bottom:14px}
.corr{font-family:var(--hand);font-size:26px;line-height:44px;color:var(--ink);word-break:break-word;padding-top:16px;
  background-image:repeating-linear-gradient(180deg,transparent 0 43px,var(--rule) 43px 44px);background-position:0 16px}
.corr .tok{position:relative;display:inline-block;white-space:pre-wrap}
.corr .bad{color:var(--pen);text-decoration:line-through;text-decoration-thickness:2px}
.corr .fix{position:absolute;left:50%;top:-25px;transform:translateX(-50%) rotate(-2deg);font-size:19px;
  color:var(--pen);white-space:nowrap;line-height:1}
.corr .miss{color:var(--pen);background:var(--pen-soft);border-radius:4px;padding:0 3px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--ui);font-size:12px;color:#6a7488;margin-top:16px}
.legend b{font-weight:600;color:var(--pen)}
.tally{margin-top:16px;border-top:1px solid rgba(43,58,79,.18);padding-top:10px}
.tally-row{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.9;color:#3d4a5e}
.tally-row .n{font-family:var(--hand);font-size:21px;color:var(--pen);min-width:32px;font-weight:700}
.tally-row .bar{flex:1;height:6px;border-radius:4px;background:rgba(43,58,79,.1);overflow:hidden}
.tally-row .bar i{display:block;height:100%;background:var(--pen);opacity:.55}
.stamp{position:absolute;top:14px;right:12px;font-family:var(--hand);font-size:18px;font-weight:700;color:var(--pen);
  border:2.5px solid var(--pen);border-radius:8px;padding:3px 10px;transform:rotate(7deg);opacity:.8;text-align:center}
.result-strip{display:flex;gap:10px;align-items:center;padding:10px 2px 0;flex-wrap:wrap}
.xp-chip{font-size:13px;color:var(--chalk-warm);border:1px solid rgba(242,214,140,.45);border-radius:999px;padding:6px 12px}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:10px}

/* ---------- rows, lists ---------- */
.row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px dashed rgba(238,233,219,.16)}
.row:last-child{border-bottom:0}
.row .g{font-family:var(--hand);font-size:26px;font-weight:700;color:var(--chalk-warm);min-width:54px;text-align:center;line-height:1}
.row .g small{display:block;font-family:var(--ui);font-size:10px;color:var(--chalk-faint);font-weight:500}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t span{font-size:12px;color:var(--chalk-dim)}
.row.me{background:rgba(242,214,140,.09);border-radius:12px}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:rgba(238,233,219,.14);flex:none;
  display:grid;place-items:center;font-family:var(--hand);font-size:20px;color:var(--chalk)}
.place{font-family:var(--hand);font-size:22px;min-width:30px;text-align:center;color:var(--chalk-dim)}
.place.p1{color:var(--gold)}.place.p2{color:var(--silver)}.place.p3{color:var(--bronze)}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  font-family:var(--hand);font-size:23px;color:var(--chalk-dim);padding:24px}

/* podium */
.podium{display:flex;align-items:flex-end;gap:8px;margin:10px 0 4px}
.podium .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.podium .bar{width:100%;border-radius:10px 10px 0 0;background:linear-gradient(180deg,rgba(238,233,219,.22),rgba(238,233,219,.06));
  display:grid;place-items:center;font-family:var(--hand);font-size:24px;color:var(--chalk)}
.podium .col.p1 .bar{height:86px;background:linear-gradient(180deg,rgba(233,196,106,.5),rgba(233,196,106,.1))}
.podium .col.p2 .bar{height:66px}
.podium .col.p3 .bar{height:52px}
.podium .nm{font-size:11.5px;color:var(--chalk-dim);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* segmented control */
.seg{display:flex;gap:6px;background:rgba(0,0,0,.3);padding:4px;border-radius:999px;overflow-x:auto}
.seg button{padding:8px 13px;border-radius:999px;font-size:13px;color:var(--chalk-dim);font-weight:500;white-space:nowrap}
.seg button.on{background:var(--chalk);color:#17231e;font-weight:600}

/* ---------- profile ---------- */
.profile-head{display:flex;gap:14px;align-items:center;padding:6px 0 12px}
.profile-head .avatar{width:64px;height:64px;font-size:30px}
.profile-head h3{margin:0;font-family:var(--hand);font-size:30px;font-weight:700}
.profile-head span{font-size:13px;color:var(--chalk-warm)}
.xpbar{height:8px;border-radius:999px;background:rgba(238,233,219,.14);overflow:hidden;margin:8px 0 4px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--chalk-warm),#fff6dd)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.stat{border:1px solid rgba(238,233,219,.2);border-radius:14px;padding:11px 8px;text-align:center}
.stat b{display:block;font-family:var(--hand);font-size:28px;line-height:1;color:var(--chalk-warm)}
.stat span{font-size:11px;color:var(--chalk-dim)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.badge{border:1px solid rgba(238,233,219,.18);border-radius:14px;padding:10px 8px;text-align:center;opacity:.38}
.badge.got{opacity:1;border-color:rgba(242,214,140,.55);background:rgba(242,214,140,.08)}
.badge .ic{font-size:22px;line-height:1.4}
.badge b{display:block;font-size:11.5px;font-weight:600}
.badge span{font-size:10px;color:var(--chalk-dim);line-height:1.35;display:block;margin-top:2px}
.weak{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.weak-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--chalk-dim)}
.weak-row .bar{flex:1;height:7px;border-radius:4px;background:rgba(238,233,219,.12);overflow:hidden}
.weak-row .bar i{display:block;height:100%;background:var(--chalk-warm);opacity:.75}

/* duel */
.duel-card{border:1px dashed rgba(238,233,219,.3);border-radius:18px;padding:16px;margin:8px 0}
.duel-vs{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:center}
.duel-vs .side{flex:1}
.duel-vs .side b{display:block;font-family:var(--hand);font-size:38px;line-height:1.1}
.duel-vs .side span{font-size:12px;color:var(--chalk-dim)}
.duel-vs .mid{font-family:var(--hand);font-size:22px;color:var(--chalk-faint)}
.verdict{font-family:var(--hand);font-size:30px;text-align:center;margin-top:10px}
.verdict.win{color:var(--win)}.verdict.lose{color:var(--lose)}

/* ---------- sheets, toast, ads ---------- */
.veil{position:fixed;inset:0;z-index:60;display:none;background:rgba(8,12,10,.72);backdrop-filter:blur(5px);
  align-items:flex-end;justify-content:center}
.veil.on{display:flex;animation:fade .2s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:560px;background:linear-gradient(180deg,#243a31,#16241e);
  border-radius:22px 22px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom) + 20px);
  border-top:1px solid rgba(238,233,219,.18);max-height:90dvh;overflow-y:auto;
  animation:up .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes up{from{transform:translateY(30px)}to{transform:none}}
.sheet h3{margin:2px 0 4px;font-family:var(--hand);font-size:27px;font-weight:700}
.sheet p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--chalk-dim)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;
  border-bottom:1px dashed rgba(238,233,219,.14);font-size:14px}
.opt:last-of-type{border-bottom:0}
.field{width:100%;background:rgba(0,0,0,.28);border:1px solid rgba(238,233,219,.18);border-radius:12px;
  padding:12px;color:var(--chalk);font-size:14px;line-height:1.5}
textarea.field{min-height:130px;resize:vertical}
.ad{text-align:center;padding:22px 8px;background:linear-gradient(180deg,#2a2118,#1a140e);border-radius:16px;
  border:1px dashed rgba(238,233,219,.22)}
.ad .tag{font-size:10.5px;letter-spacing:1.4px;color:var(--chalk-faint);margin-bottom:12px}
.ad .box{height:160px;border-radius:12px;display:grid;place-items:center;color:var(--chalk-dim);font-size:13px;padding:16px;
  background:repeating-linear-gradient(45deg,rgba(238,233,219,.05) 0 12px,transparent 12px 24px)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%);
  background:rgba(12,20,16,.95);border:1px solid rgba(238,233,219,.2);color:var(--chalk);padding:11px 18px;
  border-radius:999px;font-size:13.5px;z-index:90;opacity:0;pointer-events:none;max-width:90vw;text-align:center;
  transition:opacity .25s ease,transform .25s ease}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid rgba(238,233,219,.25);
  border-top-color:var(--chalk-warm);animation:spin .8s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.offline{font-size:11.5px;color:var(--chalk-faint);text-align:center;padding:6px}

@media (max-width:380px){
  .board{padding:15px 13px 10px}
  .corr{font-size:23px;line-height:40px}
  .paper{padding-left:38px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}