/* ============================================================
   GAME NIGHT THEME: a board game laid out on the walnut table
   under a hanging lamp. Same class surface as editorial/theme.css,
   so shared header, footer, drawer and component classes stay
   styled.

   The table: a folded board in cream card with a book-cloth bound
   edge and a crease down the middle, spaces printed with a double
   rule; the track of spaces in the four token colours (red, blue,
   green, yellow) that runs round it; wooden pawns, meeples and
   cubes; dice that only ever show plain pips, as decoration; a
   score pad and pencil; a sand timer. Headings in a chunky rounded
   face (Sniglet), everything else in a friendly sans (Nunito).
   Late in the evening the room goes dark and only the lamp's warm
   pool lights the table.

   The theme sets the --theme-* accent ramp itself (the red token),
   so the admin's accent colour setting does not apply while it is
   active.
   ============================================================ */

:root {
  --font-display: 'Sniglet', 'Arial Rounded MT Bold', 'Nunito', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-ui:      'Nunito', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --font-num:     'Nunito', 'Segoe UI', system-ui, sans-serif;

  --paper:        #f3e6c8;
  --paper-2:      #fffaee;
  --paper-3:      #eadbb8;
  --ink:          #2b1a10;
  --ink-2:        #4a3424;
  --ink-soft:     #6b5442;
  --rule:         rgba(91, 58, 38, 0.2);
  --rule-soft:    rgba(91, 58, 38, 0.1);
  --radius:       14px;
  --radius-sm:    9px;
  /* The lamp hangs right over the table: short, warm shadows */
  --shadow:       0 1px 0 rgba(91, 58, 38, .12), 0 10px 18px -12px rgba(63, 37, 18, .45);
  --shadow-md:    0 2px 0 rgba(91, 58, 38, .14), 0 20px 32px -18px rgba(63, 37, 18, .55);

  /* Red token: the accent */
  --theme-50:  #fdf0ee;
  --theme-100: #fbdcd8;
  --theme-200: #f6b8b1;
  --theme-300: #ef8d83;
  --theme-400: #e5675c;
  --theme-500: #d94841;
  --theme-600: #c0392f;
  --theme-700: #a12f27;
  --theme-800: #7f2620;
  --theme-900: #5e1d18;
  --theme-500-rgb: 217, 72, 65;
  --theme-600-rgb: 192, 57, 47;
  --theme-600-ink: #ffffff;

  /* Walnut: the table, the header, every wooden piece */
  --gmn-wood:      #5b3a26;
  --gmn-wood-hi:   #7c5236;
  --gmn-wood-deep: #3d2618;
  --gmn-wood-ink:  #5b3a26;
  --gmn-wood-soft: rgba(91, 58, 38, .1);
  /* Board cream, and the double rule its spaces are printed with */
  --gmn-board:     #f3e6c8;
  --gmn-board-hi:  #fbf3df;
  --gmn-print:     rgba(91, 58, 38, .42);
  --gmn-bind:      #2b1a10;

  /* The four token colours, each with a deeper shade, an ink that reads
     on cream and a soft wash */
  --gmn-red:       #d94841; --gmn-red-deep:    #a8302a; --gmn-red-ink:    #a52e27; --gmn-red-soft:    rgba(217, 72, 65, .12);
  --gmn-blue:      #2f6fd6; --gmn-blue-deep:   #1f52a8; --gmn-blue-ink:   #2459b3; --gmn-blue-soft:   rgba(47, 111, 214, .12);
  --gmn-green:     #2f9e5b; --gmn-green-deep:  #1f7a43; --gmn-green-ink:  #1c6e3c; --gmn-green-soft:  rgba(47, 158, 91, .14);
  --gmn-yellow:    #f2b705; --gmn-yellow-deep: #c99400; --gmn-yellow-ink: #7d5a00; --gmn-yellow-soft: rgba(242, 183, 5, .2);
  --gmn-bad:       #a52e27;
  --gmn-bad-soft:  rgba(217, 72, 65, .12);

  /* The track: a run of spaces in the four colours with cream between,
     drawn wherever another theme would draw a rule */
  --gmn-track: repeating-linear-gradient(90deg,
      var(--gmn-red) 0 18px, transparent 18px 21px,
      var(--gmn-blue) 21px 39px, transparent 39px 42px,
      var(--gmn-green) 42px 60px, transparent 60px 63px,
      var(--gmn-yellow) 63px 81px, transparent 81px 84px);
  --gmn-track-rtl: repeating-linear-gradient(270deg,
      var(--gmn-red) 0 18px, transparent 18px 21px,
      var(--gmn-blue) 21px 39px, transparent 39px 42px,
      var(--gmn-green) 42px 60px, transparent 60px 63px,
      var(--gmn-yellow) 63px 81px, transparent 81px 84px);
  /* All four colours side by side, for a strip too short for the track */
  --gmn-quad: linear-gradient(90deg, var(--gmn-red) 0 25%, var(--gmn-blue) 25% 50%, var(--gmn-green) 50% 75%, var(--gmn-yellow) 75% 100%);

  /* Walnut grain: long fibres over the wood's own gradient */
  --gmn-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .16' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .02 2.4 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --gmn-walnut: var(--gmn-grain), linear-gradient(180deg, #6a452d, #5b3a26 45%, #4d311f);
  /* The board's card: a faint linen weave pressed into it */
  --gmn-linen: repeating-linear-gradient(0deg, rgba(91, 58, 38, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(91, 58, 38, .03) 0 1px, transparent 1px 3px);
  /* A printed space: a thin inner line inset from the edge */
  --gmn-space: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5.5px var(--gmn-print);

  /* The lamp: a warm pool on the table under it */
  --gmn-lamp: radial-gradient(closest-side, rgba(255, 236, 190, .85), rgba(255, 236, 190, .25) 60%, rgba(255, 236, 190, 0));
  --gmn-lamp-c: #fff1cc;

  /* Pieces as masks, so they take any token colour */
  --gmn-pawn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 1.5a5.5 5.5 0 0 1 3.4 9.8c.9.2 1.5.9 1.5 1.8 0 .8-.5 1.4-1.2 1.7.9 4.1 2.4 7.4 4.6 10 1.2.4 2.2 1.4 2.2 2.8V30H1.5v-2.4c0-1.4 1-2.4 2.2-2.8 2.2-2.6 3.7-5.9 4.6-10-.7-.3-1.2-.9-1.2-1.7 0-.9.6-1.6 1.5-1.8A5.5 5.5 0 0 1 12 1.5z'/%3E%3C/svg%3E");
  --gmn-meeple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 1c3.2 0 5.5 2.4 5.5 5.4 0 1.5-.5 2.8-1.4 3.8 4.4.6 9.9 2.1 9.9 5.5 0 2-2.4 2.5-6 2.1l4.3 8.9c.5 1.1-.3 2.3-1.5 2.3h-7.2L16 23.3 12.4 29H5.2c-1.2 0-2-1.2-1.5-2.3L8 17.8c-3.6.4-6-.1-6-2.1 0-3.4 5.5-4.9 9.9-5.5-.9-1-1.4-2.3-1.4-3.8C10.5 3.4 12.8 1 16 1z'/%3E%3C/svg%3E");

  --notify-accent: var(--theme-600);
  --nav-accent:    var(--ink);
  --hdr-strip-bg:  #4d311f;
  --hdr-strip-rule: #3d2618;
  --text-primary:  var(--ink);

  /* Primary button: a wooden tile with its cut edge showing underneath.
     Pressed, it sinks onto the table. Secondary: a cream board tile. */
  --btn-bg:       #5b3a26;
  --btn-bg-hover: #6a452d;
  --btn-ink:      #fbf3df;
  --btn-edge:     #34200f;
  --btn-shadow:   inset 0 1px 0 rgba(255, 230, 190, .18), 0 4px 0 var(--btn-edge), 0 10px 16px -8px rgba(43, 26, 16, .55);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 230, 190, .22), 0 5px 0 var(--btn-edge), 0 14px 20px -8px rgba(43, 26, 16, .6);
  --btn-shadow-down:  inset 0 1px 0 rgba(255, 230, 190, .12), 0 1px 0 var(--btn-edge), 0 3px 6px -3px rgba(43, 26, 16, .5);

  /* A card: a space on the board */
  --gmn-card: var(--paper-2);
  --gmn-gloss: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%);

  /* Art colours (includes/art.php reads these, the light set as fallback) */
  --gmn-a-table: #e7d6b2; --gmn-a-shadow: #9c7b55;
  --gmn-a-board: #f3e6c8; --gmn-a-board2: #e2cfa6; --gmn-a-paper: #fffaee;
  --gmn-a-wood: #5b3a26; --gmn-a-wood2: #3d2618; --gmn-a-wood3: #8a5d3e;
  --gmn-a-line: #2b1a10; --gmn-a-print: #a88a63; --gmn-a-glass: #e9f1f2; --gmn-a-sand: #e2b45a;

  --page-bg:
    radial-gradient(1100px 420px at 50% -160px, rgba(255, 244, 214, .9), rgba(255, 244, 214, 0) 70%) no-repeat,
    var(--gmn-linen),
    var(--paper);
}

/* Late in the evening: the room dark, the lamp's pool on the table */
html.dark {
  --paper:        #17100b;
  --paper-2:      #241912;
  --paper-3:      #31231a;
  --ink:          #f3e6c8;
  --ink-2:        #e0cfae;
  --ink-soft:     #b49f80;
  --rule:         rgba(243, 230, 200, 0.16);
  --rule-soft:    rgba(243, 230, 200, 0.08);
  --shadow:       0 1px 0 rgba(0, 0, 0, .5), 0 12px 22px -14px rgba(0, 0, 0, .9);
  --shadow-md:    0 2px 0 rgba(0, 0, 0, .5), 0 22px 36px -18px rgba(0, 0, 0, .95);

  --theme-50:  #2c1612;
  --theme-100: #3d1c17;
  --theme-200: #5c2620;
  --theme-300: #ff9a8f;
  --theme-400: #ff877b;
  --theme-500: #f0645a;
  --theme-600: #ff7b6e;
  --theme-700: #ffa59b;
  --theme-800: #ffc4bc;
  --theme-900: #ffe2dd;
  --theme-500-rgb: 240, 100, 90;
  --theme-600-rgb: 255, 123, 110;
  --theme-600-ink: #2b1a10;

  --gmn-wood:      #8a5d3e;
  --gmn-wood-hi:   #a8774f;
  --gmn-wood-deep: #4d311f;
  --gmn-wood-ink:  #d9b48a;
  --gmn-wood-soft: rgba(217, 180, 138, .12);
  --gmn-board:     #2c2017;
  --gmn-board-hi:  #352619;
  --gmn-print:     rgba(243, 230, 200, .3);
  --gmn-bind:      #0d0805;

  --gmn-red:       #f0645a; --gmn-red-deep:    #c94a40; --gmn-red-ink:    #ff8a7e; --gmn-red-soft:    rgba(240, 100, 90, .16);
  --gmn-blue:      #5b8ff0; --gmn-blue-deep:   #3a6fd1; --gmn-blue-ink:   #8db3ff; --gmn-blue-soft:   rgba(91, 143, 240, .16);
  --gmn-green:     #46b874; --gmn-green-deep:  #2f9e5b; --gmn-green-ink:  #6fd69a; --gmn-green-soft:  rgba(70, 184, 116, .16);
  --gmn-yellow:    #f7c52e; --gmn-yellow-deep: #d9a50a; --gmn-yellow-ink: #ffd65c; --gmn-yellow-soft: rgba(247, 197, 46, .16);
  --gmn-bad:       #ff8a7e;
  --gmn-bad-soft:  rgba(240, 100, 90, .16);

  --gmn-walnut: var(--gmn-grain), linear-gradient(180deg, #3a2517, #2d1c11 45%, #24160d);
  --gmn-linen: linear-gradient(transparent, transparent);
  --gmn-lamp: radial-gradient(closest-side, rgba(255, 196, 120, .42), rgba(255, 180, 100, .12) 60%, rgba(255, 180, 100, 0));
  --gmn-lamp-c: #ffd79a;

  --hdr-strip-bg:  #0f0a06;
  --hdr-strip-rule: rgba(243, 230, 200, .1);

  /* The lamp-lit tile: cream face, a darker cream edge */
  --btn-bg:       #f3e6c8;
  --btn-bg-hover: #fff3d6;
  --btn-ink:      #2b1a10;
  --btn-edge:     #a68558;
  --btn-shadow:   inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--btn-edge), 0 0 26px -8px rgba(255, 196, 120, .45);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 0 var(--btn-edge), 0 0 34px -6px rgba(255, 196, 120, .6);
  --btn-shadow-down:  inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--btn-edge), 0 0 18px -8px rgba(255, 196, 120, .4);

  --gmn-gloss: linear-gradient(180deg, rgba(255, 220, 170, .06), rgba(255, 220, 170, 0) 40%);

  --gmn-a-table: #2a1b11; --gmn-a-shadow: #050302;
  --gmn-a-board: #3a2b1e; --gmn-a-board2: #4a3726; --gmn-a-paper: #2e2218;
  --gmn-a-wood: #8a5d3e; --gmn-a-wood2: #4d311f; --gmn-a-wood3: #b0805a;
  --gmn-a-line: #e0cfae; --gmn-a-print: #8a7457; --gmn-a-glass: #4a5658; --gmn-a-sand: #f0c46a;

  --page-bg:
    radial-gradient(1000px 460px at 50% -170px, rgba(255, 190, 110, .17), rgba(255, 190, 110, 0) 70%) no-repeat,
    var(--paper);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board: a cream board
   with printed spaces by day, the lamp-lit board at night; tiles climb
   from cream through wood to the four token colours. */
:root {
  --game-bg:        #eadbb8;
  --game-surface:   #d8c49a;
  --game-surface-2: #fffaee;
  --game-ink:       #2b1a10;
  --game-muted:     #6b5442;
  --game-accent:    #c0392f;
  --game-accent-ink:#ffffff;
  --game-good:      #1c6e3c;
  --game-bad:       #a52e27;
  --game-tile-1:    #fffaee;
  --game-tile-2:    #e9d5a8;
  --game-tile-3:    #c8a06a;
  --game-tile-4:    #2f9e5b;
  --game-tile-5:    #2f6fd6;
  --game-tile-6:    #d94841;
  --game-tile-7:    #f2b705;
  --game-tile-8:    #5b3a26;
  --game-radius:    10px;
  --game-font:      'Sniglet', 'Nunito', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/game-night/assets/fonts/fonts.css";
  --game-arena-screen: #eadbb8;
  --game-arena-coins:  #7d5a00;
  --game-arena-win:    #1c6e3c;
  --game-arena-danger: #a52e27;
  --game-pattern:   var(--gmn-linen);
}
html.dark {
  --game-bg:        #241912;
  --game-surface:   #120c08;
  --game-surface-2: #3a2b1e;
  --game-ink:       #f3e6c8;
  --game-muted:     #b49f80;
  --game-accent:    #ff7b6e;
  --game-accent-ink:#2b1a10;
  --game-good:      #6fd69a;
  --game-bad:       #ff8a7e;
  --game-tile-1:    #3a2b1e;
  --game-tile-2:    #5a412b;
  --game-tile-3:    #8a5d3e;
  --game-tile-4:    #2f9e5b;
  --game-tile-5:    #3a6fd1;
  --game-tile-6:    #e0564c;
  --game-tile-7:    #f7c52e;
  --game-tile-8:    #f3e6c8;
  --game-arena-screen: #241912;
  --game-arena-coins:  #ffd65c;
  --game-arena-win:    #6fd69a;
  --game-arena-danger: #ff8a7e;
}

/* Sniglet covers Latin only; other scripts get a heavy system face */
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el), :lang(vi)) {
  --font-display: system-ui, 'Segoe UI', 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── Base ── */
html body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink);
}
html .font-sans { font-family: var(--font-ui); }
html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.005em;
}
.display-italic { font-style: normal; }
/* Figures in tabular columns line up */
html .font-display.tabular-nums, html .font-display[class*="tabular"], html .tabular-nums { font-family: var(--font-num); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
::selection { background: #f2b705; color: #2b1a10; }
html.dark ::selection { background: #f7c52e; color: #2b1a10; }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--theme-600); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* The eyebrow: a pawn stood beside its name, like a player at the start */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .8rem .3rem .55rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--gmn-print);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--rule);
  margin-bottom: .9rem;
}
[dir="rtl"] .section-eyebrow { padding: .3rem .55rem .3rem .8rem; }
html .section-eyebrow::before {
  content: ''; flex-shrink: 0; width: 11px; height: 15px;
  background: var(--gmn-red);
  -webkit-mask: var(--gmn-pawn) center / contain no-repeat; mask: var(--gmn-pawn) center / contain no-repeat;
}
html.dark .section-eyebrow { background: var(--paper-3); }

/* View all: a cream space with an arrow printed on it; the arrow steps on
   along the track on hover or focus */
.btn-view-all {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem;
  font-family: var(--font-ui); font-size: 13px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  background: var(--paper-2);
  border: 2px solid var(--gmn-wood);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--gmn-wood);
  transition: transform .15s ease, gap .3s ease, box-shadow .15s ease;
}
html.dark .btn-view-all { border-color: var(--gmn-wood-hi); box-shadow: 0 3px 0 var(--gmn-wood-deep); background: var(--paper-3); }
.btn-view-all:hover, .btn-view-all:focus-visible { gap: .85rem; outline: none; }
.btn-view-all:focus-visible { box-shadow: 0 3px 0 var(--gmn-wood), 0 0 0 4px var(--gmn-yellow); }
.btn-view-all:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gmn-wood); }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--gmn-gloss); }

.ed-folio { font-family: var(--font-num); font-weight: 700; color: var(--ink-soft); }

[dir="rtl"] .gmn-flip-rtl { transform: scaleX(-1); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 12px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--gmn-wood); box-shadow: 0 0 0 4px var(--gmn-yellow-soft); }
.ed-search { background: transparent; border: none; }

/* The top strip: the edge of the walnut table */
.hdr-strip { background: var(--gmn-walnut) !important; }
.hdr-strip, .hdr-strip .ed-status { color: #f3e6c8; }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffffff; }
html.dark .hdr-strip, html.dark .hdr-strip .ed-status { color: var(--ink-2); }
html.dark .hdr-strip a:hover, html.dark .hdr-strip button:hover { color: #ffffff; }

/* The track under the main header bar */
.gmn-track-line { height: 6px; background: var(--gmn-track), var(--paper-2); border-block: 1px solid var(--rule); box-sizing: content-box; }
[dir="rtl"] .gmn-track-line { background: var(--gmn-track-rtl), var(--paper-2); }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0; padding-right: 1.25rem; border-right: 2px dotted var(--rule);
  font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 2px dotted var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 3px 0 var(--btn-edge); }
.ed-subnav-item:focus-visible { outline: 3px solid var(--gmn-yellow); outline-offset: 2px; }

/* ── Links and buttons ──
   Primary: a wooden tile, its cut edge showing underneath; it sinks onto
   the table when pressed. Secondary: a cream board tile on a walnut
   edge. */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: 14px; color: var(--ink);
  background: radial-gradient(circle, var(--gmn-red) 1.6px, transparent 2px) left 100% / 8px 4px repeat-x;
  padding-bottom: 5px;
  transition: gap .25s ease, background-size .3s ease;
}
.ed-link-arrow:hover, .ed-link-arrow:focus-visible { gap: 0.7rem; background-image: linear-gradient(90deg, var(--gmn-red), var(--gmn-red)); background-size: 100% 3px; }
[dir="rtl"] .ed-link-arrow { background-position: right 100%; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1.5rem .82rem;
  font-family: var(--font-ui); font-size: 15.5px; font-weight: 800; letter-spacing: .01em;
  text-decoration: none;
  color: var(--btn-ink);
  background: var(--gmn-grain), linear-gradient(180deg, rgba(255, 230, 190, .1), transparent 55%), var(--btn-bg);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: background-color .2s ease, box-shadow .15s ease, transform .15s ease;
}
html.dark .ed-btn-primary, html.dark .ed-plan-cta, html.dark .drawer-login {
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 55%), var(--btn-bg);
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background-color: var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translateY(3px); box-shadow: var(--btn-shadow-down); }
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: #f2b705; color: #2b1a10; box-shadow: 0 4px 0 #9c7600, 0 0 22px -6px rgba(242, 183, 5, .6); }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--gmn-yellow); outline-offset: 4px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .74rem 1.35rem;
  font-family: var(--font-ui); font-size: 15.5px; font-weight: 800; letter-spacing: .01em;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--gmn-wood);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--gmn-wood), 0 10px 14px -10px rgba(43, 26, 16, .5);
  transition: box-shadow .15s ease, transform .15s ease, background-color .2s ease;
}
.ed-btn-secondary:hover { transform: translateY(-1px); color: var(--ink); background: var(--gmn-board-hi); box-shadow: 0 5px 0 var(--gmn-wood), 0 12px 16px -10px rgba(43, 26, 16, .5); }
.ed-btn-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gmn-wood); }
html.dark .ed-btn-secondary { background: var(--paper-3); border-color: var(--gmn-wood-hi); box-shadow: 0 4px 0 var(--gmn-wood-deep), 0 0 0 1px rgba(255, 200, 140, .05); }
html.dark .ed-btn-secondary:hover { background: #3b2b1f; box-shadow: 0 5px 0 var(--gmn-wood-deep); }
html.dark .ed-btn-secondary:active { box-shadow: 0 1px 0 var(--gmn-wood-deep); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
@media (prefers-reduced-motion: reduce) {
  html .ed-btn-primary, html .ed-btn-secondary, html .ed-plan-cta, .btn-view-all { transition: none; }
  html .ed-btn-primary:hover, html .ed-btn-secondary:hover { transform: none; }
}

/* ── Cards: a space on the board, printed with a double rule. On hover or
   focus it is picked up off the board: it rises a little, tilts, and its
   shadow spreads under the lamp ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--gmn-gloss), var(--gmn-card);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s ease, border-color .3s ease;
}
/* A token's colour notched into the top corner of each space */
html .shop-card::after, html .ed-plan::after {
  content: ''; position: absolute; inset-inline-start: 10px; top: -2px; width: 22px; height: 7px; border-radius: 0 0 5px 5px;
  background: var(--gmn-tok, var(--gmn-red)); pointer-events: none;
  transition: height .25s ease;
}
html :nth-child(4n+2) > .shop-card, html .shop-card:nth-child(4n+2), html .ed-plan:nth-child(4n+2) { --gmn-tok: var(--gmn-blue); }
html :nth-child(4n+3) > .shop-card, html .shop-card:nth-child(4n+3), html .ed-plan:nth-child(4n+3) { --gmn-tok: var(--gmn-green); }
html :nth-child(4n+4) > .shop-card, html .shop-card:nth-child(4n+4), html .ed-plan:nth-child(4n+4) { --gmn-tok: var(--gmn-yellow); }
html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-md); border-color: var(--gmn-print); }
[dir="rtl"] .shop-card:hover, [dir="rtl"] .shop-card:focus-within { transform: translateY(-4px) rotate(.6deg); }
html .shop-card:hover::after, html .shop-card:focus-within::after, html .ed-plan:hover::after { height: 11px; }
html .ed-plan-featured {
  background: var(--gmn-walnut) !important;
  color: #f3e6c8;
  border-color: transparent;
}
html .ed-plan-featured::before { content: ''; position: absolute; left: 14px; right: 14px; top: 10px; height: 6px; border-radius: 2px; background: var(--gmn-track); pointer-events: none; }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(243, 230, 200, .18); }
@media (prefers-reduced-motion: reduce) { html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: none; } }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffffff; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.2rem 1.5rem .5rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.drawer-section-label::before { content: ''; flex-shrink: 0; width: 10px; height: 14px; background: var(--gmn-wood); -webkit-mask: var(--gmn-pawn) center / contain no-repeat; mask: var(--gmn-pawn) center / contain no-repeat; }
.drawer-section-label::after { content: ''; flex: 1; height: 0; border-top: 2px dotted var(--rule); }
html body #sideMenu .drawer-section-label { color: var(--ink-soft) !important; }
/* Count badges on drawer rows: a red token */
html body #sideMenu span.rounded-full.text-white[style*="--theme-600"] { background: var(--theme-600) !important; color: var(--theme-600-ink) !important; }
.drawer-nav-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.5rem;
  font-size: 15.5px; font-weight: 700; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); box-shadow: inset 5px 0 0 var(--gmn-yellow); }
[dir="rtl"] .drawer-nav-row:hover { box-shadow: inset -5px 0 0 var(--gmn-yellow); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  border: 2px dashed var(--rule); border-radius: 12px;
  font-weight: 800; color: var(--gmn-bad);
}
.drawer-logout:hover { background: var(--gmn-bad-soft); }

.mobile-glass-header {
  background: rgba(251, 243, 223, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 0 -1px rgba(91, 58, 38, .2);
}
html.dark .mobile-glass-header { background: rgba(23, 16, 11, 0.96); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gmn-yellow); }

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.ed-dropdown::before { content: ''; display: block; height: 5px; margin: 8px 12px 2px; border-radius: 2px; background: var(--gmn-track); }
.ed-dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  padding: .7rem 1.25rem .35rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-mobile-link.active { color: var(--nav-accent); }

/* ── Dark/light toggle: the lamp's pull chain ──
   The lamp's shade dips into view at the top of the screen, its beaded
   chain drops and is tugged once with a click, and the lamp's cone of
   the new mode falls from the shade and widens until it fills the
   screen. The mode turns under it; then the cone fades off the new page
   and the lamp rises away. Cover colours are fixed per direction (set by
   game-night.js), so nothing on the cover changes at the flip. */
.px-fx--gmn-chain { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--gmn-chain .gmn-fx-cone,
.px-fx--gmn-chain .gmn-fx-veil { position: absolute; inset: 0; background: var(--fx-cover); }
.px-fx--gmn-chain .gmn-fx-veil { opacity: 0; }
.px-fx--gmn-chain.is-full .gmn-fx-veil { opacity: 1; }
.px-fx--gmn-chain .gmn-fx-cone {
  clip-path: polygon(calc(50% - 46px) 70px, calc(50% + 46px) 70px, calc(50% + 70px) 120px, calc(50% - 70px) 120px);
  opacity: 0;
  transition: clip-path .55s cubic-bezier(.55, 0, .45, 1), opacity .12s linear;
}
.px-fx--gmn-chain.is-lit .gmn-fx-cone { opacity: 1; }
.px-fx--gmn-chain.is-cast .gmn-fx-cone { clip-path: polygon(-55% 0, 155% 0, 260% 100%, -160% 100%); }
.px-fx--gmn-chain.is-fade .gmn-fx-cone, .px-fx--gmn-chain.is-fade .gmn-fx-veil { opacity: 0; transition: opacity .38s ease; }
/* The lamp: a walnut-and-brass shade on its flex, dipping in from above */
.px-fx--gmn-chain .gmn-fx-lamp {
  position: absolute; left: 50%; top: 0; width: 120px; height: 76px; margin-left: -60px;
  transform: translateY(-110%); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.px-fx--gmn-chain .gmn-fx-lamp::before { content: ''; position: absolute; left: 58px; top: -40px; width: 4px; height: 52px; background: #1d120a; }
.px-fx--gmn-chain .gmn-fx-lamp::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #2a1a0f, #5b3a26 30%, #7c5236 50%, #4d311f 80%, #2a1a0f);
  border-radius: 6px 6px 3px 3px;
}
.px-fx--gmn-chain.is-in .gmn-fx-lamp { transform: none; }
.px-fx--gmn-chain.is-out .gmn-fx-lamp { transform: translateY(-120%); transition: transform .3s cubic-bezier(.5, 0, .7, .4); }
/* The beaded chain with its pull at the end */
.px-fx--gmn-chain .gmn-fx-chain {
  position: absolute; left: calc(50% + 40px); top: 60px; width: 6px; height: 120px;
  background: radial-gradient(circle at 3px 3px, #f2c86a 2.2px, #8a6a2c 2.8px, transparent 3.1px) 0 0 / 6px 7px repeat-y;
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .22s cubic-bezier(.3, 1.3, .5, 1);
}
.px-fx--gmn-chain .gmn-fx-chain::after { content: ''; position: absolute; left: -5px; bottom: -16px; width: 16px; height: 18px; border-radius: 40% 40% 50% 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #e2a93a 45%, #8a5f14); }
.px-fx--gmn-chain.is-in .gmn-fx-chain { transform: scaleY(1); }
.px-fx--gmn-chain.is-tug .gmn-fx-chain { transform: scaleY(1.16); transition-duration: .1s; }
.px-fx--gmn-chain.is-out .gmn-fx-chain { transform: scaleY(0); transition-duration: .18s; }
[dir="rtl"] .px-fx--gmn-chain .gmn-fx-chain { left: auto; right: calc(50% + 40px); }

/* ── Footer: the edge of the table. The cream board's last row of
   spaces runs into the walnut, a few pieces left standing on it ── */
.gmn-footer {
  background: linear-gradient(180deg, var(--paper-3), var(--paper) 220px) !important;
  color: var(--ink-2);
}
html.dark .gmn-footer {
  background: radial-gradient(900px 260px at 50% 0%, rgba(255, 190, 110, .1), transparent 70%), #110b07 !important;
}
.gmn-footer a:hover { color: var(--theme-600); }
html .gmn-footer .ed-footer-heading {
  font-family: var(--font-ui); font-weight: 900; font-size: 13px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: var(--ink) !important; }
html .gmn-footer .ed-footer-link { color: var(--ink-2); background: linear-gradient(var(--gmn-red), var(--gmn-red)) left 100% / 0 3px no-repeat; transition: background-size .3s ease, color .2s ease; }
html .gmn-footer .ed-footer-link:hover, html .gmn-footer .ed-footer-link:focus-visible { background-size: 100% 3px; color: var(--ink); }
[dir="rtl"] .gmn-footer .ed-footer-link { background-position: right 100%; }

/* The floating nav: a rack of tiles, the current one a wooden tile */
html .ed-floating-nav {
  position: relative;
  background: rgba(255, 250, 238, .97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 3px 0 rgba(91, 58, 38, .3), var(--shadow-md);
}
html.dark .ed-floating-nav { background: rgba(36, 25, 18, .97); box-shadow: 0 3px 0 #050302, 0 0 0 1px rgba(255, 200, 140, .1), 0 20px 40px -20px rgba(0, 0, 0, .9); }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 700; color: var(--ink-2); border-radius: 11px; }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; box-shadow: 0 3px 0 var(--btn-edge); }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter: the board's centre space, cream with its double rule
   and the track along its head */
html body .gmn-footer .ed-newsletter {
  position: relative; overflow: hidden;
  background: var(--gmn-linen), #fbf3df !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 5px #fbf3df, inset 0 0 0 7px rgba(91, 58, 38, .4), 0 0 0 6px #2b1a10, 0 22px 34px -22px rgba(43, 26, 16, .8) !important;
}
html.dark body .gmn-footer .ed-newsletter { box-shadow: inset 0 0 0 5px #fbf3df, inset 0 0 0 7px rgba(91, 58, 38, .4), 0 0 0 6px #0d0805, 0 0 60px -10px rgba(255, 190, 110, .35) !important; }
html body .gmn-footer .ed-newsletter::before { display: block !important; content: ''; position: absolute; inset-inline: 22px; top: 16px; height: 6px; background: var(--gmn-track); opacity: 1; border-radius: 2px; width: auto; }
html body .gmn-footer .ed-newsletter::after { display: none !important; }
html body .gmn-footer .ed-newsletter, html body .gmn-footer .ed-newsletter * { --ink: #2b1a10; --ink-2: #4a3424; --ink-soft: #5e4636; }
html body .gmn-footer .ed-newsletter h4, html.dark body .gmn-footer .ed-newsletter h4 { color: #2b1a10 !important; font-family: var(--font-display); font-weight: 800; }
html body .gmn-footer .ed-newsletter p:not(#newsletter-msg), html.dark body .gmn-footer .ed-newsletter p:not(#newsletter-msg) { color: #4a3424 !important; opacity: 1; }
html body .gmn-footer .ed-newsletter-input, html.dark body .gmn-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #2b1a10 !important; border: 2px solid rgba(91, 58, 38, .35) !important; border-radius: 11px; font-family: var(--font-ui); }
html body .gmn-footer .ed-newsletter-input::placeholder { color: #6b5442; }
html body .gmn-footer .ed-newsletter-input:focus { border-color: #5b3a26 !important; box-shadow: 0 0 0 4px rgba(242, 183, 5, .35); }
html body .gmn-footer .ed-newsletter-btn { background: #5b3a26; color: #fbf3df; border: 0; border-radius: 11px; font-family: var(--font-ui); font-weight: 800; box-shadow: 0 4px 0 #34200f; transition: transform .15s ease, box-shadow .15s ease; }
html body .gmn-footer .ed-newsletter-btn:hover { background: #6a452d; }
html body .gmn-footer .ed-newsletter-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #34200f; }
html body .gmn-footer .ed-newsletter-age, html body .gmn-footer .ed-newsletter label { color: #4a3424 !important; }

/* Logo plate: the light-mode logo on a cream tile wherever it sits on
   walnut or the dark table */
.gmn-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.4rem;
  background: #fbf3df;
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px #fbf3df, inset 0 0 0 4.5px rgba(91, 58, 38, .35), 0 4px 0 #a68558, 0 14px 26px -14px rgba(0, 0, 0, .6);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the dark table instead. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(23, 16, 11, 0.96) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: #110b07 !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(36, 25, 18, 0.97) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--gmn-yellow) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #31231a, #17100b, #241912, #0f0a06) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with #0d1117; here fields are
   the dark table. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #120c08 !important;
  border-color: rgba(243, 230, 200, .22) !important;
  color: #f3e6c8 !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the deepest walnut. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #0f0a06;
  --paper: #f3e6c8;
  border-color: rgba(243, 230, 200, .18);
}

html header.safe-top-header[style] { background: rgba(251, 243, 223, .97) !important; }
html.dark header.safe-top-header[style] { background: rgba(23, 16, 11, .97) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(23, 16, 11, .97); }

/* ── Login / register / forgot-password brand panel: the table under the
   lamp, a corner of the board on it with pawns waiting at the start ── */
:root {
  --brand-gradient: linear-gradient(180deg, #f6ebd2, #f3e6c8 60%, #eadbb8);
  --brand-glow-1: rgba(255, 244, 214, 0.6);
  --brand-glow-2: rgba(217, 72, 65, 0.1);
}
html.dark {
  --brand-gradient: linear-gradient(180deg, #110b07, #1d140e 60%, #120c08);
  --brand-glow-1: rgba(255, 190, 110, 0.14);
  --brand-glow-2: rgba(240, 100, 90, 0.1);
}
html body .brand-panel {
  position: relative;
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(255, 244, 214, .95), rgba(255, 244, 214, 0) 70%),
    var(--gmn-linen), var(--paper) !important;
  color: var(--ink);
}
html.dark body .brand-panel {
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(255, 190, 110, .2), rgba(255, 190, 110, 0) 70%),
    #120c08 !important;
}
/* assets/css/pages/login.css draws ::after as a round glow; here it is
   a corner of the board with its pawns */
html .brand-panel::after {
  content: ''; position: absolute;
  top: auto !important; bottom: 14px !important; right: 7% !important; left: auto !important;
  width: 188px !important; height: 141px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--art-start) center bottom / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 7% !important; transform: scaleX(-1) !important; }
/* login.css's other glow becomes the lamp's shade hanging over the table */
html .brand-panel::before {
  top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; width: 130px !important; height: 70px !important; margin-left: -65px;
  border-radius: 8px 8px 3px 3px !important; opacity: 1 !important; filter: none !important; transform: none !important;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #2a1a0f, #5b3a26 30%, #7c5236 50%, #4d311f 80%, #2a1a0f) !important;
  border: 0 !important; box-shadow: none !important;
}
@media (max-width: 1023px) { html .brand-panel::before { display: none !important; } }
html body .brand-panel .text-purple-200,
html body .brand-panel [class*="text-purple-200"],
html body .brand-panel .text-white\/80, html body .brand-panel .text-white\/70 { color: var(--ink-2) !important; }
html body .brand-panel .text-white, html body .brand-panel h1, html body .brand-panel h2 { color: var(--ink) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 800 !important; }

/* ── Wallet balance card: the score pad. Ruled cream sheets glued into a
   walnut spine at the head, a red margin line, the balance written on
   the first line and a pencil laid across the corner. Lamp-lit by night
   too: paper stays paper (components/wallet/hero-balance.php). ── */
html body .wallet-hero {
  position: relative;
  background:
    linear-gradient(90deg, transparent 54px, rgba(217, 72, 65, .55) 54px 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(47, 111, 214, .2) 31px 32px) 0 64px / 100% calc(100% - 64px) no-repeat,
    linear-gradient(180deg, #fffdf3, #fbf3df);
  border: 0;
  border-radius: 6px 6px 14px 14px;
  box-shadow: 0 -14px 0 #5b3a26, 0 1px 0 #e2cfa6, 0 4px 0 #f4e9cf, 0 5px 0 #d9c49b, 0 8px 0 #efe2c2, 0 9px 0 #cfb98d, 0 26px 34px -18px rgba(43, 26, 16, .7);
  color: #2b1a10;
  margin: 22px 0 18px;
  padding-inline-start: 76px !important;
}
[dir="rtl"] body .wallet-hero {
  background:
    linear-gradient(270deg, transparent 54px, rgba(217, 72, 65, .55) 54px 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(47, 111, 214, .2) 31px 32px) 0 64px / 100% calc(100% - 64px) no-repeat,
    linear-gradient(180deg, #fffdf3, #fbf3df);
}
html.dark body .wallet-hero { box-shadow: 0 -14px 0 #3d2618, 0 1px 0 #cdb88f, 0 4px 0 #e6d7b5, 0 5px 0 #b9a47b, 0 8px 0 #dccca6, 0 9px 0 #a8936c, 0 0 70px -10px rgba(255, 190, 110, .45); }
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero .wallet-ref { color: #5e4636 !important; letter-spacing: .06em; font-family: var(--font-ui); font-size: .72rem; font-weight: 800; }
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: #5e4636 !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero [style*="color: #fff"], html body .wallet-hero .text-white { color: #2b1a10 !important; }
html body .wallet-hero .h-px { background: rgba(91, 58, 38, .25) !important; }
html body .wallet-hero .bg-emerald-400 { background: #2f9e5b !important; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0;
  color: #2b1a10; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: var(--gmn-grain), #5b3a26; color: #fbf3df; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 12px; box-shadow: 0 4px 0 #34200f; transition: transform .15s ease, box-shadow .15s ease; }
html body .wallet-hero-btn-primary:hover { background: var(--gmn-grain), #6a452d; color: #fbf3df; }
html body .wallet-hero-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #34200f; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 800; color: #2b1a10; background: #ffffff; border: 2px solid #5b3a26; border-radius: 12px; box-shadow: 0 4px 0 #5b3a26; }
html body .wallet-hero-btn-secondary:hover { background: #fffaee; }
html body .wallet-hero-btn-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 #5b3a26; }

/* ── Box card (styled by assets/css/pages/home.css) ── */
html .ed-card-mystery {
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s ease;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-4px) rotate(-.6deg); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 6px; border-radius: 0;
  background: var(--gmn-track); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: a space on the board, the track along its
   head ── */
html body .pd-buybox {
  position: relative;
  background: var(--gmn-linen), var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--gmn-track);
}
html body .pd-buybox .font-display.text-4xl { color: var(--ink); overflow-wrap: normal; font-family: var(--font-display); font-weight: 800; letter-spacing: 0; }
.pd-title { font-weight: 800 !important; }

/* The box page's own spin button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill; readable here on
   plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the table's colours. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--btn-bg); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--btn-bg-hover); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600, html .text-blue-600, html .text-blue-500 { color: var(--gmn-blue-ink); }
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 12px; box-shadow: 0 3px 0 var(--btn-edge);
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100, html .bg-blue-50 { background-color: var(--gmn-blue-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50, html.dark .bg-blue-50 { background-color: var(--gmn-blue-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200, html .border-blue-200 { border-color: rgba(47, 111, 214, .3); }
html.dark .border-violet-200 { border-color: rgba(91, 143, 240, .3) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(242, 183, 5, .45); }
html .focus\:border-purple-400:focus { border-color: var(--gmn-wood); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's wooden tiles. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(255, 255, 255, .3); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 2px solid var(--rule); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s ease; }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-4px) rotate(-.6deg); }

/* ── Cart and checkout: the order total on a space of its own ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 2px solid var(--rule) !important; border-radius: 14px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--gmn-linen), var(--paper-2) !important;
  border: 2px solid var(--rule) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--gmn-track);
}
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: normal;
  font-variant-numeric: lining-nums tabular-nums;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11.5px; letter-spacing: .06em; }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* The hero's scene is drawn by components/home/hero.css, which arrives
   after this sheet; until it does, the bare SVGs would paint at their
   natural size, so the scene waits out of sight. */
.gmn-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* ── The table's small pieces ── */
/* The four tones banners and categories are mapped to (gmn_tone_for()),
   plus walnut for anything without a colour of its own */
:root { --gmn-t1: var(--gmn-wood); --gmn-t2: var(--gmn-green); --gmn-t3: var(--gmn-blue); --gmn-t4: var(--gmn-red); --gmn-t5: var(--gmn-yellow); }
.gmn-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }

/* A tier's colour on anything that carries data-rarity or .gmn-r--*:
   plain wood, then green, blue, red and yellow, the order players
   usually pick them in */
.gmn-r--common, [data-rarity="common"]       { --r: var(--gmn-wood);   --r-deep: var(--gmn-wood-deep);   --r-ink: var(--gmn-wood-ink);   --r-soft: var(--gmn-wood-soft); }
.gmn-r--uncommon, [data-rarity="uncommon"]   { --r: var(--gmn-green);  --r-deep: var(--gmn-green-deep);  --r-ink: var(--gmn-green-ink);  --r-soft: var(--gmn-green-soft); }
.gmn-r--rare, [data-rarity="rare"]           { --r: var(--gmn-blue);   --r-deep: var(--gmn-blue-deep);   --r-ink: var(--gmn-blue-ink);   --r-soft: var(--gmn-blue-soft); }
.gmn-r--epic, [data-rarity="epic"]           { --r: var(--gmn-red);    --r-deep: var(--gmn-red-deep);    --r-ink: var(--gmn-red-ink);    --r-soft: var(--gmn-red-soft); }
.gmn-r--legendary, [data-rarity="legendary"] { --r: var(--gmn-yellow); --r-deep: var(--gmn-yellow-deep); --r-ink: var(--gmn-yellow-ink); --r-soft: var(--gmn-yellow-soft); }

/* A label: a rounded space marker printed on the board */
.gmn-label {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .24rem .65rem;
  font: 800 11.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-2);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--gmn-print), 0 2px 0 var(--rule);
}
.gmn-label--ink { color: #fbf3df; background: var(--gmn-grain), #5b3a26; box-shadow: 0 2px 0 #34200f; }
html.dark .gmn-label--ink { color: #2b1a10; background: #f3e6c8; box-shadow: 0 2px 0 #a68558; }
.gmn-label--red { color: #ffffff; background: #c0392f; box-shadow: 0 2px 0 #7f2620; }
html.dark .gmn-label--red { color: #2b1a10; background: #ff8a7e; box-shadow: 0 2px 0 #b5463c; }
.gmn-label--yellow { color: #2b1a10; background: #f2b705; box-shadow: 0 2px 0 #9c7600; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .gmn-label { letter-spacing: 0; font-size: 12px; }

/* A tag: a cream tile with a pawn printed at its head */
.gmn-tag {
  position: relative;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem .3rem 1.45rem;
  font: 800 12.5px/1.25 var(--font-ui);
  color: var(--t, #2b1a10);
  background: var(--c, #fbf3df);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1.5px rgba(91, 58, 38, .3), 0 2px 0 rgba(91, 58, 38, .3);
}
.gmn-tag::before { content: ''; position: absolute; left: .5rem; top: 50%; width: 9px; height: 12px; margin-top: -6px; background: var(--p, var(--gmn-red)); -webkit-mask: var(--gmn-pawn) center / contain no-repeat; mask: var(--gmn-pawn) center / contain no-repeat; }
[dir="rtl"] .gmn-tag { padding: .3rem 1.45rem .3rem .7rem; }
[dir="rtl"] .gmn-tag::before { left: auto; right: .5rem; }

/* A stamp: the round mark a rule book prints beside a rule */
.gmn-stamp {
  display: inline-block;
  padding: .3rem .8rem;
  font: 800 12px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gmn-red-ink);
  border: 2.5px solid currentColor;
  border-radius: 999px;
  transform: rotate(-4deg);
}

/* A score card: ruled pad paper with a red margin, for receipts and
   summaries */
.gmn-note {
  position: relative;
  background:
    linear-gradient(90deg, transparent 22px, rgba(217, 72, 65, .45) 22px 23.5px, transparent 23.5px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(47, 111, 214, .16) 27px 28px),
    #fffdf3;
  color: #2b1a10;
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 -6px 0 #5b3a26, var(--shadow);
}
[dir="rtl"] .gmn-note { background: linear-gradient(270deg, transparent 22px, rgba(217, 72, 65, .45) 22px 23.5px, transparent 23.5px), repeating-linear-gradient(180deg, transparent 0 27px, rgba(47, 111, 214, .16) 27px 28px), #fffdf3; }

/* A sheet for dialogs and panels: a board space, the track along its
   head */
.gmn-sheet {
  position: relative; overflow: hidden;
  background: var(--gmn-gloss), var(--gmn-linen), var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 24px 50px -24px rgba(63, 37, 18, .55);
}
.gmn-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--gmn-track); }
html.dark .gmn-sheet { box-shadow: 0 0 0 1px rgba(255, 200, 140, .08), 0 24px 50px -20px rgba(0, 0, 0, .9); }

/* A walnut panel: a piece of the table itself */
.gmn-table {
  position: relative;
  color: #f3e6c8;
  background: var(--gmn-walnut);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .14), 0 14px 24px -18px rgba(43, 26, 16, .8);
}

.gmn-balance, .gmn-icon-btn { border: 2px solid var(--rule); color: var(--ink); background: var(--paper-2); transition: border-color .2s ease, transform .15s ease, box-shadow .15s ease; box-shadow: 0 3px 0 var(--rule); }
.gmn-balance:hover, .gmn-icon-btn:hover { border-color: var(--gmn-wood); }
.gmn-balance:active, .gmn-icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--rule); }
.gmn-balance [data-raw] { font-family: var(--font-ui); font-weight: 800; }
html body [style*="background:#16a34a"] { background: var(--gmn-green-deep) !important; }
/* The floating nav pill is printed inside the footer; it floats over the
   page and keeps the page's own colours. */
html body .gmn-footer .ed-floating-nav { --ink: #2b1a10; --ink-2: #4a3424; --paper-3: #eadbb8; }
html.dark body .gmn-footer .ed-floating-nav { --ink: #f3e6c8; --ink-2: #e0cfae; --paper-3: #31231a; }
/* The phone menu button: a cream tile */
html body .menu-btn, html.dark body .menu-btn { background: var(--paper-2) !important; border: 2px solid var(--rule) !important; box-shadow: 0 3px 0 var(--rule); }
html body .menu-btn:hover, html.dark body .menu-btn:hover { background: var(--paper-3) !important; transform: none; }
html body .menu-btn:active { transform: translateY(3px); box-shadow: none; }

/* ── Micro-interactions shared by the whole table ──
   A badge or tag is set down like a piece when it first comes into view
   (.gmn-pop-in); the featured countdown's figures turn over like a
   flipped tile as they roll over (.gmn-tick, gated in game-night.js;
   never on cards), and in their last ten seconds they turn red (.gmn-final,
   game-night.js); whatever buys, bids or adds to the cart sends a pawn
   hopping off it (.gmn-hop). */
@media (prefers-reduced-motion: no-preference) {
  .gmn-pop-in { animation: gmn-set-down .5s cubic-bezier(.3, 1.5, .5, 1) both; }
  .gmn-tick { animation: gmn-tick .32s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 50% 50%; }
}
@keyframes gmn-set-down { 0% { transform: translateY(-14px) scale(1.12); opacity: 0; } 60% { transform: translateY(1px) scale(.97); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gmn-tick { 0% { transform: rotateX(40deg); } 100% { transform: none; } }
.gmn-final { color: var(--gmn-red) !important; }
.gmn-hop {
  position: fixed; z-index: 2147482000; pointer-events: none;
  width: 18px; height: 24px; margin: -24px 0 0 -9px;
  background: var(--hop-c, #d94841);
  -webkit-mask: var(--gmn-pawn) center / contain no-repeat; mask: var(--gmn-pawn) center / contain no-repeat;
  filter: drop-shadow(0 2px 1px rgba(43, 26, 16, .4));
  animation: gmn-hop .8s cubic-bezier(.3, 0, .5, 1) forwards;
}
@keyframes gmn-hop {
  0%   { transform: translate(0, 0); opacity: 1; }
  30%  { transform: translate(calc(var(--hx, 26px) * .5), -34px); }
  50%  { transform: translate(var(--hx, 26px), 0); }
  70%  { transform: translate(calc(var(--hx, 26px) * 1.5), -22px); opacity: 1; }
  100% { transform: translate(calc(var(--hx, 26px) * 2), 0); opacity: 0; }
}

/* ── The table behind words ──
   Pages that carry words over a drawing keep it on a layer of its own,
   clear of the copy: under both sides of centred copy, nowhere at phone
   width. */
:root {
  --gmn-mask-c: linear-gradient(90deg, #000 0, #000 9%, transparent 20%, transparent 80%, #000 91%, #000 100%);
}
@media (max-width: 1023px) {
  :root { --gmn-mask-c: linear-gradient(transparent, transparent); }
}
.gmn-wn, html body .gmn-lit, html body .gmn-err, body.gmn-404, html body .brand-panel, .ga-marquee { isolation: isolate; }

/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two (a long German label was cut
   off); a lot page's browse link drops under its heading (its German
   label pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* A product's ground: a cream space under the lamp, for thumbnails, the
   prize in a dialog, the icon of a notice */
:root {
  --gmn-face: radial-gradient(90% 80% at 50% 15%, #fffdf5, #f1e3c2);
  --gmn-face-ring: inset 0 0 0 3px #fffaee, inset 0 0 0 4.5px rgba(91, 58, 38, .3);
  --gmn-window: radial-gradient(closest-side, rgba(255, 244, 214, .9), rgba(255, 244, 214, 0));
  /* A meter: spaces filling along the track */
  --gmn-meter: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 250, 238, .7) 12px 14px), linear-gradient(90deg, var(--gmn-green), var(--gmn-blue) 50%, var(--gmn-red));
}
html.dark {
  --gmn-face: radial-gradient(90% 80% at 50% 15%, #4a3726, #241912);
  --gmn-face-ring: inset 0 0 0 3px #241912, inset 0 0 0 4.5px rgba(243, 230, 200, .22);
  --gmn-window: radial-gradient(closest-side, rgba(255, 190, 110, .25), rgba(255, 190, 110, 0));
}
[dir="rtl"] { --gmn-meter: repeating-linear-gradient(270deg, transparent 0 12px, rgba(255, 250, 238, .7) 12px 14px), linear-gradient(270deg, var(--gmn-green), var(--gmn-blue) 50%, var(--gmn-red)); }
/* Phones: a long single word in a big section title ("funktioniert's")
   gets a size that fits the row instead of breaking */
@media (max-width: 639px) {
  html body h2.text-fit.text-4xl { font-size: clamp(1.35rem, 6.6vw, 2.25rem); }
  html body h1.text-fit.text-4xl { font-size: clamp(1.5rem, 7.4vw, 2.25rem); overflow-wrap: normal !important; }
}

/* "Live": a red pawn bobbing on its space */
.gmn-live { position: relative; display: inline-block; width: 9px; height: 12px; background: #d94841; -webkit-mask: var(--gmn-pawn) center / contain no-repeat; mask: var(--gmn-pawn) center / contain no-repeat; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gmn-live { animation: gmn-bob 1.4s ease-in-out infinite; }
}
@keyframes gmn-bob { 50% { transform: translateY(-3px); } }

/* Above the footer: the edge of the table, the board's last row of
   spaces hanging over the walnut with a few pieces left on it */
.gmn-footer-top {
  position: relative; height: 112px; overflow: hidden;
  background: var(--paper);
}
html.dark .gmn-footer-top { background: radial-gradient(60% 120% at 50% 100%, rgba(255, 190, 110, .12), transparent 70%), #110b07; }
.gmn-edge { position: absolute; inset-inline: 0; bottom: 0; height: 40px; background: var(--gmn-walnut); box-shadow: inset 0 3px 0 rgba(255, 220, 170, .18); }
html.dark .gmn-edge { background: var(--gmn-grain), linear-gradient(180deg, #4d311f, #2d1c11); }
.gmn-edge__row {
  position: absolute; inset-inline: max(16px, calc(50% - 520px)); bottom: 28px; height: 30px;
  background: var(--gmn-track), #fbf3df;
  border: 3px solid #2b1a10; border-bottom-width: 5px;
  border-radius: 4px 4px 0 0;
}
[dir="rtl"] .gmn-edge__row { background: var(--gmn-track-rtl), #fbf3df; }
.gmn-pieces { position: absolute; inset-inline: max(16px, calc(50% - 520px)); bottom: 52px; display: flex; justify-content: space-around; align-items: flex-end; }
.gmn-pieces > span { display: block; flex-shrink: 0; filter: drop-shadow(0 3px 1px rgba(43, 26, 16, .35)); }
html.dark .gmn-pieces > span { filter: drop-shadow(0 3px 1px rgba(0, 0, 0, .6)) drop-shadow(0 0 8px rgba(255, 190, 110, .2)); }
@media (prefers-reduced-motion: no-preference) {
  .gmn-pieces > span { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
  .gmn-pieces > span:hover { transform: translateY(-6px); }
}
@media (max-width: 639px) {
  .gmn-footer-top { height: 96px; }
  .gmn-pieces > span:nth-child(n+5) { display: none; }
}
.gmn-colophon { font-family: var(--font-ui); letter-spacing: .02em; }

/* Names other themes' shared markup reaches for */
:root {
  --gold: #7d5a00; --gold-2: #f2b705; --gold-soft: rgba(242, 183, 5, .16); --gold-ink: #2b1a10;
  --felt: #3d2618; --felt-2: #5b3a26; --on-felt: #f3e6c8; --on-felt-soft: rgba(243, 230, 200, .78);
  --peacock: #2459b3; --peacock-soft: rgba(47, 111, 214, .1);
  --red: #a52e27; --red-soft: rgba(217, 72, 65, .1);
  --rose: #d94841; --rose-soft: rgba(217, 72, 65, .1);
  --night: #17100b; --night-2: #241912; --night-3: #31231a; --on-night: #f3e6c8; --on-night-soft: rgba(243, 230, 200, .76);
  --btn-side: #34200f;
}
html.dark {
  --gold: #ffd65c; --gold-2: #f7c52e; --gold-soft: rgba(247, 197, 46, .16); --gold-ink: #f3e6c8;
  --peacock: #8db3ff; --peacock-soft: rgba(91, 143, 240, .15);
  --red: #ff8a7e; --red-soft: rgba(240, 100, 90, .14);
  --rose: #f0645a; --rose-soft: rgba(240, 100, 90, .14);
}

/* Pieces drawn by gmn_piece_svg() (the homepage board, the footer, the
   loaders): a body in the token's colour, a lit side and a shade */
.gmn-pc-body { fill: var(--pc, #d94841); }
.gmn-pc-lit { fill: #ffffff; fill-opacity: .32; }
.gmn-pc-shade { fill: #000000; fill-opacity: .2; }
.gmn-pc--red { --pc: #d94841; } .gmn-pc--blue { --pc: #2f6fd6; } .gmn-pc--green { --pc: #2f9e5b; } .gmn-pc--yellow { --pc: #f2b705; } .gmn-pc--wood { --pc: #8a5d3e; }
html.dark .gmn-pc--red { --pc: #f0645a; } html.dark .gmn-pc--blue { --pc: #5b8ff0; } html.dark .gmn-pc--green { --pc: #46b874; } html.dark .gmn-pc--yellow { --pc: #f7c52e; } html.dark .gmn-pc--wood { --pc: #b0805a; }

/* Three squares of the track with a pawn hopping across them, one square
   at a time (the page loader and the app splash) */
.gmn-hops { position: relative; display: block; width: 100%; aspect-ratio: 3.4 / 1.6; }
.gmn-hops__sq { position: absolute; bottom: 0; width: 30%; height: 44%; border-radius: 7px; background: var(--c, #d94841); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 4px 0 rgba(43, 26, 16, .3); }
.gmn-hops__sq:nth-child(1) { left: 0; --c: #d94841; }
.gmn-hops__sq:nth-child(2) { left: 35%; --c: #2f6fd6; }
.gmn-hops__sq:nth-child(3) { left: 70%; --c: #2f9e5b; }
.gmn-hops__pawn { position: absolute; bottom: 30%; left: 6%; width: 18%; }
.gmn-hops__pawn svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 2px rgba(43, 26, 16, .4)); }
[dir="rtl"] .gmn-hops { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .gmn-hops__pawn { animation: gmn-hops 1.8s cubic-bezier(.4, 0, .4, 1) infinite; }
}
@keyframes gmn-hops {
  0%, 12%   { left: 6%; transform: none; opacity: 1; }
  24%       { transform: translateY(-70%); }
  36%, 46%  { left: 41%; transform: none; }
  58%       { transform: translateY(-70%); }
  70%, 82%  { left: 76%; transform: none; opacity: 1; }
  91%       { left: 76%; transform: translateY(-40%); opacity: 0; }
  92%       { left: 6%; transform: translateY(-40%); opacity: 0; }
  100%      { left: 6%; transform: none; opacity: 1; }
}
.gmn-pieces > span svg { display: block; width: 100%; height: auto; }

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #1c6e3c; --px-warn: #805c00; --px-crit: #a52e27; --px-info: #2459b2; }
html.dark:root { --px-good: #70d69b; --px-warn: #f7c42c; --px-crit: #ff9e94; --px-info: #91b6f2; }

/* Changing language, the scene (game-night.js): two dice showing the old
   flag are shaken and thrown and the scorecard takes the new name; after the
   reload they tumble to a stop on the new flag and the card gets a star.
   The dice are frozen mid-air between the pages, so the reload never shows.
   The felt, the dice and the scorecard keep their own colours in both modes. */
.gmn-lang-stage { background: color-mix(in srgb, #1e130c 55%, transparent); }
.gmn-lang-table {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 12px; overflow: hidden;
  background: var(--gmn-walnut, #5b3a26); border-radius: var(--radius, 14px);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .2), 0 34px 70px -28px rgba(0, 0, 0, .65);
  font-family: var(--font-ui, system-ui, sans-serif);
}
.gmn-lang-felt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; height: 150px; overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(closest-side, rgba(255, 236, 190, .28), rgba(255, 236, 190, 0)) 50% 40% / 80% 120% no-repeat,
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .04) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #2f9e5b, #1f7a43);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), inset 0 6px 18px rgba(0, 0, 0, .35);
}
.gmn-lang-die {
  --x0: -40px; --x1: -14px; --y1: -34px; --r1: 200deg; --r2: 360deg;
  position: relative; flex: 0 0 auto; width: 66px; height: 66px; border-radius: 14px;
  background: linear-gradient(145deg, #fffdf6, #efe2c4); color: #2b1a10;
  box-shadow: inset -4px -5px 0 rgba(91, 58, 38, .2), inset 2px 2px 0 rgba(255, 255, 255, .8), 0 9px 10px -4px rgba(0, 0, 0, .55);
  transform: translate(var(--x1), var(--y1)) rotate(var(--r1)) scale(.9, 1.08);
}
.gmn-lang-die + .gmn-lang-die { --x0: -26px; --x1: 12px; --y1: -18px; --r1: -150deg; --r2: -360deg; }
.gmn-lang-face { position: absolute; inset: 0; display: grid; place-items: center; }
.gmn-lang-face img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fffdf6, 0 0 0 3.5px rgba(91, 58, 38, .4); }
.gmn-lang-face b { font: 400 21px/1 var(--font-display, system-ui, sans-serif); letter-spacing: .02em; }
.gmn-lang-face-old, .gmn-lang-face-new { opacity: 0; }
.gmn-lang-pips {
  background:
    radial-gradient(circle at 26% 26%, #2b1a10 0 5px, transparent 5.6px),
    radial-gradient(circle at 74% 26%, #2b1a10 0 5px, transparent 5.6px),
    radial-gradient(circle at 50% 50%, #c0392f 0 5.5px, transparent 6.1px),
    radial-gradient(circle at 26% 74%, #2b1a10 0 5px, transparent 5.6px),
    radial-gradient(circle at 74% 74%, #2b1a10 0 5px, transparent 5.6px);
}
.gmn-lang-score {
  position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px;
  border-radius: 6px; background: #fffaee; color: #2b1a10;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(47, 111, 214, .16) 27px 28px);
  box-shadow: inset 4px 0 0 #d94841, 0 6px 12px -6px rgba(0, 0, 0, .5);
}
.gmn-lang-score-code { flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; }
.gmn-lang-score-code i { width: 14px; height: 14px; border-radius: 50%; background: #d94841; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.gmn-lang-score-code b { font: 800 14px/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .06em; color: #6b5442; }
.gmn-lang-score-cell { flex: 1 1 auto; min-width: 0; display: grid; }
.gmn-lang-score-cell > span { grid-area: 1 / 1; align-self: center; overflow-wrap: anywhere; }
.gmn-lang-score-old { opacity: 0; font: 400 20px/1.2 var(--font-display, system-ui, sans-serif); color: #6b5442; text-decoration: line-through 2px #d94841; }
.gmn-lang-score-new { font: 400 clamp(28px, 8.5vw, 42px)/1.1 var(--font-display, system-ui, sans-serif); color: #2b1a10; clip-path: inset(-20% -2% -20% -2%); }
.gmn-lang-star { flex: 0 0 auto; font-size: 30px; line-height: 1; color: #f2b705; text-shadow: 0 2px 0 #c99400; opacity: 0; }
/* Out: shaken, thrown; the scorecard takes the new name. */
.px-lang-stage-out .gmn-lang-table { animation: gmn-lang-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .gmn-lang-die { animation: gmn-lang-throw .88s ease-in-out .06s both; }
.px-lang-stage-out .gmn-lang-face-old { animation: gmn-lang-old .88s linear .06s both; }
.px-lang-stage-out .gmn-lang-pips { animation: gmn-lang-pips .88s linear .06s both; }
.px-lang-stage-out .gmn-lang-score-old { animation: gmn-lang-strike .3s ease-in .45s both; }
.px-lang-stage-out .gmn-lang-score-new { animation: gmn-lang-write .38s steps(10, end) .58s both; }
/* In: they tumble to a stop on the new flag; a star on the card. */
.px-lang-stage-in .gmn-lang-die { animation: gmn-lang-land .66s cubic-bezier(.3, .6, .35, 1) both; }
.px-lang-stage-in .gmn-lang-pips { animation: gmn-lang-pips-off .66s linear both; }
.px-lang-stage-in .gmn-lang-face-new { animation: gmn-lang-new .66s linear both; }
.px-lang-stage-in .gmn-lang-star { animation: gmn-lang-star .3s cubic-bezier(.2, .9, .3, 1.4) .66s both; }
.px-lang-stage-in .gmn-lang-table { animation: gmn-lang-away .28s ease-in 1s both; }
@keyframes gmn-lang-rise { from { transform: translateY(36px); opacity: 0; } }
@keyframes gmn-lang-away { to { transform: translateY(26px); opacity: 0; } }
@keyframes gmn-lang-throw {
  0%  { transform: translate(var(--x0), 0) rotate(0deg); }
  16% { transform: translate(calc(var(--x0) - 5px), 2px) rotate(-7deg); }
  28% { transform: translate(calc(var(--x0) + 4px), -2px) rotate(6deg); }
  40% { transform: translate(var(--x0), 0) rotate(0deg); }
}
@keyframes gmn-lang-old { 0%, 44% { opacity: 1; } 58% { opacity: 0; } }
@keyframes gmn-lang-pips { 0%, 44% { opacity: 0; } 58% { opacity: 1; } }
@keyframes gmn-lang-strike { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } }
@keyframes gmn-lang-write { from { clip-path: inset(-20% 100% -20% -2%); } }
@keyframes gmn-lang-land {
  48% { transform: translate(5px, 3px) rotate(var(--r2)) scale(1.07, .92); }
  70% { transform: translate(0, -9px) rotate(calc(var(--r2) + 4deg)); }
  to  { transform: translate(0, 0) rotate(var(--r2)); }
}
@keyframes gmn-lang-pips-off { 0%, 40% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes gmn-lang-new { 0%, 40% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes gmn-lang-star { from { opacity: 0; transform: scale(2.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
@media (max-width: 460px) {
  .gmn-lang-felt { height: 130px; gap: 22px; }
  .gmn-lang-die { width: 58px; height: 58px; }
  .gmn-lang-score { padding: 10px 12px; gap: 10px; }
}

/* Phones: the hero's two buttons stay side by side, each as wide as its
   label needs, their text and padding shrinking with the screen; a label
   still too long takes two even lines inside its button. A home section's title and its "View all" link
   share one row too: the title keeps a little under half of it, breaking
   between words if it must, and only a very long link label takes two
   lines. */
@media (max-width: 639px) {
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) {
    flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
  }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 45%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --theme-500: #b53c36;
}
/* rev 868fe5109c9f2a2b */