/* ══════════════════════════════════════════════════════════
   破砖深渊 — 火把照亮的砖石地牢
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0810; --bg2:#150e1e;
  --stone:#2a1d33; --stone-lo:#1d1425; --stone-hi:#3d2b48;
  --surface:#221729; --overlay:#2c1f36; --mortar:#120c1a;
  --ink:#f4ecff; --ink-2:#c3b3d6; --ink-3:#8d7ba3;
  --amber:#ffab2e; --amber-lo:#c9761a; --amber-hi:#ffd27a;
  --blood:#ff3b5c; --blood-lo:#a81338;
  --cyan:#3fe0ff; --acid:#7dff5a; --green:#39d353;
  --magenta:#ff4fd8; --gold:#ffd54a; --violet:#a06bff;
  --scrim:rgba(7,4,12,.76);
  --r-s:7px; --r-m:12px; --r-l:20px;
  --tile:44px; --gap:4px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.9);
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",Georgia,"Times New Roman",serif;
  --num:Georgia,"Iowan Old Style","Times New Roman",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.5; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;display:block;fill:none;flex:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
b,strong{font-weight:700}

/* ── 环境层 ───────────────────────────────── */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(120% 80% at 50% -10%,#2a1730 0%,transparent 60%),
  linear-gradient(178deg,#150e1e 0%,#0b0810 55%,#0e0a16 100%)}
.amb{position:absolute;border-radius:50%;filter:blur(58px);opacity:.5;mix-blend-mode:screen}
.amb-1{width:78vmax;height:52vmax;left:-24vmax;top:-22vmax;background:radial-gradient(circle,#ff8a1e 0%,rgba(255,138,30,0) 68%);animation:drift1 26s ease-in-out infinite}
.amb-2{width:66vmax;height:66vmax;right:-26vmax;bottom:-24vmax;background:radial-gradient(circle,#b02bff 0%,rgba(176,43,255,0) 66%);animation:drift2 34s ease-in-out infinite}
.amb-3{width:52vmax;height:38vmax;left:20vw;bottom:-16vmax;background:radial-gradient(circle,#00c2ff 0%,rgba(0,194,255,0) 70%);opacity:.3;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vh,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-7vw,-5vh,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-5vw,-3vh,0)}}
.grain{position:absolute;inset:-50%;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
.vignette{position:absolute;inset:0;background:radial-gradient(115% 85% at 50% 42%,transparent 42%,rgba(4,2,8,.72) 100%)}
#fx{position:fixed;inset:0;z-index:70;pointer-events:none}

/* ── 布局 ───────────────────────────────── */
#app{position:relative;z-index:10;height:100dvh;height:100svh;display:flex}
@supports not (height:100svh){#app{height:100vh}}
.screen{width:100%;max-width:492px;margin:0 auto;height:100%;display:flex;flex-direction:column;min-height:0}
.screen[hidden]{display:none}

/* ── 通用控件 ───────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--r-m);
  font-weight:700;font-size:14px;letter-spacing:.04em;transition:transform .14s cubic-bezier(.3,1.4,.5,1),filter .18s,box-shadow .18s;
  border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,var(--overlay),#1c1324);color:var(--ink)}
.btn .ic{width:17px;height:17px}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(180deg,#ffb845 0%,#f08a12 52%,#c9600a 100%);color:#2a1400;border-color:#ffd88a;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 12px 26px -12px #ff9a1e,inset 0 1px 0 rgba(255,255,255,.6);text-shadow:0 1px 0 rgba(255,255,255,.32)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-lg{padding:15px 26px;font-size:16px;width:100%;border-radius:14px}
.btn-ghost{background:rgba(255,255,255,.045);color:var(--ink-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09);color:var(--ink)}
.btn-danger{background:linear-gradient(180deg,#ff5570,#c01238);color:#fff;border-color:#ff8fa2;box-shadow:0 10px 24px -14px #ff3b5c}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:var(--ink-2);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);transition:.16s}
.icon-btn .ic{width:18px;height:18px}
.icon-btn:hover{color:var(--amber-hi);background:rgba(255,171,46,.14);border-color:rgba(255,171,46,.32)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.is-off{color:var(--ink-3)}

/* ── 标题屏 ───────────────────────────────── */
.title-screen{position:relative;justify-content:center;padding:22px 20px calc(22px + env(safe-area-inset-bottom));overflow-y:auto}
.corner-sound{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:3}
.title-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin:auto;width:100%;
  animation:riseIn .7s cubic-bezier(.2,.9,.3,1) both}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.torch-row{display:flex;gap:130px;height:26px;margin-bottom:-6px}
.torch{width:12px;height:22px;border-radius:50% 50% 44% 44%;background:linear-gradient(180deg,#fff3c4,#ffab2e 42%,#ff4d1a 78%,rgba(255,77,26,0));
  filter:blur(1.2px);box-shadow:0 0 26px 8px rgba(255,150,40,.45);animation:flicker 1.5s ease-in-out infinite}
.torch:nth-child(2){animation-delay:.42s}
@keyframes flicker{0%,100%{transform:scaleY(1) scaleX(1);opacity:.95}30%{transform:scaleY(1.22) scaleX(.86);opacity:1}55%{transform:scaleY(.9) scaleX(1.1);opacity:.8}78%{transform:scaleY(1.12) scaleX(.94);opacity:1}}
.eyebrow{margin:0;font-size:10.5px;letter-spacing:.42em;color:var(--amber);font-weight:700;text-indent:.42em;opacity:.9}
.logo{margin:0;display:flex;flex-direction:column;gap:6px;line-height:1}
.logo-cn{font-family:var(--display);font-size:clamp(44px,15vw,62px);font-weight:700;letter-spacing:.1em;text-indent:.1em;
  background:linear-gradient(178deg,#fff6e2 4%,#ffd27a 34%,#ff9a2e 62%,#e0561a 96%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,150,50,.42))}
.logo-en{font-family:var(--num);font-size:12px;letter-spacing:.36em;text-indent:.36em;color:var(--ink-3);font-weight:400}
.tagline{margin:0;font-size:12.5px;line-height:1.85;color:var(--ink-2);max-width:330px}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:2px}
.diff{position:relative;padding:12px 6px 11px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.24));display:flex;flex-direction:column;gap:3px;align-items:center;transition:.18s;overflow:hidden}
.diff::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%,var(--dc,#ffab2e),transparent 70%);opacity:0;transition:.22s}
.diff b{font-family:var(--display);font-size:19px;letter-spacing:.08em;position:relative;z-index:1}
.diff i{font-style:normal;font-size:9.5px;letter-spacing:.18em;color:var(--ink-3);position:relative;z-index:1}
.diff s{text-decoration:none;font-size:10px;color:var(--ink-3);position:relative;z-index:1;line-height:1.4;margin-top:2px}
.diff[aria-checked="true"]{border-color:var(--dc);box-shadow:0 0 0 1px var(--dc),0 10px 26px -14px var(--dc);transform:translateY(-2px)}
.diff[aria-checked="true"]::after{opacity:.18}
.diff[aria-checked="true"] b{color:var(--dc)}
.diff:active{transform:scale(.96)}
.title-row{display:flex;gap:8px;width:100%}
.title-row .btn{flex:1}
.record{margin:2px 0 0;font-size:11px;color:var(--ink-3);letter-spacing:.06em;min-height:16px}
.record b{color:var(--gold)}

/* ── 顶栏 ───────────────────────────────── */
.game-screen{padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
.floor-chip{display:flex;align-items:center;gap:9px;min-width:0}
.floor-num{font-family:var(--num);font-size:26px;font-weight:700;line-height:1;color:var(--amber-hi);
  text-shadow:0 0 18px rgba(255,171,46,.6);min-width:24px;text-align:center}
.floor-meta{display:flex;flex-direction:column;min-width:0}
.floor-meta b{font-family:var(--display);font-size:15px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.floor-meta i{font-style:normal;font-size:9px;letter-spacing:.22em;color:var(--ink-3)}
.topbar-actions{display:flex;gap:6px;flex:none}

/* ── 英雄面板 ───────────────────────────────── */
.hero{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:var(--r-m);flex:none;
  background:linear-gradient(165deg,rgba(160,107,255,.13),rgba(255,171,46,.06) 46%,rgba(0,0,0,.3));
  border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--shadow)}
.lv-badge{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center}
.lv-badge .ring{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:3}
.ring-fg{fill:none;stroke:var(--violet);stroke-width:3;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;
  transition:stroke-dashoffset .5s cubic-bezier(.2,.9,.3,1);filter:drop-shadow(0 0 5px rgba(160,107,255,.9))}
.lv-n{font-family:var(--num);font-size:19px;font-weight:700;line-height:1;margin-top:-3px;color:#fff}
.lv-t{position:absolute;bottom:4px;font-size:7.5px;letter-spacing:.16em;color:var(--ink-3)}
.hero-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hp-row{display:flex;align-items:center;gap:7px}
.ic-heart{width:15px;height:15px;color:var(--blood);filter:drop-shadow(0 0 6px rgba(255,59,92,.7));animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.18)}96%{transform:scale(1.04)}}
.bar{position:relative;flex:1;height:17px;border-radius:9px;overflow:hidden;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.09)}
.bar i{position:absolute;inset:0;width:100%;transform-origin:left;border-radius:9px;
  background:linear-gradient(90deg,#ff2d55,#ff6b3d 60%,#ffb03a);transition:transform .42s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 0 14px rgba(255,60,90,.55) inset}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 55%)}
.bar span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--num);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-shadow:0 1px 3px rgba(0,0,0,.95)}
.bar.low i{animation:hpWarn .9s ease-in-out infinite}
@keyframes hpWarn{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.chips{display:flex;gap:5px;flex-wrap:nowrap}
.chip{display:inline-flex;align-items:center;gap:3px;padding:3px 7px 3px 5px;border-radius:8px;font-size:11.5px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.07);white-space:nowrap}
.chip .ic{width:12px;height:12px}
.chip b{font-family:var(--num);font-weight:700;font-size:12.5px}
.chip i{font-style:normal;font-size:9.5px;color:var(--ink-3)}
.chip-atk{color:#ff9a6b}.chip-atk .ic{color:var(--blood)}
.chip-def{color:#8fd8ff}.chip-def .ic{color:var(--cyan)}
.chip-gold{color:#ffe08a}.chip-gold .ic{color:var(--gold)}
.chip-threat{color:#e0b8ff;margin-left:auto}.chip-threat .ic{color:var(--magenta)}
.chip-key{color:#ffe08a;border-color:rgba(255,213,74,.4);background:rgba(255,213,74,.13);animation:keyPop .5s cubic-bezier(.2,1.6,.4,1)}
.chip-key .ic{color:var(--gold)}
@keyframes keyPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.chip.bump{animation:bump .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.26)}100%{transform:scale(1)}}

/* ── 棋盘 ───────────────────────────────── */
.board-wrap{flex:1;min-height:0;display:grid;place-items:center;padding:2px 0}
.board-frame{position:relative;padding:7px;border-radius:16px;
  background:linear-gradient(160deg,#3a2a46,#1a1222 60%,#241a2e);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 22px 48px -22px #000,inset 0 1px 0 rgba(255,255,255,.12)}
.board-frame::before{content:"";position:absolute;inset:3px;border-radius:12px;border:1px solid rgba(255,171,46,.13);pointer-events:none}
.sconce{position:absolute;top:-7px;width:9px;height:16px;border-radius:50% 50% 40% 40%;
  background:linear-gradient(180deg,#fff3c4,#ffab2e 45%,#ff4d1a 80%,rgba(255,77,26,0));filter:blur(1px);
  box-shadow:0 0 22px 7px rgba(255,150,40,.4);animation:flicker 1.4s ease-in-out infinite;z-index:2}
.sconce-l{left:16px}.sconce-r{right:16px;animation-delay:.5s}
.board{display:grid;grid-template-columns:repeat(7,var(--tile));grid-auto-rows:var(--tile);gap:var(--gap);perspective:600px}
.board.shake{animation:shake .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(3px,-2px)}30%,50%,70%{transform:translate(-4px,2px)}40%,60%{transform:translate(4px,-1px)}}

.tile{position:relative;width:var(--tile);height:var(--tile);border-radius:var(--r-s);display:grid;place-items:center;
  padding:0;overflow:hidden;transition:transform .12s,filter .16s;transform-style:preserve-3d}
.tile .ic{width:calc(var(--tile) * .62);height:calc(var(--tile) * .62);pointer-events:none}
.tile-hidden{background:linear-gradient(158deg,#4a3457 0%,#33233e 46%,#241830 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16),inset 0 -2px 4px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4)}
.tile-hidden::before{content:"";position:absolute;inset:0;opacity:.5;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.07) 46%,transparent 48%),
             radial-gradient(60% 50% at 30% 22%,rgba(255,255,255,.09),transparent 70%)}
.tile-hidden::after{content:"";position:absolute;left:14%;right:14%;top:49%;height:1px;background:rgba(0,0,0,.34);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.tile-hidden:hover{filter:brightness(1.22)}
.tile-hidden:active{transform:scale(.93)}
.tile-rev{background:linear-gradient(170deg,#1a1222,#120c1a);border:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.045);cursor:default}
.tile-rev.pop{animation:tilePop .34s cubic-bezier(.2,1.3,.4,1)}
@keyframes tilePop{0%{transform:scale(.5) rotateX(52deg);opacity:.2;filter:brightness(2.4)}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.tile-num{font-family:var(--num);font-weight:700;font-size:calc(var(--tile) * .48);line-height:1;
  text-shadow:0 0 10px currentColor,0 1px 2px rgba(0,0,0,.9);pointer-events:none}
.tile[data-n="1"] .tile-num{color:#5fe3ff}
.tile[data-n="2"] .tile-num{color:#8bff63}
.tile[data-n="3"] .tile-num{color:#ffd54a}
.tile[data-n="4"] .tile-num{color:#ff9f3a}
.tile[data-n="5"] .tile-num{color:#ff6b4a}
.tile[data-n="6"] .tile-num{color:#ff3b5c}
.tile[data-n="7"] .tile-num{color:#ff4fd8}
.tile[data-n="8"] .tile-num{color:#e6dcff}
.tile-empty{background:linear-gradient(170deg,#171021,#0f0a16)}
.tile-flag{background:linear-gradient(158deg,#5a3a2a,#3a2418);border-color:rgba(255,171,46,.5);
  box-shadow:inset 0 1px 0 rgba(255,210,122,.3),0 0 14px -3px rgba(255,171,46,.6)}
.tile-flag .ic{color:var(--amber-hi);width:calc(var(--tile)*.5);height:calc(var(--tile)*.5);animation:flagPlant .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes flagPlant{from{transform:translateY(-8px) scale(.4);opacity:0}to{transform:none;opacity:1}}
.tile-mob{background:linear-gradient(165deg,#4a1428,#2a0c18);border-color:rgba(255,59,92,.34);
  box-shadow:inset 0 0 16px rgba(255,59,92,.2),0 0 12px -4px rgba(255,59,92,.6)}
.tile-mob .ic{color:#ff8098;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.tile-mob:hover{filter:brightness(1.2)}
.tile-mob:active{transform:scale(.94)}
.tile-elite{background:linear-gradient(165deg,#4a3a10,#2a1c06);border-color:rgba(255,213,74,.5);
  box-shadow:inset 0 0 18px rgba(255,213,74,.22),0 0 18px -4px rgba(255,213,74,.75)}
.tile-elite .ic{color:var(--gold)}
.tile-boss{background:linear-gradient(165deg,#4b1060,#260736);border-color:rgba(255,79,216,.55);
  box-shadow:inset 0 0 20px rgba(255,79,216,.28),0 0 24px -4px rgba(255,79,216,.9);animation:bossPulse 1.9s ease-in-out infinite}
.tile-boss .ic{color:#ff8ae8}
@keyframes bossPulse{0%,100%{box-shadow:inset 0 0 20px rgba(255,79,216,.28),0 0 18px -6px rgba(255,79,216,.8)}50%{box-shadow:inset 0 0 26px rgba(255,79,216,.42),0 0 30px -2px rgba(255,79,216,1)}}
.tile-dead{background:linear-gradient(170deg,#1c1424,#120c1a);border-color:rgba(255,255,255,.05);box-shadow:inset 0 2px 7px rgba(0,0,0,.7)}
.tile-dead .ic{color:#4d3f5c;width:calc(var(--tile)*.46);height:calc(var(--tile)*.46);opacity:.75}
.tile-trap .ic{color:#ff9f3a}
.tile-trap.tile-used .ic{color:#5a4a3a}
.tile-chest .ic{color:var(--gold)}
.tile-potion .ic{color:var(--acid)}
.tile-altar{background:linear-gradient(165deg,#3d1440,#1e0a24);border-color:rgba(255,79,216,.34)}
.tile-altar .ic{color:var(--magenta)}
.tile-altar.tile-used{filter:grayscale(.7) brightness(.6)}
.tile-stairs{background:linear-gradient(165deg,#0d3a4a,#07202c);border-color:rgba(63,224,255,.5);
  box-shadow:inset 0 0 18px rgba(63,224,255,.26),0 0 20px -4px rgba(63,224,255,.8);animation:portal 2.2s ease-in-out infinite}
.tile-stairs .ic{color:var(--cyan)}
@keyframes portal{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.tile-lock{position:absolute;right:2px;bottom:2px;width:calc(var(--tile)*.32);height:calc(var(--tile)*.32);color:var(--gold);opacity:.95}
.tile-lock .ic{width:100%;height:100%}
.tile-badge{position:absolute;left:0;right:0;bottom:0;font-family:var(--num);font-size:calc(var(--tile)*.23);font-weight:700;
  text-align:center;line-height:1.35;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));color:#ffd9e0;pointer-events:none;letter-spacing:.02em}
.tile-crown{position:absolute;top:1px;right:1px;width:calc(var(--tile)*.3);height:calc(var(--tile)*.3);color:var(--gold)}
.tile-crown .ic{width:100%;height:100%}
.tile.hint{animation:hintPulse .7s ease-out 2}
@keyframes hintPulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(63,224,255,0)}50%{box-shadow:inset 0 0 0 2px rgba(63,224,255,.9),0 0 14px rgba(63,224,255,.6)}}
.tile.target{outline:2px dashed var(--amber);outline-offset:-2px}
.board.mode-bomb .tile-mob,.board.mode-bomb .tile-elite,.board.mode-bomb .tile-boss,.board.mode-bomb .tile-trap:not(.tile-used){cursor:crosshair;animation:targetGlow 1.1s ease-in-out infinite}
@keyframes targetGlow{0%,100%{outline:2px solid rgba(255,171,46,.25);outline-offset:-2px}50%{outline:2px solid rgba(255,171,46,.95);outline-offset:-2px}}
.board.mode-scroll .tile-hidden{cursor:crosshair}
.board.mode-flag .tile-hidden{cursor:cell}

/* ── 事件条 ───────────────────────────────── */
.ticker{flex:none;display:flex;align-items:center;gap:7px;height:26px;padding:0 9px;border-radius:9px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.055);overflow:hidden}
.ticker-dot{width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none;box-shadow:0 0 8px var(--amber);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.ticker p{margin:0;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ticker p.in{animation:tickIn .34s ease-out}
@keyframes tickIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.ticker.t-good .ticker-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.ticker.t-good p{color:#a9f5b6}
.ticker.t-bad .ticker-dot{background:var(--blood);box-shadow:0 0 8px var(--blood)}
.ticker.t-bad p{color:#ffb3c0}
.ticker.t-warn .ticker-dot{background:var(--amber)}
.ticker.t-warn p{color:#ffd7a1}
.ticker.t-magic .ticker-dot{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}
.ticker.t-magic p{color:#f7b8ec}

/* ── 动作条 ───────────────────────────────── */
.actionbar{flex:none;display:grid;grid-template-columns:repeat(6,1fr) 1.28fr;gap:5px}
.act{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px 6px;border-radius:11px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.3));color:var(--ink-3);transition:.16s;min-width:0}
.act .ic{width:19px;height:19px}
.act span{font-size:9.5px;letter-spacing:.04em;line-height:1;white-space:nowrap}
.act em{position:absolute;top:-4px;right:-2px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;font-style:normal;
  font-family:var(--num);font-size:9.5px;font-weight:700;display:grid;place-items:center;color:#1a1006;
  background:linear-gradient(180deg,var(--amber-hi),var(--amber));box-shadow:0 2px 6px rgba(0,0,0,.6)}
.act:active{transform:scale(.93)}
.act.is-on{color:#2a1400;background:linear-gradient(180deg,#ffc25c,#ef8f16);border-color:#ffd88a;
  box-shadow:0 0 18px -6px var(--amber),inset 0 1px 0 rgba(255,255,255,.55)}
.act.is-on em{background:#2a1400;color:var(--amber-hi)}
.act-potion{color:#b6f5a0}
.act-potion .ic{color:var(--acid)}
.act-shop{color:#ffe08a}
.act-shop .ic{color:var(--gold)}
.act-descend{color:var(--ink-3)}
.act-descend .ic{color:var(--cyan)}
.act-descend:not(:disabled){color:#04222c;background:linear-gradient(180deg,#6ceaff,#12b6dd);border-color:#a9f2ff;
  box-shadow:0 0 22px -6px var(--cyan),inset 0 1px 0 rgba(255,255,255,.6);animation:descendReady 1.8s ease-in-out infinite}
.act-descend:not(:disabled) .ic{color:#04222c}
@keyframes descendReady{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
.act-descend.locked{color:#2a1c00;background:linear-gradient(180deg,#ffd88a,#e0a52a);border-color:#ffe6b0;box-shadow:0 0 18px -8px var(--gold)}
.act-descend.locked .ic{color:#2a1c00}
.act:disabled{opacity:.38}
.act.empty em{background:#4a3a52;color:#9d8bb0}

/* ── 遮罩 / 抽屉 ───────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:80;background:var(--scrim);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fade .24s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:90;width:100%;max-width:492px;
  max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;border-radius:22px 22px 0 0;
  background:linear-gradient(178deg,#2e2038 0%,#1a1222 62%,#150e1d 100%);
  border:1px solid rgba(255,255,255,.1);border-bottom:0;
  box-shadow:0 -22px 60px -18px #000,inset 0 1px 0 rgba(255,255,255,.16);
  animation:sheetUp .34s cubic-bezier(.2,.95,.3,1);padding-bottom:env(safe-area-inset-bottom)}
@keyframes sheetUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-grip{width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.2);margin:9px auto 0;flex:none}
.sheet-body{overflow-y:auto;padding:12px 16px 18px;display:flex;flex-direction:column;gap:12px}
.sheet-head{display:flex;align-items:flex-start;gap:11px}
.sheet-head .ic{width:20px;height:20px}
.sheet-title{font-family:var(--display);font-size:20px;letter-spacing:.09em;margin:0;line-height:1.25}
.sheet-sub{margin:2px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.6}
.sheet-close{margin-left:auto;flex:none}
.sheet-actions{display:flex;gap:9px;position:sticky;bottom:-18px;z-index:3;
  margin:0 -16px -18px;padding:12px 16px 18px;
  background:linear-gradient(180deg,rgba(21,14,29,0),rgba(21,14,29,.93) 34%,#150e1d 100%)}
.sheet-actions .btn{flex:1}

/* 战斗 */
.mob-card{display:flex;gap:13px;align-items:center;padding:13px;border-radius:15px;
  background:radial-gradient(90% 120% at 12% 0%,rgba(255,59,92,.2),rgba(0,0,0,.34));border:1px solid rgba(255,59,92,.24)}
.mob-card.elite{background:radial-gradient(90% 120% at 12% 0%,rgba(255,213,74,.2),rgba(0,0,0,.34));border-color:rgba(255,213,74,.32)}
.mob-card.boss{background:radial-gradient(90% 120% at 12% 0%,rgba(255,79,216,.24),rgba(0,0,0,.34));border-color:rgba(255,79,216,.36)}
.mob-portrait{width:66px;height:66px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 0 22px rgba(0,0,0,.7)}
.mob-portrait .ic{width:46px;height:46px;color:#ff8098;animation:mobIdle 3s ease-in-out infinite}
.mob-card.elite .mob-portrait .ic{color:var(--gold)}
.mob-card.boss .mob-portrait .ic{color:#ff8ae8}
@keyframes mobIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}
.mob-info{flex:1;min-width:0}
.mob-name{font-family:var(--display);font-size:19px;letter-spacing:.08em;margin:0;display:flex;align-items:center;gap:6px}
.mob-tag{font-family:var(--font);font-size:9px;letter-spacing:.14em;padding:2px 6px;border-radius:5px;background:var(--gold);color:#2a1c00}
.mob-tag.boss{background:var(--magenta);color:#2a0020}
.mob-flavor{margin:3px 0 0;font-size:11px;color:var(--ink-3);line-height:1.6}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.stat{padding:7px 3px;border-radius:10px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.06);text-align:center}
.stat i{font-style:normal;display:block;font-size:9px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:2px}
.stat b{font-family:var(--num);font-size:15px}
.stat.hp b{color:#ff8098}.stat.atk b{color:#ff9f3a}.stat.def b{color:#8fd8ff}.stat.xp b{color:#c9a3ff}.stat.gold b{color:var(--gold)}
.forecast{padding:11px 13px;border-radius:13px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:8px}
.fc-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-2)}
.fc-row b{font-family:var(--num);font-size:15px;color:var(--ink)}
.fc-row.hurt b{color:#ff8098}
.fc-row.free b{color:var(--acid)}
.fc-bar{height:9px;border-radius:5px;background:rgba(0,0,0,.55);overflow:hidden;display:flex;border:1px solid rgba(255,255,255,.07)}
.fc-bar i{display:block;height:100%}
.fc-safe{background:linear-gradient(90deg,#2fbf4f,#7dff5a)}
.fc-loss{background:linear-gradient(90deg,#ff2d55,#ff7a3d)}
.fc-note{margin:0;font-size:11px;line-height:1.6;color:var(--ink-3)}
.fc-note.danger{color:#ff9aab;font-weight:700}

/* 祭坛 / 商店 */
.opt{display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;text-align:left;width:100%;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(0,0,0,.28));border:1px solid rgba(255,255,255,.08);transition:.16s}
.opt:hover{border-color:rgba(255,171,46,.45);background:linear-gradient(160deg,rgba(255,171,46,.14),rgba(0,0,0,.28))}
.opt:active{transform:scale(.98)}
.opt:disabled{opacity:.42;cursor:not-allowed}
.opt-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.opt-ic .ic{width:21px;height:21px;color:var(--amber-hi)}
.opt-tx{flex:1;min-width:0}
.opt-tx b{display:block;font-size:14px;letter-spacing:.04em}
.opt-tx span{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.5}
.opt-price{font-family:var(--num);font-size:14px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:3px;flex:none}
.opt-price .ic{width:13px;height:13px}
.opt-price.no{color:#7c6a8c}
.gold-line{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--ink-2);
  padding:7px;border-radius:10px;background:rgba(255,213,74,.09);border:1px solid rgba(255,213,74,.2)}
.gold-line .ic{width:15px;height:15px;color:var(--gold)}
.gold-line b{font-family:var(--num);font-size:16px;color:var(--gold)}

/* 说明 */
.help-sec{display:flex;flex-direction:column;gap:7px}
.help-h{font-family:var(--display);font-size:14px;letter-spacing:.14em;color:var(--amber);margin:0;display:flex;align-items:center;gap:7px}
.help-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,171,46,.4),transparent)}
.help-p{margin:0;font-size:12px;line-height:1.85;color:var(--ink-2)}
.help-p b{color:var(--ink)}
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.lg{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.055)}
.lg-ic{width:28px;height:28px;flex:none;border-radius:7px;display:grid;place-items:center;background:linear-gradient(158deg,#4a3457,#241830);border:1px solid rgba(255,255,255,.07)}
.lg-ic .ic{width:18px;height:18px}
.lg-tx{min-width:0}
.lg-tx b{display:block;font-size:11.5px}
.lg-tx span{display:block;font-size:9.5px;color:var(--ink-3);line-height:1.4}
.numline{display:flex;gap:4px;flex-wrap:wrap}
.numline span{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:14px;
  background:linear-gradient(170deg,#1a1222,#120c1a);border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}

/* 结算 */
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 0}
.result-ic{width:74px;height:74px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,rgba(255,59,92,.28),transparent 70%);animation:resultIn .6s cubic-bezier(.2,1.4,.4,1)}
.result-ic .ic{width:52px;height:52px;color:var(--blood)}
.result.win .result-ic{background:radial-gradient(circle,rgba(255,213,74,.3),transparent 70%)}
.result.win .result-ic .ic{color:var(--gold)}
@keyframes resultIn{from{transform:scale(0) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.result-title{font-family:var(--display);font-size:29px;letter-spacing:.16em;margin:0;text-indent:.16em}
.result.win .result-title{background:linear-gradient(178deg,#fff6e2,#ffd27a 40%,#ff9a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.result-sub{margin:0;font-size:12px;color:var(--ink-3);line-height:1.7;max-width:300px}
.score-big{font-family:var(--num);font-size:42px;font-weight:700;line-height:1;color:var(--gold);text-shadow:0 0 26px rgba(255,213,74,.5)}
.score-lb{font-size:9.5px;letter-spacing:.3em;color:var(--ink-3);text-indent:.3em}
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}

/* ── 层间过场 ───────────────────────────────── */
.floor-card{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(20,10,30,.86),rgba(5,3,9,.97));animation:fcFade 1.65s ease-in-out forwards}
@keyframes fcFade{0%{opacity:0}18%{opacity:1}72%{opacity:1}100%{opacity:0}}
.fc-inner{display:flex;flex-direction:column;align-items:center;gap:10px;animation:fcRise 1.65s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes fcRise{0%{transform:translateY(26px) scale(.94);opacity:0}22%{transform:none;opacity:1}72%{transform:none;opacity:1}100%{transform:translateY(-22px) scale(1.04);opacity:0}}
.fc-depth{font-family:var(--num);font-size:12px;letter-spacing:.5em;color:var(--amber);text-indent:.5em}
.fc-name{font-family:var(--display);font-size:clamp(34px,11vw,48px);letter-spacing:.2em;text-indent:.2em;
  background:linear-gradient(178deg,#fff6e2,#ffd27a 42%,#e0561a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,150,50,.45))}
.fc-line{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent)}

/* ── 提示 / 闪屏 ───────────────────────────────── */
.toast{position:fixed;left:50%;top:calc(72px + env(safe-area-inset-top));transform:translateX(-50%);z-index:95;
  padding:9px 16px;border-radius:11px;font-size:12.5px;font-weight:700;letter-spacing:.03em;pointer-events:none;max-width:88vw;text-align:center;
  background:linear-gradient(180deg,#3a2a46,#1e1526);border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 34px -14px #000;
  animation:toastIn .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.toast.out{animation:toastOut .3s ease-in forwards}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,-10px)}}
.toast.good{border-color:rgba(57,211,83,.5);color:#b6f5c2}
.toast.bad{border-color:rgba(255,59,92,.5);color:#ffb3c0}
.toast.magic{border-color:rgba(255,79,216,.5);color:#f7b8ec}
.flash{position:fixed;inset:0;z-index:75;pointer-events:none;opacity:0}
.flash.hurt{animation:flashHurt .42s ease-out}
@keyframes flashHurt{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.flash.hurt{background:radial-gradient(120% 90% at 50% 50%,transparent 34%,rgba(255,20,60,.62) 100%)}
.flash.gold{animation:flashHurt .6s ease-out;background:radial-gradient(120% 90% at 50% 50%,rgba(255,213,74,.28) 0%,transparent 62%)}
.flash.heal{animation:flashHurt .6s ease-out;background:radial-gradient(120% 90% at 50% 60%,rgba(125,255,90,.22) 0%,transparent 60%)}

/* 浮动数字 */
.float{position:fixed;z-index:78;pointer-events:none;font-family:var(--num);font-weight:700;font-size:20px;
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 14px currentColor;animation:floatUp 1s cubic-bezier(.2,.8,.3,1) forwards;white-space:nowrap}
@keyframes floatUp{0%{transform:translate(-50%,0) scale(.5);opacity:0}18%{transform:translate(-50%,-8px) scale(1.18);opacity:1}100%{transform:translate(-50%,-46px) scale(.94);opacity:0}}
.float.dmg{color:#ff5a78}.float.heal{color:#8dff63}.float.gold{color:#ffd54a}.float.xp{color:#c9a3ff}.float.crit{color:#ffab2e;font-size:24px}

/* ── 滚动条 ───────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:#7a4fa0 rgba(0,0,0,.3)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.34);border-radius:5px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c98bff,#7a4fa0);border-radius:5px;border:1px solid rgba(0,0,0,.45)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffb845,#c9761a)}
::-webkit-scrollbar-corner{background:transparent}

/* ── 自适应 ───────────────────────────────── */
@media (max-height:660px){
  .hero{padding:7px 9px}
  .lv-badge,.lv-badge .ring{width:40px;height:40px}
  .game-screen{gap:6px}
  .act{padding:5px 2px}
  .act .ic{width:17px;height:17px}
  .ticker{height:23px}
  .tagline{display:none}
  .torch-row{display:none}
}
@media (max-height:600px){
  .game-screen{gap:4px;padding-top:calc(5px + env(safe-area-inset-top))}
  .hero{padding:5px 8px;gap:8px}
  .lv-badge,.lv-badge .ring{width:34px;height:34px}
  .lv-n{font-size:15px}.lv-t{display:none}
  .hero-main{gap:4px}
  .bar{height:15px}
  .chip{padding:2px 5px 2px 4px;font-size:10.5px}
  .chip .ic{width:11px;height:11px}
  .floor-num{font-size:21px}
  .floor-meta b{font-size:13px}
  .icon-btn{width:31px;height:31px;border-radius:9px}
  .icon-btn .ic{width:16px;height:16px}
  .ticker{height:20px}
  .ticker p{font-size:10.5px}
  .act{padding:4px 1px;gap:2px;border-radius:9px}
  .act .ic{width:16px;height:16px}
  .act span{font-size:9px}
  .board-frame{padding:5px}
}
@media (max-width:340px){
  .act span{font-size:8.5px}
  .chip{padding:3px 5px 3px 4px;font-size:10.5px}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:520px){
  .game-screen{padding-top:calc(16px + env(safe-area-inset-top))}
  .board-frame{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}