:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
/* Surface hierarchy — deep void blacks */
--surface-base: #0A0A14;
--surface-1: #0E0E1A;
--surface-2: #131320;
--surface-container-high: #1A1A2E;
/* Text */
--text-primary: #E8ECFF;
--text-secondary: #8B92B0;
/* Ghost border */
--border-ghost: rgba(255, 255, 255, 0.06);
/* Mode accents — saturated neon */
--accent-fun: #FFD700;
--accent-fun-strong: #FFAA00;
--accent-fun-rgb: 255, 215, 0;
--accent-gory: #FF2D2D;
--accent-gory-strong: #FF4444;
--accent-gory-rgb: 255, 45, 45;
--accent-horror: #BF5AF2;
--accent-horror-strong: #9B30FF;
--accent-horror-rgb: 191, 90, 242;
--accent-war: #4a7a3a;
--accent-war-strong: #5a9a4a;
--accent-war-rgb: 74, 122, 58;
/* Shared glow token */
--glow-spread: 20px;
--glow-intensity: 0.35;
/* Typography */
--font-display: 'Russo One', sans-serif;
--font-body: 'Chakra Petch', sans-serif;
/* Spacing */
--spacing-6: 2rem;
--spacing-8: 3rem;
--spacing-10: 4rem;
/* Radius */
--radius-xl: 1.5rem;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after {
touch-action: manipulation;
}
body {
overflow: hidden;
background: #0A0A14;
font-family: 'Chakra Petch', sans-serif;
overscroll-behavior: contain;
-webkit-tap-highlight-color: transparent;
}
canvas#game-canvas { display: block; pointer-events: none; }
.overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
z-index: 10; transition: opacity 0.35s ease;
overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.overlay.hidden { opacity: 0; pointer-events: none; }
/* MODE SELECT */
#mode-select-screen {
background:
radial-gradient(ellipse at 20% 40%, rgba(255,215,0,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(255,45,45,0.04) 0%, transparent 50%),
radial-gradient(ellipse at 50% 90%, rgba(191,90,242,0.04) 0%, transparent 50%),
var(--surface-base);
overflow: hidden;
}
/* Static star field — cool blue-white dots */
#mode-select-screen::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(1px 1px at 10% 15%, rgba(222,229,255,0.3), transparent),
radial-gradient(1px 1px at 25% 35%, rgba(222,229,255,0.2), transparent),
radial-gradient(1px 1px at 40% 8%, rgba(222,229,255,0.25), transparent),
radial-gradient(1px 1px at 55% 55%, rgba(163,170,196,0.3), transparent),
radial-gradient(1px 1px at 70% 25%, rgba(222,229,255,0.2), transparent),
radial-gradient(1px 1px at 85% 65%, rgba(163,170,196,0.25), transparent),
radial-gradient(1px 1px at 15% 75%, rgba(222,229,255,0.2), transparent),
radial-gradient(1px 1px at 60% 85%, rgba(163,170,196,0.15), transparent),
radial-gradient(1px 1px at 90% 45%, rgba(222,229,255,0.2), transparent),
radial-gradient(1.5px 1.5px at 5% 50%, rgba(222,229,255,0.25), transparent),
radial-gradient(1px 1px at 50% 40%, rgba(163,170,196,0.15), transparent),
radial-gradient(1px 1px at 95% 10%, rgba(222,229,255,0.2), transparent);
pointer-events: none;
}
/* Subtle scanline overlay */
#mode-select-screen::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.03) 2px,
rgba(0,0,0,0.03) 4px
);
pointer-events: none;
z-index: 0;
}
/* Twinkling star animation */
@keyframes starTwinkle {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
#mode-select-screen::before {
animation: starTwinkle 4s ease-in-out infinite;
}
/* Scoped font override for mode select screen */
#mode-select-screen { font-family: var(--font-body); }
/* Fixed Home Button (top-left) */
.home-btn {
position: fixed;
top: max(var(--safe-top, 0px), 14px);
left: max(var(--safe-left, 0px), 14px);
z-index: 50;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px 9px 12px;
background: rgba(10,10,20,0.72);
border: 1.5px solid rgba(255,215,0,0.35);
border-radius: 14px;
color: rgba(255,215,0,0.9);
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
inset 0 1px 0 rgba(255,215,0,0.1),
0 4px 16px rgba(0,0,0,0.35);
transition: transform .18s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, background .22s ease;
}
.home-btn:hover {
transform: translateY(-1px);
color: #FFEF00;
border-color: rgba(255,215,0,0.8);
background: rgba(20,18,6,0.8);
box-shadow:
0 0 24px rgba(255,215,0,0.35),
inset 0 1px 0 rgba(255,215,0,0.2),
0 6px 20px rgba(0,0,0,0.45);
}
.home-btn:active { transform: translateY(0) scale(0.96); }
.home-btn svg { flex-shrink: 0; }
@media (max-width: 480px) {
.home-btn { padding: 8px 12px; font-size: 10px; letter-spacing: 1.5px; }
.home-btn span { display: none; }
}
.mode-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(44px, 10.5vw, 4rem);
color: var(--text-primary);
text-shadow:
0 0 10px rgba(var(--accent-fun-rgb), 0.6),
0 0 40px rgba(var(--accent-fun-rgb), 0.3),
0 0 80px rgba(var(--accent-fun-rgb), 0.15);
letter-spacing: 8px;
animation: titleBounce 2s ease-in-out infinite, arcadeFlicker 7s steps(1) infinite;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
@keyframes arcadeFlicker {
0%, 92%, 100% { filter: none; }
93%, 94% { filter: brightness(1.4) drop-shadow(0 0 12px rgba(255,215,0,0.5)); }
95% { filter: brightness(0.85); }
}
.mode-subtitle {
font-family: var(--font-body);
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 400;
margin-bottom: var(--spacing-8);
letter-spacing: 6px;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.stats-badge {
font-family: var(--font-body);
color: var(--text-secondary);
font-size: 12px;
margin-bottom: 16px;
letter-spacing: 1.5px;
opacity: 0.7;
position: relative;
z-index: 1;
}
.mode-points-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ffd700;
background: rgba(255, 215, 0, 0.08);
border: 1px solid rgba(255, 215, 0, 0.35);
border-radius: 999px;
padding: 6px 14px;
margin-bottom: 16px;
position: relative;
z-index: 1;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
}
.mode-points-badge .mode-points-label {
opacity: 0.7;
font-size: 11px;
}
/* How to play steps */
.how-to-play {
display: flex;
gap: 24px;
justify-content: center;
align-items: flex-start;
margin-bottom: var(--spacing-8);
padding: 0 20px;
position: relative;
z-index: 1;
max-width: 600px;
width: 100%;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
text-align: center;
}
.step-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-xl);
background: var(--surface-2);
border: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--text-secondary);
flex-shrink: 0;
box-shadow: 0 0 12px rgba(var(--accent-fun-rgb), 0.06);
}
.step-label {
font-family: var(--font-body);
font-size: 0.75rem;
color: var(--text-secondary);
letter-spacing: 0.5px;
line-height: 1.4;
}
.step-connector {
display: flex;
align-items: center;
padding-top: 10px;
color: rgba(64,72,93,0.4);
font-size: 14px;
flex-shrink: 0;
}
@media (max-width: 480px) {
.how-to-play { gap: 12px; }
.step-icon { width: 36px; height: 36px; font-size: 16px; }
.step-label { font-size: 0.625rem; }
}
.mode-cards {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
width: 100%;
max-width: 420px;
padding: 0 18px 32px;
position: relative;
z-index: 1;
}
@media (min-width: 640px) {
.mode-cards {
grid-template-columns: repeat(2, 1fr);
max-width: 720px;
gap: 20px;
}
}
@media (min-width: 1024px) {
.mode-cards {
grid-template-columns: repeat(3, 1fr);
max-width: 1160px;
gap: 26px;
}
}
.mode-card {
width: 100%;
border-radius: 20px;
padding: 22px 20px 22px;
text-align: left;
cursor: pointer;
border: 1.5px solid rgba(255,255,255,0.07);
background:
linear-gradient(165deg, rgba(26,26,46,0.78) 0%, rgba(12,12,22,0.88) 100%);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 8px 28px rgba(0,0,0,0.45);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s ease-out,
background 0.35s ease-out,
border-color 0.35s ease-out;
position: relative;
overflow: hidden;
min-height: 44px;
}
/* Top marquee light — per-mode color */
.mode-card::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 2px;
background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
opacity: 0.9;
filter: blur(0.3px);
transition: left 0.35s ease, right 0.35s ease, opacity 0.35s ease;
}
/* Soft corner glow accent */
.mode-card::after {
content: '';
position: absolute;
top: -40%;
right: -30%;
width: 75%;
height: 80%;
background: radial-gradient(closest-side, currentColor, transparent 70%);
opacity: 0.14;
pointer-events: none;
filter: blur(8px);
transition: opacity 0.4s ease;
}
/* Default ambient styling per mode (visible without hover) */
.mode-card-fun {
color: var(--accent-fun);
border-color: rgba(var(--accent-fun-rgb), 0.28);
background:
radial-gradient(130% 90% at 50% -10%, rgba(var(--accent-fun-rgb),0.14), transparent 58%),
linear-gradient(165deg, rgba(30,28,18,0.82) 0%, rgba(14,12,8,0.92) 100%);
box-shadow:
inset 0 1px 0 rgba(var(--accent-fun-rgb), 0.16),
0 0 18px rgba(var(--accent-fun-rgb), 0.07),
0 8px 28px rgba(0,0,0,0.45);
}
.mode-card-gory {
color: var(--accent-gory);
border-color: rgba(var(--accent-gory-rgb), 0.32);
background:
radial-gradient(130% 90% at 50% -10%, rgba(var(--accent-gory-rgb),0.16), transparent 58%),
linear-gradient(165deg, rgba(35,12,12,0.82) 0%, rgba(14,5,5,0.95) 100%);
box-shadow:
inset 0 1px 0 rgba(var(--accent-gory-rgb), 0.18),
0 0 18px rgba(var(--accent-gory-rgb), 0.08),
0 8px 28px rgba(0,0,0,0.45);
}
.mode-card-horror {
color: var(--accent-horror);
border-color: rgba(var(--accent-horror-rgb), 0.32);
background:
radial-gradient(130% 90% at 50% -10%, rgba(var(--accent-horror-rgb),0.16), transparent 58%),
linear-gradient(165deg, rgba(22,12,38,0.85) 0%, rgba(10,5,18,0.95) 100%);
box-shadow:
inset 0 1px 0 rgba(var(--accent-horror-rgb), 0.18),
0 0 18px rgba(var(--accent-horror-rgb), 0.08),
0 8px 28px rgba(0,0,0,0.45);
}
.mode-card-war {
color: var(--accent-war-strong);
border-color: rgba(var(--accent-war-rgb), 0.45);
background:
radial-gradient(130% 90% at 50% -10%, rgba(255,130,40,0.12), transparent 58%),
linear-gradient(165deg, rgba(28,24,10,0.88) 0%, rgba(14,12,6,0.96) 100%);
box-shadow:
inset 0 1px 0 rgba(var(--accent-war-rgb), 0.2),
0 0 18px rgba(255,100,0, 0.1),
0 8px 28px rgba(0,0,0,0.45);
}
.mode-card-tournament {
color: #ffd700;
border-color: rgba(255,215,0, 0.45);
background:
radial-gradient(130% 90% at 50% -10%, rgba(255,215,0,0.2), transparent 58%),
linear-gradient(165deg, rgba(35,25,5,0.9) 0%, rgba(16,11,3,0.96) 100%);
box-shadow:
inset 0 1px 0 rgba(255,215,0, 0.22),
0 0 22px rgba(255,215,0, 0.12),
0 8px 30px rgba(0,0,0,0.5);
}
.mode-card-multiplayer {
color: #8b5cf6;
border-color: rgba(139,92,246, 0.45);
background:
radial-gradient(130% 90% at 50% -10%, rgba(99,102,241,0.2), transparent 58%),
linear-gradient(165deg, rgba(18,18,38,0.9) 0%, rgba(10,10,22,0.96) 100%);
box-shadow:
inset 0 1px 0 rgba(139,92,246, 0.22),
0 0 22px rgba(139,92,246, 0.12),
0 8px 30px rgba(0,0,0,0.5);
}
@media (hover: hover) {
.mode-card:hover {
transform: translateY(-6px) scale(1.015);
}
.mode-card:hover::before { left: 4%; right: 4%; opacity: 1; }
.mode-card:hover::after { opacity: 0.3; }
.mode-card-fun:hover {
border-color: rgba(var(--accent-fun-rgb), 0.75);
box-shadow:
0 0 30px rgba(var(--accent-fun-rgb), 0.3),
0 0 70px rgba(var(--accent-fun-rgb), 0.12),
inset 0 1px 0 rgba(var(--accent-fun-rgb), 0.28),
0 14px 44px rgba(0,0,0,0.5);
}
.mode-card-gory:hover {
border-color: rgba(var(--accent-gory-rgb), 0.8);
box-shadow:
0 0 30px rgba(var(--accent-gory-rgb), 0.32),
0 0 70px rgba(var(--accent-gory-rgb), 0.14),
inset 0 1px 0 rgba(var(--accent-gory-rgb), 0.28),
0 14px 44px rgba(0,0,0,0.5);
}
.mode-card-horror:hover {
border-color: rgba(var(--accent-horror-rgb), 0.8);
box-shadow:
0 0 30px rgba(var(--accent-horror-rgb), 0.32),
0 0 70px rgba(var(--accent-horror-rgb), 0.14),
inset 0 1px 0 rgba(var(--accent-horror-rgb), 0.28),
0 14px 44px rgba(0,0,0,0.5);
}
.mode-card-war:hover {
border-color: rgba(var(--accent-war-rgb), 0.95);
box-shadow:
0 0 30px rgba(255,100,0, 0.28),
0 0 70px rgba(var(--accent-war-rgb), 0.14),
inset 0 1px 0 rgba(var(--accent-war-rgb), 0.3),
0 14px 44px rgba(0,0,0,0.5);
}
.mode-card-tournament:hover {
border-color: rgba(255,215,0, 0.9);
box-shadow:
0 0 36px rgba(255,215,0, 0.35),
0 0 90px rgba(255,215,0, 0.14),
inset 0 1px 0 rgba(255,215,0, 0.35),
0 14px 44px rgba(0,0,0,0.55);
}
.mode-card-multiplayer:hover {
border-color: rgba(139,92,246, 0.9);
box-shadow:
0 0 36px rgba(139,92,246, 0.32),
0 0 90px rgba(99,102,241, 0.14),
inset 0 1px 0 rgba(139,92,246, 0.3),
0 14px 44px rgba(0,0,0,0.55);
}
}
.mode-card:active {
transform: translateY(0px) scale(0.97);
transition-duration: 0.08s;
}
/* Staggered entrance for mode cards */
.mode-card {
opacity: 0;
animation: modeCardEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mode-card:nth-child(1) { animation-delay: 0.05s; }
.mode-card:nth-child(2) { animation-delay: 0.12s; }
.mode-card:nth-child(3) { animation-delay: 0.19s; }
.mode-card:nth-child(4) { animation-delay: 0.26s; }
@keyframes modeCardEnter {
from { opacity: 0; transform: translateY(24px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.mode-icon-canvas,
.mode-card .mode-icon-img {
display: block;
margin: 0 0 14px;
border-radius: 12px;
width: 100%;
max-width: none;
height: 96px;
object-fit: cover;
aspect-ratio: auto;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.06),
0 4px 14px rgba(0,0,0,0.35);
background: rgba(0,0,0,0.3);
position: relative;
z-index: 1;
}
.mode-icon-mp {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 96px;
margin-bottom: 14px;
border-radius: 12px;
background:
radial-gradient(closest-side, rgba(139,92,246,0.2), transparent 70%),
rgba(0,0,0,0.3);
color: #c4b5fd;
box-shadow:
inset 0 0 0 1px rgba(139,92,246,0.2),
0 4px 14px rgba(0,0,0,0.35);
position: relative;
z-index: 1;
}
.mode-card .mode-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
color: var(--text-primary);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
z-index: 1;
line-height: 1;
}
.mode-card-fun .mode-name { color: var(--accent-fun); text-shadow: 0 0 18px rgba(var(--accent-fun-rgb), 0.55), 0 2px 4px rgba(0,0,0,0.6); }
.mode-card-gory .mode-name { color: #ff6666; text-shadow: 0 0 18px rgba(var(--accent-gory-rgb), 0.55), 0 2px 4px rgba(0,0,0,0.6); }
.mode-card-horror .mode-name { color: #d99bff; text-shadow: 0 0 18px rgba(var(--accent-horror-rgb), 0.55), 0 2px 4px rgba(0,0,0,0.6); }
.mode-card-war .mode-name { color: #9bd987; text-shadow: 0 0 18px rgba(var(--accent-war-rgb), 0.55), 0 2px 4px rgba(0,0,0,0.6); }
.mode-card-tournament .mode-name { color: #ffd700; text-shadow: 0 0 18px rgba(255,215,0, 0.6), 0 2px 4px rgba(0,0,0,0.6); font-size: 24px; }
.mode-card-multiplayer .mode-name { color: #c4b5fd; text-shadow: 0 0 18px rgba(139,92,246, 0.6), 0 2px 4px rgba(0,0,0,0.6); }
.mode-card .mode-desc {
font-family: var(--font-body);
font-size: 0.82rem;
color: rgba(232,236,255,0.7);
line-height: 1.45;
position: relative;
z-index: 1;
}
/* Small tag chip above the mode name */
.mode-card .mode-name::before {
content: attr(data-tag);
display: block;
font-family: var(--font-body);
font-size: 9px;
font-weight: 700;
letter-spacing: 2.5px;
color: rgba(232,236,255,0.45);
margin-bottom: 6px;
text-transform: uppercase;
}
/* START SCREEN */
#start-screen {
background:
radial-gradient(circle 500px at 50% 80%, rgba(93,175,93,0.15) 0%, transparent 60%),
radial-gradient(circle 400px at 20% 20%, rgba(74,144,217,0.1) 0%, transparent 50%),
linear-gradient(175deg, #0E1A2E 0%, #0A1628 40%, #0A1420 70%, #0A0A14 100%);
}
#start-screen.mode-gory {
background:
radial-gradient(circle 500px at 50% 80%, rgba(var(--accent-gory-rgb),0.12) 0%, transparent 60%),
radial-gradient(circle 400px at 20% 20%, rgba(180,30,30,0.08) 0%, transparent 50%),
linear-gradient(175deg, #1A0A0A 0%, #140808 40%, #0F0606 70%, #0A0A14 100%);
}
#start-screen.mode-horror {
background:
radial-gradient(circle 500px at 50% 80%, rgba(var(--accent-horror-rgb),0.1) 0%, transparent 60%),
radial-gradient(circle 400px at 20% 20%, rgba(100,50,180,0.06) 0%, transparent 50%),
linear-gradient(175deg, #0C081A 0%, #100C22 40%, #1A1030 70%, #0A0A14 100%);
}
#start-screen.mode-war {
background:
radial-gradient(circle 500px at 50% 80%, rgba(var(--accent-war-rgb),0.12) 0%, transparent 60%),
radial-gradient(circle 400px at 20% 20%, rgba(255,100,0,0.08) 0%, transparent 50%),
linear-gradient(175deg, #1A1A0A 0%, #14120A 40%, #0F0E08 70%, #0A0A14 100%);
}
.title-block h1 {
font-family: 'Lilita One', sans-serif;
font-size: clamp(48px, 10vw, 96px);
color: #ffd700;
text-shadow:
0 4px 0 #daa520,
0 0 20px rgba(255,215,0,0.6),
0 0 60px rgba(255,215,0,0.3),
0 0 120px rgba(255,215,0,0.15);
letter-spacing: 3px;
animation: titleBounce 2s ease-in-out infinite;
}
@keyframes titleBounce {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-8px) rotate(1deg); }
}
.subtitle {
color: rgba(255,255,255,0.9); font-size: clamp(16px, 3vw, 22px);
font-weight: 400; text-shadow: 0 2px 4px rgba(0,0,0,0.2);
margin-bottom: 28px; letter-spacing: 2px; text-transform: uppercase;
}
.duck-roster,
.betting-roster {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
width: 100%;
max-width: 780px;
padding: 0 16px;
margin-bottom: 28px;
}
@media (min-width: 769px) and (max-width: 1023px) {
.duck-roster,
.betting-roster {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.duck-roster,
.betting-roster {
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
}
.duck-card {
background: rgba(15,15,35,0.65); border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px; padding: 16px 14px 12px; text-align: center; min-width: 120px;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.duck-card:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 30px rgba(var(--accent-fun-rgb), 0.1);
border-color: rgba(255,255,255,0.15);
}
.duck-card canvas { display: block; margin: 0 auto 6px; }
.duck-card .duck-name { font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.duck-flavor {
font-size: 11px;
color: rgba(255,255,255,0.7);
font-style: italic;
margin-top: 2px;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.duck-card, .bet-card {
opacity: 0;
animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.duck-card:nth-child(1), .bet-card:nth-child(1) { animation-delay: 0ms; }
.duck-card:nth-child(2), .bet-card:nth-child(2) { animation-delay: 40ms; }
.duck-card:nth-child(3), .bet-card:nth-child(3) { animation-delay: 80ms; }
.duck-card:nth-child(4), .bet-card:nth-child(4) { animation-delay: 120ms; }
.duck-card:nth-child(5), .bet-card:nth-child(5) { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
.duck-card, .bet-card {
animation: none !important;
opacity: 1;
}
}
.start-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
#start-btn, #back-btn, #customize-btn, #lock-bet-btn, #race-again-btn, #change-mode-btn {
min-height: 44px;
min-width: 44px;
}
@media (max-width: 480px) {
.start-buttons,
.results-buttons {
flex-direction: column;
align-items: stretch;
}
#start-btn, #back-btn, #customize-btn, #race-again-btn, #change-mode-btn, #lock-bet-btn {
width: 100%;
text-align: center;
}
}
#start-btn {
font-family: 'Lilita One', sans-serif;
font-size: clamp(18px, 4vw, 26px); padding: 16px 56px;
background: linear-gradient(180deg, #ff6b6b, #ee5a24); color: #fff;
border: none; border-bottom: 5px solid #c0392b; border-radius: 50px;
cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
box-shadow: 0 6px 24px rgba(238,90,36,0.4), 0 0 40px rgba(238,90,36,0.2);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
}
#start-btn:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 10px 32px rgba(238,90,36,0.5), 0 0 60px rgba(238,90,36,0.3); filter: brightness(1.15); }
#start-btn:active { transform: translateY(2px) scale(0.97); border-bottom-width: 2px; transition-duration: 0.08s; }
#back-btn {
font-family: 'Lilita One', sans-serif;
font-size: clamp(14px, 3vw, 20px); padding: 14px 36px;
background: linear-gradient(180deg, #636e72, #4a5568); color: #fff;
border: none; border-bottom: 4px solid #2d3436; border-radius: 50px;
cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
text-shadow: 0 2px 3px rgba(0,0,0,0.3);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
transition: transform 0.15s, box-shadow 0.15s;
}
#back-btn:hover { transform: translateY(-3px) scale(1.05); }
/* RESULTS */
#results-screen {
background:
radial-gradient(ellipse 60% 40% at 50% 8%, rgba(255,215,0,0.3) 0%, transparent 100%),
radial-gradient(circle 350px at 30% 70%, rgba(108,92,231,0.1) 0%, transparent 50%),
radial-gradient(circle 300px at 70% 80%, rgba(16,185,129,0.06) 0%, transparent 50%),
linear-gradient(180deg, #0A0A14 0%, #0E0E1A 40%, #131320 100%);
gap: 0;
}
#results-screen.hidden { display: none; }
#results-screen.mode-gory {
background:
radial-gradient(ellipse 60% 40% at 50% 8%, rgba(var(--accent-gory-rgb),0.3) 0%, transparent 100%),
radial-gradient(circle 350px at 30% 70%, rgba(180,30,30,0.1) 0%, transparent 50%),
linear-gradient(180deg, #0A0A14 0%, #140808 40%, #1a0c0c 100%);
}
#results-screen.mode-horror {
background:
radial-gradient(ellipse 60% 40% at 50% 8%, rgba(var(--accent-horror-rgb),0.25) 0%, transparent 100%),
radial-gradient(circle 300px at 70% 80%, rgba(0,200,100,0.04) 0%, transparent 50%),
linear-gradient(180deg, #0A0A14 0%, #0C081A 40%, #120E24 100%);
}
#results-screen.mode-war {
background:
radial-gradient(ellipse 60% 40% at 50% 8%, rgba(var(--accent-war-rgb),0.25) 0%, transparent 100%),
radial-gradient(circle 350px at 30% 70%, rgba(255,100,0,0.06) 0%, transparent 50%),
linear-gradient(180deg, #0A0A14 0%, #1A1A0A 40%, #1A1808 100%);
}
/* Confetti particles */
#results-screen::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 15% 20%, #ffd700 50%, transparent 50%),
radial-gradient(2px 2px at 85% 15%, #ff6b6b 50%, transparent 50%),
radial-gradient(3px 3px at 45% 10%, #4ade80 50%, transparent 50%),
radial-gradient(2px 2px at 70% 25%, #60a5fa 50%, transparent 50%),
radial-gradient(2px 2px at 25% 30%, #f472b6 50%, transparent 50%),
radial-gradient(3px 3px at 90% 35%, #fbbf24 50%, transparent 50%),
radial-gradient(2px 2px at 10% 12%, #a78bfa 50%, transparent 50%),
radial-gradient(2px 2px at 55% 5%, #34d399 50%, transparent 50%),
radial-gradient(3px 3px at 35% 18%, #fb923c 50%, transparent 50%),
radial-gradient(2px 2px at 78% 8%, #f9a8d4 50%, transparent 50%);
animation: confettiFall 4s linear infinite;
pointer-events: none;
opacity: 0.7;
z-index: 0;
}
#results-screen > * { position: relative; z-index: 1; }
@keyframes confettiFall {
0% { transform: translateY(-10%) rotate(0deg); opacity: 0.7; }
100% { transform: translateY(100vh) rotate(20deg); opacity: 0; }
}
/* Trophy with glow ring */
.results-trophy {
font-size: clamp(64px, 14vw, 110px);
line-height: 1;
margin-bottom: 2px;
filter: drop-shadow(0 0 30px rgba(255,215,0,0.4));
animation: trophyEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes trophyEntrance {
from { transform: scale(0) rotate(-15deg); opacity: 0; }
to { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* Winner title — animated gold shimmer */
.winner-title {
font-family: 'Lilita One', sans-serif;
font-size: clamp(30px, 7vw, 56px);
background: linear-gradient(
105deg,
#ffd700 0%, #fff8dc 20%, #ffd700 40%,
#daa520 60%, #ffd700 80%, #fff8dc 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
margin-bottom: 6px;
animation: shimmer 3s ease-in-out infinite, titleBounce 2s ease-in-out infinite;
letter-spacing: 1px;
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* "Final Standings" subtitle */
.winner-sub {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 4px;
margin-bottom: 18px;
position: relative;
display: flex;
align-items: center;
gap: 14px;
}
.winner-sub::before,
.winner-sub::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,215,0,0.25), transparent);
max-width: 60px;
}
/* Standings list */
.standings {
list-style: none;
max-width: 420px;
width: calc(100% - 32px);
margin-bottom: 28px;
padding: 0;
}
.standings li {
padding: 14px 20px;
border-radius: 16px;
margin: 8px 0;
font-family: var(--font-body);
font-size: clamp(14px, 3vw, 17px);
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
min-height: 52px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
position: relative;
overflow: hidden;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.standings li:hover {
transform: translateX(6px) scale(1.02);
}
/* Gold — 1st place */
.standings .gold {
background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(255,215,0,0.06) 100%);
color: #ffe066;
border: 1px solid rgba(255,215,0,0.4);
box-shadow:
0 0 20px rgba(255,215,0,0.2),
0 0 50px rgba(255,215,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.standings .gold::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: 16px 0 0 16px;
background: linear-gradient(180deg, #ffd700, #f59e0b);
}
.standings .gold:hover {
box-shadow: 0 0 32px rgba(255,215,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Silver — 2nd place */
.standings .silver {
background: linear-gradient(135deg, rgba(200,210,225,0.14) 0%, rgba(192,192,192,0.05) 100%);
color: #d4d8e0;
border: 1px solid rgba(192,192,192,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.standings .silver::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: 16px 0 0 16px;
background: linear-gradient(180deg, #c0c0c0, #8899aa);
}
/* Bronze — 3rd place */
.standings .bronze {
background: linear-gradient(135deg, rgba(205,127,50,0.16) 0%, rgba(205,127,50,0.04) 100%);
color: #e0a060;
border: 1px solid rgba(205,127,50,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.standings .bronze::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: 16px 0 0 16px;
background: linear-gradient(180deg, #cd7f32, #a0522d);
}
/* Other places */
.standings .other {
background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.4);
border: 1px solid rgba(255,255,255,0.05);
}
/* Eliminated */
.standings .eliminated-entry {
background: linear-gradient(135deg, rgba(180,30,30,0.12) 0%, rgba(100,10,10,0.06) 100%);
color: rgba(255,100,100,0.6);
border: 1px solid rgba(180,30,30,0.15);
}
.standings .eliminated-entry::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
border-radius: 16px 0 0 16px;
background: linear-gradient(180deg, #dc2626, #7f1d1d);
}
.standings .medal { font-size: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.standings .pos { font-size: 13px; opacity: 0.4; min-width: 24px; font-weight: 700; font-family: var(--font-display); }
/* Action buttons */
.results-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
padding: 0 16px;
width: 100%;
max-width: 420px;
}
#race-again-btn, #change-mode-btn {
font-family: 'Lilita One', sans-serif;
font-size: clamp(15px, 2.8vw, 20px);
padding: 14px 36px;
background: linear-gradient(180deg, #7c6ef0, #6354d9);
color: #fff;
border: none;
border-bottom: 3px solid #4834a8;
border-radius: 50px;
cursor: pointer;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 2px 3px rgba(0,0,0,0.4);
box-shadow: 0 6px 24px rgba(108,92,231,0.3), 0 0 40px rgba(108,92,231,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
position: relative;
overflow: hidden;
}
#race-again-btn::after, #change-mode-btn::after, #share-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 50%);
pointer-events: none;
border-radius: inherit;
}
#race-again-btn:hover, #change-mode-btn:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 32px rgba(108,92,231,0.45), 0 0 60px rgba(108,92,231,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}
#race-again-btn:active, #change-mode-btn:active, #share-btn:active {
transform: translateY(1px) scale(0.98);
border-bottom-width: 1px;
}
#change-mode-btn {
background: linear-gradient(180deg, #4a5063, #363b4e);
border-bottom-color: #252833;
box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
#change-mode-btn:hover {
box-shadow: 0 10px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
#share-btn {
font-family: 'Lilita One', sans-serif;
font-size: clamp(13px, 2.4vw, 17px);
padding: 12px 28px;
background: linear-gradient(180deg, #22c997, #10a37a);
color: #fff;
border: none;
border-bottom: 3px solid #0a7d5c;
border-radius: 50px;
cursor: pointer;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 2px 3px rgba(0,0,0,0.4);
box-shadow: 0 4px 18px rgba(16,185,129,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
min-height: 44px;
position: relative;
overflow: hidden;
}
#share-btn:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 10px 28px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* BETTING SCREEN */
#betting-screen {
background:
radial-gradient(circle 400px at 20% 30%, rgba(var(--accent-fun-rgb), 0.08), transparent),
radial-gradient(circle 300px at 80% 70%, rgba(108,92,231,0.06), transparent),
linear-gradient(135deg, #0A0A14 0%, #0E0E1A 50%, #131320 100%);
}
#betting-screen.mode-gory {
background:
radial-gradient(circle 400px at 20% 30%, rgba(var(--accent-gory-rgb), 0.1), transparent),
radial-gradient(circle 300px at 80% 70%, rgba(180,30,30,0.06), transparent),
linear-gradient(135deg, #0A0A14 0%, #1a0a0a 50%, #2a0e0e 100%);
}
#betting-screen.mode-horror {
background:
radial-gradient(circle 400px at 20% 30%, rgba(var(--accent-horror-rgb), 0.08), transparent),
radial-gradient(circle 300px at 80% 70%, rgba(100,50,180,0.06), transparent),
linear-gradient(135deg, #0A0A14 0%, #0E0A1A 50%, #1A1030 100%);
}
#betting-screen.mode-war {
background:
radial-gradient(circle 400px at 20% 30%, rgba(var(--accent-war-rgb), 0.10), transparent),
radial-gradient(circle 300px at 80% 70%, rgba(255,100,0,0.06), transparent),
linear-gradient(135deg, #0A0A14 0%, #1A1A0A 50%, #1A1808 100%);
}
.betting-title {
font-family: 'Lilita One', sans-serif;
font-size: clamp(32px, 7vw, 60px);
color: #ffd700;
text-shadow:
0 4px 0 #daa520,
0 0 20px rgba(255,215,0,0.6),
0 0 60px rgba(255,215,0,0.3),
0 0 120px rgba(255,215,0,0.15);
letter-spacing: 3px;
animation: titleBounce 2s ease-in-out infinite;
margin-bottom: 24px;
}
.bet-card {
background: rgba(15,15,35,0.65); border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px; padding: 16px 14px 12px; text-align: center; min-width: 120px;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.bet-card:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 25px rgba(var(--accent-fun-rgb), 0.12);
border-color: rgba(255,255,255,0.2);
}
.bet-card.selected {
border-color: #ffd700;
border-width: 3px;
box-shadow:
0 0 20px rgba(255,215,0,0.5),
0 0 60px rgba(255,215,0,0.2),
inset 0 0 20px rgba(255,215,0,0.05),
0 12px 28px rgba(0,0,0,0.3);
transform: translateY(-6px) scale(1.08);
opacity: 1;
}
.betting-roster.has-selection .bet-card:not(.selected) {
opacity: 0.6;
filter: saturate(0.7);
}
.betting-roster.has-selection .bet-card:not(.selected):hover {
opacity: 0.8;
filter: saturate(0.85);
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 6px 24px rgba(255,215,0,0.3), 0 0 40px rgba(255,215,0,0.15); }
50% { box-shadow: 0 6px 32px rgba(255,215,0,0.6), 0 0 80px rgba(255,215,0,0.3); }
}
#lock-bet-btn:not(:disabled) {
animation: pulseGlow 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
#lock-bet-btn:not(:disabled) {
animation: none !important;
}
}
.bet-card canvas { display: block; margin: 0 auto 6px; }
.bet-card .duck-name { font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.duck-name-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.duck-name-edit {
background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer;
font-size: 12px; padding: 2px 4px; min-width: 24px; min-height: 24px;
display: flex; align-items: center; justify-content: center;
border-radius: 4px; transition: color 0.15s, background 0.15s;
}
.duck-name-edit:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); }
#lock-bet-btn {
font-family: 'Lilita One', sans-serif;
font-size: clamp(16px, 3.5vw, 24px); padding: 14px 48px;
background: linear-gradient(180deg, #ffd700, #daa520); color: #1a1a2e;
border: none; border-bottom: 5px solid #b8860b; border-radius: 50px;
cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
box-shadow: 0 6px 24px rgba(255,215,0,0.3);
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, opacity 0.3s;
}
#lock-bet-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 32px rgba(255,215,0,0.45); filter: brightness(1.1); }
#lock-bet-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#lock-bet-btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
/* ── Lucky Duck card glow ── */
.bet-card.lucky-duck {
position: relative;
}
.bet-card.lucky-duck::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(250, 204, 21, 0.2), rgba(16, 185, 129, 0.15));
z-index: -1;
animation: luckyGlow 2.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes luckyGlow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.lucky-duck-label {
font-size: 10px;
font-weight: 700;
color: #34d399;
letter-spacing: 0.5px;
margin-top: 4px;
text-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}
/* ── Streak info on betting screen ── */
.betting-streak-info {
font-family: 'Chakra Petch', sans-serif;
font-size: 13px;
font-weight: 700;
color: #fb923c;
letter-spacing: 1px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* ── Double or Nothing banner ── */
.don-banner {
font-family: 'Chakra Petch', sans-serif;
font-size: clamp(12px, 3vw, 14px);
font-weight: 700;
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 10px;
padding: 8px 16px;
margin-bottom: 12px;
letter-spacing: 1px;
text-transform: uppercase;
animation: donPulse 2s ease-in-out infinite;
}
@keyframes donPulse {
0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.1); }
50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
.bet-card.lucky-duck::after,
.don-banner { animation: none !important; opacity: 1; }
}
/* ── Achievement Toast ── */
.achievement-toast {
position: fixed;
top: 20px;
right: -320px;
z-index: 1000;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-radius: 14px;
background: rgba(15, 15, 30, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
min-width: 260px;
max-width: 320px;
transition: right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
font-family: 'Chakra Petch', sans-serif;
}
.achievement-toast.show {
right: 20px;
}
.achievement-toast-icon {
font-size: 28px;
flex-shrink: 0;
}
.achievement-toast-text {
flex: 1;
}
.achievement-toast-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 2px;
}
.achievement-toast-name {
font-size: 15px;
font-weight: 700;
color: #fff;
}
.achievement-toast-bronze { border-color: rgba(205, 127, 50, 0.4); }
.achievement-toast-bronze .achievement-toast-name { color: #e0a060; }
.achievement-toast-silver { border-color: rgba(192, 192, 192, 0.4); }
.achievement-toast-silver .achievement-toast-name { color: #d4d8e0; }
.achievement-toast-gold { border-color: rgba(255, 215, 0, 0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(255,215,0,0.1); }
.achievement-toast-gold .achievement-toast-name { color: #ffd700; }
@media (prefers-reduced-motion: reduce) {
.achievement-toast { transition: none !important; }
}
/* ── Achievement Panel ── */
.achievements-panel {
max-width: clamp(300px, 92vw, 560px);
width: 100%;
margin: 0 auto;
padding: 32px 20px;
text-align: center;
}
.achievements-title {
font-family: 'Russo One', sans-serif;
font-size: clamp(22px, 5vw, 28px);
color: var(--text-primary);
margin: 0 0 4px;
letter-spacing: 2px;
}
.achievements-subtitle {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 20px;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
text-align: left;
}
.achievement-card {
padding: 12px;
border-radius: 12px;
background: var(--surface-2);
border: 1px solid var(--border-ghost);
transition: transform 0.15s, box-shadow 0.15s;
}
.achievement-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.achievement-card.locked {
opacity: 0.45;
filter: grayscale(0.6);
}
.achievement-card.locked .achievement-card-icon {
filter: brightness(0.3);
}
.achievement-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.achievement-card-icon {
font-size: 22px;
flex-shrink: 0;
}
.achievement-card-name {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.achievement-card-desc {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: 8px;
}
.achievement-progress-bar {
height: 4px;
border-radius: 2px;
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.achievement-progress-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease;
}
.achievement-progress-fill.bronze { background: linear-gradient(90deg, #cd7f32, #e0a060); }
.achievement-progress-fill.silver { background: linear-gradient(90deg, #c0c0c0, #d4d8e0); }
.achievement-progress-fill.gold { background: linear-gradient(90deg, #ffd700, #ffec80); }
.achievement-card-progress-text {
font-size: 10px;
color: var(--text-secondary);
margin-top: 4px;
text-align: right;
}
.achievements-back-btn {
margin-top: 20px;
}
/* ── Daily Challenges Bar ── */
.daily-challenges-bar {
width: min(440px, 92vw);
margin: 8px auto 14px;
padding: 14px 18px 12px;
border-radius: 16px;
background:
linear-gradient(160deg, rgba(139,92,246,0.06), rgba(99,102,241,0.03) 60%, rgba(255,255,255,0.015)),
rgba(15,15,30,0.55);
border: 1px solid rgba(139,92,246,0.22);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 6px 20px rgba(0,0,0,0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
text-align: left;
position: relative;
z-index: 1;
}
.daily-challenges-bar:empty { display: none; }
.daily-challenges-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.daily-challenges-label {
font-family: 'Chakra Petch', sans-serif;
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 1px;
}
.daily-challenges-complete {
font-size: 11px;
font-weight: 700;
color: #4ade80;
letter-spacing: 0.5px;
}
.daily-challenge-item {
margin-bottom: 8px;
}
.daily-challenge-item:last-child { margin-bottom: 0; }
.daily-challenge-item.done .daily-challenge-text {
color: rgba(255,255,255,0.35);
text-decoration: line-through;
}
.daily-challenge-text {
font-size: 13px;
color: rgba(255,255,255,0.75);
margin-bottom: 4px;
line-height: 1.4;
}
.daily-check {
color: #4ade80;
font-weight: 700;
}
.daily-challenge-bar {
height: 3px;
border-radius: 2px;
background: rgba(255,255,255,0.06);
overflow: hidden;
margin-bottom: 2px;
}
.daily-challenge-fill {
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
transition: width 0.3s ease;
}
.daily-challenge-item.done .daily-challenge-fill {
background: #4ade80;
}
.daily-challenge-progress {
font-size: 10px;
color: rgba(255,255,255,0.3);
text-align: right;
}
.achievements-mode-btn {
font-family: 'Chakra Petch', sans-serif;
font-size: 11px;
font-weight: 700;
color: rgba(200,210,255,0.7);
background: rgba(20,20,40,0.5);
border: 1px solid rgba(139,92,246,0.25);
border-radius: 20px;
padding: 8px 18px;
cursor: pointer;
margin: 12px 4px 20px;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.22s, transform 0.18s;
min-height: 36px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.achievements-mode-btn:hover {
color: #ffffff;
border-color: rgba(139,92,246,0.65);
background: rgba(30,25,50,0.7);
box-shadow: 0 0 20px rgba(139,92,246,0.25), inset 0 1px 0 rgba(139,92,246,0.2);
transform: translateY(-1px);
}
/* ── Profile Customization ── */
.profile-preview {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.profile-card-preview {
width: 200px;
height: 80px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
}
.profile-card-emblem {
flex-shrink: 0;
}
.profile-card-name {
font-family: 'Chakra Petch', sans-serif;
font-size: 14px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 8px;
}
.profile-emblems-grid {
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
.profile-item {
padding: 8px;
border-radius: 10px;
background: var(--surface-2);
border: 2px solid transparent;
cursor: pointer;
text-align: center;
transition: transform 0.15s, border-color 0.15s;
min-height: 44px;
}
.profile-item:hover {
transform: translateY(-2px);
}
.profile-item.equipped {
border-color: #6366f1;
box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}
.profile-item.locked {
opacity: 0.45;
filter: grayscale(0.5);
}
.profile-item-preview.calling-card-mini {
width: 100%;
height: 32px;
border-radius: 6px;
margin-bottom: 4px;
}
.profile-item-preview.emblem-mini {
display: flex;
justify-content: center;
margin-bottom: 4px;
}
.profile-item-name {
font-size: 10px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.2;
}
.profile-item-cost {
font-size: 9px;
color: #fbbf24;
font-weight: 700;
margin-top: 2px;
}
.profile-item-cost.locked-label {
color: var(--text-secondary);
}
@keyframes slideUpReveal {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.standings li {
opacity: 0;
animation: slideUpReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.standings li:nth-child(1) { animation-delay: 200ms; }
.standings li:nth-child(2) { animation-delay: 350ms; }
.standings li:nth-child(3) { animation-delay: 500ms; }
.standings li:nth-child(4) { animation-delay: 650ms; }
.standings li:nth-child(5) { animation-delay: 800ms; }
@media (prefers-reduced-motion: reduce) {
.standings li,
.results-trophy,
.bet-outcome {
animation: none !important;
opacity: 1;
}
#results-screen::before {
animation: none !important;
display: none;
}
}
/* BET OUTCOME in results — pill badge */
.bet-outcome {
font-family: var(--font-body);
font-size: clamp(13px, 3vw, 16px);
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 14px;
padding: 8px 22px;
border-radius: 100px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: slideUpReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
.bet-outcome.won {
color: #4ade80;
background: rgba(74,222,128,0.12);
border: 1px solid rgba(74,222,128,0.4);
box-shadow: 0 0 20px rgba(74,222,128,0.25), 0 0 50px rgba(74,222,128,0.1);
}
.bet-outcome.lost {
color: #94a3b8;
background: rgba(148,163,184,0.1);
border: 1px solid rgba(148,163,184,0.15);
}
.bet-outcome.eliminated {
color: #f87171;
background: rgba(248,113,113,0.1);
border: 1px solid rgba(248,113,113,0.2);
box-shadow: 0 0 16px rgba(248,113,113,0.1);
}
.rotate-overlay { z-index: 100; background: rgba(0,0,0,0.9); }
.rotate-content { text-align: center; color: white; padding: 20px; }
.rotate-icon { font-size: 48px; margin-bottom: 16px; }
.rotate-title { font-family: 'Lilita One', sans-serif; font-size: 24px; margin-bottom: 8px; }
.rotate-subtitle { color: rgba(255,255,255,0.8); font-size: 14px; margin-bottom: 24px; }
.rotate-dismiss-btn {
font-family: 'Chakra Petch', sans-serif; padding: 12px 32px;
background: rgba(255,255,255,0.15); color: white;
border: 2px solid rgba(255,255,255,0.3); border-radius: 50px;
cursor: pointer; font-size: 16px; min-height: 44px;
}
@media (orientation: portrait) and (max-width: 768px) {
#rotate-overlay:not(.dismissed) {
opacity: 1;
pointer-events: auto;
}
}
/* Focus states */
.mode-card:focus-visible,
.duck-card:focus-visible,
.bet-card:focus-visible,
button:focus-visible {
outline: 2px solid #ffd700;
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.mode-title, .title-block h1, .betting-title, .winner-title {
animation: none !important;
}
.mode-card, .duck-card, .bet-card, .skin-card {
animation: none !important;
transition: none !important;
opacity: 1;
}
.mode-card:hover, .duck-card:hover, .bet-card:hover {
transform: none !important;
}
.overlay {
transition: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
canvas {
transform: none !important;
}
}
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#mute-btn {
position: fixed;
top: calc(12px + var(--safe-top));
right: calc(12px + var(--safe-right));
z-index: 20;
background: rgba(10,10,20,0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255,255,255,0.85);
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
#mute-btn:hover {
background: rgba(10,10,20,0.8);
color: white;
box-shadow: 0 0 16px rgba(255,255,255,0.06);
}
/* ── SKIN SELECTION SCREEN ────────────────────────────── */
/* =======================================================================
CUSTOMIZE SCREEN — landing-style ("candy edition")
Class hooks (.skin-header, .skin-card, .skin-cat-btn, .skin-duck-tab,
.skin-grid, .skin-footer, ...) are kept identical so existing JS in
skins.js / ui.js continues to wire up to the same selectors.
======================================================================= */
#skin-screen {
background:
radial-gradient(ellipse 60% 40% at 18% 12%, rgba(255,61,139,0.10) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 92% 35%, rgba(61,255,209,0.10) 0%, transparent 65%),
radial-gradient(ellipse 70% 50% at 50% 110%, rgba(157,61,255,0.10) 0%, transparent 55%),
linear-gradient(180deg, #170729 0%, #0e0420 100%);
padding: 1.5rem 1rem calc(1.25rem + var(--safe-bottom, 0px));
gap: 1rem;
justify-content: flex-start;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Subtle stardust + grain — same atmosphere as the landing page */
#skin-screen::before {
content: '';
position: fixed; inset: 0;
background-image:
radial-gradient(rgba(255,255,255,0.30) 1px, transparent 1px),
radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
background-size: 90px 90px, 140px 140px;
background-position: 0 0, 30px 50px;
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
#skin-screen::after {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.18;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
#skin-screen > * { position: relative; z-index: 1; }
/* ── Header ── */
.skin-header {
display: flex; align-items: flex-end; justify-content: space-between;
width: 100%; max-width: 600px;
padding-bottom: 0.25rem;
flex-shrink: 0;
gap: 1rem;
}
.skin-header-left {
display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
}
.skin-eyebrow {
display: inline-flex; align-items: center; gap: 0.5rem;
align-self: flex-start;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,245,237,0.04);
backdrop-filter: blur(8px);
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff5ed;
}
.skin-eyebrow::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: linear-gradient(120deg, #3dffd1, #9d3dff);
box-shadow: 0 0 8px rgba(157,61,255,0.6);
}
.skin-title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 800;
font-size: clamp(28px, 6vw, 40px);
line-height: 0.95;
letter-spacing: -0.035em;
background-image: linear-gradient(120deg, #3dffd1 0%, #9d3dff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
margin: 0;
text-transform: none;
filter: none;
animation: none;
}
/* Points pill — gold sticker that mirrors the landing CTA pills */
.skin-points {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 8px 14px;
border-radius: 999px;
background-image: linear-gradient(120deg, #ffd23d 0%, #ff8a3d 100%);
color: #170729;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.04em;
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,0.85),
0 2px 0 rgba(0,0,0,0.2),
0 8px 24px -8px rgba(255,184,61,0.55);
flex-shrink: 0;
animation: none;
}
.skin-points::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: rgba(23,7,41,0.5);
}
.skin-coin-icon { display: none; } /* replaced by gradient pill design */
/* ── Duck Preview Panel — surface card with grad-arcade top bar ── */
.skin-preview-panel {
display: flex; flex-direction: column; align-items: center;
gap: 0.5rem;
flex-shrink: 0;
background: rgba(37,20,72,0.65);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 22px;
padding: 1.5rem 1.5rem 1rem;
max-width: 600px; width: 100%;
position: relative;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
}
.skin-preview-panel::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 5px;
background-image: linear-gradient(120deg, #3dffd1 0%, #9d3dff 100%);
transform: none; width: auto;
}
#skin-preview-canvas {
border-radius: 12px;
filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4));
}
.skin-preview-name {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff5ed;
text-align: center;
}
.skin-preview-equipped {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,245,237,0.42);
text-align: center;
min-height: 1em;
}
/* ── Duck roster tabs ── */
.skin-duck-tabs {
display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
max-width: 600px; width: 100%;
flex-shrink: 0;
}
.skin-duck-tab {
display: flex; flex-direction: column; align-items: center;
gap: 0.3rem;
padding: 0.55rem 0.65rem 0.45rem;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(37,20,72,0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition: transform 0.22s cubic-bezier(.34,1.56,.64,1),
border-color 0.18s,
background 0.18s,
box-shadow 0.18s;
min-width: 68px;
position: relative;
overflow: hidden;
}
.skin-duck-tab::after { content: none; } /* underline removed */
.skin-duck-tab:hover {
transform: translateY(-3px) rotate(-0.5deg);
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.2);
box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
}
.skin-duck-tab.active {
border-color: transparent;
background:
linear-gradient(rgba(37,20,72,0.85), rgba(37,20,72,0.85)) padding-box,
linear-gradient(120deg, #3dffd1 0%, #9d3dff 100%) border-box;
border: 1.5px solid transparent;
box-shadow:
0 0 0 1px rgba(157,61,255,0.4),
0 8px 30px -10px rgba(157,61,255,0.45);
}
.skin-duck-tab canvas { border-radius: 8px; }
.skin-duck-tab span {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,245,237,0.6);
white-space: nowrap;
transition: color 0.18s;
}
.skin-duck-tab.active span {
color: #fff5ed;
text-shadow: 0 0 8px rgba(157,61,255,0.4);
}
/* ── Category tabs (Colors / Gear / Trails) — sticker-pill switcher ── */
.skin-category-tabs {
display: flex; gap: 0.5rem; max-width: 600px; width: 100%;
flex-shrink: 0;
}
.skin-cat-btn {
flex: 1; padding: 11px 10px;
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(37,20,72,0.4);
color: rgba(255,245,237,0.72);
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s;
}
.skin-cat-btn svg {
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.18s, color 0.18s;
}
.skin-cat-btn:hover {
color: #fff5ed;
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.22);
}
.skin-cat-btn:hover svg { opacity: 1; }
.skin-cat-btn.active {
background-image: linear-gradient(120deg, #ff3d8b 0%, #ff8a3d 100%);
color: #170729;
border-color: transparent;
font-weight: 700;
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,0.85),
0 2px 0 rgba(0,0,0,0.2),
0 0 0 1px rgba(255,61,139,0.3),
0 8px 28px -8px rgba(255,61,139,0.55);
}
.skin-cat-btn.active svg { opacity: 1; color: #170729; }
/* ── Skin grid ── */
.skin-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
gap: 0.85rem;
max-width: 600px; width: 100%;
padding: 0.25rem 0.15rem;
flex-shrink: 0;
}
/* ── Skin card ── */
.skin-card {
display: flex; flex-direction: column; align-items: center;
gap: 0.4rem;
padding: 0.85rem 0.55rem;
background: rgba(37,20,72,0.55);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.55s cubic-bezier(.34,1.56,.64,1),
border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.skin-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 60%);
pointer-events: none;
}
.skin-card::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background-image: linear-gradient(120deg, #3dffd1 0%, #9d3dff 100%);
opacity: 0;
transition: opacity 0.2s;
}
.skin-card:hover {
transform: translateY(-5px) rotate(-0.5deg) scale(1.015);
background: rgba(37,20,72,0.75);
border-color: rgba(255,255,255,0.22);
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55);
}
.skin-card:hover::after { opacity: 0.7; }
.skin-card:active { transform: translateY(-2px) scale(0.98); transition-duration: 0.08s; }
.skin-card.equipped {
border-color: transparent;
background:
linear-gradient(rgba(37,20,72,0.85), rgba(37,20,72,0.85)) padding-box,
linear-gradient(120deg, #3dffd1 0%, #c4ff3d 100%) border-box;
border: 1.5px solid transparent;
box-shadow:
0 0 0 1px rgba(61,255,209,0.35),
0 12px 32px -10px rgba(61,255,209,0.35);
}
.skin-card.equipped::after {
opacity: 1;
background-image: linear-gradient(120deg, #c4ff3d 0%, #3dffd1 100%);
}
.skin-card.locked {
opacity: 0.55;
cursor: default;
filter: saturate(0.6) brightness(0.85);
}
.skin-card.locked:hover {
transform: none;
box-shadow: none;
background: rgba(37,20,72,0.55);
border-color: rgba(255,255,255,0.10);
}
.skin-card.locked:hover::after { opacity: 0; }
.skin-card canvas { border-radius: 8px; position: relative; z-index: 1; }
.skin-card-name {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: -0.005em;
color: #fff5ed;
text-align: center;
line-height: 1.2;
position: relative; z-index: 1;
}
.skin-card-desc {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.04em;
color: rgba(255,245,237,0.5);
text-align: center;
line-height: 1.3;
opacity: 0;
max-height: 0;
transition: opacity 0.2s, max-height 0.2s;
overflow: hidden;
position: relative; z-index: 1;
}
.skin-card:hover .skin-card-desc {
opacity: 0.85;
max-height: 2.2em;
}
@media (hover: none) {
.skin-card-desc { opacity: 0.7; max-height: 2.2em; }
}
/* ── Skin card actions ── */
.skin-card-action {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 0.32rem 0.85rem;
border-radius: 999px;
border: none;
cursor: pointer;
transition: transform 0.15s, background 0.18s, box-shadow 0.18s;
position: relative; z-index: 1;
min-height: 26px;
}
.skin-card-action:hover { transform: scale(1.05); }
.skin-card-action.equip {
background: rgba(61,255,209,0.12);
color: #3dffd1;
border: 1px solid rgba(61,255,209,0.4);
}
.skin-card-action.equip:hover {
background: rgba(61,255,209,0.22);
box-shadow: 0 0 16px -4px rgba(61,255,209,0.4);
}
.skin-card-action.equipped-btn {
background-image: linear-gradient(120deg, #c4ff3d 0%, #3dffd1 100%);
color: #170729;
font-weight: 800;
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,0.85),
0 2px 0 rgba(0,0,0,0.2);
}
.skin-card-action.buy {
background-image: linear-gradient(120deg, #ffd23d 0%, #ff8a3d 100%);
color: #170729;
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,0.85),
0 2px 0 rgba(0,0,0,0.2);
}
.skin-card-action.buy:hover {
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,0.85),
0 2px 0 rgba(0,0,0,0.2),
0 0 16px -4px rgba(255,184,61,0.55);
}
.skin-card-action.buy:disabled {
opacity: 0.4; cursor: default;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.85), 0 2px 0 rgba(0,0,0,0.2);
}
.skin-card-action.buy:disabled:hover {
transform: none;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.85), 0 2px 0 rgba(0,0,0,0.2);
}
.skin-card-action.locked-btn {
background: rgba(255,255,255,0.04);
color: rgba(255,245,237,0.42);
cursor: default;
font-size: 0.55rem;
border: 1px solid rgba(255,255,255,0.08);
}
.skin-card-action.locked-btn:hover { transform: none; }
/* ── Stagger entrance animation ── */
.skin-card {
animation: skinCardEnter 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.skin-card:nth-child(1) { animation-delay: 0ms; }
.skin-card:nth-child(2) { animation-delay: 40ms; }
.skin-card:nth-child(3) { animation-delay: 80ms; }
.skin-card:nth-child(4) { animation-delay: 120ms; }
.skin-card:nth-child(5) { animation-delay: 160ms; }
.skin-card:nth-child(6) { animation-delay: 200ms; }
.skin-card:nth-child(7) { animation-delay: 240ms; }
.skin-card:nth-child(8) { animation-delay: 280ms; }
.skin-card:nth-child(9) { animation-delay: 320ms; }
@keyframes skinCardEnter {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* ── Footer back button ── */
.skin-footer {
max-width: 600px; width: 100%;
display: flex; justify-content: center;
padding-top: 0.25rem;
flex-shrink: 0;
}
.skin-footer button {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 12px 28px;
background: transparent;
color: rgba(255,245,237,0.72);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}
.skin-footer button:hover {
color: #fff5ed;
border-color: rgba(255,255,255,0.4);
background: rgba(255,255,255,0.04);
transform: translateY(-1px);
}
/* ── Customize screen: Mobile ── */
@media (max-width: 480px) {
#skin-screen {
padding: 1rem 0.85rem calc(1rem + var(--safe-bottom, 0px));
gap: 0.7rem;
}
.skin-header { padding-bottom: 0; gap: 0.5rem; }
.skin-eyebrow { font-size: 9.5px; padding: 3px 10px; }
.skin-title { font-size: 1.5rem; }
.skin-points { font-size: 11.5px; padding: 6px 11px; }
.skin-preview-panel { padding: 1rem 1.15rem 0.7rem; border-radius: 18px; }
#skin-preview-canvas { width: 110px; height: 95px; }
.skin-preview-name { font-size: 0.92rem; }
.skin-preview-equipped { font-size: 9.5px; }
.skin-duck-tabs { gap: 0.35rem; }
.skin-duck-tab { min-width: 58px; padding: 0.4rem 0.5rem 0.35rem; }
.skin-duck-tab canvas { width: 48px; height: 40px; }
.skin-duck-tab span { font-size: 0.55rem; }
.skin-category-tabs { gap: 0.4rem; }
.skin-cat-btn { padding: 9px 6px; font-size: 0.78rem; gap: 0.3rem; }
.skin-cat-btn svg { width: 12px; height: 12px; }
.skin-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 0.65rem;
}
.skin-card { padding: 0.6rem 0.45rem; gap: 0.3rem; border-radius: 14px; }
.skin-card canvas { width: 75px; height: 58px; }
.skin-card-name { font-size: 0.7rem; }
.skin-card-action { font-size: 0.58rem; padding: 0.26rem 0.7rem; min-height: 26px; }
.skin-footer {
padding-top: 0.4rem;
padding-bottom: 0.25rem;
position: sticky;
bottom: 0;
background: linear-gradient(to top, rgba(14,4,32,0.95) 60%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2;
}
.skin-footer button { width: 100%; padding: 14px 20px; }
}
/* ── Customize screen: Short height (landscape / short phones) ── */
@media (max-height: 600px) {
.skin-preview-panel { padding: 0.6rem 1rem 0.5rem; }
#skin-preview-canvas { width: 90px; height: 75px; }
.skin-duck-tab { min-width: 52px; padding: 0.3rem 0.4rem; }
.skin-duck-tab canvas { width: 40px; height: 34px; }
.skin-duck-tab span { font-size: 0.5rem; }
#skin-screen { gap: 0.5rem; }
}
/* ── Customize screen: Tablet+ ── */
@media (min-width: 769px) {
.skin-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
max-width: 680px;
}
.skin-header, .skin-preview-panel, .skin-duck-tabs, .skin-category-tabs, .skin-footer {
max-width: 680px;
}
}
.points-badge {
position: absolute;
top: 0.75rem;
left: 1rem;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: clamp(1.1rem, 3vw, 1.4rem);
font-weight: 800;
color: #ffd700;
background:
linear-gradient(135deg, rgba(255,215,0,0.18) 0%, rgba(255,180,0,0.08) 50%, rgba(255,215,0,0.14) 100%);
padding: 0.5rem 1.1rem 0.5rem 0.9rem;
border-radius: 16px;
border: 2px solid rgba(255,215,0,0.35);
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 20px rgba(255,215,0,0.6), 0 0 40px rgba(255,215,0,0.2);
box-shadow:
0 0 24px rgba(255,215,0,0.15),
0 0 48px rgba(255,215,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.1),
inset 0 -1px 0 rgba(0,0,0,0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: pts-entrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, pts-glow 3s ease-in-out infinite 1s;
z-index: 5;
letter-spacing: 0.03em;
overflow: hidden;
}
/* Shimmer sweep across badge */
.points-badge::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
animation: pts-shimmer 4s ease-in-out infinite 2s;
pointer-events: none;
}
/* Coin icon via ::after */
.points-badge::after {
content: '★';
font-size: 0.85em;
color: #ffe866;
filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
animation: pts-star-spin 6s linear infinite;
display: inline-block;
order: -1;
}
@keyframes pts-entrance {
from { opacity: 0; transform: translateX(-20px) scale(0.7); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pts-glow {
0%, 100% {
box-shadow: 0 0 24px rgba(255,215,0,0.15), 0 0 48px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
border-color: rgba(255,215,0,0.35);
}
50% {
box-shadow: 0 0 32px rgba(255,215,0,0.3), 0 0 64px rgba(255,215,0,0.12), inset 0 1px 0 rgba(255,255,255,0.15);
border-color: rgba(255,215,0,0.5);
}
}
@keyframes pts-shimmer {
0%, 100% { left: -100%; }
50% { left: 150%; }
}
@keyframes pts-star-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.points-badge { animation: pts-entrance 0.4s ease-out both; }
.points-badge::before { animation: none; }
.points-badge::after { animation: none; }
}
#customize-btn {
font-family: 'Lilita One', sans-serif !important;
font-size: clamp(14px, 3vw, 20px) !important; padding: 14px 36px !important;
background: linear-gradient(180deg, #fbbf24, #f59e0b) !important; color: #fff !important;
border: none !important; border-bottom: 4px solid #d97706 !important; border-radius: 50px !important;
cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
text-shadow: 0 2px 3px rgba(0,0,0,0.3);
box-shadow: 0 4px 16px rgba(251,191,36,0.35);
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
#customize-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 24px rgba(251,191,36,0.5); filter: brightness(1.1); }
#customize-btn:active { transform: translateY(2px); border-bottom-width: 2px !important; }
/* =======================================================================
TOURNAMENT MODE
======================================================================= */
.mode-card-tournament {
border: 1px solid rgba(255,215,0,0.25);
background: linear-gradient(160deg, rgba(26,26,46,0.8), rgba(255,215,0,0.06));
box-shadow: 0 0 30px rgba(255,215,0,0.08), inset 0 1px 0 rgba(255,215,0,0.05);
}
/* ═══════════════════════════════════════════════════════════════════════
TOURNAMENT — ENTRANCE ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
@keyframes t-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes t-scale-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
@keyframes t-slide-up {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes t-bar-grow {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
@keyframes t-glow-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.15); }
50% { box-shadow: 0 0 40px rgba(255,215,0,0.3); }
}
@keyframes t-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes t-champion-glow {
0%, 100% { text-shadow: 0 0 20px rgba(255,215,0,0.4), 0 0 40px rgba(255,215,0,0.15); }
50% { text-shadow: 0 0 30px rgba(255,215,0,0.6), 0 0 60px rgba(255,215,0,0.25), 0 0 80px rgba(255,215,0,0.1); }
}
/* ═══════════════════════════════════════════════════════════════════════
TOURNAMENT — OVERLAY (full-screen dark scrim)
═══════════════════════════════════════════════════════════════════════ */
#tournament-between-screen,
#tournament-finale-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
overflow-y: auto;
gap: 0;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ═══════════════════════════════════════════════════════════════════════
TOURNAMENT — PANEL
═══════════════════════════════════════════════════════════════════════ */
.tournament-panel {
background:
radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 20% 100%, rgba(160,80,255,0.03) 0%, transparent 50%),
linear-gradient(180deg, rgba(12,12,20,0.99) 0%, rgba(6,6,12,1) 100%);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1rem 2rem;
position: relative;
}
/* Animated ambient glow at top */
.tournament-panel::before {
content: '';
position: absolute;
top: -80px; left: 50%;
transform: translateX(-50%);
width: 500px; height: 250px;
background: radial-gradient(ellipse, rgba(255,215,0,0.1) 0%, rgba(255,180,0,0.04) 40%, transparent 70%);
pointer-events: none;
animation: t-ambient-breathe 4s ease-in-out infinite;
}
/* Bottom edge glow */
.tournament-panel::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(to top, rgba(255,215,0,0.03), transparent);
pointer-events: none;
}
@keyframes t-ambient-breathe {
0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
@media (min-width: 768px) {
.tournament-panel {
padding: 2.5rem 2rem 3rem;
}
}
/* Content sections max-width */
.tournament-header,
.tournament-podium,
.tournament-standings,
.tournament-next-mode,
.tournament-bet-section,
#tournament-next-round-btn,
.tournament-champion-header,
.tournament-round-summaries,
.tournament-earnings,
.tournament-finale-buttons {
width: 100%;
max-width: 600px;
}
/* ═══════════════════════════════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════════════════════════════ */
.tournament-header {
text-align: center;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid rgba(255,215,0,0.12);
animation: t-fade-up 0.4s ease-out both;
position: relative;
}
.tournament-round-label {
display: inline;
font-family: var(--font-display);
font-size: clamp(1.5rem, 5vw, 2.2rem);
font-weight: 800;
color: #ffd700;
text-shadow: 0 0 32px rgba(255,215,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
letter-spacing: 0.02em;
}
.tournament-round-counter {
display: inline-block;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
color: #ffd700;
background: rgba(255,215,0,0.15);
padding: 4px 12px;
border-radius: 10px;
margin-left: 0.6rem;
vertical-align: middle;
border: 1px solid rgba(255,215,0,0.25);
box-shadow: 0 0 12px rgba(255,215,0,0.1);
}
/* ═══════════════════════════════════════════════════════════════════════
PODIUM
═══════════════════════════════════════════════════════════════════════ */
.tournament-podium {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 12px;
height: 200px;
padding-bottom: 4px;
margin-bottom: 0.75rem;
animation: t-scale-in 0.5s ease-out 0.15s both;
position: relative;
}
@media (min-width: 768px) {
.tournament-podium {
height: 240px;
gap: 20px;
}
}
.podium-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex: 1;
max-width: 130px;
}
.podium-slot canvas {
border-radius: 8px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.podium-duck-name {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 700;
text-align: center;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.podium-duck-score {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 800;
color: #ffd700;
text-shadow: 0 0 12px rgba(255,215,0,0.4);
}
.podium-bar {
width: 100%;
max-width: 100px;
border-radius: 10px 10px 0 0;
transition: height 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
transform-origin: bottom;
}
.podium-bar::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.5), rgba(255,255,255,0.05));
border-radius: 10px 10px 0 0;
}
.podium-bar-1st {
background: linear-gradient(to top, #6a4800, #ffd700, #ffe866, #fff4b0);
box-shadow: 0 0 40px rgba(255,215,0,0.35), 0 0 80px rgba(255,215,0,0.1), inset 0 -6px 16px rgba(0,0,0,0.2);
animation: t-glow-pulse 2s ease-in-out infinite 1s;
}
.podium-bar-2nd {
background: linear-gradient(to top, #303840, #909aa4, #c0c8d0, #dce0e4);
box-shadow: 0 0 16px rgba(160,170,180,0.15), inset 0 -4px 12px rgba(0,0,0,0.2);
}
.podium-bar-3rd {
background: linear-gradient(to top, #4a2808, #a06030, #c08050, #d8a070);
box-shadow: 0 0 12px rgba(176,112,64,0.12), inset 0 -4px 12px rgba(0,0,0,0.2);
}
/* ═══════════════════════════════════════════════════════════════════════
STANDINGS TABLE
═══════════════════════════════════════════════════════════════════════ */
.tournament-standings {
width: 100%;
background: rgba(255,255,255,0.02);
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
margin-bottom: 0.5rem;
animation: t-slide-up 0.4s ease-out 0.3s both;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.tournament-standing-row {
display: flex;
align-items: center;
padding: 0.6rem 1rem;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-family: var(--font-body);
font-size: 0.88rem;
transition: background 0.2s;
}
.tournament-standing-row:first-child {
background: linear-gradient(90deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
}
.tournament-standing-row:last-child { border-bottom: none; }
.standing-position {
width: 28px;
font-weight: 800;
color: rgba(255,255,255,0.25);
font-size: 0.82rem;
}
.tournament-standing-row:first-child .standing-position {
color: #ffd700;
text-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.standing-name {
flex: 1;
font-weight: 600;
color: rgba(255,255,255,0.88);
font-size: 0.88rem;
}
.standing-score {
font-weight: 800;
color: #ffd700;
min-width: 55px;
text-align: right;
font-variant-numeric: tabular-nums;
font-size: 0.88rem;
text-shadow: 0 0 6px rgba(255,215,0,0.2);
}
/* ═══════════════════════════════════════════════════════════════════════
NEXT MODE REVEAL
═══════════════════════════════════════════════════════════════════════ */
.tournament-next-mode {
text-align: center;
padding: 0.9rem 1.5rem;
border-radius: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
width: 100%;
margin-bottom: 0.5rem;
animation: t-slide-up 0.4s ease-out 0.4s both;
position: relative;
overflow: hidden;
}
.tournament-next-mode::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
background-size: 200% 100%;
animation: t-shimmer 3s ease-in-out infinite 1s;
pointer-events: none;
}
.tournament-next-mode-label {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.tournament-next-mode-name {
font-family: var(--font-display);
font-size: clamp(1.4rem, 4vw, 2rem);
font-weight: 800;
margin-top: 0.2rem;
}
.tournament-next-mode-name.mode-fun { color: #ffd709; text-shadow: 0 0 24px rgba(255,215,9,0.5), 0 0 60px rgba(255,215,9,0.15); }
.tournament-next-mode-name.mode-gory { color: #ff734c; text-shadow: 0 0 24px rgba(255,115,76,0.5), 0 0 60px rgba(255,115,76,0.15); }
.tournament-next-mode-name.mode-horror { color: #e69dff; text-shadow: 0 0 24px rgba(230,157,255,0.5), 0 0 60px rgba(230,157,255,0.15); }
.tournament-next-mode-name.mode-war { color: #5a9a4a; text-shadow: 0 0 24px rgba(90,154,74,0.5), 0 0 60px rgba(90,154,74,0.15); }
/* ═══════════════════════════════════════════════════════════════════════
BET SECTION
═══════════════════════════════════════════════════════════════════════ */
.tournament-bet-section {
width: 100%;
animation: t-slide-up 0.4s ease-out 0.5s both;
}
.tournament-bet-section .betting-title {
text-align: center;
margin-bottom: 0.75rem;
font-size: clamp(0.9rem, 3vw, 1.2rem);
}
#tournament-betting-roster {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
#tournament-betting-roster .bet-card {
width: 100%;
min-width: 0;
padding: 12px 4px 10px;
border-radius: 14px;
background: rgba(255,255,255,0.03);
border: 2px solid rgba(255,255,255,0.06);
transition: border-color 0.2s, background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
}
#tournament-betting-roster .bet-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.04), transparent 70%);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
#tournament-betting-roster .bet-card:hover::before {
opacity: 1;
}
#tournament-betting-roster .bet-card:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.18);
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#tournament-betting-roster .bet-card.selected {
border-color: #ffd700;
background: rgba(255,215,0,0.1);
box-shadow: 0 0 24px rgba(255,215,0,0.25), 0 4px 20px rgba(255,215,0,0.12), inset 0 0 20px rgba(255,215,0,0.05);
transform: translateY(-4px) scale(1.04);
}
#tournament-betting-roster .bet-card canvas {
width: 60px;
height: 48px;
display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
#tournament-betting-roster .bet-card .duck-name {
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
text-align: center;
margin-top: 5px;
}
@media (max-width: 420px) {
#tournament-betting-roster {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
}
/* ═══════════════════════════════════════════════════════════════════════
START NEXT ROUND BUTTON
═══════════════════════════════════════════════════════════════════════ */
#tournament-next-round-btn {
font-family: 'Lilita One', sans-serif;
font-size: clamp(14px, 3vw, 18px);
padding: 16px 44px;
background: linear-gradient(180deg, #ffe866, #ffd700, #d4a800);
color: #1a1000;
border: none;
border-bottom: 4px solid #a07800;
border-radius: 50px;
cursor: pointer;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
box-shadow: 0 4px 28px rgba(255,215,0,0.3), 0 0 60px rgba(255,215,0,0.1);
transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, filter 0.15s, opacity 0.15s;
margin-top: 0.75rem;
animation: t-slide-up 0.4s ease-out 0.6s both;
position: relative;
overflow: hidden;
}
#tournament-next-round-btn::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
transition: left 0.5s;
}
#tournament-next-round-btn:not(:disabled):hover::after {
left: 150%;
}
#tournament-next-round-btn:disabled {
opacity: 0.25;
cursor: not-allowed;
filter: grayscale(0.7);
}
#tournament-next-round-btn:not(:disabled):hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 40px rgba(255,215,0,0.45), 0 0 80px rgba(255,215,0,0.15);
filter: brightness(1.1);
}
#tournament-next-round-btn:not(:disabled):active {
transform: translateY(1px) scale(0.97);
border-bottom-width: 2px;
box-shadow: 0 2px 12px rgba(255,215,0,0.2);
}
/* ═══════════════════════════════════════════════════════════════════════
CHAMPION HEADER (finale)
═══════════════════════════════════════════════════════════════════════ */
.tournament-champion-header {
text-align: center;
font-family: var(--font-display);
font-size: clamp(1.8rem, 6vw, 3rem);
font-weight: 800;
color: #ffd700;
text-shadow: 0 0 40px rgba(255,215,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
animation: t-scale-in 0.5s ease-out both, t-champion-glow 2.5s ease-in-out infinite 0.5s;
padding: 0.5rem 0;
}
.tournament-champion-sub {
font-family: var(--font-body);
font-size: clamp(1rem, 3vw, 1.3rem);
font-weight: 700;
margin-top: 0.25rem;
}
/* ═══════════════════════════════════════════════════════════════════════
ROUND SUMMARIES (finale)
═══════════════════════════════════════════════════════════════════════ */
.tournament-round-summaries {
display: flex;
gap: 0.75rem;
width: 100%;
animation: t-slide-up 0.4s ease-out 0.3s both;
}
.round-summary-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 0.75rem 0.75rem;
text-align: center;
flex: 1;
min-width: 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: border-color 0.2s, background 0.2s;
}
.round-summary-card:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.12);
}
.round-summary-title {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.round-summary-mode {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
margin: 0.2rem 0;
}
.round-summary-winner {
font-family: var(--font-body);
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
}
.round-summary-bet {
font-family: var(--font-body);
font-size: 0.65rem;
margin-top: 0.2rem;
font-weight: 600;
}
.round-summary-bet.won { color: #4ade80; }
.round-summary-bet.lost { color: #f87171; }
/* Earnings */
.tournament-earnings {
text-align: center;
font-family: var(--font-body);
font-size: 0.9rem;
color: rgba(255,255,255,0.5);
animation: t-slide-up 0.4s ease-out 0.4s both;
}
.tournament-earnings-total {
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 800;
color: #ffd700;
text-shadow: 0 0 16px rgba(255,215,0,0.3);
}
/* Finale buttons */
.tournament-finale-buttons {
display: flex;
gap: 12px;
width: 100%;
justify-content: center;
margin-top: 0.5rem;
animation: t-slide-up 0.4s ease-out 0.5s both;
}
.tournament-finale-buttons button {
font-family: 'Lilita One', sans-serif;
font-size: clamp(13px, 2.5vw, 16px);
padding: 12px 28px;
border: none;
border-radius: 50px;
cursor: pointer;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
}
#tournament-new-btn {
background: linear-gradient(180deg, #ffe44d, #ffd700, #d4a800);
color: #1a1000;
border-bottom: 3px solid #a07800;
box-shadow: 0 4px 20px rgba(255,215,0,0.25), 0 0 40px rgba(255,215,0,0.08);
flex: 1;
max-width: 220px;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
#tournament-new-btn:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 32px rgba(255,215,0,0.4), 0 0 60px rgba(255,215,0,0.12);
filter: brightness(1.08);
}
#tournament-new-btn:active {
transform: translateY(1px) scale(0.97);
}
#tournament-back-btn {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.6);
border-bottom: 3px solid rgba(255,255,255,0.08);
transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, box-shadow 0.2s;
}
#tournament-back-btn:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#tournament-back-btn:active {
transform: translateY(1px);
}
/* Tournament — mobile compact layout */
@media (max-width: 480px) {
.tournament-panel {
padding: calc(2.5rem + env(safe-area-inset-top, 0px)) 0.75rem 1.5rem;
gap: 0;
}
.tournament-header {
padding-bottom: 0.5rem;
margin-bottom: 0.4rem;
}
.tournament-round-label {
font-size: clamp(1.2rem, 5vw, 1.6rem);
}
.tournament-podium {
height: 140px;
margin-bottom: 0.4rem;
gap: 8px;
}
.podium-slot {
max-width: 100px;
gap: 2px;
}
.podium-duck-name {
font-size: 0.6rem;
}
.podium-duck-score {
font-size: 0.65rem;
}
.podium-bar {
max-width: 75px;
border-radius: 8px 8px 0 0;
}
.tournament-standings {
margin-bottom: 0.25rem;
border-radius: 12px;
}
.tournament-standing-row {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
.standing-name { font-size: 0.8rem; }
.standing-score { font-size: 0.8rem; }
.tournament-next-mode {
padding: 0.6rem 1rem;
margin-bottom: 0.25rem;
border-radius: 12px;
}
.tournament-bet-section .betting-title {
margin-bottom: 0.5rem;
}
#tournament-betting-roster .bet-card {
padding: 8px 3px 6px;
border-radius: 10px;
}
#tournament-betting-roster .bet-card canvas {
width: 50px;
height: 40px;
}
#tournament-betting-roster .bet-card .duck-name {
font-size: 0.55rem;
}
#tournament-next-round-btn {
padding: 14px 32px;
margin-top: 0.5rem;
}
/* Finale mobile */
.tournament-round-summaries {
gap: 0.5rem;
}
.round-summary-card {
padding: 0.5rem;
border-radius: 10px;
}
.tournament-finale-buttons {
gap: 8px;
}
.tournament-finale-buttons button {
padding: 10px 20px;
font-size: 12px;
}
/* Center content vertically on mobile, titles pulled up */
.tournament-panel {
justify-content: center;
}
.tournament-header {
margin-top: -2rem;
margin-bottom: 0.4rem;
}
.tournament-champion-header {
margin-top: -3rem;
margin-bottom: 0.5rem;
}
}
/* Tournament — reduced motion */
@media (prefers-reduced-motion: reduce) {
.tournament-header,
.tournament-podium,
.tournament-standings,
.tournament-next-mode,
.tournament-bet-section,
#tournament-next-round-btn,
.tournament-champion-header,
.tournament-round-summaries,
.tournament-earnings,
.tournament-finale-buttons {
animation: none !important;
opacity: 1;
}
.podium-bar {
transition: none !important;
}
.podium-bar-1st {
animation: none !important;
}
.tournament-next-mode::before,
#tournament-next-round-btn::after {
animation: none !important;
display: none;
}
}
/* =======================================================================
MULTIPLAYER SCREENS
======================================================================= */
/* ── Multiplayer overlay backgrounds ── */
#mp-menu-screen,
#mp-create-screen,
#mp-join-screen,
#mp-lobby-screen,
#mp-disconnect-screen {
background:
radial-gradient(ellipse at 25% 15%, rgba(99, 102, 241, 0.14) 0%, transparent 55%),
radial-gradient(ellipse at 75% 85%, rgba(139, 92, 246, 0.12) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
var(--surface-base);
}
/* Subtle scanlines across all mp screens */
#mp-menu-screen::before,
#mp-create-screen::before,
#mp-join-screen::before,
#mp-lobby-screen::before,
#mp-disconnect-screen::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255,255,255,0.018) 2px,
rgba(255,255,255,0.018) 3px
);
pointer-events: none;
z-index: 0;
}
/* Drifting aurora blob */
#mp-menu-screen::after,
#mp-create-screen::after,
#mp-join-screen::after,
#mp-lobby-screen::after,
#mp-disconnect-screen::after {
content: '';
position: absolute;
top: -15%;
left: 50%;
width: 90vmin;
height: 90vmin;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(139,92,246,0.22), transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
animation: mpAuroraDrift 18s ease-in-out infinite alternate;
}
@keyframes mpAuroraDrift {
0% { transform: translate(-55%, 0) scale(1); opacity: 0.55; }
50% { transform: translate(-45%, -4%) scale(1.1); opacity: 0.8; }
100% { transform: translate(-55%, 2%) scale(0.95); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
#mp-menu-screen::after, #mp-create-screen::after, #mp-join-screen::after,
#mp-lobby-screen::after, #mp-disconnect-screen::after {
animation: none !important;
}
}
#mp-betting-screen {
background:
radial-gradient(ellipse at 50% 20%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 30% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
var(--surface-base);
}
#mp-results-screen {
background: #0a0a14;
overflow-y: auto;
overflow-x: hidden;
align-items: flex-start;
justify-content: flex-start;
}
@media (min-width: 768px) {
#mp-results-screen {
align-items: center;
justify-content: center;
}
}
/* ── Confetti canvas ── */
#mp-confetti-canvas {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
}
/* ── Dynamic glow behind winner ── */
.mp-results-glow {
position: fixed;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 140vw;
height: 80vh;
border-radius: 50%;
filter: blur(100px);
opacity: 0;
animation: glowPulseIn 1.2s ease-out 0.3s forwards;
pointer-events: none;
z-index: 0;
}
@keyframes glowPulseIn {
0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
60% { opacity: 0.35; }
100% { opacity: 0.18; transform: translateX(-50%) scale(1); }
}
/* ── Floating particles ── */
.mp-results-particles {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.mp-particle {
position: absolute;
border-radius: 50%;
opacity: 0;
animation: particleFloat 4s ease-in-out infinite;
}
@keyframes particleFloat {
0% { opacity: 0; transform: translateY(0) scale(0.5); }
20% { opacity: 0.6; }
80% { opacity: 0.3; }
100% { opacity: 0; transform: translateY(-120px) scale(1.2); }
}
/* ── Trophy entrance ── */
.mp-results-trophy {
opacity: 0;
animation: trophyDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5)) drop-shadow(0 8px 24px rgba(0,0,0,0.5));
margin-bottom: 8px;
}
.mp-trophy-svg {
animation: trophyGlow 2s ease-in-out infinite;
}
@keyframes trophyDrop {
0% { opacity: 0; transform: translateY(-40px) scale(0.3) rotate(-10deg); }
60% { transform: translateY(5px) scale(1.05) rotate(2deg); }
100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes trophyGlow {
0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3)); }
50% { filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 60px rgba(255, 200, 0, 0.2)); }
}
/* ── Animated winner title ── */
.mp-winner-animated {
opacity: 0;
animation: winnerReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}
@keyframes winnerReveal {
0% { opacity: 0; transform: scale(0.5); letter-spacing: 12px; filter: blur(8px); }
60% { letter-spacing: 2px; filter: blur(0); }
100% { opacity: 1; transform: scale(1); letter-spacing: 1px; }
}
/* ── Results two-column layout ── */
.mp-results-layout {
position: relative;
z-index: 2;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 20px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.mp-results-col {
width: 100%;
max-width: 460px;
}
.mp-results-col-right {
max-width: 460px;
}
/* Desktop: side-by-side */
@media (min-width: 768px) {
.mp-results-layout {
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 40px;
padding: 40px 32px;
}
.mp-results-col {
flex: 1;
max-width: 420px;
}
.mp-results-col-left {
position: sticky;
top: 40px;
}
}
.mp-results-hero {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 4px;
}
/* ── Enhanced standings in mp-results ── */
#mp-results-screen .standings {
max-width: 100%;
width: 100%;
}
#mp-results-screen .standings li {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.06);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
#mp-results-screen .standings li:hover {
border-color: rgba(255,255,255,0.12);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* ── Winner crown accent on 1st place ── */
#mp-results-screen .standings .gold {
position: relative;
box-shadow: 0 0 25px rgba(255,215,0,0.15), 0 0 60px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,255,255,0.1);
}
#mp-results-screen .standings .gold::after {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, transparent 50%);
animation: goldShimmer 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes goldShimmer {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* ── Right column full-width children ── */
#mp-results-screen .mp-player-bets,
#mp-results-screen .mp-results-players,
#mp-results-screen .mp-results-buttons {
width: 100%;
}
/* ── Enhanced bet rows ── */
#mp-results-screen .mp-bet-row {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#mp-results-screen .mp-bet-row.won {
box-shadow: 0 0 16px rgba(34, 197, 94, 0.12);
animation: wonPulse 2s ease-in-out infinite;
}
@keyframes wonPulse {
0%, 100% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.12); }
50% { box-shadow: 0 0 24px rgba(34, 197, 94, 0.2); }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.mp-results-glow,
.mp-results-trophy,
.mp-winner-animated,
.mp-particle,
.mp-trophy-svg,
#mp-results-screen .standings .gold::after,
#mp-results-screen .mp-bet-row.won {
animation: none !important;
opacity: 1;
}
#mp-confetti-canvas { display: none; }
}
#mp-disconnect-screen {
background:
radial-gradient(ellipse at 50% 50%, rgba(239, 68, 68, 0.06) 0%, transparent 50%),
var(--surface-base);
}
.mp-panel {
max-width: clamp(300px, 92vw, 480px);
width: 100%;
margin: 0 auto;
padding: 28px 24px 24px;
text-align: center;
position: relative;
z-index: 2;
border-radius: 24px;
background:
linear-gradient(170deg, rgba(22,18,40,0.72) 0%, rgba(10,8,22,0.88) 100%);
border: 1px solid rgba(139,92,246,0.28);
backdrop-filter: blur(20px) saturate(135%);
-webkit-backdrop-filter: blur(20px) saturate(135%);
box-shadow:
inset 0 1px 0 rgba(139,92,246,0.18),
inset 0 0 48px rgba(99,102,241,0.04),
0 20px 60px rgba(0,0,0,0.55),
0 0 0 1px rgba(139,92,246,0.06);
}
/* Panel top light bar */
.mp-panel::before {
content: '';
position: absolute;
top: -1px;
left: 18%;
right: 18%;
height: 2px;
background: linear-gradient(90deg, transparent, #8b5cf6 40%, #6366f1 60%, transparent);
opacity: 0.9;
filter: blur(0.5px);
pointer-events: none;
}
/* Panel corner hint — tiny bracket marks like an arcade frame */
.mp-panel::after {
content: '';
position: absolute;
inset: 10px;
border-radius: 18px;
pointer-events: none;
background:
linear-gradient(to right, rgba(139,92,246,0.35) 16px, transparent 16px) top left / 100% 1px no-repeat,
linear-gradient(to bottom, rgba(139,92,246,0.35) 16px, transparent 16px) top left / 1px 100% no-repeat,
linear-gradient(to left, rgba(139,92,246,0.35) 16px, transparent 16px) top right / 100% 1px no-repeat,
linear-gradient(to bottom, rgba(139,92,246,0.35) 16px, transparent 16px) top right / 1px 100% no-repeat,
linear-gradient(to right, rgba(139,92,246,0.35) 16px, transparent 16px) bottom left / 100% 1px no-repeat,
linear-gradient(to top, rgba(139,92,246,0.35) 16px, transparent 16px) bottom left / 1px 100% no-repeat,
linear-gradient(to left, rgba(139,92,246,0.35) 16px, transparent 16px) bottom right / 100% 1px no-repeat,
linear-gradient(to top, rgba(139,92,246,0.35) 16px, transparent 16px) bottom right / 1px 100% no-repeat;
}
/* Wider panel for betting (more content) */
#mp-betting-screen .mp-panel {
max-width: clamp(300px, 92vw, 520px);
}
.mp-title {
font-family: 'Russo One', sans-serif;
font-size: clamp(26px, 6vw, 38px);
color: #e8ecff;
margin: 0 0 6px;
letter-spacing: 5px;
line-height: 1.1;
text-transform: uppercase;
text-shadow:
0 0 14px rgba(139,92,246,0.55),
0 0 40px rgba(99,102,241,0.25),
0 2px 6px rgba(0,0,0,0.5);
position: relative;
z-index: 1;
}
/* Small "live" dot indicator above title on menu/lobby */
#mp-menu-screen .mp-title::before,
#mp-lobby-screen .mp-title::before {
content: 'LIVE';
display: block;
font-family: 'Chakra Petch', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
color: #fb7185;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(251,113,133,0.55);
animation: mpLivePulse 1.6s ease-in-out infinite;
}
#mp-menu-screen .mp-title::before::after { content: ''; }
@keyframes mpLivePulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.mp-subtitle {
color: rgba(200,210,255,0.7);
font-size: clamp(13px, 3.2vw, 15px);
margin: 0 0 22px;
line-height: 1.5;
letter-spacing: 1.2px;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.mp-menu-buttons {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 1;
}
.mp-btn-primary {
font-family: 'Russo One', sans-serif;
font-weight: 400;
font-size: clamp(15px, 3.6vw, 18px);
letter-spacing: 3px;
text-transform: uppercase;
padding: 16px 24px;
border: 1.5px solid rgba(165,140,255,0.55);
border-radius: 14px;
background:
linear-gradient(140deg, rgba(99,102,241,0.95) 0%, rgba(139,92,246,0.95) 60%, rgba(168,85,247,0.95) 100%);
color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -1px 0 rgba(0,0,0,0.25),
0 10px 24px rgba(99,102,241,0.35),
0 0 0 1px rgba(255,255,255,0.05);
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.22s ease;
min-height: 52px;
width: 100%;
}
.mp-btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 0.6s ease;
pointer-events: none;
z-index: -1;
}
.mp-btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(0,0,0,0.3),
0 14px 36px rgba(139,92,246,0.55),
0 0 30px rgba(99,102,241,0.3);
}
.mp-btn-primary:hover:not(:disabled)::before {
transform: translateX(120%);
}
.mp-btn-primary:active:not(:disabled) {
transform: translateY(0) scale(0.97);
}
.mp-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
background:
linear-gradient(140deg, rgba(60,60,90,0.85), rgba(50,50,80,0.85));
border-color: rgba(255,255,255,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.3);
animation: mpWaitingPulse 2.4s ease-in-out infinite;
}
@keyframes mpWaitingPulse {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.3), 0 0 0 rgba(139,92,246,0); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.3), 0 0 28px rgba(139,92,246,0.25); }
}
.mp-btn-secondary {
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: clamp(12px, 3vw, 14px);
letter-spacing: 2px;
text-transform: uppercase;
padding: 13px 20px;
border: 1.5px solid rgba(200,210,255,0.18);
border-radius: 12px;
background: rgba(14,12,26,0.55);
color: rgba(200,210,255,0.75);
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
min-height: 44px;
width: 100%;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.mp-btn-secondary:hover {
color: #ffffff;
border-color: rgba(200,210,255,0.35);
background: rgba(30,24,50,0.7);
}
.mp-btn-secondary:active {
transform: scale(0.97);
}
.mp-error {
color: #f87171;
font-size: 14px;
margin-top: 12px;
min-height: 20px;
line-height: 1.4;
}
/* Mode options in create room */
.mp-mode-options {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 20px;
flex-wrap: wrap;
}
.mp-mode-option {
font-family: 'Chakra Petch', sans-serif;
font-weight: 700;
font-size: clamp(12px, 2.8vw, 14px);
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 11px 14px;
border: 1.5px solid rgba(200,210,255,0.15);
border-radius: 11px;
background: rgba(14,12,26,0.55);
color: rgba(200,210,255,0.65);
cursor: pointer;
transition: all 0.2s ease;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
min-width: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.mp-mode-option:hover {
color: #e8ecff;
transform: translateY(-1px);
}
.mp-mode-option:active {
transform: scale(0.95);
}
.mp-mode-option[data-mode="fun"].selected {
border-color: rgba(var(--accent-fun-rgb), 0.75);
background: radial-gradient(ellipse at top, rgba(var(--accent-fun-rgb),0.22), transparent 70%), rgba(25,20,6,0.7);
color: var(--accent-fun);
box-shadow: 0 0 18px rgba(var(--accent-fun-rgb), 0.25), inset 0 1px 0 rgba(var(--accent-fun-rgb), 0.2);
text-shadow: 0 0 10px rgba(var(--accent-fun-rgb), 0.6);
}
.mp-mode-option[data-mode="gory"].selected {
border-color: rgba(var(--accent-gory-rgb), 0.75);
background: radial-gradient(ellipse at top, rgba(var(--accent-gory-rgb),0.22), transparent 70%), rgba(30,8,8,0.7);
color: #ff6b6b;
box-shadow: 0 0 18px rgba(var(--accent-gory-rgb), 0.25), inset 0 1px 0 rgba(var(--accent-gory-rgb), 0.2);
text-shadow: 0 0 10px rgba(var(--accent-gory-rgb), 0.6);
}
.mp-mode-option[data-mode="horror"].selected {
border-color: rgba(var(--accent-horror-rgb), 0.75);
background: radial-gradient(ellipse at top, rgba(var(--accent-horror-rgb),0.22), transparent 70%), rgba(18,10,32,0.7);
color: #d9a8ff;
box-shadow: 0 0 18px rgba(var(--accent-horror-rgb), 0.25), inset 0 1px 0 rgba(var(--accent-horror-rgb), 0.2);
text-shadow: 0 0 10px rgba(var(--accent-horror-rgb), 0.6);
}
.mp-mode-option[data-mode="war"].selected {
border-color: rgba(var(--accent-war-rgb), 0.85);
background: radial-gradient(ellipse at top, rgba(var(--accent-war-rgb),0.3), transparent 70%), rgba(22,20,8,0.75);
color: #9bd987;
box-shadow: 0 0 18px rgba(255,100,0, 0.2), inset 0 1px 0 rgba(var(--accent-war-rgb), 0.22);
text-shadow: 0 0 10px rgba(var(--accent-war-rgb), 0.7);
}
/* Room code input */
.mp-code-input {
font-family: 'Russo One', sans-serif;
font-size: clamp(28px, 7vw, 38px);
letter-spacing: 12px;
text-indent: 12px;
text-align: center;
text-transform: uppercase;
width: min(280px, 78vw);
padding: 16px 14px;
border: 2px solid rgba(139,92,246,0.4);
border-radius: 14px;
background:
radial-gradient(ellipse at center, rgba(139,92,246,0.12), transparent 70%),
linear-gradient(180deg, rgba(14,10,28,0.9), rgba(20,16,40,0.9));
color: #f5f3ff;
outline: none;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
transition: border-color 0.22s ease, box-shadow 0.25s ease;
min-height: 60px;
text-shadow: 0 0 14px rgba(139,92,246,0.65);
box-shadow:
inset 0 0 18px rgba(99,102,241,0.1),
inset 0 1px 0 rgba(255,255,255,0.06),
0 6px 18px rgba(0,0,0,0.4);
}
.mp-code-input:focus {
border-color: #a78bfa;
box-shadow:
inset 0 0 22px rgba(139,92,246,0.22),
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 28px rgba(139,92,246,0.4),
0 6px 18px rgba(0,0,0,0.4);
}
.mp-code-input::placeholder {
color: rgba(139, 146, 176, 0.3);
letter-spacing: 12px;
}
/* Lobby Room Code — prominent digital readout */
.mp-room-code {
font-family: 'Chakra Petch', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(200,210,255,0.55);
margin: 4px 0 22px;
line-height: 1;
position: relative;
z-index: 1;
transition: transform 0.18s ease;
}
.mp-room-code:hover { transform: translateY(-1px); }
.mp-room-code::after {
content: 'TAP TO COPY';
display: block;
font-size: 9px;
font-weight: 700;
letter-spacing: 2.5px;
color: rgba(200,210,255,0.32);
margin-top: 8px;
transition: color 0.2s ease;
}
.mp-room-code:hover::after { color: rgba(200,210,255,0.55); }
.mp-room-code.mp-code-copied::after {
content: '✓ COPIED';
color: #4ade80;
text-shadow: 0 0 10px rgba(74,222,128,0.5);
}
.mp-room-code span {
display: block;
margin-top: 8px;
font-family: 'Russo One', sans-serif;
font-size: clamp(32px, 8.5vw, 46px);
font-weight: 400;
letter-spacing: 10px;
text-indent: 10px; /* visually balance the trailing spacing */
color: #f5f3ff;
background:
radial-gradient(ellipse at center, rgba(139,92,246,0.22), transparent 70%),
linear-gradient(180deg, rgba(14,10,28,0.9), rgba(20,16,40,0.9));
padding: 16px 18px 14px;
border-radius: 14px;
border: 1.5px solid rgba(139,92,246,0.4);
box-shadow:
inset 0 0 20px rgba(99,102,241,0.15),
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 24px rgba(139,92,246,0.18),
0 6px 18px rgba(0,0,0,0.4);
text-shadow:
0 0 14px rgba(139,92,246,0.8),
0 0 30px rgba(139,92,246,0.35);
animation: mpCodeGlow 3.2s ease-in-out infinite;
}
@keyframes mpCodeGlow {
0%, 100% {
box-shadow:
inset 0 0 20px rgba(99,102,241,0.12),
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 24px rgba(139,92,246,0.18),
0 6px 18px rgba(0,0,0,0.4);
}
50% {
box-shadow:
inset 0 0 28px rgba(99,102,241,0.22),
inset 0 1px 0 rgba(255,255,255,0.1),
0 0 36px rgba(139,92,246,0.32),
0 6px 18px rgba(0,0,0,0.4);
}
}
.lobby-players {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.lobby-player-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 12px 14px;
background:
linear-gradient(100deg, rgba(30,24,54,0.6) 0%, rgba(16,12,30,0.75) 100%);
border-radius: 12px;
border: 1px solid rgba(139,92,246,0.22);
min-height: 48px;
position: relative;
overflow: hidden;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Left accent bar on player row */
.lobby-player-row::before {
content: '';
position: absolute;
top: 8px; bottom: 8px;
left: 0;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #6366f1, #8b5cf6);
opacity: 0.6;
}
.lobby-player-row:has(.lobby-player-name.me)::before {
background: linear-gradient(180deg, #fbbf24, #f59e0b);
opacity: 1;
}
.lobby-player-row:has(.lobby-host-badge)::before {
background: linear-gradient(180deg, #fbbf24, #f97316);
opacity: 1;
}
.lobby-player-name {
color: #e8ecff;
font-weight: 700;
font-family: 'Chakra Petch', sans-serif;
font-size: clamp(14px, 3.6vw, 16px);
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.lobby-player-name.me {
color: #fde68a;
text-shadow: 0 0 12px rgba(251,191,36,0.3);
}
.lobby-host-badge {
font-family: 'Chakra Petch', sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.8px;
color: #fde68a;
background: rgba(251, 191, 36, 0.14);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(251,191,36,0.4);
white-space: nowrap;
text-transform: uppercase;
box-shadow: 0 0 14px rgba(251,191,36,0.18);
text-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.lobby-player-emblem {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(139,92,246,0.12);
border: 1px solid rgba(139,92,246,0.3);
}
.lobby-player-stats {
font-family: 'Chakra Petch', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
color: rgba(200,210,255,0.5);
margin-left: auto;
padding-left: 8px;
white-space: nowrap;
text-transform: uppercase;
}
/* Lobby Chat — retro terminal feel */
.lobby-chat {
background:
linear-gradient(180deg, rgba(10,8,22,0.7), rgba(6,4,16,0.75));
border: 1px solid rgba(139,92,246,0.22);
border-radius: 14px;
margin-bottom: 18px;
overflow: hidden;
position: relative;
z-index: 1;
box-shadow: inset 0 1px 0 rgba(139,92,246,0.12);
}
.lobby-chat::before {
content: 'CHAT';
position: absolute;
top: 6px; left: 12px;
font-family: 'Chakra Petch', sans-serif;
font-size: 9px;
font-weight: 800;
letter-spacing: 2.5px;
color: rgba(139,92,246,0.55);
z-index: 2;
pointer-events: none;
}
.lobby-chat-messages {
max-height: 160px;
overflow-y: auto;
padding: 22px 14px 10px;
display: flex;
flex-direction: column;
gap: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(139,92,246,0.4) transparent;
}
.lobby-chat-messages::-webkit-scrollbar { width: 6px; }
.lobby-chat-messages::-webkit-scrollbar-thumb {
background: rgba(139,92,246,0.35);
border-radius: 3px;
}
.chat-msg {
font-size: clamp(13px, 3vw, 15px);
color: var(--text-secondary);
text-align: left;
line-height: 1.45;
word-break: break-word;
}
.chat-msg-name {
color: #c7d2fe;
font-weight: 700;
margin-right: 6px;
}
.lobby-chat-input-row {
display: flex;
border-top: 1px solid var(--border-ghost);
}
.lobby-chat-input {
flex: 1;
padding: 12px 14px;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 15px;
outline: none;
min-height: 44px;
}
.lobby-chat-input::placeholder {
color: rgba(139, 146, 176, 0.5);
}
.lobby-chat-send {
padding: 12px 16px;
background: transparent;
border: none;
border-left: 1px solid var(--border-ghost);
color: #818cf8;
font-weight: 700;
font-size: 14px;
cursor: pointer;
min-height: 44px;
min-width: 60px;
transition: color 0.15s;
}
.lobby-chat-send:hover {
color: #c7d2fe;
}
.lobby-chat-send:active {
transform: scale(0.95);
}
/* MP Betting */
.mp-betting-timer {
color: #fbbf24;
font-size: clamp(18px, 4.5vw, 22px);
font-weight: 700;
}
.mp-betting-status {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 20px;
}
.mp-betting-player {
display: flex;
align-items: center;
gap: 6px;
font-size: clamp(12px, 3vw, 14px);
color: var(--text-secondary);
background: var(--surface-2);
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--border-ghost);
}
.mp-bet-check {
color: #4ade80;
font-weight: 700;
}
/* MP Results */
.mp-bets-header {
font-family: 'Chakra Petch', sans-serif;
color: var(--text-secondary);
font-size: clamp(14px, 3.5vw, 16px);
margin: 20px 0 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.mp-player-bets {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.mp-bet-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--surface-2);
border-radius: 10px;
border: 1px solid var(--border-ghost);
font-size: clamp(13px, 3vw, 15px);
min-height: 44px;
}
.mp-bet-row.won {
border-color: rgba(34, 197, 94, 0.35);
background: rgba(34, 197, 94, 0.08);
}
.mp-bet-name {
color: var(--text-primary);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.mp-bet-duck {
flex: 1;
text-align: center;
font-weight: 500;
}
.mp-bet-result {
font-weight: 700;
color: #f87171;
font-size: clamp(12px, 3vw, 14px);
}
.mp-bet-row.won .mp-bet-result {
color: #4ade80;
}
.mp-results-buttons {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Reaction Bar */
.reaction-bar {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
padding: 10px 16px;
background: rgba(10, 10, 20, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 40px;
z-index: 100;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.reaction-bar.hidden {
display: none;
}
.reaction-btn {
width: 44px;
height: 44px;
font-size: 24px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
cursor: pointer;
transition: transform 0.15s, background 0.15s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.reaction-btn:hover {
background: rgba(255, 255, 255, 0.14);
transform: scale(1.12);
}
.reaction-btn:active {
transform: scale(0.92);
background: rgba(255, 255, 255, 0.18);
}
.reaction-btn.cooldown {
opacity: 0.35;
pointer-events: none;
}
/* Floating reaction bubbles */
.reaction-bubble {
position: fixed;
font-size: 36px;
pointer-events: none;
z-index: 99;
animation: reactionFloat 2s ease-out forwards;
}
.reaction-bubble-name {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
@keyframes reactionFloat {
0% { opacity: 1; transform: translateY(0) scale(1); }
50% { opacity: 1; }
100% { opacity: 0; transform: translateY(-130px) scale(1.4); }
}
/* Post-game player list */
.mp-results-players {
display: flex;
flex-direction: column;
gap: 8px;
margin: 16px 0;
}
.mp-results-player-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--surface-2);
border-radius: 10px;
border: 1px solid var(--border-ghost);
font-size: clamp(13px, 3vw, 15px);
color: var(--text-primary);
min-height: 44px;
}
.mp-kick-btn {
font-family: 'Chakra Petch', sans-serif;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
background: rgba(239, 68, 68, 0.1);
color: #f87171;
cursor: pointer;
margin-left: 8px;
min-height: 32px;
transition: background 0.15s;
}
.mp-kick-btn:hover {
background: rgba(239, 68, 68, 0.2);
}
.mp-kick-btn:active {
transform: scale(0.95);
}
.mp-btn-ready {
background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}
.mp-btn-ready:hover:not(:disabled) {
box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4) !important;
}
/* Duck bet exclusivity */
.bet-card.taken {
opacity: 0.3;
pointer-events: none;
position: relative;
filter: grayscale(0.4);
}
.bet-card-taken-label {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #c7d2fe;
background: rgba(0, 0, 0, 0.7);
padding: 3px 0;
border-radius: 0 0 8px 8px;
}
/* ── Multiplayer mobile responsive ── */
@media (max-width: 480px) {
.mp-panel {
padding: 24px 16px;
}
.mp-menu-buttons {
gap: 10px;
}
.mp-mode-options {
gap: 6px;
}
.lobby-player-name {
max-width: 140px;
}
.mp-bet-name {
max-width: 80px;
}
.lobby-chat-messages {
max-height: 120px;
}
.reaction-bar {
gap: 4px;
padding: 8px 12px;
}
.reaction-btn {
width: 40px;
height: 40px;
font-size: 20px;
}
}
@media (max-width: 360px) {
.mp-panel {
padding: 20px 12px;
}
.mp-mode-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.reaction-bar {
gap: 3px;
padding: 6px 10px;
}
.reaction-btn {
width: 36px;
height: 36px;
font-size: 18px;
}
}
/* Tall content on short screens */
@media (max-height: 600px) {
.mp-panel {
padding: 16px 14px;
}
.mp-title {
font-size: 20px;
margin-bottom: 4px;
}
.mp-subtitle {
margin-bottom: 16px;
}
.lobby-chat-messages {
max-height: 100px;
}
}
@media (prefers-reduced-motion: reduce) {
.reaction-bubble {
animation: none;
opacity: 0;
}
.mp-btn-primary,
.mp-btn-secondary,
.mp-mode-option,
.mp-kick-btn,
.reaction-btn {
transition: none;
}
}
/* =====================================================================
* CANDY-POP THEME OVERRIDES — match landing page (Y2K candy aesthetic)
*
* Scoped to the three player-facing screens on /play:
* #start-screen — "meet the racers"
* #betting-screen — "place your bet"
* #results-screen — in-game finish screen
*
* The in-race game UI (mute button, score overlays, multiplayer screens)
* is intentionally left alone — only the lobby-style overlays change.
* ===================================================================== */
#start-screen,
#betting-screen,
#results-screen {
--candy-ink: #170729;
--candy-ink-2: #20103a;
--candy-surface: #251448;
--candy-fg: #fff5ed;
--candy-fg-muted: rgba(255,245,237,0.72);
--candy-fg-soft: rgba(255,245,237,0.42);
--candy-line: rgba(255,255,255,0.10);
--candy-line-2: rgba(255,255,255,0.18);
--grad-brand: linear-gradient(120deg, #ff3d8b 0%, #ff8a3d 100%);
--grad-fun: linear-gradient(120deg, #c4ff3d 0%, #3dffd1 100%);
--grad-gory: linear-gradient(120deg, #ff2e5d 0%, #ff3df0 100%);
--grad-horror: linear-gradient(120deg, #9d3dff 0%, #3d6dff 100%);
--grad-war: linear-gradient(120deg, #ffb83d 0%, #ff4a2e 100%);
--grad-tourn: linear-gradient(120deg, #ffd23d 0%, #ff6ec7 50%, #9d3dff 100%);
background:
radial-gradient(700px 500px at 15% 0%, rgba(255,61,139,0.22), transparent 60%),
radial-gradient(800px 600px at 85% 100%, rgba(61,255,209,0.15), transparent 60%),
radial-gradient(600px 500px at 50% 50%, rgba(157,61,255,0.12), transparent 60%),
var(--candy-ink) !important;
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
color: var(--candy-fg) !important;
}
/* Subtle stardust + grain over the whole screen */
#start-screen::before,
#betting-screen::before,
#results-screen::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(rgba(255,255,255,0.30) 1px, transparent 1px),
radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
background-size: 90px 90px, 140px 140px;
background-position: 0 0, 30px 50px;
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
#start-screen > *,
#betting-screen > *,
#results-screen > * {
position: relative;
z-index: 1;
}
/* ── Headlines ─────────────────────────────────────────────── */
#start-screen .title-block h1,
#start-screen .title-block h1,
#results-screen .winner-title,
#betting-screen .betting-title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.04em !important;
text-shadow: none !important;
animation: none !important;
}
#start-screen .title-block h1 {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
font-size: clamp(56px, 11vw, 112px) !important;
line-height: 0.9 !important;
}
#start-screen .subtitle {
font-family: 'Space Mono', monospace !important;
color: var(--candy-fg-muted) !important;
text-shadow: none !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
margin-bottom: 24px !important;
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255,245,237,0.08);
border: 1.5px solid rgba(255,255,255,0.12);
}
#betting-screen .betting-title {
font-size: clamp(40px, 8vw, 76px) !important;
background: var(--grad-tourn);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
margin-bottom: 18px;
}
/* ── Duck / bet cards — candy reskin ─────────────────────── */
#start-screen .duck-card,
#betting-screen .bet-card,
#betting-screen .duck-card {
background: rgba(37,20,72,0.65) !important;
border: 2px solid rgba(255,255,255,0.10) !important;
border-radius: 22px !important;
backdrop-filter: blur(20px);
box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
position: relative;
overflow: hidden;
}
#start-screen .duck-card::before,
#betting-screen .bet-card::before,
#betting-screen .duck-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--grad-brand);
opacity: 0.9;
}
#start-screen .duck-card:nth-child(5n+1)::before,
#betting-screen .bet-card:nth-child(5n+1)::before { background: var(--grad-fun); }
#start-screen .duck-card:nth-child(5n+2)::before,
#betting-screen .bet-card:nth-child(5n+2)::before { background: var(--grad-gory); }
#start-screen .duck-card:nth-child(5n+3)::before,
#betting-screen .bet-card:nth-child(5n+3)::before { background: var(--grad-horror); }
#start-screen .duck-card:nth-child(5n+4)::before,
#betting-screen .bet-card:nth-child(5n+4)::before { background: var(--grad-tourn); }
#start-screen .duck-card:nth-child(5n+5)::before,
#betting-screen .bet-card:nth-child(5n+5)::before { background: var(--grad-war); }
#start-screen .duck-card:hover,
#betting-screen .bet-card:hover,
#betting-screen .duck-card:hover {
transform: translateY(-6px) rotate(-0.6deg) scale(1.02) !important;
border-color: rgba(255,255,255,0.22) !important;
box-shadow: 0 16px 50px rgba(0,0,0,0.4), 0 0 32px rgba(255,61,139,0.18) !important;
}
#start-screen .duck-card .duck-name,
#betting-screen .bet-card .duck-name {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
text-shadow: none !important;
color: var(--candy-fg) !important;
}
#start-screen .duck-flavor,
#betting-screen .duck-flavor {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-style: normal !important;
color: var(--candy-fg-muted) !important;
font-size: 12px !important;
}
/* Selected bet card — gold glow */
#betting-screen .bet-card.selected,
#betting-screen .bet-card[aria-checked="true"] {
border-color: #ffd23d !important;
box-shadow: 0 0 0 2px rgba(255,210,61,0.6), 0 12px 40px rgba(255,210,61,0.3) !important;
}
#betting-screen .bet-card.selected::after,
#betting-screen .bet-card[aria-checked="true"]::after {
content: "✓";
position: absolute; top: 10px; right: 10px;
width: 26px; height: 26px;
border-radius: 999px;
background: linear-gradient(120deg,#ffd23d,#ff6ec7);
color: #170729;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
box-shadow: 0 4px 12px rgba(255,110,199,0.45);
}
/* ── Buttons — sticker pill candy ─────────────────────────── */
#start-screen #start-btn,
#start-screen #back-btn,
#start-screen #customize-btn,
#betting-screen #lock-bet-btn,
#results-screen #share-btn,
#results-screen #change-mode-btn,
#results-screen #race-again-btn {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-weight: 800 !important;
font-size: 14px !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
padding: 14px 26px !important;
border-radius: 999px !important;
border: none !important;
cursor: pointer;
transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .25s ease;
min-height: 48px;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.95),
0 4px 0 rgba(0,0,0,0.25),
0 8px 18px -6px rgba(0,0,0,0.45);
}
/* Primary CTA — hot pink → tangerine */
#start-screen #start-btn,
#betting-screen #lock-bet-btn,
#results-screen #race-again-btn {
background: var(--grad-brand) !important;
color: var(--candy-fg) !important;
}
#start-screen #start-btn:hover,
#betting-screen #lock-bet-btn:not(:disabled):hover,
#results-screen #race-again-btn:hover {
transform: translateY(-3px) scale(1.04);
filter: brightness(1.08);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.95),
0 6px 0 rgba(0,0,0,0.25),
0 14px 32px -6px rgba(255,61,139,0.55);
}
/* Secondary — white sticker */
#start-screen #back-btn,
#start-screen #customize-btn,
#results-screen #share-btn,
#results-screen #change-mode-btn {
background: #fff5ed !important;
color: #170729 !important;
}
#start-screen #back-btn:hover,
#start-screen #customize-btn:hover,
#results-screen #share-btn:hover,
#results-screen #change-mode-btn:hover {
transform: translateY(-3px) scale(1.04);
filter: brightness(0.96);
}
/* Disabled lock-in */
#betting-screen #lock-bet-btn:disabled {
background: rgba(255,245,237,0.10) !important;
color: var(--candy-fg-soft) !important;
cursor: not-allowed;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.12) !important;
}
/* ── Results screen ──────────────────────────────────────── */
#results-screen .winner-title {
font-size: clamp(46px, 9vw, 92px) !important;
background: var(--grad-tourn);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
letter-spacing: -0.04em !important;
}
#results-screen .winner-sub {
font-family: 'Space Mono', monospace !important;
color: var(--candy-fg-muted) !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
margin: 4px 0 18px;
}
#results-screen .results-trophy {
filter: drop-shadow(0 8px 24px rgba(255,210,61,0.45));
}
#results-screen .standings {
background: rgba(37,20,72,0.55) !important;
border: 1.5px solid rgba(255,255,255,0.12) !important;
border-radius: 22px !important;
padding: 8px !important;
backdrop-filter: blur(16px);
max-width: 520px;
width: 100%;
margin: 0 auto 20px;
}
#results-screen .standings li {
border-radius: 14px !important;
background: transparent !important;
border: 1px solid transparent !important;
padding: 10px 14px !important;
margin: 2px 0 !important;
transition: background .25s ease;
}
#results-screen .standings li:hover {
background: rgba(255,255,255,0.05) !important;
}
#results-screen .standings .pos {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-weight: 800 !important;
font-size: 18px !important;
opacity: 1 !important;
min-width: 32px;
}
#results-screen .standings li:nth-child(1) .pos {
background: var(--grad-tourn);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
}
#results-screen .standings li:nth-child(2) .pos {
background: linear-gradient(120deg, #e0e0ff 0%, #b8c4ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
}
#results-screen .standings li:nth-child(3) .pos {
background: var(--grad-war);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
}
/* Bet outcome badge */
#results-screen .bet-outcome,
#betting-screen #betting-streak-info,
#betting-screen #don-banner {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-weight: 700 !important;
border-radius: 999px !important;
padding: 8px 18px !important;
background: rgba(255,210,61,0.12) !important;
border: 1.5px solid rgba(255,210,61,0.5) !important;
color: #ffd23d !important;
display: inline-block;
}
/* Points badge */
#start-screen .points-badge {
font-family: 'Space Mono', monospace !important;
background: rgba(255,210,61,0.10) !important;
border: 1.5px solid rgba(255,210,61,0.4) !important;
color: #ffd23d !important;
border-radius: 999px !important;
padding: 6px 14px !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.05em;
}
/* Make the buttons row breathe */
#start-screen .start-buttons,
#results-screen .results-buttons {
gap: 12px;
margin-top: 12px;
}
/* =======================================================================
ARCADE — hub, game HUD, payout modal
======================================================================= */
.arcade-overlay {
background:
radial-gradient(ellipse at 18% 30%, rgba(61,255,209,0.08) 0%, transparent 55%),
radial-gradient(ellipse at 82% 75%, rgba(157,61,255,0.10) 0%, transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(255,61,139,0.06) 0%, transparent 55%),
var(--surface-base, #0A0A14);
}
.arcade-hub-inner {
width: min(960px, 92vw);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
padding: 28px 0 40px;
}
.arcade-hub-eyebrow {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
text-align: center;
}
.arcade-hub-title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 800;
font-size: clamp(28px, 5vw, 52px);
line-height: 1.0;
margin: 4px 0 0;
text-align: center;
background-image: linear-gradient(120deg, #3dffd1 0%, #9d3dff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.arcade-hub-sub {
text-align: center;
color: rgba(255,255,255,0.62);
font-size: 14.5px;
max-width: 540px;
margin: 0 auto 18px;
line-height: 1.5;
}
.arcade-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.arcade-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 22px 22px 18px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
text-align: left;
cursor: pointer;
color: #fff;
font-family: inherit;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
overflow: hidden;
}
.arcade-card:hover, .arcade-card:focus-visible {
transform: translateY(-3px);
border-color: rgba(255,255,255,0.22);
background: rgba(255,255,255,0.07);
outline: none;
}
.arcade-card-glow {
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: var(--arcade-hot, #ff3d8b);
filter: blur(50px);
opacity: 0.35;
pointer-events: none;
}
.arcade-card-title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 800;
font-size: 26px;
line-height: 1;
letter-spacing: -0.01em;
}
.arcade-card-blurb {
font-size: 13.5px;
color: rgba(255,255,255,0.65);
line-height: 1.45;
flex: 1;
}
.arcade-card-meta {
display: flex;
justify-content: space-between;
font-family: 'Space Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.5);
margin-top: 6px;
}
.arcade-card-meta b { color: #fff; }
.arcade-card-cta {
margin-top: 10px;
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--arcade-hot, #ff3d8b);
}
.arcade-card-cta span { transition: transform 0.18s ease; display: inline-block; }
.arcade-card:hover .arcade-card-cta span { transform: translateX(4px); }
.arcade-back-btn {
align-self: center;
margin-top: 8px;
background: transparent;
color: rgba(255,255,255,0.65);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
padding: 10px 22px;
font-family: 'Space Mono', monospace;
font-size: 12.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.arcade-back-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
/* In-game HUD: thin top bar, leaves the canvas free for gameplay */
.arcade-hud {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 12;
pointer-events: none;
padding: 12px 16px;
padding-top: calc(var(--safe-top, 0px) + 12px);
}
.arcade-hud.hidden { display: none; }
.arcade-hud-row {
display: flex;
align-items: center;
gap: 12px;
max-width: 720px;
margin: 0 auto;
background: rgba(10,10,20,0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 8px 12px;
pointer-events: auto;
}
.arcade-hud-btn {
background: rgba(255,255,255,0.08);
color: #fff;
border: none;
border-radius: 10px;
width: 34px; height: 34px;
font-size: 18px;
cursor: pointer;
}
.arcade-hud-btn:hover { background: rgba(255,255,255,0.16); }
.arcade-hud-title {
flex: 1;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 700;
font-size: 15px;
color: #fff;
letter-spacing: -0.01em;
}
.arcade-hud-score {
display: flex;
align-items: baseline;
gap: 8px;
font-family: 'Space Mono', monospace;
}
.arcade-hud-score-label {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.arcade-hud-score [data-arcade-score] {
font-size: 18px;
font-weight: 700;
color: #3dffd1;
}
/* Payout modal */
.arcade-payout-card {
width: min(440px, 92vw);
background: rgba(20,18,38,0.92);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
padding: 28px 28px 22px;
text-align: center;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.arcade-payout-game {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.arcade-payout-score {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 800;
font-size: 80px;
line-height: 1;
margin: 6px 0 4px;
background-image: linear-gradient(120deg, #3dffd1 0%, #9d3dff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.arcade-payout-label {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
margin-bottom: 18px;
}
.arcade-payout-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: rgba(255,255,255,0.05);
border-radius: 12px;
font-size: 14px;
color: rgba(255,255,255,0.8);
}
.arcade-payout-row strong {
font-family: 'Space Mono', monospace;
color: #3dffd1;
font-size: 16px;
}
.arcade-payout-cap {
margin-top: 12px;
font-size: 12px;
color: rgba(255,184,61,0.95);
line-height: 1.45;
}
.arcade-payout-actions {
display: flex;
gap: 12px;
margin-top: 20px;
}
.arcade-again-btn {
background-image: linear-gradient(120deg, #ff3d8b, #ff8a3d);
color: #0A0A14;
border: none;
border-radius: 999px;
padding: 11px 26px;
font-family: inherit;
font-weight: 800;
font-size: 13.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.15s;
}
.arcade-again-btn:hover { transform: scale(1.04); }
/* While an arcade game is active, suppress page scroll/zoom on mobile so
tap+drag interactions (Duck Drop drag-to-aim, Slots reel taps, Flappy
flaps) don't get hijacked by the browser's default touch gestures.
Canvas itself keeps pointer-events: none — pointer events fall through
to document-level listeners which arcade.js wires up. */
body.arcade-active {
touch-action: none;
overflow: hidden;
overscroll-behavior: none;
}
/* =======================================================================
MUSIC BUTTON — floating control on /play, inline pill on landing
======================================================================= */
/* In-game floating button — sits to the LEFT of the existing #mute-btn.
Same visual language so the pair reads as one set. */
#music-btn {
position: fixed;
top: calc(12px + var(--safe-top));
right: calc(64px + var(--safe-right)); /* 44px button + 8px gap + 12px edge of mute */
z-index: 20;
background: rgba(10,10,20,0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(255,255,255,0.85);
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
#music-btn:hover {
background: rgba(10,10,20,0.8);
color: white;
box-shadow: 0 0 16px rgba(255,255,255,0.06);
}
/* Landing-page inline pill — sits in the nav next to Profile / Sign-in. */
.music-btn-inline {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: transparent;
color: rgb(245,245,250);
border: 0;
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.music-btn-inline:hover {
background: rgba(255,255,255,0.06);
}
/* Icon swap — only one shows at a time, driven by [data-state]. */
[data-music-toggle] .music-icon { display: none; }
[data-music-toggle][data-state="on"] .music-icon-on { display: block; }
[data-music-toggle][data-state="off"] .music-icon-off { display: block; }
/* Default (no data-state set yet) — show "on" icon optimistically. */
[data-music-toggle]:not([data-state]) .music-icon-on { display: block; }
/* Dim the button when off */
[data-music-toggle][data-state="off"] { color: rgba(255,255,255,0.45); }
/* "Tap anywhere to enable" hint — the small pulsing dot on the corner of
the music button until the first user gesture unlocks playback. */
[data-music-toggle] .music-hint-dot {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(120deg, #3dffd1, #ff3d8b);
box-shadow: 0 0 0 2px rgba(10,10,20,0.85), 0 0 10px rgba(255,61,139,0.7);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
[data-music-toggle][data-music-hint] .music-hint-dot {
opacity: 1;
animation: music-hint-pulse 1.6s ease-in-out infinite;
}
@keyframes music-hint-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.7; }
}
/* On the in-game floating button, position the dot on the outer corner
(the icon is bigger and centred). */
#music-btn .music-hint-dot {
top: -2px;
right: -2px;
width: 10px;
height: 10px;
}
/* =======================================================================
TOAST — single shared notification queue
======================================================================= */
.toast-stack {
position: fixed;
top: calc(var(--safe-top, 0px) + 16px);
right: 16px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: min(380px, calc(100vw - 32px));
}
.toast-item {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(20,12,38,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #fff5ed;
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-size: 13.5px;
line-height: 1.4;
letter-spacing: -0.005em;
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55);
transform: translateX(120%);
opacity: 0;
transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s;
position: relative;
}
.toast-item.toast-in { transform: translateX(0); opacity: 1; }
.toast-item.toast-out { transform: translateX(120%); opacity: 0; }
.toast-icon {
flex-shrink: 0;
font-size: 20px;
line-height: 1;
}
.toast-body { flex: 1; min-width: 0; }
.toast-action {
flex-shrink: 0;
background: rgba(255,255,255,0.08);
border: 0;
color: #fff5ed;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 999px;
cursor: pointer;
transition: background .15s;
}
.toast-action:hover { background: rgba(255,255,255,0.16); }
.toast-close {
flex-shrink: 0;
background: transparent;
border: 0;
color: rgba(255,245,237,0.5);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 2px 4px;
margin-left: -4px;
}
.toast-close:hover { color: #fff5ed; }
.toast-success { border-color: rgba(196,255,61,0.45); }
.toast-success .toast-icon { color: #c4ff3d; }
.toast-info { border-color: rgba(61,142,255,0.4); }
.toast-info .toast-icon { color: #3d8eff; }
.toast-warn { border-color: rgba(255,184,61,0.5); }
.toast-warn .toast-icon { color: #ffb83d; }
.toast-error { border-color: rgba(255,74,46,0.55); }
.toast-error .toast-icon { color: #ff4a2e; }
@media (max-width: 480px) {
.toast-stack {
top: auto;
bottom: calc(var(--safe-bottom, 0px) + 16px);
right: 12px;
left: 12px;
max-width: none;
}
.toast-item.toast-out { transform: translateY(120%); }
.toast-item { transform: translateY(120%); }
.toast-item.toast-in { transform: translateY(0); }
}
/* =======================================================================
SKELETON LOADERS — used while leaderboard / profile data loads
======================================================================= */
.skel {
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.06);
border-radius: 8px;
display: inline-block;
}
.skel::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 55%, transparent 100%);
transform: translateX(-100%);
animation: skelShimmer 1.4s ease-in-out infinite;
}
@keyframes skelShimmer { to { transform: translateX(100%); } }
.skel-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border-radius: 12px;
}
.skel-row + .skel-row { margin-top: 4px; }
.skel-rank { width: 22px; height: 14px; }
.skel-name { flex: 1; height: 14px; }
.skel-stat { width: 40px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
.skel::after { animation: none; }
.toast-item { transition: none; }
}
/* =======================================================================
EMPTY STATES
======================================================================= */
.empty-state {
text-align: center;
padding: 28px 16px;
color: rgba(255,245,237,0.55);
}
.empty-state .empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.05);
border: 1px dashed rgba(255,255,255,0.18);
margin-bottom: 14px;
}
.empty-state .empty-icon .material-symbols-outlined {
font-size: 26px; color: rgba(255,245,237,0.5);
}
.empty-state .empty-title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 700;
font-size: 16px;
color: #fff5ed;
margin-bottom: 4px;
}
.empty-state .empty-msg {
font-size: 13px;
max-width: 320px;
margin: 0 auto 12px;
line-height: 1.5;
}
.empty-state .empty-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
border-radius: 999px;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
background-image: linear-gradient(120deg, #ff3d8b, #ff8a3d);
color: #170729;
text-decoration: none;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.85), 0 2px 0 rgba(0,0,0,0.2);
}
.empty-state .empty-cta:hover { transform: scale(1.03); }
/* =======================================================================
STREAK RING — daily login streak (compact, animated, immersive)
=======================================================================
Layout: 7-segment day-tick ring + flame core + two-line meta + claim btn
Width budget: ~280-320px on desktop, full-width pill on phones. */
.streak-ring {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 5px 10px 5px 5px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background:
radial-gradient(ellipse 60% 60% at 0% 50%, rgba(255,184,61,0.08) 0%, transparent 60%),
rgba(0,0,0,0.32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
cursor: default;
/* Drop-in entrance — once per page load */
animation: streakDropIn 0.7s cubic-bezier(.34,1.56,.64,1) backwards;
}
@keyframes streakDropIn {
0% { transform: translateY(-6px) scale(0.96); opacity: 0; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.streak-ring:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.22);
}
.streak-ring-svg {
width: 38px;
height: 38px;
flex-shrink: 0;
filter: drop-shadow(0 2px 6px rgba(255,184,61,0.18));
}
/* ── Day ticks: 7 small radial dashes around the ring ─────────────────── */
.streak-tick {
transform-origin: 16px 16px;
transform-box: fill-box;
/* Each tick fades in with a stagger driven by inline --tick-i (0..6) */
animation: streakTickIn 0.42s cubic-bezier(.2,.7,.2,1) backwards;
animation-delay: calc(var(--tick-i, 0) * 60ms + 80ms);
}
@keyframes streakTickIn {
0% { opacity: 0; stroke-width: 1; }
60% { opacity: 1; }
100% { opacity: 1; stroke-width: 2.6; }
}
.streak-tick-lit {
/* Lit ticks pulse very subtly so the ring feels alive even when idle */
animation:
streakTickIn 0.42s cubic-bezier(.2,.7,.2,1) backwards,
streakTickGlow 3.2s ease-in-out infinite;
animation-delay:
calc(var(--tick-i, 0) * 60ms + 80ms),
calc(var(--tick-i, 0) * 120ms + 600ms);
filter: drop-shadow(0 0 2.5px rgba(255,184,61,0.55));
}
@keyframes streakTickGlow {
0%, 100% { opacity: 1; filter: drop-shadow(0 0 2.5px rgba(255,184,61,0.55)); }
50% { opacity: 0.78; filter: drop-shadow(0 0 5px rgba(255,184,61,0.95)); }
}
/* ── Flame core ───────────────────────────────────────────────────────── */
.streak-flame {
animation: streakFlameFlicker 1.6s ease-in-out infinite;
filter: drop-shadow(0 0 4px rgba(255,184,61,0.45));
}
@keyframes streakFlameFlicker {
0%, 100% { transform: translateY(0) scale(1) rotate(-0.5deg); }
35% { transform: translateY(-0.4px) scale(1.04) rotate(0.4deg); }
60% { transform: translateY(0.2px) scale(0.98) rotate(-0.2deg); }
}
/* Aura behind the ring when claimable — radial gradient + slow rotate */
.streak-aura {
transform-origin: 16px 16px;
animation: streakAuraSpin 8s linear infinite, streakAuraPulse 2.4s ease-in-out infinite;
}
@keyframes streakAuraSpin { to { transform: rotate(360deg); } }
@keyframes streakAuraPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.95; } }
/* ── Meta: two-line label + sub-text stacked tightly ──────────────────── */
.streak-ring-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
line-height: 1.1;
}
.streak-ring-label {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,245,237,0.6);
white-space: nowrap;
}
.streak-ring-label b {
color: #fff5ed;
font-weight: 700;
}
.streak-ring-sub {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,245,237,0.42);
white-space: nowrap;
}
/* ── Claimable state: warmer border + outer pulse + sub-text turns gold ─ */
.streak-ring[data-claimable="true"] {
border-color: rgba(255,210,61,0.55);
box-shadow: 0 0 0 1px rgba(255,210,61,0.35), 0 8px 28px -8px rgba(255,210,61,0.5);
animation:
streakDropIn 0.7s cubic-bezier(.34,1.56,.64,1) backwards,
streakPulse 2.6s ease-in-out infinite 0.7s;
}
.streak-ring[data-claimable="true"] .streak-ring-label b { color: #ffd23d; }
.streak-ring[data-claimable="true"] .streak-ring-sub { color: rgba(255,210,61,0.72); }
@keyframes streakPulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,210,61,0.35), 0 8px 28px -8px rgba(255,210,61,0.5); }
50% { box-shadow: 0 0 0 1px rgba(255,210,61,0.7), 0 14px 42px -8px rgba(255,210,61,0.85); }
}
/* When the streak is fresh (just claimed), bump the number scale once */
.streak-ring[data-claimable="false"][data-streak] svg text {
animation: streakNumPop 0.5s cubic-bezier(.34,1.56,.64,1) 0.6s backwards;
transform-origin: 16px 22px;
transform-box: fill-box;
}
@keyframes streakNumPop {
0% { transform: scale(0.6); opacity: 0; }
60% { transform: scale(1.18); opacity: 1; }
100% { transform: scale(1); opacity: 0.9; }
}
/* ── Claim button ─────────────────────────────────────────────────────── */
.streak-claim-btn {
margin-left: auto;
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px 6px 10px;
border-radius: 999px;
border: 0;
cursor: pointer;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #170729;
background-image: linear-gradient(120deg, #ffd23d 0%, #ff8a3d 100%);
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,0.85),
0 2px 0 rgba(0,0,0,0.2),
0 6px 18px -6px rgba(255,184,61,0.6);
transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s;
}
.streak-claim-btn:hover {
transform: scale(1.05) rotate(-0.5deg);
box-shadow:
inset 0 0 0 1.5px rgba(255,255,255,0.95),
0 3px 0 rgba(0,0,0,0.22),
0 10px 26px -6px rgba(255,184,61,0.85);
}
.streak-claim-btn:active { transform: scale(0.97); }
.streak-claim-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.streak-claim-btn .material-symbols-outlined { font-size: 14px; line-height: 1; }
/* Reduced motion: kill the flicker / spin / pulse, keep the layout */
@media (prefers-reduced-motion: reduce) {
.streak-ring,
.streak-tick,
.streak-tick-lit,
.streak-flame,
.streak-aura,
.streak-ring[data-claimable="true"],
.streak-ring svg text {
animation: none !important;
}
}
/* Mobile: full width, smaller paddings */
@media (max-width: 480px) {
.streak-ring { width: 100%; padding: 5px 10px 5px 5px; }
.streak-ring-meta { flex: 1; min-width: 0; }
.streak-ring-label, .streak-ring-sub { font-size: 9.5px; }
.streak-claim-btn { padding: 6px 10px 6px 8px; font-size: 10px; }
}
/* =======================================================================
PUBLIC PROFILE — /u/
======================================================================= */
.pu-bg {
background:
radial-gradient(ellipse at 18% 12%, rgba(255,61,139,0.12) 0%, transparent 60%),
radial-gradient(ellipse at 82% 30%, rgba(61,255,209,0.10) 0%, transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(157,61,255,0.10) 0%, transparent 55%),
#170729;
}
.pu-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(37,20,72,0.7);
border-radius: 22px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}
.pu-callingcard {
height: 140px;
border-radius: 18px 18px 0 0;
position: relative;
overflow: hidden;
}
.pu-callingcard::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(23,7,41,0) 50%, rgba(23,7,41,0.85) 100%);
}
.pu-emblem {
position: absolute;
bottom: -24px; left: 24px;
width: 64px; height: 64px;
border-radius: 16px;
background: rgba(20,12,38,0.9);
border: 2px solid rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.pu-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
margin-top: 18px;
}
.pu-stat {
padding: 14px 16px;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
}
.pu-stat-label {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,245,237,0.5);
margin-bottom: 4px;
}
.pu-stat-value {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 800;
font-size: 28px;
color: #fff5ed;
letter-spacing: -0.025em;
line-height: 1;
}
/* =======================================================================
MULTIPLAYER — candy-edition refresh
Scoped to #mp-* screens so the single-player betting / lobby flow is
untouched. Overrides the older "purple cabinet + Lilita One" look.
======================================================================= */
/* Panel: replace the bracket frame with the editorial card style used on
landing/signup/customize/admin. Top-bar accent in grad-brand. */
#mp-betting-screen .mp-panel,
#mp-results-screen .mp-panel,
#mp-lobby-screen .mp-panel,
#mp-menu-screen .mp-panel,
#mp-create-screen .mp-panel,
#mp-join-screen .mp-panel {
background: rgba(37,20,72,0.7);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 22px;
padding: 30px 28px 24px;
backdrop-filter: blur(14px) saturate(110%);
-webkit-backdrop-filter: blur(14px) saturate(110%);
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
overflow: hidden;
}
#mp-betting-screen .mp-panel::before,
#mp-results-screen .mp-panel::before,
#mp-lobby-screen .mp-panel::before,
#mp-menu-screen .mp-panel::before,
#mp-create-screen .mp-panel::before,
#mp-join-screen .mp-panel::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 5px;
background-image: linear-gradient(120deg, #ff3d8b 0%, #ff8a3d 100%);
filter: none;
opacity: 1;
transform: none;
width: auto;
}
/* Kill the old corner brackets */
#mp-betting-screen .mp-panel::after,
#mp-results-screen .mp-panel::after,
#mp-lobby-screen .mp-panel::after,
#mp-menu-screen .mp-panel::after,
#mp-create-screen .mp-panel::after,
#mp-join-screen .mp-panel::after {
content: none !important;
}
/* Titles — Bricolage Grotesque + grad-brand text */
#mp-betting-screen .betting-title,
#mp-betting-screen .mp-title,
#mp-results-screen .mp-title,
#mp-lobby-screen .mp-title,
#mp-menu-screen .mp-title,
#mp-create-screen .mp-title,
#mp-join-screen .mp-title {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-weight: 800;
font-size: clamp(28px, 5.4vw, 44px);
letter-spacing: -0.035em;
line-height: 1.0;
color: transparent;
background-image: linear-gradient(120deg, #ff3d8b 0%, #ff8a3d 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
text-transform: none;
letter-spacing: -0.025em;
margin: 4px 0 8px;
animation: none !important;
filter: none;
}
/* Eyebrow (LIVE · COOP) above multiplayer titles */
#mp-menu-screen .mp-title::before,
#mp-lobby-screen .mp-title::before,
#mp-betting-screen .betting-title::before,
#mp-results-screen .mp-title::before {
content: '— LIVE · COOP —';
display: block;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(255,245,237,0.6);
text-shadow: none;
text-transform: uppercase;
margin-bottom: 8px;
-webkit-text-fill-color: initial;
background-image: none;
background-clip: initial;
-webkit-background-clip: initial;
animation: none;
}
/* Subtitle (where present) */
#mp-betting-screen .mp-subtitle,
#mp-results-screen .mp-subtitle,
#mp-lobby-screen .mp-subtitle,
#mp-menu-screen .mp-subtitle {
font-family: 'Space Mono', ui-monospace, monospace;
color: rgba(255,245,237,0.6);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Betting timer — large mono digits with a soft pulse */
#mp-betting-screen .mp-betting-timer {
display: block;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: clamp(22px, 4vw, 30px);
font-weight: 700;
color: #ffd23d;
letter-spacing: -0.02em;
margin: 6px auto 18px;
text-shadow: 0 0 18px rgba(255,210,61,0.45);
animation: mpTimerPulse 1.2s ease-in-out infinite;
font-style: normal;
}
@keyframes mpTimerPulse {
0%, 100% { opacity: 0.92; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
/* Bet cards — surface tile, candy-gradient outline on selected */
#mp-betting-screen .bet-card {
background: rgba(37,20,72,0.55);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
padding: 14px 12px 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.55s cubic-bezier(.34,1.56,.64,1),
border-color 0.2s, box-shadow 0.2s, background 0.2s;
box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55);
position: relative;
overflow: hidden;
}
#mp-betting-screen .bet-card::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 60%);
pointer-events: none;
}
#mp-betting-screen .bet-card:hover {
transform: translateY(-5px) rotate(-0.5deg) scale(1.04);
background: rgba(37,20,72,0.78);
border-color: rgba(255,255,255,0.22);
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
}
#mp-betting-screen .bet-card.selected {
border-color: transparent;
background:
linear-gradient(rgba(37,20,72,0.85), rgba(37,20,72,0.85)) padding-box,
linear-gradient(120deg, #ff3d8b 0%, #ff8a3d 100%) border-box;
border: 1.5px solid transparent;
box-shadow:
0 0 0 1px rgba(255,61,139,0.35),
0 14px 36px -10px rgba(255,61,139,0.5);
transform: translateY(-6px) scale(1.06);
}
/* Duck name inside bet-card — Bricolage Grotesque, keep duck color splash */
#mp-betting-screen .bet-card .duck-name {
font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
font-weight: 700;
font-size: 13.5px;
letter-spacing: -0.01em;
text-shadow: none;
margin-top: 6px;
line-height: 1.15;
}
/* Player chips at bottom — clean monospace pills */
#mp-betting-screen .mp-betting-status {
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
background: none;
border-radius: 0;
}
#mp-betting-screen .mp-betting-player {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.22);
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(255,245,237,0.82);
}
#mp-betting-screen .mp-betting-player .mp-bet-check {
color: #c4ff3d;
font-size: 13px;
line-height: 1;
}
/* Reduced-motion: stop the timer pulse */
@media (prefers-reduced-motion: reduce) {
#mp-betting-screen .mp-betting-timer { animation: none !important; }
}
/* =======================================================================
MULTIPLAYER betting — 5-card fit fix
The 5-duck roster overflowed the 520px panel cap. Widen the panel,
tighten the cards, and remove the floor min-width so they shrink to
fit on narrower screens too.
======================================================================= */
#mp-betting-screen .mp-panel {
max-width: clamp(320px, 96vw, 720px);
padding: 28px 22px 20px;
}
#mp-betting-screen .betting-roster {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
width: 100%;
max-width: none;
padding: 0;
margin-bottom: 12px;
}
#mp-betting-screen .bet-card {
min-width: 0;
padding: 12px 8px 12px;
}
#mp-betting-screen .bet-card canvas {
width: 100%;
height: auto;
max-width: 86px;
aspect-ratio: 9 / 7;
display: block;
margin: 0 auto;
}
#mp-betting-screen .bet-card .duck-name {
font-size: 12.5px;
margin-top: 4px;
word-break: break-word;
hyphens: auto;
}
/* Below ~720px viewport, switch to 3 columns then 2; the wider panel cap
already clamps to 96vw so it never spills off-screen. */
@media (max-width: 720px) {
#mp-betting-screen .betting-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
#mp-betting-screen .betting-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}