@font-face {
  font-family: "Xarrovv";
  src: url("/fonts/Xarrovv/xarrovv.woff2") format("woff2"), url("/fonts/Xarrovv/Xarrovv.otf") format("opentype"), url("/fonts/Xarrovv/Xarrovv.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xarrovv";
  src: url("/fonts/Xarrovv/Xarrovv-Bold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xarrovv Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 96.34%;
  ascent-override: 83.04%;
  descent-override: 20.76%;
  line-gap-override: 10.38%;
}
:root {
  --font-game: "Xarrovv", "Xarrovv Fallback", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-nav: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-card: "Fredoka", ui-rounded, system-ui, -apple-system, sans-serif;
  color-scheme: light dark;
}
:root:has(> head > meta[name=color-scheme][content=dark]) {
  color-scheme: dark;
}
:root:has(> head > meta[name=color-scheme][content=light]) {
  color-scheme: light;
}
:root {
  --bg-light: #f2efe9;
  --bg-dark: #05050d;
  --surface-light: #ffffff;
  --surface-dark: #121026;
  --surface-hover-light: #e8e4dc;
  --surface-hover-dark: #1c1940;
  --ink-light: #1c1b29;
  --ink-dark: #ecebff;
  --muted-light: #64617a;
  --muted-dark: #8e8cab;
  --line-light: rgba(28, 27, 41, 0.11);
  --line-dark: rgba(255, 255, 255, 0.09);
  --slot-line-light: rgba(28, 27, 41, 0.18);
  --slot-line-dark: rgba(255, 255, 255, 0.1);
  --slot-ink-light: rgba(28, 27, 41, 0.16);
  --slot-ink-dark: rgba(255, 255, 255, 0.11);
  --edge-light: #d5d0c5;
  --edge-dark: #2a2652;
  --accent-light: #c96a00;
  --accent-dark: #8ff0d4;
  --primary-bg-light: #23203f;
  --primary-bg-dark: #2a2359;
  --primary-ink-light: #ffffff;
  --primary-ink-dark: #f5f4ff;
  --primary-edge-light: #23203f;
  --primary-edge-dark: #4a3f96;
  --gold: #ffcf4d;
  --mint: #8ff0d4;
  --eye-ring: #f4ee3c;
  --pupil: #18a339;
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --surface-hover: var(--surface-hover-light);
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --line: var(--line-light);
  --slot-line: var(--slot-line-light);
  --slot-ink: var(--slot-ink-light);
  --edge: var(--edge-light);
  --accent: var(--accent-light);
  --primary-bg: var(--primary-bg-light);
  --primary-ink: var(--primary-ink-light);
  --primary-edge: var(--primary-edge-light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--bg-dark);
    --surface: var(--surface-dark);
    --surface-hover: var(--surface-hover-dark);
    --ink: var(--ink-dark);
    --muted: var(--muted-dark);
    --line: var(--line-dark);
    --slot-line: var(--slot-line-dark);
    --slot-ink: var(--slot-ink-dark);
    --edge: var(--edge-dark);
    --accent: var(--accent-dark);
    --primary-bg: var(--primary-bg-dark);
    --primary-ink: var(--primary-ink-dark);
    --primary-edge: var(--primary-edge-dark);
  }
}
:root[data-theme=light] {
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --surface-hover: var(--surface-hover-light);
  --ink: var(--ink-light);
  --muted: var(--muted-light);
  --line: var(--line-light);
  --slot-line: var(--slot-line-light);
  --slot-ink: var(--slot-ink-light);
  --edge: var(--edge-light);
  --accent: var(--accent-light);
  --primary-bg: var(--primary-bg-light);
  --primary-ink: var(--primary-ink-light);
  --primary-edge: var(--primary-edge-light);
}
:root[data-theme=dark] {
  --bg: var(--bg-dark);
  --surface: var(--surface-dark);
  --surface-hover: var(--surface-hover-dark);
  --ink: var(--ink-dark);
  --muted: var(--muted-dark);
  --line: var(--line-dark);
  --slot-line: var(--slot-line-dark);
  --slot-ink: var(--slot-ink-dark);
  --edge: var(--edge-dark);
  --accent: var(--accent-dark);
  --primary-bg: var(--primary-bg-dark);
  --primary-ink: var(--primary-ink-dark);
  --primary-edge: var(--primary-edge-dark);
}
@supports (color: light-dark(white, black)) {
  :root {
    --bg: light-dark(var(--bg-light), var(--bg-dark));
    --surface: light-dark(var(--surface-light), var(--surface-dark));
    --surface-hover: light-dark(var(--surface-hover-light), var(--surface-hover-dark));
    --ink: light-dark(var(--ink-light), var(--ink-dark));
    --muted: light-dark(var(--muted-light), var(--muted-dark));
    --line: light-dark(var(--line-light), var(--line-dark));
    --slot-line: light-dark(var(--slot-line-light), var(--slot-line-dark));
    --slot-ink: light-dark(var(--slot-ink-light), var(--slot-ink-dark));
    --edge: light-dark(var(--edge-light), var(--edge-dark));
    --accent: light-dark(var(--accent-light), var(--accent-dark));
    --primary-bg: light-dark(var(--primary-bg-light), var(--primary-bg-dark));
    --primary-ink: light-dark(var(--primary-ink-light), var(--primary-ink-dark));
    --primary-edge: light-dark(var(--primary-edge-light), var(--primary-edge-dark));
  }
}
:root {
  accent-color: var(--accent);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  touch-action: manipulation;
}

body {
  color: var(--ink);
  font-family: var(--font-nav);
  background: radial-gradient(1100px 600px at 50% -15%, rgba(255, 255, 255, 0.7) 0%, transparent 65%), var(--bg);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) body {
    background: radial-gradient(1100px 600px at 50% -15%, #171233 0%, transparent 65%), radial-gradient(700px 500px at 100% 110%, #0a181c 0%, transparent 60%), var(--bg);
  }
}
:root[data-theme=dark] body, :root:has(> head > meta[name=color-scheme][content=dark]) body {
  background: radial-gradient(1100px 600px at 50% -15%, #171233 0%, transparent 65%), radial-gradient(700px 500px at 100% 110%, #0a181c 0%, transparent 60%), var(--bg);
}

.sky {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) .sky {
    display: block;
  }
}
:root[data-theme=dark] .sky, :root:has(> head > meta[name=color-scheme][content=dark]) .sky {
  display: block;
}
.sky::before, .sky::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
}
.sky::before {
  box-shadow: 2328px 68px rgba(255,255,255,0.45), 2395px 446px rgba(255,255,255,0.45), 1400px 1481px rgba(255,255,255,0.45), 922px 1382px rgba(255,255,255,0.45), 971px 1130px rgba(255,255,255,0.45), 835px 357px rgba(255,255,255,0.45), 1374px 160px rgba(255,255,255,0.45), 2105px 1496px rgba(255,255,255,0.45), 2070px 469px rgba(255,255,255,0.45), 1762px 292px rgba(255,255,255,0.45), 306px 403px rgba(255,255,255,0.45), 567px 1289px rgba(255,255,255,0.45), 935px 442px rgba(255,255,255,0.45), 1671px 1552px rgba(255,255,255,0.45), 1912px 269px rgba(255,255,255,0.45), 385px 287px rgba(255,255,255,0.45), 1056px 1343px rgba(255,255,255,0.45), 2217px 895px rgba(255,255,255,0.45), 126px 349px rgba(255,255,255,0.45), 2276px 1111px rgba(255,255,255,0.45), 437px 776px rgba(255,255,255,0.45), 1493px 947px rgba(255,255,255,0.45), 99px 1241px rgba(255,255,255,0.45), 1963px 785px rgba(255,255,255,0.45), 1952px 400px rgba(255,255,255,0.45), 2066px 1519px rgba(255,255,255,0.45), 1638px 1586px rgba(255,255,255,0.45), 1693px 1203px rgba(255,255,255,0.45), 847px 362px rgba(255,255,255,0.45), 523px 788px rgba(255,255,255,0.45), 242px 101px rgba(255,255,255,0.45), 885px 775px rgba(255,255,255,0.45), 1014px 1371px rgba(255,255,255,0.45), 143px 1033px rgba(255,255,255,0.45), 1928px 1070px rgba(255,255,255,0.45), 1935px 821px rgba(255,255,255,0.45), 1813px 733px rgba(255,255,255,0.45), 2322px 1546px rgba(255,255,255,0.45), 37px 346px rgba(255,255,255,0.45), 1303px 684px rgba(255,255,255,0.45), 427px 1225px rgba(255,255,255,0.45), 343px 703px rgba(255,255,255,0.45), 40px 560px rgba(255,255,255,0.45), 822px 1577px rgba(255,255,255,0.45), 1004px 295px rgba(255,255,255,0.45), 8px 1355px rgba(255,255,255,0.45), 319px 446px rgba(255,255,255,0.45), 1395px 731px rgba(255,255,255,0.45), 1841px 1511px rgba(255,255,255,0.45), 2275px 1545px rgba(255,255,255,0.45), 915px 598px rgba(255,255,255,0.45), 1938px 1066px rgba(255,255,255,0.45), 520px 1149px rgba(255,255,255,0.45), 1252px 430px rgba(255,255,255,0.45), 1348px 72px rgba(255,255,255,0.45), 1303px 667px rgba(255,255,255,0.45), 1113px 392px rgba(255,255,255,0.45), 1585px 761px rgba(255,255,255,0.45), 251px 531px rgba(255,255,255,0.45), 1503px 588px rgba(255,255,255,0.45), 1634px 1131px rgba(255,255,255,0.45), 2134px 548px rgba(255,255,255,0.45), 1186px 135px rgba(255,255,255,0.45), 557px 1195px rgba(255,255,255,0.45), 2147px 959px rgba(255,255,255,0.45), 1352px 1346px rgba(255,255,255,0.45), 1285px 1428px rgba(255,255,255,0.45), 1795px 830px rgba(255,255,255,0.45), 372px 817px rgba(255,255,255,0.45), 2396px 757px rgba(255,255,255,0.45), 208px 856px rgba(255,255,255,0.45), 456px 588px rgba(255,255,255,0.45), 996px 1038px rgba(255,255,255,0.45), 703px 187px rgba(255,255,255,0.45), 826px 1033px rgba(255,255,255,0.45), 2061px 625px rgba(255,255,255,0.45), 807px 597px rgba(255,255,255,0.45), 1833px 366px rgba(255,255,255,0.45), 1705px 607px rgba(255,255,255,0.45), 722px 805px rgba(255,255,255,0.45), 2198px 1471px rgba(255,255,255,0.45), 1034px 1027px rgba(255,255,255,0.45), 1859px 1167px rgba(255,255,255,0.45), 531px 444px rgba(255,255,255,0.45), 1599px 1569px rgba(255,255,255,0.45);
  animation: twinkle 5s ease-in-out infinite alternate;
}
.sky::after {
  box-shadow: 450px 1056px rgba(255,255,255,0.75), 21px 584px rgba(255,255,255,0.75), 1425px 1484px rgba(255,255,255,0.75), 1294px 999px rgba(255,255,255,0.75), 2223px 401px rgba(255,255,255,0.75), 1427px 695px rgba(255,255,255,0.75), 2024px 1262px rgba(255,255,255,0.75), 759px 98px rgba(255,255,255,0.75), 38px 1527px rgba(255,255,255,0.75), 888px 168px rgba(255,255,255,0.75), 2125px 1085px rgba(255,255,255,0.75), 1840px 1517px rgba(255,255,255,0.75), 2171px 875px rgba(255,255,255,0.75), 383px 1303px rgba(255,255,255,0.75), 2219px 78px rgba(255,255,255,0.75), 1890px 1088px rgba(255,255,255,0.75), 2080px 1168px rgba(255,255,255,0.75), 1828px 936px rgba(255,255,255,0.75), 366px 410px rgba(255,255,255,0.75), 2337px 1269px rgba(255,255,255,0.75), 1957px 1098px rgba(255,255,255,0.75), 1585px 1154px rgba(255,255,255,0.75), 236px 178px rgba(255,255,255,0.75), 1701px 800px rgba(255,255,255,0.75), 1470px 328px rgba(255,255,255,0.75), 416px 513px rgba(255,255,255,0.75), 1455px 440px rgba(255,255,255,0.75), 799px 577px rgba(255,255,255,0.75), 2032px 244px rgba(255,255,255,0.75), 1291px 1558px rgba(255,255,255,0.75), 1244px 1586px rgba(255,255,255,0.75), 1189px 1325px rgba(255,255,255,0.75), 2310px 239px rgba(255,255,255,0.75), 970px 1568px rgba(255,255,255,0.75), 154px 1100px rgba(255,255,255,0.75), 621px 530px rgba(255,255,255,0.75), 1836px 988px rgba(255,255,255,0.75), 1431px 1121px rgba(255,255,255,0.75), 1072px 1343px rgba(255,255,255,0.75), 2153px 768px rgba(255,255,255,0.75), 742px 363px rgba(255,255,255,0.75), 1341px 653px rgba(255,255,255,0.75), 984px 323px rgba(255,255,255,0.75), 1094px 240px rgba(255,255,255,0.75), 1786px 546px rgba(255,255,255,0.75);
  width: 1px;
  height: 1px;
  animation: twinkle 7s ease-in-out -3s infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
.game-shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.game-header {
  font-family: var(--font-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
@media (pointer: coarse) {
  .game-header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.game-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.game-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px 0;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}
.game-brand:hover {
  opacity: 0.8;
}
.game-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.game-brand-svg {
  display: block;
  height: 20px;
  width: auto;
  max-width: 190px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) .game-brand-svg {
    filter: brightness(0.87) hue-rotate(-180deg) invert(1);
  }
}
:root[data-theme=dark] .game-brand-svg, :root:has(> head > meta[name=color-scheme][content=dark]) .game-brand-svg {
  filter: brightness(0.87) hue-rotate(-180deg) invert(1);
}

.game-header-sep {
  color: var(--muted);
  opacity: 0.55;
  font-weight: 400;
  font-size: 16px;
  user-select: none;
}

.game-header-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.game-header-badge {
  background: var(--accent);
  border-radius: 999px;
  color: var(--bg);
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-left: 6px;
  padding: 3px 6px;
  text-transform: uppercase;
  vertical-align: 2px;
}

.game-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.game-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.game-lang-dropdown {
  position: relative;
}

.game-lang-toggle,
.game-theme-toggle {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.game-lang-toggle:hover,
.game-theme-toggle:hover {
  background: var(--surface-hover);
}
.game-lang-toggle:focus-visible,
.game-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.game-theme-toggle {
  width: 34px;
  padding: 0;
}
.game-theme-toggle .icon-sun {
  display: none;
}
.game-theme-toggle .icon-moon {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) .game-theme-toggle .icon-sun {
    display: block;
  }
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) .game-theme-toggle .icon-moon {
    display: none;
  }
}
:root[data-theme=dark] .game-theme-toggle .icon-sun, :root:has(> head > meta[name=color-scheme][content=dark]) .game-theme-toggle .icon-sun {
  display: block;
}
:root[data-theme=dark] .game-theme-toggle .icon-moon, :root:has(> head > meta[name=color-scheme][content=dark]) .game-theme-toggle .icon-moon {
  display: none;
}

.game-lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 100;
}
.game-lang-dropdown.open .game-lang-menu {
  display: block;
}

.game-lang-item {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}
.game-lang-item:hover {
  background: var(--surface-hover);
}
.game-lang-item.is-active {
  font-weight: 600;
  color: var(--accent);
}

.game-main {
  flex: 1 0 auto;
  width: 100%;
  font-family: var(--font-game);
  font-size-adjust: from-font;
}

.game-footer {
  font-family: var(--font-nav);
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 5px 16px;
  text-align: center;
}

.game-footer-line {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-footer-line a {
  color: inherit;
  text-decoration: none;
}
.game-footer-line a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.game-footer-line .sep {
  margin: 0 6px;
  opacity: 0.55;
}

.solit-wrap {
  max-width: 850px;
  margin: 0 auto;
  padding: 12px 14px 20px;
}

.controls-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 10px;
}

.toolbar-options {
  padding: 6px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--line);
  gap: 8px 16px;
}

.btn {
  font: inherit;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 36px;
  padding: 5px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s, background 0.14s, border-color 0.14s;
}
.btn:hover:not(:disabled) {
  background: var(--surface-hover);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn[hidden] {
  display: none;
}

.btn-primary {
  background: var(--primary-bg);
  color: var(--primary-ink);
  border-color: var(--primary-edge);
}
.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-bg) 85%, white);
}

.btn-ghost {
  background: transparent;
}

.btn-sm {
  min-height: 30px;
  padding: 3px 11px;
  font-size: 15px;
}

.btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.icon-btn {
  font: inherit;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.14s, background 0.14s;
}
.icon-btn:hover {
  color: var(--ink);
  background: var(--surface-hover);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.finish {
  background: linear-gradient(135deg, #3b2a7a, #1d5a62);
  color: #fff;
  border-color: #5a4bb0;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.04);
  }
}
.stats {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 4px;
  color: var(--muted);
  font-size: 16.5px;
  font-variant-numeric: tabular-nums;
}

.opt-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.opt-label {
  font-size: 15.5px;
  color: var(--muted);
  font-weight: 500;
  user-select: none;
  white-space: nowrap;
}

.seg-control {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--edge);
}

.seg-btn {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.seg-btn:hover:not(.is-active) {
  color: var(--ink);
}
.seg-btn.is-active {
  background: var(--primary-bg);
  color: var(--primary-ink);
}
.seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.opt-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-block-size: 32px;
  cursor: pointer;
}

.switch-input {
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
}
.switch-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.switch-input.is-pill-fallback {
  appearance: none;
  position: relative;
  inline-size: 36px;
  block-size: 20px;
  border-radius: 999px;
  background: var(--edge);
  border: 1px solid var(--edge);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.switch-input.is-pill-fallback::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.16s ease;
}
.switch-input.is-pill-fallback:checked {
  background: var(--primary-bg);
  border-color: var(--primary-edge);
}
.switch-input.is-pill-fallback:checked::before {
  transform: translateX(16px);
}

.seed-form {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: relative;
}

.seed-input,
.name-input {
  font: inherit;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--edge);
  background: var(--bg);
  color: var(--ink);
}
.seed-input:focus-visible,
.name-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.seed-input {
  width: 78px;
  text-align: center;
}

.seed-input-sm {
  width: 84px;
}

.copied-badge {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}
.copied-badge[hidden] {
  display: none;
}

.hint {
  margin: 16px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}

#board {
  position: relative;
  width: 100%;
  margin: 14px auto 0;
  user-select: none;
  -webkit-user-select: none;
  min-height: 200px;
}

.slot {
  font-family: var(--font-card);
  font-size-adjust: none;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cw);
  height: var(--ch);
  border-radius: calc(var(--cw) * 0.1);
  border: 2px dashed var(--slot-line);
  display: grid;
  place-items: center;
  color: var(--slot-ink);
  font-size: calc(var(--cw) * 0.32);
  font-weight: 600;
}
.slot[data-pile=stock] {
  cursor: pointer;
}

.card {
  font-family: var(--font-card);
  font-size-adjust: none;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cw);
  height: var(--ch);
  perspective: 900px;
  touch-action: none;
  cursor: grab;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1) var(--delay, 0s);
  will-change: transform;
}
.card:not(.up) {
  cursor: pointer;
}

.flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.3, 0.7, 0.3, 1.2) var(--delay, 0s);
}
.card:not(.up) .flip {
  transform: rotateY(180deg);
}

.face,
.back {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cw) * 0.1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) .face,
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) .back {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme=dark] .face, :root:has(> head > meta[name=color-scheme][content=dark]) .face,
:root[data-theme=dark] .back,
:root:has(> head > meta[name=color-scheme][content=dark]) .back {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.face {
  background: radial-gradient(circle, rgba(120, 90, 160, 0.07) 1px, transparent 1.6px) 0 0/9px 9px, linear-gradient(170deg, #fffdf8 0%, #fff1e4 100%);
}

.back {
  transform: rotateY(180deg);
  background: #1a1530 url(/images/cards-jacket.jpg) center/cover;
}
.back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: calc(var(--cw) * 0.045) solid #fff6ea;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.92;
  font-weight: 600;
  font-size: calc(var(--cw) * 0.21);
  color: var(--c);
}
.corner span {
  font-size: 0.78em;
}
.corner.tl {
  top: 5%;
  left: 7%;
}
.corner.br {
  bottom: 5%;
  right: 7%;
  transform: rotate(180deg);
}

.card .buddy {
  --s: calc(var(--cw) * 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  margin: calc(var(--s) * -0.5) 0 0 calc(var(--s) * -0.5);
}
.card .buddy.ace {
  --s: calc(var(--cw) * 0.58);
}

.card.num .buddy {
  top: 44%;
}

.dots {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 9%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--cw) * 0.028);
}
.dots i {
  width: calc(var(--cw) * 0.055);
  height: calc(var(--cw) * 0.055);
  border-radius: 50%;
  background: var(--c);
  opacity: 0.6;
}

#board.small .corner.br,
#board.small .dots {
  display: none;
}
#board.small .corner {
  font-size: calc(var(--cw) * 0.3);
}
#board.small .corner.tl {
  top: 4%;
  left: 8%;
}
#board.small .card .buddy {
  --s: calc(var(--cw) * 0.58);
  top: 62%;
}

.s-h {
  --c: #ff4f86;
  --blush: #ffc2d6;
}

.s-d {
  --c: #ff7a4f;
  --blush: #ffd9c4;
}

.s-c {
  --c: #22606f;
  --blush: #ff8fb4;
}

.s-s {
  --c: #34306e;
  --blush: #ff8fb4;
}

.buddy {
  --fy: 34%;
  position: relative;
  width: var(--s);
  height: var(--s);
  animation: bob 2.6s ease-in-out var(--d, 0s) infinite alternate;
}

.buddy .body {
  position: absolute;
  inset: 0;
}
.buddy .body i {
  position: absolute;
  display: block;
}

.s-h .buddy {
  --fy: 30%;
}
.s-h .buddy .body {
  animation: beat 1.5s ease-in-out var(--d, 0s) infinite;
}
.s-h .buddy .p1 {
  inset: 4% 0 0 0;
}
.s-h .buddy .p1::before, .s-h .buddy .p1::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52%;
  height: 80%;
  background: var(--c);
  border-radius: 999px 999px 0 0;
}
.s-h .buddy .p1::before {
  left: 50%;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.s-h .buddy .p1::after {
  left: -2%;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.s-d .buddy {
  --fy: 38%;
}
.s-d .buddy .p1 {
  left: 50%;
  top: 50%;
  width: 64%;
  height: 64%;
  background: var(--c);
  border-radius: 20%;
  transform: translate(-50%, -50%) scaleY(1.2) rotate(45deg);
}

.s-s .buddy {
  --fy: 42%;
}
.s-s .buddy .p1 {
  inset: 0 0 18% 0;
  transform: rotate(180deg);
}
.s-s .buddy .p1::before, .s-s .buddy .p1::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52%;
  height: 80%;
  background: var(--c);
  border-radius: 999px 999px 0 0;
}
.s-s .buddy .p1::before {
  left: 50%;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.s-s .buddy .p1::after {
  left: -2%;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
.s-s .buddy .stem {
  left: 50%;
  bottom: 0;
  width: 30%;
  height: 30%;
  background: var(--c);
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.s-c .buddy {
  --fy: 44%;
}
.s-c .buddy .p1, .s-c .buddy .p2, .s-c .buddy .p3 {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: var(--c);
}
.s-c .buddy .p1 {
  left: 25%;
  top: 0;
}
.s-c .buddy .p2 {
  left: 1%;
  top: 34%;
}
.s-c .buddy .p3 {
  left: 49%;
  top: 34%;
}
.s-c .buddy .stem {
  left: 50%;
  bottom: 0;
  width: 30%;
  height: 50%;
  background: var(--c);
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.eyes {
  position: absolute;
  left: 50%;
  top: var(--fy);
  width: 46%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
.eyes i {
  position: relative;
  width: calc(var(--s) * 0.17);
  height: calc(var(--s) * 0.17);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fffbe0 0 30%, var(--eye-ring) 32%);
  box-shadow: 0 0 0 calc(var(--s) * 0.012) rgba(0, 0, 0, 0.15);
  animation: blink 4.6s ease-in-out var(--d, 0s) infinite;
}
.eyes i::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 46%;
  left: 27%;
  top: 27%;
  border-radius: 50%;
  background: var(--pupil);
  animation: look 6s ease-in-out var(--d, 0s) infinite;
}

.cheeks {
  position: absolute;
  left: 50%;
  top: calc(var(--fy) + var(--s) * 0.17);
  width: 70%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
.cheeks i {
  width: calc(var(--s) * 0.13);
  height: calc(var(--s) * 0.07);
  border-radius: 50%;
  background: var(--blush);
  opacity: 0.75;
}

.mouth {
  position: absolute;
  left: 50%;
  top: calc(var(--fy) + var(--s) * 0.17);
  width: calc(var(--s) * 0.13);
  height: calc(var(--s) * 0.07);
  transform: translateX(-50%);
  border: calc(var(--s) * 0.028) solid #2a1328;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.mood-1 .mouth {
  width: calc(var(--s) * 0.18);
  border: 0;
}
.mood-1 .mouth::before, .mood-1 .mouth::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border: calc(var(--s) * 0.026) solid #2a1328;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}
.mood-1 .mouth::before {
  left: 0;
}
.mood-1 .mouth::after {
  right: 0;
}

.mood-2 .mouth {
  width: calc(var(--s) * 0.08);
  height: calc(var(--s) * 0.1);
  border: 0;
  border-radius: 50%;
  background: #2a1328;
}
.mood-2 .mouth::before, .mood-2 .mouth::after {
  display: none;
}

.hat {
  position: absolute;
  left: 50%;
  top: calc(var(--s) * -0.2);
  width: 0;
  height: 0;
}
.hat::before, .hat::after {
  content: "";
  position: absolute;
  display: none;
}

.king .hat::before {
  display: block;
  width: calc(var(--s) * 0.5);
  height: calc(var(--s) * 0.27);
  left: calc(var(--s) * -0.25);
  top: 0;
  background: linear-gradient(#ffe27a, var(--gold));
  clip-path: polygon(0 100%, 0 18%, 25% 58%, 50% 0, 75% 58%, 100% 18%, 100% 100%);
  animation: tilt 3s ease-in-out var(--d, 0s) infinite alternate;
}

.king .hat::after {
  display: block;
  width: calc(var(--s) * 0.08);
  height: calc(var(--s) * 0.08);
  left: calc(var(--s) * -0.04);
  top: calc(var(--s) * 0.15);
  border-radius: 50%;
  background: #ff4f86;
}

.queen .hat::before {
  display: block;
  width: calc(var(--s) * 0.44);
  height: calc(var(--s) * 0.22);
  left: calc(var(--s) * -0.22);
  top: calc(var(--s) * 0.04);
  background: var(--mint);
  clip-path: polygon(0 0, 50% 38%, 100% 0, 100% 100%, 50% 62%, 0 100%);
  animation: flutter 1.8s ease-in-out var(--d, 0s) infinite alternate;
}

.queen .hat::after {
  display: block;
  width: calc(var(--s) * 0.1);
  height: calc(var(--s) * 0.1);
  left: calc(var(--s) * -0.05);
  top: calc(var(--s) * 0.1);
  border-radius: 50%;
  background: #5fd9b6;
}

.jack .hat::before {
  display: block;
  width: calc(var(--s) * 0.26);
  height: calc(var(--s) * 0.32);
  left: calc(var(--s) * -0.13);
  top: calc(var(--s) * -0.06);
  background: repeating-linear-gradient(135deg, var(--gold) 0 calc(var(--s) * 0.05), #8a7bff calc(var(--s) * 0.05) calc(var(--s) * 0.1));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
  animation: tilt 2.2s ease-in-out var(--d, 0s) infinite alternate;
}

.jack .hat::after {
  display: block;
  width: calc(var(--s) * 0.1);
  height: calc(var(--s) * 0.1);
  left: calc(var(--s) * -0.05);
  top: calc(var(--s) * -0.12);
  border-radius: 50%;
  background: #ff8fb4;
  animation: tilt 2.2s ease-in-out var(--d, 0s) infinite alternate;
}

.ace .hat {
  top: 0;
}
.ace .hat::before, .ace .hat::after {
  display: block;
  width: calc(var(--s) * 0.22);
  height: calc(var(--s) * 0.22);
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle 1.6s ease-in-out var(--d, 0s) infinite;
}
.ace .hat::before {
  left: calc(var(--s) * -0.62);
  top: calc(var(--s) * -0.08);
}
.ace .hat::after {
  left: calc(var(--s) * 0.36);
  top: calc(var(--s) * 0.5);
  animation-delay: calc(var(--d, 0s) - 0.8s);
}

@keyframes bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--s) * -0.06));
  }
}
@keyframes beat {
  0%, 60%, 100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.07);
  }
  30% {
    transform: scale(1.02);
  }
  45% {
    transform: scale(1.06);
  }
}
@keyframes blink {
  0%, 90%, 100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.1);
  }
}
@keyframes look {
  0%, 30% {
    transform: translate(0, 0);
  }
  40%, 55% {
    transform: translate(-22%, 8%);
  }
  65%, 85% {
    transform: translate(24%, -6%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes tilt {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(8deg);
  }
}
@keyframes flutter {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0.82);
  }
}
@keyframes sparkle {
  0%, 100% {
    transform: scale(0.4) rotate(0);
    opacity: 0.4;
  }
  50% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}
@keyframes wiggle {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}
@keyframes yay {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-22%) scale(1.08);
  }
  70% {
    transform: translateY(2%) scale(0.98);
  }
  100% {
    transform: none;
  }
}
@keyframes nope {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-6%);
  }
  40%, 80% {
    transform: translateX(6%);
  }
}
@keyframes dance {
  from {
    transform: rotate(-10deg) translateY(0);
  }
  to {
    transform: rotate(10deg) translateY(-12%);
  }
}
.card:not(.lively) .face *,
.card:not(.lively) .face *::before,
.card:not(.lively) .face *::after {
  animation: none !important;
}

@media (hover: hover) {
  .card.up:hover .buddy {
    animation: wiggle 0.6s ease-in-out;
  }
}
.card.dragging {
  cursor: grabbing;
  transition: none;
}
.card.dragging .flip {
  transform: rotate(var(--tilt, 0deg)) scale(1.05);
  transition: transform 0.12s;
}
.card.dragging .face {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.card.dragging .mouth {
  width: calc(var(--s) * 0.08);
  height: calc(var(--s) * 0.1);
  border: 0;
  border-radius: 50%;
  background: #2a1328;
}
.card.dragging .mouth::before, .card.dragging .mouth::after {
  display: none;
}

.card.yay .flip {
  animation: yay 0.55s ease-out;
}

.card.nope .flip {
  animation: nope 0.4s ease-in-out;
}

.card.party {
  transition: transform 1.3s cubic-bezier(0.25, 1.4, 0.45, 1) var(--delay, 0s);
}
.card.party .flip {
  animation: dance 0.7s ease-in-out var(--d, 0s) 10 alternate;
}

#board.no-anim .card,
#board.no-anim .flip {
  transition: none !important;
}

dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(8, 8, 18, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (pointer: coarse) {
  dialog::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.game-dialog {
  font-family: var(--font-game);
  font-size-adjust: from-font;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  max-width: min(94vw, 460px);
  width: 100%;
}
.game-dialog.lb-dialog {
  max-width: min(94vw, 660px);
}

.dialog-card {
  width: 100%;
  text-align: center;
  padding: 24px 20px 20px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}
.dialog-card h2 {
  margin: 12px 0 6px;
  font-size: 24px;
  font-weight: 600;
}

.dialog-card-wide {
  text-align: left;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dialog-head h2 {
  margin: 0;
  font-size: 22px;
}

.party-row {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.party-row > span {
  --s: 48px;
  animation: dance 0.6s ease-in-out infinite alternate;
}
.party-row > span:nth-child(2) {
  animation-delay: -0.15s;
}
.party-row > span:nth-child(3) {
  animation-delay: -0.3s;
}
.party-row > span:nth-child(4) {
  animation-delay: -0.45s;
}
.party-row .buddy {
  --s: 48px;
}

.win-summary {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.lb-submit-form {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  text-align: left;
}

.lb-submit-label {
  display: block;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 8px;
}

.lb-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  gap: 8px;
}
.lb-submit-row .name-input {
  flex: 1 1 116px;
  min-inline-size: 0;
  height: 36px;
  font-size: 16px;
}
.lb-submit-row .btn {
  flex: 0 0 auto;
  margin-inline-start: auto;
  max-inline-size: 100%;
  white-space: nowrap;
}

.lb-feedback {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--accent);
  min-height: 18px;
}
.lb-feedback.is-error {
  color: #e54865;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  justify-content: center;
  gap: 8px;
}
.dialog-actions form {
  margin: 0;
}

.lb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.lb-seed-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  max-block-size: min(420px, 60vh);
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.table-wrapper:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.lb-table thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--surface);
}
.lb-table th,
.lb-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.lb-table thead th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.lb-table tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bg);
}
.lb-table tbody tr:last-child td,
.lb-table tbody tr:last-child th {
  border-bottom: 0;
}
.lb-table tbody tr.is-mine {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-weight: 600;
}
.lb-table tbody tr.is-mine th {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
}
.lb-table .col-name {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-table .col-z {
  color: var(--muted);
  font-weight: 600;
}
.lb-table .col-z a {
  color: inherit;
  text-decoration: none;
}
.lb-table .col-z.is-high {
  color: var(--accent);
}
.lb-table tbody .col-z:not(.is-high):not(.is-down) {
  color: inherit;
}
.lb-table .seed-play-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}
.lb-table .seed-play-btn:hover {
  background: var(--surface-hover);
}

@container (width < 480px) {
  .lb-table {
    font-size: 12.5px;
  }
  .lb-table th:nth-child(8),
  .lb-table td:nth-child(8) {
    display: none;
  }
  .lb-table th,
  .lb-table td {
    padding: 7px 6px;
  }
}
.lb-empty {
  margin: 0;
  padding: 26px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.lb-empty[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .game-header {
    padding: 5px 10px;
  }
  .game-brand-svg {
    height: 17px;
  }
  .game-header-title {
    font-size: 15px;
  }
  .stats {
    width: 100%;
    justify-content: center;
    margin: 2px 0 0;
  }
}
html.anim-off .buddy, html.anim-off .buddy *, html.anim-off .buddy *::before, html.anim-off .buddy *::after, html.anim-off .sky::before, html.anim-off .sky::after, html.anim-off .party-row > span, html.anim-off .finish,
html.anim-off .needs-redeal, html.anim-off .card.party .flip {
  animation: none !important;
}

html.paused *,
html.paused *::before,
html.paused *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .buddy, .buddy *, .buddy *::before, .buddy *::after, .sky::before, .sky::after, .party-row > span, .finish,
  .card.party .flip, .card.yay .flip, .card.nope .flip {
    animation: none !important;
  }
  .card, .flip {
    transition-duration: 0.01s !important;
  }
}
:root {
  --bg-light: #eef3ed;
  --bg-dark: #040b09;
  --surface-light: #ffffff;
  --surface-dark: #0d1f1a;
  --surface-hover-light: #e2ebe0;
  --surface-hover-dark: #153028;
  --ink-light: #16241e;
  --ink-dark: #e8f8f1;
  --muted-light: #52695e;
  --muted-dark: #88ab9c;
  --line-light: rgba(22, 36, 30, 0.11);
  --line-dark: rgba(164, 245, 208, 0.1);
  --slot-line-light: rgba(22, 60, 44, 0.2);
  --slot-line-dark: rgba(164, 245, 208, 0.14);
  --slot-ink-light: rgba(22, 60, 44, 0.18);
  --slot-ink-dark: rgba(164, 245, 208, 0.14);
  --edge-light: #c8d6c7;
  --edge-dark: #1f4639;
  --accent-light: #177956;
  --accent-dark: #74efb9;
  --primary-bg-light: #164b39;
  --primary-bg-dark: #1b5c46;
  --primary-ink-light: #ffffff;
  --primary-ink-dark: #f0fff8;
  --primary-edge-light: #164b39;
  --primary-edge-dark: #2f8b6b;
}

body {
  background: radial-gradient(1100px 620px at 50% -15%, rgba(255, 255, 255, 0.72) 0%, transparent 65%), var(--bg);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not(:has(> head > meta[name=color-scheme][content=light])) body {
    background: radial-gradient(1100px 620px at 50% -15%, #0f2f25 0%, transparent 65%), radial-gradient(750px 520px at 100% 110%, #091d24 0%, transparent 60%), var(--bg);
  }
}
:root[data-theme=dark] body, :root:has(> head > meta[name=color-scheme][content=dark]) body {
  background: radial-gradient(1100px 620px at 50% -15%, #0f2f25 0%, transparent 65%), radial-gradient(750px 520px at 100% 110%, #091d24 0%, transparent 60%), var(--bg);
}

.clover-wrap {
  max-width: 980px;
}

.btn-redeal {
  font-variant-numeric: tabular-nums;
}
.btn-redeal.needs-redeal:not(:disabled) {
  background: var(--primary-bg);
  color: var(--primary-ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: pulse 1.3s ease-in-out infinite;
}

.status-banner {
  margin: 10px auto 0;
  max-width: 680px;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--edge));
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
  text-align: center;
}
.status-banner[hidden] {
  display: none;
}

.slot.fan-slot {
  border-style: dotted;
  border-width: 1.5px;
  opacity: 0.55;
  font-size: calc(var(--cw) * 0.24);
  pointer-events: none;
}
.slot.fan-slot.is-empty {
  opacity: 0.35;
}

.card.drop-hint .face,
.slot.drop-hint {
  box-shadow: 0 0 0 2.5px var(--accent), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.card[hidden],
.slot[hidden] {
  display: none !important;
}

.card.fan-buried {
  cursor: default;
}

.rules-dialog {
  max-width: min(94vw, 560px);
}

.rules-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rules-block {
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.rules-block.is-current {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.rules-block h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.rules-block p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--muted);
}

.lb-mode-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}