* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #0f0f23;
  --surface: #1a1a3e;
  --surface2: #252550;
  --text: #e0e0f0;
  --text2: #8888aa;
  --primary: #e94560;
  --primary-hover: #ff6b81;
  --accent: #2E86AB;
  --gold: #F0C040;
  --green: #3BB273;
  --radius: 12px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

.screen { display:flex; min-height:100vh; }
button { cursor:pointer; border:none; font-family:inherit; }

/* Landing */
#landing { justify-content:center; align-items:center; flex-direction:column; }
.landing-content { text-align:center; max-width:400px; width:90%; }
.title {
  font-size: clamp(3rem, 12vw, 6rem); font-weight:900;
  background: linear-gradient(135deg, var(--gold), var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing: 0.1em; margin-bottom:0;
}
.subtitle {
  font-size: clamp(1.2rem, 4vw, 2rem); color:var(--accent);
  letter-spacing: 0.5em; font-weight:300; margin-top:-0.5rem;
}
.tagline { color:var(--text2); margin:1rem 0 2rem; font-size:0.95rem; }
.landing-form { display:flex; flex-direction:column; gap:12px; align-items:center; }
#playerName, #roomCode {
  width:100%; max-width:300px; padding:12px 16px; border-radius:var(--radius);
  border:1px solid var(--surface2); background:var(--surface);
  color:var(--text); font-size:1rem; text-align:center;
}
.landing-buttons { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.join-input { display:flex; gap:8px; align-items:center; max-width:300px; }
.rooms-list { margin-top:2rem; color:var(--text2); font-size:0.85rem; }

/* Reconnect hint */
.reconnect-hint {
  margin-top: 1.5rem; padding: 10px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--gold);
  font-size: 0.85rem; color: var(--text); display: flex; gap: 8px;
  align-items: center; justify-content: center; flex-wrap: wrap;
}
.reconnect-hint strong { color: var(--gold); letter-spacing: 0.1em; }

/* Buttons */
.btn {
  padding:10px 24px; border-radius:var(--radius); font-size:1rem; font-weight:600;
  transition:all 0.2s;
}
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); }
.btn-secondary { background:var(--surface2); color:var(--text); }
.btn-secondary:hover { background:#3a3a6a; }
.btn-large { padding:14px 32px; font-size:1.1rem; width:100%; }
.btn-small { padding:6px 14px; font-size:0.8rem; }

/* Lobby */
#lobby { justify-content:center; align-items:center; }
.lobby-content { text-align:center; max-width:500px; width:90%; }
.room-code { font-size:1.2rem; margin:1rem 0; color:var(--text2); }
.room-code strong { color:var(--gold); font-size:2rem; letter-spacing:0.3em; }
.lobby-players { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:1.5rem 0; }
.lobby-player {
  background:var(--surface); padding:12px 20px; border-radius:var(--radius);
  display:flex; align-items:center; gap:10px;
}
.lobby-player .dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.waiting-msg { color:var(--accent); font-size:0.95rem; margin:0.5rem 0; animation:pulse 2s infinite; }
.player-count { color:var(--text2); font-size:0.85rem; }
@keyframes pulse { 0%,100%{opacity:0.6;} 50%{opacity:1;} }

/* Game */
#game { flex-direction:column; height:100vh; }
.game-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; background:var(--surface);
  border-bottom:1px solid var(--surface2);
}
.game-title { font-weight:900; font-size:1.2rem; color:var(--gold); }
.game-info { color:var(--text2); font-size:0.85rem; flex:1; text-align:center; }
.btn-toggle-panel {
  background: var(--surface2); color: var(--text); border: none;
  width: 32px; height: 32px; border-radius: 8px; font-size: 1.1rem;
  cursor: pointer; display: none; align-items:center; justify-content:center;
  transition: all 0.2s;
}
.btn-toggle-panel:hover { background: #3a3a6a; }
.btn-toggle-panel.panel-hidden { opacity: 0.5; }
/* Show toggle on mobile, hide on desktop */
@media (max-width: 900px) {
  .btn-toggle-panel { display: flex; }
}
/* Collapsed side panel */
.side-panel.collapsed {
  width: 0; min-width: 0; overflow: hidden; padding: 0;
  border: none; flex: 0;
}

.game-main {
  display:flex; gap:0; flex:1; overflow:hidden;
}
.board-container { flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; }
#boardCanvas { width:100%; height:100%; }
.side-panel {
  width:340px; min-width:340px; background:var(--surface);
  border-left:1px solid var(--surface2);
  display:flex; flex-direction:column; overflow-y:auto;
  padding:12px;
}
.panel-section { margin-bottom:12px; }
.panel-section h3 {
  font-size:0.8rem; color:var(--text2); text-transform:uppercase;
  letter-spacing:0.1em; margin-bottom:6px;
}

/* Player list */
.player-list { display:flex; flex-direction:column; gap:4px; }
.player-item {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-radius:8px; background:var(--surface2); font-size:0.9rem;
}
.player-item .dot { width:10px; height:10px; border-radius:50%; }
.player-item .money { margin-left:auto; color:var(--gold); font-weight:600; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.player-item .money-kmf { color:var(--text2); font-weight:400; font-size:0.7rem; }
.player-item.eliminated { opacity:0.4; text-decoration:line-through; }
.player-item.disconnected { opacity:0.5; }
.player-item.disconnected .dot { background:#555 !important; }
.player-item.disconnected .money { color:var(--text2); }
.player-item.active-turn { outline:2px solid var(--primary); }

/* Dice */
.dice-section { text-align:center; }
.dice-display {
  display:flex; gap:16px; justify-content:center; margin:10px 0; font-size:3rem;
}
.dice-normal, .dice-custom {
  width:80px; height:80px; display:flex; align-items:center; justify-content:center;
  background:var(--surface2); border-radius:12px; font-size:2.5rem;
  transition:transform 0.3s;
}
.dice-rolling { animation: shake 0.3s infinite; }
@keyframes shake {
  0%,100% { transform:rotate(0deg); }
  25% { transform:rotate(-10deg); }
  75% { transform:rotate(10deg); }
}

/* Actions */
#actionsContainer { display:flex; flex-direction:column; gap:6px; }
.action-btn {
  padding:8px 12px; border-radius:8px; text-align:left;
  transition:all 0.2s;
}
.action-buy { background:#2d4a2d; color:#7dda7d; }
.action-buy:hover { background:#3d5a3d; }
.action-build { background:#4a3d2d; color:#ddaa7d; }
.action-build:hover { background:#5a4d3d; }
.action-skip { background:#3d2d2d; color:#dd7d7d; }
.action-skip:hover { background:#4d3d3d; }

/* Log */
.log-section { min-height:80px; }
.game-log {
  font-size:0.78rem; color:var(--text2); max-height:140px;
  overflow-y:auto; display:flex; flex-direction:column; gap:2px;
}
.game-log .log-entry { padding:2px 5px; border-radius:4px; background:rgba(255,255,255,0.03); }

/* Chat */
.chat-section { border-top:1px solid var(--surface2); padding-top:8px; }
.chat-messages {
  font-size:0.78rem; max-height:120px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px; margin-bottom:4px;
}
.chat-msg { padding:2px 5px; border-radius:4px; background:rgba(255,255,255,0.04); }
.chat-msg.chat-bot { opacity:0.6; font-style:italic; }
.chat-sender { color:var(--accent); font-weight:600; }
.chat-input-row { display:flex; gap:4px; align-items:center; }
.chat-input-row input {
  flex:1; padding:6px 10px; border-radius:8px; border:1px solid var(--surface2);
  background:var(--surface2); color:var(--text); font-size:0.8rem;
}
.chat-input-row input::placeholder { color:var(--text2); }
.chat-input-row .btn { padding:6px 12px; font-size:0.75rem; }

/* Card modal */
.modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.7); display:flex;
  align-items:center; justify-content:center; z-index:100;
}
.modal-card {
  background:var(--surface); padding:30px; border-radius:var(--radius);
  max-width:400px; text-align:center; border:2px solid var(--gold);
}
.modal-card h2 { margin-bottom:10px; }
.modal-card p { margin:10px 0; line-height:1.5; }

/* Property detail tooltip */
.prop-tooltip {
  position:fixed; background:var(--surface); border:1px solid var(--surface2);
  border-radius:8px; padding:10px; font-size:0.85rem;
  z-index:50; pointer-events:none; min-width:160px;
}
.prop-tooltip .prop-name { font-weight:600; }
.prop-tooltip .prop-price { color:var(--gold); }
.prop-tooltip .prop-rent { color:var(--text2); }

/* Responsive */
@media (max-width: 768px) {
  .game-main { flex-direction:column; }
  .side-panel {
    width: 100%;
    min-width: auto;
    border-left: none;
    border-top: 1px solid var(--surface2);
    max-height: 40vh;
    overflow-y: auto;
    padding: 8px;
  }
  .board-container {
    height: 60vh;
    min-height: 300px;
  }
  .game-header { padding: 8px 12px; font-size: 0.9rem; }
  .lobby-content { max-width: 100%; padding: 0 10px; }
  .landing-content { max-width: 100%; padding: 0 15px; }
  .dice-display { font-size: 2rem; }
  .dice-normal, .dice-custom { width: 60px; height: 60px; font-size: 2rem; }
}

@media (max-width: 480px) {
  .board-container { height: 50vh; min-height: 250px; }
  .side-panel { max-height: 45vh; }
  .title { font-size: clamp(2rem, 10vw, 3rem); }
  .subtitle { font-size: clamp(0.8rem, 3vw, 1.2rem); }
  .btn-large { padding: 12px 24px; font-size: 1rem; }
  .lobby-player { padding: 8px 14px; font-size: 0.85rem; }
}