:root{--bg:#0b161c;--panel:rgba(15,28,34,.92);--line:rgba(191,204,202,.17);--text:#e4e8df;--muted:#95a9ab;--gold:#d9bc83;--mint:#7ebcaf;--danger:#d3887d;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
body #battlefield{top:66px;bottom:270px;background:radial-gradient(ellipse at 50% 45%,#243b41,#0c171e 74%)}
body.title-mode #battlefield{top:0;bottom:0;left:24%;background:none}
body.title-mode .initiative,body.title-mode .world-panel,body.title-mode .player-board,body.title-mode .camera-tools,body.title-mode .turn-prompt,body.title-mode .action-bar{visibility:hidden}
body.title-mode .topbar{border:0;background:none}
select{background:#12282e;border:1px solid #567578;color:#d9e1d7;padding:6px 9px;font-size:11px;max-width:260px}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{color:inherit;cursor:pointer;border:1px solid var(--line);background:rgba(23,39,44,.86);transition:.18s ease}button:hover{background:#304649;border-color:#adad87}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.38;cursor:not-allowed}button.active{border-color:var(--gold);background:#344442}button.primary{background:var(--gold);color:#182626;border-color:var(--gold);font-weight:650}button.primary:hover{background:#ecd29e}button.danger{color:#e7a69d}button.ghost{background:transparent}small{font-size:10px}#battlefield{position:absolute;inset:0}#battlefield canvas{display:block;width:100%;height:100%;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,16,21,.46),transparent 22%,transparent 65%,rgba(7,16,21,.45)),linear-gradient(90deg,rgba(7,16,21,.3),transparent 30%,transparent 72%,rgba(7,16,21,.3))}.topbar{position:absolute;top:0;left:0;right:0;height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(#0c191fe8,#101f26b3);z-index:5}.brand{display:flex;align-items:center;gap:14px}.sigil{font-size:44px;color:var(--gold);font-weight:100}.brand b{font-family:Georgia,"STZhongsong","SimSun",serif;font-size:26px;letter-spacing:7px;font-weight:500}.brand small{display:block;letter-spacing:3px;font-size:8px;color:var(--gold);margin-top:4px}.brand i{height:30px;width:1px;background:var(--line);margin:0 8px}.world-name{font-size:12px;color:var(--muted);letter-spacing:3px}.topbar nav{display:flex;gap:8px}.topbar nav button{border:0;background:transparent;padding:10px 13px;font-size:12px;color:#bccbc8}.topbar nav button:hover{color:var(--gold)}.round-header{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px}.round-number{font-family:Georgia,serif;font-size:24px;color:var(--gold)}.round-number span{font-size:10px;color:var(--muted);font-family:inherit;letter-spacing:2px;margin-right:9px}.phase-steps{display:flex;gap:10px;font-size:10px;color:#5f7476}.phase-steps .current{color:var(--gold)}.eyebrow{font-family:Georgia,serif;font-size:9px;letter-spacing:2px;color:var(--gold);margin-bottom:15px}.eyebrow span{float:right;color:var(--muted);font-family:inherit;letter-spacing:1px;font-size:11px}.initiative{position:absolute;top:109px;left:28px;width:213px;z-index:3}.unit-row{width:100%;display:flex;text-align:left;align-items:center;margin-bottom:8px;padding:11px 12px;gap:11px;border-left:2px solid var(--unit-color);background:rgba(13,28,34,.82);position:relative}.unit-row.current{border-color:var(--gold);background:linear-gradient(90deg,#485147a6,#18282bd9);box-shadow:0 4px 20px #0002}.unit-row.current:after{content:'当前';position:absolute;right:12px;top:9px;color:var(--gold);font-size:8px;letter-spacing:1px}.unit-icon{height:32px;width:24px;background:var(--unit-color);clip-path:polygon(50% 0,80% 18%,75% 45%,100% 100%,0 100%,25% 45%,20% 18%);position:relative;flex-shrink:0}.unit-icon:after{content:'';position:absolute;left:8px;top:7px;width:8px;height:7px;background:#e6ddbd;clip-path:polygon(50% 0,100% 100%,0 100%)}.unit-data{flex:1;min-width:0}.unit-name{font-size:12px}.unit-meta{font-size:9px;color:var(--muted);margin-top:5px;display:flex;gap:10px}.unit-energy{font-family:Georgia,serif;color:#e6dbc5;font-size:22px;align-self:flex-end;line-height:1}.unit-energy small{font-size:9px;color:var(--muted);margin-left:3px}.hearts{color:#dfb79f;letter-spacing:2px;font-size:10px}.initiative-note{font-size:10px;color:#748d90;margin:12px 0}.text-btn{border:0;background:none;padding:10px 0;text-align:left;font-size:11px;width:100%;color:var(--muted)}.text-btn span{float:right}.world-panel{position:absolute;right:28px;top:108px;width:224px;z-index:3}.team-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:11px;color:var(--muted)}.team-line b{font-weight:500;color:#c8d1c7}.life-tokens{display:flex;gap:5px}.life-token{height:16px;width:15px;background:#bdac86;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);display:grid;place-items:center;color:#253537;font-size:8px}.life-token.spent{background:#3e5454;color:#739789}.team-bonus{font-size:9px;color:#82bbaa;line-height:1.7;margin-top:-6px;margin-bottom:12px}.event-panel{border-top:1px solid var(--line);margin-top:16px;padding-top:18px}.event-panel h3{margin:7px 0;font-weight:500;font-size:15px;font-family:Georgia,"SimSun",serif}.event-panel p{font-size:11px;line-height:1.8;color:var(--muted);margin:8px 0 12px}.event-progress{display:flex;gap:5px;margin-top:12px}.event-progress i{height:3px;background:#2c4248;flex:1}.event-progress i.filled{background:var(--gold)}.event-label{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.event-label span:first-child{letter-spacing:2px;color:var(--gold)}.tile-panel{margin-top:22px;border:1px solid var(--line);padding:14px 15px;background:#14252baf;min-height:95px}.tile-panel .tile-type{font-size:9px;letter-spacing:2px;color:var(--gold);margin-bottom:8px}.tile-panel h3{font-size:13px;font-weight:500;margin:0 0 7px}.tile-panel p{font-size:10px;line-height:1.8;color:var(--muted);margin:0}.camera-tools{position:absolute;bottom:285px;left:28px;display:flex;align-items:center;gap:6px;z-index:3}.camera-tools button{width:30px;height:30px;border-radius:50%;background:#14262b99;color:var(--muted)}.camera-tools span{color:#789398;font-size:9px;margin-left:8px}.turn-prompt{position:absolute;bottom:340px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:3;text-shadow:0 2px 8px #000}.turn-prompt h2{font-size:16px;font-family:"SimSun",serif;font-weight:400;letter-spacing:3px;margin:0 0 9px}.turn-prompt p{font-size:11px;color:#aabdb7;margin:0}.action-bar{position:absolute;bottom:276px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:4;padding:6px;background:#0d1b21af;border:1px solid var(--line);backdrop-filter:blur(12px)}.action-bar button{font-size:11px;padding:10px 16px;white-space:nowrap}.action-bar button small{opacity:.55;margin-left:10px}.player-board{position:absolute;bottom:0;left:0;right:0;height:252px;z-index:5;background:linear-gradient(135deg,#172a30f5,#0d1b22f5);border-top:1px solid #87918d66;display:grid;grid-template-columns:215px 1fr 310px;gap:22px;padding:20px 28px 17px;box-shadow:0 -20px 55px #06111855;backdrop-filter:blur(20px)}.character-title{font-size:19px;font-family:"SimSun",serif;letter-spacing:3px;margin-bottom:6px}.character-sub{font-size:9px;letter-spacing:1px;color:var(--muted);display:flex;justify-content:space-between}.resource-row{display:flex;gap:24px;margin-top:17px;margin-bottom:13px}.resource{min-width:43px}.resource label{display:block;color:var(--muted);font-size:9px;margin-top:3px}.resource b{font-family:Georgia,serif;font-size:28px;font-weight:400}.resource b small{color:#678489;font-size:12px}.resource:nth-child(1) b{color:#dba997}.resource:nth-child(2) b{color:#e1c693}.resource:nth-child(3) b{color:#91c9cd}.weapon-strip{display:flex;gap:10px;padding-top:12px;border-top:1px solid var(--line);align-items:center}.weapon-icon{width:37px;height:47px;flex-shrink:0;border:1px solid #71848577}.weapon-strip b{font-size:11px;font-weight:400;display:block;margin-bottom:5px}.weapon-strip small{color:#6f9095;font-size:9px}.board-section-head{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);letter-spacing:1px;margin-bottom:12px}.board-section-head span:first-child{color:var(--gold)}.hand{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.spell-card{position:relative;height:170px;background:#15272c;border:1px solid #57707166;text-align:left;padding:0;border-radius:3px;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}.spell-card:not(:disabled):hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 8px 22px #0007}.spell-card.selected{transform:translateY(-9px);border-color:#e4c795;box-shadow:0 0 0 1px #e4c795,0 8px 20px #0005}.card-picture{position:absolute;inset:0;background-repeat:no-repeat}.card-shade{position:absolute;inset:0;background:linear-gradient(180deg,#04151988,transparent 25%,transparent 45%,#081820ee 79%,#0b1b21 100%)}.card-cost{position:absolute;left:9px;top:9px;display:flex;align-items:center;gap:3px;text-shadow:0 1px 5px #000}.card-cost b{font-family:Georgia,serif;font-size:19px;font-weight:400}.card-cost span{font-size:12px;color:#efe7d1}.card-cooldown{position:absolute;right:8px;top:12px;font-size:9px;color:#d8e2d8;text-shadow:0 1px 4px #000}.card-content{position:absolute;bottom:11px;left:10px;right:8px}.card-path{font-size:8px;letter-spacing:2px;color:var(--card-color);margin-bottom:5px}.card-name{font-family:"SimSun",serif;font-size:14px;letter-spacing:1px;font-weight:700}.card-summary{font-size:8px;color:#8fa9ab;margin-top:6px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-slot{height:170px;border:1px dashed #34505988;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#3b5a61;font-family:Georgia,serif;font-size:31px;gap:8px}.empty-slot small{font-size:8px;font-family:inherit;letter-spacing:2px;color:#466068}.reflux{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:6px}.reflux-slot{height:89px;border:1px solid #41606c55;position:relative;background:#101f26a1;border-radius:2px;overflow:hidden}.reflux-slot .slot-num{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#51727a;font-family:Georgia,serif;font-size:24px}.reflux-slot.occupied{border-color:#9aaf9a88}.reflux-slot.occupied .slot-num{font-size:11px;color:#e8d3a9;background:#0c1a20dd;bottom:0;padding:4px}.reflux-slot .mini-name{position:absolute;left:4px;right:4px;top:8px;font-size:8px;text-shadow:0 1px 4px black;text-align:center;line-height:1.6;background:#09191d99}.reflux-arrow{font-size:9px;color:#7f9b9e;margin-top:12px;text-align:center;letter-spacing:1px}.reflux-note{font-size:9px;color:#5e7f86;margin-top:11px;line-height:1.7}.flipped{filter:grayscale(1)}.board-section{min-width:0}#toast{position:absolute;top:91px;left:50%;transform:translate(-50%,-10px);padding:12px 24px;background:#d7c498;color:#263233;z-index:50;font-size:12px;max-width:65vw;text-align:center;opacity:0;transition:.2s;pointer-events:none;box-shadow:0 4px 24px #0004}#toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}.modal-backdrop{position:fixed;inset:0;background:#05111699;backdrop-filter:blur(8px);z-index:20;display:flex;align-items:center;justify-content:center;padding:30px}.modal{width:820px;max-width:100%;max-height:88vh;overflow:auto;background:linear-gradient(135deg,#1d3137,#102128);border:1px solid #78908670;box-shadow:0 30px 100px #0008;padding:30px;position:relative}.modal.wide{width:1100px}.modal h2{font-family:"SimSun",serif;letter-spacing:4px;font-size:26px;font-weight:400;margin:8px 0 15px}.modal p{color:var(--muted);font-size:12px;line-height:1.9}.modal-close{position:absolute;right:17px;top:16px;width:30px;height:30px;font-size:20px;background:none;border:0;color:var(--muted)}.modal .eyebrow{margin:0 0 12px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:23px}.modal-footer button{padding:11px 25px;font-size:12px}.title-backdrop{background:linear-gradient(90deg,#09191ef5 0,#09191ed9 35%,#06111633 72%);backdrop-filter:none;justify-content:flex-start;padding-left:8vw}.title-screen{width:520px;padding:0;background:none;border:0;box-shadow:none;overflow:visible}.title-screen h1{font-size:77px;font-family:"SimSun",serif;letter-spacing:15px;line-height:1.2;font-weight:400;margin:24px 0 13px;color:#e9e5d9;text-shadow:0 5px 50px #b7d4ba22}.title-screen .english{letter-spacing:9px;color:var(--gold);font-size:13px}.title-screen .subtitle{font-family:"SimSun",serif;font-size:18px;letter-spacing:5px;color:#b3c7bd;margin:33px 0 18px}.title-screen .intro{width:360px;line-height:2.1;font-size:12px;color:#90a9a9}.title-screen .title-actions{display:flex;gap:12px;margin-top:31px}.title-screen .title-actions button{padding:15px 25px;letter-spacing:2px;font-size:12px}.title-screen .build-note{margin-top:29px;font-size:10px;color:#607f86}.mode-select{display:flex;gap:10px;margin:25px 0 10px}.mode-select button{padding:12px 15px;text-align:left;font-size:12px;min-width:150px}.mode-select small{display:block;color:#78989c;font-size:9px;margin-top:6px}.mode-select button.active small{color:#a8bcb7}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:25px}.guide-grid h3{font-size:13px;color:var(--gold);font-weight:500;letter-spacing:1px}.guide-grid p{font-size:11px;line-height:1.95;margin-bottom:0}.guide-grid strong{color:#d4ddcd;font-weight:500}.choice-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:22px}.choice-grid .spell-card{height:230px}.choice-grid.weapons{grid-template-columns:1fr 1fr}.weapon-choice{display:grid;grid-template-columns:115px 1fr;min-height:180px;text-align:left;padding:15px;gap:18px;border:1px solid var(--line);background:#13252c}.weapon-choice .weapon-art{height:160px}.weapon-choice h3{font-family:"SimSun",serif;font-size:19px;font-weight:400;letter-spacing:2px}.weapon-choice p{font-size:10px;line-height:1.8}.filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:20px 0}.filter-row button{font-size:11px;padding:8px 13px}.filter-row input{background:#0b1b22;border:1px solid var(--line);color:#d4dfd8;padding:9px 12px;min-width:190px;font-size:11px;margin-left:auto}.codex-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.codex-grid .spell-card{height:209px}.card-tip{position:fixed;width:280px;z-index:60;pointer-events:none;padding:17px;background:#0b1c23f5;border:1px solid #788f8166;box-shadow:0 12px 40px #0009}.card-tip h3{font-family:"SimSun",serif;font-size:18px;letter-spacing:2px;font-weight:400;color:#ede3ce;margin:0 0 10px}.card-tip p{font-size:11px;line-height:1.9;color:#9bb4b6;margin:0;white-space:pre-line}.card-tip small{font-size:9px;color:var(--gold);display:block;margin-bottom:10px}.log-list{display:flex;flex-direction:column;gap:9px;max-height:55vh;overflow:auto;margin-top:25px}.log-item{border-bottom:1px solid #344e5344;padding:0 0 9px;font-size:12px;color:#b1c4c2;line-height:1.7}.log-item span{color:#62888d;font-size:9px;margin-right:17px}.option-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.option-row button{padding:13px 20px;font-size:12px}.unit-detail{display:flex;justify-content:space-between;align-items:center}.unit-detail h3{font-size:14px;letter-spacing:2px;font-weight:400}.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{color:var(--muted);font-size:10px;padding:6px 10px;border:1px solid var(--line)}.win-emblem{font-size:67px;color:var(--gold);margin:10px auto;text-align:center}.modal.victory{text-align:center;width:560px}.check-row{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin:18px 0}.enhance-row{display:flex;gap:12px;font-size:11px;color:var(--muted);margin:15px 0}.fallback{color:#cfa98c;max-width:450px;position:absolute;top:30%;left:calc(50% - 225px);text-align:center;line-height:2}.hud-label{pointer-events:none}
@media(min-width:1550px){.player-board{grid-template-columns:240px 1fr 350px;gap:30px;height:268px;padding:22px 35px}.spell-card,.empty-slot{height:180px}.action-bar{bottom:290px}.turn-prompt{bottom:355px}.camera-tools{bottom:300px}.initiative{width:235px}.world-panel{width:240px}}
@media(max-width:1150px){.brand .world-name,.brand i{display:none}.round-header{gap:12px}.initiative{width:176px;left:18px}.world-panel{width:190px;right:18px}.player-board{grid-template-columns:165px 1fr 236px;padding:17px 18px;gap:16px;height:230px}.spell-card,.empty-slot{height:153px}.card-name{font-size:12px}.card-content{left:7px}.card-summary{display:none}.reflux-slot{height:79px}.resource-row{gap:15px}.resource b{font-size:24px}.character-title{font-size:17px}.action-bar{bottom:249px}.camera-tools{bottom:251px}.turn-prompt{bottom:308px}.camera-tools span{display:none}.topbar{padding:0 18px}.codex-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-height:760px){.topbar{height:65px}.initiative,.world-panel{top:88px}.event-panel{margin-top:8px;padding-top:13px}.tile-panel{margin-top:13px}.initiative .unit-row{padding:8px 11px}.turn-prompt{bottom:299px}.player-board{height:221px;padding-top:15px}.spell-card,.empty-slot{height:151px}.action-bar{bottom:239px}.camera-tools{bottom:244px}.reflux-slot{height:77px}.character-title{font-size:17px}.resource-row{margin-top:12px}.resource b{font-size:25px}.title-screen h1{font-size:66px}.title-screen .subtitle{margin-top:26px}.world-panel .tile-panel{display:none}}
@media(max-width:800px){.topbar nav button{padding:8px}.round-header{left:auto;right:150px;transform:none}.phase-steps{display:none}.brand b{font-size:21px}.brand small{font-size:6px}.sigil{font-size:30px}.initiative{width:137px;top:85px;left:12px}.eyebrow{font-size:8px}.eyebrow span{display:none}.unit-row{padding:8px;gap:7px}.unit-name{font-size:10px}.unit-icon{width:18px;height:26px}.unit-icon:after{left:6px;width:6px}.unit-energy{font-size:17px}.unit-meta{font-size:8px;gap:4px}.unit-row.current:after{display:none}.initiative-note{display:none}.world-panel{width:150px;right:12px;top:88px}.event-panel p{font-size:9px}.event-panel h3{font-size:12px}.team-line{font-size:9px}.team-bonus{font-size:8px}.tile-panel{display:none}.player-board{grid-template-columns:120px 1fr;height:211px;padding:14px 12px;gap:10px}.board-reflux{display:none}.hand{gap:5px}.spell-card,.empty-slot{height:150px}.resource-row{gap:8px}.resource b{font-size:20px}.resource{min-width:26px}.resource b small{font-size:9px}.character-title{font-size:14px}.character-sub{font-size:8px}.weapon-icon{width:28px;height:35px}.weapon-strip{gap:7px}.weapon-strip b{font-size:9px}.weapon-strip small{font-size:7px}.card-cost{left:6px;top:7px}.card-cooldown{right:5px;top:12px;font-size:8px}.card-cost b{font-size:16px}.card-name{font-size:10px;letter-spacing:0}.card-path{font-size:7px}.card-content{left:5px;bottom:8px}.board-section-head{font-size:8px;letter-spacing:0}.action-bar{bottom:227px;gap:4px;padding:4px}.action-bar button{font-size:9px;padding:9px 10px}.action-bar small{display:none}.turn-prompt{bottom:284px;width:70%}.turn-prompt h2{font-size:13px}.turn-prompt p{font-size:9px}.camera-tools{bottom:285px;left:12px;flex-direction:column}.camera-tools button{width:25px;height:25px}.modal{padding:24px 18px}.modal-backdrop{padding:17px}.title-backdrop{padding-left:8vw}.title-screen h1{font-size:55px}.title-screen .english{font-size:10px;letter-spacing:6px}.title-screen .intro{width:290px}.guide-grid{gap:16px}.choice-grid{gap:6px}.choice-grid .spell-card{height:172px}.codex-grid{grid-template-columns:repeat(3,1fr)}.codex-grid .spell-card{height:200px}.weapon-choice{grid-template-columns:60px 1fr;gap:9px;padding:8px}.weapon-choice .weapon-art{height:100px}.weapon-choice h3{font-size:13px}.weapon-choice p{font-size:9px}.choice-grid.weapons{gap:7px}.filter-row input{width:100%;margin:0}}
:root{--path-color:#b8d8dd;--path-rgb:184,216,221}
/* Path colours are shared by the codex, altar panels and casting announcements. */
[data-path="destruction"]{--path-color:#ed795b;--path-rgb:237,121,91}
[data-path="mystery"]{--path-color:#b99ae8;--path-rgb:185,154,232}
[data-path="life"]{--path-color:#86c59a;--path-rgb:134,197,154}
[data-path="dominion"]{--path-color:#88acf1;--path-rgb:136,172,241}
[data-path="order"]{--path-color:#e9c977;--path-rgb:233,201,119}
[data-path="end"]{--path-color:#b5a8a2;--path-rgb:181,168,162}
[data-path="neutral"]{--path-color:#b8d8dd;--path-rgb:184,216,221}
[data-path="omniscience"]{--path-color:#d7eee3;--path-rgb:215,238,227}
.filter-row button[data-path],.option-row button[data-path]{color:var(--path-color);border-color:rgba(var(--path-rgb),.35);background:linear-gradient(135deg,rgba(var(--path-rgb),.1),#13242b)}
.filter-row button[data-path]:before{content:'';display:inline-block;width:5px;height:5px;margin-right:7px;background:var(--path-color);transform:rotate(45deg);vertical-align:2px}
.filter-row button[data-path]:hover,.option-row button[data-path]:hover{border-color:var(--path-color);background:rgba(var(--path-rgb),.18)}
.filter-row button[data-path].active,.option-row button[data-path].active{border-color:var(--path-color);background:rgba(var(--path-rgb),.23);box-shadow:inset 0 -2px var(--path-color),0 0 17px rgba(var(--path-rgb),.08)}
.spell-card[data-path]{border-color:rgba(var(--path-rgb),.48);border-bottom:3px solid var(--path-color)}
.spell-card[data-path]:not(:disabled):hover{border-color:var(--path-color);box-shadow:0 8px 22px #0007,0 0 17px rgba(var(--path-rgb),.2)}
.spell-card[data-path].selected{border-color:var(--path-color);box-shadow:0 0 0 1px var(--path-color),0 8px 20px #0005}
.spell-card[data-path] .card-path{color:var(--path-color)}
.spell-card[data-path] .card-shade{background:linear-gradient(180deg,#04151988,transparent 25%,transparent 43%,#081820ed 79%,rgba(var(--path-rgb),.17) 100%)}
.spell-card.is-ultimate:after{content:'✧';position:absolute;top:8px;left:calc(50% - 9px);width:18px;text-align:center;color:var(--path-color);font-size:19px;line-height:20px;text-shadow:0 0 10px var(--path-color),0 2px 5px #000;pointer-events:none}
.codex-grid .spell-card[data-path]{box-shadow:inset 0 0 0 1px rgba(var(--path-rgb),.08)}
.card-tip[data-path]{border-color:rgba(var(--path-rgb),.6);border-top:2px solid var(--path-color);background:linear-gradient(130deg,rgba(var(--path-rgb),.1),transparent 60%),#0b1c23f7}
.card-tip[data-path] small{color:var(--path-color)}
.modal[data-path]{border-color:rgba(var(--path-rgb),.43);border-top:2px solid var(--path-color);background:radial-gradient(ellipse at 5% 0,rgba(var(--path-rgb),.13),transparent 64%),linear-gradient(135deg,#1d3137,#102128);box-shadow:0 30px 100px #0008,0 -7px 45px rgba(var(--path-rgb),.07)}
.modal[data-path] h2,.modal[data-path]>.eyebrow{color:var(--path-color)}
.modal[data-path] .primary{background:var(--path-color);border-color:var(--path-color);color:#172329}
.modal[data-path] .primary:hover{filter:brightness(1.12)}
.modal[data-path] input:focus-visible,.modal[data-path] button:focus-visible{outline-color:var(--path-color)}
.tile-panel[data-path]{border-color:rgba(var(--path-rgb),.47);border-left:3px solid var(--path-color);background:linear-gradient(115deg,rgba(var(--path-rgb),.14),transparent 85%),#102128ed;box-shadow:0 0 24px rgba(var(--path-rgb),.06)}
.tile-panel[data-path] .tile-type,.tile-panel[data-path] h3{color:var(--path-color)}
.event-panel[data-path]{border-top-color:rgba(var(--path-rgb),.45)}
.event-panel[data-path] h3,.event-panel[data-path] .event-label span:first-child{color:var(--path-color)}
.event-panel[data-path] .event-progress i.filled{background:var(--path-color);box-shadow:0 0 7px rgba(var(--path-rgb),.45)}
/* A short, non-interactive caption leaves the board and all controls usable. */
.spell-announcement{position:absolute;z-index:8;pointer-events:none;top:101px;left:50%;width:min(430px,calc(100vw - 530px));padding:13px 22px 14px;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,-8px);border-top:1px solid rgba(var(--path-rgb),.55);border-bottom:1px solid rgba(var(--path-rgb),.25);background:linear-gradient(90deg,transparent,#07151be6 19%,#07151be6 81%,transparent);transition:opacity .22s ease,transform .22s ease,visibility .22s;isolation:isolate}
.spell-announcement.show{opacity:1;visibility:visible;transform:translate(-50%,0);animation:spell-title-enter .35s ease-out both}
.spell-announcement:before{content:'';position:absolute;inset:-25px 8%;background:radial-gradient(ellipse,rgba(var(--path-rgb),.18),transparent 70%);z-index:-1;pointer-events:none}
.spell-kicker{font-size:8px;line-height:1.3;letter-spacing:3px;color:var(--path-color);margin-bottom:6px}
.spell-name{font-family:"STZhongsong","SimSun",serif;font-size:23px;font-weight:400;line-height:1.25;letter-spacing:4px;color:#ecede4;text-shadow:0 0 20px rgba(var(--path-rgb),.6),0 2px 4px #000}
.spell-subtitle{margin-top:7px;color:#aabfbb;font-size:10px;line-height:1.5;letter-spacing:1px}
.spell-announcement.ultimate{top:105px;padding:17px 22px 18px;border-top-color:var(--path-color);border-bottom-color:rgba(var(--path-rgb),.6);background:linear-gradient(90deg,transparent,rgba(var(--path-rgb),.13) 12%,#07151bef 30%,#07151bef 70%,rgba(var(--path-rgb),.13) 88%,transparent)}
.spell-announcement.ultimate.show{animation:ultimate-title-enter .65s cubic-bezier(.16,1,.3,1) both}
.spell-announcement.ultimate:before{inset:-35px -30px;background:radial-gradient(ellipse,rgba(var(--path-rgb),.28),transparent 70%)}
.spell-announcement.ultimate:after{content:'✧';position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:38px;color:var(--path-color);opacity:.65;text-shadow:0 0 18px rgba(var(--path-rgb),.6);pointer-events:none}
.spell-announcement.ultimate .spell-kicker{letter-spacing:4px;font-size:9px;color:var(--path-color)}
.spell-announcement.ultimate .spell-name{font-size:31px;letter-spacing:7px;text-shadow:0 0 28px rgba(var(--path-rgb),.7),0 2px 8px #000}
@keyframes spell-title-enter{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes ultimate-title-enter{from{opacity:0;transform:translate(-50%,-6px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-height:760px){.spell-announcement{top:83px;padding:10px 18px}.spell-announcement.ultimate{top:85px;padding:13px 20px}.spell-name{font-size:20px}.spell-announcement.ultimate .spell-name{font-size:26px}.spell-subtitle{margin-top:5px;font-size:9px}}
@media(max-width:1000px){.spell-announcement{width:calc(100vw - 410px);padding-left:12px;padding-right:12px}.spell-name{font-size:20px;letter-spacing:2px}.spell-announcement.ultimate .spell-name{font-size:25px;letter-spacing:4px}.spell-announcement.ultimate:after{display:none}}
@media(max-width:800px){.spell-announcement{top:83px;width:calc(100vw - 320px);min-width:180px;padding:10px}.spell-kicker{font-size:7px;letter-spacing:1px}.spell-name{font-size:17px;letter-spacing:1px}.spell-subtitle{font-size:8px;letter-spacing:0}.spell-announcement.ultimate{top:85px;padding:12px 9px}.spell-announcement.ultimate .spell-name{font-size:21px;letter-spacing:2px}.spell-announcement.ultimate .spell-kicker{font-size:7px;letter-spacing:2px}}
.spell-announcement.reduced-motion,.spell-announcement.reduced-motion.show{animation:none;transition:opacity .15s ease;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.spell-announcement,.spell-announcement.show,.spell-announcement.ultimate.show{animation:none;transition:opacity .15s ease;transform:translateX(-50%)}.spell-card,.spell-card:not(:disabled):hover,.spell-card.selected{transition:none;transform:none}}
/* Codex previews are isolated from a running battle and leave the model unobscured. */
body.vfx-preview-mode .topbar,body.vfx-preview-mode .initiative,body.vfx-preview-mode .world-panel,body.vfx-preview-mode .player-board,body.vfx-preview-mode .action-bar,body.vfx-preview-mode .turn-prompt,body.vfx-preview-mode .camera-tools{visibility:hidden}
body.vfx-preview-mode #battlefield{inset:0 310px 0 0;background:radial-gradient(ellipse at 50% 45%,#243b41,#0c171e 74%)}
body.vfx-preview-mode .spell-announcement{left:calc((100% - 310px)/2);top:37px;width:min(410px,calc(100vw - 400px))}
.vfx-preview-panel{position:fixed;z-index:9;right:24px;top:72px;width:260px;max-height:calc(100vh - 96px);overflow:auto;padding:21px 20px 18px;border:1px solid rgba(var(--path-rgb),.42);border-top:2px solid var(--path-color);background:radial-gradient(ellipse at top left,rgba(var(--path-rgb),.13),transparent 65%),#102128f5;box-shadow:0 16px 55px #0006;scrollbar-width:thin;scrollbar-color:var(--path-color) #102128}
.vfx-preview-panel .eyebrow{margin:0 0 9px;color:var(--path-color);font-size:8px;letter-spacing:2px}
.vfx-preview-panel h2{font-family:"STZhongsong","SimSun",serif;font-size:23px;font-weight:400;letter-spacing:3px;line-height:1.4;color:#e7e9df;margin:0 0 17px}
.vfx-preview-panel .preview-art{height:160px;width:100%;border:1px solid rgba(var(--path-rgb),.45);box-shadow:0 4px 18px #0004;background-repeat:no-repeat;overflow:hidden}
.vfx-preview-panel p{font-size:11px;line-height:1.8;color:#a8bcb9;margin:14px 0;white-space:pre-line}
.vfx-preview-panel .option-row{gap:7px;margin:14px 0 0;display:flex;flex-wrap:wrap}
.vfx-preview-panel button{padding:10px 13px;font-size:11px;line-height:1.4;flex:1;white-space:nowrap}
.vfx-preview-panel button[data-preview-replay]{background:var(--path-color);color:#172329;border-color:var(--path-color);font-weight:600}
.vfx-preview-panel button[data-preview-replay]:hover{filter:brightness(1.12)}
.vfx-preview-panel button:focus-visible{outline-color:var(--path-color)}
.vfx-preview-panel .preview-status{margin-top:13px;font-size:9px;color:var(--path-color);line-height:1.8;min-height:17px;letter-spacing:.5px}
.vfx-preview-panel .preview-nav{display:flex;gap:7px;border-top:1px solid rgba(var(--path-rgb),.22);padding-top:13px;margin-top:13px}
.vfx-preview-panel .preview-nav button{background:transparent;color:#9fb5b5;font-size:10px;padding:8px 9px}
.vfx-preview-panel [data-preview-back]{color:#d3ded9}
@media(max-height:760px) and (min-width:901px){.vfx-preview-panel{top:32px;max-height:calc(100vh - 56px);padding:19px 18px}.vfx-preview-panel h2{font-size:21px;margin-bottom:13px}.vfx-preview-panel p{font-size:10px;line-height:1.75;margin:12px 0}.vfx-preview-panel .option-row{margin-top:11px}.vfx-preview-panel button{padding:9px 11px}}
@media(max-width:900px){body.vfx-preview-mode #battlefield{inset:0 0 260px}body.vfx-preview-mode .spell-announcement{left:50%;top:24px;width:min(390px,80vw)}.vfx-preview-panel{top:auto;bottom:0;left:0;right:0;width:100%;max-height:245px;min-height:230px;padding:18px 20px 16px 145px;border-width:1px 0 0;box-shadow:0 -12px 45px #0006}.vfx-preview-panel h2{font-size:20px;letter-spacing:2px;margin:0 0 7px}.vfx-preview-panel .eyebrow{font-size:7px;margin-bottom:5px}.vfx-preview-panel .preview-art{position:absolute;left:18px;top:18px;width:108px;height:150px}.vfx-preview-panel p{font-size:10px;line-height:1.6;margin:6px 0 9px}.vfx-preview-panel .option-row{margin-top:9px}.vfx-preview-panel button{font-size:10px;padding:8px 10px}.vfx-preview-panel .preview-status{font-size:8px;margin-top:8px}.vfx-preview-panel .preview-nav{margin-top:9px;padding-top:9px}.vfx-preview-panel .preview-nav button{padding:6px 9px}}

/* Round completion and per-tile availability remain visible at phone sizes. */
.round-progress{display:inline-block;font:normal 10px/1.3 sans-serif;letter-spacing:0;color:#b8c9bf;margin-left:6px;vertical-align:middle}
.tile-usage{color:#c5d7bb!important;border-top:1px solid #61766a66;padding-top:7px;margin-top:8px!important}
.tile-usage.used{color:#dba58e!important}

/* Public offers are an inspection surface, independent of tile interaction. */
.topbar nav #market-btn{color:var(--gold)}
.tile-market-link{width:100%;margin-top:10px;padding:9px 6px;font-size:11px;color:var(--gold)}
.market-grid{display:grid;grid-template-columns:repeat(auto-fit,125px);justify-content:center;gap:18px 14px;margin:24px 0 18px}
.market-offer{min-width:0}
.market-offer-label{display:flex;justify-content:space-between;gap:5px;font-size:10px;line-height:1.5;color:var(--gold);margin-bottom:9px}
.market-offer-label span:first-child{color:var(--muted)}
.market-grid .spell-card{display:block;width:125px;min-width:125px;height:auto;aspect-ratio:5748 / 7848;border:0;box-shadow:inset 0 0 0 1px #57707166}
.modal .market-note{font-size:11px;color:var(--muted)}
/* Friend rooms share the original artwork and fixed card proportions. */
#online-status{position:fixed;left:50%;transform:translateX(-50%);top:82px;z-index:24;padding:8px 12px;font-size:11px;background:#142b30ed;border:1px solid #6d9a94;color:#c9ded3;border-radius:4px;white-space:nowrap}
#online-status.disconnected{color:#edb78b;border-color:#ac7959}
.online-field{display:flex;flex-direction:column;gap:8px;margin:18px 0;color:#c8d9d6}
.online-field input,.online-create select{padding:12px;background:#0d2026;color:#e4e6dc;border:1px solid #466261;border-radius:4px;font:inherit}
.online-create{display:flex;gap:12px;flex-wrap:wrap}.online-create select{flex:1}
.online-code{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0 20px}.online-code strong{font-size:28px;letter-spacing:5px;color:#ddcda8}
.online-seats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.online-seat{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#15292e;border:1px solid #3a5357;padding:14px;border-radius:5px}
.online-seat.self{border-color:#afbd8e}.online-seat small{display:block;margin-top:7px;color:#94b1af;font-size:11px}.online-seat>span{font-size:12px;color:#c7b791;white-space:nowrap}.online-seat b{overflow-wrap:anywhere}
.online-note{font-size:12px!important;opacity:.7}.online-title-actions{margin-top:10px!important}
@media(max-width:650px){.online-seats{grid-template-columns:1fr}.online-seat{padding:10px}.online-code strong{font-size:24px}#online-status{top:58px;font-size:10px;padding:5px 8px}.online-title-actions{flex-wrap:wrap}.online-title-actions button{min-width:125px}}

/* Custom names may be up to 16 characters; cards keep their original size. */
.online-name-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.online-name-fields .online-field{margin:10px 0}.online-name-fields input{width:100%;min-width:0;box-sizing:border-box}
.online-character-names{padding:14px;border:1px solid #45615b;border-radius:5px;background:#12272b}
.online-character-names h3{margin:0}.online-character-names p{margin:8px 0;font-size:12px}
.online-seat>div{min-width:0}.online-seat small,.modal h2,.modal h3,.modal p,.log-item{overflow-wrap:anywhere}
.unit-name,.character-title{overflow-wrap:anywhere;white-space:normal}.unit-data{min-width:0}
.battlefield-unit-label>span{display:block;max-width:180px;white-space:normal;overflow-wrap:anywhere}
#turn-prompt h2{overflow-wrap:anywhere}
@media(max-width:480px){.online-name-fields{grid-template-columns:1fr;gap:0}}