@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Noto+Sans+KR:wght@400;600;800&display=swap');

/* ==========================================================================
   계량계측 사격장 — 토큰
   Palette:
     --gsr-bg:       #0c1a1f  (그래파이트 블루블랙, 계측실 야간모드)
     --gsr-grid:     #163038  (모눈/블루프린트 라인)
     --gsr-cyan:     #4fd8e0  (정밀 표적 / 하이라이트)
     --gsr-amber:    #f2a93b  (경고, 콤보)
     --gsr-mint:     #4be3a0  (명중, 정상)
     --gsr-red:      #ff5a5f  (불량 표적, 위험)
     --gsr-gold:     #ffd54a  (레어 정밀 표적)
     --gsr-ink:      #dff4f6  (본문 텍스트)
   Type: 'Noto Sans KR'(본문/라벨), 'Share Tech Mono'(HUD 디지털 판독값)
   Signature: 캘리퍼스 눈금(버니어 스케일)을 본뜬 HUD 하단 바 + 조준경 커서
   ========================================================================== */

.gsr-wrapper {
	--gsr-bg: #0c1a1f;
	--gsr-grid: #16323b;
	--gsr-cyan: #4fd8e0;
	--gsr-amber: #f2a93b;
	--gsr-mint: #4be3a0;
	--gsr-red: #ff5a5f;
	--gsr-gold: #ffd54a;
	--gsr-slate: #b9c7cc;
	--gsr-ink: #dff4f6;
	--gsr-ink-dim: #7fa3aa;

	font-family: 'Noto Sans KR', -apple-system, sans-serif;
	color: var(--gsr-ink);
	margin: 0 auto;
	box-sizing: border-box;
}
.gsr-wrapper *,
.gsr-wrapper *::before,
.gsr-wrapper *::after {
	box-sizing: border-box;
}

.gsr-stage {
	position: relative;
	width: 100%;
	min-height: 420px;
	border-radius: 10px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(79, 216, 224, 0.05), transparent 40%),
		repeating-linear-gradient(0deg, var(--gsr-grid) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(90deg, var(--gsr-grid) 0 1px, transparent 1px 32px),
		var(--gsr-bg);
	box-shadow: 0 0 0 1px #234852, 0 20px 50px -20px rgba(0, 0, 0, 0.6);
	cursor: crosshair;
	user-select: none;
	touch-action: none;
}

/* ---------- 상단 HUD ---------- */
.gsr-hud {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: linear-gradient(180deg, rgba(12, 26, 31, 0.92), rgba(12, 26, 31, 0));
	pointer-events: none;
}
.gsr-hud-group {
	display: flex;
	align-items: baseline;
	gap: 6px;
	pointer-events: auto;
}
.gsr-hud-label {
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--gsr-ink-dim);
	text-transform: uppercase;
}
.gsr-hud-value {
	font-family: 'Share Tech Mono', monospace;
	font-size: 20px;
	color: var(--gsr-cyan);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 12px rgba(79, 216, 224, 0.5);
}
.gsr-hud-value.is-level {
	color: var(--gsr-amber);
	text-shadow: 0 0 12px rgba(242, 169, 59, 0.5);
}
.gsr-lives {
	display: flex;
	gap: 5px;
}
.gsr-life-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--gsr-mint);
	box-shadow: 0 0 8px rgba(75, 227, 160, 0.7);
	transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.gsr-life-dot.is-lost {
	background: transparent;
	box-shadow: none;
	border: 1.5px solid #2c4b52;
	transform: scale(0.8);
}

/* 남은시간 바 (버니어 눈금 스타일) */
.gsr-timebar-track {
	position: absolute;
	top: 46px;
	left: 14px;
	right: 14px;
	height: 6px;
	z-index: 20;
	background: repeating-linear-gradient(90deg, #1c3d46 0 1px, transparent 1px 6px);
	border-radius: 3px;
	overflow: hidden;
	pointer-events: none;
}
.gsr-timebar-fill {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--gsr-mint), var(--gsr-cyan));
	transition: width 0.2s linear, background 0.3s ease;
}
.gsr-timebar-fill.is-danger {
	background: linear-gradient(90deg, var(--gsr-red), var(--gsr-amber));
}

/* ---------- 콤보 표시 ---------- */
.gsr-combo {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%) scale(0.9);
	z-index: 20;
	font-family: 'Share Tech Mono', monospace;
	font-size: 13px;
	color: var(--gsr-amber);
	background: rgba(242, 169, 59, 0.1);
	border: 1px solid rgba(242, 169, 59, 0.35);
	padding: 3px 10px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
	white-space: nowrap;
}
.gsr-combo.is-visible {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

/* ---------- 표적 컨테이너 ---------- */
.gsr-targets {
	position: absolute;
	inset: 0;
	z-index: 10;
	overflow: hidden;
}

/* ---------- 표적 ---------- */
.gsr-target {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	z-index: 10;
	cursor: pointer;
	transform: scale(0.4);
	opacity: 0;
	animation: gsr-pop 0.18s ease-out forwards;
	background:
		radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 60%);
}
.gsr-target:focus-visible { outline: 2px solid var(--gsr-amber); outline-offset: 3px; }
@keyframes gsr-pop {
	to { transform: scale(1); opacity: 1; }
}
.gsr-target::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid currentColor;
	box-shadow: inset 0 0 0 6px rgba(12,26,31,0.55), inset 0 0 0 7px currentColor;
}
.gsr-target-ring {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: 0.55;
}
.gsr-target-life {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
}
.gsr-target-life svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gsr-target-life circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0.9;
}
.gsr-target-icon {
	position: relative;
	font-size: 26px;
	line-height: 1;
	filter: drop-shadow(0 0 6px currentColor);
}

.gsr-target.gsr-t-normal { color: var(--gsr-cyan); }
.gsr-target.gsr-t-gold   { color: var(--gsr-gold); }
.gsr-target.gsr-t-bad    { color: var(--gsr-red); }
.gsr-target.gsr-t-term   { color: var(--gsr-slate); }

.gsr-target-text {
	position: relative;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
	filter: drop-shadow(0 0 6px currentColor);
}

.gsr-target.is-hit {
	animation: gsr-hit 0.28s ease-out forwards;
	pointer-events: none;
}
@keyframes gsr-hit {
	to { transform: scale(1.6); opacity: 0; }
}
.gsr-target.is-expired {
	animation: gsr-expire 0.22s ease-in forwards;
	pointer-events: none;
}
@keyframes gsr-expire {
	to { transform: scale(0.5); opacity: 0; }
}

/* 명중 시 뜨는 점수 팝업 */
.gsr-popup {
	position: absolute;
	z-index: 15;
	font-family: 'Share Tech Mono', monospace;
	font-weight: 700;
	font-size: 15px;
	pointer-events: none;
	transform: translate(-50%, -50%);
	animation: gsr-float-up 0.6s ease-out forwards;
	text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
@keyframes gsr-float-up {
	from { opacity: 1; transform: translate(-50%, -50%); }
	to   { opacity: 0; transform: translate(-50%, -140%); }
}

/* 화면 플래시 (오폭 시) */
.gsr-flash {
	position: absolute;
	inset: 0;
	z-index: 25;
	background: var(--gsr-red);
	opacity: 0;
	pointer-events: none;
}
.gsr-flash.is-active {
	animation: gsr-flash-anim 0.25s ease-out;
}
@keyframes gsr-flash-anim {
	from { opacity: 0.35; }
	to   { opacity: 0; }
}

/* ---------- 오버레이 (시작 / 종료 화면) ---------- */
.gsr-overlay {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 24px;
	background: radial-gradient(circle at 50% 30%, rgba(79,216,224,0.08), transparent 55%), rgba(8, 18, 22, 0.88);
	backdrop-filter: blur(2px);
}
.gsr-eyebrow {
	font-family: 'Share Tech Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.22em;
	color: var(--gsr-cyan);
	text-transform: uppercase;
	border: 1px solid rgba(79,216,224,0.4);
	padding: 4px 12px;
	border-radius: 999px;
}
.gsr-title {
	font-size: clamp(22px, 4vw, 32px);
	font-weight: 800;
	margin: 0;
	letter-spacing: -0.01em;
}
.gsr-title .accent { color: var(--gsr-cyan); }
.gsr-desc {
	max-width: 420px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--gsr-ink-dim);
	margin: 0;
}
.gsr-desc-warn {
	max-width: 440px;
	border: 1px dashed rgba(185, 199, 204, 0.4);
	border-radius: 8px;
	padding: 8px 12px;
	background: rgba(185, 199, 204, 0.06);
}
.gsr-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
	margin: 4px 0 6px;
	font-size: 13px;
}
.gsr-legend-item { display: flex; align-items: center; gap: 6px; }
.gsr-legend-dot {
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid currentColor;
	box-shadow: inset 0 0 0 3px rgba(12,26,31,0.6);
}
.gsr-legend-item.normal { color: var(--gsr-cyan); }
.gsr-legend-item.gold { color: var(--gsr-gold); }
.gsr-legend-item.bad { color: var(--gsr-red); }

.gsr-overlay-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.gsr-name-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 2px;
}
.gsr-name-form input[type="text"] {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 13px;
	color: var(--gsr-ink);
	background: rgba(79, 216, 224, 0.06);
	border: 1px solid rgba(79, 216, 224, 0.35);
	border-radius: 6px;
	padding: 9px 12px;
	width: 170px;
	outline: none;
}
.gsr-name-form input[type="text"]:focus-visible {
	border-color: var(--gsr-cyan);
	box-shadow: 0 0 0 2px rgba(79, 216, 224, 0.25);
}
.gsr-name-form input[type="text"]::placeholder { color: var(--gsr-ink-dim); }

.gsr-board-wrap {
	width: 100%;
	max-width: 360px;
	max-height: 260px;
	overflow-y: auto;
}
.gsr-board-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}
.gsr-board-row {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(79, 216, 224, 0.08);
	border: 1px solid rgba(79, 216, 224, 0.18);
	font-size: 13px;
	color: var(--gsr-ink);
}
.gsr-board-row.is-top {
	background: rgba(255, 213, 74, 0.1);
	border-color: rgba(255, 213, 74, 0.35);
}
.gsr-board-rank {
	font-family: 'Share Tech Mono', monospace;
	color: var(--gsr-ink-dim);
	text-align: center;
}
.gsr-board-row.is-top .gsr-board-rank { color: var(--gsr-gold); font-weight: 700; }
.gsr-board-name {
	color: var(--gsr-ink);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gsr-board-score {
	font-family: 'Share Tech Mono', monospace;
	color: var(--gsr-cyan);
}

.gsr-btn {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #06181c;
	background: linear-gradient(180deg, var(--gsr-cyan), #2fb9c2);
	border: none;
	padding: 12px 28px;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 8px 24px -8px rgba(79,216,224,0.6);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gsr-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(79,216,224,0.75); }
.gsr-btn:active { transform: translateY(0); }
.gsr-btn:focus-visible { outline: 2px solid var(--gsr-amber); outline-offset: 3px; }
.gsr-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.gsr-btn-ghost {
	color: var(--gsr-cyan);
	background: transparent;
	border: 1px solid rgba(79, 216, 224, 0.45);
	box-shadow: none;
}
.gsr-btn-ghost:hover { box-shadow: 0 0 0 3px rgba(79,216,224,0.12); }

.gsr-btn-sm {
	padding: 9px 16px;
	font-size: 13px;
}

.gsr-result-grid {
	display: flex;
	gap: 28px;
	margin: 6px 0 4px;
	flex-wrap: wrap;
	justify-content: center;
}
.gsr-result-item { text-align: center; }
.gsr-result-value {
	font-family: 'Share Tech Mono', monospace;
	font-size: 28px;
	color: var(--gsr-cyan);
}
.gsr-result-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--gsr-ink-dim);
	text-transform: uppercase;
	margin-top: 2px;
}
.gsr-newbest {
	font-size: 12px;
	color: var(--gsr-gold);
	letter-spacing: 0.05em;
}

/* ---------- 하단 캘리퍼스 눈금 바 (시그니처 요소) ---------- */
.gsr-vernier {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 22px;
	z-index: 15;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(0deg, rgba(12,26,31,0.9), rgba(12,26,31,0));
	pointer-events: none;
	overflow: hidden;
}
.gsr-vernier-tick {
	flex: 1 0 auto;
	width: 1px;
	background: #24505a;
	margin-right: 11px;
	height: 8px;
}
.gsr-vernier-tick.major { height: 14px; background: #3a7883; }

@media (max-width: 480px) {
	.gsr-hud-value { font-size: 16px; }
	.gsr-target { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
	.gsr-target-icon { font-size: 21px; }
	.gsr-target-text { font-size: 14px; }
	.gsr-title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.gsr-target, .gsr-target.is-hit, .gsr-target.is-expired, .gsr-popup, .gsr-flash.is-active {
		animation-duration: 0.01ms !important;
	}
}