/* Boss fights: manga fight game feel (lunges, hits, screen shake, K.O.). */

a.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--text);
}

/* ---------- Map and level sheet ---------- */

.boss-chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 0 var(--sp-2);
	border: 2px solid var(--line);
	border-radius: var(--r-full);
	background: var(--text);
	color: var(--paper);
	font-weight: 800;
	font-size: var(--fs-1);
	line-height: 1.4;
}

.boss-chip.is-owned {
	background: var(--gold);
	color: var(--line);
}

.boss-block {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: var(--bw) solid var(--line);
	border-radius: var(--r-2);
	background: #1f1a2e;
	color: #f7f0e4;
}

.boss-mini,
.fighter-portrait {
	overflow: hidden;
	border: var(--bw) solid var(--line);
	border-radius: var(--r-1);
	background: var(--panel);
}

.boss-mini {
	width: 56px;
	height: 56px;
}

.boss-mini svg,
.fighter-portrait svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: scale(1.75) translateY(7%);
}

.boss-name {
	font-weight: 800;
	font-size: var(--fs-3);
	line-height: 1.1;
}

.boss-name small,
.fighter-name small {
	margin-left: var(--sp-1);
	font-size: var(--fs-1);
	font-weight: 700;
	opacity: 0.75;
}

.boss-status {
	font-size: var(--fs-1);
	opacity: 0.85;
	line-height: 1.3;
}

.btn-boss {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	min-height: 48px;
	padding: 0 var(--sp-3);
	background: var(--accent);
	color: var(--on-accent);
	border-color: #050408;
	box-shadow: 3px 3px 0 #050408;
	font-size: var(--fs-2);
}

.boss-lock {
	font-size: 22px;
	opacity: 0.7;
}

.r-common {
	--rarity: #9aa4b1;
}
.r-rare {
	--rarity: #2f8bff;
}
.r-epic {
	--rarity: #b14dff;
}
.r-legendary {
	--rarity: #ffcf33;
}

.boss-block .boss-mini {
	border-color: var(--rarity);
}

/* ---------- Fight screen ---------- */

.app-fight {
	/* Exactly the screen height (dvh follows the mobile browser bars), so the
	   keypad and its submit key always stay visible. */
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	gap: var(--sp-3);
	overflow: hidden;
}

.fight-round {
	flex: 1;
	text-align: center;
	font-weight: 800;
	color: var(--muted);
}

.fighter {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border: var(--bw) solid var(--line);
	border-radius: var(--r-2);
	background: var(--panel);
	box-shadow: var(--shadow);
}

.fighter-boss {
	background: #1f1a2e;
	color: #f7f0e4;
	border-color: var(--line);
	box-shadow: 4px 4px 0 var(--rarity);
}

.fighter-boss .fighter-portrait {
	width: 76px;
	height: 76px;
	border-color: var(--rarity);
}

.fighter-player .fighter-portrait {
	width: 48px;
	height: 48px;
}

/* Placeholder until the avatar creator exists. */
.player-avatar {
	display: grid;
	place-items: center;
	border-radius: var(--r-full);
	background: radial-gradient(circle at 35% 30%, #ffd08a, var(--accent));
	color: var(--on-accent);
	font-weight: 800;
}

.fighter-info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 0;
}

.fighter-name {
	font-weight: 800;
	font-size: var(--fs-3);
	line-height: 1.1;
}

.hp {
	position: relative;
	height: 18px;
	border: 2px solid var(--line);
	border-radius: var(--r-full);
	background: var(--star-off);
	overflow: hidden;
}

.fighter-boss .hp {
	border-color: #050408;
	background: #3b3546;
}

.hp i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--hp);
	border-radius: inherit;
}

/* The red part shows the damage just taken, then catches up. */
.hp-lag {
	background: var(--bad);
	transition: width 600ms var(--ease-out) 350ms;
}

.hp-fill {
	background: var(--good);
	transition: width 180ms var(--ease-out);
}

.hp.is-low .hp-fill {
	background: #ff9f1a;
	animation: low-hp 900ms ease-in-out infinite;
}

.hp-num {
	position: absolute;
	right: var(--sp-2);
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	color: var(--line);
	font-variant-numeric: tabular-nums;
}

.atk {
	position: relative;
	height: 10px;
	border-radius: var(--r-full);
	background: #3b3546;
	overflow: hidden;
}

.atk i {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: linear-gradient(90deg, #ffc21a, #ff3d3d);
}

.atk span {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.fight-stage {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-2);
}

.qcard-fight {
	padding: var(--sp-4);
	box-shadow: var(--shadow);
}

.qcard-fight .qtext {
	font-size: clamp(2rem, 11vw, 2.6rem);
}

.app-fight .feedback {
	min-height: 2.6em;
	font-size: var(--fs-2);
}

.answers-fight {
	gap: var(--sp-2);
}

.answers-fight .pad-display {
	min-height: 52px;
	line-height: 1.2;
}

.answers-fight .pad-display.is-empty {
	line-height: 1.9;
}

.answers-fight .keypad .key {
	height: clamp(44px, 7dvh, 56px);
}

/* Small phones (about 560px left once the browser bars are shown). */
@media (max-height: 760px) {
	.app-fight {
		gap: var(--sp-2);
		padding-top: calc(var(--sp-2) + env(safe-area-inset-top));
		padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom));
	}
	.fighter {
		gap: var(--sp-2);
		padding: 6px var(--sp-3);
	}
	.fighter-boss .fighter-portrait {
		width: 56px;
		height: 56px;
	}
	.fighter-player .fighter-portrait {
		width: 32px;
		height: 32px;
		font-size: 11px;
	}
	.fighter-name {
		font-size: var(--fs-2);
	}
	.fighter-player .fighter-name {
		display: none;
	}
	.hp {
		height: 16px;
	}
	.qcard-fight {
		padding: var(--sp-2) var(--sp-3);
	}
	.qcard-fight .qtext {
		font-size: clamp(1.8rem, 9vw, 2.3rem);
	}
	.app-fight .feedback {
		min-height: 2.5em;
		font-size: var(--fs-1);
		line-height: 1.25;
	}
	.answers-fight .pad-display {
		min-height: 44px;
		font-size: var(--fs-4);
	}
	.answers-fight .pad-display.is-empty {
		line-height: 1.8;
		font-size: var(--fs-2);
	}
	.answers-fight .keypad {
		gap: 6px;
	}
}

/* ---------- Hits and effects ---------- */

.pop {
	position: absolute;
	right: var(--sp-4);
	top: var(--sp-2);
	z-index: 3;
	pointer-events: none;
	font-weight: 800;
	animation: pop-up 1000ms var(--ease-out) forwards;
}

.pop-damage {
	color: #ff3d3d;
	font-size: var(--fs-5);
	-webkit-text-stroke: 2px var(--line);
	paint-order: stroke fill;
}

.pop-critical {
	color: var(--gold);
	font-size: var(--fs-6);
}

.pop-label {
	top: auto;
	bottom: var(--sp-2);
	padding: 0 var(--sp-2);
	border: 2px solid var(--line);
	border-radius: var(--r-1);
	background: #fff;
	color: var(--line);
	font-size: var(--fs-2);
}

.fighter.lunge-up {
	animation: lunge-up 300ms var(--ease-out);
}

.fighter.lunge-down {
	animation: lunge-down 300ms var(--ease-out);
}

.fighter.hit .fighter-portrait,
.fighter.hit-critical .fighter-portrait {
	animation: hurt 380ms ease-in-out;
}

.fighter.hit-critical {
	animation: shake-x 380ms ease-in-out;
}

/* Slash across the boss portrait when it is hit. */
.fighter.hit::after,
.fighter.hit-critical::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 50%;
	width: 96px;
	height: 6px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.8);
	transform-origin: left;
	animation: slash 280ms var(--ease-out) forwards;
	pointer-events: none;
}

.fighter.stumble .fighter-portrait {
	animation: stumble 500ms ease-in-out;
}

.app.shake {
	animation: shake-x 360ms ease-in-out;
}

.flash {
	position: fixed;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: radial-gradient(circle, transparent 40%, rgba(214, 41, 63, 0.55));
	opacity: 0;
}

.flash.hurt {
	animation: flash 420ms ease-out;
}

.fighter.ko .fighter-portrait {
	filter: grayscale(1) brightness(0.7);
	transform: rotate(-12deg) translateY(4px);
	transition: filter 400ms, transform 400ms var(--ease-back);
}

.ko-stamp {
	position: fixed;
	left: 50%;
	top: 42%;
	z-index: 6;
	padding: 0 var(--sp-4);
	border: 5px solid var(--line);
	border-radius: var(--r-2);
	background: var(--gold);
	color: var(--line);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-6);
	font-weight: 800;
	white-space: nowrap;
	transform: translate(-50%, -50%) rotate(-8deg);
	animation: ko-in 520ms var(--ease-back);
}

.ko-stamp.is-lost {
	background: var(--panel);
	color: var(--text);
}

/* ---------- VS intro ---------- */

.vs-intro {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	background:
		repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, 0.06) 0 6deg, transparent 6deg 14deg),
		radial-gradient(circle at 50% 38%, #3a2a5a, #0b0910 75%);
	color: #fff5e3;
	text-align: center;
	transition: opacity 300ms var(--ease-out);
}

.vs-intro.is-gone {
	opacity: 0;
	pointer-events: none;
}

.vs-boss {
	width: min(56vw, 220px);
	aspect-ratio: 1;
	overflow: hidden;
	border: 5px solid #050408;
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--accent), 0 10px 40px rgba(0, 0, 0, 0.6);
	animation: vs-slide 600ms var(--ease-back);
}

.vs-boss svg {
	width: 100%;
	height: 100%;
	transform: scale(1.5) translateY(6%);
}

.vs-word {
	font-size: var(--fs-7);
	font-weight: 800;
	line-height: 0.9;
	color: var(--accent);
	-webkit-text-stroke: 3px #050408;
	paint-order: stroke fill;
	transform: rotate(-6deg);
	animation: vs-word 500ms var(--ease-back) 250ms backwards;
}

.vs-name {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-5);
	font-weight: 800;
	line-height: 1.1;
}

.vs-name small {
	font-size: var(--fs-2);
	font-weight: 700;
	opacity: 0.8;
}

.vs-count {
	min-height: 1.2em;
	font-size: var(--fs-6);
	font-weight: 800;
	color: var(--gold);
}

.vs-count.tick {
	animation: tick 480ms var(--ease-back);
}

/* ---------- Fight results ---------- */

.res-sub {
	color: var(--muted);
	font-weight: 700;
	margin-top: calc(-1 * var(--sp-3));
}

.res-card {
	width: min(62vw, 240px);
}

.fragments {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	border: var(--bw) solid var(--line);
	border-radius: var(--r-2);
	background: var(--panel);
	text-align: left;
}

.fragments .meter i {
	background: var(--gold);
}

.fragments-hint {
	font-size: var(--fs-1);
	color: var(--muted);
}

.gain {
	padding: 0 var(--sp-2);
	border-radius: var(--r-full);
	background: var(--gold);
	color: var(--line);
	font-weight: 800;
}

/* ---------- Keyframes ---------- */

@keyframes atk-fill {
	to {
		width: 100%;
	}
}

@keyframes low-hp {
	50% {
		filter: brightness(1.3);
	}
}

@keyframes pop-up {
	0% {
		transform: translateY(8px) scale(0.6);
		opacity: 0;
	}
	20% {
		transform: translateY(0) scale(1.15);
		opacity: 1;
	}
	100% {
		transform: translateY(-36px) scale(1);
		opacity: 0;
	}
}

@keyframes lunge-up {
	50% {
		transform: translateY(-14px) scale(1.04);
	}
}

@keyframes lunge-down {
	50% {
		transform: translateY(16px) scale(1.05);
	}
}

@keyframes hurt {
	0%,
	100% {
		filter: none;
	}
	20% {
		filter: brightness(2.2) saturate(0);
		transform: translateX(-6px) rotate(-4deg);
	}
	60% {
		transform: translateX(6px) rotate(3deg);
	}
}

@keyframes slash {
	0% {
		transform: rotate(-28deg) scaleX(0);
		opacity: 1;
	}
	60% {
		transform: rotate(-28deg) scaleX(1);
		opacity: 1;
	}
	100% {
		transform: rotate(-28deg) scaleX(1);
		opacity: 0;
	}
}

@keyframes stumble {
	30% {
		transform: rotate(10deg);
	}
	70% {
		transform: rotate(-6deg);
	}
}

@keyframes shake-x {
	20%,
	60% {
		transform: translate(-7px, 2px);
	}
	40%,
	80% {
		transform: translate(7px, -2px);
	}
}

@keyframes flash {
	30% {
		opacity: 1;
	}
}

@keyframes ko-in {
	from {
		transform: translate(-50%, -50%) rotate(-20deg) scale(3);
		opacity: 0;
	}
}

@keyframes vs-slide {
	from {
		transform: translateX(80vw) rotate(20deg);
	}
}

@keyframes vs-word {
	from {
		transform: rotate(-6deg) scale(4);
		opacity: 0;
	}
}

@keyframes tick {
	from {
		transform: scale(2.2);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-lag,
	.hp-fill {
		transition: none;
	}
	/* The attack gauge is game information, not decoration: keep it. */
	.app .atk i {
		animation-duration: var(--atk-ms) !important;
	}
}