/*
  Design v2 frame. Owned by the frame team.

  Every size here was measured off the reference with getComputedStyle (see
  the probe notes in docs/design-v2/ref/frame/); colours are tokens.css
  variables. Frame classes are prefixed (hd- header, ch- chat, ft- footer,
  bn- bottom nav, si-/wl- modals, v2- shared) so no page rule can collide.
*/

@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--g900);
  color: var(--t0);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--purple-300); outline-offset: 2px; }

/*
  Scrollbars in the page's own greys (13.10.2026): Chrome's white default bar
  stood out on every dark page. `scrollbar-color` inherits, so each inner list
  that scrolls (chat, games menu, modals) gets the same thin bar unless it
  hides its own; the -webkit- rules are for Chromium builds that still read
  them when scrollbar-color is set, and for Safari.
*/
html { scrollbar-color: var(--g100) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--g100); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.v2-ico { display: block; width: 20px; height: 20px; flex: none; }
/* a provider game's own cover as its icon (parts/icons.js PROVIDER_ART) */
.v2-ico-cover { object-fit: cover; border-radius: 5px; }
.v2-amount { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.v2-coin { display: block; width: 1.15em; height: 1.15em; flex: none; }
.v2-av-letter {
  display: inline-grid;
  place-items: center;
  background: var(--g300);
  color: var(--t2);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  overflow: hidden;
}
.v2-page-error { padding: 48px 24px; color: var(--t3); text-align: center; font-size: 14px; }

/*
  Level colours, one per tier index 0-9 (shared/levels.ts, ten tiers since
  13.09.2026). Defined once here so the chat, the rewards ladder, the
  leaderboard and any other page draw the same level in the same colour.
  0-5 are the colours those pages used before; 6 (High Roller) and up are
  gradients, the tiers that open the high-roller Discord channels. 7 keeps the
  gradient Unreal had when it was tier 6, so its badge does not change look.
  A level past 9 falls back to each page's neutral pill.
*/
:root {
  --lv-0: var(--g50);
  --lv-1: var(--teal);
  --lv-2: var(--green-700);
  --lv-3: var(--purple-600);
  --lv-4: var(--orange-500);
  --lv-5: var(--red);
  --lv-6: linear-gradient(135deg, var(--orange-300), var(--orange-500));
  --lv-7: linear-gradient(135deg, var(--orange-300), var(--purple));
  --lv-8: linear-gradient(135deg, var(--red-400), var(--purple-600));
  --lv-9: linear-gradient(135deg, var(--teal), var(--purple-300));
}

/* ---------- layout ---------- */

#v2-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 65px;
  transition: padding-left 0.2s ease;
}
#page { flex: 1 0 auto; min-width: 0; }
body.v2-mode-dock.v2-chat-open #v2-main { padding-left: var(--chat-w); }
body.v2-mode-phone #v2-main { padding-bottom: 64px; }
/* A page folding the chat for its own layout does it without the slide
   (kit.foldChat in frame.js): it happens while the page is being drawn. */
body.v2-no-anim #v2-main, body.v2-no-anim #v2-chat { transition: none !important; }
body.v2-modal-open { overflow: hidden; }

/* ---------- header (measured: 64 + 1px darkgrey700 line, items 40 high) ---------- */

#v2-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1006;
  height: 65px;
  background: var(--g900);
  border-bottom: 1px solid var(--g700);
}
.hd-in { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 17px; }
.hd-grow { flex: 1 1 auto; }

.hd-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  border-radius: 36px;
  flex: none;
}
/* 32px = exactly twice the 16px diamond sprite, so every pixel stays square */
.hd-logo img { width: 32px; height: 32px; image-rendering: pixelated; }
.hd-word { color: var(--t0); font-size: 17px; line-height: 1; letter-spacing: 0.3px; white-space: nowrap; }
.hd-word span { font-weight: 400; }
.hd-word b { font-weight: 700; }

.hd-nav { display: flex; align-items: center; gap: 8px; }
.hd-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 36px;
  color: var(--t6);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}
.hd-link:hover { color: var(--t2); background: color-mix(in srgb, var(--t0) 4%, transparent); }
.hd-link.on { color: var(--t0); }
.hd-link[data-nav="games"].on .hd-ico { color: var(--purple-300); }
.hd-link[data-nav="rewards"].on .hd-ico { color: var(--green); }
/* How many free cases a day the Rewards page hands out (09.10.2026: the "3X FREE CASES" pill became this badge). */
.hd-badge {
  min-width: 22px; height: 20px; padding: 0 6px; margin-left: -2px; border-radius: 10px; box-sizing: border-box;
  display: inline-grid; place-items: center;
  background: var(--green-700); color: var(--t0); font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.hd-link[aria-expanded="true"] { color: var(--t1); }
.hd-link[aria-expanded="true"] .hd-chev { transform: rotate(180deg); }
.hd-chev { width: 20px; height: 20px; color: var(--t7); transition: transform 0.15s; }

.hd-race {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px 0 58px;
  border-radius: 36px;
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  color: var(--t0);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25px;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.hd-race:hover, .hd-race.on { background: color-mix(in srgb, var(--orange) 16%, transparent); }
.hd-race-art { position: absolute; left: 0; top: -4px; width: 60px; height: 48px; object-fit: contain; pointer-events: none; }

.hd-right { display: flex; align-items: center; gap: 8px; flex: none; }
.hd-auth { display: flex; align-items: center; gap: 8px; }

.hd-btn-text {
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.21px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}
.hd-btn-text:hover { color: var(--t1); background: var(--g500); }
.hd-btn-primary {
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--purple-700);
  color: var(--t0);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.21px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.hd-btn-primary:hover { background: var(--purple-600); }

.hd-bal {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 8px;
  background: var(--g600);
  border: 1px solid var(--g400);
  overflow: hidden;
}
.hd-bal-amt { height: 100%; padding: 0 14px; font-size: 14px; color: var(--t0); background: none; border: 0; cursor: pointer; }
.hd-bal-amt .v2-coin { width: 16px; height: 16px; }
/* Demo mode (12.10.2026): the figure is play money - a clear colour, no extra
   width so the header stays within 1440px. */
.hd-bal-amt.is-demo { color: var(--orange, #ffa62b); font-weight: 700; }
.hd-bal-amt.is-demo .v2-coin { filter: grayscale(1) brightness(1.4); }
/* A small note row in the wallet menu (demo state header). */
.v2-menu-note { padding: 8px 14px 4px; font-size: 12px; color: var(--t6, #8a93a6); }
.v2-menu-note.is-demo { color: var(--orange, #ffa62b); font-weight: 600; }
/* "Active wallet" currency picker on the balance (12.10.2026): one row per
   currency - real Donut Money and, when held, the separate Demo pot. */
.v2-menu--cur { min-width: 230px; }
.v2-menu-label {
  padding: 6px 12px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t6, #8a93a6);
}
.v2-cur-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--t0);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.v2-cur-row + .v2-cur-row { margin-top: 2px; }
.v2-cur-row:hover, .v2-cur-row.is-active { background: var(--g400); }
.v2-cur-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.v2-cur-name { font-size: 12px; font-weight: 600; color: var(--t6, #8a93a6); }
.v2-cur-bal { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: var(--t0); }
.v2-cur-bal .v2-coin { width: 15px; height: 15px; }
.v2-cur-chk { display: inline-flex; flex: 0 0 auto; color: var(--purple-300, #c4b5fd); }
.v2-cur-chk .v2-ico { width: 18px; height: 18px; }
/* The demo pot reads in play-money orange, its coin greyed, matching the header. */
.v2-cur--demo .v2-cur-bal { color: var(--orange, #ffa62b); }
.v2-cur--demo .v2-cur-bal .v2-coin { filter: grayscale(1) brightness(1.4); }
/* One Wallet button with a menu (deposit, withdraw, code, history), 09.10.2026. */
.hd-wallet {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 14px;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  background: var(--purple-700);
  color: var(--t0);
  transition: background-color 0.15s;
}
.hd-wallet:hover { background: var(--purple-600); }
.hd-wallet .v2-ico { width: 18px; height: 18px; }
.hd-wallet .hd-chev { width: 16px; height: 16px; color: inherit; }
.hd-wallet[aria-expanded="true"] .hd-chev { transform: rotate(180deg); }
.hd-user {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  padding: 0 2px 0 4px;
  border-radius: 36px;
  color: var(--t6);
}
.hd-user:hover { color: var(--t2); }
.hd-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--g500); image-rendering: pixelated; }
span.hd-av { font-size: 16px; }

/* ---------- floating menus (measured games menu: 162 wide, items 52, icon box 36) ---------- */

.v2-menu {
  position: fixed;
  z-index: 1010;
  min-width: 162px;
  padding: 8px;
  border-radius: 6px;
  background: var(--g600);
  border: 1px solid var(--g400);
  box-shadow: 0 5px 5px -3px color-mix(in srgb, var(--g900) 50%, transparent), 0 8px 10px 1px color-mix(in srgb, var(--g900) 40%, transparent);
  animation: v2-pop 0.12s ease-out;
}
.v2-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 8px;
  border-radius: 6px;
  color: var(--t3);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  transition: color 0.12s, background-color 0.12s;
}
.v2-menu-item + .v2-menu-item { margin-top: 4px; }
.v2-menu-item:hover, .v2-menu-item.on { color: var(--t0); background: var(--g400); }
/* A game an operator switched off: dimmed, no hover, and no hand cursor, so it
   does not look like something that would happen if you clicked it. */
.v2-menu-item.off { opacity: 0.4; cursor: default; }
.v2-menu-item.off:hover { color: var(--t3); background: transparent; }
.v2-menu-item.off:hover .v2-menu-ico { color: var(--t3); }
.v2-menu-off {
  margin-left: auto;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--t3);
  flex: none;
}
/* In the phone sheet the label, not the "off" word, is the one that may be cut:
   the tile rule below keys on `span:last-child`, which an off row no longer has. */
.v2-menu-item--tile.off > span:last-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v2-menu-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 8px;
  background: var(--g200);
  color: var(--t3);
}
.v2-menu-item:hover .v2-menu-ico, .v2-menu-item.on .v2-menu-ico { color: var(--purple-300); }
.v2-menu-ico .v2-ico { width: 22px; height: 22px; }
.v2-menu--user { min-width: 220px; }
.v2-menu-item--sm { height: 44px; padding: 6px 8px; font-size: 13px; }
.v2-menu-item--sm .v2-menu-ico { width: 32px; height: 32px; }
.v2-menu-item--sm .v2-menu-ico .v2-ico { width: 18px; height: 18px; }
.v2-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--g400);
}
.v2-menu-av { width: 36px; height: 36px; border-radius: 50%; flex: none; image-rendering: pixelated; }
.v2-menu-head b { display: block; font-size: 14px; font-weight: 600; color: var(--t0); }
/* the text column only: a bare "span" rule also caught the avatar's letter spans */
.v2-menu-head > div > span { display: block; margin-top: 2px; font-size: 12px; color: var(--t4); }
.v2-menu-head .v2-av-letter { font-size: 14px; }
/* a menu item with a second line, e.g. "Unlink Discord" over the linked Discord name */
.v2-menu-two { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.v2-menu-two small {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t4);
}

/*
  The games menu: the reference lists its five games in one column. We have
  seven games with their own page and ten more from the first design, which in
  one column ran past the bottom of the screen, so the two groups stand side
  by side with a hairline between them.
*/
/* Zwei Abschnitte untereinander (Einzelspieler, Mehrspieler), Eintraege je zweispaltig. */
.v2-menu--games { display: flex; flex-direction: column; gap: 10px; padding: 8px; }
.v2-menu-sec-h {
  padding: 2px 6px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}
.v2-menu-sec + .v2-menu-sec { padding-top: 8px; border-top: 1px solid var(--g400); }
.v2-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(162px, 1fr)); gap: 4px; }
.v2-menu-grid .v2-menu-item + .v2-menu-item { margin-top: 0; }
/* Im Handy-Fenster sind die Kacheln schmaler als 162px; dort zaehlt nur die Haelfte. */
.v2-sheet-card .v2-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v2-sheet-card .v2-menu-sec + .v2-menu-sec { margin-top: 12px; }

/* ---------- chat sidebar (measured: 300 wide, darkgrey800, cards at x=12) ---------- */

#v2-chat {
  position: fixed;
  top: 65px;
  bottom: 0;
  left: 0;
  z-index: 1004;
  display: flex;
  flex-direction: column;
  width: var(--chat-w);
  background: var(--g800);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
body.v2-chat-open #v2-chat { transform: none; visibility: visible; transition: transform 0.2s ease, visibility 0s; }
body.v2-mode-overlay #v2-chat { box-shadow: 8px 0 24px color-mix(in srgb, var(--g900) 60%, transparent); }

.ch-top { padding-top: 16px; flex: none; }
.ch-online {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 24px);
  height: 46px;
  margin: 0 12px 16px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--g600);
  border: 1px solid var(--g600);
  text-align: left;
  transition: background-color 0.15s;
}
.ch-online:hover { background: var(--g500); }
.ch-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
}
.ch-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: ch-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ch-online-txt { flex: 1; font-size: 14px; font-weight: 600; letter-spacing: 0.25px; text-transform: uppercase; }
.ch-collapse, .ch-x { color: var(--t3); }
.ch-x { display: none; }

.ch-rain {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 84px;
  margin: 0 12px;
  padding: 12px 12px 0;
  border-radius: 8px;
  border: 1px solid var(--g600);
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--orange-500) 22%, var(--g800)) 0%, color-mix(in srgb, var(--orange-500) 5%, var(--g800)) 100%);
}
.ch-rain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--g900) 50%, transparent) 3px, transparent 3px),
    linear-gradient(180deg, color-mix(in srgb, var(--g900) 50%, transparent) 3px, transparent 3px);
  background-size: 25px 25px;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 95%);
  mask-image: linear-gradient(180deg, black, transparent 95%);
  pointer-events: none;
}
.ch-rain > * { position: relative; }
.ch-rain-kicker {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 24px;
  text-transform: uppercase;
}
.ch-rain-kicker .v2-coin { width: 16px; height: 16px; }
.ch-rain-title {
  margin-top: 2px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 31px;
  line-height: 32px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, var(--orange-300) 0%, var(--orange) 50%, var(--orange-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--orange-500) 35%, var(--g900)));
}
.ch-rain-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  height: 48px;
  margin-top: 5px;
  padding: 0 4px 0 8px;
  border-radius: 8px;
  background: var(--g900);
  border: 2px solid color-mix(in srgb, var(--t0) 12%, transparent);
}
.ch-rain-amt { flex: 1; font-size: 14px; }
.ch-rain-amt .v2-coin { width: 16px; height: 16px; }
.ch-rain-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--orange);
  color: var(--g900);
  transition: filter 0.15s;
}
.ch-rain-btn:hover { filter: brightness(1.1); }
.ch-rain-btn.joined { background: var(--green); color: var(--t0); }
.ch-rain-btn .v2-ico { width: 18px; height: 18px; }

/* Under the box (13.09.2026): the countdown to the drop, the tip button, and a
   small panel that holds either the join captcha or the tip form. */
.ch-rain-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 12px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
}
.ch-rain-clock b { color: var(--t0); font-variant-numeric: tabular-nums; }
.ch-rain-clock.is-open { color: var(--t1); }
.ch-rain-clock.is-open b { color: var(--green); }
.ch-rain-tip {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--g600);
  color: var(--t1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  transition: background-color 0.15s;
}
.ch-rain-tip:hover { background: var(--g500); color: var(--t0); }
.ch-rain-share {
  margin: 4px 12px 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--t2);
}
.ch-rain-share b { color: var(--t0); font-variant-numeric: tabular-nums; }
.ch-rain-share svg { vertical-align: -2px; }
.ch-pop {
  margin: 8px 12px 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--g800);
  border: 1px solid var(--g600);
  animation: v2-pop 0.12s ease-out;
}
.ch-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; }
.ch-pop-x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--t3); }
.ch-pop-x:hover { color: var(--t0); background: var(--g600); }
.ch-pop-x .v2-ico { width: 16px; height: 16px; }
.ch-pop-hint { margin: 4px 0 10px; font-size: 12px; line-height: 1.4; color: var(--t2); }
.ch-pop-captcha { display: flex; justify-content: center; min-height: 140px; font-size: 12px; color: var(--t2); }
.ch-pop-form { display: flex; gap: 6px; }
.ch-pop-form input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--g900);
  border: 1px solid var(--g500);
  color: var(--t0);
  font: inherit;
  font-size: 14px;
}
.ch-pop-form input:focus { outline: none; border-color: var(--purple-300); }
.ch-pop-go {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--orange);
  color: var(--g900);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.ch-pop-go:hover { filter: brightness(1.1); }
.ch-pop-go:disabled { opacity: 0.5; cursor: default; filter: none; }
.ch-pop-quick { display: flex; gap: 6px; margin-top: 6px; }
.ch-pop-quick button { flex: 1; height: 28px; border-radius: 6px; background: var(--g600); color: var(--t1); font-size: 12px; font-weight: 700; }
.ch-pop-quick button:hover { background: var(--g500); color: var(--t0); }

.ch-list {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--g100) transparent;
}
.ch-empty { margin: 16px; color: var(--t4); font-size: 13px; text-align: center; }
.ch-msg { padding: 0 16px 14px; }
.ch-reply { display: flex; align-items: center; gap: 4px; height: 28px; min-width: 0; }
.ch-corner {
  align-self: stretch;
  width: 22px;
  margin: 12px 4px 0 6px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--g50) 60%, var(--t7));
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}
.ch-av-s { width: 12px; height: 12px; flex: none; border-radius: 50%; object-fit: cover; image-rendering: pixelated; }
span.ch-av-s { font-size: 7px; }
.ch-reply-txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--t3); }
.ch-reply-txt b { font-weight: 600; color: var(--t2); }
.ch-row { display: flex; align-items: flex-start; }
.ch-av {
  width: 24px;
  height: 24px;
  margin: 1px 8px 0 0;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--g300);
  image-rendering: pixelated;
}
.ch-av--sys { background: var(--g500); padding: 4px; }
.ch-body { flex: 1; min-width: 0; }
.ch-name {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  min-width: 0;
  color: var(--t1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25px;
}
.ch-name > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-text { margin-top: 4px; color: var(--t2); font-size: 14px; line-height: 20px; letter-spacing: 0.25px; overflow-wrap: anywhere; }
.ch-msg--sys .ch-name > span:last-child { color: var(--orange); }
.ch-msg--sys .ch-text { color: var(--t3); }

/*
  Rank picture (parts/rank.js, kit.rankIcon). The ring is the stand-in while
  art/rank-N.svg is missing: hidden as long as the <img> is its sibling, shown
  once the <img> has removed itself on error. A donut in the old pill's colour.
*/
.v2-rank { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.v2-rank > img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.v2-rank-ring {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--rk, var(--lv-0));
  -webkit-mask: radial-gradient(circle closest-side, transparent 40%, #000 44%);
  mask: radial-gradient(circle closest-side, transparent 40%, #000 44%);
}
.v2-rank > img ~ .v2-rank-ring { display: none; }
.v2-rank-ring[data-rank="1"] { --rk: var(--lv-1); }
.v2-rank-ring[data-rank="2"] { --rk: var(--lv-2); }
.v2-rank-ring[data-rank="3"] { --rk: var(--lv-3); }
.v2-rank-ring[data-rank="4"] { --rk: var(--lv-4); }
.v2-rank-ring[data-rank="5"] { --rk: var(--lv-5); }
.v2-rank-ring[data-rank="6"] { --rk: var(--lv-6); }
.v2-rank-ring[data-rank="7"] { --rk: var(--lv-7); }
.v2-rank-ring[data-rank="8"] { --rk: var(--lv-8); }
.v2-rank-ring[data-rank="9"] { --rk: var(--lv-9); }

/* "[icon] 13" before the name: rank picture plus the 1-100 level */
.ch-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--t2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ch-foot { flex: none; padding: 12px 16px 16px; }
.ch-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 8px 0 16px;
  border-radius: 8px;
  background: var(--g900);
  border: 1px solid var(--g300);
  transition: border-color 0.15s;
}
.ch-input:focus-within { border-color: var(--purple-600); }
.ch-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  outline: none;
  color: var(--t0);
  font-size: 16px;
  font-weight: 500;
}
.ch-input input::placeholder { color: var(--t5); }
.ch-input--ghost { color: var(--t5); font-size: 16px; font-weight: 500; text-align: left; }
.ch-input--ghost:hover { border-color: var(--t7); color: var(--t3); }
/* The count, the emoji button and its board (parts/chat.js). */
.ch-count {
  flex: none;
  padding: 0 2px;
  color: var(--t5);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ch-count.is-warn { color: var(--orange); }
.ch-count.is-max { color: var(--red-400); }
/* One blink when a click was refused because the field is full. */
.ch-count.is-full { animation: ch-count-full 0.5s steps(1) 2; }
@keyframes ch-count-full { 0%, 50% { color: var(--red-400); } 50.01%, 100% { color: var(--t0); } }
.ch-emoji-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--t6); }
.ch-emoji-btn:hover { color: var(--purple-300); background: var(--g600); }
.ch-emoji-btn .v2-ico { width: 18px; height: 18px; }
.ch-emoji-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  margin: 0 0 8px;
  padding: 6px;
  border: 1px solid var(--g600);
  border-radius: 8px;
  background: var(--g700);
}
.ch-emoji-board[hidden] { display: none; }
.ch-emoji-pick { height: 28px; border-radius: 4px; font-size: 17px; line-height: 1; }
.ch-emoji-pick:hover { background: var(--g500); }
/* Said while typing; the server is what actually refuses a link. */
.ch-nolink {
  margin: 6px 0 0;
  color: var(--orange);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}
.ch-nolink[hidden] { display: none; }
.ch-send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--t6); }
.ch-send:hover { color: var(--purple-300); background: var(--g600); }
.ch-send .v2-ico { width: 18px; height: 18px; }

/*
  The floating chat button (measured: 48x48 darkgrey400, radius 8, 16 from the
  edge). Bottom RIGHT since 13.10.2026: bottom left it sat on the control
  panel's last row of every game page (Crash's history label, Dice's ROLL
  corner, Chicken Road's LAST ROUNDS, Coinflip's About) at 1078x759. The right
  corner holds only the toasts, which stack above it (#v2-toasts). Sports keeps
  it on the left: its bet-slip button lives bottom right (pages/sports.css
  .sp-slip-fab), and the admin app sets its own corner (pages/admin.css).
*/
.v2-fab {
  position: fixed;
  left: auto;
  right: 16px;
  bottom: 16px;
  z-index: 1003;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--g400);
  color: var(--t6);
  transition: left 0.2s ease, right 0.2s ease, color 0.15s;
}
.v2-fab:hover { color: var(--t1); }
body:has(.pg-sports) .v2-fab { left: 16px; right: auto; }
/*
  With the chat docked open the button has nothing to do (the rail has its own
  collapse control) and, at 316px from the left, it covered the first card of
  every page with a narrow gutter. It only shows when the chat is closed or
  floating. Floating (overlay) and open, the chat covers the left edge, so the
  button on the right stays where it is; on Sports, where it is on the left,
  it moves past the chat as it always did.
*/
body.v2-chat-open.v2-mode-dock .v2-fab { display: none; }
body.v2-chat-open.v2-mode-overlay:has(.pg-sports) .v2-fab { left: calc(var(--chat-w) + 16px); }

/*
  Player faces cut out of the 64x64 skin texture (see avatarHtml in
  parts/icons.js): the box clips, the texture is 8x its width, shifted one
  face-width up and left; the hat layer is the same texture shifted to x=40.
*/
.v2-face { position: relative; display: inline-block; overflow: hidden; flex: none; vertical-align: middle; }
.v2-face > img {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 800%;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
}
.v2-face > img.v2-face-hat { left: -500%; }
.v2-face > .v2-av-letter { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }

/* ---------- footer (measured: 1076 content row, heads 12/600, links 14/500) ---------- */

#v2-footer {
  flex: none;
  /* 24 under, not 8 (13.10.2026): the chat button (48 + 16 from the bottom)
     cut 8px off the last footer row when the page was scrolled to its end */
  padding: 8px 16px 24px;
  border-top: 1px solid var(--g700);
  background: radial-gradient(100% 100% at 50% 0, var(--g800) 0, transparent 100%);
}
.ft-in { max-width: 1200px; margin: 0 auto; padding: 48px 16px; }
.ft-top { display: flex; justify-content: space-between; margin: -12px; }
.ft-brand { flex: 0 0 33.333%; max-width: 33.333%; padding: 12px; }
.ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin-left: -12px;
  padding: 0 12px;
  border-radius: 6px;
}
.ft-logo img { width: 32px; height: 32px; image-rendering: pixelated; }
.ft-logo .hd-word { font-size: 18px; }
.ft-blurb { max-width: 343px; margin: 12px 0; color: var(--t7); font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
.ft-social { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-left: -12px; }
.ft-soc { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--t5); transition: color 0.15s; }
.ft-soc:hover { color: var(--t1); }
.ft-soc .v2-ico { width: 24px; height: 24px; }

/*
  Language picker, measured on the reference footer: 166x40, darkgrey600,
  radius 8, 4px from the social row's last icon, flag 12px before an
  uppercase 14/500 name, chevron at the right. The list opens under it in the
  games menu's style (darkgrey800 card, radius 8, 8px padding).
*/
.ft-lang { position: relative; margin-left: 16px; }
.ft-social > .ft-lang:first-child { margin-left: 12px; }
.ft-lang-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 166px;
  height: 40px;
  padding: 0 12px 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--g600);
  color: var(--t1);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.ft-lang-btn:hover, .ft-lang-btn.open { background: var(--g500); }
.ft-lang-name { flex: 1 1 auto; text-align: left; }
.ft-flag { display: block; flex: none; width: 20px; height: 15px; border-radius: 2px; }
.ft-lang-chev { flex: none; width: 20px; height: 20px; color: var(--t5); transition: transform 0.15s; }
.ft-lang-btn.open .ft-lang-chev { transform: rotate(180deg); }
.ft-lang-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 166px;
  padding: 8px;
  border: 1px solid var(--g600);
  border-radius: 8px;
  background: var(--g800);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.ft-lang-list[hidden] { display: none; }
.ft-lang-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--t2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.ft-lang-opt:hover, .ft-lang-opt.on { background: var(--g400); color: var(--t0); }
.ft-cols { display: flex; justify-content: space-between; width: 63.5%; flex: 0 0 auto; }
.ft-col { padding: 12px; }
.ft-col h4 {
  margin: 0 0 12px;
  color: var(--t7);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ft-col p { margin: 0 0 12px; line-height: 24px; }
.ft-col a {
  color: var(--t2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  transition: color 0.15s;
}
.ft-col a:hover { color: var(--t0); }
.ft-scene { padding: 32px 0; }
.ft-scene-box { height: 200px; border-radius: 8px; overflow: hidden; background: var(--g800); }
.ft-scene-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: color-mix(in srgb, var(--t7) 78%, var(--g900));
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ft-bottom p { margin: 0; }
.ft-grow { flex: 1 1 auto; }
.ft-bottom a { transition: color 0.15s; }
.ft-bottom a:hover { color: var(--t2); }

/* ---------- phone bottom nav (measured: 64 high, darkgrey800, labels 12/600) ---------- */

#v2-bottom { display: none; }
.bn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 63px;
  padding: 0 16px;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.21px;
  white-space: nowrap;
}
.bn-btn .v2-ico { width: 21px; height: 21px; }
.bn-btn.on, .bn-btn.open { color: var(--purple); }
/* the reference's open chat turns its button into a white "Schließen" */
.bn-btn[data-act="chat"].on { color: var(--t0); }

.v2-sheet { position: fixed; inset: 65px 0 64px 0; z-index: 1004; display: flex; flex-direction: column; justify-content: flex-end; }
.v2-sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--g900) 72%, transparent); animation: v2-fade 0.15s; }
.v2-sheet-card {
  position: relative;
  padding: 16px;
  border-radius: 12px 12px 0 0;
  background: var(--g800);
  border-top: 1px solid var(--g600);
  animation: v2-rise 0.18s ease-out;
}
.v2-sheet-h { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.25px; text-transform: uppercase; }
.v2-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v2-sheet-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.v2-menu-item--tile { background: var(--g600); min-width: 0; }
.v2-menu-item--tile > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v2-menu-item--tile + .v2-menu-item--tile { margin-top: 0; }

/* ---------- toasts ---------- */

#v2-toasts {
  position: fixed;
  right: 16px;
  /* above the chat button, which sits in this corner since 13.10.2026 */
  bottom: 80px;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.v2-toast {
  --tc: var(--purple);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
  max-width: 380px;
  padding: 12px 14px 12px 12px;
  border-radius: 8px;
  background: var(--g600);
  border: 1px solid var(--g400);
  border-left: 3px solid var(--tc);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--g900) 70%, transparent);
  color: var(--t1);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  pointer-events: auto;
  cursor: pointer;
  animation: v2-toast-in 0.2s ease-out;
  transition: opacity 0.2s, transform 0.2s;
}
.v2-toast--success { --tc: var(--green); }
.v2-toast--error { --tc: var(--red); }
.v2-toast-ico { color: var(--tc); }
.v2-toast-text { overflow-wrap: anywhere; }
.v2-toast.out { opacity: 0; transform: translateY(6px); }

/* ---------- modals (measured sign-in: 760x528, form column 442 / 40px padding) ---------- */

.v2-modal { position: fixed; inset: 0; z-index: 2400; display: grid; place-items: center; padding: 16px; }
.v2-modal-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--g900) 74%, transparent); animation: v2-fade 0.15s; }
.v2-modal-card {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border-radius: 8px;
  background: var(--g800);
  border: 1px solid var(--g600);
  box-shadow: 0 11px 15px -7px color-mix(in srgb, var(--g900) 60%, transparent), 0 24px 38px 3px color-mix(in srgb, var(--g900) 45%, transparent);
  animation: v2-pop 0.18s ease-out;
}
.v2-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--t3);
  transition: color 0.15s, background-color 0.15s;
}
.v2-modal-x:hover { color: var(--t0); background: var(--g500); }
.v2-modal--signin .v2-modal-x { color: var(--t0); background: color-mix(in srgb, var(--g900) 30%, transparent); }

.si { display: flex; min-height: 528px; }
.si-main { flex: 0 0 442px; padding: 40px; }
.si-art {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  border-radius: 0 7px 7px 0;
  background: var(--purple) url("/design-v2/art/frame-signin.webp") center / cover no-repeat;
}
.si-art-foot { padding: 0 16px 28px; text-align: center; }
.si-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.si-logo img { width: 32px; height: 32px; image-rendering: pixelated; }
.si-logo .hd-word { font-size: 22px; }
.si-art-foot p { margin: 10px 0 0; color: var(--t1); font-size: 12px; font-weight: 500; letter-spacing: 0.4px; }

.si-h { margin: 0 0 20px; font-size: 20px; font-weight: 700; line-height: 32px; letter-spacing: 0.25px; text-transform: uppercase; }
.si-label {
  display: block;
  margin: 0 0 8px;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
}
.si-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--g900);
  border: 1px solid var(--g300);
  outline: none;
  color: var(--t0);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15px;
  transition: border-color 0.15s;
}
.si-input:focus { border-color: var(--purple-600); }
.si-input::placeholder { color: var(--t5); }
.si-err { margin: 10px 0 0; color: var(--red-400); font-size: 12px; font-weight: 500; line-height: 18px; }
.si-submit {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 24px;
  border-radius: 8px;
  background: var(--purple-700);
  color: var(--t0);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  transition: background-color 0.15s, opacity 0.15s;
}
.si-submit:hover:not(:disabled) { background: var(--purple-600); }
.si-submit:disabled { opacity: 0.5; }
.si-secondary {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border-radius: 6px;
  color: var(--t4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.21px;
  text-transform: uppercase;
}
.si-secondary:hover { color: var(--t1); background: var(--g500); }
.si-sep { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; }
.si-sep hr { flex: 1; margin: 0; border: 0; border-top: 1px solid var(--g300); }
.si-sep span { color: var(--t7); font-size: 12px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
.si-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.si-steps li { display: flex; align-items: center; gap: 12px; color: var(--t2); font-size: 14px; line-height: 20px; }
.si-steps b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 6px;
  background: var(--g500);
  color: var(--purple-300);
  font-size: 12px;
  font-weight: 700;
}
.si-note { margin: 16px 0 0; color: var(--t4); font-size: 12px; line-height: 18px; }
.si-text { margin: 0 0 16px; color: var(--t2); font-size: 14px; line-height: 20px; }
.si-text b, .si-hint b, .si-meta b { color: var(--t0); font-weight: 600; }
.si-hint { margin: 10px 0 0; color: var(--t4); font-size: 12px; line-height: 18px; }
.si-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 6px 0 16px;
  border-radius: 8px;
  background: var(--g900);
  border: 1px solid var(--g300);
}
.si-cmd code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--t0);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  scrollbar-width: none;
}
.si-cmd button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  flex: none;
  border-radius: 6px;
  background: var(--g500);
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.21px;
  text-transform: uppercase;
}
.si-cmd button:hover { background: var(--g400); color: var(--t0); }
.si-cmd button .v2-ico { width: 16px; height: 16px; }
.si-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; color: var(--t3); font-size: 13px; }
.si-meta .v2-amount { color: var(--t0); }
.si-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--g700);
  color: var(--t2);
  font-size: 13px;
  line-height: 18px;
}
.si-time { margin-left: auto; color: var(--t3); font-variant-numeric: tabular-nums; }
.si-spin {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--g300);
  border-top-color: var(--purple);
  animation: v2-spin 0.8s linear infinite;
}

/* ---------- sign-in v2: tabs, provider buttons, email forms (docs/auth/spec.md section 5) ---------- */

.si-tabs { display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; border-radius: 8px; background: var(--g700); }
.si-tabs button {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.21px;
  text-transform: uppercase;
  transition: color 0.15s, background-color 0.15s;
}
.si-tabs button:hover { color: var(--t1); }
.si-tabs button.on { background: var(--g300); color: var(--t0); }

/* Provider buttons in the colours their brand rules give for a dark page. */
.si-provs { display: grid; gap: 8px; }
.si-prov {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: background-color 0.15s;
}
.si-prov-ico { display: block; width: 18px; height: 18px; flex: none; }
.si-prov--google { background: #131314; border: 1px solid #8e918f; color: #e3e3e3; }
.si-prov--google:hover { background: #1f1f21; }
.si-prov--discord { background: #5865f2; color: #fff; }
.si-prov--discord:hover { background: #4752c4; }
.si-prov--discord .si-prov-ico { width: 22px; }
.si-provs + .si-sep { margin: 18px 0 14px; }

.si-form { display: grid; gap: 14px; }
.si-form .si-input { height: 44px; }
.si-form .si-err { margin: 0; }
.si-form .si-submit { margin-top: 6px; }
.si-form > .si-hint { margin: -8px 0 0; }
.si-field { min-width: 0; }
.si-field .si-hint { margin: 6px 0 0; }
.si-hint--bad { color: var(--red-400); }
.si-hint--good { color: var(--green-400); }
.si-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.si-label-row .si-label { margin: 0; }
.si-link { color: var(--purple-300); font-size: 12px; font-weight: 500; line-height: 18px; }
.si-link:hover { color: var(--t0); }
.si-link--test { display: block; margin: 18px auto 0; color: var(--t4); }

.si-pw { position: relative; }
.si-pw .si-input { padding-right: 52px; }
.si-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  margin-top: -16px;
  border-radius: 6px;
  color: var(--t4);
  transition: color 0.15s, background-color 0.15s;
}
.si-eye:hover { color: var(--t1); background: var(--g500); }
.si-eye svg { display: block; width: 20px; height: 20px; }
.si-eye .si-eye-shut, .si-eye.on .si-eye-open { display: none; }
.si-eye.on .si-eye-shut { display: block; }

.si-checks { display: grid; gap: 10px; margin-top: 2px; }
.si-check { position: relative; display: flex; align-items: flex-start; gap: 10px; color: var(--t2); font-size: 13px; line-height: 20px; cursor: pointer; }
.si-check input { position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.si-box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 5px;
  background: var(--g900);
  border: 1px solid var(--g50);
  transition: background-color 0.15s, border-color 0.15s;
}
.si-check input:checked + .si-box { background: var(--purple-700); border-color: var(--purple-600); }
.si-check input:checked + .si-box::after {
  content: "";
  width: 10px;
  height: 5px;
  margin-top: -2px;
  border: solid var(--t0);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.si-check input:focus-visible + .si-box { outline: 2px solid var(--purple-300); outline-offset: 2px; }
.si-check a { color: var(--purple-300); }
.si-check a:hover { color: var(--t0); text-decoration: underline; }
.si-done { margin: 0; padding: 14px 16px; border-radius: 8px; background: var(--g700); color: var(--t1); font-size: 14px; line-height: 20px; }

/* ---------- "What's your in-game name?" (parts/skin-prompt.js) ---------- */
.v2-modal--skin .v2-modal-card { width: min(440px, 100%); }
.sk { padding: 36px 32px 28px; }
.sk-face { display: flex; justify-content: center; margin: 0 0 18px; }
.sk-ava { width: 72px; height: 72px; border-radius: 16px; background: var(--g600); font-size: 30px; }
.sk-h { margin-bottom: 12px; text-align: center; }
.sk-money { color: var(--t3); }
.si-submit--alt { margin-top: 0; background: var(--g500); color: var(--t1); }
.si-submit--alt:hover:not(:disabled) { background: var(--g400); }
.sk .si-sep { margin: 20px 0 14px; }
.sk-later { text-align: center; }

.v2-modal--wallet .v2-modal-card { width: min(480px, 100%); }
.wl { padding: 32px; }
.wl-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; border-radius: 8px; background: var(--g700); }
.wl-tabs button {
  flex: 1;
  height: 36px;
  border-radius: 6px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.21px;
  text-transform: uppercase;
  transition: color 0.15s, background-color 0.15s;
}
.wl-tabs button:hover { color: var(--t1); }
.wl-tabs button.on { background: var(--g300); color: var(--t0); }
.wl-bal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.wl-bal .v2-amount { color: var(--t0); font-size: 15px; }
.wl-hist { margin-top: 22px; }

.wl-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--g600);
  color: var(--t3);
  font-size: 13px;
}
.wl-row .v2-amount { color: var(--t1); }
.wl-end { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wl-cancel { padding: 2px 8px; border: 1px solid var(--g500); border-radius: 6px; background: transparent; color: var(--t2); font: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; cursor: pointer; }
.wl-cancel:hover { border-color: var(--red-400); color: var(--red-400); }
.wl-cancel:disabled { opacity: 0.5; cursor: default; }
.wl-status { padding: 2px 8px; border-radius: 6px; background: var(--g500); color: var(--t2); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.wl-status[data-status="sent"], .wl-status[data-status="paid"], .wl-status[data-status="done"] { color: var(--green-400); }
.wl-status[data-status="failed"], .wl-status[data-status="returned"] { color: var(--red-400); }

/* ---------- shared bet input (the reference's MENGE row) ---------- */

.v2-bet {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 6px 0 12px;
  border-radius: 8px;
  background: var(--g800);
  border: 1px solid var(--g600);
  transition: border-color 0.15s;
}
.v2-bet:focus-within { border-color: var(--g300); }
.v2-bet.bad { border-color: color-mix(in srgb, var(--red) 65%, var(--g600)); }
.v2-bet[aria-disabled="true"] { opacity: 0.6; }
.v2-bet > .v2-coin { width: 22px; height: 22px; }
.v2-bet-in {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 4px;
  background: none;
  border: 0;
  outline: none;
  color: var(--t1);
  font-size: 16px;
  font-weight: 600;
}
.v2-bet-in::placeholder { color: var(--t5); }
.v2-bet-clear {
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--t4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.v2-bet-clear:hover:not(:disabled) { color: var(--t1); }
/* A long amount takes the room of the CLEAR word: the button becomes an X and
   keeps its label for a screen reader (parts/bet-input.js sets .tight). */
.v2-bet-x { display: none; font-size: 15px; line-height: 1; }
.v2-bet.tight .v2-bet-word { display: none; }
.v2-bet.tight .v2-bet-x { display: block; }
.v2-bet.tight .v2-bet-clear { padding: 0 8px; }
.v2-bet-btn {
  width: 56px;
  height: 36px;
  flex: none;
  border-radius: 6px;
  background: var(--g500);
  color: var(--t4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.12s, background-color 0.12s;
}
.v2-bet-btn:hover:not(:disabled) { background: var(--g400); color: var(--t0); }

/* ---------- breakpoints (measured: nav words go at 1279, sidebar and nav at 959) ---------- */

@media (max-width: 1279px) {
  .hd-logo { padding: 0; }
  .hd-logo .hd-word { display: none; }
  .hd-logo img { width: 48px; height: 48px; }
}

@media (max-width: 959px) {
  .hd-nav { display: none; }
  .hd-in { padding: 0 16px; }
  #v2-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1005;
    display: flex;
    justify-content: space-between;
    height: 64px;
    padding: 0 12px;
    background: var(--g800);
    border-top: 1px solid color-mix(in srgb, var(--t5) 12%, transparent);
  }
  /* measured on the reference: the phone chat covers the header too, from y=0 */
  #v2-chat { width: 100%; bottom: 64px; }
  body.v2-mode-phone #v2-chat { top: 0; z-index: 1007; }
  .bn-btn { min-width: 80px; } /* the reference's Chat button: 80 wide */
  .v2-fab { display: none; }
  #v2-toasts { left: 16px; right: 16px; bottom: 80px; align-items: stretch; }
  .v2-toast { min-width: 0; max-width: none; }

  .ft-top { flex-direction: column; }
  .ft-brand { max-width: none; }
  .ft-cols { flex-direction: column; width: auto; }
  .ft-bottom { flex-direction: column; align-items: stretch; text-align: center; }
  .ft-bottom p { text-align: left; }
  .ft-grow { display: none; }

  .si { min-height: 0; }
  .si-main { flex: 1; padding: 28px 20px 24px; }
  .si-art { display: none; }
  .v2-modal--signin .v2-modal-x { color: var(--t3); background: none; }
  /* the close button sits in the form column on a phone: keep the tabs and titles clear of it */
  .si-tabs { margin-right: 40px; }
  .si-h { padding-right: 40px; }
  .wl { padding: 24px 20px; }
}

@media (max-width: 420px) {
  .hd-btn-text { padding: 0 12px; }
  .hd-btn-primary { padding: 0 14px; }
  .hd-bal-amt { padding: 0 10px; font-size: 13px; }
  /* On a small phone the Wallet button keeps its icon; the word goes. */
  .hd-wallet span { display: none; }
  .hd-wallet { padding: 0 8px 0 10px; }
}
/* the four labels need ~352px at the reference's 16px padding */
@media (max-width: 379px) {
  #v2-bottom { padding: 0 6px; }
  .bn-btn { padding: 0 10px; }
}
@media (max-width: 420px) {
  .v2-bet-clear { padding: 0 6px; }
  .v2-bet-btn { width: 42px; }
}

/* ---------- motion ---------- */

@keyframes ch-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@keyframes v2-fade { from { opacity: 0; } }
@keyframes v2-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes v2-rise { from { transform: translateY(24px); opacity: 0; } }
@keyframes v2-toast-in { from { opacity: 0; transform: translateY(8px); } }
/* There is deliberately no `@media (prefers-reduced-motion: reduce)` rule here.

   This file used to end with one that set every animation and transition on
   the site to 0.01ms. On a machine with Windows' "Animation effects" turned
   off - the default on plenty of gaming PCs - that killed the case reel, the
   battle reels, the roulette wheel, the upgrader roll and the chicken's hop:
   the result simply appeared, which beta testers read as broken or rigged
   ("insta animations", 14.09.2026). On a casino the reveal IS the game.

   Skipping the reveal is a choice the player makes on this site, in Account ->
   Settings; the pages ask `parts/motion.js` (`reducedMotion()` / `slowMotion`)
   and jump their reel to the end themselves. Nothing reads the operating
   system's flag. */

/* ---------- gepinnte Spiele: der Stern im Menue (23.09.2026) ---------- */

/*
  Jede Menuezeile sitzt jetzt in einem eigenen Kaestchen, damit der Stern neben
  dem Link stehen kann statt darin - ein Knopf in einem <a> waere ungueltiges
  HTML, und die beiden Klicks tun Verschiedenes. Die Regeln fuer den Abstand
  zwischen zwei Zeilen wandern deshalb vom Element auf das Kaestchen.
*/
.v2-menu-row { position: relative; display: block; }
.v2-menu-row + .v2-menu-row { margin-top: 4px; }
.v2-menu-grid .v2-menu-row + .v2-menu-row { margin-top: 0; }
/* Platz fuer den Stern, damit "Russian Roulette" nicht darunter laeuft. */
.v2-menu-row .v2-menu-item { padding-right: 34px; }
.v2-menu-pin {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--t4);
  /* Sichtbar, nicht nur beim Darueberfahren: auf dem Handy gibt es kein
     Darueberfahren, und ein Stern, den man erst findet, wenn man ihn kennt,
     ist keiner. Gedimmt reicht, um die Zeile nicht zu ueberstrahlen. */
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.v2-menu-row:hover .v2-menu-pin { opacity: 1; }
.v2-menu-pin:hover { color: var(--t0); background: var(--g400); }
.v2-menu-pin:focus-visible { opacity: 1; outline: 2px solid var(--purple-300); outline-offset: 1px; }
/* Angeheftet: dieselbe Farbe wie die Muenze, damit der Stern zum Rest gehoert. */
.v2-menu-pin.on { color: var(--orange); opacity: 1; }
.v2-menu-pin .v2-ico { width: 16px; height: 16px; }

/* The seasonal event entry (Mob Wars, 04.10.2026): orange, so it reads as a
   time-limited thing next to the permanent links. */
.hd-link.hd-event .hd-ico { color: #f97316; }
.hd-link.hd-event.on, .hd-link.hd-event:hover { color: #fdba74; }
.v2-sheet-event {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r);
  background: color-mix(in srgb, #f97316 16%, var(--g800)); border: 1px solid color-mix(in srgb, #f97316 45%, transparent);
  color: var(--t0); font: 700 14px/20px var(--font); text-decoration: none;
}
.v2-sheet-event .v2-ico { width: 22px; height: 22px; color: #f97316; }

/* the event links carry the rendered pumpkin (art/event/pumpkin.webp) */
.hd-event-pic { object-fit: contain; filter: drop-shadow(0 0 4px rgba(249, 115, 22, .6)); }
.hd-link.hd-event .hd-event-pic { width: 18px; height: 18px; }

/* The event row at the top of the games menu (09.10.2026, its header entry went). */
.v2-menu-event { margin-bottom: 6px; color: #fdba74; }
.v2-menu-event .hd-event-pic { width: 20px; height: 20px; }

/* ---------- 10.10.2026: DonutSurge-style compact games menu, race clock, rakeback in the wallet ---------- */
/* The games menu fits one screen: shorter rows and smaller icon boxes (it ran past a 700px window). */
.v2-menu--games { gap: 6px; padding: 8px; max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.v2-menu--games .v2-menu-grid { grid-template-columns: repeat(2, minmax(196px, 1fr)); gap: 5px 8px; }
.v2-menu--games .v2-menu-item { height: 44px; padding: 5px 8px; gap: 12px; font-size: 13.5px; }
.v2-menu--games .v2-menu-ico { width: 32px; height: 32px; border-radius: 8px; }
.v2-menu--games .v2-menu-ico .v2-ico { width: 20px; height: 20px; }
.v2-menu--games .v2-menu-ico img { width: 24px; height: 24px; }
.v2-menu--games .v2-menu-sec-h { padding: 4px 6px 6px; font-size: 11px; }
.v2-menu--games .v2-menu-sec + .v2-menu-sec { padding-top: 6px; }
.v2-menu--games .v2-menu-event { height: 44px; margin-bottom: 4px; }
.v2-menu--games .v2-menu-row .v2-menu-item { padding-right: 30px; }

.hd-race-clock {
  margin-left: 8px; padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--orange) 22%, transparent); color: #fdba74;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.3px;
}
.hd-race-clock[hidden] { display: none; }
@media (max-width: 1100px) { .hd-race-clock { display: none; } }

.v2-menu-rb { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--g400); }
.v2-menu-rb[hidden] { display: none; }
.v2-menu-rb-btn { height: 52px; }
.v2-menu-rb-btn:disabled { cursor: default; opacity: 0.75; }
.v2-menu-rb-btn:disabled:hover { background: transparent; color: var(--t3); }
.v2-menu-rb-amt { margin-left: auto; padding-left: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--t1); text-transform: none; }
.v2-menu-rb-btn.is-ready .v2-menu-rb-amt { color: var(--green-400, #4ade80); }
.v2-menu-rb-btn.is-ready .v2-menu-ico { color: var(--green-400, #4ade80); background: color-mix(in srgb, var(--green, #22c55e) 16%, var(--g200)); }
.v2-menu-rb-amt .v2-coin { width: 14px; height: 14px; }

/* ---------- 3D buttons (10.10.2026, Lukas: "3d buttons wie bei donutsurge") ----------
   DonutSurge bevels every button: a light line along the top edge and a dark
   one along the bottom, both inside the button, and pressing flattens it. Ours
   keep their own colours and corners; the two edges are white and black at low
   opacity, so one rule fits every colour. !important because several game
   panels set their own shadow at a higher specificity (Crash its purple glow),
   and the point is that every button looks the same. */
:is(.hd-btn-primary, .hd-wallet, .h-btn, .cr-primary, .rr-primary, .mn-primary, .tw-primary, .hl-primary, .bj-primary, .hr-primary, .st-primary, .sn-primary, .sl-primary, .pk-primary, .kn-primary, .dc-primary, .rl-primary, .ml-primary, .db-primary, .cn-primary, .cf-primary, .uno-primary, .sn-play, .rw-btn, .af-btn, .lb-btn, .mw-btn, .bn-btn, .ac-btn, .hw-btn, .hw-cta, .fp-btn, .bt-btn, .wd-btn, .dp-btn, .vp-btn--go, .uc-btn, .si-submit, .tr-btn, .cm-btn) {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .24), inset 0 -3px 0 rgba(0, 0, 0, .32) !important;
}
:is(.hd-btn-primary, .hd-wallet, .h-btn, .cr-primary, .rr-primary, .mn-primary, .tw-primary, .hl-primary, .bj-primary, .hr-primary, .st-primary, .sn-primary, .sl-primary, .pk-primary, .kn-primary, .dc-primary, .rl-primary, .ml-primary, .db-primary, .cn-primary, .cf-primary, .uno-primary, .sn-play, .rw-btn, .af-btn, .lb-btn, .mw-btn, .bn-btn, .ac-btn, .hw-btn, .hw-cta, .fp-btn, .bt-btn, .wd-btn, .dp-btn, .vp-btn--go, .uc-btn, .si-submit, .tr-btn, .cm-btn):active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .06) !important;
  transform: translateY(1px);
}
:is(.v2-bet-btn, .v2-bet-clear) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .35) !important;
}
:is(.v2-bet-btn, .v2-bet-clear):active:not(:disabled) {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3) !important;
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  :is(.hd-btn-primary, .hd-wallet, .h-btn, .cr-primary, .rr-primary, .mn-primary, .tw-primary, .hl-primary, .bj-primary, .hr-primary, .st-primary, .sn-primary, .sl-primary, .pk-primary, .kn-primary, .dc-primary, .rl-primary, .ml-primary, .db-primary, .cn-primary, .cf-primary, .uno-primary, .sn-play, .rw-btn, .af-btn, .lb-btn, .mw-btn, .bn-btn, .ac-btn, .hw-btn, .hw-cta, .fp-btn, .bt-btn, .wd-btn, .dp-btn, .vp-btn--go, .uc-btn, .si-submit, .tr-btn, .cm-btn, .v2-bet-btn, .v2-bet-clear):active { transform: none; }
}

/* ---------- 3D everywhere (parts/bevel.js, 10.10.2026) ----------
   The classes bevel.js hands out, in DonutSurge's measures: keys rise (light
   top edge, dark bottom edge), wells sink (the reverse), tiles are blocks with
   a ledge under them, and anything pressed goes flat. Light and dark are white
   and black at low opacity, so each fits whatever colour the element has. */
.v3-key { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .24), inset 0 -3px 0 rgba(0, 0, 0, .32) !important; }
.v3-key-soft { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .38) !important; }
.v3-key:active:not(:disabled), .v3-key-soft:active:not(:disabled) {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .05) !important;
  transform: translateY(1px);
}
.v3-well { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .05) !important; }
.v3-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(255, 255, 255, .06), 0 3px 0 rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25); }
.v3-tile:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3), 0 1px 0 rgba(0, 0, 0, .55); transform: translateY(2px); }
/* The game frames: a hairline of light on top and a dark line under, the way a raised panel catches it. */
.v2-game-panel {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
}
@media (prefers-reduced-motion: reduce) { .v3-key:active, .v3-key-soft:active, .v3-tile:active { transform: none; } }

/* The game cards on the home page are blocks too: a light rim on top, a dark ledge under. */
.pg-home .h-mq-card, .pg-home .h-pin { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 3px 0 rgba(0, 0, 0, .45); }
.pg-home .h-mq-card:active { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3), 0 1px 0 rgba(0, 0, 0, .45); }

/* ---------- 3D in the menus too (10.10.2026: "bei games ausklappen, bei profile. ueberall") ----------
   Every entry is a key of its own, as on DonutSurge: a dark face with the light
   top edge and dark bottom edge, lighter under the pointer, flat when pressed.
   The menu itself is a raised panel. */
.v2-menu { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(0, 0, 0, .7), 0 10px 28px rgba(0, 0, 0, .55); }
.v2-menu .v2-menu-item:not(.off), .v2-menu-item--tile:not(.off) {
  background: color-mix(in srgb, var(--g500) 70%, var(--g600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .4);
}
.v2-menu .v2-menu-item:not(.off):hover, .v2-menu .v2-menu-item.on, .v2-menu-item--tile:not(.off):hover {
  background: var(--g400);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .4);
}
.v2-menu .v2-menu-item:not(.off):active, .v2-menu-item--tile:not(.off):active {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35);
  transform: translateY(1px);
}
.v2-menu .v2-menu-item:disabled { transform: none; }
/* the icon sits in a small sunken well on the key */
.v2-menu .v2-menu-ico { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .05); }
.v2-menu .v2-menu-event { background: color-mix(in srgb, var(--orange) 14%, var(--g600)); }
.v2-menu-head { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .4); }

/* Cards and boxes (parts/bevel.js judgePanel): the raised-panel edge. */
.v3-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 2px 0 rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .25); }

/* ---------- The classic look, dressed up (10.10.2026, DonutFlip's home as the model) ----------
   Lukas: "nicht mit halloween farben sondern mit alten". All of it sits on the
   classic tokens (blue-black grounds, the purple accent) and stands back while
   a seasonal theme is on (html.theme-*), which brings its own grounds.

   1. A scene behind the page: a Minecraft night in the site's own blue and
      violet (art/site-bg.webp, ChatGPT), darkened towards the bottom so cards
      and text keep their contrast. It shows in the margins around the content,
      the way DonutFlip's forest does.
   2. One accent: every game card in the home bands carries the same purple
      tint instead of a colour each - the grid reads as one set.
   3. The header picks up the accent in a faint wash from the left. */
html:not([class*="theme-"]) body {
  background:
    linear-gradient(180deg, rgba(10, 17, 25, .35) 0%, rgba(10, 17, 25, .72) 45%, rgba(10, 17, 25, .94) 80%, var(--g900) 100%),
    url("/design-v2/art/site-bg.webp") center top / cover no-repeat fixed,
    var(--g900);
}
html:not([class*="theme-"]) #v2-header {
  background: linear-gradient(to right, color-mix(in srgb, var(--purple) 12%, transparent) 0%, transparent 32%), color-mix(in srgb, var(--g900) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .03), 0 1px 0 rgba(0, 0, 0, .6);
}
html:not([class*="theme-"]) #v2-chat { background: color-mix(in srgb, var(--g800) 94%, transparent); backdrop-filter: blur(8px); }
html:not([class*="theme-"]) .pg-home .h-mq-card { --tint: var(--purple); }
@media (max-width: 760px) {
  /* a fixed background repaints on every scroll on phones: let it scroll with the page there */
  html:not([class*="theme-"]) body { background-attachment: scroll, scroll, scroll; background-size: auto, 200% auto, auto; }
}