/* t122: shared light tokens; dark values live on html[data-theme="dark"]. No image inversion. */
:root {
  --bg:#f4f5f7; --fg:#1d2330; --muted:#667085; --card:#fff; --line:#e3e6ea;
  --accent:#3b5bdb; --warn:#b54708; --warnbg:#fffaeb; --err:#b42318; --errbg:#fef3f2;
  --ok:#067647; --okbg:#ecfdf3; --incbg:#fef0c7; --warn-text:#93370d; --warn-border:#fedf89; --err-border:#fecdca;
  --bar-track:#eef0f3; --code-bg:#f2f4f7; --hit-bg:#fff8eb; --input-bg:#fff; --tab-bg:#fff; --btn-on-accent:#fff;
  --surface-2:#f8f9fb; --art-bg:#e8eaef; --you-chip-bg:#dbe4ff; --turn-bg:#ecfdf3; --log-bg:#f6f7f9; --table-head:#fff;
  --needs-line:#e5e7eb; --switch-off:#cfd4dc; --switch-knob:#fff; --rule-muted:#666; --good:#2f9e44; --msg-bad:#c92a2a;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg:#12141a; --fg:#e8eaed; --muted:#9aa3b2; --card:#1c1f27; --line:#3a4150;
  --accent:#6d8cff; --warn:#f0b15b; --warnbg:#3d2a12; --err:#ff8a7a; --errbg:#3a1c1c;
  --ok:#3dd68c; --okbg:#143326; --incbg:#3d2a12; --warn-text:#f0b15b; --warn-border:#6b4e1c; --err-border:#7a3530;
  --bar-track:#2a2e38; --code-bg:#2a2e38; --hit-bg:#3d2f14; --input-bg:#16181e; --tab-bg:#16181e; --btn-on-accent:#fff;
  --surface-2:#16181e; --art-bg:#2a2e38; --you-chip-bg:#243056; --turn-bg:#143326; --log-bg:#16181e; --table-head:#1c1f27;
  --needs-line:#3a4150; --switch-off:#4a5160; --switch-knob:#e8eaed; --rule-muted:#9aa3b2; --good:#3dd68c; --msg-bad:#ff8a7a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); }
textarea, input[type=text], input[type=password], input[type=number], input[type=email], select, input.ftext, input.rename, input.sharelink, input.fuser, input.fnum {
  background:var(--input-bg); color:var(--fg); border:1px solid var(--line); border-radius:8px;
}
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
header, main, footer { max-width:960px; margin:0 auto; padding:0 16px; }
header { padding-top:20px; }
h1 { margin:0; font-size:24px; }
h2 { margin:0 0 6px; font-size:17px; }
.sub, .hint, .opt { color:var(--muted); }
.hint, .opt { font-size:13px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:14px 0; }
label { display:block; font-weight:600; }
textarea { width:100%; height:260px; margin-top:6px; font:13px/1.4 ui-monospace,Consolas,monospace; padding:10px; border:1px solid var(--line); border-radius:8px; resize:vertical; }
input[type=text] { width:100%; margin-top:4px; padding:8px; border:1px solid var(--line); border-radius:8px; font:inherit; font-weight:400; }
.row { display:flex; gap:16px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.fields > label { flex:1 1 300px; }
.file { font-weight:400; color:var(--muted); font-size:13px; }
button { background:var(--accent); color:var(--btn-on-accent); border:0; border-radius:8px; padding:10px 28px; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
.busy { color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
.spinner { width:18px; height:18px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error { background:var(--errbg); border-color:var(--err-border); color:var(--err); }
.warnings { margin-top:6px; font-size:13px; color:var(--warn-text); }
.warnings p { margin:2px 0; }
.warn { background:var(--warnbg); border-color:var(--warn-border); }
.warn h2 { color:var(--warn); }
.total { display:flex; gap:24px; align-items:center; }
.big { font-size:56px; font-weight:700; line-height:1; white-space:nowrap; }
.big .of { font-size:20px; color:var(--muted); font-weight:500; margin-left:6px; }
.badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em; }
.badge.ok { background:var(--okbg); color:var(--ok); }
.badge.inc { background:var(--incbg); color:var(--warn); }
.cat { border-top:1px solid var(--line); padding:10px 0; }
.cat:first-child { border-top:0; }
.cat summary { list-style:none; cursor:pointer; display:block; }
.cat summary::-webkit-details-marker { display:none; }
.cat .head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.cat .name, .cat .num { font-size:28px; font-weight:700; line-height:1.15; }
.cat .name::before { content:"▸ "; color:var(--muted); font-size:20px; }
.cat[open] .name::before { content:"▾ "; }
.cat .num { font-variant-numeric:tabular-nums; }
.cat .desc { color:var(--muted); margin:2px 0 6px; }
.bar { display:block; height:8px; background:var(--bar-track); border-radius:6px; overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:6px; }
.pts { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.xrow { margin:4px 0; }
.flags h3 { margin:12px 0 4px; font-size:16px; }
.flags ul { margin:0; padding-left:18px; }
.flags li { margin:6px 0; }
.flags h4 { margin:10px 0 4px; font-size:14px; }
.flags li.flag { margin:10px 0; }
.flags .sev { display:inline-block; padding:0 7px; border-radius:9px; font-size:12px; font-weight:600; color:#fff; vertical-align:1px; }
.flags .sev-none { background:#8a8f98; }
.flags .sev-low { background:#4f8a4f; }
.flags .sev-moderate { background:#c98a1b; }
.flags .sev-high { background:#c0392b; }
.flags .lbl { font-weight:600; }
.flags .flagcards { font-size:13px; margin-top:2px; }
.flags details.rule { font-size:12px; color:var(--rule-muted); margin-top:2px; }
.flags details.rule summary { cursor:pointer; }
.flags .impactfilter { display:block; font-size:13px; margin:4px 0 2px; }
.flags .impactfilter select { font-size:13px; margin-left:4px; }
.notes { margin:8px 0 0 18px; font-size:13.5px; }
.notes li { margin:4px 0; }
.cards { margin:8px 0 0 18px; font-size:13px; color:var(--muted); }
#lines { margin:0; padding-left:18px; }
#lines li { margin:6px 0; }
.unres li { margin:3px 0; }
code { background:var(--code-bg); padding:1px 4px; border-radius:4px; }
.tagrow { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.tag { border:1px solid var(--line); border-radius:8px; padding:6px 10px; flex:1 1 260px; }
.tag[open] { flex-basis:100%; }
.tag summary { cursor:pointer; font-size:17px; }
.tag .tagname { color:var(--muted); font-weight:600; }
.tag .tagval { font-weight:700; padding:1px 9px; border-radius:9px; color:var(--btn-on-accent); background:#555; }
.tagval.b1, .tagval.b2 { background:#4f8a4f; } .tagval.b3 { background:#3b5bdb; } .tagval.b4 { background:#c98a1b; } .tagval.b5 { background:#c0392b; }
.tagval.cHigh { background:#067647; } .tagval.cMedium { background:#c98a1b; } .tagval.cLow { background:#c0392b; }
.tag .more { color:var(--accent); font-size:13px; }
.tagbody { font-size:14px; }
.tagbody .note { background:var(--warnbg); padding:6px 8px; border-radius:6px; }
table.rules { border-collapse:collapse; width:100%; font-size:13.5px; }
table.rules th, table.rules td { border-top:1px solid var(--line); padding:5px 6px; text-align:left; vertical-align:top; }
table.rules tr.hit td { background:var(--hit-bg); }
.pill { display:inline-block; font-size:11px; padding:0 6px; border-radius:8px; background:#c98a1b; color:#fff; }
.legal summary { cursor:pointer; color:var(--ok); }
.problems li { margin:6px 0; }
.flagcards { font-size:13px; margin-top:2px; }
details.unknown summary { cursor:pointer; }
details.unknown h4 { margin:10px 0 2px; }
footer { color:var(--muted); font-size:12px; padding-bottom:24px; }
footer a { color:inherit; }
@media (max-width:640px) { .cat .name, .cat .num { font-size:22px; } .total { flex-direction:column; align-items:flex-start; } }
/* t98: admin page link and the "custom settings active" note */
.adminlink { color:var(--muted); margin-left:6px; font-size:12px; }
.customnote { margin:6px 0 0; display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--warnbg); color:var(--warn); border:1px solid var(--warn-border); }
/* t98: admin page */
body.admin .bar-top { position:sticky; top:0; z-index:5; box-shadow:0 2px 6px rgba(0,0,0,.05); }
button.secondary { background:var(--tab-bg); color:var(--accent); border:1px solid var(--accent); padding:8px 18px; }
button.danger { background:var(--tab-bg); color:var(--err); border:1px solid var(--err-border); padding:8px 18px; margin-left:auto; }
button.small { padding:3px 10px; font-size:12px; font-weight:600; background:var(--tab-bg); color:var(--accent); border:1px solid var(--line); }
label.inline { display:inline-flex; gap:6px; align-items:center; font-weight:400; }
.weights { margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; }
.weights.bad { color:var(--err); }
.weights.good { color:var(--ok); }
.msg { margin-top:10px; padding:8px 12px; border-radius:8px; font-size:13px; }
.msg.ok { background:var(--okbg); color:var(--ok); }
.msg.bad { background:var(--errbg); color:var(--err); }
.msg ul { margin:4px 0 0; padding-left:18px; }
.toc { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; }
.toc a { color:var(--accent); text-decoration:none; }
.toc .n { color:var(--warn); font-weight:700; }
.setting { display:grid; grid-template-columns:1fr 220px; gap:4px 16px; border-top:1px solid var(--line); padding:10px 6px; }
.setting:first-of-type { border-top:0; }
.setting .lbl { font-weight:600; }
.setting .help { color:var(--muted); font-size:13px; }
.setting .ctl { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.setting .ctl input[type=number] { width:110px; padding:6px; border:1px solid var(--line); border-radius:8px; font:inherit; text-align:right; }
.setting .ctl select { padding:6px; border:1px solid var(--line); border-radius:8px; font:inherit; max-width:220px; }
.setting .unit { color:var(--muted); font-size:13px; }
.setting .def { grid-column:2; text-align:right; font-size:12px; color:var(--muted); }
.setting.changed { background:var(--warnbg); border-radius:8px; }
.setting.changed .lbl::after { content:" · changed"; color:var(--warn); font-size:12px; }
.setting.edited { outline:2px dashed var(--accent); outline-offset:-2px; border-radius:8px; }
.setting.invalid input { border-color:var(--err); background:var(--errbg); }
.setting .err { grid-column:1 / -1; color:var(--err); font-size:12px; }
.switch { position:relative; width:42px; height:24px; display:inline-block; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:var(--switch-off); border-radius:24px; cursor:pointer; transition:.15s; }
.switch span::before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--switch-knob); border-radius:50%; transition:.15s; }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span::before { transform:translateX(18px); }
.switch input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.paste textarea { height:90px; }
.minorlist { list-style:none; padding:0; margin:6px 0 0; columns:2 260px; }
.minorlist li { display:flex; justify-content:space-between; gap:8px; padding:3px 0; break-inside:avoid; }
.minorlist .tagx { font-size:11px; color:var(--warn); margin-left:6px; }
@media (max-width:640px) { .setting { grid-template-columns:1fr; } .setting .def { grid-column:1; text-align:left; } .setting .ctl { justify-content:flex-start; } }
/* t101: card picture on hover (display only) */
.cardname { cursor:help; text-decoration:underline dotted rgba(59,91,219,.55); text-underline-offset:2px; }
.cardtip { position:fixed; left:0; top:0; z-index:1000; pointer-events:none; width:244px; max-width:calc(100vw - 16px); display:flex; gap:4px; }
.cardtip.two { width:492px; }
.cardtip img { display:block; width:244px; max-width:100%; min-width:0; flex:1 1 0; height:auto; aspect-ratio:488/680; border-radius:11px; box-shadow:0 6px 22px rgba(0,0,0,.35); background:var(--art-bg); }
.cardtip .cardtext { background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; box-shadow:0 6px 22px rgba(0,0,0,.2); font-size:13px; width:100%; }
.cardtip .cardtext p { margin:6px 0; white-space:pre-line; }
/* t102: "Copy summary" button under the total */
.totalcol { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
button.copysum { min-width:8.5em; }
button.copysum.done { color:var(--good); border-color:var(--good); }
button.copysum.fail { color:var(--err); border-color:var(--err-border); }
/* t107: saved decks (accounts on, signed in only) */
.savebox { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; }
.savebox input { padding:4px 6px; font:inherit; width:16em; max-width:100%; }
.savednote { border-left:4px solid var(--accent); }
.sharedlist { margin-top:8px; }
.sharedlist pre { white-space:pre-wrap; max-height:28em; overflow:auto; font-size:.9em; margin:6px 0 0; }

/* t117: Scryfall card update on the admin page */
.carddata-log { margin-top:10px; max-height:160px; overflow:auto; padding:8px 10px; background:var(--log-bg); border-radius:8px; font-size:12px; white-space:pre-wrap; }
.needs-wrap { max-height:320px; overflow:auto; margin-top:8px; }
table.needs { width:100%; border-collapse:collapse; font-size:13px; }
table.needs th, table.needs td { text-align:left; padding:4px 8px; border-bottom:1px solid var(--needs-line); vertical-align:top; }
table.needs th { position:sticky; top:0; background:var(--table-head); }
a.button { display:inline-block; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:var(--tab-bg); color:inherit; text-decoration:none; font:inherit; cursor:pointer; }
a.button.secondary { background:var(--surface-2); }

/* t121: category tabs stay on one row (scroll sideways if needed); unknown cards are their own section, not a tab */
.cattabs, .resulttabs {
  display:flex; flex-wrap:nowrap; gap:6px; margin:0 0 12px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.cattabs [role="tab"], .resulttabs [role="tab"] {
  flex:1 1 0; min-height:44px; min-width:5.75rem;
  padding:8px 10px; background:var(--tab-bg); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; font:inherit; font-weight:600; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
}
.resulttabs [role="tab"] { align-items:center; text-align:center; min-width:7rem; }
.cattabs [role="tab"] .name { font-size:13px; line-height:1.2; }
.cattabs [role="tab"] .num { font-size:18px; font-variant-numeric:tabular-nums; line-height:1.1; }
.cattabs [role="tab"][aria-selected="true"], .resulttabs [role="tab"][aria-selected="true"] { background:var(--accent); color:var(--btn-on-accent); border-color:var(--accent); }
.cattabs [role="tab"][aria-selected="true"] .num { color:var(--btn-on-accent); }
.cattabs [role="tab"]:focus-visible, .resulttabs [role="tab"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cattabs [role="tab"][aria-selected="true"]:focus-visible, .resulttabs [role="tab"][aria-selected="true"]:focus-visible { outline-color:var(--btn-on-accent); outline-offset:-3px; }
.catpanel { padding-top:2px; }
.catpanel .desc { color:var(--muted); margin:2px 0 6px; }
section.unknown h2 { margin:0 0 6px; }
section.unknown h4 { margin:12px 0 2px; font-size:15px; }
section.unknown > .hint { margin:0 0 8px; }
#resultSections.has-result-tabs {
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:14px 0;
}
#resultSections.has-result-tabs > .result-panel { background:transparent; border:0; padding:0; margin:0; border-radius:0; }
@media (max-width:640px) {
  .cattabs [role="tab"] .name { font-size:12px; }
  .cattabs [role="tab"] .num { font-size:16px; }
}

/* t122: appearance picker in the shared header */
.themesel { float:right; display:flex; align-items:center; gap:8px; margin:0 0 10px 16px; font-size:13px; color:var(--muted); }
.themesel label { font-weight:600; color:var(--muted); }
.themesel select { min-height:44px; min-width:7.5rem; padding:6px 10px; font:inherit; font-weight:600; background:var(--input-bg); color:var(--fg); border:1px solid var(--line); border-radius:8px; }
@media (max-width:640px) { .themesel { float:none; display:flex; margin:8px 0 0; } }

/* t124: game actions on the group page, game status badges, the notification bell */
a.btn { display:inline-block; background:var(--accent); color:var(--btn-on-accent); border:1px solid var(--accent); border-radius:8px; padding:8px 18px; font-weight:600; text-decoration:none; margin:4px 6px 4px 0; }
a.btn.secondary { background:var(--tab-bg); color:var(--accent); }
a.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.badge.bad { background:var(--tab-bg); color:var(--err); border:1px solid var(--err-border); }
.badge.muted { background:var(--tab-bg); color:var(--muted, inherit); border:1px solid var(--line); }
.bell { white-space:nowrap; }
.bell .badge { margin-left:2px; }

/* t125: landing page */
.landing .hero { max-width:640px; margin:24px auto; text-align:center; padding:28px 20px; }
.landing .hero-title { font-size:28px; margin:0 0 8px; }
.landing .hero-line { font-size:17px; margin:0 0 20px; color:var(--fg); }
.landing .hero-acts { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 10px; }
.landing .hero-acts .btn, .landing .hero-score .btn { min-width:9em; padding:12px 22px; font-size:16px; margin:0; }
.landing .hero-score { margin:20px 0 0; }
.landing .hero-who { font-size:17px; margin:0 0 12px; }
.landing ul.quick { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.landing ul.quick .btn { margin:0; }
@media (max-width:480px) {
  .landing .hero { margin:12px auto; padding:20px 14px; }
  .landing .hero-title { font-size:24px; }
  .landing .hero-acts .btn, .landing .hero-score .btn { flex:1 1 100%; }
  .landing ul.quick li { flex:1 1 100%; }
  .landing ul.quick .btn { display:block; }
}

/* t150: home-page Deckadence banner. Scales to the content width; never cropped, so the wordmark and tagline stay whole. */
.site-banner { margin:12px 0 20px; padding:0; max-width:100%; }
.site-banner img { display:block; width:100%; max-width:100%; height:auto; border-radius:12px; object-fit:contain; }
.landing .site-banner { margin:8px 0 12px; }
@media (max-width:480px) {
  .site-banner { margin:8px 0 16px; }
}

/* t126: a group's recorded games page (/games/<group>) */
.games main { max-width:860px; }
.games .gfilters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
.games .gfilters button, .games .gacts button, .games .gacts .btn { min-height:40px; font-size:14px; padding:6px 14px; margin:0; line-height:26px; box-sizing:border-box; }
.games .gfilters button[aria-pressed="true"] { background:var(--accent); color:var(--btn-on-accent); border-color:var(--accent); }
.games .gfilters button[aria-pressed="true"] .badge { background:var(--card); color:var(--fg); }
.games .gplayer { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--muted); }
.games .gplayer select { min-height:40px; padding:6px 10px; font:inherit; background:var(--input-bg); color:var(--fg); border:1px solid var(--line); border-radius:8px; max-width:14rem; }
.games ul.glist { list-style:none; padding:0; margin:8px 0 0; }
.games ul.glist > li { border:1px solid var(--line); border-radius:10px; margin:8px 0; background:var(--card); }
.games ul.glist summary { cursor:pointer; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:12px 14px; min-height:44px; list-style:none; }
.games ul.glist summary::-webkit-details-marker { display:none; }
.games ul.glist summary::before { content:"▸"; color:var(--muted); }
.games ul.glist details[open] > summary::before { content:"▾"; }
.games ul.glist summary:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:10px; }
.games .gdate { font-weight:700; }
.games .gwho { font-weight:600; }
.games .gmeta { color:var(--muted); font-size:13px; }
.games .gbody { padding:0 14px 12px; }
.games .tablewrap { overflow-x:auto; }
.games table.gseats { width:100%; border-collapse:collapse; font-size:14px; }
.games table.gseats th, .games table.gseats td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.games table.gseats thead th { color:var(--muted); font-weight:600; font-size:12px; background:var(--table-head); }
.games table.gseats tr.win th, .games table.gseats tr.win td { background:var(--okbg); color:var(--fg); font-weight:600; }
.games table.gseats tr.gone { opacity:.6; }
.games .gnote { font-style:italic; overflow-wrap:anywhere; }
.games .gacts { display:flex; flex-wrap:wrap; gap:8px; }
.games .gacts button.danger { margin-left:0; }
.games .msg.ok { color:var(--ok); } .games .msg.bad { color:var(--err); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:480px) {
  .games .gfilters button { flex:1 1 100%; }
  .games .gplayer { flex:1 1 100%; }
  .games .gplayer select { flex:1; max-width:none; }
  .games table.gseats { font-size:13px; }
}

/* t127: group page members list with small deck thumbnails */
ul.mlist { list-style:none; margin:8px 0 0; padding:0; }
ul.mlist > li.mrow { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 0; border-bottom:1px solid var(--line); }
ul.mlist > li.mrow:last-child { border-bottom:0; }
.mrow .avatar { flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; }
.mrow .mwho { flex:1 1 12rem; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.mrow .mname { font-weight:700; overflow-wrap:anywhere; }
.mrow .mcount { flex-basis:100%; color:var(--muted); font-size:13px; }
.mrow ul.minis { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }
.mrow a.mini { display:flex; flex-direction:column; width:84px; text-decoration:none; color:inherit; border-radius:8px; }
.mrow a.mini:focus-visible, .mrow a.more:focus-visible, .chips a.chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mrow a.mini .art { position:relative; display:block; width:84px; height:61px; border-radius:8px; overflow:hidden; background:var(--art-bg); }
.mrow a.mini .art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mrow a.mini .art .ini { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.mrow a.mini .art.has-img .ini { visibility:hidden; }
.mrow a.mini:hover .art { box-shadow:0 0 0 2px var(--accent); }
.mrow a.mini .mdeck { font-size:12px; font-weight:600; line-height:1.25; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow a.mini .mscore { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mrow a.more { white-space:nowrap; display:flex; align-items:center; justify-content:center; width:61px; height:61px; border-radius:8px; border:1px dashed var(--line); font-weight:700; font-size:13px; text-decoration:none; color:var(--accent); }
.av0 { background:hsl(220 55% 45%); } .av1 { background:hsl(160 50% 33%); } .av2 { background:hsl(350 55% 45%); } .av3 { background:hsl(275 45% 48%); }
.av4 { background:hsl(30 70% 40%); } .av5 { background:hsl(195 65% 35%); } .av6 { background:hsl(330 45% 42%); } .av7 { background:hsl(95 40% 33%); }
p.alldecks { margin-top:12px; }
.gdecks { margin-top:18px; border-top:1px solid var(--line); padding-top:6px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips a.chip { display:inline-block; padding:6px 12px; min-height:32px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:var(--accent); background:var(--tab-bg); font-size:13px; font-weight:600; }
.chips a.chip[aria-current="page"] { background:var(--accent); color:var(--btn-on-accent); border-color:var(--accent); }
@media (max-width:480px) {
  .mrow ul.minis { flex-basis:100%; padding-left:0; gap:6px; }
  .mrow a.mini, .mrow a.mini .art { width:72px; }
  .mrow a.mini .art { height:53px; }
  .mrow a.more { width:53px; height:53px; }
}

/* t131: one site header on every page (SiteNav.cs): brand · signed-in cluster · Appearance, then the nav row.
   Narrow screens: the bar wraps and the nav row scrolls sideways (no hamburger; every item stays one swipe away). */
.skip { position:absolute; left:-9999px; top:8px; z-index:100; padding:10px 16px; border-radius:999px; background:var(--card); color:var(--fg); border:2px solid var(--accent); font-weight:700; }
.skip:focus { left:12px; }
header.site { padding-top:10px; }
header .sitebar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
header .sitebar .brand { margin-right:auto; font-size:20px; font-weight:900; letter-spacing:-.01em; color:var(--fg); text-decoration:none; padding:6px 0; }
header .sn-user { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; font-size:13px; color:var(--muted); }
header .sn-user b { color:var(--fg); }
header .sn-user a, header .sn-user button.sn-link { color:var(--fg); font-weight:700; text-decoration:none; background:none; border:0; padding:4px 0; font:inherit; font-weight:700; cursor:pointer; border-bottom:2px solid transparent; border-radius:0; min-height:32px; }
header .sn-user a:hover, header .sn-user button.sn-link:hover, header .sn-user a[aria-current="page"] { border-bottom-color:var(--rs-primary, var(--accent)); }
header .sitebar .themesel { float:none; margin:0; }
header .sitebar .themesel select { min-height:36px; }
.sitenav { margin:6px 0 0; border-bottom:1px solid var(--line); }
.sitenav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:nowrap; gap:2px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sitenav ul::-webkit-scrollbar { display:none; }
.sitenav li { flex:0 0 auto; }
.sitenav a { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 12px; white-space:nowrap; color:var(--fg); text-decoration:none; font-weight:600; border-bottom:3px solid transparent; }
.sitenav a:hover { border-bottom-color:var(--line); }
.sitenav a[aria-current="page"] { font-weight:800; border-bottom-color:var(--rs-primary, var(--accent)); }
.sitenav a:focus-visible { outline-offset:-3px; }
.sitenav svg { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.sitenav .badge { margin-left:0; }
header.site h1.pagetitle { margin:14px 0 2px; font-size:24px; }
header.site > .sub, header.site > .customnote { margin-top:6px; }
body.live header.site h1.pagetitle { margin:8px 0 0; font-size:20px; }
body.live .sitenav a { min-height:40px; padding:6px 10px; }
@media (max-width:640px) {
  header .sitebar .brand { font-size:18px; flex-basis:100%; }
  header .sn-user { flex:1 1 100%; }
  .sitenav a { padding:8px 10px; }
}

/* t151: compact Deckadence wordmark in the site nav (same left slot, links home). Sized to the header
   so it does not dominate or wrap the swipeable nav. The home-page hero banner is unchanged. */
header .sitebar .brand.brand-logo {
  display: inline-flex;
  align-items: center;
  padding: 2px 0;
  flex: 0 1 auto;
  line-height: 0;
}
header .sitebar .brand.brand-logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
@media (max-width:640px) {
  header .sitebar .brand.brand-logo { flex-basis: auto; font-size: 0; }
  header .sitebar .brand.brand-logo img { height: 36px; max-width: min(140px, 42vw); }
}

/* t132: the group scoreboard (Groups page, standings box): a plain table in the t130 look; scrolls sideways on narrow screens */
.scorewrap { overflow-x:auto; margin:6px 0 12px; }
table.scoreboard { border-collapse:collapse; width:100%; font-size:14px; }
table.scoreboard th, table.scoreboard td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.scoreboard thead th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
table.scoreboard tbody th { font-weight:700; color:var(--fg); }
table.scoreboard td:nth-child(3), table.scoreboard td:nth-child(4), table.scoreboard td:nth-child(5) { font-variant-numeric:tabular-nums; }
table.scoreboard tbody tr:first-child td:first-child { color:var(--rs-primary, var(--accent)); font-weight:800; }
/* t132: the signed-in name links to your profile */
header .sn-user a.sn-me { padding:0; min-height:0; font-weight:inherit; border-bottom:2px solid transparent; }
header .sn-user a.sn-me:hover, header .sn-user a.sn-me[aria-current="page"] { border-bottom-color:var(--rs-primary, var(--accent)); }
/* t133: the scoreboard page's standings fold */
details.standmore { margin-top:14px; }
details.standmore > summary { cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; }
/* t134: /record/<group> shows only the Record a game form (the Groups page in record mode) */
body.recordmode #page > section:not(#detail), body.recordmode #detail > :not(#matchesArea), body.recordmode #matchesArea > :not(#recordForm):not(.recordback) { display:none !important; }
/* t134: the live page's start form */
#startForm .flist label { min-height:44px; display:inline-flex; align-items:center; gap:8px; }

/* t135: "Live game in progress — Return" in the site header */
header .sitebar .sn-live { order:0; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 14px; border-radius:999px;
  background:var(--rs-primary, var(--accent)); color:#141414; font-weight:800; text-decoration:none; font-size:14px; }
header .sitebar .sn-live .dot { width:9px; height:9px; border-radius:50%; background:#c62828; box-shadow:0 0 0 3px rgba(198,40,40,.25); }
header .sitebar .sn-live:hover { filter:brightness(1.05); }
/* t135: the live window's own header bar */
.livebar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:6px 0 4px; }
.livebar .lbstatus { color:var(--muted); font-size:14px; flex:1 1 12em; }
.livebar .themesel { float:none; margin:0; }
/* t135: the saved deck's action bar (under the nav on /score?saved=) */
.deckbar { padding:12px 16px; }
.deckbar .dbrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.deckbar .dbrow + .dbrow { margin-top:8px; }
.deckbar .dbname { margin-right:auto; font-size:17px; overflow-wrap:anywhere; }
.deckbar .dbvis select { margin-left:6px; }
.deckbar .sharelink { flex:1 1 16em; min-width:0; }
.deckbar .msg { margin:8px 0 0; }
.viewpick button[aria-pressed="true"] { background:var(--accent); color:var(--btn-on-accent); border-color:var(--accent); }   /* t135 */

/* t140: type-ahead under the "commander if unlisted" box (lobby and record form) */
.cmd-suggest { position: relative; width: 100%; max-width: 28rem; }
.cmd-suggest:has(input[hidden]) { display: none; }
.cmd-suggest input.ftext { width: 100%; max-width: 100%; box-sizing: border-box; }
.cmd-suggest .cmd-list {
  position: absolute; left: 0; right: 0; z-index: 30;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--card, #fff); color: var(--fg, inherit);
  border: 1px solid var(--line, #e3e6ea); border-radius: 8px;
  max-height: 240px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.cmd-suggest .cmd-list li {
  min-height: 44px; display: flex; align-items: center;
  padding: 8px 12px; cursor: pointer;
}
.cmd-suggest .cmd-list li[aria-selected="true"],
.cmd-suggest .cmd-list li:hover { background: var(--surface-2, #f1f3f5); }
.cmd-suggest .cmd-hint { margin: 4px 0 0; font-size: 13px; color: var(--msg-bad, #c92a2a); }

/* t152: panel "More information" icons. Rules under html.panel-info-icons apply only while the switch is on. */
.panel-info-btn { display: none; }
html.panel-info-icons .panel-intro { display: none; }
html.panel-info-icons .panel-info-pop .panel-intro { display: block; }
html.panel-info-icons .panel-info-pop .panel-intro > :first-child { margin-top: 0; }
html.panel-info-icons .panel-info-pop .panel-intro > :last-child { margin-bottom: 0; }
html.panel-info-icons .panel-intro-card { display: none; }
html.panel-info-icons .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  position: relative;
}
html.panel-info-icons .panel-head > .panel-info-btn { margin-left: 0; }
html.panel-info-icons .panel-head:not(:has(.deck-list-tools:not([hidden]))) > .panel-info-btn { margin-left: auto; }
html.panel-info-icons .panel-head > h1,
html.panel-info-icons .panel-head > h2,
html.panel-info-icons .panel-head > h3,
html.panel-info-icons .panel-head > h4 {
  flex: 1 1 auto;
  min-width: 0;
}
html.panel-info-icons .panel-head-icon-only { justify-content: flex-end; margin: 0; }
html.panel-info-icons .panel-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -8px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
html.panel-info-icons .panel-info-btn:hover,
html.panel-info-icons .panel-info-btn:focus-visible {
  color: var(--fg);
  background: var(--surface-2);
}
html.panel-info-icons .panel-info-btn[aria-expanded="true"] {
  color: var(--accent);
  background: var(--surface-2);
}
html.panel-info-icons .panel-info-pop {
  position: absolute;
  right: 0;
  top: calc(100% - 4px);
  z-index: 40;
  width: max-content;
  max-width: min(36em, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: 13px;
  line-height: 1.45;
}
html.panel-info-icons .panel-info-pop .hint { margin: 6px 0; }
html.panel-info-icons .panel-info-pop p { margin: 6px 0; }
html[data-theme="dark"] .panel-info-pop { box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* t154: heading row still flexes when only the sort/filter icons are present (info-icon switch off). */
.panel-head:has(.deck-list-tools:not([hidden])) {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  position: relative;
}
.panel-head:has(.deck-list-tools:not([hidden])) > h1,
.panel-head:has(.deck-list-tools:not([hidden])) > h2,
.panel-head:has(.deck-list-tools:not([hidden])) > h3,
.panel-head:has(.deck-list-tools:not([hidden])) > h4 {
  flex: 1 1 auto;
  min-width: 0;
}

/* t153: first-class sort + compact filter bar on My decks and profile deck grids */
.deckfilters { display:flex; flex-direction:column; gap:10px; margin:10px 0 8px; }
.decksort, .deckfilter-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px; }
.decksort { padding-bottom:10px; border-bottom:1px solid var(--line); }
.df-heading { font-weight:700; font-size:14px; color:var(--fg); align-self:center; min-width:3.5em; }
.deckfilters label { display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600; color:var(--muted); }
.deckfilters input, .deckfilters select { font:inherit; font-size:14px; font-weight:400; color:var(--fg); background:var(--input-bg, var(--card)); border:1px solid var(--line); border-radius:8px; min-height:40px; padding:6px 8px; box-sizing:border-box; }
.deckfilters input[type="search"] { min-width:12em; }
.deckfilters .df-range { display:flex; align-items:center; gap:4px; }
.deckfilters .df-range input { width:5.5em; }
.deckfilters .df-dash { color:var(--muted); font-weight:400; }
.deckfilters .df-date input { width:11em; }
.deckfilters .df-reset { min-height:40px; margin:0; }
.df-sortby { display:flex; flex-wrap:wrap; gap:6px; }
.df-sortby button { min-height:40px; min-width:44px; margin:0; }
.df-sortby button[aria-pressed="true"] { background:var(--accent); color:var(--btn-on-accent, #fff); border-color:var(--accent); }
.df-sortdir select { min-width:11em; }
.decktile .dwin { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
@media (max-width:520px) {
  .df-heading { flex:1 1 100%; min-width:0; }
  .df-sortby { flex:1 1 100%; }
  .df-sortby button { flex:1 1 calc(50% - 8px); }
  .df-sortdir { flex:1 1 100%; }
  .deckfilter-row label { flex:1 1 calc(50% - 10px); min-width:0; }
  .deckfilter-row .df-name { flex-basis:100%; }
  .deckfilters input, .deckfilters select { width:100%; max-width:100%; }
  .deckfilters .df-range input { width:auto; flex:1; }
  .deckfilters .df-reset { flex:1 1 100%; }
}

/* t154: sort and filter as 44x44 heading icons with vertically scrolling popovers */
.deck-list-tools {
  display: inline-flex;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 0;
  margin-left: auto;
  position: static;
}
.deck-list-tools[hidden] { display: none; }
.deck-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 44px;
  margin: -8px 0 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.deck-tool-btn:hover,
.deck-tool-btn:focus-visible {
  color: var(--fg);
  background: var(--surface-2, #f1f3f5);
}
.deck-tool-btn[aria-expanded="true"] {
  color: var(--accent);
  background: var(--surface-2, #f1f3f5);
}
.deck-tool-btn.is-active { color: var(--accent); }
.deck-tool-btn.is-active::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--card);
}
.deck-tool-pop {
  position: absolute;
  right: 0;
  top: calc(100% - 4px);
  z-index: 40;
  box-sizing: border-box;
  width: max-content;
  max-width: min(22em, calc(100vw - 24px));
  max-height: min(70vh, 40em);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: 13px;
  line-height: 1.45;
}
html[data-theme="dark"] .deck-tool-pop { box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.deck-tool-pop .decksort,
.deck-tool-pop .deckfilter-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  border: 0;
  margin: 0;
}
.deck-tool-pop .df-heading { align-self: flex-start; min-width: 0; }
.deck-tool-pop .df-sortby { display: flex; flex-wrap: wrap; gap: 6px; }
.deck-tool-pop .df-sortby button { flex: 1 1 calc(50% - 8px); min-height: 40px; min-width: 44px; margin: 0; }
.deck-tool-pop label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.deck-tool-pop input,
.deck-tool-pop select {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--fg);
  background: var(--input-bg, var(--card));
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 6px 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.deck-tool-pop .df-range { display: flex; align-items: center; gap: 4px; }
.deck-tool-pop .df-range input { width: auto; flex: 1; }
.deck-tool-pop .df-dash { color: var(--muted); font-weight: 400; }
.deck-tool-pop .df-reset { min-height: 40px; margin: 0; width: 100%; }


/* t130: restyle layer, after Eric's Audible screenshots: near-black panels, bold white headings, orange pill buttons,
   pill chips, rounded dark inputs, underlined result tabs, light-blue links, clear focus rings. Light mode uses the same
   language on a light background (AA contrast). The server appends this file to app.css when PowerRating:Ui:Restyle is on
   (the default); with it off, app.css is served alone = the t129 look. Paint only: no element is hidden, moved or
   resized away (sizes stay those of app.css and each page), so every piece of information stays where it was.
   "@R" rules carry an extra id-level :not() so they win over the per-page <style> blocks' colours (never inline style=""
   colours, which carry data such as category colours). */
:root {
  --bg:#f6f6f3; --fg:#141414; --muted:#585858; --card:#ffffff; --line:#e0e0dc;
  --accent:#a14e00; --input-bg:#ffffff; --tab-bg:#ffffff; --surface-2:#f1f1ee; --table-head:#f3f3f0;
  --bar-track:#e7e7e3; --code-bg:#efefeb; --art-bg:#e4e4e0; --log-bg:#f3f3f0; --needs-line:#e0e0dc;
  --you-chip-bg:#ffe9c7; --btn-on-accent:#ffffff; --rule-muted:#585858; --switch-off:#b9b9b4;
  --rs-primary:#f7991c; --rs-primary-hover:#ffad42; --rs-primary-active:#e2870c; --rs-on-primary:#141414;
  --rs-link:#0b57d0; --rs-link-hover:#083f99; --rs-focus:#0b57d0; --rs-ctl-line:#8c8c86; --rs-ctl-line-hover:#141414;
  --rs-hover:rgba(0,0,0,.05); --rs-chip-on-bg:#141414; --rs-chip-on-fg:#ffffff; --rs-tab-on:#141414;
  --rs-label:#2f5fa8; --rs-shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --rs-head-font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --rs-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --bg:#0f0f0f; --fg:#f5f5f5; --muted:#a8a8a8; --card:#181818; --line:#2a2a2a;
  --accent:#ffa41c; --input-bg:#121212; --tab-bg:#181818; --surface-2:#141414; --table-head:#1f1f1f;
  --bar-track:#2c2c2c; --code-bg:#262626; --art-bg:#262626; --log-bg:#141414; --needs-line:#2a2a2a;
  --you-chip-bg:#3a2a10; --btn-on-accent:#ffffff; --rule-muted:#a8a8a8; --switch-off:#4a4a4a; --switch-knob:#f5f5f5;
  --hit-bg:#33270f; --okbg:#10291d; --errbg:#331716; --warnbg:#2e2310; --incbg:#2e2310;
  --rs-link:#8ab4f8; --rs-link-hover:#b3cdfb; --rs-focus:#ffb84d; --rs-ctl-line:#6b6b6b; --rs-ctl-line-hover:#d6d6d6;
  --rs-hover:rgba(255,255,255,.07); --rs-chip-on-bg:#f5f5f5; --rs-chip-on-fg:#141414; --rs-tab-on:#ffffff;
  --rs-label:#8ab4f8; --rs-shadow:none;
  --rs-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5f5f5' stroke-width='2'/%3E%3C/svg%3E");
}

/* type: bold headings, quiet secondary text */
body { font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
html:not(#rs-off) h1, html:not(#rs-off) h2, html:not(#rs-off) h3, html:not(#rs-off) .hero-title { font-family:var(--rs-head-font); font-weight:800; letter-spacing:-.01em; color:var(--fg); }
html:not(#rs-off) h1 { font-weight:900; }
html:not(#rs-off) h4 { font-weight:700; }

/* links: light blue (dark) / deep blue (light); underline on hover */
html:not(#rs-off) a { color:var(--rs-link); text-decoration-thickness:1px; text-underline-offset:2px; }
html:not(#rs-off) a:hover { color:var(--rs-link-hover); }
html:not(#rs-off) footer a { color:inherit; }
html:not(#rs-off) a.decktile, html:not(#rs-off) .mrow a.mini { color:inherit; text-decoration:none; }
/* t131 site nav: nav links in the heading colour (not link blue), the Sign out button stays a plain text button */
html:not(#rs-off) .sitenav a, html:not(#rs-off) header .sitebar .brand, html:not(#rs-off) header .sn-user a { color:var(--fg); text-decoration:none; }
html:not(#rs-off) header .sitebar .sn-live, html:not(#rs-off) header .sitebar .sn-live:hover { color:#141414; text-decoration:none; }
html:not(#rs-off) .sitenav a:hover, html:not(#rs-off) header .sn-user a:hover { color:var(--fg); }
html:not(#rs-off) header .sn-user button.sn-link { background:transparent; color:var(--fg); border:0; border-bottom:2px solid transparent; border-radius:0; }
html:not(#rs-off) header .sn-user button.sn-link:hover:not(:disabled) { background:transparent; color:var(--fg); border-color:transparent; border-bottom-color:var(--rs-primary); }
html:not(#rs-off) .sitenav a[aria-current="page"] { color:var(--rs-tab-on); }
html:not(#rs-off) .sitenav a:focus-visible { outline-offset:-3px; }

/* header: a bar like the screenshots' top nav, bold nav links with an orange underline on hover */
html:not(#rs-off) body > header { border-bottom:1px solid var(--line); padding-bottom:12px; }
html:not(#rs-off) header .sub a { color:var(--fg); font-weight:700; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:1px; }
html:not(#rs-off) header .sub a:hover { border-bottom-color:var(--rs-primary); color:var(--fg); }
html:not(#rs-off) header .sub a[aria-current="page"] { border-bottom-color:var(--rs-primary); }

/* cards / panels: slightly lighter than the page, thin divider border, rounded */
html:not(#rs-off) .card, html:not(#rs-off) #resultSections.has-result-tabs { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--rs-shadow); }
html:not(#rs-off) #resultSections.has-result-tabs > .result-panel { box-shadow:none; }
html:not(#rs-off) .card.error { background:var(--errbg); border-color:var(--err-border); }
html:not(#rs-off) .card.warn { background:var(--warnbg); border-color:var(--warn-border); }
html:not(#rs-off) .savednote { border-left:4px solid var(--rs-primary); }

/* buttons: orange pills (primary), outline pills (secondary / small), red outline (danger) */
html:not(#rs-off) button, html:not(#rs-off) a.btn, html:not(#rs-off) input[type=submit], html:not(#rs-off) input[type=file]::file-selector-button {
  background:var(--rs-primary); color:var(--rs-on-primary); border:1px solid var(--rs-primary); border-radius:999px;
  font-weight:700; transition:background-color .12s, border-color .12s, color .12s;
}
html:not(#rs-off) button:hover:not(:disabled), html:not(#rs-off) a.btn:hover { background:var(--rs-primary-hover); border-color:var(--rs-primary-hover); color:var(--rs-on-primary); text-decoration:none; }
html:not(#rs-off) button:active:not(:disabled), html:not(#rs-off) a.btn:active { background:var(--rs-primary-active); border-color:var(--rs-primary-active); }
html:not(#rs-off) button.secondary, html:not(#rs-off) button.small, html:not(#rs-off) a.btn.secondary, html:not(#rs-off) a.button, html:not(#rs-off) a.button.secondary {
  background:transparent; color:var(--fg); border:1px solid var(--rs-ctl-line); border-radius:999px; font-weight:700;
}
html:not(#rs-off) button.secondary:hover:not(:disabled), html:not(#rs-off) button.small:hover:not(:disabled), html:not(#rs-off) a.btn.secondary:hover, html:not(#rs-off) a.button:hover {
  background:var(--rs-hover); border-color:var(--rs-ctl-line-hover); color:var(--fg);
}
html:not(#rs-off) button.danger, html:not(#rs-off) button.small.danger { background:transparent; color:var(--err); border:1px solid var(--err-border); border-radius:999px; }
html:not(#rs-off) button.danger:hover:not(:disabled) { background:var(--errbg); border-color:var(--err); color:var(--err); }
html:not(#rs-off) button.copysum.done { color:var(--good); border-color:var(--good); }
html:not(#rs-off) button.copysum.fail { color:var(--err); border-color:var(--err-border); }
html:not(#rs-off) button:disabled { opacity:.5; }
html:not(#rs-off) input[type=file] { color:var(--muted); }
html:not(#rs-off) input[type=file]::file-selector-button { padding:6px 14px; margin-right:8px; cursor:pointer; background:transparent; color:var(--fg); border-color:var(--rs-ctl-line); }
button.small { padding:4px 12px; }
a.btn { border-radius:999px; }

/* inputs and selects: dark/white fields, 1px visible border, rounded; focus = coloured border + ring */
html:not(#rs-off) textarea, html:not(#rs-off) input[type=text], html:not(#rs-off) input[type=password], html:not(#rs-off) input[type=number], html:not(#rs-off) input[type=email], html:not(#rs-off) input[type=search], html:not(#rs-off) input[type=date], html:not(#rs-off) input:not([type]), html:not(#rs-off) select {
  background-color:var(--input-bg); color:var(--fg); border:1px solid var(--rs-ctl-line); border-radius:8px;
}
html:not(#rs-off) input[type=search] { border-radius:999px; }
html:not(#rs-off) textarea:hover, html:not(#rs-off) input[type=text]:hover, html:not(#rs-off) input[type=password]:hover, html:not(#rs-off) input[type=number]:hover, html:not(#rs-off) input[type=email]:hover, html:not(#rs-off) input[type=date]:hover, html:not(#rs-off) select:hover { border-color:var(--rs-ctl-line-hover); }
html:not(#rs-off) textarea:focus, html:not(#rs-off) input:focus, html:not(#rs-off) select:focus { border-color:var(--rs-focus); }
html:not(#rs-off) select { -webkit-appearance:none; appearance:none; background-image:var(--rs-arrow); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; }
html:not(#rs-off) select[multiple] { background-image:none; padding-right:6px; }
html:not(#rs-off) ::placeholder { color:var(--muted); opacity:1; }
html:not(#rs-off) input[type=checkbox], html:not(#rs-off) input[type=radio] { accent-color:var(--rs-primary); }

/* focus: one clear ring everywhere (keyboard only) */
html:not(#rs-off) :focus-visible { outline:3px solid var(--rs-focus); outline-offset:2px; }
html:not(#rs-off) a:focus-visible { border-radius:4px; }
html:not(#rs-off) .cattabs [role="tab"]:focus-visible, html:not(#rs-off) .resulttabs [role="tab"]:focus-visible { outline:3px solid var(--rs-focus); outline-offset:2px; }

/* result tabs: underlined tab row with a bold active tab (same buttons, same keyboard behaviour) */
html:not(#rs-off) .resulttabs { border-bottom:1px solid var(--line); gap:4px; }
html:not(#rs-off) .resulttabs [role="tab"] { background:transparent; color:var(--muted); border:0; border-bottom:3px solid transparent; border-radius:0; font-weight:700; }
html:not(#rs-off) .resulttabs [role="tab"]:hover { color:var(--fg); background:var(--rs-hover); }
html:not(#rs-off) .resulttabs [role="tab"][aria-selected="true"] { background:transparent; color:var(--rs-tab-on); border-bottom-color:var(--rs-primary); font-weight:800; }

/* category tabs: one scrolling row of rounded chips; the chosen one is a light filled chip */
html:not(#rs-off) .cattabs [role="tab"] { background:transparent; color:var(--fg); border:1px solid var(--rs-ctl-line); border-radius:14px; }
html:not(#rs-off) .cattabs [role="tab"]:hover { background:var(--rs-hover); border-color:var(--rs-ctl-line-hover); }
html:not(#rs-off) .cattabs [role="tab"][aria-selected="true"] { background:var(--rs-chip-on-bg); color:var(--rs-chip-on-fg); border-color:var(--rs-chip-on-bg); }
html:not(#rs-off) .cattabs [role="tab"][aria-selected="true"] .num, html:not(#rs-off) .cattabs [role="tab"][aria-selected="true"] .name { color:var(--rs-chip-on-fg); }

/* filter chips (group page, games list) */
html:not(#rs-off) .chips a.chip, html:not(#rs-off) .games .gfilters button { background:transparent; color:var(--fg); border:1px solid var(--rs-ctl-line); border-radius:999px; text-decoration:none; }
html:not(#rs-off) .chips a.chip:hover, html:not(#rs-off) .games .gfilters button:hover:not(:disabled) { background:var(--rs-hover); border-color:var(--rs-ctl-line-hover); color:var(--fg); }
html:not(#rs-off) .chips a.chip[aria-current="page"], html:not(#rs-off) .games .gfilters button[aria-pressed="true"], html:not(#rs-off) .viewpick button[aria-pressed="true"] { background:var(--rs-chip-on-bg); color:var(--rs-chip-on-fg); border-color:var(--rs-chip-on-bg); }
html:not(#rs-off) .games .gfilters button[aria-pressed="true"] .badge { background:var(--rs-chip-on-fg); color:var(--rs-chip-on-bg); }

/* badges and pills */
html:not(#rs-off) .badge { border-radius:999px; }
html:not(#rs-off) .you-label { background:var(--you-chip-bg); color:var(--fg); }

/* tables: header cells on a slightly different background, thin dividers, row hover */
html:not(#rs-off) table th { background:var(--table-head); color:var(--muted); font-weight:700; }
html:not(#rs-off) table td, html:not(#rs-off) table th { border-color:var(--line); }
html:not(#rs-off) table.rules tr:hover td, html:not(#rs-off) .decks tbody tr:hover td, html:not(#rs-off) table.needs tbody tr:hover td { background:var(--rs-hover); }
html:not(#rs-off) table.rules tr.hit td { background:var(--hit-bg); }
html:not(#rs-off) .games table.gseats tr.win th, html:not(#rs-off) .games table.gseats tr.win td { background:var(--okbg); }

/* list rows (groups, friends, notifications, decks): dividers in the theme colour */
html:not(#rs-off) ul.flist li, html:not(#rs-off) .acct ul.keys li, html:not(#rs-off) .decks th, html:not(#rs-off) .decks td { border-bottom-color:var(--line); }
html:not(#rs-off) .live .flist li { border-top-color:var(--line); }

/* collapsible rows / disclosure boxes */
html:not(#rs-off) .tag, html:not(#rs-off) .games ul.glist > li { border-color:var(--line); border-radius:10px; background:var(--card); }
html:not(#rs-off) .games ul.glist summary:hover, html:not(#rs-off) .cat summary:hover { background:var(--rs-hover); }

/* image tiles: rounded, orange ring on hover/focus */
html:not(#rs-off) .decktile { border-radius:10px; border-color:var(--line); }
html:not(#rs-off) .decktile:hover, html:not(#rs-off) .decktile:focus-visible { outline:2px solid var(--rs-primary); box-shadow:0 6px 18px rgba(0,0,0,.25); }
html:not(#rs-off) .mrow a.mini:hover .art { box-shadow:0 0 0 2px var(--rs-primary); }
html:not(#rs-off) .mrow a.more { border-color:var(--rs-ctl-line); color:var(--rs-link); }

/* progress bars: thin; their fill colours stay as the page sets them */
.bar { height:6px; border-radius:999px; }
.bar > span { border-radius:999px; }

/* switches (admin), small labels like the screenshots' muted-blue group labels */
html:not(#rs-off) .switch input:checked + span { background:var(--rs-primary); }
html:not(#rs-off) .switch input:focus-visible + span { outline:3px solid var(--rs-focus); }
html:not(#rs-off) .setting.edited { outline-color:var(--rs-primary); }
html:not(#rs-off) .toc a, html:not(#rs-off) .tag .more { color:var(--rs-link); }
html:not(#rs-off) .themesel label, html:not(#rs-off) .live .life-label, html:not(#rs-off) .games .gplayer { color:var(--muted); }
html:not(#rs-off) .flags h4, html:not(#rs-off) section.unknown h4 { color:var(--rs-label); }

/* live board: same big touch targets; only the active seat is ringed (t143: your seat is the You pill, not the same ring) */
html:not(#rs-off) .live .seat { border-color:var(--line); border-radius:14px; }
html:not(#rs-off) .live .seat.active { box-shadow:0 0 0 2px var(--rs-primary); }
html:not(#rs-off) .live .turn-pill { background:var(--turn-bg); color:var(--ok); }

/* landing */
html:not(#rs-off) .landing .hero { border-radius:16px; }

/* code / logs */
html:not(#rs-off) code { background:var(--code-bg); border-radius:6px; }
html:not(#rs-off) .carddata-log { border:1px solid var(--line); }

/* t152: info-icon button must not pick up the orange pill colours (size lives in app.css; this layer is paint only) */
html.panel-info-icons:not(#rs-off) button.panel-info-btn,
html:not(#rs-off) button.panel-info-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-weight: 600;
}
html.panel-info-icons:not(#rs-off) button.panel-info-btn:hover:not(:disabled),
html.panel-info-icons:not(#rs-off) button.panel-info-btn:focus-visible,
html:not(#rs-off) button.panel-info-btn:hover:not(:disabled) {
  background: var(--surface-2, var(--rs-hover, #f1f3f5));
  color: var(--fg);
  border-color: transparent;
}
html.panel-info-icons:not(#rs-off) button.panel-info-btn[aria-expanded="true"],
html:not(#rs-off) button.panel-info-btn[aria-expanded="true"] {
  background: var(--surface-2, var(--rs-hover, #f1f3f5));
  color: var(--accent);
  border-color: transparent;
}
html.panel-info-icons:not(#rs-off) .panel-info-pop {
  background: var(--card);
  color: var(--fg);
  border-color: var(--line);
}

/* t153: filter bar follows the restyle inputs and pills */
html:not(#rs-off) .deckfilters input, html:not(#rs-off) .deckfilters select { background:var(--input-bg); color:var(--fg); border-color:var(--rs-ctl-line, var(--line)); border-radius:14px; }
html:not(#rs-off) .deckfilters input:focus-visible, html:not(#rs-off) .deckfilters select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
html:not(#rs-off) .deckfilters .df-reset { border-radius:999px; }

html:not(#rs-off) .df-sortby button { background:transparent; color:var(--fg); border:1px solid var(--rs-ctl-line); border-radius:999px; }
html:not(#rs-off) .df-sortby button:hover { background:var(--rs-hover); border-color:var(--rs-ctl-line-hover); }
html:not(#rs-off) .df-sortby button[aria-pressed="true"] { background:var(--rs-chip-on-bg); color:var(--rs-chip-on-fg); border-color:var(--rs-chip-on-bg); }
html:not(#rs-off) .decksort { border-bottom-color:var(--line); }

/* t154: sort/filter icon buttons follow the t152 info-icon paint (size lives in app.css) */
html:not(#rs-off) button.deck-tool-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-weight: 600;
}
html:not(#rs-off) button.deck-tool-btn:hover:not(:disabled),
html:not(#rs-off) button.deck-tool-btn:focus-visible {
  background: var(--surface-2, var(--rs-hover, #f1f3f5));
  color: var(--fg);
  border-color: transparent;
}
html:not(#rs-off) button.deck-tool-btn[aria-expanded="true"],
html:not(#rs-off) button.deck-tool-btn.is-active {
  background: var(--surface-2, var(--rs-hover, #f1f3f5));
  color: var(--accent);
  border-color: transparent;
}
html:not(#rs-off) .deck-tool-pop {
  background: var(--card);
  color: var(--fg);
  border-color: var(--line);
}
html:not(#rs-off) .deck-tool-pop input,
html:not(#rs-off) .deck-tool-pop select {
  background: var(--input-bg);
  color: var(--fg);
  border-color: var(--rs-ctl-line, var(--line));
  border-radius: 14px;
}
html:not(#rs-off) .deck-tool-pop input:focus-visible,
html:not(#rs-off) .deck-tool-pop select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html:not(#rs-off) .deck-tool-pop .df-reset { border-radius: 999px; }