/* v0.9.28 menu, pause, result and guide screens in the Bright look (Brawl Stars direction, Henry's request).
   Chunky ink-outlined panels with a hard drop shadow, a saturated colour per class, yellow call-to-action
   buttons that press down, and the real toon on each class card. v0.10.9: Bright is the only look (Classic is gone);
   the body always carries data-theme="bright", and the scope keeps these rules ahead of the base styles in
   index.html. Colours follow the arena's palette (arena-visuals.js) and the toon palette (TOON in index.html). */

/* Class icons in the result table had no size and grew to fill the card. */
#resTable td svg{width:16px;height:16px;display:inline-block;vertical-align:-3px}

body[data-theme="bright"]{
  --mb-ink:#1d2140; --mb-sky:#2a3170; --mb-panel:#3346b0; --mb-panel-2:#2a3a96; --mb-tile:#4a5fd0;
  --mb-yellow:#ffd166; --mb-yellow-2:#f4a92a; --mb-blue:#4f9dff; --mb-blue-2:#2f6fe0; --mb-cream:#fff4d6;
}
/* The shared variables recolour the parts styled elsewhere (mobile shell, balance lab) without restyling them. */
body[data-theme="bright"] .screen{--line:#1d2140;--muted:#c9d3ff;--text:#ffffff;--gold:#ffd166;
  background:
    radial-gradient(ellipse at 15% 10%,#6d92e055,transparent 55%),
    radial-gradient(ellipse at 85% 90%,#a78bfa44,transparent 55%),
    repeating-linear-gradient(135deg,#ffffff08 0 22px,transparent 22px 44px),
    linear-gradient(165deg,#3b4cbc,#2a3170 55%,#211c5c);
  backdrop-filter:none}
body[data-theme="bright"] .card{background:linear-gradient(180deg,var(--mb-panel),var(--mb-panel-2));border:3px solid var(--mb-ink);
  border-radius:22px;box-shadow:inset 0 2px 0 #ffffff40,0 8px 0 var(--mb-ink),0 22px 50px #0b0f3a80;color:#fff}

/* Title: a heavy outlined wordmark instead of the serif. */
body[data-theme="bright"] h1{font-family:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:900;font-style:italic;letter-spacing:1px;
  color:#fff;-webkit-text-stroke:6px var(--mb-ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--mb-ink)}
body[data-theme="bright"] h1 small{-webkit-text-stroke:0;text-shadow:none;font-style:normal;font-weight:600;color:var(--mb-cream);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
body[data-theme="bright"] .eyebrow{color:var(--mb-yellow);text-shadow:0 2px 0 var(--mb-ink)}
body[data-theme="bright"] .version{background:var(--mb-yellow);color:var(--mb-ink);border:2px solid var(--mb-ink);border-radius:999px;font-weight:800;box-shadow:0 3px 0 var(--mb-ink)}
body[data-theme="bright"] h2{color:var(--mb-cream);text-shadow:0 2px 0 var(--mb-ink)}
body[data-theme="bright"] .hint{color:var(--muted)}

/* Class cards: one saturated colour each, thick ink outline, the toon standing on the right. */
body[data-theme="bright"] .cls{border:3px solid var(--mb-ink);border-radius:18px;box-shadow:inset 0 2px 0 #ffffff45,0 6px 0 var(--mb-ink);
  color:#fff;transition:transform .12s ease-out,box-shadow .12s ease-out;overflow:hidden}
/* Henry (2026-10-30): one card per class in its WoW class colour (the same as its arena frames and nameplates), from
   the class colour to a darker shade of it. Every spec of a class shares the card. */
body[data-theme="bright"] .cls[data-family="warrior"]{background:linear-gradient(140deg,#c69b6d,#7d5a36)}
body[data-theme="bright"] .cls[data-family="paladin"]{background:linear-gradient(140deg,#f48cba,#a8467a)}
body[data-theme="bright"] .cls[data-family="hunter"]{background:linear-gradient(140deg,#aad372,#5a8433)}
body[data-theme="bright"] .cls[data-family="rogue"]{background:linear-gradient(140deg,#fff468,#b8a81c)}
body[data-theme="bright"] .cls[data-family="priest"]{background:linear-gradient(140deg,#ffffff,#a9b4c2)}
body[data-theme="bright"] .cls[data-family="deathknight"]{background:linear-gradient(140deg,#c41e3a,#6e0f20)}
body[data-theme="bright"] .cls[data-family="shaman"]{background:linear-gradient(140deg,#0070dd,#003a78)}
body[data-theme="bright"] .cls[data-family="mage"]{background:linear-gradient(140deg,#3fc7eb,#1a6f94)}
body[data-theme="bright"] .cls[data-family="warlock"]{background:linear-gradient(140deg,#8788ee,#45469e)}
body[data-theme="bright"] .cls[data-family="monk"]{background:linear-gradient(140deg,#00ff98,#0a6b4a)}
body[data-theme="bright"] .cls[data-family="demonhunter"]{background:linear-gradient(140deg,#a330c9,#5a1a73)}
body[data-theme="bright"] .cls[data-family="druid"]{background:linear-gradient(140deg,#ff7c0a,#a84a00)}
/* The two light class colours (Priest white, Rogue yellow) take dark small text; names keep their white with the ink outline. */
body[data-theme="bright"] .cls[data-family="priest"] .role,body[data-theme="bright"] .cls[data-family="priest"] p,body[data-theme="bright"] .cls[data-family="rogue"] .role,body[data-theme="bright"] .cls[data-family="rogue"] p{color:var(--mb-ink);text-shadow:none;opacity:1}
body[data-theme="bright"] .cls.selected,body[data-theme="bright"] .cls[aria-pressed="true"]{border-color:var(--mb-ink);outline:4px solid var(--mb-yellow);outline-offset:-1px;
  transform:translateY(-3px);box-shadow:inset 0 2px 0 #ffffff55,0 9px 0 var(--mb-ink),0 0 26px #ffd16688}
body[data-theme="bright"] .cls:hover{transform:translateY(-2px)}
body[data-theme="bright"] .cls:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #ffffff45,0 2px 0 var(--mb-ink)}
body[data-theme="bright"] .cls .role{color:var(--mb-cream);opacity:.95;text-shadow:0 1px 0 #1d214099}
body[data-theme="bright"] .cls strong{color:#fff!important;font-family:'Chakra Petch',system-ui,sans-serif;font-weight:900;
  -webkit-text-stroke:4px var(--mb-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--mb-ink)}
body[data-theme="bright"] .cls p{color:#fff;text-shadow:0 1px 0 #1d2140aa}
body[data-theme="bright"] .cls .pick{border:2px solid var(--mb-ink);background:#ffffff40}
body[data-theme="bright"] .cls.selected .pick,body[data-theme="bright"] .cls[aria-pressed="true"] .pick{background:var(--mb-yellow);color:var(--mb-ink);box-shadow:0 2px 0 var(--mb-ink)}
body[data-theme="bright"] .kit span{background:#1d214055;border:2px solid #1d214099;border-radius:9px;color:#fff}
body[data-theme="bright"] .cls .portrait.toon{opacity:1;width:auto;height:118%;right:-6px;bottom:-14px;filter:drop-shadow(0 3px 0 #1d214066)}
@media(max-width:620px){body[data-theme="bright"] .cls .portrait.toon{opacity:1;height:112%;right:-14px}}

/* Buttons: yellow for the main action, blue for the rest, both press down. */
body[data-theme="bright"] .go button,body[data-theme="bright"] .lab-actions button{
  border:3px solid var(--mb-ink);border-radius:14px;background:linear-gradient(180deg,var(--mb-blue),var(--mb-blue-2));color:#fff;
  font-weight:900;letter-spacing:.3px;text-shadow:0 2px 0 #1d2140aa;box-shadow:inset 0 2px 0 #ffffff55,0 5px 0 var(--mb-ink);
  transition:transform .08s,box-shadow .08s}
body[data-theme="bright"] .go button.primary,body[data-theme="bright"] .lab-actions button.primary{
  background:linear-gradient(180deg,var(--mb-yellow),var(--mb-yellow-2));color:var(--mb-ink);text-shadow:0 1px 0 #ffffff80}
body[data-theme="bright"] .go button:active,body[data-theme="bright"] .lab-actions button:active{
  transform:translateY(4px);box-shadow:inset 0 2px 0 #ffffff55,0 1px 0 var(--mb-ink)}
body[data-theme="bright"] .seg button{background:var(--mb-tile);border:3px solid var(--mb-ink);border-radius:12px;color:#fff;font-weight:800;
  box-shadow:0 4px 0 var(--mb-ink);transition:transform .08s,box-shadow .08s}
body[data-theme="bright"] .seg button[aria-pressed="true"]{background:var(--mb-yellow);color:var(--mb-ink);border-color:var(--mb-ink)}
body[data-theme="bright"] .seg button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--mb-ink)}
body[data-theme="bright"] .text-btn{color:var(--mb-yellow);text-decoration-color:#ffd16688}

/* Settings: each option a rounded chip; selects and checkboxes in the palette. */
body[data-theme="bright"] .settings label{background:#1d214040;border:2px solid #1d214099;border-radius:12px;padding:5px 9px;color:#fff}
body[data-theme="bright"] .settings select{background:var(--mb-tile);color:#fff;border:2px solid var(--mb-ink);border-radius:9px}
body[data-theme="bright"] .settings input[type="checkbox"]{accent-color:var(--mb-yellow)}
body[data-theme="bright"] .app-tools{border-color:#1d214099}

/* Pause, result and guide reuse the same card; their inner pieces match. */
body[data-theme="bright"] #pause .match-tool button{background:var(--mb-tile);border:3px solid var(--mb-ink);border-radius:12px;color:#fff;box-shadow:0 4px 0 var(--mb-ink)}
body[data-theme="bright"] #pause .match-tool span{color:var(--mb-cream)}
body[data-theme="bright"] #pause .match-tool label{color:var(--mb-cream);font-size:11px}
body[data-theme="bright"] #pause .match-tool:has(#pauseCamera){grid-column:1/-1}
body[data-theme="bright"] #pause .match-tool select{max-width:100%;padding:7px 10px;background:var(--mb-tile);border:2px solid var(--mb-ink);border-radius:9px;color:#fff;font:inherit}
body[data-theme="bright"] #resTitle.win{color:var(--mb-yellow)}
body[data-theme="bright"] #resTitle.lose{color:#ff8a8a}
body[data-theme="bright"] #resMoments{background:#1d214040;border-left:4px solid var(--mb-yellow);border-radius:10px;color:#fff}
body[data-theme="bright"] #resTable th{color:var(--mb-cream)}
body[data-theme="bright"] #resTable td{border-color:#1d214066}
body[data-theme="bright"] #resTable td.top{color:var(--mb-yellow)}
body[data-theme="bright"] .app-button{background:var(--mb-tile);border:2px solid var(--mb-ink);border-radius:11px;color:#fff;font-weight:800;box-shadow:0 3px 0 var(--mb-ink)}
body[data-theme="bright"] .app-button.app-primary{background:var(--mb-yellow);color:var(--mb-ink)}
body[data-theme="bright"] .app-button:disabled{opacity:.6;box-shadow:none}
@media(max-width:620px){body[data-theme="bright"] .cls .copy{max-width:64%}}

/* v0.10.9 (Henry): the main menu is play setup only. Settings and Testing open as sheets from the header. */
body[data-theme="bright"] .brand{gap:12px;flex-wrap:wrap}
body[data-theme="bright"] .brand-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
body[data-theme="bright"] .sheet-open{background:var(--mb-tile);color:#fff;border:2px solid var(--mb-ink);border-radius:999px;font-weight:800;font-size:13px;
 min-height:40px;padding:0 16px;box-shadow:0 3px 0 var(--mb-ink);cursor:pointer}
body[data-theme="bright"] .sheet-open:active{transform:translateY(2px);box-shadow:0 1px 0 var(--mb-ink)}
body[data-theme="bright"] .matchup [hidden]{display:none}
body[data-theme="bright"] .menu-build{font-size:12px;margin-top:16px;padding-top:12px;border-top:2px solid #1d214055}
body[data-theme="bright"] .menu-build+.app-status{margin-bottom:0}
/* A sheet's one grid column never grows past the screen, so wide rows (the lab's tab strip) scroll instead. */
body[data-theme="bright"] .sheet{grid-template-columns:minmax(0,1fr);justify-items:center}
body[data-theme="bright"] #settingsSheet .card{width:min(520px,100%)}
body[data-theme="bright"] #testing .card{width:min(840px,100%)}
body[data-theme="bright"] .sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
body[data-theme="bright"] .sheet-head h1{font-size:38px}
body[data-theme="bright"] .sheet-close{flex:none;width:44px;height:44px;border-radius:50%;border:3px solid var(--mb-ink);background:var(--mb-tile);color:#fff;
 font-size:24px;line-height:1;font-weight:800;box-shadow:0 3px 0 var(--mb-ink);cursor:pointer}
body[data-theme="bright"] .sheet-close:active{transform:translateY(2px);box-shadow:0 1px 0 var(--mb-ink)}
body[data-theme="bright"] .sheet-group .settings{margin-top:0}
body[data-theme="bright"] .sheet .go{margin-top:20px}
body[data-theme="bright"] #testing .app-tools{margin-top:22px;padding-top:12px;border-top:2px solid #1d214055}
/* Balance lab: run a simulation up top, then every number by tab, one fold per ability. */
body[data-theme="bright"] .lab h2{font-size:12px;margin-top:10px}
body[data-theme="bright"] .lab-sim{background:#1d214033;border:2px solid #1d214066;border-radius:14px;padding:12px}
body[data-theme="bright"] .lab-sim .hint{margin:8px 0 0;font-size:12px;line-height:1.5}
body[data-theme="bright"] #labOut{color:#fff;font-size:12.5px;white-space:pre-line}
body[data-theme="bright"] #labOut p{margin:6px 0}
body[data-theme="bright"] .lab-table{width:100%;border-collapse:collapse;margin:8px 0;font-variant-numeric:tabular-nums;font-size:12.5px}
body[data-theme="bright"] .lab-table th,body[data-theme="bright"] .lab-table td{text-align:right;padding:5px 6px;border-bottom:1px solid #1d214066}
body[data-theme="bright"] .lab-table th:first-child,body[data-theme="bright"] .lab-table td:first-child{text-align:left}
body[data-theme="bright"] .lab-table th{color:var(--mb-cream);font-weight:700}
body[data-theme="bright"] #labBar{background:#1d214066}
body[data-theme="bright"] #labBar i{background:var(--mb-yellow)}
body[data-theme="bright"] .lab-heading{color:#fff;margin-top:20px}
body[data-theme="bright"] .lab-heading small{color:var(--muted)}
body[data-theme="bright"] .lab-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
body[data-theme="bright"] .lab-filter input[type="search"]{flex:1 1 220px;min-height:42px;border-radius:12px;border:2px solid var(--mb-ink);background:#fff;
 color:var(--mb-ink);font:inherit;font-size:14px;padding:0 12px}
body[data-theme="bright"] .lab-filter label{display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:600;min-height:42px}
body[data-theme="bright"] .lab-filter input[type="checkbox"]{accent-color:var(--mb-yellow);width:18px;height:18px}
body[data-theme="bright"] .lab-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
body[data-theme="bright"] .lab-tabs button{flex:none;min-height:38px;padding:0 12px;border-radius:999px;border:2px solid var(--mb-ink);background:var(--mb-tile);
 color:#fff;font-weight:700;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px}
body[data-theme="bright"] .lab-tabs button[aria-selected="true"]{background:var(--mb-yellow);color:var(--mb-ink)}
body[data-theme="bright"] .lab-tabs i{font-style:normal;font-size:11px;min-width:18px;height:18px;border-radius:9px;background:var(--mb-ink);color:var(--mb-yellow);
 display:grid;place-items:center;padding:0 4px}
body[data-theme="bright"] .lab-tabs i:empty{display:none}
body[data-theme="bright"] details.lab-group{border-top:1px solid #1d214066;padding:2px 0}
body[data-theme="bright"] details.lab-group summary{min-height:42px;display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:14px}
body[data-theme="bright"] details.lab-group summary small{color:var(--muted);font-weight:500;font-size:12px}
body[data-theme="bright"] .lab-grid{gap:4px 18px;margin:4px 0 10px}
body[data-theme="bright"] .lab-row{display:grid;grid-template-columns:1fr 76px 34px;gap:2px 6px;align-items:center;font-size:12.5px;color:var(--mb-cream)}
body[data-theme="bright"] .lab-row.changed .lab-name{color:var(--mb-yellow);font-weight:700}
body[data-theme="bright"] .lab-num{width:76px;min-height:34px;border-radius:8px;border:2px solid #1d214099;background:#1d214055;color:#fff;font:inherit;
 font-variant-numeric:tabular-nums;text-align:right;padding:0 6px}
body[data-theme="bright"] .lab-row.changed .lab-num{border-color:var(--mb-yellow)}
body[data-theme="bright"] .lab-undo{width:34px;height:34px;border-radius:50%;border:2px solid #1d214099;background:transparent;color:var(--mb-yellow);font-size:16px;cursor:pointer}
body[data-theme="bright"] .lab-undo:disabled{visibility:hidden}
body[data-theme="bright"] .lab-range{grid-column:1/-1;width:100%;height:24px;margin:0;accent-color:var(--mb-yellow)}
body[data-theme="bright"] #labNote:empty{display:none}

/* 2026-10-29 (class-families.md): a class card picks its shown spec; spec chips pick any spec of the class. The card's action is a
   full-size transparent button under the text, so the chips stay real buttons of their own. */
body[data-theme="bright"] .cls{cursor:default}
body[data-theme="bright"] .cls .cls-pick{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
body[data-theme="bright"] .cls .cls-pick:focus-visible{outline:3px solid var(--mb-yellow);outline-offset:-5px}
body[data-theme="bright"] .cls .copy{pointer-events:none}
body[data-theme="bright"] .cls .spec-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px;pointer-events:auto}
body[data-theme="bright"] .cls .spec-chip{min-height:34px;padding:3px 11px;border:2px solid var(--mb-ink);border-radius:99px;background:#1d214066;color:#fff;font:800 12px/1 system-ui,sans-serif;box-shadow:0 2px 0 var(--mb-ink);cursor:pointer}
body[data-theme="bright"] .cls .spec-chip[aria-pressed="true"]{background:var(--mb-yellow);color:var(--mb-ink)}
body[data-theme="bright"] .cls .spec-chip:active{transform:translateY(2px);box-shadow:none}
@media(max-height:520px){body[data-theme="bright"] .cls .spec-chip{min-height:30px;padding:2px 9px;font-size:11px}body[data-theme="bright"] .cls .spec-chips{margin:0 0 4px}}

/* Class/spec precedes its abilities; match options and Play follow in reading and keyboard order. */
body[data-theme="bright"] #menu{grid-template-columns:minmax(0,1fr)}
body[data-theme="bright"] #menu .card{min-width:0}
body[data-theme="bright"] #menu .current-setup{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;margin:16px 0}
body[data-theme="bright"] #menu .setup-play h2{font-size:15px;line-height:1.4;margin:0 0 10px}
body[data-theme="bright"] #menu .setup-play .go{display:flex;flex-direction:row;gap:10px}
body[data-theme="bright"] #menu .setup-play .go button{min-height:48px;margin:0;flex:1}
body[data-theme="bright"] #menu .setup-section{border-top:1px solid #ffffff33;padding:4px 0}
body[data-theme="bright"] #menu .setup-section>h2{font-size:15px;font-weight:800;line-height:1.4;margin:0;padding:10px 4px;color:#fff}
body[data-theme="bright"] #menu #classSelectionLabel{display:block;font-size:18px;color:var(--mb-yellow);margin:5px 0 0}
body[data-theme="bright"] #menu .setup-section .classes,body[data-theme="bright"] #lobbyPilot .setup-section .classes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 16px}
body[data-theme="bright"] #menu .setup-section .cls,body[data-theme="bright"] #lobbyPilot .setup-section .cls{min-height:0;padding:12px;overflow:hidden}
body[data-theme="bright"] #menu .setup-section .cls .portrait,body[data-theme="bright"] #lobbyPilot .setup-section .cls .portrait{display:none}
body[data-theme="bright"] #menu .setup-section .cls .copy,body[data-theme="bright"] #lobbyPilot .setup-section .cls .copy{max-width:none;padding:0}
body[data-theme="bright"] #menu .setup-section .cls .copy strong,body[data-theme="bright"] #lobbyPilot .setup-section .cls .copy strong{font-size:20px}
body[data-theme="bright"] #menu .setup-section .cls .copy p,body[data-theme="bright"] #lobbyPilot .setup-section .cls .copy p{display:none}
body[data-theme="bright"] #menu .setup-section .cls .kit,body[data-theme="bright"] #lobbyPilot .setup-section .cls .kit{display:none}
body[data-theme="bright"] #menu .setup-section .cls .spec-chips,body[data-theme="bright"] #lobbyPilot .setup-section .cls .spec-chips{margin:8px 0 0;gap:6px}
body[data-theme="bright"] #menu .setup-section .cls .spec-chip,body[data-theme="bright"] #lobbyPilot .setup-section .cls .spec-chip{min-height:44px;max-width:100%;padding:8px 10px;font-size:13px;line-height:1.2;overflow-wrap:anywhere}
body[data-theme="bright"] #menu .matchup label{max-width:100%;flex-wrap:wrap}
body[data-theme="bright"] #menu .matchup select{min-width:0;max-width:100%}
body[data-theme="bright"] #menu .setup-section .menu-bottom{display:block;margin:10px 0 16px}
body[data-theme="bright"] #menu .setup-section .seg button{min-height:44px}
body[data-theme="bright"] #menu .menu-footer a{color:#fff;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;padding:8px}
body[data-theme="bright"] #menu .brand h1{font-size:44px}
body[data-theme="bright"] #menu .brand h1 small{display:none}
body[data-theme="bright"] #menu .brand .eyebrow{display:none}
@media(max-width:380px){body[data-theme="bright"] #menu{padding:12px}body[data-theme="bright"] #menu .card{padding:16px 12px}body[data-theme="bright"] #menu .setup-section .cls,body[data-theme="bright"] #lobbyPilot .setup-section .cls{padding:6px}body[data-theme="bright"] #menu .setup-section .cls .spec-chip,body[data-theme="bright"] #lobbyPilot .setup-section .cls .spec-chip{padding:8px 4px;font-size:12px}}
@media(max-width:650px) and (orientation:portrait){body[data-theme="bright"] #menu .current-setup{grid-template-columns:1fr;gap:12px;margin:12px 0}body[data-theme="bright"] #menu .setup-play .go{flex-direction:row}body[data-theme="bright"] #menu .setup-play .go button{flex:1;padding:10px;font-size:16px}body[data-theme="bright"] #menu .setup-play .hint{font-size:12px;margin:8px 0}body[data-theme="bright"] #menu .setup-section .classes,body[data-theme="bright"] #lobbyPilot .setup-section .classes{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-theme="bright"] #menu .brand{gap:8px}body[data-theme="bright"] #menu .brand-tools{justify-content:flex-start}body[data-theme="bright"] #menu .brand .version{display:none}}
@media(max-height:500px) and (orientation:landscape){body[data-theme="bright"] #menu .card{padding:16px 20px}body[data-theme="bright"] #menu .brand h1{font-size:30px}body[data-theme="bright"] #menu .brand .version{display:none}body[data-theme="bright"] #menu .current-setup{margin:10px 0}body[data-theme="bright"] #menu .setup-play .hint{font-size:12px}}
/* Final ability ledger: one player and measure at a time keeps phone rows readable. */
body[data-theme="bright"] #resBreakdown{margin-top:24px;padding-top:18px;border-top:1px solid #ffffff44;text-align:left}
body[data-theme="bright"] #resBreakdown h2{font-size:20px;margin:0 0 14px}
body[data-theme="bright"] .recap-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
body[data-theme="bright"] .recap-controls label{display:grid;gap:6px;font-size:13px;font-weight:700;min-width:0}
body[data-theme="bright"] .recap-controls select{width:100%;min-width:0;min-height:44px;font:inherit;padding:8px;border:2px solid #111936;border-radius:10px;background:#e8edff;color:#172044}
body[data-theme="bright"] .recap-controls select:focus-visible{outline:3px solid #ffe08a;outline-offset:3px}
body[data-theme="bright"] .recap-note{font-size:12px;line-height:1.5;color:#e2eaff;margin:12px 0}
body[data-theme="bright"] .recap-total{font-size:18px;font-weight:800;margin:12px 0}
body[data-theme="bright"] .recap-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
body[data-theme="bright"] .recap-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;line-height:1.4}
body[data-theme="bright"] .recap-line span{overflow-wrap:anywhere;min-width:0}
body[data-theme="bright"] .recap-line strong{flex:none;font-variant-numeric:tabular-nums;font-size:13px}
body[data-theme="bright"] .recap-track{height:6px;margin-top:5px;border-radius:5px;overflow:hidden;background:#17204488}
body[data-theme="bright"] .recap-track>div{height:100%;background:#ffe08a;border-radius:5px}
body[data-theme="bright"] .recap-empty{padding:12px 0;color:#e2eaff;font-size:14px}
@media(max-width:380px){body[data-theme="bright"] .recap-controls{grid-template-columns:1fr}}
/* Pre-match layout editing shares the match's saved orientation settings. */
body[data-theme="bright"] #settingsHudControls details{margin:12px 0;padding:12px;border:1px solid var(--mb-ink);border-radius:12px}
body[data-theme="bright"] #settingsHudControls summary{font-weight:700;cursor:pointer;min-height:32px}
body[data-theme="bright"] #settingsHudControls label{display:grid;grid-template-columns:1fr 80px 24px;gap:8px;align-items:center;margin:10px 0}
body[data-theme="bright"] #settingsHudControls input{width:100%;min-height:44px}
body[data-theme="bright"] .lab-picker{display:grid;gap:8px;margin:12px 0;font-weight:700}
body[data-theme="bright"] .lab-picker select{width:100%;min-height:44px}
body[data-theme="bright"] #settingsSheet{z-index:110}
body[data-theme="bright"] #settingsHudOrientation,body[data-theme="bright"] #settingsHudReset{min-height:44px;border:2px solid var(--mb-ink);border-radius:10px;padding:8px;background:var(--mb-tile);color:var(--mb-ink);font:inherit}

body[data-theme="bright"] #settingsHudOrientation,body[data-theme="bright"] #settingsHudReset,body[data-theme="bright"] .lab-picker select{color:var(--mb-cream);background:var(--mb-tile);border:2px solid var(--mb-ink);border-radius:10px;padding:10px;font:inherit}