/* ============================================================
   杀戮尖塔 网页复刻版 —— 样式表
   固定 1600x900 舞台，等比缩放适配窗口
   ============================================================ */
:root{
  --gold:#d4af58;
  --gold-dim:#8a7237;
  --parch:#e8dcc0;
  --ink:#1b1512;
  --red:#c0392b;
  --hp:#c62828;
  --hp-dark:#4a1010;
  --block:#8fb3d9;
  --energy:#3fd0c9;
  --attack:#a8442a;
  --skill:#2f6b8f;
  --power:#6b4b9a;
  --curse:#4a2b52;
  --status:#5d6470;
  --frame-w:2px;
  --font-cn:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  --font-fancy:"STKaiti","KaiTi","Kaiti SC","Songti SC","SimSun",serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#07070a;font-family:var(--font-cn);color:var(--parch)}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
.hidden{display:none !important}

#viewport{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;width:1600px;height:900px;transform-origin:top left;user-select:none}
#bg-layer{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 50% 40%, #241d2c 0%, #16121c 45%, #0a080d 100%);}
#bg-layer::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:5px 5px;opacity:.35;pointer-events:none}
#screens{position:absolute;inset:0}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

/* ================= 顶部栏 ================= */
#topbar{position:absolute;top:0;left:0;right:0;height:96px;z-index:60;
  display:flex;justify-content:space-between;align-items:flex-start;padding:8px 16px;
  background:linear-gradient(180deg, rgba(6,5,9,.92) 0%, rgba(6,5,9,.55) 65%, rgba(6,5,9,0) 100%);}
#top-left{display:flex;flex-direction:column;gap:4px}
#char-panel{display:flex;align-items:center;gap:8px}
#char-portrait{width:56px;height:56px;border:2px solid var(--gold-dim);border-radius:4px;
  background:#120f16;overflow:hidden;flex:0 0 auto}
#char-portrait svg{width:100%;height:100%;display:block}
#char-info{min-width:230px}
#char-name{font-size:14px;color:var(--gold);letter-spacing:2px;font-family:var(--font-fancy)}
.hpbar{position:relative;height:22px;width:230px;background:var(--hp-dark);
  border:2px solid #2b2020;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 8px #000}
.hpbar .hp-fill{position:absolute;inset:0;width:100%;
  background:linear-gradient(180deg,#e04a3a,#a01b1b 60%,#6d0f0f);transition:width .32s ease}
.hpbar .hp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;text-shadow:0 1px 2px #000;letter-spacing:.5px}
#relic-bar{display:flex;flex-wrap:wrap;gap:3px;max-width:640px;padding-left:2px}
.relic-slot{width:30px;height:30px;cursor:help;filter:drop-shadow(0 1px 2px #000)}
.relic-slot svg{width:100%;height:100%;display:block}
.relic-slot.flash{animation:relicFlash .5s ease}
@keyframes relicFlash{0%{transform:scale(1)}40%{transform:scale(1.45) rotate(-8deg);filter:drop-shadow(0 0 8px var(--gold))}100%{transform:scale(1)}}

#top-mid{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:4px}
#gold-panel{display:flex;align-items:center;gap:6px;font-size:17px;color:var(--gold);font-weight:700}
.gold-icon{width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe89a,#d4af58 55%,#8a6d20);
  box-shadow:0 0 4px rgba(212,175,88,.6),inset 0 -1px 2px rgba(0,0,0,.4);display:inline-block}
#floor-panel{font-size:13px;color:#a49a86;letter-spacing:1px}
#top-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#potion-bar{display:flex;gap:6px}
.potion-slot{width:38px;height:44px;border:2px dashed #4a4152;border-radius:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.potion-slot.filled{border-style:solid;border-color:#6b6180;background:rgba(20,16,26,.6)}
.potion-slot.filled:hover{border-color:var(--gold);transform:translateY(-2px)}
.potion-slot svg{width:32px;height:38px}
#top-buttons{display:flex;gap:6px}
.tbtn{padding:4px 12px;font-size:12px;border:1px solid var(--gold-dim);border-radius:3px;
  background:linear-gradient(180deg,#2a2333,#171320);color:#cbbf9f;letter-spacing:1px;transition:.15s}
.tbtn:hover{background:linear-gradient(180deg,#3d3348,#221c30);color:#fff;border-color:var(--gold)}

/* ================= 通用按钮 / 面板 ================= */
.btn{padding:10px 26px;font-size:16px;letter-spacing:2px;border-radius:4px;
  border:2px solid var(--gold-dim);background:linear-gradient(180deg,#332a3e 0%,#1c1727 100%);
  color:var(--parch);box-shadow:0 3px 0 #0d0a12,0 6px 14px rgba(0,0,0,.5);transition:.13s;font-family:var(--font-fancy)}
.btn:hover{border-color:var(--gold);color:#fff;transform:translateY(-2px);
  box-shadow:0 5px 0 #0d0a12,0 10px 20px rgba(0,0,0,.6)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #0d0a12}
.btn.primary{background:linear-gradient(180deg,#7a2b22,#4a1712);border-color:#c9814a}
.btn.primary:hover{background:linear-gradient(180deg,#94382c,#5d1d16)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.panel{background:linear-gradient(180deg,rgba(28,23,38,.96),rgba(14,11,20,.97));
  border:2px solid var(--gold-dim);border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.7)}
.section-title{font-family:var(--font-fancy);font-size:30px;color:var(--gold);letter-spacing:6px;
  text-shadow:0 2px 8px #000;text-align:center}

/* ================= 标题界面 ================= */
#screen-title{display:none;place-items:center}
#screen-title.active{display:grid}
.title-wrap{text-align:center;transform:translateY(-10px)}
.game-logo{font-family:var(--font-fancy);font-size:82px;letter-spacing:16px;
  background:linear-gradient(180deg,#fff3c4,#d4af58 45%,#8a6a22);-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 4px 10px rgba(0,0,0,.9))}
.game-sub{font-size:15px;color:#8d8271;letter-spacing:5px;margin-top:2px}
.title-art{margin:14px auto 8px;width:210px;height:210px}
.title-art svg{width:100%;height:100%}
.title-btns{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:10px}
.title-btns .btn{width:280px}
.title-tip{margin-top:18px;font-size:12px;color:#6f6858;line-height:1.9}
kbd{display:inline-block;padding:1px 6px;border:1px solid #56504a;border-bottom-width:2px;
  border-radius:3px;background:#221d28;font-size:11px;color:#cbbf9f;font-family:var(--font-cn)}

/* ================= 地图界面 ================= */
#screen-map{overflow:hidden}
#map-scroll{position:absolute;top:96px;bottom:0;left:0;right:0;overflow-y:auto;overflow-x:hidden}
#map-scroll::-webkit-scrollbar{width:10px}
#map-scroll::-webkit-scrollbar-thumb{background:#3a3145;border-radius:5px}
#map-inner{position:relative;margin:0 auto;width:900px}
#map-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-node{position:absolute;width:56px;height:56px;transform:translate(-50%,-50%);
  display:grid;place-items:center;cursor:default;z-index:2}
.map-node svg{width:44px;height:44px;display:block;transition:.15s}
.map-node.dim svg{opacity:.4;filter:grayscale(.8)}
.map-node.avail svg{filter:drop-shadow(0 0 8px #ffe08a)}
.map-node.avail{cursor:pointer;animation:nodePulse 1.5s ease-in-out infinite}
.map-node.avail:hover svg{transform:scale(1.25)}
@keyframes nodePulse{0%,100%{filter:none}50%{filter:brightness(1.3)}}
.map-node.done svg{opacity:.75}
.map-node .node-ring{position:absolute;inset:2px;border-radius:50%;border:2px solid transparent}
.map-node.avail .node-ring{border-color:rgba(255,224,138,.85);box-shadow:0 0 12px rgba(255,224,138,.5)}
.map-node.here .node-ring{border-color:#fff;box-shadow:0 0 16px #fff}
#map-title{position:absolute;top:100px;left:0;right:0;text-align:center;z-index:3;pointer-events:none}
.act-label{font-family:var(--font-fancy);font-size:22px;color:var(--gold);letter-spacing:8px;
  text-shadow:0 2px 10px #000}
.map-legend{position:absolute;right:14px;bottom:14px;z-index:5;font-size:11px;color:#8d8271;
  pointer-events:none;
  background:rgba(10,8,14,.8);border:1px solid #3a3145;border-radius:4px;padding:8px 10px;line-height:1.9}
.map-legend .lg{display:flex;align-items:center;gap:6px}
.map-legend svg{width:18px;height:18px}

/* ================= 战斗界面 ================= */
#battlefield{position:absolute;top:96px;left:0;right:0;height:470px}
#player-slot{position:absolute;left:150px;bottom:0;width:300px;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
#enemy-slots{position:absolute;right:60px;bottom:0;left:520px;height:100%;
  display:flex;justify-content:flex-end;align-items:flex-end;gap:26px;padding-right:40px}
.combatant{position:relative;display:flex;flex-direction:column;align-items:center;
  transition:transform .18s ease}
.combatant .body{position:relative;display:grid;place-items:end center}
.combatant .body svg{display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.75))}
.combatant.dead{animation:dieFade .55s forwards}
@keyframes dieFade{to{opacity:0;transform:translateY(14px) scale(.85);filter:blur(3px)}}
.combatant.hurt{animation:shake .3s}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-9px,2px)}
  40%{transform:translate(8px,-2px)}60%{transform:translate(-5px,1px)}80%{transform:translate(4px,0)}}
.combatant.lunge{animation:lunge .38s ease}
@keyframes lunge{0%,100%{transform:translate(0)}45%{transform:translate(-42px,0)}}
.combatant.lungeR{animation:lungeR .38s ease}
@keyframes lungeR{0%,100%{transform:translate(0)}45%{transform:translate(42px,0)}}
.combatant .float-shadow{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:76%;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%)}

/* 血条 + 格挡 */
.cmb-bars{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:3px;width:190px}
.cmb-name{font-size:12px;color:#c8bda3;letter-spacing:1px;text-shadow:0 1px 2px #000}
.bar-row{display:flex;align-items:center;gap:5px;width:100%}
.block-badge{position:relative;width:30px;height:30px;flex:0 0 auto;display:none;place-items:center}
.block-badge.on{display:grid}
.block-badge svg{width:30px;height:30px;position:absolute;inset:0}
.block-badge span{position:relative;font-size:13px;font-weight:800;color:#0d1c2c;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.hpbar.small{height:19px;width:auto;flex:1}
.hpbar.small .hp-text{font-size:12px}
.hpbar .hp-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.hpbar.dmg .hp-flash{animation:hpFlash .35s}
@keyframes hpFlash{0%{opacity:.7}100%{opacity:0}}

/* Buff 图标 */
.power-row{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;min-height:26px;max-width:210px}
.power-chip{position:relative;width:26px;height:26px;cursor:help}
.power-chip svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px #000)}
.power-chip .pv{position:absolute;right:-2px;bottom:-3px;font-size:11px;font-weight:800;
  color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,1px 1px 0 #000}
.power-chip.gain{animation:chipPop .4s ease}
@keyframes chipPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.35)}100%{transform:scale(1)}}

/* 敌人意图 */
.intent{position:absolute;top:-46px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:2px;height:40px;pointer-events:none}
.intent svg{width:38px;height:38px;filter:drop-shadow(0 2px 4px #000)}
.intent .dmg{font-size:19px;font-weight:800;color:#fff;text-shadow:0 0 4px #000,1px 1px 0 #000,-1px 1px 0 #000}
.intent .hits{font-size:13px;color:#ffd7a1;font-weight:700;text-shadow:0 0 3px #000}
.combatant.targetable{cursor:pointer}
.combatant.targetable .body svg{filter:drop-shadow(0 0 0 transparent)}
.combatant.hoverTarget .body{outline:none}
.combatant.hoverTarget .body svg{filter:drop-shadow(0 0 12px #ff6b4a) drop-shadow(0 0 22px #ff3b1a)}
.target-ring{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:110px;height:26px;
  border:2px solid rgba(255,90,60,.9);border-radius:50%;display:none;
  box-shadow:0 0 14px rgba(255,90,60,.6) inset,0 0 10px rgba(255,90,60,.5)}
.combatant.hoverTarget .target-ring{display:block}

/* HUD */
#combat-hud{position:absolute;left:0;right:0;bottom:0;height:300px;pointer-events:none;z-index:30}
#combat-hud > *{pointer-events:auto}
#energy-panel{position:absolute;left:40px;bottom:112px;width:104px;height:104px;display:grid;place-items:center;cursor:help}
#energy-orb{position:absolute;inset:0}
#energy-orb svg{width:100%;height:100%}
#energy-text{position:relative;font-size:26px;font-weight:800;color:#fff;
  text-shadow:0 0 6px #0b3b3a,0 2px 3px #000;letter-spacing:-1px}
#energy-panel.spend{animation:orbSpend .35s}
@keyframes orbSpend{0%{transform:scale(1)}45%{transform:scale(.86)}100%{transform:scale(1)}}
.pile-btn{position:absolute;bottom:16px;width:92px;height:66px;display:grid;place-items:center;
  border:2px solid #4a4152;border-radius:6px;background:linear-gradient(180deg,rgba(30,24,42,.9),rgba(12,10,18,.95));
  cursor:pointer;transition:.14s}
.pile-btn:hover{border-color:var(--gold);transform:translateY(-3px)}
.pile-count{font-size:22px;font-weight:800;color:#e5d9bb;line-height:1.15}
.pile-label{font-size:11px;color:#8d8271;letter-spacing:1px;margin-top:2px}
#pile-draw{left:24px}
#pile-discard{right:24px}
#pile-exhaust{right:126px;width:78px;height:56px}
#pile-exhaust .pile-count{font-size:18px}
#btn-end-turn{position:absolute;right:34px;bottom:106px;width:186px;height:76px;border-radius:8px;
  border:2px solid #c9814a;background:linear-gradient(180deg,#8c3325 0%,#5a1c14 60%,#3d120c 100%);
  box-shadow:0 4px 0 #250a06,0 8px 20px rgba(0,0,0,.6);transition:.13s;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
#btn-end-turn .et-label{font-family:var(--font-fancy);font-size:22px;letter-spacing:4px;color:#ffe6c8}
#btn-end-turn .et-sub{font-size:11px;color:#e0a98a;letter-spacing:1px}
#btn-end-turn:hover{transform:translateY(-3px);border-color:#ffcf9a;
  background:linear-gradient(180deg,#a63e2c,#6b2318 60%,#48160e)}
#btn-end-turn.enemyTurn{filter:grayscale(.75) brightness(.6);cursor:default;transform:none}
#turn-banner{position:absolute;left:50%;bottom:250px;transform:translateX(-50%);
  font-family:var(--font-fancy);font-size:40px;letter-spacing:14px;color:var(--gold);
  text-shadow:0 0 20px #000,0 3px 6px #000;opacity:0;pointer-events:none;white-space:nowrap}
#turn-banner.show{animation:bannerIn 1.5s ease forwards}
@keyframes bannerIn{0%{opacity:0;transform:translateX(-50%) scale(.7)}
  20%{opacity:1;transform:translateX(-50%) scale(1)}
  75%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.08)}}

/* ================= 手牌 ================= */
/* 注意：#hand-area 覆盖整个屏幕底部，必须让事件穿透，否则会挡住
   结束回合按钮 / 能量球 / 各牌堆的点击 */
#hand-area{position:absolute;left:0;right:0;bottom:0;height:280px;z-index:40;pointer-events:none}
#hand{position:absolute;left:50%;bottom:0;width:1px;height:1px;pointer-events:none}
.card{position:absolute;width:190px;height:264px;left:-95px;bottom:0;
  transform-origin:50% 118%;cursor:grab;will-change:transform;pointer-events:auto;
  transition:transform .22s cubic-bezier(.2,.9,.3,1),filter .15s}
.card.no-anim{transition:none}
.card.dragging{cursor:grabbing;transition:none;z-index:999}
.card.unplayable{filter:grayscale(.7) brightness(.62)}
.card.playing{animation:cardPlay .3s ease forwards}
@keyframes cardPlay{to{opacity:0;transform:translateY(-120px) scale(.6)}}
.card-inner{position:absolute;inset:0;border-radius:12px;overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.7);background:#15121c}
.card.big{width:220px;height:306px}

/* 卡牌视觉 */
.c-frame{position:absolute;inset:0}
.c-frame svg{width:100%;height:100%;display:block}
.c-art{position:absolute;left:9%;top:9%;width:82%;height:38%;overflow:hidden;border-radius:6px}
.c-art svg{width:100%;height:100%;display:block}
.c-cost{position:absolute;left:-4px;top:-4px;width:52px;height:52px;display:grid;place-items:center}
.c-cost svg{position:absolute;inset:0;width:100%;height:100%}
.c-cost span{position:relative;font-size:24px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000,0 0 6px #0b3b3a}
.c-name{position:absolute;left:8%;right:8%;top:48.5%;text-align:center;font-size:14.5px;
  font-weight:700;color:#f6ecd2;letter-spacing:.5px;text-shadow:0 1px 2px #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-type{position:absolute;left:0;right:0;top:57.5%;text-align:center;font-size:10.5px;
  color:#b7a98c;letter-spacing:3px}
/* 描述文字必须包一层块级元素：直接把文本节点放进 flex 容器会变成匿名 flex 项，
   溢出时被居中裁切且无法测量 */
.c-desc{position:absolute;left:9%;right:9%;top:62.5%;height:34%;display:flex;
  align-items:center;justify-content:center;overflow:hidden;font-size:12px}
.c-desc-in{width:100%;text-align:center;line-height:1.42;
  color:#efe4cb;text-shadow:0 1px 1px #000;word-break:normal;overflow-wrap:break-word}
.c-desc b{color:#ffd76b;font-weight:700}
.c-desc .up{color:#7fe07f}
.c-desc .dn{color:#ff8a6b}
.c-desc .kw{color:#ffd76b}
.grid-card .c-desc{font-size:11.5px}
.grid-card .c-name{font-size:13px}
.grid-card .c-type{font-size:9.5px;letter-spacing:2px}
.grid-card .c-cost{width:46px;height:46px}
.grid-card .c-cost span{font-size:21px}
.c-up-mark{position:absolute;right:6px;top:6px;font-size:10px;color:#7fe07f;
  text-shadow:0 0 4px #000;letter-spacing:1px}
.card.selected .card-inner{box-shadow:0 0 0 3px #ffe08a,0 8px 20px rgba(0,0,0,.8)}
.c-glow{position:absolute;inset:-14px;border-radius:20px;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(255,224,138,.35),transparent 70%)}
.card.playable .c-glow{opacity:1;animation:glowPulse 2s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.35}50%{opacity:.8}}

/* 目标箭头 */
#target-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:45;display:none}
#target-arrow.on{display:block}

/* ================= 悬浮预览 & tooltip ================= */
#hover-preview{position:absolute;pointer-events:none;z-index:900;display:none}
#hover-preview.on{display:block}
#tooltip{position:absolute;z-index:950;display:none;max-width:290px;padding:9px 12px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(24,20,32,.98),rgba(12,10,18,.98));
  border:2px solid var(--gold-dim);border-radius:5px;box-shadow:0 6px 22px rgba(0,0,0,.8);
  font-size:12.5px;line-height:1.65;color:#e5d9bb}
#tooltip.on{display:block}
#tooltip .tt-title{color:var(--gold);font-weight:700;font-size:14px;letter-spacing:1px;margin-bottom:2px}
#tooltip .tt-sub{color:#8d8271;font-size:11px;margin-bottom:4px}
#tooltip .tt-kw{margin-top:7px;padding-top:6px;border-top:1px solid #332c40}
#tooltip .tt-kw b{color:var(--gold)}
#tooltip .tt-flavor{color:#9b8f7a;font-style:italic;font-size:11.5px;margin-top:5px}

/* ================= 通用浮层 ================= */
#overlay-layer{position:absolute;inset:0;z-index:700;pointer-events:none}
.overlay{position:absolute;inset:0;background:rgba(5,4,8,.86);display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:auto;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay .ov-title{font-family:var(--font-fancy);font-size:28px;color:var(--gold);letter-spacing:6px;margin-bottom:6px}
.overlay .ov-sub{font-size:13px;color:#8d8271;margin-bottom:14px;letter-spacing:1px}
.card-grid{display:flex;flex-wrap:wrap;gap:16px 18px;justify-content:center;
  max-width:1300px;max-height:600px;overflow-y:auto;padding:12px 20px}
.card-grid::-webkit-scrollbar{width:9px}
.card-grid::-webkit-scrollbar-thumb{background:#3a3145;border-radius:5px}
.grid-card{position:relative;width:170px;height:236px;flex:0 0 auto;cursor:default;transition:.14s}
.grid-card.pick{cursor:pointer}
.grid-card.pick:hover{transform:translateY(-9px) scale(1.05);z-index:5}
.grid-card.chosen .card-inner{box-shadow:0 0 0 3px #7fe07f,0 8px 20px #000}
.grid-card.disabled{filter:grayscale(.75) brightness(.6);cursor:not-allowed}
.ov-buttons{display:flex;gap:14px;margin-top:16px}

/* ================= 奖励 / 商店 / 休息 / 事件 ================= */
.center-col{position:absolute;inset:96px 0 0 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px}
.reward-list{display:flex;flex-direction:column;gap:10px;width:520px}
.reward-item{display:flex;align-items:center;gap:14px;padding:11px 16px;cursor:pointer;
  border:2px solid var(--gold-dim);border-radius:5px;
  background:linear-gradient(90deg,rgba(44,36,58,.95),rgba(20,16,28,.92));transition:.13s}
.reward-item:hover{border-color:var(--gold);transform:translateX(6px);
  background:linear-gradient(90deg,rgba(62,50,80,.95),rgba(28,22,38,.92))}
.reward-item.taken{opacity:.35;cursor:default;transform:none}
.reward-item .ri-icon{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center}
.reward-item .ri-icon svg{width:38px;height:38px}
.reward-item .ri-text{font-size:15px;color:#eadfc4;letter-spacing:1px}
.reward-item .ri-sub{font-size:11.5px;color:#8d8271}

#shop-wrap{position:absolute;inset:96px 0 0 0;padding:10px 40px 20px;overflow-y:auto}
.shop-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px}
.shop-col-title{writing-mode:vertical-rl;font-family:var(--font-fancy);font-size:16px;
  color:var(--gold);letter-spacing:6px;padding-top:8px;flex:0 0 auto}
.shop-cards{display:flex;gap:14px;flex-wrap:wrap}
.shop-item{position:relative}
.price-tag{position:absolute;left:50%;transform:translateX(-50%);bottom:-20px;font-size:13px;
  font-weight:700;color:var(--gold);display:flex;align-items:center;gap:4px;white-space:nowrap}
.price-tag.poor{color:#c9584a}
.shop-relic,.shop-potion{width:92px;height:92px;border:2px solid #4a4152;border-radius:6px;
  display:grid;place-items:center;background:rgba(20,16,28,.7);cursor:pointer;transition:.14s;margin-bottom:24px}
.shop-relic:hover,.shop-potion:hover{border-color:var(--gold);transform:translateY(-4px)}
.shop-relic svg{width:64px;height:64px}
.shop-potion svg{width:56px;height:66px}
.shop-sold{opacity:.25;pointer-events:none}
#shop-remove{margin-top:6px}

.rest-options{display:flex;gap:40px;justify-content:center;align-items:center}
.rest-opt{width:230px;padding:22px 14px;text-align:center;border:2px solid var(--gold-dim);
  border-radius:8px;background:linear-gradient(180deg,rgba(46,32,26,.95),rgba(18,13,20,.95));
  cursor:pointer;transition:.15s}
.rest-opt:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 12px 26px rgba(0,0,0,.6)}
.rest-opt.dis{opacity:.35;pointer-events:none}
.rest-opt svg{width:82px;height:82px}
.rest-opt .ro-name{font-family:var(--font-fancy);font-size:20px;color:var(--gold);letter-spacing:3px;margin-top:8px}
.rest-opt .ro-desc{font-size:12px;color:#a49a86;margin-top:4px;line-height:1.6}
#campfire-art{width:260px;height:190px;margin-bottom:4px}

.event-panel{width:900px;max-height:660px;padding:24px 30px;display:flex;flex-direction:column;gap:14px}
.event-art{width:100%;height:200px;display:grid;place-items:center}
.event-art svg{height:100%}
.event-title{font-family:var(--font-fancy);font-size:26px;color:var(--gold);letter-spacing:4px;text-align:center}
.event-body{font-size:13.5px;line-height:1.95;color:#d8cdb4;text-align:center;padding:0 20px;
  max-height:180px;overflow-y:auto}
.event-opts{display:flex;flex-direction:column;gap:9px}
.event-opt{padding:10px 16px;border:2px solid var(--gold-dim);border-radius:4px;cursor:pointer;
  background:rgba(26,21,34,.8);font-size:13.5px;color:#e5d9bb;transition:.12s;text-align:left}
.event-opt:hover{border-color:var(--gold);background:rgba(48,38,62,.9);transform:translateX(5px)}
.event-opt.dis{opacity:.4;pointer-events:none}
.event-opt .eo-tag{color:#8d8271;font-size:11.5px;margin-left:6px}

/* 结算 */
#screen-end{display:none;place-items:center}
#screen-end.active{display:grid}
.end-wrap{text-align:center}
.end-title{font-family:var(--font-fancy);font-size:64px;letter-spacing:12px}
.end-title.win{background:linear-gradient(180deg,#fff6cf,#e2b95c 50%,#8a6a22);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.end-title.lose{color:#8e2b22;text-shadow:0 0 30px rgba(180,40,30,.5)}
.end-stats{margin-top:18px;font-size:14px;color:#a49a86;line-height:2.1}
.end-stats b{color:var(--parch)}

/* toast */
#toast-layer{position:absolute;left:50%;top:120px;transform:translateX(-50%);z-index:980;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{padding:7px 18px;border-radius:20px;background:rgba(10,8,14,.92);border:1px solid var(--gold-dim);
  font-size:13px;color:#e5d9bb;animation:toastIn .3s ease,toastOut .4s ease 1.7s forwards;white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-16px)}}

/* 浮动数字 */
#fx-layer{position:absolute;inset:0;z-index:500;pointer-events:none;overflow:hidden}
.float-num{position:absolute;font-size:34px;font-weight:900;transform:translate(-50%,-50%);
  text-shadow:0 2px 0 #000,0 0 10px #000,-2px 0 0 #000,2px 0 0 #000;animation:floatUp 1s ease-out forwards}
.float-num.dmg{color:#ff6b4a}
.float-num.blk{color:#a8cdf0}
.float-num.heal{color:#7fe07f}
.float-num.buff{color:#ffd76b;font-size:24px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
.slash-fx{position:absolute;width:150px;height:150px;transform:translate(-50%,-50%);
  animation:slashFx .34s ease-out forwards;pointer-events:none}
@keyframes slashFx{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-30deg)}
  30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(12deg)}}
.screen-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:sflash .25s ease-out forwards}
@keyframes sflash{0%{opacity:.42}100%{opacity:0}}

/* 药水选择 */
.potion-menu{position:absolute;z-index:960;background:linear-gradient(180deg,rgba(26,21,34,.98),rgba(12,10,18,.98));
  border:2px solid var(--gold-dim);border-radius:5px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:130px}
.potion-menu button{padding:7px 12px;font-size:13px;border-radius:3px;text-align:left;color:#e5d9bb}
.potion-menu button:hover{background:#3d3350;color:#fff}
.scroll-y{overflow-y:auto}
.scroll-y::-webkit-scrollbar{width:9px}
.scroll-y::-webkit-scrollbar-thumb{background:#3a3145;border-radius:5px}
.row{display:flex;gap:10px;align-items:center}
.dim{color:#8d8271}
.tiny{font-size:11px}