:root {
  --aubergine-900: #0c050f; --aubergine-800: #140918; --aubergine-700: #1d0d23;
  --brass-100: #ecd9a8; --brass-200: #d8bd80; --brass-300: #c19f5a; --brass-400: #a8843a;
  --parchment-1: #f5ecd2; --parchment-2: #d8cba9; --glow-warm-20: rgba(255,162,64,.20); --glow-warm-32: rgba(255,162,64,.32);
  --border-hairline: rgba(193,159,90,.18); --font-display: Georgia, "Iowan Old Style", serif; --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --motion-base: 220ms; --ease-standard: cubic-bezier(.4,0,.2,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); display: grid; place-items: center; overflow: hidden; background: var(--aubergine-900); color: var(--parchment-1); font: 16px/1.45 var(--font-body); }
.shell { width: min(100%,430px); height: min(680px,calc(100svh - 32px)); min-height: 570px; padding: 30px 22px 22px; display: flex; flex-direction: column; border: 1px solid var(--border-hairline); border-radius: 20px; background: radial-gradient(circle at 50% 35%,var(--surface-3) 0,var(--aubergine-700) 42%,var(--aubergine-900) 82%); box-shadow: 0 0 48px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.04); }
.game-header { text-align: center; } .eyebrow,.status-label { color: var(--brass-300); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 9px 0 4px; color: var(--parchment-1); font: 42px/1.1 var(--font-display); letter-spacing: -.02em; } .intro { margin: 0; color: var(--parchment-2); font-size: 15px; }
.status { width: max-content; min-width: 112px; margin: 25px auto 0; padding: 11px 18px; text-align: center; border: 1px solid var(--border-hairline); border-radius: 12px; background: rgba(12,5,15,.48); } .count { margin-top: 1px; color: var(--brass-100); font: 28px/1.1 var(--font-display); }
.board { position: relative; flex: 1; display: flex; align-items: center; justify-content: space-around; gap: 8px; padding: 26px 0 30px; } .orbit { position: absolute; inset: 20% 3% 17%; border: 1px solid rgba(193,159,90,.18); border-radius: 50%; transform: rotate(-9deg); pointer-events: none; }
.star { position: relative; z-index: 1; width: 68px; height: 68px; padding: 0; border: 0; color: var(--brass-100); background: transparent; cursor: pointer; font: 64px/1 var(--font-body); text-shadow: 0 0 14px var(--glow-warm-32),0 0 32px var(--glow-warm-20); filter: drop-shadow(0 4px 5px rgba(0,0,0,.3)); transition: transform var(--motion-base) var(--ease-standard),opacity var(--motion-base) var(--ease-standard); }
.star:nth-of-type(3) { transform: translateY(-24px) scale(1.12); } .star:hover:not(:disabled) { transform: translateY(-4px) scale(1.08); } .star:nth-of-type(3):hover:not(:disabled) { transform: translateY(-28px) scale(1.18); } .star:active:not(:disabled) { transform: scale(.95); } .star:focus-visible,.restart:focus-visible { outline: 2px solid var(--brass-200); outline-offset: 4px; border-radius: 8px; } .star.collected { opacity: .2; filter: grayscale(1); text-shadow: none; cursor: default; }
.victory { min-height: 65px; padding-top: 16px; text-align: center; border-top: 1px solid var(--border-hairline); color: var(--brass-100); font: 24px/1.15 var(--font-display); } .victory small { display: block; margin-top: 4px; color: var(--parchment-2); font: 13px/1.4 var(--font-body); } .hidden { visibility: hidden; }
.restart { align-self: center; min-height: 48px; padding: 11px 26px; border: 1px solid var(--brass-300); border-radius: 8px; color: var(--aubergine-900); background: linear-gradient(var(--brass-200),var(--brass-400)); box-shadow: 0 0 18px var(--glow-warm-20); cursor: pointer; font: 700 16px var(--font-body); transition: transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard); } .restart:hover { transform: translateY(-1px); box-shadow: 0 0 26px var(--glow-warm-32); } .restart:active { transform: scale(.97); }
@media (max-height:650px) { .shell { height: calc(100svh - 24px); min-height: 0; padding-top: 22px; } .status { margin-top: 16px; } .board { padding: 18px 0 20px; } .star { font-size: 54px; } }