:root { --bg: #0f1217; --fg: #f3f6fb; --muted:#98a2b3; --accent:#22c55e; --warn:#fbbf24; --bad:#334155; --card:#111827; --key:#1f2937; --key-fg:#e5e7eb; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--fg); }
.container{ max-width:560px; margin:0 auto; padding:16px; }
header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
h1{ font-size:24px; letter-spacing:4px; margin:0; }

/* Buttons */
.btn{ background:#2563eb; color:white; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; transition: all 0.2s ease; }
.btn:hover{ background:#1d4ed8; }
.btn-ghost{ background:transparent; color:#e5e7eb; border:1px solid #334155; }
.btn-ghost:hover{ background:#1f2937; border-color:#6b7280; }
.btn-icon{ background:var(--card); border:2px solid #4a9eff; border-radius:6px; padding:8px 10px; cursor:pointer; color:var(--muted); font-size:16px; transition: all 0.2s ease; min-width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
.btn-icon:hover{ background:#1f2937; border-color:var(--accent); color:var(--fg); }
.btn-icon:active{ transform: scale(0.95); }

/* Board and Tiles */
.board{ display:grid; grid-template-rows: repeat(6, 56px); grid-gap:8px; padding:8px; background:var(--card); border-radius:12px; }
.board.my-turn{ box-shadow: 0 0 0 3px var(--accent) inset; }
.hundred-timer{ margin:10px 0; padding:6px 10px; border-radius:8px; background:#1f2937; color:#f59e0b; font-weight:700; width:max-content; }
.row{ display:grid; grid-template-columns: repeat(5, 56px); grid-gap:8px; justify-content:center; align-items:center; }
.multiplayer .row{ grid-template-columns: repeat(5, 56px); justify-content: center; }

.tile{ width:56px; height:56px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:24px; background:#0b1220; border:1px solid #1f2a44; text-transform:uppercase; color: var(--fg); transition: all 0.2s ease; }
.tile.correct{ background: var(--accent); color:#052e16; border-color:transparent; }
.tile.present{ background: var(--warn); color:#3b2a03; border-color:transparent; }
.tile.absent{ background: var(--bad); color:#94a3b8; border-color:transparent; }
.tile.hint{ background: #0b1220; color: #6b7280; border: 2px solid #4a9eff; opacity: 0.8; }

/* Keyboard */
.keyboard{ margin-top:16px; display:grid; grid-template-rows: repeat(4, auto); grid-gap:8px; }
.krow{ display:flex; gap:8px; justify-content:center; }
.key{ background:var(--key); color:var(--key-fg); padding:12px 10px; border-radius:8px; cursor:pointer; user-select:none; font-weight:600; border:none; transition: all 0.1s ease-out; }
.key:hover{ background:#334155; }
.key.wide{ flex:0; text-transform:uppercase; padding:12px 20px; width: 120px; }
.key.wide { min-width: 120px; }
.key.hundred { width: 60px; font-size: 16px; background: var(--warn); color: #3b2a03; }
.key.correct{ background: var(--accent); color:#052e16; border-color:transparent; }
.key.present{ background: var(--warn); color:#3b2a03; border-color:transparent; }
.key.absent{ background: var(--bad); color:#94a3b8; border-color:transparent; }

/* Toast */
.toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:24px; padding:10px 14px; background:#1f2937; color:#e5e7eb; border:1px solid #334155; border-radius:8px; z-index:1000; }

/* Tabs and chat */
.tabs{ display:flex; align-items:center; gap:8px; margin:12px 0; }
.tab{ background:#1f2937; color:#e5e7eb; border:1px solid #334155; padding:6px 10px; border-radius:8px; cursor:pointer; }
.tab.active{ border-color: var(--accent); }
.chat{ background: var(--card); border:1px solid #1f2a44; border-radius: 10px; padding: 8px; }
.chat-messages{ height: 180px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.chat-input{ display:flex; gap:8px; margin-top:8px; }
.chat-input input{ flex:1; padding:8px; border:1px solid #334155; border-radius:8px; background:#0b1220; color:var(--fg); }

/* Modals */
.modal{ position:fixed; inset:0; display:block; z-index:1000; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.7); z-index:1001; }
.modal-card{ position:relative; max-width:560px; margin:10vh auto; background:#0b1220; border:1px solid #1f2a44; border-radius:12px; padding:16px; z-index:1002; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; }
.modal-head h3{ color:#e2e8f0; margin:0; }
.modal-body ul{ margin:8px 0 0; padding-left:18px; color:#cbd5e1; }
.modal-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* Legend styles in rules modal */
.tile.correct-legend,
.tile.present-legend,
.tile.absent-legend {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
}
.tile.correct-legend { background: var(--accent); color: #052e16; }
.tile.present-legend { background: var(--warn); color: #3b2a03; }
.tile.absent-legend { background: var(--bad); color: #94a3b8; }

/* Result bar */
.result-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; padding:10px 12px; background:var(--card); border:1px solid #1f2a44; border-radius:10px; }
.btn.secondary{ background:#334155; color:#e5e7eb; }

/* Row controls for bot game */
.row-controls{ display:flex; flex-direction:column; gap:4px; margin-right:8px; }
.word-control{ width:20px; height:20px; border:none; border-radius:4px; font-size:12px; cursor:pointer; }
.word-control.add-word{ background:#22c55e; color:#052e16; }
.word-control.remove-word{ background:#ef4444; color:#fee2e2; }
.word-control.dict-word{ background:#3b82f6; color:#dbeafe; }
.multiplayer .word-control{ display:none; }

/* Timers and scores styles */
.timers{ display:flex; justify-content:space-between; align-items:center; margin:16px 0; }
.player-stats{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--card); border-radius:8px; border:1px solid #1f2a44; }
.player-label{ margin-right:8px; opacity:.85; }
.timer{ font-family:monospace; font-size:16px; font-weight:600; padding:4px 8px; border-radius:4px; }
.score-user{ background:#22c55e; color:#052e16; }
.score-bot{ background:#3b82f6; color:#dbeafe; }
.tab{ user-select:none; }
.chat-messages div{ background:#0b1220; padding:6px 8px; border-radius:6px; border:1px solid #1f2a44; }

/* Mobile optimizations */
@media (max-width: 768px) {
  .container{ padding:8px; max-width:100%; }
  .row{ grid-template-columns: auto repeat(5, 48px); }
  .tile{ width:48px; height:48px; font-size:20px; }
  .key{ padding:10px 8px; font-size:18px; }
  .key.wide, .key.action{ flex:0; font-size:14px; }
  .result-bar{ flex-direction:column; gap:8px; text-align:center; }
  .result-bar > div{ width:100%; }
  .modal-card{ margin:5vh 8px; padding:12px; }
  .krow{ gap:4px; }
  .board{ grid-gap:6px; padding:6px; }
  .row{ grid-gap:6px; }
}

/* Mode selector styles */
.mode-selector { margin-top: 2rem; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.mode-card { background: var(--card); border: 2px solid #4a9eff; border-radius: 12px; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s ease; }
.mode-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.mode-card[disabled] { opacity: 0.5; cursor: not-allowed; }
.mode-card[disabled]:hover { transform: none; border-color: #1f2a44; }
.mode-icon { font-size: 3rem; margin-bottom: 1rem; }
.mode-card h3 { color: var(--fg); margin: 0 0 0.5rem 0; font-size: 1.25rem; }
.mode-card p { color: var(--muted); margin: 0 0 1rem 0; font-size: 0.9rem; line-height: 1.4; }
.mode-btn { background: var(--accent); color: #052e16; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.mode-btn:hover:not(:disabled) { background: #16a34a; transform: translateY(-1px); }
.mode-btn:disabled { background: #334155; color: #6b7280; cursor: not-allowed; }

/* Rules section */
.rules-section { text-align: center; margin-top: 2rem; }
.rules-btn { background: transparent; color: var(--muted); border: 1px solid #334155; padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.rules-btn:hover { color: var(--fg); border-color: var(--accent); }

/* Multiplayer styles */
.mode-selection { text-align: center; padding: 2rem; }
.join-form { margin-top: 1rem; }
.join-form input { background: var(--card); border: 2px solid #4a9eff; border-radius: 8px; padding: 0.75rem; color: var(--fg); font-size: 1rem; width: 200px; margin-right: 0.5rem; text-align: center; letter-spacing: 2px; text-transform: uppercase; }
.join-form input:focus { outline: none; border-color: var(--accent); }
.waiting-screen { text-align: center; padding: 2rem; color: var(--fg); }
.room-info { background: var(--card); border: 2px solid #1f2a44; border-radius: 8px; padding: 1.5rem; margin: 2rem 0; display: inline-block; color: var(--fg); }
.room-info p { margin: 0.5rem 0; font-size: 1.1rem; color: var(--fg); }
.players-list { margin: 2rem 0; }
.player-item { background: var(--card); border: 2px solid #4a9eff; border-radius: 4px; padding: 0.75rem 1rem; margin: 0.5rem 0; display: inline-block; min-width: 200px; color: var(--fg); }
.waiting-message { color: var(--muted); font-style: italic; }
.game-screen { max-width: 600px; margin: 0 auto; }
.room-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding: 1rem; background: var(--card); border-radius: 8px; border: 2px solid #4a9eff; }
.room-code { font-weight: 600; color: var(--fg); }
.players-info { display: flex; align-items: center; gap: 1rem; }
.player-info { text-align: center; padding: 0.5rem 1rem; background: var(--card); border-radius: 6px; border: 2px solid #4a9eff; color: var(--fg); }
.player-info.current-turn { border-color: var(--accent); background: #0f1b0f; }
.player-name { display: block; font-weight: 600; color: var(--fg); }
.player-timer { display: block; font-size: 0.9rem; color: var(--muted); }
.vs { font-weight: bold; color: var(--accent); font-size: 1.2rem; }
.game-buttons { margin-top: 1rem; text-align: center; }

/* Toast styles */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; padding: 10px 14px; background: #1f2937; color: #e5e7eb; border: 1px solid #334155; border-radius: 8px; z-index: 1000; }
.toast-error { background: #7f1d1d; border-color: #dc2626; color: #fecaca; }
.toast-success { background: #14532d; border-color: #16a34a; color: #bbf7d0; }
.toast-warning { background: #78350f; border-color: #f59e0b; color: #fef3c7; }

/* Current player highlighting */
.player-stats.current-turn { background: rgba(34, 197, 94, 0.1); border: 1px solid var(--accent); border-radius: 8px; padding: 8px; }

/* Input group for copy/paste buttons */
.input-group { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.player-name-form { margin-bottom: 1.5rem; z-index: 100; position: relative; }
.player-name-form input { width: 100%; padding: 12px 16px; border: 2px solid #4a9eff; border-radius: 8px; background: var(--card); color: var(--text); font-size: 16px; text-align: center; margin-bottom: 0; }
.input-group input { margin-right: 0 !important; flex: 1; }
.btn-icon { background: var(--card); border: 2px solid #4a9eff; border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--muted); font-size: 16px; transition: all 0.2s ease; min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.btn-icon:hover { background: #1f2937; border-color: var(--accent); color: var(--fg); }
.btn-icon:active { transform: scale(0.95); }

/* Copy button in waiting info */
#waiting-info .btn-icon { margin-left: 8px; padding: 4px 6px; font-size: 14px; min-width: 28px; height: 28px; }
.player-name-form input:focus { outline: none; border-color: #66b3ff; box-shadow: 0 0 15px rgba(74, 158, 255, 0.5); }
.player-name-form { margin-bottom: 1.5rem; z-index: 100; position: relative; }

/* Room code display */
.room-code-display { text-align: center; margin: 20px 0; }
.room-code-display h4 { margin: 0 0 10px 0; color: var(--fg); }
.code-container { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--card); border: 2px solid var(--accent); border-radius: 8px; padding: 15px; margin: 10px 0; }
.room-code { font-family: monospace; font-size: 24px; font-weight: bold; color: var(--accent); letter-spacing: 2px; }

/* Waiting info */
.waiting-info { text-align: center; }
.waiting-message { color: var(--warn); font-weight: 600; margin-top: 15px; }

/* Join form */
.join-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid #334155; }
.input-group { display: flex; gap: 8px; margin-bottom: 10px; }
.input-group input { flex: 1; padding: 12px; border: 1px solid #334155; border-radius: 8px; background: var(--card); color: var(--fg); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.input-group input:focus { outline: none; border-color: var(--accent); }

/* Mode selection */
.mode-selection { text-align: center; }
.mode-selection .btn { width: 100%; margin-bottom: 15px; padding: 15px; font-size: 18px; font-weight: 600; }

/* Hidden input for focus */
#hidden-input { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }