:root{
  --bg:#05070c;
  --card:rgba(16,18,24,.72);
  --card2:rgba(12,14,18,.88);
  --stroke:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --green:#00ff7a;
  --green2:#21c85a;
  --cyan:#6fe7ff;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ width:100%; height:100%; margin:0; background:var(--bg); color:var(--text); overflow:hidden; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }

#app{ position:fixed; inset:0; width:100%; height:100%; }
#gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* HUD */
#hud{
  position:absolute;
  left:0; right:0; top:0;
  padding: max(env(safe-area-inset-top), 10px) 12px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  pointer-events:none;
  z-index:20;
}
.hud-left{ pointer-events:none; }
.title{ font-weight:700; letter-spacing:.3px; opacity:.95; text-shadow:0 1px 0 rgba(0,0,0,.6); }
.tag{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:12px; background:rgba(0,255,122,.14); border:1px solid rgba(0,255,122,.22); color:rgba(180,255,220,.95); }
.hud-right{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px; pointer-events:auto; }
.chip{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); padding:6px 10px; border-radius:999px; font-size:13px; color:rgba(255,255,255,.82); backdrop-filter: blur(8px); }
.chip b{ color:rgba(255,255,255,.96); margin-left:6px; }
.icon-btn{
  pointer-events:auto;
  width:38px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.88);
  cursor:pointer;
  backdrop-filter: blur(8px);
}
.icon-btn:active{ transform: translateY(1px); }

/* Toast */
.toast{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: max(env(safe-area-inset-top), 12px) + 56px;
  min-width: 180px;
  max-width: min(92vw, 520px);
  padding:10px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(240,255,246,.92);
  text-align:center;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  z-index:30;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Lock */
.lock{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:50;
  padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 16px);
  background: radial-gradient(1000px 520px at 50% 30%, rgba(0,255,122,.10), transparent 60%),
              radial-gradient(900px 520px at 20% 10%, rgba(111,231,255,.10), transparent 60%),
              rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
}
.lock-card{
  width: min(920px, 96vw);
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
}
.lock-title{ font-size:18px; font-weight:800; letter-spacing:.4px; }
.lock-sub{ margin-top:6px; font-size:13px; color:var(--muted); line-height:1.4; }
.lock-desc{ margin-top:12px; font-size:13px; color:rgba(255,255,255,.82); line-height:1.55; }
.progress{
  margin-top:14px;
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(0,255,122,.10), rgba(0,255,122,.72), rgba(111,231,255,.45));
  box-shadow: 0 0 18px rgba(0,255,122,.25);
}
.lock-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:14px;
}
.hint{ font-size:13px; color:rgba(255,255,255,.72); }
.start{
  min-width: 170px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,122,.22);
  background: rgba(0,255,122,.10);
  color: rgba(220,255,240,.92);
  font-weight: 800;
  cursor: pointer;
}
.start:disabled{
  cursor:not-allowed;
  opacity:.55;
  filter: grayscale(.2);
}
.lock-foot{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.66);
}
.lock-foot a{ color: rgba(111,231,255,.92); text-decoration:none; }
.lock-foot a:hover{ text-decoration:underline; }
.sep{ opacity:.35; margin:0 6px; }

/* Pause */
.pause{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:60;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.pause.hidden{ display:none; }
.pause-card{
  width:min(520px, 92vw);
  border-radius:16px;
  background: var(--card2);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 16px;
  text-align:center;
}
.pause-title{ font-size:18px; font-weight:900; }
.pause-desc{ margin-top:6px; font-size:13px; color:rgba(255,255,255,.72); }

/* Glitch flash */
.glitch{ position:absolute; inset:0; z-index:40; pointer-events:none; }
.glitch.hidden{ display:none; }
.glitch::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,255,122,.0) 0px, rgba(0,255,122,.0) 8px, rgba(0,255,122,.12) 9px),
    radial-gradient(600px 320px at 50% 40%, rgba(111,231,255,.18), transparent 60%),
    rgba(0,255,122,.06);
  animation: glitchFlash .22s ease-in-out 1;
}
@keyframes glitchFlash{
  0%{ opacity:0; transform:translate3d(-2px,0,0); }
  30%{ opacity:.85; transform:translate3d(2px,0,0); }
  60%{ opacity:.35; transform:translate3d(-1px,0,0); }
  100%{ opacity:0; transform:none; }
}

/* Watermark */
.wm{
  position:absolute;
  right: max(env(safe-area-inset-right), 12px);
  bottom: max(env(safe-area-inset-bottom), 10px);
  font-size: 12px;
  color: rgba(255,255,255,.18);
  letter-spacing: 1.5px;
  z-index:10;
  pointer-events:none;
}

@media (max-width: 520px){
  .chip{ font-size:12px; padding:5px 9px; }
  .icon-btn{ width:36px; height:32px; }
  .title{ font-size:14px; }
}