@import "tailwindcss";
:root {
--min-viewport-width: 320px;
--background: #18191c;
--foreground: #f8fafc;
--accent1: #a78bfa;
--accent2: #3b82f6;
--surface: #23244a;
--surface-alt: #23244a;
--border: #353765;
--card-bg: #262749;
--card-border: #a78bfa;
--header-height: 240px;
--footer-height: 56px;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #18191c;
--foreground: #f5f6fa;
--accent1: #3b82f6;
--accent2: #06b6d4;
--surface: #232428;
--surface-alt: #232428;
--border: #232428;
--progress-bg: #232428;
--progress-fg: #3b82f6;
--progress-shadow: transparent;
}
}
@media (max-width: 700px) {
:root {
--header-height: 128px;
--footer-height: 48px;
}
}
html {
scrollbar-gutter: stable;
}
html {
min-width: 320px;
overflow-x: auto;
}
body {
min-width: 320px;
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
font-family: 'Inter', 'Geist', 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #181a23 0%, #23244a 60%, #1f2937 100%);
color: var(--foreground);
overflow-x: hidden;
}
h1, .landing-title, .hud-title {
color: #fff;
font-family: inherit;
font-size: 3.2rem;
font-weight: 900;
margin-bottom: 0.5em;
letter-spacing: 0.01em;
line-height: 1.1;
text-shadow: 0 2px 24px #a78bfa88, 0 0 32px #3b82f644;
}
h2 {
color: #e0e7ff;
font-size: 2rem;
font-weight: 800;
margin-bottom: 0.4em;
text-shadow: 0 1px 12px #a78bfa55;
}
h3 {
color: #c7d2fe;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.3em;
}
p, .landing-subtitle {
color: #cbd5e1;
font-size: 1.09rem;
font-weight: 400;
margin-bottom: 1em;
}
a, .footer-link, .breadcrumb-link {
color: #a78bfa;
text-decoration: none;
font-weight: 600;
transition: color 0.15s, text-shadow 0.15s;
text-shadow: 0 1px 8px #a78bfa44;
}
a:hover, .footer-link:hover, .breadcrumb-link:hover {
color: #fff;
text-shadow: 0 2px 16px #a78bfa99;
}
button, .landing-cta, .primary-btn {
background: linear-gradient(90deg, #a78bfa 0%, #3b82f6 100%);
color: #fff;
font-size: 1.18rem;
font-weight: 800;
border-radius: 16px;
border: none;
box-shadow: 0 4px 24px #a78bfa55, 0 2px 12px #3b82f644;
padding: 16px 36px;
transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
letter-spacing: 0.02em;
}
button:hover, .landing-cta:hover, .primary-btn:hover {
background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 32px #a78bfa88, 0 4px 24px #3b82f688;
}
.card, .story-card, .event-card {
background: var(--card-bg);
border: 1.5px solid var(--card-border);
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 20px 16px;
color: #f8fafc;
transition: all 0.2s ease;
}
.card:hover, .story-card:hover, .event-card:hover {
border-color: #a78bfa;
box-shadow: 0 4px 16px rgba(167, 139, 250, 0.2);
transform: translateY(-2px);
}
.secondary-btn, .ghost-btn {
background: transparent;
color: #a78bfa;
border: 2px solid #a78bfa;
border-radius: 14px;
padding: 14px 30px;
font-weight: 700;
transition: background 0.15s, color 0.15s, border 0.15s;
}
.secondary-btn:hover, .ghost-btn:hover {
background: #27293d;
color: #fff;
border-color: #fff;
}
h2 {
color: #f8fafc;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4em;
}
h3 {
color: #f1f5f9;
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.3em;
}
p, .landing-subtitle {
color: #cbd5e1;
font-size: 1.07rem;
font-weight: 400;
margin-bottom: 1em;
}
a, .footer-link, .breadcrumb-link {
color: var(--accent1);
text-decoration: none;
transition: color 0.15s;
}
a:hover, .footer-link:hover, .breadcrumb-link:hover {
color: #fff;
}
button, .landing-cta, .primary-btn {
background: linear-gradient(90deg, #a78bfa 0%, #3b82f6 100%);
color: #fff;
font-size: 1.15rem;
font-weight: 700;
border-radius: 10px;
border: none;
box-shadow: 0 2px 12px #3b82f644;
padding: 14px 32px;
transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
letter-spacing: 0.02em;
}
button:hover, .landing-cta:hover, .primary-btn:hover {
background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
transform: translateY(-2px) scale(1.03);
box-shadow: 0 4px 24px #a78bfa44;
}
/* Card styles consolidated above */
.secondary-btn, .ghost-btn {
background: transparent;
color: var(--accent1);
border: 1.5px solid var(--accent1);
border-radius: 10px;
padding: 12px 28px;
transition: background 0.15s, color 0.15s;
}
.secondary-btn:hover, .ghost-btn:hover {
background: #27293d;
color: #fff;
}
#__next, #__next > div {
width: 100%;
min-width: 320px;
overflow-x: hidden;
position: relative;
/* display: flex; */
/* flex-direction: column; */
/* align-items: flex-start; */
/* justify-content: flex-start; */
}
/* Synthwave HUD styles */
.hud-frame {
width: 100%;
/* min-width: 800px; */
/* height: 100vh; */
/* max-width: 100vw; */
/* max-height: 100vh; */
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
/* overflow-x: auto; */
/* overflow-y: auto; */
position: relative;
padding: 8px 0 24px 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
.hud-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 0 8px;
}
.hud-title {
font-family: inherit;
font-size: 3rem;
font-weight: 900;
background: linear-gradient(90deg, #a78bfa 0%, #00eaff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
text-align: center;
margin: 32px 0 24px 0;
letter-spacing: 2px;
text-shadow: 0 0 24px #00eaff88, 0 0 32px #a78bfa44;
}
.hud-reserved {
min-width: 120px;
min-height: 32px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--accent1);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
}
.hud-maze-container {
background: var(--surface-alt);
border-radius: 12px;
box-shadow: none;
padding: 16px;
overflow: auto;
max-width: 90vw;
max-height: 70vh;
}
/* CSS Pixel Art Dragon */
.hud-dragon {
position: absolute;
top: -24px;
left: -24px;
width: 64px;
height: 64px;
z-index: 2;
/* Pixel art dragon using box-shadow for each pixel */
background: transparent;
}
.hud-dragon::before {
content: '';
display: block;
width: 4px;
height: 4px;
background: transparent;
box-shadow:
/* Head */
24px 8px #ff00cc,
28px 8px #ff00cc,
20px 12px #ff00cc,
24px 12px #ff00cc,
28px 12px #ff00cc,
32px 12px #ff00cc,
/* Jaw */
32px 16px #ff00cc,
36px 16px #ff00cc,
36px 20px #ff00cc,
/* Eye */
28px 16px #00eaff,
/* Neck */
24px 16px #ff00cc,
20px 16px #ff00cc,
16px 20px #ff00cc,
20px 20px #ff00cc,
24px 20px #ff00cc,
/* Body */
12px 24px #ff00cc,
16px 24px #ff00cc,
20px 24px #ff00cc,
24px 24px #ff00cc,
28px 24px #ff00cc,
32px 24px #ff00cc,
36px 24px #ff00cc,
40px 24px #ff00cc,
/* Tail */
8px 28px #ff00cc,
12px 28px #ff00cc,
16px 28px #ff00cc,
20px 28px #ff00cc,
24px 28px #ff00cc,
28px 28px #ff00cc,
32px 28px #ff00cc,
36px 28px #ff00cc,
40px 28px #ff00cc,
44px 28px #ff00cc,
/* Wing */
20px 8px #00eaff,
16px 12px #00eaff,
12px 16px #00eaff,
8px 20px #00eaff,
12px 20px #00eaff,
16px 16px #00eaff,
20px 20px #00eaff;
}
.hud-zoom-controls {
display: flex;
align-items: center;
gap: 8px;
margin-left: 16px;
}
.hud-zoom-btn {
background: linear-gradient(90deg, #ff00cc 0%, #00eaff 100%);
color: #fff;
border: none;
border-radius: 6px;
font-size: 1.5rem;
width: 32px;
height: 32px;
box-shadow: 0 0 8px #ff00cc88, 0 0 8px #00eaff88;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.hud-zoom-btn:hover {
transform: scale(1.15);
box-shadow: 0 0 16px #ff00cc, 0 0 16px #00eaff;
}
.hud-zoom-level {
color: #00eaff;
font-family: 'Orbitron', 'Arial Black', Arial, sans-serif;
font-size: 1.2rem;
text-shadow: 0 0 4px #ff00cc, 0 0 8px #00eaff;
}
.hud-leaderboard {
width: 100%;
max-width: 700px;
margin: 24px auto 0 auto;
background: var(--surface);
border-radius: 12px;
box-shadow: none;
padding: 16px 24px;
min-width: 340px;
border: 1px solid var(--border);
}
.hud-leaderboard-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #222226;
font-size: 1.05rem;
background: none;
transition: background 0.2s;
}
.hud-leaderboard-row:hover {
background: #202126;
}
.hud-leaderboard-header {
font-weight: 600;
color: var(--accent1);
text-shadow: none;
border-bottom: 2px solid var(--accent1);
}
.hud-user-id {
color: var(--foreground);
font-family: inherit;
font-size: 1.05rem;
text-shadow: none;
}
.hud-artifacts {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.hud-artifact {
background: var(--surface-alt);
color: var(--accent2);
border-radius: 4px;
padding: 2px 8px;
font-size: 0.95rem;
box-shadow: none;
border: 1px solid var(--border);
margin-right: 2px;
display: flex;
align-items: center;
gap: 4px;
}
.hud-artifact-icon {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
}
/* Progress Bar */
.hud-progress-bar {
width: 100%;
height: 12px;
background: var(--progress-bg);
border-radius: 6px;
box-shadow: none;
overflow: hidden;
margin-top: 2px;
margin-bottom: 2px;
position: relative;
border: 1px solid var(--border);
}
.hud-progress-bar-inner {
height: 100%;
background: var(--progress-fg);
border-radius: 6px 0 0 6px;
box-shadow: none;
transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.hud-progress-label {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--foreground);
font-size: 0.9rem;
font-weight: 500;
text-shadow: none;
pointer-events: none;
}
/* Remove all bracket layout styles */
.bracket-outer,
.bracket-scale,
.bracket-container,
.bracket-row,
.bracket-heading,
.bracket-separator,
.bracket-card-group,
.bracket-user-row,
.bracket-user-card,
.bracket-user-card-artifacts,
.bracket-user-card-portrait,
.bracket-user-avatar {
display: none;
}
.app-root {
width: 100%;
max-width: 100vw;
min-height: 100vh;
/* display: flex; */
/* flex-direction: column; */
/* align-items: stretch; */
/* justify-content: flex-start; */
}
.app-header,
.app-footer {
width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
.app-header {
position: sticky;
top: 0;
z-index: 100;
width: 100%;
height: 192px;
padding: 24px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--background);
}
.app-logo {
display: block;
height: 160px;
width: auto;
max-width: none;
border-radius: 0;
box-shadow: 0 0 32px #3b82f644, 0 0 64px #a78bfa33;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-origin: center;
background: linear-gradient(135deg, #23244a 0%, #181a23 100%);
border: 2px solid #3b82f6;
object-fit: contain;
}
.app-logo:hover {
transform: scale(1.05);
box-shadow: 0 0 48px #3b82f666, 0 0 96px #a78bfa44;
}
.app-title {
font-size: 1.25rem;
font-weight: 600;
color: #a78bfa;
text-align: center;
letter-spacing: 1px;
margin-bottom: 0;
text-shadow: 0 0 8px #00eaff44;
}
.breadcrumb-link {
color: #3b82f6;
text-decoration: none;
transition: color 0.15s;
}
.breadcrumb-link:hover {
color: #60a5fa;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 0.95rem;
font-family: monospace;
}
@media (max-width: 700px) {
.app-header {
height: 128px;
padding: 16px 0;
}
.app-logo {
height: 96px;
}
.breadcrumb {
top: 8px;
right: 16px;
}
.app-title {
font-size: 1rem;
}
.hud-frame {
padding: 8px 0 16px 0 !important;
}
}
/* Winner Celebration Styles */
@keyframes winner-glow {
0% { box-shadow: 0 0 30px #3b82f6, 0 0 60px #a78bfa; }
50% { box-shadow: 0 0 60px #a78bfa, 0 0 120px #3b82f6; }
100% { box-shadow: 0 0 30px #3b82f6, 0 0 60px #a78bfa; }
}
@keyframes winner-crown-float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes winner-confetti {
0% { background-position: 0 0; }
100% { background-position: 100% 100%; }
}
@keyframes sparkle {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.winner-card {
position: relative;
animation: winner-glow 3s infinite ease-in-out;
border: 3px solid gold !important;
background: linear-gradient(135deg, #2a2d6d 0%, #1a1b4d 100%) !important;
}
.winner-crown {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
animation: winner-crown-float 3s infinite ease-in-out;
filter: drop-shadow(0 0 10px gold);
z-index: 10;
}
.winner-label {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #ffd700 0%, #ffb700 100%);
padding: 4px 12px;
border-radius: 12px;
font-weight: bold;
color: #000;
font-size: 0.9rem;
white-space: nowrap;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
z-index: 5;
}
.winner-confetti {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background:
radial-gradient(circle, transparent 20%, #1a1b4d 20%, #1a1b4d 80%, transparent 80%, transparent) 0 0/15px 15px,
radial-gradient(circle, transparent 20%, #1a1b4d 20%, #1a1b4d 80%, transparent 80%, transparent) 7.5px 7.5px/15px 15px;
mix-blend-mode: overlay;
opacity: 0.3;
animation: winner-confetti 20s linear infinite;
}
.winner-name {
background: linear-gradient(90deg, #ffd700 0%, #ffb700 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.leaderboard-hud-root {
/* min-width: 800px; */
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
.footer-link {
color: #a7a7ff;
font-size: 1rem;
text-decoration: none;
opacity: 0.85;
font-weight: 500;
transition: color 0.15s;
}
.footer-link:hover {
color: #fff;
opacity: 1;
}
/* Remove the red outline from all elements */
/* * {
outline: 1px solid red !important;
} */
/* Modern Landing Hero Section */
.landing-hero {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 24px 8px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background: transparent;
border-radius: 0;
box-shadow: none;
}
.hero-logo-container {
margin: 2px 0 12px 0;
display: flex;
justify-content: center;
width: auto;
}
.hero-logo {
width: auto;
max-width: 300px;
height: auto;
object-fit: contain;
border-radius: 8px;
}
.landing-title {
font-size: 3.25rem;
font-weight: 900;
margin: 0 0 4px 0;
color: #f8fafc;
letter-spacing: -0.03em;
line-height: 1.1;
text-shadow: 0 2px 20px rgba(167, 139, 250, 0.3);
}
.landing-title .gradient-text {
background: linear-gradient(90deg, #a78bfa 0%, #3b82f6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.landing-subtitle {
font-size: 1.5rem;
color: #e2e8f0;
margin: 0 auto 12px auto;
line-height: 1.4;
font-weight: 600;
max-width: 600px;
}
.landing-description {
font-size: 1.1rem;
color: #94a3b8;
margin: 0 auto 16px auto;
line-height: 1.5;
max-width: 600px;
font-weight: 400;
}
.landing-subtitle .gradient-text {
background: linear-gradient(90deg, #818cf8 0%, #3b82f6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.hero-buttons {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 12px;
}
.hero-button {
padding: 14px 36px !important;
font-size: 1.2rem !important;
border-radius: 10px !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 16px rgba(167, 139, 250, 0.3) !important;
}
.hero-button:hover {
transform: translateY(-2px) scale(1.03) !important;
box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5) !important;
}
@media (max-width: 768px) {
.landing-hero {
padding: 8px 16px 16px 16px;
margin-bottom: 8px;
}
.hero-logo-container {
margin: 1px 0 12px 0;
}
.landing-title {
font-size: 2.1rem;
margin-bottom: 2px;
line-height: 1.1;
}
.landing-subtitle {
font-size: 1.1rem;
margin: 0 auto 6px auto;
line-height: 1.3;
}
.landing-description {
font-size: 0.95rem;
margin: 0 auto 12px auto;
line-height: 1.4;
}
.hero-buttons {
flex-direction: row;
width: 100%;
max-width: 320px;
margin: 8px auto 0;
gap: 8px;
}
.hero-button {
width: 100%;
padding: 12px 24px !important;
font-size: 1.1rem !important;
}
}
/* Harmonized heading and body font sizes */
h1, .hud-title {
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 0.5em;
}
h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4em;
}
h3 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.3em;
}
p, .landing-subtitle {
font-size: 1.07rem;
font-weight: 400;
margin-bottom: 1em;
}
