*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Microsoft YaHei",sans-serif;background:radial-gradient(circle at 50% 10%,#1a2a3a,#070c12);color:#dfe7ef;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;user-select:none}
/* ===== 整体纵向布局：属性 -> 世界 -> 背包 -> 日志 ===== */
#app{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px;width:100%}
.game-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
/* 缩放容器：窄屏时按 JS 计算的等比缩小，占据实际缩小后的尺寸，避免留白 */
.viewport-sizer{transform-origin:top center;overflow:hidden}
.viewport{position:relative;overflow:hidden;flex:none;transform-origin:top left;border-radius:22px;border:6px solid #4a6a8a;background:linear-gradient(145deg,#0d1620,#16242f);box-shadow:0 0 60px rgba(80,140,200,.3),inset 0 0 60px rgba(0,0,0,.55)}
.world{position:absolute;top:0;left:0;transition:transform .4s cubic-bezier(.4,.2,.2,1)}
/* 网格线随 js/imgmap.js 的尺寸配置走（默认 3:4 竖版，144×192 / 格距 156×204） */
.grid-overlay{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to right,transparent 0 var(--card-w,144px),rgba(90,130,160,.30) var(--card-w,144px) calc(var(--card-w,144px) + 6px)),repeating-linear-gradient(to bottom,transparent 0 var(--card-h,192px),rgba(90,130,160,.30) var(--card-h,192px) calc(var(--card-h,192px) + 6px))}
/* ===== 卡面附加元素：角标 / 已激活对勾 / 顶部名称条 ===== */
.card .corner{position:absolute;display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:11px;font-size:20px;font-weight:bold;line-height:1.15;white-space:nowrap;background:rgba(6,12,18,.8);border:1px solid rgba(255,255,255,.2);text-shadow:0 1px 2px #000;backdrop-filter:blur(2px)}
.card .corner .ci{font-size:15px;opacity:.95}
.card .corner .cv{font-variant-numeric:tabular-nums}
.card .corner.tl{top:6px;left:6px}
.card .corner.tr{top:6px;right:6px}
.card .corner.bl{bottom:6px;left:6px}
.card .corner.atk{color:#ffd24a;border-color:rgba(255,210,74,.45)}
.card .corner.def{color:#9fd8ff;border-color:rgba(159,216,255,.45)}
.card .corner.hp{color:#ff9a9a;border-color:rgba(255,154,154,.45)}
.card .card-mark{position:absolute;left:6px;bottom:6px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:bold;color:#08160c;background:linear-gradient(145deg,#8fe08f,#4caf50);box-shadow:0 0 12px rgba(110,220,110,.75);border:1px solid #d8ffd8}
.card .card-cap.top{top:0;bottom:auto;border-radius:13px 13px 0 0;padding:7px 10px 18px;background:linear-gradient(180deg,rgba(6,12,18,.92),rgba(6,12,18,0))}
/* 生物卡名称常显版：顶部留出空间，避开左上攻击 / 右上防御两个角标 */
.card .card-cap.top.cre{padding:34px 10px 16px}
/* ===== 卡牌（竖版 3:4，尺寸由 --card-w / --card-h 控制）===== */
/* 说明：描边改用 inset box-shadow，不再占用盒模型，保证图片区就是精确的 3:4 */
.card{position:absolute;width:var(--card-w,144px);height:var(--card-h,192px);border-radius:18px;transition:transform .4s cubic-bezier(.4,.2,.2,1),opacity .4s,filter .3s;cursor:pointer;font-size:24px;text-align:center;background:linear-gradient(145deg,#1c2a36,#243644);box-shadow:inset 0 0 0 6px #2a3a4a}
.card .card-img{position:absolute;inset:0;border-radius:13px;background-position:center center;background-repeat:no-repeat;background-size:var(--card-fit,cover);background-color:#0d1620}
.card .card-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:72px;line-height:1}
.card .card-cap{position:absolute;left:0;right:0;bottom:0;border-radius:0 0 13px 13px;padding:16px 8px 7px;background:linear-gradient(180deg,rgba(6,12,18,0),rgba(6,12,18,.72) 40%,rgba(6,12,18,.92));transition:opacity .25s}
.card .card-cap .nm{font-size:22px;font-weight:bold;line-height:1.25;text-shadow:0 1px 3px #000}
.card .card-cap .sub{font-size:17px;opacity:.88;line-height:1.25;margin-top:1px;text-shadow:0 1px 3px #000}
.card.hide-cap .card-cap{opacity:0}
.card:hover .card-cap{opacity:1}
.card.player{box-shadow:inset 0 0 0 6px #ffd24a,0 0 40px #ffd24a66}
.card.creature{box-shadow:inset 0 0 0 6px #d04545;background:linear-gradient(145deg,#3a1414,#5a1c1c)}
.card.event{box-shadow:inset 0 0 0 6px #a44fc4;background:linear-gradient(145deg,#2a1430,#3c1c4a)}
.card.location{box-shadow:inset 0 0 0 6px #c8964a;background:linear-gradient(145deg,#3a2814,#5a3c1c)}
.card.empty{box-shadow:none;background:rgba(10,20,30,.3);cursor:cell}
.card.empty.has-img::before{display:none}
.card.empty::before{content:"";position:absolute;inset:4px;border:6px dashed #2a3a4a;border-radius:12px;pointer-events:none}
.card.fog{box-shadow:inset 0 0 0 6px #3a4a5a;background:linear-gradient(145deg,#0a1018,#141c24);filter:brightness(.7)}
.card.lamp{box-shadow:inset 0 0 0 6px #ffe08a;background:linear-gradient(145deg,#3a3010,#5a4818)}
.card.lamp.lit{box-shadow:inset 0 0 0 6px #ffe08a,0 0 48px #ffe08a88}
.card.gate{box-shadow:inset 0 0 0 6px #8a8a9a;background:linear-gradient(145deg,#2a2a36,#3c3c4a)}
.card.factory{box-shadow:inset 0 0 0 6px #6a8a9a;background:linear-gradient(145deg,#1c2a30,#2c3a44)}
/* 第二幕新增卡面：电闸（电光绿）/ 补给箱（木箱棕）/ 电台（信号蓝） */
.card.breaker{box-shadow:inset 0 0 0 6px #6ee7a8;background:linear-gradient(145deg,#0f2a20,#184033)}
.card.crate{box-shadow:inset 0 0 0 6px #b98b52;background:linear-gradient(145deg,#33240f,#4d361a)}
.card.radio{box-shadow:inset 0 0 0 6px #5ad0e8;background:linear-gradient(145deg,#0e2630,#163a48)}
.card.adj{filter:brightness(1.18)}
.card.adj::after{content:"";position:absolute;inset:0;border-radius:14px;border:5px solid #6cf;animation:pulse 1.1s infinite;pointer-events:none}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.9}}
/* 受击 punch / 红闪、攻击突进均由 JS 用 Web Animations 驱动（卡片的定位位移写在 transform 上，
   动画必须自己带上这段 translate，纯 CSS 关键帧做不到），这里只保留不支持 WAAPI 时的降级效果 */
.card.hit{animation:shake .35s}
@keyframes shake{0%,100%{filter:brightness(1)}20%{filter:brightness(2.4) sepia(1) hue-rotate(-30deg)}60%{filter:brightness(2.2)}}
.card.lunge{animation:lunge .32s}
@keyframes lunge{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6) drop-shadow(0 0 24px #ffd24a)}}
.card.removing{opacity:0}
.tip{font-size:22px;color:rgb(207, 217, 226);min-height:26px;text-align:center;max-width:600px}
/* ===== 面板：统一定宽，纵向堆叠 ===== */
.panel{width:600px;max-width:96vw;background:rgba(18,28,38,.78);border:1px solid #2a4a5a;border-radius:12px;padding:14px}
.panel h3{font-size:17px;margin-bottom:8px;color:#ffd24a;letter-spacing:1px}
/* 章节属性面板：内部横向排布，节省纵向空间 */
.stats-panel{display:flex;flex-wrap:wrap;align-items:center;column-gap:28px;row-gap:8px}
.stats-panel h3{width:100%;margin-bottom:2px}
.row{display:flex;justify-content:space-between;gap:14px;font-size:15px;margin:0}
.hp-bar{height:14px;width:170px;background:#0a1218;border-radius:7px;overflow:hidden;border:1px solid #2a3a44}
.hp-fill{height:100%;background:linear-gradient(90deg,#e23b3b,#ff7a5c);transition:width .4s}
/* 已达成的激活条件：小标签横排，方便对照关卡条件链调试 */
.flags-row{align-items:flex-start}
.flags{flex:1;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:220px}
.flags .fg{font-size:13px;background:#102a34;border:1px solid #2c5a6a;border-radius:9px;padding:3px 9px;color:#9fd8ff;white-space:nowrap}
.flags .fg.none{background:none;border-style:dashed;color:#678}
.threat-bar{height:14px;flex:1;min-width:220px;background:#0a1218;border-radius:7px;overflow:hidden;border:1px solid #2a3a44}
.threat-fill{height:100%;width:0;background:linear-gradient(90deg,#4caf50,#f5a623,#e23b3b);transition:width .5s}
.log{height:170px;overflow-y:auto;font-size:15px;line-height:1.6;color:#bcd}
.log p{margin:3px 0}
.log .me{color:#8cf}.log .bad{color:#f88}.log .good{color:#8f8}.log .sys{color:#ffd24a}
.log::-webkit-scrollbar{width:6px}.log::-webkit-scrollbar-thumb{background:#2a4a5a;border-radius:3px}
.inv{display:flex;flex-wrap:wrap;gap:8px}
.inv .it{font-size:17px;background:#142a1c;border:1px solid #2c5a2c;border-radius:8px;padding:5px 10px;display:inline-flex;align-items:center;gap:5px;cursor:default}
.inv .it .it-ic{font-size:15px}
.inv .it .it-tag{font-size:10px;padding:1px 5px;border-radius:6px;background:#0d1f14;border:1px solid #2c5a3c;color:#7fb890}
.inv .it.usable{cursor:pointer;border-color:#d8a13a;background:#2a2210}
.inv .it.usable:hover{background:#3a3016;box-shadow:0 0 8px #ffd24a55}
.inv .it.usable .it-tag{background:#3a2a0d;border-color:#d8a13a;color:#ffd24a}
.inv .it.quest{border-color:#4a7a9a;background:#12222c}
.inv .it.quest .it-tag{background:#0d1c26;border-color:#4a7a9a;color:#9fd8ff}
/* ===== 背包面板下方的一排操作按钮 ===== */
.inv-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #2a4a5a}
.inv-btns .btn{flex:1;min-width:120px;padding:10px 12px;font-size:15px}
/* ===== 事件日志弹窗 ===== */
.log-bg{z-index:70}
.modal-log{width:560px;max-width:94vw;text-align:left}
.modal-log h2{text-align:center}
.modal-log .log{height:min(52vh,380px);margin-bottom:14px;padding:10px 12px;background:#0d1620;border:1px solid #2a4a5a;border-radius:10px}
.modal-log .acts{justify-content:flex-end}
.btns-panel{display:flex;gap:10px;justify-content:center}
.btn{background:#234;border:1px solid #4a6a8a;color:#dfe7ef;border-radius:8px;padding:9px 18px;cursor:pointer;font-size:14px;transition:.2s}
.btn:hover{background:#34567a;border-color:#6cf}
.btn:disabled{opacity:.4;cursor:default}
.btn.warn{border-color:#a44;background:#4a2222}
.btn.warn:hover{background:#6a2a2a}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:50}
.modal-bg.show{display:flex}
.modal{background:#16242f;border:2px solid #4a6a8a;border-radius:14px;padding:24px;width:400px;text-align:center}
.modal h2{color:#ffd24a;margin-bottom:10px}
.modal p{font-size:16px;margin-bottom:14px;color:#bcd;line-height:1.6}
.modal .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* 对话系统 */
.dialogue-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:60;padding:20px}
.dialogue-bg.show{display:flex}
.dialogue-box{width:560px;max-width:94vw;background:linear-gradient(145deg,#101a24,#1a2630);border:2px solid #4a6a8a;border-radius:14px;padding:16px 18px;box-shadow:0 -4px 30px rgba(0,0,0,.5)}
.dlg-title{font-size:32px;color:#6a8a9a;letter-spacing:2px;margin-bottom:8px;text-align:center}
.dlg-stage{display:flex;justify-content:space-between;align-items:flex-end;height:70px;margin-bottom:6px}
.dlg-portrait{width:64px;height:64px;display:flex;align-items:center;justify-content:center;opacity:.25;transition:.3s}
.dlg-portrait.active{opacity:1}
.dlg-portrait .av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:bold;color:#fff;border:2px solid #6cf;box-shadow:0 0 14px #6cf88}
.dlg-name{font-size:25px;font-weight:bold;color:#ffd24a;margin-bottom:4px}
.dlg-text{font-size:22px;line-height:1.7;color:#dfe7ef;min-height:48px;margin-bottom:12px;white-space:pre-wrap}
.dlg-choices{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dlg-choices .btn{padding:7px 16px;font-size:18px;}