/* Shared mobile surfaces. Loaded last; artwork remains pixel sharp, photos do not. */
:root{--panel-radius:12px;--panel-edge:#729990;--panel-text:#e3ebe1;--panel-muted:#b4c5b5;--panel-fill:#132c28;--panel-title:#254840}
.classic-frame{background-image:url('ui-067/login-background.png');background-size:cover;image-rendering:auto}
.classic-login{border-radius:12px}
.classic-menu{left:27%;width:46%;top:53%;padding:3% 6%;border-radius:12px;background:#081e22b8;border:1px solid #7aaba780;box-shadow:0 4px 18px #00151070}
.classic-menu .menu-art{height:8.35cqw;width:100%}
.classic-menu button{min-height:40px}
.classic-online{background:#163e3b90;border-radius:3px}
.classic-version{color:#c1d7cb;font-size:clamp(12px,3.5cqw,18px);text-shadow:0 1px 2px #000}
.role-screen{border-radius:var(--panel-radius);overflow:hidden}
.role-screen>header{border:0;border-bottom:1px solid var(--panel-edge);background:var(--panel-title);padding:12px;font-size:clamp(18px,5.5cqw,25px);letter-spacing:2px}
.role-frame{border:1px solid #52766c;border-radius:8px;padding:10px;margin:10px 10px 0}
.role-card{border:1px solid #658779;border-image:none;border-radius:8px;background:#203f37;overflow:hidden;margin-bottom:10px}
.role-card:first-child{background:#2c5045}
.role-enter{font-size:clamp(14px,4.4cqw,20px);line-height:1.6;padding:10px;min-height:116px;gap:10px}
.role-enter>span{min-width:0;overflow-wrap:anywhere;padding-bottom:24px}
.role-enter canvas{width:80px;height:110px;max-width:28%;object-fit:contain}
.role-delete{font-size:12px;padding:6px 10px;min-height:32px;border-radius:6px 0 0 0;color:#f2c2b0}
.role-screen>footer{height:auto;min-height:74px;padding:10px;font-size:clamp(12px,3.5cqw,16px);line-height:1.5;color:var(--panel-muted)}
.role-screen footer button{min-height:36px;font-size:16px}
.create-role-frame>canvas{height:140px;width:100px;max-height:24vh;margin:0 auto 12px}
.create-role-frame label{font-size:16px}.create-role-frame input,.create-role-frame select{height:42px;border-radius:6px;padding:6px 10px}
#modal{border-radius:var(--panel-radius)!important;overflow:hidden;box-shadow:0 8px 30px #0008}
#modal.original-panel{display:flex;flex-direction:column;border:1px solid var(--panel-edge)!important;border-image:none!important;padding:10px!important;background:var(--panel-fill)!important;gap:0}
#modal.original-panel:not([open]){display:none}
#modal.original-panel .original-title{position:relative;inset:auto!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;height:auto!important;min-height:44px!important;max-height:none!important;margin:0 0 10px!important;padding:9px 12px!important;box-sizing:border-box;background:var(--panel-title)!important;color:#efe6b8!important;border:1px solid #547a6e!important;border-image:none!important;border-radius:8px!important;clip-path:none!important;box-shadow:inset 0 1px #8caa8626!important;font:clamp(18px,5cqw,24px)/1.35 JHPixel,SimSun,serif!important;letter-spacing:2px!important;white-space:normal!important;text-align:center;overflow-wrap:anywhere;display:flex;align-items:center;justify-content:center}
#modal.original-panel .original-title::before,#modal.original-panel .original-title::after{display:none}
#modal.original-panel .panel-corner{display:none}
#modal.original-panel .original-content{flex:1 1 auto;min-height:0!important;min-width:0;max-height:none!important;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:8px!important;border-radius:7px;background-color:transparent}
#modal.original-panel .original-footer{flex:0 0 auto!important;height:auto!important;min-height:44px!important;margin:10px 0 0!important;padding:8px 0 0!important;gap:6px!important;border:0!important;border-top:1px solid #527268!important;background:transparent!important;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;box-sizing:border-box}
#modal.original-panel .original-footer button{flex:1 1 auto;min-width:44px;min-height:38px!important;height:auto!important;padding:7px 9px!important;border:1px solid #5e8376!important;border-image:none!important;border-radius:6px!important;background:#26483e!important;color:#e6e8c9!important;font:clamp(13px,3.8cqw,18px)/1.3 JHPixel,SimSun,serif!important;white-space:normal}
#modal.original-panel .original-footer button:disabled{opacity:.48}
#modal button:focus-visible,.role-screen button:focus-visible{outline:2px solid #e9d491;outline-offset:-3px}
#modal .original-tabs{flex:none;display:flex;flex-wrap:wrap;height:auto;min-height:38px;gap:4px;padding:4px 0}
#modal .original-tabs button{flex:1 1 auto;min-height:34px;padding:6px;font-size:clamp(13px,3.8cqw,18px);border-radius:5px;white-space:normal}
#modal .original-row{gap:8px;line-height:1.45;min-height:38px;overflow-wrap:anywhere}
#modal .original-row>span{min-width:0}
#modal .original-row>span:last-child{flex-shrink:0}
#modal .spell-row{padding:10px 4px;line-height:1.5}
#modal .original-list{min-width:0;overscroll-behavior:contain}
#modal.scroll-menu{padding:6px!important;border-radius:10px!important}
#modal.scroll-menu .original-title,#modal.scroll-menu .original-footer{display:none!important}
#modal.scroll-menu .original-content{padding:0!important}
#modal.scroll-menu .scroll-option{min-height:40px!important;padding:8px 12px!important;font-size:clamp(15px,4.5cqw,21px)!important;line-height:1.35}
#modal .original-stat-table{font-size:clamp(14px,4.4cqw,20px);line-height:1.45;background:none}
#modal .original-stat-table>div{min-height:34px!important;flex:none!important;align-items:center}
#modal .original-stat-table dt{width:29%;padding:6px;background:#274b3e}
#modal .original-stat-table dd{padding:6px 8px}
#modal .equipment-content{gap:8px}
#modal .equipment-detail-body{padding:10px!important;line-height:1.5}
#modal .gear-stat em:empty{display:none}
#modal .original-money{padding:9px 2px!important;min-height:40px!important;border-top:1px solid #547468!important;display:flex;flex-wrap:nowrap;gap:4px}
#modal .original-money .money-values{display:flex;flex-wrap:nowrap;gap:4px;justify-content:space-between;min-width:0;font-size:clamp(13px,4.1cqw,18px);line-height:1.2;font-variant-numeric:tabular-nums}
#modal .money-values>span{display:inline-flex;align-items:center;white-space:nowrap;gap:2px;min-width:0}
#modal .money-values img{width:12px;height:12px;flex:none;object-fit:contain}
#modal .voucher-label{font-size:.78em}
#modal .original-money .reputation-value{font-size:clamp(11px,3.2cqw,14px);margin-left:2px}
#modal.settlement-panel,.mobile-fit #modal.settlement-panel{width:min(480px,calc(var(--jh-stage-w,100vw) - 12px))!important;height:min(620px,calc(var(--jh-stage-h,100dvh) - 20px))!important;max-height:calc(var(--jh-stage-h,100dvh) - 20px)!important;top:calc(var(--jh-top,0px) + var(--jh-safe-h,100dvh)/2)!important}
#modal.settlement-panel .original-content{display:flex;flex-direction:column;gap:12px}
#modal.settlement-panel .settlement-values{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px!important;border:1px solid #53745f;border-radius:8px;font:clamp(14px,4.2cqw,20px)/1.5 JHPixel,SimSun,serif}
#modal.settlement-panel .settlement-values>div{padding:10px 7px;gap:6px;flex-wrap:wrap;align-items:center}
#modal.settlement-panel .settlement-values b{margin-left:auto;overflow-wrap:anywhere}
#modal.settlement-panel .settlement-label{display:flex;justify-content:space-between;align-items:center;flex:none;font-size:clamp(15px,4.5cqw,21px);padding:4px 0 10px;margin:0;gap:8px}
#modal.settlement-panel .settlement-label span:last-child{font-size:clamp(12px,3.8cqw,17px)}
#modal.settlement-panel .settlement-items{flex:1 0 auto;max-height:none;min-height:70px;overflow:visible}
#modal.settlement-panel .settlement-items>div{font-size:clamp(15px,4.5cqw,21px);padding:10px 0;gap:12px}
#modal.settlement-panel .settlement-items small{display:inline;margin-left:8px;font-size:.85em}
#modal.settlement-panel .reward-art{width:42px;height:42px;border-width:3px}
#modal .settlement-empty{font-size:16px;padding:20px 0;text-align:center}
.idle-settlement-note{flex:none;margin:0;padding:8px 0;color:#c5dfab;text-align:center;font-size:14px}
.game .original-idle-entry:not(.in-combat){border:0!important;border-image:none!important;background:none!important;box-shadow:none;padding:0!important;width:26%!important;min-height:38px;height:auto!important;aspect-ratio:143/65}
.game .original-idle-entry:not(.in-combat)>img{display:block;width:100%;height:auto;image-rendering:pixelated}
.game .original-idle-entry.active:not(.in-combat){background:#24473f!important;border:2px solid #85b5ad!important;border-radius:6px!important;color:#fff1a9;font-size:clamp(13px,4cqw,21px)}
.game .original-idle-entry.active::after{display:none!important}
.game .original-idle-entry.in-combat{z-index:20;right:8px;top:8px;left:auto;bottom:auto;width:30%;height:38px;min-width:84px;min-height:38px;padding:3px!important;border:1px solid #91b2a1;border-image:none;border-radius:6px;background:#17362e;color:#ffe5a0;font-size:clamp(13px,3.8cqw,18px)}
.original-idle-entry.in-combat>img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
.combat-title{border:0;border-bottom:1px solid #698f79;min-height:54px;padding:8px 8px 8px 6%;background:#274b40}
.combat-options button{min-height:34px;letter-spacing:1px}
.combat-scroll h2{color:#37491d;text-shadow:none}
#modal.original-panel .original-content::before,#modal.original-panel .original-content::after{display:none}
.mobile-fit #modal.original-panel:not(.scroll-menu){width:min(520px,calc(var(--jh-safe-w) - 16px))!important;max-width:calc(var(--jh-safe-w) - 16px)!important;height:min(740px,calc(var(--jh-safe-h) - 24px))!important;max-height:calc(var(--jh-safe-h) - 24px)!important}
.mobile-fit #modal.original-panel.settlement-panel{height:min(620px,calc(var(--jh-safe-h) - 24px))!important}
#modal .restored-mall-list{padding:6px 8px;flex:1;min-height:0}
#modal .restored-mall-list .original-row{font-size:clamp(15px,4.4cqw,21px);padding:8px 4px}
#modal .original-content>.mall-page-arrow{height:28px;min-height:28px;font-size:18px}
#modal .original-money .money-values{font-family:SimSun,serif;font-weight:600}
#modal .original-money .money-values>span{font:inherit!important}
#modal .original-money .money-values .voucher-label{font-size:.78em!important}
#modal.original-panel .original-content>button{max-width:100%;margin:8px 0;box-sizing:border-box;border-radius:6px;font-size:clamp(14px,4cqw,18px)}
#modal.original-panel .original-content>p{margin:6px 0;padding:4px 6px;line-height:1.6;flex:0 0 auto}
#modal.original-panel .original-content>p:empty{display:none}
#modal .auction-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#modal .auction-filters input,#modal .auction-filters select{width:100%;min-width:0;padding:7px;height:40px}
@media(max-width:360px){#modal.original-panel{padding:7px!important}#modal .original-money .money-values{gap:2px;font-size:13px}#modal .money-values img{width:10px;height:10px}.role-enter{gap:6px;padding:6px}.role-enter canvas{width:65px;height:100px}}
@media(max-height:480px){.classic-title{top:9%;width:42%;left:29%}.classic-menu{top:39%;gap:2px;padding:4px 12%;left:16%;width:68%}.classic-menu button{min-height:28px}.classic-menu .menu-art{height:7cqw}.classic-free,.classic-online{display:none}#modal.original-panel .original-title{min-height:34px!important;font-size:17px!important;padding:5px!important;margin-bottom:5px!important}#modal.original-panel .original-footer{margin-top:5px!important;padding-top:5px!important}.create-role-frame>canvas{max-height:64px}}