:root{color-scheme:dark}
#top-bar{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
#skill-panel{bottom:max(16px,env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right))}
#adventure-tools{position:absolute;right:10px;top:65px;display:flex;gap:5px}
#party-panel{top:115px!important;max-width:225px}
#map-name{display:none}
#adventure-tools button,#field-guide button{background:#192840;color:#e9f0ff;border:1px solid #6e829b;border-radius:7px;padding:10px;min-height:42px;cursor:pointer;font-size:13px}
#field-guide{display:none;position:absolute;inset:7% max(5%,env(safe-area-inset-right)) 7% max(5%,env(safe-area-inset-left));max-width:650px;margin:auto;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;background:#0e1729f7;border:1px solid #b89953;border-radius:14px;padding:24px;color:#e9f0ff;z-index:60;font-size:14px;line-height:1.55}
#field-guide h2{padding-right:65px;font-size:22px;color:#efd18a}
#field-guide p{margin:14px 0}
#field-guide button{margin:4px}
#field-guide .guide-close{position:absolute;right:10px;top:10px}
#field-guide button:disabled{opacity:0.45;cursor:default}
.guide-row{border-top:1px solid #33445d;padding:8px 0}
#npc-window,#upgrade-popup,#auction-popup,#inv-popup,#skill-tree-popup,#stash-popup,#char-popup{max-height:84dvh!important;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;max-width:94vw!important;min-width:min(280px,94vw)!important}
#char-create{overflow:auto;padding:20px;touch-action:pan-y;justify-content:safe center}
.pd-slot{font-size:10px!important}
.inv-slot{font-size:10px!important;min-height:36px}
.comparison-slot{border-top:1px solid #48566a;margin-top:7px;padding-top:7px;font-size:11px;line-height:1.5;color:#e6ddbd}
.comparison-current{color:#a9b7cb;font-size:10px;margin:3px 0}
#item-tooltip{max-height:90dvh;overflow:hidden}
#party-panel .party-controls{position:sticky;top:0;background:#0e1b30;z-index:1;padding:3px;border-radius:5px}
#party-panel .party-controls button{font-size:10px;min-height:30px;margin:1px;padding:3px}
#map-name{top:222px}
#quest-tracker{top:247px}
@media(max-width:600px){
 #top-bar{gap:4px}#hp-mp{max-width:130px}
 #party-panel{top:112px!important;left:auto!important;right:8px!important;width:130px!important;max-height:42dvh;overflow:auto;touch-action:pan-y;background:#071329dd;padding:6px;border-radius:8px}
 #party-panel button{min-height:32px}
 #inv-popup{width:94vw!important;right:3vw!important;padding:14px}
 .inv-slot{min-height:44px}
 #boss-bar-wrap{top:90px;width:48vw;left:26%}
 #quest-tracker{width:135px;font-size:10px}#map-name{width:135px}
 #field-guide{inset:3%;padding:18px}#adventure-tools{top:66px}
 #bottom-menu{left:8px!important;bottom:max(15px,env(safe-area-inset-bottom))!important;transform:none!important;width:160px;display:grid!important;grid-template-columns:1fr 1fr;gap:4px!important}
 #bottom-menu button{min-height:42px;padding:8px 4px!important;font-size:12px!important}
}
@media(max-height:500px){
 #char-create{justify-content:flex-start}.class-grid{grid-template-columns:repeat(5,1fr);max-width:90vw}.class-card{padding:6px}.class-card .icon{font-size:22px}
 #party-panel{top:58px!important;max-height:46dvh;overflow:auto}
 #quest-tracker{top:60px;width:145px}#map-name{top:auto;bottom:8px}#minimap{display:none}
 #adventure-tools{top:55px;right:180px}#field-guide{inset:3%}
}

/* Save transfer works before choosing a class and on narrow phone screens. */
#save-transfer{position:fixed;inset:4% max(3%,env(safe-area-inset-right)) 4% max(3%,env(safe-area-inset-left));max-width:620px;margin:auto;z-index:120;overflow:auto;touch-action:pan-y;overscroll-behavior:contain;background:#101d2afc;color:#e5f2f0;border:1px solid #90b8ad;border-radius:14px;padding:24px;line-height:1.55;box-shadow:0 10px 80px #000b}
#save-transfer h2{padding-right:65px;font-size:22px;color:#c8e9db}
#save-transfer p{margin:14px 0}
#save-transfer button,#char-create>button:last-child{padding:10px 14px;min-height:44px;background:#213a43;color:#e5f2f0;border:1px solid #7a9c9b;border-radius:8px;margin:5px;cursor:pointer}
#save-transfer .guide-close{position:absolute;right:8px;top:8px}
#save-transfer label{display:block;margin-top:16px}
#save-transfer input{display:block;max-width:100%;padding:12px 0}
