:root {
  --bg: #0d0f16;
  --bg-2: #12141d;
  --panel: #181b25;
  --panel-2: #212430;
  --panel-3: #2a2e3d;
  --border: #2b3040;
  --text: #e8eaf1;
  --muted: #8b91a5;
  --accent: #5865f2;
  --accent-2: #7c86ff;
  --green: #57f287;
  --red: #ed4245;
  --yellow: #fee75c;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 20% -10%, #1a1e35 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column;
  min-height: 100dvh;
}
a { color: var(--accent-2); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px; background: linear-gradient(135deg, var(--accent), #4752c4); color: #fff; transition: filter .15s, transform .05s; }
button:hover { filter: brightness(1.12); }
button:active { transform: scale(.97); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
input[type=text] { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); width: 100%; min-width: 0; }
input[type=text]:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: rgba(24,27,37,.9); border-bottom: 1px solid var(--border); flex-wrap: wrap; backdrop-filter: blur(6px); }
.topbar h1 { margin: 0; font-size: 17px; letter-spacing: .01em; }
.topbar .meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 12px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--border); white-space: nowrap; }
.badge.green { background: rgba(87,242,135,.14); color: var(--green); border-color: transparent; }
.badge.red { background: rgba(237,66,69,.14); color: var(--red); border-color: transparent; }
.badge.yellow { background: rgba(254,231,92,.14); color: var(--yellow); border-color: transparent; }

main { flex: 1; min-height: 0; width: 100%; max-width: 1500px; margin: 0 auto; padding: 12px; display: flex; flex-direction: column; overflow: auto; }
main > section { width: 100%; }
#screen-game { flex: 1; min-height: 0; display: flex; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
h2 { margin: 0 0 8px; font-size: 20px; }
h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
img[src=""] { visibility: hidden; }

/* ---------- game layout: desktop = main area + right sidebar ---------- */
.glayout { display: flex; gap: 12px; width: 100%; min-height: 0; }
.gmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.gside { width: 330px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.players-card { overflow: auto; max-height: 42%; flex-shrink: 0; }
.chat-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- top strip (timer + word + round) ---------- */
.gtop { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 26px; min-width: 52px; text-align: center; color: var(--accent-2); }
.timer.low { color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.word-area { flex: 1; min-width: 0; }
.word-display { font-family: ui-monospace, 'Cascadia Mono', monospace; font-size: 22px; letter-spacing: 4px; text-align: center; padding: 2px 0 8px; white-space: nowrap; overflow-x: auto; }
.progress { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s linear; }
.round-badge { white-space: nowrap; }

/* ---------- canvas ---------- */
.canvas-flex { flex: 1; min-height: 0; display: flex; }
/* width driven by available viewport height so the board is as big as fits, ratio preserved */
.canvas-box { position: relative; margin: auto; aspect-ratio: 4/3; width: min(100%, calc((100dvh - 240px) * 4 / 3)); }
.canvas-wrap { position: absolute; inset: 0; background: #fff; border-radius: 12px; overflow: hidden; touch-action: none; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.canvas-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(13,15,22,.88); color: #fff; text-align: center; padding: 16px; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.toolbar .color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); cursor: pointer; flex-shrink: 0; }
.toolbar .color.active { border-color: #fff; outline: 2px solid var(--accent); }
.toolbar .size { width: 32px; height: 32px; border-radius: 8px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border); flex-shrink: 0; }
.toolbar .size.active { border-color: var(--accent); }
.toolbar .size i { display: block; border-radius: 50%; background: #fff; }
.word-choices { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.word-choices button { font-size: 18px; padding: 14px 22px; }

/* ---------- players ---------- */
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.players li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--panel-2); border-radius: 10px; border: 1px solid transparent; }
.players li.me { border-color: var(--accent); }
.players li.off { opacity: .45; }
.players li.drawing { border-color: var(--yellow); }
.players li.guessed { background: rgba(87,242,135,.12); }
.players img { width: 30px; height: 30px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.players .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.players .score { font-weight: 700; color: var(--yellow); font-variant-numeric: tabular-nums; }

/* ---------- chat ---------- */
.log { flex: 1; min-height: 0; overflow-y: auto; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.log div { padding: 5px 9px; border-radius: 8px; background: var(--panel-2); word-break: break-word; }
.log .sys { background: transparent; color: var(--green); font-style: italic; padding: 2px 9px; }
.log .muted { color: var(--muted); }
.chat-card form { display: flex; gap: 6px; margin-bottom: 8px; }
.chat-card form button { padding: 10px 14px; }

/* ---------- lobby ---------- */
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.big-number { font-size: 56px; font-weight: 800; line-height: 1.1; margin: 6px 0; color: var(--accent-2); }

/* ---------- traitor ---------- */
.role-card { padding: 16px; border-radius: var(--radius); text-align: center; border: 2px solid var(--border); background: var(--panel); flex-shrink: 0; }
.role-card.traitor { border-color: var(--red); background: linear-gradient(180deg, rgba(237,66,69,.12), var(--panel)); }
.role-card.innocent { border-color: var(--green); background: linear-gradient(180deg, rgba(87,242,135,.1), var(--panel)); }
.role-card.detective { border-color: var(--accent); background: linear-gradient(180deg, rgba(88,101,242,.14), var(--panel)); }
.role-card .role { font-size: 26px; font-weight: 800; }
.role-card .hint { color: var(--muted); margin-top: 6px; font-size: 12.5px; }
.phase-banner { padding: 12px 16px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.phase-banner.night { background: linear-gradient(135deg, #141a3a, #101326); }
.phase-banner.vote { background: linear-gradient(135deg, #3a2a14, #241a0e); }
.phase-banner.day { background: linear-gradient(135deg, #1f3a2a, #12241a); }
.phase-banner .title { font-size: 17px; font-weight: 700; }
.phase-banner .sub { color: var(--muted); font-size: 12.5px; }
.tr-board { flex: 1; min-height: 0; overflow: auto; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.pcard { background: var(--panel-2); border: 2px solid transparent; border-radius: 12px; padding: 12px 8px; text-align: center; cursor: default; position: relative; }
.pcard img { width: 46px; height: 46px; border-radius: 50%; background: var(--border); }
.pcard .n { margin-top: 6px; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .sub { font-size: 11.5px; color: var(--muted); }
.pcard.dead { opacity: .4; filter: grayscale(1); }
.pcard.dead::after { content: '☠️'; position: absolute; top: 6px; right: 8px; }
.pcard.selectable { cursor: pointer; }
.pcard.selectable:hover { border-color: var(--accent-2); }
.pcard.selected { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(254,231,92,.15); }
.pcard.traitor { border-color: var(--red); }
.pcard .votes { position: absolute; top: 6px; left: 8px; background: var(--yellow); color: #000; font-weight: 700; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.pcard .off { position: absolute; bottom: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.feed { overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.feed div { padding: 5px 8px; background: var(--panel-2); border-radius: 8px; }
.feed .ghost { color: var(--muted); font-style: italic; }
#tr-log { flex-shrink: 1; max-height: 38%; }
#tr-chat { flex: 1; }
#tr-action { color: var(--muted); margin-bottom: 10px; font-size: 14px; }
#tr-buttons { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- results ---------- */
.podium { list-style: none; margin: 0; padding: 0; }
.podium li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel-2); margin-bottom: 8px; }
.podium li:first-child { background: linear-gradient(90deg, rgba(254,231,92,.22), var(--panel-2)); border: 1px solid var(--yellow); }
.podium .place { font-size: 24px; width: 40px; text-align: center; }
.podium img { width: 38px; height: 38px; border-radius: 50%; }
.podium .name { flex: 1; min-width: 0; font-weight: 600; }
.podium .note { color: var(--muted); font-size: 12px; font-weight: 400; }
.podium .score { color: var(--yellow); font-weight: 700; white-space: nowrap; }

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,.4); }

/* =================================================================
   MOBILE (< 900px): one column, ordered for thumbs —
   word/timer → canvas → tools → guess+chat → players chips
   ================================================================= */
@media (max-width: 899px) {
  main { padding: 8px; overflow: auto; }
  #screen-game { display: block; }
  .glayout { display: flex; flex-direction: column; gap: 10px; }
  .gmain, .gside { display: contents; }

  .gtop { order: 1; padding: 8px 10px; gap: 10px; }
  .timer { font-size: 21px; min-width: 40px; }
  .word-display { font-size: 17px; letter-spacing: 3px; padding-bottom: 6px; }
  .canvas-flex { order: 2; display: block; }
  .canvas-box { position: relative; width: 100%; height: auto; inset: auto; }
  .toolbar { order: 3; overflow-x: auto; flex-wrap: nowrap; }
  .chat-card { order: 4; min-height: 0; }
  .chat-card .log { max-height: 30vh; min-height: 96px; }
  .players-card { order: 5; max-height: none; }
  .players { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  .players li { flex-direction: column; min-width: 74px; padding: 8px 6px; gap: 4px; text-align: center; flex-shrink: 0; }
  .players .name { font-size: 11.5px; max-width: 70px; }
  .players img { width: 34px; height: 34px; }

  /* traitor ordering: banner → role → board → private info → chat */
  .tr .phase-banner { order: 1; }
  .tr .role-card { order: 2; padding: 10px 12px; }
  .tr .role-card .role { font-size: 20px; }
  .tr .role-card .hint { font-size: 11.5px; }
  .tr .tr-board { order: 3; overflow: visible; }
  .tr .info-card { order: 4; }
  .tr .chat-card { order: 5; }
  .tr #tr-log { max-height: 20vh; }
  .tr #tr-chat { max-height: 24vh; flex: none; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .pcard img { width: 38px; height: 38px; }

  .lobby-grid { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 15px; }
  .topbar .meta { font-size: 11.5px; gap: 8px; }
}

/* very small phones */
@media (max-width: 380px) {
  .word-display { font-size: 15px; letter-spacing: 2px; }
  .word-choices button { font-size: 15px; padding: 10px 14px; }
}

/* Secret Word */
.sw-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 260px; text-align: center; }
.sw-label { font-size: 19px; font-weight: 700; }
.sw-tiles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tile { width: 44px; height: 54px; border-radius: 10px; background: var(--panel-2); border: 2px solid var(--border); display: grid; place-items: center; font-size: 26px; font-weight: 800; text-transform: uppercase; }
.tile.show { background: rgba(88,101,242,.22); border-color: var(--accent); animation: tilepop .25s ease; }
.tile.space { background: transparent; border-color: transparent; width: 20px; }
@keyframes tilepop { from { transform: scale(.6); } to { transform: scale(1); } }
@media (max-width: 899px) { .sw-stage { order: 2; min-height: 180px; } .tile { width: 34px; height: 42px; font-size: 20px; } }