/**
 * EmojiKitchen Light Dark Mode CSS
 * Lighter dark gray theme for better readability
 */

:root {
    --dark-bg: #1e1e1e;
    --dark-surface: #252525;
    --dark-surface-2: #2d2d2d;
    --dark-border: #3a3a3a;
    --dark-text: #e8e8e8;
    --dark-text-muted: #b0b0b0;
    --dark-accent: #a8e063;
    --dark-accent-hover: #c5e894;
    --dark-link: #7eb8d8;
}

/* ========================================
   BASE STYLES - LIGHT DARK BACKGROUNDS
   ======================================== */

html {
    background-color: #1e1e1e !important;
}

body {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

/* Main content wrapper */
.all,
.boxed-cont {
    background-color: #1e1e1e !important;
}

/* Body content area */
.bdcn {
    background-color: #252525 !important;
}

/* ========================================
   HEADER STYLES
   ======================================== */

.hdcn,
.hdcn-1,
.hdcn-2,
.hdcn-3,
.hdcn-4,
.hdcn-5 {
    background-color: #252525 !important;
    border-color: #3a3a3a !important;
}

.hdcn-1 h1,
.hdcn-1 h1 a,
.logo,
.logo a {
    color: #ffffff !important;
}

/* ========================================
   NAVIGATION MENU
   ======================================== */

.menu>ul>li>a,
.menu>ul+a,
.menu li a {
    color: #ffffff !important;
}

.menu li:hover>a {
    color: #a8e063 !important;
    background-color: rgba(168, 224, 99, 0.15) !important;
}

nav.menu .menu-item-has-children ul,
.menu li ul {
    background-color: #2d2d2d !important;
    border: 1px solid #3a3a3a !important;
}

.menu-botn {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* ========================================
   CONTENT AREAS
   ======================================== */

.game-cn,
.blk-cn,
.txcn,
[class^="post-"] {
    background-color: #252525 !important;
    color: #ffffff !important;
}

/* ========================================
   SIDEBAR
   ======================================== */

.sdbr-cn .blk-cn {
    background-color: #2d2d2d !important;
    border: 1px solid #3a3a3a !important;
}

.titl {
    background-color: transparent !important;
    color: #ffffff !important;
    border-bottom: 2px solid #a8e063 !important;
}

/* ========================================
   GAME CARDS
   ======================================== */

[class*="gmcn-"] {
    background-color: #2d2d2d !important;
    border-color: #3a3a3a !important;
}

[class*="gmcn-"] .gm-titl a {
    color: #ffffff !important;
}

[class*="gmcn-"]:hover .gm-titl a {
    color: #a8e063 !important;
}

/* ========================================
   FOOTER
   ======================================== */

.ftcn,
.ftcn-1,
.ftcn-2 {
    background-color: #252525 !important;
    border-color: #3a3a3a !important;
}

.ftcn a {
    color: #b0b0b0 !important;
}

.ftcn a:hover {
    color: #a8e063 !important;
}

/* ========================================
   BUTTONS
   ======================================== */

[class*="botn"],
button,
input[type="submit"] {
    background-color: #a8e063 !important;
    color: #1e1e1e !important;
    border: none !important;
}

[class*="botn"]:hover,
button:hover,
input[type="submit"]:hover {
    background-color: #c5e894 !important;
}

/* ========================================
   FORMS
   ======================================== */

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #3a3a3a !important;
}

input:focus,
textarea:focus {
    border-color: #a8e063 !important;
}

/* ========================================
   COMMENTS
   ======================================== */

.cmnt-cn,
#respond {
    background-color: #252525 !important;
}

.cmnt-cn>div {
    background-color: #2d2d2d !important;
    border: 1px solid #3a3a3a !important;
}

/* ========================================
   SCROLLBAR
   ======================================== */

::-webkit-scrollbar {
    width: 10px;
    background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8e063;
}

/* ========================================
   SELECTION
   ======================================== */

::selection {
    background-color: #a8e063;
    color: #1e1e1e;
}