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

html,
body {
	width: 100%;
	height: 100%;
	background-image: url(/33d6acdab441a7ca.jpg);
	background-size: cover;
	background-position: right;
	overflow: hidden;
	touch-action: none;
	font-family: system-ui, sans-serif;
	color: #eee;
}

#root {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

#glass-pane {
	display: flex;
	border-radius: 20px;
	backdrop-filter: blur(10px) saturate(1.1) brightness(0.95);
	-webkit-backdrop-filter: blur(14px) saturate(1.5) brightness(1.05);
	background: rgba(160, 200, 235, 0.15);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.2),
		inset 0 0 0 1px rgba(255, 255, 255, 0.2),
		0 8px 40px rgba(0, 0, 0, 0.4);
}

#ui-root {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

#ui-root * {
	pointer-events: auto;
}

#welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 320px;
	padding: 32px 16px;
}

#welcome h1 {
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	color: #ffd700;
}

#welcome p {
	font-size: 0.9rem;
	color: #888;
	text-align: center;
}

.btn {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}

.btn:active { opacity: 0.75; }
.btn-primary { background: #ffd700; color: #1a1a2e; }
.btn-secondary { background: #2a2a4a; color: #eee; border: 1px solid #444; }

.divider {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #555;
	font-size: 0.8rem;
}

.divider::before, .divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #333;
}

#create-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

#player-count-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

#player-count-row label {
	font-size: 0.85rem;
	color: #888;
	white-space: nowrap;
}

#player-count {
	flex: 1;
	padding: 10px 12px;
	background: #12122a;
	border: 1px solid #444;
	border-radius: 8px;
	color: #eee;
	font-size: 1rem;
	outline: none;
	cursor: pointer;
	appearance: none;
	text-align: center;
}

#player-count:focus { border-color: #ffd700; }

#join-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

#room-input {
	width: 100%;
	padding: 12px 14px;
	background: #12122a;
	border: 1px solid #444;
	border-radius: 8px;
	color: #eee;
	font-size: 1rem;
	letter-spacing: 0.15em;
	text-transform: lowercase;
	outline: none;
	text-align: center;
}

#room-input::placeholder { color: #555; letter-spacing: normal; text-transform: none; }
#room-input:focus { border-color: #ffd700; }

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	pointer-events: none;
}

.overlay-dark {
	background-color: rgba(0, 0, 0, 0.7);
	pointer-events: auto;
}

.overlay-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	font-family: monospace;
}

.overlay-title {
	font-size: 32px;
	color: #aaaaaa;
	text-align: center;
}

.overlay-subtitle {
	font-size: 16px;
	color: #666666;
	text-align: center;
}

.overlay-info {
	font-size: 18px;
	color: #aaaaaa;
	text-align: center;
}

.overlay-streak {
	font-size: 16px;
	color: #88dd88;
	text-align: center;
}

.overlay-button {
	font-size: 20px;
	color: #ffffff;
	background: none;
	border: none;
	cursor: pointer;
	font-family: monospace;
	pointer-events: auto;
	padding: 8px 16px;
	margin-top: 8px;
}

.overlay-button:hover {
	color: #ffdd44;
}

.win-screen {
	z-index: 210;
}

.win-content {
	gap: 8px;
	min-width: 280px;
}

.win-title {
	font-size: 26px;
	color: #ffd700;
	font-family: monospace;
	text-align: center;
	margin-bottom: 2px;
}

.win-level {
	font-size: 14px;
	color: #666;
	font-family: monospace;
	text-align: center;
	margin-bottom: 12px;
}

/* Breakdown rows */
.win-breakdown {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.win-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: monospace;
	font-size: 15px;
	color: #aaaaaa;
	padding: 4px 0;
	border-bottom: 1px solid #222;
}

.win-row-label {
	color: #888;
}

.win-row-detail {
	font-size: 12px;
	color: #555;
}

.win-row-value {
	color: #88dd88;
	font-size: 17px;
	font-weight: bold;
	min-width: 48px;
	text-align: right;
}

.win-row-zero {
	color: #555;
}

.win-row-multiplier .win-row-label {
	color: #aaaaaa;
}

.win-multiplier {
	color: #ffd700;
	font-size: 18px;
}

/* Level score total */
.win-level-score {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: monospace;
	margin-top: 10px;
	padding: 6px 0;
	border-top: 1px solid #444;
}

.win-level-score-label {
	font-size: 15px;
	color: #aaaaaa;
}

.win-level-score-value {
	font-size: 28px;
	font-weight: bold;
	color: #ffd700;
	letter-spacing: 0.05em;
}

/* Global score */
.win-global-score {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: monospace;
	margin-top: 4px;
	padding: 4px 0;
}

.win-global-label {
	font-size: 13px;
	color: #555;
}

.win-global-value {
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
}

/* Emphasized total score (final win screen) */
.win-global-score-big {
	margin-top: 12px;
	padding: 8px 0;
	border-top: 1px solid #444;
}

.win-global-label-big {
	font-size: 16px;
	color: #aaaaaa;
}

.win-global-value-big {
	font-size: 42px;
	color: #ffd700;
	letter-spacing: 0.04em;
}

/* Final win screen buttons */
.final-win-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
}

.final-win-exit {
	font-size: 15px;
	color: #666;
}

.final-win-exit:hover {
	color: #ffdd44;
}

/* Pop-in animation */
@keyframes win-pop {
	0%   { opacity: 0; transform: scale(0.6) translateY(10px); }
	60%  { opacity: 1; transform: scale(1.08) translateY(-2px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

.win-row-pop {
	animation: win-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.win-btn-pop {
	animation: win-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	margin-top: 8px;
}

#ui-root .diver-hud-root {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.diver-hud {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 8px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
	z-index: 100;
}

.diver-hud-info {
	font-size: 16px;
	color: #aaaaaa;
	font-family: monospace;
	pointer-events: none;
}

.diver-new-game-btn {
	font-size: 14px;
	color: #666666;
	background: none;
	border: none;
	cursor: pointer;
	font-family: monospace;
	pointer-events: auto;
	padding: 0;
}

.diver-new-game-btn:hover {
	color: #aaaaaa;
}

/* ── Tutorial overlay ── */
.tutorial-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 300;
	pointer-events: auto;
}

.tutorial-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	font-family: monospace;
}

/* ── Level 1: two side-by-side panels ── */
.tutorial-panels {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

.tutorial-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0 24px;
}

.tutorial-divider {
	width: 1px;
	height: 120px;
	background: #333;
	align-self: center;
}

.tutorial-caption {
	font-size: 13px;
	color: #aaaaaa;
	margin: 0;
	text-align: center;
	max-width: 120px;
}

/* ── Scene containers ── */
.tut-scene {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Grid cells ── */
.tut-grid {
	display: grid;
	gap: 2px;
}

.tut-grid-2x1 {
	grid-template-columns: 40px 40px;
	grid-template-rows: 40px;
}

.tut-grid-2x2 {
	grid-template-columns: 40px 40px;
	grid-template-rows: 40px 40px;
}

.tut-cell {
	width: 40px;
	height: 40px;
	background: #1e2a3a;
	border: 1px solid #2a3a4a;
	border-radius: 3px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tut-cell-dest {
	border-color: #3a5a7a;
}

/* ── Diver shapes ── */
.tut-diver {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

/* Emerged: bright white */
.tut-diver-emerged {
	background: #ffffff;
	box-shadow: 0 0 6px #ffffff88;
}

/* Submerged: blue tint, dimmer */
.tut-diver-submerged {
	background: #4477cc;
	box-shadow: 0 0 6px #4477cc88;
	opacity: 0.75;
}

/* Move animation: diver slides right then resets */
.tut-diver-move {
	background: #ffffff;
	box-shadow: 0 0 6px #ffffff88;
	animation: diver-move 1.6s ease-in-out infinite;
}

@keyframes diver-move {
	0%, 20%  { transform: translateX(0); opacity: 1; }
	50%      { transform: translateX(42px); opacity: 1; }
	65%, 80% { transform: translateX(42px); opacity: 0; }
	81%      { transform: translateX(0); opacity: 0; }
	100%     { transform: translateX(0); opacity: 1; }
}

/* Arrow overlay on move panel */
.tut-arrow-right {
	position: absolute;
	font-size: 22px;
	color: #4488cc;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	animation: arrow-pulse 1.6s ease-in-out infinite;
}

@keyframes arrow-pulse {
	0%, 20%  { opacity: 0.7; transform: translate(-50%, -50%) translateX(0); }
	50%      { opacity: 0; transform: translate(-50%, -50%) translateX(6px); }
	51%, 100% { opacity: 0; transform: translate(-50%, -50%) translateX(0); }
}

/* Ping ripple animation */
.tut-cell-ping {
	position: relative;
}

.tut-ripple {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	animation: ripple-expand 1.8s ease-out infinite;
}

@keyframes ripple-expand {
	0%   { width: 6px; height: 6px; opacity: 1; }
	100% { width: 36px; height: 36px; opacity: 0; }
}

/* ── Level 5: two enemy rows ── */
.tut-enemy-rows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tut-enemy-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tut-enemy-scene {
	display: flex;
	align-items: center;
}

.tut-track {
	display: flex;
	gap: 2px;
}

/* Enemy shape: diamond / angular */
.tut-enemy {
	width: 22px;
	height: 22px;
	background: #cc4444;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Enemy slides from left cell towards right cell and resets */
.tut-enemy-slide {
	animation: enemy-slide 2s ease-in-out infinite;
}

@keyframes enemy-slide {
	0%, 10%  { transform: translateX(0); }
	55%      { transform: translateX(42px); }
	70%, 85% { transform: translateX(42px); }
	86%      { transform: translateX(0); }
	100%     { transform: translateX(0); }
}

/* Flash red on the emerged diver when enemy arrives */
.tut-diver-flash {
	animation: diver-flash 2s ease-in-out infinite;
}

@keyframes diver-flash {
	0%, 40%  { background: #ffffff; box-shadow: 0 0 6px #ffffff88; opacity: 1; }
	55%      { background: #ff4444; box-shadow: 0 0 10px #ff4444; opacity: 1; }
	70%      { background: #ff4444; box-shadow: 0 0 10px #ff4444; opacity: 0.2; }
	85%, 100% { background: #ffffff; box-shadow: 0 0 6px #ffffff88; opacity: 1; }
}

/* Result symbols */
.tut-result {
	font-size: 22px;
	font-family: monospace;
	font-weight: bold;
	width: 28px;
	text-align: center;
}

.tut-result-bad  { color: #ff4444; }
.tut-result-good { color: #44dd88; }

/* ── Close button ── */
.tutorial-close-btn {
	font-size: 18px;
	color: #ffffff;
	background: none;
	border: none;
	cursor: pointer;
	font-family: monospace;
	padding: 8px 16px;
}

.tutorial-close-btn:hover {
	color: #ffdd44;
}

/* ── ? replay button (anchored in DiverHUD) ── */
.tutorial-hint-btn {
	position: absolute;
	bottom: 8px;
	left: 8px;
	font-size: 14px;
	color: #444444;
	background: none;
	border: none;
	cursor: pointer;
	font-family: monospace;
	pointer-events: auto;
	z-index: 100;
	padding: 0;
}

.tutorial-hint-btn:hover {
	color: #aaaaaa;
}


/*# sourceMappingURL=bundle.css.map*/