:root,
[data-theme="dark"] {
    --Main: #004e64;
    --Sidebar: #25a18e;
    --Background: #c1edcc;
    --button-hover: #2abba5;
    --accent: #2abba5;
    --main-txt: #ffffff;
    --secondary-txt: #9db4c0;
    --card-bg: rgba(193, 237, 204, 0.05);
    --card-border: rgba(193, 237, 204, 0.12);
    --hero-bg: linear-gradient(160deg, #002535 0%, #004e64 50%, #003544 100%);
    --content-bg: linear-gradient(180deg, #003544 0%, #002535 100%);
    --footer-bg: #001f2b;
    --header-bg: rgba(0, 53, 68, 0.85);
    --font-size-base: 15px;
}

[data-theme="light"] {
    --Main: #e8f5f0;
    --Sidebar: #25a18e;
    --Background: #004e64;
    --button-hover: #1a9688;
    --accent: #1a9688;
    --main-txt: #002535;
    --secondary-txt: #3a6b7c;
    --card-bg: rgba(0, 78, 100, 0.06);
    --card-border: rgba(0, 78, 100, 0.15);
    --hero-bg: linear-gradient(160deg, #c1edcc 0%, #a8e4b5 50%, #8ddba0 100%);
    --content-bg: linear-gradient(180deg, #d4f2db 0%, #c1edcc 100%);
    --footer-bg: #b0dfc0;
    --header-bg: rgba(193, 237, 204, 0.92);
    --font-size-base: 15px;
}

[data-theme="midnight"] {
    --Main: #0d0d1a;
    --Sidebar: #7c3aed;
    --Background: #e2d9f3;
    --button-hover: #8b5cf6;
    --accent: #8b5cf6;
    --main-txt: #f0ebff;
    --secondary-txt: #9d8ec4;
    --card-bg: rgba(139, 92, 246, 0.06);
    --card-border: rgba(139, 92, 246, 0.15);
    --hero-bg: linear-gradient(160deg, #0d0d1a 0%, #1a1035 50%, #120d28 100%);
    --content-bg: linear-gradient(180deg, #130f22 0%, #0d0d1a 100%);
    --footer-bg: #080810;
    --header-bg: rgba(13, 13, 26, 0.9);
    --font-size-base: 15px;
}

[data-theme="forest"] {
    --Main: #1a2e1a;
    --Sidebar: #4a7c59;
    --Background: #d4edda;
    --button-hover: #5a9e6a;
    --accent: #5a9e6a;
    --main-txt: #e8f5e8;
    --secondary-txt: #8ab894;
    --card-bg: rgba(90, 158, 106, 0.07);
    --card-border: rgba(90, 158, 106, 0.18);
    --hero-bg: linear-gradient(160deg, #0f1f0f 0%, #1a2e1a 50%, #142214 100%);
    --content-bg: linear-gradient(180deg, #162816 0%, #0f1f0f 100%);
    --footer-bg: #0a150a;
    --header-bg: rgba(26, 46, 26, 0.9);
    --font-size-base: 15px;
}

[data-fontsize="small"]  { --font-size-base: 13px; }
[data-fontsize="medium"] { --font-size-base: 15px; }
[data-fontsize="large"]  { --font-size-base: 17px; }

[data-animations="off"] * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

[data-hover="off"] * {
    transition: none !important;
}

@font-face {
    font-family: Title;
    src: url(font/Kanit-Regular.ttf);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--Main);
    color: var(--main-txt);
    font-family: Title, Arial, sans-serif;
    font-size: var(--font-size-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--header-bg);
    backdrop-filter: blur(10px);
    padding: 16px 40px;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    border-bottom: 1px solid var(--card-border);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: bold;
    color: var(--Background);
    text-decoration: none;
    letter-spacing: 2px;
}

.nav-logo img { width: 40px; border-radius: 50%; }

nav { display: flex; gap: 35px; }

nav a {
    color: var(--Background);
    text-decoration: none;
    font-size: 16px;
    opacity: 0.85;
    transition: opacity 0.25s, color 0.25s, transform 0.25s, text-shadow 0.25s;
    letter-spacing: 1px;
}

nav a:hover {
    opacity: 1;
    color: var(--accent);
    transform: translateY(3px);
}

nav a.active {
    opacity: 1;
    color: var(--accent);
    text-shadow: 0 0 8px rgba(42, 187, 165, 0.8), 0 0 22px rgba(42, 187, 165, 0.4);
}

.btn-playnow {
    background-color: var(--accent);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: background-color 0.2s, transform 0.2s;
}

.btn-playnow:hover { background-color: var(--Sidebar); transform: scale(1.05); }

.page-hero {
    padding: 120px 40px 50px;
    text-align: center;
    background: var(--hero-bg);
}

.page-title {
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 900;
    letter-spacing: 8px;
    color: var(--Background);
    text-shadow: 0 0 30px rgba(193, 237, 204, 0.3), 0 0 60px rgba(37, 161, 142, 0.15);
    margin-bottom: 8px;
    animation: fadeUp 0.8s ease forwards;
}

.page-sub {
    color: var(--secondary-txt);
    font-size: 14px;
    letter-spacing: 2px;
    animation: fadeUp 0.8s ease 0.2s forwards;
    opacity: 0;
    transform: translateY(16px);
}

.page-content {
    flex: 1;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: var(--content-bg);
}

footer {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--card-border);
    margin-top: auto;
}

footer p {
    color: var(--secondary-txt);
    text-align: center;
    padding: 20px;
    font-size: 14px;
    letter-spacing: 1px;
}

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}