:root {
	--bg: #041229;
	--surface: #071827;
	--surface-2: #0b2533;
	--text-primary: #F5FAFF;
	--text-secondary: #CFEAFB;
	--muted: #9FB8C9;
	--border: rgba(255,255,255,0.06);
	--input-bg: #061526;
	--input-border: rgba(255,255,255,0.06);
	--placeholder: rgba(234,246,255,0.6);
	--accent: #1F8B46;
	--accent-strong: #166B36;
	--danger: #C94B4B;
	--link: #8FD1FF;
	--focus: rgba(143,209,255,0.18);
	--shadow: rgba(2,6,12,0.7);
	--gold-1: #FFD166;
	--gold-2: #FFB800;
}

html, body { min-height: 100vh; }
body { font-family: Montserrat, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 0; margin:0; background: linear-gradient(180deg,#08121a 0%, #0e2a1f 100%); background-repeat: no-repeat; background-attachment: fixed; color: var(--text-primary); }
.masthead { text-align:center; padding: 28px 12px 8px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02); position: relative; }
.masthead h1 { margin: 6px 0 0; font-weight: 900; color: #fff; font-size: 40px; letter-spacing: 1px; }
.masthead .script { font-family: 'Great Vibes', cursive; font-size: 46px; color: #ffd700; margin-right: 6px; display:inline-block; vertical-align: middle; }
.masthead .subtitle { margin: 6px 0 18px; color: rgba(255,255,255,0.85); }

/* Admin link in masthead (visible when user is logged in via httpOnly cookie or saved token) */
.masthead .admin-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 12px;
	right: 12px;
	background: linear-gradient(180deg, var(--accent), var(--accent-strong));
	color: #fff !important;
	padding: 8px 12px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(16,40,30,0.28);
	border: 1px solid rgba(255,255,255,0.06);
	transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.masthead .admin-link:hover,
.masthead .admin-link:focus {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(16,40,30,0.36);
	outline: none;
}
.masthead .admin-link:active { transform: translateY(-1px) scale(0.995); }

/* Slightly smaller pill on very small screens */
@media (max-width: 420px) {
	.masthead .admin-link { padding: 6px 10px; font-size: 13px; top: 8px; right: 8px; }
}

/* Admin header "View site" button (on admin pages) */
.admin-theme .site-header .view-site-link {
	display: inline-block;
	margin-left: 8px;
	margin-right: 8px;
	background: #ffffff;
	color: var(--surface-2);
	padding: 8px 12px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: 0 6px 18px rgba(2,6,12,0.35);
	transition: transform 140ms ease, box-shadow 140ms ease;
}
.admin-theme .site-header .view-site-link:hover,
.admin-theme .site-header .view-site-link:focus {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(2,6,12,0.38);
	outline: none;
}
.admin-theme .site-header .view-site-link:active { transform: translateY(-1px); }

@media (max-width: 520px) {
	.admin-theme .site-header .view-site-link { padding: 6px 10px; font-size: 14px; }
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, 170px); gap: 18px; /* fixed gap */ max-width: calc((170px * 6) + (18px * 5)); /* at most 6 doors per row */ margin: 28px auto; padding: 12px; justify-content: center; }

/* Door base */
.door { position: relative; background: linear-gradient(180deg,#b31f2c 0%, #8b1420 100%); color: #fff; padding: 0; text-align: center; border-radius: 12px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.45); overflow: visible; perspective: 1000px; transition: transform 220ms ease, box-shadow 220ms ease; border: 2px solid rgba(255,255,255,0.04); height: 160px; display:flex; align-items:center; justify-content:center; min-width: 170px; width: 170px; box-sizing: border-box; }
.door.open:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 30px rgba(15,23,42,0.16); }
.door.locked { background: linear-gradient(180deg,#7a1a1a 0%, #4f1313 100%); cursor: default; }

.door .day { font-size: 20px; font-weight: 900; letter-spacing: 0.6px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.door .name { margin-top: 10px; font-size: 15px; opacity: 0.98; color: #fff; }

/* Gold number badge */
.door .day::before { content: ''; display:block; width:0; height:0 }

/* Flap element (pseudo) - acts like a top lid that opens on hover */
.door::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 54%; /* covers upper part of the door */
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06));
	transform-origin: top center;
	transform: rotateX(0deg);
	transition: transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms;
	pointer-events: none;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	box-shadow: inset 0 -6px 18px rgba(0,0,0,0.12);
}

/* When hovering an open door, flap rotates up to reveal the interior */
.door.open:hover::before { transform: rotateX(-92deg); }

/* Subtle inner panel that becomes visible as flap opens */
.door .inner { position: relative; z-index: 2; transition: opacity 260ms ease, transform 360ms ease; }
.door.open:hover .inner { transform: translateY(4px); }

/* Split-door panels */
.door .panel { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 6; transform-style: preserve-3d; backface-visibility: hidden; box-shadow: inset 0 -6px 12px rgba(0,0,0,0.25); transition: transform 620ms cubic-bezier(.2,.8,.2,1); }
.door .panel.left { left: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; transform-origin: left center; background: linear-gradient(180deg,#8c2b2b,#5b1515); border-right: 1px solid rgba(0,0,0,0.25); }
.door .panel.right { right: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; transform-origin: right center; background: linear-gradient(180deg,#8c2b2b,#5b1515); border-left: 1px solid rgba(0,0,0,0.15); }

/* Door knobs */
.door .panel .knob { position: absolute; width: 10px; height: 10px; background: #e6c07b; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); top: 50%; transform: translateY(-50%); }
.door .panel.left .knob { right: 18px; }
.door .panel.right .knob { left: 18px; }

/* Open animation: panels swing away from center */
.door.open:hover .panel.left { transform: rotateY(-100deg); }
.door.open:hover .panel.right { transform: rotateY(100deg); }

/* Locked doors keep panels closed */
.door.locked .panel { transform: rotateY(0); }

/* Badge (day number) - sits above panels so always visible */
.door .badge { position: absolute; z-index: 20; left: 50%; top: 18px; transform: translateX(-50%); background: linear-gradient(180deg,#ffd973,#f0b429); color:#3a2b00; padding:8px 12px; border-radius: 999px; font-weight:900; box-shadow: 0 6px 18px rgba(0,0,0,0.35); font-size:16px; }

/* prevent badge text wrapping */
.door .badge { white-space: nowrap; }

/* Countdown styling */
.countdown { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
.door .name { margin-top: 8px; font-size: 16px; font-weight:700; opacity: 0.98; color: #fff; }

/* Lucky person styling for open doors: gold gradient, decorative font, subtle lift on hover */
.door.open .name {
	font-family: 'Great Vibes', Georgia, 'Times New Roman', serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.6px;
	/* gold gradient text */
	background: linear-gradient(90deg, #ffd700 0%, #ffb347 50%, #ff8c00 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 2px 6px rgba(0,0,0,0.55);
	transition: transform 220ms ease, text-shadow 220ms ease;
}
.door.open:hover .name { transform: translateY(-4px) scale(1.04); text-shadow: 0 8px 18px rgba(0,0,0,0.6); }

/* bottom badge for countdown */
.badge-bottom { position: absolute; z-index: 20; left: 50%; bottom: 12px; transform: translateX(-50%); background: linear-gradient(180deg,#4a8c2b,#2f6b1c); color:#fff; padding:6px 10px; border-radius: 999px; font-weight:800; box-shadow: 0 6px 18px rgba(0,0,0,0.45); font-size:14px; white-space:nowrap; }

/* urgent pulsing when < 60s */
.badge-bottom.urgent { animation: pulseBadge 1s infinite; }
@keyframes pulseBadge { 0% { transform: translateX(-50%) scale(1); box-shadow: 0 6px 18px rgba(255,80,80,0.15); } 50% { transform: translateX(-50%) scale(1.06); box-shadow: 0 12px 28px rgba(255,80,80,0.25); } 100% { transform: translateX(-50%) scale(1); box-shadow: 0 6px 18px rgba(255,80,80,0.15); } }

/* Wood texture for panels */
.door .panel.left, .door .panel.right {
	background: linear-gradient(180deg,#7a371f,#5b200f 60%);
	background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 6px), repeating-linear-gradient( 45deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px, transparent 2px, transparent 8px ), linear-gradient(180deg,#6f2e16,#3f1a0b);
	background-blend-mode: overlay, multiply, normal;
}

/* when panels open, slightly dim the badge so interior is visible */
.door.open:hover .badge { transform: translateX(-50%) translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,0.45); }

/* subtle holly corner */
.door::after { content: ""; position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; background: radial-gradient(circle at 35% 35%, #ffd700 0%, rgba(255,215,0,0.0) 40%); border-radius: 50%; opacity: 0.08; }

/* Lights strand */
.lights { display:flex; justify-content:center; gap:10px; padding-bottom:10px; }
.bulb { width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow: 0 2px 6px rgba(0,0,0,0.45); transform-origin:center; animation: blink 2.5s infinite; }
.bulb.red { background: #e63946; }
.bulb.green { background: #2a9d8f; animation-delay: 0.2s; }
.bulb.yellow { background: #ffd166; animation-delay: 0.5s; }
.bulb.blue { background: #457b9d; animation-delay: 0.9s; }
@keyframes blink { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* Snow */
#snow { pointer-events: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; overflow: hidden; }
.snowflake { position: absolute; top: -10%; color: #fff; user-select: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)); }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
@keyframes drift { 0% { transform: translateX(0) } 50% { transform: translateX(20px) } 100% { transform: translateX(0) } }

/* admin page fallback / tweaks */
/* admin theme (dark, accessible) */
.admin-theme { background: var(--bg); color: var(--text-primary); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* layout tokens for admin theme */
.admin-theme { --radius: 14px; --card-padding: 22px; --gap: 14px; --control-height: 44px; }

.admin-theme .site-header { display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding:20px; max-width:1100px; margin:0 auto; }
.admin-theme .brand { font-size:20px; font-weight:700; color:var(--text-primary); }

.admin-theme .card { box-sizing: border-box; color: var(--text-primary); background: linear-gradient(180deg,var(--surface),var(--surface-2)); border: 1px solid var(--border); box-shadow: 0 10px 40px var(--shadow); border-radius: var(--radius); padding: var(--card-padding); margin:20px auto; max-width:1000px; }

.admin-theme .row { display:flex; gap:var(--gap); align-items:center; margin-bottom:var(--gap); }
.admin-theme label { min-width:120px; color:var(--text-secondary); font-weight:600; }

.admin-theme input, .admin-theme select, .admin-theme textarea { color: var(--text-primary); background: var(--input-bg); border: 1px solid var(--input-border); height: var(--control-height); padding: 8px 12px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
.admin-theme input::placeholder, .admin-theme textarea::placeholder { color: var(--placeholder); }

.admin-theme button { background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 999px; border: none; font-weight:700; cursor:pointer; height: var(--control-height); display:inline-flex; align-items:center; justify-content:center; }
.admin-theme button.small { padding: 8px 12px; height: 36px; border-radius: 8px; }
.admin-theme button.logout { background: var(--danger); }
.admin-theme button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }

/* demo hint icon next to disabled buttons */
.demo-hint { margin-left: 8px; color: #ffd973; cursor: help; font-weight:700; }

/* demo pill on admin-login page */
.demo-pill {
	background: linear-gradient(180deg,#ffd973,#ffb800);
	color: #2b2b2b;
	font-weight: 900;
	padding: 8px 14px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.demo-pill:hover { transform: translateY(-2px); }

/* demo tooltip styling */
#demo-tooltip {
	max-width: 220px;
	padding: 8px 12px;
	background: rgba(20,20,20,0.95);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 26px rgba(0,0,0,0.5);
	font-size: 13px;
	font-weight: 700;
	transition: opacity 200ms ease;
	opacity: 0;
}

#demo-tooltip { pointer-events: auto; }

/* make disabled buttons visually inactive but still show hover */
button[disabled] { opacity: 0.6; cursor: not-allowed; }

.admin-theme .muted { color: var(--muted); }
.admin-theme a { color: var(--link); }

.admin-theme table { width:100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; }
.admin-theme table th { color: var(--text-secondary); text-align:left; padding:12px; background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); }
.admin-theme table td { color: var(--text-primary); padding:12px; border-bottom: 1px solid rgba(255,255,255,0.02); }
.admin-theme table tr:hover td { background: rgba(255,255,255,0.01); }

.admin-theme :focus { outline: 3px solid var(--focus); outline-offset: 3px; }

/* responsive adjustments */
@media (max-width: 720px) {
	.admin-theme .row { flex-direction: column; align-items: stretch; }
	.admin-theme label { min-width: unset; }
	.admin-theme .site-header { padding: 16px; }
}

/* Mobile: tighten layout for iPhone portrait and similar narrow viewports */
@media (max-width: 420px) {
	.grid {
 		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* keep min width so doors wrap to next line */
 		gap: 12px;
 		padding: 8px;
 		margin: 16px auto;
 		max-width: 720px;
 	}
	.masthead h1 { font-size: 28px; }
	.masthead .script { font-size: 34px; }
	.door {
		height: 150px;
		border-radius: 10px;
		padding: 8px;
	}
	.door .badge { top: 12px; font-size: 14px; padding: 6px 10px; }
	.door .day { font-size: 18px; }
	.door .name { font-size: 14px; }
	.door .panel .knob { width: 8px; height: 8px; }
}

/* admin control inputs contrast */
body.admin input, body.admin select, body.admin button { color: #222; background: #fff; border: 1px solid rgba(0,0,0,0.08); }
body.admin input::placeholder { color: #666; }
body.admin .small { background: #f1f1f1; border: 1px solid rgba(0,0,0,0.06); }

/* Test-time banner */
.test-banner { max-width: 1100px; margin: 12px auto; padding: 10px 14px; background: linear-gradient(90deg,#ffd54f,#ffb300); color:#2b2b2b; border-radius:8px; font-weight:700; text-align:center; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* Locked doors show slightly different inner style */
.door.locked::before { background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.22)); }

/* Locked doors show a hover tooltip using the data-lockedtext attribute. */
.door.locked::after {
	/* removed: floating tooltip will be handled by JS */
	content: '';
}

/* Floating tooltip (JS-driven) */
#locked-tooltip {
	background: rgba(0,0,0,0.78);
	color: #fff;
	padding: 8px 12px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	box-shadow: 0 10px 26px rgba(0,0,0,0.48);
	pointer-events: none;
	transition: opacity 180ms ease, transform 120ms ease;
	opacity: 0;
	display: none;
	z-index: 99999;
}

/* Remove confetti; instead add sparkle to lucky person name */
.door.open .name {
	font-size: 24px; /* increase size */
}
.door.open .name::after {
	content: ' ✨';
	display: inline-block;
	margin-left: 6px;
	opacity: 0.9;
	transform-origin: center;
	animation: sparkle 1.8s infinite ease-in-out;
}
@keyframes sparkle {
	0% { transform: translateY(0) scale(0.9) rotate(-8deg); opacity: 0.28; }
	40% { transform: translateY(-4px) scale(1.05) rotate(6deg); opacity: 1; }
	70% { transform: translateY(-2px) scale(1.02) rotate(-4deg); opacity: 0.8; }
	100% { transform: translateY(0) scale(0.98) rotate(0deg); opacity: 0.9; }
}

/* Confetti pieces styling */
.confetti-piece {
	will-change: transform, opacity;
	pointer-events: none;
	border-radius: 2px;
}

/* Preloader overlay */
#preloader {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(4,18,41,0.95), rgba(4,18,41,0.92));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1200;
	transition: opacity 700ms ease, visibility 700ms ease;
	opacity: 1;
	visibility: visible;
}
#preloader.preloader--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#preloader .preloader-inner { text-align: center; color: #fff; display:flex; flex-direction:column; align-items:center; gap:12px; }
#preloader .preloader-text { font-weight:700; font-size:18px; letter-spacing:0.6px; color: #f7fbff; opacity:0.95; }
#preloader .tree { width: 84px; height: 120px; position: relative; display: block; margin: 0 auto; transform-origin: bottom center; animation: tree-sway 3000ms ease-in-out infinite; }

/* layers are triangular using borders */
#preloader .layer { width: 0; margin: 0 auto; border-left: 44px solid transparent; border-right: 44px solid transparent; border-bottom: 34px solid #0f8b3a; position: relative; }
#preloader .layer-1 { border-bottom-color: #0f8b3a; margin-top: 6px; transform: translateY(6px); }
#preloader .layer-2 { border-bottom-color: #0b6f2d; margin-top: -6px; transform: translateY(2px) scale(0.92); }
#preloader .layer-3 { border-bottom-color: #085622; margin-top: -8px; transform: translateY(-2px) scale(0.84); }

#preloader .star { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #ffd973; filter: drop-shadow(0 4px 10px rgba(255,200,80,0.08)); animation: star-twinkle 1600ms linear infinite; }

/* trunk */
#preloader .trunk { width: 20px; height: 16px; background: linear-gradient(180deg,#7a3f22,#5a2b18); border-radius: 3px; margin: 6px auto 0; box-shadow: 0 6px 14px rgba(0,0,0,0.35); }

/* ornaments */
#preloader .orn { position: absolute; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
#preloader .o1 { left: 36%; top: 34%; background: #ff6b6b; animation: twinkle 2000ms infinite ease-in-out; }
#preloader .o2 { left: 58%; top: 42%; background: #ffd166; animation: twinkle 1800ms 200ms infinite ease-in-out; }
#preloader .o3 { left: 45%; top: 50%; background: #4d96ff; animation: twinkle 2200ms 100ms infinite ease-in-out; }
#preloader .o4 { left: 30%; top: 56%; background: #6bff9a; animation: twinkle 1900ms 300ms infinite ease-in-out; }

@keyframes twinkle { 0% { transform: scale(0.9); opacity: 0.6; } 50% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } }

@keyframes star-twinkle { 0% { transform: translateX(-50%) scale(1); opacity: 0.9 } 50% { transform: translateX(-50%) scale(1.12); opacity: 1 } 100% { transform: translateX(-50%) scale(1); opacity: 0.9 } }

@keyframes tree-sway { 0% { transform: rotate(-1.8deg) } 50% { transform: rotate(1.8deg) } 100% { transform: rotate(-1.8deg) } }

/* style the 'magic' word to feel warm and festive */
#preloader .preloader-magic { font-family: 'Great Vibes', cursive; font-size: 24px; color: #ffd973; margin-left: 8px; text-shadow: 0 4px 18px rgba(255,181,28,0.14); }

/* legacy admin light rules (kept for fallback) */
body.admin { background: #eef3f7; }
.panel { box-sizing: border-box; }