@font-face { font-family: 'MaShanZheng'; src: url('../assets/fonts/ma-shan-zheng-v3.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'BrushFallback'; src: url('../assets/fonts/brush-fallback-v3.woff2') format('woff2'); font-display: swap; }
:root {
  --ink: #0b0d10; --ink2: #151a20; --ink3: #232a33; --paper: #efe4cf; --paper2: #d9c9a8; --dim: rgba(239,228,207,.62);
  --ver: #e2452f; --ver2: #b8301f; --gold: #f2c55c;
  --jin: #f6d36b; --mu: #4fdc8e; --shui: #45c9f5; --huo: #ff5a2c; --tu: #e0a14e; --zhuo: #8a7f95;
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --num: "DIN Condensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", Impact, var(--sans);
  --brush: 'MaShanZheng', 'BrushFallback', "Kaiti SC", "STKaiti", "KaiTi", var(--sans);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050607; color: var(--paper); font-family: var(--sans); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#app { position: fixed; inset: 0; background: radial-gradient(ellipse at center, #10151a 0%, #050607 70%); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.brush { font-family: var(--brush); font-weight: 400; }
.dim { color: var(--dim); }
img { -webkit-user-drag: none; }

.stage { position: absolute; left: 50%; top: 50%; transform-origin: center; overflow: hidden; background: var(--ink); box-shadow: 0 0 120px rgba(0,0,0,.8); }
.shake-root, .screen-root, .overlay-root { position: absolute; inset: 0; }
.overlay-root { pointer-events: none; z-index: 50; }
.overlay-root > * { pointer-events: auto; }
.fx-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.scr { position: absolute; inset: 0; overflow: hidden; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg.dim { filter: brightness(.55) saturate(.9); }

/* ===== Buttons ===== */
.btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 26px; font-size: 20px; letter-spacing: .1em; transition: transform .12s, filter .12s; }
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.btn:disabled { opacity: .4; filter: grayscale(.7); }
.btn small { font-size: 12px; letter-spacing: .05em; opacity: .8; font-family: var(--sans); }
.btn.seal { font-family: var(--brush); font-size: 30px; color: #fff3e6; background: linear-gradient(160deg, #f0573b, var(--ver2)); border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(255,235,210,.35), inset 0 0 0 6px var(--ver2), 0 6px 0 #6d1a10, 0 10px 24px rgba(0,0,0,.5); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.seal.big { font-size: 40px; padding: 16px 48px; }
.btn.seal.ghost { background: transparent; box-shadow: inset 0 0 0 2px rgba(240,87,59,.8); color: #ffd9cc; font-size: 26px; }
.btn.ink { background: rgba(10,12,15,.72); border: 1px solid rgba(239,228,207,.35); border-radius: 4px; font-size: 17px; }
.btn.ink.small { font-size: 15px; padding: 8px 14px; }
.btn.danger { border-color: rgba(226,69,47,.7); color: #ffb3a6; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(10,12,15,.75); border: 1px solid rgba(239,228,207,.3); font-family: var(--brush); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn small { position: absolute; right: -4px; bottom: -4px; font: 700 11px var(--num); background: var(--ver); color: #fff; border-radius: 8px; padding: 1px 5px; }
.icon-btn.settings { font-family: var(--sans); font-size: 20px; }
.chip { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(239,228,207,.4); background: rgba(0,0,0,.4); font-size: 15px; margin: 3px; }
button.chip:hover { border-color: var(--gold); color: var(--gold); }

/* ===== Element colours ===== */
.el-text-jin { color: var(--jin); } .el-text-mu { color: var(--mu); } .el-text-shui { color: var(--shui); } .el-text-huo { color: var(--huo); } .el-text-tu { color: var(--tu); } .el-text-zhuo { color: var(--zhuo); }

/* ===== Tiles (玉符) ===== */
.tile { --c: var(--paper2); position: relative; width: 88px; height: 118px; border-radius: 10px; flex: none;
  background: linear-gradient(170deg, #f7efdd 0%, #e6d6b3 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), inset 0 -10px 0 rgba(0,0,0,.08), 0 6px 0 #6f5d43, 0 10px 18px rgba(0,0,0,.55);
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s; color: var(--ink); overflow: visible; }
.tile.el-jin { --c: var(--jin); } .tile.el-mu { --c: var(--mu); } .tile.el-shui { --c: var(--shui); } .tile.el-huo { --c: var(--huo); } .tile.el-tu { --c: var(--tu); }
.tile.el-zhuo { --c: var(--zhuo); background: linear-gradient(170deg, #5b5363, #3c3642); color: #b9b0c2; box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), 0 6px 0 #241f28, 0 10px 18px rgba(0,0,0,.55); }
.tile-band { position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 10px 10px 0 0; background: var(--c); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.tile-glyph { position: absolute; left: 0; right: 0; top: 20px; text-align: center; font-family: var(--brush); font-size: 58px; line-height: 1; color: color-mix(in srgb, var(--c) 72%, #000); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.tile.el-zhuo .tile-glyph { color: #a197ab; }
.tile-v { position: absolute; left: 7px; bottom: 5px; font: 700 26px/1 var(--num); color: var(--ink); }
.tile.el-zhuo .tile-v { color: #b9b0c2; }
.tile-mod { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--brush); font-size: 19px; color: #fff; background: #6c4bd8; box-shadow: 0 0 0 2px #f7efdd, 0 0 12px rgba(140,110,255,.8); }
.tile.mod-zhong .tile-mod { background: #3b3f46; box-shadow: 0 0 0 2px #f7efdd, 0 0 10px rgba(0,0,0,.6); }
.tile.mod-ling .tile-mod { background: conic-gradient(var(--mu), var(--huo), var(--tu), var(--jin), var(--shui), var(--mu)); color: #111; }
.tile.mod-jing .tile-mod { background: linear-gradient(135deg, #b8f3ff, #4bb6e8); color: #08324a; }
.tile.mod-lei { box-shadow: inset 0 0 0 2px rgba(108,75,216,.7), 0 6px 0 #6f5d43, 0 10px 18px rgba(0,0,0,.55), 0 0 18px rgba(140,110,255,.45); }
.tile.mod-ling .tile-glyph { background: linear-gradient(180deg, var(--mu), var(--huo), var(--jin), var(--shui)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.tile-order { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--ver); color: #fff; font: 700 16px/26px var(--num); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.tile.small { width: 46px; height: 62px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 3px 0 #6f5d43; }
.tile.small .tile-band { height: 7px; border-radius: 6px 6px 0 0; }
.tile.small .tile-glyph { top: 9px; font-size: 30px; }
.tile.small .tile-v { font-size: 15px; left: 4px; bottom: 2px; }
.tile.small .tile-mod { width: 18px; height: 18px; font-size: 12px; right: -4px; bottom: -4px; }
.hand .tile:hover { transform: translateY(-8px); }
.hand .tile.sel { transform: translateY(-30px); box-shadow: inset 0 0 0 3px var(--c), 0 6px 0 #6f5d43, 0 0 0 3px rgba(255,255,255,.4), 0 18px 30px rgba(0,0,0,.6), 0 0 26px var(--c); }
.hand .tile.counter::after { content: '克'; position: absolute; right: 4px; top: 18px; font: 700 13px var(--sans); color: #fff; background: var(--ver); border-radius: 3px; padding: 0 3px; }
.hand .tile.weak { filter: saturate(.55) brightness(.86); }
.hand .tile.weak::after { content: '弱'; position: absolute; right: 4px; top: 18px; font: 700 12px var(--sans); color: #ddd; background: #555; border-radius: 3px; padding: 0 3px; }
.hand .tile.chain { box-shadow: inset 0 0 0 3px #fff3c4, 0 6px 0 #6f5d43, 0 0 30px rgba(255,236,170,.85); }
.tile.gone { visibility: hidden; }
.mini-tile { display: inline-block; padding: 1px 6px; margin: 0 2px; border-radius: 3px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 14px; border-top: 3px solid var(--c, #999); }
.mini-tile.el-jin { --c: var(--jin); } .mini-tile.el-mu { --c: var(--mu); } .mini-tile.el-shui { --c: var(--shui); } .mini-tile.el-huo { --c: var(--huo); } .mini-tile.el-tu { --c: var(--tu); }

/* ===== Relics (法宝) ===== */
.relic { --ring: #a8834f; position: relative; width: 58px; height: 58px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 35% 30%, #3a3026, #14100c 70%); box-shadow: inset 0 0 0 3px var(--ring), inset 0 0 0 5px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.6); transition: transform .12s; }
.relic.r-rare { --ring: #4fdc8e; background: radial-gradient(circle at 35% 30%, #1d3a2c, #0b1510 70%); }
.relic.r-legend { --ring: var(--gold); background: radial-gradient(circle at 35% 30%, #4a3510, #160f05 70%); box-shadow: inset 0 0 0 3px var(--ring), inset 0 0 0 5px rgba(0,0,0,.6), 0 0 18px rgba(242,197,92,.5), 0 4px 10px rgba(0,0,0,.6); }
.relic-glyph { font-family: var(--brush); font-size: 32px; color: var(--paper); text-shadow: 0 0 8px rgba(0,0,0,.8); }
.relic.r-legend .relic-glyph { color: #ffe39a; }
.relic-name { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--dim); }
.relic.empty { cursor: default; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 2px rgba(239,228,207,.15); }
.relic.dragging { z-index: 30; cursor: grabbing; transition: none; box-shadow: inset 0 0 0 3px var(--ring), 0 0 0 3px var(--gold), 0 12px 24px rgba(0,0,0,.7); }
.relic.drop-target { box-shadow: inset 0 0 0 3px var(--ring), 0 0 0 3px var(--ver); }
.relic.firing { box-shadow: inset 0 0 0 3px #fff, 0 0 30px var(--gold); }
.relic.small { width: 40px; height: 40px; } .relic.small .relic-glyph { font-size: 22px; } .relic.small .relic-name { display: none; }
.relic.big { width: 92px; height: 92px; margin: 0 auto; cursor: default; } .relic.big .relic-glyph { font-size: 52px; }
.relic-row { display: flex; gap: 12px; align-items: center; position: relative; }
.relic-hint { display: none; }

/* ===== HUD ===== */
.hud { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; z-index: 20; background: linear-gradient(180deg, rgba(5,6,8,.92), rgba(5,6,8,0)); }
.hud-who { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.hud-face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; background: #222; box-shadow: 0 0 0 2px var(--paper2); }
.hud-id { display: flex; flex-direction: column; line-height: 1.2; }
.hud-id b { font-family: var(--brush); font-size: 24px; font-weight: 400; }
.realm { font-size: 12px; color: var(--gold); }
.hud-who .bar { width: 150px; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.gold { font: 700 22px var(--num); color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.gold i { font-style: normal; font-size: 14px; }
.act-tag { font-size: 13px; color: var(--dim); border: 1px solid rgba(239,228,207,.25); padding: 3px 8px; border-radius: 3px; }

/* ===== Bars ===== */
.bar { position: relative; height: 20px; border-radius: 4px; background: rgba(0,0,0,.65); box-shadow: inset 0 0 0 1px rgba(239,228,207,.25); overflow: hidden; }
.bar-fill, .bar-ghost { position: absolute; left: 0; top: 0; bottom: 0; }
.bar-fill { width: var(--pct); background: linear-gradient(180deg, #ff6b4f, #b8301f); transition: width .22s cubic-bezier(.2,.8,.2,1); }
.bar-ghost { width: var(--ghost); background: #fff1c9; transition: width .5s ease-in .1s; }
.bar.hp .bar-fill { background: linear-gradient(180deg, #5fe08f, #23874e); }
.bar-text { position: absolute; inset: 0; text-align: center; font: 700 14px/20px var(--num); text-shadow: 0 1px 2px #000; letter-spacing: .03em; }

/* ===== Title ===== */
.title-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, transparent 30%, rgba(0,0,0,.7)); }
.title-logo { position: absolute; left: 90px; top: 120px; z-index: 2; }
.logo-main { font-family: var(--brush); font-size: 168px; line-height: 1; color: var(--paper); text-shadow: 0 0 40px rgba(226,69,47,.35), 0 8px 0 rgba(0,0,0,.4); letter-spacing: -.02em; }
.logo-sub { font-family: var(--brush); font-size: 34px; color: var(--ver); margin-top: 8px; letter-spacing: .3em; }
.title-menu { position: absolute; left: 96px; top: 420px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.title-records { font-size: 14px; color: var(--dim); line-height: 1.7; }
.stage.port .title-logo { left: 0; right: 0; top: 160px; text-align: center; }
.stage.port .logo-main { font-size: 150px; }
.stage.port .title-menu { left: 0; right: 0; top: 760px; align-items: center; }
.title-scr > .icon-btn.settings { position: absolute; right: 20px; top: 20px; z-index: 3; }

/* ===== Method select ===== */
.select-head { position: absolute; left: 30px; top: 22px; right: 30px; display: flex; align-items: center; gap: 24px; z-index: 2; }
.select-head h1 { margin: 0; font-size: 46px; }
.method-grid { position: absolute; left: 30px; top: 100px; width: 520px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; z-index: 2; }
.method-card { position: relative; height: 270px; border-radius: 8px; overflow: hidden; background: rgba(5,6,8,.75); box-shadow: inset 0 0 0 2px rgba(239,228,207,.15); transition: transform .15s, box-shadow .15s; }
.method-card img { position: absolute; inset: 8px 0 52px; width: 100%; height: calc(100% - 60px); object-fit: contain; object-position: bottom; }
.method-card .mc-name { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-family: var(--brush); font-size: 26px; }
.method-card .mc-title { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 12px; color: var(--dim); letter-spacing: .3em; }
.method-card.on { box-shadow: inset 0 0 0 3px var(--ver), 0 0 24px rgba(226,69,47,.5); transform: translateY(-4px); }
.method-card:hover:not(.on):not(:disabled) { box-shadow: inset 0 0 0 2px var(--paper2); }
.method-card.locked img { filter: brightness(0) contrast(.5); opacity: .6; }
.method-detail { position: absolute; left: 580px; right: 30px; top: 100px; bottom: 30px; z-index: 2; display: flex; gap: 10px; }
.md-art { width: 300px; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 30px rgba(0,0,0,.8)); }
.md-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 10px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 100px; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.md-body > * { flex: none; }
.md-name { font-family: var(--brush); font-size: 54px; line-height: 1; } .md-name span { font-size: 28px; color: var(--ver); }
.md-blurb { font-size: 18px; line-height: 1.6; color: var(--paper); }
.md-passive { margin: 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.7; color: var(--dim); }
.md-stats { font-size: 14px; color: var(--dim); }
/* 起程 sits below the detail column (not inside its scroll area): bottom-right in landscape, full width in portrait. */
.select-go { position: absolute; left: 890px; right: 30px; bottom: 30px; z-index: 3; }
.heat-row { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.heat-pip { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(239,228,207,.4); font: 700 15px var(--num); }
.heat-pip.on { background: var(--ver); border-color: var(--ver); }
.stage.port .method-grid { left: 20px; right: 20px; width: auto; top: 90px; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.stage.port .method-card { height: 150px; }
.stage.port .method-card .mc-name { font-size: 18px; bottom: 18px; } .stage.port .method-card .mc-title { font-size: 10px; letter-spacing: .1em; }
.stage.port .method-card img { inset: 4px 0 40px; height: calc(100% - 44px); }
.stage.port .method-detail { left: 20px; right: 20px; top: 260px; bottom: 140px; flex-direction: column; align-items: center; }
.stage.port .md-art { width: 100%; height: 300px; flex: none; }
.stage.port .md-body { width: 100%; padding-bottom: 12px; }
.stage.port .select-go { left: 20px; right: 20px; bottom: 28px; }

/* ===== Map ===== */
.map { position: absolute; inset: 0; z-index: 1; }
.map-title { position: absolute; left: 0; right: 0; top: 96px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; pointer-events: none; }
.map-title .brush { font-size: 48px; line-height: 1; text-shadow: 0 0 20px rgba(0,0,0,.9); }
.map-title small { font-size: 13px; color: var(--dim); }
.act-no { font-size: 13px; color: var(--ver); letter-spacing: .4em; }
.map-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .map-lines svg { display: block; }
.map-line { fill: none; stroke: rgba(239,228,207,.22); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.map-line.walked { stroke: rgba(226,69,47,.85); stroke-dasharray: none; stroke-width: 4; }
.map-line.live { stroke: rgba(242,197,92,.85); stroke-dasharray: 10 8; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -36; } }
.map-node { position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 40% 35%, #2a3038, #0c0f13); box-shadow: inset 0 0 0 2px rgba(239,228,207,.35), 0 6px 14px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.node-glyph { font-family: var(--brush); font-size: 36px; color: var(--paper); }
.map-node.k-elite { background: radial-gradient(circle at 40% 35%, #4b1d18, #170807); box-shadow: inset 0 0 0 2px #e2452f, 0 6px 14px rgba(0,0,0,.6); }
.map-node.k-shop .node-glyph { color: var(--gold); } .map-node.k-rest .node-glyph { color: var(--mu); } .map-node.k-event .node-glyph { color: var(--shui); }
.map-node.k-boss { width: 150px; height: 150px; margin: -75px 0 0 -75px; background: radial-gradient(circle, #3a1410, #0b0606 70%); box-shadow: inset 0 0 0 3px var(--ver), 0 0 40px rgba(226,69,47,.45); overflow: visible; }
.map-node.k-boss .node-art { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); object-fit: contain; }
.map-node.k-boss .node-glyph { position: absolute; top: -18px; right: -6px; font-size: 30px; color: #fff; background: var(--ver); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.node-label { position: absolute; bottom: -28px; font-family: var(--brush); font-size: 24px; white-space: nowrap; text-shadow: 0 2px 6px #000; }
.node-el { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; font: 700 13px/24px var(--sans); text-align: center; color: #111; background: var(--c); }
.node-el.el-jin { --c: var(--jin); } .node-el.el-mu { --c: var(--mu); } .node-el.el-shui { --c: var(--shui); } .node-el.el-huo { --c: var(--huo); } .node-el.el-tu { --c: var(--tu); }
.map-node:disabled { opacity: .45; }
.map-node.done { opacity: .35; filter: grayscale(.8); }
.map-node.here { opacity: 1; filter: none; box-shadow: inset 0 0 0 3px var(--ver), 0 0 0 6px rgba(226,69,47,.25); }
.map-node.reach { opacity: 1; animation: nodePulse 1.4s ease-in-out infinite; }
.map-node.reach:hover { transform: scale(1.14); }
@keyframes nodePulse { 0%, 100% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 0 rgba(242,197,92,.6); } 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 12px rgba(242,197,92,0); } }
.map-legend { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; color: var(--dim); z-index: 2; }
.map-legend i { font-style: normal; font-family: var(--brush); font-size: 18px; margin-right: 4px; color: var(--paper); }

/* ===== Panel screens ===== */
.panel-scr { position: absolute; left: 50%; top: 96px; bottom: 24px; transform: translateX(-50%); width: 1100px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Long panels (big rewards, full shops) scroll inside themselves; the exit buttons stay pinned at the bottom. */
.panel-scr { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-bottom: 100px; touch-action: pan-y; scrollbar-width: thin; padding: 10px 0 6px; box-sizing: border-box; }
.panel-scr > * { flex: none; }
/* Reward and shop: the content scrolls in .panel-body; the exit buttons sit below it, never over the cards. */
.panel-scr.reward, .panel-scr.shop { overflow: hidden; }
.panel-body { flex: 1 1 auto !important; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: inherit; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; padding-top: 10px; }
.panel-body > * { flex: none; }
.panel-scr > .continue, .panel-scr > .shop-foot { margin-top: 0; }
.stage.port .panel-scr { width: 680px; top: 214px; bottom: 30px; } .stage.port .panel-scr.reward, .stage.port .panel-scr.shop { top: 214px; bottom: 30px; }
.big-title { font-size: 52px; margin: 0; line-height: 1; text-shadow: 0 0 30px rgba(226,69,47,.4); }
.reward-gold { font: 700 26px var(--num); color: var(--gold); }
.reward-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.reward-block h3 { margin: 0; font-size: 15px; color: var(--dim); font-weight: 400; letter-spacing: .3em; }
.cards { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.card { position: relative; width: 210px; min-height: 0; padding: 12px 12px 12px; border-radius: 10px; background: linear-gradient(170deg, rgba(30,34,40,.95), rgba(12,14,17,.95)); box-shadow: inset 0 0 0 1px rgba(239,228,207,.25), 0 10px 26px rgba(0,0,0,.6); text-align: center; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.card:hover:not(:disabled) { transform: translateY(-8px) rotate(-1deg); box-shadow: inset 0 0 0 2px var(--gold), 0 18px 34px rgba(0,0,0,.7); }
.card.done { opacity: .35; } .card.poor { opacity: .55; }
.card > div:first-child { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.card-title { font-size: 17px; font-weight: 700; } .card-rarity { font-size: 12px; color: var(--dim); letter-spacing: .3em; }
.card-relic.r-rare .card-rarity { color: var(--mu); } .card-relic.r-legend .card-rarity { color: var(--gold); }
.card-desc { font-size: 14px; line-height: 1.5; color: var(--dim); } .card-desc.num { color: var(--paper); font-family: var(--num); font-size: 16px; } .card-desc.num b { color: var(--gold); }
.pattern-seal { font-family: var(--brush); font-size: 34px; color: #fff; background: var(--ver2); padding: 4px 14px; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255,220,200,.35); }
.talent-glyph { font-family: var(--brush); font-size: 54px; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #3a2a10, #100b04); box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px rgba(242,197,92,.4); color: #ffe39a; }
.price { margin-top: 10px; font: 700 20px var(--num); color: var(--gold); }
.card-tile .tile { margin: 0 auto; }
.continue { margin-top: auto; }
.shop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.shop-grid .card { width: 200px; padding: 8px 10px; }
.shop-grid .relic.big, .reward .relic.big { width: 70px; height: 70px; } .shop-grid .relic.big .relic-glyph, .reward .relic.big .relic-glyph { font-size: 40px; }
.shop-grid .card-tile .tile, .reward .card-tile .tile { transform: scale(.82); margin: -10px auto; }
.panel-scr.reward, .panel-scr.shop { gap: 10px; top: 92px; bottom: 16px; }
.stage.port .shop-grid { grid-template-columns: repeat(3, 1fr); }
.stage.port .shop-grid .card { width: 210px; }
.stage.port .cards .card { width: 200px; }
.shop-foot { display: flex; gap: 16px; margin-top: auto; align-items: center; }

.event-glyph { font-size: 120px; line-height: 1; color: var(--ver); text-shadow: 0 0 40px rgba(226,69,47,.5); }
.panel-scr h1.brush { font-size: 54px; margin: 0; }
.event-text { max-width: 760px; font-size: 19px; line-height: 1.8; text-align: center; margin: 0; color: var(--paper); }
.event-options, .rest-options { display: flex; flex-direction: column; gap: 10px; width: 700px; max-width: 100%; }
.event-opt { display: flex; align-items: baseline; gap: 16px; padding: 14px 20px; border-radius: 6px; background: rgba(8,10,12,.82); box-shadow: inset 0 0 0 1px rgba(239,228,207,.25); text-align: left; transition: transform .12s, box-shadow .12s; }
.event-opt:hover:not(:disabled) { transform: translateX(6px); box-shadow: inset 0 0 0 2px var(--ver); }
.event-opt b { font-size: 19px; white-space: nowrap; } .event-opt span { color: var(--dim); font-size: 15px; }
.event-opt:disabled { opacity: .4; }
.event-opt.insight { flex-wrap: wrap; }
.insight-row { width: 100%; }
.event-result { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.event-result p { font-size: 19px; color: var(--gold); text-align: center; max-width: 720px; margin: 0; line-height: 1.7; }
.vow-tag { position: absolute; right: 0; bottom: 0; color: var(--ver); font-size: 14px; }
.pick-grid { display: flex; flex-wrap: wrap; gap: 10px 8px; justify-content: center; overflow-y: auto; padding: 18px 8px; max-height: 470px; }
.stage.port .pick-grid { max-height: 900px; }
.pick-grid .tile.sel { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--ver), 0 0 24px var(--ver); }
.panel-scr h2 { margin: 0; font-size: 22px; font-weight: 400; }

/* Breakthrough */
.break-scr .bg { filter: brightness(.5) hue-rotate(10deg); }
.break-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,226,160,.12) 0 6deg, transparent 6deg 18deg); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.break-realm { position: absolute; left: 0; right: 0; top: 70px; text-align: center; z-index: 2; }
.break-realm small { font-size: 18px; letter-spacing: .6em; color: var(--gold); }
.realm-big { font-size: 160px; line-height: 1.1; color: #fff6dc; text-shadow: 0 0 40px rgba(255,220,140,.8), 0 0 90px rgba(226,69,47,.5); animation: realmIn 1s cubic-bezier(.2,.9,.3,1.2); }
@keyframes realmIn { from { transform: scale(2.6); opacity: 0; filter: blur(12px); } }
.break-sub { color: var(--dim); }
.cards.talents { position: absolute; left: 0; right: 0; top: 380px; z-index: 2; }
.stage.port .cards.talents { top: 520px; padding: 0 20px; }
.break-note { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: var(--dim); z-index: 2; }

/* End */
.end-scr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.end-scr > *:not(.bg) { position: relative; z-index: 2; }
.end-seal { font-size: 150px; line-height: 1; color: #fff; padding: 10px 40px; background: var(--ver2); border-radius: 10px; transform: rotate(-6deg); box-shadow: inset 0 0 0 6px rgba(255,220,200,.3), 0 20px 50px rgba(0,0,0,.7); animation: sealIn .6s cubic-bezier(.2,.9,.3,1.3); }
.end-scr.lost .end-seal { background: #2c2f36; color: #b9b3c4; }
@keyframes sealIn { from { transform: scale(3) rotate(-20deg); opacity: 0; } }
.end-sub { font-size: 22px; }
.end-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.stat { min-width: 120px; padding: 10px 14px; background: rgba(0,0,0,.6); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(239,228,207,.2); display: flex; flex-direction: column; align-items: center; }
.stat small { color: var(--dim); font-size: 12px; } .stat b { font: 700 30px var(--num); } .stat .badge { font-size: 12px; color: #fff; background: var(--ver); padding: 1px 6px; border-radius: 3px; }
.unlock { color: var(--gold); font-size: 20px; animation: sealIn .5s; }
.end-build { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.end-actions { display: flex; gap: 16px; align-items: center; }

/* ===== Overlays ===== */
.overlay { position: absolute; inset: 0; background: rgba(2,3,4,.72); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.overlay-panel { position: relative; max-width: 1160px; max-height: 680px; overflow: auto; padding: 26px 30px; border-radius: 10px; background: linear-gradient(170deg, #1a1f26, #0c0f13); box-shadow: inset 0 0 0 1px rgba(239,228,207,.3), 0 30px 80px rgba(0,0,0,.8); }
.stage.port .overlay-panel { max-width: 690px; max-height: 1200px; }
.overlay-close { position: absolute; right: 10px; top: 6px; font-size: 32px; color: var(--dim); width: 40px; height: 40px; }
.overlay-panel h2 { margin: 0 0 14px; font-size: 40px; text-align: center; }
.help-cols { display: flex; gap: 30px; } .stage.port .help-cols { flex-direction: column; }
.help-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.help-steps { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.75; } .help-steps em { color: var(--gold); font-style: normal; }
.help-els { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; }
.help-el { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.help .btn { display: flex; margin: 16px auto 0; }
.pattern-table { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.pattern-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; padding: 4px 8px; font-size: 13px; border-radius: 4px; background: rgba(255,255,255,.03); }
.pattern-row.hl { background: rgba(226,69,47,.25); }
.pr-name { font-family: var(--brush); font-size: 21px; } .pr-name small { font-family: var(--sans); font-size: 11px; color: var(--gold); }
.pr-hint { color: var(--dim); } .pr-val { text-align: right; font: 700 16px var(--num); }
b.qi { color: var(--shui); } b.mu { color: var(--ver); }
.bag-group { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.bag-el { font-family: var(--brush); font-size: 26px; width: 56px; }
.bag-tiles { display: flex; gap: 6px; flex-wrap: wrap; }
.settings-panel { display: flex; flex-direction: column; gap: 14px; width: 420px; }
.set-row { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.toggle { padding: 6px 18px; border-radius: 999px; border: 1px solid rgba(239,228,207,.4); }
.toggle.on { background: var(--ver); border-color: var(--ver); }
.tip-card { text-align: center; width: 360px; } .tip-card h3 { margin: 18px 0 6px; } .tip-card p { line-height: 1.6; }
.replace { text-align: center; } .replace-row { display: flex; gap: 14px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.replace-btn { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 10px; border-radius: 8px; } .replace-btn:hover { background: rgba(226,69,47,.2); }
.toast { position: absolute; left: 50%; bottom: 210px; transform: translateX(-50%); padding: 10px 22px; border-radius: 999px; background: rgba(10,12,15,.92); box-shadow: inset 0 0 0 1px rgba(239,228,207,.3); font-size: 16px; pointer-events: none; z-index: 60; white-space: nowrap; }
.toast.bad { box-shadow: inset 0 0 0 1px #8a7f95; color: #d9cfe3; }

/* ===== 五行 wheel ===== */
.wheel { position: relative; width: 132px; height: 132px; }
.wheel-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-node { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; font-family: var(--brush); font-size: 20px; line-height: 30px; text-align: center; color: #111; background: var(--c); box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.wheel-node.el-jin { --c: var(--jin); } .wheel-node.el-mu { --c: var(--mu); } .wheel-node.el-shui { --c: var(--shui); } .wheel-node.el-huo { --c: var(--huo); } .wheel-node.el-tu { --c: var(--tu); }
.wheel-node.counter { box-shadow: 0 0 0 3px #fff, 0 0 16px var(--c); transform: scale(1.25); z-index: 2; }
.wheel-node.weak { filter: grayscale(1) brightness(.6); }
.wheel-hint { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font-size: 13px; white-space: nowrap; color: var(--dim); }
.wheel-hint b { font-size: 15px; }

/* ===== Battle ===== */
.battle-scr .bg { filter: brightness(.62); }
.arena-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 76%, rgba(0,0,0,.92)); z-index: 1; pointer-events: none; }
.hero-wrap, .enemy-wrap, .enemy-plate, .score-panel, .lane, .hand-area, .controls, .wheel-slot, .turn-tag { position: absolute; z-index: 3; }
.hero-wrap { left: 30px; top: 96px; width: 300px; height: 380px; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 2px #000) drop-shadow(0 12px 20px rgba(0,0,0,.7)); }
.hero-shield { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font: 700 18px var(--num); color: #dff6ff; padding: 2px 10px; border-radius: 999px; background: rgba(20,90,130,.85); box-shadow: 0 0 16px rgba(69,201,245,.7); opacity: 0; transition: opacity .2s; }
.hero-shield.on { opacity: 1; }
.hero-status, .enemy-status { position: absolute; display: flex; gap: 6px; flex-wrap: wrap; }
.hero-status { left: 0; right: 0; bottom: 34px; justify-content: center; }
.hero-bar { position: absolute; left: 20px; right: 20px; bottom: 0; }
.hero-bar .bar, .enemy-bar .bar { height: 24px; } .hero-bar .bar-text, .enemy-bar .bar-text { line-height: 24px; font-size: 16px; }
.st { font: 700 14px var(--sans); padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.75); box-shadow: inset 0 0 0 1px currentColor; }
.st-armor { color: #d9e2ea; } .st-burn { color: var(--huo); } .st-charge { color: #ff6b5a; animation: blink .6s infinite alternate; } .st-buff { color: #ff8a6a; } .st-sword { color: var(--jin); } .st-spring { color: var(--mu); } .st-thunder { color: #b9a6ff; }
@keyframes blink { to { opacity: .5; } }
.enemy-wrap { right: 40px; top: 92px; width: 440px; height: 380px; }
.enemy-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 2px #000) drop-shadow(0 16px 24px rgba(0,0,0,.8)); transform-origin: 50% 80%; animation: breathe 3.2s ease-in-out infinite; }
.enemy-art.half { animation: none; }
.rank-boss .enemy-wrap { width: 500px; height: 420px; right: 20px; top: 80px; }
.enemy-art.phase2 { filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 22px rgba(255,40,30,.75)); }
@keyframes breathe { 50% { transform: translateY(-6px) scale(1.012); } }
.enemy-status { right: 10px; bottom: 6px; justify-content: flex-end; }
.enemy-intent { position: absolute; left: -10px; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: rgba(10,10,12,.88); box-shadow: inset 0 0 0 2px rgba(239,228,207,.35), 0 6px 16px rgba(0,0,0,.6); }
.enemy-intent.danger { box-shadow: inset 0 0 0 2px var(--ver), 0 0 22px rgba(226,69,47,.7); animation: blink .5s infinite alternate; }
.it-name { font-family: var(--brush); font-size: 22px; margin-right: 4px; }
.it { font: 700 18px var(--num); padding: 1px 6px; border-radius: 4px; }
.it small { font-size: 14px; }
.it-atk { color: #ff7a63; } .it-armor { color: #d9e2ea; } .it-burn { color: var(--huo); } .it-curse { color: #b9a6c9; } .it-charge { color: #ff3b2f; } .it-heal { color: var(--mu); } .it-buff { color: #ff8a6a; } .it-drain { color: #b9a6ff; }
.enemy-plate { right: 40px; top: 480px; width: 440px; }
.enemy-name { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.enemy-name b { font-family: var(--brush); font-weight: 400; font-size: 32px; text-shadow: 0 2px 6px #000; }
.enemy-name small { color: var(--dim); font-size: 13px; }
.e-el { width: 30px; height: 30px; border-radius: 50%; font-family: var(--brush); font-size: 20px; line-height: 30px; text-align: center; color: #111; background: var(--c); align-self: center; }
.e-el.el-jin { --c: var(--jin); } .e-el.el-mu { --c: var(--mu); } .e-el.el-shui { --c: var(--shui); } .e-el.el-huo { --c: var(--huo); } .e-el.el-tu { --c: var(--tu); }
.enemy-trait { margin-top: 4px; font-size: 12px; color: #ffb3a6; }
.hero-wrap .bar-fill { transition: width .25s; }
.bar.drain .bar-ghost { transition: width .45s ease-in .25s; }
.wheel-slot { left: 352px; top: 100px; }
.turn-tag { left: 50%; top: 90px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.turn-tag b { font-family: var(--brush); font-weight: 400; font-size: 26px; } .turn-tag small { font-size: 12px; color: var(--dim); }
.turn-tag small.tribulation { color: #c8b8ff; text-shadow: 0 0 10px #8b6cff; font-size: 14px; font-weight: 700; }
.score-panel { left: 50%; top: 150px; transform: translateX(-50%); width: 400px; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .3; transition: opacity .2s; pointer-events: none; }
.score-panel.preview, .score-panel.live { opacity: 1; }
.sp-pattern { font-family: var(--brush); font-size: 44px; line-height: 1; height: 48px; color: var(--paper); text-shadow: 0 0 20px rgba(0,0,0,.9); white-space: nowrap; }
.sp-pattern.tier-4, .sp-pattern.tier-5 { color: #ffd98a; } .sp-pattern.tier-6 { color: #fff; text-shadow: 0 0 20px var(--gold), 0 0 50px var(--ver); font-size: 54px; }
.sp-row { display: flex; align-items: center; gap: 10px; }
.sp-box { min-width: 130px; height: 64px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), 0 6px 0 rgba(0,0,0,.4); }
.sp-box small { font-size: 11px; opacity: .8; margin-bottom: -4px; }
.sp-box b { font: 700 38px/1 var(--num); }
.sp-qi { background: linear-gradient(180deg, #1f6f99, #124663); } .sp-mult { background: linear-gradient(180deg, #c23a26, #7c1d11); }
.sp-x { font: 700 34px var(--num); color: var(--dim); }
.sp-dmg { font: 700 52px/1 var(--num); color: #fff; min-height: 54px; text-shadow: 0 0 18px rgba(255,255,255,.5), 0 4px 0 rgba(0,0,0,.6); }
.sp-dmg.tier-2 { color: #ffe08a; } .sp-dmg.tier-3 { color: #ff8a5c; font-size: 60px; } .sp-dmg.tier-4 { color: #ff4b4b; font-size: 68px; text-shadow: 0 0 30px #ff2a2a, 0 4px 0 #000; }
.lane { left: 50%; top: 380px; width: 0; height: 0; }
.lane-tile { position: absolute; top: -59px; margin-left: -44px; }
.lane-tile.chain { box-shadow: inset 0 0 0 3px #fff3c4, 0 6px 0 #6f5d43, 0 0 26px rgba(255,236,170,.7); }
.lane-tile.chain-lit { box-shadow: inset 0 0 0 3px #fff, 0 6px 0 #6f5d43, 0 0 40px #ffe7a1; }
.hand-area { left: 96px; right: 350px; bottom: 16px; height: 190px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hand { display: flex; gap: 6px; justify-content: center; align-items: flex-end; height: 140px; padding-top: 22px; max-width: 100%; box-sizing: content-box; }
.hand .tile { zoom: var(--hand-zoom, 1); }
/* Still too many tiles at the smallest size: swipe the row sideways. Extra top room keeps the lifted (selected) tiles visible. */
.hand.scroll { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 46px 6px 4px; margin-top: -24px; }
.preview-line { display: flex; gap: 12px; align-items: baseline; font-size: 16px; min-height: 30px; padding: 2px 16px; border-radius: 999px; background: rgba(0,0,0,.55); margin-bottom: 4px; white-space: nowrap; }
.pv-pattern { font-family: var(--brush); font-weight: 400; font-size: 24px; color: var(--gold); }
.pv-calc { font: 700 18px var(--num); } .pv-dmg { font-size: 22px; color: #fff; }
.pv-fx { font-size: 13px; color: var(--dim); }
.pv-kill { font-family: var(--brush); font-size: 26px; color: #fff; background: var(--ver); padding: 0 10px; border-radius: 4px; animation: blink .45s infinite alternate; }
.controls { right: 18px; bottom: 18px; width: 330px; height: 124px; }
.cast-btn { position: absolute; right: 0; bottom: 0; width: 150px; height: 120px; padding: 0; font-size: 46px; }
.cast-btn .cast-main { line-height: 1; }
.discard-btn { position: absolute; left: 76px; bottom: 0; width: 92px; height: 120px; padding: 0; font-size: 22px; }
.qi-gauge { position: absolute; left: 0; bottom: 0; width: 66px; height: 120px; border-radius: 33px; background: rgba(0,0,0,.7); box-shadow: inset 0 0 0 2px rgba(239,228,207,.3); overflow: hidden; }
.qi-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #7b2bd8, #c86cff); transition: height .35s cubic-bezier(.2,.8,.2,1); }
.qi-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-size: 15px; letter-spacing: .2em; text-shadow: 0 1px 3px #000; }
.qi-gauge.full { box-shadow: inset 0 0 0 2px #e2b8ff, 0 0 26px #a855f7; animation: rageReady 1s ease-in-out infinite; }
.qi-gauge.full .qi-text { font-family: var(--brush); font-size: 26px; letter-spacing: .1em; }
.qi-gauge.on { box-shadow: inset 0 0 0 3px #fff, 0 0 40px #d08bff, 0 0 80px #a855f7; }
.qi-gauge.on .qi-fill { background: linear-gradient(0deg, #ff3b2f, #ffd06b); }
@keyframes rageReady { 50% { box-shadow: inset 0 0 0 2px #e2b8ff, 0 0 46px #c26bff; } }
.rage-armed .cast-btn { background: linear-gradient(160deg, #ffb347, #e2452f); box-shadow: inset 0 0 0 3px #fff, 0 6px 0 #6d1a10, 0 0 40px #ff8a3a; }
.rage-armed .cast-btn .cast-main::before { content: '怒·'; }
.busy .hand .tile, .busy .controls { pointer-events: none; }
.busy .hand { filter: brightness(.7); }
.defeated { filter: grayscale(1) brightness(.6); transition: filter 1.2s; }

/* pile buttons sit bottom-left of the stage, outside the controls box */
.pile-dock { position: absolute; left: 18px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.pile-btn { width: 64px; height: 50px; border-radius: 8px; background: rgba(10,12,15,.8); box-shadow: inset 0 0 0 1px rgba(239,228,207,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--brush); font-size: 22px; line-height: 1; }
.pile-btn small { font-family: var(--sans); font-size: 10px; color: var(--dim); }
.pile-draw { font: 700 20px var(--num); }

/* Float texts */
.float-text { position: absolute; z-index: 45; pointer-events: none; white-space: nowrap; font: 700 22px var(--num); text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.8); }
.ft-tile { font-size: 30px; } .ft-tag { font: 700 16px var(--sans); color: #fff; background: var(--ver); padding: 0 6px; border-radius: 3px; text-shadow: none; } .ft-tag.tag-被克 { background: #555; }
.ft-tag.tag-昼 { background: #d9921a; } .ft-tag.tag-夜 { background: #2d4fa3; }
.ft-fx { font: 700 15px var(--sans); }
.ft-mult { color: #ff7a63; font-size: 18px; }
.ft-relic { font: 700 22px var(--sans); color: var(--gold); background: rgba(0,0,0,.7); padding: 2px 10px; border-radius: 4px; text-shadow: none; box-shadow: inset 0 0 0 1px var(--gold); }
.ft-relic.ft-x { color: #fff; background: var(--ver2); box-shadow: inset 0 0 0 1px #ffd2c4, 0 0 20px rgba(226,69,47,.8); font-size: 26px; }
.ft-crit { font-family: var(--brush); font-size: 54px; color: #fff; background: var(--ver); padding: 0 10px; border-radius: 6px; transform: rotate(-8deg); text-shadow: none; }
.ft-dmg { font-size: 56px; color: #fff; -webkit-text-stroke: 2px #000; }
.ft-dmg.tier-2 { font-size: 72px; color: #ffe08a; } .ft-dmg.tier-3 { font-size: 92px; color: #ff9b62; } .ft-dmg.tier-4 { font-size: 112px; color: #ff5040; text-shadow: 0 0 30px #ff2a2a, 0 4px 0 #000; }
.ft-dmg.crit { color: #ff4433; }
.ft-dmg-small { font-size: 28px; color: #ffe9c2; }
.ft-dmg-player { font-size: 40px; color: #ff4f4f; -webkit-text-stroke: 1px #000; }
.ft-heal { font-size: 34px; color: var(--mu); } .ft-shield { font-size: 26px; color: #9fe6ff; } .ft-armor { font-size: 22px; color: #d9e2ea; }
.ft-move { font-family: var(--brush); font-size: 46px; color: var(--paper); } .ft-move.danger { color: #ff6b5a; }
.fx-flash { position: absolute; inset: 0; z-index: 44; pointer-events: none; mix-blend-mode: screen; }
.fx-comet { position: absolute; left: 0; top: 0; z-index: 43; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0%, var(--c) 40%, transparent 72%); box-shadow: 0 0 30px var(--c), 0 0 60px var(--c); }
.fx-bolt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 44; pointer-events: none; filter: drop-shadow(0 0 8px #b6a4ff); }
.banner { position: absolute; left: 50%; top: 44%; z-index: 30; width: 100%; padding: 18px 0; text-align: center; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.85) 20%, rgba(0,0,0,.85) 80%, transparent); }
.banner-title { font-size: 76px; line-height: 1.1; color: #fff; }
.banner.rank-boss .banner-title { color: #ff8068; text-shadow: 0 0 30px rgba(226,69,47,.8); }
.banner-sub { font-size: 18px; color: var(--dim); }
.cutin-dim { position: absolute; inset: 0; z-index: 34; background: rgba(0,0,0,.72); pointer-events: none; }
.cutin { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; background: linear-gradient(100deg, #2a0705 0%, #8c1d10 40%, #f0573b 50%, #8c1d10 60%, #120303 100%); }
.cutin::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 40px, rgba(255,255,255,.06) 40px 44px); animation: speedlines .3s linear infinite; }
@keyframes speedlines { to { background-position: 88px 0; } }
.cutin-hero { position: absolute; left: 4%; top: 2%; height: 130%; filter: drop-shadow(0 0 30px #000); }
.cutin-text { position: absolute; left: 52%; top: 50%; margin: -150px 0 0 -110px; font-size: 260px; line-height: 1; color: #fff; text-shadow: 0 0 50px #ff9a6a, 0 8px 0 #4a0a03; opacity: 0; z-index: 1; }
.cutin-sub { position: absolute; left: 66%; top: 62%; font-size: 52px; color: #ffe0c8; text-shadow: 0 0 20px #000; opacity: 0; z-index: 1; white-space: nowrap; }
.ft-rage { font: 700 60px var(--num); color: #fff; background: linear-gradient(90deg, #ff3b2f, #ffb347); padding: 0 16px; border-radius: 8px; text-shadow: none; }
.ft-link { font-family: var(--brush); font-size: 34px; } .ft-link.sheng { color: #ffe7a1; } .ft-link.ke { color: #ff5a4a; }
.hand .tile.ke-link, .lane-tile.ke-link { box-shadow: inset 0 0 0 3px #ff5a4a, 0 6px 0 #6f5d43, 0 0 24px rgba(255,80,60,.7); }
.pv-parts { font-size: 14px; color: var(--paper); }
.kill-slash { position: absolute; z-index: 41; width: 900px; height: 10px; background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 30px #fff, 0 0 60px #ffd38a; pointer-events: none; }
.kill-seal { position: absolute; left: 50%; top: 42%; z-index: 42; font-size: 220px; line-height: 1; color: #fff; padding: 0 30px 10px; background: var(--ver2); border-radius: 12px; box-shadow: inset 0 0 0 8px rgba(255,220,200,.35), 0 20px 60px rgba(0,0,0,.7); pointer-events: none; }
.kill-best { position: absolute; left: 50%; top: 70%; z-index: 42; transform: translateX(-50%); font-size: 22px; padding: 6px 20px; background: rgba(0,0,0,.8); border-radius: 999px; white-space: nowrap; }
.kill-best b { font: 700 32px var(--num); color: var(--gold); }
.kill-best.record { box-shadow: inset 0 0 0 2px var(--gold), 0 0 30px rgba(242,197,92,.6); }

/* ===== Portrait (stage is 720 wide, height follows the phone) ===== */
.stage.port .hud { height: 168px; flex-wrap: wrap; align-content: flex-start; padding-top: 12px; }
.stage.port .hud-mid { order: 3; width: 100%; display: flex; justify-content: center; margin-top: 12px; }
.stage.port .hud-who { min-width: 0; }
.stage.port .hud-id b { font-size: 30px; } .stage.port .realm { font-size: 18px; }
.stage.port .hud-who .bar { width: 170px; height: 26px; } .stage.port .hud-who .bar-text { font-size: 18px; line-height: 26px; }
.stage.port .gold { font-size: 28px; } .stage.port .act-tag { font-size: 18px; }
.stage.port .icon-btn { width: 54px; height: 54px; font-size: 26px; }
.stage.port .relic { width: 70px; height: 70px; } .stage.port .relic-glyph { font-size: 38px; } .stage.port .relic-name { font-size: 15px; bottom: -22px; }
.stage.port .relic-hint { display: none; }
.stage.port .battle-scr .enemy-wrap { left: 150px; right: 90px; width: auto; top: 200px; bottom: 690px; height: auto; }
.stage.port .battle-scr.rank-boss .enemy-wrap { left: 110px; right: 84px; top: 190px; }
.stage.port .enemy-intent { left: 0; top: -6px; } .stage.port .it-name { font-size: 28px; } .stage.port .it { font-size: 26px; }
.stage.port .enemy-plate { left: 24px; right: 24px; width: auto; top: auto; bottom: 600px; }
.stage.port .enemy-name b { font-size: 40px; } .stage.port .enemy-name small { font-size: 18px; } .stage.port .enemy-trait { font-size: 17px; }
.stage.port .hero-wrap { left: 0; top: auto; bottom: 350px; width: 210px; height: 240px; }
.stage.port .hero-bar { left: 8px; right: 8px; }
.stage.port .wheel-slot { left: 12px; top: 196px; }
.stage.port .turn-tag { left: auto; right: 22px; top: 176px; transform: none; align-items: flex-end; }
.stage.port .turn-tag b { font-size: 34px; } .stage.port .turn-tag small { font-size: 18px; }
.stage.port .score-panel { left: 220px; right: 10px; width: auto; transform: none; top: auto; bottom: 380px; }
.stage.port .sp-pattern { font-size: 52px; height: 56px; }
.stage.port .lane { left: 360px; top: auto; bottom: 780px; }
.stage.port .hand-area { left: 4px; right: 4px; top: auto; bottom: 136px; height: 210px; }
.stage.port .hand { gap: 4px; height: 150px; }
.stage.port .hand .tile { width: 92px; height: 122px; }
.stage.port .preview-line { font-size: 22px; max-width: 708px; overflow: hidden; } .stage.port .pv-fx { display: none; } .stage.port .pv-pattern { font-size: 32px; } .stage.port .pv-calc { font-size: 26px; } .stage.port .pv-dmg { font-size: 30px; } .stage.port .pv-fx { font-size: 18px; }
.stage.port .controls { left: 16px; right: 16px; bottom: 16px; width: auto; height: 110px; }
.stage.port .controls .cast-btn { width: 230px; height: 108px; font-size: 52px; }
.stage.port .controls .discard-btn { left: auto; right: 246px; bottom: 0; width: 150px; height: 108px; font-size: 28px; }
.stage.port .discard-btn small { font-size: 16px; }
.stage.port .qi-gauge { left: 0; bottom: 0; width: 270px; height: 108px; border-radius: 14px; }
.stage.port .qi-gauge .qi-fill { right: auto; top: 0; height: 100% !important; width: var(--w, 0%); }
.stage.port .qi-text { writing-mode: horizontal-tb; font-size: 24px; }
.stage.port .qi-gauge.full .qi-text { font-size: 38px; }
.stage.port .pile-dock { left: auto; right: 12px; bottom: auto; top: 250px; flex-direction: column; }
.stage.port .pile-btn { width: 70px; height: 56px; font-size: 26px; } .stage.port .pile-btn small { font-size: 14px; }
.stage.port .st { font-size: 20px; }
.stage.port .float-text.ft-relic { font-size: 30px; } .stage.port .ft-fx { font-size: 22px; } .stage.port .ft-tile { font-size: 40px; }
.stage.port .map-title { top: 180px; } .stage.port .map-title .brush { font-size: 60px; } .stage.port .map-title small { font-size: 20px; } .stage.port .act-no { font-size: 18px; }
.stage.port .map-node { width: 86px; height: 86px; margin: -43px 0 0 -43px; } .stage.port .node-glyph { font-size: 44px; }
.stage.port .map-node.k-boss { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
.stage.port .node-el { width: 30px; height: 30px; line-height: 30px; font-size: 17px; }
.stage.port .map-legend { font-size: 18px; gap: 14px; } .stage.port .map-legend i { font-size: 24px; }
.stage.port .banner-title { font-size: 64px; } .stage.port .banner-sub { font-size: 22px; }
.stage.port .cutin-text { font-size: 200px; left: 40%; } .stage.port .cutin-sub { left: 30%; top: 64%; font-size: 44px; }
.stage.port .kill-seal { font-size: 170px; }
.stage.port .kill-best { font-size: 26px; }
.stage.port .toast { font-size: 24px; bottom: 300px; }
/* text-heavy panels */
.stage.port .overlay-panel { padding: 30px 26px; }
.stage.port .help-steps { font-size: 22px; } .stage.port .help-el { font-size: 20px; } .stage.port .help-els { grid-template-columns: 1fr; }
.stage.port .pattern-row { grid-template-columns: 130px 1fr 110px; font-size: 18px; } .stage.port .pr-name { font-size: 26px; } .stage.port .pr-val { font-size: 22px; }
.stage.port .card { width: 214px; min-height: 230px; } .stage.port .card-title { font-size: 22px; } .stage.port .card-desc { font-size: 19px; } .stage.port .card-rarity { font-size: 16px; } .stage.port .price { font-size: 26px; }
.stage.port .event-text { font-size: 24px; } .stage.port .event-opt b { font-size: 26px; } .stage.port .event-opt span { font-size: 20px; } .stage.port .event-opt { flex-direction: column; gap: 4px; padding: 18px 22px; }
.stage.port .event-result p { font-size: 24px; }
.stage.port .panel-scr h2 { font-size: 26px; }
.stage.port .md-blurb { font-size: 24px; } .stage.port .md-passive { font-size: 20px; } .stage.port .md-stats { font-size: 18px; } .stage.port .md-name { font-size: 62px; }
.stage.port .btn { font-size: 24px; } .stage.port .btn.ink { font-size: 22px; } .stage.port .btn small { font-size: 16px; }
.stage.port .chip { font-size: 20px; padding: 8px 14px; }
.stage.port .title-records { font-size: 20px; text-align: center; }
.stage.port .set-row { font-size: 24px; } .stage.port .settings-panel { width: 560px; }
.stage.port .stat small { font-size: 16px; } .stage.port .stat b { font-size: 38px; }
.stage.port .end-sub { font-size: 26px; } .stage.port .unlock { font-size: 24px; }
.stage.port .tip-card { width: 520px; font-size: 22px; }
.stage.port .reward-block h3 { font-size: 20px; }
.stage.port .wheel-hint { font-size: 18px; } .stage.port .wheel-hint b { font-size: 20px; }
.stage.port .bag-el { font-size: 32px; }

@media (prefers-reduced-motion: reduce) {
  .enemy-art, .map-node.reach, .break-rays, .qi-gauge.full, .enemy-intent.danger, .pv-kill { animation: none !important; }
}

.battle-scr .relic-hint { display: none; }
.map-legend .legend-tip { width: 100%; text-align: center; color: rgba(239,228,207,.45); }

.stage.port .btn.seal { font-size: 38px; padding: 16px 52px; }
.stage.port .btn.seal.big { font-size: 46px; }
.stage.port .cards.talents .card { width: 216px; }
.stage.port .break-realm { top: 140px; } .stage.port .break-sub { font-size: 22px; } .stage.port .break-note { font-size: 22px; }
.stage.port .controls .cast-btn { font-size: 52px; padding: 0; }

/* ===== Story ===== */
.story-scr .bg { filter: brightness(.7) saturate(.9); animation: storyPan 30s linear infinite alternate; }
@keyframes storyPan { from { transform: scale(1.05) translateX(-1.5%); } to { transform: scale(1.12) translateX(1.5%); } }
.story-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.25) 80%); }
.story-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 760px; max-width: calc(100% - 60px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; }
.story-act { font-size: 15px; letter-spacing: .6em; color: var(--ver); }
.story-title { font-size: 92px; line-height: 1; margin: 0 0 10px; text-shadow: 0 0 40px rgba(0,0,0,.9); animation: realmIn .9s cubic-bezier(.2,.9,.3,1.2); }
.story-line, .story-goal, .story-hint, .story-go { opacity: 0; animation: lineIn .9s ease forwards; }
.story-line { font-size: 21px; line-height: 1.8; margin: 0; color: var(--paper); text-shadow: 0 2px 8px #000; }
.story-goal { font-size: 19px; color: var(--gold); margin: 10px 0 0; }
.story-hint { font-size: 15px; color: var(--dim); margin: 0; }
.story-go { margin-top: 18px; }
.story-scr.instant .story-line, .story-scr.instant .story-goal, .story-scr.instant .story-hint, .story-scr.instant .story-go { animation-duration: .01s; animation-delay: 0s !important; }
@keyframes lineIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.stage.port .story-title { font-size: 104px; } .stage.port .story-line { font-size: 30px; } .stage.port .story-goal { font-size: 28px; } .stage.port .story-hint { font-size: 22px; } .stage.port .story-act { font-size: 22px; }
.story-quote { max-width: 760px; margin: 0; padding: 10px 20px; font-size: 17px; line-height: 1.7; color: var(--paper); text-align: center; border-left: 3px solid var(--ver); border-right: 3px solid var(--ver); background: rgba(0,0,0,.5); font-style: italic; }
.stage.port .story-quote { font-size: 22px; }

/* Boss dialogue */
.dialogue { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 900px; max-width: calc(100% - 40px); z-index: 46; padding: 22px 30px 26px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, rgba(14,10,10,.96), rgba(5,4,4,.96)); box-shadow: inset 0 0 0 2px rgba(226,69,47,.65), 0 20px 60px rgba(0,0,0,.8); }
.dlg-name { position: absolute; top: -26px; left: 24px; font-size: 38px; color: #fff; background: var(--ver2); padding: 0 16px; border-radius: 4px; }
.dlg-text { margin: 8px 0 0; font-size: 22px; line-height: 1.7; min-height: 76px; }
.dlg-more { position: absolute; right: 18px; bottom: 8px; color: var(--dim); animation: blink .8s infinite alternate; }
.stage.port .dialogue { bottom: 160px; } .stage.port .dlg-text { font-size: 28px; } .stage.port .dlg-more { font-size: 18px; }
.enemy-lore { margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(239,228,207,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage.port .enemy-lore { font-size: 17px; }
.assist-card { position: absolute; left: 50%; top: 22%; z-index: 46; display: flex; gap: 18px; align-items: center; width: 640px; max-width: calc(100% - 40px); padding: 18px 24px; border-radius: 10px; background: rgba(6,10,12,.94); box-shadow: inset 0 0 0 2px var(--gold), 0 0 50px rgba(242,197,92,.35); pointer-events: none; }
.assist-glyph { flex: none; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 52px; color: #ffe39a; background: radial-gradient(circle, #3a2a10, #100b04); box-shadow: inset 0 0 0 2px var(--gold); }
.assist-body b { font-size: 20px; color: var(--gold); } .assist-body p { margin: 6px 0; font-size: 17px; line-height: 1.6; } .assist-body small { color: var(--mu); font-size: 14px; }
.stage.port .assist-body p { font-size: 24px; } .stage.port .assist-body b { font-size: 26px; } .stage.port .assist-body small { font-size: 20px; }

/* Bonds */
.bond-chips { display: inline-flex; gap: 4px; }
.bond-chip { width: 30px; height: 30px; border-radius: 50%; font-family: var(--brush); font-size: 19px; line-height: 30px; text-align: center; color: var(--paper); background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(239,228,207,.45); }
.bond-chip.done { color: #ffe39a; box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px rgba(242,197,92,.5); }
.stage.port .bond-chip { width: 40px; height: 40px; line-height: 40px; font-size: 26px; }
.map-node.k-bond { background: radial-gradient(circle at 40% 35%, #3b2f10, #120d04); box-shadow: inset 0 0 0 2px var(--gold), 0 0 22px rgba(242,197,92,.35); }
.map-node.k-bond .node-glyph { color: #ffe39a; }
.node-label.bond-label { bottom: -26px; font-size: 18px; color: #ffe39a; }
.bond-kicker { font-size: 15px; letter-spacing: .5em; color: var(--gold); }
.bond-event .event-glyph { color: #ffd77a; text-shadow: 0 0 40px rgba(242,197,92,.6); }
.bond-note { color: var(--mu) !important; font-size: 16px !important; }
.stage.port .bond-kicker { font-size: 20px; } .stage.port .bond-note { font-size: 22px !important; }

/* Ending */
.jie-seed { position: absolute; left: 50%; top: 30%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 40% 35%, #fff, #c9b8ff 30%, #45c9f5 55%, #1b1f4a 75%); box-shadow: 0 0 60px #8b6cff, 0 0 140px #45c9f5; animation: seed 1.6s ease-in-out infinite; }
@keyframes seed { 50% { transform: scale(1.12); box-shadow: 0 0 90px #b6a4ff, 0 0 200px #45c9f5; } }
.ending-head { position: absolute; left: 0; right: 0; top: 34px; text-align: center; z-index: 2; }
.ending-head h1 { margin: 0; font-size: 56px; } .ending-head p { margin: 4px 0; font-size: 18px; }
.ending-choices { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; gap: 18px; z-index: 2; }
.ending-opt { width: 330px; min-height: 210px; padding: 20px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: rgba(6,8,12,.9); box-shadow: inset 0 0 0 1px rgba(239,228,207,.35); transition: transform .15s, box-shadow .15s; }
.ending-opt:hover:not(:disabled) { transform: translateY(-8px); box-shadow: inset 0 0 0 2px var(--gold), 0 0 40px rgba(242,197,92,.35); }
.ending-opt b { font-size: 52px; font-weight: 400; line-height: 1; } .ending-opt span { font-size: 18px; color: var(--gold); } .ending-opt small { font-size: 14px; line-height: 1.6; color: var(--dim); }
.ending-opt.locked { opacity: .5; }
.stage.port .ending-choices { flex-direction: column; left: 30px; right: 30px; transform: none; bottom: 40px; }
.stage.port .ending-opt { width: auto; min-height: 0; } .stage.port .ending-opt span { font-size: 24px; } .stage.port .ending-opt small { font-size: 19px; } .stage.port .ending-head p { font-size: 24px; } .stage.port .jie-seed { top: 25%; }
.ending-text p { font-size: 18px; line-height: 1.8; margin: 0 0 8px; }
.ending-text.inline { max-width: 820px; text-align: center; }
.ending-text.inline p { opacity: 0; animation: lineIn .9s ease forwards; font-size: 17px; margin: 0 0 4px; text-shadow: 0 2px 6px #000; }
.stage.port .ending-text.inline p { font-size: 23px; }
.end-scr.won .end-seal { font-size: 120px; }
.deeds { width: 720px; max-width: 100%; } .deeds h3 { color: var(--gold); font-weight: 400; letter-spacing: .4em; }
.deed-list { padding-left: 22px; line-height: 1.9; font-size: 16px; } .stage.port .deed-list, .stage.port .ending-text p { font-size: 22px; }
.deed-bonds { display: flex; flex-wrap: wrap; gap: 4px; }

/* Codex */
.codex { width: 1080px; max-width: 100%; }
.codex-endings { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.codex-ending { width: 200px; padding: 10px; border-radius: 8px; text-align: center; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(239,228,207,.2); display: flex; flex-direction: column; }
.codex-ending.got { box-shadow: inset 0 0 0 2px var(--gold); } .codex-ending b { font-size: 34px; font-weight: 400; } .codex-ending small { color: var(--dim); }
.codex-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.stage.port .codex-grid { grid-template-columns: repeat(3, 1fr); }
.codex-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 6px; background: rgba(0,0,0,.35); text-align: center; }
.codex-card img { width: 100%; height: 100px; object-fit: contain; }
.codex-card b { font-family: var(--brush); font-weight: 400; font-size: 20px; } .codex-card small { font-size: 11px; line-height: 1.4; color: var(--dim); }
.codex-card.unknown img { filter: brightness(0); opacity: .5; }
.stage.port .codex-card small { font-size: 15px; } .stage.port .codex-card b { font-size: 26px; }

/* ===== 局外成长 ===== */
.daily-btn small, .hub-btn small, .pact-btn small { display: block; }
.hub-btn { border-color: rgba(242,197,92,.6); }
.hub-btn small { color: var(--gold); }
.toast.ach { box-shadow: inset 0 0 0 2px var(--gold), 0 0 30px rgba(242,197,92,.5); color: #ffe39a; font-weight: 700; }
.heat-tag { color: #c8b8ff; border-color: rgba(168,85,247,.6); }
.md-mastery { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: 14px; }
.md-mastery small { grid-column: 1 / -1; color: var(--dim); }
.mastery-lv { color: var(--gold); font-weight: 700; }
.mastery-bar { height: 10px; border-radius: 5px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(239,228,207,.25); overflow: hidden; min-width: 120px; }
.mastery-fill { height: 100%; background: linear-gradient(90deg, #b8862b, #ffd77a); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.pact-btn { align-self: flex-start; border-color: rgba(168,85,247,.55); }
.pact-btn small { color: #c8b8ff; }
.stage.port .md-mastery { font-size: 20px; } .stage.port .pact-btn { align-self: stretch; }

.pacts { width: 720px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.pacts .btn { align-self: center; }
.pact-head { display: flex; justify-content: center; gap: 24px; font-size: 22px; } .pact-head b { color: #c8b8ff; } .pact-head span { color: var(--gold); }
.pact-list { display: flex; flex-direction: column; gap: 6px; }
.pact-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; padding: 8px 14px; border-radius: 6px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(239,228,207,.15); }
.pact-row.on { box-shadow: inset 0 0 0 2px #a855f7; background: rgba(60,20,90,.35); }
.pact-name b { display: block; font-size: 18px; } .pact-name small { color: var(--dim); font-size: 12px; }
.pact-desc { font-size: 15px; color: var(--paper); }
.pact-ctrl { display: flex; align-items: center; gap: 8px; font: 700 16px var(--num); }
.pact-pip { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(239,228,207,.4); font-size: 20px; }
.pact-pip:disabled { opacity: .3; }
.stage.port .pact-row { grid-template-columns: 1fr auto; } .stage.port .pact-desc { grid-column: 1 / -1; grid-row: 2; font-size: 20px; } .stage.port .pact-name b { font-size: 24px; } .stage.port .pact-pip { width: 48px; height: 48px; }

.daily { width: 620px; max-width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.daily-row { display: flex; gap: 16px; align-items: center; text-align: left; } .daily-row img { width: 140px; height: 190px; object-fit: contain; } .daily-row b { font-size: 36px; font-weight: 400; }
.stage.port .daily p { font-size: 22px; }

.hub { width: 1120px; max-width: 100%; }
.hub-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; } .hub-head h2 { margin: 0 !important; }
.daoguo { font: 700 26px var(--num); color: var(--gold); } .hub-stats { font-size: 13px; color: var(--dim); }
.hub-tabs { display: flex; gap: 6px; margin: 14px 0; }
.hub-tab { padding: 8px 22px; border-radius: 4px; font-family: var(--brush); font-size: 24px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(239,228,207,.2); }
.hub-tab.on { background: var(--ver2); box-shadow: inset 0 0 0 1px #ffb3a6; }
.tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tree-col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .tree-col h3 { margin: 0; text-align: center; font-size: 26px; font-weight: 400; color: var(--gold); }
.tree-node { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; text-align: left; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(239,228,207,.2); }
.tree-node + .tree-node::before { content: ''; position: absolute; left: 50%; top: -11px; width: 2px; height: 10px; background: rgba(239,228,207,.3); }
.tree-node b { font-size: 17px; } .tree-node span { font-size: 13px; color: var(--dim); line-height: 1.5; } .tree-node small { font: 700 15px var(--num); color: var(--gold); }
.tree-node.owned { box-shadow: inset 0 0 0 2px var(--mu); background: rgba(20,60,40,.4); } .tree-node.owned small { color: var(--mu); }
.tree-node.can { box-shadow: inset 0 0 0 2px var(--gold), 0 0 18px rgba(242,197,92,.35); animation: nodePulse 1.6s ease-in-out infinite; }
.tree-node.can:hover { transform: translateY(-2px); }
.tree-node.locked { opacity: .45; }
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ach { padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 2px; opacity: .55; }
.ach.got { opacity: 1; box-shadow: inset 0 0 0 1px var(--gold); } .ach b { font-size: 15px; } .ach span { font-size: 12px; color: var(--dim); } .ach small { font: 700 13px var(--num); color: var(--gold); }
.mastery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mastery-card { display: flex; gap: 10px; padding: 10px; border-radius: 8px; background: rgba(0,0,0,.35); } .mastery-card img { width: 80px; height: 120px; object-fit: contain; flex: none; }
.mastery-card b { font-size: 26px; font-weight: 400; } .mastery-card ol { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--dim); line-height: 1.5; } .mastery-card li.done { color: var(--mu); }
.stage.port .tree, .stage.port .mastery-grid { grid-template-columns: 1fr; } .stage.port .ach-grid { grid-template-columns: 1fr 1fr; }
.stage.port .tree-node b, .stage.port .ach b { font-size: 22px; } .stage.port .tree-node span, .stage.port .ach span, .stage.port .mastery-card ol { font-size: 18px; } .stage.port .hub-stats { font-size: 18px; }

/* End screen with settlement */
.end-scr { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 24px 40px; padding: 30px 40px; }
.end-left { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 640px; }
.end-actions { width: 100%; justify-content: center; }
.settle { width: 400px; padding: 18px 22px; border-radius: 10px; background: rgba(6,8,12,.88); box-shadow: inset 0 0 0 1px rgba(242,197,92,.5); display: flex; flex-direction: column; gap: 6px; }
.settle h3 { margin: 0; text-align: center; font-size: 34px; font-weight: 400; color: var(--gold); }
.settle-line { display: flex; justify-content: space-between; font-size: 15px; opacity: 0; animation: lineIn .5s ease forwards; }
.settle-line b { font-family: var(--num); color: var(--gold); } .settle-line.mult b { color: #c8b8ff; } .settle-line.ach b { color: #ffe39a; }
.settle-sum { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0; padding-top: 8px; border-top: 1px solid rgba(239,228,207,.2); font-size: 14px; color: var(--dim); }
.settle-total { font: 700 44px var(--num); color: #ffe39a; text-shadow: 0 0 20px rgba(242,197,92,.6); }
.mastery-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: 14px; } .mastery-row small { grid-column: 1 / -1; color: var(--dim); }
.goal-row { font-size: 14px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.4); display: flex; flex-direction: column; } .goal-row small { color: var(--dim); }
.goal-row.ready { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.settle .btn { align-self: center; }
.endless-btn { background: linear-gradient(160deg, #7b2bd8, #3b1270) !important; box-shadow: inset 0 0 0 3px rgba(220,190,255,.35), 0 6px 0 #22093f, 0 0 30px rgba(168,85,247,.5) !important; font-size: 26px !important; }
.end-scr .end-seal { font-size: 110px; } .end-scr .ending-text.inline p { font-size: 15px; }
.stage.port .end-scr { flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 24px; gap: 16px; }
.stage.port .settle { width: 100%; } .stage.port .settle-line, .stage.port .mastery-row, .stage.port .goal-row { font-size: 20px; } .stage.port .end-scr .ending-text.inline p { font-size: 19px; }
.stage.port .end-actions { flex-wrap: wrap; }
.settle-line { gap: 10px; } .settle-line span { flex: 1; min-width: 0; } .settle-line b { flex: none; }

/* 本门符 */
.tile.sp { background: linear-gradient(170deg, #fff6dc 0%, #f0d48a 100%); box-shadow: inset 0 0 0 2px #c9952e, 0 6px 0 #6f5d43, 0 10px 18px rgba(0,0,0,.55), 0 0 16px rgba(242,197,92,.45); }
.tile-sp { position: absolute; left: -6px; top: -8px; width: 30px; height: 30px; border-radius: 6px; transform: rotate(-8deg); display: flex; align-items: center; justify-content: center; font-family: var(--brush); font-size: 20px; color: #fff; background: var(--ver2); box-shadow: 0 0 0 2px #fff3d6, 0 2px 6px rgba(0,0,0,.5); }
.tile.small .tile-sp { width: 18px; height: 18px; font-size: 12px; left: -4px; top: -5px; }
.qi-mark { position: absolute; left: 0; right: 0; bottom: var(--mark, 100%); height: 2px; background: #fff; opacity: .6; pointer-events: none; }
.stage.port .qi-mark { top: 0; bottom: 0; left: var(--mark, 100%); right: auto; width: 2px; height: auto; }
.md-kit { display: flex; flex-direction: column; gap: 6px; }
.kit-item { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--dim); }
.kit-item b { color: var(--gold); margin-right: 6px; }
.kit-rage { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; background: radial-gradient(circle, #ff6a3d, #7b1a0e); box-shadow: 0 0 14px rgba(255,90,44,.6); }
.stage.port .kit-item { font-size: 19px; }
.select-scr .md-passive { font-size: 14px; line-height: 1.55; }
.md-diff { margin-left: 12px; font-family: var(--sans); font-size: 15px !important; color: var(--gold) !important; letter-spacing: .05em; }
.select-scr .md-body { gap: 8px; } .select-scr .md-blurb { font-size: 16px; line-height: 1.5; } .select-scr .md-passive { line-height: 1.45; } .select-scr .kit-item { font-size: 13px; }
.stage.land .select-scr .method-detail { bottom: 16px; }
.stage.land .select-scr .md-body { margin-bottom: 104px; } .stage.land .select-go { bottom: 20px; }

/* ===== 复盘、此行打法、契合与路线风险 ===== */
.play-style { font-size: 14px; color: var(--dim); letter-spacing: .05em; }
.play-style b { color: var(--gold); font-weight: 700; }
.fit-tag { position: absolute; top: -10px; right: -6px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #1b1406; background: var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.5); z-index: 2; }
.reroll-btn small, .panel-scr .btn.seal small { display: block; font-family: var(--sans); font-size: 12px; opacity: .8; letter-spacing: 0; }
.node-threat { position: absolute; left: -10px; bottom: -8px; padding: 0 5px; border-radius: 8px; font: 700 12px/18px var(--num); color: var(--paper); background: rgba(0,0,0,.75); box-shadow: inset 0 0 0 1px rgba(239,228,207,.3); white-space: nowrap; }
.node-threat.warn { color: #ffd77a; box-shadow: inset 0 0 0 1px rgba(255,215,122,.6); }
.node-threat.danger { color: #fff; background: var(--ver2); box-shadow: 0 0 10px rgba(226,69,47,.7); }
.node-loot { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; font-size: 11px; line-height: 16px; color: #1b1406; background: var(--gold); white-space: nowrap; }
.stage.port .node-threat { font-size: 16px; line-height: 22px; left: -14px; } .stage.port .node-loot { font-size: 15px; line-height: 20px; top: -16px; }
.review { width: 400px; max-height: 470px; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; border-radius: 10px; background: rgba(6,8,12,.88); box-shadow: inset 0 0 0 1px rgba(239,228,207,.25); display: flex; flex-direction: column; gap: 10px; }
.review h3 { margin: 0; font-size: 28px; text-align: center; }
.near-miss { font-size: 17px; line-height: 1.5; text-align: center; color: var(--paper); }
.near-miss b { display: block; font-family: var(--brush); font-size: 30px; color: var(--ver); }
.near-miss small { display: block; color: var(--dim); font-size: 13px; }
.review-route { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.route-chip { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 7px; border-radius: 10px; background: rgba(255,255,255,.08); font-family: var(--brush); font-size: 16px; }
.route-chip small { font: 700 12px var(--num); color: var(--dim); }
.route-chip.k-elite { box-shadow: inset 0 0 0 1px var(--ver); } .route-chip.lost { background: var(--ver2); } .route-chip.lost small { color: #fff; }
.finding { padding: 8px 10px; border-left: 3px solid var(--ver); background: rgba(255,255,255,.04); border-radius: 0 6px 6px 0; }
.finding b { font-size: 16px; color: var(--paper); }
.finding p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--dim); }
.finding p.try { color: var(--paper2, #e6d6b3); } .finding p.try span { color: var(--gold); font-weight: 700; }
.stage.port .review { width: 100%; max-height: none; } .stage.port .near-miss { font-size: 22px; } .stage.port .near-miss small, .stage.port .finding p, .stage.port .review-route { font-size: 18px; } .stage.port .finding b { font-size: 21px; } .stage.port .play-style { font-size: 19px; }
/* The end screen can now be taller than the stage (复盘 + 道果): let it scroll. */
.end-scr { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.stage.port .end-scr { justify-content: flex-start; }
.end-right { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.stage.land .end-scr.lost .end-seal { font-size: 76px; padding: 4px 28px; }
.stage.land .end-scr.lost .end-left { gap: 8px; }
.stage.land .end-scr.lost .review { width: 100%; max-height: 300px; box-sizing: border-box; }
.stage.port .end-right { width: 100%; }