/* The arcade front page. It borrows the games' chrome from styles.css and adds
   only what a hub needs: a pilot bar, cabinet cards, and the auth dialog.

   The games each own one accent -- CYBERBIRD cyan, CYBERSURF violet. The hub
   owns neither, so it holds both at once and lets each cabinet carry its own
   colour. That is the whole visual idea: this page is the room, not a game. */

body.hub { padding-top: 14px; }
body.hub #app { max-width: 1080px; }

/* ------------------------------------------------------------- pilot bar */

.pilotbar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 4px;
  background: rgba(10, 10, 22, 0.7); backdrop-filter: blur(6px);
}
.pilotbar canvas {
  flex: none; border-radius: 3px;
  background: radial-gradient(ellipse at 50% 60%, rgba(0,255,255,0.09), transparent 70%), rgba(0,0,0,0.4);
}
.pilotbar-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pilotbar-id b {
  font-family: 'Orbitron', monospace; font-size: 13px; letter-spacing: 2px; color: var(--cyan);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pilotbar-id span { font-size: 11px; color: var(--dim); letter-spacing: 1px; }
.pilotbar-id span.signed { color: #00ff9d; }

.hub-brand { margin-bottom: 22px; }
.hub-brand h1 {
  /* Both games' accents meet in the wordmark, which is the only place on the
     site where they are allowed to sit on top of each other. */
  text-shadow: 0 0 20px rgba(0,255,255,0.65), 0 0 46px rgba(188,19,254,0.45);
}
.hub-brand p { color: var(--violet); }

/* ---------------------------------------------------------------- games */

.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.cabinet {
  display: flex; flex-direction: column;
  border: 1px solid var(--edge, var(--line)); border-radius: 4px; overflow: hidden;
  background: rgba(0, 0, 0, 0.36);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cabinet:hover, .cabinet:focus-within {
  border-color: var(--accent); box-shadow: 0 0 26px -6px var(--accent);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .cabinet, .cabinet:hover { transition: none; transform: none; } }

.cabinet canvas { display: block; width: 100%; height: 132px; background: #04040c; }
.cabinet-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.cabinet h3 {
  font-family: 'Orbitron', monospace; font-size: 17px; font-weight: 900; letter-spacing: 4px;
  color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.cabinet p { font-size: 14px; color: #b9d9e6; margin: 0; }
.cabinet .live {
  font-family: 'Orbitron', monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim);
  display: flex; align-items: center; gap: 7px;
}
.cabinet .live i {
  width: 7px; height: 7px; border-radius: 50%; background: #2a3038; display: inline-block;
}
.cabinet .live.hot i { background: #00ff9d; box-shadow: 0 0 8px #00ff9d; }
/* An anchor, because it navigates -- but it has a button's job on this page,
   so it has to have a button's shape. */
.cabinet .play {
  margin-top: 4px; align-self: stretch;
  display: block; text-align: center; text-decoration: none;
  font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 11px 20px; border-radius: 3px;
  border: 1px solid var(--accent); color: var(--accent);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cabinet .play:hover, .cabinet .play:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 18px -4px var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------ join + list */

.joinrow #joinCode {
  font-size: 20px; font-weight: 900; letter-spacing: 8px; text-align: center; text-transform: uppercase;
}
.boards .row.split { align-items: flex-start; margin-bottom: 9px; }
.boards h3 { margin-bottom: 0; }
.boards .seg { padding: 4px 8px; font-size: 9px; }
.gtag.hard { color: var(--amber); }
.lobby-card .gtag {
  font-family: 'Orbitron', monospace; font-size: 9px; letter-spacing: 1px;
  padding: 3px 7px; border-radius: 2px; border: 1px solid currentColor; flex: none;
}

/* ----------------------------------------------------------------- chat */

#chatLog {
  display: flex; flex-direction: column; gap: 7px;
  height: 262px; overflow-y: auto; overscroll-behavior: contain;
  padding: 11px 13px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 3px; background: rgba(0, 0, 0, 0.32);
}
.cmsg { display: flex; gap: 9px; align-items: baseline; font-size: 14px; line-height: 1.35; }
.cmsg .cswatch {
  width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.cmsg .cname {
  font-family: 'Orbitron', monospace; font-size: 10px; letter-spacing: 1px;
  flex: none; max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Only an account can wear this, and only the server can grant it. */
.cmsg .cmark { flex: none; font-size: 9px; color: #00ff9d; }
.cmsg .ctext { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #cfeaf5; }
.cmsg.mine .ctext { color: #fff; }
.cmsg.sys .ctext { color: var(--dim); font-style: italic; }

/* -------------------------------------------------------------- records */

.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.boards h3 {
  font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 3px;
  color: var(--accent);
}

.hub-foot {
  margin-top: 20px; text-align: center;
  font-size: 12px; letter-spacing: 1px; color: var(--dim);
}

/* ----------------------------------------------------------------- auth */

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(3, 3, 10, 0.78); backdrop-filter: blur(5px);
}
.modal[hidden] { display: none; }
.modal-card {
  width: 100%; max-width: 420px; max-height: 92dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 13px;
  padding: 22px; border-radius: 4px;
  border: 1px solid rgba(0,255,255,0.3); background: rgba(8, 9, 20, 0.97);
  box-shadow: 0 0 60px rgba(0,255,255,0.12);
}
.modal-card form { display: flex; flex-direction: column; gap: 12px; }
.modal-card h2 { font-size: 14px; letter-spacing: 3px; color: var(--red); text-transform: uppercase; }
.modal-card .idrow label { width: 84px; }

input[type="password"] {
  background: rgba(0,0,0,0.5); border: 1px solid var(--line); color: var(--cyan);
  padding: 11px 13px; font-family: 'Orbitron', monospace; font-size: 13px; letter-spacing: 2px;
  border-radius: 3px; outline: none; width: 100%; flex: 1 1 150px;
}
input[type="password"]:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,255,255,0.25); }

.reckey {
  font-family: 'Orbitron', monospace; font-size: clamp(13px, 4.2vw, 19px); font-weight: 700;
  letter-spacing: 2px; text-align: center; color: var(--yellow);
  padding: 14px 10px; border: 1px dashed var(--yellow); border-radius: 3px;
  background: rgba(252, 238, 9, 0.06); word-break: break-all;
  user-select: all;
}

/* ------------------------------------------------------------- kit tabs

   One row per cabinet, because a pilot now keeps a craft in each. The tab wears
   its cabinet's accent when it is the one being edited, so the panel's colour
   tells you which game you are dressing without reading the label. */

.kit-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 14px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.kit-tab {
  flex: 1 1 auto;
  padding: 9px 12px; font-size: 10px; letter-spacing: 2px;
  border-color: rgba(0,255,255,0.22); color: var(--dim);
  background: rgba(0,0,0,0.3);
}
.kit-tab:hover:not(.on) { color: #d8f7ff; border-color: rgba(0,255,255,0.5); background: rgba(0,255,255,0.07); }
.kit-tab.on {
  color: var(--kit-accent, var(--cyan));
  border-color: var(--kit-accent, var(--cyan));
  background: color-mix(in srgb, var(--kit-accent, #00ffff) 14%, transparent);
  box-shadow: 0 0 16px -4px var(--kit-accent, var(--cyan));
}
/* The preview picks up the same accent, so switching tabs reads as switching
   rooms rather than as switching a form field. */
#kitPanel #skinPreview {
  border-color: color-mix(in srgb, var(--kit-accent, #00ffff) 45%, transparent);
  background:
    radial-gradient(ellipse at 50% 60%,
      color-mix(in srgb, var(--kit-accent, #00ffff) 12%, transparent), transparent 70%),
    rgba(0,0,0,0.45);
}

@media (max-width: 820px) {
  body.hub { padding-top: 10px; }
  .kit-tab { flex: 1 1 100%; }
  .pilotbar { flex-wrap: wrap; gap: 9px; padding: 9px 11px; }
  .pilotbar .row { width: 100%; }
  .pilotbar .row button { flex: 1; }
  .cabinet canvas { height: 112px; }
  #chatLog { height: 220px; }
  #chatInput { font-size: 16px; }
  input[type="password"] { font-size: 16px; }
  .modal-card .idrow label { width: auto; }
}