/* ==========================================================================
   css/tutorial.css  –  SkySim Economy  –  Instructor Keira Tutorial
   --------------------------------------------------------------------------
   Desktop: a side-positioned card with a Keira portrait on the left and a
   directional arrow pointing at the spotlighted target.

   Mobile (<= 767px): a bottom sheet that flips to the TOP when the target is
   in the lower half of the screen, so the highlighted element is never
   hidden behind the sheet. The breakpoint matches TutorialService.isMobile().
   ========================================================================== */

:root {
	--tut-bg:        rgb(18, 18, 26);
	--tut-bg-2:      rgb(24, 22, 38);
	--tut-edge:      rgba(150, 110, 240, 0.35);
	--tut-edge-soft: rgba(150, 110, 240, 0.16);
	--tut-accent:    rgb(148, 105, 238);
	--tut-accent-2:  rgb(190, 150, 255);
	--tut-text:      rgb(202, 202, 214);
	--tut-title:     rgb(214, 184, 255);
	--tut-dim:       rgba(7, 6, 14, 0.74);
}

/* ── Root ─────────────────────────────────────────────────────────────────── */
.tut-root {
	position: fixed;
	inset: 0;
	z-index: 9000;
	pointer-events: none;
	visibility: hidden;
}
.tut-root.active            { visibility: visible; }
.tut-root.active .tut-card  { pointer-events: auto; }

/* No-target steps: the spotlight is hidden, so dim with a backdrop instead. */
.tut-root.active.no-spotlight {
	background: var(--tut-dim);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: background 0.25s ease;
}

/* ── Spotlight ────────────────────────────────────────────────────────────── */
/* The huge box-shadow dims everything outside the rect; the rect itself stays
   bright and the target underneath remains clickable (pointer-events: none). */
.tut-spotlight {
	position: fixed;
	pointer-events: none;
	z-index: 9010;
	border-radius: 12px;
	transition:
		top 0.34s cubic-bezier(.4,0,.2,1),
		left 0.34s cubic-bezier(.4,0,.2,1),
		width 0.34s cubic-bezier(.4,0,.2,1),
		height 0.34s cubic-bezier(.4,0,.2,1);
	box-shadow:
		0 0 0 9999px var(--tut-dim),
		0 0 0 2px rgba(180, 140, 255, 0.95),
		0 0 26px 8px rgba(150, 100, 255, 0.5);
	animation: tut-ring 2.4s ease-in-out infinite;
}
@keyframes tut-ring {
	0%, 100% { box-shadow: 0 0 0 9999px var(--tut-dim), 0 0 0 2px rgba(180,140,255,0.85), 0 0 22px 6px rgba(150,100,255,0.40); }
	50%      { box-shadow: 0 0 0 9999px var(--tut-dim), 0 0 0 3px rgba(205,165,255,1.0),  0 0 38px 12px rgba(165,115,255,0.65); }
}

/* ── Click blocker ────────────────────────────────────────────────────────── */
#tut-blocker {
	position: fixed;
	inset: 0;
	z-index: 8999;
	pointer-events: auto;
	cursor: default;
	display: none;
}
#tut-blocker.visible        { display: block; }
#tut-blocker.wait-for-click { cursor: not-allowed; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.tut-card {
	position: fixed;
	z-index: 9020;
	width: 540px;
	max-width: calc(100vw - 28px);
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(150deg, var(--tut-bg-2), var(--tut-bg) 60%);
	border: 1px solid var(--tut-edge);
	box-shadow: 0 24px 64px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.04);
	display: flex;
	align-items: stretch;
	animation: tut-card-in 0.3s cubic-bezier(.34,1.25,.64,1);
}
@keyframes tut-card-in {
	from { opacity: 0; transform: scale(0.9) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Portrait (desktop) ───────────────────────────────────────────────────── */
.tut-portrait {
	flex-shrink: 0;
	width: 168px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, rgb(55,20,100) 0%, rgb(28,18,52) 60%, var(--tut-bg) 100%);
}
.tut-avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	mask-image: linear-gradient(to right, black 55%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, black 55%, transparent 100%);
}
.tut-portrait::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18,18,26,0.7) 0%, transparent 45%);
	pointer-events: none;
}
.tut-instructor-label {
	position: absolute;
	bottom: 12px; left: 0; right: 0;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	z-index: 1;
}
.tut-instructor-name {
	font-family: 'Space Grotesk', 'DINPro-Medium', sans-serif;
	font-size: 12px; font-weight: 700;
	color: var(--tut-accent-2);
	letter-spacing: 0.06em; text-transform: uppercase;
	text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.tut-instructor-role {
	display: flex; align-items: center; gap: 5px;
	font-size: 10px; color: rgba(200,180,255,0.65);
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.tut-keira-status {
	width: 6px; height: 6px; border-radius: 50%;
	background: rgb(100,220,130);
	box-shadow: 0 0 6px rgba(100,220,130,0.9);
	flex-shrink: 0;
	animation: tut-pulse-dot 2s ease-in-out infinite;
}
@keyframes tut-pulse-dot { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ── Content ──────────────────────────────────────────────────────────────── */
.tut-content {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column;
	padding: 18px 20px 16px;
	border-left: 1px solid var(--tut-edge-soft);
	position: relative;
}
.tut-content::before {
	content: '';
	position: absolute;
	top: -30px; right: -20px;
	width: 160px; height: 160px;
	border-radius: 50%;
	background: rgba(120,60,220,0.12);
	filter: blur(40px);
	pointer-events: none;
}

/* Header */
.tut-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 10px; margin-bottom: 12px;
}
.tut-head-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tut-bubble-eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 10.5px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: rgba(190,160,240,0.7);
}
.tut-bubble-title {
	font-family: 'Space Grotesk', 'DINPro-Medium', sans-serif;
	font-size: 18px; font-weight: 700; line-height: 1.25;
	color: var(--tut-title);
}
.tut-skip-btn {
	flex-shrink: 0; margin-top: 2px;
	background: transparent;
	border: 1px solid rgba(150,110,240,0.22);
	border-radius: 7px;
	color: rgba(160,130,205,0.75);
	font-size: 11px; padding: 4px 9px;
	cursor: pointer; white-space: nowrap;
	display: flex; align-items: center; gap: 5px;
	transition: all 0.15s ease;
}
.tut-skip-btn:hover {
	background: rgba(150,110,240,0.12);
	border-color: rgba(150,110,240,0.5);
	color: var(--tut-accent-2);
}

/* Message */
.tut-bubble-message {
	flex: 1;
	color: var(--tut-text);
	font-size: 13.5px; line-height: 1.7;
	margin-bottom: 18px;
}
.tut-bubble-message strong { color: var(--tut-title); font-weight: 600; }
.tut-bubble-message em      { color: var(--tut-accent-2); font-style: normal; }
.tut-bubble-message code {
	background: rgba(150,110,240,0.15);
	border-radius: 4px; padding: 1px 5px;
	font-size: 12px; color: var(--tut-accent-2);
}

/* Footer */
.tut-foot { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.tut-back-btn {
	flex-shrink: 0;
	width: 34px; height: 34px; border-radius: 9px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.09);
	color: rgba(185,175,205,0.7);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; transition: all 0.15s ease;
}
.tut-back-btn:hover:not([disabled]) {
	background: rgba(150,110,240,0.12);
	border-color: rgba(150,110,240,0.4);
	color: var(--tut-accent-2);
}
.tut-back-btn[disabled] { opacity: 0.25; cursor: default; }

/* Progress */
.tut-progress { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.tut-progress-track {
	flex: 1; height: 4px; border-radius: 3px;
	background: rgba(255,255,255,0.1);
	overflow: hidden;
}
.tut-progress-fill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, rgb(125,75,220), var(--tut-accent-2));
	box-shadow: 0 0 8px rgba(148,105,238,0.7);
	transition: width 0.32s cubic-bezier(.4,0,.2,1);
}
.tut-progress-label {
	flex-shrink: 0;
	font-size: 11px; font-variant-numeric: tabular-nums;
	color: rgba(180,165,215,0.55);
	letter-spacing: 0.03em;
}

/* Next / Finish */
.tut-next-btn {
	flex-shrink: 0;
	background: linear-gradient(135deg, rgb(125,75,220) 0%, rgb(95,45,185) 100%);
	border: 1px solid rgba(200,160,255,0.18);
	border-radius: 10px;
	color: rgba(255,255,255,0.96);
	font-size: 13px; font-weight: 600;
	padding: 8px 18px; cursor: pointer;
	display: flex; align-items: center; gap: 7px;
	transition: all 0.15s ease;
	box-shadow: 0 2px 14px rgba(100,50,200,0.5);
	white-space: nowrap;
}
.tut-next-btn:hover {
	background: linear-gradient(135deg, rgb(145,95,240) 0%, rgb(115,65,210) 100%);
	box-shadow: 0 4px 20px rgba(100,50,200,0.7);
	transform: translateY(-1px);
}
.tut-next-btn:active { transform: translateY(0); }

.tut-click-hint {
	flex-shrink: 0;
	font-size: 11.5px; color: rgb(140,220,150);
	display: flex; align-items: center; gap: 6px;
	animation: tut-hint 1.8s ease-in-out infinite;
}
@keyframes tut-hint { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ── Directional arrow ────────────────────────────────────────────────────── */
.tut-card-arrow { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 9025; }
.tut-card.arrow-top    .tut-card-arrow { top: -9px;    border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid var(--tut-edge); }
.tut-card.arrow-bottom .tut-card-arrow { bottom: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--tut-edge); }
.tut-card.arrow-left   .tut-card-arrow { left: -9px;   border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid var(--tut-edge); }
.tut-card.arrow-right  .tut-card-arrow { right: -9px;  border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 9px solid var(--tut-edge); }

/* ── Mobile-only elements hidden on desktop ───────────────────────────────── */
.tut-mobile-avatar { display: none; }

/* ── Mobile bottom / top sheet ────────────────────────────────────────────── */
@media (max-width: 767px) {

	.tut-card {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 480px;
		left: 50% !important;
		transform: translateX(-50%) !important;
		border-radius: 22px;
		overflow: visible;
	}

	/* Bottom sheet (default) */
	.tut-card.sheet-bottom,
	.tut-card:not(.sheet-top) {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		top: auto !important;
	}
	/* Top sheet — used when the target is in the lower half */
	.tut-card.sheet-top {
		top: calc(12px + env(safe-area-inset-top, 0px)) !important;
		bottom: auto !important;
	}

	.tut-portrait, .tut-card-arrow { display: none; }

	.tut-content {
		padding: 0;
		border-left: none;
		border-radius: 22px;
		background: linear-gradient(150deg, var(--tut-bg-2), var(--tut-bg) 70%);
		border: 1px solid var(--tut-edge);
		box-shadow: 0 18px 60px rgba(0,0,0,0.85);
	}
	.tut-content::before { display: none; }

	/* Floating circular avatar above the sheet */
	.tut-mobile-avatar {
		display: block;
		position: absolute;
		top: -34px; left: 18px;
		width: 64px; height: 64px;
		border-radius: 50%;
		object-fit: cover; object-position: top center;
		border: 3px solid rgba(160,120,255,0.8);
		box-shadow: 0 0 0 4px rgba(110,60,200,0.25), 0 8px 24px rgba(0,0,0,0.7);
		z-index: 1;
	}
	/* When sheet is at the TOP, tuck the avatar below its bottom edge instead */
	.tut-card.sheet-top .tut-mobile-avatar { top: auto; bottom: -34px; }

	.tut-head {
		padding: 14px 16px 10px 92px;   /* leave room for the avatar */
		margin-bottom: 0;
		min-height: 56px;
		align-items: center;
	}
	.tut-card.sheet-top .tut-head { padding: 14px 16px 10px; }

	.tut-bubble-title { font-size: 16px; }

	.tut-bubble-message {
		padding: 4px 18px 0;
		font-size: 14.5px; line-height: 1.65;
		margin-bottom: 16px;
	}

	.tut-foot {
		padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
		gap: 12px;
	}
	.tut-card.sheet-top .tut-foot {
		padding: 0 16px 16px;
	}

	.tut-back-btn { width: 44px; height: 44px; font-size: 15px; }
	.tut-next-btn { padding: 11px 22px; font-size: 15px; border-radius: 12px; }
	.tut-skip-btn { padding: 6px 11px; font-size: 12px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.tut-spotlight { animation: none; transition: none; }
	.tut-card { animation: none; }
	.tut-keira-status, .tut-click-hint { animation: none; }
	.tut-progress-fill { transition: none; }
}