/* Orbitron/Rajdhani/Michroma are loaded from index.html's now (see the comment there) — a CSS @import here would force the browser to fetch and parse this whole file before it could even discover the font request, adding a full extra render-blocking round-trip. */ @tailwind base; @tailwind components; @tailwind utilities; /* Admin-only aliases keep the control center aligned with the OtakuScouter brand without changing the geometry of the player-facing application. */ .admin-console { --radius: 0.75rem; --sidebar-background: 240 10% 6%; --sidebar-foreground: 0 0% 95%; --sidebar-primary: 270 80% 50%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 10% 11%; --sidebar-accent-foreground: 0 0% 95%; --sidebar-border: 240 10% 15%; --sidebar-ring: 188 86% 53%; background: radial-gradient(100% 70% at 50% -10%, hsl(var(--primary) / 0.08), transparent 60%), hsl(var(--background)); } .admin-grid { background-image: linear-gradient(hsl(var(--primary) / 0.025) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / 0.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 86%); } /* Legacy managers still use low-contrast zinc utilities. Raise their contrast inside the admin only while they are progressively moved to shared tokens. */ .admin-console .text-zinc-500, .admin-console .text-zinc-600 { color: hsl(var(--muted-foreground)); } @media (max-width: 767px) { .admin-console button:not([role="switch"]), .admin-console input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .admin-console *, .admin-console *::before, .admin-console *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ======================================== OTAKUSCOUTER - DARK NEON GAMER Solo Leveling / SAO System Interface ======================================== */ @layer base { :root { /* OtakuScouter original violet / gold identity, refined for contrast. */ --background: 240 13% 5.5%; --foreground: 0 0% 96%; /* Cards - dark with transparency */ --card: 240 13% 8.5%; --card-foreground: 0 0% 96%; --popover: 240 14% 10.5%; --popover-foreground: 0 0% 96%; /* Primary - DEEP VIOLET/PURPLE */ --primary: 270 84% 59%; --primary-foreground: 0 0% 100%; /* Secondary - GOLDEN YELLOW (accent partner) */ --secondary: 45 98% 56%; --secondary-foreground: 240 13% 5.5%; /* Muted - Dark grays */ --muted: 240 13% 14%; --muted-foreground: 240 5% 58%; /* Accent - GOLDEN YELLOW */ --accent: 45 98% 56%; --accent-foreground: 240 13% 5.5%; /* Destructive - NEON RED */ --destructive: 0 82% 58%; --destructive-foreground: 0 0% 96%; /* Success - NEON GREEN */ --success: 145 76% 48%; --success-foreground: 240 13% 5.5%; /* Warning - GOLDEN YELLOW */ --warning: 45 98% 56%; --warning-foreground: 240 13% 5.5%; /* Borders - very subtle */ --border: 240 12% 19%; --input: 240 14% 11%; --ring: 270 84% 59%; --radius: 0.9rem; /* Rank Colors */ --rank-e: 0 0% 50%; --rank-d: 145 80% 45%; --rank-c: 210 100% 55%; --rank-b: 270 80% 55%; --rank-a: 45 100% 50%; --rank-s: 340 90% 55%; --rank-ss: 45 100% 55%; } .dark { --background: 240 13% 5.5%; --foreground: 0 0% 96%; --card: 240 13% 8.5%; --card-foreground: 0 0% 96%; --popover: 240 14% 10.5%; --popover-foreground: 0 0% 96%; --primary: 270 84% 59%; --primary-foreground: 0 0% 100%; --secondary: 45 98% 56%; --secondary-foreground: 240 13% 5.5%; --muted: 240 13% 14%; --muted-foreground: 240 5% 58%; --accent: 45 98% 56%; --accent-foreground: 240 13% 5.5%; --destructive: 0 82% 58%; --destructive-foreground: 0 0% 96%; --success: 145 76% 48%; --success-foreground: 240 13% 5.5%; --warning: 45 98% 56%; --warning-foreground: 240 13% 5.5%; --border: 240 12% 19%; --input: 240 14% 11%; --ring: 270 84% 59%; } } @layer base { * { @apply border-border; } html { scroll-behavior: smooth; } body { @apply bg-background text-foreground antialiased; font-family: 'Rajdhani', sans-serif; min-height: 100vh; overflow-x: hidden; /* A layered ink-and-indigo canvas keeps the UI atmospheric even before a page-specific backdrop mounts. */ background: radial-gradient(80rem 42rem at 82% -12%, hsl(var(--primary) / 0.14), transparent 58%), radial-gradient(58rem 34rem at 8% 104%, hsl(var(--accent) / 0.08), transparent 60%), hsl(var(--background)); -webkit-tap-highlight-color: transparent; } button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; } /* Scrollbar - Neon style */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: hsl(var(--background)); } ::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.5); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); } /* Hidden scrollbar - keeps scroll behavior but invisible track/thumb */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; width: 0; height: 0; } } /* ------------------------------------------------------------------------- Shared OtakuScouter atmosphere ------------------------------------------------------------------------- */ @layer components { .otaku-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; isolation: isolate; contain: paint; background: radial-gradient(42rem 30rem at 78% 18%, hsl(var(--primary) / 0.09), transparent 70%), radial-gradient(38rem 28rem at 18% 86%, hsl(var(--accent) / 0.06), transparent 70%); } .otaku-atmosphere::before { content: ""; position: absolute; inset: 0; opacity: 0.16; background-image: linear-gradient(118deg, transparent 0 47%, hsl(var(--foreground) / 0.05) 47.15%, transparent 47.35%), linear-gradient(118deg, transparent 0 67%, hsl(var(--primary) / 0.045) 67.15%, transparent 67.35%); background-size: 17rem 17rem, 25rem 25rem; mask-image: linear-gradient(to bottom, black 0%, transparent 78%); } .otaku-atmosphere__sun { position: absolute; top: 5vh; right: 7vw; width: clamp(14rem, 28vw, 28rem); aspect-ratio: 1; border-radius: 50%; opacity: 0.58; background: repeating-linear-gradient(0deg, transparent 0 0.32rem, hsl(var(--accent) / 0.08) 0.37rem 0.42rem), radial-gradient(circle, hsl(var(--accent) / 0.14), hsl(var(--accent) / 0.025) 56%, transparent 70%); filter: blur(0.2px); animation: otaku-sun-breathe 8s ease-in-out infinite; } .otaku-atmosphere__waves { position: absolute; inset: auto 0 0; height: 43%; opacity: 0.28; background-image: repeating-radial-gradient(ellipse at 0 100%, transparent 0 1.7rem, hsl(var(--primary) / 0.07) 1.78rem 1.9rem, transparent 1.98rem 3.45rem), repeating-radial-gradient(ellipse at 100% 120%, transparent 0 2rem, hsl(var(--foreground) / 0.035) 2.08rem 2.2rem, transparent 2.28rem 4.2rem); mask-image: linear-gradient(to top, black, transparent 92%); transform: perspective(28rem) rotateX(58deg) scale(1.8) translateY(38%); transform-origin: bottom; animation: otaku-wave-drift 18s linear infinite; } .otaku-atmosphere__speedlines { position: absolute; right: -14vw; bottom: -18vh; width: 72vw; height: 54vh; opacity: 0.12; background: repeating-conic-gradient(from 248deg at 50% 50%, transparent 0deg 3deg, hsl(var(--primary) / 0.22) 3.2deg 3.7deg, transparent 4deg 8deg); mask-image: radial-gradient(ellipse at center, black, transparent 68%); transform: rotate(-8deg); animation: otaku-speedline-pulse 10s ease-in-out infinite; } .otaku-atmosphere__grain { position: absolute; inset: 0; opacity: 0.035; background-image: radial-gradient(hsl(var(--foreground) / 0.6) 0.5px, transparent 0.6px); background-size: 5px 5px; mix-blend-mode: screen; } .otaku-atmosphere__petals { position: absolute; inset: 0; overflow: hidden; } .otaku-atmosphere__petal { position: absolute; top: -2rem; left: var(--petal-left, 50%); width: 0.5rem; height: 0.75rem; border-radius: 100% 0 100% 0; background: hsl(var(--accent) / 0.45); box-shadow: 0 0 0.9rem hsl(var(--accent) / 0.24); transform: rotate(28deg); animation: otaku-petal-fall 13s linear infinite; animation-delay: var(--petal-delay, 0s); } .otaku-atmosphere__petal:nth-child(1) { --petal-left: 5%; --petal-delay: -1.1s; } .otaku-atmosphere__petal:nth-child(2) { --petal-left: 13%; --petal-delay: -2.2s; } .otaku-atmosphere__petal:nth-child(3) { --petal-left: 21%; --petal-delay: -3.3s; } .otaku-atmosphere__petal:nth-child(4) { --petal-left: 29%; --petal-delay: -4.4s; } .otaku-atmosphere__petal:nth-child(5) { --petal-left: 37%; --petal-delay: -5.5s; } .otaku-atmosphere__petal:nth-child(6) { --petal-left: 45%; --petal-delay: -6.6s; } .otaku-atmosphere__petal:nth-child(7) { --petal-left: 53%; --petal-delay: -7.7s; } .otaku-atmosphere__petal:nth-child(8) { --petal-left: 61%; --petal-delay: -8.8s; } .otaku-atmosphere__petal:nth-child(9) { --petal-left: 69%; --petal-delay: -9.9s; } .otaku-atmosphere__petal:nth-child(10) { --petal-left: 77%; --petal-delay: -11s; } .otaku-atmosphere__petal:nth-child(11) { --petal-left: 85%; --petal-delay: -12.1s; } .otaku-atmosphere__petal:nth-child(12) { --petal-left: 93%; --petal-delay: -13.2s; } .otaku-atmosphere--compact { opacity: 0.7; } .otaku-glass-header { background: hsl(var(--background) / 0.85); border-color: hsl(var(--border) / 0.85); box-shadow: 0 1rem 3rem hsl(228 40% 3% / 0.2); /* This header stays fixed/sticky while the page scrolls underneath it, so the browser has to recomposite the blur on every scroll frame. 18px was costly on mid-range mobile GPUs; a lighter blur (helped by a more opaque background so the glass look barely changes) is much cheaper to keep up with 60fps scrolling. */ backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); } .otaku-play-hero { background: linear-gradient(115deg, hsl(var(--background) / 0.9), hsl(232 26% 11% / 0.5)), radial-gradient(circle at 80% 20%, hsl(var(--accent) / 0.11), transparent 28%), radial-gradient(circle at 18% 72%, hsl(var(--primary) / 0.12), transparent 32%); } .otaku-hero-relic { position: relative; border: 1px solid hsl(var(--foreground) / 0.12); background: linear-gradient(145deg, hsl(var(--card) / 0.72), hsl(var(--background) / 0.5)); box-shadow: 1.5rem 1.5rem 0 hsl(var(--primary) / 0.055), 0 1.5rem 4rem hsl(228 40% 3% / 0.38); backdrop-filter: blur(12px); transform: rotate(2deg); } .otaku-hero-relic::before, .otaku-hero-relic::after { content: ""; position: absolute; pointer-events: none; border: 1px solid hsl(var(--primary) / 0.28); } .otaku-hero-relic::before { inset: 1rem; transform: rotate(-4deg); } .otaku-hero-relic::after { inset: 2rem; border-color: hsl(var(--accent) / 0.23); transform: rotate(2deg); } .otaku-feature-card { position: relative; isolation: isolate; transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; } .otaku-feature-card::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.7), transparent); transform: scaleX(0); transform-origin: center; transition: transform 220ms ease; } .otaku-feature-card:hover { background: hsl(var(--card) / 0.34); transform: translateY(-0.25rem); box-shadow: 0 1rem 2.5rem hsl(228 40% 3% / 0.18); } .otaku-feature-card:hover::after { transform: scaleX(1); } .otaku-mode-card { position: relative; isolation: isolate; overflow: hidden; background-image: linear-gradient(135deg, hsl(var(--card) / 0.85), transparent 72%); transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .otaku-mode-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 28%, hsl(var(--foreground) / 0.07) 48%, transparent 68%); transform: translateX(-125%); transition: transform 650ms ease; } .otaku-mode-card:hover::before { transform: translateX(125%); } .otaku-mode-card:hover { transform: translateY(-0.18rem); } .otaku-impact { background: radial-gradient(circle at center, hsl(var(--foreground) / 0.8), transparent 30%); mix-blend-mode: screen; } .otaku-impact__flash { background: radial-gradient(circle at center, hsl(var(--accent) / 0.9), hsl(var(--primary) / 0.34) 32%, transparent 72%); filter: saturate(135%); } /* Framer Motion keeps `will-change: transform` on this wrapper for the whole app's lifetime (not just mid-animation). Per spec, `will-change: transform` makes an element a containing block for `position: fixed` descendants, exactly like an actual `transform` would. Any full-screen page/overlay built as `fixed inset-0` (the quiz screen, splash/intro overlays, the leave-game dialog, …) then sizes itself against THIS div instead of the viewport — and since this div has no explicit height, it collapses to 0, leaving those screens blank. Forcing a full-viewport min-height here keeps `inset-0` descendants filling the screen exactly as if they were still viewport-fixed. */ .route-transition { /* Never put `transform`, `filter` or `will-change: transform` here. Either one makes this div the containing block of every `position: fixed` descendant, so full-screen overlays (tutorial popups, the matchmaking screen, the quiz, the leave-game dialog) size and centre themselves against the whole scrollable page instead of the viewport — which renders their backdrop full-screen while pushing their content off screen. That is what produced the intermittent black screen on /ranked. `opacity` is safe: it makes a stacking context, not a fixed containing block. */ will-change: opacity; min-height: 100vh; min-height: 100dvh; } .battle-pass-track { background: linear-gradient(180deg, hsl(var(--card) / 0.52), hsl(var(--background) / 0.3)), radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.08), transparent 62%); box-shadow: inset 0 1px 0 hsl(var(--foreground) / 0.04), 0 1rem 2rem hsl(240 30% 2% / 0.18); scrollbar-width: none; } .battle-pass-track::-webkit-scrollbar { display: none; } @media (max-width: 767px) { .battle-pass-track { scroll-snap-type: x mandatory; touch-action: pan-x; } } } @keyframes otaku-sun-breathe { 0%, 100% { transform: scale(0.98); opacity: 0.48; } 50% { transform: scale(1.03); opacity: 0.64; } } @keyframes otaku-wave-drift { from { transform: perspective(28rem) rotateX(58deg) scale(1.8) translate3d(0, 38%, 0); } to { transform: perspective(28rem) rotateX(58deg) scale(1.8) translate3d(-3%, 38%, 0); } } @keyframes otaku-speedline-pulse { 0%, 100% { opacity: 0.08; transform: rotate(-8deg) scale(0.98); } 50% { opacity: 0.16; transform: rotate(-8deg) scale(1.02); } } @keyframes otaku-petal-fall { 0% { transform: translate3d(0, -8vh, 0) rotate(28deg); opacity: 0; } 10% { opacity: 0.65; } 50% { transform: translate3d(4vw, 50vh, 0) rotate(168deg); } 100% { transform: translate3d(-5vw, 112vh, 0) rotate(320deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .otaku-atmosphere *, .otaku-mode-card::before, .route-transition { animation: none !important; transition-duration: 0.01ms !important; } } /* Mobile app foundation --------------------------------------------------- `dvh` follows the visible viewport when mobile browsers show their chrome; the safe-area padding keeps key controls clear of notches and home bars. */ @media (max-width: 767px) { html { background: hsl(var(--background)); -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: none; } .mobile-app-shell { min-height: 100svh; min-height: 100dvh; } .mobile-app-header { padding-top: max(0.5rem, env(safe-area-inset-top)); } .mobile-app-content { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .mobile-app-tabbar { padding-bottom: max(0.375rem, env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px hsl(240 10% 2% / 0.42); } .mobile-app-shell button, .mobile-app-shell [role="button"] { touch-action: manipulation; } /* Prevent iOS from zooming on form controls and make sheets feel native. */ input, select, textarea { font-size: max(16px, 1em); } [data-radix-popper-content-wrapper] { max-width: calc(100vw - 1rem); } } /* ======================================== DARK NEON GAMER - BACKGROUND PATTERNS ======================================== */ @layer components { /* Subtle grid overlay - system interface style */ .neon-grid { position: relative; } .neon-grid::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(hsl(var(--primary) / 0.03) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / 0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* Scanline effect */ .scanlines::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, hsl(0 0% 0% / 0.03) 2px, hsl(0 0% 0% / 0.03) 4px ); pointer-events: none; z-index: 1; } /* Corner decorations - system UI */ .corner-decor { position: relative; } .corner-decor::before, .corner-decor::after { content: ''; position: absolute; width: 20px; height: 20px; border-color: hsl(var(--primary) / 0.5); border-style: solid; border-width: 0; } .corner-decor::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; } .corner-decor::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; } } /* ======================================== DARK NEON GAMER - UI COMPONENTS ======================================== */ @layer components { /* Neon Card - Dark with colored border */ .neon-card { @apply relative; background: hsl(var(--card) / 0.9); border: 1px solid hsl(var(--border)); backdrop-filter: blur(8px); } .neon-card-primary { border-color: hsl(var(--primary) / 0.6); box-shadow: 0 0 15px hsl(var(--primary) / 0.15), inset 0 0 20px hsl(var(--primary) / 0.03); } .neon-card-secondary { border-color: hsl(var(--secondary) / 0.6); box-shadow: 0 0 15px hsl(var(--secondary) / 0.15), inset 0 0 20px hsl(var(--secondary) / 0.03); } .neon-card-accent { border-color: hsl(var(--accent) / 0.6); box-shadow: 0 0 15px hsl(var(--accent) / 0.15), inset 0 0 20px hsl(var(--accent) / 0.03); } .neon-card-success { border-color: hsl(var(--success) / 0.6); box-shadow: 0 0 15px hsl(var(--success) / 0.15), inset 0 0 20px hsl(var(--success) / 0.03); } /* Manga card - clean dark style NO BORDERS */ .manga-card { @apply relative; background: hsl(var(--card) / 0.95); border: none; box-shadow: 0 4px 30px hsl(0 0% 0% / 0.5); } .manga-card-primary { background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / 0.05)); box-shadow: 0 0 25px hsl(var(--primary) / 0.1), 0 4px 30px hsl(0 0% 0% / 0.5); } .manga-card-primary:hover { box-shadow: 0 0 35px hsl(var(--primary) / 0.15), 0 4px 30px hsl(0 0% 0% / 0.6); } /* Game Mode Button - Dark with neon border */ .game-mode-btn { @apply relative px-6 py-4; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: all 0.2s ease; } .game-mode-btn:hover { border-color: hsl(var(--primary) / 0.8); box-shadow: 0 0 20px hsl(var(--primary) / 0.2); } /* Anime button - Neon gamer style */ .anime-btn { @apply relative px-6 py-3 font-display font-bold uppercase tracking-wider; @apply transition-all duration-200; background: hsl(var(--card)); color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / 0.5); } .anime-btn:hover { background: hsl(var(--primary) / 0.1); border-color: hsl(var(--primary)); box-shadow: 0 0 20px hsl(var(--primary) / 0.3); } .anime-btn:active { transform: scale(0.98); } .anime-btn-primary { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.8)); color: hsl(var(--primary-foreground)); border: none; box-shadow: 0 0 20px hsl(var(--primary) / 0.3); } .anime-btn-primary:hover { box-shadow: 0 0 30px hsl(var(--primary) / 0.5); transform: translateY(-2px); } .anime-btn-secondary { background: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary) / 0.8)); color: hsl(var(--secondary-foreground)); border: none; box-shadow: 0 0 20px hsl(var(--secondary) / 0.3); } .anime-btn-secondary:hover { box-shadow: 0 0 30px hsl(var(--secondary) / 0.5); transform: translateY(-2px); } .anime-btn-accent { background: hsl(var(--card)); color: hsl(var(--accent)); border: 1px solid hsl(var(--accent) / 0.5); } .anime-btn-accent:hover { background: hsl(var(--accent) / 0.1); border-color: hsl(var(--accent)); box-shadow: 0 0 20px hsl(var(--accent) / 0.3); } .anime-btn-outline { background: transparent; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); } .anime-btn-outline:hover { color: hsl(var(--foreground)); border-color: hsl(var(--muted-foreground)); } /* Tag/Pill component */ .tag-pill { @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-medium uppercase tracking-wider; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / 0.3); } /* Skew panel - for headers/footers */ .skew-panel { @apply relative px-6 py-3; background: hsl(var(--card) / 0.9); border: 1px solid hsl(var(--border)); } /* Energy/Timer bar - clean no border */ .energy-bar { @apply relative h-3 overflow-hidden; background: hsl(var(--muted)); } .energy-bar-fill { @apply h-full; background: linear-gradient( 90deg, hsl(var(--primary)) 0%, hsl(var(--primary)) 40%, hsl(var(--secondary)) 70%, hsl(var(--destructive)) 100% ); transition: width 0.3s ease-out; } .energy-bar-fill.critical { animation: energy-pulse 0.25s ease-in-out infinite; background: hsl(var(--destructive)); box-shadow: 0 0 15px hsl(var(--destructive)); } @keyframes energy-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } } /* Glass panel */ .glass-panel { @apply relative; background: hsl(var(--card) / 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Anime frame - for images - CLEAN NO BORDER */ .anime-frame { @apply relative overflow-hidden; background: hsl(var(--card)); } } /* ======================================== IMPACT & TRANSITION EFFECTS ======================================== */ @layer components { /* Impact frame flash - STRONGER */ .impact-frame { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: white; mix-blend-mode: difference; animation: impact-flash 0.2s ease-out forwards; } @keyframes impact-flash { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } /* Eyecatch transition - VIBRANT */ .eyecatch { position: fixed; inset: 0; z-index: 9998; overflow: hidden; } .eyecatch::before { content: ''; position: absolute; inset: -20%; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); transform: translateX(-100%) skewX(-20deg); animation: eyecatch-sweep 0.7s ease-in-out forwards; } .eyecatch::after { content: ''; position: absolute; inset: -20%; background: hsl(var(--accent)); transform: translateX(-150%) skewX(-20deg); animation: eyecatch-sweep 0.7s ease-in-out 0.1s forwards; } @keyframes eyecatch-sweep { 0% { transform: translateX(-150%) skewX(-20deg); } 40% { transform: translateX(0) skewX(-20deg); } 60% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(150%) skewX(-20deg); } } /* Color burst effect */ .color-burst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .color-burst::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--primary)); transform: translate(-50%, -50%); animation: burst 0.5s ease-out forwards; box-shadow: 0 0 0 0 hsl(var(--primary)), 0 0 0 0 hsl(var(--secondary)), 0 0 0 0 hsl(var(--accent)); } @keyframes burst { 0% { box-shadow: 0 0 0 0 hsl(var(--primary)), 0 0 0 0 hsl(var(--secondary)), 0 0 0 0 hsl(var(--accent)); } 100% { box-shadow: 0 0 0 100px hsl(var(--primary) / 0), 0 0 0 200px hsl(var(--secondary) / 0), 0 0 0 300px hsl(var(--accent) / 0); } } } /* ======================================== DARK NEON GAMER - TITLE EFFECTS ======================================== */ @layer components { /* Main title - Futuristic glow style */ .anime-title { @apply font-display font-black uppercase tracking-wider; } /* Glowing title - for emphasis */ .anime-title-glow { @apply font-display font-black uppercase; text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; } /* Subtitle with minimal decoration */ .anime-subtitle { @apply relative inline-block font-display font-semibold uppercase tracking-widest text-sm; color: hsl(var(--muted-foreground)); } } /* ======================================== DARK NEON GAMER - TEXT UTILITIES ======================================== */ @layer utilities { /* Neon text glows */ .text-glow-primary { text-shadow: 0 0 5px hsl(var(--primary)), 0 0 15px hsl(var(--primary) / 0.5); } .text-glow-secondary { text-shadow: 0 0 5px hsl(var(--secondary)), 0 0 15px hsl(var(--secondary) / 0.5); } .text-glow-accent { text-shadow: 0 0 5px hsl(var(--accent)), 0 0 15px hsl(var(--accent) / 0.5); } .text-glow-success { text-shadow: 0 0 5px hsl(var(--success)), 0 0 15px hsl(var(--success) / 0.5); } .text-glow-destructive { text-shadow: 0 0 5px hsl(var(--destructive)), 0 0 15px hsl(var(--destructive) / 0.5); } } /* ======================================== CARD & CONTAINER EFFECTS - CLEAN MINIMAL ======================================== */ @layer components { /* Manga panel style card - CLEAN NO BORDERS */ .manga-card { @apply relative; background: hsl(var(--card) / 0.95); box-shadow: 0 4px 30px hsl(0 0% 0% / 0.4); transition: all 0.2s; } .manga-card:hover { transform: translateY(-2px); box-shadow: 0 8px 40px hsl(0 0% 0% / 0.5); } /* Color accent cards */ .manga-card-primary { background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / 0.08)); } .manga-card-primary:hover { box-shadow: 0 0 25px hsl(var(--primary) / 0.15), 0 8px 40px hsl(0 0% 0% / 0.5); } .manga-card-secondary { background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--secondary) / 0.08)); } /* Neon card - subtle glow, NO BORDER */ .neon-card { @apply relative; background: hsl(var(--card) / 0.95); box-shadow: 0 4px 30px hsl(0 0% 0% / 0.4); } .neon-card:hover { box-shadow: 0 0 20px hsl(var(--primary) / 0.1), 0 8px 40px hsl(0 0% 0% / 0.5); } .neon-card-primary { background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / 0.05)); box-shadow: 0 0 15px hsl(var(--primary) / 0.08), 0 4px 30px hsl(0 0% 0% / 0.4); } .neon-card-secondary { background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--secondary) / 0.05)); box-shadow: 0 0 15px hsl(var(--secondary) / 0.08), 0 4px 30px hsl(0 0% 0% / 0.4); } /* Glass panel - for overlays */ .glass-panel { @apply relative; background: hsl(var(--card) / 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 0 30px hsl(0 0% 0% / 0.3); } } /* ======================================== ANIMATIONS ======================================== */ @keyframes loading { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); } 20%, 40%, 60%, 80% { transform: translateX(8px); } } .animate-shake { animation: shake 0.5s ease-in-out; } @keyframes slam { 0% { transform: scale(3) rotate(-15deg); opacity: 0; filter: blur(10px); } 50% { transform: scale(1.15) rotate(3deg); opacity: 1; filter: blur(0); } 70% { transform: scale(0.95) rotate(-2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } } .animate-slam { animation: slam 0.5s ease-out forwards; } @keyframes slide-up { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .animate-slide-up { animation: slide-up 0.5s ease-out forwards; } @keyframes cut-in { 0% { transform: translateX(100%) skewX(-25deg); opacity: 0; } 100% { transform: translateX(0) skewX(0); opacity: 1; } } .animate-cut-in { animation: cut-in 0.4s ease-out forwards; } @keyframes flash-border { 0%, 100% { border-color: hsl(var(--primary)); box-shadow: 0 0 20px hsl(var(--primary) / 0.5); } 50% { border-color: hsl(var(--secondary)); box-shadow: 0 0 30px hsl(var(--secondary) / 0.7); } } .animate-flash-border { animation: flash-border 0.15s ease-in-out 4; } @keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .animate-pulse-scale { animation: pulse-scale 0.6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .animate-float { animation: float 2.5s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px hsl(var(--primary) / 0.5); } 50% { box-shadow: 0 0 40px hsl(var(--primary) / 0.8), 0 0 60px hsl(var(--secondary) / 0.4); } } .animate-glow-pulse { animation: glow-pulse 1.5s ease-in-out infinite; } /* ======================================== DARK NEON GAMER - RANK TIER SYSTEM ======================================== */ @layer utilities { /* Rank Text Colors - Neon */ .rank-e { color: hsl(0 0% 55%); } .rank-d { color: hsl(140 100% 50%); text-shadow: 0 0 8px hsl(140 100% 50% / 0.5); } .rank-c { color: hsl(210 100% 60%); text-shadow: 0 0 8px hsl(210 100% 60% / 0.5); } .rank-b { color: hsl(270 100% 65%); text-shadow: 0 0 8px hsl(270 100% 65% / 0.5); } .rank-a { color: hsl(45 100% 50%); text-shadow: 0 0 8px hsl(45 100% 50% / 0.5); } .rank-s { color: hsl(340 100% 60%); text-shadow: 0 0 8px hsl(340 100% 60% / 0.5); } .rank-ss { color: hsl(45 100% 55%); text-shadow: 0 0 10px hsl(45 100% 55% / 0.6); } /* Legacy tier classes */ .tier-e-rank { color: hsl(0 0% 55%); } .tier-d-rank { color: hsl(140 100% 50%); } .tier-c-rank { color: hsl(210 100% 60%); } .tier-b-rank { color: hsl(270 100% 65%); } .tier-a-rank { color: hsl(45 100% 50%); } .tier-s-rank { color: hsl(340 100% 60%); } .tier-special-grade { color: hsl(45 100% 55%); } /* Rank Card Backgrounds - Dark with neon border */ .rank-card-e { background: hsl(0 0% 8%); border: 1px solid hsl(0 0% 30%); } .rank-card-d { background: hsl(140 30% 6%); border: 1px solid hsl(140 100% 50% / 0.5); box-shadow: 0 0 15px hsl(140 100% 50% / 0.1); } .rank-card-c { background: hsl(210 30% 6%); border: 1px solid hsl(210 100% 60% / 0.5); box-shadow: 0 0 15px hsl(210 100% 60% / 0.1); } .rank-card-b { background: hsl(270 30% 6%); border: 1px solid hsl(270 100% 65% / 0.5); box-shadow: 0 0 15px hsl(270 100% 65% / 0.15); } .rank-card-a { background: hsl(45 30% 6%); border: 1px solid hsl(45 100% 50% / 0.5); box-shadow: 0 0 20px hsl(45 100% 50% / 0.15); } .rank-card-s { background: hsl(340 30% 6%); border: 1px solid hsl(340 100% 60% / 0.5); box-shadow: 0 0 25px hsl(340 100% 60% / 0.2); } .rank-card-ss { background: hsl(45 30% 6%); border: 1px solid hsl(45 100% 55% / 0.6); box-shadow: 0 0 30px hsl(45 100% 55% / 0.25); } /* Legacy tier backgrounds */ .tier-bg-e-rank { background: hsl(0 0% 8%); border-color: hsl(0 0% 30%); } .tier-bg-d-rank { background: hsl(140 30% 6%); border-color: hsl(140 100% 50%); box-shadow: 0 0 15px hsl(140 100% 50% / 0.2); } .tier-bg-c-rank { background: hsl(210 30% 6%); border-color: hsl(210 100% 60%); box-shadow: 0 0 15px hsl(210 100% 60% / 0.2); } .tier-bg-b-rank { background: hsl(270 30% 6%); border-color: hsl(270 100% 65%); box-shadow: 0 0 20px hsl(270 100% 65% / 0.2); } .tier-bg-a-rank { background: hsl(45 30% 6%); border-color: hsl(45 100% 50%); box-shadow: 0 0 25px hsl(45 100% 50% / 0.25); } .tier-bg-s-rank { background: hsl(340 30% 6%); border-color: hsl(340 100% 60%); box-shadow: 0 0 30px hsl(340 100% 60% / 0.3); } .tier-bg-special-grade { background: hsl(45 30% 6%); border-color: hsl(45 100% 55%); box-shadow: 0 0 35px hsl(45 100% 55% / 0.35); } } /* ======================================== DARK NEON GAMER - MISC & UTILITIES ======================================== */ ::selection { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } *:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } /* Animated border glow */ .animated-border { position: relative; } .animated-border::before { content: ''; position: absolute; inset: -2px; background: linear-gradient( 90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary)) ); background-size: 200% 100%; animation: border-flow 3s linear infinite; z-index: -1; opacity: 0.5; } @keyframes border-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }