* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0e1a;
  color: #fff;
  overflow: hidden;
  min-height: 100vh;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body {
  background: radial-gradient(ellipse at top, #1a2138 0%, #0a0e1a 60%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.view { display: none; flex: 1; flex-direction: column; height: 100vh; }
.view.active { display: flex; }

/* HOME */
.header {
  padding: 20px 20px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { font-size: 18px; font-weight: 700; letter-spacing: 0.05em; color: #7dd3fc; }
.version { font-size: 11px; color: #5a6580; letter-spacing: 0.2em; }

.home {
  flex: 1;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.name-card, .code-card {
  background: #15151a;
  border: 1px solid #2a2a33;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.name-card { text-align: left; }
.name-card label {
  display: block; font-size: 10px; color: #6b6b7a;
  text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 8px;
}
.name-card input, .join-row input, .guess-bar input {
  width: 100%; background: #0f0f13; border: 1px solid #2a2a33;
  border-radius: 8px; padding: 12px; color: white; font-size: 15px;
  font-family: inherit; outline: none;
}
.name-card input:focus, .join-row input:focus, .guess-bar input:focus {
  border-color: #0ea5e9;
}

.code-label {
  font-size: 10px; color: #6b6b7a;
  text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 12px;
}
.code-value {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 40px; letter-spacing: 8px; font-weight: 700;
  color: #7dd3fc; margin-bottom: 12px; user-select: all;
}

.btn-primary, .btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary { background: #0ea5e9; color: white; }
.btn-primary:hover { background: #0284c7; }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { background: #1e3a5f; color: #5a6580; cursor: not-allowed; }
.btn-ghost { background: transparent; color: #c7ccd9; border: 1px solid #2a2a33; }
.btn-ghost:hover:not(:disabled) { background: #15151a; }
.btn-ghost:disabled { color: #4a4a55; cursor: not-allowed; }
.btn-ghost.small, .btn-primary.small { padding: 8px 14px; font-size: 13px; }

.divider {
  text-align: center; color: #4a4a55; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.2em; margin: 4px 0;
}

.join-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.join-row input {
  text-align: center; letter-spacing: 6px; text-transform: uppercase;
  font-family: 'SF Mono', Menlo, monospace; font-size: 16px;
}

.flash {
  text-align: center; color: #0ea5e9; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.15em; min-height: 16px;
}

/* GAME */
.game-header {
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #1f1f28;
}
.game-status {
  font-size: 11px; color: #6ee7b7; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em;
}
.game-code {
  font-family: 'SF Mono', Menlo, monospace;
  color: #7dd3fc; font-size: 14px; letter-spacing: 3px; font-weight: 700;
}
.btn-icon {
  background: transparent; border: 1px solid #2a2a33; color: #c7ccd9;
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; font-size: 14px;
}
.btn-icon:hover { background: #15151a; }

.scoreboard {
  padding: 10px 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center;
}
.player {
  background: #15151a; border: 1px solid #2a2a33; border-radius: 10px;
  padding: 8px 10px; text-align: center;
}
.player.active { border-color: #0ea5e9; background: #0c1725; }
.player-name { font-size: 11px; color: #6b6b7a; text-transform: uppercase; letter-spacing: 0.1em; }
.player-score { font-size: 20px; font-weight: 700; color: #fff; margin-top: 2px; }
.round-info {
  font-size: 10px; color: #6b6b7a;
  text-transform: uppercase; letter-spacing: 0.15em;
  text-align: center;
}

.word-bar {
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #1f1f28;
}
.word-label {
  font-size: 16px; font-weight: 700;
  color: #7dd3fc; letter-spacing: 3px; text-transform: uppercase;
}
.word-label.waiting { color: #6b6b7a; font-size: 13px; text-transform: none; letter-spacing: normal; }
.timer {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 20px; font-weight: 700; color: #f59e0b;
  min-width: 40px; text-align: right;
}
.timer.urgent { color: #ef4444; animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }

.canvas-wrap {
  flex: 1;
  position: relative;
  margin: 8px 16px;
  border: 1px solid #2a2a33;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
  min-height: 0;
}
#canvas {
  display: block;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.toolbar {
  padding: 8px 16px;
  display: flex; gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid #1f1f28;
}
.tool {
  background: #15151a; border: 2px solid #2a2a33;
  border-radius: 10px; padding: 8px 10px; font-size: 18px;
  cursor: pointer; color: white;
}
.tool.active { border-color: #0ea5e9; background: #0c1725; }
.tool.clear { font-size: 13px; padding: 8px 12px; margin-left: auto; }

.guess-bar {
  padding: 8px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  border-top: 1px solid #1f1f28;
}
.guess-bar input {
  background: #15151a;
}

.chat {
  padding: 6px 16px 12px;
  max-height: 80px;
  overflow-y: auto;
  display: flex; flex-direction: column-reverse;
  font-size: 12px;
  gap: 4px;
}
.chat-line { color: #c7ccd9; }
.chat-line.me { color: #7dd3fc; }
.chat-line.sys { color: #6ee7b7; font-style: italic; }
.chat-line.win { color: #fbbf24; font-weight: 600; }

@media (min-width: 640px) {
  .view { max-width: 640px; margin: 0 auto; }
}