/* ═════════ Compile Online — thèmes ═════════ */
:root {
  /* clair (par défaut si le système est clair) */
  --bg: #e9edf5; --bg2: #dde3ee; --panel: #ffffff; --panel2: #f4f6fb; --line: #cfd6e4; --txt: #151a2a; --mut: #5d6680;
  --acc: #0a9c7d; --acc-ink: #ffffff; --warn: #c26a00; --bad: #d4234a;
  --table: radial-gradient(1200px 700px at 50% 0%, #ffffff 0%, transparent 70%), linear-gradient(#e9edf5, #dfe5ef);
  --box-bg: rgba(255, 255, 255, .82); --box-txt: #121829; --frame: rgba(25, 35, 70, .34); --tag-bg: #ffffff; --tag-txt: #121829;
  --base-mix: #f5f7fb; --mixA: 38%; --mixB: 46%; --blocks: multiply; --shade: 0 3px 10px rgba(20, 30, 60, .18);
  --back-a: #2a3354; --back-b: #1f2742;
  --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Space Grotesk', system-ui, sans-serif; --disp: 'Chakra Petch', 'Space Grotesk', sans-serif;
  --cw: 148px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080a12; --bg2: #0f1320; --panel: #121726; --panel2: #0d111d; --line: #232a40; --txt: #e6eaf5; --mut: #8a93ad;
    --acc: #3ff0c6; --acc-ink: #03140f; --warn: #ffb347; --bad: #ff5470;
    --table: radial-gradient(1200px 700px at 50% 0%, #15203d 0%, transparent 70%), linear-gradient(#080a12, #0a0d17);
    --box-bg: rgba(5, 7, 14, .66); --box-txt: #eef2fb; --frame: rgba(205, 220, 255, .36); --tag-bg: #0a0d17; --tag-txt: #eef2fb;
    --base-mix: #06070c; --mixA: 58%; --mixB: 66%; --blocks: screen; --shade: 0 6px 18px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #080a12; --bg2: #0f1320; --panel: #121726; --panel2: #0d111d; --line: #232a40; --txt: #e6eaf5; --mut: #8a93ad;
  --acc: #3ff0c6; --acc-ink: #03140f; --warn: #ffb347; --bad: #ff5470;
  --table: radial-gradient(1200px 700px at 50% 0%, #15203d 0%, transparent 70%), linear-gradient(#080a12, #0a0d17);
  --box-bg: rgba(5, 7, 14, .66); --box-txt: #eef2fb; --frame: rgba(205, 220, 255, .36); --tag-bg: #0a0d17; --tag-txt: #eef2fb;
  --base-mix: #06070c; --mixA: 58%; --mixB: 66%; --blocks: screen; --shade: 0 6px 18px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Couleurs des protocoles : principale / secondaire */
.p-darkness { --c: #4b5bd6; --c2: #1b8fb3; }
.p-death    { --c: #8a7aa8; --c2: #4b5a7a; }
.p-fire     { --c: #ff4d1f; --c2: #ffb02e; }
.p-gravity  { --c: #d03fb0; --c2: #7a2fd0; }
.p-life     { --c: #3fbf9a; --c2: #9fe3c2; }
.p-light    { --c: #ff8a1f; --c2: #ffd84a; }
.p-metal    { --c: #aab6cc; --c2: #e08ad0; }
.p-plague   { --c: #8fd13a; --c2: #23b36a; }
.p-psychic  { --c: #9b4dff; --c2: #ff4fa8; }
.p-speed    { --c: #4fc8ff; --c2: #d9ecff; }
.p-spirit   { --c: #7b4dff; --c2: #2fd4c4; }
.p-water    { --c: #2a8dff; --c2: #36e0d6; }
/* Main 2 */
.p-chaos      { --c: #e64db8; --c2: #ffb02e; }
.p-clarity    { --c: #6cc4ea; --c2: #e8f7ff; }
.p-corruption { --c: #6a2fb8; --c2: #3fbf6a; }
.p-courage    { --c: #d4a72c; --c2: #ff6b3d; }
.p-fear       { --c: #9b1b3a; --c2: #5a2a6e; }
.p-ice        { --c: #7fd3e8; --c2: #d8f3ff; }
.p-luck       { --c: #f5c518; --c2: #3fbf6a; }
.p-mirror     { --c: #aab3c2; --c2: #7fd3e8; }
.p-peace      { --c: #8fd1ae; --c2: #f2e6b8; }
.p-smoke      { --c: #6f6f7c; --c2: #a8a8b8; }
.p-time       { --c: #b8783c; --c2: #e8c27a; }
.p-war        { --c: #c0262d; --c2: #ff7a3d; }
/* Aux 1 / Aux 2 */
.p-love         { --c: #f28ac8; --c2: #ffb3c9; }
.p-hate         { --c: #e0564f; --c2: #6e1a1a; }
.p-apathy       { --c: #9aa0a8; --c2: #c9ccd2; }
.p-assimilation { --c: #a23bc9; --c2: #4b5bd6; }
.p-diversity    { --c: #ff7f6b; --c2: #4fc8ff; }
.p-unity        { --c: #4caf50; --c2: #b6e36a; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--table); background-color: var(--bg); color: var(--txt); font-family: var(--sans); background-attachment: fixed; }
button { font: inherit; cursor: pointer; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--mut); font-size: 14px; }

/* ═════════ Boutons / champs ═════════ */
.btn { background: var(--acc); color: var(--acc-ink); border: 0; padding: 11px 16px; border-radius: 10px; font-weight: 700; }
.btn.ghost { background: transparent; color: var(--txt); border: 1px solid var(--line); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.icon { background: var(--panel); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; min-width: 34px; height: 32px; padding: 0 9px; font-size: 14px; }
input[type=text] { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); padding: 12px 14px; border-radius: 10px; font: 16px var(--sans); }
input[type=text]:focus { outline: 2px solid var(--acc); border-color: transparent; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.check { display: flex; gap: 8px; align-items: center; color: var(--mut); font-size: 14px; margin: 6px 0; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg label { flex: 1; text-align: center; padding: 10px 6px; cursor: pointer; font-size: 14px; color: var(--mut); }
.seg input { display: none; }
.seg label:has(input:checked) { background: var(--acc); color: var(--acc-ink); font-weight: 700; }
.pill { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--mut); white-space: nowrap; }
.pill b { color: var(--txt); }
.pill.mod { color: #1b1203; background: var(--warn); border-color: var(--warn); font-weight: 800; }
.pill.bad { color: var(--bad); }

/* ═════════ Accueil / salle ═════════ */
.lobby { max-width: 520px; margin: 0 auto; padding: 40px 16px; position: relative; }
.lobby .corner { position: absolute; top: 16px; right: 16px; }
.logo { font-family: var(--disp); font-weight: 700; font-size: clamp(44px, 13vw, 76px); letter-spacing: .06em; margin: 0; color: var(--txt); text-shadow: 2px 0 color-mix(in srgb, var(--acc) 70%, transparent), -2px 0 color-mix(in srgb, #ff4fa8 55%, transparent); }
.logo small { display: block; font: 400 13px var(--mono); letter-spacing: .3em; color: var(--mut); text-shadow: none; margin-top: 4px; }
.card-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-top: 16px; box-shadow: var(--shade); }
.card-box h2 { font: 600 12px var(--mono); letter-spacing: .2em; color: var(--mut); margin: 0 0 12px; text-transform: uppercase; }
.code { font: 800 46px var(--mono); letter-spacing: .25em; color: var(--acc); }

/* ═════════ Barre haute ═════════ */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .brand { font: 700 18px var(--disp); letter-spacing: .1em; }
.phases { display: flex; gap: 3px; flex: 1; justify-content: center; overflow: hidden; }
.phases span { font: 10px var(--mono); padding: 4px 7px; border-radius: 6px; color: var(--mut); background: var(--panel2); white-space: nowrap; }
.phases span.on { background: var(--acc); color: var(--acc-ink); font-weight: 800; }

/* ═════════ Mise en page de la partie ═════════ */
.gamewrap { display: grid; grid-template-columns: 200px minmax(0, 1fr) 270px; gap: 12px; padding: 10px 12px 0; max-width: 1600px; margin: 0 auto; align-items: start; }
.side { position: sticky; top: 58px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 66px); }
.center { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: var(--shade); }
.panel h3 { margin: 0 0 8px; font: 600 10px var(--mono); letter-spacing: .18em; color: var(--mut); text-transform: uppercase; display: flex; justify-content: space-between; gap: 6px; }
.panel h3 b { color: var(--txt); }

/* Joueurs + pioches (colonne gauche) */
.player { display: flex; flex-direction: column; gap: 8px; }
.player.active { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset, var(--shade); }
.player .who { font-weight: 700; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.player .who i { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex-shrink: 0; }
.player .who i.on { background: var(--acc); }
.player .who em { margin-left: auto; font: 700 10px var(--mono); font-style: normal; color: var(--acc); }
.deck { display: flex; align-items: center; gap: 12px; }
.deckpile { position: relative; width: 58px; height: 80px; flex-shrink: 0; }
.deckpile span { position: absolute; inset: 0; border-radius: 7px; border: 1px solid #4a5684; background: repeating-linear-gradient(45deg, var(--back-a) 0 5px, var(--back-b) 5px 10px); box-shadow: 0 1px 3px #0006; }
.deckpile span:nth-child(2) { transform: translate(3px, -3px); }
.deckpile span:nth-child(3) { transform: translate(6px, -6px); }
.deckpile span:nth-child(3)::after { content: 'C'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px var(--disp); color: #8f9bc8; }
.deckpile.empty span { background: transparent; border-style: dashed; box-shadow: none; }
.deckpile.empty span::after { content: '' !important; }
.deck .n { font: 800 30px var(--mono); line-height: 1; }
.deck .l { font: 10px var(--mono); color: var(--mut); letter-spacing: .1em; text-transform: uppercase; }
.stats { display: flex; flex-wrap: wrap; gap: 5px; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--line); background: var(--panel2); }
.pips i.on { background: var(--acc); border-color: var(--acc); }
.backs { display: flex; padding-left: 6px; }
.backs span { width: 13px; height: 19px; border-radius: 3px; background: linear-gradient(135deg, var(--back-a), var(--back-b)); border: 1px solid #4a5684; margin-left: -6px; }

/* Journal */
/* Journal */
.log { flex: 1; min-height: 140px; overflow-y: auto; font-size: 12.5px; line-height: 1.38; padding: 8px; }
.lghead { font: 600 10px var(--mono); letter-spacing: .18em; color: var(--mut); text-transform: uppercase; margin: 0 2px 6px; }
.lgsep { font: 600 9.5px var(--mono); letter-spacing: .16em; color: var(--mut); text-transform: uppercase; margin: 12px 2px 4px; }
.lg { border-radius: 10px; margin-bottom: 6px; border: 1px solid var(--line); overflow: hidden; }
.lg header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 8px; background: var(--panel2); font-size: 12px; }
.lg header b { font: 700 12px var(--mono); }
.lg header span { color: var(--mut); }
.lg header em { margin-left: auto; font: 700 9.5px var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; background: var(--acc); color: var(--acc-ink); }
.lg ul { list-style: none; margin: 0; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 3px; }
.lg li { display: flex; gap: 6px; align-items: flex-start; padding: 2px 4px 2px 6px; border-left: 2px solid transparent; color: color-mix(in srgb, var(--txt) 85%, var(--mut)); }
.lg li.me { border-left-color: var(--acc); }
.lg li.opp { border-left-color: #ff7a59; }
.lg li.none { color: var(--mut); font-style: italic; }
.lg .tg { flex-shrink: 0; font: 700 8.5px/1.6 var(--mono); letter-spacing: .04em; padding: 0 4px; border-radius: 4px; margin-top: 1px; color: #fff; background: #6b7591; }
.lg .tg.tp { background: #2f7de1; } .lg .tg.td { background: #2a9d6f; } .lg .tg.tx { background: #d0453c; } .lg .tg.tr { background: #8a56d6; }
.lg .tg.tf { background: #b04fc4; } .lg .tg.tc { background: #d98a00; } .lg .tg.tw { background: #7d7f8c; }
.lg.cur { border: 2px solid var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent); }
.lg.cur.theirs { border-color: #ff7a59; box-shadow: 0 0 0 3px color-mix(in srgb, #ff7a59 15%, transparent); }
.lg.cur header { background: color-mix(in srgb, var(--acc) 16%, var(--panel)); font-size: 13px; }
.lg.cur.theirs header { background: color-mix(in srgb, #ff7a59 16%, var(--panel)); }
.lg.cur header b { font-size: 14px; }
.lg.cur header span { color: var(--txt); font-weight: 700; }
.lg.cur li { font-size: 13px; color: var(--txt); }
.lg:not(.cur):not(.prev) { opacity: .72; }
.lg:not(.cur) li { font-size: 12px; }
.lg.prev { border-style: dashed; }

/* Confirmation de pose */
.confirm { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.confirm .card.big { --cw: 230px; }
.confirm .card.ghost { filter: grayscale(.6) brightness(.85); }
.confirm .where { font-size: 15px; margin-bottom: 8px; }
.confirm .tot2 { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.confirm .tot2 > div { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; font: 600 16px var(--mono); }
.confirm .tot2 span { display: block; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--mut); text-transform: uppercase; }
.confirm .tot2 b.hot { color: var(--warn); }
.confirm ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.confirm ul.fx li { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 14px; line-height: 1.4; }
.confirm ul.fx li small { display: block; color: var(--mut); font-size: 12px; margin-top: 3px; }
.confirm .k { display: inline-block; font: 700 10px var(--mono); letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; margin-right: 6px; background: var(--mut); color: #fff; }
.confirm .k.mid { background: #2f7de1; } .confirm .k.top { background: #8a56d6; } .confirm .k.bot { background: #2a9d6f; }
.confirm ul.warn li { font-size: 13.5px; padding-left: 12px; border-left: 3px solid var(--warn); }
@media (max-width: 640px) { .confirm { grid-template-columns: 1fr; } .confirm .cc { display: flex; justify-content: center; } .confirm .card.big { --cw: 170px; } }

/* Défausses (colonne droite) */
.discard { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.discard .list { overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px; min-height: 60px; }
.discard .list .card { --cw: 210px; cursor: zoom-in; }
.discard .list .card.covered { --cw: 210px; }
.discard .empty { color: var(--mut); font-size: 13px; text-align: center; padding: 18px 0; border: 1px dashed var(--line); border-radius: 10px; width: 100%; }

/* Terminal (consigne) */
.term { position: sticky; top: 52px; z-index: 30; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--line)); border-radius: 12px; padding: 10px 12px; font-family: var(--mono); box-shadow: var(--shade); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.term .tx { flex: 1; min-width: 220px; }
.term .t { color: var(--acc); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.term .t.wait { color: var(--mut); }
.term .src { font-size: 11px; color: var(--warn); margin-bottom: 2px; }
.term .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.term .acts .btn { padding: 8px 12px; font-size: 13px; }
.term .hint { font: 12px var(--sans); color: var(--mut); margin-top: 3px; }

/* ═════════ Plateau ═════════ */
.board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(70px, auto) auto auto auto minmax(70px, auto); column-gap: 10px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 45%, transparent); border: 1px solid var(--line); }
.laneglow { border-radius: 12px; z-index: 0; pointer-events: none; transition: box-shadow .2s, background .2s; margin: -4px -5px; }
.laneglow.on { background: color-mix(in srgb, var(--acc) 10%, transparent); box-shadow: 0 0 0 2px var(--acc) inset, 0 0 22px color-mix(in srgb, var(--acc) 35%, transparent); }
.cell { position: relative; z-index: 1; min-width: 0; display: flex; justify-content: center; }
.cell.click { cursor: pointer; }
.stack { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 4px 0; }
.stack.opp { flex-direction: column-reverse; justify-content: flex-start; height: 100%; justify-content: flex-start; }
.ostack { align-items: flex-end; }
.stack .slot { width: min(var(--cw), 100%); height: 52px; border: 1px dashed var(--line); border-radius: 10px; opacity: .7; }
.drop { display: flex; gap: 5px; width: 100%; justify-content: center; flex-wrap: wrap; padding: 6px 0 0; }
.drop button { flex: 1; max-width: 150px; font: 700 12px var(--sans); padding: 9px 4px; border-radius: 8px; border: 1.5px solid var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--txt); }
.drop button.down { border-color: var(--mut); background: color-mix(in srgb, var(--mut) 12%, transparent); }
.drop button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.band-gap { height: 3px; }
.engaged { text-align: center; font: 12px var(--mono); color: var(--warn); }

/* ═════════ Carte Protocole (format paysage) ═════════ */
.proto { position: relative; width: 100%; max-width: 300px; margin: 2px 0; border-radius: 9px; overflow: hidden; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--c) 60%, var(--frame)); box-shadow: var(--shade);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .04) 3px 4px),
    linear-gradient(100deg, transparent 0 22%, color-mix(in srgb, var(--c2) 40%, transparent) 22% 24%, transparent 24% 71%, color-mix(in srgb, var(--c) 45%, transparent) 71% 72.5%, transparent 72.5%),
    radial-gradient(70% 120% at 18% 30%, color-mix(in srgb, var(--c2) var(--mixA), transparent), transparent 72%),
    radial-gradient(70% 120% at 85% 80%, color-mix(in srgb, var(--c) var(--mixB), transparent), transparent 72%),
    color-mix(in srgb, var(--c) 14%, var(--base-mix)); }
.proto::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55; mix-blend-mode: var(--blocks);
  background:
    linear-gradient(var(--c), var(--c)) 8% 30% / 14% 9% no-repeat, linear-gradient(var(--c2), var(--c2)) 30% 72% / 9% 7% no-repeat,
    linear-gradient(var(--c), var(--c)) 62% 18% / 18% 6% no-repeat, linear-gradient(var(--c2), var(--c2)) 88% 64% / 12% 11% no-repeat,
    linear-gradient(var(--c), var(--c)) 46% 88% / 22% 4% no-repeat; }
.proto .motto { grid-column: 1; font: 600 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; margin: 6px 0 0 6px; padding: 2px 6px; background: var(--box-bg); color: var(--box-txt); border: 1px solid var(--frame); border-radius: 2px; justify-self: start; max-width: calc(100% - 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto .sym { grid-column: 2; margin: 5px 6px 0 0; width: 22px; height: 22px; color: var(--tag-txt); }
.proto .mid { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 8px; }
.proto .title { font: 700 clamp(17px, 2.1vw, 26px) / 1 var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--box-txt);
  text-shadow: 2px 0 color-mix(in srgb, var(--c2) 80%, transparent), -2px 0 color-mix(in srgb, var(--c) 80%, transparent), 0 2px 6px rgba(0, 0, 0, .25); }
.proto .status { font: 800 9px var(--mono); letter-spacing: .14em; color: var(--box-txt); opacity: .85; text-align: center; }
.proto .tw { text-align: center; }
.proto .total { font: 800 22px var(--mono); min-width: 40px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: var(--box-bg); color: var(--box-txt); border: 1px solid var(--frame); }
.proto .total.hot { color: var(--warn); border-color: var(--warn); box-shadow: 0 0 12px color-mix(in srgb, var(--warn) 50%, transparent); }
.proto .theme { grid-column: 1 / -1; margin: 0 6px 6px; font: 600 9px var(--mono); text-transform: uppercase; text-align: center; padding: 3px 6px; background: var(--box-bg); color: var(--box-txt); border: 1px solid var(--frame); border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto.compiled { border: 2px solid var(--acc); }
.proto.compiled .status { color: var(--acc); opacity: 1; background: var(--box-bg); padding: 1px 6px; border-radius: 3px; }
.proto.sel { outline: 3px solid var(--warn); outline-offset: 1px; }
.proto.opp { opacity: .97; }

/* ═════════ Carte Commande ═════════ */
.card { position: relative; width: var(--cw); max-width: 100%; min-height: calc(var(--cw) * 1.38); border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; user-select: none; flex-shrink: 0; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--c, #556) 55%, var(--frame)); box-shadow: var(--shade); transition: transform .15s, box-shadow .15s;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .035) 3px 4px),
    linear-gradient(118deg, transparent 0 36%, color-mix(in srgb, var(--c2) 32%, transparent) 36% 38.5%, transparent 38.5% 64%, color-mix(in srgb, var(--c) 30%, transparent) 64% 65.5%, transparent 65.5%),
    radial-gradient(90% 55% at 15% 8%, color-mix(in srgb, var(--c2) var(--mixA), transparent), transparent 72%),
    radial-gradient(110% 65% at 92% 96%, color-mix(in srgb, var(--c) var(--mixB), transparent), transparent 72%),
    color-mix(in srgb, var(--c, #556) 16%, var(--base-mix)); }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: var(--blocks);
  background:
    linear-gradient(var(--c), var(--c)) 78% 20% / 16% 3% no-repeat, linear-gradient(var(--c2), var(--c2)) 12% 52% / 24% 2.5% no-repeat,
    linear-gradient(var(--c), var(--c)) 70% 76% / 10% 5% no-repeat, linear-gradient(var(--c2), var(--c2)) 30% 92% / 30% 2% no-repeat; }
.card .hd { display: flex; align-items: flex-start; gap: 4px; padding: 5px 5px 4px; }
.card .tag { font: 700 9.5px var(--disp); letter-spacing: .04em; text-transform: uppercase; padding: 2px 5px; background: var(--tag-bg); color: var(--tag-txt); border: 1px solid var(--frame); border-radius: 2px; max-width: 58%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card .val { font: 800 19px/1 var(--mono); width: 28px; height: 28px; display: grid; place-items: center; background: var(--tag-bg); color: var(--tag-txt); border: 1px solid var(--frame); border-radius: 3px; flex-shrink: 0; }
.card .val.mod { color: var(--warn); border-color: var(--warn); }
.card .sym { margin-left: auto; width: 22px; height: 22px; color: var(--tag-txt); flex-shrink: 0; }
.sym svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35)); }
.sym svg .f { fill: currentColor; stroke: none; }
.card .boxes { flex: 1 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 0 7px 7px 5px; }
.card .box { position: relative; flex: 1 0 auto; min-height: 2.9em; font: 500 clamp(8.5px, 1.6vw, 10px) / 1.28 var(--sans); padding: 4px 6px; color: var(--box-txt); background: var(--box-bg); border: 1px solid var(--frame); border-radius: 2px; }
.card .box.mid { min-height: 4.2em; }
.card .box.empty { background: color-mix(in srgb, var(--box-bg) 40%, transparent); }
.card .box::after { content: ''; position: absolute; right: -5px; top: 18%; height: 64%; border-right: 1px solid var(--frame); }
.card .box::before { content: ''; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-left: 2px solid color-mix(in srgb, var(--c) 70%, var(--box-txt)); border-top: 2px solid color-mix(in srgb, var(--c) 70%, var(--box-txt)); }
.card .box.empty::before { display: none; }

/* Dos / face inactive */
.card.down { --c: #4a5684; --c2: #2d3760; background: radial-gradient(70% 50% at 50% 50%, #3a4778 0%, transparent 70%), repeating-linear-gradient(45deg, var(--back-a) 0 6px, var(--back-b) 6px 12px); border-color: #56649a; }
.card.down::before { display: none; }
.card.down .tag, .card.down .val { background: #10152a; color: #dfe6fb; border-color: #56649a; }
.card.down .back { flex: 1; display: grid; place-items: center; }
.card.down .back span { font: 700 34px var(--disp); color: #8f9bc8; letter-spacing: .05em; width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid #56649a; transform: rotate(45deg); border-radius: 6px; }
.card.down .back span b { transform: rotate(-45deg); font-size: 22px; }
.card .peek { position: absolute; bottom: 6px; left: 6px; right: 6px; font: 600 10px var(--mono); text-align: center; color: #dfe6fb; background: #0a0e1ccc; border: 1px solid #56649a; border-radius: 4px; padding: 3px; }
.card .peekmini { display: none; font: 600 9px var(--mono); color: #c6cff0; margin-left: auto; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Carte recouverte : seulement l’en-tête */
.card.covered { min-height: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.card.covered .hd { padding: 3px 5px; }
.card.covered .val { width: 22px; height: 22px; font-size: 14px; }
.card.covered .sym { width: 18px; height: 18px; }
.card.covered .boxes, .card.covered .back, .card.covered .peek { display: none; }
.card.covered .peekmini { display: block; }
.card.covered .topcmd { display: block; }
.card .topcmd { display: none; font: 500 9px/1.25 var(--sans); color: var(--box-txt); background: var(--box-bg); border: 1px solid var(--frame); margin: 0 5px 4px; padding: 2px 5px; border-radius: 2px; }

/* États */
.card.cand { cursor: pointer; box-shadow: 0 0 0 2px var(--acc), 0 0 16px color-mix(in srgb, var(--acc) 55%, transparent); animation: pulse 1.4s infinite; }
.card.sel { box-shadow: 0 0 0 3px var(--warn), 0 0 18px color-mix(in srgb, var(--warn) 60%, transparent) !important; transform: translateY(-4px); animation: none; }
.card.unplayable { opacity: .45; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--acc), 0 0 4px transparent; } }
.card.small { --cw: 118px; }
.card.big { --cw: min(300px, 78vw); }
.card.big .box { font-size: 14px; padding: 8px 10px; }
.card.big .val { width: 44px; height: 44px; font-size: 30px; }
.card.big .tag { font-size: 14px; }
.card.big .sym { width: 36px; height: 36px; }
.card.big .back span { width: 90px; height: 90px; }

/* ═════════ Main ═════════ */
.handbar { position: sticky; bottom: 0; z-index: 35; padding: 14px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 26%); margin-top: 4px; }
.hand { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 4px; justify-content: center; }
.hand .card { --cw: 132px; cursor: pointer; }
.hand .card:hover { transform: translateY(-6px); }
.hand .card.unplayable:hover { transform: none; }
.hand .none { color: var(--mut); padding: 30px; }

/* ═════════ Sélection des protocoles ═════════ */
.draft { max-width: 1200px; margin: 0 auto; padding: 16px 12px 40px; }
.draft h2 { font: 700 18px var(--disp); color: var(--acc); letter-spacing: .06em; margin: 6px 0; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 16px; }
.picks .panel.active { border-color: var(--acc); }
.picks .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.protogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ptile { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shade); }
.ptile .proto { max-width: none; min-height: 112px; }
.ptile.taken { opacity: .32; filter: grayscale(.85); }
.ptile details { font-size: 12.5px; color: var(--txt); }
.ptile details summary { cursor: pointer; color: var(--mut); }
.ptile details li { margin: 4px 0; color: color-mix(in srgb, var(--txt) 85%, var(--mut)); }

/* ═════════ Modales / toasts ═════════ */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(5, 8, 16, .66); display: grid; place-items: center; padding: 16px; }
.mbox { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-width: 780px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.mbox h2 { margin: 0 0 12px; font: 700 17px var(--disp); color: var(--acc); }
.mcards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mbox .rules h3 { color: var(--acc); font: 700 13px var(--mono); margin: 14px 0 4px; }
.mbox .rules p, .mbox .rules li { font-size: 14px; line-height: 1.45; }
.slots { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.slots .proto { width: 200px; cursor: pointer; }
#toasts { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--line); padding: 9px 14px; border-radius: 10px; font-size: 14px; box-shadow: var(--shade); animation: tin .2s; }
.toast.err { border-color: var(--bad); color: var(--bad); }
@keyframes tin { from { opacity: 0; transform: translateY(-6px); } }
.banner { text-align: center; padding: 26px 10px; }
.banner .w { font: 700 40px var(--disp); color: var(--acc); letter-spacing: .08em; }

.discard .list .card.stripalt { display: none; }

/* ═════════ Écrans moyens ═════════ */
@media (max-width: 1250px) {
  .gamewrap { grid-template-columns: 170px minmax(0, 1fr) 210px; }
  .discard .list .card, .discard .list .card.covered { --cw: 180px; }
  .proto .motto { font-size: 8px; }
}
/* ═════════ Mobile / tablette portrait ═════════ */
@media (max-width: 900px) {
  :root { --cw: 112px; }
  html, body { overflow-x: hidden; }
  .gamewrap { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 6px 0; width: 100%; max-width: 100vw; }
  .gamewrap > *, .gamewrap .panel, .board, .handbar, .term { min-width: 0; max-width: 100%; }
  .hand { max-width: 100%; }
  .side, .center { display: contents; }
  .term { order: 1; top: 46px; padding: 8px 10px; }
  .term .hint { display: none; }
  .term .t { font-size: 12.5px; }
  .log { order: 2; max-height: 190px; flex: none; min-height: 0; }
  .log .lgsep.old, .log .lg:not(.cur):not(.prev), .log .lghead { display: none; }
  .log .lgsep { margin-top: 6px; }
  .log .lg { margin: 0; }
  .player.opp { order: 3; } .discard.opp { order: 4; }
  .board { order: 5; padding: 5px 3px; column-gap: 4px; }
  .engaged { order: 6; }
  .discard.me { order: 7; } .player.me { order: 8; }
  .handbar { order: 9; position: sticky; }
  .player { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 7px 9px; gap: 6px 10px; }
  .player .deckpile { width: 26px; height: 36px; }
  .player .deckpile span:nth-child(3)::after { font-size: 12px; }
  .player .deck { gap: 6px; } .player .deck .n { font-size: 18px; }
  .player .who em { margin-left: 4px; }
  .discard { flex: none; padding: 6px 8px; }
  .discard h3 { margin-bottom: 4px; }
  .discard .list { flex-direction: row; overflow-x: auto; overflow-y: hidden; align-items: flex-start; min-height: 0; }
  .discard .list .card, .discard .list .card.covered { --cw: 112px; }
  .discard .list .card:not(.covered) { --cw: 112px; }
  .discard .list .card.full { display: none; }
  .discard .list .card.stripalt { display: flex; }
  .discard .empty { padding: 6px; }
  .proto { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .proto .motto, .proto .theme { display: none; }
  .proto .sym { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; margin: 0; }
  .proto .mid { flex-direction: column; gap: 3px; padding: 6px 3px 5px; }
  .proto .title { font-size: clamp(11px, 3.6vw, 16px); text-shadow: 1px 0 color-mix(in srgb, var(--c2) 80%, transparent), -1px 0 color-mix(in srgb, var(--c) 80%, transparent); }
  .proto .status { font-size: 7px; letter-spacing: .06em; }
  .proto .total { height: 26px; min-width: 30px; font-size: 16px; }
  .card .tag { font-size: 8px; padding: 1px 3px; max-width: 52%; }
  .card .val { width: 22px; height: 22px; font-size: 15px; }
  .card .sym { width: 16px; height: 16px; }
  .card .hd { padding: 3px 3px 3px; gap: 3px; }
  .card .boxes { padding: 0 5px 5px 3px; gap: 3px; }
  .card .box { font-size: 8.3px; padding: 3px 4px; }
  .card .box::after { right: -4px; }
  .hand .card { --cw: 120px; }
  .hand { justify-content: flex-start; }
  .phases span { padding: 4px 4px; font-size: 9px; }
  .phases span:not(.on) { max-width: 22px; overflow: hidden; text-overflow: clip; }
  .top .brand { display: none; }
  .drop button { font-size: 10.5px; padding: 8px 2px; }
}
.discard .card .topcmd { display: none !important; }

/* ═════════ Comptes / paramètres ═════════ */
.opt { margin: 10px 0; }
.opt .ol { color: var(--mut); font-size: 14px; margin-bottom: 6px; }
.opt.chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.opt.chk input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acc); flex-shrink: 0; }
.opt.chk b { display: block; font-size: 15px; }
.opt.chk small { display: block; color: var(--mut); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.opt.chk:has(input:checked) { border-color: var(--acc); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pill.var { color: var(--acc-ink); background: var(--warn); border-color: var(--warn); font-weight: 700; }
.resume .rg { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; background: var(--panel2); }
.resume .rg .btn { padding: 7px 12px; }
.authf { display: flex; flex-direction: column; gap: 12px; }
.authf label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--mut); }
.authf input[type=text], .authf input[type=password] { width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); padding: 12px 14px; border-radius: 10px; font: 16px var(--sans); }
.authf input:focus { outline: 2px solid var(--acc); border-color: transparent; }
.authf .err { color: var(--bad); font-size: 14px; min-height: 18px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; }
.tile b { display: block; font: 800 26px var(--mono); }
.tile span { color: var(--mut); font-size: 12px; }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.mbox h3.sub { font: 600 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin: 18px 0 8px; }
.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--mut); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.tbl td.pr { color: var(--mut); }
.tbl td.win { color: var(--acc); font-weight: 700; }
.tbl td.loss { color: var(--bad); font-weight: 700; }

/* Extensions */
.seg.multi label:has(input:checked) { background: var(--acc); color: var(--acc-ink); font-weight: 700; }
.sethead { grid-column: 1 / -1; margin: 10px 0 0; font: 700 14px var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.sethead small { font: 500 11px var(--sans); text-transform: none; letter-spacing: 0; color: var(--mut); margin-left: 6px; }
.drop button.oside { border-style: dashed; border-color: #ff7a59; }
.optgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.optgrid .btn { padding: 9px 6px; font-size: 13px; }

/* ═════════ Compilation visible ═════════ */
.cbanner { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; font-family: var(--sans); }
.cb { border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.4; border: 2px solid; animation: cbpulse 2s infinite; }
.cb b { font-family: var(--mono); letter-spacing: .03em; }
.cb.me { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, var(--panel)); }
.cb.op { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, var(--panel)); }
@keyframes cbpulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); } }
.laneglow.cmp-me { background: color-mix(in srgb, var(--warn) 9%, transparent); box-shadow: 0 0 0 2px var(--warn) inset, 0 0 26px color-mix(in srgb, var(--warn) 40%, transparent); }
.laneglow.cmp-op { background: color-mix(in srgb, var(--bad) 8%, transparent); box-shadow: 0 0 0 2px var(--bad) inset, 0 0 26px color-mix(in srgb, var(--bad) 35%, transparent); }
.laneglow.cmp-me.on, .laneglow.cmp-op.on { box-shadow: 0 0 0 2px var(--acc) inset, 0 0 26px color-mix(in srgb, var(--acc) 40%, transparent); }
.proto .status.cmp { opacity: 1; color: #1b1203; background: var(--warn); padding: 2px 7px; border-radius: 4px; animation: cbpulse 1.6s infinite; }
.proto.opp .status.cmp { background: var(--bad); color: #fff; }
.proto.compilable .total { color: var(--warn); border-color: var(--warn); box-shadow: 0 0 12px color-mix(in srgb, var(--warn) 50%, transparent); }
@media (max-width: 900px) { .cb { font-size: 12.5px; padding: 8px 10px; } .proto .status.cmp { font-size: 7.5px; padding: 1px 4px; } }

/* ═════════ Annonces centrales ═════════ */
.feed { position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 55; width: min(520px, calc(100vw - 32px)); pointer-events: none; }
.feed .fbox { pointer-events: none; background: color-mix(in srgb, var(--panel) 95%, transparent); backdrop-filter: blur(10px); border: 2px solid var(--line); border-radius: 18px; padding: 16px 18px 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: fin .25s ease-out; }
@keyframes fin { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.feed .fcards { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.feed .fcards .card { --cw: 128px; }
.feed .ftxt { font: 600 18px/1.4 var(--sans); text-align: center; color: var(--txt); }
.feed .ftag { display: inline-block; font: 800 11px var(--mono); letter-spacing: .1em; padding: 3px 8px; border-radius: 6px; margin-right: 8px; vertical-align: middle; background: #b04fc4; color: #fff; }
.feed .fbar { height: 4px; border-radius: 4px; background: var(--panel2); margin-top: 12px; overflow: hidden; }
.feed .fbar i { display: block; height: 100%; width: 100%; background: var(--acc); transform-origin: left; animation: fbar linear forwards; }
@keyframes fbar { to { transform: scaleX(0); } }
.feed .fact { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font: 12px var(--mono); color: var(--mut); }
.feed .fact button { pointer-events: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font: 600 12px var(--sans); color: var(--txt); }
.feed .fact button + button { margin-left: 6px; }
.feed.opp .fbox { border-color: #ff7a59; }
.feed.mine .fbox { border-color: var(--acc); }
.feed.fx .fbox { border-color: #b04fc4; }
.feed.cancel .fbox { border-color: var(--mut); }
.feed.turn .fbox { border-color: var(--acc); padding: 18px; }
.feed.turn .ftxt { font: 700 24px var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.feed.big .fbox { border-color: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 25%, transparent), 0 20px 60px rgba(0,0,0,.5); }
.feed.big .ftxt { font: 700 22px var(--disp); color: var(--warn); }
.feed.big .ftag { background: var(--warn); color: #1b1203; }
@media (max-width: 640px) { .feed { top: 50%; } .feed .ftxt { font-size: 15px; } .feed .fcards .card { --cw: 104px; } .feed.turn .ftxt { font-size: 19px; } }

.feed .fturn { text-align: center; font: 700 15px var(--disp); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px; }
.feed .flines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feed .flines li { display: flex; gap: 8px; align-items: flex-start; font: 500 15.5px/1.4 var(--sans); padding: 2px 0 2px 8px; border-left: 3px solid #ff7a59; }
.feed .flines li.me { border-left-color: var(--acc); }
.feed .flines .tg { flex-shrink: 0; font: 700 9.5px/1.7 var(--mono); padding: 0 5px; border-radius: 4px; margin-top: 2px; color: #fff; background: #6b7591; }
.feed .tg.tp { background: #2f7de1; } .feed .tg.td { background: #2a9d6f; } .feed .tg.tx { background: #d0453c; } .feed .tg.tr { background: #8a56d6; }
.feed .tg.tf { background: #b04fc4; } .feed .tg.tc { background: #d98a00; } .feed .tg.tw { background: #7d7f8c; }
.feed.big .flines li { font-weight: 700; }
@media (max-width: 640px) { .feed .flines li { font-size: 13.5px; } }

/* Révélations */
.rvb { background: color-mix(in srgb, var(--acc) 8%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--line)); border-radius: 12px; padding: 10px; margin-bottom: 12px; }
.rvt { font: 600 13px var(--mono); color: var(--acc); margin-bottom: 8px; text-align: center; }
.rvinline { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; font: 600 12.5px var(--sans); color: var(--acc); }
.card.revealed { box-shadow: 0 0 0 3px #ffd23f, 0 0 18px rgba(255, 210, 63, .7) !important; }
.card.revealed .peek { background: #ffd23f; color: #1b1203; border-color: #ffd23f; }
.card.revealed .peek::before { content: '👁 '; }

/* Annonce rangée dans un coin quand c'est à vous d'agir */
.feed.docked { top: auto; bottom: 16px; left: auto; right: 16px; transform: none; width: min(360px, calc(100vw - 32px)); opacity: .96; }
.feed.docked .fcards { display: none; }
.feed.docked .ftxt, .feed.docked .flines li { font-size: 13px; }
.feed.docked .fbox { padding: 10px 12px 8px; }
@media (max-width: 640px) { .feed.docked { bottom: 210px; right: 8px; left: 8px; width: auto; } }

.icon.on { border-color: var(--acc); }