:root { color-scheme: dark; --bg:#14171d; --panel:#1c212b; --line:#2c3340; --ink:#e8ecf3; --sub:#8f9bb0; --accent:#ffb454; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif; overflow:hidden; overscroll-behavior:none; }
#app { height:100dvh; display:grid; grid-template-rows: 4fr 1fr; padding-bottom: env(safe-area-inset-bottom); }
#stage { position:relative; min-height:0; touch-action:none; background:radial-gradient(120% 90% at 50% 20%, #2a3242, #12151b); }
#glow { position:absolute; inset:0; opacity:0; pointer-events:none; background:radial-gradient(60% 45% at 50% 52%, #fff2c8cc, #ffd98a44 55%, transparent 80%); }
#gl { position:relative; width:100%; height:100%; display:block; }
#progress { position:absolute; left:12px; top:10px; font-size:13px; color:var(--sub); font-variant-numeric:tabular-nums; pointer-events:none; }
#toast { position:absolute; left:50%; top:14px; transform:translateX(-50%); background:#0009; padding:8px 14px; border-radius:999px; font-size:13px; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; }
#toast.on { opacity:1; }
#done { position:absolute; left:0; right:0; top:34px; display:grid; place-items:center; pointer-events:none; }
#done[hidden] { display:none; }
#done div { text-align:center; display:grid; gap:8px; }
#done b { font-size:34px; letter-spacing:.1em; color:var(--accent); text-shadow:0 2px 8px #000a; }
#done button { pointer-events:auto; font:inherit; padding:8px 20px; border:0; border-radius:999px; background:var(--accent); color:#222; font-weight:700; }
#tray { background:var(--panel); border-top:1px solid var(--line); display:grid; grid-template-rows:auto 1fr; min-height:0; }
#tabs { display:flex; gap:6px; padding:6px 10px 0; }
#tabs button { font:inherit; font-size:13px; padding:5px 14px; border:0; border-radius:8px 8px 0 0; background:transparent; color:var(--sub); }
#tabs button.on { background:var(--bg); color:var(--ink); font-weight:700; }
#tabs i { font-style:normal; font-size:11px; opacity:.8; margin-left:2px; }
#drum { position:relative; min-height:0; background:var(--bg); perspective:520px; overflow:hidden; }
#items { height:100%; display:flex; align-items:center; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; touch-action:pan-x; scrollbar-width:none; padding:0 calc(50% - 40px); transform-style:preserve-3d; }
#items::-webkit-scrollbar { display:none; }
.item { flex:0 0 80px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; scroll-snap-align:center; user-select:none; -webkit-user-select:none; will-change:transform; }
.item canvas { width:72px; height:72px; pointer-events:none; }
.item span { font-size:11px; color:var(--ink); white-space:nowrap; pointer-events:none; }
.empty { margin:auto; color:var(--sub); font-size:13px; white-space:nowrap; position:absolute; left:50%; transform:translateX(-50%); }
#ghost { position:fixed; z-index:20; pointer-events:none; transform:translate(-50%,-50%) scale(1.5); filter:drop-shadow(0 6px 10px #0008); transition:opacity .15s; }
#credit { position:absolute; left:8px; bottom:6px; z-index:5; font:inherit; font-size:10px; color:var(--sub); background:none; border:0; padding:4px; opacity:.8; }
#credit u { text-underline-offset:2px; }
#credits { position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:#000a; padding:16px; }
#credits[hidden] { display:none; }
#credits .box { max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:12px; line-height:1.6; color:var(--ink); }
#credits b { font-size:14px; }
#credits p { margin:8px 0; overflow-wrap:anywhere; }
#credits button { font:inherit; font-size:13px; margin-top:6px; padding:7px 18px; border:0; border-radius:999px; background:var(--line); color:var(--ink); }
#guide { position:fixed; inset:0; z-index:10; pointer-events:none; }
#guide[hidden] { display:none; }
#guide .msg { position:absolute; left:50%; top:var(--msg); transform:translateX(-50%); background:#0b0e13d9; border:1px solid #ffffff22; padding:9px 16px; border-radius:999px; font-size:15px; white-space:nowrap; box-shadow:0 4px 14px #0008; animation:guideMsg 2.4s ease-in-out infinite; }
#guide .msg b { color:var(--accent); }
#guide .finger, #guide .trail { position:absolute; left:var(--x); top:var(--y); }
#guide .finger { width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:#fffffff0; box-shadow:0 0 0 6px #ffffff40, 0 4px 10px #0009; animation:guideFinger 2.4s cubic-bezier(.5,0,.3,1) infinite; }
#guide .trail { width:6px; height:calc(-1 * var(--rise)); margin-left:-3px; transform:translateY(var(--rise)); transform-origin:bottom; border-radius:3px; background:linear-gradient(#ffb45400, #ffb454cc); animation:guideTrail 2.4s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes guideFinger {
  0% { opacity:0; transform:translateY(0) scale(1.25); }
  12% { opacity:1; transform:translateY(0) scale(1.25); }
  24% { transform:translateY(0) scale(.9); }
  70% { opacity:1; transform:translateY(var(--rise)) scale(.9); }
  85%, 100% { opacity:0; transform:translateY(var(--rise)) scale(1.1); }
}
@keyframes guideTrail { 0%, 24% { opacity:0; transform:translateY(var(--rise)) scaleY(0); } 70% { opacity:1; transform:translateY(var(--rise)) scaleY(1); } 85%, 100% { opacity:0; transform:translateY(var(--rise)) scaleY(1); } }
@keyframes guideMsg { 0%, 100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #guide .finger { animation:none; opacity:1; transform:translateY(calc(var(--rise) / 2)) scale(.9); } #guide .trail, #guide .msg { animation:none; } }
@media (min-width: 900px) { #app { max-width:520px; margin:0 auto; border-inline:1px solid var(--line); } }