* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: #e6e6e6;
  font: 15px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

html { background-color: #07090e; }

/* Full-viewport battlefield canvas — sits behind everything */
#lobby-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

body { background: transparent; }

body { display: flex; flex-direction: column; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(13,14,17,0.82);
  border-bottom: 1px solid #262a33;
  position: relative;
  z-index: 1;
}
.logo { font-weight: 700; letter-spacing: 1px; }
.logo small { color: #f0c040; margin-left: 4px; }
.server { font-size: 13px; color: #8a93a3; }
.head-right { display: flex; align-items: center; gap: 14px; }
.relay-pref { font-size: 13px; color: #8a93a3; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.relay-pref input { width: auto; padding: 0; margin: 0; }
.lang { font: inherit; font-size: 13px; color: #8a93a3; background: transparent; border: 1px solid #2b303a; border-radius: 6px; padding: 2px 4px; }
.lang option { background: #15171c; color: #d6dae2; }
.legal { font-size: 12px; color: #6c7482; text-align: center; margin: 4px 0 0; pointer-events: auto; }
.legal a { color: #8e9ac4; }

main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 16px; min-height: 0; position: relative; z-index: 1; }
.screen { width: 100%; }
.hidden { display: none !important; }

button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(140, 160, 240, 0.38);
  background: rgba(30, 36, 68, 0.85);
  color: #e6e6e6;
  cursor: pointer;
}
button:hover:not(:disabled) { background: rgba(44, 52, 96, 0.9); border-color: rgba(170, 185, 255, 0.6); }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: #d9a520; border-color: #d9a520; color: #111; font-weight: 700; }
button.primary:hover { background: #f0bb30; }
button.big { font-size: 18px; padding: 12px; width: 100%; }

input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(140, 160, 240, 0.38);
  background: rgba(8, 10, 22, 0.82);
  color: #e6e6e6;
  width: 120px;
  letter-spacing: 2px;
  text-align: center;
}

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 0 5px;
  margin: 0 1px;
  border: 1px solid #454b58;
  border-bottom-width: 2px;
  border-radius: 4px;
  font: 12px/18px monospace;
  text-align: center;
  background: #1c1f26;
}

select {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #3a404c;
  background: #101216;
  color: #e6e6e6;
}

/* Catalog: a tunnel through space, the cards flying past on a helix */
#cosmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cosmos-on body { touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
header { z-index: 2; }
#catalog {
  position: fixed; inset: 0;
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 12px 10px;
}
#catalog .cat-top, #catalog .cat-foot { position: relative; z-index: 1; text-align: center; }
.cat-top .room-row { display: inline-flex; pointer-events: auto; }
.cat-top .room-row input { background: rgba(8, 10, 20, 0.75); border-color: #4a5276; }
#catalog h1 { margin: 6px 0 0; font-size: 30px; color: #f0c040; letter-spacing: 8px; text-shadow: 0 0 18px rgba(240, 192, 64, 0.55), 0 0 40px rgba(120, 140, 255, 0.4); }
#catalog .tagline { margin: 2px 0 0; color: #a9b4d8; text-shadow: 0 0 10px #000; }
#catalog .msg { margin: 6px 0 0; min-height: 0; text-shadow: 0 0 6px #000; }
.cat-search {
  pointer-events: auto; margin-top: 8px; width: min(260px, 80vw); padding: 6px 14px; border-radius: 16px;
  background: rgba(8, 10, 20, 0.75); border: 1px solid #4a5276; color: #e8ecff; font-size: 14px; text-align: center;
}
.cat-search:focus { outline: none; border-color: #8fa6ff; box-shadow: 0 0 12px rgba(140, 160, 255, 0.45); }
.cat-hint { margin: 0 0 4px; font-size: 12px; color: #8e9ac4; text-shadow: 0 0 6px #000; }
.cards { position: fixed; inset: 0; z-index: 0; transition: opacity 0.35s; }
.cards.away { opacity: 0; pointer-events: none; }
.cards.away .game-card { pointer-events: none !important; }
.game-card {
  position: absolute; left: 0; top: 0;
  width: 180px;
  pointer-events: auto;
  will-change: transform, opacity;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px;
  border: 1px solid rgba(150, 170, 255, 0.38);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(30, 36, 70, 0.82), rgba(10, 12, 26, 0.86));
  box-shadow: 0 0 22px rgba(110, 130, 255, 0.28), inset 0 0 18px rgba(120, 140, 255, 0.12);
  text-align: center;
  touch-action: none;
}
.game-card:hover:not(:disabled), .game-card.focus {
  border-color: #f0c040;
  background: linear-gradient(160deg, rgba(70, 56, 24, 0.86), rgba(16, 14, 24, 0.9));
  box-shadow: 0 0 34px rgba(240, 192, 64, 0.5), inset 0 0 20px rgba(240, 192, 64, 0.15);
}
.game-card .icon { width: 72px; height: 72px; border-radius: 12px; background: #101216; box-shadow: 0 0 14px rgba(160, 180, 255, 0.35); }
.game-card b { font-size: 17px; }
.game-card small { color: #9aa4c4; font-size: 12px; min-height: 3em; }
.game-card .players { font-size: 12px; color: #c8ccd4; }
.game-card .live { font-size: 12px; color: #7bdc6a; min-height: 1.5em; }

/* Lobby */
#lobby { position: relative; }
#lobby { max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
#lobby h1 { text-shadow: 0 0 18px rgba(240, 192, 64, 0.45), 0 0 40px rgba(120, 140, 255, 0.35); margin: 12px 0 0; font-size: 34px; text-align: center; color: #f0c040; letter-spacing: 6px; }
/* Back to the catalog: a glowing pill like the catalog's cards, pinned to
   the top left, its star turning like the ones in the tunnel. */
.back {
  position: fixed; left: 16px; top: 54px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(150, 170, 255, 0.5);
  background: linear-gradient(160deg, rgba(34, 40, 82, 0.86), rgba(12, 14, 30, 0.9));
  box-shadow: 0 0 18px rgba(110, 130, 255, 0.35), inset 0 0 12px rgba(120, 140, 255, 0.15);
  color: #dfe5ff; font-size: 15px; font-weight: 600; letter-spacing: 1px;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.back:hover:not(:disabled), .back:focus-visible {
  background: linear-gradient(160deg, rgba(70, 56, 24, 0.9), rgba(16, 14, 24, 0.92));
  border-color: #f0c040; color: #fff3cf;
  box-shadow: 0 0 26px rgba(240, 192, 64, 0.5), inset 0 0 14px rgba(240, 192, 64, 0.18);
  transform: translateX(-2px);
}
.back:active { transform: scale(0.96); }
.back-arrow { font-size: 24px; line-height: 1; margin-top: -3px; transition: transform 0.2s; }
.back:hover .back-arrow { transform: translateX(-3px); }
.back-orb {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #fff, #b9c8ff 30%, #6b5cff 65%, rgba(80, 60, 255, 0) 72%);
  box-shadow: 0 0 10px #8fa0ff;
  position: relative;
}
.back-orb::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(190, 200, 255, 0.55); border-left-color: transparent; border-right-color: transparent;
  animation: orbit 3s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }
.back kbd { margin-left: 2px; font-size: 11px; line-height: 16px; background: rgba(10, 12, 26, 0.7); border-color: rgba(150, 170, 255, 0.35); color: #9aa4c4; }
#logo { cursor: pointer; }
/* Narrow screens: the pill heads the page instead, above the title. */
@media (max-width: 760px) {
  .back { position: static; align-self: flex-start; margin-bottom: -4px; }
}
@media (pointer: coarse) {
  .back kbd { display: none; }
}
.sizes { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 14px; color: #8a93a3; }
.sizes label { cursor: pointer; }
.sizes input { display: none; }
.sizes span { display: inline-block; padding: 4px 12px; border: 2px solid rgba(130, 150, 230, 0.28); border-radius: 8px; background: rgba(18, 22, 46, 0.78); color: #e6e6e6; }
.sizes input:checked + span { border-color: #d9a520; background: rgba(48, 40, 18, 0.85); }
.tun { font-size: 14px; background: rgba(18, 22, 46, 0.78); border: 1px solid rgba(130, 150, 230, 0.28); border-radius: 10px; padding: 6px 12px; }
.tun summary { cursor: pointer; color: #8a93a3; }
.tun-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; }
.tun-body label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tun-body label small { display: block; color: #6c7482; font-size: 12px; }
.tun-body input[type=number] { width: 80px; letter-spacing: 0; padding: 4px 6px; }
.tun-body input[type=checkbox] { width: auto; }
.tun-body select { padding: 4px 6px; }
.room-game { width: 100%; font-size: 16px; }
.tagline { margin: 0; text-align: center; color: #8a93a3; font-size: 14px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode { cursor: pointer; }
.mode input { display: none; }
.mode span {
  display: block;
  height: 100%;
  padding: 12px;
  border: 2px solid rgba(130, 150, 230, 0.28);
  border-radius: 10px;
  background: rgba(18, 22, 46, 0.78);
}
.mode b { display: block; font-size: 17px; }
.mode small { color: #8a93a3; }
.mode span:hover { border-color: rgba(170, 185, 255, 0.55); }
.mode input:checked + span { border-color: #d9a520; background: rgba(48, 40, 18, 0.85); box-shadow: 0 0 18px rgba(240, 192, 64, 0.25); }
.mode-solo { grid-column: 1 / -1; }
/* A game with one mode: it takes the row, like solo. */
.mode:only-child, .mode:first-child:has(+ .mode-solo) { grid-column: 1 / -1; }
.room-row { display: flex; gap: 8px; justify-content: center; }
.msg { min-height: 1.5em; margin: 0; text-align: center; color: #9bd18b; }
.msg.err { color: #ff8a7a; }
.help { font-size: 13px; color: #9aa4c4; text-shadow: 0 0 6px #000; border-top: 1px solid rgba(130, 150, 230, 0.22); padding-top: 8px; }
.help p { margin: 4px 0; }
.help-line { display: block; }
.stats { font-size: 12px; color: #6c7482; text-align: center; margin: 0; }

/* Waiting */
#waiting {
  max-width: 420px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 24px;
}
#wait-canvas {
  width: 380px; height: 220px;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #2a2f39;
  background: #060809;
  image-rendering: pixelated;
}
.room-box { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.room-code { font: 700 44px/1 monospace; letter-spacing: 8px; color: #f0c040; }

/* Room: between games */
.room-panel {
  flex: 0 1 520px;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 12px;
}
.room-title { margin: 0; text-align: center; font-size: 17px; }

/* Game */
#play { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }
.stage { position: relative; flex: 0 1 auto; }
.pause-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 14, 0.72);
  border-radius: 4px;
  z-index: 10;
}
.pause-box {
  text-align: center;
  padding: 24px 32px;
  background: #1b1e25;
  border: 1px solid #3a404c;
  border-radius: 10px;
}
.pause-box p { margin: 4px 0; }
.pause-elapsed { font-size: 13px; color: #8a93a3; }
/* --ar is the game's aspect ratio, set from its screen size. */
#cv {
  --ar: 512 / 448;
  display: block;
  width: min(calc(100vw - 300px), calc((100vh - 90px) * var(--ar)), 1024px);
  aspect-ratio: var(--ar);
  image-rendering: pixelated;
  background: #636363;
  border-radius: 4px;
}
.side { width: 240px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.card { background: rgba(18, 22, 46, 0.8); border: 1px solid rgba(130, 150, 230, 0.28); border-radius: 10px; padding: 10px 12px; }
.card-title { font-size: 12px; color: #8a93a3; margin-bottom: 4px; }
.mode-label { font-weight: 700; font-size: 17px; }
.role-label { font-size: 13px; color: #8a93a3; }
.path { font-weight: 700; }
.path.host, .path.srflx { color: #7bdc6a; }
.path.relay { color: #f0b040; }
.detail { font: 11px/1.4 monospace; color: #8a93a3; word-break: break-all; margin: 2px 0 4px; }
.kv { display: flex; justify-content: space-between; font-size: 13px; }
.kv b { font-weight: 600; }
.members { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.members li { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.members .role { color: #8a93a3; }
.members .path { margin-left: auto; font-size: 12px; font-weight: 400; }
.members .path.wait { color: #6c7482; }
.members li.away { opacity: 0.5; }
.members .block { padding: 0 4px; font-size: 13px; line-height: 1.4; background: none; border: none; min-width: 0; }
.members .path + .block { margin-left: 0; }
.talker {
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: #2a2f39;
  transition: background 0.1s, box-shadow 0.1s;
}
.talker.on { background: #7bdc6a; box-shadow: 0 0 0 3px #7bdc6a55; }
#mic { width: 100%; }

/* Touch controls */
.touch { display: none; }
@media (pointer: coarse) {
  /* Long-pressing a control must not select text (iOS extends the selection
     to nearby labels) or pop the iOS callout, so cover the whole play screen. */
  #play {
    flex-direction: column;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  #cv { width: min(100vw - 16px, (100vh - 250px) * var(--ar)); }
  .side { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .side .card { flex: 1 1 140px; }
  .touch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 6px 0;
    touch-action: none;
  }
  .dpad { position: relative; width: 150px; height: 150px; }
  .dpad button { position: absolute; width: 52px; height: 52px; padding: 0; font-size: 20px; touch-action: none; }
  .dpad .up { left: 49px; top: 0; }
  .dpad .down { left: 49px; bottom: 0; }
  .dpad .left { left: 0; top: 49px; }
  .dpad .right { right: 0; top: 49px; }
  .actions { display: flex; gap: 12px; align-items: center; }
  .action { width: 90px; height: 90px; padding: 0; border-radius: 50%; background: #b8321c; border-color: #b8321c; font-size: 18px; touch-action: none; }
}

@media (prefers-reduced-motion: reduce) {
  #lobby-bg, #wait-canvas { display: none; }
}

/* Spaced letters pull Thai's vowel and tone marks off their consonants. */
html:lang(th) * { letter-spacing: 0 !important; }