:root{
  --bg:#05080f;
  --cyan:#5ee7ff;
  --gold:#ffd166;
  --rose:#ff6b7a;
  --green:#7dffc0;
  --violet:#b18cff;
  --text:#7d8aa3;
  --line:#22304a;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{
  background:radial-gradient(circle at 50% 28%,#0b1826 0%,#05080f 72%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

/* ═══════════════════════════════════════
   加载界面
   ═══════════════════════════════════════ */
.boot{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#0d1c2e 0%,#05080f 70%);
  cursor:pointer;
  opacity:1;
  transition:opacity .5s ease;
}
.boot.hide{opacity:0;pointer-events:none;}
.boot-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:26px;
  padding:40px 30px;
  max-width:420px;
  text-align:center;
  animation:bootIn .9s ease both;
}
@keyframes bootIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.boot-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.boot-cn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.20em;
  font-size:46px;
  font-weight:600;
  color:var(--cyan);
  line-height:1;
  text-shadow:0 0 30px rgba(94,231,255,.6),
              0 0 70px rgba(94,231,255,.28);
}
.boot-cn .cn-dot{
  opacity:.42;
  font-weight:400;
  font-size:.62em;
  transform:translateY(-.06em);
}
.boot-en{
  font-size:10px;
  font-weight:400;
  color:#4a5e7d;
  letter-spacing:.55em;
  padding-left:.55em;
  text-transform:uppercase;
  white-space:nowrap;
}
.boot-sub{
  font-size:10px;
  letter-spacing:.28em;
  color:#3e4a60;
  margin-top:-14px;
}

.boot-rule{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 26px;
  font-size:13px;
  letter-spacing:.12em;
  color:#8fa4c2;
  line-height:1.7;
  position:relative;
}
.boot-rule::before,
.boot-rule::after{
  content:'';
  position:absolute;
  left:50%;transform:translateX(-50%);
  width:64px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,231,255,.5),transparent);
}
.boot-rule::before{top:0;}
.boot-rule::after{bottom:0;}
.boot-rule p{display:block;}

.boot-enter{
  font-size:12px;
  letter-spacing:.24em;
  color:var(--cyan);
  opacity:.85;
  animation:pulse 2s ease-in-out infinite;
  padding:9px 22px;
  border:1px solid rgba(94,231,255,.3);
  border-radius:22px;
  background:rgba(94,231,255,.05);
}
@keyframes pulse{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}

/* ═══════════════════════════════════════
   主布局
   ═══════════════════════════════════════ */
.app{
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px 10px;
  max-width:560px;
  margin:0 auto;
  opacity:1;
}

.topbar{width:100%;display:flex;justify-content:center;}
.tabs{
  display:flex;gap:3px;
  background:rgba(15,24,38,.7);
  border-radius:12px;padding:3px;
  border:1px solid #1a2538;
}
.tabs button{
  padding:5px 22px;border-radius:9px;
  background:transparent;border:none;
  color:#6b7a9c;font-family:inherit;
  font-size:11.5px;letter-spacing:.14em;
  cursor:pointer;transition:all .18s;
}
.tabs button.active{
  background:rgba(60,90,140,.6);
  color:#d5eeff;
  box-shadow:0 0 12px -4px rgba(94,231,255,.55);
}

.hud{
  display:flex;gap:14px;font-size:11.5px;color:#57637c;
  letter-spacing:.05em;flex-wrap:wrap;justify-content:center;
  min-height:15px;
}
.hud b{color:#c8d4e6;font-weight:600;font-variant-numeric:tabular-nums;}
.hud .bad{color:var(--rose);}
.hud .good{color:var(--green);}
.hud .gold{color:var(--gold);}
.hud .vio{color:var(--violet);}

.levelTitle{
  font-size:13px;font-weight:600;letter-spacing:.16em;
  color:#b8c6dd;text-align:center;
  padding:2px 12px 3px;min-height:19px;
  text-shadow:0 0 14px rgba(94,231,255,.25);
  position:relative;
}
.levelTitle::before,
.levelTitle::after{
  content:'';position:absolute;top:50%;
  width:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,231,255,.4),transparent);
}
.levelTitle::before{right:100%;margin-right:6px;}
.levelTitle::after{left:100%;margin-left:6px;}

.stage{
  flex:1;width:100%;
  display:flex;align-items:center;justify-content:center;
  min-height:0;padding:2px 0;
}
canvas{
  display:block;border-radius:16px;
  box-shadow:0 0 0 1px #16202f, 0 22px 55px -16px #000;
  touch-action:none;cursor:pointer;
  transition:box-shadow .45s ease;
}
canvas.win{
  box-shadow:0 0 0 1px rgba(125,255,192,.55),
             0 0 48px -6px rgba(125,255,192,.4),
             0 22px 55px -16px #000;
}
canvas.random{
  box-shadow:0 0 0 1px rgba(177,140,255,.5),
             0 0 42px -8px rgba(177,140,255,.35),
             0 22px 55px -16px #000;
}
canvas.bonus{
  box-shadow:0 0 0 1px rgba(255,209,102,.55),
             0 0 42px -8px rgba(255,209,102,.4),
             0 22px 55px -16px #000;
}

.tip{
  font-size:11.5px;color:#7d8ba3;text-align:center;
  min-height:30px;letter-spacing:.02em;max-width:440px;
  line-height:1.55;white-space:pre-line;
  transition:color .3s;padding:3px 10px 2px;
  position:relative;
}
.tip::before{
  content:'';display:block;width:60px;height:1px;
  margin:0 auto 5px;
  background:linear-gradient(90deg,transparent,rgba(94,231,255,.3),transparent);
}
.tip.win{color:var(--green);text-shadow:0 0 18px rgba(125,255,192,.5);}
.tip.rand{color:var(--violet);}
.tip.bonus{color:var(--gold);}

/* ═══════════════════════════════════════
   按钮
   ═══════════════════════════════════════ */
.actions{
  display:flex;gap:6px;width:100%;max-width:440px;
  align-items:stretch;margin-top:2px;
}
.actions button,
.seedbar button,
.ghost{
  position:relative;flex:1;
  padding:11px 4px;border-radius:13px;cursor:pointer;
  background:linear-gradient(180deg,rgba(24,38,60,.88),rgba(12,20,34,.92));
  border:1px solid var(--line);
  color:#8fa4c2;font-size:11.5px;letter-spacing:.08em;
  font-family:inherit;transition:all .18s;
  white-space:nowrap;overflow:hidden;isolation:isolate;
}
.actions button::before,
.seedbar button::before,
.ghost::before{
  content:'';position:absolute;inset:3px;border-radius:9px;
  border:1px dashed rgba(94,231,255,.13);
  pointer-events:none;transition:border-color .18s;
}
.actions button::after,
.seedbar button::after{
  content:'';position:absolute;top:0;right:0;
  width:10px;height:10px;
  background:linear-gradient(225deg,
    var(--accent, rgba(94,231,255,.28)) 0%,
    var(--accent, rgba(94,231,255,.28)) 45%,
    transparent 45%);
  border-top-right-radius:12px;
  pointer-events:none;opacity:.75;
}

.actions button[data-accent="rose"]  { --accent: rgba(255,107,122,.42); }
.actions button[data-accent="cyan"]  { --accent: rgba(94,231,255,.42); }
.actions button[data-accent="gold"]  { --accent: rgba(255,209,102,.55); }
.actions button[data-accent="violet"]{ --accent: rgba(177,140,255,.42); }

.actions button[data-accent="gold"]{
  background:linear-gradient(180deg,rgba(60,48,20,.88),rgba(30,22,8,.92));
  border-color:rgba(255,209,102,.35);
  color:#ffe0a0;
}
.actions button[data-accent="gold"]:hover{
  border-color:rgba(255,209,102,.7);
  color:#fff1c8;
  box-shadow:0 0 20px -6px rgba(255,209,102,.6);
}
.actions button[data-accent="rose"]{border-color:rgba(255,107,122,.2);}
.actions button[data-accent="rose"]:hover{
  border-color:rgba(255,107,122,.55);color:#ffd0d6;
}
.actions button[data-accent="violet"]{border-color:rgba(177,140,255,.2);}
.actions button[data-accent="violet"]:hover{
  border-color:rgba(177,140,255,.55);color:#e0d0ff;
}

.actions button:hover,
.seedbar button:hover,
.ghost:hover{
  background:linear-gradient(180deg,rgba(38,56,86,.92),rgba(18,30,50,.92));
  border-color:rgba(94,231,255,.45);
  color:#d5eeff;transform:translateY(-1px);
}
.actions button:hover::before,
.seedbar button:hover::before,
.ghost:hover::before{border-color:rgba(94,231,255,.3);}
.actions button:active{transform:translateY(0) scale(.97);}
.actions button.locked{opacity:.36;cursor:not-allowed;}
.actions button.locked:active{transform:none;}

.actions button.icon{
  flex:0 0 auto;width:44px;
  display:flex;align-items:center;justify-content:center;
  color:#8fa4c2;
}
.actions button.icon svg{display:block;}

.actions button.round{
  flex:0 0 auto;width:46px;border-radius:23px;padding:11px 4px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%, rgba(40,60,88,.95), rgba(14,24,42,.98));
  border-color:#2b3d5a;color:#c8d4e6;
  font-size:12px;font-variant-numeric:tabular-nums;font-weight:600;
}
.actions button.round::before{
  inset:5px;border-radius:50%;border-style:solid;
  border-color:rgba(94,231,255,.18);
}
.actions button.round::after{display:none;}
.actions button.round:hover{
  border-color:rgba(94,231,255,.6);
  box-shadow:0 0 22px -6px rgba(94,231,255,.7);
  color:#e0f6ff;
}

.diff-menu{
  width:100%;max-width:440px;display:none;
  grid-template-columns:1fr 1fr;gap:6px;padding:8px;
  background:linear-gradient(180deg,#101a2a,#0a121e);
  border:1px solid #1e2a3d;border-radius:14px;margin-top:2px;
}
.diff-menu.show{display:grid;}
.diff-menu button{
  position:relative;padding:10px 6px;border-radius:10px;
  background:rgba(20,32,50,.6);border:1px solid #22304a;
  color:#8fa4c2;font-size:11.5px;font-family:inherit;
  letter-spacing:.08em;cursor:pointer;transition:all .15s;
}
.diff-menu button:hover{background:rgba(35,58,90,.85);color:#d5eeff;}
.diff-menu button:active{transform:scale(.96);}
.diff-menu button i{
  font-style:normal;font-size:9px;color:#4a5670;margin-left:4px;
}
.diff-menu button.locked{opacity:.4;cursor:not-allowed;}

.seedbar{
  display:none;gap:6px;width:100%;max-width:440px;
}
.seedbar.show{display:flex;}
.seedbar button{flex:0 0 auto;padding:11px 14px;}
.seedbar input{
  flex:1;min-width:0;padding:11px 12px;border-radius:13px;
  background:rgba(15,24,38,.7);border:1px solid var(--line);
  color:#c8d4e6;font-size:11.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.04em;outline:none;
}
.seedbar input:focus{border-color:rgba(94,231,255,.5);}

/* ═══════════════════════════════════════
   关卡抽屉
   ═══════════════════════════════════════ */
.sheet{
  position:fixed;inset:0;z-index:110;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(4,6,10,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .25s;
}
.sheet.show{display:flex;opacity:1;}
.sheet-inner{
  width:100%;max-width:560px;max-height:78dvh;
  background:linear-gradient(180deg,#111a28,#090e17);
  border:1px solid #1e2a3d;border-radius:20px 20px 0 0;
  padding:16px 18px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:12px;
  transform:translateY(20px);transition:transform .25s;
}
.sheet.show .sheet-inner{transform:translateY(0);}
.sheet-head{display:flex;align-items:center;justify-content:space-between;}
.sheet-head h2{font-size:13px;letter-spacing:.28em;color:var(--cyan);font-weight:600;}
.ghost{flex:0 0 auto;padding:6px 14px;font-size:11px;letter-spacing:.12em;border-radius:14px;color:#8fa4c2;}
.ghost::before,.ghost::after{display:none;}

.sheet-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));
  gap:8px;overflow-y:auto;padding-right:4px;
  -webkit-overflow-scrolling:touch;
}
.sheet-item{
  position:relative;aspect-ratio:1;border-radius:12px;
  background:rgba(20,32,50,.6);border:1px solid #22304a;
  color:#8fa4c2;font-size:13px;font-family:inherit;
  font-variant-numeric:tabular-nums;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.sheet-item:active{transform:scale(.94);}
.sheet-item.cleared{
  background:rgba(20,60,45,.6);
  border-color:rgba(125,255,192,.4);
  color:#7dffc0;
}
.sheet-item.current{
  border-color:var(--cyan);
  color:#d5eeff;
  box-shadow:0 0 14px -4px rgba(94,231,255,.6);
}

/* ⭐ 彩蛋关按钮：星形，不显示数字 */
.sheet-item.bonus{
  background:rgba(60,42,10,.6);
  border-color:rgba(255,209,102,.35);
  color:var(--gold);
}
.sheet-item.bonus.cleared{
  background:rgba(60,42,10,.85);
}
.sheet-item.bonus:hover{
  border-color:rgba(255,209,102,.7);
  box-shadow:0 0 14px -4px rgba(255,209,102,.6);
}
.sheet-item.bonus svg{
  display:block;
  filter:drop-shadow(0 0 6px rgba(255,209,102,.7));
}
.sheet-item.bonus.cleared svg{
  filter:drop-shadow(0 0 8px rgba(255,209,102,.9));
}
/* 移除原来的右上角小圆点 */
.sheet-item.bonus::after{display:none;}

/* ═══════════════════════════════════════
   结算
   ═══════════════════════════════════════ */
#overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,10,.88);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .35s;
  z-index:100;padding:20px;
}
#overlay.show{opacity:1;pointer-events:auto;}
.panel{
  position:relative;
  background:linear-gradient(180deg,#111a28,#090e17);
  border:1px solid #1e2a3d;border-radius:16px;
  padding:26px 28px;text-align:center;max-width:340px;width:100%;
  box-shadow:0 30px 70px -20px #000;
}
.panel::before{
  content:'';position:absolute;inset:5px;
  border-radius:11px;border:1px dashed rgba(125,255,192,.18);
  pointer-events:none;
}
.panel h2{
  font-size:16px;color:var(--green);letter-spacing:.2em;font-weight:600;
  margin-bottom:12px;text-shadow:0 0 22px rgba(125,255,192,.45);
}
.panel p{font-size:12.5px;line-height:1.9;color:#74819a;white-space:pre-line;}
.panel button{
  margin-top:22px;padding:10px 30px;border-radius:24px;cursor:pointer;
  background:transparent;border:1px solid var(--green);color:var(--green);
  font-size:12.5px;letter-spacing:.16em;font-family:inherit;transition:all .2s;
}
.panel button:hover{
  background:rgba(125,255,192,.12);
  box-shadow:0 0 24px rgba(125,255,192,.25);
}

#toast{
  position:fixed;left:50%;bottom:120px;transform:translate(-50%,8px);
  background:#111a28;border:1px solid #1e2a3d;color:#93a1ba;
  font-size:12px;padding:9px 18px;border-radius:20px;
  opacity:0;pointer-events:none;transition:all .25s;z-index:90;
  letter-spacing:.06em;max-width:80vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0);}

/* ═══════════════════════════════════════
   图鉴
   ═══════════════════════════════════════ */
.gallery{
  position:fixed;inset:0;z-index:120;display:none;flex-direction:column;
  background:rgba(4,6,10,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.gallery.show{display:flex;}
.gal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 10px;
}
.gal-head h2{font-size:14px;letter-spacing:.3em;color:var(--cyan);font-weight:600;}
.gal-tabs{display:flex;gap:3px;padding:0 20px 12px;}
.gal-tab{
  padding:6px 16px;border-radius:14px;background:transparent;
  border:1px solid #1e2a3d;color:#6b7a9c;font-size:11px;
  font-family:inherit;letter-spacing:.14em;cursor:pointer;transition:all .18s;
}
.gal-tab.active{
  background:rgba(60,90,140,.45);
  border-color:rgba(94,231,255,.5);
  color:#d5eeff;
}
.gal-body{
  flex:1;overflow-y:auto;padding:4px 20px 30px;
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(138px,1fr));
  align-content:start;-webkit-overflow-scrolling:touch;
}
.gal-card{
  background:linear-gradient(180deg,#0d1626,#080d16);
  border:1px solid #1a2538;border-radius:14px;overflow:hidden;
  cursor:pointer;transition:all .2s;position:relative;
}
.gal-card:hover{
  border-color:rgba(94,231,255,.5);
  transform:translateY(-3px);
}
.gal-card canvas{width:100%;display:block;border-radius:0;box-shadow:none;}
.gal-card .meta{padding:8px 10px 9px;display:flex;flex-direction:column;gap:2px;}
.gal-card .meta .name{
  font-size:11px;color:#c8d4e6;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gal-card .meta .sub{
  font-size:9.5px;color:#556280;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gal-card .badge{
  position:absolute;top:6px;left:6px;font-size:9px;
  padding:2px 7px;border-radius:8px;
  background:rgba(94,231,255,.14);color:var(--cyan);
  border:1px solid rgba(94,231,255,.35);letter-spacing:.06em;
}
.gal-card .badge.gold{
  background:rgba(255,209,102,.18);
  color:var(--gold);
  border-color:rgba(255,209,102,.4);
}
.gal-card .del{
  position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:11px;
  background:rgba(255,107,122,.15);
  border:1px solid rgba(255,107,122,.4);
  color:var(--rose);font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;cursor:pointer;
}
.gal-card:hover .del{opacity:1;}
.gal-empty{
  grid-column:1/-1;text-align:center;color:#4a5670;
  padding:60px 20px;font-size:12.5px;line-height:2;white-space:pre-line;
}

/* ═══════════════════════════════════════
   回放
   ═══════════════════════════════════════ */
.viewer{
  position:fixed;inset:0;z-index:130;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:20px;background:rgba(4,6,10,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.viewer.show{display:flex;}
.viewer-head{
  width:100%;max-width:640px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.viewer-title{
  font-size:12px;letter-spacing:.14em;color:var(--cyan);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.viewer canvas{
  border-radius:18px;
  box-shadow:0 0 0 1px #1a2538, 0 30px 80px -20px #000;
  max-width:100%;max-height:68dvh;
}
.viewer-info{
  font-size:11px;color:#6b7a9c;letter-spacing:.06em;text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;max-width:640px;
}

/* ═══════════════════════════════════════
   小屏适配
   ═══════════════════════════════════════ */
@media (max-width:400px){
  .boot-cn{font-size:38px;}
  .tabs button{padding:5px 16px;font-size:11px;}
  .actions button{font-size:11px;padding:10px 2px;}
  .actions button.icon{width:40px;}
  .actions button.round{width:40px;border-radius:20px;font-size:11px;}
  .gal-body{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));padding:4px 14px 26px;}
}
@media (max-height:660px){
  .tip{min-height:24px;font-size:11px;}
  .actions button{padding:9px 4px;font-size:11px;}
  .boot-inner{gap:18px;padding:30px 24px;}
  .boot-cn{font-size:34px;}
}