/* =========================================================
   Spellbound Journey · 言咒之旅
   样式总表 v2（主菜单 / 冒险地图 / 战斗 三屏 RPG）
   ========================================================= */
:root{
  --bg:#05080f;
  --bg2:#0b1220;
  --ink:#eaf6ff;
  --dim:#8fa8bd;
  --gold:#ffd76a;
  --blue:#6ad0ff;
  --red:#ff7a6a;
  --green:#8fe6a0;
  --line:rgba(120,180,255,.16);
  --card:rgba(16,26,42,.88);
  --btn:rgba(30,48,74,.9);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  overflow:hidden;user-select:none;
}
#app{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---------- 屏幕 ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.hidden{display:none !important}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--line);
  background:var(--btn);color:var(--ink);
  padding:12px 18px;border-radius:12px;font-size:15px;
  cursor:pointer;transition:transform .12s,background .2s,box-shadow .2s;
  font-weight:600;letter-spacing:.5px;
}
.btn:active{transform:scale(.96)}
.btn.primary{
  background:linear-gradient(135deg,#2a6fd0,#1a4d94);
  border-color:rgba(140,200,255,.5);
  box-shadow:0 0 18px rgba(80,160,255,.35);
}
.btn.big{width:min(360px,80vw);padding:16px;font-size:17px}
.btn.small{padding:7px 12px;font-size:13px;border-radius:9px}

/* =========================================================
   主菜单
   ========================================================= */
#menu{align-items:center;justify-content:center;overflow:hidden}
.menu-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 22%,rgba(70,140,255,.22),transparent 60%),
    radial-gradient(circle at 78% 82%,rgba(255,140,220,.12),transparent 55%),
    linear-gradient(180deg,#060a14 0%,#0b1524 55%,#060a12 100%);
}
.menu-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.4px 1.4px at 70% 18%,rgba(200,230,255,.7),transparent),
    radial-gradient(1.8px 1.8px at 42% 66%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.3px 1.3px at 86% 54%,rgba(255,230,180,.6),transparent),
    radial-gradient(1.5px 1.5px at 12% 78%,rgba(180,220,255,.5),transparent);
  animation:starTwinkle 5s ease-in-out infinite;
}
@keyframes starTwinkle{0%,100%{opacity:.6}50%{opacity:1}}
.menu-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px}
/* 右上角 下载 / 分享 按钮 */
.menu-share{
  position:absolute;top:14px;right:14px;z-index:5;
  font-size:13px;font-weight:700;color:#cfe8ff;
  padding:8px 16px;border-radius:20px;cursor:pointer;
  background:rgba(20,40,70,.62);border:1px solid rgba(130,180,255,.4);
  backdrop-filter:blur(6px);
  transition:transform .1s,background .2s;
}
.menu-share:active{transform:scale(.94)}
/* 左上角 公告 按钮 */
.menu-notice{
  position:absolute;top:14px;left:14px;z-index:5;
  font-size:13px;font-weight:700;color:#ffe6b0;
  padding:8px 16px;border-radius:20px;cursor:pointer;
  background:rgba(70,50,20,.62);border:1px solid rgba(255,200,110,.45);
  backdrop-filter:blur(6px);
  transition:transform .1s,background .2s;
}
.menu-notice:active{transform:scale(.94)}
.notice-body{
  max-width:min(90vw,400px);max-height:60vh;overflow:auto;
  font-size:13px;line-height:1.85;color:#cfe0f2;text-align:left;
  padding:4px 2px;
}
.notice-body p{margin:0 0 10px}
.notice-body .n-hi{color:#ffd98a;font-weight:700}
.notice-body .n-mail{color:#8fe3ff;font-weight:700;word-break:break-all}
.notice-body .n-warn{color:#ff9d9d}
.notice-body hr{border:none;border-top:1px solid rgba(130,170,220,.25);margin:12px 0}
.dl-card{
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
  max-width:min(88vw,360px);margin:0 auto;
}
.dl-link{
  font-size:12px;line-height:1.7;color:#bfe6ff;word-break:break-all;
  padding:12px 14px;border-radius:12px;
  background:rgba(10,24,42,.72);border:1px solid rgba(120,180,255,.3);
  max-height:34vh;overflow:auto;
}
.dl-btn{
  font-size:14px;font-weight:700;color:#06121f;text-align:center;
  padding:12px 18px;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg,#8fe3ff,#5aa8ff);
  transition:transform .1s;
}
.dl-btn:active{transform:scale(.96)}
.dl-btn.ghost{
  background:rgba(255,255,255,.06);color:#cfe8ff;
  border:1px solid rgba(130,180,255,.4);
}
.menu-logo{text-align:center}
.menu-logo-en{
  font-size:13px;letter-spacing:6px;color:var(--blue);opacity:.85;text-transform:uppercase;
}
.menu-logo-zh{
  font-size:44px;font-weight:800;letter-spacing:10px;margin-top:6px;
  background:linear-gradient(180deg,#ffffff,#a8d4ff 60%,#5c9fe0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(120,190,255,.35);
}
.menu-tagline{margin-top:10px;font-size:13px;color:var(--dim);font-style:italic;letter-spacing:1px}
.menu-actions{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.menu-foot{
  font-size:12.5px;color:var(--dim);text-align:center;line-height:1.9;
  border-top:1px solid var(--line);padding-top:14px;margin-top:6px;min-height:44px;
}
.menu-foot b{color:var(--gold)}

/* =========================================================
   冒险地图
   ========================================================= */
#map-screen{background:#0a1018}
#map-topbar{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:rgba(8,14,24,.92);
  border-bottom:1px solid var(--line);z-index:5;
}
#map-title{font-weight:700;letter-spacing:2px;flex:1;text-align:center}
#map-progress{
  flex:0 0 auto;font-size:12px;font-weight:600;
  color:var(--gold);letter-spacing:1px;white-space:nowrap;
  padding:3px 10px;border:1px solid var(--line);border-radius:999px;
  background:rgba(240,208,120,.08);
}
#map-stats{display:flex;gap:10px;font-size:12px;color:var(--ink)}
#map-stats span{display:inline-flex;align-items:center;gap:3px}
#map-stats b{color:var(--gold)}

#map-stage{position:relative;flex:1;overflow:hidden;background:#070d16}
#map-svg{display:block;width:100%;height:100%;touch-action:none}
#map-zoomctl{
  position:absolute;right:10px;bottom:14px;z-index:6;
  display:flex;flex-direction:column;gap:8px;
}
.mz-btn{
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(10,16,26,.86);
  color:var(--ink);font-size:18px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.mz-btn:active{background:rgba(240,208,120,.18);color:var(--gold);transform:scale(.94)}

/* 章节选择面板 */
#map-chapters{flex:0 0 auto}
.chapter-list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:6px 0}
.chrow{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  cursor:pointer;
}
.chrow:active{background:rgba(240,208,120,.12)}
.chrow.cur{border-color:var(--gold);background:rgba(240,208,120,.1)}
.chrow.locked{opacity:.5}
.chrow-main{flex:1;min-width:0}
.chrow-name{font-weight:700;font-size:14px}
.chrow-desc{font-size:11px;color:var(--ink);opacity:.75;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrow-right{flex:0 0 auto;font-size:12px;color:var(--gold);font-weight:600;white-space:nowrap}
.chrow.locked .chrow-right{color:var(--ink);opacity:.7}

/* 新章节解锁横幅 */
.unlock-banner{
  margin:8px 0;padding:10px 12px;border-radius:12px;
  background:rgba(240,208,120,.14);border:1px solid var(--gold);
  color:var(--gold);font-size:13px;text-align:center;font-weight:600;
}

#map-bottom{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 14px;background:rgba(8,14,24,.92);border-top:1px solid var(--line);
}
#map-hint{font-size:13px;color:var(--dim);flex:1}

/* 地图主角行走 */
.hero-el{transition:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.hero-el.walking{animation:heroBob .34s steps(2) infinite}
@keyframes heroBob{0%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.mapnode{transition:transform .16s}
.mapnode:active{transform:scale(.92)}

/* =========================================================
   战斗
   ========================================================= */
#battle{background:
  radial-gradient(circle at 50% 8%,rgba(60,110,190,.25),transparent 60%),
  linear-gradient(180deg,#070c15,#0a1420 60%,#070b12);
}
/* 战斗中：上方舞台 + 下方交互板 纵向排布 */
#battle:not(.hidden){position:relative;flex:1;min-height:0}
#board:not(.hidden){flex-shrink:0}

/* 战斗顶部操作条 */
#battle-topbar{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:8px 12px;background:rgba(6,10,18,.92);
  border-bottom:1px solid var(--line);z-index:6;
}
#battle-title{font-weight:700;letter-spacing:2px;flex:1;text-align:center;color:var(--dim);font-size:13px}
#battle-topbar .btn{min-width:74px}
#battle-topbar .btn.paused{background:linear-gradient(135deg,#c98a1e,#e0a83a);border-color:rgba(255,215,120,.6);color:#fff}
#battle.paused #battlefield,#battle.paused #board{filter:grayscale(.35) brightness(.72);opacity:.9}

#monster-bar{
  padding:8px 16px 6px;background:rgba(6,10,18,.85);
  border-bottom:1px solid var(--line);
}
.mb-name{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:700}
.mb-name em{font-size:11px;color:var(--dim);font-style:normal;font-weight:400}
.mb-hp{
  position:relative;height:16px;margin-top:6px;border-radius:8px;overflow:hidden;
  background:rgba(40,20,26,.9);border:1px solid rgba(255,120,120,.3);
}
.mb-hp i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#ff5a4a,#ff9a6a);
  transition:width .28s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 0 12px rgba(255,90,70,.6);
}
.mb-hp span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;
}

#battlefield{
  position:relative;flex:1;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3vw;
}
#fx{position:absolute;inset:0;pointer-events:none;z-index:4}
#floaters{position:absolute;inset:0;pointer-events:none;z-index:6}

/* 主角位 */
#hero-slot{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:26%}
#hero-figure{width:100%;display:flex;align-items:flex-end;justify-content:center;height:34vh;max-height:260px}
#hero-figure .hero-img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));
  transition:transform .16s;
}
#hero-figure.casting .hero-img{animation:heroCast .5s cubic-bezier(.2,.9,.3,1)}
@keyframes heroCast{
  0%{transform:translateX(0) scale(1)}
  35%{transform:translateX(10px) scale(1.08) rotate(-3deg)}
  100%{transform:translateX(0) scale(1)}
}
#hero-figure.hurt .hero-img{animation:heroHurt .4s}
@keyframes heroHurt{
  0%,100%{transform:translateX(0);filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
  25%{transform:translateX(-8px);filter:drop-shadow(0 0 10px red) brightness(1.6)}
  75%{transform:translateX(6px)}
}
#hero-name{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:1px}
#player-bar{
  position:relative;width:80%;height:11px;margin-top:5px;border-radius:6px;overflow:hidden;
  background:rgba(20,34,52,.9);border:1px solid rgba(120,200,255,.3);
}
#player-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#3fd06a,#8fe6a0);
  transition:width .28s;box-shadow:0 0 10px rgba(90,230,140,.6);
}
#player-bar span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;
}

/* 法阵位 */
#circle-slot{
  position:relative;z-index:3;width:40%;max-width:420px;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
}
#circle-svg{width:100%;height:100%;overflow:visible}
#charge-label{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-size:12px;color:var(--blue);white-space:nowrap;
  background:rgba(6,12,22,.75);padding:3px 12px;border-radius:20px;
  border:1px solid var(--line);letter-spacing:1px;
}
#charge-label b{color:var(--gold)}

/* 怪物位 */
#mob-slot{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:26%}
#mob{display:block}
#mob-name{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--red)}

/* 法阵动画 */
@keyframes mcRotorSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes mcHaloBreath{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes mcShake{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-5px,3px)}
  40%{transform:translate(5px,-3px)}
  60%{transform:translate(-4px,-2px)}
  80%{transform:translate(4px,2px)}
}

/* 漂浮数字 */
.floater{
  position:absolute;transform:translate(-50%,-50%);
  font-weight:800;font-size:26px;pointer-events:none;
  animation:floatUp 1.1s ease-out forwards;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.floater.dmg{color:#ff8a6a}
.floater.crit{color:#ffd76a;font-size:22px;text-shadow:0 0 10px rgba(255,200,80,.9),0 2px 8px rgba(0,0,0,.9)}
.floater.combo{color:var(--gold);font-size:20px}
.floater.heal{color:var(--green)}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-180%) scale(1)}
}

/* 全屏闪光 */
.screen-flash{
  position:fixed;inset:0;pointer-events:none;z-index:999;background:#fff;
}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}

/* =========================================================
   交互板（board）
   ========================================================= */
#board{
  position:relative;z-index:5;background:rgba(8,13,22,.96);
  border-top:1px solid var(--line);display:flex;flex-direction:column;
  max-height:56vh;
}
#board:not(.hidden){min-height:200px}
#board-head{
  display:flex;align-items:baseline;gap:10px;padding:8px 14px 4px;
}
#board-title{font-size:13.5px;font-weight:700;color:var(--blue)}
#board-sub{font-size:11.5px;color:var(--dim)}
#board-body{flex:1;overflow-y:auto;padding:0 10px 8px}
#board-actions{display:flex;gap:8px;justify-content:center;padding:0 14px 10px}

/* 中英连线 */
.linkwrap{position:relative;display:flex;gap:8px;align-items:flex-start}
.linkcol{flex:1;display:flex;flex-direction:column;gap:7px;z-index:2}
#link-canvas{position:absolute;inset:0;pointer-events:none;z-index:1}
.node{
  padding:9px 10px;border-radius:10px;font-size:13px;text-align:center;
  background:var(--card);border:1px solid var(--line);cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
}
.node.en{font-family:"SF Mono",Menlo,monospace;font-weight:600;color:#bfe6ff}
.node:active{transform:scale(.97)}
.node.sel{border-color:var(--blue);background:rgba(40,80,130,.55);box-shadow:0 0 12px rgba(90,180,255,.4)}
.node.done{opacity:.55;border-color:rgba(140,230,180,.5);background:rgba(24,60,42,.7)}
.node.wrong{border-color:var(--red);background:rgba(90,20,20,.75);animation:shake .3s}

/* 拼写 */
.copy-wrap{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:6px 0;width:100%}
.copy-cn{font-size:17px;font-weight:700;color:var(--ink);text-align:center}
.copy-hint{font-size:11px;color:var(--dim);text-align:center}
.copy-type{
  display:flex;align-items:center;gap:1px;min-height:38px;
  font-family:"SF Mono",Menlo,monospace;font-size:24px;font-weight:700;
  letter-spacing:3px;color:var(--gold);
  border-bottom:2px solid var(--blue);padding:0 12px;
}
.copy-type.shake{animation:shake .3s}
.ct-caret{animation:caretBlink 1s steps(1) infinite;color:var(--blue);opacity:.6}
@keyframes caretBlink{50%{opacity:0}}
.kbhost{width:100%;margin-top:8px}
.copy-keys{
  display:flex;flex-direction:column;gap:7px;align-items:center;
  width:100%;max-width:100%;margin:0 auto;padding:0;
}
/* 真实键盘比例：第 1 行满宽，第 2 行缩进约半个键，第 3 行更窄并居中 */
.krow{display:flex;gap:6px;justify-content:center;width:100%;flex:0 0 auto}
.krow-0{width:100%}
.krow-1{width:92%;margin-left:4%;align-self:center}
.krow-2{width:80%;margin-left:10%;align-self:center}
.kbtn{
  flex:1 1 0;min-width:0;height:52px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding:0;border-radius:10px;font-size:20px;font-weight:700;
  background:var(--btn);border:1px solid var(--line);color:var(--ink);
  cursor:pointer;font-family:"SF Mono",Menlo,monospace;
  transition:transform .06s,background .12s,box-shadow .12s;
  touch-action:manipulation;
}
.kbtn:active{transform:scale(.9);background:rgba(60,110,180,.7)}
/* 按对：蓝色能量闪光 */
.kbtn.khit{
  background:radial-gradient(circle at 50% 40%,#bfe9ff,#3f8fe0) !important;
  color:#fff;box-shadow:0 0 14px rgba(90,180,255,.9),0 0 26px rgba(60,140,240,.5);
  transform:scale(1.06);
}
/* 按错：红色抖动闪光 */
.kbtn.kbad{
  background:radial-gradient(circle at 50% 40%,#ffc0c0,#c93030) !important;
  color:#fff;box-shadow:0 0 14px rgba(255,80,80,.9);
  animation:keyShake .34s;
}
@keyframes keyShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.kbtn.kback{flex:0 0 64px;max-width:64px;font-size:18px;color:var(--dim)}

/* ===== 战斗新增：法阵选择 / 补字 / 钥匙碎片 ===== */
.battle-intro{text-align:center;font-size:14px;color:var(--dim);line-height:1.9;padding:14px 0}
.circle-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 0}
.circle-pick{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);cursor:pointer;color:var(--ink);
  transition:transform .1s,border-color .15s,box-shadow .15s;
}
.circle-pick:active{transform:scale(.94)}
.circle-pick.sel{border-color:var(--blue);box-shadow:0 0 14px rgba(90,180,255,.45)}
.cp-svg{width:44px;height:44px}
.cp-lbl{font-size:11px;font-weight:700;color:#bfe6ff}
.cp-tag{font-size:9px;color:var(--dim)}

.copy-target{color:var(--blue);letter-spacing:1px}
.fill-slots{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  font-family:"SF Mono",Menlo,monospace;font-size:26px;font-weight:700;
  padding:4px 0;
}
.fslot{
  min-width:28px;height:38px;line-height:38px;text-align:center;
  border-bottom:3px solid var(--line);color:var(--ink);
}
.fslot.blank{color:var(--blue)}
.fslot.blank.active{border-color:var(--blue);animation:caretBlink 1s steps(1) infinite}
.fslot.filled{color:#bfe6ff}
.fslot.ok{color:#8ce6b4;border-color:rgba(140,230,180,.6)}
.fslot.wrong{color:var(--red);border-color:var(--red);animation:shake .3s}

.keywrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0;width:100%}
.key-preview{
  font-family:"SF Mono",Menlo,monospace;font-size:22px;font-weight:700;
  letter-spacing:2px;min-height:32px;text-align:center;word-break:break-all;
}
.key-preview .kd{color:var(--blue)}
.key-preview .kr{color:rgba(120,150,180,.45)}
.key-pile{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.shard{
  width:42px;height:42px;line-height:42px;text-align:center;border-radius:10px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-family:"SF Mono",Menlo,monospace;font-size:20px;font-weight:700;cursor:pointer;
  transition:transform .08s,opacity .15s;
}
.shard:active{transform:scale(.92)}
.shard.used{opacity:.28;pointer-events:none}
.shard.shake{animation:keyShake .34s;border-color:var(--red)}
.key-reset{
  font-size:12px;color:var(--dim);padding:6px 14px;border-radius:20px;
  border:1px solid var(--line);cursor:pointer;
}
/* 钥匙碎片 · 预览槽（v1.8.5 重做：不限顺序 + 一键合成 + 对绿错红） */
.key-slots{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:10px 12px;border-radius:14px;
  background:rgba(10,20,34,.5);border:1px solid rgba(120,180,255,.18);
  max-width:100%;
}
.kslot{
  width:30px;height:38px;line-height:38px;text-align:center;border-radius:8px;
  font-family:"SF Mono",Menlo,monospace;font-size:19px;font-weight:700;
  color:var(--blue);background:rgba(255,255,255,.04);
  border:1.5px dashed rgba(130,170,220,.35);
  transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.kslot.filled{
  color:var(--ink);border-style:solid;
  border-color:rgba(150,200,255,.55);background:rgba(120,180,255,.14);
}
.kslot.filled:active{transform:scale(.9)}
.kslot.ok{
  color:#8ce6b4;border-color:rgba(140,230,180,.9);
  background:rgba(90,220,150,.20);
  animation:keyPop .3s;
}
.kslot.bad{
  color:#ff8a8a;border-color:rgba(255,110,110,.9);
  background:rgba(255,90,90,.20);
  animation:keyShake .34s;
}
.key-actions{
  display:flex;gap:12px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:4px;
}
.key-compose{
  font-size:14px;font-weight:700;color:#06121f;
  padding:10px 26px;border-radius:22px;
  background:linear-gradient(135deg,#8fe3ff,#5aa8ff);
  cursor:pointer;transition:transform .1s,opacity .2s,filter .2s;
  box-shadow:0 4px 16px rgba(90,168,255,.35);
}
.key-compose:active{transform:scale(.95)}
.key-compose.disabled{
  opacity:.38;filter:grayscale(.6);pointer-events:none;
  background:rgba(120,150,190,.35);color:rgba(230,245,255,.7);
  box-shadow:none;
}
@keyframes keyPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.22)}
  100%{transform:scale(1)}
}
/* 逐把钥匙：进度点 + 提示行 */
.key-progress{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:2px}
.kp{
  min-width:24px;height:24px;line-height:24px;text-align:center;padding:0 5px;
  font-size:11px;font-weight:700;border-radius:12px;
  color:var(--dim);background:rgba(255,255,255,.05);
  border:1px solid rgba(130,170,220,.28);transition:all .2s;
}
.kp.now{color:#06121f;background:linear-gradient(135deg,#8fe3ff,#5aa8ff);border-color:transparent;
  box-shadow:0 0 10px rgba(120,190,255,.5);transform:scale(1.1)}
.kp.done{color:#8ce6b4;background:rgba(90,220,150,.18);border-color:rgba(140,230,180,.6)}
.key-hint{font-size:12px;color:var(--dim);text-align:center;line-height:1.6}
.key-hint b{color:var(--blue)}
.key-compose.done{
  background:linear-gradient(135deg,#9df0b8,#4fd08a);color:#05231a;
  box-shadow:0 0 18px rgba(90,230,150,.55);
}

.result-win{
  text-align:center;font-size:18px;font-weight:700;padding:22px 0;line-height:2;
  color:var(--blue);
}
.result-win span{color:var(--red)}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* =========================================================
   覆盖层 / 弹窗
   ========================================================= */
#overlay{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;
  background:rgba(2,5,10,.78);backdrop-filter:blur(4px);
  transition:opacity .2s;
}
#overlay.ov-hidden{opacity:0;pointer-events:none}
#ov-card{
  width:min(440px,90vw);max-height:82vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:20px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.ov-title{font-size:19px;font-weight:800;text-align:center;letter-spacing:2px}
.ov-sub{font-size:12.5px;color:var(--dim);text-align:center;margin-top:6px;margin-bottom:14px}
.ov-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.ov-actions .btn{flex:1;min-width:120px}

/* 主角选择 */
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hero-card{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:rgba(20,32,50,.7);cursor:pointer;text-align:center;
  transition:transform .12s,border-color .15s,box-shadow .2s;
}
.hero-card:active{transform:scale(.96)}
.hero-card.sel{border-color:var(--gold);box-shadow:0 0 18px rgba(255,210,110,.45)}
.hero-card img{width:100%;aspect-ratio:1;object-fit:contain;display:block;background:#0a1220}
.hc-name{font-size:12.5px;padding:5px 0;font-weight:700}
.hero-card.sel .hc-name{color:var(--gold)}

/* 难度选择 */
.diff-grid{display:flex;flex-direction:column;gap:8px}
.diff-card{
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;
  background:rgba(20,32,50,.7);cursor:pointer;
  transition:transform .12s,border-color .15s,box-shadow .2s;
}
.diff-card:active{transform:scale(.98)}
.diff-card.sel{border-color:var(--blue);box-shadow:0 0 16px rgba(90,180,255,.4);background:rgba(30,55,90,.8)}
.dc-name{font-size:15px;font-weight:700}
.dc-desc{font-size:11.5px;color:var(--dim);margin-top:3px}
.dc-count{font-size:11px;color:var(--gold);margin-top:3px}
.diff-card.sel .dc-name{color:var(--blue)}

/* 设置 */
.set-list{display:flex;flex-direction:column;gap:4px}
.set-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 4px;border-bottom:1px solid var(--line);font-size:14px;
}
.set-row:last-child{border-bottom:none}
.toggle{
  min-width:56px;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700;
  background:rgba(50,60,80,.9);border:1px solid var(--line);color:var(--dim);cursor:pointer;
}
.toggle.on{background:linear-gradient(135deg,#2a9d5c,#41c97e);color:#fff;border-color:rgba(120,240,170,.5)}

/* 战利品 */
.loot-list,.chest-wrap{display:flex;flex-direction:column;gap:8px}
.chest-wrap{align-items:center;margin-bottom:10px}
.chest-img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(255,210,110,.5));animation:chestPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes chestPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.loot-row{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  background:rgba(24,38,58,.7);border:1px solid var(--line);border-radius:12px;
}
.loot-row img{width:34px;height:34px;object-fit:contain}
.loot-ico{font-size:26px;width:34px;text-align:center}
.loot-info{flex:1}
.loot-name{font-size:13.5px;font-weight:700}
.loot-amt{font-size:16px;font-weight:800;color:var(--gold)}
.loot-row.lvup{border-color:var(--gold);box-shadow:0 0 16px rgba(255,210,110,.4);animation:chestPop .4s}
.loot-row.lvup .loot-amt{color:var(--green)}

/* =========================================================
   Toast
   ========================================================= */
#toast{
  position:fixed;left:50%;top:14%;transform:translate(-50%,0);
  z-index:1000;padding:10px 22px;border-radius:24px;
  background:rgba(14,22,36,.95);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  transition:opacity .25s,transform .25s;pointer-events:none;
}
#toast.toast-hidden{opacity:0;transform:translate(-50%,-12px)}
#toast.ok{border-color:rgba(140,230,180,.5);color:#c8f6d8}
#toast.bad{border-color:rgba(255,120,110,.5);color:#ffc0b8}

/* 横屏微调 */
@media (orientation:landscape) and (max-height:520px){
  .menu-logo-zh{font-size:34px}
  #hero-figure{height:28vh}
  #board{max-height:60vh}
}

/* =========================================================
   开场黑屏逐字剧情（intro）
   ========================================================= */
#intro-screen{
  position:fixed;inset:0;z-index:2000;background:#04060c;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .42s ease;
}
#intro-screen.hidden{display:none}
#intro-screen.fade-out{opacity:0}
.intro-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(30,50,90,.22),transparent 62%),
             radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.75),transparent 60%);
}
.intro-skip{
  position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:3;
  padding:8px 16px;border-radius:20px;cursor:pointer;
  background:rgba(20,30,48,.72);border:1px solid rgba(120,150,200,.35);
  color:#cdd9ee;font-size:13px;font-weight:600;letter-spacing:1px;
  backdrop-filter:blur(6px);
}
.intro-skip:active{transform:scale(.95)}
.intro-inner{
  position:relative;z-index:2;width:min(680px,84vw);
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.intro-title{
  text-align:center;opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s ease;
}
.intro-title.show{opacity:1;transform:translateY(0)}
.intro-title.dim{opacity:.5}
.intro-title .it-zh{
  font-size:40px;font-weight:800;letter-spacing:12px;color:#eaf1ff;
  text-shadow:0 0 24px rgba(120,170,255,.5);
}
.intro-title .it-en{
  margin-top:6px;font-size:12px;letter-spacing:8px;color:#7f95b8;
}
.intro-text{
  width:100%;max-height:52vh;overflow-y:auto;padding:4px 8px;
  font-size:16.5px;line-height:2.1;color:#9fb0cc;text-align:center;
  scroll-behavior:smooth;
}
.intro-text::-webkit-scrollbar{width:0}
.intro-line{
  margin:0 0 14px;opacity:.85;
  transition:opacity .4s,color .4s;
}
.intro-line.done{opacity:1;color:#c8d6ee}
.intro-enter{
  opacity:0;font-size:12.5px;letter-spacing:3px;color:#6d80a2;
  transition:opacity .6s;animation:blink 1.6s infinite;
}
.intro-enter.show{opacity:.8}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:.85}}

/* =========================================================
   存档槽（选择/创建存档）
   ========================================================= */
.slot-grid{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.slot-card{
  position:relative;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(22,34,54,.9),rgba(12,20,34,.9));
  padding:12px 14px;cursor:pointer;transition:border-color .2s,transform .12s;
}
.slot-card:active{transform:scale(.985)}
.slot-card:not(.empty):hover{border-color:rgba(140,180,255,.5)}
.slot-card.empty{border-style:dashed;opacity:.85}
.slot-no{
  position:absolute;top:10px;right:12px;font-size:11px;letter-spacing:1px;
  color:#6d80a2;
}
.slot-body{display:flex;align-items:center;gap:12px}
.slot-face{
  width:52px;height:52px;border-radius:10px;object-fit:contain;
  background:#0a1220;border:1px solid rgba(120,150,200,.25);flex:0 0 auto;
}
.slot-info{flex:1;min-width:0}
.slot-name{font-size:15px;font-weight:700;color:#e8eeff}
.slot-name em{font-style:normal;font-size:12px;color:#8fa4c8}
.slot-meta{font-size:12px;color:#9fb0cc;margin-top:3px}
.slot-time{font-size:11px;color:#66799c;margin-top:3px}
.slot-new{
  width:100%;text-align:center;padding:14px 0;font-size:15px;font-weight:700;
  color:#8fb4ff;letter-spacing:1px;
}
.slot-del{
  position:absolute;bottom:8px;right:10px;
  background:transparent;border:none;color:#a5606a;font-size:11px;
  cursor:pointer;padding:2px 4px;
}
.slot-del:active{color:#ff8a94;transform:scale(.94)}
#hero-canvas{width:100%;height:100%;display:block}