/* Painted PNG art stays central; panels use restrained ivory / jade accents. */
body{font-family:Arial,"Segoe UI",sans-serif}
#c:focus{outline:none}
#hud{width:220px;padding:12px 14px;border-radius:12px;background:linear-gradient(145deg,#142a36f2,#0b1723f5);border-color:#93aaa451}
#hud b{font:600 14px/1.5 Arial,sans-serif;letter-spacing:0;text-shadow:none}
#hud small{font:11px/1.65 Arial,sans-serif;color:#b7c9cd;display:block}
.bar{height:7px;margin:6px 0;border-color:#526b744a;background:#07111c}
.bar i{box-shadow:inset 0 1px #ffffff3d}
#log{font:500 13px/1.5 Arial,sans-serif;color:#f1dcad;letter-spacing:0;text-shadow:0 1px 3px #000}
#bt{max-width:430px;gap:6px}
#bt button{font:500 12px/1.3 Arial,sans-serif;min-height:39px;padding:9px 12px;border-radius:8px}
#bt button:hover:not(:disabled){transform:none;box-shadow:inset 0 1px #ffffff12,0 3px 9px #0004}
#bt .go:not(:disabled){animation:none;border-color:#c4ae73aa}
#tip{font:11px/1.5 Arial,sans-serif;color:#b3c3bf;max-width:380px;padding:6px 9px;background:#0a1822c9;border:1px solid #7b9a9840;border-radius:6px}
#sb .sk{background:linear-gradient(145deg,#17333feb,#08151ff5)!important;border-width:1px;box-shadow:inset 0 1px #f0ddae33,0 4px 12px #0006}
#sb .sk canvas{filter:none}
#sb{left:16px!important;bottom:18px!important;transform:none!important}
#tip{bottom:88px}
#world-dialog>section{border-color:#adba9e66;background:linear-gradient(145deg,#172c39fa,#0b1825fc)}
#world-dialog h2{font-family:Georgia,serif;letter-spacing:.02em}
.gear-panel{background:radial-gradient(ellipse at 50% 38%,#4d7b8050,transparent 62%),linear-gradient(160deg,#1a303c,#0b1825);border-color:#8da09b55}
.paper-doll{height:330px}
.gear-preview{width:100%!important;height:100%!important;object-fit:contain}
.gear-slot{width:62px;height:62px}
.gear-0,.gear-3{top:18px}.gear-1,.gear-4{top:124px}.gear-2,.gear-5{top:230px}
.item-cell{border-radius:8px!important;background:radial-gradient(ellipse at 50% 25%,#35515a,#101f2b 80%)!important;box-shadow:inset 0 1px #e1e6d119,inset 0 -5px 12px #0003}
.item-cell.occupied{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--rarity) 17%,#203b46),#0c1c28 85%)!important}
.item-cell img{width:88%;height:88%;filter:drop-shadow(0 2px 2px #0008)}
.item-cell[data-item-id="hoi-linh-dan"] img{filter:hue-rotate(180deg) drop-shadow(0 2px 2px #0008)}
.gear-slot:not(.occupied) img{opacity:.3;filter:grayscale(1)}
.gear-slot small{font-size:11px;color:#b2c1c4;bottom:-20px}
.bag-grid{gap:9px}.cell-index{opacity:.5}
.item-details{border-color:#859b9955;min-height:120px;background:#081723b3}
@media(max-width:700px){
 #hud{width:170px;padding:9px 10px}#hud b{font-size:12px}#hud small{font-size:10px}
 #bt{max-width:none}#sb .sk{box-shadow:inset 0 1px #f0ddae33,0 2px 7px #0006}
 #sb{left:50%!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important}
 .paper-doll{height:250px}.gear-preview{height:250px!important}
 .gear-slot{width:52px;height:52px}.gear-0,.gear-3{top:10px}.gear-1,.gear-4{top:93px}.gear-2,.gear-5{top:176px}
 .bag-grid{gap:6px}#world-dialog .inventory-dialog{padding:14px!important}
}
@media(prefers-reduced-motion:reduce){button,.bar i{transition:none!important}#bt .go{animation:none!important}}