/* css/tutorial.css — tutorial offer, overlay + static how-to-play page.
   Reuses the dark main-menu palette (--menu-* tokens from base.css) so the
   tutorial feels native to the landing screen. */

/* ---- First-play offer (index.html) ---- */
.pt-offer {
	position: fixed;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 99999;
	width: min(420px, calc(100vw - 28px));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 42px 13px 16px;
	background: var(--menu-surface, rgba(30, 34, 54, 0.98));
	color: var(--menu-text, #fff);
	border: 1px solid var(--menu-border, rgba(255, 255, 255, 0.12));
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
	animation: pt-offer-in 180ms ease-out;
}
@keyframes pt-offer-in {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

.pt-offer-copy {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}
.pt-offer-title { font-size: 0.93rem; }
.pt-offer-body {
	color: var(--menu-text-dim, #a9b0cf);
	font-size: 0.8rem;
	line-height: 1.35;
}
.pt-offer-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 7px;
}
.pt-offer-btn {
	min-height: 34px;
	padding: 0 11px;
	border-radius: var(--radius-panel, 4px);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}
.pt-offer-decline {
	background: transparent;
	color: var(--menu-text-dim, #a9b0cf);
	border: 1px solid var(--btn-ghost-border, rgba(255, 255, 255, 0.12));
}
.pt-offer-accept {
	background: var(--btn-cream-bg, #4a90e2);
	color: var(--btn-cream-text, #fff);
	border: 1px solid transparent;
}
.pt-offer-dismiss {
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	color: var(--menu-text-dim, #a9b0cf);
	border: 0;
	font-size: 1.25rem;
	cursor: pointer;
}
.pt-offer-decline:hover,
.pt-offer-dismiss:hover { color: var(--menu-text, #fff); }
.pt-offer-accept:hover { background: var(--btn-cream-hover, #3678c5); }

@media (max-width: 520px) {
	.pt-offer {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}
	.pt-offer-actions { justify-content: flex-end; }
}

/* ---- Overlay carousel (index.html) ---- */
.pt-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 12, 22, 0.72);
	backdrop-filter: blur(2px);
}

.pt-panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--menu-gradient, linear-gradient(135deg, #181c2f 0%, #232946 100%));
	color: var(--menu-text, #fff);
	border: 1px solid var(--menu-border, rgba(255, 255, 255, 0.12));
	border-radius: var(--menu-radius, 18px);
	box-shadow: var(--menu-shadow, 0 8px 32px rgba(0, 0, 0, 0.4));
	padding: 28px 24px 20px;
	text-align: center;
}

.pt-skip {
	position: absolute;
	top: 2px;
	right: 4px;
	background: none;
	border: none;
	color: var(--menu-text-dim, #a9b0cf);
	font-size: 0.85rem;
	cursor: pointer;
	/* ≥24px tap target; top/right shrunk so the label stays visually put. */
	padding: 14px 16px;
}
.pt-skip:hover { color: var(--menu-text, #fff); }

/* ---- Read-only game diorama (overlay) ---- */
.pt-diorama {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.pt-board-wrap {
	width: min(248px, 68vw);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* chessboard.js sizes its board to this element's width. position:relative so
   the absolute .pt-arrow-overlay anchors to the board, not the page. */
.pt-board { width: 100%; position: relative; }

/* Move-preview arrow drawn inside #pt-board for the "See the move" step.
   Matches the live game arrow palette (--hint-arrow-color) so the demo looks
   identical to the real feature. */
.pt-arrow-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
}
.pt-arrow {
	fill: var(--hint-arrow-color, rgba(240, 182, 78, 0.9));
	stroke: var(--hint-arrow-outline, rgba(42, 37, 33, 0.4));
	stroke-width: 2;
	stroke-linejoin: round;
	paint-order: stroke;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* Simulated hover for the card whose move the arrow demonstrates. The diorama
   hand is pointer-events:none, so :hover never triggers — we paint it on. */
.pt-hand .piece-card.pt-hover {
	border-color: var(--accent-cream);
	transform: translateY(-5px) scale(1.08);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	z-index: 2;
}

/* The hand reuses the live .card-container / .piece-card styles, scaled down to
   fit the overlay. pointer-events off keeps the diorama non-interactive. */
.pt-hand.card-container {
	min-height: 0;
	width: min(248px, 68vw);
	pointer-events: none;
}
.pt-hand .piece-card {
	height: 58px;
	margin: 2px;
	padding: 4px;
	border-width: 1px;
	border-radius: 6px;
}

/* ---- Step card (shared by overlay + static page) ---- */
.pt-stage { min-height: 96px; display: flex; }
.pt-text {
	width: 100%;
	text-align: center;
	animation: pt-fade 220ms ease;
}
.pt-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	animation: pt-fade 220ms ease;
}
@keyframes pt-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.pt-glyph {
	font-size: 2.6rem;
	line-height: 1;
	margin-top: 6px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.pt-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--menu-text, #fff);
}
.pt-body {
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.5;
	color: var(--menu-text-dim, #a9b0cf);
	max-width: 34ch;
}
.pt-body b { color: var(--menu-text, #fff); font-weight: 700; }

/* ---- Dots ---- */
.pt-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 14px;
}
.pt-dot {
	/* 24px tap target rendered as an 8px dot: the transparent border is inside
	   the hit box but outside the painted background. */
	width: 24px;
	height: 24px;
	padding: 0;
	border: 8px solid transparent;
	background-clip: padding-box;
	border-radius: 50%;
	background-color: var(--menu-border, rgba(255, 255, 255, 0.2));
	cursor: pointer;
	transition: background 150ms ease, transform 150ms ease;
}
.pt-dot.is-on {
	/* background-color, not the shorthand — that would reset background-clip
	   and flood the whole 24px hit box. */
	background-color: var(--highlight-color, #4a90e2);
	transform: scale(1.25);
}

/* ---- Nav buttons ---- */
.pt-navrow { display: flex; gap: 10px; }
.pt-nav {
	flex: 1;
	height: var(--control-height, 36px);
	border-radius: var(--radius-panel, 4px);
	border: 1px solid var(--btn-ghost-border, rgba(255, 255, 255, 0.12));
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}
.pt-prev {
	background: var(--btn-ghost-bg, rgba(255, 255, 255, 0.08));
	color: var(--menu-text, #fff);
}
.pt-prev:disabled { opacity: 0.4; cursor: default; }
.pt-next {
	background: var(--btn-cream-bg, #4a90e2);
	color: var(--btn-cream-text, #fff);
	border-color: transparent;
}
.pt-next:hover { background: var(--btn-cream-hover, #3678c5); color: var(--btn-cream-text); }

.pt-foot { margin-top: 6px; }
.pt-fulllink {
	color: var(--menu-text-dim, #a9b0cf);
	font-size: 0.82rem;
	text-decoration: underline;
	/* ≥24px tap target (was a 15px-tall bare link). */
	display: inline-block;
	padding: 8px 10px;
}
.pt-fulllink:hover { color: var(--menu-text, #fff); }

/* Short viewports (landscape phones): the centered panel is taller than the
   screen, so Skip sat above the viewport and Back/Next/dots below it with no
   scroll — a new user was stuck on step 1. Shrink the diorama and let the
   overlay scroll; margin:auto centers the panel only when it fits. */
@media (max-height: 480px) {
	.pt-overlay {
		align-items: flex-start;
		overflow-y: auto;
		padding: 10px;
	}
	.pt-panel {
		margin: auto;
		padding: 16px 18px 10px;
	}
	.pt-board-wrap { width: min(150px, 42vh); }
	.pt-hand.card-container { width: min(230px, 64vh); }
	.pt-hand .piece-card {
		height: 40px;
		padding: 2px;
	}
	.pt-diorama {
		gap: 6px;
		margin-bottom: 8px;
	}
	.pt-glyph {
		font-size: 1.7rem;
		margin-top: 0;
	}
	.pt-stage { min-height: 0; }
	.pt-body { font-size: 0.88rem; }
	.pt-dots { margin: 8px 0 6px; }
}

/* ---- Static how-to-play page ---- */
body.pt-static-page {
	height: auto;
	min-height: 100vh;
	overflow-y: auto;
}

.pt-page {
	max-width: 680px;
	margin: 0 auto;
	padding: 28px 18px 60px;
	color: var(--menu-text, #fff);
}
.pt-page h1 {
	text-align: center;
	margin: 0 0 6px;
	font-size: 1.6rem;
}
.pt-page .pt-sub {
	text-align: center;
	color: var(--menu-text-dim, #a9b0cf);
	margin: 0 0 26px;
	font-size: 0.95rem;
}

/* Each rule is a card: text on the left, a live board + hand on the right. */
.pt-page .pt-card {
	flex-direction: row;
	align-items: center;
	gap: 22px;
	text-align: left;
	padding: 18px 20px;
	margin-bottom: 14px;
	background: var(--menu-surface, rgba(30, 34, 54, 0.95));
	border: 1px solid var(--menu-border, rgba(255, 255, 255, 0.12));
	border-radius: var(--menu-radius, 6px);
	animation: none;
}
.pt-card-text { flex: 1 1 auto; min-width: 0; }
.pt-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}
.pt-page .pt-card-head .pt-glyph {
	font-size: 1.9rem;
	margin: 0;
	flex: 0 0 auto;
}
.pt-page .pt-card-head .pt-title { margin: 0; font-size: 1.05rem; }
.pt-page .pt-body { max-width: none; }

/* Right-hand visual column. Fixed width so every board lines up; the global
   .pt-board-wrap / .pt-hand sizing (sized for the overlay) is overridden here. */
.pt-card-visual {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 240px;
}
.pt-card-visual .pt-board-wrap { width: 240px; }
/* The hand needs more room than the board: six cards at the overlay's 58px card
   height want ~290px, so a board-width hand squishes them into slivers. Let it
   run wider than the board (and reduce the inter-card gap) so the art reads. */
.pt-card-visual .pt-hand.card-container {
	width: 290px;
	gap: 4px;
}

/* Stack text over visual on narrow screens. */
@media (max-width: 560px) {
	.pt-page .pt-card { flex-direction: column; align-items: stretch; gap: 16px; }
	.pt-card-visual { width: 100%; }
	.pt-card-visual .pt-board-wrap,
	.pt-card-visual .pt-hand.card-container { width: min(248px, 80vw); }
}

.pt-page .pt-back {
	display: inline-block;
	margin: 0 auto 22px;
	color: var(--menu-text-dim, #a9b0cf);
	text-decoration: none;
	font-size: 0.9rem;
}
.pt-page .pt-back:hover { color: var(--menu-text, #fff); }
.pt-page-wrap {
	min-height: 100vh;
	background: var(--menu-gradient, linear-gradient(135deg, #181c2f 0%, #232946 100%));
}

@media (prefers-reduced-motion: reduce) {
	.pt-card,
	.pt-offer { animation: none; }
}