@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&display=swap');

/* palette: 3 neon hues + black/white only.
   --cy #00F0FF (you) · --mg #FF2E88 (vanta) · --gd #FFC857 (ports/score) */
:root{
  --cy:#00F0FF; --mg:#FF2E88; --gd:#FFC857;
  --bg:#05060F; --bg2:#0A0D1D; --ink:#F2F5FF; --dim:#8B93B4;
  --line:rgba(0,240,255,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Share Tech Mono',ui-monospace,monospace;
  min-height:100vh; overflow-x:hidden;
  background-image:
    radial-gradient(900px 320px at 15% -5%, rgba(0,240,255,.10), transparent 60%),
    radial-gradient(800px 300px at 90% 0%, rgba(255,46,136,.10), transparent 60%),
    linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);}
#app{max-width:760px;margin:0 auto;padding:20px 14px 48px}
.hud-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}
.beacon{
  width:52px;height:52px;flex:0 0 52px;cursor:pointer;
  background:#000;border:2px solid var(--cy);color:var(--cy);
  font-size:26px;border-radius:12px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  text-shadow:0 0 12px var(--cy);box-shadow:0 0 18px rgba(0,240,255,.45), inset 0 0 12px rgba(0,240,255,.25);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 34px rgba(0,240,255,.8), inset 0 0 18px rgba(0,240,255,.4)}}
h1{font-family:Orbitron,sans-serif;font-size:clamp(20px,5.4vw,32px);margin:0;letter-spacing:.06em;
  text-shadow:0 0 18px rgba(0,240,255,.55);}
h1 span{color:var(--mg);text-shadow:0 0 18px rgba(255,46,136,.6)}
.sub{margin:2px 0 0;color:var(--dim);font-size:12px}
.tidebox{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:rgba(0,240,255,.05);
  font-size:12px;box-shadow:inset 0 0 24px rgba(0,240,255,.06)}
.tidebox code{color:var(--gd)}
.tide-count b{color:var(--cy);font-size:15px;text-shadow:0 0 10px var(--cy)}

.hud-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.stat{border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center;background:var(--bg2)}
.stat label{font-family:Orbitron;font-size:10px;letter-spacing:.12em;color:var(--dim)}
.stat b{display:block;font-family:Orbitron;font-size:22px}
.stat small{color:var(--dim);font-size:11px}
.you b{color:var(--cy);text-shadow:0 0 12px var(--cy)}
.foe b{color:var(--mg);text-shadow:0 0 12px var(--mg)}
.score b{color:var(--gd);text-shadow:0 0 12px var(--gd)}
.energy b{color:#fff}

.toolbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.modes{display:flex;gap:8px}
button{font-family:Orbitron,sans-serif;font-size:12px;letter-spacing:.08em;cursor:pointer;
  background:#000;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
button:hover:not(:disabled){border-color:var(--cy);box-shadow:0 0 14px rgba(0,240,255,.35)}
button:disabled{opacity:.35;cursor:not-allowed}
.modes button.on{border-color:var(--cy);color:var(--cy);box-shadow:0 0 14px rgba(0,240,255,.4)}
#finishRoute{border-color:var(--gd);color:var(--gd)}
#finishRoute:hover:not(:disabled){box-shadow:0 0 14px rgba(255,200,87,.5)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.routebar{display:flex;justify-content:space-between;gap:10px;align-items:center;
  border:1px dashed var(--gd);border-radius:8px;padding:8px 12px;margin-bottom:10px;
  color:var(--gd);font-size:12px}
.routebar.hidden{display:none}
#routeScore{font-family:Orbitron;font-size:16px}

#stage{position:relative;border:1px solid var(--line);border-radius:14px;background:radial-gradient(ellipse at 50% 40%, #0B1030 0%, #05060F 70%);
  box-shadow:0 0 40px rgba(0,240,255,.08), inset 0 0 60px rgba(0,0,0,.7);overflow:hidden}
#board{display:block;width:100%;height:auto;touch-action:manipulation}
#board polygon{cursor:pointer;transition:filter .15s, opacity .15s}
#board polygon:hover{filter:brightness(1.5)}
#board polygon.picked{filter:brightness(1.35) drop-shadow(0 0 6px currentColor)}
#board .hexval{font-family:'Share Tech Mono',monospace;pointer-events:none;fill:#fff;opacity:.85}
#board .routeline{fill:none;stroke:var(--gd);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--gd));stroke-dasharray:10 6;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}

.kraken{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:6px;
  background:rgba(5,6,15,.82);backdrop-filter:blur(2px);z-index:5;animation:kin .4s ease-out}
.kraken.hidden{display:none}
@keyframes kin{from{opacity:0;transform:scale(1.15)}}
.k-title{font-family:Orbitron;font-weight:900;font-size:clamp(22px,7vw,44px);color:var(--mg);
  text-shadow:0 0 30px var(--mg);animation:glitch 1s steps(2) infinite}
@keyframes glitch{50%{transform:translateX(3px);text-shadow:-3px 0 var(--cy),3px 0 var(--mg)}}
.k-sub{color:var(--gd)}

.legend{display:flex;gap:12px;flex-wrap:wrap;margin:12px 2px;color:var(--dim);font-size:12px}
.sw{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sw.water{background:#131A3A}.sw.sand{background:#3a3a3a}.sw.land{background:#1d5f66}
.sw.port{background:var(--gd)}.sw.you{background:var(--cy)}.sw.foe{background:var(--mg)}
.sw.reef{background:#fff}

.logwrap h2{font-family:Orbitron;font-size:12px;letter-spacing:.2em;color:var(--dim);margin:18px 0 6px}
#log{list-style:none;margin:0;padding:0;max-height:150px;overflow:auto;font-size:12px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.4)}
#log li{padding:6px 10px;border-bottom:1px solid rgba(0,240,255,.08)}
#log li b.y{color:var(--cy)} #log li b.f{color:var(--mg)} #log li b.g{color:var(--gd)}
footer{color:var(--dim);font-size:11px;margin-top:14px}
.hint{color:var(--mg)}
@media (max-width:480px){
  .hud-stats{grid-template-columns:repeat(2,1fr)}
  .toolbar{flex-direction:column}
  .actions,.modes{display:grid;grid-template-columns:1fr 1fr}
  .actions{grid-template-columns:1fr 1fr 1fr}
}