/* =================================
   EduGame Studio - Main Styles
================================= */

:root {
    --primary-color: #5267d8;
    --secondary-color: #7488ed;
    --accent-color: #ffbd59;
    --light-bg: #f5f7ff;
    --text-color: #26324b;
    --muted-color: #718096;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Kanit", sans-serif;
    color: var(--text-color);
    background: #ffffff;
    line-height: 1.7;
}

.navbar {
    min-height: 70px;
}

.navbar-brand {
    font-size: 1.35rem;
}

.nav-link {
    font-weight: 500;
    margin: 0 5px;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background: #3d50bc;
    border-color: #3d50bc;
}

.hero-section {
    background: linear-gradient(135deg, #eef1ff, #f9faff);
    padding: 90px 0;
    overflow: hidden;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.3;
    color: #263b83;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--muted-color);
    max-width: 600px;
}

.hero-icon {
    font-size: 150px;
    color: var(--primary-color);
    text-align: center;
}

.section-padding {
    padding: 75px 0;
}

.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: #263b83;
}

.section-description {
    color: var(--muted-color);
}

.game-card {
    height: 100%;
    padding: 28px 22px;
    background: #ffffff;
    border: 1px solid #edf0fa;
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(30, 50, 100, 0.05);
    transition: 0.25s ease;
}

.game-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(30, 50, 100, 0.12);
}

.game-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 30px;
    margin-bottom: 18px;
}

.icon-purple {
    background: #eeeaff;
    color: #7956d8;
}

.icon-orange {
    background: #fff0df;
    color: #ed963d;
}

.icon-green {
    background: #e1f7ed;
    color: #24a66a;
}

.icon-blue {
    background: #e3efff;
    color: #3983dc;
}

.feature-section {
    background: var(--light-bg);
}

.feature-item {
    padding: 20px;
    height: 100%;
    background: #ffffff;
    border-radius: 15px;
}

.feature-item i {
    font-size: 30px;
    color: var(--primary-color);
}

.footer-section {
    background: #f5f7ff;
    border-top: 1px solid #e9edfa;
}

@media (max-width: 767px) {
    .hero-section {
        padding: 55px 0;
        text-align: center;
    }

    .hero-icon {
        font-size: 100px;
        margin-top: 30px;
    }

    .section-padding {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.65rem;
    }
}
/* =========================
   MEDIA LIBRARY
========================= */

.media-card {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.media-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}

.media-preview {
    height: 180px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-preview img,
.media-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.audio-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 64px;
}

.media-card .card-body {
    padding: 16px;
}

.media-card audio {
    max-width: 100%;
}

@media (max-width: 576px) {
    .media-preview {
        height: 200px;
    }
}

/* UI refresh: Kanit, softer surfaces and accessible game cards */
:root { --bs-font-sans-serif: 'Kanit', sans-serif; --eg-radius: 1.25rem; }
body { font-family: 'Kanit', sans-serif; color:#26324b; }
.navbar { backdrop-filter: blur(12px); }
.navbar-brand { letter-spacing:-.3px; }
.hero-section { overflow:hidden; }
.hero-title { letter-spacing:-.7px; line-height:1.25; }
.game-card,.feature-item { border-radius:var(--eg-radius); transition:transform .2s ease, box-shadow .2s ease; }
.game-card:hover,.public-game-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(37,55,95,.12); }
.public-game-card { display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid #edf0f6; border-radius:var(--eg-radius); box-shadow:0 6px 22px rgba(37,55,95,.055); transition:transform .2s ease,box-shadow .2s ease; }
.public-game-thumb { height:190px; position:relative; overflow:hidden; background:linear-gradient(135deg,#e8eaff,#dff7f2); }
.public-game-thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-placeholder { width:100%; height:100%; display:grid; place-items:center; color:#6759d9; font-size:4rem; background:radial-gradient(circle at 20% 20%,#fff 0,transparent 35%),linear-gradient(135deg,#e8eaff,#dff7f2); }
.public-game-type { position:absolute; left:14px; top:14px; background:rgba(255,255,255,.93); color:#5146b9; border-radius:999px; padding:5px 12px; font-size:.78rem; font-weight:500; }
.empty-games { border:1px dashed #d9deeb; }
.btn { border-radius:.8rem; font-weight:500; }
.form-control,.form-select { border-radius:.75rem; }
.card { border-radius:1.1rem; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

/* Typography and admin control center */
body { font-family: 'Kanit', sans-serif; }
.admin-shell { max-width: 1440px; }
.admin-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(24px,4vw,42px); color:#fff; border-radius:26px; background:linear-gradient(120deg,#273caa 0%,#5267d8 52%,#8a78ed 100%); box-shadow:0 18px 42px rgba(65,80,190,.2); }
.admin-hero:after { content:''; position:absolute; width:280px;height:280px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:8%;top:-150px;box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.035); }
.admin-hero-content,.admin-hero-icon { position:relative; z-index:1; }
.admin-eyebrow { font-size:.76rem;letter-spacing:.12em;font-weight:500;opacity:.8;margin-bottom:12px; }
.admin-hero p { color:rgba(255,255,255,.82); }
.admin-hero-icon { display:grid;place-items:center;width:88px;height:88px;flex:0 0 88px;border-radius:24px;background:rgba(255,255,255,.15);font-size:2.7rem; }
.admin-layout { display:grid;grid-template-columns:235px minmax(0,1fr);gap:26px;align-items:start; }
.admin-sidebar,.admin-panel,.admin-stat-card { background:#fff;border:1px solid #edf0f8;border-radius:20px;box-shadow:0 8px 28px rgba(31,48,92,.045); }
.admin-sidebar { padding:14px;position:sticky;top:92px; }
.admin-sidebar-label { color:#9aa4b8;font-size:.75rem;font-weight:600;padding:10px 12px 14px;letter-spacing:.06em; }
.admin-menu-link { display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;text-decoration:none;color:#64708a;font-weight:400;margin-bottom:4px;transition:all .18s ease; }
.admin-menu-link i { font-size:1.12rem;width:22px;text-align:center; }
.admin-menu-link:hover { background:#f5f6ff;color:#4257c7; }
.admin-menu-link.active { background:#eef0ff;color:#4055c5;font-weight:500; }
.admin-menu-count { margin-left:auto;font-size:.75rem;background:#fff;padding:2px 8px;border-radius:20px; }
.admin-sidebar-footer { border-top:1px solid #edf0f8;margin-top:15px;padding:17px 10px 7px;font-size:.78rem;color:#8993a7;line-height:1.8;overflow-wrap:anywhere; }
.admin-sidebar-footer strong { color:#34415c;font-size:.9rem; }
.admin-section-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 22px; }
.admin-section-heading p { font-size:.9rem; }
.admin-live,.admin-total-pill { display:inline-flex;align-items:center;gap:8px;border:1px solid #e9edf5;background:#fff;padding:7px 12px;border-radius:99px;font-size:.78rem;color:#66728a;white-space:nowrap; }
.admin-live span { width:7px;height:7px;border-radius:50%;background:#22b573;box-shadow:0 0 0 4px #e5f8ef; }
.admin-stat-card { padding:20px;height:100%;transition:transform .2s ease,box-shadow .2s ease; }
.admin-stat-card:hover { transform:translateY(-3px);box-shadow:0 14px 32px rgba(31,48,92,.09); }
.admin-stat-top { display:flex;align-items:center;justify-content:space-between;gap:8px;color:#78839a;font-size:.82rem; }
.admin-stat-icon,.quick-icon { display:grid;place-items:center;width:42px;height:42px;border-radius:13px;font-size:1.2rem;flex:0 0 auto; }
.admin-stat-icon.violet,.quick-icon.violet { background:#eeedff;color:#7060dc; }
.admin-stat-icon.green,.quick-icon.green { background:#e4f8ef;color:#1aab70; }
.admin-stat-icon.orange,.quick-icon.orange { background:#fff2e2;color:#ed9b37; }
.admin-stat-icon.blue,.quick-icon.blue { background:#e5f2ff;color:#3988dc; }
.admin-stat-number { font-size:clamp(1.65rem,2.5vw,2.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.4;margin-top:12px;color:#273550; }
.admin-stat-note { font-size:.76rem;color:#a0a9ba; }
.admin-panel { overflow:hidden; }
.admin-panel-heading { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;border-bottom:1px solid #f0f2f8; }
.admin-recent-item { display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #f2f4f8; }
.admin-recent-item:last-child { border-bottom:0; }
.admin-game-icon { display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;background:#f0f1ff;color:#5a69d7;border-radius:13px;font-size:1.2rem; }
.min-w-0 { min-width:0; }
.admin-quick-links { padding:8px 20px 12px; }
.admin-quick-links a { display:flex;align-items:center;gap:12px;padding:13px 0;text-decoration:none;color:#35415b;border-bottom:1px solid #f1f3f8; }
.admin-quick-links a:last-child { border-bottom:0; }
.admin-quick-links a>span:nth-child(2) { display:flex;flex-direction:column;gap:2px; }
.admin-quick-links strong { font-size:.88rem;font-weight:500; }
.admin-quick-links small { font-size:.76rem;color:#8b96aa; }
.admin-quick-links a>i { color:#a8b0bf;font-size:.8rem; }
.admin-quick-links a:hover strong { color:#5267d8; }
.admin-health-note { padding:13px 18px;background:#f6f7ff;color:#7c86a0;font-size:.76rem; }
.admin-empty { padding:30px;text-align:center;color:#9ba5b7; }.admin-empty i { font-size:2rem; }.admin-empty p { margin:8px 0 0; }
.admin-table thead th { background:#f8f9fd;color:#7c879c;font-size:.76rem;font-weight:500;white-space:nowrap;border-bottom:1px solid #edf0f7;padding:16px; }
.admin-table tbody td { padding:15px 16px;border-color:#f0f2f7; }
.admin-table tbody tr:last-child td { border-bottom:0; }
.admin-avatar { display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#eef0ff;color:#4e60ca;font-weight:500;flex:0 0 auto; }
.admin-settings-form { max-width:820px; }
.admin-settings-form .form-control { border-color:#e5e9f2;border-radius:12px; }
.admin-settings-form .form-control:focus { border-color:#9ba7f4;box-shadow:0 0 0 .2rem rgba(82,103,216,.12); }
.admin-shell .btn { border-radius:10px; }
@media(max-width:991.98px) { .admin-layout { grid-template-columns:1fr;gap:18px; }.admin-sidebar { position:static;display:flex;gap:6px;overflow-x:auto;padding:10px; }.admin-sidebar-label,.admin-sidebar-footer { display:none; }.admin-menu-link { flex:0 0 auto;margin:0;padding:10px 13px; }.admin-menu-count { display:none; } }
@media(max-width:575.98px) { .admin-hero { border-radius:20px; }.admin-hero-icon { width:58px;height:58px;flex-basis:58px;border-radius:17px;font-size:1.8rem; }.admin-section-heading { align-items:flex-start; }.admin-live { display:none; }.admin-stat-card { padding:15px; }.admin-stat-top { align-items:flex-start; }.admin-stat-icon { width:34px;height:34px;border-radius:10px; }.admin-table { min-width:850px; } }


/* Final design system: enforce the requested Kanit typeface consistently. */
html, body, button, input, textarea, select, .btn, .form-control, .form-select, .navbar, .dropdown-menu, .table, .modal, .alert { font-family: 'Kanit', sans-serif !important; }
body { background: #f7f8fc; }
.public-library-hero { color:#fff; background: radial-gradient(circle at 85% 20%,rgba(255,255,255,.2),transparent 28%),linear-gradient(125deg,#263b9b,#5b65d8 58%,#8875e8); }
.public-library-hero p { color:rgba(255,255,255,.82); }
.public-game-thumb { height:220px; }
.public-game-thumb img { display:block; }
/* Admin: clear hierarchy, stable table layout, responsive navigation and readable forms. */
.admin-shell { width:min(100% - 24px, 1440px); max-width:1440px; }
.admin-hero { min-height:180px; }
.admin-layout { grid-template-columns:245px minmax(0,1fr); gap:22px; }
.admin-main { min-width:0; }
.admin-sidebar { background:#fff; border:1px solid #e8ebf4; }
.admin-menu-link { min-height:46px; font-size:.96rem; }
.admin-section-heading h2 { letter-spacing:-.02em; }
.admin-panel { background:#fff; border:1px solid #e8ebf4; box-shadow:0 10px 30px rgba(32,48,88,.045); }
.admin-table { min-width:760px; }
.admin-table th,.admin-table td { vertical-align:middle; }
.admin-table td strong { font-weight:500; }
.admin-table .btn { white-space:nowrap; }
.admin-stat-card { border-color:#e8ebf4; }
.admin-settings-form { width:100%; max-width:860px; }
.admin-settings-form .form-control { min-height:48px; }
.admin-shell .badge { font-weight:500; padding:.5em .75em; }
@media (max-width: 991.98px) { .admin-layout { grid-template-columns:minmax(0,1fr); }.admin-sidebar { display:flex; flex-wrap:nowrap; overflow-x:auto; }.admin-menu-link { flex:0 0 auto; }.admin-main { width:100%; } }
@media (max-width: 575.98px) { .admin-shell { width:min(100% - 16px,1440px); padding-top:1rem!important; }.admin-hero { padding:22px 18px; }.admin-hero-icon { display:none; }.admin-sidebar { gap:4px; }.admin-menu-link { padding:9px 11px; font-size:.88rem; }.admin-table { min-width:820px; }.public-game-thumb { height:190px; } }


/* Final polish: compact game previews and enforce Kanit consistently. */
html, body, body *, button, input, textarea, select { font-family: 'Kanit', sans-serif !important; }
.public-game-thumb { height: 156px !important; aspect-ratio: 16 / 9; }
.public-game-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (max-width: 575.98px) { .public-game-thumb { height: 148px !important; } }