:root{
  --bg:#FBF8FF;--card:#fff;--ink:#2B1A38;--mut:#8A7B99;--line:#ECE4F3;
  --pri:#602B7A;--pri-d:#46195C;--ok:#3CC46A;--ok-d:#2A9C50;--ok-bg:#E3F9E9;
  --ko:#FF5A5F;--ko-d:#D63C42;--ko-bg:#FFE8E9;--gold:#FFC93C;--gold-d:#E0A300;--blue:#36A9E1
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Lexend,system-ui,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:disabled{cursor:default}
h1,h2,h3{font-weight:900;margin:0}
.page{max-width:580px;margin:0 auto;padding:0 16px 110px}
.page.solo{padding:40px 16px}

/* Botons 3D */
.btn{--c:var(--pri);--cd:color-mix(in srgb,var(--c) 72%,#000);display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--c);color:#fff;border-radius:16px;padding:14px 22px;font-weight:900;font-size:16px;letter-spacing:.06em;box-shadow:0 5px 0 var(--cd);transition:transform .08s,box-shadow .08s,filter .15s;text-transform:uppercase}
.btn:hover:not(:disabled){filter:brightness(1.07)}
.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--cd)}
.btn:disabled{--c:#E3DDE9;color:#A99BB6;box-shadow:0 5px 0 #CFC5D9}
.btn.big{width:100%;padding:17px;font-size:18px}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:12px;box-shadow:0 4px 0 var(--cd)}
.btn.ghost{--c:#fff;--cd:var(--line);color:var(--pri);border:2px solid var(--line)}
.btn.gold{--c:var(--gold);--cd:var(--gold-d);color:#5A3B00}
.btn.red{--c:var(--ko)}.btn.orange{--c:#FF9A3C}
.btn.redt{color:var(--ko-d)}
.link{display:block;margin:18px auto 0;color:var(--mut);font-weight:800;text-decoration:underline}

/* Barra superior i navegació */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 12px;background:linear-gradient(var(--bg) 78%,rgba(251,248,255,0))}
.avatar{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--line);padding:2px;display:grid;place-items:center}
.avatar svg{width:40px;height:40px}
.chips{display:flex;gap:8px}
.chip{display:flex;align-items:center;gap:5px;border:2px solid var(--line);background:#fff;border-radius:14px;padding:6px 11px;font-weight:900;font-size:17px}
.chip.fire{color:#E8590C}.chip.off{filter:grayscale(1);color:var(--mut)}.chip.gem{color:#1C84C6}.chip.lvl{color:#B98200}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;background:#fff;border-top:2px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.nav button{flex:1;max-width:116px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:14px;font-size:12px;font-weight:800;color:var(--mut);border:2px solid transparent}
.nav .ni{font-size:24px;filter:grayscale(.6);transition:transform .2s}
.nav button.on{color:var(--pri);background:#F4ECFA;border-color:#E2D2EF}
.nav button.on .ni{filter:none;transform:scale(1.12)}

/* Objectiu diari */
.goal{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:20px;padding:12px 16px;margin:4px 0 22px}
.gchar{width:66px;flex:none}.gchar svg{width:66px;height:66px}
.gbody{flex:1}.gmsg{font-size:16px;font-weight:900;margin-bottom:8px}
.gbar{height:14px;background:#EEE8F3;border-radius:8px;overflow:hidden}
.gbar div{height:100%;background:linear-gradient(90deg,#FFC93C,#FF9A3C);border-radius:8px;transition:width .6s}
.gnum{font-size:13px;color:var(--mut);margin-top:5px}

/* Unitats i camí */
.unit{margin-bottom:26px}
.ubanner{--ucd:color-mix(in srgb,var(--uc) 72%,#000);display:flex;align-items:center;gap:10px;background:var(--uc);color:#fff;border-radius:22px;padding:16px 16px 16px 20px;box-shadow:0 5px 0 var(--ucd);position:relative;overflow:hidden}
.ubanner::after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12)}
.utext{flex:1;position:relative;z-index:1}
.ukick{font-size:13px;font-weight:900;letter-spacing:.12em;opacity:.85}
.ubanner h2{font-size:23px;line-height:1.15;margin:2px 0 4px}
.ubanner p{margin:0;font-size:14.5px;opacity:.95;line-height:1.35}
.uguide{width:74px;flex:none;position:relative;z-index:1}.uguide svg{width:74px;height:74px}
.unit.closed .ubanner{--uc:#B9AEC6}
.path{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:58px 0 10px}
.nwrap{position:relative;display:flex;flex-direction:column;align-items:center}
.node{--ucd:color-mix(in srgb,var(--uc) 70%,#000);width:74px;height:68px;border-radius:50%;background:var(--uc);color:#fff;font-size:30px;font-weight:900;box-shadow:0 7px 0 var(--ucd);display:grid;place-items:center;transition:transform .1s,box-shadow .1s;position:relative}
.node:active{transform:translateY(6px);box-shadow:0 1px 0 var(--ucd)}
.node.locked{background:#E6E0EC;box-shadow:0 7px 0 #CEC4D8;font-size:24px}
.node.gold{background:var(--gold);box-shadow:0 7px 0 var(--gold-d);color:#6B4A00}
.node.rep{width:86px;height:78px;font-size:36px}
.node.cur{animation:breathe 1.6s ease-in-out infinite}
.node.cur::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:5px solid color-mix(in srgb,var(--uc) 35%,transparent)}
.tip{position:absolute;bottom:calc(100% + 12px);white-space:nowrap;background:#fff;color:var(--uc);border:2px solid var(--line);border-radius:12px;padding:7px 12px;font-weight:900;font-size:14px;letter-spacing:.06em;animation:float 1.6s ease-in-out infinite;z-index:2}
.tip::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:#fff;border:2px solid var(--line);border-top:0;border-left:0;transform:translate(-50%,-6px) rotate(45deg)}
.pguide{position:absolute;right:4%;top:120px;width:110px;pointer-events:none}
.pguide.l{right:auto;left:4%;top:250px}
.pguide svg{width:110px;height:110px}
.unit.closed .pguide{filter:grayscale(1);opacity:.45}
.stars{display:inline-flex;gap:1px;color:#D8CFE2;font-style:normal}
.stars i{font-style:normal}.stars i.on{color:var(--gold)}
.stars.mini{margin-top:9px;font-size:15px;text-shadow:0 1px 0 #fff}
.theend{text-align:center;color:var(--mut);padding:10px 0 20px}

/* Personatges */
.char{display:block;overflow:visible}
.char .cb{transform-origin:60px 112px;animation:bob 2.6s ease-in-out infinite}
.char.m-happy .cb{animation:hop .55s ease-out 2}
.char.m-sad .cb{animation:shake .45s ease-in-out}
.char .eye{transform-box:fill-box;transform-origin:center;animation:blink 4.2s infinite}
.char .glow{animation:glow 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-12px) scale(1.04,.97)}70%{transform:translateY(0) scale(1.05,.94)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-3deg)}75%{transform:translateX(5px) rotate(3deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes glow{50%{opacity:.55}}
@keyframes breathe{50%{transform:scale(1.06)}}
@keyframes float{50%{transform:translateY(-5px)}}

/* Modals */
.modal-bg{position:fixed;inset:0;z-index:60;background:rgba(43,26,56,.45);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.modal-bg.center{align-items:center;padding:16px}
.sheet{background:#fff;width:100%;max-width:580px;border-radius:26px 26px 0 0;padding:24px 22px calc(24px + env(safe-area-inset-bottom));animation:up .28s cubic-bezier(.2,1.2,.4,1)}
.sheet.card{border-radius:26px;max-width:420px;padding:26px 22px}
.sheet.cent{text-align:center}
.sheet .sk{font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--uc)}
.sheet h3{font-size:24px;margin:4px 0 8px}
.sheet p{color:#5A4B68;line-height:1.45;margin:0 0 16px;font-size:16px}
.sstars{font-size:28px;margin:-6px 0 14px}
.mchar{width:130px;margin:0 auto 6px}.mchar svg{width:130px;height:130px}
.askt{font-size:18px;text-align:center;margin:4px 0 20px!important;color:var(--ink)!important}
.row2{display:flex;gap:12px}.row2 .btn{flex:1}
.how{list-style:none;padding:0;margin:10px 0 20px;text-align:left}
.how li{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:16px;line-height:1.35}
.how span{font-size:26px;width:36px;text-align:center;flex:none}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:up .3s;max-width:calc(100% - 32px);text-align:center;transition:opacity .4s}
.toast.out{opacity:0}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}

/* Lliçó */
.lesson{position:fixed;inset:0;display:flex;flex-direction:column;background:#fff;z-index:40}
.l-top{display:flex;align-items:center;gap:14px;padding:14px 16px 8px;max-width:680px;width:100%;margin:0 auto}
.xbtn{font-size:24px;color:#B3A6C0;width:36px;height:36px;border-radius:10px}
.xbtn:hover{background:#F4EEF9}
.pbar{flex:1;height:18px;background:#EEE8F3;border-radius:10px;overflow:hidden}
.pfill{height:100%;background:var(--ok);border-radius:10px;transition:width .45s cubic-bezier(.3,1.4,.5,1);position:relative;min-width:18px}
.pfill::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.pbar.time .pfill{background:var(--blue);transition:width .1s linear}
.pbar.time .pfill.low{background:var(--ko)}
.combo{display:flex;align-items:center;gap:3px;font-size:18px;color:#D2C8DC;filter:grayscale(1);min-width:46px}
.combo.on{color:#E8590C;filter:none}
.combo.pop{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.35)}}
.l-body{flex:1;overflow-y:auto;padding:6px 16px 24px;max-width:680px;width:100%;margin:0 auto}
.retry{display:inline-block;background:#FFF3DC;color:#A86B00;border-radius:10px;padding:4px 10px;font-size:14px;margin:4px 0}
.l-q{display:flex;align-items:flex-end;gap:10px;margin:10px 0 16px}
.buddy{width:96px;flex:none}.buddy svg{width:96px;height:96px}
.bubble{position:relative;flex:1;border:2px solid var(--line);border-radius:20px;padding:14px 16px;font-size:20px;line-height:1.4;background:#fff;margin-bottom:22px}
.bubble::before{content:"";position:absolute;left:-9px;bottom:16px;width:16px;height:16px;background:#fff;border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.l-q.long .bubble{font-size:18.5px}
.bubble.big{font-size:19px;margin:0 0 18px}
.bubble.big::before{left:50%;top:-9px;bottom:auto;transform:translateX(-50%) rotate(135deg)}
.l-vis{display:flex;justify-content:center;margin:0 0 20px}
.l-foot{border-top:2px solid var(--line);padding:16px 16px calc(16px + env(safe-area-inset-bottom));transition:background .2s}
.l-foot.ok{background:var(--ok-bg);border-color:transparent}
.l-foot.ko{background:var(--ko-bg);border-color:transparent}
.fwrap{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fb{flex:1 1 260px;min-width:0}
.fb:empty{display:none}
.fbh{font-size:22px;font-weight:900}
.l-foot.ok .fbh{color:var(--ok-d)}.l-foot.ko .fbh{color:var(--ko-d)}
.fb .ans{font-size:17px;color:var(--ko-d);margin-top:4px}
.fb .exp{font-size:15.5px;margin-top:6px;line-height:1.45;color:#4A3B58}
.check{min-width:180px;flex:1 0 180px;padding:16px}
.check.okb{--c:var(--ok)}.check.kob{--c:var(--ko)}

/* Opcions */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts.list{grid-template-columns:1fr}
.opt{position:relative;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;background:#fff;padding:16px 12px;font-size:24px;font-weight:900;min-height:72px;display:flex;align-items:center;justify-content:center;transition:transform .08s,background .15s,border-color .15s}
.opt:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.opts.list .opt{font-size:18px;justify-content:flex-start;padding:14px 14px 14px 46px;min-height:58px;text-align:left}
.opts.big .opt{font-size:38px;min-height:84px}
.opt .k{position:absolute;left:10px;top:9px;font-size:12px;color:#B8ABC5;border:2px solid var(--line);border-radius:7px;padding:0 6px;line-height:18px}
.opts.list .opt .k{top:50%;transform:translateY(-50%)}
.opt.sel{border-color:#84C9F5;background:#E8F5FE;color:#1C84C6}
.opt.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-d);animation:pop .35s}
.opt.wrong{border-color:var(--ko);background:var(--ko-bg);color:var(--ko-d);animation:shake .4s}
.opt:disabled:not(.right):not(.wrong){opacity:.55}

/* Entrada numèrica */
.inbox{margin:0 auto 16px;min-width:170px;width:fit-content;max-width:100%;border:3px solid #D7C6E6;border-radius:18px;padding:8px 24px;font-size:40px;font-weight:900;text-align:center;min-height:70px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--pri)}
.inbox .ph{color:#D5C8E1}
.inbox .iu{font-size:22px;color:var(--mut)}
.inbox.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-d);animation:pop .35s}
.inbox.wrong{border-color:var(--ko);background:var(--ko-bg);color:var(--ko-d);animation:shake .4s}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:330px;margin:0 auto}
.pad button{height:58px;border:2px solid var(--line);border-bottom-width:5px;border-radius:14px;background:#fff;font-size:26px;font-weight:900;transition:transform .06s}
.pad button:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.pad button:disabled{opacity:.4}
.pad .pk-del{color:var(--ko-d);font-size:22px}
.pad .pk-ok{background:var(--ok);border-color:var(--ok-d);color:#fff}

/* Ordenar */
.oslots{min-height:80px;border:2px dashed #D7C6E6;border-radius:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;padding:12px;margin-bottom:18px}
.oslots.right{border:2px solid var(--ok);background:var(--ok-bg)}
.oslots.wrong{border:2px solid var(--ko);background:var(--ko-bg)}
.ohint{color:#BFB2CC;font-size:15px}
.obank{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chipn{border:2px solid var(--line);border-bottom-width:5px;border-radius:14px;background:#fff;padding:12px 16px;font-size:22px;font-weight:900}
.chipn.used{background:#EFEAF4;border-color:#EFEAF4;color:transparent;pointer-events:none}

/* Visuals dels exercicis */
.bignum{font-size:46px;font-weight:900;background:#F4EEF9;border-radius:20px;padding:10px 28px;color:var(--pri);letter-spacing:.02em}
.bignum .frac{font-size:40px}
.eq{font-size:38px;font-weight:900;text-align:center;line-height:1.3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.box{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:54px;border:3px dashed #B9A6CB;border-radius:12px;padding:0 8px;color:#B9A6CB;font-size:30px}
.colop{font-variant-numeric:tabular-nums;font-size:40px;font-weight:900;text-align:right;line-height:1.2;background:#F4EEF9;border-radius:20px;padding:14px 26px;min-width:180px}
.colop .cop{float:left;margin-right:22px;color:var(--pri)}
.colop .ln{border-top:4px solid var(--ink);margin:6px 0 4px}
.colop .cq{color:#B9A6CB}
.words{font-size:26px;font-weight:900;background:#F4EEF9;border-radius:20px;padding:16px 22px;text-align:center;color:var(--pri);line-height:1.3}
.stack{display:flex;flex-direction:column;align-items:center;gap:10px}
.legend{font-size:13.5px;color:var(--mut);text-align:center}
.frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;vertical-align:middle;font-weight:900}
.frac>span:first-child{border-bottom:3px solid currentColor;padding:0 6px 3px}
.frac>span:last-child{padding-top:4px}
.opts.big .frac{font-size:30px}
.cmp{display:flex;align-items:center;gap:16px;font-size:38px;font-weight:900}
.emgrid{display:grid;gap:6px 8px;font-size:30px;background:#FFF8EC;border-radius:18px;padding:12px 16px;line-height:1.1}
.friends{font-size:34px;letter-spacing:6px}
.seq{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.seq span{background:#F4EEF9;border-radius:12px;padding:8px 14px;font-size:28px;font-weight:900;color:var(--pri)}
.seq.em span{background:none;padding:0 2px;font-size:36px}
.bals{display:flex;flex-direction:column;gap:10px;align-items:center}
.bal{display:flex;align-items:center;gap:12px;background:#FFF8EC;border:2px solid #F7E3BF;border-radius:16px;padding:10px 18px;font-size:30px}
.bal .be{color:var(--mut)}.bal b{font-size:32px}
.riddle{background:#F4EEF9;border-radius:18px;padding:14px 18px;font-size:18.5px;line-height:1.7;max-width:420px}
.vsvg{width:170px;height:170px}.vsvg.wide{width:260px;height:auto}
.pies{display:flex;gap:18px}.pies .vsvg{width:120px;height:120px}
.clock{width:190px;height:190px}
.money{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;max-width:440px}
.bill{width:96px;height:52px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:21px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 3px 0 rgba(0,0,0,.12)}
.b5{background:#8C9A8C}.b10{background:#D7625A}.b20{background:#4A7DC4}.b50{background:#E58A2E}
.coin{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.15);color:#5A3B00}
.c200{width:60px;height:60px;font-size:15px;background:radial-gradient(circle,#E9C25A 54%,#D6D6D6 56%)}
.c100{width:56px;height:56px;font-size:14px;background:radial-gradient(circle,#D6D6D6 54%,#E9C25A 56%)}
.c50{width:54px;height:54px;font-size:14px;background:#E9C25A}
.c20{width:48px;height:48px;font-size:13px;background:#E9C25A}
.c10{width:44px;height:44px;font-size:12px;background:#E9C25A}

/* Pantalles de recompensa */
.scr{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 18px}
.scr h1{font-size:30px;margin:6px 0 4px;color:var(--pri)}
.scr .sub{color:var(--mut);margin:0 0 18px;font-size:17px}
.scr .btn.big{margin-top:24px}
.rchar{width:150px}.rchar svg{width:150px;height:150px}
.bigstars{display:flex;gap:8px;font-size:52px;margin:4px 0 14px}
.bigstars i{font-style:normal;color:#E6DEEE;animation:starIn .5s both}
.bigstars i.on{color:var(--gold);text-shadow:0 4px 0 var(--gold-d)}
@keyframes starIn{from{transform:scale(0) rotate(-90deg);opacity:0}70%{transform:scale(1.3)}}
.rstats{display:flex;gap:10px;width:100%}
.rs{flex:1;border:2px solid var(--c);border-radius:16px;overflow:hidden;--c:var(--gold)}
.rs span{display:block;background:var(--c);color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em;padding:5px 2px}
.rs b{display:block;font-size:26px;padding:10px 4px;color:var(--c)}
.rs.xp{--c:#F0A500}.rs.gem{--c:#1C9BE0}.rs.acc{--c:var(--ok)}
.flame{font-size:110px;line-height:1;animation:hop .9s ease-out infinite alternate}
.snum{font-size:72px;font-weight:900;color:#FF7A1A;line-height:1}
.week{display:flex;gap:8px;justify-content:center;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 14px}
.wd{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--mut)}
.wd i{width:32px;height:32px;border-radius:50%;background:#EEE8F3;display:grid;place-items:center;font-style:normal;font-size:17px}
.wd.on i{background:#FFE3C7}.wd.today span{color:var(--ink);font-weight:900}
.chest{width:210px;animation:none}
.chest.wiggle{animation:wig 1.4s ease-in-out infinite}
.chestsvg{width:210px;height:auto;overflow:visible}
.chestsvg .lid{transform-origin:22px 68px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.chest.open .lid{transform:rotate(-32deg) translate(-8px,-14px)}
@keyframes wig{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-6deg)}80%{transform:rotate(6deg)}90%{transform:rotate(-3deg)}}
.chestout{animation:up .4s}
.loot{font-size:44px;font-weight:900;color:#1C9BE0;margin:10px 0}
.chestout p{font-size:17px}
.lvbadge{width:120px;height:120px;border-radius:50%;background:var(--gold);box-shadow:0 8px 0 var(--gold-d),inset 0 0 0 8px rgba(255,255,255,.35);display:grid;place-items:center;font-size:56px;font-weight:900;color:#6B4A00;animation:pop .6s}
.newb{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.newb .badge{width:150px}

/* Pàgines */
.ph1{font-size:30px;margin:6px 0 4px;color:var(--pri)}.ph1.c{text-align:center;margin-bottom:22px}
.lead{color:var(--mut);margin:0 0 18px;line-height:1.45}
.h2{font-size:20px;margin:26px 0 12px}.h2 small{font-size:14px;color:var(--mut);font-weight:700}
.tcard,.ucard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:14px 16px;margin-bottom:12px;transition:transform .08s}
.tcard:active,.ucard:active{transform:translateY(3px);border-bottom-width:2px}
.tcard b,.ucard b{display:block;font-size:18px}
.tcard small,.ucard small{display:block;color:var(--mut);font-size:14.5px;margin-top:2px;line-height:1.35}
.ti{font-size:38px;width:54px;height:54px;border-radius:16px;background:#F4ECFA;display:grid;place-items:center;flex:none}
.tcard.sp .ti{background:#E8F5FE}
.uic{width:50px;flex:none;background:color-mix(in srgb,var(--uc) 18%,#fff);border-radius:14px;padding:3px}
.uic svg{width:44px;height:44px}
.ucard span:nth-child(2){flex:1}
.go{font-size:30px;color:var(--uc)}
.empty{color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.item{background:#fff;border:2px solid var(--line);border-radius:20px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.item.sel{border-color:#C8A6E0;background:#FAF5FE}
.item.nown .ipic{filter:saturate(.7)}
.ipic{width:96px;height:96px}.ipic svg{width:96px;height:96px}
.iname{font-size:17px;font-weight:900}
.idesc{font-size:13.5px;color:var(--mut);line-height:1.35;flex:1}
.item .btn{width:100%;margin-top:4px}
.item.wide{flex-direction:row;text-align:left;gap:14px}
.item.wide>div:nth-child(2){flex:1}
.item.wide .btn{width:auto}
.big-emoji{font-size:54px;width:64px;height:64px;display:grid;place-items:center}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge{background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;color:var(--mut)}
.badge .bi{width:64px;height:64px;border-radius:50%;background:#EEE8F3;display:grid;place-items:center;font-size:34px;margin-bottom:4px;filter:grayscale(1);opacity:.6}
.badge b{font-size:15.5px}.badge span{font-size:13px;line-height:1.3}
.badge.on{color:var(--ink);border-color:#F3DC9A;background:#FFFBEF}
.badge.on .bi{background:#FFE9A8;filter:none;opacity:1;box-shadow:0 4px 0 #F0CB5E}
.badge.pop{animation:pop .5s}
.phead{display:flex;align-items:center;gap:16px;background:#fff;border:2px solid var(--line);border-radius:22px;padding:16px;margin-top:4px}
.pchar{width:96px;flex:none}.pchar svg{width:96px;height:96px}
.phead>div:last-child{flex:1}
.phead h1{font-size:26px;color:var(--pri)}
.plv{color:#B98200;font-weight:900;margin:2px 0 8px}
.lbar{height:12px;background:#EEE8F3;border-radius:8px;overflow:hidden;margin-bottom:4px}
.lbar div{height:100%;background:var(--gold);border-radius:8px}
.mut{color:var(--mut)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.st{background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px}
.st b{display:block;font-size:22px}.st span{font-size:13px;color:var(--mut)}
.urows{display:flex;flex-direction:column;gap:10px}
.urow{background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px}
.un{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.un small{color:var(--mut);font-size:13px}
.ubar{height:10px;background:#EEE8F3;border-radius:6px;overflow:hidden}
.ubar div{height:100%;background:var(--uc);border-radius:6px}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;flex-wrap:wrap}
.set small{display:block;color:var(--mut);font-size:13px;font-weight:700}
.seg{display:flex;gap:6px}
.seg button{border:2px solid var(--line);border-radius:10px;padding:6px 10px;font-weight:900;font-size:14px}
.seg button.on{border-color:var(--pri);background:var(--pri);color:#fff}
.tog{width:54px;height:32px;border-radius:20px;background:#E3DDE9;position:relative;transition:background .2s;flex:none}
.tog i{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.tog.on{background:var(--ok)}.tog.on i{transform:translateX(22px)}
.pbtns{margin-top:18px}.pbtns .btn{font-size:13px;padding:13px 10px}
.foot{text-align:center;color:var(--mut);font-size:13px;margin-top:24px;line-height:1.5}
.plist{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.pcard{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:8px 10px 8px 8px}
.pmain{flex:1;display:flex;align-items:center;gap:14px;text-align:left;padding:4px}
.pav{width:60px;height:60px;border-radius:50%;background:#F4ECFA;display:grid;place-items:center;flex:none}
.pav svg{width:52px;height:52px}
.pmain b{display:block;font-size:19px}.pmain small{color:var(--mut);font-size:14px}
.pdel{font-size:20px;opacity:.45;padding:8px}.pdel:hover{opacity:1}
.onb{text-align:center;max-width:440px}
.onb-char{width:170px;margin:0 auto 8px}.onb-char svg{width:170px;height:170px}
.nm{width:100%;border:3px solid #D7C6E6;border-radius:16px;padding:14px 18px;font:inherit;font-size:22px;font-weight:900;text-align:center;color:var(--pri);margin-bottom:16px;outline:none;background:#fff}
.nm:focus{border-color:var(--pri)}
.nm.shake{animation:shake .4s;border-color:var(--ko)}
.sq{font-size:52px;font-weight:900;text-align:center;margin:26px 0 20px;color:var(--pri)}

@media (max-width:420px){
  .ubanner h2{font-size:20px}.uguide{width:60px}.uguide svg{width:60px;height:60px}
  .pguide{width:84px;right:0}.pguide.l{left:0}.pguide svg{width:84px;height:84px}
  .buddy{width:72px}.buddy svg{width:72px;height:72px}
  .bubble{font-size:18px;padding:12px 14px}.l-q.long .bubble{font-size:17px}
  .opt{font-size:21px}.opts.big .opt{font-size:32px}
  .bignum{font-size:38px;padding:8px 20px}.eq{font-size:32px}.colop{font-size:34px}
  .chip{font-size:15px;padding:5px 9px}
  .pad button{height:52px}
  .seq span{font-size:23px;padding:6px 10px}
}
@media (max-height:700px){.buddy{width:70px}.buddy svg{width:70px;height:70px}.pad button{height:48px}.l-q{margin:4px 0 10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===================== v2: gràfics més elaborats ===================== */
body{background:radial-gradient(1200px 500px at 50% -120px,#F1E6FA 0%,rgba(241,230,250,0) 70%),var(--bg);background-attachment:fixed}
.ci{display:inline-grid;width:20px;height:20px;flex:none;font-style:normal}.ci svg{width:100%;height:100%}
.ci.big{width:40px;height:40px;vertical-align:-8px}
.chip{gap:6px}.chip.off .ci{filter:grayscale(1);opacity:.5}
.avatar{box-shadow:0 3px 0 var(--line)}

/* Curs */
.course{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(135deg,#602B7A,#8A4FB0);color:#fff;border-radius:20px;padding:12px 16px;margin:2px 0 14px;box-shadow:0 5px 0 #46195C;position:relative;overflow:hidden}
.course::after{content:"+ × ÷ =";position:absolute;right:90px;top:-6px;font-size:44px;font-weight:900;opacity:.08;letter-spacing:8px}
.course .cem{font-size:34px;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.course small{display:block;font-size:12.5px;opacity:.8;font-weight:800}.course b{font-size:19px}
.course span:nth-child(2){flex:1}
.cch{font-size:13px;background:rgba(255,255,255,.2);border-radius:10px;padding:6px 10px;font-weight:900}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;padding:12px 6px;background:#fff;transition:transform .08s}
.cbtn:active{transform:translateY(3px);border-bottom-width:2px}
.cbtn .cem{font-size:34px}.cbtn b{font-size:20px;color:var(--pri)}.cbtn small{color:var(--mut);font-size:12.5px}
.cbtn.on{border-color:#B98AE0;background:#F7F0FC}

/* Ratxa */
.scard{background:#fff;border:2px solid #FFE0C2;border-radius:20px;padding:14px 16px 12px;margin:0 0 24px;background:linear-gradient(180deg,#FFF8F0,#fff)}
.shead{display:flex;gap:12px;align-items:center}
.sico{width:44px;height:44px;flex:none;animation:flick 1.4s ease-in-out infinite}.sico svg{width:44px;height:44px}
@keyframes flick{50%{transform:scale(1.08) rotate(-3deg)}}
.shead b{font-size:17px;display:block}.shead small{color:#8A6B55;font-size:13.5px;line-height:1.35;display:block}
.strack{position:relative;display:flex;justify-content:space-between;margin-top:14px;padding:0 4px}
.sline{position:absolute;left:24px;right:24px;top:17px;height:6px;border-radius:4px;background:#F2E6DA}
.sline div{height:100%;border-radius:4px;background:linear-gradient(90deg,#FFB547,#FF6A2B)}
.srw{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;color:var(--mut);font-weight:900}
.sri{width:40px;height:40px;border-radius:50%;background:#F4EEE8;display:grid;place-items:center;font-size:20px;filter:grayscale(1);opacity:.55;border:3px solid #fff}
.srw.got .sri{background:linear-gradient(135deg,#FFD66B,#FF8A3C);filter:none;opacity:1;box-shadow:0 3px 0 #E0731F}
.srw.next .sri{filter:none;opacity:1;background:#FFF1DE;border-color:#FFB547;animation:breathe 1.6s infinite}
.srw.got span{color:#E0731F}

/* Camí: nodes brillants i decoració */
.node{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 42%),var(--uc)}
.node.gold{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),rgba(255,255,255,0) 42%),var(--gold)}
.node.locked{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),rgba(255,255,255,0) 42%),#E6E0EC}
.node::after{content:"";position:absolute;left:14px;right:14px;top:6px;height:12px;border-radius:50%;background:rgba(255,255,255,.28)}
.node.locked::after{display:none}
.nico{display:grid;width:34px;height:34px;font-style:normal}.nico svg{width:100%;height:100%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
.node.rep .nico{width:40px;height:40px}.node.gold .nico svg path,.node.gold .nico svg rect{fill:#8A5A00}
.path{overflow:visible}
.deco{position:absolute;font-size:46px;font-weight:900;color:var(--uc);opacity:.13;pointer-events:none;animation:float 5s ease-in-out infinite;user-select:none}
.unit.closed .deco{color:#B9AEC6}
.ubanner{background:linear-gradient(135deg,color-mix(in srgb,var(--uc) 88%,#fff),var(--uc) 55%,color-mix(in srgb,var(--uc) 85%,#000))}
.ubanner::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='6' y='24' font-size='18' font-family='Arial' font-weight='900' fill='white' opacity='.13'%3E%2B%3C/text%3E%3Ctext x='34' y='52' font-size='18' font-family='Arial' font-weight='900' fill='white' opacity='.13'%3E%C3%97%3C/text%3E%3C/svg%3E");pointer-events:none}
.unit.closed .ubanner{background:#B9AEC6}
.uguide{filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}

/* Lliçó */
.lesson{background:linear-gradient(180deg,color-mix(in srgb,var(--uc) 9%,#fff) 0,#fff 220px)}
.bubble{box-shadow:0 4px 0 var(--line)}
.buddy{filter:drop-shadow(0 4px 0 rgba(43,26,56,.08))}
.pcount{font-weight:900;color:var(--mut);min-width:46px;text-align:right}
.retry.place{background:#F1E8FA;color:var(--pri)}
.btn.skip{flex:0 0 auto;min-width:0}
.pad .pk-x{background:#F1E8FA;color:var(--pri);font-size:30px}
.combo .ci{width:20px;height:20px}.combo:not(.on) .ci{filter:grayscale(1);opacity:.5}
.plus{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;background:#FFF8EC;border-radius:18px;padding:10px 16px}
.plus b{font-size:32px;color:var(--pri)}
.emrow{display:inline-flex;flex-wrap:wrap;gap:4px;font-size:30px;max-width:230px;justify-content:center}
.emrow .out{position:relative;opacity:.35}
.emrow .out::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:4px;background:var(--ko);transform:rotate(-35deg);border-radius:3px}
.groups{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:440px}
.grp{background:#FFF8EC;border:2px dashed #F2CF8F;border-radius:16px;padding:6px 10px;font-size:24px;letter-spacing:2px}
.blocks,.ruler,.thermo,.bars,.cubes{height:auto;max-width:100%}
.thermo{width:130px}.bars{width:330px}.cubes{width:300px;max-height:230px}
.pctbar{position:relative;width:280px;height:34px;border-radius:17px;background:#EEE8F3;overflow:hidden}
.pctbar div{height:100%;background:linear-gradient(90deg,#FF9A3C,#FF6A2B)}
.pctbar span{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;color:var(--ink)}
.cmp .frac{font-size:34px}

/* Pantalles */
.scr{position:relative;overflow:hidden}
.burst{position:absolute;left:50%;top:22%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(138,79,176,.08) 0 10deg,transparent 10deg 20deg);animation:spin 30s linear infinite;pointer-events:none;z-index:-1}
.burst.gold{background:repeating-conic-gradient(from 0deg,rgba(255,185,21,.16) 0 10deg,transparent 10deg 20deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.rchar.big{width:190px}.rchar.big svg{width:190px;height:190px}
.bigicon{font-size:120px;line-height:1.2}
.ribbon{background:linear-gradient(90deg,#FF8A3C,#FF5A5F);color:#fff;font-weight:900;letter-spacing:.1em;font-size:13px;padding:8px 18px;border-radius:12px;box-shadow:0 4px 0 #C92A3A;margin-bottom:8px}
.flame{width:130px;height:130px;animation:flick 1.2s ease-in-out infinite}.flame svg{width:130px;height:130px}
.chest{position:relative}
.chestglow{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.45),rgba(255,210,63,0) 65%);animation:breathe 2s infinite;pointer-events:none}
.chest.open .chestglow{background:radial-gradient(circle,rgba(255,210,63,.8),rgba(255,210,63,0) 70%)}
.btn.gold+.btn{margin-top:12px}
.btn.fire{--c:#FFE3CC;--cd:#F5C7A0;color:#B4501A;font-size:12px;letter-spacing:.02em}
.btn.fire:disabled{--c:#FFE9D6;color:#B4501A;box-shadow:0 4px 0 #F5C7A0}
.item.excl{border-color:#FFD9B8;background:linear-gradient(180deg,#FFF7EE,#fff)}
.badge.fire{border-color:#FFC99A;background:#FFF4E8}.badge.fire .bi{background:linear-gradient(135deg,#FFD66B,#FF8A3C);box-shadow:0 4px 0 #E0731F}

/* Perfil i registre */
.codecard{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;justify-content:space-between;margin-top:14px;background:linear-gradient(135deg,#2B1A38,#4A2A63);color:#fff;border-radius:20px;padding:16px 18px;box-shadow:0 5px 0 #1A0F22}
.codecard small{display:block;font-size:12px;opacity:.7;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.codecard b{display:block;font-size:28px;letter-spacing:.08em;color:#5FF0D0;font-variant-numeric:tabular-nums}
.codecard span{display:block;font-size:12.5px;opacity:.75;margin-top:2px}
.ctip{font-size:13.5px;opacity:.9;max-width:260px;line-height:1.4}
.codecard.big{width:100%;margin:14px 0 4px;text-align:left}
.survey{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.survey div{background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 12px}
.survey span{display:block;font-size:12px;color:var(--mut)}.survey b{font-size:15px}
.foot a{color:var(--mut)}
.osteps{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.osteps i{width:36px;height:8px;border-radius:4px;background:#E6DEEE}.osteps i.on{background:var(--pri)}
.onb-char.sm{width:120px}.onb-char.sm svg{width:120px;height:120px}
.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.obtn{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;padding:16px 8px;background:#fff;font-size:15.5px;font-weight:900;transition:transform .08s}
.obtn span{font-size:40px}.obtn:active{transform:translateY(3px);border-bottom-width:2px}.obtn.on{border-color:#B98AE0;background:#F7F0FC}
.plres{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;margin-bottom:6px}
.plres div{display:flex;gap:10px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 12px;font-size:15px;color:var(--mut)}
.plres div.ok{color:var(--ok-d);border-color:#BDEBCB;background:#F2FCF5}
.plres span{width:20px;text-align:center;font-weight:900}
.mt{margin-top:12px}
.err{color:var(--ko-d);min-height:22px;font-size:14px;margin:-6px 0 10px}
@media (max-width:420px){.cgrid{grid-template-columns:repeat(3,1fr)}.sri{width:34px;height:34px;font-size:17px}.codecard b{font-size:24px}.deco{font-size:36px}}

.topbar{margin:0 -16px;padding:10px 16px 12px;background:rgba(251,248,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.thermo{width:170px}
.shead small b{display:inline;font-size:inherit}
.scr{isolation:isolate}

/* ===================== v3: animacions, agilitat, evolució, comptes ===================== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes popIn{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes sparkFly{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.7)}15%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
@keyframes jump{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-22px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg) scale(1.05,.92)}}
@keyframes bump{50%{transform:scale(1.25)}}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-10deg)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}35%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(.9)}}
@keyframes shine{from{left:-40%}to{left:120%}}
@keyframes lesShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes drawLine{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes flip{0%{opacity:0;transform:rotateX(90deg) scale(.6)}60%{opacity:1;transform:rotateX(-10deg) scale(1.1)}100%{transform:none}}
@keyframes twinkle{50%{opacity:.3;transform:scale(.7)}}
@keyframes swing{0%{transform:rotate(-40deg)}}

.page>*{animation:rise .45s cubic-bezier(.2,1,.3,1) both}
.page>*:nth-child(2){animation-delay:.05s}.page>*:nth-child(3){animation-delay:.1s}.page>*:nth-child(4){animation-delay:.15s}.page>*:nth-child(5){animation-delay:.2s}.page>*:nth-child(6){animation-delay:.25s}.page>*:nth-child(n+7){animation-delay:.3s}
.topbar{animation:none!important}
.scr>*{animation:rise .5s cubic-bezier(.2,1,.3,1) both}.scr>*:nth-child(2){animation-delay:.08s}.scr>*:nth-child(3){animation-delay:.16s}.scr>*:nth-child(4){animation-delay:.24s}.scr>*:nth-child(5){animation-delay:.32s}.scr>*:nth-child(n+6){animation-delay:.4s}
.scr>.burst{animation:spin 30s linear infinite}
.pop-in{animation:popIn .4s cubic-bezier(.2,1.4,.4,1) both}
.bubble{animation:popIn .4s cubic-bezier(.2,1.4,.4,1) both;transform-origin:left bottom}
.l-vis{animation:rise .45s .1s both}
.opt{animation:rise .35s cubic-bezier(.2,1,.3,1) both}
.pad{animation:rise .35s .15s both}
.l-body.shake{animation:lesShake .45s}
.emgrid span,.emrow span,.seq span,.coin,.bill,.riddle>div,.cbtn,.obtn,.plres>div,.pcard,.wd,.grp{animation:popIn .35s cubic-bezier(.2,1.4,.4,1) both}
.blk,.cube{animation:popIn .35s cubic-bezier(.2,1.4,.4,1) both;transform-box:fill-box;transform-origin:center}
.bars .bar{animation:grow .6s cubic-bezier(.2,1,.3,1) both;transform-box:view-box}
.clock .hand-m{animation:swing .8s cubic-bezier(.2,1.4,.4,1) both;transform-origin:100px 100px}
.clock .hand-h{animation:swing 1s cubic-bezier(.2,1.4,.4,1) both;transform-origin:100px 100px}
.vsvg .ray{animation:swing .7s cubic-bezier(.2,1.4,.4,1) both}
.thermo .merc{animation:grow 1s cubic-bezier(.2,1,.3,1) both;transform-box:fill-box;transform-origin:bottom}
.ruler .pencil{animation:rise .5s .1s both}
.twinkle path{animation:twinkle 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.twinkle path:nth-child(2){animation-delay:.5s}.twinkle path:nth-child(3){animation-delay:1s}
#inval.typed{animation:popIn .2s}

.nwrap{transform:translateX(var(--x)) scale(.4);opacity:0;transition:transform .5s cubic-bezier(.2,1.5,.4,1),opacity .4s}
.nwrap.in{transform:translateX(var(--x));opacity:1}
.tapme{cursor:pointer}
.char.jump .cb{animation:jump .6s cubic-bezier(.3,1.4,.5,1)!important}
.spark{position:fixed;z-index:95;pointer-events:none;font-style:normal;font-size:18px;font-weight:900;transform:translate(-50%,-50%);animation:sparkFly .7s cubic-bezier(.2,.8,.3,1) forwards;margin:-9px 0 0 -6px}
.floattxt{position:fixed;z-index:96;pointer-events:none;transform:translate(-50%,0);font-weight:900;font-size:18px;color:var(--pri);background:#fff;border:2px solid var(--line);border-radius:12px;padding:4px 10px;white-space:nowrap;animation:floatUp 1.3s ease-out forwards;box-shadow:0 4px 12px rgba(43,26,56,.12)}
.floattxt.gain{color:#1C84C6;border-color:#BDE3FA}.floattxt.gain.xp{color:#B98200;border-color:#F3DC9A}
.floattxt.say{font-size:15px;color:var(--ink)}
.chip.bump{animation:bump .5s 2}
.combobanner{position:fixed;left:50%;top:40%;z-index:97;pointer-events:none;display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#FF8A3C,#FF5A5F);color:#fff;font-weight:900;font-size:30px;padding:14px 26px;border-radius:22px;box-shadow:0 8px 0 #C92A3A,0 20px 40px rgba(201,42,58,.3);animation:bannerIn 1.5s ease-out forwards;white-space:nowrap}
.combobanner .ci{width:38px;height:38px}.combobanner small{font-size:15px;opacity:.9}
.pfill{overflow:hidden}
.pfill.shine::before{content:"";position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shine .7s ease-out}

.testcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:20px;padding:14px 16px;margin:0 0 16px;background:linear-gradient(135deg,#22B5A0,#36A9E1);color:#fff;box-shadow:0 5px 0 #13806F;animation:breathe 2.4s ease-in-out infinite}
.testcard .tci{font-size:36px;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.testcard b{display:block;font-size:17px}.testcard small{opacity:.9;font-size:13.5px}.testcard span:nth-child(2){flex:1}.testcard .go{color:#fff}
.tcard.evo .ti{background:#DDF6F1}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.gcard{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:14px;transition:transform .08s}
.gcard:active{transform:translateY(3px);border-bottom-width:2px}
.gcard .gi{font-size:34px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#FFF1DE;margin-bottom:4px}
.gcard:nth-child(2) .gi{background:#FFF7C8}.gcard:nth-child(3) .gi{background:#E6F4FD}
.gcard b{font-size:17px}.gcard small{color:var(--mut);font-size:13px;line-height:1.35}
.grec{position:absolute;top:12px;right:12px;font-size:13px;font-weight:900;color:#B98200;background:#FFF6D9;border-radius:10px;padding:3px 8px}
.lesson.game{background:linear-gradient(180deg,#F2EAFB 0,#fff 260px)}
.ring{position:relative;width:190px;height:190px;margin:10px auto 16px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .rbg{fill:#fff;stroke:#EEE8F3;stroke-width:10}
.ring .rfg{fill:none;stroke:#36A9E1;stroke-width:10;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:0;transition:stroke .3s}
.ring .rfg.low{stroke:var(--ko)}
.ring .sq{position:relative;margin:0;font-size:38px}
.chainhead{text-align:center;color:var(--mut);font-weight:900;margin:10px 0 14px}
.chainstage{height:210px;display:grid;place-items:center;perspective:600px}
.chainnum{font-size:84px;font-weight:900;color:var(--pri);background:#fff;border:3px solid var(--line);border-radius:28px;padding:10px 34px;min-width:180px;text-align:center;box-shadow:0 8px 0 var(--line)}
.chainnum.flip{animation:flip .5s cubic-bezier(.2,1.4,.4,1)}
.chaindots{display:flex;gap:8px;justify-content:center}.chaindots i{width:14px;height:14px;border-radius:50%;background:#E6DEEE;transition:background .3s,transform .3s}.chaindots i.on{background:var(--pri);transform:scale(1.2)}
.chainrecap{text-align:center;margin-top:14px;font-size:20px;color:var(--mut);animation:rise .4s both}.chainrecap b{color:var(--pri)}
.evobox{background:#fff;border:2px solid var(--line);border-radius:20px;padding:14px;margin-bottom:6px;width:100%}
.evochart{width:100%;height:auto;display:block}
.evochart .drawline{stroke-dasharray:900;animation:drawLine 1.4s ease-out both}
.evochart .dot{animation:popIn .4s both;transform-box:fill-box;transform-origin:center}
.evobox .btn{margin-top:10px}
.c{text-align:center}
.mylogros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px;margin-top:10px}
.lg{width:44px;height:44px;border-radius:50%;background:#FFE9A8;display:grid;place-items:center;font-size:24px;box-shadow:0 3px 0 #F0CB5E;animation:popIn .4s both}
.lg.fire{background:linear-gradient(135deg,#FFD66B,#FF8A3C);box-shadow:0 3px 0 #E0731F}
.lgmore{margin-left:auto;color:var(--pri);font-weight:900;font-size:14px}
.gbests{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.gbests div{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px;text-align:center}
.gbests span{font-size:24px;display:block}.gbests b{font-size:22px;display:block}.gbests small{color:var(--mut);font-size:12px}
.codecard .btn{flex-basis:100%}
.langpill{display:inline-flex;background:#fff;border:2px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.page.solo>.langpill{position:absolute;top:14px;right:16px}
.page.solo{position:relative}
.langpill button{font-weight:900;font-size:13px;padding:5px 10px;border-radius:9px;color:var(--mut)}
.langpill button.on{background:var(--pri);color:#fff}
.onbtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.onbtop .osteps{margin:0}
.passf{position:relative}.passf .nm{padding-right:52px}
.eye{position:absolute;right:10px;top:12px;font-size:20px;opacity:.6}
.lbl{display:block;text-align:left;font-size:14px;color:var(--mut);margin:0 0 6px 4px}
.sheet .nm{margin-bottom:12px}
@media (max-width:420px){.chainnum{font-size:64px}.ring{width:170px;height:170px}.combobanner{font-size:24px}}

/* ===================== v4: nivell 2, cavaller, nivells dels companys, ànims ===================== */
.pdiv{position:relative;width:100%;display:flex;justify-content:center;margin:18px 0 6px}
.pdiv::before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:3px dashed color-mix(in srgb,var(--uc) 45%,transparent)}
.pdiv span{position:relative;background:var(--uc);color:#fff;font-weight:900;font-size:13px;letter-spacing:.12em;padding:6px 14px;border-radius:12px;box-shadow:0 4px 0 color-mix(in srgb,var(--uc) 70%,#000)}
.clv{width:100%;font-size:12.5px;color:#B98200;font-weight:900}
.clvbar{height:8px;background:#EEE8F3;border-radius:5px;overflow:hidden;margin-top:3px}.clvbar div{height:100%;background:linear-gradient(90deg,#FFC93C,#FF9A3C)}
.char .aura{animation:auraP 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes auraP{50%{transform:scale(1.08);opacity:.75}}
.char .lvstar{animation:popIn .5s both}
.levelup{animation:popIn .7s cubic-bezier(.2,1.5,.4,1) both}
.cheer{position:relative;display:flex;flex-direction:column;align-items:center}
.saybubble{position:relative;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 16px;font-size:16.5px;line-height:1.4;max-width:330px;box-shadow:0 4px 0 var(--line);margin-bottom:10px;animation:popIn .5s .35s cubic-bezier(.2,1.4,.4,1) both;transform-origin:bottom center}
.saybubble::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.saybubble b{color:var(--pri)}
@keyframes dance{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-16px) rotate(-8deg)}40%{transform:translateY(0) rotate(0) scale(1.05,.94)}60%{transform:translateY(-10px) rotate(8deg)}80%{transform:translateY(0) scale(1.04,.96)}}
.rchar.dance .char .cb{animation:dance 1.1s ease-in-out 3!important}
.reco{background:linear-gradient(180deg,#EAF6F9,#fff);border:2px solid #BFE3EC;border-radius:20px;padding:14px 16px;margin:0 0 18px;text-align:left;width:100%}
.reco.inres{margin:6px 0 4px}
.rhead{display:flex;align-items:center;gap:10px}
.rknight{width:62px;flex:none}.rknight svg{width:62px;height:62px}
.rhead b{display:block;font-size:17px;color:#155A6E}.rhead small{color:var(--mut)}
.reco ul{list-style:none;padding:0;margin:10px 0 12px}
.reco li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:15px;border-bottom:1px dashed #D5EBF1}
.reco li small{color:var(--mut)}
.rdot{width:10px;height:10px;border-radius:50%;flex:none}
.reco .btn{width:100%}

/* ===================== v5: variació, cromos, missions, lliga ===================== */
.nav button{max-width:96px;padding:6px 0;font-size:11px}.nav .ni{font-size:22px}
.retry.goldq{background:linear-gradient(90deg,#FFE27A,#FFC93C);color:#6B4A00;animation:pulseG 1.2s ease-in-out infinite}
.retry.rev{background:#E6F4FD;color:#1C84C6}
@keyframes pulseG{50%{box-shadow:0 0 0 6px rgba(255,201,60,.3)}}
.lesson.isgold{background:linear-gradient(180deg,#FFF6D6 0,#fff 260px)}
.lesson.isgold .bubble{border-color:#F3D27A;box-shadow:0 4px 0 #F3D27A}
.hint{display:block;font-size:14px;color:var(--mut);margin-top:4px}
.tfv{display:inline-block;background:#FFF1C7;color:#8A5A00;border:3px solid #FFC93C;border-radius:12px;padding:0 10px;animation:popIn .4s .2s both}
.tfopts{grid-template-columns:1fr 1fr}
.tfopts .opt{font-size:26px;min-height:90px}
.tfopts .tf0{border-color:#BDEBCB;color:var(--ok-d)}.tfopts .tf1{border-color:#FFC9CB;color:var(--ko-d)}
.balloons{position:relative;height:300px;display:flex;justify-content:space-around;align-items:flex-end;gap:6px}
.bln{position:relative;width:82px;height:100px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.6),transparent 30%),var(--c);color:#fff;font-weight:900;font-size:21px;box-shadow:inset -6px -8px 0 rgba(0,0,0,.12);animation:blnUp 1s var(--d) cubic-bezier(.2,1.2,.4,1) both,blnFloat 2.6s calc(var(--d) + 1s) ease-in-out infinite;transform-origin:50% 120%}
.bln::before{content:"";position:absolute;left:50%;bottom:-8px;width:10px;height:10px;background:var(--c);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bln::after{content:"";position:absolute;left:50%;top:106px;width:2px;height:70px;background:#C9BCD6}
.bln span{position:relative;z-index:1;text-shadow:0 2px 0 rgba(0,0,0,.18);padding:0 4px;line-height:1.1;display:block}
.bln.b1{margin-bottom:60px}.bln.b2{margin-bottom:24px}.bln.b3{margin-bottom:80px}
.bln.sel{transform:scale(1.1)}
.bln.right{animation:blnWin .6s both;box-shadow:0 0 0 6px var(--ok),inset -6px -8px 0 rgba(0,0,0,.12)}
.bln.popped{animation:blnPop .35s forwards}
.bln:disabled:not(.right):not(.popped){opacity:.35}
@keyframes blnUp{from{transform:translateY(260px);opacity:0}}
@keyframes blnFloat{50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes blnWin{50%{transform:scale(1.25) translateY(-20px)}100%{transform:scale(1.1)}}
@keyframes blnPop{40%{transform:scale(1.4);opacity:.8}100%{transform:scale(0);opacity:0}}
.bonus{background:#FFF1DE;color:#B4501A;border-radius:12px;padding:8px 14px;margin:0 0 12px;font-size:15px}
/* cromos */
.stk{--rc:#9AA5B1;position:relative;width:100%;aspect-ratio:3/4;border-radius:16px;background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--rc) 18%,#fff));border:3px solid var(--rc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;box-shadow:0 4px 0 color-mix(in srgb,var(--rc) 60%,#000)}
.stk.r-r{--rc:#36A9E1}.stk.r-e{--rc:#8A4FB0}.stk.r-l{--rc:#F0A500;background:linear-gradient(160deg,#FFF8DC,#FFE27A)}
.stk.r-e::before,.stk.r-l::before{content:"";position:absolute;inset:0;border-radius:13px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 45%,transparent 60%);background-size:250% 100%;animation:holo 2.8s linear infinite;pointer-events:none}
@keyframes holo{from{background-position:150% 0}to{background-position:-100% 0}}
.stke{font-size:40px;line-height:1}.stk b{font-size:13px;line-height:1.15}.stkr{font-size:10.5px;font-weight:900;color:var(--rc);text-transform:uppercase;letter-spacing:.06em}
.stk.empty{background:#F1ECF5;border-style:dashed;box-shadow:none;opacity:.7}.stk.empty .stke{filter:grayscale(1);opacity:.5}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.stkbtn{position:relative;padding:0;transition:transform .15s}.stkbtn:active{transform:scale(.95)}
.cnt{position:absolute;top:-6px;right:-6px;background:var(--pri);color:#fff;font-style:normal;font-size:12px;font-weight:900;border-radius:10px;padding:2px 7px}
.bigstk{width:180px;margin:0 auto 10px}.bigstk .stke{font-size:72px}.bigstk b{font-size:18px}
.fact{background:#F4EEF9;border-radius:14px;padding:10px 14px;font-size:15px;line-height:1.45;margin:10px 0!important;color:var(--ink)!important}
.abar{height:14px;border-radius:8px;background:#EEE8F3;overflow:hidden;margin-bottom:6px}.abar div{height:100%;background:linear-gradient(90deg,#8A4FB0,#FF7AA8,#FFC93C)}
.rdotb{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}
.tabs{display:flex;gap:6px;background:#EEE8F3;border-radius:14px;padding:4px;margin:6px 0 14px}
.tabs button{flex:1;padding:9px 6px;border-radius:11px;font-weight:900;font-size:14px;color:var(--mut)}
.tabs button.on{background:#fff;color:var(--pri);box-shadow:0 2px 0 var(--line)}
.pack{position:relative;width:170px;height:230px;border-radius:20px;background:linear-gradient(145deg,#8A4FB0,#FF7AA8 60%,#FFC93C);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 10px 0 #5A2475,0 20px 40px rgba(96,43,122,.35);margin:10px auto;overflow:hidden}
.pack::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;animation:holo 2.2s linear infinite}
.pack span{font-size:70px}.pack small{font-weight:900;letter-spacing:.3em;font-size:16px}
.pack.wiggle{animation:wig 1.2s ease-in-out infinite}
.pack.open{animation:packOpen .45s forwards}
@keyframes packOpen{50%{transform:scale(1.15) rotate(-6deg)}100%{transform:scale(0) rotate(20deg);opacity:0}}
.packout{width:100%;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.stkwrap{width:190px;animation:cardIn .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cardIn{0%{opacity:0;transform:rotateY(180deg) scale(.4)}100%{opacity:1;transform:none}}
.stkwrap .stk{width:150px;margin:0 auto}
.newst{color:var(--ok-d);font-weight:900;margin:4px 0}.dup{color:var(--mut);font-size:14px;margin:4px 0}
.packout .btn{flex-basis:100%}
/* missions */
.mcard{background:#fff;border:2px solid #D9CCF0;border-radius:20px;padding:14px 16px;margin:0 0 22px}
.mhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.mhead b{font-size:17px}.mhead small{color:var(--mut);font-size:12.5px}
.mrow{display:flex;align-items:center;gap:10px;padding:7px 0}
.mchk{width:26px;height:26px;border-radius:50%;border:2.5px solid #D9CCF0;display:grid;place-items:center;font-weight:900;color:#fff;flex:none}
.mrow.done .mchk{background:var(--ok);border-color:var(--ok);animation:popIn .4s}
.mtxt{flex:1;font-size:14.5px}.mrow.done .mtxt span{text-decoration:line-through;color:var(--mut)}
.mbar{height:8px;background:#EEE8F3;border-radius:5px;overflow:hidden;margin-top:4px}.mbar div{height:100%;background:linear-gradient(90deg,#8A4FB0,#36A9E1);transition:width .6s}
.mrew{font-size:13px;font-weight:900;color:#1C84C6;white-space:nowrap}
.mchest{text-align:center;color:var(--mut);font-size:13.5px;margin-top:6px}
.mdone{text-align:center;color:var(--ok-d);font-size:14px;margin-top:6px}
.mcard .btn{margin-top:8px;animation:breathe 1.6s infinite}
/* lliga */
.league{display:flex;flex-direction:column;gap:8px}
.lgload{text-align:center;font-size:30px;padding:30px}
.lrow{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:8px 12px;animation:rise .4s both}
.lrow.me{border-color:var(--pri);background:#F7F0FC}
.lrow.top1{background:linear-gradient(90deg,#FFF6D6,#fff);border-color:#F3D27A}.lrow.top2{background:linear-gradient(90deg,#F2F4F7,#fff)}.lrow.top3{background:linear-gradient(90deg,#FBE9DC,#fff)}
.lpos{width:34px;text-align:center;font-weight:900;font-size:18px;color:var(--mut)}
.lav{width:40px;height:40px;flex:none}.lav svg{width:40px;height:40px}
.lrow b{flex:1}.lrow b small{color:var(--pri)}
.lxp{font-weight:900;color:#B98200}

/* ===================== v6: currículum ===================== */
.usents{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px}
.usents span{font-size:11.5px;font-weight:900;background:rgba(255,255,255,.22);border-radius:8px;padding:2px 7px;white-space:nowrap}
.tcard.school .ti{background:#FFF1DE}
.testcard.school{background:linear-gradient(135deg,#FF9A3C,#FF6FA3);box-shadow:0 5px 0 #C9446E;animation:none}
.slist{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.sitem{display:flex;gap:10px;align-items:center;text-align:left;border:2px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}
.sitem.on{border-color:var(--uc);background:color-mix(in srgb,var(--uc) 10%,#fff)}
.sitem b{display:block;font-size:15px}.sitem small{color:var(--mut);font-size:12px}
.sdot{width:14px;height:14px;border-radius:50%;background:var(--uc);flex:none}
.lead.sm{font-size:13.5px;margin-top:-6px}
.cbox{background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 14px}
.crow{padding:7px 0}.crow+.crow{border-top:1px dashed var(--line)}
.cn{display:flex;align-items:center;gap:8px;margin-bottom:6px}.cn b{flex:1;font-size:14px}.cn small{font-size:12.5px;color:var(--mut);white-space:nowrap}
.cn small.up{color:var(--ok-d)}.cn small.down{color:var(--ko-d)}
.cbar{height:10px;background:#EEE8F3;border-radius:6px;overflow:hidden}.cbar div{height:100%;border-radius:6px;transition:width .8s}
/* exercicis d'espai, codi i atzar */
.cgridw{display:flex;justify-content:center}
.cg{display:grid;gap:4px;width:min(320px,86vw)}
.cgc{aspect-ratio:1;background:#F4EEF9;border-radius:8px;display:grid;place-items:center;font-size:24px;animation:popIn .3s both}
.cgc.trail{background:#E0F2FB}
.cgl{display:grid;place-items:center;font-weight:900;color:var(--mut);font-size:14px}
.cmds{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.cmd{width:44px;height:44px;border-radius:12px;background:#2B1A38;color:#5FF0D0;font-size:26px;font-weight:900;display:grid;place-items:center;box-shadow:0 4px 0 #120A18;animation:popIn .3s both}
.cmd.q{background:#FFC93C;color:#6B4A00;box-shadow:0 4px 0 #E0A300}
.code{font-family:ui-monospace,Menlo,monospace;font-size:17px;display:flex;flex-direction:column;gap:4px;min-width:230px}
.code .blk{background:#FF9A3C;color:#fff;font-weight:800;border-radius:10px;padding:8px 12px;box-shadow:0 3px 0 #C4661A;animation:rise .35s both}
.code .blk.ev{background:#FFC93C;color:#6B4A00;box-shadow:0 3px 0 #E0A300;border-radius:18px 18px 10px 10px}
.code .blk.loop{background:#36A9E1;box-shadow:0 3px 0 #1B6FA3;padding-bottom:10px}
.code .blk.in{background:#8A4FB0;box-shadow:0 3px 0 #5A2475;margin:6px 0 0 18px}
.bag{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:260px;background:#F7EBDC;border:3px solid #D9B38C;border-radius:30px 30px 60px 60px;padding:18px 16px 26px;font-size:30px}
.bag span{animation:popIn .3s both}
.dice,.mirror{font-size:80px;animation:popIn .5s both}
.tallyt{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 16px;min-width:240px}
.tth{font-weight:900;color:var(--mut);font-size:13px;margin-bottom:6px;text-align:center}
.ttr{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:26px}.ttr+.ttr{border-top:1px dashed var(--line)}
.tally{font-family:ui-monospace,monospace;font-size:24px;letter-spacing:1px;color:var(--ink);font-weight:900}
.tally .t5{font-style:normal;text-decoration:line-through;text-decoration-thickness:3px;margin-right:10px;color:var(--ink)}
.seq.row span{font-size:40px}
.cg{width:min(250px,70vw)}.cgc{font-size:20px;border-radius:7px}
.opts:not(.big):not(.list) .opt{padding-left:34px;padding-right:12px}

/* Sobre: la carta queda amagada fins que s'obre */
.packout[hidden]{display:none!important}
.stkwrap{perspective:800px}
.stkwrap .stk{animation:flipReveal .8s cubic-bezier(.2,1.2,.4,1) both;animation-delay:inherit;backface-visibility:hidden}
@keyframes flipReveal{0%{transform:rotateY(180deg) scale(.6);opacity:0;filter:brightness(2)}60%{opacity:1}100%{transform:none;filter:none}}
.pack.shake{animation:packShake .5s ease-in-out}
@keyframes packShake{20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}
.cgrid.ages{grid-template-columns:repeat(4,1fr)}
.cgrid.ages .cbtn b{font-size:24px}
.cbtn.locked{background:#F1ECF5;border-color:#E6DEEE;opacity:.75}
.cbtn.locked b{color:var(--mut)}

/* Cartes de mitologia */
.mcardx{--c1:#E8A073;--c2:#8A4520;--glow:rgba(232,160,115,.45);position:relative;width:100%;aspect-ratio:5/7;border-radius:12px;padding:5px;background:linear-gradient(145deg,var(--c1),var(--c2) 55%,var(--c1));box-shadow:0 0 0 1.5px rgba(255,255,255,.3) inset,0 6px 16px rgba(40,10,60,.3),0 0 16px var(--glow);color:#fff;text-align:center}
.mcardx.r-r{--c1:#8FD8FF;--c2:#1E5F9A;--glow:rgba(95,184,230,.45)}
.mcardx.r-e{--c1:#D7A8FF;--c2:#4E1F7A;--glow:rgba(176,122,214,.55)}
.mcardx.r-l{--c1:#FFF0A8;--c2:#C98A00;--glow:rgba(255,215,90,.75)}
.min{position:relative;height:100%;border-radius:8px;overflow:hidden;border:1.5px solid rgba(0,0,0,.35);background:#2A1638}
.min img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mnum{position:absolute;top:5px;left:5px;font-family:Cinzel,serif;font-weight:900;font-size:9px;background:rgba(20,10,30,.6);padding:2px 5px;border-radius:5px;letter-spacing:.06em}
.mgem{position:absolute;top:6px;right:6px;width:12px;height:12px;transform:rotate(45deg);border-radius:3px;background:linear-gradient(135deg,#fff,var(--c1) 40%,var(--c2));box-shadow:0 0 8px var(--glow)}
.mplate{position:absolute;left:0;right:0;bottom:0;padding:22px 6px 7px;background:linear-gradient(transparent,rgba(12,6,20,.88) 40%)}
.mname{font-family:Cinzel,serif;font-weight:900;font-size:12.5px;line-height:1.1;letter-spacing:.02em;background:linear-gradient(var(--c1),#fff 50%,var(--c1));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.mrom{font-size:10px;opacity:.8;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.mmeander{height:7px;margin:6px 12px;background:linear-gradient(90deg,transparent,var(--c1),transparent);-webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 8px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 8px)}
.mfact{font-size:12px;line-height:1.35;font-weight:700;opacity:.95}
.mrar{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:900;letter-spacing:.12em;padding:3px 9px;border-radius:9px;background:linear-gradient(var(--c1),var(--c2));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);box-shadow:0 2px 6px rgba(0,0,0,.35);white-space:nowrap;text-transform:uppercase}
.mcardx.r-e::after,.mcardx.r-l::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%);background-size:250% 100%;animation:holo 3s linear infinite;mix-blend-mode:overlay;pointer-events:none}
.mcardx.empty{background:#E6DDEE;box-shadow:none}.mcardx.empty .min{background:repeating-linear-gradient(45deg,#D9CCE6 0 8px,#E2D7EC 8px 16px);border:1.5px dashed #B9A6CC}
.mcardx.empty .mnum{background:rgba(90,60,120,.35)}.mq{position:absolute;inset:0;display:grid;place-items:center;font-family:Cinzel,serif;font-weight:900;font-size:34px;color:#fff;opacity:.8}
.agrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px 8px;padding-bottom:6px}
/* Versió gran: sobre i fitxa */
.stkwrap{width:min(260px,80vw)}
.stkwrap .mcardx,.bigcard{width:min(260px,78vw);margin:0 auto 14px;border-radius:16px;padding:8px;animation:flipReveal .8s cubic-bezier(.2,1.2,.4,1) both;animation-delay:inherit}
.bigcard{animation:none}
.stkwrap .mcardx .min,.bigcard .min{border-radius:10px;border-width:2px}
.stkwrap .mnum,.bigcard .mnum{font-size:11px;top:8px;left:8px;padding:3px 7px}
.stkwrap .mgem,.bigcard .mgem{width:20px;height:20px;top:9px;right:9px}
.stkwrap .mplate,.bigcard .mplate{padding:40px 12px 16px}
.stkwrap .mname,.bigcard .mname{font-size:23px}
.stkwrap .mrar,.bigcard .mrar{font-size:10px;padding:4px 12px;bottom:-11px}
.mythsheet{background:radial-gradient(circle at 50% 0,#3A1F52,#1A0F26)!important;border:none!important;padding-top:22px!important}
.pack{background:linear-gradient(145deg,#3A1F52,#8A4FB0 55%,#FFC93C)}
.cnt{z-index:3}

/* Batalles */
.tcard.battle{background:linear-gradient(135deg,#FFF1E6,#FFE0D6);border-color:#F2B8A0}
.tcard.duel{border-color:#F2B8A0}.tcard.party{border-color:#9FD3DC}
.mhint{position:absolute;left:0;right:0;bottom:8px;font-size:9px;font-weight:900;color:#6B4F85;text-align:center;line-height:1.1;padding:0 4px}
.joinbox{display:flex;gap:8px;margin:14px 0 4px}.joinbox .nm{flex:1;min-width:0;margin:0;text-transform:uppercase;letter-spacing:.06em}
.brules{background:#fff;border:2px solid #E6DCF2;border-radius:18px;padding:12px 14px;display:grid;gap:8px;font-size:14px;line-height:1.4}
.brules b{color:var(--pri)}.bfine{font-size:12.5px;color:var(--mut)}
.bitem{align-items:center}.bic{font-size:26px;width:40px;text-align:center}
.btag{margin-left:auto;font-size:12px;font-weight:900;padding:4px 9px;border-radius:10px;background:#EEE8F3;color:var(--mut);white-space:nowrap}
.btag.win{background:#FFF3C4;color:#9A6A00}.btag.go{background:#DDF5E4;color:#1E7A3C}.btag.wait{background:#E6F1FA;color:#2A6F9A}.btag.gift{background:none;padding:0 4px;font-size:18px}
.blobby{position:relative;padding-top:54px}.bx{position:absolute;top:14px;left:14px}
.bkind{font-weight:900;font-size:12px;letter-spacing:.12em;color:var(--mut)}
.bcode{background:#fff;border:3px dashed #C9B3E0;border-radius:18px;padding:10px 22px;margin:8px 0 10px}.bcode small{display:block;font-size:12px;color:var(--mut);font-weight:800}
.bcode b{font-size:clamp(22px,8.5vw,34px);white-space:nowrap;letter-spacing:.06em;color:var(--pri);font-weight:900}
.bplayers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0;width:100%}
.bplayers.vs{align-items:center;flex-wrap:nowrap}
.bpl{background:#fff;border:2px solid #E6DCF2;border-radius:16px;padding:8px;width:96px;display:flex;flex-direction:column;align-items:center;gap:3px;animation:cardIn .5s both}
.bplayers.vs .bpl{width:130px}
.bpl.me{border-color:var(--pri)}.bpl.ghost{opacity:.6;border-style:dashed}
.bpc{width:58px;height:58px}.bpc svg{width:100%;height:100%}.bpc.q{display:grid;place-items:center;font-size:34px;font-weight:900;color:#B9A6CC}
.bpl b{font-size:14px;line-height:1.1;text-align:center}.bpl small{font-size:12px;color:var(--mut);font-weight:800}
.bcard{width:84px;margin:4px 0 8px}.bcard .mrar{display:none}.nocard{font-style:italic}
.vsx{font-weight:900;font-size:26px;color:#C0392B;text-shadow:0 2px 0 #fff}
.sub.small{font-size:13px}
.bcount{font-size:110px;font-weight:900;color:var(--pri);line-height:1;margin:20px 0}
.bstrip{display:flex;gap:6px;padding:0 16px;max-width:640px;margin:-4px auto 4px;width:100%;flex-wrap:wrap}
.bstrip:empty{display:none}
.bsp{flex:1;min-width:70px;background:#F1ECF5;border-radius:9px;position:relative;overflow:hidden;font-size:11px;padding:3px 7px}
.bsp b{position:relative;z-index:1}.bsp i{position:absolute;left:0;top:0;bottom:0;background:#FFD6C8;transition:width .4s}
.podium{width:100%;max-width:380px;display:grid;gap:8px;margin:12px 0 18px}
.prow{display:grid;grid-template-columns:34px 40px 1fr auto auto;align-items:center;gap:8px;background:#fff;border:2px solid #E6DCF2;border-radius:14px;padding:6px 10px;text-align:left}
.prow.me{border-color:var(--pri);background:#F7F1FC}.prow.p1{border-color:#F0C24B;background:#FFF9E3}
.ppos{font-size:22px;text-align:center;font-weight:900}.pc{width:38px;height:38px}.pc svg{width:100%;height:100%}
.psc{font-weight:900;color:var(--pri)}.pt{font-size:12px;color:var(--mut);font-weight:800}
.pickgrid{max-height:46vh;overflow:auto;padding:4px 2px 14px}

/* Passi de temporada, repàs i corones */
.seasoncard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:20px;padding:14px 16px;margin:0 0 14px;color:#fff;background:radial-gradient(circle at 85% 0,color-mix(in srgb,var(--sc) 55%,#fff) 0,var(--sc) 55%,color-mix(in srgb,var(--sc) 70%,#000));box-shadow:0 5px 0 color-mix(in srgb,var(--sc) 60%,#000)}
.seasoncard .sci{font-size:34px}.seasoncard .scx{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.seasoncard small{font-size:10.5px;font-weight:900;letter-spacing:.1em;opacity:.8}.seasoncard b{font-size:18px}.seasoncard em{font-style:normal;font-size:12.5px;font-weight:800;opacity:.9}
.seasoncard .go{color:#fff}
.scbar{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.22);overflow:hidden}.scbar i{display:block;height:100%;background:linear-gradient(90deg,#FFE27A,#FFC93C);border-radius:6px}
.seasonhead{text-align:center;color:#fff;border-radius:24px;padding:22px 18px 18px;margin:6px 0 16px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--sc) 50%,#fff),var(--sc) 60%,color-mix(in srgb,var(--sc) 70%,#000))}
.seasonhead .shi{font-size:46px}.seasonhead small{font-weight:900;letter-spacing:.14em;font-size:11px;opacity:.8}.seasonhead h1{margin:2px 0 8px;font-size:26px}.seasonhead p{margin:0 0 12px;font-size:14px;opacity:.92;line-height:1.4}
.shlv{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:rgba(0,0,0,.18);border-radius:14px;padding:8px 12px}.shlv small{font-size:12px;font-weight:800}
.sccards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.sccard{text-align:center}.sccard small{display:block;margin-top:14px;font-weight:900;color:var(--mut);font-size:12px}
.tiers{display:grid;gap:8px;margin:14px 0 10px}
.tier{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;background:#fff;border:2px solid #E6DCF2;border-radius:14px;padding:8px 12px;opacity:.75}
.tier .tn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#EEE8F3;font-weight:900;color:var(--mut)}
.tier.can{opacity:1;border-color:#F0C24B;background:#FFF9E3}.tier.can .tn{background:#FFC93C;color:#fff}
.tier.got{opacity:1}.tier.got .tn{background:var(--pri);color:#fff}.tier .tok{color:var(--ok-d);font-weight:900;font-size:18px}
.tier.big{border-width:3px}.tier .tr{font-weight:800}.tier .tl{font-size:12px;color:var(--mut);font-weight:800}
.testcard.rev{background:linear-gradient(135deg,#2FA396,#1F6F67);box-shadow:0 5px 0 #17544E}
.node.rust{filter:saturate(.35) sepia(.35)}.node.rust::after{content:"🔧";position:absolute;right:-6px;top:-6px;font-size:16px;filter:none}
.bigcrown{font-size:96px;animation:cardIn .8s cubic-bezier(.2,1.4,.4,1) both}
.bcost{margin-left:auto;font-weight:900;font-size:13px;background:#FFF3C4;color:#9A6A00;border-radius:10px;padding:4px 9px;white-space:nowrap}

/* Activitats visuals */
.vpic{max-width:100%;height:auto;display:block;margin:0 auto}
.l-vis .vpic.iso{max-height:210px}.l-vis .bal{display:inline-block;margin:0 4px}
.opts.pics{grid-template-columns:1fr 1fr}.opts.pics .opt{min-height:112px;padding:10px 10px 10px 30px;display:grid;place-items:center}
.opts.pics .opt .ov{display:grid;place-items:center;width:100%}.opts.pics .opt svg{max-width:100%;max-height:104px;width:auto}
.vseq{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}.vseq .vq{width:46px;height:46px;border-radius:8px;border:2px dashed #B9A6CC;display:grid;place-items:center;font-weight:900;font-size:22px;color:#8A4FB0}
.bigemo{font-size:56px;text-align:center}
.tgrid{display:grid;grid-template-columns:repeat(var(--gc),1fr);gap:4px;width:min(100%,calc(var(--gc) * 50px));margin:0 auto;position:relative;padding:6px;border-radius:14px;background:#fff;border:2px solid #E6DCF2}
.tgrid .tg{aspect-ratio:1;border-radius:7px;border:2px solid #D9CCE6;background:#FBF8FF;padding:0;transition:transform .1s,background .15s}
.tgrid .tg.on{background:#3CC46A;border-color:#239B4E;transform:scale(.94)}.tgrid .tg.fx{background:#8A4FB0;border-color:#5E2F80}.tgrid .tg.ro:not(.fx){background:#F1ECF5;border-style:dashed;opacity:.6}
.tgrid.ax-v::after{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:3px;margin-left:-1.5px;background:#D63C42;border-radius:2px;pointer-events:none}
.tgrid.ax-h::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:3px;margin-top:-1.5px;background:#D63C42;border-radius:2px;pointer-events:none}
.tgrid.right{border-color:#3CC46A;box-shadow:0 0 0 4px rgba(60,196,106,.25)}.tgrid.wrong{border-color:#D63C42;box-shadow:0 0 0 4px rgba(214,60,66,.2)}
.gcount{text-align:center;font-size:14px;color:var(--mut);margin-top:6px;min-height:18px}
.ans .vpic.sol{display:inline-block;vertical-align:middle;margin:4px}
/* Porta del Cavaller */
.gate{display:flex;align-items:center;gap:3px;justify-content:center;flex-wrap:wrap;max-width:640px;margin:-2px auto 6px;padding:0 12px}
.gate .gt{width:100%;text-align:center;font-size:12px;font-weight:900;color:var(--mut);letter-spacing:.06em}
.gate i{font-style:normal;width:22px;height:22px;border-radius:7px;background:#F1ECF5;display:grid;place-items:center;font-size:12px}
.gate i.k{background:#FFF3C4}.gate i.x{background:#FBE3E4;color:#D63C42;font-weight:900}
.pdiv.gatediv span{background:#FFF3C4;color:#9A6A00;border-color:#F0C24B}
.bals{display:grid;gap:4px;width:100%;justify-items:center}.bals .vpic.bal{width:100%!important;max-width:320px}
.pdiv.bonusdiv span{background:#E9F7FF;color:#1F6FA3;border-color:#8FD0F2}
.nwrap.bonusn .node:not(.locked){box-shadow:0 7px 0 var(--ucd),0 0 0 4px #FFE27A}
/* Intercanvis */
.tcard.trade{border-color:#9FD3DC}.tcard.trade:disabled{opacity:.6}
.trow{background:#fff;border:2px solid #E6DCF2;border-radius:16px;padding:10px 12px;margin-bottom:10px;display:grid;gap:6px}
.thead{display:flex;justify-content:space-between;gap:8px;font-size:14px}.thead span{color:var(--mut);font-weight:800;font-size:13px}
.tpair{display:flex;align-items:center;justify-content:center;gap:12px}.tcard-mini{width:78px}.tcard-mini .mrar{display:none}
.tcard-mini.q{aspect-ratio:5/7;border-radius:10px;border:2px dashed #C9B3E0;display:grid;place-items:center;font-size:30px;font-weight:900;color:#B9A6CC}
.tarrow{font-size:26px;color:var(--pri);font-weight:900}.tbig{width:200px;margin:4px auto 16px}
.nikepic{width:64px}.nikepic .mrar{display:none}
/* Camí de la porta del Cavaller */
.trail{position:relative;margin:4px auto 18px;max-width:420px;text-align:center;padding:34px 12px 0}
.trail .tsteps{position:absolute;left:50%;top:0;height:30px;border-left:5px dotted #D9CCE6;transform:translateX(-50%)}
.trail span{display:inline-block;font-weight:900;font-size:13.5px;color:var(--mut);background:#F1ECF5;border:2px dashed #D9CCE6;border-radius:14px;padding:8px 14px}
.trail.open .tsteps{border-left-color:var(--uc,#3CC46A)}
.trail.open span{color:#1E7A3C;background:#E6F7EC;border:2px solid #8FD9A8}
.trail.fresh .tsteps{animation:trailGrow 1.2s ease-out both}.trail.fresh span{animation:cardIn .8s .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes trailGrow{from{height:0}to{height:30px}}
.gatescr .door{position:relative;width:200px;height:220px;margin:6px auto 0;border-radius:100px 100px 10px 10px;overflow:hidden;background:linear-gradient(#FFF6D6,#FFE27A);border:6px solid #6B4F85;box-shadow:0 10px 0 #4A3460}
.door .dpath{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:18px;gap:2px;color:#6B4F85;background:linear-gradient(transparent 40%,rgba(60,196,106,.35)),repeating-linear-gradient(0deg,transparent 0 16px,rgba(107,79,133,.08) 16px 18px)}
.door .dpath b{font-size:13px;letter-spacing:.1em}.door .dpath span{font-weight:900;font-size:15px;padding:0 10px}
.door .dl,.door .dr{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,#8B5A2B 0 22px,#7A4E25 22px 24px);border:3px solid #5C3A1A}
.door .dl{left:0;transform-origin:left;animation:doorL 1.4s .5s ease-in-out forwards}.door .dr{right:0;transform-origin:right;animation:doorR 1.4s .5s ease-in-out forwards}
@keyframes doorL{to{transform:perspective(500px) rotateY(-100deg)}}@keyframes doorR{to{transform:perspective(500px) rotateY(100deg)}}
.gatescr .knightc{width:100px;margin:-6px auto 0;position:relative}
.unfold{display:block;margin:10px auto 0;font-weight:900;font-size:14px;color:var(--pri);background:#fff;border:2px solid #D9CCE6;border-radius:14px;padding:10px 16px}
.unit:has(.trail.open) .unfold{color:#1E7A3C;background:#E6F7EC;border-color:#8FD9A8}
.preplist{text-align:left;margin:4px auto 16px;max-width:320px;font-weight:800;line-height:1.7}
.gday{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap}.gday i{width:18px;height:18px;border-radius:6px;background:#EEE8F3;font-style:normal;font-size:10px;display:grid;place-items:center;filter:grayscale(1);opacity:.7}
.gday i.on{background:#DDF5E4;filter:none;opacity:1}.gday span{font-size:12px;color:var(--mut);font-weight:800;margin-left:4px}
.dayinfo{font-size:13px!important;color:var(--mut)!important;font-weight:800;margin:4px 0 8px!important}

/* ===== Disseny «pro»: personatges il·lustrats, mapa pintat i camí ===== */
.chimg image{filter:drop-shadow(0 3px 4px rgba(60,30,90,.2))}
.mate svg{width:92px;height:92px}
body.pro{background:linear-gradient(180deg,#F3ECFA 0,#EEF4FB 420px,#F4F0FA 100%);background-attachment:fixed}
body.pro .topbar{background:linear-gradient(#F3ECFA 78%,rgba(243,236,250,0))}
@keyframes chHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
body.pro .unit .path{margin-top:10px;border-radius:26px;background:#DDEBC8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 10px 30px rgba(60,30,90,.10);overflow:clip}
/* terreny que es desplaça amb el camí */
body.pro .terrain{position:absolute;inset:0;z-index:0;pointer-events:none;background:center top/100% auto repeat-y}
body.pro .unit.closed .path{filter:grayscale(.7) brightness(1.05)}
body.pro .road{position:absolute;left:0;top:0;pointer-events:none;z-index:1}
body.pro .road .rb{fill:none;stroke:#E9D9B6;stroke-width:34;stroke-linecap:round;opacity:.9}
body.pro .road .rt{fill:none;stroke:#FFF6E0;stroke-width:4;stroke-dasharray:2 12;stroke-linecap:round}
body.pro .nwrap{z-index:2}
body.pro .node:not(.locked){box-shadow:0 7px 0 var(--ucd),0 10px 18px rgba(40,20,60,.25)}
body.pro .node.locked{background:#EDE7F3;box-shadow:0 6px 0 #C9BFD6}
body.pro .pguide{display:none}
body.pro .deco{opacity:.0}
.mate{position:absolute;top:-34px;width:92px;height:92px;pointer-events:none;z-index:2}.mate.l{right:calc(100% + 6px)}.mate.r{left:calc(100% + 6px)}
body.pro .ubanner{box-shadow:0 5px 0 var(--ucd),0 12px 24px rgba(60,30,90,.18)}
body.pro .goal,body.pro .mcard,body.pro .seasoncard,body.pro .course{box-shadow:0 8px 22px rgba(60,30,90,.08)}
body.pro .lesson{background:radial-gradient(900px 420px at 50% -80px,color-mix(in srgb,var(--uc) 22%,#fff),rgba(255,255,255,0) 70%),linear-gradient(180deg,#F7F2FC,#EEF5FC)}
body.pro .l-q .buddy{width:96px;height:96px}
body.pro .l-vis>*{box-shadow:0 8px 20px rgba(60,30,90,.08)}

/* etiquetes del camí (nivell, porta, bonus) per sobre del camí */
body.pro .pdiv{z-index:3}body.pro .pdiv span{box-shadow:0 4px 0 color-mix(in srgb,var(--uc) 70%,#000),0 6px 14px rgba(40,20,60,.2)}

/* Aprèn: teoria de la unitat */
.learnbtn{margin-top:8px;background:rgba(255,255,255,.22);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:12px;padding:6px 12px;font-weight:900;font-size:13px}
.lesson.learn{background:radial-gradient(900px 420px at 50% -80px,color-mix(in srgb,var(--uc) 22%,#fff),rgba(255,255,255,0) 70%),linear-gradient(180deg,#F7F2FC,#EEF5FC)}
.ldots{flex:1;display:flex;gap:6px;justify-content:center}.ldots i{width:9px;height:9px;border-radius:5px;background:#D9CCE6;transition:all .2s}.ldots i.on{width:26px;background:var(--uc)}.ldots i.done{background:color-mix(in srgb,var(--uc) 55%,#fff)}
.lstep{font-size:20px}
.lwrap{flex:1;padding:6px 16px 20px;max-width:640px;margin:0 auto;width:100%;box-sizing:border-box}
.lcard{background:#fff;border-radius:24px;padding:20px 18px;box-shadow:0 10px 30px rgba(60,30,90,.10);border:2px solid color-mix(in srgb,var(--uc) 25%,#fff);animation:cardIn .45s cubic-bezier(.2,1.2,.4,1) both}
.lcard .lk{display:block;font-weight:900;font-size:11.5px;letter-spacing:.12em;color:color-mix(in srgb,var(--uc) 80%,#000);margin-bottom:8px}
.lcard h2{margin:2px 0 6px;font-size:24px;color:var(--ink)}.lcard .ld{color:var(--mut);margin:0 0 10px}
.lchar{width:110px;height:110px;margin:-4px auto 6px}.lchar svg{width:100%;height:100%}
.llist{margin:6px 0 0;padding-left:20px;line-height:1.8;font-weight:800}
.lidea{font-size:17.5px;line-height:1.55;margin:0}
.lsteps{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:st}.lsteps li{counter-increment:st;position:relative;padding:10px 12px 10px 46px;margin-bottom:8px;background:color-mix(in srgb,var(--uc) 9%,#fff);border-radius:14px;line-height:1.45}
.lsteps li::before{content:counter(st);position:absolute;left:12px;top:9px;width:24px;height:24px;border-radius:50%;background:var(--uc);color:#fff;font-weight:900;display:grid;place-items:center;font-size:13px}
.lq{font-size:17px;line-height:1.45;font-weight:800;margin-bottom:8px}.lvis{margin:6px 0 10px}
.lans{background:#E6F7EC;border:2px solid #8FD9A8;border-radius:14px;padding:10px 12px;font-size:16px}.lans span{color:#1E7A3C;font-weight:900}
.lex{margin-top:10px;background:#FFF8E1;border-radius:14px;padding:10px 12px;line-height:1.5;font-size:15px}
.lnav{display:flex;gap:10px}.lnav .btn{flex:1}.lnav>span{flex:1}

/* Icones pròpies (icons.js): substitueixen els emojis amb la mateixa mida que el text */
img.ic{display:inline-block;width:1.2em;height:1.2em;object-fit:contain;vertical-align:-.22em;margin:0 .02em;pointer-events:none;-webkit-user-drag:none}

/* ===== Tauleta i ordinador =====
   Mòbil: tot igual. Tauleta (≥700 px): menú lateral d'icones, columna més ampla i els quadres de la
   pantalla principal en parelles. Ordinador (≥1100 px): menú lateral amb el logo, pantalla principal
   en dues columnes (mapa + quadres fixos al costat) i la lliçó una mica més gran. */
@media (min-width:700px){
  .nav{top:0;right:auto;width:96px;flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;border-top:0;border-right:2px solid var(--line);padding:18px 8px}
  .nav button{flex:none;width:80px;max-width:none;padding:10px 0;font-size:12px}
  .nav .ni{font-size:26px}
  body:has(> #app > .nav) #app,#app:has(> .nav){padding-left:96px}
  #app:has(> .nav) .page{max-width:680px;padding-bottom:48px}
  .hside{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
  .hside>*{grid-column:1/-1;margin:0!important}
  .hside>.mcard,.hside>.scard,.hside>.seasoncard:has(+ .testcard),.hside>.seasoncard+.testcard{grid-column:auto}
  .modal-bg{align-items:center;padding:24px}
  .sheet{border-radius:26px;max-width:520px;padding-bottom:24px}
}
@media (min-width:1100px){
  .nav{width:232px;align-items:stretch;padding:22px 16px;gap:4px}
  .nav::before{content:"";display:block;height:58px;margin:0 6px 16px;background:url(img/brand/logo-horitzontal.svg) left center/contain no-repeat}
  .nav button{width:auto;flex-direction:row;justify-content:flex-start;gap:14px;padding:10px 14px;font-size:15px;letter-spacing:.02em}
  .nav .ni{font-size:28px}
  #app:has(> .nav){padding-left:232px}
  #app:has(> .nav) .page{max-width:880px;padding-inline:32px}
  #app:has(> .nav) .page.home{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"top top" "main side";column-gap:40px;align-items:start}
  .page.home>.topbar{grid-area:top}
  .page.home>.hmain{grid-area:main;min-width:0}
  .page.home>.hside{grid-area:side;position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:none;padding:2px 2px 24px;margin:0}
  .page.home>.hside::-webkit-scrollbar{display:none}
  .page.home>.hside>*{flex-shrink:0}
  .agrid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
@media (min-width:1100px) and (min-height:760px){
  .lesson>.l-top,.lesson>.l-body,.lesson>.l-foot{zoom:1.12}
}

/* Teoria completa (learn.js) */
.lhook{font-size:17px;line-height:1.5;margin:0 0 12px;color:#4A3A5A}
.lidx{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.lidx button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--uc) 8%,#fff);border:2px solid color-mix(in srgb,var(--uc) 18%,#fff);font-weight:800;font-size:15.5px;color:var(--ink)}
.lidx button b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--uc);color:#fff;display:grid;place-items:center;font-size:14px}
.lexbox{margin-top:14px;border-radius:16px;padding:12px 14px 10px;background:color-mix(in srgb,var(--uc) 8%,#fff);border:2px dashed color-mix(in srgb,var(--uc) 35%,#fff);font-size:16.5px;line-height:1.5;font-weight:800;font-variant-numeric:tabular-nums}
.lexbox small{display:block;font-size:11px;letter-spacing:.12em;font-weight:900;color:color-mix(in srgb,var(--uc) 80%,#000);margin-bottom:4px}
.lexbox div{padding:3px 0}
.lexbox .res{margin-top:4px;padding-top:7px;border-top:2px solid color-mix(in srgb,var(--uc) 20%,#fff);color:var(--ink)}
.lcard .hl{background:linear-gradient(transparent 55%,#FFE38A 55%);padding:0 2px;font-weight:900}
.lwords{margin:4px 0 0;display:grid;gap:10px}
.lwords div{padding:10px 12px;border-radius:14px;background:#FAF7FD;border:2px solid #EFE7F6}
.lwords dt{font-weight:900;font-size:16.5px;color:color-mix(in srgb,var(--uc) 85%,#000)}
.lwords dd{margin:2px 0 0;line-height:1.45;color:#4A3A5A}
.lmist{margin:10px 0;border-radius:16px;overflow:hidden;border:2px solid #F1E7F5}
.lmist p{margin:0;padding:10px 12px 10px 42px;position:relative;line-height:1.45}
.lmist p i{position:absolute;left:12px;top:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:12px;color:#fff}
.lmist .bad{background:#FFF1F1;color:#8A2E33}.lmist .bad i{background:var(--ko)}
.lmist .good{background:#EFFAF3;color:#1E5E35}.lmist .good i{background:var(--ok)}
.ltip{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px;border-radius:16px;background:#FFF8E1;border:2px solid #FBE4A0}
.ltip .lchar.sm{width:64px;height:64px;margin:0;flex:none}
.ltip p{margin:0;line-height:1.45}.ltip small{display:block;font-weight:900;font-size:11px;letter-spacing:.12em;color:#9A6A00;margin-bottom:2px}
.lrecap{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.lrecap li{position:relative;padding:10px 12px 10px 44px;border-radius:14px;background:#EFFAF3;line-height:1.45;font-weight:800}
.lrecap li::before{content:"✓";position:absolute;left:12px;top:9px;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.lchk{padding:12px 0;border-top:2px solid #F1E9F7}.lchk:first-of-type{border-top:0}
.lopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.lopts button{padding:12px 8px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:900;font-size:17px;box-shadow:0 3px 0 var(--line)}
.lopts button.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok-d)}
.lopts button.ko{background:var(--ko-bg);border-color:var(--ko);color:var(--ko-d)}
.lopts button.off{opacity:.5}
.lfb{margin:8px 0 0;padding:10px 12px;border-radius:12px;line-height:1.45;font-size:15px}
.lfb.ok{background:var(--ok-bg);color:#1E5E35}.lfb.ko{background:#FFF1F1;color:#8A2E33}
.ldots i{cursor:pointer}

/* Logo Numi Mates */
.onb-logo{display:block;width:min(220px,60vw);height:auto;margin:0 auto 6px}
.footlogo{height:34px;width:auto;opacity:.85;vertical-align:middle}