:root {
  color-scheme: dark;
  --ink: #f8f0d9;
  --muted: #9eb8aa;
  --dim: #67877a;
  --brass: #edbe62;
  --teal: #36d5bc;
  --felt: #087050;
  --felt-deep: #03241e;
  --oxblood: #2f1719;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background: radial-gradient(circle at 50% -15%, rgba(20, 148, 115, .28), transparent 35rem), linear-gradient(150deg, #092a25, #031512 58%, #010807);
}
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .16; background-image: radial-gradient(rgba(255,255,255,.23) .55px, transparent .55px); background-size: 5px 5px; mix-blend-mode: soft-light; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #fff0b1; outline-offset: 4px; }
.home-shell { width: min(100% - 28px, 1020px); min-height: 100dvh; margin: 0 auto; padding: max(13px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.home-header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(214,224,195,.13); }
.home-brand { min-width: 0; display: inline-flex; align-items: center; gap: 9px; }
.home-brand > span:last-child { min-width: 0; display: grid; gap: 2px; }
.home-brand small { color: var(--brass); font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.home-brand strong { font-size: 18px; letter-spacing: .18em; line-height: 1; }
.home-die-mark { position: relative; width: 29px; height: 29px; display: grid; grid-template-columns: repeat(2, 4px); grid-template-rows: repeat(2, 4px); place-content: center; gap: 5px; border: 1px solid rgba(237,190,98,.72); border-radius: 8px; transform: rotate(-8deg); }
.home-die-mark i { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 7px rgba(237,190,98,.7); }
.home-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .11em; white-space: nowrap; }
.home-status i, .status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.home-intro { padding: clamp(24px, 7vh, 72px) 0 clamp(22px, 4vh, 44px); }
.home-kicker { margin: 0 0 7px; color: var(--brass); font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.home-intro h1 { margin: 0; font-size: clamp(30px, 7vw, 52px); letter-spacing: -.035em; line-height: .98; }
.home-intro p:last-child { margin-top: 11px; color: var(--muted); font-size: 13px; }
.mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mode-button { position: relative; min-height: 320px; display: grid; grid-template-rows: minmax(150px,1fr) auto; gap: 12px; overflow: hidden; padding: 13px; border: 1px solid rgba(237,190,98,.36); border-radius: 16px; background: linear-gradient(150deg, rgba(12,85,66,.95), rgba(2,35,29,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 34px rgba(0,0,0,.22); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mode-button:hover { transform: translateY(-3px); border-color: rgba(247,220,155,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px rgba(0,0,0,.32), 0 0 26px rgba(54,213,188,.1); }
.mode-button:active { transform: translateY(1px) scale(.99); }
.mode-online { border-color: rgba(55,211,189,.62); background: linear-gradient(150deg, rgba(8,100,79,.96), rgba(2,42,38,.98)); }
.mode-art { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(210,224,190,.16); border-radius: 11px; background: rgba(1,24,21,.68); }
.solo-art { background: radial-gradient(ellipse at 50% 36%, rgba(38,166,133,.26), transparent 58%), linear-gradient(180deg, #063f36, #021e1b); }
.bubble-rim { position: absolute; left: 8%; right: 8%; top: 20%; bottom: 12%; border: 1px solid rgba(55,211,189,.55); border-radius: 50%; box-shadow: 0 0 0 10px rgba(18,116,91,.08), inset 0 0 26px rgba(55,211,189,.13); }
.mini-die { position: absolute; top: 42%; display: grid; place-items: center; width: 45px; height: 45px; border: 2px solid rgba(255,253,233,.76); border-radius: 10px; color: #314942; background: linear-gradient(145deg,#fffdf0,#d6d6c2); font-size: 15px; font-weight: 900; box-shadow: 0 7px 13px rgba(0,0,0,.42); }
.mini-die-one { left: 31%; transform: rotate(-12deg); }.mini-die-two { right: 28%; transform: rotate(12deg); }
.bubble-glint { position: absolute; left: 22%; top: 26%; width: 24px; height: 7px; border: 1px solid rgba(214,254,234,.44); border-radius: 50%; transform: rotate(-25deg); }
.online-art { background: radial-gradient(ellipse at 50% 47%, rgba(12,136,96,.66), rgba(3,39,32,.78) 60%), #032820; }
.racetrack { position: absolute; inset: 18% 10%; border: 7px solid rgba(53,26,25,.96); border-radius: 50%; box-shadow: 0 0 0 2px rgba(237,190,98,.58), inset 0 0 0 1px rgba(237,190,98,.38); }
.racetrack::after { position: absolute; inset: 12%; border: 1px solid rgba(84,220,182,.32); border-radius: 50%; content: ""; }
.player-node { position: absolute; z-index: 2; width: 19px; height: 19px; border: 2px solid rgba(236,245,213,.55); border-radius: 50%; background: #277f68; box-shadow: 0 3px 9px rgba(0,0,0,.45); }
.node-top { left: calc(50% - 9px); top: 12%; border-color: var(--brass); background: #ad634c; }.node-left { left: 11%; top: calc(50% - 9px); }.node-right { right: 11%; top: calc(50% - 9px); }.node-bottom { left: calc(50% - 9px); bottom: 12%; background: #2e64a0; }
.table-diamond { position: absolute; left: calc(50% - 15px); top: calc(50% - 15px); width: 30px; height: 30px; border: 1px solid var(--brass); transform: rotate(45deg); background: rgba(6,70,54,.86); }.table-diamond::after { position: absolute; inset: 9px; border-radius: 50%; content: ""; background: var(--brass); }
.mode-copy { display: grid; gap: 4px; padding: 1px 2px; }.mode-copy small { color: var(--brass); font-size: 8px; font-weight: 900; letter-spacing: .18em; }.mode-copy strong { font-size: 25px; letter-spacing: .08em; line-height: 1; }.mode-copy span { color: var(--muted); font-size: 11px; }.mode-arrow { position: absolute; right: 15px; bottom: 14px; color: var(--brass-soft, #f5dc9d); font-size: 24px; }
.home-footer { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 28px; color: var(--dim); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.footer-separator { color: rgba(237,190,98,.58); }
@media (max-width: 540px) {
  .home-shell { width: min(100% - 28px, 410px); }
  .home-intro { padding-top: 34px; padding-bottom: 24px; }.home-intro h1 { font-size: clamp(31px, 9vw, 42px); }
  .mode-actions { grid-template-columns: 1fr; gap: 10px; }.mode-button { min-height: 177px; grid-template-columns: 1fr; grid-template-rows: 105px auto; gap: 10px; padding: 10px; }.mode-art { min-height: 0; }.mini-die { width: 39px; height: 39px; }.mode-copy strong { font-size: 21px; }.mode-arrow { right: 13px; bottom: 11px; font-size: 21px; }
  .home-footer { padding-top: 24px; }
}
@media (min-width: 900px) { .home-shell { padding-top: 16px; }.home-intro { padding-top: 8vh; }.mode-button { min-height: 360px; } }
@media (prefers-reduced-motion: reduce) { .mode-button { transition: none; }.mode-button:hover { transform: none; } }