/* No bolques la cassalla! — joc original per a la Penya El Descontrol 2.0 */
.cas-page{padding-bottom:42px;--cas-navy:#0d2258;--cas-mid:#22477e;--cas-gold:#f8cb65;--cas-cream:#fff9ea}
.cas-hero{position:relative;display:grid;grid-template-columns:1.6fr .75fr;gap:22px;align-items:center;margin:22px 0 25px;border-radius:21px;background:radial-gradient(ellipse at 100% 0%,#274e90 0%,#0d2258 66%);color:white;padding:clamp(25px,4.5vw,49px);overflow:hidden;isolation:isolate}
.cas-hero:before{content:"";position:absolute;inset:0;opacity:.14;background-image:radial-gradient(circle at 19% 17%,#fff 1px,transparent 1.6px),radial-gradient(circle at 71% 48%,#fff 1px,transparent 1.6px);background-size:48px 48px,79px 79px;z-index:-1}
.cas-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cas-gold)}
.cas-hero h1{color:#fff;letter-spacing:-.059em;font-weight:900;font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(38px,6vw,77px);line-height:1.04;margin:15px 0 18px}
.cas-hero h1 span{color:var(--cas-gold)}
.cas-hero p{color:#e3eafa;line-height:1.65;max-width:610px;font-size:16px;margin:0}
.cas-hero-join{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:23px}
.cas-hero-tag{font-size:11px;font-weight:800;letter-spacing:.025em;color:#fff;border:1px solid #ffffff40;border-radius:99px;padding:8px 12px;background:#ffffff12}
.cas-hero-art{display:grid;justify-items:center;gap:14px;text-align:center}
.cas-hero-art img{width:min(190px,75%);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 20px #030b1f7d)}
.cas-hero-art b{font-size:12px;color:#e1ecff;letter-spacing:.08em;text-transform:uppercase}
.cas-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,.83fr);gap:18px;align-items:start}
.cas-main-card,.cas-instructions{background:#fff;border:1px solid #e3e9f4;border-radius:18px;box-shadow:0 15px 45px #0c23400c;overflow:hidden}
.cas-card-head{padding:21px 23px 13px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.cas-card-head h2,.cas-instructions h2{margin:5px 0 0;color:#102552;font-size:clamp(18px,2.3vw,23px);letter-spacing:-.025em}
.cas-chip{color:#102c5c;font-size:10px;font-weight:900;background:#ffedb6;border:1px solid #f4d67e;padding:8px 10px;border-radius:100px;white-space:nowrap}
.cas-scores{padding:0 23px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cas-scores>div{padding:12px 14px;background:#f1f5fc;border:1px solid #e2eaf7;border-radius:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cas-scores span{font-size:10px;color:#5a6d88;font-weight:900;letter-spacing:.07em}
.cas-scores strong{font-size:clamp(23px,3vw,32px);color:#132e65;font-weight:900;letter-spacing:-.06em;line-height:1.1;font-variant-numeric:tabular-nums}
.cas-board-shell{margin:0 18px;position:relative;overflow:hidden;background:#0b1a38;border-radius:14px;border:4px solid #132d5b;touch-action:pan-y}
#cas-canvas{display:block;width:100%;height:auto;aspect-ratio:960/575;outline:none}
.cas-over{position:absolute;inset:0;display:grid;place-items:center;z-index:2;padding:16px;background:#061330af;backdrop-filter:blur(4px)}
.cas-over[hidden]{display:none}
.cas-dialog{background:#fffef9;padding:clamp(18px,3vw,28px);border-radius:16px;max-width:355px;width:100%;text-align:center;box-shadow:0 15px 40px #0003}
.cas-dialog-symbol{display:block;font-size:37px;margin-bottom:9px}
.cas-dialog h3{color:#0d2258;font-weight:900;letter-spacing:-.03em;font-size:clamp(22px,3vw,30px);margin:5px 0}
.cas-dialog p{color:#46536c;font-size:13px;line-height:1.65;margin:10px 0 18px}
.cas-action{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:43px;border:0;background:#0d2258;color:white;font-size:13px;font-weight:900;border-radius:9px;padding:11px 16px;transition:transform .15s,background .15s}
.cas-action:hover{transform:translateY(-1px);background:#224b91}
.cas-action.outline{color:#0d2258;background:white;border:1px solid #bdcce4}
.cas-action.outline:hover{background:#edf3fd}
.cas-action.plain{background:transparent;color:#264377}
.cas-toolbar{padding:15px 19px 0;display:flex;flex-wrap:wrap;gap:8px}
.cas-toolbar .cas-action{flex:1;white-space:nowrap}
.cas-barline{padding:13px 20px 6px;display:flex;gap:10px;align-items:center}
.cas-barline span{color:#556b91;white-space:nowrap;font-weight:800;font-size:11px}
.cas-next-track{background:#e6ebf5;height:8px;border-radius:8px;overflow:hidden;flex:1}
.cas-next-fill{display:block;background:linear-gradient(90deg,#e5ac47,#f5d786);width:0%;height:100%;border-radius:8px;transition:width .18s}
.cas-pad{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:360px;margin:12px auto 2px;padding:0 18px}
.cas-pad button{background:#e7edf7;border:1px solid #c7d5ee;color:#0d2258;border-radius:13px;min-height:60px;font-size:24px;font-weight:900;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.cas-pad button:active,.cas-pad button.is-holding{background:#0d2258;color:#fff}
.cas-hint{padding:10px 20px 18px;margin:0;font-size:12px;color:#687b99;text-align:center;line-height:1.5}
.cas-instructions{padding:25px 24px}
.cas-instructions p{color:#60718d;font-size:14px;line-height:1.72}
.cas-rules{padding-left:20px;color:#30415e;font-size:14px;line-height:1.75;margin:17px 0 23px}
.cas-rules li{padding-bottom:12px}.cas-rules strong{color:#102552}
.cas-tip{background:#eef3fc;border-left:4px solid #e7be65;padding:15px 16px;border-radius:5px;color:#263c64;display:grid;gap:5px;font-size:13px;line-height:1.55;margin:16px 0}
.cas-tip b{font-size:12px;color:#0d2258}
.cas-side-end{display:block;padding:18px 0 0;border-top:1px solid #e6ecf5;margin-top:21px;font-size:12px;color:#5e7294;line-height:1.6}
.cas-side-end a{color:#0d2258;text-decoration:underline;font-weight:800}
.cas-footer-note{font-size:12px;color:#68809f;margin-top:10px}
.cas-ranknote{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#8c691e;font-weight:800;margin:0 0 10px}
@media(max-width:860px){.cas-hero{grid-template-columns:1fr}.cas-hero-art{display:none}.cas-grid{grid-template-columns:1fr}.cas-instructions{order:2}}
@media(max-width:560px){.cas-hero{padding:24px 20px;border-radius:14px;margin-top:13px}.cas-main-card{border-radius:14px}.cas-card-head{padding:16px 14px 12px}.cas-scores{padding:0 12px 12px;gap:5px}.cas-scores>div{padding:9px 8px}.cas-scores span{font-size:8px;letter-spacing:.02em}.cas-board-shell{margin:0 6px;border-width:2px;border-radius:9px}.cas-toolbar{padding:12px 9px 0;gap:6px}.cas-toolbar .cas-action{padding:8px 7px;min-height:42px;font-size:11px}.cas-barline{padding:10px 12px 5px}.cas-pad{padding:0 10px;gap:10px}.cas-pad button{min-height:66px}.cas-instructions{padding:20px}.cas-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){.cas-action{transition:none}}