:root { --purple:#6d28d9; --blue:#1d4ed8; --green:#047857; --red:#b91c1c; --bg:#f5f3ff; --card:#fff; --muted:#6b7280; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color:#111; line-height:1.5; }
header.top { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background: var(--purple); color:#fff; }
header.top a { color:#fff; text-decoration:none; } .brand { font-weight:700; font-size:1.15rem; } .who { margin-right:12px; opacity:.9; }
main { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { color: var(--purple); } h2 { color: var(--blue); margin-top: 28px; }
.card { background: var(--card); border-radius: 14px; padding: 16px 18px; margin: 12px 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.narrow { max-width: 380px; margin: 60px auto; }
label { display:block; margin: 10px 0; } input:not([type=radio]):not([type=checkbox]) { width:100%; padding:10px; font-size:1rem; border:1px solid #ccc; border-radius:8px; }
button, .button { background: var(--purple); color:#fff; border:0; border-radius:10px; padding:10px 18px; font-size:1rem; cursor:pointer; text-decoration:none; display:inline-block; }
.button.light { background:#ede9fe; color: var(--purple); } button.big { width:100%; padding:16px; font-size:1.15rem; margin-top:16px; }
button.clear { background:none; color: var(--muted); padding:4px 0; font-size:.85rem; text-decoration: underline; }
.subjects { display:flex; flex-wrap:wrap; gap:8px; } .chip { padding:6px 14px; border-radius:999px; background:#ede9fe; color: var(--purple); text-decoration:none; }
.chip.on { background: var(--purple); color:#fff; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
a.card.exam { text-decoration:none; color:inherit; } a.card.exam:hover { outline: 2px solid var(--purple); }
.tag { font-size:.75rem; background:#dbeafe; color: var(--blue); padding:2px 8px; border-radius:6px; } .exam h3 { margin:.4em 0; }
.muted { color: var(--muted); } .small { font-size:.85rem; } .best { color: var(--green); margin:0; }
.ok { color: var(--green); } .bad { color: var(--red); } .error { color: var(--red); font-weight:600; }
table.list { width:100%; border-collapse: collapse; background:#fff; border-radius:12px; overflow:hidden; }
table.list th, table.list td { padding:8px 10px; border-bottom:1px solid #eee; text-align:left; }
.rules { background:#fffbeb; border-left: 5px solid #f59e0b; }
.q .qtext { font-size:1.05rem; } .num { font-weight:700; color: var(--blue); margin-right:4px; }
.opt { padding:8px 10px; border-radius:8px; margin:4px 0; cursor:pointer; } .opt:hover { background:#f5f3ff; } .opt.inline { display:inline-block; margin-right:14px; }
.hint { color: var(--muted); font-size:.9rem; margin:4px 0; }
input.blank { width: 11em !important; display:inline-block; padding:4px 8px !important; margin: 0 4px; border-bottom: 2px solid var(--purple) !important; }
figure { margin: 10px 0; text-align:center; } figure img { max-width:100%; max-height: 420px; border-radius:8px; } figcaption { font-size:.85rem; color: var(--muted); }
.score { text-align:center; } .big-score { font-size: 3.4rem; font-weight: 800; } .big-score small { font-size:1.2rem; color: var(--muted); }
.score.pass .big-score { color: var(--green); } .score.fail .big-score { color: var(--red); }
.review.bad { border-left: 6px solid var(--red); } .review.ok { border-left: 6px solid var(--green); } .review.blank { border-left: 6px solid #9ca3af; }
.state { font-weight:700; margin:0; } .state.bad { color: var(--red); } .state.ok { color: var(--green); } .state.blank { color: var(--muted); }
ul.opts { padding-left: 18px; } ul.opts li.right { color: var(--green); font-weight:600; } ul.opts li.mine:not(.right) { color: var(--red); text-decoration: line-through; }
.why { background:#ecfdf5; border-radius:8px; padding:8px 12px; }
@media (max-width: 520px) { .big-score { font-size: 2.6rem; } }
.who-toggle { display:flex; gap:10px; margin: 8px 0 16px; }
.who-btn { flex:1; margin:0; cursor:pointer; } .who-btn input { display:none; }
.who-btn span { display:block; text-align:center; padding:18px 8px; border-radius:12px; background:#ede9fe; color: var(--purple); font-size:1.2rem; font-weight:700; border:3px solid transparent; }
.who-btn input:checked + span { background: var(--purple); color:#fff; border-color:#4c1d95; }
.who-btn.admin { flex:0 0 auto; } .who-btn.admin span { font-size:.9rem; padding:18px 12px; font-weight:500; }
input.pin { font-size:1.6rem !important; letter-spacing:.4em; text-align:center; }
/* Gamificació */
header.top nav a { margin-left: 10px; }
.pancraci-box { display:flex; align-items:center; gap:12px; margin: 12px 0; }
.pancraci { flex: 0 0 auto; }
.pancraci.mood-eufòric { animation: pancraci-jump .6s ease-in-out 3; }
@keyframes pancraci-jump { 50% { transform: translateY(-12px) rotate(-4deg); } }
.bubble { position:relative; background:#fff; border:2px solid #c4b5fd; border-radius:16px; padding:10px 14px; flex:1; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.bubble:before { content:""; position:absolute; left:-10px; top:24px; border:8px solid transparent; border-right-color:#c4b5fd; border-left:0; }
.bubble p { margin:.25em 0; }
.stats { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.stat { display:flex; flex-direction:column; align-items:center; min-width:70px; } .stat b { font-size:1.3rem; color: var(--purple); } .stat span { font-size:.8rem; color: var(--muted); }
.xpbar { flex-basis:100%; height:14px; background:#ede9fe; border-radius:999px; overflow:hidden; }
.xpbar i { display:block; height:100%; background: linear-gradient(90deg, #8b5cf6, #f59e0b); border-radius:999px; }
.xpbar.team i { background: linear-gradient(90deg, #10b981, #3b82f6); }
.stats p { flex-basis:100%; margin:0; } .badges-mini span { font-size:1.4rem; margin-right:4px; }
ol.rank { padding-left: 0; list-style:none; } ol.rank li { display:flex; justify-content:space-between; padding:8px 10px; border-radius:8px; }
ol.rank li.me { background:#f5f3ff; font-weight:600; }
.gains { display:flex; flex-wrap:wrap; gap:8px; } .pill { padding:6px 12px; border-radius:999px; background:#ede9fe; color: var(--purple); font-weight:600; }
.pill.xp { background:#fef3c7; color:#92400e; } .pill.up { background:#dcfce7; color: var(--green); } .pill.level { background: var(--purple); color:#fff; }
.medal { font-size: 3rem; animation: pancraci-jump .8s ease-in-out 4; }
canvas.confetti { position:fixed; inset:0; pointer-events:none; z-index:50; }
.levels, .badges { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.lvl, .badge { display:flex; flex-direction:column; align-items:center; text-align:center; margin:0; }
.locked { opacity:.45; filter: grayscale(1); } .badge .icon { font-size:2rem; }
svg.chart { width:100%; height:120px; background:#fafafa; border-radius:8px; }
.timer { position: sticky; top: 8px; z-index: 5; float: right; background: var(--purple); color:#fff; padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.timer .clear { color:#e9d5ff; margin-left: 6px; } .timer.mini #clock { display:none; } .timer.mini { opacity:.6; }
.time { margin: 4px 0; }
.paper .counter { display:flex; align-items:center; gap:10px; margin: 10px 0; }
.paper .lbl { flex:1; font-weight:700; font-size:1.1rem; }
.paper .step { width:52px; height:52px; font-size:1.6rem; padding:0; border-radius:12px; }
.paper .counter input { width:80px !important; text-align:center; font-size:1.4rem !important; }
.paper .sum, .paper .live { font-size:1.1rem; } .paper .live b { font-size:1.6rem; color: var(--purple); }
button:disabled { opacity:.45; cursor:not-allowed; }
.tag.paper { background:#fef3c7; color:#92400e; }
table.materials td.dl { text-align:right; white-space:nowrap; } table.materials .button { padding:6px 12px; font-size:.9rem; }
table.materials tr.sol td { background:#fffbeb; }