:root{
 --bg:#080b10;--bg2:#0d1118;--panel:#111720;--panel2:#171f2a;
 --text:#eee7d8;--muted:#a99f90;--gold:#c6a258;--gold2:#ead08a;
 --purple:#8054d6;--blue:#4e80ce;--red:#ba4848;--green:#4c8c68;
 --border:rgba(198,162,88,.35);--line:rgba(255,255,255,.075);
 --radius:14px;--shadow:0 18px 45px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;background:var(--bg) url("../assets/ui/backgrounds/dark-stone.svg") center/512px repeat;color:var(--text);font:15px/1.45 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,.fantasy{font-family:Georgia,"Times New Roman",serif;letter-spacing:.035em}
h1,h2,h3{margin-top:0}
.hidden{display:none!important}
.muted{color:var(--muted)}
.eyebrow{color:var(--gold2);letter-spacing:.14em;font-weight:800;font-size:.74rem}
.panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 28%),var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel:after{content:"";position:absolute;inset:4px;border:1px solid rgba(234,208,138,.08);border-radius:calc(var(--radius) - 4px);pointer-events:none}
.pad{padding:20px}
.btn{border:1px solid #4a5360;border-radius:10px;min-height:40px;padding:.58rem .9rem;font-weight:800;cursor:pointer;background:#1b2330}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.primary{color:#21180a;background:linear-gradient(#e5cd81,#ab8337);border-color:#765b2d}
.btn.secondary{background:linear-gradient(#273241,#171e29)}
.btn.danger{background:linear-gradient(#a74444,#702727);border-color:#702727}
.btn.small{min-height:32px;padding:.35rem .65rem;font-size:.8rem}
.icon{width:22px;height:22px;display:inline-block}
.icon-lg{width:30px;height:30px}
.badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.24rem .55rem;border:1px solid var(--border);background:rgba(198,162,88,.08);color:var(--gold2);font-size:.76rem;font-weight:800}
.rarity{display:inline-flex;border-radius:999px;padding:.2rem .5rem;font-size:.72rem;font-weight:800;border:1px solid rgba(255,255,255,.12)}
.rarity.comuna{background:#343a42}.rarity.rara{background:#1f5b9d}.rarity.èpica,.rarity.epica{background:#6a329f}.rarity.llegendària,.rarity.llegendaria{background:#aa651d}.rarity.especial{background:#883337}
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:16px;background:rgba(7,10,14,.94);border-right:1px solid var(--border);overflow:auto}
.brand{width:220px;margin:0 auto 18px;display:block}
.nav{display:grid;gap:4px}
.nav-group{margin:14px 10px 5px;color:#776f63;font-size:.67rem;font-weight:900;letter-spacing:.14em}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.68rem .75rem;border-radius:10px;color:var(--muted)}
.nav a:hover,.nav a.active{color:var(--text);background:rgba(198,162,88,.095);box-shadow:inset 3px 0 var(--gold)}
.nav a img{width:21px;height:21px}
.main{padding:22px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.topbar h1{margin:2px 0 0;font-size:1.7rem}
.top-actions{display:flex;gap:8px}
.icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--border);background:#111720;display:grid;place-items:center;cursor:pointer;position:relative}
.icon-btn img{width:21px}
.dot{position:absolute;width:8px;height:8px;background:#db5252;border-radius:50%;right:6px;top:6px;box-shadow:0 0 9px #db5252}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title h2{margin:0;font-size:1.22rem}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{padding:13px;background:#0c1118;border:1px solid var(--line);border-radius:11px}
.stat .label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.stat .value{font-size:1.12rem;font-weight:900;margin-top:4px}
.bar{height:10px;border-radius:999px;background:#06080b;border:1px solid var(--line);overflow:hidden;margin-top:8px}.bar span{display:block;height:100%;border-radius:inherit}.bar.hp span{background:linear-gradient(90deg,#842727,#d55252)}.bar.xp span{background:linear-gradient(90deg,#4f318e,#9262e0)}.bar.gold span{background:linear-gradient(90deg,#90621d,#dfb452)}
.profile-hero{display:grid;grid-template-columns:160px 1fr 120px;gap:22px;align-items:center}.avatar{width:150px;aspect-ratio:1;object-fit:cover;border-radius:17px;border:4px solid #80652e;box-shadow:0 12px 30px rgba(0,0,0,.45)}.level-img{width:110px;aspect-ratio:1;object-fit:cover;border-radius:14px}.character-name{font-size:2rem;margin-bottom:2px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.game-card{background:#0c1118;border:1px solid var(--line);border-radius:12px;padding:11px;min-width:0}.game-card img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:9px}.game-card.card-portrait img{aspect-ratio:auto}.game-card h3{font-size:1rem;margin:8px 0 4px}.game-card p{margin:0;color:var(--muted);font-size:.8rem}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.toolbar input,.toolbar select{min-height:39px;border-radius:9px;border:1px solid #3a4350;background:#0b1016;color:var(--text);padding:0 .7rem}
.tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}.tab{border:1px solid #38414d;border-radius:999px;padding:.4rem .75rem;background:#10161f;color:var(--muted);cursor:pointer}.tab.active{border-color:var(--gold);color:var(--gold2);background:rgba(198,162,88,.09)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:650px}.table th,.table td{text-align:left;padding:10px 9px;border-bottom:1px solid var(--line)}.table th{font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.table td{font-size:.86rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.kpi{padding:14px}.kpi .big{font-size:1.65rem;font-weight:950}.kpi .small{color:var(--muted);font-size:.76rem}
.action-list{display:grid;gap:9px}.action{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border-radius:11px;background:#0c1118;border:1px solid var(--line)}.action span{display:block;color:var(--muted);font-size:.8rem}
.chips{display:flex;gap:7px;flex-wrap:wrap}.chip{border:1px solid #38414d;border-radius:999px;padding:.42rem .7rem;background:#0f151d;color:var(--muted);cursor:pointer}.chip.active{border-color:var(--gold);color:var(--gold2);background:rgba(198,162,88,.08)}
.exercise-shell{max-width:820px;margin:auto}.exercise-box{padding:25px}.problem{font-size:1.12rem;line-height:1.65;background:#0b1016;border:1px solid var(--line);border-radius:12px;padding:18px;margin:16px 0}.anti-copy{-webkit-user-select:none;user-select:none}.answer-row{display:flex;gap:9px}.answer-row input{flex:1;min-height:45px;border-radius:10px;border:1px solid #3b4553;background:#080c12;color:var(--text);padding:0 .8rem}.feedback{margin-top:13px;padding:12px;border-radius:10px}.feedback.ok{background:rgba(76,140,104,.14);border:1px solid rgba(76,140,104,.5)}.feedback.bad{background:rgba(186,72,72,.14);border:1px solid rgba(186,72,72,.5)}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:11px}.achievement{position:relative;text-align:center;padding:12px}.achievement img{width:120px;height:120px;object-fit:contain}.achievement.locked img{filter:grayscale(1);opacity:.28}.achievement.locked:after{content:"🔒";position:absolute;top:51px;left:50%;transform:translateX(-50%);font-size:1.6rem}.achievement h3{font-size:.94rem;margin:5px 0}.achievement p{font-size:.75rem;color:var(--muted);margin:0}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;padding:20px;z-index:500}.modal{width:min(820px,100%);max-height:90vh;overflow:auto;padding:22px}.modal-close{float:right}.special-modal{text-align:center}.special-emblem{width:180px;height:180px;object-fit:contain}.reward-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.reward-cell{padding:12px;background:#0c1118;border:1px solid var(--line);border-radius:10px}.reward-cell b{display:block;font-size:1.15rem}
.toast-root{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:650}.toast{width:min(360px,calc(100vw - 36px));padding:12px 14px;border-radius:11px;background:#171e28;border:1px solid var(--border);box-shadow:var(--shadow)}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:grid;gap:5px}.field label{font-size:.72rem;color:var(--muted);font-weight:800}.field input,.field select,.field textarea{width:100%;border-radius:9px;border:1px solid #3c4654;background:#0a0f15;color:var(--text);padding:.65rem}.field textarea{min-height:90px;resize:vertical}.check{display:flex;gap:.55rem;align-items:center}.check input{width:18px;height:18px}
.login-page{display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 18%,rgba(128,84,214,.14),transparent 34%),var(--bg) url("../assets/ui/backgrounds/dark-stone.svg") center/512px repeat}.login-shell{width:min(600px,100%)}.login-logo{width:100%;margin-bottom:14px}.login-card{padding:26px}.login-card h1{text-align:center}.login-card form{display:grid;gap:12px}.login-card label{display:grid;gap:5px;font-size:.78rem;color:var(--muted);font-weight:800}.login-card input{height:45px;border-radius:10px;border:1px solid #3c4550;background:#080c11;color:var(--text);padding:0 .8rem}.demo-box{display:grid;gap:8px;margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}
.ko-page{border-color:rgba(186,72,72,.55);background:radial-gradient(circle at 50% 0,rgba(186,72,72,.16),transparent 42%),var(--panel)}
@media(max-width:1050px){.app-shell{grid-template-columns:215px 1fr}.profile-hero{grid-template-columns:120px 1fr}.level-img{display:none}.avatar{width:110px}.c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}.stat-grid{grid-template-columns:repeat(2,1fr)}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:740px){.app-shell{display:block}.sidebar{position:relative;height:auto;display:none}.main{padding:14px}.profile-hero{grid-template-columns:90px 1fr;gap:13px}.avatar{width:86px}.character-name{font-size:1.45rem}.stat-grid{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:1fr 1fr}.reward-row{grid-template-columns:1fr 1fr}.editor-grid{grid-template-columns:1fr}.topbar h1{font-size:1.35rem}}
/* Firebase V1 */
button:disabled{opacity:.55;cursor:wait;transform:none!important}
.firebase-readonly-note{
  margin-bottom:14px;padding:10px 12px;border:1px solid rgba(198,162,88,.28);
  background:rgba(198,162,88,.07);border-radius:10px;color:var(--muted)
}


/* QUESTARIUM V1.5 · editable character profile */
.small-text{font-size:.78rem}
.badge.warning{border-color:rgba(224,157,62,.55);background:rgba(224,157,62,.12);color:#f1c277}
.profile-notice{margin:0 0 14px;padding:11px 12px;border:1px solid rgba(224,157,62,.4);border-radius:10px;background:rgba(224,157,62,.08);color:#d9c39c;font-size:.85rem}
.bio-text{white-space:normal;line-height:1.7;padding:14px;border-radius:11px;background:#0c1118;border:1px solid var(--line);overflow-wrap:anywhere}
.bio-counter{text-align:right;color:var(--muted);font-size:.75rem;margin-top:4px}
.avatar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;max-height:330px;overflow:auto;padding:9px;border:1px solid var(--line);background:#080c12;border-radius:11px}
.avatar-choice{appearance:none;border:2px solid transparent;background:#10161f;padding:4px;border-radius:11px;cursor:pointer;transition:.12s ease}
.avatar-choice:hover{border-color:rgba(234,208,138,.45);transform:translateY(-1px)}
.avatar-choice.selected{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(198,162,88,.18),0 0 18px rgba(128,84,214,.2)}
.avatar-choice img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px}

/* V1.5.2 · Groups real roster */
.table tr.selected-row td{background:rgba(198,162,88,.06)}

/* V1.7 admin editors */
.mini-asset{width:46px;height:46px;object-fit:contain;border-radius:8px}
.mini-card{width:42px;height:58px;object-fit:cover;border-radius:6px}
.inline-editor-row{display:grid;grid-template-columns:minmax(130px,1.5fr) 90px auto;gap:8px;align-items:center;margin:8px 0}
.reward-edit-row{grid-template-columns:110px minmax(130px,1fr) 80px 80px 70px auto}
.inline-editor-row select,.inline-editor-row input{width:100%}
@media(max-width:850px){.reward-edit-row,.inline-editor-row{grid-template-columns:1fr 1fr}.reward-edit-row .btn,.inline-editor-row .btn{grid-column:1/-1}}
/* V2.0 · tutorial + secure adventure */
.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:16px}
.tutorial-card{border:1px solid rgba(198,162,88,.18);background:rgba(255,255,255,.025);border-radius:12px;padding:14px}
.tutorial-card h3{margin:8px 0 6px}.tutorial-card p{margin:0;color:var(--muted);line-height:1.45}.tutorial-emoji{font-size:1.7rem}
.progress-steps{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 18px}.progress-steps span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);color:var(--muted);font-weight:700}.progress-steps span.active{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 2px rgba(198,162,88,.08)}.progress-steps span.done{background:rgba(94,170,110,.16);border-color:rgba(94,170,110,.55);color:#bfe4c7}

/* V2.1 · UX, images, cards, charts */
.gold-mark{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}.gold-mark img{width:20px!important;height:20px!important;aspect-ratio:1!important;object-fit:contain!important;border-radius:50%!important}
.reward-card{background:var(--panel)!important}.rarity-frame{border:2px solid rgba(255,255,255,.12)!important;box-shadow:none}.rarity-frame.comuna{border-color:#69727d!important}.rarity-frame.rara{border-color:#478bd1!important}.rarity-frame.epica,.rarity-frame.èpica{border-color:#9165d8!important}.rarity-frame.llegendaria,.rarity-frame.llegendària{border-color:#d0a448!important}.rarity-frame.negative-card{box-shadow:inset 0 0 0 2px rgba(186,72,72,.55)!important}
.option-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.option-help{display:grid;gap:4px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#0c1118}.option-help span{display:flex;align-items:center;gap:.45rem}.option-help input{width:18px;height:18px}.option-help small{color:var(--muted);line-height:1.35;padding-left:26px}
.asset-upload-row{display:flex;align-items:center;gap:14px;padding:12px;margin:14px 0;border:1px solid var(--line);border-radius:12px;background:#0c1118}.asset-upload-row>img{width:112px;height:112px;object-fit:contain;border-radius:10px;background:var(--bg2)}.asset-upload-row .card-preview{width:120px;height:170px}.asset-upload-row .trophy-preview{width:128px;height:128px}.asset-upload-row details{margin-top:9px}.asset-upload-row details input{width:min(520px,100%);margin-top:7px}
.avatar-current-upload{display:flex;gap:12px;align-items:center;margin-bottom:12px}.avatar-current-upload img{width:88px;height:88px;object-fit:cover;border-radius:14px}
.image-editor-layout{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr);gap:16px;margin:12px 0}.image-preview-shell{display:grid;place-items:center;min-height:220px;border:1px solid var(--line);border-radius:12px;background:#070a0e;overflow:auto;padding:8px}.image-preview-shell canvas{max-width:100%;height:auto;cursor:crosshair}.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reward-builder{display:grid;grid-template-columns:110px minmax(160px,1fr) 95px 95px 100px auto;gap:8px;align-items:end;margin:10px 0 14px}.reward-builder .field small{font-size:.68rem;color:var(--muted)}.chest-main-grid .field input[type=number]{min-width:120px}
.stats-chart{width:100%;height:auto;min-height:130px}.chart-label,.chart-value{font:12px Inter,system-ui,sans-serif;fill:#b9b0a1}.chart-track{fill:#090d12;stroke:rgba(255,255,255,.08)}.chart-bar{fill:#7b61b8}.chart-value{fill:#ead08a;font-weight:800}
.achievement img,.trophy-preview{object-fit:contain!important}.achievement{overflow:hidden}
@media(max-width:900px){.image-editor-layout,.image-pair{grid-template-columns:1fr}.reward-builder{grid-template-columns:1fr 1fr}.reward-builder .btn{grid-column:1/-1}.option-help-grid{grid-template-columns:1fr}}

.tutorial-icon{width:30px!important;height:30px!important;object-fit:contain!important;display:block}

/* V2.2.1 */
.trophy-toast{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px;border-color:#a98435;box-shadow:0 12px 35px rgba(0,0,0,.45),0 0 0 1px rgba(212,175,55,.16) inset;background:linear-gradient(135deg,#171e28,#211d16)}
.trophy-toast img{width:56px;height:56px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.035)}
.trophy-toast b{display:block;font-size:.76rem;letter-spacing:.08em;color:#e8c46a;margin-bottom:3px}.trophy-toast span{display:block;font-weight:700}

/* V2.2.2 critical dialogs and teacher-managed profile media */
.game-alert{padding:12px 4px;text-align:center}.game-alert-icon{font-size:3.2rem;line-height:1;margin:8px 0 14px}.game-alert h2{font-size:clamp(1.5rem,4vw,2.25rem);margin-bottom:14px}.game-alert .feedback{font-size:1.05rem;line-height:1.55;padding:18px;max-width:640px;margin:0 auto}.profile-photo-admin{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}.level-editor-thumb{width:64px;height:64px;object-fit:contain;border-radius:10px;background:var(--bg2);border:1px solid var(--line)}.trophy-reward{margin-top:10px;padding:8px 10px;border:1px solid rgba(212,175,55,.25);border-radius:9px;background:rgba(212,175,55,.05);font-size:.9rem}.trophy-toast small{display:block;margin-top:4px;color:var(--muted);line-height:1.35}

/* V2.3 final polish */
.modal-backdrop{z-index:2200!important}
.modal-backdrop .modal:has(.game-alert){width:min(760px,calc(100vw - 28px));min-height:260px;display:grid;align-content:center}
.game-alert{padding:24px 18px!important}
.game-alert .btn{min-width:150px;min-height:46px;font-size:1rem}
.progress-steps span.done-correct{background:rgba(94,170,110,.18);border-color:rgba(94,170,110,.72);color:#c7f1cf}
.progress-steps span.done-wrong{background:rgba(186,72,72,.18);border-color:rgba(210,78,78,.8);color:#ffc6c6}
.reward-card>img,.game-card.card-portrait>img{background:transparent!important}
.avatar-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px}
.avatar-admin-card{display:grid;gap:6px;align-items:center;justify-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:#0c1118;text-align:center}
.avatar-admin-card img{width:72px;height:72px;object-fit:cover;border-radius:8px;background:var(--bg2)}
.builtin-avatar-grid{margin-top:12px;max-height:430px;overflow:auto;padding-right:4px}
.builtin-avatar-toggle{cursor:pointer}.builtin-avatar-toggle.disabled-avatar{opacity:.42;filter:grayscale(.8)}
.builtin-avatar-toggle span{font-size:.72rem;color:var(--muted);display:flex;gap:5px;align-items:center}

/* V2.3 final: la transparència de les cartes sempre revela el mateix fons neutre. */
.reward-card>img,.game-card.card-portrait>img{background:var(--panel)!important}

/* V2.3.2: selector de problemes per missió */
.problem-picker{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;max-height:360px;overflow:auto;background:rgba(0,0,0,.12)}
.problem-choice-list{display:grid;gap:8px}.problem-choice{align-items:flex-start;padding:8px;border-radius:9px;background:rgba(255,255,255,.035)}.problem-choice small{display:block;margin-top:3px;line-height:1.35}