* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1620; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #eee; }
canvas#scene { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }

.hidden { display: none !important; }

#start-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(20,28,20,0.55), rgba(6,10,8,0.88));
  z-index: 20;
}
.start-card {
  width: min(440px, 90vw);
  background: rgba(20, 16, 12, 0.92);
  border: 1px solid rgba(255, 214, 150, 0.25);
  border-radius: 14px;
  padding: 28px 30px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.start-card h1 { margin: 0 0 10px; font-size: 1.5rem; color: #ffd6a0; letter-spacing: 0.02em; }
.start-card p { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.5; color: #d9cfc2; }
.start-card label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #b7ab98; margin-bottom: 6px; }
.start-card input {
  width: 100%; padding: 10px 12px; margin-bottom: 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #fff; font-size: 1rem;
}
.start-card input:focus { outline: 2px solid #ffb86b; }
.start-card button {
  width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
  background: linear-gradient(180deg, #ffcf87, #f2a94b); color: #2a1a05; cursor: pointer;
}
.start-card button:hover { filter: brightness(1.06); }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel {
  position: absolute; top: 16px; left: 16px; width: min(280px, 60vw);
  background: rgba(12, 16, 12, 0.72); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; backdrop-filter: blur(4px);
}
.swatch { width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px; box-shadow: 0 0 8px rgba(0,0,0,0.4) inset; }
.swatch.small { width: 12px; height: 12px; margin-top: 4px; }
.panel-body { flex: 1; min-width: 0; }
.panel-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-title.small { font-size: 0.82rem; }
.bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; margin-bottom: 4px; }
.bar.small { height: 5px; }
.bar-fill { height: 100%; transition: width 0.25s ease; }
.panel-stats { font-size: 0.76rem; color: #cfd6c9; }
.panel-stats.small { font-size: 0.7rem; color: #b9c2b4; }
.fallen { margin-top: 4px; font-size: 0.76rem; color: #ff9d8a; font-weight: 600; }

.rivals { position: absolute; top: 16px; right: 16px; width: min(230px, 55vw); display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: hidden; }
.rival-row {
  background: rgba(12, 16, 12, 0.65); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  padding: 7px 9px; display: flex; gap: 8px; align-items: flex-start;
}
.rival-empty { font-size: 0.76rem; color: #97a091; padding: 6px 2px; }

.conn-status { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(30,20,10,0.8); border: 1px solid rgba(255,180,100,0.3); border-radius: 8px; padding: 6px 14px; font-size: 0.8rem; color: #ffd6a0; }

#hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: #cfd6c9; background: rgba(0,0,0,0.35); padding: 6px 14px; border-radius: 20px; white-space: nowrap; }

#banner {
  position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); z-index: 15;
  padding: 18px 30px; border-radius: 12px; font-size: 1.2rem; font-weight: 700; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); pointer-events: none;
}
#banner.defeat { background: rgba(60, 14, 14, 0.92); color: #ffb3a3; border: 1px solid rgba(255,120,100,0.4); }
#banner.victory { background: rgba(20, 60, 24, 0.92); color: #b6ffc4; border: 1px solid rgba(120,255,150,0.4); }

@media (max-width: 640px) {
  .rivals { max-width: 45vw; }
  .panel { width: 55vw; }
}