/* ============================================================
   DRAGON BOAT THEME — race day on the harbour.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from Duanwu, the 5th day of the 5th lunar month: long
   dragon boats with carved heads and tails, the drum at the bow,
   a row of paddles, lane ropes and finish buoys, zongzi tied in
   bamboo leaves and five-colour silk threads. Jade, river teal
   and young bamboo on a misty morning harbour (the default);
   after dark a night race under the city lights, their
   reflections trailing across the water.

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

:root {
  --font-display: 'Unbounded', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --font-ui:      'Nunito', 'Inter', system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-brush:   'Race Brush', 'Kaiti SC', 'STKaiti', 'KaiTi', serif;

  --paper:        #f2f7f2;
  --paper-2:      #ffffff;
  --paper-3:      #e4eee7;
  --ink:          #0e2a28;
  --ink-2:        #2c4a46;
  --ink-soft:     #5f7a74;
  --rule:         rgba(14, 42, 40, 0.13);
  --rule-soft:    rgba(14, 42, 40, 0.07);
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(14, 42, 40, .06), 0 6px 16px -8px rgba(14, 42, 40, .2);
  --shadow-md:    0 2px 4px rgba(14, 42, 40, .06), 0 18px 34px -16px rgba(14, 42, 40, .36);

  /* Jade */
  --theme-50:  #eaf6f0;
  --theme-100: #cdeadb;
  --theme-200: #9dd5bb;
  --theme-300: #66bb98;
  --theme-400: #35a07a;
  --theme-500: #1a8763;
  --theme-600: #116e51;
  --theme-700: #0e5842;
  --theme-800: #0b4333;
  --theme-900: #072d23;
  --theme-500-rgb: 26, 135, 99;
  --theme-600-rgb: 17, 110, 81;

  /* The night harbour: footer, winners, wallet and splash in both modes */
  --night:   #08262b;
  --night-2: #0d333a;
  --night-3: #134249;
  --on-night: #eef6ee;
  --on-night-soft: rgba(238, 246, 238, .76);

  /* River teal, young bamboo, bamboo leaf, drum lacquer, harbour lamps,
     zongzi string, and the five colours of the silk threads */
  --river: #1b6f7d; --river-2: #2b93a0;
  --bamboo: #b9d36a; --bamboo-2: #8fb04a;
  --leaf: #5f9a3e; --leaf-2: #3d6e2a;
  --lacquer: #c94c3c;
  --lamp: #ffcf6b;
  --string: #e7d3a3;
  --silk: linear-gradient(180deg, #d4483b 0 20%, #f2c14e 20% 40%, #2f7fb5 40% 60%, #f7f2e4 60% 80%, #1f8a5c 80% 100%);

  /* Names other themes' shared markup reaches for */
  --gold:       #116e51;
  --gold-2:     #35a07a;
  --gold-soft:  rgba(26, 135, 99, 0.09);
  --gold-ink:   #0e2a28;
  --felt:       #08262b;
  --felt-2:     #0d333a;
  --on-felt:    #eef6ee;
  --on-felt-soft: rgba(238, 246, 238, 0.78);
  --peacock:    #1b6f7d;
  --peacock-soft: rgba(27, 111, 125, 0.11);
  --red:        #116e51;
  --red-soft:   rgba(26, 135, 99, 0.09);
  --rose:       #c94c3c;
  --rose-soft:  rgba(26, 135, 99, 0.09);

  --notify-accent: var(--theme-500);
  --nav-accent:    var(--theme-600);
  --hdr-strip-bg:  #08262b;
  --hdr-strip-rule: transparent;
  --text-primary:  var(--ink);

  /* Buttons: deep jade by day, pale jade by night */
  --btn-bg:       #0f6b50;
  --btn-bg-hover: #13805f;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #094534, 0 10px 20px -10px rgba(15, 107, 80, .7);
  --btn-shadow-hover: 0 3px 0 #094534, 0 14px 24px -10px rgba(26, 135, 99, .75);

  /* A lane rope: floats strung along a line, the theme's border band */
  --lane-rope-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><path d='M0 7H64' stroke='%23b89a5e' stroke-width='1.4'/><ellipse cx='8' cy='7' rx='5.6' ry='4' fill='%23ffffff' stroke='%23a9c3b6' stroke-width='.9'/><ellipse cx='24' cy='7' rx='5.6' ry='4' fill='%231a8763'/><ellipse cx='22.6' cy='5.6' rx='2' ry='1' fill='%23ffffff' fill-opacity='.45'/><ellipse cx='40' cy='7' rx='5.6' ry='4' fill='%23ffffff' stroke='%23a9c3b6' stroke-width='.9'/><ellipse cx='56' cy='7' rx='5.6' ry='4' fill='%23b9d36a'/><ellipse cx='54.6' cy='5.6' rx='2' ry='1' fill='%23ffffff' fill-opacity='.5'/></svg>");
  --lane-rope: var(--lane-rope-img) repeat-x left center / 64px 14px;
  --lane-rope-night-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><path d='M0 7H64' stroke='%236d8a7c' stroke-width='1.4'/><ellipse cx='8' cy='7' rx='5.6' ry='4' fill='%23e9f3ec'/><ellipse cx='24' cy='7' rx='5.6' ry='4' fill='%232fb487'/><ellipse cx='40' cy='7' rx='5.6' ry='4' fill='%23e9f3ec'/><ellipse cx='56' cy='7' rx='5.6' ry='4' fill='%23ffcf6b'/><ellipse cx='54.6' cy='5.6' rx='2' ry='1' fill='%23ffffff' fill-opacity='.6'/></svg>");
  --lane-rope-night: var(--lane-rope-night-img) repeat-x left center / 64px 14px;
  /* Ripples on still water, scattered across the page */
  --ripples: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%231a8763' stroke-linecap='round' stroke-opacity='.10' stroke-width='1.3'><path d='M20 30q10-6 20 0t20 0'/><path d='M110 92q8-5 16 0t16 0'/><path d='M44 146q7-4 14 0'/><path d='M150 20q6-4 12 0'/></g></svg>");
  /* The night harbour behind the footer, winners, wallet, splash and login:
     a few stars and the haze of the city lights */
  --night-lights: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='200' viewBox='0 0 240 200'><g fill='%23eef6ee'><circle cx='22' cy='30' r='.8' fill-opacity='.55'/><circle cx='96' cy='14' r='.6' fill-opacity='.45'/><circle cx='150' cy='62' r='.9' fill-opacity='.5'/><circle cx='206' cy='24' r='.6' fill-opacity='.4'/><circle cx='60' cy='120' r='.7' fill-opacity='.35'/><circle cx='186' cy='150' r='.6' fill-opacity='.35'/><circle cx='120' cy='180' r='.7' fill-opacity='.3'/></g><g fill='%23ffcf6b'><circle cx='130' cy='110' r='1' fill-opacity='.35'/><circle cx='30' cy='170' r='.9' fill-opacity='.3'/></g></svg>");
  /* The harbour front at night, its windows lit */
  --skyline-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='140' viewBox='0 0 1200 140' preserveAspectRatio='xMidYMax slice'><path d='M0 140V92C80 74 150 62 230 70C300 78 340 48 420 50C500 52 540 80 620 76C690 72 740 40 830 44C910 48 960 76 1060 70C1120 66 1170 72 1200 74V140Z' fill='%230b2a30'/><path d='M10 140V74h30V140ZM49 140V65h30V140ZM106 140V57h30V140ZM247 140V51h22V140ZM273 140V80h18V140ZM339 140V70h18V140ZM377 140V66h22V140ZM453 140V53h30V140ZM503 140V52h22V140ZM586 140V77h18V140ZM734 140V51h18V140ZM808 140V51h30V140ZM894 140V54h34V140ZM940 140V54h30V140ZM1077 140V79h30V140ZM1121 140V71h18V140ZM1183 140V77h26V140Z' fill='%230e3238'/><path d='M33 140V95h28V140ZM67 140V110h28V140ZM116 140V122h20V140ZM182 140V123h24V140ZM278 140V94h20V140ZM302 140V99h24V140ZM337 140V104h20V140ZM379 140V121h20V140ZM411 140V117h28V140ZM513 140V121h20V140ZM555 140V111h36V140ZM608 140V122h28V140ZM647 140V118h36V140ZM739 140V108h16V140ZM803 140V94h36V140ZM842 140V117h24V140ZM953 140V95h24V140ZM989 140V99h28V140ZM1055 140V98h28V140ZM1107 140V121h28V140ZM1157 140V119h28V140ZM1195 140V111h24V140Z' fill='%23113a41'/><path d='M42 100h2v3h-2ZM54 107h2v3h-2ZM36 128h2v3h-2ZM48 128h2v3h-2ZM36 135h2v3h-2ZM42 135h2v3h-2ZM54 135h2v3h-2ZM70 122h2v3h-2ZM82 122h2v3h-2ZM70 129h2v3h-2ZM76 129h2v3h-2ZM82 129h2v3h-2ZM88 129h2v3h-2ZM119 127h2v3h-2ZM125 127h2v3h-2ZM185 135h2v3h-2ZM287 99h2v3h-2ZM287 134h2v3h-2ZM293 134h2v3h-2ZM305 104h2v3h-2ZM317 111h2v3h-2ZM317 118h2v3h-2ZM311 125h2v3h-2ZM317 132h2v3h-2ZM346 109h2v3h-2ZM352 109h2v3h-2ZM346 116h2v3h-2ZM340 123h2v3h-2ZM352 123h2v3h-2ZM420 122h2v3h-2ZM516 126h2v3h-2ZM528 126h2v3h-2ZM558 116h2v3h-2ZM564 123h2v3h-2ZM576 123h2v3h-2ZM582 123h2v3h-2ZM558 130h2v3h-2ZM570 130h2v3h-2ZM611 134h2v3h-2ZM617 134h2v3h-2ZM623 134h2v3h-2ZM650 123h2v3h-2ZM656 123h2v3h-2ZM674 130h2v3h-2ZM748 120h2v3h-2ZM742 127h2v3h-2ZM742 134h2v3h-2ZM806 99h2v3h-2ZM806 106h2v3h-2ZM818 113h2v3h-2ZM824 120h2v3h-2ZM830 120h2v3h-2ZM812 127h2v3h-2ZM818 127h2v3h-2ZM806 134h2v3h-2ZM845 122h2v3h-2ZM857 122h2v3h-2ZM962 100h2v3h-2ZM962 114h2v3h-2ZM956 128h2v3h-2ZM962 128h2v3h-2ZM968 128h2v3h-2ZM968 135h2v3h-2ZM992 104h2v3h-2ZM998 104h2v3h-2ZM1010 104h2v3h-2ZM992 111h2v3h-2ZM998 111h2v3h-2ZM1004 125h2v3h-2ZM1010 125h2v3h-2ZM998 132h2v3h-2ZM1076 103h2v3h-2ZM1064 117h2v3h-2ZM1058 131h2v3h-2ZM1064 131h2v3h-2ZM1076 131h2v3h-2ZM1110 126h2v3h-2ZM1122 126h2v3h-2ZM1122 133h2v3h-2ZM1128 133h2v3h-2ZM1172 124h2v3h-2ZM1178 124h2v3h-2ZM1166 131h2v3h-2ZM1198 116h2v3h-2ZM1204 116h2v3h-2ZM1210 123h2v3h-2Z' fill='%23ffcf6b' fill-opacity='.8'/></svg>");
  --night-bg:
    radial-gradient(520px 260px at 86% -60px, rgba(127, 214, 174, .16), transparent 70%),
    radial-gradient(560px 320px at 0% 110%, rgba(31, 157, 122, .30), transparent 70%),
    radial-gradient(420px 240px at 60% 120%, rgba(43, 147, 160, .22), transparent 70%),
    var(--night-lights),
    linear-gradient(180deg, #0b2f35 0%, #061c20 100%);

  --page-bg: var(--ripples) repeat, var(--paper);
}

html.dark {
  --paper:        #071b1f;
  --paper-2:      #0d272c;
  --paper-3:      #143338;
  --ink:          #e8f3ec;
  --ink-2:        #c3d7cf;
  --ink-soft:     #88a39c;
  --rule:         rgba(232, 243, 236, 0.13);
  --rule-soft:    rgba(232, 243, 236, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85);

  /* Pale jade */
  --theme-50:  #0f2a2a;
  --theme-100: #15393a;
  --theme-200: #2a5a52;
  --theme-300: #b8ecd2;
  --theme-400: #9fe2c1;
  --theme-500: #7fd6ae;
  --theme-600: #95dfbb;
  --theme-700: #b8ecd2;
  --theme-800: #d6f5e5;
  --theme-900: #eefbf4;
  --theme-500-rgb: 127, 214, 174;
  --theme-600-rgb: 149, 223, 187;

  --gold:       #95dfbb;
  --gold-2:     #b8ecd2;
  --gold-soft:  rgba(127, 214, 174, 0.12);
  --felt:       #04161a;
  --felt-2:     #0d272c;
  --peacock:    #6fcfd9;
  --peacock-soft: rgba(111, 207, 217, 0.13);
  --red:        #95dfbb;
  --red-soft:   rgba(127, 214, 174, 0.13);
  --rose:       #ffcf6b;
  --rose-soft:  rgba(127, 214, 174, 0.13);

  --nav-accent:    var(--theme-500);
  --hdr-strip-bg:  #04161a;

  --btn-bg:       #8fdcb5;
  --btn-bg-hover: #a9e8c8;
  --btn-ink:      #052a20;
  --btn-shadow:   0 2px 0 #4aa883, 0 10px 26px -10px rgba(127, 214, 174, .5);
  --btn-shadow-hover: 0 3px 0 #4aa883, 0 14px 30px -10px rgba(127, 214, 174, .65);

  --lane-rope-img: var(--lane-rope-night-img);
  --lane-rope: var(--lane-rope-night);
  --ripples: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%237fd6ae' stroke-linecap='round' stroke-opacity='.07' stroke-width='1.3'><path d='M20 30q10-6 20 0t20 0'/><path d='M110 92q8-5 16 0t16 0'/><path d='M44 146q7-4 14 0'/></g><g stroke='%23ffcf6b' stroke-linecap='round' stroke-opacity='.12' stroke-width='1.6'><path d='M150 14v10'/><path d='M80 60v7'/><path d='M14 110v8'/></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 88% -160px, rgba(255, 207, 107, 0.07), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 8% -140px, rgba(31, 157, 122, 0.14), transparent 70%) no-repeat,
    var(--ripples) repeat,
    var(--paper);
}

/* ── Materials ──
   The pieces every surface is built from, shared by the skin sheets
   (assets/css/skin/) and the plugin variants:
   - six race-day colours (--db-jade, --db-river, --db-bamboo, --db-lacquer,
     --db-gold, --db-buoy) with --db-*-ink for lettering and -soft washes;
   - the lane rope (--lane-rope, above) along the top of sheets, and its
     smaller float line (--lane-rope-sm) for rules and narrow edges;
   - the five-colour silk threads: in bands (--silk), side by side for a
     leading edge (--silk-v) and twisted into a cord (--db-thread) for
     progress bars;
   - a boat's hull: jade lacquer painted with scales (--db-hull) with its
     gold gunwale (--db-gunwale) for table heads and the hull tiles that
     hold icons (--db-tile, --db-tile-relief);
   - the drum seen from above, cream skin in a ring of studded vermilion
     (--db-drum), for the current page, ticks and stamps;
   - the finish board: white boards (--db-board-paper) ruled in faint
     lane lines (--db-lanes) and hung from a bamboo rod (--bamboo-rod) for
     stat cards, receipts and notices;
   - river waves (--db-waves) along the foot of a panel, and still water
     (--db-stage) for products to float on. */
:root {
  --db-jade: #1a8763; --db-river: #1b6f7d; --db-bamboo: #8fb04a; --db-lacquer: #c94c3c; --db-gold: #e0a92a; --db-buoy: #f08a3c;
  --db-jade-ink: #0e6a4c; --db-river-ink: #145a66; --db-bamboo-ink: #4f6b1e; --db-lacquer-ink: #a5372a; --db-gold-ink: #845c00; --db-buoy-ink: #a4501a;
  --db-jade-soft: rgba(26, 135, 99, .1); --db-river-soft: rgba(27, 111, 125, .1); --db-bamboo-soft: rgba(143, 176, 74, .16); --db-lacquer-soft: rgba(201, 76, 60, .09); --db-gold-soft: rgba(224, 169, 42, .16); --db-buoy-soft: rgba(240, 138, 60, .13);
  --theme-600-ink: #ffffff;

  --lane-rope-sm-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'><path d='M0 5H40' stroke='%23b89a5e' stroke-width='1.1'/><ellipse cx='5' cy='5' rx='3.8' ry='2.8' fill='%23ffffff' stroke='%23a9c3b6' stroke-width='.7'/><ellipse cx='15' cy='5' rx='3.8' ry='2.8' fill='%231a8763'/><ellipse cx='25' cy='5' rx='3.8' ry='2.8' fill='%23ffffff' stroke='%23a9c3b6' stroke-width='.7'/><ellipse cx='35' cy='5' rx='3.8' ry='2.8' fill='%23b9d36a'/></svg>");
  --lane-rope-sm: var(--lane-rope-sm-img) repeat-x left center / 40px 10px;
  --silk-v: linear-gradient(90deg, #d4483b 0 20%, #f2c14e 20% 40%, #2f7fb5 40% 60%, #f7f2e4 60% 80%, #1f8a5c 80% 100%);
  --db-thread: repeating-linear-gradient(115deg, #d4483b 0 5px, #f2c14e 5px 10px, #2f7fb5 10px 15px, #f7f2e4 15px 20px, #1f8a5c 20px 25px);

  --db-scales-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'><path d='M0 12a4.5 4.5 0 0 1 9 0a4.5 4.5 0 0 1 9 0M-4.5 6a4.5 4.5 0 0 1 9 0a4.5 4.5 0 0 1 9 0a4.5 4.5 0 0 1 9 0' fill='none' stroke='%239fe0c4' stroke-opacity='.32' stroke-width='1'/></svg>");
  --db-hull: var(--db-scales-img) 0 0 / 18px 12px, linear-gradient(180deg, #1f8a6c, #12594a);
  --db-gunwale: linear-gradient(#f0c14b, #f0c14b);
  --db-tile: var(--db-scales-img) 0 0 / 12px 8px, linear-gradient(160deg, #23977a 0%, #15705a 55%, #0f5444 100%);
  --db-tile-relief: inset 0 0 0 1.5px rgba(240, 193, 75, .85), inset 0 0 0 3px rgba(7, 45, 35, .35), 0 2px 0 #0b4333, 0 6px 12px -6px rgba(7, 45, 35, .5);

  --db-drum: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='19.4' fill='%23c94c3c'/><circle cx='20' cy='20' r='19.4' fill='none' stroke='%238e2f25' stroke-width='1.2'/><g fill='%23f0c14b'><circle cx='20' cy='3.2' r='1.3'/><circle cx='20' cy='36.8' r='1.3'/><circle cx='3.2' cy='20' r='1.3'/><circle cx='36.8' cy='20' r='1.3'/><circle cx='8.1' cy='8.1' r='1.3'/><circle cx='31.9' cy='31.9' r='1.3'/><circle cx='31.9' cy='8.1' r='1.3'/><circle cx='8.1' cy='31.9' r='1.3'/></g><circle cx='20' cy='20' r='13.6' fill='%23f4e7c4'/><circle cx='20' cy='20' r='6' fill='none' stroke='%23c94c3c' stroke-opacity='.35' stroke-width='1.2'/></svg>") center / contain no-repeat;
  --db-drum-red: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='19.4' fill='%23c94c3c'/><g fill='%23f0c14b'><circle cx='20' cy='3.2' r='1.3'/><circle cx='20' cy='36.8' r='1.3'/><circle cx='3.2' cy='20' r='1.3'/><circle cx='36.8' cy='20' r='1.3'/><circle cx='8.1' cy='8.1' r='1.3'/><circle cx='31.9' cy='31.9' r='1.3'/><circle cx='31.9' cy='8.1' r='1.3'/><circle cx='8.1' cy='31.9' r='1.3'/></g><circle cx='20' cy='20' r='14.4' fill='none' stroke='%23f4e7c4' stroke-opacity='.55' stroke-width='1'/></svg>") center / contain no-repeat;

  --db-board-paper: #fffdf6;
  --db-lanes: repeating-linear-gradient(180deg, transparent 0 27px, rgba(27, 111, 125, .1) 27px 28px);
  --bamboo-rod-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='12' viewBox='0 0 72 12'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23cfe28f'/><stop offset='.5' stop-color='%239dbb52'/><stop offset='1' stop-color='%23718f30'/></linearGradient></defs><rect y='1.5' width='72' height='9' fill='url(%23b)'/><path d='M0 4.2H72' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1'/><rect x='34.6' y='.6' width='2.8' height='10.8' rx='1.2' fill='%23617c26'/><path d='M37.4 3.6q4-1.6 8 0' fill='none' stroke='%23617c26' stroke-opacity='.5' stroke-width='.8'/></svg>");
  --bamboo-rod: var(--bamboo-rod-img) repeat-x left center / 72px 12px;
  --db-waves-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><path d='M0 6Q8 1 16 6T32 6T48 6T64 6V14H0Z' fill='%23cfe9e1'/><path d='M0 9Q8 4 16 9T32 9T48 9T64 9V14H0Z' fill='%23a7d6c8'/><path d='M6 6q4-2.4 8 0M38 6q4-2.4 8 0' fill='none' stroke='%23ffffff' stroke-opacity='.8' stroke-width='1.1' stroke-linecap='round'/></svg>");
  --db-waves: var(--db-waves-img) repeat-x left bottom / 64px 14px;
  /* A product floating on still water: pale jade, a ring of ripples under it */
  --db-stage:
    radial-gradient(42% 9% at 50% 86%, rgba(26, 135, 99, .2), transparent 72%),
    radial-gradient(58% 14% at 50% 87%, transparent 60%, rgba(26, 135, 99, .13) 64%, transparent 70%),
    linear-gradient(180deg, #f7fbf8 0%, #eaf5ef 58%, #d8ede4 100%);
  --db-art-floor: rgba(14, 42, 40, .14);
  --db-art-water: #cfe9e1;
  --db-art-ripple: #7fbfae;
}
html.dark {
  --db-jade: #4fc79a; --db-river: #6fcfd9; --db-bamboo: #b9d36a; --db-lacquer: #ff8a73; --db-gold: #ffcf6b; --db-buoy: #ffa65e;
  --db-jade-ink: #8fe0bd; --db-river-ink: #9be0e8; --db-bamboo-ink: #cfe39a; --db-lacquer-ink: #ffab98; --db-gold-ink: #ffdc8f; --db-buoy-ink: #ffc08e;
  --db-jade-soft: rgba(79, 199, 154, .13); --db-river-soft: rgba(111, 207, 217, .12); --db-bamboo-soft: rgba(185, 211, 106, .13); --db-lacquer-soft: rgba(255, 138, 115, .13); --db-gold-soft: rgba(255, 207, 107, .13); --db-buoy-soft: rgba(255, 166, 94, .13);
  --theme-600-ink: #052a20;

  --lane-rope-sm-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'><path d='M0 5H40' stroke='%236d8a7c' stroke-width='1.1'/><ellipse cx='5' cy='5' rx='3.8' ry='2.8' fill='%23e9f3ec'/><ellipse cx='15' cy='5' rx='3.8' ry='2.8' fill='%232fb487'/><ellipse cx='25' cy='5' rx='3.8' ry='2.8' fill='%23e9f3ec'/><ellipse cx='35' cy='5' rx='3.8' ry='2.8' fill='%23ffcf6b'/></svg>");
  --lane-rope-sm: var(--lane-rope-sm-img) repeat-x left center / 40px 10px;
  --db-hull: var(--db-scales-img) 0 0 / 18px 12px, linear-gradient(180deg, #145f4e, #0b3b33);
  --db-tile: var(--db-scales-img) 0 0 / 12px 8px, linear-gradient(160deg, #1d7e66 0%, #125c4b 55%, #0b4034 100%);
  --db-tile-relief: inset 0 0 0 1.5px rgba(255, 207, 107, .7), inset 0 0 0 3px rgba(0, 0, 0, .3), 0 2px 0 #04161a, 0 6px 12px -6px rgba(0, 0, 0, .6);

  --db-board-paper: #0f2c31;
  --db-lanes: repeating-linear-gradient(180deg, transparent 0 27px, rgba(127, 214, 174, .08) 27px 28px);
  --db-waves-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'><path d='M0 6Q8 1 16 6T32 6T48 6T64 6V14H0Z' fill='%23134249'/><path d='M0 9Q8 4 16 9T32 9T48 9T64 9V14H0Z' fill='%230d333a'/><path d='M6 6q4-2.4 8 0M38 6q4-2.4 8 0' fill='none' stroke='%23ffcf6b' stroke-opacity='.45' stroke-width='1.1' stroke-linecap='round'/></svg>");
  --db-stage:
    radial-gradient(42% 9% at 50% 86%, rgba(255, 207, 107, .16), transparent 72%),
    radial-gradient(58% 14% at 50% 87%, transparent 60%, rgba(127, 214, 174, .14) 64%, transparent 70%),
    linear-gradient(180deg, #123238 0%, #0e2a2f 58%, #0a2226 100%);
  --db-art-floor: rgba(0, 0, 0, .35);
  --db-art-water: #134249;
  --db-art-ripple: #2f6f68;
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. By day a board
   is the river at the start line: still jade water, boards of white
   paddle-blade wood, the tiles rising from rice white through young
   bamboo and jade to the river's teal, the drum's vermilion and the
   gold of a boat's trim; after dark it is the night race, cells of deep
   harbour water and the tiles lit like the lamps along the shore. */
:root {
  --game-bg:        #eaf5ef;
  --game-surface:   #d3e9de;
  --game-surface-2: #ffffff;
  --game-ink:       #0e2a28;
  --game-muted:     #5f7a74;
  --game-accent:    #116e51;
  --game-accent-ink:#ffffff;
  --game-good:      #1a8763;
  --game-bad:       #c94c3c;
  --game-tile-1:    #fbf7ea;
  --game-tile-2:    #e3efb8;
  --game-tile-3:    #b9d36a;
  --game-tile-4:    #66bb98;
  --game-tile-5:    #1a8763;
  --game-tile-6:    #1b6f7d;
  --game-tile-7:    #f0c14b;
  --game-tile-8:    #c94c3c;
  --game-radius:    12px;
  --game-font:      'Unbounded', 'Nunito', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/dragon-boat/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): the river at the start line, not a dark screen */
  --game-arena-screen: #eaf5ef;
  --game-arena-coins:  #a87a12;
  --game-arena-win:    #1a8763;
  --game-arena-danger: #c94c3c;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%231a8763' stroke-opacity='.09' stroke-width='1.4' stroke-linecap='round'><path d='M14 24q8-5 16 0t16 0'/><path d='M70 70q8-5 16 0t16 0'/><path d='M24 100q6-4 12 0'/><path d='M92 18q5-3 10 0'/></g></svg>");
}
html.dark {
  --game-bg:        #071b1f;
  --game-surface:   #04161a;
  --game-surface-2: #143338;
  --game-ink:       #e8f3ec;
  --game-muted:     #88a39c;
  --game-accent:    #ffcf6b;
  --game-accent-ink:#0e2a28;
  --game-good:      #4fc79a;
  --game-bad:       #ff8a73;
  --game-tile-1:    #143338;
  --game-tile-2:    #1b4a4c;
  --game-tile-3:    #1d6b58;
  --game-tile-4:    #2fa07a;
  --game-tile-5:    #6fcfd9;
  --game-tile-6:    #b9d36a;
  --game-tile-7:    #ffcf6b;
  --game-tile-8:    #ff8a73;
  --game-arena-screen: #071b1f;
  --game-arena-coins:  #ffdc8f;
  --game-arena-win:    #4fc79a;
  --game-arena-danger: #ff8a73;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%237fd6ae' stroke-opacity='.07' stroke-width='1.4' stroke-linecap='round'><path d='M14 24q8-5 16 0t16 0'/><path d='M70 70q8-5 16 0t16 0'/><path d='M24 100q6-4 12 0'/></g><g stroke='%23ffcf6b' stroke-opacity='.12' stroke-width='1.6' stroke-linecap='round'><path d='M96 12v8M50 40v6'/></g></svg>");
}

/* ── Base ──
   Tailwind's compiled sheet loads after the theme, so selectors that must
   beat its single-class utilities carry an extra html qualifier. */
html body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
html .font-sans { font-family: var(--font-ui); }

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.display-italic { font-style: normal; }
/* Unbounded is very wide; small tabular figures read better in the UI face. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0; }
/* Small and italic display text (card blurbs, captions) is set in the UI
   face: Unbounded has no italic and is too wide to read at that size. */
html .font-display:is(.text-xs, .text-sm, .italic, .display-italic) { font-family: var(--font-ui); font-weight: 700; font-style: normal; letter-spacing: 0; }

::selection { background: #b9d36a; color: #0e2a28; }

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

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

/* Section eyebrow — a lane float on its rope in front of the label */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 14px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse at 36% 34%, rgba(255, 255, 255, .7) 0 18%, transparent 30%), var(--theme-500);
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), .16);
}

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.9rem; font-weight: 800;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .3rem .1rem 2px;
  border-bottom: 2px solid var(--theme-500);
  text-decoration: none;
  transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; }
[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-image: var(--ripples); }

.ed-folio { font-family: var(--font-display); font-weight: 700; color: var(--theme-600); }

[data-db-phase][hidden], [data-db-when][hidden] { display: none !important; }

/* Brushed festival characters (端 午 龍 舟) from the self-hosted Race Brush subset */
.db-brush { font-family: var(--font-brush); font-weight: 400; line-height: 1; }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--red-soft); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(238, 246, 238, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #b9d36a; }

/* A lane rope under the main header bar and wherever a section needs a border */
.db-band { height: 14px; background: var(--lane-rope), var(--paper); }
.db-band--night { background: var(--lane-rope-night), var(--night); }

/* The festival chip in the status strip */
.db-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; color: #b9d36a; }
.db-strip-chip svg { width: 22px; height: 16px; flex-shrink: 0; }
/* The desktop strip shares its line with the menu; the second half of the
   chip joins it only where there is room for both. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1679px) { .db-strip-chip__extra { display: none; } }

.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;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700;
  color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; 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); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 800;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--theme-500);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.97rem; font-weight: 800;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); }
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
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,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
  background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: #b9d36a; color: #0b2a22; box-shadow: 0 2px 0 #7f9a3c; }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--theme-500); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.76rem 1.4rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 800;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 999px;
  transition: background 0.15s ease, border-color .15s ease;
}
.ed-btn-secondary:hover { background: var(--paper-3); border-color: var(--ink-soft); }
html.dark .ed-btn-secondary { color: var(--ink); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }

/* ── Cards: soft corners, a fine edge, a lift on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: var(--night-bg); color: #eef6ee;
  border: 1px solid rgba(185, 211, 106, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--lane-rope-night); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(238, 246, 238, .2); }

/* ── 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: rgba(238, 246, 238, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #b9d36a; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
  color: var(--ink-2); text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.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: 0.5rem;
  border-radius: 999px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 800;
  color: var(--theme-600); border: 1px solid var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }

.mobile-glass-header {
  background: rgba(242, 247, 242, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(7, 27, 31, 0.94); }

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

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

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

.ed-mobile-link.active { color: var(--nav-accent); }

/* ── Dragon boats (dragonboat_boat_svg()): the paddles dig in together,
   stroke after stroke, and the boat surges a little on each one. A boat
   that should hold still carries .db-boat--still. ── */
.db-boat-svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .db-boat-svg .db-oar { animation: db-stroke 1.3s cubic-bezier(.5, 0, .4, 1) 8 forwards; animation-delay: var(--lag, 0s); }
  .db-boat--still .db-boat-svg .db-oar { animation: none; }
}
@keyframes db-stroke { 0%, 100% { transform: rotate(-16deg); } 55% { transform: rotate(14deg); } }

/* ── Finish buoys: round floats with a white band, bobbing on the water
   (.db-buoy, placed by --x, sized by --k, timed by --w) ── */
.db-buoy {
  position: absolute; bottom: 30%; left: var(--x);
  width: calc(16px * var(--k, 1)); height: calc(16px * var(--k, 1));
  border-radius: 50%;
  background:
    linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, .95) 40% 60%, transparent 60%),
    radial-gradient(circle at 34% 30%, #ffe3a0, var(--buoy, #ff9b4a) 55%, #c9622a);
  box-shadow: 0 calc(5px * var(--k, 1)) 0 calc(-2px * var(--k, 1)) rgba(0, 0, 0, .18);
}
.db-buoy::after {
  content: ''; position: absolute; left: -45%; right: -45%; top: calc(100% + 3px * var(--k, 1)); height: calc(5px * var(--k, 1));
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent);
}
.db-buoy--jade { --buoy: #2fb487; background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, .95) 40% 60%, transparent 60%), radial-gradient(circle at 34% 30%, #c8f2dc, #2fb487 55%, #13704f); }
@media (prefers-reduced-motion: no-preference) {
  .db-buoy { animation: db-bob 3.6s ease-in-out 4 forwards; animation-delay: var(--w, 0s); }
}
@keyframes db-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }

/* A harbour light reflected on the water: a wavering streak */
.db-glint {
  position: absolute; left: var(--x); bottom: var(--b, 12%); width: calc(4px * var(--k, 1)); height: calc(26px * var(--k, 1));
  border-radius: 4px; background: linear-gradient(180deg, var(--c, #ffcf6b), transparent);
  opacity: .7; filter: blur(.4px);
}
@media (prefers-reduced-motion: no-preference) {
  .db-glint { animation: db-waver 2.8s ease-in-out 4 forwards; animation-delay: var(--w, 0s); }
}
@keyframes db-waver { 0%, 100% { transform: scaleX(1) translateY(0); opacity: .7; } 50% { transform: scaleX(1.8) translateY(2px); opacity: .45; } }

/* ── Dark/light toggle: a dragon boat sprints across ──
   assets/themes/dragon-boat/assets/js/dragon-boat.js registers it: a boat
   races across the middle of the screen and the other mode opens out
   behind it in a widening wake, the mode flips once the wake has filled
   the page, and the water settles clear. */
.px-fx--db-wake { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--db-wake .db-fx-wake {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(var(--fx-tilt, 8deg), transparent 0 46px, var(--fx-foam, rgba(255, 255, 255, .14)) 46px 48px),
    var(--fx-bg, #071b1f);
  clip-path: polygon(0 50%, 0 50%, 0 50%);
}
.px-fx--db-wake .db-fx-boat {
  position: absolute; left: 0; top: 50%; width: var(--fx-w, 420px); margin-top: calc(var(--fx-w, 420px) * -0.17);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3));
}
.px-fx--db-wake.is-clearing .db-fx-wake { opacity: 0; transition: opacity .55s ease .05s; }
.px-fx--db-wake .db-fx-boat .db-oar { animation: db-stroke .42s cubic-bezier(.5, 0, .4, 1) infinite; }

/* ── Footer: the night harbour in both modes — a lane rope along its top
   edge, finish buoys bobbing and city lights reflected on the water ── */
.db-footer {
  --paper:     #08262b;
  --paper-2:   #0d333a;
  --paper-3:   #134249;
  --ink:       #eef6ee;
  --ink-2:     #cfe0d8;
  --ink-soft:  #9db8ae;
  --rule:      rgba(238, 246, 238, 0.15);
  --rule-soft: rgba(238, 246, 238, 0.08);
  --theme-500: #b9d36a; --theme-600: #b9d36a; --theme-700: #d4e79c;
  --theme-500-rgb: 185, 211, 106;
  position: relative;
}
html.dark .db-footer { --paper: #04161a; --paper-2: #0d272c; --paper-3: #143338; }
.db-footer-top { position: relative; isolation: isolate; height: 96px; margin-bottom: -1px; overflow: hidden; background: linear-gradient(180deg, var(--paper) 0 34%, #08262b 34%); }
html.dark .db-footer-top { background: linear-gradient(180deg, var(--paper) 0 34%, #04161a 34%); }
/* The far shore: hills and a row of lit windows along the harbour front */
.db-footer-top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='24' viewBox='0 0 640 24' preserveAspectRatio='none'><path d='M0 24V14C30 8 60 4 100 8C140 12 160 2 210 4C250 6 280 14 320 12C350 10 380 6 420 8C460 10 490 2 530 4C570 6 610 12 640 12V24Z' fill='%230d333a'/><g fill='%23ffcf6b' fill-opacity='.8'><rect x='60' y='17' width='2' height='3'/><rect x='66' y='16' width='2' height='4'/><rect x='240' y='15' width='2' height='3'/><rect x='246' y='17' width='2' height='3'/><rect x='252' y='16' width='2' height='4'/><rect x='420' y='15' width='2' height='4'/><rect x='428' y='17' width='2' height='3'/><rect x='560' y='16' width='2' height='3'/></g></svg>") repeat-x left bottom / 640px 24px;
}
.db-footer-top::after {
  content: ''; position: absolute; left: 0; right: 0; top: 34px; height: 14px;
  background: var(--lane-rope-night);
}
.db-footer-top .db-buoy { bottom: 18px; z-index: 2; }
.db-footer-top .db-glint { bottom: 4px; }
.db-footer a:hover { color: #b9d36a; }
html .db-footer .ed-footer-heading, html.dark #desktopFooter.db-footer h4.ed-footer-heading { font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none; color: #b9d36a !important; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

html .ed-floating-nav {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 700; color: var(--ink-2); }
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; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter on a bamboo-leaf wrapper, tied with five-colour silk */
html body .db-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(185, 211, 106, .5), transparent 70%),
    radial-gradient(240px 150px at 0% 100%, rgba(43, 147, 160, .22), transparent 70%),
    #f4f8ef;
  color: #0e2a28;
  border: 0; border-radius: 22px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55);
  overflow: hidden;
  padding-bottom: 2.2rem;
}
html body .db-footer .ed-newsletter::before { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 10px; background: var(--silk); pointer-events: none; }
html body .db-footer .ed-newsletter::after { display: none; }
html body .db-footer .ed-newsletter, html body .db-footer .ed-newsletter * { --ink: #0e2a28; --ink-2: #2c4a46; }
html body .db-footer .ed-newsletter h4, html.dark body #desktopFooter.db-footer .ed-newsletter h4 { color: #0e2a28 !important; font-family: var(--font-display); font-weight: 700; }
html.dark body .db-footer .ed-newsletter p:not(#newsletter-msg) { color: #2c4a46 !important; }
html body .db-footer .ed-newsletter-input, html.dark body .db-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #0e2a28 !important; border: 1px solid rgba(14, 42, 40, .18) !important; border-radius: 999px; }
html body .db-footer .ed-newsletter-input::placeholder { color: #5f7a74; }
html body .db-footer .ed-newsletter-input:focus { border-color: #1a8763 !important; box-shadow: 0 0 0 3px rgba(26, 135, 99, .15); }
html body .db-footer .ed-newsletter-btn {
  background: #0f6b50; color: #ffffff; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 800;
}
html body .db-footer .ed-newsletter-age { color: #2c4a46; }

/* Logo card: the light-mode logo on a pale lacquer board edged in jade,
   like the name board carried on a boat's bow, wherever it sits on the
   night (footer, app splash). */
.db-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.6rem;
  background: radial-gradient(160px 80px at 100% 0%, rgba(185, 211, 106, .4), transparent 70%), #f6f9f2;
  border-radius: 14px;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(26, 135, 99, .3);
}
.db-plaque::before { content: ''; position: absolute; inset: 5px; border: 1.5px solid rgba(26, 135, 99, .35); border-radius: 10px; pointer-events: none; }

/* 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; }
/* On phones a heading never splits mid-word; only a word wider than the
   whole column may still break. */
@media (max-width: 639px) {
  html body :is(.text-fit, :is(h1, h2, h3).truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  /* the auction page's "similar auctions" link ("Andere Auktionen durchstöbern") drops under its heading */
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* ── 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 theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(7, 27, 31, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(13, 39, 44, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--rule) !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, #143338, #071b1f, #0d333a, #04161a) !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 a navy #0d1117; here fields
   take the theme's own night. 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: #04161a !important;
  border-color: rgba(232, 243, 236, .2) !important;
  color: #e8f3ec !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 night. */
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: #04161a;
  --paper: #e8f3ec;
  border-color: rgba(127, 214, 174, .3);
}

html header.safe-top-header[style] { background: rgba(242, 247, 242, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(7, 27, 31, .95) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(7, 27, 31, .95); }

/* ── Login / register / forgot-password brand panel: the night harbour,
   a dragon boat's drum glowing in its corner ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(255, 207, 107, 0.26);
  --brand-glow-2: rgba(31, 157, 122, 0.32);
}
.brand-panel { background: var(--skyline-night) no-repeat center bottom / auto 130px, var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the drum seen from above, its skin and studs. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 9% !important; right: 9% !important; left: auto !important; bottom: auto !important;
  width: 112px !important; height: 112px !important;
  border-radius: 50% !important; transform: none !important; opacity: .95 !important; filter: none !important;
  background:
    radial-gradient(circle, #f4e7c4 0 54%, #c94c3c 55% 66%, transparent 67%),
    repeating-conic-gradient(#f2c14e 0 3deg, transparent 3deg 20deg),
    radial-gradient(circle, #c94c3c 0 70%, #8e2f25 71%) !important;
  box-shadow: 0 0 60px 14px rgba(255, 207, 107, .22) !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 9% !important; }
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(238, 246, 238, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a lacquered boat's flank — river-teal lacquer
   painted with scales, the five silk threads tied along its foot and the
   drum in its corner ── */
html body .wallet-hero {
  position: relative;
  background:
    radial-gradient(180px 160px at calc(100% - 60px) 80px, rgba(255, 207, 107, .2), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'><path d='M0 16a11 11 0 0 1 22 0' fill='none' stroke='%23b9d36a' stroke-opacity='.10' stroke-width='1.4'/><path d='M-11 8a11 11 0 0 1 22 0M11 8a11 11 0 0 1 22 0' fill='none' stroke='%23b9d36a' stroke-opacity='.10' stroke-width='1.4'/></svg>"),
    linear-gradient(160deg, #0f4a4f 0%, #0a3236 55%, #072427 100%);
  border: 1px solid rgba(185, 211, 106, .3);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  color: #eef6ee;
  overflow: hidden;
  padding-bottom: 2.4rem !important;
}
html body .wallet-hero::before {
  inset: auto 0 12px 0; top: auto; left: 0; right: 0; bottom: 12px; height: 10px; width: auto;
  border: 0; border-radius: 0;
  background: var(--silk); pointer-events: none; opacity: .95;
}
html body .wallet-hero::after {
  content: ''; position: absolute; right: 26px; top: 60px; width: 56px; height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f4e7c4 0 52%, #c94c3c 53% 64%, transparent 65%),
    repeating-conic-gradient(#f2c14e 0 4deg, transparent 4deg 30deg),
    radial-gradient(circle, #c94c3c 0 70%, #8e2f25 71%);
  box-shadow: 0 0 30px 6px rgba(255, 207, 107, .22);
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 26px; }
@media (max-width: 639px) { html body .wallet-hero::after { width: 42px; height: 42px; top: 56px; right: 20px; } html[dir="rtl"] body .wallet-hero::after { right: auto; left: 20px; } }
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 700;
  font-size: clamp(2.4rem, 7.4vw, 4.4rem) !important;
  letter-spacing: -0.03em;
  color: #ffffff; overflow-wrap: normal; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: #b9d36a; color: #0b2a22; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 999px; }
html body .wallet-hero-btn-primary:hover { background: #cde28a; color: #0b2a22; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 800; color: #eef6ee; border-color: rgba(238, 246, 238, .45); border-radius: 999px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a lane rope
   across its lid ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 14px; border-radius: 0;
  background: var(--lane-rope), var(--paper-2); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: a lane rope along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--lane-rope);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 700; color: var(--theme-600); overflow-wrap: normal; font-size: clamp(1.6rem, 6vw, 2.25rem); }
.pd-title { font-weight: 700 !important; }

/* The mystery box plugin's own 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 theme's jade. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and take the colour of the main buttons. */
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: 999px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(26, 135, 99, .3); }
html.dark .border-violet-200 { border-color: rgba(127, 214, 174, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(26, 135, 99, .35); }
html .focus\:border-purple-400:focus { border-color: var(--theme-500); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's main buttons. */
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: 1px solid var(--rule); box-shadow: var(--shadow); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Cart and checkout: the order total under a lane rope ──
   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: 1px solid var(--rule) !important; border-radius: 16px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.6rem !important;
}
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: 14px;
  background: var(--lane-rope);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  color: var(--theme-600);
  overflow-wrap: normal;
}

/* 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: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .db-strip-chip { font-size: 10px; gap: .35rem; } }
/* 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; }
}

/* ── My Winnings: each prize wrapped like a zongzi — layered bamboo
   leaves round a rice-white window, tied across with string ── */
.db-win {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.db-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.db-win__wrap {
  position: relative;
  padding: 3rem 14px 18px;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 13px),
    linear-gradient(118deg, #4f8a35 0 34%, #5f9a3e 34% 66%, #467c2f 66%);
}
.db-win:nth-child(3n+2) .db-win__wrap { background: repeating-linear-gradient(62deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 13px), linear-gradient(62deg, #2f7a5a 0 30%, #3a8b67 30% 64%, #2a6d50 64%); }
.db-win:nth-child(3n+3) .db-win__wrap { background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 13px), linear-gradient(118deg, #7d9b3a 0 36%, #8fb04a 36% 68%, #6f8c32 68%); }
/* The string, tied round the leaves behind the window */
.db-win__wrap::before, .db-win__wrap::after {
  content: ''; position: absolute; left: -4%; right: -4%; height: 3px; pointer-events: none; z-index: 2;
  background: #ead8a6; box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.db-win__wrap::before { top: 58%; transform: rotate(-7deg); }
.db-win__wrap::after { top: 70%; transform: rotate(5deg); }
.db-win__window {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: center;
  width: min(100%, 10rem); aspect-ratio: 1; margin: 0 auto;
  background: radial-gradient(circle at 40% 34%, #ffffff, #f7f3e6 70%);
  border-radius: 22px;
  transform: rotate(45deg) scale(.86);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .25);
}
.db-win__window img { width: 78%; height: 78%; object-fit: contain; transform: rotate(-45deg) scale(1.08); transition: transform .3s ease; }
.db-win:hover .db-win__window img { transform: rotate(-45deg) scale(1.15); }
.db-win__wrap > .absolute { z-index: 3; top: .95rem; }
.db-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #0e2a28; background: #f6f9f2; border-radius: 999px;
}
.db-win__tag--open { color: #0b2a22; background: #d9ec9b; }
.db-win__tag--done { color: #ffffff; background: #1b6f7d; }
.db-win__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.db-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.db-win__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 4vw, 1.15rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.db-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.db-win__cart, .db-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; font-weight: 800;
}
.db-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.db-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.db-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.db-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .9rem; font-weight: 800;
  color: var(--theme-600); background: var(--rose-soft); border-radius: 999px;
}

/* The game arena's play button letters itself white on the accent; after
   dark the accent is pale jade, so it takes the buttons' dark ink. */
html.dark .arena-play { color: var(--btn-ink); text-shadow: none; }
html.dark .arena-play .pic { background: rgba(5, 42, 32, .14); }
html.dark .arena-play .cost { border-left-color: rgba(5, 42, 32, .3); }
[dir="rtl"] html.dark .arena-play .cost, html.dark[dir="rtl"] .arena-play .cost { border-left: 0; border-right: 1px solid rgba(5, 42, 32, .3); }

/* Change language: on a wide screen the floating page nav sits at the foot of
   the window, so the list's sticky save bar stops above it rather than under it. */
@media (min-width: 1024px) {
  html body #langForm + .sticky.bottom-0 { bottom: 5.75rem; }
}

/* 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: #1a8561; --px-warn: #855c00; --px-crit: #c94b3b; --px-info: #1b707e; }
html.dark:root { --px-good: #6cd0ab; --px-warn: #fbbf23; --px-crit: #ffa594; --px-info: #8dc0e2; }

/* Changing language, the scene (dragon-boat.js): the boat on the river, the
   drum beating and the paddles pulling as it glides in and its bow banner
   and pennant turn from the old language to the new; after the reload it
   rocks to rest. The river stays dark in both modes, so the text on it is
   fixed. The river is the same on both pages, so the reload never shows. */
.db-lang-stage { background: color-mix(in srgb, #04161a 58%, transparent); }
.db-lang-river {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 22px 16px 34px; overflow: hidden;
  border-radius: var(--radius, 14px); color: #eef6ee;
  background: linear-gradient(180deg, #08262b 0, #0d333a 46%, #1b6f7d 46.5%, #134249 100%);
  box-shadow: inset 0 0 0 2px rgba(231, 211, 163, .35), 0 34px 70px -28px rgba(0, 0, 0, .65);
  font-family: var(--font-ui);
}
.db-lang-boat { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.db-lang-banner {
  position: relative; z-index: 4; display: grid; align-items: center; justify-items: center; width: 74%; box-sizing: border-box; min-height: 104px;
  padding: 14px 16px; border-radius: 6px; text-align: center; color: #fff6e0;
  background: linear-gradient(180deg, #d4483b, #a8352b); box-shadow: inset 0 0 0 3px #f2c14e, inset 0 0 0 6px #a8352b, inset 0 0 0 7px rgba(242, 193, 78, .55), 0 10px 18px -10px rgba(0, 0, 0, .6);
}
.db-lang-banner > span { grid-area: 1 / 1; max-width: 100%; min-width: 0; }
.db-lang-was { opacity: 0; font: 600 clamp(18px, 5.5vw, 26px)/1.15 var(--font-display); overflow-wrap: anywhere; }
.db-lang-now { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.db-lang-now img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #f2c14e; }
.db-lang-name { max-width: 100%; color: #fff6e0; font: 700 clamp(26px, 8vw, 42px)/1.1 var(--font-display); overflow-wrap: anywhere; text-shadow: 0 2px 0 rgba(90, 20, 10, .45); }
.db-lang-code { font: 700 11px/1 var(--font-ui); letter-spacing: .28em; color: #ffcf6b; }
.db-lang-hull {
  position: relative; z-index: 3; width: 92%; height: 34px; margin-top: 18px; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #f2c14e 0 6px, #1f8a5c 6px 20px, #116e51 20px);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6);
}
.db-lang-pole { position: absolute; left: 1%; bottom: 30px; width: 3px; height: 62px; background: #e7d3a3; }
.db-lang-pennant {
  position: absolute; left: 3px; top: 0; display: grid; place-items: center; width: 34px; height: 24px;
  background: #fff6e0; clip-path: polygon(0 0, 100% 12%, 86% 50%, 100% 88%, 0 100%); transform-origin: 0 50%;
}
.db-lang-pennant img { width: 100%; height: 100%; object-fit: cover; }
.db-lang-pennant b { font: 800 10px/1 var(--font-ui); color: #08262b; padding-right: 5px; }
.db-lang-pennant-old { opacity: 0; transform: scaleX(0); }
.db-lang-drum {
  position: absolute; left: 50%; top: -14px; width: 26px; height: 16px; margin-left: -13px; border-radius: 50% / 40%;
  background: #c94c3c; box-shadow: inset 0 3px 0 #f7e4bf, inset 0 0 0 2px #7a2a20;
}
.db-lang-ripple { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.db-lang-ripple i {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 2px rgba(255, 207, 107, .8);
}
.db-lang-head {
  position: absolute; right: -24px; top: -36px; width: 46px; height: 46px;
  background: #1f8a5c; clip-path: polygon(0 100%, 30% 40%, 55% 0, 100% 20%, 70% 40%, 100% 55%, 45% 70%, 40% 100%);
}
.db-lang-head::after { content: ""; position: absolute; left: 50%; top: 18%; width: 6px; height: 6px; border-radius: 50%; background: #ffcf6b; }
.db-lang-tail {
  position: absolute; left: -16px; top: -26px; width: 30px; height: 34px;
  background: #1f8a5c; clip-path: polygon(100% 100%, 40% 70%, 0 0, 70% 40%, 100% 60%);
}
.db-lang-paddles { position: absolute; left: 18%; right: 14%; bottom: -16px; display: flex; justify-content: space-between; }
.db-lang-paddles i { width: 4px; height: 26px; border-radius: 0 0 3px 3px; background: #e7d3a3; transform-origin: 50% 0; transform: rotate(-22deg); }
.db-lang-waves {
  position: absolute; left: 0; bottom: 6px; width: 200%; height: 22px; z-index: 1; transform: translateX(-25%);
  background: radial-gradient(14px 8px at 14px 0, transparent 92%, rgba(238, 246, 238, .3) 95%, transparent 100%) 0 0 / 28px 12px repeat-x,
    radial-gradient(14px 8px at 14px 0, transparent 92%, rgba(238, 246, 238, .18) 95%, transparent 100%) 14px 10px / 28px 12px repeat-x;
}

/* Out: the drum beats, the paddles pull, the boat glides in under its new banner. */
.px-lang-stage-out .db-lang-river { animation: db-lang-river-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .db-lang-boat { animation: db-lang-glide .95s cubic-bezier(.35, 0, .25, 1) both; }
.px-lang-stage-out .db-lang-waves { animation: db-lang-flow .95s linear both; }
.px-lang-stage-out .db-lang-ripple i { animation: db-lang-beat .38s ease-out .05s both; }
.px-lang-stage-out .db-lang-ripple i:nth-child(2) { animation-delay: .32s; }
.px-lang-stage-out .db-lang-ripple i:nth-child(3) { animation-delay: .57s; }
.px-lang-stage-out .db-lang-paddles i { animation: db-lang-pull .3s ease-in-out .05s 3 both; }
.px-lang-stage-out .db-lang-was { animation: db-lang-was .68s ease-in both; }
.px-lang-stage-out .db-lang-now { animation: db-lang-now .95s ease-out both; }
.px-lang-stage-out .db-lang-pennant-old { animation: db-lang-strike .7s ease-in both; }
.px-lang-stage-out .db-lang-pennant-new { animation: db-lang-hoist .95s ease-out both; }
/* In: it starts where out ended; the boat rocks to rest, one last beat. */
.px-lang-stage-in .db-lang-boat { animation: db-lang-rock .7s ease-in-out .05s both; }
.px-lang-stage-in .db-lang-ripple i:first-child { animation: db-lang-beat .45s ease-out .1s both; }
.px-lang-stage-in .db-lang-pennant-new { animation: db-lang-wave .6s ease-in-out .1s both; }
.px-lang-stage-in .db-lang-river { animation: db-lang-river-out .28s ease-in 1s both; }
@keyframes db-lang-river-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes db-lang-river-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes db-lang-glide {
  0%  { transform: translateX(-38%) translateY(0); }
  30% { transform: translateX(-30%) translateY(-3px); }
  60% { transform: translateX(-10%) translateY(2px); }
}
@keyframes db-lang-flow { from { transform: translateX(0); } }
@keyframes db-lang-beat { from { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(2.3); } }
@keyframes db-lang-pull { 50% { transform: rotate(32deg); } }
@keyframes db-lang-was { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes db-lang-now { 0%, 64% { opacity: 0; transform: scale(.92); } }
@keyframes db-lang-strike { 0%, 45% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scaleX(0); } }
@keyframes db-lang-hoist { 0%, 62% { opacity: 0; transform: scaleX(0); } }
@keyframes db-lang-rock { 30% { transform: translateY(-4px) rotate(-1.2deg); } 65% { transform: translateY(2px) rotate(.8deg); } }
@keyframes db-lang-wave { 50% { transform: scaleX(.8) skewY(-6deg); } }
@media (max-width: 460px) {
  .db-lang-river { padding: 18px 12px 30px; }
  .db-lang-banner { width: 100%; }
  .db-lang-pole { display: none; }
  .db-lang-head { right: -14px; width: 36px; height: 36px; top: -28px; }
  .db-lang-paddles i:nth-child(n+5) { display: none; }
}

/* 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: #187e5c;
  --ink-soft: #58716c;
}
/* rev 868fe5109c9f2a2b */