/* Glimmer Coast — a single night-sky column; the map screen and the board screen swap in place, lit by lantern gold */
:root{
  --night:#0d1028;
  --dusk:#171c40;
  --panel:#1f2552;
  --line:#343c78;
  --ink:#eef0ff;
  --mute:#a3a9d6;
  --gold:#ffc94d;
  --gold-deep:#e59a1f;
  --ember:#ff7a63;
  --mint:#7be3a0;
  --heart:#ff6f8e;
  --unlit:#272d63;
  --display:'Lilita One','Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--night);
  background-image:radial-gradient(1200px 600px at 50% -10%,#232a66 0%,rgba(13,16,40,0) 60%);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
[hidden]{display:none!important}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;text-wrap:balance;margin:0;line-height:1.1}
p{margin:0}
#app{max-width:620px;margin:0 auto;padding-inline:16px;padding-block:calc(12px + env(safe-area-inset-top,0px)) calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:1.6rem;letter-spacing:.03em;color:var(--gold);text-shadow:0 0 20px rgba(255,201,77,.35)}
.wallet{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:800;font-variant-numeric:tabular-nums}
.pill .ic{color:var(--gold)}
.pill .heart{color:var(--heart)}
.pill small{font-weight:600;color:var(--mute);font-size:.78rem}
button.pill{cursor:pointer}
button.pill:hover{border-color:var(--gold)}

.btn{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#2a1700;border:0;border-radius:14px;padding:12px 18px;font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;box-shadow:0 4px 0 #9a5b06,0 0 24px rgba(255,201,77,.22);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #9a5b06}
.btn[disabled]{filter:grayscale(1) brightness(.6);cursor:not-allowed}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none;font-family:var(--body);font-weight:800;font-size:.95rem}
.btn.small{padding:7px 12px;font-size:.92rem;border-radius:11px}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--mute);font-weight:800}
.muted{color:var(--mute)}
.note{font-size:.8rem;color:var(--mute)}

/* Map */
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:800;font-size:.85rem;color:var(--mute)}
.tab[aria-selected="true"]{background:var(--panel);color:var(--gold);border-color:var(--gold)}
.tab[disabled]{opacity:.4;cursor:not-allowed}
.realm{display:flex;flex-direction:column;gap:10px}
.realm-head h1{font-size:2rem}
.story{color:var(--mute);max-width:62ch;min-height:2.9em}
.scene-wrap{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.scene{display:block;width:100%;height:auto}
.fog{border-radius:20px;border:1px solid var(--line);padding:28px 20px;text-align:center;background:radial-gradient(400px 160px at 50% 40%,rgba(164,107,255,.22),rgba(13,16,40,0)),var(--dusk);display:flex;flex-direction:column;gap:6px;align-items:center}
.fog b{font-family:var(--display);font-weight:400;font-size:2.4rem;color:var(--gold);font-variant-numeric:tabular-nums}

.task .halo,.task .beam{opacity:0;transition:opacity 1.2s ease}
.task.lit .halo{opacity:.5}
.task.lit .beam{opacity:1}
.task *{transition:fill .9s ease,stroke .9s ease}
.wall,.roof,.door,.trunk,.leaf,.span,.post,.hull,.mast,.sail,.tower,.stripe,.cap,.stone,.cloth,.cloth2,.fruit,.dome,.crystal,.waterfill,.blade,.bloom{fill:var(--unlit)}
.win,.bulb,.lamp,.face{fill:#363d7a}
.water,.steps,.hand{fill:none;stroke:#2c336e;stroke-linecap:round}
.water{stroke-width:3}.steps{stroke-width:5}.hand{stroke-width:2.5}
.lit .wall{fill:#d9a77a}.lit .roof{fill:#b8473a}.lit .door{fill:#6b3b2a}
.lit .win,.lit .bulb,.lit .lamp{fill:#ffd76a}
.lit .face{fill:#fff3cf}.lit .hand{stroke:#5a3418}
.lit .trunk{fill:#7a4b2e}.lit .leaf{fill:#3fae66}.lit .bloom{fill:#ff8fc2}
.lit .span{fill:#a0714a}.lit .post{fill:#6b4a30}
.lit .hull{fill:#b85a3a}.lit .mast{fill:#6b4a30}.lit .sail,.lit .blade{fill:#f3e7c9}
.lit .tower{fill:#f1ece0}.lit .stripe{fill:#d94a3c}.lit .cap{fill:#b8473a}
.lit .stone{fill:#b9b2a6}.lit .waterfill{fill:#5ec8ff}.lit .water{stroke:#8fdcff}
.lit .cloth{fill:#e2574c}.lit .cloth2{fill:#f2c94c}.lit .fruit{fill:#ff9f43}
.lit .dome{fill:#b9c4ff}.lit .crystal{fill:#9ff0ff}.lit .steps{stroke:#a0714a}
.blades{transform-box:view-box;transform-origin:95px 138px}
.lit .blades{animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.task-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--dusk);border:1px solid var(--line);border-radius:14px;padding:10px 12px;min-width:0}
.task-row .tname{font-weight:800}
.task-row.done{opacity:.7}
.task-row.done .tname::before{content:"✓ ";color:var(--mint)}

.levels{display:flex;flex-direction:column;gap:12px;background:var(--dusk);border:1px solid var(--line);border-radius:20px;padding:16px}
.levels h2{font-size:1.4rem}
.path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.node{aspect-ratio:1;max-width:100%;border-radius:50%;border:2px solid var(--line);background:var(--panel);font-family:var(--display);font-size:1.3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:0}
.node .tag{font-family:var(--body);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin-top:3px}
.node.done{background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold) 55%,var(--gold-deep));color:#2a1700;border-color:#ffe08a}
.node.current{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,201,77,.16),0 0 22px rgba(255,201,77,.4);animation:pulse 1.8s ease-in-out infinite}
.node.locked{opacity:.4;cursor:not-allowed}
.node.boss:not(.done){border-color:#8a63e6;background:radial-gradient(circle at 40% 35%,#3b2a7a,#1b1640)}
.node.boss.current{border-color:var(--gold)}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,201,77,.08),0 0 30px rgba(255,201,77,.55)}}
.levels .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.foot{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.8rem}
.foot a{color:var(--mute)}

/* Game */
.hud{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:stretch}
.box{background:var(--panel);border:1px solid var(--line);border-radius:16px}
.moves{padding:6px 14px;text-align:center;min-width:78px;display:flex;flex-direction:column;justify-content:center}
.moves b{font-family:var(--display);font-weight:400;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.moves.low b{color:var(--ember)}
.goals{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 10px}
.goal{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:1.3rem;font-variant-numeric:tabular-nums}
.goal img{width:30px;height:30px}
.goal.met b{color:var(--mint)}
.side{display:flex;flex-direction:column;gap:6px;align-items:stretch;justify-content:center}
.lvl{padding:4px 10px;text-align:center}
.lvl b{font-family:var(--display);font-weight:400;font-size:1.2rem}
.bossbar{display:flex;align-items:center;gap:10px;padding:8px 12px}
.bossbar .bname{font-family:var(--display);font-size:1.05rem;color:#c9a8ff;white-space:nowrap}
.hp{flex:1;height:12px;border-radius:999px;background:#0a0c22;overflow:hidden;border:1px solid #3a2f78}
.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#5b3fd1,#b07bff);transition:width .35s ease}
.board-wrap{position:relative;display:flex;justify-content:center}
#board{touch-action:none;border-radius:18px;box-shadow:0 0 0 1px var(--line),0 22px 60px rgba(0,0,0,.5);max-width:100%;display:block;user-select:none;-webkit-user-select:none}
.toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(1.4rem,6vw,2.2rem);color:var(--gold);text-shadow:0 3px 0 #7a4300,0 0 28px rgba(255,201,77,.65);pointer-events:none;white-space:nowrap;animation:toast 1.3s ease forwards}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.tray{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;font-size:.88rem}
.streak{font-weight:800;color:var(--gold)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(5,6,20,.74);display:grid;place-items:center;padding:16px;z-index:10}
.card{background:linear-gradient(180deg,#262d66,#1a1f4a);border:1px solid #4a54a0;border-radius:22px;padding:22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.55);max-height:calc(100% - 32px);overflow:auto}
.card h2{font-size:1.9rem;color:var(--gold)}
.card .actions{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;gap:14px;flex-wrap:wrap}
.reward{display:flex;gap:10px;flex-wrap:wrap}
.reward .pill{font-size:1.05rem}
.packs{display:grid;gap:8px}
.pack{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;background:var(--dusk);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.pack .pname{font-weight:800}
.pack .pinfo{font-size:.82rem;color:var(--mute);grid-column:1}
.pack .btn{grid-row:1 / span 2;grid-column:2}
.adbox{display:grid;place-items:center;aspect-ratio:16/9;max-width:100%;border-radius:14px;border:1px dashed #6b74c0;background:#11143a;font-family:var(--display);font-size:3rem;color:var(--mute)}
.days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.day{border:1px solid var(--line);background:var(--dusk);border-radius:12px;padding:8px 4px;text-align:center;display:flex;flex-direction:column;gap:2px}
.day b{font-family:var(--display);font-weight:400;font-size:1.1rem;font-variant-numeric:tabular-nums}
.day.past{opacity:.45}
.day.today{border-color:var(--gold);box-shadow:0 0 18px rgba(255,201,77,.35)}
.day.big{grid-column:span 2}
[data-screen]{display:flex;flex-direction:column;gap:14px}
@media (max-width:420px){.goal img{width:24px;height:24px}.goal{font-size:1.1rem}.moves b{font-size:1.8rem}.realm-head h1{font-size:1.7rem}.brand{font-size:1.35rem}}
@media (prefers-reduced-motion:reduce){.node.current,.lit .blades{animation:none}.toast{animation-duration:2s}}