*{box-sizing:border-box}
:root{
    --bg:#061015;
    --panel:rgba(7,20,24,.9);
    --panel2:rgba(11,33,35,.86);
    --gold:#e5b451;
    --gold2:#f5d07a;
    --teal:#39d6c9;
    --green:#79c968;
    --stone:#a9afa7;
    --wood:#b97b45;
    --text:#e7f2ed;
    --muted:rgba(231,242,237,.62);
    --line:rgba(229,180,81,.22);
    --bad:#ef7777;
}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Segoe UI",Arial,sans-serif}
body{
    background:
        radial-gradient(circle at 24% 36%,rgba(245,208,122,.18),transparent 22%),
        radial-gradient(circle at 70% 82%,rgba(57,214,201,.18),transparent 26%),
        linear-gradient(135deg,#08263c 0%,#075c88 44%,#0a3850 100%);
}
body:before{
    content:"";position:fixed;inset:0;pointer-events:none;
    background:
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:42px 42px;opacity:.14;
}
button{font:inherit;color:inherit}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon,.btn-icon,.resource-icon{width:18px;height:18px;display:block;flex:0 0 auto}
#base-app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:10px;gap:10px}
.topbar{min-height:58px;display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(180deg,rgba(5,19,25,.92),rgba(2,9,14,.88));border:1px solid rgba(246,217,134,.2);border-radius:6px;box-shadow:0 14px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;min-width:220px}
.brand-mark{width:38px;height:38px;border:1px solid rgba(246,217,134,.28);border-radius:6px;display:grid;place-items:center;color:var(--gold2);background:linear-gradient(180deg,rgba(229,180,81,.12),rgba(15,37,43,.74));box-shadow:inset 0 0 14px rgba(229,180,81,.08)}
.brand-mark .icon{width:21px;height:21px}
h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:19px;letter-spacing:.7px;color:var(--gold2)}
.brand p{margin:1px 0 0;color:var(--muted);font-size:12px;letter-spacing:.3px}
.resource-row{display:flex;gap:7px;flex:1;min-width:0}
.resource{position:relative;min-width:92px;flex:1;display:flex;align-items:center;gap:8px;padding:6px 8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.1);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.resource:before{display:none}
.resource-icon{display:block;width:28px;height:28px;padding:6px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 14px rgba(0,0,0,.18)}
.res-gold .resource-icon{color:#ffd260;background:linear-gradient(180deg,rgba(255,210,96,.24),rgba(112,70,9,.22));border-color:rgba(255,210,96,.36)}
.res-wood .resource-icon{color:#d48d4c;background:linear-gradient(180deg,rgba(212,141,76,.23),rgba(67,36,16,.22));border-color:rgba(212,141,76,.34)}
.res-stone .resource-icon{color:#d0d9d7;background:linear-gradient(180deg,rgba(208,217,215,.2),rgba(62,74,75,.22));border-color:rgba(208,217,215,.3)}
.res-iron .resource-icon{color:#a7b7c7;background:linear-gradient(180deg,rgba(167,183,199,.22),rgba(48,57,66,.24));border-color:rgba(167,183,199,.34)}
.res-pearl .resource-icon{color:#7fe6ff;background:linear-gradient(180deg,rgba(127,230,255,.2),rgba(18,81,99,.24));border-color:rgba(127,230,255,.34)}
.resource span{display:block;color:rgba(231,242,237,.55);font-size:9px;letter-spacing:1px}
.resource strong{display:block;margin-top:1px;font-size:17px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;gap:8px}
.primary-btn,.ghost-btn{height:40px;border-radius:6px;padding:0 15px;cursor:pointer;letter-spacing:.3px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-icon{display:block;width:15px;height:15px;opacity:.86}
.primary-btn{background:linear-gradient(180deg,#f1cf71,#b36f22);border:1px solid rgba(255,239,177,.66);color:#160e04;box-shadow:0 8px 18px rgba(229,180,81,.18),inset 0 1px 0 rgba(255,255,255,.3)}
.ghost-btn{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.primary-btn:disabled,.ghost-btn:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.65)}
.wide{width:100%;margin-top:12px}
.island-shell{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:10px}
.island-map{position:relative;overflow:hidden;background:#0a607a;border:1px solid var(--line);box-shadow:inset 0 0 90px rgba(0,0,0,.28)}
.island-map:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 24%,transparent 75%,rgba(0,0,0,.18))}
.island-map:after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(circle at 50% 48%,transparent 58%,rgba(0,0,0,.2));pointer-events:none}
.island-bg{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.waves{display:none}
.waves{width:90px;height:22px;border-top:2px solid rgba(209,250,255,.42);border-radius:50%;filter:drop-shadow(0 0 8px rgba(209,250,255,.25))}
.wave-a{left:14%;bottom:18%;transform:rotate(-18deg)}.wave-b{right:12%;top:15%;transform:rotate(18deg)}
.building{position:absolute;z-index:5;width:max-content;min-width:78px;min-height:46px;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:.16s;border-radius:50%;text-shadow:0 1px 4px rgba(0,0,0,.8);transform:translate(-50%,-100%)}
.building:hover,.building.active{transform:translate(-50%,calc(-100% - 2px)) scale(1.03)}
.building:before{content:"";position:absolute;inset:18px 18px 10px;border-radius:999px;background:rgba(246,217,134,.12);box-shadow:0 0 24px rgba(246,217,134,.34);opacity:0;pointer-events:none}
.building.upgrading:before{animation:upgradePulse 1.6s ease-in-out infinite}
.building.active:before{background:rgba(255,240,163,.16);box-shadow:0 0 24px rgba(255,224,120,.58);opacity:1}
.b-img{display:none}
.b-name,.b-time{display:inline-flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;backdrop-filter:blur(5px)}
.b-name{font-family:"Segoe UI",Arial,sans-serif;font-size:10px;line-height:1;color:#fff;text-align:center;background:rgba(5,12,15,.7);border:1px solid rgba(255,232,170,.2);border-radius:999px;padding:4px 8px;box-shadow:0 5px 12px rgba(0,0,0,.22);font-weight:800}
.b-time{color:#151007;background:rgba(245,208,122,.88);border:1px solid rgba(255,245,197,.58);border-radius:999px;padding:3px 7px;font-size:9px;font-weight:900;box-shadow:0 5px 12px rgba(0,0,0,.22);min-width:42px}
.b-name svg,.b-time svg{display:none}
.building.upgrading .b-time{color:#fff;background:linear-gradient(180deg,#1aaea5,#0a605c);border-color:rgba(120,255,241,.62)}
.building.maxed .b-time{color:#f1deb0;background:linear-gradient(180deg,#404a4d,#1e282a);border-color:rgba(255,255,255,.18)}
.building em{font-style:normal;color:#f6d986;font-size:8px;background:rgba(8,18,20,.54);border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:2px 6px;white-space:nowrap;box-shadow:0 4px 9px rgba(0,0,0,.16)}
.b-forge{left:49.4%;top:27.2%}.b-carpenter{left:33.4%;top:73.3%}.b-quarry{left:26.2%;top:32.3%}
.b-training{left:74.4%;top:29.1%}.b-captain{left:51.3%;top:51.7%}.b-shipyard{left:72.9%;top:57.3%}.b-harbor{left:27.6%;top:84%}
@keyframes upgradePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.panel{background:linear-gradient(180deg,rgba(7,21,27,.94),rgba(3,11,16,.92));border:1px solid rgba(246,217,134,.18);border-radius:6px;padding:14px;display:flex;flex-direction:column;min-height:0;box-shadow:0 18px 50px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.045)}
.panel-head{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 14px;margin:-1px -1px 10px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.075);border-left:3px solid var(--gold2)}
.panel-head-icon{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;color:var(--gold2);background:linear-gradient(180deg,rgba(245,208,122,.2),rgba(22,48,50,.66));border:1px solid rgba(245,208,122,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.panel-head-icon svg{width:19px;height:19px}
.panel-head span:not(.panel-head-icon){color:var(--teal);font-size:11px;letter-spacing:2px}
.panel h2{margin:5px 0 7px;font-family:Georgia,"Times New Roman",serif;font-size:24px;color:var(--gold2)}
.panel p{margin:0;color:var(--muted);line-height:1.35}
.building-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 10px}
.building-tab{min-width:0;height:48px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.026));box-shadow:inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer;text-align:left;transition:border-color .16s,background .16s,transform .16s}
.building-tab:hover{border-color:rgba(245,208,122,.36);background:linear-gradient(180deg,rgba(245,208,122,.09),rgba(255,255,255,.03));transform:translateY(-1px)}
.building-tab.active{border-color:rgba(245,208,122,.66);background:linear-gradient(180deg,rgba(245,208,122,.16),rgba(28,46,41,.35));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.18)}
.building-tab svg{width:28px;height:28px;padding:6px;border-radius:8px;color:var(--gold2);background:rgba(245,208,122,.09);border:1px solid rgba(245,208,122,.18)}
.building-tab span{min-width:0;display:block}
.building-tab strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px;line-height:1.15}
.building-tab em{display:block;margin-top:3px;font-style:normal;color:rgba(231,242,237,.58);font-size:10px;line-height:1}
.building-tab small{justify-self:end;min-width:46px;text-align:center;padding:4px 6px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);color:var(--gold2);font-size:10px;font-weight:900;line-height:1;white-space:nowrap}
.building-tab.upgrading small{color:#fff;background:linear-gradient(180deg,#22bdb2,#0a6762);border-color:rgba(120,255,241,.5)}
.building-tab.maxed small{color:#f1deb0;background:rgba(255,255,255,.055)}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.stat-grid div,.cost-box,.bonus-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.stat-grid span,.cost-box > span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;letter-spacing:1.15px}
.stat-grid span svg,.cost-box > span svg{display:none}
.stat-grid strong{display:block;margin-top:5px;font-size:16px}
.cost-box{margin-top:8px;color:#fff}
#panel-cost{margin-top:8px;color:var(--gold2);font-weight:900;display:flex;flex-wrap:wrap;gap:7px}
.cost-item{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);color:#fff}
.cost-item svg{display:none}
.upgrade-time{margin-top:8px;color:var(--teal);font-size:13px;font-weight:900;display:flex;align-items:center;gap:7px}
.upgrade-time svg{display:none}
.upgrade-time span{font-size:13px;letter-spacing:0;text-transform:none}
.message{min-height:22px;margin-top:10px!important;font-size:13px;color:var(--muted)}
.message.ok{color:#9cf08e}.message.bad{color:var(--bad)}
.bonus-card{margin-top:14px;overflow:auto}
.bonus-card h3{margin:0 0 8px;font-family:Georgia,"Times New Roman",serif;color:var(--gold2);font-size:16px;display:flex;align-items:center;gap:7px}
.bonus-card h3 svg{display:none}
.bonus-card ul{margin:0;padding:0;color:var(--muted);line-height:1.55;list-style:none}
.bonus-card li{position:relative;padding:7px 0 7px 18px;border-top:1px solid rgba(255,255,255,.055)}
.bonus-card li:before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--gold2);box-shadow:0 0 10px rgba(245,208,122,.42)}
@media(max-width:900px){
    #base-app{padding:8px;gap:8px}
    .topbar{min-height:54px;padding:7px;gap:7px}
    .brand{min-width:150px}.brand-mark{width:38px;height:38px}h1{font-size:15px}.brand p{font-size:10px}
    .resource-row{gap:5px}.resource{min-width:70px;padding:6px;gap:6px}.resource-icon{width:25px;height:25px;padding:5px}.resource span{font-size:8px}.resource strong{font-size:14px}
    .primary-btn,.ghost-btn{height:38px;padding:0 10px;font-size:11px}
    .island-shell{grid-template-columns:1fr 300px;gap:8px}
    .building{min-width:74px;min-height:42px}.b-name{font-size:9px;padding:4px 7px}.building em{font-size:8px}
    .panel{padding:12px}.panel h2{font-size:20px}.building-switcher{grid-template-columns:1fr}.building-tab{height:46px}
}
@media(max-width:700px){
    body{overflow:auto}
    #base-app{height:auto;min-height:100%}
    .topbar{flex-wrap:wrap}.resource-row{order:3;flex-basis:100%}
    .island-shell{grid-template-columns:1fr}
    .island-map{height:560px}
    .island-bg{object-fit:cover}
    .building{min-width:70px;min-height:40px}
    .building-switcher{grid-template-columns:repeat(2,minmax(0,1fr))}
    .b-forge{left:49.4%;top:27.2%}.b-carpenter{left:33.4%;top:73.3%}.b-quarry{left:26.2%;top:32.3%}
    .b-training{left:74.4%;top:29.1%}.b-captain{left:51.3%;top:51.7%}.b-shipyard{left:72.9%;top:57.3%}.b-harbor{left:27.6%;top:84%}
    .panel{min-height:420px}
}

/* Premium island command layout */
#base-app{padding:8px;gap:8px}
.topbar{min-height:52px;padding:6px 8px;border-radius:8px;background:linear-gradient(180deg,rgba(5,20,27,.86),rgba(2,9,14,.78));border-color:rgba(246,217,134,.18)}
.brand{min-width:190px}.brand-mark{width:34px;height:34px;border-radius:8px}.brand-mark .icon{width:19px;height:19px}
h1{font-size:17px}.brand p{font-size:11px}
.resource-row{gap:6px}
.resource{min-width:84px;padding:5px 7px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(0,0,0,.1));border-color:rgba(255,255,255,.095)}
.resource-icon{width:29px;height:29px;padding:4px;border-radius:8px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.resource span{font-size:8px;letter-spacing:.9px}.resource strong{font-size:15px}
.primary-btn,.ghost-btn{height:36px;border-radius:8px;padding:0 12px}
.island-shell{grid-template-columns:minmax(0,1fr) 350px;gap:8px}
.island-map{border-radius:8px;border-color:rgba(246,217,134,.2);box-shadow:inset 0 0 80px rgba(0,0,0,.25),0 18px 50px rgba(0,0,0,.24)}
.island-map:after{background:radial-gradient(circle at 50% 47%,transparent 62%,rgba(0,0,0,.22))}
.panel{border-radius:8px;padding:13px;background:linear-gradient(180deg,rgba(6,22,28,.94),rgba(4,13,18,.93));border-color:rgba(246,217,134,.2)}
.panel-head{margin:0 0 10px;padding:13px;border-radius:8px;border-left:0;background:linear-gradient(135deg,rgba(245,208,122,.13),rgba(255,255,255,.035) 46%,rgba(57,214,201,.075));position:relative;overflow:hidden}
.panel-head:after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,208,122,.45),transparent)}
.panel-head-icon{width:44px;height:44px;border-radius:10px}.panel-head-icon svg{width:24px;height:24px}
.panel h2{font-size:25px;margin:4px 0 6px}.panel p{font-size:13px}
.panel-switcher-hidden{display:none!important}
.stat-grid{gap:7px;margin-top:0}
.stat-grid div{min-height:76px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-color:rgba(255,255,255,.085)}
.stat-grid span,.cost-box > span{font-size:9px;letter-spacing:1px;text-transform:uppercase}
.stat-grid span svg,.cost-box > span svg,.cost-item svg,.upgrade-time svg,.bonus-card h3 svg{display:block;width:15px;height:15px;color:var(--gold2)}
.stat-grid strong{font-size:16px;line-height:1.2}
.level-track{height:9px;margin:9px 1px 10px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.level-track span{display:block;height:100%;width:3%;border-radius:inherit;background:linear-gradient(90deg,#c7832c,#f5d07a,#45e1d4);box-shadow:0 0 14px rgba(245,208,122,.28)}
.cost-box{margin-top:0;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border-color:rgba(255,255,255,.085)}
.cost-item{border-radius:999px;background:rgba(0,0,0,.22);padding:6px 10px}
.upgrade-time{padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}
.wide{height:42px;margin-top:10px;border-radius:8px;font-size:14px}
.message{min-height:18px;margin-top:8px!important}
.bonus-card{border-radius:8px;margin-top:10px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))}
.bonus-card h3{font-size:17px}.bonus-card li{padding:6px 0 6px 17px}

.building-dock{position:absolute;z-index:9;left:14px;right:14px;bottom:12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:8px;border-radius:10px;background:linear-gradient(180deg,rgba(3,14,18,.82),rgba(2,8,12,.72));border:1px solid rgba(246,217,134,.2);box-shadow:0 14px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(10px)}
.building-tab{height:50px;border-radius:8px;grid-template-columns:30px minmax(0,1fr);grid-template-rows:1fr auto;gap:3px 8px;padding:7px 8px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))}
.building-tab svg{grid-row:1/3;width:30px;height:30px;border-radius:8px}
.building-tab small{grid-column:2;justify-self:start;min-width:0;padding:0;border:0;background:transparent;color:var(--gold2);font-size:10px}
.building-tab.upgrading small{padding:2px 6px;background:linear-gradient(180deg,#22bdb2,#0a6762);border:1px solid rgba(120,255,241,.5)}
.building-tab strong{font-size:12px}.building-tab em{font-size:9px;margin-top:2px}

.building{min-width:42px;min-height:42px;gap:1px;transform:translate(-50%,-70%);filter:drop-shadow(0 7px 10px rgba(0,0,0,.34))}
.building:hover,.building.active{transform:translate(-50%,calc(-70% - 2px)) scale(1.05)}
.building:before{inset:7px;border-radius:50%;opacity:.38;background:rgba(245,208,122,.14);box-shadow:0 0 20px rgba(245,208,122,.26)}
.building:after{content:"";width:7px;height:7px;border-radius:50%;background:#f5d07a;box-shadow:0 0 14px rgba(245,208,122,.58);order:3}
.building.upgrading:after{background:#39d6c9;box-shadow:0 0 18px rgba(57,214,201,.72)}
.b-build{position:absolute;left:50%;top:-30px;width:28px;height:28px;display:none;place-items:center;border-radius:50%;color:#102326;background:linear-gradient(180deg,#ffe08a,#c98728);border:1px solid rgba(255,244,190,.82);box-shadow:0 8px 18px rgba(0,0,0,.36),0 0 20px rgba(245,208,122,.52);transform:translateX(-50%);pointer-events:none}
.b-build svg{width:19px;height:19px}
.building.upgrading .b-build{display:grid;animation:hammerBob 1.1s ease-in-out infinite}
.b-ready{position:absolute;right:-18px;top:-13px;width:30px;height:30px;display:none;place-items:center;border-radius:9px;color:#1a1004;background:linear-gradient(180deg,#ffe89a,#c58325);border:1px solid rgba(255,245,192,.86);box-shadow:0 10px 18px rgba(0,0,0,.36),0 0 18px rgba(245,208,122,.5);pointer-events:auto}
.b-ready svg{width:22px;height:22px}
.b-ready span{display:none}
.building.ready .b-ready{display:grid;animation:chestPulse 1.35s ease-in-out infinite}
.b-name{width:28px;height:28px;padding:0;border-radius:50%;background:linear-gradient(180deg,rgba(4,14,16,.82),rgba(0,0,0,.72));border-color:rgba(245,208,122,.32);box-shadow:0 7px 14px rgba(0,0,0,.26)}
.b-name svg{display:block;width:17px;height:17px;color:var(--gold2)}
.b-name span{display:none}
.building:hover .b-name,.building.active .b-name{width:auto;height:28px;border-radius:999px;padding:0 9px;gap:5px}
.building:hover .b-name span,.building.active .b-name span{display:inline}
.b-time{font-size:9px;padding:3px 7px;min-width:0;display:none}
.building.active .b-time,.building.upgrading .b-time,.building.maxed .b-time{display:inline-flex}
.building em{font-size:8px;padding:2px 6px;background:rgba(2,8,11,.66)}
.b-harbor .b-name{width:auto;border-radius:999px;padding:0 9px}.b-harbor .b-name span{display:inline}
@keyframes hammerBob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-8deg)}50%{transform:translateX(-50%) translateY(-4px) rotate(8deg)}}
@keyframes chestPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.08)}}

@media(max-width:1180px){
    .building-dock{grid-template-columns:repeat(3,minmax(0,1fr))}
    .building-tab{height:46px}
    .island-shell{grid-template-columns:minmax(0,1fr) 330px}
    .resource{min-width:72px}
}
@media(max-width:900px){
    .brand{min-width:142px}
    .island-shell{grid-template-columns:1fr 300px}
    .building-dock{left:10px;right:10px;bottom:10px}
    .building-tab strong{font-size:11px}
}
@media(max-width:700px){
    .topbar{flex-wrap:wrap}
    .resource-row{order:3;flex-basis:100%}
    .island-shell{grid-template-columns:1fr}
    .island-map{height:590px}
    .building-dock{position:relative;left:auto;right:auto;bottom:auto;margin:0 8px 8px;grid-template-columns:repeat(2,minmax(0,1fr))}
    .panel{min-height:0}
}

.panel{overflow:auto}
.systems-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.system-card{border:1px solid rgba(255,255,255,.085);border-radius:8px;padding:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.system-wide{grid-column:1/-1}
.system-card h3{margin:0 0 7px;display:flex;align-items:center;gap:7px;color:var(--gold2);font-size:13px;letter-spacing:.3px}
.system-card h3 svg{width:16px;height:16px}
.system-card p{margin:0 0 8px;color:var(--muted);font-size:11px;line-height:1.35}
.mini-btn{min-height:30px;border-radius:7px;border:1px solid rgba(245,208,122,.24);background:linear-gradient(180deg,rgba(245,208,122,.12),rgba(255,255,255,.035));color:#fff;cursor:pointer;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px}
.mini-btn:hover{border-color:rgba(245,208,122,.5);background:linear-gradient(180deg,rgba(245,208,122,.18),rgba(255,255,255,.045))}
.mini-btn:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.65)}
.mini-btn b{color:var(--gold2);font-size:10px}
.worker-slots{display:grid;gap:5px;margin-bottom:8px}
.worker-slot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:7px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.07);font-size:11px;color:var(--muted)}
.worker-slot strong{color:#fff;font-size:11px}
.worker-slot.busy strong{color:var(--teal)}
.speedup-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.crew-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.research-list{display:grid;gap:7px}
.research-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px;border-radius:8px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.075)}
.research-row strong{display:block;color:#fff;font-size:12px}
.research-row span{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.3}
.research-row em{font-style:normal;color:var(--teal)}
.research-row.researching{border-color:rgba(57,214,201,.35);box-shadow:0 0 14px rgba(57,214,201,.08)}
@media(max-width:1180px){
    .systems-grid{grid-template-columns:1fr}
    .system-wide{grid-column:auto}
}

/* Building tiers, island cosmetics and compact speedup controls */
.building .b-img{
    display:block;
    width:30px;
    height:30px;
    object-fit:contain;
    margin-bottom:-3px;
    pointer-events:none;
    filter:drop-shadow(0 6px 7px rgba(0,0,0,.48)) saturate(1.04);
    opacity:.94;
}
.building.tier-2 .b-img{width:36px;height:36px;filter:drop-shadow(0 7px 9px rgba(0,0,0,.5)) saturate(1.2) brightness(1.05)}
.building.tier-3 .b-img{width:42px;height:42px;filter:drop-shadow(0 0 10px rgba(245,208,122,.32)) drop-shadow(0 8px 10px rgba(0,0,0,.52)) saturate(1.28) brightness(1.08)}
.b-tier{
    position:absolute;
    left:50%;
    top:-12px;
    min-width:22px;
    height:18px;
    padding:0 6px;
    display:grid;
    place-items:center;
    border-radius:999px;
    transform:translateX(-50%);
    font-size:10px;
    line-height:1;
    font-weight:950;
    color:#120d05;
    background:linear-gradient(180deg,#e4ba70,#80552b);
    border:1px solid rgba(255,238,179,.72);
    box-shadow:0 7px 14px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.34);
    pointer-events:none;
}
.building.upgrading .b-tier{top:-5px;left:72%}
.building.tier-2 .b-tier{background:linear-gradient(180deg,#edf4f2,#8ca19d);border-color:rgba(238,255,251,.78)}
.building.tier-3 .b-tier{background:linear-gradient(180deg,#ffe999,#c48624);border-color:rgba(255,244,184,.92);box-shadow:0 0 18px rgba(245,208,122,.34),0 8px 16px rgba(0,0,0,.36)}
.building.tier-2:before{box-shadow:0 0 24px rgba(176,224,214,.34)}
.building.tier-3:before{box-shadow:0 0 30px rgba(245,208,122,.46)}
.building-tab.tier-2 svg{border-color:rgba(205,235,230,.42);background:linear-gradient(180deg,rgba(205,235,230,.17),rgba(255,255,255,.04))}
.building-tab.tier-3 svg{border-color:rgba(245,208,122,.56);background:linear-gradient(180deg,rgba(245,208,122,.24),rgba(112,72,17,.16));box-shadow:0 0 14px rgba(245,208,122,.13)}

.speedup-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.speedup-card{
    aspect-ratio:1;
    min-height:74px;
    padding:7px 5px;
    flex-direction:column;
    gap:4px;
    border-radius:10px;
    background:linear-gradient(180deg,rgba(57,214,201,.12),rgba(245,208,122,.055));
    border-color:rgba(57,214,201,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.12);
}
.speedup-card:hover{border-color:rgba(245,208,122,.58);transform:translateY(-1px)}
.speedup-card:disabled{transform:none}
.speedup-icon{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#102326;
    background:linear-gradient(180deg,#69f0e4,#1d9a91);
    border:1px solid rgba(173,255,247,.55);
    box-shadow:0 6px 12px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22);
}
.speedup-icon svg{width:17px;height:17px}
.speedup-card span:not(.speedup-icon){font-size:11px;font-weight:900;color:#fff}
.speedup-card b{
    min-width:28px;
    padding:2px 6px;
    border-radius:999px;
    background:rgba(0,0,0,.28);
    color:var(--gold2);
    border:1px solid rgba(255,255,255,.08);
}
.speedup-card.empty{filter:saturate(.55);opacity:.55}
.speedup-shop{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:7px;
}
.buy-speedup-btn{
    min-width:0;
    min-height:32px;
    padding:6px 5px;
    flex-direction:column;
    gap:2px;
    border-color:rgba(245,208,122,.28);
    background:linear-gradient(180deg,rgba(245,208,122,.13),rgba(255,255,255,.035));
}
.buy-speedup-btn span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.buy-speedup-btn b{
    font-size:9px;
}

.cosmetic-card{background:linear-gradient(180deg,rgba(57,214,201,.06),rgba(245,208,122,.035))}
.cosmetic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.cosmetic-option{
    min-width:0;
    aspect-ratio:1;
    border:1px solid rgba(255,255,255,.09);
    border-radius:10px;
    padding:7px 5px 6px;
    color:#fff;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.cosmetic-option:hover{border-color:rgba(245,208,122,.5);transform:translateY(-1px)}
.cosmetic-option.active{border-color:rgba(245,208,122,.78);background:linear-gradient(180deg,rgba(245,208,122,.18),rgba(57,214,201,.075));box-shadow:0 0 18px rgba(245,208,122,.12),inset 0 1px 0 rgba(255,255,255,.09)}
.cosmetic-option:disabled{cursor:not-allowed;opacity:.48;filter:saturate(.55)}
.cosmetic-swatch{
    width:34px;
    height:28px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 7px 12px rgba(0,0,0,.2);
}
.cosmetic-option strong{font-size:10px;line-height:1.05;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cosmetic-option small{font-size:8px;color:var(--muted);line-height:1}
.swatch-classic{background:linear-gradient(135deg,#0c8fa3,#f0d088 48%,#2d7b4f)}
.swatch-lagoon{background:linear-gradient(135deg,#20d8d2,#c8f7ce 50%,#0b8f77)}
.swatch-sunset{background:linear-gradient(135deg,#14324a,#f0a34c 48%,#7f3f55)}
.swatch-royal{background:linear-gradient(135deg,#0c2540,#f4d47b 45%,#274f86)}
.island-map.theme-classic .island-bg{filter:saturate(1.03) contrast(1.02)}
.island-map.theme-lagoon .island-bg{filter:saturate(1.18) brightness(1.06) hue-rotate(6deg)}
.island-map.theme-sunset .island-bg{filter:saturate(1.1) brightness(.98) sepia(.14) hue-rotate(-12deg)}
.island-map.theme-royal .island-bg{filter:saturate(1.14) brightness(1.04) contrast(1.06)}
.island-map.theme-lagoon:after{background:radial-gradient(circle at 50% 47%,transparent 64%,rgba(0,79,95,.18))}
.island-map.theme-sunset:after{background:radial-gradient(circle at 50% 47%,transparent 60%,rgba(81,34,12,.26))}
.island-map.theme-royal:after{background:radial-gradient(circle at 50% 47%,transparent 61%,rgba(10,28,51,.2))}

@media(max-width:1180px){
    .cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cosmetic-option{aspect-ratio:auto;min-height:64px}
}

/* Temporary preview with the new island and blacksmith art */
.island-bg{
    object-fit:contain;
    object-position:center;
    background:
        radial-gradient(circle at 50% 50%,rgba(25,205,209,.2),transparent 42%),
        linear-gradient(180deg,#073c5a,#06233b);
}
.island-map{
    background:linear-gradient(180deg,#073c5a,#061c32);
}
.b-forge{left:38.5%;top:33.5%}
.b-carpenter{left:39%;top:63%}
.b-quarry{left:38%;top:25.5%}
.b-training{left:63%;top:33%}
.b-captain{left:50%;top:49%}
.b-shipyard{left:56%;top:64%}
.b-harbor{left:31.5%;top:75%}
.b-forge .b-img{
    width:clamp(118px,9vw,165px);
    height:auto;
    margin-bottom:-8px;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.48)) saturate(1.05);
}
.b-forge .b-tier{top:4px;left:68%}
.b-forge .b-build{top:4px;left:32%}
.b-forge .b-ready{right:8px;top:18px}
.b-forge .b-name{margin-top:-3px}
.b-forge.active .b-name,.b-forge:hover .b-name{height:27px}
.b-quarry{left:34.5%;top:26%}
.b-quarry .b-img{
    width:clamp(118px,10vw,172px);
    height:auto;
    margin-bottom:-9px;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)) saturate(1.04) contrast(1.02);
}
.b-quarry .b-tier{top:8px;left:65%}
.b-quarry .b-build{top:5px;left:35%}
.b-quarry .b-ready{right:4px;top:20px}
.b-quarry .b-name{margin-top:-4px}
.b-quarry.active .b-name,.b-quarry:hover .b-name{height:27px}
@media(max-width:900px){
    .b-forge .b-img{width:clamp(96px,18vw,132px)}
    .b-quarry .b-img{width:clamp(96px,20vw,136px)}
}

/* New island pad layout: keep buildings on separate empty plots */
.b-quarry{left:35.2%;top:29.6%}
.b-forge{left:39.4%;top:60.8%}
.b-carpenter{left:50.4%;top:69.2%}
.b-training{left:67.3%;top:38.7%}
.b-captain{left:52.8%;top:49.4%}
.b-shipyard{left:66.5%;top:61.5%}
.b-harbor{left:31.6%;top:77.2%}
.b-forge .b-img{
    width:clamp(92px,7.4vw,132px);
    margin-bottom:-6px;
}
.b-quarry .b-img{
    width:clamp(92px,7.8vw,140px);
    margin-bottom:-7px;
}
.b-forge .b-tier,.b-quarry .b-tier{top:2px;left:69%}
.b-forge .b-build,.b-quarry .b-build{top:2px;left:31%}
.b-forge .b-ready,.b-quarry .b-ready{right:2px;top:14px}
.b-carpenter,.b-training,.b-captain,.b-shipyard{z-index:6}
.b-forge,.b-quarry{z-index:5}
.building.active{z-index:8}
@media(max-width:900px){
    .b-quarry{left:34.8%;top:30%}
    .b-forge{left:39.2%;top:61%}
    .b-carpenter{left:50.2%;top:69.2%}
    .b-training{left:67%;top:39%}
    .b-captain{left:52.5%;top:49.5%}
    .b-shipyard{left:66.5%;top:61.5%}
    .b-forge .b-img,.b-quarry .b-img{width:clamp(82px,16vw,118px)}
}

/* Full-bleed island preview: remove side gaps and remap buildings */
.island-bg{
    object-fit:cover;
    object-position:center center;
}
.island-map{
    background:#073c5a;
}
.b-quarry{left:32.4%;top:31.2%}
.b-forge{left:37.8%;top:62.4%}
.b-carpenter{left:50.8%;top:79.4%}
.b-training{left:74.2%;top:36.5%}
.b-captain{left:54.2%;top:52.2%}
.b-shipyard{left:76%;top:68.2%}
.b-harbor{left:21.5%;top:88%}
.b-forge .b-img{
    width:clamp(150px,11.2vw,220px);
}
.b-quarry .b-img{
    width:clamp(154px,11.8vw,232px);
}
.b-carpenter{left:51.4%;top:75.8%}
.b-carpenter .b-img{
    width:clamp(150px,11vw,216px);
    height:auto;
    margin-bottom:-8px;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.48)) saturate(1.05);
}
.b-carpenter .b-name{margin-top:-8px}
.b-carpenter .b-tier{top:-3px;left:70%}
.b-carpenter .b-build{top:-4px;left:30%}
.b-carpenter .b-ready{right:-4px;top:12px}
.b-training .b-img{
    width:clamp(148px,11vw,218px);
    height:auto;
    margin-bottom:-8px;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.48)) saturate(1.04);
}
.b-training .b-name{margin-top:-8px}
.b-training .b-tier{top:-4px;left:70%}
.b-training .b-build{top:-5px;left:30%}
.b-training .b-ready{right:-5px;top:12px}
.b-captain .b-img{
    width:clamp(146px,10.8vw,214px);
    height:auto;
    margin-bottom:-8px;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.48)) saturate(1.04);
}
.b-captain .b-name{margin-top:-8px}
.b-captain .b-tier{top:-4px;left:70%}
.b-captain .b-build{top:-5px;left:30%}
.b-captain .b-ready{right:-5px;top:12px}
.b-shipyard .b-img{
    width:clamp(152px,11.6vw,224px);
    height:auto;
    margin-bottom:-8px;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)) saturate(1.05);
}
.b-shipyard .b-name{margin-top:-8px}
.b-shipyard .b-tier{top:-4px;left:70%}
.b-shipyard .b-build{top:-5px;left:30%}
.b-shipyard .b-ready{right:-5px;top:12px}
.b-harbor .b-img{
    width:clamp(168px,13vw,248px);
    height:auto;
    margin-bottom:-8px;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.5)) saturate(1.05);
}
.b-harbor .b-name{margin-top:-8px}
.b-forge .b-name,.b-quarry .b-name{margin-top:-8px}
.b-forge .b-tier,.b-quarry .b-tier{top:-4px;left:70%}
.b-forge .b-build,.b-quarry .b-build{top:-4px;left:30%}
.b-forge .b-ready,.b-quarry .b-ready{right:-4px;top:12px}
@media(max-width:900px){
    .island-bg{object-position:center center}
    .b-quarry{left:32.5%;top:31.5%}
    .b-forge{left:38%;top:62.5%}
    .b-carpenter{left:51.2%;top:75.8%}
    .b-training{left:74%;top:36.8%}
    .b-captain{left:54%;top:52.4%}
    .b-shipyard{left:76%;top:68%}
    .b-harbor{left:22%;top:87%}
    .b-forge .b-img,.b-quarry .b-img,.b-carpenter .b-img,.b-training .b-img,.b-captain .b-img,.b-shipyard .b-img,.b-harbor .b-img{width:clamp(124px,22vw,176px)}
}

/* Integrated island art: buildings are baked into the map, buttons are clean hotspots */
.island-bg{
    object-fit:cover;
    object-position:center center;
}
.b-quarry{left:32%;top:25.2%}
.b-forge{left:29.2%;top:55.5%}
.b-carpenter{left:51.6%;top:68.4%}
.b-training{left:73.2%;top:27.2%}
.b-captain{left:50.3%;top:43.4%}
.b-shipyard{left:73.4%;top:56.4%}
.b-armory{left:40.8%;top:60.2%;z-index:8}
.b-harbor{left:19.4%;top:78.5%}
.building{
    min-width:32px;
    min-height:32px;
    gap:1px;
    transform:translate(-50%,-50%);
    filter:none;
}
.building:hover,.building.active{
    transform:translate(-50%,-50%) scale(1.08);
}
.building .b-img{
    display:none!important;
}
.building:before{
    inset:3px;
    opacity:0;
    background:rgba(245,208,122,.12);
    box-shadow:0 0 18px rgba(245,208,122,.24);
}
.building:after{
    display:none;
}
.b-name,
.b-harbor .b-name{
    width:30px;
    height:30px;
    padding:0;
    border-radius:50%;
    background:linear-gradient(180deg,rgba(5,16,19,.86),rgba(0,0,0,.74));
    border-color:rgba(245,208,122,.34);
    box-shadow:0 8px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
    margin-top:0;
}
.b-name svg{
    display:block;
    width:17px;
    height:17px;
    color:var(--gold2);
}
.b-name span,
.b-harbor .b-name span{
    display:none;
}
.building:hover .b-name,
.building.active .b-name,
.building:hover.b-harbor .b-name,
.building.active.b-harbor .b-name{
    width:auto;
    height:28px;
    border-radius:999px;
    padding:0 9px;
    gap:5px;
}
.building:hover .b-name span,
.building.active .b-name span,
.building:hover.b-harbor .b-name span,
.building.active.b-harbor .b-name span{
    display:inline;
}
.b-tier,
.building em,
.b-time,
.building.ready .b-ready,
.building.upgrading .b-build{
    display:none;
}
.building:hover .b-tier,
.building.active .b-tier{
    display:grid;
}
.building:hover em,
.building.active em{
    display:block;
}
.building.active .b-time,
.building.upgrading.active .b-time,
.building.maxed.active .b-time{
    display:inline-flex;
}
.building.ready:hover .b-ready,
.building.ready.active .b-ready{
    display:grid;
}
.building.upgrading:hover .b-build,
.building.upgrading.active .b-build{
    display:grid;
}
@media(max-width:900px){
    .b-quarry{left:32%;top:25.4%}
    .b-forge{left:29.2%;top:55.6%}
    .b-carpenter{left:51.6%;top:68.4%}
    .b-training{left:73.2%;top:27.4%}
    .b-captain{left:50.3%;top:43.5%}
    .b-shipyard{left:73.4%;top:56.4%}
    .b-armory{left:40.8%;top:60.2%}
    .b-harbor{left:19.6%;top:78.4%}
}

/* Right command panel overhaul */
.island-shell{
    grid-template-columns:minmax(0,1fr) 390px;
}
.panel{
    display:block;
    padding:12px;
    gap:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
}
.panel-head{
    margin:0 0 10px;
    padding:11px;
    gap:9px;
    min-height:72px;
    align-items:center;
    overflow:visible;
}
.panel-head > div{min-width:0}
.panel-head-icon{
    width:38px;
    height:38px;
}
.panel-head-icon svg{
    width:21px;
    height:21px;
}
.panel h2{
    margin:2px 0 5px;
    font-size:22px;
    line-height:1.05;
}
.panel p{
    font-size:12px;
}
.stat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}
.stat-grid div{
    min-height:64px;
    padding:9px;
}
.stat-grid strong{
    font-size:15px;
    line-height:1.15;
    overflow-wrap:anywhere;
}
.cost-box{
    padding:10px;
}
#panel-cost{
    gap:6px;
}
.cost-item{
    padding:6px 9px;
    min-width:0;
}
.wide{
    height:38px;
    margin-top:9px;
}
.message{
    min-height:16px;
    margin-top:7px!important;
}
.systems-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:10px;
}
.system-wide{
    grid-column:auto;
}
.system-card,
.bonus-card{
    border-radius:9px;
    padding:11px;
    background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022));
    border-color:rgba(255,255,255,.09);
}
.system-card h3,
.bonus-card h3{
    margin:0 0 8px;
    font-size:14px;
    line-height:1.1;
}
.system-card p{
    margin-bottom:9px;
    font-size:11px;
}
.worker-slots{
    gap:6px;
}
.worker-slot{
    min-height:42px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    padding:8px 9px;
    font-size:11px;
}
.worker-slot strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#hire-worker-btn{
    width:100%;
    min-height:34px;
}
.speedup-list{
    grid-template-columns:1fr;
    gap:7px;
}
.speedup-card{
    aspect-ratio:auto;
    min-height:44px;
    width:100%;
    display:grid;
    grid-template-columns:32px minmax(0,1fr) auto;
    grid-template-rows:1fr;
    align-items:center;
    justify-content:stretch;
    gap:9px;
    padding:7px 9px;
    border-radius:9px;
    text-align:left;
}
.speedup-icon{
    width:28px;
    height:28px;
    border-radius:8px;
}
.speedup-icon svg{
    width:16px;
    height:16px;
}
.speedup-card span:not(.speedup-icon){
    min-width:0;
    font-size:12px;
    text-align:left;
}
.speedup-card b{
    min-width:34px;
    justify-self:end;
    text-align:center;
}
.speedup-shop{
    grid-template-columns:1fr;
    gap:6px;
}
.buy-speedup-btn{
    min-height:34px;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    justify-content:stretch;
    text-align:left;
}
.crew-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
}
.crew-grid .mini-btn{
    min-height:48px;
    padding:7px 6px;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;
    border-color:rgba(255,239,177,.66);
    background:linear-gradient(180deg,#f1cf71,#b36f22);
    color:#160e04;
    box-shadow:0 8px 18px rgba(229,180,81,.18),inset 0 1px 0 rgba(255,255,255,.3);
}
.crew-grid .mini-btn span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#160e04;
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:12px;
    font-weight:1000;
    letter-spacing:0;
    text-transform:none;
}
.pirate-roster{
    margin-top:8px;
    padding:8px 9px;
    border-radius:8px;
    background:rgba(0,0,0,.16);
    border:1px solid rgba(255,255,255,.075);
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}
.pirate-roster strong{
    color:#fff;
}
.pirate-production-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    margin:8px 0;
}
.pirate-production-summary div{
    min-width:0;
    padding:8px 9px;
    border-radius:8px;
    background:linear-gradient(180deg,rgba(245,208,122,.18),rgba(112,72,17,.13));
    border:1px solid rgba(245,208,122,.34);
    box-shadow:0 8px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
.pirate-production-summary div:nth-child(1){
    background:linear-gradient(180deg,rgba(56,189,248,.24),rgba(14,116,144,.16));
    border-color:rgba(125,211,252,.48);
}
.pirate-production-summary div:nth-child(2){
    background:linear-gradient(180deg,rgba(251,146,60,.28),rgba(153,27,27,.14));
    border-color:rgba(253,186,116,.5);
}
.pirate-production-summary div:nth-child(3){
    background:linear-gradient(180deg,rgba(245,208,122,.28),rgba(180,83,9,.16));
    border-color:rgba(250,204,21,.5);
}
.pirate-production-summary div:nth-child(4){
    background:linear-gradient(180deg,rgba(96,165,250,.24),rgba(67,56,202,.16));
    border-color:rgba(147,197,253,.48);
}
.pirate-production-summary span,
.pirate-production-summary em{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(240,249,255,.78);
    font-size:10px;
    font-style:normal;
}
.pirate-production-summary strong{
    display:block;
    margin:2px 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:16px;
    line-height:1.1;
}
.pirate-production-main{
    grid-column:1/-1;
    background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(21,128,61,.13))!important;
    border-color:rgba(134,239,172,.48)!important;
}
.crew-produce-btn::before{
    display:none;
}
.crew-produce-btn:not(:disabled)::before{
    animation:none;
}
.crew-produce-btn span,
.crew-produce-btn b,
.crew-produce-btn small{
    position:relative;
    z-index:1;
}
.crew-produce-btn span{
    color:#160e04;
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:12px;
    font-weight:1000;
    letter-spacing:0;
    text-transform:none;
}
.crew-grid .mini-btn:hover:not(:disabled),
.crew-produce-btn:hover:not(:disabled){
    filter:brightness(1.04);
    transform:translateY(-1px);
}
.crew-grid .mini-btn:disabled,
.crew-produce-btn:disabled{
    opacity:.55;
    filter:saturate(.65);
}
.crew-grid .mini-btn small{
    width:100%;
    max-width:100%;
    padding:3px 7px;
    border-radius:999px;
    background:rgba(22,163,74,.92);
    border:1px solid rgba(187,247,208,.55);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#ecfdf5;
    font-size:9px;
    font-weight:800;
    line-height:1;
}
.crew-grid .mini-btn b{
    min-width:30px;
    padding:3px 7px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(180deg,#ef4444,#991b1b);
    border:1px solid rgba(254,202,202,.55);
    box-shadow:0 5px 12px rgba(127,29,29,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
.promote-btn{
    width:100%;
    margin-top:7px;
    justify-content:center;
    min-height:36px;
}
@keyframes trainShine{
    0%,42%{left:-38%}
    72%,100%{left:112%}
}
.research-list{
    gap:8px;
}
.research-row{
    grid-template-columns:minmax(0,1fr) 86px;
    padding:9px;
}
.research-row strong{
    font-size:12px;
    line-height:1.2;
}
.research-row span{
    font-size:10px;
    line-height:1.35;
}
.research-row .mini-btn{
    min-height:34px;
    width:86px;
    padding:6px 8px;
}
.cosmetic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.cosmetic-option{
    aspect-ratio:auto;
    min-height:54px;
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    grid-template-rows:1fr auto;
    align-items:center;
    text-align:left;
    gap:3px 8px;
    padding:8px;
}
.cosmetic-swatch{
    grid-row:1/3;
    width:34px;
    height:34px;
}
.cosmetic-option strong{
    align-self:end;
    font-size:11px;
}
.cosmetic-option small{
    align-self:start;
    font-size:9px;
}
.bonus-card{
    margin-top:10px;
    max-height:none;
    overflow:visible;
}
.bonus-card li{
    padding:6px 0 6px 16px;
    font-size:12px;
}
@media(max-width:1180px){
    .island-shell{
        grid-template-columns:minmax(0,1fr) 360px;
    }
    .research-row{
        grid-template-columns:1fr;
    }
    .research-row .mini-btn{
        width:100%;
    }
}
@media(max-width:900px){
    .island-shell{
        grid-template-columns:1fr 330px;
    }
    .crew-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .pirate-production-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:700px){
    .island-shell{
        grid-template-columns:1fr;
    }
    .panel{
        max-height:none;
    }
}

/* Cephanelik and ammo research */
.building-dock{
    grid-template-columns:repeat(8,minmax(0,1fr));
}
.building-tab{
    min-width:0;
}
.building-tab span{
    min-width:0;
    overflow:hidden;
}
.building-tab strong,
.building-tab em{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.research-row.locked{
    opacity:.64;
}
.research-row.locked span{
    color:rgba(226,237,230,.58);
}
.b-armory .b-name{
    position:relative;
    z-index:3;
    width:auto;
    height:30px;
    margin-top:-28px;
    border-radius:999px;
    padding:0 10px;
    gap:6px;
    background:linear-gradient(180deg,rgba(42,20,8,.92),rgba(7,10,10,.82));
    border-color:rgba(255,184,77,.64);
    box-shadow:0 9px 18px rgba(0,0,0,.34),0 0 18px rgba(255,151,53,.22),inset 0 1px 0 rgba(255,255,255,.1);
}
.b-armory .b-name span{
    display:inline;
    color:#ffe2a0;
}
.b-armory .b-name svg{
    color:#ffbf58;
}
.b-armory:before{
    opacity:.34;
    background:rgba(255,151,53,.18);
    box-shadow:0 0 24px rgba(255,151,53,.34);
}
.b-armory:hover .b-name,
.b-armory.active .b-name{
    height:30px;
}
.b-armory .b-img{
    display:block!important;
    width:clamp(132px,11vw,190px);
    height:auto;
    position:relative;
    z-index:2;
    pointer-events:none;
    filter:drop-shadow(0 16px 18px rgba(0,0,0,.42)) saturate(1.08) contrast(1.02);
}
.b-armory:hover .b-img,
.b-armory.active .b-img{
    filter:drop-shadow(0 18px 20px rgba(0,0,0,.46)) drop-shadow(0 0 14px rgba(255,184,77,.25)) saturate(1.12) contrast(1.04);
}
@media(max-width:1180px){
    .building-dock{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}
@media(max-width:700px){
    .building-dock{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* Complete island map: all buildings are baked into one background */
.island-bg{
    object-fit:cover;
    object-position:center center;
}
.building .b-img,
.b-armory .b-img{
    display:none!important;
}
.b-quarry{left:26%;top:13.8%}
.b-carpenter{left:35%;top:17.2%}
.b-forge{left:24%;top:48.2%}
.b-training{left:68.8%;top:17.4%}
.b-captain{left:49.5%;top:39.6%}
.b-shipyard{left:70.2%;top:51.5%}
.b-armory{left:46.8%;top:67.5%;z-index:8}
.b-infirmary{left:67.2%;top:73.8%;z-index:8}
.b-harbor{left:16.7%;top:74.2%}
.b-armory .b-name{
    width:30px;
    height:30px;
    padding:0;
    margin-top:0;
    border-radius:50%;
    background:linear-gradient(180deg,rgba(5,16,19,.86),rgba(0,0,0,.74));
    border-color:rgba(245,208,122,.34);
    box-shadow:0 8px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
.b-armory .b-name span{
    display:none;
}
.b-armory:hover .b-name,
.b-armory.active .b-name{
    width:auto;
    height:28px;
    border-radius:999px;
    padding:0 9px;
    gap:5px;
}
.b-armory:hover .b-name span,
.b-armory.active .b-name span{
    display:inline;
}
@media(max-width:900px){
    .b-quarry{left:26%;top:18.6%}
    .b-carpenter{left:35.2%;top:21.5%}
    .b-forge{left:24%;top:48.2%}
    .b-training{left:68.8%;top:21.7%}
    .b-captain{left:49.5%;top:41%}
    .b-shipyard{left:70.2%;top:51.5%}
    .b-armory{left:46.8%;top:66.2%}
    .b-infirmary{left:67.2%;top:72.3%}
    .b-harbor{left:16.7%;top:74.8%}
}

/* Keep island hotspot labels readable and out of each other's way. */
.island-map .building{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    overflow:visible;
}
.island-map .b-name,
.island-map .b-harbor .b-name,
.island-map .b-armory .b-name{
    position:absolute;
    left:50%;
    top:50%;
    width:30px;
    height:30px;
    margin:0;
    padding:0;
    transform:translate(-50%,-50%);
    border-radius:50%;
    z-index:3;
}
.island-map .building:hover,
.island-map .building.active{
    z-index:30;
}
.island-map .building:hover .b-name,
.island-map .building.active .b-name,
.island-map .building:hover.b-harbor .b-name,
.island-map .building.active.b-harbor .b-name,
.island-map .b-armory:hover .b-name,
.island-map .b-armory.active .b-name{
    top:auto;
    bottom:38px;
    width:max-content;
    min-width:74px;
    max-width:128px;
    min-height:28px;
    height:auto;
    padding:5px 8px;
    transform:translateX(-50%);
    border-radius:8px;
    line-height:1.15;
    white-space:normal;
    text-align:center;
}
.island-map .building:hover .b-name span,
.island-map .building.active .b-name span,
.island-map .building:hover.b-harbor .b-name span,
.island-map .building.active.b-harbor .b-name span,
.island-map .b-armory:hover .b-name span,
.island-map .b-armory.active .b-name span{
    display:inline;
}
.island-map .b-tier,
.island-map .building em,
.island-map .b-time{
    display:none!important;
}
.island-map .building.ready:hover .b-ready,
.island-map .building.ready.active .b-ready{
    right:-10px;
    top:-10px;
}
@media(max-width:620px){
    .pirate-production-summary{
        grid-template-columns:1fr;
    }
    .island-map .building:hover .b-name,
    .island-map .building.active .b-name{
        max-width:104px;
        font-size:9px;
    }
}

/* Vivid resource and research cards */
.resource-row .resource{
    overflow:hidden;
    border-width:1px;
    box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
.resource-row .resource:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 42%);
    opacity:.55;
}
.res-gold{
    background:linear-gradient(180deg,rgba(245,208,122,.34),rgba(146,95,18,.22))!important;
    border-color:rgba(250,204,21,.58)!important;
}
.res-wood{
    background:linear-gradient(180deg,rgba(180,111,45,.34),rgba(87,50,22,.25))!important;
    border-color:rgba(217,119,6,.54)!important;
}
.res-stone{
    background:linear-gradient(180deg,rgba(203,213,225,.30),rgba(71,85,105,.25))!important;
    border-color:rgba(226,232,240,.48)!important;
}
.res-iron{
    background:linear-gradient(180deg,rgba(148,163,184,.34),rgba(51,65,85,.30))!important;
    border-color:rgba(148,163,184,.56)!important;
}
.res-pearl{
    background:linear-gradient(180deg,rgba(125,211,252,.34),rgba(14,116,144,.25))!important;
    border-color:rgba(103,232,249,.56)!important;
}
.resource span{
    color:rgba(255,255,255,.76);
}
.resource strong{
    color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.32);
}
.research-row{
    border-width:1px;
    box-shadow:0 8px 18px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.08);
}
.research-row:nth-child(1){
    background:linear-gradient(180deg,rgba(251,146,60,.24),rgba(153,27,27,.13));
    border-color:rgba(253,186,116,.45);
}
.research-row:nth-child(2){
    background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(21,128,61,.13));
    border-color:rgba(134,239,172,.44);
}
.research-row:nth-child(3){
    background:linear-gradient(180deg,rgba(245,208,122,.26),rgba(146,64,14,.14));
    border-color:rgba(250,204,21,.48);
}
.research-row:nth-child(4){
    background:linear-gradient(180deg,rgba(56,189,248,.23),rgba(14,116,144,.14));
    border-color:rgba(125,211,252,.46);
}
.research-row:nth-child(5){
    background:linear-gradient(180deg,rgba(248,113,113,.22),rgba(127,29,29,.14));
    border-color:rgba(252,165,165,.42);
}
.research-row:nth-child(6){
    background:linear-gradient(180deg,rgba(192,132,252,.24),rgba(88,28,135,.15));
    border-color:rgba(216,180,254,.44);
}
.research-row:nth-child(7){
    background:linear-gradient(180deg,rgba(45,212,191,.22),rgba(15,118,110,.14));
    border-color:rgba(94,234,212,.44);
}
.research-row strong,
.research-row span{
    color:rgba(255,255,255,.9);
}
.research-row em{
    color:#fef3c7;
}
.research-row .mini-btn{
    border-color:rgba(255,239,177,.62);
    background:linear-gradient(180deg,#f1cf71,#b36f22);
    color:#160e04;
}
.research-row.locked{
    filter:saturate(.55);
}

/* Polished button color pass */
button:not(.building){
    -webkit-tap-highlight-color:transparent;
}
.primary-btn,
.ghost-btn,
.mini-btn,
.building-tab,
.cosmetic-option{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.primary-btn:before,
.ghost-btn:before,
.mini-btn:before,
.building-tab:before,
.cosmetic-option:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 38%,rgba(255,255,255,.08));
    opacity:.34;
}
.primary-btn > *,
.ghost-btn > *,
.mini-btn > *,
.building-tab > *,
.cosmetic-option > *{
    position:relative;
    z-index:1;
}
.primary-btn:hover:not(:disabled),
.ghost-btn:hover:not(:disabled),
.mini-btn:hover:not(:disabled),
.building-tab:hover:not(:disabled),
.cosmetic-option:hover{
    transform:translateY(-1px);
    filter:brightness(1.06) saturate(1.08);
}
.primary-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.mini-btn:active:not(:disabled),
.building-tab:active:not(:disabled),
.cosmetic-option:active{
    transform:translateY(0) scale(.99);
}
.primary-btn,
#upgrade-btn{
    border-color:rgba(255,239,177,.72)!important;
    background:linear-gradient(180deg,#ffe38a,#d18b25 62%,#8f5518)!important;
    color:#160e04!important;
    box-shadow:0 10px 22px rgba(229,180,81,.24),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
#sail-btn{
    border-color:rgba(125,211,252,.62)!important;
    background:linear-gradient(180deg,#67e8f9,#0891b2 62%,#075985)!important;
    color:#021114!important;
    box-shadow:0 10px 22px rgba(14,165,233,.23),inset 0 1px 0 rgba(255,255,255,.36)!important;
}
#collect-btn{
    border-color:rgba(134,239,172,.58)!important;
    background:linear-gradient(180deg,rgba(74,222,128,.32),rgba(21,128,61,.35))!important;
    color:#ecfdf5!important;
    box-shadow:0 10px 22px rgba(34,197,94,.16),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#hire-worker-btn{
    border-color:rgba(216,180,254,.58)!important;
    background:linear-gradient(180deg,rgba(192,132,252,.35),rgba(88,28,135,.38))!important;
    color:#f5f3ff!important;
}
.speedup-card{
    border-color:rgba(125,211,252,.52)!important;
    background:linear-gradient(180deg,rgba(56,189,248,.28),rgba(14,116,144,.22))!important;
    color:#e0f2fe!important;
}
.speedup-card:nth-child(2){
    border-color:rgba(45,212,191,.52)!important;
    background:linear-gradient(180deg,rgba(45,212,191,.28),rgba(15,118,110,.24))!important;
}
.speedup-card:nth-child(3){
    border-color:rgba(192,132,252,.55)!important;
    background:linear-gradient(180deg,rgba(192,132,252,.3),rgba(88,28,135,.25))!important;
}
.buy-speedup-btn{
    border-color:rgba(134,239,172,.56)!important;
    background:linear-gradient(180deg,rgba(74,222,128,.32),rgba(21,128,61,.27))!important;
    color:#ecfdf5!important;
}
.buy-speedup-btn b{
    color:#bbf7d0!important;
}
.crew-grid .mini-btn,
.research-row .mini-btn{
    border-color:rgba(255,239,177,.7)!important;
    background:linear-gradient(180deg,#ffe38a,#d18b25 62%,#8f5518)!important;
    color:#160e04!important;
    box-shadow:0 10px 20px rgba(229,180,81,.22),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
.promote-btn{
    border-color:rgba(251,113,133,.58)!important;
    background:linear-gradient(180deg,rgba(251,113,133,.38),rgba(159,18,57,.34))!important;
    color:#fff1f2!important;
}
.building-tab:nth-child(1){border-color:rgba(251,146,60,.42);background:linear-gradient(180deg,rgba(251,146,60,.18),rgba(124,45,18,.12))}
.building-tab:nth-child(2){border-color:rgba(180,111,45,.42);background:linear-gradient(180deg,rgba(180,111,45,.18),rgba(87,50,22,.13))}
.building-tab:nth-child(3){border-color:rgba(203,213,225,.38);background:linear-gradient(180deg,rgba(203,213,225,.14),rgba(71,85,105,.16))}
.building-tab:nth-child(4){border-color:rgba(248,113,113,.4);background:linear-gradient(180deg,rgba(248,113,113,.16),rgba(127,29,29,.13))}
.building-tab:nth-child(5){border-color:rgba(245,208,122,.48);background:linear-gradient(180deg,rgba(245,208,122,.18),rgba(146,64,14,.14))}
.building-tab:nth-child(6){border-color:rgba(56,189,248,.44);background:linear-gradient(180deg,rgba(56,189,248,.17),rgba(14,116,144,.14))}
.building-tab:nth-child(7){border-color:rgba(192,132,252,.44);background:linear-gradient(180deg,rgba(192,132,252,.18),rgba(88,28,135,.15))}
.building-tab:nth-child(8){border-color:rgba(34,197,94,.42);background:linear-gradient(180deg,rgba(34,197,94,.16),rgba(21,128,61,.13))}
.building-tab.active{
    box-shadow:0 10px 22px rgba(0,0,0,.2),0 0 0 1px rgba(255,239,177,.22),inset 0 1px 0 rgba(255,255,255,.12)!important;
}

/* Empty island with level-aware building asset layers */
.island-map{
    background:linear-gradient(180deg,#073c5a,#061f35)!important;
}
.island-bg{
    object-fit:cover!important;
    object-position:center center!important;
}
.island-map .building{
    width:clamp(104px,9.4vw,168px)!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    overflow:visible!important;
    transform:translate(-50%,-72%)!important;
    filter:drop-shadow(0 14px 16px rgba(0,0,0,.36))!important;
}
.island-map .building:hover,
.island-map .building.active{
    transform:translate(-50%,calc(-72% - 3px)) scale(1.03)!important;
    z-index:40!important;
}
.island-map .building .b-img,
.island-map .b-armory .b-img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    margin:0!important;
    pointer-events:none!important;
    filter:drop-shadow(0 14px 14px rgba(0,0,0,.42)) saturate(1.08) contrast(1.03)!important;
    opacity:1!important;
}
.island-map .building.tier-2{
    width:clamp(116px,10.4vw,186px)!important;
}
.island-map .building.tier-3{
    width:clamp(128px,11.4vw,204px)!important;
}
.island-map .building.tier-2 .b-img{
    filter:drop-shadow(0 16px 16px rgba(0,0,0,.44)) saturate(1.18) brightness(1.04)!important;
}
.island-map .building.tier-3 .b-img{
    filter:drop-shadow(0 0 16px rgba(245,208,122,.26)) drop-shadow(0 18px 18px rgba(0,0,0,.48)) saturate(1.28) brightness(1.08)!important;
}
.island-map .b-tier{
    display:grid!important;
    top:7px!important;
    left:70%!important;
    z-index:4!important;
}
.island-map .building em,
.island-map .b-time{
    display:none!important;
}
.island-map .b-name,
.island-map .b-harbor .b-name,
.island-map .b-armory .b-name{
    position:absolute!important;
    left:50%!important;
    top:auto!important;
    bottom:-10px!important;
    width:max-content!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:5px 8px!important;
    margin:0!important;
    transform:translate(-50%,100%)!important;
    border-radius:999px!important;
    opacity:0!important;
    pointer-events:none!important;
    background:rgba(3,12,15,.82)!important;
    border-color:rgba(245,208,122,.34)!important;
}
.island-map .b-name svg{
    display:none!important;
}
.island-map .b-name span,
.island-map .b-harbor .b-name span,
.island-map .b-armory .b-name span{
    display:inline!important;
}
.island-map .building:hover .b-name,
.island-map .building.active .b-name,
.island-map .building:hover.b-harbor .b-name,
.island-map .building.active.b-harbor .b-name,
.island-map .b-armory:hover .b-name,
.island-map .b-armory.active .b-name{
    bottom:-10px!important;
    opacity:1!important;
    transform:translate(-50%,100%)!important;
    white-space:nowrap!important;
}
.island-map .b-build,
.island-map .b-ready{
    z-index:5!important;
}
.b-quarry{left:22.8%!important;top:38.2%!important}
.b-forge{left:36.8%!important;top:39.8%!important}
.b-training{left:62.6%!important;top:36.4%!important}
.b-infirmary{left:78.2%!important;top:38.6%!important}
.b-captain{left:50.2%!important;top:53.4%!important}
.b-armory{left:72.4%!important;top:55.6%!important;z-index:8!important}
.b-carpenter{left:38.4%!important;top:69.4%!important}
.b-shipyard{left:61.8%!important;top:70.8%!important}
.b-harbor{left:25.4%!important;top:78.4%!important}
.b-harbor{
    width:clamp(126px,12vw,218px)!important;
}
@media(max-width:900px){
    .island-map .building{
        width:clamp(82px,18vw,132px)!important;
    }
    .island-map .building.tier-2{
        width:clamp(90px,20vw,146px)!important;
    }
    .island-map .building.tier-3{
        width:clamp(98px,22vw,158px)!important;
    }
    .b-quarry{left:22.8%!important;top:38.8%!important}
    .b-forge{left:36.8%!important;top:40.3%!important}
    .b-training{left:62.6%!important;top:37%!important}
    .b-infirmary{left:78.2%!important;top:39.2%!important}
    .b-captain{left:50.2%!important;top:54%!important}
    .b-armory{left:72.4%!important;top:56.2%!important}
    .b-carpenter{left:38.4%!important;top:70%!important}
    .b-shipyard{left:61.8%!important;top:71.4%!important}
    .b-harbor{left:25.4%!important;top:79%!important}
}

/* Cohesive integrated island fallback until final AI building assets are ready */
.island-bg{
    object-fit:cover!important;
    object-position:center center!important;
}
.island-map .building .b-img,
.island-map .b-armory .b-img{
    display:none!important;
}
.island-map .building{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    overflow:visible!important;
    transform:translate(-50%,-70%)!important;
    filter:none!important;
}
.island-map .building:hover,
.island-map .building.active{
    transform:translate(-50%,calc(-70% - 2px)) scale(1.05)!important;
    z-index:30!important;
}
.b-quarry{left:26%!important;top:13.8%!important}
.b-carpenter{left:35%!important;top:17.2%!important}
.b-forge{left:24%!important;top:48.2%!important}
.b-training{left:68.8%!important;top:17.4%!important}
.b-captain{left:49.5%!important;top:39.6%!important}
.b-shipyard{left:70.2%!important;top:51.5%!important}
.b-armory{left:46.8%!important;top:67.5%!important;z-index:8!important}
.b-infirmary{left:67.2%!important;top:73.8%!important;z-index:8!important}
.b-harbor{left:16.7%!important;top:74.2%!important}
.island-map .b-name,
.island-map .b-harbor .b-name,
.island-map .b-armory .b-name{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    bottom:auto!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    padding:0!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    opacity:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(5,16,19,.86),rgba(0,0,0,.74))!important;
    border-color:rgba(245,208,122,.34)!important;
}
.island-map .b-name span,
.island-map .b-harbor .b-name span,
.island-map .b-armory .b-name span{
    display:none!important;
}
.island-map .building:hover .b-name,
.island-map .building.active .b-name,
.island-map .building:hover.b-harbor .b-name,
.island-map .building.active.b-harbor .b-name,
.island-map .b-armory:hover .b-name,
.island-map .b-armory.active .b-name{
    top:auto!important;
    bottom:38px!important;
    width:max-content!important;
    min-width:74px!important;
    max-width:128px!important;
    min-height:28px!important;
    height:auto!important;
    padding:5px 8px!important;
    transform:translateX(-50%)!important;
    border-radius:8px!important;
    line-height:1.15!important;
    white-space:normal!important;
    text-align:center!important;
}
.island-map .building:hover .b-name span,
.island-map .building.active .b-name span,
.island-map .building:hover.b-harbor .b-name span,
.island-map .building.active.b-harbor .b-name span,
.island-map .b-armory:hover .b-name span,
.island-map .b-armory.active .b-name span{
    display:inline!important;
}
.island-map .b-tier,
.island-map .building em,
.island-map .b-time{
    display:none!important;
}
.island-map .building.ready:hover .b-ready,
.island-map .building.ready.active .b-ready{
    right:-10px!important;
    top:-10px!important;
}
@media(max-width:900px){
    .b-quarry{left:26%!important;top:18.6%!important}
    .b-carpenter{left:35.2%!important;top:21.5%!important}
    .b-forge{left:24%!important;top:48.2%!important}
    .b-training{left:68.8%!important;top:21.7%!important}
    .b-captain{left:49.5%!important;top:41%!important}
    .b-shipyard{left:70.2%!important;top:51.5%!important}
    .b-armory{left:46.8%!important;top:66.2%!important}
    .b-infirmary{left:67.2%!important;top:72.3%!important}
    .b-harbor{left:16.7%!important;top:74.8%!important}
}

/* Professional layered asset mode. Uses the coherent pro SVG asset set. */
.island-map.layered-assets{
    background:linear-gradient(180deg,#073c5a,#061f35)!important;
}
.island-map.layered-assets .building{
    width:clamp(104px,9.4vw,168px)!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    overflow:visible!important;
    transform:translate(-50%,-72%)!important;
    filter:drop-shadow(0 14px 16px rgba(0,0,0,.36))!important;
}
.island-map.layered-assets .building:hover,
.island-map.layered-assets .building.active{
    transform:translate(-50%,calc(-72% - 3px)) scale(1.03)!important;
    z-index:40!important;
}
.island-map.layered-assets .building .b-img,
.island-map.layered-assets .b-armory .b-img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    margin:0!important;
    pointer-events:none!important;
    filter:drop-shadow(0 14px 14px rgba(0,0,0,.42)) saturate(1.08) contrast(1.03)!important;
    opacity:1!important;
}
.island-map.layered-assets .building.tier-2{
    width:clamp(116px,10.4vw,186px)!important;
}
.island-map.layered-assets .building.tier-3{
    width:clamp(128px,11.4vw,204px)!important;
}
.island-map.layered-assets .building.tier-2 .b-img{
    filter:drop-shadow(0 16px 16px rgba(0,0,0,.44)) saturate(1.18) brightness(1.04)!important;
}
.island-map.layered-assets .building.tier-3 .b-img{
    filter:drop-shadow(0 0 16px rgba(245,208,122,.26)) drop-shadow(0 18px 18px rgba(0,0,0,.48)) saturate(1.28) brightness(1.08)!important;
}
.island-map.layered-assets .b-tier{
    display:grid!important;
    top:7px!important;
    left:70%!important;
    z-index:4!important;
}
.island-map.layered-assets .building em,
.island-map.layered-assets .b-time{
    display:none!important;
}
.island-map.layered-assets .b-name,
.island-map.layered-assets .b-harbor .b-name,
.island-map.layered-assets .b-armory .b-name{
    position:absolute!important;
    left:50%!important;
    top:auto!important;
    bottom:-10px!important;
    width:max-content!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:5px 8px!important;
    margin:0!important;
    transform:translate(-50%,100%)!important;
    border-radius:999px!important;
    opacity:0!important;
    pointer-events:none!important;
    background:rgba(3,12,15,.82)!important;
    border-color:rgba(245,208,122,.34)!important;
}
.island-map.layered-assets .b-name svg{
    display:none!important;
}
.island-map.layered-assets .b-name span,
.island-map.layered-assets .b-harbor .b-name span,
.island-map.layered-assets .b-armory .b-name span{
    display:inline!important;
}
.island-map.layered-assets .building:hover .b-name,
.island-map.layered-assets .building.active .b-name,
.island-map.layered-assets .building:hover.b-harbor .b-name,
.island-map.layered-assets .building.active.b-harbor .b-name,
.island-map.layered-assets .b-armory:hover .b-name,
.island-map.layered-assets .b-armory.active .b-name{
    bottom:-10px!important;
    opacity:1!important;
    transform:translate(-50%,100%)!important;
    white-space:nowrap!important;
}
.island-map.layered-assets .b-quarry{left:22.8%!important;top:38.2%!important}
.island-map.layered-assets .b-forge{left:36.8%!important;top:39.8%!important}
.island-map.layered-assets .b-training{left:62.6%!important;top:36.4%!important}
.island-map.layered-assets .b-infirmary{left:78.2%!important;top:38.6%!important}
.island-map.layered-assets .b-captain{left:50.2%!important;top:53.4%!important}
.island-map.layered-assets .b-armory{left:72.4%!important;top:55.6%!important;z-index:8!important}
.island-map.layered-assets .b-carpenter{left:38.4%!important;top:69.4%!important}
.island-map.layered-assets .b-shipyard{left:61.8%!important;top:70.8%!important}
.island-map.layered-assets .b-harbor{left:25.4%!important;top:78.4%!important;width:clamp(126px,12vw,218px)!important}
@media(max-width:900px){
    .island-map.layered-assets .building{width:clamp(82px,18vw,132px)!important}
    .island-map.layered-assets .building.tier-2{width:clamp(90px,20vw,146px)!important}
    .island-map.layered-assets .building.tier-3{width:clamp(98px,22vw,158px)!important}
    .island-map.layered-assets .b-quarry{left:22.8%!important;top:38.8%!important}
    .island-map.layered-assets .b-forge{left:36.8%!important;top:40.3%!important}
    .island-map.layered-assets .b-training{left:62.6%!important;top:37%!important}
    .island-map.layered-assets .b-infirmary{left:78.2%!important;top:39.2%!important}
    .island-map.layered-assets .b-captain{left:50.2%!important;top:54%!important}
    .island-map.layered-assets .b-armory{left:72.4%!important;top:56.2%!important}
    .island-map.layered-assets .b-carpenter{left:38.4%!important;top:70%!important}
    .island-map.layered-assets .b-shipyard{left:61.8%!important;top:71.4%!important}
    .island-map.layered-assets .b-harbor{left:25.4%!important;top:79%!important}
}