/* BLACK PIRATE KINGDOM V18 — compact full-screen layout */
html.v18,html.v18 body{max-width:100%;overflow-x:hidden}
html.v18 body{font-size:13px}
html.v18 header{grid-template-columns:226px minmax(0,1fr);gap:7px;padding:5px 9px;min-height:58px}
html.v18 header>div:first-child{gap:8px}
html.v18 header>div:first-child:before{width:39px;height:39px;flex-basis:39px;background-size:29px}
html.v18 header h1{font-size:17px;letter-spacing:2.5px;margin:0}
html.v18 #captain{font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v18 #nav{gap:3px;overflow:hidden}
html.v18 .v17NavScroll{gap:1px;overflow-x:auto;scrollbar-width:none}
html.v18 .v17NavScroll::-webkit-scrollbar{display:none}
html.v18 .v17NavBtn{gap:3px;padding:5px 6px;font-size:10px;min-height:32px}
html.v18 .v17NavBtn img{width:14px;height:14px}
html.v18 .v17NavTools{gap:3px}
html.v18 .v17UtilityBtn{padding:5px 7px;font-size:10px;min-height:32px}
html.v18 .languagePicker select{height:32px;min-width:96px;padding:3px 5px;font-size:10px}
html.v18 #resources{top:58px;padding:0 6px;min-height:47px;scrollbar-width:none}
html.v18 #resources::-webkit-scrollbar{display:none}
html.v18 #resources .v17Resource{grid-template-columns:17px minmax(54px,1fr);min-width:91px;column-gap:5px;padding:5px 7px}
html.v18 #resources .v17Resource img,html.v18 .solGlyph{width:17px;height:17px;font-size:19px}
html.v18 #resources .v17Resource span:not(.solGlyph){font-size:7.5px;line-height:1.1;white-space:nowrap}
html.v18 #resources .v17Resource b{font-size:11px;line-height:1.1}
html.v18 .energyMeta{font-size:7px;white-space:nowrap}
html.v18 .globalPools{top:106px!important;transform:scale(.86);transform-origin:top right}
html.v18 main{padding:12px 14px 26px;max-width:100%}
html.v18 body[data-page="world"] main{padding:7px 8px 16px}
html.v18 body[data-page="boss"] main{padding-top:8px;max-width:1680px}
html.v18 .card,html.v18 .panel{border-radius:5px}
html.v18 button{font-size:11px;padding:7px 10px}
html.v18 input,html.v18 select,html.v18 textarea{font-size:11px;padding:8px 9px}

/* World map fits a normal 1366–1920 desktop without horizontal scrolling. */
html.v18 .v17World{grid-template-columns:198px minmax(0,1fr) 218px;gap:7px;max-width:none;width:100%}
html.v18 .v17Side{top:111px;max-height:calc(100vh - 119px);gap:7px}
html.v18 .v17Panel{padding:8px}
html.v18 .v17PanelTitle{padding-bottom:6px;margin-bottom:7px}
html.v18 .v17PanelTitle>span{font-size:10px}
html.v18 .v17PanelTitle button{font-size:8px;padding:4px 5px}
html.v18 .v17FleetList{gap:4px}
html.v18 .v17FleetList article{grid-template-columns:54px 1fr;gap:5px;padding:5px}
html.v18 .v17FleetList img{width:54px;height:39px}
html.v18 .v17FleetList b{font-size:9px}
html.v18 .v17FleetList span,html.v18 .v17FleetList small{font-size:8px}
html.v18 .v17FleetPower{padding:6px;margin-top:5px}
html.v18 .v17FleetPower b{font-size:18px}
html.v18 .v17DailyMini{gap:5px}
html.v18 .v17DailyMini article{grid-template-columns:20px 1fr;gap:5px}
html.v18 .v17DailyMini article>span{width:19px;height:19px;font-size:8px}
html.v18 .v17DailyMini b{font-size:9px}
html.v18 .v17DailyMini small{font-size:7.5px}
html.v18 .v17Production>div{grid-template-columns:17px 1fr auto;gap:4px;padding:4px 0}
html.v18 .v17Production img{width:16px;height:16px}
html.v18 .v17Production span,html.v18 .v17Production b{font-size:8px}
html.v18 .v17WorldTopbar{padding:2px 2px 6px;gap:8px}
html.v18 .v17WorldTopbar h2{font-size:24px;margin:2px 0}
html.v18 .v17WorldTopbar p{font-size:9px;line-height:1.35}
html.v18 .v17SeaStatus{gap:3px}
html.v18 .v17SeaStatus>span{min-width:76px;padding:5px 6px}
html.v18 .v17SeaStatus small{font-size:7px}
html.v18 .v17SeaStatus b{font-size:10px}
html.v18 .v17MapToolbar{margin-bottom:4px}
html.v18 .v17MapToolbar .seaZoneTabs button{min-width:112px;padding:6px 8px;font-size:9px}
html.v18 .v17ControlHint{font-size:8px;padding-left:7px}
html.v18 .v17SeaViewport{height:calc(100vh - 172px);min-height:490px;max-height:none}
html.v18 .v17CoordinateHud{left:6px;top:6px;gap:3px}
html.v18 .v17CoordinateHud span{min-width:72px;padding:4px 5px}
html.v18 .v17CoordinateHud small{font-size:6.5px}
html.v18 .v17CoordinateHud b{font-size:9px}
html.v18 .seaVessel{width:96px!important;height:67px!important}
html.v18 .seaVessel img{width:92px!important;height:55px!important;object-fit:contain!important;filter:drop-shadow(0 7px 5px #000)!important}
html.v18 .seaVessel span{top:54px!important;font-size:8px!important;padding:2px 5px!important;max-width:130px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.v18 .seaVessel.me{width:118px!important;height:82px!important}
html.v18 .seaVessel.me img{width:114px!important;height:68px!important}
html.v18 .seaVessel.me span{top:67px!important}
html.v18 .v17BossQuick{gap:4px}
html.v18 .v17BossQuick>button{grid-template-columns:58px 1fr;gap:5px}
html.v18 .v17BossQuick img{width:58px;height:43px}
html.v18 .v17BossQuick b{font-size:9px}
html.v18 .v17BossQuick small{font-size:7px}
html.v18 .v17Inspect{min-height:180px;padding:8px}
html.v18 .v17Inspect .inspectShip{height:78px}
html.v18 .v17MiniResources{gap:3px}
html.v18 .v17MiniResource{padding:3px;grid-template-columns:16px 1fr}
html.v18 .v17MiniResource img{width:14px;height:14px}
html.v18 .v17MiniResource span{font-size:6.5px}
html.v18 .v17MiniResource b{font-size:8px}

/* Boss screen: cinematic but denser, battle stage always visible after attack. */
html.v18 .v17BossPage{gap:10px}
html.v18 .v17BossHeader{padding:5px 0 9px}
html.v18 .v17BossHeader h2{font-size:34px;margin:2px 0}
html.v18 .v17BossHeader p{font-size:10px;margin:4px 0}
html.v18 .v17BossPower{width:105px;height:105px}
html.v18 .v17BossPower b{font-size:23px}
html.v18 .v17BossGrid{gap:9px}
html.v18 .v17BossCard{grid-template-columns:minmax(205px,.82fr) minmax(240px,1.18fr);min-height:270px}
html.v18 .v17BossImage{min-height:270px}
html.v18 .v17BossBody{padding:13px}
html.v18 .v17BossName h3{font-size:20px}
html.v18 .v17BossBody>p{font-size:10px;line-height:1.4;margin:7px 0}
html.v18 .v17BossStats{gap:4px;margin:5px 0}
html.v18 .v17BossStats span{padding:6px}
html.v18 .v17BossStats small{font-size:6.5px}
html.v18 .v17BossStats b{font-size:9px}
html.v18 .v17Readiness{margin:5px 0 9px}
html.v18 .v17BattleStage{position:relative;z-index:5;margin-top:10px;padding:10px}
html.v18 .battleArena{gap:8px}
html.v18 .battleShip{min-width:0}
html.v18 .battleShip img{width:86px;height:58px;object-fit:contain}
html.v18 .battleLog{max-height:230px;overflow:auto}

/* All dialogs fit inside the viewport; reward and guide cards become compact. */
html.v18 .modal{padding:12px;align-items:center;justify-content:center}
html.v18 .modal>div,html.v18 .modalBox,html.v18 .whitepaperModal{width:min(920px,calc(100vw - 24px));max-width:min(920px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:16px!important}
html.v18 .v17RewardModal .rewardburst{font-size:34px;margin:3px 0}
html.v18 .v17RewardModal h2{font-size:24px;margin:5px 0}
html.v18 .v17RewardModal .rewardGrid,html.v18 .rewardGrid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
html.v18 .rewardGrid .card{min-height:70px;padding:8px;display:grid;place-items:center;text-align:center}
html.v18 .rewardGrid .card h3{font-size:11px;line-height:1.3;margin:0}
html.v18 .whitepaperModal section{margin:8px 0;padding:8px}
html.v18 .whitepaperModal h2{font-size:25px}
html.v18 .whitepaperModal h3{font-size:14px;margin:2px 0}
html.v18 .whitepaperModal p{font-size:10px;line-height:1.45}

/* General page density. */
html.v18 .grid{gap:9px}
html.v18 .shopGrid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
html.v18 .shopGrid .card{padding:10px}
html.v18 .diabloInventory{grid-template-columns:180px minmax(0,1fr)}
html.v18 .itemGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
html.v18 .itemTile{min-height:240px;padding:9px}
html.v18 .itemTile img{height:92px}
html.v18 .marketRow,html.v18 .marketHeader{grid-template-columns:minmax(230px,2fr) minmax(110px,1fr) 90px 100px 80px}
html.v18 .leaderboards{gap:9px}
html.v18 .leaderRow{padding:7px 4px}

@media(max-width:1900px){
 html.v18 header{grid-template-columns:184px minmax(0,1fr)}
 html.v18 header h1{font-size:14px;letter-spacing:1.7px}
 html.v18 .v17NavBtn span{display:none}
 html.v18 .v17NavBtn{padding:5px 7px}
 html.v18 .v17NavBtn img{width:17px;height:17px}
 html.v18 .v17World{grid-template-columns:182px minmax(0,1fr) 198px}
 html.v18 .v17SeaViewport{min-height:460px}
}
@media(max-width:1180px){
 html.v18 header{grid-template-columns:1fr;min-height:auto}
 html.v18 #resources{top:94px}
 html.v18 .v17World{grid-template-columns:180px minmax(0,1fr)}
 html.v18 .v17RightSide{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
 html.v18 .v17LeftSide{top:141px}
 html.v18 .v17SeaViewport{height:64vh;min-height:500px}
 html.v18 .globalPools{top:142px!important}
}
@media(max-width:860px){
 html.v18 header{position:relative}
 html.v18 #resources{position:relative;top:auto}
 html.v18 .v17NavBtn span{display:inline}
 html.v18 .v17World{grid-template-columns:1fr}
 html.v18 .v17RightSide{grid-template-columns:1fr}
 html.v18 .v17SeaViewport{height:66vh;min-height:500px}
 html.v18 .v17BossCard{grid-template-columns:1fr}
 html.v18 .v17BossImage{min-height:230px}
 html.v18 .diabloInventory{grid-template-columns:1fr}
 html.v18 .marketRow,html.v18 .marketHeader{grid-template-columns:1fr}
}