:root {
  --ink: #e9ddc3;
  --muted: #aa9a7c;
  --gold: #e4b75d;
  --gold-bright: #ffd98b;
  --wood: #251711;
  --wood-light: #493022;
  --panel: rgba(23, 19, 17, .93);
  --parchment: #d9c398;
  --red: #b44135;
  --green: #628d68;
  --blue: #5086b8;
  --line: rgba(228, 183, 93, .38);
  --shadow: 0 18px 55px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0d0b0a; color: var(--ink); }
body {
  min-height: 100vh;
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(114, 77, 44, .45), transparent 42%),
    repeating-linear-gradient(93deg, rgba(255,255,255,.016) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #17110e, #090909 60%, #14100d);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #ffe1a0; outline-offset: 3px; }
.hidden { display: none !important; }
.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .17; }
.ambient-one { width: 480px; height: 480px; background: #c06e33; top: -220px; left: -120px; }
.ambient-two { width: 400px; height: 400px; background: #316b63; right: -180px; bottom: -180px; }
.app-shell { width: min(1500px, 100%); margin: 0 auto; min-height: 100vh; padding: 18px; position: relative; z-index: 1; }

.cover-screen {
  position: fixed; inset: 0; min-height: 100vh; overflow: hidden;
  display: grid; align-items: center;
  background: #101a12 url("../assets/ui/game-cover.png") center / cover no-repeat;
  isolation: isolate;
}
.cover-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(5,9,8,.9) 0%, rgba(8,12,11,.7) 27%, rgba(7,11,10,.2) 52%, transparent 72%),
    linear-gradient(0deg, rgba(3,7,6,.5), transparent 45%, rgba(3,7,6,.18));
}
.cover-menu { width: min(470px, calc(100vw - 42px)); margin-left: clamp(24px, 7vw, 130px); padding: 28px 0; text-shadow: 0 3px 14px rgba(0,0,0,.9); }
.cover-kicker { color: #efd18a; letter-spacing: .42em; font-size: 13px; font-weight: 800; }
.cover-menu h1 { margin: 9px 0 8px; color: #fff0bd; font-size: clamp(48px, 7vw, 88px); line-height: 1; letter-spacing: .1em; text-shadow: 0 4px 0 #503617, 0 9px 28px #000; }
.cover-menu > p { margin: 0 0 25px; color: #eee3cc; font-size: 16px; letter-spacing: .08em; }
.cover-actions { width: min(360px, 100%); display: grid; gap: 12px; }
.cover-button {
  min-height: 68px; padding: 10px 24px; display: grid; align-content: center; gap: 2px; text-align: left;
  border: 1px solid rgba(244,210,132,.72); border-radius: 8px; cursor: pointer;
  color: #f6e8c8; background: linear-gradient(90deg, rgba(53,37,25,.96), rgba(25,23,20,.86));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 8px 26px rgba(0,0,0,.42); transition: .18s ease;
}
.cover-button span { color: #ffe4a0; font-size: 22px; font-weight: 900; letter-spacing: .16em; }
.cover-button small { color: #bfb49e; font-size: 12px; letter-spacing: .06em; }
.cover-button.cover-new { background: linear-gradient(90deg, rgba(126,86,36,.98), rgba(55,39,23,.9)); border-color: #ffe09a; }
.cover-button:hover:not(:disabled) { transform: translateX(8px); filter: brightness(1.16); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 32px rgba(0,0,0,.55), 0 0 24px rgba(239,190,92,.17); }
.cover-button.cover-quit { background: rgba(38,20,18,.82); border-color: rgba(190,110,90,.55); }
.cover-button.cover-quit span { color: #f0c2b0; }
.cover-button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.7); }

.topbar {
  min-height: 68px; display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #3a251b, #1c130f);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08); position: sticky; top: 8px; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 250px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #f1c875; transform: rotate(45deg); background: #201813; box-shadow: 0 0 18px rgba(228,183,93,.22); }
.brand-mark span { transform: rotate(-45deg); font-size: 21px; }
.brand h1 { margin: 0; color: var(--gold-bright); font-size: clamp(17px, 2vw, 23px); letter-spacing: .13em; }
.brand small { display: block; color: var(--muted); letter-spacing: .19em; margin-top: 2px; }
.top-resources { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.topbar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.topbar-actions .icon-btn { white-space: nowrap; }
.resource-chip { padding: 7px 11px; border: 1px solid rgba(228,183,93,.25); background: rgba(0,0,0,.25); border-radius: 999px; font-size: 13px; white-space: nowrap; }
.resource-chip strong { color: var(--gold-bright); }
.coin-icon { width: 20px; height: 20px; display: inline-block; object-fit: contain; vertical-align: -5px; margin-right: 3px; }
.resource-chip.hero-resource { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; }
.resource-avatar { width: 30px; height: 30px; display: block; object-fit: contain; }
.icon-btn { border: 1px solid var(--line); background: #231a15; border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.icon-btn:hover { border-color: var(--gold); background: #39271d; }

.screen { animation: screenIn .32s ease both; padding-top: 18px; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }
.hero-banner {
  min-height: 330px; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(330px, 1.2fr); align-items: center;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; position: relative;
  background:
    linear-gradient(90deg, rgba(15,12,10,.08), rgba(15,12,10,.9) 58%),
    radial-gradient(circle at 20% 35%, rgba(228,183,93,.24), transparent 30%),
    linear-gradient(145deg, #513525, #1c1714 55%, #101010);
  box-shadow: var(--shadow);
}
.hero-portrait { min-height: 330px; display: grid; place-items: center; position: relative; border: 0; background: none; padding: 0; font: inherit; width: 100%; cursor: pointer; }
.hero-portrait .crest { width: 190px; height: 230px; display: grid; place-items: center; font-size: 92px; border: 2px solid #a98244; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle, #715039, #241711 68%); box-shadow: inset 0 0 50px #000, 0 0 50px rgba(228,183,93,.16); }
.hero-portrait .crest.hero-image { width: min(300px, 88%); height: 300px; border: 0; border-radius: 0; background: transparent; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.hero-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hero-portrait::after { content: attr(data-label); position: absolute; bottom: 31px; padding: 7px 28px; background: #1c1310; border: 1px solid var(--gold); color: var(--gold-bright); letter-spacing: .25em; }
.hero-copy { padding: 38px 50px 38px 12px; position: relative; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-size: 12px; }
.hero-copy h2 { margin: 8px 0 8px; font-size: clamp(34px, 5vw, 64px); color: #f4e5c6; line-height: 1.05; text-shadow: 0 3px #000; }
.hero-copy p { color: #c3b294; max-width: 650px; line-height: 1.8; }
.menu-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* 主菜单：章节背景、进度、功能图块与统计 */
.menu-banner {
  min-height: 380px; isolation: isolate; background: #1c1714;
}
.menu-banner-art { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; }
.menu-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,10,9,.2) 0%, rgba(12,10,9,.5) 38%, rgba(12,10,9,.9) 68%),
    linear-gradient(0deg, rgba(10,8,7,.75), transparent 45%);
}
.menu-banner .hero-portrait::before { content: ""; position: absolute; left: 50%; bottom: 44px; width: 62%; height: 38px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,214,130,.38), transparent 70%); z-index: -1; }
.menu-banner .hero-copy { text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.menu-banner .hero-copy p { color: #d6c7a8; }
.menu-progress { max-width: 460px; margin-top: 16px; }
.menu-progress-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); letter-spacing: .12em; margin-bottom: 6px; }
.menu-progress-label strong { color: var(--gold-bright); letter-spacing: .04em; }
.menu-progress-track { height: 10px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid rgba(228,183,93,.35); overflow: hidden; }
.menu-progress-track span { display: block; height: 100%; min-width: 4px; background: linear-gradient(90deg, #a8762f, #ffd98b); box-shadow: 0 0 12px rgba(255,217,139,.55); }
.menu-main-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.menu-continue { min-height: 56px; padding: 12px 34px; font-size: 18px; letter-spacing: .08em; }
.menu-utility { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 2; }
.menu-utility .icon-btn { background: rgba(20,15,12,.78); backdrop-filter: blur(4px); }

.menu-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.menu-tile {
  position: relative; min-height: 118px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; text-align: left;
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden; cursor: pointer; isolation: isolate;
  background: #1c1512; box-shadow: 0 12px 28px rgba(0,0,0,.3); transition: .2s ease;
}
.menu-tile-art { position: absolute; inset: 0; z-index: -2; background: center 30% / cover no-repeat; opacity: .55; transition: transform .35s ease, opacity .2s; }
.menu-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,10,8,.95) 10%, rgba(14,10,8,.35) 75%); }
.menu-tile strong { color: var(--gold-bright); font-size: 21px; letter-spacing: .14em; text-shadow: 0 2px 8px #000; }
.menu-tile small { color: #cbbd9f; font-size: 13px; text-shadow: 0 1px 6px #000; }
.menu-tile:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 22px rgba(228,183,93,.18); }
.menu-tile:hover .menu-tile-art { transform: scale(1.06); opacity: .75; }

.menu-overview { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }
.chapter-emblems { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.chapter-emblem { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.chapter-emblem-art { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid #6b5436; background: #140f0c; }
.chapter-emblem-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.chapter-emblem-art i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 22px; }
.chapter-emblem strong { font-size: 13px; color: var(--ink); letter-spacing: .08em; }
.chapter-emblem small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.chapter-emblem.cleared .chapter-emblem-art { border-color: var(--gold); box-shadow: 0 0 14px rgba(228,183,93,.4); }
.chapter-emblem.cleared small { color: #9fd08f; }
.chapter-emblem.current .chapter-emblem-art { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(255,217,139,.25), 0 0 20px rgba(255,217,139,.5); }
.chapter-emblem.current strong { color: var(--gold-bright); }
.chapter-emblem.locked .chapter-emblem-art img { filter: grayscale(1) brightness(.3); }
.chapter-emblem.locked strong { color: var(--muted); }
.menu-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.menu-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(228,183,93,.2); border-radius: 10px; background: rgba(0,0,0,.22); }
.menu-stat-icon { grid-row: 1 / 3; font-size: 22px; }
.menu-stat strong { color: var(--gold-bright); font-size: 22px; line-height: 1.1; }
.menu-stat small { color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.menu-stat.alert { border-color: rgba(180,65,53,.7); background: rgba(120,40,34,.25); }
.menu-stat.alert strong { color: #ff9b86; }
.camp-service { position: relative; display: grid; gap: 4px; padding-right: 44px; }
.camp-service strong { color: var(--gold-bright); }
.camp-service small { color: var(--muted); line-height: 1.45; }
.camp-service-badge { position: absolute; top: 10px; right: 10px; min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(228,183,93,.55); background: rgba(0,0,0,.45); color: var(--gold-bright); font-size: 13px; font-weight: 900; }
.camp-service-hint { font-style: normal; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.camp-service.ready { border-color: #c99b4e; background: linear-gradient(145deg, #5e4128, #241913); box-shadow: 0 0 0 1px rgba(255,217,139,.12), 0 8px 20px rgba(0,0,0,.3); }
.camp-service.ready .camp-service-hint { color: #9fd08f; }
.camp-service.ready::after, .menu-tile-dot, .training-hotspot.ready .training-hotspot-plate::after { content: ""; position: absolute; top: -4px; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: #e0483a; border: 2px solid #2a1a12; box-shadow: 0 0 0 0 rgba(224,72,58,.6); animation: campPing 1.8s ease-out infinite; }
.camp-service[data-action="rescue-injured"] .camp-service-badge { border-color: #b44135; background: rgba(120,40,34,.6); color: #ffb4a6; }
.menu-tile .menu-tile-dot { top: 10px; left: auto; right: 10px; }

/* 队伍营地独立界面：场景图 + 四位教官热点 + 服务卡片 */
.training-scene { position: relative; width: 100%; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #15110f center / cover no-repeat; box-shadow: var(--shadow); }
.training-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10,8,7,.35), transparent 30%); }
.training-hotspot { position: absolute; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 45% 45% 30% 30%; }
.training-hotspot::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -4%; height: 16%; border-radius: 50%; border: 2px solid rgba(255,217,139,.0); transition: .2s ease; }
.training-hotspot.ready::before { border-color: rgba(255,217,139,.55); box-shadow: 0 0 18px rgba(255,217,139,.45), inset 0 0 12px rgba(255,217,139,.35); animation: trainingRing 2.4s ease-in-out infinite; }
.training-hotspot:hover:not(:disabled)::before, .training-hotspot:focus-visible::before { border-color: #ffe09a; box-shadow: 0 0 26px rgba(255,217,139,.75), inset 0 0 16px rgba(255,217,139,.5); }
.training-hotspot:hover:not(:disabled) { filter: drop-shadow(0 0 10px rgba(255,217,139,.55)); }
.training-hotspot:disabled { cursor: not-allowed; }
.training-hotspot-plate { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; white-space: nowrap; border: 1px solid rgba(228,183,93,.7); border-radius: 8px; background: rgba(20,14,10,.88); box-shadow: 0 6px 16px rgba(0,0,0,.5); transition: .2s ease; }
.training-hotspot-plate strong { color: var(--gold-bright); font-size: 14px; letter-spacing: .06em; }
.training-hotspot-plate .camp-service-badge { position: static; min-width: 22px; height: 22px; font-size: 12px; }
.training-hotspot.ready .training-hotspot-plate::after { top: -5px; left: -5px; }
.training-hotspot:disabled .training-hotspot-plate { opacity: .6; filter: grayscale(.6); }
.training-hotspot:hover:not(:disabled) .training-hotspot-plate { transform: translateX(-50%) translateY(-3px); border-color: #ffe09a; }
.training-hotspot-rescue .training-hotspot-plate { left: auto; right: 0; transform: none; }
.training-hotspot-rescue:hover:not(:disabled) .training-hotspot-plate { transform: translateY(-3px); }
.training-npc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.training-npc-card { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; padding: 14px 44px 14px 14px; }
.training-npc-avatar { width: 72px; height: 72px; border-radius: 50%; border: 2px solid #a98244; background-repeat: no-repeat; box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.training-npc-card.ready .training-npc-avatar { border-color: var(--gold-bright); box-shadow: 0 0 14px rgba(255,217,139,.45); }
.training-npc-copy { display: grid; gap: 4px; min-width: 0; }
.training-npc-name { color: var(--ink); font-size: 13px; letter-spacing: .1em; }
.training-npc-copy q { color: #cbbd9f; font-size: 12px; font-style: italic; line-height: 1.5; }
@keyframes trainingRing { 50% { box-shadow: 0 0 28px rgba(255,217,139,.7), inset 0 0 16px rgba(255,217,139,.5); } }
@keyframes campPing { 70% { box-shadow: 0 0 0 9px rgba(224,72,58,0); } 100% { box-shadow: 0 0 0 0 rgba(224,72,58,0); } }
@media (prefers-reduced-motion: reduce) { .camp-service.ready::after, .menu-tile-dot, .training-hotspot.ready .training-hotspot-plate::after, .training-hotspot.ready::before { animation: none; } }

/* 营地监狱：典狱长立绘站在训练馆门口，点她进入监狱 */
.camp-warden { border-radius: 40% 40% 12% 12%; }
.camp-warden img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.camp-warden::before { z-index: 0; bottom: -6%; height: 10%; }
.camp-warden .training-hotspot-plate { z-index: 2; }
.prison-warden-avatar { background-color: #2a2230; flex: 0 0 auto; }
.prison-warden-intro { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.25); }
.prison-warden-intro strong { display: block; color: var(--gold-bright); letter-spacing: .08em; }
.prison-warden-intro q { color: #cbbd9f; font-style: italic; line-height: 1.6; }
.prison-screen { position: relative; min-height: calc(100vh - 140px); padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #0d0c12 center / cover no-repeat; box-shadow: var(--shadow); isolation: isolate; }
.prison-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(8,7,12,.72), rgba(8,7,12,.35) 30%, rgba(8,7,12,.35) 70%, rgba(8,7,12,.8)); }
.prison-screen .prison-warden-intro { background: rgba(10,8,12,.72); backdrop-filter: blur(3px); }
.prison-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.prison-inmate { display: grid; gap: 4px; justify-items: center; padding: 8px; border: 1px solid #6e5433; border-radius: 10px; background: rgba(12,10,14,.78); text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.prison-inmate img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid #a98244; }
.prison-inmate.elite { border-color: #c99b4e; }
.prison-inmate strong { color: var(--gold-bright); font-size: 13px; line-height: 1.3; }
.prison-inmate small { color: var(--muted); font-size: 11px; }
.prison-empty { margin: 40px 0; padding: 18px; border-radius: 12px; background: rgba(10,8,12,.72); color: #cbbd9f; text-align: center; }

/* 城镇商店：未启用的店铺淡化显示，热点铭牌标注"敬请期待" */
.training-hotspot.locked, .training-npc-card.locked { filter: grayscale(.75); opacity: .68; }
.training-hotspot.locked { cursor: not-allowed; }
.training-hotspot-plate small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .06em; }

/* 装备品级配色：白/绿/蓝/紫 */
.quality-1 { color: #e7e2d8; }
.quality-2 { color: #7fd97f; }
.quality-3 { color: #79b8ff; }
.quality-4 { color: #d29bff; }


/* Boss战翻牌：三张固定战利品牌，点击翻面揭示 */
.boss-loot-hint { margin: 10px 0 6px; color: var(--muted); }
.boss-loot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; perspective: 1200px; }
.boss-loot-card { position: relative; min-height: 150px; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.3,1); }
.boss-loot-card.flipped { transform: rotateY(180deg); cursor: default; }
.boss-loot-face { position: absolute; inset: 0; display: grid; place-items: center; gap: 6px; padding: 16px; border-radius: 10px; backface-visibility: hidden; text-align: center; }
.boss-loot-front { border: 1px solid #87663d; background: linear-gradient(145deg, #4a3527, #201714); font-size: 40px; color: var(--gold-bright); }
.boss-loot-back { transform: rotateY(180deg); border: 1px solid #f1c65f; background: radial-gradient(circle at center, rgba(103,68,19,.68), rgba(22,15,12,.9)); }
.boss-loot-back strong { color: #ffe6a5; }
.boss-loot-back small { color: var(--muted); line-height: 1.5; }
/* 第三张战利品牌翻开后，在牌下展开本页《源血纪元》全文 */
.loot-note-reading { margin-top: 14px; padding: 14px 18px; border: 1px solid #87663d; border-radius: 10px; background: rgba(0,0,0,.28); }
.loot-note-reading[hidden] { display: none; }
.loot-note-reading h3 { margin: 4px 0 8px; color: var(--gold-bright); }
.loot-note-reading p { margin: 0 0 8px; }

/* 背包页 */
.backpack-section { margin-top: 18px; }
.backpack-section h3 { margin: 0 0 8px; color: var(--gold-bright); }
.backpack-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.2); }
.backpack-item strong { flex: 0 0 auto; }
.backpack-item small { flex: 1; color: var(--muted); }
.empty-hint { color: var(--muted); font-style: italic; }

/* 装备店重锻 */
.forge-section { margin-top: 16px; }
.forge-section h3 { margin: 0 0 6px; color: var(--gold-bright); }

/* 笔记残页 */
.note-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 860px; margin-top: 16px; }
.note-entry { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.2); }
.note-entry strong { display: block; color: var(--gold-bright); margin-bottom: 6px; }
.note-entry p { margin: 0 0 8px; color: var(--muted); line-height: 1.75; }
.note-entry p:last-child { margin-bottom: 0; }
.note-entry.locked { opacity: .5; text-align: center; }
.note-entry.locked strong { color: var(--muted); }
.primary-btn, .secondary-btn, .danger-btn, .choice-btn {
  min-height: 44px; border-radius: 8px; border: 1px solid #8f6a35; padding: 10px 22px; cursor: pointer; transition: .18s ease;
}
.primary-btn { background: linear-gradient(#d8ae60, #986b2e); color: #21160e; font-weight: 900; box-shadow: inset 0 1px #ffe1a0, 0 7px 20px rgba(0,0,0,.3); }
.secondary-btn { background: linear-gradient(#403028, #211713); color: var(--ink); }
.danger-btn { background: linear-gradient(#783c36, #3d1d1c); border-color: #a75c53; }
.primary-btn:hover, .secondary-btn:hover, .danger-btn:hover, .choice-btn:hover { transform: translateY(-2px); filter: brightness(1.13); }
.primary-btn:disabled, .secondary-btn:disabled, .choice-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; filter: none; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.dashboard-card, .panel {
  border: 1px solid var(--line); background: linear-gradient(145deg, rgba(55,39,30,.88), rgba(18,16,15,.94)); border-radius: 13px; box-shadow: 0 12px 28px rgba(0,0,0,.3);
}
.dashboard-card { padding: 19px; }
.dashboard-card h3 { margin: 0 0 9px; color: var(--gold-bright); font-size: 17px; }
.dashboard-card p { color: var(--muted); margin: 0; line-height: 1.6; font-size: 14px; }
.shop-card { grid-column: 1 / -1; }
.shop-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.shop-actions .choice-btn { text-align: left; }
.training-card-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.training-card-choice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.training-card-choice strong { letter-spacing: .08em; }
.training-card-choice em { margin-top: 2px; color: #ffe09a; font-size: 11px; font-style: normal; font-weight: 800; }
.training-card-choice.maxed { border-color: #d4b65d; background: linear-gradient(145deg, rgba(96,75,31,.7), rgba(27,22,18,.94)); }
.training-card-choice.maxed:disabled { opacity: .82; }
.training-card-choice.maxed em { color: #f2cf72; }
.training-xp-progress { width: min(118px, 90%); height: 7px; margin: 0 auto; }
.modal.training-modal { width: min(980px, 96vw); }
.training-modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.training-modal-heading h2 { margin-bottom: 0; }
.training-coin { min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(241,195,88,.58); border-radius: 999px; color: #ffe6a5; background: rgba(20,14,11,.65); box-shadow: inset 0 0 13px rgba(255,193,67,.1); }
.training-coin .coin-icon { width: 24px; height: 24px; }
.training-coin strong { font-size: 19px; }

.page-heading { display: flex; align-items: end; gap: 18px; margin: 8px 0 16px; }
.page-heading h2 { margin: 0; color: var(--gold-bright); font-size: 34px; }
.level-layout-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.level-layout-help { flex: 1 1 260px; color: #d8cdb4; font-size: 11px; }
.level-map-board { position: relative; min-height: min(68vw, 650px); border: 1px solid rgba(229,190,111,.55); border-radius: 18px; overflow: hidden; background: #101a28 url("../assets/maps/world-map.png") center / cover no-repeat; box-shadow: inset 0 0 100px rgba(0,0,0,.48), 0 12px 35px rgba(0,0,0,.4); }
.level-map-board.layout-editing { cursor: crosshair; border-color: #8de7ff; box-shadow: inset 0 0 100px rgba(0,0,0,.48), 0 0 0 2px rgba(96,218,255,.28), 0 12px 35px rgba(0,0,0,.4); }
.level-map-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, transparent 18%, rgba(4,8,15,.14) 65%, rgba(3,6,11,.6)); pointer-events: none; }
.level-node { position: absolute; left: var(--level-x); top: var(--level-y); transform: translate(-50%, -50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 104px; padding: 5px 4px 6px; border: 1px solid rgba(238,205,133,.72); border-radius: 9px; color: var(--ink); background: rgba(16,19,24,.78); box-shadow: 0 4px 13px rgba(0,0,0,.62); cursor: pointer; }
.level-map-board.layout-editing .level-node { cursor: grab; user-select: none; touch-action: none; }
.level-map-board.layout-editing .level-node.dragging { cursor: grabbing; z-index: 10; transform: translate(-50%, -50%) scale(1.08); border-color: #fff0ae; box-shadow: 0 0 0 4px rgba(255,224,138,.3), 0 10px 26px #000; }
.level-map-board.layout-editing .level-node.locked { opacity: .86; filter: grayscale(.35); }
.level-node:hover { transform: translate(-50%, -50%) scale(1.05); border-color: #ffe4a2; box-shadow: 0 0 0 4px rgba(255,215,125,.14), 0 7px 24px rgba(0,0,0,.7); }
.level-node.locked { filter: grayscale(.8); opacity: .64; cursor: not-allowed; }
.level-portrait { width: 48px; height: 48px; border-radius: 50%; padding: 2px; background: linear-gradient(145deg, #f4d88f, #6e4b20); box-shadow: 0 2px 8px #000; overflow: hidden; }
.level-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.level-node strong { color: var(--gold-bright); font-size: 12px; }
.level-node small { color: #d8cdb4; font-size: 9px; line-height: 1.2; }
.chapter-save-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 2px 7px; border: 1px solid rgba(124,220,176,.68); border-radius: 999px; color: #bdf4d8; background: rgba(10,55,43,.82); font-size: 10px; line-height: 1.35; box-shadow: 0 0 10px rgba(71,205,143,.18); }
.arena-world-node { width: 96px; background: rgba(38,25,12,.88); border-color: #ffd36e; }
.trial-world-node { width: 112px; background: rgba(15,40,48,.9); border-color: #88d8e8; }
.trial-world-node .level-portrait { width: 44px; height: 44px; background: linear-gradient(145deg,#d7eef3,#357285); }
.level-node-three { width: 100px; background: rgba(55,38,16,.9); border-color: #e5bd5d; }
.level-node-three .level-portrait { width: 46px; height: 46px; background: linear-gradient(145deg,#f4d58b,#7b431d); }
.level-node-four { width: 98px; background: rgba(16,34,59,.92); border-color: #70d9f0; }
.level-node-four .level-portrait { width: 46px; height: 46px; background: linear-gradient(145deg,#bcf8ff,#3979b5 55%,#55298d); box-shadow: inset 0 0 10px rgba(215,253,255,.62),0 0 11px rgba(78,197,255,.42); }
.level-node-five { width: 98px; background: rgba(37,42,51,.94); border-color: #c7d0dc; }
.level-node-five .level-portrait { width: 46px; height: 46px; background: linear-gradient(145deg,#eef2f7,#778596 55%,#313944); box-shadow: inset 0 0 10px rgba(255,255,255,.46),0 0 12px rgba(185,211,235,.42); }

.trial-lobby { min-height: 360px; margin-bottom: 18px; border: 1px solid #8c784c; border-radius: 18px; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(90deg,rgba(8,12,17,.9),rgba(9,14,20,.28)),url("../assets/trials/training-ground.png") center/cover no-repeat; box-shadow: inset 0 0 70px rgba(0,0,0,.45),0 12px 30px rgba(0,0,0,.35); }
.trial-lobby-copy { max-width: 620px; margin: 24px; padding: 22px; border: 1px solid rgba(226,203,147,.42); border-radius: 14px; background: rgba(8,12,18,.84); backdrop-filter: blur(7px); }
.trial-lobby-copy h2 { margin: 0 0 8px; color: var(--gold-bright); }
.trial-list { display: grid; gap: 12px; }
.trial-card { position: relative; min-height: 152px; display: grid; grid-template-columns: 118px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 12px 18px 12px 12px; border: 1px solid #675c46; border-radius: 15px; background: linear-gradient(90deg,rgba(32,39,48,.96),rgba(18,21,26,.9)); overflow: hidden; }
.trial-card.available { border-color: #b99b5c; box-shadow: inset 0 0 28px rgba(204,165,83,.08); }
.trial-card.cleared { border-color: #68b995; background: linear-gradient(90deg,rgba(19,53,47,.95),rgba(17,25,28,.9)); }
.trial-card.locked { filter: grayscale(.8); opacity: .64; }
.trial-card > img { width: 118px; height: 132px; object-fit: cover; object-position: center 20%; border-radius: 10px; box-shadow: 0 4px 16px #000; }
.trial-card h3 { margin: 2px 0 6px; color: #f4dfac; font-size: 21px; }
.trial-card p { margin: 0 0 9px; color: #d4cbbb; }
.trial-card small,.trial-status { color: #9fd8de; }
.trial-number { position: absolute; left: 5px; top: 5px; z-index: 2; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #21190d; font-weight: 900; background: #f2cf7e; box-shadow: 0 2px 8px #000; }
.trial-warning { color: #ffbd9c; }
.quest-item-chip { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 9px 12px; border: 1px solid #8bbbea; border-radius: 10px; background: rgba(20,47,72,.7); }
.quest-item-chip img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; }
.quest-item-chip span { display: grid; gap: 3px; }
.quest-item-drop,.trial-result { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; margin: 15px 0; padding: 13px; border: 1px solid #8daed5; border-radius: 13px; background: linear-gradient(90deg,rgba(18,44,72,.82),rgba(22,22,33,.84)); }
.quest-item-drop img,.trial-result img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; }
.quest-item-drop strong,.trial-result strong { display: block; color: #dcefff; font-size: 19px; }
.farm-npc-dialogue { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 18px; align-items: start; max-height: 58vh; margin: 16px 0; overflow: auto; padding: 14px; border: 1px solid rgba(231,194,111,.55); border-radius: 14px; background: linear-gradient(120deg,rgba(71,48,21,.83),rgba(23,20,16,.94)); }
.farm-npc-dialogue img { position: sticky; top: 0; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 2px solid #d5ad5a; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.farm-npc-dialogue p { margin: 0 0 12px; padding: 10px 12px; color: #f3e7c7; line-height: 1.75; border-left: 3px solid #d9ad55; border-radius: 0 8px 8px 0; background: rgba(13,12,10,.42); }
.farm-npc-summary { color: #dfc884; font-weight: 700; }
.arena-map-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; font-size: 29px; background: radial-gradient(circle, #80551e, #26170b); border: 2px solid #dcae50; box-shadow: 0 0 20px rgba(255,200,76,.5); }
.arena-lobby { min-height: 560px; border: 1px solid #896a39; border-radius: 18px; padding: 26px; display: grid; grid-template-columns: minmax(250px,.65fr) minmax(380px,1.35fr); gap: 24px; align-items: center; background: linear-gradient(90deg,rgba(12,14,19,.88),rgba(12,14,19,.45)),url("../assets/arena/arena-battlefield.png") center/cover; box-shadow: inset 0 0 75px rgba(0,0,0,.58),0 12px 34px rgba(0,0,0,.42); }
.arena-lobby-copy { padding: 26px; border-radius: 16px; background: rgba(10,10,14,.72); text-align: center; }
.arena-lobby-copy h2 { color: var(--gold-bright); }
.arena-trophy { font-size: 72px; filter: drop-shadow(0 0 18px rgba(255,199,69,.55)); }
.arena-roster { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 4px; padding: 10px; border-radius: 14px; background: rgba(4,7,11,.62); }
.arena-roster img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid rgba(236,199,113,.55); }
.arena-schedule-heading { margin: 22px 0 10px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.arena-schedule-heading h3 { margin: 2px 0 0; color: var(--gold-bright); font-size: 25px; }
.arena-schedule-legend { display: flex; flex-wrap: wrap; gap: 7px; }
.arena-schedule-legend span { padding: 4px 9px; border: 1px solid #63543c; border-radius: 99px; color: #c9bda6; background: #191716; font-size: 11px; }
.arena-schedule-legend .player { border-color: #e5bc5f; color: #ffe7a8; }
.arena-schedule-legend .winner { border-color: #62aa72; color: #9ee4a9; }
.arena-schedule-legend .loser { opacity: .55; }
.arena-bracket-scroll { position: relative; max-height: 680px; margin-bottom: 20px; overflow: auto; overscroll-behavior: contain; border: 1px solid #735b35; border-radius: 15px; background: radial-gradient(circle at 50% 45%, rgba(56,45,30,.52), rgba(8,9,12,.96) 72%), url("../assets/arena/arena-battlefield.png") center/cover fixed; box-shadow: inset 0 0 80px #000, 0 13px 32px rgba(0,0,0,.35); scrollbar-color: #8d6d39 #151312; scrollbar-width: thin; }
.arena-tournament-bracket { position: relative; min-width: 100%; }
.arena-bracket-connectors { position: absolute; inset: 0; width: 1404px; height: 100%; overflow: visible; pointer-events: none; }
.arena-bracket-line { fill: none; stroke: rgba(117,102,75,.46); stroke-width: 2; }
.arena-bracket-line.active { stroke: rgba(200,166,91,.72); }
.arena-bracket-column { position: absolute; top: 0; width: 190px; height: 100%; }
.arena-bracket-column > header { position: sticky; top: 0; z-index: 5; height: 58px; margin: 8px 0 0; padding: 8px 7px; display: grid; align-content: center; text-align: center; border: 1px solid #75603e; border-radius: 9px; background: rgba(23,19,17,.96); box-shadow: 0 5px 12px rgba(0,0,0,.45); }
.arena-bracket-column > header strong, .arena-bracket-column > header small { display: block; }
.arena-bracket-column > header strong { color: #f2cd78; }
.arena-bracket-column > header small { margin-top: 2px; color: #9f927c; font-size: 9px; }
.arena-bracket-column > header .coin-icon { width: 13px; height: 13px; }
.arena-match { position: absolute; left: 0; width: 190px; height: 57px; border: 1px solid #584a37; border-radius: 8px; background: rgba(22,20,20,.94); box-shadow: 0 4px 10px rgba(0,0,0,.45); overflow: hidden; }
.arena-match.complete { border-color: #74623f; }
.arena-match.player-match { border-color: #d4a94d; box-shadow: 0 0 0 2px rgba(221,174,76,.18), 0 0 17px rgba(235,185,71,.24); }
.arena-match.player-current { border-color: #ffe093; box-shadow: 0 0 0 3px rgba(255,211,104,.28), 0 0 26px rgba(255,201,67,.56); animation: arenaCurrentPulse 1.2s ease-in-out infinite alternate; }
@keyframes arenaCurrentPulse { to { filter: brightness(1.16); } }
.arena-match-number { position: absolute; right: 3px; top: 50%; z-index: 2; transform: translateY(-50%); color: rgba(206,184,138,.34); font-size: 9px; }
.arena-team { height: 28px; display: grid; grid-template-columns: 23px minmax(0,1fr) 15px; align-items: center; gap: 5px; padding: 2px 7px; color: #d4c8b1; font-size: 10px; }
.arena-team + .arena-team { border-top: 1px solid rgba(135,112,72,.24); }
.arena-team span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-team-avatar { width: 21px; height: 21px; display: grid; place-items: center; object-fit: cover; border: 1px solid #665943; border-radius: 50%; background: #25211d; }
.arena-team.player { color: #ffe4a1; background: linear-gradient(90deg, rgba(126,84,24,.5), transparent); font-weight: 800; }
.arena-team.player .arena-team-avatar { border-color: #f0c767; }
.arena-team.winner { color: #b9e8bd; background-color: rgba(50,115,62,.2); }
.arena-team.winner b { color: #80d78c; }
.arena-team.loser { opacity: .4; filter: grayscale(.75); text-decoration: line-through; }
.arena-team.empty { grid-template-columns: 23px minmax(0,1fr); color: #746d63; font-style: italic; }
.arena-bracket-champion { position: absolute; width: 132px; min-height: 76px; padding: 8px; display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 7px; border: 2px solid #f0c75d; border-radius: 12px; background: linear-gradient(145deg,#5d4017,#1c1712); box-shadow: 0 0 28px rgba(255,202,65,.45); }
.arena-bracket-champion > span { grid-column: 1/-1; color: #ffdf7f; text-align: center; font-size: 9px; letter-spacing: .18em; }
.arena-bracket-champion img { width: 42px; height: 42px; object-fit: cover; border: 2px solid #f2d17a; border-radius: 50%; }
.arena-bracket-champion strong { overflow: hidden; color: #fff0be; font-size: 11px; }
.arena-next,.arena-result { min-height: 290px; padding: 28px; border: 1px solid #856333; border-radius: 16px; display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; align-items: center; background: linear-gradient(90deg,rgba(8,10,15,.88),rgba(15,12,11,.64)),url("../assets/arena/arena-battlefield.png") center/cover; }
.arena-next > img { width: 170px; height: 170px; object-fit: cover; border-radius: 50%; border: 4px solid #c99d4c; box-shadow: 0 8px 25px #000; }
.arena-next h2 { color: var(--gold-bright); margin: 7px 0; }
.arena-opponent-copy { min-width: 0; }
.arena-opponent-quote { position: relative; margin: 14px 0 10px; padding: 11px 14px; color: #f2e3bc; line-height: 1.65; border: 1px solid rgba(226,190,107,.42); border-left: 3px solid #d8a94f; border-radius: 5px 12px 12px 5px; background: rgba(12,10,10,.68); box-shadow: inset 0 0 18px rgba(218,167,70,.06); }
.arena-opponent-quote::before { content: ""; position: absolute; left: -10px; top: 17px; width: 16px; height: 16px; border-left: 1px solid rgba(226,190,107,.42); border-bottom: 1px solid rgba(226,190,107,.42); background: #17120f; transform: rotate(45deg); }
.arena-result { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.arena-result > span { font-size: 68px; }
.arena-result h2 { color: var(--gold-bright); margin: 4px; }
.battlefield.arena-battlefield { background-image: linear-gradient(rgba(8,10,15,.13),rgba(8,10,15,.28)),url("../assets/arena/arena-battlefield.png"); background-size: cover; background-position: center; }
.battlefield.trial-training-battlefield { background-image: linear-gradient(rgba(10,13,17,.05),rgba(8,11,16,.22)),url("../assets/trials/training-ground.png"); background-size: cover; background-position: center; border-color: rgba(223,189,117,.6); }
.battlefield.trial-dream-battlefield { background-image: linear-gradient(rgba(17,7,36,.04),rgba(20,4,39,.18)),url("../assets/trials/queen-dream.png"); background-size: cover; background-position: center; border-color: rgba(184,114,234,.62); }
.trial-mentor-dialogue { position: absolute !important; z-index: 8 !important; left: 50%; top: calc(50% - 15px); transform: translate(-50%,-50%); width: min(600px,72%); min-height: 70px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 7px 14px 7px 7px; border: 1px solid rgba(244,213,139,.85); border-radius: 14px; color: #f7edda; background: linear-gradient(100deg,rgba(9,13,19,.96),rgba(35,27,38,.93)); box-shadow: 0 8px 30px rgba(0,0,0,.72),inset 0 0 20px rgba(219,181,92,.08); pointer-events: none; }
.trial-mentor-dialogue img { width: 64px; height: 64px; border-radius: 11px; object-fit: cover; object-position: center 18%; box-shadow: 0 0 0 2px #bb9854,0 3px 12px #000; }
.trial-mentor-dialogue div { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: baseline; }
.trial-mentor-dialogue small { color: #9bd7e2; }
.trial-mentor-dialogue strong { color: #f4d589; }
.trial-mentor-dialogue p { grid-column: 1/-1; margin: 4px 0 0; line-height: 1.45; text-shadow: 0 1px 3px #000; }

@media (max-width: 760px) {
  .trial-card { grid-template-columns: 82px 1fr; }
  .trial-card > img { width: 82px; height: 110px; }
  .trial-card > button { grid-column: 1/-1; }
  .trial-mentor-dialogue { width: 86%; grid-template-columns: 54px 1fr; font-size: 12px; }
  .trial-mentor-dialogue img { width: 54px; height: 54px; }
}
.page-heading p { margin: 0 0 5px; color: var(--muted); }
.page-heading .back { margin-left: auto; }
.panel { padding: 20px; }
.hero-sheet { display: grid; grid-template-columns: 260px 1fr; gap: 22px; }
.big-crest { min-height: 330px; display: grid; place-items: center; font-size: 115px; background: radial-gradient(circle, #61442e, #181310 68%); border: 1px solid var(--line); border-radius: 12px; }
.big-crest.hero-image { padding: 10px; overflow: hidden; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-box { background: rgba(0,0,0,.25); border: 1px solid rgba(228,183,93,.2); border-radius: 9px; padding: 14px; }
.stat-box small { display: block; color: var(--muted); }
.stat-box strong { font-size: 25px; color: #fff0c8; }
.progress { height: 9px; border-radius: 99px; background: #0e0c0b; border: 1px solid #4c3829; overflow: hidden; }
.progress > span { height: 100%; display: block; background: linear-gradient(90deg, #6f9b72, #cfbd68); }
.skill-panel { margin-top: 15px; padding: 16px; border: 1px solid rgba(80,134,184,.55); border-radius: 10px; background: linear-gradient(120deg, rgba(55,99,135,.2), rgba(0,0,0,.2)); }
.hero-skills-heading { margin: 26px 0 12px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.hero-skills-heading h2, .hero-skills-heading p { margin: 0; }
.hero-skills-heading h2 { white-space: nowrap; }
.hero-skills-heading p { color: var(--muted); }
.hero-skill-collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hero-skill-card { min-height: 190px; padding: 15px; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(102,139,177,.48); border-radius: 12px; background: linear-gradient(145deg, rgba(30,56,83,.76), rgba(14,13,15,.9)); box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.hero-skill-card.equipped { border-color: #e6bd5f; box-shadow: 0 0 0 2px rgba(230,189,95,.2), 0 0 22px rgba(230,189,95,.2); }
.hero-skill-card-title { display: flex; align-items: center; gap: 10px; }
.hero-skill-card-title > span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(236,203,121,.55); border-radius: 50%; background: rgba(0,0,0,.3); font-size: 24px; }
.hero-skill-card-title div { display: grid; }
.hero-skill-card-title small, .hero-skill-xp > span { color: var(--muted); font-size: 11px; }
.hero-skill-card p { min-height: 48px; margin: 0; color: #ddd0b5; }
.hero-skill-xp { display: grid; gap: 5px; margin-top: auto; }
.hero-skill-card .mini-btn { align-self: flex-end; }
.hero-skill-card .mini-btn:disabled { color: #f3cf7b; border-color: #ba8d3e; opacity: 1; cursor: default; }
.hero-weapon-card .hero-skill-card-title > span { overflow: hidden; }
.hero-weapon-card .hero-skill-card-title img { width: 100%; height: 100%; object-fit: cover; }
.hero-weapon-stats { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.hero-weapon-stats b { color: #f3cf7b; font-size: 18px; }
.hero-weapon-stats small { color: var(--muted); font-size: 11px; }
.backpack-section .hero-weapon-collection { margin-top: 8px; }
.arena-skill-reward, .arena-skill-inherit { padding: 10px 12px; border: 1px solid rgba(100,153,205,.42); border-radius: 8px; background: rgba(28,59,88,.32); }
.arena-skill-inherit { border-color: rgba(229,188,86,.55); background: rgba(110,75,20,.25); }

.deck-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.deck-column { min-height: 520px; }
.deck-column h3 { margin-top: 0; color: var(--gold-bright); display: flex; justify-content: space-between; }
.deck-list { display: grid; gap: 7px; max-height: 66vh; overflow: auto; padding-right: 5px; }
.deck-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 8px; padding: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(228,183,93,.18); border-radius: 7px; }
.deck-row[data-action="inspect-card"] { cursor: zoom-in; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.deck-row[data-action="inspect-card"]:hover, .deck-row[data-action="inspect-card"]:focus-visible { border-color: rgba(244,203,108,.72); background: rgba(75,50,28,.42); box-shadow: 0 0 16px rgba(224,172,71,.18); outline: none; transform: translateY(-1px); }
.deck-row[data-action="inspect-card"] .mini-btn { cursor: pointer; }
.deck-row .cost { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #315f91; font-weight: bold; }
.deck-row small { color: var(--muted); }
.deck-card-info { min-width: 0; display: grid; gap: 2px; }
.deck-card-info strong { display: flex; align-items: center; gap: 8px; min-width: 0; }
.deck-card-info strong > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-row.injured-card { border-color: rgba(220,83,77,.65); background: linear-gradient(90deg, rgba(111,26,29,.34), rgba(0,0,0,.28)); }
.injured-badge { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 999px; color: #ffd7d2; background: #8e2c32; font-size: 10px; vertical-align: middle; }
.deck-thumb, .deck-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 5px; border: 1px solid rgba(228,183,93,.45); }
.deck-thumb { object-fit: cover; object-position: center 24%; display: block; }
.deck-icon { display: grid; place-items: center; font-size: 20px; background: rgba(0,0,0,.25); }
.card-level-stars { color: #f6cb62; letter-spacing: 1px; text-shadow: 0 0 5px rgba(246,203,98,.45); }
.card-xp-label { display: block; color: var(--muted); font-size: 11px; }
.card-xp-progress { display: block; width: 92px; height: 5px; margin-top: 3px; border-radius: 99px; overflow: hidden; background: #0e0c0b; border: 1px solid #4c3829; }
.card-xp-progress > span { display: block; height: 100%; background: linear-gradient(90deg, #6f9b72, #cfbd68); }
.card-xp-inline { display: inline-block; margin-left: 8px; vertical-align: middle; }
.mini-btn { border: 1px solid #7b6036; background: #2e211a; border-radius: 5px; padding: 4px 9px; cursor: pointer; }
.mini-btn:hover { background: #5a3e29; }
.validation { color: #d88272; margin: 10px 0 0; }
.validation.ok { color: #8dc393; }

.map-shell { padding: 20px; }
.map-shell.chapter-two-map { background: linear-gradient(145deg, rgba(20,29,15,.96), rgba(9,15,8,.98)); box-shadow: inset 0 0 70px rgba(4,10,3,.55), var(--shadow); }
.run-status { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.map-track { display: grid; grid-template-columns: repeat(var(--map-stage-count, 9), minmax(100px, 1fr)); gap: 12px; position: relative; width: 100%; min-width: 0; padding: 32px 5px 20px; overflow-x: auto; }
.map-stage { min-width: 100px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.map-stage:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 58px; left: calc(50% + 41px); width: calc(100% - 70px); height: 3px; background: linear-gradient(90deg, #6e5532, #d0a75e, #6e5532); opacity: .82; box-shadow: 0 1px 4px rgba(0,0,0,.72); }
.stage-number { color: var(--muted); font-size: 11px; }
.node-btn { width: 82px; height: 82px; border-radius: 50%; border: 2px solid #755b3b; display: grid; place-items: center; background: radial-gradient(circle, #4c3728, #1a1411); color: var(--ink); cursor: default; box-shadow: 0 7px 22px #000; }
.node-btn span { font-size: 25px; display: block; }
.node-btn small { display: block; font-size: 10px; }
.node-btn .node-portrait-frame { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(238,208,128,.72); box-shadow: inset 0 0 12px #000, 0 3px 9px #000; }
.node-btn .node-portrait { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: center 24%; }
.node-btn.final-boss .node-portrait { object-position: 50% 8%; transform: scale(3); transform-origin: 50% 10%; }
.node-btn.available { cursor: pointer; border-color: #ffd781; box-shadow: 0 0 0 5px rgba(228,183,93,.12), 0 0 25px rgba(255,207,107,.45); animation: nodePulse 1.9s ease-in-out infinite; }
.node-btn.completed { filter: grayscale(1); opacity: .42; }
.node-btn.locked { opacity: .35; }
@keyframes nodePulse { 50% { transform: translateY(-4px); } }
.boss-map-board { position: relative; width: 100%; aspect-ratio: 5 / 3; min-height: 430px; overflow: hidden; border: 1px solid rgba(232,207,137,.46); border-radius: 13px; background: linear-gradient(rgba(14,23,8,.12), rgba(6,13,5,.28)), url("../assets/maps/goblin-expedition.png") center / cover no-repeat; box-shadow: inset 0 0 42px rgba(3,10,2,.55), 0 12px 30px rgba(0,0,0,.3); }
.boss-map-board.chapter-one-map { background: linear-gradient(rgba(7,20,22,.08), rgba(4,12,15,.2)), url("../assets/maps/forest-expedition.png") center / cover no-repeat; }
.boss-map-board.chapter-three-map { aspect-ratio: 1672 / 939; background: linear-gradient(rgba(62,37,4,.03), rgba(54,29,2,.09)), url("../assets/maps/farm-expedition-clean.png") center / cover no-repeat; border-color: rgba(247,202,87,.66); }
.chapter-three-map .boss-route-lines { filter: drop-shadow(0 2px 2px rgba(54,27,5,.96)) drop-shadow(0 0 4px rgba(255,183,48,.42)); }
.chapter-three-map .boss-route-line { stroke: rgba(255,187,56,.96); stroke-width: 3.4; }
.chapter-three-map .boss-route-line.npc-route-line { stroke: rgba(255,220,119,.92); stroke-width: 2.7; stroke-dasharray: 4 3; }
.chapter-three-map .boss-map-node { --map-node-size: clamp(46px, 4.8vw, 68px); border-color: #d99b38; background: linear-gradient(#775024,#302013); box-shadow: 0 0 0 3px rgba(255,203,91,.16), 0 5px 16px #000; }
.chapter-three-map .boss-map-node.final-boss { --map-node-size: clamp(90px, 9vw, 126px); }
.chapter-three-map .boss-map-node.final-boss { border-color: #f0bf4b; background: linear-gradient(#8c4926,#34170f); box-shadow: 0 0 0 4px rgba(255,204,82,.2), 0 7px 24px #000; }
.chapter-three-map .farm-npc-node { --map-node-size: clamp(52px, 5.3vw, 76px); border-color: #9edcff; background: linear-gradient(#3c7896,#17354c); box-shadow: 0 0 0 4px rgba(143,215,255,.22),0 5px 18px #000; }
.chapter-three-map .farm-npc-node small { color: #fff0c4; }
.chapter-three-map .boss-map-node.final-boss.locked,
.chapter-three-map .farm-npc-node.locked { opacity: 1; filter: grayscale(.58) brightness(.72); }
.boss-map-board.chapter-four-map { aspect-ratio: 1672 / 941; background: linear-gradient(rgba(18,11,43,.04), rgba(5,18,32,.14)), url("../assets/maps/dream-forest-expedition.png") center / cover no-repeat; border-color: rgba(113,211,246,.7); box-shadow: inset 0 0 48px rgba(4,9,31,.55),0 12px 31px rgba(0,0,0,.42); }
.chapter-four-map .boss-route-lines { filter: drop-shadow(0 2px 3px rgba(6,5,27,.96)) drop-shadow(0 0 5px rgba(91,221,255,.75)); }
.chapter-four-map .boss-route-line { stroke: rgba(138,235,255,.96); stroke-width: 3.2; }
.chapter-four-map .boss-route-line.branch { stroke: rgba(205,143,255,.86); stroke-width: 2.8; stroke-dasharray: 5 4; }
.chapter-four-map .boss-map-node { --map-node-size: clamp(46px, 4.8vw, 68px); border-color: #72dff4; background: linear-gradient(#316c9c,#25245b 58%,#1a163a); box-shadow: 0 0 0 3px rgba(103,229,255,.18),0 0 18px rgba(59,201,255,.46),0 5px 16px #000; }
.chapter-four-map .boss-map-node.final-boss { --map-node-size: clamp(90px, 9vw, 126px); border-color: #d5a7ff; background: linear-gradient(#527cca,#563785 60%,#27193f); box-shadow: 0 0 0 4px rgba(178,130,255,.24),0 0 28px rgba(96,220,255,.58),0 7px 24px #000; }
.chapter-four-map .boss-map-node.final-boss .node-portrait { object-position: center 24%; transform: none; }
.chapter-four-map .boss-map-node.edge-bottom small { top: auto; bottom: calc(100% + 3px); }
.chapter-four-map .boss-map-node.edge-right small { left: auto; right: -2px; transform: none; }
.chapter-four-map .boss-map-node.edge-left small { left: -2px; transform: none; }
.chapter-four-map .boss-map-node.locked { opacity: .84; filter: grayscale(.45) brightness(.7); }
.boss-map-board.chapter-five-map { aspect-ratio: 1536 / 1024; background: linear-gradient(rgba(16,22,24,.02),rgba(7,13,17,.14)),url("../assets/maps/ancient-city-expedition.png") center / cover no-repeat; border-color: rgba(190,204,214,.72); box-shadow: inset 0 0 50px rgba(6,12,16,.52),0 12px 31px rgba(0,0,0,.45); }
.chapter-five-map .boss-route-line { stroke: rgba(223,231,235,.94); stroke-width: 3.1; filter: drop-shadow(0 2px 3px #111) drop-shadow(0 0 5px rgba(171,210,226,.7)); }
.chapter-five-map .boss-map-node { --map-node-size: clamp(46px,4.8vw,68px); border-color: #c4d0d8; background: linear-gradient(#6f7d89,#38434e 60%,#1c232a); box-shadow: 0 0 0 3px rgba(190,216,231,.17),0 0 18px rgba(137,178,201,.42),0 5px 16px #000; }
.chapter-five-map .boss-map-node.final-boss { --map-node-size: clamp(88px,8.5vw,122px); border-color: #e3d2ee; background: linear-gradient(#80688e,#4a354f 62%,#231824); box-shadow: 0 0 0 4px rgba(218,174,235,.24),0 0 28px rgba(165,109,190,.55),0 7px 24px #000; }
.chapter-five-map .demon-garrison-node { border-color: #f0a6d4; box-shadow: 0 0 0 4px rgba(243,124,200,.3),0 0 34px rgba(209,73,157,.7),0 7px 24px #000; }
.boss-route-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.boss-route-line { fill: none; stroke: rgba(255,246,203,.88); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.boss-route-line.branch { stroke: rgba(207,229,188,.66); stroke-width: 3; stroke-dasharray: 7 5; }
.boss-map-node { --map-node-size: clamp(50px, 5.6vw, 82px); position: absolute; z-index: 2; left: var(--node-x); top: var(--node-y); width: var(--map-node-size); height: var(--map-node-size); min-width: 0; padding: 5px; transform: translate(-50%, -50%); display: block; }
.boss-map-node.final-boss { --map-node-size: clamp(72px, 7.5vw, 108px); border-width: 3px; }
.chapter-three-map .boss-map-node.final-boss .node-portrait { object-position: center; transform: none; }
.boss-map-node.weapon-boss { border-color: #f0c762; box-shadow: 0 0 0 2px rgba(245,198,85,.18), 0 0 18px rgba(248,181,55,.38); }
.boss-map-node .node-portrait-frame { width: 100%; height: 100%; border-width: 1px; }
.boss-map-node .stage-number { position: absolute; z-index: 4; left: -7px; top: -7px; min-width: 23px; height: 23px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; color: #24170d; background: linear-gradient(#ffe8a3, #c9943f); border: 1px solid #fff0b4; box-shadow: 0 2px 7px #000; font-size: 10px; font-weight: 900; }
.boss-map-node small { position: absolute; z-index: 4; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); width: max-content; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 6px; border-radius: 8px; color: #fff0c2; background: rgba(19,14,9,.82); border: 1px solid rgba(236,205,128,.4); text-shadow: 0 1px 2px #000; }
.chapter-three-map .boss-map-node.edge-bottom small { top: auto; bottom: calc(100% + 3px); }
.chapter-three-map .boss-map-node.edge-right small { left: auto; right: -2px; transform: none; }
.chapter-three-map .boss-map-node.edge-left small { left: -2px; transform: none; }
.boss-map-node.locked { opacity: .62; }
.boss-map-node.completed { opacity: .5; }
.boss-map-node.available { animation: bossNodePulse 1.9s ease-in-out infinite; }
@keyframes bossNodePulse { 50% { transform: translate(-50%, calc(-50% - 4px)) scale(1.05); } }
.map-note { color: var(--muted); text-align: center; line-height: 1.7; }
.encounter-panel { max-width: 760px; margin: 30px auto; text-align: center; padding: 30px; }
.encounter-icon { font-size: 65px; }
.encounter-panel h2 { color: var(--gold-bright); font-size: 32px; }
.encounter-panel p { color: #c8b99d; line-height: 1.8; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 20px; }
.choice-btn { background: linear-gradient(145deg, #4a3527, #201714); text-align: left; }
.choice-btn strong { display: block; color: var(--gold-bright); margin-bottom: 6px; }
.choice-btn small { color: var(--muted); line-height: 1.5; }
.shop-item-icon { display: block; font-size: 30px; line-height: 1; margin-bottom: 8px; }
.shop-card-preview, .reward-card-preview { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.shop-card-preview img { width: 76px; height: 96px; object-fit: cover; border-radius: 7px; border: 1px solid rgba(255,215,125,.55); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.shop-card-preview span, .reward-card-preview span { color: var(--gold-bright); font-size: 13px; font-weight: 800; }

/* Battle */
.battle-screen { padding-top: 10px; animation: none; }
.battle-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; }
.battle-board { border: 1px solid var(--line); border-radius: 15px; padding: 10px 12px; background: linear-gradient(rgba(25,18,15,.91), rgba(20,25,22,.94)); box-shadow: var(--shadow); min-width: 0; }
.combat-hero { display: grid; grid-template-columns: minmax(110px, 1fr) 76px minmax(110px, 1fr) 116px; align-items: center; gap: 11px; min-height: 82px; padding: 7px 11px; border: 1px solid rgba(228,183,93,.24); border-radius: 10px; background: rgba(0,0,0,.32); }
.combat-hero.enemy { position: relative; z-index: 12; border-color: rgba(180,65,53,.44); }
.enemy-portrait-wrap { position: relative; justify-self: center; width: 82px; height: 82px; display: grid; place-items: center; }
.combat-hero.player-hero { grid-template-columns: minmax(126px, 1fr) minmax(104px, .8fr) 76px 112px minmax(174px, 1.3fr) minmax(126px, 1fr); grid-template-areas: "skill identity portrait weapon bars end"; min-height: 94px; }
.player-hero .hero-skill { grid-area: skill; align-self: stretch; }
.player-hero .combat-identity { grid-area: identity; }
.player-hero .player-portrait-target { grid-area: portrait; justify-self: center; position: relative; cursor: pointer; }
.combat-hero.player-hero { position: relative; z-index: 13; }
.player-portrait-target .combat-portrait { transition: box-shadow .15s ease, transform .15s ease; }
.player-portrait-target:hover .combat-portrait, .player-portrait-target.emote-open .combat-portrait { box-shadow: 0 0 0 2px rgba(244,195,94,.7), 0 0 16px rgba(244,195,94,.45); transform: scale(1.04); }
.emote-menu { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); display: grid; grid-template-columns: repeat(2, minmax(78px, 1fr)); gap: 6px; padding: 8px; border: 2px solid rgba(244,195,94,.9); border-radius: 14px; background: linear-gradient(160deg, rgba(38,24,16,.98), rgba(15,17,25,.97)); box-shadow: 0 10px 28px rgba(0,0,0,.8); cursor: default; }
.emote-option { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 5px 10px; border: 1px solid rgba(211,164,81,.6); border-radius: 999px; color: #fff3d3; background: rgba(70,45,24,.92); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.emote-option:hover, .emote-option:focus-visible { border-color: #ffd778; background: rgba(120,78,34,.95); }
.emote-option.emote-threaten { border-color: rgba(214,87,53,.8); background: rgba(92,30,22,.92); }
.player-emote-bubble { position: absolute; z-index: 29; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: min(300px, 70vw); padding: 7px 12px; border: 2px solid #d3a451; border-radius: 12px; color: #2b1c10; background: #fff3d3; font-size: 13px; font-weight: 700; line-height: 1.45; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.6); pointer-events: none; }
.player-emote-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #d3a451; }
.player-portrait-target.emote-open .player-emote-bubble { display: none; }
.player-hero .hero-bars { grid-area: bars; }
.player-hero .player-weapon { grid-area: weapon; }
.player-hero .end-turn { grid-area: end; align-self: stretch; }
.combat-identity { min-width: 0; text-align: right; }
.combat-identity h3, .combat-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combat-portrait { justify-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #332118; border: 2px solid #a67a3c; font-size: 30px; }
.combat-portrait.has-image { width: 76px; height: 76px; border: 0; border-radius: 0; background: transparent; }
.combat-portrait.has-image img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0,0,0,.55)); }
.combat-portrait.has-image.enemy-portrait { width: 82px; height: 82px; overflow: hidden; border: 2px solid #b78a3e; border-radius: 22%; background: #081711; box-shadow: inset 0 0 0 2px rgba(55,120,77,.65), 0 5px 12px rgba(0,0,0,.58); }
.combat-portrait.has-image.enemy-portrait img { object-fit: cover; object-position: 50% 50%; filter: none; transform: scale(1.04); }
.combat-portrait.has-image.enemy-portrait.portrait-goblin_queen img { object-position: 50% 8%; transform: scale(2.8); transform-origin: 50% 10%; }
.combat-hero h3 { margin: 0; font-size: 16px; }
.combat-hero small { color: var(--muted); }
.hero-bars { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-start; }
.equipped-weapon { position: relative; min-width: 0; width: 108px; height: 70px; overflow: hidden; display: grid; grid-template-rows: 1fr auto auto; align-items: end; padding: 4px 5px; border: 1px solid #a98248; border-radius: 10px; color: #fff1c8; background: #18110e; box-shadow: inset 0 0 14px rgba(211,158,63,.22), 0 4px 11px rgba(0,0,0,.45); text-shadow: 0 1px 3px #000; cursor: pointer; }
.equipped-weapon img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.68) saturate(1.08); }
.equipped-weapon span, .equipped-weapon strong, .equipped-weapon small { position: relative; z-index: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.equipped-weapon span { font-size: 10px; font-weight: 900; }
.equipped-weapon strong { font-size: 10px; color: #ffe19a; }
.equipped-weapon.ready { border-color: #ffcf6b; box-shadow: 0 0 0 2px rgba(255,207,107,.18), 0 0 18px rgba(255,177,55,.5); }
.equipped-weapon.selected { transform: scale(1.06); border-color: #fff2a7; box-shadow: 0 0 0 3px rgba(255,224,125,.38), 0 0 24px rgba(255,185,54,.85); }
.equipped-weapon.spent { opacity: .58; cursor: not-allowed; }
.equipped-weapon.empty { place-items: center; grid-template-rows: auto auto; border-style: dashed; opacity: .55; cursor: default; }
.enemy-weapon-wrap { display: flex; justify-content: flex-start; }
.health-pill, .mana-pill, .boss-pill, .hand-pill { border-radius: 99px; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.health-pill { background: #6f2926; border: 1px solid #bd5b50; }
.mana-pill { background: #244c76; border: 1px solid #568ac0; }
.hand-pill { background: #3b2f4f; border: 1px solid #8c74b8; }
.boss-pill { background: #573b1d; border: 1px solid #bd8a43; color: #ffe0a3; }
.mana-crystals { display: flex; align-items: center; gap: 2px; min-height: 38px; padding: 2px 6px 2px 4px; border: 1px solid rgba(91,150,203,.5); border-radius: 9px; background: linear-gradient(90deg, rgba(13,34,55,.88), rgba(8,18,30,.78)); box-shadow: inset 0 0 12px rgba(30,107,177,.2); }
.mana-crystal { flex: 0 0 18px; width: 18px; height: 34px; overflow: hidden; background-image: url("../assets/ui/mana-crystals.png"); background-repeat: no-repeat; background-size: auto 100%; background-position: 19% center; filter: drop-shadow(0 0 5px rgba(34,186,255,.72)); transition: filter .2s, opacity .2s, transform .2s; }
.mana-crystal.spent { background-position: 82% center; filter: grayscale(.18) brightness(.9) contrast(1.08); opacity: .96; transform: scale(.94); }
.mana-count { min-width: 27px; margin-left: 2px; color: #bce8ff; font-size: 10px; text-align: center; text-shadow: 0 0 5px rgba(62,179,255,.65); }
.boss-skills { grid-column: 1 / -1; border-top: 1px solid rgba(180,65,53,.28); padding-top: 7px; }
.boss-skills-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: #ffd69a; font-size: 11px; letter-spacing: .08em; }
.boss-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.boss-skill { min-width: 0; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(202,111,73,.35); border-radius: 7px; background: linear-gradient(110deg, rgba(83,33,25,.5), rgba(24,18,17,.62)); }
.boss-skill-icon { font-size: 20px; text-align: center; }
.boss-skill strong, .boss-skill small { display: block; }
.boss-skill strong { color: #ffd8a0; font-size: 11px; }
.boss-skill small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.boss-skill-timer { padding: 3px 6px; border-radius: 999px; color: #ffe4a8; background: #5a301d; border: 1px solid #9e6536; font-size: 9px; white-space: nowrap; }
.enemy-hero-target.targetable { cursor: crosshair; box-shadow: 0 0 0 3px #dfbc69, 0 0 25px rgba(255,213,112,.5); }
.player-hero.targetable { cursor: crosshair; box-shadow: 0 0 0 3px #8ed7a1, 0 0 25px rgba(110,211,137,.42); }
.battlefield { position: relative; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) 30px minmax(0, 1fr); align-content: center; gap: 10px; width: 100%; max-width: 100%; height: 610px; min-height: 610px; max-height: 610px; box-sizing: border-box; margin: 8px 0; padding: 18px 9%; border: 1px solid rgba(180,218,151,.38); border-radius: 13px; background: linear-gradient(rgba(5,14,8,.03), rgba(4,12,7,.15)), url("../assets/battle/forest-battlefield.png") center / cover no-repeat; box-shadow: inset 0 0 48px rgba(0,0,0,.34), 0 7px 17px rgba(0,0,0,.35); }
.battlefield.goblin-stronghold { background: linear-gradient(rgba(20,20,4,.03), rgba(31,18,4,.18)), url("../assets/battle/goblin-stronghold.png") center / cover no-repeat; border-color: rgba(219,178,83,.5); }
.battlefield.harvest-farm { background: linear-gradient(rgba(73,43,3,.02), rgba(72,38,2,.13)), url("../assets/battle/harvest-farm.png") center / cover no-repeat; border-color: rgba(239,194,73,.66); }
.battlefield.dream-slime-forest { background: linear-gradient(rgba(14,11,48,.02), rgba(4,21,39,.16)), url("../assets/battle/dream-slime-forest.png") center / cover no-repeat; border-color: rgba(100,215,244,.68); box-shadow: inset 0 0 54px rgba(5,8,36,.45),0 7px 20px rgba(21,6,52,.48); }
.battlefield.ancient-city-ruins { background: linear-gradient(rgba(13,18,22,.03),rgba(8,12,16,.18)),url("../assets/battle/ancient-city-ruins.png") center / cover no-repeat; border-color: rgba(193,207,217,.7); box-shadow: inset 0 0 56px rgba(5,9,12,.5),0 7px 20px rgba(4,8,11,.55); }
.battlefield::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 47%, rgba(3,9,6,.34) 100%); }
.battlefield > * { position: relative; z-index: 1; }
.battle-announcements { position: absolute !important; z-index: 8 !important; left: 50%; top: 50%; width: min(78%, 620px); max-height: 72%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: stretch; gap: 7px; pointer-events: none; }
.battle-announcement { padding: 9px 14px; border: 1px solid rgba(239,211,141,.8); border-radius: 9px; color: #fff4d0; background: rgba(20,14,10,.9); box-shadow: 0 4px 18px rgba(0,0,0,.7), 0 0 18px rgba(226,182,77,.24); text-align: center; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; animation: battleNoticeIn .2s ease-out both; }
.battle-announcement.notice-enemy { border-color: rgba(211,117,91,.9); background: rgba(46,17,14,.92); box-shadow: 0 4px 18px rgba(0,0,0,.7), 0 0 18px rgba(194,72,49,.32); }
.battle-announcement.notice-boss { border-color: rgba(255,203,91,.98); background: rgba(54,27,8,.94); box-shadow: 0 4px 20px rgba(0,0,0,.75), 0 0 22px rgba(255,177,47,.48); }
.boss-dialogue-frame { position: absolute !important; z-index: 20 !important; left: 50%; top: calc(100% + 7px); transform: translate(-50%,0); width: min(520px,70vw); min-height: 78px; display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 11px; align-items: center; padding: 7px 13px 7px 7px; border: 2px solid rgba(244,195,94,.95); border-radius: 14px; color: #fff3d3; background: linear-gradient(105deg,rgba(35,14,14,.98),rgba(15,17,25,.97)); box-shadow: 0 10px 30px rgba(0,0,0,.84),0 0 24px rgba(214,87,53,.34),inset 0 0 20px rgba(241,185,79,.08); pointer-events: none; }
.boss-dialogue-frame img { width: 76px; height: 76px; object-fit: cover; object-position: center 22%; border: 2px solid #d3a451; border-radius: 12px; box-shadow: 0 4px 15px #000; }
.boss-dialogue-frame div { min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.boss-dialogue-frame small { color: #d9a8a1; font-size: 10px; }
.boss-dialogue-frame strong { color: #ffd778; font-size: 15px; }
.boss-dialogue-frame p { grid-column: 1/-1; margin: 5px 0 0; font-size: 13px; line-height: 1.55; text-shadow: 0 1px 3px #000; }
@keyframes battleNoticeIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bossDialogueIn { from { opacity: 0; transform: translate(-50%,-8px) scale(.97); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
.battlefield .rows { position: static; width: 100%; min-width: 0; min-height: 0; max-width: none; overflow: hidden; box-sizing: border-box; margin: 0; padding: 9px 11px; display: grid; grid-template-rows: 16px minmax(0, 1fr) 16px minmax(0, 1fr); gap: 6px; border-radius: 12px; backdrop-filter: blur(1px); }
.battlefield .enemy-lines { background: linear-gradient(180deg, rgba(70,24,20,.24), rgba(9,20,12,.12)); box-shadow: inset 0 0 24px rgba(82,28,21,.18); }
.battlefield .player-lines { background: linear-gradient(0deg, rgba(20,48,53,.24), rgba(9,20,12,.12)); box-shadow: inset 0 0 24px rgba(21,67,71,.18); }
.battlefield .row-label { position: static; padding: 2px 7px; border-radius: 5px; color: #f7edcf; background: rgba(7,18,11,.64); text-shadow: 0 1px 3px #000; }
.battlefield .battle-row { min-width: 0; min-height: 0; height: 100%; gap: 9px; }
.battlefield .slot { min-height: 0; height: 100%; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(238,221,163,.5); border-radius: 10px; background: rgba(10,24,14,.25); box-shadow: inset 0 0 16px rgba(0,0,0,.22), 0 1px 0 rgba(255,244,196,.12); }
.battlefield .enemy-lines .slot { border-color: rgba(224,143,119,.47); background: rgba(47,18,16,.22); }
.battlefield .player-lines .slot { border-color: rgba(145,205,186,.5); background: rgba(10,35,30,.22); }
.battlefield .slot.deployable { border: 2px solid rgba(126,232,148,.92); border-radius: 8px; background: rgba(73,137,84,.2); box-shadow: inset 0 0 22px rgba(83,172,101,.35), 0 0 10px rgba(90,210,116,.38); }
.battlefield .slot.targetable { border: 2px solid #ffe28c; border-radius: 8px; background: rgba(168,119,28,.2); box-shadow: inset 0 0 24px rgba(255,215,105,.32), 0 0 0 3px rgba(255,218,111,.22), 0 0 30px rgba(255,196,67,.72); animation: targetSlotPulse 1.05s ease-in-out infinite alternate; }
.battlefield .slot.targetable .unit { transform: scale(1.035); border-color: #fff2af; box-shadow: 0 0 0 3px rgba(255,222,120,.78), 0 0 24px rgba(255,185,49,.92), 0 0 42px rgba(255,216,102,.62); }
.battlefield .lane-open { inset: 4px; border: 0; }
.rows { display: grid; gap: 6px; margin: 8px 0; }
.row-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.battle-row { display: grid; grid-template-columns: repeat(4, minmax(95px, 1fr)); gap: 7px; }
.slot { min-height: 103px; border: 1px dashed rgba(247,232,177,.48); border-radius: 9px; background: rgba(5,16,9,.16); position: relative; display: grid; place-items: center; transition: .18s; box-shadow: inset 0 0 14px rgba(0,0,0,.18); }
.slot::before { content: attr(data-lane); position: absolute; top: 4px; left: 6px; color: rgba(255,255,255,.25); font-size: 9px; }
.slot.deployable { cursor: pointer; border-style: solid; border-color: #7ac78c; background: rgba(73,137,84,.16); box-shadow: inset 0 0 18px rgba(83,172,101,.2); }
.slot.targetable { cursor: crosshair; border-style: solid; border-color: #ffe08a; box-shadow: 0 0 0 3px rgba(255,218,111,.2), 0 0 26px rgba(255,196,67,.65); animation: targetSlotPulse 1.05s ease-in-out infinite alternate; }
.slot.targetable .unit { transform: scale(1.035); border-color: #fff2af; box-shadow: 0 0 0 3px rgba(255,222,120,.78), 0 0 24px rgba(255,185,49,.92), 0 0 42px rgba(255,216,102,.62); }
@keyframes targetSlotPulse { from { filter: brightness(1); } to { filter: brightness(1.18); } }
.slot.invalid-target { opacity: .46; filter: grayscale(.5); }
.lane-open { position: absolute; inset: 4px; border: 1px solid rgba(102,192,168,.44); border-radius: 7px; pointer-events: none; }
.lane-open::after { content: attr(data-label); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-8deg); color: #8fd9c0; border: 1px solid #6da995; padding: 2px 5px; font-size: 9px; white-space: nowrap; background: rgba(9,35,29,.72); }
.battlefield .divider { position: static; width: 100%; min-width: 0; max-width: none; height: 30px; margin: 0; padding: 0 10px; border: 1px solid rgba(224,202,134,.42); border-radius: 999px; color: #fff0be; background: rgba(8,21,13,.72); text-shadow: 0 1px 3px #000, 0 0 5px #14200d; box-shadow: 0 3px 12px rgba(0,0,0,.28); }
.divider { height: 21px; display: flex; align-items: center; gap: 10px; color: #9a8667; font-size: 10px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #806945, transparent); }
.unit { width: calc(100% - 7px); height: calc(100% - 6px); min-height: 0; max-height: calc(100% - 6px); overflow: hidden; box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) 15px 17px; border-radius: 8px; border: 1px solid #83643a; background: linear-gradient(145deg, #5a402d, #211815 70%); padding: 6px 7px; position: relative; cursor: pointer; box-shadow: 0 5px 10px rgba(0,0,0,.35); user-select: none; }
.unit.enemy-unit { background: linear-gradient(145deg, #573126, #201313 72%); border-color: #7d4d3d; }
.unit.ready { box-shadow: 0 0 0 2px rgba(110,181,115,.75), 0 5px 12px #000; }
.unit.ready:not(.enemy-unit) { border-color: #a9e9a0; box-shadow: 0 0 0 3px rgba(136,231,139,.92), 0 0 25px rgba(79,222,112,.9), 0 0 48px rgba(128,241,131,.66); animation: readyUnitPulse 1.1s ease-in-out infinite alternate; }
@keyframes readyUnitPulse { from { filter: brightness(1); } to { filter: brightness(1.16); } }
.unit.selected { transform: translateY(-4px); border-color: #fff1ad; box-shadow: 0 0 22px rgba(255,226,142,.5); }
.unit-name { font-size: 12px; color: #f5e7c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.unit-icon { min-height: 0; overflow: hidden; display: grid; place-items: center; text-align: center; font-size: 26px; line-height: normal; }
.unit-icon.has-image { width: calc(100% + 6px); height: 100%; min-height: 34px; max-height: 48px; margin: 2px -3px 1px; overflow: hidden; border-radius: 5px; border: 1px solid rgba(228,183,93,.45); background: #17202a; line-height: 0; }
.unit-icon.has-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 27%; }
.unit-keyword { font-size: 9px; color: #d4b977; text-align: center; height: 15px; }
.unit-stats { display: flex; justify-content: space-between; font-weight: 900; font-size: 14px; }
.unit:has(.unit-icon.has-image) { padding: 0; display: block; }
.unit:has(.unit-icon.has-image) .unit-icon.has-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: #17202a;
}
.unit:has(.unit-icon.has-image) .unit-icon.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,7,13,.72) 0%, rgba(4,7,13,.08) 31%, rgba(4,7,13,.02) 53%, rgba(4,7,13,.78) 100%);
}
.unit:has(.unit-icon.has-image) .unit-icon.has-image img {
  object-position: center 36%;
  filter: saturate(1.08) contrast(1.05) brightness(.9);
}
.unit.enemy-unit:has(.unit-icon.has-image) .unit-icon.has-image::after {
  background: linear-gradient(180deg, rgba(32,6,5,.7) 0%, rgba(32,6,5,.08) 32%, rgba(32,6,5,.04) 53%, rgba(32,6,5,.82) 100%);
}
.unit:has(.unit-icon.has-image) > :not(.unit-icon) { position: relative; z-index: 2; }
.unit:has(.unit-icon.has-image) .unit-name {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 7px;
  padding: 2px 4px;
  text-align: center;
  border: 1px solid rgba(245,211,132,.58);
  border-radius: 5px;
  color: #fff2d0;
  background: rgba(14,13,16,.7);
  text-shadow: 0 2px 3px #000;
}
.unit:has(.unit-icon.has-image) .unit-keyword {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 24px;
  width: auto;
  height: auto;
  padding: 2px 4px;
  border: 1px solid rgba(239,205,123,.48);
  border-radius: 999px;
  color: #fff0c4;
  background: rgba(16,14,17,.68);
  text-shadow: 0 1px 2px #000;
}
.unit:has(.unit-icon.has-image) .unit-stats {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  padding: 2px 5px;
  border: 1px solid rgba(242,205,121,.6);
  border-radius: 5px;
  background: rgba(11,10,13,.78);
  text-shadow: 0 1px 2px #000;
}
.unit:has(.unit-icon.has-image) .unit-icon.has-image::after {
  background: linear-gradient(180deg, rgba(4,7,13,.46) 0%, rgba(4,7,13,.02) 28%, rgba(4,7,13,.01) 68%, rgba(4,7,13,.58) 100%);
}
.unit.enemy-unit:has(.unit-icon.has-image) .unit-icon.has-image::after {
  background: linear-gradient(180deg, rgba(32,6,5,.48) 0%, rgba(32,6,5,.02) 28%, rgba(32,6,5,.02) 68%, rgba(32,6,5,.62) 100%);
}
.unit:has(.unit-icon.has-image) .unit-name {
  left: 6px;
  right: auto;
  top: 6px;
  max-width: 58%;
  margin: 0;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(13,12,15,.78);
}
.unit:has(.unit-icon.has-image) .combat-tag {
  left: auto;
  right: 6px;
  top: 6px;
  max-width: 36%;
  padding: 3px 5px;
  border-radius: 5px;
  white-space: nowrap;
  background: rgba(13,12,15,.78);
  text-shadow: 0 1px 2px #000;
}
.unit:has(.unit-icon.has-image) .level-tag {
  top: 31px;
  right: 50%;
  transform: translateX(50%);
  padding: 1px 4px;
  border-radius: 999px;
  color: rgba(255,240,188,.82);
  background: rgba(11,10,13,.52);
}
.unit:has(.unit-icon.has-image) .unit-keyword {
  left: 50%;
  right: auto;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 1px 5px;
  border: 0;
  color: rgba(255,240,196,.9);
  background: rgba(12,11,14,.48);
}
.unit:has(.unit-icon.has-image) .unit-stats {
  position: static;
  padding: 0;
  border: 0;
  background: transparent;
  text-shadow: none;
}
.unit:has(.unit-icon.has-image) .unit-stats .attack-stat,
.unit:has(.unit-icon.has-image) .unit-stats .health-stat {
  position: absolute;
  bottom: 6px;
  z-index: 3;
  padding: 3px 6px;
  border: 1px solid rgba(242,205,121,.7);
  border-radius: 5px;
  background: rgba(11,10,13,.82);
  text-shadow: 0 1px 2px #000;
}
.unit:has(.unit-icon.has-image) .unit-stats .attack-stat { left: 6px; }
.unit:has(.unit-icon.has-image) .unit-stats .health-stat { right: 6px; }
.unit:has(.unit-icon.has-image) .level-tag { display: none !important; }
.unit:has(.unit-icon.has-image) .combat-tag {
  left: auto !important;
  right: 6px !important;
  top: 6px !important;
  transform: none !important;
}
/* Keep board combat labels in the top-right and hide non-essential levels. */
.unit .level-tag { display: none !important; }
.unit .combat-tag {
  position: absolute !important;
  left: auto !important;
  right: 6px !important;
  top: 6px !important;
  transform: none !important;
  z-index: 4;
}
.attack-stat { color: #ffd36d; }
.health-stat { color: #ff8d85; }
.level-tag { position: absolute; top: 5px; right: 5px; color: #9ec8e8; font-size: 9px; }
.combat-tag { position: absolute; left: 5px; top: 25px; padding: 1px 4px; border-radius: 999px; font-size: 8px; letter-spacing: .08em; }
.combat-tag.melee { color: #ffd49a; background: rgba(129,68,34,.82); border: 1px solid rgba(232,161,89,.5); }
.combat-tag.ranged { color: #bce7ff; background: rgba(32,82,112,.86); border: 1px solid rgba(100,180,222,.58); }
.combat-tag.support { color: #d9ffb8; background: rgba(45,100,50,.86); border: 1px solid rgba(137,211,113,.6); }
.buffed { color: #8edd99 !important; }
.player-controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; align-items: stretch; }
.hero-skill { display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid #5885ac; border-radius: 9px; background: linear-gradient(130deg, #244b70, #1b2835); padding: 7px 11px; cursor: pointer; text-align: center; color: #f2ead5; }
.hero-skill small { color: #b7cee0; line-height: 1.35; }
.hero-skill:disabled { opacity: .42; cursor: not-allowed; }
.hero-skill.selected { box-shadow: 0 0 20px rgba(83,157,217,.55); }
.end-turn { min-width: 126px; background: linear-gradient(#cda552, #7e5424); border: 1px solid #edce83; border-radius: 9px; color: #1b120d; font-weight: 900; cursor: pointer; }
.end-turn:disabled { opacity: .4; cursor: wait; }
.hand-wrap { margin-top: 8px; }
.hand-title { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.hand { display: flex; gap: 7px; overflow-x: auto; min-height: 142px; padding: 6px 4px 7px; align-items: end; }
.game-card { flex: 0 0 111px; height: 134px; border: 2px solid #8d6c3e; border-radius: 9px; padding: 8px 6px; position: relative; background: linear-gradient(160deg, #d0ba8e 0 12%, #5a402c 13%, #241a16 76%); box-shadow: 0 6px 12px #000; cursor: pointer; transition: .18s; user-select: none; }
.game-card.spell {
  isolation: isolate;
  overflow: hidden;
  border-color: #f0c75d;
  background:
    radial-gradient(circle at 50% 38%, rgba(42, 128, 235, .72), transparent 48%),
    linear-gradient(160deg, #fff2c5 0 13%, #163d7b 14% 72%, #ead39a 73% 100%);
  box-shadow: inset 0 0 0 1px #fff3b8, inset 0 0 16px rgba(19, 76, 154, .75), 0 6px 12px #000, 0 0 11px rgba(66, 153, 255, .28);
}
.game-card.spell::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 239, 170, .82);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(25, 76, 151, .72);
}
.game-card.spell > * { position: relative; z-index: 1; }
.game-card.spell .card-cost {
  position: absolute;
  left: -5px;
  top: -6px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  clip-path: polygon(50% 0, 92% 22%, 100% 70%, 50% 100%, 0 70%, 8% 22%);
  color: #fff;
  background: radial-gradient(circle at 38% 30%, #64e7ff 0 10%, #1578ed 32%, #06398e 70%, #031d51 100%);
  border: 0;
  box-shadow: inset 0 0 0 2px #f7d56e, 0 2px 6px #000;
  text-shadow: 0 2px 2px #001033;
}
.game-card.spell .card-level { position: absolute; color: #fff1b1; text-shadow: 0 1px 2px #061a3d; }
.game-card.spell .card-name {
  margin: 11px -1px 2px;
  padding: 2px 13px 2px;
  color: #3a260e;
  border: 1px solid #d5a943;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #fff5d4, #d8b86f);
  box-shadow: 0 1px 0 #fff7c9 inset, 0 2px 4px rgba(0, 0, 0, .45);
  text-shadow: 0 1px rgba(255,255,255,.55);
}
.game-card.spell .card-art.has-image {
  height: 48px;
  margin: 1px 0 2px;
  border: 2px solid #e8bd54;
  border-radius: 18px 18px 6px 6px;
  background: #09255d;
  box-shadow: inset 0 0 8px #071635, 0 0 7px rgba(68, 155, 255, .48);
}
.game-card.spell .card-art.has-image img { object-position: center 42%; filter: saturate(1.08) contrast(1.04); }
.game-card.spell .card-copy {
  height: 32px;
  padding: 3px 4px 2px;
  color: #3f2d17;
  border: 1px solid rgba(201, 155, 56, .88);
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(180deg, rgba(255,247,218,.98), rgba(221,197,143,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.game-card:not(.spell) {
  overflow: hidden;
  padding: 0;
  border-color: #b98b4b;
  background: #1b120f;
}
.game-card:not(.spell) .card-art.has-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: #17202a;
}
.game-card:not(.spell) .card-art.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,13,.68) 0%, rgba(5,7,13,.06) 29%, rgba(5,7,13,.02) 50%, rgba(5,7,13,.74) 100%);
}
.game-card:not(.spell) .card-art.has-image img {
  object-position: center 36%;
  filter: saturate(1.08) contrast(1.04) brightness(.92);
}
.game-card:not(.spell) > :not(.card-art) { position: relative; z-index: 2; }
.game-card:not(.spell) .card-cost {
  left: -5px;
  top: -6px;
  width: 30px;
  height: 30px;
  border-color: #f2cf78;
  background: radial-gradient(circle at 36% 28%, #6bbcf0 0 12%, #2a6ca5 42%, #102d52 100%);
  box-shadow: 0 2px 6px #000, inset 0 0 0 1px rgba(255,255,255,.35);
  text-shadow: 0 2px 2px #07101d;
}
.game-card:not(.spell) .card-level {
  top: 5px;
  right: 6px;
  padding: 1px 4px;
  border-radius: 999px;
  color: #fff0bc;
  background: rgba(10,13,20,.64);
  text-shadow: 0 1px 2px #000;
}
.game-card:not(.spell) .card-name {
  margin: 10px 14px 0;
  padding: 3px 5px;
  border: 1px solid rgba(245,211,132,.6);
  border-radius: 5px;
  color: #fff3d0;
  background: rgba(22,18,18,.72);
  text-shadow: 0 2px 3px #000;
  box-shadow: 0 2px 5px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.16);
}
.game-card:not(.spell) .card-style {
  position: absolute;
  left: 50%;
  top: 43px;
  transform: translateX(-50%);
  margin: 0;
  max-width: 88%;
  padding: 2px 6px;
  color: #fff0c4;
  background: rgba(18,18,22,.68);
  border: 1px solid rgba(241,205,115,.48);
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
.game-card:not(.spell) .card-style.ranged { color: #c8efff; }
.game-card:not(.spell) .card-style.melee { color: #ffdca8; }
.game-card.weapon { border-color: #d8a84a; box-shadow: inset 0 0 0 1px rgba(255,232,153,.35), 0 6px 12px #000, 0 0 12px rgba(224,159,53,.24); }
.game-card.weapon .card-art.has-image img { object-position: center 50%; filter: saturate(1.12) contrast(1.08) brightness(.88); }
.game-card.weapon .durability-stat { color: #bce5ff; }
.game-card:not(.spell) .card-copy {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 23px;
  width: auto;
  height: 27px;
  padding: 3px 5px 2px;
  color: #fff0ce;
  border: 1px solid rgba(240,205,125,.5);
  border-radius: 5px;
  background: rgba(18,14,15,.72);
  text-shadow: 0 1px 2px #000;
}
.game-card:not(.spell) .card-stats {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  padding: 1px 5px;
  border: 1px solid rgba(242,205,121,.58);
  border-radius: 5px;
  background: rgba(12,10,12,.78);
  text-shadow: 0 1px 2px #000;
}
.game-card:hover { transform: translateY(-8px) scale(1.03); z-index: 2; }
.game-card.selected { transform: translateY(-10px); border-color: #ffe19b; box-shadow: 0 0 23px rgba(255,217,133,.53); }
.game-card.unplayable { filter: grayscale(.85) brightness(.6); cursor: not-allowed; }
.card-cost { position: absolute; left: -6px; top: -7px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #326aa0; border: 2px solid #9bc8e8; font-weight: 900; }
.card-cost.discounted { background: #277644; border-color: #baff84; color: #f4ffe8; box-shadow: 0 0 12px rgba(114, 255, 116, .9); }
.card-level { position: absolute; right: 5px; top: 4px; font-size: 9px; color: #ead094; }
.card-name { text-align: center; font-size: 11px; font-weight: 900; margin-top: 13px; color: #ffefcb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-art { font-size: 26px; text-align: center; line-height: 34px; }
.card-art.has-image { height: 43px; margin: 2px -3px 1px; overflow: hidden; border-radius: 5px; border: 1px solid rgba(239,207,142,.55); background: #17202a; line-height: 0; }
.card-art.has-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 24%; }
.card-copy { height: 31px; overflow: hidden; font-size: 8px; color: #cbbda3; text-align: center; line-height: 1.35; }
.card-style { margin: -2px auto 2px; width: max-content; max-width: 96%; padding: 1px 5px; border-radius: 999px; font-size: 7px; line-height: 1.4; letter-spacing: .05em; }
.card-style.melee { color: #ffd59b; background: rgba(121,62,29,.78); }
.card-style.ranged { color: #c0ebff; background: rgba(31,84,118,.82); }
.card-style.support { color: #d9ffb8; background: rgba(45,100,50,.82); }
.card-stats { position: absolute; left: 5px; right: 5px; bottom: 5px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 900; }
.battle-sidebar { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 0; }
.objective, .battle-log, .deck-remaining-panel { border: 1px solid var(--line); background: var(--panel); border-radius: 11px; padding: 12px; }
.objective h3, .battle-log h3, .deck-remaining-panel h3 { color: var(--gold-bright); margin: 0 0 8px; font-size: 14px; }
.objective p { margin: 4px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.battle-log { min-height: 340px; max-height: 72vh; overflow-y: auto; }
.deck-remaining-panel { min-height: 340px; max-height: 72vh; overflow-y: auto; }
.battle-log-heading { position: sticky; top: -12px; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: -12px -12px 7px; padding: 12px; background: rgba(24,19,17,.98); border-bottom: 1px solid rgba(228,183,93,.18); }
.battle-log-heading h3 { margin: 0; }
.battle-log-heading small { color: var(--muted); font-size: 9px; }
.deck-remaining-list { display: grid; gap: 5px; }
.deck-remaining-card { min-height: 34px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 4px 5px; border: 1px solid rgba(228,183,93,.18); border-radius: 6px; background: rgba(255,255,255,.035); color: #e6d6b9; font-size: 11px; }
.deck-remaining-art { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; color: #f4d386; background: rgba(0,0,0,.3); font-size: 17px; }
.deck-remaining-art img { width: 100%; height: 100%; object-fit: cover; }
.deck-remaining-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-remaining-cost, .deck-remaining-count { color: #f3cc73; font-weight: 800; }
.deck-remaining-cost { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #2d74b9; color: #fff; font-size: 10px; }
.deck-empty { color: var(--muted); font-size: 11px; line-height: 1.6; }
.log-entry { margin-bottom: 6px; padding: 7px 8px; border-left: 3px solid #776b59; border-radius: 5px; background: rgba(255,255,255,.025); color: #c9bea9; font-size: 11px; line-height: 1.5; }
.log-entry.log-player { border-left-color: #5a93c6; background: rgba(56,105,150,.1); }
.log-entry.log-enemy { border-left-color: #ad5a4a; background: rgba(128,55,42,.11); }
.log-entry.log-boss { border-left-color: #d0913f; background: rgba(144,88,28,.14); }
.log-entry:first-of-type { color: #f4ddae; }
.log-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; color: #d3b97d; font-size: 9px; letter-spacing: .08em; }
.log-meta small { color: #807565; font-size: 8px; }
.log-message { overflow-wrap: anywhere; }
.settings-stack { display: grid; gap: 14px; }
.sound-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.sound-settings h3 { margin: 0 0 6px; color: var(--gold-bright); }
.sound-settings p { margin: 0; color: var(--muted); line-height: 1.55; }
.sound-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sound-volume { grid-column: 1 / -1; display: grid; gap: 7px; color: #d9c79f; }
.sound-volume span { display: flex; justify-content: space-between; }
.sound-volume input { width: 100%; accent-color: #5aa9d6; }
.language-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.language-settings h3 { margin: 0 0 6px; color: var(--gold-bright); }
.language-settings p { margin: 0; color: var(--muted); line-height: 1.55; }
.language-select { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #6e5433; border-radius: 8px; background: rgba(28, 19, 16, .86); color: #f3e2bd; }
.language-select-label { font-weight: 600; letter-spacing: .02em; }
.language-select select { min-width: 132px; padding: 6px 8px; border: 1px solid #6e5433; border-radius: 6px; background: #1c1310; color: #f3e2bd; font: inherit; cursor: pointer; }
.cover-language { position: absolute; top: 18px; right: 18px; z-index: 3; }
/* 非中文界面：标题本身已是英文副标题的译文，隐藏重复的副标题；除中日文外卡名较长，缩小字号。 */
html:not(:lang(zh)) .brand small, html:not(:lang(zh)) .cover-kicker { display: none; }
html:not(:lang(zh)):not(:lang(ja)) .game-card .card-name { font-size: 9.5px; letter-spacing: 0; }
html:not(:lang(zh)):not(:lang(ja)) .game-card:not(.spell) .card-name { margin-left: 6px; margin-right: 6px; }
.turn-badge { padding: 9px; text-align: center; border-radius: 8px; background: #2f231c; border: 1px solid var(--line); color: var(--gold-bright); }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(4,4,4,.78); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(5px); }
.modal { width: min(760px, 96vw); max-height: 90vh; overflow: auto; border: 2px solid #9a743d; border-radius: 14px; background: linear-gradient(150deg, #3d2a20, #151211 68%); box-shadow: 0 30px 90px #000; padding: 25px; animation: modalIn .25s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(.94); } }
.modal h2 { margin-top: 0; color: var(--gold-bright); }
.modal p { color: #c7b89f; line-height: 1.75; }
.modal-backdrop.card-inspect-modal { background: radial-gradient(circle at center, rgba(35,42,55,.68), rgba(2,3,5,.91) 72%); backdrop-filter: blur(9px); }
.modal.card-inspect-modal { position: relative; width: min(470px, 96vw); max-height: 96vh; overflow: visible; display: grid; place-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; }
.card-inspect-close { position: absolute; z-index: 8; top: -12px; right: 18px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0 0 4px; border: 2px solid #f0d08a; border-radius: 50%; color: #fff1cf; background: radial-gradient(circle at 38% 30%, #8c5741, #321713 74%); box-shadow: 0 5px 18px rgba(0,0,0,.72), inset 0 0 0 2px rgba(255,224,152,.18); font: 900 32px/1 Georgia, serif; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.card-inspect-close:hover, .card-inspect-close:focus-visible { transform: scale(1.09) rotate(4deg); filter: brightness(1.2); outline: 3px solid rgba(255,224,148,.28); }
.card-inspect-card { --inspect-accent: #e8bd62; --inspect-deep: #18375a; position: relative; width: min(390px, calc(100vw - 46px)); aspect-ratio: 0.69; overflow: hidden; isolation: isolate; border: 5px solid #c9933f; border-radius: 30px; background: linear-gradient(150deg, #132b50, #091323 62%, #28190f); box-shadow: 0 0 0 3px #f5da8d, 0 0 0 9px #5f3c1d, 0 28px 70px rgba(0,0,0,.88), inset 0 0 34px rgba(255,210,111,.28); }
.card-inspect-card::before { content: ""; position: absolute; z-index: 5; inset: 10px; pointer-events: none; border: 2px solid rgba(255,226,151,.78); border-radius: 20px; box-shadow: inset 0 0 0 4px rgba(45,25,13,.72), inset 0 0 20px rgba(255,205,87,.25); }
.card-inspect-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,7,15,.56), transparent 25%, transparent 56%, rgba(8,5,5,.88) 82%), radial-gradient(circle at 50% 38%, transparent 30%, rgba(4,4,7,.44) 83%); }
.card-inspect-card.spell { --inspect-accent: #7bd8ff; --inspect-deep: #061c54; border-color: #e4bd55; background: linear-gradient(145deg, #07215b, #071230 65%, #30210c); box-shadow: 0 0 0 3px #ffeaa2, 0 0 0 9px #155c9e, 0 28px 70px rgba(0,0,0,.88), 0 0 30px rgba(59,164,255,.35), inset 0 0 34px rgba(113,199,255,.25); }
.card-inspect-card.weapon { --inspect-accent: #ffd47b; --inspect-deep: #4a2816; border-color: #d39a3f; background: linear-gradient(145deg, #4b2a16, #17100d 65%, #33200e); box-shadow: 0 0 0 3px #f6d783, 0 0 0 9px #6b401e, 0 28px 70px rgba(0,0,0,.88), 0 0 28px rgba(237,164,55,.25), inset 0 0 34px rgba(255,190,72,.25); }
.card-inspect-art { position: absolute; z-index: 0; inset: 64px 20px 126px; display: grid; place-items: center; overflow: hidden; border: 3px solid #d6a84e; border-radius: 22px 22px 14px 14px; background: var(--inspect-deep); box-shadow: 0 0 0 3px rgba(54,29,12,.75), inset 0 0 28px rgba(0,0,0,.55); font-size: 100px; }
.card-inspect-card.spell .card-inspect-art { border-radius: 46% 46% 18px 18px; border-color: #9bdcff; box-shadow: 0 0 0 3px rgba(212,167,65,.86), 0 0 22px rgba(76,178,255,.42), inset 0 0 28px rgba(0,0,0,.4); }
.card-inspect-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 34%; }
.card-inspect-card.weapon .card-inspect-art img { object-position: center 50%; }
.card-inspect-cost { position: absolute; z-index: 7; left: 5px; top: 4px; width: 68px; height: 68px; display: grid; place-items: center; border: 4px solid #f2d47f; border-radius: 50% 50% 47% 47%; color: white; background: radial-gradient(circle at 35% 27%, #9eeeff 0 8%, #238bd4 28%, #0b396f 65%, #071b38 100%); box-shadow: 0 5px 12px #000, inset 0 0 0 3px rgba(255,255,255,.23), 0 0 18px rgba(37,161,255,.62); font: 900 38px/1 Georgia, serif; text-shadow: 0 3px 2px #06112a, 0 0 4px #fff; }
.card-inspect-rarity { position: absolute; z-index: 6; top: 17px; right: 19px; padding: 4px 11px; border: 1px solid var(--inspect-accent); border-radius: 999px; color: #fff1c8; background: rgba(12,13,18,.76); box-shadow: 0 2px 8px #000; font-size: 11px; letter-spacing: .12em; }
.card-inspect-title { position: absolute; z-index: 6; top: 12px; left: 68px; right: 64px; min-height: 52px; display: grid; place-items: center; align-content: center; padding: 4px 8px; border: 2px solid rgba(240,203,112,.76); border-radius: 10px; background: linear-gradient(180deg, rgba(61,39,22,.92), rgba(18,14,16,.9)); box-shadow: 0 3px 10px #000, inset 0 1px rgba(255,255,255,.2); text-align: center; }
.card-inspect-title h2 { max-width: 100%; margin: 0; overflow: hidden; color: #fff1c9; font-size: clamp(19px, 6vw, 27px); line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px 3px #000; }
.card-inspect-stars { margin-top: 3px; color: #ffd762; font-size: 12px; letter-spacing: 1px; text-shadow: 0 0 7px rgba(255,194,57,.9); }
.card-inspect-copy { position: absolute; z-index: 6; left: 26px; right: 26px; bottom: 53px; min-height: 108px; display: grid; align-content: center; gap: 6px; padding: 21px 17px 13px; border: 2px solid #d4aa59; border-radius: 11px; color: #35230f; background: linear-gradient(180deg, rgba(255,246,211,.97), rgba(211,181,123,.98)); box-shadow: 0 4px 14px #000, inset 0 0 16px rgba(255,255,255,.55); text-align: center; }
.card-inspect-copy > span { position: absolute; top: -14px; left: 50%; min-width: 160px; transform: translateX(-50%); padding: 4px 12px; border: 2px solid #c8953b; border-radius: 999px; color: #fff0bc; background: linear-gradient(#35251b, #171316); box-shadow: 0 3px 8px #000; font-size: 11px; white-space: nowrap; }
.card-inspect-copy p { margin: 0; color: #2c1d0d; font-size: clamp(13px, 3.8vw, 17px); font-weight: 700; line-height: 1.45; }
.card-inspect-copy small { color: #79531f; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.card-inspect-stats { position: absolute; z-index: 7; left: 19px; right: 19px; bottom: 7px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.card-inspect-stats > span { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; gap: 2px; border: 4px solid #e9ca7e; border-radius: 50%; color: white; box-shadow: 0 4px 11px #000, inset 0 0 0 3px rgba(255,255,255,.15); font-size: 17px; text-shadow: 0 2px 2px #000; }
.card-inspect-stats b { font: 900 30px/1 Georgia, serif; }
.card-inspect-stats .inspect-attack { background: radial-gradient(circle at 34% 28%, #f5c545, #9d550d 62%, #3c1b08); }
.card-inspect-stats .inspect-health { margin-left: auto; background: radial-gradient(circle at 34% 28%, #ff7770, #a51f28 62%, #410d13); }
.card-inspect-stats .inspect-durability { margin-left: auto; background: radial-gradient(circle at 34% 28%, #bdeaff, #367ca7 62%, #112f47); }
.card-inspect-stats .inspect-spell-seal { width: 52px; height: 52px; margin: 0 auto; color: #dff9ff; background: radial-gradient(circle, #3bd8ff, #164f9a 58%, #0a224a); font-size: 27px; box-shadow: 0 0 18px rgba(86,213,255,.65), inset 0 0 0 3px rgba(255,255,255,.15); }
.card-inspect-injured { position: absolute; z-index: 7; top: 78px; right: -39px; width: 175px; padding: 5px 0; transform: rotate(38deg); color: #ffe3dc; background: #8e2c32; border-block: 1px solid #f09a93; box-shadow: 0 3px 10px #000; text-align: center; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.card-inspect-hint { margin: 18px 0 0 !important; color: #c9b78f !important; font-size: 12px; text-align: center; text-shadow: 0 2px 3px #000; }
.tutorial-steps { display: grid; gap: 10px; margin: 18px 0; }
.tutorial-step { display: grid; grid-template-columns: 35px 1fr; gap: 10px; align-items: center; padding: 10px; background: rgba(0,0,0,.24); border-radius: 8px; }
.tutorial-step b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #7f5a2b; }
.lane-diagram { margin: 14px 0 6px; padding: 12px; border: 1px solid rgba(228,183,93,.3); border-radius: 10px; background: rgba(0,0,0,.25); text-align: center; }
.lane-diagram p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.lane-hero { display: inline-block; margin-bottom: 8px; padding: 4px 14px; border: 1px solid #c9564a; border-radius: 999px; color: #ffb3a8; background: rgba(120,30,25,.35); font-weight: bold; }
.lane-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 320px; margin: 0 auto; }
.lane-col { display: grid; gap: 5px; padding: 5px; border-radius: 8px; opacity: .45; }
.lane-col.focus { opacity: 1; background: rgba(230,189,95,.14); box-shadow: 0 0 0 2px rgba(230,189,95,.55); }
.lane-cell { height: 30px; display: grid; place-items: center; border-radius: 6px; font-weight: bold; }
.lane-cell.enemy { background: rgba(160,60,50,.35); border: 1px solid rgba(220,110,90,.4); color: #ffd2c8; }
.lane-cell.mine { margin-top: 8px; background: rgba(60,110,160,.35); border: 1px solid rgba(110,160,220,.45); color: #d6e8ff; }
.lane-col small { color: var(--muted); font-size: 11px; }
.objective .rules-btn { float: right; margin-top: -2px; }
.reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reward-card { min-height: 175px; border: 1px solid #87663d; border-radius: 10px; background: linear-gradient(#473224, #201714); padding: 18px; cursor: pointer; text-align: center; }
.reward-card:hover { border-color: #ffd77d; transform: translateY(-4px); }
.reward-icon { font-size: 42px; }
.reward-icon .coin-icon { width: 48px; height: 48px; margin: 0; vertical-align: middle; }
.reward-card-preview img { width: 88px; height: 118px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,215,125,.72); box-shadow: 0 5px 16px rgba(0,0,0,.55); }
.reward-card-preview span { font-size: 14px; }
.guaranteed-weapon-drop { margin: 14px auto 18px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid #f1c65f; border-radius: 12px; background: radial-gradient(circle at center, rgba(103,68,19,.68), rgba(22,15,12,.9)); box-shadow: inset 0 0 24px rgba(255,196,71,.2), 0 0 20px rgba(255,176,39,.2); }
.guaranteed-weapon-drop .reward-card-preview { flex-direction: row; }
.guaranteed-weapon-drop strong { color: #ffe6a5; }
.summary-list { display: grid; gap: 7px; margin: 15px 0; }
.summary-list > div { display: flex; justify-content: space-between; padding: 8px; background: rgba(0,0,0,.22); }
.toast-root { position: fixed; z-index: 110; right: 20px; top: 90px; display: grid; gap: 8px; pointer-events: none; }
.attack-arrow-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .08s ease; }
.attack-arrow-layer.visible { opacity: 1; }
.attack-arrow-shadow, .attack-arrow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.attack-arrow-shadow { stroke: rgba(10,2,2,.9); stroke-width: 18; marker-end: url(#attack-arrowhead-shadow); }
.attack-arrow { stroke: #d94f38; stroke-width: 10; marker-end: url(#attack-arrowhead); filter: drop-shadow(0 0 6px rgba(255,77,49,.85)); animation: arrowPulse .72s ease-in-out infinite alternate; }
@keyframes arrowPulse { to { stroke: #ef704c; filter: drop-shadow(0 0 10px rgba(255,157,81,.95)); } }
.attack-arrow-layer.spell .attack-arrow-shadow { stroke: rgba(0, 18, 42, .92); }
.attack-arrow-layer.spell .attack-arrow { stroke: #2d9cff; marker-end: url(#spell-arrowhead); filter: drop-shadow(0 0 7px rgba(48,174,255,.9)); animation-name: spellArrowPulse; }
.attack-arrow-layer.skill .attack-arrow-shadow { stroke: rgba(54,28,2,.94); }
.attack-arrow-layer.skill .attack-arrow { stroke: #f2b84b; marker-end: url(#skill-arrowhead); filter: drop-shadow(0 0 8px rgba(255,195,68,.98)); animation-name: skillArrowPulse; }
.attack-arrow-layer.weapon .attack-arrow { stroke: #d94f38; marker-end: url(#attack-arrowhead); filter: drop-shadow(0 0 9px rgba(255,77,49,.95)); }
@keyframes skillArrowPulse { from { stroke-width: 10; } to { stroke-width: 14; } }
@keyframes spellArrowPulse { to { stroke: #72d8ff; filter: drop-shadow(0 0 12px rgba(114,224,255,1)); } }
.toast { width: min(360px, calc(100vw - 40px)); padding: 11px 15px; background: #2c2019; border: 1px solid #a57d43; border-radius: 8px; box-shadow: 0 10px 30px #000; animation: toastIn .25s ease both; }
.toast.good { border-color: #6eaa78; }
.toast.bad { border-color: #b45a50; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }

.debug-panel { position: fixed; z-index: 100; right: 12px; bottom: 12px; width: 300px; border: 1px solid #d1a352; background: #171310f2; border-radius: 10px; box-shadow: 0 15px 50px #000; padding: 12px; }
.debug-panel h3 { margin: 0 0 8px; color: #f1cd7b; display: flex; justify-content: space-between; }
.debug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.debug-grid button { border: 1px solid #6f5533; background: #34271e; padding: 6px; border-radius: 5px; cursor: pointer; font-size: 11px; }

@media (max-width: 1000px) {
  .battle-layout { grid-template-columns: 1fr; }
  .battle-sidebar { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .battle-log, .deck-remaining-panel { max-height: 190px; min-height: 160px; }
  .map-track { grid-template-columns: repeat(var(--map-stage-count, 9), 110px); }
}
@media (max-width: 720px) {
  .app-shell { padding: 8px; }
  .cover-screen { background-position: 58% center; align-items: end; }
  .cover-shade { background: linear-gradient(0deg, rgba(4,8,7,.96) 0%, rgba(4,8,7,.72) 43%, rgba(4,8,7,.08) 76%); }
  .cover-menu { margin: 0 auto; padding: 24px 0 30px; }
  .cover-kicker { font-size: 10px; }
  .cover-menu h1 { font-size: 46px; }
  .cover-menu > p { margin-bottom: 15px; font-size: 13px; }
  .cover-actions { width: 100%; gap: 8px; }
  .cover-button { min-height: 57px; }
  .cover-button span { font-size: 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .page-heading h2 { font-size: 30px; }
  .map-shell.chapter-two-map { padding: 8px; }
  .boss-map-board { min-height: 280px; }
  .boss-map-node { --map-node-size: clamp(34px, 8vw, 48px); padding: 3px; }
  .boss-map-node.final-boss { --map-node-size: clamp(50px, 11vw, 68px); }
  .boss-map-node small { display: none; }
  .boss-map-node .stage-number { left: -5px; top: -5px; min-width: 17px; height: 17px; padding: 0 2px; font-size: 8px; }
  .topbar { position: relative; top: 0; flex-wrap: wrap; }
  .brand { min-width: 0; }
  .brand small { display: none; }
  .top-resources { width: 100%; justify-content: flex-start; }
  /* 窄屏时资源条换到第二行，返回按钮留在第一行右上角。 */
  .topbar-actions { order: 1; margin-left: auto; }
  .top-resources { order: 2; }
  .hero-banner { grid-template-columns: 1fr; }
  .hero-portrait { min-height: 220px; }
  .hero-portrait .crest { width: 145px; height: 165px; font-size: 65px; }
  .hero-portrait .crest.hero-image { width: min(220px, 84%); height: 210px; }
  .hero-copy { padding: 24px; }
  .dashboard-grid, .deck-layout, .hero-sheet, .shop-actions, .hero-skill-collection { grid-template-columns: 1fr; }
  .menu-banner { background-position: center; }
  .menu-banner .hero-portrait { padding-top: 40px; }
  .menu-overview, .training-npc-grid { grid-template-columns: 1fr; }
  .menu-tiles { grid-template-columns: repeat(2, 1fr); }
  .menu-tile strong { font-size: 17px; letter-spacing: .08em; }
  .training-hotspot-plate { display: none; }
  .menu-tile { min-height: 86px; }
  .chapter-emblem-art { width: 48px; height: 48px; }
  .chapter-emblem small { font-size: 10px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .battle-row { grid-template-columns: repeat(4, minmax(76px, 1fr)); }
  .battlefield { height: 590px; min-height: 590px; max-height: 590px; padding: 12px 2%; background-size: cover; }
  .battlefield .rows, .battlefield .divider { width: 100%; }
  .battlefield .battle-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .boss-dialogue-frame { width: 92vw; min-height: 70px; grid-template-columns: 56px minmax(0,1fr); gap: 9px; padding: 7px 10px 7px 7px; }
  .boss-dialogue-frame img { width: 56px; height: 56px; }
  .boss-dialogue-frame strong { font-size: 12px; }
  .boss-dialogue-frame p { font-size: 11px; line-height: 1.4; }
  .slot { min-height: 0; }
  .unit { min-height: 0; padding: 5px; }
  .unit-icon { font-size: 21px; line-height: 28px; }
  .combat-hero { grid-template-columns: minmax(70px, 1fr) 60px minmax(70px, 1fr); gap: 6px; padding-inline: 7px; }
  .enemy-portrait-wrap { width: 60px; height: 60px; }
  .enemy-portrait-wrap .combat-portrait.has-image.enemy-portrait { width: 60px; height: 60px; }
  .combat-hero.enemy .enemy-weapon-wrap { grid-column: 1 / -1; justify-content: center; }
  .combat-hero.player-hero { grid-template-columns: minmax(88px, 1fr) 60px 92px minmax(88px, 1fr); grid-template-areas: "skill portrait weapon end" "identity bars bars bars"; min-height: 148px; }
  .equipped-weapon { width: 90px; height: 62px; }
  .player-hero .combat-identity { text-align: center; }
  .player-hero .hero-bars { justify-content: center; }
  .player-hero .hero-skill, .player-hero .end-turn { min-width: 0; min-height: 62px; padding: 6px; font-size: 11px; }
  .mana-crystals { gap: 1px; min-height: 32px; padding-inline: 3px; }
  .mana-crystal { flex-basis: 14px; width: 14px; height: 27px; }
  .mana-count { min-width: 22px; font-size: 9px; }
  .combat-portrait { width: 52px; height: 52px; font-size: 24px; }
  .combat-portrait.has-image { width: 60px; height: 60px; }
  .combat-portrait.has-image.enemy-portrait { width: 64px; height: 64px; }
  .combat-identity h3 { font-size: 13px; }
  .combat-identity small { font-size: 9px; }
  .hero-bars { gap: 4px; }
  .health-pill, .mana-pill, .hand-pill { padding: 4px 6px; font-size: 10px; }
  .boss-skill-grid { grid-template-columns: 1fr; }
  .sound-settings { grid-template-columns: 1fr; }
  .sound-actions { justify-content: flex-start; }
  .reward-grid { grid-template-columns: 1fr; }
  .boss-loot-grid { grid-template-columns: 1fr; }
  .note-grid { grid-template-columns: 1fr; }
  .battle-sidebar { grid-template-columns: 1fr; }
  .arena-lobby { grid-template-columns: 1fr; }
  .arena-roster { grid-template-columns: repeat(7,minmax(0,1fr)); }
  .arena-bracket-scroll { max-height: 520px; }
  .arena-schedule-heading { align-items: flex-start; flex-direction: column; }
  .arena-next { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* 新游戏：选择英雄 */
.hero-select-screen, .save-slots-screen { padding-bottom: 32px; }
.hero-select-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.hero-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.hero-select-group-title { margin: 18px 0 10px; color: var(--gold); font-size: 18px; letter-spacing: .06em; }
.hero-select-group-title:first-child { margin-top: 0; }
.hero-pick { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, rgba(58,40,27,.92), rgba(23,17,14,.95)); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.hero-pick:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.hero-pick.selected { border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(255,217,139,.55), 0 12px 30px rgba(0,0,0,.5); background: linear-gradient(180deg, rgba(110,78,40,.95), rgba(35,25,17,.95)); }
.hero-pick-art { width: 100%; aspect-ratio: 5 / 6; display: grid; place-items: center; }
.hero-pick-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.hero-pick strong { color: var(--gold-bright); font-size: 16px; }
.hero-pick small { color: var(--muted); font-size: 12px; }
.hero-pick.locked { cursor: not-allowed; opacity: .78; }
.hero-pick.locked img { filter: grayscale(1) brightness(.38) blur(1px); }
.hero-select-detail { position: sticky; top: 12px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.hero-select-detail h3 { margin: 0; color: var(--gold-bright); font-size: 28px; }
.hero-select-detail p { margin: 0; color: var(--ink); line-height: 1.6; }
.hero-select-portrait { display: flex; justify-content: center; height: 250px; overflow: hidden; }
.hero-select-portrait img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.hero-select-skill { padding: 12px; border: 1px solid rgba(228,183,93,.28); border-radius: 8px; background: rgba(0,0,0,.25); }
.hero-select-skill strong { color: var(--gold-bright); }
.hero-select-skill ul { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.5; }
.hero-select-skill b { color: var(--gold); }
.hero-select-skill small { color: var(--muted); }

/* 存档栏位 */
.save-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.save-slot { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.save-slot.active { border-color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(255,217,139,.45); }
.save-slot header { display: flex; justify-content: space-between; align-items: center; color: var(--gold); font-weight: 800; letter-spacing: .08em; }
.save-slot header em { font-style: normal; font-size: 12px; color: #21160e; background: var(--gold); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
.save-slot-body { display: flex; gap: 10px; align-items: center; min-height: 78px; }
.save-slot-body img { width: 62px; height: 74px; object-fit: contain; flex: none; }
.save-slot-info { display: grid; gap: 3px; min-width: 0; }
.save-slot-info strong { color: var(--gold-bright); }
.save-slot-info small { color: var(--muted); font-size: 12px; }
.save-slot-info .coin-icon { width: 14px; height: 14px; vertical-align: -2px; }
.save-slot-empty { width: 100%; text-align: center; color: var(--muted); letter-spacing: .2em; }
.save-slot.empty { opacity: .8; border-style: dashed; }
.save-slot-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.save-slot-actions .mini-btn:disabled { opacity: .4; cursor: not-allowed; }
.mini-btn.danger { border-color: #a75c53; background: #3d1d1c; }

@media (max-width: 900px) {
  .hero-select-layout { grid-template-columns: 1fr; }
  .hero-select-detail { position: static; order: -1; }
  .hero-select-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .hero-select-portrait { height: 180px; }
  .save-slot-grid { grid-template-columns: 1fr; }
}

/* 金杯餐馆与在押首领好感度 */
.restaurant-menu { display: grid; gap: 10px; margin: 8px 0 14px; }
.restaurant-food { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.25); }
.restaurant-food-icon { flex: 0 0 auto; font-size: 30px; line-height: 1; }
.restaurant-food-copy { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; }
.restaurant-food-copy strong { color: var(--gold-bright); }
.restaurant-food-copy small { color: var(--muted); line-height: 1.5; }
.restaurant-food-copy .restaurant-food-stats { color: #cbbd9f; }
.restaurant-food .secondary-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.prison-bond-hint { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(10,8,12,.72); color: #cbbd9f; line-height: 1.6; }
button.prison-inmate { font: inherit; color: inherit; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
button.prison-inmate:hover { transform: translateY(-2px); border-color: var(--gold-bright); }
.prison-inmate.bonded { border-color: #e28bb0; box-shadow: 0 0 0 1px rgba(226,139,176,.5), 0 6px 16px rgba(0,0,0,.45); }
.prison-inmate em { color: #e7b6c9; font-size: 11px; font-style: normal; }
.affinity-bar { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.12); }
.affinity-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b8506f, #f19ac0); }
.affinity-bar.large { height: 10px; margin: 6px 0 10px; }
.bond-badge { background: #8a3d5c; }
.prisoner-visit { display: flex; gap: 16px; align-items: flex-start; margin: 8px 0 12px; }
.prisoner-visit-portrait { width: 150px; aspect-ratio: 1; flex: 0 0 auto; object-fit: cover; border-radius: 12px; border: 1px solid #a98244; }
.prisoner-visit-info { flex: 1 1 auto; min-width: 0; }
.prisoner-visit-info p { margin: 0 0 6px; line-height: 1.6; }
.feed-grid .feed-choice { display: grid; justify-items: center; gap: 4px; text-align: center; }
.feed-choice.favorite { border-color: #e28bb0; }
@media (max-width: 640px) {
  .prisoner-visit { flex-direction: column; align-items: center; }
  .restaurant-food { flex-wrap: wrap; }
}
.bond-badge.bonded { background: #b8506f; color: #fff0f6; }
.card-inspect-injured.card-inspect-bond { background: rgba(184,80,111,.85); }
.prison-boss-cards { margin: 0 0 12px; padding: 10px 14px; border: 1px solid #c99b4e; border-radius: 10px; background: rgba(10,8,12,.78); }
.prison-boss-cards h3 { margin: 0 0 6px; color: var(--gold-bright); font-size: 15px; }
.prison-boss-cards ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.prison-boss-cards li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: #cbbd9f; font-size: 13px; }
.prisoner-boss-hint { color: #e7b6c9; font-size: 13px; }
/* 队伍粮食 */
.ration-chip small { margin-left: 3px; color: var(--muted); font-size: 11px; }
.ration-chip.short { border-color: rgba(224,72,58,.7); }
.ration-chip.short strong, .ration-chip.short small { color: #ff8a7a; }
.restaurant-flour { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 14px; padding: 12px 14px; border: 1px solid #c99b4e; border-radius: 12px; background: rgba(201,155,78,.1); }
.restaurant-flour-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.restaurant-flour-buttons .secondary-btn { display: inline-flex; align-items: center; gap: 4px; }
/* 游戏时间 */
.clock-chip { position: relative; overflow: hidden; }
.clock-chip small { margin-left: 3px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.clock-progress { position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 999px; background: rgba(255,255,255,.08); }
.clock-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f2c86b, #7aa7e0); }
.prison-inmate .fed-today { color: #9fd49a; }
.fed-today-hint { margin: 0 0 8px; color: #cbbd9f; font-size: 13px; }
.inn-offer { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; padding: 12px 14px; border: 1px solid #c99b4e; border-radius: 12px; background: rgba(201,155,78,.1); }
/* 犯人派遣劳动 */
.prison-labor { margin: 0 0 12px; padding: 10px 14px; border: 1px solid #6f9a5c; border-radius: 10px; background: rgba(10,12,8,.8); }
.prison-labor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.prison-labor h3 { margin: 0 0 2px; color: #b8e0a0; font-size: 15px; }
.prison-labor-head small { color: #cbbd9f; line-height: 1.5; }
.prison-labor ul { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.prison-labor li { display: flex; flex-wrap: wrap; gap: 2px 10px; color: #cbbd9f; font-size: 12px; line-height: 1.5; }
.prison-labor li strong { color: var(--gold-bright); }
.prison-inmate .labor-away { color: #9fc8f0; }
.prison-inmate .labor-done { color: #b8e0a0; }
.prisoner-labor { padding: 8px 10px; border-radius: 8px; background: rgba(111,154,92,.15); font-size: 13px; }
.prisoner-labor .mini-btn { margin-left: 6px; }
/* 好感剧情 */
.prisoner-voice { margin: 4px 0 8px; padding-left: 10px; border-left: 3px solid #e28bb0; color: #f0d6e0; font-style: italic; }
.prisoner-story { margin: 0 0 8px; padding: 6px 10px; border: 1px solid rgba(226,139,176,.35); border-radius: 8px; background: rgba(0,0,0,.25); }
.prisoner-story summary { cursor: pointer; color: var(--gold-bright); font-size: 13px; }
.prisoner-story p { margin: 6px 0 2px; line-height: 1.7; color: #e3d6bd; font-size: 13px; }
.story-locked { color: var(--muted) !important; font-style: italic; }
.race-story-book { margin: 12px 0; }
.race-story-book h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; color: var(--gold-bright); }
.race-story-book h3 small { color: var(--muted); font-size: 12px; }
.race-story { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.race-story h4 { margin: 0 0 4px; color: #f0d6e0; font-size: 14px; }
.race-story p { margin: 0; line-height: 1.75; color: #e3d6bd; font-size: 13px; }
.race-story.locked { opacity: .7; }
/* 夜晚事件 */
.clock-chip.night { border-color: rgba(122,167,224,.6); background: rgba(20,28,52,.55); }
.night-event .prison-warden-intro p { margin: 4px 0 0; color: #d8cdb6; line-height: 1.7; }
.night-choices .choice-btn { display: grid; gap: 4px; text-align: left; }
.night-result { line-height: 1.8; color: #e3d6bd; }

/* 存档导出/导入 */
.save-slot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.save-slot-toolbar small { color: var(--muted); font-size: 12px; }
.save-slot-info .save-slot-warning { color: #f0a35d; }
.save-transfer-text { display: block; width: 100%; min-height: 120px; max-height: 40vh; margin: 10px 0; padding: 8px 10px; box-sizing: border-box; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.35); color: var(--gold-bright); font: 12px/1.45 ui-monospace, Consolas, monospace; word-break: break-all; }
.save-transfer-file { display: grid; gap: 6px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.save-transfer-file input { color: var(--gold-bright); max-width: 100%; }
.save-import-plan { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 4px; }

/* 阿拉伯语：界面布局保持不变，文字段落按从右到左排版。 */
html[lang="ar"] :is(p, li, h1, h2, h3, h4, small, q, blockquote, label, .toast) { unicode-bidi: plaintext; }