:root{
  color-scheme:dark;
  --accent:#3ee8c4;
  --gold:#ffd700;
  --panel:rgba(4,18,32,0.82);
  --text:#e8f4ff;
  --muted:#6b92b0;
  --border:1px solid rgba(255,255,255,0.07);
  --shadow:0 12px 40px rgba(0,0,0,0.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#020e1a;color:var(--text);font-family:Inter,system-ui,sans-serif}
button{font:inherit;cursor:pointer}
.app{position:fixed;inset:0;overflow:hidden;background:#020e1a}
#tank{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* --- HUD --- */
.hud{position:absolute;z-index:3;pointer-events:none}
.hud button{pointer-events:auto}
.top-bar{
  top:max(8px,env(safe-area-inset-top));left:0;right:0;
  display:flex;justify-content:center;gap:6px;padding:0 8px;
}
.metric{
  min-width:62px;padding:6px 10px;border-radius:12px;border:var(--border);
  background:var(--panel);backdrop-filter:blur(12px);text-align:center;
}
.metric span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.metric strong{display:block;margin-top:1px;font-size:16px;line-height:1}
.coin-metric strong{color:var(--gold)}

/* water quality strip */
.wq-strip{
  top:calc(max(8px,env(safe-area-inset-top)) + 52px);left:0;right:0;
  display:flex;justify-content:center;gap:8px;padding:0 8px;
}
.wq{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--muted)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%}
.temp-dot{background:#3b82f6}.ph-dot{background:#22c55e}.o2-dot{background:#22d3ee}.nh3-dot{background:#22c55e}

/* toast */
.toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:25;
  padding:8px 18px;border-radius:14px;background:rgba(255,215,0,0.15);border:1px solid rgba(255,215,0,0.3);
  color:var(--gold);font-weight:700;font-size:16px;pointer-events:none;
  opacity:0;transition:opacity .3s,transform .3s;
}
.toast.show{opacity:1;transform:translate(-50%,-60%)}

/* dock */
.dock{
  bottom:max(6px,env(safe-area-inset-bottom));left:0;right:0;
  display:flex;justify-content:center;gap:4px;padding:0 6px;
}
.dbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;border:var(--border);
  background:rgba(255,255,255,0.05);padding:4px 2px;
  transition:background .15s,transform .1s;
}
.dbtn:active{transform:scale(.92)}
.dbtn i{font-style:normal;font-size:18px;line-height:1}
.dbtn small{font-size:8px;color:var(--muted);margin-top:1px}
.dbtn.accent{background:rgba(62,232,196,0.12);border-color:rgba(62,232,196,0.25)}
.dbtn.accent small{color:var(--accent)}
.dbtn.spd i{font-size:14px}
.dbtn.spd small{color:var(--accent)}

/* tooltip */
.tooltip{
  position:fixed;z-index:20;pointer-events:none;display:none;
  padding:10px 14px;border-radius:14px;border:var(--border);
  background:var(--panel);backdrop-filter:blur(14px);box-shadow:var(--shadow);
  font-size:11px;line-height:1.5;max-width:200px;color:var(--text);
}

/* overlays */
.overlay{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(2,14,26,0.82);backdrop-filter:blur(14px);
}
.card{
  width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow-y:auto;
  padding:24px 20px;border-radius:22px;border:var(--border);
  background:var(--panel);box-shadow:var(--shadow);text-align:center;
}
.card h1{font-size:24px;margin:8px 0 4px}
.card h2{font-size:18px;margin:0 0 10px}
.card .eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin:0}
.card .subtitle{font-size:11px;color:var(--muted);margin:0 0 14px;line-height:1.4}
.feature-list{text-align:left;padding:0 0 0 16px;margin:0 0 16px;font-size:11px;color:var(--muted);line-height:1.7}
.primary{
  display:block;width:100%;padding:12px 0;border:none;border-radius:14px;
  background:var(--accent);color:#020e1a;font-weight:700;font-size:14px;
}
.ghost{
  display:block;width:100%;padding:9px 0;border:var(--border);border-radius:12px;
  background:transparent;color:var(--text);font-size:12px;margin-top:8px;
}

/* shop */
.shop-card{padding:20px 16px}
.shop-tabs{display:flex;gap:4px;margin-bottom:10px}
.tab{
  flex:1;padding:8px 0;border:var(--border);border-radius:10px;
  background:transparent;color:var(--muted);font-size:12px;
}
.tab.active{background:rgba(255,255,255,0.08);color:var(--text)}
.shop-coins{font-size:12px;color:var(--gold);margin-bottom:10px}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.shop-item{
  padding:10px 8px;border-radius:14px;border:var(--border);background:rgba(255,255,255,0.03);
  text-align:center;cursor:pointer;transition:background .15s;
}
.shop-item:hover{background:rgba(255,255,255,0.08)}
.shop-item .si-icon{font-size:26px;display:block}
.shop-item .si-name{font-size:10px;color:var(--text);margin-top:3px;display:block}
.shop-item .si-price{font-size:11px;color:var(--gold);font-weight:700;margin-top:2px;display:block}
.shop-item .si-desc{font-size:9px;color:var(--muted);margin-top:2px;display:block}
.shop-item.disabled{opacity:.4;pointer-events:none}

/* sell list */
.sell-list{max-height:200px;overflow-y:auto;margin-bottom:10px}
.sell-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-radius:10px;border:var(--border);margin-bottom:4px;
  background:rgba(255,255,255,0.03);
}
.sell-row .sr-info{text-align:left;font-size:11px}
.sell-row .sr-info b{color:var(--text)}
.sell-row .sr-info span{color:var(--muted);font-size:10px}
.sell-btn{
  padding:5px 12px;border:none;border-radius:8px;background:rgba(255,215,0,0.15);
  color:var(--gold);font-size:11px;font-weight:700;cursor:pointer;
}

.status{
  position:fixed;bottom:max(2px,env(safe-area-inset-bottom));right:6px;z-index:3;
  font-size:9px;color:var(--muted);opacity:.3;pointer-events:none;
}

@media(max-width:380px){
  .metric{min-width:54px;padding:5px 7px}
  .metric strong{font-size:14px}
  .dbtn{width:46px;height:46px}
  .dbtn i{font-size:16px}
}