/* Three looks over one layout.
   A look changes colours, type, shapes, the table, the deck and the penalty markers — never the structure or the logic.
   The attribute sits on <html>; putting it on any other element re-themes just that subtree (the look picker uses this). */

[data-theme="adras"]{
  color-scheme:dark;
  --bg:#15174A;--bg-deep:#0F1038;--surface:#1B1E5A;--surface-2:#232670;--line:#2E3180;--line-strong:#4A4E9A;
  --text:#FFF4E0;--muted:#B9BCE6;
  --accent:#F7B92C;--on-accent:#15174A;
  --mine:#F7B92C;--on-mine:#15174A;--foe:#C4283F;--on-foe:#FFF4E0;
  --good:#F7B92C;--bad:#FF8C9B;--hi:#F7B92C;
  --card:#FFF4E0;--card-ink:#15174A;--card-red:#C4283F;--card-edge:transparent;--card-bw:0px;--card-r:.11;
  --back:#15174A;--back-edge:#FFF4E0;
  --f-display:"Geologica","Golos Text","Onest","Arial Black",system-ui,sans-serif;
  --f-body:"Golos Text","Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-rank:"Geologica","Golos Text","Arial Black",sans-serif;
  --w-display:900;--w-head:700;--w-rank:700;--w-btn:900;
  --caps:uppercase;--track:.02em;--head-size:18px;
  --r-ctl:0px;--r-panel:0px;--bw:2px;
  --btn-bw:0px;--btn-edge:transparent;--btn-size:17px;--btn-track:.02em;
  --btn2-bg:transparent;--btn2-fg:#FFF4E0;--btn2-edge:#FFF4E0;
  --sh-card:3px 3px 0 #0A0B2A;--sh-raise:none;--sh-raise-2:none;
  --sh-sel:0 0 0 3px #F7B92C,3px 3px 0 3px #0A0B2A;--sh-best:0 0 0 3px #F7B92C,3px 3px 0 3px #0A0B2A;--trump-mark:#15174A;
  --pip-fill:1;--pip-stroke:0px;
  --fan:4deg;--arc:1.5px;
  --slot:2px dashed #4A4E9A;
  --m-edge:transparent;
  --div:1px solid #2E3180;--ico:2;
  --chrome:#15174A;
}

[data-theme="ganch"]{
  color-scheme:dark;
  --bg:#0F1B2D;--bg-deep:#0A1422;--surface:#16263D;--surface-2:#1B2F4B;--line:#2B3F5C;--line-strong:#3A5275;
  --text:#F0E8D9;--muted:#9FB0C6;
  --accent:#C9A55C;--on-accent:#0F1B2D;
  --mine:#C9A55C;--on-mine:#0F1B2D;--foe:#F0E8D9;--on-foe:#0F1B2D;
  --good:#C9A55C;--bad:#F0A08A;--hi:#C9A55C;
  --card:#F0E8D9;--card-ink:#1B2433;--card-red:#A8322D;--card-edge:transparent;--card-bw:0px;--card-r:.11;
  --back:#0A1422;--back-edge:#C9A55C;
  --f-display:"Cormorant","Commissioner","Times New Roman",serif;
  --f-body:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-rank:"Cormorant","Times New Roman",serif;
  --w-display:700;--w-head:700;--w-rank:700;--w-btn:700;
  --caps:none;--track:0;--head-size:26px;
  --r-ctl:6px;--r-panel:9px;--bw:1px;
  --btn-bw:0px;--btn-edge:transparent;--btn-size:20px;--btn-track:.12em;
  --btn2-bg:transparent;--btn2-fg:#C9A55C;--btn2-edge:#C9A55C;
  --sh-card:0 6px 14px rgba(0,0,0,.45);--sh-raise:none;--sh-raise-2:none;
  --sh-sel:0 0 0 2px #C9A55C,0 10px 18px rgba(0,0,0,.55);--sh-best:0 0 0 2px #C9A55C,0 6px 14px rgba(0,0,0,.45);--trump-mark:#8E6F24;
  --pip-fill:.14;--pip-stroke:1.3px;
  --fan:4.5deg;--arc:2.5px;
  --slot:1px dashed #8C7A4D;
  --m-edge:transparent;
  --div:1px solid #2B3F5C;--ico:1.5;
  --chrome:#0F1B2D;
}

[data-theme="topchan"]{
  color-scheme:light;
  --bg:#F5ECDC;--bg-deep:#EADFC9;--surface:#FFFBF2;--surface-2:#FBF4E6;--line:#A99C85;--line-strong:#27211C;
  --text:#27211C;--muted:#6B5F53;
  --accent:#AE3F1A;--on-accent:#F5ECDC;
  --mine:#1C6B63;--on-mine:#F5ECDC;--foe:#AE3F1A;--on-foe:#F5ECDC;
  --good:#1C6B63;--bad:#AE3F1A;--hi:#AE3F1A;
  --card:#FFFBF2;--card-ink:#27211C;--card-red:#B5341F;--card-edge:#27211C;--card-bw:2px;--card-r:.12;
  --back:#1C6B63;--back-edge:#27211C;
  --f-display:"Podkova","Onest",Georgia,serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-rank:"Podkova",Georgia,serif;
  --w-display:800;--w-head:800;--w-rank:800;--w-btn:800;
  --caps:none;--track:0;--head-size:24px;
  --r-ctl:12px;--r-panel:14px;--bw:2px;
  --btn-bw:2px;--btn-edge:#27211C;--btn-size:19px;--btn-track:0;
  --btn2-bg:#FFFBF2;--btn2-fg:#27211C;--btn2-edge:#27211C;
  --sh-card:3px 3px 0 #27211C;--sh-raise:3px 3px 0 #27211C;--sh-raise-2:3px 3px 0 #27211C;
  --sh-sel:0 0 0 3px #E3A72F,0 0 0 5px #27211C,7px 9px 0 3px #27211C;--sh-best:0 0 0 3px #E3A72F,0 0 0 5px #27211C;--trump-mark:#1C6B63;
  --pip-fill:1;--pip-stroke:0px;
  --fan:4deg;--arc:1.5px;
  --slot:2px dashed #A99C85;
  --m-edge:#27211C;
  --div:2px dotted #A99C85;--ico:2;
  --chrome:#F5ECDC;
}

/* Names the older screens still use, until each of them is redrawn. */
[data-theme]{
  --night:var(--bg);--panel:var(--surface);--panel-2:var(--surface-2);--lapis:var(--bg-deep);--lapis-deep:var(--bg-deep);
  --turq:var(--good);--coral:var(--bad);--gold:var(--hi);
  --ivory:var(--card);--ink:var(--card-ink);--crimson:var(--card-red);--fg:var(--text);
  --f-card:var(--f-rank);
  color:var(--text);
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:15px}
h1,h2{font-family:var(--f-display);font-weight:var(--w-head);text-transform:var(--caps);letter-spacing:var(--track);font-feature-settings:"lnum" 1}
h1{font-size:var(--head-size)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* buttons */
.primary,.secondary,.gold{min-height:54px;box-sizing:border-box;padding:6px 16px;border-radius:var(--r-ctl);line-height:1.15}
.primary{background:var(--accent);color:var(--on-accent);border:var(--btn-bw) solid var(--btn-edge);box-shadow:var(--sh-raise);
  font-family:var(--f-display);font-weight:var(--w-btn);font-size:var(--btn-size);letter-spacing:var(--btn-track);text-transform:var(--caps)}
[data-theme="ganch"] .primary{text-transform:uppercase}
a.primary,.sheet a.primary{display:grid;place-items:center;text-align:center;text-decoration:none;color:var(--on-accent);font-weight:700}
.primary:disabled{background:var(--surface);color:var(--muted);border-color:var(--line);box-shadow:none;cursor:default;
  font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none}
.secondary,.gold{background:var(--btn2-bg);color:var(--btn2-fg);border:var(--bw) solid var(--btn2-edge);box-shadow:var(--sh-raise-2);font-family:var(--f-body);font-weight:700;font-size:15px}
.secondary:disabled,.gold:disabled{opacity:.4;box-shadow:none;cursor:default}
.gold.armed{background:var(--accent);color:var(--on-accent)}
.ghost{background:transparent;color:var(--text);border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl);padding:8px 14px;font-size:13px;font-weight:700}

/* medal next to a name */
.mdl{display:inline-block;width:.95em;height:.95em;margin-left:.3em;vertical-align:-.1em;stroke:var(--m-edge);stroke-width:1}
/* tier classes carry a prefix: a bare .gold is the name of a button */
.mdl.m-bronze{fill:#C8824A}.mdl.m-silver{fill:#C9CED6}.mdl.m-gold{fill:#F2C14E}.mdl.m-platinum{fill:#8FD3CC}.mdl.m-diamond{fill:#8FB8FF}
.bot{display:inline-block;font-family:var(--f-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0 5px;border:1px solid currentColor;border-radius:4px;opacity:.75;vertical-align:1px}

/* the look picker in settings: every option is drawn in its own look */
.looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.look{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px 6px 8px;text-align:left;background:var(--bg);color:var(--text);border:2px solid var(--line-strong);border-radius:10px;font-family:var(--f-body)}
.look[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.lk-pv{display:block;border-radius:6px;overflow:hidden}
.lk-pv svg{display:block;width:100%;height:auto}
.lk-tx{display:flex;flex-direction:column;gap:2px;padding:0 2px;min-width:0}
.look b{font-family:var(--f-display);font-weight:var(--w-head);font-size:15px}
.look[aria-checked="true"] b::after{content:"";display:inline-block;width:5px;height:10px;margin-left:8px;border:solid var(--accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translateY(-2px)}
.look small{font-size:12px;line-height:1.3;color:var(--muted)}