/* 冥契 · 黄泉纸扎 — complete visual layer. Old stylesheets are no longer loaded. */
:root{
  --lacquer:#0e0a0c; --lacquer-2:#16100f; --lacquer-3:#211816; --ink-line:#3a2a26;
  --bone:#ece3d1; --bone-dim:#b3a690; --ash:#7c7064;
  --cinnabar:#d23b2b; --cinnabar-deep:#8e1d16; --blood:#ff4a3a;
  --phosphor:#86f2cf; --phosphor-deep:#2f8f78;
  --joss:#d8ab4f; --joss-deep:#8a6524;
  --bruise:#7a5c9c; --bruise-deep:#3c2a52;
  --r-common:#9aa3a0; --r-rare:#6fc6ff; --r-trea:#c483ff; --r-leg:#f2b84b;
  --f-title:"STXingkai","华文行楷","Xingkai SC","KaiTi","楷体","STKaiti","Noto Sans CJK SC",serif;
  --f-body:"Source Han Serif SC","Noto Serif CJK SC","Songti SC","SimSun","宋体","Noto Sans CJK SC",serif;
  --f-num:"Palatino Linotype","Book Antiqua",Georgia,"Noto Sans CJK SC",serif;
  --hdr:52px; --ease:cubic-bezier(.2,.8,.2,1); --speed:1;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--lacquer);color:var(--bone);font:15px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
.hidden{display:none!important}
::selection{background:var(--cinnabar);color:var(--bone)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#3b2b26;border-radius:4px}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px}

/* ---------- ambient canvas + vignette ---------- */
#netherBg{position:fixed;inset:0;z-index:0;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.72) 100%)}
.underworld-atmosphere{display:none}
#app{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column}

/* ---------- buttons ---------- */
button{cursor:pointer;border:0;background:none}
#app button:not(.unit):not(.hand-card):not(.node):not(.reward-card):not(.codex-spirit-card):not(.collection-spirit):not(.brand),
.modal-card button,#noviceTip button{
  position:relative;padding:.5em 1.1em;min-height:38px;border:1px solid #4a3830;border-radius:3px;
  background:linear-gradient(180deg,#241a17,#170f0e);color:var(--bone);letter-spacing:.06em;
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s}
#app button:not(.unit):not(.hand-card):not(.node):not(.reward-card):not(.codex-spirit-card):not(.collection-spirit):not(.brand):hover:not(:disabled),
.modal-card button:hover:not(:disabled){border-color:var(--phosphor-deep);box-shadow:0 0 0 1px rgba(134,242,207,.15),0 0 18px rgba(134,242,207,.12);transform:translateY(-1px)}
button:disabled{opacity:.38;cursor:not-allowed}
button.primary,#app button.primary,.modal-card button.primary{
  background:linear-gradient(180deg,#b5352a,#7c1a14)!important;border-color:#e3644f!important;color:#fff3e4!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,0 6px 22px rgba(210,59,43,.25)}
button.primary:hover:not(:disabled){box-shadow:0 0 28px rgba(255,74,58,.45)!important}

/* ---------- header ---------- */
header{position:relative;z-index:5;height:var(--hdr);flex:none;display:flex;align-items:center;gap:10px;padding:0 18px;
  background:linear-gradient(180deg,rgba(14,10,12,.96),rgba(14,10,12,.72));border-bottom:1px solid #2c201c}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--cinnabar-deep) 20%,var(--joss-deep) 50%,var(--cinnabar-deep) 80%,transparent)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--bone)}
.brand b{display:grid;place-items:center;width:34px;height:34px;background:var(--cinnabar);color:#fff4e6;font:700 20px/1 var(--f-title);border-radius:3px;transform:rotate(-4deg);box-shadow:0 0 0 2px #2a0905 inset,0 0 14px rgba(210,59,43,.45)}
.brand span{font:20px/1.1 var(--f-title);letter-spacing:.12em;text-align:left}
.brand small{display:block;font:11px var(--f-body);letter-spacing:.32em;color:var(--bone-dim)}
#hud{display:flex;gap:6px;flex-wrap:wrap}
#hud span{padding:3px 10px;border:1px solid #3a2a24;border-radius:999px;font-size:12.5px;color:var(--bone-dim);background:rgba(0,0,0,.35)}
header>button{min-height:32px!important;padding:.25em .9em!important;font-size:13.5px}
#compactMenu{display:none}

/* ---------- screen ---------- */
#screen{position:relative;flex:1;min-height:0;overflow:auto;padding:22px clamp(16px,3vw,44px)}
h1,h2,h3{font-weight:400;letter-spacing:.06em}
h1{font:clamp(34px,4.4vw,64px)/1.08 var(--f-title)}
h2{font:26px/1.25 var(--f-title)}
h3{font:18px/1.3 var(--f-title)}
p{color:var(--bone-dim)}
.eyebrow,.story-tag{display:inline-block;font-size:12.5px;letter-spacing:.2em;color:var(--joss);padding:2px 0;border-bottom:1px solid rgba(216,171,79,.35);margin-bottom:8px}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
details>summary{cursor:pointer;color:var(--joss);font-family:var(--f-title);font-size:18px;padding:6px 0;list-style:none}
details>summary::before{content:"卍 ";color:var(--cinnabar);font-size:13px}

/* ---------- home ---------- */
body.home-screen #screen{display:grid;grid-template-rows:1fr auto;gap:18px;overflow:hidden;padding-bottom:18px}
.mainline-home{position:relative;display:grid;grid-template-columns:minmax(520px,1.2fr) minmax(300px,1fr);align-items:center;min-height:0}
.mainline-home>div:first-child{position:relative;z-index:2;max-width:640px}
.mainline-home h1{font-size:clamp(44px,5.2vw,80px);line-height:1.02;letter-spacing:.08em;white-space:nowrap;color:var(--bone);
  text-shadow:0 0 22px rgba(210,59,43,.35),0 2px 0 #000}
.mainline-home h1 span{display:block;margin-top:.25em;font-size:.48em;letter-spacing:.6em;color:var(--cinnabar);text-shadow:0 0 16px rgba(210,59,43,.55)}
.mainline-home p{margin:18px 0 6px;max-width:30em;font-size:14.5px}
.home-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.home-actions button{font-size:13.5px!important;min-height:34px!important}
.hero{position:relative;height:100%;min-height:300px}
.hero .portrait{position:absolute;bottom:-4%;height:108%;aspect-ratio:.62;background-size:contain;background-repeat:no-repeat;background-position:bottom center;filter:drop-shadow(0 0 30px rgba(0,0,0,.9))}
.hero .portrait:nth-child(1){left:2%;height:86%;bottom:0%;animation:heroFloat 7s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(134,242,207,.25)) drop-shadow(0 20px 30px #000)}
.hero .portrait:nth-child(2){right:2%;height:94%;bottom:2%;animation:heroFloat 8s ease-in-out -3s infinite;filter:drop-shadow(0 0 30px rgba(210,59,43,.35)) drop-shadow(0 20px 30px #000)}
.hero::before{content:"";position:absolute;left:10%;right:6%;bottom:2%;height:30%;background:radial-gradient(50% 50% at 50% 70%,rgba(210,59,43,.28),transparent 70%);filter:blur(10px)}
.hero-caption{display:none}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.save-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.save-slot{position:relative;padding:14px 16px 14px 18px;background:linear-gradient(180deg,rgba(33,24,22,.92),rgba(18,12,11,.94));border:1px solid #3a2a24;border-radius:4px;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s}
.save-slot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--cinnabar),var(--cinnabar-deep))}
.save-slot:hover{transform:translateY(-3px);border-color:#6a4a3c}
.save-slot h2{font-size:21px;margin:2px 0}
.save-slot p{font-size:12.5px;line-height:1.55;min-height:3.1em}
.save-slot .choices{margin-top:10px;gap:6px}
.save-slot .choices button{min-height:32px!important;font-size:13px;padding:.3em .8em!important}

/* ---------- map / chapter ---------- */
.chapter{max-width:1180px;margin:0 auto}
.chapter-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #2c201c}
.chapter-head h1{font-size:clamp(32px,3.6vw,52px)}
.chapter-head p{font-size:13px}
.chapter-head .choices{margin:0}
.chapter-head .choices button{font-size:13px;min-height:34px!important}
.next-destinations{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin:22px 0 10px}
.next-destinations>b{width:100%;font:20px var(--f-title);color:var(--joss)}
.route-overview{margin-top:14px}
.route-map{position:relative;margin:10px auto;max-width:980px}
.route-mist{position:absolute;inset:0;background:radial-gradient(40% 20% at 50% 30%,rgba(134,242,207,.05),transparent),radial-gradient(40% 30% at 30% 70%,rgba(210,59,43,.05),transparent)}
.route-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-lines path{fill:none;stroke:#5a4034;stroke-width:1.6;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;animation:routeFlow 2.4s linear infinite}
@keyframes routeFlow{to{stroke-dashoffset:-16}}
.route-node-wrap{position:absolute;transform:translate(-50%,0);width:min(200px,24%)}
.traveler{position:absolute;left:50%;top:-24px;transform:translateX(-50%);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,#fff 0,var(--phosphor) 35%,transparent 70%);color:transparent;font-size:0;animation:wisp 1.8s ease-in-out infinite;z-index:3}
@keyframes wisp{50%{transform:translate(-50%,-5px) scale(1.15);filter:brightness(1.3)}}
.node{position:relative;width:100%;min-height:104px;padding:12px 12px 10px;text-align:left;border-radius:4px;color:var(--bone);
  background:linear-gradient(180deg,#221815,#140d0c);border:1px solid #3a2a24;
  clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.next-destinations .node{width:min(240px,100%)}
.node .type{font-size:12px;letter-spacing:.18em;color:var(--joss)}
.node h3{font-size:17px;margin:4px 0}
.node p{font-size:12px}
.node.battle{--node:#c4553f}.node.boss{--node:#ff4a3a}.node.camp{--node:#e2a64a}.node.event{--node:#b9ab93}.node.reward{--node:#86f2cf}.node.ending{--node:#d8ab4f}
.node::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--node)}
.node.boss{background:linear-gradient(180deg,#2c1210,#150a09);border-color:#6a2a20}
.node.boss h3{color:#ffd9cf}
.node.available{border-color:var(--node);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 0 22px color-mix(in srgb,var(--node) 30%,transparent);animation:nodeBreath 2.6s ease-in-out infinite}
.node.available:hover{transform:translateY(-4px) scale(1.02)}
@keyframes nodeBreath{50%{box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 0 34px color-mix(in srgb,var(--node) 45%,transparent)}}
.node.completed{opacity:.55}
.node.completed::after{content:"已";position:absolute;right:8px;bottom:6px;width:26px;height:26px;display:grid;place-items:center;border:2px solid var(--cinnabar);color:var(--cinnabar);font:15px/1 var(--f-title);border-radius:3px;transform:rotate(-12deg);opacity:.9}
.node.locked{opacity:.32;filter:grayscale(.6)}
.map-footer{margin-top:16px;font-size:12.5px;text-align:center}

/* ---------- modal (scroll) ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:3vh 3vw;
  background:radial-gradient(70% 70% at 50% 50%,rgba(20,8,8,.62),rgba(0,0,0,.86));backdrop-filter:blur(3px);animation:modalFade .35s ease}
@keyframes modalFade{from{opacity:0}}
.modal-card{position:relative;width:min(860px,96vw);max-height:92vh;overflow:auto;padding:30px 36px 26px;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(216,171,79,.06),transparent 60%),
    linear-gradient(180deg,#1d1513,#120c0b);
  border:1px solid #4a372d;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 0 6px rgba(14,10,12,.9),0 0 0 7px #3a2a24;
  animation:scrollOpen .5s var(--ease)}
.modal-card::before,.modal-card::after{content:"";position:sticky;display:block;left:0;right:0;height:0}
@keyframes scrollOpen{from{clip-path:inset(48% 0 48% 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
.modal-card h2{font-size:30px;margin:2px 0 12px;color:var(--bone)}
.modal-card h3{margin:18px 0 8px;color:var(--joss)}
.modal-card p{margin:8px 0;line-height:1.85}
.modal-card label{display:block;margin:8px 0;color:var(--bone-dim)}
.modal-card input[type=text],.modal-card input:not([type]),.modal-card select,#screen input,#screen select{background:#0d0909;border:1px solid #4a372d;border-radius:3px;padding:6px 10px;color:var(--bone)}
.story-body,.novel-reader{font-size:16px;line-height:2.05;color:#d9cfbd}
.story-body p,.novel-reader p{color:#d9cfbd;text-indent:2em;margin:.55em 0}
.story-body p:first-child::first-letter{font:2.4em/1 var(--f-title);color:var(--cinnabar);float:left;margin:.08em .1em 0 -2em;padding-right:.1em}
.story-extra summary{font-size:14px}
.story-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed #3a2a24}
.story-tools span{font-size:12px;color:var(--ash)}
.story-tools button{font-size:12.5px;min-height:30px!important}
.reader-note{font-size:12px;color:var(--ash)}
.mode-options{display:grid;gap:10px;margin:12px 0}
.mode-options label{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;padding:12px 14px;border:1px solid #3a2a24;border-radius:3px;cursor:pointer;background:rgba(0,0,0,.25)}
.mode-options label:has(input:checked){border-color:var(--cinnabar);box-shadow:0 0 18px rgba(210,59,43,.18) inset}
.mode-options b{font:18px var(--f-title);color:var(--bone)}
.mode-options span{font-size:13px}
.compact-preview,.enemy-preview{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;padding:10px 12px;border:1px solid #4a2a26;background:rgba(80,20,16,.18);border-radius:3px}
.compact-preview b{width:100%;color:var(--cinnabar);font-family:var(--f-title);font-size:17px}
.compact-preview span{font-size:13px;padding:2px 8px;border:1px solid #4a2a26;border-radius:999px}
.enemy-preview details{flex:1 1 220px;padding:8px 10px;border:1px solid #4a2a26;border-radius:3px;background:rgba(0,0,0,.25)}
.enemy-preview summary{font-size:16px;color:#ffd9cf}
.preview-seal{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--cinnabar);color:#fff;font-family:var(--f-title);margin-right:6px;border-radius:3px}
.settlement-stats{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.settlement-stats b{padding:8px 14px;border:1px solid var(--joss-deep);color:var(--joss);font:20px var(--f-num);border-radius:3px;background:rgba(216,171,79,.06)}
.journal{max-height:52vh;overflow:auto;font-size:13px}
.journal p{margin:4px 0;padding-left:12px;border-left:2px solid #3a2a24}

/* collection / codex grids */
.collection-grid,.spirit-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:10px 0}
.collection-spirit,.codex-spirit-card,.squad-choice{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px;border:1px solid #3a2a24;border-radius:3px;background:linear-gradient(180deg,#201714,#130d0c);color:var(--bone);cursor:pointer;transition:transform .2s,border-color .2s;overflow:hidden}
.collection-spirit:hover,.codex-spirit-card:hover,.squad-choice:hover{transform:translateY(-3px);border-color:var(--phosphor-deep)}
.collection-spirit span,.codex-spirit-card p,.codex-spirit-card small,.squad-choice span{font-size:12px;color:var(--bone-dim)}
.squad-choice .portrait,.codex-spirit-card .portrait,.codex-spirit-card .unit-initial,.squad-choice .unit-initial{height:150px;margin:-10px -10px 6px;background-size:auto 175%;background-position:center 4%}
.squad-choice:has(input:checked){border-color:var(--cinnabar);box-shadow:0 0 0 1px var(--cinnabar) inset}
.squad-choice input{position:absolute;top:8px;right:8px;accent-color:var(--cinnabar);width:18px;height:18px}
.collection-cards,.card-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0}
.collection-cards article,.card-catalog article{padding:10px 12px;border:1px solid #3a2a24;border-radius:3px;background:rgba(0,0,0,.25)}
.collection-cards b,.card-catalog b{font:17px var(--f-title);color:var(--bone)}
.collection-cards span,.card-catalog span{display:block;font-size:12px;color:var(--joss)}
.collection-cards p,.card-catalog p{font-size:12.5px;margin:4px 0 0;line-height:1.6}
.catalog-page{max-width:1200px;margin:0 auto}
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px}
.rank-table{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#2c201c;border:1px solid #2c201c;font-size:12.5px;margin:8px 0}
.rank-table>*{background:#140e0d;padding:4px 8px}.rank-table b{color:var(--joss);font-weight:400}
.codex-detail-head{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:end}
.codex-detail-head .portrait,.codex-detail-head .unit-initial{height:210px;background-size:auto 150%;background-position:center 4%;border:1px solid #3a2a24;border-radius:3px}
.detail-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.detail-stats b{font-weight:400;font-size:13px;padding:4px 10px;border:1px solid #3a2a24;border-radius:999px;background:rgba(0,0,0,.25)}
.codex-rank-list{display:grid;gap:2px;max-height:240px;overflow:auto;font-size:12.5px}
.codex-rank-row{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:8px;padding:3px 8px;background:rgba(255,255,255,.02)}
.codex-rank-row b{font-weight:400;color:var(--joss)}
.codex-skill-list,.skill-list{display:grid;gap:8px}
.codex-skill-list article{padding:10px 12px;border-left:3px solid var(--cinnabar);background:rgba(0,0,0,.25)}
.codex-skill-list article div{display:flex;justify-content:space-between;gap:8px}
.codex-skill-list b{font:17px var(--f-title)}.codex-skill-list em{font-style:normal;font-size:12px;color:var(--joss)}
.codex-skill-list span,.codex-skill-list p{font-size:12.5px}
.spirit-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.spirit-chip{padding:6px 10px;border:1px solid #3a2a24;border-radius:3px;font-size:12.5px;background:rgba(0,0,0,.25)}
.spirit-chip b{display:block;font-weight:400;color:var(--bone)}
.camp-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:14px}
.support-contracts details{padding:6px 10px;border:1px solid #3a2a24;margin:6px 0;border-radius:3px}
.support-contracts summary{font-size:15px}

/* reward cards */
.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0;perspective:1200px}
.reward-card{position:relative;padding:18px 14px 14px;min-height:240px;border-radius:6px;text-align:center;color:var(--bone);
  background:linear-gradient(180deg,#241917,#120b0a);border:1px solid var(--rc,#4a372d);
  box-shadow:0 0 0 4px #0e0a0c inset,0 0 0 5px color-mix(in srgb,var(--rc,#4a372d) 40%,transparent) inset;
  animation:rewardFlip .8s var(--ease) both;transition:transform .25s var(--ease),box-shadow .25s}
.reward-card:nth-child(2){animation-delay:.12s}.reward-card:nth-child(3){animation-delay:.24s}
.reward-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 0 0 4px #0e0a0c inset,0 14px 40px color-mix(in srgb,var(--rc,#4a372d) 45%,transparent)}
@keyframes rewardFlip{from{transform:rotateY(90deg) translateY(30px);opacity:0}}
.reward-card .card-glyph{margin:6px auto 10px}
.reward-card h3{font-size:21px}.reward-card p{font-size:12.5px;line-height:1.6}
.reward-card[data-rarity="普通"]{--rc:var(--r-common)}.reward-card[data-rarity="稀有"]{--rc:var(--r-rare)}.reward-card[data-rarity="珍藏"]{--rc:var(--r-trea)}.reward-card[data-rarity="传说"]{--rc:var(--r-leg)}

/* ---------- battle ---------- */
body.compact-battle #screen{padding:0;overflow:hidden}
.battle-screen{position:relative;height:100%;display:block}
.battle-screen.despair-world{filter:saturate(.15) contrast(1.15)}
body.despair-active::before{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 160px 40px #000}
.board{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:8px clamp(10px,2vw,28px) 6px}
.board::before{content:"";position:absolute;left:8%;right:8%;top:49%;height:2px;background:linear-gradient(90deg,transparent,rgba(210,59,43,.4),rgba(134,242,207,.25),rgba(210,59,43,.4),transparent);filter:blur(1px);pointer-events:none}
.battle-view-tabs{display:flex;gap:6px;align-items:center;justify-content:flex-end;grid-row:1;grid-column:1;z-index:4}
.battle-view-tabs button{min-height:30px!important;padding:.2em .8em!important;font-size:12.5px}
.enemy-banner{grid-row:1;grid-column:1;display:flex;align-items:center;gap:16px;min-height:40px;pointer-events:none}
.enemy-banner h2{font-size:clamp(16px,1.6vw,22px);max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffd9cf}
.enemy-banner span{font-size:12.5px;color:var(--bone-dim)}
.life-duel{display:flex;gap:16px;align-items:center;pointer-events:none}
.life-duel .lifebar{display:flex;align-items:center;gap:6px;font:13px var(--f-num)}
.life-duel .pips{display:flex;gap:2px}
.life-duel .pips i{width:9px;height:14px;border-radius:2px;background:#2a1d1a;transform:skewX(-12deg)}
.life-duel .enemy .pips i.on{background:linear-gradient(var(--blood),var(--cinnabar-deep));box-shadow:0 0 6px rgba(255,74,58,.5)}
.life-duel .ally .pips i.on{background:linear-gradient(var(--phosphor),var(--phosphor-deep));box-shadow:0 0 6px rgba(134,242,207,.5)}
.life-duel b{font:12px var(--f-body);color:var(--bone-dim);letter-spacing:.1em}

.lanes{grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,22px);min-height:0;padding:6px 0}
.lane{position:relative;display:grid;grid-template-rows:1fr 1fr;gap:clamp(10px,2.4vh,26px);min-height:0}
.lane::before{content:"";position:absolute;left:50%;top:6%;bottom:6%;width:1px;background:linear-gradient(transparent,rgba(236,227,209,.08),transparent)}
.slot{position:relative;min-height:0;display:grid;place-items:center}
.empty-slot{display:grid;place-items:center;width:min(100%,calc((100% ) ));height:100%;aspect-ratio:.7;max-height:100%;max-width:100%;
  border:1px dashed #3d2d27;border-radius:6px;font-size:12px;letter-spacing:.3em;color:#5e5048;background:rgba(0,0,0,.18)}
.ally-slot .empty-slot{border-color:#2d4a42;color:#4a6e64}
.battle-screen.deploying .ally-slot .empty-slot,.battle-screen.targeting-ally .ally-slot .unit{animation:slotCall 1.2s ease-in-out infinite}
.battle-screen.deploying .ally-slot .empty-slot{border-color:var(--phosphor);color:var(--phosphor);background:rgba(134,242,207,.06)}
@keyframes slotCall{50%{box-shadow:0 0 24px rgba(134,242,207,.35)}}
.battle-screen.targeting-enemy .unit.enemy{animation:enemyCall 1s ease-in-out infinite}
@keyframes enemyCall{50%{box-shadow:0 0 0 2px var(--blood),0 0 30px rgba(255,74,58,.5)}}

/* ---------- unit card (牌位) ---------- */
.unit{--tint:134,242,207;--edge:#3f5e55;position:relative;height:100%;max-height:100%;aspect-ratio:.7;max-width:100%;display:block;padding:0;text-align:left;color:var(--bone);overflow:visible;
  transition:transform .28s var(--ease),filter .28s,box-shadow .28s;border-radius:6px;isolation:isolate}
.unit.enemy{--tint:196,90,120;--edge:#5a3448}
.unit .card-face{position:absolute;inset:0;border-radius:6px;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 30%,rgba(var(--tint),.18),transparent 70%),linear-gradient(180deg,#1e1715,#0f0a0a 75%);
  border:1px solid var(--edge);box-shadow:0 0 0 3px rgba(0,0,0,.55) inset,0 10px 26px rgba(0,0,0,.6)}
.unit.enemy .card-face{clip-path:polygon(0 3%,6% 0,14% 2%,22% 0,31% 2.5%,40% 0,50% 2%,60% 0,69% 2.5%,78% 0,87% 2%,94% 0,100% 3%,100% 100%,0 100%)}
.unit .card-face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(10,6,6,.82) 74%,#0b0707);pointer-events:none}
.unit .portrait{position:absolute;inset:0;background-repeat:no-repeat;background-size:auto 168%;background-position:center 5%;transition:transform .5s var(--ease)}
.unit:hover .portrait{transform:scale(1.04)}
.unit .unit-initial,.hand-card .unit-initial{position:absolute;inset:0;display:grid;place-items:center;font:clamp(40px,5vw,82px)/1 var(--f-title);color:rgba(var(--tint),.85);
  text-shadow:0 0 22px rgba(var(--tint),.45);background:radial-gradient(circle at 50% 42%,rgba(var(--tint),.12),transparent 55%)}
.unit .unit-initial::before,.hand-card .unit-initial::before{content:"";position:absolute;width:62%;aspect-ratio:1;top:16%;left:19%;border:2px solid rgba(var(--tint),.35);border-radius:50%;box-shadow:0 0 0 7px rgba(var(--tint),.06),inset 0 0 0 9px rgba(0,0,0,.25)}
.unit .level{position:absolute;z-index:3;left:6px;top:8px;writing-mode:vertical-rl;padding:5px 2px;font-size:11px;letter-spacing:.12em;background:var(--cinnabar);color:#fff2e4;border-radius:2px;box-shadow:0 0 0 1px #3a0a06 inset,0 2px 6px rgba(0,0,0,.6);max-height:70%}
.unit.enemy .level{background:var(--bruise-deep);box-shadow:0 0 0 1px var(--bruise) inset}
.unit h3{position:absolute;z-index:3;left:8px;right:8px;bottom:30px;font-size:clamp(12px,1.1vw,17px);line-height:1.15;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit .stats{position:absolute;z-index:3;left:8px;right:8px;bottom:10px;display:flex;justify-content:space-between;font:12px var(--f-num);font-variant-numeric:tabular-nums}
.unit .atk-stat{color:#ffcf9a}.unit .hp-stat{color:#c9f6e6}.unit.enemy .hp-stat{color:#ffc4cd}
.unit .mini-hp{position:absolute;z-index:3;left:8px;right:8px;bottom:5px;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.unit .mini-hp i{display:block;height:100%;background:linear-gradient(90deg,var(--phosphor-deep),var(--phosphor));transition:width .45s var(--ease)}
.unit.enemy .mini-hp i{background:linear-gradient(90deg,var(--cinnabar-deep),var(--blood))}
.unit .hp-ghost{position:absolute;z-index:2;left:8px;bottom:5px;height:3px;background:#fff;opacity:.5;transition:width .8s .25s ease}
.unit.selected{transform:translateY(-8px)}
.unit.selected .card-face{border-color:var(--phosphor);box-shadow:0 0 0 2px var(--phosphor),0 0 34px rgba(134,242,207,.45),0 18px 30px rgba(0,0,0,.7)}
.unit.low-life .card-face{box-shadow:0 0 0 3px rgba(0,0,0,.55) inset,inset 0 0 30px rgba(210,59,43,.35)}
.unit.critical-life .card-face{animation:critPulse 1s ease-in-out infinite}
@keyframes critPulse{50%{box-shadow:0 0 0 3px rgba(0,0,0,.55) inset,inset 0 0 50px rgba(255,74,58,.7)}}
.unit.boss-unit .card-face{border-color:#a8473a;box-shadow:0 0 0 3px rgba(0,0,0,.55) inset,0 0 26px rgba(210,59,43,.35)}
.unit .crown{position:absolute;z-index:4;top:-12px;left:50%;transform:translateX(-50%);font:16px/1 var(--f-title);color:#ffdfa0;padding:3px 10px;background:linear-gradient(#5a1a14,#2a0806);border:1px solid #c0573f;border-radius:2px;letter-spacing:.2em;white-space:nowrap}
.unit.enraged .card-face{border-color:var(--blood);animation:enrage .7s ease-in-out infinite alternate}
@keyframes enrage{to{box-shadow:0 0 0 3px rgba(0,0,0,.55) inset,0 0 40px rgba(255,74,58,.7)}}
.unit.acting{z-index:6;animation:lunge calc(.42s/var(--speed)) var(--ease)}
@keyframes lunge{40%{transform:translateY(calc(var(--attack-direction,-1) * -38px)) scale(1.06)}100%{transform:none}}
.unit.hit{animation:struck .36s ease}
.unit.hit .card-face::before{content:"";position:absolute;inset:0;z-index:5;background:rgba(255,60,40,.45);mix-blend-mode:screen;animation:fadeOut .36s forwards}
@keyframes struck{20%{transform:translateX(-7px) rotate(-1.5deg)}45%{transform:translateX(6px) rotate(1deg)}70%{transform:translateX(-3px)}}
@keyframes fadeOut{to{opacity:0}}
.unit.dying{animation:burnAway .8s ease-in forwards;pointer-events:none}
@keyframes burnAway{0%{filter:none}35%{filter:brightness(1.8) sepia(1) saturate(4) hue-rotate(-20deg)}100%{filter:brightness(.2);opacity:0;transform:translateY(-14px) scale(.92);clip-path:inset(0 0 100% 0)}}
.unit.landing-hidden{opacity:0}
.unit.landing-target{animation:land .5s var(--ease)}
@keyframes land{0%{transform:scale(1.18);filter:brightness(2)}100%{transform:none}}
.unit.move-left{transform:translateX(-30%);opacity:.6}.unit.move-right{transform:translateX(30%);opacity:.6}
.unit.time-removed{opacity:.55;filter:grayscale(1) blur(.4px)}
.unit.time-vanish{animation:vanish .3s forwards}@keyframes vanish{to{opacity:0;filter:blur(8px)}}
.unit.boss-casting .card-face{box-shadow:0 0 0 2px var(--bruise),0 0 40px rgba(160,110,220,.6)}
.vfx-sigil{display:none}
.vfx-badges{position:absolute;z-index:4;top:8px;right:5px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:76%;max-height:48%;overflow:hidden;pointer-events:none}
.vfx-badge{font-size:10.5px;line-height:1.2;padding:2px 6px;border-radius:2px;white-space:nowrap;color:#120b0a;background:var(--badge,#86f2cf);box-shadow:0 1px 4px rgba(0,0,0,.6);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.status-count{position:absolute;z-index:4;right:6px;top:calc(48% + 6px);font-size:10px;color:var(--bone-dim)}
.unit.vfx-state .card-face{outline:1px solid color-mix(in srgb,var(--vfx-color,#86f2cf) 50%,transparent);outline-offset:-4px}
.unit.burning .card-face{box-shadow:0 0 0 3px rgba(0,0,0,.55) inset,inset 0 -30px 40px -10px rgba(80,255,200,.35)}
.unit.eye-marked .card-face::before{content:"";position:absolute;inset:0;z-index:4;background:radial-gradient(ellipse 30% 8% at 50% 40%,rgba(255,60,40,.5),transparent);animation:eyeBlink 3s infinite}
@keyframes eyeBlink{0%,90%,100%{opacity:1}95%{opacity:0}}
.unit.transformed .card-face{border-color:#c4553f}

/* ---------- turn bar ---------- */
.turnbar{grid-row:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:6px 4px 4px}
.qi{position:relative;display:flex;align-items:center;gap:10px;min-width:150px;font-size:0}
.qi-orbs{display:flex;gap:4px;flex-wrap:wrap;max-width:240px}
.qi-orbs i{width:14px;height:14px;border-radius:50%;background:#1d2a27;box-shadow:inset 0 0 0 1px #2d4a42;transition:all .3s}
.qi-orbs i.on{background:radial-gradient(circle at 40% 35%,#fff,var(--phosphor) 45%,var(--phosphor-deep));box-shadow:0 0 10px rgba(134,242,207,.6)}
.qi-num{font:28px/1 var(--f-num);color:var(--phosphor);text-shadow:0 0 14px rgba(134,242,207,.5)}
.qi-num small{font:12px var(--f-body);color:var(--bone-dim);margin-left:2px}
.qi>b,.qi>small{display:none}
#battleHint{text-align:center;font-size:13px;color:var(--bone-dim);letter-spacing:.06em;min-height:1.4em}
.battle-screen.deploying #battleHint,.battle-screen.targeting-enemy #battleHint,.battle-screen.targeting-ally #battleHint{color:var(--phosphor)}
#endTurn{min-width:150px;min-height:48px!important;font:20px/1 var(--f-title)!important;letter-spacing:.2em}
#endTurn::after{content:"空格";position:absolute;right:6px;bottom:3px;font:10px var(--f-body);opacity:.55;letter-spacing:0}

/* ---------- hand ---------- */
.hand-wrap{grid-row:4;position:relative;height:clamp(140px,22vh,200px);display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:8px}
.hand-wrap>label{position:absolute;left:4px;top:-2px;font-size:11.5px;color:var(--ash);letter-spacing:.1em;z-index:2}
.hand-paging{display:contents}
.hand-paging button{grid-row:1;align-self:center;min-height:56px!important;padding:0 .5em!important;font-size:20px}
#previousHand{grid-column:1}#nextHand{grid-column:3}
.hand{grid-column:2;grid-row:1;display:flex;align-items:flex-end;gap:10px;height:100%;padding:14px 10px 0;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;scrollbar-width:thin}
.hand-card{--rc:#4a372d;--tint:216,171,79;position:relative;flex:none;height:calc(100% - 4px);aspect-ratio:.68;padding:0;border-radius:6px;text-align:left;color:var(--bone);scroll-snap-align:start;
  background:radial-gradient(90% 60% at 50% 32%,rgba(var(--tint),.16),transparent 70%),linear-gradient(180deg,#221815,#0f0a09);
  border:1px solid var(--rc);box-shadow:0 0 0 3px #0e0a0c inset,0 0 0 4px color-mix(in srgb,var(--rc) 35%,transparent) inset,0 8px 20px rgba(0,0,0,.6);
  overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,filter .25s}
.hand-card.ghost{--rc:#3f6e62;--tint:134,242,207}
.hand-card[data-rarity="普通"]{--rc:#6f7472}.hand-card[data-rarity="稀有"]{--rc:#3f8fc4;--tint:111,198,255}.hand-card[data-rarity="珍藏"]{--rc:#8e56c4;--tint:196,131,255}.hand-card[data-rarity="传说"]{--rc:#d39a32;--tint:242,184,75}
.hand-card:hover:not(:disabled){transform:translateY(-14px);z-index:3;box-shadow:0 0 0 3px #0e0a0c inset,0 0 0 4px var(--rc) inset,0 18px 30px rgba(0,0,0,.7),0 0 26px color-mix(in srgb,var(--rc) 40%,transparent)}
.hand-card.selected{transform:translateY(-20px);box-shadow:0 0 0 2px var(--phosphor),0 0 34px rgba(134,242,207,.55)!important}
.hand-card:disabled{filter:grayscale(.85) brightness(.6);opacity:1}
.hand-card .portrait{position:absolute;inset:0;background-size:auto 175%;background-position:center 4%;background-repeat:no-repeat}
.hand-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,6,6,.92) 70%);pointer-events:none}
.hand-card .card-glyph{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:58%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  font:clamp(26px,3.2vh,40px)/1 var(--f-title);color:rgb(var(--tint));text-shadow:0 0 14px rgba(var(--tint),.6);
  background:radial-gradient(circle,rgba(var(--tint),.14),transparent 70%);box-shadow:0 0 0 1px rgba(var(--tint),.4),0 0 0 6px rgba(0,0,0,.35),0 0 0 7px rgba(var(--tint),.2)}
.hand-card .cost{position:absolute;z-index:3;left:5px;top:5px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font:15px/1 var(--f-num);
  background:radial-gradient(circle at 40% 35%,#ff8a6e,var(--cinnabar) 50%,#5e130d);color:#fff;box-shadow:0 0 0 2px #1a0806,0 2px 6px rgba(0,0,0,.6)}
.hand-card.ghost .cost{background:radial-gradient(circle at 40% 35%,#d9fff2,var(--phosphor-deep) 55%,#0f3a30)}
.hand-card h3{position:absolute;z-index:3;left:7px;right:5px;bottom:34%;font-size:clamp(13px,1.6vh,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.hand-card p{position:absolute;z-index:3;left:7px;right:5px;bottom:6px;top:68%;font-size:10.5px;line-height:1.35;color:var(--bone-dim);overflow:hidden}
.hand-card.card-dealt{animation:deal .6s var(--ease) both;animation-delay:var(--deal-delay,0ms)}
@keyframes deal{from{transform:translate(160px,40px) rotate(18deg) scale(.6);opacity:0}}
.battle-screen.battle-enter .hand-card{animation:deal .55s var(--ease) both;animation-delay:var(--stagger,0ms)}
.battle-screen.battle-enter .unit.enemy{animation:rise .6s var(--ease) both;animation-delay:var(--stagger,0ms)}
@keyframes rise{from{transform:translateY(-40px);opacity:0;filter:blur(6px)}}
.flying-card{position:fixed!important;z-index:70;pointer-events:none;margin:0}

/* ---------- side drawer (skills / log) ---------- */
.battle-side{position:absolute;z-index:20;top:46px;right:0;bottom:auto;max-height:calc(100% - 260px);width:min(330px,34vw);border-radius:0 0 0 6px;padding:16px 16px 20px;overflow:auto;
  background:linear-gradient(180deg,rgba(26,18,16,.97),rgba(14,9,9,.98));border-left:1px solid #4a372d;box-shadow:-20px 0 50px rgba(0,0,0,.7);
  transform:translateX(105%);transition:transform .35s var(--ease)}
.battle-side.is-open,.battle-screen.unit-focus .battle-side{transform:none}
.battle-side>.eyebrow{margin-top:4px}
.battle-side>h2{font-size:20px;margin-bottom:4px}
.battle-side>p{font-size:12.5px;max-height:5.6em;overflow:hidden;line-height:1.65}
.close-battle-panel{position:sticky;top:0;z-index:2;width:100%;margin-bottom:8px;font-size:12.5px;min-height:30px!important}
.actions{display:grid;gap:7px;margin:12px 0}
.actions>b,.player-actions>b,.move-actions>b,.battle-log>b{display:block;margin-top:6px;font:16px var(--f-title);color:var(--joss);font-weight:400}
.unit-detail{display:grid;gap:3px;padding:10px;border:1px solid #2d4a42;border-radius:3px;background:rgba(134,242,207,.04);font-size:12.5px}
.unit-detail b{font:18px var(--f-title);color:var(--bone);font-weight:400}
.unit-detail small{color:var(--ash);line-height:1.5}
.unit-detail .mini-hp{height:4px;background:#1d2a27;border-radius:2px;overflow:hidden}
.unit-detail .mini-hp i{display:block;height:100%;background:var(--phosphor)}
[data-exact-skill]{text-align:left;justify-content:flex-start;font-size:13px!important;border-left:3px solid var(--cinnabar)!important}
[data-exact-skill]:disabled{border-left-color:#3a2a24!important}
.move-actions,.player-actions{display:grid;gap:6px;margin:10px 0}
.move-actions button,.player-actions button{font-size:12.5px!important;min-height:32px!important}
.battle-log{margin-top:12px;font-size:12px;max-height:30vh;overflow:auto}
.battle-log p{margin:3px 0;padding-left:8px;border-left:2px solid #3a2a24;color:var(--bone-dim)}

/* ---------- overlays from game code ---------- */
.floating-text{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-50%);font:700 clamp(22px,2.6vw,38px)/1 var(--f-num);
  -webkit-text-stroke:1px rgba(0,0,0,.8);text-shadow:0 0 12px currentColor,0 3px 0 #000;animation:dmgPop .95s var(--ease) forwards}
@keyframes dmgPop{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}18%{transform:translate(-50%,-80%) scale(1.25);opacity:1}35%{transform:translate(-50%,-90%) scale(1)}100%{transform:translate(-50%,-190%) scale(.9);opacity:0}}
.particle{position:fixed;z-index:79;pointer-events:none;font-size:14px;animation:spark 1s ease-out forwards}
@keyframes spark{to{transform:var(--move);opacity:0}}
.story-strip{display:none}
#noviceTip{position:fixed;z-index:55;right:18px;top:calc(var(--hdr) + 10px);width:min(330px,90vw);padding:14px 16px;border:1px solid #4a372d;border-left:3px solid var(--joss);border-radius:3px;
  background:rgba(20,13,12,.96);box-shadow:0 14px 40px rgba(0,0,0,.6);animation:tipIn .4s var(--ease)}
@keyframes tipIn{from{transform:translateY(-10px);opacity:0}}
#noviceTip b{font:16px var(--f-title);color:var(--joss);font-weight:400}
#noviceTip p{font-size:12.5px;margin:6px 0}
#noviceTip div{display:flex;gap:6px}#noviceTip button{min-height:28px!important;font-size:12px;padding:.2em .7em!important}
.battle-opening,.turn-transition,.skill-cinematic,.vfx-scene,.vfx-projectile,.screen-flash{display:none!important}

/* ---------- test lab ---------- */
.test-lab{max-width:1200px;margin:0 auto}
.config-list{display:grid;gap:6px}
.config-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px;border:1px solid #2c201c;border-radius:3px;background:rgba(0,0,0,.2);font-size:12.5px}
.config-row input,.config-row select{max-width:120px}
.test-settings{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}

/* ---------- NETHER overlays ---------- */
#fxCanvas{position:fixed;inset:0;z-index:90;pointer-events:none}
.fx-plate{position:fixed;z-index:92;left:50%;top:13%;transform:translateX(-50%);pointer-events:none;text-align:center;white-space:nowrap}
.fx-plate b{display:block;font:clamp(40px,5.4vw,84px)/1 var(--f-title);letter-spacing:.18em;color:var(--plate,#fff);
  text-shadow:0 0 30px var(--plate,#fff),0 0 4px #000,0 4px 0 #000;animation:plateIn .55s var(--ease) both}
.fx-plate small{display:block;margin-top:10px;font-size:14px;letter-spacing:.5em;color:var(--bone);opacity:.85;animation:plateIn .55s .12s var(--ease) both}
.fx-plate.out b,.fx-plate.out small{animation:plateOut .35s ease forwards}
@keyframes plateIn{from{opacity:0;letter-spacing:.9em;filter:blur(10px)}}
@keyframes plateOut{to{opacity:0;transform:translateY(-12px);filter:blur(6px)}}
.fx-skip{position:fixed;z-index:93;right:18px;bottom:16px;font-size:11.5px;letter-spacing:.2em;color:var(--ash);pointer-events:none}
.fx-catcher{position:fixed;inset:0;z-index:91;cursor:pointer}
.nx-veil{position:fixed;inset:0;z-index:95;pointer-events:none}
.nx-banner{position:fixed;z-index:94;left:0;right:0;top:40%;display:grid;place-items:center;pointer-events:none}
.nx-banner .ink{position:absolute;left:-5%;right:-5%;height:120px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.92) 18%,rgba(0,0,0,.92) 82%,transparent);transform-origin:left;animation:inkSwipe .9s var(--ease) both}
.nx-banner b{position:relative;font:clamp(46px,6vw,90px)/1 var(--f-title);letter-spacing:.3em;color:var(--bone);animation:plateIn .6s .1s var(--ease) both;text-shadow:0 0 24px var(--bc,rgba(210,59,43,.7))}
.nx-banner small{position:relative;margin-top:6px;letter-spacing:.6em;font-size:13px;color:var(--bc,var(--cinnabar));animation:plateIn .6s .2s var(--ease) both}
.nx-banner.out{animation:fadeOut .35s forwards}
@keyframes inkSwipe{from{transform:scaleX(0)}}
.nx-ribbon{position:fixed;z-index:85;left:50%;top:calc(var(--hdr) + 54px);transform:translateX(-50%);padding:6px 26px;font-size:14px;letter-spacing:.14em;pointer-events:none;white-space:nowrap;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 15%,rgba(0,0,0,.85) 85%,transparent);color:var(--bone);border-top:1px solid var(--rb,#86f2cf);border-bottom:1px solid var(--rb,#86f2cf);animation:ribbon .5s var(--ease)}
@keyframes ribbon{from{opacity:0;clip-path:inset(0 50%)}}
.nx-intro{position:fixed;inset:0;z-index:200;background:#050304;cursor:pointer}
.nx-intro canvas{position:absolute;inset:0}
.nx-intro .hint{position:absolute;left:0;right:0;bottom:9%;text-align:center;font-size:14px;letter-spacing:.8em;color:var(--bone-dim);opacity:0;transition:opacity 1s}
.nx-intro .hint.on{opacity:1;animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.35}}
.nx-result{position:fixed;inset:0;z-index:150;pointer-events:none}
.nx-result canvas{position:absolute;inset:0}

/* ---------- small screens ---------- */
@media (max-height:760px){
  :root{--hdr:44px}
  .brand small{display:none}
  .hand-wrap{height:clamp(120px,21vh,160px)}
  #endTurn{min-height:40px!important;font-size:17px!important}
  .save-slot p{min-height:0}
}
@media (max-width:1100px){
  .mainline-home{grid-template-columns:1fr}.hero{display:none}
  .save-slots{grid-template-columns:repeat(2,1fr)}
  body.home-screen #screen{overflow:auto}
  .reward-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body.reduce-flash .unit.hit .card-face::before{display:none}

#rotateDeviceHint{display:none}
#rotateDeviceHint.show{position:fixed;inset:0;z-index:300;display:grid;place-content:center;gap:8px;text-align:center;background:#0e0a0c}
#rotateDeviceHint b{font:28px var(--f-title)}#rotateDeviceHint span{color:var(--bone-dim)}

/* v3.2 layout fixes */
#screen{overflow-x:hidden}
.rank-table,.spirit-catalog,.card-catalog,.collection-cards,.collection-grid,.codex-rank-list{max-width:100%;overflow-x:auto}
.catalog-page,.test-lab,.chapter,.home{max-width:100%}
.config-row{min-width:0}

/* v3.2: difficulty choices in two columns so the create dialog fits small windows */
.diff-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-items:stretch}
.diff-options .diff-title{grid-column:1/-1;font:18px var(--f-title);color:var(--bone);font-weight:400}
.diff-options label{grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;padding:10px 12px;align-items:center}
.diff-options label input{grid-row:1/3;grid-column:1;margin:0}
.diff-options label span{grid-column:2;grid-row:2;font-size:12.5px;line-height:1.5}
.diff-options label b{grid-column:2;grid-row:1}

/* v3.2: short windows (phone landscape, small laptops): stack the home screen and let it scroll */
@media (max-height:560px){
  body.home-screen #screen{display:block;overflow-y:auto;overflow-x:hidden}
  .mainline-home{grid-template-columns:1fr;min-height:0;gap:8px}
  .hero{display:none}
  .mainline-home h1{font-size:clamp(34px,6vw,46px)}
  .mainline-home h1 span{font-size:.5em}
  .mainline-home p{margin:10px 0 4px;font-size:13px}
  .save-slots{margin-top:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .save-slot p{min-height:0}
}

/* v3.2: very short battle screens (phone landscape): smaller cards, fewer decorative numbers */
@media (max-height:460px){
  .life-duel .pips{display:none}
  .enemy-banner{gap:10px}
  .enemy-banner h2{font-size:15px}
  .unit .level{font-size:9px;top:6px}
  .unit h3{font-size:11px;bottom:24px}
  .unit .stats{font-size:10px;bottom:9px}
  .unit .card-face .portrait{background-size:auto 150%}
  .battle-view-tabs button:nth-child(2){display:none}
  .turnbar{gap:8px;padding:2px 4px}
  .hand-wrap{height:clamp(104px,30vh,140px)}
  #battleHint{font-size:11px}
}