body.theme-emerald {
  background-color: #050d0a;
  color: #e0f0e8;
}

body.theme-emerald {
  background-image:
    repeating-linear-gradient(90deg, rgba(46,204,113,0.06) 0px, rgba(46,204,113,0.06) 1px, transparent 1px, transparent 22px),
    radial-gradient(1px 1px at 15px 25px, rgba(46,204,113,0.6), transparent),
    radial-gradient(1px 1px at 55px 65px, rgba(46,204,113,0.5), transparent),
    radial-gradient(1px 1px at 95px 15px, rgba(46,204,113,0.7), transparent),
    radial-gradient(1px 1px at 35px 95px, rgba(46,204,113,0.4), transparent),
    radial-gradient(1px 1px at 75px 115px, rgba(46,204,113,0.6), transparent),
    radial-gradient(1px 1px at 115px 55px, rgba(46,204,113,0.5), transparent);
  background-repeat: repeat;
  background-size: 22px 100%, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px, 130px 130px;
}

body.theme-emerald .game {
  background-color: #0b1a14;
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11, 48, 27, 0.5);
}

body.theme-emerald .top { 
  color: #2ecc71; 
  text-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

body.theme-emerald .top::after {
  background: linear-gradient(to right, transparent, #2ecc71, transparent);
  height: 2px;
}

body.theme-emerald #answer,
body.theme-emerald #chat-input {
  background-color: #10261d;
  color: #ffffff;
  border: 1px solid #1a3c2b;
  border-radius: 6px;
  transition: all 0.3s ease;
}

body.theme-emerald #answer:focus,
body.theme-emerald #chat-input:focus { 
  border-color: #2ecc71; 
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.25);
  outline: none;
}

body.theme-emerald #answer-chat { 
  color: #7be3a8; 
  font-weight: bold;
}

body.theme-emerald #chat {
  background-color: #07120e;
  border: 1px solid #153022;
  border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.theme-emerald #chat h4 { 
  color: #6b9a80; 
}

body.theme-emerald #chat-messages {
  color: #e8f5ee;
}

body.theme-emerald .message-text { 
  color: #b8dbc8; 
}

body.theme-emerald #chat-messages::-webkit-scrollbar-track {
  background: #07120e;
}

body.theme-emerald #chat-messages::-webkit-scrollbar-thumb {
  background: #2ecc71;
}

body.theme-emerald #chat-messages::-webkit-scrollbar-thumb:hover {
  background: #7be3a8;
}

body.theme-emerald .tp-tab {
  background: #10261d !important;
  color: #2ecc71 !important;
}
body.theme-emerald .tp-tab.active-tab {
  background: #2ecc71 !important;
  color: #050d0a !important;
}

body.theme-emerald #change-name {
  background-color: rgba(46, 204, 113, 0.05) !important;
  border: 1px solid #2ecc71 !important;
  color: #2ecc71 !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

body.theme-emerald #change-name:hover {
  background-color: #2ecc71 !important;
  color: #050d0a !important;
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.4) !important;
}




body.theme-emerald #puzzle-btn,
body.theme-emerald #top-players-btn,
body.theme-emerald #game2048-btn,
body.theme-emerald #draw-btn,
body.theme-emerald #xo-btn,
body.theme-emerald #player-list-btn {
  background-color: rgba(46, 204, 113, 0.05) !important;
  color: #2ecc71 !important;
  border: 1px solid #2ecc71 !important;
  clip-path: polygon(
    25% 0%, 75% 0%, 100% 25%, 100% 75%,
    75% 100%, 25% 100%, 0% 75%, 0% 25%
  ) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

body.theme-emerald #puzzle-btn:hover,
body.theme-emerald #top-players-btn:hover,
body.theme-emerald #game2048-btn:hover,
body.theme-emerald #draw-btn:hover,
body.theme-emerald #xo-btn:hover,
body.theme-emerald #player-list-btn:hover {
  background-color: #2ecc71 !important;
  color: #050d0a !important;
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.4) !important;
}

body.theme-emerald #puzzle-btn::after,
body.theme-emerald #top-players-btn::after,
body.theme-emerald #game2048-btn::after,
body.theme-emerald #draw-btn::after,
body.theme-emerald #xo-btn::after,
body.theme-emerald #player-list-btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  animation: emeraldPhase1and2 13.5s linear infinite;
}

body.theme-emerald #puzzle-btn::before,
body.theme-emerald #top-players-btn::before,
body.theme-emerald #game2048-btn::before,
body.theme-emerald #draw-btn::before,
body.theme-emerald #xo-btn::before,
body.theme-emerald #player-list-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(46,204,113,0.65) 25deg, transparent 60deg);
  animation: emeraldPhase3 13.5s linear infinite;
}

@keyframes emeraldPhase1and2 {
  0%    { top: 0%; left: 0; width: 100%; height: 2px;
          background: linear-gradient(to right, transparent, #7be3a8, transparent);
          opacity: 1; }
  32%   { top: 100%; left: 0; width: 100%; height: 2px;
          background: linear-gradient(to right, transparent, #7be3a8, transparent);
          opacity: 1; }
  32.1% { top: -50%; left: -40%; width: 40%; height: 200%;
          background: linear-gradient(120deg, transparent, rgba(123,227,168,0.55), transparent);
          opacity: 1; }
  65%   { top: -50%; left: 120%; width: 40%; height: 200%;
          background: linear-gradient(120deg, transparent, rgba(123,227,168,0.55), transparent);
          opacity: 1; }
  65.1% { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes emeraldPhase3 {
  0%, 65%   { opacity: 0; transform: rotate(0deg); }
  66%       { opacity: 1; transform: rotate(0deg); }
  100%      { opacity: 1; transform: rotate(360deg); }
}

body.theme-emerald #player-list-btn::after {
  animation-delay: var(--pl-sync-delay, 0s) !important;
}

body.theme-emerald #player-list-btn::before {
  animation-delay: var(--pl-sync-delay, 0s) !important;
}

body.theme-emerald #main-gear-btn {
  background-color: rgba(46, 204, 113, 0.05) !important;
  border: 1px solid #2ecc71 !important;
  color: #2ecc71 !important;
  border-radius: 6px !important;
  transform: translateY(15px) !important;
  cursor: pointer;
}

body.theme-emerald #main-gear-btn:hover {
  background-color: rgba(46, 204, 113, 0.05) !important;
  color: #2ecc71 !important;
  box-shadow: none !important;
  transform: translateY(15px) !important;
}

body.theme-emerald #gear-menu {
  background-color: #0b1a14 !important;
  border: 1px solid #2ecc71 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8) !important;
}

body.theme-emerald #gear-menu button {
  color: #2ecc71 !important;
  border-bottom: 1px solid rgba(46, 204, 113, 0.2) !important;
  transition: background-color 0.2s !important;
}

body.theme-emerald #gear-menu button:hover {
  background-color: rgba(46, 204, 113, 0.15) !important;
}

body.theme-emerald #current-word .typed {
  color: #2ecc71;
  text-shadow: 0 0 12px rgba(46, 204, 113, 0.8), 2px 2px 4px rgba(0,0,0,0.8);
  font-weight: bold;
}

body.theme-emerald #puzzle-modal,
body.theme-emerald #instructions-modal,
body.theme-emerald #top-players-modal,
body.theme-emerald #draw-modal,
body.theme-emerald #gallery-modal,
body.theme-emerald #top-drawings-modal,
body.theme-emerald #pro-color-modal,
body.theme-emerald #game2048-modal,
body.theme-emerald #xo-modal {
  background-color: #0b1a14 !important;
  background-image: none !important;
  border-color: rgba(46, 204, 113, 0.4) !important;
  color: #e0f0e8 !important;
}

body.theme-emerald #puzzle-modal h3,
body.theme-emerald #top-players-modal h3,
body.theme-emerald #instructions-modal h3,
body.theme-emerald #gallery-title,
body.theme-emerald #top-drawings-title,
body.theme-emerald #game2048-modal h3,
body.theme-emerald #xo-modal h3,
body.theme-emerald #puzzle-win-msg,
body.theme-emerald #game2048-score {
  color: #7be3a8 !important;
}

body.theme-emerald .puzzle-tile {
  background: #10261d !important;
  color: #2ecc71 !important;
  border: 1px solid rgba(46, 204, 113, 0.5) !important;
}

body.theme-emerald .puzzle-empty {
  background: transparent !important;
  border: 1px dashed rgba(46, 204, 113, 0.15) !important;
}

body.theme-emerald .top-player-item,
body.theme-emerald .gallery-item,
body.theme-emerald .top-drawing-item {
  background: #10261d !important;
  border-color: rgba(46, 204, 113, 0.15) !important;
}

body.theme-emerald .top-player-item span:last-child {
  color: #2ecc71 !important;
  background: rgba(46, 204, 113, 0.12) !important;
}

body.theme-emerald .draw-btn,
body.theme-emerald #open-rgb-picker {
  background: #10261d !important;
  color: #2ecc71 !important;
  border-color: rgba(46, 204, 113, 0.5) !important;
}

body.theme-emerald .color-option:hover,
body.theme-emerald .color-option.active,
body.theme-emerald .recent-color:hover {
  border-color: #7be3a8 !important;
}

body.theme-emerald .xo-cell {
  background: #10261d !important;
  border-color: #2ecc71 !important;
}

body.theme-emerald .xo-cell:hover {
  background: #17301f !important;
}

body.theme-emerald .game2048-tile {
  background: #16301f;
}