@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/bricolage.woff2) format("woff2");
}
/* =========================================================
   CATNARI — full d'estil
   Una sola pantalla, la graella sempre visible i tan gran com hi càpiga.
   Tot el que no és jugar viu dins d'un full que puja des de baix.
   ========================================================= */

:root{
  /* CATNARI · tema clar: paper crema, tinta marina, or */
  --fons-1:#FFF9EC; --fons-2:#F3E9D2; --fons-3:#E6D8B8;
  --panel:rgba(255,251,242,.84); --panel-sol:#FFFBF2; --panel-2:#F4EBD8;
  --vora:rgba(10,22,40,.12); --vora-forta:rgba(10,22,40,.22);
  --ink:#0B1A2E; --ink-2:#3E4E68; --ink-3:#76839A;
  --peca-1:#FFFDF7; --peca-2:#F1E6CF; --peca-ink:#0B1A2E; --peca-vora:#C8B78F;
  --blau:#1F5FCC; --blau-2:#3E82F0; --blau-ink:#FFFFFF;
  --or:#D99400; --or-2:#FFC21A; --or-3:#FFDD55; --or-ink:#1A1203;
  --verd:#1B8A5A; --verd-2:#2FBF7E;
  --roig:#C23A28; --roig-2:#EE6A55;
  --taulell-1:#13294A; --taulell-2:#0A1628; --taulell-vora:#FFC21A;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:28px;
  --ombra-1:0 1px 2px rgba(10,22,40,.08);
  --ombra-2:0 2px 6px rgba(10,22,40,.10), 0 12px 28px rgba(10,22,40,.12);
  --ombra-3:0 14px 44px rgba(10,22,40,.22);
  --fam:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --molla:cubic-bezier(.2,.9,.28,1.1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fons-1:#16305A; --fons-2:#0A1628; --fons-3:#040A14;
    --panel:rgba(18,36,66,.72); --panel-sol:#0F213D; --panel-2:#162D52;
    --vora:rgba(160,190,240,.14); --vora-forta:rgba(160,190,240,.28);
    --ink:#F7F0E1; --ink-2:#B3C3DD; --ink-3:#7F92B3;
    --peca-1:#FFF8E8; --peca-2:#EADDC1; --peca-ink:#0B1A2E; --peca-vora:#9A865E;
    --blau:#3E82F0; --blau-2:#71A6FF; --blau-ink:#06101F;
    --or:#FFB300; --or-2:#FFC933; --or-3:#FFE17A; --or-ink:#1A1203;
    --verd:#2FBF7E; --verd-2:#6FE3AE;
    --roig:#EE6A55; --roig-2:#FF9B87;
    --taulell-1:#132C52; --taulell-2:#081424;
    --ombra-1:0 1px 2px rgba(0,0,0,.35);
    --ombra-2:0 2px 6px rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.42);
    --ombra-3:0 16px 50px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --fons-1:#16305A; --fons-2:#0A1628; --fons-3:#040A14;
  --panel:rgba(18,36,66,.72); --panel-sol:#0F213D; --panel-2:#162D52;
  --vora:rgba(160,190,240,.14); --vora-forta:rgba(160,190,240,.28);
  --ink:#F7F0E1; --ink-2:#B3C3DD; --ink-3:#7F92B3;
  --peca-1:#FFF8E8; --peca-2:#EADDC1; --peca-ink:#0B1A2E; --peca-vora:#9A865E;
  --blau:#3E82F0; --blau-2:#71A6FF; --blau-ink:#06101F;
  --or:#FFB300; --or-2:#FFC933; --or-3:#FFE17A; --or-ink:#1A1203;
  --verd:#2FBF7E; --verd-2:#6FE3AE; --roig:#EE6A55; --roig-2:#FF9B87;
  --taulell-1:#132C52; --taulell-2:#081424;
  --ombra-1:0 1px 2px rgba(0,0,0,.35);
  --ombra-2:0 2px 6px rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.42);
  --ombra-3:0 16px 50px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--fam); font-size:16px; line-height:1.4; color:var(--ink);
  -webkit-text-size-adjust:100%; overscroll-behavior:none;
  background:
    radial-gradient(130% 70% at 50% -12%, var(--fons-1) 0%, var(--fons-2) 58%, var(--fons-3) 100%)
    fixed;
}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer}
svg{width:1em;height:1em;display:block}
:focus-visible{outline:2px solid var(--blau-2);outline-offset:3px}
.wrap{
  max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
}

/* ---------- botons ---------- */
.rodo{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:1.05rem;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--vora);box-shadow:var(--ombra-1);
  backdrop-filter:blur(8px);transition:transform .15s var(--molla),color .15s,background .15s;
}
.rodo:hover{color:var(--ink);transform:translateY(-1px)}
.rodo:active{transform:scale(.94)}
.pastilla{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:12px 20px;font-weight:700;font-size:.92rem;letter-spacing:.01em;
  background:linear-gradient(180deg,var(--blau-2),var(--blau));color:var(--blau-ink);
  box-shadow:var(--ombra-2),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .15s var(--molla),filter .15s;
}
.pastilla:hover{filter:brightness(1.06)}
.pastilla:active{transform:scale(.97)}
.pastilla.buida{
  background:var(--panel);color:var(--ink);border:1px solid var(--vora);
  box-shadow:var(--ombra-1);
}
.pastilla svg{font-size:1.05rem}
.pastilla:disabled{opacity:.45;cursor:not-allowed}

/* ---------- peces ---------- */
.peca{
  position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:14px;font-weight:700;line-height:1;color:var(--peca-ink);
  background:linear-gradient(168deg,var(--peca-1) 0%,var(--peca-2) 100%);
  box-shadow:
    0 2px 0 var(--peca-vora),
    0 5px 12px rgba(10,20,40,.22),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.peca .val{position:absolute;right:5px;bottom:3px;font-size:.46em;font-weight:600;opacity:.38}
.peca .bo{
  position:absolute;left:5px;top:4px;font-size:.36em;font-weight:800;
  letter-spacing:-.02em;opacity:.9;
}

/* =========================================================
   Barra superior
   ========================================================= */
.barra-sup{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:8px;
}
.barra-sup .marca{display:flex;align-items:center;padding:2px 0;min-width:0;flex:0 1 auto}
.barra-sup .marca img{height:34px;width:auto;max-width:44vw;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));transition:transform .2s var(--molla)}
.barra-sup .marca:active img{transform:scale(.96)}
.botonera{display:flex;gap:6px}
.botonera .rodo{width:38px;height:38px;font-size:1.02rem}
.carregant{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:90dvh;color:var(--ink-3);font-size:.9rem}
.carregant img{width:min(70vw,340px);height:auto;animation:respira 1.6s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.03);opacity:.85}}

/* llista de modes dins del full */
.llista-modes{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.mode{
  position:relative;overflow:hidden;text-align:left;width:100%;
  display:flex;align-items:center;gap:13px;
  background:var(--panel-2);border:1px solid var(--vora);border-radius:var(--r-m);
  padding:12px 14px;transition:transform .14s var(--molla),border-color .14s;
}
.mode::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--blau-2),var(--blau))}
.mode:nth-child(3)::before{background:linear-gradient(180deg,var(--verd-2),var(--verd))}
.mode:nth-child(4)::before{background:linear-gradient(180deg,var(--roig-2),var(--roig))}
.mode:nth-child(5)::before{background:linear-gradient(180deg,var(--or-2),var(--or))}
.mode:hover{transform:translateX(3px);border-color:var(--vora-forta)}
.mode .k{font-size:1.35rem;width:26px;text-align:center;flex:0 0 auto}
.mode .cos{flex:1;min-width:0}
.mode b{display:block;font-size:.93rem;font-weight:800;letter-spacing:-.01em}
.mode small{font-size:.72rem;color:var(--ink-3);font-weight:400;line-height:1.3}
.mode .marca{
  font-size:.7rem;font-weight:800;color:var(--or);font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--or) 14%,transparent);border-radius:999px;padding:3px 9px;
}

/* =========================================================
   Partida
   ========================================================= */
.joc{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0}
.peu{display:flex;flex-direction:column;gap:6px;padding-top:6px}

.hud{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.hud .etiqueta{margin-left:auto}
.hud .anella-temps{margin-left:4px}
.punts{
  display:flex;align-items:baseline;gap:6px;background:var(--panel);
  border:1px solid var(--vora);border-radius:999px;padding:6px 14px 6px 16px;
  box-shadow:var(--ombra-1);backdrop-filter:blur(8px);
}
.punts b{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.1}
.punts span{font-size:.62rem;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.08em}

.combo{
  display:flex;align-items:center;gap:4px;font-size:.8rem;font-weight:800;
  color:var(--or);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s,transform .2s var(--molla);
  transform:scale(.9);
}
.combo.on{opacity:1;transform:none}
.combo.febre{color:var(--roig-2)}
.combo svg{font-size:.95rem}
.anella-temps{position:relative;width:44px;height:44px;flex:0 0 auto}
.anella-temps svg{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.anella-temps circle{fill:none;stroke-width:3.5;stroke-linecap:round}
.anella-temps .pista-cercle{stroke:color-mix(in srgb,var(--ink) 14%,transparent)}
.anella-temps .avanç{stroke:var(--blau-2);transition:stroke-dashoffset .25s linear,stroke .3s}
.anella-temps.urgent .avanç{stroke:var(--roig-2)}
.anella-temps b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.anella-temps.urgent b{color:var(--roig-2)}
.vides{font-size:1rem;color:var(--roig-2);letter-spacing:1px}

.tira{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:20px}
.etiqueta{
  font-size:.67rem;font-weight:700;color:var(--ink-2);letter-spacing:.02em;
  background:var(--panel);border:1px solid var(--vora);border-radius:999px;
  padding:3px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
}
.etiqueta.caca{color:var(--or);border-color:color-mix(in srgb,var(--or) 40%,transparent)}
.etiqueta.pendents{color:var(--verd);border-color:color-mix(in srgb,var(--verd) 40%,transparent)}
.etiqueta b{font-weight:800;color:var(--ink)}
.etiqueta.caca b,.etiqueta.pendents b{color:inherit}

.curs{
  height:36px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:1.3rem;font-weight:800;letter-spacing:.11em;color:var(--ink-3);
  transition:color .15s;
}
.curs > span:first-child{animation:apareix .12s var(--molla)}
@keyframes apareix{from{transform:scale(.94);opacity:.5}}
.curs.bona{color:var(--verd-2);text-shadow:0 0 22px color-mix(in srgb,var(--verd-2) 45%,transparent)}
.curs.dubte{color:var(--or)}
.curs.pistat{color:var(--or);font-size:.95rem;letter-spacing:.03em;font-weight:700}
.curs .pts{font-size:.76rem;letter-spacing:0;font-weight:700;opacity:.95}
.curs .nou{
  font-size:.62rem;background:linear-gradient(180deg,var(--verd-2),var(--verd));
  color:#fff;border-radius:999px;padding:3px 8px;letter-spacing:.06em;font-weight:800;
}
.curs .fes{
  background:linear-gradient(180deg,var(--blau-2),var(--blau));color:var(--blau-ink);
  border-radius:999px;font-size:.7rem;letter-spacing:.04em;padding:5px 12px;font-weight:800;
  box-shadow:var(--ombra-1);
}

/* ---------- graella ---------- */
.zona{flex:1;display:grid;place-items:center;min-height:0}
.taulell{
  position:relative;aspect-ratio:1;
  width:clamp(220px, min(96vw, calc(100dvh - 272px)), 480px);
  padding:9px;border-radius:var(--r-xl);
  background:linear-gradient(170deg, color-mix(in srgb,var(--ink) 7%,transparent), color-mix(in srgb,var(--ink) 13%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px var(--vora), var(--ombra-3);
}
.graella{
  position:absolute;inset:9px;display:grid;gap:7px;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.graella .peca{font-size:clamp(1.05rem,5vw,1.8rem);cursor:pointer;transition:transform .1s var(--molla),box-shadow .12s}
.peca.sel{
  color:var(--blau-ink);
  background:linear-gradient(168deg,var(--blau-2),var(--blau));
  box-shadow:0 2px 0 color-mix(in srgb,var(--blau) 70%,#000),
             0 0 0 3px color-mix(in srgb,var(--blau-2) 35%,transparent),
             0 8px 22px color-mix(in srgb,var(--blau) 45%,transparent);
  transform:scale(1.06);
}
.peca.sel .val,.peca.sel .bo{opacity:.7}
.peca.nova{animation:cau .3s var(--molla)}
@keyframes cau{from{transform:translateY(-38%) scale(.88);opacity:0}}
.peca.bo-dl::after,.peca.bo-tl::after,.peca.bo-dp::after,.peca.bo-tm::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2.5px currentColor;opacity:.55;
}
.peca.bo-dl{color:var(--blau)} .peca.bo-tl{color:var(--verd)}
.peca.bo-dp{color:var(--or)}   .peca.bo-tm{color:var(--roig)}
.peca.bo-dl,.peca.bo-tl,.peca.bo-dp,.peca.bo-tm{color:var(--peca-ink)}
.peca.bo-dl .bo{color:var(--blau)} .peca.bo-tl .bo{color:var(--verd)}
.peca.bo-dp .bo{color:var(--or)}   .peca.bo-tm .bo{color:var(--roig)}
.peca.bo-dl::after{box-shadow:inset 0 0 0 2.5px var(--blau)}
.peca.bo-tl::after{box-shadow:inset 0 0 0 2.5px var(--verd)}
.peca.bo-dp::after{box-shadow:inset 0 0 0 2.5px var(--or)}
.peca.bo-tm::after{box-shadow:inset 0 0 0 2.5px var(--roig)}
.peca.gel{
  color:color-mix(in srgb,var(--peca-ink) 42%,transparent);cursor:not-allowed;
  background:linear-gradient(168deg,#cfe0f5,#a9c4e6);
  box-shadow:0 2px 0 #7f98bb, inset 0 1px 0 rgba(255,255,255,.7);
}
.peca.gel::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
}
.peca.pista{
  color:#fff;background:linear-gradient(168deg,var(--or-2),var(--or));
  box-shadow:0 2px 0 color-mix(in srgb,var(--or) 70%,#000),
             0 0 0 3px color-mix(in srgb,var(--or-2) 40%,transparent),
             0 0 26px color-mix(in srgb,var(--or-2) 60%,transparent);
  transform:scale(1.05);z-index:2;animation:encen .45s var(--molla);
}
@keyframes encen{from{transform:scale(1)}60%{transform:scale(1.16)}to{transform:scale(1.05)}}
.fil{position:absolute;inset:9px;pointer-events:none}
.fil path{fill:none;stroke:var(--blau-2);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.fil .rastre{stroke:var(--or-2);opacity:.65;stroke-width:8;stroke-dasharray:2 15}
.taulell.error{animation:tremola .25s}
@keyframes tremola{20%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
.taulell.febre{
  box-shadow:inset 0 0 0 1px var(--vora),
             0 0 0 3px color-mix(in srgb,var(--roig-2) 45%,transparent),
             0 0 60px color-mix(in srgb,var(--roig) 45%,transparent), var(--ombra-3);
  animation:batec 1.4s ease-in-out infinite;
}
@keyframes batec{50%{box-shadow:inset 0 0 0 1px var(--vora),0 0 0 6px color-mix(in srgb,var(--roig-2) 30%,transparent),0 0 80px color-mix(in srgb,var(--roig) 55%,transparent),var(--ombra-3)}}
.taulell.nivell{animation:esclat .7s ease-out}
@keyframes esclat{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--or-2) 75%,transparent),var(--ombra-3)}
                  to{box-shadow:0 0 0 26px transparent,var(--ombra-3)}}
.volant{
  position:absolute;pointer-events:none;font-weight:800;font-size:1.15rem;white-space:nowrap;
  color:var(--verd-2);text-shadow:0 2px 12px rgba(0,0,0,.35);
  transform:translate(-50%,0);z-index:5;animation:puja 1s ease-out forwards;
}
.volant.or{color:var(--or-2)}
.volant.gris{color:var(--ink-3)}
@keyframes puja{from{transform:translate(-50%,0) scale(.8);opacity:0}
                20%{transform:translate(-50%,-12px) scale(1.08);opacity:1}
                to{transform:translate(-50%,-64px) scale(1);opacity:0}}

/* ---------- troballes ---------- */
.trobades{display:flex;gap:5px;overflow-x:auto;min-height:28px;scrollbar-width:none;align-items:center}
.trobades::-webkit-scrollbar{display:none}
.xip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  background:var(--panel);border:1px solid var(--vora);border-radius:999px;
  padding:4px 11px;font-size:.73rem;font-weight:700;white-space:nowrap;
  box-shadow:var(--ombra-1);animation:entra .25s var(--molla);
}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.9)}}
.xip .p{color:var(--verd);font-weight:800;font-variant-numeric:tabular-nums}
.xip.nou{
  border-color:color-mix(in srgb,var(--verd-2) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--verd-2) 18%,var(--panel)),var(--panel));
}
.xip.repe{opacity:.6}
.xip.repe .p{color:var(--ink-3)}
.xip.dubtosa{border-style:dashed;color:var(--or)}
.buit{color:var(--ink-3);font-size:.72rem;font-weight:400}

/* ---------- moll d'eines ---------- */
.dock{
  display:flex;gap:6px;justify-content:center;align-items:center;
  background:var(--panel);border:1px solid var(--vora);border-radius:999px;
  padding:5px;box-shadow:var(--ombra-2);backdrop-filter:blur(12px);
  align-self:center;
}
.dock-b{
  position:relative;width:60px;height:48px;border-radius:999px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-2);font-size:1.1rem;transition:background .15s,color .15s,transform .15s var(--molla);
}
.dock-b span{font-size:.55rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.dock-b:hover:not(:disabled){color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dock-b:active:not(:disabled){transform:scale(.93)}
.dock-b:disabled{opacity:.3;cursor:not-allowed}
.dock-b b{
  position:absolute;top:2px;right:8px;min-width:16px;height:16px;line-height:16px;
  border-radius:999px;background:var(--blau);color:var(--blau-ink);
  font-size:.58rem;font-weight:800;text-align:center;padding:0 3px;
}
.dock-b.fi{color:var(--roig-2)}
.dock-b.destacat{color:var(--blau-2)}

/* peu d'icones de la portada */
.icones-peu{display:flex;gap:8px;justify-content:center;margin-top:auto;padding-top:8px}
.icones-peu .dock-b{width:70px;height:56px;font-size:1.25rem;background:var(--panel);border:1px solid var(--vora)}

/* =========================================================
   Fulls
   ========================================================= */
.full{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(6,14,28,.55);backdrop-filter:blur(6px);animation:fos .22s ease-out;
}
@keyframes fos{from{opacity:0}}
.fulla{
  background:var(--panel-sol);width:100%;max-width:560px;max-height:86dvh;overflow-y:auto;
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--ombra-3);
  border:1px solid var(--vora);border-bottom:none;
  padding:10px 18px calc(20px + env(safe-area-inset-bottom));
  animation:puja-fulla .3s var(--molla);
}
@keyframes puja-fulla{from{transform:translateY(28px);opacity:.4}}
.nansa{width:38px;height:4px;border-radius:2px;background:var(--vora-forta);margin:2px auto 14px}
.fulla h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.fulla h3{
  font-size:.7rem;font-weight:800;margin:18px 0 7px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);
}
.fulla p{color:var(--ink-2);font-weight:400;font-size:.86rem;margin-bottom:8px}
.fulla ul{margin:0 0 8px 16px;color:var(--ink-2);font-weight:400;font-size:.84rem}
.fulla li{margin-bottom:4px}
.cap-full{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
@media (min-width:720px){
  .full{align-items:center;padding:20px}
  .fulla{border-radius:var(--r-xl);max-height:84dvh;border-bottom:1px solid var(--vora)}
  .nansa{display:none}
}

.gran{
  font-size:3.2rem;font-weight:800;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 55%,var(--blau)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.dada{
  background:var(--panel-2);border:1px solid var(--vora);border-radius:var(--r-s);padding:10px;
}
.dada b{display:block;font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25}
.dada span{font-size:.66rem;color:var(--ink-3);font-weight:500}
.accions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.accions .pastilla{flex:1;justify-content:center}
.missio{display:flex;gap:8px;align-items:center;font-size:.85rem;margin-bottom:5px;color:var(--ink-2)}
.missio.feta{color:var(--verd);font-weight:700}
.missio .q{opacity:.65;font-size:.75rem;margin-left:auto;font-variant-numeric:tabular-nums}
.nota{font-size:.74rem;color:var(--ink-3);font-weight:400;margin-top:8px}
.def{font-size:.82rem;color:var(--ink-2);font-weight:400;margin-bottom:6px;line-height:1.45}
.def b{color:var(--ink);font-weight:800}
.comparteix{
  width:100%;background:var(--panel-2);border:1px solid var(--vora);border-radius:var(--r-s);
  padding:11px;font-family:ui-monospace,Menlo,monospace;font-size:.74rem;color:var(--ink);
  resize:vertical;margin-top:8px;
}
.rang{font-size:.85rem;color:var(--ink-2)}
.rang b{color:var(--or);font-weight:800}

/* ---------- diccionari ---------- */
.barra-prog{
  height:9px;background:color-mix(in srgb,var(--ink) 10%,transparent);
  border-radius:5px;overflow:hidden;margin:7px 0;
}
.barra-prog i{
  display:block;height:100%;border-radius:5px;transition:width .5s var(--molla);
  background:linear-gradient(90deg,var(--blau),var(--blau-2));
}
.cerca{
  width:100%;background:var(--panel-2);border:1px solid var(--vora);border-radius:999px;
  padding:10px 16px;font-family:inherit;font-size:.86rem;color:var(--ink);margin-top:6px;
}
.cerca::placeholder{color:var(--ink-3)}
.az{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 4px}
.az button{
  flex:1 1 30px;min-width:30px;height:32px;border-radius:9px;border:1px solid var(--vora);
  font-size:.78rem;font-weight:800;background:var(--panel-2);position:relative;overflow:hidden;
  color:var(--ink-2);transition:transform .12s var(--molla);
}
.az button:active{transform:scale(.92)}
.az button i{position:absolute;left:0;bottom:0;height:3px;background:var(--verd-2)}
.az button.buida{opacity:.35}
.az button.act{background:linear-gradient(180deg,var(--blau-2),var(--blau));color:var(--blau-ink);border-color:transparent}
.entrades{margin-top:4px}
.entrada{
  padding:9px 2px;border-bottom:1px solid var(--vora);
  display:grid;grid-template-columns:minmax(84px,auto) 1fr;gap:4px 12px;align-items:baseline;
}
.entrada dt{font-weight:800;font-size:.92rem;letter-spacing:-.01em}
.entrada.pendent dt{color:var(--ink-3);font-weight:600;letter-spacing:.16em;font-size:.82rem}
.entrada.pendent dd{color:var(--ink-3);opacity:.7}
.entrada dd{font-size:.76rem;color:var(--ink-2);font-weight:400;line-height:1.5}
.entrada .cat{color:var(--or);font-weight:700;font-size:.68rem;margin-right:5px;text-transform:uppercase;letter-spacing:.04em}
.entrada .acc{display:block}
.entrada .demana{color:var(--blau-2);font-weight:700;border-bottom:1px dotted var(--blau-2);font-size:.74rem}
.entrada .def-claude{color:var(--ink);font-style:italic}
.mes{
  width:100%;margin-top:12px;border:1px dashed var(--vora-forta);border-radius:999px;
  padding:10px;font-size:.8rem;color:var(--ink-3);font-weight:600;
}

/* ---------- estadístiques ---------- */
.graella-dades{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.calendari{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.calendari i{
  width:12px;height:12px;border-radius:3px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
}
.calendari i.jugat{background:linear-gradient(180deg,var(--verd-2),var(--verd))}

/* ---------- laboratori ---------- */
.lab label{display:flex;gap:6px;align-items:center;font-size:.8rem;color:var(--ink-2)}
.lab input[type=number],.lab textarea{
  background:var(--panel-2);color:var(--ink);border:1px solid var(--vora);
  border-radius:9px;padding:7px 10px;font-family:inherit;font-size:.82rem;
}
.lab input[type=number]{width:64px}
.lab textarea{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;resize:vertical}
.lab .fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.lab .prova{background:var(--panel-2);border:1px solid var(--vora);border-radius:var(--r-s);padding:12px;font-size:.8rem;line-height:1.65;color:var(--ink-2)}
.lab .prova b{color:var(--ink)}
.ok{color:var(--verd);font-weight:800}
.ko{color:var(--roig);font-weight:800}
#lab-graella{display:grid;gap:3px;width:100%;max-width:260px;aspect-ratio:1;margin:10px 0}
#lab-graella .peca{font-size:.72rem;border-radius:6px;box-shadow:0 1px 0 var(--peca-vora)}
#lab-graella .peca.kw{background:linear-gradient(168deg,var(--blau-2),var(--blau));color:var(--blau-ink)}

@media (min-width:900px){
  .wrap{max-width:920px}
  .peu{flex-direction:row;align-items:center;gap:12px}
  .peu .trobades{flex:1}
  .peu .dock{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- peces a punt de petrificar-se ---------- */
.peca.vella{
  background:linear-gradient(168deg,#e8e2d4,#cfc6b2);
  box-shadow:0 2px 0 #a89c85, inset 0 1px 0 rgba(255,255,255,.6);
}
.peca.vella::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--roig) 45%,transparent);
  animation:alerta 1.6s ease-in-out infinite;
}
@keyframes alerta{50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--roig) 12%,transparent)}}

/* ---------- assoliments ---------- */
.assoliments{display:flex;flex-direction:column;gap:5px}
.assoliment{
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-s);
  background:var(--panel-2);border:1px solid var(--vora);opacity:.45;
}
.assoliment.fet{opacity:1;border-color:color-mix(in srgb,var(--or) 45%,transparent)}
.assoliment .ico{font-size:1.1rem;color:var(--ink-3)}
.assoliment.fet .ico{color:var(--or)}
.assoliment b{display:block;font-size:.85rem;font-weight:800}
.assoliment small{font-size:.72rem;color:var(--ink-3)}

/* ---------- ajustos ---------- */
.ajust{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--vora);
}
.ajust > span{font-size:.88rem;font-weight:600}
.ajust > span small{display:block;font-size:.7rem;color:var(--ink-3);font-weight:400}
.tries{display:flex;gap:4px;flex:0 0 auto}
.tries button{
  border:1px solid var(--vora);background:var(--panel-2);border-radius:999px;
  padding:6px 11px;font-size:.76rem;font-weight:700;color:var(--ink-3);
  transition:background .14s,color .14s;
}
.tries button.act{background:linear-gradient(180deg,var(--blau-2),var(--blau));color:var(--blau-ink);border-color:transparent}


/* =========================================================
   v4 — components nous
   ========================================================= */
.mode .k svg{width:1.3rem;height:1.3rem;margin:auto}
.full.surt{animation:fos-out .18s ease-in forwards}
.full.surt .fulla{animation:baixa-fulla .18s ease-in forwards}
@keyframes fos-out{to{opacity:0}}
@keyframes baixa-fulla{to{transform:translateY(30px);opacity:0}}
.fulla:focus{outline:none}
.full.petit .fulla{max-width:420px}
.pastilla.perill{background:linear-gradient(180deg,var(--roig-2),var(--roig));color:#fff}
.rodo.instal{color:var(--or);border-color:color-mix(in srgb,var(--or) 45%,transparent)}

/* final de partida sobre el taulell */
.taulell.acabat .graella{filter:saturate(.4) brightness(.85);pointer-events:none}
.final{
  position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border-radius:inherit;background:color-mix(in srgb,var(--fons-3) 55%,transparent);backdrop-filter:blur(3px);
  animation:fos .3s ease-out;text-align:center;padding:16px;
}
.final b{font-size:1.15rem;font-weight:800;color:var(--ink);text-shadow:0 2px 14px rgba(0,0,0,.25)}
.final[hidden]{display:none}

/* avís flotant */
.toast{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:12px;max-width:min(92vw,480px);
  background:var(--panel-sol);color:var(--ink);border:1px solid var(--vora-forta);border-radius:999px;
  padding:10px 10px 10px 18px;box-shadow:var(--ombra-3);font-size:.84rem;font-weight:600;animation:puja-fulla .3s var(--molla);
}
.toast button{background:linear-gradient(180deg,var(--or-2),var(--or));color:#1a1203;border-radius:999px;padding:7px 14px;font-weight:800;font-size:.78rem}
.toast.fora{opacity:0;transform:translate(-50%,12px);transition:opacity .5s,transform .5s}

/* ---------- diccionari v4 ---------- */
.full.dic .fulla{max-width:640px}
.dic-progres{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.dic-progres p{margin:0}
.anell-pct{
  --p:0;flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--or-2) calc(var(--p) * 1%), color-mix(in srgb,var(--ink) 10%,transparent) 0);
  position:relative;
}
.anell-pct::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--panel-sol)}
.anell-pct b{position:relative;font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums}
.cerca-caixa{position:relative;display:flex;align-items:center;margin-top:10px}
.cerca-caixa > svg{position:absolute;left:14px;color:var(--ink-3);font-size:1rem;pointer-events:none}
.cerca-caixa .cerca{padding-left:40px;padding-right:40px;margin:0;font-size:.95rem}
.cerca-caixa .cerca::-webkit-search-cancel-button{display:none}
.cerca-caixa .neteja{position:absolute;right:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.xips-filtre{display:flex;gap:5px;margin-top:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.xips-filtre::-webkit-scrollbar{display:none}
.xips-filtre button{
  flex:0 0 auto;border:1px solid var(--vora);background:var(--panel-2);border-radius:999px;
  padding:6px 12px;font-size:.74rem;font-weight:700;color:var(--ink-2);transition:background .15s,color .15s,transform .12s var(--molla);
}
.xips-filtre button:active{transform:scale(.95)}
.xips-filtre button.act{background:var(--ink);color:var(--panel-sol);border-color:transparent}
.dic-titol{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-3);margin:12px 0 2px;min-height:18px}
.dic-titol b{font-size:1.4rem;color:var(--ink);font-weight:800;margin-right:2px}
.carrega-mini{margin-left:auto;font-size:.7rem;animation:respira 1.2s infinite}
.entrada{
  display:grid;grid-template-columns:minmax(96px,34%) 1fr auto;gap:10px;align-items:center;
  padding:11px 6px;border-bottom:1px solid var(--vora);cursor:pointer;border-radius:10px;
  transition:background .12s;
}
.entrada:hover,.entrada:focus-visible{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.entrada > svg{color:var(--ink-3);font-size:.9rem}
.cap-e{font-weight:800;font-size:.95rem;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-e .rara{font-style:normal;color:var(--or);font-size:.7rem;margin-left:4px;vertical-align:super}
.entrada.pendent .cap-e{color:var(--ink-3);letter-spacing:.06em}
.punts-e{opacity:.45;letter-spacing:.18em;font-size:.7rem;margin-left:2px}
.cos-e{display:flex;flex-direction:column;gap:3px;min-width:0}
.cos-e small{font-size:.74rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entrada.pendent small{color:var(--ink-3)}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pill{
  display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);line-height:1.5;
}
.pill.c-n{color:var(--blau-2)} .pill.c-v{color:var(--verd-2)} .pill.c-a{color:var(--or)}
.pill.c-r{color:#B57BEA} .pill.c-g{color:var(--ink-3)} .pill.c-i{color:var(--roig-2)}
.xips-filtre.cats .c-n.act{background:var(--blau)} .xips-filtre.cats .c-v.act{background:var(--verd)}
.xips-filtre.cats .c-a.act{background:var(--or)} .xips-filtre.cats .c-r.act{background:#8B55C9}
.xips-filtre.cats .act{color:#fff}
.grup-sin{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:12px 4px 2px}
.grup-sin svg{font-size:.9rem}
.buit-dic{padding:30px 10px;text-align:center;color:var(--ink-3);font-size:.86rem}
.sentinella{height:1px}
.credits{margin-top:14px}

/* fitxa */
.mot-fitxa{font-size:1.9rem !important;letter-spacing:-.02em}
.amagada{letter-spacing:.2em;color:var(--ink-3)}
.gran-p .pill{font-size:.72rem;padding:4px 10px}
.fitxa{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.forma-h{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:1.05rem}
.forma-h small{font-size:.7rem;color:var(--ink-3)}
.lectura{background:var(--panel-2);border:1px solid var(--vora);border-radius:var(--r-m);padding:12px 14px}
.lect-cap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lect-cap .pill{font-size:.66rem}
.lema{font-size:.8rem;color:var(--ink-2)}
.lema b{color:var(--ink)}
.flexio{font-size:.76rem !important;color:var(--ink-3) !important;margin:6px 0 0 !important}
.sentits{margin:8px 0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px}
.sentits li{font-size:.84rem;color:var(--ink-2);line-height:1.6}
.sentits li::marker{color:var(--or);font-weight:800}
.sin{display:inline-block;margin:0 6px 0 0}
.sin:not(:last-child)::after{content:','}
.ctx{font-size:.72rem;color:var(--or);font-style:normal;font-weight:700;margin-right:4px}
.ctx::before{content:'('} .ctx::after{content:')'}
.ant{font-size:.8rem !important;margin:8px 0 0 !important}
.ant span{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--roig-2);margin-right:6px}
.def-claude p{margin:8px 0 0 !important;color:var(--ink) !important;font-style:italic}
#fitxa-def{margin-top:10px}
.rara-n{color:var(--or) !important}
.cat-d{font-size:.72rem;color:var(--or)}
.cerca-caixa .neteja[hidden]{display:none}
.barra-sup .marca img{height:28px;max-width:calc(100vw - 250px)}
@media (min-width:420px){ .barra-sup .marca img{height:32px} }


/* =========================================================
   v4.1 — identitat CATNARI (marí + or) i pulit AAA
   ========================================================= */
body{
  background:
    radial-gradient(120% 60% at 50% -10%, var(--fons-1) 0%, var(--fons-2) 60%, var(--fons-3) 100%) fixed;
}
body::before{
  /* graella tènue del logo al fons */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(90% 70% at 50% 30%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%,#000 30%,transparent 80%);
}
::selection{background:var(--or-2);color:var(--or-ink)}

/* botons principals en or, com el logo */
.pastilla{
  background:linear-gradient(180deg,var(--or-3) 0%,var(--or-2) 45%,var(--or) 100%);color:var(--or-ink);
  box-shadow:0 3px 0 color-mix(in srgb,var(--or) 60%,#5a3a00), var(--ombra-2), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.pastilla:active{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 color-mix(in srgb,var(--or) 60%,#5a3a00), var(--ombra-1)}
.pastilla.buida{text-shadow:none}
.rodo{width:40px;height:40px}
.rodo:hover{color:var(--or)}

/* barra superior */
.barra-sup{padding-bottom:10px}
.botonera{gap:5px}

/* HUD */
.punts{
  background:linear-gradient(180deg,color-mix(in srgb,var(--taulell-1) 92%,transparent),var(--taulell-2));
  border:1px solid color-mix(in srgb,var(--or-2) 35%,transparent);color:#FFF6E0;
}
.punts b{color:#FFF6E0}
.punts span{color:color-mix(in srgb,var(--or-2) 80%,#fff)}
.punts.puja b{animation:bot .35s var(--molla)}
@keyframes bot{40%{transform:scale(1.18);color:var(--or-2)}}
.anella-temps .avanç{stroke:var(--or-2)}
.combo{color:var(--or)}
.etiqueta.caca{color:var(--or);background:color-mix(in srgb,var(--or-2) 12%,var(--panel))}
.etiqueta.pendents{color:var(--verd);background:color-mix(in srgb,var(--verd-2) 10%,var(--panel))}

/* cursor de paraula */
.curs{font-size:1.45rem;height:40px}
.curs.bona{color:var(--verd-2)}
.curs .fes{background:linear-gradient(180deg,var(--or-3),var(--or));color:var(--or-ink)}

/* ---------- taulell: marc marí amb fil d'or (com la icona) ---------- */
.taulell{
  padding:10px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--taulell-1) 100%,#2a4a80) 0%, var(--taulell-2) 100%);
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--taulell-vora) 85%,transparent),
    0 0 0 6px color-mix(in srgb,var(--taulell-2) 70%,transparent),
    0 0 36px color-mix(in srgb,var(--or-2) 18%,transparent),
    inset 0 2px 16px rgba(0,0,0,.45), var(--ombra-3);
}
.graella{inset:10px;gap:6px}
.fil{inset:10px}
.graella .peca{
  font-size:clamp(1.1rem,5.2vw,1.9rem);font-weight:800;
  background:linear-gradient(170deg,var(--peca-1) 0%,var(--peca-2) 100%);
  box-shadow:0 3px 0 var(--peca-vora), 0 6px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 6px rgba(160,130,70,.12);
}
.graella .peca:active{transform:translateY(1px)}
.peca.sel{
  color:var(--or-ink);
  background:linear-gradient(170deg,var(--or-3) 0%,var(--or-2) 50%,var(--or) 100%);
  box-shadow:0 3px 0 color-mix(in srgb,var(--or) 55%,#4a2e00),
             0 0 0 3px color-mix(in srgb,var(--or-2) 40%,transparent),
             0 0 26px color-mix(in srgb,var(--or-2) 55%,transparent);
  transform:scale(1.07) translateY(-1px);z-index:3;
}
.fil path{stroke:var(--or-2);opacity:.55;stroke-width:9;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--or-2) 70%,transparent))}
.fil .rastre{stroke:#fff;opacity:.7}
.peca.pista{
  color:#fff;background:linear-gradient(170deg,var(--blau-2),var(--blau));
  box-shadow:0 3px 0 color-mix(in srgb,var(--blau) 60%,#000),0 0 0 3px color-mix(in srgb,var(--blau-2) 40%,transparent),0 0 24px color-mix(in srgb,var(--blau-2) 60%,transparent);
}
.peca.encert{animation:encert .42s var(--molla)}
@keyframes encert{0%{transform:scale(1.07)}40%{transform:scale(.8) rotate(-4deg);opacity:.2}100%{transform:none;opacity:1}}
.taulell.febre{
  box-shadow:0 0 0 2px var(--roig-2),0 0 0 6px color-mix(in srgb,var(--roig) 30%,transparent),
             0 0 60px color-mix(in srgb,var(--roig) 55%,transparent), inset 0 2px 16px rgba(0,0,0,.45), var(--ombra-3);
}
@keyframes batec{50%{box-shadow:0 0 0 2px var(--roig-2),0 0 0 10px color-mix(in srgb,var(--roig) 22%,transparent),0 0 90px color-mix(in srgb,var(--roig) 60%,transparent),inset 0 2px 16px rgba(0,0,0,.45),var(--ombra-3)}}
.volant{font-size:1.25rem;font-weight:800;color:var(--verd-2);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.4)}
.volant.or{color:var(--or-2)}
.final{background:color-mix(in srgb,var(--taulell-2) 70%,transparent)}
.final b{color:#FFF6E0}

/* espurnes d'encert */
.espurna{position:absolute;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:6;
  background:var(--c,var(--or-2));animation:espurna .7s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes espurna{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(.2);opacity:0}}

/* bàner de nivell / febre */
.baner{
  position:absolute;left:50%;top:42%;z-index:9;pointer-events:none;transform:translate(-50%,-50%);
  font-weight:800;font-size:clamp(1.6rem,8vw,2.6rem);letter-spacing:.04em;white-space:nowrap;
  color:var(--or-2);-webkit-text-stroke:1.5px #3a2600;
  text-shadow:0 4px 0 #6b4700,0 10px 30px rgba(0,0,0,.55);animation:baner 1.25s var(--molla) forwards;
}
.baner.roig{color:var(--roig-2);-webkit-text-stroke-color:#4a0c04;text-shadow:0 4px 0 #7a1a0b,0 10px 30px rgba(0,0,0,.55)}
@keyframes baner{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{transform:translate(-50%,-50%) scale(1.12);opacity:1}
  70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-80%) scale(.96);opacity:0}}

/* peu */
.xip.nou{border-color:color-mix(in srgb,var(--or-2) 60%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--or-2) 20%,var(--panel)),var(--panel))}
.xip.nou .p{color:var(--or)}
.dock{background:color-mix(in srgb,var(--panel-sol) 88%,transparent)}
.dock-b.destacat{color:var(--or)}
.dock-b b{background:var(--or-2);color:var(--or-ink)}

/* fulls */
.fulla{background:linear-gradient(180deg,var(--panel-sol),color-mix(in srgb,var(--panel-sol) 92%,var(--fons-2)))}
.fulla h2{font-size:1.35rem}
.mode{background:var(--panel-2)}
.mode .k{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--or-2) 16%,transparent);color:var(--or)}
.mode:nth-child(2) .k{color:var(--blau-2);background:color-mix(in srgb,var(--blau-2) 16%,transparent)}
.mode:nth-child(3) .k,.mode:nth-child(5) .k{color:var(--verd);background:color-mix(in srgb,var(--verd-2) 16%,transparent)}
.mode:nth-child(4) .k{color:var(--roig);background:color-mix(in srgb,var(--roig-2) 16%,transparent)}
.mode::before{background:linear-gradient(180deg,var(--or-2),var(--or))}
.gran{background:linear-gradient(180deg,var(--or-3),var(--or));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:3.6rem}
.barra-prog i{background:linear-gradient(90deg,var(--or),var(--or-2))}
.tries button.act,.az button.act{background:linear-gradient(180deg,var(--or-3),var(--or));color:var(--or-ink)}
.calendari i.jugat{background:linear-gradient(180deg,var(--or-2),var(--or))}
.assoliment.fet{background:linear-gradient(90deg,color-mix(in srgb,var(--or-2) 14%,var(--panel-2)),var(--panel-2))}

/* diccionari v4.1 */
.full.dic .cap-full h2::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--or-2);margin-right:8px;vertical-align:middle;box-shadow:0 0 12px var(--or-2)}
.az{position:sticky;top:-10px;z-index:3;background:var(--panel-sol);padding:8px 0 6px;margin:8px 0 0}
.az button{height:30px}
.az button i{background:var(--or-2)}
.dic-titol b{font-size:2rem;background:linear-gradient(180deg,var(--or-3),var(--or));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.entrada{border-bottom:none;margin:3px 0;background:color-mix(in srgb,var(--panel-2) 55%,transparent);border:1px solid transparent}
.entrada:not(.pendent){border-color:var(--vora)}
.entrada:not(.pendent) .cap-e{color:var(--ink)}
.entrada:hover{border-color:color-mix(in srgb,var(--or-2) 50%,transparent)}
.entrada.pendent{opacity:.8}
.xips-filtre button.act{background:linear-gradient(180deg,var(--or-3),var(--or));color:var(--or-ink)}
.anell-pct{background:conic-gradient(var(--or-2) calc(var(--p) * 1%), color-mix(in srgb,var(--ink) 10%,transparent) 0)}
.mot-fitxa{background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 60%,var(--or)));-webkit-background-clip:text;background-clip:text;color:transparent}
.lectura{border-left:3px solid var(--or-2)}
.fitxa-full .lectura:nth-child(n){animation:entra .3s var(--molla) both}
.fitxa-full .lectura:nth-child(2){animation-delay:.05s} .fitxa-full .lectura:nth-child(3){animation-delay:.1s}
.sin{border-bottom:1px dotted color-mix(in srgb,var(--ink-3) 60%,transparent)}

@media (prefers-reduced-motion:reduce){ .espurna,.baner{display:none} body::before{display:none} }

/* =========================================================
   v4.2 — auditoria: correccions, vista compacta i adaptable
   ========================================================= */
/* L'atribut hidden ha de guanyar sempre (abans .rodo{display:grid} el
   desactivava i el botó «Instal·la» sortia fins i tot amb l'app instal·lada) */
[hidden]{display:none !important}

/* ---------- joc a pantalla exacta: res no desborda ---------- */
#arrel.wrap{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.joc{min-height:0}
.zona{flex:1 1 0;min-height:150px}
@supports (container-type: size){
  .zona{container-type:size}
  /* el taulell és el quadrat més gran que hi cap, sense xifres màgiques */
  .taulell{width:min(100cqw, 100cqh, 640px)}
  .graella .peca{font-size:clamp(.9rem, calc(min(100cqw, 100cqh, 640px) / var(--n, 6) * .42), 2.3rem)}
  .graella{gap:clamp(3px, calc(min(100cqw, 100cqh) / var(--n, 6) * .09), 8px)}
  .graella .peca{border-radius:clamp(7px, calc(min(100cqw, 100cqh) / var(--n, 6) * .2), 15px)}
}
.xip{cursor:pointer;font-family:inherit;color:inherit}
.xip:active{transform:scale(.95)}

/* ---------- pantalles petites i baixes ---------- */
@media (max-width:380px){
  .wrap{padding-left:10px;padding-right:10px}
  .botonera{gap:3px}
  .botonera .rodo{width:34px;height:34px;font-size:.92rem}
  .barra-sup .marca img{height:22px}
  .punts{padding:4px 11px 4px 12px}
  .punts b{font-size:1.1rem}
  .dock-b{width:52px;height:44px}
  .anella-temps,.anella-temps svg{width:38px;height:38px}
}
@media (max-height:680px){
  .barra-sup{padding-bottom:4px}
  .joc{gap:3px}
  .curs{height:30px;font-size:1.15rem}
  .tira{min-height:18px}
  .peu{gap:4px;padding-top:3px}
  .dock-b{height:42px}
  .dock-b span{display:none}
  .trobades{min-height:24px}
}

/* ---------- dues columnes: mòbil apaïsat i escriptori ---------- */
@media (orientation:landscape) and (max-height:600px), (min-width:900px) and (min-aspect-ratio:5/4){
  #arrel.wrap{
    max-width:1180px;display:grid;column-gap:clamp(12px,3vw,32px);row-gap:6px;
    grid-template-columns:minmax(0,1fr) clamp(250px,32vw,380px);
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"cap cap" "zona hud" "zona tira" "zona curs" "zona trob" "zona dock";
  }
  #arrel .joc,#arrel .peu{display:contents}
  #arrel .barra-sup{grid-area:cap}
  #arrel .hud{grid-area:hud;flex-wrap:wrap}
  #arrel .tira{grid-area:tira;justify-content:flex-start}
  #arrel .curs{grid-area:curs;justify-content:flex-start}
  #arrel .zona{grid-area:zona;min-height:0}
  #arrel .trobades{grid-area:trob;flex-wrap:wrap;align-content:flex-start;overflow-y:auto;overflow-x:hidden}
  #arrel .dock{grid-area:dock;align-self:end;justify-self:start}
}
@media (orientation:landscape) and (max-height:600px){
  .barra-sup .marca img{height:22px}
  .botonera .rodo{width:32px;height:32px}
  .curs{height:28px;font-size:1.05rem}
  .dock-b{height:40px}
  .dock-b span{display:none}
}

/* =========================================================
   Diccionari: vista única a pantalla completa
   ========================================================= */
.full.pantalla{align-items:stretch;padding:0;animation:fos .18s ease-out}
.full.pantalla .fulla{
  max-width:none;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;border:none;
  padding:0;overflow:hidden;animation:entra-dreta .26s var(--molla);
}
@keyframes entra-dreta{from{transform:translateX(24px);opacity:.3}}
.full.pantalla .nansa{display:none}
.vd{
  height:100%;display:flex;flex-direction:column;max-width:1180px;margin:0 auto;
  padding:max(8px,env(safe-area-inset-top)) 14px 0;
}
.vd-cap{display:flex;align-items:center;gap:10px;padding-bottom:4px}
.vd-titol{flex:1;min-width:0}
.vd-titol h2{font-size:1.25rem;line-height:1.1}
.vd-titol small{font-size:.72rem;color:var(--ink-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anell-pct.mini{width:44px;height:44px}
.anell-pct.mini::before{inset:5px}
.anell-pct.mini b{font-size:.62rem}
.vd .cerca-caixa{margin-top:6px}
.drecera{position:absolute;right:44px;font:700 .7rem/1 var(--fam);color:var(--ink-3);border:1px solid var(--vora-forta);border-radius:5px;padding:3px 6px}
.cerca-caixa .cerca:not(:placeholder-shown) ~ .drecera{display:none}
@media (pointer:coarse){ .drecera{display:none} }
kbd{font:700 .68rem/1 var(--fam);border:1px solid var(--vora-forta);border-bottom-width:2px;border-radius:5px;padding:2px 5px;margin:0 1px;color:var(--ink-2)}
.xips-filtre .sep{flex:0 0 1px;background:var(--vora-forta);margin:4px 3px}
.vd .xips-filtre{margin-top:7px}
.az-rail{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:8px -14px 0;padding:0 14px 6px;flex:0 0 auto}
.az-rail::-webkit-scrollbar{display:none}
.az-rail button{
  flex:0 0 auto;min-width:32px;height:32px;border-radius:9px;border:1px solid var(--vora);background:var(--panel-2);
  font-size:.8rem;font-weight:800;color:var(--ink-2);position:relative;overflow:hidden;
}
.az-rail button i{position:absolute;left:0;bottom:0;height:3px;background:var(--or-2)}
.az-rail button.act{background:linear-gradient(180deg,var(--or-3),var(--or));color:var(--or-ink);border-color:transparent}
.vd-cos{flex:1;min-height:0;position:relative;display:grid;grid-template-columns:1fr;overflow:hidden;border-top:1px solid var(--vora)}
.vd-llista{overflow-y:auto;overscroll-behavior:contain;padding:0 2px calc(16px + env(safe-area-inset-bottom))}
.vd-llista .dic-titol{position:sticky;top:0;z-index:2;background:var(--panel-sol);margin:0;padding:10px 4px 6px}
.vd-fitxa{
  overflow-y:auto;overscroll-behavior:contain;background:var(--panel-sol);
  padding:10px 4px calc(20px + env(safe-area-inset-bottom));
  position:absolute;inset:0;transform:translateX(104%);transition:transform .28s var(--molla);
}
.vd-cos.amb-fitxa .vd-fitxa{transform:none}
.vd-buit{display:grid;place-items:center;text-align:center;gap:6px;height:100%;color:var(--ink-3);padding:30px}
.vd-buit svg{width:42px;height:42px;opacity:.5}
.fx-cap{display:flex;align-items:center;gap:8px;min-height:40px}
.enrere{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--or);padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--or-2) 12%,transparent)}
.enrere svg{font-size:.85rem}
.vd-fitxa .mot-fitxa{margin:4px 0 6px}
.entrada{grid-template-columns:minmax(90px,38%) 1fr}
.entrada.act{border-color:var(--or-2) !important;background:color-mix(in srgb,var(--or-2) 12%,var(--panel-2))}
.entrada.sel{outline:2px solid var(--or-2);outline-offset:-2px}
.sin.link{color:var(--ink);text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--or-2) 70%,transparent);cursor:pointer}
.sin.link:hover{color:var(--or)}
.sin.pend{color:var(--ink-3);border-bottom:1px dashed var(--vora-forta)}
.lema .sin{margin:0}
.lema .sin::after{content:''}
.link-mot{color:var(--ink);font-weight:800;text-decoration:none;border-bottom:2px solid var(--or-2)}
@media (min-width:760px){
  .vd-cos{grid-template-columns:minmax(280px,1fr) minmax(0,1.25fr);gap:18px}
  .vd-fitxa{position:static;transform:none;transition:none;border-left:1px solid var(--vora);padding-left:18px}
  .tanca-mob{display:none}
}

/* =========================================================
   Perfil
   ========================================================= */
.full.perfil .fulla{max-width:620px}
.pf-rang{display:flex;align-items:center;gap:14px;margin-top:8px;padding:14px;border-radius:var(--r-m);
  background:linear-gradient(135deg,var(--taulell-1),var(--taulell-2));color:#FFF6E0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--or-2) 40%,transparent)}
.pf-insignia{width:52px;height:52px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;
  color:var(--or-ink);background:linear-gradient(180deg,var(--or-3),var(--or));box-shadow:0 3px 0 #6b4700,0 0 20px color-mix(in srgb,var(--or-2) 45%,transparent)}
.pf-rang-cos{flex:1;min-width:0}
.pf-rang-cos > b{font-size:1.2rem;font-weight:800}
.pf-rang-cos small{font-size:.72rem;color:#C9D6EC}
.pf-rang-cos small b{color:var(--or-2)}
.pf-rang .barra-prog{background:rgba(255,255,255,.14);margin:6px 0 5px}
.pf-xifres{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}
.pf-xifres .dada b{display:flex;align-items:center;gap:3px;font-size:1rem}
.pf-xifres .dada b svg{color:var(--roig-2);font-size:.9rem}
@media (max-width:460px){ .pf-xifres{grid-template-columns:repeat(2,1fr)} }
.pf-dic{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:12px;border-radius:var(--r-m);
  background:var(--panel-2);border:1px solid var(--vora);transition:border-color .15s}
.pf-dic:hover{border-color:var(--or-2)}
.pf-dic > svg{color:var(--ink-3)}
.pf-dic-cos{flex:1;min-width:0;font-size:.86rem;color:var(--ink-2)}
.pf-dic-cos > b{font-size:1.1rem;color:var(--ink)}
.pf-dic-cos small{display:block;font-size:.72rem;color:var(--ink-3)}
.pf-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:8px}
.pf-cat{position:relative;display:flex;flex-direction:column;font-size:.62rem;color:var(--ink-3);padding-top:6px}
.pf-cat i{position:absolute;top:0;left:0;height:3px;border-radius:2px;background:currentColor;min-width:3px}
.pf-cat em{font-style:normal}
.pf-cat b{font-size:.8rem;color:var(--ink)}
.pf-cat.c-n{color:var(--blau-2)} .pf-cat.c-v{color:var(--verd)} .pf-cat.c-a{color:var(--or)} .pf-cat.c-r{color:#9B63D6}
.pf-llarg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:88px;margin-top:10px;align-items:end}
.pf-llarg div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:.62rem;color:var(--ink-3)}
.pf-llarg i{width:100%;min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--or-2),var(--or));order:2}
.pf-llarg b{font-size:.62rem;color:var(--ink-2);order:1}
.pf-llarg span{order:3;font-weight:800;margin-top:2px}
.pf-millors{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pf-mot{text-align:left;padding:10px 12px;border-radius:var(--r-s);background:var(--panel-2);border:1px solid var(--vora);display:flex;flex-direction:column}
.pf-mot small{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700}
.pf-mot b{font-size:1rem;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.pf-mot span{font-size:.72rem;color:var(--or);font-weight:700}
.pf-recents{display:flex;flex-wrap:wrap;gap:5px}
.pf-cal{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;max-width:340px}
.pf-cal i{aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.pf-cal i.n1{background:color-mix(in srgb,var(--or-2) 40%,transparent)}
.pf-cal i.n2{background:color-mix(in srgb,var(--or-2) 70%,transparent)}
.pf-cal i.n3{background:var(--or)}
.pf-cal i.futur{opacity:.25}
.pf-recs{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pf-recs div{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-s);background:var(--panel-2);font-size:.8rem}
.pf-recs div.buit{opacity:.55}
.pf-recs .k{color:var(--or);font-size:.95rem}
.pf-recs b{margin-left:auto;font-variant-numeric:tabular-nums}
.pf-recs small{color:var(--ink-3)}
@media (max-width:420px){ .pf-recs{grid-template-columns:1fr} }
.pf-ass .assoliment{align-items:flex-start}
.cos-a{flex:1;min-width:0;display:flex;flex-direction:column}
.mini-barra{height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin-top:5px;overflow:hidden}
.mini-barra i{display:block;height:100%;background:var(--or-2)}
.cos-a .q{font-size:.64rem;margin-top:2px}
#pf-imp-l{cursor:pointer;justify-content:center}
.vd-fitxa{z-index:5}
.sin{border-bottom:none}
.sin.link{border-bottom:1.5px solid color-mix(in srgb,var(--or-2) 70%,transparent)}
.sin.pend{border-bottom:1px dashed var(--vora-forta)}

/* =========================================================
   v4.3 — revisió de paraules
   ========================================================= */
.revisa-bar{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:12;max-width:calc(100% - 20px);
  display:flex;align-items:center;gap:8px;padding:7px 7px 7px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--panel-sol) 94%,transparent);border:1px solid color-mix(in srgb,var(--or-2) 55%,transparent);
  box-shadow:var(--ombra-3);font-size:.78rem;font-weight:600;color:var(--ink);backdrop-filter:blur(8px);
}
.revisa-bar.entra{animation:baixa-bar .28s var(--molla)}
@keyframes baixa-bar{from{transform:translate(-50%,-14px);opacity:0}}
.revisa-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.revisa-bar .rb-si{flex:0 0 auto;background:linear-gradient(180deg,var(--or-3),var(--or));color:var(--or-ink);border-radius:999px;padding:6px 12px;font-weight:800;font-size:.74rem}
.revisa-bar .rb-no{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.rv-boto{position:relative}
.rv-boto b{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:999px;background:var(--or-2);color:var(--or-ink);font-size:.6rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
.rv-xifres{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
@media (max-width:420px){ .rv-xifres{grid-template-columns:repeat(2,1fr)} }
.rv-bloc{display:flex;gap:6px;align-items:center;color:var(--roig) !important;font-weight:700;margin-top:8px !important}
.rv-llista{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.rv-item{padding:10px 12px;border-radius:var(--r-s);background:var(--panel-2);border:1px solid var(--vora);border-left:3px solid var(--ink-3)}
.rv-item.valida{border-left-color:var(--verd-2)}
.rv-item.rebutjada{border-left-color:var(--roig-2);opacity:.85}
.rv-item.pendent{border-left-color:var(--or-2)}
.rv-mot{display:flex;align-items:center;gap:8px}
.rv-mot b{font-size:.98rem;letter-spacing:.03em}
.rv-item small{display:block;font-size:.72rem;color:var(--ink-3);margin-top:2px}
.rv-item small svg{display:inline;vertical-align:-2px;color:var(--or)}
.rv-acc{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.rv-acc a,.rv-acc button{font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--vora-forta);color:var(--ink-2);text-decoration:none;background:var(--panel-sol)}
.rv-acc [data-si]{border-color:color-mix(in srgb,var(--verd-2) 60%,transparent);color:var(--verd)}
.rv-acc [data-no]{border-color:color-mix(in srgb,var(--roig-2) 50%,transparent);color:var(--roig)}
.rv-com{margin-top:14px;font-size:.84rem;color:var(--ink-2)}
.rv-com summary{cursor:pointer;font-weight:800;color:var(--ink)}
.validada{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-2);padding:8px 12px;border-radius:var(--r-s);
  background:color-mix(in srgb,var(--or-2) 14%,var(--panel-2));border:1px solid color-mix(in srgb,var(--or-2) 45%,transparent)}
.validada svg{color:var(--or)}
.validada a{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--or);text-decoration:none}
.rara.val{color:var(--or-2) !important}

.revisa-bar span{white-space:normal;line-height:1.25}
.validada{flex-wrap:nowrap}
.validada span{flex:1;min-width:0}
.validada svg{flex:0 0 auto}

/* v4.4 — comprovació al moment */
.rb-carrega{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--or-2) 35%,transparent);border-top-color:var(--or);animation:gira .7s linear infinite;display:inline-block}
@keyframes gira{to{transform:rotate(1turn)}}
.revisa-bar .rb-si svg{display:inline;vertical-align:-2px;margin-right:3px}
.revisa-bar span svg{display:inline;vertical-align:-2px;color:var(--or)}
.xip.comprovant{border-style:dashed;color:var(--or)}
.xip.validada-x{border-color:var(--or-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--or-2) 30%,transparent)}
.xip.validada-x b{color:var(--or)}
.xip.rebutjada-x{opacity:.65}
.xip.rebutjada-x b{text-decoration:line-through}
.xip.rebutjada-x .p{color:var(--roig)}