/* Legible game cards and one icon language for places, actions and ship equipment. */
[data-icon]::before{content:'';display:inline-block;width:19px;height:19px;flex-shrink:0;background:currentColor;-webkit-mask:var(--action-icon) center/contain no-repeat;mask:var(--action-icon) center/contain no-repeat;vertical-align:-4px;margin-right:9px}
#buildingPanel,#shipPanel,#battleReport{font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f3e9ce;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
#buildingPanel h2,#shipPanel h2,#shipPanel h3,#battleReport h2{font-family:Manrope,system-ui,sans-serif;font-weight:750;letter-spacing:-.65px;line-height:1.23;color:#f6ead0}
#buildingPanel h2,#shipPanel h2{font-size:25px}#shipPanel h3{font-size:25px;margin:15px 0 9px}
#buildingTitle::before,#shipStageName::before{width:27px;height:27px;color:#dfbc75;margin-right:10px;vertical-align:-5px}
#buildingPanel,#shipPanel{width:360px;border-color:#b79b6280;background:#102b36fa}
#buildingPanel>small,#shipPanel>small{font-size:10px;letter-spacing:1.4px}
#buildingFacts,#buildingPanel #buildingDescription,#buildingExtra,#shipStageDescription{font-size:13px!important;line-height:1.65;color:#cedbd5}
#buildingFacts{margin:0 0 13px}#buildingExtra{margin:11px 0}#buildingBenefit small{font-size:10px;letter-spacing:.6px}#buildingBenefit b{font-size:14px}#buildingPanel #buildingGain{font-size:12px!important}#buildingAbout{font-size:12px;margin:10px 0 14px;color:#aac3c1}
#buildingAction,#buildingSecondary,#shipUpgradeAction,#allBuildings,#shipIslandReturn{font-size:13px;line-height:1.55;min-height:42px}#allBuildings,#shipIslandReturn{color:#d0dfd9}#buildingAction,#buildingSecondary{padding:13px 10px}
#shipStages{grid-template-columns:repeat(4,1fr);gap:6px}#shipStages button{padding:10px 3px;font-size:11px;line-height:1.35;min-height:43px}
#shipStages button[data-level="20"]{border-color:#d1a953;color:#f4d18d}#shipStages button[aria-pressed="true"]{color:#122b33}#shipStageStatus{font-size:11px;letter-spacing:.2px;line-height:1.45}
.ship-stage-stats{gap:15px;padding:17px 0}.ship-stage-stats>div::before{float:left;margin:2px 9px 18px 0;color:#d9b86e;width:21px;height:21px}.ship-stage-stats b{font-size:21px;line-height:1.15}.ship-stage-stats span{font-size:11px;color:#bbcec8;line-height:1.5}
#shipUpgradeCost{font-size:12px;line-height:1.6}#shipUpgradeHint{font-size:11px;line-height:1.55;color:#bccfc9}.ship-purchase{background:#102b36;padding-top:12px}
#shipPanel[data-preview=true]{border-color:#d8ad5a}#shipPanel[data-preview=true] #shipStageStatus{color:#efcd8b;font-weight:700}
#harborBuildings button[data-icon]{position:relative;padding:15px 10px 15px 43px;font-size:12px;line-height:1.45}#harborBuildings button[data-icon]::before{position:absolute;left:12px;top:16px;width:23px;height:23px;color:#e3c486}#harborBuildings button span{font-size:10px;line-height:1.5;margin-top:4px}
#viewMenu{width:240px;max-width:240px}#viewMenu button,#viewMenu .docs-link{font-size:12px;line-height:1.4}
.site-pin::after{inset:2px;width:26px;height:26px;background:#183b43;border:1px solid #e2bc72;box-shadow:0 2px 8px #0007}.site-pin[data-icon]::before{position:absolute;inset:8px;width:15px;height:15px;margin:0;color:#ffe3a2;z-index:1}
.site-pin:hover::after,.site-pin:focus-visible::after{background:#36545a;box-shadow:0 0 0 5px #ead19b22,0 0 18px #f7d88666}.site-pin[data-icon=enemyship]::after{background:#713e36;border-color:#e5a589}.site-pin[data-icon=enemyship]::before{color:#ffe3c0}
.pin-label{font-size:12px;max-width:250px;white-space:normal;width:max-content}
footer>button[data-icon]::before{width:18px;height:18px;margin-right:6px}#upgrade,#voyageAction,#attack,#returnPort{font-size:12px}
#battleReport{position:fixed;right:24px;top:110px;width:355px;padding:24px;border:1px solid #d5aa72;border-radius:10px;background:#112c36fa;z-index:15;box-shadow:0 18px 70px #0007}
#battleReportClose{float:right;font-size:24px;border:0;background:transparent;padding:0 5px}#battleReport h2{font-size:26px;margin:13px 0}#battleReport p{font-size:13px;line-height:1.8;margin-bottom:20px;color:#d1ddd5}#battleReport>button:not(#battleReportClose){display:block;width:100%;font-size:13px;margin-top:9px;min-height:46px}
body:has(#battleReport:not([hidden])) footer{visibility:hidden}
@media(max-width:700px),(pointer:coarse) and (max-width:1000px){
 #buildingPanel,#shipPanel{width:auto}#buildingPanel{max-height:70dvh;padding:16px}#buildingPanel h2,#shipPanel h2{font-size:22px}#shipPanel h3{font-size:22px;margin:10px 0 7px}
 #buildingTitle::before,#shipStageName::before{width:23px;height:23px}#buildingPortrait{height:130px;margin:0 -16px 10px}
 #buildingFacts,#buildingPanel #buildingDescription,#buildingExtra,#shipStageDescription{font-size:12px!important;line-height:1.55}#buildingBenefit b{font-size:12px}#buildingPanel #buildingGain{font-size:11px!important}#buildingBenefit small{font-size:10px}
 #buildingAction,#buildingSecondary,#shipUpgradeAction,#allBuildings,#shipIslandReturn{font-size:12px}#buildingAbout{font-size:11px;margin:8px 0 11px}#buildingExtra{margin:8px 0}
 #shipPanel{max-height:47dvh;padding:15px 17px}#shipStageStatus{font-size:10px;margin-top:9px}#shipStages button{font-size:10px;min-height:39px;padding:8px 3px}
 .ship-stage-stats{padding:12px 0;gap:8px}.ship-stage-stats>div::before{float:none;display:block;margin:0 0 6px;width:18px;height:18px}.ship-stage-stats b{font-size:17px}.ship-stage-stats span{font-size:9px}#shipUpgradeCost{font-size:11px}#shipUpgradeHint{font-size:10px}#shipIslandReturn{margin-top:6px}
 #harborBuildings button[data-icon]{padding:13px 8px 13px 37px;font-size:11px}#harborBuildings button[data-icon]::before{left:9px;top:15px;width:20px;height:20px}#harborBuildings button span{font-size:9px}
 #viewMenu{width:220px;max-width:220px;max-height:calc(100dvh - 155px);overflow:auto}#viewMenu button,#viewMenu .docs-link{font-size:11px}
 .site-pin::after{inset:5px}.site-pin[data-icon]::before{inset:11px}.pin-label{font-size:11px}
 #upgrade,#voyageAction,#attack,#returnPort{font-size:11px}footer>button[data-icon]::before{display:block;margin:0 auto 5px;width:20px;height:20px}
 #battleReport{inset:auto 10px 12px;width:auto;padding:21px;max-height:70dvh;overflow:auto}#battleReport h2{font-size:24px}
}

#shipCardOpen{display:block;position:relative;width:100%;padding:5px 0 5px 39px;margin:4px 0 6px;text-align:left;border:0;background:none;border-radius:5px;color:#f8e9c9}#shipCardOpen::before{position:absolute;left:0;top:9px;width:29px;height:29px;color:#e2bc74;margin:0}#shipCardOpen:hover{background:#dcc08310}#shipName{display:block;font:750 21px/1.3 Manrope,system-ui,sans-serif;letter-spacing:-.6px}.ship-card-hint{display:block;font-size:10px;line-height:1.5;color:#d7c294;margin-top:4px}
#guideOpen{position:fixed;top:191px;left:24px;z-index:5;padding:11px 13px;max-width:280px;font-size:11px;text-align:left;line-height:1.6;background:#123440ec;border-color:#b89e635e;box-shadow:0 4px 20px #0003}
#guidePanel{position:fixed;left:24px;top:99px;width:380px;max-height:calc(100dvh - 124px);overflow:auto;padding:24px;background:#102b36fa;border:1px solid #baa06e;border-radius:10px;z-index:16;box-shadow:0 15px 60px #0007;font:13px/1.65 Manrope,system-ui,sans-serif}#guideClose{position:sticky;top:0;float:right;font-size:24px;padding:0 6px;border:0;background:#102b36}#guidePanel h2{font:750 26px/1.3 Manrope,system-ui,sans-serif;letter-spacing:-.7px;margin:12px 0}#guidePanel .guide-intro{font-size:13px;line-height:1.75}.guide-current{padding:18px;margin-top:20px;background:#d5b5760b;border:1px solid #d5b57638;border-radius:7px}.guide-current small{font-size:9px;letter-spacing:.9px}.guide-current h3{font-size:17px;margin:9px 0;line-height:1.4}.guide-current p{font-size:12px;line-height:1.75}.guide-current button{width:100%;font-size:12px;margin-top:14px;line-height:1.6}
#guideSteps{list-style:none;padding:0;margin:21px 0}#guideSteps li{display:flex;align-items:center;gap:11px;margin:12px 0;color:#b5c6c1;font-size:12px}#guideSteps .guide-check{display:grid;place-items:center;flex-shrink:0;width:25px;height:25px;border:1px solid #a2b4af50;border-radius:50%;font-size:11px}#guideSteps .current{color:#f1d092;font-weight:700}#guideSteps .current .guide-check{border-color:#e1bb70;background:#ddba7224}#guideSteps .complete{color:#a8cbaa}#guideSteps .complete .guide-check{color:#bde1b8;border-color:#bde1b866}.guide-tip{font-size:11px;line-height:1.7;color:#afc4bd}
body:has(#buildingPanel:not([hidden])) #guideOpen,body.ship-presenting #guideOpen,body:has(#battleReport:not([hidden])) #guideOpen{display:none}body:has(#guidePanel:not([hidden])) footer{visibility:hidden}
@media(max-width:700px),(pointer:coarse) and (max-width:1000px){
 #shipCardOpen{padding-left:29px;margin:0 0 4px}#shipCardOpen::before{width:22px;height:22px;top:8px}#shipName{font-size:17px}.ship-card-hint{font-size:9px;margin-top:3px}
 #guideOpen{top:149px;left:12px;max-width:235px;font-size:10px;padding:9px 11px}#guideOpen::before{width:16px;height:16px;margin-right:6px}
 #guidePanel{inset:auto 10px 12px;width:auto;max-height:76dvh;padding:21px}#guidePanel h2{font-size:24px}.guide-current{padding:15px;margin-top:16px}
}

#islandHint{display:none!important}

/* Keep the real upgrade action in view while ship details scroll independently. */
#shipPanel{display:flex;flex-direction:column;overflow:hidden}
#shipPanelClose{position:absolute;right:10px;top:9px;float:none}
#shipPanel>h2,#shipPanel>small,#shipStages,.ship-purchase,#shipIslandReturn{flex-shrink:0}
#shipStages{grid-template-columns:repeat(7,1fr)}#shipStages button{min-height:39px;font-size:12px}
.ship-scroll{min-height:80px;overflow:auto;overscroll-behavior:contain;padding-right:3px}
.ship-purchase{position:relative;border-top:1px solid #c5a56566;padding-top:10px}
#shipDevMax{display:block;width:100%;padding:9px 5px;font-size:11px;margin-top:9px;color:#ebc97f;border-color:#d4ad6855}
#shipUpgradeAction{min-height:46px;font-size:14px;font-weight:750}
@media(max-width:700px),(pointer:coarse) and (max-width:1000px){
 #shipPanel{max-height:52dvh;padding:14px 17px}#shipPanel h2{font-size:20px;margin-bottom:9px}
 #shipStages{gap:5px}#shipStages button{min-height:33px;padding:6px 2px;font-size:11px}
 #shipPanel h3{font-size:19px;margin-top:8px}#shipStageDescription{font-size:11px!important;line-height:1.45}
 .ship-stage-stats{padding:10px 0}.ship-stage-stats>div::before{display:none}.ship-stage-stats b{font-size:16px}
 #shipUpgradeAction{min-height:44px;font-size:13px;padding:10px}#shipUpgradeHint{margin-top:6px}
 #shipDevMax{margin-top:6px;padding:7px 4px;font-size:10px}#shipDevMax::before{width:16px;height:16px}
 #shipIslandReturn{font-size:10px;margin-top:5px;padding:4px 0;min-height:25px}
}

@media(max-width:700px){body:has(#enemyInfo:not([hidden])) #guideOpen{top:184px}}

/* GOLD opens its economy; the game itself keeps only four resource counters. */
#goldEconomyOpen{display:flex;align-items:center;gap:5px;padding:0;background:transparent;border:0;border-radius:3px;color:#ffe4a2;letter-spacing:1px;font-size:8px}
#goldEconomyOpen b{margin:0 5px 0 0}#goldEconomyOpen:hover{color:#fff4cd}#goldEconomyOpen span{border-bottom:1px dotted #d8ba77}
#goldEconomyPanel{position:fixed;top:95px;left:50%;transform:translateX(-50%);z-index:25;width:400px;max-height:calc(100dvh - 120px);overflow:auto;padding:24px;border:1px solid #c4a360;border-radius:10px;background:#102c35fa;box-shadow:0 20px 80px #0007}
#goldEconomyClose{float:right;position:sticky;top:0;padding:0 5px;background:#102c35;border:0;font-size:25px}#goldEconomyPanel h2{font:750 25px/1.3 Manrope,system-ui,sans-serif;margin:12px 0 20px;letter-spacing:-.6px}
.gold-balances{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 0;border-block:1px solid #ddc18133;margin-bottom:17px}.gold-balances b{display:block;font-size:23px;color:#f4d996}.gold-balances span{display:block;font-size:10px;margin-top:5px;color:#b6cec6}
#goldEconomyPanel p{font-size:12px;line-height:1.8}#goldEconomyPanel dl{margin:19px 0}#goldEconomyPanel dl>div{display:flex;justify-content:space-between;gap:15px;margin:12px 0;font-size:11px}#goldEconomyPanel dt{color:#b7c9c3}#goldEconomyPanel dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}.gold-rule{padding:13px;background:#e4c37d0b;border:1px solid #e4c37d33;border-radius:5px;margin-bottom:19px}.gold-rule strong{display:block;color:#e2c780}.gold-chain{font-size:10px!important;color:#a9c0b9;margin-top:7px}
.ship-info.has-cargo #cargo{display:block;color:#f0cb79;font-size:11px;line-height:1.6;margin:6px 0}
@media(max-width:700px),(pointer:coarse) and (max-width:1000px){
 #goldEconomyOpen{flex-direction:column;gap:0;font-size:6px;letter-spacing:.5px;justify-content:center}#goldEconomyOpen b{font-size:11px;margin:0}#goldEconomyOpen span{font-size:5.5px}
 #goldEconomyPanel{inset:auto 10px 12px;transform:none;width:auto;max-height:76dvh;padding:21px}#goldEconomyPanel h2{font-size:23px}.gold-balances b{font-size:21px}.ship-info.has-cargo #cargo{font-size:9px}
}

/* One reliable camera reset, accessible outside all panels. */
#villageHome{position:fixed;right:24px;top:78px;z-index:30;background:#163740f5;border-color:#dcc18a99;padding:11px 15px;font-size:12px;min-height:42px;box-shadow:0 3px 18px #0003}
#villageHome::before{width:18px;height:18px;color:#ebcc88}#villageHome:hover{background:#31545a}
#buildingDevFund{width:100%;min-height:40px;margin:7px 0;font-size:11px;color:#e3c385;border-style:dashed}
@media(max-width:700px),(pointer:coarse) and (max-width:1000px){#villageHome{right:10px;top:126px;padding:9px 12px;min-height:40px;font-size:11px}#villageHome::before{margin-right:6px;width:16px;height:16px}#guideOpen{max-width:calc(100vw - 130px)}}

#viewMenu{top:130px}@media(max-width:700px),(pointer:coarse) and (max-width:1000px){#viewMenu{top:174px;max-height:calc(100dvh - 190px)}}

#buildingPortrait{height:210px;background:radial-gradient(ellipse at 50% 62%,#34595b 0%,#183740 53%,#102b36 100%);border-top:1px solid #dab67420;border-bottom:1px solid #dab67430}
#buildingPreviewLevel{font-size:10px;border-color:#d9ba7870;backdrop-filter:blur(8px)}
@media(max-width:700px),(pointer:coarse) and (max-width:1000px){#buildingPortrait{height:155px}#buildingPanel{max-height:64dvh}}

#captainWelcome{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:#071b26c9;backdrop-filter:blur(10px)}#captainWelcome[hidden]{display:none}#shipNameForm{width:min(500px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:linear-gradient(145deg,#21434a,#0c252e);border:1px solid #c4ab7266;border-radius:16px;padding:clamp(24px,5vw,45px);box-shadow:0 30px 100px #0007}#shipNameForm small{font-size:10px;letter-spacing:2px;color:#dec18c}#shipNameForm h1{font:36px/1.15 Georgia,serif;margin:25px 0;color:#f4e8cb}#shipNameForm p{font-size:15px;line-height:1.7;color:#b8cecc}#shipNameForm label{display:block;font-size:12px;margin:25px 0 10px;color:#ddc28e}#firstShipName{width:100%;padding:16px;border:1px solid #d3bb8777;border-radius:7px;background:#081f28;font:19px system-ui;color:#f3e9d0;box-sizing:border-box}#firstShipName:focus{outline:2px solid #e2bd73;outline-offset:2px}#shipNameForm button{width:100%;margin-top:20px;min-height:52px}#shipNameForm>span{display:block;font-size:11px;color:#9bb4b4;margin-top:18px;text-align:center}

[data-emoji]::before{content:attr(data-emoji);background:none;mask:none;-webkit-mask:none;width:auto;height:auto;font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:20px;line-height:1.2}.site-pin[data-emoji]::before{inset:5px;width:24px;height:24px;font-size:21px;line-height:26px;text-align:center}.site-pin::after{width:32px;height:32px;inset:2px}.site-pin{min-width:38px;min-height:38px}#buildingTitle[data-emoji]::before{font-size:27px;width:34px;vertical-align:-2px}#harborBuildings .building-category{grid-column:1/-1;text-align:left;margin:18px 0 2px;font-size:10px;letter-spacing:1.5px;color:#dabc80}#harborBuildings .building-category:first-child{margin-top:0}#viewMenu{max-height:calc(100dvh - 180px);overflow-y:auto}
[data-icon=mine]::before,[data-icon=gold]::before,#goldEconomyOpen::before{content:'G';display:inline-grid;place-items:center;width:21px;height:21px;min-width:21px;border:2px solid #b47a16;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff0a3 0%,#ffd34b 35%,#e6a821 68%,#bd7b0d 100%);color:#925707;font:900 12px/1 Georgia,serif;box-shadow:inset 0 0 0 1px #fff1a590,0 1px 5px #0005;mask:none;-webkit-mask:none;vertical-align:-3px}.site-pin[data-icon=mine]::before{inset:8px;line-height:1;width:23px;height:23px;font-size:14px}#buildingTitle[data-icon=mine]::before{width:29px;height:29px;font-size:17px;margin-right:12px}#harborBuildings [data-icon=mine]::before{width:23px;height:23px}#goldEconomyOpen::before{margin-right:8px}
.site-pin{width:40px;height:40px;min-width:40px;min-height:40px}.site-pin::after{inset:6px;width:28px;height:28px;box-sizing:border-box}.site-pin[data-icon]::before,.site-pin[data-emoji]::before{inset:0;display:grid;place-items:center;width:40px;height:40px;min-width:0;margin:0;font-size:18px;line-height:1}.site-pin[data-icon=mine]::before{inset:10px;width:20px;height:20px;font-size:11px;box-sizing:border-box}#harborBuildings button[data-emoji]::before{display:grid;place-items:center;top:50%;transform:translateY(-50%);width:23px;height:23px;font-size:18px}#harborBuildings button[data-icon=mine]::before{font-size:12px}#buildingTitle[data-emoji]::before{font-size:24px;width:30px;height:30px}#buildingTitle[data-icon=mine]::before{font-size:16px;width:27px;height:27px}
/* Island actions are icon-only. Full names and effects appear after selection. */
.site-pin .pin-label,#buildingHover{display:none!important}