/* Choi Chung - bang mau va bo cuc dung chung cho ca bon game.
   Giao dien toi lam chuan vi phan lon game choi buoi toi, va canvas trang
   noi bat hon han tren nen toi. */

:root {
  --bg: #12121a;
  --bg-deep: #0c0c12;
  --surface: #1c1c28;
  --surface-2: #252534;
  --surface-3: #2f2f42;
  --line: #35354a;
  --text: #e9e9f2;
  --muted: #9a9ab4;
  --accent: #ffb545;
  --accent-ink: #2a1c05;
  --violet: #8b6cff;
  --green: #4ade80;
  --red: #f87171;
  --blue: #52a8ff;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Thuoc tinh hidden phai thang moi khai bao display khac, neu khong mot dong
   `display: block` o cuoi file se lam no mat tac dung ma rat kho lan ra. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, textarea, select { font: inherit; color: inherit; }

/* Bo do tre 300ms va thao tac cham hai lan de phong to tren cam ung. */
button, .chip, .swatch, .game-card, .poll-row, .answer, .choice { touch-action: manipulation; }

/* ---------- Man hinh ---------- */

/* 100dvh doi theo thanh dia chi cua trinh duyet di dong; 100vh de lai lam
   duong lui cho trinh duyet cu khong hieu dvh. */
.screen { display: none; height: 100vh; height: 100dvh; }
.screen.is-active { display: block; }

/* ---------- Nut ---------- */

.btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--surface-3); border-color: #45455e; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover:not(:disabled) { background: #ffc466; border-color: #ffc466; }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn-sm { padding: 6px 11px; font-size: 14px; }
.btn-lg { padding: 14px 30px; font-size: 17px; width: 100%; }

/* ---------- Trang chu ---------- */

#screen-home { overflow-y: auto; }

.home-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 20px 60px;
}

.brand { text-align: center; margin-bottom: 32px; }

.brand-title {
  font-size: clamp(38px, 9vw, 62px);
  margin: 0;
  font-weight: 800;
  letter-spacing: -.02em;
}
.brand-title span {
  background: linear-gradient(105deg, var(--accent), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-sub { color: var(--muted); margin: 10px 0 0; font-size: 16px; }

.name-row { margin-bottom: 18px; }
.name-row label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}

input[type="text"], textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease;
}
input[type="text"]:focus, textarea:focus { border-color: var(--accent); }

.join-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 26px;
}
.join-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.join-row { display: flex; gap: 10px; margin-top: 8px; }
.join-row input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
}
.join-row .btn { flex-shrink: 0; }

.error-text { color: var(--red); font-size: 13px; margin: 10px 0 0; }

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
  margin: 26px 0 18px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

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

.game-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.game-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--surface-2);
}
.game-emoji { font-size: 30px; line-height: 1; }
.game-name { font-size: 19px; font-weight: 700; }
.game-desc { font-size: 13.5px; color: var(--muted); }
.game-meta {
  font-size: 12px;
  color: var(--accent);
  background: rgba(255, 181, 69, .1);
  border-radius: 20px;
  padding: 3px 10px;
  margin-top: 4px;
}

/* Loi vao trang tai ban build. De duoi luoi game vi day khong phai game,
   nhung van phai du noi bat de nguoi can tim thay ngay. */
.apk-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.apk-banner:hover { border-color: var(--accent); background: var(--surface-2); }
.apk-emoji { font-size: 26px; line-height: 1; }
.apk-text { flex: 1; display: flex; flex-direction: column; }
.apk-text small { color: var(--muted); font-size: 12.5px; }
.apk-arrow { color: var(--accent); font-size: 20px; }

.home-foot {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 36px;
}

/* ---------- Khung phong ---------- */

#screen-room.is-active { display: flex; flex-direction: column; }

.room-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Chua tai tho va goc bo tron cua dien thoai doi moi. */
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.room-id { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.room-game { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.room-code {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 14px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 16px;
}
.room-code:hover { border-color: var(--accent); }
.copy-hint { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0; }

.room-body { flex: 1; display: flex; min-height: 0; }

.players-panel {
  width: 210px;
  flex-shrink: 0;
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  padding: 14px;
  padding-left: max(14px, env(safe-area-inset-left));
  overflow-y: auto;
}
.panel-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 10px;
}
.player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.player-item.is-me { border-color: var(--accent); }
.player-item.is-drawing { background: rgba(255, 181, 69, .13); }
.player-item.is-offline { opacity: .4; }
.player-item.has-guessed { background: rgba(74, 222, 128, .12); }
.player-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-score { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.player-badge { font-size: 13px; }

.game-area { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* ---------- Sanh cho ---------- */

.lobby {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.lobby[hidden] { display: none; }

.lobby-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.lobby-card h2 { margin: 0 0 6px; font-size: 24px; }
.lobby-tagline { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.lobby-hint { color: var(--muted); font-size: 13px; margin: 12px 0 0; }

.invite-box {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.invite-box code {
  display: block;
  margin-top: 6px;
  background: var(--bg-deep);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  word-break: break-all;
  font-size: 13px;
}

.lobby-options { margin-bottom: 18px; text-align: left; }
.option-group { margin-bottom: 14px; }
.option-group > label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 7px;
  font-weight: 600;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 15px;
  cursor: pointer;
  font-size: 14px;
}
.chip:hover { border-color: var(--accent); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

.game-mount { flex: 1; min-height: 0; display: none; }
.game-mount.is-active { display: flex; }

/* ---------- Thong bao noi ---------- */

.toast-stack {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 90;
  pointer-events: none;
  align-items: center;
  padding: 0 12px;
}
.toast {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 10px 20px;
  box-shadow: var(--shadow);
  font-size: 14px;
  animation: toast-in .22s ease;
  max-width: 90vw;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Nen mo khi ngan keo nguoi choi bat ra tren dien thoai.
   Khong co lop nay thi cham ra ngoai khong dong duoc ngan keo. */
.panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 10, .55);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.panel-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* =====================================================================
   RESPONSIVE
   Bon moc: <=380 may rat nho, <=780 dien thoai, <=1080 may bang,
   va mot moc rieng cho dien thoai xoay ngang (chieu cao moi la thu khan hiem).
   ===================================================================== */

/* --- May bang / cua so hep: thu cac cot phu lai --- */
@media (max-width: 1080px) and (min-width: 781px) {
  .players-panel { width: 170px; padding: 12px 10px; }
  .player-item { padding: 7px 8px; font-size: 13px; }
}

/* --- Dien thoai --- */
@media (max-width: 780px) {
  .players-panel {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 76%;
    max-width: 280px;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: var(--shadow);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .players-panel.is-open { transform: translateX(0); }

  .home-wrap { padding: 26px 16px max(40px, env(safe-area-inset-bottom)); }
  .copy-hint { display: none; }
  .room-code { padding: 4px 12px; font-size: 15px; }
  .room-game { font-size: 14px; }

  /* Vung cham toi thieu 44px - ngon tay khong bam trung nut nho hon the. */
  .btn-sm { padding: 9px 13px; }
  .room-bar .btn-sm { min-width: 42px; min-height: 38px; }

  .brand { margin-bottom: 24px; }
  .brand-sub { font-size: 14.5px; }
  .game-grid { grid-template-columns: 1fr; gap: 11px; }
  .game-card { padding: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .game-card .game-emoji { font-size: 26px; }
  .game-card .game-name { flex: 1; font-size: 17px; }
  .game-card .game-desc { flex-basis: 100%; font-size: 13px; }
  .game-card .game-meta { margin-top: 0; }
  /* Bo hieu ung nhac len: tren cam ung khong co trang thai di chuot,
     hieu ung se dinh lai sau khi cham. */
  .game-card:hover { transform: none; }

  .lobby { padding: 14px; align-items: flex-start; }
  .lobby-card { padding: 20px 18px; }
  .lobby-card h2 { font-size: 20px; }
  .invite-box code { font-size: 12px; }
}

/* --- May rat nho (iPhone SE, Android gia re) --- */
@media (max-width: 380px) {
  body { font-size: 14.5px; }
  .home-wrap { padding: 20px 12px 36px; }
  .brand-title { font-size: 34px; }
  .join-row { flex-direction: column; }
  .join-row input { letter-spacing: .22em; font-size: 18px; }
  .join-row .btn { width: 100%; }
  .room-bar { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .lobby-card { padding: 16px 14px; }
}

/* --- Dien thoai xoay ngang: chieu cao chi con ~350px --- */
@media (orientation: landscape) and (max-height: 520px) {
  .room-bar { padding-top: 5px; padding-bottom: 5px; }
  .room-code { padding: 2px 11px; }
  .room-bar .btn-sm { padding: 5px 10px; }
  .lobby { padding: 10px; align-items: flex-start; }
  .lobby-card { padding: 14px 18px; }
  .lobby-card h2 { font-size: 18px; margin-bottom: 2px; }
  .lobby-tagline { margin-bottom: 10px; font-size: 13px; }
  .btn-lg { padding: 10px 24px; font-size: 15px; }
  /* Link moi an di khi ngang - da co nut chep link tren thanh dau. */
  .invite-box { display: none; }
}

/* --- Man hinh rong: khong de noi dung keo dai het co --- */
@media (min-width: 1500px) {
  .home-wrap { max-width: 980px; }
  .players-panel { width: 240px; }
}

@media (min-width: 781px) {
  #btn-players { display: none; }
  .panel-backdrop { display: none; }
}

/* --- Ton trong nguoi tat hieu ung chuyen dong --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}