/* Game UI V2 — generated forged material integration. Loaded after legacy CSS. */
:root{--gold:#d6a548;--ink:#ece5d7;--soft:#9ca2aa;--line:#57544f;--panel:#0d1118;--panel2:#161a20}
body{font-family:"ForgeSans","Noto Sans TC",sans-serif;background:#05070b;color:var(--ink)}
.disp,.teach .word,.teach .zh,.dexCell .en,.frameSent,.rift .nm,.chip b,.dmgFloat,.ultCin{font-family:"ForgeSerif","Noto Serif TC",serif!important;letter-spacing:.035em}
.scene{background:radial-gradient(ellipse at 50% -10%,#1a2029,#070a0f 54%,#030507)}
.hud{min-height:82px;padding:15px 26px;gap:11px;background:#090d13;border:22px solid transparent;border-image:url("forge-v2/panel.v01.png") 70 88 fill / 22px stretch;filter:drop-shadow(0 8px 10px #000);font-family:"ForgeSerif";position:relative}
.hud::after{content:"";position:absolute;left:3%;right:3%;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,#b18544 35%,#584124 70%,transparent);opacity:.58}
.chip{height:42px;min-width:94px;padding:0 15px;border:0;border-radius:0;background:url("forge-v2/counter.v01.png") center/100% 100% no-repeat;color:#a8a8a8;font:680 12px "ForgeSerif";letter-spacing:.055em;filter:drop-shadow(0 4px 4px #000);box-shadow:none}
.chip b{font-size:17px;color:#f0cc7b;text-shadow:0 1px #3a220b,0 2px 3px #000;font-variant-numeric:tabular-nums}
.chip.tgl{cursor:pointer;min-width:86px;color:#d3cec4;transition:transform .14s,filter .14s}.chip.tgl:hover{transform:translateY(-2px);filter:brightness(1.16) drop-shadow(0 5px 5px #000)}
.btn{position:relative;min-height:46px;padding:0 24px;border:0;border-radius:0;background:transparent;color:#e8e1d2;font:760 15px "ForgeSerif";letter-spacing:.065em;text-shadow:0 2px 2px #000;box-shadow:none;filter:drop-shadow(0 5px 5px #000);isolation:isolate}
.btn::before{content:"";position:absolute;inset:-9px -12px;z-index:-1;background:url("forge-v2/primary.v01.png") center/100% 100% no-repeat}
.btn.ghost::before,.btn.story::before{background-image:url("forge-v2/secondary.v01.png")}.btn.ghost,.btn.story{background:transparent;color:#d7d1c6;border:0}.btn:hover{transform:translateY(-2px);filter:brightness(1.14) drop-shadow(0 6px 5px #000)}.btn:active{transform:translateY(2px)}.btn:disabled{filter:grayscale(1) brightness(.52);opacity:.55}
.forge,.endCard,.ovInner.glass,#endbox{border:28px solid transparent!important;border-image:url("forge-v2/panel.v01.png") 72 80 fill / 28px stretch!important;border-radius:0!important;background:#0b0f16!important;filter:drop-shadow(0 15px 20px rgba(0,0,0,.68));box-shadow:none!important}
.ovInner{width:min(470px,92vw);padding:42px 40px!important}.ovInner .disp{font-size:34px!important;color:#eacb88!important;text-shadow:0 1px #6e4517,0 3px 8px #000}.muted{color:#989ca3;font-weight:650;letter-spacing:.025em}
#endmask{background:rgba(2,4,7,.84);backdrop-filter:blur(3px)}#endbox{max-height:92vh;overflow:auto;padding:24px!important}
#mapWrap{margin:0 14px 14px;flex:1;border:25px solid transparent;border-image:url("forge-v2/panel.v01.png") 68 80 fill / 25px stretch;background:#06090e;filter:drop-shadow(0 12px 15px #000);overflow:hidden}
#mapBg{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);filter:saturate(.92) brightness(.8) contrast(1.05)}#mapFallback{inset:5px;background:#080d12}
#mapWrap::before{z-index:1;background:linear-gradient(90deg,rgba(3,5,8,.6),transparent 22%,transparent 76%,rgba(3,5,8,.62)),radial-gradient(ellipse at 50% 52%,transparent 38%,rgba(2,4,7,.52) 100%)}
#mapWrap::after{content:"回聲鎮｜第一關聲路圖";right:28px;bottom:22px;z-index:9;padding:10px 22px;border:0;border-radius:0;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;color:#e9cb8d;font:760 13px "ForgeSerif";letter-spacing:.18em;filter:drop-shadow(0 5px 5px #000);box-shadow:none}
.mapRegion{position:absolute;z-index:2;pointer-events:none;padding:6px 18px;color:rgba(231,210,164,.72);font:700 12px "ForgeSerif";letter-spacing:.2em;text-shadow:0 2px 5px #000;background:linear-gradient(90deg,transparent,rgba(6,9,14,.6),transparent)}
.edge{z-index:3;height:7px;border:0;background:linear-gradient(180deg,#7f673f 0,#2e2418 45%,#0d1015 48%,#4c4030 73%,#15120d);box-shadow:0 2px 5px #000,0 0 8px rgba(210,162,73,.18);opacity:.78}
.node{z-index:5;width:30px;height:30px;border:0;border-radius:50%;transform:translate(-50%,-50%);background:url("forge-v2/socket.v01.png") center/contain no-repeat;box-shadow:none;color:#c3b07f;font:700 12px "ForgeSerif";filter:drop-shadow(0 5px 4px #000);transition:transform .16s,filter .16s}
.node:hover{transform:translate(-50%,-50%) scale(1.16);filter:brightness(1.18) drop-shadow(0 6px 5px #000)}.node .ni{display:block;transform:none;font-size:12px}.node small{display:none}
.node.landmark{width:112px;height:72px;border-radius:0;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;color:#e5d4aa;display:flex;flex-direction:column;justify-content:center;gap:1px}.node.landmark .ni{font-size:24px;line-height:1}.node.landmark small{display:block;position:static;transform:none;color:#d9d1c2;font:720 11px "ForgeSerif";letter-spacing:.08em;text-shadow:0 2px 4px #000}.node.node-boss{width:130px;height:82px;background-image:url("forge-v2/primary.v01.png")}.node.node-boss .ni{color:#e6bb63}.node.node-chest{width:70px;height:55px}.node.node-study{width:104px;height:68px}.node.done{opacity:.48;filter:grayscale(.6) drop-shadow(0 5px 4px #000)}.node.locked{opacity:.56;filter:grayscale(1) drop-shadow(0 5px 4px #000)}.node.adj{background-image:url("forge-v2/primary.v01.png");filter:drop-shadow(0 0 8px rgba(214,165,72,.65)) drop-shadow(0 6px 4px #000)}.node.guide{outline:2px solid #f5d58f;outline-offset:4px;animation:tutGuideV2 .85s infinite alternate}@keyframes tutGuideV2{to{filter:brightness(1.28) drop-shadow(0 0 17px #d6a548) drop-shadow(0 6px 4px #000)}}
#hero{z-index:8;font-size:0;transform:translate(-50%,-82%);filter:drop-shadow(0 8px 8px #000)}#hero::after{width:46px;height:10px;bottom:-4px}#hero img{height:82px;mix-blend-mode:normal;filter:drop-shadow(0 4px 6px #000)}
#scStudy #studyBody{padding:22px 28px!important}.lgrid{gap:14px}.opt,.ltile,.spellin{font-family:"ForgeSerif"!important;border-radius:0!important}.opt,.ltile{background:#0b0f16!important;border:18px solid transparent!important;border-image:url("forge-v2/secondary.v01.png") 55 70 fill / 18px stretch!important;color:#ded6c7!important;box-shadow:none!important}.opt.good,.ltile.good{filter:drop-shadow(0 0 7px #568c68)}.opt.bad,.ltile.bad{filter:drop-shadow(0 0 7px #a04a45)}
.stage{background:#05070b}.stageBg{filter:saturate(.92) brightness(.64) contrast(1.08)}#battleBg{opacity:1;filter:saturate(.93) brightness(.65) contrast(1.08)}.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,5,8,.58),transparent 28%,transparent 72%,rgba(3,5,8,.36)),linear-gradient(0deg,rgba(3,5,8,.75),transparent 45%)}
.arena{z-index:3;align-items:center;padding:0 120px 0 200px}.rift{width:min(430px,34vw);margin-left:auto}.rift .nm{bottom:-18px;border:18px solid transparent;border-image:url("forge-v2/secondary.v01.png") 55 70 fill / 18px stretch;background:transparent;border-radius:0;padding:0 18px;color:#e7d5ad;font-family:"ForgeSerif";filter:drop-shadow(0 5px 5px #000)}.stageHero{left:1%;bottom:18%;height:48%;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 12px 15px #000)}
#scBattle>.hud{z-index:24}.hpTrack{height:18px;border:12px solid transparent;border-image:url("forge-v2/gauge.v01.png") 25 70 fill / 12px stretch;border-radius:0;background:#030508;box-shadow:none;overflow:visible;padding:0}.hpTrack i{height:8px;margin-top:-4px;border-radius:0;box-shadow:inset 0 1px rgba(255,255,255,.3),0 0 6px currentColor}.kiWrap{left:18px;top:94px;bottom:270px;width:44px;z-index:15}.kiTrack{width:20px;border:10px solid transparent;border-image:url("forge-v2/gauge.v01.png") 25 70 fill / 10px stretch;border-radius:0;background:#020406;overflow:hidden}.kiWrap b{font:750 12px "ForgeSerif";color:#e7c575;text-shadow:0 2px 4px #000}
.tray{z-index:18;min-height:258px;padding:26px 24px 18px;background:#080b10;border:24px solid transparent;border-image:url("forge-v2/panel.v01.png") 70 82 fill / 24px stretch;gap:24px;align-items:center;filter:drop-shadow(0 -10px 14px #000)}.slotGroup{gap:12px;padding:14px 16px 10px;border:0;border-radius:0;background:rgba(3,5,8,.55);box-shadow:inset 0 3px 9px #000;align-items:flex-end}.gLabel{top:-14px;left:18px;background:#080b10;color:#c5ab75;font:700 10px "ForgeSerif";letter-spacing:.16em;border-radius:0}
.card{border-radius:0;overflow:visible;font-family:"ForgeSerif";box-shadow:none}.card:hover{transform:translateY(-9px);filter:brightness(1.08)}.card.beast{width:168px;height:224px;background:#05070b;filter:drop-shadow(0 9px 7px #000)}.card.beast .art img{object-fit:contain}.card.beast .cstat{font:650 10px "ForgeSans";color:#e1c27e}.card.skill{width:124px;height:172px;padding:16px 12px 12px;border:0;background:url("forge-v2/tab.v01.png") center/100% 100% no-repeat;filter:drop-shadow(0 9px 7px #000);display:flex;align-items:center;justify-content:flex-start;gap:4px}.card.skill .art{flex:0 0 78px;width:78px;height:76px;border:0;background:url("forge-v2/socket.v01.png") center/contain no-repeat;overflow:hidden;padding:14px}.card.skill .art img{width:100%;height:100%;object-fit:contain;filter:sepia(.3) saturate(.75) brightness(1.12) drop-shadow(0 2px 2px #000)}.card.skill .lbl{padding:2px 0 0;border:0;background:none;color:#efd49a;font:750 15px "ForgeSerif";line-height:1.1}.card.skill .skillDesc{font:600 9px/1.35 "ForgeSans";color:#a8a5a0;text-align:center;max-width:96px}.card.skill .skillType{margin-top:auto;font:700 8px "ForgeSans";letter-spacing:.16em;color:#776d5d}.card.empty{opacity:.2;border:16px solid transparent;border-image:url("forge-v2/secondary.v01.png") 55 70 fill / 16px stretch;background:#070a0f}
.teach .liveCard{width:min(330px,74vw)}.dexGrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}.dexCell{border:18px solid transparent;border-image:url("forge-v2/secondary.v01.png") 55 70 fill / 18px stretch;border-radius:0;background:#080b11;padding:5px;filter:drop-shadow(0 6px 5px #000)}
.cutPanel{max-width:820px;padding:22px 34px 30px;border:24px solid transparent;border-image:url("forge-v2/panel.v01.png") 70 82 fill / 24px stretch;background:#090d13;filter:drop-shadow(0 -10px 18px #000)}.cutTitle{font:760 16px "ForgeSerif";color:#e7c67e;letter-spacing:.18em}.cutText{font:500 17px/1.95 "ForgeSerif";color:#ece5d8;text-shadow:0 2px 7px #000}.qRow{border:18px solid transparent;border-image:url("forge-v2/secondary.v01.png") 55 70 fill / 18px stretch;border-radius:0;background:#090c12;padding:8px 14px;margin:4px 0;box-shadow:none}.gbar{border-radius:0!important;background:#030508!important}
@media(max-width:1180px){.hud{padding:13px 18px;gap:6px}.chip{min-width:78px;padding:0 10px;font-size:10px}.card.beast{width:150px;height:200px}.card.skill{width:110px;height:152px}.tray{min-height:228px;gap:14px;padding:22px 14px 14px}.arena{padding-left:155px;padding-right:80px}.stageHero{height:43%}}

.firstAcquire{width:min(320px,62vw);margin:0 auto 14px}.firstAcquire .liveCard{width:100%;filter:drop-shadow(0 12px 12px #000)}.acquireSeal{margin:12px auto 14px;padding:10px 22px;max-width:420px;color:#ebcd8d;font:760 14px "ForgeSerif";letter-spacing:.12em;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;text-shadow:0 2px 3px #000}

.chip .f-icon{width:17px;height:17px;flex:0 0 17px;color:#a8afb7}.chip.tgl .f-icon{color:#c8b27e}.node .ni{display:grid;place-items:center}.node .ni .f-icon{width:18px;height:18px}.node.landmark .ni .f-icon{width:28px;height:28px}.node.node-boss .ni .f-icon{width:34px;height:34px}.routeDot{display:block;width:5px;height:5px;border-radius:50%;background:#8c7957;box-shadow:0 1px 2px #000}

.lessonDeck{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.lessonPlate{position:relative;min-height:230px;display:grid;grid-template-columns:120px 1fr;grid-template-rows:1fr auto;gap:12px 18px;padding:32px 34px 25px;border:28px solid transparent;border-image:url("forge-v2/panel.v01.png") 72 80 fill / 28px stretch;background:#0a0e14;filter:drop-shadow(0 10px 12px #000)}.lessonNo{position:absolute;top:18px;right:28px;color:#776d5c;font:700 10px "ForgeSerif";letter-spacing:.22em}.lessonSigil{grid-row:1/3;align-self:center;width:108px;height:106px;display:grid;place-items:center;background:url("forge-v2/socket.v01.png") center/contain no-repeat}.lessonSigil .f-icon{width:45px;height:45px;color:#c9ac70}.lessonCopy{align-self:center}.lessonCopy h3{margin:0 0 6px;color:#e8d3a5;font:760 21px "ForgeSerif";letter-spacing:.055em;text-shadow:0 2px 4px #000}.lessonCopy p{margin:0 0 9px;color:#8e9299;font-size:11px;letter-spacing:.12em}.lessonMeter{height:12px;background:#030508;box-shadow:inset 0 3px 5px #000;overflow:hidden}.lessonMeter i{display:block;height:100%;background:linear-gradient(180deg,#d6ad5a,#745022);box-shadow:inset 0 1px #f2d391}.lessonCount{margin-top:7px;color:#999;font-size:11px}.lessonCount b{color:#e6c478;font:750 16px "ForgeSerif"}.lessonPlate>.btn{grid-column:2;justify-self:start;min-width:170px}.lessonPlate.complete{filter:drop-shadow(0 10px 12px #000) brightness(.85)}@media(max-width:1050px){.lessonDeck{grid-template-columns:1fr}.lessonPlate{min-height:190px}}

#nodes,#edges{position:absolute;inset:0;z-index:3;pointer-events:none}.districtEdge{height:8px;z-index:2;opacity:.58}.districtLandmark{position:absolute;transform:translate(-50%,-50%);width:230px;min-height:86px;padding:16px 22px;border:0;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;color:#d8d1c4;display:flex;align-items:center;gap:14px;text-align:left;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 9px 7px #000);transition:transform .15s,filter .15s;font-family:"ForgeSerif"}.districtLandmark:hover{transform:translate(-50%,-55%);filter:brightness(1.14) drop-shadow(0 11px 8px #000)}.districtLandmark.focused{background-image:url("forge-v2/primary.v01.png");color:#f0d79f;filter:drop-shadow(0 0 10px rgba(214,165,72,.38)) drop-shadow(0 9px 7px #000)}.districtLandmark.target{outline:2px solid #f0cf83;outline-offset:3px;animation:tutGuideV2 .9s infinite alternate}.districtLandmark.completed{opacity:.68}.districtIcon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;background:url("forge-v2/socket.v01.png") center/contain no-repeat}.districtIcon .f-icon{width:25px;height:25px;color:#c8ae78}.districtLandmark b{display:block;font-size:15px;letter-spacing:.07em;text-shadow:0 2px 4px #000}.districtLandmark small{display:block;margin-top:4px;color:#8f9297;font:600 9px "ForgeSans";letter-spacing:.04em}#hero{z-index:8;transition:left .6s var(--ez),top .6s var(--ez)}
#routeConsole{position:absolute;left:34px;right:34px;bottom:24px;z-index:18;height:160px;padding:20px 26px 18px;border:24px solid transparent;border-image:url("forge-v2/panel.v01.png") 70 82 fill / 24px stretch;background:#070a0f;filter:drop-shadow(0 10px 14px #000)}.routeHead{position:absolute;left:26px;top:-48px;right:26px;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;color:#d9c18d;font-family:"ForgeSerif"}.routeHead>div{display:flex;align-items:center;gap:10px}.routeHead .f-icon{width:22px;height:22px}.routeHead b{display:block;font-size:13px;letter-spacing:.08em}.routeHead small{display:block;color:#878b92;font:600 8px "ForgeSans"}.routeHead em{font:700 11px "ForgeSerif";color:#8e826c;font-style:normal;letter-spacing:.16em}.routeTrack{height:100%;display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;padding:3px 5px 7px;scrollbar-color:#5d4b2e #05070a}.routeNode{position:relative;flex:0 0 118px;height:96px;padding:12px 8px 8px;border:0;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;color:#c9c4bb;font-family:"ForgeSerif";filter:drop-shadow(0 5px 4px #000);cursor:pointer}.routeNode .f-icon{width:25px;height:25px;margin:0 auto 4px}.routeNode b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.routeNode small{display:block;color:#7f838b;font:600 8px "ForgeSans"}.routeNode .routeIndex{position:absolute;top:7px;left:11px;color:#6d6558;font:700 8px "ForgeSerif"}.routeNode.reachable{background-image:url("forge-v2/primary.v01.png");color:#ead39f}.routeNode.current{outline:2px solid #d7ad5b;outline-offset:2px}.routeNode.target{filter:drop-shadow(0 0 10px #d6a548) drop-shadow(0 5px 4px #000)}.routeNode.done{opacity:.62}.routeNode.locked{filter:grayscale(1) brightness(.62);cursor:default}.routeJoin{flex:0 0 18px;height:3px;background:linear-gradient(90deg,#6f5936,#272018);box-shadow:0 1px #000}#mapWrap::after{right:34px;bottom:auto;top:22px}.mapRegion{display:none}@media(max-width:1180px){.districtLandmark{width:190px;min-height:76px;padding:12px 17px}.districtLandmark small{display:none}#routeConsole{left:22px;right:22px}.routeNode{flex-basis:106px}}

.mapHud{min-height:108px;padding:18px 32px;display:grid;grid-template-columns:minmax(250px,300px) minmax(410px,1fr) minmax(330px,390px);gap:24px;align-items:center}.playerPlate,.objectivePlate,.currencyRail{height:70px;position:relative;background:#090c12;filter:drop-shadow(0 5px 5px #000)}.playerPlate{display:grid;grid-template-columns:52px 1fr 1fr;align-items:center;padding:0 22px;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat}.hubSigil{width:46px;height:46px;display:grid;place-items:center;background:url("forge-v2/socket.v01.png") center/contain no-repeat}.hubSigil .f-icon{width:23px;height:23px;color:#d2b777}.playerPlate small,.currencyRail small{display:block;color:#858a93;font:650 9px "ForgeSans";letter-spacing:.1em}.playerPlate strong{display:block;color:#e8d6ae;font:740 16px "ForgeSerif";letter-spacing:.08em}.playerPlate strong b{font-size:23px;color:#efcc7b;font-variant-numeric:tabular-nums}.collectionStat{padding-left:18px;border-left:1px solid #3f392f}.collectionStat i{font:600 11px "ForgeSans";color:#797d84;font-style:normal}.objectivePlate{padding:13px 24px;background:url("forge-v2/panel.v01.png") center/100% 100% no-repeat}.objectiveTitle{display:flex;align-items:baseline;gap:14px}.objectiveTitle span{color:#a28a5e;font:700 9px "ForgeSans";letter-spacing:.18em}.objectiveTitle b{color:#ead19b;font:760 17px "ForgeSerif";letter-spacing:.055em}.objectiveStats{display:flex;gap:28px;margin-top:9px}.objectiveStats span{display:flex;align-items:center;gap:7px;color:#a1a3a7;font:650 11px "ForgeSans";letter-spacing:.06em}.objectiveStats .f-icon{width:16px;height:16px}.objectiveStats b{font:760 20px "ForgeSerif";color:#eac879;font-variant-numeric:tabular-nums}.objectiveStats i{color:#6f747d;font-size:9px;font-style:normal}.currencyRail{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:7px 12px;background:url("forge-v2/counter.v01.png") center/100% 100% no-repeat}.currencyRail>span{display:grid;grid-template-columns:23px 1fr;grid-template-rows:18px 25px;column-gap:7px;align-items:center;padding:0 10px;border-left:1px solid #3f392f}.currencyRail>span:first-child{border-left:0}.currencyRail .f-icon{grid-row:1/3;width:22px;height:22px;color:#b9a675}.currencyRail b{font:760 20px "ForgeSerif";color:#efd083;font-variant-numeric:tabular-nums}.mapDock{position:absolute;left:24px;top:22px;z-index:20;display:grid;grid-template-columns:repeat(3,94px);gap:7px;padding:9px 11px;background:rgba(4,7,11,.72);border:16px solid transparent;border-image:url("forge-v2/panel.v01.png") 65 75 fill / 16px stretch;filter:drop-shadow(0 8px 8px #000)}.mapDock button,.settingsDock button{height:42px;border:0;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;color:#d2cbc0;display:flex;align-items:center;justify-content:center;gap:7px;font:700 11px "ForgeSerif";letter-spacing:.06em;cursor:pointer;filter:drop-shadow(0 3px 3px #000)}.mapDock button:hover,.settingsDock button:hover{filter:brightness(1.18) drop-shadow(0 4px 3px #000)}.mapDock .f-icon{width:17px;height:17px;color:#c4aa72}.settingsDock{position:absolute;right:24px;top:22px;z-index:20;display:flex;gap:6px}.settingsDock button{width:46px}.settingsDock .f-icon{width:18px;height:18px}.settingsDock .off{opacity:.35;filter:grayscale(1)}#mapWrap::after{display:none}@media(max-width:1250px){.mapHud{grid-template-columns:250px 1fr 310px;gap:12px;padding:16px 20px}.objectiveTitle b{font-size:14px}.currencyRail{padding-left:5px;padding-right:5px}.currencyRail>span{padding:0 6px}.mapDock{grid-template-columns:repeat(3,84px)}}

#hero img{height:116px}

/* Desktop ratio safety: 1366x768, 1440x900, 1920x1080 plus tall app panes. */
html,body{overflow:hidden}.scene,.stage,#mapWrap{min-width:0;min-height:0}.playerPlate>div,.objectiveTitle,.objectiveTitle b,.currencyRail>span,.districtLandmark>span:last-child{min-width:0}.objectiveTitle b,.districtLandmark b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.currencyRail b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mapDock button span{white-space:nowrap}.routeHead span,.routeHead b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.routeTrack{max-width:100%}.routeNode b{max-width:100%}.battleHud{display:grid;grid-template-columns:auto auto minmax(260px,1fr);align-items:center}.battleHud .sp{display:none}.battleHud #bHint{justify-self:end;width:min(520px,100%);height:auto;min-height:42px;white-space:normal;line-height:1.35;text-align:center;overflow:hidden}.battleHud .chip{min-width:110px}.card.skill .skillDesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.7em}.tray{overflow:hidden}.slotGroup{min-width:0;overflow:visible}.card.beast{width:clamp(150px,11.5vw,190px);height:auto;aspect-ratio:3/4}.card.skill{width:clamp(108px,8.5vw,138px);height:auto;aspect-ratio:3/4}.arena{min-height:0}.rift{max-height:100%;display:flex;align-items:center}.rift>img{max-height:48vh;object-fit:contain}.stageHero{max-width:42vw;object-fit:contain}.lessonCopy,.lessonPlate{min-width:0}.lessonCopy h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:820px){.hud{min-height:70px;padding-top:10px;padding-bottom:10px;border-width:18px;border-image-width:18px}.mapHud{min-height:88px;grid-template-columns:260px 1fr 340px}.playerPlate,.objectivePlate,.currencyRail{height:60px}.hubSigil{width:39px;height:39px}.playerPlate strong b{font-size:20px}.objectiveTitle b{font-size:14px}.objectiveStats{margin-top:5px}.objectiveStats b,.currencyRail b{font-size:17px}#mapWrap{margin:0 10px 10px;border-width:19px;border-image-width:19px}.mapDock{top:14px;left:16px}.settingsDock{top:14px;right:16px}.districtLandmark{width:205px;min-height:72px;padding:11px 16px}.districtIcon{width:39px;height:39px;flex-basis:39px}#routeConsole{height:135px;bottom:15px;left:22px;right:22px;padding:15px 20px 12px;border-width:19px;border-image-width:19px}.routeHead{top:-40px;height:40px}.routeNode{height:80px;flex-basis:108px}.routeNode small{display:none}#hero img{height:92px}.tray{min-height:196px;padding:19px 16px 12px;border-width:18px;border-image-width:18px}.card.beast{width:clamp(132px,10.7vw,160px)}.card.skill{width:clamp(96px,7.8vw,116px)}.card.skill .art{flex-basis:60px;width:60px;height:58px;padding:11px}.card.skill .lbl{font-size:13px}.card.skill .skillDesc{font-size:8px}.arena{padding-left:150px;padding-right:70px}.stageHero{height:44%;bottom:16%}.rift{width:min(350px,30vw)}.kiWrap{top:76px;bottom:210px}.battleHud #bHint{font-size:10px}}
@media (max-aspect-ratio:4/3){.districtLandmark{width:185px}.districtLandmark small{display:none}.mapDock{grid-template-columns:repeat(2,84px)}.districtLandmark:nth-child(1){margin-left:4%}.districtLandmark:nth-child(3){margin-left:-3%}.districtLandmark:nth-child(5){margin-left:-5%}.routeConsole{left:18px;right:18px}.mapHud{grid-template-columns:240px minmax(320px,1fr) 300px;gap:10px}.currencyRail>span{padding:0 4px}.arena{padding-left:135px;padding-right:45px}.stageHero{max-width:38vw}.rift{width:min(390px,36vw)}}
@media (min-width:1700px){.mapHud{grid-template-columns:340px 1fr 450px}.objectiveTitle b{font-size:19px}.currencyRail b{font-size:23px}.districtLandmark{width:255px}.mapDock{grid-template-columns:repeat(3,110px)}.routeNode{flex-basis:132px}.tray{gap:30px}.slotGroup{gap:16px}}

.battleHud{display:grid;grid-template-columns:190px 260px minmax(0,1fr);gap:18px;align-items:center;padding-left:30px;padding-right:30px}.battleNav{display:flex}.battleNav .btn{min-width:145px}.battleRound{height:52px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 20px;background:url("forge-v2/counter.v01.png") center/100% 100% no-repeat;color:#a7a4a0;font:650 12px "ForgeSerif";filter:drop-shadow(0 5px 5px #000)}.battleRound span+span{padding-left:14px;border-left:1px solid #433b2e}.battleRound b{font-size:20px;color:#edcb7c;font-variant-numeric:tabular-nums}.battleGuide{justify-self:stretch;min-height:52px;display:flex;align-items:center;justify-content:center;padding:8px 24px;background:url("forge-v2/secondary.v01.png") center/100% 100% no-repeat;color:#d8c8a6;font:700 12px/1.4 "ForgeSerif";letter-spacing:.055em;text-align:center;overflow:hidden;filter:drop-shadow(0 5px 5px #000)}@media(max-width:1180px){.battleHud{grid-template-columns:160px 220px 1fr;gap:10px;padding-left:20px;padding-right:20px}.battleNav .btn{min-width:120px}.battleGuide{font-size:10px;padding-left:14px;padding-right:14px}}@media(max-height:820px){.battleRound,.battleGuide{height:44px;min-height:44px}.battleHud{grid-template-columns:145px 220px 1fr}.battleNav .btn{min-height:40px}}

/* Combat facing rule: hero left -> right; regular foe right -> left; frontal bosses stay frontal. */
#bRift:not(.bossFoe)>img{transform:none}#bRift.berserk:not(.bossFoe)>img{animation:berserkFaceLeft 1.6s infinite alternate}@keyframes berserkFaceLeft{from{transform:translateY(0)}to{transform:scale(1.02) translateY(-3px)}}#bRift.bossFoe>img{transform:none;animation:bossBreathe 1.9s ease-in-out infinite alternate}@keyframes bossBreathe{to{transform:scale(1.018) translateY(-3px)}}
.battleRound{height:62px;font-size:15px}.battleRound b{font-size:26px}.battleGuide{min-height:62px;font-size:15px;line-height:1.45}.battleNav .btn{font-size:16px}.battleHud{min-height:96px}.battleHud #bHint{font-size:15px}.battleHud+#scBattle{}#foeHpTxt,#meHpTxt{font-size:18px;min-width:82px;justify-content:center}@media(max-width:1180px){.battleGuide,.battleHud #bHint{font-size:13px}.battleRound{font-size:13px}.battleRound b{font-size:23px}}@media(max-height:820px){.battleHud{min-height:82px}.battleRound,.battleGuide{height:56px;min-height:56px}.battleGuide,.battleHud #bHint{font-size:13px}}

html,body{height:100%;max-height:100%;overflow:hidden}.scene{height:100%;max-height:100%;overflow:hidden}.stage{overflow:hidden}.arena{align-items:flex-end;padding-bottom:34px}.rift{align-self:flex-end;margin-bottom:0}.rift::before{width:82%;height:34px;background:radial-gradient(ellipse,rgba(0,0,0,.72) 0,rgba(0,0,0,.34) 48%,transparent 74%);filter:blur(2px)}#bRift:not(.bossFoe){width:min(470px,37vw)}#bRift:not(.bossFoe)>img{max-height:52vh}.stageHero{bottom:14%;height:49%}.tray{flex:0 0 auto}#scBattle .stage>div[style*="padding:8px 14px 0"]{min-height:42px}#scBattle .stage>div[style*="padding:0 14px 6px"]{min-height:48px}.card.empty{background:#06090e;opacity:.14}@media(max-height:820px){.arena{padding-bottom:20px}#bRift:not(.bossFoe){width:min(400px,34vw)}#bRift:not(.bossFoe)>img{max-height:43vh}.stageHero{height:43%;bottom:14%}}


/* ===== V23 COMBAT THREAT FRAMING ===== */
/* 敵方不是小圖示：依威脅級別佔據戰場，HP／指令層維持在其上方。 */
#scBattle .arena{padding-left:190px;padding-right:42px;padding-bottom:26px;overflow:visible}
#bRift{max-height:none!important;z-index:4;isolation:isolate;margin-right:-18px;transform-origin:54% 86%}
#bRift::after{content:"";position:absolute;z-index:-1;left:50%;top:48%;width:116%;height:112%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(123,22,28,.27) 0,rgba(49,19,29,.18) 43%,transparent 72%);filter:blur(5px);pointer-events:none}
#bRift::before{width:88%;height:46px;bottom:-2px;background:radial-gradient(ellipse,rgba(0,0,0,.82) 0,rgba(0,0,0,.48) 45%,transparent 74%);filter:blur(3px)}
#bRift>img{max-height:none!important;object-fit:contain;transform-origin:52% 88%;filter:drop-shadow(0 18px 21px rgba(0,0,0,.76)) drop-shadow(0 0 9px rgba(150,37,38,.28))}
#bRift.threatDojo{width:min(500px,40vw)}
#bRift.threatNormal{width:min(610px,48vw)}
#bRift.threatElite{width:min(670px,51vw);margin-right:-28px}
#bRift.threatHeavy{width:min(720px,54vw);margin-right:-36px}
#bRift.threatBoss{width:min(760px,57vw);margin-right:-46px}
#bRift.threatElite::after{width:122%;height:118%;background:radial-gradient(ellipse,rgba(134,27,34,.31),rgba(53,19,30,.2) 45%,transparent 73%)}
#bRift.threatHeavy::after,#bRift.threatBoss::after{width:128%;height:124%;background:radial-gradient(ellipse,rgba(157,30,34,.36),rgba(62,16,27,.24) 46%,transparent 74%)}
#bRift.bossFoe>img{-webkit-mask-image:none;mask-image:none}
#bRift .nm{bottom:-13px;z-index:5;min-width:150px;padding:2px 21px;font-size:17px;letter-spacing:.08em}
#scBattle .arena>.stageHero{left:-2.5%;bottom:-4px;height:min(50vh,500px);max-width:41vw;transform:none;transform-origin:38% 86%;filter:drop-shadow(0 17px 18px rgba(0,0,0,.82)) drop-shadow(4px 0 6px rgba(205,150,76,.12))}
#scBattle .arena::before{content:"";position:absolute;z-index:3;left:-1%;bottom:-5px;width:31%;height:38px;pointer-events:none;background:radial-gradient(ellipse,rgba(0,0,0,.76),rgba(0,0,0,.3) 50%,transparent 74%);filter:blur(3px)}
@media(max-width:1180px){#scBattle .arena{padding-left:155px;padding-right:22px}#bRift.threatNormal{width:min(570px,49vw)}#bRift.threatElite{width:min(620px,53vw)}#bRift.threatHeavy{width:min(660px,56vw)}#bRift.threatBoss{width:min(700px,59vw)}#scBattle .arena>.stageHero{height:min(47vh,450px);max-width:39vw}}
@media(max-height:820px){#scBattle .arena{padding-bottom:14px}#bRift.threatDojo{width:min(300px,34vw)}#bRift.threatNormal{width:min(500px,46vw)}#bRift.threatElite{width:min(530px,50vw)}#bRift.threatHeavy{width:min(560px,53vw)}#bRift.threatBoss{width:min(600px,56vw)}#scBattle .arena>.stageHero{height:min(46vh,360px);bottom:-3px}#bRift .nm{font-size:15px}}


/* ===== 第一關地景互動 v3：地標屬於場景，路線列不再遮住地圖 ===== */
#nodes{z-index:7}
.districtEdge{height:4px;border-top:0;background:linear-gradient(90deg,transparent,rgba(208,174,105,.58) 15%,rgba(208,174,105,.58) 85%,transparent);box-shadow:0 0 9px rgba(208,174,105,.22);opacity:.42}
.districtLandmark{width:150px;min-height:66px;padding:0;gap:5px;flex-direction:column;justify-content:center;overflow:visible;background:none;filter:drop-shadow(0 8px 7px rgba(0,0,0,.88))}
.districtLandmark::before{content:"";position:absolute;left:50%;top:49px;width:2px;height:18px;transform:translateX(-50%);background:linear-gradient(#b5955d,rgba(181,149,93,0));box-shadow:0 0 7px rgba(255,194,75,.3)}
.districtLandmark:hover{transform:translate(-50%,-55%);filter:brightness(1.12) drop-shadow(0 10px 8px #000)}
.districtLandmark.focused,.districtLandmark.target{background:none;filter:drop-shadow(0 0 11px rgba(255,194,75,.55)) drop-shadow(0 9px 7px #000)}
.districtLandmark .districtIcon{width:58px;height:58px;flex:0 0 58px;border-radius:50%;background:url("forge-v2/socket.v01.png") center/contain no-repeat;box-shadow:0 0 0 1px rgba(218,182,111,.28),0 7px 12px rgba(0,0,0,.82)}
.districtLandmark .districtIcon .f-icon{width:29px;height:29px}
.districtLandmark>span:last-child{position:absolute;top:58px;left:50%;width:max-content;max-width:170px;transform:translateX(-50%);padding:7px 13px 8px;text-align:center;background:linear-gradient(180deg,rgba(26,31,40,.96),rgba(7,10,15,.98));border:1px solid #62543c;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 10px #000}
.districtLandmark b{font-size:12px;letter-spacing:.08em}.districtLandmark small{display:none}.districtLandmark.completed{opacity:.62}
#routeConsole{left:50%;right:auto;width:min(820px,calc(100% - 44px));bottom:14px;height:112px;transform:translateX(-50%);padding:13px 18px 10px;border-width:18px;border-image-width:18px}
.routeHead{left:22px;right:22px;top:-38px;height:38px;padding:0 15px}.routeHead b{font-size:12px}.routeTrack{gap:5px;padding:1px 4px 5px}.routeNode{flex-basis:102px;height:70px;padding:9px 6px 5px}.routeNode .f-icon{width:21px;height:21px;margin-bottom:2px}.routeNode b{font-size:10px}.routeNode small{display:none}.routeNode .routeIndex{top:5px;left:8px}.routeJoin{flex-basis:13px}
@media (max-height:700px){.districtLandmark{width:132px;min-height:58px}.districtLandmark .districtIcon{width:50px;height:50px;flex-basis:50px}.districtLandmark>span:last-child{top:50px;padding:6px 10px}.districtLandmark::before{top:43px;height:15px}#routeConsole{height:104px;bottom:10px;width:min(760px,calc(100% - 36px));padding:11px 15px 8px}.routeHead{top:-34px;height:34px}.routeNode{height:64px;flex-basis:96px}}
@media (max-aspect-ratio:4/3){.districtLandmark{width:126px}.districtLandmark:nth-child(1),.districtLandmark:nth-child(3),.districtLandmark:nth-child(5){margin-left:0}#routeConsole{width:min(720px,calc(100% - 30px))}}


/* ===== 戰鬥角色壓迫感 v24：依戰場高度而非整頁剩餘高度縮放 ===== */
#bRift.threatDojo{width:min(320px,32vw,34vh)}
#bRift.threatNormal{width:min(430px,42vw,42vh)}
#bRift.threatElite{width:min(480px,46vw,47vh)}
#bRift.threatHeavy{width:min(530px,50vw,52vh)}
#bRift.threatBoss{width:min(620px,56vw,60vh)}
#scBattle .arena>.stageHero{left:.5%;height:min(46vh,360px)}
@media(max-height:820px){#bRift>img{translate:0 clamp(74px,14vh,100px)}#bRift.bossFoe>img{translate:0 clamp(150px,30vh,210px)}#scBattle .arena>.stageHero{translate:0 clamp(70px,13vh,94px)}}


/* ===== 卡牌稀有度動態層 v1：收藏圖與戰鬥手牌分流 ===== */
.liveCard .liveCardArt{position:relative;z-index:0}
.liveCard .cardFxLayer{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;pointer-events:none;mix-blend-mode:screen}
.liveCard .liveStrip{z-index:2}
.fx-detail .cardFxSr{animation:cardSrBreath 3s ease-in-out infinite}
.fx-acquire .cardFxSr{animation:cardSrReveal 1.2s ease-out both,cardSrBreath 3s ease-in-out 1.2s infinite}
.fx-detail .cardFxSsrTrack{animation:cardSsrTrack 4s linear infinite}
.fx-detail .cardFxSsrSheen{animation:cardSsrSheen 6s ease-in-out infinite}
.fx-detail .cardFxSsrDust{animation:cardSsrDust 4.8s ease-in-out infinite}
.fx-acquire .cardFxSsrTrack{animation:cardSsrReveal 2s ease-out both,cardSsrTrack 4s linear 2s infinite}
.fx-acquire .cardFxSsrSheen{animation:cardSsrSheenReveal 2s ease-out both,cardSsrSheen 6s ease-in-out 2s infinite}
.fx-acquire .cardFxSsrDust{animation:cardSsrDustReveal 2s ease-out both,cardSsrDust 4.8s ease-in-out 2s infinite}
.fx-list .cardFxSsrTrack{opacity:.14;animation:none}.fx-list .cardFxSsrSheen,.fx-list .cardFxSsrDust{display:none}
@keyframes cardSrBreath{0%,100%{opacity:.25}50%{opacity:.45}}
@keyframes cardSrReveal{0%{opacity:0;transform:scale(.96)}55%{opacity:.5}100%{opacity:.3;transform:scale(1)}}
@keyframes cardSsrTrack{0%{opacity:.25;transform:rotate(0deg)}50%{opacity:.5}100%{opacity:.25;transform:rotate(360deg)}}
@keyframes cardSsrSheen{0%,72%,100%{opacity:0;transform:translateX(-18%)}80%{opacity:.35}90%{opacity:0;transform:translateX(18%)}}
@keyframes cardSsrDust{0%,100%{opacity:.16;transform:translateY(2%)}50%{opacity:.38;transform:translateY(-3%)}}
@keyframes cardSsrReveal{0%{opacity:0;transform:scale(.92)}42%{opacity:.5;transform:scale(1.025)}100%{opacity:.34;transform:scale(1)}}
@keyframes cardSsrSheenReveal{0%,30%{opacity:0;transform:translateX(-24%)}64%{opacity:.46}100%{opacity:0;transform:translateX(20%)}}
@keyframes cardSsrDustReveal{0%{opacity:0;transform:translateY(8%)}50%{opacity:.5}100%{opacity:.24;transform:translateY(-3%)}}
.firstAcquireShowcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(610px,90vw);margin:0 auto 14px}.firstAcquireShowcase .liveCard{width:100%;filter:drop-shadow(0 12px 12px #000)}
@media(max-width:760px){.firstAcquireShowcase{gap:7px;width:min(500px,94vw)}.firstAcquireShowcase .liveStrip{font-size:7px}}
@media(prefers-reduced-motion:reduce){.cardFxLayer{animation:none!important}.fx-detail .cardFxSr{opacity:.34}.fx-detail .cardFxSsrTrack,.fx-acquire .cardFxSsrTrack{opacity:.34}.fx-detail .cardFxSsrSheen,.fx-detail .cardFxSsrDust,.fx-acquire .cardFxSsrSheen,.fx-acquire .cardFxSsrDust{opacity:.18}}


/* ===== 技能修飾器瞬時語法 v1 ===== */
.modifierFx{position:absolute;z-index:12;left:20%;top:42%;width:116px;height:116px;pointer-events:none;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(18,24,36,.86) 0,rgba(8,12,20,.5) 56%,transparent 74%);animation:modifierAttach 1.15s ease-out both;--fx:#e8c87a}
.modifierFx::before,.modifierFx::after{content:"";position:absolute;inset:8px;border:2px solid var(--fx);border-radius:50%;opacity:.58}.modifierFx::after{inset:18px;border-style:dashed;animation:modifierRing 1.15s linear both}.modifierFx img{position:relative;z-index:1;width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 0 8px var(--fx))}.modifierFx b{position:absolute;z-index:2;left:50%;bottom:-5px;translate:-50% 0;white-space:nowrap;padding:4px 11px;color:#f2e4c4;font:700 12px "ForgeSerif";letter-spacing:.08em;background:#0b1019;border:1px solid color-mix(in srgb,var(--fx) 70%,#30394a);box-shadow:0 4px 9px #000}.modifierFx.fx-charge{--fx:#ffc24b}.modifierFx.fx-guard{--fx:#b98a56}.modifierFx.fx-drain{--fx:#6fbf5a}.modifierFx.fx-crit{--fx:#e8b84f}.modifierFx.fx-echo{--fx:#c9cfe0}
@keyframes modifierAttach{0%{opacity:0;transform:scale(.62) translateY(20px)}38%{opacity:1;transform:scale(1.06) translateY(0)}76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9) translate(46px,18px)}}
@keyframes modifierRing{from{transform:rotate(0deg) scale(.86);opacity:.2}45%{opacity:.72}to{transform:rotate(180deg) scale(1.18);opacity:0}}
@media(max-height:820px){.modifierFx{left:18%;top:30%;width:96px;height:96px}.modifierFx img{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){.modifierFx{animation:modifierAttachReduced .6s ease-out both}.modifierFx::after{animation:none}@keyframes modifierAttachReduced{0%{opacity:0}30%,75%{opacity:1}100%{opacity:0}}}