:root{
  --bg:#0f4560;
  --card:#eaf3fb;
  --ink:#0e1b25;
  --line:#b9cfdf;
  --accent:#2c84d8;
  --accent-2:#1b5fa2;

  --ship-luke:#0d3b66;   /* dunkelblau */
  --ship-luke-b:#0a2d4d;

  --ship-ab_lage:#ff9f1c;    /* orange */
  --ship-ab_lage-b:#cc7f15;

  --hit-red:#e74c3c;
  --miss-green:#2ecc71;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:#f3f7fb;color:var(--ink)}

.topbar{
  display:flex;align-items:center;gap:12px;
  background:var(--bg); color:#fff; padding:12px 16px;
  position:sticky; top:0; z-index:10;
}
.btn-primary,.btn-secondary,.btn-outline{
  border:0; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-secondary{ background:#d6e7f7; color:#0a3052; }
.btn-outline{ background:transparent;color:#fff;border:2px solid #87b7dd }
.btn-primary:hover{ filter:brightness(0.95) }
.btn-secondary:hover,.btn-outline:hover{ filter:brightness(0.97) }

.spacer{flex:1}
.userbox{display:flex;align-items:center;gap:10px;background:#0e3b54;padding:6px 10px;border-radius:999px}
.userbox img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:2px solid #173e56}
.userbox .logout{color:#fff;background:#0b2b3c;padding:6px 10px;border-radius:8px;text-decoration:none}
.userbox .logout:hover{background:#082231}

.layout{display:grid;grid-template-columns:1fr 340px;gap:20px;padding:18px}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.board-card,.fleet-card,.chat{background:var(--card);border-radius:14px;box-shadow:0 6px 18px rgba(10,44,70,.07);padding:14px}
.board-card h2{margin:6px 4px 10px;color:#1f4a69}
.hint.small{font-size:12px;color:#4b657a;margin:8px 2px}

.grid{display:grid;grid-template-columns:repeat(var(--cols,10),36px);gap:4px;padding:8px;background:#f7fbff;border-radius:12px;border:1px solid var(--line)}
.cell{width:36px;height:36px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:inset 0 0 0 1px #e9f2fa}

/* --- Schiff-Färbung nach Spieler --- */
.cell.ship{ /* Grundstil Schiff (kein X) */ }
.cell.ship.ship-luke{
  background:var(--ship-luke);
  border-color:var(--ship-luke-b);
  box-shadow:inset 0 0 0 2px var(--ship-luke-b);
}
.cell.ship.ship-ab_lage{
  background:var(--ship-ab_lage);
  border-color:var(--ship-ab_lage-b);
  box-shadow:inset 0 0 0 2px var(--ship-ab_lage-b);
}

/* --- Treffer / Fehlschuss --- */
.cell.hit{
  background:var(--hit-red);
  color:#fff; position:relative;
}
.cell.hit:after{
  content:"💣";
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:20px; line-height:1;
}
.cell.miss{
  background:var(--miss-green);
  color:#fff; position:relative;
}
.cell.miss:after{
  content:"✖";
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; font-size:20px;
}
.grid.inactive{opacity:.6; pointer-events:none}

/* Ghost-Vorschau beim Draggen */
.cell.ghost-ok{outline:3px solid rgba(40,180,90,.9); outline-offset:-2px}
.cell.ghost-bad{outline:3px solid rgba(210,47,63,.85); outline-offset:-2px}

/* Fleet/Palette */
.fleet-card h3{margin:4px}
.fleet-controls{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 10px}
.fleet{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.shipPiece{
  display:flex;gap:4px; padding:4px; border-radius:10px; background:#fff; border:1px dashed #b7c9da; cursor:grab;
}
.shipPiece.vertical{flex-direction:column}
.shipPiece .seg{
  width:32px;height:20px;border-radius:6px;background:#dbe8f5;border:1px solid #b7c9da
}
.shipPiece.dragging{opacity:.6}
.shipPiece.placed{opacity:.35; cursor:not-allowed; filter:grayscale(0.4)}

.chat h2{margin:6px 4px 10px;color:#fff}
.chat{background:#0f1a24;color:#d6e0ea}
.chatlog{height:420px;overflow:auto;background:#0b141c;border-radius:12px;padding:10px;border:1px solid #1e2a36}
.msg{margin:6px 0}
.msg .meta{font-size:12px;color:#9db0c2}
.msg.me p{background:#1f6fd1}
.msg.other p{background:#213041}
.msg p{display:inline-block;margin:4px 0 0 10px;padding:8px 10px;border-radius:10px;color:#fff}
.chatform{display:flex;gap:8px;margin-top:10px}
.chatform input{flex:1;padding:10px;border-radius:10px;border:1px solid #294055;background:#0b141c;color:#d6e0ea}

/* ---------- Sprechblase ---------- */
.bubble{
  position:fixed;
  left:360px;
  top:90px;
  z-index:1000;
  background:#fff714; color:#111; padding:12px 16px; border-radius:22px;
  border:3px solid #111; font-weight:800; box-shadow:3px 3px 0 #111;
  transform:translateY(-18px); transition:.25s;
  pointer-events:none;
}
.bubble.show{ transform:translateY(0) }

@media (max-width: 900px){
  .bubble{ left:12px; right:12px; top:80px; text-align:center; }
}

/* Login */
body.auth{display:grid;place-items:center;min-height:100vh;background:
linear-gradient(180deg,#0e4162 0,#0a2a41 100%)}
.login-card{background:#fff;border-radius:14px;padding:22px 20px; width:min(440px,92vw); box-shadow:0 20px 40px rgba(0,0,0,.25)}
.login-card h1{margin-top:0}
.login-card form{display:grid;gap:10px}
.login-card label{display:grid;gap:6px;font-weight:600}
.login-card input{padding:10px;border:1px solid #c9d8e6;border-radius:10px}
.alert{background:#ffe3e3;border:1px solid #ffbebe;color:#690b0b;padding:10px;border-radius:10px}
.hint{color:#667684;font-size:13px;margin:8px 2px}