@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap');

/* Cass Casino Theme - Dark Premium Green & Gold */
:root {
    /* Cass Base Colors (Always available for reference) */
    --cass-bg-page: #021a0f;
    --cass-bg-panel: #0a2f1c;
    --cass-bg-card: rgba(10, 47, 28, 0.8);
    --cass-bg-overlay: rgba(0, 0, 0, 0.7);
    --cass-gold: #d4af37;
    --cass-gold-light: #f3e5ab;
    --cass-gold-dark: #aa8c2c;
    --cass-text-primary: #e5e7eb;
    --cass-text-secondary: #9ca3af;
    --cass-text-muted: #6b7280;
    --cass-border: rgba(212, 175, 55, 0.2);
    --cass-border-highlight: rgba(212, 175, 55, 0.5);
}

/* [LIGHT MODE DEFINITIONS] - High Visibility Day Mode */
html[data-theme="light"] {
    /* High Contrast / Visibility Focus */
    --bg-body: #f0f2f5;
    /* Light Gray Background */
    --bg-card: #ffffff;
    /* White Card */
    --bg-panel: #ffffff;
    /* White Panel */
    --bg-input: #ffffff;
    /* White Input */
    --bg-overlay: rgba(255, 255, 255, 0.9);

    --border-color: #cbd5e1;
    /* Slate-300 - Distinct Border */
    --border-highlight: #94a3b8;
    /* Slate-400 */

    --text-main: #0f172a;
    /* Slate-900 - Deep Black/Blue for Text */
    --text-sub: #334155;
    /* Slate-700 - Darker Subtext for Clarity */
    --text-muted: #64748b;
    /* Slate-500 - Much Darker Muted Text (Not Faint) */

    /* Brand Colors adjusted for Light Mode visibility */
    --brand-color: #d4af37;
    /* Keep Gold brand */
    --brand-color-dark: #bfa15f;
    --accent-color: #059669;
    /* Emerald-600 for positive/active actions (High contrast) */

    /* Cass Theme Mapping */
    --cass-bg-page: var(--bg-body);
    --cass-bg-panel: var(--bg-panel);
    --cass-bg-card: var(--bg-card);
    --cass-border: var(--border-color);
    --cass-text-primary: var(--text-main);
    --cass-text-secondary: var(--text-sub);
}

/* [DARK MODE OVERRIDES] - Only apply when data-theme is 'dark' or not set (default) */
html[data-theme="dark"],
html:not([data-theme="light"]) {
    /* Global Overrides - Mapping Standard Variables to Cass Theme */
    --bg-body: #021a0f;
    --bg-card: rgba(10, 47, 28, 0.8);
    --bg-input: #0a2f1c;
    --border-color: rgba(212, 175, 55, 0.2);

    --text-main: #e5e7eb;
    --text-sub: #9ca3af;

    --brand-color: #d4af37;
    --brand-color-dark: #aa8c2c;
    --accent-color: #f3e5ab;

    --text-color: var(--text-main);
}

/* Backgrounds & Layout - Dark Mode Specific */
html[data-theme="dark"] body,
html:not([data-theme="light"]) body {
    background-color: #021a0f !important;

    /* Layered Background: Spotlight, Felt Texture, Vignette */
    background-image:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
        url('table_texture.svg');

    background-repeat: no-repeat, repeat !important;
    background-size: cover, 120px !important;
    background-blend-mode: overlay, soft-light !important;

    /* Strong Vignette */
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.95) !important;

    color: var(--cass-text-primary) !important;
    min-height: 100vh;
}

/* Light Mode Body Override */
html[data-theme="light"] body {
    background: var(--bg-body) !important;
    /* Remove dark textures */
    background-image: none !important;
    color: var(--text-main) !important;
}

/* Font Family is global, no need to scope unless different for light mode */
/* [RESTORED] Use Pretendard from style.css */

#master-layout,
.master-container {
    background: transparent !important;
    position: relative;
    z-index: 10;
}

/* Sidebar & Navigation */
#sidebar-nav-container,
.sidebar {
    background-color: var(--cass-bg-panel) !important;
    border-right: 1px solid var(--cass-border) !important;
}

#desktop-nav-container {
    background-color: transparent !important;
    /* Fixed: Unify with Nav Header */
    /* border-bottom: 1px solid var(--cass-border) !important; */
    border: none !important;
    backdrop-filter: none;
}

/* Menu Items (Exact Replica of Reference) */
.nav-item,
.sidebar-menu-item {
    color: var(--cass-text-secondary) !important;
    font-weight: 700 !important;
    /* Bold */
    font-size: 0.875rem !important;
    /* text-sm */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    /* tracking-wide */
    transition: all 0.2s ease;
}

.nav-item:hover,
.nav-item.active {
    color: var(--cass-gold) !important;
    background-color: transparent !important;
    /* Reference doesn't have bg on hover for top menu */
}

/* Sidebar items can keep the bg hover */
.sidebar-menu-item:hover,
.sidebar-menu-item.active {
    color: var(--cass-gold) !important;
    background-color: rgba(212, 175, 55, 0.05) !important;
    border-left-color: var(--cass-gold);
}

/* Auth Buttons (Header) */
#auth-ui-target button,
.header-auth-btn {
    font-size: 0.75rem !important;
    /* text-xs */
    font-weight: 700 !important;
    padding: 0.375rem 0.75rem !important;
    /* py-1.5 px-3 */
    border-radius: 0.25rem !important;
    /* rounded */
    transition: all 0.2s;
}

/* Login Button - Bordered */
#auth-ui-target button:first-child {
    background-color: transparent !important;
    border: 1px solid var(--cass-border) !important;
    color: var(--cass-text-primary) !important;
}

#auth-ui-target button:first-child:hover {
    border-color: var(--cass-gold) !important;
    color: var(--cass-gold) !important;
}

/* Register Button - Gold Filled */
#auth-ui-target button:last-child {
    background-color: var(--cass-gold) !important;
    color: black !important;
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(212, 175, 55, 0.2) !important;
}

#auth-ui-target button:last-child:hover {
    background-color: #eab308 !important;
    /* dim gold */
}

/* Cards & Panels */
.post-card,
.board-card,
.widget-card {
    background-color: var(--cass-bg-card) !important;
    border: 1px solid var(--cass-border) !important;
    border-radius: 0.75rem !important;
    /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.post-card:hover {
    border-color: var(--cass-border-highlight) !important;
    transform: translateY(-2px);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Text Styles */
h1,
h2,
h3,
h4,
.section-title {
    color: var(--cass-text-primary) !important;
    /* [RESTORED] Use Default Global Font (Pretendard) */
    /* font-family: 'Playfair Display', serif; */
}

.gold-text {
    color: var(--cass-gold) !important;
    background: linear-gradient(to bottom, #f3e5ab, #d4af37, #aa8c2c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* Buttons */
.btn-primary,
.action-btn {
    background-color: var(--cass-gold) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: none !important;
    transition: filter 0.2s;
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--cass-border) !important;
    color: var(--cass-text-primary) !important;
}

.btn-secondary:hover {
    border-color: var(--cass-gold) !important;
    color: var(--cass-gold) !important;
}

/* Tables (Board List) */
.board-table,
.post-list-table {
    border-color: var(--cass-border) !important;
}

.board-table th,
.board-list-header {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: var(--cass-text-secondary) !important;
    border-bottom: 2px solid var(--cass-border) !important;
}

.board-table td,
.board-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--cass-text-primary);
}

.board-list-item:hover {
    background-color: rgba(212, 175, 55, 0.02) !important;
}

/* Inputs */
input,
select,
textarea {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--cass-border) !important;
    color: var(--cass-text-primary) !important;
}

input:focus,
textarea:focus {
    border-color: var(--cass-gold) !important;
    outline: none !important;
}

/* Mobile Specifics */
@media (max-width: 768px) {
    #mobile-nav-container {
        background-color: var(--cass-bg-page) !important;
        border-right: 1px solid var(--cass-border) !important;
    }
}

/* [Emergency Override] Force Text-Only Nav Style & Sticky Header */

/* Sticky Header Logic */
/* Sticky Header Logic -> Fixed Header [Corrected] */
nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 5rem !important;
    z-index: 9999 !important;
    /* Color Swap: Nav gets the Green (#053a22) with opacity -> Now matching Body (#021a0f) */
    background-color: rgba(2, 26, 15, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--cass-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Force container to fill height */
nav>div {
    height: 100% !important;
}

/* Desktop Nav Items - [RESTORED] Button Style from style.css (gnb-btn) */
/* The above Nuclear Reset is intentionally removed to allow style.css to take precedence */

/* Dropdown Menu */
#desktop-nav-container .absolute {
    top: 100% !important;
    margin-top: 0 !important;
    /* Attached to header */
    border-color: var(--cass-border) !important;
    background-color: var(--cass-bg-panel) !important;
}

/* [FORCE OVERRIDE] Ensure Top Menu & Auth Font is Clean Gothic (Pretendard) */
.gnb-btn,
.mb-center-label,
#auth-ui-target button,
.header-auth-btn {
    font-family: 'Pretendard', sans-serif !important;
}

/* [FORCE OVERRIDE] Top Menu Button Style (Match Admin Button) */
/* [FORCE OVERRIDE] Top Menu Button Style (Match Admin Button) */
/* [FORCE OVERRIDE] Top Menu Button Style (Clean Text Only) */
.gnb-btn {
    border: none !important;
    border-radius: 0.25rem !important;
    padding: 0.375rem 0.75rem !important;
    transition: all 0.2s ease !important;
    color: #ffffff !important;
    /* Default Night Mode: White */
    background-color: transparent !important;
}

/* Light Mode: Default Text Black */
html[data-theme="light"] .gnb-btn {
    color: #000000 !important;
    border: none !important;
}

/* Hover State - Scale/Opacity only (No Box) */
#desktop-nav-container .gnb-btn:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateY(-1px);
    opacity: 0.8;
}

/* Hover Text - Gold */
#desktop-nav-container .gnb-btn:hover>span,
#desktop-nav-container .gnb-btn:hover>div:not(.nav-dropdown) {
    color: #d4af37 !important;
}

/* [FORCE OVERRIDE] Dropdown Menu Style - ABM (Anti-Bleed/Mode) Standard */
/* NO ":hover" on parent should ever touch this background */
#desktop-nav-container .nav-item-wrapper .nav-dropdown,
.nav-dropdown {
    display: none;
    /* Default hidden */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    z-index: 9999 !important;
    /* Always on top */
    opacity: 1 !important;
    /* NEVER TRANSPARENT */
    background-color: #0a2f1c !important;
    /* Dark Mode Default Green */
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    backdrop-filter: none !important;
    /* Disable blur to ensure solid color */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto;
}

/* Show on Hover */
#desktop-nav-container .nav-item-wrapper:hover .nav-dropdown,
.gnb-btn:hover .nav-dropdown {
    display: block !important;
    background-color: #0a2f1c !important;
    /* Re-affirm Green on Hover */
}

/* [FORCE OVERRIDE] Dropdown Menu Style - Light Mode */
html[data-theme="light"] #desktop-nav-container .nav-item-wrapper:hover .nav-dropdown,
html[data-theme="light"] #desktop-nav-container .nav-item-wrapper .nav-dropdown,
html[data-theme="light"] .nav-dropdown {
    background-color: #ffffff !important;
    /* PURE WHITE */
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure Dropdown Text Visibility */
.nav-dropdown div,
.nav-dropdown a,
.nav-drop-link {
    color: #e5e7eb !important;
    /* Light Text Default */
    background-color: transparent !important;
    /* Items are transparent, container is colored */
}

html[data-theme="light"] .nav-dropdown div,
html[data-theme="light"] .nav-dropdown a,
html[data-theme="light"] .nav-drop-link {
    color: #1e293b !important;
    /* Dark Text for Light Mode */
}

.nav-dropdown div:hover,
.nav-drop-link:hover {
    color: #d4af37 !important;
    /* Slight dim on hover */
}

/* [3D Dice Animation] */
.dice-scene {
    perspective: 600px;
    width: 2.5rem;
    height: 2.5rem;
}

.dice-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-1.25rem);
    animation: rotateDice 10s infinite linear;
}

.dice-face {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #374151, #111827);
    /* Onyx Black */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    /* Making corners smoother */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Dots Styling */
.dot {
    width: 8px;
    /* Larger dots */
    height: 8px;
    background-color: #ffffff;
    /* Pure white */
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Face positions */
.face-front {
    transform: rotateY(0deg) translateZ(1.25rem);
}

.face-right {
    transform: rotateY(90deg) translateZ(1.25rem);
}

.face-back {
    transform: rotateY(180deg) translateZ(1.25rem);
}

.face-left {
    transform: rotateY(-90deg) translateZ(1.25rem);
}

.face-top {
    transform: rotateX(90deg) translateZ(1.25rem);
}

.face-bottom {
    transform: rotateX(-90deg) translateZ(1.25rem);
}

/* Dot Layouts */
.face-1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.face-2 {
    display: flex;
    justify-content: space-between;
    padding: 6px;
}

.face-2 .dot:nth-child(1) {
    align-self: flex-start;
}

.face-2 .dot:nth-child(2) {
    align-self: flex-end;
}

.face-3 {
    display: flex;
    justify-content: space-between;
    padding: 6px;
}

.face-3 .dot:nth-child(1) {
    align-self: flex-start;
}

.face-3 .dot:nth-child(2) {
    align-self: center;
}

.face-3 .dot:nth-child(3) {
    align-self: flex-end;
}

.face-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 6px;
    place-items: center;
}

.face-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 4px;
}

.face-5 .dot:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.face-5 .dot:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.face-5 .dot:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: center;
}

.face-5 .dot:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    align-self: center;
}

.face-5 .dot:nth-child(5) {
    grid-column: 3;
    grid-row: 3;
    justify-self: center;
    align-self: center;
}

.face-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px;
    place-items: center;
}

@keyframes rotateDice {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(720deg);
    }
}

.dice-scene:hover .dice-cube {
    animation-play-state: paused;
}

.dice-scene:hover {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

/* [Logo Shine Animation] */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    animation: shineMove 3.5s infinite ease-in-out;
    pointer-events: none;
}

@keyframes shineMove {
    0% {
        left: -150%;
    }

    20%,
    100% {
        left: 150%;
    }

    /* Fast pass, then wait */
}

/* [Gold Hover Effect Enforcement] - Strong Override */
.hover-gold-border {
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Ensure border exists initially to prevent layout shift */
    border: 1px solid transparent;
}

/* If element has existing border, we expect it to be handled by utilities. 
   But to be safe, we can default it if it's not present. 
   However, we don't want to override default border color if not hovered. */

.hover-gold-border:hover {
    border: 1px solid #D4AF37 !important;
    /* Gold Border */
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.1) !important;
    /* Premium Glow */
    transform: translateY(-2px);
    z-index: 50 !important;
}