:root{--nautical-gold:#d5a653;--nautical-ink:#041a22;--topbar-height:74px}
.topbar{height:var(--topbar-height);padding:5px 10px;gap:12px;background:linear-gradient(110deg,#071b22,#06161b);border:1px solid #b28b45;box-shadow:inset 0 0 0 3px #09191c,0 2px 7px #0009;z-index:40;color:#efc678;font-family:Georgia,serif}.topbar .brand{display:flex;align-items:center;gap:13px;height:60px;border:1px solid #b28b45;border-radius:3px;padding:0 14px;font:400 30px Georgia,"Liberation Serif",serif;letter-spacing:0;color:#efc678}.brand svg{width:43px;height:43px;fill:none;stroke:currentColor;stroke-width:1.2}.topbar-nav{display:flex;align-items:center;gap:10px}.topbar .topbar-icon{width:auto;min-width:112px;height:49px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px;border:1px solid #b28b45;border-radius:3px;background:linear-gradient(#0b2329,#04171e);text-decoration:none;font:17px Georgia,"Liberation Serif",serif;color:#efc678}.topbar .topbar-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}.topbar-icon:hover{background:#16343c!important}.topbar-space{flex:1;min-width:0}.captain-menu summary{height:60px;display:flex;align-items:center;gap:13px;border:1px solid #b28b45;border-radius:3px;padding:0 14px;font:18px Georgia,"Liberation Serif",serif;white-space:nowrap}.captain-symbol{width:38px;height:38px;fill:none;stroke:#efc678;stroke-width:1.5}.wallet-bar{display:flex;gap:8px}.wallet-bar>span{height:60px;min-width:120px;border:1px solid #b28b45;border-radius:3px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:12px;font:700 22px Georgia,"Liberation Serif",serif;background:#04181f}.wallet-bar svg{width:30px;height:30px;fill:none;stroke:#e9ad38;stroke-width:1.6}.wallet-bar>span:last-child svg{stroke:#65d7ee}.captain-menu-body{background:#071e25;border-color:#b28b45}.captain-menu-body button{display:block;width:100%;text-align:left}#sea{height:auto;min-height:0}
#nauticalJournal{width:min(600px,calc(100vw - 24px));background:#081e25;color:#eedcb2;border:1px solid #d5a653;padding:22px}#nauticalJournal header{padding:0;background:none;height:auto;box-shadow:none;justify-content:space-between}#nauticalJournal ol{max-height:50vh;overflow:auto}#nauticalJournal li{padding:9px;border-bottom:1px solid #806a3a}#nauticalJournal::backdrop{background:#00101599}
.city-dialog{position:fixed;inset:var(--topbar-height) 0 0;margin:0;width:100vw;height:calc(100dvh - var(--topbar-height));max-width:none;max-height:none;border:0;box-shadow:none;padding:0;background:#073042;overflow:hidden}.city-dialog::backdrop{background:transparent}.city-header{position:absolute;inset:0 0 auto;height:0;min-height:0;padding:0;border:0;background:transparent;z-index:3}.city-header>div{display:none}#closeCity{position:absolute;right:24px;top:44vh;background:#071e25ef;border:1px solid #d5a653;border-radius:5px;padding:16px 22px;font:20px Georgia,"Liberation Serif",serif;color:#eedcb2;box-shadow:inset 0 0 0 3px #102a31,0 4px 15px #0008}#cityBack{position:absolute;left:24px;top:14px;z-index:6}.city-content{padding:0;max-height:none;height:100%;overflow:auto}.city-content>[data-city-pane="island"]{height:100%}.city-scene{height:100%;width:100%;aspect-ratio:auto;border:0;border-radius:0;background:#073042}.city-guidance{display:none}.island-building{padding:12px 18px;font:19px Georgia,"Liberation Serif",serif;background:#051d26ed;border:1px solid #d5a653;border-radius:5px;box-shadow:inset 0 0 0 3px #183038,0 4px 12px #0009;color:#f4e6bf;z-index:2}.island-building:hover{background:#173d43}#cityIslandCard{position:absolute;bottom:26px;left:16px;width:340px;padding:18px;background:#071c24eb;border:1px solid #d5a653;border-radius:5px;z-index:2;box-shadow:inset 0 0 0 3px #183038;color:#e9dbbd}#cityIslandCard h3{margin:0 0 12px;font:21px Georgia,"Liberation Serif",serif;color:#eac37d}#cityIslandCard p{font:14px/1.6 Georgia,"Liberation Serif",serif;margin:8px 0}.city-content>[data-city-pane="market"],.city-content>[data-city-pane="tavern"],.city-content>[data-city-pane="place"]{margin:55px auto 20px;padding:26px;width:min(1050px,calc(100% - 40px));background:#061e27f2;border:1px solid #ad8b49;max-height:calc(100% - 80px);overflow:auto}[data-city-pane="market"]{height:calc(100% - 100px)}
@media(max-width:1400px){.topbar{gap:7px}.topbar .brand{font-size:25px;padding:0 10px}.topbar .topbar-icon{min-width:86px;font-size:14px;padding:0 9px}.topbar-nav{gap:6px}.wallet-bar>span{min-width:95px;font-size:18px;padding:0 8px}.captain-menu summary{padding:0 10px;font-size:16px}}
@media(max-width:1050px){:root{--topbar-height:122px}.topbar{flex-wrap:wrap;align-content:center;gap:6px}.topbar .brand{height:51px;font-size:25px}.topbar-nav{order:5;width:100%;justify-content:center}.topbar .topbar-icon{height:46px;flex:1}.topbar-space{flex:1}.wallet-bar>span,.captain-menu summary{height:51px}.captain-symbol{width:27px}.wallet-bar>span{min-width:85px}.city-header #closeCity{top:18px;right:12px;font-size:16px;padding:11px}.island-building{font-size:15px;padding:9px 12px}#cityIslandCard{width:280px;font-size:12px;bottom:15px}}
@media(max-width:600px){:root{--topbar-height:116px}.topbar{padding:4px;gap:4px}.topbar .brand{font-size:20px;padding:0 6px;height:48px;gap:5px}.brand svg{width:25px;height:25px}.captain-menu summary{font-size:13px;padding:0 6px;height:48px;gap:5px}.captain-symbol{display:none}.wallet-bar{gap:4px}.wallet-bar>span{min-width:59px;font-size:13px;padding:0 5px;height:48px;gap:4px}.wallet-bar svg{width:19px;height:19px}.topbar-nav{gap:4px}.topbar .topbar-icon{min-width:0;padding:0 4px;font-size:11px;gap:4px;flex-direction:column;height:54px}.topbar .topbar-icon svg{width:20px;height:20px}.topbar-space{display:none}#cityIslandCard{left:8px;bottom:8px;width:calc(100% - 16px);padding:10px}#cityIslandCard h3{font-size:16px;margin-bottom:4px}#cityIslandCard p{font-size:11px;line-height:1.4;margin:3px 0}.island-building{font-size:12px;padding:7px 8px}.city-content>[data-city-pane="market"],.city-content>[data-city-pane="tavern"],.city-content>[data-city-pane="place"]{width:calc(100% - 16px);padding:12px}.city-header #closeCity{font-size:13px;top:10px}}

body>header.topbar{height:var(--topbar-height);min-height:var(--topbar-height);flex-wrap:nowrap;padding:5px 10px;gap:12px}.topbar .wallet-bar{height:auto;padding:0;gap:8px;margin:0;border:0;box-shadow:none;border-radius:0}.topbar .wallet-bar output{font:700 22px Georgia}.captain-menu summary{max-width:none}.topbar .wallet-bar>span{border:1px solid #b28b45}.topbar .wallet-bar>span:last-child svg{stroke:#65d7ee}@media(max-width:1400px){body>header.topbar{gap:7px}.topbar .wallet-bar output{font-size:18px}}@media(max-width:1050px){body>header.topbar{flex-wrap:wrap;align-content:center;gap:6px}.topbar .wallet-bar{order:0;margin:0;gap:6px}.captain-menu{order:0}}@media(max-width:600px){body>header.topbar{gap:4px;padding:4px;justify-content:space-between}.topbar .wallet-bar output{font-size:13px}.topbar .wallet-bar{gap:4px}.captain-menu{order:0}}

.city-dialog{z-index:35}.topbar .wallet-bar>span:last-child svg{stroke:#65d7ee}.topbar .captain-menu-body{z-index:80}

#portAccess{z-index:31}@media(max-width:600px){#portAccess{bottom:175px;max-width:calc(100% - 18px)}}
@media(max-width:600px){body>header.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:48px 54px;height:116px;min-height:116px;align-content:start;gap:4px}.topbar .brand{min-width:0;font-size:18px;gap:4px;padding:0 5px;overflow:hidden}.topbar .brand svg{width:23px;height:23px;flex-shrink:0}.captain-menu{grid-column:2;grid-row:1}.captain-menu summary{max-width:70px;overflow:hidden;font-size:12px}.topbar .wallet-bar{grid-column:3;grid-row:1;gap:3px}.topbar .wallet-bar>span{min-width:0;padding:0 4px;gap:3px}.topbar .wallet-bar output{font-size:11px}.topbar .wallet-bar svg{width:15px;height:15px}.topbar-nav{grid-column:1 / -1;grid-row:2;order:0}.topbar .topbar-icon{font-size:11px}.topbar-space{display:none}}

body.island-view #helm,body.island-view .chat,body.island-view .minimap,body.island-view .wind-widget{z-index:38}@media(max-width:600px){body.island-view #helm,body.island-view .chat,body.island-view .minimap,body.island-view .wind-widget{display:none}}
@media(min-width:601px){body.island-view #helm{top:auto!important;bottom:20px!important;left:50%!important;transform:translateX(-50%)}body.island-view .chat{top:auto!important;bottom:20px!important;right:16px!important;left:auto!important}}

/* Compact layout from the corrected user reference. */
@media(min-width:1051px){:root{--topbar-height:50px}body>header.topbar{padding:3px 6px;gap:12px}.topbar .brand{height:42px;font-size:26px;padding:0 12px;gap:10px}.topbar .brand svg{width:31px;height:31px}.topbar .topbar-icon{height:38px;font-size:15px;padding:0 10px}.topbar .topbar-icon svg{width:25px;height:25px}.captain-menu summary{height:42px;font-size:16px;padding:0 12px}.captain-symbol{width:30px;height:30px}.topbar .wallet-bar>span{height:42px}.topbar .wallet-bar output{font-size:19px}.topbar .wallet-bar svg{width:26px;height:26px}}
@media(min-width:601px){#cityIslandCard{top:10%;left:6%;bottom:auto;width:290px;padding:9px;border-radius:3px}#cityIslandCard h3{font-size:20px;line-height:25px;margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #8c713c}.city-card-body{display:flex;align-items:flex-start;gap:10px}.city-card-body>img{width:80px;height:80px;object-fit:cover;border:1px solid #a68443;border-radius:2px;flex-shrink:0}.city-card-body>div{min-width:0}#cityIslandCard p{font-size:11px;line-height:1.4;margin:3px 0}body.island-view #helm{bottom:84px!important}body.island-view .chat{bottom:84px!important}}
@media(max-width:600px){.city-card-body{display:flex;gap:9px}.city-card-body>img{width:54px;height:54px;object-fit:cover;border:1px solid #a68443;flex-shrink:0}}

/* Building windows remain over the island; only their contents scroll. */
.city-content{position:relative;overflow:hidden}
.city-content>[data-city-pane]:not([data-city-pane="island"]){position:absolute;z-index:5;top:5%;left:50%;transform:translateX(-50%);margin:0;display:flex;flex-direction:column;height:auto;max-height:90%;padding:0;overflow:hidden;box-shadow:0 12px 40px #0009}
.city-content>[data-city-pane][hidden]{display:none}
.building-content{min-height:0;overflow:auto;padding:26px 26px 12px}
.building-content>h3,.market-heading,.tavern-preview>h3{padding-right:40px}
.building-close-x{position:absolute;z-index:2;right:10px;top:10px;width:34px;height:34px;padding:0;font-size:25px;line-height:30px}
.building-footer{flex-shrink:0;text-align:center;padding:12px 20px;background:#061e27;border-top:1px solid #705e3b}
.building-footer button{min-width:150px}
body.building-view .city-dialog{z-index:45}
body.building-view #closeCity{visibility:hidden}
@media(max-width:600px){.building-content{padding:18px 12px 10px}.city-content>[data-city-pane]:not([data-city-pane="island"]){padding:0;top:3%;max-height:94%}.building-footer{padding:10px}}

#portApproachCard{position:absolute;z-index:7;width:290px;padding:10px;background:#071c24eb;border:1px solid #a68443;border-radius:3px;pointer-events:none;color:#e9dbbd;font:12px/1.45 Georgia,serif}
#portApproachCard[hidden]{display:none}#portApproachCard h3{margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #8c713c;font:20px Georgia,serif;color:#eac37d}.port-approach-body{display:flex;gap:10px}.port-approach-body img{width:76px;height:76px;object-fit:cover;border:1px solid #a68443}.port-approach-body p{margin:3px 0}#portApproachHint{margin:10px 0 0;padding-top:8px;border-top:1px solid #8c713c;color:#efc678}body.island-view #portApproachCard{display:none}
@media(max-width:600px){#portApproachCard{width:220px;font-size:11px}.port-approach-body img{width:50px;height:50px}#portApproachCard h3{font-size:17px}}