.btn-icon { width: 1.4em; text-align: center; margin-right: 8px; }
.btn-text { font-weight: 700; }

:root {
	--bg: #0B1120;
	--panel: rgba(11, 23, 36, 0.82);
	--text: #F1F5F9;
	--muted: #94A3B8;
	--primary: #7C3AED;
	--secondary: #F472B6;
	--ok: #22c55e;
	--warn: #f59e0b;
	--bad: #ef4444;
}

* { box-sizing: border-box; }
html, body {
	height: 100%;
	background:
		radial-gradient(circle at 15% 15%, rgba(124, 58, 237, 0.18), transparent 55%),
		radial-gradient(circle at 85% 25%, rgba(244, 114, 182, 0.16), transparent 50%),
		linear-gradient(180deg, #0B1120 0%, #0F172A 100%);
	color: var(--text);
	margin: 0;
	font-family: 'Rockwell', Georgia, serif;
}
body { margin: 0; overflow: hidden; }
body.game-active { overflow: hidden; }
body.game-active main:not(.rpsdplus-main) { display: none; }
.wallpaper-bg { display: none; }
[hidden] { display: none !important; }

#app { max-width: 1200px; margin: 0 auto; padding: 24px; }

.rpsdplus-header { display: none; text-align: center; margin-bottom: 24px; transition: opacity 0.3s ease, transform 0.3s ease; } /* Hidden by default - game header replaces this */
body.game-active .rpsdplus-header { opacity: 0; transform: translateY(-20px); pointer-events: none; height: 0; margin: 0; overflow: hidden; }
.title { font-weight: 800; letter-spacing: 0.5px; margin: 0 0 6px; }
.badge { display: inline-block; font-size: 0.7rem; font-weight: 700; color: #1d1d1b; background: var(--secondary); padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 6px; }
.subtitle { color: var(--muted); margin: 0; }

.mode-gateway { display: flex; gap: 12px; justify-content: center; margin: 24px 0; }
.mode-btn { background: #25262a; color: var(--text); border: 1px solid #2f3136; padding: 12px 16px; border-radius: 8px; cursor: pointer; transition: transform .15s ease, background .2s ease, border-color .2s ease; }
.mode-btn:hover { transform: translateY(-1px); border-color: var(--secondary); }
.mode-btn.primary { background: var(--primary); border-color: var(--primary); }

.character-select { background: var(--panel); border: 1px solid #2a2c31; border-radius: 12px; padding: 16px; }
.character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.character-card { background: #1f2024; border: 1px solid #2a2c31; border-radius: var(--radius-3); padding: var(--space-3); cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); }
.character-card:hover { transform: translateY(-2px); border-color: var(--color-secondary); box-shadow: var(--shadow-2); }
.character-card:focus { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.character-card.selected { outline: 2px solid var(--color-secondary); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(244,114,182,0.25); }
.character-portrait { width: 100%; aspect-ratio: 16/10; background: #111; border-radius: var(--radius-2); display: grid; place-items: center; color: var(--color-muted); font-weight: 600; overflow: hidden; }
.character-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.character-meta { margin-top: 8px; display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.character-actions { margin-top: 12px; display: flex; gap: 12px; justify-content: flex-end; }

/* Victory styling for character selection buttons */
.character-actions .mode-btn {
	font-size: 1.1rem;
	font-weight: 800;
	padding: 14px 32px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 3px 10px rgba(0,0,0,0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	position: relative;
}

.character-actions .mode-btn.primary {
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899);
	background-size: 200% auto;
	border: 3px solid transparent;
	background-clip: padding-box;
	color: #ffffff;
	text-shadow: 
		0 0 10px rgba(236,72,153,0.8),
		0 0 20px rgba(236,72,153,0.6),
		0 0 30px rgba(59,130,246,0.4),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(236,72,153,0.6),
		0 0 40px rgba(236,72,153,0.4),
		0 0 60px rgba(59,130,246,0.3),
		0 6px 20px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1);
	animation: buttonShimmer 3s ease-in-out infinite;
}

.character-actions .mode-btn.primary::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
}

.character-actions .mode-btn.primary:hover {
	transform: translateY(-2px) scale(1.05);
	text-shadow: 
		0 0 15px rgba(236,72,153,1),
		0 0 30px rgba(236,72,153,0.8),
		0 0 45px rgba(59,130,246,0.6),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 30px rgba(236,72,153,0.8),
		0 0 60px rgba(236,72,153,0.6),
		0 0 90px rgba(59,130,246,0.5),
		0 10px 28px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2);
}

.character-actions .mode-btn.primary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
	animation: none;
}

.character-actions .mode-btn:not(.primary) {
	background: linear-gradient(135deg, rgba(31,32,36,0.95), rgba(42,44,49,0.95));
	border: 3px solid #F472B6;
	color: #F472B6;
	position: relative;
	text-shadow: 
		0 0 10px rgba(244,114,182,0.6),
		0 0 20px rgba(244,114,182,0.35),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(124,58,237,0.45),
		0 0 40px rgba(124,58,237,0.25),
		0 6px 20px rgba(0,0,0,0.4);
}

.character-actions .mode-btn:not(.primary)::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: #F472B6;
	z-index: -1;
	opacity: 0.6;
	filter: blur(8px);
}

.character-actions .mode-btn:not(.primary):hover {
	transform: translateY(-2px) scale(1.05);
	color: #fff;
	text-shadow: 
		0 0 15px rgba(244,114,182,0.85),
		0 0 30px rgba(244,114,182,0.6),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 30px rgba(124,58,237,0.55),
		0 0 60px rgba(124,58,237,0.35),
		0 10px 28px rgba(0,0,0,0.5);
}

/* Filters and search */
.character-filters { display: none; }
.character-filters input[type="search"] { background:#1f2024; color:var(--color-text); border:1px solid #2a2c31; border-radius: var(--radius-3); padding: 8px 10px; min-width: 220px; }
.chips { display:flex; gap: 6px; flex-wrap: wrap; }
.chip { background:#1f2024; border:1px solid #2a2c31; color:var(--color-text); padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: border-color var(--dur-med) var(--ease-standard); }
.chip[aria-pressed="true"] { border-color: var(--color-secondary); }
.chip:focus { outline: 2px solid var(--secondary); outline-offset: 2px; }
.chip:hover { transform: translateY(-1px); }

.search-box { margin-left: auto; min-width: 220px; flex: 1 1 220px; }
.search-input-wrap { position: relative; }
.search-box input[type="search"] {
	width: 100%;
	background: #141416;
	border: 1px solid #2a2c31;
	color: var(--text);
	padding: 8px 10px;
	border-radius: 10px;
	font: 600 13px/1 Inter, Arial, sans-serif;
}
.clear-search {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--muted);
	font: 800 16px/1 Inter, Arial, sans-serif;
	cursor: pointer;
	opacity: .8;
}
.clear-search:hover { opacity: 1; }
.clear-search[disabled] { opacity: .4; cursor: not-allowed; }

/* Character skeleton cards */
.character-card.skeleton { position: relative; overflow: hidden; }
.character-card.skeleton .character-portrait { background: #151518; }
.skeleton-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,0) 100%); transform: translateX(-100%); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

.vs-banner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; }
.vs-text { font-weight: 800; font-size: 2.2rem; color: var(--color-secondary); text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.nameplate { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); background: #1f2024; border: 1px solid #2a2c31; border-radius: var(--radius-3); box-shadow: var(--shadow-1); opacity: 0; transform: translateY(10px) scale(.98); }
.nameplate img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-2); border: 1px solid #2a2c31; }
.nameplate .label { font-size: .75rem; color: var(--color-muted); margin-bottom: 2px; }
.nameplate .title { font-weight: 800; letter-spacing: .2px; }

/* Aiden parallax avatar */
.parallax-wrap { position: relative; width: 56px; height: 56px; border-radius: var(--radius-2); overflow: hidden; border: 1px solid #2a2c31; background: #0f0f10; }
.parallax-wrap .layer { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 120%; height: 120%; background-repeat: no-repeat; background-position: center bottom; background-size: contain; will-change: transform; }
.parallax-wrap .layer.room { z-index: 1; }
.parallax-wrap .layer.aiden { z-index: 2; }
.parallax-wrap .layer.desk { z-index: 3; }

:root[data-reduced-motion="true"] .parallax-wrap .layer { transform: translateX(-50%) !important; }

/* Enter animations */
.enter-anim { animation: plateIn var(--dur-med) var(--ease-emphasis) forwards; }
.enter-anim.delay { animation-delay: 80ms; }
@keyframes plateIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Countdown styling */
.countdown { text-align: center; font-size: 3rem; font-weight: 900; color: var(--color-text); letter-spacing: 2px; min-height: 1.2em; }
.countdown .tick { display: inline-block; transform: scale(.8); opacity: 0; animation: tickIn var(--dur-med) var(--ease-emphasis) forwards; }
@keyframes tickIn { to { transform: scale(1); opacity: 1; } }

.choice { padding: var(--space-3) var(--space-4); background: #1f2024; border: 1px solid #2a2c31; border-radius: var(--radius-3); cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); display: inline-flex; align-items: center; min-width: 140px; justify-content: center; }
.choice-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.choice .btn-icon { font-size: 2rem; width: auto; margin: 0; color: var(--color-secondary); }
.choice .btn-text { font-size: 1.2rem; font-weight: 700; background: linear-gradient(135deg, rgba(236,72,153,1), rgba(59,130,246,1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 20px rgba(236,72,153,0.6), 0 0 30px rgba(59,130,246,0.4); animation: scoreGlow 2s ease-in-out infinite; }
.choice:hover { transform: translateY(-2px); border-color: var(--color-secondary); box-shadow: var(--shadow-2); }
.choice:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.choice.selected { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(244,114,182,0.25); }
.choice[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

.reveal-choices { display: flex; justify-content: center; gap: var(--space-6); margin: var(--space-4) 0; align-items: center; }
.reveal-choices .choice { transform: translateY(8px) scale(.98); opacity: 0; animation: revealIn var(--dur-med) var(--ease-emphasis) forwards; }
.reveal-choices .choice:last-child { animation-delay: 80ms; }
@keyframes revealIn { to { transform: translateY(0) scale(1); opacity: 1; } }

.outcome { text-align: center; font-weight: 900; margin: var(--space-3) 0 var(--space-5); font-size: 1.4rem; }
.outcome.win { color: var(--color-ok); }
.outcome.lose { color: var(--color-bad); }
.outcome.draw { color: var(--color-secondary); }

/* Comic Book Reveal */
.comic-reveal { display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; max-width: 900px; padding: 40px; margin: auto; }
.comic-player, .comic-opponent { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 1 250px; }
.comic-gesture { font-size: 120px; color: var(--color-secondary); text-shadow: 0 0 30px rgba(244,114,182,0.6), 0 0 60px rgba(244,114,182,0.4); position: relative; }
.comic-gesture::before { content: ''; position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(244,114,182,0.2), transparent 70%); }
.comic-label { 
	font-family: 'Rockwell', Georgia, serif; 
	font-size: 1.1rem; 
	font-weight: 900; 
	letter-spacing: 3px; 
	color: #f3f4f6; 
	text-transform: uppercase;
	background: rgba(0,0,0,0.7);
	padding: 8px 16px;
	border-radius: 8px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.8);
	border: 2px solid rgba(250,183,25,0.5);
}
.comic-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 0 0 200px; text-align: center; }
.comic-outcome { font-family: 'Rockwell', Georgia, serif; font-size: 4rem; font-weight: 900; text-transform: uppercase; letter-spacing: 4px; background: linear-gradient(135deg, rgba(236,72,153,1), rgba(59,130,246,1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 40px rgba(236,72,153,0.6); animation: comicBoom 0.6s ease-out; }
.comic-outcome.win { background: linear-gradient(135deg, #22c55e, #F472B6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 40px rgba(34,197,94,0.55); }
.comic-outcome.lose { background: linear-gradient(135deg, #ef4444, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 40px rgba(239,68,68,0.6); }
.comic-outcome.draw { background: linear-gradient(135deg, #F472B6, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 40px rgba(244,114,182,0.55); }
@keyframes comicBoom { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.comic-outcome.explosive { animation: explosiveReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes explosiveReveal { 
	0% { transform: scale(0.2) rotate(-15deg); opacity: 0; filter: brightness(0) drop-shadow(0 0 0 rgba(236,72,153,0)); }
	30% { transform: scale(1.3) rotate(5deg); opacity: 1; filter: brightness(2) drop-shadow(0 0 80px rgba(236,72,153,1)); }
	60% { transform: scale(0.95) rotate(-2deg); filter: brightness(1.5) drop-shadow(0 0 60px rgba(236,72,153,0.8)); }
	100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1) drop-shadow(0 0 50px rgba(236,72,153,0.9)); }
}
.comic-outcome.explosive.win { animation: explosiveRevealWin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes explosiveRevealWin { 
	0% { transform: scale(0.2) rotate(-15deg); opacity: 0; filter: brightness(0) drop-shadow(0 0 0 rgba(34,197,94,0)); }
	30% { transform: scale(1.3) rotate(5deg); opacity: 1; filter: brightness(2) drop-shadow(0 0 80px rgba(34,197,94,1)); }
	60% { transform: scale(0.95) rotate(-2deg); filter: brightness(1.5) drop-shadow(0 0 60px rgba(34,197,94,0.8)); }
	100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1) drop-shadow(0 0 50px rgba(34,197,94,0.9)); }
}
.comic-outcome.explosive.lose { animation: explosiveRevealLose 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes explosiveRevealLose { 
	0% { transform: scale(0.2) rotate(-15deg); opacity: 0; filter: brightness(0) drop-shadow(0 0 0 rgba(239,68,68,0)); }
	30% { transform: scale(1.3) rotate(5deg); opacity: 1; filter: brightness(2) drop-shadow(0 0 80px rgba(239,68,68,1)); }
	60% { transform: scale(0.95) rotate(-2deg); filter: brightness(1.5) drop-shadow(0 0 60px rgba(239,68,68,0.8)); }
	100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1) drop-shadow(0 0 50px rgba(239,68,68,0.9)); }
}
.comic-gesture { will-change: transform, opacity, filter; }
.comic-subtitle { 
	font-size: 1.3rem; 
	font-weight: 900; 
	color: #f3f4f6; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	animation: fadeIn 0.8s ease-out 0.3s both;
	background: rgba(0,0,0,0.8);
	padding: 10px 20px;
	border-radius: 10px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.9);
	border: 2px solid rgba(250,183,25,0.6);
	text-align: center;
	margin: 0 auto;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.reveal-slide-left { animation: slideLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes slideLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } }
.reveal-slide-right { animation: slideRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }
@keyframes slideRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }

[data-reduced-motion="true"] .comic-outcome,
[data-reduced-motion="true"] .comic-outcome.explosive,
[data-reduced-motion="true"] .comic-subtitle,
[data-reduced-motion="true"] .reveal-slide-left,
[data-reduced-motion="true"] .reveal-slide-right { animation: none !important; opacity: 1; transform: none !important; filter: none !important; }
[data-reduced-motion="true"] .explosion-effect,
[data-reduced-motion="true"] .explosion-particle,
[data-reduced-motion="true"] .screen-flash { display: none !important; }

/* Reward toast */
.reward-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #1f2024; color: var(--color-text); border: 1px solid #2a2c31; border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); opacity: 0; z-index: var(--z-modal); }
.reward-toast.show { animation: toastIn var(--dur-med) var(--ease-emphasis) forwards; }
.reward-toast .icon { color: var(--color-secondary); }
@keyframes toastIn { to { transform: translateX(-50%) translateY(0); opacity: 1; } }

:root[data-reduced-motion="true"] .reveal-choices .choice,
:root[data-reduced-motion="true"] .reward-toast.show { animation: none !important; opacity: 1; transform: none; }

.summary-line { 
	text-align: center; 
	margin: 0; 
	color: #f3f4f6; 
	font-size: 1.05rem; 
	font-weight: 700;
	position: absolute;
	bottom: 120px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 600px;
	padding: 12px 24px;
	pointer-events: none;
	z-index: 10;
	background: rgba(0,0,0,0.8);
	border-radius: 12px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.9);
	border: 2px solid rgba(250,183,25,0.5);
}
.post-round { 
	display: flex; 
	justify-content: center; 
	gap: var(--space-3); 
	flex-wrap: wrap;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 600px;
	padding: 0 20px;
	z-index: 10;
}

/* Victory styling for Next Round button */
.post-round .mode-btn.primary {
	font-size: 1.3rem;
	font-weight: 800;
	padding: 18px 48px;
	border-radius: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899);
	background-size: 200% auto;
	border: 3px solid transparent;
	background-clip: padding-box;
	position: relative;
	overflow: visible;
	color: #ffffff;
	text-shadow: 
		0 0 10px rgba(236,72,153,0.8),
		0 0 20px rgba(236,72,153,0.6),
		0 0 30px rgba(59,130,246,0.4),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(236,72,153,0.6),
		0 0 40px rgba(236,72,153,0.4),
		0 0 60px rgba(59,130,246,0.3),
		0 8px 24px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1);
	animation: buttonShimmer 3s ease-in-out infinite, neonPulse 2s ease-in-out infinite;
	white-space: nowrap;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-round .mode-btn.primary::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 16px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
}

.post-round .mode-btn.primary:hover {
	transform: translateY(-4px) scale(1.08);
	text-shadow: 
		0 0 15px rgba(236,72,153,1),
		0 0 30px rgba(236,72,153,0.8),
		0 0 45px rgba(59,130,246,0.6),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 30px rgba(236,72,153,0.8),
		0 0 60px rgba(236,72,153,0.6),
		0 0 90px rgba(59,130,246,0.5),
		0 12px 32px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2);
}

.post-round .mode-btn.primary:active {
	transform: translateY(-2px) scale(1.03);
}

/* Lock-in zoom animation context */
.vs-banner, .character-grid { perspective: 900px; }
.lock-zoom { transform: scale(1.04); transition: transform var(--dur-med) var(--ease-emphasis); }

@media (prefers-contrast: more) {
	.choice, .nameplate, .character-card { border-color: #fff; box-shadow: none; }
	.outcome.win { color: #27d160; }
	.outcome.lose { color: #ff4d4d; }
	.outcome.draw { color: #ffd24a; }
}

/* Containment to improve paint/layour costs */
.character-grid { contain: content; }
.vs-banner { contain: layout style; }
.reveal { contain: content; }

.ambient-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient-bg .layer { position: absolute; inset: -10%; background: radial-gradient(60% 60% at 30% 40%, rgba(124, 58, 237, 0.18), transparent 65%), radial-gradient(50% 50% at 70% 60%, rgba(244, 114, 182, 0.14), transparent 65%); filter: blur(22px); }
.ambient-bg .layer.l1 { transform: translate3d(0,0,0); animation: drift1 26s linear infinite; }
.ambient-bg .layer.l2 { transform: translate3d(0,0,0); animation: drift2 34s linear infinite; }
@keyframes drift1 { 0% { transform: translate3d(-2%, -1%, 0); } 50% { transform: translate3d(2%, 1%, 0); } 100% { transform: translate3d(-2%, -1%, 0); } }
@keyframes drift2 { 0% { transform: translate3d(2%, -2%, 0); } 50% { transform: translate3d(-2%, 2%, 0); } 100% { transform: translate3d(2%, -2%, 0); } }
:root[data-reduced-motion="true"] .ambient-bg .layer { animation: none !important; }

/* Ensure app content stays above ambient and environment */
#app { position: relative; z-index: 5; }

.header-actions { display:flex; gap: var(--space-3); justify-content: center; align-items: center; margin-top: var(--space-2); }
.xp-badge { background:#17181a; border:1px solid #2a2c31; padding: 6px 10px; border-radius: 999px; font-weight: 700; color: var(--color-text); }

/* Simple FX particles for wins */
.fx-layer { position: relative; }
.fx-spark { position:absolute; width:6px; height:6px; border-radius:50%; background: var(--color-secondary); opacity:0; animation: spark .6s var(--ease-emphasis) forwards; }
@keyframes spark { 0% { transform: translate(0,0) scale(.6); opacity:0.8; } 80% { opacity: 1; } 100% { transform: translate(var(--dx, 40px), var(--dy, -40px)) scale(0); opacity: 0; } }

.mode-carousel { display:flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scroll-behavior: smooth; }
.mode-card { scroll-snap-align: start; background:#1f2024; border:1px solid #2a2c31; border-radius: var(--radius-3); padding: 12px 16px; min-width: 220px; display:flex; align-items:center; gap:10px; cursor:pointer; box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); }
.mode-card:hover { border-color: var(--color-secondary); transform: translateY(-1px); }
.mode-card[aria-selected="true"] { border-color: var(--color-secondary); box-shadow: var(--shadow-2); }
.mode-card:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.mode-actions { display:flex; gap: 10px; justify-content:center; margin-top: 14px; }
.mode-card { box-shadow: var(--shadow-1); }
.mode-card:hover { border-color: var(--color-secondary); transform: translateY(-1px); transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); }

/* Captions */
.captions { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: rgba(0,0,0,0.6); color:#fff; padding: 6px 10px; border-radius: 6px; font-size: .9rem; z-index: var(--z-modal); pointer-events: none; }

/* League Table Modal */
.league-table-container {
	overflow-x: auto;
	margin: 24px 0;
}

.league-table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Rockwell', Georgia, serif;
}

.league-table thead {
	background: rgba(168,85,247,0.2);
	border-bottom: 2px solid #a855f7;
}

.league-table th {
	padding: 12px 8px;
	text-align: left;
	font-weight: 700;
	color: var(--secondary);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.league-table th.pos {
	width: 50px;
	text-align: center;
}

.league-table th.played,
.league-table th.wins,
.league-table th.draws,
.league-table th.losses,
.league-table th.points {
	width: 60px;
	text-align: center;
}

.league-table tbody tr {
	border-bottom: 1px solid #2a2c31;
	transition: background 0.2s ease;
}

.league-table tbody tr:hover {
	background: rgba(168,85,247,0.1);
}

.league-table tbody tr.top-three {
	background: rgba(250,183,25,0.1);
}

.league-table tbody tr.top-three:hover {
	background: rgba(250,183,25,0.15);
}

.league-table td {
	padding: 12px 8px;
	color: #f3f4f6;
}

.league-table td.pos {
	text-align: center;
	font-weight: 700;
	color: var(--secondary);
}

.league-table td.name {
	font-weight: 700;
}

.league-table td.played,
.league-table td.wins,
.league-table td.draws,
.league-table td.losses {
	text-align: center;
	color: #a1a1aa;
}

.league-table td.points {
	text-align: center;
	font-weight: 800;
	color: var(--secondary);
	font-size: 1.1rem;
}

.league-table tbody tr.top-three td.pos {
	color: #FAB719;
}

/* Mobile League Table */
@media (max-width: 640px) {
	.league-table {
		font-size: 0.85rem;
	}
	
	.league-table th,
	.league-table td {
		padding: 8px 4px;
	}
	
	.league-table th {
		font-size: 0.75rem;
	}
	
	.league-table th.pos,
	.league-table td.pos {
		width: 35px;
	}
	
	.league-table th.played,
	.league-table th.wins,
	.league-table th.draws,
	.league-table th.losses,
	.league-table th.points,
	.league-table td.played,
	.league-table td.wins,
	.league-table td.draws,
	.league-table td.losses,
	.league-table td.points {
		width: 40px;
	}
	
	.league-table td.points {
		font-size: 1rem;
	}
	
	.league-table td.name {
		font-size: 0.9rem;
	}
}

/* League Stats in Character Bios */
.league-stats {
	margin-top: 12px;
	padding: 12px 16px;
	background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(59,130,246,0.15));
	border-left: 4px solid #a855f7;
	border-radius: 6px;
	font-family: 'Rockwell', Georgia, serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #e5e7eb;
	line-height: 1.6;
}

.bio-text {
	display: inline;
}

.character-details-bio .league-stats {
	margin-top: 16px;
	font-size: 0.95rem;
}

/* Dyslexia-friendly font toggle */
:root.dyslexia, :root.dyslexia body { font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
/* Keep Rockwell for specific UI elements even in dyslexia mode */
:root.dyslexia .character-details-name,
:root.dyslexia .victory-title,
:root.dyslexia .comic-label,
:root.dyslexia .comic-outcome { font-family: 'Rockwell', Georgia, serif !important; }

/* Safe-area padding on action bars */
.post-round { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.rpsdplus-header { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }

/* Broadcast scoreboard - fixed at bottom */
.broadcast-scoreboard { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(15,15,16,0.98), rgba(22,23,27,0.95)); border-top: 2px solid #2a2c31; padding: 12px 20px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; box-shadow: 0 -4px 20px rgba(0,0,0,0.4); font-family: 'Rockwell', Georgia, serif; min-height: 110px; max-height: 110px; overflow: hidden; }
@media (max-width: 640px) {
	.broadcast-scoreboard { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
	.scoreboard-header { gap: 16px; margin-bottom: 6px; }
	.player-score .score-value, .opponent-score .score-value { font-size: 2rem; }
	.scoreboard-avatar { width: 40px; height: 40px; }
	.scoreboard-divider { gap: 4px; margin: 0 6px; min-width: 90px; }
	.round-counter { font-size: 0.7rem; padding: 3px 8px; }
	.vs-text { font-size: 1rem; }
}
.scoreboard-header { display: flex; justify-content: center; align-items: center; gap: 40px; margin-bottom: 8px; }
.player-score, .opponent-score { display: flex; align-items: center; gap: 12px; }
.scoreboard-avatar { width: 56px; height: 56px; border-radius: 8px; border: 2px solid rgba(236,72,153,0.5); object-fit: cover; flex-shrink: 0; }
.score-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.player-score .name, .opponent-score .name { font-size: 0.75rem; font-weight: 700; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.5px; }
.player-score .score-value, .opponent-score .score-value { font-size: 3rem; font-weight: 700; background: linear-gradient(135deg, rgba(236,72,153,1), rgba(59,130,246,1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; text-shadow: 0 0 20px rgba(236,72,153,0.6), 0 0 30px rgba(59,130,246,0.4); animation: scoreGlow 2s ease-in-out infinite; margin-top: -8px; }
@keyframes scoreGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
.scoreboard-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin: 0 10px; min-width: 120px; }
.vs-text { font-size: 1.2rem; font-weight: 700; color: var(--secondary); letter-spacing: 2px; text-shadow: 0 0 10px rgba(236,72,153,0.5); }
.round-counter { text-align: center; font-size: 0.8rem; font-weight: 700; color: #f3f4f6; background: linear-gradient(135deg, rgba(236,72,153,0.3), rgba(59,130,246,0.3)); padding: 4px 12px; border-radius: 6px; border: 1px solid rgba(236,72,153,0.5); box-shadow: 0 0 10px rgba(236,72,153,0.3); white-space: nowrap; }
.scoreboard-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.round-history { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 28px; max-height: 28px; overflow-x: auto; overflow-y: hidden; flex: 1; }
.round-item { display: flex; align-items: center; gap: 4px; background: rgba(42,44,49,0.6); border: 1px solid rgba(42,44,49,0.8); border-radius: 6px; padding: 3px 6px; font-size: 0.7rem; }
.round-item.icon-only { padding: 4px; min-width: 24px; justify-content: center; }
.round-item .round-num { color: #a1a1aa; font-weight: 700; }
.round-item .gesture { color: var(--secondary); font-weight: 800; }
.scoreboard-actions { display: flex; gap: 8px; align-items: center; }
.scoreboard-action { background: rgba(42,44,49,0.6); border: 1px solid rgba(42,44,49,0.8); color: #a1a1aa; width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; font-size: 0.85rem; }
.scoreboard-action:hover { background: rgba(42,44,49,0.8); border-color: var(--secondary); color: var(--secondary); }

/* Victory Modal */
.avatar-modal-content[style*="max-width: 600px"] { position: relative; overflow: hidden; }
.avatar-modal-content[style*="max-width: 600px"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, rgba(236,72,153,0.2), transparent 70%); animation: victoryPulse 2s ease-in-out infinite; pointer-events: none; }
@keyframes victoryPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } }
.victory-title { font-size: 3rem; font-weight: 900; background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; margin-bottom: 16px; position: relative; z-index: 1; animation: victoryTitle 1s ease-out, victoryShimmer 3s ease-in-out infinite; text-transform: uppercase; letter-spacing: 8px; text-shadow: 0 0 40px rgba(236,72,153,0.6); }
.victory-title.tournament-champion { 
	background: linear-gradient(135deg, #a855f7, #F472B6, #a855f7); 
	font-size: 3.5rem;
	letter-spacing: 6px;
	animation: victoryTitle 1s ease-out, tournamentShimmer 3s ease-in-out infinite, victoryTitleBounce 2s ease-in-out infinite;
}
@keyframes victoryTitleBounce { 
	0%, 100% { transform: scale(1) rotate(0deg); } 
	50% { transform: scale(1.05) rotate(-2deg); } 
}
@keyframes victoryTitle { 0% { opacity: 0; transform: scale(0.5) rotate(-15deg); } 70% { transform: scale(1.1) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes victoryShimmer { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } }
.victory-winner { text-align: center; margin: 24px 0; position: relative; z-index: 1; }
.victory-winner img { animation: victoryGlow 2s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes victoryGlow { 0%, 100% { box-shadow: 0 0 20px rgba(236,72,153,0.5), 0 0 40px rgba(59,130,246,0.3); } 50% { box-shadow: 0 0 30px rgba(236,72,153,0.8), 0 0 60px rgba(59,130,246,0.5); } }
.victory-name { font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, #ec4899, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-top: 12px; position: relative; z-index: 1; animation: victoryName 0.8s ease-out; text-transform: uppercase; letter-spacing: 2px; }
@keyframes victoryName { 0% { opacity: 0; transform: scale(0.5) translateY(-20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
.victory-score { font-size: 3.5rem; font-weight: 900; background: linear-gradient(135deg, #ec4899, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-top: 8px; position: relative; z-index: 1; animation: victoryScore 0.8s ease-out 0.2s both; text-shadow: 0 0 30px rgba(236,72,153,0.5); letter-spacing: 4px; }
@keyframes victoryScore { 0% { opacity: 0; transform: scale(0.3) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
.victory-stats { margin: 30px 0; padding: 20px; background: rgba(42,44,49,0.6); border-radius: 12px; border: 2px solid rgba(236,72,153,0.3); position: relative; z-index: 1; animation: victoryStats 0.8s ease-out 0.4s both; }
@keyframes victoryStats { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

[data-reduced-motion="true"] .avatar-modal-content[style*="max-width: 600px"]::before,
[data-reduced-motion="true"] .victory-title,
[data-reduced-motion="true"] .victory-winner img,
[data-reduced-motion="true"] .victory-name,
[data-reduced-motion="true"] .victory-score,
[data-reduced-motion="true"] .victory-stats,
[data-reduced-motion="true"] .score-value { animation: none !important; }
[data-reduced-motion="true"] .victory-title { background-position: 0% center !important; }
.stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.stat-row:last-child { margin-bottom: 0; }
.stat-label { font-size: 0.95rem; color: #a1a1aa; font-weight: 600; }
.stat-value { font-size: 1.1rem; color: var(--text); font-weight: 800; }
.gesture-breakdown { display: flex; gap: 10px; align-items: center; }
.gesture-stat { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(42,44,49,0.8); border-radius: 8px; font-size: 0.9rem; border: 1px solid rgba(236,72,153,0.4); transition: transform 0.2s ease, border-color 0.2s ease; }
.gesture-stat:hover { transform: scale(1.1); border-color: var(--secondary); }
.gesture-stat i { color: var(--secondary); font-size: 1.1rem; }

/* Victory modal button styling */
.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn {
	font-size: 1.1rem;
	font-weight: 800;
	padding: 14px 32px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 3px 10px rgba(0,0,0,0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	position: relative;
}

.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn.primary {
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899);
	background-size: 200% auto;
	border: 3px solid transparent;
	background-clip: padding-box;
	color: #ffffff;
	text-shadow: 
		0 0 10px rgba(236,72,153,0.8),
		0 0 20px rgba(236,72,153,0.6),
		0 0 30px rgba(59,130,246,0.4),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(236,72,153,0.6),
		0 0 40px rgba(236,72,153,0.4),
		0 0 60px rgba(59,130,246,0.3),
		0 6px 20px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1);
	animation: buttonShimmer 3s ease-in-out infinite;
}

.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn.primary::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
}

.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn.primary:hover {
	transform: translateY(-2px) scale(1.05);
	text-shadow: 
		0 0 15px rgba(236,72,153,1),
		0 0 30px rgba(236,72,153,0.8),
		0 0 45px rgba(59,130,246,0.6),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 30px rgba(236,72,153,0.8),
		0 0 60px rgba(236,72,153,0.6),
		0 0 90px rgba(59,130,246,0.5),
		0 10px 28px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2);
}

.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn:not(.primary) {
	background: linear-gradient(135deg, rgba(31,32,36,0.95), rgba(42,44,49,0.95));
	border: 3px solid #F472B6;
	color: #F472B6;
	position: relative;
	text-shadow: 
		0 0 10px rgba(244,114,182,0.6),
		0 0 20px rgba(244,114,182,0.35),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(124,58,237,0.45),
		0 0 40px rgba(124,58,237,0.25),
		0 6px 20px rgba(0,0,0,0.4);
}

.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn:not(.primary)::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: #F472B6;
	z-index: -1;
	opacity: 0.6;
	filter: blur(8px);
}

.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn:not(.primary):hover {
	transform: translateY(-2px) scale(1.05);
	color: #fff;
	text-shadow: 
		0 0 15px rgba(244,114,182,0.85),
		0 0 30px rgba(244,114,182,0.6),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 30px rgba(124,58,237,0.55),
		0 0 60px rgba(124,58,237,0.35),
		0 10px 28px rgba(0,0,0,0.5);
}

/* Environment background layers */
.game-environment {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	background: rgba(0,0,0,0.5);
}
.game-environment[hidden] {
	display: none !important;
}
.game-environment .env-layer {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center bottom;
	will-change: transform;
}
/* Hide male/female during gameplay, show only on landing */
body.game-active .game-environment .env-male,
body.game-active .game-environment .env-female {
	display: none !important;
}
/* Cheerleader layers */
.game-environment .env-cheerleader-left,
.game-environment .env-cheerleader-right {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 95vh;
	background-size: contain;
	z-index: 2;
	opacity: 0;
	display: none;
}
.game-environment .env-cheerleader-left {
	left: 0;
	background-position: left bottom;
}
.game-environment .env-cheerleader-right {
	right: 0;
	background-position: right bottom;
}
.game-environment .env-cheerleader-left.active {
	display: block;
	transform: translateX(-100%);
	animation: slideInCheerleaderLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.game-environment .env-cheerleader-right.active {
	display: block;
	transform: translateX(100%);
	animation: slideInCheerleaderRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
.game-environment .env-arena {
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background-image: url('/games/rpsdplus/environment/arena.png?v=20250131');
	background-size: cover;
	z-index: 1;
}
.game-environment .env-male {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 95vh;
	background-image: url('/games/rpsdplus/environment/male.png?v=20250131');
	background-size: contain;
	background-position: left bottom;
	z-index: 2;
	transform: translateX(-100%);
	animation: slideInMale 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}
.game-environment .env-female {
	bottom: 0;
	right: 0;
	width: 100%;
	height: 95vh;
	background-image: url('/games/rpsdplus/environment/female.png?v=20250131');
	background-size: contain;
	background-position: right bottom;
	z-index: 3;
	transform: translateX(100%);
	animation: slideInFemale 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}
.game-environment .env-crowd {
	bottom: 0;
	left: 50%;
	width: 110vw;
	height: 70vh;
	transform: translateX(-50%);
	background-image: url('/games/rpsdplus/environment/crowd.png?v=20250131');
	background-size: cover;
	background-position: center bottom;
	z-index: 4;
	animation: crowdJiggle 3.5s ease-in-out infinite;
}

@keyframes slideInMale {
	0% {
		transform: translateX(-100%) scale(0.8);
		opacity: 0;
		filter: brightness(0);
	}
	50% {
		transform: translateX(-10%) scale(1.05);
		filter: brightness(1.5);
	}
	100% {
		transform: translateX(0) scale(1);
		opacity: 1;
		filter: brightness(1);
	}
}

@keyframes slideInFemale {
	0% {
		transform: translateX(100%) scale(0.8);
		opacity: 0;
		filter: brightness(0);
	}
	50% {
		transform: translateX(10%) scale(1.05);
		filter: brightness(1.5);
	}
	100% {
		transform: translateX(0) scale(1);
		opacity: 1;
		filter: brightness(1);
	}
}

@keyframes slideInCheerleaderLeft {
	0% {
		transform: translateX(-100%) scale(0.8);
		opacity: 0;
		filter: brightness(0);
	}
	50% {
		transform: translateX(-20%) scale(1.05);
		filter: brightness(1.5);
	}
	100% {
		transform: translateX(-15%) scale(1);
		opacity: 1;
		filter: brightness(1);
	}
}

@keyframes slideInCheerleaderRight {
	0% {
		transform: translateX(100%) scale(0.8);
		opacity: 0;
		filter: brightness(0);
	}
	50% {
		transform: translateX(20%) scale(1.05);
		filter: brightness(1.5);
	}
	100% {
		transform: translateX(15%) scale(1);
		opacity: 1;
		filter: brightness(1);
	}
}

/* Mobile adjustments for male/female with 10px gap */
@media (max-width: 640px) {
	@keyframes slideInMaleMobile {
		0% {
			transform: translateX(-100%) scale(0.8);
			opacity: 0;
			filter: brightness(0);
		}
		50% {
			transform: translateX(-10%) scale(1.05);
			filter: brightness(1.5);
		}
		100% {
			transform: translateX(calc(50% - 100% + 10px)) scale(1);
			opacity: 1;
			filter: brightness(1);
		}
	}
	
	@keyframes slideInFemaleMobile {
		0% {
			transform: translateX(100%) scale(0.8);
			opacity: 0;
			filter: brightness(0);
		}
		50% {
			transform: translateX(10%) scale(1.05);
			filter: brightness(1.5);
		}
		100% {
			transform: translateX(calc(-50% + 100% - 10px)) scale(1);
			opacity: 1;
			filter: brightness(1);
		}
	}
	
	@keyframes slideInCheerleaderLeftMobile {
		0% {
			transform: translateX(-100%) scale(0.8);
			opacity: 0;
			filter: brightness(0);
		}
		50% {
			transform: translateX(-20%) scale(1.05);
			filter: brightness(1.5);
		}
		100% {
			transform: translateX(calc(35% - 100% + 10px)) scale(1);
			opacity: 1;
			filter: brightness(1);
		}
	}
	
	@keyframes slideInCheerleaderRightMobile {
		0% {
			transform: translateX(100%) scale(0.8);
			opacity: 0;
			filter: brightness(0);
		}
		50% {
			transform: translateX(20%) scale(1.05);
			filter: brightness(1.5);
		}
		100% {
			transform: translateX(calc(-35% + 100% - 10px)) scale(1);
			opacity: 1;
			filter: brightness(1);
		}
	}
	
	.game-environment .env-male {
		width: 90%;
		animation: slideInMaleMobile 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
	}
	
	.game-environment .env-female {
		width: 90%;
		animation: slideInFemaleMobile 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
	}
	
	.game-environment .env-cheerleader-left.active {
		width: 90%;
		animation: slideInCheerleaderLeftMobile 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}
	
	.game-environment .env-cheerleader-right.active {
		width: 90%;
		animation: slideInCheerleaderRightMobile 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
	}
}

@keyframes crowdJiggle {
	0% {
		transform: translateX(-50%) translate(0, 0);
	}
	12% {
		transform: translateX(-50%) translate(-4px, 3px);
	}
	23% {
		transform: translateX(-50%) translate(9px, 7px);
	}
	34% {
		transform: translateX(-50%) translate(-8px, 2px);
	}
	45% {
		transform: translateX(-50%) translate(6px, 9px);
	}
	56% {
		transform: translateX(-50%) translate(-3px, 5px);
	}
	67% {
		transform: translateX(-50%) translate(11px, 4px);
	}
	78% {
		transform: translateX(-50%) translate(-7px, 10px);
	}
	89% {
		transform: translateX(-50%) translate(5px, 6px);
	}
	100% {
		transform: translateX(-50%) translate(0, 0);
	}
}

[data-reduced-motion="true"] .env-male,
[data-reduced-motion="true"] .env-female,
[data-reduced-motion="true"] .env-crowd,
[data-reduced-motion="true"] .env-cheerleader-left,
[data-reduced-motion="true"] .env-cheerleader-right {
	animation: none !important;
	transform: translateX(0) !important;
	filter: none !important;
}
[data-reduced-motion="true"] .env-crowd {
	transform: translateX(-50%) !important;
}
[data-reduced-motion="true"] .env-cheerleader-left.active,
[data-reduced-motion="true"] .env-cheerleader-right.active {
	opacity: 1 !important;
	display: block !important;
}

/* Game screens as fixed pop-up overlays with backdrop */
#versusIntro, #reveal, #choiceUI { 
	position: fixed; 
	inset: 0; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	z-index: 8; 
	background: transparent;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px;
	padding-bottom: max(140px, calc(140px + env(safe-area-inset-bottom, 0px)));
}
#versusIntro[hidden], #reveal[hidden], #choiceUI[hidden] { 
	display: none !important; 
}

/* Popup window containers - centered cards */
.versus, .reveal, .choice-ui { 
	background: linear-gradient(135deg, rgba(15,15,20,0.95), rgba(22,23,27,0.92));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 3px solid rgba(250,183,25,0.6);
	border-radius: 24px;
	padding: 40px;
	box-shadow: 
		0 0 80px rgba(250,183,25,0.4),
		0 0 40px rgba(236,72,153,0.3),
		0 30px 100px rgba(0,0,0,0.8),
		inset 0 2px 0 rgba(255,255,255,0.15);
	position: relative;
	max-width: 90vw;
	max-height: calc(85vh - 140px);
	overflow: visible;
	z-index: 10;
}

.versus { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	width: 100%; 
	max-width: 700px;
	margin: auto;
}
.reveal { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	width: 100%; 
	max-width: 900px;
	padding-bottom: 160px;
	margin: auto;
}
.choice-ui { 
	display: flex !important; 
	flex-direction: row !important; 
	gap: var(--space-4); 
	align-items: center; 
	justify-content: center; 
	width: 100%; 
	max-width: 800px;
	padding: 40px;
	margin: auto;
}

/* Hide landing when game starts */
#landingActions[data-hidden="true"], #landingSection[data-hidden="true"] { display: none; }

@media (max-width: 640px) {
	#app { padding: 16px; }
	.player-slot, .opponent-slot { height: 80px; }
	
	/* Game pop-up screens mobile optimization */
	#versusIntro, #reveal, #choiceUI {
		padding: 16px;
		padding-bottom: max(140px, calc(140px + env(safe-area-inset-bottom, 0px)));
	}
	
	.versus, .reveal, .choice-ui {
		width: calc(100vw - 32px);
		max-width: calc(100vw - 32px);
		max-height: calc(85vh - 140px);
		padding: 24px;
		border-radius: 20px;
	}
	
	.reveal {
		padding-bottom: 140px;
	}
	
	#versusIntro .vs-banner, 
	#reveal .comic-reveal {
		gap: 12px;
		max-width: 100%;
		width: 100%;
	}
	
	.comic-reveal {
		flex-direction: column;
		gap: 16px;
		padding: 16px;
		width: 100%;
	}
	
	.comic-gesture {
		font-size: 64px;
	}
	
	.comic-outcome {
		font-size: 2rem;
		letter-spacing: 2px;
	}
	
	.comic-subtitle {
		font-size: 1rem;
		padding: 8px 16px;
	}
	
	.comic-vs {
		flex: 0 0 auto;
		width: 100%;
	}
	
	.comic-player, .comic-opponent {
		flex: 0 1 auto;
		width: 100%;
		max-width: 200px;
	}
	
	.comic-label {
		font-size: 0.9rem;
		letter-spacing: 2px;
		padding: 6px 12px;
	}
	
	.choice-ui {
		flex-direction: column !important;
		gap: 12px;
		width: 100%;
		max-width: 100%;
		padding: 12px;
	}
	
	.choice {
		width: 100%;
		max-width: 100%;
		min-width: auto;
		padding: 16px;
	}
	
	.choice .btn-icon {
		font-size: 1.6rem;
	}
	
	.choice .btn-text {
		font-size: 1.1rem;
	}
	
	.vs-banner {
		grid-template-columns: 1fr;
		gap: 12px;
		justify-items: center;
		width: 100%;
	}
	
	.vs-text {
		grid-column: 1;
		order: 2;
		font-size: 1.6rem;
		margin: 4px 0;
	}
	
	.player-slot {
		order: 1;
		width: 100%;
		max-width: 280px;
	}
	
	.opponent-slot {
		order: 3;
		width: 100%;
		max-width: 280px;
	}
	
	.nameplate {
		grid-template-columns: 48px 1fr;
		gap: 10px;
		padding: 10px;
		width: 100%;
	}
	
	.nameplate img {
		width: 48px;
		height: 48px;
	}
	
	.countdown {
		font-size: 2.5rem;
		margin: 16px 0;
	}
	
	.summary-line {
		font-size: 0.9rem;
		bottom: max(130px, calc(130px + env(safe-area-inset-bottom, 0px)));
		padding: 10px 16px;
		max-width: calc(100% - 32px);
	}
	
	.post-round {
		width: 100%;
		bottom: max(20px, calc(20px + env(safe-area-inset-bottom, 0px)));
		padding: 0 16px;
		max-width: calc(100% - 32px);
	}
	
	.post-round .mode-btn {
		width: 100%;
		max-width: 280px;
	}
}

.reveal-wipe { position: relative; }
.reveal-wipe .choice { position: relative; overflow: hidden; }
.reveal-wipe .choice::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,0,0,0.15), rgba(0,255,255,0.15), rgba(0,0,255,0.15)); mix-blend-mode: screen; transform: translateX(-100%); }
.reveal-wipe.active .choice::after { animation: wipe 420ms var(--ease-emphasis) forwards; }
@keyframes wipe { to { transform: translateX(100%); } }
:root[data-reduced-motion="true"] .reveal-wipe .choice::after, :root[data-reduced-motion="true"] .reveal-wipe.active .choice::after { animation: none; transform: none; opacity: 0; }

.avatar-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: grid; place-items: center; z-index: var(--z-modal); }
.avatar-modal[hidden] { display: none; }
.avatar-modal-content { background:#17181a; border:1px solid #2a2c31; border-radius: 10px; padding: 16px; width: min(560px, 92vw); }

/* New Profile Modal Styling */
.profile-modal-content {
	background: #16171b;
	border: 2px solid #F472B6;
	border-radius: 14px;
	padding: 28px;
	width: min(1200px, 94vw);
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 0 40px rgba(250,183,25,0.5), 0 18px 60px rgba(0,0,0,0.55);
}
.profile-title {
	font-family: 'Rockwell', Georgia, serif;
	font-size: 2.2rem;
	font-weight: 900;
	text-align: center;
	margin: 0 0 24px;
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: victoryShimmer 3s ease-in-out infinite;
	letter-spacing: 3px;
}
.profile-layout {
	display: grid;
	grid-template-columns: 350px 1fr;
	gap: 28px;
	align-items: start;
}
.profile-preview-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.profile-preview-image {
	width: 100%;
	height: 320px;
	border-radius: 16px;
	border: 3px solid #F472B6;
	background: #0b0c10;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(250,183,25,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}
.profile-preview-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.profile-preview-image:empty::before {
	content: 'Select Avatar';
	color: #a1a1aa;
	font-size: 1.1rem;
	font-weight: 700;
}
.profile-input-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.profile-label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--secondary);
	margin-bottom: 4px;
}
.profile-input {
	width: 100%;
	background: #1f2024;
	color: #f3f4f6;
	border: 2px solid #2a2c31;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 1rem;
	font-weight: 600;
	transition: border-color 0.3s ease;
}
.profile-input:focus {
	outline: none;
	border-color: #F472B6;
	box-shadow: 0 0 20px rgba(250,183,25,0.3);
}
.profile-help {
	margin: 0;
	color: #a1a1aa;
	font-size: 0.85rem;
}
.profile-error {
	margin: 0;
	color: #ef4444;
	font-size: 0.9rem;
	font-weight: 600;
	display: none;
}
.profile-error:not(:empty) {
	display: block;
}
.profile-avatar-grid-wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.profile-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.profile-section-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
	letter-spacing: 1px;
}
.profile-gender-filters {
	display: flex;
	gap: 8px;
	align-items: center;
}
.profile-filter-chip {
	background: #1f2024;
	border: 2px solid #2a2c31;
	color: var(--text);
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.85rem;
	transition: all 0.3s ease;
}
.profile-filter-chip:hover {
	border-color: #F472B6;
	transform: translateY(-1px);
}
.profile-filter-chip[aria-pressed="true"] {
	border-color: #F472B6;
	background: rgba(250,183,25,0.2);
	color: #F472B6;
	box-shadow: 0 0 15px rgba(250,183,25,0.3);
}
.profile-avatar-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	min-height: 300px;
}
.profile-avatar-card {
	position: relative;
	background: #1f2024;
	border: 3px solid #2a2c31;
	border-radius: 12px;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-avatar-card:hover {
	transform: translateY(-4px);
	border-color: #F472B6;
	box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.profile-avatar-card.selected {
	border-color: #F472B6;
	box-shadow: 
		0 0 20px rgba(250,183,25,0.6),
		0 0 40px rgba(250,183,25,0.4);
	transform: scale(1.05);
	z-index: 10;
}
.profile-avatar-card.selected::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 16px;
	background: #F472B6;
	z-index: -1;
	opacity: 0.6;
	filter: blur(10px);
	animation: goldenPulse 2s ease-in-out infinite;
	pointer-events: none;
}
.profile-avatar-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
	filter: grayscale(100%) brightness(0.6);
	transition: filter 0.3s ease;
}
.profile-avatar-card:hover img {
	filter: grayscale(50%) brightness(0.8);
}
.profile-avatar-card.selected img {
	filter: grayscale(0%) brightness(1);
}
.profile-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}
.profile-actions .mode-btn {
	font-size: 1.1rem;
	font-weight: 800;
	padding: 14px 32px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}
.profile-actions .mode-btn.primary {
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899);
	background-size: 200% auto;
	border: 3px solid transparent;
	background-clip: padding-box;
	color: #ffffff;
	text-shadow: 
		0 0 10px rgba(236,72,153,0.8),
		0 0 20px rgba(236,72,153,0.6),
		0 0 30px rgba(59,130,246,0.4),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(236,72,153,0.6),
		0 0 40px rgba(236,72,153,0.4),
		0 0 60px rgba(59,130,246,0.3),
		0 6px 20px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1);
	animation: buttonShimmer 3s ease-in-out infinite;
}
.profile-actions .mode-btn.primary::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
}
.profile-actions .mode-btn.primary:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 
		0 0 30px rgba(236,72,153,0.8),
		0 0 60px rgba(236,72,153,0.6),
		0 0 90px rgba(59,130,246,0.5),
		0 10px 28px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2);
}
.profile-actions .mode-btn:not(.primary) {
	background: linear-gradient(135deg, rgba(31,32,36,0.95), rgba(42,44,49,0.95));
	border: 3px solid #F472B6;
	color: #F472B6;
	position: relative;
	text-shadow: 
		0 0 10px rgba(244,114,182,0.6),
		0 0 20px rgba(244,114,182,0.35),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(124,58,237,0.45),
		0 0 40px rgba(124,58,237,0.25),
		0 6px 20px rgba(0,0,0,0.4);
}
.profile-actions .mode-btn:not(.primary)::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: #F472B6;
	z-index: -1;
	opacity: 0.6;
	filter: blur(8px);
}
.profile-actions .mode-btn:not(.primary):hover {
	transform: translateY(-2px) scale(1.05);
	color: #fff;
	box-shadow: 
		0 0 30px rgba(244,114,182,0.7),
		0 0 60px rgba(244,114,182,0.5),
		0 10px 28px rgba(0,0,0,0.5);
}

/* Mobile Modal Optimizations */
@media (max-width: 640px) {
	.avatar-modal-content {
		width: calc(100vw - 24px);
		padding: 16px;
		max-height: 90vh;
		overflow-y: auto;
	}
	
	.victory-title {
		font-size: 2rem !important;
		letter-spacing: 4px !important;
	}
	
	.victory-title.tournament-champion {
		font-size: 2.3rem !important;
	}
	
	.victory-winner img {
		width: 120px !important;
		height: 120px !important;
	}
	
	.victory-name {
		font-size: 1.5rem !important;
	}
	
	.victory-score {
		font-size: 2.5rem !important;
		letter-spacing: 2px !important;
	}
	
	.victory-stats {
		padding: 16px;
		margin: 20px 0;
	}
	
	.gesture-stats {
		gap: 8px !important;
	}
	
	.gesture-stat {
		font-size: 0.8rem;
		padding: 4px 8px;
	}
	
	.gesture-stat i {
		font-size: 0.9rem;
	}
	
	.avatar-actions {
		flex-direction: column;
		gap: 12px;
	}
	
	.avatar-actions .mode-btn {
		width: 100%;
		font-size: 1rem !important;
		padding: 14px 24px !important;
	}
	
	.avatar-modal-content[style*="max-width: 600px"] .avatar-actions .mode-btn.primary {
		font-size: 1rem !important;
		padding: 14px 24px !important;
	}
}

@media (max-width: 768px) {
	.profile-modal-content {
		width: calc(100vw - 24px);
		padding: 20px;
	}
	.profile-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.profile-preview-panel {
		order: 2;
	}
	.profile-avatar-grid-wrapper {
		order: 1;
	}
	.profile-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.profile-avatar-grid {
		grid-template-columns: repeat(3, 1fr);
		min-height: auto;
	}
	.profile-preview-image {
		height: 260px;
	}
}

/* Legacy avatar modal styles for other modals */
.avatar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.avatar-card { background:#1f2024; border:1px solid #2a2c31; border-radius: 8px; padding: 8px; cursor:pointer; transition: border-color var(--dur-med) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.avatar-card:hover, .avatar-card:focus-visible { border-color: var(--color-secondary); transform: translateY(-1px); outline: none; }
.avatar-card img { width: 100%; height: auto; display: block; border-radius: 6px; }
.avatar-actions { display:flex; justify-content: flex-end; margin-top: 12px; }
.avatar-modal-content input[type="text"] { width: 100%; }

.badge-strip { display:inline-flex; gap: 6px; align-items:center; margin: 0 8px; vertical-align: middle; }
.badge-pill { display:inline-flex; align-items:center; gap:6px; background:#1f2024; border:1px solid #2a2c31; color:#f3f4f6; border-radius: 999px; padding: 4px 8px; font-size: .85rem; }
.badge-pill i { color: var(--color-secondary); }

.burger-btn { }
.app-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 5; }
.app-menu { position: fixed; top: 64px; right: 12px; background: #16171b; border: 1px solid #2a2c31; border-radius: 10px; padding: 12px; z-index: 6; min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.app-menu[hidden], .app-menu-backdrop[hidden] { display: none; }
.app-menu h2 { margin: 0 0 8px; font-size: 1rem; color: #e5e7eb; }
.app-menu .mode-btn { width: 100%; justify-content: flex-start; }

.mode-gateway { position: relative; min-height: 60vh; }
.hero-title { position: absolute; top: 42%; left: 50%; transform: translate(-50%, calc(-72% - 0.5em)); font-family: 'Rubik Glitch', Inter, Arial, sans-serif !important; font-weight: 400; letter-spacing: 0.02em; font-size: clamp(5.5rem, 20vw, 14rem); color: rgba(243,244,246,0.96); text-shadow: 0 0 6px rgba(255,255,255,0.35), 0 0 14px rgba(255,20,147,0.45), 0 0 28px rgba(255,20,147,0.35), 0 0 18px rgba(0,200,255,0.35), 0 0 42px rgba(0,200,255,0.25); pointer-events: none; z-index: 0; }
.landing-actions { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: auto; gap: 20px; }
.landing-actions .mode-btn { pointer-events: auto; position: relative; z-index: 11; }
.landing-actions .btn-spacer { flex: 0 0 calc(var(--btn-w, 48px) * 2); height: 1px; }

/* Apply mobile button styling to all screen sizes */
#landingActions .mode-btn,
.landing-actions .mode-btn { 
	font-size: 1.1rem !important;
	font-weight: 800 !important;
	padding: 18px 36px !important;
	border-radius: 16px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border: 2px solid transparent !important;
}

#landingActions .mode-btn::before,
.landing-actions .mode-btn::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 16px;
	padding: 2px;
	background: linear-gradient(135deg, #ec4899, #3b82f6, #F472B6);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s ease;
}

#landingActions .mode-btn:hover::before,
#landingActions .mode-btn:active::before,
.landing-actions .mode-btn:hover::before,
.landing-actions .mode-btn:active::before {
	opacity: 1;
}

#landingActions .mode-btn > *,
.landing-actions .mode-btn > * {
	position: relative;
	z-index: 1;
}

#landingActions .mode-btn:active,
.landing-actions .mode-btn:active {
	transform: scale(0.98) !important;
}

#playBtn,
#landingActions .mode-btn.primary,
.landing-actions .mode-btn.primary {
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899) !important;
	background-size: 200% auto !important;
	border: 3px solid transparent !important;
	background-clip: padding-box !important;
	position: relative !important;
	overflow: visible !important;
	color: #ffffff !important;
	text-shadow: 
		0 0 10px rgba(236,72,153,0.8),
		0 0 20px rgba(236,72,153,0.6),
		0 0 30px rgba(59,130,246,0.4),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 20px rgba(236,72,153,0.6),
		0 0 40px rgba(236,72,153,0.4),
		0 0 60px rgba(59,130,246,0.3),
		0 8px 24px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1) !important;
	animation: buttonShimmer 3s ease-in-out infinite, neonPulse 2s ease-in-out infinite !important;
	white-space: nowrap !important;
}

#playBtn::after,
#landingActions .mode-btn.primary::after,
.landing-actions .mode-btn.primary::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 16px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
}

#playBtn:hover,
#landingActions .mode-btn.primary:hover,
.landing-actions .mode-btn.primary:hover {
	transform: translateY(-4px) scale(1.05) !important;
	text-shadow: 
		0 0 15px rgba(236,72,153,1),
		0 0 30px rgba(236,72,153,0.8),
		0 0 45px rgba(59,130,246,0.6),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 30px rgba(236,72,153,0.8),
		0 0 60px rgba(236,72,153,0.6),
		0 0 90px rgba(59,130,246,0.5),
		0 12px 32px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2) !important;
}

/* No longer needed - practice and tournament have their own styling */

@keyframes buttonShimmer {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes buttonPulse {
	0%, 100% { box-shadow: 0 0 40px rgba(236, 72, 153, 0.7), 0 12px 32px rgba(0,0,0,0.5); }
	50% { box-shadow: 0 0 60px rgba(236, 72, 153, 0.9), 0 12px 32px rgba(0,0,0,0.5); }
}

@keyframes neonPulse {
	0%, 100% { 
		box-shadow: 
			0 0 20px rgba(236,72,153,0.6),
			0 0 40px rgba(236,72,153,0.4),
			0 0 60px rgba(59,130,246,0.3),
			0 8px 24px rgba(0,0,0,0.4),
			inset 0 0 20px rgba(255,255,255,0.1);
	}
	50% { 
		box-shadow: 
			0 0 30px rgba(236,72,153,0.8),
			0 0 60px rgba(236,72,153,0.6),
			0 0 90px rgba(59,130,246,0.5),
			0 8px 24px rgba(0,0,0,0.4),
			inset 0 0 25px rgba(255,255,255,0.15);
	}
}

@keyframes goldenPulse {
	0%, 100% { 
		box-shadow: 
			0 0 20px rgba(250,183,25,0.5),
			0 0 40px rgba(250,183,25,0.3),
			0 8px 24px rgba(0,0,0,0.4);
	}
	50% { 
		box-shadow: 
			0 0 30px rgba(250,183,25,0.7),
			0 0 60px rgba(250,183,25,0.5),
			0 8px 24px rgba(0,0,0,0.4);
	}
}
/* Practice button - special blue/orange styling */
#chooseCharacterBtn,
.landing-actions .mode-btn#chooseCharacterBtn {
	background: linear-gradient(135deg, #3b82f6, #f97316, #3b82f6) !important;
	background-size: 200% auto !important;
	border: 3px solid transparent !important;
	background-clip: padding-box !important;
	position: relative !important;
	overflow: visible !important;
	color: #ffffff !important;
	text-shadow: 
		0 0 10px rgba(59,130,246,0.8),
		0 0 20px rgba(59,130,246,0.6),
		0 0 30px rgba(249,115,22,0.4),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 20px rgba(59,130,246,0.6),
		0 0 40px rgba(59,130,246,0.4),
		0 0 60px rgba(249,115,22,0.3),
		0 8px 24px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1) !important;
	animation: practiceShimmer 3s ease-in-out infinite, practicePulse 2s ease-in-out infinite !important;
}

#chooseCharacterBtn::after,
.landing-actions .mode-btn#chooseCharacterBtn::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 16px;
	background: linear-gradient(135deg, #3b82f6, #f97316);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
	pointer-events: none;
}

#chooseCharacterBtn:hover,
.landing-actions .mode-btn#chooseCharacterBtn:hover {
	transform: translateY(-4px) scale(1.05) !important;
	box-shadow: 
		0 0 30px rgba(59,130,246,0.8),
		0 0 60px rgba(59,130,246,0.6),
		0 0 90px rgba(249,115,22,0.5),
		0 12px 32px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2) !important;
}

/* Tournament button - special green/yellow styling */
#tournamentBtn,
.landing-actions .mode-btn.tournament-btn {
	background: linear-gradient(135deg, #22c55e, #eab308, #22c55e) !important;
	background-size: 200% auto !important;
	border: 3px solid transparent !important;
	background-clip: padding-box !important;
	position: relative !important;
	overflow: visible !important;
	color: #ffffff !important;
	text-shadow: 
		0 0 10px rgba(34,197,94,0.8),
		0 0 20px rgba(34,197,94,0.6),
		0 0 30px rgba(234,179,8,0.4),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 20px rgba(34,197,94,0.6),
		0 0 40px rgba(34,197,94,0.4),
		0 0 60px rgba(234,179,8,0.3),
		0 8px 24px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1) !important;
	animation: tournamentShimmer 3s ease-in-out infinite, tournamentPulse 2s ease-in-out infinite !important;
}

#tournamentBtn::after,
.landing-actions .mode-btn.tournament-btn::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 16px;
	background: linear-gradient(135deg, #22c55e, #eab308);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
	pointer-events: none;
}

#tournamentBtn:hover,
.landing-actions .mode-btn.tournament-btn:hover {
	transform: translateY(-4px) scale(1.05) !important;
	box-shadow: 
		0 0 30px rgba(34,197,94,0.8),
		0 0 60px rgba(34,197,94,0.6),
		0 0 90px rgba(234,179,8,0.5),
		0 12px 32px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2) !important;
}

@keyframes practiceShimmer {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes practicePulse {
	0%, 100% { 
		box-shadow: 
			0 0 20px rgba(59,130,246,0.6),
			0 0 40px rgba(59,130,246,0.4),
			0 0 60px rgba(249,115,22,0.3),
			0 8px 24px rgba(0,0,0,0.4),
			inset 0 0 20px rgba(255,255,255,0.1);
	}
	50% { 
		box-shadow: 
			0 0 30px rgba(59,130,246,0.8),
			0 0 60px rgba(59,130,246,0.6),
			0 0 90px rgba(249,115,22,0.5),
			0 8px 24px rgba(0,0,0,0.4),
			inset 0 0 25px rgba(255,255,255,0.15);
	}
}

@keyframes tournamentShimmer {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes tournamentPulse {
	0%, 100% { 
		box-shadow: 
			0 0 20px rgba(34,197,94,0.6),
			0 0 40px rgba(34,197,94,0.4),
			0 0 60px rgba(234,179,8,0.3),
			0 8px 24px rgba(0,0,0,0.4),
			inset 0 0 20px rgba(255,255,255,0.1);
	}
	50% { 
		box-shadow: 
			0 0 30px rgba(34,197,94,0.8),
			0 0 60px rgba(34,197,94,0.6),
			0 0 90px rgba(234,179,8,0.5),
			0 8px 24px rgba(0,0,0,0.4),
			inset 0 0 25px rgba(255,255,255,0.15);
	}
}

/* Tournament action buttons - Victory style */
.tournament-begin-btn {
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899) !important;
	background-size: 200% auto !important;
	border: 3px solid transparent !important;
	background-clip: padding-box !important;
	position: relative !important;
	overflow: visible !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	text-shadow: 
		0 0 10px rgba(236,72,153,0.8),
		0 0 20px rgba(236,72,153,0.6),
		0 0 30px rgba(59,130,246,0.4),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 20px rgba(236,72,153,0.6),
		0 0 40px rgba(236,72,153,0.4),
		0 0 60px rgba(59,130,246,0.3),
		0 6px 20px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1) !important;
	animation: buttonShimmer 3s ease-in-out infinite, neonPulse 2s ease-in-out infinite !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tournament-begin-btn::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
	pointer-events: none;
}

.tournament-begin-btn:hover:not(:disabled) {
	transform: translateY(-4px) scale(1.05) !important;
	text-shadow: 
		0 0 15px rgba(236,72,153,1),
		0 0 30px rgba(236,72,153,0.8),
		0 0 45px rgba(59,130,246,0.6),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 30px rgba(236,72,153,0.8),
		0 0 60px rgba(236,72,153,0.6),
		0 0 90px rgba(59,130,246,0.5),
		0 12px 32px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2) !important;
}

.tournament-begin-btn:active:not(:disabled) {
	transform: translateY(-2px) scale(1.03) !important;
}

.tournament-begin-btn:disabled:not(.force-enabled) {
	background: linear-gradient(135deg, #6b7280, #4b5563) !important;
	color: #9ca3af !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	opacity: 0.4 !important;
	animation: none !important;
	transform: none !important;
}

.tournament-begin-btn.force-enabled {
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899) !important;
	background-size: 200% auto !important;
	color: #ffffff !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	animation: buttonShimmer 3s ease-in-out infinite, neonPulse 2s ease-in-out infinite !important;
}

.tournament-exit-btn {
	background: linear-gradient(135deg, #25262a, #1f2024) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
	box-shadow: 
		0 0 10px rgba(255,255,255,0.1),
		0 4px 12px rgba(0,0,0,0.3),
		inset 0 1px 0 rgba(255,255,255,0.1) !important;
	border: 2px solid rgba(255,255,255,0.15) !important;
	transition: all 0.3s ease !important;
}

.tournament-exit-btn:hover {
	background: linear-gradient(135deg, #2f3136, #25262a) !important;
	transform: translateY(-2px) !important;
	border-color: rgba(255,255,255,0.25) !important;
	box-shadow: 
		0 0 15px rgba(255,255,255,0.15),
		0 6px 16px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.tournament-exit-btn:active {
	transform: translateY(0) !important;
	box-shadow: 
		0 0 8px rgba(255,255,255,0.1),
		0 2px 8px rgba(0,0,0,0.3),
		inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Button icons and text layout */
.tournament-begin-btn .btn-icon,
.tournament-exit-btn .btn-icon {
	margin-right: 8px;
	font-size: 0.9em;
}

.tournament-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 24px;
}

.tournament-actions .mode-btn {
	min-width: 180px;
	padding: 14px 24px;
	font-size: 1rem;
}

/* Venue Selection Screen */
.venue-select {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.venue-select-panel {
	width: min(1400px, 96vw);
	height: auto;
	max-height: 92vh;
	overflow: hidden;
	background: #16171b;
	border: 1px solid #2a2c31;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 18px 60px rgba(0,0,0,0.55);
	display: flex;
	flex-direction: column;
}

.venue-title {
	font-family: 'Rockwell', Georgia, serif;
	font-size: 2rem;
	font-weight: 900;
	text-align: center;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: 2px;
}

.venue-layout {
	display: flex;
	gap: 24px;
	flex: 1;
	overflow: hidden;
}

.venue-grid-container {
	flex: 1;
	overflow-y: auto;
	padding-right: 12px;
}

.venue-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

.venue-card {
	background: #25262a;
	border: 3px solid #2a2c31;
	border-radius: 12px;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	aspect-ratio: 16/12;
}

.venue-card:hover {
	transform: translateY(-4px);
	border-color: #a855f7;
	box-shadow: 0 8px 24px rgba(168,85,247,0.4);
}

.venue-card.selected {
	border-color: #ec4899;
	background: rgba(236,72,153,0.1);
	box-shadow: 
		0 0 30px rgba(236,72,153,0.6),
		0 8px 24px rgba(0,0,0,0.4);
}

.venue-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: grayscale(1);
	transition: filter 0.3s ease;
}

.venue-card.selected .venue-image {
	filter: grayscale(0);
}

.venue-info {
	padding: 12px;
	background: rgba(0,0,0,0.6);
	text-align: center;
}

.venue-name {
	font-family: 'Rockwell', Georgia, serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--secondary);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.venue-details-panel {
	width: 400px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: #1f2024;
	border: 2px solid #2a2c31;
	border-radius: 12px;
	padding: 24px;
	gap: 16px;
}

.venue-details-image {
	width: 100%;
	height: 240px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 8px;
	background-color: #111;
}

.venue-details-name {
	font-family: 'Rockwell', Georgia, serif;
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--secondary);
	margin: 0;
}

.venue-details-description {
	font-family: 'Rockwell', Georgia, serif;
	color: #a1a1aa;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

.venue-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 24px;
}

.venue-actions .mode-btn {
	min-width: 180px;
	padding: 14px 24px;
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	position: relative;
}

.venue-actions .mode-btn:not(.primary) {
	background: linear-gradient(135deg, rgba(31,32,36,0.95), rgba(42,44,49,0.95));
	border: 3px solid #F472B6;
	color: #F472B6;
	text-shadow: 
		0 0 10px rgba(250,183,25,0.6),
		0 0 20px rgba(250,183,25,0.4),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 20px rgba(250,183,25,0.5),
		0 0 40px rgba(250,183,25,0.3),
		0 6px 20px rgba(0,0,0,0.4);
}

.venue-actions .mode-btn:not(.primary)::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: #F472B6;
	z-index: -1;
	opacity: 0.6;
	filter: blur(8px);
}

.venue-actions .mode-btn:not(.primary):hover {
	transform: translateY(-2px) scale(1.05);
	color: #fff;
	text-shadow: 
		0 0 15px rgba(250,183,25,0.9),
		0 0 30px rgba(250,183,25,0.7),
		0 2px 4px rgba(0,0,0,0.5);
	box-shadow: 
		0 0 30px rgba(250,183,25,0.7),
		0 0 60px rgba(250,183,25,0.5),
		0 10px 28px rgba(0,0,0,0.5);
}

.venue-actions .mode-btn.primary {
	background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899) !important;
	background-size: 200% auto !important;
	border: 3px solid transparent !important;
	background-clip: padding-box !important;
	position: relative !important;
	overflow: visible !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	text-shadow: 
		0 0 10px rgba(236,72,153,0.8),
		0 0 20px rgba(236,72,153,0.6),
		0 0 30px rgba(59,130,246,0.4),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 20px rgba(236,72,153,0.6),
		0 0 40px rgba(236,72,153,0.4),
		0 0 60px rgba(59,130,246,0.3),
		0 6px 20px rgba(0,0,0,0.4),
		inset 0 0 20px rgba(255,255,255,0.1) !important;
	animation: buttonShimmer 3s ease-in-out infinite, neonPulse 2s ease-in-out infinite !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.venue-actions .mode-btn.primary::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 12px;
	background: linear-gradient(135deg, #ec4899, #3b82f6);
	z-index: -1;
	opacity: 0.8;
	filter: blur(8px);
	pointer-events: none;
}

.venue-actions .mode-btn.primary:hover:not(:disabled) {
	transform: translateY(-4px) scale(1.05) !important;
	text-shadow: 
		0 0 15px rgba(236,72,153,1),
		0 0 30px rgba(236,72,153,0.8),
		0 0 45px rgba(59,130,246,0.6),
		0 2px 4px rgba(0,0,0,0.5) !important;
	box-shadow: 
		0 0 30px rgba(236,72,153,0.8),
		0 0 60px rgba(236,72,153,0.6),
		0 0 90px rgba(59,130,246,0.5),
		0 12px 32px rgba(0,0,0,0.5),
		inset 0 0 30px rgba(255,255,255,0.2) !important;
}

.venue-actions .mode-btn.primary:active:not(:disabled) {
	transform: translateY(-2px) scale(1.03) !important;
}

.venue-actions .mode-btn.primary:disabled {
	background: linear-gradient(135deg, #6b7280, #4b5563) !important;
	color: #9ca3af !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	opacity: 0.4 !important;
	animation: none !important;
	transform: none !important;
}

@media (max-width: 768px) {
	.venue-layout {
		flex-direction: column;
	}
	
	.venue-details-panel {
		width: 100%;
		order: -1;
		height: auto;
	}
	
	.venue-details-image {
		height: 180px;
	}
	
	.venue-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
	
	.venue-title {
		font-size: 1.6rem;
		margin-bottom: 16px;
	}
}

@media (max-width: 640px) {
	.venue-select-panel {
		width: calc(100vw - 20px);
		max-height: 95vh;
		border-radius: 10px;
		padding: 12px;
	}
	
	.venue-grid-container {
		padding-right: 0;
	}
	
	.venue-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.venue-details-image {
		height: 160px;
	}
	
	.venue-details-name {
		font-size: 1.4rem;
	}
	
	.venue-details-description {
		font-size: 0.9rem;
	}
	
	.venue-actions {
		margin-top: 16px;
		position: sticky;
		bottom: 0;
		background: #16171b;
		padding-top: 12px;
		border-top: 1px solid #2a2c31;
		z-index: 1;
	}
	
	.venue-actions .mode-btn {
		flex: 1;
		min-width: 0;
	}
}

@media (max-width: 640px){ 
	.hero-title {
		font-size: clamp(3.5rem, 15vw, 8rem);
		top: 35%;
	}
	
	.landing-actions { 
		flex-direction: column; 
		bottom: max(20px, calc(20px + env(safe-area-inset-bottom, 0px)));
		width: calc(100% - 32px); 
		gap: 16px;
	}
	#landingActions .btn-spacer,
	.landing-actions .btn-spacer { 
		display: none;
	}
	#landingActions .mode-btn,
	.landing-actions .mode-btn {
		width: 100% !important;
		font-size: 1.1rem !important;
		padding: 16px 24px !important;
		min-height: 56px;
	}
}

/* Tournament Bracket Screen */
#tournamentBracket { 
	position: fixed; 
	inset: 0; 
	display: grid; 
	place-items: center; 
	background: rgba(0,0,0,0.45); 
	z-index: 12; 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#tournamentBracket::before {
	content: '';
	position: absolute;
	inset: 0;
	background: inherit;
	background-size: cover;
	background-position: center;
	opacity: 1;
	z-index: -1;
}

#tournamentBracket[hidden] { display: none; }
.tournament-panel { 
	width: min(1200px, 94vw); 
	max-height: 88vh; 
	overflow-y: auto; 
	background: rgba(22,23,27,0.95); 
	border: 2px solid #a855f7; 
	border-radius: 14px; 
	padding: 24px; 
	box-shadow: 0 0 40px rgba(168,85,247,0.5), 0 18px 60px rgba(0,0,0,0.55);
	position: relative;
	z-index: 1; 
}
.tournament-title { 
	font-family: 'Rockwell', Georgia, serif;
	font-size: 2.5rem; 
	font-weight: 900; 
	text-align: center; 
	margin: 0 0 16px; 
	background: linear-gradient(135deg, #a855f7, #F472B6, #a855f7);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: tournamentShimmer 3s ease-in-out infinite;
	letter-spacing: 4px;
}
.bracket-stage-indicator {
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--secondary);
	margin-bottom: 24px;
}

.bracket-stage-indicator .stage-name {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--secondary);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.bracket-stage-indicator .venue-name {
	font-size: 1rem;
	font-weight: 600;
	color: #a1a1aa;
	margin-top: 4px;
	font-style: italic;
	padding: 8px 16px;
	background: rgba(168,85,247,0.2);
	border-radius: 8px;
	border: 2px solid rgba(168,85,247,0.4);
	display: inline-block;
	width: 100%;
}
.bracket-container {
	display: flex;
	gap: 40px;
	justify-content: center;
	margin: 24px 0;
	overflow-x: auto;
	padding: 20px;
}
.bracket-round {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 240px;
}
.bracket-round-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: #a1a1aa;
	text-align: center;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.bracket-match {
	background: #1f2024;
	border: 2px solid #2a2c31;
	border-radius: 10px;
	padding: 12px;
	min-height: 80px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bracket-match.player-match {
	border-color: #a855f7;
	box-shadow: 0 0 20px rgba(168,85,247,0.4);
}
.bracket-match.completed {
	opacity: 0.7;
}
.bracket-player {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px;
	background: rgba(42,44,49,0.5);
	border-radius: 6px;
	gap: 8px;
}
.bracket-player.winner {
	background: rgba(34,197,94,0.2);
	border: 1px solid rgba(34,197,94,0.5);
}
.bracket-player.loser {
	background: rgba(239,68,68,0.1);
	opacity: 0.6;
}
.bracket-player.you {
	border: 2px solid #F472B6;
	background: rgba(250,183,25,0.1);
}
.bracket-player-name {
	font-weight: 700;
	font-size: 0.9rem;
	flex: 1;
}
.bracket-player-score {
	font-weight: 900;
	font-size: 1.1rem;
	color: var(--secondary);
	min-width: 24px;
	text-align: center;
}
.tournament-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 24px;
}

/* Mobile Tournament Optimizations */
@media (max-width: 640px) {
	.tournament-panel {
		width: calc(100vw - 16px);
		max-height: 92vh;
		padding: 16px;
		border-radius: 10px;
	}
	
	.tournament-title {
		font-size: 1.8rem;
		letter-spacing: 2px;
		margin-bottom: 12px;
	}
	
	.bracket-stage-indicator .stage-name {
		font-size: 1.1rem;
	}
	
	.bracket-stage-indicator .venue-name {
		font-size: 0.85rem;
		padding: 6px 12px;
	}
	
	.bracket-container {
		gap: 20px;
		padding: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.bracket-round {
		min-width: 180px;
		gap: 12px;
	}
	
	.bracket-round-title {
		font-size: 0.75rem;
	}
	
	.bracket-match {
		padding: 8px;
		min-height: 60px;
	}
	
	.bracket-player-name {
		font-size: 0.8rem;
	}
	
	.bracket-player-score {
		font-size: 0.95rem;
	}
	
	.tournament-actions {
		flex-direction: column;
		gap: 12px;
		margin-top: 16px;
	}
	
	.tournament-actions .mode-btn {
		width: 100%;
	}
	
	/* Mobile Gameplay Screens */
	.versus {
		padding: 20px 16px;
		max-width: 100%;
	}
	
	.vs-banner {
		gap: 16px;
	}
	
	.nameplate {
		font-size: 0.9rem;
	}
	
	.nameplate img {
		width: 60px;
		height: 60px;
	}
	
	.vs-text {
		font-size: 2.5rem;
	}
	
	.countdown .tick {
		font-size: 5rem;
	}
	
	.choice-ui {
		flex-direction: column !important;
		padding: 20px 16px !important;
		gap: 16px !important;
	}
	
	.choice {
		width: 100%;
		max-width: 280px;
		min-height: 80px;
	}
	
	.choice .btn-icon {
		font-size: 2.5rem;
	}
	
	.choice .btn-text {
		font-size: 1.3rem;
	}
	
	.comic-reveal {
		flex-direction: column;
		gap: 20px;
		padding: 20px 16px;
	}
	
	.comic-gesture {
		font-size: 80px;
	}
	
	.comic-outcome {
		font-size: 2.5rem;
	}
	
	.comic-subtitle {
		font-size: 1rem;
	}
	
	.post-round .mode-btn.primary {
		font-size: 1.2rem;
		padding: 16px 36px;
	}
	
	/* Mobile Scoreboard refinements */
	.scoreboard-footer {
		flex-wrap: wrap;
		gap: 8px;
	}
	
	.round-history {
		min-height: 24px;
		max-height: 24px;
	}
	
	.scoreboard-action {
		width: 36px;
		height: 36px;
		font-size: 0.9rem;
	}
	
	/* Touch improvements - larger tap targets */
	button, .mode-btn, .choice, .character-card, .venue-card {
		-webkit-tap-highlight-color: rgba(250, 183, 25, 0.2);
		touch-action: manipulation;
	}
	
	.choice {
		min-height: 88px;
	}
	
	/* Prevent zoom on input focus */
	input, select, textarea {
		font-size: 16px !important;
	}
	
	/* Smooth scrolling */
	* {
		-webkit-overflow-scrolling: touch;
	}
	
	/* Disable text selection on UI elements */
	.mode-btn, button, .choice, .character-card, .venue-card {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	/* Ensure no horizontal scroll */
	body, html {
		overflow-x: hidden;
		width: 100%;
	}
}

#characterSelect { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.45); z-index: 12; }
#characterSelect[hidden] { display: none; }
.character-select-panel { width: min(1400px, 96vw); height: auto; max-height: 92vh; overflow: hidden; background: #16171b; border: 1px solid #2a2c31; border-radius: 14px; padding: 20px; box-shadow: 0 18px 60px rgba(0,0,0,0.55); display: flex; flex-direction: column; }
@media (min-width: 641px) {
	.character-select-panel {
		padding: 24px;
	}
}
.character-select .character-actions { margin-top: 16px; display: flex; gap: 12px; justify-content: flex-end; }
@media (max-width: 640px){ 
	.character-select-panel { 
		width: calc(100vw - 20px); 
		max-height: 95vh; 
		border-radius: 10px; 
		padding: 12px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.character-select-panel > * {
		flex-shrink: 0;
	}
	.character-select .character-actions {
		position: sticky;
		bottom: 0;
		background: #16171b;
		margin-top: auto;
		padding-top: 12px;
		border-top: 1px solid #2a2c31;
		display: flex;
		gap: 12px;
		z-index: 1;
	}
	.character-select .character-actions .mode-btn {
		flex: 1;
		font-size: 1rem;
		padding: 14px 20px;
	}
	
	.nemesis-title {
		font-size: 1.3rem;
		margin-bottom: 12px;
	}
	
	.carousel-wrap {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;
		position: relative;
		justify-content: center;
		align-items: center;
	}
	/* Hide desktop details panel on mobile */
	.character-details-panel {
		display: none !important;
	}
	#characterGrid {
		position: relative;
		width: 100%;
		min-height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: visible;
		touch-action: none;
		padding: 20px 0;
	}
	/* Card pile styling - same as cards app */
	#characterGrid .character-card {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 260px;
		height: 360px;
		margin-left: -130px;
		margin-top: -180px;
		border: 1px solid #666;
		border-radius: 18px;
		background: #fff;
		transform-origin: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.15);
		will-change: transform, opacity, z-index;
		cursor: pointer;
	}
	/* Enhanced shadow for top cards in pile */
	#characterGrid .character-card:nth-of-type(-n+10) {
		box-shadow: 
			0 2px 4px rgba(0, 0, 0, 0.1),
			0 4px 8px rgba(0, 0, 0, 0.15),
			0 8px 16px rgba(0, 0, 0, 0.1);
	}
	/* Top card (selected) - fully visible and interactive */
	#characterGrid .character-card.selected {
		opacity: 1 !important;
		pointer-events: auto !important;
		cursor: pointer;
	}
	/* Upside down cards */
	#characterGrid .character-card.upside-down {
		/* Visual flip handled by rotation in JS */
	}
	/* Brush off animation */
	@keyframes brushOffRight {
		to {
			transform: translate(100vw, 0) rotate(20deg);
			opacity: 0;
		}
	}
	@keyframes brushOffLeft {
		to {
			transform: translate(-100vw, 0) rotate(-20deg);
			opacity: 0;
		}
	}
	.carousel-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		background: rgba(22,23,27,0.95);
		border: 2px solid #F472B6;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(0,0,0,0.4);
	}
	.carousel-nav.prev {
		left: 8px;
	}
	.carousel-nav.next {
		right: 8px;
	}
	.nemesis-title {
		font-size: 1.1rem;
		margin-bottom: 6px;
	}
	.nemesis-header {
		margin: 4px 0;
	}
	.nemesis-name {
		font-size: 1.1rem;
	}
	.nemesis-sub {
		font-size: 0.85rem;
	}
	.character-filters {
		margin-bottom: 8px;
	}
	.nemesis-bio {
		font-size: 0.85rem;
		padding: 8px;
		margin: 8px 0;
		min-height: auto;
		max-height: 80px;
		overflow-y: auto;
	}
}

.nemesis-title { display: none; }

/* Desktop grid layout - only apply on larger screens */
@media (min-width: 641px) {
	.carousel-wrap { 
		position: relative; 
		display: grid; 
		grid-template-columns: 56px 420px 1fr 56px; 
		align-items: center; 
		gap: 24px; 
		height: 520px;
		max-height: 520px;
	}
	
	.carousel-nav {
		display: flex !important;
		align-self: center;
		height: 56px;
		width: 56px;
		font-size: 1.4rem;
	}
	
	.carousel-nav.prev {
		order: 1;
	}
	
	/* Details panel comes second in the grid */
	.character-details-panel {
		order: 2;
	}
	
	/* Character grid comes third */
	#characterGrid {
		order: 3;
	}
	
	.carousel-nav.next {
		order: 4;
	}
	
	/* Character grid - 2 rows of 5 */
	#characterGrid { 
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 12px;
		padding: 0;
		overflow: visible;
		height: 100%;
	}
	
	/* Individual character thumbnails */
	#characterGrid .character-card { 
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 140px;
		border-radius: 12px;
		border: 3px solid #2a2c31;
		background: #0b0c10;
		box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
	}
	
	#characterGrid .character-card:hover {
		transform: translateY(-4px);
		border-color: #F472B6;
		box-shadow: 0 8px 20px rgba(0,0,0,0.5);
	}
	
	#characterGrid .character-card.selected { 
		border-color: #F472B6;
		box-shadow: 
			0 0 20px rgba(250,183,25,0.6), 
			0 0 40px rgba(250,183,25,0.4), 
			0 8px 24px rgba(0,0,0,0.6);
		transform: none;
		z-index: 10;
		position: relative;
	}
	
	#characterGrid .character-card.selected::before {
		content: '';
		position: absolute;
		inset: -6px;
		border-radius: 16px;
		background: #F472B6;
		z-index: 1000;
		opacity: 0.6;
		filter: blur(10px);
		animation: goldenPulse 2s ease-in-out infinite;
		pointer-events: none;
	}
	
	#characterGrid .character-card.selected .character-portrait {
		z-index: 1001;
	}
	
	#characterGrid .character-card.selected .character-meta {
		z-index: 1002;
	}
	
	/* Character details panel on the left */
	.character-details-panel {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 24px;
		background: linear-gradient(135deg, rgba(15,15,20,0.9), rgba(22,23,27,0.85));
		border-radius: 20px;
		border: 2px solid rgba(250,183,25,0.3);
		box-shadow: 0 10px 30px rgba(0,0,0,0.4);
		height: 100%;
		gap: 12px;
	}
	
	.character-details-image {
		width: 100%;
		height: 260px;
		border-radius: 16px;
		border: 3px solid #F472B6;
		background: #0b0c10;
		overflow: hidden;
		box-shadow: 0 0 30px rgba(250,183,25,0.4);
		flex-shrink: 0;
	}
	
	.character-details-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 30%;
		display: block;
	}
	
	.character-details-name {
		font-family: 'Rockwell', Georgia, serif;
		font-size: 2rem;
		font-weight: 900;
		background: linear-gradient(135deg, #ec4899, #3b82f6, #ec4899);
		background-size: 200% auto;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-transform: uppercase;
		letter-spacing: 3px;
		margin: 0;
		animation: victoryShimmer 3s ease-in-out infinite;
		text-shadow: 0 0 40px rgba(236,72,153,0.6);
		line-height: 1;
		flex-shrink: 0;
	}
	
	.character-details-title {
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--secondary);
		margin: 0;
		letter-spacing: 1px;
		flex-shrink: 0;
	}
	
	.character-details-difficulty {
		display: inline-block;
		background: rgba(42,44,49,0.8);
		border: 2px solid rgba(236,72,153,0.5);
		border-radius: 8px;
		padding: 4px 10px;
		font-size: 0.8rem;
		font-weight: 700;
		color: var(--text);
		align-self: flex-start;
		flex-shrink: 0;
	}
	
	.character-details-bio {
		font-size: 0.9rem;
		line-height: 1.5;
		color: #e5e7eb;
		background: rgba(31,32,36,0.6);
		padding: 12px;
		border-radius: 12px;
		border: 1px solid rgba(250,183,25,0.2);
		box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
		flex: 1;
		overflow-y: auto;
		min-height: 0;
	}
}
/* Desktop card content styling */
@media (min-width: 641px) {
	#characterGrid .character-portrait { 
		position: absolute; 
		inset: 0; 
		overflow: hidden; 
		border-radius: 9px; 
		z-index: 1; 
		display: flex; 
		align-items: center; 
		justify-content: center; 
		width: 100%; 
		height: 100%; 
		background: #0b0c10; 
	}
	
	#characterGrid .character-portrait img { 
		width: 100%; 
		height: 100%; 
		object-fit: cover; 
		object-position: center 30%;
		padding: 0; 
		display: block; 
		transition: transform .3s ease, filter .3s ease; 
		filter: grayscale(100%) brightness(0.6);
	}
	
	#characterGrid .character-card:hover .character-portrait img { 
		transform: scale(1.05);
		filter: grayscale(50%) brightness(0.8);
	}
	
	#characterGrid .character-card.selected .character-portrait img { 
		transform: none;
		filter: grayscale(0%) brightness(1);
	}
	
	#characterGrid .character-meta { 
		position: absolute; 
		left: 8px; 
		right: 8px; 
		bottom: 8px; 
		z-index: 2; 
		background: rgba(10,11,13,0.9); 
		border: 1px solid rgba(250,183,25,0.4); 
		border-radius: 8px; 
		padding: 6px 10px; 
		display: flex; 
		justify-content: space-between; 
		font-weight: 700; 
		backdrop-filter: blur(10px);
		font-size: 0.75rem;
	}
	
	#characterGrid .character-card.selected .character-meta {
		background: rgba(10,11,13,0.95);
		border-color: #F472B6;
	}
}

.nemesis-header { text-align: center; margin: 4px 0 6px; }
.nemesis-name { font-size: 1.25rem; font-weight: 900; letter-spacing:.015em; }
.nemesis-sub { font-size: .95rem; color: #a1a1aa; }
.nemesis-bio { margin: 12px auto 0; color: #e5e7eb; min-height: 3.2em; text-shadow: 0 2px 12px rgba(0,0,0,0.45); border-radius: 12px; padding: 10px 12px; width: min(880px, 92%); position: relative; }
.nemesis-bio::before { content:""; position:absolute; inset:-3px; border-radius:14px; background: linear-gradient(135deg, rgba(255,20,147,.7), rgba(0,200,255,.7)); filter: blur(10px); z-index:-1; }

/* Hide old header on all screen sizes - not needed anymore */
.nemesis-header { display: none; }

/* Hide bio on desktop - we use the details panel instead */
@media (min-width: 641px) {
	.nemesis-bio { display: none; }
}
.carousel-nav { 
	height: 44px; 
	width: 44px; 
	border-radius: 999px; 
	border: 2px solid #F472B6; 
	background: rgba(27,28,32,0.95); 
	color: #F472B6; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 0 20px rgba(250,183,25,0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 1.2rem;
	backdrop-filter: blur(8px);
}
.carousel-nav:hover {
	background: rgba(250,183,25,0.2);
	box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 30px rgba(250,183,25,0.5);
	transform: scale(1.1);
}
@media (min-width: 641px) {
	.carousel-nav { 
		align-self: center;
	}
}


/* ============================================================================
   FRIENDS SYSTEM STYLES
   ============================================================================ */

.friends-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: none;
    overflow-y: auto;
}

.friends-container {
    max-width: 800px;
    margin: 2rem auto;
    background: var(--panel);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--primary);
}

.friends-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(124, 58, 237, 0.3);
}

.friends-header h1 {
    margin: 0;
    color: var(--text);
    font-size: 2rem;
}

.close-friends-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.close-friends-btn:hover {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text);
}

.friends-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.add-friend-section h2,
.friends-list-section h2 {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.add-friend-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.friend-input {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    background: rgba(11, 23, 36, 0.6);
    color: var(--text);
    font-family: 'Rockwell', Georgia, serif;
}

.friend-input:focus {
    outline: none;
    border-color: var(--primary);
}

.friend-message {
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    display: none;
}

.friend-message.success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--ok);
    border: 1px solid var(--ok);
    display: block;
}

.friend-message.error {
    background: rgba(239, 68, 68, 0.2);
    color: var(--bad);
    border: 1px solid var(--bad);
    display: block;
}

.friends-list-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#friends-count {
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 1rem;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.no-friends-message {
    text-align: center;
    color: var(--muted);
    padding: 2rem;
    font-style: italic;
}

.friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(11, 23, 36, 0.6);
    border: 2px solid rgba(124, 58, 237, 0.3);
    border-radius: 12px;
    transition: all 0.3s;
}

.friend-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.friend-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.friend-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}

.friend-details {
    display: flex;
    flex-direction: column;
}

.friend-name {
    font-weight: bold;
    color: var(--text);
    font-size: 1.1rem;
}

.friend-status {
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.friend-status.online {
    color: var(--ok);
    font-weight: bold;
}

.friend-status.online::before {
    content: '●';
    color: var(--ok);
    font-size: 1.2rem;
}

.friend-status.offline::before {
    content: '●';
    color: var(--muted);
    font-size: 1.2rem;
}

.status-indicator {
    display: inline-block;
    font-size: 1rem;
    margin-right: 0.25rem;
}

.status-indicator.online-dot {
    color: var(--ok);
}

.status-indicator.offline-dot {
    color: var(--muted);
}

/* Connection Quality Indicator */
.connection-quality {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.05);
}

.connection-quality.excellent {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.connection-quality.good {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.connection-quality.fair {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.connection-quality.poor {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.connection-quality-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.connection-quality.excellent .connection-quality-indicator {
    background: #22c55e;
    box-shadow: 0 0 4px #22c55e;
}

.connection-quality.good .connection-quality-indicator {
    background: #3b82f6;
    box-shadow: 0 0 4px #3b82f6;
}

.connection-quality.fair .connection-quality-indicator {
    background: #fbbf24;
    box-shadow: 0 0 4px #fbbf24;
}

.connection-quality.poor .connection-quality-indicator {
    background: #ef4444;
    box-shadow: 0 0 4px #ef4444;
}

.friend-actions {
    display: flex;
    gap: 0.5rem;
}

.friend-action-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s;
    font-family: 'Rockwell', Georgia, serif;
    min-width: 44px;
    min-height: 44px;
}

.friend-action-btn.challenge {
    background: var(--ok);
    color: white;
}

.friend-action-btn.challenge:hover {
    background: #16a34a;
    transform: scale(1.05);
}

.friend-action-btn.remove {
    background: var(--bad);
    color: white;
}

.friend-action-btn.remove:hover {
    background: #dc2626;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .friends-container {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        padding: 1rem;
    }
    
    .friend-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .friend-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .add-friend-form {
        flex-direction: column;
    }
}