:root{--ink:#e8e5da;--muted:#9aa2aa;--bg:#0c1016;--bg2:#121821;--panel:#171e28;--panel2:#202936;--line:#334050;--gold:#e1bd68;--red:#b84f49;--green:#5d8d68;--blue:#4b86a8;--paper:#ddd3bd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;color:var(--ink);background:var(--bg);font-family:"Noto Sans TC",system-ui,sans-serif;line-height:1.6}button,select,input{font:inherit}button{cursor:pointer}a{color:inherit}.scanlines{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.09;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px);mix-blend-mode:overlay}
.topbar{position:sticky;top:0;z-index:40;height:68px;padding:0 clamp(18px,5vw,76px);display:flex;align-items:center;justify-content:space-between;background:rgba(10,13,18,.94);border-bottom:1px solid #394351;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{display:grid;place-items:center;width:34px;height:34px;color:var(--gold);border:1px solid var(--gold);transform:rotate(45deg)}.brand strong{display:block;font:900 18px/1.1 "Noto Serif TC",serif;letter-spacing:.1em}.brand small{display:block;margin-top:5px;color:#78818d;font-size:8px;letter-spacing:.2em}.topbar nav{display:flex;align-items:center;gap:28px}.topbar nav a{color:#b5bdc5;text-decoration:none;font-size:12px}.sound-toggle{padding:7px 11px;color:#bdc3ca;background:#151b24;border:1px solid #3b4655;font-size:11px}
.hero{min-height:calc(100svh - 68px);padding:clamp(60px,9vw,126px) clamp(22px,8vw,126px) 75px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);align-items:center;gap:7vw;overflow:hidden;background:#0d1219}.hero-copy{position:relative;z-index:2;max-width:680px}.eyebrow{margin:0 0 18px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.23em;text-transform:uppercase}.eyebrow span{display:inline-block;width:34px;height:1px;margin-right:10px;vertical-align:middle;background:currentColor}.hero h1,.section-heading h2,.codex h2,dialog h2{font-family:"Noto Serif TC",serif}.hero h1{margin:0;font-size:clamp(45px,6.2vw,88px);line-height:1.15;letter-spacing:-.035em}.hero h1 em{color:var(--gold);font-style:normal}.hero-lead{max-width:590px;margin:27px 0;color:#aab2ba;font-size:clamp(15px,1.4vw,19px);line-height:1.9}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:36px}.primary-btn{min-height:52px;padding:0 23px;color:#181a1f;background:var(--gold);border:0;font-weight:900;letter-spacing:.05em;box-shadow:7px 7px 0 #554321;transition:.18s}.primary-btn:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 #554321}.primary-btn span{margin-left:18px}.text-btn{color:#c1c6cc;background:transparent;border:0;border-bottom:1px solid #5a6674;padding:8px 0}.hero-note{max-width:580px;margin-top:32px;color:#6f7883;font-size:10px;line-height:1.8}
.hero-art{position:relative;height:min(67vw,650px);min-height:460px;isolation:isolate}.moon{position:absolute;width:54%;aspect-ratio:1;top:8%;left:28%;border:1px solid rgba(225,189,104,.7);border-radius:50%;box-shadow:0 0 0 28px rgba(225,189,104,.04),0 0 0 62px rgba(225,189,104,.02)}.moon:before,.moon:after{content:"";position:absolute;inset:10%;border:1px dashed rgba(225,189,104,.3);border-radius:50%}.moon:after{inset:24%;border-style:solid}.ridge{position:absolute;left:2%;right:0;bottom:13%;height:42%;background:#1a2330;clip-path:polygon(0 94%,12% 67%,20% 73%,32% 38%,39% 51%,48% 19%,58% 57%,68% 33%,78% 64%,86% 43%,100% 86%,100% 100%,0 100%)}.ridge-back{bottom:23%;opacity:.58;transform:scale(.95);background:#293443}.ridge-front:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(104deg,transparent 0 29px,rgba(225,189,104,.06) 30px 31px)}.citadel{position:absolute;z-index:3;width:15%;min-width:72px;height:34%;left:52%;bottom:19%;background:#070a0e;clip-path:polygon(16% 15%,29% 15%,34% 0,65% 0,70% 15%,84% 15%,84% 100%,16% 100%)}.citadel:before{content:"";position:absolute;left:43%;top:18%;width:15%;height:58%;background:#d7b563;box-shadow:0 0 22px #d7b563;opacity:.7}.citadel i{position:absolute;bottom:0;width:18%;height:28%;background:#05070a}.citadel i:nth-child(1){left:-18%}.citadel i:nth-child(2){left:100%}.citadel i:nth-child(3){left:41%;height:15%}.rune-ring{position:absolute;width:83%;aspect-ratio:1;left:8%;top:-5%;border:1px solid rgba(225,189,104,.18);border-radius:50%;animation:spin 42s linear infinite}.rune-ring span{position:absolute;color:rgba(225,189,104,.4);font-size:28px}.rune-ring span:nth-child(1){left:48%;top:-20px}.rune-ring span:nth-child(2){right:-8px;top:46%}.rune-ring span:nth-child(3){left:48%;bottom:-23px}.rune-ring span:nth-child(4){left:-9px;top:46%}.hero-stamp{position:absolute;right:3%;bottom:8%;z-index:5;width:104px;height:104px;display:grid;place-items:center;text-align:center;color:#bb625a;border:3px double #bb625a;border-radius:50%;font:700 12px/1.5 "Noto Serif TC";letter-spacing:.1em;transform:rotate(8deg)}@keyframes spin{to{transform:rotate(360deg)}}
.game-shell{padding:85px clamp(12px,4vw,64px) 105px;background:#10151c}.section-heading{max-width:1500px;margin:0 auto 24px;display:flex;align-items:end;justify-content:space-between;gap:20px}.section-heading h2,.codex h2{margin:0;font-size:clamp(33px,4vw,56px);letter-spacing:-.03em}.section-heading .eyebrow,.codex .eyebrow{margin-bottom:7px}.save-state{color:#89929d;font-size:11px}.save-state i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#a24d48}.save-state.saved i{background:#72a67c;box-shadow:0 0 0 4px rgba(114,166,124,.12)}
.game-grid{max-width:1500px;margin:auto;display:grid;grid-template-columns:260px minmax(480px,1fr) 290px;gap:1px;background:#354150;border:1px solid #465364;box-shadow:0 26px 80px rgba(0,0,0,.4)}.panel{min-width:0;background:var(--panel)}.character-panel,.stats-panel{padding:22px}.portrait-wrap{position:relative;width:124px;height:124px;margin:0 auto 17px;display:grid;place-items:center;border:1px solid #596779;background:#0d1218;transform:rotate(2deg)}.portrait-wrap:before{content:"";position:absolute;inset:7px;border:1px solid rgba(225,189,104,.5)}.class-sigil{color:var(--gold);font:900 46px "Noto Serif TC";transform:rotate(-2deg)}.level-badge{position:absolute;right:-11px;bottom:-9px;padding:5px 9px;color:#e5ddca;background:#242d39;border:1px solid #596777;font-size:9px;transform:rotate(-2deg)}.identity{text-align:center;padding-bottom:18px;border-bottom:1px solid #303b49}.identity p{margin:0;color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.2em}.identity h3{margin:3px 0 2px;font:900 22px "Noto Serif TC"}.mini-link{color:#8f99a4;background:transparent;border:0;border-bottom:1px solid #53606e;font-size:10px}.resource{margin-top:16px}.resource-label{display:flex;justify-content:space-between;color:#8f99a4;font-size:9px}.resource-label span{font-weight:900;color:#d8dce0}.bar{height:7px;margin-top:6px;background:#293442;overflow:hidden}.bar i{display:block;width:0;height:100%;transition:width .3s}.bar.hp i{background:var(--red)}.bar.sp i{background:var(--blue)}.bar.exp i{background:var(--gold)}.currency-row{margin:19px 0;padding:11px 0;display:flex;justify-content:space-between;border-block:1px solid #303b49;color:#8f99a4;font-size:11px}.currency-row strong{color:var(--gold);font-size:16px}.route-card{padding:12px;background:#111821;border-left:3px solid var(--gold)}.route-card span{color:#7f8994;font-size:8px;letter-spacing:.12em}.route-card p{margin:4px 0 0;font-size:10px;line-height:1.7}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.panel-actions button{padding:8px;color:#c8cdd3;background:#121922;border:1px solid #465364;font-size:10px}.panel-actions .danger{color:#d87b73}
.battle-panel{display:flex;flex-direction:column}.battle-toolbar{min-height:68px;padding:14px 18px;display:grid;grid-template-columns:auto minmax(170px,1fr) auto;align-items:center;gap:11px;border-bottom:1px solid #33404e}.battle-toolbar label{color:#8f99a4;font-size:10px}.battle-toolbar select{height:38px;padding:0 33px 0 11px;color:#dfe3e7;background:#111821;border:1px solid #465364}.battle-toggle{height:38px;padding:0 13px;display:flex;align-items:center;gap:8px;color:#dce1e5;background:#293543;border:1px solid #4a596b;font-size:10px}.battle-toggle i{width:7px;height:7px;border-radius:50%;background:#a85049}.battle-toggle.active i{background:#83a977;box-shadow:0 0 8px #83a977}.battle-stage{position:relative;min-height:360px;flex:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;overflow:hidden;background:#0d1218}.stage-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(103,129,156,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(103,129,156,.11) 1px,transparent 1px);background-size:38px 38px;transform:scale(1.2) rotateX(60deg)}.battle-stage:before{content:"";position:absolute;width:260px;height:260px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(225,189,104,.15);border-radius:50%;box-shadow:0 0 0 35px rgba(225,189,104,.025),0 0 0 70px rgba(225,189,104,.018)}.fighter{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;color:#98a1aa;font-size:11px}.fighter-glyph{width:116px;height:142px;display:grid;place-items:center;color:#d7b563;border:1px solid #5e6c7d;background:#151d26;font:900 42px "Noto Serif TC";clip-path:polygon(20% 0,80% 0,100% 18%,100% 82%,80% 100%,20% 100%,0 82%,0 18%)}.versus-mark{position:relative;z-index:2;color:#697482;font:900 25px "Noto Serif TC"}.monster-shape{position:relative;width:140px;height:118px;background:#596b54;border-radius:52% 48% 44% 46%;box-shadow:inset -17px -15px 0 rgba(0,0,0,.15),0 18px 0 -9px rgba(0,0,0,.28)}.monster-shape:before,.monster-shape:after{content:"";position:absolute;width:13px;height:17px;top:41px;background:#10151b;border-radius:50%}.monster-shape:before{left:42px}.monster-shape:after{right:42px}.monster-shape i{position:absolute;width:48px;height:9px;left:46px;top:76px;border-bottom:3px solid #1e271d;border-radius:50%}.monster-shape b{position:absolute;width:28px;height:28px;right:5px;top:-8px;border:7px solid #b89f63;transform:rotate(25deg)}.enemy-hp{width:130px;height:5px;background:#303b47}.enemy-hp i{display:block;width:0;height:100%;background:#b6534c;transition:width .2s}.damage-number{position:absolute;z-index:4;left:50%;top:35%;color:#f1cb70;font:900 31px "Noto Serif TC";opacity:0;pointer-events:none}.damage-number.pop{animation:damage .65s ease-out}@keyframes damage{0%{opacity:0;transform:translateY(12px) scale(.8)}30%{opacity:1}100%{opacity:0;transform:translateY(-45px) scale(1.1)}}.battle-stage.hit .enemy-fighter{animation:enemyHit .22s ease}@keyframes enemyHit{40%{transform:translateX(8px);filter:brightness(1.6)}}.battle-stage.cast .player-fighter{animation:cast .4s ease}@keyframes cast{50%{transform:translateY(-7px);filter:drop-shadow(0 0 12px #d7b563)}}
.combat-cards{display:grid;grid-template-columns:minmax(190px,2fr) repeat(4,1fr);border-top:1px solid #303b49;border-bottom:1px solid #303b49}.skill-card{min-height:72px;padding:11px 14px;display:flex;align-items:center;gap:10px;text-align:left;color:#e8e5da;background:#222d39;border:0;border-right:1px solid #3c4a5a}.skill-card:disabled{cursor:not-allowed;opacity:.55}.skill-card .skill-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #b28e4c;color:#d9b667}.skill-card small,.skill-card strong{display:block}.skill-card small{font-size:8px;color:#89939e}.skill-card strong{font-size:11px}.skill-card>b{margin-left:auto;color:#d9b667;font-size:8px}.combat-stat{display:grid;place-items:center;align-content:center;border-right:1px solid #33404e}.combat-stat span{color:#7f8994;font-size:8px;letter-spacing:.12em}.combat-stat strong{font-size:16px}.log-wrap{height:180px;padding:11px 17px 13px;background:#111821}.log-title{display:flex;justify-content:space-between;color:#7f8994;font-size:9px;letter-spacing:.1em}.log-title button{color:#7f8994;background:transparent;border:0;font-size:9px}#battleLog{height:130px;margin:8px 0 0;padding:0;list-style:none;overflow:auto;font:10px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace}#battleLog li{color:#9ba4ae;border-bottom:1px dotted rgba(130,145,160,.15)}#battleLog li b{color:#d97970}#battleLog time{margin-right:8px;color:#65717e}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #303b49}.tabs button{padding:10px 5px;color:#88929d;background:transparent;border:0;border-bottom:2px solid transparent;font-size:10px}.tabs button[aria-selected=true]{color:#e1e4e7;border-color:var(--gold);font-weight:800}.tab-content{display:none}.tab-content.active{display:block}.point-banner{margin:17px 0 12px;padding:11px;display:flex;justify-content:space-between;align-items:center;background:#0e141c;color:#d8dde2;font-size:9px}.point-banner strong{color:var(--gold);font-size:19px}.attribute-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;min-height:49px;border-bottom:1px solid #303b49}.attribute-row .abbr{font:900 14px "Noto Serif TC"}.attribute-row small{display:block;color:#7f8994;font-size:8px}.attribute-row strong{font-size:16px}.attribute-row button{width:25px;height:25px;margin-left:4px;color:#e6c77e;background:#252f3c;border:1px solid #566579;font-weight:900}.attribute-row button:disabled{opacity:.3;cursor:not-allowed}.rules-note{margin-top:15px;color:#77818c;font-size:8px;line-height:1.7}.loot-list{margin-top:17px}.loot-item{display:flex;justify-content:space-between;padding:11px 3px;border-bottom:1px solid #303b49;font-size:11px}.loot-item span{color:#9099a3}.loot-empty{padding:28px 0;text-align:center;color:#7f8994;font-size:10px}
.codex{padding:105px clamp(22px,8vw,126px);color:#28261f;background:#d8cfbb}.codex-intro{max-width:790px}.codex-intro>p:last-child{color:#6f6a5e;font-size:15px}.codex-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#a99e86;border:1px solid #a99e86}.codex-grid article{min-height:220px;padding:27px;background:#ebe3d2}.codex-grid article>span{color:#9b7534;font:900 10px "Noto Serif TC";letter-spacing:.12em}.codex-grid h3{margin:40px 0 9px;font:900 19px "Noto Serif TC"}.codex-grid p{margin:0;color:#6f6a5e;font-size:11px}.source-strip{display:flex;align-items:center;gap:24px;margin-top:21px;padding:16px 0;border-block:1px solid #a99e86;font-size:11px}.source-strip span{margin-right:auto;color:#777063;letter-spacing:.15em}.source-strip a{text-decoration:none;border-bottom:1px solid #8d8065}footer{padding:34px clamp(22px,8vw,126px);display:flex;justify-content:space-between;gap:28px;color:#818a94;background:#0a0e13;font-size:9px}footer strong{color:#e2dac8;font:900 15px "Noto Serif TC"}footer p{margin:5px 0 0}
dialog{width:min(1020px,calc(100vw - 30px));max-height:calc(100svh - 30px);padding:0;color:#e4e1d8;background:#141b24;border:1px solid #566579;box-shadow:0 25px 100px rgba(0,0,0,.65)}dialog::backdrop{background:rgba(5,7,10,.86);backdrop-filter:blur(5px)}.dialog-card{padding:clamp(22px,4vw,44px)}.dialog-head{display:flex;justify-content:space-between;gap:20px}.dialog-head h2{margin:0;font-size:clamp(30px,4vw,48px)}.dialog-close{width:40px;height:40px;color:#a3aab1;background:#0e141c;border:1px solid #465364;font-size:23px}.name-field{display:block;max-width:430px;margin:23px 0;color:#8f99a4;font-size:9px;letter-spacing:.1em}.name-field input{width:100%;height:47px;margin-top:7px;padding:0 13px;color:#e8e5da;background:#0d131a;border:1px solid #465364;font-size:14px}.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.class-option{position:relative;min-height:136px;padding:16px;text-align:left;color:#dfe3e6;background:#19212c;border:1px solid #3e4a59;transition:.16s}.class-option:hover{transform:translateY(-2px);border-color:#806b40}.class-option.selected{background:#28291f;border-color:var(--gold)}.class-option .sigil{float:left;width:42px;height:42px;margin-right:11px;display:grid;place-items:center;color:var(--gold);border:1px solid currentColor;font:900 19px "Noto Serif TC"}.class-option strong{display:block;font:900 16px "Noto Serif TC"}.class-option small{color:#8f99a4;font-size:8px}.class-option p{clear:both;margin:14px 0 0;color:#8f99a4;font-size:9px}.dialog-disclaimer{color:#818b95;font-size:8px}.dialog-submit{float:right;margin-top:4px}.offline-card{padding:48px;text-align:center}.offline-icon{display:block;color:var(--gold);font-size:46px}.offline-card h2{margin:5px 0 14px;font-size:36px}.offline-card p:not(.eyebrow){color:#9aa3ad}.toast{position:fixed;z-index:100;right:22px;bottom:22px;max-width:320px;padding:11px 15px;color:#eee7d6;background:#202a35;border-left:3px solid var(--gold);font-size:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(14px);pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:none}.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
@media(max-width:1180px){.game-grid{grid-template-columns:230px minmax(420px,1fr)}.stats-panel{grid-column:1/-1}.attribute-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px}.rules-note{grid-column:1/-1}.loot-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px}}
@media(max-width:900px){.topbar nav a{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:80px}.hero-art{height:500px;min-height:0}.game-grid{display:block}.panel{border-bottom:1px solid #465364}.character-panel{display:grid;grid-template-columns:120px 1fr 1fr;gap:13px 20px}.portrait-wrap{grid-row:1/4;margin:0}.identity{text-align:left}.resource{margin-top:0}.currency-row,.route-card,.panel-actions{grid-column:2/4;margin:0}.battle-stage{min-height:380px}.codex-grid{grid-template-columns:1fr}.codex-grid article{min-height:165px}.codex-grid h3{margin-top:23px}.class-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.topbar{height:62px;padding:0 15px}.brand strong{font-size:14px}.brand small{display:none}.topbar nav{gap:0}.hero{padding:58px 18px 52px}.hero h1{font-size:41px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-art{height:370px}.hero-stamp{width:82px;height:82px;font-size:9px}.game-shell{padding:62px 8px 72px}.section-heading{padding:0 8px}.save-state{display:none}.character-panel{display:block}.portrait-wrap{margin:0 auto 17px}.identity{text-align:center}.resource{margin-top:16px}.currency-row{margin:19px 0}.route-card,.panel-actions{margin-top:15px}.battle-toolbar{grid-template-columns:1fr 1fr}.battle-toolbar label{grid-column:1/-1}.battle-stage{min-height:330px;gap:8px;padding:0 10px}.fighter-glyph{width:86px;height:112px}.monster-shape{width:102px;height:88px}.monster-shape:before{left:30px;top:30px}.monster-shape:after{right:30px;top:30px}.monster-shape i{left:33px;top:56px;width:38px}.monster-shape b{width:21px;height:21px}.enemy-hp{width:98px}.combat-cards{grid-template-columns:1fr repeat(2,68px)}.combat-stat:nth-of-type(4),.combat-stat:nth-of-type(5){display:none}.attribute-list{grid-template-columns:1fr 1fr}.loot-list{grid-template-columns:1fr}.log-wrap{height:205px}#battleLog{height:157px}.stats-panel{padding:19px}.codex{padding:72px 18px}.source-strip{align-items:flex-start;flex-direction:column;gap:11px}.source-strip span{margin:0}footer{flex-direction:column;padding:28px 18px}.class-grid{grid-template-columns:1fr}.class-option{min-height:116px}.dialog-card{padding:19px}.dialog-submit{width:100%;float:none}.offline-card{padding:36px 22px}}

/* Verified monster previews: image IDs are mapped from rd.fharr.com search results. */
.monster-frame{position:relative;width:156px;height:142px;display:grid;place-items:center;border:1px solid #4c5968;background:radial-gradient(circle at 50% 62%,rgba(225,189,104,.12),transparent 58%);clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%)}
.monster-frame:before,.monster-frame:after{content:"";position:absolute;width:36px;height:1px;background:#7b6b46}
.monster-frame:before{left:-15px;top:28px}.monster-frame:after{right:-15px;bottom:28px}
.monster-frame img{display:block;max-width:136px;max-height:122px;image-rendering:auto;filter:drop-shadow(0 15px 12px rgba(0,0,0,.4))}
.monster-frame img[hidden]{display:none}
#monsterFallback{display:grid;place-items:center;width:96px;height:96px;color:#d3b66e;border:1px dashed #75694b;border-radius:50%;font:900 32px "Noto Serif TC"}
#monsterFallback[hidden]{display:none}
@media(max-width:640px){.monster-frame{width:116px;height:110px}.monster-frame img{max-width:104px;max-height:96px}}

/* Character visuals, novice progression, and two-page navigation */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.18s ease both page-out}::view-transition-new(root){animation:.28s ease both page-in}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}@keyframes page-in{from{opacity:0;transform:translateY(10px)}}
[hidden]{display:none!important}
.start-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.hero-actions .text-btn{text-decoration:none}
.game-page .game-shell{min-height:calc(100svh - 68px);padding-top:44px}.game-page .section-heading{margin-bottom:18px}.game-page main{background:#111720}
.landing-character{position:absolute;z-index:5;left:38%;bottom:16%;width:116px;height:210px;filter:drop-shadow(0 20px 18px rgba(0,0,0,.5));animation:avatarFloat 3.4s ease-in-out infinite}
.landing-character i{position:absolute;display:block}.lc-shadow{left:14px;bottom:0;width:88px;height:16px;background:rgba(0,0,0,.42);border-radius:50%}.lc-leg{bottom:20px;width:25px;height:64px;background:#29323d}.lc-leg.left{left:32px;transform:rotate(4deg)}.lc-leg.right{right:32px;transform:rotate(-4deg)}.lc-body{left:23px;bottom:70px;width:70px;height:82px;background:#a69467;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)}.lc-arm{bottom:77px;width:22px;height:68px;background:#8b7b56}.lc-arm.left{left:10px;transform:rotate(13deg)}.lc-arm.right{right:10px;transform:rotate(-13deg)}.lc-head{left:34px;top:7px;width:48px;height:52px;background:#d8aa82;border-radius:48%}.lc-hair{left:28px;top:0;width:60px;height:40px;background:#4a352b;clip-path:polygon(8% 70%,10% 22%,35% 0,68% 7%,95% 33%,88% 78%,72% 51%,57% 86%,42% 50%,26% 82%)}.lc-scarf{left:27px;top:54px;width:62px;height:18px;background:#3f7974;transform:rotate(-3deg)}
@keyframes avatarFloat{50%{transform:translateY(-7px)}}
.character-visual{display:grid;place-items:center;isolation:isolate}.character-visual svg{display:block;width:100%;height:100%;overflow:visible}
.portrait-wrap{overflow:visible}.character-visual--portrait{width:104px;height:122px;transform:rotate(-2deg)}
.fighter-glyph.character-visual{padding:5px;color:inherit;font:inherit;background:radial-gradient(circle at 50% 28%,rgba(225,189,104,.11),transparent 64%),#151d26;overflow:visible}
.job-avatar{--cloth:#a69467;--cape:#655c45;--accent:#3f7974;--hair:#4a352b;--dark:#28303a;overflow:visible;filter:drop-shadow(0 8px 7px rgba(0,0,0,.32))}
.job-avatar--novice{--cloth:#a69467;--cape:#655c45;--accent:#3f7974;--hair:#4a352b;--dark:#28303a}
.job-avatar--sword{--cloth:#46647e;--cape:#273b50;--accent:#b75850;--hair:#5b3828;--dark:#202a34}
.job-avatar--mage{--cloth:#5c4776;--cape:#30283f;--accent:#d3a652;--hair:#332641;--dark:#211d2c}
.job-avatar--merchant{--cloth:#a3733e;--cape:#53402f;--accent:#5d825f;--hair:#5a3423;--dark:#2c2925}
.job-avatar--thief{--cloth:#4b465f;--cape:#262632;--accent:#a64e54;--hair:#25222e;--dark:#1b1b22}
.job-avatar--acolyte{--cloth:#d6d1bc;--cape:#77736a;--accent:#5478a0;--hair:#76513b;--dark:#34373c}
.job-avatar--archer{--cloth:#557156;--cape:#2d4536;--accent:#b18a4e;--hair:#4e382a;--dark:#252b27}
.avatar-shadow{fill:rgba(0,0,0,.38)}.avatar-cape{fill:var(--cape)}.avatar-body,.avatar-arm{fill:var(--cloth);stroke:rgba(255,255,255,.08);stroke-width:2}.avatar-leg{fill:var(--dark)}.avatar-boot{fill:#1b2026}.avatar-head,.avatar-hand{fill:#d9aa82}.avatar-hair{fill:var(--hair)}.avatar-eye{fill:#20242a}.avatar-mouth{fill:none;stroke:#8e5f4d;stroke-width:2;stroke-linecap:round}.avatar-gear{display:none}.job-avatar--novice .gear-novice,.job-avatar--sword .gear-sword,.job-avatar--mage .gear-mage,.job-avatar--merchant .gear-merchant,.job-avatar--thief .gear-thief,.job-avatar--acolyte .gear-acolyte,.job-avatar--archer .gear-archer{display:block}.gear-accent{fill:var(--accent)}.gear-dark{fill:var(--dark)}.gear-metal{fill:#c3ccd1;stroke:#65727c;stroke-width:2}.gear-light{fill:#f2e8c9}.gear-stroke{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}.gear-metal.gear-stroke{stroke:#c3ccd1;stroke-width:3}
.player-fighter .job-avatar{animation:avatarFloat 2.8s ease-in-out infinite}.battle-stage.hit .enemy-fighter{animation:enemyHit .22s ease}.battle-stage.cast .player-fighter .job-avatar{filter:drop-shadow(0 0 12px #d7b563) brightness(1.25)}
.route-card small{display:block;margin-top:8px;color:#a8b0b8;font-size:8px;line-height:1.65}.bar.job i{background:#8d71b0}.job-resource{margin-top:10px}
.novice-skill-card{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:12px;background:#111821;border:1px solid #3d4958;border-left:3px solid #8d71b0}.novice-skill-card span,.novice-skill-card small{display:block;color:#89939e;font-size:8px}.novice-skill-card strong{display:block;margin:3px 0;color:#e6dfd0;font-size:11px}.novice-skill-card button{padding:7px 10px;color:#171b20;background:var(--gold);border:0;font-size:9px;font-weight:900}.novice-skill-card button:disabled{opacity:.35}
.class-option{display:grid;grid-template-columns:78px 1fr;gap:13px;align-items:center;min-height:154px;padding:12px}.class-option .class-visual{width:76px;height:106px;align-self:end}.class-option .class-copy{min-width:0}.class-option strong{display:block;font:900 16px "Noto Serif TC"}.class-option small,.class-option em{display:block;color:#8f99a4;font-size:8px;font-style:normal;line-height:1.65}.class-option em{margin-top:5px;color:#c9b77f}.class-option p{margin:9px 0 0;color:#8f99a4;font-size:9px;line-height:1.55}.class-option.selected .job-avatar{filter:drop-shadow(0 0 10px rgba(225,189,104,.42))}
.job-source-note{margin:21px 0;color:#aeb5bc;font-size:10px;line-height:1.85;border-left:3px solid var(--gold);padding:10px 14px;background:#101720}
.create-layout{display:grid;grid-template-columns:210px 1fr;gap:28px;align-items:center;margin-top:18px}.create-preview{height:250px;display:grid;grid-template-rows:190px auto auto;place-items:center;background:#0d131a;border:1px solid #465364}.create-preview .character-visual{width:145px;height:190px}.create-preview strong{font:900 18px "Noto Serif TC"}.create-preview small{color:#818b95;font-size:8px}.create-layout .name-field{margin-top:0}
.identity p{line-height:1.6}.mini-link:disabled{opacity:.55;cursor:default}
@media(max-width:900px){.landing-character{left:44%}.game-page .game-shell{padding-top:30px}.class-option{grid-template-columns:70px 1fr}.class-option .class-visual{width:68px}}
@media(max-width:640px){.landing-character{left:38%;bottom:12%;transform:scale(.78);transform-origin:bottom}.create-layout{grid-template-columns:1fr}.create-preview{height:210px;grid-template-rows:155px auto auto}.create-preview .character-visual{height:158px}.class-option{grid-template-columns:74px 1fr;min-height:140px}.class-option .class-visual{width:72px;height:100px}.game-page .game-shell{padding-top:22px}.game-topbar nav a:first-child{display:inline}.character-visual--portrait{height:118px}}

/* v3 — verified external character/monster art, real map terrain, split battle layout */
.landing-character{width:132px;height:210px;display:grid;place-items:end center}
.landing-character img{display:block;max-width:100%;max-height:100%;image-rendering:auto;filter:drop-shadow(0 20px 18px rgba(0,0,0,.55))}
.game-page-v3 .game-main-v3{min-height:100svh;background:#0b1016}
.game-page-v3 .battle-half{height:clamp(460px,calc(55svh - 34px),630px);min-height:460px;border-bottom:1px solid #647181}
.game-page-v3 .battle-backdrop{--terrain:none;position:relative;height:100%;overflow:hidden;background-image:linear-gradient(180deg,rgba(7,10,13,.38),rgba(7,10,13,.1) 46%,rgba(7,10,13,.7)),var(--terrain);background-size:cover,cover;background-position:center,center;isolation:isolate}
.game-page-v3 .battle-backdrop:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(9,13,18,.8),transparent 34%,transparent 72%,rgba(9,13,18,.42));pointer-events:none}
.terrain-shade{position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 68% 55%,transparent 0 32%,rgba(5,8,11,.2) 68%),linear-gradient(180deg,rgba(10,15,20,.16),rgba(10,15,20,.48));backdrop-filter:saturate(.78) contrast(1.06)}
.battle-topline{position:absolute;z-index:6;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;padding:22px clamp(18px,4vw,62px);pointer-events:none}
.battle-topline h1{margin:3px 0 0;color:#f3ead7;font:900 clamp(24px,3vw,42px) "Noto Serif TC";text-shadow:0 3px 18px #000}
.map-code{margin:2px 0 0;color:#d3c69f;font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em}
.encounter-status{min-width:150px;padding:11px 15px;text-align:right;color:#d9d2c4;background:rgba(9,13,18,.72);border:1px solid rgba(203,184,133,.42);backdrop-filter:blur(8px)}
.encounter-status span,.encounter-status strong{display:block}.encounter-status span{color:#c6a95d;font-size:9px;letter-spacing:.14em}.encounter-status strong{margin-top:3px;font:900 18px "Noto Serif TC"}
.battlefield{position:absolute;z-index:2;inset:82px clamp(16px,4vw,62px) 68px;display:grid;grid-template-columns:minmax(160px,28%) minmax(0,72%);align-items:end;gap:clamp(10px,3vw,42px)}
.battle-player{height:100%;display:flex;align-items:flex-end;justify-content:center}
.battle-player-card{display:flex;align-items:flex-end;gap:11px;margin-bottom:8px;padding:10px 14px 8px;background:linear-gradient(90deg,rgba(8,12,16,.84),rgba(8,12,16,.2));border-left:3px solid var(--gold);filter:drop-shadow(0 14px 15px rgba(0,0,0,.52))}
.battle-player-card small,.battle-player-card strong{display:block;text-shadow:0 2px 8px #000}.battle-player-card small{color:#ccb66f;font-size:9px}.battle-player-card strong{color:#f4ede0;font:900 15px "Noto Serif TC"}
.character-source-frame{position:relative;display:grid;place-items:center;overflow:visible}
.character-source-frame img{display:block;max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 12px 9px rgba(0,0,0,.5))}
.character-source-frame .image-fallback{display:none;padding:8px;color:#d6c08a;border:1px dashed #88764d;font-size:8px;text-align:center}
.character-source-frame.image-error img{display:none}.character-source-frame.image-error .image-fallback{display:block}
.character-source-frame--battle{width:92px;height:126px}.character-source-frame--portrait{width:118px;height:138px}.character-source-frame--create{width:150px;height:175px}
.enemy-field{height:100%;display:grid;grid-template-columns:repeat(3,minmax(112px,1fr));grid-auto-rows:minmax(128px,1fr);align-content:end;align-items:end;gap:8px 10px;padding:38px 0 3px}
.enemy-field:has(.enemy-card:only-child){grid-template-columns:minmax(160px,260px);justify-content:end}
.enemy-card{position:relative;min-width:0;display:grid;grid-template-columns:minmax(72px,104px) minmax(0,1fr);align-items:end;gap:7px;padding:7px 8px;background:linear-gradient(180deg,transparent 0 28%,rgba(9,13,17,.78) 28%);border:1px solid transparent;transition:.18s}
.enemy-card.target{border-color:rgba(232,197,103,.66);box-shadow:0 0 18px rgba(232,197,103,.12)}.enemy-card.target:before{content:"TARGET";position:absolute;left:7px;top:5px;color:#f3c95e;font:900 7px ui-monospace;letter-spacing:.14em}
.enemy-card.boss{border-color:rgba(179,69,59,.8);background:linear-gradient(180deg,transparent 0 22%,rgba(38,10,11,.86) 22%);box-shadow:0 0 25px rgba(143,31,24,.24)}.enemy-card.boss:after{content:"BOSS";position:absolute;right:7px;top:5px;color:#f08b7f;font:900 8px ui-monospace;letter-spacing:.12em}
.enemy-card.defeated{opacity:.28;filter:grayscale(1)}
.enemy-sprite{position:relative;min-width:72px;height:93px;display:grid;place-items:end center}.enemy-sprite img{display:block;max-width:100%;max-height:88px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.65))}.monster-fallback{display:grid;place-items:center;width:58px;height:58px;margin-bottom:8px;color:#d9b86b;border:1px dashed #8f7a4d;border-radius:50%;font:900 22px "Noto Serif TC"}.monster-fallback[hidden]{display:none}
.enemy-meta{min-width:0;padding-bottom:3px}.enemy-meta>span{display:block;color:#be9f58;font-size:6px;letter-spacing:.14em}.enemy-meta strong{display:block;overflow:hidden;color:#f1eadc;font:900 11px "Noto Serif TC";text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 6px #000}.enemy-meta small{display:block;margin-top:2px;color:#adb4ba;font-size:6px}.enemy-hp{height:4px;margin-top:6px;background:#252c33}.enemy-hp i{display:block;height:100%;background:#b64f49;transition:width .18s}
.empty-encounter{grid-column:1/-1;align-self:center;margin:0;color:#e1d5bc;text-align:center;text-shadow:0 2px 8px #000}
.battle-controls{position:absolute;z-index:8;left:0;right:0;bottom:0;min-height:58px;display:grid;grid-template-columns:auto minmax(210px,1fr) auto auto auto;align-items:center;gap:10px;padding:9px clamp(15px,4vw,62px);background:rgba(8,12,16,.88);border-top:1px solid rgba(117,132,148,.48);backdrop-filter:blur(10px)}
.battle-controls label{color:#9ba4ad;font-size:8px;letter-spacing:.12em}.battle-controls select{height:38px;padding:0 34px 0 11px;color:#e6e1d6;background:#101821;border:1px solid #586577}
.boss-challenge{height:38px;padding:0 13px;color:#f0d7ce;background:#47211f;border:1px solid #9b554e;font-size:9px}.boss-challenge:disabled{color:#7d858d;background:#171d24;border-color:#3b4652;cursor:not-allowed}
.game-lower{display:grid;grid-template-columns:260px minmax(420px,1fr) 280px;max-width:1500px;margin:0 auto;padding:18px clamp(12px,2.2vw,34px) 48px;gap:14px;background:#111720}
.game-lower>.panel{min-width:0;border:1px solid #3f4b59;background:#171f29}
.game-lower .character-panel,.game-lower .stats-panel{padding:19px}.game-lower .portrait-wrap{margin-bottom:13px}
.combat-console{display:flex;flex-direction:column}.console-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:17px 19px;border-bottom:1px solid #33404e}.console-heading h2{margin:3px 0 0;font-size:24px}.console-heading .save-state{margin-top:3px}
.combat-console .combat-cards{grid-template-columns:minmax(185px,2fr) repeat(4,1fr)}.combat-console .log-wrap{height:238px;flex:1}.combat-console #battleLog{height:188px}
.source-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px 17px;border-bottom:1px solid #33404e}.source-facts div{padding:9px 10px;background:#101720;border-left:2px solid #90784a}.source-facts span,.source-facts strong{display:block}.source-facts span{color:#7f8993;font-size:7px;letter-spacing:.12em}.source-facts strong{margin-top:3px;color:#d8d2c3;font-size:9px}.source-facts p{grid-column:1/-1;margin:2px 0 0;color:#7f8993;font-size:8px;line-height:1.6}
.game-page-v3 .portrait-wrap{height:auto;background:#0d141b}.game-page-v3 .level-badge{bottom:5px}
.game-page-v3 .damage-number{left:58%;top:36%}
.game-page-v3 .battle-stage.hit .enemy-card.target{animation:enemyHit .22s ease}
.gender-picker{display:flex;gap:7px;margin:16px 0 19px;padding:0;border:0}.gender-picker legend{margin-bottom:7px;color:#8f99a4;font-size:9px;letter-spacing:.1em}.gender-picker button{min-width:88px;padding:9px 13px;color:#cbd1d7;background:#17202a;border:1px solid #465364}.gender-picker button[aria-pressed=true]{color:#161b20;background:var(--gold);border-color:var(--gold);font-weight:900}
.create-preview{grid-template-rows:175px auto auto}.create-preview .character-source-frame{width:150px;height:175px}
.class-option .class-visual{height:116px;display:grid;place-items:center}.class-option .class-visual img{display:block;max-width:100%;max-height:100%;filter:drop-shadow(0 8px 7px rgba(0,0,0,.4))}
.class-option.selected .class-visual img{filter:drop-shadow(0 0 10px rgba(225,189,104,.52))}
@media(max-width:1120px){
 .game-lower{grid-template-columns:235px minmax(420px,1fr)}.game-lower .stats-panel{grid-column:1/-1}.game-lower .attribute-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}
 .enemy-field{grid-template-columns:repeat(3,minmax(100px,1fr))}
}
@media(max-width:820px){
 .game-page-v3 .battle-half{height:690px;min-height:690px}.battlefield{inset:95px 13px 118px;grid-template-columns:1fr}.battle-player{position:absolute;z-index:3;left:0;bottom:0;height:auto}.battle-player-card{margin:0}.enemy-field{grid-template-columns:repeat(2,minmax(125px,1fr));padding:0 0 0 110px}.battle-controls{grid-template-columns:1fr 1fr}.battle-controls label{display:none}.battle-controls select{grid-column:1/-1}.game-lower{display:block;padding:12px 8px 40px}.game-lower>.panel{margin-bottom:10px}.character-panel{display:grid;grid-template-columns:125px 1fr 1fr;gap:12px 18px}.portrait-wrap{grid-row:1/4;margin:0}.identity{text-align:left}.resource{margin-top:0}.currency-row,.route-card,.panel-actions{grid-column:2/4;margin:0}
}
@media(max-width:560px){
 .battle-topline{padding:14px}.battle-topline h1{font-size:25px}.encounter-status{min-width:118px;padding:9px 10px}.battlefield{top:86px}.enemy-field{padding-left:78px;grid-template-columns:repeat(2,minmax(105px,1fr));gap:4px}.enemy-card{grid-template-columns:72px minmax(0,1fr);padding:5px}.enemy-sprite{height:80px}.enemy-sprite img{max-height:74px}.enemy-meta strong{font-size:9px}.battle-player-card{padding:6px}.character-source-frame--battle{width:67px;height:94px}.battle-player-card div:last-child{display:none}.battle-controls{padding:7px}.battle-controls .battle-toggle,.boss-challenge{padding:0 8px;font-size:8px}.character-panel{display:block}.identity{text-align:center}.resource{margin-top:14px}.currency-row,.route-card,.panel-actions{margin-top:15px}.combat-console .combat-cards{grid-template-columns:1fr repeat(2,68px)}.combat-console .combat-stat:nth-of-type(4),.combat-console .combat-stat:nth-of-type(5){display:none}.source-facts{grid-template-columns:1fr}.source-facts p{grid-column:auto}.game-lower .attribute-list{grid-template-columns:1fr 1fr}.class-grid{grid-template-columns:1fr}
}

@media(min-width:821px){.enemy-field.boss-encounter{grid-template-columns:repeat(4,minmax(100px,1fr));grid-auto-rows:minmax(108px,1fr)}.enemy-field.boss-encounter .enemy-card{grid-template-columns:minmax(68px,88px) minmax(0,1fr)}.enemy-field.boss-encounter .enemy-sprite{height:80px}.enemy-field.boss-encounter .enemy-sprite img{max-height:76px}}


/* v4 — local transparent character art and complete first-job skill book */
.game-page-v3 .tabs{grid-template-columns:repeat(3,1fr)}
.game-page-v3 .novice-skill-card{display:none!important}
.game-lower{grid-template-columns:260px minmax(420px,1fr) 360px}
.character-source-frame img,.landing-character img{background:transparent!important}
.skill-tab-content{padding:14px}
.skill-book-head{margin-bottom:12px;padding:12px;background:#0f161e;border:1px solid #384656}
.skill-book-head>div{display:flex;align-items:center;justify-content:space-between}
.skill-book-head span{color:#8f99a4;font-size:8px;letter-spacing:.12em}
.skill-book-head strong{color:var(--gold);font:900 22px "Noto Serif TC"}
.skill-book-head p{margin:7px 0 0;color:#7f8993;font-size:8px;line-height:1.65}
.skill-book{max-height:720px;display:grid;gap:8px;overflow:auto;padding-right:4px}
.skill-entry{padding:11px;background:#111821;border:1px solid #354252;border-left:3px solid #4c5a6a}
.skill-entry.learned{border-left-color:#8ba475}.skill-entry.equipped{border-color:#b8994e;box-shadow:inset 0 0 0 1px rgba(211,177,94,.15)}
.skill-entry.quest-skill{border-left-color:#7b648d}
.skill-entry-top{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px}
.ro-skill-icon{width:26px;height:26px;display:grid;place-items:center;color:#d6bc79;background-color:#202a35;border:1px solid #596878;font:900 10px "Noto Serif TC";image-rendering:auto}
.skill-entry-top strong,.skill-entry-top small{display:block}.skill-entry-top strong{overflow:hidden;color:#e8e3d7;font:900 12px "Noto Serif TC";text-overflow:ellipsis;white-space:nowrap}.skill-entry-top small{margin-top:2px;color:#9ba4ad;font-size:7px}.skill-entry-top>b{color:#cdb46d;font-size:8px}
.skill-description{margin:9px 0 7px;color:#a4adb6;font-size:8px;line-height:1.65}
.skill-requirement{margin:0;color:#7f8993;font-size:7px}.skill-requirement.unmet{color:#c77d73}
.skill-entry details{margin-top:8px;border-top:1px dotted #3f4c59}.skill-entry summary{padding:7px 0 2px;color:#bca76e;font-size:7px;cursor:pointer}
.skill-detail-data{padding-top:4px}.skill-detail-data p{display:grid;grid-template-columns:56px 1fr;gap:7px;margin:3px 0;color:#929ca6;font-size:7px;line-height:1.45}.skill-detail-data b{color:#c7cdd2}.skill-detail-data span{overflow-wrap:anywhere}
.skill-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:9px}.skill-actions button{padding:6px 8px;color:#171b20;background:var(--gold);border:0;font-size:8px;font-weight:900}.skill-actions button:disabled{opacity:.28;cursor:not-allowed}.skill-actions .equip-skill{color:#dce2e7;background:#283543;border:1px solid #536275}.skill-actions span{color:#8d769e;font-size:7px}
@media(max-width:1120px){.skill-book{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.skill-book-head{grid-column:1/-1}}
@media(max-width:640px){.skill-book{grid-template-columns:1fr}.skill-tab-content{padding:10px}}

/* Verified local ROIDV character animation and combat motion states */
.battle-player-card{position:relative;overflow:visible}
.behavior-tag{display:inline-flex;width:max-content;margin:.2rem 0 .1rem;padding:.12rem .35rem;border:1px solid;font-size:.58rem;font-style:normal;letter-spacing:.08em}
.behavior-tag.aggressive{border-color:#b7504e;color:#ffaaa2;background:rgba(183,80,78,.16)}
.behavior-tag.passive{border-color:#587b6b;color:#a8d9bf;background:rgba(88,123,107,.14)}
.game-page-v3 .battle-stage.walking #fighterImage{animation:roWalk .58s steps(2,end) infinite;transform-origin:center bottom}
.game-page-v3 .battle-stage.strike .battle-player-card{animation:roDash .52s cubic-bezier(.2,.8,.2,1)}
.game-page-v3 .battle-stage.strike #fighterImage{animation:roAttack .52s cubic-bezier(.2,.8,.2,1)}
.game-page-v3 .battle-stage.strike .battle-player-card:after{content:"";position:absolute;z-index:5;width:74px;height:74px;right:-58px;top:18px;border-right:5px solid #ffe49a;border-top:2px solid rgba(255,228,154,.75);border-radius:50%;filter:drop-shadow(0 0 8px #e9b955);animation:roSlash .46s ease-out;pointer-events:none}
.game-page-v3 .battle-stage.cast .battle-player-card{animation:roCastBody .72s ease}
.game-page-v3 .battle-stage.cast #fighterImage{animation:roCastSprite .72s ease}
.game-page-v3 .battle-stage.cast .battle-player-card:before{content:"✦";position:absolute;z-index:4;left:22px;bottom:-18px;width:82px;height:30px;display:grid;place-items:center;color:#fff0b5;border:2px solid #d7b563;border-radius:50%;box-shadow:0 0 0 7px rgba(215,181,99,.18),0 0 25px #d7b563;animation:roMagicCircle .72s ease;pointer-events:none}
@keyframes roWalk{0%,100%{transform:translate(-2px,0) rotate(-1deg)}50%{transform:translate(3px,-5px) rotate(1deg)}}
@keyframes roDash{0%{transform:translateX(0)}45%{transform:translateX(clamp(36px,8vw,105px))}100%{transform:translateX(0)}}
@keyframes roAttack{0%,100%{transform:rotate(0)}45%{transform:translateY(-4px) rotate(8deg) scale(1.08)}}
@keyframes roSlash{0%{opacity:0;transform:translate(-18px,14px) rotate(-45deg) scale(.45)}35%{opacity:1}100%{opacity:0;transform:translate(24px,-12px) rotate(18deg) scale(1.25)}}
@keyframes roCastBody{0%,100%{filter:none}45%{filter:drop-shadow(0 0 18px #d7b563)}}
@keyframes roCastSprite{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-12px) scale(1.08);filter:brightness(1.3) drop-shadow(0 0 12px #f2cf79)}}
@keyframes roMagicCircle{0%{opacity:0;transform:scale(.35) rotate(0)}40%{opacity:1}100%{opacity:0;transform:scale(1.45) rotate(160deg)}}


/* v6 — native SPR/ACT animation frames */
.game-page-v3 .battle-stage.walking #fighterImage,.game-page-v3 .battle-stage.strike #fighterImage,.game-page-v3 .battle-stage.cast #fighterImage{animation:none;transform:none}
.game-page-v3 .battle-stage.strike .battle-player-card,.game-page-v3 .battle-stage.cast .battle-player-card{animation:none}
.character-source-frame--battle img{image-rendering:auto;background:transparent!important}


/* v9 — log beside static portrait; combat console removed */
.game-lower{grid-template-columns:minmax(680px,1fr) 420px}
.game-lower>.character-panel{display:grid;grid-template-columns:260px minmax(320px,1fr);grid-auto-rows:auto;align-content:start;gap:0 18px}
.game-lower>.character-panel>:not(.character-log){grid-column:1}
.game-lower>.character-panel>.character-log{grid-column:2;grid-row:1/span 20;height:100%;min-height:590px;padding:15px 18px}
.game-lower>.character-panel>.character-log #battleLog{height:calc(100% - 28px);min-height:540px}
.game-lower>.character-panel .save-state{justify-content:center;margin-top:10px}
.quick-combat{margin:-1px -1px 14px;border:1px solid #3f4b59;background:#111821}
.quick-combat .combat-cards{grid-template-columns:minmax(165px,2fr) repeat(4,1fr);border:0}
.quick-combat .skill-card{min-height:66px;padding:9px 10px}
@media(max-width:1120px){.game-lower{grid-template-columns:minmax(540px,1fr) 340px}.quick-combat .combat-cards{grid-template-columns:1fr repeat(2,64px)}.quick-combat .combat-stat:nth-of-type(4),.quick-combat .combat-stat:nth-of-type(5){display:none}}
@media(max-width:820px){.game-lower{display:block}.game-lower>.character-panel{display:grid;grid-template-columns:230px minmax(260px,1fr)}.game-lower>.character-panel>.character-log{min-height:430px}.game-lower>.character-panel>.character-log #battleLog{min-height:380px}.quick-combat .combat-cards{grid-template-columns:minmax(180px,2fr) repeat(4,1fr)}.quick-combat .combat-stat{display:grid!important}}
@media(max-width:560px){.game-lower>.character-panel{display:block}.game-lower>.character-panel>.character-log{height:260px;min-height:0;margin-top:16px}.game-lower>.character-panel>.character-log #battleLog{height:210px;min-height:0}.quick-combat .combat-cards{grid-template-columns:1fr repeat(2,68px)}.quick-combat .combat-stat:nth-of-type(4),.quick-combat .combat-stat:nth-of-type(5){display:none!important}}

/* v9.1 — medium viewport stacking */
@media(max-width:1120px){.game-lower{display:block}.game-lower>.panel{margin-bottom:14px}.game-lower>.stats-panel{grid-column:auto}.game-lower>.character-panel{grid-template-columns:260px minmax(320px,1fr)}}


/* v10 — original auto-battle settings inspired by genre conventions */
.game-page-v3 .tabs{grid-template-columns:repeat(4,1fr)}
.idle-tab-content{padding:14px}.idle-settings-head{margin-bottom:12px;padding:12px;background:#0f161e;border-left:3px solid var(--gold)}
.idle-settings-head span{color:var(--gold);font-size:7px;letter-spacing:.16em}.idle-settings-head h3{margin:4px 0 6px;font:900 17px "Noto Serif TC"}.idle-settings-head p,.offline-note p{margin:0;color:#89939d;font-size:8px;line-height:1.7}
.idle-setting{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;margin-bottom:8px;padding:12px;background:#111821;border:1px solid #354252;cursor:pointer}.idle-setting input{width:17px;height:17px;margin-top:2px;accent-color:#d7b563}.idle-setting strong,.idle-setting small{display:block}.idle-setting strong{color:#e4dfd2;font-size:10px}.idle-setting small{margin-top:4px;color:#89939d;font-size:8px;line-height:1.55}.offline-note{padding:11px;border:1px dashed #4c5967}.offline-note b{display:block;margin-bottom:4px;color:#cdb46d;font-size:9px}

/* v10.1 — compact combat metrics */
@media(max-width:1120px){.quick-combat .combat-cards{grid-template-columns:repeat(4,1fr)}.quick-combat .skill-card{grid-column:1/-1}.quick-combat .combat-stat{display:grid!important;min-height:54px}}
@media(max-width:560px){.quick-combat .combat-cards{grid-template-columns:repeat(2,1fr)}.quick-combat .skill-card{grid-column:1/-1}.quick-combat .combat-stat{display:grid!important}}

/* v12 — TWRO Lv.1–70 route map and exact Renewal progression */
.battle-top-actions{display:flex;align-items:flex-start;gap:10px;pointer-events:auto}
.mini-map-button{width:190px;min-height:68px;display:grid;grid-template-columns:80px 1fr;gap:9px;align-items:center;padding:7px;color:#e7dfcf;background:rgba(9,13,18,.78);border:1px solid rgba(203,184,133,.5);backdrop-filter:blur(8px);text-align:left;cursor:pointer}
.mini-map-button:hover,.mini-map-button:focus-visible{border-color:#e2c578;box-shadow:0 0 0 2px rgba(226,197,120,.15)}
.mini-map-button img{width:80px;height:54px;object-fit:cover;background:#18212a;filter:saturate(.75) contrast(1.06)}
.mini-map-button small,.mini-map-button strong{display:block}.mini-map-button small{color:#c6a95d;font-size:7px;letter-spacing:.13em}.mini-map-button strong{margin-top:4px;font:900 11px "Noto Serif TC"}
.map-open-button{height:38px;padding:0 13px;color:#e4d6ac;background:#1a232d;border:1px solid #7c6c43;font-size:9px;font-weight:900;letter-spacing:.06em}
.map-open-button:hover{background:#273342}
.attribute-row button{width:42px;height:30px}.attribute-row button small{display:inline;margin-left:2px;color:inherit;font-size:7px}
.world-map-dialog{width:min(1180px,calc(100vw - 24px));max-width:none;padding:0;color:#dfe3e6;background:#0b1016;border:1px solid #495666}
.world-map-dialog::backdrop{background:rgba(2,5,8,.82);backdrop-filter:blur(5px)}
.world-map-shell>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid #384554;background:linear-gradient(135deg,#151e28,#0c1219)}
.world-map-shell>header h2{margin:4px 0 5px;font:900 27px "Noto Serif TC"}.world-map-shell>header p{margin:0;color:#8e98a3;font-size:9px;line-height:1.6}
.world-map-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:610px}
.world-map-grid{max-height:70vh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:9px;overflow:auto;padding:16px;background:#0e141c}
.world-map-card{position:relative;min-height:155px;overflow:hidden;padding:0;color:#e5dfd2;background:#151d26;border:1px solid #344150;text-align:left;cursor:pointer}
.world-map-card:hover,.world-map-card:focus-visible,.world-map-card.selected{border-color:#d1b76e;box-shadow:inset 0 0 0 1px rgba(209,183,110,.25)}
.world-map-card.current:after{content:"目前地圖";position:absolute;top:7px;right:7px;padding:3px 6px;color:#10151a;background:#d1b76e;font-size:7px;font-weight:900}
.world-map-card img{width:100%;height:92px;display:block;object-fit:cover;filter:saturate(.72) contrast(1.08)}
.world-map-card>span{display:block;padding:8px 9px 9px}.world-map-card strong,.world-map-card small{display:block}.world-map-card strong{font:900 11px "Noto Serif TC"}.world-map-card small{margin-top:3px;color:#9ba5af;font-size:7px;line-height:1.45}
.world-map-card>button:first-child{width:100%;display:block;padding:0;color:inherit;background:transparent;border:0;text-align:left;cursor:pointer}.world-map-card .map-card-copy{display:block;padding:8px 9px 32px}.world-map-card .map-card-copy small,.world-map-card .map-card-copy strong,.world-map-card .map-card-copy em,.world-map-card .map-card-copy span{display:block}.world-map-card .map-card-copy small{color:#8f9aa5;font-size:7px}.world-map-card .map-card-copy strong{margin-top:2px;font:900 11px "Noto Serif TC"}.world-map-card .map-card-copy em{margin-top:3px;color:#d6bd75;font-size:8px;font-style:normal}.world-map-card .map-card-copy span{overflow:hidden;margin-top:3px;color:#8f9aa5;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.world-map-card .map-card-travel{position:absolute;right:7px;bottom:7px;padding:5px 8px;color:#1b2025;background:#d1b76e;border:0;font-size:7px;font-weight:900}.world-map-card .map-card-travel:disabled{color:#727b84;background:#222b35}
.map-detail{padding:17px;background:#101720;border-left:1px solid #354252}.map-detail>img{width:100%;height:210px;display:block;object-fit:contain;background:#080d12;border:1px solid #344150}.map-detail h3{margin:14px 0 2px;font:900 21px "Noto Serif TC"}.map-detail>p{margin:0 0 12px;color:#9eaaaf;font-size:8px}.map-detail ul{max-height:285px;overflow:auto;margin:0 0 14px;padding:0;list-style:none;border-top:1px solid #35414f}
.map-detail li{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid #2c3743}.map-detail li img{width:42px;height:42px;object-fit:contain;background:transparent}.map-detail li strong,.map-detail li small{display:block}.map-detail li strong{font-size:9px}.map-detail li small{margin-top:2px;color:#8d98a3;font-size:7px;line-height:1.45}.map-detail .primary-btn{width:100%;justify-content:center}
.load-error{max-width:720px;margin:80px auto;padding:24px;color:#e1d9c9;background:#141c25;border:1px solid #5b483f;text-align:center;line-height:1.8}
@media(max-width:900px){.world-map-layout{display:block}.world-map-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:52vh}.map-detail{border-top:1px solid #354252;border-left:0}.map-detail>img{height:180px}.battle-top-actions{gap:6px}.mini-map-button{width:145px;grid-template-columns:58px 1fr}.mini-map-button img{width:58px;height:48px}.encounter-status{min-width:118px}}
@media(max-width:600px){.battle-top-actions{align-items:stretch}.mini-map-button{width:74px;min-height:59px;display:block;padding:5px}.mini-map-button img{width:62px;height:46px}.mini-map-button span{display:none}.encounter-status{min-width:102px}.world-map-grid{grid-template-columns:1fr}.world-map-shell>header{padding:16px}.world-map-shell>header h2{font-size:22px}.map-detail{padding:13px}.battle-controls .map-open-button{padding:0 7px;font-size:7px}}

/* v13 — overlay HUD arrangement, using the supplied screenshot only as layout reference */
@media(min-width:901px){
 .game-page-v3{height:100svh;overflow:hidden;background:#070b0f}
 .game-page-v3 .topbar{height:52px;padding-inline:18px;background:rgba(8,12,16,.94)}
 .game-page-v3 .game-main-v3{position:relative;height:calc(100svh - 52px);min-height:620px;overflow:hidden}
 .game-page-v3 .battle-half{height:100%;min-height:0;border:0}
 .game-page-v3 .battle-backdrop{height:100%}
 .game-page-v3 .battle-topline{left:350px;padding:18px 22px}
 .game-page-v3 .battle-topline h1{font-size:30px}
 .game-page-v3 .battlefield{inset:92px 150px 150px 270px}
 .game-page-v3 .battle-player{align-items:center}
 .game-page-v3 .battle-player-card{background:rgba(9,13,18,.48);backdrop-filter:blur(4px)}
 .game-page-v3 .enemy-field{align-content:center}
 .game-page-v3 .battle-controls{left:50%;right:auto;bottom:94px;width:min(780px,calc(100vw - 760px));min-width:560px;min-height:48px;grid-template-columns:minmax(170px,1fr) auto auto auto;padding:6px 8px;transform:translateX(-50%);border:1px solid rgba(117,132,148,.55);background:rgba(8,12,16,.84);box-shadow:0 10px 30px rgba(0,0,0,.35)}
 .game-page-v3 .battle-controls label{display:none}
 .game-page-v3 .battle-controls select{min-width:0}
 .game-page-v3 .game-lower{position:absolute;z-index:12;inset:0;display:block;max-width:none;margin:0;padding:0;background:transparent;pointer-events:none}
 .game-page-v3 .game-lower>.panel{border:0;background:transparent;pointer-events:none}
 .game-page-v3 .game-lower>.character-panel{position:absolute;inset:0;display:block!important;padding:0}
 .game-page-v3 .character-panel>:not(.character-log){position:absolute;z-index:2;pointer-events:auto}
 .game-page-v3 .character-panel>.portrait-wrap{top:16px;left:16px;width:88px;height:88px;margin:0;background:rgba(12,17,23,.93);border-color:#7a6843;transform:none}
 .game-page-v3 .character-panel>.portrait-wrap:before{inset:5px}
 .game-page-v3 .character-panel>.portrait-wrap .character-source-frame--portrait{width:72px;height:82px}
 .game-page-v3 .character-panel>.portrait-wrap .level-badge{right:-2px;bottom:-4px;transform:none}
 .game-page-v3 .character-panel>.identity{top:16px;left:104px;width:220px;height:46px;padding:7px 10px;text-align:left;background:rgba(12,17,23,.93);border:1px solid #6b5d3f;border-left:0}
 .game-page-v3 .character-panel>.identity p{font-size:7px}.game-page-v3 .character-panel>.identity h2{overflow:hidden;margin:2px 0 0;font:900 16px "Noto Serif TC";text-overflow:ellipsis;white-space:nowrap}.game-page-v3 .character-panel>.identity .mini-link{position:absolute;right:7px;bottom:5px;font-size:7px}
 .game-page-v3 .character-panel>.save-state{display:none}
 .game-page-v3 .character-panel>.resource{left:104px;width:220px;height:21px;margin:0;padding:2px 9px;background:rgba(12,17,23,.93);border-inline:1px solid #6b5d3f}
 .game-page-v3 .character-panel>.resource:nth-child(3){top:62px}.game-page-v3 .character-panel>.resource:nth-child(4){top:83px}.game-page-v3 .character-panel>.resource:nth-child(5){top:104px}.game-page-v3 .character-panel>.resource:nth-child(6){top:125px;border-bottom:1px solid #6b5d3f}
 .game-page-v3 .character-panel>.resource .resource-label{position:relative;z-index:2;font-size:7px}.game-page-v3 .character-panel>.resource .bar{height:4px;margin-top:2px}
 .game-page-v3 .character-panel>.currency-row{top:146px;left:16px;width:308px;margin:0;padding:8px 10px;background:rgba(12,17,23,.93);border:1px solid #6b5d3f;font-size:8px}
 .game-page-v3 .character-panel>.route-card{top:182px;left:16px;width:308px;max-height:72px;overflow:hidden;padding:9px;background:rgba(12,17,23,.9);pointer-events:auto}
 .game-page-v3 .character-panel>.route-card p{font-size:8px}.game-page-v3 .character-panel>.route-card small{font-size:7px}
 .game-page-v3 .character-panel>.panel-actions{top:259px;left:16px;width:308px;margin:0;gap:5px}
 .game-page-v3 .character-panel>.character-log{position:absolute;z-index:3;left:16px;bottom:16px;width:330px;height:280px;min-height:0;padding:12px 14px;background:rgba(8,12,16,.9);border:1px solid #655635;box-shadow:0 12px 34px rgba(0,0,0,.35);pointer-events:auto}
 .game-page-v3 .character-panel>.character-log #battleLog{height:235px;min-height:0}
 .game-page-v3 .stats-panel{position:absolute;inset:0;padding:0!important}
 .game-page-v3 .quick-combat{position:absolute;z-index:5;left:50%;bottom:16px;width:min(760px,calc(100vw - 760px));min-width:560px;margin:0;background:rgba(8,12,16,.9);border:1px solid #655f4f;box-shadow:0 12px 34px rgba(0,0,0,.35);transform:translateX(-50%);pointer-events:auto}
 .game-page-v3 .quick-combat .combat-cards{grid-template-columns:minmax(170px,2fr) repeat(4,1fr)}
 .game-page-v3 .quick-combat .skill-card{min-height:62px}
 .game-page-v3 .stats-panel>.tabs{position:absolute;z-index:8;right:16px;bottom:16px;width:348px;height:62px;grid-template-columns:repeat(4,1fr);border:1px solid #655f4f;background:rgba(8,12,16,.92);box-shadow:0 12px 34px rgba(0,0,0,.4);pointer-events:auto}
 .game-page-v3 .stats-panel>.tabs button{position:relative;padding:28px 5px 7px;border-right:1px solid #343f4b;border-bottom:0;font-size:8px}.game-page-v3 .stats-panel>.tabs button:before{position:absolute;top:7px;left:0;right:0;color:#d6b962;font-size:15px}.game-page-v3 #attrTabBtn:before{content:"♙"}.game-page-v3 #skillTabBtn:before{content:"✦"}.game-page-v3 #lootTabBtn:before{content:"◆"}.game-page-v3 #idleTabBtn:before{content:"☾"}
 .game-page-v3 .stats-panel>.tab-content{position:absolute;z-index:7;right:16px;bottom:86px;width:390px;max-height:calc(100% - 112px);overflow:auto;padding:16px;background:rgba(15,22,30,.97);border:1px solid #655f4f;box-shadow:0 16px 46px rgba(0,0,0,.48);pointer-events:auto}
 .game-page-v3 .stats-panel>.tab-content.active{display:block}
 .game-page-v3 .skill-book{max-height:calc(100svh - 265px)}
 .game-page-v3>footer{display:none}
}
@media(min-width:901px) and (max-width:1250px){.game-page-v3 .battlefield{right:100px;left:235px}.game-page-v3 .battle-topline{left:330px}.game-page-v3 .character-panel>.character-log{width:290px}.game-page-v3 .quick-combat,.game-page-v3 .battle-controls{width:500px;min-width:500px}.game-page-v3 .stats-panel>.tabs{width:300px}.game-page-v3 .stats-panel>.tab-content{width:350px}}

/* v14 — map-category scenes and 20–30 free-roaming monsters */
.game-page-v3 .battle-backdrop{background-image:linear-gradient(180deg,rgba(7,10,13,.18),rgba(7,10,13,.02) 55%,rgba(7,10,13,.28)),var(--scene);background-size:cover,cover;background-position:center,center}
.game-page-v3 .battle-backdrop:after{background:linear-gradient(90deg,rgba(9,13,18,.46),transparent 28%,transparent 78%,rgba(9,13,18,.2))}
.game-page-v3 .terrain-shade{background:radial-gradient(circle at 66% 54%,transparent 0 42%,rgba(5,8,11,.12) 82%);backdrop-filter:saturate(.95) contrast(1.02)}
@media(min-width:901px){
 .game-page-v3 .battlefield{display:block;inset:86px 18px 145px 250px}
 .game-page-v3 .battle-player{position:absolute;z-index:40;left:7%;bottom:3%;width:160px;height:180px;display:flex;align-items:flex-end}
 .game-page-v3 .battle-player-card{padding:4px 7px;background:transparent;border-left:0;backdrop-filter:none;filter:drop-shadow(0 8px 7px rgba(0,0,0,.48))}
 .game-page-v3 .character-source-frame--battle{width:74px;height:112px}
 .game-page-v3 .enemy-field{position:absolute;inset:2% 1% 2% 24%;display:block;height:auto;padding:0;overflow:visible}
 .game-page-v3 .enemy-card{position:absolute;z-index:var(--enemy-z);left:var(--enemy-x);top:var(--enemy-y);width:86px;min-width:0;display:block;padding:0;background:none;border:0;box-shadow:none;transform:translate(-50%,-50%) scale(var(--enemy-scale));transform-origin:center bottom;transition:opacity .18s,filter .18s}
 .game-page-v3 .enemy-card.target{border:0;box-shadow:none}.game-page-v3 .enemy-card.target:before{left:50%;top:-7px;transform:translateX(-50%);padding:2px 5px;color:#2a210c;background:#f3c95e;border-radius:3px;white-space:nowrap}
 .game-page-v3 .enemy-card.boss{width:132px;background:none;border:0;box-shadow:none;transform:translate(-50%,-50%) scale(calc(var(--enemy-scale) * 1.25))}.game-page-v3 .enemy-card.boss:after{top:-8px}
 .game-page-v3 .enemy-sprite{width:86px;min-width:0;height:60px;display:grid;place-items:end center}.game-page-v3 .enemy-sprite img{width:auto;max-width:82px;height:auto;max-height:58px;image-rendering:pixelated;filter:drop-shadow(0 8px 5px rgba(0,0,0,.55))}
 .game-page-v3 .enemy-meta{position:relative;width:82px;padding:1px 2px 3px;background:transparent;text-align:center;text-shadow:0 1px 3px #000,0 1px 6px #000}
 .game-page-v3 .enemy-meta>span{font-size:6px}.game-page-v3 .enemy-meta strong{font-size:8px}.game-page-v3 .enemy-meta small,.game-page-v3 .behavior-tag{display:none}.game-page-v3 .enemy-hp{width:48px;height:3px;margin:3px auto 0;background:rgba(22,26,29,.82)}
 .game-page-v3 .enemy-card.aggressive .enemy-hp{box-shadow:0 0 0 1px rgba(183,80,78,.55)}.game-page-v3 .enemy-card.passive .enemy-hp{box-shadow:0 0 0 1px rgba(88,123,107,.5)}
}
@media(max-width:900px){.game-page-v3 .battle-half{height:760px;min-height:760px}.game-page-v3 .battlefield{position:absolute;inset:110px 8px 160px 8px;display:block}.game-page-v3 .battle-player{position:absolute;z-index:40;left:2%;bottom:0;width:88px;height:130px;padding:0}.game-page-v3 .enemy-field{position:absolute;inset:0 0 8% 22%;display:block;height:auto;padding:0}.game-page-v3 .enemy-card{position:absolute;z-index:var(--enemy-z);left:var(--enemy-x);top:var(--enemy-y);width:52px;min-width:0;display:block;padding:0;background:none;border:0;transform:translate(-50%,-50%) scale(calc(var(--enemy-scale) * .72));transform-origin:center bottom}.game-page-v3 .enemy-sprite{width:52px;min-width:0;height:44px}.game-page-v3 .enemy-sprite img{max-width:50px;max-height:43px;image-rendering:pixelated}.game-page-v3 .enemy-meta{width:54px;padding:0;background:transparent;text-align:center;text-shadow:0 1px 4px #000}.game-page-v3 .enemy-meta>span,.game-page-v3 .enemy-meta small,.game-page-v3 .behavior-tag{display:none}.game-page-v3 .enemy-meta strong{font-size:6px}.game-page-v3 .enemy-hp{width:34px;height:2px;margin:2px auto 0}.game-page-v3 .battle-player-card{background:transparent;border:0}.game-page-v3 .character-source-frame--battle{width:58px;height:92px}}

/* v16 — separate entry/character flow, safe-area monster roaming, compact top hotbar and horizontal log */
.entry-page{min-height:100svh;display:grid;place-items:center;overflow:hidden;background:linear-gradient(rgba(3,7,9,.32),rgba(3,7,9,.62)),url("assets/backgrounds/field-wilderness-v1.png") center/cover no-repeat}
.entry-page>:not(.entry-start){display:none!important}
.entry-start{min-width:220px;padding:18px 34px;color:#201a0d;background:linear-gradient(180deg,#f2d783,#c7a34e);border:1px solid #ffe9a6;box-shadow:0 0 0 6px rgba(20,16,8,.62),0 18px 55px rgba(0,0,0,.62);font:900 18px "Noto Serif TC";letter-spacing:.18em;text-align:center;text-decoration:none;transition:transform .18s,filter .18s}
.entry-start:hover,.entry-start:focus-visible{filter:brightness(1.08);transform:translateY(-2px)}

.character-select-page{min-height:100svh;margin:0;color:#eee7d9;background:linear-gradient(rgba(6,10,14,.72),rgba(6,10,14,.9)),url("assets/backgrounds/field-wilderness-v1.png") center/cover fixed no-repeat;font-family:"Noto Sans TC",sans-serif}
.character-select-shell{width:min(920px,calc(100% - 32px));margin:0 auto;padding:44px 0}
.character-select-shell>header{display:flex;align-items:flex-start;gap:28px;margin-bottom:22px}.character-select-shell>header>a{margin-top:8px;color:#d9c586;text-decoration:none}.character-select-shell>header small,.character-create form>small,.saved-character small{color:#cdb367;font-size:11px;letter-spacing:.2em}.character-select-shell h1,.character-select-shell h2{margin:3px 0;font-family:"Noto Serif TC"}.character-select-shell h1{font-size:34px}
.character-slot,.character-create{min-height:390px;padding:28px;background:rgba(9,14,20,.93);border:1px solid #73623f;box-shadow:0 22px 70px rgba(0,0,0,.55)}
.empty-character-slot{min-height:334px;display:grid;place-items:center;align-content:center;text-align:center}.empty-character-slot>span{width:88px;height:88px;display:grid;place-items:center;color:#cdb367;border:1px dashed #746743;border-radius:50%;font-size:42px}.empty-character-slot h2{font-size:26px}.empty-character-slot p,.character-create p,.saved-character p{color:#9ca5ad;font-size:13px}
.select-primary,.select-secondary{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid #c6a952;font-weight:900;text-decoration:none;cursor:pointer}.select-primary{color:#17130a;background:#d7bb69}.select-secondary{color:#d7c893;background:#171e26}
.character-create{display:grid;grid-template-columns:320px 1fr;gap:34px}.character-create[hidden]{display:none!important}.create-character-visual{min-height:330px;display:grid;place-items:center;background:radial-gradient(circle,#293641,#111821 70%);border:1px solid #354352}.create-character-visual img{max-width:210px;max-height:310px;object-fit:contain;image-rendering:pixelated}.character-create form{align-self:center}.character-create form h2{font-size:28px}.character-create label{display:grid;gap:8px;margin:22px 0;color:#d9d2c5;font-size:13px}.character-create input{padding:13px;color:#fff;background:#0d131a;border:1px solid #445160;font:700 15px inherit}.character-create fieldset{display:flex;gap:8px;margin:0 0 18px;padding:12px;border:1px solid #394653}.character-create legend{padding:0 6px;color:#9ca7b0;font-size:11px}.character-create fieldset button{flex:1;padding:10px;color:#cbd2d7;background:#131b24;border:1px solid #3c4855}.character-create fieldset button[aria-pressed="true"]{color:#1b160b;background:#d2b65f;border-color:#f0d581}.character-create form>div{display:flex;justify-content:flex-end;gap:9px}.character-select-status{min-height:24px;color:#e6ca73;text-align:center}
.saved-character{min-height:334px;display:grid;grid-template-columns:230px 1fr auto;align-items:center;gap:28px}.saved-character-portrait{height:280px;display:grid;place-items:center;background:radial-gradient(circle,#293641,#111821 70%);border:1px solid #354352}.saved-character-portrait img{max-width:190px;max-height:250px;object-fit:contain;image-rendering:pixelated}.saved-character h2{font-size:36px}.saved-character-actions{display:grid;gap:10px}

.game-page-v3 .enemy-card{transition:left var(--enemy-duration,3200ms) ease-in-out,top var(--enemy-duration,3200ms) ease-in-out,opacity .18s,filter .18s}
.game-page-v3.reduce-motion .enemy-card{transition:none!important}
@media(min-width:901px){
 .game-page-v3 .battlefield{inset:132px 18px 150px 250px}
 .game-page-v3 .battle-player{left:7%;bottom:2%;width:125px;height:158px}
 .game-page-v3 .character-source-frame--battle{width:76px;height:116px}
 .game-page-v3 .character-source-frame--battle img{width:auto;height:auto;max-width:76px;max-height:116px;object-fit:contain;image-rendering:pixelated}
 .game-page-v3 .enemy-sprite{width:78px;height:66px}.game-page-v3 .enemy-sprite img{width:auto;height:auto;max-width:74px;max-height:64px;object-fit:contain}
 .game-page-v3 .battle-backdrop>.quick-combat{position:absolute;z-index:9;top:72px;bottom:auto;left:54%;width:min(650px,calc(100vw - 760px));min-width:540px;margin:0;background:rgba(8,12,16,.88);border:1px solid #655f4f;box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateX(-50%);pointer-events:auto}
 .game-page-v3 .battle-backdrop>.quick-combat .combat-cards{grid-template-columns:minmax(170px,2fr) repeat(4,1fr)}
 .game-page-v3 .battle-backdrop>.quick-combat .skill-card{min-height:54px}
 .game-page-v3 .battle-controls{bottom:126px}
 .game-page-v3 .character-panel>.character-log{left:350px;right:380px;bottom:16px;width:auto;height:96px;min-height:0;padding:9px 13px}
 .game-page-v3 .character-panel>.character-log #battleLog{height:57px;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 18px}
 .game-page-v3 .character-panel>.character-log #battleLog li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(min-width:901px) and (max-width:1250px){.game-page-v3 .battle-backdrop>.quick-combat{left:58%;width:520px;min-width:520px}.game-page-v3 .character-panel>.character-log{left:318px;right:325px}.game-page-v3 .battlefield{top:138px}}
@media(max-width:900px){.game-page-v3 .battle-backdrop>.quick-combat{position:absolute;z-index:9;left:8px;right:8px;bottom:72px;margin:0;background:rgba(8,12,16,.9)}.game-page-v3 .battle-backdrop>.quick-combat .combat-cards{grid-template-columns:minmax(145px,2fr) repeat(2,1fr)}.game-page-v3 .battle-backdrop>.quick-combat .combat-stat:nth-of-type(4),.game-page-v3 .battle-backdrop>.quick-combat .combat-stat:nth-of-type(5){display:none}.character-select-shell{padding:20px 0}.character-create,.saved-character{display:block}.create-character-visual,.saved-character-portrait{height:220px;min-height:0;margin-bottom:20px}.create-character-visual img,.saved-character-portrait img{max-height:200px}.saved-character-actions{margin-top:22px}.character-slot,.character-create{padding:18px}}

/* v17 — visible safe-area roaming and target-facing character motion */
.game-page-v3 .enemy-card{transition:left var(--enemy-duration,2200ms) linear,top var(--enemy-duration,2200ms) linear,opacity .18s,filter .18s}
.game-page-v3 #fighterGlyph{transform-origin:center bottom;transition:transform .16s ease}
.game-page-v3 #fighterGlyph.facing-left{transform:scaleX(-1)}
.game-page-v3 #fighterGlyph.facing-right{transform:scaleX(1)}
.game-page-v3 .battle-stage.walking #fighterImage{animation:roWalkFacing .62s ease-in-out infinite!important}
.game-page-v3 .battle-stage.strike #fighterImage{animation:roAttackFacing .52s cubic-bezier(.2,.8,.2,1)!important}
.game-page-v3 .battle-stage.cast #fighterImage{animation:roCastFacing .72s ease!important}
@keyframes roWalkFacing{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes roAttackFacing{0%,100%{transform:translateX(0) scale(1)}45%{transform:translateX(22px) scale(1.06)}}
@keyframes roCastFacing{0%,100%{transform:translateY(0) scale(1);filter:none}45%{transform:translateY(-10px) scale(1.06);filter:brightness(1.25) drop-shadow(0 0 12px #f2cf79)}}
.game-page-v3.reduce-motion #fighterImage{animation:none!important}

/* v19 — point-and-click movement, stable character scale and responsive HUD */
.game-page-v3 #battlefield{cursor:crosshair;touch-action:manipulation}
.game-page-v3 .move-marker{position:absolute;z-index:125;width:28px;height:14px;border:2px solid rgba(255,225,123,.92);border-radius:50%;box-shadow:0 0 0 4px rgba(244,198,82,.2),0 0 18px rgba(255,222,112,.75);opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
.game-page-v3 .move-marker:after{content:"";position:absolute;inset:3px 8px;border-radius:50%;background:rgba(255,233,155,.82)}
.game-page-v3 .move-marker.show{animation:moveMarkerPulse .75s ease-out}
.game-page-v3 .move-marker.blocked{border-color:#e36d66;box-shadow:0 0 0 4px rgba(183,58,55,.2),0 0 18px rgba(227,74,68,.72)}
.game-page-v3 .move-hint{position:absolute;z-index:11;top:132px;left:50%;padding:5px 11px;color:#e8dbb7;background:rgba(8,12,16,.72);border:1px solid rgba(191,164,94,.45);border-radius:2px;font-size:8px;letter-spacing:.08em;pointer-events:none;transform:translateX(-50%)}
.game-page-v3 #battleStage.player-moving #fighterImage{animation:roWalkFacing .62s ease-in-out infinite!important}
@keyframes moveMarkerPulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@media(min-width:901px){
 .game-page-v3 .battle-player{left:var(--player-x,24%);top:var(--player-y,76%);bottom:auto;width:125px;height:158px;align-items:flex-end;transform:translate(-50%,-78%);transform-origin:center bottom;transition:left .14s linear,top .14s linear}
 .game-page-v3 .character-source-frame--battle{width:76px;height:116px}
}
@media(min-width:901px) and (max-width:1250px){
 .game-page-v3 .battle-player{width:112px;height:146px}
 .game-page-v3 .character-source-frame--battle{width:70px;height:106px}
 .game-page-v3 .move-hint{top:140px}
}
@media(max-width:900px){
 .game-page-v3 .battle-player{left:var(--player-x,24%);top:var(--player-y,76%);bottom:auto;width:88px;height:130px;align-items:flex-end;transform:translate(-50%,-78%);transform-origin:center bottom;transition:left .14s linear,top .14s linear}
 .game-page-v3 .move-hint{top:88px;max-width:220px;text-align:center}
}
@media(max-width:560px){
 .game-page-v3 .battle-player{width:76px;height:112px}
 .game-page-v3 .character-source-frame--battle{width:52px;height:82px}
 .game-page-v3 .move-hint{display:none}
}

/* v20 — compact desktop labels prevent title and avatar overlap */
@media(min-width:901px){
 .game-page-v3 .battle-player-card>div:last-child{position:absolute;left:50%;bottom:-16px;min-width:96px;text-align:center;white-space:nowrap;transform:translateX(-50%)}
 .game-page-v3 .battle-player-card>div:last-child small{display:none}
 .game-page-v3 .battle-player-card>div:last-child strong{font-size:11px;line-height:1.2}
}
@media(min-width:901px) and (max-width:1400px){
 .game-page-v3 .battle-topline>div:first-child{max-width:300px;min-width:0}
 .game-page-v3 .battle-topline h1{overflow:hidden;max-width:100%;font-size:22px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
 .game-page-v3 .battle-topline .map-code{font-size:7px}
}

/* v21 — keep the upper hotbar clear of long map titles */
@media(min-width:901px){
 .game-page-v3 .battle-backdrop>.quick-combat{top:96px}
 .game-page-v3 .move-hint{top:164px}
}

/* Character action files contain transparent multi-frame animation. */
.game-page-v3 #battleStage.player-moving #fighterImage,.game-page-v3 .battle-stage.walking #fighterImage{animation:none!important}

/* Step timing follows movement.json; sprite files provide the animation. */
.game-page-v3 #battlePlayer{transition:left var(--player-step-duration,150ms) linear,top var(--player-step-duration,150ms) linear}
.game-page-v3 #fighterGlyph{transition:none}
.game-page-v3 #battleStage #fighterImage{animation:none!important;transform:none}