:root{
  --navy:#0d2350; --navy-deep:#081737; --blue:#1a6fd4; --green:#00a05a;
  --yellow:#f5b800; --red:#e8312f; --ink:#f4f7fb; --muted:#9db0cd;
  --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{
  background:radial-gradient(900px 500px at 20% -10%, #17357a 0%, transparent 60%), var(--navy-deep);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-text-size-adjust:100%;
}
#app{max-width:640px;margin:0 auto;padding:16px 16px 40px;}
h1{margin:4px 0 2px;font-size:26px;}
.sub{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.5;}
.nav{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;}
.nav a{color:var(--muted);text-decoration:none;}
.nav a:hover{color:var(--ink);}

.menu-hero{
  display:block;width:100%;padding:18px;margin-bottom:14px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(135deg,#0f8f55,#00a05a);color:#fff;font-size:20px;font-weight:700;
  cursor:pointer;text-align:left;
}
.menu-hero small{display:block;font-weight:400;font-size:13px;opacity:.9;margin-top:2px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
.rbtn{
  padding:14px 8px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:16px;cursor:pointer;text-align:center;font-family:inherit;
}
.rbtn:hover{background:rgba(255,255,255,.14);}
.rbtn .best{display:block;font-size:12px;color:var(--yellow);margin-top:2px;min-height:15px;}

.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.bar h2{margin:0;font-size:20px;}
.btn{
  padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:14px;cursor:pointer;font-family:inherit;
}
.btn.primary{background:var(--blue);border-color:var(--blue);}
.btn:hover{filter:brightness(1.15);}
.tog{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);cursor:pointer;}

.stage{
  position:relative;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:#0a1c42;border:1px solid var(--line);
}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;}
.tip{margin:10px 2px;color:var(--muted);font-size:14px;text-align:center;min-height:20px;}
.tip.err{color:#ff9d9b;}

.result{margin-top:12px;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line);}
.score{font-size:56px;font-weight:800;line-height:1;color:var(--yellow);}
.score span{font-size:20px;color:var(--muted);font-weight:500;}
.grade{font-size:18px;margin:6px 0 10px;}
.parts{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;font-size:14px;color:var(--muted);}
.meter{height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;}
.meter i{display:block;height:100%;background:var(--green);}
.note{margin-top:8px;font-size:13px;color:var(--muted);}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted);margin-top:8px;}
.legend b{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px;}
.btn{text-decoration:none;display:inline-block;}
.foot{max-width:640px;margin:0 auto;padding:8px 16px 32px;text-align:center;font-size:13px;color:var(--muted);}
.foot a{color:var(--yellow);}
.menu-hero.circle{background:linear-gradient(135deg,#1a6fd4,#2a52be);margin:0;}
.rules{margin:4px 2px 0;font-size:13px;line-height:1.6;color:var(--muted);text-align:center;}
.rules b{color:var(--ink);}