/* Canuck Arcade - Complete Premium Override */
/* Aggressively removes ALL orange and fixes text visibility */

:root {
    --dark: #0a0a0f;
    --dark-card: #14141f;
    --dark-hover: #1a1a2e;
    --accent: #6366f1;
    --accent-light: #818cf8;
    --text: #ffffff;
    --text-muted: #9ca3af;
    --border: rgba(99, 102, 241, 0.15);
}

/* Complete reset */
* {
    box-sizing: border-box;
}

body {
    background: var(--dark) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

body::before,
body::after {
    display: none !important;
    content: none !important;
}

/* Force text visibility - but allow overrides for specific elements */
body {
    color: #ffffff !important;
}

/* Make sure text is visible in all text elements - override inline styles */
h1, h2, h3, h4, h5, h6, p, span, div, a, li, td, th, label {
    color: #ffffff !important;
}

/* Buttons have white text */
button {
    color: #ffffff !important;
}

/* Override any inline styles that might hide text */
[style*="color: transparent"],
[style*="color:rgba(0,0,0,0)"] {
    color: #ffffff !important;
}

/* Remove ALL orange - aggressive override */
.bg-orange-100,
.bg-orange-50,
.bg-orange-200,
.bg-orange-300,
.bg-orange-400,
.bg-orange-500,
.bg-orange-600,
.bg-orange-700,
.bg-orange-800,
.bg-orange-900,
[class*="bg-orange"],
[class*="orange"] {
    background: var(--dark-card) !important;
    background-color: var(--dark-card) !important;
}

.text-orange-100,
.text-orange-50,
.text-orange-200,
.text-orange-300,
.text-orange-400,
.text-orange-500,
.text-orange-600,
.text-orange-700,
.text-orange-800,
.text-orange-900,
[class*="text-orange"] {
    color: var(--accent) !important;
}

.border-orange-100,
.border-orange-200,
.border-orange-300,
.border-orange-400,
.border-orange-500,
.border-orange-600,
.border-orange-700,
.border-orange-800,
.border-orange-900,
[class*="border-orange"] {
    border-color: var(--border) !important;
}

.from-orange-50,
.from-orange-100,
.from-orange-200,
.from-orange-300,
.from-orange-400,
.from-orange-500,
.from-orange-600,
.from-orange-700,
.from-orange-800,
.from-orange-900,
[class*="from-orange"] {
    --tw-gradient-from: var(--accent) !important;
}

.via-orange-500,
.via-orange-600,
[class*="via-orange"] {
    --tw-gradient-stops: var(--accent), var(--accent-light) !important;
}

.to-orange-50,
.to-orange-500,
.to-orange-600,
[class*="to-orange"] {
    --tw-gradient-to: var(--accent-light) !important;
}

.hover\:bg-orange-50:hover,
.hover\:text-orange-600:hover,
.hover\:text-orange-700:hover,
.hover\:border-orange-200:hover,
.hover\:from-orange-500:hover,
.hover\:from-orange-600:hover,
.hover\:to-orange-500:hover,
[class*="hover"][class*="orange"]:hover {
    background: var(--dark-hover) !important;
    color: var(--accent-light) !important;
    border-color: var(--border) !important;
}

.group:hover .group-hover\:from-orange-500,
.group:hover .group-hover\:text-orange-600 {
    --tw-gradient-from: var(--accent) !important;
    color: var(--accent) !important;
}

.focus\:border-orange-500:focus,
.focus\:ring-orange-500:focus {
    border-color: var(--accent) !important;
    --tw-ring-color: var(--accent) !important;
}

/* Base styles */
body {
    background: var(--dark) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

body::before,
body::after {
    display: none !important;
    content: none !important;
}

/* Header */
header,
nav,
.bg-white,
.border-b-2,
.border-b-2.border-orange-100 {
    background: rgba(10, 10, 15, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(99, 102, 241, 0.1) !important;
}

/* Brand text - force indigo */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-r.from-orange-600.via-red-600.to-pink-600,
.bg-gradient-to-r.from-orange-500.to-red-500,
.bg-gradient-to-r.from-orange-600.to-red-600 {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.group-hover\:from-orange-500.group:hover,
.group-hover\:via-red-500.group:hover,
.group-hover\:to-pink-500.group:hover {
    --tw-gradient-from: var(--accent) !important;
    --tw-gradient-stops: var(--accent), var(--accent-light) !important;
    --tw-gradient-to: var(--accent-light) !important;
}

/* Cards */
.rounded-xl,
.shadow-md,
.shadow-lg,
.bg-white,
.bg-slate-50 {
    background: var(--dark-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    color: var(--text) !important;
}

.rounded-xl:hover,
.shadow-md:hover,
.shadow-lg:hover {
    background: var(--dark-hover) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Buttons */
button,
button.bg-gradient-to-r,
button.bg-gradient-to-br,
button.bg-gradient-to-r.from-orange-500.to-red-500,
button.bg-gradient-to-r.from-orange-600.to-red-600 {
    background: var(--accent) !important;
    background-color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-color: var(--accent) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

button:hover,
button.bg-gradient-to-r:hover,
button.bg-gradient-to-br:hover {
    background: var(--accent-light) !important;
    background-color: var(--accent-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

/* Game cards - minimal */
.rounded-xl h1,
.rounded-xl h2,
.rounded-xl h3,
.rounded-xl h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    color: var(--text) !important;
}

/* Hide excessive game info - but keep titles visible */
.rounded-xl [class*="description"],
.rounded-xl [class*="info"],
.rounded-xl [class*="stats"] {
    display: none !important;
}

/* Keep text visible but hide only long descriptions */
.rounded-xl p {
    display: none !important;
}

/* Keep small text in buttons and titles */
.rounded-xl [class*="text-sm"]:not(button *):not(h1 *):not(h2 *):not(h3 *),
.rounded-xl [class*="text-xs"]:not(button *):not(h1 *):not(h2 *):not(h3 *) {
    display: none !important;
}

/* Text colors - force visibility */
.text-slate-700,
.text-slate-900,
.text-slate-800,
.text-slate-600 {
    color: var(--text) !important;
}

.text-slate-500,
.text-slate-400,
.text-slate-300 {
    color: var(--text-muted) !important;
}

.text-white {
    color: var(--text) !important;
}

/* Ensure all text elements are visible */
.text-emerald-600,
.text-emerald-700,
.text-cyan-600,
.text-blue-600,
.text-purple-600 {
    color: var(--accent) !important;
}

/* Sections */
.bg-slate-50,
.bg-slate-900,
.bg-gradient-to-br,
.bg-gradient-to-br.from-slate-50,
.bg-gradient-to-br.from-slate-900 {
    background: var(--dark) !important;
    color: var(--text) !important;
}

/* Forms */
input,
textarea,
select {
    background: var(--dark-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    padding: 10px 14px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

/* Links */
a {
    color: var(--accent) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--accent-light) !important;
}

/* Images - make sure they're visible - override inline styles */
img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
}

img[src=""],
img:not([src]) {
    display: none !important;
}

/* Override inline styles that might hide images */
img[style*="display: none"],
img[style*="visibility: hidden"],
img[style*="opacity: 0"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove all effects - but keep images visible */
* {
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
}

/* Ensure images in cards are visible */
.rounded-xl img,
.shadow-md img,
.shadow-lg img,
[class*="game"] img,
[class*="card"] img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Don't hide images with display none */
img[style*="display: none"],
img[style*="visibility: hidden"] {
    display: block !important;
    visibility: visible !important;
}

/* Typography - force visibility */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

p {
    color: #9ca3af !important;
}

/* Force all text to be visible */
span, div, a, li, td, th, label {
    color: #ffffff !important;
}

/* But allow muted text for descriptions */
.text-muted,
[class*="muted"],
[class*="text-slate-400"],
[class*="text-slate-500"] {
    color: #9ca3af !important;
}

/* Grid */
.grid {
    gap: 20px !important;
}

/* Footer */
footer,
.bg-gradient-to-br.from-slate-900 {
    background: var(--dark) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* Badge - remove orange */
.bg-orange-100.text-orange-700,
.bg-orange-50.text-orange-700 {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--accent-light) !important;
    border: 1px solid var(--border) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .grid {
        gap: 16px !important;
    }
}