/* ==========================================================================
   LAN Party — retro layer
   Notched panels, stepped rules, dither texture and a pixel face for the
   smallest labels. Sits on top of the neon system, never replaces it.
   Loaded last.
   ========================================================================== */

:root {
	--font-pixel: "Press Start 2P", "Share Tech Mono", monospace;
	--notch: 12px;
	--notch-sm: 7px;
}

/* --- Notched corners -------------------------------------------------------
   Two opposite corners cut at 45 degrees. Reads as a hardware panel rather
   than a rounded card. clip-path also clips outer glow, so anything notched
   carries its light on an inset shadow instead.
   -------------------------------------------------------------------------- */

.lp-notch {
	border-radius: 0 !important;
	clip-path: polygon(
		var(--notch) 0,
		100% 0,
		100% calc(100% - var(--notch)),
		calc(100% - var(--notch)) 100%,
		0 100%,
		0 var(--notch)
	);
}

.lp-bring-card,
.lp-cal-month,
.lp-check,
.lp-gear,
.lp-food,
.lp-game-card,
.lp-suggest-card,
.lp-poll-form,
.lp-form--boxed,
.lp-map-frame,
.lp-wizard,
.lp-countdown,
.lp-modal-sheet {
	border-radius: 0;
	clip-path: polygon(
		var(--notch) 0,
		100% 0,
		100% calc(100% - var(--notch)),
		calc(100% - var(--notch)) 100%,
		0 100%,
		0 var(--notch)
	);
}

.lp-cal-day,
.lp-picked-list li,
.lp-gear-list li,
.lp-bring-icon,
.lp-seat-chip,
.lp-check-body,
.lp-rule-x,
.lp-field input,
.lp-field textarea,
.lp-inline-notice,
.lp-locked,
.lp-field-note {
	border-radius: 0;
	clip-path: polygon(
		var(--notch-sm) 0,
		100% 0,
		100% calc(100% - var(--notch-sm)),
		calc(100% - var(--notch-sm)) 100%,
		0 100%,
		0 var(--notch-sm)
	);
}

/* Inputs lose their glow ring to the clip, so the focus state moves inside. */
.lp-field input:focus,
.lp-field textarea:focus {
	box-shadow: inset 0 0 0 2px var(--electric), inset 0 0 18px rgba(34, 224, 255, .25);
	border-color: transparent;
}

/* --- Dither texture --------------------------------------------------------
   A 4px checkerboard at very low opacity. Close up it is visible grain; from
   a normal distance it just stops large panels reading as flat plastic.
   -------------------------------------------------------------------------- */

.lp-wizard,
.lp-check,
.lp-gear,
.lp-food,
.lp-poll-form,
.lp-form--boxed,
.lp-bring-card,
.lp-cal-month {
	background-image:
		repeating-conic-gradient(rgba(255, 255, 255, .022) 0% 25%, transparent 0% 50%);
	background-size: 4px 4px;
	background-blend-mode: overlay;
}

/* --- Stepped section rules -------------------------------------------------
   The smooth gradient line became a run of hard pixel dashes.
   -------------------------------------------------------------------------- */

.lp-section::before {
	height: 3px;
	background:
		repeating-linear-gradient(
			90deg,
			var(--electric) 0 6px,
			transparent 6px 10px,
			var(--plasma) 10px 14px,
			transparent 14px 22px
		);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 78%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 78%, transparent);
	opacity: .5;
	image-rendering: pixelated;
}

/* Section index chip in a pixel face. */
.lp-section::after {
	font-family: var(--font-pixel);
	font-size: 8px;
	letter-spacing: .02em;
	padding: 6px 9px;
	top: -14px;
	border-radius: 0;
	clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
	box-shadow: 0 0 0 2px rgba(34, 224, 255, .45);
}

/* --- Pixel labels ---------------------------------------------------------- */

.lp-step-n,
.lp-check-no,
.lp-datepick-tag {
	font-family: var(--font-pixel);
}

.lp-step-n { font-size: 8px; }
.lp-check-no { font-size: 8px; letter-spacing: 0; }
.lp-datepick-tag { font-size: 8px; letter-spacing: .06em; padding: 8px 14px; }

.lp-seat-label { letter-spacing: .02em; }

/* --- Hard pixel shadows ----------------------------------------------------
   No blur, offset by whole pixels. This is the detail that reads "old web".
   -------------------------------------------------------------------------- */

.lp-cal-day.is-picked {
	box-shadow:
		inset 0 0 0 2px var(--electric),
		3px 3px 0 rgba(34, 224, 255, .35);
}

.lp-check[open] {
	box-shadow:
		inset 0 0 0 1px rgba(34, 224, 255, .4),
		4px 4px 0 rgba(34, 224, 255, .12);
}

.lp-gear { box-shadow: inset 0 0 0 1px rgba(255, 59, 92, .3), 4px 4px 0 rgba(255, 59, 92, .1); }
.lp-food { box-shadow: inset 0 0 0 1px var(--line), 4px 4px 0 rgba(196, 113, 255, .12); }

/* --- CRT flicker on the headings -------------------------------------------- */

.lp-h2 {
	text-shadow:
		1px 0 0 rgba(255, 45, 149, .28),
		-1px 0 0 rgba(34, 224, 255, .28);
}

/* --- Chunky focus ring ------------------------------------------------------ */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--electric);
	outline-offset: 2px;
	border-radius: 0;
}

/* --- Scanlines a touch more present ----------------------------------------- */

.lp-scanlines {
	opacity: .5;
	background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
	mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
	.lp-scanlines { opacity: .3; }
}

/* --- Hero must clear the floating menu -------------------------------------- */

.lp-hero { padding-block: clamp(96px, 9vw, 132px) clamp(40px, 6vw, 80px); }
.lp-hero-logo { margin-top: 0; }

@media (max-width: 720px) {
	.lp-hero { padding-block: 92px 34px; }
}

@media (max-width: 400px) {
	.lp-hero { padding-block: 86px 30px; }
}

/* Small cells need a smaller cut or the notch eats the number. */
.lp-cal-day {
	clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

@media (max-width: 560px) {
	.lp-cal-day {
		clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
	}
}

/* The index chip must not collide with the first heading. */
.lp-section-head { padding-top: 4px; }

/* --- Packing list: 2 x 3 across the width ---------------------------------- */

.lp-checklist {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: none;
	/* Opening one must not stretch its neighbour. */
	align-items: start;
}

.lp-check-body { padding-left: 18px; }
.lp-food { max-width: none; }

@media (max-width: 720px) {
	.lp-checklist { grid-template-columns: minmax(0, 1fr); }
}

/* --- Clean-up notice -------------------------------------------------------
   Deliberately louder than the rest of the rules: it is the one thing people
   forget, and we can name who sat where.
   -------------------------------------------------------------------------- */

.lp-cleanup {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 22px;
	padding: 26px 28px;
	background:
		repeating-conic-gradient(rgba(255, 255, 255, .022) 0% 25%, transparent 0% 50%),
		linear-gradient(135deg, rgba(255, 171, 46, .16), rgba(255, 59, 92, .1) 70%);
	background-size: 4px 4px, auto;
	box-shadow:
		inset 0 0 0 2px rgba(255, 171, 46, .5),
		5px 5px 0 rgba(255, 171, 46, .16);
	clip-path: polygon(
		var(--notch) 0,
		100% 0,
		100% calc(100% - var(--notch)),
		calc(100% - var(--notch)) 100%,
		0 100%,
		0 var(--notch)
	);
}

.lp-cleanup-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	color: var(--amber);
	background: rgba(255, 171, 46, .14);
	box-shadow: inset 0 0 0 2px rgba(255, 171, 46, .45);
	clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.lp-cleanup-icon svg { width: 26px; height: 26px; }

.lp-cleanup-tag {
	margin: 0 0 6px;
	font-family: var(--font-pixel);
	font-size: 8px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--amber);
	text-shadow: 0 0 12px rgba(255, 171, 46, .7);
}

.lp-cleanup-title {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: clamp(19px, 2.6vw, 24px);
	font-weight: 700;
	color: #fff;
}

.lp-cleanup-text { margin: 0; color: var(--text-2); font-size: 15px; max-width: 62ch; }

@media (max-width: 560px) {
	.lp-cleanup { flex-direction: column; gap: 14px; padding: 22px 20px; }
}

/* ==========================================================================
   Locked map
   The plan stays visible underneath: people should see what they are waiting
   for. Blurred and dimmed, with the notice floating on top.
   ========================================================================== */

.lp-map-frame.is-locked .lp-map-stage {
	filter: blur(2.5px) saturate(.75);
	opacity: .5;
	pointer-events: none;
	transform: none !important;
}

.lp-map-lock {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-items: center;
	padding: clamp(20px, 4vw, 40px);
	background:
		radial-gradient(120% 90% at 50% 40%, rgba(10, 5, 18, .5), rgba(6, 3, 12, .88) 75%);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}

/* Faint cross over the whole plan, the way a plan gets struck through. */
.lp-map-lock-x {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(196, 113, 255, .22) 50%, transparent calc(50% + 1px)),
		linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(34, 224, 255, .18) 50%, transparent calc(50% + 1px));
}

.lp-map-lock-inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 12px;
	max-width: 560px;
	padding: clamp(22px, 3.5vw, 32px);
	text-align: center;
	background:
		repeating-conic-gradient(rgba(255, 255, 255, .02) 0% 25%, transparent 0% 50%),
		linear-gradient(180deg, rgba(26, 15, 42, .96), rgba(12, 6, 22, .96));
	background-size: 4px 4px, auto;
	box-shadow:
		inset 0 0 0 2px rgba(196, 113, 255, .45),
		6px 6px 0 rgba(196, 113, 255, .14);
	clip-path: polygon(
		var(--notch) 0,
		100% 0,
		100% calc(100% - var(--notch)),
		calc(100% - var(--notch)) 100%,
		0 100%,
		0 var(--notch)
	);
}

.lp-map-lock-icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	color: var(--plasma);
	background: rgba(196, 113, 255, .14);
	box-shadow: inset 0 0 0 2px rgba(196, 113, 255, .45);
	clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.lp-map-lock-icon svg { width: 26px; height: 26px; }

.lp-map-lock-tag {
	margin: 0;
	font-family: var(--font-pixel);
	font-size: 8px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--plasma);
	text-shadow: 0 0 14px rgba(196, 113, 255, .8);
}

.lp-map-lock-text {
	margin: 0;
	color: var(--text);
	font-size: clamp(15px, 1.9vw, 17px);
	line-height: 1.55;
	max-width: 46ch;
}

.lp-map-lock-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 2px 0 4px;
	padding: 12px 15px;
	text-align: left;
	background: rgba(34, 224, 255, .08);
	box-shadow: inset 0 0 0 1px rgba(34, 224, 255, .3);
	font-size: 13.5px;
	color: var(--text-2);
	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.lp-map-lock-note svg { width: 17px; height: 17px; flex: none; color: var(--electric); margin-top: 1px; }

@media (max-width: 560px) {
	.lp-map-lock { padding: 14px; }
	.lp-map-lock-icon { width: 44px; height: 44px; }
	.lp-map-lock-icon svg { width: 21px; height: 21px; }
	.lp-map-lock-note { font-size: 12.5px; }
}

/* --- Hint text follows the input device ------------------------------------ */

.lp-hint-touch { display: none; }

@media (hover: none) {
	.lp-hint-pointer { display: none; }
	.lp-hint-touch { display: inline; }
}

/* --- Peeking at the locked plan --------------------------------------------- */

/* The hint only makes sense once the cover is off. */
.lp-map-frame.is-locked .lp-map-hint { display: none; }

.lp-relock {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 0;
	cursor: pointer;
	background: linear-gradient(135deg, rgba(196, 113, 255, .22), rgba(34, 224, 255, .14));
	backdrop-filter: blur(12px) saturate(1.3);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
	box-shadow: inset 0 0 0 1.5px rgba(196, 113, 255, .5);
	color: var(--text);
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
	transition: box-shadow .2s ease, background .2s ease;
}

.lp-relock:hover {
	background: linear-gradient(135deg, rgba(196, 113, 255, .34), rgba(34, 224, 255, .22));
	box-shadow: inset 0 0 0 1.5px var(--plasma);
}

.lp-relock svg { width: 15px; height: 15px; color: var(--plasma); }

@media (max-width: 560px) {
	.lp-relock { right: 8px; bottom: 8px; padding: 8px 11px; font-size: 10.5px; }
	.lp-relock svg { width: 13px; height: 13px; }
}


/* --- Toast with an action --------------------------------------------------- */

.lp-toast {
	display: flex;
	align-items: center;
	gap: 14px;
	border-radius: 0;
	padding: 12px 14px 12px 20px;
	font-family: var(--font-display);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .04em;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	box-shadow: inset 0 0 0 1.5px rgba(196, 113, 255, .5), 0 20px 44px -24px #000;
}

.lp-toast.is-error { box-shadow: inset 0 0 0 1.5px rgba(255, 59, 92, .6), 0 20px 44px -24px #000; }

.lp-toast-action {
	flex: none;
	padding: 8px 15px;
	background: linear-gradient(135deg, rgba(34, 224, 255, .26), rgba(196, 113, 255, .22));
	box-shadow: inset 0 0 0 1.5px rgba(34, 224, 255, .6);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 0 10px rgba(34, 224, 255, .7);
	clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
	transition: background .2s ease, box-shadow .2s ease;
}

.lp-toast-action:hover {
	background: linear-gradient(135deg, rgba(34, 224, 255, .42), rgba(196, 113, 255, .34));
	box-shadow: inset 0 0 0 1.5px var(--electric);
}

@media (max-width: 460px) {
	.lp-toast { gap: 10px; padding-left: 15px; font-size: 12.5px; }
	.lp-toast-action { padding: 7px 11px; font-size: 10.5px; }
}

/* --- Endless carousel -------------------------------------------------------
   Scroll snapping fights a continuous drift: every frame the browser tries to
   settle on a card. So the rail scrolls freely instead.
   -------------------------------------------------------------------------- */

.lp-carousel {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.lp-game { scroll-snap-align: none; }
.lp-carousel-track { will-change: transform; }

/* Clones are decoration; screen readers already read the originals. */
.lp-game.is-clone { pointer-events: auto; }

/* --- Plan can still change -------------------------------------------------- */

.lp-plan-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 0;
	padding: 12px 15px;
	max-width: 62ch;
	background: rgba(196, 113, 255, .09);
	box-shadow: inset 0 0 0 1px rgba(196, 113, 255, .3);
	font-size: 13.5px;
	color: var(--text-2);
	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.lp-plan-note svg { width: 17px; height: 17px; flex: none; color: var(--plasma); margin-top: 1px; }

/* ==========================================================================
   Calendar cell: number on top, meter underneath
   A corner badge covered the date as soon as the count reached two digits.
   The meter now spans the full width, so any number fits.
   ========================================================================== */

label.lp-cal-day {
	display: grid;
	grid-template-rows: 1fr auto;
	place-items: stretch;
	aspect-ratio: 1 / 1.22;
	padding: 0;
	gap: 0;
}

label.lp-cal-day .lp-cal-num {
	display: grid;
	place-items: center;
	line-height: 1;
	padding-top: 2px;
}

.lp-cal-day .lp-day-bar {
	position: relative;
	/* The old rule pinned this to the bottom of the cell; in the grid it has to
	   sit in its own row, so every offset is cleared. */
	inset: auto;
	display: block;
	width: 100%;
	height: 14px;
	margin: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, .07);
	overflow: hidden;
}

.lp-cal-day .lp-day-bar i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--fill, 0%);
	background: linear-gradient(90deg, rgba(34, 224, 255, .55), rgba(196, 113, 255, .5));
	transition: width .4s cubic-bezier(.2, .9, .3, 1);
}


.lp-cal-count {
	position: relative;
	display: block;
	width: 100%;
	top: auto;
	right: auto;
	min-width: 0;
	height: 14px;
	padding: 0;
	border-radius: 0;
	background: none;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: .02em;
	text-align: center;
	color: var(--text-2);
}

.lp-cal-count:empty { display: block; }

label.lp-cal-day.is-picked .lp-cal-count { color: #fff; }
label.lp-cal-day.is-picked .lp-day-bar { background: rgba(0, 0, 0, .3); }
label.lp-cal-day.is-picked .lp-day-bar i { background: linear-gradient(90deg, var(--electric), var(--plasma)); }

/* Days that are not options keep the same footprint so the grid stays even. */
.lp-cal-day--off,
.lp-cal-blank { aspect-ratio: 1 / 1.22; }

@media (max-width: 560px) {
	.lp-cal-day .lp-day-bar,
	.lp-cal-count { height: 16px; line-height: 16px; }
	.lp-cal-count { font-size: 11px; }
}

/* ==========================================================================
   Phone fixes
   The menu items did not fit inside the pill and the toast collapsed to the
   width of its longest word. Both are handled explicitly rather than left to
   the shrink-to-fit algorithm.
   ========================================================================== */

/* --- Menu pill --------------------------------------------------------------
   Never wrap. If the labels still do not fit, the row scrolls sideways and the
   current section is scrolled into view, so nothing is ever hidden.
   -------------------------------------------------------------------------- */

.lp-menu {
	flex-wrap: nowrap;
	max-width: 100%;
	min-width: 0;
}

.lp-menu-list {
	flex-wrap: nowrap;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.lp-menu-list::-webkit-scrollbar { display: none; }
.lp-menu-list > li { flex: none; }

@media (max-width: 560px) {
	.lp-header { padding-inline: 10px; }
	.lp-menu { padding: 5px; gap: 0; }
	.lp-menu-item { padding: 9px 9px; font-size: 10.5px; letter-spacing: .03em; }
}

@media (max-width: 430px) {
	.lp-menu-item { padding: 9px 7px; font-size: 10px; letter-spacing: .01em; }
}

/* The sliding highlight cannot follow a scrolling row without lagging, so on
   phones the active item carries its own background instead. */
@media (max-width: 720px) {
	.lp-menu-cursor { display: none; }

	.lp-menu-item.is-active {
		background: linear-gradient(135deg, rgba(34, 224, 255, .2), rgba(196, 113, 255, .18));
		box-shadow: inset 0 0 0 1px rgba(34, 224, 255, .45);
	}
}

/* --- Toast ------------------------------------------------------------------
   Give it a real width. Below the breakpoint the message and its button stack
   as two full rows, which reads as a deliberate layout instead of a squeeze.
   -------------------------------------------------------------------------- */

.lp-toast {
	width: min(460px, calc(100vw - 24px));
	max-width: none;
	box-sizing: border-box;
}

.lp-toast > span { flex: 1; min-width: 0; }

@media (max-width: 560px) {
	.lp-toast {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 16px;
		bottom: 16px;
		text-align: center;
	}

	.lp-toast-action { width: 100%; text-align: center; padding: 11px 14px; }
}

/* ==========================================================================
   Wizard step 1 on phones
   Four stacked months push the Next button far below the fold, so the whole
   action row moves above the calendar. It stays reachable without scrolling
   back down after ticking a date near the top.
   ========================================================================== */

@media (max-width: 720px) {
	.lp-panel[data-panel="1"] {
		display: flex;
		flex-direction: column;
	}

	.lp-panel[data-panel="1"] .lp-panel-intro { order: 1; }
	.lp-panel[data-panel="1"] .lp-wizard-nav { order: 2; margin: 0 0 18px; }
	.lp-panel[data-panel="1"] .lp-cal { order: 3; }
	.lp-panel[data-panel="1"] .lp-cal-legend { order: 4; }
}

/* --- A disabled button should read as "not yet", not as broken -------------
   Muted grey text looked like a rendering fault. The label stays white and
   only the fill and glow drop away.
   -------------------------------------------------------------------------- */

.lp-btn:disabled,
.lp-btn[disabled] {
	color: #ffffff;
	text-shadow: 0 0 10px rgba(34, 224, 255, .35);
	opacity: .62;
	cursor: not-allowed;
}

.lp-picked-note { color: var(--text-2); }