/* Fleet Rivals naval style candidate 1. See docs/VISUAL_STYLE.md before changing tokens. */
:root{--navy-950:#071e2d;--navy-800:#12354a;--navy-650:#28546a;--steel:#84a9b5;--brass:#b99a5d;--ivory:#f4edda;--energy:#e4ad45;--energy-light:#ffe0a0;--ally:#74c9e0;--enemy:#e88976;--gold:var(--energy-light)}
.world-backdrop{background:radial-gradient(ellipse at 50% 20%,#1c5266aa,transparent 65%),linear-gradient(#071e2de8,#071e2df5),url('/ocean.png') center/cover}
.lobby{background:linear-gradient(#12354a99,#071e2dd9)}
.lobby-header{border-color:#b99a5d40}.logo{transform:none;color:var(--ivory)}
.lobby h1{font-size:clamp(36px,9vw,46px);letter-spacing:.3px;color:var(--ivory);margin:12px 0 20px}.lobby-kicker{color:var(--steel);letter-spacing:2px;margin-top:24px}
.harbor-diorama{position:relative;isolation:isolate;height:285px;border:1px solid #84a9b54a;border-radius:48% 48% 18px 18px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#397e8733,transparent 65%),linear-gradient(#124859b8,#0b334be0),url('/water-texture.png') center/cover;box-shadow:inset 0 0 35px #061c2bb0,0 12px 18px #03132060;margin:0 0 22px}
.harbor-quay{position:absolute;left:0;right:0;bottom:0;height:45px;background:repeating-linear-gradient(90deg,transparent 0 37px,#172e3699 38px 40px),linear-gradient(#899087,#545e59);border-top:5px solid var(--brass);box-shadow:0 -5px 0 #102c36,0 -9px 18px #03192488}
.harbor-diorama:before,.harbor-diorama:after{content:'';position:absolute;width:18px;top:38%;bottom:30px;background:repeating-linear-gradient(0deg,#746f58 0 11px,#b1a382 12px 14px);border:2px solid #c4ad77;border-radius:4px;box-shadow:5px 5px 0 #061f3366;z-index:1}.harbor-diorama:before{left:32%}.harbor-diorama:after{right:30%}
.harbor-diorama .lobby-fleet{position:absolute;inset:18px 16px 42px;height:auto;gap:35px;align-items:flex-end;background:none}.harbor-diorama .lobby-fleet>div{height:130px;width:64px;flex:1;max-width:75px;transform:none;filter:drop-shadow(6px 8px 3px #021c3288)}.harbor-diorama .lobby-fleet>div:nth-child(2){height:172px}.harbor-diorama .lobby-fleet>div:nth-child(3){height:205px}.harbor-caption{position:absolute;bottom:13px;left:0;right:0;text-align:center;font:800 10px 'Nunito Sans',sans-serif;letter-spacing:3px;color:#f4edda;text-shadow:0 1px #071e2d}
.arena-card{padding:16px 12px;background:linear-gradient(#23495c,#12354a);border:1px solid #84a9b566;border-bottom:3px solid #061b2a;border-radius:14px;box-shadow:inset 0 1px #ffffff16,0 5px 14px #04192744}.arena-card>small{display:block;margin-bottom:12px;color:var(--steel)}
.gold-button,.arena-card .gold-button,.deploy-actions .gold-button{background:linear-gradient(#f7d580,#dca445);border:1px solid #ffe4a5;border-bottom:4px solid #896332;border-radius:10px;color:#253442;text-shadow:0 1px #fff4cb66;box-shadow:inset 0 1px #fff4c6,0 3px #051d2b}.gold-button:active{transform:translateY(2px)}
.app-nav,.command-hand,.deployment{background:linear-gradient(#24495c,#102e42);border-top-color:#84a9b560}.app-nav button.active{background:#b99a5d18;color:var(--energy-light);box-shadow:inset 0 2px var(--brass)}
.multiplayer-entry button,#online-deployment button{background:#15394d;border-color:#84a9b54d;color:#d2e1e2;min-height:40px}.settings-panel select,.settings-panel button,.collection article{background:linear-gradient(#24495c,#12354a);border-color:#84a9b560}
/* Engine charge: four brass gauge cells. No crystals or pink cost badges. */
.energy{padding:5px 4px;border:1px solid #b99a5d55;border-radius:6px;background:#071e2d99}.energy i{background:linear-gradient(90deg,#9c6e2f,var(--energy) 45%,var(--energy-light));border:1px solid #f3d392;border-radius:2px;box-shadow:0 1px #76552c,inset 0 1px #fff0bb;transform:none}.energy i.used{background:#294451;border-color:#65808b;box-shadow:inset 0 1px #071e2d;opacity:.4}.energy b{color:var(--energy-light)}
.card{background:linear-gradient(145deg,#365e72,#17384c);border-color:#84a9b5aa;border-bottom-color:#081e2d;box-shadow:0 2px #061723,inset 0 1px #d9eef02e}.card:before{background:radial-gradient(ellipse at 50% 12%,#a7d0d524,transparent 75%)}.card svg{transform:none;filter:drop-shadow(0 2px 1px #071e2d99)}.card strong{color:var(--ivory)}.card small{background:linear-gradient(var(--energy-light),var(--energy));color:#283a44;border-color:#f9e3ad;box-shadow:0 2px #795b32;text-shadow:none;border-radius:4px}.card.active{background:linear-gradient(#496576,#264858);border-color:var(--energy-light);border-bottom-color:var(--brass);box-shadow:0 2px #6d5736,inset 0 1px #f6dfa888}.card:disabled{opacity:.42;filter:saturate(.5)}.countdown-track i{background:var(--energy)}
.fleet-slot.selected{background:linear-gradient(#3e5d68,#234657);border-color:var(--energy-light)}
/* Calm the water without filtering ships, targets or effects. */
.shared-sea .board{background:linear-gradient(#123b50ad,#0a334dbb),url('/water-texture.png') center/cover,#18566c}.shared-sea .cell{border-color:#b9e4e414;background-color:transparent}.shared-sea .cell:nth-child(3n){background-color:#102f4608}.shared-sea.setup .cell,.shared-sea .board:has(.maneuver-target) .cell{border-color:#b9e4e42c}.shared-sea .show-weapon-range .cell.in-range{background:#9cece424}.board:before{opacity:.4}.opponent-hud{background:linear-gradient(90deg,#12354af5,#163c50dd);border-color:#84a9b536}.enemy-ship .enemy-hp i.filled{background:linear-gradient(#f4bd9d,var(--enemy))}
.captain-matchup{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:6px 10px;border:1px solid #84a9b545;border-radius:7px;background:linear-gradient(100deg,#23566c,#102f44 48%,#553d43);font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:.8px;animation:captains-arrive .45s ease-out}.captain-matchup span{max-width:43%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.captain-matchup b{color:var(--energy-light);font-size:18px}.waiting-card{background:linear-gradient(#23495c,#102e42);border-color:#b99a5d66}.waiting-radar{border-color:var(--brass);background:conic-gradient(transparent 55%,#e4ad4560)}
@keyframes captains-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-height:750px){.harbor-diorama{height:225px}.harbor-diorama .lobby-fleet{top:10px}.harbor-diorama .lobby-fleet>div{height:105px}.harbor-diorama .lobby-fleet>div:nth-child(2){height:135px}.harbor-diorama .lobby-fleet>div:nth-child(3){height:165px}.lobby-kicker{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.captain-matchup{animation:none}}

/* Energy shortage is grey; the brass track shows charge toward this action's cost. */
.card.energy-starved:disabled{opacity:1;filter:none;background:linear-gradient(#4b5961,#293a46);border-color:#788a92;border-bottom-color:#132532}
.card.energy-starved svg,.card.energy-starved strong,.card.energy-starved small{filter:grayscale(1);opacity:.65}
.card-charge{display:none;position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);z-index:3;padding:2px 6px;border-radius:5px;background:#071e2de8;color:var(--energy-light);font:900 13px/1.2 'Nunito Sans',sans-serif;font-variant-numeric:tabular-nums;pointer-events:none;border:1px solid #b99a5d88}
.card.charge-pending .card-charge{display:block}.charge-track{display:none;position:absolute;left:5px;right:5px;bottom:3px;height:3px;border-radius:2px;overflow:hidden;background:#071e2d;pointer-events:none}.energy-starved .charge-track{display:block}.charge-track i{display:block;width:100%;height:100%;background:var(--energy);transform:scaleX(var(--charge,0));transform-origin:left;transition:transform .1s linear}
@media(prefers-reduced-motion:reduce){.charge-track i{transition:none}}

.card .action-art{display:block;width:36px;height:36px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 2px 1px #071e2d80);pointer-events:none}.card.energy-starved .action-art{filter:grayscale(1);opacity:.65}.app-nav .nav-art{display:block;width:36px;height:36px;object-fit:contain;margin:auto;filter:drop-shadow(0 2px 1px #071e2d80)}

/* Original charge cells, slightly wider, with a spatial fill instead of fading. */
.energy i,.energy i.used{position:relative;overflow:hidden;width:15px;background:#294451;opacity:1;border-color:#bca16b;box-shadow:0 1px #76552c}
.energy i::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#b88636,#e4ad45 55%,#ffe0a0);transform:scaleY(var(--fill,1));transform-origin:bottom;transition:transform .1s linear}
.energy i.used::before{transform:scaleY(var(--fill,0))}.charge-track,.energy-starved .charge-track{display:none}
@media(prefers-reduced-motion:reduce){.energy i::before{transition:none}}
/* Slightly larger action costs, without increasing the command footprint. */
.card small{width:19px;height:21px;font-size:12px;line-height:19px;top:-5px;right:-2px}