/* ===========================================================
   Manel Summer Lobato Edition — estilos
   Estètica: manga/anime shōnen (One Piece + My Hero Academia)
   Juvenil, no infantil. Panells de còmic, speedlines, bounty.
   =========================================================== */

:root{
  --nit:#0e1530; --nit2:#141d3d;
  --hero:#27d07a;      /* verd Deku */
  --energia:#ffd23f;   /* groc/or */
  --foc:#ff4757;       /* vermell One Piece */
  --mar:#28b6d6;
  --paper:#fdf6e3;     /* paper bounty */
  --text:#0e1530; --blanc:#fff;
  --radi:16px; --vora:3px solid #0e1530;
  --ombra:6px 6px 0 #0e1530;
  --fimpact:'Bangers',system-ui,sans-serif;
  --fbody:'Baloo 2',system-ui,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--fbody);color:var(--blanc);
  background:
    radial-gradient(circle at 18% 12%, rgba(39,208,122,.18), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(255,71,87,.18), transparent 42%),
    var(--nit);
  background-attachment:fixed;
  /* halftone manga */
  position:relative;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px);
  background-size:14px 14px;
}
.speedlines{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.10;
  background:repeating-conic-gradient(from 0deg at 50% 0%, #fff 0deg 1deg, transparent 1deg 7deg);
  mask-image:radial-gradient(circle at 50% 35%, transparent 30%, #000 75%);
}
#app{position:relative;z-index:1}

/* ---------- vistes ---------- */
.vista{display:none;padding:clamp(16px,4vw,40px);max-width:1000px;margin:0 auto}
.vista.activa{display:block;animation:entra .45s cubic-bezier(.2,.9,.25,1)}
@keyframes entra{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- tipografia impacte ---------- */
h1,h2,h3{font-family:var(--fimpact);letter-spacing:.5px;line-height:1.05;margin:.2em 0}
h1{font-size:clamp(2.4rem,7vw,4rem);
  text-shadow:3px 3px 0 var(--foc),6px 6px 0 #0e1530}
h2{font-size:clamp(1.8rem,5vw,2.6rem);text-shadow:2px 2px 0 #0e1530}
.subtit{font-weight:700;opacity:.92;margin:.2em 0 1.2em;font-size:1.1rem}

/* ---------- botons còmic ---------- */
.btn{
  font-family:var(--fimpact);font-size:1.35rem;letter-spacing:.6px;
  border:var(--vora);border-radius:14px;padding:12px 26px;cursor:pointer;
  background:var(--energia);color:#0e1530;box-shadow:var(--ombra);
  transition:transform .08s, box-shadow .08s; text-transform:uppercase;
}
.btn:hover{transform:translate(-1px,-1px)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 #0e1530}
.btn.foc{background:var(--foc);color:#fff}
.btn.hero{background:var(--hero);color:#06251a}
.btn.big{font-size:1.7rem;padding:18px 34px;width:100%}

/* ---------- targetes / panells manga ---------- */
.panell{
  background:var(--blanc);color:var(--text);border:var(--vora);border-radius:var(--radi);
  box-shadow:var(--ombra);padding:18px 20px;margin:16px 0;position:relative;
}
.panell h3{color:#0e1530}

/* ---------- LOGIN ---------- */
#login .hero-box{max-width:460px;margin:6vh auto 0;text-align:center}
.badge-arc{display:inline-block;font-family:var(--fimpact);font-size:1rem;letter-spacing:1px;
  background:var(--foc);color:#fff;border:var(--vora);border-radius:30px;padding:4px 16px;
  transform:rotate(-3deg);box-shadow:3px 3px 0 #0e1530;margin-bottom:10px}
#login form{display:grid;gap:12px;margin-top:18px}
#login input{font-family:var(--fbody);font-weight:700;font-size:1.05rem;padding:14px 16px;
  border:var(--vora);border-radius:12px;background:#fff;color:#0e1530}
#login input:focus{outline:4px solid var(--energia)}
.err{color:#fff;background:var(--foc);border:var(--vora);border-radius:10px;padding:8px;font-weight:700}
.mascota{font-size:3.2rem;display:block;animation:flota 2.4s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-10px) rotate(-4deg)}}

/* ---------- INICI ---------- */
.hud{display:grid;gap:14px;grid-template-columns:1fr;margin-top:8px}
.hud-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.nivell{font-family:var(--fimpact);font-size:1.5rem;background:var(--hero);color:#06251a;
  border:var(--vora);border-radius:12px;padding:6px 14px;box-shadow:3px 3px 0 #0e1530}
.ratxa{font-family:var(--fimpact);font-size:1.4rem;background:var(--foc);color:#fff;
  border:var(--vora);border-radius:12px;padding:6px 14px;box-shadow:3px 3px 0 #0e1530}
.barra{background:#0a1024;border:var(--vora);border-radius:30px;height:30px;overflow:hidden;position:relative}
.barra > i{display:block;height:100%;background:linear-gradient(90deg,var(--hero),var(--energia));
  width:0;transition:width .8s cubic-bezier(.2,.9,.25,1)}
.barra span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:#fff;
  text-shadow:1px 1px 0 #0e1530;font-size:.95rem}
.medalles{display:flex;flex-wrap:wrap;gap:10px}
.bounty{width:88px;background:var(--paper);color:#3a2a14;border:var(--vora);border-radius:8px;
  text-align:center;padding:8px 4px;box-shadow:3px 3px 0 #0e1530;transform:rotate(-2deg);font-family:var(--fbody)}
.bounty b{display:block;font-family:var(--fimpact);font-size:.8rem;letter-spacing:.5px;color:#7a1414}
.bounty .em{font-size:1.8rem;display:block}
.bounty.lock{filter:grayscale(1);opacity:.45;transform:none}

/* ---------- DIA ---------- */
.dia-head{text-align:center;margin-bottom:6px}
.bloc{background:var(--blanc);color:var(--text);border:var(--vora);border-radius:var(--radi);
  box-shadow:var(--ombra);padding:18px 20px;margin:18px 0;animation:entra .5s both}
.bloc:nth-child(2){animation-delay:.05s}.bloc:nth-child(3){animation-delay:.1s}
.bloc h3{display:flex;align-items:baseline;gap:8px}
.bloc h3 small{margin-left:auto;font-family:var(--fbody);font-weight:700;background:#0e1530;color:#fff;
  border-radius:20px;padding:2px 10px;font-size:.8rem}
.bloc-digital{border-left:10px solid var(--mar)}
.bloc-repas{border-left:10px solid var(--hero)}
.bloc-repte{border-left:10px solid var(--foc)}
.bloc-projecte{border-left:10px solid var(--energia)}
.expl{line-height:1.55;margin:.4em 0}
.expl p{margin:.5em 0}
.exercici{background:#f4f7ff;border:2px dashed #0e1530;border-radius:12px;padding:10px 12px;margin:10px 0}
.exercici label{font-weight:700;display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.resposta{width:100%;margin:8px 0 2px;border:2px solid #1ea7c5;border-radius:10px;padding:8px 10px;
  font-family:var(--fbody);font-weight:600;font-size:1rem;resize:vertical;background:#fffef9}
.resposta:focus{outline:3px solid var(--energia);border-color:#0e1530}
.resposta[readonly]{background:#eef1f7;border-color:#aeb6cc;color:#555}
details{margin-top:8px}
summary{cursor:pointer;font-weight:800;color:#0e6b3f;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] summary{color:#0e1530}
details > div{background:#eafff3;border:2px solid var(--hero);border-radius:10px;padding:8px 10px;margin-top:6px}
.recurs{display:inline-flex;gap:6px;align-items:center;text-decoration:none;font-weight:800;
  background:#0e1530;color:#fff;border-radius:30px;padding:8px 14px;margin:6px 6px 0 0}
.recurs:hover{background:var(--foc)}
.passos{margin:.4em 0 .4em 1.1em}.passos li{margin:.3em 0}

/* tancar dia */
.tanca{background:var(--nit2);border:var(--vora);border-radius:var(--radi);padding:18px;margin-top:22px;
  box-shadow:var(--ombra)}
.tanca h3{color:#fff;text-shadow:2px 2px 0 #0e1530}
.valora{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.valora .grp{background:#0a1024;border:2px solid #2a3870;border-radius:12px;padding:8px 10px}
.valora .grp p{margin:0 0 6px;font-weight:800}
.pill{border:2px solid #0e1530;border-radius:20px;padding:6px 12px;font-weight:800;cursor:pointer;
  background:#fff;color:#0e1530;margin-right:6px}
.pill.on.facil{background:var(--hero);color:#fff}
.pill.on.regular{background:var(--energia)}
.pill.on.dificil{background:var(--foc);color:#fff}
.tanca textarea{width:100%;min-height:80px;border:var(--vora);border-radius:12px;padding:10px;
  font-family:var(--fbody);font-weight:600;font-size:1rem;margin:8px 0}

/* ---------- MAPA / SETMANA ---------- */
.mapa{display:grid;gap:16px}
.setmana-fila{background:var(--blanc);color:var(--text);border:var(--vora);border-radius:var(--radi);
  box-shadow:var(--ombra);padding:14px 16px}
.setmana-fila h3{color:#0e1530;margin-bottom:8px}
.illes{display:flex;flex-wrap:wrap;gap:10px}
.illa{width:64px;height:64px;border:var(--vora);border-radius:14px;display:grid;place-items:center;
  font-weight:800;cursor:pointer;background:#eef3ff;color:#0e1530;box-shadow:3px 3px 0 #0e1530;position:relative}
.illa.fet{background:var(--hero);color:#fff}
.illa.fet::after{content:"✓";position:absolute;top:-8px;right:-8px;background:#fff;border:2px solid #0e1530;
  border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:.8rem}
.illa.avui{background:var(--energia);animation:batec 1.1s infinite}
.illa.lock{background:#cdd3e6;color:#7b84a6;cursor:not-allowed;opacity:.7}
.illa small{font-size:.65rem;display:block}
@keyframes batec{50%{transform:scale(1.08)}}

/* ---------- PARES ---------- */
.pares-card{background:var(--blanc);color:var(--text);border:var(--vora);border-radius:var(--radi);
  box-shadow:var(--ombra);padding:18px;margin:14px 0}
.pares-card h3{color:#0e1530}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.kpi{background:#0e1530;color:#fff;border-radius:14px;padding:12px;text-align:center}
.kpi b{display:block;font-family:var(--fimpact);font-size:2rem;color:var(--energia)}
.ajuda li{margin:.5em 0;line-height:1.5}
.diari-e{background:#f4f7ff;border-left:6px solid var(--mar);border-radius:8px;padding:8px 12px;margin:8px 0}

/* ---------- topbar comú ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.topbar .titol{font-family:var(--fimpact);font-size:1.4rem}
.lnk{background:none;border:none;color:#fff;font-weight:800;cursor:pointer;text-decoration:underline}

/* ---------- ajuda / solució ---------- */
.ajuda-d summary{color:#b5790a}
.ajuda-d > div{background:#fff8e1;border:2px solid var(--energia);border-radius:10px;padding:8px 10px;margin-top:6px}
.sol-d summary{color:#0e6b3f}

/* ---------- accents per matèria ---------- */
.mat-angles{border-left-color:#7b5cff}
.mat-medi{border-left-color:#2ecc71}
.mat-religio{border-left-color:#e67e22}
.mat-mates{border-left-color:#ff6b6b}
.mat-catala{border-left-color:#1ea7c5}
.mat-castella{border-left-color:#ffb300}

/* ---------- overlay èpic de fi de dia + meme ---------- */
.overlay-final{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;
  background:rgba(8,12,30,.82);backdrop-filter:blur(3px);animation:ofIn .3s ease}
@keyframes ofIn{from{opacity:0}to{opacity:1}}
.of-card{max-width:480px;width:100%;text-align:center;background:linear-gradient(160deg,#141d3d,#0e1530);
  border:var(--vora);border-radius:24px;box-shadow:0 0 0 6px var(--energia),12px 12px 0 #0e1530;
  padding:24px 20px;animation:ofPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes ofPop{from{transform:scale(.5) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.of-title{font-family:var(--fimpact);font-size:clamp(2.2rem,8vw,3rem);color:var(--energia);
  text-shadow:3px 3px 0 var(--foc);animation:ofShake .5s 2}
@keyframes ofShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-2deg)}75%{transform:translateX(6px) rotate(2deg)}}
.of-sub{font-weight:800;margin-bottom:10px;color:#fff}
.of-medalles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.of-med{background:var(--paper);color:#7a1414;border:var(--vora);border-radius:10px;padding:6px 10px;
  font-size:1.5rem;display:flex;flex-direction:column;align-items:center;animation:ofPop .6s both}
.of-med b{font-family:var(--fbody);font-size:.7rem;color:#7a1414}
.meme{margin:14px 0;border:3px dashed var(--energia);border-radius:16px;padding:14px 10px;background:#0a1024;
  animation:memeFlash 1.1s infinite}
@keyframes memeFlash{0%,100%{box-shadow:0 0 0 rgba(255,210,63,0)}50%{box-shadow:0 0 24px rgba(255,210,63,.75)}}
.meme-top{font-family:var(--fimpact);font-size:1.25rem;color:#fff;letter-spacing:.5px}
.meme-mid{font-weight:700;margin:6px 0;color:#fff}
.meme-big{font-family:var(--fimpact);font-size:clamp(1.6rem,6vw,2.2rem);color:var(--foc);
  text-shadow:2px 2px 0 #fff;animation:memeZoom .8s infinite alternate}
.meme-big span{color:var(--energia)}
@keyframes memeZoom{from{transform:scale(1)}to{transform:scale(1.12) rotate(-1deg)}}
.meme-bottom{font-weight:900;color:var(--energia);margin-top:6px;font-size:1.05rem;animation:ofShake .55s infinite}
.overlay-final .btn{margin-top:16px}

/* ---------- Superpapi (assistent IA) ---------- */
#sp-fab{position:fixed;right:16px;bottom:16px;z-index:150;border:var(--vora);border-radius:40px;
  background:linear-gradient(135deg,#0e1530,#1b2a4a);color:#fff;font-family:var(--fimpact);
  font-size:1.1rem;letter-spacing:.5px;padding:10px 18px 10px 12px;cursor:pointer;box-shadow:5px 5px 0 #0e1530;
  display:flex;align-items:center;gap:8px;animation:fabPulse 1.8s infinite}
#sp-fab span{font-size:1rem}
#sp-fab .sp-bot{width:32px;height:32px}
.sp-id{display:flex;align-items:center;gap:8px}
.sp-id .sp-bot{width:32px;height:32px}
.sp-id b{font-family:var(--fimpact);font-size:1.4rem;letter-spacing:.5px}
/* Robot de CLAU animat */
.sp-bot{flex:none;animation:spBotLive 6.4s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(0,168,150,.35))}
.sp-bot .sp-eye{animation:spBotBlink 4s ease-in-out infinite}
.sp-bot .sp-eye.r{animation-delay:.2s}
.sp-bot .sp-pupils{animation:spBotLook 7.5s ease-in-out infinite}
.sp-bot .sp-tip{transform-origin:18px 4px;animation:spBotTip 2.6s ease-in-out infinite}
.sp-bot .sp-mouth{transform-origin:18px 27px;animation:spBotSmile 6.4s ease-in-out infinite}
@keyframes spBotLive{0%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-3px)}44%{transform:translateY(0)}58%{transform:translateY(-2px) rotate(-6deg)}70%{transform:translateY(-2px) rotate(5deg)}82%{transform:translateY(0)}}
@keyframes spBotBlink{0%,92%,100%{transform:scaleY(1)}94%,98%{transform:scaleY(.06)}}
@keyframes spBotLook{0%,36%,100%{transform:translateX(0)}42%,54%{transform:translateX(2.2px)}62%,74%{transform:translateX(-2.2px)}82%{transform:translateX(0)}}
@keyframes spBotTip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
@keyframes spBotSmile{0%,84%,100%{transform:scaleX(1)}91%{transform:scaleX(1.16)}}
@keyframes fabPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px) scale(1.04)}}
#sp-fab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #0e1530}
#sp-overlay{position:fixed;inset:0;z-index:210;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,12,30,.6);backdrop-filter:blur(2px);padding:0}
.sp-card{width:100%;max-width:520px;height:min(82vh,640px);display:flex;flex-direction:column;
  background:linear-gradient(160deg,#141d3d,#0e1530);border:var(--vora);border-radius:22px 22px 0 0;
  box-shadow:0 0 0 5px var(--energia);animation:ofPop .35s ease;overflow:hidden}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  font-family:var(--fimpact);font-size:1.4rem;color:#fff;background:linear-gradient(135deg,var(--foc),#7b5cff)}
.sp-head button{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:10px;
  font-size:1rem;padding:4px 8px;cursor:pointer;margin-left:6px}
#sp-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.sp-msg{max-width:85%;padding:10px 13px;border-radius:14px;font-weight:600;line-height:1.4;
  animation:entra .25s ease;white-space:pre-wrap}
.sp-assistant{align-self:flex-start;background:#fff;color:#0e1530;border-bottom-left-radius:4px}
.sp-user{align-self:flex-end;background:var(--hero);color:#06251a;border-bottom-right-radius:4px}
.sp-bar{display:flex;gap:8px;padding:10px;background:#0a1024;align-items:center}
.sp-bar input{flex:1;border:var(--vora);border-radius:30px;padding:12px 14px;font-family:var(--fbody);
  font-weight:600;font-size:1rem;background:#fff;color:#0e1530}
.sp-bar button{border:var(--vora);border-radius:50%;width:46px;height:46px;font-size:1.2rem;cursor:pointer;
  background:var(--energia);color:#0e1530;flex:none}
#sp-send{background:var(--hero);color:#fff}
#sp-mic.on{background:var(--foc);color:#fff;animation:fabPulse .7s infinite}
@media (prefers-reduced-motion:reduce){ #sp-fab,#sp-mic.on,.sp-bot,.sp-bot *{animation:none!important} }

#confeti-canvas{position:fixed;inset:0;pointer-events:none;z-index:99}

@media (prefers-reduced-motion:reduce){
  .vista.activa,.bloc,.mascota,.illa.avui,
  .of-card,.of-title,.meme,.meme-big,.meme-bottom{animation:none!important}
  *{transition:none!important}
}
@media(max-width:560px){
  h1{text-shadow:2px 2px 0 var(--foc),4px 4px 0 #0e1530}
  .btn{font-size:1.15rem}
  .illa{width:56px;height:56px}
}