/* 1.100 (branding update): type follows the logo. Unbounded (SIL OFL 1.1, see fonts/unbounded-OFL.txt) for headings,
   codes, big numbers and card numbers: Black for display, ExtraBold for the cards. Figtree stays for reading text.
   Each family has one weight, so whatever weight a rule asks for, it gets that one. */
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-900.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-900-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Unbounded Card'; src: url('/fonts/unbounded-800.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Unbounded Card'; src: url('/fonts/unbounded-800-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

/* Lowza — a felt card table. One-screen game: header, opponents rail, table mat, your grid, dock.
   Dark table only (no light theme). Its colors follow the round’s card backs. Every color comes from these tokens. */
:root {
  --felt-0: #0d1019;      /* page edge */
  --felt: #1b2032;        /* the table */
  --felt-hi: #272d44;     /* lamp highlight */
  --surface: #111420;     /* panels, rails, sheets */
  --surface-2: #171b29;   /* inputs, rows */
  --line: #4f5a7d;        /* decorative borders */
  --line-strong: #6976a0; /* borders that carry meaning (3:1+) */
  --paper: #f7f2e6;       /* text + card stock */
  --muted: #c4c9d9;       /* secondary text (7:1 on felt) */
  --accent: #f5bd4f;      /* gold: your turn, primary actions, drop targets */
  --accent-ink: #2b1b00;
  --good: #6fe0a0;
  --bad: #ff7a6b;
  --back: #1d2a5c;        /* card backs: navy with gold lattice */
  /* Card faces ("Parlour colour"): antique value colours to sit with the Victorian backs */
  /* 1.97 "Ink & red": no blue-to-red ramp (Skyjo) and no red-gold-green set. Deep enough for cream numbers to read. */
  --c-neg: #2a2833;
  --c-zero: #7a7068;
  --c-low: #2169cc; /* 1.101: brighter cobalt, so 1–4 never reads as the purple 9–12 (colorblind-safe too) */
  --c-mid: #c8402b;
  --c-high: #6e3a7a;
  --face-ink: #fbf6ea;
  --font-card: 'Unbounded Card', 'Arial Black', system-ui, sans-serif; /* wide and heavy: legible down to opponents' tiny grids */
  --card-ink: #15151f;
  --scrim: rgba(6, 8, 12, 0.66);
  --font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gap: 8px;
  --tap: 44px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-ghost: 50; --z-sheet: 30; --z-tray: 25; --z-toast: 60;
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}

/* The table takes its colors from this round's card backs. */
@property --felt-0 { syntax: '<color>'; inherits: true; initial-value: #0d1019; }
@property --felt { syntax: '<color>'; inherits: true; initial-value: #1b2032; }
@property --felt-hi { syntax: '<color>'; inherits: true; initial-value: #272d44; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #111420; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #171b29; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #4f5a7d; }
@property --line-strong { syntax: '<color>'; inherits: true; initial-value: #6976a0; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #c4c9d9; }
:root { transition: --felt-0 700ms ease, --felt 700ms ease, --felt-hi 700ms ease, --surface 700ms ease, --surface-2 700ms ease, --line 700ms ease, --line-strong 700ms ease, --muted 700ms ease; }
/* THEMES:START */
:root[data-back="1"] { --felt-0: #1a0c0f; --felt: #331a1e; --felt-hi: #46252b; --surface: #201013; --surface-2: #29161a; --line: #7e4e56; --line-strong: #a26771; --muted: #d9c4c8; --scrim: rgba(13, 6, 7, 0.66); }
:root[data-back="2"] { --felt-0: #0e1814; --felt: #1d3028; --felt-hi: #2a4138; --surface: #121e19; --surface-2: #192721; --line: #547869; --line-strong: #6f9a88; --muted: #c4d9d0; --scrim: rgba(7, 12, 10, 0.66); }
:root[data-back="3"] { --felt-0: #140d1a; --felt: #271a32; --felt-hi: #362745; --surface: #191120; --surface-2: #201729; --line: #674f7d; --line-strong: #8669a0; --muted: #cfc4d9; --scrim: rgba(10, 6, 13, 0.66); }
:root[data-back="4"] { --felt-0: #151111; --felt: #292323; --felt-hi: #3a3232; --surface: #1a1616; --surface-2: #221d1d; --line: #6c6060; --line-strong: #8c7d7d; --muted: #d9c4c4; --scrim: rgba(10, 8, 8, 0.66); }
:root[data-back="5"] { --felt-0: #0c191a; --felt: #1a3133; --felt-hi: #254446; --surface: #101f20; --surface-2: #162829; --line: #4e7b7e; --line-strong: #679ea2; --muted: #c4d8d9; --scrim: rgba(6, 12, 13, 0.66); }
:root[data-back="6"] { --felt-0: #160f18; --felt: #2c1e2f; --felt-hi: #3c2b40; --surface: #1c131e; --surface-2: #241a26; --line: #705676; --line-strong: #917198; --muted: #d5c4d9; --scrim: rgba(11, 7, 12, 0.66); }
:root[data-back="7"] { --felt-0: #0d111a; --felt: #1a2232; --felt-hi: #263045; --surface: #111520; --surface-2: #171c29; --line: #4f5d7d; --line-strong: #687aa1; --muted: #c4cbd9; --scrim: rgba(6, 8, 13, 0.66); }
:root[data-back="8"] { --felt-0: #1a0c12; --felt: #331a24; --felt-hi: #462532; --surface: #201016; --surface-2: #29161e; --line: #7e4e61; --line-strong: #a2677e; --muted: #d9c4cc; --scrim: rgba(13, 6, 9, 0.66); }
:root[data-back="9"] { --felt-0: #0c101a; --felt: #1a2133; --felt-hi: #252e46; --surface: #101520; --surface-2: #161c29; --line: #4e5b7e; --line-strong: #6778a2; --muted: #c4cad9; --scrim: rgba(6, 8, 13, 0.66); }
:root[data-back="10"] { --felt-0: #0c1a14; --felt: #1a3328; --felt-hi: #254638; --surface: #102019; --surface-2: #162921; --line: #4e7e6a; --line-strong: #67a289; --muted: #c4d9d0; --scrim: rgba(6, 13, 10, 0.66); }
:root[data-back="11"] { --felt-0: #111514; --felt: #222a27; --felt-hi: #313b37; --surface: #161b19; --surface-2: #1d2320; --line: #5e6e68; --line-strong: #7c8e86; --muted: #c4d9d1; --scrim: rgba(8, 10, 10, 0.66); }
:root[data-back="12"] { --felt-0: #0e1118; --felt: #1d222f; --felt-hi: #2a3041; --surface: #13161e; --surface-2: #191d27; --line: #555e77; --line-strong: #707b99; --muted: #c4cad9; --scrim: rgba(7, 8, 12, 0.66); }
:root[data-back="13"] { --felt-0: #1a0d0d; --felt: #321a1a; --felt-hi: #452626; --surface: #201111; --surface-2: #291717; --line: #7d4f4f; --line-strong: #a16969; --muted: #d9c4c4; --scrim: rgba(13, 6, 6, 0.66); }
:root[data-back="14"] { --felt-0: #0d1019; --felt: #1c2131; --felt-hi: #282f43; --surface: #12151f; --surface-2: #181c28; --line: #525c7a; --line-strong: #6c799d; --muted: #c4c9d9; --scrim: rgba(6, 8, 12, 0.66); }
:root[data-back="15"] { --felt-0: #0f1713; --felt: #1f2e26; --felt-hi: #2c3f36; --surface: #141d18; --surface-2: #1a2520; --line: #587466; --line-strong: #749685; --muted: #c4d9cf; --scrim: rgba(7, 11, 9, 0.66); }
:root[data-back="16"] { --felt-0: #100f18; --felt: #211e2e; --felt-hi: #2e2b40; --surface: #15131d; --surface-2: #1c1a26; --line: #5b5676; --line-strong: #777198; --muted: #c7c4d9; --scrim: rgba(8, 7, 12, 0.66); }
:root[data-back="17"] { --felt-0: #171510; --felt: #2d2920; --felt-hi: #3e392d; --surface: #1c1a14; --surface-2: #25221b; --line: #726b5a; --line-strong: #948b76; --muted: #d9d3c4; --scrim: rgba(11, 10, 8, 0.66); }
:root[data-back="18"] { --felt-0: #1a0f0c; --felt: #331f1a; --felt-hi: #452d26; --surface: #201410; --surface-2: #291b17; --line: #7e594e; --line-strong: #a17568; --muted: #d9c9c4; --scrim: rgba(13, 7, 6, 0.66); }
:root[data-back="19"] { --felt-0: #1a0c0e; --felt: #331a1e; --felt-hi: #46252b; --surface: #201013; --surface-2: #291619; --line: #7e4e55; --line-strong: #a26770; --muted: #d9c4c7; --scrim: rgba(13, 6, 7, 0.66); }
:root[data-back="20"] { --felt-0: #111415; --felt: #22282a; --felt-hi: #30373b; --surface: #16191b; --surface-2: #1d2123; --line: #5e696e; --line-strong: #7b888e; --muted: #c4d2d9; --scrim: rgba(8, 10, 10, 0.66); }
:root[data-back="21"] { --felt-0: #0c181a; --felt: #1a2f33; --felt-hi: #254046; --surface: #101e20; --surface-2: #162629; --line: #4e777e; --line-strong: #6799a2; --muted: #c4d6d9; --scrim: rgba(6, 12, 13, 0.66); }
:root[data-back="22"] { --felt-0: #15180e; --felt: #2a2f1e; --felt-hi: #3b412b; --surface: #1b1e13; --surface-2: #232619; --line: #6e7755; --line-strong: #8e9971; --muted: #d4d9c4; --scrim: rgba(10, 12, 7, 0.66); }
:root[data-back="23"] { --felt-0: #130f18; --felt: #261e2f; --felt-hi: #352b40; --surface: #18131e; --surface-2: #1f1926; --line: #655676; --line-strong: #837198; --muted: #cec4d9; --scrim: rgba(9, 7, 12, 0.66); }
:root[data-back="24"] { --felt-0: #0c111a; --felt: #1a2233; --felt-hi: #253046; --surface: #101620; --surface-2: #161d29; --line: #4e5e7e; --line-strong: #677ba2; --muted: #c4cbd9; --scrim: rgba(6, 8, 13, 0.66); }
:root[data-back="25"] { --felt-0: #1a0c0e; --felt: #331a1d; --felt-hi: #46252a; --surface: #201012; --surface-2: #291619; --line: #7e4e54; --line-strong: #a2676f; --muted: #d9c4c7; --scrim: rgba(13, 6, 7, 0.66); }
:root[data-back="26"] { --felt-0: #121314; --felt: #242528; --felt-hi: #333438; --surface: #171819; --surface-2: #1f1f21; --line: #636469; --line-strong: #808389; --muted: #c4c9d9; --scrim: rgba(9, 9, 10, 0.66); }
:root[data-back="27"] { --felt-0: #0f1715; --felt: #202d2a; --felt-hi: #2d3e3a; --surface: #141c1a; --surface-2: #1b2522; --line: #59736c; --line-strong: #75948c; --muted: #c4d9d4; --scrim: rgba(7, 11, 10, 0.66); }
:root[data-back="28"] { --felt-0: #140e18; --felt: #281e2f; --felt-hi: #382b41; --surface: #1a131e; --surface-2: #221926; --line: #6a5577; --line-strong: #8a7199; --muted: #d1c4d9; --scrim: rgba(10, 7, 12, 0.66); }
:root[data-back="29"] { --felt-0: #1a150c; --felt: #332a1a; --felt-hi: #463a25; --surface: #201a10; --surface-2: #292216; --line: #7e6c4e; --line-strong: #a28c67; --muted: #d9d1c4; --scrim: rgba(13, 10, 6, 0.66); }
:root[data-back="30"] { --felt-0: #0e1913; --felt: #1c3026; --felt-hi: #294236; --surface: #121f18; --surface-2: #182720; --line: #537966; --line-strong: #6e9c85; --muted: #c4d9cf; --scrim: rgba(7, 12, 9, 0.66); }
:root[data-back="31"] { --felt-0: #0e1019; --felt: #1c2130; --felt-hi: #292f42; --surface: #12151f; --surface-2: #181c27; --line: #525c7a; --line-strong: #6d799c; --muted: #c4c9d9; --scrim: rgba(7, 8, 12, 0.66); }
/* THEMES:END */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--felt-0);
  background-image: radial-gradient(130% 75% at 50% 42%, var(--felt-hi) 0%, var(--felt) 48%, var(--felt-0) 100%);
  background-attachment: fixed;
  color: var(--paper);
  font: 16px/1.45 var(--font-body);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
#app {
  min-height: 100%;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.sm { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface-2);
  font-weight: 700; font-size: 16px; text-decoration: none; color: var(--paper);
  transition: transform 120ms var(--ease-out), background-color 150ms, opacity 150ms;
}
.btn:active { transform: scale(0.97); background: var(--surface); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:active { background: color-mix(in srgb, var(--accent) 85%, black); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: color-mix(in srgb, var(--bad) 70%, transparent); color: var(--bad); }
.btn.danger:active { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.btn.small { min-height: var(--tap); padding: 0 16px; font-size: 15px; }
.btn.block { width: 100%; }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface); display: grid; place-items: center; flex: none; padding: 0;
  transition: transform 120ms var(--ease-out), background-color 150ms;
}
.icon-btn:active { transform: scale(0.93); background: var(--surface-2); }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 12px; font-size: 15px; min-height: var(--tap); }

/* ------------------------------------------------------------ home + lobby */
.home, .lobby { max-width: 460px; margin: 0 auto; padding-block: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.wordmark { min-width: 0; display: flex; align-items: center; gap: 14px; padding-block: 8px; }
.wordmark h1 { font: clamp(34px, 11.5vw, 44px)/0.95 var(--font-display); margin: 0; letter-spacing: 0.01em; text-wrap: balance; }
.wordmark p { margin: 6px 0 0; text-wrap: balance; color: var(--muted); font-weight: 600; }
.fan { position: relative; width: 68px; height: 68px; flex: none; }
.fan .card { --w: 36px; position: absolute; left: 16px; top: 6px; transform-origin: 50% 100%; }
.fan .card:nth-child(1) { transform: rotate(-18deg); }
.fan .card:nth-child(3) { transform: rotate(18deg); }
.panel { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 800; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; color: var(--muted); }
.input {
  width: 100%; min-height: 50px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--surface-2); color: var(--paper); padding: 0 14px; font: 600 17px var(--font-body);
}
.input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.input:focus { outline: none; border-color: var(--accent); }
.otp-input { text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--font-display); font-size: 20px; text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line);
  background: transparent; font-weight: 700; font-size: 15px;
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--felt); border-color: var(--paper); }
.seg button[disabled] { opacity: 0.6; cursor: default; }
.seg.even { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.seg.even button { padding: 0 6px; }
.games { display: flex; flex-direction: column; gap: 8px; }
.xfer-code { font: clamp(24px, 8.6vw, 40px)/1 var(--font-display); white-space: nowrap; letter-spacing: 0.12em; text-align: center; padding: 18px 8px; border-radius: 16px; background: var(--surface-2); border: 1.5px dashed var(--line-strong); -webkit-user-select: all; user-select: all; }
.xfer-code span { color: var(--muted); }
.xfer-form { display: flex; gap: 8px; }
.xfer-form .input { flex: 1; min-width: 0; font-size: 18px; letter-spacing: 0.15em; }
.game-row-wrap { display: flex; gap: 8px; align-items: center; }
.game-row-wrap .game-row { flex: 1; min-width: 0; }
.game-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-radius: 14px;
  background: var(--surface-2); border: 1.5px solid var(--line); text-align: left; width: 100%;
}
.game-row .code { font-family: var(--font-display); letter-spacing: 0.12em; font-size: 15px; }
.game-row .meta { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v53 rows: two lines (name or code + 🎉 / who and when), status pill on the right */
.game-row .gr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.game-row .gr-top { display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; line-height: 20px; }
.game-row .gr-top .ttl { font-weight: 800; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-row .gr-top .party-tag { flex: none; font-size: 14px; }
.game-row .gr-main .meta { flex: none; font-size: 13px; }
.game-row > .pill { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
.pill { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--paper); white-space: nowrap; }
.pill.hot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hint { font-size: 15px; color: var(--muted); margin: 0; }
.hint strong { color: var(--paper); }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bigcode { text-align: center; padding-block: 4px; }
.bigcode .lbl { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 800; }
.bigcode .code { font: 54px/1.05 var(--font-display); letter-spacing: 0.14em; margin-top: 4px; }
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.players li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; min-height: 56px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--line); }
.players .nm { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 2px solid var(--line-strong); flex: none; }
.dot.on { background: var(--good); border-color: var(--good); }
.tag { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bot { display: inline-flex; color: var(--muted); }

/* ------------------------------------------------------------ cards */
.card {
  --w: 72px;
  width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * 0.12);
  position: relative; display: grid; place-items: center; flex: none;
  border: 0; padding: 0; cursor: default;
  font-family: var(--font-display); color: var(--card-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.28);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 160ms;
}
.card .num { font-family: var(--font-card); font-weight: 700; font-size: calc(var(--w) * 0.5); line-height: 1; letter-spacing: -0.02em; }
.card .corner { position: absolute; top: 11%; left: 14%; font-family: var(--font-card); font-weight: 700; font-size: calc(var(--w) * 0.16); line-height: 1; }
.card .corner.b { top: auto; left: auto; bottom: 11%; right: 14%; transform: rotate(180deg); }
/* Cream card stock, a softened colour panel with an engraved hairline, serif numerals in cream ink */
.card.face { background: var(--paper); color: var(--face-ink); }
.card.face .num { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.card.face::before {
  content: ''; position: absolute; inset: 7%; border-radius: calc(var(--w) * 0.07);
  background: radial-gradient(110% 80% at 50% 35%, rgba(255, 255, 255, 0.16), transparent 55%, rgba(0, 0, 0, 0.18)), var(--tone);
  box-shadow: inset 0 0 0 max(1px, calc(var(--w) * 0.02)) rgba(255, 248, 230, 0.5);
}
.card.face > * { position: relative; }
.card.face > .corner { position: absolute; }
.t-neg { --tone: var(--c-neg); }
.t-zero { --tone: var(--c-zero); }
.t-low { --tone: var(--c-low); }
.t-mid { --tone: var(--c-mid); }
.t-high { --tone: var(--c-high); }
.card.back {
  background: var(--back-img) center / 100% 100% no-repeat, var(--back);
  border: calc(var(--w) * 0.05) solid var(--paper);
}
/* Card backs: original designs in the style of Victorian decorative backs (1850s–1890s).
   Each game starts on a random one and the deck changes every round, the same for everyone. */
/* BACKS:START */
/* 0 · Moorish star */
:root { --back: #1b2a5e; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2214%22 height=%2214%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpolygon points=%227.00,1.40 8.33,3.79 10.96,3.04 10.21,5.67 12.60,7.00 10.21,8.33 10.96,10.96 8.33,10.21 7.00,12.60 5.67,10.21 3.04,10.96 3.79,8.33 1.40,7.00 3.79,5.67 3.04,3.04 5.67,3.79%22 fill=%22none%22 stroke=%22%23d9b45a%22 stroke-width=%220.6%22/%3E%3Cpath d=%22M0 0L3 3M14 0L11 3M0 14L3 11M14 14L11 11%22 stroke=%22%23d9b45a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%227%22 cy=%227%22 r=%221.1%22 fill=%22%23d9b45a%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%231b2a5e%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23d9b45a%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23d9b45a%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2250%22 cy=%2270%22 r=%2217%22 fill=%22%231b2a5e%22 stroke=%22%23d9b45a%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2214%22 fill=%22none%22 stroke=%22%23d9b45a%22 stroke-width=%220.5%22/%3E%3Cpolygon points=%2250.00,58.00 52.85,63.13 58.49,61.51 56.87,67.15 62.00,70.00 56.87,72.85 58.49,78.49 52.85,76.87 50.00,82.00 47.15,76.87 41.51,78.49 43.13,72.85 38.00,70.00 43.13,67.15 41.51,61.51 47.15,63.13%22 fill=%22%23d9b45a%22/%3E%3Cpolygon points=%2250.00,63.50 51.54,66.28 54.60,65.40 53.72,68.46 56.50,70.00 53.72,71.54 54.60,74.60 51.54,73.72 50.00,76.50 48.46,73.72 45.40,74.60 46.28,71.54 43.50,70.00 46.28,68.46 45.40,65.40 48.46,66.28%22 fill=%22%231b2a5e%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.4%22 fill=%22%23d9b45a%22/%3E%3C/svg%3E"); }
/* 1 · Claret quatrefoil */
:root[data-back="1"] { --back: #7a1c2c; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cg fill=%22none%22 stroke=%22%23f1e3c6%22 stroke-width=%220.55%22 opacity=%220.85%22%3E%3Ccircle cx=%226%22 cy=%223.4%22 r=%222.6%22/%3E%3Ccircle cx=%226%22 cy=%228.6%22 r=%222.6%22/%3E%3Ccircle cx=%223.4%22 cy=%226%22 r=%222.6%22/%3E%3Ccircle cx=%228.6%22 cy=%226%22 r=%222.6%22/%3E%3C/g%3E%3Ccircle cx=%226%22 cy=%226%22 r=%220.9%22 fill=%22%23f1e3c6%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%220.9%22 fill=%22%23f1e3c6%22/%3E%3Ccircle cx=%2212%22 cy=%220%22 r=%220.9%22 fill=%22%23f1e3c6%22/%3E%3Ccircle cx=%220%22 cy=%2212%22 r=%220.9%22 fill=%22%23f1e3c6%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%220.9%22 fill=%22%23f1e3c6%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%237a1c2c%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f1e3c6%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f1e3c6%22 stroke-width=%220.8%22/%3E %3Cellipse cx=%2250%22 cy=%2270%22 rx=%2217%22 ry=%2223%22 fill=%22%237a1c2c%22 stroke=%22%23f1e3c6%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2214%22 ry=%2220%22 fill=%22none%22 stroke=%22%23f1e3c6%22 stroke-width=%220.5%22/%3E%3Cg fill=%22%23f1e3c6%22%3E%3Ccircle cx=%2250%22 cy=%2262%22 r=%225%22/%3E%3Ccircle cx=%2250%22 cy=%2278%22 r=%225%22/%3E%3Ccircle cx=%2242%22 cy=%2270%22 r=%225%22/%3E%3Ccircle cx=%2258%22 cy=%2270%22 r=%225%22/%3E%3C/g%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%224.2%22 fill=%22%237a1c2c%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%221.8%22 fill=%22%23f1e3c6%22/%3E%3C/svg%3E"); }
/* 2 · Green rosette */
:root[data-back="2"] { --back: #1d4b38; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%223%22 height=%223%22 patternUnits=%22userSpaceOnUse%22%3E%3Ccircle cx=%221.5%22 cy=%221.5%22 r=%220.45%22 fill=%22%23e2bf63%22 opacity=%220.55%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%231d4b38%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E %3Cpath d=%22M9 9L24.80 11.50%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L23.26 16.26%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L20.31 20.31%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L16.26 23.26%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L11.50 24.80%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M25.00 9.00A16 16 0 0 1 9.00 25.00%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 9L88.50 24.80%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L83.74 23.26%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L79.69 20.31%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L76.74 16.26%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L75.20 11.50%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91.00 25.00A16 16 0 0 1 75.00 9.00%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 131L75.20 128.50%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L76.74 123.74%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L79.69 119.69%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L83.74 116.74%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L88.50 115.20%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M75.00 131.00A16 16 0 0 1 91.00 115.00%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%221%22/%3E%3Cpath d=%22M9 131L11.50 115.20%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L16.26 116.74%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L20.31 119.69%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L23.26 123.74%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L24.80 128.50%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9.00 115.00A16 16 0 0 1 25.00 131.00%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%221%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2222%22 fill=%22%231d4b38%22 stroke=%22%23e2bf63%22 stroke-width=%221%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(0.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(30.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(60.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(90.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(120.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(150.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(180.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(210.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(240.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(270.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(300.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(330.0 50 70)%22 fill=%22none%22 stroke=%22%23e2bf63%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(0.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(45.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(90.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(135.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(180.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(225.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(270.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(315.0 50 70)%22 fill=%22%23e2bf63%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%223.4%22 fill=%22%231d4b38%22 stroke=%22%23e2bf63%22 stroke-width=%220.8%22/%3E%3C/svg%3E"); }
/* 3 · Mardi Gras */
:root[data-back="3"] { --back: #3d1a5c; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2218%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M6 0L12 9L6 18L0 9Z%22 fill=%22%231f8a4c%22 opacity=%220.75%22/%3E%3Cpath d=%22M6 0L12 9L6 18L0 9Z%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%220.5%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2212%22 cy=%220%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%220%22 cy=%2218%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2212%22 cy=%2218%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226%22 cy=%229%22 r=%220.7%22 fill=%22%23f2c94c%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%233d1a5c%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%226.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2210.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2210.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2213.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2213.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2216.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2216.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2220.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2220.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2223.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2223.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2227.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2227.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2230.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2230.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2234.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2234.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2237.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2237.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2241.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2241.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2244.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2244.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2248.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2248.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2251.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2251.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2255.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2255.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2258.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2258.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2262.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2262.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2265.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2265.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2269.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2269.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2272.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2272.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2275.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2275.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2279.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2279.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2282.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2282.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2286.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2286.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2289.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2289.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%226.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2293.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2220%22 ry=%2222%22 fill=%22%233d1a5c%22 stroke=%22%23f2c94c%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2217%22 ry=%2219%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%220.5%22/%3E%3Cellipse cx=%2250%22 cy=%2252%22 rx=%222.6%22 ry=%229%22 fill=%22%231f8a4c%22 transform=%22rotate(-28 50 62)%22/%3E%3Cellipse cx=%2250%22 cy=%2252%22 rx=%222.6%22 ry=%229%22 fill=%22%23f2c94c%22 transform=%22rotate(0 50 62)%22/%3E%3Cellipse cx=%2250%22 cy=%2252%22 rx=%222.6%22 ry=%229%22 fill=%22%231f8a4c%22 transform=%22rotate(28 50 62)%22/%3E%3Cpath d=%22M34 70C34 62 44 62 50 67C56 62 66 62 66 70C66 78 58 80 50 75C42 80 34 78 34 70Z%22 fill=%22%23f2c94c%22/%3E%3Cellipse cx=%2242.5%22 cy=%2270%22 rx=%224%22 ry=%222.6%22 fill=%22%233d1a5c%22/%3E%3Cellipse cx=%2257.5%22 cy=%2270%22 rx=%224%22 ry=%222.6%22 fill=%22%233d1a5c%22/%3E%3Cpath d=%22M66 70Q72 74 70 82%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
/* 4 · Greek key */
:root[data-back="4"] { --back: #1c1a1a; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 3H6M3 0V6%22 stroke=%22%23c0392b%22 stroke-width=%220.6%22/%3E%3C/pattern%3E%3Cpattern id=%22k%22 width=%2210%22 height=%2210%22 patternUnits=%22userSpaceOnUse%22 x=%224%22 y=%220%22%3E%3Cpath d=%22M0 8.5H6.5V2.5H2.5V5.5H4.5%22 fill=%22none%22 stroke=%22%23e9dcc0%22 stroke-width=%220.9%22/%3E%3Cpath d=%22M6.5 8.5H10%22 stroke=%22%23e9dcc0%22 stroke-width=%220.9%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%231c1a1a%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%223%22 fill=%22none%22 stroke=%22%23e9dcc0%22 stroke-width=%221%22/%3E %3Crect x=%224.5%22 y=%225%22 width=%2291%22 height=%229%22 fill=%22url(%23k)%22/%3E%3Crect x=%224.5%22 y=%22126%22 width=%2291%22 height=%229%22 fill=%22url(%23k)%22/%3E %3Crect x=%2215%22 y=%2215%22 width=%2270%22 height=%22110%22 fill=%22url(%23p)%22/%3E %3Crect x=%2215%22 y=%2215%22 width=%2270%22 height=%22110%22 fill=%22none%22 stroke=%22%23e9dcc0%22 stroke-width=%220.8%22/%3E %3Crect x=%226%22 y=%2216%22 width=%227%22 height=%22108%22 fill=%22none%22 stroke=%22%23c0392b%22 stroke-width=%220.6%22/%3E%3Crect x=%2287%22 y=%2216%22 width=%227%22 height=%22108%22 fill=%22none%22 stroke=%22%23c0392b%22 stroke-width=%220.6%22/%3E %3Cpath d=%22M9.5 18V122M90.5 18V122%22 stroke=%22%23e9dcc0%22 stroke-width=%220.6%22 stroke-dasharray=%222 2%22/%3E %3Crect x=%2234%22 y=%2250%22 width=%2232%22 height=%2240%22 fill=%22%231c1a1a%22 stroke=%22%23e9dcc0%22 stroke-width=%221%22 transform=%22rotate(45 50 70)%22/%3E%3Crect x=%2238%22 y=%2254%22 width=%2224%22 height=%2232%22 fill=%22none%22 stroke=%22%23c0392b%22 stroke-width=%220.8%22 transform=%22rotate(45 50 70)%22/%3E%3Cpolygon points=%2250.00,61.00 52.14,64.84 56.36,63.64 55.16,67.86 59.00,70.00 55.16,72.14 56.36,76.36 52.14,75.16 50.00,79.00 47.86,75.16 43.64,76.36 44.84,72.14 41.00,70.00 44.84,67.86 43.64,63.64 47.86,64.84%22 fill=%22%23c0392b%22 stroke=%22%23e9dcc0%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.6%22 fill=%22%23e9dcc0%22/%3E%3C/svg%3E"); }
/* 5 · Teal arabesque */
:root[data-back="5"] { --back: #0f5a5f; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2220%22 height=%2220%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cg fill=%22none%22 stroke=%22%23eadfc4%22 stroke-width=%220.6%22 opacity=%220.9%22%3E%3Cpath d=%22M0 10C5 2 15 18 20 10%22/%3E%3Cpath d=%22M10 0C2 5 18 15 10 20%22/%3E%3Cpath d=%22M5 6.5c1.5-2 3.5-1 3 1%22/%3E%3Cpath d=%22M15 13.5c-1.5 2-3.5 1-3-1%22/%3E%3C/g%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%221.3%22 fill=%22%23eadfc4%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%221%22 fill=%22%23eadfc4%22/%3E%3Ccircle cx=%2220%22 cy=%220%22 r=%221%22 fill=%22%23eadfc4%22/%3E%3Ccircle cx=%220%22 cy=%2220%22 r=%221%22 fill=%22%23eadfc4%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%221%22 fill=%22%23eadfc4%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%230f5a5f%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23eadfc4%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23eadfc4%22 stroke-width=%220.8%22/%3E %3Cpath d=%22M50 44L70 70L50 96L30 70Z%22 fill=%22%230f5a5f%22 stroke=%22%23eadfc4%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M50 50L65 70L50 90L35 70Z%22 fill=%22none%22 stroke=%22%23eadfc4%22 stroke-width=%220.5%22/%3E%3Cg fill=%22%23eadfc4%22%3E%3Cpath d=%22M50 58C55 64 55 76 50 82C45 76 45 64 50 58Z%22/%3E%3Cpath d=%22M38 70C44 65 56 65 62 70C56 75 44 75 38 70Z%22 opacity=%220.9%22/%3E%3C/g%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.2%22 fill=%22%230f5a5f%22/%3E%3C/svg%3E"); }
/* 6 · Plum trellis */
:root[data-back="6"] { --back: #47224f; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2211%22 height=%2211%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 0L11 11M11 0L0 11%22 stroke=%22%23e6c36e%22 stroke-width=%220.45%22 opacity=%220.8%22/%3E%3Cg fill=%22%23e6c36e%22%3E%3Ccircle cx=%225.5%22 cy=%223.8%22 r=%221%22/%3E%3Ccircle cx=%225.5%22 cy=%227.2%22 r=%221%22/%3E%3Ccircle cx=%223.8%22 cy=%225.5%22 r=%221%22/%3E%3Ccircle cx=%227.2%22 cy=%225.5%22 r=%221%22/%3E%3C/g%3E%3Ccircle cx=%225.5%22 cy=%225.5%22 r=%220.7%22 fill=%22%2347224f%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%2347224f%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.8%22/%3E %3Crect x=%2231%22 y=%2249%22 width=%2238%22 height=%2242%22 rx=%2219%22 fill=%22%2347224f%22 stroke=%22%23e6c36e%22 stroke-width=%221.2%22/%3E%3Crect x=%2234.5%22 y=%2252.5%22 width=%2231%22 height=%2235%22 rx=%2215.5%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.5%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(0.0 50 70)%22 fill=%22%23e6c36e%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(60.0 50 70)%22 fill=%22%23e6c36e%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(120.0 50 70)%22 fill=%22%23e6c36e%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(180.0 50 70)%22 fill=%22%23e6c36e%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(240.0 50 70)%22 fill=%22%23e6c36e%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(300.0 50 70)%22 fill=%22%23e6c36e%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%223.2%22 fill=%22%2347224f%22 stroke=%22%23e6c36e%22 stroke-width=%220.7%22/%3E%3C/svg%3E"); }
/* 7 · Crescent City */
:root[data-back="7"] { --back: #14254a; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpolygon points=%223.00,1.30 3.45,2.38 4.62,2.47 3.73,3.24 4.00,4.38 3.00,3.77 2.00,4.38 2.27,3.24 1.38,2.47 2.55,2.38%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%229.00,7.30 9.45,8.38 10.62,8.47 9.73,9.24 10.00,10.38 9.00,9.77 8.00,10.38 8.27,9.24 7.38,8.47 8.55,8.38%22 fill=%22%23e9dfc3%22/%3E%3Ccircle cx=%229%22 cy=%223%22 r=%220.4%22 fill=%22%23e9dfc3%22/%3E%3Ccircle cx=%223%22 cy=%229%22 r=%220.4%22 fill=%22%23e9dfc3%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%2314254a%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23e9dfc3%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23e9dfc3%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2217%22 cy=%2217%22 r=%225.5%22 fill=%22%2314254a%22 stroke=%22%23e9dfc3%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,12.70 18.06,15.94 21.30,17.00 18.06,18.06 17.00,21.30 15.94,18.06 12.70,17.00 15.94,15.94%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2283%22 cy=%2217%22 r=%225.5%22 fill=%22%2314254a%22 stroke=%22%23e9dfc3%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,12.70 84.06,15.94 87.30,17.00 84.06,18.06 83.00,21.30 81.94,18.06 78.70,17.00 81.94,15.94%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2217%22 cy=%22123%22 r=%225.5%22 fill=%22%2314254a%22 stroke=%22%23e9dfc3%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,118.70 18.06,121.94 21.30,123.00 18.06,124.06 17.00,127.30 15.94,124.06 12.70,123.00 15.94,121.94%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2283%22 cy=%22123%22 r=%225.5%22 fill=%22%2314254a%22 stroke=%22%23e9dfc3%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,118.70 84.06,121.94 87.30,123.00 84.06,124.06 83.00,127.30 81.94,124.06 78.70,123.00 81.94,121.94%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2220.5%22 fill=%22%2314254a%22 stroke=%22%23e9dfc3%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2212.5%22 fill=%22none%22 stroke=%22%23e9dfc3%22 stroke-width=%220.4%22/%3E%3Cpolygon points=%2250.00,52.20 50.48,53.34 51.71,53.44 50.77,54.25 51.06,55.46 50.00,54.81 48.94,55.46 49.23,54.25 48.29,53.44 49.52,53.34%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2257.44,54.03 57.91,55.18 59.15,55.28 58.21,56.08 58.49,57.29 57.44,56.64 56.38,57.29 56.67,56.08 55.72,55.28 56.96,55.18%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2263.17,59.11 63.64,60.26 64.88,60.35 63.94,61.16 64.23,62.37 63.17,61.72 62.11,62.37 62.40,61.16 61.46,60.35 62.69,60.26%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2265.88,66.27 66.36,67.42 67.60,67.52 66.65,68.32 66.94,69.53 65.88,68.88 64.83,69.53 65.11,68.32 64.17,67.52 65.41,67.42%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2264.96,73.87 65.44,75.02 66.67,75.12 65.73,75.92 66.02,77.13 64.96,76.48 63.90,77.13 64.19,75.92 63.25,75.12 64.48,75.02%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2260.61,80.18 61.09,81.32 62.32,81.42 61.38,82.23 61.67,83.43 60.61,82.79 59.55,83.43 59.84,82.23 58.90,81.42 60.13,81.32%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2253.83,83.74 54.31,84.88 55.54,84.98 54.60,85.79 54.89,86.99 53.83,86.35 52.77,86.99 53.06,85.79 52.12,84.98 53.35,84.88%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2246.17,83.74 46.65,84.88 47.88,84.98 46.94,85.79 47.23,86.99 46.17,86.35 45.11,86.99 45.40,85.79 44.46,84.98 45.69,84.88%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2239.39,80.18 39.87,81.32 41.10,81.42 40.16,82.23 40.45,83.43 39.39,82.79 38.33,83.43 38.62,82.23 37.68,81.42 38.91,81.32%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2235.04,73.87 35.52,75.02 36.75,75.12 35.81,75.92 36.10,77.13 35.04,76.48 33.98,77.13 34.27,75.92 33.33,75.12 34.56,75.02%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2234.12,66.27 34.59,67.42 35.83,67.52 34.89,68.32 35.17,69.53 34.12,68.88 33.06,69.53 33.35,68.32 32.40,67.52 33.64,67.42%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2236.83,59.11 37.31,60.26 38.54,60.35 37.60,61.16 37.89,62.37 36.83,61.72 35.77,62.37 36.06,61.16 35.12,60.35 36.36,60.26%22 fill=%22%23e9dfc3%22/%3E%3Cpolygon points=%2242.56,54.03 43.04,55.18 44.28,55.28 43.33,56.08 43.62,57.29 42.56,56.64 41.51,57.29 41.79,56.08 40.85,55.28 42.09,55.18%22 fill=%22%23e9dfc3%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%229.5%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2254%22 cy=%2267.5%22 r=%228.2%22 fill=%22%2314254a%22/%3E%3C/svg%3E"); }
/* 8 · Oxblood sunburst */
:root[data-back="8"] { --back: #5a1530; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%221%22 height=%221%22%3E%3Crect width=%221%22 height=%221%22 fill=%22none%22/%3E%3C/pattern%3E%3CclipPath id=%22c%22%3E%3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22/%3E%3C/clipPath%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%235a1530%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23e5b955%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23e5b955%22 stroke-width=%220.8%22/%3E %3Cg clip-path=%22url(%23c)%22%3E%3Cpath d=%22M50 70L140.0 70.0L139.7 77.8Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L138.0 88.7L136.1 96.3Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L132.2 106.6L128.7 113.6Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L122.8 122.9L117.9 129.0Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L110.2 136.9L104.2 141.9Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L95.0 147.9L88.0 151.6Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L77.8 155.6L70.2 157.7Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L59.4 159.5L51.6 160.0Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L40.6 159.5L32.8 158.3Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L22.2 155.6L14.8 152.8Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L5.0 147.9L-1.6 143.7Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-10.2 136.9L-15.8 131.4Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-22.8 122.9L-27.1 116.4Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-32.2 106.6L-35.1 99.3Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-38.0 88.7L-39.3 81.0Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-40.0 70.0L-39.7 62.2Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-38.0 51.3L-36.1 43.7Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-32.2 33.4L-28.7 26.4Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-22.8 17.1L-17.9 11.0Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L-10.2 3.1L-4.2 -1.9Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L5.0 -7.9L12.0 -11.6Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L22.2 -15.6L29.8 -17.7Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L40.6 -19.5L48.4 -20.0Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L59.4 -19.5L67.2 -18.3Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L77.8 -15.6L85.2 -12.8Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L95.0 -7.9L101.6 -3.7Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L110.2 3.1L115.8 8.6Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L122.8 17.1L127.1 23.6Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L132.2 33.4L135.1 40.7Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3Cpath d=%22M50 70L138.0 51.3L139.3 59.0Z%22 fill=%22%23e5b955%22 opacity=%220.28%22/%3E%3C/g%3E%3Ccircle cx=%2213%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2213%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%229%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%22131%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2216%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2216%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2223%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2223%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2230%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2230%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2237%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2237%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2244%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2244%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2251%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2251%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2258%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2258%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2265%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2265%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2272%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2272%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2279%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2279%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2286%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2286%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2293%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2293%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22100%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22100%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22107%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22107%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22114%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22114%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22121%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22121%22 r=%222.4%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2215%22 fill=%22%235a1530%22 stroke=%22%23e5b955%22 stroke-width=%221.4%22/%3E%3Cpolygon points=%2250.00,58.00 52.85,63.13 58.49,61.51 56.87,67.15 62.00,70.00 56.87,72.85 58.49,78.49 52.85,76.87 50.00,82.00 47.15,76.87 41.51,78.49 43.13,72.85 38.00,70.00 43.13,67.15 41.51,61.51 47.15,63.13%22 fill=%22none%22 stroke=%22%23e5b955%22 stroke-width=%220.8%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%225%22 fill=%22%23e5b955%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222%22 fill=%22%235a1530%22/%3E%3C/svg%3E"); }
/* 9 · Royal scales */
:root[data-back="9"] { --back: #1f3d8a; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2210%22 height=%2210%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M-5 5A5 5 0 0 1 5 5A5 5 0 0 1 15 5M0 10A5 5 0 0 1 10 10M0 0A5 5 0 0 1 10 0%22 fill=%22none%22 stroke=%22%23dfe6f2%22 stroke-width=%220.6%22 opacity=%220.9%22/%3E%3Ccircle cx=%225%22 cy=%227.5%22 r=%220.6%22 fill=%22%23dfe6f2%22/%3E%3Ccircle cx=%220%22 cy=%222.5%22 r=%220.6%22 fill=%22%23dfe6f2%22/%3E%3Ccircle cx=%2210%22 cy=%222.5%22 r=%220.6%22 fill=%22%23dfe6f2%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%231f3d8a%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23dfe6f2%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23dfe6f2%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2250%22 cy=%2270%22 r=%2213%22 fill=%22%231f3d8a%22 stroke=%22%23dfe6f2%22 stroke-width=%220.9%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2210.5%22 fill=%22none%22 stroke=%22%23dfe6f2%22 stroke-width=%220.4%22 stroke-dasharray=%221 1.2%22/%3E%3Cpolygon points=%2257.07,62.93 53.00,70.00 57.07,77.07 50.00,73.00 42.93,77.07 47.00,70.00 42.93,62.93 50.00,67.00%22 fill=%22%239fb4e0%22 opacity=%220.85%22/%3E%3Cpolygon points=%2250.00,53.00 52.64,67.36 67.00,70.00 52.64,72.64 50.00,87.00 47.36,72.64 33.00,70.00 47.36,67.36%22 fill=%22%23dfe6f2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.2%22 fill=%22%231f3d8a%22 stroke=%22%23dfe6f2%22 stroke-width=%220.6%22/%3E%3C/svg%3E"); }
/* 10 · Emerald honeycomb */
:root[data-back="10"] { --back: #0e5a3a; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2210%22 height=%2217.32%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpolygon points=%225.00,-5.77 10.00,-2.88 10.00,2.88 5.00,5.77 0.00,2.88 0.00,-2.89%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.55%22/%3E%3Cpolygon points=%220.00,2.89 5.00,5.78 5.00,11.54 0.00,14.43 -5.00,11.54 -5.00,5.78%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.55%22/%3E%3Cpolygon points=%2210.00,2.89 15.00,5.78 15.00,11.54 10.00,14.43 5.00,11.54 5.00,5.78%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.55%22/%3E%3Cpolygon points=%225.00,11.55 10.00,14.44 10.00,20.20 5.00,23.09 0.00,20.20 0.00,14.44%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.55%22/%3E%3Ccircle cx=%225%22 cy=%220%22 r=%220.9%22 fill=%22%23e6c36e%22/%3E%3Ccircle cx=%225%22 cy=%2217.32%22 r=%220.9%22 fill=%22%23e6c36e%22/%3E%3Ccircle cx=%220%22 cy=%228.66%22 r=%220.9%22 fill=%22%23e6c36e%22/%3E%3Ccircle cx=%2210%22 cy=%228.66%22 r=%220.9%22 fill=%22%23e6c36e%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%230e5a3a%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2217%22 cy=%2217%22 r=%225.5%22 fill=%22%230e5a3a%22 stroke=%22%23e6c36e%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,12.70 18.06,15.94 21.30,17.00 18.06,18.06 17.00,21.30 15.94,18.06 12.70,17.00 15.94,15.94%22 fill=%22%23e6c36e%22/%3E%3Ccircle cx=%2283%22 cy=%2217%22 r=%225.5%22 fill=%22%230e5a3a%22 stroke=%22%23e6c36e%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,12.70 84.06,15.94 87.30,17.00 84.06,18.06 83.00,21.30 81.94,18.06 78.70,17.00 81.94,15.94%22 fill=%22%23e6c36e%22/%3E%3Ccircle cx=%2217%22 cy=%22123%22 r=%225.5%22 fill=%22%230e5a3a%22 stroke=%22%23e6c36e%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,118.70 18.06,121.94 21.30,123.00 18.06,124.06 17.00,127.30 15.94,124.06 12.70,123.00 15.94,121.94%22 fill=%22%23e6c36e%22/%3E%3Ccircle cx=%2283%22 cy=%22123%22 r=%225.5%22 fill=%22%230e5a3a%22 stroke=%22%23e6c36e%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,118.70 84.06,121.94 87.30,123.00 84.06,124.06 83.00,127.30 81.94,124.06 78.70,123.00 81.94,121.94%22 fill=%22%23e6c36e%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2217%22 fill=%22%230e5a3a%22 stroke=%22%23e6c36e%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2214%22 fill=%22none%22 stroke=%22%23e6c36e%22 stroke-width=%220.5%22/%3E%3Cpolygon points=%2250.00,58.00 52.85,63.13 58.49,61.51 56.87,67.15 62.00,70.00 56.87,72.85 58.49,78.49 52.85,76.87 50.00,82.00 47.15,76.87 41.51,78.49 43.13,72.85 38.00,70.00 43.13,67.15 41.51,61.51 47.15,63.13%22 fill=%22%23e6c36e%22/%3E%3Cpolygon points=%2250.00,63.50 51.54,66.28 54.60,65.40 53.72,68.46 56.50,70.00 53.72,71.54 54.60,74.60 51.54,73.72 50.00,76.50 48.46,73.72 45.40,74.60 46.28,71.54 43.50,70.00 46.28,68.46 45.40,65.40 48.46,66.28%22 fill=%22%230e5a3a%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.4%22 fill=%22%23e6c36e%22/%3E%3C/svg%3E"); }
/* 11 · Iron lace */
:root[data-back="11"] { --back: #141414; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2214%22 height=%2220%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 0V20M14 0V20%22 stroke=%22%237fb3a0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M0 10H14%22 stroke=%22%237fb3a0%22 stroke-width=%220.35%22 opacity=%220.7%22/%3E%3Cpath d=%22M7 1.5C3.2 1.5 3.2 7.5 7 7.5C9.2 7.5 9.2 4.4 7.2 4.4%22 fill=%22none%22 stroke=%22%237fb3a0%22 stroke-width=%220.6%22/%3E%3Cpath d=%22M7 18.5C10.8 18.5 10.8 12.5 7 12.5C4.8 12.5 4.8 15.6 6.8 15.6%22 fill=%22none%22 stroke=%22%237fb3a0%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%227%22 cy=%2210%22 r=%221.2%22 fill=%22none%22 stroke=%22%237fb3a0%22 stroke-width=%220.5%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23141414%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%237fb3a0%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%237fb3a0%22 stroke-width=%220.8%22/%3E %3Cellipse cx=%2250%22 cy=%2270%22 rx=%2217%22 ry=%2222%22 fill=%22%23141414%22 stroke=%22%237fb3a0%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2214%22 ry=%2219%22 fill=%22none%22 stroke=%22%237fb3a0%22 stroke-width=%220.5%22/%3E%3Cg fill=%22%237fb3a0%22%3E%3Cpath d=%22M50 54C55 59 55 66 50 72C45 66 45 59 50 54Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22 transform=%22translate(100 0) scale(-1 1)%22/%3E%3Crect x=%2241%22 y=%2273%22 width=%2218%22 height=%223%22 rx=%221%22/%3E%3Cpath d=%22M50 76C52 80 53 83 50 86C47 83 48 80 50 76Z%22/%3E%3C/g%3E%3C/svg%3E"); }
/* 12 · Midnight copper */
:root[data-back="12"] { --back: #151d33; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2216%22 height=%228%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 4C4 0 4 0 8 4S12 8 16 4%22 fill=%22none%22 stroke=%22%23d08a55%22 stroke-width=%220.6%22/%3E%3Cpath d=%22M0 8C4 4 4 4 8 8S12 12 16 8M0 0C4 -4 4 -4 8 0S12 4 16 0%22 fill=%22none%22 stroke=%22%23d08a55%22 stroke-width=%220.3%22 opacity=%220.6%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23151d33%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23d08a55%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23d08a55%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%226.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2210.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2210.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2213.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2213.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2216.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2216.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2220.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2220.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2223.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2223.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2227.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2227.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2230.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2230.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2234.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2234.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2237.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2237.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2241.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2241.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2244.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2244.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2248.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2248.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2251.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2251.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2255.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2255.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2258.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2258.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2262.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2262.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2265.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2265.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2269.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2269.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2272.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2272.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2275.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2275.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2279.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2279.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2282.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2282.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2286.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2286.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2289.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2289.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%226.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2293.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2217%22 fill=%22%23151d33%22 stroke=%22%23d08a55%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2214.5%22 fill=%22none%22 stroke=%22%23d08a55%22 stroke-width=%220.4%22/%3E%3Ccircle cx=%2262.00%22 cy=%2270.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2260.39%22 cy=%2276.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2256.00%22 cy=%2280.39%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2250.00%22 cy=%2282.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2244.00%22 cy=%2280.39%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2239.61%22 cy=%2276.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2238.00%22 cy=%2270.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2239.61%22 cy=%2264.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2244.00%22 cy=%2259.61%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2250.00%22 cy=%2258.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2256.00%22 cy=%2259.61%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2260.39%22 cy=%2264.00%22 r=%221%22 fill=%22%23d08a55%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%228%22 fill=%22%23d08a55%22 opacity=%220.9%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%224.5%22 fill=%22%23151d33%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222%22 fill=%22%23d08a55%22/%3E%3C/svg%3E"); }
/* 13 · Parlour red */
:root[data-back="13"] { --back: #f3ead6; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 3H6M3 0V6%22 stroke=%22%23a52a2a%22 stroke-width=%220.6%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23f3ead6%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23a52a2a%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23a52a2a%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2250%22 cy=%2270%22 r=%2218%22 fill=%22%23f3ead6%22 stroke=%22%23a52a2a%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2215%22 fill=%22none%22 stroke=%22%23a52a2a%22 stroke-width=%220.5%22/%3E%3Cpath d=%22M50 57.5C43.6 61.9 46.4 66.3 50 62.9C53.6 66.3 56.4 61.9 50 57.5Z%22 fill=%22%23a52a2a%22/%3E%3Cpath d=%22M50 62.7L51.6 65.9H48.4Z%22 fill=%22%23a52a2a%22/%3E%3Cpath d=%22M58.5 74C52.1 69.6 54.9 64.4 58.5 68.2C62.1 64.4 64.9 69.6 58.5 74Z%22 fill=%22%23a52a2a%22/%3E%3Ccircle cx=%2250%22 cy=%2276.2%22 r=%221.8%22 fill=%22%23a52a2a%22/%3E%3Ccircle cx=%2248.0%22 cy=%2278.6%22 r=%221.8%22 fill=%22%23a52a2a%22/%3E%3Ccircle cx=%2252.0%22 cy=%2278.6%22 r=%221.8%22 fill=%22%23a52a2a%22/%3E%3Cpath d=%22M50 78L51.4 82.4H48.6Z%22 fill=%22%23a52a2a%22/%3E%3Cpolygon points=%2241.50,65.80 44.52,70.00 41.50,74.20 38.48,70.00%22 fill=%22%23a52a2a%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%221.6%22 fill=%22%23a52a2a%22/%3E%3C/svg%3E"); }
/* 14 · Parlour blue */
:root[data-back="14"] { --back: #f2ecdc; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2211%22 height=%2211%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 0L11 11M11 0L0 11%22 stroke=%22%231f3f8a%22 stroke-width=%220.45%22 opacity=%220.8%22/%3E%3Cg fill=%22%231f3f8a%22%3E%3Ccircle cx=%225.5%22 cy=%223.8%22 r=%221%22/%3E%3Ccircle cx=%225.5%22 cy=%227.2%22 r=%221%22/%3E%3Ccircle cx=%223.8%22 cy=%225.5%22 r=%221%22/%3E%3Ccircle cx=%227.2%22 cy=%225.5%22 r=%221%22/%3E%3C/g%3E%3Ccircle cx=%225.5%22 cy=%225.5%22 r=%220.7%22 fill=%22%23f2ecdc%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23f2ecdc%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%231f3f8a%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%231f3f8a%22 stroke-width=%220.8%22/%3E %3Cellipse cx=%2250%22 cy=%2270%22 rx=%2217%22 ry=%2222%22 fill=%22%23f2ecdc%22 stroke=%22%231f3f8a%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2214%22 ry=%2219%22 fill=%22none%22 stroke=%22%231f3f8a%22 stroke-width=%220.5%22/%3E%3Cg fill=%22%231f3f8a%22%3E%3Cpath d=%22M50 54C55 59 55 66 50 72C45 66 45 59 50 54Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22 transform=%22translate(100 0) scale(-1 1)%22/%3E%3Crect x=%2241%22 y=%2273%22 width=%2218%22 height=%223%22 rx=%221%22/%3E%3Cpath d=%22M50 76C52 80 53 83 50 86C47 83 48 80 50 76Z%22/%3E%3C/g%3E%3C/svg%3E"); }
/* 15 · Magnolia */
:root[data-back="15"] { --back: #1f4030; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cg fill=%22%23f4ecd8%22 opacity=%220.55%22%3E%3Cpath d=%22M0 -3.2C1.6 -1.6 1.6 1.6 0 3.2C-1.6 1.6 -1.6 -1.6 0 -3.2Z%22 transform=%22translate(3 3) rotate(35)%22/%3E%3Cpath d=%22M0 -3.2C1.6 -1.6 1.6 1.6 0 3.2C-1.6 1.6 -1.6 -1.6 0 -3.2Z%22 transform=%22translate(9 9) rotate(-35)%22/%3E%3C/g%3E%3Ccircle cx=%229%22 cy=%223%22 r=%220.6%22 fill=%22%23f4ecd8%22/%3E%3Ccircle cx=%223%22 cy=%229%22 r=%220.6%22 fill=%22%23f4ecd8%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%231f4030%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f4ecd8%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f4ecd8%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2250%22 cy=%2270%22 r=%2221%22 fill=%22%231f4030%22 stroke=%22%23f4ecd8%22 stroke-width=%221.1%22/%3E%3Cellipse cx=%2250%22 cy=%2260.5%22 rx=%225.6%22 ry=%229.5%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(30 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2260.5%22 rx=%225.6%22 ry=%229.5%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(90 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2260.5%22 rx=%225.6%22 ry=%229.5%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(150 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2260.5%22 rx=%225.6%22 ry=%229.5%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(210 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2260.5%22 rx=%225.6%22 ry=%229.5%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(270 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2260.5%22 rx=%225.6%22 ry=%229.5%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(330 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2264%22 rx=%223.4%22 ry=%226%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(0 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2264%22 rx=%223.4%22 ry=%226%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(120 50 70)%22/%3E%3Cellipse cx=%2250%22 cy=%2264%22 rx=%223.4%22 ry=%226%22 fill=%22%23f4ecd8%22 stroke=%22%231f4030%22 stroke-width=%220.6%22 transform=%22rotate(240 50 70)%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%223%22 fill=%22%23e2bf63%22/%3E%3C/svg%3E"); }
/* 16 · Indigo argyle */
:root[data-back="16"] { --back: #2a2350; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2218%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M6 0L12 9L6 18L0 9Z%22 fill=%22%23c2410c%22 opacity=%220.35%22/%3E%3Cpath d=%22M0 0L12 18M12 0L0 18%22 stroke=%22%23f0b429%22 stroke-width=%220.45%22 stroke-dasharray=%221.2 1.2%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%232a2350%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f0b429%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f0b429%22 stroke-width=%220.8%22/%3E %3Cpath d=%22M34 52H66V70C66 82 58 89 50 93C42 89 34 82 34 70Z%22 fill=%22%232a2350%22 stroke=%22%23f0b429%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M37.5 55.5H62.5V70C62.5 80 56 86 50 89.2C44 86 37.5 80 37.5 70Z%22 fill=%22none%22 stroke=%22%23f0b429%22 stroke-width=%220.5%22/%3E%3Cpath d=%22M38 74L50 64L62 74%22 fill=%22none%22 stroke=%22%23c2410c%22 stroke-width=%223%22/%3E%3Cpolygon points=%2250.00,77.80 50.85,79.84 53.04,80.01 51.37,81.44 51.88,83.59 50.00,82.44 48.12,83.59 48.63,81.44 46.96,80.01 49.15,79.84%22 fill=%22%23f0b429%22/%3E%3Cpolygon points=%2250.00,56.60 50.63,58.13 52.28,58.26 51.03,59.33 51.41,60.94 50.00,60.08 48.59,60.94 48.97,59.33 47.72,58.26 49.37,58.13%22 fill=%22%23f0b429%22/%3E%3C/svg%3E"); }
/* 17 · Deco gold */
:root[data-back="17"] { --back: #121212; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%227%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 5.5L6 1.5L12 5.5%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M0 7L6 3L12 7%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%220.35%22 opacity=%220.6%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23121212%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E %3Cpath d=%22M9 9L24.80 11.50%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L23.26 16.26%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L20.31 20.31%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L16.26 23.26%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L11.50 24.80%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M25.00 9.00A16 16 0 0 1 9.00 25.00%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 9L88.50 24.80%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L83.74 23.26%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L79.69 20.31%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L76.74 16.26%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L75.20 11.50%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91.00 25.00A16 16 0 0 1 75.00 9.00%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 131L75.20 128.50%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L76.74 123.74%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L79.69 119.69%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L83.74 116.74%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L88.50 115.20%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M75.00 131.00A16 16 0 0 1 91.00 115.00%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%221%22/%3E%3Cpath d=%22M9 131L11.50 115.20%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L16.26 116.74%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L20.31 119.69%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L23.26 123.74%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L24.80 128.50%22 stroke=%22%23d4af37%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9.00 115.00A16 16 0 0 1 25.00 131.00%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%221%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2213%22 fill=%22%23121212%22 stroke=%22%23d4af37%22 stroke-width=%220.9%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2210.5%22 fill=%22none%22 stroke=%22%23d4af37%22 stroke-width=%220.4%22 stroke-dasharray=%221 1.2%22/%3E%3Cpolygon points=%2257.07,62.93 53.00,70.00 57.07,77.07 50.00,73.00 42.93,77.07 47.00,70.00 42.93,62.93 50.00,67.00%22 fill=%22%23d4af37%22 opacity=%220.85%22/%3E%3Cpolygon points=%2250.00,53.00 52.64,67.36 67.00,70.00 52.64,72.64 50.00,87.00 47.36,72.64 33.00,70.00 47.36,67.36%22 fill=%22%23d4af37%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.2%22 fill=%22%23121212%22 stroke=%22%23d4af37%22 stroke-width=%220.6%22/%3E%3C/svg%3E"); }
/* 18 · Terracotta weave */
:root[data-back="18"] { --back: #8a3b24; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 1H6%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M0 3H6%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M0 5H6%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M7 6V12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M9 6V12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M11 6V12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M1 6V12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M3 6V12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M5 6V12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M6 1H12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M6 3H12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M6 5H12%22 stroke=%22%23f3e2c7%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%238a3b24%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f3e2c7%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f3e2c7%22 stroke-width=%220.8%22/%3E %3Crect x=%2231%22 y=%2249%22 width=%2238%22 height=%2242%22 rx=%2219%22 fill=%22%238a3b24%22 stroke=%22%23f3e2c7%22 stroke-width=%221.2%22/%3E%3Crect x=%2234.5%22 y=%2252.5%22 width=%2231%22 height=%2235%22 rx=%2215.5%22 fill=%22none%22 stroke=%22%23f3e2c7%22 stroke-width=%220.5%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(0.0 50 70)%22 fill=%22%23f3e2c7%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(60.0 50 70)%22 fill=%22%23f3e2c7%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(120.0 50 70)%22 fill=%22%23f3e2c7%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(180.0 50 70)%22 fill=%22%23f3e2c7%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(240.0 50 70)%22 fill=%22%23f3e2c7%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2263.00%22 rx=%223.08%22 ry=%227.00%22 transform=%22rotate(300.0 50 70)%22 fill=%22%23f3e2c7%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%223.2%22 fill=%22%238a3b24%22 stroke=%22%23f3e2c7%22 stroke-width=%220.7%22/%3E%3C/svg%3E"); }
/* 19 · Second line */
:root[data-back="19"] { --back: #7a1424; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2216%22 height=%2216%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0.7999999999999998 5A3.2 3.2 0 0 1 7.2 5Q6.4 4.3 5.6 5Q4.8 4.3 4 5Q3.2 4.3 2.4 5Q1.6 4.3 0.7999999999999998 5Z%22 fill=%22%23f2d27a%22/%3E%3Cpath d=%22M4 5V8%22 stroke=%22%23f2d27a%22 stroke-width=%220.45%22/%3E%3Cpath d=%22M8.8 13A3.2 3.2 0 0 1 15.2 13Q14.4 12.3 13.6 13Q12.8 12.3 12 13Q11.2 12.3 10.4 13Q9.6 12.3 8.8 13Z%22 fill=%22%23f6efe0%22/%3E%3Cpath d=%22M12 13V16%22 stroke=%22%23f2d27a%22 stroke-width=%220.45%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%237a1424%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2213%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2213%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%229%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%22131%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2216%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2216%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2223%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2223%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2230%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2230%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2237%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2237%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2244%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2244%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2251%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2251%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2258%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2258%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2265%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2265%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2272%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2272%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2279%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2279%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2286%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2286%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2293%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2293%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22100%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22100%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22107%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22107%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22114%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22114%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22121%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22121%22 r=%222.4%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2220.5%22 fill=%22%237a1424%22 stroke=%22%23f2d27a%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2217.5%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%220.45%22/%3E%3Cpath d=%22M37 68A13 13 0 0 1 63 68Q60.83 65.4 58.67 68Q56.50 65.4 54.33 68Q52.17 65.4 50.00 68Q47.83 65.4 45.67 68Q43.50 65.4 41.33 68Q39.17 65.4 37.00 68Z%22 fill=%22%23f6efe0%22 stroke=%22%23f2d27a%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M50 55L61.26 67.6%22 stroke=%22%237a1424%22 stroke-width=%220.7%22/%3E%3Cpath d=%22M50 55L56.50 67.6%22 stroke=%22%237a1424%22 stroke-width=%220.7%22/%3E%3Cpath d=%22M50 55L50.00 67.6%22 stroke=%22%237a1424%22 stroke-width=%220.7%22/%3E%3Cpath d=%22M50 55L43.50 67.6%22 stroke=%22%237a1424%22 stroke-width=%220.7%22/%3E%3Cpath d=%22M50 55L38.74 67.6%22 stroke=%22%237a1424%22 stroke-width=%220.7%22/%3E%3Cpath d=%22M50 68V81Q50 84 47 83%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2254%22 r=%221.1%22 fill=%22%23f2d27a%22/%3E%3C/svg%3E"); }
/* 20 · Slate & mint */
:root[data-back="20"] { --back: #263238; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%228%22 height=%228%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Ccircle cx=%222%22 cy=%222%22 r=%221.2%22 fill=%22%238ee3c8%22 opacity=%220.8%22/%3E%3Ccircle cx=%226%22 cy=%226%22 r=%221.2%22 fill=%22%238ee3c8%22 opacity=%220.8%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23263238%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%238ee3c8%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%238ee3c8%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%226.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2210.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2210.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2213.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2213.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2216.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2216.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2220.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2220.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2223.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2223.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2227.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2227.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2230.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2230.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2234.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2234.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2237.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2237.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2241.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2241.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2244.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2244.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2248.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2248.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2251.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2251.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2255.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2255.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2258.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2258.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2262.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2262.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2265.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2265.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2269.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2269.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2272.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2272.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2275.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2275.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2279.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2279.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2282.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2282.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2286.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2286.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2289.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2289.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%226.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2293.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2217%22 fill=%22%23263238%22 stroke=%22%238ee3c8%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2214.5%22 fill=%22none%22 stroke=%22%238ee3c8%22 stroke-width=%220.4%22/%3E%3Ccircle cx=%2262.00%22 cy=%2270.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2260.39%22 cy=%2276.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2256.00%22 cy=%2280.39%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2250.00%22 cy=%2282.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2244.00%22 cy=%2280.39%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2239.61%22 cy=%2276.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2238.00%22 cy=%2270.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2239.61%22 cy=%2264.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2244.00%22 cy=%2259.61%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2250.00%22 cy=%2258.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2256.00%22 cy=%2259.61%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2260.39%22 cy=%2264.00%22 r=%221%22 fill=%22%238ee3c8%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%228%22 fill=%22%238ee3c8%22 opacity=%220.9%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%224.5%22 fill=%22%23263238%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222%22 fill=%22%238ee3c8%22/%3E%3C/svg%3E"); }
/* 21 · Coral reef */
:root[data-back="21"] { --back: #0b4f5c; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2210%22 height=%2210%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M5 2.2V7.8M2.2 5H7.8%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Cg fill=%22%23ff9a7a%22%3E%3Ccircle cx=%225%22 cy=%221.8%22 r=%220.7%22/%3E%3Ccircle cx=%225%22 cy=%228.2%22 r=%220.7%22/%3E%3Ccircle cx=%221.8%22 cy=%225%22 r=%220.7%22/%3E%3Ccircle cx=%228.2%22 cy=%225%22 r=%220.7%22/%3E%3C/g%3E%3Ccircle cx=%220%22 cy=%220%22 r=%220.5%22 fill=%22%23ff9a7a%22/%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%220.5%22 fill=%22%23ff9a7a%22/%3E%3Ccircle cx=%2210%22 cy=%220%22 r=%220.5%22 fill=%22%23ff9a7a%22/%3E%3Ccircle cx=%220%22 cy=%2210%22 r=%220.5%22 fill=%22%23ff9a7a%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%230b4f5c%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2213%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2213%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%229%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%22131%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2216%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2216%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2223%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2223%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2230%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2230%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2237%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2237%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2244%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2244%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2251%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2251%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2258%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2258%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2265%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2265%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2272%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2272%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2279%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2279%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2286%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2286%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2293%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2293%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22100%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22100%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22107%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22107%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22114%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22114%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22121%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22121%22 r=%222.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2222%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%221%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(0.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(30.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(60.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(90.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(120.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(150.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(180.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(210.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(240.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(270.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(300.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2260.50%22 rx=%224.18%22 ry=%229.50%22 transform=%22rotate(330.0 50 70)%22 fill=%22none%22 stroke=%22%23ff9a7a%22 stroke-width=%220.7%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(0.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(45.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(90.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(135.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(180.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(225.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(270.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%2250%22 cy=%2264.50%22 rx=%222.42%22 ry=%225.50%22 transform=%22rotate(315.0 50 70)%22 fill=%22%23ff9a7a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%223.4%22 fill=%22%230b4f5c%22 stroke=%22%23ff9a7a%22 stroke-width=%220.8%22/%3E%3C/svg%3E"); }
/* 22 · Olive garden */
:root[data-back="22"] { --back: #3f4a1f; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cellipse cx=%226%22 cy=%223.80%22 rx=%220.97%22 ry=%222.20%22 transform=%22rotate(0.0 6 6)%22 fill=%22%23e2c97a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%226%22 cy=%223.80%22 rx=%220.97%22 ry=%222.20%22 transform=%22rotate(60.0 6 6)%22 fill=%22%23e2c97a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%226%22 cy=%223.80%22 rx=%220.97%22 ry=%222.20%22 transform=%22rotate(120.0 6 6)%22 fill=%22%23e2c97a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%226%22 cy=%223.80%22 rx=%220.97%22 ry=%222.20%22 transform=%22rotate(180.0 6 6)%22 fill=%22%23e2c97a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%226%22 cy=%223.80%22 rx=%220.97%22 ry=%222.20%22 transform=%22rotate(240.0 6 6)%22 fill=%22%23e2c97a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Cellipse cx=%226%22 cy=%223.80%22 rx=%220.97%22 ry=%222.20%22 transform=%22rotate(300.0 6 6)%22 fill=%22%23e2c97a%22 stroke=%22none%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%226%22 cy=%226%22 r=%220.9%22 fill=%22%233f4a1f%22/%3E%3Ccircle cx=%220%22 cy=%220%22 r=%220.6%22 fill=%22%23e2c97a%22/%3E%3Ccircle cx=%2212%22 cy=%220%22 r=%220.6%22 fill=%22%23e2c97a%22/%3E%3Ccircle cx=%220%22 cy=%2212%22 r=%220.6%22 fill=%22%23e2c97a%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%220.6%22 fill=%22%23e2c97a%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%233f4a1f%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23e2c97a%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23e2c97a%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2217%22 cy=%2217%22 r=%225.5%22 fill=%22%233f4a1f%22 stroke=%22%23e2c97a%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,12.70 18.06,15.94 21.30,17.00 18.06,18.06 17.00,21.30 15.94,18.06 12.70,17.00 15.94,15.94%22 fill=%22%23f4e4b0%22/%3E%3Ccircle cx=%2283%22 cy=%2217%22 r=%225.5%22 fill=%22%233f4a1f%22 stroke=%22%23e2c97a%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,12.70 84.06,15.94 87.30,17.00 84.06,18.06 83.00,21.30 81.94,18.06 78.70,17.00 81.94,15.94%22 fill=%22%23f4e4b0%22/%3E%3Ccircle cx=%2217%22 cy=%22123%22 r=%225.5%22 fill=%22%233f4a1f%22 stroke=%22%23e2c97a%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,118.70 18.06,121.94 21.30,123.00 18.06,124.06 17.00,127.30 15.94,124.06 12.70,123.00 15.94,121.94%22 fill=%22%23f4e4b0%22/%3E%3Ccircle cx=%2283%22 cy=%22123%22 r=%225.5%22 fill=%22%233f4a1f%22 stroke=%22%23e2c97a%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,118.70 84.06,121.94 87.30,123.00 84.06,124.06 83.00,127.30 81.94,124.06 78.70,123.00 81.94,121.94%22 fill=%22%23f4e4b0%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2217%22 ry=%2222%22 fill=%22%233f4a1f%22 stroke=%22%23e2c97a%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2214%22 ry=%2219%22 fill=%22none%22 stroke=%22%23e2c97a%22 stroke-width=%220.5%22/%3E%3Cg fill=%22%23e2c97a%22%3E%3Cpath d=%22M50 54C55 59 55 66 50 72C45 66 45 59 50 54Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22 transform=%22translate(100 0) scale(-1 1)%22/%3E%3Crect x=%2241%22 y=%2273%22 width=%2218%22 height=%223%22 rx=%221%22/%3E%3Cpath d=%22M50 76C52 80 53 83 50 86C47 83 48 80 50 76Z%22/%3E%3C/g%3E%3C/svg%3E"); }
/* 23 · King cake */
:root[data-back="23"] { --back: #2a1a3d; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22 patternTransform=%22rotate(35)%22%3E%3Crect x=%220%22 y=%220%22 width=%224%22 height=%2212%22 fill=%22%236b2fa0%22 opacity=%220.7%22/%3E%3Crect x=%224%22 y=%220%22 width=%224%22 height=%2212%22 fill=%22%231f8a4c%22 opacity=%220.7%22/%3E%3Crect x=%228%22 y=%220%22 width=%224%22 height=%2212%22 fill=%22%23d9a72c%22 opacity=%220.7%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%232a1a3d%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%220.8%22/%3E %3Cellipse cx=%2250%22 cy=%2270%22 rx=%2218%22 ry=%2220%22 fill=%22%232a1a3d%22 stroke=%22%23f2c94c%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2215%22 ry=%2217%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%220.45%22/%3E%3Cpath d=%22M37 77L35 61L42.5 68L50 57L57.5 68L65 61L63 77Z%22 fill=%22%23f2c94c%22/%3E%3Crect x=%2237%22 y=%2277%22 width=%2226%22 height=%224%22 rx=%221%22 fill=%22%23f2c94c%22/%3E%3Ccircle cx=%2235%22 cy=%2260%22 r=%221.6%22 fill=%22%235e2d8c%22/%3E%3Ccircle cx=%2250%22 cy=%2256%22 r=%221.8%22 fill=%22%235e2d8c%22/%3E%3Ccircle cx=%2265%22 cy=%2260%22 r=%221.6%22 fill=%22%235e2d8c%22/%3E%3Ccircle cx=%2243%22 cy=%2279%22 r=%221%22 fill=%22%232a1a3d%22/%3E%3Ccircle cx=%2250%22 cy=%2279%22 r=%221%22 fill=%22%232a1a3d%22/%3E%3Ccircle cx=%2257%22 cy=%2279%22 r=%221%22 fill=%22%232a1a3d%22/%3E%3C/svg%3E"); }
/* 24 · Sapphire night */
:root[data-back="24"] { --back: #12306b; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpolygon points=%223.00,1.30 3.45,2.38 4.62,2.47 3.73,3.24 4.00,4.38 3.00,3.77 2.00,4.38 2.27,3.24 1.38,2.47 2.55,2.38%22 fill=%22%23f5f7ff%22/%3E%3Cpolygon points=%229.00,7.30 9.45,8.38 10.62,8.47 9.73,9.24 10.00,10.38 9.00,9.77 8.00,10.38 8.27,9.24 7.38,8.47 8.55,8.38%22 fill=%22%23f5f7ff%22/%3E%3Ccircle cx=%229%22 cy=%223%22 r=%220.4%22 fill=%22%23f5f7ff%22/%3E%3Ccircle cx=%223%22 cy=%229%22 r=%220.4%22 fill=%22%23f5f7ff%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%2312306b%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f5f7ff%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f5f7ff%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2250%22 cy=%2270%22 r=%2217%22 fill=%22%2312306b%22 stroke=%22%23f5f7ff%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2214%22 fill=%22none%22 stroke=%22%23f5f7ff%22 stroke-width=%220.5%22/%3E%3Cpolygon points=%2250.00,58.00 52.85,63.13 58.49,61.51 56.87,67.15 62.00,70.00 56.87,72.85 58.49,78.49 52.85,76.87 50.00,82.00 47.15,76.87 41.51,78.49 43.13,72.85 38.00,70.00 43.13,67.15 41.51,61.51 47.15,63.13%22 fill=%22%23f5f7ff%22/%3E%3Cpolygon points=%2250.00,63.50 51.54,66.28 54.60,65.40 53.72,68.46 56.50,70.00 53.72,71.54 54.60,74.60 51.54,73.72 50.00,76.50 48.46,73.72 45.40,74.60 46.28,71.54 43.50,70.00 46.28,68.46 45.40,65.40 48.46,66.28%22 fill=%22%2312306b%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.4%22 fill=%22%23f5f7ff%22/%3E%3C/svg%3E"); }
/* 25 · Crimson check */
:root[data-back="25"] { --back: #8b1020; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Crect width=%223%22 height=%223%22 fill=%22%23f2d27a%22 opacity=%220.28%22/%3E%3Crect x=%223%22 y=%223%22 width=%223%22 height=%223%22 fill=%22%23f2d27a%22 opacity=%220.28%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%238b1020%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%226.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2210.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2210.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2213.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2213.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2216.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2216.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2220.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2220.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2223.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2223.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2227.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2227.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2230.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2230.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2234.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2234.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2237.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2237.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2241.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2241.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2244.7%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2244.7%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2248.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2248.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2251.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2251.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2255.1%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2255.1%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2258.6%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2258.6%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2262.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2262.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2265.5%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2265.5%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2269.0%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2269.0%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2272.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2272.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2275.9%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2275.9%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2279.4%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2279.4%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2282.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2282.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2286.3%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2286.3%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2289.8%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2289.8%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.2%22 cy=%226.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.2%22 cy=%22133.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2210.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2213.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2216.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2220.4%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2223.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2227.4%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2230.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2234.3%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2237.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2241.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2244.7%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2248.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2251.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2255.1%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2258.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2262.1%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2265.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2269.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2272.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2275.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2279.4%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2282.9%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2286.3%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2289.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2293.3%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%2296.8%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22100.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22103.7%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22107.2%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22110.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22114.1%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22117.6%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22121.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22124.5%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%226.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Ccircle cx=%2293.5%22 cy=%22128.0%22 r=%220.9%22 fill=%22%23f2d27a%22/%3E%3Cpath d=%22M34 52H66V70C66 82 58 89 50 93C42 89 34 82 34 70Z%22 fill=%22%238b1020%22 stroke=%22%23f2d27a%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M37.5 55.5H62.5V70C62.5 80 56 86 50 89.2C44 86 37.5 80 37.5 70Z%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%220.5%22/%3E%3Cpath d=%22M38 74L50 64L62 74%22 fill=%22none%22 stroke=%22%23f2d27a%22 stroke-width=%223%22/%3E%3Cpolygon points=%2250.00,77.80 50.85,79.84 53.04,80.01 51.37,81.44 51.88,83.59 50.00,82.44 48.12,83.59 48.63,81.44 46.96,80.01 49.15,79.84%22 fill=%22%23f2d27a%22/%3E%3Cpolygon points=%2250.00,56.60 50.63,58.13 52.28,58.26 51.03,59.33 51.41,60.94 50.00,60.08 48.59,60.94 48.97,59.33 47.72,58.26 49.37,58.13%22 fill=%22%23f2d27a%22/%3E%3C/svg%3E"); }
/* 26 · Gunmetal suits */
:root[data-back="26"] { --back: #2b2d33; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2212%22 height=%2212%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 1H6%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M0 3H6%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M0 5H6%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M7 6V12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M9 6V12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M11 6V12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22/%3E%3Cpath d=%22M1 6V12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M3 6V12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M5 6V12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M6 1H12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M6 3H12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3Cpath d=%22M6 5H12%22 stroke=%22%23c9ced6%22 stroke-width=%220.55%22 opacity=%220.55%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%232b2d33%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23c9ced6%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23c9ced6%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2250%22 cy=%2270%22 r=%2218%22 fill=%22%232b2d33%22 stroke=%22%23c9ced6%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2215%22 fill=%22none%22 stroke=%22%23c9ced6%22 stroke-width=%220.5%22/%3E%3Cpath d=%22M50 57.5C43.6 61.9 46.4 66.3 50 62.9C53.6 66.3 56.4 61.9 50 57.5Z%22 fill=%22%23c9ced6%22/%3E%3Cpath d=%22M50 62.7L51.6 65.9H48.4Z%22 fill=%22%23c9ced6%22/%3E%3Cpath d=%22M58.5 74C52.1 69.6 54.9 64.4 58.5 68.2C62.1 64.4 64.9 69.6 58.5 74Z%22 fill=%22%23e05a4f%22/%3E%3Ccircle cx=%2250%22 cy=%2276.2%22 r=%221.8%22 fill=%22%23c9ced6%22/%3E%3Ccircle cx=%2248.0%22 cy=%2278.6%22 r=%221.8%22 fill=%22%23c9ced6%22/%3E%3Ccircle cx=%2252.0%22 cy=%2278.6%22 r=%221.8%22 fill=%22%23c9ced6%22/%3E%3Cpath d=%22M50 78L51.4 82.4H48.6Z%22 fill=%22%23c9ced6%22/%3E%3Cpolygon points=%2241.50,65.80 44.52,70.00 41.50,74.20 38.48,70.00%22 fill=%22%23e05a4f%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%221.6%22 fill=%22%23c9ced6%22/%3E%3C/svg%3E"); }
/* 27 · Gaslight */
:root[data-back="27"] { --back: #1e3a33; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2210%22 height=%223.2%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 0.8H10%22 stroke=%22%23e8dcc0%22 stroke-width=%220.9%22 opacity=%220.55%22/%3E%3Cpath d=%22M0 1.7H10%22 stroke=%22%231e3a33%22 stroke-width=%220.4%22 opacity=%220.6%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%231e3a33%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23e8dcc0%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E %3Cpath d=%22M9 9L24.80 11.50%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L23.26 16.26%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L20.31 20.31%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L16.26 23.26%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L11.50 24.80%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M25.00 9.00A16 16 0 0 1 9.00 25.00%22 fill=%22none%22 stroke=%22%23e8dcc0%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 9L88.50 24.80%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L83.74 23.26%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L79.69 20.31%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L76.74 16.26%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L75.20 11.50%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91.00 25.00A16 16 0 0 1 75.00 9.00%22 fill=%22none%22 stroke=%22%23e8dcc0%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 131L75.20 128.50%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L76.74 123.74%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L79.69 119.69%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L83.74 116.74%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L88.50 115.20%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M75.00 131.00A16 16 0 0 1 91.00 115.00%22 fill=%22none%22 stroke=%22%23e8dcc0%22 stroke-width=%221%22/%3E%3Cpath d=%22M9 131L11.50 115.20%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L16.26 116.74%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L20.31 119.69%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L23.26 123.74%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L24.80 128.50%22 stroke=%22%23e8dcc0%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9.00 115.00A16 16 0 0 1 25.00 131.00%22 fill=%22none%22 stroke=%22%23e8dcc0%22 stroke-width=%221%22/%3E%3Crect x=%2233%22 y=%2247%22 width=%2234%22 height=%2246%22 rx=%2217%22 fill=%22%231e3a33%22 stroke=%22%23e8dcc0%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M43 58H57L55 55H45Z%22 fill=%22%23e8dcc0%22/%3E%3Cpath d=%22M50 50V55%22 stroke=%22%23e8dcc0%22 stroke-width=%221%22/%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%221.2%22 fill=%22%23e8dcc0%22/%3E%3Cpath d=%22M44 58L45.5 78H54.5L56 58Z%22 fill=%22none%22 stroke=%22%23e8dcc0%22 stroke-width=%221%22/%3E%3Cpath d=%22M50 58V78M44.7 68H55.3%22 stroke=%22%23e8dcc0%22 stroke-width=%220.4%22/%3E%3Cpath d=%22M50 61C53.5 65.5 53.5 70 50 73C46.5 70 46.5 65.5 50 61Z%22 fill=%22%23ffb84d%22/%3E%3Cpath d=%22M50 65C51.5 67 51.5 69 50 70.5C48.5 69 48.5 67 50 65Z%22 fill=%22%231e3a33%22 opacity=%220.5%22/%3E%3Cpath d=%22M43 78H57L55.5 81H44.5Z%22 fill=%22%23e8dcc0%22/%3E%3Cpath d=%22M50 81V88M46 88H54%22 stroke=%22%23e8dcc0%22 stroke-width=%221.2%22/%3E%3C/svg%3E"); }
/* 28 · Lilac waves */
:root[data-back="28"] { --back: #3a1f4a; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2216%22 height=%228%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M0 4C4 0 4 0 8 4S12 8 16 4%22 fill=%22none%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Cpath d=%22M0 8C4 4 4 4 8 8S12 12 16 8M0 0C4 -4 4 -4 8 0S12 4 16 0%22 fill=%22none%22 stroke=%22%23d6cde8%22 stroke-width=%220.3%22 opacity=%220.6%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%233a1f4a%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23d6cde8%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23d6cde8%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2213%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2213%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2220%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2227%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2234%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2241%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2248%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2255%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2262%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2269%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2276%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%229%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2283%22 cy=%22131%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2216%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2216%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2223%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2223%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2230%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2230%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2237%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2237%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2244%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2244%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2251%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2251%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2258%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2258%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2265%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2265%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2272%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2272%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2279%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2279%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2286%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2286%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%2293%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%2293%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22100%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22100%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22107%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22107%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22114%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22114%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%229%22 cy=%22121%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2291%22 cy=%22121%22 r=%222.4%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2213%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.9%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2210.5%22 fill=%22none%22 stroke=%22%23d6cde8%22 stroke-width=%220.4%22 stroke-dasharray=%221 1.2%22/%3E%3Cpolygon points=%2257.07,62.93 53.00,70.00 57.07,77.07 50.00,73.00 42.93,77.07 47.00,70.00 42.93,62.93 50.00,67.00%22 fill=%22%23f0c6e0%22 opacity=%220.85%22/%3E%3Cpolygon points=%2250.00,53.00 52.64,67.36 67.00,70.00 52.64,72.64 50.00,87.00 47.36,72.64 33.00,70.00 47.36,67.36%22 fill=%22%23d6cde8%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%222.2%22 fill=%22%233a1f4a%22 stroke=%22%23d6cde8%22 stroke-width=%220.6%22/%3E%3C/svg%3E"); }
/* 29 · Ochre stipple */
:root[data-back="29"] { --back: #6b4a12; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%223%22 height=%223%22 patternUnits=%22userSpaceOnUse%22%3E%3Ccircle cx=%221.5%22 cy=%221.5%22 r=%220.45%22 fill=%22%23f6e7c1%22 opacity=%220.55%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%236b4a12%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f6e7c1%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E %3Cpath d=%22M9 9L24.80 11.50%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L23.26 16.26%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L20.31 20.31%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L16.26 23.26%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 9L11.50 24.80%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M25.00 9.00A16 16 0 0 1 9.00 25.00%22 fill=%22none%22 stroke=%22%23f6e7c1%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 9L88.50 24.80%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L83.74 23.26%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L79.69 20.31%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L76.74 16.26%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 9L75.20 11.50%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91.00 25.00A16 16 0 0 1 75.00 9.00%22 fill=%22none%22 stroke=%22%23f6e7c1%22 stroke-width=%221%22/%3E%3Cpath d=%22M91 131L75.20 128.50%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L76.74 123.74%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L79.69 119.69%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L83.74 116.74%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M91 131L88.50 115.20%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M75.00 131.00A16 16 0 0 1 91.00 115.00%22 fill=%22none%22 stroke=%22%23f6e7c1%22 stroke-width=%221%22/%3E%3Cpath d=%22M9 131L11.50 115.20%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L16.26 116.74%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L20.31 119.69%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L23.26 123.74%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9 131L24.80 128.50%22 stroke=%22%23f6e7c1%22 stroke-width=%220.8%22/%3E%3Cpath d=%22M9.00 115.00A16 16 0 0 1 25.00 131.00%22 fill=%22none%22 stroke=%22%23f6e7c1%22 stroke-width=%221%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2217%22 ry=%2222%22 fill=%22%236b4a12%22 stroke=%22%23f6e7c1%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2214%22 ry=%2219%22 fill=%22none%22 stroke=%22%23f6e7c1%22 stroke-width=%220.5%22/%3E%3Cg fill=%22%23f6e7c1%22%3E%3Cpath d=%22M50 54C55 59 55 66 50 72C45 66 45 59 50 54Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22/%3E%3Cpath d=%22M50 72C52 64 60 61 64 66C66 70 62 74 58 71C60 69 58 67 56 69C54 71 52 72 50 72Z%22 transform=%22translate(100 0) scale(-1 1)%22/%3E%3Crect x=%2241%22 y=%2273%22 width=%2218%22 height=%223%22 rx=%221%22/%3E%3Cpath d=%22M50 76C52 80 53 83 50 86C47 83 48 80 50 76Z%22/%3E%3C/g%3E%3C/svg%3E"); }
/* 30 · Hunter pinstripe */
:root[data-back="30"] { --back: #17402c; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%224%22 height=%224%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Cpath d=%22M2 0V4%22 stroke=%22%23efe6cc%22 stroke-width=%220.4%22 opacity=%220.6%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%2317402c%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23efe6cc%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23efe6cc%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2217%22 cy=%2217%22 r=%225.5%22 fill=%22%2317402c%22 stroke=%22%23efe6cc%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,12.70 18.06,15.94 21.30,17.00 18.06,18.06 17.00,21.30 15.94,18.06 12.70,17.00 15.94,15.94%22 fill=%22%23d9b45a%22/%3E%3Ccircle cx=%2283%22 cy=%2217%22 r=%225.5%22 fill=%22%2317402c%22 stroke=%22%23efe6cc%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,12.70 84.06,15.94 87.30,17.00 84.06,18.06 83.00,21.30 81.94,18.06 78.70,17.00 81.94,15.94%22 fill=%22%23d9b45a%22/%3E%3Ccircle cx=%2217%22 cy=%22123%22 r=%225.5%22 fill=%22%2317402c%22 stroke=%22%23efe6cc%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2217.00,118.70 18.06,121.94 21.30,123.00 18.06,124.06 17.00,127.30 15.94,124.06 12.70,123.00 15.94,121.94%22 fill=%22%23d9b45a%22/%3E%3Ccircle cx=%2283%22 cy=%22123%22 r=%225.5%22 fill=%22%2317402c%22 stroke=%22%23efe6cc%22 stroke-width=%220.8%22/%3E%3Cpolygon points=%2283.00,118.70 84.06,121.94 87.30,123.00 84.06,124.06 83.00,127.30 81.94,124.06 78.70,123.00 81.94,121.94%22 fill=%22%23d9b45a%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2218%22 fill=%22%2317402c%22 stroke=%22%23efe6cc%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%2215%22 fill=%22none%22 stroke=%22%23efe6cc%22 stroke-width=%220.5%22/%3E%3Cpath d=%22M50 57.5C43.6 61.9 46.4 66.3 50 62.9C53.6 66.3 56.4 61.9 50 57.5Z%22 fill=%22%23efe6cc%22/%3E%3Cpath d=%22M50 62.7L51.6 65.9H48.4Z%22 fill=%22%23efe6cc%22/%3E%3Cpath d=%22M58.5 74C52.1 69.6 54.9 64.4 58.5 68.2C62.1 64.4 64.9 69.6 58.5 74Z%22 fill=%22%23d9b45a%22/%3E%3Ccircle cx=%2250%22 cy=%2276.2%22 r=%221.8%22 fill=%22%23efe6cc%22/%3E%3Ccircle cx=%2248.0%22 cy=%2278.6%22 r=%221.8%22 fill=%22%23efe6cc%22/%3E%3Ccircle cx=%2252.0%22 cy=%2278.6%22 r=%221.8%22 fill=%22%23efe6cc%22/%3E%3Cpath d=%22M50 78L51.4 82.4H48.6Z%22 fill=%22%23efe6cc%22/%3E%3Cpolygon points=%2241.50,65.80 44.52,70.00 41.50,74.20 38.48,70.00%22 fill=%22%23d9b45a%22/%3E%3Ccircle cx=%2250%22 cy=%2270%22 r=%221.6%22 fill=%22%23efe6cc%22/%3E%3C/svg%3E"); }
/* 31 · Fat Tuesday confetti */
:root[data-back="31"] { --back: #121a33; --back-img: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22%3E%3Cdefs%3E%3Cpattern id=%22p%22 width=%2216%22 height=%2216%22 patternUnits=%22userSpaceOnUse%22 x=%229%22 y=%229%22%3E%3Crect x=%221.1%22 y=%222.5%22 width=%221.8%22 height=%221%22 fill=%22%239b4dca%22 transform=%22rotate(0 2 3)%22/%3E%3Ccircle cx=%228%22 cy=%221.5%22 r=%220.9%22 fill=%22%232fb36b%22/%3E%3Crect x=%2212.1%22 y=%225.5%22 width=%221.8%22 height=%221%22 fill=%22%23f2c94c%22 transform=%22rotate(80 13 6)%22/%3E%3Ccircle cx=%225%22 cy=%229%22 r=%220.9%22 fill=%22%232fb36b%22/%3E%3Crect x=%2210.1%22 y=%2211.5%22 width=%221.8%22 height=%221%22 fill=%22%239b4dca%22 transform=%22rotate(160 11 12)%22/%3E%3Ccircle cx=%221.5%22 cy=%2214%22 r=%220.9%22 fill=%22%23f2c94c%22/%3E%3Crect x=%227.1%22 y=%2214.5%22 width=%221.8%22 height=%221%22 fill=%22%23f2c94c%22 transform=%22rotate(240 8 15)%22/%3E%3Ccircle cx=%2214.5%22 cy=%221%22 r=%220.9%22 fill=%22%232fb36b%22/%3E%3C/pattern%3E%3C/defs%3E %3Crect width=%22100%22 height=%22140%22 fill=%22%23121a33%22/%3E %3Crect x=%224%22 y=%224%22 width=%2292%22 height=%22132%22 rx=%225%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%221.2%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22url(%23p)%22/%3E %3Crect x=%229%22 y=%229%22 width=%2282%22 height=%22122%22 rx=%223%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%220.8%22/%3E %3Cellipse cx=%2250%22 cy=%2270%22 rx=%2220%22 ry=%2222%22 fill=%22%23121a33%22 stroke=%22%23f2c94c%22 stroke-width=%221.2%22/%3E%3Cellipse cx=%2250%22 cy=%2270%22 rx=%2217%22 ry=%2219%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%220.5%22/%3E%3Cellipse cx=%2250%22 cy=%2252%22 rx=%222.6%22 ry=%229%22 fill=%22%239b4dca%22 transform=%22rotate(-28 50 62)%22/%3E%3Cellipse cx=%2250%22 cy=%2252%22 rx=%222.6%22 ry=%229%22 fill=%22%23f2c94c%22 transform=%22rotate(0 50 62)%22/%3E%3Cellipse cx=%2250%22 cy=%2252%22 rx=%222.6%22 ry=%229%22 fill=%22%239b4dca%22 transform=%22rotate(28 50 62)%22/%3E%3Cpath d=%22M34 70C34 62 44 62 50 67C56 62 66 62 66 70C66 78 58 80 50 75C42 80 34 78 34 70Z%22 fill=%22%23f2c94c%22/%3E%3Cellipse cx=%2242.5%22 cy=%2270%22 rx=%224%22 ry=%222.6%22 fill=%22%23121a33%22/%3E%3Cellipse cx=%2257.5%22 cy=%2270%22 rx=%224%22 ry=%222.6%22 fill=%22%23121a33%22/%3E%3Cpath d=%22M66 70Q72 74 70 82%22 fill=%22none%22 stroke=%22%23f2c94c%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
/* BACKS:END */
.card.slot.waiting { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--paper) 16%, transparent); background: color-mix(in srgb, var(--felt-0) 35%, transparent); }
.card.tap { cursor: pointer; }
.card.target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 80%, transparent), 0 4px 10px rgba(0, 0, 0, 0.28); }
.card.tap:active { transform: scale(0.95); }
.card.sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent), 0 12px 22px rgba(0, 0, 0, 0.45); }
.card.drop-over { transform: scale(1.07); box-shadow: 0 0 0 3px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent); }
.card.lifting { opacity: 0.25; }
/* Your next move on the deck, the card you drew, or the discard: a slow light travels around its edge.
   Only these piles move; your grid and the opponents stay still. Nothing blinks. */
@property --shine { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes shine { to { --shine: 360deg; } }
.pile .card.can::after, .toss-tag.can::after {
  content: ''; position: absolute; inset: -6px; border-radius: calc(var(--w) * 0.12 + 6px); padding: 3.5px; pointer-events: none; z-index: 5;
  background: conic-gradient(from var(--shine), rgba(245, 189, 79, 0.2) 0deg 180deg, rgba(255, 190, 40, 0.55) 250deg, #ffc93c 310deg, #fffbe6 350deg, rgba(255, 201, 60, 0.6) 357deg, rgba(245, 189, 79, 0.2) 360deg);
  filter: drop-shadow(0 0 4px rgba(255, 196, 50, 0.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: shine 3s linear infinite; animation-delay: var(--shine-delay, 0ms);
}
.toss-tag.can::after { inset: -5px; border-radius: 999px; padding: 3px; }
.pile .card.locked.can::after { display: none; } /* the blurred discard's light goes on its Toss tag instead */
@media (prefers-reduced-motion: reduce) { .pile .card.can::after, .toss-tag.can::after { animation: none !important; } }

.card.pop { animation: pop 300ms var(--ease-out); }
@keyframes pop { 0% { transform: scale(0.8) rotateY(70deg); } 100% { transform: none; } }
.card.clearing { animation: glow 330ms ease-out forwards; z-index: 2; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { transform: scale(1.06); box-shadow: 0 0 0 3px var(--accent), 0 0 24px var(--accent); } }
.card.in-flight { visibility: hidden; }
.card.flip-in { animation: flipin 170ms ease-out both; }
@keyframes flipin { 0% { transform: perspective(500px) rotateY(-90deg) scale(1.04); } 100% { transform: none; } }
.flight { position: fixed; left: 0; top: 0; z-index: var(--z-ghost); pointer-events: none; transform-origin: 0 0; will-change: transform; }
.flight .card { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); }
.flip3d { position: relative; transform-style: preserve-3d; }
.flip3d > .card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip3d > .flip-face { transform: rotateY(180deg); }
.draggable { touch-action: none; }
.hx { position: absolute; inset: 0; z-index: 4; border-radius: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hx input { visibility: hidden; position: absolute; width: 1px; height: 1px; margin: 0; }
.pile { position: relative; }
.tray button { position: relative; }
.drag-ghost { position: fixed; left: 0; top: 0; transform-origin: 0 0; z-index: var(--z-ghost); pointer-events: none; will-change: transform; }
.drag-ghost .card { box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5); }

/* ------------------------------------------------------------ game layout */
.game { height: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding-block: 6px 8px; }
/* #app is border-box, so its safe-area padding comes out of the 100dvh and the dock always stays on screen. */
/* Set by JS (not :has(), which iOS Safari sometimes fails to re-check when the screen swaps,
   leaving the table short until you pull the page down). */
#app.in-game { height: 100dvh; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 8px; flex: none; }
.bar .info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.bar .info .code { font-family: var(--font-display); letter-spacing: 0.14em; font-size: 15px; }
.bar .info .sub { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.conn { font-size: 13px; font-weight: 700; color: var(--accent); text-align: center; }

.opps-wrap { position: relative; flex: none; }
.opps { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.opps::-webkit-scrollbar { display: none; }
.opp {
  flex: 1 0 auto; min-width: 118px; max-width: 180px; padding: 7px 8px 8px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1.5px solid var(--line); text-align: left;
  display: flex; flex-direction: column; gap: 6px; position: relative; scroll-snap-align: start;
  transition: border-color 200ms, box-shadow 200ms;
}
.opp.turn { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.opp-head { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; min-height: 20px; }
.opp-head .nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.opp-head .sc { font-variant-numeric: tabular-nums; font-weight: 800; }
.opp-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; min-height: 18px; }
.chip { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.chip.out { background: var(--paper); color: var(--felt); }
.mini { gap: 3px !important; }
.mini .card { --w: 23px; border-width: 1.5px; border-radius: 4px; box-shadow: none; }
.mini .card::after { display: none; }
.mini .card .num { font-size: 12px; }
.mini .card .corner { display: none; }
.mini .card.face::before { inset: 0; border-radius: 3px; box-shadow: none; }
.opp-sub { display: none; font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.opp-head .bot { flex: none; }
.opp-head .sc { margin-left: auto; }
/* 3+ opponents: everyone fits on screen in a grid, no sideways scrolling */
.opps.compact { display: grid; grid-template-columns: repeat(var(--oc), minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 0; }
.opps.compact .opp { min-width: 0; max-width: none; padding: 6px; gap: 4px; border-radius: 12px; container-type: inline-size; }
.opps.compact .opp-head { font-size: 13px; gap: 4px; }
.opps.compact .opp-head .dot { width: 8px; height: 8px; }
.opps.compact .bot .i { width: 12px; height: 12px; }
.opps.compact .opp-head .dot { margin-right: 1px; }
.opps.compact .mini { gap: 2px !important; }
.opps.compact .mini .card { --w: min(calc((100cqw - 6px) / 4), 3.2dvh); border-radius: 3px; border-width: 1px; } /* 1.84: never taller than a sliver of the screen, so your own cards stay the biggest */
.opps.compact .mini .card .num { font-size: clamp(9px, 11cqw, 12px); }
.opps.compact .opp-foot { font-size: 11px; min-height: 0; }
.opps.compact .chip { font-size: 10px; padding: 1px 5px; }
.opps.compact.rows2 .opp-foot { display: none; }
.opps.compact.rows2 .opp.turn .opp-head .nm { color: var(--accent); }
.bubble { position: absolute; top: -8px; right: -4px; font-size: 26px; animation: float 2.4s ease-out forwards; pointer-events: none; }
@keyframes float { 0% { transform: translateY(8px) scale(0.6); opacity: 0; } 15% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }

.mat {
  flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 14px;
  padding: 10px 12px; border-radius: 22px;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--felt-hi) 70%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--line) 60%, transparent);
}
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
.pile .lbl { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pile .card { --w: min(17vw, 9.2dvh, 80px); }
.pile.held .card.face { animation: pop 260ms var(--ease-out); }

.status {
  flex: none; min-height: 44px; padding: 8px 14px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  font-weight: 700; font-size: 15px; line-height: 1.25; text-wrap: balance;
}
.status.mine { background: var(--accent); color: var(--accent-ink); }
.status.wait { color: var(--muted); }
.status .i { width: 18px; height: 18px; }

.me { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; container-type: size; }
.me-inner { display: flex; flex-direction: column; gap: 6px; position: relative; }
.me-inner > .bubble { top: -14px; right: 0; }
.me-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.me-head b { color: var(--paper); }
.grid { display: grid; grid-template-columns: repeat(var(--cols, 4), auto); gap: var(--gap); justify-content: center; }
.me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 28px - 2 * var(--gap)) / 3 * 0.714), 112px); }

.dock { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; position: relative; }
.dock .btn { min-height: var(--tap); padding: 0 14px; font-size: 15px; gap: 6px; }
.tray {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: var(--z-tray);
  display: grid; grid-template-columns: repeat(5, var(--tap)); gap: 6px; padding: 8px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  animation: rise 160ms var(--ease-out);
}
.tray button { width: var(--tap); height: var(--tap); border: 0; background: none; font-size: 26px; border-radius: 12px; }
.tray button:active { background: var(--surface-2); transform: scale(1.15); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.rotate { display: none; }
.chat-btn { position: relative; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: var(--card-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.say {
  position: absolute; left: 6px; right: 6px; top: 28px; z-index: 3; pointer-events: none;
  background: var(--paper); color: var(--felt); font-size: 13px; font-weight: 700; line-height: 1.25;
  padding: 6px 9px; border-radius: 12px 12px 12px 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  animation: rise-t 180ms var(--ease-out);
}
.sheet.chat-sheet, .sheet:has(.chat-list) { height: min(78dvh, calc(var(--vv-h, 100dvh) - 24px)); max-height: none; }
.chat-list { list-style: none; margin: 0; padding: 0 2px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.chat-list .empty { color: var(--muted); text-align: center; margin: auto 0; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: 12px; font-weight: 800; color: var(--muted); margin: 6px 0 2px 10px; }
.msg .when { font-weight: 600; opacity: 0.8; }
.msg .text { background: var(--surface-2); border: 1.5px solid var(--line); padding: 8px 12px; border-radius: 16px 16px 16px 6px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.msg.mine .text { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); border-radius: 16px 16px 6px 16px; }
.chat-form { display: flex; gap: 8px; flex: none; }
.chat-form .input { flex: 1; min-width: 0; font-size: 16px; }
.quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; padding-bottom: 2px; }
.quick::-webkit-scrollbar { display: none; }
.pill-btn { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; font-weight: 700; font-size: 14px; white-space: nowrap; }
.pill-btn:active { background: var(--surface-2); }
.beer { position: fixed; z-index: var(--z-toast); pointer-events: none; line-height: 1; will-change: transform, opacity; }

/* ------------------------------------------------------------ sheets */
.scrim { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%); background: var(--scrim); z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; animation: fade 160ms; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px; animation: slide 220ms var(--ease-out);
}
@keyframes slide { from { transform: translateY(40px); opacity: 0; } }
/* v81: on wide screens (min-width 1000px and min-height 560px, decided in JS by dockOn) chat, scores, coins and the move log
   dock to the right of the table instead of covering it. The table stays playable and shifts over to make room. */
:root { --dock-w: 380px; }
html.docked #app { padding-right: calc(var(--dock-w) + 20px); }
.scrim.side { left: auto; width: var(--dock-w); background: none; pointer-events: none; align-items: stretch; animation: none; }
.scrim.side .sheet {
  pointer-events: auto; max-width: none; max-height: none; height: 100%; border-radius: 0;
  border: 0; border-left: 1.5px solid var(--line); padding-bottom: 20px; animation: dock-in 220ms var(--ease-out);
}
@keyframes dock-in { from { transform: translateX(32px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scrim.side .sheet { animation: none; } }
.sheet > * { flex-shrink: 0; } /* scroll the sheet, never squash its tables */
.sheet > .chat-list { flex: 1 1 auto; min-height: 0; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet h2 { margin: 0; font: 26px/1.1 var(--font-display); text-wrap: balance; padding-top: 6px; }
.sheet h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.sheet p, .sheet li { margin: 0; color: var(--paper); font-size: 15px; line-height: 1.5; }
.sheet ol, .sheet ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.sheet .grid .card { --w: min(calc((100vw - 60px - 3 * var(--gap)) / 4), 80px); }
.scores { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.scores th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); text-align: right; padding: 6px 4px; font-weight: 800; }
.scores th:first-child, .scores td:first-child { text-align: left; }
.scores td { padding: 10px 4px; border-top: 1px solid var(--line); text-align: right; font-weight: 700; }
.scores tr.rwin td { color: var(--accent); }
.scores tr.rwin td:first-child .pl::before { content: '★ '; }
.scores .rw { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px; color: var(--accent); font-weight: 800; vertical-align: 1px; }
.announce { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 4px; }
.announce > .i { width: 48px; height: 48px; color: var(--accent); animation: crown 520ms var(--ease-out) both; }
@keyframes crown { 0% { transform: translateY(-18px) scale(0.4) rotate(-20deg); opacity: 0; } 60% { transform: translateY(2px) scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }
.announce .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.announce h2 { font: 30px/1.1 var(--font-display); margin: 2px 0 0; text-wrap: balance; color: var(--paper); }
.announce.game h2 { font-size: 34px; color: var(--accent); }
.announce p { color: var(--muted); font-size: 15px; text-wrap: balance; }
.rounds-wrap { overflow-x: auto; margin: 0 -4px; }
.rounds { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 100%; }
.rounds th, .rounds td { padding: 8px 6px; text-align: right; font-size: 14px; white-space: nowrap; }
.rounds th { font-size: 12px; color: var(--muted); font-weight: 800; letter-spacing: 0.06em; }
.rounds th:first-child, .rounds td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); font-weight: 700; }
.rounds td { border-top: 1px solid var(--line); }
.rounds td.rwin { color: var(--accent); font-weight: 800; }
.rounds td.tot { font-weight: 800; }
.rounds sup { font-size: 10px; color: var(--bad); margin-left: 1px; }
.x2 { font-size: 12px; background: var(--bad); color: var(--card-ink); border-radius: 6px; padding: 1px 6px; margin-left: 6px; font-weight: 800; }
.log { list-style: none; padding: 0 !important; gap: 0 !important; }
.log li { font-size: 15px; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--line); }
.log li:first-child { color: var(--paper); border-top: 0; }
.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend .card { --w: 40px; }
.winner { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--accent); }
.winner .i { width: 44px; height: 44px; }
.winner h2 { color: var(--paper); }

#toast {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  background: var(--paper); color: var(--felt); font-weight: 700; font-size: 15px; padding: 11px 18px; border-radius: 22px;
  z-index: var(--z-toast); width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); text-align: center;
  text-wrap: balance; animation: rise-t 180ms var(--ease-out);
}
/* Deal recap: a small list, left-aligned, one line each (it was one long sentence that ballooned into a circle). */
#toast[hidden] { display: none !important; } /* v63: .lines sets display:flex, which beat the hidden attribute, so the deal note never went away */
#toast.lines { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 16px; border-radius: 18px; font-size: 15px; }
#toast.lines .tl { display: flex; gap: 10px; align-items: baseline; }
#toast.lines .ic { flex: none; width: 1.3em; text-align: center; }
@keyframes rise-t { from { opacity: 0; transform: translate(-50%, -8px); } }

@media (max-height: 760px) {
  .opps.compact.rows2 .mini { display: none; }
  .opps.compact.rows2 .opp-sub { display: block; }
}
@media (max-height: 700px) {
  .opp-foot { display: none; }
  .game { gap: 6px; }
  .mat { padding-block: 6px; }
}
@media (max-height: 600px) {
  .opp .mini { display: none; }
  .opp { min-width: 0; flex: 0 0 auto; }
}
/* Phone on its side: opponents on the left, your cards in the middle, piles and buttons on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .game {
    --mew: min(calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 50px) * 0.96 + 24px), 40vw);
    max-width: none; display: grid; column-gap: 14px; row-gap: 6px; padding-block: 6px;
    grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(176px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "bar me mat" "conn me mat" "opps me mat" "opps me status" "opps me dock";
  }
  .bar { grid-area: bar; }
  .conn { grid-area: conn; }
  .opps-wrap { grid-area: opps; min-height: 0; container-type: inline-size; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  .opps-wrap::-webkit-scrollbar { display: none; }
  .mat { grid-area: mat; align-self: center; gap: 10px; padding: 8px; }
  .status { grid-area: status; min-height: 0; padding: 7px 10px; font-size: 14px; }
  .me { grid-area: me; min-height: 0; }
  .dock { grid-area: dock; }
  .dock .btn { padding: 0 12px; }
  .pile .card { --w: clamp(40px, min(15dvh, 6.4vw), 66px); }
  .bar .info .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bar .icon-btn { width: 40px; height: 40px; }
  .bar .info .code { font-size: 13px; letter-spacing: 0.08em; }
  .pile .lbl { font-size: 11px; }
  /* opponents stack in a column (two side by side when there are lots) */
  .opps, .opps.compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: visible; padding: 0; }
  .opps.compact { grid-template-columns: repeat(min(var(--oc), 2), minmax(0, 1fr)); }
  .opp, .opps.compact .opp { min-width: 0; max-width: none; padding: 6px; container-type: inline-size; }
  .opp .mini { display: grid; }
  /* 5+ opponents: names and scores only, so the whole table fits without scrolling */
  .opps.compact.rows2 .mini { display: none; }
  .opps.compact.rows2 .opp-sub { display: block; }
  .opp .mini .card { --w: min(calc((100cqw - 9px) / 4), 26px); }
  .opp-foot { display: none; }
  @container (max-width: 230px) { .opps.compact .opp-head .bot, .opps.compact .opp-head .dot { display: none; } }
  #toast { top: calc(10px + env(safe-area-inset-top, 0px)); }
}
/* 1.84: computers with a short screen (a laptop) use the same side-by-side table as a phone on its side. With the chat panel
   docked beside it that only fits on wider screens, so narrower ones keep the stacked table. */
@media (orientation: landscape) and (min-width: 1000px) and (max-height: 999px) {
  html:not(.docked) .game {
    --mew: min(calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 50px) * 0.96 + 24px), 40vw);
    max-width: none; display: grid; column-gap: 14px; row-gap: 6px; padding-block: 6px;
    grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(176px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "bar me mat" "conn me mat" "opps me mat" "opps me status" "opps me dock";
  }
  html:not(.docked) .bar { grid-area: bar; }
  html:not(.docked) .conn { grid-area: conn; }
  html:not(.docked) .opps-wrap { grid-area: opps; min-height: 0; container-type: inline-size; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  html:not(.docked) .opps-wrap::-webkit-scrollbar { display: none; }
  html:not(.docked) .mat { grid-area: mat; align-self: center; gap: 10px; padding: 8px; }
  html:not(.docked) .status { grid-area: status; min-height: 0; padding: 7px 10px; font-size: 14px; }
  html:not(.docked) .me { grid-area: me; min-height: 0; }
  html:not(.docked) .dock { grid-area: dock; }
  html:not(.docked) .dock .btn { padding: 0 12px; }
  html:not(.docked) .pile .card { --w: clamp(40px, min(15dvh, 6.4vw), 66px); }
  html:not(.docked) .bar .info .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html:not(.docked) .bar .icon-btn { width: 40px; height: 40px; }
  html:not(.docked) .bar .info .code { font-size: 13px; letter-spacing: 0.08em; }
  html:not(.docked) .pile .lbl { font-size: 11px; }
  /* opponents stack in a column (two side by side when there are lots) */
  html:not(.docked) .opps, html:not(.docked) .opps.compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: visible; padding: 0; }
  html:not(.docked) .opps.compact { grid-template-columns: repeat(min(var(--oc), 2), minmax(0, 1fr)); }
  html:not(.docked) .opp, html:not(.docked) .opps.compact .opp { min-width: 0; max-width: none; padding: 6px; container-type: inline-size; }
  html:not(.docked) .opp .mini { display: grid; }
  /* 5+ opponents: names and scores only, so the whole table fits without scrolling */
  html:not(.docked) .opps.compact.rows2 .mini { display: none; }
  html:not(.docked) .opps.compact.rows2 .opp-sub { display: block; }
  html:not(.docked) .opp .mini .card { --w: min(calc((100cqw - 9px) / 4), 26px); }
  html:not(.docked) .opp-foot { display: none; }
  @container (max-width: 230px) { html:not(.docked) .opps.compact .opp-head .bot, html:not(.docked) .opps.compact .opp-head .dot { display: none; } }
  html:not(.docked) #toast { top: calc(10px + env(safe-area-inset-top, 0px)); }
}
@media (orientation: landscape) and (min-width: 1300px) and (max-height: 999px) {
  html.docked .game {
    --mew: min(calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 50px) * 0.96 + 24px), 40vw);
    max-width: none; display: grid; column-gap: 14px; row-gap: 6px; padding-block: 6px;
    grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(176px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "bar me mat" "conn me mat" "opps me mat" "opps me status" "opps me dock";
  }
  html.docked .bar { grid-area: bar; }
  html.docked .conn { grid-area: conn; }
  html.docked .opps-wrap { grid-area: opps; min-height: 0; container-type: inline-size; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
  html.docked .opps-wrap::-webkit-scrollbar { display: none; }
  html.docked .mat { grid-area: mat; align-self: center; gap: 10px; padding: 8px; }
  html.docked .status { grid-area: status; min-height: 0; padding: 7px 10px; font-size: 14px; }
  html.docked .me { grid-area: me; min-height: 0; }
  html.docked .dock { grid-area: dock; }
  html.docked .dock .btn { padding: 0 12px; }
  html.docked .pile .card { --w: clamp(40px, min(15dvh, 6.4vw), 66px); }
  html.docked .bar .info .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  html.docked .bar .icon-btn { width: 40px; height: 40px; }
  html.docked .bar .info .code { font-size: 13px; letter-spacing: 0.08em; }
  html.docked .pile .lbl { font-size: 11px; }
  /* opponents stack in a column (two side by side when there are lots) */
  html.docked .opps, html.docked .opps.compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; overflow: visible; padding: 0; }
  html.docked .opps.compact { grid-template-columns: repeat(min(var(--oc), 2), minmax(0, 1fr)); }
  html.docked .opp, html.docked .opps.compact .opp { min-width: 0; max-width: none; padding: 6px; container-type: inline-size; }
  html.docked .opp .mini { display: grid; }
  /* 5+ opponents: names and scores only, so the whole table fits without scrolling */
  html.docked .opps.compact.rows2 .mini { display: none; }
  html.docked .opps.compact.rows2 .opp-sub { display: block; }
  html.docked .opp .mini .card { --w: min(calc((100cqw - 9px) / 4), 26px); }
  html.docked .opp-foot { display: none; }
  @container (max-width: 230px) { html.docked .opps.compact .opp-head .bot, html.docked .opps.compact .opp-head .dot { display: none; } }
  html.docked #toast { top: calc(10px + env(safe-area-inset-top, 0px)); }
  html.docked .game { --mew: min(calc((100dvh - 50px) * 0.96 + 24px), calc(100vw - var(--dock-w) - 560px)); grid-template-columns: minmax(140px, 1fr) var(--mew) minmax(260px, 1fr); }
}

/* 1.84: Bigger cards (a switch in the game menu): your grid gets the room. Piles, opponents and the status bar give up a little. */
html.big-cards .me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 26px - 2 * var(--gap)) / 3 * 0.714), 140px); }
html.big-cards .me-head { font-size: 16px; }
html.big-cards .pile .card { --w: min(14vw, 7.4dvh, 68px); }
html.big-cards .mat { padding-block: 6px; gap: 10px; }
html.big-cards .pile .lbl { font-size: 11px; }
html.big-cards .status { min-height: 38px; padding-block: 6px; }
html.big-cards .mini .card { --w: 19px; }
html.big-cards .opp { padding-block: 5px 6px; gap: 4px; }
html.big-cards .game { gap: 6px; }
/* 1.84: iPads and computers: the table grows with the screen instead of staying phone-sized. */
@media (min-width: 700px) and (min-height: 900px) and (orientation: portrait), (min-width: 1000px) and (min-height: 1000px) {
  .game { max-width: min(780px, 100%); }
  .me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 30px - 2 * var(--gap)) / 3 * 0.714), 156px); }
  html.big-cards .me .grid .card { --w: min(calc((100cqw - 3 * var(--gap)) / 4), calc((100cqh - 30px - 2 * var(--gap)) / 3 * 0.714), 180px); }
  .pile .card { --w: min(15vw, 11dvh, 112px); }
  .mini .card { --w: 30px; }
  .mini .card .num { font-size: 15px; }
  .opps.compact .mini .card { --w: min(calc((100cqw - 6px) / 4), 30px); }
  .opps.compact .mini .card .num { font-size: clamp(9px, 11cqw, 15px); }
  html.big-cards .pile .card { --w: min(13vw, 9dvh, 96px); }
  html.big-cards .mini .card { --w: 26px; }
  html.big-cards .opps.compact .mini .card { --w: min(calc((100cqw - 6px) / 4), 26px); }
  .opp { max-width: 260px; }
  .opp-head { font-size: 16px; }
  .me-head { font-size: 16px; }
  .status { font-size: 17px; min-height: 50px; }
  .bar .info .code { font-size: 18px; }
  .bar .info .sub { font-size: 15px; }
  .dock .btn { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- voice messages ---------- */
.chat-form .mic { flex: none; width: 48px; padding: 0; position: relative; }
.chat-form .rec { display: none; }
.chat-form.recording .mic, .chat-form.recording .input, .chat-form.recording .send { display: none; }
.chat-form.recording .rec { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding-left: 2px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a4f; flex: none; animation: recpulse 1.1s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity: 0.35; transform: scale(0.75); } }
.rec-time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 17px; }
.rec-hint { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-send { flex: none; width: 48px; padding: 0; position: relative; }
.rec-cancel { flex: none; }
.msg .vmsg { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; min-width: 200px; }
.vplay { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.msg.mine .vplay { background: var(--accent-ink); color: var(--accent); }
.vplay:active { transform: scale(0.92); }
.vplay .i { width: 16px; height: 16px; fill: currentColor; stroke-width: 1.5; }
.vmsg.loading .vplay .i { animation: recpulse 0.9s ease-in-out infinite; }
.vwave { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; }
.vwave b { flex: 1; max-width: 3px; min-width: 2px; border-radius: 2px; background: currentColor; opacity: 0.35; transition: opacity 0.12s; }
.vwave b.on, .vmsg:not(.playing) .vwave b.done { opacity: 1; }
.vdur { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .rec-dot, .vmsg.loading .vplay .i { animation: none; } }

/* ---------- discard is off-limits once a card has been drawn ---------- */
.pile .card.locked { filter: blur(2.5px) saturate(0.5) brightness(0.8); opacity: 0.6; transition: filter 0.18s, opacity 0.18s; }
.pile .card.locked.target { filter: blur(1px) saturate(0.7); opacity: 0.85; }
.toss-tag { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1.5px solid var(--line-strong); color: var(--paper);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pile .card.locked { transition: none; } }

/* ---------- accounts, leaderboard, room names ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.hint.ok { color: var(--good); }
.hint.bad { color: var(--bad); }
#su-msg:empty { display: none; }
.acct-row .who-am-i { display: flex; align-items: center; gap: 12px; }
.acct-row .who-am-i > div { display: flex; flex-direction: column; min-width: 0; }
.acct-row .who-am-i b { font-size: 18px; }
.acct-row .who-am-i .hint { font-size: 14px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--accent-ink); font: 20px/1 var(--font-display); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-row > div { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; }
.stat-row.two { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.longest { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.longest b { color: var(--paper); }
.stat-row b { font: 24px/1.1 var(--font-display); }
.stat-row span { font-size: 12px; color: var(--muted); font-weight: 700; }
.sheet .keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.keys li { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--line); min-height: 56px; }
.keys .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; }
.keys .when { font-size: 13px; color: var(--muted); font-weight: 600; }
.rec-code { font-size: 26px; letter-spacing: 0.06em; }
.scores.board td, .scores.board th { padding-inline: 3px; }
.scores.board td:first-child { color: var(--muted); width: 1.6em; }
.scores.board td.nm { text-align: left; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores.board th:nth-child(2) { text-align: left; }
.scores.board tr.you-row td { color: var(--accent); }
.room-title { text-align: center; font: 26px/1.15 var(--font-display); overflow-wrap: anywhere; }
.bar .info .code.named { font-family: var(--font-body); font-weight: 800; letter-spacing: 0; font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn .pts { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 14px; }

/* reactions: emoji pop inside the sender's area only */
.react-layer { position: fixed; z-index: var(--z-tray); pointer-events: none; overflow: hidden; border-radius: 16px; }
.react-emoji { position: absolute; line-height: 1; will-change: transform, opacity; }
.dock .btn.icon-only { padding: 0; width: var(--tap); min-width: var(--tap); justify-content: center; }
.h2h { color: var(--accent); font-weight: 800; }
.h2h-line { margin: 0; font-weight: 600; }
.h2h-line b { color: var(--accent); }
.scores.board td.nm .vs { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.h2h-list .rec { font: 18px/1 var(--font-display); padding-right: 8px; }
.h2h-list .rec.up { color: var(--good); }
.h2h-list .rec.down { color: var(--bad); }

/* first-game tips */
/* 1.84: what's new list and first-Party notes */
.sheet ul.wn { list-style: none; padding-left: 0; }
.sheet ul.wn li { padding-left: 0; }
.learn { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.learn p { margin: 0; font-size: 15px; line-height: 1.45; }
/* 1.84: Past games */
.past-list { display: flex; flex-direction: column; gap: 8px; }
.past { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 14px; }
.past summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.past summary::-webkit-details-marker { display: none; }
.past .ps-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.past .ps-top { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.past .meta { font-size: 13px; color: var(--muted); font-weight: 600; }
.past .pill { flex: none; }
.sheet .past ol.ps-stand { list-style: none; margin: 0; padding: 0 12px 10px; gap: 0; }
.sheet .past ol.ps-stand li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sheet .past ol.ps-stand li.is-you { color: var(--accent); font-weight: 800; }
.past .hint { padding: 0 12px 10px; }
/* 1.84: pass & play */
.hs-names { display: flex; flex-direction: column; gap: 8px; }
.hs-row { display: flex; gap: 8px; align-items: center; }
.hs-row .input { flex: 1; min-width: 0; }
.pass-cover { position: fixed; inset: 0; z-index: 55; border: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(120% 90% at 50% 30%, var(--felt-hi), var(--felt-0)); color: var(--paper); padding: 24px; text-align: center; animation: fade 160ms; }
.pass-cover .pc-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pass-cover .pc-name { font: 44px/1.05 var(--font-display); color: var(--accent); overflow-wrap: anywhere; }
.pass-cover .pc-what { font-size: 18px; font-weight: 700; }
.pass-cover .pc-tap { margin-top: 18px; font-size: 15px; color: var(--muted); font-weight: 700; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--line); }
/* 1.86: grouped game menu with switches */
.menu-code { margin-top: -6px; }
.menu-code .link { color: var(--accent); font-weight: 700; padding: 0; min-height: 0; background: none; border: 0; }
.menu-group { display: flex; flex-direction: column; gap: 8px; }
.menu-group .row { display: flex; gap: 8px; }
.menu-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.sw-list { display: flex; flex-direction: column; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.sw-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; min-height: 56px; width: 100%; }
.sw-row:first-child { border-top: 0; }
.sw-row .sw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-row .sw-t b { font-size: 16px; color: var(--paper); }
.sw-row .sw-t small { font-size: 13px; color: var(--muted); font-weight: 600; }
.sw { flex: none; width: 50px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); position: relative; transition: background 160ms; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: transform 160ms var(--ease-out); }
.sw-row[aria-checked="true"] .sw { background: var(--good); }
.sw-row[aria-checked="true"] .sw::after { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }
#coach { position: fixed; z-index: var(--z-tray); pointer-events: none; background: var(--paper); color: var(--card-ink); border-radius: 16px; padding: 12px 14px 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); animation: rise-t 200ms var(--ease-out); }
#coach p { margin: 0 0 8px; font-weight: 700; font-size: 15px; line-height: 1.35; }
#coach .coach-row { display: flex; align-items: center; gap: 8px; }
#coach .coach-n { font-size: 12px; font-weight: 800; color: #6b6b74; margin-right: auto; }
#coach .link { color: #55555e; padding: 8px; min-height: 0; font-size: 14px; }
#coach .btn.small { min-height: 38px; }
#coach button { pointer-events: auto; }

/* ---------- Party mode cards ---------- */
.t-wild { --tone: conic-gradient(from 200deg, #c8402b, #6e3a7a, #2169cc, #7a7068, #2a2833, #c8402b); }
.t-dozer { --tone: repeating-linear-gradient(135deg, #ffc93c 0 8px, #22222a 8px 16px); }
.t-jack { --tone: radial-gradient(circle at 35% 30%, #f6e2a4, #d4a640 45%, #8e6512); }
.card.t-jack { color: #2e2208; }
.card.t-jack .num { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.card.face.special .num { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.card.t-dozer .num { font-size: calc(var(--w) * 0.38); text-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.card.t-dozer .corner { background: #22222a; color: #ffc93c; border-radius: 3px; padding: 0 2px; }
.card.t-jack .num { font-size: calc(var(--w) * 0.32); }
.card.t-wild .num { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.mini .card.t-dozer .num, .mini .card.t-jack .num { font-size: 9px; }
.bar .sub .twist { color: var(--accent); font-weight: 800; }
.scores .bonus { display: block; font-size: 11px; color: var(--good); font-weight: 800; white-space: nowrap; }
.party-cards { display: flex; gap: 10px; justify-content: center; }
.party-cards .card { --w: 56px; }

/* Another game is waiting on you: a pill under the bar, one tap to switch tables */
#hop {
  position: fixed; left: 50%; top: calc(58px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  z-index: calc(var(--z-toast) - 1); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--paper); color: var(--felt); font: inherit; font-size: 15px; border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: rise-t 180ms var(--ease-out); cursor: pointer;
}
#hop[hidden] { display: none; }
/* Update ready: same look as the switch pill, just under it so the two never cover each other. */
#upd {
  position: fixed; left: 50%; top: calc(108px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  z-index: calc(var(--z-toast) - 2); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: var(--paper); color: var(--felt); font: inherit; font-size: 15px; border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: rise-t 180ms var(--ease-out); cursor: pointer;
}
#upd[hidden] { display: none; }
#upd.leaving { opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.25s, transform 0.25s; }
#upd .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#upd .go { flex: none; background: var(--accent); color: var(--accent-ink); font-weight: 800; padding: 6px 12px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { #upd { animation: none; } }
#hop.leaving { opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.25s, transform 0.25s; }
#hop .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hop .more { color: color-mix(in srgb, var(--felt) 65%, transparent); font-weight: 600; }
#hop .go { flex: none; display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 800; padding: 6px 10px 6px 12px; border-radius: 999px; }
#hop .go .i { width: 16px; height: 16px; transform: scaleX(-1); }
.games-btn { position: relative; }
.games-btn .badge { top: -2px; right: -2px; }
.game-row.here { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { #hop { animation: none; } }

/* ---- Masks (Party mode) ---- */
.card.back.peeked { position: relative; }
.card.back .peek-v {
  position: absolute; right: 6%; bottom: 5%; min-width: 1.6em; padding: 0.1em 0.35em; border-radius: 999px;
  background: rgba(10, 12, 18, 0.82); color: var(--paper); border: 1px solid var(--accent);
  font-family: var(--font-display); font-size: calc(var(--w) * 0.2); line-height: 1.3; text-align: center;
}
.card.back .peek-v::before { content: '👀 '; font-family: var(--font-body); font-size: 0.75em; }
.opp-masks { flex: none; display: inline-flex; gap: 2px; }
.mk { display: inline-grid; place-items: center; }
.mk.eternal { filter: drop-shadow(0 0 2px var(--accent)); }
.me-masks {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin: -3px 0; min-height: 28px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; font-size: 15px; cursor: pointer;
}
.me-masks .dotnew { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.mask-list { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.mask-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mask-row .mt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.mask-row .md, .mask-card .md { flex-basis: 100%; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.35; }
.mtag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--paper); text-transform: uppercase; letter-spacing: 0.04em; }
.mtag.eternal { border-color: var(--accent); color: var(--accent); }
.mtag.fading { border-style: dashed; color: var(--muted); }
.mask-pick { margin: 14px 0 6px; }
.mask-pick h3 { margin: 0 0 8px; }
.mask-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.mask-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; border-radius: 16px;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--paper); font: inherit; font-size: 14px; cursor: pointer;
}
.mask-card:active { transform: scale(0.97); }
.mask-card.eternal { border-color: var(--accent); }
.mask-card.fading { border-style: dashed; }
.mask-card .md { font-size: 12px; }
.trade-offer { margin: 10px 0; padding: 12px; border-radius: 14px; border: 1.5px solid var(--accent); background: var(--surface); }
.trade-offer p { margin: 0 0 10px; }
.sheet .mask-list { padding: 0; margin-left: 0; }

/* Mask chips: poker-chip style. Striped edge, dashed inner ring, the mask's symbol in the middle. */
.mchip {
  --s: 22px; --edge: #f4eee0;
  position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
  width: var(--s); height: var(--s); border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c) 78%, #fff) 0 36%, var(--c) 37% 57%, transparent 58%),
    repeating-conic-gradient(from 7.5deg, var(--edge) 0 15deg, var(--c) 15deg 45deg);
  box-shadow: inset 0 0 0 calc(var(--s) * 0.045) rgba(0, 0, 0, 0.28), 0 calc(var(--s) * 0.07) 0 rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.mchip::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: max(1px, calc(var(--s) * 0.045)) dashed rgba(255, 255, 255, 0.72); }
.mchip .em { position: relative; font-size: calc(var(--s) * 0.44); line-height: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
.mchip.sm { --s: 17px; }
.mchip.sm::before { inset: 18%; }
.mchip.lg { --s: 42px; }
.mchip.xl { --s: 60px; }
.mchip.in { --s: 1.45em; margin: -0.2em 0.05em 0; }
.mchip.eternal { --edge: #f3cf6a; box-shadow: 0 0 0 calc(var(--s) * 0.06) var(--accent), 0 calc(var(--s) * 0.07) 0 rgba(0, 0, 0, 0.35), 0 0 calc(var(--s) * 0.35) color-mix(in srgb, var(--accent) 45%, transparent); }
.mchip.fading { opacity: 0.72; }
.mchip.fading::before { border-style: dotted; }
.mchip.empty { background: none; box-shadow: none; border: 1.5px dashed var(--line-strong); }
.mchip.empty::before { display: none; }
.me-masks { gap: 5px; padding: 3px 8px; }
.mask-card .mchip { margin-bottom: 4px; }

/* A chip that just did something: one sweep of light and a small lift, twice. Not a flash. */
.mchip.used { animation: chip-lift 0.9s var(--ease-out) var(--shine-at, 0ms) 2; }
.mchip.used::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0.15) 56%, transparent 70%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: chip-shine 0.9s ease-in-out var(--shine-at, 0ms) 2 both; mix-blend-mode: overlay;
}
@keyframes chip-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes chip-lift { 0%, 100% { transform: none; } 40% { transform: translateY(-2px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .mchip.used, .mchip.used::after { animation: none; }
  .mchip.used { box-shadow: 0 0 0 2px var(--paper), 0 0 10px color-mix(in srgb, var(--paper) 50%, transparent); }
}
.hint.version { text-align: center; opacity: 0.7; margin-top: 4px; }

/* Chat reactions (tap a message) */
/* The bubble wrapper must not change how bubbles lay out: it's a column like .msg, so the text stays one box. */
.msg .mbody { display: flex; flex-direction: column; align-items: inherit; max-width: 100%; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.msg .mbody > .text { display: block; }
.msg .rbar { display: flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 4px; margin: 2px 0 4px; border-radius: 999px; background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); animation: rise-t 140ms var(--ease-out); }
.msg .rbar button { border: 0; background: none; font-size: 22px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.msg .rbar button.mine { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.msg .reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -4px; padding: 0 10px; position: relative; z-index: 1; }
.msg .rpill { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; padding: 2px 7px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--paper); cursor: pointer; }
.msg .rpill span { font-size: 12px; font-weight: 800; }
.msg .rpill.mine { border-color: var(--accent); }

/* A coin used up for this round */
.mchip.spent { filter: grayscale(1) brightness(0.75); opacity: 0.5; }
.mchip.spent .em { opacity: 0.6; }

/* ---- Party v2 coins ---- */
/* Round coins: a plain brass rim with a double ring, so they read differently from striped keeper coins */
.mchip.round {
  --edge: #e2c27a;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 75%, #fff) 0 36%, var(--c) 37% 60%, var(--edge) 61% 70%, color-mix(in srgb, var(--edge) 60%, #000) 71% 74%, var(--edge) 75%);
}
.mchip.round::before { border-style: solid; border-color: rgba(255, 248, 230, 0.55); inset: 30%; }
.mchip.inplay { box-shadow: 0 0 0 2px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
/* Tails up: the darker face, with a small T */
.mchip.tails { filter: saturate(0.55) brightness(0.72); }
.mchip.tails::after { content: 'T'; position: absolute; right: -2px; bottom: -2px; min-width: 40%; height: 40%; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--paper); font: 800 calc(var(--s) * 0.26)/1 var(--font-body); border: 1px solid var(--line-strong); }
.mchip.tails.used::after { content: none; }
.mchip.sm.tails::after { content: none; }
/* Flipping at the deal: two turns on the spot */
.mchip.flipping { animation: chip-flip 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) var(--flip-at, 0ms) 1 both; }
@keyframes chip-flip { 0% { transform: rotateY(0) translateY(0); } 40% { transform: rotateY(360deg) translateY(-6px); } 100% { transform: rotateY(720deg) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mchip.flipping { animation: none; } }
.me-masks .wsep { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--line-strong); }
.mask-row .md.sides { display: grid; gap: 2px; }
.mask-row .md.sides > span { opacity: 0.75; }
.mask-row .md.sides > span.on { opacity: 1; color: var(--paper); }
.mask-row .md.sides b { font-weight: 800; margin-right: 4px; }
.mtag.side-H { border-color: var(--good); color: var(--good); }
.mtag.side-T { border-color: var(--line-strong); color: var(--muted); }
.mask-row .rbtns { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mask-card.round { border-color: #c9a24f; }
.break-bar { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--accent); display: grid; gap: 8px; }
.break-bar .bb-top { display: flex; justify-content: space-between; align-items: baseline; }
.break-bar .bb-title { font-weight: 800; }
.break-bar .brk-time { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; color: var(--accent); }
.break-bar .hint { margin: 0; }

/* ---- Admin stats ---- */
.admin .panel h2 .hint { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; margin-left: 6px; }
.admin .live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin .kpi, .admin .avgs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin .kv { font-family: var(--font-display); font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--paper); }
.admin .kv.sm { font-size: 22px; }
.admin .kl { font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.3; }
.admin .avgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.admin .tbl-wrap { overflow-x: auto; }
.admin-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.admin-tbl th, .admin-tbl td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--line); font-size: 15px; }
.admin-tbl thead th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.admin-tbl th[scope=row] { text-align: left; font-weight: 700; color: var(--paper); }
.admin-tbl td { color: var(--paper); font-weight: 700; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--line-strong); stroke-width: 1; }
.chart .ax { fill: var(--muted); font: 600 11px var(--font-body); }
.chart .mark { fill: var(--accent); }
.chart .bar.on .mark { fill: color-mix(in srgb, var(--accent) 80%, #fff); }
.chart .hit { fill: transparent; }
.chart-tip { position: absolute; top: -6px; padding: 5px 9px; border-radius: 8px; background: var(--paper); color: var(--felt); font-size: 13px; font-weight: 800; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.admin .mix { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.admin .mix li { display: grid; grid-template-columns: minmax(0, 9em) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.admin .mix .mn { font-weight: 700; color: var(--paper); }
.admin .mix .mbar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.admin .mix .mbar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.admin .mix .mv { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.admin .vers, .admin .errs { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.admin .vers li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.admin .errs li { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.admin .errs code { font-size: 13px; overflow-wrap: anywhere; color: var(--paper); }
.admin .errs .pill { justify-self: start; }
.admin .hint.center { text-align: center; }
.admin .hint.err { color: var(--bad); }
@media (max-width: 380px) { .admin .kv { font-size: 24px; } }

/* ---- v49: layout fix, live coin number, receipt, bounty, aiming ---- */
.sheet { overflow-x: hidden; }
.sheet > * { min-width: 0; }
.scores .bonus { white-space: normal; line-height: 1.5; }
.me-masks .cdelta { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.me-masks .cdelta.good { color: var(--good); }
.me-masks .cdelta.bad { color: var(--bad); }
.mtag.now { border-color: var(--good); color: var(--good); }
.receipt { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 4px; }
.receipt h3 { margin: 0 0 4px; }
.receipt .rline { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; min-width: 0; }
.receipt .rline span { min-width: 0; }
.receipt .rline b { font-variant-numeric: tabular-nums; }
.receipt .rline.dbl b { color: var(--bad); }
.receipt .rline.total { border-top: 1px solid var(--line-strong); padding-top: 6px; margin-top: 2px; font-weight: 800; }
.receipt .rline.total b { font-size: 18px; color: var(--accent); }
.receipt.fresh .rline { animation: rline-in 0.35s var(--ease-out) both; animation-delay: calc(var(--i) * 0.38s + 0.3s); }
@keyframes rline-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .receipt.fresh .rline { animation: none; } }
.mat { position: relative; }
.bounty-pill { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
  font: 800 12px/1 var(--font-body); padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--paper); cursor: pointer; }
.bounty-pill b { color: var(--accent); margin-left: 4px; }
.bounty-pill.won { border-color: var(--good); }
.bounty-pill.won b { color: var(--good); }
.mask-list .aim-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1.5px dashed var(--accent); }

/* True Colors round (Party v4): the bottom corner names the card's color (B, T, G, Y, R), upright. */
.card .corner.b .band-tag { display: inline-block; transform: rotate(180deg); padding: 0 .12em; border-radius: 3px; background: rgba(255,255,255,.22); letter-spacing: .02em; }

/* v56 coin break screen: compact headline, timer row, folded scores, Ready pinned to the bottom of the sheet */
.announce.compact { padding-top: 2px; }
.announce.compact h2 { font-size: 24px; }
.announce.compact p { font-size: 14px; }
.brk-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 17px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.brk-head .brk-time { font: 20px/1 var(--font-display); color: var(--accent); }
details.fold { border: 1.5px solid var(--line); border-radius: 14px; padding: 0 12px; }
details.fold > summary { cursor: pointer; list-style: none; font-weight: 800; padding: 12px 0; display: flex; justify-content: space-between; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: '▾'; color: var(--muted); transition: transform 150ms; }
details.fold[open] > summary::after { transform: rotate(180deg); }
details.fold[open] { padding-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.ready-dock { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom, 0px)); margin: 0 -18px calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.ready-dock .hint { font-size: 13px; text-align: center; }
/* The bounty pill sits on the mat's top edge; the pile labels drop a little so it never covers "Drawn". */
.mat.has-bounty { padding-top: 22px; }
.opp-head .sc small { font-size: 10px; font-weight: 700; color: var(--muted); margin-right: 3px; text-transform: uppercase; letter-spacing: 0.04em; }

/* v57 round-end reveal */
#reveal { position: fixed; inset: 0; z-index: calc(var(--z-toast) - 3); display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 200ms ease-out; }
@keyframes fade-in { from { opacity: 0; } }
#reveal .rv-box { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--surface); border: 1.5px solid var(--line); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
#reveal .rv-title { font: 22px/1 var(--font-display); text-align: center; margin-bottom: 4px; }
#reveal .rv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid transparent; transition: background 200ms, border-color 200ms; position: relative; }
#reveal .rv-row.on { background: var(--surface-2); border-color: var(--line-strong, var(--line)); }
#reveal .rv-row.win { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#reveal .rv-row.win .rv-name::before { content: '👑 '; }
#reveal .rv-name { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reveal .rv-grid { display: grid; grid-template-columns: repeat(4, 20px); grid-auto-rows: 26px; gap: 3px; }
#reveal .rv-c { border-radius: 4px; display: grid; place-items: center; font: 700 11px/1 var(--font-card); color: #fff; background: var(--tone, #555); }
#reveal .rv-c.down { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
#reveal .rv-c.gone { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 50%, transparent); }
#reveal .rv-c.flip { animation: rv-flip 260ms var(--ease-out); }
@keyframes rv-flip { from { transform: rotateY(90deg) scale(1.2); } }
#reveal .rv-score { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#reveal .rv-n { font: 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
#reveal .rv-n.doubled { color: var(--bad, #e05a4f); }
#reveal .rv-note { font-size: 11px; font-weight: 700; color: var(--muted); min-height: 1em; white-space: nowrap; }
#reveal .rv-row.stamp::after { content: "×2 DOUBLED"; white-space: nowrap; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); font: 18px/1 var(--font-display); color: var(--bad, #e05a4f); border: 3px solid currentColor; border-radius: 6px; padding: 4px 8px; background: color-mix(in srgb, var(--surface) 70%, transparent); animation: stamp 320ms cubic-bezier(.2,1.6,.4,1) both; pointer-events: none; }
#reveal .rv-row.stamp.wiped::after { content: "NEGATIVE → 0"; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-12deg) scale(2.4); opacity: 0; } }
#reveal .rv-foot { margin-top: 6px; }

/* v58 catch-up */
ul.catchup { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
ul.catchup li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
ul.catchup li:last-child { border-bottom: 0; }
ul.catchup .when { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cu-status { margin: 4px 0 0; font-weight: 800; text-align: center; }
.cu-status.hot { color: var(--accent); }
ul.catchup b.you { color: var(--accent); }

/* v59 Daily Lowza */
.panel.daily { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dl-score { margin: 0; font-size: 17px; }
.dl-score b { font: 26px/1 var(--font-display); color: var(--accent); }
pre.dl-share { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--line); font: 15px/1.45 var(--font-body); white-space: pre-wrap; text-align: center; }
table.daily-board tr.is-you td { color: var(--accent); font-weight: 800; }

/* v60 paused coin break */
.brk-head.paused { border-color: var(--line); }
.brk-head.paused .brk-time { color: var(--muted); }
.brk-wait { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); }
.brk-wait p { margin: 0; font-weight: 700; }

/* v60 "This round" */
.bar button.info { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.bar .info .ri-dot { margin-left: 5px; font-size: 12px; color: var(--accent); }
ul.round-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.round-info li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
ul.round-info .ri-ic { flex: none; width: 1.5em; text-align: center; font-size: 18px; }
ul.round-info .ri-ok { color: var(--good, #4caf7d); font-weight: 700; }

/* v62 effects at a glance */
.fx-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; }
.fx-tag { font: inherit; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--paper); cursor: pointer; white-space: nowrap; }
.fx-tag.ghost { background: transparent; border-color: var(--line); padding-inline: 8px; }
.opp { position: relative; }
.opp-fx { position: absolute; right: 6px; bottom: 30px; font-size: 12px; letter-spacing: 1px; padding: 1px 4px; border-radius: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); line-height: 1.3; pointer-events: none; }

/* v65: tap a name in the results for that player's math */
.scores .pl.link-ish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: underline dotted color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 3px; cursor: pointer; }
.receipt .rline.sub span, .receipt .rline.sub b { color: var(--muted); }

/* v67 scoring audit (admin) */
.audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.audit-row details { border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.audit-row.flagged details { border-color: color-mix(in srgb, var(--bad, #e05a4f) 60%, var(--line)); }
.audit-row summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.audit-row summary::-webkit-details-marker { display: none; }
.audit-row .ar-why { font-size: 13px; color: var(--muted); }
.audit-row .ar-flag { font-size: 13px; font-weight: 700; color: var(--bad, #e05a4f); }
.audit-row .ar-notes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.audit-tbl tr.out th { color: var(--accent); }
.audit-tbl th, .audit-tbl td { font-size: 12px; padding: 5px 3px; white-space: nowrap; }

/* v68: bot levels and skill ratings */
.lvl { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.add-bot { display: grid; gap: 8px; margin-top: 10px; }
.add-bot .btn { justify-self: start; }
.lvl-blurb { margin: 0; min-height: 1.3em; }
.play-bots { display: grid; gap: 10px; }
.play-bots h2 { margin-bottom: 0; }
.play-bots .hint { margin: 0; }
.rchips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.rchip { display: grid; gap: 2px; text-align: left; min-height: var(--tap); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--paper); font: inherit; cursor: pointer; }
.rchip b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rc-mode, .rc-tier { font-size: 12px; color: var(--muted); font-weight: 700; }
.rchg { margin-left: 6px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.rchg.up { color: var(--good); }
.rchg.down { color: var(--bad); }
.rate-news { margin: 12px 0 4px; display: grid; gap: 6px; }
.rate-news .hint { margin: 0; }
.rn-me { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--accent); background: var(--surface-2); color: var(--paper); font: inherit; cursor: pointer; text-align: left; }
.rn-me b { font-size: 20px; font-variant-numeric: tabular-nums; }
.rn-me .rchg { font-size: 17px; }
.rn-up { color: var(--accent); font-weight: 800; }
.rating-big { display: grid; justify-items: center; gap: 2px; margin: 14px 0 6px; text-align: center; }
.rating-big .rb-icon { font-size: 30px; line-height: 1; }
.rating-big b { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rating-big .hint { margin: 0; }
.spark { display: block; width: 100%; height: 56px; margin: 6px 0 10px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--accent); }
.rlog { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.rlog li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.rlog li .hint { margin: 0 0 0 4px; }
.scores.board td.rt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.scores.board td.rt .new { color: var(--muted); }

/* v70: one ladder — levels and progress bars */
.lvl-seg button { display: grid; gap: 1px; justify-items: center; padding-top: 6px; padding-bottom: 6px; line-height: 1.15; }
.lvl-seg button small { font-size: 11px; font-weight: 700; color: var(--muted); }
.lvl-seg button[aria-pressed="true"] small { color: inherit; opacity: 0.75; }
.lbar { display: block; height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 4px; }
.lbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 600ms var(--ease-out); }
.rchip b { font-size: 19px; }
.rn-me { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.rn-me .rn-mode { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted); }
.rn-me b { font-size: 19px; }
.rn-me .lbar { grid-column: 1 / -1; grid-row: 3; margin: 4px 0 0; }
.rn-me .rchg { grid-column: 2; grid-row: 2; }
.rn-me.big { border-width: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.rating-big .lbar { width: min(260px, 80%); margin: 10px auto 6px; height: 8px; }
.rating-big b { font-size: 40px; }
.ladder { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.ladder li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.ladder li > span:first-child { font-weight: 800; min-width: 7.5em; }
.ladder li .hint { margin: 0; flex: 1; }
.ladder li.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ladder .you { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }

/* v71: 🖤 — a faint pale glow so the black heart shows on the dark table */
.dark-emoji { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 5px rgba(196, 160, 255, 0.55)); }

/* v72: easy home — three ways to play, the rest one tap away */
.panel.play { display: grid; gap: 10px; }
.name-row { display: flex; align-items: center; gap: 10px; }
.name-row label { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.name-row .input { flex: 1; min-width: 0; }
.btn.big { min-height: 56px; font-size: 18px; }
.join-row .input { min-height: 44px; }
.bots-line { margin: -4px 0 0; text-align: center; }
.bots-line .link, .move-links .link { font: inherit; padding: 0; }
.move-links { text-align: center; }
.acct-row .who-am-i { display: flex; align-items: center; gap: 10px; }
.acct-row .who-am-i b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acct-links { display: flex; gap: 6px; }
.acct-links .btn { min-width: var(--tap); }
.sheet h3 + .seg, .sheet h3 + .lvl-seg { margin-top: 4px; }
.acct-row .who-am-i { flex-wrap: wrap; }
.acct-links { margin-left: auto; }

/* ==========================================================================================
   v73 "Quiet": calm, flat, one gold button per screen. Borders become soft fills, pills become
   rounded rectangles, choices become iOS-style segmented controls, home becomes plain lists.
   The table and the cards keep their look; this changes the chrome around them.
   ========================================================================================== */
:root { --q-fill: rgba(255, 255, 255, 0.07); --q-fill-2: rgba(255, 255, 255, 0.12); --q-hair: rgba(255, 255, 255, 0.08); --q-dim: #8d93a6; }
body:has(#app:not(.in-game)) { background: #0e0f13; background-image: none; }
body:has(#app:not(.in-game)) { --surface: #17191f; --surface-2: #1d2027; --line: #2a2e38; --line-strong: #3a3f4c; --muted: #9ba1b3; }

/* buttons: filled, not outlined */
.btn { border: 0; background: var(--q-fill); border-radius: 14px; font-weight: 700; }
.btn:active { background: var(--q-fill-2); }
.btn.small { border-radius: 12px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:active { background: var(--q-fill); }
.btn.danger { background: transparent; color: var(--bad); }
.btn.big { min-height: 56px; border-radius: 16px; font-size: 17px; font-weight: 800; }
.icon-btn { border: 0; background: var(--q-fill); }
.icon-btn:active { background: var(--q-fill-2); }
.link { color: var(--muted); text-decoration: none; }

/* segmented controls */
.seg { gap: 2px; padding: 3px; border-radius: 12px; background: var(--q-fill); }
.seg button { border: 0; border-radius: 10px; min-height: 40px; color: var(--muted); font-weight: 700; }
.seg button[aria-pressed="true"] { background: var(--q-fill-2); color: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.lvl-seg button small { color: var(--q-dim); }
.lvl-seg button span { display: inline-flex; align-items: center; gap: 4px; }

/* panels, inputs, pills, rows */
.panel { border: 0; background: var(--surface); border-radius: 18px; }
.panel h2, .q-h { font: 800 12px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--q-dim); margin: 6px 4px -6px; }
.input { border: 0; background: var(--q-fill); border-radius: 12px; }
.input:focus { box-shadow: 0 0 0 2px var(--accent); }
.pill { border: 0; background: var(--q-fill-2); }
.game-row, .players li { border: 0; background: var(--surface); }
.lvl { border: 0; background: var(--q-fill); display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 2px 8px; }
.lvbadge { flex: none; vertical-align: -4px; }
.sheet { border: 0; }
.scores td { border-top-color: var(--q-hair); }

/* home: plain lists */
.home.quiet { gap: 14px; padding-top: 28px; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 4px; }
.q-top h1 { margin: 0; font: 700 30px/1 var(--font-display); letter-spacing: -0.01em; }
.q-lv { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--q-fill); border-radius: 999px; padding: 6px 12px 6px 8px; font-weight: 700; font-size: 14px; color: #e8d6a6; }
.list { display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); overflow: hidden; }
.list > * + *, .list .rchips > * + *, .list > .rchips + * { box-shadow: inset 0 1px rgba(255, 255, 255, 0.09); }
.list.games { background: transparent; gap: 8px; border-radius: 0; overflow: visible; }
.list.games > * + * { box-shadow: none; }
.list.games .game-row { border-radius: 16px; }
.lrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; background: transparent; color: var(--paper); text-align: left; font: inherit; }
button.lrow:active, .lrow-main:active { background: var(--q-fill); }
.lrow > .i:first-child, .lrow-main > .i:first-child { color: #e8d6a6; }
.lrow > .i:last-child { color: #5b6070; width: 18px; height: 18px; }
.lr-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lr-t b { font-weight: 700; font-size: 16px; }
.lr-t small { font-size: 13px; color: var(--q-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-t small b { font-size: 13px; color: var(--paper); }
.lr-t .lbar { margin: 4px 0 2px; height: 4px; border: 0; background: var(--q-fill-2); }
.lrow:has(.lrow-main) { padding: 0; gap: 0; }
.lrow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.lrow-side { flex: none; border: 0; background: transparent; color: #e8d6a6; font: 700 15px var(--font-body); padding: 0 16px; min-height: 60px; }
.lrow-side:active { background: var(--q-fill); }
.lr-ic { width: 22px; text-align: center; font: 700 18px var(--font-display); color: #e8d6a6; flex: none; }
.join-row { padding-right: 0; }
.join-row .input { flex: 1; min-width: 0; min-height: 40px; background: transparent; text-align: left; letter-spacing: 0.08em; font: 600 16px var(--font-body); padding: 0; text-transform: none; }
.join-row .input:not(:placeholder-shown) { text-transform: uppercase; letter-spacing: 0.25em; font-family: var(--font-display); }
.join-row .input:focus { box-shadow: none; }
.name-row label { font-size: 16px; font-weight: 700; color: var(--paper); }
.name-row .input { flex: 1; min-width: 0; min-height: 40px; background: transparent; text-align: right; color: var(--muted); padding: 0; }
.name-row .input:focus { box-shadow: none; color: var(--paper); }
.rchips { display: flex; flex-direction: column; margin: 0; }
.rchip.lrow { border-radius: 0; border: 0; background: transparent; }
.guest { align-items: flex-start; }
.guest .lr-t small { white-space: normal; }
.guest-btns { min-height: 0; padding-top: 0; box-shadow: none !important; gap: 8px; }
.guest-btns .btn { flex: 1; }
.q-foot { text-align: center; margin: 4px 0 0; }
.move-links { text-align: center; }
.home .version { text-align: center; color: #5b6070; font-size: 13px; }

/* v74: Your turn on top, the rest folded */
.q-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.q-hrow .q-h { margin-bottom: 0; }
.q-edit { padding: 6px 4px; min-height: 0; font-size: 14px; font-weight: 700; color: #e8d6a6; }
.q-none { padding: 0 4px; }
.games-fold { border-radius: 16px; }
.games-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; cursor: pointer; }
.games-fold > summary::-webkit-details-marker { display: none; }
.games-fold > summary .q-h { flex: 1; margin: 0; }
.games-fold .fold-chev .i { width: 18px; height: 18px; color: var(--q-dim); transition: transform 200ms var(--ease-out); }
.games-fold[open] .fold-chev .i { transform: rotate(90deg); }
.games-fold > .list { margin-top: 6px; }
.game-row > .i:last-child { color: #5b6070; width: 18px; height: 18px; }

/* v76: "Other games" is a real button (filled, not gold) */
.games-fold > summary { background: var(--surface); border-radius: 16px; min-height: 56px; padding: 0 14px 0 16px; gap: 10px; }
.games-fold > summary:active { background: var(--surface-2); }
.games-fold .fold-lbl { flex: 1; font-weight: 700; font-size: 16px; color: var(--paper); }
.games-fold > summary .pill { background: var(--q-fill-2); color: var(--paper); }
.games-fold .fold-chev .i { color: var(--muted); transform: rotate(90deg); }
.games-fold[open] .fold-chev .i { transform: rotate(-90deg); }

/* v77: games waiting on you lead the home screen */
.game-row.mine { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%); box-shadow: inset 3px 0 0 var(--accent); }
.game-row.mine .ttl, .game-row.mine .code { color: var(--paper); }
.game-row.mine .pill.hot { padding: 7px 14px; font-size: 13px; }

/* 1.92: safety — Terms/Privacy/Support in a sheet, report and block, kid-safe mode, the admin report queue */
.doc { font-size: 15px; line-height: 1.55; }
.doc h1 { display: none; }
.doc h2 { font-size: 17px; margin: 18px 0 6px; }
.doc h3 { font-size: 15px; margin: 14px 0 4px; }
.doc p, .doc li { color: var(--muted); }
.doc a { color: var(--accent); }
.doc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--muted); }
.doc .updated { font-size: 13px; }
.hint.quote { border-left: 3px solid var(--line-strong); padding: 6px 10px; margin: 8px 0 12px; overflow-wrap: anywhere; }
.chk { display: flex; gap: 10px; align-items: center; margin: 12px 0 4px; font-weight: 600; }
.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.kid-note { margin: 8px 0; }
.text.kid-off { opacity: 0.75; font-style: italic; }
.rbar .rmore { font-weight: 800; letter-spacing: 0.05em; }
.q-foot.legal { margin-top: -6px; }
.hint.legal { text-align: center; margin-top: 10px; }
.row.safety { margin-top: 12px; }
.row.wrap { flex-wrap: wrap; gap: 8px; }
.reports { list-style: none; margin: 0 0 12px; padding: 0; }
.reports .rep { padding: 12px 0; border-bottom: 1px solid var(--line); }
.reports .rep-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.reports .rep-text { margin: 8px 0 4px; overflow-wrap: anywhere; }
.msg .rbar .rmore { color: var(--card-ink); font-size: 18px; }
.gate-terms .link { display: inline; padding: 0; margin: 0; min-height: 0; height: auto; vertical-align: baseline; font: inherit; color: var(--accent); text-decoration: underline; }

/* 1.93: email on profiles */
.lrow.nudge { box-shadow: inset 3px 0 0 #e8d6a6; }
.lrow.nudge .lr-t b { color: #e8d6a6; }
.email-nudge { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px dashed #e8d6a6; display: grid; gap: 10px; }
.email-nudge p { margin: 0; }
.otp-input { font-size: 24px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
pre.mail { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font: 13px/1.4 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }

/* 1.94 Lowza: the logo on the home screen and in the rename note */
.q-top h1.brand { line-height: 0; }
.q-top h1.brand img { display: block; height: 30px; width: auto; }
.sheet .wn-logo { display: block; width: min(260px, 70%); height: auto; margin: 4px auto 14px; }

/* 1.99: moving to the new address */
.move-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.move-banner .mb-t { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.move-banner .mb-t small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.move-banner .mb-btns { display: flex; align-items: center; gap: 14px; }
.move-banner.done { background: var(--surface); border-color: var(--line); }
.mv-steps { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.mv-step { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.mv-step:last-child { border-bottom: 0; }
.mv-step .lr-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mv-step .lr-t, .mv-step .lr-t b, .mv-step .lr-t small { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }
.mv-step .lr-t small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.mv-ck { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font: 800 14px/1 var(--font-body); }
.mv-step.done .mv-ck { background: var(--accent); border-color: var(--accent); color: #1b1300; }