/* ===== 星辰城 · 样式 ===== */
:root {
  --paper: #efe5cf;
  --paper2: #e3d6b8;
  --paper3: #d6c6a2;
  --ink: #2a241c;
  --ink2: #4d4232;
  --ink3: #7b6d55;
  --red: #8b2e1f;
  --red2: #b2452e;
  --blue: #2c3e5a;
  --teal: #3d6a6a;
  --gold: #b08a3e;
  --gold2: #f0c35a;
  --violet: #55407a;
  --dark: #15120e;
  --serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --brush: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', 'Noto Serif SC', serif;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--dark); color: var(--ink); font-family: var(--serif); overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
b { font-weight: 600; }
.muted { color: var(--ink3); }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }

.paper, .date-plate, .choice-card, .card-front, .modal-box, .outcome-box, .route-board, .reward-box, .result-box, .event-card, .news-paper, .ending-box, .title-box, .story-text, .check-box, .confirm-bar {
  background-color: var(--paper);
  background-image: var(--noise), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.12), transparent 60%);
}

/* ---------- 通用 ---------- */
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen.enter { animation: fadeIn .4s ease backwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.scene-bg { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: saturate(.85) contrast(1.05); animation: slowZoom 40s ease-in-out infinite alternate; }
.scene-bg.dim { filter: blur(4px) brightness(.42) saturate(.6); }
.scene-bg.parallax { translate: var(--px, 0) var(--py, 0); transition: translate .6s var(--ease-out); }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.story-vignette, .battle-vignette, .title-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(15,12,8,.55) 75%, rgba(10,8,5,.9) 100%), linear-gradient(to bottom, rgba(10,8,5,.35), transparent 20%, transparent 55%, rgba(10,8,5,.85)); }

.topbar { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; z-index: 6; }
.date-plate { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; border: 1.5px solid var(--ink); box-shadow: 3px 4px 0 rgba(0,0,0,.35), inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(42,36,28,.4); min-width: 250px; animation: dropIn .5s var(--ease-back) backwards .1s; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-30px) rotate(-2deg); } }
.seal-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #f3e6c4; display: grid; place-items: center; font-family: var(--brush); font-size: 22px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); }
.dp-top { font-size: 13px; letter-spacing: 1px; color: var(--ink2); }
.dp-loc { font-size: 16px; font-weight: 600; margin-top: 2px; }
.dp-loc span { font-weight: 400; color: var(--ink3); font-size: 13px; }
.top-buttons { display: flex; gap: 8px; animation: dropIn .5s var(--ease-back) backwards .2s; }
.icon-btn { background: rgba(20,16,10,.72); color: #eadcbc; border: 1px solid rgba(234,220,188,.4); padding: 7px 14px; font-size: 13px; letter-spacing: 1px; transition: background .15s, border-color .15s, transform .12s; }
.icon-btn:hover { background: var(--red); border-color: var(--red); }
.icon-btn:active { transform: scale(.95); }

.btn { position: relative; border: 1.5px solid var(--ink); padding: 10px 26px; font-size: 16px; letter-spacing: 2px; background: transparent; color: var(--ink); transition: transform .14s var(--ease-out), background .15s, box-shadow .14s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.primary { background: var(--red); color: #f8ecd2; border-color: #5e1d12; box-shadow: 0 4px 0 #4a160d; }
.btn.primary:hover { background: var(--red2); box-shadow: 0 6px 0 #4a160d, 0 0 24px rgba(200,80,40,.35); }
.btn.primary:active { box-shadow: 0 1px 0 #4a160d; }
.btn.big { font-size: 18px; padding: 14px 34px; }
.btn.ghost { background: rgba(255,255,255,.08); }
.btn .arrow { display: inline-block; margin-left: 10px; transition: transform .2s var(--ease-out); }
.btn:hover .arrow { transform: translateX(6px); }
.btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.btn.late { animation: rise .5s var(--ease-out) backwards; }

/* 倾斜卡片 + 高光 */
.tilt { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .18s var(--ease-out), box-shadow .2s, opacity .3s; will-change: transform; }
.shine, .card-shine { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .25s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,250,230,.45), transparent 55%); mix-blend-mode: soft-light; }
.tilt:hover .shine, .tilt:hover .card-shine { opacity: 1; }

/* 转场 */
.wipe { position: fixed; inset: 0; z-index: 900; display: none; pointer-events: all; background: radial-gradient(ellipse at 50% 50%, #241c14, #0d0a07 70%); clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
.wipe::after { content: ''; position: absolute; inset: 0; background: var(--noise); opacity: .6; }
.wipe-seal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); width: 70px; height: 70px; border: 2px solid rgba(176,138,62,.6); color: rgba(240,195,90,.75); display: grid; place-items: center; font-family: var(--brush); font-size: 44px; }

/* 提示框 */
.tooltip { position: fixed; z-index: 1000; max-width: 300px; background: rgba(22,18,12,.96); color: #efe3c6; border: 1px solid rgba(240,195,90,.45); padding: 9px 13px; font-size: 13px; line-height: 1.7; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.tooltip.show { opacity: 1; transform: none; }
.tooltip b { color: var(--gold2); }

.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 400; }

/* ---------- 标题 ---------- */
.title .scene-bg { filter: saturate(.7) brightness(.62); }
.embers { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 20% 80%, rgba(255,170,90,.8), transparent), radial-gradient(1.5px 1.5px at 70% 90%, rgba(255,200,120,.7), transparent), radial-gradient(2px 2px at 85% 70%, rgba(255,150,80,.6), transparent), radial-gradient(1.5px 1.5px at 40% 95%, rgba(255,190,110,.7), transparent); animation: embers 9s linear infinite; }
@keyframes embers { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 40px -900px, -30px -1100px, 20px -800px, -50px -1000px; } }
.title-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(980px, 94vw); max-height: 94vh; overflow: auto; padding: 30px 40px 28px; border: 2px solid var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(42,36,28,.5); text-align: center; animation: boxIn .7s var(--ease-out) backwards .1s; }
@keyframes boxIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(.97); } }
.title-seal { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--red); color: var(--red); font-family: var(--brush); font-size: 30px; transform: rotate(-6deg); animation: stampIn .5s var(--ease-back) backwards .9s; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-6deg) scale(2.4); } }
.title-box h1 { font-family: var(--brush); font-size: 92px; font-weight: 400; letter-spacing: 18px; line-height: 1.1; margin: 4px 0 0; padding-left: 18px; }
.title-box h1 span { display: inline-block; animation: inkIn .8s var(--ease-out) backwards; }
@keyframes inkIn { from { opacity: 0; filter: blur(10px); transform: translateY(14px) scale(1.15); } }
.title-sub { color: var(--blue); letter-spacing: 5px; font-size: 15px; margin-bottom: 18px; animation: fadeIn .8s ease backwards .7s; }
.title-form { text-align: left; animation: fadeIn .6s ease backwards .8s; }
.title-form label { display: block; font-size: 13px; color: var(--ink3); letter-spacing: 2px; margin: 12px 0 6px; }
.name-input { width: 220px; font: inherit; font-size: 20px; padding: 6px 12px; background: rgba(255,255,255,.4); border: 1.5px solid var(--ink2); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.name-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(139,46,31,.2); }
.origins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.origin { border: 1.5px solid var(--ink3); padding: 14px 16px; cursor: pointer; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.origin:hover { border-color: var(--ink); }
.origin.on { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 12px 26px rgba(0,0,0,.2); background: rgba(255,250,235,.6); }
.origin.on::after { content: '已选'; position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--red); letter-spacing: 2px; opacity: 0; }
.origin-glyph { position: absolute; right: 12px; top: 6px; font-family: var(--brush); font-size: 46px; color: rgba(139,46,31,.18); transition: color .2s; }
.origin.on .origin-glyph { color: rgba(139,46,31,.55); }
.origin-name { font-size: 22px; font-weight: 900; }
.origin-name small { display: block; font-size: 12px; font-weight: 400; color: var(--blue); letter-spacing: 1px; }
.origin p { font-size: 13px; line-height: 1.7; margin-top: 8px; color: var(--ink2); }
.origin p.flavor { color: var(--ink3); font-style: italic; font-size: 12px; }
.origin-stats { display: flex; gap: 6px; margin-top: 8px; }
.origin-stats span { font-size: 12px; border: 1px solid var(--ink3); padding: 1px 6px; }
.origin-stats span.hi { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.title-form .btn.primary { display: block; width: 100%; margin-top: 20px; }
.title-form .btn.ghost { display: block; width: 100%; margin-top: 8px; }

/* ---------- 卡牌 ---------- */
.card { --sc: var(--red); position: relative; width: 158px; height: 226px; cursor: pointer; user-select: none; -webkit-user-select: none; flex-shrink: 0; touch-action: none; perspective: 900px; }
.card.s-body { --sc: #8b2e1f; } .card.s-skill { --sc: #7a5a22; } .card.s-mind { --sc: #2c3e5a; }
.card.s-law { --sc: #2f6464; } .card.s-ruin { --sc: #55407a; } .card.s-life { --sc: #a0731f; }
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s var(--ease-out); }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2px solid #2b2318; border-radius: 7px; overflow: hidden; }
.card-front { padding: 10px 10px 8px; display: flex; flex-direction: column; box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 0 0 4px var(--paper), inset 0 0 0 5px color-mix(in srgb, var(--sc) 55%, transparent); transition: box-shadow .2s, filter .2s; overflow: visible; }
.card.r-rare .card-front { box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 0 0 2px var(--gold), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--gold); }
.card.r-rare .card-front::before { content: ''; position: absolute; inset: -2px; border-radius: 8px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,230,160,.45) 50%, transparent 65%); background-size: 250% 100%; animation: foil 3.5s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes foil { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.card-back { transform: rotateY(180deg); display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(240,195,90,.07) 0 2px, transparent 2px 10px), repeating-linear-gradient(-45deg, rgba(240,195,90,.07) 0 2px, transparent 2px 10px), radial-gradient(circle at 50% 50%, #2d3f5c, #121a28 75%); box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 0 0 5px #1a2436, inset 0 0 0 6px rgba(240,195,90,.6); }
.card-back span { width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(240,195,90,.7); display: grid; place-items: center; font-family: var(--brush); font-size: 38px; color: var(--gold2); box-shadow: 0 0 0 6px rgba(240,195,90,.12); }
.card-cost { position: absolute; top: -10px; left: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--sc); color: #fbefd5; display: grid; place-items: center; font-weight: 900; font-size: 18px; border: 2px solid #2b2318; box-shadow: 0 2px 4px rgba(0,0,0,.4); z-index: 2; transition: background .2s, transform .2s; }
.card-cost.up { background: #555; } .card-cost.down { background: #3c7a3c; }
.card-cost.flash { animation: costFlash .5s; }
@keyframes costFlash { 30% { background: #e03a2a; transform: scale(1.35); } }
.card-name { font-weight: 900; font-size: 16px; text-align: center; padding: 2px 0 4px 14px; letter-spacing: 1px; }
.card-art { height: 72px; border: 1px solid rgba(42,36,28,.6); position: relative; display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(-35deg, color-mix(in srgb, var(--sc) 14%, transparent) 0 2px, transparent 2px 7px), color-mix(in srgb, var(--sc) 8%, var(--paper2)); }
.card-art .glyph { font-family: var(--brush); font-size: 54px; color: var(--sc); line-height: 1; text-shadow: 2px 2px 0 rgba(255,255,255,.4); transition: transform .3s var(--ease-back); }
.card:hover .card-art .glyph { transform: scale(1.12) rotate(-4deg); }
.card-type { position: absolute; bottom: 0; right: 0; font-size: 10px; background: var(--sc); color: #fbefd5; padding: 1px 6px; letter-spacing: 1px; }
.card-text { font-size: 12.5px; line-height: 1.55; padding: 7px 2px 0; flex: 1; color: var(--ink); }
.card-text b { font-size: 14px; } .card-text b.up { color: #2c7a2c; } .card-text b.down { color: #a33; }
.card-text .kw { font-style: normal; color: var(--sc); font-weight: 600; }
.card-text .req { display: block; color: var(--violet); font-weight: 600; font-size: 11px; }
.card-text .ex { display: inline-block; margin-left: 4px; font-size: 10px; border: 1px solid var(--ink3); padding: 0 4px; color: var(--ink3); }
.card-src { font-size: 9.5px; color: var(--ink3); text-align: center; border-top: 1px solid rgba(42,36,28,.2); padding-top: 3px; letter-spacing: .5px; }
.card.small { width: 136px; height: 196px; }
.card.small .card-art { height: 56px; } .card.small .card-art .glyph { font-size: 42px; }
.card.small .card-text { font-size: 11.5px; }
.card-grid { display: flex; flex-wrap: wrap; gap: 16px 14px; justify-content: center; padding: 10px 6px; }
.card.fan-in { animation: fanIn .4s var(--ease-out) backwards; }
@keyframes fanIn { from { opacity: 0; transform: translateY(20px) scale(.92); } }
.card.tilt:hover { z-index: 3; }

/* ---------- 战斗 ---------- */
.battle .scene-bg { filter: saturate(.75) brightness(.55) blur(1px); transition: filter 1s; }
.battle.chaos .scene-bg { filter: saturate(.5) brightness(.45) hue-rotate(180deg) blur(1.5px); }
.battle.defeat .scene-bg { filter: grayscale(1) brightness(.3) blur(3px); }
.battle-vignette { transition: background 1s; }
.battle.chaos .battle-vignette { background: radial-gradient(ellipse at 50% 40%, rgba(80,120,200,.12), rgba(20,30,60,.7) 80%), linear-gradient(to bottom, transparent 55%, rgba(5,8,20,.9)); animation: chaosPulse 3s ease-in-out infinite; }
@keyframes chaosPulse { 50% { opacity: .75; } }
.tint { position: absolute; inset: 0; pointer-events: none; z-index: 20; opacity: 0; }
.tint.down { background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(80,110,255,.35)); }
.tint.up { background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(255,200,90,.3)); }
.tint.hurt { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(200,20,10,.6)); }
.tint.flash { animation: tintFlash .6s ease-out; }
@keyframes tintFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.white-flash { position: absolute; inset: 0; background: #fff8ea; pointer-events: none; z-index: 30; mix-blend-mode: screen; }

/* 稳定度 */
.stab-wrap { flex: 1; max-width: 460px; margin: 0 auto; text-align: center; color: #eadcbc; cursor: help; animation: dropIn .5s var(--ease-back) backwards .15s; }
.stab-label { display: grid; grid-template-columns: 2.5fr 4fr 3.5fr; font-size: 12px; letter-spacing: 3px; opacity: .9; }
.stab-label .z0 { color: #9db5ff; text-align: left; } .stab-label .z1 { color: #d6cbb6; } .stab-label .z2 { color: #f0d79a; text-align: right; }
.stab-track { position: relative; height: 14px; margin: 5px 0 6px; border: 1px solid rgba(255,255,255,.3); background: linear-gradient(90deg, rgba(90,110,220,.55) 0 25%, rgba(170,160,145,.35) 25% 65%, rgba(220,170,70,.5) 65% 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.25); }
.stab-needle { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; transition: left .55s var(--ease-back), background .3s, box-shadow .3s; z-index: 2; }
.stab-needle b { font-size: 12px; color: #1a140c; font-weight: 900; }
.stab-needle.z0 { background: #7f9cff; box-shadow: 0 0 16px #6f8cff; } .stab-needle.z1 { background: #e2d8c4; box-shadow: 0 0 10px rgba(255,255,255,.5); } .stab-needle.z2 { background: #f0c35a; box-shadow: 0 0 16px #f0c35a; }
.stab-needle.z0 b { color: #0b1440; }
.stab-state { font-size: 13px; background: rgba(15,12,8,.72); display: inline-block; padding: 3px 14px; border: 1px solid rgba(255,255,255,.2); }
.stab-state b { font-size: 16px; margin-right: 6px; }
.stab-state.z0 b { color: #9db5ff; } .stab-state.z2 b { color: #f0d79a; }
.stab-state small { font-size: 11px; opacity: .8; }

/* 场地 */
.field { position: absolute; top: 118px; bottom: 268px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; }
.player { width: 270px; color: #eadcbc; background: rgba(15,12,8,.74); border: 1px solid rgba(234,220,188,.3); padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); position: relative; animation: slideL .5s var(--ease-out) backwards .2s; }
@keyframes slideL { from { opacity: 0; transform: translateX(-40px); } }
.player.low { box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 30px rgba(200,30,20,.35); animation: lowPulse 1.6s ease-in-out infinite; }
@keyframes lowPulse { 50% { box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 50px rgba(220,40,20,.55); } }
.p-name { font-size: 20px; font-weight: 900; color: #f3e6c4; }
.p-name small { display: block; font-size: 12px; font-weight: 400; color: #b8a888; letter-spacing: 1px; }
.p-stats { display: flex; gap: 6px; margin: 10px 0; }
.p-stat { flex: 1; text-align: center; border: 1px solid rgba(234,220,188,.25); padding: 3px 0; font-size: 11px; }
.p-stat b { display: block; font-size: 18px; color: #f3e6c4; }
.hpbar { position: relative; height: 18px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); }
.hpfill, .hpghost { position: absolute; inset: 0 auto 0 0; }
.hpfill { background: linear-gradient(#d0573c, #8b2e1f); transition: width .25s var(--ease-out); }
.hpghost { background: #f6e0b0; transition: width .6s ease-in .35s; }
.hptext { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 17px; color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.block-badge { position: absolute; left: -14px; top: -10px; width: 34px; height: 34px; background: linear-gradient(#6a8cb0, #3f5d80); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); transform: scale(0); transition: transform .3s var(--ease-back); }
.block-badge.on { transform: scale(1); }
.incoming { font-size: 12px; margin-top: 7px; color: #ffb0a0; height: 0; overflow: hidden; opacity: 0; transition: opacity .25s, height .25s; }
.incoming.show { opacity: 1; height: 18px; }
.incoming.safe { color: #a9c8ff; }
.incoming b { color: #fff; }
.ap { display: flex; align-items: center; gap: 5px; margin-top: 10px; cursor: help; }
.ap-label { font-size: 12px; letter-spacing: 2px; margin-right: 4px; }
.ap i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(240,200,110,.45); transition: background .2s, box-shadow .2s, border-color .2s; }
.ap i.on { background: radial-gradient(circle at 35% 35%, #fff2c4, #d29a2c); border-color: #ffe7a3; box-shadow: 0 0 9px rgba(255,200,90,.75); }
.ap i.spend { animation: orbSpend .4s ease-out; }
.ap i.gain { animation: orbGain .45s var(--ease-back); }
@keyframes orbSpend { 0% { transform: scale(1.4); box-shadow: 0 0 22px #ffd27a; } 100% { transform: scale(1); } }
@keyframes orbGain { 0% { transform: scale(0); } 70% { transform: scale(1.35); } }
.ap b { margin-left: 6px; font-size: 22px; color: #ffe0a0; font-variant-numeric: tabular-nums; }
.statuses { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 4px; }
.status { font-size: 11px; padding: 1px 6px; border: 1px solid; background: rgba(250,240,220,.92); cursor: help; }
.status.buff { color: var(--blue); border-color: var(--blue); }
.status.bad { color: var(--red); border-color: var(--red); }
.status.pop { animation: chipPop .4s var(--ease-back); }
@keyframes chipPop { from { transform: scale(0); } }

.enemies { display: flex; gap: 26px; align-items: flex-end; justify-content: flex-end; flex: 1; }
.enemy { width: 190px; position: relative; text-align: center; color: #f3e6c4; transition: transform .25s var(--ease-out), filter .3s; animation: enemyIn .6s var(--ease-out) backwards .25s; }
.enemy:nth-child(2) { animation-delay: .35s; } .enemy:nth-child(3) { animation-delay: .45s; }
@keyframes enemyIn { from { opacity: 0; transform: translateX(60px); } }
.enemy.gone { visibility: hidden; }
.enemy.boss { width: 330px; } .enemy.elite { width: 220px; }
.enemy-frame { position: relative; height: 170px; border: 2px solid #1a140c; box-shadow: 0 0 0 3px rgba(234,220,188,.55), 0 14px 30px rgba(0,0,0,.6); background: #2a241c; overflow: hidden; transition: box-shadow .2s; animation: breathe 4s ease-in-out infinite; }
.enemy:nth-child(2) .enemy-frame { animation-delay: -1.3s; } .enemy:nth-child(3) .enemy-frame { animation-delay: -2.6s; }
@keyframes breathe { 50% { transform: translateY(-4px); } }
.enemy.boss .enemy-frame { height: 250px; box-shadow: 0 0 0 3px #b08a3e, 0 0 40px rgba(180,80,30,.4), 0 14px 30px rgba(0,0,0,.6); }
.enemy.elite .enemy-frame { box-shadow: 0 0 0 3px #b08a3e, 0 14px 30px rgba(0,0,0,.6); }
.enemy-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.glyph-art { display: grid; place-items: center; background-size: cover; background-position: center; }
.glyph-art span { font-family: var(--brush); font-size: 96px; color: #e8d5ae; opacity: .88; text-shadow: 0 0 25px rgba(255,140,60,.35); }
.enemy.boss .glyph-art span { font-size: 150px; }
.enemy-block { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; background: linear-gradient(#6a8cb0, #3f5d80); color: #fff; display: grid; place-items: center; font-weight: 900; clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); transform: scale(0); transition: transform .3s var(--ease-back); z-index: 2; }
.enemy-block.on { transform: scale(1); }
.target-ring { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: inset 0 0 0 3px #ff6a50, inset 0 0 40px rgba(255,80,50,.5); }
.enemy.aim-on .target-ring { opacity: 1; }
.enemy.aim-on .enemy-frame { box-shadow: 0 0 0 3px #ff6a50, 0 0 40px rgba(255,80,50,.6); }
.enemy.aim-on { transform: scale(1.04); }
.battle.aiming .enemy:not(.gone) .enemy-frame { cursor: crosshair; }
.enemy-name { font-weight: 900; font-size: 16px; margin: 8px 0 5px; text-shadow: 0 2px 4px #000; }
.enemy-name .tag { font-size: 12px; background: var(--gold); color: #1a140c; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; font-weight: 600; }
.enemy-name[data-tip] { cursor: help; text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 4px; }
.enemy .statuses { justify-content: center; }
.intent { height: 58px; display: flex; align-items: flex-end; justify-content: center; }
.intent-box { display: inline-flex; align-items: center; gap: 4px; background: rgba(250,240,220,.96); border: 1.5px solid #1a140c; padding: 4px 9px; color: var(--ink); box-shadow: 0 4px 10px rgba(0,0,0,.4); position: relative; animation: bob 2.4s ease-in-out infinite; cursor: help; }
.intent-box.hostile { border-color: var(--red); box-shadow: 0 4px 10px rgba(0,0,0,.4), 0 0 14px rgba(200,60,40,.35); }
.intent-box::after { content: ''; position: absolute; bottom: -7px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #1a140c; border-bottom: 0; }
.intent-box small { font-size: 11px; color: var(--ink3); margin-left: 4px; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.ii { font-family: var(--brush); font-size: 20px; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; color: #fff; }
.inum { font-size: 20px; color: var(--red); font-weight: 900; margin: 0 4px 0 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ii.atk { background: var(--red); } .ii.def { background: #4a6a8a; } .ii.buf { background: var(--gold); }
.ii.deb { background: var(--violet); } .ii.stb { background: #3a5aa8; } .ii.heal { background: #3c7a3c; }
.intent-box.stun { background: #ddd; } .intent-box.stun .ii { background: #777; }
.enemy.acting { z-index: 5; filter: drop-shadow(0 0 18px rgba(255,90,40,.55)); }

/* 手牌 */
.hand { position: absolute; left: 50%; bottom: 26px; width: 0; height: 0; z-index: 50; perspective: 1200px; }
.card.in-hand { position: absolute; left: -79px; bottom: 0; transform-origin: 50% 100%; transition: transform .26s var(--ease-out), filter .2s; will-change: transform; }
.card.in-hand.no-trans { transition: none; }
.card.in-hand:hover .card-front { box-shadow: 0 22px 40px rgba(0,0,0,.6), 0 0 0 2px var(--gold2), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--sc); }
.card.in-hand.unplayable .card-front { filter: brightness(.62) saturate(.4); }
.card.in-hand.unplayable .card-cost { background: #5a1a12; }
.battle:not(.busy) .card.in-hand:not(.unplayable) .card-front { box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 0 0 2px rgba(120,220,140,.55), inset 0 0 0 4px var(--paper), inset 0 0 0 5px color-mix(in srgb, var(--sc) 55%, transparent); }
.card.in-hand.dragging { transition: none; z-index: 200 !important; cursor: grabbing; }
.card.in-hand.dragging .card-front { box-shadow: 0 30px 50px rgba(0,0,0,.6), 0 0 0 2px var(--gold2); }
.card.in-hand.will-play .card-front { box-shadow: 0 30px 50px rgba(0,0,0,.6), 0 0 0 3px #7fe0a0, 0 0 40px rgba(120,230,160,.6); }
.card.in-hand.aiming .card-front { box-shadow: 0 22px 40px rgba(0,0,0,.6), 0 0 0 3px #ff8a6a, 0 0 30px rgba(255,120,80,.6); }
.card.played .card-front { box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 3px var(--gold2), 0 0 60px rgba(255,210,120,.55); }
.card.casting .card-front { animation: casting .3s ease-out; }
@keyframes casting { 50% { filter: brightness(1.5); } }
.card .hotkey { position: absolute; bottom: -9px; right: 8px; font-size: 10px; background: var(--ink); color: var(--paper); padding: 0 5px; opacity: .7; }
.play-zone { position: absolute; left: 22%; right: 22%; top: 120px; bottom: 270px; border: 2px dashed rgba(240,195,90,.35); border-radius: 20px; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s, background .2s, border-color .2s; z-index: 4; }
.play-zone span { color: rgba(240,220,170,.8); letter-spacing: 6px; font-size: 18px; }
.play-zone.show { opacity: 1; }
.play-zone.hot { background: rgba(120,230,160,.08); border-color: rgba(120,230,160,.7); }
.aim-svg { position: absolute; inset: 0; pointer-events: none; z-index: 210; }
.aim-svg svg { width: 100%; height: 100%; opacity: 0; transition: opacity .12s; }
.aim-svg svg.show { opacity: 1; }
#aimpath { fill: none; stroke: #f0c35a; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 14; animation: dashMove .5s linear infinite; filter: drop-shadow(0 0 6px rgba(240,195,90,.8)); }
#ah path { fill: #f0c35a; }
.aim-svg svg.locked #aimpath { stroke: #ff6a50; filter: drop-shadow(0 0 8px rgba(255,90,60,.9)); }
.aim-svg svg.locked #ah path { fill: #ff6a50; }
@keyframes dashMove { to { stroke-dashoffset: -16; } }

/* 牌堆 */
.pile { position: absolute; left: 22px; bottom: 22px; width: 78px; height: 100px; background: transparent; border: 0; color: #f3e6c4; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 40; }
.pile-stack { --depth: 3; position: absolute; inset: 0; border-radius: 6px; border: 2px solid #b08a3e; background: repeating-linear-gradient(45deg, rgba(240,195,90,.08) 0 2px, transparent 2px 9px), radial-gradient(circle, #2d3f5c, #121a28 80%);
  box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px) 0 #0e1420, calc(var(--depth) * 2px) calc(var(--depth) * 2px) 0 #b08a3e55, calc(var(--depth) * 3px) calc(var(--depth) * 3px) 0 #0e1420, 0 8px 18px rgba(0,0,0,.5); transition: box-shadow .3s, transform .15s; }
.pile.discard .pile-stack { background: repeating-linear-gradient(-45deg, rgba(240,195,90,.06) 0 2px, transparent 2px 9px), radial-gradient(circle, #4a3a28, #1f170e 80%); }
.pile.empty .pile-stack { opacity: .35; box-shadow: none; border-style: dashed; }
.pile:hover .pile-stack { transform: translateY(-3px); border-color: #ffe0a0; }
.pile b { position: relative; font-size: 26px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px #000; }
.pile small { position: relative; font-size: 11px; letter-spacing: 1px; opacity: .85; }
.right-col { position: absolute; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 40; }
.right-col .pile { position: relative; left: auto; bottom: auto; }
.exhaust-chip { font-size: 11px; color: #c9b0ff; border: 1px solid rgba(201,176,255,.5); padding: 1px 8px; background: rgba(20,14,30,.7); cursor: help; }
.end-turn { position: relative; background: var(--red); color: #fbefd5; border: 2px solid #f0d79a; padding: 12px 22px; font-size: 18px; font-weight: 900; letter-spacing: 2px; box-shadow: 0 4px 0 #4a160d, 0 0 20px rgba(200,80,40,.35); transition: transform .14s, filter .2s, background .2s; min-width: 128px; }
.end-turn small { display: block; font-size: 10px; font-weight: 400; opacity: .7; }
.end-turn:hover:not(:disabled) { background: var(--red2); transform: translateY(-2px); }
.end-turn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #4a160d; }
.end-turn:disabled { filter: grayscale(.8) brightness(.6); cursor: wait; }
.end-turn.ready { animation: readyPulse 1.2s ease-in-out infinite; }
@keyframes readyPulse { 50% { box-shadow: 0 4px 0 #4a160d, 0 0 0 6px rgba(240,195,90,.35), 0 0 36px rgba(255,140,60,.8); } }
.mini-back { position: fixed; width: 46px; height: 64px; border-radius: 4px; border: 1.5px solid #b08a3e; background: radial-gradient(circle, #2d3f5c, #121a28 80%); z-index: 260; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,.5); }

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 450; }
.float { position: fixed; transform: translate(-50%, -50%); font-weight: 900; font-size: 32px; color: #fff; text-shadow: 0 0 4px #000, 2px 2px 0 #000; animation: floatUp 1.25s cubic-bezier(.2,.7,.3,1) forwards; white-space: nowrap; font-variant-numeric: tabular-nums; }
.float.big { font-size: 58px; color: #ffcf6b; text-shadow: 0 0 18px rgba(255,140,40,.8), 3px 3px 0 #000; }
.float.dmg { color: #fff1d6; }
.float.pdmg { color: #ff6a50; font-size: 38px; }
.float.block, .float.blocked { color: #a9c8ff; font-size: 20px; }
.float.heal { color: #8fe08f; }
.float.status { color: #f2d6ff; font-size: 18px; }
.float.move { color: #ffe0c0; font-size: 18px; animation-name: floatMove; }
.float.dot { color: #ff9a4a; font-size: 26px; }
.float.trace { color: #c9a8ff; font-size: 18px; }
.float.stab-down { color: #9db5ff; font-size: 20px; } .float.stab-up { color: #f0d79a; font-size: 20px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 14% { opacity: 1; transform: translate(-50%, -70%) scale(1.25); } 30% { transform: translate(calc(-50% + var(--dx, 0px) * .3), -90%) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -220%) scale(.9); } }
@keyframes floatMove { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; transform: translate(-50%, -60%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110%); } }

.banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; z-index: 470; pointer-events: none; opacity: 0; transform: scaleY(0); transition: opacity .2s, transform .25s var(--ease-back); }
.banner.show { opacity: 1; transform: none; }
.banner div { display: inline-block; font-family: var(--brush); font-size: 54px; color: #f6e7c4; padding: 6px 80px; background: linear-gradient(90deg, transparent, rgba(15,12,8,.88) 20%, rgba(15,12,8,.88) 80%, transparent); text-shadow: 0 0 20px rgba(255,180,80,.5); letter-spacing: 6px; }
.banner small { display: block; color: #e8dcc0; font-size: 15px; margin-top: 4px; text-shadow: 0 1px 3px #000; }
.banner.chaos div { color: #b9c9ff; text-shadow: 0 0 24px rgba(100,140,255,.8); }
.banner.stable div { color: #ffe0a0; }
.banner.tip { top: auto; bottom: 290px; }
.banner.tip div { font-size: 20px; font-family: var(--serif); padding: 6px 40px; letter-spacing: 2px; }
.turn-banner { position: absolute; left: 0; right: 0; top: 40%; z-index: 480; pointer-events: none; opacity: 0; text-align: center; }
.tb-band { padding: 14px 0; background: linear-gradient(90deg, transparent, rgba(12,10,7,.92) 15%, rgba(12,10,7,.92) 85%, transparent); border-top: 1px solid rgba(240,195,90,.5); border-bottom: 1px solid rgba(240,195,90,.5); }
.tb-band b { display: block; font-family: var(--brush); font-weight: 400; font-size: 66px; line-height: 1.1; letter-spacing: 12px; color: #ffe0a0; text-shadow: 0 0 30px rgba(255,180,80,.6); }
.tb-band small { color: #d8cbb0; letter-spacing: 4px; font-size: 14px; }
.turn-banner.enemy .tb-band { border-color: rgba(220,80,60,.6); }
.turn-banner.enemy .tb-band b { color: #ff9a80; text-shadow: 0 0 30px rgba(255,80,60,.6); }
.turn-banner.victory .tb-band b { font-size: 92px; color: #ffe7a3; }
.turn-banner.defeat .tb-band b { color: #c8c0b0; text-shadow: none; }

/* ---------- 剧情 ---------- */
.story .scene-bg { filter: saturate(.85) brightness(.85); }
.story-main { position: absolute; top: 96px; left: 4vw; right: 4vw; display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.story-text { width: min(560px, 50vw); padding: 22px 28px; border: 1.5px solid var(--ink); box-shadow: 6px 8px 0 rgba(0,0,0,.4), inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(42,36,28,.35); animation: slideIn .6s var(--ease-out) backwards .1s; }
.story-text h2 { font-size: 26px; font-weight: 900; margin-bottom: 10px; letter-spacing: 2px; }
.story-text p { font-size: 15.5px; line-height: 1.95; color: var(--ink2); margin-top: 8px; }
.para { animation: paraIn .7s ease backwards; }
@keyframes paraIn { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } }
.speech-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 380px; margin-top: 30px; }
.speech { background: #fbf3e0; border: 2px solid var(--ink); padding: 10px 16px; font-size: 15px; line-height: 1.6; box-shadow: 4px 4px 0 rgba(0,0,0,.35); position: relative; animation: pop .4s var(--ease-back) backwards; border-radius: 4px; transform-origin: 20% 100%; }
.speech:nth-child(2) { margin-left: 40px; }
.speech b { display: block; font-size: 12px; color: var(--red); letter-spacing: 2px; }
.speech::after { content: ''; position: absolute; bottom: -12px; left: 30px; border: 10px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } }
.choice-row { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center; gap: 24px; padding: 0 3vw; }
.choice-card { position: relative; width: min(330px, 30vw); border: 2px solid var(--ink); padding: 14px 16px 12px; cursor: pointer; box-shadow: 6px 8px 0 rgba(0,0,0,.45), inset 0 0 0 4px var(--paper), inset 0 0 0 5px rgba(42,36,28,.35); animation: rise .5s var(--ease-out) backwards; }
.choice-card:hover { box-shadow: 10px 18px 0 rgba(0,0,0,.4), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--red); }
.choice-card.chosen { box-shadow: 0 0 0 3px var(--gold2), 0 20px 50px rgba(0,0,0,.5), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--red); z-index: 3; }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } }
.cc-head { display: flex; align-items: center; gap: 10px; }
.cc-num { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fbefd5; display: grid; place-items: center; font-weight: 900; font-size: 18px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); flex-shrink: 0; }
.choice-card:nth-child(2) .cc-num { background: var(--blue); } .choice-card:nth-child(3) .cc-num { background: #4a4a3a; }
.cc-title { font-size: 21px; font-weight: 900; letter-spacing: 2px; }
.cc-art { height: 70px; margin: 10px 0 8px; border: 1px solid rgba(42,36,28,.5); display: grid; place-items: center; background: repeating-linear-gradient(-35deg, rgba(42,36,28,.08) 0 2px, transparent 2px 8px), var(--paper2); overflow: hidden; }
.cc-art span { font-family: var(--brush); font-size: 52px; color: var(--ink2); transition: transform .35s var(--ease-back), color .2s; }
.choice-card:hover .cc-art span { transform: scale(1.18) rotate(-5deg); color: var(--red); }
.cc-pros { list-style: none; padding: 0; margin: 0; }
.cc-pros li { font-size: 13.5px; line-height: 1.6; padding-left: 18px; position: relative; color: var(--ink2); }
.cc-pros li::before { content: '→'; position: absolute; left: 0; color: var(--ink3); }
.cc-check { margin-top: 10px; border-top: 1px dashed var(--ink3); padding-top: 7px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ink3); }
.cc-meter { flex: 1; height: 6px; background: rgba(139,46,31,.2); position: relative; }
.cc-meter i { position: absolute; inset: 0 auto 0 0; background: #4c8a4c; }
.cc-check b { font-size: 20px; font-variant-numeric: tabular-nums; } .cc-check b.good { color: #2c7a2c; } .cc-check b.mid { color: #a07a1a; } .cc-check b.low { color: var(--red); }
.cc-check.none { justify-content: flex-start; }
.resolving .choice-card { pointer-events: none; }
.outcome-panel { position: absolute; inset: 0; background: rgba(10,8,5,.6); display: grid; place-items: center; z-index: 20; animation: fadeIn .3s backwards; }
.outcome-box { width: min(580px, 92vw); padding: 28px 34px 24px; border: 2px solid var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(42,36,28,.4); position: relative; text-align: center; animation: pop .35s var(--ease-back) backwards; }
.outcome-box h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: 2px; }
.outcome-box p { text-align: left; font-size: 15.5px; line-height: 1.95; color: var(--ink2); margin-bottom: 8px; }
.outcome-box .btn { margin-top: 14px; }
.outcome-stamp { position: absolute; right: 22px; top: 16px; font-family: var(--brush); font-size: 34px; border: 3px solid; padding: 0 10px; transform: rotate(12deg); animation: stamp .4s var(--ease-back) backwards .15s; }
.outcome-stamp.ok { color: #2c6a2c; } .outcome-stamp.fail { color: var(--red); }
@keyframes stamp { from { transform: rotate(12deg) scale(2.8); opacity: 0; } }
.gains { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 4px; }
.gain { font-size: 13px; background: var(--ink); color: var(--paper); padding: 3px 10px; animation: chipIn .45s var(--ease-back) backwards; }
.gain.card { background: var(--blue); } .gain.exp { background: var(--red); } .gain.neg { background: #5a4a3a; color: #f0c8b8; }
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(.6); } }

/* 检定 */
.check-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,8,5,.6); z-index: 25; animation: fadeIn .2s backwards; }
.check-box { width: min(560px, 92vw); border: 2px solid var(--ink); padding: 20px 30px 22px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(42,36,28,.4); animation: pop .3s var(--ease-back) backwards; }
.cr-title { font-size: 20px; font-weight: 900; letter-spacing: 3px; }
.cr-title small { display: block; font-size: 13px; font-weight: 400; color: var(--ink3); letter-spacing: 1px; }
.cr-bar { position: relative; height: 34px; margin: 44px 0 30px; display: flex; border: 1.5px solid var(--ink); }
.cr-ok { background: repeating-linear-gradient(-45deg, rgba(44,122,44,.18) 0 4px, rgba(44,122,44,.3) 4px 8px); display: grid; place-items: center; }
.cr-fail { flex: 1; background: repeating-linear-gradient(-45deg, rgba(139,46,31,.12) 0 4px, rgba(139,46,31,.22) 4px 8px); display: grid; place-items: center; }
.cr-ok span, .cr-fail span { font-size: 12px; letter-spacing: 4px; color: var(--ink2); }
.cr-tick { position: absolute; bottom: -20px; transform: translateX(-50%); font-style: normal; }
.cr-tick small { font-size: 10px; color: var(--ink3); }
.cr-marker { position: absolute; top: -14px; bottom: -6px; left: 0; width: 3px; margin-left: -1.5px; background: var(--ink); }
.cr-marker b { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-size: 14px; padding: 1px 7px; font-variant-numeric: tabular-nums; min-width: 34px; }
.cr-marker.in-ok b { background: #2c6a2c; }
.cr-marker.landed b { transform: translateX(-50%) scale(1.3); transition: transform .3s var(--ease-back); }
.cr-marker.ok { background: #2c6a2c; } .cr-marker.fail { background: var(--red); } .cr-marker.fail b { background: var(--red); }
.cr-result { height: 52px; opacity: 0; }
.cr-result.show { opacity: 1; animation: pop .35s var(--ease-back); }
.cr-result b { font-size: 40px; font-family: Georgia, serif; margin-right: 12px; }
.cr-result span { font-size: 18px; letter-spacing: 3px; }
.cr-result.ok { color: #2c6a2c; } .cr-result.fail { color: var(--red); }

/* ---------- 路线图 ---------- */
.route-board { position: absolute; top: 86px; bottom: 22px; left: 3vw; right: 3vw; border: 2px solid var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(42,36,28,.4); display: grid; grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr; gap: 0 20px; padding: 20px 26px; animation: boardIn .55s var(--ease-out) backwards; }
@keyframes boardIn { from { opacity: 0; transform: translateY(30px) rotate(.6deg); } }
.route-head { grid-column: 1 / -1; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; display: flex; align-items: baseline; gap: 20px; }
.route-head h2 { font-size: 30px; font-weight: 900; letter-spacing: 3px; white-space: nowrap; }
.route-head p { color: var(--ink2); font-size: 14px; flex: 1; }
.route-hp { font-size: 14px; white-space: nowrap; } .route-hp span { margin-left: 14px; color: var(--ink3); }
.route-map { position: relative; margin-top: 10px; }
.map-svg, .map-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-map line { stroke: var(--ink3); vector-effect: non-scaling-stroke; stroke-width: 2.5px; stroke-dasharray: 8 7; animation: lineIn .6s ease backwards; opacity: .55; }
.route-map line.open { opacity: 1; stroke: var(--ink); stroke-width: 3px; animation: lineIn .6s ease backwards, dashMove2 1s linear infinite; }
.route-map line.done { stroke: var(--red); stroke-dasharray: none; opacity: 1; stroke-width: 3.5px; }
@keyframes lineIn { from { opacity: 0; } }
@keyframes dashMove2 { to { stroke-dashoffset: -15; } }
.map-nodes { position: absolute; inset: 0; }
.map-node { position: absolute; transform: translate(-50%, -50%); text-align: center; cursor: default; animation: nodeIn .45s var(--ease-back) backwards; }
@keyframes nodeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.map-node span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper2); font-family: var(--brush); font-size: 40px; color: var(--ink2); box-shadow: 3px 4px 0 rgba(0,0,0,.25); transition: transform .2s var(--ease-back), box-shadow .2s, border-color .2s; margin: 0 auto; }
.map-node small { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; background: var(--paper); padding: 0 6px; }
.map-node.t-battle span { color: var(--red); } .map-node.t-elite span { color: #fff; background: #6a3a2a; }
.map-node.t-event span { color: var(--blue); } .map-node.t-rest span { color: #2c6a2c; }
.map-node.t-boss span { width: 100px; height: 100px; font-size: 56px; background: var(--ink); color: var(--gold2); border-color: var(--gold); }
.map-node.can { cursor: pointer; } .map-node.can span { animation: nodePulse 1.6s infinite; }
@keyframes nodePulse { 50% { box-shadow: 0 0 0 7px rgba(139,46,31,.22), 3px 4px 0 rgba(0,0,0,.25); } }
.map-node.can:hover span { transform: scale(1.1); border-color: var(--red); }
.map-node.sel span { transform: scale(1.16); border-color: var(--red); box-shadow: 0 0 0 5px rgba(139,46,31,.35), 3px 4px 0 rgba(0,0,0,.25); animation: none; }
.map-node.locked { opacity: .5; }
.map-node.visited span { background: var(--ink); color: var(--paper); opacity: .8; }
.map-node.visited::after { content: '已过'; position: absolute; top: 18px; left: 50%; transform: translateX(-50%) rotate(-12deg); color: var(--red); border: 2px solid var(--red); font-size: 13px; padding: 0 4px; background: rgba(239,229,207,.85); font-weight: 900; }
.map-node.start span { width: 54px; height: 54px; font-size: 28px; }
.map-node.start::after { display: none; }
.map-node.arriving span { animation: arrive .6s ease-out .45s backwards; }
@keyframes arrive { 50% { transform: scale(1.3); box-shadow: 0 0 0 14px rgba(139,46,31,.2); } }
.pawn { position: absolute; transform: translate(-50%, -125%); z-index: 5; pointer-events: none; animation: pawnBob 1.4s ease-in-out infinite; }
.pawn span { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); box-shadow: 0 4px 8px rgba(0,0,0,.4), 0 0 0 1.5px var(--ink); color: #fbefd5; font-weight: 900; font-size: 17px; }
.pawn span::after { content: ''; position: absolute; left: 50%; bottom: -11px; margin-left: -7px; border: 7px solid transparent; border-top: 9px solid var(--red); border-bottom: 0; }
@keyframes pawnBob { 50% { margin-top: -6px; } }
.node-detail { border-left: 1.5px dashed var(--ink3); padding: 14px 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.nd-type { font-size: 12px; letter-spacing: 3px; color: var(--red); }
.node-detail h3 { font-size: 26px; font-weight: 900; }
.node-detail p { font-size: 15px; line-height: 1.8; color: var(--ink2); }
.nd-enemies { font-size: 14px; background: rgba(42,36,28,.08); padding: 6px 10px; border-left: 3px solid var(--red); }
.nd-note { font-size: 13px !important; color: var(--ink3) !important; }
.node-detail .btn { margin-top: auto; }

/* ---------- 奖励 / 结果 ---------- */
.reward-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 94vw); padding: 26px 30px; border: 2px solid var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(42,36,28,.4); animation: boxIn .5s var(--ease-out) backwards; }
.reward-title { font-family: var(--brush); font-size: 46px; color: var(--red); animation: inkIn .7s var(--ease-out) backwards .15s; }
.reward-box > p { color: var(--ink2); margin: 4px 0 20px; }
.reward-cards { display: flex; gap: 26px; justify-content: center; padding: 10px 0; perspective: 1000px; }
.reward-cards .card { transition: transform .2s var(--ease-out); }
.card.deal { animation: deal .5s var(--ease-out) backwards; }
@keyframes deal { from { opacity: 0; transform: translateY(-120px) rotate(-14deg) scale(.7); } }
.fly-clone { position: fixed; z-index: 800; pointer-events: none; margin: 0; }
.reward-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: var(--ink3); }
.rest-options { display: flex; gap: 24px; justify-content: center; }
.rest-options .choice-card { width: 260px; }
.result-box, .ending-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, 94vw); max-height: 92vh; overflow: auto; padding: 34px 40px 30px; border: 2px solid var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(42,36,28,.4); animation: boxIn .55s var(--ease-out) backwards; }
.result-kicker { letter-spacing: 4px; color: var(--red); font-size: 13px; animation: fadeIn .5s backwards .2s; }
.result-box h1, .ending-box h1 { font-family: var(--brush); font-weight: 400; font-size: 52px; margin: 6px 0 14px; }
.brush-in { animation: brushIn 1s var(--ease-out) backwards .3s; }
@keyframes brushIn { from { clip-path: inset(0 100% 0 0); filter: blur(4px); } to { clip-path: inset(0 0 0 0); } }
.result-box p, .ending-box p { text-align: left; font-size: 15.5px; line-height: 1.95; color: var(--ink2); margin-bottom: 8px; }
.result-box .btn { margin-top: 16px; }
.result.failed .result-box { filter: saturate(.7); }
.fail-note { color: var(--red) !important; text-align: center !important; font-size: 13px !important; animation: fadeIn .6s backwards 1.4s; }

/* ---------- 新闻 ---------- */
.news .scene-bg { filter: saturate(.7) brightness(.75); }
.news-paper { position: absolute; right: 4vw; top: 90px; bottom: 24px; width: min(520px, 92vw); padding: 22px 28px; border: 2px solid var(--ink); box-shadow: 10px 14px 0 rgba(0,0,0,.4); display: flex; flex-direction: column; animation: paperIn .7s var(--ease-out) backwards .1s; transform: rotate(.6deg); }
@keyframes paperIn { from { opacity: 0; transform: translateX(80px) rotate(5deg); } }
.np-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px double var(--ink); padding-bottom: 6px; }
.np-head span { font-family: var(--brush); font-size: 34px; }
.np-head small { color: var(--ink3); }
.news-paper h2 { font-size: 22px; font-weight: 900; margin: 12px 0 8px; letter-spacing: 2px; }
.np-list { flex: 1; overflow: auto; }
.np-item { position: relative; border-bottom: 1px solid rgba(42,36,28,.25); padding: 9px 0; animation: printIn .5s ease backwards; }
@keyframes printIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.np-item b { display: block; font-size: 13px; color: var(--red); letter-spacing: 1px; }
.np-item p { font-size: 14.5px; line-height: 1.75; color: var(--ink2); }
.np-item.burst { background: rgba(139,46,31,.08); padding-left: 8px; padding-right: 96px; border-left: 3px solid var(--red); }
.np-stamp { top: 50% !important; margin-top: -16px; }
.np-stamp { position: absolute; right: 6px; top: 6px; font-family: var(--brush); color: var(--red); border: 2px solid var(--red); padding: 0 6px; font-size: 18px; transform: rotate(8deg); opacity: .85; animation: stamp .4s var(--ease-back) backwards .9s; }
.news-paper .btn { margin-top: 14px; }

/* ---------- 事件看板 ---------- */
.board-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #4a3622, #22180f 70%, #120c07); }
.board-bg::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(92deg, rgba(0,0,0,.08) 0 3px, transparent 3px 22px), var(--noise); opacity: .7; }
.board-layout { position: absolute; top: 86px; bottom: 16px; left: 2vw; right: 2vw; display: grid; grid-template-columns: minmax(280px, 34%) 1fr; grid-template-rows: 1fr auto; gap: 16px 22px; }
.city-map { position: relative; grid-row: 1 / 3; background: var(--paper); background-image: var(--noise), radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(90,60,20,.25)); border: 1.5px solid var(--ink2); box-shadow: 0 20px 40px rgba(0,0,0,.6); transform: rotate(-1deg); animation: mapIn .6s var(--ease-out) backwards .1s; }
@keyframes mapIn { from { opacity: 0; transform: rotate(-6deg) translateY(30px); } }
.city-map::before { content: '星辰城'; position: absolute; left: 14px; top: 10px; font-family: var(--brush); font-size: 30px; color: var(--ink2); }
.city-map .road { fill: none; stroke: var(--ink3); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 6 5; }
.city-map .river { fill: none; stroke: #6f8fa8; stroke-width: 14px; opacity: .35; vector-effect: non-scaling-stroke; }
.district { position: absolute; transform: translate(-50%, -50%); text-align: center; transition: transform .25s var(--ease-back); }
.district i { display: block; width: 14px; height: 14px; margin: 0 auto 4px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
.district span { font-size: 14px; font-weight: 600; background: rgba(239,229,207,.9); padding: 0 6px; border: 1px solid var(--ink3); white-space: nowrap; transition: background .2s, color .2s; }
.district.hot i { background: var(--red); animation: nodePulse 1.4s infinite; width: 18px; height: 18px; }
.district.hot span { background: var(--ink); color: var(--paper); }
.district.peek, .district.focus { transform: translate(-50%, -50%) scale(1.3); z-index: 2; }
.district.focus span { background: var(--red); color: #fff; border-color: var(--red); }
.event-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; overflow: auto; padding: 8px 8px 12px; align-content: start; }
.event-card { --ec: var(--red); position: relative; border: 2px solid var(--ink); padding: 10px 12px 12px; cursor: pointer; box-shadow: 5px 7px 0 rgba(0,0,0,.5); animation: rise .5s var(--ease-out) backwards; display: flex; flex-direction: column; transition: transform .18s var(--ease-out), box-shadow .2s, opacity .25s, filter .25s; }
.event-card:hover { box-shadow: 8px 16px 0 rgba(0,0,0,.45), 0 0 0 3px var(--ec); }
.event-card.dim { opacity: .45; filter: saturate(.4); }
.event-card.picked { box-shadow: 0 0 0 4px var(--gold2), 0 0 40px rgba(240,195,90,.5), 8px 16px 0 rgba(0,0,0,.45); --lift: -10px; }
.ec-head { display: flex; align-items: center; gap: 8px; }
.ec-glyph { width: 30px; height: 30px; border-radius: 50%; background: var(--ec); color: #fbefd5; display: grid; place-items: center; font-family: var(--brush); font-size: 18px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); flex-shrink: 0; }
.ec-head b { font-size: 18px; font-weight: 900; letter-spacing: 1px; flex: 1; }
.ec-key { font-size: 11px; border: 1px solid var(--ink3); color: var(--ink3); padding: 0 5px; }
.ec-img { height: 72px; margin: 8px 0; background-size: cover; background-position: center; border: 1px solid var(--ink); position: relative; filter: sepia(.25); transition: filter .3s; }
.event-card:hover .ec-img { filter: none; }
.ec-district { position: absolute; right: 0; bottom: 0; background: var(--paper); font-size: 11px; padding: 1px 6px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
.ec-stage { display: flex; gap: 3px; }
.ec-stage i { flex: 1; font-style: normal; font-size: 11px; text-align: center; border: 1px solid var(--ink3); color: var(--ink3); padding: 1px 0; }
.ec-stage i.past { background: rgba(42,36,28,.15); }
.ec-stage i.now { background: var(--ec); color: #fff; border-color: var(--ec); font-weight: 600; }
.ec-stage.secret { font-size: 12px; color: #b9c9ff; letter-spacing: 3px; text-align: center; display: block; }
.ec-text { font-size: 13.5px; line-height: 1.65; margin: 6px 0 4px; color: var(--ink); flex: 1; }
.ec-pros { list-style: none; padding: 0; margin: 0; }
.ec-pros li { font-size: 12px; color: var(--ink2); padding-left: 14px; position: relative; line-height: 1.7; }
.ec-pros li::before { content: '◆'; position: absolute; left: 0; font-size: 8px; top: 3px; color: var(--ec); }
.ec-pros li.cost { color: var(--ink3); }
.ec-warn { margin-top: 8px; font-size: 12px; color: #fff; background: var(--red); text-align: center; padding: 3px; letter-spacing: 2px; animation: warnBlink 1.5s infinite; }
@keyframes warnBlink { 50% { opacity: .65; } }
.ec-next { margin-top: 8px; font-size: 11.5px; color: var(--ink3); border-top: 1px dashed var(--ink3); padding-top: 4px; }
.event-card.secret { background: #1b2230; background-image: var(--noise), radial-gradient(ellipse at 50% 30%, rgba(120,150,255,.25), transparent 70%); color: #d8e0ff; border-color: #8aa0e0; box-shadow: 5px 7px 0 rgba(0,0,0,.5), 0 0 30px rgba(110,140,255,.3); }
.event-card.secret::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 30px rgba(140,170,255,.25); animation: secretGlow 3s ease-in-out infinite; }
@keyframes secretGlow { 50% { box-shadow: inset 0 0 50px rgba(140,170,255,.45); } }
.event-card.secret .ec-text, .event-card.secret .ec-pros li { color: #c8d2f5; }
.event-card.secret .ec-img { filter: none; }
.event-card.secret .ec-district { background: #1b2230; color: #c8d2f5; }
.event-card.secret .ec-key { color: #c8d2f5; border-color: #8aa0e0; }
.board.picking .board-note { opacity: 0; transition: opacity .2s; }
.board-note { background: rgba(239,229,207,.95); border: 1.5px solid var(--ink); padding: 10px 16px; font-size: 14px; line-height: 1.7; box-shadow: 4px 5px 0 rgba(0,0,0,.4); animation: rise .5s var(--ease-out) backwards .6s; }
.board-note p:nth-child(2) { color: var(--red); }
.board-stats { color: var(--ink3); font-size: 13px; margin-top: 4px; }
.last-week { color: var(--violet) !important; font-weight: 600; }
.confirm-bar { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 160%); display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 24px; border: 2px solid var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--gold); z-index: 20; transition: transform .35s var(--ease-back); width: min(640px, 94vw); }
.confirm-bar.show { transform: translate(-50%, 0); }
.cb-text { flex: 1; display: flex; flex-direction: column; }
.cb-text small { font-size: 12px; color: var(--ink3); letter-spacing: 2px; }
.cb-text b { font-size: 19px; }
.cb-text span { font-size: 12px; color: var(--red); }

/* ---------- 弹窗 / 档案 ---------- */
.modal { position: fixed; inset: 0; background: rgba(10,8,5,.72); display: grid; place-items: center; z-index: 600; animation: fadeIn .2s backwards; backdrop-filter: blur(2px); }
.modal-box { width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column; border: 2px solid var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(42,36,28,.4); animation: modalIn .32s var(--ease-back) backwards; }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.95); } }
.modal-box.wide { width: min(1040px, 96vw); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px 10px; border-bottom: 1.5px solid var(--ink); margin: 0 10px; }
.modal-head h2 { font-size: 22px; letter-spacing: 2px; }
.close { background: none; border: none; font-size: 30px; line-height: 1; color: var(--ink2); transition: transform .2s, color .2s; }
.close:hover { transform: rotate(90deg); color: var(--red); }
.modal-body { overflow: auto; padding: 16px 24px 22px; }
.hint ul { padding-left: 20px; margin: 0 0 18px; } .hint li { line-height: 1.85; margin-bottom: 6px; font-size: 15px; animation: paraIn .5s ease backwards; }
.hint .btn { display: block; margin: 0 auto; }
.confirm { text-align: center; font-size: 16px; line-height: 1.8; }
.ledger { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; }
.ledger-page:first-child { border-right: 1.5px dashed var(--ink3); padding-right: 26px; }
.ledger-name { font-size: 28px; font-weight: 900; } .ledger-name small { display: block; font-size: 13px; font-weight: 400; color: var(--blue); }
.tri { width: 210px; display: block; margin: 8px auto; }
.tri text { font-size: 11px; fill: var(--ink2); font-family: var(--serif); }
.tri-bg { fill: rgba(42,36,28,.05); stroke: var(--ink3); stroke-width: 1; }
.tri-mid { fill: none; stroke: var(--ink3); stroke-dasharray: 2 2; stroke-width: .7; }
.tri-val { fill: rgba(44,62,90,.35); stroke: var(--blue); stroke-width: 2; transform-origin: 90px 88px; animation: triIn .7s var(--ease-back) backwards .2s; }
@keyframes triIn { from { transform: scale(0); } }
.ledger-line { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(42,36,28,.2); padding: 5px 0; font-size: 14px; }
.ledger-line b { color: var(--violet); letter-spacing: 2px; }
.ledger h4 { font-size: 14px; letter-spacing: 3px; color: var(--red); margin: 16px 0 8px; }
.secret-h { color: var(--violet) !important; }
.rep-row { display: grid; grid-template-columns: 76px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.rep-bar { height: 6px; background: linear-gradient(90deg, rgba(139,46,31,.35), rgba(42,36,28,.1) 50%, rgba(44,106,44,.35)); position: relative; }
.rep-bar i { position: absolute; top: -4px; width: 4px; height: 14px; background: var(--ink); margin-left: -2px; }
.pos { color: #2c6a2c; } .neg { color: var(--red); }
.exp-item { border-left: 3px solid var(--red); padding: 4px 0 6px 10px; margin-bottom: 10px; animation: slideIn .4s var(--ease-out) backwards; }
.exp-item.secret { border-color: var(--violet); }
.exp-item b { font-size: 15px; } .exp-item p { font-size: 13px; color: var(--ink2); line-height: 1.65; }
.exp-item small { display: inline-block; font-size: 11px; margin: 3px 6px 0 0; padding: 0 6px; border: 1px solid var(--ink3); color: var(--ink3); }
.exp-item small[data-tip] { cursor: help; }
.end-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; margin: 14px 0; }
.end-grid h4 { font-size: 13px; letter-spacing: 3px; color: var(--red); margin: 8px 0 6px; }
.end-exp { font-size: 14px; padding: 2px 0; animation: slideIn .4s var(--ease-out) backwards; } .end-exp.secret { color: var(--violet); }
.end-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; border-bottom: 1px solid rgba(42,36,28,.15); animation: slideIn .4s var(--ease-out) backwards; }

/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  html, body { overflow: auto; }
  .screen { position: relative; min-height: 100vh; overflow: visible; }
  .screen.battle { position: absolute; overflow: hidden; }
  .topbar { flex-wrap: wrap; position: relative; top: 0; left: 0; right: 0; padding: 10px; }
  .date-plate { min-width: 0; }
  .title-box { position: relative; left: auto; top: auto; transform: none; margin: 10px auto; animation: none; }
  .title-box h1 { font-size: 60px; }
  .origins { grid-template-columns: 1fr; }
  .story-main { position: relative; top: 0; left: 0; right: 0; flex-direction: column; padding: 10px; }
  .story-text { width: auto; }
  .choice-row { position: relative; bottom: auto; flex-direction: column; align-items: center; padding: 16px; }
  .choice-card { width: 100%; max-width: 420px; }
  .route-board { position: relative; top: 0; left: 0; right: 0; margin: 10px; grid-template-columns: 1fr; min-height: 640px; }
  .route-map { min-height: 340px; }
  .map-node span { width: 52px; height: 52px; font-size: 28px; } .map-node.t-boss span { width: 70px; height: 70px; font-size: 40px; }
  .node-detail { border-left: 0; border-top: 1.5px dashed var(--ink3); padding: 12px 0 0; }
  .board-layout { position: relative; top: 0; left: 0; right: 0; display: block; padding: 10px 10px 120px; }
  .city-map { height: 300px; margin-bottom: 16px; }
  .confirm-bar { position: fixed; flex-wrap: wrap; }
  .news-paper { position: relative; right: auto; top: auto; bottom: auto; margin: 10px auto; transform: none; animation: none; }
  .reward-box, .result-box, .ending-box { position: relative; left: auto; top: auto; transform: none; margin: 20px auto; animation: none; }
  .reward-cards { flex-wrap: wrap; }
  .field { top: 150px; bottom: 230px; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 0 10px; }
  .player { width: 100%; padding: 8px 10px; }
  .p-stats { display: none; }
  .enemies { gap: 10px; justify-content: center; }
  .enemy, .enemy.elite { width: 120px; } .enemy.boss { width: 200px; }
  .enemy-frame { height: 100px; } .enemy.boss .enemy-frame { height: 140px; }
  .hand .card.in-hand { width: 118px; height: 170px; left: -59px; }
  .hand .card .card-front { padding: 8px 6px; }
  .hand .card .card-art { height: 42px; } .hand .card .glyph { font-size: 32px; }
  .hand .card .card-text { font-size: 10.5px; }
  .pile { width: 54px; height: 70px; }
  .end-turn { padding: 10px 12px; font-size: 15px; min-width: 0; }
  .stab-wrap { order: 3; flex-basis: 100%; }
  .play-zone { left: 6%; right: 6%; }
  .ledger, .end-grid { grid-template-columns: 1fr; }
  .ledger-page:first-child { border-right: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.reward-picked { font-size: 20px; color: var(--ink2); padding: 60px 0; animation: paraIn .5s ease backwards .35s; }
.reward-picked b { color: var(--red); font-size: 24px; }

/* =========================================================
   v0.4 · 同伴 / 立绘占位 / 一天切片
   ========================================================= */
.card.s-mate { --sc: #b5642a; }
.card-owner { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; background: #f3e1b8; color: var(--sc); border: 2px solid var(--sc); display: grid; place-items: center; font-weight: 900; font-size: 13px; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.card-down { position: absolute; inset: 0; border-radius: 6px; background: rgba(20,16,12,.72); color: #f3e1b8; display: none; place-items: center; font-size: 18px; letter-spacing: 6px; font-weight: 900; z-index: 3; pointer-events: none; }
.card.owner-down .card-down { display: grid; }
.card.owner-down { filter: grayscale(.8); }

/* 立绘占位框 */
.portrait { position: relative; flex-shrink: 0; border: 2px dashed rgba(243,225,184,.7); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px), linear-gradient(180deg, rgba(60,48,36,.85), rgba(25,20,15,.92)); color: #f3e1b8; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-radius: 4px; transition: border-color .2s, box-shadow .2s, transform .25s var(--ease-out); }
.portrait.p-tina { border-color: rgba(255,170,100,.85); background: repeating-linear-gradient(135deg, rgba(255,160,90,.07) 0 8px, transparent 8px 16px), linear-gradient(180deg, rgba(110,58,28,.88), rgba(40,22,12,.94)); }
.portrait.p-hero { border-color: rgba(160,190,230,.7); background: repeating-linear-gradient(135deg, rgba(150,180,230,.06) 0 8px, transparent 8px 16px), linear-gradient(180deg, rgba(38,52,76,.9), rgba(16,22,34,.94)); }
.pt-tag { position: absolute; top: 4px; left: 4px; font-size: 10px; letter-spacing: 2px; padding: 0 5px; border: 1px solid currentColor; opacity: .55; }
.pt-name { font-weight: 900; letter-spacing: 2px; }
.pt-expr { margin-top: 6px; padding: 2px 8px; background: rgba(243,225,184,.95); color: #3a2614; font-weight: 600; border-radius: 3px; line-height: 1.3; max-width: 92%; }
.pt-expr::before { content: '表情：'; font-weight: 400; opacity: .6; font-size: .85em; }
.portrait.sm { width: 64px; height: 84px; }
.portrait.sm .pt-tag { display: none; }
.portrait.sm .pt-name { font-size: 13px; }
.portrait.sm .pt-expr { font-size: 11px; padding: 1px 4px; margin-top: 4px; }
.portrait.sm .pt-expr::before { content: none; }
.portrait.md { width: 150px; height: 200px; }
.portrait.md .pt-name { font-size: 22px; }
.portrait.md .pt-expr { font-size: 15px; }
.portrait.lg { width: min(320px, 28vw); height: min(520px, calc(100vh - 290px)); }
.portrait.lg .pt-name { font-size: 40px; letter-spacing: 8px; font-family: var(--brush); }
.portrait.lg .pt-expr { font-size: 22px; padding: 6px 16px; margin-top: 14px; }
.portrait.lg .pt-tag { font-size: 12px; top: 10px; left: 10px; }

/* 战斗：队伍 */
.left-col { width: 300px; display: flex; flex-direction: column; gap: 8px; animation: slideL .5s var(--ease-out) backwards .2s; }
.party { display: flex; flex-direction: column; gap: 8px; }
.ally { position: relative; display: flex; gap: 10px; align-items: center; color: #eadcbc; background: rgba(15,12,8,.76); border: 1px solid rgba(234,220,188,.3); padding: 8px 12px 8px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s, opacity .3s, filter .3s; }
.ally-body { flex: 1; min-width: 0; }
.ally .p-name { font-size: 16px; margin-bottom: 6px; }
.ally .p-name small { display: inline; margin-left: 6px; font-size: 11px; }
.ally .hpbar { height: 16px; }
.ally .hptext { line-height: 15px; font-size: 11px; }
.ally .block-badge { left: -10px; top: -9px; width: 28px; height: 28px; font-size: 13px; }
.ally .statuses { margin-top: 5px; }
.ally.low { box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 0 26px rgba(200,30,20,.35); animation: lowPulse 1.6s ease-in-out infinite; }
.ally.targeted { border-color: rgba(255,120,90,.8); box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,120,90,.5), -6px 0 18px rgba(220,70,40,.35); }
.ally.targeted::before { content: '◀'; position: absolute; right: -18px; top: 50%; margin-top: -9px; color: #ff8a6a; font-size: 14px; animation: tgtNudge 1s ease-in-out infinite; }
@keyframes tgtNudge { 50% { transform: translateX(-4px); } }
.ally.acting-card { transform: translateX(10px); border-color: var(--gold2); box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 18px rgba(240,195,90,.45); }
.ally.acting-card .portrait { border-color: var(--gold2); border-style: solid; }
.ally.down { filter: grayscale(1) brightness(.6); }
.down-mark { position: absolute; inset: 0; display: none; place-items: center; font-size: 26px; letter-spacing: 12px; font-weight: 900; color: #e8c9b0; font-family: var(--brush); pointer-events: none; }
.ally.down .down-mark { display: grid; }
.left-col .ap { margin-top: 2px; background: rgba(15,12,8,.76); border: 1px solid rgba(234,220,188,.3); padding: 6px 12px; color: #eadcbc; }
.statuses.global:empty { display: none; }
.intent-target { font-size: 12px; font-weight: 700; color: #fff; background: var(--red); padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.intent-target.t-tina { background: #b5642a; }
.intent-target.t-hero { background: var(--blue); }

/* =========== 对话（VN） =========== */
.vn .scene-bg { filter: saturate(.85) brightness(.82); }
.vn-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(10,8,5,.45), transparent 22%, transparent 50%, rgba(10,8,5,.8) 100%); }
.bg-missing { position: absolute; top: 74px; right: 18px; font-size: 12px; color: #f3e1b8; background: rgba(15,12,8,.6); border: 1px dashed rgba(243,225,184,.5); padding: 4px 10px; letter-spacing: 1px; z-index: 3; }
.place-card { position: absolute; top: 74px; left: 18px; z-index: 3; color: #f3e1b8; padding: 8px 18px 8px 14px; background: linear-gradient(90deg, rgba(15,12,8,.85), rgba(15,12,8,0)); border-left: 4px solid var(--red2); animation: placeIn .7s var(--ease-out) backwards .35s; }
.place-card small { display: block; font-size: 12px; letter-spacing: 4px; opacity: .75; }
.place-card b { font-size: 20px; letter-spacing: 2px; }
@keyframes placeIn { from { opacity: 0; transform: translateX(-30px); } }
.vn-stage { position: absolute; left: 0; right: 0; bottom: 170px; top: 110px; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: 12vw; pointer-events: auto; }
.vn-stage .portrait { box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: filter .25s, transform .25s; filter: brightness(.7); }
.vn-stage .portrait.speaking { filter: none; }
.vn-box { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(1040px, 94vw); min-height: 150px; z-index: 4; color: #f6ead0; background: linear-gradient(180deg, rgba(22,17,12,.9), rgba(12,9,6,.95)); border: 1px solid rgba(243,225,184,.35); box-shadow: 0 16px 40px rgba(0,0,0,.6), inset 0 0 0 4px rgba(12,9,6,.9), inset 0 0 0 5px rgba(240,195,90,.25); padding: 26px 36px 30px; cursor: pointer; transition: opacity .25s, filter .25s; animation: vnBoxIn .5s var(--ease-out) backwards .2s; }
@keyframes vnBoxIn { from { opacity: 0; transform: translate(-50%, 30px); } }
.vn-box.dim { opacity: .55; filter: blur(1px); }
.vn-name { position: absolute; top: -18px; left: 28px; padding: 4px 20px; font-weight: 900; font-size: 17px; letter-spacing: 3px; background: var(--blue); color: #f3e6c4; border: 1px solid rgba(243,225,184,.5); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.vn-box.char .vn-name { background: #b5642a; }
.vn-text { font-size: 19px; line-height: 1.85; letter-spacing: .5px; min-height: 68px; }
.vn-box.narr .vn-text { color: #d9ccb0; font-style: normal; }
.vn-next { position: absolute; right: 26px; bottom: 12px; font-size: 13px; color: var(--gold2); animation: bob 1.2s ease-in-out infinite; }
.vn-tools { position: absolute; right: 20px; top: -16px; display: flex; gap: 6px; }
.vn-btn { font-size: 12px; letter-spacing: 2px; padding: 4px 12px; background: rgba(15,12,8,.85); color: #d9ccb0; border: 1px solid rgba(243,225,184,.35); transition: background .15s, color .15s; }
.vn-btn:hover { background: rgba(60,48,36,.95); color: #fff; }
.vn-btn.on { background: var(--gold); color: #1a140c; border-color: var(--gold2); }
.vn-choices { position: absolute; left: max(20px, calc(50% - 470px)); bottom: 196px; width: min(600px, 56vw); display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.vn-choice { display: flex; align-items: center; gap: 14px; text-align: left; font-size: 17px; padding: 13px 20px; color: var(--ink); border: 1.5px solid var(--ink); background: var(--paper); background-image: var(--noise); box-shadow: 4px 5px 0 rgba(0,0,0,.4); animation: choiceIn .4s var(--ease-back) backwards; transition: transform .15s var(--ease-out), background .15s, box-shadow .15s; }
@keyframes choiceIn { from { opacity: 0; transform: translateX(-40px); } }
.vn-choice:hover { transform: translateX(8px); background-color: #fff6df; box-shadow: 6px 6px 0 rgba(139,46,31,.6); }
.vn-choice .vc-num { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex-shrink: 0; }
.vn-choice.picked { background-color: #fff3d0; transform: scale(1.04); box-shadow: 0 0 0 3px var(--gold2), 4px 5px 0 rgba(0,0,0,.4); }
.vn-choice.gone { opacity: 0; transform: translateX(30px); transition: opacity .25s, transform .25s; }
.vn-log p { padding: 6px 0; border-bottom: 1px dashed rgba(42,36,28,.2); line-height: 1.7; font-size: 14px; }
.vn-log b { color: var(--red); margin-right: 10px; }
.vn-log { max-height: 60vh; overflow: auto; }

/* 收获飘字 */
.gain-pop { position: fixed; transform: translateX(-50%); z-index: 50; pointer-events: none; font-weight: 900; font-size: 17px; letter-spacing: 1px; padding: 5px 14px; border-radius: 20px; white-space: nowrap; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.45); animation: gainPop 2.2s var(--ease-out) forwards; }
.gain-pop.bond { background: linear-gradient(90deg, #d9673a, #e8925a); }
.gain-pop.bond::before { content: '♥ '; }
.gain-pop.exp { background: #3a5a7a; }
.gain-pop.level { background: linear-gradient(90deg, #b08a3e, #f0c35a); color: #2a1a06; }
.gain-pop.money { background: #6a7a2a; }
.gain-pop.neg { background: #6a4a3a; }
@keyframes gainPop { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50px); } }

/* 顶部日历 HUD */
.day-hud { position: absolute; top: 14px; left: 16px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 16px; color: #f3e1b8; pointer-events: none; }
.day-hud > * { pointer-events: auto; }
.dh-date { display: flex; align-items: baseline; gap: 6px; background: var(--paper); color: var(--ink); padding: 4px 14px; border: 1.5px solid var(--ink); box-shadow: 3px 4px 0 rgba(0,0,0,.35); }
.dh-date b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.dh-date span { font-size: 14px; background: var(--red); color: #fff; padding: 0 5px; }
.dh-date small { font-size: 12px; color: var(--ink3); }
.dh-slots { display: flex; gap: 2px; }
.dh-slots i { font-style: normal; font-size: 12px; letter-spacing: 1px; padding: 4px 10px; background: rgba(15,12,8,.6); color: rgba(243,225,184,.5); }
.dh-slots i.past { color: rgba(243,225,184,.3); text-decoration: line-through; }
.dh-slots i.now { background: var(--red); color: #fff; font-weight: 700; }
.dh-stats { margin-left: auto; display: flex; gap: 10px; font-size: 13px; }
.dh-stats > span { background: rgba(15,12,8,.7); padding: 5px 12px; border: 1px solid rgba(243,225,184,.25); cursor: help; }
.dh-bond { display: flex; align-items: center; gap: 8px; }
.dh-bond em { display: block; width: 60px; height: 6px; background: rgba(255,255,255,.15); }
.dh-bond u { display: block; height: 100%; background: linear-gradient(90deg, #d9673a, #f0a070); transition: width .5s var(--ease-out); }

/* 时段推进 */
.slot-trans { position: fixed; inset: 0; z-index: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: rgba(10,8,5,.86); color: #f3e1b8; }
.st-date b { font-size: 30px; letter-spacing: 4px; } .st-date small { margin-left: 14px; opacity: .7; }
.st-strip { position: relative; display: flex; width: min(720px, 90vw); border-top: 1px solid rgba(243,225,184,.4); border-bottom: 1px solid rgba(243,225,184,.4); }
.st-strip span { flex: 1; text-align: center; padding: 12px 0; font-size: 15px; letter-spacing: 2px; color: rgba(243,225,184,.45); transition: color .4s; }
.st-strip span.past { color: rgba(243,225,184,.25); }
.st-strip span.now { color: #fff; font-weight: 900; }
.st-marker { position: absolute; bottom: -9px; width: 16px; height: 16px; margin-left: -8px; background: var(--red2); transform: rotate(45deg); transition: left .8s var(--ease-out); box-shadow: 0 0 12px rgba(220,90,50,.7); }
.st-now { font-family: var(--brush); font-size: 64px; letter-spacing: 16px; animation: brushIn .8s var(--ease-out) backwards .5s; }

/* 开场日期卡 */
.day-card { position: fixed; inset: 0; z-index: 800; background: radial-gradient(ellipse at 50% 50%, #2a2016, #0d0a07 70%); color: #f3e1b8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.dc-year { letter-spacing: 8px; font-size: 14px; opacity: .7; animation: fadeIn .6s backwards .2s; }
.dc-date { font-family: var(--brush); font-size: 96px; letter-spacing: 10px; animation: brushIn 1s var(--ease-out) backwards .4s; }
.dc-week { font-size: 18px; letter-spacing: 6px; animation: fadeIn .6s backwards .9s; }
.dc-line { margin-top: 18px; font-size: 13px; letter-spacing: 4px; color: var(--gold2); animation: fadeIn .6s backwards 1.2s; }

/* 午后日程 */
.schedule { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.sch-title { position: relative; text-align: center; color: #f3e1b8; animation: fadeIn .5s backwards .2s; }
.sch-title small { display: block; letter-spacing: 6px; font-size: 13px; color: var(--gold2); }
.sch-title b { display: block; font-family: var(--brush); font-size: 44px; letter-spacing: 4px; margin: 4px 0; }
.sch-title span { font-size: 14px; opacity: .7; }
.act-row { position: relative; display: flex; gap: 26px; }
.act-card { position: relative; width: 240px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; border: 2px solid var(--ink); background-color: var(--paper); background-image: var(--noise); box-shadow: 6px 8px 0 rgba(0,0,0,.4); animation: rise .5s var(--ease-out) backwards; }
.act-card:hover { box-shadow: 8px 12px 0 rgba(0,0,0,.4), 0 0 0 3px var(--gold2); }
.act-card.with-mate { box-shadow: 6px 8px 0 rgba(0,0,0,.4), inset 0 0 0 4px var(--paper), inset 0 0 0 5px #b5642a; }
.act-card.picked { box-shadow: 0 0 0 4px var(--gold2), 0 20px 50px rgba(0,0,0,.5); }
.ac-head { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.ac-head b { font-size: 17px; }
.ac-num { width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex-shrink: 0; }
.act-card .portrait.sm, .ac-art { width: 100%; height: 120px; }
.act-card .portrait.sm .pt-name { font-size: 18px; } .act-card .portrait.sm .pt-expr { font-size: 13px; }
.ac-art { background-size: cover; background-position: center; border: 1px solid var(--ink); filter: saturate(.8); }
.ac-place { align-self: stretch; font-size: 12px; color: var(--ink3); letter-spacing: 1px; border-bottom: 1px dashed rgba(42,36,28,.3); padding-bottom: 6px; }
.ac-desc { align-self: stretch; font-size: 14px; line-height: 1.6; min-height: 44px; }
.ac-gains { align-self: stretch; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ac-gains li { font-size: 13px; font-weight: 600; color: var(--red); padding-left: 16px; position: relative; }
.ac-gains li::before { content: '◆'; position: absolute; left: 0; font-size: 10px; top: 3px; }
.stat-panel { position: absolute; left: 22px; bottom: 22px; width: 220px; color: #f3e1b8; background: rgba(15,12,8,.78); border: 1px solid rgba(243,225,184,.3); padding: 12px 16px; animation: slideL .5s var(--ease-out) backwards .5s; }
.stat-panel h4 { font-size: 16px; margin-bottom: 8px; } .stat-panel h4 small { margin-left: 8px; font-size: 11px; opacity: .7; font-weight: 400; }
.sp-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; }
.sp-row b { width: 18px; font-size: 18px; color: #fff; }
.sp-exp { display: flex; gap: 3px; margin-left: auto; cursor: help; }
.sp-exp i { width: 14px; height: 6px; background: rgba(255,255,255,.15); }
.sp-exp i.on { background: var(--gold2); }

/* 羁绊提升 */
.bond-up { position: fixed; inset: 0; z-index: 850; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, rgba(80,40,20,.85), rgba(10,8,5,.94) 70%); animation: fadeIn .35s backwards; }
.bu-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,190,120,.09) 0 8deg, transparent 8deg 20deg); animation: spin 30s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.bu-inner { position: relative; display: flex; gap: 34px; align-items: center; color: #f3e1b8; }
.bu-kicker { position: absolute; top: -60px; left: 0; right: 0; text-align: center; font-family: var(--brush); font-size: 40px; letter-spacing: 16px; color: var(--gold2); text-shadow: 0 0 20px rgba(255,180,80,.6); animation: brushIn .8s var(--ease-out) backwards .1s; }
.bu-inner > .portrait { animation: rise .6s var(--ease-back) backwards .2s; }
.bu-info { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bu-name { font-size: 30px; font-weight: 900; letter-spacing: 4px; } .bu-name small { margin-left: 12px; font-size: 13px; font-weight: 400; opacity: .7; letter-spacing: 1px; }
.bu-lv { display: flex; align-items: center; gap: 14px; font-size: 22px; animation: fadeIn .5s backwards .5s; }
.bu-lv span { opacity: .55; } .bu-lv i { font-style: normal; color: var(--gold2); } .bu-lv b { font-size: 34px; color: #ffd27a; text-shadow: 0 0 14px rgba(255,190,90,.6); }
.bu-unlock { display: flex; flex-direction: column; gap: 6px; animation: fadeIn .4s backwards .7s; }
.bu-unlock small { font-size: 12px; letter-spacing: 4px; color: var(--gold2); }
.bu-line { max-width: 360px; font-size: 15px; line-height: 1.7; opacity: .9; }

/* 出发队伍 */
.party-select { display: grid; place-items: center; }
.ps-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ps-title { text-align: center; color: #f3e1b8; }
.ps-title small { display: block; font-size: 13px; letter-spacing: 6px; color: var(--gold2); }
.ps-title b { display: block; font-family: var(--brush); font-size: 46px; letter-spacing: 6px; }
.ps-title span { font-size: 13px; opacity: .7; }
.ps-row { display: flex; gap: 18px; }
.ps-slot { position: relative; display: flex; gap: 12px; align-items: center; width: 300px; padding: 12px; color: #f3e1b8; background: rgba(15,12,8,.8); border: 1.5px solid rgba(243,225,184,.3); transition: border-color .2s, box-shadow .2s, opacity .2s, transform .15s; animation: rise .5s var(--ease-out) backwards .3s; }
.ps-slot.filled:not(.hero) { cursor: pointer; }
.ps-slot.filled:not(.hero):hover { transform: translateY(-3px); }
.ps-slot:not(.on):not(.hero).filled { opacity: .5; }
.ps-slot.on, .ps-slot.hero { border-color: var(--gold2); box-shadow: 0 0 20px rgba(240,195,90,.25); }
.ps-info { display: flex; flex-direction: column; gap: 3px; }
.ps-info b { font-size: 18px; } .ps-info small { font-size: 12px; opacity: .75; }
.ps-deck { font-size: 12px; color: var(--gold2); } .ps-deck em { font-style: normal; margin-left: 6px; color: #ffb070; }
.ps-check { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(243,225,184,.5); display: grid; place-items: center; font-size: 13px; color: transparent; transition: background .2s, color .2s; }
.ps-slot.on .ps-check { background: var(--gold); color: #1a140c; border-color: var(--gold2); }
.ps-locked { display: flex; gap: 10px; }
.ps-slot.locked { width: 92px; flex-direction: column; gap: 4px; padding: 10px 6px; opacity: .5; border-style: dashed; cursor: help; animation-delay: .45s; }
.ps-q { width: 50px; height: 64px; border: 1.5px dashed rgba(243,225,184,.5); display: grid; place-items: center; font-size: 26px; }
.ps-slot.locked small { font-size: 11px; }

/* 一天总结 */
.summary { display: grid; place-items: center; }
.sum-box { position: relative; width: min(640px, 94vw); padding: 30px 36px; text-align: center; border: 2px solid var(--ink); background-color: var(--paper); background-image: var(--noise); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(42,36,28,.4); animation: modalIn .5s var(--ease-back) backwards; }
.sum-box h1 { font-family: var(--brush); font-size: 38px; margin: 6px 0 18px; font-weight: 400; }
.sum-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; text-align: left; }
.sum-table tr { animation: paraIn .4s ease backwards; border-bottom: 1px dashed rgba(42,36,28,.25); }
.sum-table th { font-weight: 400; color: var(--ink2); padding: 7px 4px; width: 32%; }
.sum-table td { padding: 7px 4px; font-weight: 700; }
.sum-table td.muted { font-weight: 400; font-size: 13px; text-align: right; }
.sum-tomorrow { text-align: left; background: rgba(42,36,28,.06); padding: 12px 18px; }
.sum-tomorrow h4 { font-size: 15px; margin-bottom: 6px; color: var(--red); }
.sum-tomorrow ul { margin: 0 0 8px; padding-left: 20px; line-height: 1.8; font-size: 14px; }
.sum-tomorrow p { font-size: 12px; }