:root {
  --bg: #0a0e1a;
  --surface: #141a2e;
  --surface2: #1c2440;
  --primary: #2ed573;
  --primary-glow: rgba(46, 213, 115, 0.3);
  --danger: #ff4757;
  --danger-glow: rgba(255, 71, 87, 0.3);
  --text: #e8e0f0;
  --text2: #8892b0;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  touch-action: manipulation;
}

#app { height: 100%; display: flex; flex-direction: column; }
.screen { display: none; flex-direction: column; align-items: center; padding: 20px; height: 100%; overflow-y: auto; }
.screen.active { display: flex; }

/* HOME */
.logo { text-align: center; margin: 30px 0 20px; }
.logo-icon { font-size: 64px; margin-bottom: 8px; }
.logo h1 { font-size: 32px; color: var(--primary); letter-spacing: 2px; }
.subtitle { color: var(--text2); font-size: 14px; margin-top: 4px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 360px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.05);
}

input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  margin-bottom: 10px;
}
input:focus { border-color: var(--primary); }

.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #000; }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid rgba(255,255,255,0.1); }
.btn-large { padding: 16px; font-size: 18px; max-width: 360px; width: 100%; margin-top: 12px; }
.btn-icon { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 8px; }

.divider { text-align: center; margin: 14px 0; color: var(--text2); font-size: 13px; position: relative; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: rgba(255,255,255,0.1); }
.divider::before { left: 0; }
.divider::after { right: 0; }

.error { color: var(--danger); font-size: 13px; margin-top: 8px; text-align: center; min-height: 18px; }
.hint { color: var(--text2); font-size: 14px; margin-top: 12px; text-align: center; }

/* LOBBY */
.header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.header h2 { font-size: 18px; }
.code-badge { background: var(--primary); color: #000; padding: 2px 10px; border-radius: 8px; font-weight: 700; letter-spacing: 2px; font-size: 16px; }

.player-list { list-style: none; }
.player-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.player-list li:last-child { border: none; }
.player-list img { width: 36px; height: 36px; border-radius: 50%; background: var(--surface2); }
.player-list .host-badge { font-size: 11px; background: var(--primary); color: #000; padding: 1px 6px; border-radius: 6px; font-weight: 600; }

/* GAME SCREEN */
#screen-game { padding: 8px; gap: 4px; justify-content: space-between; }

/* Players bar */
.players-bar {
  display: flex;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  padding: 4px 0;
  flex-shrink: 0;
}
.player-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  padding: 6px 4px;
  border-radius: 10px;
  background: var(--surface);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  flex-shrink: 0;
}
.player-slot.active-turn { border-color: var(--primary); box-shadow: 0 0 12px var(--primary-glow); }
.player-slot.is-me { background: var(--surface2); }
.player-slot img { width: 32px; height: 32px; border-radius: 50%; }
.player-slot .pname { font-size: 11px; margin-top: 2px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65px; }
.player-slot .organ-count { font-size: 10px; color: var(--primary); font-weight: 700; margin-top: 1px; }

/* Bodies area - where organs are displayed */
.bodies-area {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.body-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border-radius: 10px;
  min-height: 60px;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.body-row.is-me { background: var(--surface2); border-color: rgba(46,213,115,0.2); }
.body-row.target-highlight { border-color: var(--danger); cursor: pointer; }

.body-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}
.body-label img { width: 28px; height: 28px; border-radius: 50%; }
.body-label span { font-size: 10px; color: var(--text2); margin-top: 2px; }

.organs-container {
  display: flex;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}

/* Organ cards in body */
.organ-card {
  width: 52px;
  height: 70px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  border: 2px solid rgba(255,255,255,0.1);
  transition: transform 0.2s;
  cursor: default;
}
.organ-card.target-organ { cursor: pointer; border-color: var(--danger); animation: pulse-border 1s infinite; }

@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 4px var(--danger-glow); } 50% { box-shadow: 0 0 12px var(--danger-glow); } }

.organ-card .organ-status {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 14px;
  background: var(--bg);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.organ-empty {
  width: 52px;
  height: 70px;
  border-radius: 8px;
  border: 2px dashed rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 20px;
}

/* Organ colors */
.organ-red { background: linear-gradient(135deg, #3a1520, #5a1a2a); border-color: #ff4757; }
.organ-blue { background: linear-gradient(135deg, #151a3a, #1a2a5a); border-color: #3742fa; }
.organ-green { background: linear-gradient(135deg, #153a20, #1a5a2a); border-color: #2ed573; }
.organ-yellow { background: linear-gradient(135deg, #3a3515, #5a4a1a); border-color: #ffa502; }
.organ-wild { background: linear-gradient(135deg, #2a1540, #40153a); border-color: #a855f7; }

/* Hand */
.hand-area {
  width: 100%;
  flex-shrink: 0;
  padding: 4px 0;
}

.hand-label {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.hand-cards {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.hand-card {
  width: 72px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.15);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.hand-card:active { transform: scale(0.95); }
.hand-card.selected { transform: translateY(-8px); border-color: #fff; box-shadow: 0 4px 20px rgba(255,255,255,0.2); }
.hand-card .card-icon { font-size: 28px; }
.hand-card .card-label { font-size: 9px; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.hand-card .card-type { font-size: 8px; color: rgba(255,255,255,0.6); margin-top: 1px; }

/* Card type colors */
.hand-card.type-organ { background: linear-gradient(135deg, var(--surface), var(--surface2)); }
.hand-card.type-virus { background: linear-gradient(135deg, #2a0a0e, #3a1520); border-color: rgba(255,71,87,0.4); }
.hand-card.type-medicine { background: linear-gradient(135deg, #0a2a15, #153a20); border-color: rgba(46,213,115,0.4); }
.hand-card.type-treatment { background: linear-gradient(135deg, #1a0a3a, #2a1540); border-color: rgba(168,85,247,0.4); }

/* Action buttons */
.action-bar {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  flex-shrink: 0;
  padding: 4px 0;
}
.action-bar .btn { font-size: 13px; padding: 10px; }

/* Turn indicator */
.turn-banner {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 6px;
  border-radius: 8px;
  width: 100%;
  flex-shrink: 0;
}
.turn-banner.my-turn { background: rgba(46,213,115,0.15); color: var(--primary); }
.turn-banner.other-turn { background: rgba(255,255,255,0.05); color: var(--text2); }

/* Game over overlay */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.overlay.active { display: flex; }
.overlay h2 { font-size: 28px; margin-bottom: 8px; }
.overlay .winner-name { font-size: 22px; color: var(--primary); font-weight: 700; margin-bottom: 20px; }
.overlay .btn { max-width: 300px; margin-top: 8px; }

/* Toast */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--surface2);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  z-index: 200;
  transition: transform 0.3s;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.1);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Selection mode hint */
.select-hint {
  background: rgba(255,71,87,0.15);
  color: var(--danger);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  width: 100%;
  animation: pulse-bg 1.5s infinite;
}
@keyframes pulse-bg { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* Discard mode */
.hand-card.discard-selected { opacity: 0.5; border-color: var(--danger); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }