@font-face {
      font-family: "Orbitron";
      src: url("assets/fonts/Orbitron-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Orbitron";
      src: url("assets/fonts/Orbitron-Medium.woff2") format("woff2");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Orbitron";
      src: url("assets/fonts/Orbitron-SemiBold.woff2") format("woff2");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Orbitron";
      src: url("assets/fonts/Orbitron-Bold.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Orbitron";
      src: url("assets/fonts/Orbitron-ExtraBold.woff2") format("woff2");
      font-weight: 800;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Orbitron";
      src: url("assets/fonts/Orbitron-Black.woff2") format("woff2");
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Rajdhani";
      src: url("assets/fonts/Rajdhani-Light.woff2") format("woff2");
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Rajdhani";
      src: url("assets/fonts/Rajdhani-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Rajdhani";
      src: url("assets/fonts/Rajdhani-Medium.woff2") format("woff2");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Rajdhani";
      src: url("assets/fonts/Rajdhani-SemiBold.woff2") format("woff2");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Rajdhani";
      src: url("assets/fonts/Rajdhani-Bold.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --bg0: #060812;
      --bg1: #0f1630;
      --ink: #dfe8ff;
      --cyan: #39f3ff;
      --pink: #ff3dc8;
      --gold: #ffd972;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background:
        radial-gradient(120% 80% at 50% 100%, #11183b 0%, var(--bg0) 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
      color: var(--ink);
      font-family: "Rajdhani", "Segoe UI", "Trebuchet MS", sans-serif;
      user-select: none;
    }

    #game-wrap {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      position: relative;
    }

    canvas {
      display: block;
      width: 100vw;
      height: 100vh;
      image-rendering: auto;
      background: transparent;
      cursor: default;
    }

    #select-ui {
      position: fixed;
      left: 50%;
      top: 54.2%;
      transform: translate(-50%, -50%);
      width: min(960px, calc(100vw - 24px));
      z-index: 9;
      display: none;
      grid-template-columns: minmax(230px, 1fr) minmax(132px, auto) minmax(230px, 1fr);
      gap: 12px;
      align-items: stretch;
      filter: none;
      isolation: isolate;
      border-radius: 18px;
      overflow: visible;
    }

    #select-ui.visible {
      display: grid;
    }

    #select-ui > * {
      position: relative;
      z-index: 1;
    }

    #select-ui::before,
    #select-ui::after {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
    }

    /* CRT scanline/phosphor veil over all select UI elements. */
    #select-ui::before {
      /* Disabled by request; keep vignette-only pass active. */
      content: none;
    }

    /* Curved glass/vignette highlight so UI appears behind screen glass. */
    #select-ui::after {
      /* Disabled by request for clean visual isolation. */
      content: none;
    }

    .panel {
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(205, 220, 236, 0.04) 0px,
          rgba(205, 220, 236, 0.04) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, rgba(52, 58, 74, 0.9), rgba(16, 22, 36, 0.96)),
        radial-gradient(120% 100% at 24% 0%, rgba(206, 223, 246, 0.12), transparent 58%),
        linear-gradient(90deg, rgba(255, 152, 90, 0.05), rgba(124, 208, 255, 0.04) 38%, rgba(255, 152, 90, 0.02));
      border: 1px solid rgba(134, 158, 196, 0.88);
      border-radius: 12px;
      padding: 12px 12px 11px;
      box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(180, 204, 228, 0.08) inset,
        inset 0 1px 0 rgba(214, 228, 242, 0.2),
        inset 0 -18px 24px rgba(0, 0, 0, 0.24),
        0 0 20px rgba(122, 170, 224, 0.12);
      height: auto;
      min-height: 0;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      animation: none;
    }

    #p1-panel,
    #p2-panel {
      z-index: 3;
    }

    .panel::before {
      /* Disabled to avoid corner rendering artifacts. */
      content: none;
    }

    .panel::after {
      content: none;
    }

    .panel h4 {
      margin: 0 0 11px;
      font-size: 24px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #ecf6ff;
      text-align: center;
      font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
      font-weight: 800;
      text-shadow:
        0 0 6px rgba(57, 243, 255, 0.95),
        0 0 20px rgba(57, 243, 255, 0.72),
        0 0 30px rgba(255, 61, 200, 0.52);
      animation: neonLabelFlicker 2.4s ease-in-out infinite;
    }

    .row {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .row:last-child {
      margin-bottom: 0;
    }

    .row-note-wrap {
      margin-bottom: 14px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 9px;
      padding: 8px 8px 9px;
      border-radius: 10px;
      border: 1px solid rgba(126, 150, 188, 0.74);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(188, 210, 232, 0.028) 0px,
          rgba(188, 210, 232, 0.028) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, rgba(40, 47, 62, 0.88), rgba(16, 22, 36, 0.94)),
        radial-gradient(120% 120% at 80% 0%, rgba(192, 214, 238, 0.09), transparent 58%);
      box-shadow:
        inset 0 0 16px rgba(7, 15, 35, 0.44),
        inset 0 1px 0 rgba(204, 222, 240, 0.15),
        0 5px 13px rgba(0, 0, 0, 0.22);
      min-width: 0;
    }

    .field:last-child {
      margin-bottom: 0;
    }

    .field-hero {
      padding-bottom: 12px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .class-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .difficulty-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      width: 100%;
    }

    .hero-grid button {
      width: 100%;
      padding: 9px 10px;
      font-size: 13px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .class-grid button {
      width: 100%;
      padding: 8px 7px;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .label {
      font-size: 16px;
      color: #e6f2ff;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 800;
      text-shadow:
        0 0 10px rgba(57, 243, 255, 0.4),
        0 0 20px rgba(57, 243, 255, 0.15);
    }

    .row-note {
      display: block;
      width: 100%;
      text-align: left;
      margin-top: 2px;
      font-size: 14px;
      color: #e3efff;
      letter-spacing: 0.06em;
      font-weight: 800;
      text-transform: uppercase;
      text-shadow: 0 0 12px rgba(57, 243, 255, 0.38);
      opacity: 1;
    }

    button {
      appearance: none;
      border: 1px solid rgba(98, 129, 231, 0.9);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(171, 245, 255, 0.035) 0px,
          rgba(171, 245, 255, 0.035) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, #223678, #141f44 58%, #101733),
        linear-gradient(90deg, rgba(255, 61, 200, 0.08), rgba(57, 243, 255, 0.08));
      color: #f0f6ff;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 15px;
      font-family: "Rajdhani", "Segoe UI", sans-serif;
      font-weight: 800;
      letter-spacing: 0.04em;
      cursor: pointer;
      text-transform: uppercase;
      box-shadow:
        0 0 0 1px rgba(186, 214, 255, 0.08) inset,
        inset 0 1px 0 rgba(210, 235, 255, 0.16),
        0 5px 12px rgba(0, 0, 0, 0.26);
      transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    button:hover {
      transform: translateY(-1px);
      border-color: rgba(133, 236, 255, 0.95);
      box-shadow:
        0 0 0 1px rgba(186, 214, 255, 0.12) inset,
        0 7px 14px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(57, 243, 255, 0.2);
    }

    button[data-selected="true"] {
      border-color: #7bf6ff;
      box-shadow:
        0 0 0 1px rgba(57, 243, 255, 0.7) inset,
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 22px rgba(57, 243, 255, 0.4),
        0 0 14px rgba(255, 61, 200, 0.22);
    }

    input[type="file"] {
      color: #bdccff;
      font-size: 14px;
      font-family: "Rajdhani", "Segoe UI", sans-serif;
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
    }

    input[type="text"] {
      border: 1px solid rgba(92, 125, 232, 0.9);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(164, 247, 240, 0.028) 0px,
          rgba(164, 247, 240, 0.028) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, rgba(16, 24, 53, 0.96), rgba(10, 16, 37, 0.96));
      color: #eef6ff;
      padding: 8px 9px;
      border-radius: 8px;
      font-size: 16px;
      font-family: "Rajdhani", "Segoe UI", sans-serif;
      font-weight: 800;
      letter-spacing: 0.03em;
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
      box-shadow:
        0 0 0 1px rgba(170, 205, 255, 0.06) inset,
        inset 0 1px 0 rgba(206, 233, 255, 0.13),
        0 4px 10px rgba(0, 0, 0, 0.24);
    }

    .status {
      font-size: 13px;
      color: #ddedff;
      line-height: 1.45;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-shadow: 0 0 12px rgba(57, 243, 255, 0.26);
    }

    #select-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      align-self: stretch;
      gap: 10px;
      text-align: center;
      padding: 12px 10px 12px;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(198, 214, 234, 0.032) 0px,
          rgba(198, 214, 234, 0.032) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, rgba(44, 52, 66, 0.86), rgba(14, 20, 32, 0.9));
      border: 1px solid rgba(130, 152, 184, 0.62);
      border-radius: 10px;
      box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(192, 226, 255, 0.08) inset,
        inset 0 1px 0 rgba(210, 235, 255, 0.14),
        inset 0 0 20px rgba(122, 170, 224, 0.1);
      position: relative;
      height: auto;
      min-height: 0;
      margin-top: 0;
      margin-bottom: 0;
      overflow: visible;
      z-index: 2;
    }

    #select-center::before {
      /* Temporarily disabled for seam + corner artifact isolation. */
      content: none;
    }

    #start-game {
      font-size: 18px;
      font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 14px 20px;
      border: 1px solid rgba(168, 196, 222, 0.88);
      border-radius: 12px;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(204, 222, 240, 0.04) 0px,
          rgba(204, 222, 240, 0.04) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, #3e495d, #202938 58%, #151d2a);
      box-shadow:
        0 0 0 1px rgba(192, 214, 238, 0.4) inset,
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(136, 170, 214, 0.24);
      animation: neonPulse 2.2s ease-in-out infinite;
    }

    #p2-toggle {
      border-color: rgba(136, 162, 196, 0.86);
      background: linear-gradient(180deg, #3c4659, #1f2836);
      box-shadow: 0 0 12px rgba(132, 166, 208, 0.18);
    }

    #music-toggle {
      border-color: rgba(136, 162, 196, 0.86);
      background: linear-gradient(180deg, #3b4658, #1e2835);
      box-shadow: 0 0 12px rgba(132, 166, 208, 0.18);
      min-width: 132px;
    }

    #hall-of-fame-btn {
      border-color: rgba(168, 106, 255, 0.86);
      background: linear-gradient(180deg, #4a3d66, #241d38);
      box-shadow: 0 0 16px rgba(178, 120, 255, 0.24);
      min-width: 132px;
    }

    #center-copy {
      font-size: 14px;
      color: #edf5ff;
      font-family: "Rajdhani", "Segoe UI", sans-serif;
      line-height: 1.35;
      max-width: 280px;
      letter-spacing: 0.04em;
      font-weight: 700;
      text-transform: uppercase;
      text-shadow: 0 0 14px rgba(57,243,255,0.28);
    }

    .difficulty-field {
      width: 100%;
      max-width: 176px;
      box-sizing: border-box;
      margin: 2px 0;
    }

    .difficulty-grid button {
      width: 100%;
      max-width: 132px;
      justify-self: center;
    }

    .avatar-wrap {
      display: grid;
      place-items: center;
      margin-bottom: 0;
      position: relative;
    }

    .avatar-shell {
      width: 100px;
      height: 100px;
      border-radius: 999px;
      background: radial-gradient(120% 120% at 30% 20%, #273d84, #101a3d);
      border: 2px solid rgba(127, 163, 248, 0.92);
      box-shadow:
        0 0 0 3px rgba(57, 243, 255, 0.2),
        0 0 0 7px rgba(255, 61, 200, 0.08),
        0 0 24px rgba(255, 61, 200, 0.24);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      overflow: hidden;
    }

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 999px;
      object-fit: contain;
      object-position: 50% 50%;
      transform-origin: 50% 50%;
    }

    .panel:hover .avatar-shell {
      transform: scale(1.035);
      box-shadow: 0 0 0 3px rgba(57, 243, 255, 0.28), 0 0 30px rgba(255, 61, 200, 0.34);
    }

    .avatar.custom-head {
      object-fit: cover;
      object-position: 50% 50%;
      border-radius: 999px;
    }

    .avatar.awaiting-upload {
      opacity: 0.04;
    }

    .avatar-wrap.custom-head.editing::after {
      content: "";
      position: absolute;
      inset: 12% 20%;
      border-radius: 50%;
      border: 1.6px dashed rgba(214, 244, 255, 0.82);
      box-shadow:
        0 0 0 1px rgba(57, 243, 255, 0.26),
        0 0 14px rgba(57, 243, 255, 0.26);
      pointer-events: none;
    }

    .face-tune-grid {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 6px 8px;
      align-items: center;
    }

    .upload-field {
      position: relative;
    }

    #hall-of-fame-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 30;
      background: rgba(4, 8, 16, 0.78);
      backdrop-filter: blur(3px);
    }

    #hall-of-fame-modal.visible {
      display: flex;
    }

    #hall-of-fame-card {
      width: min(1120px, calc(100vw - 34px));
      max-height: min(76vh, 760px);
      overflow: hidden;
      border-radius: 12px;
      border: 1px solid rgba(118, 168, 240, 0.62);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(190, 212, 238, 0.032) 0px,
          rgba(190, 212, 238, 0.032) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, rgba(26, 36, 58, 0.96), rgba(12, 18, 31, 0.98));
      box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(186, 214, 255, 0.08) inset,
        inset 0 1px 0 rgba(220, 238, 255, 0.14);
      padding: 14px 14px 12px;
    }

    .hof-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .hof-head h3 {
      margin: 0;
      font-size: 30px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #eef8ff;
      text-shadow: 0 0 16px rgba(57, 243, 255, 0.42);
      font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
    }

    #hall-of-fame-close {
      min-width: 98px;
      padding: 7px 12px;
      font-size: 12px;
      text-transform: uppercase;
    }

    .hof-sub {
      margin-top: 4px;
      margin-bottom: 10px;
      font-size: 14px;
      letter-spacing: 0.05em;
      color: #b9d8ff;
      text-transform: uppercase;
    }

    .hof-table-wrap {
      overflow: auto;
      max-height: calc(min(76vh, 760px) - 94px);
      border: 1px solid rgba(114, 160, 228, 0.42);
      border-radius: 10px;
      background: rgba(8, 14, 28, 0.55);
    }

    .hof-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      color: #eaf5ff;
    }

    .hof-table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: rgba(18, 28, 48, 0.95);
      color: #aee8ff;
      text-transform: uppercase;
      font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
      font-size: 12px;
      letter-spacing: 0.07em;
      padding: 8px 8px;
      border-bottom: 1px solid rgba(124, 176, 245, 0.45);
      text-align: left;
      white-space: nowrap;
    }

    .hof-table td {
      padding: 8px 8px;
      border-bottom: 1px solid rgba(102, 138, 196, 0.24);
      color: #e6f2ff;
      vertical-align: top;
    }

    .hof-table tbody tr:nth-child(odd) td {
      background: rgba(18, 26, 44, 0.42);
    }

    .hof-table tbody tr:nth-child(even) td {
      background: rgba(10, 16, 30, 0.34);
    }

    .hof-empty {
      text-align: center;
      color: #b9d8ff;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 16px 10px;
    }

    .upload-field input[type="file"] {
      padding-right: 96px;
    }

    .resize-head-btn {
      position: absolute;
      top: 26px;
      right: 8px;
      width: auto;
      padding: 4px 8px;
      font-size: 10px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1.2;
    }

    .avatar-upload-placeholder {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
      font-size: 12px;
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #dbf0ff;
      text-shadow: 0 0 10px rgba(57, 243, 255, 0.44), 0 0 18px rgba(255, 61, 200, 0.22);
      pointer-events: none;
      opacity: 0;
      z-index: 2;
    }

    .avatar-upload-placeholder.visible {
      opacity: 1;
    }

    .face-editor {
      position: absolute;
      left: 8px;
      right: 8px;
      top: auto;
      bottom: 8px;
      height: 156px;
      display: none;
      gap: 8px;
      align-content: start;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(255, 88, 198, 0.72);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(190, 212, 234, 0.028) 0px,
          rgba(190, 212, 234, 0.028) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, rgba(18, 28, 48, 0.95), rgba(10, 16, 30, 0.95));
      box-shadow:
        0 0 0 1px rgba(255, 88, 198, 0.22),
        0 0 14px rgba(255, 88, 198, 0.24),
        inset 0 0 18px rgba(7, 15, 35, 0.45),
        0 10px 20px rgba(0, 0, 0, 0.32);
      z-index: 6;
    }

    .face-editor.open {
      display: grid;
      animation: faceEditorIn 0.16s ease-out;
    }

    .face-editor-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #d9ebff;
      margin-bottom: 2px;
    }

    .face-done-btn {
      width: 100%;
      padding: 8px 9px;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .face-tune-grid label {
      font-size: 12px;
      font-weight: 700;
      color: #cfe6ff;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .face-tune-grid input[type="range"] {
      width: 100%;
      accent-color: #39f3ff;
      min-width: 0;
    }

    @keyframes faceEditorIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .face-tune-note {
      display: block;
      margin-top: 6px;
      font-size: 11px;
      color: #b5d5ff;
      letter-spacing: 0.03em;
      line-height: 1.3;
    }

    .panel-top {
      display: grid;
      grid-template-columns: 104px 1fr;
      gap: 10px;
      align-items: stretch;
      margin-bottom: 10px;
    }

    .bio-card {
      margin-top: 0;
      padding: 8px 9px 9px;
      border-radius: 10px;
      border: 1px solid rgba(126, 150, 188, 0.74);
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(190, 212, 234, 0.028) 0px,
          rgba(190, 212, 234, 0.028) 1px,
          rgba(0, 0, 0, 0) 1px,
          rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(180deg, rgba(40, 47, 62, 0.9), rgba(16, 22, 36, 0.95)),
        radial-gradient(120% 120% at 78% 0%, rgba(188, 212, 236, 0.1), transparent 58%);
      box-shadow:
        inset 0 0 16px rgba(7, 15, 35, 0.44),
        inset 0 1px 0 rgba(198, 230, 255, 0.13),
        0 5px 14px rgba(0, 0, 0, 0.24);
      min-height: 116px;
      height: 116px;
      box-sizing: border-box;
    }

    .bio-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #e9f4ff;
      margin-bottom: 4px;
      text-shadow:
        0 0 10px rgba(57, 243, 255, 0.34),
        0 0 18px rgba(255, 61, 200, 0.16);
    }

    .bio-desc {
      font-size: 14px;
      line-height: 1.3;
      color: #deebff;
      margin-bottom: 7px;
      min-height: 34px;
      height: 34px;
      overflow: hidden;
    }

    .bio-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 10px;
      font-size: 12px;
      color: #cbe0ff;
      line-height: 1.25;
      text-shadow: 0 0 8px rgba(57, 243, 255, 0.16);
    }

    .bio-stats span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .avatar.offline {
      opacity: 0.45;
      filter: grayscale(0.7);
    }

    @keyframes neonPulse {
      0% { box-shadow: 0 0 0 1px rgba(57, 243, 255, 0.35) inset, 0 8px 24px rgba(0,0,0,0.3), 0 0 24px rgba(255, 61, 200, 0.22); }
      50% { box-shadow: 0 0 0 1px rgba(57, 243, 255, 0.55) inset, 0 10px 26px rgba(0,0,0,0.34), 0 0 38px rgba(255, 61, 200, 0.42); }
      100% { box-shadow: 0 0 0 1px rgba(57, 243, 255, 0.35) inset, 0 8px 24px rgba(0,0,0,0.3), 0 0 24px rgba(255, 61, 200, 0.22); }
    }

    @keyframes panelSweep {
      0% { left: -140%; }
      100% { left: 140%; }
    }

    @keyframes panelFloat {
      0% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
      100% { transform: translateY(0); }
    }

    @keyframes neonLabelFlicker {
      0% { opacity: 0.9; }
      45% { opacity: 1; }
      47% { opacity: 0.78; }
      50% { opacity: 1; }
      53% { opacity: 0.86; }
      100% { opacity: 1; }
    }

    @media (max-width: 980px) {
      #select-ui {
        width: min(700px, calc(100vw - 18px));
        grid-template-columns: 1fr;
        top: auto;
        bottom: 12px;
        transform: translateX(-50%);
        max-height: calc(100vh - 24px);
        overflow: auto;
      }

      .panel-top {
        grid-template-columns: 94px 1fr;
        gap: 10px;
      }

      .bio-card {
        min-height: 108px;
        height: 108px;
      }
    }