:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5ead2;background:#083c46;--gold:#eec46a;--glass:rgba(6,32,37,.85)}
#specialWeapons{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:108px;display:flex;gap:8px}#specialWeapons button{width:94px;min-height:54px;font-size:11px;padding:7px}#specialWeapons span{display:block;font-size:9px;font-weight:400;color:#dfc681;margin-top:5px}#autoButton[aria-pressed=true]{border-color:#92c3a9;background:#214c42dd}.armed #contextActions{bottom:172px}
@media(max-width:719px){#specialWeapons{right:max(14px,env(safe-area-inset-right));bottom:94px;gap:6px}#specialWeapons button{width:70px;min-height:50px;font-size:9px}.armed #contextActions{bottom:192px}}
@media(max-height:500px){#specialWeapons{bottom:88px}#specialWeapons button{min-height:45px}.armed #contextActions{bottom:147px}}
*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden}body{background:#083c46;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #90b3ab66;background:var(--glass);border-radius:10px;min-height:44px;padding:10px 15px;font-weight:700;touch-action:none}button:hover{border-color:var(--gold)}button:active{filter:brightness(1.15)}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.45;cursor:default}.yard-panel button,.panel button{touch-action:manipulation}[hidden]{display:none!important}#world{display:block;width:100%;height:100%;touch-action:none}a{color:inherit;text-decoration:none}
#hud{position:absolute;top:max(14px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;gap:10px;align-items:center;pointer-events:none}.identity{display:grid;gap:3px;background:var(--glass);padding:11px 14px;border-radius:10px}.identity strong{font-family:Georgia,serif;letter-spacing:.075em;font-size:18px}.identity span{font-size:10px;color:#b6d5ce;letter-spacing:.07em}.resources{margin-left:auto;display:flex;gap:14px;background:var(--glass);padding:13px 15px;border-radius:10px;font-size:12px}.resources b{color:var(--gold);font-size:17px}#menuButton{pointer-events:auto;min-width:44px;font-size:18px}.hull{position:absolute;top:89px;left:max(18px,env(safe-area-inset-left));width:210px;background:var(--glass);padding:10px 12px;border-radius:10px;display:grid;grid-template-columns:1fr auto;gap:5px;font-size:12px}.hull>span{letter-spacing:.09em}.hull .healthTrack{grid-column:1/3}.hull small{font-size:10px;color:#b8d4ca}.hull small:last-child{text-align:right}.healthTrack{height:6px;background:#102726;border-radius:8px;overflow:hidden}.healthTrack i{display:block;height:100%;background:#76cfbd;width:100%;transition:width .15s}#objective{position:absolute;top:174px;left:max(18px,env(safe-area-inset-left));font-size:13px;max-width:255px;color:#edf9ee;text-shadow:0 2px 6px #002633;pointer-events:none}
#map{position:absolute;top:85px;right:max(18px,env(safe-area-inset-right));width:112px;height:112px;background:#052e37ad;border:1px solid #d4eac153;border-radius:50%;pointer-events:none}#cameraControls{position:absolute;top:207px;right:max(18px,env(safe-area-inset-right));display:grid;grid-template-columns:1fr 1fr;gap:5px}#cameraControls button{min-height:34px;padding:6px 8px;font-size:10px}#toast{position:absolute;top:32%;left:50%;transform:translateX(-50%);background:var(--glass);padding:12px 18px;border:1px solid #eec46a70;border-radius:12px;text-align:center;width:max-content;max-width:85%;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}#enemyHud{position:absolute;top:25%;left:50%;transform:translateX(-50%);min-width:145px;background:var(--glass);padding:10px 14px;border-radius:10px;text-align:center;font-size:12px;letter-spacing:.05em}#enemyHud small{display:block;color:#e6a77f;font-size:9px;margin:4px 0 8px}#enemyHealth{background:#e69b79}
#controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}#helm{width:124px;height:124px;border:1px solid #cfddc384;border-radius:50%;background:#062e3770;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:relative;pointer-events:auto;touch-action:none}#helmHint{position:absolute;bottom:9px;width:100%;text-align:center;font-size:11px;letter-spacing:.1em;color:#cae2da}#thumb{position:absolute;width:46px;height:46px;border:2px solid #efd69899;border-radius:50%;background:#cfb27544;left:38px;top:38px;pointer-events:none}.actions{display:flex;align-items:flex-end;gap:9px;pointer-events:auto}.cannon{width:110px;height:76px;border-color:#d7bb7773;font-size:13px;--reload:0%;background:linear-gradient(to top,#3b4c43 var(--reload),#092e34e6 var(--reload))}.cannon span{display:block;font-size:10px;color:#c6d8c6;margin-top:7px;font-weight:400}#sail{font-size:11px;height:62px;min-width:70px;padding:9px}.actions b{display:block;margin-top:5px;color:var(--gold);font-size:13px}#contextActions{position:absolute;bottom:calc(160px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:max-content;max-width:94%}#contextActions button{font-size:11px;white-space:nowrap}#dockButton{background:var(--gold);color:#173c3d;border-color:var(--gold)}#repairButton{width:92px;height:62px;padding:7px 6px;font-size:12px;color:var(--gold);border-color:#eec46a99;--progress:0%;background:linear-gradient(to top,#6b5a2e var(--progress),#092e34e6 var(--progress))}#repairButton span{display:block;font-size:9px;font-weight:400;color:#e9dcb4;margin-top:5px;white-space:nowrap}
.veil{position:absolute;inset:0;background:#04283188;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));touch-action:pan-y;overflow:auto}.panel{width:min(480px,100%);max-height:100%;overflow:auto;border:1px solid #b4c8b958;background:#0a3037f2;border-radius:18px;padding:26px;box-shadow:0 24px 80px #00141c70}.eyebrow{font-size:10px;letter-spacing:.14em;color:var(--gold);font-weight:700}h1{font-family:Georgia,serif;font-weight:400;font-size:30px;line-height:1.1;margin:10px 0 12px}.panel p{font-size:15px;line-height:1.5;color:#d1e0d5;margin:12px 0 16px}.panel button,.menu-link{display:block;width:100%;margin-top:9px;text-align:center}.menu-link{border:1px solid #90b3ab66;border-radius:10px;min-height:44px;padding:12px;font-size:13px;font-weight:700}.primary{background:var(--gold);border-color:var(--gold);color:#193838}.panel .fine{font-size:12px;color:#9cb9b3;margin-bottom:0}.instructions{border-block:1px solid #8fa79940;padding-block:4px}.instructions p{font-size:13px;line-height:1.5}
#shipwright{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:flex-end;padding:16px max(16px,var(--safe-r)) max(16px,var(--safe-b)) max(16px,var(--safe-l))}.yard-panel{pointer-events:auto;width:520px;max-width:58%;max-height:calc(100% - 32px);background:#092e35f2;border:1px solid #acba9e6b;border-radius:16px;display:flex;flex-direction:column;box-shadow:0 12px 50px #00232c66;overflow:hidden;touch-action:pan-y}.yard-actions{display:flex;gap:5px;padding:11px 13px;border-top:1px solid #94ab9433;background:#0b3036}.yard-actions button{flex:1;font-size:10px;padding:9px 5px}.at-yard #hud,.at-yard .hull,.at-yard #objective,.at-yard #contextActions,.at-yard #map{visibility:hidden}.at-yard #cameraControls{left:max(18px,var(--safe-l));right:auto;top:auto;bottom:max(16px,var(--safe-b));grid-template-columns:repeat(4,auto)}
/* P3 shipwright: icon tabs and part cards, no stat grid. Scoped under #shipwright and new class names, so it wins over the older
   yard rules above (the P2 stat grid, tab and card rules are gone).
   #shipwright is a size container: the panel follows the box it is given, down to a framed game area about 300 px tall. In every box
   its tabs and buttons stay at least 44 px tall and its text at least 11 px. */
#shipwright{container-type:size}
#shipwright .yard-panel{width:min(500px,58%);max-width:none;max-height:100%;border-radius:14px;background:#082b32f5}
.yard-head{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px 9px;border-bottom:1px solid #94ab9433}
.yard-title{flex:1 1 auto;min-width:0}
.yard-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--gold)}
#yardName{margin:3px 0 0;font-size:20px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#yardSpecialty{margin:4px 0 0;font-size:11px;line-height:1.35;color:#b9cdbf}
.yard-funds{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 11px;max-width:64%;font-size:13px;font-weight:700;color:#f3e6c4;font-variant-numeric:tabular-nums}
.fund{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.fund .icon{flex:none;width:16px;height:16px}
.fund-gold{color:#f4cb69}.fund-wood .icon{color:#d9a86c}.fund-iron .icon{color:#b9c8d0}.fund-cloth .icon{color:#efe3c4}
#yardTabs{position:relative;flex:none;display:flex;gap:2px;padding:5px 6px 0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none;background:#06252a;border-bottom:1px solid #94ab9433}
#yardTabs::-webkit-scrollbar{display:none}
#yardTabs button{flex:1 0 auto;min-width:40px;min-height:44px;display:grid;justify-items:center;align-content:center;gap:3px;padding:5px 5px 6px;border:0;border-radius:9px 9px 0 0;background:none;color:#a7c2b7;font-size:11px;font-weight:650;line-height:1;letter-spacing:0}
#yardTabs .icon{width:24px;height:24px}
#yardTabs button[aria-selected=true]{color:#f6db99;background:#14434a;box-shadow:inset 0 -2px #eec46a}
#yardTabs.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),#0000)}
#yardTabs.more-left{-webkit-mask-image:linear-gradient(90deg,#0000,#000 34px);mask-image:linear-gradient(90deg,#0000,#000 34px)}
#yardTabs.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,#0000,#000 34px,#000 calc(100% - 34px),#0000);mask-image:linear-gradient(90deg,#0000,#000 34px,#000 calc(100% - 34px),#0000)}
#yardCards{flex:1 1 auto;min-height:0;display:grid;align-content:start;gap:7px;padding:8px 8px 10px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
.yard-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding-right:9px;border:1px solid #8aab9838;border-radius:11px;background:#0f383d99}
.yard-card.selected{border-color:#eec46ab3;background:#284a44b8}
.yard-pick{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;min-height:0;padding:9px 0 9px 9px;border:0;border-radius:11px 0 0 11px;background:none;text-align:left;font-weight:400}
.yard-art{display:grid;justify-items:center;gap:4px;color:#e6cb84}
.yard-art .icon{width:34px;height:34px}
.yard-art.empty{color:#93ada3}
.pips{display:flex;gap:3px}.pips i{width:6px;height:6px;border:1px solid currentColor;border-radius:50%;opacity:.55}.pips i.on{background:currentColor;opacity:1}
.yard-text{display:grid;gap:3px;min-width:0}
.yard-name strong{font-family:Georgia,serif;font-size:17px;font-weight:400;line-height:1.15;color:#f6ecd4}
.yard-flag{display:inline-block;margin-left:7px;padding:3px 5px 2px;border-radius:4px;background:#97d2bf;color:#0b3036;font:800 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;vertical-align:3px}
.yard-line{font-size:12px;line-height:1.3;color:#bdd0c3}
.yard-price{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;font-weight:700;color:#f0dfb4;font-variant-numeric:tabular-nums}
.yard-price .icon{width:15px;height:15px}
.fund.lacking{color:#ff9f86}
.yard-act{min-width:88px;max-width:126px;min-height:44px;padding:6px 10px;border:1px solid #eec46aa6;border-radius:9px;background:#0b2f35;color:var(--gold);font-size:12px;line-height:1.2;text-align:center}
.yard-act .icon{width:14px;height:14px;margin:0 4px -2px 0}
.buy .yard-act{background:var(--gold);border-color:var(--gold);color:#163536}
.yard-act:disabled{opacity:1;cursor:default}
.fitted .yard-act{background:#123f3a;border-color:#8fd3b466;color:#a3e2c6}
.locked .yard-act{background:none;border:1px dashed #e7a88a73;color:#f1b496;font-size:11px;font-weight:650}
#shipwright .yard-actions{position:static;flex:none;padding:8px 9px;background:#0a2d33}
#shipwright .yard-actions button{min-height:44px;padding:8px;font-size:12px;letter-spacing:.12em}
/* Landscape phones: a box of about 340-410 px. */
@container (max-height:520px){#shipwright .yard-panel{width:min(480px,58%)}.yard-head{padding:7px 12px 6px}#yardName{margin-top:2px;font-size:17px}#yardSpecialty{display:none}.yard-funds{gap:3px 10px;font-size:12.5px}#yardTabs{padding:4px 5px 0}#yardTabs button{min-width:38px;padding:4px 4px 5px}#yardTabs .icon{width:22px;height:22px}#yardCards{gap:6px;padding:7px 7px 9px}.yard-pick{grid-template-columns:34px minmax(0,1fr);gap:9px;padding:7px 0 7px 8px}.yard-art .icon{width:30px;height:30px}.yard-name strong{font-size:15.5px}.yard-line,.yard-price{font-size:11.5px}.yard-act{min-width:84px;font-size:11.5px}#shipwright .yard-actions{padding:6px 8px}#shipwright .yard-actions button{font-size:11.5px}}
/* The framed game area under the Claude app header (about 330 px) and other short boxes: one-line header, slimmer rows. */
@container (max-height:380px){.yard-kicker{display:none}#yardName{margin:0;font-size:16px}.yard-head{padding:6px 11px}#yardTabs button{gap:2px;padding:3px 3px 4px}#yardTabs .icon{width:21px;height:21px}#yardCards{gap:5px;padding:6px 6px 8px}.yard-pick{gap:8px;padding:6px 0 6px 7px}.yard-text{gap:2px}.yard-name strong{font-size:15px}.yard-line,.yard-price{font-size:11px}#shipwright .yard-actions{padding:5px 7px}}
/* The smallest boxes (300 px or less inside the padding: 844x390, 852x393 and 667x375 framed): slimmer tabs and rows. */
@container (max-height:300px){.yard-head{padding:4px 10px}#yardName{font-size:15px}.yard-funds{gap:2px 9px;font-size:12px}.fund .icon{width:15px;height:15px}#yardTabs{padding:3px 4px 0}#yardTabs button{gap:1px;padding:2px 3px 3px}#yardTabs .icon{width:19px;height:19px}#yardCards{gap:4px;padding:5px 5px 6px}.yard-pick{grid-template-columns:30px minmax(0,1fr);gap:7px;padding:5px 0 5px 6px}.yard-art{gap:3px}.yard-art .icon{width:26px;height:26px}.pips i{width:5px;height:5px}.yard-name strong{font-size:14px}.yard-price .icon{width:13px;height:13px}.yard-act{min-width:78px;font-size:11px}#shipwright .yard-actions{padding:4px 6px}}
/* Narrow portrait windows: the shipwright is a sheet along the bottom (phones are asked to turn sideways). */
@media(max-width:719px) and (min-height:501px){#shipwright .yard-panel{width:100%;max-height:64%;border-radius:18px 18px 0 0}}
@media(max-width:719px){#hud{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));gap:6px}.identity{padding:9px 10px}.identity strong{font-size:14px}.identity span{font-size:8px;letter-spacing:.025em}.resources{gap:8px;padding:10px;font-size:10px}.resources b{font-size:14px}#menuButton{padding:8px 12px}.hull{left:max(10px,env(safe-area-inset-left));top:78px;width:183px}#objective{left:max(10px,env(safe-area-inset-left));top:162px;width:202px;font-size:12px}#map{right:max(10px,env(safe-area-inset-right));top:77px;width:87px;height:87px}#cameraControls{right:max(10px,env(safe-area-inset-right));top:173px;gap:4px}#cameraControls button{font-size:9px;min-height:32px;padding:5px 7px}#controls{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}#helm{width:106px;height:106px}#thumb{left:29px;top:29px}.actions{gap:6px}.cannon{width:77px;height:70px;padding:8px 4px;font-size:10px}.cannon span{font-size:9px}#sail{min-width:56px;height:58px;font-size:9px;padding:6px}#contextActions{bottom:134px;width:95%}#contextActions button{font-size:10px;padding:9px 11px;min-height:40px}#repairButton{width:78px;height:58px;font-size:10px}.panel{padding:22px}#shipwright{padding:0;align-items:flex-end}.yard-panel{max-width:none;width:100%;max-height:64%;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}.yard-actions{padding:9px 10px}.at-yard #cameraControls{top:max(12px,env(safe-area-inset-top));bottom:auto;left:max(12px,var(--safe-l));grid-template-columns:1fr 1fr}}
@media(max-height:500px){#hud{top:8px}.identity{padding:7px 9px}.hull{top:67px;width:183px}#objective{top:148px;font-size:11px}#map{top:68px;width:74px;height:74px}#cameraControls{top:150px}#helm{width:87px;height:87px}#thumb{left:19px;top:19px}#helmHint{bottom:5px;font-size:9px}#contextActions{bottom:113px}.cannon{height:59px}#repairButton{height:59px}.yard-panel{max-height:94%;max-width:58%;width:520px;border-radius:12px}#shipwright{padding:10px max(10px,var(--safe-r)) max(10px,var(--safe-b)) max(10px,var(--safe-l));align-items:center}.yard-actions{padding:7px 8px}.yard-actions button{min-height:36px;padding:7px 5px}.at-yard #cameraControls{top:auto;bottom:max(10px,var(--safe-b));grid-template-columns:repeat(4,auto)}#enemyHud{top:8px;padding:6px 12px}#enemyHud small{margin:2px 0 5px}.yard-panel{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.yard-actions{position:sticky;bottom:0;z-index:1;padding:5px 8px}.yard-actions button{min-height:34px}#repairButton{width:auto;min-width:78px}#repairButton span,.cannon span,#specialWeapons span,#specialWeapons button,#helmHint,#enemyHud small,#cameraControls button,#sail,.identity span,.resources,.hull small,.eyebrow,.yard-actions button{font-size:11px}}
@media(max-height:360px){#cameraControls{top:90px;right:calc(max(18px,env(safe-area-inset-right)) + 82px);grid-template-columns:repeat(4,auto)}}
@media(max-height:360px) and (max-width:719px){#cameraControls{right:calc(max(10px,env(safe-area-inset-right)) + 82px)}}

#landscapeGate{z-index:100;text-align:center}#landscapeGate .panel{max-width:360px}#landscapeGate h1{font-size:28px}#landscapeGate p{line-height:1.5}
#cameraControls #lockButton{position:absolute;right:calc(100% + 6px);top:0;width:78px;min-height:max(44px,100%);padding:6px 4px;display:grid;place-content:center;gap:4px;font-size:12px;letter-spacing:.08em;color:var(--gold);border-color:#eec46aa6;background:#2e2b17e6}#lockButton span{display:block;font-size:11px;font-weight:400;letter-spacing:.04em;color:#dfc681}#cameraControls #lockButton.locked{background:#6e2519e8;border-color:#ff8a66;color:#ffe3b4;box-shadow:0 0 0 2px #ff6b4a40}#lockButton.locked span{color:#ffc9b0;font-weight:700}#lockButton b::before{content:"";display:inline-block;width:7px;height:7px;margin:0 5px 1px 0;border:2px solid currentColor;border-radius:50%;vertical-align:middle}#lockButton.locked b::before{background:#ff6b4a}
#enemyHud.locked{border:1px solid #ff8a66b3;box-shadow:0 0 0 2px #ff6b4a33}#enemyHud.locked #enemyName::before{content:"";display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border:2px solid #ff8a66;border-radius:50%;background:#ff6b4a;vertical-align:middle}
.cannon.lock-side{position:relative;border-color:#ff8a66;box-shadow:0 0 0 2px #ff6b4a59}.cannon.lock-side::after{content:"TARGET";position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:1px 6px;border-radius:5px;background:#6e2519;color:#ffe3b4;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.3;white-space:nowrap}
/* P2b: enemy stance panel, ROGUE pill and alert toasts. */
#enemyHud{border:1px solid #e6a77f40}#enemyName{font-family:Georgia,serif;font-size:15px;letter-spacing:.02em}#enemyHud small{letter-spacing:.09em}#enemyHud[data-stance=hostile] small{color:#ff7d6c}#enemyHud[data-stance=hostile] #enemyHealth{background:#e8705f}#enemyHud[data-faction=british][data-stance=neutral]{border-color:#9cc3ff70}#enemyHud[data-faction=british][data-stance=neutral] small{color:#a9cdff}#enemyHud[data-faction=british][data-stance=neutral] #enemyHealth{background:#a9cdff}#enemyHud[data-faction=british][data-stance=hostile]{border-color:#ff6b5e99;box-shadow:inset 0 0 0 1px #3f86ff50}#enemyHud[data-faction=boss] small{color:#d4a6ff}#enemyHint{display:block;font-style:normal;font-size:11px;color:#d7e6ff;margin-top:6px;letter-spacing:.02em}
#rogue{position:absolute;top:174px;left:max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border-radius:999px;background:#a8231c;border:1px solid #ff8d7e;color:#fff;font-size:12px;letter-spacing:.12em;box-shadow:0 2px 10px #3a050388;pointer-events:none;animation:roguePulse 1.4s ease-in-out infinite}#rogue b{font-weight:800}#rogue b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:7px;vertical-align:1px}#rogueTime{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.05em;padding-left:9px;border-left:1px solid #ffffff60}
@keyframes roguePulse{50%{box-shadow:0 0 0 4px #ff4a3a40,0 2px 10px #3a050388}}
.rogue #objective,.at-yard #rogue{visibility:hidden}#toast.alert{border-color:#ff7b6b;background:#3a0f0deb}
@media(max-width:719px){#rogue{top:162px;left:max(10px,env(safe-area-inset-left));font-size:11px}}
/* P3 HUD. HUD text is never under 11 px and HUD buttons are at least 44 px (these override the P2 sizes above). */
:root{--frame-top:78px;--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px)}
.identity span,.hull small,.cannon span,#repairButton span,#specialWeapons span,#specialWeapons button,#enemyHud small,#helmHint,#sail,#contextActions button,.panel .eyebrow{font-size:11px}#cameraControls button{min-width:44px;min-height:44px;font-size:11px}#cameraControls #zoomIn,#cameraControls #zoomOut{font-size:19px;line-height:1}#contextActions button{min-height:44px}.narrow .resources,.narrow .cannon{font-size:11px}
/* Game box. voyage.js sets .low (box 500 px tall or less), .short (360 or less), .tiny (300 or less) and .narrow (719 px wide or less) on the body from
   the game box, not the viewport. Framed (.framed: inside the Claude app on a touch device, which draws its own header over the top of
   the page): the box starts --frame-top down and the canvas, every HUD element, the shipwright and every veil lay out inside it. */
#game{position:relative}.framed #game{position:absolute;top:var(--frame-top);left:0;right:0;bottom:0;width:auto;height:auto}
/* Tall boxes (desktop) follow the same plan as phones: enemy panel top center, toasts down the left under the objective. */
#enemyHud{top:max(14px,env(safe-area-inset-top))}body:not(.at-yard) #toast{top:222px;left:max(18px,var(--safe-l));transform:none;width:max-content;max-width:min(380px,calc(33.3% - 22px));padding:10px 14px;text-align:left}
/* Phone layout (.low): top bar, hull panel, objective or ROGUE and toasts down the left; enemy panel top center; map with the camera
   grid beside it and LOCK under it on the right; special weapons over the guns; DOCK beside the rudder pad. The middle of the screen
   (where the lock keeps the target) stays clear. */
.low{--top:calc(8px + var(--header,0px));--pad:14px;--el:max(var(--pad),var(--safe-l));--er:max(var(--pad),var(--safe-r));--eb:max(var(--pad),var(--safe-b));--map:74px;--gun:58px;--hull-top:calc(62px + var(--header,0px));--note-top:calc(128px + var(--header,0px));--toast-top:calc(166px + var(--header,0px))}
.low.narrow{--pad:10px}
.short{--top:calc(6px + var(--header,0px));--pad:10px;--gun:54px;--hull-top:calc(6px + var(--header,0px));--note-top:calc(72px + var(--header,0px));--toast-top:calc(109px + var(--header,0px))}.tiny{--gun:50px}
.low #hud{top:var(--top);left:var(--el);right:var(--er);gap:8px}.low .identity{padding:7px 10px;gap:2px}.low .identity strong{font-size:15px}.low .identity span{letter-spacing:.04em}.low .resources{min-height:44px;align-items:center;gap:9px;padding:0 12px;font-size:11px}.low .resources b{font-size:15px}.low #menuButton{min-width:44px;min-height:44px;padding:8px 13px}.short .identity{display:none}
.low .hull{top:var(--hull-top);left:var(--el);width:196px;padding:8px 11px;gap:4px 6px}
.low #objective,.low #rogue{top:var(--note-top);left:var(--el)}.low #objective{width:auto;max-width:min(255px,calc(33% - var(--el)));font-size:12px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.low #rogue{padding:5px 11px 5px 9px;font-size:11px}
.low:not(.at-yard) #toast{top:var(--toast-top);left:var(--el);right:auto;margin:0;transform:none;width:max-content;max-width:calc(33.3% - var(--el) - 4px);padding:7px 11px;font-size:12px;line-height:1.35;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* At the shipwright the toast sits at the top left of the clear area beside the panel, past the left safe area and off to the side
   of the part the camera frames in the middle of that area (fitYard in voyage.js). */
.at-yard #toast{top:10px;left:max(14px,var(--safe-l));transform:none;width:max-content;max-width:min(250px,calc(21% - 14px));padding:7px 11px;font-size:12px;line-height:1.35;text-align:left}
/* Narrow tall windows (shipwright sheet along the bottom, camera buttons top left): the toast takes the top right. */
@media(max-width:719px) and (min-height:501px){.at-yard #toast{left:auto;right:max(14px,var(--safe-r));max-width:calc(100% - 180px)}}
.low #enemyHud{top:var(--top);padding:6px 12px;min-width:150px}.low #enemyName{font-size:13px}.low #enemyHud small{margin:2px 0 5px}.low #enemyHint{margin-top:4px}
.low #map{top:calc(var(--top) + 48px);right:var(--er);width:var(--map);height:var(--map)}
.low:not(.at-yard) #cameraControls{top:calc(var(--top) + 48px);right:calc(var(--er) + var(--map) + 6px);left:auto;bottom:auto;grid-template-columns:56px 70px;gap:4px}.low #cameraControls button{padding:4px 5px;line-height:1.1;letter-spacing:.02em}
.low #cameraControls #lockButton{left:calc(100% + 6px);right:auto;top:calc(var(--map) + 4px);width:var(--map);height:44px;min-height:44px;padding:3px 2px;gap:3px;font-size:12px;letter-spacing:.02em}.low #lockButton b{white-space:nowrap}.low #lockButton b::before{margin-right:4px}.low #lockButton span{max-width:calc(var(--map) - 6px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0}
.low #specialWeapons{right:var(--er);bottom:calc(var(--eb) + var(--gun) + 12px);gap:6px}.low #specialWeapons button{width:70px;min-height:44px;padding:4px}.low #specialWeapons span{margin-top:3px}
.low #controls{left:var(--el);right:var(--er);bottom:var(--eb)}.low #helm{width:87px;height:87px}.low #thumb{left:19px;top:19px}.low #helmHint{bottom:5px}.low .actions{gap:6px}
.low .cannon{width:104px;height:var(--gun);padding:6px 4px;font-size:12px}.low .cannon span{margin-top:5px}.low #sail{min-width:62px;height:var(--gun);padding:6px}.low #repairButton{width:auto;min-width:84px;height:var(--gun);padding:6px 8px;font-size:12px}.low.narrow .cannon{width:80px;padding:6px 3px}.low.narrow #sail{min-width:56px}
.low:not(.at-yard) #contextActions{left:calc(var(--el) + 99px);right:auto;bottom:var(--eb);transform:none;width:auto;max-width:none;justify-content:flex-start}.low #contextActions button{padding:9px 13px;font-size:12px}
/* The objective and toasts read over white gun smoke, sails and bright sky: a dark rim close to the glyphs plus a soft halo. */
#objective{text-shadow:0 0 2px #00141a,0 1px 2px #00141a,1px 0 2px #00141a,-1px 0 2px #00141a,0 0 6px #00141acc}#toast{text-shadow:0 1px 2px #00141a,0 0 4px #00141ab3}
/* The phone objective is clamped to two lines (overflow hidden clips at the padding edge), so padding holds its halo; the top margin
   keeps the text where it was. */
.low #objective{padding:2px 5px 0;margin-top:-2px}
/* ?mockbar=1: a stand-in for the Claude app's translucent header, for screenshots of framed mode. */
#mockBar{position:fixed;top:0;left:0;right:0;height:78px;z-index:300;pointer-events:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,var(--safe-r)) 0 max(16px,var(--safe-l));background:#1b1d1fc4;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#f4f4f4;font:600 15px system-ui,-apple-system,sans-serif}#mockBar i{display:block;width:34px;height:34px;border-radius:50%;background:#ffffff2e}#mockBar span{display:flex;gap:10px}
/* Room off on a framed page (.room-off): the app header may still cover the top of the page, so PAUSE, the way back to that setting,
   moves below --frame-top: under the map on phones (LOCK steps down one place) and beside the map on tall screens. */
.room-off #menuButton{position:fixed;top:calc(var(--frame-top) + 6px);right:calc(max(18px,var(--safe-r)) + 118px)}
.low.room-off #menuButton{position:absolute;top:calc(48px + var(--map) + 4px);right:0}.low.room-off #cameraControls #lockButton{top:calc(var(--map) + 52px)}
.low.room-off{--header:var(--frame-top)}.low.room-off #menuButton{position:static}.low.room-off #cameraControls #lockButton{top:calc(var(--map) + 4px)}
/* Pause menu and other panels: the toggles share a row; short boxes tighten the panels so CONTINUE and the toggles show without scrolling. */
.pause-toggles{display:flex;gap:9px;flex-wrap:wrap}.pause-toggles button{flex:1 1 auto;width:auto}
/* NEW VOYAGE after its first tap: a second tap erases the voyage. */
#reset.armed{background:#6e2519e8;border-color:#ff8a66;color:#ffe3b4}
.short .veil{padding:10px}.short .panel{padding:16px 20px}.short .panel h1{font-size:23px;margin:6px 0 8px}.short .panel p{margin:8px 0 12px}
/* Free dock paint keeps the same live ship preview as the fitting tabs. */
/* Fleet orders replace the objective. Offers stay above the combat controls while the sea keeps moving. */
#fleetOrders{position:absolute;left:max(18px,var(--safe-l));top:180px;width:150px;font-size:11px;color:#f3d486;background:#082e35e6;border:1px solid #c5ad7066;border-radius:8px;padding:5px;z-index:8}
#fleetCount{display:block;line-height:12px;margin:0 2px 4px;font-size:11px}#fleetCount.wanted{color:#ff8c77}
#fleetOrders>div,#surrenderPanel>div{display:flex;gap:4px}
#fleetOrders button{min-width:66px;min-height:44px;padding:5px 6px;font-size:11px}
#fleetOrders button[aria-pressed=true]{background:#8c7232;color:#fff4c7;border-color:#f4d78a}
.has-fleet #objective,.has-fleet #rogue{display:none}
#surrenderPanel{position:absolute;left:50%;transform:translateX(-50%);top:62px;width:224px;padding:6px;background:#082e35f2;border:1px solid #e4d6ac;border-radius:9px;z-index:9;color:#f4e8cb}
#surrenderPanel strong,#surrenderPanel span,#surrenderPanel small{display:block;line-height:15px;font-size:11px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#surrenderPanel strong{font-family:Georgia,serif;font-size:13px}#recruitReason{color:#ecd588}
#surrenderPanel #recruitCost{display:grid;grid-template-columns:1fr 1fr;white-space:normal;line-height:13px;margin-bottom:3px}#surrenderPanel #recruitCost span{margin:0;line-height:13px;overflow:visible}
#surrenderPanel button{flex:1;min-height:44px;font-size:11px;padding:5px}#recruitShip{background:#315d43}#recruitShip:disabled{opacity:.5}
.has-offer #enemyHud{display:none}.low.has-offer #specialWeapons{visibility:hidden}
.at-yard #fleetOrders,.at-yard #surrenderPanel{display:none}
.low #fleetOrders{left:var(--el);top:var(--note-top)}.low #surrenderPanel{top:calc(var(--top) + 50px)}
.low.has-fleet:not(.at-yard) #toast{left:calc(var(--el) + 164px);top:calc(var(--note-top) + 20px);max-width:196px;font-size:11px}
.low.has-offer:not(.at-yard) #toast{display:none}.low.narrow.has-offer #cameraControls{visibility:hidden}
.low.narrow:not(.short) #surrenderPanel{top:128px}
.tiny.narrow:not(.at-yard) #specialWeapons{left:calc(var(--el) + 162px);right:auto;bottom:calc(var(--eb) + 14px);display:grid;grid-template-columns:70px 70px;gap:4px}
.tiny:not(.narrow) #specialWeapons{bottom:calc(var(--eb) + var(--gun) + 4px)}
.low.narrow #enemyHud{min-width:126px;max-width:136px;left:calc(50% - 6px);padding:5px 6px}
.low.narrow #enemyHint{display:none}.low.narrow #enemyName,.low.narrow #enemyThreat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:14px}
.low.narrow.has-fleet:not(.at-yard) #toast{left:calc(var(--el) + 154px);max-width:min(168px,calc(100% - var(--el) - var(--er) - 380px));max-height:44px;padding:6px 8px;-webkit-line-clamp:2}
.tiny.narrow.has-fleet:not(.at-yard) #toast{top:calc(var(--note-top) + 8px)}
.short.narrow #surrenderPanel{top:calc(68px + var(--header,0px));padding:4px 6px}
.short.narrow #surrenderPanel strong{line-height:13px;font-size:12px;margin-bottom:1px}
.short.narrow #surrenderPanel #recruitCost,.short.narrow #surrenderPanel #recruitCost span{line-height:12px}
.short.narrow #surrenderPanel #recruitCost{margin-bottom:1px}.short.narrow #surrenderPanel small{line-height:12px;margin-bottom:2px}
.paint-panel{padding:8px 12px 20px;color:#ede4c6}.paint-panel p{font-size:13px;line-height:1.4;margin:4px 0 12px}.paint-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}.paint-presets button{padding:10px 5px;font-size:12px}.paint-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.paint-fields label{display:flex;flex-direction:column;gap:4px;font-size:12px}.paint-fields input,.paint-fields select{width:100%;min-height:40px;background:#1c3033;color:#f6eccf;border:1px solid #83744b;border-radius:6px;padding:4px}.paint-fields select{font-size:12px}
/* Joseph Oct 16: artifact hosts supply their own page and body, so the base text color is set on #game as well as :root.
   Without it the pause menu and shipwright text inherited the host page's dark text on dark panels. */
#game{color:#f5ead2;color-scheme:dark}
/* Joseph Oct 16: SAVE GAME / LOAD SAVE row in the pause menu. */
.save-row{display:flex;gap:9px}.save-row button{flex:1 1 0;width:auto;font-size:13px}
.panel .save-status{font-size:12px;line-height:1.4;color:#cfe3da;margin:8px 0 4px;min-height:17px}.panel .save-status.warn{color:#ffb48f}
#loadGame.armed{background:#6e2519e8;border-color:#ff8a66;color:#ffe3b4}