/* Kupa Yolu - ekran yerlesimi, giris ve genel paneller */
.minitiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
.dashtop{display:flex;gap:10px;align-items:stretch;margin-bottom:8px;flex-wrap:wrap}
.dashtop .actionbar{flex:0 0 auto;margin:0;align-items:stretch}
.mtile.clickable{cursor:pointer;transition:border-color var(--tr-fast),box-shadow var(--tr-fast)}.mtile.clickable:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}
#powTile .mv{font-size:20px}
.pbreak{padding:8px 14px}
.pbr{display:flex;justify-content:space-between;font-family:var(--mono);font-size:15px;padding:4px 0;border-bottom:1px solid var(--border-subtle)}
.pbr.tot{border-top:2px solid var(--color-ink);border-bottom:none;margin-top:4px;font-family:var(--disp);font-weight:700;font-size:14px}
.pbr b{color:var(--color-primary)}
.breakdown-modal{width:min(340px,calc(100vw - 32px));background:var(--surface-elevated);border-radius:var(--radius-lg);overflow:hidden}
.bd-head{background:var(--color-ink);color:var(--color-background);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 12px}
.bd-title{font-family:var(--mono);font-weight:900;font-size:9px;letter-spacing:4px;text-transform:uppercase;line-height:1}
.bd-head-actions{display:flex;align-items:center;gap:8px;min-width:0}
.bd-meta{font-family:var(--mono);font-weight:900;font-size:9px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.bd-close{width:24px;height:24px;border:1px solid rgba(243,245,244,.28);border-radius:6px;background:transparent;color:var(--color-background);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.78;transition:opacity var(--tr-fast),background var(--tr-fast),border-color var(--tr-fast)}
.bd-close:hover,.bd-close:focus-visible{opacity:1;background:rgba(243,245,244,.1);border-color:rgba(243,245,244,.45);outline:none}
.bd-list{padding:10px 14px 12px}
.bd-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:25px;border-bottom:1px solid var(--border-subtle);font-family:var(--mono);font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums}
.bd-label{display:flex;align-items:center;gap:7px;min-width:0;color:var(--color-ink)}
.bd-icon{width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--color-slate);flex:0 0 18px}
.bd-icon svg{display:block}
.bd-value{font-weight:900;text-align:right;white-space:nowrap;letter-spacing:.2px;font-variant-numeric:tabular-nums}
.bd-value-positive{color:var(--color-primary)}
.bd-value-negative{color:#DA3D2E}
.bd-value-neutral{color:var(--color-slate)}
.bd-value-chem-worst{color:var(--rating-worst-text)}
.bd-value-chem-weak{color:var(--rating-weak-text)}
.bd-value-chem-average{color:var(--rating-average-text)}
.bd-value-chem-good{color:var(--rating-good-text)}
.bd-value-chem-elite{color:var(--rating-elite-text)}
.bd-total{border-top:2px solid var(--color-ink);border-bottom:none;margin-top:5px;padding-top:7px;min-height:31px;font-family:var(--disp);font-weight:900;font-size:15px}
.bd-total .bd-label{color:var(--color-ink)}
.bd-total .bd-value{font-size:17px;color:var(--color-primary)}
.bd-total .bd-value-chem-worst{color:var(--rating-worst-text)}
.bd-total .bd-value-chem-weak{color:var(--rating-weak-text)}
.bd-total .bd-value-chem-average{color:var(--rating-average-text)}
.bd-total .bd-value-chem-good{color:var(--rating-good-text)}
.bd-total .bd-value-chem-elite{color:var(--rating-elite-text)}
.bd-row:last-child{border-bottom:none}
.riskdraft-modal{width:min(340px,calc(100vw - 30px));padding:16px 18px 18px}
.riskdraft-modal .kithdr{text-align:center;margin-bottom:4px}
.riskdraft-modal .kitsub{text-align:center;margin-bottom:13px;color:var(--color-slate)}
.risk-offer-list{display:grid;gap:10px}
.risk-offer{--risk-accent:var(--color-primary);--risk-secondary:var(--color-primary);position:relative;isolation:isolate;overflow:hidden;width:100%;display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;text-align:left;border:1px solid color-mix(in srgb,var(--risk-accent) 24%,var(--border-subtle));background:linear-gradient(105deg,color-mix(in srgb,var(--surface-elevated) 91%,var(--risk-accent) 9%) 0%,var(--surface-elevated) 48%);border-radius:13px;padding:11px 13px 11px 12px;box-shadow:0 4px 14px rgba(16,29,40,.08),inset 0 1px 0 rgba(255,255,255,.36);cursor:pointer;transition:border-color var(--tr-fast),box-shadow var(--tr-fast),transform var(--tr-fast),background var(--tr-fast);animation:riskOfferEnter .38s both}
.risk-offer:nth-child(2){animation-delay:.04s}.risk-offer:nth-child(3){animation-delay:.08s}.risk-offer:nth-child(4){animation-delay:.12s}.risk-offer:nth-child(5){animation-delay:.16s}
.risk-offer::before{content:"";position:absolute;z-index:-1;left:0;top:10px;bottom:10px;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--risk-secondary),var(--risk-accent));box-shadow:0 0 12px color-mix(in srgb,var(--risk-accent) 42%,transparent)}
.risk-offer::after{content:"";position:absolute;z-index:-2;width:92px;height:92px;left:-45px;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--risk-accent) 13%,transparent),transparent 68%);pointer-events:none}
.risk-offer:hover,.risk-offer:focus-visible{border-color:color-mix(in srgb,var(--risk-accent) 62%,var(--border-subtle));box-shadow:0 8px 22px rgba(16,29,40,.14),0 0 0 1px color-mix(in srgb,var(--risk-accent) 12%,transparent);transform:translateY(-2px);outline:none}
.risk-offer:active{transform:translateY(0) scale(.992)}
.risk-offer-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--risk-accent);width:46px;height:46px;border:1px solid color-mix(in srgb,var(--risk-accent) 22%,var(--border-subtle));border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-elevated) 72%,var(--risk-secondary) 28%),color-mix(in srgb,var(--surface-muted) 88%,var(--risk-accent) 12%));box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 4px 11px color-mix(in srgb,var(--risk-accent) 13%,transparent);transition:transform var(--tr-fast),box-shadow var(--tr-fast)}
.risk-offer:hover .risk-offer-icon,.risk-offer:focus-visible .risk-offer-icon{transform:scale(1.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 6px 16px color-mix(in srgb,var(--risk-accent) 23%,transparent)}
.risk-offer-copy{display:grid;gap:4px;min-width:0}
.risk-offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.risk-offer-head b{font-family:var(--disp);font-size:17px;line-height:1.05;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.risk-offer-head em{font-family:var(--mono);font-style:normal;font-weight:900;font-size:7px;letter-spacing:.75px;text-transform:uppercase;color:var(--risk-accent);border:1px solid color-mix(in srgb,var(--risk-accent) 34%,var(--border-subtle));background:color-mix(in srgb,var(--risk-accent) 9%,transparent);border-radius:999px;padding:2px 6px;white-space:nowrap}
.risk-offer-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;line-height:1.25;color:var(--color-slate);font-variant-numeric:tabular-nums}
.risk-offer-line span{font-size:8px;letter-spacing:.8px;text-transform:uppercase;opacity:.7}
.risk-offer-line b{font-weight:800;text-align:right;color:var(--color-slate)}
.risk-offer-line .risk-num{font-weight:900;font-variant-numeric:tabular-nums}
.risk-offer-line .risk-num-good{color:var(--status-positive-text)}
.risk-offer-line .risk-num-bad{color:#DA3D2E}
.risk-offer-line .risk-num-neutral{color:var(--color-slate)}
.risk-offer-safe{background:linear-gradient(105deg,color-mix(in srgb,var(--surface-elevated) 91%,var(--risk-accent) 9%),color-mix(in srgb,var(--surface-elevated) 92%,var(--surface-muted) 8%))}
.risk-offer-safe::before{background:repeating-linear-gradient(180deg,var(--risk-secondary) 0 5px,transparent 5px 8px);box-shadow:none}
.risk-offer-safe .risk-offer-head em{color:var(--color-slate);border-color:var(--border-subtle);background:var(--surface-muted)}
.opt .ctx{font-family:var(--mono);font-size:12px;color:var(--color-slate);line-height:1.2;margin-top:2px}

.ddbanner.alarm{animation:ddshake .35s steps(2) infinite}
.seedbox{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--color-slate);text-align:center;margin:8px 0;border:1px dashed var(--border-subtle);padding:5px}
.seedbox b{color:var(--color-primary);letter-spacing:2px}
#powHint{font-family:var(--mono);letter-spacing:1px}
.mtile{border:1px solid var(--border-subtle);background:var(--surface-elevated);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:6px 9px;min-height:40px;display:flex;flex-direction:column;justify-content:center;gap:1px;overflow:hidden;position:relative}
.mtile-info{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--color-slate);background:transparent;color:var(--color-slate);font-family:var(--mono);font-size:8px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:.55;transition:opacity .15s}
.mtile-info:hover{opacity:1;border-color:var(--color-ink);color:var(--color-ink)}
@keyframes infoRing{0%,100%{box-shadow:0 0 0 0 rgba(16,29,40,.4)}60%{box-shadow:0 0 0 4px rgba(16,29,40,0)}}
.mtile .mh{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-slate);font-weight:600}
.mtile .mv{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-ink)}
.mtile .ms{font-family:var(--mono);font-size:8px;color:var(--color-slate);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fanTile .mv{font-size:18px}
.wrap{max-width:480px;margin:0 auto;padding:12px 14px 38px;min-height:100vh;display:flex;flex-direction:column}
.actionbar{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.tcentre{border:1px solid var(--border-subtle);background:var(--surface-elevated);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.tch{background:var(--surface-elevated);color:var(--color-ink);font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:2px;padding:8px 12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border-subtle)}
.tclive{color:var(--color-primary);animation:blink 1.2s steps(1) infinite}
.tclines{padding:4px 0}
.tcl{display:flex;gap:10px;padding:6px 12px;font-size:12px;border-top:1px solid var(--border-subtle);align-items:baseline}
.tcl:first-child{border-top:none}
.tct{font-family:var(--mono);font-size:10px;color:var(--color-slate);min-width:42px;font-weight:700;letter-spacing:.5px;background:var(--surface-muted);padding:2px 5px;border-radius:4px;white-space:nowrap}
.tcx{color:var(--color-ink);font-size:12px;line-height:1.4}
.seedbox b{opacity:1}
.strow{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:13px;line-height:1.35}
.strow .si{font-size:15px;flex-shrink:0}
.actionbar #playBtn{margin:0;flex:0 0 auto;padding:8px 16px;font-size:14px}
.actionbar .presbtngp{margin:0;flex:0 0 auto}
.actionbar #talkBtn{margin:0;flex:0 0 auto;padding:8px 12px}
.hubcols{display:block}
.hcol-l>*,.hcol-r>*{margin-bottom:8px}
.trbadge{font-size:11px}
.final-pills{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px;min-height:0}
.fpill{display:inline-flex;align-items:center;gap:2px;font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.3px;padding:2px 6px;border-radius:10px;cursor:pointer;border:1.5px solid;-webkit-tap-highlight-color:transparent;user-select:none;transition:.1s}
.fpill.fp-bonus{background:rgba(104,117,124,.12);color:var(--color-primary);border-color:rgba(104,117,124,.4)}.fpill.fp-bonus:active{background:rgba(104,117,124,.22)}
.fpill.fp-risk{background:rgba(16,29,40,.07);color:var(--color-ink);border-color:rgba(16,29,40,.3)}.fpill.fp-risk:active{background:rgba(16,29,40,.13)}
.fpill.fp-none{background:var(--surface-muted);color:var(--color-slate);border-color:var(--border-subtle)}
.fpill svg{width:10px;height:10px;flex-shrink:0;vertical-align:-.1em}
.fpill .fpico{display:inline-flex;align-items:center;width:10px;height:10px;flex-shrink:0}
.card-popup-ico{width:44px;height:44px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.card-popup-ico svg{width:44px;height:44px}
#squadSils{display:none}
.budget.plenty{background:var(--color-primary);border-color:var(--action-primary-hover)}
.budget.safe{background:var(--color-slate);border-color:var(--color-slate)}
.budget.warn{background:var(--color-ink);border-color:var(--border-strong);border-left:3px solid var(--color-primary)}
.budget.tight{background:var(--color-ink);border-color:var(--border-strong);border-left:3px solid var(--color-slate)}
.budget.debt{background:var(--color-ink);border-left:3px solid var(--color-background);animation:debtPulse 1.2s ease-in-out infinite}
.budget.plenty,.budget.safe{color:var(--color-ink)}
.budget.plenty .v,.budget.safe .v{color:var(--color-ink)}
.budget.plenty .l,.budget.safe .l,.budget.plenty .lim,.budget.safe .lim{color:rgba(16,29,40,.65)}
.opt .trbadge{margin-left:3px}
@media(min-width:760px){
 .wrap{max-width:min(960px,calc(100vw - 32px));padding:14px 20px 48px}
 .hubcols{display:grid;grid-template-columns:1.15fr 0.85fr;gap:16px;align-items:start}
 #intro .formpick{max-width:none;margin:0}
}
@media(min-width:760px){#hub .roundtag{text-align:center}}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-bottom:2px solid var(--border-subtle);padding-bottom:7px;margin-bottom:10px}
.logo{font-family:var(--disp);font-weight:800;line-height:1;text-transform:none;color:var(--color-ink);text-align:center;justify-self:center;grid-column:2;grid-row:1}
.brandmark{position:relative;display:inline-flex;align-items:baseline;background:transparent;border:0;padding:0;font-size:30px;letter-spacing:-.5px}
.brandmark .copa{color:var(--color-ink)}
.brandmark .dot{color:var(--color-slate);opacity:.55}
.brandmark .brand-icon-dot{display:inline-flex;align-items:center;justify-content:center;width:.24em;height:.24em;margin:0 .01em 0 .025em;opacity:1;transform:translateY(.01em);flex:0 0 auto}
.brandmark .brand-icon-dot img{display:block;width:100%;height:100%;object-fit:contain}
.brandmark .life{color:var(--color-primary);background:transparent;padding:0;margin-left:.005em}
/* The header wordmark needs contrast against the dark application background. */
html[data-theme="dark"] .brandmark .copa{color:#FFFFFF}
.tools{display:flex;align-items:center;gap:6px;justify-self:end;grid-column:3}
.langtog{display:flex;border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden;font-family:var(--mono);font-size:10px;font-weight:700}
.langtog button{display:flex;align-items:center;gap:4px;background:transparent;border:none;padding:4px 7px;cursor:pointer;color:var(--color-slate)}.langtog button.on{background:var(--color-ink);color:var(--color-background)}
.langtog img{width:14px;height:10px;display:block;object-fit:cover;image-rendering:auto;border:1px solid rgba(10,17,24,.18)}
.iconbtn{background:var(--surface-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:5px 7px;cursor:pointer;font-size:13px;color:var(--color-ink);box-shadow:var(--shadow-sm);transition:background .14s,border-color .14s,color .14s}
.iconbtn:hover{background:var(--surface-elevated);border-color:var(--color-primary);color:var(--color-primary)}
.budget{text-align:center;font-family:var(--mono);min-width:86px;background:var(--color-ink);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:5px 11px;box-shadow:var(--shadow-sm)}.budget .l{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(243,245,244,.6)}.budget .v{font-weight:700;font-size:26px;line-height:1;color:var(--color-background)}.budget .lim{font-size:8px;letter-spacing:.4px;margin-top:3px;color:rgba(243,245,244,.55);white-space:nowrap}.budget.debt{border-color:var(--border-strong);box-shadow:inset 2px 0 0 var(--color-background)}.budget.low{background:color-mix(in srgb,var(--color-ink) 85%,var(--color-slate))}
.debtladder{display:flex;justify-content:center;gap:2px;margin-top:3px}.debtladder span{font-size:7px;line-height:1;border:1px solid rgba(10,17,24,.25);padding:1px 3px;background:rgba(255,255,255,.35);color:rgba(243,245,244,.7)}.debtladder span.on{background:var(--color-background);color:var(--color-ink)}
h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:.9}
.hero{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:13px;text-align:center}
.cover{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:18px;background:var(--surface-elevated);box-shadow:var(--shadow-sm)}
.cover .est{font-family:var(--mono);font-size:9px;letter-spacing:5px;color:var(--color-slate)}.cover .crest{font-size:36px;margin:4px 0}.cover h1{font-size:clamp(34px,11vw,48px);color:var(--color-ink)}.cover .sub2{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--color-slate);margin-top:6px;text-transform:uppercase}.cover .rule{height:3px;background:var(--color-primary);margin:10px 30px}.cover .blurb{font-size:12px;color:var(--color-slate);line-height:1.5;max-width:32ch;margin:0 auto}
.metaline{font-family:var(--mono);font-size:10px;color:var(--color-slate);letter-spacing:1px;margin-top:24px}
.metaline b{color:var(--color-primary)}
.artnote{border:1px solid var(--border-subtle);background:var(--surface-muted);color:var(--color-slate);font-family:var(--mono);font-size:8px;line-height:1.45;text-align:center;padding:7px 10px;margin-top:-4px;border-radius:var(--radius-sm)}
.contact-patreon-row{display:none}
.patreonbox{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;margin:0;padding:9px 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-elevated);color:var(--color-slate);font-family:var(--mono);font-size:8.5px;line-height:1.35;text-align:left;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;box-sizing:border-box}
.patreonbox b{font-family:var(--disp);font-weight:800;color:var(--color-primary);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.patreonbox:hover{background:var(--surface-muted);border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.patreonbox:active{transform:translateY(1px)}
.patreonicon{display:block;width:18px;height:18px;flex:0 0 18px;background:url("../../assets/icons/patreon.svg") center/contain no-repeat;filter:invert(0%) sepia(0%) saturate(0%) brightness(.15)}
.footer-bar{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 2px;font-family:var(--mono);font-size:10px;color:var(--color-slate);flex-wrap:wrap}
.global-footer-bar{position:static;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px 16px 12px;font-family:var(--mono);font-size:11px;color:var(--color-slate);border-top:1px solid var(--border-subtle);margin-top:8px}
.footer-links-row{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%;flex-wrap:wrap}
.native-version-slot{display:none}
body{padding-bottom:36px}
.footer-link{background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--color-slate);font-family:var(--mono);font-size:9px;cursor:pointer;padding:4px 10px;text-decoration:none;opacity:.75;transition:opacity .12s,border-color .12s,color .12s;display:inline-flex;align-items:center;gap:3px;letter-spacing:.8px;text-transform:uppercase}
.footer-link:hover{opacity:1;border-color:var(--color-primary);color:var(--color-ink)}
a.footer-link{color:var(--color-slate)}
.footer-sep{display:none}
.rights-note{display:block;width:100%;text-align:center;font-size:8px;line-height:1.35;letter-spacing:.2px;opacity:.62}
.patreonicon-sm{display:inline-block;width:13px;height:13px;background:url("../../assets/icons/patreon.svg") center/contain no-repeat;vertical-align:-.15em;margin-right:1px;filter:invert(0%) sepia(0%) saturate(0%) brightness(.15)}
html[data-theme="dark"] .patreonicon,
html[data-theme="dark"] .patreonicon-sm{filter:brightness(0) invert(1)}
.metaline-hdr{display:inline;font-family:var(--mono);font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-slate);opacity:.6;margin-right:5px}
.metaline{font-family:var(--mono);font-size:10px;color:var(--color-slate);letter-spacing:.5px;margin-top:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:6px 10px;background:var(--surface-elevated)}
.foot{text-align:center;color:var(--color-slate);font-size:9px;margin-top:5px;line-height:1.5;opacity:.6}
.resultpatreon{margin-top:24px}
.pickhdr{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--color-slate);margin-bottom:8px}
.formpick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-bottom:4px}
.formpick .fbtn{min-width:0;padding:9px 4px;font-size:12px;position:relative}
.form-dot-preview{opacity:0;visibility:hidden;transform:translateX(-50%) scale(0.7);transition:opacity .14s ease,transform .14s ease;position:absolute;bottom:calc(100% + 7px);left:50%;background:var(--color-ink);color:var(--color-background);border-radius:var(--radius-sm);padding:8px;z-index:99;pointer-events:none;box-shadow:var(--shadow-md)}
.fbtn:hover:not(.locked) .form-dot-preview{opacity:1;visibility:visible;transform:translateX(-50%) scale(1.5)}
.formpick .fbtn.sel{transform:scale(1.05);box-shadow:0 0 0 2px var(--surface-elevated),0 0 0 4px var(--color-primary);z-index:1;position:relative}
#chairpick{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}
#chairpick .fbtn{font-size:12px;padding:6px 5px;text-align:center}
.pickhint{font-size:11px;color:var(--color-slate);margin-top:4px;min-height:16px}
.chairphoto{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--color-ink);flex-shrink:0}
.chairthumb{width:44px;height:44px;object-fit:contain;object-position:center bottom;border-radius:5px;display:block;margin:0 auto 4px;image-rendering:auto;transition:opacity .15s}
.chairbtnlbl{display:block;font-size:11px;line-height:1.2}
.fbtn.chairbtn{display:flex;flex-direction:column;align-items:center;padding:6px 4px}
.fbtn.chairbtn.locked{opacity:.38;filter:grayscale(.8);cursor:not-allowed}
.fbtn.chairbtn.locked:hover{opacity:.38;filter:grayscale(.8)}
.chairpopup{width:100%;max-width:380px;margin:0 auto;position:relative;text-align:center}
.cp-close{position:absolute;top:6px;right:8px;background:var(--surface-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-slate);font-size:20px;line-height:1;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity var(--tr-fast),background var(--tr-fast);z-index:2}
.cp-close:hover{opacity:1;background:var(--surface-elevated);color:var(--color-ink)}
.cpphoto{width:110px;height:143px;object-fit:cover;object-position:top center;border-radius:6px;display:block;margin:14px auto 10px;border:2px solid var(--border-subtle)}
.chairpopup-name{font-family:var(--mono);font-weight:700;font-size:15px;line-height:1.2}
.cp-role-badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--color-slate);margin-top:5px;padding:3px 8px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-bg)}
.chairpopup-desc{font-size:11px;line-height:1.55;color:var(--color-slate);margin:8px 14px 0}
.cp-fx{margin:10px 14px 0;text-align:center}
.cp-fx-hdr{font-family:var(--mono);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;opacity:.7;margin-bottom:5px;margin-top:9px}
.cp-fx-hdr:first-child{margin-top:0}
.cp-fx-item{display:flex;align-items:baseline;justify-content:center;gap:5px;font-family:var(--mono);font-size:10px;line-height:1.6}
.cp-pro .cp-fx-sym{color:var(--color-primary);font-weight:700}
.cp-con .cp-fx-sym{color:var(--color-slate);font-weight:700}
.cp-hl-pro{color:var(--color-primary);font-weight:700}
.cp-hl-con{color:var(--color-slate);font-weight:700}
.cp-hl-neu{color:var(--color-ink);font-weight:700}
.cp-bot-row{display:flex;align-items:center;gap:8px;padding:12px 14px 4px}
.cp-bot-row .cp-nav-btn{flex:0 0 auto}
.cp-bot-row .cp-sel-btn{flex:0 0 auto;background:var(--color-primary);color:#FFFFFF;border-color:var(--color-primary);font-family:var(--mono);font-size:11px;font-weight:700;padding:7px 18px;border-radius:var(--radius-sm);cursor:pointer;border-width:1.5px;transition:all .12s}
.cp-bot-row .cp-sel-btn:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.cp-nav-btn{background:var(--surface-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--color-slate);font-family:var(--mono);font-size:16px;cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:border-color var(--tr-fast),color var(--tr-fast),background var(--tr-fast);flex-shrink:0}
.cp-nav-btn:hover{border-color:var(--color-ink);color:var(--color-ink);background:var(--surface-elevated)}

/* Chairman picker popup: readable modal + stable centred action row */
.chairpopup{
  width:min(560px,calc(100vw - 42px));
  max-width:none;
  padding:18px 22px 20px;
  box-sizing:border-box;
}
.chairpopup .cpphoto{
  width:148px;
  height:190px;
  margin:0 auto 12px;
}
.chairpopup-name{
  font-size:21px;
  letter-spacing:.2px;
}
.cp-role-badge{
  font-size:11px;
  padding:5px 10px;
}
.chairpopup-desc{
  max-width:46ch;
  margin:12px auto 0;
  font-size:14px;
  line-height:1.65;
}
.cp-fx{
  max-width:46ch;
  margin:14px auto 0;
}
.cp-fx-hdr{
  font-size:9px;
  margin-top:12px;
}
.cp-fx-item{
  justify-content:flex-start;
  text-align:left;
  font-size:12px;
  line-height:1.65;
}
.cp-bot-row{
  display:grid;
  grid-template-columns:40px minmax(180px,240px) 40px;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:18px 0 0;
}
.cp-bot-row .cp-sel-btn{
  width:100%;
  min-height:40px;
  padding:10px 16px;
  font-size:12px;
  justify-self:center;
}
.cp-nav-btn,
.cp-nav-spacer{
  width:40px;
  height:40px;
}
.cp-nav-spacer{
  display:block;
}
@media(max-width:560px){
  .chairpopup{
    width:calc(100vw - 28px);
    padding:16px 14px 18px;
  }
  .chairpopup .cpphoto{
    width:128px;
    height:166px;
  }
  .chairpopup-name{font-size:18px}
  .chairpopup-desc{font-size:13px}
  .cp-fx-item{font-size:11px}
  .cp-bot-row{
    grid-template-columns:38px minmax(150px,1fr) 38px;
  }
}
.cp-counter{font-family:var(--mono);font-size:10px;color:var(--color-slate);letter-spacing:.5px;flex:1;text-align:center}
.fbtn{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:1px;background:var(--surface-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--color-ink);padding:11px 4px;cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .12s}
.fbtn:hover{background:var(--surface-bg);border-color:var(--color-slate);color:var(--color-ink)}.fbtn:active{transform:translateY(1px)}.fbtn .sm{display:block;font-family:var(--disp);font-weight:300;font-size:8px;letter-spacing:1px;margin-top:2px;opacity:.7}
.fbtn.sel{background:var(--color-primary);color:#FFFFFF;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(104,117,124,0.22)}
.foot{text-align:center;color:var(--color-slate);font-size:10px;margin-top:6px;line-height:1.5}
.ddbanner{display:flex;align-items:center;justify-content:center;background:rgba(58,71,80,.55);border:1.5px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;margin-bottom:8px}
.ddbanner .ddl,.ddbanner .ddc,.ddbanner .dds{display:none}
.squad-sils{display:flex;gap:4px;align-items:center;justify-content:center}
.ddbanner.urgent{border-color:rgba(86,97,106,.5)}.ddbanner.alarm{border-color:var(--color-ink)}
.slothdr{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:24px}
.slothdr .n{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--color-ink)}.slothdr .nm{font-family:var(--disp);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.5px;flex:1}
/* ===== Button System ===== */
.btn{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:15px;border:none;border-radius:var(--radius-sm);padding:13px 16px;cursor:pointer;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform var(--tr-fast),background var(--tr-fast),box-shadow var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
/* Primary — default CTA, with depth shadow */
.btn-primary,.btn-go{background:var(--color-primary);color:var(--color-ink);box-shadow:0 2px 0 var(--action-primary-hover)}
.btn-primary:hover,.btn-go:hover{background:var(--action-primary-hover)}
.btn-primary:active,.btn-go:active{box-shadow:none}
/* Secondary — outlined, slate border */
.btn-secondary{background:var(--surface-elevated);border:1.5px solid var(--color-slate);color:var(--color-ink)}.btn-secondary:hover{border-color:var(--color-ink);background:var(--surface-muted)}
/* Dark — ink fill */
.btn-dark,.btn-roll,.btn-talk{background:var(--color-ink);color:var(--color-background)}.btn-dark:hover,.btn-roll:hover,.btn-talk:hover{background:color-mix(in srgb,var(--color-ink) 85%,var(--color-slate))}
.btn-roll{font-family:var(--mono);font-weight:700;font-size:18px;letter-spacing:3px}
.btn-talk{margin-top:8px}
/* Ghost — transparent, subtle border */
.btn-ghost{background:transparent;border:1px solid var(--border-default);color:var(--color-ink)}.btn-ghost:hover{border-color:var(--color-slate);background:var(--surface-muted)}
#allBtn{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-background)}
.btn-mini{font-size:12px;padding:9px 10px;letter-spacing:1px}
#draft{overflow:hidden}
.draft-hint{color:var(--color-slate);font-size:12px;text-align:center;padding:4px 16px 0;margin:0;letter-spacing:.3px}
.draft-cols{display:flex;gap:16px;height:calc(100vh - 131px);padding:8px 16px 12px;box-sizing:border-box;overflow:hidden}
.draft-left{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.draft-right{flex:1;min-width:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.draft-right .pitch{width:min(80%, calc((100vh - 195px) * 68 / 92));height:auto;margin-bottom:0}
@media(max-width:640px){.draft-cols{flex-direction:column;height:auto;overflow:visible;padding:8px}.draft-left{width:100%}.draft-right{align-self:auto}.draft-right .pitch{width:100%;height:auto}}
.draft-extra{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.de-sec{background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px 12px;box-shadow:var(--shadow-sm)}
.de-hdr{font-size:9px;letter-spacing:1.2px;font-weight:700;color:var(--color-slate);text-transform:uppercase;margin-bottom:5px}
.de-cnt{opacity:.5;font-weight:400;letter-spacing:0}
.de-row{display:flex;align-items:center;gap:5px;padding:1.5px 0;font-size:11px}
.de-filled{opacity:1}
.de-empty{opacity:.25}
.de-pos-badge{font-size:8.5px;font-weight:700;letter-spacing:.3px;color:var(--color-slate);width:26px;flex-shrink:0}
.de-pname{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.de-trflag{font-size:7.5px;background:rgba(16,29,40,.14);color:var(--color-ink);border-radius:2px;padding:1px 3px;font-weight:700;flex-shrink:0}
.de-ov{font-family:var(--mono);font-weight:700;font-size:11px;min-width:20px;text-align:right;flex-shrink:0}
.de-chair-body{display:flex;gap:8px;align-items:center}
.de-chair-photo{width:38px;height:38px;border-radius:4px;object-fit:cover;border:1px solid rgba(255,255,255,.12);flex-shrink:0}
.de-chair-txt{flex:1;min-width:0}
.de-chair-nm{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.de-chair-pass{font-size:9.5px;color:var(--color-slate);margin-top:2px;line-height:1.35}
.de-chair-lim{font-size:10px;margin-top:3px}
.de-bar-row{display:flex;align-items:center;gap:6px;margin:2px 0}
.de-bar-lbl{font-size:9px;color:var(--color-slate);width:48px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.de-bar-track{flex:1;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.de-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}
.de-bar-val{font-size:10px;font-family:var(--mono);font-weight:700;min-width:20px;text-align:right}
@media(max-width:640px){.draft-extra{display:none}}
.rollstage{text-align:center;padding:0}.rollstage p{color:var(--color-slate);font-size:13px;margin-bottom:10px}
.dicebox{position:relative;height:118px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 auto;max-width:180px}
.dicebox .dface{font-size:58px;z-index:2;color:var(--color-primary);filter:drop-shadow(0 3px 0 rgba(10,17,24,.18))}.dcap{position:absolute;bottom:0;left:50%;width:90px;transform:translateX(-50%);font-family:var(--mono);font-size:9px;line-height:1.35;letter-spacing:1.7px;text-align:center;color:var(--color-slate);text-transform:uppercase}
.dicebox:not(.is-reduced) .dface{animation:copaDiceTumble .28s ease-in-out infinite}.dicebox.is-settled .dface{animation:none;transform:scale(1.08)}.dicebox.is-reduced .dface{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--color-primary) 35%,transparent))}
@keyframes copaDiceTumble{0%{transform:rotate(-9deg) scale(.94)}50%{transform:rotate(8deg) scale(1.06)}100%{transform:rotate(-9deg) scale(.94)}}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{position:relative;background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:10px 11px;cursor:pointer;display:flex;gap:10px;align-items:center;width:100%;color:var(--text-primary);text-align:left;transition:border-color var(--tr-fast),box-shadow var(--tr-fast),background var(--tr-fast);overflow:hidden}
.opt:hover:not(.tooexp){border-color:var(--color-primary);box-shadow:var(--shadow-md);background:var(--surface-bg)}.opt:hover:not(.tooexp) .meta{color:var(--text-primary)}.opt.tooexp{opacity:.72}
.opt.mis{border-color:var(--color-slate);border-style:dashed}
.opt .ovb{width:34px;height:34px;border-radius:4px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:14px;color:#FFFFFF;line-height:1}
.opt .ovb small{font-size:7px;opacity:.85;font-weight:400}
.opt .mid{flex:1;min-width:0}.opt .pn{font-family:var(--disp);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opt .meta{font-family:var(--mono);font-size:9px;color:var(--color-slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .price{flex-shrink:0;text-align:right;font-family:var(--mono)}.opt .price .p{font-weight:700;font-size:17px;color:var(--color-ink);background:var(--color-primary);border-radius:4px;padding:1px 6px}.opt .price .oldp{font-size:9px;color:var(--color-slate);text-decoration:line-through;text-decoration-thickness:2px;margin-bottom:1px}.opt.tooexp .price .p{background:var(--color-ink);color:var(--color-background)}
.opt.bargain{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(104,117,124,.28) inset}
.opt.bargain::after{display:none;content:none}
.opt .price .discount-badge{width:max-content;margin:4px auto 0;padding:2px 5px;border:1px solid color-mix(in srgb,var(--color-primary) 62%,var(--border-default));border-radius:999px;background:color-mix(in srgb,var(--color-primary) 14%,var(--surface-bg));color:var(--status-positive-text);font:900 7px/1 var(--mono);letter-spacing:.04em;text-decoration:none}
.opt-lbar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:4px 0 0 4px}
.optmsg{font-family:var(--mono);font-size:10px;color:var(--color-slate);text-align:center;margin-top:6px;min-height:12px}
#rerollBtn{margin:7px 0 0}
.reroll-desc{display:block;font-family:var(--mono);font-size:9px;color:var(--color-slate);margin-top:3px;opacity:.75}
.opt-sec{font-size:9px;color:var(--color-slate);margin-top:2px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt:hover:not(.tooexp) .opt-sec{color:var(--color-slate)}
.opt-hover-tip{position:absolute;bottom:0;left:3px;right:0;background:rgba(16,29,40,.85);color:#F3F5F4;font-size:9px;font-family:var(--mono);padding:4px 8px;border-radius:0 0 3px 0;opacity:0;transition:opacity .15s;pointer-events:none;line-height:1.5}
.opt:hover:not(.tooexp) .opt-hover-tip{opacity:1}
.cant-lbl{font-size:8px;font-weight:700;color:var(--color-background);background:var(--color-ink);border-radius:2px;padding:1px 4px;margin-top:2px;text-align:center;white-space:nowrap}
.autofill-wrap{margin-top:5px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;opacity:.75}
.autofill-wrap input[type=range]{width:65px;accent-color:var(--color-primary);cursor:pointer}
.styletag{display:none}
.roundtag{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-slate);text-align:center;margin-bottom:8px;min-height:14px;font-weight:600}
@media(max-width:760px){
  body.run-active #logoSlogan,
  body.run-active #hub>.roundtag{display:none!important}
}
.fbtn.locked{opacity:.5;cursor:not-allowed;background:repeating-linear-gradient(45deg,var(--surface-elevated) 0 5px,var(--surface-muted) 5px 10px)}
.fbtn.locked:hover{background:repeating-linear-gradient(45deg,var(--surface-elevated) 0 5px,var(--surface-muted) 5px 10px);color:var(--color-ink);border-color:var(--color-ink)}
.fbtn.locked.sel{color:var(--color-ink);border-color:var(--color-ink)}
.clubrow{padding:0 16px}
.cinput{width:100%;font-family:var(--disp);font-weight:600;font-size:18px;text-align:center;text-transform:uppercase;border:2px solid var(--color-ink);border-radius:5px;padding:9px;background:var(--surface-elevated);color:var(--color-ink);margin-bottom:10px}
.cname-wrap{margin-bottom:8px}
.cname-lbl{display:block;font-family:var(--mono);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-slate);margin-bottom:4px;text-align:left}
.cname-row{display:flex;align-items:stretch;border:2px solid var(--color-ink);border-radius:5px;overflow:hidden;background:var(--surface-elevated)}
.cinput-new{flex:1;font-family:var(--disp);font-weight:600;font-size:17px;text-align:left;border:none;padding:9px 12px;background:transparent;color:var(--color-ink);min-width:0;outline:none}
.cinput-new::placeholder{color:var(--color-slate);opacity:.45;font-weight:400;font-size:15px}
.cname-rand{background:transparent;border:none;border-left:1.5px solid var(--border-subtle);padding:0 12px;cursor:pointer;color:var(--color-slate);transition:background .12s;flex-shrink:0;display:flex;align-items:center}
.cname-rand:hover{background:rgba(10,17,24,.07);color:var(--color-ink)}
@keyframes _diceRoll{0%{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(-180deg) rotateX(90deg) scale(.85)}60%{transform:rotateY(-300deg) rotateX(180deg) scale(1.1)}80%{transform:rotateY(-340deg) rotateX(270deg) scale(.95)}100%{transform:rotateY(-360deg) rotateX(360deg) scale(1)}}
.cname-rand .dice-svg{transition:transform .1s}
.cname-rand:hover .dice-svg{transform:rotateY(25deg) rotateX(-15deg)}
.cname-rand.rolling .dice-svg{animation:_diceRoll .55s cubic-bezier(.4,0,.2,1) both;transform-origin:center center}
.colrow{margin-bottom:8px}
.colrow .cl{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--color-slate);margin-bottom:4px}
.colswatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.cw{aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.1s}
.cw.sel{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}

.sectlbl{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--color-slate);border-bottom:2px solid var(--border-subtle);padding-bottom:3px;margin:8px 0}
.autotog{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--mono);font-size:11px;border:1.5px solid var(--color-ink);border-radius:4px;padding:9px;cursor:pointer;background:var(--surface-elevated)}.autotog.on{background:var(--color-primary);color:#FFFFFF}.autotog .dot{width:9px;height:9px;border-radius:50%;background:var(--color-slate)}.autotog.on .dot{background:#FFFFFF}
/* ===== Modal System ===== */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--overlay-bg);backdrop-filter:blur(2px)}
.sheet{background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:fit-content;min-width:min(320px,calc(100vw - 32px));max-width:min(720px,calc(100vw - 32px));box-shadow:var(--shadow-md);max-height:90vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;display:flex;flex-direction:column}.sheet::-webkit-scrollbar{display:none}
/* Modal shell components */
.modal-hdr{background:var(--color-ink);color:var(--color-background);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.modal-hdr-title{font-family:var(--mono);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;flex:1}
.modal-hdr-close{background:transparent;border:none;color:var(--color-background);cursor:pointer;padding:2px;opacity:.65;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:opacity var(--tr-fast);flex-shrink:0}
.modal-hdr-close:hover{opacity:1}
.modal-body{padding:14px;flex:1;min-height:0;overflow-y:auto}
.modal-footer{padding:0 14px 14px;flex-shrink:0;display:flex;flex-direction:column;gap:6px}
.shop-buy-modal{
  width:min(330px,calc(100vw - 32px));
  padding:18px 16px 14px;
  text-align:center;
}
.shop-buy-modal .kitsub{
  margin:8px 0 4px;
}
.shop-buy-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.shop-buy-actions .btn{
  width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 12px;
  flex-direction:row;
  flex-wrap:nowrap;
  white-space:nowrap;
  line-height:1;
}
.shop-buy-actions .btn-label,
.shop-buy-actions .btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  white-space:nowrap;
}
.shop-buy-actions .btn-icon{
  font-size:15px;
  line-height:1;
  transform:translateY(-.02em);
}
@media(max-width:380px){
  .shop-buy-actions .btn{
    font-size:13px;
    letter-spacing:1px;
    padding-inline:8px;
  }
}
.suspended-modal{
  text-align:center;
  overflow:hidden;
}
.suspended-modal-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin:-16px -16px 0;
  padding:14px 18px;
  border-bottom:1px solid color-mix(in srgb,var(--status-error) 64%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--status-critical) 78%,var(--surface-deep)),var(--surface-deep));
  color:var(--status-on-critical);
  text-align:left;
}
.suspended-modal-icon{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--status-on-critical) 35%,transparent);
  border-radius:9px;
  background:var(--status-error);
  color:var(--status-on-error);
}
.suspended-modal-head>span:last-child{display:grid;gap:4px}
.suspended-modal-head small{color:color-mix(in srgb,var(--status-on-critical) 72%,transparent);font:800 8px/1 var(--mono);letter-spacing:1.4px}
.suspended-modal .suspended-modal-head h4{
  margin:0;
  padding:0;
  background:transparent;
  color:var(--status-on-critical);
  font:850 15px/1.15 var(--disp);
  letter-spacing:0;
  text-transform:none;
}
.suspended-modal p{
  margin:18px auto 12px;
  max-width:440px;
  font-size:13px;
  line-height:1.55;
  text-align:center;
}
.suspended-modal p b{color:var(--status-negative-text)}
.suspended-modal-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 16px 16px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--status-error) 42%,var(--border-subtle));border-radius:8px;background:color-mix(in srgb,var(--status-error) 11%,var(--surface-bg));color:var(--text-primary);font-size:10px;line-height:1.35}
.suspended-modal-note b{color:var(--status-negative-text);font:900 8px/1 var(--mono);letter-spacing:.7px;white-space:nowrap}
.suspended-modal .bact{
  display:flex;
  justify-content:center;
  padding:0 16px 16px;
}
.suspended-modal .btn{
  width:min(180px,100%);
}
/* Wide modal variant */
.sheet.sheet-wide{max-width:min(820px,calc(100vw - 32px))}
.sheet.sheet-bare{background:none;border:none;border-radius:0;box-shadow:none;max-width:none;max-height:none;overflow:visible;padding:0;align-items:center;justify-content:center}
.bulletin .bhead{background:var(--color-ink);color:#FFFFFF;padding:7px 12px;font-family:var(--mono);font-size:9px;letter-spacing:3px;display:flex;justify-content:space-between;text-transform:uppercase}
.bulletin .bmascot{text-align:center;font-size:58px;padding:12px 0 4px;background:var(--surface-elevated)}
.bchairphoto{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--border-strong);display:block;margin:0 auto}
.bulletin .bhl{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:20px;text-align:center;line-height:1;padding:4px 16px;letter-spacing:.5px}.bulletin .bhl.up{color:var(--status-positive-text)}.bulletin .bhl.down{color:var(--status-critical-text)}
.bulletin .bbody{font-family:var(--mono);font-size:12px;text-align:center;color:var(--color-slate);padding:8px 18px 4px;line-height:1.5;min-height:20px}
.bulletin .beff{font-family:var(--mono);font-weight:700;font-size:13px;text-align:center;padding:4px 0 12px}.bulletin .beff.up{color:var(--status-positive-text)}.bulletin .beff.down{color:var(--status-negative-text)}
.cilgin-crisis-modal .bmascot{
  padding:12px 0 2px;
  color:var(--color-slate);
}
.cilgin-crisis-modal .bhl{
  color:#420102!important;
}
.cilgin-crisis-modal .bbody{
  max-width:360px;
  margin:0 auto;
  min-height:0;
}
.crisis-badge{
  width:max-content;
  max-width:calc(100% - 32px);
  margin:2px auto 5px;
  padding:4px 8px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--surface-muted);
  color:var(--color-slate);
  font-family:var(--mono);
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}
.crisis-effect{
  margin:8px 18px 12px;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  background:var(--surface-muted);
  text-align:center;
}
.crisis-effect span{
  display:block;
  color:var(--color-slate);
  font-family:var(--mono);
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}
.crisis-effect b{
  display:block;
  margin-top:2px;
  color:#420102;
  font-family:var(--disp);
  font-size:30px;
  line-height:1;
}
.crisis-actions{
  display:grid;
  gap:8px;
  padding:0 16px 16px;
}
.crisis-actions .btn{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  text-align:left;
  box-shadow:none;
}
.crisis-actions .btn b{
  font-family:var(--mono);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}
.crisis-actions .btn span{
  max-width:58%;
  color:var(--color-slate);
  font-family:var(--mono);
  font-size:9px;
  font-weight:800;
  line-height:1.25;
  text-align:right;
  text-transform:none;
  letter-spacing:0;
}
.crisis-accept{
  background:var(--surface-elevated);
  border-color:var(--border-default);
}
.crisis-object{
  border-color:color-mix(in srgb,#420102 45%,var(--border-default));
  background:color-mix(in srgb,#420102 7%,var(--surface-elevated));
}
.crisis-object b{
  color:#420102;
}
.sheet .bact{padding:0 16px 16px}
.stylelist{padding:12px}
.stylebtn{display:flex;gap:10px;align-items:center;border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:10px;margin-bottom:8px;cursor:pointer;background:var(--surface-elevated);transition:border-color var(--tr-fast),box-shadow var(--tr-fast),background var(--tr-fast)}.stylebtn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);background:var(--surface-bg)}.stylebtn:hover .ssd{color:var(--text-secondary)}.stylebtn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.stylebtn .ssi{font-size:24px}.stylebtn .ssm{flex:1;min-width:0}.stylebtn .sst{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:600;font-size:16px}.stylebtn .sst>span:first-child{min-width:0}.stylebtn .ssd{font-family:var(--mono);font-size:9px;color:var(--color-slate);line-height:1.3}
.stylebtn.disabled{opacity:.38;cursor:not-allowed;filter:saturate(.45)}
.stylebtn.disabled:hover{background:var(--surface-elevated);color:var(--color-ink)}
.stylebtn.disabled:hover .ssd{color:var(--color-slate)}
.talkmodal .kithdr{padding-top:16px}
.talk-sub{max-width:320px;margin:0 auto 4px;line-height:1.45}
.talk-list{display:flex;flex-direction:column;gap:10px;padding:14px 14px 16px}
.talk-choice{width:100%;align-items:flex-start;text-align:left;margin-bottom:0;padding:12px 12px 11px;border-color:var(--border-default);appearance:none;color:var(--color-ink);font:inherit}
.talk-choice .ssi{width:42px;min-height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 42px}
.talk-choice .si{width:36px;height:36px}
.talk-copy{min-width:0}
.talk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.talk-row .sst{line-height:1.1}
.talk-badge{font-family:var(--mono);font-size:8px;font-weight:900;letter-spacing:.8px;line-height:1;border:1px solid currentColor;border-radius:999px;padding:3px 7px;white-space:nowrap;background:color-mix(in srgb,currentColor 7%,var(--surface-elevated))}
.talk-choice .ssd{font-size:10px;line-height:1.35;color:var(--text-secondary)}
.talk-effect{font-family:var(--mono);font-size:10px;font-weight:900;line-height:1.2;margin-top:5px;letter-spacing:.2px}
.talk-choice-risk .ssi,.talk-choice-risk .talk-badge,.talk-choice-risk .talk-effect{color:#DA3D2E}
.talk-choice-safe .ssi,.talk-choice-safe .talk-badge,.talk-choice-safe .talk-effect{color:var(--color-slate)}
.talk-choice-conditional .ssi,.talk-choice-conditional .talk-badge,.talk-choice-conditional .talk-effect{color:var(--color-primary)}
.talk-choice:hover{border-color:currentColor;box-shadow:var(--shadow-md);background:var(--surface-bg)}
.talk-choice:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.tele .thead{background:var(--color-ink);color:#FFFFFF;font-family:var(--mono);font-size:10px;letter-spacing:3px;padding:8px;text-align:center;text-transform:uppercase}
.tele .tscore{display:flex;align-items:center;justify-content:space-around;padding:18px 10px;font-family:var(--mono)}.tele .tt{font-family:var(--disp);font-weight:700;font-size:15px;text-transform:uppercase;flex:1;text-align:center}.tele .tn{font-weight:700;font-size:36px;padding:0 8px}.tele .tv{font-family:var(--mono);font-size:12px;text-align:center;padding:0 18px 12px;min-height:18px}.tele .tv.win{color:var(--color-primary)}.tele .tv.lose{color:var(--color-slate)}.tele .tv.draw{color:var(--color-ink)}
.kitgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:16px}.kit{aspect-ratio:1;border:2px solid var(--color-ink);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:700;transition:.12s}.kit:hover{transform:scale(1.08)}
.kithdr{font-family:var(--disp);font-weight:700;text-transform:uppercase;text-align:center;font-size:18px;padding:14px 0 0}.kitsub{font-family:var(--mono);font-size:10px;text-align:center;color:var(--color-slate);padding:4px 16px 0}

/* ===== v5 ui overhaul ===== */
#intro .cover{padding:0;overflow:hidden;position:relative}
.cover .mascot{width:100%;height:100%;min-height:260px;display:block;margin:0;object-fit:cover;border:none}
.cover .crest{display:none}
.cover .est{font-size:8px;letter-spacing:4px;opacity:.65;margin-bottom:2px}
.cover h1{font-size:clamp(28px,8.5vw,40px)}
.cover .rule{margin:6px 44px}
.cover .blurb{font-size:11px;line-height:1.45}
.hero{gap:8px}
.introrow{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.countrypick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 10px}
.countrypick button{position:relative;min-width:0;border:1.5px solid var(--color-ink);background:var(--surface-elevated);color:var(--color-ink);font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;overflow:hidden}
.generic-country-code{display:inline-grid;place-items:center;min-width:24px;height:18px;padding:0 4px;border:1px solid var(--border-default);border-radius:3px;background:var(--surface-muted);color:var(--color-ink);font-family:var(--mono);font-size:8px;font-weight:900;line-height:1;letter-spacing:.5px}
.countrypick .generic-country-code{width:34px;height:23px;font-size:9px}
.countrypick button.on{background:var(--surface-elevated);color:var(--color-ink);border-color:var(--color-ink);border-width:2px;box-shadow:0 0 0 2px rgba(104,117,124,.2)}
.countrypick button.on::after{content:"✓";position:absolute;top:2px;right:3px;font-size:8px;font-weight:800;color:var(--color-primary);line-height:1}
.countrypick img{width:24px;height:16px;object-fit:cover;border:1px solid rgba(10,17,24,.22);background:#FFFFFF}
.countrypick button.country-new.on::after{top:auto;right:5px;bottom:4px}
.countrypick button.locked{cursor:not-allowed;color:var(--disabled-text);background:var(--disabled-bg)}
.countrypick button.locked img{filter:saturate(.55) contrast(.9);opacity:.82}
.countrypick button.locked::before{content:"";position:absolute;inset:0;background:rgba(243,245,244,.44);z-index:1}
.countrypick button.locked::after{content:"🔒";position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);z-index:2;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border-default);border-radius:50%;background:var(--surface-elevated);box-shadow:var(--shadow-sm);font-size:14px;line-height:1}
.countryhint{font-family:var(--mono);font-size:8px;letter-spacing:.8px;text-transform:uppercase;color:var(--color-slate);margin:-5px 0 8px;text-align:center}
.countrypick button.locked{cursor:not-allowed;color:var(--disabled-text);background:var(--disabled-bg);filter:grayscale(.35)}
.countrypick button.locked img{filter:grayscale(1) saturate(.45) contrast(.9);opacity:.72}
.countrypick button.locked::before{background:rgba(104,117,124,.24);pointer-events:none}
.countrypick button.locked::after{content:"";transform:translate(-50%,-58%);width:21px;height:21px;border:0;border-radius:0;background:rgba(31,43,52,.68);box-shadow:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1.2c.7 0 1.3.6 1.3 1.3v8.4c0 .7-.6 1.3-1.3 1.3H5.8c-.7 0-1.3-.6-1.3-1.3v-8.4c0-.7.6-1.3 1.3-1.3H7Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1.2c.7 0 1.3.6 1.3 1.3v8.4c0 .7-.6 1.3-1.3 1.3H5.8c-.7 0-1.3-.6-1.3-1.3v-8.4c0-.7.6-1.3 1.3-1.3H7Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.introrow .cinput{margin:0;flex:1}
.introrow .seedwrap{flex:0 0 96px;display:flex;flex-direction:column;justify-content:center;border:1.5px dashed var(--border-subtle);background:var(--surface-elevated);padding:3px 8px}
.introrow .seedwrap label{font-family:var(--mono);font-size:7px;letter-spacing:2px;text-transform:uppercase;color:var(--color-slate)}
.introrow .seedwrap input{width:100%;border:none;background:transparent;font-family:var(--mono);font-size:12px;color:var(--color-slate);text-transform:none;padding:1px 0}
.introrow .seedwrap input::placeholder{color:var(--color-slate);opacity:.5}
.seedlow{max-width:150px;margin:10px auto 6px;border:1.5px dashed var(--border-subtle);background:var(--surface-elevated);padding:4px 8px;text-align:left}
.seedlow label{display:block;font-family:var(--mono);font-size:7px;letter-spacing:2px;text-transform:uppercase;color:var(--color-slate)}
.seedlow input{width:100%;border:none;background:transparent;font-family:var(--mono);font-size:12px;color:var(--color-slate);padding:1px 0}
#budgetBox.introhide{display:none}
#hubPitch{width:100%;max-width:none;margin:0 auto 8px}
.runid{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#FFFFFF;background:var(--color-ink);border:2px solid var(--color-ink);padding:7px 10px;margin-bottom:8px}
.runid .ri-emoji{font-size:15px}
.btn-pres{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--color-ink);color:var(--color-background);border:1px solid var(--border-subtle);font-family:var(--disp);font-weight:700;letter-spacing:1px;padding:8px 13px;line-height:1.05;width:auto;flex:0 0 auto;cursor:pointer;text-transform:uppercase;transition:background var(--tr-fast)}
.btn-pres:hover:not(:disabled){background:color-mix(in srgb,var(--color-ink) 85%,var(--color-slate))}
.btn-pres .pmain{font-size:12px}
.btn-pres .psub{font-family:var(--mono);font-weight:400;font-size:8px;letter-spacing:.5px;opacity:.7;text-transform:none}
.btn-pres:disabled{opacity:.38;cursor:not-allowed}
.chairchip{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:1px 5px;margin-right:4px}
.actionbar #playBtn{padding:14px 22px;font-size:17px;letter-spacing:2px;box-shadow:0 2px 4px rgba(10,17,24,.25)}
.actionbar #playBtn:active{box-shadow:0 1px 0 #AE3D28}
.autotog{flex:0 0 auto;gap:7px;padding:7px 10px}
.autotog .dot{order:2;width:30px;height:16px;background:var(--color-slate);position:relative;transition:.15s;flex-shrink:0}
.autotog .dot::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:#FFFFFF;transition:.15s}
.autotog.on .dot{background:var(--color-primary)}
.autotog.on .dot::after{left:16px}
.autotog #autoLbl{order:1;font-weight:700;font-size:10px;letter-spacing:1px}
#fanTile .mv{font-size:15px;display:flex;align-items:center;gap:5px}
#fanTile .fanlbl{font-family:var(--disp);font-weight:600;font-size:11px}
.tcl.news .tct{color:var(--color-primary);min-width:auto;font-size:12px}

.hub-action-panel{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-elevated);box-shadow:var(--shadow-sm);padding:6px;margin-bottom:8px}
.hub-action-panel .actionbar{display:flex;gap:8px;align-items:stretch;margin:0}
.actionbar #autoTog{flex:1 1 100%}
/* hub stat strip: kasa(×2) + 3 minitiles in one 4-col row */
.hub-stat-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:6px;margin-bottom:8px;align-items:stretch}
.hub-stat-row .kasa-card{margin-bottom:0;min-height:0}
/* vsbar inside hcol-l */
#hub .hcol-l>.vsbar{margin-bottom:8px;width:100%}
/* pitch-area: pitch + cardrow together */
.pitch-area{display:flex;flex-direction:column;gap:0}
.pitch-overlay #cardrow{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:3px 0 0;min-height:0;max-width:180px;pointer-events:auto}
.pitch-overlay #cardrow .card{max-width:100%;font-size:8px;padding:3px 6px;background:rgba(255,255,255,.92);color:var(--color-ink);border-color:rgba(16,29,40,.22);box-shadow:0 1px 3px rgba(10,17,24,.15)}
.pitch-overlay #cardrow .card b{font-size:9px}
.pitch-overlay #cardrow .card .tier{font-size:7px}
#finalPills{display:none}
#hubBudgetSlot .budget-rows{display:none}
@media(max-width:520px){.countrypick{grid-template-columns:repeat(3,minmax(0,1fr))}.countrypick button{font-size:7px}}
@media(max-width:480px){
 .budget{order:2;margin-left:auto;min-width:72px;padding:4px 8px}
 .budget .v{font-size:20px}
 .tools{order:3;margin-left:0}
 .logo{order:1}
}

/* ===== v6 ui ===== */
.bigbtn{font-size:18px;padding:16px;letter-spacing:2px}
.introback{background:transparent;border:none;color:var(--color-slate);font-family:var(--mono);font-size:11px;letter-spacing:1px;cursor:pointer;margin-bottom:6px;padding:4px 0}
.setuphdr{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:1px;color:var(--color-ink);margin-bottom:10px;text-align:center}
.cover .mascot{max-width:none}
.postcard{padding:20px 20px 16px;text-align:center}
.pc-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--color-slate);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:6px}
.pc-eyebrow::before,.pc-eyebrow::after{content:"";display:block;height:1px;width:24px;background:var(--border-default)}
.pc-band{background:var(--surface-muted);color:var(--color-slate);font-family:var(--mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;padding:7px 12px;border-bottom:1px solid var(--border-subtle);text-align:center}
.pc-club-edit{width:min(100%,290px);margin:8px auto 5px;text-align:left}
.pc-club-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 3px}
.pc-club-label{display:block;margin:0 0 3px 2px;color:var(--color-slate);font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:1.5px;line-height:1;text-transform:uppercase}
.pc-club-label-row .pc-club-label{margin:0}
.pc-club-count{color:var(--color-slate);font-family:var(--mono);font-size:8px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.pc-club-row{display:flex;min-height:38px;overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-elevated);transition:border-color var(--tr-fast),box-shadow var(--tr-fast)}
.pc-club-row:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--focus-ring)}
.pc-club-row.invalid{border-color:var(--color-danger,#420102);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger,#420102) 18%,transparent)}
.pc-club-input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--color-ink);font-family:var(--disp);font-size:clamp(15px,4.8vw,21px);font-weight:800;letter-spacing:.35px;line-height:1;padding:7px 9px;text-transform:uppercase;text-overflow:ellipsis}
.pc-club-input::placeholder{color:var(--color-slate);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.6}
.pc-club-error{min-height:13px;margin:3px 2px 0;color:var(--color-danger,#420102);font-size:9px;line-height:1.3}
.pc-club-rand{min-width:38px;padding:0;justify-content:center;background:var(--surface-muted)}
.pc-club-rand:focus-visible{outline:2px solid var(--color-primary);outline-offset:-3px}
.pc-team{font-family:var(--disp);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:1px;color:var(--color-ink);margin:4px 0 4px}
.pc-sub{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--color-slate);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:8px}
.pc-meta-chip{display:inline-flex;align-items:center;background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:20px;padding:2px 8px;font-size:9px;color:var(--color-slate);font-family:var(--mono);letter-spacing:.5px}
.pc-debt{font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--color-ink);background:var(--surface-muted);border:1px solid var(--border-default);border-left:3px solid var(--color-slate);border-radius:var(--radius-sm);margin:0 0 10px;padding:8px 12px;text-align:left}
.pc-debt-amount{color:#DA3D2E;font-weight:900}
@keyframes debtPulse{0%,100%{box-shadow:0 0 0 0 rgba(86,97,106,.3)}60%{box-shadow:0 0 0 5px rgba(86,97,106,0)}}
.pc-xi{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 0;text-align:left}
.pc-pl{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border-subtle);background:var(--surface-elevated);border-radius:var(--radius-sm);padding:5px 9px;font-family:var(--mono);font-size:11px;transition:background var(--tr-fast)}
.pc-pl:hover{background:var(--surface-muted)}
.pc-pl .pp{color:var(--color-slate);font-weight:700;margin-right:6px;font-size:9px;letter-spacing:.5px}
.pc-pl .po{font-weight:700;color:var(--color-primary)}
/* ===== captain picker cards ===== */
.cap-card{position:relative;display:flex;flex-direction:column;gap:4px;overflow:hidden;background:var(--surface-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px;cursor:pointer;transition:border-color var(--tr-fast),box-shadow var(--tr-fast),background var(--tr-fast);text-align:left;width:100%}
.cap-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);background:var(--surface-muted)}
.cap-card-sel{border-color:var(--color-primary)!important;background:color-mix(in srgb,var(--color-primary) 8%,var(--surface-elevated))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}
.cap-card-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cap-card-name{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--color-ink);flex:1;min-width:0}
.cap-card-badge{display:inline-flex;align-items:center;gap:2px;background:var(--surface-muted);color:var(--color-slate);border:1px solid var(--border-subtle);border-radius:20px;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.5px;padding:1px 5px;flex-shrink:0}
.cap-card-check{display:inline-flex;align-items:center;color:var(--color-primary);flex-shrink:0}
.cap-card-meta{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--color-slate)}
.cap-card-power{display:inline-flex;align-items:center;justify-content:center;min-width:25px;padding:2px 5px;border-radius:6px;background:rgba(10,17,24,.9);color:var(--cap-power)!important;font-weight:950;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cap-power) 42%,transparent),0 2px 8px rgba(10,17,24,.18)}
@media(max-width:480px){.cap-grid{grid-template-columns:1fr!important}}

#intro .cover .est,#intro .cover h1,#intro .cover .sub2,#intro .cover .rule,#intro .cover .blurb{display:none}
#startBtn{background:var(--color-primary)}#startBtn:hover{background:var(--action-primary-hover)}
.postcard .btn-go{background:var(--color-primary)}.postcard .btn-go:hover{background:var(--action-primary-hover)}

/* Squad-ready review: one compact tactical summary before the cup starts. */
.postcard{box-sizing:border-box;width:min(680px,calc(100vw - 64px));max-width:100%;overflow-x:hidden;padding:16px 16px 14px}
.postcard .pc-sub{flex-wrap:wrap;margin:8px 0 10px;gap:5px}
.pc-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:9px;text-align:left}
.pc-insights article{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;min-width:0;padding:10px;border:1px solid color-mix(in srgb,var(--insight-tone,var(--color-slate)) 48%,var(--border-subtle));border-radius:9px;background:color-mix(in srgb,var(--insight-tone,var(--color-slate)) 15%,var(--surface-bg));overflow:hidden}
.pc-insights article::before{position:absolute;inset:0 auto 0 0;width:3px;background:var(--insight-tone,var(--color-slate));content:""}
.pc-insights small{grid-column:1/-1;color:var(--color-slate);font:800 7px/1.1 var(--mono);letter-spacing:.08em}.pc-insights b{min-width:0;overflow:hidden;color:var(--text-primary);font:800 10px/1.15 var(--mono);text-overflow:ellipsis;white-space:nowrap}.pc-insights em{color:var(--insight-tone);font:900 13px/1 var(--mono);font-style:normal}
.pc-insights .is-strong,.pc-insights .is-safe{--insight-tone:var(--status-positive-text)}.pc-insights .is-risk{--insight-tone:var(--status-warning-text)}.pc-insights .is-debt{--insight-tone:var(--status-negative-text)}
.pc-mini-pitch{position:relative;height:286px;margin:0 0 9px;overflow:hidden;border:1px solid #4E9B65;border-color:color-mix(in srgb,var(--status-success) 44%,var(--border-default));border-radius:12px;background:#1F6B45;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--field-grass) 78%,var(--surface-dark)),color-mix(in srgb,var(--field-grass) 45%,var(--surface-dark)));box-shadow:inset 0 0 45px rgba(10,17,24,.28)}
.pc-mini-pitch::before,.pc-mini-pitch::after{position:absolute;inset:7px;border:1px solid rgba(243,245,244,.24);border-color:color-mix(in srgb,#F3F5F4 24%,transparent);border-radius:7px;content:""}.pc-mini-pitch::after{inset:50% 7px auto;height:1px;border:0;background:rgba(243,245,244,.24);background:color-mix(in srgb,#F3F5F4 24%,transparent)}
.pc-pitch-line{position:absolute;z-index:1;pointer-events:none}.pc-pitch-circle{left:50%;top:50%;width:58px;height:58px;border:1px solid rgba(243,245,244,.25);border-color:color-mix(in srgb,#F3F5F4 25%,transparent);border-radius:50%;transform:translate(-50%,-50%)}.pc-pitch-box-top,.pc-pitch-box-bottom{left:50%;width:42%;height:18%;border:1px solid rgba(243,245,244,.25);border-color:color-mix(in srgb,#F3F5F4 25%,transparent);transform:translateX(-50%)}.pc-pitch-box-top{top:7px;border-top:0}.pc-pitch-box-bottom{bottom:7px;border-bottom:0}
.pc-mini-player.pc-pl{position:absolute;z-index:3;left:var(--pc-x);top:var(--pc-y);display:grid;justify-items:center;width:auto;min-width:42px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);box-shadow:none;cursor:pointer}
.pc-mini-player.pc-pl:hover{z-index:4;background:transparent;transform:translate(-50%,-54%)}
.pc-mini-player b{display:grid;place-items:center;width:28px;height:28px;border:2px solid rgba(243,245,244,.78);border-color:color-mix(in srgb,#F3F5F4 78%,transparent);border-radius:50%;background:#0A1118;color:var(--pc-tone)!important;box-shadow:0 3px 12px rgba(10,17,24,.36);font:900 9px/1 var(--mono)}
.pc-mini-player small{display:block;max-width:62px;margin-top:3px;overflow:hidden;padding:2px 5px;border-radius:4px;background:rgba(10,17,24,.72);color:#F3F5F4;font:800 7px/1 var(--mono);text-overflow:ellipsis;white-space:nowrap}
.pc-warning-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:9px;text-align:left}.pc-warning{--warning-tone:var(--status-warning-text);display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:7px;min-width:0;padding:8px;border:1px solid #806000;border-color:color-mix(in srgb,var(--warning-tone) 32%,var(--border-subtle));border-radius:8px;background:#27343C;background:color-mix(in srgb,var(--warning-tone) 7%,var(--surface-bg))}.pc-warning>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#3A4750;background:color-mix(in srgb,var(--warning-tone) 16%,var(--surface-elevated));color:var(--warning-tone);font:900 11px/1 var(--mono)}.pc-warning p{display:grid;gap:3px;margin:0}.pc-warning b{color:var(--text-primary);font:800 8px/1 var(--mono);letter-spacing:.05em}.pc-warning small{color:var(--text-secondary);font-size:8px;line-height:1.3}.pc-warning.is-danger{--warning-tone:var(--status-negative-text);background:#420102}.pc-warning.is-good{--warning-tone:var(--status-positive-text);background:#1F6B45}
.postcard .pc-club-edit{width:100%;margin:7px 0 6px}.postcard .bact{padding:0!important}.postcard .bact .btn{width:100%;min-height:48px}
@media(max-width:520px){
  .postcard{width:calc(100vw - 44px);padding:11px 10px 10px}
  .pc-insights{gap:4px}.pc-insights article{padding:8px 6px}.pc-insights small{font-size:6px}.pc-insights b{font-size:8px}.pc-insights em{font-size:11px}
  .pc-mini-pitch{height:min(53dvh,330px)}
  .pc-mini-player b{width:25px;height:25px;font-size:8px}.pc-mini-player small{max-width:50px;font-size:6px}
  .pc-warning-list{grid-template-columns:1fr}
}

/* ===== dice ===== */
.dsvg{vertical-align:middle;margin-right:6px;filter:drop-shadow(0 2px 0 #3A4750);flex-shrink:0}
.btn-roll{display:flex;align-items:center;justify-content:center}

/* ===== debt warning flash ===== */
@keyframes debtflash{0%,100%{opacity:1}50%{opacity:.22}}
.debtwarn.danger{animation:debtflash .9s ease-in-out infinite}


/* ===== card flip animation ===== */
.cardtile{
  animation: cardFlipIn 0.35s ease-out both;
  transform-origin: center top;
}
@keyframes cardFlipIn{
  0%{opacity:0;transform:rotateY(-90deg) scale(.9);}
  60%{transform:rotateY(8deg) scale(1.02);}
  100%{opacity:1;transform:rotateY(0) scale(1);}
}
.cardtile:nth-child(1){animation-delay:.05s}
.cardtile:nth-child(2){animation-delay:.15s}

/* ===== goal flash animation ===== */
@keyframes goalFlash{0%{box-shadow:0 0 0 0 rgba(104,117,124,.9)}50%{box-shadow:0 0 18px 8px rgba(104,117,124,.6);background:#4E9B65;color:#101D28}100%{box-shadow:none}}
.roundel.goal-flash{animation:goalFlash 1.2s ease-out forwards}

/* ===== scout button ===== */
.vsscout{background:var(--surface-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:4px 8px;cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:4px;transition:border-color var(--tr-fast),background var(--tr-fast);margin:0 auto 1px;color:var(--color-slate)}
.vsscout:hover{background:var(--surface-muted);border-color:var(--color-primary);color:var(--color-ink)}
.vsscout .vslbl{font-family:var(--mono);font-size:8px;letter-spacing:1px;font-weight:700;display:block;text-transform:uppercase}
.vsscout-animated{overflow:visible}.vsscout-ring{transform-origin:8.5px 8.5px;animation:vsScoutPulse 1.8s ease-out infinite}.vsscout-scan{animation:vsScoutScan 1.4s ease-in-out infinite}
@keyframes vsScoutPulse{50%{opacity:.42;transform:scale(1.16)}}@keyframes vsScoutScan{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
body.reduced-motion .vsscout-ring,body.reduced-motion .vsscout-scan{animation:none}

/* ===== settings dropdown ===== */
.settingswrap{position:relative}
.settingsdrop{position:absolute;right:0;left:auto;top:calc(100% + 6px);background:var(--surface-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px;z-index:200;min-width:188px;box-shadow:var(--shadow-md)}
@media(max-width:600px){.settingsdrop{position:fixed;top:52px;right:8px;left:8px;width:auto;min-width:unset;max-width:none}}
.sd-group{margin-bottom:8px}
.sd-group:last-child{margin-bottom:0}
.sd-hdr{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--color-slate);opacity:.7;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid var(--border-subtle)}
.sdgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.sdgrid.langgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.sdbtn{padding:7px 5px;background:var(--surface-bg);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--text-primary);transition:border-color var(--tr-fast),background var(--tr-fast);line-height:1}
.sdbtn:hover{border-color:var(--color-primary);background:var(--surface-elevated)}
.sdbtn.on{background:var(--color-ink);color:var(--color-background);border-color:var(--color-ink)}
.sdbtn.langbtn img{width:13px;height:9px}
.sdbtn.langbtn .generic-country-code{min-width:18px;width:18px;height:13px;padding:0;font-size:6px}
.sdbtn.langbtn{min-width:0;padding-inline:3px;gap:2px}
.sdbtn.langbtn span{white-space:nowrap}
.sdbtn.sd-full{width:100%;padding:7px 8px;justify-content:flex-start;gap:6px;font-size:9px;letter-spacing:.5px;text-transform:uppercase}
.settings-advanced-btn{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-height:38px;
  overflow:hidden;
}
.settings-advanced-btn>svg{
  display:block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.settings-advanced-btn>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.settings-advanced-btn>span:last-child{overflow:visible}
.sdrow{width:100%;text-align:left;font-size:12px}
.sdrow.iconbtn{display:flex;align-items:center;gap:6px;font-family:var(--mono);letter-spacing:.5px}

/* ===== player names on roundel ===== */
.roundel .rname{display:block;font-size:7px;font-weight:700;letter-spacing:-.3px;line-height:1;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:center;text-transform:uppercase}

/* ===== run-end unlocks ===== */
.runUnlocks{background:var(--color-primary);border:2px solid var(--color-ink);border-radius:5px;padding:10px 14px;margin:10px 0;text-align:center}
.rUnlockItem{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.5px;padding:3px 0}

/* ===== landing mechanics ===== */
.mechanics{padding:10px 0 4px;border-top:2px solid var(--color-ink);margin-top:8px;text-align:left}
.mstep{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border-subtle)}
.mstep:last-of-type{border-bottom:none}
.mn{font-family:var(--mono);font-size:10px;color:var(--color-slate);letter-spacing:2px;flex-shrink:0;min-width:22px;padding-top:2px}
.mt{font-family:var(--disp);font-weight:700;font-size:clamp(16px,4.5vw,20px);line-height:1.2}
.mt mark{background:var(--color-ink);color:var(--surface-default);padding:0 4px;font-style:normal;border-radius:2px}
.mstats{font-family:var(--mono);font-size:9px;color:var(--color-slate);letter-spacing:1px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px;padding-top:8px;border-top:1px solid var(--border-subtle)}
.mstats b{color:var(--color-primary)}

/* ===== Copa Rehberi toggle ===== */
.howto-wrap{margin-top:16px;text-align:left;border-top:1px solid var(--border-subtle);padding-top:12px}
.howto-toggle{background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--color-slate);font-family:var(--mono);font-size:9px;letter-spacing:.5px;cursor:pointer;padding:0 10px;height:34px;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;transition:border-color var(--tr-fast),color var(--tr-fast),background var(--tr-fast)}
.howto-toggle:hover{border-color:var(--color-slate);color:var(--color-ink);background:var(--surface-muted)}
.howto-toggle::before{content:none}
.howto-toggle.open::before{content:none}
.howto-body{padding:6px 0 4px;display:flex;flex-direction:column;gap:0}
.howto-step{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.howto-step:last-child{border-bottom:none}
.hwi{display:flex;justify-content:center;align-items:center;line-height:0;flex-shrink:0;width:40px;height:40px;border:1px solid var(--border-subtle);background:transparent}
.howto-n{font-family:var(--mono);font-size:9px;color:var(--color-slate);letter-spacing:2px;margin-right:5px}
.hwt{display:block;font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--color-ink);margin-bottom:3px;text-align:left}
.hwd{font-size:11px;color:var(--color-slate);line-height:1.5;margin:0;text-align:left}
.hwd em{font-style:italic;opacity:.88;font-size:.95em}
/* ===== Howto modal — modern 2-col card layout ===== */
.howto-modal-shell{display:flex;flex-direction:column;width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 48px);background:var(--surface-elevated);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 64px rgba(16,29,40,.22)}
.howto-mhdr{background:var(--surface-elevated);color:var(--color-ink);padding:16px 20px;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;border-bottom:1px solid var(--border-subtle)}
.howto-mhdr-title{display:block;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--color-ink)}
.howto-mhdr-sub{display:block;font-family:var(--mono);font-size:10px;color:var(--color-slate);margin-top:5px;letter-spacing:.3px}
.howto-mhdr-close{background:transparent;border:none;color:var(--color-slate);cursor:pointer;font-size:22px;line-height:1;padding:2px 4px;opacity:.65;border-radius:4px;transition:opacity var(--tr-fast);display:flex;align-items:center;flex-shrink:0;margin-left:12px}
.howto-mhdr-close:hover{opacity:1;color:var(--color-ink)}
.howto-mbody{overflow-y:auto;padding:16px;flex:1}
.howto-mgrid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:540px){.howto-mgrid{grid-template-columns:1fr 1fr}}
.howto-mcard{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px;background:var(--surface-bg)}
.howto-mcard-top{display:flex;align-items:flex-start;gap:10px}
.howto-mcard-title-group{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;padding-top:22px}
.howto-mcard-num{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:2px;color:var(--color-primary);display:block}
.howto-mcard .hwt{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--color-ink);line-height:1.3}
.howto-mcard .hwd{font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--color-slate);margin:0}
.howto-mico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-elevated);flex-shrink:0;line-height:0}
.howto-mfoot{padding:12px 16px;border-top:1px solid var(--border-subtle);flex-shrink:0;display:flex;justify-content:center}
.fbtn-check-ico{position:absolute;bottom:5px;right:5px;color:var(--color-primary);pointer-events:none}
.formpick .fbtn-check-ico{right:auto;left:5px}
.chair-info-btn{position:absolute;top:4px;left:4px;background:none;border:1px solid var(--border-subtle);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-slate);padding:0;z-index:3;transition:border-color var(--tr-fast),color var(--tr-fast)}
.chair-info-btn:hover{border-color:var(--color-slate);color:var(--color-ink)}

/* ===== pitch overlay (style + captain chips) ===== */
.pitch-overlay{position:absolute;top:14px;left:16px;display:flex;flex-direction:column;gap:3px;z-index:10;pointer-events:none;max-width:50%}
.pitch-overlay .overlay-chip{pointer-events:auto;font-size:8px;padding:2px 5px;border-radius:3px;line-height:1.4;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitch-overlay .cap-chip{font-size:8px}
/* ===== trust tile ===== */
#trustTile .mv{font-size:14px;letter-spacing:3px;font-family:var(--mono)}
#powTile .mv{font-size:19px!important;line-height:1!important}
/* ===== kasa card ===== */
.kasa-card{border:1px solid var(--border-subtle);border-radius:12px;padding:8px 12px 6px;margin-bottom:8px;display:flex;flex-direction:column;gap:0;min-height:92px;box-shadow:var(--shadow-sm);transition:background .3s,border-color .3s,color .3s;font-variant-numeric:tabular-nums;position:relative;overflow:hidden;background:var(--surface-elevated);color:var(--color-ink)}
.kasa-card.kasa-deep-debt{background:#DA3D2E;border-color:#DA3D2E;color:#FFFFFF}
.kasa-card.kasa-debt{background:#DA3D2E;border-color:#DA3D2E;color:#FFFFFF}
.kasa-card.kasa-zero{background:#F24A28;border-color:#F24A28;color:#101D28}
.kasa-card.kasa-positive{background:#F25F40;border-color:#F24A28;color:#101D28}
.kasa-card.kasa-rich{background:#F25F40;border-color:#4E9B65;color:#0A1118}
.kasa-card.kasa-deep-debt .kasa-status-badge,
.kasa-card.kasa-debt .kasa-status-badge{background:rgba(255,255,255,.22);color:#FFFFFF}
.kasa-card.kasa-zero .kasa-status-badge,
.kasa-card.kasa-positive .kasa-status-badge,
.kasa-card.kasa-rich .kasa-status-badge{background:rgba(16,29,40,.15);color:#101D28}
.kasa-card.kasa-deep-debt .kasa-bar-track,
.kasa-card.kasa-debt .kasa-bar-track{background:rgba(255,255,255,.28)}
.kasa-card.kasa-zero .kasa-bar-track,
.kasa-card.kasa-positive .kasa-bar-track,
.kasa-card.kasa-rich .kasa-bar-track{background:rgba(16,29,40,.18)}
.kasa-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.kasa-top-left{display:flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.7}
.kasa-lbl{letter-spacing:1.5px}
.kasa-status-badge{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 7px;border-radius:4px;line-height:1}
.kasa-main-val{font-family:var(--mono);font-weight:900;font-size:23px;line-height:.95;letter-spacing:-1px;margin-bottom:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.legacy-cash-chip{display:inline-flex;align-items:center;gap:3px;border:1px solid currentColor;border-radius:999px;background:rgba(255,255,255,.28);padding:2px 6px;font-family:var(--mono);font-size:9px;font-weight:900;line-height:1;letter-spacing:.2px;white-space:nowrap;vertical-align:middle}
.kasa-zero .legacy-cash-chip,.kasa-positive .legacy-cash-chip,.kasa-rich .legacy-cash-chip{background:rgba(16,29,40,.12)}
.budget .legacy-cash-chip{margin:0 auto 3px;padding:2px 5px;font-size:8px;color:var(--color-primary);background:rgba(104,117,124,.12)}
.legacy-kasa-title{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}
.legacy-title-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:var(--color-ink);
}
.legacy-title-icon svg{
  width:20px!important;
  height:20px!important;
}
.legacy-title-icon svg ellipse{
  display:none;
}
.legacy-kasa-sub{
  margin-bottom:13px!important;
}
.legacy-kasa-list{
  gap:10px!important;
}
.legacy-choice{
  position:relative;
  padding-right:70px!important;
}
.legacy-choice-badge{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:3px 7px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--surface-muted);
  color:var(--color-slate);
  font-family:var(--mono);
  font-size:8px;
  font-weight:900;
  line-height:1;
  letter-spacing:.65px;
  white-space:nowrap;
}
.legacy-choice-badge.legacy-risk{
  border-color:rgba(66,1,2,.22);
  color:var(--danger);
  background:rgba(66,1,2,.06);
}
.legacy-choice-badge.legacy-balanced{
  border-color:rgba(104,117,124,.24);
  color:var(--action-text);
  background:rgba(104,117,124,.08);
}
.legacy-choice-badge.legacy-store{
  border-style:dashed;
}
@media(max-width:460px){
  .legacy-choice{
    padding-right:12px!important;
    padding-top:30px!important;
  }
  .legacy-choice-badge{
    left:12px;
    right:auto;
    top:9px;
  }
}
.kasa-sub{font-family:var(--mono);font-size:8px;opacity:.68;letter-spacing:.3px;margin-bottom:5px}
.kasa-metrics{display:flex;align-items:flex-start;gap:0;margin-bottom:4px}
.kasa-metric{flex:1;display:flex;flex-direction:column;gap:1px}
.kasa-metric:last-child{text-align:right}
.kasa-metric-lbl{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;opacity:.62}
.kasa-metric-val{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:-.3px}
.kasa-metric-sep{width:1px;background:currentColor;opacity:.16;margin:0 8px;align-self:stretch}
.kasa-bar-wrap{margin-top:auto;padding-top:2px}
.kasa-bar-track{position:relative;height:4px;border-radius:3px;background:rgba(122,133,139,.18);overflow:visible}
.kasa-bar-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:currentColor;border:2px solid rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(10,17,24,.25);transition:left .4s ease}
/* ===== hide hubBudgetSlot in hub ===== */
#hubBudgetSlot{width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
/* ===== howto title row ===== */
.howto-mcard-title-row{display:flex;align-items:baseline;gap:6px}
/* ===== music button active state ===== */
#musicBtn.playing,#musicBtn.on{background:var(--color-primary);color:#FFFFFF;border-color:var(--color-primary)}
.sd-audio-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sd-audio-row .sdbtn{min-width:0;justify-content:center;padding-inline:7px;font-size:8px;white-space:nowrap}
.sd-audio-row .sdbtn svg{flex:0 0 auto}

/* ===== pixel art icons ===== */
.si{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;vertical-align:middle;display:inline-block;flex-shrink:0}
.ssi .si{width:32px;height:32px}.stylebtn .si{width:36px;height:36px}
.lockicon{width:14px;height:14px;object-fit:contain;image-rendering:pixelated;vertical-align:middle;opacity:.7}
.kithdr .si{width:26px;height:26px}
#feedHdr .si{width:20px;height:20px;margin-right:4px}
.sdrow.iconbtn .si{width:16px;height:16px}

/* ===== settings button larger ===== */
.settingsbtn{font-size:20px !important;width:44px !important;height:44px !important;padding:6px !important;display:flex !important;align-items:center !important;justify-content:center !important}
.settingsbtn img{width:26px;height:26px;object-fit:contain;display:block}
.settingsdrop{min-width:188px}
@keyframes gearSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.settingsbtn svg{transition:transform .3s ease}
.settingsbtn:hover svg,.settingsbtn:focus-visible svg{animation:gearSpin 1.4s linear infinite}
.settingsbtn:active svg{animation:gearSpin .4s linear 1}

/* ===== collection count spacing ===== */
#collCount{margin-left:5px}

/* ===== talk option icons bigger ===== */
.stylebtn .ssi{font-size:32px !important}

/* ===== style & talk icon colors ===== */
[data-style="gegen"] .ssi{color:#DA3D2E}
[data-style="kontra"] .ssi{color:#101D28}
[data-style="tiki"] .ssi{color:#4E9B65}
[data-style="uzun"] .ssi{color:#101D28}
[data-style="blok"] .ssi{color:var(--color-primary)}
[data-talk="gaz"] .ssi{color:#DA3D2E}
[data-talk="mantik"] .ssi{color:#101D28}
[data-talk="sert"] .ssi{color:#4E9B65}

/* ===== result FX canvas ===== */
.result-fx{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}
.result-fx svg{display:block;width:100%;height:100%;position:absolute;inset:0}

/* ===== result page buttons ===== */
.result-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.result-row{display:flex;gap:8px}
.result-row .btn{flex:1;margin:0}
#againBtn{background:var(--color-ink);color:var(--color-background);border-color:var(--color-ink);font-size:16px;padding:14px;font-weight:700;letter-spacing:1px}

/* ===== budget wider ===== */
.budget{min-width:110px;max-width:200px;justify-self:start;grid-column:1;padding:5px 9px}
.budget-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.budget-bar-wrap{margin-top:4px}
.budget-bar-track{height:4px;background:rgba(10,17,24,.18);border-radius:2px;overflow:hidden}
.budget-bar-fill{height:100%;background:var(--color-primary);border-radius:2px;transition:width .4s ease}
.budget.warn .budget-bar-fill,.budget.tight .budget-bar-fill{background:var(--color-slate)}
.budget.debt .budget-bar-fill{background:var(--color-ink)}
.budget-bar-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7px;margin-top:2px;opacity:.7}
.budget-rows{display:grid;grid-template-columns:1fr 1fr;font-family:var(--mono);font-size:8px;margin-top:4px;gap:4px 10px}
.budget-rows span{display:flex;flex-direction:column;gap:1px}
.br-l{opacity:.6;font-size:7px;text-transform:uppercase;letter-spacing:.5px}
.br-v{font-weight:700;font-size:9px}
.br-warn{color:var(--color-slate)}.br-crit{color:var(--color-ink)}
#budgetLimit{display:none}
#debtLadder{display:none}

.patreonicon{width:22px;height:22px;flex:0 0 22px}

/* ===== setup block: combined formation + chairman ===== */
.setupblock{margin-bottom:10px}
.setuphdrs{display:flex;align-items:center;gap:8px;margin-bottom:6px;justify-content:center}
.pickhdrsep{color:var(--color-slate);font-family:var(--mono);font-size:10px}
.chairpickrow{display:flex;flex-direction:row;gap:6px;flex-wrap:nowrap;margin-top:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border-subtle) transparent}
.fbtn.chairbtn{padding:0;overflow:hidden;min-width:40px;flex:1 1 40px;max-width:none;border-radius:4px;position:relative}
.fbtn.chairbtn.locked{opacity:.45;filter:grayscale(.7);cursor:not-allowed}
.fbtn.chairbtn.locked:hover{background:var(--surface-elevated);filter:grayscale(.6);opacity:.5}
.chairthumb{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:top center;border-radius:0;display:block;margin:0;image-rendering:auto;transition:opacity .12s}
.chairbtnlbl{display:block;font-size:9px;line-height:1.2;text-align:center;word-break:break-word;max-width:80px}
.chairbtn-lockover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,17,24,.28);pointer-events:none}
.chairbtn-lockico{color:#FFFFFF;filter:drop-shadow(0 1px 2px rgba(10,17,24,.6))}

/* ===== BAŞLA shadow ===== */
#startBtn{box-shadow:0 2px 0 var(--color-ink)}
#startBtn:active{box-shadow:none;transform:translateY(2px)}

.advanced-wrap{text-align:center;margin-top:4px}
.advanced-toggle{background:none;border:none;color:var(--color-slate);font-family:var(--mono);font-size:9px;letter-spacing:.5px;cursor:pointer;padding:3px 0;text-transform:uppercase;opacity:.65}
.advanced-toggle:hover{opacity:1}
.advanced-toggle::before{content:"▸ "}
.advanced-toggle.open::before{content:"▾ "}
.ghost-consent-layer{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:16px;background:rgba(10,17,24,.72);backdrop-filter:blur(4px)}.ghost-consent-card{width:min(480px,100%);padding:18px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-elevated);box-shadow:var(--shadow-lg);color:var(--text-primary)}.ghost-consent-card h3{margin:0 0 9px;font:900 13px/1.2 var(--mono);letter-spacing:.7px}.ghost-consent-card p{margin:0 0 14px;color:var(--color-slate);font-size:11px;line-height:1.55}.ghost-consent-card p.ghost-consent-confirm{margin:12px 0 0;padding:10px 11px;border-left:3px solid var(--color-primary);background:color-mix(in srgb,var(--color-primary) 9%,transparent);color:var(--text-primary);font-size:10px;line-height:1.5}.ghost-consent-links{display:flex;gap:12px;margin-top:13px;font:8px/1 var(--mono)}.ghost-consent-links a{color:var(--color-slate)}.ghost-consent-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;margin-top:15px}.ghost-consent-actions button{min-height:34px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-bg);color:var(--text-primary);font:800 9px/1 var(--mono);cursor:pointer}.ghost-consent-actions [data-ghost-accept]{border-color:var(--color-primary);background:var(--color-primary);color:#FFFFFF}
.online-onboarding-card{width:min(520px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:16px}
.online-onboarding-kicker{margin-bottom:7px;color:var(--action-text);font:900 8px/1 var(--mono);letter-spacing:1.4px}
.online-onboarding-card h3{font-size:17px;letter-spacing:.2px;text-transform:none}
.online-onboarding-options{display:grid;gap:6px;margin:10px 0}
.online-onboarding-options label{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:8px;padding:8px 9px;border:1px solid var(--border-subtle);border-radius:9px;background:var(--surface-bg);cursor:pointer}
.online-onboarding-options label:has(input:checked){border-color:color-mix(in srgb,var(--action-primary) 64%,var(--border-default));background:var(--surface-primary-soft)}
.online-onboarding-options input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--action-primary)}
.online-onboarding-options span{display:grid;gap:4px}
.online-onboarding-options b{color:var(--text-primary);font-size:11px;line-height:1.25}
.online-onboarding-options small{color:var(--text-secondary);font-size:9.5px;line-height:1.45}
.online-onboarding-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.online-onboarding-actions button{min-height:40px;padding:8px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-bg);color:var(--text-primary);font:850 8.5px/1.25 var(--mono);cursor:pointer}
.online-onboarding-actions [data-online-all]{grid-column:1/-1;border-color:var(--action-primary);background:var(--action-primary);color:var(--text-on-primary);animation:copaConsentPulse 2.2s ease-in-out infinite}
@keyframes copaConsentPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--action-primary) 0%,transparent);filter:brightness(1)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--action-primary) 16%,transparent);filter:brightness(1.08)}}
@media(max-width:520px){.online-onboarding-layer{align-items:end;padding:6px 6px max(6px,env(safe-area-inset-bottom))}.online-onboarding-card{max-height:min(96dvh,760px);padding:13px;border-radius:16px 16px 10px 10px}.online-onboarding-card>p{margin-bottom:8px;font-size:9px}.online-onboarding-options label{padding:7px 8px}.online-onboarding-options small{line-height:1.25}.online-onboarding-actions{grid-template-columns:1fr 1fr}.online-onboarding-actions [data-online-all]{grid-column:1/-1}}
body.reduced-motion .online-onboarding-actions [data-online-all]{animation:none}

/* ===== lightning bolt flicker ===== */
@keyframes boltFlash{
  0%,70%,100%{opacity:1;filter:none}
  72%{opacity:.05;filter:none}
  74%{opacity:1;filter:drop-shadow(0 0 5px #FFFFFF) brightness(2.2)}
  76%{opacity:.2;filter:none}
  78%{opacity:1;filter:drop-shadow(0 0 3px #E4E8E7) brightness(1.6)}
  80%{opacity:.7;filter:none}
  82%{opacity:1;filter:drop-shadow(0 0 2px #FFFFFF)}
}
.bolt-ico{animation:boltFlash 2.8s ease-in-out infinite}

/* ===== spotlight modal ===== */
.spotlight-modal{width:min(640px,calc(100vw - 32px));padding:0;text-align:center;overflow:hidden}
.spotlight-header{position:relative;padding:16px 18px 14px;background:linear-gradient(175deg,#101D28 0%,#17242D 100%);border-radius:8px 8px 0 0;overflow:hidden}
.spotlight-header::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(242,74,40,.12) 0%,transparent 68%);pointer-events:none}
.spot-beam-svg{position:relative;display:block;margin:0 auto 4px;filter:drop-shadow(0 2px 8px rgba(242,74,40,.28))}
.spotlight-kicker{position:relative;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:2px;color:rgba(243,245,244,.58);text-transform:uppercase;margin-bottom:4px}
.spotlight-title{position:relative;font-family:var(--disp);font-weight:900;font-size:18px;letter-spacing:3px;color:var(--color-primary);text-shadow:none;margin-bottom:4px}
.spotlight-sub{position:relative;font-family:var(--mono);font-size:10px;color:rgba(243,245,244,.68);letter-spacing:.7px;margin-bottom:8px}
.spotlight-pow{position:relative;font-family:var(--disp);font-weight:900;font-size:28px;letter-spacing:.5px;text-shadow:none;line-height:1}
.spotlight-pow span{font-size:10px;font-family:var(--mono);font-weight:700;opacity:.82;display:block;letter-spacing:.8px;margin-top:2px}
.spotlight-brief{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--color-slate);padding:11px 16px 8px;background:var(--surface-elevated)}
.spotlight-brief b{color:var(--color-ink)}
.spotlight-brief span{color:var(--color-primary);font-weight:900}
.spotlight-risk{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:8px 10px;border:1px solid color-mix(in srgb,#F24A28 35%,var(--border-subtle));border-radius:8px;background:color-mix(in srgb,#F24A28 9%,var(--surface-elevated));font-family:var(--mono);font-size:10px;line-height:1.45;color:var(--color-slate);text-align:left}
.spotlight-risk svg{color:#DA3D2E;flex:0 0 auto}
.spotlight-risk b{color:#DA3D2E}
.spot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 8px;background:var(--surface-elevated)}
.spot-card{position:relative;overflow:hidden;min-height:82px;padding:9px 10px 10px;background:var(--surface-default);border:1.5px solid var(--border-subtle);border-radius:10px;cursor:pointer;text-align:left;transition:border-color .16s,transform .14s,box-shadow .16s,background .16s;width:100%;font:inherit}
.spot-card:hover,.spot-card:focus-visible{border-color:var(--spot-col,var(--color-primary));transform:translateY(-1px);box-shadow:0 0 0 2px color-mix(in srgb,var(--spot-col,var(--color-primary)) 20%,transparent);background:color-mix(in srgb,var(--surface-default) 92%,var(--spot-col,var(--color-primary)) 8%)}
.spot-card:active{transform:translateY(0)}
.spot-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.spot-card-pos{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--color-slate);text-transform:uppercase}
.spot-card-bonus{font-family:var(--mono);font-size:9px;font-weight:900;color:var(--color-primary);border:1px solid color-mix(in srgb,var(--color-primary) 45%,transparent);border-radius:999px;padding:1px 5px;background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.spot-card-name{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--color-ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.spot-card-power{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;font-weight:900;line-height:1}
.spot-card-power span:first-child{opacity:.9}
.spot-arrow{color:var(--color-slate)!important;opacity:.7;font-weight:700}
.spot-card-note{font-family:var(--mono);font-size:8px;color:var(--color-slate);letter-spacing:.6px;text-transform:uppercase;margin-top:5px}
.spot-card-shine{position:absolute;top:-50%;left:-60%;width:28%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:skewX(-10deg);transition:left .45s ease;pointer-events:none}
.spot-card:hover .spot-card-shine{left:140%}
.spotlight-footnote{font-family:var(--mono);font-size:9px;color:var(--color-slate);padding:6px 16px 12px;background:var(--surface-elevated);letter-spacing:.25px}
@media(max-width:520px){
  .spotlight-modal{width:calc(100vw - 18px)}
  .spotlight-header{padding:13px 14px 12px}
  .spotlight-title{font-size:16px;letter-spacing:2.2px}
  .spot-grid{grid-template-columns:1fr;gap:7px;padding-inline:10px}
  .spotlight-risk{margin-inline:10px}
  .spot-card{min-height:74px}
}
/* hover confetti inside card */
.spot-prtcl{position:absolute;bottom:8px;font-size:11px;pointer-events:none;animation:spotPrtcl .65s ease-out forwards}
@keyframes spotPrtcl{0%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-36px) scale(.4)}}
@keyframes spotBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
/* sahada spotlight rozet */
.spot-badge{position:absolute;top:2px;right:2px;font-family:var(--mono);font-size:8px;font-weight:700;background:var(--color-primary);color:var(--color-ink);border-radius:3px;padding:0 3px;line-height:14px;z-index:3;animation:spotPop .3s ease-out}
@keyframes spotPop{0%{transform:scale(0)}80%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ===== kaos zarı modal ===== */
.kaos-modal{padding:4px 2px 8px;text-align:center}
.kaos-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 0;margin-bottom:8px}
.kaos-title{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:3px;color:#101D28}
.kaos-round{font-family:var(--mono);font-size:9px;color:var(--color-slate);opacity:.7}
.kaos-svg{display:flex;justify-content:center;margin:0 auto 4px}
.kaos-sub{font-family:var(--disp);font-weight:900;font-size:16px;letter-spacing:2px;color:var(--color-ink);margin-bottom:6px}
.kaos-desc{font-family:var(--mono);font-size:11px;color:var(--color-slate);line-height:1.55;margin-bottom:4px}
.kaos-peek-title{font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:2px;color:#101D28;margin:8px 0 14px;text-align:center}
.kaos-odds{display:flex;flex-direction:column;gap:7px;margin:0 8px 14px}
.kaos-odd{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-radius:5px;font-family:var(--mono);font-size:12px}
.kaos-odd.good{background:rgba(242,74,40,.1);border:1.5px solid rgba(242,74,40,.35)}
.kaos-odd.bad{background:rgba(66,1,2,.08);border:1.5px solid rgba(66,1,2,.3)}
.ko-pct{font-weight:700;font-size:13px;opacity:.75}
.kaos-odd.good .ko-pct{color:var(--color-primary)}
.kaos-odd.bad .ko-pct{color:#DA3D2E}
.ko-out{font-weight:700;font-size:13px}
.kaos-odd.good .ko-out{color:var(--color-primary)}
.kaos-odd.bad .ko-out{color:#DA3D2E}
.kaos-half-warn{font-family:var(--mono);font-size:10px;color:var(--color-slate);background:var(--surface-elevated);border:1.5px dashed var(--border-subtle);border-radius:4px;padding:7px 10px;margin:0 6px 8px;text-align:center}

/* ===== kaos roll animation ===== */
.kaos-rolling{text-align:center;padding:28px 20px 24px;overflow:hidden}
.kaos-roll-lbl{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--color-slate);margin-bottom:14px}
.kaos-roll-wrap{display:flex;justify-content:center;animation:kaosSpinWild 2.7s cubic-bezier(.36,.07,.19,.97) forwards}
@keyframes kaosSpinWild{0%{transform:rotate(0deg) scale(1)}8%{transform:rotate(60deg) scale(1.12) skewX(6deg)}18%{transform:rotate(-40deg) scale(.93) skewY(-5deg)}30%{transform:rotate(145deg) scale(1.08)}42%{transform:rotate(90deg) scale(.97) skewX(-4deg)}55%{transform:rotate(260deg) scale(1.1)}68%{transform:rotate(310deg) scale(.95) skewY(4deg)}80%{transform:rotate(340deg) scale(1.04)}92%{transform:rotate(358deg) scale(1.01)}100%{transform:rotate(360deg) scale(1)}}
.kaos-roll-dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
.kaos-roll-dots span{width:6px;height:6px;border-radius:50%;background:#101D28;animation:krDot .9s ease-in-out infinite}
.kaos-roll-dots span:nth-child(2){animation-delay:.18s}
.kaos-roll-dots span:nth-child(3){animation-delay:.36s}
@keyframes krDot{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1.2);opacity:1}}
/* ===== kaos result screen ===== */
.kaos-result{position:relative;text-align:center;padding:32px 20px 26px;overflow:hidden}
.kr-glow{position:absolute;inset:-20px;border-radius:50%;opacity:0;animation:krGlow .6s .05s ease-out forwards;pointer-events:none}
.kr-good .kr-glow{background:radial-gradient(ellipse at 50% 60%,rgba(242,74,40,.18) 0%,transparent 72%)}
.kr-bad .kr-glow{background:radial-gradient(ellipse at 50% 60%,rgba(66,1,2,.18) 0%,transparent 72%)}
@keyframes krGlow{to{opacity:1}}
.kr-icon{margin-bottom:10px;animation:krIconPop .45s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes krIconPop{0%{transform:scale(0) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0deg);opacity:1}}
.kr-label{font-family:var(--mono);font-size:22px;font-weight:900;letter-spacing:1px;line-height:1.1;margin-bottom:8px;animation:krLabelIn .4s .15s ease-out both}
.kr-good .kr-label{color:var(--color-primary);text-shadow:0 0 18px rgba(104,117,124,.45)}
.kr-bad .kr-label{color:#DA3D2E;text-shadow:0 0 18px rgba(66,1,2,.35)}
@keyframes krLabelIn{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
.kr-desc{font-size:11px;color:var(--color-slate);letter-spacing:.5px;animation:krLabelIn .4s .28s ease-out both}
.kr-prtcl{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:2px;animation:krPrtcl .9s ease-out forwards;pointer-events:none}
@keyframes krPrtcl{0%{transform:translate(-50%,-50%) rotate(0deg);opacity:1}100%{transform:translate(calc(-50% + var(--krx)),calc(-50% + var(--kry))) rotate(var(--kra));opacity:0}}

/* ===== draft slot active pulse ===== */
@keyframes slotPulse{0%,100%{box-shadow:0 0 0 2px var(--color-primary),4px 4px 0 0 #0A1118}50%{box-shadow:0 0 0 4px var(--color-primary),4px 4px 0 0 #0A1118}}
.roundel.cur{border:3px solid var(--color-primary)!important;animation:slotPulse 1.2s ease-in-out infinite;z-index:2}
.roundel.h-drag-over{border:2.5px dashed #4E9B65!important;background:rgba(104,117,124,0.18)!important;box-shadow:0 0 0 2px rgba(104,117,124,0.3);z-index:3}
.touch-drag-ghost{contain:layout paint style;transform:translateZ(0);will-change:left,top}
.roundel.slot-dim{opacity:.4;filter:grayscale(.4)}
.roundel.slot-hover{box-shadow:0 0 0 3px var(--color-primary),2px 2px 0 0 #0A1118;opacity:1;filter:none}

/* ===== optstage stage-hover ===== */
.stage-hover .opt{background:color-mix(in srgb,var(--surface-elevated) 85%,var(--color-primary) 15%)}

/* ===== mobile budget ===== */
@media(max-width:480px){.budget{min-width:100px;max-width:170px}.budget .v{font-size:17px}}

/* ===== presBtn — compact portrait in actionbar ===== */
.presbtngp{display:flex;flex-direction:column;gap:0;width:48px;flex:0 0 48px}
.btn-pres{padding:0;overflow:hidden;width:48px;height:54px;border-radius:4px 4px 0 0;border-bottom:none;flex:0 0 auto}
.presbtnphoto{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.presbtnlabel{font-family:var(--mono);font-weight:700;font-size:6px;letter-spacing:.6px;text-transform:uppercase;text-align:center;background:var(--color-ink);color:var(--color-background);padding:2px 3px;border-radius:0 0 4px 4px;line-height:1;white-space:nowrap;flex-shrink:0}

/* ===== tcentre in hub ===== */
.tcentre-hub{margin-top:10px;margin-bottom:0}

/* ===== rUnlocks: chairman portrait ===== */
.unlockphoto{width:52px;height:52px;object-fit:cover;border-radius:50%;border:2px solid var(--color-ink);display:block;margin:0 auto 6px}
.unlockrole{display:block;font-family:var(--mono);font-size:9px;font-weight:400;opacity:.8;margin-top:2px;letter-spacing:.5px}

.elitebadge{display:block;font-family:var(--mono);font-size:8px;font-weight:700;color:var(--color-primary);letter-spacing:.5px;margin-top:2px}

/* ===== scout notes ===== */
.snote{display:block;font-family:var(--mono);font-size:9px;color:var(--color-slate);font-weight:400;line-height:1.2;margin-top:1px;font-style:italic}

/* ===== chairpopup hint ===== */
.chairpopup-hint{font-family:var(--mono);font-size:10px;color:var(--color-slate);padding:4px 0 8px;border-bottom:1px solid var(--border-subtle);margin-bottom:6px}

/* President consult status notes */
.chair-consult-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  margin:12px auto -2px;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--color-primary) 34%,var(--border-subtle));
  border-radius:999px;
  background:color-mix(in srgb,var(--color-primary) 9%,var(--surface-elevated));
  color:var(--color-primary);
  font-family:var(--mono);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
}
.chair-consult-note.warn{
  border-color:color-mix(in srgb,var(--color-warning) 44%,var(--border-subtle));
  background:color-mix(in srgb,var(--color-warning) 10%,var(--surface-elevated));
  color:color-mix(in srgb,var(--color-warning) 72%,var(--color-ink));
}
.chair-consult-btn{
  min-height:44px;
  white-space:nowrap;
}

/* ===== president popup QF note ===== */
.presqfnote{margin-top:10px;padding:5px 8px;background:var(--surface-elevated);border-left:3px solid var(--color-slate);font-family:var(--mono);font-size:9px;color:var(--color-slate);line-height:1.4;border-radius:0 3px 3px 0}

/* ===== global icon size bump ===== */
.si{width:24px;height:24px}

/* ===== mobile layout ===== */
@media(max-width:480px){
  .top{display:flex;flex-wrap:wrap;gap:6px}
  .logo{order:2;justify-self:auto;text-align:center;flex:1}
  .tools{order:1}
  .budget{order:3;margin-left:auto}
  .wrap{padding:8px 9px 32px}
  .hubcols{flex-direction:column}
  .hcol-r{border-top:2px solid var(--border-subtle);padding-top:8px;margin-top:4px}
  .dashtop{gap:6px}
  .hub-stat-row{grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto}
  .hub-stat-row .kasa-card{grid-column:1 / -1;grid-row:1}
  .chairthumb{aspect-ratio:3/4}
  .chairpickrow{gap:3px}
  .fbtn.chairbtn{min-width:36px;flex:1 1 36px}
  .budget{min-width:76px}
  .hub-action-panel .actionbar{align-items:stretch}
  .actionbar #playBtn{font-size:12px;padding:7px 8px;letter-spacing:.8px}
  .actionbar #talkBtn{font-size:11px;padding:7px 8px;align-self:auto}
  .actionbar #autoTog{flex:0 0 100%}
  .vsbar{min-height:0}
  .vsbar .mid{flex:0 0 72px;padding:5px 6px}
  .vs-vs{font-size:20px}
  .vsweather{font-size:8px}
  .vsaud{font-size:7px}
  .vsround{font-size:7px}
  .vs-nm{font-size:11px}
  .vs-pw{font-size:12px}
  .vs-crest-col .vs-crest{width:28px;height:34px}
  .vsbar .side{padding:6px 6px}
  .vsbar .you .vs-crest-col{padding-right:6px;margin-right:6px}
  .vsbar .opp .vs-crest-col{padding-right:0;margin-right:0;padding-left:6px;margin-left:6px}
  .vs-lbl{font-size:7px;letter-spacing:1px}
  .vsscout{font-size:8px;padding:2px 5px}
  /* sim screen */
  .shoutrow{flex-wrap:wrap;gap:4px}
  .shoutbtn{flex:1 1 calc(50% - 4px);font-size:11px;padding:7px 4px}
  .speedrow{gap:4px}
  .spd{padding:6px 8px;font-size:12px}
  /* modal sheets */
  .sheet{max-width:calc(100vw - 24px)}
  /* minitiles */
  .minitiles{grid-template-columns:1fr 1fr}
  /* opt cards on mobile */
  .opt .tag{font-size:9px}
  /* scrollable containers */
  .simwrap{-webkit-overflow-scrolling:touch}
  /* fix overflow on narrow screens */
  body{overflow-x:hidden}
  .wrap{overflow-x:hidden}
  /* intro screen compact */
  .mechanics{margin-top:4px;padding:6px 0 2px}
  .mstep{padding:3px 0}
  .mt{font-size:clamp(14px,4vw,17px)}
  .setupblock{padding-top:0;margin-bottom:6px}
  .setuphdrs{margin-bottom:4px}
  .formpick{gap:4px}
  .formpick .fbtn{padding:7px 2px;font-size:11px}
  #chairpick .fbtn.chairbtn{min-width:44px}
  .countrypick{gap:3px;margin-bottom:6px}
  .countrypick button{padding:5px 4px;font-size:7px}
  .cname-wrap{margin-bottom:0}
  .cinput-new{font-size:15px;padding:7px 10px}
  .advanced-wrap{margin-top:1px}
  .metaline{margin-top:6px;padding:5px 8px}
  .foot{margin-top:3px}
  .footer-bar{margin:4px 0 1px}
}
@media(min-width:720px){
  .hcol-l,.hcol-r{min-width:0}
  .chairpickrow{gap:6px}
  .fbtn.chairbtn{max-width:none}
  .chairthumb{height:80px}
}

/* ── SVG interaction animations ── */

/* 1. Roll button: dice SVG spins on hover */
#rollBtn{gap:8px;display:inline-flex;align-items:center;justify-content:center}
#rollBtn .dsvg{transition:transform .25s;flex-shrink:0}
#rollBtn:hover .dsvg{animation:diceRoll .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}45%{transform:rotate(200deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}

/* 2. Play button: compact forward arrow animation */
.play-arrow{display:inline-flex;align-items:center;vertical-align:-.22em;margin-left:8px;overflow:visible}
.play-arrow svg{overflow:visible}
.play-arrow-main,.play-arrow-ghost{transform-box:fill-box;transform-origin:center}
.play-arrow-main{animation:playArrowMain 1.1s ease-in-out infinite}
.play-arrow-ghost{opacity:.3;animation:playArrowGhost 1.1s ease-in-out infinite}
.btn-go:hover .play-arrow-main,.btn-go:focus .play-arrow-main{animation-duration:.62s}
.btn-go:hover .play-arrow-ghost,.btn-go:focus .play-arrow-ghost{animation-duration:.62s}
@keyframes playArrowMain{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
@keyframes playArrowGhost{
  0%,100%{opacity:.16;transform:translateX(-2px)}
  50%{opacity:.5;transform:translateX(1px)}
}

/* 3. btn-go / btn-roll: inner glow pulse on hover */
.btn-go,.btn-roll{position:relative}
.btn-go::after,.btn-roll::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 0 rgba(255,255,255,0);transition:box-shadow .25s}
.btn-go:hover::after{box-shadow:none}
.btn-roll:hover::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),inset 0 1px 0 rgba(255,255,255,.15)}

/* 4. opt-lbar: widens + brightens on card hover */
.opt-lbar{transition:width .15s ease,filter .15s ease}
.opt:hover:not(:disabled) .opt-lbar{width:5px;filter:brightness(1.7) saturate(1.4)}

/* 5. metaline SVG icons */
.metaline-ico{display:inline-flex;align-items:center;vertical-align:-.15em;margin-right:1px}

/* YEDEK ÇEK grid */
.backup-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 0}
.backup-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;border:1.5px solid var(--color-ink);border-radius:6px;cursor:pointer;min-width:70px;flex:1;max-width:100px;transition:background .15s}
.backup-card:hover{background:var(--color-ink);color:#FFFFFF}
.backup-card.misfit{opacity:.65;border-style:dashed}
.bk-fig{opacity:.85}
.bk-name{font-family:var(--mono);font-size:9px;font-weight:700;text-align:center;line-height:1.2;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-role{font-family:var(--mono);font-size:8px;color:var(--color-slate);text-align:center}
.bk-eff{font-family:var(--disp);font-size:13px;font-weight:700;text-align:center}
.bk-delta{font-size:10px;font-weight:400}.bk-delta.pos{color:var(--color-primary)}.bk-delta.neg{color:var(--color-slate)}
.backup-empty{padding:12px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--color-slate)}
.backupcompare{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;padding:6px 0 8px;border-bottom:1px solid var(--border-subtle);margin-bottom:6px}
#finalRow{display:flex;gap:12px;align-items:stretch}
#finalRow>.finalreport,#finalRow>.storytile,#finalRow>.econtile{flex:1;min-width:0;margin-top:0}
#finalRow>.finalreport,#finalRow>.storytile{box-shadow:var(--shadow-md)}
#finalRow>.econtile{display:flex;flex-direction:column}
.econtile .econsum{flex:1;box-shadow:var(--shadow-md)}
@media(max-width:560px){#finalRow{flex-direction:column}}
.finalreport h4{background:var(--color-primary);color:#FFFFFF;padding:6px 10px;margin:0;font-family:var(--mono);font-size:10px;letter-spacing:1px;border-radius:4px 4px 0 0}
.frrow{display:flex;justify-content:space-between;align-items:baseline;padding:5px 8px;border-bottom:1px solid var(--border-subtle);font-size:11px}
.frrow b{color:var(--color-primary);font-family:var(--mono);font-size:11px}

/* ===== Penalty Shootout ===== */
.pen-goal{color:var(--color-primary)}
.pen-save{color:var(--color-slate)}

/* ===== Goal flash roundel ===== */
@keyframes goalFlash{0%{box-shadow:0 0 0 0 rgba(242,74,40,0)}40%{box-shadow:0 0 0 8px rgba(242,74,40,.55)}100%{box-shadow:0 0 0 0 rgba(242,74,40,0)}}
.goal-flash{animation:goalFlash 1.1s ease-out}

/* ===== Card flip animation ===== */
@keyframes cardFlipIn{0%{transform:rotateY(-70deg) scale(.92);opacity:0}60%{transform:rotateY(8deg);opacity:1}100%{transform:none}}
.cardtile{animation:cardFlipIn .28s ease both}
.cardtile:nth-child(2){animation-delay:.05s}
.cardtile:nth-child(3){animation-delay:.1s}
.cardtile:nth-child(4){animation-delay:.15s}

/* ===== v7 Intro Redesign ===== */
/* Design tokens */
:root{--sel-color:var(--color-primary);--sel-border:2px solid var(--color-primary);--sel-shadow:0 0 0 2px rgba(104,117,124,0.16);--tr-fast:var(--motion-fast) ease;--tr-sel:120ms ease}

/* Hero head */
.v7-hero-head{padding:22px 0 20px;border-bottom:1px solid var(--border-subtle);margin-bottom:0;text-align:left}
.v7-tagline{font-family:var(--disp);font-weight:700;font-size:clamp(28px,7vw,42px);line-height:1.1;letter-spacing:-0.5px;color:var(--color-ink);margin:0 0 12px}
.v7-tagline-accent{color:var(--color-primary)}
.v7-hero-desc{font-family:var(--mono);font-size:12px;color:var(--color-slate);line-height:1.6;letter-spacing:.3px;margin:0}

/* Mechanics strip — compact 2-column */
.mechanics{display:flex;flex-wrap:wrap;gap:0;border-top:none;border-bottom:1px solid var(--border-subtle);padding:14px 0 16px;margin-top:0;text-align:left}
.mstep{flex:1 1 48%;display:flex;gap:9px;align-items:flex-start;padding:5px 12px 5px 0;border-bottom:none}
.mn{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--color-slate);opacity:.9;flex-shrink:0;padding-top:2px;min-width:14px;letter-spacing:.5px}
.mt{font-family:var(--mono);font-weight:500;font-size:11.5px;line-height:1.5;color:var(--color-ink);opacity:1}
.mt mark{background:transparent;color:var(--color-ink);padding:0;font-style:normal;border-radius:0;font-weight:700;opacity:1}

/* Howto — top-right of introLand, no double border */
.howto-wrap{border-top:none;padding-top:0;margin-top:0;text-align:right;position:absolute;top:0;right:0}
#howtoToggle{font-size:9px;letter-spacing:.5px;opacity:.85;padding:0 10px;height:32px;transition:opacity var(--tr-fast),border-color var(--tr-fast)}
#howtoToggle:hover{opacity:1}
#introLand{position:relative;padding-top:36px}
.howto-body{margin-top:2px}

/* Setup groups */
.v7-setup-group{padding:24px 0 0}
.v7-setup-group:first-child{padding-top:24px}
.v7-sec-lbl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-slate);margin-bottom:9px;display:block;opacity:1}
.v7-sec-lbl-chair{margin-top:0}
/* Formation + Chairman side-by-side */
.v7-setup-twocol{display:flex;flex-direction:row;gap:12px;align-items:flex-start}
.v7-setup-subcol{flex:1;min-width:0}
.v7-setup-twocol .formpick{grid-template-columns:repeat(2,minmax(0,1fr))}
.v7-setup-twocol #chairpick{display:grid;grid-template-columns:repeat(3,1fr);overflow-x:hidden;gap:4px;flex-wrap:unset}
.v7-setup-twocol #chairpick .fbtn.chairbtn{min-width:0;max-width:none;flex:none;width:100%}

/* Hero area alignment */
.hero{gap:0;text-align:left}
#introLand{margin-bottom:0}

/* Formation chips — segmented control style */
.formpick{gap:5px;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));padding-bottom:0}
.formpick .fbtn{padding:9px 3px;font-size:11px;border-width:1px;border-color:var(--border-subtle);background:var(--surface-elevated);border-radius:var(--radius-sm);transition:border-color var(--tr-fast),background var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast)}
.formpick .fbtn:hover:not(.sel):not(.locked){border-color:var(--color-slate);background:var(--surface-bg)}
.formpick .fbtn.sel{background:var(--color-primary);color:#FFFFFF;border-color:var(--color-primary);transform:none;box-shadow:0 0 0 2px rgba(104,117,124,0.16)}
.formpick .fbtn.sel::after{display:none}

/* Chairman row — neutral borders, clear selected state */
.chairpickrow{gap:6px;flex-wrap:nowrap;overflow-x:auto}
#chairpick .fbtn.chairbtn{border-width:1px;border-color:var(--border-subtle);background:var(--surface-elevated);transition:border-color var(--tr-fast),box-shadow var(--tr-fast),transform var(--tr-fast);position:relative;flex-direction:column;align-items:center;padding:0 0 6px;min-width:90px;max-width:130px;flex:0 0 auto}
#chairpick .fbtn.chairbtn:hover:not(.sel):not(.locked){border-color:var(--color-slate);transform:translateY(-1px)}
#chairpick .fbtn.chairbtn.sel{border-width:2px;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(104,117,124,0.16);transform:translateY(-2px)}

/* Chairman name label */
.chairbtn-name{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.3px;text-align:center;color:var(--color-slate);padding:6px 8px 4px;line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#chairpick .fbtn.chairbtn.sel .chairbtn-name{color:var(--color-ink)}

/* Chairman ✓ badge */
.chairbtn-check{position:absolute;top:4px;right:4px;width:15px;height:15px;background:var(--color-primary);color:#FFFFFF;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;z-index:2;box-shadow:0 1px 3px rgba(10,17,24,.18)}

/* Country pick — consistent */
.countrypick{gap:5px;margin:0}
.countrypick button{border-width:1px;border-color:var(--border-subtle);background:var(--surface-elevated);padding:7px 4px;font-size:8px;transition:border-color var(--tr-fast),background var(--tr-fast),color var(--tr-fast)}
.countrypick button:hover:not(.on):not(.locked){border-color:var(--color-slate)}
.countrypick button.on{background:var(--surface-elevated);color:var(--color-ink);border-color:var(--color-ink);border-width:2px;box-shadow:0 0 0 2px rgba(104,117,124,.2)}
.countrypick button.on::after{content:"✓";position:absolute;top:2px;right:3px;font-size:8px;font-weight:800;color:var(--color-primary);line-height:1}

/* Club name */
.cname-wrap{margin-bottom:0}
.cname-row{border-width:1px;border-color:var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--tr-fast),box-shadow var(--tr-fast)}
.cname-row:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--focus-ring)}

/* Club name hint */
.cname-hint{font-family:var(--mono);font-size:10px;color:var(--color-slate);opacity:.75;letter-spacing:.2px;margin-top:5px;line-height:1.4}

/* CTA stack */
.v7-cta-stack{padding-top:20px}

/* Selection summary */
.v7-summary{font-family:var(--mono);font-size:11px;color:var(--color-slate);letter-spacing:.3px;margin-bottom:10px;min-height:14px;opacity:1;text-align:center}
.v7-summary strong{color:var(--color-ink);font-weight:700}

/* BAŞLA — primary */
.v7-cta-stack .btn-go{font-size:15px;letter-spacing:3px;padding:15px 16px;box-shadow:0 2px 0 var(--action-primary-hover);border-radius:var(--radius-sm);transition:background var(--tr-fast),transform var(--tr-fast),box-shadow var(--tr-fast)}
.v7-cta-stack .btn-go:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--action-primary-hover)}
.v7-cta-stack .btn-go:active{transform:translateY(0);box-shadow:none}

/* Advanced toggle — text link, better contrast */
.advanced-toggle{font-size:10px;letter-spacing:.3px;opacity:.8;border:none;background:none;padding:6px 0;color:var(--color-slate);cursor:pointer;transition:opacity var(--tr-fast),color var(--tr-fast);display:block;width:100%;text-align:center}
.advanced-toggle:hover{opacity:.9;color:var(--color-ink)}
.advanced-toggle::before{content:"▸ "}
.advanced-toggle.open::before{content:"▾ "}

/* Footer block — merged stats + links */
.v7-footer-block{margin-top:18px;border-top:1px solid var(--border-subtle);padding-top:10px}
.foot{font-family:var(--mono);font-size:9px;color:var(--color-slate);opacity:.85;letter-spacing:.4px;padding:0 0 6px;text-align:center;border:none;margin:0}
.v7-footer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px}
.v7-footer:hover{opacity:1}
.v7-foot-link{background:transparent;border:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none;padding:2px 0;letter-spacing:.8px;text-transform:uppercase;transition:color var(--tr-fast),opacity var(--tr-fast)}
.v7-foot-link:hover{color:var(--color-ink);opacity:1}
.v7-foot-link:focus-visible{outline:2px solid var(--color-slate);outline-offset:2px;border-radius:2px}
.v7-foot-sep{opacity:.65}
a.v7-foot-link{color:inherit}

/* Metaline compact */
.metaline{margin-top:14px;padding:5px 8px}

/* Responsive */
@media(max-width:520px){
  .v7-tagline{font-size:clamp(24px,8vw,34px)}
  .mstep{flex:1 1 100%;padding-right:0}
  .v7-setup-group{padding-top:16px}
  .chairpickrow{gap:4px}
}
@media(max-width:400px){
  .v7-tagline{font-size:clamp(20px,8vw,28px)}
  .v7-hero-head{padding:16px 0 14px}
}

/* prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  .formpick .fbtn,.countrypick button,#chairpick .fbtn.chairbtn,.cname-row,.v7-foot-link,.advanced-toggle,.v7-cta-stack .btn-go{transition:none}
  #chairpick .fbtn.chairbtn:hover:not(.sel):not(.locked){transform:none}
  #chairpick .fbtn.chairbtn.sel{transform:none}
  .v7-cta-stack .btn-go:hover{transform:none}
}

/* ===== Player ratings panel ===== */
.player-ratings{margin:12px 0;border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;font-family:var(--mono)}
.ratings-hdr{padding:8px 12px;background:var(--surface-elevated);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--color-slate);border-bottom:1px solid var(--border-subtle)}
.ratings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rrow{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border-subtle);font-size:12px}
.rrow:nth-child(odd){border-right:1px solid var(--border-subtle)}
.rrow:last-child,.rrow:nth-last-child(2):nth-child(odd){border-bottom:none}
.rpos{font-size:9px;color:var(--color-slate);min-width:22px}
.rnm{flex:1;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rnum{font-weight:900;font-size:14px;min-width:28px;text-align:right}
.rb-goal,.rb-ast{font-size:10px;opacity:.85}

/* ===== Toast / Feedback notifications ===== */
#toastContainer{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.pinti-savings-widget{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:62;display:grid;grid-template-columns:30px 30px minmax(142px,1fr);align-items:center;gap:8px;width:min(250px,calc(100vw - 32px));padding:10px;border:1px solid color-mix(in srgb,var(--color-primary) 48%,var(--border-default));border-radius:14px;background:color-mix(in srgb,var(--surface-elevated) 94%,transparent);box-shadow:0 12px 32px rgba(10,17,24,.2);backdrop-filter:blur(12px);font-family:var(--mono);transition:width .2s ease,transform .2s ease}
.pinti-savings-toggle{width:30px;height:30px;border:1px solid var(--border-default);border-radius:50%;background:var(--surface-bg);color:var(--color-ink);font:900 18px/1 var(--mono);cursor:pointer}.pinti-savings-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--color-primary);color:#FFFFFF;font-weight:900}.pinti-savings-copy{display:grid;gap:2px;min-width:0}.pinti-savings-copy span{font-size:8px;font-weight:900;letter-spacing:1px;color:var(--color-slate)}.pinti-savings-copy strong{font-size:17px;color:var(--color-ink)}.pinti-savings-copy small{font-size:8px;line-height:1.3;color:var(--color-slate)}
.pinti-savings-widget.is-collapsed{grid-template-columns:30px 30px;width:86px}.pinti-savings-widget.is-collapsed .pinti-savings-copy{display:none}
@media(max-width:760px){.pinti-savings-widget{right:10px;bottom:calc(var(--mobile-dock-height,0px) + 10px + var(--copa-safe-bottom,env(safe-area-inset-bottom)));z-index:58}}
.toast{background:var(--color-ink);color:var(--color-background);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.4px;padding:10px 16px;border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(16,29,40,.28);border-left:3px solid var(--color-primary);max-width:280px;animation:toastIn var(--motion-standard) ease both}
.toast.toast-info{border-left-color:var(--color-slate)}
.toast.toast-out{animation:toastOut var(--motion-fast) ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.97)}}

/* ===== Screen fade+slide transitions ===== */
.screen-enter{animation:screenIn var(--motion-standard) ease both}
.screen-exit{animation:screenOut var(--motion-fast) ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes screenOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}

/* ===== Large-screen responsive (must come AFTER the 720px/760px blocks) ===== */
@media(min-width:1280px){
  .wrap{max-width:min(1440px,calc(100vw - 48px));padding:16px 24px 56px}
  .draft-left{width:340px}
  /* Intro: narrow centered column inside the wide global container */
  #intro{width:min(960px,100%);margin-inline:auto}
  #introSetup{width:min(720px,100%);margin-inline:auto}
}
@media(min-width:1440px){
  html{font-size:16px}
  .wrap{max-width:min(1440px,calc(100vw - 48px));padding:16px 36px 64px}
  .hubcols{grid-template-columns:1.2fr 0.8fr;gap:20px}
  .draft-left{width:380px}
  .draft-cols{gap:20px;padding:8px 20px 16px}
  .fbtn{min-height:44px;font-size:15px}
  .chairthumb{height:96px}
  .sheet{max-width:min(660px,calc(100vw - 64px))}
  .howto-modal-shell{width:min(920px,calc(100vw - 48px))}
  .minitiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mtile .mv{font-size:19px}
  .mtile{padding:7px 10px;min-height:46px}
  .opt{padding:12px 14px}
  .opt .pn{font-size:15px}
  .opt .meta{font-size:10px}
  .btn{padding:14px 18px;font-size:16px}
  .btn-mini{font-size:13px;padding:10px 12px}
  .top{padding-bottom:10px;margin-bottom:14px}
  .brandmark{font-size:34px}
  /* VS panel scale at large screens */
  .vsbar,.minitiles,.actionbar{max-width:none}
  /* Section labels */
  .sectlbl{font-size:10px;letter-spacing:2.5px;margin:10px 0}
  /* Feed panel */
  .tcl{padding:7px 14px;font-size:13px}
  .tch{font-size:12px;letter-spacing:2px;padding:9px 14px}
  /* Result screen */
  .statline .stat .v{font-size:22px}
  .statline .stat{padding:14px 8px}
  .verdict{font-size:14px}
}
@media(min-width:1800px){
  html{font-size:17px}
  .wrap{max-width:min(1440px,calc(100vw - 96px));zoom:1.25}
  .draft-left{width:420px}
  .sheet{max-width:min(720px,calc(100vw - 96px))}
}

/* ===== SVG icon system — normalize all inline icons ===== */
/* Consistent stroke-width and sizing across all inline SVGs */
svg[stroke]{stroke-width:1.75}
/* Icon size tokens via utility classes */
.ico-sm svg{width:14px;height:14px}
.ico-md svg{width:18px;height:18px}
.ico-lg svg{width:24px;height:24px}
/* Button icon alignment */
.btn svg,.iconbtn svg,.sdbtn svg{vertical-align:-.12em;flex-shrink:0}
/* Shout buttons — consistent icon color */
.shoutbtn svg{stroke:currentColor}
/* Metaline icons — keep original behavior */
.metaline-ico svg{stroke-width:1.6}

/* Budget inside draft slot — full-width above ZAR AT */
#draftBudgetSlot .budget{min-width:0;max-width:none;width:100%;grid-column:unset;justify-self:unset;padding:8px 12px;margin:0 0 8px;border-radius:8px;box-sizing:border-box}
#draftBudgetSlot .budget .v{font-size:22px}
#draftBudgetSlot .budget-top{display:flex;align-items:baseline;justify-content:space-between;gap:4px}

/* ===== Intro onboarding polish ===== */
#intro{padding-top:4px}
.top{border-bottom:1px solid color-mix(in srgb,var(--color-slate) 28%,transparent);padding-bottom:10px;margin-bottom:16px}
#logoSlogan{font-size:10px!important;color:color-mix(in srgb,var(--color-slate) 88%,var(--color-ink))!important;opacity:.9!important;line-height:1.35}
.settingsbtn:hover,.settingsbtn:focus-visible{border-color:var(--color-primary)!important;box-shadow:0 0 0 2px rgba(104,117,124,.16),var(--shadow-sm)}

#introLand{padding-top:8px;margin-bottom:0}
.v7-hero-head{padding:18px 0 16px;border-bottom:1px solid color-mix(in srgb,var(--color-slate) 24%,transparent)}
.v7-tagline{margin-bottom:10px}
.v7-hero-desc{color:color-mix(in srgb,var(--color-slate) 82%,var(--color-ink));font-size:12.5px;line-height:1.7}

.mechanics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;padding:12px 0 14px;border-top:1px solid color-mix(in srgb,var(--color-slate) 18%,transparent);border-bottom:1px solid color-mix(in srgb,var(--color-slate) 24%,transparent)}
.mstep{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:start;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--color-slate) 14%,transparent)}
.mstep:nth-last-child(-n+2){border-bottom:none}
.mn{min-width:0;padding-top:1px;color:var(--color-primary);font-size:10px;font-weight:800;letter-spacing:.55px}
.mt{font-size:12px;line-height:1.55;color:color-mix(in srgb,var(--color-ink) 92%,var(--color-slate));font-weight:600}
.mt mark{color:var(--color-ink);font-weight:850}
.howto-wrap{position:static;margin-top:10px;text-align:right}
#howtoToggle{height:36px;padding:0 13px;font-size:10px;letter-spacing:.45px;opacity:1;background:var(--surface-elevated);border-color:var(--border-default)}
#howtoToggle:hover,#howtoToggle:focus-visible{border-color:var(--color-primary);color:var(--color-ink);background:color-mix(in srgb,var(--color-primary) 5%,var(--surface-elevated))}

#introSetup{margin-top:28px}
.v7-setup-group{padding-top:22px}
.v7-setup-group:first-child{padding-top:0}
.v7-sec-lbl{font-size:10.5px;letter-spacing:.9px;color:color-mix(in srgb,var(--color-slate) 88%,var(--color-ink));margin-bottom:10px}
.v7-setup-twocol{position:relative;gap:16px;padding-top:18px}

.formpick{gap:7px}
.formpick .fbtn{padding:12px 6px;font-size:12px;border-color:var(--border-default);box-shadow:inset 0 -1px 0 rgba(16,29,40,.04)}
.formpick .fbtn:hover:not(.sel):not(.locked){border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 4%,var(--surface-elevated))}
.formpick .fbtn.sel{border-width:2px;background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(104,117,124,.2),inset 0 -1px 0 rgba(16,29,40,.12)}
.fbtn-check-ico{top:6px;right:6px;bottom:auto;color:currentColor;background:rgba(255,255,255,.18);border-radius:50%;padding:1px}

.v7-setup-twocol #chairpick{gap:7px}
#chairpick .fbtn.chairbtn{min-height:124px;padding:0;border-radius:6px;overflow:hidden;border-color:var(--border-default);background:var(--surface-elevated)}
#chairpick .fbtn.chairbtn:hover:not(.sel):not(.locked){border-color:var(--color-primary);box-shadow:0 4px 12px rgba(16,29,40,.08)}
#chairpick .fbtn.chairbtn.sel{border-width:2px;box-shadow:0 0 0 2px rgba(104,117,124,.18),0 5px 14px rgba(16,29,40,.09)}
#chairpick .chairthumb{width:100%;height:86px;aspect-ratio:auto;object-fit:cover;object-position:top center;border-radius:0;margin:0;background:color-mix(in srgb,var(--color-primary) 7%,var(--surface-muted))}
.chairbtn-name{width:100%;box-sizing:border-box;margin-top:0;padding:8px 6px 7px;background:var(--surface-bg);border-top:1px solid var(--border-subtle);color:color-mix(in srgb,var(--color-slate) 86%,var(--color-ink));font-size:12px}
#chairpick .fbtn.chairbtn.sel .chairbtn-name{background:color-mix(in srgb,var(--color-primary) 7%,var(--surface-bg))}
.chairbtn-check{top:5px;right:5px;width:17px;height:17px;font-size:10px}

.countrypick{gap:7px}
.countrypick button{padding:9px 6px;font-size:8.5px;letter-spacing:.35px;border-color:var(--border-default);box-shadow:inset 0 -1px 0 rgba(16,29,40,.04)}
.countrypick button:hover:not(.on):not(.locked){border-color:var(--color-primary)}
.countrypick button.on{background:color-mix(in srgb,var(--color-primary) 8%,var(--surface-elevated));border-color:var(--color-primary);border-width:2px;box-shadow:0 0 0 2px rgba(104,117,124,.14);color:var(--color-ink)}
.countrypick button.on::after{top:4px;right:5px;color:var(--color-primary)}

.cname-row{min-height:48px;background:var(--surface-elevated);border-color:var(--border-default)}
.cname-row:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(104,117,124,.16)}
.cinput-new{font-size:15px;color:var(--color-ink)}
.cinput-new::placeholder{color:color-mix(in srgb,var(--color-slate) 56%,transparent)}
.cname-rand{min-width:48px;justify-content:center;background:var(--surface-bg);border-left:1px solid var(--border-subtle);color:var(--color-slate)}
.cname-rand:hover,.cname-rand:focus-visible{background:color-mix(in srgb,var(--color-primary) 7%,var(--surface-bg));color:var(--color-primary)}
.cname-hint{font-size:10.5px;line-height:1.55;opacity:.9;color:color-mix(in srgb,var(--color-slate) 84%,var(--color-ink))}

.v7-cta-stack{margin-top:4px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--color-slate) 18%,transparent)}
.v7-summary{font-size:12px;margin-bottom:12px;min-height:18px;color:color-mix(in srgb,var(--color-slate) 86%,var(--color-ink))}
.v7-summary strong{font-size:12.5px}
.v7-cta-stack .btn-go{letter-spacing:2px;border:1.5px solid var(--action-primary-hover);box-shadow:0 2px 0 color-mix(in srgb,var(--color-ink) 88%,var(--action-primary-hover));font-weight:900}
.v7-cta-stack .btn-go:hover{background:color-mix(in srgb,var(--action-primary) 92%,#FFFFFF);box-shadow:0 3px 0 color-mix(in srgb,var(--color-ink) 88%,var(--action-primary-hover))}
.v7-cta-stack .btn-go:disabled{opacity:1;background:var(--disabled-bg);color:var(--disabled-text);border-color:var(--border-default);box-shadow:none}
@media(max-width:720px),(pointer:coarse){
  .mechanics{grid-template-columns:1fr;gap:0}
  .mstep:nth-last-child(-n+2){border-bottom:1px solid color-mix(in srgb,var(--color-slate) 14%,transparent)}
  .mstep:last-child{border-bottom:none}
  .v7-setup-twocol{flex-direction:column}
  .v7-setup-twocol #chairpick{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== Requested UI fixes pass ===== */
.v7-hero-head{position:relative;padding-right:210px}
.v7-hero-head .howto-wrap{position:absolute;right:0;bottom:16px;margin:0;text-align:right}
.v7-setup-twocol{padding-top:26px}
.v7-setup-twocol + .v7-setup-group{padding-top:18px}

#allBtn{min-height:40px;border:1px solid var(--border-default)!important;background:var(--surface-elevated)!important;color:var(--color-ink)!important;box-shadow:none!important;font-weight:850;letter-spacing:1px;text-transform:uppercase}
#allBtn:hover{border-color:var(--color-primary)!important;background:color-mix(in srgb,var(--color-primary) 6%,var(--surface-elevated))!important}
#allBtn svg{margin-right:7px;filter:none}
.autofill-wrap.hidden{display:none!important}
.price .oldp{display:none!important}

.draft-right .pitch{height:min(calc(100vh - 180px),760px);width:auto;max-width:100%;aspect-ratio:68/92}
#draftBudgetSlot .kasa-card{width:100%;box-sizing:border-box;margin:0 0 10px}
.kasa-sub{display:none!important}
.kasa-card{gap:5px}
.kasa-main-val{font-size:25px;letter-spacing:-.5px}
.kasa-bar-track{height:7px;border-radius:999px;overflow:hidden;background:rgba(16,29,40,.18)}
.kasa-card.kasa-deep-debt .kasa-bar-track,.kasa-card.kasa-debt .kasa-bar-track{background:rgba(255,255,255,.25)}
.kasa-bar-safe{position:absolute;top:0;bottom:0;border-radius:999px;background:rgba(255,255,255,.35);left:0;width:0;transition:left .35s ease,width .35s ease}
.kasa-zero .kasa-bar-safe,.kasa-positive .kasa-bar-safe,.kasa-rich .kasa-bar-safe{background:rgba(16,29,40,.22)}
.kasa-bar-marker{width:13px;height:13px;border-width:2px;background:currentColor;z-index:2}
.kasa-bar-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;opacity:.58;margin-top:4px}

.cap-card-suggest{border-color:#FF806B;background:linear-gradient(135deg,#F24A28 0%,#F25F40 48%,#D63D2E 100%);box-shadow:0 8px 24px rgba(242,74,40,.27);animation:capRecommendGlow 2.8s ease-in-out infinite}
.cap-card-suggest::after{position:absolute;z-index:0;inset:-70% auto -70% -38%;width:32%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:rotate(16deg);content:"";animation:capRecommendSweep 3.1s ease-in-out infinite}
.cap-card-suggest .cap-card-top,.cap-card-suggest .cap-card-meta{position:relative;z-index:1}
.cap-card-suggest .cap-card-name,.cap-card-suggest .cap-card-meta>span:not(.cap-card-power){color:#FFFFFF}
.cap-card-suggest .cap-card-badge{background:#0A1118;border-color:#0A1118;color:#FFFFFF;box-shadow:0 3px 10px rgba(10,17,24,.28)}
@keyframes capRecommendGlow{0%,100%{box-shadow:0 7px 20px rgba(242,74,40,.2)}50%{box-shadow:0 10px 30px rgba(242,74,40,.42)}}
@keyframes capRecommendSweep{0%,52%{left:-42%;opacity:0}62%{opacity:1}88%,100%{left:118%;opacity:0}}
body.reduced-motion .cap-card-suggest,.cap-card-suggest:focus-visible{animation:none}
body.reduced-motion .cap-card-suggest::after{animation:none}
@media(prefers-reduced-motion:reduce){.cap-card-suggest,.cap-card-suggest::after{animation:none!important}}

.pitch-overlay #cardrow{margin-top:4px;max-width:220px}

html.copa-mobile-device .tools{flex:0 0 auto}
html.copa-mobile-device .tools #howtoToggle{
  width:44px;
  min-width:44px;
  padding:0;
  font-size:0;
  letter-spacing:0;
  justify-content:center;
}
html.copa-mobile-device .tools #howtoToggle svg{width:16px;height:16px;margin:0!important}
@media(max-width:760px){
  .v7-hero-head{padding-right:0}
  .v7-hero-head .howto-wrap{position:static;margin-top:12px;text-align:left}
  .draft-right .pitch{width:100%;height:auto}
  .hub-action-panel{position:sticky;top:6px;z-index:30}
}

/* ===== Setup + draft cleanup pass ===== */
.v7-hero-head .howto-wrap{top:124px;bottom:auto}
.v7-setup-twocol{border-top:0!important;padding-top:12px!important}
.v7-setup-twocol::before{content:none!important}
.v7-setup-group:nth-of-type(2){padding-top:14px}
.v7-sec-lbl{margin-bottom:12px}
.v7-setup-twocol + .v7-setup-group{padding-top:14px}
.howto-mcard-title-group{padding-top:22px}
.howto-mcard-top{align-items:flex-start}

.draft-cols{
  justify-content:center;
  align-items:flex-start;
  gap:28px;
  max-width:1120px;
  margin:0 auto;
  padding:8px 22px 24px;
}
.draft-left,.draft-right{
  background:color-mix(in srgb,var(--surface-elevated) 86%,transparent);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
}
.draft-left{width:410px;padding:12px;box-sizing:border-box}
.draft-right{flex:0 1 auto;padding:10px;box-sizing:border-box}
.draft-right .pitch{height:min(calc(100vh - 205px),720px)}

.kasa-card{min-height:74px;padding:7px 11px 5px}
.kasa-top-row{margin-bottom:2px}
.kasa-top-left{font-size:8px;letter-spacing:1.2px}
.kasa-status-badge{font-size:7px;padding:2px 6px}
.kasa-main-val{font-size:21px!important;margin-bottom:0}
.kasa-metric-lbl{font-size:7px}
.kasa-metric-val{font-size:11px}
.kasa-metrics{margin-bottom:2px}
.kasa-bar-track{height:6px}
.kasa-bar-labels{font-size:6.5px;margin-top:3px}
.hub-stat-row .mtile{min-height:74px;padding:6px 9px}
.hub-stat-row .mtile .mh{font-size:8px}
.hub-stat-row .mtile .mv{font-size:16px}
.hub-stat-row .mtile .ms{font-size:7.5px}
#powTile .mv{font-size:18px!important}
#trustTile .mv{font-size:13px}

.opt .price .p{color:var(--color-ink);border:1px solid rgba(16,29,40,.08)}
.opt .price-free .p,.opt .price-cheap .p{background:#F25F40;color:#0A1118}
.opt .price-fair .p{background:#F25F40;color:#0A1118}
.opt .price-mid .p{background:#F24A28;color:#101D28}
.opt .price-high .p{background:#DA3D2E;color:#FFFFFF}
.opt .price-premium .p{background:#DA3D2E;color:#FFFFFF}
.opt.tooexp .price .p{background:var(--color-ink);color:var(--color-background);border-color:var(--color-ink)}

@media(max-width:760px){
  .v7-hero-head .howto-wrap{position:static;margin-top:14px;text-align:left}
  .draft-cols{height:auto;overflow:visible;flex-direction:column;gap:12px;padding:8px 10px 18px}
  .draft-left,.draft-right{width:100%;padding:10px}
  .draft-right{align-items:center}
  .draft-right .pitch{width:100%;height:auto;max-height:none}
  .kasa-card{min-height:70px}
  .hub-stat-row .mtile{min-height:66px}
}

/* ===== Current layout pass: single-row setup + tighter market column ===== */
#introSetup{width:min(1040px,100%);margin-inline:auto}
.v7-setup-twocol{display:flex!important;flex-direction:column!important;gap:18px!important}
.v7-setup-subcol{width:100%;flex:none}
.v7-setup-twocol .formpick{
  display:grid!important;
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  gap:6px!important;
}
.v7-setup-twocol .formpick .fbtn{
  min-height:38px;
  padding:8px 4px;
  font-size:10.5px;
}
.v7-setup-twocol .form-dot-preview{
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(4px) scale(.82);
  transform-origin:50% 100%;
  bottom:calc(100% + 9px);
  border:1px solid rgba(243,245,244,.18);
  box-shadow:0 10px 24px rgba(16,29,40,.22);
}
.v7-setup-twocol .fbtn:hover:not(.locked) .form-dot-preview,
.v7-setup-twocol .fbtn:focus-visible:not(.locked) .form-dot-preview{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1.18);
}
.v7-setup-twocol #chairpick{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
  overflow:visible!important;
}
.v7-setup-twocol #chairpick .fbtn.chairbtn{
  width:100%;
  min-width:0;
  max-width:none;
  min-height:112px;
}
.v7-setup-twocol #chairpick .chairthumb{height:76px}
.v7-hero-head .howto-wrap{top:104px}

.draft-left,.draft-right{
  background:color-mix(in srgb,var(--surface-elevated) 54%,transparent);
  backdrop-filter:blur(2px);
}
#pitch .roundel{overflow:visible}
#pitch .roundel.full{overflow:visible}
#pitch .roundel.full .rname{
  position:absolute;
  top:calc(100% + 2px);
  left:50%;
  transform:translateX(-50%);
  max-width:none;
  overflow:visible;
  white-space:nowrap;
  color:#FFFFFF;
  text-shadow:0 1px 3px rgba(10,17,24,.75),0 0 6px rgba(10,17,24,.45);
  pointer-events:none;
}

/* Filled draft tokens use the same ink card language as the dark interface. */
html[data-theme="dark"] #pitch .roundel.full{
  background:#101D28!important;
  color:#F3F5F4!important;
  border-color:rgba(243,245,244,.24)!important;
  box-shadow:0 3px 8px rgba(10,17,24,.42),inset 0 1px 0 rgba(243,245,244,.07)!important;
}
html[data-theme="dark"] #pitch .roundel.full .rpos,
html[data-theme="dark"] #pitch .roundel.full .rname{
  color:#F3F5F4!important;
  text-shadow:none!important;
}

.hcol-r > .hub-action-panel,
.hcol-r > .sectlbl,
.hcol-r > .shopcards,
.hcol-r > #freeAgentRow,
.hcol-r > .feedwrap{
  width:100%;
  max-width:430px;
  margin-left:0;
  margin-right:auto;
  box-sizing:border-box;
}
.hcol-r .shopcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hcol-r .cardtile{min-width:0}

@media(max-width:920px){
  .v7-setup-twocol .formpick{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .v7-setup-twocol #chairpick{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .v7-setup-twocol .formpick{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v7-setup-twocol #chairpick{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hcol-r .shopcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Current cleanup: ratings, action panel, modal and copy alignment ===== */
.mechanics{gap:0 30px}
.mstep{grid-template-columns:30px minmax(0,1fr);align-items:center;column-gap:8px}
.mn{display:inline-flex;align-items:center;justify-content:flex-start;font-variant-numeric:tabular-nums;line-height:1}
.mt{margin:0;text-wrap:pretty}

.btn-roll{
  background:var(--color-slate)!important;
  color:var(--color-background)!important;
  border-color:color-mix(in srgb,var(--color-slate) 74%,var(--color-ink))!important;
  box-shadow:0 2px 0 color-mix(in srgb,var(--color-slate) 70%,var(--color-ink))!important;
}
.btn-roll:hover{
  background:color-mix(in srgb,var(--color-slate) 86%,var(--color-ink))!important;
}
.dsvg{filter:drop-shadow(0 2px 0 color-mix(in srgb,var(--color-slate) 64%,var(--color-ink)))}

.hub-action-panel{
  width:100%;
  max-width:430px;
  margin-left:0;
  margin-right:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.hub-action-panel .actionbar{
  display:grid;
  grid-template-columns:minmax(164px,176px) max-content;
  grid-template-rows:1fr;
  align-items:stretch;
  justify-content:start;
  gap:8px;
  height:272px;
  min-height:0;
}
.hub-action-panel .presbtngp{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0;
  padding:6px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-elevated);
  box-shadow:var(--shadow-sm);
  box-sizing:border-box;
}
.hub-action-panel .btn-pres{
  width:100%!important;
  height:auto!important;
  flex:1 1 auto;
  min-height:0;
  padding:0;
  border-radius:5px;
  overflow:hidden;
}
.hub-action-panel .presbtnphoto{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hub-action-panel .presbtnlabel{
  margin-top:5px;
  padding:4px 3px;
  border-radius:4px;
  background:var(--color-ink);
  color:var(--color-background);
  font-family:var(--mono);
  font-size:7px;
  font-weight:900;
  letter-spacing:.4px;
  line-height:1.15;
  text-align:center;
}
.hub-action-panel .actionbar #talkBtn.hidden{display:none}

.pitch-overlay #cardrow .card .copy.active-stance{
  min-width:38px;
  text-align:center;
}

@media(max-width:720px){
  .hub-action-panel{max-width:none}
  .mechanics{gap:0}
}

/* ===== Match Prep polish pass ===== */
@media(min-width:980px){
  #hub.wrap{max-width:min(1480px,calc(100vw - 56px))}
  #hub .hubcols{
    grid-template-columns:minmax(720px,1.92fr) minmax(390px,.78fr);
    gap:24px;
  }
}
@media(min-width:1440px){
  #hub .hubcols{grid-template-columns:minmax(760px,1.98fr) minmax(410px,.82fr);gap:24px}
}

#hub .hcol-r > .hub-action-panel,
#hub .hcol-r > .sectlbl,
#hub .hcol-r > .shopcards,
#hub .hcol-r > #freeAgentRow,
#hub .hcol-r > .feedwrap{
  max-width:100%;
}

#hub .hub-stat-row{
  gap:8px;
}
#hub .hub-stat-row .kasa-card,
#hub .hub-stat-row .mtile{
  border-color:color-mix(in srgb,var(--border-subtle) 82%,var(--color-slate));
  border-radius:10px;
  box-shadow:0 2px 7px rgba(16,29,40,.08);
}
#hub .mtile-info{
  background:rgba(243,245,244,.22);
  backdrop-filter:blur(2px);
}

#hub .hub-action-panel .presbtnphoto{
  object-fit:cover;
  object-position:center 10%;
}
#hub .hub-action-panel .presbtnlabel{
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
  letter-spacing:.7px;
}
#hub .hub-action-panel .actionbar #talkBtn{
  background:color-mix(in srgb,var(--color-slate) 20%,var(--surface-elevated));
  color:var(--color-slate);
  border-color:color-mix(in srgb,var(--color-slate) 32%,var(--border-subtle));
  box-shadow:0 2px 0 color-mix(in srgb,var(--color-slate) 20%,transparent);
}
#hub .hub-action-panel .actionbar #talkBtn:hover:not(:disabled){
  background:color-mix(in srgb,var(--color-slate) 30%,var(--surface-elevated));
  color:var(--color-ink);
}
#hub .hub-action-panel .actionbar #talkBtn:disabled,
#hub .hub-action-panel .actionbar #talkBtn.used{
  opacity:.62;
  background:var(--surface-muted);
  color:color-mix(in srgb,var(--color-slate) 72%,var(--disabled-text));
  border-color:var(--border-subtle);
  box-shadow:none;
  cursor:not-allowed;
}

#hub .sectlbl{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  margin:10px 0 8px;
  padding-bottom:6px;
  font-size:10px;
  letter-spacing:2.4px;
}
#hub .hcol-r .shopcards{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
@media(max-width:1180px){
  #hub .hcol-r .shopcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

#hub .pitch-overlay{
  top:14px;
  left:14px;
  max-width:min(260px,46%);
}
#hub .pitch-overlay::before{
  content:var(--copa-active-effects,"AKTİF ETKİLER");
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 5px;
  padding:3px 7px;
  border:1px solid rgba(243,245,244,.70);
  border-radius:5px;
  background:rgba(243,245,244,.88);
  color:var(--color-slate);
  font-family:var(--mono);
  font-size:7px;
  font-weight:900;
  letter-spacing:1.3px;
  box-shadow:0 2px 5px rgba(16,29,40,.12);
}
#hub .pitch-overlay .overlay-chip,
#hub .pitch-overlay #cardrow .card{
  min-height:26px;
  border-radius:6px!important;
}

@media(max-width:720px){
  #hub .hub-action-panel .actionbar{
    grid-template-columns:92px minmax(0,1fr);
    height:auto;
  }
  #hub .hub-action-panel .presbtngp{
    height:auto;
    max-height:none;
    min-height:124px;
  }
  #hub .hub-action-panel .btn-pres{
    height:auto!important;
    min-height:88px!important;
    flex:1 1 auto;
  }
  #hub .hcol-r .shopcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hub .pitch-overlay{max-width:68%}
}

/* ===== Current request: kasa inside chairman panel ===== */
#hub .hub-stat-row{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
#hub .hub-stat-row .mtile{
  min-height:58px;
  padding:7px 10px;
  gap:2px;
}
#hub .hub-stat-row .mtile .mh{font-size:8px}
#hub .hub-stat-row .mtile .mv{font-size:17px;line-height:1}
#hub .hub-stat-row .mtile .ms{font-size:7.5px}

#hub .hub-action-panel .actionbar{
  grid-template-columns:minmax(218px,232px) minmax(166px,176px);
  height:auto;
  align-items:start;
}
#hub .hub-action-panel .presbtngp{
  gap:7px;
  height:auto;
  max-height:none;
  min-height:0;
}
#hub .hub-action-panel .presbtngp .kasa-card{
  width:100%;
  min-height:78px;
  margin:0;
  padding:7px 9px 5px;
  border-radius:8px;
  box-shadow:none;
  gap:2px;
}
#hub .hub-action-panel .presbtngp .kasa-top-row{margin-bottom:0}
#hub .hub-action-panel .presbtngp .kasa-main-val{
  font-size:22px;
  line-height:.95;
  margin:1px 0 0;
}
#hub .hub-action-panel .presbtngp .kasa-sub{display:none}
#hub .hub-action-panel .presbtngp .kasa-metrics{margin-top:2px}
#hub .hub-action-panel .presbtngp .kasa-metric-lbl{font-size:6px}
#hub .hub-action-panel .presbtngp .kasa-metric-val{font-size:11px}
#hub .hub-action-panel .presbtngp .kasa-bar-wrap{margin-top:3px}
#hub .hub-action-panel .presbtngp .kasa-bar-labels{font-size:6px}
#hub .hub-action-panel .btn-pres{
  height:186px!important;
  min-height:0!important;
  flex:0 0 auto;
}

@media(max-width:720px){
  #hub .hubcols{
    display:flex;
    flex-direction:column;
  }
  #hub .hcol-l,
  #hub .hcol-r{
    display:contents;
  }
  #hub .hub-action-panel{order:1}
  #hub .hcol-l>.vsbar{order:2}
  #hub .hub-stat-row{order:3}
  #hub .styletag{order:4}
  #hub .final-pills{order:5}
  #hub .pitch-area{order:6}
  #hub .injbar{order:7}
  #hub .hcol-r>.sectlbl{order:8}
  #hub .hcol-r>.shopcards{order:9}
  #hub .hcol-r>#freeAgentRow{order:10}
  #hub .hcol-r>.feedwrap{order:11}
  #hub .hcol-r{
    border-top:0;
    padding-top:0;
    margin-top:0;
  }
  #hub .hub-action-panel{
    position:sticky;
    top:4px;
    z-index:40;
  }
  #hub .hub-action-panel .actionbar{
    grid-template-columns:minmax(112px,128px) minmax(0,1fr);
    gap:7px;
  }
  #hub .hub-action-panel .presbtngp .kasa-card{
    min-height:66px;
    padding:6px 7px 4px;
  }
  #hub .hub-action-panel .presbtngp .kasa-main-val{font-size:18px}
  #hub .hub-action-panel .presbtngp .kasa-metrics,
  #hub .hub-action-panel .presbtngp .kasa-bar-wrap{display:none}
  #hub .hub-action-panel .btn-pres{
    height:88px!important;
    min-height:88px!important;
  }
  #hub .hub-stat-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  #hub .hub-stat-row .mtile{
    min-height:54px;
  }
}

/* ===== Current request: kasa readability + action panel final overrides ===== */
#hub .hcol-l>.vsbar{
  max-width:100%;
  margin-inline:auto;
}
#hub .vsbar .mid{
  flex:0 0 92px;
  padding-left:8px;
  padding-right:8px;
}
#hub .vsbar .side{
  padding-left:14px;
  padding-right:14px;
}

#hub .hub-action-panel .actionbar{
  grid-template-columns:minmax(218px,238px) minmax(160px,172px);
  gap:8px;
}
#hub .hub-action-panel .presbtngp{
  gap:4px;
  padding:6px;
}
#hub .hub-action-panel .presbtngp .kasa-card{
  min-height:76px;
  padding:7px 9px 5px;
}
#hub .hub-action-panel .presbtngp .kasa-top-row{
  justify-content:flex-end;
  margin-bottom:1px;
}
#hub .hub-action-panel .presbtngp .kasa-status-badge{
  font-size:6.5px;
  letter-spacing:.55px;
  border-radius:999px;
  padding:3px 7px;
}
#hub .hub-action-panel .presbtngp .kasa-main-val{
  font-size:21px!important;
  margin:0;
}
#hub .hub-action-panel .presbtngp .kasa-metrics{
  justify-content:flex-end;
  margin:0 0 2px;
}
#hub .hub-action-panel .presbtngp .kasa-metric{
  flex:0 0 auto;
  min-width:72px;
  text-align:right;
}
#hub .hub-action-panel .presbtngp .kasa-bar-track{
  height:8px;
  border-radius:999px;
  overflow:visible;
  background:linear-gradient(90deg,rgba(66,1,2,.40) 0%,rgba(66,1,2,.34) 34%,rgba(242,74,40,.34) 48%,rgba(242,74,40,.38) 100%)!important;
  box-shadow:inset 0 1px 2px rgba(16,29,40,.18);
}
#hub .hub-action-panel .presbtngp .kasa-bar-zero{
  position:absolute;
  top:-3px;
  bottom:-3px;
  width:2px;
  border-radius:2px;
  background:rgba(255,255,255,.82);
  box-shadow:0 0 0 1px rgba(16,29,40,.18);
  transform:translateX(-50%);
  z-index:1;
}
#hub .hub-action-panel .presbtngp .kasa-bar-marker{
  width:14px;
  height:14px;
  background:var(--color-ink);
  border:2px solid rgba(255,255,255,.92);
  z-index:2;
}
#hub .hub-action-panel .presbtngp .kasa-bar-labels{
  opacity:.72;
}
#hub .hub-action-panel .btn-pres{
  height:170px!important;
  border-radius:6px 6px 3px 3px;
}
#hub .hub-action-panel .presbtnlabel{
  margin-top:0;
  min-height:20px;
  width:100%;
  border:0;
  cursor:pointer;
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
#hub .hub-action-panel .presbtnlabel:hover{
  background:color-mix(in srgb,var(--color-ink) 82%,var(--color-primary));
}

#hub .hub-action-panel .actionbar #talkBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow:hidden;
  color:var(--color-slate);
}
#hub .hub-action-panel .actionbar #talkBtn .talk-ico{
  flex:0 0 auto;
  max-width:18px;
}
#hub .hub-action-panel .actionbar #talkBtn span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.talk-wave{
  transform-origin:center;
  animation:talkWave 1.55s ease-in-out infinite;
}
.talk-wave-2{animation-delay:.22s}
@keyframes talkWave{
  0%,100%{opacity:.45;transform:translateX(-1px)}
  45%{opacity:1;transform:translateX(1px)}
}

@media(max-width:720px){
  #hub .hub-action-panel .actionbar{
    grid-template-columns:minmax(122px,138px) minmax(0,1fr);
  }
  #hub .hub-action-panel .btn-pres{
    height:86px!important;
    min-height:86px!important;
  }
  #hub .hub-action-panel .presbtnlabel{
    min-height:19px;
    font-size:6.5px;
  }
  #hub .vsbar .mid{flex-basis:72px}
  #hub .vsbar .side{padding-left:7px;padding-right:7px}
}

/* ===== Responsive match-prep repair: tablets and phones ===== */
@media(max-width:980px){
  #hub.wrap{
    width:100%;
    max-width:min(760px,calc(100vw - 24px));
    overflow-x:hidden;
  }
  #hub .hubcols{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }
  #hub .hcol-l,
  #hub .hcol-r{
    display:contents!important;
  }
  #hub .hub-action-panel{order:1}
  #hub .hcol-l>.vsbar{order:2}
  #hub .hub-stat-row{order:3}
  #hub .styletag{order:4}
  #hub .final-pills{order:5}
  #hub .pitch-area{order:6}
  #hub #hubBenchSection{order:7}
  #hub .injbar{order:8}
  #hub .hcol-r>.sectlbl{order:9}
  #hub .hcol-r>.shopcards{order:10}
  #hub .hcol-r>#freeAgentRow{order:11}
  #hub .hcol-r>.feedwrap{order:12}
  #hub .hub-action-panel,
  #hub .hcol-l>.vsbar,
  #hub .hub-stat-row,
  #hub .styletag,
  #hub .final-pills,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #hub .injbar,
  #hub .hcol-r>.sectlbl,
  #hub .hcol-r>.shopcards,
  #hub .hcol-r>#freeAgentRow,
  #hub .hcol-r>.feedwrap{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    min-width:0;
  }
  #hub .hub-action-panel{
    position:sticky;
    top:6px;
    z-index:45;
    margin-bottom:8px;
  }
  #hub .hcol-r .shopcards,
  #hub #freeAgentRow .shopcards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
  }
  #hub .hcol-r .shopcard,
  #hub #freeAgentRow .shopcard{
    min-width:0;
  }
}

@media(max-width:620px){
  #hub.wrap{
    max-width:min(430px,calc(100vw - 18px));
    padding-inline:10px;
  }
  #hub .hub-action-panel .actionbar{
    grid-template-columns:minmax(112px,128px) minmax(0,1fr);
    gap:7px;
  }
  #hub .hub-action-panel .presbtngp{
    padding:6px;
  }
  #hub .hub-action-panel .presbtngp .kasa-card{
    min-height:70px;
    padding:6px 7px 4px;
  }
  #hub .hub-action-panel .presbtngp .kasa-status-badge{
    font-size:6px;
    padding:2px 6px;
  }
  #hub .hub-action-panel .presbtngp .kasa-main-val{
    font-size:18px!important;
  }
  #hub .hub-action-panel .presbtngp .kasa-metrics,
  #hub .hub-action-panel .presbtngp .kasa-bar-wrap{
    display:none;
  }
  #hub .hub-action-panel .btn-pres{
    height:84px!important;
    min-height:84px!important;
  }
  #hub .hub-action-panel .presbtnlabel{
    min-height:20px;
    font-size:6px;
  }
  #hub .hub-stat-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  #hub .hub-stat-row .mtile{
    min-height:58px;
    padding:7px 8px;
  }
  #hub .pitch-overlay{
    max-width:74%;
  }
  #hub .hcol-r .shopcards,
  #hub #freeAgentRow .shopcards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  #hub .hcol-r .shopcard,
  #hub #freeAgentRow .shopcard{
    padding-inline:8px;
  }
}

/* ===== 2026-07 responsive stability + modal cleanup ===== */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,canvas{max-width:100%}
.wrap,.screen,#app,#hub,#draft{max-width:100%;overflow-x:hidden}

.draft-cols{max-width:100%;overflow:visible}
@media(min-width:721px){
  .draft-cols{
    display:grid;
    grid-template-columns:minmax(300px,420px) minmax(280px,1fr);
    align-items:start;
    gap:20px;
  }
  .draft-left,.draft-right{width:100%!important;min-width:0}
  .draft-right{display:flex;justify-content:center}
  .draft-right .pitch{width:min(100%,430px)!important;height:auto!important;min-width:280px;max-height:calc(100dvh - 170px)}
}
@media(max-width:900px){
  .draft-cols{grid-template-columns:1fr!important;height:auto!important;padding-inline:12px!important}
  .draft-right .pitch{width:min(100%,430px)!important;min-width:0!important;max-height:none!important}
}

#hub .hubcols{grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:12px}
#hub .hub-stat-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch;
  width:100%;
  max-width:100%;
}
#hub .hub-stat-row .mtile,
#hub .hub-stat-row .kasa-card{
  min-width:0!important;
  min-height:74px!important;
  margin:0!important;
  padding:9px 11px!important;
}
#hub .hub-stat-row .kasa-card .kasa-top-row{margin-bottom:1px}
#hub .hub-stat-row .kasa-card .kasa-main-val{font-size:22px!important;line-height:1}
#hub .hub-stat-row .kasa-card .kasa-sub{display:none}
#hub .hub-stat-row .kasa-card .kasa-metrics{margin-top:3px}
#hub .hub-stat-row .kasa-card .kasa-bar-wrap{margin-top:5px}

#hub .hcol-r .shopcards,
#hub #freeAgentRow .shopcards{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
.shopcard,.feeditem,.cardtile{content-visibility:auto;contain-intrinsic-size:160px 120px}

.cp-fx,.cptraits{display:grid;justify-items:center;text-align:center}
.cp-fx-item{justify-content:center!important;text-align:center!important}
.cp-fx-item span:last-child{text-align:center}
.howto-mico{margin-top:16px}
.de-bar-row{gap:10px!important}
.de-bar-val{margin-left:6px}
.talkmodal-simple{padding:18px 20px 20px}
.talkmodal-simple .talk-list{gap:10px}
.talkmodal-simple .talk-choice{min-height:64px;padding:14px 16px}
.talkmodal-simple .talk-copy{align-self:center}
.talkmodal-simple .sst{font-size:18px}
.reward-card .reward-badge{display:none!important}

.riskdraft-modal{width:min(430px,calc(100vw - 28px))!important;padding:20px 20px 22px!important}
.risk-offer{grid-template-columns:50px minmax(0,1fr)!important;gap:14px!important;padding:13px 15px 13px 13px!important}
.risk-offer-head b{font-size:19px!important}
.risk-offer-head em{display:none!important}
.risk-offer-line{font-size:11px!important;line-height:1.35!important}
.risk-offer-line span{font-size:8.5px!important}

.pen-modal{width:min(520px,calc(100vw - 24px));padding:0 18px 18px;text-align:center}
.pen-head{background:var(--color-ink);color:var(--surface-elevated);margin:0 -18px 14px;padding:14px 18px;border-radius:10px 10px 0 0}
.pen-kicker{font-family:var(--mono);font-size:10px;letter-spacing:3px;font-weight:900}
.pen-score{font-family:var(--disp);font-size:46px;line-height:1;margin-top:5px}
.pen-sudden{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;background:#F24A28;color:var(--color-ink);font-family:var(--mono);font-size:8px;font-weight:900;letter-spacing:1px}
.pen-board{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin-bottom:12px}
.pen-board>div{border:1px solid var(--border-subtle);border-radius:8px;padding:9px;background:var(--surface-muted)}
.pen-board b{display:block;font-size:12px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pen-slots{display:flex;gap:5px;flex-wrap:wrap}
.pen-slot{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--border-subtle);border-radius:50%;font-family:var(--mono);font-size:10px;font-weight:900;background:var(--surface-elevated);color:var(--color-slate)}
.pen-slot.goal{background:var(--color-primary);border-color:var(--color-primary);color:#FFFFFF}
.pen-slot.save{background:#68757C;border-color:#68757C;color:#FFFFFF}
.pen-slot.miss{background:#F24A28;border-color:#F24A28;color:var(--color-ink)}
.pen-stage{position:relative;height:150px;border-radius:12px;background:linear-gradient(180deg,#4E9B65,#F24A28);overflow:hidden;border:1px solid rgba(16,29,40,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.16)}
.pen-goal-frame{position:absolute;left:12%;right:12%;top:16px;height:72px;border:3px solid rgba(255,255,255,.85);border-bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr}
.pen-goal-frame span+span{border-left:1px solid rgba(255,255,255,.35)}
.pen-keeper{position:absolute;left:var(--gk-x,50%);top:54px;transform:translateX(-50%);color:#FFFFFF;transition:left .22s ease}
.pen-ball{position:absolute;left:var(--ball-x,50%);bottom:22px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 8px rgba(10,17,24,.3);transform:translateX(-50%);transition:left .22s ease,bottom .22s ease}
.pen-flash{margin:10px auto 0;font-family:var(--disp);font-size:24px;font-weight:900;color:#DA3D2E}
.pen-flash.goal{color:var(--color-primary)}
.pen-phase{display:grid;gap:2px;margin:12px 0 8px}
.pen-phase b{font-family:var(--mono);letter-spacing:2px;font-size:12px}
.pen-phase span,.pen-actors{font-size:12px;color:var(--color-slate)}
.pen-actors{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.pen-actors span{background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:8px;padding:6px}
.pen-actors em{font-style:normal;font-family:var(--mono);color:var(--color-primary);font-weight:900}
.pen-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.pen-actions .btn,.pen-final-btn{padding:12px 10px;font-size:13px;font-weight:900}
@media(max-width:620px){
  #hub .hubcols{display:flex!important;flex-direction:column!important}
  #hub .hub-action-panel{order:1;position:sticky;top:6px;z-index:45}
  #hub .vsbar{order:2}
  #hub .hub-stat-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;order:3}
  #hub .hub-stat-row .mtile,#hub .hub-stat-row .kasa-card{min-height:62px!important;padding:6px!important}
  #hub .hub-stat-row .mtile .mh,#hub .hub-stat-row .kasa-metric-lbl{font-size:6.5px!important}
  #hub .hub-stat-row .mtile .mv,#hub .hub-stat-row .kasa-main-val{font-size:16px!important}
  #hub .hub-stat-row .kasa-metrics,#hub .hub-stat-row .kasa-bar-wrap{display:none!important}
  #hub .hub-action-panel .btn-pres{height:96px!important;min-height:96px!important}
  #hub .hcol-r .shopcards,#hub #freeAgentRow .shopcards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pen-board,.pen-actors{grid-template-columns:1fr}
  .pen-stage{height:132px}
}

/* ===== Final responsive / gameplay modal overrides ===== */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,canvas{max-width:100%}
.wrap,.screen,#app,#hub,#draft{max-width:100%;overflow-x:hidden}

#draft .draft-cols{
  display:grid;
  grid-template-columns:minmax(280px,420px) minmax(260px,360px);
  justify-content:center;
  align-items:start;
  gap:24px;
  width:min(100%,960px);
  margin-inline:auto;
}
#draft .draft-left,#draft .draft-right{min-width:0;width:100%}
#draft .draft-right .pitch{width:100%;min-width:260px;max-width:360px;margin-inline:auto}

#hub .hub-stat-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  max-width:100%;
}
#hub .hub-stat-row .mtile,
#hub .hub-stat-row .kasa-card{
  min-width:0!important;
  min-height:72px!important;
}
.talk-badge,.talk-effect,.talk-row .ssd{display:none!important}
.talkmodal-simple .talk-choice{grid-template-columns:46px 1fr;align-items:center}
.reward-card .reward-badge{display:none!important}
.reward-card.is-disabled .reward-meta:empty,
.reward-card.is-disabled .reward-status:empty{display:none!important}
.risk-offer-head em{display:none!important}

.pen-modal .pen-score{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  font-size:16px;
}
.pen-modal .pen-score b{font-family:var(--disp);font-size:38px}
.pen-goal{
  position:relative;
  height:150px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,#4E9B65,#F24A28);
  border:1px solid rgba(16,29,40,.16);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
}
.pen-net{
  position:absolute;
  left:10%;
  right:10%;
  top:16px;
  height:72px;
  border:3px solid rgba(255,255,255,.86);
  border-bottom:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 28px),repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 22px);
}
.pen-goal .pen-keeper{
  position:absolute;
  left:50%;
  top:58px;
  width:38px;
  height:44px;
  transform:translateX(-50%);
}
.pen-goal .pen-keeper::before{
  content:"";
  position:absolute;
  inset:0;
  background:currentColor;
  color:#FFFFFF;
  clip-path:polygon(44% 4%,56% 4%,60% 18%,72% 36%,68% 44%,56% 28%,56% 58%,70% 94%,60% 98%,50% 70%,40% 98%,30% 94%,44% 58%,44% 28%,32% 44%,28% 36%,40% 18%);
  opacity:.95;
}
.pen-goal .pen-keeper.is-ready{animation:keeperPulse 1s ease-in-out infinite}
.pen-goal .pen-ball{
  position:absolute;
  left:50%;
  bottom:20px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 2px 8px rgba(10,17,24,.3);
  transform:translateX(-50%);
}
@keyframes keeperPulse{50%{transform:translateX(-50%) translateY(-3px)}}
.pen-slots{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:12px 0;
  text-align:left;
}
.pen-slots>div{
  border:1px solid var(--border-subtle);
  background:var(--surface-muted);
  border-radius:8px;
  padding:8px;
}
.pen-slots span:first-child{
  display:block;
  margin-bottom:6px;
  font-family:var(--mono);
  font-size:9px;
  font-weight:900;
  color:var(--color-slate);
  letter-spacing:1px;
}
.pen-dot{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:4px;
  border:1px solid var(--border-subtle);
  border-radius:50%;
  background:var(--surface-elevated);
  font-family:var(--mono);
  font-size:11px;
  font-weight:900;
}
.pen-dot.is-goal{background:var(--status-success);border-color:var(--status-success);color:var(--status-on-success)}
.pen-dot.is-miss{background:#68757C;border-color:#68757C;color:#FFFFFF}
.pen-dir-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pen-continue{width:100%}

@media(max-width:900px){
  #draft .draft-cols{
    grid-template-columns:minmax(0,1fr);
    width:min(100%,460px);
    gap:14px;
  }
  #draft .draft-right{order:2}
  #draft .draft-right .pitch{
    min-width:0;
    width:100%;
    max-width:420px;
    aspect-ratio:68/96;
  }
  #draft .draft-left{order:1}
}
@media(max-width:760px){
  #hub .hubcols{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:10px!important;
  }
  #hub .hcol-l,#hub .hcol-r{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #hub .hub-action-panel{
    position:sticky;
    top:6px;
    z-index:45;
  }
  #hub .hub-stat-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #hub .hcol-r .shopcards,
  #hub #freeAgentRow .shopcards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:480px){
  #hub .hub-stat-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #hub .hcol-r .shopcards,
  #hub #freeAgentRow .shopcards{
    grid-template-columns:1fr!important;
  }
  .pen-dir-grid,.pen-slots{grid-template-columns:1fr}
  .pen-modal .pen-score{grid-template-columns:1fr;text-align:center}
}

/* ===== Hub scale + president action button final override ===== */
#hub.wrap{
  width:min(100%,1540px)!important;
  max-width:calc(100vw - 36px)!important;
}
#hub .hubcols{
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:minmax(0,1fr) minmax(250px,300px)!important;
  gap:12px!important;
  align-items:start!important;
}
#hub #hubPitch{
  width:100%!important;
  height:clamp(500px,45vw,640px)!important;
  aspect-ratio:auto!important;
  max-height:calc(100dvh - 310px);
  min-height:460px;
}
#hub .pitch-area{
  max-width:100%;
  overflow:hidden;
}
#hub .hub-action-panel .btn-pres{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:row!important;
  gap:10px!important;
  padding:13px 14px!important;
  background:color-mix(in srgb,var(--color-slate) 18%,var(--surface-elevated))!important;
  color:var(--color-slate)!important;
  border:1px solid color-mix(in srgb,var(--color-slate) 32%,var(--border-subtle))!important;
  box-shadow:0 2px 0 color-mix(in srgb,var(--color-slate) 20%,transparent)!important;
  font-family:var(--disp)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:1.3px!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
#hub .hub-action-panel .btn-pres:hover:not(:disabled){
  background:color-mix(in srgb,var(--color-slate) 28%,var(--surface-elevated))!important;
  color:var(--color-ink)!important;
}
#hub .hub-action-panel .btn-pres.locked{
  cursor:pointer;
}
#hub .hub-action-panel .btn-pres img,
#hub .hub-action-panel .presbtnphoto,
#hub .hub-action-panel .presbtnlabel{
  display:none!important;
}
.pres-mascot{
  width:22px;
  height:22px;
  flex:0 0 auto;
}
.pres-mascot-head{
  transform-origin:19px 19px;
  animation:presMascotNod 1.8s ease-in-out infinite;
}
.pres-mascot-tie{
  fill:currentColor;
  stroke:none;
  opacity:.78;
}
@keyframes presMascotNod{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-1px) rotate(-3deg)}
}
@media(min-width:1300px){
  #hub.wrap{max-width:min(1540px,calc(100vw - 48px))!important}
  #hub #hubPitch{height:clamp(500px,42vw,620px)!important}
}
@media(max-width:900px){
  #hub.wrap{max-width:calc(100vw - 24px)!important}
  #hub .hubcols{
    display:flex!important;
    flex-direction:column!important;
  }
  #hub .hcol-l,
  #hub .hcol-r{
    display:contents!important;
  }
  #hub .hub-action-panel{order:1;position:sticky;top:6px;z-index:45}
  #hub .vsbar{order:2}
  #hub .hub-stat-row{order:3}
  #hub .pitch-area{order:4}
  #hub #hubBenchSection{order:5}
  #hub .fixturebar{order:6}
  #hub .hcol-r > .sectlbl{order:7}
  #hub .hcol-r > .shopcards,
  #hub .hcol-r > #freeAgentRow{order:8}
  #hub .hcol-r > .feedwrap{order:9}
  #hub #hubPitch{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:68/72!important;
  }
}
@media(max-width:540px){
  #hub.wrap{max-width:calc(100vw - 16px)!important}
  #hub #hubPitch{aspect-ratio:68/88!important}
}

/* ===== Match prep width clamp ===== */
@media(min-width:901px){
  #hub.wrap{
    width:min(100%,1260px)!important;
    max-width:min(1260px,calc(100vw - 64px))!important;
    margin-inline:auto!important;
  }
  #hub .hubcols{
    display:grid!important;
    grid-template-columns:minmax(0,920px) minmax(250px,292px)!important;
    justify-content:center!important;
    gap:14px!important;
  }
  #hub .hcol-l,
  #hub .hcol-r{
    min-width:0!important;
    max-width:100%!important;
  }
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #hub .fixturebar{
    width:100%!important;
    max-width:920px!important;
  }
  #hub .hcol-r > .hub-action-panel,
  #hub .hcol-r > .sectlbl,
  #hub .hcol-r > .shopcards,
  #hub .hcol-r > #freeAgentRow,
  #hub .hcol-r > .feedwrap{
    width:100%!important;
    max-width:292px!important;
  }
  #hub #hubPitch{
    width:100%!important;
    max-width:920px!important;
    height:clamp(500px,43vw,590px)!important;
    min-height:480px!important;
  }
}
@media(min-width:901px) and (max-width:1180px){
  #hub.wrap{
    max-width:calc(100vw - 32px)!important;
  }
  #hub .hubcols{
    grid-template-columns:minmax(0,720px) minmax(238px,270px)!important;
    gap:12px!important;
  }
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #hub .fixturebar{
    max-width:720px!important;
  }
  #hub .hcol-r > .hub-action-panel,
  #hub .hcol-r > .sectlbl,
  #hub .hcol-r > .shopcards,
  #hub .hcol-r > #freeAgentRow,
  #hub .hcol-r > .feedwrap{
    max-width:270px!important;
  }
  #hub #hubPitch{
    max-width:720px!important;
    height:clamp(460px,52vw,560px)!important;
  }
}
@media(max-width:900px){
  #hub.wrap{
    width:100%!important;
    max-width:calc(100vw - 24px)!important;
    margin-inline:auto!important;
  }
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #hub .fixturebar,
  #hub .hub-action-panel,
  #hub .sectlbl,
  #hub .shopcards,
  #hub #freeAgentRow,
  #hub .feedwrap{
    width:100%!important;
    max-width:100%!important;
  }
}
@media(max-width:540px){
  #hub.wrap{
    max-width:calc(100vw - 12px)!important;
  }
}

/* ===== Final.sim pacing and penalty readability pass ===== */
#sim.simwrap{
  width:min(100%,1120px);
  max-width:calc(100vw - 28px);
  margin-inline:auto;
}
#sim .simstage{
  grid-template-columns:minmax(0,1fr) minmax(190px,250px);
  gap:10px;
}
#sim .fieldframe{
  padding:10px;
}
#sim .comm{
  font-size:13px;
  line-height:1.45;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#sim .radioband{
  white-space:normal;
  line-height:1.35;
}
#sim .tvover{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 6px;
  padding:4px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--color-ink) 88%,var(--color-slate));
  color:var(--surface-elevated);
  font-family:var(--mono);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
#sim .board{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 14px;
  border-radius:8px;
  background:linear-gradient(180deg,#101D28,#17242D);
  color:var(--surface-elevated);
  box-shadow:0 2px 0 rgba(16,29,40,.22);
}
#sim .board>div:nth-child(2){
  min-width:112px;
  padding:0 10px;
  border-inline:1px solid rgba(243,245,244,.14);
}
#sim .bt{
  min-width:0;
  display:flex;
  align-items:center;
}
#sim .bt.aw{
  justify-content:flex-end;
  text-align:right;
}
#sim .bn{
  max-width:100%;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  line-height:1.06;
  font-family:var(--disp);
  font-size:clamp(14px,1.4vw,20px);
  font-weight:900;
  letter-spacing:.01em;
}
#sim .bsc{
  font-family:var(--disp);
  font-size:clamp(28px,3vw,40px);
  font-weight:950;
  line-height:.95;
}
#sim .bclk{
  margin-top:3px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:900;
  color:rgba(243,245,244,.74);
}
.pen-modal{
  width:min(600px,calc(100vw - 24px))!important;
  padding:0 20px 20px!important;
  max-height:calc(100dvh - 20px);
  overflow:auto;
}
.pen-modal .pen-head{
  margin:0 -20px 16px!important;
  padding:16px 20px!important;
}
.pen-modal .pen-phase{
  font-size:18px;
  line-height:1.15;
}
.pen-modal .pen-goal{
  height:154px!important;
  color:var(--surface-elevated);
}
.pen-modal .pen-net{
  top:20px!important;
  height:92px!important;
}
.pen-modal .pen-goal .pen-keeper{
  top:76px!important;
  width:44px!important;
  height:50px!important;
}
.pen-modal .pen-goal .pen-ball{
  width:18px!important;
  height:18px!important;
  bottom:24px!important;
}
.pen-modal .pen-dir-grid .btn,
.pen-modal .pen-continue{
  min-height:46px;
  font-size:13px;
}
.pen-modal{
  text-align:center!important;
}
.pen-modal .pen-head{
  background:linear-gradient(180deg,#101D28,#17242D)!important;
  border-bottom:1px solid rgba(243,245,244,.14);
}
.pen-modal .pen-kicker{
  color:rgba(243,245,244,.8);
}
.pen-modal .pen-phase{
  display:grid!important;
  gap:4px!important;
  margin:12px 0 0!important;
}
.pen-modal .pen-phase b{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:2px;
  color:var(--surface-elevated);
}
.pen-modal .pen-phase span{
  color:rgba(243,245,244,.72);
  font-size:12px;
}
.pen-modal .pen-actors{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 12px;
}
.pen-modal .pen-actors span{
  min-width:0;
  padding:7px 9px;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:var(--surface-muted);
  color:var(--color-slate);
  font-size:11px;
  text-align:left;
}
.pen-modal .pen-actors em{
  color:var(--color-ink);
  font-style:normal;
  font-weight:900;
}
.pen-modal .pen-goal{
  isolation:isolate;
}
.pen-modal .pen-goal::after{
  content:"";
  position:absolute;
  left:50%;
  top:96px;
  width:2px;
  height:42px;
  background:rgba(255,255,255,.26);
  transform:translateX(-50%);
}
.pen-modal .pen-goal .pen-keeper{
  transition:left .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1);
}
.pen-modal .pen-goal .pen-ball{
  transition:left .28s cubic-bezier(.2,.8,.2,1),bottom .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:2;
}
.pen-modal .pen-goal .pen-keeper.is-keeper-L{left:31%!important;transform:translateX(-50%) rotate(-22deg)}
.pen-modal .pen-goal .pen-keeper.is-keeper-C{left:50%!important;transform:translateX(-50%) translateY(-5px)}
.pen-modal .pen-goal .pen-keeper.is-keeper-R{left:69%!important;transform:translateX(-50%) rotate(22deg)}
.pen-modal .pen-goal .pen-ball.is-shot-L{left:28%!important;bottom:88px!important}
.pen-modal .pen-goal .pen-ball.is-shot-C{left:50%!important;bottom:98px!important}
.pen-modal .pen-goal .pen-ball.is-shot-R{left:72%!important;bottom:88px!important}
.pen-reveal{
  position:absolute;
  left:50%;
  bottom:12px;
  z-index:4;
  min-width:170px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(243,245,244,.94);
  color:var(--color-ink);
  box-shadow:0 10px 24px rgba(16,29,40,.2);
  transform:translateX(-50%);
  animation:penReveal .72s ease both;
}
.pen-reveal b{
  display:block;
  font-family:var(--disp);
  font-size:19px;
  line-height:1;
}
.pen-reveal span{
  display:block;
  margin-top:3px;
  font-family:var(--mono);
  font-size:8px;
  font-weight:900;
  letter-spacing:.7px;
  color:var(--color-slate);
  text-transform:uppercase;
}
.pen-reveal.goal b,.pen-dot.is-goal{color:#FFFFFF}
.pen-reveal.goal{background:var(--color-primary);color:#FFFFFF}
.pen-reveal.goal span{color:rgba(255,255,255,.75)}
.pen-reveal.save{background:#F3F5F4}
.pen-reveal.post{background:#F3F5F4}
.pen-reveal.miss{background:#F3F5F4}
@keyframes penReveal{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.96)}20%,82%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:.96}}
.pen-dot.is-save{background:#68757C;border-color:#68757C;color:#FFFFFF}
.pen-dot.is-post{background:#F24A28;border-color:#F24A28;color:var(--color-ink)}
.pen-dot.is-miss{background:#DA3D2E!important;border-color:#DA3D2E!important;color:#FFFFFF!important}
.pen-modal .pen-slots>div{
  min-width:0;
}
@media(max-width:760px){
  #sim.simwrap{max-width:calc(100vw - 16px)}
  #sim .board{grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);gap:6px;padding:8px 9px}
  #sim .board>div:nth-child(2){min-width:86px;padding:0 6px}
  #sim .bn{font-size:13px}
  #sim .bsc{font-size:27px}
  #sim .simstage{grid-template-columns:1fr}
  #sim .eventpanel{min-height:92px}
  .pen-modal .pen-goal{height:132px!important}
  .pen-modal .pen-net{height:78px!important}
  .pen-modal .pen-goal .pen-keeper{top:64px!important}
  .pen-modal .pen-actors{grid-template-columns:1fr}
  .pen-modal .pen-score{gap:6px!important}
  .pen-modal .pen-score span{font-size:12px}
}

/* Bench picker: dismiss without substituting */
.backup-modal{position:relative}
.backup-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid var(--border-subtle);
  border-radius:7px;
  background:var(--surface-elevated);
  color:var(--color-slate);
  cursor:pointer;
}
.backup-close:hover{border-color:var(--color-ink);color:var(--color-ink)}
.backup-modal .backup-head{padding-right:44px}

/* Heat map sits beside the final report on wide screens, stacks under it on narrow.
   Row 1: report | heat map. Row 2: story | econ. */
@media(min-width:700px){
  #finalRow{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #finalRow>.finalreport:not(.hidden){grid-column:1!important}
}

/* ===== Final report: heat map as its own tile ===== */
.heattile{
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:var(--surface-elevated);
  padding:0 0 10px;
  overflow:hidden;
  align-self:start;
}
.heattile.hidden{display:none}
.heattile h4{
  margin:0 0 10px;
  padding:9px 10px;
  background:var(--surface-muted);
  border-bottom:1px solid var(--border-subtle);
  font-family:var(--mono);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.6px;
  text-transform:uppercase;
  text-align:center;
  color:var(--color-slate);
}
.heattile img{
  display:block;
  width:calc(100% - 20px);
  max-width:320px;
  margin:0 auto;
  border-radius:6px;
  border:1px solid var(--border-subtle);
}
.heattile .heatnote{
  margin:8px 10px 0;
  font-size:10px;
  line-height:1.4;
  color:var(--color-slate);
  text-align:center;
}

/* ===== Tap-to-select squad placement (coarse pointers) ===== */
.tap-helper{
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:1200;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:calc(100vw - 24px);
  padding:9px 13px;
  border-radius:10px;
  background:var(--color-ink);
  color:var(--color-background);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.3;
  box-shadow:0 8px 24px rgba(16,29,40,.35);
}
.tap-helper.hidden{display:none}
.tap-helper b{color:var(--color-primary)}
.tap-cancel{
  flex-shrink:0;
  border:1px solid rgba(243,245,244,.4);
  background:transparent;
  color:var(--color-background);
  border-radius:6px;
  padding:6px 11px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  cursor:pointer;
  min-height:32px;
}
.roundel.tap-selected,.bench-row.tap-selected{
  outline:2px solid var(--text-on-dark);
  outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--text-on-dark) 16%,transparent);
}
.bench-row.tap-selected{
  background:color-mix(in srgb,var(--status-info) 28%,var(--surface-elevated))!important;
  border-color:var(--text-on-dark)!important;
}
.roundel.tap-good{
  outline:2px solid var(--status-success);
  outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--status-success) 24%,transparent);
}
.roundel.tap-warn{
  outline:2px solid #D6A21F;
  outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,#D6A21F 20%,transparent);
}
.roundel.tap-off{
  outline:2px dashed var(--border-strong);
  outline-offset:2px;
}
.roundel.tap-no{
  opacity:.35;
  filter:grayscale(.5);
  pointer-events:none;
}
@media(pointer:coarse){
  /* bigger touch targets without changing visual size */
  #hubPitch .roundel::after{content:"";position:absolute;inset:-14px}
  .bench-row{min-height:44px;cursor:pointer}
  #hubPitch .roundel,.bench-row{touch-action:none;-webkit-user-select:none;user-select:none}
}

/* Keep tactical effects in their own safe strip instead of covering forwards. */
#hub .pitch-tactical-strip{
  position:relative;
  z-index:4;
  width:100%;
  margin:0 0 7px;
  padding:7px 8px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid var(--border-default);
  border-radius:9px;
  background:var(--surface-deep);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text-on-dark) 7%,transparent);
}
#hub .pitch-tactical-strip .pitch-overlay{
  position:static!important;
  inset:auto!important;
  display:flex!important;
  flex-flow:row wrap;
  align-items:center;
  gap:4px!important;
  width:100%;
  max-width:100%!important;
  pointer-events:auto;
}
#hub .pitch-tactical-strip .pitch-overlay::before{
  flex:0 0 100%;
  margin-bottom:1px;
}
#hub .pitch-tactical-strip .pitch-overlay #cardrow{
  display:flex;
  flex:1 1 100%;
  flex-flow:row wrap;
  align-items:center!important;
  gap:4px;
  width:100%!important;
  max-width:100%!important;
  margin:0;
}

html.hub-player-dragging,
html.hub-player-dragging body{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
html.hub-player-dragging *{cursor:grabbing!important}
.hub-drag-source{opacity:.42!important}
.hub-player-drag-preview{
  position:fixed;
  z-index:10050;
  left:-200px;
  top:-200px;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  width:58px;
  height:62px;
  padding:5px 4px;
  box-sizing:border-box;
  overflow:hidden;
  border:2px solid var(--status-success);
  border-radius:10px;
  background:var(--surface-deep);
  color:var(--text-on-dark);
  box-shadow:0 10px 24px rgba(10,17,24,.42);
  pointer-events:none;
  contain:layout paint style;
}
.hub-player-drag-preview b{font:900 16px/1 var(--mono);color:#D6A21F}
.hub-player-drag-preview small{font:800 7px/1 var(--mono);letter-spacing:.5px;color:var(--text-secondary)}
.hub-player-drag-preview span{
  display:block;
  width:100%;
  overflow:hidden;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:750 8px/1.1 var(--disp);
}
.touch-drag-ghost{opacity:.94!important;will-change:left,top;transform:translateZ(0)}

/* ===== Penalty shootout: phase clarity redesign ===== */
.pen-phase-badge{
  display:inline-block;
  margin:0 auto 5px;
  padding:3px 10px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
  font-style:normal;
}
.pen-modal.is-shoot .pen-phase-badge{background:var(--color-primary);color:#FFFFFF}
.pen-modal.is-save .pen-phase-badge{background:var(--color-background);color:var(--color-ink)}
.pen-modal .pen-phase b{font-size:17px;letter-spacing:2.5px}
.pen-modal.is-shoot .pen-head{border-bottom:3px solid var(--color-primary)}
.pen-modal.is-save .pen-head{border-bottom:3px solid var(--color-background)}
.pen-modal.is-done .pen-head{border-bottom:3px solid var(--color-slate)}
/* duel cards: label + dominant name */
.pen-modal .pen-actors .pen-duel{
  display:grid;
  gap:2px;
  padding:8px 10px;
  text-align:left;
}
.pen-modal .pen-actors .pen-duel i{
  font-style:normal;
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:900;
  letter-spacing:1.4px;
  color:var(--color-slate);
}
.pen-modal .pen-actors .pen-duel em{
  font-size:14px;
  font-weight:900;
  color:var(--color-ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pen-modal .pen-actors .pen-duel.is-you{
  border-color:color-mix(in srgb,var(--color-primary) 55%,var(--border-subtle));
  background:color-mix(in srgb,var(--color-primary) 8%,var(--surface-muted));
}
.pen-modal .pen-actors .pen-duel.is-you i{color:var(--color-primary)}
/* three-zone guide inside the goal */
.pen-modal .pen-zones{
  position:absolute;
  left:10%;
  right:10%;
  top:16px;
  height:72px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  pointer-events:none;
  opacity:.4;
}
.pen-modal .pen-zones i{border-left:1px dashed rgba(255,255,255,.4)}
.pen-modal .pen-zones i:first-child{border-left:0}
.pen-modal.is-save .pen-zones{opacity:.75}
/* phase-based emphasis: shot = ball dominant, save = keeper dominant */
.pen-modal.is-shoot .pen-goal .pen-ball{
  width:19px;height:19px;
  box-shadow:0 2px 10px rgba(10,17,24,.4),0 0 0 4px color-mix(in srgb,var(--color-primary) 45%,transparent);
}
.pen-modal.is-shoot .pen-goal .pen-keeper{opacity:.6}
.pen-modal.is-save .pen-goal .pen-keeper{
  transform:translateX(-50%) scale(1.15);
  filter:drop-shadow(0 0 5px rgba(243,245,244,.5));
}
.pen-modal.is-save .pen-goal .pen-ball{opacity:.55}
/* slots: active side + next kicker */
.pen-modal .pen-slots>div.is-active{
  border-color:color-mix(in srgb,var(--color-primary) 60%,var(--border-subtle));
  background:color-mix(in srgb,var(--color-primary) 7%,var(--surface-muted));
}
.pen-modal .pen-slots>div.is-active span:first-child{color:var(--color-primary)}
.pen-dot.is-next{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);
}
/* direction buttons */
.pen-modal .pen-dir-btn{
  min-height:48px;
  padding:12px 8px!important;
  font-size:12.5px!important;
  font-weight:900!important;
  letter-spacing:.4px;
  white-space:nowrap;
}
.pen-modal .pen-dir-btn:hover{border-color:var(--color-primary)}
.pen-modal .pen-dir-btn:active{transform:translateY(1px)}
@media(max-width:480px){
  .pen-modal{width:calc(100vw - 34px)!important;max-width:calc(100vw - 34px)!important;box-sizing:border-box}
  .pen-modal .pen-dir-grid{grid-template-columns:1fr!important;gap:7px}
  .pen-modal .pen-dir-btn{min-height:46px}
  .pen-modal .pen-actors .pen-duel em{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .pen-reveal{animation:none}
  .pen-goal .pen-keeper.is-ready{animation:none}
  .pen-modal .pen-goal .pen-keeper,.pen-modal .pen-goal .pen-ball{transition:none}
}

/* ===== Final.sim visual readability pass ===== */
#sim #cv canvas{
  aspect-ratio:105/59.325;
  height:auto;
  image-rendering:auto;
}
#sim .fieldframe{
  border-color:color-mix(in srgb,var(--color-primary) 34%,var(--border-subtle));
  box-shadow:0 10px 28px rgba(16,29,40,.10), inset 0 0 0 1px rgba(255,255,255,.22);
}
#sim .fieldframe::before,
#sim .fieldframe::after{
  opacity:.46;
}
#sim .tvover{
  box-shadow:0 2px 0 rgba(16,29,40,.18);
}
#sim #simState.is-golden{
  background:color-mix(in srgb,var(--color-primary) 22%,#E4E8E7);
  border-color:var(--color-ink);
  color:var(--color-ink);
  animation:simStatePulse 1.1s ease-in-out infinite;
}
@keyframes simStatePulse{
  0%,100%{filter:saturate(1);transform:translateY(0)}
  50%{filter:saturate(1.18);transform:translateY(-1px)}
}
#sim .board{
  position:relative;
  overflow:hidden;
}
#sim .board::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(104,117,124,.13),transparent 24%,transparent 76%,rgba(66,1,2,.10)),
    radial-gradient(circle at 50% 0%,rgba(243,245,244,.10),transparent 44%);
  pointer-events:none;
}
#sim .board .bt,
#sim .board>div:nth-child(2){
  position:relative;
  z-index:1;
}
#sim .eventpanel{
  border-radius:8px;
  box-shadow:0 4px 0 rgba(16,29,40,.08);
}
#sim .eventpanel h4{
  padding:8px 10px;
  letter-spacing:1.7px;
}
#sim .simgoals{
  font-size:10.5px;
}
#sim .simgoals div{
  min-height:30px;
  background:linear-gradient(90deg,rgba(104,117,124,.05),transparent);
}
#sim .simgoals div:nth-child(even){
  background:rgba(86,97,106,.045);
}
#sim .goalburst{
  border-radius:8px;
}
.pen-modal .pen-goal{
  box-shadow:inset 0 0 0 2px rgba(243,245,244,.28),0 8px 0 rgba(16,29,40,.10);
}
.pen-modal .pen-net{
  background:
    linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);
  background-size:28px 18px;
}
.pen-modal .pen-dir-grid{
  gap:8px;
}
.pen-modal .pen-dir-grid .btn{
  border-radius:8px;
}
@media(max-width:760px){
  #sim .fieldframe{padding:6px}
  #sim .simgoals{font-size:10px}
  .pen-modal{width:min(560px,calc(100vw - 14px))!important;padding-inline:12px!important}
  .pen-modal .pen-head{margin-inline:-12px!important;padding-inline:12px!important}
  .pen-modal .pen-goal{height:126px!important}
}

/* ===== Final sim: timeline + event map ===== */
#simTimeline{
  margin-bottom:8px;
  padding:2px 0;
}
.tl-svg{
  width:100%;
  display:block;
  overflow:visible;
}
.sim-eventmap{
  width:100%;
  border-radius:6px;
  overflow:hidden;
  background:#17242D;
  aspect-ratio:100/65;
}
.sim-eventmap svg{
  display:block;
  width:100%;
  height:100%;
}
#sim .fieldframe{
  padding:6px;
}
#sim #cv{display:none} /* hide legacy cv if still present */

/* live feed: two-line event rows (headline + context) */
#sim .simgoals div{
  display:block;
  padding:5px 8px;
  min-height:34px;
  font-size:11px;
  line-height:1.35;
}
#sim .simgoals div span{display:block}
#sim .simgoals div span>b{
  display:block;
  font-size:11px;
  letter-spacing:.02em;
}
#sim .simgoals div span>small{
  display:block;
  font-size:10px;
  color:var(--color-slate);
  opacity:.92;
}
#sim .simgoals div>b{
  float:left;
  margin-right:7px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--color-primary);
}
@media(prefers-reduced-motion:reduce){
  #sim #emCard,#sim #emZone,#sim #emArrows line,#sim #emArrows path{transition:none;animation:none}
}
#sim .board{border-bottom:2px solid color-mix(in srgb,var(--color-primary) 55%,transparent)}
#sim .simgoals div.ev-major{
  background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 14%,transparent),transparent 70%);
  border-left:2px solid var(--color-primary);
}
#sim .eventpanel .simgoals{max-height:340px;overflow-y:auto}

/* ===== Final live screen polish pass ===== */
/* header / scoreboard */
#sim .bn{
  font-size:clamp(13px,1.2vw,17px);
  letter-spacing:.03em;
  color:rgba(243,245,244,.92);
}
#sim .bsc{
  font-size:clamp(30px,3.2vw,44px);
  letter-spacing:.01em;
}
#sim .bclk{
  margin-top:4px;
  padding:2px 8px;
  display:inline-block;
  border-radius:999px;
  background:rgba(243,245,244,.10);
  color:rgba(243,245,244,.85);
}
#sim .simstate{
  border-radius:999px;
  border-width:1px;
  padding:4px 12px;
  font-size:9.5px;
  letter-spacing:1.6px;
  background:color-mix(in srgb,var(--color-primary) 88%,#FFFFFF);
  box-shadow:0 2px 0 rgba(16,29,40,.14);
}
#sim .momentum{margin-bottom:8px}
#sim .momentum i{
  height:6px;
  border-width:1px;
  border-color:color-mix(in srgb,var(--color-ink) 55%,transparent);
}
/* stat row: calmer surfaces, dominant values */
#sim .simstats{gap:6px;margin-bottom:10px}
#sim .simstats span{
  border:1px solid var(--border-subtle);
  border-radius:7px;
  background:var(--surface-muted);
  padding:6px 8px;
  letter-spacing:.8px;
  line-height:1.2;
}
#sim .simstats b{
  font-size:14px;
  margin-top:2px;
  font-weight:800;
}
/* timeline: match-flow tracker feel */
#simTimeline{
  padding:4px 6px;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:var(--surface-muted);
}
#simTimeline text{font-weight:700}
#simTimeline #tlCursor{stroke-width:1.6}
/* pitch frame refinement */
.sim-eventmap{box-shadow:inset 0 0 0 1px rgba(243,245,244,.05)}
#sim .fieldframe{border-radius:10px}
/* MAÇ OLAYLARI panel: editorial side panel */
#sim .eventpanel{
  border:1px solid var(--border-subtle);
  border-radius:10px;
  overflow:hidden;
  background:var(--surface-elevated);
}
#sim .eventpanel h4{
  background:linear-gradient(180deg,var(--color-ink),color-mix(in srgb,var(--color-ink) 82%,var(--color-slate)));
  font-size:9px;
  letter-spacing:2.2px;
  padding:9px 10px;
  border-bottom:2px solid var(--color-primary);
}
#sim .simgoals div{
  border-top:1px solid color-mix(in srgb,var(--border-subtle) 60%,transparent);
  padding:7px 10px;
  min-height:36px;
}
#sim .simgoals div>b{
  min-width:26px;
  font-size:9.5px;
  opacity:.9;
}
#sim .simgoals div span>b{letter-spacing:.03em}
#sim .simgoals div span>small{margin-top:1px;line-height:1.3}
#sim .simgoals:empty::before{padding:14px 10px;letter-spacing:.5px}
#sim .simgoals::-webkit-scrollbar{width:5px}
#sim .simgoals::-webkit-scrollbar-track{background:transparent}
#sim .simgoals::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--color-slate) 45%,transparent);
  border-radius:99px;
}
/* transition / status band (golden goal, penalties, match end) */
#sim .radioband{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--color-primary) 55%,transparent);
  padding:8px 12px;
  font-size:10.5px;
  line-height:1.4;
  white-space:normal;
  text-overflow:clip;
}
/* tactic controls: one coherent segmented group */
#sim .shoutrow{
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1.5px solid var(--color-ink);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:8px;
}
#sim .shoutbtn{
  border:none;
  border-left:1px solid var(--border-subtle);
  padding:9px 6px;
  background:var(--surface-elevated);
  transition:background .12s ease;
}
#sim .shoutbtn:first-child{border-left:none}
#sim .shoutbtn:hover{background:var(--surface-muted)}
#sim .shoutbtn:active{transform:none;background:color-mix(in srgb,var(--color-primary) 14%,var(--surface-elevated))}
#sim .shoutbtn.lit{
  background:#F3F5F4;
  color:#101D28;
  box-shadow:inset 0 -2px 0 var(--color-primary);
}
/* playback controls: pause | speeds | skip */
#sim .speedrow{
  gap:6px;
  padding:6px 8px;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:var(--surface-muted);
}
#sim .spd{
  border:1px solid var(--border-subtle);
  border-radius:6px;
  padding:6px 9px;
  min-width:40px;
  background:var(--surface-elevated);
}
#sim .spd.on{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#FFFFFF;
}
#sim .spd.spd-pause{
  min-width:44px;
  font-size:13px;
  border-color:var(--color-ink);
  background:var(--surface-elevated);
  color:var(--color-ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#sim .spd.spd-pause svg{fill:currentColor;display:block}
#sim .spd.spd-pause.pause{
  background:var(--color-slate);
  border-color:var(--color-slate);
  color:#FFFFFF;
}
#sim .spd.spd-pause.pause svg{fill:#FFFFFF}
#sim .spd-sep{
  width:1px;
  height:20px;
  background:var(--border-subtle);
  margin:0 2px;
}
@media(max-width:760px){
  #sim .speedrow{flex-wrap:wrap;row-gap:6px}
  #sim .spd{min-width:38px;padding:6px 7px;font-size:11px}
  #sim .simgoals{max-height:180px}
  #sim .shoutbtn span{font-size:9.5px}
}

/* ===== Compact spotlight player picker ===== */
.spotlight-modal{
  width:min(520px,calc(100vw - 24px))!important;
  padding:0!important;
  overflow:hidden!important;
  text-align:left!important;
}
.spotlight-header{
  padding:14px 18px 12px!important;
  background:linear-gradient(175deg,#101D28 0%,#17242D 100%)!important;
  border-radius:8px 8px 0 0!important;
}
.spotlight-header::before,
.spot-beam-svg,
.spotlight-kicker,
.spotlight-pow,
.spotlight-brief,
.spotlight-risk,
.spotlight-footnote,
.spot-card-bonus,
.spot-card-note,
.spot-card-shine,
.spot-prtcl,
.spot-burst{
  display:none!important;
}
.spotlight-title{
  margin:0 0 4px!important;
  font-family:var(--disp)!important;
  font-size:17px!important;
  line-height:1.1!important;
  letter-spacing:2.2px!important;
  color:var(--color-primary)!important;
  text-align:center!important;
}
.spotlight-sub{
  margin:0!important;
  font-family:var(--mono)!important;
  font-size:10px!important;
  line-height:1.45!important;
  letter-spacing:.3px!important;
  color:rgba(243,245,244,.76)!important;
  text-align:center!important;
}
.spot-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  padding:12px!important;
  background:var(--surface-elevated)!important;
}
.spot-card{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  min-height:56px!important;
  padding:8px 10px!important;
  background:var(--surface-default)!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:8px!important;
  box-shadow:none!important;
  transform:none!important;
  text-align:left!important;
}
.spot-card:hover,
.spot-card:focus-visible{
  border-color:var(--spot-col,var(--color-primary))!important;
  background:color-mix(in srgb,var(--surface-default) 94%,var(--spot-col,var(--color-primary)) 6%)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--spot-col,var(--color-primary)) 16%,transparent)!important;
  transform:none!important;
}
.spot-card-pos{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:30px!important;
  height:24px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:var(--surface-muted)!important;
  border:1px solid var(--border-subtle)!important;
  font-family:var(--mono)!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:1px!important;
  color:var(--color-slate)!important;
}
.spot-card-name{
  min-width:0!important;
  margin:0!important;
  font-family:var(--disp)!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.05!important;
  color:var(--color-ink)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.spot-card-power{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  min-width:54px!important;
  font-family:var(--mono)!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}
.spot-card-before{
  color:var(--color-slate)!important;
  opacity:.75!important;
}
.spot-arrow{
  color:var(--color-slate)!important;
  opacity:.55!important;
}
@media(max-width:520px){
  .spotlight-modal{width:calc(100vw - 16px)!important}
  .spot-grid{grid-template-columns:1fr!important;padding:10px!important}
  .spot-card{min-height:52px!important}
}

/* ===== Copa Guide modal cleanup ===== */
.howto-modal-shell{
  width:min(920px,calc(100vw - 24px))!important;
  max-height:calc(100dvh - 32px)!important;
  background:var(--surface-elevated)!important;
  border-radius:10px!important;
  overflow:hidden!important;
}
.howto-mhdr{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:17px 20px 14px!important;
  background:var(--surface-elevated)!important;
  border-bottom:1px solid var(--border-subtle)!important;
}
.howto-mhdr-copy{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  min-width:0!important;
}
.howto-mhdr-title{
  display:block!important;
  font-family:var(--mono)!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:2px!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  color:var(--color-ink)!important;
}
.howto-mhdr-sub{
  display:block!important;
  margin:0!important;
  font-family:var(--mono)!important;
  font-size:10px!important;
  line-height:1.1!important;
  letter-spacing:.55px!important;
  text-transform:uppercase!important;
  color:var(--color-slate)!important;
}
.howto-mhdr-close{
  width:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--color-slate)!important;
  font-size:22px!important;
  line-height:1!important;
  cursor:pointer!important;
  opacity:.85!important;
}
.howto-mhdr-close:hover,
.howto-mhdr-close:focus-visible{
  opacity:1!important;
  color:var(--color-ink)!important;
  border-color:var(--border-subtle)!important;
  background:var(--surface-bg)!important;
}
.howto-mbody{
  flex:1!important;
  overflow-y:auto!important;
  padding:16px 18px 12px!important;
  background:var(--surface-elevated)!important;
}
.howto-mgrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:13px!important;
}
.howto-mcard{
  min-height:142px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  padding:18px 19px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:9px!important;
  background:var(--surface-bg)!important;
  box-shadow:none!important;
}
.howto-mcard-top{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:44px!important;
}
.howto-mico{
  width:40px!important;
  height:40px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:8px!important;
  background:var(--surface-elevated)!important;
  color:var(--color-primary)!important;
  line-height:0!important;
}
.howto-mico svg{
  width:24px!important;
  height:24px!important;
}
.howto-mcard-title-group{
  padding:0!important;
}
.howto-mcard-title-row{
  display:flex!important;
  align-items:baseline!important;
  gap:9px!important;
  min-width:0!important;
  padding:0!important;
}
.howto-mcard-num{
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  font-family:var(--mono)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:1.2px!important;
  color:var(--color-primary)!important;
  transform:translateY(-.02em)!important;
}
.howto-mcard .hwt{
  min-width:0!important;
  font-family:var(--mono)!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:900!important;
  letter-spacing:.25px!important;
  color:var(--color-ink)!important;
}
.howto-mcard .hwd{
  margin:0!important;
  font-family:var(--mono)!important;
  font-size:11.5px!important;
  line-height:1.58!important;
  color:var(--color-slate)!important;
}
.howto-mcard .hwd b{
  color:var(--color-ink)!important;
  font-weight:900!important;
}
.howto-tier{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:1px 7px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:999px!important;
  background:var(--surface-muted)!important;
  color:var(--color-slate)!important;
  font-family:var(--mono)!important;
  font-size:9px!important;
  line-height:1.35!important;
  font-weight:900!important;
  letter-spacing:.55px!important;
  vertical-align:.1em!important;
}
.howto-tier-dark{
  border-color:var(--color-ink)!important;
  background:var(--color-ink)!important;
  color:var(--color-background)!important;
}
.howto-mfoot{
  display:flex!important;
  justify-content:center!important;
  padding:10px 20px 14px!important;
  border-top:1px solid var(--border-subtle)!important;
  background:var(--surface-elevated)!important;
}
.howto-mfoot .btn{
  width:min(250px,100%)!important;
  max-width:250px!important;
  margin:0!important;
}
@media(max-width:720px){
  .howto-modal-shell{
    width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
  }
  .howto-mhdr{
    padding:15px 16px 12px!important;
  }
  .howto-mbody{
    padding:12px!important;
  }
  .howto-mgrid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .howto-mcard{
    min-height:0!important;
    padding:16px!important;
  }
  .howto-mfoot{
    padding:10px 16px 14px!important;
  }
}

/* ===== Slightly narrower match prep pass ===== */
@media(min-width:901px){
  #hub.wrap{
    width:min(100%,1188px)!important;
    max-width:min(1188px,calc(100vw - 72px))!important;
  }
  #hub .hubcols{
    grid-template-columns:minmax(0,860px) minmax(244px,278px)!important;
    gap:12px!important;
  }
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #hub .fixturebar{
    max-width:860px!important;
  }
  #hub .hcol-r > .hub-action-panel,
  #hub .hcol-r > .sectlbl,
  #hub .hcol-r > .shopcards,
  #hub .hcol-r > #freeAgentRow,
  #hub .hcol-r > .feedwrap{
    max-width:278px!important;
  }
  #hub #hubPitch{
    max-width:860px!important;
    height:clamp(480px,40vw,560px)!important;
    min-height:460px!important;
  }
  #hub .hub-stat-row{
    gap:7px!important;
  }
  #hub .hub-stat-row .mtile,
  #hub .hub-stat-row .kasa-card{
    min-height:66px!important;
    padding:7px 10px!important;
  }
  #hub .hub-stat-row .mtile .mh,
  #hub .hub-stat-row .kasa-metric-lbl{
    font-size:7px!important;
    line-height:1.1!important;
  }
  #hub .hub-stat-row .mtile .mv,
  #hub .hub-stat-row .kasa-main-val{
    font-size:19px!important;
    line-height:.95!important;
  }
  #hub .hub-stat-row .mtile .ms,
  #hub .hub-stat-row .kasa-metric-val{
    font-size:8px!important;
    line-height:1.1!important;
  }
  #hub .hub-stat-row .kasa-bar-wrap{
    margin-top:4px!important;
  }
}
@media(min-width:901px) and (max-width:1180px){
  #hub.wrap{
    max-width:calc(100vw - 28px)!important;
  }
  #hub .hubcols{
    grid-template-columns:minmax(0,680px) minmax(236px,260px)!important;
    gap:10px!important;
  }
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #hub .fixturebar{
    max-width:680px!important;
  }
  #hub .hcol-r > .hub-action-panel,
  #hub .hcol-r > .sectlbl,
  #hub .hcol-r > .shopcards,
  #hub .hcol-r > #freeAgentRow,
  #hub .hcol-r > .feedwrap{
    max-width:260px!important;
  }
  #hub #hubPitch{
    max-width:680px!important;
    height:clamp(430px,50vw,520px)!important;
    min-height:420px!important;
  }
}
@media(max-width:900px){
  #hub.wrap{
    max-width:calc(100vw - 18px)!important;
  }
  #hub .hub-stat-row .mtile,
  #hub .hub-stat-row .kasa-card{
    min-height:62px!important;
  }
}

/* ===== Draft screen column parity ===== */
@media(min-width:901px){
  #draft .draft-cols{
    display:grid!important;
    grid-template-columns:minmax(0,420px) minmax(0,420px)!important;
    justify-content:center!important;
    align-items:start!important;
    gap:24px!important;
    width:min(100%,900px)!important;
    max-width:calc(100vw - 48px)!important;
    height:auto!important;
    min-height:0!important;
    padding:8px 0 24px!important;
    margin-inline:auto!important;
    overflow:visible!important;
  }
  #draft .draft-left,
  #draft .draft-right{
    width:100%!important;
    max-width:420px!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #draft .draft-right{
    display:flex!important;
    justify-content:center!important;
    align-items:flex-start!important;
  }
  #draft .draft-right .pitch{
    width:100%!important;
    max-width:420px!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:68/92!important;
    margin:0!important;
  }
}
@media(max-width:900px){
  #draft .draft-cols{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:min(100%,460px)!important;
    max-width:calc(100vw - 18px)!important;
    gap:12px!important;
    padding:8px 0 18px!important;
    margin-inline:auto!important;
    overflow:visible!important;
  }
  #draft .draft-left,
  #draft .draft-right{
    width:100%!important;
    max-width:460px!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #draft .draft-right .pitch{
    width:100%!important;
    max-width:460px!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:68/92!important;
  }
}

/* ===== Formation hover preview sizing ===== */
@media(min-width:761px){
  .v7-setup-twocol .form-dot-preview,
  .formpick .form-dot-preview{
    width:92px!important;
    height:118px!important;
    padding:14px!important;
    bottom:calc(100% + 12px)!important;
    border-radius:9px!important;
    display:grid!important;
    place-items:center!important;
    background:var(--color-ink)!important;
    transform:translateX(-50%) translateY(6px) scale(.92)!important;
    transform-origin:50% 100%!important;
    box-shadow:0 14px 30px rgba(16,29,40,.28)!important;
  }
  .v7-setup-twocol .form-dot-preview svg,
  .formpick .form-dot-preview svg{
    width:72px!important;
    height:72px!important;
  }
  .v7-setup-twocol .fbtn:hover:not(.locked) .form-dot-preview,
  .v7-setup-twocol .fbtn:focus-visible:not(.locked) .form-dot-preview,
  .formpick .fbtn:hover:not(.locked) .form-dot-preview,
  .formpick .fbtn:focus-visible:not(.locked) .form-dot-preview{
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(-50%) translateY(0) scale(1)!important;
  }

  html[data-theme="dark"] .v7-setup-twocol .form-dot-preview,
  html[data-theme="dark"] .formpick .form-dot-preview{
    background:#101D28!important;
    color:#F3F5F4!important;
    border:1px solid rgba(243,245,244,.16)!important;
    box-shadow:0 12px 28px rgba(10,17,24,.38),inset 0 1px 0 rgba(243,245,244,.03)!important;
  }
}
@media(max-width:760px){
  .form-dot-preview{
    display:none!important;
  }
}

/* ===== Compact hub stat strip v2 ===== */
@media(min-width:901px){
  #hub .hub-stat-row .mtile,
  #hub .hub-stat-row .kasa-card{
    height:58px!important;
    min-height:58px!important;
    padding:6px 9px!important;
    border-radius:8px!important;
  }
  #hub .hub-stat-row .mtile{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  #hub .hub-stat-row .mtile .mh{
    font-size:6.7px!important;
    line-height:1!important;
    margin-bottom:2px!important;
  }
  #hub .hub-stat-row .mtile .mv{
    font-size:17px!important;
    line-height:.95!important;
  }
  #hub .hub-stat-row .mtile .ms{
    font-size:7px!important;
    line-height:1!important;
    margin-top:2px!important;
  }
  #hub .hub-stat-row .mtile .mtile-info{
    top:5px!important;
    right:5px!important;
    width:14px!important;
    height:14px!important;
    font-size:9px!important;
  }
  #hub .hub-stat-row .kasa-card{
    gap:0!important;
    position:relative!important;
    justify-content:flex-start!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-top-row{
    margin:0!important;
    min-height:12px!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-status-badge{
    font-size:6.5px!important;
    padding:2px 5px!important;
    line-height:1!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-main-val{
    font-size:18px!important;
    line-height:.95!important;
    margin:2px 0 0!important;
    max-width:58%!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-metrics{
    position:absolute!important;
    top:6px!important;
    right:9px!important;
    display:block!important;
    margin:0!important;
    width:auto!important;
    max-width:44%!important;
    text-align:right!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-metric{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:0!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-metric-lbl{
    font-size:6px!important;
    line-height:1!important;
    letter-spacing:.55px!important;
    white-space:nowrap!important;
    opacity:.7!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-metric-val{
    font-size:10px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-bar-wrap{
    margin-top:auto!important;
    padding-top:2px!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-bar-track{
    height:4px!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-bar-marker{
    width:8px!important;
    height:8px!important;
    border-width:1.5px!important;
  }
  #hub .hub-stat-row .kasa-card .kasa-bar-labels{
    font-size:5.8px!important;
    margin-top:2px!important;
  }
}
@media(max-width:900px){
  #hub .hub-stat-row .mtile,
  #hub .hub-stat-row .kasa-card{
    min-height:56px!important;
    height:56px!important;
    padding:6px 8px!important;
  }
}

/* ===== Match prep readability pass: muted metrics, bench strip, alerts, feed ===== */
#hub .hub-stat-row{
  align-items:stretch!important;
}
#hub .hub-stat-row .mtile,
#hub .hub-stat-row .kasa-card{
  border:1px solid color-mix(in srgb,var(--color-slate) 22%,transparent)!important;
  box-shadow:0 8px 18px rgba(16,29,40,.08)!important;
  color:var(--color-ink)!important;
  overflow:hidden!important;
}
#hub .hub-stat-row #chemTile{
  background:linear-gradient(135deg,color-mix(in srgb,var(--metric-accent,var(--text-secondary)) 18%,var(--surface-elevated)),color-mix(in srgb,var(--metric-accent,var(--text-secondary)) 7%,var(--surface-bg)))!important;
}
#hub .hub-stat-row #powTile{
  background:linear-gradient(135deg,color-mix(in srgb,var(--metric-accent,var(--text-secondary)) 18%,var(--surface-elevated)),color-mix(in srgb,var(--metric-accent,var(--text-secondary)) 7%,var(--surface-bg)))!important;
}
#hub .hub-stat-row #trustTile{
  --metric-accent:#DA3D2E;
  background:linear-gradient(135deg,color-mix(in srgb,#DA3D2E 18%,var(--surface-elevated)),color-mix(in srgb,#DA3D2E 8%,var(--surface-bg)))!important;
}
#hub .hub-stat-row #kasaTile.kasa-positive,
#hub .hub-stat-row #kasaTile.kasa-rich{
  --metric-accent:var(--status-success);
  background:linear-gradient(135deg,color-mix(in srgb,var(--status-success) 18%,var(--surface-elevated)),color-mix(in srgb,var(--status-success) 8%,var(--surface-bg)))!important;
}
#hub .hub-stat-row #kasaTile.kasa-zero{
  --metric-accent:var(--status-warning);
  background:linear-gradient(135deg,color-mix(in srgb,var(--status-warning) 18%,var(--surface-elevated)),color-mix(in srgb,var(--status-warning) 8%,var(--surface-bg)))!important;
}
#hub .hub-stat-row #kasaTile.kasa-debt{
  --metric-accent:#DA3D2E;
  background:linear-gradient(135deg,color-mix(in srgb,#DA3D2E 18%,var(--surface-elevated)),color-mix(in srgb,#DA3D2E 8%,var(--surface-bg)))!important;
}
#hub .hub-stat-row #kasaTile.kasa-deep-debt{
  --metric-accent:var(--status-critical-text);
  background:linear-gradient(135deg,color-mix(in srgb,var(--status-critical) 18%,var(--surface-elevated)),color-mix(in srgb,var(--status-critical) 8%,var(--surface-bg)))!important;
}
#hub .hub-stat-row .mtile .mh,
#hub .hub-stat-row .mtile .ms,
#hub .hub-stat-row .kasa-card .kasa-metric-lbl,
#hub .hub-stat-row .kasa-card .kasa-bar-labels{
  color:color-mix(in srgb,var(--color-ink) 72%,var(--color-slate))!important;
}
#hub .hub-stat-row .mtile .mv,
#hub .hub-stat-row .kasa-card .kasa-main-val,
#hub .hub-stat-row .kasa-card .kasa-metric-val{
  color:var(--metric-accent)!important;
}
#hub .hub-stat-row .kasa-card .kasa-status-badge{
  background:color-mix(in srgb,var(--metric-accent) 18%,var(--surface-elevated))!important;
  color:var(--color-ink)!important;
}
#hub .hub-stat-row .kasa-card .kasa-bar-track{
  background:color-mix(in srgb,var(--color-slate) 18%,transparent)!important;
}
#hub .hub-stat-row .kasa-card .kasa-bar-fill{
  background:color-mix(in srgb,var(--metric-accent) 72%,var(--color-slate))!important;
}
#hub .hub-stat-row .kasa-card .kasa-bar-marker{
  background:var(--color-ink)!important;
  border-color:var(--surface-elevated)!important;
}

#hubBenchSection{
  margin:8px 0 10px!important;
  padding:8px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--surface-elevated) 88%,var(--color-background))!important;
  box-shadow:0 5px 14px rgba(16,29,40,.06)!important;
}
.bench-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--color-slate);
}
.bench-head-label{display:flex;align-items:center;gap:5px}
.bench-head b{font-size:8px;color:var(--color-primary)}
.bench-list{display:grid;gap:5px}
.bench-row{
  display:grid!important;
  grid-template-columns:10px 30px minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:7px!important;
  min-height:31px!important;
  padding:5px 7px!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.72)!important;
  color:var(--color-ink)!important;
  box-shadow:none!important;
}
.bench-drag{display:flex;color:var(--color-slate);opacity:.42}
.bench-pos{
  font-family:var(--mono);
  font-size:8px;
  font-weight:800;
  color:var(--color-slate);
  letter-spacing:.5px;
}
.bench-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--disp);
  font-size:11px;
  font-weight:700;
}
.bench-power{
  font-family:var(--mono);
  font-size:12px;
  font-weight:900;
  color:var(--bench-power-color,var(--color-primary));
}
.bench-inj{
  justify-self:end;
  font-family:var(--mono);
  font-size:7px;
  font-weight:900;
  letter-spacing:.6px;
  padding:1px 4px;
  border-radius:999px;
  background:rgba(66,1,2,.12);
  color:#DA3D2E;
}

#hub .feedwrap{
  border-radius:10px!important;
  box-shadow:0 7px 18px rgba(16,29,40,.07)!important;
  max-height:178px!important;
  overflow:auto!important;
}
#hub .feedwrap h4{
  padding:8px 10px 6px!important;
  font-size:10px!important;
  letter-spacing:2.4px!important;
  color:var(--color-ink)!important;
}
#hub .feedwrap h4::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:8px;
  border-radius:999px;
  background:var(--color-primary);
  vertical-align:.1em;
}
#hub .feeditem{
  padding:7px 10px!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  background:rgba(255,255,255,.46);
}
#hub .feeditem .ft{
  border-radius:999px!important;
  padding:2px 6px!important;
}
#hub .collapsebtn{
  margin:6px 8px 8px!important;
  width:calc(100% - 16px)!important;
  border-radius:8px!important;
  border-style:solid!important;
  padding:7px 8px!important;
  background:var(--surface-muted)!important;
  color:var(--color-slate)!important;
}

#hub .ct-art,
#hub .card-ico,
#hub .fpico{
  color:var(--color-ink);
}
#hub .ct-art svg{
  stroke-width:1.8;
}
#hub .player-token-svg{
  color:var(--color-slate);
  width:38px;
  height:38px;
}

@media(max-width:760px){
  #hubBenchSection{padding:7px!important}
  .bench-row{grid-template-columns:10px 30px minmax(0,1fr) auto!important}
  .bench-inj{display:none}
}

/* ===== Editorial modal pass: bulletin, scout, chair, kaos, talk, width ===== */
.modal-x{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:color-mix(in srgb,var(--surface-elevated) 92%,var(--color-background));
  color:var(--color-slate);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
}
.modal-x:hover{color:var(--color-ink);border-color:var(--color-primary)}

.bulletin-editorial{
  position:relative;
  width:min(330px,calc(100vw - 32px));
  padding-bottom:18px;
  overflow:hidden;
}
.bulletin-editorial .bhead{padding:8px 12px;letter-spacing:2.4px}
.bulletin-editorial .bmascot{
  padding:16px 0 6px;
  color:var(--color-slate);
  background:linear-gradient(180deg,var(--surface-elevated),var(--surface-bg));
}
.bulletin-editorial .bmascot svg{width:54px;height:54px;stroke-width:1.8}
.bulletin-editorial .bhl{font-size:19px;padding-top:6px}
.bulletin-editorial .bbody{padding:7px 24px 2px;font-size:12px;min-height:0}
.bulletin-editorial .beff{font-size:17px;padding:6px 0 0}
.bulletin-editorial .bact{display:none!important}
.bulletin-editorial.is-good .beff,
.bulletin-editorial.is-good .bhl{color:var(--color-primary)}
.bulletin-editorial.is-bad .beff,
.bulletin-editorial.is-bad .bhl{color:var(--color-slate)}

.pres-decision-modal{
  position:relative;
  width:min(360px,calc(100vw - 28px));
  max-width:360px;
  overflow:hidden;
  text-align:center;
}
.pres-bulletin-head{
  background:var(--color-ink);
  color:var(--color-background);
  padding:8px 38px 8px 12px;
  font-family:var(--mono);
  font-size:9px;
  font-weight:800;
  letter-spacing:2.2px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  text-transform:uppercase;
  line-height:1.1;
}
.pres-thinking-card{
  padding:18px 20px 20px;
  background:
    repeating-linear-gradient(-16deg,rgba(86,97,106,.08) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,var(--surface-elevated),var(--surface-bg));
}
.pres-photo-wrap{
  width:82px;
  height:82px;
  margin:0 auto 12px;
  border-radius:999px;
  background:var(--surface-bg);
  border:1px solid var(--border-subtle);
  box-shadow:0 10px 24px rgba(16,29,40,.12);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-slate);
  animation:presDecisionFloat 1.05s ease-in-out infinite alternate;
}
.pres-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.pres-kicker{
  font-family:var(--disp);
  font-size:19px;
  font-weight:900;
  letter-spacing:1.1px;
  color:var(--color-ink);
  text-transform:uppercase;
}
.pres-micro{
  margin-top:7px;
  color:var(--color-slate);
  font-size:12px;
  line-height:1.35;
}
.pres-dots{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:6px;
}
.pres-dots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--color-primary);
  opacity:.28;
  animation:presDot 900ms ease-in-out infinite;
}
.pres-dots span:nth-child(2){animation-delay:150ms}
.pres-dots span:nth-child(3){animation-delay:300ms}
.pres-result{padding-bottom:18px}
.pres-result-icon{
  padding:17px 0 6px;
  color:var(--color-slate);
  background:
    radial-gradient(circle at 50% 20%,rgba(104,117,124,.12),transparent 44%),
    linear-gradient(180deg,var(--surface-elevated),var(--surface-bg));
}
.pres-result-icon svg{
  width:58px;
  height:58px;
  stroke-width:1.75;
}
.pres-result .bhl{
  font-size:20px;
  padding:8px 24px 2px;
}
.pres-result .bbody{
  padding:6px 30px 2px;
  font-size:13px;
  line-height:1.35;
  color:var(--color-slate);
}
.pres-result .beff{
  font-family:var(--disp);
  font-size:clamp(22px,6vw,30px);
  letter-spacing:.4px;
  padding:8px 0 2px;
}
.pres-result.positive-money .beff,
.pres-result.positive-money .bhl{color:var(--color-primary)}
.pres-result.negative-money .beff,
.pres-result.negative-money .bhl{color:#420102}
.pres-result.player-effect .beff,
.pres-result.market-effect .beff{color:#F24A28}
.pres-result.neutral-news .beff{color:var(--color-slate)}
.pres-result .beff + .beff{
  font-family:var(--mono);
  font-size:12px;
  padding-top:8px;
}
@keyframes presDecisionFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-3px)}
}
@keyframes presDot{
  0%,100%{opacity:.28;transform:translateY(0)}
  45%{opacity:1;transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .pres-photo-wrap,
  .pres-dots span{animation:none}
}
@media (max-width:420px){
  .pres-bulletin-head{font-size:8px;letter-spacing:1.5px;padding-right:34px}
  .pres-thinking-card{padding:16px 16px 18px}
  .pres-result .bbody{padding-left:22px;padding-right:22px}
}

.chair-profile{
  width:min(430px,calc(100vw - 28px));
  max-width:430px;
  padding:16px 26px 22px;
  box-sizing:border-box;
}
.chair-profile .cpphoto{width:128px;height:166px;margin-top:0}
.chair-profile .chairpopup-name{
  font-family:var(--disp);
  font-size:22px;
  font-weight:900;
  margin-top:8px;
}
.chair-profile .chairpopup-sub{font-size:13px;color:var(--color-ink);margin-top:2px}
.chair-trust-line{
  font-family:var(--mono);
  font-size:9px;
  color:var(--color-slate);
  letter-spacing:.9px;
  margin:6px 0 12px;
  text-align:center;
}
.chair-trust-line span{color:var(--color-ink);font-weight:900}
.chair-profile .chairpopup-desc{
  font-size:13px;
  max-width:34ch;
  margin:10px auto 0;
  line-height:1.55;
}
.chair-sections{
  display:grid;
  gap:8px;
  margin:14px auto 0;
  max-width:320px;
  text-align:left;
}
.chair-section{
  border:1px solid var(--border-subtle);
  border-radius:8px;
  padding:8px 10px;
  background:var(--surface-bg);
  display:grid;
  gap:4px;
}
.chair-section b{
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--color-slate);
}
.chair-section span{font-size:12px;color:var(--color-ink);line-height:1.25}
.chair-section span::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--color-primary);
  margin-right:6px;
  vertical-align:.08em;
}
.chair-status-pill{
  display:inline-flex;
  margin:12px auto 0;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--border-subtle);
  font-family:var(--mono);
  font-size:9px;
  color:var(--color-slate);
  background:var(--surface-bg);
  text-transform:uppercase;
  letter-spacing:.7px;
}
.chair-consult-btn{
  margin-top:10px!important;
  width:100%;
  justify-content:center;
  min-height:42px;
}

.scout-lineup-modal{
  position:relative;
  width:min(560px,calc(100vw - 24px));
  padding:0;
  overflow:hidden;
  background:var(--surface-elevated);
  border-radius:14px;
}
.scout-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:var(--surface-elevated);
  color:var(--color-slate);
  font-size:18px;
  cursor:pointer;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.scout-mhdr{
  padding:19px 54px 13px;
  text-align:center;
  border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(180deg,var(--surface-elevated),var(--surface-bg));
}
.scout-mhdr-lbl{
  display:block;
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:3px;
  color:var(--color-slate);
  margin-bottom:6px;
}
.scout-mhdr-meta{
  font-family:var(--disp);
  font-size:20px;
  font-weight:900;
  line-height:1.05;
  color:var(--color-ink);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:7px;
  min-width:0;
}
.scout-mhdr-team{
  max-width:min(360px,calc(100vw - 150px));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scout-mhdr-sep{color:var(--color-slate);font-weight:800}
.scout-mhdr-pow{color:var(--color-primary)}
.scout-tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.scout-tags span{
  font-family:var(--mono);
  font-size:9px;
  color:var(--color-slate);
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--surface-elevated);
  padding:5px 9px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
}
.scout-tags em{
  font-style:normal;
  color:var(--color-slate);
  opacity:.78;
}
.scout-tags b{color:var(--color-ink)}
.scout-pitch-wrap{
  padding:15px 18px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.scout-pitch-title{
  width:min(348px,calc(100vw - 70px));
  font-family:var(--mono);
  font-size:8px;
  font-weight:900;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--color-slate);
  text-align:left;
}
.scout-pitch{
  width:min(348px,calc(100vw - 70px))!important;
  height:min(438px,calc((100vw - 70px) * 1.26))!important;
  box-shadow:inset 0 0 0 1px rgba(243,245,244,.18),0 8px 18px rgba(16,29,40,.11);
  border-width:2px!important;
  border-color:rgba(243,245,244,.56)!important;
}
.scout-weak-zone{
  position:absolute;
  z-index:1;
  pointer-events:none;
  border:1.5px dashed rgba(243,245,244,.58);
  background:rgba(243,245,244,.10);
  box-shadow:inset 0 0 24px rgba(16,29,40,.08);
  border-radius:18px;
}
.scout-weak-zone.weak-left{left:9%;top:15%;width:27%;height:70%}
.scout-weak-zone.weak-centre{left:34%;top:22%;width:32%;height:56%;border-radius:999px}
.scout-weak-zone.weak-right{right:9%;top:15%;width:27%;height:70%}
.scout-tactic-cue{
  position:absolute;
  left:50%;
  top:34%;
  transform:translateX(-50%);
  display:flex;
  gap:18px;
  opacity:.22;
  pointer-events:none;
  z-index:1;
}
.scout-tactic-cue span{
  width:34px;
  height:12px;
  border-top:2px solid rgba(243,245,244,.82);
  border-right:2px solid rgba(243,245,244,.82);
  border-radius:2px;
  transform:rotate(-28deg);
}
.scout-tactic-cue span:nth-child(2){transform:rotate(0deg);margin-top:8px}
.scout-tactic-cue span:nth-child(3){transform:rotate(28deg)}
.scout-node{z-index:3}
.scout-player-card{
  box-shadow:0 3px 9px rgba(16,29,40,.22);
  border:1px solid rgba(243,245,244,.06);
}
.scout-nm{
  max-width:60px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(16,29,40,.48);
}
@media(max-width:520px){
  .scout-lineup-modal{width:calc(100vw - 14px)}
  .scout-close{width:34px;height:34px}
  .scout-mhdr{padding:15px 46px 11px 14px}
  .scout-mhdr-lbl{font-size:7px;letter-spacing:2.2px}
  .scout-mhdr-meta{font-size:17px}
  .scout-mhdr-team{max-width:calc(100vw - 150px)}
  .scout-tags{gap:5px}
  .scout-tags span{font-size:8px;padding:4px 7px}
  .scout-pitch-wrap{padding:12px 10px 15px}
  .scout-pitch-title{width:min(318px,calc(100vw - 42px))}
  .scout-pitch{
    width:min(318px,calc(100vw - 42px))!important;
    height:min(400px,calc((100vw - 42px) * 1.26))!important;
  }
  .scout-player-card{transform:translate(-50%,-50%) scale(.9)!important}
}

.kaos-kicker{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2.8px;
  font-weight:900;
  color:var(--color-slate);
  text-transform:uppercase;
  margin-bottom:8px;
}
.kaos-rolling{padding:26px 22px 24px}
.kaos-result{padding:26px 24px 24px}
.kaos-result .modal-x{top:8px;right:8px}
.kaos-result .bact{display:none!important}
.kr-label{font-size:24px}
.kr-desc{font-family:var(--mono);font-size:12px}
.kaos-rolling,
.kaos-result{
  width:min(320px,calc(100vw - 30px));
  box-sizing:border-box;
}
.kaos-result{
  animation:kaosReveal .18s ease-out both;
}
@keyframes kaosReveal{
  from{opacity:.72;transform:translateY(4px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.talkmodal-simple{
  position:relative;
  width:min(360px,calc(100vw - 28px));
  padding:0!important;
  overflow:hidden;
  background:linear-gradient(180deg,var(--surface-elevated) 0%,color-mix(in srgb,var(--surface-elevated) 88%,var(--color-background)) 100%);
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--color-slate) 18%,var(--border-subtle));
  box-shadow:0 22px 52px rgba(16,29,40,.22);
  animation:talkModalIn .18s cubic-bezier(.2,.8,.2,1) both;
}
.talkmodal-simple::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:102px;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%,rgba(104,117,124,.12),transparent 26%),
    linear-gradient(160deg,rgba(16,29,40,.06),transparent 52%),
    repeating-linear-gradient(148deg,rgba(86,97,106,.075) 0 1px,transparent 1px 22px);
  opacity:.72;
}
.talkmodal-simple::after{
  content:"";
  position:absolute;
  top:78px;
  left:42px;
  width:86px;
  height:28px;
  pointer-events:none;
  border-top:1px solid rgba(86,97,106,.12);
  border-left:1px solid rgba(86,97,106,.08);
  border-radius:999px 0 0 0;
  transform:rotate(-4deg);
}
@keyframes talkModalIn{
  from{opacity:0;transform:translateY(-8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.talk-head{position:relative;padding:20px 18px 10px;text-align:center}
.talk-head .kithdr{padding:0;font-size:19px;letter-spacing:1.6px}
.talk-subline{font-family:var(--mono);font-size:10px;color:var(--color-slate);margin-top:6px;letter-spacing:.15px}
.talkmodal-simple .talk-list{position:relative;padding:12px 16px 6px;gap:10px}
.talkmodal-simple .talk-choice{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  min-height:60px;
  padding:13px 13px 13px 16px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--talk-accent,var(--color-primary)) 18%,var(--border-subtle));
  background:
    linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,.18)),
    color-mix(in srgb,var(--surface-elevated) 96%,var(--talk-accent,var(--color-primary)) 4%);
  box-shadow:0 4px 12px rgba(16,29,40,.075);
  transform:translateZ(0);
  transition:border-color var(--tr-fast),box-shadow var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);
  animation:talkChoiceIn .2s ease-out both;
}
.talkmodal-simple .talk-choice:nth-child(2){animation-delay:.035s}
.talkmodal-simple .talk-choice:nth-child(3){animation-delay:.07s}
@keyframes talkChoiceIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
.talk-accent{position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:0 999px 999px 0;background:var(--talk-accent,var(--color-primary))}
.talk-choice-risk{--talk-accent:#DA3D2E}
.talk-choice-safe{--talk-accent:var(--color-slate)}
.talk-choice-conditional{--talk-accent:var(--color-primary)}
.talk-choice-risk{
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.18)),
    color-mix(in srgb,var(--surface-elevated) 94%,#DA3D2E 6%)!important;
}
.talk-choice-safe{
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.2)),
    color-mix(in srgb,var(--surface-elevated) 94%,var(--color-slate) 6%)!important;
}
.talk-choice-conditional{
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.18)),
    color-mix(in srgb,var(--surface-elevated) 94%,var(--color-primary) 6%)!important;
}
.decision-ico{
  display:block;
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.decision-ico *{vector-effect:non-scaling-stroke}
.decision-ico .ico-fill{
  fill:currentColor;
  stroke:none;
  opacity:.12;
}
.risk-offer-icon .decision-ico{
  width:38px;
  height:38px;
}
.risk-svg{
  display:block;
  width:42px;
  height:42px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--risk-accent) 18%,transparent));
}
.risk-svg *{vector-effect:non-scaling-stroke}
.risk-svg .risk-icon-secondary{stroke:var(--risk-secondary)}
.risk-svg .risk-icon-fill{fill:currentColor;stroke:none;opacity:.11}
.risk-svg .risk-icon-orbit{opacity:.52;stroke-dasharray:3 4}
.risk-svg .risk-chance-dot{fill:var(--risk-secondary);stroke:none}
.risk-svg .risk-bolt{fill:color-mix(in srgb,var(--risk-accent) 14%,transparent);transform-origin:center;transform-box:fill-box;animation:riskBoltSurge 2.45s cubic-bezier(.4,0,.2,1) infinite}
.risk-svg .risk-clock-hand{transform-origin:center;transform-box:view-box;animation:riskClockTick 4.8s steps(4,end) infinite}
.risk-svg .risk-spark{opacity:0;animation:riskSpark 2.45s ease-out infinite}
.risk-svg .risk-spark-b{animation-delay:1.18s}
.risk-svg-fortune .risk-coin{transform-origin:center;transform-box:view-box;animation:riskCoinFlip 3.4s cubic-bezier(.55,.05,.35,.95) infinite}
.risk-svg-fortune .risk-chance-dot{animation:riskChanceDot 2.1s ease-in-out infinite}
.risk-svg-fortune .risk-dot-b{animation-delay:.18s}.risk-svg-fortune .risk-dot-c{animation-delay:.36s}
.risk-svg-contract .risk-signature{stroke-dasharray:24 26;animation:riskSignature 3.6s ease-in-out infinite}
.risk-svg-contract .risk-trophy{transform-origin:center;transform-box:fill-box;animation:riskTrophyLift 3.6s ease-in-out infinite}
.risk-svg-contract .risk-cup-star{transform-origin:center;transform-box:fill-box;animation:riskCupStar 1.8s ease-in-out infinite}
.risk-svg-grit .risk-pulse{stroke-dasharray:38 40;animation:riskPulseTrace 2.25s ease-in-out infinite}
.risk-svg-grit .risk-fist{transform-origin:center bottom;transform-box:fill-box;animation:riskFistBrace 2.25s cubic-bezier(.4,0,.2,1) infinite}
.risk-svg-grit .risk-impact{opacity:0;animation:riskImpact 2.25s ease-out infinite}
.risk-svg-safe .risk-shield{transform-origin:center;transform-box:fill-box;animation:riskShieldBreathe 4.2s ease-in-out infinite}
.risk-svg-safe .risk-safe-route{stroke-dasharray:24 26;animation:riskSafeRoute 4.2s ease-in-out infinite}
.risk-svg-safe .risk-check{stroke-dasharray:18 20;animation:riskCheckDraw 4.2s ease-in-out infinite}
.risk-svg-safe .risk-safe-dot{transform-origin:center;transform-box:fill-box;animation:riskSafeDot 4.2s ease-in-out infinite}
html[data-theme="dark"] .risk-offer{
  background:linear-gradient(105deg,color-mix(in srgb,var(--surface-raised) 87%,var(--risk-accent) 13%),var(--surface-elevated) 52%);
  border-color:color-mix(in srgb,var(--risk-accent) 32%,var(--border-default));
  box-shadow:0 5px 17px rgba(10,17,24,.26),inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .risk-offer-icon{
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 76%,var(--risk-secondary) 24%),color-mix(in srgb,var(--surface-elevated) 88%,var(--risk-accent) 12%));
  border-color:color-mix(in srgb,var(--risk-accent) 42%,var(--border-default));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(10,17,24,.28);
}
html[data-theme="dark"] .risk-offer:hover,html[data-theme="dark"] .risk-offer:focus-visible{
  border-color:color-mix(in srgb,var(--risk-accent) 68%,var(--border-default));
  box-shadow:0 9px 24px rgba(10,17,24,.4),0 0 0 1px color-mix(in srgb,var(--risk-accent) 16%,transparent);
}
@keyframes riskOfferEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes riskBoltSurge{0%,72%,100%{transform:scale(1);filter:none}78%{transform:scale(1.12);filter:drop-shadow(0 0 3px currentColor)}84%{transform:scale(.97)}90%{transform:scale(1.06)}}
@keyframes riskClockTick{to{transform:rotate(360deg)}}
@keyframes riskSpark{0%,66%,100%{opacity:0;transform:scale(.7)}73%{opacity:1;transform:scale(1.16)}82%{opacity:.25;transform:scale(1)}}
@keyframes riskCoinFlip{0%,58%,100%{transform:rotateY(0) translateY(0)}68%{transform:rotateY(90deg) translateY(-2px)}78%{transform:rotateY(180deg) translateY(0)}88%{transform:rotateY(360deg)}}
@keyframes riskChanceDot{0%,35%,100%{opacity:.22;transform:scale(.76)}48%,62%{opacity:1;transform:scale(1.18)}}
@keyframes riskSignature{0%,18%{stroke-dashoffset:25;opacity:.35}48%,76%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-25;opacity:.35}}
@keyframes riskTrophyLift{0%,58%,100%{transform:translateY(0)}68%{transform:translateY(-1.8px)}78%{transform:translateY(0)}}
@keyframes riskCupStar{0%,100%{opacity:.5;transform:scale(.82)}50%{opacity:1;transform:scale(1.18)}}
@keyframes riskPulseTrace{0%{stroke-dashoffset:40;opacity:.25}38%,65%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-40;opacity:.25}}
@keyframes riskFistBrace{0%,54%,100%{transform:translateY(0) scale(1)}62%{transform:translateY(-1px) scale(1.025)}70%{transform:translateY(0) scale(.99)}}
@keyframes riskImpact{0%,54%,100%{opacity:0;transform:scale(.7)}63%{opacity:1;transform:scale(1.12)}76%{opacity:.15;transform:scale(1)}}
@keyframes riskShieldBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes riskSafeRoute{0%,18%{stroke-dashoffset:25;opacity:.3}43%,82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-25;opacity:.3}}
@keyframes riskCheckDraw{0%,44%{stroke-dashoffset:19;opacity:0}62%,90%{stroke-dashoffset:0;opacity:1}100%{opacity:.35}}
@keyframes riskSafeDot{0%,100%{transform:scale(.86);opacity:.45}48%{transform:scale(1.2);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .risk-offer,.risk-offer *{animation:none!important;transition-duration:.01ms!important}
}

/* Risk choices use a single strong pictogram; ambient orbit/spark layers were
   visually reading as duplicate icons on small screens. */
@media(max-width:760px){
  .risk-offer-icon{width:44px;height:44px;border-radius:12px;box-shadow:none!important}
  .risk-offer-icon .risk-svg{width:34px;height:34px;filter:none}
  .risk-svg .risk-icon-orbit,
  .risk-svg .risk-spark,
  .risk-svg .risk-clock,
  .risk-svg .risk-clock-hand,
  .risk-svg .risk-impact,
  .risk-svg .risk-pulse{display:none}
  .risk-svg-contract .risk-trophy{display:none}
  .risk-svg-safe .risk-safe-route,.risk-svg-safe .risk-safe-dot{display:none}
}
.bulletin .bmascot .decision-ico{
  width:56px;
  height:56px;
  margin:0 auto;
}
.talk-choice .ssi{
  color:var(--talk-accent);
  width:38px;
  min-height:38px;
  align-self:center;
  transition:transform var(--tr-fast),filter var(--tr-fast);
}
.talk-choice .si,.talk-choice .decision-ico{width:32px;height:32px}
.talk-choice .sst{font-size:17px;line-height:1.1}
.talk-micro{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--color-slate);
  line-height:1.32;
  margin-top:4px;
}
.talk-choice:hover{
  border-color:var(--talk-accent);
  background:color-mix(in srgb,var(--surface-elevated) 92%,var(--talk-accent) 8%);
  box-shadow:0 7px 18px rgba(16,29,40,.12);
}
.talk-choice:hover .ssi{transform:translateY(-1px);filter:saturate(1.05)}
.talk-choice:active{transform:scale(.986);box-shadow:0 3px 10px rgba(16,29,40,.1)}
html[data-theme="dark"] .talkmodal-simple .talk-choice{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface-raised) 90%,var(--talk-accent) 10%),
      color-mix(in srgb,var(--surface-elevated) 97%,var(--talk-accent) 3%))!important;
  color:var(--text-primary)!important;
  border-color:color-mix(in srgb,var(--talk-accent) 34%,var(--border-default))!important;
  box-shadow:0 5px 14px rgba(10,17,24,.24),inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-theme="dark"] .talkmodal-simple .talk-choice .sst{color:var(--text-primary)!important}
html[data-theme="dark"] .talkmodal-simple .talk-choice .talk-micro{color:var(--text-secondary)!important}
html[data-theme="dark"] .talkmodal-simple .talk-choice:hover{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface-raised) 84%,var(--talk-accent) 16%),
      color-mix(in srgb,var(--surface-elevated) 93%,var(--talk-accent) 7%))!important;
  border-color:var(--talk-accent)!important;
  box-shadow:0 8px 20px rgba(10,17,24,.3);
}
.talk-foot{
  position:relative;
  padding:2px 16px 15px;
  text-align:center;
  font-family:var(--mono);
  font-size:9px;
  color:var(--color-slate);
}
@media(max-width:440px){
  .talkmodal-simple{width:calc(100vw - 18px)}
  .talk-head{padding:18px 16px 9px}
  .talkmodal-simple .talk-list{padding:10px 12px 6px}
}
@media(prefers-reduced-motion:reduce){
  .talkmodal-simple,
  .talkmodal-simple .talk-choice{
    animation:none!important;
  }
}

@media(min-width:901px){
  #hub.wrap{
    width:min(100%,1148px)!important;
    max-width:min(1148px,calc(100vw - 88px))!important;
  }
  #hub .hubcols{
    grid-template-columns:minmax(0,830px) minmax(238px,268px)!important;
    gap:11px!important;
  }
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #fixbar.cuproad{
    max-width:830px!important;
    width:100%!important;
    margin-inline:auto!important;
  }
  #hub #hubPitch{
    max-width:830px!important;
    height:clamp(465px,39vw,540px)!important;
    min-height:445px!important;
  }
  #hub .hcol-r > .hub-action-panel,
  #hub .hcol-r > .sectlbl,
  #hub .hcol-r > .shopcards,
  #hub .hcol-r > #freeAgentRow,
  #hub .hcol-r > .feedwrap{
    max-width:268px!important;
  }
}
@media(min-width:901px) and (max-width:1180px){
  #hub.wrap{max-width:calc(100vw - 36px)!important}
  #hub .hubcols{
    grid-template-columns:minmax(0,660px) minmax(232px,252px)!important;
    gap:10px!important;
  }
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubBenchSection,
  #fixbar.cuproad{max-width:660px!important}
  #hub #hubPitch{
    max-width:660px!important;
    height:clamp(420px,49vw,505px)!important;
    min-height:400px!important;
  }
  #hub .hcol-r > .hub-action-panel,
  #hub .hcol-r > .sectlbl,
  #hub .hcol-r > .shopcards,
  #hub .hcol-r > #freeAgentRow,
  #hub .hcol-r > .feedwrap{
    max-width:252px!important;
  }
}
#fixbar.cuproad{box-sizing:border-box}
#fixbar.cuproad .fix{min-width:0}

/* ===== Mobile order and overflow hardening ===== */
.scout-node .scout-player-card{transform:none!important}

@media(max-width:900px){
  html,body,#app,.screen,.wrap,#hub,#draft{max-width:100%!important;overflow-x:hidden!important}

  #hub .hubcols{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    gap:8px!important;
  }
  #hub .hcol-l,
  #hub .hcol-r{display:contents!important}

  #hub .vsbar{
    order:1!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  #hub .hub-action-panel{
    order:2!important;
    position:sticky!important;
    top:6px!important;
    z-index:50!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  #hub .hub-stat-row{
    order:3!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
  }
  #hub .hub-stat-row .mtile,
  #hub .hub-stat-row .kasa-card{
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    padding:5px!important;
    overflow:hidden!important;
  }
  #hub .hub-stat-row .mtile .mh,
  #hub .hub-stat-row .kasa-metric-lbl{
    font-size:5.8px!important;
    letter-spacing:1.1px!important;
  }
  #hub .hub-stat-row .mtile .mv,
  #hub .hub-stat-row .kasa-main-val{
    font-size:14px!important;
    line-height:1!important;
  }
  #hub .hub-stat-row .mtile .ms,
  #hub .hub-stat-row .kasa-metric-val{
    font-size:6.5px!important;
  }
  #hub .hub-stat-row .kasa-metrics,
  #hub .hub-stat-row .kasa-bar-wrap,
  #hub .hub-stat-row .kasa-sub{display:none!important}
  #hub .hub-stat-row .kasa-status-badge{
    font-size:5.5px!important;
    padding:1px 4px!important;
    max-width:100%;
  }

  #hub .pitch-area{order:4!important;width:100%!important;max-width:100%!important}
  #hub #hubBenchSection{order:5!important;width:100%!important;max-width:100%!important}
  #fixbar.cuproad{order:6!important;width:100%!important;max-width:100%!important}
  #hub .hcol-r>.sectlbl{order:7!important;width:100%!important;max-width:100%!important}
  #hub .hcol-r>.shopcards,
  #hub .hcol-r>#freeAgentRow{
    order:8!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #hub .hcol-r>.feedwrap{
    order:9!important;
    width:100%!important;
    max-width:100%!important;
  }

  #draft .draft-cols{
    width:min(100%,760px)!important;
    max-width:calc(100vw - 16px)!important;
    grid-template-columns:minmax(0,1fr) minmax(260px,320px)!important;
    gap:12px!important;
    overflow:visible!important;
  }
  #draft .draft-left,
  #draft .draft-right{min-width:0!important;max-width:none!important;width:100%!important}
  #draft .draft-right .pitch{
    width:100%!important;
    min-width:0!important;
    max-width:320px!important;
    aspect-ratio:68/92!important;
    height:auto!important;
  }
}

@media(max-width:620px){
  #draft .draft-cols{
    grid-template-columns:1fr!important;
    width:min(100%,460px)!important;
    max-width:calc(100vw - 14px)!important;
  }
  #draft .draft-right .pitch{
    max-width:460px!important;
    width:100%!important;
  }
  .v7-setup-twocol .formpick{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .v7-setup-twocol .formpick .fbtn{
    min-width:0!important;
    padding:8px 3px!important;
    font-size:10px!important;
  }
  .v7-setup-twocol #chairpick{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .v7-setup-twocol #chairpick .chairbtn{
    min-width:0!important;
    min-height:84px!important;
  }
  .v7-setup-twocol #chairpick .chairthumb{
    height:56px!important;
  }
}

@media(max-width:520px){
  .scout-node{
    align-items:center!important;
    gap:2px!important;
  }
  .scout-player-card{
    width:34px!important;
    min-height:30px!important;
  }
  .scout-player-card .scout-ov{
    min-width:22px!important;
    height:14px!important;
    line-height:14px!important;
    font-size:10px!important;
  }
  .scout-player-card .scout-pos{font-size:7px!important}
  .scout-nm{
    width:50px!important;
    max-width:50px!important;
    font-size:6.4px!important;
    line-height:1.05!important;
    margin-top:2px!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
}

@media(min-width:560px) and (max-width:760px){
  .v7-setup-twocol .formpick{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .v7-setup-twocol #chairpick{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Contextual metric tint + compact active effects */
#hub .hub-stat-row .mtile.context-metric,
#hub .hub-stat-row #powTile.context-metric,
#hub .hub-stat-row #trustTile.context-metric{
  background:#1F2B34!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--metric-accent,#4E9B65) 18%,var(--surface-elevated)),color-mix(in srgb,var(--metric-accent,#4E9B65) 7%,var(--surface-bg)))!important;
  border-left:3px solid var(--metric-accent,#4E9B65)!important;
  border-color:color-mix(in srgb,var(--metric-accent,#4E9B65) 30%,var(--border-subtle))!important;
  color:var(--color-ink)!important;
}
#hub .hub-stat-row #powTile.context-metric .mh,
#hub .hub-stat-row #powTile.context-metric .ms,
#hub .hub-stat-row #chemTile.context-metric .mh,
#hub .hub-stat-row #chemTile.context-metric .ms,
#hub .hub-stat-row #trustTile.context-metric .mh,
#hub .hub-stat-row #trustTile.context-metric .ms{color:var(--color-ink)!important}
#hub .hub-stat-row #powTile.context-metric .mv,
#hub .hub-stat-row #chemTile.context-metric .mv,
#hub .hub-stat-row #trustTile.context-metric .mv{color:var(--metric-accent,#4E9B65)!important}
#hub .hub-stat-row #powTile.context-metric .mtile-info,
#hub .hub-stat-row #chemTile.context-metric .mtile-info,
#hub .hub-stat-row #trustTile.context-metric .mtile-info{color:var(--color-ink)!important;border-color:var(--color-ink)!important}

/* Chairman trust help: same compact editorial language as the chemistry and
   squad-power mechanic explainers, with the live trust tier highlighted. */
.trust-info-modal{box-sizing:border-box;width:min(390px,calc(100vw - 32px));max-width:100%;padding:16px;color:var(--color-ink)}
.trust-info-title{margin-bottom:10px;color:var(--color-ink);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:2px;line-height:1.25;text-transform:uppercase}
.trust-info-copy{font-size:12px;line-height:1.65}
.trust-info-copy>p{margin:0 0 10px}
.trust-info-current{--trust-accent:var(--color-primary);display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:8px 10px;border:1px solid var(--trust-accent);border-color:color-mix(in srgb,var(--trust-accent) 46%,var(--border-subtle));border-radius:var(--radius-sm);background:#27343C;background:color-mix(in srgb,var(--trust-accent) 9%,var(--surface-elevated))}
.trust-info-current span{color:var(--color-slate);font-family:var(--mono);font-size:7px;font-weight:800;letter-spacing:1.2px}
.trust-info-current b{color:var(--color-slate);font-family:var(--mono);font-size:10px;text-align:right;text-transform:uppercase}
.trust-info-current b em,.trust-info-current b i{font-style:normal}
.trust-info-current b em{color:var(--trust-accent)}
.trust-info-current b i{color:#420102}
.trust-info-levels{display:grid;gap:5px;margin-bottom:11px}
.trust-info-level{--trust-accent:var(--color-slate);display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--trust-accent);border-color:color-mix(in srgb,var(--trust-accent) 30%,var(--border-subtle));border-radius:7px;background:#27343C;background:color-mix(in srgb,var(--trust-accent) 5%,var(--surface-elevated));opacity:.9}
.trust-info-level.is-secure,.trust-info-current.is-secure{--trust-accent:#4E9B65}
.trust-info-level.is-steady,.trust-info-current.is-steady{--trust-accent:#101D28}
.trust-info-level.is-fragile,.trust-info-current.is-fragile{--trust-accent:#DA3D2E}
.trust-info-level.is-danger,.trust-info-current.is-danger{--trust-accent:#420102}
.trust-info-level.is-current{border-color:color-mix(in srgb,var(--trust-accent) 68%,var(--border-subtle));background:color-mix(in srgb,var(--trust-accent) 12%,var(--surface-elevated));box-shadow:inset 2px 0 0 var(--trust-accent);opacity:1}
.trust-info-level>b{color:var(--trust-accent);font-family:var(--mono);font-size:10px;letter-spacing:2px;white-space:nowrap}
.trust-info-level span{display:grid;min-width:0}
.trust-info-level strong{color:var(--trust-accent);font-family:var(--mono);font-size:8px;text-transform:uppercase}
.trust-info-level small{color:var(--color-slate);font-size:9px;line-height:1.35}
.trust-info-rules{padding-top:2px;border-top:1px solid var(--border-subtle)}
.trust-info-rules p{margin:7px 0 0;color:var(--color-slate);font-family:var(--mono);font-size:9px;line-height:1.45}
.trust-info-rules b{color:var(--color-ink)}
.trust-info-num{font-variant-numeric:tabular-nums}
.trust-info-num.is-positive{color:#4E9B65}
.trust-info-num.is-negative{color:#420102}
.trust-info-num.is-fragile{color:#DA3D2E}
.trust-info-num.is-range{color:#101D28}
.trust-info-foot{margin-top:11px!important;padding:8px 9px;border-left:2px solid var(--color-primary);background:var(--surface-muted);color:var(--color-slate);font-size:10px;line-height:1.45}
.trust-info-foot b{color:var(--color-ink)}
.trust-info-close{width:100%;margin-top:3px}
html[data-theme="dark"] .trust-info-level.is-secure,
html[data-theme="dark"] .trust-info-current.is-secure{--trust-accent:#F25F40}
html[data-theme="dark"] .trust-info-level.is-steady,
html[data-theme="dark"] .trust-info-current.is-steady{--trust-accent:#AAB2B3}
html[data-theme="dark"] .trust-info-level.is-fragile,
html[data-theme="dark"] .trust-info-current.is-fragile{--trust-accent:#F24A28}
html[data-theme="dark"] .trust-info-level.is-danger,
html[data-theme="dark"] .trust-info-current.is-danger{--trust-accent:#DA3D2E}
html[data-theme="dark"] .trust-info-current b i,
html[data-theme="dark"] .trust-info-num.is-negative{color:#DA3D2E}
html[data-theme="dark"] .trust-info-num.is-positive{color:#F25F40}
html[data-theme="dark"] .trust-info-num.is-fragile{color:#F24A28}
html[data-theme="dark"] .trust-info-num.is-range{color:#AAB2B3}
.mechanic-info-modal{box-sizing:border-box;width:min(430px,calc(100vw - 24px));padding:16px;color:var(--text-primary)}
.mechanic-info-title{margin-bottom:10px;color:var(--text-primary);font:800 10px/1.25 var(--mono);letter-spacing:2px;text-transform:uppercase}
.mechanic-info-copy{font-size:12px;line-height:1.65}.mechanic-info-copy>p:first-child{margin:0 0 9px}
.mechanic-info-row{margin:0 0 6px;padding:7px 8px;border:1px solid var(--border-subtle);border-radius:7px;background:#27343C;color:var(--text-secondary);font:700 9px/1.45 var(--mono)}
.mechanic-info-row.is-positive{border-color:#4E9B65;background:#1F6B45;color:#F3F5F4}
.mechanic-info-row.is-negative{border-color:#DA3D2E;background:#F3F5F4;color:#420102}
.context-number{font:900 inherit/1 var(--mono);font-variant-numeric:tabular-nums}.context-number.is-positive{color:var(--status-positive-text)}.context-number.is-negative{color:var(--status-negative-text)}.mechanic-info-row.is-negative .context-number.is-negative{color:#DA3D2E}.context-number.is-range,.context-number.is-neutral{color:var(--status-info-text)}
.mechanic-info-close{width:100%;margin-top:8px}
.cash-info-grid{display:grid;gap:6px}.cash-info-grid p{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:9px;border:1px solid var(--border-subtle);border-radius:7px;background:#27343C}.cash-info-grid span{color:var(--text-secondary);font:700 8px/1.2 var(--mono)}
.kasa-card{position:relative}.kasa-detail-btn{position:absolute;right:7px;bottom:7px;z-index:2;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--border-default);border-radius:50%;background:#17242D;color:var(--text-primary);cursor:pointer}.kasa-detail-btn:hover,.kasa-detail-btn:focus-visible{border-color:var(--color-primary);color:var(--color-primary)}
.formation-unlock-modal{box-sizing:border-box;width:min(500px,calc(100vw - 20px));padding:18px;overflow:hidden}.formation-unlock-modal .kithdr{margin:0 0 7px;text-align:center}.formation-unlock-modal .kitsub{position:static;margin:0 0 14px;color:var(--text-secondary);font-size:10px;line-height:1.45;text-align:center}.formation-unlock-modal>.bact{display:grid;grid-template-columns:1fr;gap:7px;margin:0!important;padding:0!important}.formation-unlock-modal>.bact .btn{width:100%;min-height:46px;margin:0!important}
@media(max-width:430px){
  .trust-info-modal{width:calc(100vw - 20px);padding:14px}
  .trust-info-current{align-items:flex-start;flex-direction:column;gap:3px}
  .trust-info-current b{text-align:left}
  .trust-info-level{grid-template-columns:48px minmax(0,1fr);padding-inline:7px}
  .trust-info-level>b{font-size:9px;letter-spacing:1.5px}
}
.pitch-overlay #cardrow{align-items:flex-start!important;width:max-content;max-width:min(290px,76%)}
.pitch-overlay #cardrow .card{width:fit-content!important;max-width:100%;display:inline-flex;align-items:center;gap:6px}
.pitch-overlay #cardrow .card b{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitch-overlay #cardrow .card .copy.active-stance{margin-left:0;white-space:nowrap;flex:0 0 auto}

/* Backup picker */
.backup-modal{box-sizing:border-box!important;width:700px!important;max-width:100%!important;max-height:calc(100dvh - 40px)!important;padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:var(--surface-bg)!important}
.backup-head{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(260px,310px)!important;align-items:stretch!important;gap:12px!important;padding:16px 58px 14px 18px!important;border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--surface-elevated),var(--surface-bg))}
.backup-titleblock{min-width:0;display:flex;flex-direction:column;justify-content:center}
.backup-modal.scoutmodal .backup-head h4{margin:0;padding:0;background:transparent;color:var(--color-ink);font-size:17px;letter-spacing:.12em;font-family:var(--mono);line-height:1.05;text-align:left}
.backup-head p{margin:5px 0 0;color:var(--color-slate);font-size:12px;font-weight:800;line-height:1.3}
.backup-injury{min-width:0;border:1px solid color-mix(in srgb,#DA3D2E 28%,var(--border-subtle));border-radius:9px;background:color-mix(in srgb,#DA3D2E 6%,var(--surface-elevated));padding:9px 11px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px}
.backup-injury-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.backup-injury .backup-summary-label{font-size:8px;color:var(--color-slate);font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.backup-injury strong{font-size:12px;color:var(--color-ink);font-weight:900;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backup-injury-power{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.backup-injury-power>span{display:flex;flex-direction:column;align-items:center;gap:1px}
.backup-injury-power small{font:800 7px/1 var(--mono);color:var(--color-slate);text-transform:uppercase;letter-spacing:.08em}
.backup-injury-power b{font:900 17px/1 var(--mono);color:var(--color-ink);white-space:nowrap}
.backup-injury-power>span:last-child b{color:#DA3D2E}
.backup-injury-power i{font-style:normal;color:var(--color-slate);font-size:13px}
.backup-body{overflow:auto!important;min-height:0!important;-webkit-overflow-scrolling:touch}
.backup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:14px 18px!important;justify-content:stretch!important}
.backup-card{box-sizing:border-box!important;width:100%!important;max-width:none!important;min-width:0!important;position:relative;text-align:left!important;border:1px solid var(--border-default)!important;border-radius:8px!important;background:var(--surface-elevated)!important;padding:10px 11px!important;min-height:92px!important;cursor:pointer;box-shadow:0 3px 9px rgba(16,29,40,.045);transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;color:var(--color-ink)!important;display:block!important}
.backup-card:hover{border-color:var(--color-primary)!important;transform:translateY(-1px);background:var(--surface-elevated)!important;color:var(--color-ink)!important}
.backup-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.backup-card.is-selected{border-color:var(--color-primary)!important;background:color-mix(in srgb,var(--color-primary) 10%,var(--surface-elevated))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.backup-card.misfit{border-style:dashed!important;background:color-mix(in srgb,var(--color-slate) 5%,var(--surface-elevated))!important;opacity:1!important}
.backup-card.emergency-keeper{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border-default))!important;background:color-mix(in srgb,var(--color-primary) 7%,var(--surface-elevated))!important}
.backup-card.emergency-keeper .bk-reason{border-color:color-mix(in srgb,var(--color-primary) 34%,var(--border-subtle));color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,var(--surface-bg))}
.bk-check{position:absolute;right:9px;top:9px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:white;font-size:12px;font-weight:900;opacity:0;transform:scale(.85);transition:.15s}
.backup-card.is-selected .bk-check{opacity:1;transform:scale(1)}
.bk-top{display:flex!important;justify-content:space-between;gap:12px;align-items:flex-start}
.bk-id{min-width:0}
.bk-name{font-size:15px!important;font-weight:900;color:var(--color-ink);line-height:1.1;margin-right:18px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left!important;font-family:var(--disp)}
.bk-role{margin-top:4px;font-size:11px;color:var(--color-slate);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.bk-rating{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.bk-rating span{font:800 7px/1 var(--mono);color:var(--color-slate);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.bk-power{font-size:20px;line-height:1;font-family:var(--mono)}
.bk-power.great,.bk-meta b.great{color:#F24A28}.bk-power.good,.bk-meta b.good{color:#4E9B65}.bk-power.ok,.bk-meta b.ok{color:#F24A28}.bk-power.bad,.bk-meta b.bad{color:#DA3D2E}
.bk-meta{margin-top:9px;border-top:1px solid var(--border-subtle);padding-top:7px;display:flex;justify-content:space-between;color:var(--color-slate);font-size:11px;font-weight:800}
.bk-meta b{font-size:15px}.bk-reason{display:inline-flex;margin-top:8px;border:1px solid var(--border-subtle);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:900;color:var(--color-slate);background:var(--surface-bg);text-transform:uppercase;letter-spacing:.05em}
.backup-empty{grid-column:1/-1;text-align:center;padding:24px;color:var(--color-slate);font-weight:800;border:1px dashed var(--border-default);border-radius:10px}
.backup-actions{display:grid!important;grid-template-columns:minmax(116px,.38fr) minmax(0,1fr);gap:8px;padding:12px 18px 16px!important;margin-top:0!important;border-top:1px solid var(--border-subtle);background:var(--surface-bg);flex-shrink:0!important}.backup-cancel,.backup-cta{width:100%;height:44px;margin:0!important;justify-content:center}.backup-cta:only-child{grid-column:1/-1}.backup-cta:disabled{opacity:.45;cursor:not-allowed}
html[data-theme="dark"] .backup-modal .backup-head{
  background:#17242D!important;
  border-bottom-color:rgba(243,245,244,.16)!important;
}
html[data-theme="dark"] .backup-modal .backup-titleblock h4{color:#F3F5F4!important}
html[data-theme="dark"] .backup-modal .backup-titleblock p{
  color:#BCC2C2!important;
}
@media(max-width:720px){
  .backup-modal{width:calc(100% - 12px)!important;max-width:calc(100% - 12px)!important;max-height:calc(100dvh - 24px)!important;border-radius:10px!important}
  .backup-head{grid-template-columns:1fr!important;padding:11px 44px 9px 11px!important;gap:7px!important}
  .backup-modal.scoutmodal .backup-head h4{font-size:13.5px;letter-spacing:.1em}
  .backup-head p{margin-top:3px;font-size:10px;line-height:1.25}
  .backup-injury{min-height:0;padding:6px 8px;border-radius:7px;gap:8px}
  .backup-injury-copy{gap:2px}
  .backup-injury .backup-summary-label{font-size:7px}
  .backup-injury strong{font-size:11px}
  .backup-injury-power{gap:5px}
  .backup-injury-power b{font-size:15px}
  .backup-grid{grid-template-columns:1fr!important;padding:8px 10px!important;gap:6px!important}
  .backup-card{min-height:0!important;padding:7px 9px!important;border-radius:7px!important;box-shadow:none!important}
  .bk-check{top:7px;right:7px;width:17px;height:17px;font-size:10px}
  .bk-top{align-items:center!important}
  .bk-name{font-size:13px!important}
  .bk-role{margin-top:2px;font-size:9px}
  .bk-rating span{display:none}
  .bk-power{font-size:18px}
  .bk-meta{margin-top:5px;padding-top:4px;font-size:10px}
  .bk-meta b{font-size:14px}
  .bk-reason{margin-top:4px;padding:2px 6px;font-size:8px}
  .backup-actions{grid-template-columns:minmax(88px,.35fr) minmax(0,.65fr);padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important}
  .backup-cancel,.backup-cta{height:44px!important;padding:8px!important;font-size:10px!important}
}

/* ===== Responsive overflow guardrails ===== */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

*,*::before,*::after{
  box-sizing:border-box;
}

@media(max-width:900px){
  #app,
  .screen,
  .wrap,
  #hub,
  #draft,
  #sim,
  #result{
    width:100%;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  #hub .hubcols,
  #hub .hcol-l,
  #hub .hcol-r,
  #hub .vsbar,
  #hub .hub-stat-row,
  #hub .pitch-area,
  #hub #hubPitch,
  #hub #hubBenchSection,
  #fixbar.cuproad,
  #hub .shopcards,
  #hub #freeAgentRow,
  #hub .feedwrap,
  #draft .draft-cols,
  #draft .draft-left,
  #draft .draft-right,
  #draft .draft-right .pitch{
    max-width:100%!important;
    min-width:0!important;
  }
  #hub .hub-stat-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media(max-width:620px){
  #hub .hub-stat-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #hub #freeAgentRow .shopcards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #hub #freeAgentRow .cardtile{
    min-width:0!important;
  }
  #draft .draft-cols{
    width:100%!important;
  }
  #draft .draft-right .pitch{
    width:100%!important;
    aspect-ratio:68/92;
  }
}

/* Final mobile metric pass: keep the four match metrics on one compact row. */
@media(max-width:620px){
  #hub .hub-stat-row{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    width:100%!important;
    max-width:100%!important;
    align-items:stretch!important;
  }

  #hub .hub-stat-row > .mtile,
  #hub .hub-stat-row > .kasa-card,
  #hub .hub-stat-row #kasaTile{
    grid-column:auto!important;
    grid-row:auto!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    padding:4px 5px!important;
    border-radius:7px!important;
    overflow:hidden!important;
  }

  #hub .hub-stat-row .mtile{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:1px!important;
  }

  #hub .hub-stat-row .mtile .mh,
  #hub .hub-stat-row .kasa-metric-lbl{
    font-size:5.3px!important;
    line-height:1!important;
    letter-spacing:.65px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #hub .hub-stat-row .mtile .mv,
  #hub .hub-stat-row .kasa-main-val{
    font-size:13px!important;
    line-height:.95!important;
    letter-spacing:-.2px!important;
    white-space:nowrap!important;
  }

  #hub .hub-stat-row .mtile .ms,
  #hub .hub-stat-row .kasa-metric-val{
    font-size:5.8px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #hub .hub-stat-row .mtile-info{
    width:13px!important;
    height:13px!important;
    top:3px!important;
    right:3px!important;
    font-size:7px!important;
  }

  #hub .hub-stat-row #kasaTile{
    gap:1px!important;
  }

  #hub .hub-stat-row #kasaTile .kasa-top-row{
    margin:0!important;
    min-height:0!important;
  }

  #hub .hub-stat-row #kasaTile .kasa-status-badge{
    max-width:100%!important;
    font-size:4.8px!important;
    line-height:1!important;
    padding:1px 3px!important;
    letter-spacing:.35px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #hub .hub-stat-row #kasaTile .kasa-main-val{
    margin:0!important;
    font-size:13px!important;
  }

  #hub .hub-stat-row #kasaTile .kasa-sub,
  #hub .hub-stat-row #kasaTile .kasa-metrics,
  #hub .hub-stat-row #kasaTile .kasa-bar-wrap{
    display:none!important;
  }
}

@media(max-width:360px){
  #hub .hub-stat-row{
    gap:3px!important;
  }

  #hub .hub-stat-row > .mtile,
  #hub .hub-stat-row > .kasa-card,
  #hub .hub-stat-row #kasaTile{
    height:44px!important;
    min-height:44px!important;
    padding:3px 4px!important;
  }

  #hub .hub-stat-row .mtile .mh,
  #hub .hub-stat-row .kasa-metric-lbl{
    font-size:5px!important;
    letter-spacing:.5px!important;
  }

  #hub .hub-stat-row .mtile .mv,
  #hub .hub-stat-row .kasa-main-val{
    font-size:12px!important;
  }
}

/* ============================================================
   PENALTY SHOOTOUT — visual overhaul (goal scene, outcome, slots)
   Appended last so it wins the cascade over earlier .pen-* blocks.
   ============================================================ */
.pen-modal .pen-kicker{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.pen-modal .pen-head{
  background:#101D28!important;
  color:#FFFFFF!important;
}
.pen-modal .pen-kicker>span:first-child{color:rgba(255,255,255,.78)}
.pen-modal .pen-kicker .pen-kickno{
  padding:1px 7px;border-radius:999px;
  background:rgba(243,245,244,.16);color:rgba(243,245,244,.9);
  font-size:9px;letter-spacing:1px;
}
.pen-modal.is-sudden .pen-kicker .pen-kickno{background:#F24A28;color:var(--color-ink)}
.pen-modal .pen-score span{color:rgba(255,255,255,.76)!important}
.pen-modal .pen-score b{color:#FFFFFF!important;text-shadow:0 1px 8px rgba(10,17,24,.42)}
.pen-modal .pen-phase{margin:8px 0 0}
.pen-modal .pen-phase b{color:#FFFFFF!important;font-size:15px;line-height:1.15}

.pen-modal .pen-actors .pen-duel{position:relative}
.pen-modal .pen-actors .pen-duel .pen-ov{
  position:absolute;top:8px;right:9px;
  min-width:22px;text-align:center;
  padding:1px 5px;border-radius:5px;
  background:var(--pen-ov-bg,var(--rating-info-bg));color:var(--pen-ov-fg,var(--rating-on-info));
  font-family:var(--mono);font-size:10px;font-weight:900;
}
.pen-modal .pen-actors .pen-duel.is-you .pen-ov{box-shadow:0 0 0 2px color-mix(in srgb,var(--action-primary) 34%,transparent)}
.pen-modal .pen-actors .pen-duel em{max-width:calc(100% - 34px)}

.pen-modal .pen-goal{
  position:relative;
  height:180px!important;
  border-radius:12px;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg,var(--field-grass) 0%,var(--field-grass-alt) 50%,#1F2B34 100%)!important;
  border:1px solid rgba(16,29,40,.28)!important;
  box-shadow:inset 0 0 0 2px rgba(243,245,244,.10), inset 0 -30px 40px rgba(16,29,40,.35), 0 8px 0 rgba(16,29,40,.10)!important;
}
.pen-modal .pen-goalframe{
  position:absolute;left:11%;right:11%;top:14px;height:86px;
  pointer-events:none;
}
.pen-modal .pen-goal .pen-crossbar{
  position:absolute;left:-3px;right:-3px;top:0;height:5px;border-radius:3px;
  background:linear-gradient(180deg,#FFFFFF,#F3F5F4);
  box-shadow:0 1px 3px rgba(16,29,40,.4);
}
.pen-modal .pen-goal .pen-post{
  position:absolute;top:0;bottom:0;width:5px;border-radius:3px;
  background:linear-gradient(90deg,#FFFFFF,#E4E8E7);
  box-shadow:0 1px 3px rgba(16,29,40,.4);
}
.pen-modal .pen-goal .pen-post-l{left:-3px}
.pen-modal .pen-goal .pen-post-r{right:-3px}
.pen-modal .pen-goal .pen-net{
  position:absolute!important;inset:2px 3px 0 3px!important;
  left:auto;right:auto;top:auto;height:auto!important;border:0!important;
  background:
    repeating-linear-gradient(90deg,rgba(243,245,244,.34) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(0deg,rgba(243,245,244,.30) 0 1px,transparent 1px 11px)!important;
  background-size:auto!important;
  -webkit-mask-image:linear-gradient(180deg,#0A1118 55%,rgba(10,17,24,.25));
  mask-image:linear-gradient(180deg,#0A1118 55%,rgba(10,17,24,.25));
}
.pen-modal .pen-goal .pen-spot{
  position:absolute;left:50%;bottom:20px;width:7px;height:4px;border-radius:50%;
  transform:translateX(-50%);
  background:rgba(243,245,244,.7);box-shadow:0 0 5px rgba(243,245,244,.35);
}

.pen-modal .pen-zones{
  position:absolute!important;left:11%;right:11%;top:14px;height:86px!important;
  display:grid;grid-template-columns:1fr 1fr 1fr;pointer-events:none;opacity:1!important;
}
.pen-modal .pen-zones i{
  border-left:1px dashed rgba(243,245,244,.16);
  transition:background .18s ease, box-shadow .18s ease;
}
.pen-modal .pen-zones i:first-child{border-left:0}
.pen-modal .pen-goal.hover-L .z-L,
.pen-modal .pen-goal.hover-C .z-C,
.pen-modal .pen-goal.hover-R .z-R{
  background:color-mix(in srgb,var(--color-primary) 22%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 55%,transparent);
}
.pen-modal .pen-goal.ball-L .z-L,
.pen-modal .pen-goal.ball-C .z-C,
.pen-modal .pen-goal.ball-R .z-R{background:color-mix(in srgb,var(--status-success) 28%,transparent)}
.pen-modal .pen-goal.gk-L .z-L,
.pen-modal .pen-goal.gk-C .z-C,
.pen-modal .pen-goal.gk-R .z-R{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-slate) 75%,transparent)}
.pen-modal .pen-goal.goal .pen-net{animation:penNetBulge .5s ease}
@keyframes penNetBulge{0%{transform:scaleY(1)}40%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}

.pen-modal .pen-goal .pen-keeper{
  position:absolute;left:50%;top:60px;width:40px;height:46px;
  transform:translateX(-50%);
  transition:left .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:2;
}
.pen-modal .pen-goal .pen-keeper::before{
  content:"";position:absolute;inset:0;background:#FFFFFF;
  clip-path:polygon(44% 4%,56% 4%,60% 18%,72% 36%,68% 44%,56% 28%,56% 58%,70% 94%,60% 98%,50% 70%,40% 98%,30% 94%,44% 58%,44% 28%,32% 44%,28% 36%,40% 18%);
  filter:drop-shadow(0 2px 3px rgba(16,29,40,.5));
}
.pen-modal .pen-goal .pen-keeper.is-keeper-L{left:30%!important;transform:translateX(-50%) rotate(-24deg)}
.pen-modal .pen-goal .pen-keeper.is-keeper-C{left:50%!important;transform:translateX(-50%) translateY(-4px)}
.pen-modal .pen-goal .pen-keeper.is-keeper-R{left:70%!important;transform:translateX(-50%) rotate(24deg)}
.pen-modal .pen-goal .pen-keeper.is-ready{animation:penKeeperSway 1.4s ease-in-out infinite}
@keyframes penKeeperSway{0%,100%{transform:translateX(-50%) translateX(-3px)}50%{transform:translateX(-50%) translateX(3px)}}
.pen-modal.is-save .pen-goal .pen-keeper{filter:drop-shadow(0 0 6px rgba(243,245,244,.45))}
.pen-modal.is-save .pen-goal .pen-keeper::before{background:#FFFFFF}
.pen-modal.is-shoot .pen-goal .pen-keeper{opacity:.75}

.pen-modal .pen-goal .pen-ball{
  position:absolute;left:50%;bottom:16px;width:15px;height:15px;border-radius:50%;
  transform:translateX(-50%);z-index:3;
  background:radial-gradient(circle at 35% 30%,#FFFFFF 0 45%,#F3F5F4 46% 100%);
  box-shadow:0 2px 8px rgba(16,29,40,.5);
  transition:left .3s cubic-bezier(.3,.7,.3,1),bottom .3s cubic-bezier(.3,.7,.3,1),transform .3s;
}
.pen-modal .pen-goal .pen-ball::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(16,29,40,.85) 0 2px,transparent 3px);
}
.pen-modal.is-shoot .pen-goal .pen-ball{
  box-shadow:0 2px 10px rgba(16,29,40,.55),0 0 0 4px color-mix(in srgb,var(--color-primary) 45%,transparent);
}
.pen-modal.is-save .pen-goal .pen-ball{opacity:.6}
.pen-modal .pen-goal .pen-ball.is-shot-L{left:27%!important;bottom:80px!important}
.pen-modal .pen-goal .pen-ball.is-shot-C{left:50%!important;bottom:90px!important}
.pen-modal .pen-goal .pen-ball.is-shot-R{left:73%!important;bottom:80px!important}

.pen-modal .pen-outcome{
  margin:10px 0 4px;padding:9px 12px;border-radius:9px;text-align:center;
  border:1px solid var(--border-subtle);background:var(--surface-muted);
  animation:penOutcomeIn .28s ease both;
}
.pen-modal .pen-outcome b{display:block;font-family:var(--disp);font-size:18px;line-height:1.05}
.pen-modal .pen-outcome span{display:block;margin-top:2px;font-size:11px;color:var(--color-slate)}
.pen-modal .pen-outcome.pen-outcome-idle{background:transparent;border-color:transparent;padding:6px}
.pen-modal .pen-outcome.pen-outcome-idle span{font-size:12px;font-weight:700;color:var(--color-ink)!important}
.pen-modal .pen-outcome.goal{background:var(--status-success);border-color:var(--status-success)}
.pen-modal .pen-outcome.goal b{color:var(--status-on-success)}
.pen-modal .pen-outcome.goal span{color:color-mix(in srgb,var(--status-on-success) 82%,transparent)}
.pen-modal .pen-outcome.save{background:color-mix(in srgb,var(--color-slate) 16%,var(--surface-elevated));border-color:color-mix(in srgb,var(--color-slate) 45%,transparent)}
.pen-modal .pen-outcome.save b{color:var(--color-slate)}
.pen-modal .pen-outcome.post{background:#F3F5F4;border-color:#BCC2C2}
.pen-modal .pen-outcome.post b{color:#420102}
.pen-modal .pen-outcome.miss{background:color-mix(in srgb,#420102 12%,var(--surface-elevated));border-color:color-mix(in srgb,#420102 40%,transparent)}
.pen-modal .pen-outcome.miss b{color:#420102}
.pen-modal .pen-outcome.is-positive{background:var(--status-success);border-color:var(--status-success)}
.pen-modal .pen-outcome.is-positive b,
.pen-modal .pen-outcome.is-positive span{color:var(--status-on-success)}
.pen-modal .pen-outcome.is-negative{background:var(--status-risk);border-color:var(--status-risk)}
.pen-modal .pen-outcome.is-negative b,
.pen-modal .pen-outcome.is-negative span{color:var(--status-on-error)}
@keyframes penOutcomeIn{0%{opacity:0;transform:translateY(6px) scale(.98)}100%{opacity:1;transform:none}}

.pen-modal .pen-slots .pen-dot{width:24px;height:24px;font-size:12px}
.pen-modal .pen-slots>div.is-active{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--color-primary) 40%,transparent);
}
.pen-modal .pen-dot.is-next{
  border-color:var(--color-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 40%,transparent);
  animation:penNextPulse 1.3s ease-in-out infinite;
}
@keyframes penNextPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 40%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--color-primary) 18%,transparent)}}

@media(max-width:480px){
  .pen-modal .pen-goal{height:150px!important}
  .pen-modal .pen-goalframe,.pen-modal .pen-zones{height:72px!important}
  .pen-modal .pen-goal .pen-keeper{top:50px;width:34px;height:40px}
  .pen-modal .pen-goal .pen-ball.is-shot-L,.pen-modal .pen-goal .pen-ball.is-shot-R{bottom:66px!important}
  .pen-modal .pen-goal .pen-ball.is-shot-C{bottom:76px!important}
  .pen-modal .pen-outcome b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .pen-modal .pen-goal .pen-keeper,.pen-modal .pen-goal .pen-ball,.pen-modal .pen-zones i{transition:none!important}
  .pen-modal .pen-goal.goal .pen-net,.pen-modal .pen-goal .pen-keeper.is-ready,.pen-modal .pen-dot.is-next,.pen-modal .pen-outcome{animation:none!important}
}

/* ============================================================
   PENALTY SHOOTOUT — animation & drama pass (appended last)
   ============================================================ */
/* 1. ball kick: arc from the spot up to the corner, with spin */
.pen-goal.show-ball .pen-ball{
  animation:penBallKick .42s cubic-bezier(.25,.7,.3,1) both;
}
@keyframes penBallKick{
  0%{transform:translateX(-50%) translateY(52px) scale(.62) rotate(0deg)}
  55%{transform:translateX(-50%) translateY(-11px) scale(1.06) rotate(230deg)}
  100%{transform:translateX(-50%) translateY(0) scale(1) rotate(360deg)}
}
/* 2. keeper dive: quick lunge + settle toward the guessed side */
.pen-goal.show-ball .pen-keeper.is-keeper-L{animation:penDiveL .34s cubic-bezier(.3,.8,.35,1) both}
.pen-goal.show-ball .pen-keeper.is-keeper-R{animation:penDiveR .34s cubic-bezier(.3,.8,.35,1) both}
.pen-goal.show-ball .pen-keeper.is-keeper-C{animation:penDiveC .3s ease-out both}
@keyframes penDiveL{0%{transform:translateX(-50%) rotate(0)}60%{transform:translateX(-50%) rotate(-30deg) scale(1.08)}100%{transform:translateX(-50%) rotate(-24deg)}}
@keyframes penDiveR{0%{transform:translateX(-50%) rotate(0)}60%{transform:translateX(-50%) rotate(30deg) scale(1.08)}100%{transform:translateX(-50%) rotate(24deg)}}
@keyframes penDiveC{0%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-9px) scale(1.06)}100%{transform:translateX(-50%) translateY(-4px)}}
/* 3. goal: local net reaction in the zone the ball entered */
.pen-modal .pen-goal.goal.ball-L .z-L,
.pen-modal .pen-goal.goal.ball-C .z-C,
.pen-modal .pen-goal.goal.ball-R .z-R{animation:penGoalZone .6s ease both}
@keyframes penGoalZone{
  0%{background:color-mix(in srgb,var(--color-primary) 55%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--color-primary) 60%,transparent)}
  100%{background:color-mix(in srgb,#F24A28 26%,transparent);box-shadow:none}
}
/* 8. sudden death scene: darker goal + amber frame pulse */
.pen-modal.is-sudden .pen-goal{
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg,#1F2B34 0%,#101D28 46%,#17242D 100%)!important;
  animation:penSuddenFrame 1.8s ease-in-out infinite;
}
@keyframes penSuddenFrame{0%,100%{box-shadow:inset 0 0 0 2px rgba(242,74,40,.28),inset 0 -30px 40px rgba(16,29,40,.4),0 8px 0 rgba(16,29,40,.1)}50%{box-shadow:inset 0 0 0 2px rgba(242,74,40,.6),inset 0 -30px 40px rgba(16,29,40,.4),0 8px 0 rgba(16,29,40,.1)}}
/* 9. crowd reaction: brief light sweep across the top of the modal */
.pen-crowd{
  position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;z-index:5;border-radius:12px 12px 0 0;overflow:hidden;
}
.pen-crowd::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-primary) 30%,transparent),transparent);
  transform:translateX(-100%);animation:penCrowdSweep .7s ease-out both;
}
.pen-crowd.save::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-slate) 34%,transparent),transparent)}
.pen-crowd.miss::before,.pen-crowd.post::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,#420102 26%,transparent),transparent)}
@keyframes penCrowdSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* 7. decision-moment tension banner (above the buttons) */
.pen-tension{
  margin:2px 0 8px;padding:7px 12px;border-radius:8px;text-align:center;
  background:color-mix(in srgb,#F24A28 14%,var(--surface-elevated));
  border:1px solid color-mix(in srgb,#F24A28 45%,transparent);
  color:#420102;font-family:var(--mono);font-size:10.5px;font-weight:900;letter-spacing:.4px;
  animation:penTensionPulse 1.4s ease-in-out infinite;
}
@keyframes penTensionPulse{0%,100%{border-color:color-mix(in srgb,#F24A28 45%,transparent)}50%{border-color:color-mix(in srgb,#F24A28 80%,transparent)}}
/* 4/5. tendency / accuracy hint under a duel player */
.pen-modal .pen-actors .pen-duel .pen-hint{
  display:block;margin-top:2px;
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.3px;
  color:var(--color-slate);opacity:.85;
}
.pen-modal .pen-actors .pen-duel.is-you .pen-hint{color:color-mix(in srgb,var(--color-primary) 70%,var(--color-slate))}
/* 6. streak badge near the active slot row */
.pen-streak{
  display:inline-block;margin-left:6px;vertical-align:middle;
  padding:1px 7px;border-radius:999px;
  font-family:var(--mono);font-size:8px;font-weight:900;letter-spacing:.6px;
  background:var(--color-primary);color:#FFFFFF;
  animation:penStreakPop .3s ease both;
}
.pen-streak.cold{background:var(--color-slate)}
@keyframes penStreakPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .pen-goal.show-ball .pen-ball,
  .pen-goal.show-ball .pen-keeper.is-keeper-L,
  .pen-goal.show-ball .pen-keeper.is-keeper-R,
  .pen-goal.show-ball .pen-keeper.is-keeper-C{animation:none!important}
  .pen-modal.is-sudden .pen-goal,.pen-tension,.pen-crowd::before,.pen-streak{animation:none!important}
  .pen-modal .pen-goal.goal.ball-L .z-L,.pen-modal .pen-goal.goal.ball-C .z-C,.pen-modal .pen-goal.goal.ball-R .z-R{animation:none!important}
}

/* Final heatmap belongs to the final report, not a detached result tile. */
.finalreport .final-heatmap{border-top:1px solid var(--border-subtle);padding:10px;background:color-mix(in srgb,var(--surface-muted) 42%,var(--surface-elevated))}
.finalreport .final-heatmap-title{color:var(--color-slate);font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:1.4px;text-align:center}
.finalreport .final-heatmap img{display:block;width:min(100%,330px);margin:8px auto 0;border:1px solid var(--border-subtle);border-radius:6px}
.finalreport .final-heatmap p{margin:7px 0 0;color:var(--color-slate);font-size:10px;line-height:1.4;text-align:center}
.finalreport .final-audit-details{border-top:1px solid var(--border-subtle);background:color-mix(in srgb,var(--surface-muted) 50%,var(--surface-elevated))}
.finalreport .final-audit-details>summary{padding:9px;color:var(--color-slate);font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:1.2px;text-align:center;cursor:pointer;list-style-position:inside}
.finalreport .final-audit-details[open]>summary{border-bottom:1px solid var(--border-subtle)}
.finalreport .final-audit-body h4{background:transparent;color:var(--color-slate);border:0;padding:8px 9px 4px}
.finalreport .final-audit-body .frrow{font-size:9px;padding:5px 9px}

/* Penalty goalkeeper: the pitch token language brought to life. */
.pen-modal .pen-goal .pen-keeper{
  --keeper-shift:clamp(72px,20vw,104px);
  left:50%!important;
  top:61px!important;
  width:46px!important;
  height:46px!important;
  overflow:visible;
  transform:translateX(-50%);
  transform-origin:center;
  filter:drop-shadow(0 4px 5px rgba(16,29,40,.34));
  transition:transform .28s cubic-bezier(.2,.82,.25,1),filter .2s ease;
  will-change:transform,filter;
}
.pen-modal .pen-goal .pen-keeper::before{display:none}
.pen-modal .pen-goal .pen-keeper::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1.5px solid rgba(243,245,244,.78);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.pen-modal .pen-goal .pen-keeper-svg{display:block;width:100%;height:100%;overflow:visible}
.pen-keeper-svg .pen-gk-token-shadow{fill:rgba(16,29,40,.24)}
.pen-keeper-svg .pen-gk-token-body{fill:#101D28;stroke:#F3F5F4;stroke-width:2.2}
.pen-keeper-svg .pen-gk-token-ring{fill:rgba(243,245,244,.045);stroke:rgba(243,245,244,.22);stroke-width:1}
.pen-keeper-svg .pen-gk-token-gloves{fill:none;stroke:#F3F5F4;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.pen-keeper-svg .pen-gk-token-glove{fill:rgba(243,245,244,.08)}
.pen-keeper-svg .pen-gk-token-detail{stroke:rgba(243,245,244,.72);stroke-width:1.3}
.pen-keeper-svg .pen-gk-token-cuff{stroke:#F24A28;stroke-width:2.8}
.pen-modal .pen-goal .pen-keeper.is-keeper-L{
  left:50%!important;
  transform:translateX(calc(-50% - var(--keeper-shift))) rotate(-4deg);
}
.pen-modal .pen-goal .pen-keeper.is-keeper-C{
  left:50%!important;
  transform:translateX(-50%) translateY(-3px);
}
.pen-modal .pen-goal .pen-keeper.is-keeper-R{
  left:50%!important;
  transform:translateX(calc(-50% + var(--keeper-shift))) rotate(4deg);
}
.pen-modal .pen-goal .pen-keeper.is-ready{animation:penKeeperTokenIdle 1.65s ease-in-out infinite}
@keyframes penKeeperTokenIdle{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-2px) scale(1.015)}
}
.pen-goal.show-ball .pen-keeper.is-keeper-L{animation:penKeeperTokenDiveL .36s cubic-bezier(.2,.82,.24,1) both}
.pen-goal.show-ball .pen-keeper.is-keeper-C{animation:penKeeperTokenDiveC .32s cubic-bezier(.2,.82,.24,1) both}
.pen-goal.show-ball .pen-keeper.is-keeper-R{animation:penKeeperTokenDiveR .36s cubic-bezier(.2,.82,.24,1) both}
@keyframes penKeeperTokenDiveL{
  0%{transform:translateX(-50%) scale(1);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
  58%{transform:translateX(calc(-50% - var(--keeper-shift) - 3px)) rotate(-4deg) scaleX(1.055) scaleY(.96);filter:drop-shadow(5px 4px 6px rgba(16,29,40,.28)) blur(.28px)}
  100%{transform:translateX(calc(-50% - var(--keeper-shift))) rotate(-4deg);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
}
@keyframes penKeeperTokenDiveC{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  58%{transform:translateX(-50%) translateY(-7px) scaleX(1.045) scaleY(.965);filter:blur(.22px) drop-shadow(0 5px 6px rgba(16,29,40,.3))}
  100%{transform:translateX(-50%) translateY(-3px);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
}
@keyframes penKeeperTokenDiveR{
  0%{transform:translateX(-50%) scale(1);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
  58%{transform:translateX(calc(-50% + var(--keeper-shift) + 3px)) rotate(4deg) scaleX(1.055) scaleY(.96);filter:drop-shadow(-5px 4px 6px rgba(16,29,40,.28)) blur(.28px)}
  100%{transform:translateX(calc(-50% + var(--keeper-shift))) rotate(4deg);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
}
.pen-goal.show-ball.save .pen-keeper.is-keeper-L{animation-name:penKeeperTokenSaveL;animation-duration:.48s}
.pen-goal.show-ball.save .pen-keeper.is-keeper-C{animation-name:penKeeperTokenSaveC;animation-duration:.44s}
.pen-goal.show-ball.save .pen-keeper.is-keeper-R{animation-name:penKeeperTokenSaveR;animation-duration:.48s}
@keyframes penKeeperTokenSaveL{
  0%{transform:translateX(-50%) scale(1)}
  58%{transform:translateX(calc(-50% - var(--keeper-shift) - 3px)) rotate(-4deg) scaleX(1.06) scaleY(.96);filter:blur(.25px) drop-shadow(4px 4px 6px rgba(16,29,40,.28))}
  76%{transform:translateX(calc(-50% - var(--keeper-shift))) rotate(-4deg) scale(1.12);filter:drop-shadow(0 0 8px rgba(243,245,244,.62))}
  100%{transform:translateX(calc(-50% - var(--keeper-shift))) rotate(-4deg) scale(1.02);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
}
@keyframes penKeeperTokenSaveC{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  56%{transform:translateX(-50%) translateY(-7px) scaleX(1.05) scaleY(.96);filter:blur(.22px)}
  76%{transform:translateX(-50%) translateY(-3px) scale(1.12);filter:drop-shadow(0 0 8px rgba(243,245,244,.62))}
  100%{transform:translateX(-50%) translateY(-3px) scale(1.02);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
}
@keyframes penKeeperTokenSaveR{
  0%{transform:translateX(-50%) scale(1)}
  58%{transform:translateX(calc(-50% + var(--keeper-shift) + 3px)) rotate(4deg) scaleX(1.06) scaleY(.96);filter:blur(.25px) drop-shadow(-4px 4px 6px rgba(16,29,40,.28))}
  76%{transform:translateX(calc(-50% + var(--keeper-shift))) rotate(4deg) scale(1.12);filter:drop-shadow(0 0 8px rgba(243,245,244,.62))}
  100%{transform:translateX(calc(-50% + var(--keeper-shift))) rotate(4deg) scale(1.02);filter:drop-shadow(0 4px 5px rgba(16,29,40,.34))}
}
.pen-goal.show-ball.save .pen-keeper::after{animation:penKeeperTokenRipple .44s .16s ease-out both}
.pen-goal.show-ball.save .pen-gk-token-gloves{animation:penKeeperGloveFlash .42s .12s ease-out both}
@keyframes penKeeperTokenRipple{
  0%{opacity:.62;transform:scale(.76)}
  100%{opacity:0;transform:scale(1.55)}
}
@keyframes penKeeperGloveFlash{
  0%,100%{opacity:1;transform:scale(1);filter:none}
  42%{opacity:1;transform:scale(1.09);filter:drop-shadow(0 0 3px #FFFFFF)}
}
@media(max-width:480px){
  .pen-modal .pen-goal .pen-keeper{--keeper-shift:clamp(62px,19vw,76px);top:53px!important;width:39px!important;height:39px!important}
}
@media(prefers-reduced-motion:reduce){
  .pen-modal .pen-goal .pen-keeper.is-ready,
  .pen-goal.show-ball .pen-keeper.is-keeper-L,
  .pen-goal.show-ball .pen-keeper.is-keeper-C,
  .pen-goal.show-ball .pen-keeper.is-keeper-R,
  .pen-goal.show-ball.save .pen-keeper::after,
  .pen-goal.show-ball.save .pen-gk-token-gloves{animation:none!important}
}
@media(max-width:480px){.finalreport .final-heatmap{padding:8px}.finalreport .final-heatmap img{width:100%}}

/* Compact penalty layout: one score, one duel row and one shot ledger. */
.pen-modal{width:min(460px,calc(100vw - 20px))!important;padding:0 12px 12px!important}
.pen-modal .pen-head{padding:11px 12px 9px!important}
.pen-modal .pen-score b{font-size:31px!important}
.pen-modal .pen-phase{margin-top:4px!important}
.pen-modal .pen-phase b{font-size:13px!important;letter-spacing:1.4px!important}
.pen-modal .pen-actors{margin:7px 0!important;gap:6px!important}
.pen-modal .pen-actors .pen-duel{min-height:42px!important;padding:7px 9px!important}
.pen-modal .pen-hint,.pen-modal .pen-tension{display:none!important}
.pen-modal .pen-goal{height:150px!important}
.pen-modal .pen-goalframe,.pen-modal .pen-zones{top:11px!important;height:72px!important}
.pen-modal .pen-goal .pen-keeper{top:50px!important;--keeper-shift:clamp(64px,19vw,82px)}
.pen-modal .pen-goal .pen-ball.is-shot-L,.pen-modal .pen-goal .pen-ball.is-shot-R{bottom:66px!important}
.pen-modal .pen-goal .pen-ball.is-shot-C{bottom:76px!important}
.pen-modal .pen-outcome{margin:7px 0 3px;padding:7px 9px}
.pen-modal .pen-outcome b{font-size:16px}
.pen-modal .pen-outcome span{font-size:10px}
.pen-modal .pen-slots{margin:7px 0!important;gap:5px!important}
.pen-modal .pen-slots>div{padding:5px 7px!important}
.pen-modal .pen-slots>div>span:first-child{display:none!important}
.pen-modal .pen-slots .pen-dot{width:21px;height:21px;font-size:10px}
.pen-modal .pen-action-dock{margin-top:6px!important}
@media(max-width:480px){
  .pen-modal{width:calc(100vw - 12px)!important;padding-inline:8px!important}
  .pen-modal .pen-goal{height:136px!important}
  .pen-modal .pen-goalframe,.pen-modal .pen-zones{height:64px!important}
  .pen-modal .pen-goal .pen-keeper{top:45px!important;--keeper-shift:clamp(54px,18vw,68px)}
  .pen-modal .pen-outcome span{display:none}
}

/* Settings controls share one compact grid language. */
.sd-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sd-theme-grid .sdbtn{min-width:0;padding:8px 3px;font-size:8px;white-space:nowrap;justify-content:center;gap:0}
.sd-theme-grid .sdbtn svg{flex:0 0 auto}
.sd-audio-row .sdbtn.on,#musicBtn.playing,#musicBtn.on{color:var(--text-on-primary)}

html[data-theme="dark"] .settingsdrop,html[data-theme="dark"] .modal,html[data-theme="dark"] .modalbox{box-shadow:0 16px 44px rgba(10,17,24,.36)}
html[data-theme="dark"] .sdbtn.on{background:var(--color-primary);border-color:var(--color-primary);color:var(--text-on-primary)}
.diagnostic-modal textarea{width:100%;min-height:230px;max-height:48vh;box-sizing:border-box;margin-top:12px;padding:10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-bg);color:var(--text-primary);font:9px/1.45 var(--mono);resize:vertical;white-space:pre;overflow:auto}
.diagnostic-modal .bact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
@media(max-width:520px){.diagnostic-modal .bact{grid-template-columns:1fr}.diagnostic-modal textarea{min-height:200px}}

#hub .hub-bench-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  min-width:0;
  margin:8px 0 10px;
}
#hub .hub-bench-stack #hubBenchSection{order:2!important;margin:0!important}
#hub .hub-bench-stack .bench-head-meta{color:var(--text-primary)}
#hub .hub-bench-stack #hubBenchSection:empty{display:none!important}
#hub .hub-bench-stack .injbar{
  order:1!important;
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center!important;
  gap:7px!important;
  min-height:44px;
  box-sizing:border-box;
  margin:0!important;
  padding:6px 7px!important;
  border:1px solid rgba(66,1,2,.24)!important;
  border-left:3px solid #DA3D2E!important;
  border-radius:8px!important;
  background:var(--surface-elevated)!important;
  box-shadow:none!important;
}
#hub .hub-bench-stack .injbar.hidden{display:none!important}
#hub .hub-bench-stack .injbar .inj-ico{
  margin:0!important;
  color:#DA3D2E!important;
}
#hub .hub-bench-stack .injbar .inj-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.1;
}
#hub .hub-bench-stack .injbar .inj-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
}
#hub .hub-bench-stack .injbar .inj-main b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:800 10px/1.1 var(--disp);
}
#hub .hub-bench-stack .injbar .inj-severity{
  flex:0 0 auto;
  padding:2px 4px;
  border-radius:999px;
  background:rgba(66,1,2,.1);
  color:#DA3D2E;
  font:800 7px/1 var(--mono);
}
#hub .hub-bench-stack .injbar .inj-detail{
  margin:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--color-slate)!important;
  opacity:.82!important;
  font:700 8px/1.1 var(--mono);
}
#hub .hub-bench-stack .injbar .inj-btns{
  display:flex;
  justify-content:flex-end!important;
  gap:4px!important;
  flex-wrap:nowrap!important;
}
#hub .hub-bench-stack .injbar .inj-btns button{
  min-height:30px;
  margin:0!important;
  padding:4px 7px!important;
  border:1px solid var(--border-default)!important;
  border-radius:6px!important;
  background:var(--surface-elevated)!important;
  color:var(--color-ink)!important;
  font:800 8px/1 var(--mono);
  white-space:nowrap;
  box-shadow:none!important;
}
#hub #shopLbl .shop-label-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
#hub #shopLbl .shop-label-title{display:inline-flex;align-items:center;gap:5px;min-width:0}
#hub #shopLbl .shop-reroll-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:58px;min-height:36px;padding:5px 8px;border:1px solid var(--border-subtle);border-radius:7px;background:var(--surface-elevated);color:var(--color-slate);font:800 8px/1 var(--mono);cursor:pointer}
#hub #shopLbl .shop-reroll-btn.is-rewarded{border-color:color-mix(in srgb,var(--color-primary) 60%,var(--border-subtle));color:var(--color-primary)}
#hub #shopLbl .shop-reroll-btn:disabled{cursor:default;opacity:.55}
#hub .hub-bench-stack .injbar .inj-reward-btn{border-color:color-mix(in srgb,var(--color-primary) 60%,var(--border-default))!important;color:var(--color-primary)!important}
#hub .hub-bench-stack .injbar button:focus-visible{outline:2px solid var(--color-primary)!important;outline-offset:2px}
@media(max-width:900px){
  #hub .hub-bench-stack{
    order:5!important;
    max-width:100%!important;
    margin:0!important;
  }
}

/* ===== Editorial landing hero + tactical timeline ===== */
#introLand{
  isolation:isolate;
  overflow:hidden;
}
#introLand::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.045;
  background:
    radial-gradient(circle at 12% 24%,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 37% 68%,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 68% 31%,currentColor 0 2px,transparent 2.5px),
    linear-gradient(31deg,transparent 20%,currentColor 20.4% 20.8%,transparent 21.2% 100%),
    linear-gradient(151deg,transparent 58%,currentColor 58.4% 58.8%,transparent 59.2% 100%);
  background-size:260px 150px;
  color:var(--color-ink);
}
.v7-hero-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(350px,390px);
  gap:clamp(28px,4vw,46px);
  align-items:center;
  min-height:218px;
  padding:22px 0 21px!important;
}
.v7-hero-copy{min-width:0}
.v7-hero-side{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-end;
  min-width:0;
}
.tactical-board{
  position:relative;
  display:grid;
  grid-template-rows:20px minmax(0,1fr) 22px;
  width:100%;
  max-width:390px;
  aspect-ratio:1.94;
  margin-left:auto;
  border:0;
  border-radius:0;
  color:var(--color-primary);
  overflow:visible;
  background:none;
  box-shadow:none;
}
.tactical-board::before,.tactical-board::after{content:none}
.tactical-board-top,.tactical-board-bottom{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  color:color-mix(in srgb,var(--color-slate) 78%,transparent);
  font:700 7.5px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tactical-board-top{
  justify-content:space-between;
  padding:0 10px;
  border:0;
}
.tactical-board-id,.tactical-board-clock{display:flex;align-items:center;gap:6px}
.tactical-board-id i,.tactical-board-clock b{
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}
.tactical-board-id i{
  color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 13%,transparent),0 0 12px color-mix(in srgb,var(--color-primary) 48%,transparent);
}
.tactical-board-clock b{color:var(--status-success);animation:tacticalLiveBlink 2s ease-in-out infinite}
.tactical-board-bottom{
  gap:14px;
  padding:0 10px;
  border:0;
  letter-spacing:.1em;
}
.tactical-board-bottom strong{color:var(--color-ink);font-weight:850;transition:opacity .18s ease}
.tactical-formation{
  display:inline-flex;
  align-items:center;
  padding:0 0 0 8px;
  color:var(--color-primary);
  border-left:2px solid var(--color-primary);
  font-size:8.5px;
  letter-spacing:.12em;
  transition:opacity .16s ease,transform .22s ease;
}
.tactical-signal{display:flex;align-items:flex-end;gap:2px;margin-left:auto;height:10px}
.tactical-signal i{display:block;width:2px;background:color-mix(in srgb,var(--status-success) 82%,var(--color-ink));border-radius:1px}
.tactical-signal i:nth-child(1){height:3px}.tactical-signal i:nth-child(2){height:5px}.tactical-signal i:nth-child(3){height:7px}.tactical-signal i:nth-child(4){height:9px;opacity:.35}
.tactical-stage{position:relative;z-index:2;min-height:0;padding:3px 7px}
.tactical-diagram{display:block;width:100%;height:100%;overflow:visible}
.tactical-field-wash{fill:color-mix(in srgb,var(--color-slate) 2%,transparent);stroke:none}
.tactical-grid{fill:url(#tacticalMicroGrid)}
.tactical-attack-zone{fill:url(#tacticalAttackZone);animation:tacticalZonePulse 4.6s ease-in-out infinite}
.tactical-halfspace{fill:color-mix(in srgb,var(--color-primary) 4%,transparent);stroke:color-mix(in srgb,var(--color-primary) 11%,transparent);stroke-width:.6;stroke-dasharray:2 5}
.tactical-pitch{
  color:var(--color-slate);
  stroke:color-mix(in srgb,var(--color-slate) 40%,transparent);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
}
.tactical-pitch-detail{opacity:.74}
.tactical-penalty-area{opacity:.82}
.tactical-goal-area,.tactical-goals{opacity:.54}
.tactical-opponents{
  stroke:color-mix(in srgb,var(--color-slate) 54%,transparent);
  stroke-width:1.05;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.tactical-block-line{opacity:.34;stroke-width:.75;stroke-dasharray:2 5}
.tactical-routes{
  color:var(--color-primary);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.tactical-route-primary,.tactical-run{stroke:currentColor;stroke-width:1.45;stroke-dasharray:5 6;animation:tacticalRouteFlow 3.6s linear infinite}
.tactical-run{opacity:.72;stroke-width:1.1;stroke-dasharray:3 5;animation-duration:4.4s}
.tactical-route-secondary,.tactical-route-third{stroke:color-mix(in srgb,var(--color-slate) 46%,transparent);stroke-width:.8;stroke-dasharray:2 5;transition:d .42s ease}
.tactical-route-primary,.tactical-run{transition:d .42s ease}
.tactical-unit circle,.tactical-unit-core{
  fill:var(--page-bg);
  stroke:color-mix(in srgb,var(--color-ink) 72%,transparent);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.tactical-unit text,.tactical-selected text{
  fill:var(--color-ink);
  stroke:none;
  text-anchor:middle;
  dominant-baseline:central;
  font:800 6px/1 var(--mono);
  letter-spacing:0;
}
.tactical-unit,.tactical-selected{transform-box:fill-box;transform-origin:center;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.tactical-unit{animation:tacticalNodePulse 3.8s ease-in-out infinite}
.tactical-node-2{animation-delay:-.5s}.tactical-node-3{animation-delay:-1s}.tactical-node-4{animation-delay:-1.5s}.tactical-node-5{animation-delay:-2s}.tactical-node-6{animation-delay:-2.5s}.tactical-node-7{animation-delay:-3s}
.tactical-selected .tactical-unit-core{stroke:var(--color-primary);stroke-width:1.5;fill:color-mix(in srgb,var(--color-primary) 10%,var(--page-bg))}
.tactical-carrier-halo{
  fill:color-mix(in srgb,var(--color-primary) 8%,transparent);
  stroke:color-mix(in srgb,var(--color-primary) 54%,transparent);
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
  animation:tacticalHaloPulse 2.8s ease-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}
.tactical-ball{fill:var(--color-ink);stroke:var(--color-primary);stroke-width:1;vector-effect:non-scaling-stroke;animation:tacticalBallBlink 2.2s ease-in-out infinite}
.tactical-coordinate-labels{fill:color-mix(in srgb,var(--color-slate) 43%,transparent);font:700 4.5px/1 var(--mono);letter-spacing:.08em}
.tactical-players.is-updating{animation:tacticalFormationIn .42s ease-out}
@keyframes tacticalFormationIn{0%{opacity:.35}100%{opacity:1}}
@keyframes tacticalLiveBlink{50%{opacity:.3;box-shadow:0 0 0 3px color-mix(in srgb,var(--status-success) 10%,transparent)}}
@keyframes tacticalZonePulse{50%{opacity:.55}}
@keyframes tacticalRouteFlow{to{stroke-dashoffset:-22}}
@keyframes tacticalNodePulse{50%{opacity:.68}}
@keyframes tacticalHaloPulse{50%{transform:scale(1.13);opacity:.35}}
@keyframes tacticalBallBlink{50%{opacity:.5;transform:scale(.78)}}
body.reduced-motion .tactical-board-clock b,body.reduced-motion .tactical-attack-zone,body.reduced-motion .tactical-route-primary,body.reduced-motion .tactical-run,body.reduced-motion .tactical-unit,body.reduced-motion .tactical-carrier-halo,body.reduced-motion .tactical-ball,body.reduced-motion .tactical-players.is-updating{animation:none}
.v7-hero-head .howto-wrap{
  position:relative!important;
  z-index:4;
  inset:auto!important;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  margin:0!important;
  text-align:right;
}
#howtoToggle{
  min-height:30px;
  height:auto!important;
  white-space:nowrap;
  background:color-mix(in srgb,var(--surface-default) 94%,transparent);
  backdrop-filter:none;
}
.v7-hero-head .howto-body{
  position:absolute;
  left:0;
  top:100%;
}
#introLand .mechanics{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  padding:15px 0 17px;
  border-top:1px solid color-mix(in srgb,var(--color-slate) 20%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--color-slate) 24%,transparent);
}
#introLand .mstep{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:0 6px 0 0;
  border:0;
}
#introLand .mstep::before,#introLand .mstep::after{content:none;display:none}
#introLand .mn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  min-width:26px;
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
  text-align:center;
  text-indent:0;
  border:1px solid color-mix(in srgb,var(--color-primary) 58%,transparent);
  border-radius:50%;
  color:var(--action-text);
  font:850 9px/1 var(--mono);
  letter-spacing:0;
}
#introLand .mt{
  margin:1px 0 0;
  color:var(--color-ink);
  font:800 10px/1.25 var(--mono);
  letter-spacing:.015em;
}
#introLand .mt small{
  display:block;
  margin-top:4px;
  color:var(--color-slate);
  font:500 9px/1.4 var(--mono);
  letter-spacing:0;
}
@media(max-width:900px){
  .v7-hero-head{
    grid-template-columns:minmax(0,1fr) 330px;
    gap:22px;
  }
  .v7-tagline{font-size:clamp(31px,4.6vw,36px)}
  .tactical-board{max-width:340px}
  #howtoToggle{padding-inline:9px;font-size:8.5px}
}
@media(max-width:820px){
  .v7-hero-head{grid-template-columns:minmax(0,1fr) 300px}
  .tactical-board{max-width:300px}
}
@media(max-width:720px){
  .v7-hero-head{
    grid-template-columns:minmax(0,1fr) 270px;
    gap:18px;
    min-height:180px;
  }
  .tactical-board{max-width:270px;grid-template-rows:18px minmax(0,1fr) 21px}
  .tactical-board-top{padding-inline:12px}
  .tactical-board-bottom{gap:9px;padding-inline:12px;font-size:6.7px}
  .tactical-formation{margin-left:0;padding:0 0 0 6px}
  .v7-hero-head .howto-wrap{
    position:relative!important;
    inset:auto!important;
  }
  #howtoToggle{min-height:27px;padding-inline:8px;font-size:8px}
  .v7-hero-side{justify-content:flex-end}
  .v7-hero-head .howto-wrap{margin-left:auto!important}
  #introLand .mechanics{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px;
  }
  #introLand .mstep:not(:last-child)::after,
  #introLand .mstep:not(:last-child)::before{display:none}
}
@media(max-width:620px){
  .v7-hero-head{grid-template-columns:1fr;gap:16px;padding-block:20px!important}
  .v7-tagline{font-size:clamp(25px,7.4vw,29px)}
  .v7-hero-side{width:100%;align-items:stretch;justify-content:flex-end}
  .tactical-board{display:grid;max-width:440px;margin:0;aspect-ratio:2.08}
  .tactical-stage{padding-block:1px}
}
@media(max-width:360px){
  .tactical-board-bottom{gap:7px}
  #howtoToggle{padding-inline:6px;font-size:7.5px}
}

/* Keep the guide beside Settings in the persistent header on every viewport. */
.tools .howto-wrap{
  position:relative!important;
  inset:auto!important;
  display:flex;
  align-items:center;
  margin:0!important;
  padding:0;
  border:0;
  text-align:left;
}
.tools #howtoToggle{
  height:44px!important;
  min-height:44px;
  box-sizing:border-box;
  padding:0 12px;
  font-size:9px;
  font-weight:700;
  opacity:1;
  background:var(--surface-elevated);
  border-color:var(--border-default);
  box-shadow:var(--shadow-sm);
}
.tools #howtoToggle:hover,.tools #howtoToggle:focus-visible{
  border-color:var(--color-primary);
  color:var(--color-primary);
}
@media(max-width:720px){
  .tools{flex:0 0 auto}
  .tools #howtoToggle{
    width:44px;
    min-width:44px;
    padding:0;
    font-size:0;
    letter-spacing:0;
    justify-content:center;
  }
  .tools #howtoToggle svg{width:16px;height:16px;margin:0!important}
}
@media(max-width:360px){
  .tools{gap:4px}
}

/* ===== Wide match-prep bench: compact overlay in the pitch corner ===== */
#hub .pitch-area{position:relative}
@media(min-width:981px) and (orientation:landscape){
  #hub .pitch-area{overflow:visible}
  #hub .pitch-area .hub-bench-stack{
    width:100%;
    margin:0;
    gap:6px;
  }
  #hub .pitch-area #hubBenchSection{
    position:absolute;
    z-index:18;
    top:10px;
    right:10px;
    width:clamp(202px,27%,232px)!important;
    max-width:calc(100% - 20px)!important;
    box-sizing:border-box;
    margin:0!important;
    padding:7px!important;
    border-radius:8px!important;
    background:color-mix(in srgb,var(--surface-deep) 94%,transparent)!important;
    border-color:color-mix(in srgb,var(--text-on-dark) 24%,transparent)!important;
    box-shadow:0 8px 22px rgba(10,17,24,.28)!important;
    color:var(--text-on-dark)!important;
    backdrop-filter:blur(5px);
  }
  #hub .pitch-area #hubBenchSection.bench-panel-draggable{
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    will-change:left,top;
  }
  #hub .pitch-area #hubBenchSection .bench-head{
    min-height:16px;
    margin:0 1px 5px;
    gap:5px;
    color:color-mix(in srgb,var(--text-on-dark) 72%,transparent);
    font-size:7px;
    line-height:1;
    letter-spacing:1.15px;
  }
  #hub .pitch-area #hubBenchSection .bench-head-meta{display:inline-flex;align-items:center;gap:5px}
  #hub .pitch-area #hubBenchSection .bench-panel-grip{display:none;opacity:.68}
  #hub .pitch-area #hubBenchSection.bench-panel-draggable .bench-head{
    position:sticky;
    top:0;
    z-index:2;
    cursor:grab;
    touch-action:none;
    user-select:none;
    background:color-mix(in srgb,var(--surface-deep) 94%,transparent);
  }
  #hub .pitch-area #hubBenchSection.bench-panel-dragging .bench-head{cursor:grabbing}
  #hub .pitch-area #hubBenchSection.bench-panel-draggable .bench-panel-grip{display:block}
  #hub .pitch-area #hubBenchSection .bench-head-label{gap:4px}
  #hub .pitch-area #hubBenchSection .bench-head svg{width:11px;height:9px}
  #hub .pitch-area #hubBenchSection .bench-head b{
    color:color-mix(in srgb,var(--text-on-dark) 58%,transparent);
    font-size:7px;
  }
  #hub .pitch-area #hubBenchSection .bench-list{gap:3px}
  #hub .pitch-area #hubBenchSection .bench-row{
    grid-template-columns:8px 24px minmax(0,1fr) auto auto!important;
    gap:5px!important;
    min-height:25px!important;
    padding:3px 5px!important;
    border-radius:5px!important;
    border-color:color-mix(in srgb,var(--text-on-dark) 15%,transparent)!important;
    background:color-mix(in srgb,var(--text-on-dark) 8%,transparent)!important;
    color:var(--text-on-dark)!important;
  }
  #hub .pitch-area #hubBenchSection .bench-row:hover{
    border-color:color-mix(in srgb,var(--action-primary) 70%,var(--text-on-dark))!important;
    background:color-mix(in srgb,var(--action-primary) 13%,var(--surface-deep))!important;
  }
  #hub .pitch-area #hubBenchSection .bench-drag{color:var(--text-on-dark);opacity:.35}
  #hub .pitch-area #hubBenchSection .bench-drag svg{width:6px;height:10px}
  #hub .pitch-area #hubBenchSection .bench-pos{
    color:color-mix(in srgb,var(--text-on-dark) 58%,transparent);
    font-size:6.5px;
    letter-spacing:.35px;
  }
  #hub .pitch-area #hubBenchSection .bench-name{
    color:var(--text-on-dark);
    font-size:9px;
    font-weight:750;
  }
  #hub .pitch-area #hubBenchSection .bench-power{font-size:9px}
  #hub .pitch-area #hubBenchSection .bench-inj{font-size:5.5px;padding:1px 3px}
  #hub .pitch-area .hub-bench-stack:has(.injbar:not(.hidden)){
    height:auto;
    margin-top:8px;
  }
  #hub .pitch-area .hub-bench-stack:has(.injbar:not(.hidden)) #hubBenchSection{
    position:static;
    align-self:flex-end;
    width:232px!important;
  }
}
@media(max-width:980px), (orientation:portrait){
  #hub .pitch-area #hubBenchSection{
    position:static;
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
  }
  #hub .pitch-area #hubBenchSection .bench-panel-grip{display:none}
}
.settingsdrop.global-settings-open{position:fixed!important;z-index:2147483646!important;left:var(--settings-left)!important;right:auto!important;top:var(--settings-top)!important;max-height:min(620px,calc(100dvh - var(--settings-top) - 10px));overflow:auto;overscroll-behavior:contain}