@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');
 
/* ═══════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════ */
:root {
  --bg:          #0d1117;
  --bg-2:        #161b24;
  --bg-3:        #1e2636;
  --bg-4:        #253042;
 
  --gold:        #7bbcfe; 
  --gold-bright: rgba(157, 206, 255, 0.88);
  --gold-dim:    rgba(104, 161, 204, 0.48);
  --gold-glow:   rgba(100, 162, 201, 0.1);
 
  --cream:       #f0e8d5;
  --cream-dim:   #a89f8c;
  --muted:       #5a6478;
 
  --green:       #4a9e6b;
  --green-dim:   rgba(74,158,107,0.18);
  --amber:       #c9a84c;
  --amber-dim:   rgba(201,168,76,0.18);
  --grey-tile:   #3a4255;
 
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
 
  --header-h:    58px;
  --waitForPlayers-h: 120px;
  --sidebar-w:   19%;
  --trans:       0.18s ease;
  --minimizeBtn-h: 32px;
}
 
/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  touch-action: manipulation;
}
 
html { scroll-behavior: smooth; }
 
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  background-color: var(--bg);
  color: var(--cream);
  min-height: 100vh;
  /* dot-grid texture */
  background-image: radial-gradient(circle, rgba(201,168,76,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
}
@keyframes bounce-drop {
  0%   { transform: translateY(-14px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.05); opacity: 1; }
  80%  { transform: translateY(-3px) scale(0.97); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.key-bounce {
  animation: bounce-drop 0.4s cubic-bezier(.22,1,.36,1) forwards;
}
.tile {
  width: 58px;
  height: 58px;
  border: 2px solid #2e3350;
  border-radius: 4px;          
  background: #181c2a;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.1s;
}

.row.active .tile { border-color: #5a6080; }
.tile.filled       { border-color: #8890b0; }
 #languageDiv {
  display: flex;
  justify-content: space-between; /* adds space between buttons */
  align-items: center;
  width: 100%; /* adjust as needed */
}
 #languageDivSmall {
  position: absolute;
  width: 120px;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* adds space between buttons */
  align-items: center;
}
#languageDivSmall button {
  height: 25px !important;
  width: 35px !important;
  border: none;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  background-size: 100% 100%;
  transition:  0.4s ease;
}
#languageDivSmall button:hover {
  box-shadow: 0 6px 24px rgba(201,168,76,0.35);
  transform: translateY(1px);
}

#englishLanguageSmall {
  background-image: url("data:image/png;base64,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") !important;
}


/* Greek button → Greece flag */
#greekLanguageSmall {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN4AAACUCAMAAADLemePAAAAYFBMVEUNXq////8AS6e1xd8uYrAASqjK0+cDXK7I1OctZ7Pj6fMAV6z7/P1rkMVSfr309/p6k8ZBdLjP2epzjsSbsdUAUao6cLZljMOIpM9/kcYmXK5wiMEAQaWludlzlsjW3+2/tErlAAABlElEQVR4nO3d3U7CQBCG4UWKRSuIQhV/uf+79FRHwsZkpzNffZ/zSXgpId1t05Zy2fBwt/hpM1RGlJCnjDxl5CkjTxl5yshTRp6yv+f14+oqjeZ5fX9Y5uFw9E6LPBzyHkNCziPPTJCXB3lmgrw8yDMT5OVBnpn433l9rrzhsvHJ5j2PlZFUeduKjc071ibWt3mU+xr7hVQHXl67NEr7H8R+6NNwyav9X02IPPLIi0EeeeTFII888mK0z3t7X6VRdpftj3Y5e6hM7JbXecx9M6JCfSupdd7MNwLJmxB5ZoK8PMgzE+TlQZ6ZIC8P8sxEdcXwsc7D4ejdJNI+r0RfsvzOIU8JecrIU0aeMvKUkadMPa9yTnoub5KT4TZKZUXRbW3eZzfJUqaNUlsQ/lp7n6ZYhrbicPE5E/KUkaeMPGXkKSNPGXnKyFNWom8o9VWibwf2Fb3VAwAAAKiLvsDoq0Q/MMZXiX7cj6+5b0ZEfwBf5CkjTxl5yshTRp4y8pTNPS/6dR6+SvTLWHxFb/UAAAAAQJgvYsqubHf9SDcAAAAASUVORK5CYII=") !important;
}
#languageDiv button {
  height: 120px !important;
  width: 170px !important;
  border: none;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  background-size: 100% 100%;
  transition:  0.4s ease;
}
#languageDiv button:focus {
  border: 3px solid var(--gold);
  outline: none;
}
#goBtn{
  width: 100%;
  padding: 13px 20px;
  background: var(--gold);
  color: var(--bg);
  box-shadow: 0 4px 18px #c9a84c38;
  margin: 2px;
}
#goBtn:hover{
  background: var(--gold-bright);
  box-shadow: 0 6px 24px rgba(201,168,76,0.35);
  transform: translateY(-1px);
}
#languageDiv button:hover {
  box-shadow: 0 6px 24px rgba(201,168,76,0.35);
  transform: translateY(1px);
}
/* English button → UK flag */
#englishLanguage {
  background-image: url("data:image/png;base64,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") !important;
}


/* Greek button → Greece flag */
#greekLanguage {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN4AAACUCAMAAADLemePAAAAYFBMVEUNXq////8AS6e1xd8uYrAASqjK0+cDXK7I1OctZ7Pj6fMAV6z7/P1rkMVSfr309/p6k8ZBdLjP2epzjsSbsdUAUao6cLZljMOIpM9/kcYmXK5wiMEAQaWludlzlsjW3+2/tErlAAABlElEQVR4nO3d3U7CQBCG4UWKRSuIQhV/uf+79FRHwsZkpzNffZ/zSXgpId1t05Zy2fBwt/hpM1RGlJCnjDxl5CkjTxl5yshTRp6yv+f14+oqjeZ5fX9Y5uFw9E6LPBzyHkNCziPPTJCXB3lmgrw8yDMT5OVBnpn433l9rrzhsvHJ5j2PlZFUeduKjc071ibWt3mU+xr7hVQHXl67NEr7H8R+6NNwyav9X02IPPLIi0EeeeTFII888mK0z3t7X6VRdpftj3Y5e6hM7JbXecx9M6JCfSupdd7MNwLJmxB5ZoK8PMgzE+TlQZ6ZIC8P8sxEdcXwsc7D4ejdJNI+r0RfsvzOIU8JecrIU0aeMvKUkadMPa9yTnoub5KT4TZKZUXRbW3eZzfJUqaNUlsQ/lp7n6ZYhrbicPE5E/KUkaeMPGXkKSNPGXnKyFNWom8o9VWibwf2Fb3VAwAAAKiLvsDoq0Q/MMZXiX7cj6+5b0ZEfwBf5CkjTxl5yshTRp4y8pTNPS/6dR6+SvTLWHxFb/UAAAAAQJgvYsqubHf9SDcAAAAASUVORK5CYII=") !important;
}
/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
#header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  box-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
 
#header h2 {
  font-family: '', ;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.04em;
  
  color: rgba(193, 187, 171, 0.8);
  text-shadow: 0 0 32px rgba(187, 117, 237, 0.3);
}
 
/* ═══════════════════════════════════════════════
   LOBBY SCREEN
═══════════════════════════════════════════════ */
#lobby {
  min-height: 100vh;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  animation: fadeUp 0.5s ease both;
}
 
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
/* ── Shared card shell ── */
#lobbyTitle,
#lobbyActions {
  width: 100%;
  max-width: 460px;
  background: var(--bg-2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.45);
}
 
/* ── Welcome heading ── */
#lobbyTitle p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cream);
  text-align: center;
  line-height: 1.25;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--gold-dim);
  width: 100%;
}
 
/* ── Forms ── */
#nameForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
 
/* ── Shared inputs ── */
input[type="text"] {
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-3);
  border: 1px solid rgba(126, 137, 224, 0.2);
  border-radius: var(--radius-md);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
 
input[type="text"]::placeholder { color: var(--muted); }
 
input[type="text"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}
 
/* ── Shared buttons base ── */
button {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans), opacity var(--trans);
}
 
button:active { transform: scale(0.96) !important; }
 
/* Primary gold */
#lobbyWaiting button,

#createLobby {
  width: 100%;
  padding: 13px 20px;
  background: var(--gold);
  color: var(--bg);
  box-shadow: 0 4px 18px rgba(91, 174, 207, 0.22);
  margin: 2px;
  transition: all 0.3s ease;
}
 #leaveLobbyBtn{
    background-color: rgb(252, 94, 94) !important;
    color: #ffffff !important;
 }

#createLobby:hover {
  background: var(--gold-bright);
  box-shadow: 0 6px 24px rgba(76, 159, 201, 0.35);
  font-size: 15px;
  color: var(--bg);
  font-weight: 900 !important;
  transform: translateY(-1px);

}
 
/* Secondary outlined */
#joinLobby {
  flex-shrink: 0;
  padding: 13px 20px;
  background: transparent;
  color: var(--gold);
  border: var(--gold)  1px solid;
  transition: all 0.3s ease;
}
 
#joinLobby:hover {
  background: rgba(0, 0, 0, 0.18);
  font-size: 15px;
  border-color: var(--gold);
  transform: translateY(-1px);
}
 
/* ── Actions layout ── */
#lobbyActions {
  gap: 22px;
}
 
#lobbyActions > div:first-child {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
.lobby-join-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
 
.lobby-join-row input { flex: 1; }
 
/* ── Divider ── */
.lobby-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  
}
 
.lobby-divider::before,
.lobby-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-dim);
}
 
/* ── Available lobbies ── */
#lobbiesListDiv { width: 100%; }
 
#lobbiesListDiv h3 {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  
  color: var(--muted);
  margin-bottom: 12px;
}
 
#lobbiesList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}
 
#lobbiesList::-webkit-scrollbar { width: 3px; }
#lobbiesList::-webkit-scrollbar-track { background: transparent; }
#lobbiesList::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.25);
  border-radius: 4px;
}
 
#lobbiesList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--bg-3);
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  color: var(--cream-dim);
  transition: border-color var(--trans), background var(--trans);
}
 
#lobbiesList li:hover {
  border-color: rgba(201,168,76,0.28);
  background: rgba(201,168,76,0.04);
}
 
#lobbiesList li button {
  padding: 6px 14px;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.38);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  width: auto;
  
  letter-spacing: 0.07em;
}
 
#lobbiesList li button:hover {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
}
 
/* Empty state */
#lobbiesList li.empty {
  justify-content: center;
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
  border-style: dashed;
}
 
/* ═══════════════════════════════════════════════
   GAME SCREEN
═══════════════════════════════════════════════ */
#gameScreen {
  display: none;
}
 #roundDisplay{
  position: absolute;
  margin-top: 2px;
  top: var(--header-h );
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 8px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cream);
  z-index: 1002;
 }
#center {
  padding-top: calc(var(--header-h) + 28px);
  padding-bottom: 40px;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0 auto;
}
 
/* ── Guess grid ── */
#form {
  display: grid;
  margin-top: 10px;
  grid-template-rows: repeat(6, 53px);
  row-gap: 9px;
}
 
.div1,.div2,.div3,.div4,.div5,.div6 {
  display: flex;
  flex-direction: row;
  
}
 
.wordBoxes {
  width: 58px !important;
  height: 58px !important;
  margin: 4px !important;
  border: 2px solid #2e3350 !important;
  border-radius: 4px !important;
  background: #181c2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  transition: border-color 0.1s;
  box-sizing: border-box;
  gap: 1px;
}

.row-active .wordBoxes {
  border-color: #5a6080 !important;
}

.wordBoxes.filled {
  border-color: #8890b0 !important;
}

@keyframes tile-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.wordBoxes.pop { animation: tile-pop 0.1s ease; }

@keyframes flip-in  { to { transform: rotateX(-90deg); } }
@keyframes flip-out { from { transform: rotateX(-90deg); } to { transform: rotateX(0deg); } }
.wordBoxes.flip-in  { animation: flip-in  0.2s ease-in  forwards; }
.wordBoxes.flip-out { animation: flip-out 0.25s ease-out forwards; }

@keyframes row-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.row-shake { animation: row-shake 0.4s ease; }

@keyframes bounce-drop {
  0%   { transform: translateY(-14px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(4px)  scale(1.05); opacity: 1; }
  80%  { transform: translateY(-3px) scale(0.97); }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
.key-bounce { animation: bounce-drop 0.4s cubic-bezier(.22,1,.36,1) forwards; }
 
.wordBoxes.correct  { background: var(--green);     border-color: var(--green); }
.wordBoxes.present  { background: var(--amber);     border-color: var(--amber); color: var(--bg); }
.wordBoxes.absent   { background: var(--grey-tile); border-color: var(--grey-tile); }
.wordBoxes.active   { border-color: rgba(201,168,76,0.55); }
 

/* ── Keyboard ── */
.Keyboard-module_keyboard__uYuqf {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
 
.Keyboard-module_row__ilOKU {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
 
.Key-module_half__HooWu {
  width: 18px;
  flex-shrink: 0;
}
 
.Key-module_key__kchQI {
  min-width: 44px;
  min-height: 46px;
  background: var(--bg-3);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  transition: background var(--trans), transform 0.1s ease, border-color var(--trans);
  user-select: none;
}
 
.Key-module_key__kchQI:hover {
  background: var(--bg-4);
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-2px);
}
 
.Key-module_key__kchQI:active { transform: scale(0.93); }
 
.Key-module_oneAndAHalf__bq8Tw {
  min-width: 66px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gold);
}
 
/* Key state colours */
.Key-module_key__kchQI.correct { background: var(--green);     border-color: var(--green); color: #fff; }
.Key-module_key__kchQI.present { background: var(--amber);     border-color: var(--amber); color: var(--bg); }
.Key-module_key__kchQI.absent  { background: #222836; border-color: transparent; color: var(--muted); }
 
/* ═══════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.86);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(6px);
  animation: fadeIn 0.22s ease both;
}
 
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
 
.modal-box {
  background: var(--bg-2);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: var(--radius-xl);
  padding: 44px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.06);
  max-width: 480px;
  width: 90%;
  animation: scaleIn 0.22s ease both;
}
 
@keyframes scaleIn {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
 
#modal-title, #rules-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
 
#modal-word {
  font-size: 1.05rem;
  color: var(--cream-dim);
  font-weight: 300;
  letter-spacing: 0.04em;
}
 
#modal-btn, #rules-btn {
  padding: 13px 36px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: 0.1em;
  
  box-shadow: 0 4px 18px rgba(201,168,76,0.22);
}
 
#modal-btn:hover, #rules-btn:hover {
  background: var(--gold-bright);
  box-shadow: 0 6px 24px rgba(201,168,76,0.35);
  transform: translateY(-1px);
}
 
/* ── Rules list ── */
.rules-list {
  text-align: left;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
}
 
.rules-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--cream-dim);
  line-height: 1.45;
  font-weight: 300;
}
 
.rules-list strong { color: var(--cream); font-weight: 500; }
 
.color-dot {
  width: 22px; height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
}
.dot-green { background: var(--green); }
.dot-amber { background: var(--amber); }
.dot-grey  { background: var(--grey-tile); }
 
/* ═══════════════════════════════════════════════
   CHAT SIDEBAR (left)
═══════════════════════════════════════════════ */
#chatGroup {
  position: fixed;
  left: 14px;
  top: calc(var(--header-h) + 14px);
  bottom: 14px;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  
}
 
#chat {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  min-height: 0;
  height:calc(100% - var(--minimizeBtn-h) - 8px);
  width: 100%;
  position: absolute;
  bottom: calc(var(--minimizeBtn-h) + 12px);
}
 
/* Chat title bar */
#chat::before {
  content: 'Chat';
  display: block;
  padding: 10px 14px 9px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  
  color: var(--muted);
  border-bottom: 1px solid var(--gold-dim);
  flex-shrink: 0;
}
 
#messages {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 10px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
 
#messages::-webkit-scrollbar { width: 3px; }
#messages::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.2);
  border-radius: 4px;
}
 
#messages li {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--cream-dim);
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  word-break: break-word;
}
 
#chat-form {
  display: flex;
  padding: 10px;
  border-top: 1px solid var(--gold-dim);
  flex-shrink: 0;
}
 
#input {
  flex: 1;
  padding: 9px 12px;
  background: var(--bg-3);
  border: 1px solid rgba(48, 112, 147, 0.18);
  border-radius: var(--radius-sm);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  outline: none;
  transition: border-color var(--trans);
}
 
#input::placeholder { color: var(--muted); }
#input:focus { border-color: var(--gold); }
 
#minimizeChat {
  flex-shrink: 0;
  padding: 9px 14px;
  background: var(--bg-3);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  position: absolute ;
  bottom: 0;
  cursor: pointer;
  text-align: center;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
  /* override position:fixed from old CSS */
  width: 100%;
  height: auto;
}
 
#minimizeChat:hover {
  color: var(--gold);
  border-color: rgba(201,168,76,0.38);
  background: rgba(201,168,76,0.05);
}
 
/* ═══════════════════════════════════════════════
   LOBBY STATS SIDEBAR (right)
═══════════════════════════════════════════════ */
#lobbyStats {
  position: fixed;
  right: 14px;
  top: calc(var(--header-h) + var(--waitForPlayers-h) + 28px);
  bottom: 14px;
  width: var(--sidebar-w);
  background: var(--bg-2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  z-index: 999;
}
 #lobbyWaiting{
    position: fixed;
    display: flex ;
    flex-direction: column ;
    right: 14px;
    top: calc(var(--header-h) + 14px);
    width: var(--sidebar-w);
    height: var(--waitForPlayers-h);
    background: var(--bg-2);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    font-size: 0.9rem;
    color: var(--muted);
 }
/* Stats title bar */
#lobbyStats::before {
  content: 'Players';
  display: block;
  padding: 10px 14px 9px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  
  color: var(--muted);
  border-bottom: 1px solid var(--gold-dim);
  flex-shrink: 0;
}
 
#players {
  list-style: none;
  padding: 10px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
 
#players::-webkit-scrollbar { width: 3px; }
#players::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.2);
  border-radius: 4px;
}
 
#players li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cream-dim);
  border: 1px solid transparent;
  transition: border-color var(--trans);
}
 
#players li::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(74,158,107,0.6);
}
 
/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  :root { --sidebar-w: 22%; }
}
 
@media (max-width: 860px) {
  :root { --sidebar-w: 0px; }

  #gameScreen {
    flex-direction: column;
  }
  
  /* ── Chat sidebar → stacked block ── */
  #chatGroup {
    display: none !important;  
    /* 
    width: 100%;
    height: auto;
    bottom: unset;
    left: unset;
    top: unset;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 0;
    gap: 0; */
  }

  #chat {
    position: relative;  
    bottom: unset;
    width: 100%;
    height: 140px;        
    max-height: 140px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  #minimizeChat {
    position: relative;   /* was absolute */
    bottom: unset;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* ── Lobby group → stacked block ── */
  #lobbyGroup {
    display: flex !important;  /* override the display:none base rule */
    flex-direction: column;
    position: static;
    width: 100%;
    height: auto;
  }

  #lobbyWaiting {
    position: static;     /* was fixed */
    width: 100%;
    height: auto;
    border-radius: 0;
    border-left: none;
    border-right: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    justify-content: space-between;
  }

  #lobbyWaiting button {
    flex: 1;
    min-width: 110px;
  }

  #lobbyStats {
    position: static;     /* was fixed */
    width: 100%;
    height: auto;
    max-height: 130px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    top: unset;
    right: unset;
    bottom: unset;
  }

  /* ── Center ── */
  #center {
    margin: 0;
    padding: 8px;
    min-height: unset;
  }

  #roundDisplay {
    position: absolute;
    transform: none;
    left: unset;
    
    width: fit-content;
  }
   .Key-module_key__kchQI {
    min-width: 44px;
    min-height: 49px;
    font-size: 12px;
    padding: 0 3px;
  }
  .Key-module_oneAndAHalf__bq8Tw { min-width: 44px; }
  .Keyboard-module_row__ilOKU    { gap: 4px; }
  .Key-module_half__HooWu        { width: 8px; }
  #form {
  display: grid;
  margin-top: var(--header-h);
  grid-template-rows: repeat(6, 49px);
  row-gap: 0px;
  }
  #center{
    height: 100vh;
  }
  .wordBoxes {
    width: 44px !important; 
    height: 44px !important;
    gap: 7px;
    min-width: 36px; 
    min-height: 36px;
    font-size: 1.2rem !important;
  }
}

@media (max-width: 520px) {
  #lobbyTitle, #lobbyActions {
    padding: 32px 22px;
    border-radius: var(--radius-lg);
  }

  #lobbyTitle p { font-size: 1.4rem; }
  .modal-box    { padding: 34px 26px; }

  .Keyboard-module_keyboard__uYuqf {
    width: 100%;
    padding: 0 4px;
  }

  .Keyboard-module_row__ilOKU {
    width: 100%;
    gap: 3px;
  }

  .Key-module_key__kchQI {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    font-size: 12px;
    padding: 0;
  }

  .Key-module_oneAndAHalf__bq8Tw {
    flex: 1.5;
    min-width: 0;
  }

  .Key-module_half__HooWu {
    display: none; /* remove spacers so keys fill the row */
  }
  .Keyboard-module_row__ilOKU    { gap: 4px; }
  .Key-module_half__HooWu        { width: 8px; }
  #center {
    height: 100dvh;
    padding: 0;
    padding-top: var(--header-h);
    justify-content: space-evenly;
    gap: 0;
  }

  #form {
    display: grid;
    margin-top: 0;
    grid-template-rows: repeat(6, 1fr);
    height: 45dvh;
    width: 100%;
    row-gap: 4px;
    padding: 4px;
  }

  .div1,.div2,.div3,.div4,.div5,.div6 {
    justify-content: center;
    height: 100%;
  }

  .wordBoxes {
    flex: 1 !important;
    height: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 64px !important;
    margin: 2px !important;
    font-size: 1.4rem !important;
  }
  #roundDisplay {
    position: fixed;
    transform: none;
    color: var(--cream);
    left: 0;
    top: 0;
    margin-top: 12px;
    width: fit-content;

    border:none;
  }
   #languageDivSmall {
    position: fixed;
    transform: none;
    color: var(--cream);
    right: 9px;
    top: 0;
    gap: 9px;
    margin-top: 14px;
    width: fit-content;
  }
  /* #lobbyWaiting {
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 14px;
  top: calc(var(--header-h) + 14px);
  width: var(--sidebar-w);
  height: var(--waitForPlayers-h);
  background: var(--bg-2);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  transition: all 0.3s ease;
  z-index: 999;
} */

/* Modal state — overlays the center */
#lobbyWaiting.lobby-waiting-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90vw);
  height: auto;
  padding: 44px 40px;
  background: var(--bg-2);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 1000;
  gap: 20px;
  flex-direction: column;
  backdrop-filter: blur(2px);
}

/* Dim backdrop behind the modal */
#lobbyWaiting.lobby-waiting-modal::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.7);
  z-index: -1;
  backdrop-filter: blur(4px);
}

#lobbyWaiting.lobby-waiting-modal #startLobbyNoWait {
  width: 100%;
  padding: 13px 20px;
}

#lobbyWaiting.lobby-waiting-modal #leaveLobbyBtn {
  width: 100%;
  padding: 13px 20px;
}
}

@media (max-width: 380px) {
  .Key-module_key__kchQI {
    min-width: 25px;
    font-size: 11px;
  }
  .Key-module_oneAndAHalf__bq8Tw { min-width: 38px; }

  .wordBoxes {
    width: 40px; height: 40px;
    min-width: 40px; min-height: 40px;
  }
}