/* === ACCENT PER OPERACIÓ === */
:root{
  --accent:#7a4b00; /* per defecte (suma) */
  --basic:#583a0b;
  --accent-suma:#1f5ae2;
  --accent-resta:#e59700;
  --accent-divisio:#3f9e3f;
  --accent-multiplicacio:#954d9a;
  --neutral:#7a4b00;
  --bgcolor:#efefe5;
  --font-ui:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-round:'Varela Round',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --headerIcon: clamp(50px, 9vw, 56px);
}
:root[data-op="add"]{ --accent:var(--accent-suma);}
:root[data-op="sub"]{ --accent:var(--accent-resta);}
:root[data-op="div"]{ --accent:var(--accent-divisio);}
:root[data-op="mul"]{ --accent:var(--accent-multiplicacio);}
#modalBadges .crit {
  font-size: 11px  !important;
  opacity: .5  !important;
  font-family: 'Poppins';
  font-weight: 500 !important;
}
/* === RESET GENERAL === */
*{ box-sizing:border-box; margin:0; padding:0;}
html,body{ height:100%; overflow:hidden;}
body{
  background:var(--bgcolor); color:#383838;
  font-family:var(--font-ui); font-weight:600;
  overscroll-behavior:none;
}


/* Evita que un tap ràpid es llegeixi com a zoom; manté scroll */
html, body { touch-action: manipulation; }

/* Botons/tecles específics del teu joc */
button, .key, #keypad, #ans {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

input,select,button,textarea{ font-family:inherit; font-weight:inherit; }

/* === LAYOUT PRINCIPAL === */
.app{
  position:fixed; inset:0; width:100%;
  height:calc(var(--vh,1svh)*100);
  display:grid; grid-template-rows:auto 1fr auto;
}
.hidden{ display:none !important; }

/* === HEADER === */
.header{
  position:relative; z-index:50; overflow:visible;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; gap:10px;
}
.header .cluster{ display:flex; align-items:center; gap:10px; }

/* icones header (⚙/📊) */
.home-icons{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:1; }
.header .gear,.header .stats{
  background:#fff; border-radius:50%;
  width:var(--headerIcon); height:var(--headerIcon);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--neutral-icon,#5a5148);
  font-size:clamp(22px,4vw,26px);
  border:none; cursor:pointer; transition:transform .15s, box-shadow .2s;
}
.header .gear:hover,.header .stats:hover{ transform:scale(1.05); }
.material-symbols-rounded{
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:clamp(22px,5vw,30px); line-height:1; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
}

/* — Badge operació + tancar — */
.op-badge,#opBadge{
  background:var(--accent) ; color:#fff !important; border:none !important;
  border-radius:999px; width:clamp(36px,10vw,48px); height:clamp(36px,10vw,48px);
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-round); font-weight:400;
  font-size:clamp(20px,5vw,28px);
}
.header .closeBtn{
  border:none; border-radius:50%; background:#fff !important; color:#d81b1b !important;
  width:var(--headerIcon); height:var(--headerIcon);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s, box-shadow .25s;
}
.header .closeBtn:hover{ transform:scale(1.08); }

/* === HOME: BOTÓ COMENÇAR === */
.start{
  background:#fff; color:var(--accent); border:none; outline:none; border-radius:90px;
  padding:26px 28px; font-size:clamp(10px,1.5em,35px); cursor:pointer;
  transition:transform .15s, opacity .25s; width:80%; margin-top:20px;
}
.start:hover{ transform:scale(1.03); }
.start:disabled{ opacity:.5; cursor:not-allowed; }
.start.active,.start{ background:var(--accent) !important; color:#fff !important; }
.start:disabled{ background:#fff !important; color:#6b6158 !important; }

/* === CONTINGUT CENTRAL === */
.main{
  display:flex; align-items:center; justify-content:center;
  padding:8px 12px;
  min-height:calc(100dvh - var(--header-h) - var(--footer-h,0px));
  padding-bottom:var(--footer-h,0px);
}
.center{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.intro-title{ font-weight:900; font-size:clamp(26px,5vw,42px); color:#6b4a13; margin:8px 0 16px; }

/* === EQUACIÓ === */
:root{ --opSizeMax:80px; --opSizeVW:8vw; --opSizeMin:34px; }
.eq{ display:flex; flex-direction:column; align-items:center; gap:24px;}
.eq-line{ display:flex; align-items:center; justify-content:center; gap:min(4vw,28px); white-space:nowrap;}
.num,.op,.eqsign{
  font-family:var(--font-round); font-weight:400; line-height:1;
  font-size:clamp(var(--opSizeMin),var(--opSizeVW),var(--opSizeMax)); color:var(--basic);
}
.op{ color:var(--accent) !important; }

/* === INPUT RESPOSTA === */
.answer{
  width:50%; padding:20px 24px; border:none; border-radius:120px; background:#fff; text-align:center;
  font-size:clamp(34px,8vw,80px); color:var(--basic); outline:none; caret-color:transparent;
  font-family:var(--font-round); font-weight:400;
}
.flash-ok{ box-shadow:0 0 0 4px rgb(22,185,82);}
.flash-bad{ box-shadow:0 0 0 4px rgb(224,13,13); }

/* === FOOTER I TECLAT === */
.footer{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:transparent; height:auto; padding:12px 16px 30px; box-sizing:border-box;
}


#modalBadges .badge-cat{ margin:14px 0; }
#modalBadges .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
#modalBadges .card-badge{ border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:10px; background:#fff; }
#modalBadges .card-badge h5{ margin:0 0 2px; font:600 14px system-ui; }
#modalBadges .bar{ height:6px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; margin-top:8px; }
#modalBadges .bar > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#6ea8fe,#59ffa8); }
#modalBadges .earned{ outline:2px solid #59ffa8; }
#modalBadges .earned h5::after{ content:" ✓"; color:#19a974; }
#modalBadges .badges-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16px 0 20px;
  gap:8px;
  text-align:center;
}
#modalBadges .badges-loading p{
  margin:0;
  font-size:14px;
  opacity:.8;
}
#modalBadges .badges-spinner{
  width:32px;
  height:32px;
  border-radius:999px;
  border:3px solid rgba(0,0,0,.12);
  border-top-color: var(--accent, #6ea8fe);
  animation: badges-spin .75s linear infinite;
}
@keyframes badges-spin{
  to{ transform:rotate(360deg); }
}

@supports(padding:max(0px)){ .footer{ padding-bottom:max(30px, env(safe-area-inset-bottom,0px)); } }
.footer.hidden{ display:none; }
.chipbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; max-width:1000px; margin:0 auto; }
.chip-left,.chip-right{ display:flex; align-items:center; gap:10px; }
.chip{ font-size:25px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.material-symbols-rounded.neutral{ font-size:22px; color:#555; }
.material-symbols-rounded.success{ font-size:22px; color:#2ab000; }
.material-symbols-rounded.error{ font-size:22px; color:#b42323; }
span#opText{ font-size:25px; color:var(--accent); }

/* Teclat */
.keypad{
  width:100%; max-width:1000px; margin:6px auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.key{ align-items:center; background:#e8f0ff; border-radius:10px; border:none; color:#123e83; cursor:pointer;
  display:inline-flex; justify-content:center; font-size:clamp(22px,6vw,38px); transition:background-color .25s, transform .1s; padding:10%;
  font-family:var(--font-round); font-weight:400;
}
@media(max-width:768px){ .key{ padding:18%; }}
.key:hover{ background:#dbe7ff; transform:scale(1.05); }
.playing .key{ background:var(--accent) !important; color:#fff !important; }
.playing .key:hover{ filter:brightness(1.05); transform:none; }
.playing .key:active{ filter:brightness(.95); transform:none; }
.playing .key.alt{ background:#fff !important; color:#b42323 !important; }

/* === PANTALLA FINAL & RECORD === */
.end-panel{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0px; padding:0px; text-align:center; }
.end-title {
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 500;
  color: var(--basic);
  margin-bottom: 18px;
}
.big-score{ display:flex; align-items:center; justify-content:center; gap:28px; }
.big-chip{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.06); font-weight:800; font-size:clamp(22px,6vw,36px);
}
.big-chip .material-symbols-rounded{ font-size:clamp(28px,7vw,40px); line-height:1; }
.big-chip.success{ color:#2ab000;} .big-chip.success .material-symbols-rounded{ color:#2ab000;}
.big-chip.error{ color:#b42323;} .big-chip.error .material-symbols-rounded{ color:#b42323;}
.record,.home-heading{ margin-top:6px; background:transparent; color:#7a4b00; border-radius:999px; padding:6px 12px; font-weight:800; }
.best-line{ margin-top:4px; color:#374151; font-weight:700; }
.hidden{ display:none !important; }
.confetti-canvas{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:9999; }
#recordBadgeIcon{ margin-top:30px; font-size:10em; }
.home-heading{ font-size:1.7em; margin-bottom:30px; }
#recordBadge{ font-size:3em; margin-bottom:30px; }
@media(max-width: 550px){

  #recordBadge {
    font-size: 2.2em;
    margin-bottom: 0px;
    margin-top: -70px;
}

.record img {
  width: 60%;
}
}

/* === CONFIG (pills i rangs) === */
.op-select .pill{
  border:none; border-radius:999px; background:#fff; color:var(--op-accent);
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(60px,15vw,120px); height:clamp(60px,15vw,120px);
  font-size:clamp(28px,8vw,75px); cursor:pointer; font-family:var(--font-round); font-weight:400;
  transition:background-color .25s, transform .1s;
}
.op-select [data-op="add"]{ --op-accent:var(--accent-suma); }
.op-select [data-op="sub"]{ --op-accent:var(--accent-resta); }
.op-select [data-op="div"]{ --op-accent:var(--accent-divisio); }
.op-select [data-op="mul"]{ --op-accent:var(--accent-multiplicacio); }
.op-select .pill.active{ background:var(--op-accent); color:#fff; }
.op-select .pill:hover{ transform:scale(1.05); }

input,select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:none; outline:none; background:#fff;
  font-size:18px; color:var(--neutral,#3b3b3b);
  padding:10px 20px; border-radius:9999px; width:100%;
  box-sizing:border-box; transition:background .2s, color .2s;
}
input:hover,select:hover{ background:#fafafa; }
input:focus,select:focus{ background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.05); }
select{
  background-image:linear-gradient(45deg,transparent 50%,#888 50%), linear-gradient(135deg,#888 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 15px) center;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px; cursor:pointer;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: min(4vw, 20px);
  font-weight: 600;
  padding: 4% 6%;
  border-radius: 9999px;
  cursor: pointer;
  border: none;
  transition: background .2s, color .2s, transform .1s;
  width: 100%;
}
.btn-primary{ background:var(--neutral,#3b3b3b); color:#fff; }
.btn-primary:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.btn-secondary{ background:#fff; color:var(--neutral,#3b3b3b); border:2px solid var(--neutral,#3b3b3b); }
.btn-secondary:hover{ background:rgba(0,0,0,.04); transform:translateY(-1px); }

/* anim logo */
@keyframes bounceInSoft{ 0%{transform:scale(.8);opacity:0} 60%{transform:scale(1.05);opacity:1} 80%{transform:scale(.97)} 100%{transform:scale(1)} }
#home_logo{ animation:bounceInSoft 1s cubic-bezier(.25,.8,.35,1); transform-origin:center; }

/* Rangs */
.op-range-title{ text-align:center; font-weight:900; font-size:clamp(18px,3.8vw,26px); color:var(--accent); margin:8px 0 10px; }
.range4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:center; }
.range4 input{ text-align:center; }
.op-range-cols{ display:grid; grid-template-columns:1fr 24px 1fr; gap:14px; align-items:start; width:100%; max-width:560px; margin:0 auto; }
.op-range-col{ display:grid; gap:6px; justify-items:center; }
.op-range-label{ font-weight:800; color:#4b453f; margin-bottom:8px; }
.op-range-hint{ font-size:12px; color:#8b847c; margin-top:8px; }
.op-range-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; width:100%; }
.op-sep{ display:inline-flex; align-items:center; justify-content:center; width:22px; color:#6b6158; font-weight:800; }
.op-range-divider{ width:1px; height:58px; background:rgba(0,0,0,.15); border-radius:1px; align-self:center; }
.op-range-row input{ text-align:center; }
@media(max-width:420px){
  .op-range-cols{ grid-template-columns:1fr; gap:12px; }
  .op-range-divider{ display:none; }
}

/* ==== Avís d'orientació ==== */
.orientation-guard{
  position:fixed; inset:0; background:rgba(239,239,229,.96);
  display:none; align-items:center; justify-content:center; text-align:center;
  z-index:99999; padding:24px; pointer-events:none;
}
.orientation-guard.show{ display:flex; pointer-events:auto; }
.orientation-guard .box{
  background:#fff; border-radius:20px; padding:22px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); max-width:520px;
}
.orientation-guard .icon{ font-size:52px; margin-bottom:8px; color:var(--neutral); }
.orientation-guard .title{ font-weight:900; font-size:20px; color:#2b2b2b; }
.orientation-guard .hint{ margin-top:6px; color:#6b6158; }

/* ====== Perfils d’usuari (badge a l’esquerra) ====== */
#headerRightHome{ display:flex; align-items:center; gap:10px; flex:1; }
#headerRightHome .user-wrap{ order:-1; margin-right:auto; } /* porta el badge a l'esquerra */

.user-wrap{ position:relative; display:flex; align-items:center; justify-content:flex-start; }
.userBtn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--headerIcon); height:var(--headerIcon);
  padding:0 12px; background:#fff; border:none;
  border-radius:9999px; cursor:pointer; color:#3f3a33; font:600 14px var(--font-ui);
}
.userBtn .uav{
  width:calc(var(--headerIcon) - 22px); height:calc(var(--headerIcon) - 22px);
  border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff inset;
}

/* —— MENÚ D’USUARIS ALINEAT A L’ESQUERRA —— */
.user-menu{
  position:absolute;
  left:12px;       /* enganxat a l’esquerra del header */
  top:62px;        /* sota el badge */
  z-index:1000;
  display:none;
  min-width:240px;
  background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.12); padding:10px 0;
}
.user-menu.show{ display:block; }
/* fletxeta a l’esquerra */
.user-menu::before{
  content:""; position:absolute; top:-8px; left:28px;
  width:16px; height:16px; background:#fff;
  border-left:1px solid rgba(0,0,0,.1); border-top:1px solid rgba(0,0,0,.1);
  transform:rotate(45deg);
}
.user-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 14px; border-radius:8px; cursor:pointer; transition:background .2s;
}
.user-item:hover{ background:#f8f8f4; }
.user-item .uav.sm{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.user-sep{ height:1px; background:rgba(0,0,0,.1); margin:6px 0; }
.user-add{ display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; }
.user-add:hover{ background:#f8f8f4; }

/* ====== MODALS ====== */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:#6b4a1333; z-index:99; padding:6%; backdrop-filter:blur(8px);
}
.modal.show{ display:flex; }
.modal .card{ background:#fff; border-radius:18px; padding:18px; width:min(440px,92%); box-shadow:0 12px 36px rgba(0,0,0,.14); }
.modal h3{ margin:0 0 10px; font-weight:800; }

/* Modal GRAN (usuari) */
.modal.big .card{
  width:90vw; height:80vh; max-width:640px; border-radius:26px; padding:5%;
  display:flex; flex-direction:column; box-sizing:border-box;
}
.modal.big h3 {
  text-align: center;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 500;
  margin: 0 0 50px;
  color: var(--basic);
  line-height: 1.3 !important;
}

/* Zona scroll */
.nu-scroll{ flex:1 1 auto; display:flex; flex-direction:column; gap:0; overflow:auto; -webkit-overflow-scrolling:touch; }

/* Avatar preview */
.nu-preview{ display:flex; flex-direction:column; align-items:center; margin:6px 0 8px; }
.nu-avatar{
  width:clamp(120px,28vw,200px); height:clamp(120px,28vw,200px);
  border-radius:999px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.12); border:6px solid #fff; margin-bottom:10%;
}

/* Labels + input */
.nu-label{ display:block; height:auto; min-height:0; padding:0; margin:0; line-height:1.2; font-weight:800; color:#4b453f; text-align:center; font-size:clamp(16px,3.6vw,20px); }
.nu-label + .nu-input{ margin-top:30px; margin-bottom:50px; }
.nu-input{ margin:0; }
.nu-input input{
  background:#ECEBDD; border:none; outline:none; font-family:var(--font-ui); font-weight:600; font-size:5vw; color:var(--neutral);
  padding:14px 18px; border-radius:9999px; width:100%; box-sizing:border-box; text-align:center; margin-bottom:10%;
}

/* Graella avatars */
.nu-input + .nu-label{ margin-top:28px; }
.nu-label + .nu-grid{ margin-top:30px; }
.nu-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; justify-items:center; width:100%; }
.nu-pick{
  width:100%; aspect-ratio:1/1; max-width:90px; border-radius:999px; overflow:hidden; cursor:pointer;
  background:#fff; border:2px solid rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s, border-color .2s, box-shadow .2s;
}

/* Avatars: mostra la imatge COMPLETA dins el cercle */
.nu-avatar img, .nu-pick img{
  width:100%; height:100%; object-fit:contain; border-radius:50%; background:#fff;
}

/* Botonera inferior modal */
.nu-actions{
  margin-top:auto; padding-top:14px; display:flex; gap:12px; justify-content:center;
  background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
}

/* Bloqueig UI amb modal */
.blocked [inert]{ pointer-events:none; user-select:none; }
.blocked .main{ filter:blur(1px) brightness(.95); }
.btn-danger {
  background: #fff;
  color: #b42323;
  border: 2px solid #b42323;
  padding: 20px !important;
  width: auto;
}
.btn-danger:hover{ background:rgba(180,35,35,.06); transform: translateY(-1px); }

/* ── Teclat: fons accent + text blanc ───────────────────────── */
.keypad .key {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
}
.keypad .key:hover { filter: brightness(1.06); }
.keypad .key:active { transform: translateY(1px); filter: brightness(0.95); }

/* Botó alternatiu (CLR) en blanc amb accent */
.keypad .key.alt {
  background: #fff !important;
  color: var(--accent) !important;
  border: 2px solid var(--accent) !important;
}
.keypad .key.alt:hover { background: rgba(0,0,0,0.04); }
/* Capçalera de la pàgina d’estadístiques */
.stats-header{
  position: sticky; top: 0; z-index: 30;
  background: #efefe5; /* mateix fons de l’app */
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding: 12px 16px 8px;
}

/* Títol gran i que no es talli */
.stats-title{
  font: 800 clamp(18px, 5vw, 34px) var(--font-ui);
  color:#2c2c2c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Botó rodó blanc (mateix estil que ⚙/📊) */
.stats-header .gear{
  background:#fff; border-radius:50%;
  width: clamp(40px, 9vw, 56px); height: clamp(40px, 9vw, 56px);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--neutral, #6b6158); border:none; cursor:pointer;
}
.stats-header .gear .material-symbols-rounded{ color:inherit; font-size: clamp(22px, 5vw, 28px); }
/* Contenidor principal d’estadístiques */
.stats-container{
  padding: clamp(12px, 3.5vw, 20px);
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

/* Targetes d’operació */
.stat-card{
  width: min(100%, 920px);
  margin: 0 auto 16px;
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: clamp(12px, 3.5vw, 18px);
}

/* Capçalera de la targeta */
.stat-card .card-head{
  display:flex; align-items:center; gap:12px; margin-bottom: 12px;
}
.stat-card .op-dot{
  width: 42px; height: 42px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font: 400 22px var(--font-round);
}

/* Missatge “encara no hi ha partides” que no es talli */
.stat-empty{
  background: #fff5db;
  border: 2px dashed #c08a11;
  border-radius: 14px;
  padding: 14px;
  font-weight: 800;
  color: #6b4a13;
  text-align:center;
}

/* Gràfic responsiu */
.stat-chart{
  width: 100%;
  height: clamp(160px, 40vw, 260px);
  margin-top: 10px;
}
.stat-chart canvas{
  width: 100% !important;
  height: 100% !important;
}


/* ===== PÀGINA D'ESTADÍSTIQUES ===== */
.stats-page .stats-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #efefe5;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.stats-page .stats-title{
  font-weight: 900; font-size: clamp(22px, 6vw, 30px);
}

:root{ --stats-header-h: 68px; } /* fallback */

.stats-page .stats-scroll{
  position: fixed;
  top: var(--stats-header-h); /* es recalcularà amb JS per ser exacte */
  left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
/* Pill d'operació petit per al resum */
.pill-op.sm{
  width: 18px;       /* ~meitat de 34px */
  height: 18px;
  font-size: 12px;   /* ~meitat de 18px */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


.countdown-overlay{
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background: var(--bgcolor);  /* e.g. rgba(0,0,0,.7) */
  opacity: 0; visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  pointer-events: none;
}
.countdown-overlay.is-active{
  opacity: 1; visibility: visible;
  transition: opacity 220ms ease;
  pointer-events: auto;
}


/* make sure text sits above the backdrop */
.countdown-overlay .countdown-text{
  position: relative;
  z-index: 1;
}


.countdown-text{
  font: 800 clamp(64px, 12vw, 220px)/1 var(--font-ui, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  color: var(--accent); letter-spacing: -0.02em; opacity: 0;
}

/* Animació zoom + fade */
@keyframes popZoom {
  0%   { transform: scale(.6); opacity: 1 }
  100%  { transform: scale(3); opacity: 0 }
}

@media (prefers-reduced-motion: reduce){
  body:not(.allow-motion) .countdown-text{
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Equation appears only when ready */
.eq-line { transition: opacity 20ms ease; }
.eq-stealth { opacity: 0; }

/* optional: prevent columns from collapsing while empty */
.eq-line .num, .eq-line .op { min-width: 0.8em; text-align: center; }
label {
  font-size: 0.8em;
  margin-bottom: 4px;
  opacity: 0.5;
}

/* Variables útils (tenen valor 0 en navegadors que no suporten env()) */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Contenidor principal (padding perquè res quedi sota el notch o la home bar) */
.app {
  padding-top: calc(var(--safe-top) + 12px);
  padding-right: calc(var(--safe-right) + 12px);
  padding-bottom: calc(var(--safe-bottom) + 12px);
  padding-left: calc(var(--safe-left) + 12px);
}

/* Utilitats si tens header/footer fixos */
.safe-top    { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }

/* Header/footers fixos amb alçada “real” */
.header-fixed {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(56px + var(--safe-top));
  padding-top: var(--safe-top);
}
.footer-fixed {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(64px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
}
.main-under-header {
  /* si tens header fix, deixa espai a sota */
  margin-top: calc(56px + var(--safe-top));
}

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --top-extra: 16px;           /* coixí base per a mòbil */
}

/* Quan la PWA està instal·lada en mode “app”, dona més aire */
.is-standalone {
  --top-extra: 20px;
}

/* iPad: encara més marge (pots ajustar valors) */
@media (min-width: 768px) {        /* iPad breakpoint simple */
  :root { --top-extra: 28px; }
}

.app, .page {
  /* usa clamp per garantir un mínim còmode i no passar-te */
  padding-top: clamp(24px, calc(var(--safe-top) + var(--top-extra)), 64px);
}

/* Si tens un header fix, dóna-li alçada real i padding */
.header-fixed {
  position: fixed; inset: 0 auto auto 0;
  height: calc(56px + var(--safe-top) + var(--top-extra));
  padding-top: calc(var(--safe-top) + var(--top-extra));
}
.main-under-header {
  margin-top: calc(56px + var(--safe-top) + var(--top-extra));
}
.end-hero {
  display:grid; place-items:center;
  margin-top: 5vh; text-align:center;
}
.end-hero-img {
  width: 120px; height: 120px; object-fit: contain;

  margin-bottom: 8px;
}
.end-hero-title {
  font-size: 2.5em; font-weight: 800; line-height: 1.1;
  margin-bottom: 4px;
}
.end-hero-sub {
  font-size: 14px; opacity: .9;
}

/* Centrat del modal a tota pantalla (igual que el d'usuari) */
#modalSchool.show { display:flex; align-items:center; justify-content:center; }


/* Els inputs i botons ja hereten l’estètica de .nu-input i .nu-actions del modal existent */
/* === SCHOOL MODAL — retocs visuals === */

/* targeta del modal (ja tens top/mid/bottom) */
#modalSchool .card{
  width:min(90vw, 800px);
  height:90vh;
  border-radius:22px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden;
}

/* franges */
/* franges */
#modalSchool .step{
  /* ANTES: display:flex;  -> esto hacía que todos los pasos estuvieran visibles */
  display: none;                 /* oculto por defecto */
  flex-direction: column;
  height: 100%;
}
#modalSchool .step.is-active{
  display: flex !important;      /* el paso activo sí se muestra */
}
#modalSchool .step-top    { flex:0 0 auto; padding:12px 16px 0; }
#modalSchool .step-mid    { flex:1 1 auto; padding:10px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
#modalSchool .step-bottom { flex:0 0 auto; padding:12px 16px 18px; }


/* logo: màx 20% VW (amb mínim perquè no quedi massa petit) */
.school-logo{ display:flex; justify-content:center; }
.school-logo img{ width:auto; max-width:min(20vw, 260px); min-width:120px; height:auto; }

/* icones grans (emoji o img) */
.school-emoji{ font-size:clamp(48px, 10vw, 84px); line-height:1; }

/* títol */
.school-title{ text-align:center; font-weight:900; font-size:20px; color:#2b2b2b; }

/* input “pill” */
.nu-input.school input{
  width:100%; max-width:280px;
  background:#eae2cc; border:none; height:56px; border-radius:26px;
  text-align:center; font-size:18px; font-weight:700; color:#3b2b1f;
}
.nu-input.school input::placeholder{ color:#7b6a57; opacity:.85; }

/* xip d'escola + botó canviar (top dels passos 2 i 3) */
.school-chipbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.school-chip{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  background:#fff; border-radius:16px; box-shadow:none;    font-size: 18px;
  font-weight:600; color:#3b2b1f;
}
.school-chip .icon{ font-size: 20px; display:grid; place-items:center; }
.school-chip .icon img{ width:100%; height:100%; object-fit:cover; }
.school-edit{ border:none; border-radius:16px; padding:6px 10px; background:#efe6d2; display:flex; align-items:center; gap:6px; }
.school-edit .material-symbols-rounded{ font-size:16px; color:#5b402b; }

/* BOTÓ CTA enganxat a baix — estil referència */
.btn-primary.school-cta{
  width:100%; border:none; border-radius:28px; padding:14px 18px;
  background:#6b3a10; color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.btn-primary.school-cta .cta-ico{
  position:absolute; right:8px; width:36px; height:36px;
  border-radius:50%; background:#fff; color:#6b3a10;
  display:grid; place-items:center; font-size:20px;
}
.btn-primary.school-cta:active{ transform:translateY(1px); }
.modal.big .modal-x,
#modalBadgeDetail .modal-x{
  position:absolute; top:4%; right:4%;
  width:36px; height:36px; border:0; border-radius:50%;
  background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12);
  font-size:18px; cursor:pointer;
}

/* Fons del modal: fade senzill */
.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .75s; /* visibilitat només es retarda en amagar */
}
.modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .75s ease;
}

/* Targeta: fade + slide-up */
.modal .card {
  opacity: 0;
  transform: translateY(12px);
  transition: transform .85s ease, opacity .85s ease;
}
.modal.show .card {
  opacity: 1;
  transform: translateY(0);
}

.modal{ display:flex !important; }
.modal.show{ display:flex !important; }

/* Make class-based step switching beat inline display="none" */
.step.is-active{ display:block !important; }
/* ---- PANS (no fem display per animar) ---- */
.step { display: none; }                 /* off per defecte */
.step.is-active { display: block; }      /* el pas actiu es mostra */

/* Estat inicial dels blocs dins del pas */
.step .step-top,
.step .step-mid,
.step .step-bottom {
  opacity: 0;
  transform: translateY(10px);
}
/* Quan el pas és actiu, l’estat base HA de ser visible */
.step.is-active .step-top,
.step.is-active .step-mid,
.step.is-active .step-bottom{
  opacity: 1;
  transform: none;
}


/* Quan activem el pas, fem una animació escalonada */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* .appear s’afegeix breument per disparar el stagger */
/* opcional */
.step.is-active.appear .step-top    { animation: fadeUp .96s ease both 0s; }
.step.is-active.appear .step-mid    { animation: fadeUp .96s ease both .30s; }
.step.is-active.appear .step-bottom { animation: fadeUp .96s ease both .60s; }


/* Respecte a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  /* Solo desactiva si NO hemos marcado 'allow-motion' en <body> */
  body:not(.allow-motion) .modal,
  body:not(.allow-motion) .modal .card {
    transition: none !important;
  }
  body:not(.allow-motion) .step .step-top,
  body:not(.allow-motion) .step .step-mid,
  body:not(.allow-motion) .step .step-bottom {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== SORTIDA (fade cap amunt i es va apagant) ===== */
@keyframes fadeDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* Quan un pas està sortint */
.step.leaving { pointer-events: none; } /* evita clics durant la transició */
.step.leaving .step-top    { animation: fadeDown .96s ease both 0s; }
.step.leaving .step-mid    { animation: fadeDown .96s ease both .30s; }
.step.leaving .step-bottom { animation: fadeDown .96s ease both .60s; }

/* Recordatori: l’estat base d’un pas actiu és visible */
.step.is-active .step-top,
.step.is-active .step-mid,
.step.is-active .step-bottom{
  opacity: 1;
  transform: none;
}


.user-switch-toast{
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%) translateY(-20px);
  background: #111827; color: #fff; border-radius: 16px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 9999;
}
.user-switch-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.user-switch-toast img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }

.user-switch-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.user-switch-modal.show {
  opacity: 1;
  pointer-events: all;
}

.user-switch-content {
  background: #fff;
  border-radius: 22px;
  padding: 28px 24px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transform: translateY(20px);
  transition: transform .4s ease;
  max-width: 300px;
  width: 80%;
  font-family: 'Poppins', system-ui, sans-serif;
}

.user-switch-modal.show .user-switch-content {
  transform: translateY(0);
}

.user-switch-content img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
  box-shadow: 0 0 0 4px #fff, 0 4px 16px rgba(0,0,0,0.2);
}

.user-switch-content #usmText {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

/* Overlay */
.usm{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
  align-items:center;justify-content:center;z-index:9999;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.usm.show{opacity:1;pointer-events:auto}

/* Card */
.usm-card{background:#fff;border-radius:28px;box-shadow:0 12px 36px rgba(0,0,0,.25);
       width:min(560px,92vw);padding:28px 22px 26px;text-align:center;
       transform:translateY(18px);transition:transform .35s ease}
.usm.show .usm-card{transform:translateY(0)}

/* Avatar grande */
.usm-ava{width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:18px;margin-top: 25px;
      box-shadow:0 0 0 6px #fff, 0 6px 22px rgba(0,0,0,.18)}

/* Textos */
.usm-title {
  font-size: 15px;
  color: #888;
  margin-bottom: 13px;
}
.usm-name {
  font-size: 38px;
  line-height: 1;
  font-weight: 600;
  color: #69351f;
  margin-bottom: 10px;
}
.usm-meta{display:grid;place-items:center;gap:6px;margin-top:4px}
.usm-icon{font-size:30px;opacity: 0;}
.usm-school{font-size:20px;font-weight:800;color:#69351f;margin-bottom: -5px;}
.usm-grade{font-size:16px;color:#888}
/* ====== USER EDIT MODAL (nou) ====== */
.uedit-card{ position:relative; padding:34px 22px 18px; }
.uedit-title{ text-align:center; font-size:clamp(22px,5vw,30px); font-weight:900; color:#593616; margin-bottom:16px; }
.uedit-center{ display:flex; flex-direction:column; align-items:center; gap:14px; }

.uedit-ava-wrap{ position:relative; }
.uedit-ava{
  width:clamp(120px,28vw,200px); height:clamp(120px,28vw,200px);
  border-radius:50%; object-fit:cover; border:6px solid #fff;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}
.uedit-ava-edit {
  position: absolute;
  right: 0%;
  bottom: 5%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: #fff;
  color: #593616;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
}
.uedit-name input{
  background:#ECEBDD; border:none; outline:none; font-family:var(--font-ui);
  font-weight:800; font-size:clamp(18px,5vw,28px); color:#5c3f1b;
  padding:16px 20px; border-radius:9999px; width:100%; text-align:center;
}

.uedit-meta{ text-align:center; margin-top:4px; }
.uedit-meta-title{ font-weight:900; font-size:clamp(18px,4.2vw,26px); color:#593616; }
.uedit-meta-sub{ font-weight:700; font-size:clamp(14px,3.5vw,18px); color:#9a8f83; }

.uedit-actions{ display:flex; gap:12px; justify-content:center; margin-top:18px; }

/* ====== AVATAR PICKER MODAL (nou) ====== */
.ap-card{ position:relative; padding:26px 18px 16px; display:flex; flex-direction:column; height:100%; }
.ap-top{ display:grid; place-items:center; margin-bottom:8px; }
.ap-ava{
  width:clamp(200px,26vw,180px); height:clamp(200px,26vw,180px);
  border-radius:50%; object-fit:cover; border:6px solid #fff;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  margin-top: 30px;
}
.ap-back {
  position: absolute;
  top: 4%;
  right: 4%;
}
.ap-back .icon-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; border:none; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.12); color:#5a3f28; }

.ap-scroll{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:5% !important }
.ap-tier{ margin:12px 4px 8px; }
.ap-tier-head{ display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:2px 10px 10px; }
.ap-tier-head h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0px;
  margin-top: 20px;
  color: #5a3f28;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ap-info{ font-size:18px; opacity:.7; }

.ap-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(76px, 90px);
  gap:12px; overflow-x:auto; padding:4px 10px 10px; -webkit-overflow-scrolling:touch;
}
.ap-item{
  width:100%; aspect-ratio:1/1; border-radius:999px; background:#fff; border:2px solid rgba(0,0,0,.12);
  display:grid; place-items:center; cursor:pointer; transition:transform .1s, border-color .2s, box-shadow .2s;
}
.ap-item img{ width:100%; height:100%; object-fit:contain; border-radius:50%; background:#fff; }
.ap-item:hover{ transform:translateY(-1px); }
.ap-item.active{ border-color: var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

.ap-item.locked{ opacity:.4; position:relative; }
.ap-item.locked::after{
  content:"\e14b"; /* material icons: info */
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24;
  position:absolute; bottom:2%; right:2%; background:#fff; color:#5a3f28;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.ap-actions{ display:flex; justify-content:center; padding-top:8px; }

/* Suavitza la targeta a l’entrar (hereta animacions del modal existent) */
#modalUserEdit .card, #modalAvatarPicker .card { opacity:0; transform:translateY(12px); transition:transform .6s ease, opacity .6s ease; }
#modalUserEdit.show .card, #modalAvatarPicker.show .card { opacity:1; transform:none; }
/* targeta modal en columna perquè el footer quedi a baix */

.modal-body { overflow:auto; padding-bottom:8px; }
.modal-footer { 
  margin-top:auto; 
  padding:14px 18px 18px; 
  display:flex; gap:12px; justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%);
  border-bottom-left-radius: inherit; 
  border-bottom-right-radius: inherit;
}

/* (estils existents del modal d’usuari) */
.uedit-card{ position:relative; padding:34px 22px 0; }
.uedit-title{ text-align:center; font-size:clamp(22px,5vw,30px); font-weight:900; color:#593616; margin-bottom:16px; }
.uedit-center{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.uedit-ava-wrap{ position:relative; }
.uedit-ava{ width:clamp(120px,28vw,200px); height:clamp(120px,28vw,200px); border-radius:50%; object-fit:cover; border:6px solid #fff; box-shadow:0 10px 26px rgba(0,0,0,.14); }
.uedit-name input{ background:#ECEBDD; border:none; outline:none; font-weight:800; font-size:clamp(18px,5vw,28px); color:#5c3f1b; padding:16px 20px; border-radius:9999px; width:min(680px,92vw); text-align:center; margin-top: 20px;}
.uedit-meta{ text-align:center; margin-top:4px; }
.uedit-meta-title {
  font-weight: 600;
  font-size: clamp(18px, 4.2vw, 26px);
  color: var(--neutral);
  margin-top: 30px;
}
.uedit-meta-sub{ font-weight:700; font-size:clamp(14px,3.5vw,18px); color:#9a8f83; }
/* Evitar scroll horitzontal en modals */
.modal .card,
.modal .modal-body {
  overflow-x: hidden;
}

/* Per si cal reforçar-ho només al modal d'usuari */
#modalUserEdit .card {
  overflow-x: hidden;
}

/* Evitar scroll lateral als modals */
.modal .card,
.modal .modal-body { overflow-x: hidden; }

/* El body del modal d'usuari només scrolla en Y */
#modalUserEdit .modal-body { overflow-y: auto; overflow-x: hidden; }

/* La targeta del modal (footer enganxat a baix) */
.modal.big .card { display:flex; flex-direction:column; max-height:min(92vh, 860px); }

/* Input de nom: no usar VW; adaptar-se a la targeta */
.uedit-name input {
  width: min(680px, 100%);   /* abans: 92vw → causava overflow */
  box-sizing: border-box;
}
/* ==== Avatar Picker: mides unificades + edge-to-edge ==== */
.ap-card{
  /* controls de mida/espais */
  --ap-pad: 18px;       /* padding lateral “visual” per a cada fila */
  --ap-gap: 5%;       /* espai entre avatars */
  --ap-size: 25%;      /* ⬅️ mida ÚNICA per Starter/Pro/Genius */
}

/* fa que el contingut arribi fins al cantó de la targeta */
.ap-card .ap-scroll{
  margin-inline: calc(-1 * var(--ap-pad));
  padding-inline: 0;
  overflow-y: auto;
}

/* files amb scroll horitzontal, sense el “tall” abans del límit */
.ap-row{
  display: flex;                 /* anul·la el grid anterior */
  gap: var(--ap-gap);
  overflow-x: auto;
  padding: 0 var(--ap-pad) 10px; /* padding només per dins de la fila */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* cada avatar: mida fixa per a tots els tiers */
.ap-item{
  flex: 0 0 var(--ap-size);
  width: var(--ap-size);
  height: var(--ap-size);
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .1s, border-color .2s, box-shadow .2s;
  scroll-snap-align: center;
}

.ap-item img{
  width:100%; height:100%;
  object-fit: cover;
  border-radius: 50%;
  background:#fff;
}

/* (opcional) degradat suau als extrems quan hi ha més contingut */
.ap-row:has(.ap-item){
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
}

/* Toast canvi d'usuari: avatar + check overlay */
.usm-ava-wrap{
  position: relative;
  display: inline-block;
}

.usm-ava-check{
  position: absolute;
  right: -10%;
  bottom: 16%;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #10B981;  /* verd tipus "success" */
  color: #fff;
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 0 0px #fff;      /* anell blanc com al modal d’edició */
  font-size: 24px;       /* mida de la icona material */
  pointer-events: none;  /* no és botó */
}


.user-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  cursor:pointer;
}

.user-item.is-current .uname {
  font-weight: 700;
}

.user-sep {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 6px 0;
}


button.icon-btn {
  background: var(--neutral);
  border-radius: 99px;
  padding: 4px;
  border-style: none;
}

/* ==== USER MENU v2 ==== */
.user-menu { position: fixed; z-index: 50; display:none; }
.user-menu.show { display:block; }
.user-menu .menu-card{
  width: 420px; max-width: calc(100vw - 32px);
  background:#fff; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.18);
  overflow:hidden; border:1px solid rgba(0,0,0,.06);
}

/* triangle apuntant al botó (opcional) */
.user-menu .menu-caret{
  width: 24px; height: 12px; margin-left: 24px;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background:#fff; border-left:1px solid rgba(0,0,0,.06); border-top:1px solid rgba(0,0,0,.06);
  transform: translateY(6px) rotate(45deg);
}

/* capçalera amb avatar i nom */
.menu-hero{ padding:28px 28px 18px; text-align:center; }
.menu-hero .ava{
  width:140px; height:140px; border-radius:50%;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  display:block; margin:0 auto 14px; object-fit:cover;
}
.menu-hero .uname{
  font-weight:900; font-size:26px; letter-spacing:.2px; color:#3b280a;
  display:inline-flex; align-items:center; gap:6px;
}
.menu-hero .tier{
  display:inline-flex; margin-top:10px; padding:8px 14px; border-radius:22px;
  border:1px solid #8b5e1a33; background:#f4efe2;
  font-weight:700; color:#7a4b09; font-size:14px;
}

/* accions */
.menu-actions{
  display:flex; gap:12px; justify-content:center; padding:14px 20px 18px;
}
.menu-actions .act{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#fff7; border:1px solid rgba(0,0,0,.06);
  padding:14px 18px; border-radius:18px; cursor:pointer;
  transition:transform .08s ease, box-shadow .12s;
}
.menu-actions .act:active{ transform:scale(.98); }
.menu-actions .act .ico{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:#6b4000; color:#fff; box-shadow:0 6px 14px rgba(107,64,0,.3);
}
.menu-actions .act span{ font-size:13px; color:#3b280a; font-weight:700; }

/* separadors + llista */
.menu-sep{ height:1px; background:rgba(0,0,0,.06); margin:4px 0; }
.menu-title{ padding:14px 22px 8px; font-weight:800; color:#6a5332; font-size:14px; }

.menu-row{
  display:flex; align-items:center; gap:14px; padding:14px 22px;
  cursor:pointer;
}
.menu-row:hover{ background:#faf7ef; }
.menu-row .ava-sm{
  width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.menu-row .label{ font-weight:800; color:#2f210a; font-size:18px; }
.menu-row.add{ font-weight:800; }
.menu-row.add .icon{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:#f1efe8; color:#2f210a; border:1px solid rgba(0,0,0,.06);
}


.user-menu{position:absolute; inset:auto auto; display:none; z-index:50;}
.user-menu.show{display:block;}
.um-card{width:min(92vw,420px); background:#fff; border-radius:20px;  padding:18px;}
.um-current{display:grid; place-items:center; text-align:center; padding:6px 0 14px;}
.um-ava{width:140px; height:140px; border-radius:50%; box-shadow:0 12px 30px rgba(0,0,0,.18);}
.um-name{font-size:24px; font-weight:800; margin:10px 0 6px; color:#4b2e0f;}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#f6f2ea; font-weight:700;}
.um-actions{display:flex; gap:14px; margin-top:14px;}
.um-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; background:#f4ebe0; border:1px solid rgba(0,0,0,.08); font-weight:700;}
.um-btn .material-symbols-rounded{font-size:20px;}
.um-switch-title{font-weight:800; color:#6b4a20; margin:8px 0 12px;}
.um-list{display:flex; flex-direction:column; gap:0;}
.user-sep{height:1px; background:rgba(0,0,0,.08); margin:14px 0;}
.um-row{display:flex; align-items:center; justify-content:space-between; padding:12px 6px; border-radius:12px; cursor:pointer;}
.um-row:hover{background:#faf7f2;}
.um-row .left{display:flex; align-items:center; gap:10px;}
.um-row .uav{width:40px; height:40px; border-radius:50%;}
.um-row .uname{font-weight:800;}
.um-row.is-current .uname{color:#8b5a2b;}
.user-add{display:flex; align-items:center; gap:10px; font-weight:800; padding:10px 6px; cursor:pointer;}
.user-add .material-symbols-rounded{font-size:22px;}
/* Col·locació del menú d’idioma (reutilitza estil del user-menu) */
#btnLang { display:inline-flex; align-items:center; gap:4px; }
#langMenu { position:fixed; z-index:9999; display:none; }
#langMenu.show { display:block; }
#langMenu .um-row.active .uname { font-weight:700; }
/* Botó idioma estil pastilla */
.lang-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 15px 10px 10px;
  background:#fff; color:#5a5149; border:none;
  border-radius:999px;  /* arrodonit però no cercle perfecte */
  font-weight:700; line-height:1; cursor:pointer;
}
.lang-btn:active { transform:translateY(1px); }
.lang-btn:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }

.lang-ico{
  font-size:22px;
  width:28px; height:28px;
  display:inline-grid; place-items:center;
  border-radius:999px; /* cercle suau per a la icona */
}

/* Menú d'idioma: reutilitza user-menu, només posicionament */
#langMenu{ position:fixed; z-index:9999; display:none; }
#langMenu.show{ display:block; }
#langMenu .um-row.active .uname{ font-weight:700; }
/* ===== Language popover ===== */
.lang-pop {
  position: fixed;
  top: 0; left: 0;
  width: auto;           /* <- clau: que s’ajusti al contingut */
  min-width: 0;
  max-width: min(90vw, 280px);
  white-space: nowrap;   /* no fer salt de línia */
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  padding: 14px 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  z-index: 60;
}
.lang-pop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.lang-pop .item {
  font-weight: 700;
  padding: 8px 0;
  cursor: pointer;
}
.lang-pop .item:hover { opacity:.85; }

.lang-pop .pop-arrow {
  position: absolute;
  top: -8px;
  width: 16px; height: 16px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: -2px -2px 8px rgba(0,0,0,.06);
}

#modalBadges .badge-cat h4 {
  margin: 0 0 8px;
  opacity: 1;
  background-color: var(--bgcolor);
  border-radius: 90px;
  font-size: 12px !important;
  padding: 5px 15px 5px 15px;
  font-weight: 500 !important;
  color: var(--basic);
  margin-bottom: 12px;
  margin-top: 30px;
}


/* Layout de targetes d’insígnies */
#modalBadges .grid{
  display: grid  !important;
  grid-template-columns: 1fr  !important;   /* mòbil: 1 columna */
  gap: 10px  !important;
}

/* A partir d’una amplada mitjana → 2 columnes (i mai més de 2) */
@media (min-width: 640px){
  #modalBadges .grid{
    grid-template-columns: 1fr 1fr  !important;
  }
}


/* Targeta d’insígnia */
#modalBadges .card-badge{
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 6px;
}

/* Imatge principal de la insígnia */
#modalBadges .card-badge .badge-img{
  width: 100%;
  height: auto;
  display: block;
}

/* Estat no assolit → B/N + candau */
#modalBadges .card-badge.locked .badge-img{
  filter: grayscale(100%) saturate(0) contrast(0.9) opacity(.92);
}
#modalBadges .card-badge.locked::after{
  content:"lock";
  font-family:"Material Symbols Rounded";
  position:absolute; right:8px; top:8px;
  font-size:20px; line-height:1;
  background:#fff; border-radius:999px; padding:2px 4px;
  opacity: 0.2; 
  display: none;
}

/* Estat assolit → color, sense candau */
#modalBadges .card-badge:not(.locked) .badge-img{ filter:none; }
#modalBadges .card-badge:not(.locked)::after{ content:none; }
/* === Badges: imatge a l'esquerra 25% === */
#modalBadges .card-badge{
  display:flex !important;
  align-items:self-start;
  gap:12px;
  padding: 10px 20px 20px 10px;
}

#modalBadges .badge-thumb{
  flex:0 0 25% !important;   /* ocupa el 25% del card */
  max-width:25% !important;
  height:auto;
  aspect-ratio:1 / 1;        /* quadrada; s'adapta */
  object-fit:contain;
  border-radius:10px;
}

#modalBadges .badge-meta{ flex:1 1 0; align-self:center; }

/* bloquejada: opacitat + candau */
#modalBadges .card-badge.locked .badge-thumb{     opacity: .3;
  filter: saturate(0); }
#modalBadges .lock-ico{
  position:absolute; right:8px; top:8px;
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  font-family:"Material Symbols Rounded"; font-size:16px; color:#c0c0c0;
}
#modalBadges .card-badge.earned .lock-ico{ display:none; }

/* Pantalles molt estretes: no deixis que l'img es mengi tot */
@media (max-width:420px){
  #modalBadges .badge-thumb{
    flex-basis:72px; max-width:72px; /* límit mínim raonable */
  }
}

#modalBadges .card{ position:relative; }
#modalBadges .modal-x{
  position:absolute; right:16px; top:16px;
  z-index:10; pointer-events:auto;
}
#modalBadges{ pointer-events:auto; }


.end-badge-stage{
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1/1;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
}
.end-badge-stage .stage-bg{
  position: absolute;
  inset: 0;
  background: url('/img/badges/background.webp') center/contain no-repeat;
}
/* Mida de la imatge del badge: 40% amb màxim de 230px */
#endBadgeImg{
  width: 20%;
  height: 20%;
  max-width: 230px;
  max-height: 230px;
  object-fit: contain;
  z-index: 1;
}

div#end {
  width: 100%;
  max-width: 800px;
  height: 85vh !important;
  position: absolute;
  top: 15vh;
  background: var(--bgcolor);

}

.end-badge-stage {
  position: relative;
  width: 75%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
}

.end-hero-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 4px;
  background-color: white;
  padding: 10px 32px 10px 32px;
  border-radius: 90px;
  color: var(--neutral);
}

.end-hero-desc {
  font-size: 14px;
  opacity: 0.5;
  margin-top: 5px;
}

.end-hero-sub{
    opacity: 1;
    font-size: clamp(25px, 3.5vw, 4vw);
    color: var(--basic);
    font-weight: 500;
    margin-top: 3px;
}

/* --- FINAL DE PARTIDA (layout original + millores de mides) --- */

/* Targeta final: mantenim layout clàssic i reservem espai pel botó fix */
#endNoticeCard{
  position: relative;
  min-height: 10vh;
  padding: 0px;
  /* assegura que el card quedi sobre el confetti */
  z-index: 200;
}

/* Títol i stats, marges compactes */
#endNoticeTitle{ margin: 12px 0 6px; }
#endStats{ margin: 8px 0 6px; }

/* Subtítol (Nou rècord / Ràfega / Títol insígnia) sempre visible */
#endNoticeSub{
  margin: 8px 0 10px;
  line-height: 1.25;
  word-break: break-word;
}

/* Imatge simple (rècord/ràfega): gran però sempre cap dins */
#endNoticeImg{
  display: block;
  margin: 8px auto 10px;
  width: auto;
  height: auto;
  max-width: 80%;
  max-height:80%; /* 48vh per no empènyer el text ni el botó */
  object-fit: contain;
}

/* Stage d'insígnies amb fons */
.end-badge-stage{
  position: relative;
  width: 100%;
  max-width: 520px;
  /* l'alçada s’autolimita perquè no desplaci subtítol/botó */
  height: min(52vh, 72vmin, 520px);
  aspect-ratio: 1 / 1;
  margin: 6px auto 8px;
  display: grid;
  place-items: center;
  margin-top: -7vh;
  margin-bottom: -7vh;
}
.end-badge-stage .stage-bg{
  position: absolute; inset: 0;
  background: url('/img/badges/background.webp') center/contain no-repeat;
  animation: badgeStageSpin 15s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes badgeStageSpin{
  to { transform: rotate(360deg); }
}



/* Badge a 40% amb màx 230px (fix) */
#endBadgeImg {
  width: 60% !important;
  height: 60% !important;
  max-width: 400px !important;
  max-height: 400px !important;
  object-fit: contain;
  z-index: 1;
}

/* Botó fix a 10% del bottom; el padding-bottom del card evita solapaments */
#endNext{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5vh;
  width: min(84vw, 640px);
  max-width: 640px;
  z-index: 220; /* sobre confetti i contingut */
}

/* Confetti sempre al fons i sense capturar clics */
canvas[id*="confetti"], .confetti-canvas{
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 100 !important;
}

.end-title {
  display: none;
}

/* Pantalles baixes: compacta lleugerament espais i alçada de visuals */
@media (max-width: 500px){
  #endNoticeCard{ padding-bottom: calc(12vh + env(safe-area-inset-bottom,0px)); }
  #endNoticeImg{
    display: block;
    margin: 8px auto 10px;
    width: auto;
    height: auto;
    max-width: 70%;
    max-height:70%; /* 48vh per no empènyer el text ni el botó */
    object-fit: contain;
  }

  .home-heading {
    font-size: 1.4em  !important;
    margin-bottom: 19px  !important;
}
  span#opText {
    font-size: 17px !important;
   
}
  .op-badge, #opBadge {

    width: 30px !important;
    height: 30px  !important;

}
  .nu-input.school input {
    padding: 12px 5px !important; 
  }
  .btn-danger {

    padding: 10px !important;

  }
  .school-chip{
     font-size: 12px;

  }
  .header {  padding:0px !important;}
  .end-badge-stage{   margin-top: -2vh;
    margin-bottom: -2vh;}
  #endNoticeSub{ margin: 6px 0 8px; }
  /* Badge a 40% amb màx 230px (fix) */
#endBadgeImg {
  width: 60% !important;
  height: 60% !important;
  max-width: 400px !important;
  max-height: 400px !important;
  object-fit: contain;
  z-index: 1;
}
#endNext {
  position: fixed;
  left: 50%;
  transform: translateX(-72%);
  bottom: 5vh;
  width: min(84vw, 640px);
  max-width: 640px;
  z-index: 220;
  scale: 0.7;
}

.modal.big .card{
 padding:8%;

}
}

/* Animació suau opcional del badge */
@keyframes popIn{ 0%{transform:scale(.85);opacity:0} 60%{transform:scale(1.06);opacity:1} 100%{transform:scale(1)} }
#endBadgeImg.pop,
#endNoticeImg.pop{
  animation: popIn 3s ease-out;
}


/* targeta final (records / badges) */
#end { will-change: opacity, transform; }
#end.hidden { display: none; }

/* POP in */
.pop-in {
  animation: mm-pop-in 3s cubic-bezier(.2,.9,.2,1);
}

.pop {
  animation: mm-pop-in 3s cubic-bezier(.2,.9,.2,1);
}

@keyframes mm-pop-in {
  0%   { transform: scale(.84); opacity: 0; }
  60%  { transform: scale(2); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Fade out al tancar o passar a la següent */
.fade-out {
  animation: mm-fade-out 3s ease forwards;
}
@keyframes mm-fade-out {
  to { opacity: 0; transform: scale(.98) translateY(100px); }
}

/* Imatge del badge: mida estable per evitar ‘flash’ de la imatge anterior */
#endImg {
  width: clamp(120px, 28vw, 240px);
  height: clamp(120px, 28vw, 240px);
  object-fit: contain;
  display: block;
}

/* opcional: petit “pop” a cada canvi de ítem del carrusel */
#endNoticeImg.pop, #endBadgeStage.pop { animation: endPopIn 320ms cubic-bezier(.2,.8,.2,1) both; }

@keyframes mm-pop-in {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(2); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Classe genèrica d’animació */
.pop-in {
  animation: mm-pop-in .38s cubic-bezier(.2,.85,.2,1) both;
}

/* Ens assegurem que els contenidors estan per sobre i visibles */
#end { position: relative; z-index: 20; }


/* Transicions entre ítems del carrusel de final */
#endNoticeCard {
  will-change: opacity, transform;
  transition: opacity .5s ease, transform .5s ease;
  opacity: 1;
  transform: translateY(0) scale(1);
}
#endNoticeCard.is-leaving {
  opacity: 0;
  transform: translateY(20px) scale(.7);
}
#endNoticeCard.is-entering {
  opacity: 0;
  transform: translateX(20px) scale(.7);
}
#endNoticeCard.is-entering.is-entered {
  opacity: 1;
  transform: translateY(0) scale(1);
}





/* --- End-card slide-fade --- */
.end-hero { will-change: transform, opacity; }

/* estat base: visible */
.end-hero.is-visible { opacity: 1; transform: translateX(0); }

/* sortida → dreta */
.end-hero.is-leaving {
  opacity: 0;
  transform: translateY(20px) scale(.7);
}

/* entrada inicial (pre) → ve de l'esquerra i transparent */
.end-hero.is-entering {
  opacity: 0;
  transform: translateX(20px) scale(.7);
}

/* entrada activa */
.end-hero.is-entered {
  opacity: 1;
  transform: translateX(0);
}


#endNoticeCard.hidden {
  opacity: 0 !important;
  transform: scale(0.96) translateY(8px);
}

#endNoticeCard {
  opacity: 0;
}

#endNoticeCard.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

    /* --- Modal insígnies del dia --- */
    #modalDailyBadges .daily-badges-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
      gap:10px;
    }
    #modalDailyBadges .daily-card{
      
      display: block;
      border-radius:14px;
      background:#fff;
      align-items: center !important;
      box-shadow: 0 12px 36px #2b2b2b1f !important;
      border: none !important;
      padding: 20px;
      gap: 20px !important;
      text-align: center;
    }
    #modalDailyBadges .daily-card img.badge-thumb{
      width:15vw;
      height:15vw;
      flex:0 0 52px;
      border-radius:50%;
      object-fit:contain;
      
    }
    #modalDailyBadges .daily-main{
      flex:1;
      min-width:0;
    }
    #modalDailyBadges .daily-main h5{
      margin:0 0 4px;
      font:600 14px system-ui;
      text-align: center;
    }
    #modalDailyBadges .daily-main .crit{
      margin:0 0 6px;
      font:13px/1.35 system-ui;
      opacity:.85;
    }
    #modalDailyBadges .daily-main .remain{
      font:12px/1.4 system-ui;
      opacity:.8;
    }
    #modalDailyBadges .bar{
      height:6px;
      border-radius:999px;
      background:rgba(0,0,0,.08);
      overflow:hidden;
      margin-top: 7px;
      margin-bottom: 7px;
    }
    #modalDailyBadges .bar > i{
      display:block;
      height:100%;
      width:0%;
      background:linear-gradient(90deg,#6ea8fe,#59ffa8);
    }
/* Ajustar la il·lustració només al modal d'insígnies del dia */
#modalDailyBadges .card{
  /* redueix la mida de la bossa */
  background-size: 32%;         /* prova 28–35 fins que t'agradi */
  background-position: 100% 100%;
  height: auto !important;         /* deixa espai perquè no tapi el contingut */
}
p#dailyBadgesSubtitle  {
  max-width: 100%;
  text-align: center;
  padding-bottom: 16px;
  padding-top: 3px;
}

div#modalDailyBadges .card h3 {
  max-width: 100% !important;
  padding-left: 5%;
  padding-right: 5%;
}
/* En pantalles petites, encara més petita */
@media (max-width: 600px){
  div#modalDailyBadges .card h3 {
    max-width: 100% !important;
    padding-left: 0%;
    padding-right: 0%;
}
  #modalDailyBadges .card{
    background-size: 40%;
    padding: 4vh !important;
    align-items: center !important;
  }
  #modalDailyBadges .daily-card{
    display:flex;
    align-items: center !important;
    box-shadow: 0 12px 36px #2b2b2b1f !important;
    border: none !important;
    padding: 20px;
    gap: 20px !important;
    text-align: left;
  }
  #modalDailyBadges .daily-card img.badge-thumb{
    width:17vw;
    height:17vw;
    flex:0 0 52px;
    border-radius:50%;
    object-fit:contain;
    
  }
  #modalDailyBadges .daily-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
}
#modalDailyBadges .daily-main h5{
  margin:0 0 4px;
  font:600 14px system-ui;
  text-align: left;
}

}

#headerLeft .gear {
  margin-left: 8px;
}

/* Amagar barra de scroll als selectors d’avatar, però mantenir el swipe */
.ap-row,
.nu-grid,
#avatarPickGrid {
  /* Ja tens l’overflow definit a la CSS principal, 
     aquí només ens encarreguem de la barra */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge antic */
}

.ap-row::-webkit-scrollbar,
.nu-grid::-webkit-scrollbar,
#avatarPickGrid::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, etc. */
}

/* Modal detall insígnia */
#modalBadgeDetail .badge-detail-card {
  width: auto;
  height: auto;
  position: relative;
  text-align: center;
  padding: 32px 20px 20px; /* espai per al botó de tancar */
}

/* Botó de tancar com la resta, però assegurem posició */
#modalBadgeDetail .modal-x {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Escenari amb fons rotatori + mida responsive */
#modalBadgeDetail .badge-detail-stage {
  width: auto;
  height: auto;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Assegurem que la capa de fons ocupa tot el cercle */
#modalBadgeDetail .badge-detail-stage .stage-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* aquí aprofites l’estil/animació que ja tinguis per .stage-bg */
}

/* Imatge del badge gran i proporcional */
#modalBadgeDetail .badge-detail-img
 {
    position: relative;
    width: 80%;
    height: 80%;
    /* max-width: 260px; */
    /* max-height: 260px; */
    object-fit: contain;
    display: block;
    margin: 0 auto;
    z-index: 1;
}

/* Textos */
#modalBadgeDetail .badge-detail-title {
  margin: 4px 0 0px;
  font-size: clamp(15px, 4vw, 29px);
  color: var(--basic);
  font-weight: 400;
}
#modalBadgeDetail .badge-detail-desc {
  margin-bottom:30px;
  font-size: 14px;
  opacity: .85;
}

.school-code-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.school-code-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.school-code-char {
  width: 42px;
  height: 48px;
  text-align: center;
  font-size: 24px;
  border-radius: 8px;
  border: 2px solid var(--neutral-300, #ddd);
  text-transform: uppercase;
}

.school-code-char:focus {
  outline: none;
  border-color: var(--accent, #f6a600);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #f6a600) 30%, transparent);
}

.helpmsg.ok {
  color: #0a7a28;
}

.helpmsg.error {
  color: #b00020;
}

/* Estil comú per a tots els botons desactivats */
.btn[disabled],
.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Si fas servir variants com .btn-primary, assegurem-nos que també s'aplica */
.btn.btn-primary[disabled],
.btn.btn-primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn[disabled],
.btn:disabled {
  opacity: 0.3 !important;
}
#modalBadges .badge-progress-count{
  margin-top:4px;
  font:600 11px system-ui;
  color:rgba(0,0,0,.6);
}

.badge-extra {
  margin-top: 4px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  opacity: 0.75;
}





.badge-extra span {
  white-space: nowrap;
}
/* Desktop / tablets grans: pots deixar-ho com vulguis,
   només ens preocupa que en mòbil siguin rodons */



   #modalBadges .bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
    overflow: hidden;
    margin-top: 6px;
  }
  
  #modalBadges .bar > i{
    display:block;
    height:100%;
    width:0%;
    background: linear-gradient(90deg,#6ea8fe,#59ffa8);
  }
  
  /* Encerts = primera barra */
  #modalBadges .bar-hits > i{
    background: linear-gradient(90deg,#6ea8fe,#59ffa8);
  }
  
  /* Precisió = segona barra (lleugerament diferent) */
  #modalBadges .bar-prec > i{
    background: linear-gradient(90deg, #ffb353, #ffe100);
  }
  
  .badge-meta .bar-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: -2px;
  }
  
  .badge-meta .bar-label-title {
    opacity: 0.7;
  }
  
  .badge-meta .bar-label-value {
    font-weight: 500;
    opacity: 0.7;
  }

   /* Mode mòbil: que els 4 botons siguin cercles */
@media (max-width: 500px) {
  #introOps {
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 10px;
  }

  #introOps .pill {
    flex: 0 0 auto;          /* NO s’estira per omplir */
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 999px;    /* rodó */
    padding: 0;              /* que no deformi la forma */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;         /* mida del símbol +, -, ×, ÷ */
  }
}

/* Si en mòbils molt petits veus que queden massa grans,
   pots baixar una mica la mida aquí: */
@media (max-width: 400px) {
  #introOps .pill {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    font-size: 28px;
  }
}


.accuracy-row{
  margin-top: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.accuracy-icon{
  font-weight: 700;
}

/* Verd quan està aconseguit */
.accuracy-row.acc-ok .accuracy-icon{
  color: #2e7d32;
}

/* Vermell quan NO està aconseguit */
.accuracy-row.acc-ko .accuracy-icon{
  color: #e53935;
}


span.accuracy-text {
  font-size: 10px;
}