/* ---------- Fonts: self-hosted Inter (variable) + metric-matched fallback so text never shifts ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- Design tokens (match the live dice.now palette) ---------- */
:root {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --purple: #7c3aed;
  --amber: #f59e0b;
  --amber-100: #fef3c7;
  --green: #16a34a;
  --green-100: #dcfce7;
  --red: #dc2626;
  --red-100: #fee2e2;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --bg: #fafafa;
  --surface: #ffffff;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
button { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.75em; color: var(--gray-800); }
p { margin: 0 0 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; background: var(--blue); color: #fff;
  padding: 0.5rem 1rem; border-radius: 8px; z-index: 2000; font-weight: 600;
}
.skip-link:focus { top: 0.5rem; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- Header ---------- */
.navbar { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: sticky; top: 0; z-index: 1000; }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; height: 64px; }
.nav-brand { display: flex; align-items: center; gap: .75rem; }
.logo { flex-shrink: 0; }
.brand-name { font-size: 1.5rem; font-weight: 700; color: var(--blue); text-decoration: none; }
.nav-menu { display: flex; align-items: center; gap: 2rem; }
.nav-link { color: var(--gray-600); text-decoration: none; font-weight: 500; padding: .5rem 0; background: none; border: none; cursor: pointer; font-size: 1rem; }
.nav-link:hover { color: var(--blue); }
.dropdown { position: static; }
.nav-container { position: relative; }
.dropdown-toggle::after { content: "▼"; margin-left: .5rem; font-size: .7rem; display: inline-block; transition: transform .2s; }
.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.dropdown-content {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; width: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 0 0 12px 12px; padding: .9rem 1rem 1rem;
  column-count: 4; column-gap: 1.25rem; max-height: calc(100vh - 80px); overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.mega-group { break-inside: avoid; margin-bottom: .6rem; }
.dropdown-content .menu-all { column-span: all; }
.mega-group summary { list-style: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); font-weight: 700; padding: .35rem .75rem .2rem; cursor: default; display: flex; justify-content: space-between; }
.mega-group summary::-webkit-details-marker { display: none; }
.mega-count { color: var(--gray-400); font-weight: 500; }
.mega-links { display: flex; flex-direction: column; }
.dropdown-content.active { opacity: 1; visibility: visible; }
.dropdown-content a { display: block; padding: .45rem .75rem; color: var(--gray-600); text-decoration: none; font-size: .9rem; border-radius: 8px; white-space: nowrap; }
.dropdown-content .menu-all { grid-column: 1 / -1; font-weight: 600; color: var(--blue); border-top: 1px solid var(--gray-100); margin-top: .25rem; padding-top: .6rem; text-align: center; }
.dropdown-content a:hover, .dropdown-content a[aria-current="page"] { background: var(--gray-100); color: var(--blue); }
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 4px; padding: 6px; background: none; border: 0; }
.hamburger span { width: 25px; height: 3px; background: var(--gray-600); transition: .3s; border-radius: 2px; display: block; }
.hamburger.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--gray-800); color: var(--gray-200); margin-top: auto; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1rem 1rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-section h3 { color: var(--blue); font-size: 1.5rem; margin-bottom: .75rem; }
.footer-section h4 { margin-bottom: 1rem; color: #f9fafb; font-weight: 600; }
.footer-section p { color: var(--gray-400); font-size: .875rem; }
.footer-section a { display: block; color: var(--gray-400); text-decoration: none; margin-bottom: .5rem; font-size: .875rem; }
.footer-section a:hover { color: #fff; }
.footer-section address { font-style: normal; color: var(--gray-400); font-size: .875rem; line-height: 1.7; }
.coming-soon { display: block; color: var(--gray-500); font-size: .75rem; font-style: italic; margin-top: .5rem; }
.footer-bottom { border-top: 1px solid var(--gray-700); padding-top: 1rem; text-align: center; color: var(--gray-400); font-size: .875rem; }
.footer-bottom p { margin: 0; }

/* ---------- Page scaffolding ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.container--narrow { max-width: 900px; }
.hero-section {
  text-align: center; margin-bottom: 2.5rem; padding: 3rem 2rem;
  background: linear-gradient(135deg, #eff6ff, #f0f9ff, #fef3c7);
  border-radius: 24px; position: relative; overflow: hidden;
}
.hero-section::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite; pointer-events: none;
}
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .hero-section::before { animation: none; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
.hero-section > * { position: relative; z-index: 1; }
.hero-section h1 {
  font-size: 3.25rem; font-weight: 800; margin-bottom: 1rem;
  background: linear-gradient(135deg, #1f2937, #2563eb, #7c3aed);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-section p { font-size: 1.2rem; color: var(--gray-600); max-width: 760px; margin: 0 auto 1.25rem; line-height: 1.7; }
.hero-section p a { color: var(--blue); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; }
.hero-section p a:hover { border-bottom-color: var(--blue-dark); }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .9rem; color: var(--gray-600); }
.hero-meta li { background: rgba(255,255,255,.7); border-radius: 999px; padding: .3rem .9rem; }
.hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: 10px; border: none; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s; font-size: 1rem; text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 6px -1px rgba(37,99,235,.3); }
.btn-primary:hover:not(:disabled) { background: var(--blue-dark); }
.btn-secondary { background: var(--gray-500); color: #fff; }
.btn-secondary:hover:not(:disabled) { background: var(--gray-600); }
.btn-outline { background: #fff; color: var(--blue); border: 2px solid var(--blue-200); }
.btn-outline:hover:not(:disabled) { border-color: var(--blue); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803d; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; }
.btn-lg { font-size: 1.125rem; padding: 1rem 2rem; }
.btn-sm { font-size: .875rem; padding: .5rem 1rem; }
.btn:disabled { background: var(--gray-400); color: #fff; cursor: not-allowed; box-shadow: none; border-color: transparent; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.5); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Game shell ---------- */
.game-shell { max-width: 1000px; margin: 0 auto 3rem; scroll-margin-top: 80px; }
#game-root { min-height: 620px; }
.game-loading { min-height: 620px; justify-content: center; }
.game-board { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.game-board--single { grid-template-columns: 1fr; }
.game-status { grid-column: 1 / -1; display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem 3rem; padding: 1.25rem 1.5rem; background: #f8fafc; border-radius: 12px; }
.status-item { text-align: center; min-width: 90px; }
.status-item h3, .status-item .status-label { font-size: .85rem; color: var(--gray-500); margin-bottom: .35rem; font-weight: 500; }
.status-item span, .status-item .status-value { font-size: 1.5rem; font-weight: 700; color: var(--blue); }
.panel { background: var(--surface); padding: 1.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.panel h2 { margin-bottom: 1.25rem; color: var(--gray-800); text-align: center; font-size: 1.4rem; }
.panel h3 { font-size: 1.05rem; margin-bottom: .75rem; color: var(--gray-700); border-bottom: 2px solid var(--gray-200); padding-bottom: .5rem; }
.panel--wide { grid-column: 1 / -1; }
.dice-area { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; min-height: 64px; }
.dice-controls { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.die {
  width: 60px; height: 60px; background: #fff; border: 2px solid var(--gray-200); border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; position: relative; transition: border-color .2s, background .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.1); padding: 0; cursor: default; font-family: inherit;
}
.die--selectable { cursor: pointer; }
.die--selectable:hover { border-color: var(--blue); }
.die--held, .die[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-50); box-shadow: 0 0 0 3px var(--blue-100), 0 2px 4px rgba(0,0,0,.1); }
.die--scoring { border-color: var(--green); background: var(--green-100); }
.die--bad { border-color: var(--red); background: var(--red-100); }
.die--rolling { animation: shake .5s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) translateY(-4px); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg) translateY(-2px); }
}
.die svg { width: 100%; height: 100%; }
.die-face { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.die--sm { width: 40px; height: 40px; border-radius: 8px; }
.die--sm .die-face { font-size: 1.1rem; }
.die--lg { width: 72px; height: 72px; }
.die--green { background: #dcfce7; border-color: #86efac; }
.die--yellow { background: #fef9c3; border-color: #fde047; }
.die--red { background: #fee2e2; border-color: #fca5a5; }
.die--black { background: #1f2937; border-color: #111827; color: #fff; }
.die--black .die-face { color: #fff; }
.die-label { font-size: .7rem; color: var(--gray-500); text-align: center; margin-top: .25rem; }
.game-message { min-height: 1.6em; text-align: center; font-weight: 600; color: var(--gray-700); margin: 0 0 1rem; }
.game-message--good { color: var(--green); }
.game-message--bad { color: var(--red); }
.game-message--info { color: var(--blue); }
.game-log { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow-y: auto; font-size: .9rem; color: var(--gray-600); }
.game-log li { padding: .4rem .5rem; border-bottom: 1px solid var(--gray-100); }
.game-log li:first-child { color: var(--gray-800); font-weight: 500; }
.game-hint { font-size: .85rem; color: var(--gray-500); text-align: center; margin-top: .5rem; }
.game-overlay {
  position: absolute; inset: 0; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 1rem; border-radius: var(--radius-lg); z-index: 5; padding: 1.5rem; text-align: center;
}
.game-overlay h3 { font-size: 1.6rem; border: 0; }
.game-shell .panel { position: relative; }

/* Score card (Yahtzee & friends) */
.score-sections { display: flex; flex-direction: column; gap: 1.5rem; }
.score-rows { display: flex; flex-direction: column; gap: .4rem; }
.score-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem .75rem; border-radius: 8px; transition: background .2s; width: 100%; background: transparent; border: 1px solid transparent; font: inherit; color: inherit; text-align: left; }
.score-row.possible { background: var(--blue-50); border-color: var(--blue-200); cursor: pointer; }
.score-row.possible:hover, .score-row.possible:focus-visible { background: var(--blue-100); }
.score-row.used { color: var(--gray-500); }
.score-row.bonus-row, .score-row.total-row { background: var(--gray-100); font-weight: 600; }
.score-row.total-row { border-top: 2px solid var(--gray-300); margin-top: .35rem; }
.score-row.grand-total { background: var(--blue); color: #fff; font-size: 1.1rem; }
.score-row.grand-total .score-cell { color: #fff; }
.score-cell { min-width: 44px; text-align: center; font-weight: 600; color: var(--gray-800); }
.score-row.possible .score-cell { color: var(--blue); }

/* Loading skeleton while the game module loads */
.game-loading { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 1rem; color: var(--gray-500); }
.game-loading .spinner { width: 40px; height: 40px; border: 4px solid var(--gray-200); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.game-error { text-align: center; padding: 2rem; color: var(--red); }

/* Generic tables inside games */
.game-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.game-table th, .game-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--gray-200); text-align: left; }
.game-table th { color: var(--gray-500); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.chip { padding: .45rem .9rem; border-radius: 999px; border: 2px solid var(--gray-200); background: #fff; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--gray-700); transition: all .15s; }
.chip:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.chip.active, .chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.bar { height: 10px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--blue); transition: width .3s; }
.bar--danger > span { background: var(--red); }
.bar--good > span { background: var(--green); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.card-lite { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 1rem; }
.card-lite.selected { border-color: var(--blue); background: var(--blue-50); }
.card-lite.done { border-color: var(--green); background: var(--green-100); }
.select, .input, .textarea {
  width: 100%; padding: .7rem .9rem; border: 2px solid var(--gray-200); border-radius: 8px; font: inherit; background: #fff; color: var(--gray-800);
}
.select:focus, .input:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }

/* ---------- Content sections ---------- */
.content-section {
  margin: 3rem 0; padding: 3rem 0; background: linear-gradient(135deg, #fff, #f8fafc); border-radius: 32px;
  box-shadow: var(--shadow-lg); position: relative;
}
.content-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f59e0b); border-radius: 32px 32px 0 0;
}
.section-content { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-header h2 { font-size: 2.25rem; font-weight: 800; color: var(--gray-800); margin-bottom: .5rem; }
.section-subtitle { color: var(--gray-500); font-size: 1.1rem; }
.header-decoration { font-size: 2rem; margin-bottom: .5rem; }

.prose { color: var(--gray-700); font-size: 1.05rem; line-height: 1.8; }
.prose h2 { font-size: 1.85rem; font-weight: 700; margin: 2.5rem 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gray-200); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.3rem; font-weight: 600; margin: 2rem 0 .75rem; color: var(--gray-800); }
.prose h4 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.prose p { margin-bottom: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--blue); }
.prose a { color: var(--blue); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--blue-200); }
.prose a:hover { border-bottom-color: var(--blue); }
.prose strong { color: var(--gray-800); }
.prose blockquote { border-left: 4px solid var(--blue); background: var(--blue-50); margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; color: var(--gray-700); }
.prose blockquote p:last-child { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.prose th { background: var(--gray-800); color: #fff; text-align: left; padding: .75rem 1rem; font-weight: 600; }
.prose td { padding: .7rem 1rem; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.prose tr:nth-child(even) td { background: var(--gray-50); }
.prose .table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.prose .table-wrap table { margin: 0; }
.prose code { background: var(--gray-100); padding: .1em .4em; border-radius: 4px; font-size: .9em; }
.prose hr { border: 0; border-top: 2px solid var(--gray-200); margin: 2.5rem 0; }
.prose img { border-radius: 12px; margin: 1.5rem auto; }
.prose .callout { background: var(--amber-100); border-left: 4px solid var(--amber); padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; margin: 1.5rem 0; }

.toc { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: .75rem; border: 0; padding: 0; }
.toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.25rem; font-size: .95rem; }
.toc li { margin-bottom: .35rem; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--blue); }

.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 0; }
.faq-item summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--gray-800); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--blue); flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-answer { padding: 0 1.25rem 1.25rem; color: var(--gray-600); line-height: 1.7; }
.faq-item .faq-answer p:last-child { margin: 0; }

.quick-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.quick-facts li { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 1rem; text-align: center; }
.quick-facts .qf-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: .25rem; }
.quick-facts .qf-value { font-weight: 700; color: var(--gray-800); }

/* Related games */
.related-games { margin: 3rem 0; text-align: center; }
.related-games h2 { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.related-games > .section-content > p { color: var(--gray-500); margin-bottom: 2rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.related-card { background: #fff; padding: 0 0 1.5rem; border-radius: 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: border-color .2s; display: block; overflow: hidden; border: 1px solid var(--gray-200); }
.related-card:hover { border-color: var(--blue); }
.related-card img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.related-card h3 { color: var(--blue); margin: 1.25rem 1.25rem .5rem; font-size: 1.25rem; }
.related-card p { color: var(--gray-500); font-size: .95rem; margin: 0 1.25rem; }
.related-card .card-meta { display: flex; gap: .75rem; justify-content: center; margin: .75rem 1.25rem 0; font-size: .8rem; color: var(--gray-500); flex-wrap: wrap; }
.all-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; text-align: left; }
.game-tile { display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 1rem; text-decoration: none; color: inherit; transition: border-color .2s; }
.game-tile:hover { border-color: var(--blue); }
.game-tile .tile-emoji { font-size: 1.75rem; line-height: 1; }
.game-tile strong { display: block; color: var(--blue); margin-bottom: .2rem; }
.game-tile span { font-size: .85rem; color: var(--gray-500); }

/* ---------- Static pages ---------- */
.page-hero { text-align: center; margin-bottom: 3rem; padding: 3rem 1rem; background: linear-gradient(135deg, #eff6ff, #f0f9ff); border-radius: 20px; }
.page-hero h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; }
.page-hero p { font-size: 1.25rem; color: var(--gray-500); max-width: 640px; margin: 0 auto; }
.content-sections { display: flex; flex-direction: column; gap: 2rem; }
.content-card { background: #fff; padding: 2.5rem; border-radius: 16px; box-shadow: var(--shadow); }
.content-card h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.25rem; }
.content-card h3 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.content-card p, .content-card li { font-size: 1.05rem; line-height: 1.75; color: var(--gray-600); }
.content-card ul { padding-left: 1.5rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.feature { text-align: center; padding: 1.5rem; border-radius: 12px; background: #f8fafc; }
.feature-icon { font-size: 2rem; margin-bottom: .75rem; }
.feature h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.feature p { font-size: .9rem; margin: 0; }
.last-updated { background: var(--gray-100); padding: .75rem 1rem; border-radius: 8px; font-size: .875rem; color: var(--gray-500); margin-bottom: 1.5rem; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-weight: 600; color: var(--gray-700); }
.form-group .hint { font-size: .85rem; color: var(--gray-500); }
.form-group.has-error .input, .form-group.has-error .select, .form-group.has-error .textarea { border-color: var(--red); background: #fff7f7; }
.form-error { color: var(--red); font-size: .875rem; display: none; }
.form-group.has-error .form-error { display: block; }
.form-status { padding: 1rem; border-radius: 10px; display: none; font-weight: 500; }
.form-status.is-error { display: block; background: var(--red-100); color: #991b1b; }
.form-status.is-success { display: block; background: var(--green-100); color: #166534; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.contact-item { background: #f8fafc; padding: 1.25rem; border-radius: 12px; }
.contact-item h3 { margin: 0 0 .4rem; font-size: 1rem; }
.contact-item p, .contact-item address { margin: 0; font-style: normal; color: var(--gray-600); font-size: .95rem; }

/* 404 */
.notfound { text-align: center; padding: 4rem 1rem; }
.notfound .big { font-size: 6rem; font-weight: 800; color: var(--blue); line-height: 1; margin: 0; }
.notfound .dice-row { display: flex; gap: 1rem; justify-content: center; margin: 2rem 0; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1500; background: var(--gray-800); color: var(--gray-100);
  border-radius: 16px; padding: 1.25rem 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,.3); display: none; gap: 1rem; align-items: center; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto;
}
.cookie-banner.is-visible { display: flex; }
.cookie-banner p { margin: 0; flex: 1 1 320px; font-size: .95rem; }
.cookie-banner a { color: #93c5fd; }
.cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cookie-actions .btn { padding: .6rem 1.1rem; font-size: .9rem; }
.cookie-banner .btn-outline { background: transparent; color: #fff; border-color: var(--gray-500); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { display: none; }
@media (max-width: 768px) {
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; background: #fff; border-top: 1px solid var(--gray-200);
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); gap: .75rem; align-items: center; box-shadow: 0 -6px 20px rgba(0,0,0,.08);
    transform: translateY(110%); transition: transform .25s;
  }
  .sticky-cta.is-visible { transform: translateY(0); }
  .sticky-cta .sticky-label { flex: 1; font-size: .9rem; font-weight: 600; color: var(--gray-700); }
  .sticky-cta .btn { white-space: nowrap; }
  body.has-game { padding-bottom: 72px; }
  .cookie-banner { bottom: 80px; left: .5rem; right: .5rem; padding: .85rem 1rem; gap: .6rem; }
  .cookie-banner p { font-size: .85rem; flex-basis: 100%; }
  .cookie-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1024px) {
  .hero-section h1 { font-size: 2.75rem; }
}
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-menu {
    position: fixed; left: -100%; top: 64px; flex-direction: column; background: #fff; width: 100%; text-align: center; transition: .3s;
    box-shadow: 0 10px 27px rgba(0,0,0,.05); padding: 1rem 0 2rem; align-items: stretch; gap: 0; max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-menu.active { left: 0; }
  .nav-link { padding: 1rem; border-bottom: 1px solid var(--gray-100); width: 100%; }
  .dropdown-content { position: static; box-shadow: none; background: var(--gray-50); width: 100%; max-width: none; max-height: none; column-count: 1; opacity: 1; visibility: visible; display: none; padding: .25rem .5rem .5rem; border-radius: 0; }
  .dropdown-content.active { display: block; }
  .mega-group { margin-bottom: 0; }
  .dropdown-content a { white-space: normal; text-align: left; font-size: .95rem; padding: .55rem .75rem; }
  /* On phones the TYPES are shown as a compact accordion so every type is visible without scrolling */
  .mega-group { border-bottom: 1px solid var(--gray-200); }
  .mega-group[open] summary { color: var(--blue); }
  .mega-group summary { font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--gray-800); padding: .7rem .5rem; cursor: pointer; }
  .mega-group summary::after { content: "+"; color: var(--blue); font-size: 1.1rem; }
  .mega-group[open] summary::after { content: "−"; }
  .mega-links { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: .4rem; }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .hero-section { padding: 2rem 1.25rem; margin-bottom: 1.5rem; }
  .hero-section h1 { font-size: 2.25rem; }
  .hero-section p { font-size: 1.05rem; }
  .game-board { grid-template-columns: 1fr; gap: 1.25rem; }
  #game-root, .game-loading { min-height: 900px; }
  .game-status { gap: 1rem 2rem; padding: 1rem; }
  .status-item span, .status-item .status-value { font-size: 1.25rem; }
  .panel { padding: 1.25rem; }
  .dice-area { gap: .6rem; }
  .die { width: 52px; height: 52px; }
  .die--lg { width: 60px; height: 60px; }
  .content-section { padding: 2rem 0; margin: 2rem 0; border-radius: 20px; }
  .section-content { padding: 0 1.25rem; }
  .section-header h2 { font-size: 1.75rem; }
  .prose { font-size: 1rem; }
  .prose h2 { font-size: 1.5rem; }
  .prose h3 { font-size: 1.2rem; }
  .toc ol { columns: 1; }
  .page-hero h1 { font-size: 2.25rem; }
  .content-card { padding: 1.75rem; }
  .container { padding: 1.25rem 1rem; }
}
@media (max-width: 480px) {
  .nav-container { padding: 0 .75rem; }
  .brand-name { font-size: 1.25rem; }
  .footer-content { grid-template-columns: 1fr; }
  .hero-section h1 { font-size: 1.9rem; }
  .game-status { flex-direction: row; gap: .75rem 1.25rem; }
  .status-item { min-width: 70px; }
  .dice-area { gap: .5rem; }
  .die { width: 46px; height: 46px; }
  .die--lg { width: 54px; height: 54px; }
  .dice-controls { flex-direction: column; align-items: stretch; }
  .dice-controls .btn { width: 100%; }
  .section-header h2 { font-size: 1.5rem; }
  .content-card { padding: 1.25rem; }
  .page-hero h1 { font-size: 1.9rem; }
  .notfound .big { font-size: 4rem; }
}

/* craps */
.craps-puck-row { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .5rem; }
.craps-puck { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--gray-800); background: #fff; color: var(--gray-800); font-weight: 800; font-size: .8rem; line-height: 1.1; text-align: center; flex-shrink: 0; }
.craps-puck.on { background: var(--gray-800); color: #fff; }
.craps-bets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.bet-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 100%; font: inherit; color: inherit; cursor: pointer; text-align: center; padding: .6rem .5rem; transition: border-color .15s, background .15s; }
.bet-btn:hover:not(:disabled) { border-color: var(--blue); }
.bet-btn:disabled { opacity: .45; cursor: not-allowed; }
.bet-btn .bet-name { font-weight: 600; font-size: .9rem; }
.bet-btn .bet-pay { font-size: .72rem; color: var(--gray-500); }
.bet-btn .bet-amt { font-weight: 700; color: var(--blue); font-size: 1.05rem; }
.roll-history { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; min-height: 40px; }

/* dice-poker */
.hand-name { text-align: center; font-weight: 700; margin: 0 0 1rem; }

/* ship-captain-crew */
.scc-checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; font-size: .9rem; text-align: center; }
.scc-checklist .card-lite { padding: .6rem .4rem; }
.scc-total th, .scc-total td { font-weight: 700; border-top: 2px solid var(--gray-300); }
@media (max-width: 480px) { .scc-checklist { font-size: .8rem; } .craps-bets { grid-template-columns: repeat(2, 1fr); } }

/* shut-the-box */
.stb-tiles { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.25rem; perspective: 600px; }
.stb-tile { width: 52px; height: 76px; border-radius: 8px; border: 2px solid #b45309; background: linear-gradient(180deg, #fde68a, #f59e0b); color: #78350f; font: inherit; font-size: 1.5rem; font-weight: 700; cursor: default; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform .35s, background .2s, border-color .2s, opacity .2s, box-shadow .2s; transform-style: preserve-3d; }
.stb-tile span { display: block; }
.stb-tile--usable { cursor: pointer; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }
.stb-tile--usable:hover, .stb-tile--usable:focus-visible {  }
.stb-tile--selected, .stb-tile[aria-pressed="true"] { background: linear-gradient(180deg, #bfdbfe, #60a5fa); color: #1e3a8a; border-color: var(--blue-dark); transform: translateY(-6px); }
.stb-tile--hint { outline: 3px dashed var(--green); outline-offset: 2px; }
.stb-tile--shut { transform: rotateX(180deg); background: #78350f; color: #fbbf24; border-color: #451a03; opacity: .85; }
.stb-tile--shut span { transform: rotateX(180deg); }
.stb-tile--dim { opacity: .45; }
@media (max-width: 480px) { .stb-tiles { gap: .3rem; } .stb-tile { width: 34px; height: 56px; font-size: 1.1rem; border-radius: 6px; } }

/* qwixx */
.die--blue { background: #dbeafe; border-color: #93c5fd; }
.qx-sheet { display: flex; flex-direction: column; gap: .4rem; }
.qx-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 8px; }
.qx-row--red { background: #fee2e2; }
.qx-row--yellow { background: #fef9c3; }
.qx-row--green { background: #dcfce7; }
.qx-row--blue { background: #dbeafe; }
.qx-cell {
  aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
  font: inherit; font-size: .8rem; font-weight: 700; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); background: #fff; color: var(--gray-700);
}
.qx-cell--marked { background: var(--gray-800); color: #fff; text-decoration: line-through; }
.qx-cell--dead { opacity: .35; }
.qx-cell--possible { border: 2px solid var(--blue); background: var(--blue-50); color: var(--blue); cursor: pointer; box-shadow: 0 0 0 2px var(--blue-100); }
.qx-cell--possible:hover, .qx-cell--possible:focus-visible { background: var(--blue-100); }
.qx-cell--lock { font-size: .7rem; }
.qx-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--gray-600); margin-top: .5rem; }
.qx-penalties { display: inline-flex; gap: 4px; vertical-align: middle; }
.qx-pen { width: 24px; height: 22px; border: 2px solid var(--red); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: var(--red); }
.qx-pen--hit { background: var(--red); color: #fff; }
@media (max-width: 480px) { .qx-cell { font-size: .7rem; border-radius: 4px; } .qx-cell--lock { font-size: .6rem; } .qx-row { gap: 2px; padding: 3px; } }

/* roll-for-it */
.rfi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.rfi-card { display: flex; flex-direction: column; gap: .6rem; align-items: center; text-align: center; }
.rfi-card-title { font-weight: 700; color: var(--gray-800); margin: 0; }
.rfi-card-title small { display: block; font-weight: 500; color: var(--gray-500); font-size: .8rem; }
.rfi-slots { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.rfi-slot--empty { opacity: .45; border-style: dashed; }
.rfi-row { display: flex; align-items: center; gap: .5rem; width: 100%; }
.rfi-row-label { flex: 0 0 4.5em; font-size: .75rem; font-weight: 600; color: var(--gray-500); text-align: right; }
.rfi-row .rfi-slots { justify-content: flex-start; flex: 1; min-width: 0; }
.rfi-legend { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; font-size: .8rem; color: var(--gray-500); margin-top: .75rem; }
.rfi-legend .die { vertical-align: middle; }
.rfi-pool { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* left-center-right */
.lcr-table { display: grid; grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: auto auto auto; gap: .6rem; align-items: center; justify-items: center; }
.lcr-seat { background: var(--gray-50); border: 2px solid var(--gray-200); border-radius: 12px; padding: .6rem .5rem; text-align: center; width: 100%; min-width: 0; transition: border-color .2s, background .2s; }
.lcr-seat--active { border-color: var(--blue); background: var(--blue-50); }
.lcr-seat--out { opacity: .6; }
.lcr-seat--winner { border-color: var(--green); background: var(--green-100); }
.lcr-seat-name { font-weight: 700; font-size: .9rem; color: var(--gray-800); }
.lcr-chips { display: flex; justify-content: center; gap: 3px; min-height: 18px; margin: .25rem 0; flex-wrap: wrap; }
.lcr-chip { width: 14px; height: 14px; border-radius: 50%; background: var(--amber); border: 2px solid #b45309; display: inline-block; }
.lcr-count { font-size: .8rem; color: var(--gray-500); }
.lcr-pot { grid-column: 2; grid-row: 2; background: var(--green-100); border: 2px solid var(--green); border-radius: 50%; width: 110px; height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lcr-pot strong { font-size: 1.6rem; color: var(--green); line-height: 1; }
.lcr-pot span { font-size: .75rem; color: var(--gray-600); }
.lcr-seat--top { grid-column: 2; grid-row: 1; }
.lcr-seat--left { grid-column: 1; grid-row: 2; }
.lcr-seat--right { grid-column: 3; grid-row: 2; }
.lcr-seat--bottom { grid-column: 2; grid-row: 3; }
@media (max-width: 480px) { .lcr-pot { width: 90px; height: 90px; } .lcr-seat-name { font-size: .8rem; } }

/* pig */
.pig-die .die--lg { width: 120px; height: 120px; border-radius: 18px; max-width: 100%; }

/* king-of-tokyo */
[hidden] { display: none !important; }

/* ---------- Articles / hubs ---------- */
.article-hero { text-align: left; padding: 2.5rem 2rem; }
.article-hero h1 { font-size: 2.6rem; }
.article-hero p { margin: 0 0 1rem; }
.article-meta { color: var(--gray-500); font-size: .9rem; }
.breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 1rem; font-size: .875rem; color: var(--gray-500); }
.breadcrumbs li + li::before { content: "›"; margin-right: .35rem; }
.breadcrumbs a { color: var(--blue); text-decoration: none; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.hub-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 1.25rem; text-decoration: none; color: inherit; display: block; transition: border-color .2s; }
.hub-card:hover { border-color: var(--blue); }
.hub-card h3 { color: var(--blue); margin: 0 0 .4rem; font-size: 1.15rem; }
.hub-card p { color: var(--gray-600); font-size: .95rem; margin: 0 0 .5rem; }
.hub-card .card-meta { font-size: .8rem; color: var(--gray-500); }
.hub-section { margin: 2.5rem 0; }
.hub-section h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.hub-section > p { color: var(--gray-500); margin-bottom: 1.25rem; }
.further-reading { background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: 14px; padding: 1.25rem 1.5rem; margin: 2rem 0; }
.further-reading h2 { font-size: 1.2rem; margin: 0 0 .75rem; border: 0; padding: 0; }
.further-reading ul { margin: 0; padding-left: 1.25rem; }
.further-reading li { margin-bottom: .4rem; }
.aka { font-size: .9rem; color: var(--gray-500); margin: -.5rem 0 1rem; }
.print-sheet { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 1rem; margin: 1.5rem 0; overflow-x: auto; }
.print-actions { text-align: right; margin-bottom: .75rem; }
table.sheet { border-collapse: collapse; width: 100%; font-size: .85rem; background: #fff; }
table.sheet th, table.sheet td { border: 1px solid #111; padding: .35rem .45rem; text-align: center; min-width: 2rem; height: 2rem; }
table.sheet th { background: #f3f4f6; font-weight: 600; }
table.sheet td.sheet-head, table.sheet th.sheet-head { text-align: left; }
table.sheet .sheet-lock { font-weight: 700; }
table.sheet .sheet-pen { width: 2rem; }
@media print {
  header, footer.site-footer, .cookie-banner, .sticky-cta, .print-actions, .article-hero, .further-reading, .toc, .related-games, .breadcrumbs, .faq, nav { display: none !important; }
  body { background: #fff; }
  .print-sheet { border: 0; padding: 0; margin: 0; overflow: visible; }
  .prose > *:not(.print-sheet) { display: none; }
  table.sheet { font-size: 11pt; page-break-inside: avoid; }
}
@media (max-width: 768px) { .article-hero h1 { font-size: 1.9rem; } .article-hero { padding: 1.75rem 1.25rem; } }

/* ---------- Floating game switcher ---------- */
.fab {
  position: fixed; right: 1rem; bottom: 1.25rem; z-index: 1450; width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue); color: #fff; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 20px rgba(37,99,235,.4); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, background .2s;
  display: flex; align-items: center; justify-content: center;
}
.fab.is-visible { opacity: 1; visibility: visible; }
.fab:hover { background: var(--blue-dark); }
@media (max-width: 768px) { .fab { bottom: calc(84px + env(safe-area-inset-bottom)); right: .75rem; width: 52px; height: 52px; } }
.switcher { position: fixed; inset: 0; z-index: 1600; }
.switcher-backdrop { position: absolute; inset: 0; background: rgba(17,24,39,.55); }
.switcher-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0;
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25);
}
@media (min-width: 769px) { .switcher-sheet { left: auto; right: 1.5rem; bottom: 1.5rem; width: 520px; max-height: 80vh; border-radius: 20px; } }
.switcher-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.switcher-head h2 { margin: 0; font-size: 1.2rem; }
.switcher-close { background: var(--gray-100); border: 0; width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; cursor: pointer; }
.switcher-sheet h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin: 1rem 0 .5rem; }
.switcher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.switcher-grid a { display: block; padding: .6rem .75rem; border: 1px solid var(--gray-200); border-radius: 10px; text-decoration: none; color: var(--gray-800); font-weight: 500; font-size: .95rem; }
.switcher-grid a:hover, .switcher-grid a[aria-current="page"] { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.switcher-foot { margin-top: 1rem; text-align: center; font-size: .9rem; }
body.switcher-open { overflow: hidden; }

/* balut */
.balut-row .score-cell { min-width: 34px; padding: 0 .1rem; }
.balut-row .score-cell.possible { color: var(--blue); }
.balut-row > span { flex: 1 1 auto; }
.game-table tr.selected td { background: var(--blue-50); color: var(--blue); font-weight: 700; }
@media (max-width: 480px) { .balut-row { padding: .5rem .35rem; font-size: .85rem; gap: .1rem; } .balut-row .score-cell { min-width: 26px; font-size: .8rem; } }

/* kismet */
.kismet-dice .die--black, .kismet-dice .die--red, .kismet-dice .die--green { background: #fff; border-color: var(--gray-200); color: inherit; }
.kismet-dice .die--black svg circle { fill: #111827; }
.kismet-dice .die--red svg circle { fill: #dc2626; }
.kismet-dice .die--green svg circle { fill: #16a34a; }
.kismet-dice .die--selectable:hover { border-color: var(--blue); }
.kismet-dice .die--held, .kismet-dice .die[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-50); }
.kismet-swatch { display: inline-block; width: .75em; height: .75em; border-radius: 50%; vertical-align: middle; margin-right: .3em; background: #111827; }
.kismet-swatch[data-color="red"] { background: #dc2626; }
.kismet-swatch[data-color="green"] { background: #16a34a; }

/* cee-lo */
.cl-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.cl-side { text-align: center; padding: .75rem .4rem; min-width: 0; transition: border-color .2s, background .2s; }
.cl-side--active { border-color: var(--blue); background: var(--blue-50); }
.cl-side-name { font-weight: 700; font-size: .9rem; color: var(--gray-800); margin-bottom: .5rem; }
.cl-side .dice-area { gap: .4rem; margin-bottom: .5rem; min-height: 52px; }
.cl-side .die--lg { width: 52px; height: 52px; }
.cl-result { font-size: .85rem; font-weight: 600; color: var(--gray-600); min-height: 1.4em; }
.cl-result--good { color: var(--green); }
.cl-result--bad { color: var(--red); }
@media (max-width: 480px) { .cl-side .die--lg { width: 40px; height: 40px; border-radius: 8px; } .cl-side-name { font-size: .8rem; } .cl-result { font-size: .78rem; } }

/* hazard */
.hz-phase { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gray-800); background: #fff; color: var(--gray-800); line-height: 1; flex-shrink: 0; }
.hz-phase-label { font-size: .6rem; font-weight: 700; letter-spacing: .05em; }
.hz-phase-num { font-size: 1.4rem; font-weight: 800; }
.hz-phase--chance { background: var(--amber-100); border-color: var(--amber); color: #78350f; }
.hz-stake { text-align: center; font-weight: 700; color: var(--blue); margin: 0 0 .5rem; }

/* under-and-over-seven */
.uo-bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 1.25rem; }
.uo-bets .bet-btn { padding: .9rem .4rem; }
.uo-bets .bet-btn .bet-name { font-size: 1rem; }
.uo-bets .bet-btn .bet-amt { font-size: 1.2rem; }
.uo-total { text-align: center; font-weight: 700; color: var(--gray-700); min-height: 1.4em; margin: 0 0 .5rem; }
@media (max-width: 480px) { .uo-bets { gap: .35rem; } .uo-bets .bet-btn .bet-name { font-size: .85rem; } .uo-bets .bet-btn .bet-pay { font-size: .65rem; } }

/* sic-bo */
.sicbo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4rem; }
.sicbo-grid--wide { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sicbo-grid .bet-btn { padding: .5rem .3rem; }
.sicbo-grid .bet-btn .bet-name { font-size: .85rem; }
.sicbo-grid .bet-btn .bet-pay { font-size: .68rem; }
.sicbo-total { text-align: center; font-weight: 700; color: var(--gray-800); margin: 0 0 .5rem; min-height: 1.4em; }
@media (max-width: 480px) { .sicbo-grid { grid-template-columns: repeat(3, 1fr); gap: .3rem; } .sicbo-grid--wide { grid-template-columns: repeat(2, 1fr); } .sicbo-grid .bet-btn { padding: .45rem .2rem; } .sicbo-grid .bet-btn .bet-name { font-size: .78rem; } }

/* chuck-a-luck */
.cal-cage { position: relative; margin: 0 auto 1rem; max-width: 340px; padding: 1.5rem 1rem .25rem; border: 4px solid #9ca3af; border-radius: 50% / 38%; background: repeating-linear-gradient(90deg, rgba(107,114,128,.28) 0 3px, transparent 3px 22px), linear-gradient(180deg, #f9fafb, #e5e7eb); box-shadow: inset 0 0 0 6px #fff; }
.cal-cage .dice-area { margin-bottom: 1.25rem; }
.cal-cage--spin { animation: cal-spin .8s ease-in-out; }
@keyframes cal-spin { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cal-cage--spin { animation: none; } }
.cal-total { text-align: center; font-weight: 700; color: var(--gray-800); margin: 0 0 .5rem; min-height: 1.4em; }
.cal-bets { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.cal-bets .bet-btn .die--sm { margin-bottom: .25rem; }
@media (max-width: 480px) { .cal-bets { grid-template-columns: repeat(3, 1fr); gap: .35rem; } .cal-bets .bet-btn { padding: .5rem .25rem; } .cal-cage { padding: 1rem .5rem .1rem; } }

/* crown-and-anchor */
.cna-die--red .die-face { color: #dc2626; }
.cna-die--black .die-face { color: #111827; }
.cna-die--gold .die-face { color: #b45309; }
.cna-die--navy .die-face { color: #1e3a8a; }
.cna-result { text-align: center; font-weight: 700; color: var(--gray-800); margin: 0 0 .5rem; min-height: 1.4em; }
.cna-cloth { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: .75rem; border-radius: 12px; background: #14532d; border: 3px solid #b45309; }
.cna-bet { gap: .15rem; padding: .75rem .4rem; }
.cna-sym { font-size: 2.2rem; line-height: 1; }
.cna-bet--red .cna-sym { color: #dc2626; }
.cna-bet--black .cna-sym { color: #111827; }
.cna-bet--gold .cna-sym { color: #b45309; }
.cna-bet--navy .cna-sym { color: #1e3a8a; }
.cna-hist { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; border: 2px solid var(--gray-200); }
.cna-hist .die--sm { width: 30px; height: 30px; border-radius: 6px; }
.cna-hist .die--sm .die-face { font-size: .95rem; }
.cna-hist--green { border-color: #86efac; background: #dcfce7; }
.cna-hist--red { border-color: #fca5a5; background: #fee2e2; }
.cna-hist--yellow { border-color: #fde047; background: #fef9c3; }
@media (max-width: 480px) { .cna-cloth { gap: .4rem; padding: .5rem; } .cna-bet { padding: .6rem .2rem; } .cna-sym { font-size: 1.8rem; } .cna-hist .die--sm { width: 26px; height: 26px; } }

/* dice-21 */
.d21-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .5rem; }
.d21-hand-block h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.d21-total { font-size: 1.4rem; font-weight: 700; color: var(--blue); }
.d21-hand { gap: .4rem; margin-bottom: .5rem; min-height: 48px; align-items: center; }
.d21-hand .game-hint { margin: 0; }
.d21-bust { min-height: 1.4em; font-weight: 600; color: var(--gray-700); }
.d21-row--current td { background: var(--blue-50); font-weight: 700; }
@media (max-width: 480px) { .d21-hands { grid-template-columns: 1fr; } .d21-hand .die--sm { width: 32px; height: 32px; border-radius: 6px; } }

/* twenty-six */
.t26-points { gap: .5rem; margin-bottom: 1rem; }
.t26-dice { gap: .4rem; max-width: 100%; }
.t26-tally td, .t26-tally th { padding: .3rem .45rem; font-size: .85rem; }
.t26-faces { font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; color: var(--gray-500); }
.t26-row--hit td:nth-child(3) { color: var(--green); font-weight: 700; }
.t26-tally tfoot td, .t26-tally tfoot th { border-top: 2px solid var(--gray-300); font-weight: 700; color: var(--gray-800); }
@media (max-width: 480px) { .t26-dice .die--sm { width: 30px; height: 30px; border-radius: 6px; } .t26-faces { font-size: .7rem; letter-spacing: 0; } }

/* chicago */
.chi-table td, .chi-table th { text-align: center; padding: .35rem .4rem; white-space: nowrap; }
.chi-table td:first-child, .chi-table th:first-child { font-weight: 700; color: var(--gray-800); }
.chi-row--current td { background: var(--blue-50); }
.chi-hit { color: var(--green); font-weight: 700; background: var(--green-100); }
.chi-total th, .chi-total td { border-top: 2px solid var(--gray-300); font-weight: 700; color: var(--gray-800); }
@media (max-width: 480px) { .chi-table td, .chi-table th { font-size: .78rem; padding: .3rem .25rem; } }

/* centennial */
.cen-tracks { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.25rem; }
.cen-track-label { font-weight: 700; font-size: .9rem; color: var(--gray-800); margin-bottom: .35rem; text-align: center; }
.cen-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cen-cell { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--gray-200); background: #fff; color: var(--gray-500); font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s; }
.cen-cell--done { background: var(--green-100); border-color: var(--green); color: #166534; }
.cen-cell--fresh { background: var(--amber-100); border-color: var(--amber); color: #78350f; }
.cen-cell--current { background: var(--blue); border-color: var(--blue-dark); color: #fff; box-shadow: 0 0 0 3px var(--blue-100); }
@media (max-width: 480px) { .cen-cell { width: 26px; height: 26px; font-size: .75rem; border-radius: 6px; } .cen-track { gap: 3px; } }

/* round-the-clock */
.rtc-clocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.rtc-player { flex: 1 1 200px; max-width: 240px; min-width: 0; }
.rtc-label { font-weight: 700; font-size: .9rem; color: var(--gray-800); margin-bottom: .35rem; text-align: center; }
.rtc-clock { position: relative; width: 100%; max-width: 220px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; border: 3px solid var(--gray-200); background: var(--gray-50); }
.rtc-cell { position: absolute; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--gray-200); background: #fff; color: var(--gray-500); font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s; }
.rtc-cell--done { background: var(--green-100); border-color: var(--green); color: #166534; }
.rtc-cell--fresh { background: var(--amber-100); border-color: var(--amber); color: #78350f; }
.rtc-cell--current { background: var(--blue); border-color: var(--blue-dark); color: #fff; box-shadow: 0 0 0 3px var(--blue-100); }
.rtc-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; line-height: 1.1; }
.rtc-center strong { display: block; font-size: 1.6rem; color: var(--blue); }
.rtc-center span { font-size: .7rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 480px) { .rtc-clock { max-width: 170px; } .rtc-cell { width: 26px; height: 26px; font-size: .75rem; } .rtc-center strong { font-size: 1.3rem; } }

/* yamb */
.yb-sheet { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 3px; font-size: .85rem; width: 100%; }
.yb-head { text-align: center; font-weight: 700; color: var(--gray-500); font-size: .85rem; padding: .25rem 0; }
.yb-label { display: flex; align-items: center; min-width: 0; padding: .3rem .4rem; font-weight: 600; color: var(--gray-700); background: var(--gray-50); border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yb-label--sub { font-size: .72rem; font-weight: 500; color: var(--gray-500); white-space: normal; line-height: 1.2; }
.yb-cell { min-width: 0; padding: .35rem .15rem; text-align: center; font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.3; border: 1px solid var(--gray-200); border-radius: 6px; background: #fff; color: var(--gray-400); cursor: default; transition: background .2s, border-color .2s; }
.yb-cell--used { color: var(--gray-800); background: var(--gray-100); }
.yb-cell--possible { border-color: var(--blue); background: var(--blue-50); color: var(--blue); cursor: pointer; }
.yb-cell--possible:focus-visible { background: var(--blue-100); }
.yb-cell--announced { border-color: var(--amber); background: var(--amber-100); color: #92400e; cursor: pointer; }
.yb-cell--sub { background: var(--gray-100); color: var(--gray-700); border-color: transparent; font-size: .75rem; }
.yb-cell--total { background: var(--blue); color: #fff; border-color: transparent; font-size: .9rem; }
@media (max-width: 480px) {
  .yb-sheet { font-size: .72rem; gap: 2px; }
  .yb-head { font-size: .75rem; }
  .yb-label { padding: .3rem .25rem; font-size: .72rem; }
  .yb-label--sub { font-size: .62rem; }
  .yb-cell { font-size: .72rem; padding: .3rem .05rem; border-radius: 4px; }
  .yb-cell--sub { font-size: .65rem; }
  .yb-cell--total { font-size: .78rem; }
}

/* knucklebones */
.kb-arena { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.kb-side { width: 100%; max-width: 340px; }
.kb-side-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; color: var(--gray-700); margin: .3rem 0; }
.kb-vs { font-size: .75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; }
.kb-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.kb-col { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; padding: .5rem .25rem; border-radius: 10px; border: 2px solid var(--gray-200); background: var(--gray-50); font: inherit; color: inherit; cursor: default; transition: border-color .2s, background .2s; }
.kb-col--open { border-color: var(--blue); background: var(--blue-50); cursor: pointer; }
.kb-col--open:focus-visible { background: var(--blue-100); }
.kb-slots { display: flex; flex-direction: column; gap: .35rem; }
.kb-slots--up { flex-direction: column-reverse; }
.kb-slot { width: 40px; height: 40px; border: 2px dashed var(--gray-300); border-radius: 8px; background: #fff; }
.kb-total { font-weight: 700; font-size: 1rem; color: var(--gray-800); line-height: 1; }
@media (max-width: 480px) { .kb-board { gap: .35rem; } .kb-col { padding: .4rem .15rem; } .kb-slot, .kb-board .die--sm { width: 36px; height: 36px; } }

/* tenzi */
.tz-status .status-value { font-variant-numeric: tabular-nums; }
.tz-options { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; font-size: .9rem; color: var(--gray-600); }
.tz-options label { display: inline-flex; align-items: center; gap: .4rem; }
.tz-options .select { width: auto; min-width: 0; padding: .4rem .6rem; font-size: .9rem; }
.tz-cpu { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-bottom: .5rem; min-height: 40px; }
.tz-cpu-meta { text-align: center; font-size: .85rem; color: var(--gray-500); margin-bottom: .75rem; }

/* aces-in-the-pot */
.aitp-throws { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem; min-height: 1.2rem; margin: -.5rem 0 1rem; font-size: .85rem; color: var(--gray-600); }
.aitp-throw { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gray-200); background: #fff; display: inline-block; }
.aitp-throw--safe { background: var(--green); border-color: var(--green); }

/* help-your-neighbor */
.hyn-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: .3rem 0 .1rem; }
.hyn-num { min-width: 26px; padding: .1rem .35rem; border-radius: 8px; background: #fff; border: 1px solid var(--gray-200); font-size: .8rem; font-weight: 700; color: var(--gray-800); line-height: 1.3; }
.hyn-num--hit { background: var(--amber); border-color: #b45309; }
.hyn-odds { font-size: .72rem; color: var(--gray-500); margin-top: .15rem; }
.hyn-total { text-align: center; font-weight: 700; color: var(--gray-800); min-height: 1.4rem; margin: -.75rem 0 1rem; }
@media (max-width: 480px) { .hyn-num { min-width: 22px; font-size: .75rem; padding: .05rem .3rem; } .hyn-nums { gap: 3px; } }

/* mia */
.mia-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.mia-seat { text-align: center; padding: .7rem .4rem; min-width: 0; }
.mia-seat--out { opacity: .55; }
.mia-seat-name { font-weight: 700; font-size: .9rem; color: var(--gray-800); }
.mia-lives { display: flex; justify-content: center; gap: 4px; margin: .3rem 0; }
.mia-life { width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid #b91c1c; display: inline-block; }
.mia-life--lost { background: var(--gray-200); border-color: var(--gray-300); }
.mia-seat-note { font-size: .78rem; color: var(--gray-500); word-break: break-word; }
.mia-ranks { gap: .35rem; margin-bottom: .5rem; }
.mia-ranks .chip { padding: .35rem .6rem; font-size: .85rem; }
@media (max-width: 480px) { .mia-seats { gap: .4rem; } .mia-seat-name { font-size: .8rem; } .mia-ranks .chip { padding: .3rem .5rem; font-size: .8rem; } }

/* mexico */
.mex-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.mex-seat { text-align: center; padding: .7rem .4rem; min-width: 0; }
.mex-seat--out { opacity: .55; }
.mex-seat-name { font-weight: 700; font-size: .9rem; color: var(--gray-800); }
.mex-lives { display: flex; justify-content: center; gap: 3px; margin: .3rem 0; flex-wrap: wrap; }
.mex-life { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); border: 2px solid #b45309; display: inline-block; }
.mex-life--lost { background: var(--gray-200); border-color: var(--gray-300); }
.mex-seat-roll { display: flex; justify-content: center; gap: .3rem; min-height: 40px; align-items: center; margin: .3rem 0; }
.mex-seat-roll .game-hint { margin: 0; }
.mex-seat-note { font-size: .78rem; color: var(--gray-500); }
@media (max-width: 480px) { .mex-seats { gap: .4rem; } .mex-seat-name { font-size: .8rem; } .mex-seat-roll .die--sm { width: 32px; height: 32px; } }

/* sevens-out */
.sevens-bars { margin-bottom: 1rem; }

/* skunk */
.skunk-stance { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; font-size: .9rem; text-align: center; }
.skunk-stance .card-lite { padding: .6rem .5rem; min-width: 0; }
.skunk-stance .card-lite span { display: block; font-size: .8rem; color: var(--gray-500); }
.skunk-table th, .skunk-table td { text-align: center; }
.skunk-table th:first-child { text-align: left; }
.skunk-table .skunk-live { font-weight: 700; color: var(--blue); }
.skunk-table .skunk-wipe { font-weight: 700; color: var(--red); }
.skunk-table .skunk-total { font-weight: 700; border-left: 2px solid var(--gray-300); }
@media (max-width: 480px) { .skunk-stance { font-size: .8rem; } .skunk-table { font-size: .8rem; } .skunk-table th, .skunk-table td { padding: .4rem .35rem; } }

/* beetle */
.beetle-die .die--lg { width: 110px; height: 110px; border-radius: 18px; max-width: 100%; }
.beetle-arena { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.beetle-card { text-align: center; min-width: 0; padding: .9rem .6rem; }
.beetle-card h3 { font-size: .95rem; border: 0; padding: 0; margin-bottom: .5rem; }
.beetle-svg { width: 100%; max-width: 170px; margin: 0 auto .6rem; }
.beetle-svg svg { width: 100%; height: auto; }
.beetle-svg [data-part] { fill: var(--gray-100); stroke: var(--gray-300); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 5; transition: fill .3s, stroke .3s; }
.beetle-svg .beetle-lines [data-part], .beetle-svg .beetle-seam { fill: none; }
.beetle-svg [data-part].beetle-part--on { fill: #92400e; stroke: #451a03; stroke-dasharray: none; }
.beetle-svg .beetle-lines [data-part].beetle-part--on, .beetle-svg .beetle-seam.beetle-part--on { fill: none; stroke: #451a03; stroke-width: 4; }
.beetle-svg .beetle-eye.beetle-part--on { fill: #fff; stroke: #111827; stroke-width: 2.5; }
.beetle-list { list-style: none; padding: 0; margin: 0; font-size: .82rem; color: var(--gray-500); text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .5rem; }
.beetle-list li.done { color: var(--green); font-weight: 600; }
@media (max-width: 480px) { .beetle-arena { gap: .5rem; } .beetle-list { grid-template-columns: 1fr; font-size: .78rem; } .beetle-svg { max-width: 130px; } }

/* going-to-boston */
.gtb-total th, .gtb-total td { font-weight: 700; border-top: 2px solid var(--gray-300); }

/* cant-stop */
.cs-board { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; align-items: end; width: 100%; max-width: 640px; margin: 0 auto .75rem; }
.cs-col { display: flex; flex-direction: column-reverse; gap: 3px; min-width: 0; padding: 3px; border-radius: 8px; background: var(--gray-50); border: 1px solid var(--gray-200); }
.cs-col--you { background: var(--blue-50); border-color: var(--blue-200); }
.cs-col--cpu { background: var(--red-100); border-color: #fca5a5; }
.cs-cell { aspect-ratio: 1; min-width: 0; border-radius: 4px; background: #fff; border: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: center; gap: 1px; flex-wrap: wrap; padding: 1px; }
.cs-cell--top { border-color: var(--gray-400); border-style: dashed; }
.cs-col-label { order: -1; text-align: center; font-weight: 700; font-size: .85rem; color: var(--gray-700); line-height: 1.4; }
.cs-mk { display: inline-block; width: 38%; min-width: 7px; max-width: 14px; aspect-ratio: 1; border-radius: 50%; flex-shrink: 0; }
.cs-mk--you { background: var(--blue); }
.cs-mk--cpu { background: var(--red); }
.cs-mk--runner { background: #fff; border: 2px solid var(--gray-800); box-sizing: border-box; }
.cs-legend { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--gray-600); }
.cs-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.cs-legend .cs-mk { width: 12px; }
@media (max-width: 480px) { .cs-board { gap: 2px; } .cs-col { padding: 2px; gap: 2px; border-radius: 5px; } .cs-cell { border-radius: 2px; } .cs-col-label { font-size: .7rem; } .cs-mk { min-width: 5px; } }

/* ---------- Game pages: compact hero, intro below the game ---------- */
.hero-blurb { font-size: 1.15rem; }
.game-intro { max-width: 1000px; margin: 1.5rem auto 0; font-size: 1.05rem; }
.game-intro p { margin: 0; }
@media (max-width: 768px) {
  .hero--game { padding: 1rem 1rem .9rem; margin-bottom: .75rem; border-radius: 16px; text-align: left; }
  .hero--game h1 { font-size: 1.55rem; margin-bottom: .3rem; }
  .hero--game .hero-blurb { font-size: .95rem; margin: 0 0 .25rem; }
  .hero--game .aka { font-size: .8rem; margin: 0; }
  .hero--game .hero-meta, .hero--game .hero-cta { display: none; }
  .breadcrumbs { margin-bottom: .5rem; font-size: .8rem; }
  .container { padding-top: .75rem; }
  .game-intro { font-size: .95rem; margin-top: 1rem; }

  /* board becomes a simple stack so a panel can stick to the top */
  .game-board { display: block; }
  .game-board > .panel, .game-board > .game-status { margin-bottom: .75rem; }
  .panel { padding: .85rem .9rem; }
  .panel > h2 { font-size: 1rem; margin-bottom: .5rem; }
  .game-hint { font-size: .75rem; margin-top: .35rem; }
  .game-message { font-size: .9rem; margin-bottom: .6rem; }
  .dice-area { margin-bottom: .85rem; min-height: 52px; }
  .dice-controls { gap: .5rem; flex-direction: row; flex-wrap: wrap; }
  .dice-controls .btn { width: auto; flex: 1 1 40%; padding: .7rem .9rem; font-size: .95rem; }

  /* status bar: one compact row */
  .game-status { flex-wrap: nowrap; overflow-x: auto; gap: .25rem; padding: .5rem .6rem; border-radius: 10px; scrollbar-width: none; }
  .game-status::-webkit-scrollbar { display: none; }
  .status-item { min-width: 0; flex: 1 1 0; }
  .status-item h3, .status-item .status-label { font-size: .62rem; margin-bottom: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .status-item span, .status-item .status-value { font-size: .95rem; white-space: nowrap; }

  /* pinned dice panel */
  .game-shell .panel.panel--pinned { position: sticky; top: 68px; z-index: 30; box-shadow: 0 10px 24px rgba(0,0,0,.14); }

  /* scorecards: two compact columns */
  .score-sections { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .score-section h3 { font-size: .8rem; padding-bottom: .3rem; margin-bottom: .4rem; }
  .score-rows { gap: .25rem; }
  .score-row { padding: .3rem .45rem; min-height: 40px; font-size: .8rem; border-radius: 6px; }
  .score-row > span:first-child { line-height: 1.15; }
  .score-cell { min-width: 30px; font-size: .85rem; }

  /* collapsible groups inside long panels */
  .mobile-group { border: 1px solid var(--gray-200); border-radius: 10px; margin-bottom: .5rem; padding: 0 .6rem; }
  .mobile-group > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
  .mobile-group > summary::-webkit-details-marker { display: none; }
  .mobile-group > summary::after { content: "+"; color: var(--blue); font-size: 1.1rem; }
  .mobile-group[open] > summary::after { content: "−"; }
  .mobile-group > *:not(summary) { margin-bottom: .6rem; }
}
@media (max-width: 480px) {
  .dice-area { gap: .3rem; }
  .die { width: 48px; height: 48px; border-radius: 8px; }
  .die--lg { width: 56px; height: 56px; }
  .die-face { font-size: 1.5rem; }
  .chip { min-height: 40px; }
}