/* Custom styles for Calculators.Games */
.calculator-input:focus { outline: none; ring: 2px; ring-color: #3b82f6; }
.dark { color-scheme: dark; }
* { transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.3s; }
.prose h2 { margin-top: 2em; font-size: 1.5em; font-weight: bold; }
.prose p { margin-bottom: 1.25em; line-height: 1.75; }
.prose a { color: #3b82f6; text-decoration: underline; }

/* --- NEW: Styles for TOC Sidebar Layout (from reference) --- */
.prose h2, .prose h3, .prose h4 {
    scroll-margin-top: 140px; /* Offset for sticky header + breadcrumb */
}
body.admin-bar-visible .prose h2,
body.admin-bar-visible .prose h3,
body.admin-bar-visible .prose h4 {
    scroll-margin-top: 182px; /* Offset + admin bar */
}

/* Sticky Breadcrumb */
.sticky-breadcrumb {
    position: fixed;
    top: 64px; /* Height of main nav */
    left: 0;
    right: 0;
    z-index: 40; /* Below main nav (50) */
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
.dark .sticky-breadcrumb {
    background: rgba(31, 41, 55, 0.9); /* gray-800 */
    border-bottom-color: #4b5563; /* gray-600 */
}
.sticky-breadcrumb.visible {
    transform: translateY(0);
}
body.admin-bar-visible .sticky-breadcrumb {
    top: 106px; /* 64px nav + 42px admin bar */
}

/* Progress Bar */
.sticky-progress-container {
    position: relative;
    overflow: hidden;
}
.sticky-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    transition: width 0.05s linear;
    width: 0%;
}

/* Sticky Sidebar */
.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 140px; /* 64px nav + 48px breadcrumb + 28px margin */
    height: fit-content;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    z-index: 20;
}
body.admin-bar-visible .sidebar-sticky {
    top: 182px; /* 140px + 42px admin bar */
}

/* Table of Contents Links */
.toc-link {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: #4b5563; /* gray-600 */
    border-left: 4px solid transparent;
}
.dark .toc-link {
    color: #d1d5db; /* gray-300 */
}
.toc-link:hover {
    background: #f3f4f6; /* gray-100 */
    color: #1f2937; /* gray-800 */
}
.dark .toc-link:hover {
    background: #374151; /* gray-700 */
    color: #f9fafb; /* gray-50 */
}

/* TOC H3 style */
.toc-link.toc-h3 {
    padding-left: 28px; /* Indent H3s */
    font-size: 0.8rem;
}

/* TOC Active Link */
.active-toc-link {
    background: #dbeafe; /* blue-100 */
    color: #2563eb; /* blue-600 */
    font-weight: 600;
    border-left-color: #2563eb;
}
.dark .active-toc-link {
    background: #1e3a8a; /* blue-900 */
    color: #dbeafe; /* blue-100 */
    border-left-color: #3b82f6;
}

/* Responsive Table Wrapper */
.table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    margin: 24px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}
.dark .table-wrapper {
    border-color: #4b5563;
}
.table-wrapper table {
    width: 100% !important;
    min-width: 600px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Floating Action Buttons */
.floating-actions {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    border: none;
}
.floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Mobile TOC Panel */
.mobile-toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 60;
    display: none;
}
.mobile-toc-overlay.show {
    display: block;
}
.mobile-toc-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 80vw;
    height: 100vh;
    background: white;
    z-index: 65;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.dark .mobile-toc-panel {
    background: #1f2937; /* gray-800 */
}
.mobile-toc-panel.show {
    right: 0;
}