* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0a0a1a;
  color: #ccc;
  font-family: monospace;
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
}
#app { max-width: 480px; margin: 0 auto; padding: 0.5rem; }

#join-screen { text-align: center; padding-top: 3rem; }
#join-screen h1 { color: #e94560; font-size: 2rem; margin-bottom: 1.5rem; }
#join-screen input {
  display: block; width: 100%; max-width: 240px; margin: 0.5rem auto;
  padding: 0.7rem; font-size: 1.2rem; font-family: monospace;
  background: #1a1a2e; border: 1px solid #334; color: #fff;
  border-radius: 4px; text-align: center;
}
#room-input { text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.3em; }
#join-btn {
  margin-top: 1rem; padding: 0.7rem 2rem; font-size: 1.1rem;
  background: #4fc3f7; color: #0a0a1a; border: none; border-radius: 4px;
  cursor: pointer; font-family: monospace; font-weight: bold;
}
#join-error { color: #e94560; margin-top: 0.5rem; }
.hidden { display: none !important; }

#lobby-screen { text-align: center; padding-top: 2rem; }
#phone-lobby-players { margin-top: 1rem; }

#reconnect-screen { text-align: center; padding-top: 2rem; }
#reconnect-list { margin-top: 1rem; }
.reconnect-btn {
  display: block; width: 80%; margin: 0.5rem auto; padding: 0.6rem;
  background: #1a1a2e; border: 1px solid #4fc3f7; color: #4fc3f7;
  font-family: monospace; font-size: 1rem; cursor: pointer; border-radius: 4px;
}

#ctrl-top {
  background: #1a1a2e; padding: 0.5rem; border-radius: 4px; margin-bottom: 0.5rem;
}
#ctrl-name { font-size: 1.1rem; font-weight: bold; }
#ctrl-stats { display: flex; gap: 1rem; margin-top: 0.3rem; }
#ctrl-attrs { display: flex; gap: 0.8rem; margin-top: 0.2rem; font-size: 0.85rem; color: #aab; }
#ctrl-points { margin-top: 0.2rem; color: #ffd700; }
#ctrl-turn-indicator {
  margin-top: 0.3rem; padding: 0.3rem; border-radius: 4px;
  text-align: center; font-weight: bold;
}
#ctrl-turn-indicator.your-turn { background: #1b5e20; color: #66bb6a; }
#ctrl-turn-indicator.waiting { background: #1a1a2e; color: #888; }

#ctrl-middle { margin-bottom: 0.5rem; }
#ctrl-middle h3 { font-size: 0.85rem; color: #889; margin-bottom: 0.3rem; }
#ctrl-hand { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hand-card {
  background: #1a2a3a; border: 1px solid #445; border-radius: 4px;
  padding: 0.4rem 0.6rem; font-size: 0.85rem; cursor: pointer; flex: 0 0 auto;
  color: #ccc; font-family: monospace;
}
.hand-card:active { background: #2a3a4a; }
.hand-card.gear { border-color: #4a6a3a; }
.hand-card.costume { border-color: #6a4a6a; }
.hand-card.ability { border-color: #3a4a6a; }
.hand-card:disabled { opacity: 0.5; cursor: default; }
#ctrl-gear { font-size: 0.85rem; color: #aab; }
.gear-line { padding: 0.1rem 0; }
#ctrl-items { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.item-btn {
  background: #2a1a3a; border: 1px solid #9c27b0; border-radius: 4px;
  padding: 0.4rem 0.6rem; font-size: 0.85rem; color: #ccc;
  cursor: pointer; font-family: monospace;
}
.item-btn:disabled { opacity: 0.5; cursor: default; }

#ctrl-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.action-btn {
  padding: 0.6rem 0.8rem; background: #1a2a3a; border: 1px solid #4fc3f7;
  color: #4fc3f7; border-radius: 4px; font-family: monospace; font-size: 0.9rem;
  cursor: pointer; flex: 1 1 auto; min-width: 45%; text-align: center;
}
.action-btn:active { background: #2a3a4a; }
.action-btn:disabled { opacity: 0.4; cursor: default; border-color: #445; color: #667; }

#ctrl-prompt {
  background: #2a1a1a; border: 1px solid #e94560; border-radius: 4px;
  padding: 0.5rem; margin-bottom: 0.5rem;
}
.prompt-option {
  display: block; width: 100%; margin: 0.3rem 0; padding: 0.5rem;
  background: #1a1a2e; border: 1px solid #e94560; color: #e94560;
  border-radius: 4px; font-family: monospace; cursor: pointer;
}

#ctrl-log { max-height: 200px; overflow-y: auto; }
#ctrl-log h3 { font-size: 0.85rem; color: #889; }
#ctrl-log-entries { font-size: 0.8rem; color: #778; }
.log-entry { padding: 0.1rem 0; border-bottom: 1px solid #1a1a2e; }

#disconnected-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8); display: flex; align-items: center;
  justify-content: center; color: #ffa726; font-size: 1.2rem; z-index: 100;
}

.move-list { max-height: 300px; overflow-y: auto; }
.move-option {
  display: block; width: 100%; padding: 0.5rem; margin: 0.2rem 0;
  background: #1a2a1a; border: 1px solid #66bb6a; color: #66bb6a;
  border-radius: 4px; font-family: monospace; font-size: 0.9rem;
  cursor: pointer; text-align: left;
}
.move-option:active { background: #2a3a2a; }