:root{
  --ink:#0b1a24; --wood:#2a1a10; --wood2:#3d2716; --brass:#d9a441; --brass2:#f4d07a;
  --parch:#efdfbb; --sea:#0d2b40; --red:#e0483f; --green:#57c98a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#05141d;font-family:Rubik,system-ui,sans-serif;color:#fff;
  -webkit-user-select:none;user-select:none;touch-action:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hidden{display:none !important}

/* ---------------------------------------------------------- ana menu */
#menu{position:fixed;inset:0;display:grid;place-items:center;z-index:40;
  background:radial-gradient(ellipse at 50% 35%,rgba(12,48,70,.55),rgba(3,12,18,.93) 70%)}
.menu-inner{width:min(92vw,560px);text-align:center;padding:34px 30px 24px;
  background:linear-gradient(180deg,rgba(18,34,45,.92),rgba(8,18,26,.95));
  border:1px solid rgba(217,164,65,.35);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
#menu h1{font-family:'Pirata One',serif;font-size:clamp(46px,9vw,76px);letter-spacing:2px;line-height:1;
  color:var(--parch);text-shadow:0 3px 0 #000,0 0 40px rgba(217,164,65,.35)}
#menu h1 span{color:var(--brass);font-size:.45em;vertical-align:super;letter-spacing:0}
.tag{margin:10px 0 22px;color:#9fb6c4;font-size:14px}
.row{display:flex;gap:10px}
#nameInput{flex:1;padding:14px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);color:#fff;font-size:16px;font-family:inherit;outline:none}
#nameInput:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(217,164,65,.15)}
#playBtn{padding:14px 26px;border:0;border-radius:11px;cursor:pointer;font-weight:700;font-size:16px;
  letter-spacing:.5px;color:#26160a;background:linear-gradient(180deg,var(--brass2),var(--brass));
  box-shadow:0 6px 0 #8a6220,0 10px 22px rgba(0,0,0,.45);transition:.12s}
#playBtn:hover{filter:brightness(1.08)}
#playBtn:active{transform:translateY(4px);box-shadow:0 2px 0 #8a6220}
.howto{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;font-size:12.5px}
.howto div{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;
  background:rgba(255,255,255,.04)}
.howto b{color:var(--brass2);font-weight:600}
.howto span{color:#8fa5b3}
.foot{margin-top:18px;font-size:12px;color:#6d8492}
.ver{opacity:.6}

/* ---------------------------------------------------------- hud */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20;font-size:13px}
#topleft{position:absolute;left:14px;top:14px;display:flex;gap:12px;align-items:flex-start}
#windbox{position:relative;text-align:center}
#windbox .wl{display:block;margin-top:-4px;font-size:9px;letter-spacing:2px;color:#8fb0c4;opacity:.8}
#sailbox{background:rgba(6,18,26,.9);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:8px 10px}
.sail-label{font-size:9px;letter-spacing:2px;color:#8fb0c4;margin-bottom:6px}
#speedbar{width:52px;height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
#speedbar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#9be8ff,#f4e3bd);transition:width .1s linear}
.sail-hint{margin-top:6px;font-size:9px;color:#5f7788;letter-spacing:1px}

#leaderboard{position:absolute;right:14px;top:14px;width:216px;background:rgba(6,18,26,.93);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px}
#leaderboard h3{font-size:10px;letter-spacing:3px;color:var(--brass);margin-bottom:8px;text-align:center}
#lbList{list-style:none;display:flex;flex-direction:column;gap:4px}
#lbList li{display:flex;align-items:center;gap:6px;font-size:12px;position:relative;
  padding:3px 6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.05)}
#lbList li .bar{position:absolute;inset:0;width:0;background:linear-gradient(90deg,rgba(217,164,65,.34),rgba(217,164,65,.05));border-radius:6px}
#lbList li .rk{position:relative;width:14px;color:#7e94a2;font-size:10px}
#lbList li .nm{position:relative;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lbList li .sc{position:relative;color:#cfe2ee;font-variant-numeric:tabular-nums;font-size:11px}
#lbList li.me{outline:1px solid var(--brass)}
#lbList li.me .nm{color:var(--brass2);font-weight:600}
#online{margin-top:8px;font-size:10px;color:#7e94a2;text-align:center;letter-spacing:1px}

#killfeed{position:absolute;right:14px;top:330px;width:260px;display:flex;flex-direction:column;
  gap:4px;align-items:flex-end}
#killfeed div{background:rgba(6,18,26,.88);border:1px solid rgba(255,255,255,.07);border-radius:7px;
  padding:4px 9px;font-size:11.5px;animation:kf .35s ease-out;max-width:100%}
#killfeed b{color:var(--brass2)}
#killfeed i{color:#8fa5b3;font-style:normal}
@keyframes kf{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

#bottom{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(520px,72vw);text-align:center}
#shipname{font-family:'Pirata One',serif;font-size:21px;letter-spacing:1px;color:var(--parch);
  text-shadow:0 2px 6px rgba(0,0,0,.8);margin-bottom:6px}
#hpbar,#xpbar{position:relative;height:17px;border-radius:9px;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.12);overflow:hidden;margin-top:5px}
#hpbar i{position:absolute;inset:0;width:100%;border-radius:8px;
  background:linear-gradient(180deg,#7de3a4,#38a86c);transition:width .12s linear}
#hpbar.low i{background:linear-gradient(180deg,#ff8f85,#d1382e)}
#xpbar{height:13px}
#xpbar i{position:absolute;inset:0;width:0;border-radius:8px;
  background:linear-gradient(180deg,var(--brass2),var(--brass));transition:width .2s}
#hpbar span,#xpbar span{position:relative;display:block;line-height:17px;font-size:10.5px;
  font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.9);letter-spacing:.5px}
#xpbar span{line-height:13px;font-size:9.5px}

#upgrades{position:absolute;left:14px;bottom:16px;display:flex;flex-direction:column;gap:5px;
  pointer-events:auto;width:196px}
#upgrades .uhdr{font-size:10px;letter-spacing:2px;color:var(--brass);margin-bottom:2px}
#upgrades button{position:relative;display:flex;align-items:center;gap:8px;padding:6px 9px;border:0;
  border-radius:8px;background:rgba(6,18,26,.9);border:1px solid rgba(255,255,255,.09);color:#dbe9f2;
  font-family:inherit;font-size:11.5px;cursor:pointer;text-align:left;transition:.1s}
#upgrades button:hover:not(:disabled){background:rgba(20,44,60,.85);transform:translateX(3px)}
#upgrades button:disabled{opacity:.42;cursor:default}
#upgrades .key{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;font-size:9.5px;color:#9fb6c4;flex:none}
#upgrades .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#upgrades .pips{display:flex;gap:2px;flex:none}
#upgrades .pips i{width:5px;height:11px;border-radius:1.5px;background:rgba(255,255,255,.14)}
#upgrades.has-points button:not(:disabled){box-shadow:0 0 0 1px rgba(217,164,65,.45)}

#minimap{position:absolute;right:14px;bottom:14px;border-radius:12px;
  background:rgba(4,14,22,.88);border:1px solid rgba(255,255,255,.1)}

/* evrim secimi: oyunu kapatmayan alt serit */
#evo{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:25}
#evo h2{font-family:'Pirata One',serif;font-size:19px;color:var(--brass2);letter-spacing:1px;
  text-shadow:0 2px 6px rgba(0,0,0,.9);animation:evopulse 1.6s ease-in-out infinite}
@keyframes evopulse{0%,100%{opacity:.75}50%{opacity:1}}
#evoList{display:flex;gap:9px;justify-content:center;max-width:94vw;pointer-events:auto}
.evo-card{width:132px;padding:8px 8px 10px;border-radius:11px;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,rgba(20,40,54,.92),rgba(8,20,29,.94));
  border:1px solid rgba(217,164,65,.35);transition:.12s}
.evo-card:hover{transform:translateY(-4px);border-color:var(--brass);
  box-shadow:0 10px 26px rgba(0,0,0,.55);background:linear-gradient(180deg,rgba(28,54,72,.96),rgba(10,24,34,.96))}
.evo-card canvas{width:116px;height:74px;display:block;margin:0 auto 4px}
.evo-card h4{font-family:'Pirata One',serif;font-size:15px;color:var(--brass2);letter-spacing:.3px}
.evo-card p{font-size:9.5px;color:#8fa5b3;margin-top:3px;line-height:1.35}
.evo-card .ekey{display:inline-block;margin-top:4px;font-size:9px;color:#6d8492;
  border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:1px 5px}

#deathscreen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:auto;background:rgba(3,10,16,.86);z-index:26;text-align:center}
/* tek sutun, sikisik: baslik -> batiran -> istatistik -> buton */
.death-card{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 38px 22px;border-radius:18px;max-width:min(92vw,520px);
  background:linear-gradient(180deg,rgba(18,34,45,.72),rgba(8,18,26,.82));
  border:1px solid rgba(217,164,65,.22);box-shadow:0 26px 70px rgba(0,0,0,.55)}
#deathscreen h1{font-family:'Pirata One',serif;font-size:clamp(26px,4.2vw,38px);color:#c2a06a;
  letter-spacing:1px;line-height:1;text-shadow:0 2px 0 #000;opacity:.92}

#killerBox{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:12px 22px;border-radius:14px;width:100%;
  background:linear-gradient(180deg,rgba(90,26,22,.42),rgba(40,12,10,.30));
  border:1px solid rgba(224,72,63,.32)}
.kb-label{font-size:10px;letter-spacing:3px;color:#d9a08f;opacity:.85}
#killerName{font-family:'Pirata One',serif;font-size:clamp(40px,8vw,72px);line-height:1.02;
  color:#ffe1a4;text-shadow:0 3px 0 #000,0 0 34px rgba(255,140,90,.35);
  word-break:break-word;max-width:100%}
#killerShip{font-size:12px;color:#a8bfcd;letter-spacing:.5px}

#deathstats{display:flex;gap:8px;justify-content:center;width:100%}
#deathstats div{flex:1;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.05)}
#deathstats b{display:block;font-size:20px;color:var(--parch);font-variant-numeric:tabular-nums;line-height:1.1}
#deathstats span{font-size:8.5px;letter-spacing:1.5px;color:#7e94a2}

#respawnBtn{margin-top:2px;width:100%;padding:13px 26px;border:0;border-radius:12px;cursor:pointer;
  font-weight:700;font-size:15px;letter-spacing:.5px;color:#26160a;font-family:inherit;
  background:linear-gradient(180deg,var(--brass2),var(--brass));box-shadow:0 5px 0 #8a6220}
#respawnBtn:active{transform:translateY(3px);box-shadow:0 2px 0 #8a6220}
#respawnNote{font-size:11px;color:#8fa5b3}
#respawnNote b{color:var(--brass2)}

#discon{position:fixed;inset:0;display:grid;place-items:center;background:rgba(3,10,16,.8);z-index:60;
  font-size:17px;color:#cfe2ee}

@media(max-width:820px){
  #leaderboard{width:150px}
  #killfeed{width:170px;top:300px}
  #upgrades{width:160px;font-size:10px}
  #minimap{width:130px;height:130px}
}

/* ---------------------------------------------------------- gorüntü ayarlari */
#gfx{position:relative;pointer-events:auto}
#gfxBtn{width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.1);
  background:rgba(6,18,26,.6);color:#9fb6c4;font-size:15px;cursor:pointer}
#gfxBtn:hover{color:#f4d07a;border-color:rgba(217,164,65,.5)}
#gfxPanel{position:absolute;left:0;top:36px;width:206px;padding:12px;border-radius:12px;z-index:5;
  background:rgba(6,18,26,.94);border:1px solid rgba(255,255,255,.12)}
#gfxPanel h4{font-size:9px;letter-spacing:2.5px;color:var(--brass);margin-bottom:9px}
#gfxPanel label{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:11px;color:#9fb6c4;margin-bottom:7px}
#gfxPanel select{background:rgba(0,0,0,.4);color:#dbe9f2;border:1px solid rgba(255,255,255,.12);
  border-radius:6px;padding:3px 5px;font-size:11px;font-family:inherit;outline:none}
#fpsRead{font-size:10px;color:#7e94a2;letter-spacing:1px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.08);padding-top:7px}
.gfxnote{font-size:10px;color:#6d8492;line-height:1.5;margin-top:6px}
.gfxnote b{color:#9fb6c4}

#ecoBtn{width:100%;margin-top:4px;padding:6px;border-radius:7px;border:1px solid rgba(217,164,65,.4);
  background:rgba(217,164,65,.14);color:#f4d07a;font-family:inherit;font-size:11px;cursor:pointer}
#ecoBtn:hover{background:rgba(217,164,65,.26)}

#autofire{align-self:flex-start;margin-top:2px;font-size:9px;letter-spacing:1px;color:#5f7788;border:1px solid rgba(255,255,255,.08);
  border-radius:5px;padding:2px 5px;text-align:center}
#autofire.on{color:#0f1b12;background:linear-gradient(180deg,#7de3a4,#38a86c);border-color:transparent;font-weight:600}

#hitflash{position:fixed;inset:0;pointer-events:none;z-index:22;opacity:0;transition:opacity .08s linear;
  background:radial-gradient(ellipse at center,rgba(220,40,30,0) 45%,rgba(200,30,22,.85) 100%)}
#mutebtn{width:30px;height:30px;border-radius:9px;align-self:flex-start;
  border:1px solid rgba(255,255,255,.1);background:rgba(6,18,26,.9);color:#9fb6c4;font-size:13px;cursor:pointer}
#mutebtn:hover{border-color:rgba(217,164,65,.5)}

#statusbadge{position:absolute;left:50%;top:22px;transform:translateX(-50%);font-size:12px;
  letter-spacing:2px;font-weight:700;color:#2a1403;border-radius:7px;padding:5px 14px;
  background:linear-gradient(180deg,#ffc463,#f08c2a);box-shadow:0 4px 14px rgba(240,140,42,.35);
  animation:agpulse 1.1s ease-in-out infinite}
@keyframes agpulse{0%,100%{opacity:.85}50%{opacity:1}}

/* ---------------------------------------------------------- yukseltme sirasi */
#upgrades .q{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  border-radius:50%;display:none;place-items:center;font-size:9px;font-weight:800;
  color:#2a1403;background:linear-gradient(180deg,#ffd98a,#e8a93c)}
#upgrades button.queued .q{display:grid}
#upgrades button.queued{box-shadow:0 0 0 1px rgba(255,201,90,.7) inset}
#upgrades.picking button{border-color:rgba(255,201,90,.55)}
#upgrades .uhdr.picking{color:#ffd166}

/* ---------------------------------------------------------- gemi agaci */
#shiptree{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;background:rgba(3,10,16,.88);z-index:27;pointer-events:none}
#shiptree h2{font-family:'Pirata One',serif;font-size:30px;color:var(--brass2);letter-spacing:1px}
#treeCols{display:flex;gap:26px;align-items:flex-start}
.tree-col{display:flex;flex-direction:column;gap:8px;align-items:center}
.tree-col h4{font-size:10px;letter-spacing:2.5px;color:#7e94a2}
.tree-card{width:132px;padding:6px 6px 8px;border-radius:10px;text-align:center;
  background:linear-gradient(180deg,rgba(20,40,54,.92),rgba(8,20,29,.94));
  border:1px solid rgba(255,255,255,.08)}
.tree-card.cur{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),0 10px 24px rgba(0,0,0,.5)}
.tree-card canvas{width:118px;height:70px;display:block;margin:0 auto 2px}
.tree-card b{display:block;font-family:'Pirata One',serif;font-size:14px;color:var(--brass2)}
.tree-card span{display:block;font-size:9.5px;color:#8fa5b3;line-height:1.35;margin-top:2px}
.tree-hint{font-size:11px;color:#6d8492;letter-spacing:1px}

#evoClose{margin-left:12px;width:30px;height:30px;line-height:1;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.45);color:#fff;font-size:20px;
  font-family:inherit;pointer-events:auto;vertical-align:middle}
#evoClose:hover{background:rgba(255,255,255,.12)}
#evoOpen{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);pointer-events:auto;
  padding:12px 26px;border-radius:12px;border:1px solid rgba(217,164,65,.6);cursor:pointer;
  background:linear-gradient(180deg,#ffd98a,#e8a93c);color:#2a1403;
  font-family:inherit;font-size:15px;font-weight:800;letter-spacing:1.5px;z-index:25;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  animation:evopulse 1.6s ease-in-out infinite}
#evoOpen:hover{border-color:var(--brass)}

/* yukseltme paneli katlanmis hali: sadece baslik */
#upgrades .uhdr{cursor:pointer;padding:8px 12px;border-radius:9px;background:rgba(6,18,26,.88);
  border:1px solid rgba(255,255,255,.12);font-size:12px;letter-spacing:1.5px;color:#cfe2ee;
  display:flex;align-items:center;justify-content:space-between}
#upgrades .uhdr:hover{color:var(--brass2);border-color:rgba(217,164,65,.5)}
#upgrades.has-points .uhdr{color:#2a1403;border-color:transparent;
  background:linear-gradient(180deg,#ffd98a,#e8a93c);font-weight:700}
#upgrades.collapsed button{display:none}
#upgrades.collapsed .uhdr::after{content:'▸';opacity:.75;font-size:14px}
#upgrades:not(.collapsed) .uhdr::after{content:'▾';opacity:.75;font-size:14px}