:root{
  --bg:#1d1a2b; --panel:#2a2540; --line:#463d66; --ink:#f4efe6; --mute:#a59fbf;
  --past:#e0a64a; --present:#6fcf5a; --future:#4fe0ff; --accent:#ff7a59;
  --eraC:var(--present);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'DotGothic16',system-ui,sans-serif;
  transition:background .4s;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
body.era-0{--eraC:var(--past); background:#2b2119}
body.era-1{--eraC:var(--present); background:#18261c}
body.era-2{--eraC:var(--future); background:#141a2e}
button{font-family:inherit;color:inherit;cursor:pointer}
kbd{font-family:inherit;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;font-size:.85em;background:#0003}
#app{max-width:760px;margin:0 auto;padding:8px 16px 16px;display:flex;flex-direction:column;gap:8px;min-height:100%}

#top{display:flex;align-items:center;gap:10px}
.ibtn{width:40px;height:40px;border:2px solid var(--line);background:var(--panel);border-radius:8px;font-size:18px;flex:none}
.ibtn.off{opacity:.45}
#lvInfo{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
#lvNo{color:var(--eraC);font-size:22px;transition:color .4s}
#lvName{font-size:18px;overflow:hidden;text-overflow:ellipsis}
#counter{text-align:right;font-size:14px;line-height:1.35}
#counter b{font-size:17px}
.par{color:var(--mute);margin-left:4px}
#vegs{display:flex;gap:2px;justify-content:flex-end;min-height:18px}
#vegs canvas{width:18px;height:18px;image-rendering:pixelated}
#vegs canvas.no{opacity:.3;filter:grayscale(1)}

#eras{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.era{position:relative;border:2px solid var(--line);border-radius:8px;background:#0004;padding:4px;cursor:pointer;transition:border-color .25s,transform .25s,opacity .25s;opacity:.75}
.era canvas{display:block;width:100%;height:auto;border-radius:4px}
.era .elbl{text-align:center;font-size:13px;margin-top:3px;color:var(--mute)}
.era[data-era="0"] .elbl{color:var(--past)} .era[data-era="1"] .elbl{color:var(--present)} .era[data-era="2"] .elbl{color:var(--future)}
.era.cur{opacity:1;transform:translateY(-2px)}
.era[data-era="0"].cur{border-color:var(--past)} .era[data-era="1"].cur{border-color:var(--present)} .era[data-era="2"].cur{border-color:var(--future)}
.era .eblock{display:none;position:absolute;right:6px;top:4px;color:#ff5a5a;font-size:18px;text-shadow:0 0 3px #000}
.era.blocked .eblock{display:block}
.era.flash{animation:flash .7s}
.era .emark{display:none;position:absolute;left:6px;top:4px;color:#ffd84a;font-size:14px;text-shadow:0 0 3px #000}
.era.edited .emark{display:block}
.era.rewind::after{content:'↺ もとにもどった';position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);white-space:nowrap;background:#000c;border:2px solid #ffd84a;color:#ffd84a;border-radius:12px;padding:1px 8px;font-size:12px;animation:rewind 1.8s forwards;pointer-events:none}
@keyframes rewind{0%{opacity:0;transform:translate(-50%,-50%) rotate(-25deg) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px #fff,0 0 16px 4px var(--accent)}}

#stage{position:relative;display:flex;justify-content:center;align-items:center;flex:1;min-height:160px}
#cv{display:block;image-rendering:pixelated;border-radius:6px;box-shadow:0 0 0 3px #0006,0 0 24px -4px var(--eraC);transition:box-shadow .4s;touch-action:none}
#toasts{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;gap:6px}
.toast{background:#000b;border:2px solid var(--eraC);padding:4px 12px;border-radius:20px;font-size:15px;animation:toast 1.6s forwards}
.toast.warn{border-color:#ffd84a;color:#ffe9a0;animation-duration:3s}
@keyframes toast{0%{opacity:0;transform:translateY(8px) scale(.9)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
#tip{margin:0;text-align:center;color:var(--mute);font-size:14px;min-height:1.4em}

#pad{display:none;justify-content:space-between;align-items:center;gap:12px;user-select:none}
#pad button{border:2px solid var(--line);background:var(--panel);border-radius:10px;font-size:18px;touch-action:manipulation}
#pad button:active{background:var(--line)}
#pad small{display:none}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:3px;flex:none}
.dpad .u{grid-area:1/2} .dpad .l{grid-area:2/1} .dpad .d{grid-area:3/2} .dpad .r{grid-area:2/3}
.side{display:flex;flex-direction:column;gap:8px;flex:1;max-width:240px}
.warp,.util{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.warp button{height:56px}
.warp .q{color:var(--past)} .warp .e{color:var(--future)}
.util button{height:42px;font-size:14px!important}
@media (pointer:coarse),(max-width:600px){#pad{display:flex}}

.overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10;backdrop-filter:blur(2px)}
.overlay.hidden{display:none}
.panel{background:var(--panel);border:3px solid var(--line);border-radius:14px;padding:18px;max-width:560px;width:100%;max-height:100%;overflow:auto;text-align:center}
#logo{width:100%;max-width:360px;height:auto;image-rendering:pixelated;display:block;margin:0 auto}
.panel h1{margin:4px 0 0;font-size:40px;letter-spacing:4px;background:linear-gradient(90deg,var(--past),var(--present),var(--future));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:normal}
.sub{color:var(--mute);margin:6px 0 10px;font-size:14px}
#stars{color:#ffd84a;margin-bottom:10px}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.chap{grid-column:1/-1;text-align:left;color:var(--eraC);font-size:15px;margin-top:6px;border-bottom:1px dashed var(--line);padding-bottom:2px}
.lvb{border:2px solid var(--line);background:#0003;border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.lvb .n{font-size:22px}
.lvb .s{font-size:12px;color:#ffd84a;letter-spacing:1px}
.lvb .nm{font-size:10px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lvb:hover:not(:disabled){border-color:var(--eraC)}
.lvb.next{border-color:var(--accent);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 12px var(--accent)}}
.lvb:disabled{opacity:.35;cursor:default}
.keys{color:var(--mute);font-size:12px;margin:12px 0 0;line-height:1.9}
#clear h2{margin:0;font-size:34px;color:#ffd84a;font-weight:normal}
#clStars{font-size:44px;letter-spacing:6px;margin:6px 0}
#clStars span{display:inline-block;color:#4a4560}
#clStars span.on{color:#ffd84a;animation:star .45s backwards}
@keyframes star{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.4)}100%{transform:none}}
#clText{color:var(--mute);margin:4px 0 14px}
.btns{display:flex;gap:10px;justify-content:center}
.btns button{border:2px solid var(--line);background:#0003;border-radius:10px;padding:10px 18px;font-size:17px}
.btns .go{background:var(--accent);border-color:var(--accent);color:#1d1a2b}