/* BLACK PIRATE KINGDOM V18.14.6 — compact command screens + forced first NPC tutorial */

/* Compact all management screens; the world map remains cinematic and large. */
html.v18146 body:not([data-page="world"]) main#app{padding:12px clamp(12px,1.5vw,24px)!important;font-size:13px}
html.v18146 body:not([data-page="world"]) main#app h2{margin-top:10px;margin-bottom:8px}
html.v18146 body:not([data-page="world"]) main#app .panel{padding:11px!important;border-radius:10px!important}
html.v18146 body:not([data-page="world"]) main#app .card{padding:10px!important;border-radius:10px!important}
html.v18146 body:not([data-page="world"]) main#app button{padding:7px 10px!important;border-radius:7px!important;font-size:12px!important}
html.v18146 body:not([data-page="world"]) main#app input,html.v18146 body:not([data-page="world"]) main#app select{padding:7px 9px!important;font-size:12px!important}

/* SHOP: eight normal products fit in one row on desktop, exposing black market immediately. */
html.v18146 body[data-page="shop"] .v1814WalletCheckout{margin:0 0 8px!important;padding:10px 14px!important;min-height:0!important;border-radius:10px!important}
html.v18146 body[data-page="shop"] .v1814WalletCheckout>div{gap:9px!important}
html.v18146 body[data-page="shop"] .v1814WalletCheckout>div>span{font-size:28px!important}
html.v18146 body[data-page="shop"] .v1814WalletCheckout h3{font-size:16px!important;margin:1px 0!important}
html.v18146 body[data-page="shop"] .v1814WalletCheckout p{font-size:11px!important;line-height:1.3!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:1000px!important}
html.v18146 body[data-page="shop"] .shopWalletCheckout{display:none!important}
html.v18146 body[data-page="shop"] .shopBanner{padding:12px 16px!important;margin:0 0 8px!important;border-radius:11px!important;min-height:0!important}
html.v18146 body[data-page="shop"] .shopBanner h2{font-size:26px!important;margin:2px 0!important}
html.v18146 body[data-page="shop"] .shopBanner p{font-size:11px!important;margin:3px 0!important}
html.v18146 body[data-page="shop"] .shopBanner>b{font-size:28px!important}
html.v18146 body[data-page="shop"] .shopGrid{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important;gap:8px!important;align-items:stretch!important}
html.v18146 body[data-page="shop"] .shopCard{min-height:0!important;height:auto!important;padding:8px!important;display:grid!important;grid-template-rows:68px auto minmax(32px,auto) auto auto!important;align-content:start!important}
html.v18146 body[data-page="shop"] .shopCard img{height:68px!important;margin:0!important;border-radius:7px!important}
html.v18146 body[data-page="shop"] .shopCard h3{font-size:14px!important;margin:7px 0 3px!important;line-height:1.15!important}
html.v18146 body[data-page="shop"] .shopCard p{font-size:10.5px!important;line-height:1.3!important;margin:2px 0 6px!important;min-height:28px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.v18146 body[data-page="shop"] .shopCard label{font-size:10px!important;gap:2px!important}
html.v18146 body[data-page="shop"] .shopCard input{height:30px!important}
html.v18146 body[data-page="shop"] .shopCard button{min-height:31px!important;margin-top:5px!important;font-size:10.5px!important;padding:6px!important}
html.v18146 body[data-page="shop"] .sectionHead{margin:10px 0 6px!important;padding:0!important}
html.v18146 body[data-page="shop"] .sectionHead h2,html.v18146 body[data-page="shop"]>h2{font-size:22px!important;margin:2px 0!important}
html.v18146 body[data-page="shop"] .sectionHead p,html.v18146 body[data-page="shop"]>p{font-size:11px!important;margin:2px 0!important}
html.v18146 body[data-page="shop"] .blueprintCard img{height:82px!important}
html.v18146 body[data-page="shop"] .blueprintCard h3{font-size:14px!important;margin:4px 0!important}
html.v18146 body[data-page="shop"] .blueprintCount{font-size:15px!important}

/* RANKINGS: show multiple boards without a long scroll. */
html.v18146 body[data-page="rankings"] .rankingHero{padding:14px 16px!important;margin-bottom:9px!important;border-radius:11px!important}
html.v18146 body[data-page="rankings"] .rankingHero h2{font-size:25px!important;margin:4px 0!important}
html.v18146 body[data-page="rankings"] .rankingHero>p{font-size:11px!important;margin:5px 0!important}
html.v18146 body[data-page="rankings"] .rankPoolGrid{gap:8px!important;margin:8px 0!important}
html.v18146 body[data-page="rankings"] .rankPoolGrid article{padding:10px 12px!important;min-height:0!important}
html.v18146 body[data-page="rankings"] .rankPoolGrid b{font-size:20px!important}
html.v18146 body[data-page="rankings"] .leaderboards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
html.v18146 body[data-page="rankings"] .leaderboards .panel{min-height:0!important}
html.v18146 body[data-page="rankings"] .leaderboards h3{font-size:16px!important;margin:2px 0 7px!important}
html.v18146 body[data-page="rankings"] .leaderboards p{font-size:10px!important;margin:2px 0 5px!important}
html.v18146 body[data-page="rankings"] .leaderRow{grid-template-columns:32px 1fr auto!important;gap:7px!important;padding:6px 4px!important;font-size:11px!important}
html.v18146 body[data-page="rankings"] .leaderFirst{padding:7px!important}
html.v18146 body[data-page="rankings"] .leaderRow span small{font-size:9px!important}
html.v18146 body[data-page="rankings"] .leaderRow em{font-size:13px!important}

/* DOCKYARD: keep the fleet command, rail and selected ship above the fold. */
html.v18146 body[data-page="dockyard"] .v1814Coach{padding:10px 14px!important;margin:0 0 8px!important;min-height:0!important}
html.v18146 body[data-page="dockyard"] .v1814Coach h3{font-size:20px!important;margin:2px 0!important}
html.v18146 body[data-page="dockyard"] .v1814Coach p,html.v18146 body[data-page="dockyard"] .v1814Coach em{font-size:10.5px!important;margin:2px 0!important}
html.v18146 body[data-page="dockyard"] .v185DockFleet{padding:8px 10px!important;gap:6px!important;margin-bottom:8px!important}
html.v18146 body[data-page="dockyard"] .v185DockFleetHead h2{font-size:18px!important}
html.v18146 body[data-page="dockyard"] .v185DockSlots article{min-height:62px!important;grid-template-columns:70px 1fr!important;padding:5px!important}
html.v18146 body[data-page="dockyard"] .v185DockSlots img{width:68px!important;height:42px!important}
html.v18146 body[data-page="dockyard"] .v185DockFleet>footer{padding-top:4px!important}
html.v18146 body[data-page="dockyard"] .dockHero{margin:3px 0 6px!important;min-height:0!important}
html.v18146 body[data-page="dockyard"] .dockHero h2{font-size:22px!important;margin:1px 0!important}
html.v18146 body[data-page="dockyard"] .dockHero p{font-size:10px!important;margin:1px 0!important}
html.v18146 body[data-page="dockyard"] .dockLayout{grid-template-columns:220px minmax(0,1fr)!important;gap:9px!important}
html.v18146 body[data-page="dockyard"] .shipRail{height:calc(100vh - 220px)!important;padding:5px!important}
html.v18146 body[data-page="dockyard"] .shipRailItem{min-height:58px!important;margin:3px 0!important;padding:5px 54px 5px 6px!important}
html.v18146 body[data-page="dockyard"] .shipRailItem img{width:60px!important;height:40px!important}
html.v18146 body[data-page="dockyard"] .shipRailItem b{font-size:11px!important}
html.v18146 body[data-page="dockyard"] .shipRailItem small{font-size:8.5px!important}
html.v18146 body[data-page="dockyard"] .shipStage{grid-template-columns:minmax(400px,1.15fr) minmax(300px,.85fr)!important;gap:10px!important;padding:10px!important}
html.v18146 body[data-page="dockyard"] .shipTurntable{height:245px!important}
html.v18146 body[data-page="dockyard"] .shipTurntable img{height:78%!important}
html.v18146 body[data-page="dockyard"] .shipStats h2{font-size:23px!important;margin:4px 0!important}
html.v18146 body[data-page="dockyard"] .megaPower{font-size:27px!important;margin:6px 0!important}
html.v18146 body[data-page="dockyard"] .statBars label{height:25px!important;margin:6px 0!important;padding:4px 8px!important}
html.v18146 body[data-page="dockyard"] .req{padding:6px!important;margin:6px 0!important;font-size:10px!important}
html.v18146 body[data-page="dockyard"] .equipGrid{gap:7px!important;margin:7px 0!important}
html.v18146 body[data-page="dockyard"] .equipGrid article{min-height:72px!important;padding:7px!important}
html.v18146 body[data-page="dockyard"] .dockLoose article{min-height:76px!important;padding:7px!important}

/* INVENTORY: more items on screen, less decorative empty space. */
html.v18146 body[data-page="inventory"] .newCaptainGiftNotice{padding:8px 11px!important;margin:0 0 8px!important;font-size:11px!important}
html.v18146 body[data-page="inventory"] .newCaptainGiftNotice b{font-size:14px!important}
html.v18146 body[data-page="inventory"] .diabloInventory{grid-template-columns:180px minmax(0,1fr)!important;min-height:0!important;border-radius:11px!important}
html.v18146 body[data-page="inventory"] .diabloInventory aside{padding:10px!important}
html.v18146 body[data-page="inventory"] .diabloInventory aside h2{font-size:21px!important}
html.v18146 body[data-page="inventory"] .diabloInventory aside button{padding:7px!important;margin:3px 0!important;font-size:11px!important}
html.v18146 body[data-page="inventory"] .diabloInventory main{padding:10px!important}
html.v18146 body[data-page="inventory"] .inventoryTop h2{font-size:22px!important;margin:2px 0!important}
html.v18146 body[data-page="inventory"] .inventoryTop input{max-width:260px!important}
html.v18146 body[data-page="inventory"] .itemGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}
html.v18146 body[data-page="inventory"] .itemTile{min-height:205px!important;padding:7px!important}
html.v18146 body[data-page="inventory"] .itemTile img{height:88px!important}
html.v18146 body[data-page="inventory"] .itemTile h3{font-size:13px!important;margin:5px 0!important}
html.v18146 body[data-page="inventory"] .itemMeta{font-size:10px!important;margin:4px 0!important}

/* HARBOR: command center, production and districts become a compact dashboard. */
html.v18146 body[data-page="harbor"] .v18144HarborLesson{padding:10px 13px!important;margin:0 0 8px!important}
html.v18146 body[data-page="harbor"] .v18144HarborLesson h2{font-size:20px!important;margin:2px 0!important}
html.v18146 body[data-page="harbor"] .v18144HarborLesson p{font-size:10.5px!important}
html.v18146 body[data-page="harbor"] .v18144HarborLessonGrid{gap:6px!important;margin:7px 0!important}
html.v18146 body[data-page="harbor"] .v18144HarborLessonGrid article{padding:7px!important}
html.v18146 body[data-page="harbor"] .v18144HarborLessonGrid span{font-size:9.5px!important}
html.v18146 body[data-page="harbor"] .harborHero{min-height:225px!important;padding:18px!important;border-radius:12px!important}
html.v18146 body[data-page="harbor"] .harborHero>img{width:42%!important;height:76%!important}
html.v18146 body[data-page="harbor"] .harborCopy{padding:13px!important;max-width:570px!important}
html.v18146 body[data-page="harbor"] .harborCopy h2{font-size:27px!important;margin:3px 0!important}
html.v18146 body[data-page="harbor"] .harborCopy p{font-size:11px!important;margin:5px 0!important}
html.v18146 body[data-page="harbor"] .dashboardGrid{gap:8px!important;margin:8px 0!important}
html.v18146 body[data-page="harbor"] .stats4 div{padding:7px!important}
html.v18146 body[data-page="harbor"] .stats4 b{font-size:17px!important}
html.v18146 body[data-page="harbor"] .miniFleet img{height:50px!important}
html.v18146 body[data-page="harbor"] .hourlyProductionSummary{grid-template-columns:minmax(180px,1.2fr) repeat(6,minmax(90px,1fr))!important;gap:6px!important;margin-bottom:7px!important}
html.v18146 body[data-page="harbor"] .hourlyTotal,html.v18146 body[data-page="harbor"] .hourlyResource{min-height:62px!important;padding:7px!important}
html.v18146 body[data-page="harbor"] .hourlyTotal b{font-size:23px!important}
html.v18146 body[data-page="harbor"] .hourlyResource img{width:25px!important;height:25px!important}
html.v18146 body[data-page="harbor"] .hourlyResource b{font-size:15px!important}
html.v18146 body[data-page="harbor"] .productionPanel{padding:9px!important;margin-bottom:8px!important}
html.v18146 body[data-page="harbor"] .grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:7px!important}
html.v18146 body[data-page="harbor"] .buildingCard img{width:43px!important;height:43px!important}
html.v18146 body[data-page="harbor"] .buildingCard h3{font-size:14px!important;margin:3px 0!important}
html.v18146 body[data-page="harbor"] .buildingCard p{font-size:10px!important;line-height:1.25!important;margin:4px 0!important;min-height:25px!important}
html.v18146 body[data-page="harbor"] .productionRate{padding:6px!important;font-size:10px!important}
html.v18146 body[data-page="harbor"] .buildingCard .req{font-size:9.5px!important;padding:6px!important}

/* Mandatory first NPC lesson: one target, then one Attack button. */
html.v18146.v18146NpcTutorial #seaViewport .seaVessel.npc{pointer-events:none!important;opacity:.33!important;filter:grayscale(.6)!important}
html.v18146.v18146NpcTutorial #seaViewport .seaVessel.v18146RequiredNpc{pointer-events:auto!important;opacity:1!important;filter:none!important;z-index:180!important;outline:5px solid #ffd34e!important;outline-offset:7px!important;border-radius:50%!important;animation:v18146NpcPulse .8s ease-in-out infinite!important}
html.v18146 .seaVessel.v18146RequiredNpc::after{content:attr(data-required-npc);position:absolute;left:50%;bottom:calc(100% + 13px);transform:translateX(-50%) rotate(var(--counter-heading,0deg)) scale(var(--map-inverse,1));min-width:max-content;padding:7px 11px;border:2px solid #ffd15c;border-radius:7px;background:#2b1d02;color:#fff3a6;font-size:12px;font-weight:950;pointer-events:none;box-shadow:0 7px 18px #000d}
html.v18146 .v18146NpcGuide{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:250;width:min(620px,calc(100% - 500px));padding:9px 13px;border:2px solid #ffd15c;border-radius:9px;background:rgba(25,17,2,.94);box-shadow:0 8px 26px #000d;text-align:center;pointer-events:none}
html.v18146 .v18146NpcGuide b,html.v18146 .v18146NpcGuide span{display:block}
html.v18146 .v18146NpcGuide b{color:#ffd15c;font-size:13px}
html.v18146 .v18146NpcGuide span{font-size:11px;color:#fff2c6;margin-top:2px}
html.v18146 #seaInspect.v18146TutorialInspect{position:fixed!important;right:18px!important;top:148px!important;bottom:auto!important;width:305px!important;max-height:calc(100vh - 165px)!important;overflow:auto!important;z-index:650!important;border:2px solid #ffd15c!important;box-shadow:0 0 35px rgba(255,202,63,.7),0 18px 50px #000e!important}
html.v18146 #seaInspect.v18146TutorialInspect .heroActions{display:grid!important;grid-template-columns:1fr!important;position:static!important;background:none!important;padding:0!important}
html.v18146 #seaInspect.v18146TutorialInspect button[data-v18146-disabled="1"]{display:none!important}
html.v18146 .v18146RequiredAttack{position:relative!important;z-index:10!important;min-height:48px!important;outline:4px solid #ffe36b!important;outline-offset:4px!important;animation:v18146AttackPulse .7s ease-in-out infinite!important;font-size:15px!important}
html.v18146 .v18146RequiredAttack::after{content:attr(data-required-action);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);min-width:max-content;padding:6px 10px;border:2px solid #ffd15c;border-radius:7px;background:#2b1d02;color:#fff3a6;font-size:11px;font-weight:950;pointer-events:none}
@keyframes v18146NpcPulse{50%{filter:brightness(1.45) drop-shadow(0 0 20px #ffd24b)!important}}
@keyframes v18146AttackPulse{50%{filter:brightness(1.4);transform:translateY(-2px)}}

@media(max-width:1350px){
 html.v18146 body[data-page="shop"] .shopGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 html.v18146 body[data-page="rankings"] .leaderboards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html.v18146 body[data-page="inventory"] .itemGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 html.v18146 body[data-page="harbor"] .hourlyProductionSummary{grid-template-columns:repeat(4,1fr)!important}
 html.v18146 .v18146NpcGuide{width:min(520px,calc(100% - 420px))}
}
@media(max-width:900px){
 html.v18146 body[data-page="shop"] .shopGrid,html.v18146 body[data-page="rankings"] .leaderboards,html.v18146 body[data-page="inventory"] .itemGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html.v18146 body[data-page="dockyard"] .dockLayout,html.v18146 body[data-page="inventory"] .diabloInventory{grid-template-columns:1fr!important}
 html.v18146 body[data-page="dockyard"] .shipRail{height:auto!important;max-height:220px!important}
 html.v18146 body[data-page="dockyard"] .shipStage{grid-template-columns:1fr!important}
 html.v18146 .v18146NpcGuide{left:10px;right:10px;width:auto;transform:none}
 html.v18146 #seaInspect.v18146TutorialInspect{right:8px!important;top:112px!important;width:285px!important}
}