/* Aethoria original classic-fantasy skin. Load after the existing game styles. */
:root{--ui-paper:#f7f5ef;--ui-ink:#253448;--ui-muted:#62748a;--ui-line:#a6b6c9;--ui-blue:#426f9b;--ui-gold:#927343;--ui-shadow:0 8px 28px #14243640}
html body{font-family:Tahoma,"Segoe UI",sans-serif;color:var(--ui-ink)}
.panel{background:linear-gradient(135deg,#fffffff5,#eef2f6f5);color:var(--ui-ink);border:1px solid #718ca7;box-shadow:inset 0 0 0 2px #ffffffb0,var(--ui-shadow);border-radius:8px;padding:12px;font-size:13px;image-rendering:auto;scrollbar-color:#9baec1 #e8edf3;scrollbar-width:thin}
.panel h4,#bag h4,#party h4,#iteminfo h4,#status h4,#skills h4,#shop h4,#market h4{color:#294d73;font-size:15px;padding:8px 10px;margin:-10px -10px 12px;background:linear-gradient(#f8fcff,#d7e3ee);border-bottom:1px solid #a8bbcf;border-radius:6px 6px 0 0;text-shadow:0 1px white}
.panel small,.panel .hint,#skills small,.class-card .t span{color:var(--ui-muted);font-size:12px;line-height:1.6}
.panel h4 span,#status h4 span,#skills h4 span{color:#386d62;font-size:12px}
.panel button,#status button,#skills td button,#iteminfo-btns button,.row button,#market-refresh,.class-card button{font:inherit;border:1px solid #8da5bc;border-radius:5px;background:linear-gradient(#fff,#dce7f0);color:#284b70;cursor:pointer;min-height:28px;padding:4px 10px;box-shadow:0 1px 1px #263b4e18}
.panel button:hover{background:linear-gradient(#fff,#c7e3f5);border-color:#527fab}
.panel button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #4496b7;outline-offset:2px}
.panel input,.panel select{font:inherit;color:#253448;background:#fff;border:1px solid #a6b6c9;border-radius:4px;padding:6px}
#status td,#skills td,#iteminfo td,.row{border-color:#d5dfe7;padding:8px 4px;font-size:13px}
#status td.v,#skills td.v{color:#3e6587}
#skills{width:min(450px,calc(100vw - 48px));max-height:calc(100vh - 170px)}
#status{width:250px;max-height:calc(100vh - 170px)}
#skills td button,#status button{width:30px;height:30px;padding:0}
#skills small{max-width:310px}
#status-skills img.skill-icon{width:44px;height:44px;float:left;margin:0 10px 6px 0;image-rendering:pixelated;border-radius:6px;background:#edf2f7;border:1px solid #b8c6d4}
.class-card{padding:10px;gap:12px;background:#f4f6f9;border:1px solid #c1ccd7;border-radius:6px}.class-card.current{background:#e9f3f6;border-color:#6b9cad}.class-card .t b{color:#365477;font-size:13px}.class-card img{width:48px;height:48px}
.slot{background:linear-gradient(#f9fbfc,#dae3eb);border:1px solid #a0b1c3;border-radius:5px;color:#314e6b;box-shadow:inset 0 0 0 1px #ffffffa0}
.slot:hover{border-color:#527fab;background:#e4eff8}.slot .qty{color:#4e4130;text-shadow:0 1px #fff}#equip .slot.empty{color:#83909c}
#skillbar{gap:6px;padding:8px;background:#edf2f4e8}#skillbar .slot{width:48px;height:48px;color:#294d73;font-size:10px;padding-top:10px}#skillbar .slot i{color:#365578;background:#f3f7fbcc;border-radius:2px;padding:0 2px;z-index:2}#skillbar img.skill-icon{width:38px;height:38px;image-rendering:pixelated}#skillbar .slot span.locked{color:#83909c}
#hud{line-height:1.7;text-align:left;min-width:180px}#hud b{color:#846024}#notice{border-radius:6px;background:#fff8e6;color:#865e28;border:1px solid #c4a670}
#chat input{background:#f7fafde8;color:#253448;border:1px solid #a1b5c8;font:14px Tahoma,sans-serif}#keys{color:#c9d5df}
#login{background:radial-gradient(ellipse at top,#354f65e8,#172936f5)}#login .box{background:#f7f5ef;color:#253448;border:1px solid #bccad6;box-shadow:var(--ui-shadow);padding:30px}#login p{color:#64758a}#login input{background:#fff;color:#253448;border:1px solid #b8c6d4}#login button{background:linear-gradient(#7399b7,#41688d);color:#fff}#login-msg{color:#9f4141}
@media(max-width:760px){#skills,#status,#npc,#shop,#market{left:12px;top:55px;transform:none;width:calc(100vw - 48px);max-height:calc(100vh - 180px)}#skillbar .slot{width:36px;height:40px}#skillbar{gap:3px;padding:5px}#skillbar img.skill-icon{width:30px;height:30px}}
/* Legacy renderers set some text colors inline; keep them readable on the paper skin. */
#skills small{color:var(--ui-muted)!important}#skillbar .slot{color:#294d73!important}
/* Shared HUD skin: renderer supplies native progress values from authoritative state. */
#hud{width:320px;max-width:calc(100vw - 24px);min-width:0;line-height:1.65;padding:14px 16px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#hud span[style*="color:#dfe6e9"],#hud span[style*="color:#9aa"]{color:#536579!important}
#hud span[style*="color:#4cd137"]{color:#26713d!important}
#hud span[style*="color:#ff7675"]{color:#b83b49!important}
#hud span[style*="color:#74b9ff"]{color:#28649b!important}
.hud-heading,.hud-meter-label,.hud-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hud-heading{margin-bottom:10px;border-bottom:1px solid #c7d4df;padding-bottom:8px}.hud-heading strong{color:#375473;font-size:15px}
.hud-level{border:1px solid #b3c6d7;border-radius:12px;background:#e5eef5;padding:1px 9px;color:#365777;font-size:12px}
.hud-meter{margin:8px 0}.hud-meter-label{font-size:12px;color:#43566b;margin-bottom:3px}.hud-meter-label b{color:inherit}
.hud-meter progress{display:block;appearance:none;width:100%;height:10px;border:1px solid #a8bacb;border-radius:6px;overflow:hidden;background:#dbe3eb;color:var(--meter-color,#3e8a62)}
.hud-meter progress::-webkit-progress-bar{background:#dbe3eb;box-shadow:inset 0 1px 2px #263b4e20}
.hud-meter progress::-webkit-progress-value{background:linear-gradient(0deg,var(--meter-color,#3e8a62),var(--meter-light,#81ba8d));border-radius:4px}
.hud-meter progress::-moz-progress-bar{background:var(--meter-color,#3e8a62);border-radius:4px}
.hud-meter.sp{--meter-color:#397eb5;--meter-light:#83bfe6}.hud-meter.exp{--meter-color:#9a702e;--meter-light:#dfb964}.hud-meter.exp progress{height:8px}
.hud-meta{margin-top:10px;padding-top:8px;border-top:1px solid #c7d4df;font-size:12px}.hud-location{margin-top:6px;color:#4b6074}.hud-quick{margin-top:8px;padding:7px 9px;background:#e8eef3;border-radius:5px;color:#4b6074;font-size:12px}.hud-quick kbd{font:inherit;font-weight:bold;color:#305b7e;background:#fff;border:1px solid #b5c6d5;border-radius:3px;padding:0 4px}
#keys{background:#152b3dd9;padding:5px 10px;border-radius:5px;color:#edf3f7}#chat input::placeholder{color:#63748a}
/* Compact Aethoria HUD: mist, ivory and muted copper. */
#hud,.royal-hud{width:286px;max-width:calc(100vw - 24px);padding:9px 11px;background:linear-gradient(120deg,#eff3eaf2,#dce8e3f2);border:1px solid #6f9187;border-radius:10px;color:#243e39;box-shadow:inset 0 1px #fff,0 3px 12px #102d3330;font:11px/1.4 Tahoma,sans-serif;font-variant-numeric:tabular-nums;box-sizing:border-box}
#hud[style*="block"],.royal-hud{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 8px}
#hud>*,.royal-hud>*{min-width:0;grid-column:1/-1}
#hud .hud-heading,.royal-hud .hud-heading{margin:0;padding:0 0 3px;border:0}
#hud .hud-heading strong,.royal-hud .hud-heading strong{color:#254e46;font-size:12px}
#hud .hud-level,.royal-hud .hud-level{color:#4b655d;background:#e6ede5;border-color:#b7c8bc;padding:0 6px;font-size:10px}
#hud .hud-meter,.royal-hud .hud-meter{margin:0;--meter-color:#3c7c63;--meter-light:#8fbaa0}
#hud .hud-meter:not(.exp):not(.job),.royal-hud .hud-meter:not(.exp):not(.job){grid-column:auto}
#hud .hud-meter-label,.royal-hud .hud-meter-label{font-size:10px;color:#34514a;margin:0 0 2px;gap:4px;white-space:nowrap}
#hud .hud-meter-label b,.royal-hud .hud-meter-label b{color:inherit}
#hud .hud-meter progress,.royal-hud .hud-meter progress{height:5px;border:0;background:#c4d2ca;border-radius:4px}
#hud progress::-webkit-progress-bar,.royal-hud progress::-webkit-progress-bar{background:#c4d2ca}
#hud .hud-meter.sp,.royal-hud .hud-meter.sp{--meter-color:#527d87;--meter-light:#a0c6cb}
#hud .hud-meter.exp,.royal-hud .hud-meter.exp{--meter-color:#a37452;--meter-light:#d4af84}
#hud .hud-meter.job,.royal-hud .hud-meter.job{--meter-color:#807898;--meter-light:#bdb0cc}
#hud .hud-meta,.royal-hud .hud-meta{margin:2px 0 0;padding:3px 0 0;border-color:#b9cbc1;font-size:10px;color:#52665e}
#hud b,.royal-hud b{color:#6d513c}#hud .hud-location,.royal-hud .hud-location{margin:0;font-size:10px;color:#52665e}
#hud .hud-quick,.royal-hud .hud-quick{margin:0;padding:3px 5px;background:#ffffff50;color:#435d54;font-size:10px}
#hud .hud-quick small,.royal-hud .hud-quick small{display:block;font-size:10px;color:#52665e}
.hud-identity{display:flex;align-items:center;gap:8px}.hud-portrait{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;border:1px solid #92aa9b;border-radius:9px;background:#d2e0d4;flex-shrink:0}.hud-identity strong{color:#254e46;font-size:12px}.hud-identity small{display:block;color:#52665e;font-size:10px}
.hud-buffs{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 0;padding:0}.hud-buff{position:relative;display:block;width:30px;height:35px;padding:1px 1px 9px;border:1px solid #88a798;border-radius:5px;background:#e4ece1;color:#243e39;cursor:help;box-sizing:border-box}.hud-buff img{display:block;width:26px;height:24px;object-fit:contain;image-rendering:pixelated}.hud-buff time{position:absolute;bottom:0;left:0;right:0;text-align:center;font:9px Tahoma,sans-serif;color:#26473d}.hud-buff.expiring{border-color:#b46f52;background:#f1e1d6}.hud-buff:focus-visible{outline:2px solid #3d7563;outline-offset:2px}.hud-buff:hover::after,.hud-buff:focus-visible::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:0;width:160px;padding:7px;background:#f2f4ec;border:1px solid #88a798;border-radius:5px;color:#243e39;font:11px/1.5 Tahoma,sans-serif;z-index:10;pointer-events:none}
.royal-hud details{border-top:1px solid #b9cbc1;padding-top:3px}.royal-hud summary{cursor:pointer;color:#52665e;font-size:10px}.royal-hud details .hud-meta{border:0}/* Live auxiliary panels: same mist/ivory palette as the compact HUD. */
#menubar{background:#e9f0e8ed;border:1px solid #8fa99d;border-radius:9px;box-shadow:0 3px 12px #102d3328}
#menubar button{background:#f1f4ec;color:#36574c;border:1px solid #adc1b4;border-radius:6px;font:10px Tahoma,sans-serif;width:42px;height:42px}
#menubar button b{color:#527568}#menubar button:hover,#menubar button.on{background:#d5e5d8;border-color:#628b78;color:#234d3c}
#minimap{background:#edf2e9ec;border:1px solid #8fa99d;border-radius:8px;color:#36574c}#minimap canvas{border-radius:5px;background:#243f38}#minimap .cap{color:#36574c;padding:2px}
#bag-tabs button{background:#edf2e9;color:#456354;border:1px solid #adc1b4;border-radius:4px;min-height:28px}#bag-tabs button.on{background:#d2e4d4;color:#254b37;border-color:#628b78}#bag .slot.dim{opacity:.38}#bag-count{color:#52665e}
#buffs{gap:5px;margin-top:3px}#buffs .buff{width:36px;height:40px;border:1px solid #88a798;border-radius:5px;background:#e4ece1;color:#26473d;box-shadow:0 1px 4px #142c3320}#buffs .buff img{width:26px;height:26px}#buffs .buff span{font-size:8px}#buffs .buff small{background:#e4ece1;color:#26473d;text-shadow:none;border-radius:3px;padding:0 2px}
#syslog{max-width:calc(100vw - 24px);color:#edf3e6;font-family:Tahoma,sans-serif;text-shadow:0 1px 3px #102a24,0 0 4px #102a24}#syslog .sys{color:#b9dfc8}#syslog div{padding:2px 5px;background:linear-gradient(90deg,#17382f80,transparent);border-radius:3px}
#skillbar .slot.cooling::before{background:#16372a99}#skillbar .slot.cooling::after{color:#fff8e6;text-shadow:0 1px 3px #132b22;font-weight:bold}
@media(max-width:640px){#menubar{max-width:calc(100vw - 20px);flex-wrap:wrap}#menubar button{width:36px;height:36px}#minimap{max-width:125px}#minimap canvas{width:100%}}
@media(prefers-reduced-motion:reduce){#syslog div{transition:none}}
/* Merchant: compact two-column review, original mist/ivory skin. */
.merchant{width:min(640px,100%);margin:16px auto;background:#f2f4ec;color:#29453b;border:1px solid #94ad9c;border-radius:14px;box-shadow:0 12px 32px #102d3330;font:13px/1.5 Tahoma,sans-serif;overflow:hidden}.merchant *{box-sizing:border-box}.merchant-top{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(110deg,#dce9dc,#eef1e4);border-bottom:1px solid #b8cbbc}.merchant-top img{width:46px;height:46px;image-rendering:pixelated;background:#c8daca;border-radius:50%}.merchant-top h3{margin:0;color:#264b3d;font-size:17px}.merchant-top small{color:#5e7468}.merchant-wallet{margin-left:auto;text-align:right;white-space:nowrap}.merchant-wallet b{display:block;color:#88603f;font-size:17px}.merchant-tabs{display:flex;gap:6px;padding:10px 14px 0}.merchant button{font:inherit;border:1px solid #a6bdac;border-radius:6px;background:#eaf0e5;color:#315b44;padding:6px 10px;cursor:pointer;min-height:32px}.merchant button:hover{background:#dce9d9}.merchant button:disabled{opacity:.45;cursor:not-allowed}.merchant button:focus-visible,.merchant input:focus-visible{outline:3px solid #548c78;outline-offset:2px}.merchant-tabs button{flex:1}.merchant-tabs [aria-pressed=true]{background:#365f4d;color:#fff;border-color:#365f4d}.merchant-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;padding:12px 14px}.merchant-search{width:100%;padding:8px 10px;border:1px solid #adc2b1;border-radius:6px;background:#fff;color:#29453b;font:inherit}.merchant-products{height:248px;overflow:auto;margin-top:6px;scrollbar-width:thin}.merchant-item{display:flex;gap:8px;align-items:center;padding:8px 3px;border-bottom:1px solid #d9e2d6}.merchant-item img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}.merchant-item .item-copy{flex:1;min-width:0}.merchant-item b{display:block;font-size:12px}.merchant-item small{color:#65776b;font-size:11px}.merchant-item button{padding:3px 8px;min-width:32px}.merchant-cart{background:#e7eee3;border:1px solid #c6d5c4;border-radius:8px;padding:10px;min-width:0}.merchant-cart h4{margin:0 0 8px;font-size:13px}.merchant-cart-list{height:236px;overflow:auto}.merchant-empty{color:#65776b;text-align:center;padding:48px 8px;font-size:12px}.merchant-cart-row{padding:8px 0;border-bottom:1px solid #cbd8c7}.merchant-cart-row strong{font-size:12px}.merchant-quantity{display:flex;gap:5px;align-items:center;margin-top:5px}.merchant-quantity input{width:48px;border:1px solid #adc2b1;border-radius:4px;padding:4px;text-align:center;font:inherit;background:#fff;color:#29453b}.merchant-quantity button{padding:2px 8px;min-height:28px}.merchant-price{margin-left:auto;white-space:nowrap;color:#805e3e;font-size:12px}.merchant-footer{display:flex;gap:10px;align-items:center;border-top:1px solid #b8cbbc;padding:12px 14px;background:#e9eee2}.merchant-total{flex:1}.merchant-total b{display:block;font-size:19px;color:#805e3e}.merchant-footer .merchant-confirm{background:#365f4d;color:#fff;border-color:#365f4d}.merchant-message{margin:0;padding:0 14px 10px;min-height:28px;color:#76563d;font-size:12px}.merchant-hint{font-size:11px;color:#65776b;margin:6px 0 0}@media(max-width:520px){.merchant-body{grid-template-columns:1fr}.merchant-products{height:180px}.merchant-cart-list{height:128px}.merchant-top{padding:10px}.merchant-footer{flex-wrap:wrap}.merchant-wallet b{font-size:14px}}
/* Improve the existing live shop until its new renderer is connected. */
#shop{border-color:#94ad9c;background:#f2f4ec;color:#29453b;max-width:calc(100vw - 24px)}#shop-list{max-height:55vh;overflow:auto}#shop-list .row{border-bottom:1px solid #d9e2d6;padding:9px 4px}#shop-list button{min-height:32px;background:#e1ebdc;border-color:#a6bdac;color:#315b44}
@media(max-width:520px){.merchant-top{flex-wrap:wrap}.merchant-top>div:not(.merchant-wallet){flex:1;min-width:0}.merchant-top h3{font-size:14px;overflow-wrap:anywhere}.merchant-wallet{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between}.merchant-item{flex-wrap:wrap}.merchant-item .item-copy{min-width:65px}.merchant-quantity{flex-wrap:wrap}}
/* Compact skill panel: keep every description and upgrade control available. */
#skills{width:min(350px,calc(100vw - 24px));max-height:min(520px,calc(100dvh - 96px));padding:8px;left:clamp(12px,18vw,270px);box-sizing:border-box}
#skills h4{font-size:13px;margin:-8px -8px 6px;padding:6px 8px}
#skills h4 span{font-size:11px}
#skills td{font-size:12px;padding:5px 3px}
#skills small{font-size:11px;line-height:1.35;max-width:none}
#skills #status-skills img.skill-icon{width:30px;height:30px;margin:0 6px 3px 0}
#skills td button{width:26px;height:26px;min-height:26px}
#skills-tabs{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:5px}
#skills-tabs button{flex:1;padding:4px 5px;font-size:11px;min-height:30px}
@media(max-width:760px){#skills{left:12px;top:55px;width:min(350px,calc(100vw - 24px))}}
@media(max-width:760px){#skills{left:12px!important;top:55px!important}}
/* Status stays short: base attributes beside two-column combat values. */
#status{width:min(470px,calc(100vw - 24px));max-height:calc(100dvh - 96px);overflow:auto;box-sizing:border-box;background:#f0f3e9;border-color:#91aa98}
#status h4{background:linear-gradient(110deg,#dce8da,#f4f1e4);color:#315745;border-color:#aabda8;font-size:14px}
#status #status-base{display:inline-table;width:48%;vertical-align:top;margin:0 2% 6px 0}
#status #status-derived{display:inline-table;width:49%;vertical-align:top;margin:0 0 6px}
#status td{padding:5px 3px;font-size:11px;border-color:#d0ddcb}
#status td.v{color:#315745;font-variant-numeric:tabular-nums}
#status button{width:26px;height:26px;min-height:26px;background:#e5eddf;border-color:#9bb49b;color:#315745}
#status .hint{clear:both;font-size:10px;line-height:1.4;padding-top:6px;border-top:1px solid #bdceb7}
@media(max-width:480px){#status{left:12px!important;top:55px!important}#status #status-base,#status #status-derived{display:table;width:100%;margin-right:0}}
#status #status-derived tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
#status #status-derived tr{display:flex;align-items:center;justify-content:space-between;gap:3px;padding:4px 3px;background:#e2eadc;border-radius:4px}
#status #status-derived td{padding:0;border:0;font-size:10px;line-height:1.35;overflow-wrap:anywhere}
#status #status-derived td.v{white-space:normal;text-align:right}
#status #status-base td:first-child{font-size:10px;line-height:1.3}
#status #status-base td{padding-top:3px;padding-bottom:3px}
/* Skills/passives share the same readable mist-and-ivory cards. */
#skills{background:#f1f4ec;border-color:#93ad9b;color:#29483a}
#skills h4{background:linear-gradient(110deg,#dce9dc,#f1f0e3);color:#315644;border-color:#b0c3ac}
#skills-tabs button{background:#e8eee2;border-color:#acbfaa;color:#395747;box-shadow:none}
#skills-tabs button.on{background:#315d49;color:#fff4d7;border-color:#315d49}
#skills .passive-card{display:flex;align-items:center;gap:8px;margin:6px 0;padding:9px;border:1px solid #c3d0bd;border-radius:8px;background:#f9faf4;box-shadow:0 1px 2px #193e2110}
#skills .passive-card .t{min-width:0;flex:1}
#skills .passive-card img{width:34px;height:34px;flex-shrink:0;image-rendering:pixelated}
#skills .passive-card .t b{font-size:12px;line-height:1.45;color:#315441!important}
#skills .passive-card .t>span{display:block;color:#345445;font-size:11px;line-height:1.45}
#skills .passive-card .t small{display:block;color:#61715f!important;font-size:10px;line-height:1.4;margin-top:3px}
#skills .passive-card .t b .tag{display:inline-block;vertical-align:middle;width:auto;padding:0 4px;margin-left:3px;border:1px solid #b4cbb0!important;border-radius:4px;background:#e8efdf;color:#526f45!important;font-size:9px;line-height:1.4}
#skills .passive-card.locked{opacity:1;background:#e9ece5;border-style:dashed;border-color:#c0c8bb}
#skills .passive-card.locked img{filter:grayscale(.7);opacity:.7}
#skills .passive-card.locked .t b{color:#65715f!important}
#skills .passive-card:has(input:checked){background:#e3efdc;border-color:#638b62;box-shadow:inset 3px 0 #638b62}
#skills .passive-card input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:#446f48;cursor:pointer;margin:0}
#skills .passive-card input:disabled{cursor:not-allowed}
#skills .passive-card:focus-within{outline:2px solid #987647;outline-offset:2px}
#skills .class-card{background:#f9faf4;border-color:#c3d0bd;gap:8px;padding:8px}
#skills .class-card.current{background:#e3efdc;border-color:#638b62}
#skills .class-card img{width:36px;height:36px}
#skills .class-card .t b{color:#315441}
#skills .hint{font-size:10px;line-height:1.45;color:#61715f}
#skills #status-skills{border-collapse:separate;border-spacing:0 6px}
#skills #status-skills td{background:#f9faf4;border-top:1px solid #c3d0bd;border-bottom:1px solid #c3d0bd;padding:8px 5px}
#skills #status-skills td:first-child{border-left:1px solid #c3d0bd;border-radius:7px 0 0 7px}
#skills #status-skills td:last-child{border-right:1px solid #c3d0bd;border-radius:0 7px 7px 0}
#skills #status-skills td.v{white-space:nowrap;font-size:11px;color:#41694d}
#skills #status-skills .tag{display:inline-block;font-size:9px;border-radius:3px;padding:0 3px}
#skills #status-skills button{background:#e4efdd;border-color:#99b48f;color:#315d3d}
#skills #status-skills button:disabled{background:#edf0e8;color:#899381;border-color:#c8d1c1}
/* Jade/ivory refinement: shared visual hierarchy, existing game controls retained. */
:root{--ui-paper:#f4f3e9;--ui-ink:#294438;--ui-muted:#607466;--ui-line:#a7bba9;--ui-blue:#3d6c56;--ui-gold:#916744;--ui-shadow:0 8px 24px #122d2933}
.panel{background:linear-gradient(135deg,#fafbf4f5,#e9eee3f5);border-color:#94ad99;scrollbar-color:#9aad96 #edf1e7}
.panel h4,#bag h4,#party h4,#iteminfo h4,#shop h4,#market h4{background:linear-gradient(110deg,#dce8d9,#f4efe1);color:#345a44;border-color:#b6c7ac;text-shadow:none}
.panel button,.row button,#iteminfo-btns button,#market-refresh{background:linear-gradient(#f9fbf2,#dfe9d8);border-color:#9eb499;color:#345940;box-shadow:none}
.panel button:hover{background:#d5e5cd;border-color:#648a65}
.panel input,.panel select{color:#294438;border-color:#a7bba9;background:#fffff8}
.slot{background:linear-gradient(#f9faf2,#e0e8d8);border-color:#a7bba0;color:#35563e}
.slot:hover{background:#e3eedb;border-color:#698e63}.slot .qty{color:#694e36}
#equipwin{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 84px);overflow:auto;box-sizing:border-box}
#equip{grid-template-columns:64px minmax(0,1fr) 64px;gap:8px}
#equip .avatar{min-height:242px;border:1px solid #b6c8ab;border-radius:45% 45% 10px 10px;background:radial-gradient(ellipse at 50% 40%,#f8f4da,#d5e4cd 65%,#bacfb5);box-shadow:inset 0 0 24px #7c9e6c25}
#equip .avatar img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 6px 3px #34513930)}
#equip .avatar span{color:#355b43;font-weight:bold}#equip .avatar small{color:#5f735d!important;text-align:center;overflow-wrap:anywhere}
#equip .slot{border-radius:8px}#equip .slot .lab{color:#62775d}#equip .slot.empty{color:#73846b;background:#e8edde;border-style:dashed}
#equip .slot.sel{border-color:#9b7047;box-shadow:inset 0 0 0 1px #9b7047}
#equip-detail{border-color:#b5c6a9;line-height:1.5}#equip-detail b{color:#765236}#equip-detail .st{color:#376c40}#equip-detail .cd{color:#426b77}
#bag{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 96px);overflow:auto}
#skillbar{border-radius:10px;background:#e9eee1ed;border-color:#91a98a;height:auto;max-width:calc(100vw - 16px);gap:4px;padding:5px}
#skillbar .slot{width:40px;height:40px;flex-shrink:0;color:#35563e!important}#skillbar .slot i{color:#54714d;background:#f6f8ecdd}
#skillbar .slot.flash{border-color:#aa7742;background:#ede1c7}
#minimap canvas{max-width:100%;height:auto}#minimap .cap{gap:6px}
#chat input{background:#f4f6ecee;border-color:#a1b89b;color:#294438}#chat input::placeholder{color:#687c61}
@media(max-width:640px){#equipwin{left:12px!important;top:55px!important}#equip .avatar img{width:88px;height:88px}#skillbar{overflow-x:auto;justify-content:flex-start}#skillbar .slot{width:32px;height:36px}#bag{right:12px!important;top:55px!important}}
.panel h4 button.close{background:#e1ebd9;color:#3d5e45;border:1px solid #9bb18f;border-radius:6px;width:28px;height:28px;min-height:28px}
#equip-detail span[style*="color:#9aa"]{color:#60745c!important}
@media(prefers-reduced-motion:reduce){.panel *{scroll-behavior:auto}}
/* Fixed service windows: content wraps; only the vertical axis scrolls. */
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot){
 position:fixed;z-index:40;box-sizing:border-box;width:min(420px,calc(100vw - 24px));
 height:min(480px,calc(100dvh - 80px));max-height:calc(100dvh - 80px);
 left:50%!important;top:40px!important;right:auto!important;bottom:auto!important;
 transform:translateX(-50%)!important;padding:12px;overflow-x:hidden;overflow-y:auto;
 overscroll-behavior:contain;scrollbar-gutter:stable;resize:none;
 border:1px solid #78947d;border-radius:14px;background:#f3f5ec;
 box-shadow:0 16px 48px #102c3a40,inset 0 1px #fff;
 overflow-wrap:anywhere;font-size:12px;
}
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot) *,
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot) *::before{box-sizing:border-box;min-width:0}
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot)>h4:first-child{
 position:sticky;top:-12px;z-index:3;margin:-12px -12px 12px;padding:12px 46px 12px 14px;
 min-height:48px;background:#294d40;color:#f4f3e4;border:0;border-bottom:3px solid #b58d60;
 border-radius:12px 12px 0 0;font-size:14px;line-height:1.5;text-shadow:none;cursor:default;
}
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot)>h4:first-child :is(span,small){color:#d6e3ce!important;font-size:11px}
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot)>h4:first-child .close{
 position:absolute;right:10px;top:10px;float:none;background:#3e6351;color:#fff;border-color:#7c9780;
}
#skills #status-job{display:block;margin-top:2px}
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot) .tabs{
 display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;
}
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot) .tabs button{
 flex:1 1 64px;min-height:34px;padding:6px;font-size:11px;white-space:normal;
 border-radius:7px;background:#e4ebdc;color:#355540;border:1px solid #b4c6aa;
}
:is(#skills,#shop,#npc,#market,#mail,#trade,#bot) .tabs button.on{background:#38634b;color:#fff5dd;border-color:#38634b}
#skills #status-skills{table-layout:fixed;width:100%;margin:0;border-spacing:0 7px}
#skills #status-skills td:nth-child(2){width:40px;white-space:normal;text-align:center}
#skills #status-skills td:last-child{width:36px}
#skills #status-skills td{padding:9px 5px;line-height:1.5}
#skills #status-skills img.skill-icon{width:36px;height:36px;background:#e5eddf;border-color:#b2c5a9}
#skills #status-skills small{clear:both;padding-top:4px;line-height:1.55;font-size:11px}
#skills :is(.passive-card,.class-card){flex-wrap:wrap;padding:10px;gap:8px}
#skills :is(.passive-card,.class-card) .t{flex:1 1 160px;overflow-wrap:anywhere}
#skills :is(.passive-card,.class-card) button{max-width:100%;white-space:normal}
:is(#shop,#npc,#market,#mail,#trade,#bot) .row{
 flex-wrap:wrap;gap:6px;padding:10px 8px;margin:0 0 6px;border:1px solid #d1ddc8;
 border-radius:9px;background:#fcfcf6;line-height:1.5;
}
:is(#shop,#npc,#market,#mail,#trade,#bot) .row .n{flex:1 1 130px;overflow-wrap:anywhere}
:is(#shop,#npc,#market,#mail,#trade,#bot) .row .p{min-width:0;color:#88613e;font-weight:bold;white-space:normal}
:is(#shop,#npc,#market,#mail,#trade,#bot) .row button{min-height:32px;max-width:100%;white-space:normal;padding:5px 8px}
:is(#shop,#npc,#market,#mail,#trade,#bot) :is(input,select,textarea){max-width:100%;font:inherit}
:is(#shop,#npc,#market,#mail,#trade,#bot) input[type=number]{width:76px!important;flex:0 1 76px;padding:5px}
:is(#shop,#npc,#market,#mail,#trade,#bot) textarea{resize:vertical}
#shop:not(.merchant) #shop-list{max-height:none;overflow:visible}
#shop-list .row .n{flex-basis:140px}
#shop-list .skill-icon{width:28px!important;height:28px!important;vertical-align:middle;margin-right:6px;object-fit:contain}
#shop-cart{padding:10px 0 0;border-color:#aabc9f!important}
#shop-cart>div:last-child{position:sticky;bottom:-12px;padding:10px 0;background:#f3f5ec}
#shop-cart>div:last-child button:first-child{background:#38634b;color:#fff5dd;border-color:#38634b!important;min-height:36px}
#shop #refine-head{margin:10px 0;padding:10px;background:#e9dfcb;border:1px solid #ccba97;border-radius:8px;color:#755737}
#refine-head small{display:block;line-height:1.5;color:#6e6655!important;margin-top:4px}
#npc #npc-hint{display:block;line-height:1.5}
#npc-body .grid{max-width:100%;grid-template-columns:repeat(6,minmax(0,1fr))!important}
#npc-body .grid .slot{width:100%;max-width:40px}
#trade .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#trade .cols>div{border-radius:8px;background:#e8efdf;border-color:#b2c6a3;padding:8px}
@media(max-width:380px){#skills #skills-tabs button{flex-basis:40%}#trade .cols{grid-template-columns:minmax(0,1fr)}}
@media(max-height:480px){:is(#skills,#shop,#npc,#market,#mail,#trade,#bot){top:8px!important;height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}}

/* Approved merchant composition, scoped away from the shared smith window. */
#shop.panel.merchant{width:min(640px,calc(100vw - 24px));height:min(550px,calc(100dvh - 32px))!important;max-height:calc(100dvh - 32px)!important;top:16px!important;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;border-radius:14px;background:#f2f4ec}
#shop.panel.merchant>.merchant-top{position:relative;top:0;margin:0;padding:14px 50px 14px 16px;background:linear-gradient(110deg,#dce9dc,#eef1e4);border-bottom:1px solid #b8cbbc;border-radius:0;min-height:74px;color:#264b3d}
#shop.panel.merchant .merchant-top :is(h3,small){color:#264b3d!important;-webkit-text-fill-color:#264b3d!important}
#shop.panel.merchant .merchant-wallet b{color:#88603f!important;-webkit-text-fill-color:#88603f!important;font-size:17px}
#shop.panel.merchant .merchant-top .close{background:#eaf0e5;color:#315b44;border-color:#a6bdac}
#shop.panel.merchant #shop-list,#shop.panel.merchant #shop-cart{overflow-x:hidden!important;overflow-y:auto!important;max-height:none;border:0!important;padding:0;margin-top:6px;scrollbar-gutter:stable}
#shop.panel.merchant .merchant-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
#shop.panel.merchant .merchant-body>div{min-width:0}
#shop.panel.merchant .merchant-cart>h4{position:static;background:none;color:#29453b;border:0;margin:0 0 8px;padding:0;font-size:13px}
#shop.panel.merchant .merchant-cart>h4 span{color:inherit}
#shop.panel.merchant #shop-cart>div:last-child{position:static;background:none;padding:0}
#shop.panel.merchant .merchant-footer{position:sticky;bottom:0;z-index:2}
#shop.panel.merchant .row{background:none;border:0;border-bottom:1px solid #d9e2d6;border-radius:0;margin:0;padding:8px 3px}
#shop.panel.merchant .merchant-quantity{flex-wrap:wrap}
#shop.panel.merchant .merchant-message{font-size:11px}
@media(max-width:520px){#shop.panel.merchant .merchant-body{grid-template-columns:minmax(0,1fr)}#shop.panel.merchant .merchant-products{height:180px}#shop.panel.merchant .merchant-cart-list{height:128px}#shop.panel.merchant .merchant-top{padding:10px 45px 10px 12px}}