:root{font-family:'Noto Sans TC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#101822;color:#e7e9e4;font-synthesis:none;--bg:#101822;--panel:#1a2531;--panel-light:#202f3c;--line:#31414c;--muted:#95a5ab;--gold:#e6c385;--green:#69d0ac;--red:#e68589}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -200px,#233948 0,transparent 590px),#101822;font-size:14px}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.43}button:focus-visible{outline:2px solid #eecf89;outline-offset:3px}#app{min-height:100vh}.shell{max-width:1500px;margin:auto;padding:0 34px}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #34414a;gap:24px}.brand{display:flex;align-items:center;gap:15px}.logo{display:grid;place-items:center;flex:none;height:54px;width:54px;border-radius:13px;background:linear-gradient(145deg,#35544e,#1a2d37);box-shadow:inset 0 0 0 1px #5f7e71;color:#ead09f;font-size:35px}.brand-title{font-family:Georgia,'Noto Sans TC',serif;font-size:24px;font-weight:800;color:#f5f0e4;letter-spacing:.09em;line-height:1.25}.brand-title span{font:700 10px system-ui;letter-spacing:.16em;color:#deb87e;vertical-align:3px;margin-left:7px}.brand-sub{font-size:10px;color:#7e9c9a;letter-spacing:.22em;margin-top:5px}.mini-version{border-left:1px solid #47645e;padding-left:13px;margin-left:9px;color:#bf9d68}.top-metrics{display:flex;gap:24px;align-items:center;color:#aeb9b7;white-space:nowrap;font-size:13px}.top-metrics span{background:#1b2832;border:1px solid #34434c;padding:11px 15px;border-radius:10px}.top-metrics span:first-letter{color:#d7b47c}.top-metrics b{color:#f5eddf;font-size:15px}.layout{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(390px,1fr);gap:26px;padding-top:29px}.left-column,.right-column{min-width:0}.section-head{display:flex;justify-content:space-between;align-items:center;padding:2px 0 22px}.eyebrow{margin:0 0 7px;font-weight:700;letter-spacing:.2em;font-size:10px;color:#8da39e}.section-head h1{font-size:30px;line-height:1.1;letter-spacing:.1em;margin:0;color:#f1f1e7}.region-sub{color:#a4b2ad;margin:9px 0 0;font-size:13px}.activity{display:flex;align-items:center;gap:8px;color:#9be1b7;background:#1d3836;border:1px solid #315c4a;padding:9px 13px;border-radius:25px;font-weight:600;font-size:12px;white-space:nowrap}.activity i,.dot{display:inline-block;border-radius:50%;background:#7ce7a8;box-shadow:0 0 0 4px #70dd9f1a;width:7px;height:7px}.activity.paused{color:#d9b481;background:#3a3328;border-color:#6b5440}.activity.paused i{background:#d9b481}.canvas-box{position:relative;border:1px solid #4e665f;border-radius:16px;overflow:hidden;background:#234439;box-shadow:0 15px 55px #0005,inset 0 0 0 5px #192630}canvas{width:100%;height:auto;display:block;aspect-ratio:960/528;image-rendering:pixelated}.map-bottom{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;gap:10px;color:#e4e9df;text-shadow:0 1px 3px #06141d;background:#0d1a25a8;border-radius:8px;padding:9px 12px;font-size:11px;letter-spacing:.03em}.map-bottom .dot{width:6px;height:6px;margin-right:5px}.controls{display:grid;grid-template-columns:1.25fr .95fr 1.15fr 1.1fr;gap:10px;margin:16px 0 23px}.controls button{height:49px;border-radius:11px;border:1px solid #40525c;background:#22313e;color:#eff2e9;font-size:13px;font-weight:700;white-space:nowrap;transition:transform .15s ease,filter .15s ease}.controls button:hover:not(:disabled),.mini-button:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}.controls .primary-btn{background:#7bc9aa;color:#122a2a;border-color:#9bd5b9}.controls .boss-btn{border-color:#917453;background:linear-gradient(125deg,#69553a,#41382f);color:#ffe2a1}.controls .boss-btn:not(:disabled){box-shadow:0 0 18px #bd99554f}.controls b{background:#354553;border-radius:5px;padding:2px 5px}.panel{background:linear-gradient(165deg,#1e2b38 0%,#1a2531 100%);border:1px solid #344651;border-radius:16px;box-shadow:0 10px 32px #09131e29}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 21px 13px;border-bottom:1px solid #31424d}.panel-head>div{display:flex;align-items:center;gap:10px}.panel-symbol{font-size:21px;color:#e7c18b}.panel-head h2{font-size:16px;letter-spacing:.07em;margin:0}.muted-small{font-size:10px;letter-spacing:.15em;color:#7e979b}.logs{padding:8px 21px 15px;min-height:219px}.log-entry{padding:8px 0;border-bottom:1px solid #ffffff0c;color:#c5d0d0;font-size:12px;display:flex;gap:15px;line-height:1.65}.log-entry:last-child{border-bottom:0}.log-time{font-size:11px;color:#82969c;flex:none}.log-loot{color:#c6e7b7}.log-danger{color:#f0a4a7}.log-milestone{color:#f3d39c}.character-summary{padding:21px 23px 22px}.summary-top{display:flex;align-items:center;gap:15px;margin-bottom:21px}.avatar{height:62px;width:62px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:39px;color:#e8cb8b;background:linear-gradient(130deg,#56725d,#2b434b);border:1px solid #77927d}.sub-label{font-size:10px;font-weight:700;color:#7da19f;letter-spacing:.18em}.summary-top h2{font-size:20px;margin:4px 0 6px;color:#f4f0e6;letter-spacing:.04em}.summary-top h2 span{display:inline-block;vertical-align:3px;padding:3px 6px;border-radius:5px;font:800 10px system-ui;background:#5f513a;color:#f2d19a}.class-label{color:#c2d2c6;font-size:12px}.meter-label{display:flex;justify-content:space-between;align-items:center;margin:13px 0 7px;color:#c9d2d0;font-size:12px}.meter-label b{color:#f2f0e7;font-weight:700;margin-left:7px}.meter-label>span:last-child{font-size:11px;color:#a8bbb8}.meter-track{height:10px;background:#101e29;border-radius:10px;border:1px solid #314350;overflow:hidden}.meter{height:100%;border-radius:10px;transition:width .18s ease}.hp-meter{background:linear-gradient(90deg,#459b7e,#7fdbb1)}.xp-meter{background:linear-gradient(90deg,#698ab3,#95c7ed)}.gold-meter{background:linear-gradient(90deg,#a87942,#edc985)}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:23px}.stats>div{background:#162530;border:1px solid #344653;border-radius:10px;padding:13px 6px;text-align:center}.stats span{display:block;color:#b1bdba;font-size:11px;margin-bottom:5px;white-space:nowrap}.stats b{font-size:19px;color:#f1ebdc;font-variant-numeric:tabular-nums}.content-panel{margin-top:18px;overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid #3a4a54;padding:6px 12px 0;gap:2px}.tabs button{background:none;border:0;color:#9eb0b2;border-bottom:2px solid transparent;height:45px;padding:0 3px;font-weight:700;font-size:12px}.tabs button.selected{color:#f0d59c;border-bottom-color:#e1b879}.tabs button:hover{color:#fff}.tab-content{padding:22px;min-height:314px}.inside-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px}.inside-title h3{font-size:16px;margin:0;color:#f1eee3}.inside-title>span{color:#8fa5a9;font-size:11px;text-align:right}.inside-title .points{color:#f2d093;font-weight:700}.gear-slot{display:flex;align-items:center;padding:10px 11px;background:#172632;border:1px solid #354652;border-radius:10px;margin-bottom:9px;min-width:0;gap:12px}.gear-slot.empty{border-style:dashed}.gear-icon{flex:none;width:43px;height:43px;border:1px solid #657b73;border-radius:9px;display:grid;place-items:center;background:#2e4c49;color:#cde8cf;font-size:25px}.gear-icon.rarity-common{background:#33424b;border-color:#60717b;color:#d5e2df}.gear-icon.rarity-rare{background:#263f58;border-color:#5b92b8;color:#aad5ff}.gear-icon.rarity-epic{background:#483952;border-color:#9e77ba;color:#dbb3ff}.gear-icon.rarity-legend{background:#5c472a;border-color:#bd9960;color:#f9d18a}.rarity-text-common{color:#bbc9cf}.rarity-text-rare{color:#95c9f3}.rarity-text-epic{color:#dbb1ff}.rarity-text-legend{color:#ffd18a}.gear-detail{flex:1;min-width:0}.slot-name{display:block;color:#8fa4af;font-size:10px;margin-bottom:5px}.gear-detail strong{display:block;font-size:13px;color:#f0ece5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gear-detail>small{display:block;color:#9baaaa;font-size:10px;margin-top:5px}.mini-button{background:#2b3d48;border:1px solid #4b6068;border-radius:8px;color:#e1e9e5;padding:8px 10px;font-size:11px;white-space:nowrap;font-weight:700}.mini-button.accent{background:#335d54;border-color:#4a8976;color:#d8f5dd}.inside-note{font-size:11px;color:#92ada6;line-height:1.9;padding:13px 14px;margin-top:17px;background:#162b33;border-radius:8px;border-left:2px solid #5da990}.empty-state{text-align:center;padding:46px 18px;color:#8ea4ad}.empty-state>div{font-size:38px;color:#d4c091}.empty-state h4{font-size:15px;color:#d9e3dc;margin:9px 0 7px}.empty-state p{line-height:1.8;font-size:12px}.inventory-list{max-height:333px;overflow:auto;padding-right:2px}.inventory-item{display:flex;align-items:center;gap:9px;border:1px solid #344652;background:#172632;border-radius:10px;padding:10px;margin-bottom:8px}.item-actions{display:flex;gap:5px;flex-direction:column}.talent-row,.recipe{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid #34434c}.talent-icon,.recipe-icon{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#304c4b;color:#e3d6a4;font-size:24px}.talent-detail,.recipe>div:nth-child(2){flex:1}.talent-detail strong,.recipe strong{display:block;font-size:13px;color:#ecf0e6}.talent-detail strong span{font-size:11px;color:#e8c58c;padding-left:5px}.talent-detail small,.recipe small{display:block;color:#97abb0;font-size:11px;line-height:1.5;margin-top:5px}.materials{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:7px}.materials span{font-size:11px;border:1px solid #435359;background:#1a313a;padding:8px 9px;border-radius:7px;color:#bfc8c5}.materials b{color:#f4dca6;margin-left:3px}.journey{display:grid;gap:6px}.journey-node{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid #344650;background:#172733;border-radius:10px;opacity:.6}.journey-node.here{opacity:1;border-color:#729a7a;background:#24413c}.journey-circle{width:38px;height:38px;flex:none;border-radius:50%;background:#29433d;display:grid;place-items:center;color:#eccd92;font-size:19px}.journey-node>div{flex:1}.journey-node strong{display:block;font-size:13px}.journey-node small{display:block;color:#a5b6b5;font-size:10px;margin-top:4px}.journey-node>b{font-size:10px;color:#b2e6c4;white-space:nowrap}.area-progress{margin-top:22px}.setting-row{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 3px;border:0;border-bottom:1px solid #34434c;background:transparent;color:inherit}.setting-row strong{display:block;font-size:13px}.setting-row small{display:block;margin-top:6px;font-size:11px;color:#95acb2}.toggle-chip{font-size:11px;white-space:nowrap;background:#33404d;border:1px solid #475968;border-radius:14px;padding:5px 9px;color:#bdc8c8}.toggle-chip.on{color:#a8eed2;background:#214a40;border-color:#427b69}.reset-button{background:#432a32;color:#efaaac;border:1px solid #82505a;border-radius:8px;width:100%;padding:13px;margin-top:23px;font-size:12px;font-weight:700}.disclaimer{font-size:10px;line-height:1.8;text-align:center;color:#799095;margin:16px 0}footer{border-top:1px solid #34414a;margin:30px 0 0;padding:19px 0 28px;text-align:center;color:#70888b;letter-spacing:.16em;font-size:10px}footer span{color:#bd9769;margin:0 8px}
@media(max-width:1100px){.shell{padding:0 20px}.layout{gap:16px;grid-template-columns:minmax(0,1.2fr) minmax(345px,1fr)}.brand-title{font-size:20px}.top-metrics{gap:8px}.top-metrics span{padding:9px}.controls{grid-template-columns:repeat(2,1fr)}.top-region{display:none}.tab-content{padding:15px}.character-summary{padding:19px}.tabs{padding-left:5px;padding-right:5px}.tabs button{font-size:11px}}
@media(max-width:780px){.shell{padding:0 15px}.layout{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:20px}.topbar{height:80px}.brand-title{font-size:19px}.logo{height:46px;width:46px;font-size:29px}.top-metrics span{padding:8px}.top-metrics span:last-child{display:none}.section-head h1{font-size:25px}.section-head{padding-bottom:16px}.character-summary{padding:20px}.right-column{display:flex;flex-direction:column}.right-column .character-summary{order:0}.right-column .content-panel{order:1}.disclaimer{order:2}.canvas-box{border-radius:13px}.controls{grid-template-columns:1fr 1fr;margin:12px 0 17px}.controls button{height:46px}.log-panel .logs{min-height:175px}.log-entry:nth-child(n+5){display:none}}
@media(max-width:420px){.shell{padding:0 10px}.topbar{gap:10px}.brand{gap:8px}.brand-title{font-size:17px}.brand-title span{display:none}.brand-sub{font-size:8px;letter-spacing:.08em}.mini-version{display:none}.logo{height:42px;width:42px}.top-metrics span{font-size:11px;padding:6px}.top-metrics span:nth-child(n+2){display:none}.top-metrics b{font-size:12px}.section-head h1{font-size:22px}.region-sub{font-size:11px}.activity{font-size:10px;padding:7px}.map-bottom{bottom:7px;left:7px;right:7px;padding:5px 8px;font-size:9px}.controls{gap:7px}.controls button{font-size:11px;padding:0 5px;height:42px}.tab-content{padding:13px}.tabs button{font-size:10px;height:42px}.gear-slot{gap:8px;padding:9px 7px}.gear-detail>small{font-size:9px}.mini-button{padding:6px;font-size:10px}.gear-icon{width:36px;height:36px}.character-summary{padding:16px}.stats b{font-size:16px}.panel-head{padding:12px}.logs{padding:8px 12px}.log-entry{font-size:11px}.summary-top h2{font-size:17px}}

/* v0.2 · 像素技能列 / 職業選擇 / 圖鑑 */
:root {--mage:#b7a8ff;--ranger:#f5ca78}
.mini-version{color:#eacb96}
.skillbar{margin:14px 0 0;padding:12px 14px 14px;border:1px solid #3b514c;background:linear-gradient(110deg,#203331,#1c2835);border-radius:13px}
.skillbar-title{display:flex;align-items:center;justify-content:space-between;color:#e8d7af;letter-spacing:.06em;font-weight:700;font-size:11px;margin:0 0 10px}.skillbar-title span:last-child{color:#91ccb2;font-size:10px;letter-spacing:0}
.skill-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skill-btn{--cooldown:0%;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;min-width:0;text-align:left;background:linear-gradient(to top,#0a142077 0 var(--cooldown),transparent var(--cooldown) 100%),#273946;border:1px solid #567368;color:#eff1e9;border-radius:10px;padding:10px 12px;min-height:66px;transition:border-color .2s,transform .18s}.skill-btn:not(:disabled):hover{transform:translateY(-2px);border-color:#b5d9bb}.skill-btn:disabled{opacity:.7}.skill-btn:disabled .skill-status{color:#cfb2a0}.skill-icon{font-size:25px;flex:none;display:grid;place-items:center;width:40px;height:40px;background:#3b594f;border:1px solid #648979;border-radius:8px;color:#f5d995}.skill-info{min-width:0;flex:1}.skill-info strong{display:block;font-size:13px;color:#f2ecdf}.skill-info small{display:block;margin-top:4px;font-size:10px;line-height:1.4;color:#b7c5c0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skill-status{flex:none;color:#9be9bf;font:800 11px monospace}
.controls{margin-top:11px}.mp-meter{background:linear-gradient(90deg,#7469b6,#bc9bf6)}.avatar{font-family:serif}
.current-job{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:14px;padding:15px;border:1px solid #4b7061;border-radius:10px;background:#233b37}.current-job strong,.current-job small{display:block}.current-job strong{color:#eddfbc;font-size:13px}.current-job small{font-size:11px;color:#aacac1;margin-top:5px}
.codex-list{display:grid;gap:8px;max-height:420px;overflow:auto;padding-right:4px}.codex-item{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #35505b;border-radius:9px;background:#192a36}.codex-item.undiscovered{opacity:.55}.codex-icon{height:43px;width:43px;flex:none;background:#3b5e55;color:#c4ffd7;border:1px solid #618c75;border-radius:9px;display:grid;place-items:center;font-size:25px}.codex-icon.wolf{background:#664d48;color:#ecc198}.codex-icon.wisp{background:#4d547b;color:#d5d4ff}.codex-icon.boss{background:#765646;color:#f2c385}.codex-content{flex:1;min-width:0}.codex-content strong{font-size:12px;color:#f4eedd}.codex-content small{display:block;font-size:10px;color:#9eb5b8;margin-top:5px}.codex-count{text-align:right;white-space:nowrap;color:#94abb3;font-size:10px}.codex-count span,.codex-count b{display:block}.codex-count b{margin-top:7px;color:#e7c58f;font-weight:600}
.job-modal[hidden]{display:none!important}.job-modal{position:fixed;inset:0;z-index:50;background:#07131cdb;backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;overflow:auto}.job-window{background:linear-gradient(135deg,#24394a,#151e2c);border:1px solid #6f897b;box-shadow:0 40px 110px #0009;border-radius:19px;width:min(870px,100%);padding:28px 29px}.job-window h2{margin:4px 0 9px;color:#f6e6c5;font-size:27px;letter-spacing:.06em}.job-intro{font-size:13px;color:#bed0cb;line-height:1.9;margin:0 0 24px}.job-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.job-card{display:flex;align-items:center;flex-direction:column;text-align:center;gap:10px;padding:22px 14px 17px;min-height:255px;color:#e9f0e7;background:linear-gradient(145deg,#2e4d48,#1e303e);border:1px solid #5a8475;border-radius:14px;transition:transform .18s,border-color .18s,box-shadow .18s}.job-card:hover{transform:translateY(-4px);border-color:#cae6b6;box-shadow:0 9px 20px #0005}.job-card.job-ranger{background:linear-gradient(145deg,#564c39,#2c3441);border-color:#8c7451}.job-card.job-mage{background:linear-gradient(145deg,#48476d,#29334c);border-color:#7471aa}.job-glyph{height:65px;width:65px;border:2px solid #c1dbbc;background:#203d3a;display:grid;place-items:center;font-size:41px;border-radius:13px;text-shadow:0 3px 10px #000a}.job-ranger .job-glyph{color:#f5d899;background:#473d30;border-color:#bfa06b}.job-mage .job-glyph{color:#dac8ff;background:#39345e;border-color:#9c8ed9}.job-card strong{font-size:19px}.job-card small{font-size:12px;color:#b4c9c7}.job-card>span:not(.job-glyph){font-size:12px;line-height:1.8;color:#d0d7cc;min-height:48px}.job-card em{font-style:normal;color:#f9dea1;font-weight:700;font-size:12px;margin-top:auto}.job-footnote{text-align:center;font-size:11px;color:#91a69f;margin:23px 0 0}.job-close{border:1px solid #6e8c83;padding:9px 16px;border-radius:9px;background:#34414e;color:#e3f4e8;display:block;margin:14px auto 0}
.tabs{grid-template-columns:repeat(7,minmax(0,1fr))}
@media(max-width:780px){.skillbar{margin-top:10px}.job-window{padding:22px 17px}.job-card{min-height:234px}}
@media(max-width:560px){.job-grid{grid-template-columns:1fr;gap:8px}.job-card{min-height:0;display:grid;grid-template-columns:58px 1fr;grid-template-rows:repeat(4,auto);column-gap:14px;gap:3px;text-align:left;padding:11px}.job-glyph{grid-row:1/5;width:54px;height:62px;font-size:29px}.job-card strong{font-size:15px}.job-card small{font-size:10px}.job-card>span:not(.job-glyph){min-height:0;font-size:10px}.job-card em{font-size:10px}.job-window h2{font-size:22px}.job-intro{font-size:11px;margin-bottom:13px}.job-footnote{margin-top:12px}.skillbar{padding:10px}.skill-buttons{gap:6px}.skill-btn{gap:6px;padding:7px;min-height:58px}.skill-icon{font-size:18px;width:32px;height:36px}.skill-info strong{font-size:11px}.skill-info small{font-size:9px}.skill-status{font-size:9px}.tabs{padding-left:2px;padding-right:2px}.tabs button{font-size:10px}}
@media(max-width:380px){.skill-info small{white-space:normal;max-height:25px}.skill-status{font-size:9px}.job-window{padding:18px 12px}}

.job-close[hidden]{display:none!important}

/* v0.3 · Moonlit Grove visual refresh */
:root {--bg:#0c1620;--panel:#172532;--panel-light:#223743;--line:#3c5559;--gold:#f4cc8c;--green:#84d3b3;--muted:#a7bcbf;}
body{background:radial-gradient(ellipse at 28% -4%,#213a47 0,#101d29 44%,#0c1620 100%);color:#e9f0e9}
.shell{max-width:1470px}
.topbar{border-bottom:1px solid #3c5054}
.brand-title{letter-spacing:.04em}
.brand-title span{color:#91baa9}
.logo{background:#263f46;border:1px solid #8abfa8;color:#f3d59a;box-shadow:inset 0 0 0 3px #152b35}
.section-head h1{color:#faf0d9}
.eyebrow{color:#9bd0b9}
.region-sub{color:#a3c3bb}
.activity{background:#1d3934;border:1px solid #467a67;color:#b7f0cf}
.activity i{background:#75dda7;box-shadow:0 0 10px #75dda788}
.canvas-box{border:2px solid #65877a;overflow:hidden;box-shadow:0 16px 50px #06121e88, inset 0 0 0 4px #152a34;border-radius:17px;background:#152b35}
.canvas-box canvas{width:100%;height:auto;display:block;aspect-ratio:16/9;image-rendering:pixelated}
.map-bottom{background:#101f2ad9;border:1px solid #76958566;color:#cde2d4;backdrop-filter:blur(4px)}
.skillbar{border:1px solid #507568;background:linear-gradient(120deg,#1e373a,#1a2c38);box-shadow:0 8px 25px #07121b55}
.skill-btn{background:#2a4147;border:1px solid #526e67}
.skill-icon{border-color:#84ad8a;background:#31574a}
.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.controls>*{min-width:0;min-height:49px}
.always-on{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 9px;border:1px solid #6b9779;border-radius:10px;background:linear-gradient(110deg,#275545,#22483f);color:#d0fbe2;font-size:14px;font-weight:800;white-space:nowrap}
.always-on small{display:block;color:#a3dcb9;font-size:10px;font-weight:500}
.status-pulse{display:block;height:10px;width:10px;flex:none;border-radius:50%;background:#a7ffb6;box-shadow:0 0 0 4px #a7ffb620,0 0 12px #a7ffb67b}
.controls .outline-btn{border-color:#547269;background:#213940;color:#e1ede2}
.panel{background:linear-gradient(160deg,#1c2e3a,#172532);border:1px solid #3a5358;box-shadow:0 11px 26px #07121a55}
.character-summary{border-top:3px solid #9bccac}
.tabs button.selected{color:#f6d998;background:#273f43}
.gear-slot,.inventory-item,.codex-item{background:#1d303b;border-color:#39595a}
.current-job{background:#223c3a}
.job-window{background:linear-gradient(145deg,#263e49,#172732);border:1px solid #a1c5a7}
.job-card{background:linear-gradient(145deg,#37524e,#1d343c)}
.job-card:hover{transform:translateY(-2px)}
.job-glyph{border:1px solid #bbd6b2}
.log-entry{border-bottom-color:#354c4d}
.camp-illustration{display:flex;flex-direction:column;gap:9px;justify-content:center;align-items:center;min-height:126px;margin-bottom:13px;padding:17px;border:1px solid #598373;border-radius:12px;background:radial-gradient(ellipse at 50% 20%,#38534c,#263f40 56%,#1b333a)}
.camp-illustration span{font-size:31px;color:#f5d59f}.camp-illustration strong{font-size:15px;color:#f9ead4}.camp-illustration small{color:#bdd3c2;font-size:11px}
.camp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.camp-stats>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:#213841;border:1px solid #466b63;border-radius:9px}
.camp-stats small{font-size:10px;color:#a5c4b6}.camp-stats strong{font-size:23px;color:#f2d6a3;font-variant-numeric:tabular-nums}
@media(max-width:780px){.controls{grid-template-columns:repeat(3,1fr)}.controls>*{min-height:44px}.controls .outline-btn{font-size:11px}}
@media(max-width:420px){.controls{gap:6px}.always-on{font-size:11px;gap:6px;padding:0 5px}.always-on small{font-size:9px}.status-pulse{height:7px;width:7px}}

/* Pixel portraits rather than font glyphs */
.avatar{overflow:hidden;display:grid;place-items:center}
.avatar canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.job-glyph{overflow:hidden}
.job-glyph canvas{width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated}

/* v0.4 handmade art direction: smooth Q-style outlines, restrained UI effects */
.canvas-box canvas,.avatar canvas,.job-glyph canvas{image-rendering:auto}
.canvas-box{border-color:#627c76;box-shadow:0 12px 30px #07141a65}
.panel,.skillbar{box-shadow:none}
.activity i,.status-pulse{box-shadow:none}
.skill-btn,.job-card,.controls button{transition:background-color .15s ease,border-color .15s ease}
.controls button:hover:not(:disabled),.job-card:hover{transform:none}

/* v0.5: illustrated sprite PNGs — antialiasing intentionally ON; no nearest-neighbour pixel grid. */
.canvas-box canvas,.avatar canvas,.job-glyph canvas{image-rendering:auto!important}
.canvas-box{border:1px solid #627e83;background:#263e51;border-radius:12px}
.job-glyph{width:86px;height:94px;border-radius:13px;background:radial-gradient(circle at 30% 30%,#385b65,#243646)!important}
.job-glyph canvas{object-fit:contain!important}
.job-card{min-height:295px;gap:6px}
.skill-btn{border-radius:10px}
.brand-sub .mini-version{color:#d1b890}
@media(max-width:560px){.job-glyph{width:59px;height:68px}.job-card{min-height:0}}

/* v0.6 refined illustration and stage presentation. */
.canvas-box{border-color:#798d97;border-radius:14px;box-shadow:0 12px 34px #040b1890}
.canvas-box canvas,.avatar canvas,.job-glyph canvas{image-rendering:auto!important}
.avatar{background:linear-gradient(140deg,#3b4d6e,#1d2b3e);border-color:#728eac}
.job-card.job-knight .job-glyph{background:linear-gradient(145deg,#5f627e,#242d4a)!important}