#select-screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; color: #e8e2f7;
  background: radial-gradient(ellipse at 50% 30%, #1a1040 0%, #05030f 70%);
  font-family: Georgia, serif; }
#select-screen.hidden { display: none; }
#select-screen h1 { margin: 0; font-size: 44px; letter-spacing: 14px; text-indent: 14px;
  color: #fff; text-shadow: 0 0 24px #8a6cff, 0 0 60px #4b2bd6; }
.tagline { margin: 0; color: #8f83bd; font-style: italic; }
#select-card { display: flex; gap: 18px; background: rgba(14, 8, 34, .8);
  border: 1px solid #4b3d7a; border-radius: 16px; padding: 18px; min-width: 420px; }
#sel-portrait { width: 180px; height: 180px; border-radius: 12px; border: 1px solid #6a5acd;
  background: #17102e; object-fit: cover; }
#sel-name { font-size: 20px; margin-bottom: 2px; }
#sel-rarity { font-size: 12px; color: #ffd166; margin-bottom: 8px; }
#sel-traits { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: #a99ed4;
  columns: 2; column-gap: 18px; }
#select-controls { display: flex; gap: 10px; align-items: center; }
#select-controls input { width: 64px; background: #17102e; color: #fff;
  border: 1px solid #4b3d7a; border-radius: 8px; padding: 7px; font-size: 15px; }
#select-controls button { background: #2c2250; color: #e8e2f7; border: 1px solid #6a5acd;
  border-radius: 10px; padding: 9px 22px; font-size: 15px; cursor: pointer; font-family: inherit; }
#select-controls button:hover { background: #3a2d6b; }
#sel-play { background: #4b2bd6; }
#sel-note { color: #6f639c; font-size: 12px; }