body {
	margin: 0;
	overflow: hidden;
	background: #050510;
}

:root {
	/* Bottom HUD default. To revert to top, set --hud-top: 20px and --hud-bottom: auto. */
	--hud-top: auto;
	--hud-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

#protocol-warning,
#mobile-warning {
	position: fixed;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 20;
	padding: 10px 14px;
	border: 1px solid #ff6666;
	background: rgba(80, 0, 0, 0.85);
	color: #ffd6d6;
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	text-align: center;
}

#mobile-warning {
	top: 62px;
	border-color: #ffcc66;
	background: rgba(70, 50, 0, 0.9);
	color: #ffeccc;
}

#ui {
	position: absolute;
	top: var(--hud-top);
	bottom: var(--hud-bottom);
	width: 100%;
	text-align: center;
	color: #00ffff;
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.75);
	pointer-events: none;
	z-index: 18;
}

#boss-hp {
	position: fixed;
	top: calc(14px + env(safe-area-inset-top, 0px));
	left: 50%;
	transform: translateX(-50%);
	width: min(560px, calc(100vw - 28px));
	padding: 8px 12px;
	border: 1px solid rgba(255, 120, 120, 0.65);
	background: rgba(18, 6, 12, 0.78);
	backdrop-filter: blur(2px);
	color: #ffd6d6;
	font-family: "Courier New", Courier, monospace;
	text-align: center;
	pointer-events: none;
	z-index: 19;
}

#score-reason {
	position: fixed;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 6px 12px;
	background: rgba(6, 26, 42, 0.82);
	border: 1px solid rgba(110, 230, 255, 0.75);
	color: #d8fbff;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	letter-spacing: 0.08em;
	pointer-events: none;
	z-index: 20;
	text-align: center;
}

#penalty-float-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 21;
	overflow: hidden;
}

.penalty-float-text {
	position: absolute;
	left: 0;
	top: 0;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(18px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #ff4d4d;
	text-shadow: 0 0 7px rgba(0, 0, 0, 0.85), 0 0 10px rgba(255, 77, 77, 0.45);
	transform: translate(-50%, 0) scale(0.94);
	opacity: 0;
	animation: penalty-float-rise 780ms ease-out forwards;
}

@keyframes penalty-float-rise {
	0% {
		opacity: 0;
		transform: translate(-50%, 10px) scale(0.94);
	}
	16% {
		opacity: 1;
		transform: translate(-50%, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -86px) scale(1.03);
	}
}

#boss-alert {
	position: fixed;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 6px 14px;
	border: 1px solid rgba(255, 180, 120, 0.8);
	background: rgba(60, 22, 4, 0.82);
	color: #ffd9a1;
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
	letter-spacing: 0.2em;
	pointer-events: none;
	z-index: 19;
	animation: boss-approach-pulse 520ms ease-in-out infinite;
}

@keyframes boss-approach-pulse {
	0% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(0.98);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(0.98);
	}
}

#boss-name {
	font-size: 14px;
	letter-spacing: 0.16em;
	color: #ffb3b3;
	margin-bottom: 4px;
}

#boss-hp-bar-bg {
	height: 12px;
	border: 1px solid rgba(255, 215, 215, 0.75);
	background: rgba(0, 0, 0, 0.55);
	overflow: hidden;
}

#boss-hp-bar-fill {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, #ff5b5b 0%, #ff8f5b 55%, #ffd85b 100%);
	transform-origin: left center;
	transition: width 90ms linear;
}

#boss-hp-text {
	margin-top: 4px;
	font-size: 13px;
	color: #ffe3c7;
}

#weapon-name {
	color: #ffff00;
}

#points {
	color: #ffd166;
}

.side-tab-nav {
	position: fixed;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 41;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border: 1px solid rgba(106, 222, 255, 0.35);
	background: rgba(7, 16, 34, 0.78);
	backdrop-filter: blur(3px);
}

.side-tab-nav[hidden] {
	display: none;
}

.side-tab-btn {
	min-width: 228px;
	padding: 14px 16px;
	border: 1px solid rgba(102, 231, 255, 0.45);
	background: rgba(10, 34, 58, 0.7);
	color: #bfefff;
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.side-tab-btn:hover {
	background: rgba(18, 58, 94, 0.78);
	transform: translateX(2px);
}

.side-tab-btn.side-tab-btn-active {
	border-color: rgba(255, 228, 140, 0.88);
	background: rgba(82, 57, 8, 0.78);
	color: #ffe9b8;
	box-shadow: inset 3px 0 0 rgba(255, 209, 90, 0.92);
}

.screen-overlay {
	position: fixed;
	inset: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: #050510;
	font-family: "Courier New", Courier, monospace;
	text-align: center;
	color: #d9feff;
	padding: 24px;
}

.overlay-screen {
	background: rgba(5, 8, 20, 0.66);
	backdrop-filter: blur(3px);
	z-index: 12;
}

.screen-overlay[hidden],
#ui[hidden] {
	display: none;
}

#boss-hp[hidden] {
	display: none;
}

#boss-alert[hidden] {
	display: none;
}

#score-reason[hidden] {
	display: none;
}

.pause-overlay {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba(5, 8, 20, 0.58);
	backdrop-filter: blur(3px);
	font-family: "Courier New", Courier, monospace;
	text-align: center;
	color: #d9feff;
	padding: 24px;
}

.pause-overlay[hidden] {
	display: none;
}

.screen-title {
	margin: 0;
	font-size: clamp(36px, 8vw, 76px);
	letter-spacing: 0.06em;
	text-shadow: 0 0 18px rgba(0, 255, 255, 0.35);
}

.screen-copy {
	margin: 0;
	font-size: clamp(14px, 2.8vw, 22px);
	color: #94f5ff;
}

.screen-subcopy {
	margin: 0;
	font-size: clamp(12px, 2.1vw, 16px);
	color: #78adc2;
	max-width: 760px;
}

#version-info {
	letter-spacing: 0.1em;
	color: #e5f2ff;
	border: 1px solid rgba(132, 178, 214, 0.4);
	padding: 6px 10px;
	background: rgba(22, 34, 52, 0.4);
}

#clear-mission-block {
	width: min(720px, calc(100vw - 36px));
	padding: 8px 10px;
	border: 1px solid rgba(110, 206, 255, 0.36);
	background: rgba(8, 18, 34, 0.45);
}

#clear-mission-list {
	text-align: left;
	max-width: 680px;
	margin: 6px auto 0;
}

.clear-boss-hint-card {
	width: min(760px, calc(100vw - 36px));
	text-align: left;
	padding: 10px 12px;
	border: 2px solid rgba(255, 208, 120, 0.92);
	border-left-width: 7px;
	border-radius: 8px;
	background: linear-gradient(140deg, rgba(78, 42, 8, 0.84), rgba(24, 32, 56, 0.92));
	box-shadow: 0 0 18px rgba(255, 190, 94, 0.28);
}

.clear-boss-hint-title {
	margin: 0 0 5px;
	font-size: clamp(14px, 2.2vw, 20px);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #ffe7b1;
	text-shadow: 0 0 10px rgba(255, 220, 140, 0.4);
}

.clear-boss-hint-text {
	margin: 0;
	font-size: clamp(13px, 2vw, 18px);
	line-height: 1.45;
	color: #fff1cf;
}

.clear-boss-hint-pop {
	animation: clear-boss-hint-pop 360ms ease-out;
}

@keyframes clear-boss-hint-pop {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
		filter: brightness(1);
	}
	55% {
		opacity: 1;
		transform: translateY(0) scale(1.02);
		filter: brightness(1.22);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: brightness(1);
	}
}

.clear-rank-badge {
	padding: 8px 16px;
	border: 1px solid rgba(255, 235, 179, 0.75);
	background: rgba(120, 88, 18, 0.35);
	color: #ffe7ad;
	font-size: clamp(20px, 4.2vw, 34px);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-shadow: 0 0 14px rgba(255, 209, 102, 0.45);
	border-radius: 10px;
	animation: clear-rank-pop 460ms ease-out;
}

.clear-rank-badge.rank-impact {
	animation: clear-rank-impact 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.clear-rank-badge.rank-AAA {
	background: linear-gradient(135deg, rgba(117, 82, 16, 0.55), rgba(188, 139, 34, 0.45));
	border-color: rgba(255, 230, 140, 0.9);
	box-shadow: 0 0 18px rgba(255, 210, 96, 0.4);
}

.clear-rank-badge.rank-AA,
.clear-rank-badge.rank-A {
	background: rgba(70, 104, 35, 0.4);
	border-color: rgba(179, 255, 171, 0.78);
	color: #c8ffd0;
	text-shadow: 0 0 12px rgba(130, 247, 162, 0.4);
}

.clear-rank-badge.rank-B,
.clear-rank-badge.rank-C {
	background: rgba(38, 62, 88, 0.44);
	border-color: rgba(144, 199, 236, 0.68);
	color: #c6e9ff;
	text-shadow: 0 0 10px rgba(123, 203, 255, 0.32);
}

.clear-parade-layer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 64px;
	height: min(46vh, 320px);
	overflow: hidden;
	pointer-events: none;
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 68%, rgba(0, 0, 0, 0));
}

.clear-parade-runner {
	position: absolute;
	bottom: -20px;
	font-size: clamp(16px, 2.8vw, 28px);
	filter: drop-shadow(0 0 8px rgba(125, 241, 255, 0.4));
	opacity: 0;
	animation: clear-parade-run var(--parade-duration, 2200ms) linear forwards;
}

@keyframes clear-parade-run {
	0% {
		opacity: 0;
		transform: translateY(36px) scale(0.9);
	}
	12% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-320px) scale(1.05);
	}
}

@keyframes clear-rank-pop {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.92);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes clear-rank-impact {
	0% {
		opacity: 0;
		transform: translateY(18px) scale(0.8);
		filter: brightness(1);
	}
	55% {
		opacity: 1;
		transform: translateY(0) scale(1.2);
		filter: brightness(1.28);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: brightness(1);
	}
}

.clear-mission-item {
	font-size: 14px;
	line-height: 1.45;
	color: #b9e6f3;
	margin: 4px 0;
}

.clear-mission-item.completed {
	color: #a4ffba;
}

.screen-btn {
	margin-top: 10px;
	padding: 14px 32px;
	border: 1px solid #66e7ff;
	background: rgba(5, 60, 88, 0.42);
	color: #d5fbff;
	font-family: inherit;
	font-size: clamp(14px, 2.8vw, 22px);
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}

.screen-btn:hover {
	transform: translateY(-1px);
	background: rgba(5, 104, 146, 0.52);
}

.secondary-btn {
	background: rgba(8, 24, 44, 0.58);
	border-color: #4b9eb5;
	color: #a8d7df;
}

.screen-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

.release-notes-list {
	width: min(760px, calc(100vw - 36px));
	padding: 8px 12px;
	border: 1px solid rgba(102, 231, 255, 0.25);
	background: rgba(8, 24, 44, 0.45);
	text-align: left;
}

.run-status-layout {
	width: min(820px, calc(100vw - 36px));
	padding: 10px 14px;
	border: 1px solid rgba(102, 231, 255, 0.25);
	background: rgba(8, 24, 44, 0.45);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.run-status-block {
	padding-top: 8px;
	border-top: 1px solid rgba(102, 231, 255, 0.2);
}

.run-status-owned-weapons-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
}

.run-status-weapon-row {
	font-size: 14px;
	color: #bde8f8;
}

.run-status-weapon-id {
	color: #88b9cb;
	font-size: 12px;
}

.run-status-weapon-level {
	display: inline-block;
	margin-left: 8px;
	color: #ffe7ad;
	font-size: 13px;
}

.run-secrets-layout {
	width: min(980px, calc(100vw - 36px));
	max-height: min(62vh, 720px);
	overflow-y: auto;
	padding: 12px;
	border: 1px solid rgba(102, 231, 255, 0.25);
	background: rgba(8, 24, 44, 0.45);
	text-align: left;
}

.run-secrets-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.run-secret-row {
	padding: 12px;
	border: 1px solid rgba(112, 206, 255, 0.38);
	background: rgba(10, 24, 46, 0.5);
	min-height: 76px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.run-secret-row.run-secret-achieved {
	border-color: rgba(145, 255, 187, 0.7);
	background: linear-gradient(135deg, rgba(20, 70, 46, 0.52), rgba(10, 30, 54, 0.58));
}

.run-secret-id {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: #8dcbe2;
}

.run-secret-text {
	margin: 0;
	font-size: clamp(14px, 2.2vw, 19px);
	line-height: 1.5;
	color: #d5f7ff;
	word-break: break-word;
}

.run-secret-row.run-secret-hidden .run-secret-text {
	color: #88a8b8;
	letter-spacing: 0.08em;
}

.run-secret-conditions {
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid rgba(140, 255, 192, 0.28);
	background: rgba(12, 36, 48, 0.45);
}

.run-secret-conditions-title {
	margin: 0 0 4px;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: #b8ffe0;
}

.run-secret-conditions ul {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.run-secret-conditions li {
	font-size: 13px;
	line-height: 1.45;
	color: #c8f8e5;
}

.store-layout {
	width: min(1040px, calc(100vw - 36px));
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr);
	gap: 14px;
	align-items: start;
}

.store-points-row {
	padding: 8px 14px;
	border: 1px solid rgba(255, 220, 130, 0.78);
	background: linear-gradient(135deg, rgba(84, 56, 8, 0.52), rgba(28, 47, 77, 0.48));
	border-radius: 9px;
	box-shadow: 0 0 16px rgba(255, 198, 92, 0.2);
	letter-spacing: 0.06em;
}

.store-points-row #store-points {
	display: inline-block;
	margin-left: 6px;
	padding: 0 8px;
	border-radius: 6px;
	background: rgba(255, 235, 180, 0.12);
	color: #ffe9b5;
	font-weight: 700;
	text-shadow: 0 0 10px rgba(255, 207, 107, 0.42);
}

#store-debug-free-mode-btn {
	border-color: rgba(255, 140, 140, 0.75);
	background: rgba(80, 20, 20, 0.48);
	color: #ffd3d3;
}

#store-debug-free-mode-btn.store-debug-free-mode-on {
	border-color: rgba(156, 255, 168, 0.82);
	background: rgba(28, 76, 34, 0.52);
	color: #d4ffe0;
	box-shadow: 0 0 16px rgba(156, 255, 168, 0.28);
}

.store-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(170px, 1fr));
	gap: 12px;
}

.store-btn {
	line-height: 1.35;
	padding: 16px 14px;
	text-align: left;
}

.store-btn span {
	font-size: 12px;
	color: #8cd5ea;
	letter-spacing: 0.12em;
}

.store-btn-selected {
	border-color: #ffd166;
	background: rgba(86, 62, 8, 0.54);
	color: #ffe7ad;
}

.store-description {
	padding: 10px 12px;
	border: 1px solid rgba(102, 231, 255, 0.25);
	background: rgba(8, 24, 44, 0.45);
	text-align: left;
	min-height: 180px;
}

.store-description-icon {
	margin: 0 0 6px;
	font-size: 28px;
	line-height: 1;
}

.store-description-title {
	margin: 0 0 8px;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #ffe7ad;
}

.store-description-body {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #c0f0ff;
}

.store-purchase-summary {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(102, 231, 255, 0.2);
}

.store-purchase-title {
	font-size: 12px;
	letter-spacing: 0.12em;
	color: #ffe7ad;
	margin-bottom: 4px;
}

.store-purchase-item {
	font-size: 12px;
	line-height: 1.4;
	color: #b7e8f6;
}

.store-unlock-popup {
	position: fixed;
	inset: 0;
	z-index: 42;
	background: rgba(4, 10, 20, 0.66);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 18px;
	animation: store-unlock-popup-pop 280ms ease-out;
}

.store-unlock-popup[hidden] {
	display: none;
}

.store-unlock-popup-text {
	margin: 0;
	font-size: clamp(14px, 2.4vw, 20px);
	letter-spacing: 0.08em;
	color: #d1ffe1;
	text-shadow: 0 0 10px rgba(116, 255, 186, 0.32);
}

.store-unlock-popup-card {
	width: min(620px, calc(100vw - 44px));
	padding: 14px 16px;
	border: 1px solid rgba(144, 255, 199, 0.82);
	background: linear-gradient(145deg, rgba(18, 70, 54, 0.95), rgba(11, 36, 54, 0.94));
	box-shadow: 0 0 18px rgba(98, 255, 184, 0.28);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

@keyframes store-unlock-popup-pop {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.gameover-stage-clears-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: min(460px, calc(100vw - 48px));
	align-items: center;
	text-align: center;
}

.gameover-stage-row {
	display: inline-block;
	font-size: clamp(14px, 2.6vw, 20px);
	color: #aee8ff;
}

.stage-grid {
	margin-top: 8px;
	display: grid;
	grid-template-columns: repeat(3, minmax(160px, 220px));
	gap: 12px;
	max-width: 760px;
	width: 100%;
}

.stage-btn {
	line-height: 1.25;
	padding-top: 18px;
	padding-bottom: 18px;
}

.stage-btn span {
	font-size: 13px;
	letter-spacing: 0.12em;
	color: #87d3e6;
}

.stage-btn .stage-level {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #ffd166;
}

.stage-btn:disabled,
.stage-btn-disabled {
	opacity: 0.5;
	border-color: #567383;
	background: rgba(20, 30, 44, 0.45);
	color: #8da3ad;
	cursor: not-allowed;
	transform: none;
}

.stage-btn:disabled span,
.stage-btn-disabled span {
	color: #86a0ad;
}

.stage-btn:disabled:hover,
.stage-btn-disabled:hover {
	transform: none;
	background: rgba(20, 30, 44, 0.45);
}

.pause-weapon-btn {
	min-width: 168px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: clamp(13px, 2.4vw, 18px);
}

.pause-weapon-btn-active {
	border-color: #ffd166;
	background: rgba(80, 56, 4, 0.6);
	color: #ffe7ad;
}

@media (max-width: 768px) {
	.side-tab-nav {
		left: 10px;
		right: 10px;
		top: 10px;
		transform: none;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.side-tab-btn {
		min-width: 0;
		flex: 1 1 46%;
		font-size: 14px;
		text-align: center;
	}

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

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

	.store-layout {
		grid-template-columns: 1fr;
	}

	.store-description {
		min-height: 0;
	}

	.screen-actions {
		flex-direction: column;
	}
}