@import url('vendor/fontawesome/css/fontawesome.min.css');
@import url('vendor/fontawesome/css/thin.min.css');
@import url('vendor/fontawesome/css/solid.min.css');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;600;700&display=swap');


*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
	--F:  'Teko', sans-serif;
	--FD: 'Orbitron', monospace;

	/* Dynamic accent — updated per-level by ThemeManager */
	--accent:       #00ffff;
	--candle-bull:  #00ff88;
	--candle-bear:  #ff3355;
	--trail-color:  #f7931a;

	--orange:  #f7931a;
	--white:    #e2ffff;
	--cyan:    #00ffff;
	--red:     #ff3355;
	--gold:    #ffd700;
	--blue:    #1da1f2;
	--magenta: #ff00ff;
	--green:   #00ff88;
	--black:   #000;
	--bg:      #020208;

	--white-rgb: 	226,255,255;
	--orange-rgb: 247,147,26;
	--cyan-rgb:   0,255,255;
	--red-rgb:    255,51,85;

	--glass:        rgba(4,4,18,0.72);
	--glass-border: rgba(0,255,255,0.14);

	--cut-corners:    polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
	--cut-corners-sm: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);

	--cut-corners:    none;
	--cut-corners-sm: none;

	--r-sm: 8px; --r-md: 16px;--r-xl: 24px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--panel-gap: 12px;
	--control-h: 42px;
}


::selection {
	color: var(--black);
	background: var(--cyan);
}

/* ── CSS Background layer (behind canvas) ──
   bgImage: 2:1 e.g. 1920×960 — sky + midground only, NOT full screen.
   thImage: 3:4 portrait card art — CSS scales it to fit, no change needed.

   Layer order (back to front):
   body              ← floor base color (matches theme floorCol)
   #bg-floor-block   ← solid floor area, updated per-level by ThemeManager
   #bg-layer         ← extended sky image, fades out near the floor
   #bg-overlay       ← per-level tint/darkness
   canvas            ← Three.js scene (transparent clear)
   #ui               ← HUD / menus
*/

#bg-layer {
	position: fixed; top: 0; left: 0; right: 0;
	height: 60vh;
	z-index: 1;
	background-size: 100% 100%;
	background-position: center top;
	background-repeat: no-repeat;
	/* Fade image out before the floor — eliminates hard edge */
	-webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 62%, transparent 100%);
	transition: opacity 0.4s ease, background-image 0s 0.22s;
	opacity: 0;
}
/* Solid floor block — only the lower portion of the screen.
   Body colour is the final fallback; this block carries the per-level tint. */
#bg-floor-block {
	position: fixed; left: 0; right: 0; top: 0; bottom: 0;
	z-index: 0;
	background: #010208;
	pointer-events: none;
	transition: background 0.4s ease;
}
#bg-overlay {
	position: fixed; inset: 0; z-index: 2;
	background: rgba(0,0,0,0);
	pointer-events: none;
	transition: background 0.4s ease;
}

/* ── Loader overlay ── */
#preloader {
	position: fixed; inset: 0; z-index: 980;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at center, rgba(10,8,22,0.96), rgba(0,0,0,0.98));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: all;
}
.preloader-card {
	width: min(420px, 88vw);
	padding: 26px 22px 20px;
	background: rgba(4,4,18,0.74);
	border: 1px solid rgba(var(--cyan-rgb),0.18);
	box-shadow: 0 0 28px rgba(0,0,0,0.4), inset 0 0 24px rgba(var(--cyan-rgb),0.05);
	clip-path: var(--cut-corners);
	border-radius: var(--r-md);
	text-align: center;
}
.preloader-bird-wrap {
	position: relative;
	width: 110px; height: 110px;
	margin: 0 auto 14px;
	display: grid; place-items: center;
}
#preloader-bird {
	width: 96px; height: 96px;
	object-fit: contain;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 18px rgba(var(--cyan-rgb),0.28));
	animation: preBirdFloat 1.6s infinite ease-in-out;
}
#preloader-bird-fallback {
	display: none;
	font-size: 4rem;
	line-height: 1;
	text-shadow: 0 0 16px rgba(var(--cyan-rgb),0.35);
	animation: preBirdFloat 1.6s infinite ease-in-out;
}
#preloader-title {
	font-family: var(--F);
	font-size: clamp(2rem, 7vw, 3.2rem);
	letter-spacing: 5px;
	color: var(--cyan);
	text-shadow: 0 0 18px rgba(var(--cyan-rgb),0.45);
}
#preloader-subtitle {
	font-size: 0.68rem;
	letter-spacing: 4px;
	color: rgba(255,255,255,0.66);
	margin-top: 4px;
}
.preloader-bar {
	position: relative;
	height: 12px;
	margin-top: 18px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(var(--cyan-rgb),0.16);
	border-radius: var(--r-sm);
	overflow: hidden;
}
#preloader-bar-fill {
	height: 100%; width: 0%;
	background: linear-gradient(90deg, #00ffff, #f7931a, #ffd700);
	box-shadow: 0 0 18px rgba(var(--cyan-rgb),0.35);
	transition: width 0.16s ease;
}
.preloader-dots {
	display: none; 
	justify-content: center; 
	gap: 10px;
	margin-top: 16px;
}
.preloader-dots span {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 10px rgba(var(--cyan-rgb),0.4);
	animation: preDot 1s infinite ease-in-out;
}
.preloader-dots span:nth-child(2) { animation-delay: 0.15s; }
.preloader-dots span:nth-child(3) { animation-delay: 0.3s; }
.preloader-dots span:nth-child(4) { animation-delay: 0.45s; }
#preloader-meta {
	margin-top: 10px;
	font-size: 0.64rem;
	letter-spacing: 5px;
	color: rgba(255,255,255,0.5);
}
@keyframes preDot {
	0%,100% { transform: translateY(0); opacity: 0.45; }
	50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes preBirdFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

body {
	background: #010208; /* deep fallback — bg-layer covers this */
	overflow: hidden;
	font-family: var(--FD);
	user-select: none;
	-webkit-user-select: none;
}

#preloader-title,
#preloader-subtitle,
#preloader-meta,
.pause-text,
.pause-hint,
.user-sats,
.mobile-header-title,
#candles-label,
.pu-label,
#hint,
#tlabel,
.ticker-link,
.gsub,
.mtext,
.menu-hint,
.era-subtitle,
.era-nav-hint,
.screen-title,
.score-tab,
.score-season,
.score-empty,
.profile-beta-badge,
.profile-account-row small,
.profile-grid small,
.profile-view-all,
.shop-balance,
.shop-tab,
.shop-year,
.shop-name,
.shop-status,
.daily-day,
.daily-tag,
.daily-reward-status,
.settings-subtitle,
.settings-label,
.settings-note,
.modal-title,
.result-title,
.result-subtitle,
.result-meta,
.rtitle,
.lock-badge,
.lcandles,
.lbest,
.text-link {
	text-transform: uppercase;
}

body.app-loading #bg-layer,
body.app-loading #bg-floor-block,
body.app-loading #bg-overlay,
body.app-loading #c,
body.app-loading #fx,
body.app-loading #ui,
body.app-loading #elon-overlay,
body.app-loading #rekt-overlay,
body.app-loading #win-overlay,
body.app-loading #pause-overlay {
	visibility: hidden;
}

body.app-loading #preloader {
	visibility: visible;
}

/* Canvas must be above bg layers but below UI */
#c {
	display: block; width: 100vw; height: 100vh;
	position: relative; z-index: 3;
	transition: filter 0.45s ease;
}

/* ── CRT + Vignette overlay ── */
#fx {
	position: fixed; inset: 0;
	pointer-events: none; z-index: 900;
	background:
		radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.68) 100%),
		repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(var(--cyan-rgb),0.006) 3px, rgba(var(--cyan-rgb),0.006) 4px);
}

/* ── Elon slow-mo overlay ── */
#elon-overlay {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(29, 161, 242, 0.09);
	border: 2px solid rgba(29,161,242,0.35);
	pointer-events: none;
	animation: elonPulse 0.6s ease-in-out infinite alternate;
}
@keyframes elonPulse {
	from { opacity: 0.6; }
	to   { opacity: 1; }
}

/* ── Pause overlay ── */
#pause-overlay {
	position: fixed; inset: 0; z-index: 940;
	background: rgba(0,0,8,0.82);
	backdrop-filter: blur(8px);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	pointer-events: all;
}
.pause-text {
	font-family: var(--F);
	font-size: clamp(5rem,16vw,14vh);
	color: var(--cyan);
	text-shadow: 0 0 40px var(--cyan), 0 0 80px rgba(var(--cyan-rgb),0.3);
	letter-spacing: 14px;
}
.pause-hint {
	font-size: 0.6rem; color: rgba(255,255,255,0.35);
	letter-spacing: 5px; margin-top: 16px;
}

/* ══════════════════════════════════════════════
   GTA "WASTED" — REKT OVERLAY
══════════════════════════════════════════════ */
#rekt-overlay {
	position: fixed; inset: 0; z-index: 960;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	pointer-events: none;
	opacity: 0;
	background: transparent;
}

#rekt-overlay.active {
	pointer-events: all;
	animation: rektBg 0.55s ease-out forwards, rektShake 0.38s ease-in-out 2;
}

@keyframes rektBg {
	0%   { opacity: 0; background: transparent; }
	40%  { background: rgba(90,0,0,0.4); }
	100% { opacity: 1; background: rgba(4,0,0,0.78); }
}

@keyframes rektShake {
	0%   { transform: translate3d(0, 0, 0); }
	20%  { transform: translate3d(-12px, 2px, 0); }
	40%  { transform: translate3d(11px, -3px, 0); }
	60%  { transform: translate3d(-9px, 1px, 0); }
	80%  { transform: translate3d(7px, -2px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

#rekt-word {
	font-family: var(--F);
	font-size: clamp(6rem, 22vw, 20vh);
	line-height: 0.88;
	color: #ff4400;
	letter-spacing: 0.06em;
	text-shadow:
		6px  0   0 rgba(var(--cyan-rgb),0.6),
		-6px 0   0 rgba(255,0,128,0.6),
		0    0 120px rgba(255,68,0,0.45),
		0    0  40px rgba(255,68,0,0.7);
	opacity: 0;
	transform: translateY(-90px) scale(1.35);
	filter: blur(16px);
}

#rekt-overlay.active #rekt-word {
	animation: rektDrop 0.52s 0.28s cubic-bezier(0.12, 0.95, 0.22, 1.06) forwards;
}

@keyframes rektDrop {
	0%   { opacity: 0; transform: translateY(-90px) scale(1.35); filter: blur(16px); }
	55%  { opacity: 1; filter: blur(0); transform: translateY(10px) scale(0.95); }
	75%  { transform: translateY(-5px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

#rekt-sub {
	font-family: var(--FD);
	font-size: clamp(0.7rem, 2.4vw, 1.3rem);
	color: #ff8800;
	letter-spacing: 7px;
	margin-top: 14px;
	text-shadow: 0 0 20px #ff8800;
	opacity: 0;
	text-transform: uppercase;
}

#rekt-overlay.active #rekt-sub {
	animation: rektSub 0.38s 0.9s ease-out forwards;
}

#win-overlay {
	position: fixed; inset: 0; z-index: 960;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	pointer-events: none;
	opacity: 0;
	background: transparent;
}

#win-overlay.active {
	pointer-events: all;
	animation: winBg 0.62s ease-out forwards, winPulse 0.5s ease-in-out 2;
}

@keyframes winBg {
	0%   { opacity: 0; background: transparent; }
	40%  { background: rgba(90,0,0,0.4); }
	100% { opacity: 1; background: rgba(4,0,0,0.78); }
}

@keyframes winPulse {
	0%, 100% { transform: translate3d(0,0,0) scale(1); }
	45% { transform: translate3d(0,-4px,0) scale(1.012); }
}

#win-word {
	font-family: var(--F);
	font-size: clamp(6rem, 22vw, 20vh);
	line-height: 0.88;
	color: var(--gold);
	letter-spacing: 0.06em;
	text-shadow:
		5px 0 0 rgba(var(--cyan-rgb),0.55),
		-5px 0 0 rgba(var(--orange-rgb),0.6),
		0 0 120px rgba(255,215,0,0.45),
		0 0 42px rgba(255,215,0,0.76);
	opacity: 0;
	transform: translateY(85px) scale(0.72);
	filter: blur(14px);
}

#win-overlay.active #win-word {
	animation: winLift 0.58s 0.2s cubic-bezier(0.12, 0.95, 0.22, 1.06) forwards;
}

@keyframes winLift {
	0%   { opacity: 0; transform: translateY(85px) scale(0.72); filter: blur(14px); }
	58%  { opacity: 1; transform: translateY(-8px) scale(1.05); filter: blur(0); }
	78%  { transform: translateY(4px) scale(0.99); }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

#win-sub {
	font-family: var(--FD);
	font-size: clamp(0.7rem, 2.4vw, 1.3rem);
	color: var(--green);
	letter-spacing: 7px;
	margin-top: 14px;
	text-shadow: 0 0 20px rgba(0,255,136,0.66);
	opacity: 0;
	text-transform: uppercase;
}

#win-overlay.active #win-sub {
	animation: rektSub 0.38s 0.88s ease-out forwards;
}

@keyframes rektSub {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════
   MAIN UI
══════════════════════════════════════════════ */
#ui { position: fixed; inset: 0; z-index: 930; pointer-events: none; }

/* ── HUD panel glass background ── */
.hud-panel {
	background: rgba(255,255,255,0.05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 2px solid rgba(var(--white-rgb),0.1);
	padding: 8px 14px;
	border-radius: var(--r-md);
}

.hud-trans { 
	background: transparent; 
	border: none;
	padding: 0;
}

/* ── HUD ── */
#hud {
	position: absolute; top: 0; left: 0; right: 0;
	display: flex; justify-content: space-between; align-items: flex-start;
	padding: 12px 18px;
	gap: 12px;
	pointer-events: none;
}

#hud-left { flex-shrink: 0; }

#price {
	display: inline-flex;
	align-items: center;
	gap: 0px;
	font-family: var(--F);
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 600;
	color: var(--orange);
	text-shadow: 0 0 22px var(--orange), 0 0 50px rgba(var(--orange-rgb),0.4);
	letter-spacing: 3px;
	line-height: 1;
}
#price small,
#dprice small {
	font-size: 0.7em;
	line-height: 1;
	position: relative;
	top: -0.06em;
}
#dprice .b {
	font-size: clamp(1.35rem, 4vw, 1.7rem);
	position: relative;
	top: -0.06em;
}
.b {
	width: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--orange);
	font-size: clamp(1.35rem, 4vw, 2.2rem);
	font-family: var(--FD);
	line-height: 1;
}
.b img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

#lvlname {
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--accent);
	text-shadow: 0 0 8px var(--accent);
	letter-spacing: 5px;
	margin-top: 4px;
}

/* Center: ABSOLUTELY positioned so it's truly centered */
#hud-center {
	position: absolute;
	left: 50%; top: 12px;
	transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center;
	white-space: nowrap;
}
#candles-label {
	font-size: 0.55rem;
	color: rgba(255,255,255,0.35);
	letter-spacing: 4px;
	margin-bottom: 4px;
}
#candles-count {
	font-family: var(--F);
	font-size: 2.8rem;
	color: #fff;
	letter-spacing: 2px;
	line-height: 1;
	margin: 10px 0 -10px;
}
#sparkline {
	display: block;
	margin-top: 5px;
	filter: drop-shadow(0 0 5px var(--orange));
	padding: 0 0 2px;
}

/* Right HUD */
#hud-right-wrap {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
}

#hud-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	pointer-events: all;
}

/* Pause button */
#pause-btn {
	background: rgba(255,255,255,0.05);
	border: 2px solid rgba(var(--white-rgb),0.1);
	color: var(--cyan);
	font-size: 1.4rem;
	width: 48px; height: 48px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s, border-color 0.15s;
	clip-path: var(--cut-corners-sm);
	border-radius: var(--r-sm);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
#pause-btn:hover { background: rgba(var(--cyan-rgb),0.12); border-color: var(--cyan); }

#pause-btn i {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	font-size: 1.45rem;
}

#pu-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	width: min(260px, 42vw);
	pointer-events: none;
}

.pu-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	background: rgba(2,2,14,0.76);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(var(--cyan-rgb),0.22);
	box-shadow: 0 0 24px rgba(0,0,0,0.34), inset 0 0 20px rgba(var(--cyan-rgb),0.04);
	clip-path: var(--cut-corners-sm);
	border-radius: var(--r-sm);
}

.pu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 1rem;
	line-height: 1;
	filter: drop-shadow(0 0 10px rgba(var(--cyan-rgb),0.35));
}

.pu-icon i {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	font-size: 1.25rem;
}

.pu-label {
	min-width: 0;
	font-size: 0.62rem;
	color: rgba(255,255,255,0.9);
	letter-spacing: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pu-time {
	font-family: var(--F);
	font-size: 1.05rem;
	line-height: 1;
	letter-spacing: 2px;
	color: var(--gold);
	text-shadow: 0 0 12px currentColor;
}

#pu-shield {
	border-color: rgba(var(--orange-rgb),0.34);
	box-shadow: 0 0 24px rgba(var(--orange-rgb),0.16), inset 0 0 20px rgba(var(--orange-rgb),0.05);
}

#pu-shield .pu-icon,
#pu-shield .pu-time {
	color: var(--orange);
}

#pu-elon {
	border-color: rgba(29,161,242,0.35);
	box-shadow: 0 0 24px rgba(29,161,242,0.16), inset 0 0 20px rgba(29,161,242,0.05);
}

#pu-elon .pu-icon,
#pu-elon .pu-time {
	color: var(--blue);
}

#pu-xp {
	border-color: rgba(255,102,255,0.35);
	box-shadow: 0 0 24px rgba(255,102,255,0.16), inset 0 0 20px rgba(255,102,255,0.05);
}

#pu-xp .pu-icon,
#pu-xp .pu-time {
	color: #ff66ff;
}

#pu-triple {
	border-color: rgba(255,215,0,0.38);
	box-shadow: 0 0 24px rgba(255,215,0,0.18), inset 0 0 20px rgba(255,215,0,0.06);
}

#pu-triple .pu-icon,
#pu-triple .pu-time {
	color: var(--gold);
}

#pu-display {
	font-family: var(--F);
	font-size: 1.4rem;
	letter-spacing: 3px;
	text-shadow: 0 0 14px currentColor;
	animation: puPulse 0.7s ease-in-out infinite alternate;
}
@keyframes puPulse {
	from { opacity: 0.7; }
	to   { opacity: 1; }
}
#pu-timer {
	font-size: 0.6rem;
	letter-spacing: 3px;
	color: rgba(255,255,255,0.5);
	margin-top: 2px;
}

@media (max-width: 720px) {
	#pu-panel {
		width: min(220px, 58vw);
	}

	.pu-item {
		padding: 8px 10px;
		gap: 8px;
	}

	.pu-label {
		font-size: 0.54rem;
		letter-spacing: 2px;
	}

	.pu-time {
		font-size: 0.92rem;
	}
}

/* ── Start hint ── */
#hint {
	position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
	font-family: var(--FD); font-size: 0.78rem;
	background: rgba(2,2,14,0.6);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.1);
	padding: 8px 20px;
	color: rgba(255,255,255,0.45); letter-spacing: 6px;
	text-align: center; white-space: nowrap;
	animation: hintPulse 1.1s ease-in-out infinite alternate;
}
@keyframes hintPulse {
	from { opacity: 0.25; }
	to   { opacity: 0.9; }
}

/* ── News Ticker — individual items ── */
#ticker {
	position: absolute; bottom: 0; left: 0; right: 0;
	z-index: 120;
	height: 32px; background: rgba(0,0,0,0.85);
	border-top: 1px solid rgba(var(--cyan-rgb),0.18);
	display: flex; align-items: center; overflow: hidden;
	pointer-events: all;
}
#tlabel {
	order: 1;
	border-top: 2px solid var(--orange);
	background: var(--black); 
	color: var(--orange);
	font-family: var(--F); font-size: 0.7rem;
	padding: 0 14px; height: 100%;
	display: flex; align-items: center;
	letter-spacing: 3px; flex-shrink: 0;
}

body[data-screen="menu"] #tlabel,
body[data-screen="menu"] #tick-wrap {
	display: none;
}
#tick-wrap {
	order: 2;
	flex: 1; overflow: hidden;
	display: flex; align-items: center;
	padding: 0 16px;
}
#tick {
	color: var(--cyan);
	font-size: 0.7rem;
	letter-spacing: 1.5px;
	white-space: nowrap;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
#tick.fading {
	opacity: 0;
	transform: translateY(6px);
}

.ticker-links {
	order: 3;
	flex: 1 1 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	padding: 0 8px;
	background: rgba(0,0,0,0.34);
	min-width: 0;
}

.ticker-legal,
.ticker-socials {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.ticker-socials {
	justify-content: flex-end;
}

.ticker-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: rgba(255,255,255,0.58);
	font-family: var(--FD);
	font-size: 0.5rem;
	letter-spacing: 1.5px;
	padding: 0 7px;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
}

.ticker-link:hover,
.ticker-link:focus-visible {
	color: var(--cyan);
	background: rgba(var(--cyan-rgb),0.1);
	box-shadow: 0 0 16px rgba(var(--cyan-rgb),0.16);
	outline: none;
}

.ticker-social {
	color: rgba(var(--orange-rgb),0.78);
}

body[data-screen="game"] #ticker .ticker-links {
	display: none;
}

/* ══════════════════════════════════════════════
   SCREENS
══════════════════════════════════════════════ */
.screen {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(3,3,18,0.6);
	pointer-events: all;
}

.hidden {
	display: none !important;
}

/* shared screen title */
.screen-title {
	font-family: var(--F);
	font-size: clamp(2.5rem, 7vw, 5rem);
	color: var(--cyan);
	text-shadow: 0 0 20px var(--cyan);
	letter-spacing: 6px;
	margin-bottom: 6px;
	position: relative;
	z-index: 2;
	text-transform: uppercase;
}

/* ── Menu backdrop (frosted glass panel) ── */
.menu-backdrop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(640px, 90vw);
	min-height: 380px;
	padding: 20px 40px 20px;
	background: rgba(3,3,18,0.78);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(var(--cyan-rgb),0.30);
	box-shadow: 0 0 60px rgba(0,0,0,0.6), inset 0 0 80px rgba(var(--cyan-rgb),0.02);
	pointer-events: none;
	z-index: 0;

	/* Diagonal cut corners */
	clip-path: var(--cut-corners);
	border-radius: var(--r-md);
}

#levels .menu-backdrop {  width: min(1080px, 94vw); }

#dead .menu-backdrop {  width: min(820px, 92vw); }

.menu-backdrop > * {
	pointer-events: auto;
}

/* ── MENU ── */
#menu { background: rgba(3,3,18,0.6); }
#menu > * { position: relative; z-index: 2; }

.menu-symbol {
	font-family: var(--F);
	font-size: clamp(4rem, 12vw, 10vh);
	color: transparent;
	-webkit-text-stroke: 2px rgba(var(--orange-rgb),0.4);
	text-shadow: 0 0 80px rgba(var(--orange-rgb),0.2);
	line-height: 1; margin-bottom: -0.12em;
	pointer-events: none;
}

.gtitle {
	width: 80%;
	display: flex;
  align-items: center;
  justify-content: center;
	font-family: var(--F);
	font-size: clamp(4.5rem, 12vw, 11vh);
	color: var(--orange);
	text-shadow:
		0 0 40px var(--orange),
		0 0 100px rgba(var(--orange-rgb),0.3),
		0 0 200px rgba(var(--orange-rgb),0.12);
	letter-spacing: 12px;
	line-height: 0.88;
	text-align: center;
	margin-bottom: 6px;
}

.gtitle img {
	width: 100%; height: auto; object-fit: cover; display: block;
}

.gsub {
	font-family: var(--FD);
	font-size: clamp(0.5rem, 1.4vw, 0.82rem);
	color: var(--cyan);
	text-shadow: 0 0 12px var(--cyan);
	letter-spacing: 7px;
	margin: 20px 0 32px;
}

#profile-bar {
	position: fixed;
	top: 14px;
	right: 18px;
	z-index: 720;
	pointer-events: all;
}

.mobile-menu-header {
	display: none;
}

.user-chip,
.user-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(2,2,14,0.72);
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	box-shadow: 0 0 24px rgba(0,0,0,0.34), inset 0 0 20px rgba(var(--cyan-rgb),0.04);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: var(--r-md);
}

.user-chip {
	padding: 8px 12px;
	cursor: pointer;
	max-width: min(300px, calc(100vw - 36px));
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease, transform 0.16s ease;
}

.user-chip:hover,
.user-chip:focus-visible,
.mobile-user:hover,
.mobile-user:focus-visible {
	border-color: rgba(var(--orange-rgb),0.7);
	background: rgba(var(--orange-rgb),0.10);
	box-shadow: 0 0 28px rgba(var(--orange-rgb),0.22), inset 0 0 20px rgba(var(--orange-rgb),0.06);
	outline: none;
}

.user-chip:active,
.mobile-user:active,
.quick-btn:active,
.mobile-back-btn:active {
	transform: translateY(1px) scale(0.98);
	filter: brightness(0.94);
}

.mobile-back-btn:hover,
.mobile-back-btn:focus-visible {
	border-color: rgba(var(--cyan-rgb),0.82);
	background: rgba(var(--cyan-rgb),0.12);
	box-shadow: 0 0 24px rgba(var(--cyan-rgb),0.26);
	outline: none;
}

.mobile-back-btn:active {
	background: rgba(var(--orange-rgb),0.16);
	border-color: rgba(var(--orange-rgb),0.72);
	color: var(--orange);
}

.user-card {
	width: min(360px, 100%);
	padding: 10px 14px;
	margin: 0 0 8px;
}

.user-avatar {
	width: 38px;
	height: 38px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid rgba(var(--orange-rgb),0.62);
	background: rgba(var(--orange-rgb),0.12);
	box-shadow: 0 0 16px rgba(var(--orange-rgb),0.24);
	image-rendering: pixelated;
}

.user-avatar.large {
	width: 52px;
	height: 52px;
}

.user-avatar.huge {
	width: 92px;
	height: 92px;
	margin-bottom: 8px;
}

.user-meta {
	min-width: 0;
	max-width: 100%;
}

.user-name,
.profile-name {
	font-family: var(--F);
	font-size: 1.25rem;
	line-height: 0.9;
	letter-spacing: 3px;
	color: var(--white);
}

.user-chip .user-meta,
.mobile-user .user-meta {
	overflow: hidden;
}

.user-chip .user-name,
.mobile-user .user-name,
.user-chip .user-sats,
.mobile-user .user-sats {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-chip .user-name {
	max-width: 156px;
}

.mobile-user .user-name {
	max-width: 92px;
}

.user-sats,
.shop-balance,
.wallet-note {
	font-family: var(--FD);
	font-size: 0.62rem;
	letter-spacing: 3px;
	color: var(--gold);
	text-shadow: 0 0 10px rgba(255,215,0,0.35);
	margin-top: 4px;
}

#menu-quick-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 2px;
}

.quick-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	cursor: pointer;
	border: 1px solid rgba(var(--cyan-rgb),0.5);
	color: var(--cyan);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.12), transparent 42%),
		rgba(2,2,14,0.78);
	border-radius: var(--r-sm);
	box-shadow: 0 12px 24px rgba(0,0,0,0.28), 0 0 18px rgba(var(--cyan-rgb),0.12);
	transition:
		transform 0.16s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		background 0.18s ease,
		box-shadow 0.22s ease,
		filter 0.18s ease;
}

.quick-btn svg,
.quick-btn i {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	font-size: 1.65rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 8px currentColor);
	transition: transform 0.18s ease, filter 0.18s ease;
}

.quick-btn:hover,
.quick-btn:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(var(--orange-rgb),0.82);
	color: #fff7d0;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.18), transparent 44%),
		linear-gradient(135deg, rgba(var(--cyan-rgb),0.18), rgba(var(--orange-rgb),0.24)),
		rgba(2,2,14,0.88);
	box-shadow:
		0 16px 30px rgba(0,0,0,0.34),
		0 0 28px rgba(var(--orange-rgb),0.26),
		inset 0 0 22px rgba(var(--cyan-rgb),0.07);
	outline: none;
}

.quick-btn:hover i,
.quick-btn:focus-visible i,
.quick-btn:hover svg,
.quick-btn:focus-visible svg {
	transform: scale(1.08);
	filter: drop-shadow(0 0 12px currentColor);
}

.sl-icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sats-price {
	display: inline-flex;
	align-items: center;
	justify-content: inherit;
	gap: 0.34em;
	white-space: nowrap;
}

.sats-label {
	color: inherit;
	opacity: 0.78;
}

.sat-icon {
	width: auto;
	height: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.88em;
	color: var(--orange);
}

.shop-buy.btn.primary:not(:disabled) .sat-icon,
.score-unlock.btn.primary:not(:disabled) .sat-icon {
	color: #fff7d0;
	filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
}

.quick-btn::after {
	content: attr(data-title);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translate(-50%, 8px);
	padding: 6px 10px;
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	background: rgba(0,0,10,0.92);
	border-radius: var(--r-sm);
	color: var(--white);
	font-family: var(--FD);
	font-size: 0.55rem;
	letter-spacing: 2px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.quick-btn:hover::after,
.quick-btn:focus-visible::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

body[data-screen="profile"] .quick-btn[aria-label="Profile"],
body[data-screen="shop"] .quick-btn[aria-label="Shop"],
body[data-screen="rewards"] .quick-btn[aria-label="Daily Rewards"],
body[data-screen="settings"] .quick-btn[aria-label="Settings"] {
	border-color: rgba(var(--orange-rgb),0.88);
	color: #fff7d0;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.18), transparent 44%),
		linear-gradient(135deg, rgba(255,213,111,0.42), rgba(var(--orange-rgb),0.74) 58%, rgba(78,31,0,0.92));
	box-shadow: 0 0 30px rgba(var(--orange-rgb),0.30);
}

/* Menu items – rectangle with diagonal cut corners */
#menu-items { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 0; }

.mitem {
	font-family: var(--F);
	font-size: clamp(2.2rem, 5vw, 3.8rem);
	color: rgba(255,255,255,0.6);
	letter-spacing: 8px;
	cursor: pointer;
	margin: 2px;
	padding: 6px 44px;
	line-height: 1.2;
	transition: color 0.14s, background 0.14s, box-shadow 0.14s;
	position: relative;
	background: rgba(2,2,14,0.0);
	/* Diagonal cut corners via clip-path */
	clip-path: var(--cut-corners);
	border-color: rgba(var(--cyan-rgb),0.30);
	border-style: solid;
	border-width: 1px 1px 3px 1px;
	border-radius: var(--r-xl);
	width: 100%;
	text-align: center;
}
.mitem.active {
	color: var(--orange);
	background: rgba(var(--orange-rgb),0.06);
	text-shadow: 0 0 30px var(--orange), 0 0 70px rgba(var(--orange-rgb),0.3);
	box-shadow: 0 0 24px rgba(var(--orange-rgb),0.15);
	border-color: rgba(var(--orange-rgb),0.45);
}
.mitem:hover { color: rgba(var(--orange-rgb),0.7); border-color: var(--orange-rgb); filter:brightness(1.2); }

.menu-hint {
	font-size: 0.58rem; color: rgba(255,255,255,0.2);
	letter-spacing: 4px; margin-top: 32px;
}

/* ══════════════════════════════════════════════
   ERA SELECT
══════════════════════════════════════════════ */
.era-subtitle {
	font-family: var(--FD);
	font-size: 0.62rem; color: var(--cyan);
	letter-spacing: 5px; margin-bottom: 28px;
	opacity: 0.7;
	position: relative; z-index: 2;
}

.era-container {
	display: flex; align-items: center; gap: 10px;
	width: 100%; max-width: 90vw;
	padding: 0 10px;
	position: relative; z-index: 2;
}

.era-track-wrap {
	flex: 1; overflow: hidden;
	/* Fade edges */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 78%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 78%, transparent 100%);
}

#lgrid {
	display: flex; flex-direction: row;
	gap: 14px;
	padding: 40px 24px 40px 64px;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.lcard {
	flex-shrink: 0;
	width: 200px;
	border: 1px solid rgba(var(--cyan-rgb),0.22);
	background: rgba(2,2,14,0.7);
	cursor: pointer; pointer-events: all;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.3s;
	clip-path: var(--cut-corners);
	border-radius: var(--r-md);
	opacity: 0.55;
	transform: scale(0.94);
	overlay: none;
	text-align: center;
}
.lcard:hover {
	border-color: rgba(var(--cyan-rgb),0.55);
	outline: 1px solid rgba(var(--cyan-rgb),0.4);
	transform: scale(0.97) translateY(-3px);
	opacity: 0.8;
}
.lcard.selected {
	border-color: var(--orange);
	box-shadow: 0 0 28px rgba(var(--orange-rgb),0.35), inset 0 0 20px rgba(var(--orange-rgb),0.06);
	opacity: 1;
	transform: scale(1.0);
}
.lcard.selected:hover {
	outline: 2px solid rgba(var(--orange-rgb),0.4);
	opacity: 1;
}

.lcard-img {
	width: 100%; height: clamp(130px, 22vh, 220px);
	background-size: cover; background-position: center;
	background-color: rgba(10,10,30,0.8);
	position: relative;
	overflow: hidden;
	border-radius: var(--r-sm);
}
.lcard-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(2,2,14,0.85) 0%,
		rgba(2,2,14,0.25) 25%,
		rgba(2,2,14,0.15) 55%,
		rgba(2,2,14,0.05) 100%
	);
	pointer-events: none;
	z-index: 1;
}
.lcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fallback gradient per era (shown when image not found) */
.lcard[data-year="2013"] .lcard-img { background-color: #0d1b35; background-image: linear-gradient(160deg, #0a1628 0%, #1a4a6e 60%, #0d3a5c 100%); }
.lcard[data-year="2017"] .lcard-img { background-color: #1a0a00; background-image: linear-gradient(160deg, #1a0800 0%, #5a2000 60%, #3a1000 100%); }
.lcard[data-year="2018"] .lcard-img { background-color: #001a0d; background-image: linear-gradient(160deg, #001208 0%, #003520 60%, #001a0d 100%); }
.lcard[data-year="2021"] .lcard-img { background-color: #10001a; background-image: linear-gradient(160deg, #0a0018 0%, #3a0060 60%, #200040 100%); }
.lcard[data-year="2022"] .lcard-img { background-color: #1a0000; background-image: linear-gradient(160deg, #1a0000 0%, #500000 60%, #350000 100%); }
.lcard[data-year="2024"] .lcard-img { background-color: #100800; background-image: linear-gradient(160deg, #0a0500 0%, #3a2800 60%, #1a1200 100%); }

.lcard-info { padding: 10px 12px 14px; }
.lyear {
	font-family: var(--F);
	font-size: 3rem; color: var(--orange);
	text-shadow: 0 0 12px var(--orange); line-height: 1;
}
.lcard.selected .lyear { text-shadow: 0 0 20px var(--orange), 0 0 40px rgba(var(--orange-rgb),0.4); }
.lname { font-size: 0.72rem; color: var(--white); margin-top: 3px; letter-spacing: 1.5px; }
.ldiff { font-size: 1.10rem; color: rgba(255,255,255,0.25); margin-top: 3px; }
.lcandles { font-size: 0.65rem; color: var(--cyan); margin-top: 5px; letter-spacing: 1px; }
.lbest { font-size: 0.55rem; color: var(--gold); margin-top: 5px; letter-spacing: 1px; }
 
.era-arrow {
	background: rgba(2,2,14,0.7);
	border: 1px solid rgba(var(--cyan-rgb),0.3);
	color: var(--cyan);
	font-size: 2.5rem;
	width: 48px; height: 80px;
	cursor: pointer; pointer-events: all;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	flex-shrink: 0;
	clip-path: var(--cut-corners-sm);
	border-radius: var(--r-sm);
	display: none;
}
.era-arrow:hover { background: rgba(var(--cyan-rgb),0.1); border-color: var(--cyan); }

.era-nav-hint {
	font-size: 0.56rem; color: rgba(255,255,255,0.2);
	letter-spacing: 4px; margin: 10px 0 16px;
	position: relative; z-index: 2;
}

/* ── Leaderboard ── */
#scores-list { width: 100%; max-width: 420px; margin-bottom: 24px; position: relative; z-index: 2; }

.score-tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: min(420px, 100%);
	margin: 0 0 8px;
	padding: 4px;
	border: 1px solid rgba(var(--cyan-rgb),0.18);
	border-radius: var(--r-sm);
	background: rgba(0,0,0,0.22);
	position: relative;
	z-index: 2;
}

.score-tab {
	flex: 1 1 0;
	min-height: 34px;
	border: 1px solid transparent;
	border-radius: calc(var(--r-sm) - 2px);
	background: transparent;
	color: rgba(255,255,255,0.58);
	font-family: var(--FD);
	font-size: 0.56rem;
	letter-spacing: 2px;
	cursor: pointer;
}

.score-tab:hover,
.score-tab:focus-visible {
	color: var(--cyan);
	border-color: rgba(var(--cyan-rgb),0.36);
	outline: none;
}

.score-tab.active {
	color: #fff7d0;
	border-color: rgba(var(--orange-rgb),0.72);
	background: rgba(var(--orange-rgb),0.18);
}

.score-season {
	color: var(--cyan);
	text-shadow: 0 0 20px var(--cyan);
	font-family: var(--FD);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 2px;
	min-height: 16px;
	margin: 10px 0 20px;
	text-align: center;
	position: relative;
	z-index: 2;
}
.score-season span {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 2px;
	display: block;
	margin: 6px 0 0;
}

.score-row { display: flex; justify-content: space-between; align-items: stretch; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); gap: 12px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.score-row:hover { background: rgba(var(--cyan-rgb),0.05); border-bottom-color: rgba(var(--cyan-rgb),0.22); }

.score-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.score-rank {
	width: 32px;
	flex: 0 0 32px;
	font-family: var(--F);
	font-size: 1.6rem;
	color: var(--cyan);
	text-align: center;
	border-radius: var(--r-sm);
}

.global-score-row.rank-1 .score-rank {
	color: var(--gold);
	background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(var(--cyan-rgb),0.045)), rgba(0,0,0,0.22);
	text-shadow: 0 0 16px rgba(255,215,0,0.45);
}
.global-score-row.rank-2 .score-rank {
	color: #c9d2dc;
	background: linear-gradient(135deg, rgba(201,210,220,0.12), rgba(var(--cyan-rgb),0.045)), rgba(0,0,0,0.22);
	text-shadow: 0 0 14px rgba(201,210,220,0.36);
}
.global-score-row.rank-3 .score-rank {
	color: #cd7f32;
	background: linear-gradient(135deg, rgba(205,127,50,0.13), rgba(var(--cyan-rgb),0.045)), rgba(0,0,0,0.22);
	text-shadow: 0 0 14px rgba(205,127,50,0.38);
}

.score-avatar {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	overflow: hidden;
	border: 1px solid rgba(var(--orange-rgb),0.46);
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	box-shadow: 0 0 18px rgba(var(--orange-rgb),0.16);
}

.score-avatar img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.score-img { 
	height: 100%; width: 52px; flex-shrink: 0; overflow: hidden; background: rgba(255,255,255,0.05); 
	border: 1px solid rgba(var(--cyan-rgb),0.1);
	box-shadow: 0 0 60px rgba(0,0,0,0.6), inset 0 0 80px rgba(var(--cyan-rgb),0.02);
	clip-path: var(--cut-corners);
	border-radius: var(--r-sm);
}
.score-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.score-text { display: flex; flex-direction: column; justify-content: center; }

.score-year { font-family: var(--F); font-size: 1.8rem; color: var(--orange); letter-spacing: 3px; }
.score-name { font-size: 0.58rem; color: rgba(255,255,255,0.35); letter-spacing: 2px; }
.score-val { font-family: var(--F); font-size: 1.4rem; color: var(--gold); letter-spacing: 2px; display: flex; align-items: center; }

.score-empty {
	padding: 24px 12px;
	color: rgba(255,255,255,0.54);
	font-family: var(--FD);
	font-size: 0.7rem;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}

.score-row.locked {
	opacity: 0.58;
	background: rgba(0,0,0,0.18);
}

.score-row.locked .score-left {
	filter: grayscale(0.7) brightness(0.58);
}

.score-unlock.btn {
	min-height: 34px;
	padding: 6px 10px;
	margin: 0;
	font-size: 0.55rem;
	letter-spacing: 2px;
}

.compact-backdrop {
	width: min(720px, 92vw);
	min-height: auto;
}

.profile-card {
	display: flex;
	align-items: center;
	width: min(720px, 100%);
	flex-direction: column;
	align-items: stretch;
	padding: 0 12px;
	text-align: left;
	gap: 18px;
	
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--cyan-rgb),0.45) rgba(255,255,255,0.04);
}

.profile-hero {
	display: grid;
	grid-template-columns: 156px minmax(0, 1fr);
	align-items: center;
	gap: clamp(18px, 4vw, 32px);
	border: 1px solid rgba(var(--cyan-rgb),0.24);
	border-radius: var(--r-sm);
	background: rgba(0,0,0,0.18);
	padding: 12px;
}

.profile-avatar-btn {
	width: 156px;
	height: 156px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(var(--orange-rgb),0.6);
	border-radius: var(--r-sm);
	background: linear-gradient(135deg, rgba(var(--orange-rgb),0.12), rgba(var(--cyan-rgb),0.045)), rgba(0,0,0,0.22);
	cursor: pointer;
	box-shadow:
		0 0 22px rgba(var(--orange-rgb),0.22),
		0 0 30px rgba(var(--cyan-rgb),0.08),
		inset 0 0 18px rgba(255,255,255,0.04);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.16s ease;
}

.profile-avatar-btn:hover,
.profile-avatar-btn:focus-visible {
	border-color: rgba(var(--orange-rgb),0.95);
	box-shadow:
		0 0 34px rgba(var(--orange-rgb),0.36),
		0 0 28px rgba(var(--cyan-rgb),0.16);
	outline: none;
}

.profile-avatar-btn:active {
	transform: scale(0.98);
}

.profile-avatar-btn .user-avatar.huge {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: var(--r-sm);
	object-fit: cover;
}

.profile-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.profile-name-input {
	width: 100%;
	min-width: 0;
	border: 1px solid rgba(var(--orange-rgb),0.0);
	border-radius: var(--r-sm);
	background: transparent;
	padding: 7px 4px 5px;
	font-family: var(--F);
	font-size: clamp(2.4rem, 7vw, 4.1rem);
	line-height: 0.9;
	letter-spacing: 3px;
	color: var(--white);
	text-shadow: 0 0 20px rgba(var(--cyan-rgb),0.22), 0 0 10px rgba(255,255,255,0.16);
	outline: none;
}

.profile-name-input:hover {
	border: 1px solid rgba(var(--orange-rgb),0.46);
}

.profile-name-input:focus {
	border-color: var(--orange);
	color: var(--white);
	text-shadow: 0 0 24px rgba(var(--cyan-rgb),0.34), 0 0 14px rgba(255,255,255,0.2);
}

.profile-name-input[aria-invalid="true"],
.auth-input[aria-invalid="true"] {
	color: var(--red);
	border-color: var(--red); 
	box-shadow: 0 0 18px rgba(255,51,85,0.26);
	text-shadow: 0 0 18px rgba(255,51,85,0.28);
}

.profile-beta-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 8px 14px 6px;
	border: 1px solid rgba(var(--orange-rgb),0.72);
	border-radius: 999px;
	background: rgba(var(--orange-rgb),0.09);
	box-shadow: 0 0 20px rgba(var(--orange-rgb),0.22), inset 0 0 16px rgba(var(--orange-rgb),0.06);
	color: var(--gold);
	font-family: var(--FD);
	font-size: 0.68rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.profile-beta-badge span {
	color: var(--gold);
	text-shadow: 0 0 12px rgba(var(--orange-rgb),0.58);
}

.profile-name-error {
	min-height: 18px;
	color: var(--red);
	font-family: var(--FD);
	font-size: 0.52rem;
	line-height: 1.25;
	letter-spacing: 1px;
}

.profile-auth-status {
	display: none;
}

.profile-account-panel {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 12px;
	border: 1px solid rgba(var(--cyan-rgb),0.24);
	border-radius: var(--r-sm);
	background: rgba(0,0,0,0.18);
	box-sizing: border-box;
	align-items: stretch;
}

.profile-account-row {
	min-height: 0;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: var(--r-sm);
	/* border: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.22); */
	box-sizing: border-box;
}

.profile-account-icon {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	color: var(--cyan);
	font-family: var(--F);
	font-size: 2.2rem;
	/* border: 1px solid rgba(var(--cyan-rgb),0.32);
	background: rgba(var(--cyan-rgb),0.07);
	box-shadow: inset 0 0 14px rgba(var(--cyan-rgb),0.05); */
}

.profile-account-icon.wallet-icon {
	color: #b76cff;
	text-shadow: 0 0 10px rgba(183,108,255,0.5), 0 0 10px rgba(var(--cyan-rgb),0.38);
}

.profile-account-row small {
	display: block;
	margin-bottom: 5px;
	color: rgba(255,255,255,0.46);
	font-family: var(--FD);
	font-size: 0.52rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.profile-account-row span {
	display: block;
	overflow: hidden;
	color: var(--white);
	font-family: var(--FD);
	font-size: 0.8rem;
	letter-spacing: 1.4px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#profile-wallet-detail {
	color: var(--orange);
}

.profile-wallet-connect {
	min-height: 34px;
	margin-top: 2px;
	padding-inline: 13px;
}

.profile-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 14px 12px;
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	border-radius: var(--r-sm);
	background: linear-gradient(90deg, rgba(var(--cyan-rgb),0.045), rgba(255,255,255,0.025)), rgba(0,0,0,0.22);
	box-shadow: inset 0 0 20px rgba(var(--cyan-rgb),0.035), 0 0 20px rgba(0,0,0,0.22);
}

.profile-grid div {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "icon label" "icon value";
	align-items: center;
	column-gap: 12px;
	padding: 8px 18px;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.profile-grid div:not(:last-child)::after,
.profile-account-panel div:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	width: 1px;
	height: calc(100% - 16px);
	background: rgba(var(--cyan-rgb),0.1);
}

.profile-grid i {
	grid-area: icon;
	font-style: normal;
	font-size: clamp(1.55rem, 4vw, 2.1rem);
	color: var(--gold);
	text-shadow: 0 0 8px rgba(var(--orange-rgb),0.42);
}

.profile-grid small {
	grid-area: label;
	display: block;
	font-size: 0.56rem;
	letter-spacing: 2px;
	color: rgba(255,255,255,0.52);
}

.profile-grid span {
	grid-area: value;
	font-family: var(--F);
	font-size: clamp(1.7rem, 4vw, 2.55rem);
	color: var(--white);
	line-height: 0.92;
	margin-top: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-badges {
	width: 100%;
	padding: 14px;
	border: 1px solid rgba(var(--cyan-rgb),0.26);
	border-radius: var(--r-sm);
	background:
		linear-gradient(135deg, rgba(var(--cyan-rgb),0.045), rgba(255,255,255,0.02)),
		rgba(0,0,0,0.2);
	box-shadow: inset 0 0 20px rgba(var(--cyan-rgb),0.03);
}

.profile-badges-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin: 12px 0 20px;
}

.profile-badges-head h3 {
	margin: 0;
	color: var(--cyan);
	font-family: var(--FD);
	font-size: 0.78rem;
	letter-spacing: 3px;
	line-height: 1;
}

.profile-view-all {
	border: 0;
	background: transparent;
	color: var(--cyan);
	font-family: var(--FD);
	font-size: 0.58rem;
	letter-spacing: 2px;
	cursor: pointer;
	text-shadow: 0 0 12px rgba(var(--cyan-rgb),0.35);
	text-transform: uppercase;
}

.profile-view-all:hover,
.profile-view-all:focus-visible {
	color: var(--white);
	outline: none;
}

.profile-badge-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--panel-gap);
}

.profile-badge-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 9px;
	min-width: 0;
	padding: 14px 10px 32px;
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	border-radius: var(--r-sm);
	background: radial-gradient(circle at 50% 18%, rgba(var(--cyan-rgb),0.09), transparent 46%), rgba(0,0,0,0.22);
	box-shadow: inset 0 0 16px rgba(var(--cyan-rgb),0.035);
}

.profile-badge-card.locked {
	opacity: 0.58;
	filter: grayscale(0.45);
}

.profile-badge-card.claimed {
	border-color: rgba(var(--cyan-rgb),0.44);
}

.profile-badge-card .btn-sm {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 2;
	max-width: calc(100% - 16px);
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 7px 12px 5px;
	font-size: 0.52rem;
	line-height: 1;
	letter-spacing: 1.8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 9px;
	box-shadow: 0 0 16px rgba(var(--orange-rgb),0.28), 0 6px 18px rgba(0,0,0,0.35);
}
.profile-badge-card .btn-sm:hover,
.profile-badge-card .btn-sm:focus-visible {
	transform: translateX(-50%) translateY(-1px);
}

.profile-badge-card.claim {
	border-color: rgba(var(--orange-rgb),0.68);
	box-shadow: 0 0 24px rgba(var(--orange-rgb),0.2), inset 0 0 16px rgba(var(--orange-rgb),0.055);
}

.badge-icon {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	font-size: 2.6rem;
	filter: drop-shadow(0 0 10px rgba(var(--cyan-rgb),0.24));
}

.voxel-bird,
.voxel-star,
.voxel-miner {
	filter: drop-shadow(0 0 12px rgba(var(--orange-rgb),0.34));
}

.profile-badge-card span {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	color: var(--white);
	font-family: var(--FD);
	font-size: 0.56rem;
	letter-spacing: 2px;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.profile-badge-card small {
	display: -webkit-box;
	max-width: 100%;
	min-width: 0;
	min-height: 30px;
	overflow: hidden;
	color: rgba(255,255,255,0.45);
	font-family: var(--FD);
	font-size: 0.48rem;
	letter-spacing: 1px;
	line-height: 1.25;
	text-align: center;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0 0 10px;
}

.badge-state {
	max-width: 100%;
	overflow: hidden;
	font-family: var(--FD);
	font-size: 0.5rem;
	letter-spacing: 1.6px;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.profile-badge-card.locked .badge-state,
.profile-badge-card.claimed .badge-state {
	min-height: 0;
	margin-top: auto;
	padding: 7px 16px 5px;
	box-shadow: 0 0 14px rgba(var(--cyan-rgb),0.12), 0 6px 18px rgba(0,0,0,0.22);
}

.profile-badge-card.locked .badge-state {
	border-color: rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.035);
	color: rgba(255,255,255,0.38);
}

.badges-list {
	width: min(900px, 100%);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--panel-gap);
	flex: 1 1 auto;
	min-height: 0;
	max-height: min(62vh, 600px);
	overflow-y: auto;
	padding: 2px 4px 8px 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--cyan-rgb),0.45) rgba(255,255,255,0.04);
}

.badge-claim-btn {
	margin-top: 2px;
	padding: 7px 16px 5px;
	border: 1px solid rgba(var(--orange-rgb),0.78);
	background: rgba(var(--orange-rgb),0.12);
	color: var(--gold);
	font-family: var(--FD);
	font-size: 0.55rem;
	letter-spacing: 2px;
	cursor: pointer;
	box-shadow: 0 0 16px rgba(var(--orange-rgb),0.22);
}

.badge-claim-btn:hover,
.badge-claim-btn:focus-visible {
	background: rgba(var(--orange-rgb),0.2);
	box-shadow: 0 0 22px rgba(var(--orange-rgb),0.34);
	outline: none;
}

.profile-actions {
	width: min(520px, 100%);
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 12px;
}

.profile-actions .btn {
	min-width: 0;
}

#shop-topup-btn {
	border-color: rgba(var(--orange-rgb),0.78);
	box-shadow:
		0 0 22px rgba(var(--orange-rgb),0.24),
		inset 0 0 16px rgba(var(--orange-rgb),0.06);
	color: var(--gold);
}


.invite-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-2);
	margin-top: 10px;
}

.invite-input {
	min-width: 0;
	height: var(--control-h);
	padding: 8px 10px;
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	border-radius: var(--r-sm);
	background: rgba(0,0,0,0.28);
	color: var(--white);
	font-family: var(--FD);
	font-size: 0.62rem;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	outline: none;
}

.invite-input:focus {
	border-color: rgba(var(--orange-rgb),0.76);
	box-shadow: 0 0 18px rgba(var(--orange-rgb),0.15);
}

.invite-input[aria-invalid="true"] {
	border-color: rgba(var(--red-rgb),0.7);
	box-shadow: 0 0 16px rgba(var(--red-rgb),0.18);
}

.invite-form .btn {
	min-height: 42px;
	padding: 8px 13px;
	font-size: 0.55rem;
	letter-spacing: 1.8px;
}

.invite-status {
	min-height: 18px;
	margin-top: 8px;
	color: rgba(255,255,255,0.52);
	font-family: var(--FD);
	font-size: 0.52rem;
	letter-spacing: 1.5px;
	text-align: center;
}

.invite-status.is-error {
	color: var(--red);
}

@media (max-width: 560px) {
	.profile-account-meta {
		grid-template-columns: 1fr;
	}
}

.shop-balance {
	margin-bottom: 14px;
	font-size: 0.78rem;
	display: none;
}

.shop-tabs {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: min(760px, 100%);
	margin: 0 0 14px;
	padding: 4px;
	border: 1px solid rgba(var(--cyan-rgb),0.18);
	border-radius: var(--r-sm);
	background: rgba(0,0,0,0.22);
}

.shop-tab {
	flex: 1 1 0;
	min-height: 38px;
	border: 1px solid transparent;
	border-radius: calc(var(--r-sm) - 2px);
	background: transparent;
	color: rgba(255,255,255,0.58);
	font-family: var(--FD);
	font-size: 0.58rem;
	letter-spacing: 2px;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.22s ease;
}

.shop-tab:hover,
.shop-tab:focus-visible {
	color: var(--cyan);
	border-color: rgba(var(--cyan-rgb),0.36);
	outline: none;
}

.shop-tab.active {
	color: #fff7d0;
	border-color: rgba(var(--orange-rgb),0.72);
	background: rgba(var(--orange-rgb),0.18);
	box-shadow: 0 0 18px rgba(var(--orange-rgb),0.18), inset 0 0 18px rgba(var(--orange-rgb),0.06);
}

#shop-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--panel-gap);
	flex: 1 1 auto;
	min-height: 0;
	max-height: min(60vh, 620px);
	margin-bottom: 10px;
	padding-right: 4px;
	overflow-y: auto;
	align-content: start;
	align-items: stretch;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--cyan-rgb),0.45) rgba(255,255,255,0.04);
}

#shop .menu-backdrop {
	width: min(1540px, 94vw);
}

.shop-card {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	align-self: start;
	flex: 0 0 calc((100% - (var(--panel-gap) * 4)) / 5);
	width: 100%;
	height: clamp(300px, 40vh, 320px);
	min-height: 0;
	max-height: none;
	overflow: hidden;
	border: 1px solid rgba(var(--cyan-rgb),0.10);
	border-radius: var(--r-sm);
	background: rgba(255,255,255,0.04);
}
.shop-card.owned {
	border-color: rgba(var(--cyan-rgb),0.18);
}
.shop-card.selected {
	border-color: rgba(var(--orange-rgb),0.58);
	box-shadow: 0 0 24px rgba(var(--orange-rgb),0.18), inset 0 0 22px rgba(var(--orange-rgb),0.05);
}

.shop-thumb {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	background: rgba(0,0,0,0.28);
	overflow: hidden;
}

.shop-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.shop-img {
	opacity: 0;
	transition: opacity 0.16s ease;
}

.shop-img.is-loaded {
	opacity: 1;
}

.shop-icon-thumb {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	background:
		radial-gradient(circle at center, rgba(var(--orange-rgb),0.18), transparent 58%),
		rgba(0,0,0,0.28);
	color: var(--orange);
	font-size: 2.4rem;
	overflow: hidden;
}


.shop-power-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-power-thumb i {
	position: relative;
	z-index: 1;
}

.shop-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.46));
}

.shop-era {
	min-width: 0;
	padding: 12px 12px 4px;
}

.shop-body {
	min-width: 0;
	min-height: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.shop-year {
	font-family: var(--F);
	font-size: clamp(1.28rem, 1.55vw, 1.65rem);
	line-height: 0.9;
	color: var(--orange);
	letter-spacing: clamp(1.8px, 0.18vw, 3px);
	overflow-wrap: anywhere;
}

.shop-name {
	font-size: 0.6rem;
	color: var(--white);
	letter-spacing: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 4px 0 4px;
}

.shop-desc {
	display: -webkit-box;
	font-family: var(--FD);
	font-size: 0.52rem;
	letter-spacing: 2px;
	line-height: 1.35;
	color: rgba(255,255,255,0.38);
	padding: 0 12px 10px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.shop-status {
	font-family: var(--FD);
	font-size: 0.58rem;
	letter-spacing: 2px;
	color: var(--gold);
	white-space: nowrap;
	padding: 0 12px 10px;
}

.shop-buy.btn {
	width: calc(100% - 24px);
	min-height: 42px;
	padding: 8px 10px;
	font-size: 0.58rem;
	letter-spacing: 2px;
	margin: auto 12px 12px;
}

.shop-buy.btn.primary:not(:disabled),
.score-unlock.btn.primary:not(:disabled) {
	border-color: rgba(var(--orange-rgb),0.9);
	color: #fff7d0;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.24), transparent 42%),
		linear-gradient(135deg, rgba(255,213,111,0.54), rgba(var(--orange-rgb),0.9) 52%, rgba(95,39,0,0.98));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.34),
		inset 0 -16px 30px rgba(70,24,0,0.34),
		0 0 24px rgba(var(--orange-rgb),0.28);
}

.shop-buy.btn.primary:not(:disabled):hover,
.shop-buy.btn.primary:not(:disabled):focus-visible,
.score-unlock.btn.primary:not(:disabled):hover,
.score-unlock.btn.primary:not(:disabled):focus-visible {
	filter: brightness(1.1) saturate(1.12);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.38),
		inset 0 -16px 30px rgba(70,24,0,0.28),
		0 0 34px rgba(var(--orange-rgb),0.42);
}

#rewards .menu-backdrop {
	width: min(760px, 94vw);
}

.daily-rewards-list {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	margin: 2px 0 10px;
}

.daily-reward-card {
	min-width: 0;
	min-height: 200px;
	max-height: 240px;
	padding: 10px 7px 9px;
	border: 1px solid rgba(var(--cyan-rgb),0.18);
	border-radius: var(--r-sm);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.08), transparent 48%),
		rgba(255,255,255,0.035);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	box-shadow: inset 0 0 20px rgba(var(--cyan-rgb),0.025);
}

.daily-reward-card.active {
	border-color: rgba(var(--orange-rgb),0.72);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.18), transparent 45%),
		rgba(var(--orange-rgb),0.12);
	box-shadow: 0 0 28px rgba(var(--orange-rgb),0.22), inset 0 0 22px rgba(var(--orange-rgb),0.06);
}

.daily-reward-card.claimed {
	border-color: rgba(0,255,136,0.32);
	background: rgba(0,255,136,0.055);
}

.daily-reward-card.future {
	opacity: 0.48;
	filter: grayscale(0.4);
}

.daily-day,
.daily-tag {
	font-family: var(--FD);
	font-size: 0.52rem;
	letter-spacing: 2px;
	color: rgba(255,255,255,0.5);
}

.daily-icon {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(var(--orange-rgb),0.38);
	color: var(--orange);
	background: rgba(var(--orange-rgb),0.1);
	box-shadow: 0 0 18px rgba(var(--orange-rgb),0.16);
}

.daily-reward-card.claimed .daily-icon {
	border-color: rgba(0,255,136,0.38);
	color: var(--green);
	background: rgba(0,255,136,0.08);
}

.daily-amount {
	font-family: var(--F);
	font-size: clamp(0.86rem, 2vw, 1.1rem);
	line-height: 0.95;
	color: var(--gold);
	text-shadow: 0 0 12px rgba(255,215,0,0.28);
}

.daily-reward-status {
	min-height: 24px;
	margin-top: 2px;
	color: rgba(255,255,255,0.62);
	font-family: var(--FD);
	font-size: 0.62rem;
	line-height: 1.45;
	letter-spacing: 2px;
	text-align: center;
}

.daily-reward-status .sats-price {
	color: var(--gold);
}

.lcard.locked {
	opacity: 0.52;
}

.lcard.locked.selected {
	opacity: 0.88;
	border-color: rgba(var(--gold-rgb, 255,215,0),0.55);
}

.lcard.locked .lcard-dim {
	filter: grayscale(0.75) brightness(0.38);
	opacity: 0.45;
}

.lock-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
	padding: 8px 14px;
	border: 1px solid rgba(255,215,0,0.48);
	border-radius: var(--r-sm);
	background: rgba(0,0,0,0.72);
	color: var(--gold);
	font-family: var(--F);
	font-size: 1.7rem;
	line-height: 0.85;
	letter-spacing: 4px;
	box-shadow: 0 0 18px rgba(255,215,0,0.18);
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(0,0,8,0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.modal-card {
	position: relative;
	width: min(460px, 92vw);
	padding: 24px 20px;
	text-align: center;
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	border-radius: var(--r-md);
	background: rgba(3,3,18,0.9);
	box-shadow: 0 0 60px rgba(0,0,0,0.55), inset 0 0 50px rgba(var(--cyan-rgb),0.04);
}

.modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--cyan);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
}

.modal-close::before {
	content: none;
}

.modal-close i {
	display: block;
	width: 1em;
	height: 1em;
	font-size: 1.15rem;
	line-height: 1;
}

.modal-close:hover,
.modal-close:focus-visible {
	color: var(--cyan);
	background: rgba(var(--cyan-rgb),0.1);
	box-shadow: 0 0 20px rgba(var(--cyan-rgb),0.2);
	outline: none;
}

.panel-icon-btn {
	position: absolute;
	top: 10px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: rgba(var(--cyan-rgb),0.72);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease;
	z-index: 4;
}

.panel-back-btn {
	left: 10px;
}

.panel-icon-btn:hover,
.panel-icon-btn:focus-visible {
	color: var(--cyan);
	background: rgba(var(--cyan-rgb),0.1);
	box-shadow: 0 0 20px rgba(var(--cyan-rgb),0.2);
	outline: none;
}

.modal-title {
	font-family: var(--F);
	font-size: clamp(2rem, 8vw, 3rem);
	line-height: 0.9;
	color: var(--orange);
	letter-spacing: 5px;
	text-shadow: 0 0 18px rgba(var(--orange-rgb),0.35);
	text-transform: uppercase;
}

.modal-copy {
	margin: 14px auto 18px;
	max-width: 36em;
	font-size: 0.72rem;
	line-height: 1.6;
	letter-spacing: 1.8px;
	color: rgba(255,255,255,0.62);
}

.info-card {
	width: min(560px, 92vw);
	max-height: min(760px, 88vh);
	overflow-y: auto;
	text-align: left;
}

.info-card .modal-title {
	text-align: center;
}

.info-copy {
	margin-bottom: 0;
}

.info-copy p {
	margin: 0 0 12px;
}

.info-copy p:last-child {
	margin-bottom: 0;
}

.access-gate {
	z-index: 995;
}

.menu-backdrop,
#scores-list,
#shop-list,
#daily-rewards-list,
.badges-list,
.settings-panel,
.info-card {
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--cyan-rgb),0.45) rgba(255,255,255,0.04);
}

.menu-backdrop::-webkit-scrollbar,
#scores-list::-webkit-scrollbar,
#shop-list::-webkit-scrollbar,
#daily-rewards-list::-webkit-scrollbar,
.badges-list::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar,
.info-card::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.menu-backdrop::-webkit-scrollbar-track,
#scores-list::-webkit-scrollbar-track,
#shop-list::-webkit-scrollbar-track,
#daily-rewards-list::-webkit-scrollbar-track,
.badges-list::-webkit-scrollbar-track,
.settings-panel::-webkit-scrollbar-track,
.info-card::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.04);
	border-radius: 999px;
}

.menu-backdrop::-webkit-scrollbar-thumb,
#scores-list::-webkit-scrollbar-thumb,
#shop-list::-webkit-scrollbar-thumb,
#daily-rewards-list::-webkit-scrollbar-thumb,
.badges-list::-webkit-scrollbar-thumb,
.settings-panel::-webkit-scrollbar-thumb,
.info-card::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(var(--cyan-rgb),0.55), rgba(var(--orange-rgb),0.42));
	border-radius: 999px;
}

.access-card {
	width: min(430px, 92vw);
}

.access-input {
	width: 100%;
	min-height: 52px;
	margin: 0 0 10px;
	padding: 10px 14px;
	border: 1px solid rgba(var(--cyan-rgb),0.32);
	border-radius: var(--r-sm);
	background: rgba(0,0,0,0.34);
	color: var(--white);
	font-family: var(--FD);
	font-size: 0.86rem;
	letter-spacing: 2px;
	text-align: center;
	outline: none;
}

.access-input:focus {
	border-color: rgba(var(--orange-rgb),0.78);
	box-shadow: 0 0 24px rgba(var(--orange-rgb),0.18);
}

.access-error {
	min-height: 20px;
	margin-bottom: 10px;
	color: var(--red);
	font-family: var(--FD);
	font-size: 0.6rem;
	letter-spacing: 2px;
	text-align: center;
}

.auth-card {
	width: min(500px, 92vw);
}

.auth-input {
	text-transform: none;
	letter-spacing: 1px;
}

.auth-dynamic-row {
	margin-bottom: 12px;
}

.auth-dynamic-row .btn {
	width: 100%;
}

.auth-actions {
	margin-top: 8px;
	gap: 8px;
}

.auth-actions .btn {
	flex: 1 1 150px;
	min-width: 130px;
}

.topup-card {
	width: min(560px, 92vw);
}

.topup-balance {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin: 0 auto 14px;
	padding: 6px 14px;
	border: 1px solid rgba(var(--orange-rgb),0.35);
	border-radius: var(--r-sm);
	background: rgba(var(--orange-rgb),0.08);
	color: var(--gold);
	font-family: var(--FD);
	font-size: 0.68rem;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.topup-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--panel-gap);
	margin: 4px 0 18px;
}

.topup-pack {
	min-width: 0;
	min-height: 118px;
	padding: 14px 10px;
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	border-radius: var(--r-sm);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.08), transparent 48%),
		rgba(0,0,0,0.24);
	color: var(--white);
	font-family: var(--FD);
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease, transform 0.16s ease;
}

.topup-pack span,
.topup-pack strong {
	display: block;
	text-transform: uppercase;
}

.topup-pack span {
	color: rgba(255,255,255,0.48);
	font-size: 0.54rem;
	letter-spacing: 2px;
}

.topup-pack strong {
	margin-top: 14px;
	color: var(--gold);
	font-size: 1.05rem;
	letter-spacing: 2px;
}

.topup-pack:hover,
.topup-pack:focus-visible {
	border-color: rgba(var(--orange-rgb),0.76);
	background: rgba(var(--orange-rgb),0.1);
	box-shadow: 0 0 24px rgba(var(--orange-rgb),0.2);
	outline: none;
	transform: translateY(-1px);
}

.topup-actions {
	margin-top: 6px;
}

.auth-resend {
	min-height: 22px;
	margin: -2px 0 10px;
	text-align: center;
}

.auth-error {
	color: rgba(255,255,255,0.62);
}

.auth-error.is-error {
	color: var(--red);
}

.text-link {
	border: 0;
	background: transparent;
	color: var(--cyan);
	font-family: var(--FD);
	font-size: 0.58rem;
	letter-spacing: 2px;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
	transition: color 0.18s ease, opacity 0.18s ease, text-shadow 0.18s ease;
}

.text-link:hover,
.text-link:focus-visible {
	color: var(--orange);
	text-shadow: 0 0 12px rgba(var(--orange-rgb),0.36);
	outline: none;
}

.text-link:disabled {
	cursor: default;
	color: rgba(255,255,255,0.42);
	text-decoration: none;
	text-shadow: none;
	opacity: 0.8;
}

/* ── DEAD SCREEN ── */
#dead { animation: none; }
#dead.fade-in { animation: screenFade 0.4s ease-out forwards; }
@keyframes screenFade {
	from { opacity: 0; } to { opacity: 1; }
}

.dstat {
	display: none;
	font-size: 0.72rem; color: rgba(255,255,255,0.35);
	letter-spacing: 4px; margin: 4px 0;
	text-align: center;
}
#dmsg.dstat { font-size: 0.92rem; font-weight: 700; }

.result-title {
	font-family: var(--F);
	font-size: clamp(3.2rem, 10vw, 6rem);
	font-weight: 600;
	line-height: 0.82;
	letter-spacing: 8px;
	text-align: center;
	text-shadow: 0 0 30px currentColor;
}

.result-win-title {
	color: var(--gold);
}

.result-loss-title {
	color: var(--red);
}

.result-subtitle {
	max-width: 100%;
	margin: 8px 0 18px;
	color: var(--white);
	font-family: var(--FD);
	font-size: 1.1rem;
	letter-spacing: 5px;
	text-align: center;
	text-transform: uppercase;
}

.result-cards {
	width: min(720px, 100%);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 20px 0 14px;
}

.result-actions {
	width: min(720px, 100%);
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 12px;
}

.result-actions .btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 10px;
	font-size: 0.66rem;
	letter-spacing: 2px;
	gap: 7px;
}

.result-card {
	min-width: 0;
	padding: 14px 12px;
	border: 1px solid rgba(var(--cyan-rgb),0.28);
	border-radius: var(--r-sm);
	background: radial-gradient(circle at 50% 18%, rgba(var(--cyan-rgb),0.09), transparent 46%), rgba(0,0,0,0.22);
	box-shadow: inset 0 0 16px rgba(var(--cyan-rgb),0.035);

	text-align: center;
	display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-card .rtitle {
	display: block;
	margin-bottom: 8px;
	color: rgba(255,255,255,0.42);
	font-family: var(--FD);
	font-size: 0.54rem;
	letter-spacing: 2px;
}

.result-card strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	max-width: 100%;
	color: var(--gold);
	font-family: var(--F);
	font-size: clamp(1.4rem, 4vw, 2.2rem);
	line-height: 0.9;
	text-shadow: 0 0 16px currentColor;
}

.result-card strong .b {
	width: 0.9em;
	height: 0.9em;
}

.result-meta {
	margin: 2px 0 10px;
	color: rgba(255,255,255,0.48);
	font-family: var(--FD);
	font-size: 0.62rem;
	letter-spacing: 3px;
	text-align: center;
}

.result-meta span {
	color: var(--accent);
}

#dnewbest {
	font-family: var(--F); font-size: 1.5rem;
	color: var(--gold); letter-spacing: 5px;
	text-shadow: 0 0 20px var(--gold);
	margin: 10px 0;
	text-transform: uppercase;
}
#wnewbest {
	font-family: var(--F); font-size: 1.5rem;
	color: var(--gold); letter-spacing: 5px;
	text-shadow: 0 0 20px var(--gold);
	margin: 0 0 20px;
	text-transform: uppercase;
}

/* ── WIN SCREEN ── */
#win { background: rgba(3,3,18,0.6); backdrop-filter: blur(10px); }
.whodl {
	font-family: var(--F);
	font-size: clamp(1.5rem, 4vw, 3rem);
	color: var(--gold); letter-spacing: 8px;
	text-shadow: 0 0 25px var(--gold); margin-bottom: 4px;
}
#wyear { font-size: 0.7rem; color: var(--accent); letter-spacing: 6px; margin-bottom: 10px; }
#wgain {
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	text-shadow: 0 0 12px currentColor;
}
.wera-sub { font-size: 0.65rem; color: rgba(255,255,255,0.3); letter-spacing: 4px; margin-bottom: 20px; }

/* #levels and #scores relative children need z-index */
#levels > *, #scores > * { position: relative; z-index: 2; }


/* ══════════════════════════════════════════════
   SETTINGS
══════════════════════════════════════════════ */
#settings .menu-backdrop { width: min(700px, 90vw); }
.settings-subtitle {
  font-family: var(--FD);
  font-size: 0.62rem;
  color: var(--cyan);
  letter-spacing: 5px;
  margin-bottom: 24px;
  opacity: 0.78;
  position: relative;
  z-index: 2;
}
.settings-panel {
  width: min(520px, 100%);
  padding: 14px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.8);
  font-family: var(--FD);
  letter-spacing: 3px;
}
.settings-label { font-size: 0.72rem; color: rgba(255,255,255,0.8); }
.settings-value { font-size: 0.72rem; color: var(--orange); text-shadow: 0 0 8px var(--orange); }
#settings-volume {
  --volume-pct: 84%;
  width: 100%;
  height: 24px;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
#settings-volume::-webkit-slider-runnable-track {
  height: 12px;
  border: 1px solid rgba(var(--cyan-rgb),0.28);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(var(--orange-rgb),0.88) 0 var(--volume-pct), rgba(255,255,255,0.08) var(--volume-pct) 100%);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.55), 0 0 18px rgba(var(--cyan-rgb),0.08);
}
#settings-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -7px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff7c9 0 12%, var(--orange) 34%, #7a3700 100%);
  box-shadow: 0 0 18px rgba(var(--orange-rgb),0.55), 0 0 0 5px rgba(var(--orange-rgb),0.12);
  transition: transform 0.16s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
#settings-volume:hover::-webkit-slider-thumb,
#settings-volume:focus-visible::-webkit-slider-thumb {
  transform: scale(1.08);
  filter: brightness(1.08);
  box-shadow: 0 0 24px rgba(var(--orange-rgb),0.68), 0 0 0 7px rgba(var(--orange-rgb),0.14);
}
#settings-volume:active::-webkit-slider-thumb {
  transform: scale(0.96);
}
#settings-volume::-moz-range-track {
  height: 12px;
  border: 1px solid rgba(var(--cyan-rgb),0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.55), 0 0 18px rgba(var(--cyan-rgb),0.08);
}
#settings-volume::-moz-range-progress {
  height: 12px;
  border-radius: 999px;
  background: rgba(var(--orange-rgb),0.88);
}
#settings-volume::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px rgba(var(--orange-rgb),0.55), 0 0 0 5px rgba(var(--orange-rgb),0.12);
  transition: transform 0.16s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.settings-note {
  font-family: var(--FD);
  font-size: 0.58rem;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-top: -2px;
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent; 
	font-family: var(--FD); font-size: 0.78rem;
	letter-spacing: 5px; padding: 16px 30px;
	cursor: pointer; text-transform: uppercase;
	pointer-events: all; margin: 5px;
	transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
	clip-path: var(--cut-corners);
	border-style: solid;
	border-width: 1px 1px 3px 1px;
	border-radius: var(--r-sm);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(1px);  }

.btn.primary {
	border-color: var(--orange); color: var(--orange);
	text-shadow: 0 0 8px var(--orange);
	box-shadow: 0 0 18px rgba(var(--orange-rgb),0.2);
}
.btn.primary:hover {
	background: rgba(var(--orange-rgb),0.1);
	box-shadow: 0 0 30px rgba(var(--orange-rgb),0.45);
}
.btn.secondary {
	border-color: rgba(0,255,255,0.5); color: var(--cyan);
	text-shadow: 0 0 8px var(--cyan);
	box-shadow: 0 0 12px rgba(0,255,255,0.1);
}
.btn.secondary:hover {
	background: rgba(var(--cyan-rgb),0.07);
	box-shadow: 0 0 25px rgba(var(--cyan-rgb),0.35);
}
.btn.danger {
	border-color: rgba(255,51,85,0.72);
	color: var(--red);
	text-shadow: 0 0 8px rgba(255,51,85,0.62);
	box-shadow: 0 0 16px rgba(255,51,85,0.16);
}
.btn.danger:hover {
	background: rgba(255,51,85,0.10);
	box-shadow: 0 0 26px rgba(255,51,85,0.34);
}
.btn.active {
	border-color: var(--gold);
	color: var(--gold);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.22), transparent 46%),
		linear-gradient(135deg, rgba(255,213,111,0.54), rgba(var(--orange-rgb),0.84) 56%, rgba(78,31,0,0.96));
	text-shadow: 0 0 10px rgba(255,215,0,0.55);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.28),
		0 0 26px rgba(var(--orange-rgb),0.32);
}

/* ── Score popup ── */
.popup {
	position: absolute; font-family: var(--F);
	font-size: 1.5rem; pointer-events: none;
	letter-spacing: 3px;
	background: rgba(0,0,0,0.45);
	padding: 2px 10px;
	animation: floatUp var(--popup-duration, 0.95s) ease-out forwards;
	white-space: nowrap;
}
@keyframes floatUp {
	0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
	72% { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-70px) scale(0.8); }
}

/* ── Power-up pickup flash ── */
.pu-flash { animation: puFlash 0.35s ease-out; }
@keyframes puFlash {
	0%   { filter: none; }
	50%  { filter: brightness(3) saturate(2); }
	100% { filter: none; }
}

/* UI polish and responsive safeguards */
.screen {
	padding: clamp(10px, 2vh, 24px) clamp(8px, 2vw, 24px);
}

.menu-backdrop {
	position: relative;
	max-height: 90vh;
	min-height: min(380px, calc(90vh - 20px));
	overflow-x: hidden;
	overflow-y: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--cyan-rgb),0.45) rgba(255,255,255,0.04);
	transform-origin: center;
}

.menu-backdrop::-webkit-scrollbar {
	width: 8px;
}

.menu-backdrop::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.04);
	border-radius: 999px;
}

.menu-backdrop::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(var(--cyan-rgb),0.55), rgba(var(--orange-rgb),0.42));
	border-radius: 999px;
}

.menu-backdrop::before {
	content: none;
}

#levels .menu-backdrop {
	width: min(1080px, 94vw);
	min-height: auto;
	padding-top: clamp(14px, 2.4vh, 26px);
	padding-bottom: clamp(14px, 2.4vh, 26px);
	overflow-y: hidden;
}

#scores .menu-backdrop,
#profile .menu-backdrop,
#badges .menu-backdrop,
#shop .menu-backdrop,
#rewards .menu-backdrop,
#settings .menu-backdrop {
	justify-content: flex-start;
	max-height: min(92vh, 860px);
	overflow-y: hidden;
}

#scores .menu-backdrop,
#badges .menu-backdrop,
#shop .menu-backdrop,
#rewards .menu-backdrop,
#settings .menu-backdrop {
	height: min(760px, 92vh);
	min-height: min(520px, 92vh);
}

#rewards .menu-backdrop {
	height: auto;
	min-height: auto;
}

#levels .screen-title {
	font-size: clamp(2.1rem, 7vh, 4.5rem);
	line-height: 0.9;
	margin-bottom: 2px;
}

#levels .era-subtitle {
	margin-bottom: clamp(8px, 1.8vh, 20px);
}

#levels #lgrid {
	padding-top: clamp(14px, 3vh, 32px);
	padding-bottom: clamp(14px, 3vh, 32px);
}

#levels .era-nav-hint {
	margin: clamp(4px, 1vh, 10px) 0 clamp(8px, 1.4vh, 14px);
}

#levels .lcard-img {
	height: clamp(118px, 22vh, 210px);
}

#scores .menu-backdrop {
	min-height: auto;
	padding-top: clamp(16px, 3vh, 28px);
	padding-bottom: clamp(16px, 3vh, 28px);
	overflow-y: hidden;
}

#scores .screen-title {
	font-size: clamp(2.1rem, 7vh, 4.5rem);
	line-height: 0.9;
	margin-bottom: clamp(4px, 1.3vh, 12px);
}

#scores-list {
	margin-bottom: clamp(10px, 2vh, 20px);
}

#scores-list,
#shop-list,
#daily-rewards-list,
.settings-panel {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--cyan-rgb),0.45) rgba(255,255,255,0.04);
}

#scores-list::-webkit-scrollbar,
#shop-list::-webkit-scrollbar,
#daily-rewards-list::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar {
	width: 8px;
}

#scores-list::-webkit-scrollbar-track,
#shop-list::-webkit-scrollbar-track,
#daily-rewards-list::-webkit-scrollbar-track,
.settings-panel::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.04);
	border-radius: 999px;
}

#scores-list::-webkit-scrollbar-thumb,
#shop-list::-webkit-scrollbar-thumb,
#daily-rewards-list::-webkit-scrollbar-thumb,
.settings-panel::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(var(--cyan-rgb),0.55), rgba(var(--orange-rgb),0.42));
	border-radius: 999px;
}

#scores .score-row {
	padding-top: clamp(7px, 1.2vh, 10px);
	padding-bottom: clamp(7px, 1.2vh, 10px);
}

#scores .score-year {
	font-size: clamp(1.35rem, 3.8vh, 1.8rem);
	line-height: 0.9;
}

#scores .score-name {
	font-size: clamp(0.5rem, 1.4vh, 0.58rem);
}

#dead .menu-backdrop,
#win .menu-backdrop {
	width: min(820px, 92vw);
}

.menu-actions {
	display: flex;
	flex: 0 0 auto;
	gap: var(--space-2);
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin-top: 18px;
	max-width: 100%;
}

#dead .menu-actions {
	margin-top: 22px;
}

button,
.btn,
.mitem,
.lcard,
.score-row {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.btn,
#pause-btn,
.era-arrow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	outline: none;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	max-width: 100%;
	white-space: nowrap;
	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.22s ease,
		filter 0.18s ease,
		transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn.btn-sm {
	min-height: 0;
	height: auto;
	padding: 7px 14px 5px;
	font-size: 0.52rem;
	line-height: 1;
	letter-spacing: 1.8px;
	border-radius: var(--r-sm);
}

.btn::before,
#pause-btn::before,
.era-arrow::before {
	content: '';
	position: absolute;
	inset: -45% -70%;
	z-index: -1;
	background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
	transform: translateX(-70%) rotate(8deg);
	opacity: 0;
	transition: transform 0.52s ease, opacity 0.2s ease;
}

.btn:hover,
#pause-btn:hover,
.era-arrow:hover {
	filter: brightness(1.12) saturate(1.12);
}

.btn:hover::before,
#pause-btn:hover::before,
.era-arrow:hover::before {
	opacity: 1;
	transform: translateX(70%) rotate(8deg);
}

.btn:active,
#pause-btn:active,
.era-arrow:active {
	transform: translateY(2px) scale(0.985);
	filter: brightness(0.95) saturate(1.2);
}

.btn:focus-visible,
#pause-btn:focus-visible,
.era-arrow:focus-visible,
.mitem:focus-visible,
.lcard:focus-visible,
.score-row:focus-visible,
#settings-volume:focus-visible {
	outline: 2px solid rgba(255,255,255,0.82);
	outline-offset: 4px;
	box-shadow:
		0 0 0 4px rgba(var(--cyan-rgb),0.18),
		0 0 34px rgba(var(--cyan-rgb),0.36);
}

.btn:disabled,
#pause-btn:disabled,
.era-arrow:disabled {
	cursor: default;
	opacity: 0.42;
	filter: grayscale(0.35);
	transform: none;
	box-shadow: none;
}

.btn:disabled::before,
#pause-btn:disabled::before,
.era-arrow:disabled::before {
	display: none;
}

.btn.primary:active {
	box-shadow: 0 0 18px rgba(var(--orange-rgb),0.25), inset 0 0 18px rgba(var(--orange-rgb),0.18);
}

.btn.secondary:active,
.era-arrow:active,
#pause-btn:active {
	box-shadow: 0 0 18px rgba(var(--cyan-rgb),0.22), inset 0 0 18px rgba(var(--cyan-rgb),0.16);
}

#pause-btn {
	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.22s ease,
		filter 0.18s ease,
		transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#pause-btn:hover {
	box-shadow: 0 0 26px rgba(var(--cyan-rgb),0.28);
}

.mitem {
	outline: none;
	overflow: hidden;
	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.24s ease,
		filter 0.18s ease,
		transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mitem::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(var(--orange-rgb),0.12), transparent);
	opacity: 0;
	transform: translateX(-45%);
	transition: opacity 0.2s ease, transform 0.34s ease;
}

.mitem:hover,
.mitem:focus-visible {
	transform: translateY(-1px);
	color: rgba(var(--orange-rgb),0.86);
	border-color: rgba(var(--orange-rgb),0.58);
}

.mitem:hover::before,
.mitem:focus-visible::before,
.mitem.active::before {
	opacity: 1;
	transform: translateX(0);
}

.mitem:active {
	transform: translateY(1px) scale(0.99);
	filter: brightness(0.95);
}

.mitem.active {
	animation: activeMenuGlow 2.4s ease-in-out infinite;
}

.lcard {
	position: relative;
	outline: none;
	overflow: hidden;
	transition:
		border-color 0.24s ease,
		box-shadow 0.28s ease,
		filter 0.18s ease,
		transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.28s ease;
}

.lcard::before {
	content: '';
	position: absolute;
	inset: 1px;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.12) 48%, transparent 72%);
	opacity: 0;
	transform: translateX(-120%) skewX(-12deg);
	transition: opacity 0.22s ease, transform 0.5s ease;
}

.lcard:hover::before,
.lcard:focus-visible::before {
	opacity: 1;
	transform: translateX(120%) skewX(-12deg);
}

.lcard:active {
	transform: scale(0.96) translateY(1px);
}

.lcard.selected {
	animation: selectedEraPulse 2.8s ease-in-out infinite;
}

.score-row {
	outline: none;
	border-radius: var(--r-sm);
}

.score-row:active {
	background: rgba(var(--cyan-rgb),0.09);
	transform: translateY(1px);
}

#settings-volume {
	cursor: pointer;
}

@keyframes activeMenuGlow {
	0%, 100% { box-shadow: 0 0 24px rgba(var(--orange-rgb),0.15); }
	50% { box-shadow: 0 0 34px rgba(var(--orange-rgb),0.28), inset 0 0 18px rgba(var(--orange-rgb),0.06); }
}

@keyframes selectedEraPulse {
	0%, 100% { box-shadow: 0 0 28px rgba(var(--orange-rgb),0.35), inset 0 0 20px rgba(var(--orange-rgb),0.06); }
	50% { box-shadow: 0 0 42px rgba(var(--orange-rgb),0.48), inset 0 0 26px rgba(var(--orange-rgb),0.1); }
}

@media (max-width: 980px) {
	#hud {
		padding: 10px 12px;
	}

	#shop-list {
		display: flex;
		flex-wrap: wrap;
	}

	.shop-card {
		flex-basis: calc((100% - (var(--panel-gap) * 2)) / 3);
	}

	#levels .menu-backdrop {
		width: min(920px, 96vw);
	}

	.era-container {
		gap: 8px;
		padding: 0;
	}

	.lcard {
		width: clamp(158px, 24vw, 190px);
	}

	.lcard-img {
		height: clamp(160px, 28vh, 210px);
	}
}

@media (max-width: 720px) {
	html,
	body {
		height: 100%;
		overflow: hidden;
	}

	#bg-layer {
		background-size: cover;
	}

	.screen {
		align-items: stretch;
		justify-content: flex-start;
		height: 100vh;
		height: 100dvh;
		min-height: 100vh;
		min-height: 100dvh;
		overflow: hidden;
		padding: 0;
	}

	#profile-bar {
		display: none;
	}

	.mobile-menu-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 955;
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		align-items: center;
		gap: 8px;
		min-height: 64px;
		padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
		background: rgba(2,2,14,0.88);
		border-bottom: 1px solid rgba(var(--cyan-rgb),0.22);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		pointer-events: all;
	}

	.mobile-back-btn {
		width: 44px;
		height: 44px;
		display: grid;
		place-items: center;
		border: 1px solid rgba(var(--cyan-rgb),0.34);
		border-radius: var(--r-sm);
		background: rgba(255,255,255,0.04);
		color: var(--cyan);
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease, color 0.18s ease, transform 0.16s ease, filter 0.16s ease;
	}

	.mobile-menu-header.has-back .mobile-back-btn {
		opacity: 1;
		pointer-events: all;
	}

.mobile-back-btn svg,
.mobile-back-btn i {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	font-size: 1.55rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

	.mobile-header-title {
		display: none;
	}

	.mobile-user {
		grid-column: 2;
		justify-self: end;
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		max-width: 172px;
		padding: 5px 7px;
		border: 1px solid rgba(var(--orange-rgb),0.28);
		border-radius: var(--r-sm);
		background: rgba(0,0,0,0.22);
		cursor: pointer;
		transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.22s ease, transform 0.16s ease;
	}

	.user-chip {
		padding: 6px 8px;
		gap: 8px;
	}

	.user-chip .user-name {
		display: none;
	}

	.user-sats {
		font-size: 0.54rem;
		letter-spacing: 2px;
	}

	.user-card {
		width: 100%;
	}

	.menu-backdrop {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		min-height: 100vh;
		min-height: 100dvh;
		max-height: none;
		padding: calc(78px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		overflow-y: auto;
		justify-content: flex-start;
		scrollbar-width: none;
	}

	.menu-backdrop::-webkit-scrollbar {
		display: none;
	}

	#levels .menu-backdrop,
	#scores .menu-backdrop,
	#profile .menu-backdrop,
	#badges .menu-backdrop,
	#shop .menu-backdrop,
	#rewards .menu-backdrop,
	#settings .menu-backdrop,
	#dead .menu-backdrop,
	#win .menu-backdrop {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		overflow-y: auto;
	}

	.screen:not(#menu) .menu-actions {
		position: sticky;
		bottom: 0;
		z-index: 8;
		width: calc(100% + 36px);
		margin: auto -18px calc(-18px - env(safe-area-inset-bottom, 0px));
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
		background: rgba(2,2,14,0.9);
		border-top: 1px solid rgba(var(--cyan-rgb),0.18);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}

	#levels .era-backdrop > .btn.secondary {
		display: none;
	}

	.screen-title {
		display: block;
		font-size: clamp(2.05rem, 11vw, 3.2rem);
		line-height: 0.9;
		margin: 24px 0 12px;
		letter-spacing: 6px;
	}

	.gtitle {
		width: min(340px, 86vw);
	}

	.gsub,
	.era-subtitle,
	.era-nav-hint,
	.menu-hint,
	.settings-subtitle {
		letter-spacing: 3px;
		text-align: center;
	}

	#menu-items {
		width: 100%;
		padding: 20px 0;
	}

	#menu-quick-actions {
		gap: 9px;
	}

	.quick-btn {
		width: 48px;
		height: 48px;
	}

	.topup-grid {
		grid-template-columns: 1fr;
	}

	#shop-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 10px;
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
		padding-bottom: 8px;
	}

	#daily-rewards-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-bottom: 8px;
	}

	.shop-tabs {
		width: 100%;
		gap: 5px;
		margin-bottom: 10px;
		overflow-x: auto;
		justify-content: flex-start;
	}

	.shop-tab {
		flex: 0 0 auto;
		min-width: 82px;
		padding: 0 10px;
	}

	.shop-card {
		position: relative;
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr) minmax(86px, auto);
		grid-template-rows: auto;
		align-items: stretch;
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		min-height: 104px;
		max-height: none;
	}

	.shop-thumb {
		width: 96px;
		height: 96px;
		aspect-ratio: 1 / 1;
		min-height: 0;
		grid-row: 1;
	}

	.shop-icon-thumb {
		width: 96px;
		height: 96px;
		aspect-ratio: 1 / 1;
		min-height: 0;
	}

	.shop-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
		min-width: 0;
		padding: 12px 10px;
	}

	.shop-era {
		padding: 0;
	}
	
	.shop-desc {
		padding: 0 !important;
	}

	.shop-year {
		font-size: 1.45rem;
	}

	.shop-name {
		white-space: normal;
		line-height: 1.25;
	}

	.shop-status {
		white-space: normal;
		padding: 5px 0 0;
		font-size: 0.52rem;
	}

	.shop-buy.btn {
		align-self: center;
		width: auto;
		min-width: 78px;
		max-width: 96px;
		min-height: 42px;
		margin: 12px 10px 12px 0;
		padding: 8px 8px;
		white-space: normal;
		line-height: 1.15;
	}

	.profile-card {
		align-items: center;
		text-align: center;
		gap: 12px;
		padding: 0 0 30px;
	}

	.profile-account-panel {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.profile-account-row {
		text-align: left;
	}

	.profile-avatar-btn {
		width: 100%;
		height: 100%;
	}

	.profile-avatar-btn .user-avatar.huge {
		width: 100%;
		height: 100%;
	}

	.profile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 7px;
	}

	.profile-grid div {
		padding: 10px 6px;
	}

	.profile-grid small {
		font-size: 0.46rem;
		letter-spacing: 1px;
	}

	.profile-grid span {
		font-size: clamp(1rem, 5vw, 1.35rem);
		letter-spacing: 1px;
	}

	.result-cards {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.result-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		text-align: left;
		padding: 12px 14px;
	}
	
	.result-card .rtitle {
		margin-bottom: 0;
	}
	.result-card small {
		margin-bottom: 0;
	}

	.result-card strong {
		font-size: 1.45rem;
	}

	.mitem {
		font-size: clamp(1.9rem, 10vw, 3rem);
		letter-spacing: 5px;
		padding: 6px 18px;
	}

	.era-arrow {
		width: 40px;
		height: 68px;
		font-size: 2rem;
	}

	#lgrid {
		gap: 10px;
		padding: 28px 18px 30px 44px;
	}

	.lcard {
		width: clamp(150px, 58vw, 186px);
	}

	.menu-actions {
		width: 100%;
	}

	.btn {
		flex: 1 1 190px;
		min-width: min(100%, 40px);
		padding: 14px 18px;
		letter-spacing: 3px;
	}

	#levels .era-backdrop > .btn.secondary {
		flex: 0 0 auto;
		min-width: 0;
		min-height: 42px;
		padding: 9px 16px;
	}
}

@media (max-width: 520px) {
	#shop-list {
		display: flex;
		flex-wrap: wrap;
	}

	.shop-card {
		flex-basis: calc((100% - var(--panel-gap)) / 2);
	}

	#hud {
		align-items: flex-start;
		padding: 8px;
	}

	#hud-left,
	#hud-center {
		padding: 7px 9px;
	}

	#hud-center {
		top: 74px;
	}

	#price {
		font-size: clamp(1.5rem, 9vw, 2.2rem);
	}

	.b {
		width: 32px;
	}

	#candles-count {
		font-size: 2rem;
		margin: 6px 0 -8px;
	}

	#sparkline {
		width: 132px;
		height: 34px;
	}

	#pause-btn {
		width: 42px;
		height: 42px;
		font-size: 1.2rem;
	}

	#ticker {
		height: 38px;
	}

	#tlabel {
		padding: 0 10px;
		letter-spacing: 2px;
	}

	#tick {
		font-size: 0.62rem;
	}

	.ticker-links {
		padding: 0 5px;
		overflow-x: auto;
	}

	.ticker-link {
		flex: 0 0 auto;
		height: 28px;
		font-size: 0.45rem;
		letter-spacing: 1px;
		padding: 0 5px;
	}

	.menu-backdrop {
		max-height: 90vh;
		min-height: auto;
		padding: 18px 14px;
	}

	.era-container {
		gap: 5px;
	}

	.era-track-wrap {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
	}

	.era-arrow {
		width: 34px;
		height: 58px;
	}

	#levels .era-backdrop > .btn.secondary {
		min-height: 38px;
		padding: 8px 13px;
		font-size: 0.68rem;
		letter-spacing: 2px;
	}

	#lgrid {
		padding: 22px 12px 24px 34px;
	}

	.lcard {
		width: min(68vw, 168px);
	}

	.lcard-img {
		height: 150px;
	}

	.score-row {
		padding: 9px 8px;
	}

	.score-img {
		width: 44px;
	}

	.score-val {
		font-size: 1.1rem;
	}
}

@media (max-height: 720px) {
	.menu-backdrop {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.gtitle {
		width: min(300px, 70vw);
	}

	.gsub {
		margin: 12px 0 14px;
	}

	#menu-items {
		padding: 14px 0;
		gap: 6px;
	}

	.mitem {
		font-size: clamp(1.8rem, 7vh, 3rem);
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.screen-title {
		font-size: clamp(2rem, 8vh, 4rem);
	}

	.era-subtitle {
		margin-bottom: 12px;
	}

	#lgrid {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.lcard-img {
		height: clamp(120px, 26vh, 180px);
	}

	.lcard-info {
		padding-top: 7px;
		padding-bottom: 9px;
	}

	#levels .menu-backdrop,
	#scores .menu-backdrop {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#levels .screen-title,
	#scores .screen-title {
		font-size: clamp(1.9rem, 7vh, 3.2rem);
	}

	#levels .era-subtitle {
		margin-bottom: 6px;
	}

	#levels #lgrid {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#levels .lcard-img {
		height: clamp(96px, 18vh, 142px);
	}

	#levels .lcard-info {
		padding-top: 6px;
		padding-bottom: 7px;
	}

	#levels .lyear {
		font-size: 2.45rem;
	}

	#levels .ldiff {
		font-size: 0.92rem;
	}

	#levels .lcandles,
	#levels .lbest {
		margin-top: 3px;
	}

	#scores-list {
		margin-bottom: 10px;
	}

	#scores .score-row {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	#scores .score-img {
		width: 44px;
	}
}

@media (max-height: 620px) {
	#levels .era-subtitle,
	#levels .era-nav-hint {
		display: none;
	}

	#levels .screen-title,
	#scores .screen-title {
		font-size: clamp(1.7rem, 6.5vh, 2.5rem);
		margin-bottom: 4px;
	}

	#levels .era-container {
		margin-top: 2px;
	}

	#levels #lgrid {
		padding-top: 6px;
		padding-bottom: 7px;
	}

	#levels .lcard-img {
		height: clamp(78px, 16vh, 104px);
	}

	#levels .lcard-info {
		padding-top: 4px;
		padding-bottom: 5px;
	}

	#levels .lyear {
		font-size: 2.05rem;
	}

	#levels .lname,
	#levels .lcandles,
	#levels .lbest {
		font-size: 0.52rem;
	}

	#levels .ldiff {
		font-size: 0.78rem;
	}

	#levels .era-backdrop > .btn.secondary {
		min-height: 34px;
		padding: 6px 12px;
	}

	#scores .score-row {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	#scores .score-year {
		font-size: 1.18rem;
	}

	#scores .score-img {
		width: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

/* Homepage liquid-glass action buttons */
#menu-items {
	width: min(460px, 100%);
	gap: 12px;
	padding: 22px 0;
}

.mitem {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: center;
	min-height: 66px;
	padding: 7px 18px 8px 18px;
	margin: 0;
	color: rgba(222, 252, 255, 0.92);
	letter-spacing: 6px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%),
		linear-gradient(135deg, rgba(var(--cyan-rgb),0.32), rgba(5,18,38,0.86) 58%, rgba(0,9,20,0.96));
	border-color: rgba(var(--cyan-rgb),0.62);
	border-width: 1px 1px 4px;
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.24),
		inset 0 -18px 34px rgba(0,0,0,0.34),
		0 12px 24px rgba(0,0,0,0.32),
		0 0 22px rgba(var(--cyan-rgb),0.13);
	text-shadow: 0 0 14px rgba(var(--cyan-rgb),0.42);
}

.mitem::before {
	background:
		linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.18) 48%, transparent 70%),
		radial-gradient(circle at 24px 12px, rgba(255,255,255,0.26), transparent 36px);
	mix-blend-mode: screen;
}

.micon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--cyan);
}

.micon svg,
.micon i {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	font-size: 2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 8px currentColor);
}

.mtext {
	position: relative;
	z-index: 1;
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}

.mitem:hover,
.mitem:focus-visible {
	color: #f6feff;
	border-color: rgba(var(--cyan-rgb),0.84);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.18), transparent 44%),
		linear-gradient(135deg, rgba(var(--cyan-rgb),0.42), rgba(8,26,50,0.9) 58%, rgba(0,11,24,0.98));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.28),
		inset 0 -18px 34px rgba(0,0,0,0.28),
		0 14px 28px rgba(0,0,0,0.34),
		0 0 32px rgba(var(--cyan-rgb),0.22);
}

.mitem.active {
	color: #fff7da;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.26), transparent 42%),
		linear-gradient(135deg, rgba(255,213,111,0.5), rgba(var(--orange-rgb),0.9) 48%, rgba(95,39,0,0.98));
	border-color: rgba(var(--orange-rgb),0.9);
	text-shadow: 0 0 16px rgba(var(--orange-rgb),0.62);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.36),
		inset 0 -20px 36px rgba(70,24,0,0.38),
		0 15px 30px rgba(0,0,0,0.34),
		0 0 34px rgba(var(--orange-rgb),0.34);
	animation: liquidActiveGlow 2.8s ease-in-out infinite;
}

.mitem.active .micon {
	color: #fff7d0;
}

.mitem:active {
	transform: translateY(2px) scale(0.992);
	box-shadow:
		inset 0 2px 12px rgba(0,0,0,0.32),
		inset 0 -10px 22px rgba(255,255,255,0.04),
		0 7px 14px rgba(0,0,0,0.34);
}

@media (max-width: 720px) {
	#menu-items {
		gap: 9px;
		padding: 16px 0;
	}

	.mitem {
		grid-template-columns: 48px minmax(0, 1fr);
		min-height: 58px;
		padding: 6px 14px 7px 8px;
		letter-spacing: 4px;
	}

	.micon {
		width: 42px;
		height: 42px;
	}

	.micon svg,
	.micon i {
		width: 36px;
		height: 36px;
		font-size: 1.75rem;
	}

}

@keyframes liquidActiveGlow {
	0%, 100% {
		box-shadow:
			inset 0 1px 0 rgba(255,255,255,0.36),
			inset 0 -20px 36px rgba(70,24,0,0.38),
			0 15px 30px rgba(0,0,0,0.34),
			0 0 28px rgba(var(--orange-rgb),0.28);
	}
	50% {
		box-shadow:
			inset 0 1px 0 rgba(255,255,255,0.42),
			inset 0 -18px 34px rgba(70,24,0,0.32),
			0 16px 32px rgba(0,0,0,0.36),
			0 0 42px rgba(var(--orange-rgb),0.44);
	}
}

/* Final mobile app-screen overrides. Kept at the end so older compact-height rules cannot shrink menus. */
@media (max-width: 720px) {
	.screen {
		height: 100vh;
		height: 100dvh;
		min-height: 100vh;
		min-height: 100dvh;
		overflow: hidden;
	}

	.menu-backdrop,
	#levels .menu-backdrop,
	#scores .menu-backdrop,
	#profile .menu-backdrop,
	#badges .menu-backdrop,
	#shop .menu-backdrop,
	#rewards .menu-backdrop,
	#settings .menu-backdrop,
	#dead .menu-backdrop,
	#win .menu-backdrop {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		min-height: 100vh;
		min-height: 100dvh;
		max-height: none;
		padding: calc(78px + env(safe-area-inset-top, 0px)) 18px calc(92px + env(safe-area-inset-bottom, 0px));
		overflow: hidden;
		border-radius: 0;
	}

	body[data-screen="menu"] #menu .menu-backdrop {
		padding-top: calc(108px + env(safe-area-inset-top, 0px));
	}

	.screen-title,
	#levels .screen-title,
	#scores .screen-title {
		display: block;
		font-size: clamp(2.05rem, 11vw, 3.2rem);
		line-height: 0.9;
		margin-bottom: 12px;
		letter-spacing: 6px;
	}

	#levels .era-backdrop > .btn.secondary {
		display: none;
	}

	.screen:not(#menu) .menu-actions .btn[data-action="menu"],
	#settings-back,
	#scores > .menu-backdrop > .btn[data-action="menu"] {
		display: none;
	}

	#settings .menu-actions,
	#scores > .menu-backdrop > .btn[data-action="menu"] {
		display: none;
	}

	.screen:not(#menu) .menu-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 8;
		width: 100vw;
		margin: 0;
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
		background: rgba(2,2,14,0.9);
		border-top: 1px solid rgba(var(--cyan-rgb),0.18);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}

	#dead .result-actions,
	#win .result-actions {
		flex-wrap: nowrap;
		gap: 6px;
	}

	#dead .result-actions .btn,
	#win .result-actions .btn {
		flex: 1 1 0;
		min-width: 0;
		min-height: 46px;
		padding: 9px 4px;
		font-size: 0.5rem;
		letter-spacing: 1px;
		gap: 4px;
	}

	#shop-list,
	#daily-rewards-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 10px;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding-bottom: 10px;
	}

	#scores-list,
	#daily-rewards-list,
	.settings-panel {
		flex: 1 1 auto;
		min-height: 0;
		width: 100%;
		overflow-y: auto;
		padding-bottom: 10px;
	}

	.daily-reward-card {
		min-height: 76px;
		display: grid;
		grid-template-columns: 68px 44px minmax(0, 1fr) 72px;
		align-items: center;
		gap: 10px;
		text-align: left;
		padding: 10px 12px;
	}

	.daily-icon {
		width: 38px;
		height: 38px;
	}

	.daily-amount {
		font-size: 1.25rem;
	}

	.daily-tag {
		text-align: right;
	}

	#scores-list {
		max-width: none;
	}

	.profile-badge-grid,
	.badges-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		width: 100%;
	}

	.profile-badge-card {
		min-width: 0;
		min-height: 158px;
		padding: 12px 8px 40px;
		gap: 7px;
	}

	.badge-icon {
		width: 48px;
		height: 48px;
		font-size: 2.1rem;
	}

	.profile-badge-card span {
		font-size: 0.5rem;
		letter-spacing: 1.1px;
		white-space: normal;
		line-height: 1.12;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.profile-badge-card small {
		font-size: 0.44rem;
		letter-spacing: 0.4px;
		line-height: 1.2;
	}

	.profile-badge-card .btn-sm,
	.profile-badge-card.locked .badge-state,
	.profile-badge-card.claimed .badge-state {
		max-width: calc(100% - 14px);
		padding-inline: 8px;
		font-size: 0.46rem;
		letter-spacing: 0.8px;
	}

	#levels .era-container {
		flex: 1 1 auto;
		min-height: 0;
		align-items: center;
	}

	#levels .era-track-wrap {
		overflow-x: hidden;
		overflow-y: visible;
	}

	body[data-screen="menu"] #menu .menu-backdrop {
		overflow-y: auto;
	}

	.shop-card {
		position: relative;
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr) minmax(82px, auto);
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		min-height: 104px;
		max-height: none;
	}

	.shop-thumb {
		width: 96px;
		height: 96px;
		aspect-ratio: 1 / 1;
		min-height: 0;
	}

	.shop-icon-thumb {
		width: 96px;
		height: 96px;
		aspect-ratio: 1 / 1;
		min-height: 0;
	}

	.shop-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
		min-width: 0;
		padding: 12px 10px;
	}

	.shop-buy.btn {
		align-self: center;
		width: auto;
		min-width: 78px;
		max-width: 96px;
		margin: 12px 10px 12px 0;
	}
}