/* La Paella Festera — minijoc HTML/CSS/Canvas, sense llibreries externes */
.pa-page{--pa-navy:#102957;--pa-gold:#f4c75f;padding-bottom:48px}
.pa-hero{background:radial-gradient(ellipse at 90% 20%,#3165a3,#0d2258 63%);border-radius:19px;margin:23px 0;min-height:240px;color:#fff;display:grid;grid-template-columns:1fr 175px;align-items:center;gap:16px;padding:clamp(24px,4vw,42px);overflow:hidden}
.pa-hero h1{color:#fff;font-size:clamp(39px,6vw,68px);line-height:1.02;letter-spacing:-.06em;margin:12px 0 15px}.pa-hero h1 em{font-style:normal;color:#ffcf69}.pa-hero p{color:#dce7fb;line-height:1.6;font-size:15px;max-width:700px;margin:0}.pa-hero-art{font-size:125px;filter:drop-shadow(0 12px 20px #0006);transform:rotate(-12deg);text-align:center}
.pa-grid{display:grid;grid-template-columns:minmax(0,1.63fr) minmax(250px,.75fr);align-items:start;gap:19px}
.pa-play,.pa-aside{border:1px solid #e0e8f3;border-radius:18px;background:white;box-shadow:0 15px 45px #09214809;overflow:hidden}
.pa-play{padding:22px}.pa-play-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.pa-overline{color:#526d9a;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.pa-play h2{font-size:23px;line-height:1.16;letter-spacing:-.035em;color:#0d2258;margin:4px 0 0}.pa-back{color:#254d90;font-size:12px;font-weight:800;white-space:nowrap}
.pa-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 13px}.pa-stats>div{border:1px solid #e1e9f7;border-radius:10px;padding:11px 10px;background:#eff4fb;display:flex;flex-direction:column;gap:3px;min-width:0}.pa-stats small{font-size:9px;letter-spacing:.07em;font-weight:900;color:#617492}.pa-stats strong{color:#0d2258;font-size:clamp(21px,3vw,29px);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.pa-board{position:relative;background:#112957;overflow:hidden;border-radius:13px;border:4px solid #102856;line-height:0;max-width:100%}
.pa-board canvas{display:block;width:100%;height:auto;aspect-ratio:780/450}
.pa-overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:2;background:#081b41bd;backdrop-filter:blur(3px);padding:13px;line-height:1.45}.pa-overlay[hidden]{display:none}
.pa-dialog{line-height:1.45;text-align:center;max-width:340px;width:100%;padding:24px 21px;background:#fffefa;border-radius:15px;box-shadow:0 15px 30px #0003}.pa-dialog-icon{font-size:44px;line-height:1.2}.pa-dialog h3{color:#0d2258;font-size:27px;line-height:1.15;letter-spacing:-.045em;margin:10px 0}.pa-dialog p{font-size:13px;color:#60718d;line-height:1.65;margin:0 0 17px}
.pa-primary,.pa-cool,.pa-neutral{min-height:44px;border:1px solid #102957;border-radius:10px;background:#102957;color:#fff;font-size:13px;font-weight:900;padding:11px 16px;cursor:pointer;transition:transform .13s,background .13s}.pa-primary:hover,.pa-cool:hover{background:#2454a0}.pa-primary:active,.pa-cool:active{transform:scale(.98)}.pa-cool:disabled{opacity:.5;cursor:not-allowed}.pa-neutral{color:#102957;background:#eff4fb;border-color:#d9e3f4}.pa-neutral:hover{background:#dceafa}
.pa-heat-row{display:flex;gap:9px;align-items:center;margin:15px 0 17px}.pa-heat-row>span{color:#253c60;white-space:nowrap;font-size:12px;font-weight:900}.pa-heat-row>strong{width:38px;flex:0 0 38px;text-align:right;color:#203962;font-size:12px;font-variant-numeric:tabular-nums}.pa-heat-track{height:12px;flex:1;border-radius:12px;background:#e7ecf5;overflow:hidden}.pa-heat-track i{display:block;width:24%;height:100%;background:linear-gradient(90deg,#f1cc61,#f0923c,#dd3f46);border-radius:12px;transition:width .14s ease}
.pa-quiz{margin-top:7px}.pa-quiz-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;color:#506b92;font-weight:900;letter-spacing:.055em;margin-bottom:10px}.pa-quiz-head span:last-child{color:#8192af;letter-spacing:0}
.pa-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pa-options>p{grid-column:1/-1;text-align:center;color:#607492;font-size:13px}.pa-option{display:flex;align-items:center;text-align:left;gap:10px;min-height:68px;border:1px solid #d7e2f4;border-radius:12px;background:#f4f7fc;color:#173560;padding:10px 12px;font-size:13px;font-weight:850;cursor:pointer;touch-action:manipulation;transition:background .13s,border-color .13s}.pa-option:hover:not(:disabled){background:#e1ecfc;border-color:#94b1da}.pa-option:focus-visible{outline:3px solid #5285ca;outline-offset:2px}.pa-option:disabled{cursor:default}.pa-option.good{border-color:#44955a;background:#e3f5e4}.pa-option.bad{border-color:#d85b5a;background:#fff0ee}.pa-option .pa-opt-icon{font-size:29px;line-height:1.1;flex:0 0 36px;text-align:center}.pa-option .pa-opt-number{margin-left:auto;color:#7b93b4;font-size:10px}.pa-option[disabled]:not(.good):not(.bad){opacity:.66}
.pa-control{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}.pa-control>button{flex:1 1 auto}.pa-live{font-size:12px;min-height:22px;color:#526c94;line-height:1.5;margin:11px 0 0}
.pa-aside{padding:25px 23px}.pa-aside h2{color:#102957;font-size:clamp(21px,2.5vw,27px);letter-spacing:-.037em;line-height:1.2;margin:8px 0 20px}.pa-aside ol{padding-left:22px;color:#445979;font-size:13px;line-height:1.7;margin:0}.pa-aside li{margin-bottom:15px}.pa-aside b{color:#0d2258}.pa-info-box{display:grid;gap:5px;background:#f1f5fd;padding:15px;border-radius:9px;margin:15px 0;border-left:4px solid #e6be63}.pa-info-box b{font-size:12px}.pa-info-box p{font-size:12px;color:#5b6f90;line-height:1.5;margin:0 0 9px}.pa-info-box.soft{border-left-color:#90a8cc}.pa-related{display:block;border-top:1px solid #e8edf6;color:#193d82;padding:12px 0;font-size:12px;font-weight:800;line-height:1.5}
@media(max-width:940px){.pa-grid{grid-template-columns:1fr}.pa-aside{display:block}.pa-hero{grid-template-columns:1fr 100px}.pa-hero-art{font-size:98px}}
@media(max-width:660px){.pa-hero{grid-template-columns:1fr;min-height:auto;padding:26px 20px;margin-top:13px}.pa-hero-art{display:none}.pa-play{padding:12px}.pa-play h2{font-size:20px}.pa-stats>div{padding:9px 6px}.pa-stats small{font-size:8px}.pa-stats strong{font-size:23px}.pa-options{gap:7px}.pa-option{min-height:65px;padding:8px;font-size:12px;gap:7px}.pa-option .pa-opt-icon{font-size:24px;flex:0 0 29px}.pa-option .pa-opt-number{display:none}.pa-quiz-head{font-size:9px}.pa-aside{padding:19px}.pa-control>button{font-size:12px;padding:10px 9px}.pa-back{font-size:10px}}
@media(prefers-reduced-motion:reduce){.pa-primary,.pa-cool,.pa-option,.pa-heat-track i{transition:none}}