:root {
   --bg-1: #f5eddc;
   --bg-2: #cfe0ff;
   --ink: #0b1d3a;
   --ink-soft: rgba(11, 29, 58, 0.7);
   --panel: rgba(255, 255, 255, 0.88);
   --panel-edge: rgba(11, 29, 58, 0.12);
   --accent: #ffb347;
   --accent-2: #2ec4b6;
   --danger: #ff6b6b;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   font-family: "Space Grotesk", "Segoe UI", sans-serif;
   color: var(--ink);
   background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
   min-height: 100vh;
   overflow: hidden;
}

body::before {
   content: "";
   position: fixed;
   inset: -20% -10% -30% -10%;
   background:
      radial-gradient(
         circle at 10% 20%,
         rgba(255, 179, 71, 0.35),
         transparent 55%
      ),
      radial-gradient(
         circle at 80% 10%,
         rgba(46, 196, 182, 0.35),
         transparent 50%
      ),
      radial-gradient(
         circle at 30% 80%,
         rgba(11, 29, 58, 0.08),
         transparent 45%
      );
   animation: drift 18s ease-in-out infinite;
   pointer-events: none;
   z-index: 0;
}

@keyframes drift {
   0% {
      transform: translate3d(0, 0, 0) scale(1);
   }
   50% {
      transform: translate3d(2%, -2%, 0) scale(1.02);
   }
   100% {
      transform: translate3d(0, 0, 0) scale(1);
   }
}

#game {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block;
   z-index: 1;
}

#hud {
   position: fixed;
   inset: 0;
   padding: 16px 18px 14px;
   display: grid;
   grid-template-columns: 1fr 320px;
   grid-template-rows: auto 1fr auto;
   grid-template-areas:
      "top top"
      "main side"
      "foot foot";
   gap: 12px;
   pointer-events: none;
   z-index: 3;
   transition: opacity 0.3s ease;
}

#hud.hidden {
   opacity: 0;
   pointer-events: none;
}

.panel {
   background: var(--panel);
   border: 1px solid var(--panel-edge);
   border-radius: 16px;
   padding: 12px 14px;
   box-shadow: 0 18px 40px rgba(11, 29, 58, 0.08);
   backdrop-filter: blur(12px);
}

#topbar {
   grid-area: top;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   pointer-events: auto;
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   font-size: 1.1rem;
}

.brand .logo {
   width: 36px;
   height: 36px;
   border-radius: 12px;
   background: linear-gradient(135deg, var(--accent), var(--accent-2));
   display: grid;
   place-items: center;
   color: #0b1d3a;
   font-family: "DM Mono", monospace;
   font-weight: 500;
}

.top-meta {
   display: flex;
   align-items: center;
   gap: 16px;
   color: var(--ink-soft);
   font-size: 0.95rem;
}

.top-meta span {
   font-family: "DM Mono", monospace;
   color: var(--ink);
}

#sidebar {
   grid-area: side;
   display: flex;
   flex-direction: column;
   gap: 12px;
   pointer-events: auto;
}

.panel-title {
   font-weight: 600;
   margin-bottom: 8px;
   display: flex;
   justify-content: space-between;
   font-size: 0.95rem;
}

#players-list {
   display: grid;
   gap: 6px;
   max-height: 240px;
   overflow: hidden;
}

.player-row {
   display: grid;
   grid-template-columns: 22px 1fr auto;
   align-items: center;
   gap: 8px;
   padding: 6px 8px;
   border-radius: 10px;
   background: rgba(11, 29, 58, 0.05);
   font-size: 0.9rem;
}

.player-row.local {
   background: rgba(255, 179, 71, 0.25);
}

.shape-badge {
   width: 20px;
   height: 20px;
   border-radius: 6px;
   display: grid;
   place-items: center;
   font-family: "DM Mono", monospace;
   font-size: 0.75rem;
   color: #0b1d3a;
}

.shape-badge.circle {
   border-radius: 999px;
}

.shape-badge.triangle {
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.player-hp {
   font-family: "DM Mono", monospace;
   font-size: 0.85rem;
}

.control-row {
   display: flex;
   justify-content: space-between;
   font-size: 0.9rem;
   color: var(--ink-soft);
}

.actions {
   display: grid;
   gap: 8px;
}

button {
   border: none;
   border-radius: 10px;
   padding: 10px 12px;
   font-weight: 600;
   background: var(--ink);
   color: #fff;
   cursor: pointer;
   transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
}

button:hover {
   transform: translateY(-1px);
   box-shadow: 0 8px 20px rgba(11, 29, 58, 0.25);
}

button.secondary {
   background: transparent;
   color: var(--ink);
   border: 1px solid var(--panel-edge);
}

#footer {
   grid-area: foot;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   font-size: 0.85rem;
   color: var(--ink-soft);
   pointer-events: auto;
}

#overlay {
   position: fixed;
   inset: 0;
   display: grid;
   place-items: center;
   background: rgba(245, 237, 220, 0.6);
   backdrop-filter: blur(6px);
   z-index: 4;
   transition: opacity 0.3s ease;
}

#overlay.hidden {
   opacity: 0;
   pointer-events: none;
}

.card {
   width: min(420px, 90vw);
   background: #fff;
   border-radius: 20px;
   padding: 24px;
   box-shadow: 0 25px 60px rgba(11, 29, 58, 0.2);
   border: 1px solid rgba(11, 29, 58, 0.08);
   animation: rise 0.5s ease;
}

@keyframes rise {
   from {
      opacity: 0;
      transform: translateY(20px) scale(0.98);
   }
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

.title {
   font-size: 1.8rem;
   font-weight: 600;
   margin-bottom: 6px;
}

.subtitle {
   margin: 0 0 18px;
   color: var(--ink-soft);
   font-size: 0.95rem;
}

form {
   display: grid;
   gap: 12px;
}

label {
   display: grid;
   gap: 6px;
   font-size: 0.9rem;
   color: var(--ink-soft);
}

input,
select {
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--panel-edge);
   font-family: "Space Grotesk", sans-serif;
   font-size: 1rem;
}

.hint {
   margin-top: 12px;
   font-size: 0.85rem;
   color: var(--ink-soft);
}

/* --- Dash gauge (center bottom) --- */
#dash-hud {
   position: fixed;
   left: 50%;
   bottom: 18px;
   transform: translateX(-50%);
   z-index: 6;
   pointer-events: none;
   display: grid;
   gap: 6px;
   width: min(640px, 92vw);
}

#dash-bar {
   height: 22px;
   border-radius: 999px;
   background: rgba(11, 29, 58, 0.18);
   border: 1px solid rgba(11, 29, 58, 0.18);
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(11, 29, 58, 0.12);
}

#dash-fill {
   height: 100%;
   width: 100%;
   background: linear-gradient(90deg, var(--accent), var(--accent-2));
   transform-origin: left center;
   transform: scaleX(1);
   transition: transform 0.06s linear;
}

#dash-label {
   text-align: center;
   font-family: "DM Mono", monospace;
   font-size: 0.78rem;
   letter-spacing: 0.18em;
   color: rgba(11, 29, 58, 0.65);
}

@media (max-width: 900px) {
   #hud {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr auto auto;
      grid-template-areas:
         "top"
         "main"
         "side"
         "foot";
   }

   #sidebar {
      flex-direction: row;
      flex-wrap: wrap;
   }

   #sidebar .panel {
      flex: 1 1 240px;
   }

   #footer {
      flex-direction: column;
      align-items: flex-start;
   }
}