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

:root{
  --bg:#04090c; --bg2:#071318; --ink:#c8fff0; --dim:#5f8a80;
  --grn:#00ffc8; --amber:#ffb454; --mag:#ff4fd8; --cyan:#38e1ff;
  --line:rgba(0,255,200,.16); --panel:rgba(4,20,24,.82);
  --scroll:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Share Tech Mono',ui-monospace,monospace; font-size:15px; line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3,.brand{font-family:'Michroma',sans-serif; letter-spacing:.06em}
h1{font-size:clamp(38px,7vw,72px); line-height:1.02; margin:.35em 0 .3em}
h1 .glow{color:var(--grn); text-shadow:0 0 18px rgba(0,255,200,.8),0 0 60px rgba(0,255,200,.35)}
.kicker{color:var(--amber); font-size:12px; letter-spacing:.22em}
.lede{max-width:46ch; color:#a9d8cc}
.dim{color:var(--dim); font-size:.7em}
.scanlines{position:fixed; inset:0; z-index:50; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px); mix-blend-mode:multiply}
.grid-bg{position:fixed; inset:-20%; z-index:-1; pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  transform:translateY(calc(var(--scroll)*60px)) rotate(.2deg);
}
.topbar{position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:10px 16px; background:rgba(3,10,13,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(8px)}
.brand{font-size:15px} .brand em{color:var(--grn); font-style:normal}
.brand .sig{color:var(--mag)}
.top-meta{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--line); border-radius:99px; padding:3px 12px; font-size:12px; color:var(--ink); background:rgba(0,255,200,.05)}
.chip.amber{border-color:rgba(255,180,84,.5); color:var(--amber)}
#app{max-width:1080px; margin:0 auto; padding:26px 16px 60px}
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; padding:26px 0 10px}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn{font:inherit; color:var(--ink); background:rgba(0,255,200,.06); border:1px solid var(--line);
  border-radius:8px; padding:9px 14px; cursor:pointer; transition:.18s}
.btn:hover{border-color:var(--grn); box-shadow:0 0 14px rgba(0,255,200,.35); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#00ffc8,#00b48f); color:#022019; font-weight:bold; border:none}
.btn.small{padding:5px 10px; font-size:12px} .btn.ghost{opacity:.7}
.btn.mode.active{border-color:var(--amber); color:var(--amber); box-shadow:0 0 12px rgba(255,180,84,.3)}
.seedbox{border:1px dashed rgba(0,255,200,.35); border-radius:8px; padding:7px 10px; font-size:12px; display:flex; gap:8px; align-items:center}
.seedbox input{background:transparent; border:none; outline:none; color:var(--grn); font:inherit; width:90px; letter-spacing:.2em; text-transform:uppercase}
.modes{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.hint{color:var(--dim); font-size:13px; min-height:2.4em}
.hero-right{display:flex; flex-direction:column; gap:12px}
.compass-shell{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px;
  display:flex; gap:14px; align-items:center; box-shadow:inset 0 0 40px rgba(0,255,200,.05)}
.compass-cap{font-size:12px; color:var(--dim)} .compass-cap b{color:var(--grn); display:block; font-size:17px}
#compass{width:150px; height:150px; flex:none}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.stat label{font-size:10px; color:var(--dim); letter-spacing:.18em; display:block}
.stat b{font-size:20px; color:var(--grn)}
.tidebar{position:relative; height:30px; border:1px solid var(--line); border-radius:99px; overflow:hidden; background:#03181d}
#tideFill{position:absolute; inset:0; width:50%; background:linear-gradient(90deg,rgba(0,255,200,.15),rgba(56,225,255,.55),rgba(255,79,216,.5))}
#tideLabel{position:absolute; inset:0; display:grid; place-items:center; font-size:11px; letter-spacing:.2em; color:#eafffa; text-shadow:0 1px 4px #000}
.board-wrap{margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.board-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap}
#statusLine{color:var(--amber); font-size:13px}
.board-head-r{display:flex; gap:8px}
#map{display:block; width:100%; height:auto; cursor:crosshair; background:radial-gradient(1200px 500px at 50% 0%,#0a2b33 0%,#04090c 60%)}
.pad{display:grid; grid-template-columns:repeat(3,44px); gap:6px; justify-content:center; padding:12px 0 4px}
.pad button{font:inherit; background:#06232b; color:var(--grn); border:1px solid var(--line); border-radius:8px; padding:8px; cursor:pointer}
.pad button:hover{border-color:var(--grn)} .pad .hold{color:var(--dim)}
.board-foot{padding:0 16px 14px; color:var(--dim); font-size:12px; text-align:center}
.ledger-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; min-height:220px}
.panel h2{font-size:14px; margin:0 0 10px; color:var(--grn)}
#ledger{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; max-height:300px; overflow:auto}
#ledger li{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; display:flex; justify-content:space-between; gap:8px}
#ledger li .pay{color:var(--amber)} #ledger .empty{opacity:.6}
#log{display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; font-size:13px}
#log div{border-left:2px solid var(--grn); padding-left:8px; color:#a9d8cc}
#log div.tide{border-color:var(--mag)} #log div.gold{border-color:var(--amber); color:#ffe1ae}
.scroll-lore{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:34px 0}
.lore{border:1px solid var(--line); border-radius:14px; padding:18px; background:linear-gradient(180deg,rgba(0,255,200,.05),transparent)}
.lore h3{font-size:12px; color:var(--amber); margin:0 0 8px} .lore p{color:#a9d8cc; font-size:13px; margin:0}
footer{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--dim); font-size:12px; border-top:1px solid var(--line); padding-top:16px}
#winBanner{color:var(--mag)}
#toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); opacity:0; transition:.25s;
  background:#02181d; border:1px solid var(--grn); color:var(--ink); border-radius:10px; padding:10px 16px; z-index:60; font-size:13px}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s,transform .6s}
.reveal.in{opacity:1; transform:none}
@media (max-width:860px){
  .hero{grid-template-columns:1fr} .ledger-grid{grid-template-columns:1fr} .scroll-lore{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)} #compass{width:120px;height:120px}
}
@media (max-width:375px){ body{font-size:14px} #app{padding:16px 10px 40px} }