@charset "UTF-8";

@font-face {
	font-family: 'Press Start 2P';
	src: url('../font/PressStart2P-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DungGeunMo';
	src: url('../font/DungGeunMo.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

html {
	width: 100%;
	height: 100%;
	min-height: 100%;
}

body,
button,
input,
.hud,
.panel,
#stage-display,
#total-score-display {
	font-family: 'DungGeunMo', sans-serif !important;
}

.num-font {
	font-size: 1.25em;
	vertical-align: -0.01em;
	display: inline-block;
	margin-right: 0.01em;
}

.eng-font {
	font-size: 1.1em;
	vertical-align: 0.02em;
	display: inline-block;
}

:root {
	--accent: #66d9ef;
	--danger: #ff6b6b;
	--success: #7CFC98;
	--gold: #ffcc00;
	--std-radius: 8px;
}

body {
	margin: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	background: #000000;
	font-family: 'DungGeunMo', sans-serif;
	overflow: hidden;
	touch-action: none;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	word-break: keep-all;
}

#game-container {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
	max-width: 480px;
	background: #000000;
	overflow: hidden;
}

canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.hud {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: rgba(0, 0, 0, 0.85);
	padding: 0 10px !important;
	color: #fff;
	font-size: 13px;
	z-index: 9500;
	font-weight: bold;
	box-sizing: border-box !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	contain: layout paint;
}

.hud-left {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1 !important;
	white-space: nowrap !important;
}

.hud-right {
	flex: 1 !important;
	text-align: right !important;
	white-space: nowrap !important;
}

.stage-text {
	color: white;
	font-size: 14px;
	font-weight: bold;
	white-space: nowrap;
}

.menu-icon {
	font-size: 24px;
	cursor: pointer;
	z-index: 2100;
	position: relative;
	width: 30px;
	text-align: center;
	user-select: none;
}

#total-score-display {
	color: var(--gold);
}

#total-score-display.is-challenge {
	color: #ff6666 !important;
}

.center-ui {
	position: absolute;
	top: 55px;
	width: 100%;
	text-align: center;
	pointer-events: none;
	z-index: 15;
}

.target-info {
	color: var(--gold);
	font-size: 20px;
	font-weight: 900;
	text-shadow: 2px 2px 0px #000;
	letter-spacing: -0.5px;
}

.target-progress-wrap {
	width: 160px;
	height: 10px;
	background: rgba(0, 0, 0, 0.5);
	margin: 8px auto 0;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
}

.target-progress-bar {
	width: 0%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 204, 0, 0.8), rgba(241, 196, 15, 0.9));
	transition: width 0.3s ease;
	position: relative;
	z-index: 2;
}

.target-status-text {
	height: 18px;
	font-size: 13px;
	font-weight: bold;
	margin-top: 4px;
	text-shadow: 1px 1px 2px #000;
	opacity: 0;
}

.controls {
	position: absolute;
	bottom: 20px;
	left: auto;
	right: 0px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 30;
	pointer-events: none;
	align-items: flex-end;
	padding-right: 12px;
}

.sub-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	width: auto;
	pointer-events: none;
}

.btn {
	width: 160px;
	height: 50px;
	padding: 12px 0;
	border: none;
	border-radius: 12px;
	background: #fff;
	color: #222;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 4px #ccc;
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	margin-bottom: 15px;
	margin-top: 10px;
	pointer-events: auto;
}

.btn:active {
	transform: translateY(2px);
	box-shadow: 0 2px #ccc;
}

.btn-sm {
	padding: 10px 15px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.2);
	color: #000;
	font-weight: bold;
	font-size: 11px;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.3);
	pointer-events: auto;
}

.sub-controls .btn-sm {
	flex: 1;
	padding: 10px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.focus-btn {
	background: #444 !important;
	color: #aaa !important;
	cursor: not-allowed;
}

.wallet-btn-active {
	transform: scale(0.95);
	filter: brightness(0.8);
}

.pause-btn {}

.overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 1);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.panel {
	padding: 25px;
	text-align: center;
	width: 280px;
	color: #fff;
	overflow: auto;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.panel .ending-wrapper .ending-img {
	width: 150px;
}

.panel .ending-wrapper .btn {
	margin-top: 10px;
	margin-bottom: 5px;
}

.modal-bubble {
	background: #fff;
	padding: 10px 14px 8px 14px;
	border: 3px solid #222;
	border-radius: 15px;
	font-weight: 500;
	margin-bottom: -5px;
	z-index: 4;
	position: relative;
	color: #000;
}

.reward-text {
	margin-top: 5px;
	color: #3498db;
	font-size: 18px;
}

.reward-text-pop {
	color: #7CFC00 !important;
	transform: scale(1.2) !important;
	transition: all 0.1s !important;
}

.reward-text-minus {
	color: #ff3333 !important;
}

.is-wallet-empty {
	opacity: 0.5 !important;
}

.collection-grid-item.is-unowned,
.collection-item-row.is-unowned {
	opacity: 0.5;
}

.collection-grid-item.is-unowned .item-icon,
.collection-item-row.is-unowned .item-icon {
	filter: grayscale(100%);
}

.ending-grid-item.locked {
	background: #222;
	opacity: 0.2;
}

.ending-grid-item.cleared {
	background: #333;
	opacity: 1;
}

.clear-energy-wrap {
	position: relative;
}

.clear-energy-container.with-margin {
	margin-bottom: -20px;
}

.clear-energy-fill.is-danger {
	background: var(--danger) !important;
}

.clear-energy-fill {
	background: var(--success);
}

#stageclear h2 {
	font-size: 20px;
	margin: 18px 0 10px 0;
	font-family: 'Press Start 2P', cursive;
}

.gameover-text {
	margin-top: 20px;
	color: var(--danger);
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 2px;
}

#fever-container {
	position: absolute;
	right: 10px;
	top: calc(50% - 70px);
	width: 10px;
	height: 180px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid #444;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

#fever-bar {
	width: 10px;
	background: linear-gradient(to top, #c99700, #ffcc00 52%, #fff0a0);
	border-radius: 5px;
	transition: height 0.1s ease;
	position: absolute;
	bottom: 0 !important;
	top: auto !important;
}

#fever-bar:not(.fever-bar-danger),
#fever-bar.fever-bar-normal,
.fever-bar-normal {
	background: linear-gradient(to top, #FFC837 0%, #FFF0A5 100%) !important;
	box-shadow: 0 0 10px rgba(255, 200, 55, 0.6) !important;
}

#fever-bar.fever-bar-danger {
	background: linear-gradient(to top, #c99700, #ffcc00 52%, #fff0a0) !important;
}

.challenge-marker-circle.is-highlighted {
	transform: translate(-50%, -50%) scale(1.5);
	border-color: #ff3333;
}

.challenge-marker-circle.is-highlighted .challenge-stage-val {
	color: #ff3333;
}

#fever-container.active {
	box-shadow: 0 0 15px var(--gold);
	border-color: var(--gold);
}

#fever-food-icon {
	position: absolute;
	top: 50px;
	width: 150px;
	height: 75px;
	background-image: url('../images/food_icon_01.webp');
	background-size: 200% 400%;
	background-repeat: no-repeat;
	left: calc(50% - 110px);
	transform: translateX(-50%) scale(0.6);
	z-index: 9000;
}

.food-btn-icon {
	width: 110px;
	height: 52px;
	background-image: url('../images/food_icon_01.webp');
	background-size: 200% 400%;
	background-repeat: no-repeat;
	display: inline-block;
	margin: 0 auto;
}

.shield-container {
	position: absolute;
	top: -95px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	flex-direction: column-reverse;
	gap: 4px;
	z-index: 10;
}

.shield-coin {
	width: 11px;
	height: 11px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	border: 2px solid #555;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	color: #555;
	font-weight: bold;
	opacity: 0.5;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shield-coin.active {
	background: #ffcc00;
	border-color: #fff;
	color: #000;
	opacity: 1;
	transform: scale(1.15);
	box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
}

.fever-music-icon,
.clear-music-icon {
	background-image: url('../images/icon_music_256x256@2x.png') !important;
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	max-width: 64px !important;
	border-radius: 0 !important;
	margin: 0 auto !important;
}

#start-screen-overlay {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	max-width: 480px;
	height: 100vh;
	height: 100dvh;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9999 !important;
	background: #000;
	cursor: pointer;
	pointer-events: auto !important;
	overflow: hidden;
}

.splash-panel-shell {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: #000;
}

#start-screen-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.splash-static-fallback {
	position: absolute;
	left: 50%;
	bottom: max(36px, env(safe-area-inset-bottom, 0px) + 20px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.56);
	color: #f7f7f7;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
	pointer-events: none;
}

.splash-static-title {
	font-size: 22px;
	font-weight: bold;
	letter-spacing: -0.4px;
}

#stage-select-overlay {
	display: flex;
	background: rgba(0, 0, 0, 0.95);
	padding-top: 50px;
}

#stage-buttons-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	width: 100%;
	margin-bottom: 20px;
	place-items: center;
}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

#stage-select-panel {
	max-height: 100%;
	overflow-y: auto;
	display: block;
	padding-top: 30px;
	scrollbar-width: none;
	margin-left: -15px;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

#stage-select-panel::-webkit-scrollbar {
	display: none;
}

.pause-char-img {
	width: 100px;
	margin-bottom: 10px;
}

.pause-score {
	color: var(--accent);
	font-weight: bold;
	font-size: 20px;
}

.pause-title {
	margin-bottom: 25px;
}

.tutorial-overlay-bg {
	position: absolute;
	inset: 0;
	background: #000;
	z-index: 200;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}

.tutorial-bubble {
	font-size: 12px;
	min-width: 180px;
	padding: 4px 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-bottom: 20px;
	border-radius: 15px;
}

.tutorial-char-img {
	width: 120px;
	filter: drop-shadow(0 0 10px #fff);
	margin: 0px auto;
	left: 25%;
}

.tutorial-click-guide {
	margin-top: 80px;
	color: #aaa;
	font-size: 14px;
	font-weight: bold;
	animation: blink 1s infinite;
}

.ending-stats-box {
	text-align: left;
	width: 86%;
	font-size: 14px;
	color: #ddd;
	background: rgba(255, 255, 255, 0.1);
	padding: 15px;
	border-radius: 10px;
}

.stats-val-gold {
	float: right;
	color: var(--gold);
	font-weight: bold;
	font-size: 18px;
}

.ending-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin: 15px 0;
}

.ending-grid-item {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ending-item-inner {
	width: 40px;
	height: 20px;
	background-image: url('../images/food_icon_01.webp');
	background-size: 200% 400%;
	transform: scale(1.5);
}

.stage-btn-tut,
.test-music-btn {
	width: 100%;
	margin-bottom: 10px;
	background: #4a4d55;
	color: #fff;
	height: 60px;
	font-size: 18px;
	box-sizing: border-box;
	border: 2px solid #5c606a;
	display: flex;
	align-items: center;
	justify-content: center;
}

.test-music-btn:not(.challenge-stage-btn):not(.leaderboard-stage-btn) {
	background: #4a4d55;
	border-color: #5c606a;
}

.stage-portal-btn {
	height: 92px;
	padding: 0 10px;
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) 74px 86px;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
}

.challenge-stage-btn {
	background: #4a4d55;
	border: 2px solid #5c606a;
	margin-top: 12px !important;
	margin-bottom: 30px !important;
}

.leaderboard-stage-btn {
	background: #4a4d55;
	border: 2px solid #5c606a;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.challenge-stage-icon-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	justify-self: center;
}

.challenge-stage-icon {
	display: block;
	width: 48px;
	height: 48px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M18%2010h28v10c0%209-6%2016-14%2016s-14-7-14-16V10z%22%20fill%3D%22%23f7c948%22%20stroke%3D%22%238b5a00%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%2014H9v5c0%208%206%2014%2014%2014%22%20fill%3D%22none%22%20stroke%3D%22%238b5a00%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M46%2014h9v5c0%208-6%2014-14%2014%22%20fill%3D%22none%22%20stroke%3D%22%238b5a00%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M27%2037h10v8H27z%22%20fill%3D%22%23d18f00%22%20stroke%3D%22%238b5a00%22%20stroke-width%3D%223%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2245%22%20width%3D%2224%22%20height%3D%227%22%20rx%3D%222%22%20fill%3D%22%238b5a00%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2252%22%20width%3D%2232%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%235c3b00%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateY(2px);
}

.leaderboard-stage-icon {
	display: block;
	width: 48px;
	height: 48px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%2248%22%20height%3D%2244%22%20rx%3D%228%22%20fill%3D%22%23e6f1ff%22%20stroke%3D%22%23083789%22%20stroke-width%3D%223%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2224%22%20width%3D%228%22%20height%3D%2218%22%20rx%3D%222%22%20fill%3D%22%23083789%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2218%22%20width%3D%228%22%20height%3D%2224%22%20rx%3D%222%22%20fill%3D%22%231d73e8%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2214%22%20width%3D%228%22%20height%3D%2228%22%20rx%3D%222%22%20fill%3D%22%23ffcf44%22%2F%3E%3Cpath%20d%3D%22M18%2048h28%22%20stroke%3D%22%23083789%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2219%22%20r%3D%223%22%20fill%3D%22%23fff3b0%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateY(2px);
}

.challenge-stage-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	height: 100%;
	padding-top: 4px;
}

.challenge-stage-title-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
}

.challenge-stage-title {
	display: block;
	white-space: nowrap;
	line-height: 1;
	font-size: 24px;
}

.challenge-stage-title-sub {
	margin-left: 1px;
}

.stage-portal-copy-note {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
}

.challenge-stage-copy-note {
	margin-left: 15px;
	letter-spacing: 0.06em;
}

.stage-portal-rank-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-width: 68px;
	height: 40px;
	padding: 3px 4px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	transform: translate(14px, -10px);
}

.stage-portal-rank-box.is-board {
	background: rgba(255, 255, 255, 0.14);
}

.stage-portal-rank-label {
	font-size: 8px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.8);
}

.stage-portal-rank-value {
	font-size: 14px;
	line-height: 1;
	font-weight: 900;
	color: #fff7a7;
}

.stage-portal-rank-box.is-board .stage-portal-rank-value {
	color: #ffffff;
}

.stage-portal-rank-meta {
	max-width: 60px;
	font-size: 6px;
	line-height: 1.05;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	word-break: keep-all;
}

.challenge-stage-char-clip {
	justify-self: end;
	align-self: end;
	width: 86px;
	height: 92px;
	overflow: hidden;
	position: relative;
	pointer-events: none;
}

.challenge-stage-char {
	position: absolute;
	right: -6px;
	bottom: -12px;
	width: 96px;
	height: auto;
	transform: scaleX(-1);
	transform-origin: center;
	image-rendering: pixelated;
	pointer-events: none;
}

.leaderboard-stage-char {
	right: -12px;
	bottom: -10px;
	width: 100px;
}

.stage-btn-item,
.test-music-btn {
	transition: transform 0.08s linear, box-shadow 0.08s linear, background-color 0.08s linear, border-color 0.08s linear;
	will-change: transform;
}

.stage-master-img,
.challenge-stage-char {
	transition: transform 0.08s linear;
}

.stage-scroll-focus {
	border: 2px solid #fff !important;
	transform: scale(1.05);
	z-index: 6;
}

.stage-btn-item.stage-scroll-focus,
.test-music-btn:not(.challenge-stage-btn):not(.leaderboard-stage-btn).stage-scroll-focus {
	background: #0047AB !important;
	border-color: #eef6ff !important;
	box-shadow: 0 0 15px rgba(0, 71, 171, 0.6);
}

.challenge-stage-btn.stage-scroll-focus {
	background: linear-gradient(45deg, #800000, #ff0000) !important;
	border-color: #ffcc00 !important;
	box-shadow: 0 0 18px rgba(255, 76, 76, 0.42);
}

.leaderboard-stage-btn.stage-scroll-focus {
	background: linear-gradient(45deg, #b86cff, #d899ff) !important;
	border-color: #f7ecff !important;
	box-shadow: 0 0 18px rgba(212, 153, 255, 0.44);
}

.stage-scroll-focus .stage-master-img:not(.locked) {
	animation: masterIdle 0.8s steps(1) infinite;
}

.stage-scroll-focus .challenge-stage-char {
	animation: challengeStageCharBob 0.55s ease-in-out infinite;
}

@keyframes challengeStageCharBob {

	0%,
	100% {
		transform: scaleX(-1) translateY(0);
	}

	50% {
		transform: scaleX(-1) translateY(-4px);
	}
}

.stage-btn-item {
	width: 296px;
	height: 76px;
	background: #2a2d33;
	color: #fff;
	border: 1px solid #444;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	border-radius: 12px;
	position: relative;
	padding: 10px;
	gap: 10px;
	box-sizing: border-box;
	margin-bottom: 12px;
}

challenge-stage-btn::after {
	content: '·';
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	font-size: 18px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}


.stage-btn-item[data-stage-select-target="1"]::after {
	content: none;
}

.stage-btn-item .food-btn-icon {
	margin: 0;
	transform: translateX(-20px) scale(0.9);
	position: relative;
}

.stage-btn-item .stage-info-wrapper {
	transform: translateX(-25px);
	margin-left: -26px;
}

.stage-info-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 0;
	flex: 1;
}

.stage-master-info {
	width: 50px;
	text-align: right;
	margin-right: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
}

.master-nickname {
	font-size: 10px;
	color: #aaa;
	margin-bottom: 2px;
}

.master-name {
	font-size: 11px;
	font-weight: bold;
	color: #fff;
}

.stage-master-container {
	height: 150%;
	width: 95px;
	position: relative;
	align-items: center;
	justify-content: center;
	margin-left: 0;
	transform: translateY(-20px) scale(1.2);
	transform-origin: right center;
	margin-left: -64px;
	margin-top: 24px;
}

.stage-master-img {
	width: 100px;
	height: 78px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 200% auto;
	left: 30px;
	position: relative;
}

.stage-master-img.locked {
	filter: brightness(0);
	opacity: 0.6;
}

.stage-btn-item.stage-btn-current:not(.stage-scroll-focus) {
	background: #3f434c !important;
	border: 2px solid #8e949f !important;
	box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
	transform: scale(1.05);
	z-index: 5;
}

@media (hover: hover) and (pointer: fine) {

	.stage-btn-item:hover,
	.test-music-btn:not(.challenge-stage-btn):not(.leaderboard-stage-btn):hover {
		background: linear-gradient(180deg, #1c65d8 0%, #0a3f9b 100%) !important;
		border-color: #eef6ff !important;
		box-shadow: 0 0 18px rgba(29, 115, 232, 0.38);
		transform: scale(1.05);
		z-index: 6;
	}

	.challenge-stage-btn:hover {
		background: linear-gradient(45deg, #800000, #ff0000) !important;
		border-color: #ffcc00 !important;
		box-shadow: 0 0 18px rgba(255, 76, 76, 0.42);
		transform: scale(1.05);
		z-index: 6;
	}

	.leaderboard-stage-btn:hover {
		background: linear-gradient(45deg, #b86cff, #d899ff) !important;
		border-color: #f7ecff !important;
		box-shadow: 0 0 18px rgba(212, 153, 255, 0.44);
		transform: scale(1.05);
		z-index: 6;
	}

	.stage-btn-item:hover .stage-master-img:not(.locked) {
		animation: masterIdle 0.8s steps(1) infinite;
	}

	.test-music-btn:hover .challenge-stage-char {
		animation: challengeStageCharBob 0.55s ease-in-out infinite;
	}
}


@keyframes masterIdle {
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 100% 0;
	}
}

.master-name,
.master-nickname,
.stage-master-question {
	transition: opacity 0.5s;
}

.opacity-0 {
	opacity: 0 !important;
}

.stage-master-anim {
	animation: masterIdle 0.8s steps(1) infinite;
}

.stage-master-question {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 4px #000;
}

.stats-info-box {
	background: rgba(255, 255, 255, 0.1);
	padding: 15px;
	border-radius: 10px;
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
}

.stats-label-text {
	position: relative;
	top: 4px;
}

.stats-info-box p {
	margin: 5px 0;
	display: flex;
	justify-content: space-between;
}

.stats-list-box {
	max-height: 200px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	padding: 10px;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.stat-cleared-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-cleared-item:last-child {
	border-bottom: none;
}

.stat-icon {
	width: 40px;
	height: 20px;
	background-image: url('../images/food_icon_01.webp');
	background-size: 200% 400%;
	margin-right: 15px;
	border-radius: 4px;
}

.stat-icon-music {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
}

.stat-icon-sprite {
	background-size: 200% 400%;
}

.stat-name {
	font-size: 14px;
	color: #fff;
	font-weight: bold;
}

#stage-display {
	position: static;
	transform: none;
	width: auto;
	text-align: left;
	margin-left: 15px;
	flex: 1;
}

.stage-display-test-label {
	color: #e67e22;
	text-shadow: 1px 1px 0 #000;
}

.stage-display-busking {
	color: #ff3333;
	text-shadow: 1px 1px 0 #000;
}

.stage-display-sub {
	font-size: 0.85em;
}

.target-music-alert {
	color: #ff3333;
	font-size: 1.1em;
	letter-spacing: 2px;
}

.target-music-title {
	font-size: 1.4em;
	color: #fff;
}

.money-display {
	margin: 10px 0;
}

* {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.4);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.6);
}

@keyframes pop {
	0% {
		transform: scale(0.3);
	}

	80% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes shake {

	0%,
	100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(-15deg);
	}

	75% {
		transform: rotate(15deg);
	}
}

@keyframes pulseFood {
	0% {
		transform: scale(1.5);
	}

	33% {
		transform: scale(1.65);
	}

	66% {
		transform: scale(1.5);
	}

	100% {
		transform: scale(1.5);
	}
}

.shake-anim {
	animation: shake 1.5s infinite;
	display: inline-block;
}

.food-pulse-anim {
	animation: pulseFood 1.5s infinite ease-in-out;
	display: inline-block;
}

.pop-anim {
	animation: pop 0.2s ease-out;
}

.item-detail-modal {
	background: #222 !important;
	border-radius: 15px;
}

.modal-item-desc {
	font-family: sans-serif !important;
}

.item-detail-modal .btn {
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 0;
	box-shadow: none;
}

.full-width {
	width: 100%;
}

#skip-btn {
	position: absolute !important;
	left: 10px !important;
	top: 45px !important;
	z-index: 3001 !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	padding: 8px 15px !important;
	border: 1px solid #999 !important;
	border-radius: 5px !important;
	font-size: 12px !important;
	font-weight: bold !important;
	cursor: pointer !important;
	width: auto !important;
	height: auto !important;
	box-shadow: none !important;
	display: none;
}

.tut-next-btn {
	position: absolute !important;
	bottom: calc(20% + 15px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 160px !important;
	height: 50px !important;
	padding: 12px 0 !important;
	font-size: 16px !important;
	font-weight: bold !important;
	border-radius: 12px !important;
	background: var(--gold) !important;
	color: black !important;
	box-shadow: 0 4px #ccc !important;
	border: none !important;
}

.tut-next-btn.is-clicking {
	transform: translateX(-50%) scale(0.95) !important;
}

.arrow-icon {
	font-size: 70% !important;
	vertical-align: middle !important;
	display: inline-block !important;
	margin-left: 2px !important;
	transform: translateY(-1.5px) !important;
}

.btn-sell-item,
.btn-sell-modal,
.btn-open-box,
.btn-close-detail,
.btn-play-organ {
	border-radius: var(--std-radius) !important;
	width: auto !important;
	height: auto !important;
	padding: 6px 12px !important;
	font-weight: bold !important;
	cursor: pointer !important;
	box-shadow: none !important;
	border: none !important;
	font-size: 12px !important;
	display: inline-block;
	margin: 0 2px !important;
}

.btn-sell-item,
.btn-sell-modal {
	background: var(--danger) !important;
	color: white !important;
}

.btn-open-box {
	background: var(--gold) !important;
	color: black !important;
	padding: 6px 15px !important;
	margin: 0 !important;
}

.btn-close-detail {
	background: #fff !important;
	color: #000 !important;
}

.btn-close-detail.single-btn {
	width: 120px !important;
	margin: 0 auto !important;
	display: block !important;
}

.btn-sell-item,
.btn-sell-modal,
.btn-open-box,
.btn-open-modal-box,
.btn-close-detail {
	font-family: sans-serif !important;
}

.btn-open-modal-box {
	background: var(--gold) !important;
	color: black !important;
}

.btn-play-organ,
.btn-use-epic-item {
	background: #9b59b6 !important;
	color: white !important;
}

.collection-view {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.collection-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.collection-title {
	margin: 0;
	font-size: 18px;
}

.collection-title span {
	font-size: 14px;
	color: #aaa;
}

.btn-close-collection {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}

#btn-close-collection {
	margin-top: 15px;
	margin-bottom: 0;
	height: auto;
	padding: 10px;
	font-size: 14px;
	font-family: sans-serif;
}

.collection-list {
	flex: 1;
	overflow-y: auto;
	max-height: 350px;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.collection-list.grid-mode {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 6px !important;
	padding: 5px !important;
	justify-items: center;
}

.collection-grid-item {
	width: 100% !important;
	max-width: 60px;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 5px 0 !important;
	box-sizing: border-box !important;
	cursor: pointer;
}

.collection-grid-item:active {
	transform: scale(0.95);
}

.collection-item-row {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
}

.collection-item-info {
	flex: 1;
	text-align: left;
}

.stats-main-btn-row {
	display: flex !important;
	gap: 10px !important;
	width: 100% !important;
	margin-bottom: 15px !important;
	padding: 0 10px;
	box-sizing: border-box;
}

.stats-dual-btn {
	flex: 1 !important;
	height: 60px !important;
	padding: 8px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--accent) !important;
	color: #000 !important;
	border-radius: 12px !important;
	box-shadow: 0 4px #aaa !important;
	font-weight: bold !important;
	border: none !important;
	cursor: pointer;
}

.stats-dual-btn:active {
	transform: translateY(2px) !important;
	box-shadow: 0 2px #aaa !important;
}

#btn-open-collection {
	background: var(--gold) !important;
}

#btn-new-stage-found {
	background: var(--gold);
	color: #000;
	border: 2px solid #fff;
}

.clear-energy-container {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	position: relative;
	width: 100%;
	margin-top: 5px;
}

.click-prompt {
	position: absolute;
	right: 50%;
	margin: 80px;
	transform: translate(50px, 10px);
	color: var(--gold);
	font-weight: bold;
	font-size: 14px;
	animation: blink 1s infinite;
	z-index: 11;
	pointer-events: none;
	width: 120px;
	top: -72px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.click-arrow {
	font-size: 10px;
	margin-top: 1px;
}

.clear-energy-wrap {
	display: none;
	position: absolute;
	width: 100px;
	height: 10px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 5px rgba(124, 252, 152, 0.4);
}

.clear-energy-fill {
	height: 100%;
}

#clear-energy-text {
	position: absolute;
	width: 100%;
	text-align: center;
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	color: #fff;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: 1px 1px 0 #000;
	left: 0;
	pointer-events: none;
}

.clear-recovery-text {
	position: absolute;
	color: #7CFC98;
	text-shadow: 1px 1px 2px #000;
	font-size: 26px;
	font-weight: bold;
	white-space: nowrap;
	z-index: 10015;
}


@keyframes pulseSkillBtn {
	0% {
		transform: scale(1);
		box-shadow: 0 4px #ccc;
	}

	15% {
		transform: scale(1.08);
		box-shadow: 0 8px #ffcc00;
	}

	30% {
		transform: scale(1);
		box-shadow: 0 4px #ccc;
	}

	100% {
		transform: scale(1);
		box-shadow: 0 4px #ccc;
	}
}

.skill-btn-ready {
	animation: pulseSkillBtn 1.5s infinite ease-in-out !important;
	background: var(--gold) !important;
	color: black !important;
}

.skill-btn-pop {
	transform: scale(1.3) !important;
	opacity: 0 !important;
	transition: all 0.2s ease-out !important;
}

@keyframes bossModalAnim {

	0%,
	49.9% {
		background-position: 0 0;
	}

	50%,
	100% {
		background-position: 100% 0;
	}
}

.modal-boss-sprite {
	position: absolute;
	left: 50%;
	bottom: -5px;
	transform: translateX(20px) scale(0.45);
	transform-origin: bottom left;
	width: 256px;
	height: 256px;
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: bossModalAnim 0.4s infinite steps(1);
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

#feverVideoEl,
#feverVideoEl2 {
	position: absolute;
	top: -9999px;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	z-index: -9999;
}

#pause-btn {
	position: absolute;
	top: 45px;
	left: 7px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #222;
	border: 2px solid #fff;
	color: white;
	font-weight: bold;
	z-index: 9999;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

#test-ui-toggle-btn {
	position: absolute;
	top: 45px;
	right: 7px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(180deg, #56b8ff 0%, #237de6 72%, #0d4bab 100%);
	border: 2px solid #c8edff;
	color: white;
	font-weight: bold;
	z-index: 9999;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	letter-spacing: 0.04em;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

#test-ui-toggle-btn.is-off {
	background: linear-gradient(180deg, #274e84 0%, #18345d 72%, #0d1d37 100%);
	border-color: #7bbcff;
	color: rgba(255, 255, 255, 0.82);
}

#wallet-btn {
	background: linear-gradient(180deg, #ffe46a 0%, #ffc928 72%, #d79100 100%) !important;
	color: #1d1600 !important;
}

#all-focus-btn {
	background: linear-gradient(180deg, #5f97ff 0%, #2e67df 72%, #1b3b96 100%) !important;
	color: #fff !important;
}

#wallet-btn,
#all-focus-btn {
	width: 176px !important;
	height: 126px !important;
	padding: 0 18px 20px !important;
	display: none;
	justify-content: center;
	align-items: flex-end;
	line-height: 1.05;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: -0.04em;
	text-align: center;
	position: relative;
	left: auto;
	margin: 0;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid rgba(255, 255, 255, 0.85) !important;
	border-radius: 30px;
	box-shadow:
		0 12px 22px rgba(0, 0, 0, 0.35),
		inset 0 3px 0 rgba(255, 255, 255, 0.22),
		inset 0 -12px 0 rgba(0, 0, 0, 0.18);
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
	pointer-events: auto;
	transform-origin: center 82%;
}

#wallet-btn::before,
#all-focus-btn::before {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	top: 12px;
	bottom: 18px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.18),
		inset 0 -2px 0 rgba(0, 0, 0, 0.12);
	pointer-events: none;
}

#wallet-btn>*,
#all-focus-btn>* {
	position: relative;
	z-index: 1;
}

#tap {
	width: 128px !important;
	height: 40px !important;
	font-size: 15px !important;
	padding: 10px 0 !important;
}

#pause-overlay {
	background: rgba(0, 0, 0, 0.5);
	z-index: 9000;
}

.pause-text {
	color: white;
	font-size: 40px;
	font-weight: 900;
	text-shadow: 0 0 10px black;
}


@media screen and (min-width: 500px) {
	#game-container {
		width: 360px !important;
		height: 600px !important;
		min-height: 600px !important;
		max-height: 600px !important;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
		border-radius: 10px;
	}

	#start-screen-overlay {
		width: 360px !important;
		height: 600px !important;
		min-height: 600px !important;
		max-height: 600px !important;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
		border-radius: 10px;
	}

	#start-screen-overlay .splash-panel-shell {
		border-radius: 10px;
	}
}

.float-text-effect {
	position: absolute;
	transform: translate(-50%, -50%);
	color: var(--gold);
	font-weight: bold;
	font-size: 16px;
	text-shadow: 0 0 5px #000;
	pointer-events: none;
	z-index: 100000;
	white-space: nowrap;
}

.name-entry-title {
	font-size: 18px;
	margin-bottom: 15px;
}

.name-entry-input-wrapper {
	margin-bottom: 10px;
}

.name-entry-input {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 8px;
	text-align: center;
}

.name-entry-desc {
	font-size: 12px;
	color: #aaa;
	margin-bottom: 20px;
}

.name-entry-btn {
	opacity: 0.5;
	pointer-events: none;
	background: #444;
	color: white;
}

.name-entry-btn.active {
	opacity: 1;
	pointer-events: auto;
	background: var(--success);
	color: black;
}

.modal-badge {
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 6px;
	align-self: center;
}

.modal-badge-epic {
	background: #9b59b6;
	color: white;
	box-shadow: 0 0 5px #9b59b6;
}

.modal-badge-rare {
	background: var(--gold);
	color: black;
}

.modal-nav-btn {
	position: absolute;
	top: calc(50% - 3px);
	font-size: 24px;
	color: #fff;
	cursor: pointer;
	padding: 10px;
	z-index: 100001;
	transform: translateY(-50%);
}

.modal-nav-prev {
	left: -20px;
}

.modal-nav-next {
	right: -20px;
}

.item-detail-panel {
	box-sizing: border-box;
	padding: 5px 5px 20px 5px;
	width: 270px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.modal-item-icon-lg {
	font-size: 60px;
	margin-bottom: 10px;
}

.modal-item-title-text {
	color: var(--gold);
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.modal-item-count-text {
	color: #fff;
	font-size: 14px;
	margin-left: 5px;
}

.modal-item-desc-text {
	color: #ddd;
	font-size: 13px;
	margin-bottom: 15px;
	line-height: 1.4;
}

.modal-item-price-text {
	color: var(--success);
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 20px;
}

.modal-btn-group {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.item-detail-modal-bg {
	z-index: 100000;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-detail-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.collection-wallet-info {
	text-align: center;
	margin-bottom: 10px;
	font-size: 14px;
	color: #fff;
}

.collection-wallet-val {
	color: var(--success);
	font-weight: bold;
}

.collection-view-toggle-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

.btn-view-toggle {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border: 1px solid #666;
}

.unopened-box-row {
	background: rgba(255, 204, 0, 0.15);
	border: 1px solid var(--gold);
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.unopened-icon {
	font-size: 30px;
	margin-right: 15px;
}

.unopened-text-wrapper {
	flex: 1;
	text-align: left;
}

.unopened-title {
	font-size: 14px;
	color: var(--gold);
	font-weight: bold;
}

.unopened-count {
	color: #fff;
	font-size: 11px;
}

.unopened-desc {
	font-size: 11px;
	color: #aaa;
	margin-top: 2px;
	font-family: sans-serif;
}

.collection-list-container {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.collection-item-badge {
	font-size: 9px;
	padding: 1px 4px;
	border-radius: 3px;
	margin-left: 5px;
}

.badge-epic {
	background: #9b59b6;
	color: white;
}

.badge-rare {
	background: var(--gold);
	color: black;
}

.collection-overlay-bg {
	display: flex;
	z-index: 10020;
	background: rgba(0, 0, 0, 0.9);
	padding-top: 15px;
	align-items: flex-start;
}

.collection-panel {
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: #1c1c1c;
	border: 2px solid #444;
	border-radius: 15px;
	width: 300px;
	padding: 20px;
}

.stats-profile-wrapper {
	margin-top: -40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 15px;
}

.stats-profile-img-container {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 30px 0 13px 0;
}

.stats-profile-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid var(--gold);
	background: #222;
	object-fit: cover;
}

.stats-profile-name {
	margin: 0;
	font-size: 20px;
	color: var(--gold);
}

.menu-controls {
	margin-top: 5px;
}

.menu-controls-row {
	display: flex;
	gap: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 15px;
}

.menu-btn-restart {
	background: var(--gold);
	color: #000;
	font-size: 13px;
	margin: 0;
	height: auto;
	padding: 10px;
}

.menu-btn-main {
	background: var(--success);
	color: #000;
	font-size: 13px;
	margin: 0;
	height: auto;
	padding: 10px;
}

.menu-controls-reset {
	margin-top: 15px;
	border-top: 1px dashed rgba(255, 255, 255, 0.2);
	padding-top: 15px;
}

.menu-btn-vib {
	font-size: 13px;
	margin-bottom: 10px;
	height: auto;
	padding: 10px;
}

.menu-btn-reset {
	background: var(--danger);
	font-size: 12px;
	margin: 0;
	height: auto;
	padding: 10px;
}

.stat-cleared-empty {
	color: #888;
	padding: 10px;
}

.stat-cleared-item-left {
	display: flex;
	align-items: center;
}

.stat-cleared-item-count {
	font-size: 12px;
	color: var(--success);
	font-weight: bold;
}

.stats-grade-wrapper {
	background: rgba(0, 0, 0, 0.3);
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 15px;
	text-align: center;
}

.grade-label {
	font-size: 12px;
	color: #aaa;
	margin-bottom: 10px;
	transform: translateX(-2px);
}

.grade-badge-container {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
}

.grade-badge-text {
	font-family: 'Press Start 2P', sans-serif;
	font-size: 40px;
	font-weight: bold;
	text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	transform: rotate(-10deg);
}

.clear-grade-badge {
	color: #aaa;
}

.grade-slider-container {
	position: relative;
	width: 100%;
	height: 30px;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
	box-sizing: border-box;
}

.grade-slider-bar {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #ff00ff, #FFD700, #C0C0C0, #CD7F32, #aaa, #555);
	transform: translateY(-50%);
	border-radius: 2px;
	z-index: 0;
}

.grade-point {
	position: relative;
	z-index: 1;
	font-family: 'Press Start 2P';
	font-size: 10px;
	color: #fff;
	cursor: pointer;
	text-shadow: 1px 1px 0 #000;
	background: #222;
	padding: 2px 4px;
	border-radius: 4px;
	border: 1px solid #444;
}

.grade-pointer {
	position: absolute;
	top: -8px;
	transform: translateX(-50%);
	font-size: 16px;
	color: #fff;
	text-shadow: 0 0 5px #ff0000;
	z-index: 2;
	transition: left 0.5s ease;
	left: 50%;
}

.grade-tooltip {
	height: 20px;
	font-size: 12px;
	color: var(--gold);
	margin-top: 5px;
	font-weight: bold;
}

.play-details-overlay {
	display: flex;
	z-index: 10010;
	background: rgba(0, 0, 0, 0.85);
}

.play-details-panel {
	max-height: 90%;
	display: flex;
	flex-direction: column;
	background: #222;
	border: 2px solid #444;
	border-radius: 15px;
	width: 280px;
	padding: 20px;
}

.play-details-title {
	margin-top: 0;
	color: var(--gold);
	font-size: 18px;
}

.play-details-info-box {
	margin-bottom: 15px;
	background: rgba(0, 0, 0, 0.3);
}

.extra-stats-val {
	color: #fff;
}

.extra-stats-val.gold {
	color: var(--gold);
	font-weight: bold;
}

.stats-cleared-title {
	text-align: left;
	color: var(--accent);
	margin-bottom: 5px;
	font-size: 12px;
}

.stat-cleared-list {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 15px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	padding: 5px;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}

.btn-close-play-details {
	margin-bottom: 0;
	height: auto;
	padding: 10px;
	font-size: 14px;
}

.tutorial-overlay-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateY(-30px);
	pointer-events: none;
}

.tutorial-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.tut-bubble {
	pointer-events: none;
	font-family: sans-serif !important;
}

.tut-char-img {
	margin-top: 30px;
	width: 100px;
	pointer-events: none;
}

.tut-next-btn {
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.tut-next-btn.is-disabled {
	pointer-events: none !important;
}

.clear-reward-content {
	margin: 15px 0 0 0;
}

.clear-guide-text {
	font-size: 12px;
	color: var(--gold);
	margin-bottom: 5px;
}

.items-drop-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	min-height: 0;
}

.clear-food-icon {
	cursor: pointer;
	margin: 0 auto;
	transform: scale(0.8);
}

.clear-music-trigger {
	position: absolute;
	width: 1px !important;
	height: 1px !important;
	min-width: 1px !important;
	max-width: 1px !important;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	transform: none !important;
}

.clear-music-reward {
	margin: 10px auto 6px;
	padding: 8px 12px;
	width: fit-content;
	max-width: calc(100% - 32px);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gold);
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 215, 0, 0.45);
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.boss-speech-bubble {
	position: absolute;
	right: 0px;
	bottom: 102px;
	background: white;
	color: #333;
	font-size: 13px;
	font-family: sans-serif;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 6px;
	z-index: 100;
	white-space: nowrap;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.boss-speech-arrow {
	position: absolute;
	bottom: -5px;
	right: 60px;
	border-width: 6px 6px 0;
	border-style: solid;
	border-color: white transparent transparent transparent;
}

.grade-badge-btn {
	position: absolute;
	left: 35px;
	bottom: 10px;
	z-index: 10;
	transform: rotate(-15deg);
	cursor: pointer;
	text-align: center;
}

.grade-badge-label {
	font-family: 'Press Start 2P', sans-serif;
	font-size: 10px;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
	margin-bottom: -5px;
	transform: translate(-2px, -10px);
}

.grade-badge-val {
	font-family: 'Press Start 2P', sans-serif;
	font-size: 50px;
	font-weight: bold;
	color: #aaa;
	text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	transform: translateY(2px);
}

.clear-char-img-wrapper {
	position: relative;
	height: 140px;
	margin: 5px auto 0 auto;
	width: 100%;
	overflow: visible;
}

.clear-char-img {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 96px;
	display: block;
	z-index: 2;
}

.modal-content-wrapper {}

.float-text-money {
	position: absolute;
	font-weight: bold;
	color: #7CFC00;
	font-size: 20px;
	z-index: 10020;
	text-shadow: 1px 1px 0 #000;
	pointer-events: none;
}

.float-text-money-minus {
	color: #ff3333;
	font-size: 18px;
	z-index: 10005;
}

.clear-btn-wrap {
	width: 100%;
	margin-top: 10px;
}

.clear-btn-dual {
	display: flex;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
}

.btn-go-main-clear {
	flex: 1;
	background-color: #555;
	padding: 12px 0;
	font-size: 15px;
}

.btn-go-next-clear {
	flex: 1;
	padding: 12px 0;
	font-size: 15px;
}

.clear-btn-wrap .btn,
.clear-btn-dual .btn {
	font-size: 15px;
}

#btn-new-stage-found {
	font-size: 14px !important;
	letter-spacing: -0.02em;
}

.gameover-wrapper {}

.gameover-img-wrapper {
	position: relative;
	height: 120px;
	margin: 10px auto 0 auto;
	width: 100%;
}

.gameover-img {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 96px;
	display: block;
	z-index: 2;
}

.gameover-subtext {
	margin-top: 9px;
	color: #888;
	font-size: 14px;
}

.ending-stats-title {
	color: var(--gold);
	margin-bottom: 15px;
}

.ending-spent-val {
	float: right;
	color: #ff3333;
}

.ending-divider {
	border-color: rgba(255, 255, 255, 0.2);
	margin: 10px 0;
}

.ending-grid-title {
	margin-top: 15px;
	font-size: 12px;
	color: #888;
}

.btn-ending-close {
	margin-top: 10px;
	height: auto;
	padding: 10px;
}

.ending-wrapper {}

.ending-title {
	color: var(--gold);
	margin: 10px 0;
}

.ending-desc {
	margin-bottom: 20px;
	color: #ddd;
}

.btn-go-menu {
	margin-top: 10px;
	height: auto;
	padding: 10px;
}

.grade-detail-overlay {
	display: flex;
	z-index: 10020;
	background: rgba(0, 0, 0, 0.85);
}

.grade-detail-panel {
	background: #222;
	border: 2px solid var(--gold);
	border-radius: 15px;
	width: 280px;
	padding: 20px;
	text-align: center;
}

.grade-detail-title {
	color: var(--gold);
	font-size: 18px;
	margin-top: 0;
	margin-bottom: 15px;
}

.grade-detail-content {
	text-align: left;
	font-size: 14px;
	color: #ddd;
	line-height: 1.8;
	background: rgba(0, 0, 0, 0.3);
	padding: 10px;
	border-radius: 8px;
}

.grade-detail-row {
	display: flex;
	justify-content: space-between;
}

.grade-detail-val-plus {
	color: #7CFC00;
}

.grade-detail-val-minus {
	color: #ff3333;
}

.grade-detail-divider {
	border-color: #555;
	margin: 5px 0;
}

.grade-detail-total {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
}

.grade-detail-total-val {
	color: var(--gold);
}

.grade-detail-desc {
	margin-top: 10px;
	font-size: 12px;
	color: #888;
}

.btn-close-grade-detail {
	margin-top: 15px;
	height: auto;
	padding: 10px;
}

.stage-btn-item-sub {
	font-size: 12px;
	color: var(--accent);
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 2px;
}

.stage-btn-item-title {
	font-size: 12px;
	font-weight: 900;
	margin-top: 2px;
	width: 70px;
	text-align: left;
}

#stage-select-overlay .panel {
	position: relative;
}

.debug-info-text {
	position: absolute;
	left: 4px;
	bottom: 4px;
	margin: 0;
	padding: 0;
	font-size: 10px;
	color: #555;
	text-align: left;
	width: auto;
}

.confirm-overlay {
	display: flex;
	z-index: 100200;
	background: rgba(0, 0, 0, 0.85);
}

.confirm-panel {
	background: #222;
	border: 2px solid #444;
	border-radius: 15px;
	width: 260px;
	padding: 20px;
	text-align: center;
	transform: translateY(-100px);
}

.confirm-msg {
	color: #fff;
	font-size: 16px;
	margin-bottom: 20px;
	line-height: 1.5;
	font-weight: bold;
	font-family: sans-serif !important;
}

.confirm-btn-group {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.btn-confirm-yes {
	flex: 1;
	background: var(--danger);
	color: #fff;
	height: auto;
	padding: 10px;
	font-size: 14px;
	margin: 0;
}

.btn-confirm-no {
	flex: 1;
	background: #555;
	color: #fff;
	height: auto;
	padding: 10px;
	font-size: 14px;
	margin: 0;
}

.item-detail-panel.is-epic {
	border: 2px solid #9b59b6;
	box-shadow: 0 0 15px rgba(155, 89, 182, 0.6);
}

.visibility-hidden {
	visibility: hidden;
}

.music-mode-energy {
	justify-content: center;
	margin-bottom: 20px;
}

.collection-grid-item.is-epic,
.collection-item-row.is-epic {
	border: 2px solid #9b59b6;
	box-shadow: 0 0 10px rgba(155, 89, 182, 0.8);
	background: rgba(155, 89, 182, 0.1);
}

.collection-grid-item.is-rare,
.collection-item-row.is-rare {
	border: 2px solid var(--gold);
	box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.mt-10 {
	margin-top: 10px;
}

.stats-label-span {
	position: relative;
	top: 4px;
}

.stats-val-span {
	color: var(--success);
	font-weight: bold;
}

.stats-total-span {}

.stats-main-btn-row {
	margin-top: 20px;
}

#btn-open-collection {
	background: var(--gold) !important;
}

#stat-wallet {
	color: var(--success);
	font-weight: bold;
}

.clear-energy-wrap {
	transform: translate(-6px, 3px);
}

.modal-boss-sprite {
	z-index: 1;
}

.tut-spotlight-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	pointer-events: auto;
}

.tut-spotlight-bubble {
	position: absolute;
	z-index: 10002;
	background: white;
	color: #333;
	padding: 8px 8px 7px;
	line-height: 1.25;
	border-radius: 4px;
	font-weight: bold;
	font-size: 13px;
	text-align: center;
	pointer-events: none;
	white-space: pre-line;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
	max-width: 108px;
}

.tut-spotlight-arrow {
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-width: 6px 6px 0;
	border-style: solid;
	border-color: white transparent transparent transparent;
}

.cleared-item-count {
	position: absolute;
	bottom: -2px;
	right: -2px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	font-size: 11px;
	font-weight: bold;
	padding: 0 4px;
	border-radius: 6px;
	border: 1px solid #fff;
}

.cleared-item-base {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	cursor: pointer;
	overflow: visible;
}

.cleared-item-emoji {
	font-size: 24px;
}

.gacha-icon-style {
	font-size: 24px;
	transition: transform 0.3s;
	display: inline-block;
}

.gameover-penalty-text {
	color: #ff3333;
	font-size: 14px;
	line-height: 1.5;
	display: block;
	margin-top: 5px;
}

.gameover-penalty-text.is-challenge-reward {
	color: #7CFC00;
}


.vibration-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 10px;
	background: #444;
	padding: 10px 15px;
	border-radius: 8px;
	box-sizing: border-box;
}

.vibration-label {
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}

.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 26px;
	margin: 0;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked+.slider {
	background-color: var(--success, #2ecc71);
}

input:checked+.slider:before {
	transform: translateX(24px);
}

#charge-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: none;
	pointer-events: none;
	z-index: 3;
}

.skill-charge-gauge {
	position: absolute;
	inset: 0;
	height: 100%;
	border-radius: 5px;
	background: transparent;
	border: none;
	overflow: hidden;
	box-shadow: none;
}

#allfocus-charge-gauge {
	z-index: 1;
}

#wallet-charge-gauge {
	z-index: 2;
}

.skill-charge-fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0%;
	opacity: 0;
	border-radius: 5px;
	transition: height 0.18s linear, opacity 0.18s linear, background 0.24s linear, box-shadow 0.24s linear;
}

#music-time-wrap {
	position: relative;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: min(260px, calc(100vw - 80px));
	margin: 8px auto 0;
	pointer-events: none;
	transform: none;
}

#music-vertical-time-bar {
	position: relative;
	width: 80%;
	height: 11px;
	overflow: hidden;
	background: rgba(20, 20, 20, 0.7);
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 999px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

#music-time-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(to right, rgba(255, 0, 120, 0.9), rgba(0, 220, 255, 0.9));
	z-index: 1;
	pointer-events: none;
	transition: width 0.1s linear;
}

#music-vertical-line {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.7);
	z-index: 2;
	pointer-events: none;
	display: none !important;
	box-shadow: 0 0 4px #000;
}

.organ-progress-container {
	width: calc(100% - 10px);
	height: 10px;
	background: #333;
	border-radius: 5px;
	margin: 10px 5px 12px 5px;
	overflow: visible;
	cursor: pointer;
	position: relative;
}

.organ-progress-bar {
	width: 0%;
	height: 100%;
	background: #9b59b6;
	border-radius: 5px;
	transition: width 0.1s linear;
	pointer-events: none;
	position: relative;
}

.organ-jog {
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.collection-grid-icon {
	font-size: 28px;
	margin-bottom: 2px;
}

.collection-grid-count {
	font-size: 10px;
	margin-top: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.collection-grid-count.has-count {
	color: var(--gold);
}

.collection-grid-count.no-count {
	color: #888;
}

.collection-list-icon {
	font-size: 30px;
	margin-right: 15px;
}

.collection-list-name {
	font-size: 14px;
	color: var(--gold);
	font-weight: bold;
}

.collection-list-count {
	font-size: 11px;
	color: #fff;
}

.collection-list-desc {
	font-size: 11px;
	color: #aaa;
	margin-top: 2px;
	font-family: sans-serif;
}

.collection-list-price {
	font-size: 11px;
	color: var(--success);
	margin-top: 2px;
}

.btn-epic-use {
	background: #9b59b6 !important;
	color: white !important;
}

.stage-lock-icon {
	position: absolute;
	font-size: 24px;
	z-index: 5;
}

.stage-btn-icon-base {
	width: 110px;
	height: 52px;
	margin: 0;
	display: inline-block;
	transform: scale(0.9);
	background-size: 200% 400%;
}

.splash-version-text {
	position: absolute;
	top: 35px;
	left: 50%;
	transform: translateX(-50%) scale(0.8);
	font-weight: 500;
	font-size: 100%;
	color: #985e2c;
	z-index: 10;
	text-shadow: none;
}

.splash-start-btn {
	position: absolute;
	top: calc(50% - 36px);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
	width: 160px;
	font-size: 18px;
}

.splash-start-btn:active {
	transform: translate(-50%, calc(-50% + 2px)) !important;
	box-shadow: 0 2px #ccc !important;
}

.tutorial-highlighted-btn {
	position: absolute !important;
	z-index: 10001 !important;
	box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8) !important;
	pointer-events: auto !important;
	transform: scale(1.1) !important;
	display: flex !important;
	margin: 0 !important;
}

.tutorial-highlighted-btn.is-allfocus-spotlight {
	--skill-shadow-color: rgba(24, 62, 176, 0.4) !important;
	--skill-shell-glow-top: rgba(178, 216, 255, 0.6) !important;
	--skill-shell-rim: #5f97ff !important;
	--skill-shell-face: #3b73f2 !important;
	--skill-shell-inner: #2a56ca !important;
	--skill-hole-bg: #1c3694 !important;
	--arcade-button-top: #95c4ff !important;
	--arcade-button-face: #4c8dff !important;
	--arcade-button-edge: #2c5fd8 !important;
	--arcade-button-core: #18338b !important;
}

.tutorial-highlighted-btn.is-wallet-spotlight {
	--skill-shadow-color: rgba(165, 122, 0, 0.4) !important;
	--skill-shell-glow-top: rgba(255, 243, 168, 0.6) !important;
	--skill-shell-rim: #ffe46a !important;
	--skill-shell-face: #ffc928 !important;
	--skill-shell-inner: #f0b10d !important;
	--skill-hole-bg: #b36600 !important;
	--arcade-button-top: #fff3a0 !important;
	--arcade-button-face: #ffd233 !important;
	--arcade-button-edge: #d99a00 !important;
	--arcade-button-core: #9c6700 !important;
}

#all-focus-btn.tutorial-highlighted-btn,
#wallet-btn.tutorial-highlighted-btn {
	z-index: 10005 !important;
}

.loading-bar-container {
	position: absolute;
	top: calc(50% - 36px);
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 10px;
	background: #333;
	border: 2px solid #fff;
	border-radius: 5px;
	z-index: 10000;
}

.loading-bar-fill {
	width: 0%;
	height: 100%;
	background: var(--gold);
	transition: width 0.1s;
}

.loading-text {
	position: absolute;
	top: calc(50% - 15px);
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 16px;
	z-index: 10000;
	font-weight: bold;
	animation: blink 1s infinite;
}

@keyframes pop-center {
	0% {
		transform: translate(-50%, -50%) scale(0);
	}

	80% {
		transform: translate(-50%, -50%) scale(1.2);
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

.splash-pop-anim {
	animation: pop-center 0.4s ease-out;
}


@keyframes newStagePop {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	60% {
		transform: scale(1.1);
		opacity: 1;
	}

	60% {
		transform: scale(1.07);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.new-stage-anim {
	animation: newStagePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	animation: newStagePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	box-shadow: 0 0 20px var(--gold), 0 0 0 1px var(--gold);
	border: 1px solid var(--gold) !important;
	z-index: 10;
}


#music-time-display {
	position: relative;
	width: 144px;
	text-align: center;
	color: #ffe066;
	font-size: 17px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #000;
	pointer-events: none;
	white-space: nowrap;
}

#test-btn,
#auto-skill-btn {
	position: absolute !important;
	left: 0px !important;
	z-index: 3001 !important;
	background: rgba(0, 0, 0, 0.62);
	color: #fff !important;
	padding: 8px 42px 8px 12px !important;
	border: 1px solid #999 !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: bold !important;
	cursor: pointer !important;
	width: auto !important;
	height: auto !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	display: block;
	text-align: left !important;
	letter-spacing: 0.04em;
	transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

#test-btn.is-enabled,
#auto-skill-btn.is-enabled {
	background: rgba(24, 141, 72, 0.82) !important;
	border-color: rgba(170, 255, 204, 0.9) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(140, 255, 184, 0.18) !important;
}

#test-btn::before,
#auto-skill-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 8px;
	width: 24px;
	height: 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
	transform: translateY(-50%);
	transition: background 0.16s ease;
}

#test-btn::after,
#auto-skill-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 19px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transform: translateY(-50%);
	transition: right 0.16s ease, background 0.16s ease;
}

#test-btn.is-enabled::before,
#auto-skill-btn.is-enabled::before {
	background: rgba(210, 255, 226, 0.45);
}

#test-btn.is-enabled::after,
#auto-skill-btn.is-enabled::after {
	right: 9px;
	background: #f7fff9;
}



#eq-toggle-btn {
	display: none !important;
}

#auto-skill-btn {
	right: auto !important;
	min-width: 0 !important;
	text-align: left !important;
}

#test-control-dock {
	position: absolute !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 118px;
	min-height: 92px;
	z-index: 9506 !important;
	display: none;
	pointer-events: none;
	overflow: visible;
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

#test-control-dock.is-collapsed {
	transform: translateX(-100%) !important;
}

#test-control-panel-stack {
	width: 100%;
	pointer-events: auto;
	transition: opacity 0.18s ease-out;
}

#test-control-dock.is-collapsed #test-control-panel-stack {
	opacity: 0;
	pointer-events: none;
}

#test-control-box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	background: rgba(20, 14, 32, 0.88);
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-left: none;
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.24);
}

#test-control-box #test-btn,
#test-control-box #auto-skill-btn {
	position: relative !important;
	width: 100% !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 36px 0 10px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	text-align: left !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

#test-performance-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	width: 100%;
}

.perf-toggle-btn {
	position: relative !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border-radius: 7px !important;
	border: 1px solid rgba(128, 147, 196, 0.36) !important;
	background: rgba(18, 16, 28, 0.92) !important;
	color: rgba(225, 235, 255, 0.92) !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 10px !important;
	font-weight: bold !important;
	letter-spacing: 0.02em !important;
	line-height: 1 !important;
}

.perf-toggle-btn.is-enabled {
	background: rgba(22, 115, 68, 0.92) !important;
	border-color: rgba(164, 255, 204, 0.74) !important;
	color: #f7fff9 !important;
}

#test-control-tab {
	position: absolute !important;
	right: -21px !important;
	top: 40% !important;
	transform: translateY(-50%) !important;
	width: 26px !important;
	height: 92px !important;
	padding: 6px 0 !important;
	border: none !important;
	border-radius: 0 14px 14px 0 !important;
	background: rgba(20, 14, 32, 0.88) !important;
	color: #ffec80 !important;
	font-size: 11px !important;
	font-weight: bold !important;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 0.08em;
	text-align: center;
	display: block;
	pointer-events: auto !important;
	box-shadow: 4px 0 12px rgba(0, 0, 0, 0.24) !important;
	cursor: pointer;
}

#music-mixer-dock {
	position: absolute !important;
	left: 0 !important;
	right: auto !important;
	bottom: 174px !important;
	width: min(292px, calc(100% - 34px));
	z-index: 9505 !important;
	display: none;
	pointer-events: none;
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

#music-mixer-dock.is-collapsed {
	transform: translateX(-100%) !important;
}

#music-mixer-panel-stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	pointer-events: auto;
	transition: opacity 0.18s ease-out;
}

#music-mixer-dock.is-collapsed #music-mixer-panel-stack {
	opacity: 0;
	pointer-events: none;
}

#music-mixer-tab {
	position: absolute !important;
	right: -22px !important;
	left: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 26px !important;
	height: 92px !important;
	padding: 6px 0 !important;
	border: none !important;
	border-radius: 0 14px 14px 0 !important;
	background: rgba(20, 14, 32, 0.88) !important;
	color: #ffec80 !important;
	font-size: 11px !important;
	font-weight: bold !important;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 0.08em;
	text-align: center;
	display: block;
	pointer-events: auto !important;
	box-shadow: 4px 0 12px rgba(0, 0, 0, 0.24) !important;
	cursor: pointer;
}

#music-mixer-unified-box {
	background-color: rgba(20, 14, 32, 0.88);
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-left: none;
	border-radius: 0 14px 14px 0;
	padding: 6px;
	display: flex;
	flex-direction: column;
}

.music-mixer-divider {
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
	margin: 6px 0;
}

#music-stage-eq-wrap,
#music-hit-volume-wrap {
	display: none;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 4px 6px;
	box-sizing: border-box;
}

#music-stage-eq-title,
#music-hit-volume-title {
	color: #ffec80;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-align: left;
	width: 100%;
}

.music-stage-eq-row {
	display: grid;
	grid-template-columns: 42px 1fr 40px;
	align-items: center;
	gap: 8px;
}

.music-stage-eq-name,
.music-stage-eq-value {
	color: #fff;
	font-size: 10px;
	white-space: nowrap;
}

.music-stage-eq-value {
	text-align: right;
	color: #ffec80;
}

.music-stage-eq-slider {
	width: 100%;
	accent-color: #7CFC98;
}

#music-hit-volume-wrap {
	position: relative !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	z-index: auto !important;
	display: none;
	flex-direction: column;
	gap: 6px;
	width: 88%;
	margin-right: 26px;
	padding: 10px 12px;
	background: rgba(20, 14, 32, 0.82);
	align-self: flex-end;
	border-radius: 18px;
	border-bottom-right-radius: 0;
	box-sizing: border-box;
}

#music-hit-volume-title {
	color: #ffec80;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-align: left;
	width: 100%;
}

#music-hit-volume-label {
	text-align: right;
}

#music-hit-volume-wrap .music-stage-eq-slider {
	width: 100%;
	accent-color: #ffcc00;
}

.hidden {
	display: none !important;
}

.splash-fade-out {
	opacity: 0;
	transition: opacity 0.3s;
}

.tutorial-target-pos {
	position: relative;
	top: 100px;
}


@keyframes revealFilter {
	from {
		filter: brightness(0);
		opacity: 0.6;
	}

	to {
		filter: brightness(1);
		opacity: 1;
	}
}

.reveal-filter-anim {
	animation: revealFilter 1s ease-out forwards;
	z-index: 10;
}


.challenge-progress-container {
	margin: 15px 0;
	padding: 15px 10px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	text-align: center;
	border: 1px solid #444;
}

.challenge-progress-label {
	font-family: 'DungGeunMo', sans-serif;
	color: var(--gold);
	font-size: 14px;
	margin-bottom: 20px;
	text-shadow: 1px 1px 0 #000;
}

.challenge-track {
	position: relative;
	height: 10px;
	background: #222;
	border-radius: 5px;
	margin: 0 15px;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

.challenge-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, #3498db, #ffcc00);
	border-radius: 5px;
	transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.challenge-marker {
	display: none;
}

.challenge-marker-circle {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	background: #fff;
	border: 4px solid #ffcc00;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: left 1.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s ease-out, border-color 0.2s ease-out;
	z-index: 2;
	box-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}

.challenge-stage-val {
	font-family: 'Press Start 2P', monospace;
	font-size: 12px;
	color: #333;
	transition: color 0.2s ease-out;
}

.rank-badge {
	font-size: 11px;
	background: #ff3333;
	color: white;
	padding: 2px 6px;
	border-radius: 10px;
	margin-left: 5px;
	vertical-align: middle;
}

.challenge-stage-text {
	color: #fff;
	font-size: 14px;
}

#challenge-stage-val {
	color: var(--accent);
	font-weight: bold;
	font-size: 18px;
}

.stats-single-btn-row {
	display: flex !important;
	width: 100% !important;
	margin-bottom: 15px !important;
	padding: 0 10px;
	box-sizing: border-box;
}

#btn-open-challenge-records {
	width: 100% !important;
	background: #d4f25f !important;
	color: #111 !important;
}

.play-details-challenge-section {
	margin-bottom: 15px;
}

.challenge-ranking-panel {
	max-height: 90%;
	display: flex;
	flex-direction: column;
	background: #222;
	border: 2px solid #444;
	border-radius: 15px;
	width: 300px;
	padding: 20px;
	box-sizing: border-box;
}

.challenge-summary-card {
	width: 100%;
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid #4d4d4d;
	border-radius: 12px;
	padding: 12px;
	box-sizing: border-box;
	margin: 10px 0;
}

.challenge-summary-card.is-compact {
	padding: 10px;
	margin: 8px 0;
}

.challenge-summary-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.challenge-summary-title {
	color: var(--gold);
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}

.challenge-summary-status {
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: bold;
	color: #111;
	background: #ffb16f;
}

.challenge-summary-status.is-clear {
	background: #8ef58e;
}

.challenge-timeline {
	position: relative;
	padding: 16px 0 6px;
}

.challenge-timeline.is-compact {
	padding-top: 12px;
}

.challenge-timeline-line {
	position: absolute;
	top: 25px;
	left: 8px;
	right: 8px;
	height: 4px;
	background: #383838;
	border-radius: 999px;
}

.challenge-timeline.is-compact .challenge-timeline-line {
	top: 21px;
}

.challenge-timeline-nodes {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--challenge-stage-count, 16), minmax(0, 1fr));
	gap: 2px;
}

.challenge-timeline-node {
	width: 14px;
	height: 14px;
	margin: 0 auto;
	border-radius: 999px;
	background: #202020;
	border: 2px solid #555;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	font-weight: bold;
	box-sizing: border-box;
}

.challenge-timeline.is-compact .challenge-timeline-node {
	width: 12px;
	height: 12px;
	font-size: 6px;
}

.challenge-timeline-node.is-active {
	background: #ffe066;
	border-color: #fff0a6;
	color: #111;
}

.challenge-timeline-node.is-current {
	transform: scale(1.12);
	box-shadow: 0 0 0 2px rgba(255, 125, 125, 0.45);
}

.challenge-timeline-node.is-clear {
	background: #89f089;
	border-color: #f1fff1;
	color: #123a12;
	transform: scale(1.12);
}

.challenge-timeline-labels {
	display: grid;
	grid-template-columns: repeat(var(--challenge-stage-count, 16), minmax(0, 1fr));
	gap: 2px;
	margin-top: 6px;
}

.challenge-timeline-label {
	color: #888;
	font-size: 6px;
	text-align: center;
}

.challenge-summary-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	background: rgba(0, 0, 0, 0.3);
	padding: 10px;
	border-radius: 8px;
	margin-top: 10px;
}

.challenge-summary-stat {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 250px;
	font-family: 'DungGeunMo', sans-serif;
	font-size: 14px;
	color: #eee;
}

.challenge-summary-stat-label {
	color: #eee;
}

.challenge-summary-stat-value {
	color: #fff;
	font-weight: bold;
}

.challenge-online-status {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 11px;
	line-height: 1.4;
	word-break: keep-all;
}

.challenge-online-status-label {
	flex: 0 0 auto;
	color: #a8a8a8;
}

.challenge-online-status-value {
	flex: 1 1 auto;
	text-align: right;
	font-weight: bold;
	color: #d8d8d8;
}

.challenge-online-status.is-pending .challenge-online-status-value {
	color: var(--gold);
}

.challenge-online-status.is-success .challenge-online-status-value {
	color: #8ef58e;
}

.challenge-online-status.is-error .challenge-online-status-value {
	color: #ff9e9e;
}

.challenge-rank-display {
	text-align: center;
	margin: 10px 0;
	font-family: 'DungGeunMo', sans-serif;
	padding: 12px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 8px;
	border: 1px solid #555;
}

.challenge-rank-display .rank-label {
	color: #ccc;
	margin-right: 15px;
	font-size: 14px;
	vertical-align: middle;
}

.challenge-rank-display .rank-value {
	font-size: 22px;
	font-weight: bold;
	color: #3498db;
	vertical-align: middle;
}

.challenge-rank-display .rank-value.is-top-rank {
	color: #ff3333;
	text-shadow: 1px 1px 2px #000;
}

.challenge-rank-display .rank-crown {
	margin-right: 5px;
	font-size: 20px;
}

.challenge-rank-criteria {
	margin: 10px 0 6px;
	color: #cfd8dc;
	font-size: 11px;
	line-height: 1.6;
	text-align: center;
}

.challenge-rank-preview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.challenge-rank-preview-item {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	padding: 8px 6px;
}

.challenge-rank-preview-label {
	color: #aaa;
	font-size: 9px;
}

.challenge-rank-preview-value {
	color: var(--gold);
	font-size: 13px;
	font-weight: bold;
	margin-top: 4px;
}

.challenge-rank-tabs {
	display: flex;
	gap: 8px;
	margin: 10px 0 12px;
}

.challenge-rank-tab {
	flex: 1;
	border: none;
	border-radius: 10px;
	padding: 10px 6px;
	background: #333;
	color: #ddd;
	font-size: 11px;
	font-weight: bold;
}

.challenge-rank-tab.is-active {
	background: var(--gold);
	color: #111;
}

.challenge-rank-list {
	flex: 1;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	padding: 8px;
	box-sizing: border-box;
	min-height: 180px;
}

.challenge-rank-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 8px;
}

.challenge-rank-row.is-top {
	background: rgba(255, 215, 0, 0.12);
}

.challenge-rank-num {
	min-width: 36px;
	height: 36px;
	border-radius: 999px;
	background: #3a3a3a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
}

.challenge-rank-row.is-top .challenge-rank-num {
	background: var(--gold);
	color: #111;
}

.challenge-rank-body {
	min-width: 0;
	flex: 1;
	text-align: left;
}

.challenge-rank-name {
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.challenge-rank-meta {
	color: #b7b7b7;
	font-size: 10px;
}

.challenge-empty {
	padding: 16px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	color: #bbb;
	text-align: center;
	font-size: 12px;
}

.challenge-empty.is-compact {
	margin: 8px 0;
}

.challenge-gameover-open {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.challenge-gameover-overlay {
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: none;
}

.challenge-gameover-panel {
	max-height: calc(100% - 18px);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 14px 16px 14px;
	box-sizing: border-box;
	overscroll-behavior: contain;
}

.challenge-gameover-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.challenge-gameover-bubble {
	background: #fff;
	padding: 10px 14px 8px 14px;
	border: 3px solid #222;
	border-radius: 15px;
	font-weight: 500;
	margin-bottom: -40px;
	z-index: 4;
	position: relative;
	color: #000;
	margin-top: 20px;
}

.challenge-gameover-hero {
	margin: 5px auto 24px auto;
}

.challenge-gameover-text {
	margin-top: 0px;
	color: var(--danger);
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 2px;
}

.challenge-gameover-subtext {
	margin-top: 6px;
	margin-bottom: 4px;
	font-size: 12px;
}

.challenge-gameover-restart {
	display: none;
}

.challenge-gameover-wrapper .challenge-summary-card.is-compact {
	padding: 6px;
	margin: 2px 0 0;
}

.challenge-summary-action-slot {
	width: 100%;
	margin-top: 8px;
}

.challenge-gameover-inline-btn {
	width: 100%;
	margin: 0;
}

.challenge-gameover-wrapper .challenge-summary-header {
	margin-bottom: 6px;
}

.challenge-gameover-wrapper .challenge-summary-title {
	font-size: 10px;
}

.challenge-gameover-wrapper .challenge-summary-status {
	padding: 2px 5px;
	font-size: 8px;
}

.challenge-gameover-wrapper .challenge-timeline {
	padding: 8px 0 2px;
}

.challenge-gameover-wrapper .challenge-timeline-line {
	top: 17px;
}

.challenge-gameover-wrapper .challenge-timeline-node {
	width: 14px;
	height: 14px;
	font-size: 6px;
}

.challenge-gameover-wrapper .challenge-timeline-label {
	font-size: 6px;
}

.challenge-gameover-wrapper .challenge-summary-stats,
.challenge-gameover-wrapper .challenge-rank-preview {
	gap: 5px;
	margin-top: 6px;
}

.challenge-gameover-wrapper .challenge-summary-stat,
.challenge-gameover-wrapper .challenge-rank-preview-item {
	padding: 5px 3px;
}

.challenge-gameover-wrapper .challenge-summary-stat-label,
.challenge-gameover-wrapper .challenge-rank-preview-label {
	font-size: 7px;
}

.challenge-gameover-wrapper .challenge-summary-stat-value,
.challenge-gameover-wrapper .challenge-rank-preview-value {
	font-size: 10px;
}

.challenge-gameover-wrapper .challenge-online-status {
	margin-top: 6px;
	padding-top: 6px;
	gap: 6px;
	font-size: 8px;
}

.challenge-marker-circle {
	left: 0%;
}

.challenge-score-note {
	font-size: 13px;
	color: #aaa;
	margin-top: 8px;
}

.challenge-score-value {
	color: #ffcc00;
}

#tap {
	position: relative;
	display: flex !important;
	justify-content: center;
	align-items: flex-start;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: 114px !important;
	width: 90% !important;
	max-width: 442px;
	margin: 0 auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	image-rendering: auto;
	transition: transform 0.1s ease-out;
	--board-rest-transform: scale(0.94) translateY(8px);
	--arcade-shadow: rgba(24, 62, 176, 0.20);
	--arcade-base-face: #d9ecff;
	--arcade-base-rim: #f5fbff;
	--arcade-base-edge: #8fbaf0;
	--arcade-base-inner: #a9cdf6;
	--arcade-button-top: #95c4ff;
	--arcade-button-face: #4c8dff;
	--arcade-button-edge: #2c5fd8;
	--arcade-button-core: #18338b;
	--arcade-button-shadow: rgba(18, 38, 110, 0.26);
	--arcade-hole-bg: #1c3694;
	--arcade-button-border: rgba(70, 123, 255, 0.22);
	--arcade-button-bottom-shadow: rgba(30, 56, 145, 0.9);
	--arcade-button-highlight-a: #d6edff;
	--arcade-button-highlight-b: #9ecbff;
	--arcade-button-highlight-c: #6ca8ff;
	margin: 0 22px 0 0 !important;
	left: -25px;
	top: -5px;
	z-index: 10;
}

#tap:active {
	transform: none !important;
	box-shadow: none !important;
}

#all-focus-btn,
#wallet-btn {
	position: relative;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.01) !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	line-height: 0 !important;
	font-size: 0 !important;
	color: transparent !important;
	text-shadow: none !important;
	transform-origin: center 85%;
	--board-rest-transform: scale(0.94) translateY(8px);
	--arcade-shadow: rgba(35, 27, 21, 0.13);
	--arcade-base-face: #f8f7f5;
	--arcade-base-rim: #ffffff;
	--arcade-base-edge: #d8d2cc;
	--arcade-base-inner: #ece7e2;
	margin: 0 -8px -18px 0 !important;
	left: 20px;
	top: 16px;
	pointer-events: auto !important;
	z-index: 120 !important;
	isolation: isolate;
	border-radius: 28px;
}

#all-focus-btn::before,
#wallet-btn::before {
	display: none !important;
	content: none !important;
}

#all-focus-btn {
	--arcade-shadow: rgba(56, 56, 56, 0.22);
	--arcade-base-rim: #8a8a8a;
	--arcade-base-face: #686868;
	--arcade-base-edge: #424242;
	--arcade-base-inner: #575757;
	--arcade-button-top: #b6b6b6;
	--arcade-button-face: #848484;
	--arcade-button-edge: #5c5c5c;
	--arcade-button-core: #333333;
	--arcade-button-shadow: rgba(62, 62, 62, 0.28);
}

#wallet-btn {
	--arcade-button-top: #fff3a0;
	--arcade-button-face: #ffd233;
	--arcade-button-edge: #d99a00;
	--arcade-button-core: #9c6700;
	--arcade-button-shadow: rgba(217, 154, 0, 0.26);
}

.piano-key {
	position: relative;
	box-sizing: border-box;
	overflow: visible;
	pointer-events: auto;
	transform-origin: center 75%;
	will-change: transform;
	--rest-x: 0px;
	--rest-y: 0px;
	--rest-rotate: 0deg;
	--rest-scale: 1;
	--join-x: 0px;
	--join-y: 0px;
	--join-rotate: 0deg;
	--burst-x: 0px;
	--burst-y: 0px;
	--burst-rotate: 0deg;
	--burst-scale: 1;
	--bounce-x: 0px;
	--bounce-y: 0px;
	--bounce-rotate: 0deg;
	--bounce-scale: 1;
	transform:
		translateX(calc(var(--rest-x) + var(--join-x))) translateY(calc(var(--rest-y) + var(--join-y))) rotate(calc(var(--rest-rotate) + var(--join-rotate))) scale(var(--rest-scale));
	transition: transform 0.1s cubic-bezier(0.2, 0.78, 0.22, 1), filter 0.12s ease-out, background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.arcade-button-hole {
	position: absolute;
	left: 50%;
	bottom: 28px;
	width: 86px;
	height: 66px;
	transform: translateX(-50%);
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
	background: var(--arcade-hole-bg, #8b1414);
	box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.arcade-button {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(180deg, var(--arcade-button-face) 0%, var(--arcade-button-edge) 100%);
	background: linear-gradient(180deg, var(--arcade-button-face) 5px, var(--arcade-button-edge) 100%);
	border-radius: 50%;
	border: 1px solid var(--arcade-button-border, rgba(152, 17, 17, 0.18));
	border-bottom-style: solid;
	border-bottom-width: calc(1.8px - var(--burst-y, 0px)) !important;
	border-bottom-color: var(--arcade-button-edge, #a11414);
	box-shadow: inset 0 -8px 0 -1px var(--arcade-button-bottom-shadow, rgba(175, 20, 20, 0.9)), inset 0 1px 0 rgba(255, 255, 255, 0.12);
	z-index: 3;
	--burst-x: 0px;
	--burst-y: 0px;
	--burst-rotate: 0deg;
	--burst-scale: 1;
	--bounce-x: 0px;
	--bounce-y: 0px;
	--bounce-rotate: 0deg;
	--bounce-scale: 1
}

.arcade-button::before {
	content: '';
	position: absolute;
	left: 4px;
	right: 4px;
	top: -4px;
	height: 52px;
	border-radius: 50%;
	background:
		radial-gradient(ellipse at 36% 24%, var(--arcade-button-highlight-a, #ffaea7) 0%, var(--arcade-button-highlight-b, #ff6a61) 18%, var(--arcade-button-top) 34%, var(--arcade-button-highlight-c, #ff4d44) 62%, var(--arcade-button-face) 100%);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.28),
		inset 0 -2px 0 transparent;
	pointer-events: none;
	transition: top 0.1s cubic-bezier(0.2, 0.78, 0.22, 1), height 0.1s cubic-bezier(0.2, 0.78, 0.22, 1), filter 0.12s ease-out, background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.arcade-button.is-bursting {
	z-index: 4;
}

.arcade-button.is-active-top,
.arcade-button.is-active-bottom,
.arcade-button:active {
	filter: brightness(0.985);
	box-shadow:
		inset 0 -4px 0 1px rgba(135, 20, 20, 0.9),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	z-index: 6;
}

.arcade-button.is-active-top::before,
.arcade-button.is-active-bottom::before,
.arcade-button.is-pressing::before,
.arcade-button:active::before {
	top: 0px;
	height: 60px;
}

.skill-ready-text {
	display: none !important;
}

@keyframes black-key-ready-pulse {

	0%,
	100% {
		filter: brightness(1);
	}

	50% {
		filter: brightness(1.08);
	}
}

.black-key.is-ready {
	animation: black-key-ready-pulse 1.05s ease-in-out infinite;
	z-index: 12;
}

#keyboard-3d-wrapper,
.skill-arcade-shell {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	transform: var(--board-rest-transform);
	transform-origin: center 85%;
	isolation: isolate;
	overflow: visible;
}

#keyboard-3d-wrapper {
	width: 176px;
	height: 126px;
	margin: 0 auto;
}

.skill-arcade-shell {
	width: 100%;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

#keyboard-3d-wrapper::before,
.skill-arcade-shell::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 100px;
	height: 24px;
	transform: translateX(-50%);
	background: var(--arcade-shadow);
	border-radius: 50%;
	filter: blur(10px);
	pointer-events: none;
	z-index: 0;
	transition: opacity 180ms ease;
}

#keyboard-3d-wrapper::after,
.skill-arcade-shell::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 114px;
	height: 82px;
	transform: translateX(-50%);
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 16%),
		radial-gradient(ellipse at 74% 84%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 12%),
		linear-gradient(180deg, var(--arcade-base-rim) 0%, var(--arcade-base-face) 34%, var(--arcade-base-inner) 76%, #e1dbd5 100%);
	border: 1px solid rgba(188, 181, 175, 0.7);
	border-radius: 50%;
	box-shadow:
		inset 0 4px 0 rgba(255, 255, 255, 0.74),
		inset 0 -6px 0 var(--arcade-base-edge),
		inset 0 -14px 6px -4px rgba(0, 0, 0, 0.18),
		inset 0 0 0 9px rgba(255, 255, 255, 0.12),
		0 10px 16px rgba(56, 44, 35, 0.09);
	pointer-events: none;
	z-index: 1;
	transition: box-shadow 180ms ease;
}

#keyboard-3d-wrapper::after {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255, 235, 231, 0.88) 0%, rgba(255, 235, 231, 0) 16%),
		radial-gradient(ellipse at 74% 84%, rgba(255, 207, 200, 0.74) 0%, rgba(255, 207, 200, 0) 12%),
		linear-gradient(180deg, var(--arcade-base-rim) 0%, var(--arcade-base-face) 34%, var(--arcade-base-inner) 76%, var(--arcade-base-edge) 100%);
	border: 1px solid rgba(201, 122, 116, 0.78);
}

#all-focus-btn,
#wallet-btn {
	--skill-shadow-color: rgba(56, 56, 56, 0.22);
	--skill-shell-glow-top: rgba(255, 255, 255, 0.10);
	--skill-shell-glow-bottom: rgba(222, 222, 222, 0.07);
	--skill-shell-rim: #8a8a8a;
	--skill-shell-face: #686868;
	--skill-shell-inner: #575757;
	--skill-shell-edge: #424242;
	--skill-shell-border: rgba(169, 169, 169, 0.52);
	--skill-shell-top-shine: rgba(255, 255, 255, 0.14);
	--skill-shell-bottom-edge: rgba(55, 55, 55, 0.84);
	--skill-shell-inner-ring: rgba(255, 255, 255, 0.05);
	--skill-shell-drop-shadow: rgba(20, 20, 20, 0.18);
	--skill-hole-bg: #282828;
	--skill-hole-shine: rgba(235, 235, 235, 0.10);
	--skill-dome-border: rgba(118, 118, 118, 0.24);
	--skill-dome-bottom-edge: rgba(60, 60, 60, 0.9);
	--skill-dome-top-inner: rgba(255, 255, 255, 0.10);
	--skill-dome-highlight-a: #f1f1f1;
	--skill-dome-highlight-b: #cbcbcb;
	--skill-dome-highlight-c: #9a9a9a;
	--skill-dome-highlight-shadow: rgba(255, 255, 255, 0.16);
	--skill-dome-highlight-bottom: transparent;
	--skill-dome-core-shadow: rgba(30, 30, 30, 0.34);
	--skill-dome-core-shadow-soft: rgba(30, 30, 30, 0.12);
	--skill-drain-top: rgba(220, 220, 220, 0.92);
	--skill-drain-mid: rgba(150, 150, 150, 0.84);
	--skill-drain-bottom: rgba(74, 74, 74, 0.18);
}

#all-focus-btn.is-ready {
	--skill-shadow-color: rgba(24, 62, 176, 0.20);
	--skill-shell-glow-top: rgba(178, 216, 255, 0.22);
	--skill-shell-glow-bottom: rgba(120, 172, 255, 0.14);
	--skill-shell-rim: #5f97ff;
	--skill-shell-face: #3b73f2;
	--skill-shell-inner: #2a56ca;
	--skill-shell-edge: #2147aa;
	--skill-shell-border: rgba(69, 116, 255, 0.78);
	--skill-shell-top-shine: rgba(214, 234, 255, 0.18);
	--skill-shell-bottom-edge: rgba(22, 47, 122, 0.88);
	--skill-shell-inner-ring: rgba(117, 166, 255, 0.08);
	--skill-shell-drop-shadow: rgba(18, 38, 110, 0.16);
	--skill-hole-bg: #1c3694;
	--skill-hole-shine: rgba(163, 207, 255, 0.14);
	--arcade-button-top: #95c4ff;
	--arcade-button-face: #4c8dff;
	--arcade-button-edge: #2c5fd8;
	--arcade-button-core: #18338b;
	--skill-dome-border: rgba(70, 123, 255, 0.22);
	--skill-dome-bottom-edge: rgba(30, 56, 145, 0.9);
	--skill-dome-top-inner: rgba(255, 255, 255, 0.10);
	--skill-dome-highlight-a: #d6edff;
	--skill-dome-highlight-b: #9ecbff;
	--skill-dome-highlight-c: #6ca8ff;
	--skill-dome-highlight-shadow: rgba(255, 255, 255, 0.18);
	--skill-dome-highlight-bottom: transparent;
	--skill-dome-core-shadow: rgba(11, 38, 127, 0.34);
	--skill-dome-core-shadow-soft: rgba(11, 38, 127, 0.12);
}

#wallet-btn {
	--skill-shadow-color: rgba(165, 122, 0, 0.22);
	--skill-shell-glow-top: rgba(255, 243, 168, 0.26);
	--skill-shell-glow-bottom: rgba(255, 208, 82, 0.18);
	--skill-shell-rim: #ffe46a;
	--skill-shell-face: #ffc928;
	--skill-shell-inner: #f0b10d;
	--skill-shell-edge: #d79100;
	--skill-shell-border: rgba(255, 208, 82, 0.82);
	--skill-shell-top-shine: rgba(255, 248, 203, 0.24);
	--skill-shell-bottom-edge: rgba(160, 104, 0, 0.88);
	--skill-shell-inner-ring: rgba(255, 229, 117, 0.10);
	--skill-shell-drop-shadow: rgba(120, 84, 0, 0.18);
	--skill-hole-bg: #b36600;
	--skill-hole-shine: rgba(255, 238, 163, 0.16);
	--arcade-button-top: #fff3a0;
	--arcade-button-face: #ffd233;
	--arcade-button-edge: #d99a00;
	--arcade-button-core: #9c6700;
	--skill-dome-border: rgba(255, 212, 74, 0.26);
	--skill-dome-bottom-edge: rgba(165, 95, 0, 0.9);
	--skill-dome-top-inner: rgba(255, 255, 255, 0.12);
	--skill-dome-highlight-a: #fffbe3;
	--skill-dome-highlight-b: #ffe991;
	--skill-dome-highlight-c: #ffd252;
	--skill-dome-highlight-shadow: rgba(255, 255, 255, 0.22);
	--skill-dome-highlight-bottom: transparent;
	--skill-dome-core-shadow: rgba(130, 84, 0, 0.30);
	--skill-dome-core-shadow-soft: rgba(130, 84, 0, 0.10);
}

#all-focus-btn.is-draining-from-ready,
#wallet-btn.is-draining-from-ready {
	--skill-drain-top: rgba(214, 237, 255, 0.96);
	--skill-drain-mid: rgba(76, 141, 255, 0.90);
	--skill-drain-bottom: rgba(24, 51, 139, 0.22);
}

#all-focus-btn.is-draining-from-wallet,
#wallet-btn.is-draining-from-wallet {
	--skill-drain-top: rgba(255, 251, 227, 0.98);
	--skill-drain-mid: rgba(255, 210, 51, 0.92);
	--skill-drain-bottom: rgba(156, 103, 0, 0.22);
}

#all-focus-btn.is-drain-target-disabled,
#wallet-btn.is-drain-target-disabled {
	--skill-shadow-color: rgba(56, 56, 56, 0.22);
	--skill-shell-glow-top: rgba(255, 255, 255, 0.10);
	--skill-shell-glow-bottom: rgba(222, 222, 222, 0.07);
	--skill-shell-rim: #8a8a8a;
	--skill-shell-face: #686868;
	--skill-shell-inner: #575757;
	--skill-shell-edge: #424242;
	--skill-shell-border: rgba(169, 169, 169, 0.52);
	--skill-shell-top-shine: rgba(255, 255, 255, 0.14);
	--skill-shell-bottom-edge: rgba(55, 55, 55, 0.84);
	--skill-shell-inner-ring: rgba(255, 255, 255, 0.05);
	--skill-shell-drop-shadow: rgba(20, 20, 20, 0.18);
	--skill-hole-bg: #282828;
	--skill-hole-shine: rgba(235, 235, 235, 0.10);
	--arcade-button-top: #b6b6b6;
	--arcade-button-face: #848484;
	--arcade-button-edge: #5c5c5c;
	--arcade-button-core: #333333;
	--skill-dome-border: rgba(118, 118, 118, 0.24);
	--skill-dome-bottom-edge: rgba(60, 60, 60, 0.9);
	--skill-dome-top-inner: rgba(255, 255, 255, 0.10);
	--skill-dome-highlight-a: #f1f1f1;
	--skill-dome-highlight-b: #cbcbcb;
	--skill-dome-highlight-c: #9a9a9a;
	--skill-dome-highlight-shadow: rgba(255, 255, 255, 0.16);
	--skill-dome-highlight-bottom: transparent;
	--skill-dome-core-shadow: rgba(30, 30, 30, 0.34);
	--skill-dome-core-shadow-soft: rgba(30, 30, 30, 0.12);
}

#all-focus-btn.is-drain-target-ready,
#wallet-btn.is-drain-target-ready {
	--skill-shadow-color: rgba(24, 62, 176, 0.20);
	--skill-shell-glow-top: rgba(178, 216, 255, 0.22);
	--skill-shell-glow-bottom: rgba(120, 172, 255, 0.14);
	--skill-shell-rim: #5f97ff;
	--skill-shell-face: #3b73f2;
	--skill-shell-inner: #2a56ca;
	--skill-shell-edge: #2147aa;
	--skill-shell-border: rgba(69, 116, 255, 0.78);
	--skill-shell-top-shine: rgba(214, 234, 255, 0.18);
	--skill-shell-bottom-edge: rgba(22, 47, 122, 0.88);
	--skill-shell-inner-ring: rgba(117, 166, 255, 0.08);
	--skill-shell-drop-shadow: rgba(18, 38, 110, 0.16);
	--skill-hole-bg: #1c3694;
	--skill-hole-shine: rgba(163, 207, 255, 0.14);
	--arcade-button-top: #95c4ff;
	--arcade-button-face: #4c8dff;
	--arcade-button-edge: #2c5fd8;
	--arcade-button-core: #18338b;
	--skill-dome-border: rgba(70, 123, 255, 0.22);
	--skill-dome-bottom-edge: rgba(30, 56, 145, 0.9);
	--skill-dome-top-inner: rgba(255, 255, 255, 0.10);
	--skill-dome-highlight-a: #d6edff;
	--skill-dome-highlight-b: #9ecbff;
	--skill-dome-highlight-c: #6ca8ff;
	--skill-dome-highlight-shadow: rgba(255, 255, 255, 0.18);
	--skill-dome-highlight-bottom: transparent;
	--skill-dome-core-shadow: rgba(11, 38, 127, 0.34);
	--skill-dome-core-shadow-soft: rgba(11, 38, 127, 0.12);
}

#all-focus-btn .skill-arcade-shell::before,
#wallet-btn .skill-arcade-shell::before {
	background: var(--skill-shadow-color);
	filter: blur(9px);
}

#all-focus-btn .skill-arcade-shell::after,
#wallet-btn .skill-arcade-shell::after {
	background:
		radial-gradient(ellipse at 30% 20%, var(--skill-shell-glow-top) 0%, rgba(255, 255, 255, 0) 18%),
		radial-gradient(ellipse at 74% 84%, var(--skill-shell-glow-bottom) 0%, rgba(255, 255, 255, 0) 14%),
		linear-gradient(180deg, var(--skill-shell-rim) 0%, var(--skill-shell-face) 34%, var(--skill-shell-inner) 76%, var(--skill-shell-edge) 100%);
	border: 1px solid var(--skill-shell-border);
	box-shadow:
		inset 0 4px 0 var(--skill-shell-top-shine),
		inset 0 -6px 0 var(--skill-shell-bottom-edge),
		inset 0 -14px 6px -4px rgba(0, 0, 0, 0.22),
		inset 0 0 0 9px var(--skill-shell-inner-ring),
		0 10px 16px var(--skill-shell-drop-shadow);
	transition: background-color 0.12s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

.skill-arcade-shell .arcade-button-hole {
	background-color: var(--skill-hole-bg, #3c3c3c) !important;
}

.skill-arcade-shell .arcade-button-hole::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 4%;
	width: 92%;
	height: 10px;
	border-radius: 50%;
	background-color: var(--skill-shell-inner, #575757);
	pointer-events: none;
}

#all-focus-btn .arcade-button-hole,
#wallet-btn .arcade-button-hole {
	background: var(--skill-hole-bg);
	box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.42), inset 0 1px 3px var(--skill-hole-shine);
}

#all-focus-btn .arcade-button,
#wallet-btn .arcade-button {
	overflow: hidden;
	border: 1px solid var(--skill-dome-border);
	box-shadow:
		inset 0 -10px 0 1px var(--skill-dome-bottom-edge),
		inset 0 1px 0 var(--skill-dome-top-inner);
}

#all-focus-btn .skill-arcade-shell,
#wallet-btn .skill-arcade-shell,
#all-focus-btn .arcade-button,
#wallet-btn .arcade-button {
	transition: transform 0.1s cubic-bezier(0.2, 0.78, 0.22, 1), filter 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out, border-color 0.12s ease-out;
}

#all-focus-btn .skill-drain-wash,
#wallet-btn .skill-drain-wash {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	opacity: 0;
	transform: translateY(0) scaleY(1);
	background:
		linear-gradient(180deg, var(--skill-drain-top) 0%, var(--skill-drain-mid) 46%, var(--skill-drain-bottom) 100%);
	box-shadow:
		inset 0 12px 14px rgba(255, 255, 255, 0.14),
		inset 0 -10px 14px rgba(0, 0, 0, 0.12);
	pointer-events: none;
	z-index: 2;
}

#all-focus-btn .arcade-button::before,
#wallet-btn .arcade-button::before {
	background:
		radial-gradient(ellipse at 36% 24%, var(--skill-dome-highlight-a) 0%, var(--skill-dome-highlight-b) 14%, var(--arcade-button-top) 34%, var(--skill-dome-highlight-c) 62%, var(--arcade-button-face) 100%);
	box-shadow:
		inset 0 2px 0 var(--skill-dome-highlight-shadow),
		inset 0 -2px 0 var(--skill-dome-highlight-bottom);
	z-index: 3;
	transition: top 0.1s cubic-bezier(0.2, 0.78, 0.22, 1), height 0.1s cubic-bezier(0.2, 0.78, 0.22, 1), background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

#all-focus-btn .arcade-button::after,
#wallet-btn .arcade-button::after {
	background: radial-gradient(ellipse at center, var(--skill-dome-core-shadow) 0%, var(--skill-dome-core-shadow-soft) 72%, transparent 100%);
	z-index: 4;
	transition: background-color 0.12s ease-out;
}

#wallet-btn.is-wallet-unlocking .skill-arcade-shell {
	animation: wallet-unlock-pop 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#all-focus-btn.is-ready-popping .skill-arcade-shell,
#wallet-btn.is-ready-popping .skill-arcade-shell {
	animation: skill-ready-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes skill-ready-pop {
	0% {
		transform: var(--board-rest-transform) scale(1);
	}

	46% {
		transform: var(--board-rest-transform) scale(1.11);
	}

	72% {
		transform: var(--board-rest-transform) scale(0.97);
	}

	100% {
		transform: var(--board-rest-transform) scale(1);
	}
}

@keyframes wallet-unlock-pop {
	0% {
		transform: var(--board-rest-transform) scale(1);
	}

	48% {
		transform: var(--board-rest-transform) scale(1.12);
	}

	72% {
		transform: var(--board-rest-transform) scale(0.96);
	}

	100% {
		transform: var(--board-rest-transform) scale(1);
	}
}

#all-focus-btn:active .arcade-button,
#wallet-btn:active .arcade-button {
	filter: brightness(0.985);
	box-shadow:
		inset 0 -4px 0 1px var(--skill-dome-bottom-edge),
		inset 0 1px 0 var(--skill-dome-top-inner);
	z-index: 6;
}

#all-focus-btn.is-pressing,
#wallet-btn.is-pressing,
#all-focus-btn.is-draining-out,
#wallet-btn.is-draining-out {
	pointer-events: none;
}

#all-focus-btn.is-pressing .arcade-button,
#wallet-btn.is-pressing .arcade-button {
	filter: brightness(0.97);
	box-shadow:
		inset 0 -4px 0 1px var(--skill-dome-bottom-edge),
		inset 0 1px 0 var(--skill-dome-top-inner);
}

#all-focus-btn .arcade-button.is-active-top,
#all-focus-btn .arcade-button.is-active-bottom,
#wallet-btn .arcade-button.is-active-top,
#wallet-btn .arcade-button.is-active-bottom {
	filter: brightness(0.985);
	box-shadow:
		inset 0 -4px 0 1px var(--skill-dome-bottom-edge),
		inset 0 1px 0 var(--skill-dome-top-inner);
	z-index: 6;
}

#all-focus-btn.is-draining-out .skill-drain-wash,
#wallet-btn.is-draining-out .skill-drain-wash {
	animation: skill-color-drain 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes skill-color-drain {
	0% {
		opacity: 0.58;
		transform: translateY(0) scaleY(1);
		clip-path: inset(0 0 0 0 round 50%);
	}

	52% {
		opacity: 0.42;
		transform: translateY(22%) scaleY(0.94);
		clip-path: inset(0 0 28% 0 round 50%);
	}

	100% {
		opacity: 0;
		transform: translateY(72%) scaleY(0.52);
		clip-path: inset(52% 0 0 0 round 50%);
	}
}

.piano-key.is-bursting,
.piano-key.is-pressing {
	transform:
		translateX(calc(var(--rest-x) + var(--join-x) + var(--burst-x))) translateY(calc(var(--rest-y) + var(--join-y) + var(--burst-y))) rotate(calc(var(--rest-rotate) + var(--join-rotate) + var(--burst-rotate))) scale(var(--burst-scale));
}

@keyframes scale-pop-anim {
	0% {
		transform: scale(0);
	}

	80% {
		transform: scale(0.85);
	}

	100% {
		transform: scale(0.75);
	}
}

.start-btn-scale-pop {
	animation: scale-pop-anim 0.4s ease-out forwards;
}

.start-btn-scale-pop:active {
	transform: scale(0.75) translateY(2px) !important;
}

.start-btn-wrap {
	position: absolute;
	top: calc(50% + 255px);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

#btn-game-start {
	font-size: calc(100% + 2px);
	width: 160px;
	margin: 0;
}

.splash-overlay.is-ready-to-start {
	cursor: pointer;
	touch-action: manipulation;
}

.sub-controls {
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	gap: 0 !important;
	width: auto;
	pointer-events: auto;
	margin-bottom: -16px;
	position: relative;
	z-index: 120;
}

.controls {
	bottom: 6px !important;
	padding-right: 4px !important;
	gap: 0 !important;
	z-index: 80 !important;
}

#all-focus-btn,
#wallet-btn {
	display: none;
}

.modal-photocard-wrapper {
	width: 100%;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
}

.modal-photocard-img {
	max-width: 100%;
	height: auto;
	max-height: 200px;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
	cursor: zoom-in;
}

.photocard-fullscreen-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.85);
	z-index: 999999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: zoom-out;
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.photocard-fullscreen-overlay.show {
	opacity: 1;
}

.photocard-fullscreen-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: none;
	padding: 0 3px;
	box-sizing: border-box;
	transform: translateY(50px);
}

.photocard-fullscreen-img {
	width: 100%;
	max-height: 77vh;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

.photocard-fullscreen-text {
	color: #fff;
	font-family: 'DungGeunMo', sans-serif;
	font-size: 16px;
	margin-top: 20px;
	text-shadow: 1px 1px 2px #000;
	pointer-events: none;
	animation: blink 1.5s infinite;
}

.photocard-close-btn {
	margin-top: 20px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	color: #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}

.item-detail-panel.is-rare {
	border: 2px solid var(--gold);
	box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.item-detail-panel.is-uncommon {
	border: 2px solid #7CFC00;
	box-shadow: 0 0 15px rgba(124, 252, 0, 0.4);
}

.item-detail-panel.is-common {
	border: 2px solid #888;
	box-shadow: 0 0 10px rgba(136, 136, 136, 0.4);
}

.collection-grid-item.is-uncommon,
.collection-item-row.is-uncommon {
	border: 2px solid #7CFC00;
	box-shadow: 0 0 5px rgba(124, 252, 0, 0.3);
}

.collection-grid-item.is-common,
.collection-item-row.is-common {
	border: 1px solid rgba(255, 255, 255, 0.1);
}