/* ─── Base ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #fff; color: #111; transition: background 0.2s, color 0.2s; } /* ─── Dark mode body ─────────────────────────────────────────── */ html.dark body { background: #030712; color: #f9fafb; } /* ─── App container ──────────────────────────────────────────── */ #app { min-height: 100vh; transition: opacity 0.2s ease; } /* ─── Shared input classes ──────────────────────────────────── */ .inp-pub { padding: 0.625rem 1rem; border: 1px solid #d1d5db; border-radius: 0.75rem; background: white; color: #111; font-size: 0.875rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .inp-pub:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); } html.dark .inp-pub { background: #1f2937; border-color: #374151; color: #f9fafb; } html.dark .inp-pub:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.2); } .inp-dark { width: 100%; padding: 0.65rem 1rem; border: 1px solid #374151; border-radius: 0.75rem; background: #1f2937; color: #f9fafb; font-size: 0.875rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .inp-dark:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.25); } .inp-dark::placeholder { color: #6b7280; } /* ─── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #6b7280; } .no-scroll::-webkit-scrollbar { display: none; } .no-scroll { scrollbar-width: none; -ms-overflow-style: none; } /* ─── Dark mode scrollbar ────────────────────────────────────── */ html.dark ::-webkit-scrollbar-thumb { background: #374151; } html.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; } /* ─── Game card hover ────────────────────────────────────────── */ .game-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .game-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(139,92,246,.35); } /* ─── Line clamp ─────────────────────────────────────────────── */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ─── Portal nav active ──────────────────────────────────────── */ .portal-tab.active { background: #4c1d95; color: white; } /* ─── Toast container ────────────────────────────────────────── */ #toast-container { pointer-events: none; } /* ─── Animations ─────────────────────────────────────────────── */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .anim-in { animation: fadeSlideUp 0.3s ease-out; } /* ─── Game iframe fill ───────────────────────────────────────── */ #gframe { display: block; } /* ─── Roulette canvas ────────────────────────────────────────── */ #rlc { image-rendering: crisp-edges; cursor: default; } /* ─── Slot reel ──────────────────────────────────────────────── */ [id^="reel"] { user-select: none; line-height: 1; font-size: 2.75rem; } /* ─── Dark prose ─────────────────────────────────────────────── */ html.dark .prose { color: #d1d5db; } /* ─── Table ──────────────────────────────────────────────────── */ table { border-collapse: collapse; width: 100%; } /* ─── Theme toggle button: ensure icon is visible ───────────── */ .thm-btn { cursor: pointer; } .thm-btn i { pointer-events: none; } /* ─── Dark mode: ensure Tailwind dark: classes work ─────────── */ /* Tailwind requires 'dark' class on — already handled by Theme.apply() */ /* ─── School nav dark overrides ──────────────────────────────── */ html.dark .bg-white { background-color: #111827; } html.dark .text-gray-800 { color: #f1f5f9; } html.dark .text-gray-600 { color: #94a3b8; } html.dark .border-gray-200 { border-color: #374151; } html.dark .bg-gray-100 { background-color: #1f2937; } html.dark .bg-gray-50 { background-color: #111827; } /* ─── Responsive tweaks ──────────────────────────────────────── */ @media (max-width: 480px) { .portal-tab span { display: none; } } /* ─── Admin table ────────────────────────────────────────────── */ .admin-tab { transition: background 0.15s, color 0.15s; } /* ─── Plinko canvas responsive ───────────────────────────────── */ #plc { max-width: 100%; height: auto; }