:root{
  --bg:#080a09; --panel:#10130f; --panel2:#161a14; --border:#272d24;
  --ink:#c7cfc4; --dim:#717a6c; --accent:#46d6a8; --warn:#e8b552; --bad:#e25b5b;
  --accent2:#56b8ff;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:200ms cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* tabular data stays monospace so the fixed-width columns keep aligning */
.ltable,.stable,.ttable,.log,.matchmeta,.chartlegend,.scatterhead,.brmeta,
.hofmeta,.sutag,.tddim,.gstreak,.glab{font-family:var(--mono)}
body{max-width:1340px;margin:0 auto;padding:18px 20px 40px}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.2px}

header{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:16px}
.brand h1{font-size:30px;color:#eef3ea}
.brand p{color:var(--dim);font-style:italic;font-family:var(--serif);font-size:14px;margin-top:2px}
.genbox{text-align:right}
.gennum{font-family:var(--serif);font-size:42px;line-height:1;color:var(--accent)}
.genlabel{color:var(--dim);text-transform:uppercase;letter-spacing:3px;font-size:10px}

main{display:grid;grid-template-columns:1fr 430px;gap:16px;align-items:start}

.pitchpane{display:flex;flex-direction:column;gap:10px}
.canvaswrap{position:relative;border:1px solid var(--border);background:#0c0f0d;border-radius:3px;overflow:hidden}
canvas#pitch{display:block;width:100%}
canvas#pitch3d{display:block;width:100%;background:#070b09}
/* !important so this beats the higher-specificity id rules above (canvas#pitch{display:block})
   — otherwise toggling .hidden never actually hides a canvas and they stack/overlap */
canvas.hidden{display:none!important}
.overlay{position:absolute;inset:0;background:rgba(8,10,9,.82);display:flex;
  align-items:center;justify-content:center;color:var(--accent);
  letter-spacing:2px;text-transform:uppercase;font-size:13px}
.overlay.hidden{display:none}

.scoreline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--panel);border:1px solid var(--border);border-radius:3px;
  padding:9px 16px;gap:10px;position:relative}
.team{display:flex;align-items:center;gap:9px}
.teamAway{justify-content:flex-end}
.tname{font-family:var(--serif);font-size:16px}
.swatch{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:0 0 8px rgba(0,0,0,.6)}
.score{font-family:var(--serif);font-size:26px;display:flex;gap:10px;color:#eef3ea}
.score .dash{color:var(--dim)}
.clock{position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;
  background:var(--panel2);border:1px solid var(--border);border-radius:10px;
  padding:1px 9px;font-size:11px;color:var(--dim)}

.controls{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
button{font-family:var(--mono);font-size:12px;background:var(--panel2);
  color:var(--ink);border:1px solid var(--border);border-radius:3px;
  padding:7px 11px;cursor:pointer}
button:hover{border-color:var(--accent);color:#eef3ea}
button.primary{background:var(--accent);color:#06120d;border-color:var(--accent);font-weight:700}
button.primary:hover{filter:brightness(1.12)}
button.ghost{color:var(--dim);margin-left:auto}
.speeds{display:flex;gap:3px}
.speeds button{padding:7px 8px;min-width:38px}
.speeds button.on{background:var(--accent);color:#06120d;border-color:var(--accent);font-weight:700}
.toggle{color:var(--dim);display:flex;align-items:center;gap:5px;cursor:pointer;
  border:1px solid var(--border);padding:6px 9px;border-radius:3px}
.toggle input{accent-color:var(--accent)}

.matchmeta{display:flex;justify-content:space-between;gap:10px;color:var(--dim);
  font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
#phaseLabel{color:var(--warn)}
.savenote{color:var(--bad);text-transform:none;letter-spacing:0;text-align:center}

.sidepane{display:flex;flex-direction:column;gap:16px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:13px 14px}
.panel h2{font-size:15px;margin-bottom:9px;color:#eef3ea;
  border-bottom:1px solid var(--border);padding-bottom:6px}

.ltable{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.ltable th{color:var(--dim);text-transform:uppercase;font-size:9px;letter-spacing:1px;
  text-align:right;padding:3px 3px;font-weight:400}
.ltable th:nth-child(2){text-align:left}
.ltable td{padding:4px 3px;text-align:right;border-top:1px solid #1c2118;vertical-align:middle;
  overflow:hidden}
.ltable td:nth-child(2){text-align:left}
/* fixed layout: # / team(stretch) / 8 stat cols / lineage */
.ltable col.c-rank{width:18px}
.ltable col.c-stat{width:22px}
.ltable col.c-line{width:60px}
.ltable .pts{color:#eef3ea;font-weight:700}
.ltable .tcell{display:flex;align-items:center;gap:6px;min-width:0}
/* full team name always shown — wrap to as many lines as needed instead of
   truncating with an ellipsis (names are longer now that they're bred) */
.ltable .tn{min-width:0;white-space:normal;overflow-wrap:break-word;line-height:1.2}
.ltable .sw{width:9px;height:9px;border-radius:50%;flex:none}
.ltable tbody tr{cursor:pointer}
.ltable tbody tr:hover td{background:rgba(70,214,168,.13)}
.ltable tr.lead td{background:rgba(70,214,168,.07)}
.ltable tr.releg td{background:rgba(226,91,91,.05)}
.ltable tr.releg td:first-child{color:var(--bad)}
.ltable td.lineage{letter-spacing:.5px;white-space:normal;
  overflow-wrap:anywhere;line-height:1.55}
.lineage .star{color:var(--warn)}
.lineage .streak{color:var(--accent)}
.lineage .born{color:var(--dim);font-size:10px}

.stable{width:100%;border-collapse:collapse;font-size:11.5px}
.stable thead th{font-size:9px;text-transform:uppercase;letter-spacing:1px;
  color:var(--dim);padding:3px 4px;font-weight:400;text-align:right}
.stable thead th:first-child{text-align:left}
.stable td{padding:3px 4px;text-align:right;border-top:1px solid #1c2118}
.stable td:first-child{text-align:left;color:var(--dim)}

.log{font-size:11px;line-height:1.65;max-height:208px;overflow-y:auto;color:var(--dim)}
.log .gen{color:var(--accent)}
.log .hl{color:var(--ink)}
.log .ev{color:var(--warn)}

.chartpane{margin-top:16px}
.chartlegend{display:flex;gap:18px;color:var(--dim);font-size:11px;margin-bottom:6px}
.chartlegend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
.dot.accent{background:var(--accent)}.dot.warn{background:var(--warn)}
canvas#chart{display:block;width:100%;height:170px}
canvas#geneChart{display:block;width:100%;height:150px}
canvas#styleScatter{display:block;width:100%;height:172px}
.scatterhead{font-size:11px;color:var(--dim);font-weight:600;margin:12px 0 4px}

footer{margin-top:22px;color:var(--dim);font-size:11px;line-height:1.7;
  font-family:var(--serif);font-style:italic;border-top:1px solid var(--border);padding-top:12px}

.crest-sm{width:17px;height:17px;flex:none;display:inline-block;vertical-align:middle}
.crest-lg{width:26px;height:26px;display:inline-block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}

.hofpane{margin-top:16px}
.hofnote{color:var(--dim);font-style:italic;font-family:var(--serif);
  font-size:12.5px;margin:-2px 0 11px}
.hofgrid{display:flex;flex-wrap:wrap;gap:9px}
.hofcard{background:var(--panel2);border:1px solid var(--border);
  border-radius:4px;padding:9px 8px 8px;width:150px;text-align:center}
.hofcard.alive{border-color:rgba(70,214,168,.45)}
.hofcard .crest{width:42px;height:42px;display:block;margin:0 auto 5px}
.hofname{font-family:var(--serif);font-size:12.5px;color:#eef3ea;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hofmeta{font-size:10px;color:var(--warn);margin-top:2px;letter-spacing:1px}
.hofmeta.dim{color:var(--dim);letter-spacing:.4px}

.lineage .savemark{color:var(--warn)}
.phold{color:var(--dim);opacity:.55;font-size:10px;font-style:italic;
  letter-spacing:0;cursor:help}
.lineage .phold{font-style:normal}

/* ---- team browser modal ---- */
.modal{position:fixed;inset:0;background:rgba(6,8,7,.82);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px}
.modal.hidden{display:none}
.modalbox{background:var(--panel);border:1px solid var(--border);
  border-radius:5px;width:760px;max-width:100%;max-height:84vh;
  display:flex;flex-direction:column}
.modalhead{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--border)}
.modalhead h2{font-size:17px;color:#eef3ea}
.brcount{color:var(--dim);font-size:11px;margin-right:auto}
.brcontrols{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border)}
#brSearch{flex:1;min-width:160px;background:var(--panel2);color:var(--ink);
  border:1px solid var(--border);border-radius:3px;padding:7px 10px;
  font-family:var(--mono);font-size:12px}
#brSearch:focus{outline:none;border-color:var(--accent)}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:6px 10px;font-size:11px}
.chip.on{background:var(--accent);color:#06120d;border-color:var(--accent);font-weight:700}
.brlist{overflow-y:auto;padding:12px 16px;display:flex;flex-wrap:wrap;gap:9px}

/* ---- lineage chart ---- */
.lgbox{width:800px}
.lgnote{font-size:11px;color:var(--dim);line-height:1.5;padding:10px 16px 8px}
.lgscroll{overflow-y:auto;padding:0 8px 14px;background:#0e120c;
  border-top:1px solid var(--border)}
#lgCanvas{display:block;margin:0 auto;cursor:pointer}
.brempty{color:var(--dim);font-style:italic;padding:20px}
.brcard{display:flex;align-items:center;gap:9px;width:340px;
  background:var(--panel2);border:1px solid var(--border);
  border-radius:4px;padding:8px 10px}
.brcard .crest{width:38px;height:38px;flex:none}
.brinfo{flex:1;min-width:0}
.brname{font-family:var(--serif);font-size:13px;color:#eef3ea;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brmeta{font-size:10px;color:var(--dim);margin-top:1px}
.brstat{color:var(--bad);text-transform:uppercase;letter-spacing:.5px}
.brstat.live{color:var(--accent)}
.savebtn{flex:none;width:30px;padding:6px 0;font-size:15px;color:var(--dim)}
.savebtn.on{color:var(--warn);border-color:var(--warn)}

/* ---- mode switching ---- */
body:not(.mode-tour) .m-tour{display:none}
body.mode-tour .m-league{display:none}
button:disabled{opacity:.4;cursor:not-allowed}
button:disabled:hover{border-color:var(--border);color:var(--ink)}

/* ---- tournament: shared ---- */
.tc{width:14px;height:14px;flex:none;display:inline-block;vertical-align:middle}
.tourstage{font-size:11px;color:var(--warn);text-transform:uppercase;
  letter-spacing:1.5px;margin-bottom:10px}
.tourpanel{font-size:11px}
.champ{background:rgba(232,181,82,.14);border:1px solid var(--warn);
  border-radius:4px;padding:9px 12px;margin-bottom:12px;font-size:14px;
  display:flex;align-items:center;gap:7px;color:#eef3ea}
.champ .tc{width:22px;height:22px}

/* knockout bracket */
.kob{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;align-items:stretch}
.kor{display:flex;flex-direction:column;justify-content:space-around;
  gap:8px;min-width:150px}
.korh{font-size:9px;text-transform:uppercase;letter-spacing:1px;
  color:var(--dim);text-align:center}
.tie{border:1px solid var(--border);border-radius:3px;overflow:hidden}
.tie.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.trow{display:flex;align-items:center;gap:5px;padding:3px 6px;background:var(--panel2)}
.trow+.trow{border-top:1px solid var(--border)}
.trow.win{background:rgba(70,214,168,.13)}
.trow.bye{opacity:.45}
.trow .tn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow.win .tn{color:#eef3ea;font-weight:700}
.trow .ts{font-family:var(--serif);color:var(--dim);min-width:12px;text-align:right}
.trow.win .ts{color:#eef3ea}

/* standings tables (round-robin, world-cup groups) */
.ttable{width:100%;border-collapse:collapse;font-size:11px;margin-top:4px}
.ttable th{color:var(--dim);font-size:9px;text-transform:uppercase;
  padding:2px 4px;text-align:right;font-weight:400}
.ttable th:nth-child(2){text-align:left}
.ttable td{padding:2px 4px;text-align:right;border-top:1px solid #1c2118}
.ttable td:nth-child(2){text-align:left}
.ttable .pts{color:#eef3ea;font-weight:700}
.ttable .tcell{display:flex;align-items:center;gap:5px}
.ttable .tn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ttable tr.qual td{background:rgba(70,214,168,.09)}

/* world cup */
.wcgroups{display:flex;flex-wrap:wrap;gap:14px}
.wcg{width:248px}
.wcgh{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--warn)}
.wckoh{font-size:11px;text-transform:uppercase;letter-spacing:1px;
  color:var(--warn);margin:14px 0 6px}

/* winner-stays-on */
.gholder{display:flex;align-items:center;gap:7px;font-size:13px;margin-bottom:10px}
.glab{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.gstreak{color:var(--warn);font-size:10px}
.ghist{display:flex;flex-direction:column;gap:4px}
.grow{display:flex;align-items:center;gap:6px;font-size:11px;padding:4px 7px;
  background:var(--panel2);border-radius:3px}
.grow .gn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow .gn:last-of-type{text-align:right}
.gn.gw{color:#eef3ea;font-weight:700}
.gsc{font-family:var(--serif);color:var(--dim)}
.gqueue{margin-top:10px;font-size:10px;color:var(--dim);line-height:1.6}

/* ---- tournament setup modal ---- */
.subody{flex:1;overflow-y:auto;padding:14px 16px}
.susec{margin-bottom:16px}
.sulabel{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--dim);margin-bottom:8px}
.suformats{display:flex;flex-wrap:wrap;gap:7px}
.suformat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:236px;text-align:left;padding:8px 11px}
.suformat b{font-size:12px;font-family:var(--serif)}
.suformat span{font-size:10px;color:var(--dim);white-space:normal;line-height:1.4}
.suformat.on{background:var(--accent);color:#06120d;border-color:var(--accent)}
.suformat.on span{color:#06351f}
.sufilter{display:flex;gap:8px;align-items:center;margin-top:9px}
.sufilter input{flex:1;min-width:120px;background:var(--panel2);color:var(--ink);
  border:1px solid var(--border);border-radius:3px;padding:6px 9px;
  font-family:var(--mono);font-size:12px}
.sufilter input:focus{outline:none;border-color:var(--accent)}
.sufilter select{background:var(--panel2);color:var(--ink);
  border:1px solid var(--border);border-radius:3px;padding:6px 7px;
  font-family:var(--mono);font-size:11px;cursor:pointer}
.sufilter select:focus{outline:none;border-color:var(--accent)}
.sulist{max-height:330px;overflow-y:auto;border:1px solid var(--border);
  border-radius:3px;margin-top:8px}
.suempty{padding:18px;text-align:center;color:var(--dim);font-size:11px}
.surow{display:flex;align-items:center;gap:8px;padding:5px 9px;cursor:pointer;
  border-top:1px solid #1c2118}
.surow:first-child{border-top:none}
.surow:hover{background:var(--panel2)}
.surow.on{background:rgba(70,214,168,.10)}
.subox{width:15px;height:15px;border:1px solid var(--border);border-radius:2px;
  font-size:10px;text-align:center;line-height:14px;color:var(--accent);flex:none}
.surow.on .subox{border-color:var(--accent)}
.suname{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sutag{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.modalfoot{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-top:1px solid var(--border)}
.sumsg{color:var(--bad);font-size:11px;margin-right:auto}

/* ---- team detail modal ---- */
#teamDetail{z-index:60}
.tdbox{width:440px}
.tdbody{padding:14px 16px;overflow-y:auto}
.tdhead{display:flex;align-items:center;gap:12px;padding-bottom:12px;
  border-bottom:1px solid var(--border)}
.tdcrest{width:58px;height:58px;flex:none}
.tdtitle{flex:1;min-width:0}
.tdname{font-family:var(--serif);font-size:19px;color:#eef3ea}
.tdstatus{font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.tdstatus.live{color:var(--accent)}
.tdstatus.gone{color:var(--bad)}
.tdsec{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--warn);margin:13px 0 5px}
.tdrow{display:flex;justify-content:space-between;gap:14px;padding:4px 0;
  font-size:12px;border-top:1px solid #1c2118}
.tdsec+.tdrow{border-top:none}
.tdk{color:var(--dim)}
.tdv{color:var(--ink);text-align:right}
.tddim{color:var(--dim);font-size:10px;font-style:italic;margin-top:7px}
#tdSave{flex:none;align-self:flex-start}
#tdSave.on{color:var(--warn);border-color:var(--warn)}
.hofcard,.brcard{cursor:pointer}
.hofcard:hover,.brcard:hover{border-color:var(--accent)}

@media(max-width:1080px){main{grid-template-columns:1fr}}

/* ============================================================================
 *  v4 polish layer — motion, depth, focus, responsive. Additive overrides only.
 * ==========================================================================*/

/* a subtle living gradient behind the page so it doesn't read as flat black */
body{
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(70,214,168,.07), transparent 60%),
    radial-gradient(900px 480px at 12% 4%, rgba(86,184,255,.05), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* refined headings + a glowing accent rule under the masthead */
.brand h1{letter-spacing:.3px;
  background:linear-gradient(92deg,#eef3ea,#bfe6d4 60%,#8fd9ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
header{position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 38%)}
.gennum{text-shadow:0 0 26px rgba(70,214,168,.45)}

/* motion + interactivity */
button,.chip,.suformat,.surow,.hofcard,.brcard,.ltable tbody tr{
  transition:background var(--ease),border-color var(--ease),color var(--ease),
    transform 120ms ease,box-shadow var(--ease)}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.primary{box-shadow:0 4px 16px rgba(70,214,168,.28)}
.ltable tbody tr:hover td{background:rgba(70,214,168,.20)}
.hofcard:hover,.brcard:hover{transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.5)}

/* keyboard-accessibility: visible focus rings everywhere */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
button:focus-visible,.chip:focus-visible{outline-offset:1px}

/* panels get a touch of depth */
.panel,.scoreline{box-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 6px 18px rgba(0,0,0,.28)}

/* the wrap sizes to whichever canvas is visible — the 3D view is 16:9, the 2D
   view is taller (its 105x68 pitch ratio); each renderer sets its own height */
.canvaswrap{box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* a corner shape-radar overlaid on the 3D view (drawn by app.js) */
#radar{position:absolute;left:10px;bottom:10px;width:168px;height:109px;
  border:1px solid var(--border);border-radius:4px;background:rgba(8,12,10,.55);
  backdrop-filter:blur(2px);pointer-events:none;opacity:.92;z-index:4}
#radar.hidden{display:none}

/* modals fade + lift in */
.modal{animation:modalfade var(--ease)}
.modalbox{animation:modalpop 240ms cubic-bezier(.2,.8,.25,1)}
@keyframes modalfade{from{opacity:0}to{opacity:1}}
@keyframes modalpop{from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}

/* custom scrollbars (dark, slim) */
.log,.brlist,.sulist,.lgscroll,.tdbody,.subody{scrollbar-width:thin;
  scrollbar-color:#2e362a transparent}
.log::-webkit-scrollbar,.brlist::-webkit-scrollbar,.sulist::-webkit-scrollbar,
.lgscroll::-webkit-scrollbar,.tdbody::-webkit-scrollbar,.subody::-webkit-scrollbar{width:9px;height:9px}
.log::-webkit-scrollbar-thumb,.brlist::-webkit-scrollbar-thumb,
.sulist::-webkit-scrollbar-thumb,.lgscroll::-webkit-scrollbar-thumb,
.tdbody::-webkit-scrollbar-thumb,.subody::-webkit-scrollbar-thumb{
  background:#2e362a;border-radius:6px}

/* ---- first-visit intro overlay ---- */
#intro .introbox{width:560px;max-width:100%;background:var(--panel);
  border:1px solid var(--border);border-radius:8px;padding:26px 28px;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
#intro h2{font-family:var(--serif);font-size:26px;color:#eef3ea;margin-bottom:4px}
#intro .sub{color:var(--dim);font-style:italic;font-family:var(--serif);
  font-size:14px;margin-bottom:16px}
#intro p{color:var(--ink);line-height:1.65;font-size:13.5px;margin-bottom:12px}
#intro ul{list-style:none;margin:0 0 18px;display:grid;gap:9px}
#intro li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:13px;line-height:1.5}
#intro li b{color:var(--accent);font-weight:600}
#intro .ikey{flex:none;width:26px;height:26px;border-radius:6px;background:var(--panel2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px}
#intro .start{width:100%;padding:12px;font-size:14px;font-weight:700}

/* ---- responsive ---- */
@media(max-width:1080px){
  body{padding:14px 14px 32px}
  .sidepane{order:2}
  .brand h1{font-size:24px}.gennum{font-size:34px}
}
@media(max-width:640px){
  body{font-size:12.5px}
  header{flex-wrap:wrap;gap:8px}
  .brand h1{font-size:21px}.brand p{font-size:12px}
  .gennum{font-size:28px}
  .controls{gap:6px}
  button{padding:8px 10px}            /* larger tap targets */
  .modalbox,.lgbox,.tdbox{width:100%}
  .chartlegend{flex-wrap:wrap;gap:8px 14px}
  #radar{width:120px;height:78px}
}

/* respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  *,button:hover{transition:none!important;animation:none!important;transform:none!important}
}