/* ===================================================================
   RO Classic — "soft" layer (owner 2026-09-19, inspired by COCO-RO):
   same night colours, but rounded glass panels, pill navigation and
   buttons, taller rounded inputs and floating sparkles.
   Loaded last (inc/head_script.php) so it only reshapes, never recolours.
   =================================================================== */
:root {
    --soft-r-xl: 26px;
    --soft-r-lg: 20px;
    --soft-r-md: 14px;
    --soft-panel: rgba(13, 19, 44, .72);
    --soft-panel-2: rgba(20, 28, 62, .78);
    --soft-line: rgba(120, 160, 255, .18);
    --soft-line-2: rgba(120, 160, 255, .32);
    --soft-glow: 0 18px 44px -24px rgba(2, 6, 23, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ---------- navbar: frosted bar, pill links, pill CTA ---------- */
.navbar {
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    background: rgba(8, 12, 30, .78) !important;
    border-bottom: 1px solid var(--soft-line) !important;
    box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9) !important;
}
.navbar .nav-link {
    border-radius: 999px !important;
    padding: .5rem .95rem !important;
    transition: background .15s ease, color .15s ease;
}
.navbar .nav-link:hover { background: rgba(96, 165, 250, .10); }
.navbar .nav-link.active,
.navbar .nav-item.show > .nav-link { background: rgba(96, 165, 250, .16) !important; box-shadow: inset 0 0 0 1px var(--soft-line-2); }
.navbar .dropdown-menu {
    border-radius: var(--soft-r-lg) !important;
    border: 1px solid var(--soft-line-2) !important;
    background: rgba(12, 17, 40, .96) !important;
    padding: .5rem !important;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9) !important;
}
.navbar .dropdown-item, .navbar .dropdown-menu .nav-link { border-radius: 12px !important; }

/* ---------- panels: every page title + content becomes one rounded glass card ---------- */
.box_main > .container:has(> .title_head),
.box_main > .container:has(> h3.title_head),
.soft-panel {
    background: var(--soft-panel);
    border: 1px solid var(--soft-line);
    border-radius: var(--soft-r-xl);
    box-shadow: var(--soft-glow);
    padding: 1.4rem 1.6rem 1.8rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.title_head {
    display: flex; align-items: center; gap: .4rem;
    font-size: 1.25rem !important;
    padding-bottom: .9rem; margin-bottom: 1.4rem !important;
    border-bottom: 1px solid var(--soft-line);
}
.box_con, .card, .modal-content, .accordion-item, .list-group {
    border-radius: var(--soft-r-lg) !important;
}
.card {
    background: var(--soft-panel-2) !important;
    border: 1px solid var(--soft-line) !important;
    box-shadow: var(--soft-glow) !important;
    overflow: hidden;
}
.box_con { border: 1px solid var(--soft-line); box-shadow: var(--soft-glow); }
.card-header { border-bottom: 1px solid var(--soft-line) !important; background: transparent !important; }

/* ---------- form controls ---------- */
.form-control, .form-select, .input-group-text {
    border-radius: var(--soft-r-md) !important;
    min-height: 46px;
    border: 1px solid var(--soft-line-2) !important;
    background-color: rgba(6, 10, 26, .6) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 96px; }
.form-control:focus, .form-select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, .18) !important;
}
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control:not(:last-child), .input-group > .input-group-text:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.form-label { font-weight: 600; }

/* ---------- buttons ---------- */
.btn { border-radius: var(--soft-r-md) !important; font-weight: 700; }
.btn-lg { border-radius: 16px !important; }
.btn-sm { border-radius: 10px !important; }
.btn-primary {
    border: 0 !important;
    background: linear-gradient(135deg, #3b82f6, #6d28d9) !important;
    box-shadow: 0 10px 22px -12px rgba(59, 130, 246, .9) !important;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary.w-100, form .btn-primary.w-100 { min-height: 48px; border-radius: 999px !important; }
.alert { border-radius: var(--soft-r-md) !important; }
.badge { border-radius: 999px; }
.pagination .page-link { border-radius: 10px !important; margin: 0 2px; }
.table-responsive { border-radius: var(--soft-r-md); }

/* ---------- login / register: centred inner card like a form sheet ---------- */
.box_main > .container:has(> .title_head) .card {
    background: rgba(18, 26, 58, .85) !important;
    border-radius: var(--soft-r-lg) !important;
}

/* ---------- floating sparkles in the page background ---------- */
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
    background-image:
        radial-gradient(2px 2px at 12% 22%, rgba(191, 219, 254, .9), transparent 60%),
        radial-gradient(2px 2px at 78% 14%, rgba(196, 181, 253, .9), transparent 60%),
        radial-gradient(1.6px 1.6px at 36% 68%, rgba(191, 219, 254, .8), transparent 60%),
        radial-gradient(2.2px 2.2px at 88% 72%, rgba(147, 197, 253, .8), transparent 60%),
        radial-gradient(1.4px 1.4px at 55% 38%, rgba(224, 231, 255, .8), transparent 60%),
        radial-gradient(1.8px 1.8px at 22% 88%, rgba(196, 181, 253, .7), transparent 60%);
    animation: soft-twinkle 6s ease-in-out infinite alternate;
}
@keyframes soft-twinkle { from { opacity: .25; transform: translateY(0); } to { opacity: .7; transform: translateY(-12px); } }
.box_main { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

@media (max-width: 575px) {
    .box_main > .container:has(> .title_head),
    .soft-panel { border-radius: 20px; padding: 1.1rem .95rem 1.4rem; margin-left: .6rem; margin-right: .6rem; width: auto; }
    .title_head { font-size: 1.1rem !important; }
}

/* ---------- cute font everywhere (same Mali as play.roclassic.com) ---------- */
body, body *:not(i):not(code):not(pre):not(kbd):not(samp) {
    font-family: 'Mali', 'Noto Sans Thai', system-ui, sans-serif !important;
}
body { letter-spacing: .005em; }
h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .title_head, .section-heading { font-weight: 700 !important; }