/* 太陽系遊戲間・共用樣式（5 個遊戲共用；match.html 有自己的樣式） */
:root{
  --bg:#060a18; --panel:rgba(14,22,46,.82); --line:rgba(170,190,255,.22);
  --ink:#F2F4FF; --muted:#AEB6D6; --gold:#F4C95D; --gold-ink:#2A1E00;
  --green:#7FD6A4; --pink:#F58FA8;
  --font:'Huninn','PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;overflow-x:hidden}
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 20% 0%,rgba(80,100,200,.25),transparent 60%),radial-gradient(ellipse at 90% 100%,rgba(160,80,160,.18),transparent 55%),var(--bg)}
#sky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.15}}
main{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
.back{display:inline-flex;align-items:center;gap:4px;margin-bottom:10px;text-decoration:none;color:var(--ink);font-size:14px;padding:6px 13px;border-radius:999px;background:rgba(5,9,20,.6);border:1px solid var(--line)}
.back:focus-visible{outline:3px solid #fff;outline-offset:2px}
header h1{margin:0;font-size:24px;font-weight:400;letter-spacing:.06em}
header p{margin:2px 0 0;color:var(--muted);font-size:14px}
.screen{display:none}
.screen.on{display:block;animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
button{font-family:inherit;cursor:pointer;color:inherit}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:14px 16px;font-size:18px;background:var(--gold);color:var(--gold-ink)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--line)}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,.planet:focus-visible,.opt:focus-visible,.spk:focus-visible{outline:3px solid #fff;outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dd{flex:none;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font-size:15px}
.ddrow{display:flex;gap:12px;align-items:flex-start}
.ddrow p{margin:0}
label.lb{display:block;margin:16px 0 6px;color:var(--muted);font-size:14px}
input[type=text],input[type=number]{width:100%;font:inherit;font-size:18px;color:var(--ink);background:rgba(255,255,255,.06);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
input:focus{outline:none;border-color:var(--gold)}
.clue{position:relative;background:#FFF7E2;color:#3A2E12;border-radius:18px;padding:16px 58px 16px 16px;min-height:80px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.clue .tag{display:inline-block;font-size:13px;background:#F4C95D;color:#3A2E12;border-radius:99px;padding:1px 10px;margin-bottom:6px}
.clue .txt{font-size:19px;line-height:1.55}
.clue.done{background:#E6F7EC;color:#1E3A2A}.clue.done .tag{background:#7FD6A4;color:#123322}
.clue.shake,.wiggle{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.spk{position:absolute;right:10px;top:10px;width:42px;height:42px;border-radius:50%;border:0;background:#3A2E12;color:#FFF7E2;font-size:19px;display:grid;place-items:center}
.spk.on{background:#C46A1B}
.spk.inline{position:static;flex:none;width:36px;height:36px;font-size:16px;background:rgba(255,255,255,.12);color:var(--ink)}
.spk.inline.on{background:#C46A1B}
.hint{margin:10px 2px 0;min-height:26px;color:var(--gold);font-size:16px;opacity:0;transition:opacity .3s}
.hint.on{opacity:1}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.planet{position:relative;border:1.5px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);border-radius:16px;padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;transition:border-color .3s,background .3s,box-shadow .3s,opacity .3s}
.planet img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:50%;transition:filter .4s}
.planet.lit{border-color:var(--gold);background:rgba(244,201,93,.1)}
.planet.flash{box-shadow:0 0 0 3px var(--gold),0 0 28px 6px rgba(244,201,93,.6)}
.planet:disabled{cursor:default}
.say{display:none;margin-top:12px;background:var(--panel);border:1.5px solid var(--gold);border-radius:18px;padding:14px}
.say.on{display:block;animation:fadein .35s}
.say p{margin:0;font-size:17px}
.say .btn{margin-top:12px}
.opts{display:grid;gap:10px;margin-top:12px}
.opt{text-align:left;border:1.5px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);border-radius:14px;padding:12px 14px;font-size:17px}
.opt b{color:var(--gold);margin-right:6px}
.opt.right,.opt.sel{border-color:var(--green);background:rgba(127,214,164,.15)}
.bar{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--muted);font-size:14px}
.bar .track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar .fill{height:100%;width:0;background:var(--gold);border-radius:99px;transition:width .5s}
.h2{font-size:22px;margin:18px 0 4px;font-weight:400}
.sub{color:var(--muted);margin:0 0 12px;font-size:14px}
footer{margin-top:26px;text-align:center;color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a.btn{text-align:center;text-decoration:none;box-sizing:border-box}