/* rules-design-1 shared look (values from frontend/src/styles/tokens.css; fonts as handoffs/picks-design-2) */
:root{--bg:#F7F4EC;--surface:#FFFFFF;--surface-2:#EFEBE0;--text:#15171C;--muted:#565247;--line:#DDD8CA;--line-strong:#7A7566;
--primary:#F4C430;--primary-soft:#FBF0C6;--black:#15171C;--on-dark:#F7F4EC;--dark-chip:#2B2F38;
--accent:#245C99;--accent-soft:#E1ECF8;--success:#2A7230;--success-soft:#E4F2E5;--danger:#B93434;--danger-soft:#F8E0E0;--warning:#8A5200;--warning-soft:#F6E9CF;
--mode-solo-weekly:#F4C430;--mode-solo-daily:#E07B1F;--mode-team:#8A4FD0;--mode-advanced:#2B2F38;
--cat-blue:#2B6CB0;--cat-green:#2E7D32;--cat-red:#C73B3B;
--att1:#2B6CB0;--att2:#D9582B;--att3:#2E7D32;--att4:#C2379D;
--font:'Barlow','Segoe UI',system-ui,sans-serif;--font-display:'Barlow Condensed','Arial Narrow',sans-serif}
html{font-size:16px}
/* same title scale as the app (src/styles/shell.css page frame) */
:root{--pg-rem:clamp(15px,calc(8px + .6vw),24px);--pg-title:calc(2.6*var(--pg-rem))}
@media (max-width:899px){:root{--pg-rem:15px;--pg-title:calc(1.9*var(--pg-rem))}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.35}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1}
.ic{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
small.src{display:block;font-size:.7rem;color:var(--warning);background:var(--warning-soft);border-radius:3px;padding:.05rem .3rem;margin-top:.2rem;font-weight:500;font-family:var(--font);letter-spacing:0;text-transform:none;line-height:1.25}
.lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.note{margin:.6rem 0 0;color:var(--muted);font-weight:600;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.mode-dot{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;background:var(--mc);border:2px solid var(--black);flex:none}

/* top bar + mode tabs */
.top{display:flex;align-items:center;gap:1.4rem;padding:0 2vw;height:3.2rem;background:var(--surface);border-bottom:1px solid var(--line)}
.top .logo{font-family:var(--font-display);font-size:1.4rem;font-weight:800}
.top .here{font-weight:700;border-bottom:3px solid var(--primary);padding-bottom:.15rem}
.tabs{display:flex;gap:.4rem;padding:.8rem 2vw 0;flex-wrap:wrap}
.tabs a{display:flex;align-items:center;min-height:40px;gap:.45rem;padding:.5rem .9rem;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:inherit;text-decoration:none;font-weight:700;font-size:.95rem}
.tabs a.on{border-color:var(--black);background:var(--black);color:var(--on-dark)}
.tabs a.on .mode-dot{border-color:var(--on-dark)}

/* hero */
.hero{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;padding:1.2rem 1.4rem;background:var(--surface);border:2px solid var(--line);border-top:.5rem solid var(--mc);border-radius:14px}
.hero-t{flex:1 1 18rem;min-width:0}.hero-t h1{font-size:var(--pg-title);display:inline;vertical-align:middle;margin-left:.4rem}
.hero-t .mode-dot{width:1.4rem;height:1.4rem;vertical-align:middle}
.hero-t p{margin:.5rem 0 0;font-size:1.15rem;color:var(--muted);font-weight:600}
.stats{display:flex;gap:.6rem;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:6.4rem;padding:.5rem .8rem;border-radius:12px;background:var(--surface-2)}
.stat b{font-family:var(--font-display);font-size:2.6rem;font-weight:800;line-height:1}.stat span{font-weight:700;color:var(--muted);font-size:.9rem}

/* calendar */
.cal-g{position:relative;padding:0 0 .5rem}
.axis{position:relative;height:1.8rem;border-bottom:2px solid var(--black)}
.ax-day{position:absolute;top:0;height:100%;text-align:center;font-weight:800;font-family:var(--font-display);font-size:1.15rem;border-left:1px solid var(--line)}
.ax-day.wknd{background:var(--surface-2)}
.ax-tick{position:absolute;top:0;transform:translateX(-50%);font-weight:700;font-size:.85rem;white-space:nowrap}
.ax-tick:first-child{transform:none}.ax-tick:last-child{transform:translateX(-100%)}
.ax-tick em{font-style:normal;color:var(--muted);font-weight:600;margin-left:.3rem;font-size:.75rem}
.now-grid{position:absolute;inset:1.8rem 0 0 0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / var(--days)));z-index:0}
.lane{position:relative;height:4.4rem;margin-top:.7rem;z-index:1}
.bar{position:absolute;top:0;height:100%;border-radius:8px;padding:.35rem .5rem;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;background:var(--black);border:2px solid var(--black);min-width:0;transition:opacity .2s}
.bar b{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar i{font-style:normal;font-size:.8rem;opacity:.9;font-weight:600;white-space:nowrap}
.bar.who-away{background:#245C99;border-color:#245C99}.bar.who-home{background:#8A5200;border-color:#8A5200}
.bar.who-both,.bar.who-att{background:var(--pick);color:var(--black);border-color:var(--black)}
.bar.who-gk{background:var(--success);border-color:var(--success)}
.bar.who-real{background:repeating-linear-gradient(135deg,var(--surface-2) 0 .5rem,var(--surface) .5rem 1rem);color:var(--text);border:2px dashed var(--line-strong)}
.bar.nr b,.bar.nr i{display:none}
.marks{position:relative;height:6.8rem;z-index:1}
.mark{position:absolute;top:0;padding-top:calc(.3rem + var(--row) * 2.2rem);border-left:2px solid var(--black);padding-left:.35rem;font-size:.85rem;white-space:nowrap;line-height:1.1;height:100%;transition:opacity .2s}
.mark span{display:block;font-weight:800}.mark b{font-weight:600;color:var(--muted)}
.mark.rt{border-left:0;border-right:2px solid var(--black);padding-left:0;padding-right:.35rem;transform:translateX(-100%);text-align:right}
.dim{opacity:.28}.hi{opacity:1;outline:3px solid var(--primary);outline-offset:2px}
.mark.hi{outline:0}.mark.hi span,.mark.hi b{color:var(--text)}
.cal-l{display:none;list-style:none;margin:0;padding:0}
.cal-ex{display:flex;gap:.4rem;align-items:center;margin:.3rem 0 0;font-weight:700}
.zone{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 0;color:var(--muted);font-size:.9rem;font-weight:600}

/* flow */
.flow{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:.3rem;flex-wrap:nowrap}
.flow li:not(.fa){flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding:.7rem .4rem;background:var(--surface);border:2px solid var(--line);border-radius:12px;transition:opacity .2s}
.flow .fi{display:flex;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--primary-soft);align-items:center;justify-content:center}.flow .fi .ic{width:1.6rem;height:1.6rem}
.flow .fw{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.flow b{font-size:1.05rem}
.flow .fa{display:flex;align-items:center;color:var(--line-strong)}.flow .fa .ic{width:1.4rem;height:1.4rem}
.flow li.hi{border-color:var(--black);outline:3px solid var(--primary);outline-offset:0}

/* goal */
.goal{display:grid;gap:.5rem}
.g-head,.g-row{display:grid;grid-template-columns:auto 2rem auto 2.4rem 1fr;align-items:center;gap:.5rem}
.g-head span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.sc{display:inline-flex;align-items:center;gap:.15rem;font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1}
.sc b{display:inline-flex;width:2.1rem;height:2.5rem;align-items:center;justify-content:center;border-radius:7px;background:var(--surface-2);border:2px solid var(--line-strong)}
.sc i{font-style:normal;color:var(--muted)}
.sc.pk b{background:var(--primary-soft);border-color:var(--black)}
.sc.rl b{background:var(--black);color:var(--on-dark);border-color:var(--black)}
.sc.bad{position:relative;opacity:.55}.sc.bad::after{content:"";position:absolute;left:-.2rem;right:-.2rem;top:50%;height:3px;background:var(--danger);transform:rotate(-12deg)}
.eq{font-family:var(--font-display);font-size:2rem;font-weight:800;text-align:center}
.g-row.ms .eq{color:var(--danger)}
.ar{display:flex;justify-content:center;color:var(--muted)}
.out{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;font-weight:800;font-size:1.05rem;justify-self:start}
.goal-out{background:var(--success);color:#fff}.save-out{background:var(--accent-soft);color:var(--accent);border:2px solid var(--accent)}.save-out i{font-style:normal;font-weight:600;font-size:.85rem}
.miss-out{background:var(--surface-2);color:var(--muted)}
.g-row.sv .ar{color:var(--accent)}.g-row.sv .ar .ic{width:1.7rem;height:1.7rem}
.g-foot{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.3rem 0 0;font-weight:700;font-size:.9rem}
.g-foot span{display:inline-flex;gap:.3rem;align-items:center;padding:.2rem .6rem;border-radius:999px;background:var(--success-soft);color:var(--success)}
.g-foot .x{background:var(--danger-soft);color:var(--danger);text-decoration:line-through}
.same{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}.same .sc{font-size:1.4rem}.same .sc b{width:1.6rem;height:1.9rem}
.same .no{font-weight:800;color:var(--danger)}

/* result + points */
.board{display:flex;align-items:center;justify-content:center;gap:.8rem;background:var(--black);color:var(--on-dark);border-radius:12px;padding:.7rem 1rem}
.board .side{display:flex;flex-direction:column;align-items:center}.board .side span{font-size:.85rem;font-weight:700;opacity:.8}
.board b{font-family:var(--font-display);font-size:3.4rem;font-weight:800;line-height:1}.board i{font-style:normal;font-size:2.4rem;opacity:.6}
.r-sub{display:flex;gap:.4rem;align-items:center;justify-content:center;margin:.4rem 0 .8rem;color:var(--muted);font-weight:600}
.pts{display:flex;gap:.5rem;flex-wrap:wrap}
.pt{flex:1;display:flex;flex-direction:column;align-items:center;padding:.5rem;border-radius:10px;border:2px solid var(--line)}
.pt b{font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1}.pt span{font-weight:700}
.pt.w{background:var(--success-soft);border-color:var(--success)}.pt.d{background:var(--surface-2)}.pt.l{background:var(--surface)}

/* ladder */
.ladder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1.2rem;align-items:center}
.pyr{display:grid;gap:.35rem}
.tier{display:grid;grid-template-columns:5.6rem 1fr;align-items:center;gap:.5rem}
.tier b{font-size:.85rem;color:var(--muted);font-weight:700}
.bx{display:flex;gap:.2rem;justify-content:center}
.bx span{height:1.6rem;flex:1;max-width:3rem;border-radius:5px;background:var(--surface-2);border:2px solid var(--line-strong)}
.bx span.top1{max-width:8rem;height:2.1rem;background:var(--pick);border-color:var(--black);display:flex;align-items:center;justify-content:center}
.grp{background:var(--surface-2);border-radius:12px;padding:.7rem}
.gh{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}.gh span{display:flex;gap:.3rem;align-items:center;color:var(--muted);font-weight:600;font-size:.9rem}
.grp ol{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.grp li{display:grid;grid-template-columns:1.8rem 1fr auto;align-items:center;gap:.5rem;background:var(--surface);border-radius:8px;padding:.35rem .6rem;font-weight:700}
.grp .pos{font-family:var(--font-display);font-size:1.3rem}.grp .mv{display:flex;align-items:center;gap:.25rem;font-size:.9rem}
.mv-up .mv{color:var(--success)}.mv-up{box-shadow:inset .3rem 0 0 var(--success)}.mv-stay .mv{color:var(--muted)}.mv-down .mv{color:var(--danger)}.mv-down{box-shadow:inset .3rem 0 0 var(--danger)}
.champ{display:flex;gap:.35rem;align-items:center;margin:.5rem 0 0;font-weight:700;font-size:.9rem}

/* daily tables */
.dtab{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.dt-day,.dt-month{flex:1 1 12rem;display:flex;flex-direction:column;gap:.3rem;background:var(--surface-2);border-radius:12px;padding:.8rem}
.dt-day b,.dt-month b{font-family:var(--font-display);font-size:1.5rem}.dt-day span,.dt-month span{color:var(--muted);font-weight:600}
.dt-arrow{color:var(--line-strong)}
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:.2rem;max-width:16rem}.dots i{aspect-ratio:1;border-radius:3px;background:var(--surface);border:1px solid var(--line-strong)}.dots i.on{background:var(--mode-solo-daily);border-color:var(--mode-solo-daily)}

/* colours */
.legend3{display:grid;gap:.4rem}
.cl{display:grid;grid-template-columns:1.4rem 5.6rem 1fr auto;align-items:center;gap:.6rem;padding:.45rem .7rem;border-radius:10px;background:var(--surface-2)}
.cl .sw{width:1.4rem;height:1.4rem;border-radius:4px}.cl b{font-size:1.1rem}.cl .cw{font-weight:600;color:var(--muted)}.cl .cu{font-weight:800}
.cl small.src{grid-column:1/-1}
.c-blue .sw,.sl i.c-blue{background:var(--cat-blue)}.c-green .sw,.sl i.c-green{background:var(--cat-green)}.c-red .sw,.sl i.c-red{background:var(--cat-red)}
.slots{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.8rem}.slots .lbl{min-width:7rem}
.sl{display:flex;gap:.25rem}.sl i{width:1.8rem;height:2.2rem;border-radius:5px}
.rule{font-weight:800;display:inline-flex;align-items:center;gap:.3rem}.rule::before{content:"✓";color:var(--success);font-size:1.2rem}
.slots.bad{margin-top:.35rem}.rule.no{color:var(--danger)}.rule.no::before{content:"✗";color:var(--danger)}

/* pairs */
.pr-one{display:flex;align-items:center;gap:.6rem}
.pl{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-radius:10px;background:var(--surface-2);border-left:.4rem solid var(--cat-blue);font-weight:800}
.pl .sw{display:none}.pr-ar{color:var(--muted)}
.pr-g{display:grid;gap:.3rem;flex:1}
.gm{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem .7rem;border-radius:8px;border:2px solid var(--line);font-weight:700}.gm span{color:var(--muted);font-weight:600;font-size:.9rem}
.gm.mine{border-color:#8A5200}.gm.theirs{border-color:#245C99}
.pr-who{display:flex;gap:.4rem;align-items:center;font-weight:700;margin:.6rem 0}
.spread{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.spread .lbl{margin-right:.2rem}
.sp{display:inline-flex;gap:.15rem;padding:.25rem .3rem;border-radius:6px;background:var(--surface-2)}.sp i{width:.8rem;height:.8rem;border-radius:50%;background:var(--pick);border:2px solid var(--black)}
.spread b{font-family:var(--font-display);font-size:1.5rem}

/* daily sizes */
.sizes{display:grid;gap:.3rem}
.sz-h,.sz-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,.8fr);gap:.6rem;align-items:center}
.sz-h span{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.sz-r{background:var(--surface-2);border-radius:8px;padding:.35rem .5rem}
.sz-r .lg,.sz-r .sv{display:flex;align-items:center;gap:.15rem}.sz-r .lg i{width:.8rem;height:1.2rem;border-radius:3px;background:var(--cat-blue)}
.sz-r .sv i{width:.9rem;height:.9rem;border-radius:50%;background:var(--accent)}
.sz-r b{margin-left:.35rem;font-family:var(--font-display);font-size:1.3rem}
.sz-r .pk{display:flex;align-items:center;gap:.3rem}.sz-r .pk .bar{position:static;height:.9rem;border-radius:4px;background:var(--pick);border:0;padding:0;min-width:0}
.sz-r.none{background:var(--danger-soft);color:var(--danger)}.sz-r.none b{font-family:var(--font);font-size:1rem}

/* team */
.shirts{display:flex;gap:.5rem;flex-wrap:wrap}
.shirt{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.4rem .6rem;border-radius:10px;background:var(--surface-2);min-width:4.4rem}
.shirt .ic{width:2.6rem;height:2.6rem}.shirt b{font-family:var(--font-display);font-size:1.2rem}
.shirt.a1 .ic{color:var(--att1)}.shirt.a2 .ic{color:var(--att2)}.shirt.a3 .ic{color:var(--att3)}.shirt.a4 .ic{color:var(--att4)}.shirt.gk .ic{color:var(--black);fill:var(--pick)}
.cap{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--black);color:var(--primary);font-weight:800;font-size:.75rem}
.shirt .cap{position:absolute;top:.2rem;right:.2rem}
.roles{display:flex;flex-direction:column;gap:.35rem;margin-top:.7rem;font-weight:600}.roles>span{display:flex;align-items:center;gap:.4rem}

/* strike */
.strike{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.st-step{display:flex;flex-direction:column;align-items:center;padding:.4rem .7rem;border-radius:10px;background:var(--surface-2);text-align:center;font-weight:600;font-size:.85rem;max-width:8rem}
.st-n{font-family:var(--font-display);font-size:2.2rem;font-weight:800;line-height:1}.st-ar{color:var(--muted)}
.st-cards{flex-basis:100%;display:grid;grid-template-columns:repeat(16,1fr);gap:.2rem;margin-top:.5rem}
.st-cards i{aspect-ratio:3/4;border-radius:4px;background:var(--surface-2);border:2px solid var(--line-strong);position:relative}
.st-cards i.in{background:var(--mc,var(--primary));border-color:var(--black)}
.st-cards i.x{background:var(--danger-soft);border-color:var(--danger)}.st-cards i.x::after{content:"";position:absolute;inset:40% -10%;height:3px;background:var(--danger);transform:rotate(-50deg)}
.st-cards i.out{opacity:.5}

/* allocation */
.al-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:.25rem}
.al-col{display:grid;gap:.2rem;justify-items:stretch}
.al-g{font-size:.75rem;font-weight:800;color:var(--muted);text-align:center}
.al-col i,.al-key i{display:flex;align-items:center;justify-content:center;height:1.8rem;border-radius:5px;font-style:normal;font-weight:800;color:#fff;font-size:.85rem}
.al-col i.none{background:transparent}
.a1{background:var(--att1)}.a2{background:var(--att2)}.a3{background:var(--att3)}.a4{background:var(--att4)}
.al-key{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.6rem;font-weight:700}.al-key span{display:flex;gap:.3rem;align-items:center}.al-key i{width:1.5rem;height:1.5rem}

/* saves */
.sv-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.25rem;margin-top:.4rem}
.sv-grid i{aspect-ratio:1;border-radius:6px;background:var(--surface-2);border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center}
.sv-grid i.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* miss */
.miss{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.miss li{display:grid;grid-template-columns:1.6rem minmax(0,1fr) 1.4rem minmax(0,1fr);gap:.5rem;align-items:center;padding:.5rem .7rem;border-radius:10px;background:var(--surface-2);font-weight:600}
.miss li .ic{width:1.5rem;height:1.5rem}.miss .ma{color:var(--muted)}.miss b{font-weight:800}
.miss small.src{grid-column:1/-1}

/* phone */
@media (max-width:899px){
  html{font-size:15px}
  .top{padding:0 12px;gap:.8rem}.tabs{padding:.6rem 12px 0;gap:.3rem}.tabs a{padding:.35rem .6rem;font-size:.82rem}
  .hero{padding:.9rem;gap:.8rem}.stats{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}.stat{min-width:0;padding:.4rem .2rem}.stat b{font-size:1.8rem}.stat span{font-size:.75rem;text-align:center}
  .cal-g{display:none}.cal-l{display:grid;gap:.25rem}
  .cal-l li{display:grid;grid-template-columns:3.6rem 6.2rem minmax(0,1fr) auto;gap:.4rem;align-items:center;padding:.4rem .5rem;border-radius:8px;background:var(--surface-2);border-left:.35rem solid var(--line-strong)}
  .cal-l .ld.rep{opacity:.45}.cal-l .ld{font-family:var(--font-display);font-weight:800;font-size:1.1rem}.cal-l .lt{font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums}
  .cal-l i{font-style:normal;font-size:.75rem;font-weight:700;padding:.1rem .4rem;border-radius:999px;background:var(--surface)}
  .cal-l li.who-away{border-left-color:#245C99}.cal-l li.who-home{border-left-color:#8A5200}.cal-l li.who-both,.cal-l li.who-att{border-left-color:var(--pick);background:var(--primary-soft)}
  .cal-l li.who-gk{border-left-color:var(--success)}.cal-l li.who-real{border-left-style:dashed}.cal-l li.who-mark{background:var(--surface);border-left-color:var(--black)}
  .cal-l li.hi{outline:3px solid var(--primary)}
  .flow{flex-direction:column;gap:.15rem}
  .flow li:not(.fa){flex-direction:row;text-align:left;padding:.4rem .6rem;gap:.6rem}.flow .fi{width:2.2rem;height:2.2rem}.flow .fw{min-width:6.5rem}
  .flow .fa{justify-content:center;height:.9rem}.flow .fa .ic{transform:rotate(90deg);width:1rem}
  .g-head,.g-row{grid-template-columns:auto 1.4rem auto 1.6rem 1fr;gap:.3rem}.sc{font-size:1.4rem}.sc b{width:1.55rem;height:1.95rem}.out{font-size:.85rem;padding:.25rem .5rem}.out .ic{display:none}
  .ladder{grid-template-columns:1fr}
  .cl{grid-template-columns:1.2rem 4.8rem 1fr auto;gap:.4rem;font-size:.9rem}.slots .lbl{min-width:0;flex-basis:100%}.sl i{width:1.5rem;height:1.9rem}
  .st-cards{grid-template-columns:repeat(8,1fr)}
  .miss li{grid-template-columns:1.4rem minmax(0,1fr);}.miss .ma{display:none}.miss b{grid-column:2}
}

.top .logo img{display:block;height:2.4rem;width:2.4rem}
.top a{color:inherit;text-decoration:none;font-weight:600}

/* Match the app's shared colour themes on these static pages. */
:root[data-theme-look="editorial"]{--bg:#F6F4EF;--surface:#fff;--surface-2:#ECE8DF;--text:#121212;--muted:#4A463F;--line:#D2CBBB;--line-strong:#6B655A;--primary:#B11D1D;--primary-soft:#F8E7E5;--black:#121212;--on-dark:#F6F4EF;--accent:#334E68;--accent-soft:#E8EDF1;--success:#1C6B2C;--success-soft:#E5F2E7;--danger:#B11D1D;--danger-soft:#F8E7E5;--warning:#805100;--warning-soft:#F5EBD6;--mode-solo-weekly:#B11D1D;--mode-solo-daily:#805100;--mode-team:#334E68;--mode-advanced:#302D2A;--font:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;--font-display:'IBM Plex Sans','Segoe UI',system-ui,sans-serif}
:root[data-theme-look="orange"]{--bg:#FFF7EC;--surface:#fff;--surface-2:#FFE7CC;--text:#1B0F05;--muted:#5A4636;--line:#E5CFB6;--line-strong:#7A5A40;--primary:#FF6A00;--primary-soft:#FFE7CC;--black:#1B0F05;--on-dark:#FFF7EC;--accent:#B34700;--accent-soft:#FFE7CC;--success:#1B6B2E;--success-soft:#E3F2E6;--danger:#B3261E;--danger-soft:#FBE3E0;--warning:#805000;--warning-soft:#FBEBCB;--mode-solo-weekly:#B34700;--mode-solo-daily:#FF6A00;--mode-team:#1B0F05;--mode-advanced:#3A2616;--font:'Red Hat Text','Segoe UI',system-ui,sans-serif;--font-display:'Red Hat Display','Segoe UI',system-ui,sans-serif}
:root[data-theme-look="surf"]{--bg:#F5EEE3;--surface:#FFFDF8;--surface-2:#E3F1EE;--text:#0B2F33;--muted:#425F62;--line:#D8D1C4;--line-strong:#597578;--primary:#FF7A3D;--primary-soft:#FDE8DC;--black:#072529;--on-dark:#F5EEE3;--accent:#0F6F72;--accent-soft:#DDF0EE;--success:#0F6F72;--success-soft:#DDF0EE;--danger:#B6421D;--danger-soft:#FDE8DC;--warning:#805000;--warning-soft:#F6EBD5;--mode-solo-weekly:#0F6F72;--mode-solo-daily:#B6421D;--mode-team:#0F6F72;--mode-advanced:#12484B;--font:Rubik,'Segoe UI',system-ui,sans-serif;--font-display:Rubik,'Segoe UI',system-ui,sans-serif}
:root[data-theme-look="contrast"]{--bg:#F2F7FF;--surface:#fff;--surface-2:#DAE9FF;--text:#061431;--muted:#44527A;--line:#CDD8EC;--line-strong:#61739B;--primary:#0049D3;--primary-soft:#DAE9FF;--black:#061431;--on-dark:#F2F7FF;--accent:#0049D3;--accent-soft:#DAE9FF;--success:#08745F;--success-soft:#DDF4EE;--danger:#B5236D;--danger-soft:#F9E2EE;--warning:#795000;--warning-soft:#F8EDCF;--mode-solo-weekly:#0049D3;--mode-solo-daily:#B5236D;--mode-team:#08745F;--mode-advanced:#14264A;--font:'Red Hat Text','Segoe UI',sans-serif;--font-display:'Red Hat Display','Segoe UI',sans-serif}
:root[data-theme-look="matchday"]{--bg:#F7F3F0;--surface:#EFE6E3;--surface-2:#E7D9D5;--text:#171214;--muted:#5E5357;--line:#DCCFCB;--line-strong:#76666B;--primary:#E8232A;--primary-soft:#FDE7E7;--black:#171214;--on-dark:#F7F3F0;--accent:#7A1116;--accent-soft:#F3E3E4;--success:#1F6B3A;--success-soft:#E5F2E9;--danger:#B21C23;--danger-soft:#FDE7E7;--warning:#805000;--warning-soft:#F6EBD5;--mode-solo-weekly:#E8232A;--mode-solo-daily:#7A1116;--mode-team:#7A1116;--mode-advanced:#30272A;--font:Barlow,'Segoe UI',sans-serif;--font-display:'Barlow Condensed','Arial Narrow',sans-serif}
.rules-index{padding:calc(1.2*clamp(15px,calc(8px + .6vw),24px)) 2vw 4rem}.rules-index h1{font-size:var(--pg-title)}.index-intro{margin:.7rem 0 2rem;color:var(--muted);font-size:1.2rem;font-weight:600}.mode-cards{display:grid;grid-template-columns:1fr;gap:1rem}.mode-card{display:flex;align-items:center;gap:1rem;min-width:0;padding:1.2rem;background:var(--surface);border:2px solid var(--line);border-top:.45rem solid var(--mc);border-radius:14px;color:inherit;text-decoration:none;box-shadow:0 3px 12px #0000000b}.mode-card:hover{border-color:var(--mc);transform:translateY(-2px)}.mode-card .mode-dot{width:1.2rem;height:1.2rem;background:var(--mc);border-color:var(--mc)}.mode-card-copy{display:grid;gap:.3rem;min-width:0}.mode-card-copy strong{font:800 1.55rem/1.05 var(--font-display)}.mode-card-copy>span{color:var(--muted);font-size:1rem;font-weight:600}.mode-arrow{margin-left:auto;color:var(--mc);font-size:1.8rem;font-weight:800}
@media (min-width:600px){.mode-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1500px){html:has(.rules-index){font-size:20px}.mode-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.mode-card{align-items:flex-start;min-height:12rem}.mode-card-copy strong{font-size:1.6rem}}
@media (min-width:1920px){html:has(.rules-index){font-size:24px}}
@media (max-width:899px){.mode-cards{gap:.7rem}.mode-card{padding:.9rem}.mode-card-copy strong{font-size:1.3rem}}
@media (max-width:420px){.rules-index{padding:1.2rem 12px 2rem}.index-intro{margin-bottom:1.2rem}.mode-card{padding:.8rem;gap:.65rem}.mode-card-copy>span{font-size:.9rem}}
/* ---- option A: long infographic ---- */
.pa{display:grid;gap:1rem;padding:1rem 2vw 3rem}
.card{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:1rem 1.2rem;min-width:0}
.card h2{font-size:1.7rem;margin-bottom:.8rem;display:flex;gap:.5rem;align-items:center}
.card h2 .ic{color:var(--mc)}
.pa .cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,27rem),1fr))}
@media (min-width:1500px){.pa .cards{grid-template-columns:repeat(3,minmax(0,1fr))}.pa .wide-goal{grid-column:span 2}}
@media (max-width:899px){.pa{padding:.8rem 12px 2rem;gap:.7rem}.card{padding:.8rem}.card h2{font-size:1.4rem}}


:root{--pick:#F4C430}
/* Mode colours are fixed per game on every theme (match the approved rule pages). */
:root[data-theme-look]{--mode-solo-weekly:#F4C430;--mode-solo-daily:#E07B1F;--mode-team:#8A4FD0;--mode-advanced:#2B2F38}
.pa{--accent:#245C99;--accent-soft:#E3ECF7}
.page-links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2rem;font-weight:600}
.page-links a{color:inherit;display:inline-flex;align-items:center;min-height:40px}

/* Same header as the app (copied from src/styles/shell.css). */
:root{--topbar-bg:var(--surface);--topbar-text:var(--text);--radius-md:4px}
:root[data-theme-look="orange"]{--radius-md:4px;--topbar-bg:#FF6A00;--topbar-text:#1B0F05}
:root[data-theme-look="surf"]{--radius-md:10px}
:root[data-theme-look="contrast"]{--topbar-bg:#0049D3;--topbar-text:#FFFFFF}
:root[data-theme-look="matchday"]{--topbar-bg:#7A1116;--topbar-text:#F7F3F0}
:root[data-theme-look="surf"]{--topbar-bg:#0F6F72;--topbar-text:#F5EEE3}
.theme-picker-editorial{--swatch-a:#F6F4EF;--swatch-b:#B11D1D}.theme-picker-orange{--swatch-a:#FF6A00;--swatch-b:#1B0F05}.theme-picker-matchday{--swatch-a:#7A1116;--swatch-b:#E8232A}.theme-picker-surf{--swatch-a:#0F8B8D;--swatch-b:#FF7A3D}.theme-picker-contrast{--swatch-a:#0049D3;--swatch-b:#EDB333}
/* fonts as in the mockup, whatever the colour scheme says */
.mk-nav { --font: 'Barlow', 'Segoe UI', system-ui, sans-serif; --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-family: var(--font); }

/* ---- top bar: fixed px so no page root font-size can scale it (16px base, 15px on phones) ---- */
header.topbar.mk-nav.mk-nav { box-sizing: border-box; flex: none; position: relative; display: flex; align-items: center; flex-wrap: nowrap; gap: 22.4px; padding: 0 2vw; height: 54.4px; background: var(--topbar-bg, var(--surface)); color: var(--topbar-text, var(--text)); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15.2px; z-index: 5; }
.mk-nav nav, .mk-nav .topbar-right { display: contents; }
.mk-nav button { font: inherit; color: inherit; cursor: pointer; }
.mk-nav a { color: inherit; }
.mk-nav .logo { display: inline-flex; align-items: center; min-height: 40px; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: .02em; text-decoration: none; }
.brand-text { font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; line-height: 1; }
.mk-nav .logo .brand-text { font-size: inherit; letter-spacing: inherit; }
header.topbar.mk-nav.mk-nav { line-height: 1.5; }
header.topbar.mk-nav nav a.l { height: auto; display: inline; padding: 0 0 3.2px; border-bottom: 3px solid transparent; text-decoration: none; font-size: 15.2px; font-weight: 600; }
header.topbar.mk-nav nav a.l.on { border-bottom-color: var(--primary); }
.mk-nav .hdr-sp { flex: 1; }
.mk-nav .theme-picker { position: static; opacity: 1; z-index: auto; }
.mk-nav .theme-picker > .ui-btn.theme-picker-dot { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex: none; border-radius: 50%; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; opacity: .55; }
.mk-nav .theme-picker > .ui-btn.theme-picker-dot:hover, .mk-nav .theme-picker > .ui-btn.theme-picker-dot[aria-expanded="true"] { opacity: 1; background: none; }
.mk-nav .theme-picker-dot::before { content: ''; position: static; inset: auto; display: inline-block; width: 16.8px; height: 16.8px; border-radius: 50%; background: linear-gradient(135deg, var(--swatch-a) 50%, var(--swatch-b) 50%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 35%, transparent); flex: none; }
/* shared button (src/styles/ui.css): same secondary md as the app Sign in */
.ui-btn-secondary.signin { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 0 16px; border: 1px solid var(--topbar-text, var(--black)); border-radius: var(--radius-md, 4px); background: var(--topbar-bg, var(--surface)); color: inherit; font: 700 13px/1 var(--font); text-decoration: none; white-space: nowrap; }
.mk-nav .account-menu { position: static; }
.mk-nav .more { border: 0; background: none; font-size: 20.8px; line-height: 1; padding: 3.2px 6.4px; color: var(--muted); letter-spacing: .05em; display: none; }
.mk-nav .account-trigger.ui-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 3.2px 4.8px; min-height: 0; height: auto; font-weight: 700; font-size: inherit; color: inherit; }
.mk-nav .account-avatar { width: 33.6px; height: 33.6px; border-radius: 50%; background: var(--dark-chip); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14.4px; flex: none; }
.mk-nav .topbar-notifications { position: relative; width: auto; min-height: 0; font-size: 18.4px; padding: 4.8px; display: inline-flex; align-items: center; justify-content: center; }
.mk-nav .topbar-notifications svg { width: 19.2px; height: 19.2px; }
.mk-nav .topbar-notifications i { top: 1.6px; right: 0; width: 8.8px; height: 8.8px; border-radius: 50%; background: var(--mode-solo-daily); }
.mk-nav .theme-menu, .mk-nav .account-pop { position: absolute; top: 49.6px; right: 2vw; left: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 18px 48px color-mix(in srgb, var(--black) 16%, transparent); padding: 8px; min-width: 208px; z-index: 9; font-size: 15.2px; }
.mk-nav .theme-menu.is-closed { display: none; }
.mk-nav .theme-menu .ui-btn, .mk-nav .account-pop .ui-btn, .mk-nav .account-pop a { display: flex; align-items: center; gap: 10.4px; width: 100%; border: 0; background: none; border-radius: 8px; padding: 7.2px 8px; font-weight: 600; text-align: left; min-height: 41.6px; height: auto; font-size: inherit; text-decoration: none; justify-content: flex-start; color: var(--text); }
.mk-nav .theme-menu .ui-btn:hover, .mk-nav .account-pop .ui-btn:hover, .mk-nav .account-pop a:hover { background: var(--surface-2); }
.mk-nav .theme-menu .ui-btn[aria-pressed="true"] { background: var(--primary-soft); }
.mk-nav .theme-menu .ui-btn > span[aria-hidden] { margin-left: auto; font-weight: 800; }
.mk-nav .theme-menu .theme-picker-dot { width: 16.8px; min-width: 0; height: 16.8px; min-height: 0; flex: none; padding: 0; background: none; display: inline-flex; }
.mk-nav .account-pop hr { border: 0; border-top: 1px solid var(--line); margin: 5.6px 0; }
.mk-nav .menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; flex: none; }
.mk-nav .menu-backdrop, .mk-nav .menu-panel { display: none; }
@media (max-width: 899px) {
  .mk-nav .menu-backdrop { display: block; position: fixed; inset: 0; background: color-mix(in srgb, var(--black) 45%, transparent); z-index: 34; }
  .mk-nav .menu-panel { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: min(78vw, 300px); background: var(--surface); color: var(--text); box-shadow: 0 0 40px color-mix(in srgb, var(--black) 30%, transparent); padding: 56px 12px 16px; z-index: 35; isolation: isolate; overflow-y: auto; animation: mk-menu-in .18s ease-out; }
  .mk-nav .menu-panel nav { display: flex; flex-direction: column; align-items: stretch; height: auto; gap: 2px; }
  .mk-nav .menu-panel a { display: flex; align-items: center; justify-content: flex-start; text-align: left; height: auto; min-height: 48px; padding: 8px 14px; border-radius: 8px; border-left: 4px solid transparent; font-size: 17px; font-weight: 700; text-decoration: none; color: var(--text); }
  .mk-nav .menu-panel a:hover { background: var(--surface-2); }
  .mk-nav .menu-panel a.on { background: var(--primary-soft); border-left-color: var(--primary); }
  @keyframes mk-menu-in { from { transform: translateX(-100%); } to { transform: none; } }
}
[hidden].menu-backdrop, [hidden].menu-panel { display: none !important; }
@media (max-width: 899px) {
  header.topbar.mk-nav.mk-nav { gap: 12px; padding: 0 12px; height: 48px; }
  header.topbar.mk-nav nav a.l:not(.nav-active) { display: none; }
  header.topbar.mk-nav > nav { display: none; }
  .mk-nav .menu-btn { display: inline-flex; }
  .mk-nav .logo { font-size: 20.25px; }
  .mk-nav .account-name { display: none; }
  .mk-nav .theme-menu, .mk-nav .account-pop { right: 12px; top: 43.5px; }
}


.mk-nav a.signin { text-decoration: none; }
.mk-nav .account-trigger { text-decoration: none; }

/* Above 2000 px keep the mockup's proportions: content is capped and centred, the header stays full width. */
.tabs,.pa{max-width:2000px;margin-left:auto;margin-right:auto}