:root {
  --ui: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --display: 'Unbounded', 'Space Grotesk', sans-serif;
  --ink: #EEF0FF; --ink-soft: #A9AEDA; --ink-dim: #6E739D;
  --glass: rgba(18, 20, 44, .62); --glass-edge: rgba(160, 170, 255, .22);
  --bs: min(calc(100vw - 440px), calc(100dvh - 104px), 860px);
  color-scheme: dark;
}
/* ---------- star systems (unlockable themes) ---------- */
body[data-system='sol'] { --sp1: #05060F; --sp2: #0E1030; --neb-a: rgba(90, 70, 200, .25); --neb-b: rgba(255, 150, 80, .12); --star-core: #FFF6D8; --star-mid: #FFC65C; --star-glow: 255, 170, 70; --lane-a: #6B7CFF; --lane-b: #C08BFF; --home-me: #7FE3FF; --home-them: #FF9FD6; --accent: #FFC65C; --disc-in: #0B0D24; --disc-out: #12153A; --gate: #8AF0FF; }
body[data-system='blue'] { --sp1: #020713; --sp2: #071A36; --neb-a: rgba(40, 120, 255, .28); --neb-b: rgba(120, 255, 240, .1); --star-core: #F4FBFF; --star-mid: #7EC8FF; --star-glow: 110, 180, 255; --lane-a: #4FA3FF; --lane-b: #7AF0FF; --home-me: #B5FFF2; --home-them: #9CB6FF; --accent: #7EC8FF; --disc-in: #061024; --disc-out: #0B1C3C; --gate: #B5FFF2; }
body[data-system='red'] { --sp1: #0C0408; --sp2: #26091A; --neb-a: rgba(255, 70, 120, .22); --neb-b: rgba(255, 170, 120, .12); --star-core: #FFE7D8; --star-mid: #FF6B4A; --star-glow: 255, 90, 60; --lane-a: #FF6B8E; --lane-b: #FFB36B; --home-me: #FFD58A; --home-them: #FF8AC2; --accent: #FF8A5C; --disc-in: #180611; --disc-out: #2A0C1D; --gate: #FFD58A; }
body[data-system='binary'] { --sp1: #04060C; --sp2: #10142A; --neb-a: rgba(255, 210, 90, .16); --neb-b: rgba(90, 200, 255, .18); --star-core: #FFFFFF; --star-mid: #FFE08A; --star-glow: 255, 230, 160; --lane-a: #FFD36B; --lane-b: #6BD6FF; --home-me: #FFEFB0; --home-them: #9BE8FF; --accent: #FFE08A; --disc-in: #0A0C1C; --disc-out: #151A34; --gate: #FFEFB0; }
body[data-system='nebula'] { --sp1: #040B0D; --sp2: #0B2026; --neb-a: rgba(40, 220, 200, .25); --neb-b: rgba(255, 60, 200, .22); --star-core: #F0FFFC; --star-mid: #5CFFD9; --star-glow: 80, 255, 210; --lane-a: #3EE6CF; --lane-b: #FF5CD2; --home-me: #9DFFEA; --home-them: #FFA6EA; --accent: #5CFFD9; --disc-in: #061416; --disc-out: #0D262A; --gate: #9DFFEA; }
body[data-system='hole'] { --sp1: #020203; --sp2: #0A0A12; --neb-a: rgba(255, 150, 60, .14); --neb-b: rgba(120, 90, 255, .16); --star-core: #000000; --star-mid: #FF9A3C; --star-glow: 255, 150, 60; --lane-a: #FFB15C; --lane-b: #8F7BFF; --home-me: #FFD9A0; --home-them: #B9A6FF; --accent: #FFB15C; --disc-in: #050508; --disc-out: #0E0E18; --gate: #FFD9A0; }
/* ---------- moon skins ---------- */
body[data-skin='pearl'] { --me-a: #FFFFFF; --me-b: #DCE3FF; --me-c: #8D96C8; --me-glow: 200, 215, 255; --th-a: #E2CCFF; --th-b: #8A5BE6; --th-c: #3A1E7A; --th-glow: 150, 100, 255; }
body[data-skin='ice'] { --me-a: #F2FFFF; --me-b: #9FF0FF; --me-c: #2F8FB8; --me-glow: 140, 240, 255; --th-a: #FFE1B0; --th-b: #FF7A35; --th-c: #8A2A0A; --th-glow: 255, 120, 50; }
body[data-skin='jade'] { --me-a: #E9FFF3; --me-b: #6FE0A8; --me-c: #1E7A55; --me-glow: 110, 230, 170; --th-a: #FFE0DA; --th-b: #FF7F6E; --th-c: #8A2E26; --th-glow: 255, 130, 110; }
body[data-skin='gold'] { --me-a: #FFF6D6; --me-b: #F2C15A; --me-c: #8A5E12; --me-glow: 255, 210, 110; --th-a: #7A7A90; --th-b: #24242E; --th-c: #050508; --th-glow: 170, 170, 220; }
body[data-skin='comet'] { --me-a: #FFFFFF; --me-b: #C9F6FF; --me-c: #6AB7FF; --me-glow: 180, 240, 255; --th-a: #FFE6FA; --th-b: #FF9BE2; --th-c: #A43C8C; --th-glow: 255, 150, 230; }
body[data-skin='aurora'] { --me-a: #E8FFF8; --me-b: #7CFFC9; --me-c: #3C6CFF; --me-glow: 130, 255, 210; --th-a: #FFF0C8; --th-b: #FF6BB0; --th-c: #6A2AD0; --th-glow: 255, 120, 200; }

* { box-sizing: border-box; }
html { background: #05060F; }
html, body { margin: 0; min-height: 100%; }
body.orbit { font-family: var(--ui); color: var(--ink); background: var(--sp1); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

/* deep space backdrop */
.space { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 40%, var(--sp2), var(--sp1) 75%); }
.space .nebula { position: absolute; inset: -20%; background: radial-gradient(ellipse 40% 30% at 22% 30%, var(--neb-a), transparent 70%), radial-gradient(ellipse 35% 28% at 78% 72%, var(--neb-b), transparent 70%); animation: drift 60s ease-in-out infinite alternate; will-change: transform; }
@keyframes drift { to { transform: translate(3%, -2%) rotate(4deg); } }
.space .stars { position: absolute; inset: 0; background-repeat: repeat; }
.space .s1 { background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cfd6ff, transparent), radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent), radial-gradient(1px 1px at 310px 40px, #fff, transparent), radial-gradient(1px 1px at 390px 210px, #dfe3ff, transparent);
  background-size: 420px 260px; opacity: .55; animation: twinkle 7s ease-in-out infinite; }
.space .s2 { background-image: radial-gradient(1.5px 1.5px at 60px 140px, #fff, transparent), radial-gradient(2px 2px at 260px 90px, #ffe9c4, transparent), radial-gradient(1px 1px at 330px 260px, #fff, transparent);
  background-size: 380px 300px; opacity: .45; animation: twinkle 11s ease-in-out infinite reverse; }
@keyframes twinkle { 50% { opacity: .2; } }
.space .stars { will-change: opacity; }
#app { position: relative; z-index: 1; min-height: 100dvh; }

/* ---------- glass, buttons ---------- */
.glass { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; cursor: pointer; min-height: 46px; padding: .5em 1.3em; border-radius: 14px; font-weight: 600;
  border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .06); color: var(--ink); transition: transform .12s, background .15s, box-shadow .2s; text-decoration: none; }
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn small { font-weight: 500; color: var(--ink-soft); }
.btn.primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ff5ce1)); color: #0A0B1E; border-color: transparent; box-shadow: 0 0 26px rgba(var(--star-glow), .45); }
.btn.primary small { color: #2A2C4A; }
.btn.big { font-size: 1.15rem; min-height: 54px; padding: .6em 1.8em; }
.btn.small { min-height: 36px; font-size: .9rem; padding: .3em .9em; }
.btn.ghost-btn { background: transparent; border-style: dashed; }
.btn.quasar { border-color: rgba(var(--star-glow), .7); box-shadow: 0 0 18px rgba(var(--star-glow), .3), inset 0 0 12px rgba(var(--star-glow), .2); }
.icon { cursor: pointer; min-height: 36px; padding: .2em .9em; border-radius: 12px; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .04); color: var(--ink-soft); font-size: .9rem; }
.icon:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { cursor: pointer; min-height: 40px; padding: .3em 1.05em; border-radius: 12px; font-weight: 600; color: var(--ink-soft); background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-edge); }
.chip.on { color: #0A0B1E; background: var(--accent); border-color: transparent; }
.chips.small .chip { min-height: 34px; font-size: .88rem; }
input { font: inherit; font-size: 1.05rem; color: var(--ink); min-height: 44px; padding: .4em .9em; width: 100%; border: 1px solid var(--glass-edge); border-radius: 12px; background: rgba(0, 0, 0, .3); }
input:focus { outline: none; border-color: var(--accent); }
.code { font-family: var(--display); letter-spacing: .14em; padding: .05em .45em; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--accent); font-size: .95em; }
.form-error { width: min(900px, calc(100% - 32px)); margin: 0 auto 14px; background: rgba(255, 90, 120, .15); border: 1px solid rgba(255, 120, 140, .5); color: #FFD3DA; padding: .6em 1em; border-radius: 12px; text-align: center; }
.note, .blurb { color: var(--ink-soft); margin: 6px 0 0; }
.blurb { min-height: 2.6em; }
.loading { min-height: 100dvh; display: grid; place-items: center; font-family: var(--display); font-size: 1.3rem; color: var(--ink-soft); }
.back { position: absolute; top: 14px; left: 14px; z-index: 3; color: var(--ink-soft); text-decoration: none; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--glass-edge); }
.back:hover { color: var(--ink); }
.logo { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; margin: 0; background: linear-gradient(120deg, #fff 20%, var(--accent) 50%, var(--lane-b) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; }
.logo span { font-weight: 500; opacity: .8; }
.logo.small { font-size: 1.1rem; white-space: nowrap; }
.moon-icon { display: inline-block; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.moon-icon.me { background: radial-gradient(circle at 35% 30%, var(--me-a), var(--me-b) 45%, var(--me-c)); box-shadow: 0 0 14px rgba(var(--me-glow), .6); }
.moon-icon.them { background: radial-gradient(circle at 35% 30%, var(--th-a), var(--th-b) 45%, var(--th-c)); box-shadow: 0 0 14px rgba(var(--th-glow), .6); }

/* ---------- home ---------- */
.o-home { min-height: 100dvh; padding: 56px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.hero-orbit { position: relative; width: 200px; height: 200px; margin-bottom: -10px; }
.hero-star { position: absolute; inset: 35%; border-radius: 50%; background: radial-gradient(circle, var(--star-core), var(--star-mid) 45%, rgba(var(--star-glow), 0) 72%); box-shadow: 0 0 60px 20px rgba(var(--star-glow), .45); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); } }
.hero-moon { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--me-a), var(--me-b) 45%, var(--me-c)); box-shadow: 0 0 12px rgba(var(--me-glow), .7); animation: orbit 9s linear infinite; }
.hero-moon:nth-child(odd) { background: radial-gradient(circle at 35% 30%, var(--th-a), var(--th-b) 45%, var(--th-c)); box-shadow: 0 0 12px rgba(var(--th-glow), .7); animation-direction: reverse; }
.hero-moon.m0 { --r: 70px; animation-duration: 8s; } .hero-moon.m1 { --r: 92px; animation-duration: 12s; animation-delay: -3s; } .hero-moon.m2 { --r: 82px; animation-duration: 10s; animation-delay: -6s; }
.hero-moon.m3 { --r: 60px; animation-duration: 7s; animation-delay: -2s; } .hero-moon.m4 { --r: 98px; animation-duration: 14s; animation-delay: -9s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }
.hero .logo { font-size: clamp(2.2rem, 7vw, 4.2rem); }
.tagline { margin: 4px 0 0; color: var(--ink-soft); font-size: 1.15rem; }
.panel-row { width: min(900px, 100%); display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.profile { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.rank { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; }
.rank-icon { grid-row: span 2; font-size: 1.2rem; color: var(--accent); letter-spacing: -.1em; min-width: 30px; text-shadow: 0 0 12px rgba(var(--star-glow), .7); }
.rank-text { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rank-text b { font-family: var(--display); font-size: 1.2rem; }
.rank-text span { color: var(--ink-soft); font-size: .88rem; }
.xp-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lane-a), var(--accent)); box-shadow: 0 0 12px rgba(var(--star-glow), .6); }
.rank.compact { margin: 12px auto 0; max-width: 360px; text-align: left; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
.stats div { background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 8px 10px; }
.stats dt { font-size: .76rem; color: var(--ink-dim); }
.stats dd { margin: 2px 0 0; font-family: var(--display); font-size: 1.25rem; }
.stats dd small { font-family: var(--ui); font-size: .72rem; color: var(--ink-soft); }
.daily { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); position: relative; overflow: hidden; transition: transform .15s; }
.daily::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--star-glow), .35), transparent 70%); }
.daily:hover { transform: translateY(-2px); }
.daily-tag { font-size: .8rem; color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.daily b { font-family: var(--display); font-size: 1.4rem; }
.daily span { color: var(--ink-soft); }
.daily .streak { margin-top: auto; color: var(--ink); font-weight: 600; }
.play { width: min(900px, 100%); padding: 22px clamp(16px, 3vw, 28px); }
.field { display: flex; flex-direction: column; gap: 4px; max-width: 320px; margin: 0 0 18px; }
.field span { font-size: .88rem; color: var(--ink-soft); }
.choices { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.choice { border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.choice h2 { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.choice p { margin: 0; color: var(--ink-soft); }
.join { display: flex; gap: 8px; width: 100%; }
.join input { max-width: 130px; text-transform: uppercase; letter-spacing: .2em; }

/* collection sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(2, 3, 10, .6); animation: fadeIn .25s; }
.sheet { width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 22px; }
.sheet header { display: flex; justify-content: space-between; align-items: center; }
.sheet h2 { margin: 0; font-family: var(--display); }
.sheet h3 { margin: 16px 0 8px; font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px; border-radius: 14px; border: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .03); }
.item.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.item.locked { opacity: .55; cursor: not-allowed; }
.item b { font-size: .95rem; } .item small { color: var(--ink-soft); font-size: .78rem; line-height: 1.3; }
.swatch { display: block; width: 100%; height: 54px; border-radius: 10px; margin-bottom: 4px; }
.swatch.system-sol { background: radial-gradient(circle at 50% 50%, #FFF6D8 0 10%, #FFC65C 22%, transparent 42%), linear-gradient(135deg, #0E1030, #2B1E5A); }
.swatch.system-blue { background: radial-gradient(circle, #F4FBFF 0 10%, #7EC8FF 25%, transparent 45%), linear-gradient(135deg, #071A36, #0A3A6A); }
.swatch.system-red { background: radial-gradient(circle, #FFE7D8 0 8%, #FF6B4A 20%, transparent 38%), linear-gradient(135deg, #26091A, #5A1630); }
.swatch.system-binary { background: radial-gradient(circle at 40% 50%, #fff 0 7%, #FFE08A 16%, transparent 30%), radial-gradient(circle at 62% 50%, #fff 0 5%, #8AD6FF 13%, transparent 26%), linear-gradient(135deg, #10142A, #222A4A); }
.swatch.system-nebula { background: radial-gradient(circle, #F0FFFC 0 8%, #5CFFD9 20%, transparent 38%), linear-gradient(135deg, #0B2026, #4A1048); }
.swatch.system-hole { background: radial-gradient(circle, #000 0 14%, #FF9A3C 18%, transparent 36%), linear-gradient(135deg, #0A0A12, #241A3A); }
.swatch[class*='skin-'] { background: var(--sw); }
.swatch.skin-pearl { --sw: radial-gradient(circle at 34% 50%, #fff, #DCE3FF 18%, #8D96C8 28%, transparent 30%), radial-gradient(circle at 66% 50%, #E2CCFF, #8A5BE6 18%, #3A1E7A 28%, transparent 30%), #0E1030; }
.swatch.skin-ice { --sw: radial-gradient(circle at 34% 50%, #F2FFFF, #9FF0FF 18%, #2F8FB8 28%, transparent 30%), radial-gradient(circle at 66% 50%, #FFE1B0, #FF7A35 18%, #8A2A0A 28%, transparent 30%), #0E1030; }
.swatch.skin-jade { --sw: radial-gradient(circle at 34% 50%, #E9FFF3, #6FE0A8 18%, #1E7A55 28%, transparent 30%), radial-gradient(circle at 66% 50%, #FFE0DA, #FF7F6E 18%, #8A2E26 28%, transparent 30%), #0E1030; }
.swatch.skin-gold { --sw: radial-gradient(circle at 34% 50%, #FFF6D6, #F2C15A 18%, #8A5E12 28%, transparent 30%), radial-gradient(circle at 66% 50%, #7A7A90, #24242E 18%, #050508 28%, transparent 30%), #1A1C38; }
.swatch.skin-comet { --sw: radial-gradient(circle at 34% 50%, #fff, #C9F6FF 18%, #6AB7FF 28%, transparent 30%), radial-gradient(circle at 66% 50%, #FFE6FA, #FF9BE2 18%, #A43C8C 28%, transparent 30%), #0E1030; }
.swatch.skin-aurora { --sw: radial-gradient(circle at 34% 50%, #E8FFF8, #7CFFC9 18%, #3C6CFF 28%, transparent 30%), radial-gradient(circle at 66% 50%, #FFF0C8, #FF6BB0 18%, #6A2AD0 28%, transparent 30%), #0E1030; }

/* lobby */
.o-lobby { min-height: 100dvh; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lobby-top { width: min(760px, 100%); display: flex; justify-content: space-between; align-items: center; }
.lobby-card { width: min(760px, 100%); padding: 24px clamp(16px, 4vw, 34px); }
.lobby-card h1 { margin: 0 0 4px; font-family: var(--display); font-size: 1.5rem; }
.lobby-card h2 { margin: 18px 0 8px; font-size: 1rem; color: var(--ink-soft); }
.invite { display: flex; gap: 8px; }
.seats { display: grid; gap: 10px; margin: 18px 0 6px; }
.seat { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); }
.seat.empty { opacity: .7; }
.seat b { font-family: var(--display); }
.seat .who { color: var(--ink-soft); margin-top: 2px; }
.seat > .btn { margin-left: auto; }
.seat .x { margin-left: auto; border: 1px solid var(--glass-edge); background: transparent; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: #FFB4C2; }
.lobby-row { margin: 12px 0; }

/* ---------- the game ---------- */
.orbit-game { min-height: 100dvh; display: flex; flex-direction: column; padding: 10px 16px 18px; }
.o-top { display: flex; align-items: center; gap: 14px; }
.status { margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 44px; padding: 6px 22px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-edge); }
.status b { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.status span { color: var(--ink-soft); }
.my-turn .status { border-color: var(--accent); box-shadow: 0 0 22px rgba(var(--star-glow), .3); }
.meta { display: flex; gap: 8px; align-items: center; }
.arena { flex: 1; display: flex; align-items: center; justify-content: center; gap: 22px; padding-top: 8px; }
.orbit-board { position: relative; width: var(--bs); aspect-ratio: 1; flex: none; container-type: inline-size; }
.board-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.disc { filter: drop-shadow(0 0 40px rgba(var(--star-glow), .12)); stroke: rgba(255, 255, 255, .08); stroke-width: 2; }
.orbit-ring { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 1.5; stroke-dasharray: 2 10; animation: spin calc(120s + var(--i) * 40s) linear infinite; transform-origin: 500px 500px; }
@keyframes spin { to { transform: rotate(360deg); } }
.lane { opacity: .22; transition: opacity .2s; }
.lane.a { fill: var(--lane-a); } .lane.b { fill: var(--lane-b); }
.lane.mine { fill: var(--home-me); opacity: .3; } .lane.theirs { fill: var(--home-them); opacity: .26; }
.lane.target { opacity: .7; filter: drop-shadow(0 0 10px var(--accent)); }
.lane-num { fill: var(--ink-dim); font: 600 18px var(--ui); text-anchor: middle; }
.gate-glow { fill: var(--gate); opacity: .55; }
.gate-ring { fill: none; stroke: var(--gate); stroke-width: 3; opacity: .9; }
.gate-core { fill: #fff; opacity: .8; }
.gate { animation: gatePulse 2.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes gatePulse { 50% { opacity: .7; } }
.gate.flash .gate-glow { animation: gateFlash .8s ease-out; }
@keyframes gateFlash { 0% { opacity: 1; transform: scale(2.2); } 100% { opacity: .55; transform: scale(1); } }
.trail { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .7; animation: trail 1.4s ease-out forwards; }
.trail.me { stroke: rgba(var(--me-glow), .8); } .trail.them { stroke: rgba(var(--th-glow), .8); }
@keyframes trail { from { stroke-width: 9; opacity: .8; } to { stroke-width: 0; opacity: 0; } }

/* the star (and the bar) */
.star { position: absolute; left: 50%; top: 50%; width: 17%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.star i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--star-core) 0 22%, var(--star-mid) 48%, rgba(var(--star-glow), 0) 72%); box-shadow: 0 0 60px 18px rgba(var(--star-glow), .5); animation: breathe 4s ease-in-out infinite; }
.star b { position: absolute; inset: -40%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--star-glow), 0), rgba(var(--star-glow), .25), rgba(var(--star-glow), 0) 30%, rgba(var(--star-glow), .2) 55%, rgba(var(--star-glow), 0) 75%); filter: blur(8px); animation: spin 18s linear infinite; }
body[data-system='hole'] .star i { background: radial-gradient(circle, #000 0 34%, var(--star-mid) 40%, rgba(var(--star-glow), .2) 55%, rgba(var(--star-glow), 0) 72%); }
body[data-system='binary'] .star i { background: radial-gradient(circle at 36% 50%, #fff 0 12%, #FFE08A 26%, transparent 40%), radial-gradient(circle at 66% 50%, #fff 0 9%, #8AD6FF 22%, transparent 36%); animation: spin 12s linear infinite; }
.star.gulp i { animation: gulp .9s ease-out; }
@keyframes gulp { 30% { transform: scale(1.35); filter: brightness(1.6); } }
.layer { position: absolute; inset: 0; }
.layer.marks, .layer.fx { pointer-events: none; }
.layer.marks .ghost { pointer-events: auto; }

/* moons */
.moon { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; padding: 0; border: 0; cursor: default; transition: left .28s ease, top .28s ease, width .28s ease, box-shadow .2s;
  background: radial-gradient(circle at 34% 30%, var(--a), var(--b) 48%, var(--c) 100%); box-shadow: 0 0 calc(var(--bs) * .012) rgba(var(--g), .55), inset -.12em -.18em .35em rgba(0, 0, 0, .35); }
.moon.sme { --a: var(--me-a); --b: var(--me-b); --c: var(--me-c); --g: var(--me-glow); }
.moon.sthem { --a: var(--th-a); --b: var(--th-b); --c: var(--th-c); --g: var(--th-glow); }
.moon .craters { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 64%, rgba(0, 0, 0, .14) 0 9%, transparent 10%), radial-gradient(circle at 40% 70%, rgba(0, 0, 0, .1) 0 6%, transparent 7%), radial-gradient(circle at 70% 38%, rgba(0, 0, 0, .1) 0 5%, transparent 6%); }
.moon .shine { position: absolute; left: 18%; top: 14%; width: 30%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .9), transparent 70%); transform: rotate(-30deg); }
.moon.slice { aspect-ratio: 5 / 1; border-radius: 99px; translate: -50% 0; }
.moon.slice .craters, .moon.slice .shine { display: none; }
.my-turn .moon.movable { cursor: pointer; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 calc(var(--bs) * .03) rgba(var(--g), .9); animation: ready 1.4s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 calc(var(--bs) * .015) rgba(var(--g), .5); } }
.moon.selected { box-shadow: 0 0 0 3px var(--accent), 0 0 calc(var(--bs) * .04) rgba(var(--star-glow), .9) !important; animation: none !important; z-index: 70 !important; }
.moon.warping { filter: brightness(1.8) blur(.5px); }
.moon.falling { filter: brightness(1.5); }
.ghost { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; cursor: pointer; padding: 0; border: 2px dashed var(--accent); background: rgba(var(--star-glow), .12); display: grid; place-items: center; animation: ghost 1.1s ease-in-out infinite; z-index: 60; }
.ghost em { font-style: normal; font: 700 calc(var(--bs) * .022) var(--display); color: var(--accent); }
.ghost.hit { border-color: #FF6B8E; background: rgba(255, 107, 142, .2); } .ghost.hit em { color: #FF9EB4; }
.ghost.home { border-radius: 40%; border-color: var(--gate); }
@keyframes ghost { 50% { scale: 1.1; } }
.hint { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; font: 700 calc(var(--bs) * .022) var(--display); color: #0A0B1E;
  background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(var(--me-glow), .6)); box-shadow: 0 0 18px rgba(var(--me-glow), .8); opacity: .85; animation: ghost 1.4s ease-in-out infinite; z-index: 65; }
.stack-count { position: absolute; translate: -50% -50%; z-index: 90; font: 700 calc(var(--bs) * .02) var(--display); color: #0A0B1E; background: var(--accent); padding: .05em .4em; border-radius: 99px; }
.stack-count.off { translate: -50% 0; background: transparent; color: var(--ink-soft); font: 600 calc(var(--bs) * .016) var(--ui); }
.flare { position: absolute; width: 14%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(var(--star-glow), .6) 35%, transparent 70%); animation: flare 1.1s ease-out forwards; mix-blend-mode: screen; }
@keyframes flare { from { scale: .3; opacity: 1; } to { scale: 2.2; opacity: 0; } }
.banner { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 100; pointer-events: none; animation: banner 2.6s ease-out forwards; }
.banner span { display: block; white-space: nowrap; font: 800 calc(var(--bs) * .042) var(--display); padding: .4em .9em; border-radius: 99px; background: rgba(10, 11, 30, .82); border: 1px solid var(--glass-edge); box-shadow: 0 0 40px rgba(var(--star-glow), .4); }
.banner.good span { color: var(--accent); }
@keyframes banner { 0% { scale: .6; opacity: 0; } 15% { scale: 1.05; opacity: 1; } 80% { opacity: 1; } 100% { scale: 1; opacity: 0; } }

/* console */
.console { width: 340px; flex: none; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.players { display: flex; flex-direction: column; gap: 8px; }
.player { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; transition: border-color .2s; }
.player.turn { border-color: var(--accent); box-shadow: 0 0 18px rgba(var(--star-glow), .2); }
.p-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.p-text b { font-weight: 700; } .p-text b small { color: var(--ink-soft); font-weight: 500; }
.p-text span { color: var(--ink-soft); font-size: .86rem; }
.p-score { font-family: var(--display); font-size: 1.6rem; color: var(--accent); }
.dice-tray { display: flex; justify-content: center; gap: 14px; min-height: 76px; align-items: center; perspective: 400px; }
.dice-empty { color: var(--ink-dim); }
.die { position: relative; width: 60px; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 45%, rgba(var(--star-glow), .25)); border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 0 22px rgba(var(--star-glow), .35), inset 0 0 12px rgba(255, 255, 255, .25); backdrop-filter: blur(6px); transition: opacity .3s, transform .3s; }
.die .face { display: grid; width: 70%; height: 70%; grid-template-areas: "p1 p2 p3" "p4 p5 p6" "p7 p8 p9"; }
.die .face b { width: 64%; aspect-ratio: 1; place-self: center; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9), 0 0 14px rgba(var(--star-glow), .8); }
.die.used { opacity: .28; transform: scale(.9); }
.die.tumble { animation: tumble .7s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes tumble { 0% { transform: translateY(-30px) rotateX(var(--spin)) rotateZ(var(--spin)) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 54px; }
.controls .offer { width: 100%; margin: 0; text-align: center; font-size: 1.05rem; }
.match-info { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; align-items: center; color: var(--ink-soft); font-size: .88rem; }
.cube { display: inline-flex; align-items: center; gap: 8px; }
.cube i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 800 .95rem var(--display); color: #0A0B1E;
  background: radial-gradient(circle, #fff, rgba(var(--star-glow), .9)); box-shadow: 0 0 16px rgba(var(--star-glow), .7); }
.cube.pulse i { animation: quasar 1s ease-out 2; }
@keyframes quasar { 50% { scale: 1.4; box-shadow: 0 0 40px 10px rgba(var(--star-glow), .9); } }

/* end */
.end-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(2, 3, 10, .55); animation: fadeIn .4s; }
.end-backdrop.late { animation: fadeIn .4s .5s both; }
@keyframes fadeIn { from { opacity: 0; } }
.end-card { width: min(460px, 100%); padding: 26px 26px 22px; text-align: center; position: relative; overflow: hidden; }
.end-orb { width: 90px; height: 90px; margin: -10px auto 4px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--th-a), var(--th-b) 45%, var(--th-c)); box-shadow: 0 0 40px rgba(var(--th-glow), .6); }
.end-orb.won { background: radial-gradient(circle, var(--star-core), var(--star-mid) 50%, rgba(var(--star-glow), .2)); box-shadow: 0 0 70px 14px rgba(var(--star-glow), .6); animation: breathe 2.4s ease-in-out infinite; }
.end-card h2 { margin: 8px 0 0; font-family: var(--display); font-size: 2rem; }
.end-score { font-family: var(--display); font-size: 1.5rem; color: var(--accent); margin: 4px 0; }
.end-card p { color: var(--ink-soft); }
.xp-gain { font-weight: 700; color: var(--accent); margin-top: 8px; }
.unlocks { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.unlock { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--accent); animation: fadeIn .6s 1s both; }
.unlock .swatch { width: 44px; height: 30px; margin: 0; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

.toasts { position: fixed; z-index: 50; top: 70px; left: 50%; translate: -50% 0; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100vw - 32px)); }
.toast { background: rgba(14, 16, 40, .92); border: 1px solid var(--glass-edge); padding: 9px 18px; border-radius: 14px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: opacity .4s, transform .4s; animation: fadeIn .25s; }
.toast.error { border-color: rgba(255, 120, 140, .6); color: #FFD3DA; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.conn { position: fixed; z-index: 60; bottom: 16px; left: 50%; translate: -50% 0; background: #C2305A; color: #fff; padding: 6px 16px; border-radius: 99px; }

/* about */
.about { position: relative; z-index: 1; width: min(860px, calc(100% - 32px)); margin: 10px auto 60px; padding: 26px clamp(18px, 4vw, 42px); line-height: 1.65; color: var(--ink-soft);
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 22px; }
.about h2 { font-family: var(--display); font-size: 1.25rem; color: var(--ink); margin: 1.2em 0 .4em; } .about h2:first-child { margin-top: 0; }
.about p, .about li, .about dd { max-width: 70ch; }
.about strong, .about dt { color: var(--ink); }
.about dt { font-weight: 700; margin-top: .8em; } .about dd { margin: .2em 0 0; }
.about a { color: var(--accent); }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  :root { --bs: min(calc(100vw - 16px), calc(100dvh - 330px)); }
  .o-top { flex-wrap: wrap; gap: 8px; }
  .status { order: 3; width: 100%; padding: 4px 12px; min-height: 40px; }
  .meta { margin-left: auto; } .meta .code { display: none; }
  .arena { flex-direction: column; gap: 10px; }
  .console { width: 100%; max-width: 560px; padding: 10px 12px; gap: 10px; }
  .players { flex-direction: row; } .player { flex: 1; padding: 6px 8px; gap: 8px; }
  .moon-icon { width: 24px; height: 24px; } .p-score { font-size: 1.3rem; }
  .die { width: 48px; border-radius: 12px; }
  .dice-tray { min-height: 56px; }
  .panel-row, .choices { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .orbit-game { padding: 8px 8px 16px; }
  .toasts { top: auto; bottom: 14px; }
  /* Phones: skip live backdrop blur and the drifting nebula, which cost a lot of rendering time. */
  .glass, .die { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass { background: rgba(16, 18, 40, .92); }
  .space .nebula { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}