/*
 * 스터디 타운 농장 배지 — partials/town-badge.blade.php(사이드바 머리 · 좁은 화면의 윗줄). 그림은 public/js/town.js 가 채운다.
 * 홈에서는 PES 로고 옆에 작게, 다른 화면에서는 로고를 작게 줄이고 농장을 크게 보인다(PES-SSOT.md 23절 "스터디 타운").
 * 모든 화면이 읽는다(layouts/app.blade.php). 방향이 있는 속성은 논리 속성만.
 */

/* ── 배지 ─────────────────────────────────────────── */
.town-badge {
	--town-art: 2.4rem;
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-inline-size: 0;
	padding: 0.2rem 0.4rem;
	border-radius: 0.9rem;
	color: var(--shell-bar-ink, var(--wa-color-text-normal));
	text-decoration: none;
	transition: background-color 0.15s;
}

.town-badge:hover {
	background: color-mix(in srgb, var(--wa-color-brand-fill-quiet) 70%, transparent);
}

.town-badge:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}

.town-badge-art {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.town-badge-art svg {
	display: block;
	block-size: var(--town-art);
	inline-size: auto;
	max-inline-size: 100%;
	overflow: visible;
}

.town-badge-meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.town-badge-level {
	font-size: 0.66rem;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	color: var(--wa-color-brand-on-quiet);
}

.town-badge-bar {
	display: block;
	inline-size: 2.8rem;
	block-size: 0.28rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wa-color-neutral-fill-quiet);
}

.town-badge-bar i {
	display: block;
	inline-size: var(--pct, 0%);
	block-size: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #8fd16a, #f2c94c);
	transition: inline-size 0.6s ease;
}

/* 점수가 오르면 "+100" 이 떠오르고 동물이 폴짝, 레벨이 오르면 배지가 반짝인다 */
.town-badge-gain {
	position: absolute;
	inset-block-start: 0.15rem;
	inset-inline-end: 0.15rem;
	padding: 0.05rem 0.35rem;
	border-radius: 999px;
	background: #2e7d32;
	color: #fff;
	font-size: 0.66rem;
	font-weight: 800;
	pointer-events: none;
	animation: town-float 2.4s ease-out forwards;
}

.town-badge[data-gain='true'] .town-badge-art svg {
	animation: town-hop 0.55s ease-in-out 3;
}

.town-badge[data-level-up='true'] {
	animation: town-glow 1.3s ease-in-out 3;
}

@keyframes town-float {
	0% { opacity: 0; transform: translateY(0.5rem) scale(0.8); }
	15% { opacity: 1; transform: translateY(0) scale(1.05); }
	80% { opacity: 1; transform: translateY(-0.4rem); }
	100% { opacity: 0; transform: translateY(-0.8rem); }
}

@keyframes town-hop {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(-0.35rem) scale(1.04, 0.97); }
}

@keyframes town-glow {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	50% { box-shadow: 0 0 0 0.15rem color-mix(in srgb, #f2c94c 65%, transparent), 0 0 0.8rem #f2c94c; }
}

/* ── 사이드바 머리 — 다른 화면: 로고를 작게, 농장을 크게 ─── */
.lyen .chat-header .town-badge {
	--town-art: 3.6rem;
	flex: 1 1 auto;
	gap: 0.1rem;
	margin-inline-start: auto;
	padding-block: 0.1rem;
}

.lyen .chat-header:not([data-home]) .town-badge-level {
	font-size: 0.6rem;
}

.lyen .chat-header:not([data-home]) {
	gap: 0.4rem;
	padding-inline: 0.9rem 0.6rem;
}

.lyen .chat-header:not([data-home]) .pes-brand {
	flex: none;
	gap: 0.4rem;
}

.lyen .chat-header:not([data-home]) .pes-brand-symbol {
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 0.7rem;
	font-size: 1rem;
}

.lyen .chat-header:not([data-home]) .pes-brand-copy strong {
	font-size: 1.05rem;
}

.lyen .chat-header:not([data-home]) .pes-brand-copy small {
	display: none;
}

/* ── 홈 — 로고는 그대로, 농장은 옆에 작게 ─── */
.lyen .chat-header[data-home] .town-badge {
	--town-art: 2.3rem;
	flex: 0 1 auto;
	flex-direction: row;
	gap: 0.3rem;
}

.lyen .chat-header[data-home] .town-badge-meta {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
}

.lyen .chat-header[data-home] .town-badge-bar {
	inline-size: 1.9rem;
}

/* ── 윗줄 — 좁은 화면(사이드바가 숨는 폭)과 리엔 대화 화면(/chat)에서만 ─── */
.topbar-town {
	display: none;
	flex: none;
	min-inline-size: 0;
}

.topbar-town .town-badge {
	--town-art: 2rem;
	flex-direction: row;
	gap: 0.25rem;
	padding-block: 0.1rem;
}

.topbar-town .town-badge-bar {
	display: none;
}

@media (max-width: 1099px) {
	.topbar-town { display: flex; }
}

body[data-lyen-page] .topbar-town {
	display: flex;
}

@media (max-width: 420px) {
	.topbar-town .town-badge-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.town-badge,
	.town-badge-bar i { transition: none; }
	.town-badge-gain,
	.town-badge[data-gain='true'] .town-badge-art svg,
	.town-badge[data-level-up='true'] { animation: none; }
}