:root {
  --ink: #111827;
  --night: #0d1220;
  --night-2: #151d30;
  --paper: #f6f1e8;
  --cream: #fffaf2;
  --muted: #778198;
  --gold: #f6c85f;
  --mint: #76dfc2;
  --coral: #ff866f;
  --line: rgba(255,255,255,.13);
  --shadow: 0 24px 80px rgba(0,0,0,.18);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, a { font: inherit; }
button { cursor: pointer; }
.page-shell { max-width: 1440px; margin: 0 auto; overflow: hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 24px 6vw; color: var(--cream); background: var(--night); }
.brand { display:flex; gap:12px; align-items:center; color:var(--cream); text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.2em; }
.brand-mark { width:25px; height:25px; position:relative; display:inline-block; }
.brand-mark:before, .brand-mark:after { content:""; position:absolute; inset:5px; border:1px solid var(--gold); border-radius:50%; }
.brand-mark:after { inset:10px; border-color:var(--mint); }
.brand-mark i { position:absolute; width:3px; height:3px; background:var(--gold); border-radius:50%; }
.brand-mark i:nth-child(1){top:2px;left:11px}.brand-mark i:nth-child(2){right:1px;top:11px;background:var(--mint)}.brand-mark i:nth-child(3){bottom:2px;left:8px;background:var(--coral)}
.topbar-note { color:#aab5c8; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.live-dot,.timer-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mint); margin-right:8px; box-shadow:0 0 0 4px rgba(118,223,194,.12); }
.hero { display:grid; grid-template-columns: 1.05fr .95fr; min-height:530px; background:var(--night); color:var(--cream); padding: 54px 9vw 75px; gap:50px; position:relative; }
.hero:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:75px; background:var(--paper); clip-path: polygon(0 80%, 12% 70%, 22% 82%, 35% 62%, 51% 78%, 65% 52%, 82% 76%, 100% 58%, 100% 100%, 0 100%); }
.hero-copy { align-self:center; position:relative; z-index:2; }
.eyebrow { margin:0 0 16px; color:var(--mint); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2 { font-family: Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.045em; margin:0; }
h1 { font-size:clamp(58px, 8vw, 112px); line-height:.88; }
h1 em,h2 em { color:var(--gold); font-style:italic; }
.hero-text { max-width:460px; color:#b9c2d2; font-size:16px; line-height:1.65; margin:28px 0 30px; }
.hero-actions { display:flex; align-items:center; gap:24px; }
.primary-btn,.check-btn { border:0; border-radius:999px; padding:14px 20px; background:var(--gold); color:var(--ink); font-weight:800; box-shadow:0 8px 22px rgba(246,200,95,.2); transition: transform .2s ease, box-shadow .2s ease; }
.primary-btn:hover,.check-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(246,200,95,.3); }
.text-btn { border:0; background:none; color:var(--cream); padding:10px 0; border-bottom:1px solid rgba(255,255,255,.35); }
.constellation-card { position:relative; align-self:center; min-height:340px; border:1px solid var(--line); background:radial-gradient(circle at 50% 45%, rgba(74,100,148,.26), transparent 55%), #10192b; overflow:hidden; }
.constellation-card:before { content:""; position:absolute; inset:20px; border:1px dashed rgba(246,200,95,.2); border-radius:50%; transform:rotate(-16deg); }
.orbit { position:absolute; inset:48px 42px; border:1px solid rgba(118,223,194,.25); border-radius:50%; transform:rotate(35deg); }.orbit-two{inset:90px 20px;transform:rotate(-30deg);border-color:rgba(255,134,111,.2)}
.constellation-star { position:absolute; color:var(--gold); font-size:30px; filter:drop-shadow(0 0 12px rgba(246,200,95,.7)); }.s1{top:72px;left:27%}.s2{top:40%;right:25%;color:var(--mint)}.s3{bottom:65px;left:42%;color:var(--coral)}
.constellation-line { position:absolute; height:1px; background:linear-gradient(90deg, transparent, rgba(246,200,95,.75), transparent); transform-origin:left center; }.l1{width:190px;top:105px;left:31%;transform:rotate(24deg)}.l2{width:160px;top:46%;left:44%;transform:rotate(110deg);background:linear-gradient(90deg, transparent, rgba(118,223,194,.7), transparent)}
.card-caption { position:absolute; bottom:22px; left:24px; color:#8794ac; font-size:10px; line-height:1.6; letter-spacing:.16em; }.card-caption strong{color:var(--cream);font-size:12px;letter-spacing:.12em}
.game-layout { background:var(--paper); display:grid; grid-template-columns:minmax(0, 820px) 280px; gap:28px; padding:30px 9vw 90px; align-items:start; }
.game-card { background:var(--cream); border:1px solid #e4ddd0; box-shadow:var(--shadow); padding:clamp(20px,3vw,38px); }
.game-head { display:flex; justify-content:space-between; align-items:start; gap:15px; }.game-head h2{font-size:38px}.difficulty-pill{display:inline-block;vertical-align:middle;margin-left:9px;font:800 10px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;border-radius:999px;background:#d9f6ed;color:#16705b}
.timer { color:var(--muted); font-variant-numeric:tabular-nums; font-size:13px; padding-top:10px; }.timer-dot{background:var(--coral);box-shadow:0 0 0 4px rgba(255,134,111,.13)}
.rule-strip { display:flex; flex-wrap:wrap; gap:8px 18px; border-top:1px solid #e8e0d4; border-bottom:1px solid #e8e0d4; margin:24px 0 28px; padding:12px 0; color:#798195; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }.rule-strip span:before{content:"·";color:var(--coral);font-size:16px;margin-right:6px}
.quick-start { border:1px solid #e5d8bf; background:#fff8e9; padding:16px 18px; margin:-8px 0 24px; }.quick-start-title { display:flex; justify-content:space-between; align-items:center; gap:12px; }.quick-start-title span { color:#ad7920; font-size:10px; font-weight:800; letter-spacing:.14em; }.quick-start-title strong { font:400 18px/1.1 Georgia,serif; color:var(--ink); }.quick-steps { display:flex; flex-wrap:wrap; gap:8px 18px; margin:13px 0 9px; color:#4b5568; font-size:11px; font-weight:700; }.quick-steps b { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:5px; border-radius:50%; background:var(--coral); color:#fff; font-size:10px; }.quick-start p { margin:0; color:#747d8e; font-size:12px; line-height:1.55; }.board-wrap { display:flex; justify-content:center; }.board { width:min(100%, 520px); aspect-ratio:1; display:grid; grid-template-columns:repeat(5,1fr); border:3px solid var(--ink); background:var(--ink); gap:1px; }
.cell { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; border:0; font-size:clamp(24px,5vw,42px); font-weight:400; color:var(--ink); transition:filter .15s ease, transform .15s ease; }.cell:hover{filter:brightness(1.05)}.cell:focus-visible{outline:3px solid var(--coral);outline-offset:-4px;z-index:2}.cell.mark-x{font-size:clamp(24px,5vw,38px);color:rgba(17,24,39,.36)}.cell.mark-star{color:#172035;text-shadow:0 1px 0 rgba(255,255,255,.25)}.cell.wrong{box-shadow:inset 0 0 0 4px var(--coral);background:#ffd4c9!important}.cell.correct{box-shadow:inset 0 0 0 4px var(--mint)}.cell.hint{animation:hintPulse 1.1s ease-in-out 2;box-shadow:inset 0 0 0 4px var(--gold),0 0 0 5px rgba(246,200,95,.18)}@keyframes hintPulse{0%,100%{transform:scale(1)}50%{transform:scale(.93)}}
.zone-0{background:#f8dc9a}.zone-1{background:#bce9df}.zone-2{background:#f7b9a8}.zone-3{background:#cad2f4}.zone-4{background:#e4c7eb}
.game-controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }.control-btn{border:1px solid #ded6c8;background:#fffdf8;color:#586173;padding:10px 13px;border-radius:8px;font-size:12px;font-weight:700}.control-btn.active{border-color:var(--ink);background:var(--ink);color:var(--cream)}.tool-star{color:var(--gold);font-size:17px;vertical-align:-1px}.active .tool-star{color:var(--gold)}.tool-x{font-size:19px;vertical-align:-2px}.check-btn{margin-left:auto;padding:10px 17px;font-size:12px}.next-btn{border:0;border-radius:999px;padding:10px 17px;background:var(--mint);color:var(--ink);font-size:12px;font-weight:800}.next-btn[hidden]{display:none}.game-status{min-height:20px;margin:16px 0 0;color:#778198;font-size:13px}.game-status.success{color:#16856a;font-weight:700}.game-status.error{color:#c64a3c;font-weight:700}
.side-rail { display:grid; gap:16px; }.rail-card{background:#ebe4d8;border:1px solid #ddd3c3;padding:20px}.rail-label{display:flex;justify-content:space-between;align-items:center;color:#747d8e;font-size:10px;font-weight:800;letter-spacing:.13em}.rail-label strong{color:var(--ink);font-size:11px;letter-spacing:0}.progress-bar{height:7px;background:#d7cec0;border-radius:99px;margin:18px 0 13px;overflow:hidden}.progress-bar span{display:block;height:100%;width:0;background:var(--coral);border-radius:99px;transition:width .3s ease}.rail-card p{color:#768093;font-size:12px;line-height:1.55;margin:0}.levels-card{background:var(--night);border-color:var(--night);color:var(--cream)}.levels-card .rail-label{color:#9ca8bb}.soon-label{color:var(--gold);font-size:9px}.level-row{width:100%;display:flex;justify-content:space-between;border:0;border-bottom:1px solid var(--line);background:none;color:#b8c1d0;padding:15px 0;text-align:left;font-size:12px}.level-row:last-child{border-bottom:0}.level-row b{display:inline-block;color:var(--gold);font:italic 15px Georgia,serif;margin-right:8px}.level-row.current{color:var(--cream)}.level-row:disabled{opacity:.5;cursor:not-allowed}.hint-card{display:flex;gap:15px;align-items:start;background:#f9e7b7;border-color:#f1d591}.hint-symbol{font-size:27px;color:#b78325}.hint-card strong{font-family:Georgia,serif;font-size:18px;font-weight:400}.hint-card p{margin-top:6px;color:#79663d}
.rules{background:#fffaf2;border-top:1px solid #e6dfd4;padding:90px 9vw}.section-heading h2{font-size:clamp(42px,5vw,74px);line-height:.95}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:54px}.rule-grid article{border-top:2px solid var(--ink);padding-top:18px}.rule-number{color:var(--coral);font:italic 25px Georgia,serif}.rule-grid h3{margin:24px 0 9px;font:600 18px/1.1 Georgia,serif}.rule-grid p{margin:0;color:#778198;font-size:13px;line-height:1.6;max-width:230px}
.footer{display:flex;justify-content:space-between;padding:24px 9vw;background:var(--night);color:#8793a8;font-size:11px;letter-spacing:.04em}.footer span:last-child{color:#59667e}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding:45px 7vw 85px}.constellation-card{min-height:250px}.game-layout{grid-template-columns:1fr;padding:24px 5vw 65px}.side-rail{grid-template-columns:repeat(2,1fr)}.hint-card{grid-column:1/-1}.rules{padding:65px 7vw}.footer{padding:22px 7vw}}
@media (max-width:560px){.topbar{padding:18px 5vw}.topbar-note{font-size:9px}.hero{padding:38px 5vw 75px}.hero-text{font-size:14px}.hero-actions{gap:15px;flex-wrap:wrap}.primary-btn{padding:13px 16px}.game-card{padding:18px}.game-head h2{font-size:30px}.rule-strip{gap:5px 12px;font-size:9px}.game-controls{gap:7px}.control-btn{padding:9px 10px}.quick-start-title{align-items:flex-start;flex-direction:column;gap:6px}.quick-steps{display:grid;grid-template-columns:1fr;gap:7px}.check-btn,.next-btn{width:100%;margin-left:0}.side-rail{grid-template-columns:1fr}.rules{padding:58px 5vw}.rule-grid{grid-template-columns:1fr;gap:28px;margin-top:35px}.rule-grid p{max-width:none}.footer{display:block;padding:20px 5vw}.footer span{display:block}.footer span+span{margin-top:8px}}



/* First-release fixes: clear rules, bounded regions and usable touch controls. */
.goal-box { display:grid; gap:6px; margin:0 0 18px; padding:14px 16px; background:#172035; color:#fffaf2; border-left:4px solid var(--gold); }
.goal-box strong { display:block; font-size:14px; line-height:1.3; }
.goal-box span { display:block; color:#d1d7e2; font-size:13px; line-height:1.55; }
.cell { touch-action:manipulation; border-top:3px solid transparent; border-left:3px solid transparent; }
.cell.region-top { border-top-color:var(--ink); }
.cell.region-left { border-left-color:var(--ink); }
.control-btn, .check-btn, .next-btn, .level-row { min-height:44px; touch-action:manipulation; }
button:disabled { opacity:.5; cursor:default; }
.level-row:focus-visible, .control-btn:focus-visible, .check-btn:focus-visible, .next-btn:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
.game-status { line-height:1.6; color:#505e74; }
.rule-strip, .rule-grid p, .quick-start p, .rail-card p { color:#535d6d; }
.game-head .eyebrow { color:#16705b; }
.guide-copy { max-width:850px; margin:64px auto 0; color:#394253; }
.guide-copy h2 { font-size:clamp(28px,4vw,40px); line-height:1.15; margin:48px 0 18px; }
.guide-copy h3 { font:600 21px/1.3 Georgia,serif; margin:28px 0 12px; }
.guide-copy p { font-size:16px; line-height:1.8; margin:0 0 18px; }
.guide-copy a { color:#16705b; text-underline-offset:3px; overflow-wrap:anywhere; }
@media (max-width:560px) {
  .game-head { flex-wrap:wrap; }
  .game-head h2 { font-size:27px; }
  .rail-label { gap:8px; letter-spacing:.06em; }
  .hero .constellation-card { display:none; }
  .hero { padding-bottom:38px; }
  .rule-strip { margin:18px 0 24px; }
  .game-card { padding:14px; }
  .guide-copy { margin-top:38px; }
  .guide-copy p { font-size:15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

.board { grid-template-rows:repeat(5,minmax(0,1fr)); }
.cell { padding:0; min-height:0; line-height:1; }
.footer a { color:#c3cada; }
.analytics-settings { border:0; background:none; color:#c3cada; padding:4px 0; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.analytics-settings[hidden], .analytics-consent[hidden] { display:none; }
.analytics-consent { position:fixed; z-index:20; left:20px; right:20px; bottom:20px; max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:24px; padding:20px 24px; background:var(--cream); color:var(--ink); border:1px solid #cfc5b5; box-shadow:0 8px 36px rgba(13,18,32,.2); }
.analytics-consent-copy { flex:1; min-width:0; }
.analytics-consent strong { font:600 18px/1.3 Georgia,serif; }
.analytics-consent p { margin:8px 0; font-size:13px; line-height:1.5; color:#535d6d; }
.analytics-consent a { color:#16705b; font-size:12px; text-underline-offset:3px; }
.analytics-consent .analytics-choice { font-size:12px; }
.analytics-consent-actions { display:flex; flex-wrap:wrap; gap:10px; }
.consent-btn { min-height:44px; border:1px solid #586173; background:var(--cream); color:var(--ink); border-radius:8px; padding:10px 14px; font-size:12px; font-weight:700; }
.consent-btn:hover { background:#f1e7d5; }
.consent-btn:focus-visible, .analytics-settings:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
@media (max-width:700px) {
  .analytics-consent { left:12px; right:12px; bottom:12px; flex-direction:column; align-items:stretch; gap:12px; padding:16px; }
  .analytics-consent-actions { display:grid; grid-template-columns:1fr 1fr; }
}