@import url('https://googleapis.com');

:root {
  --bg-color: #fbfcfa;
  --panel-bg: #eee;
  --color-text: #1a1a1a;
  --color-correct: #6aaa64;
  --color-present: #c9b458;
  --color-absent: #787c7e;
  --color-fuzzy: #9c27b0;
  --color-tile-border: #d3d6da;
  --tile-bg: white;
  --key-bg: #e1e3e6;
}
body.dark-theme {
  --bg-color: #121212;
  --panel-bg: #2a2a2a;
  --color-text: #ffffff;
  --color-tile-border: #555;
  --tile-bg: #1e1e1e;
  --key-bg: #cccccc;
  --color-absent: #2a2a2a;
}

body, .key, .btn, .tile {
  font-family: 'Dancing Script', 'Comic Neue', 'Chalkboard SE', 'Comic Sans MS', cursive, sans-serif !important;
}

body.no-noodle-theme,
body.no-noodle-theme .key, 
body.no-noodle-theme .btn, 
body.no-noodle-theme .tile {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

body.cursive-noodle-theme,
body.cursive-noodle-theme .key, 
body.cursive-noodle-theme .btn, 
body.cursive-noodle-theme .tile {
  font-family: 'Dancing Script', cursive !important;
  letter-spacing: 0.5px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-color);
  color: var(--color-text);
  margin: 0;
  padding: 10px;
  min-height: 100vh;
  transition: background-color 0.2s, color 0.2s;
}
header { text-align: center; margin-bottom: 10px; }
h1 { margin: 5px 0; font-size: 2.2rem; color: var(--color-correct); }
.welcome-banner { font-weight: bold; font-size: 1.1rem; margin: 2px 0; color: var(--color-fuzzy); }
.subtitle { font-style: italic; color: #666; margin: 0; font-size: 0.95rem; }

.dashboard { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; background: var(--panel-bg); padding: 8px 15px; border-radius: 20px; margin-bottom: 10px; align-items: center; }
.language-panel { display: flex; flex-wrap: wrap; gap: 15px; font-weight: bold; background: var(--panel-bg); padding: 8px 20px; border-radius: 20px; margin-bottom: 15px; font-size: 0.9rem; justify-content: center; max-width: 500px; }
.lang-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }

.stats-bar { font-weight: bold; margin-bottom: 10px; font-size: 1.1rem; }
#board { display: grid; grid-gap: 5px; margin-bottom: 20px; }
.row { display: grid; grid-gap: 5px; }
.tile {
  width: 52px;
  height: 52px;
  border: 2px solid var(--color-tile-border);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
  background: var(--tile-bg);
}
.tile.filled { border-color: #878a8c; }
.tile.correct { background-color: var(--color-correct); border-color: var(--color-correct); color: white; }
.tile.present { background-color: var(--color-present); border-color: var(--color-present); color: white; }
.tile.fuzzy { background-color: var(--color-fuzzy); border-color: var(--color-fuzzy); color: white; }
.tile.absent { background-color: var(--color-absent); border-color: var(--color-absent); color: white !important; }

/* 💥 NEW BRIGHT RED CROSS-ACCENT FLASH KEY CLASS */
.tile.accent-wrong-slot { 
  background-color: #e02424; 
  border-color: #e02424; 
  color: white !important; 
}

#keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 500px; margin-bottom: 25px; }
.key-row { display: flex; justify-content: center; gap: 4px; }
.key { background-color: var(--key-bg); color: #1a1a1a; border: 0; border-radius: 4px; height: 48px; flex: 1; display: flex; justify-content: center; align-items: center; font-weight: bold; cursor: pointer; text-transform: uppercase; user-select: none; }
body.dark-theme .key { color: #121212; }
.key.wide { flex: 1.5; font-size: 0.85rem; }
.key.correct { background-color: var(--color-correct); color: white !important; }
.key.present { background-color: var(--color-present); color: white !important; }
.key.fuzzy { background-color: var(--color-fuzzy); color: white !important; }
.key.absent { background-color: var(--color-absent); color: #666 !important; }

/* 💥 KEYBOARD HIGHLIGHT FOR DUD ACCENTS */
.key.accent-wrong-slot { 
  background-color: #e02424; 
  color: white !important; 
}

#message-container { min-height: 40px; margin-bottom: 15px; text-align: center; }
#message { color: #e02424; font-weight: bold; font-size: 1.1rem; }
.btn { background-color: #2196F3; color: white; border: none; padding: 8px 16px; font-size: 0.95rem; font-weight: bold; border-radius: 4px; cursor: pointer; margin: 5px; display: inline-block; }
.btn:hover { background-color: #0b7dda; }
.hidden { display: none !important; }
.history-box { width: 100%; max-width: 400px; border-top: 2px dashed #ccc; padding-top: 15px; text-align: center; }
.history-title { font-weight: bold; margin-bottom: 10px; color: #555; }
.history-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 0; list-style: none; }
.history-item { padding: 4px 10px; border-radius: 12px; font-weight: bold; text-transform: uppercase; font-size: 0.9rem; color: white; }
.history-item.win { background-color: var(--color-correct); }
.history-item.loss { background-color: #e02424; }