/*ground #2A1214 - surface #34171A - cream #F5EBDD - wine #8E2A35 - forest #2E4A3B - gold #D9A84E*/
:root{
	--ground:#2A1214;
	--surface:#34171A;
	--line:#4A2226;
	--pill:#3A1A1D;
	--cream:#F5EBDD;
	--blush:#E7CFC0;
	--muted:#CDB8A8;
	--brown:#6B4B44;
	--wine:#8E2A35;
	--forest:#2E4A3B;
	--gold:#D9A84E;
	--plum:#5A2A2F;
	--doorEdge:rgba(245,235,221,.08);
	--goldRing:rgba(217,168,78,.25);
	--goldGlow:rgba(217,168,78,.45);
	--backdrop:rgba(20,8,9,.78);
	--shadow:rgba(0,0,0,.4);
	--shadowDeep:rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--ground);color:var(--cream);font-family:'Karla',system-ui,sans-serif;}
body{min-height:100vh;overflow-x:hidden;}
button{font:inherit;}
[hidden]{display:none!important;}
.gold{color:var(--gold);}
.wine{color:var(--wine);}
svg.filled{fill:currentColor;}
/*SNOW*/
.snow{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.flake{
	position:absolute;
	border-radius:50%;
	background:var(--cream);
	animation-name:fall,sway;
	animation-timing-function:linear,ease-in-out;
	animation-iteration-count:infinite,infinite;
}
@keyframes fall{from{top:-3%;}to{top:103%;}}
@keyframes sway{0%,100%{transform:translateX(0);}50%{transform:translateX(18px);}}
/*LAYOUT*/
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:72px 24px 64px;display:flex;flex-direction:column;gap:48px;}
/*HEADER*/
header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
h1{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(48px,8vw,88px);line-height:1;letter-spacing:-.02em;}
h1 em{color:var(--gold);}
.sub{margin:0;font-family:'Caveat',cursive;font-size:34px;line-height:1.1;color:var(--blush);}
.meta{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--pill);border:1px solid var(--plum);font-size:15px;font-weight:600;}
.count{font-size:15px;color:var(--muted);}
/*GRID*/
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding:24px;border-radius:28px;background:var(--surface);border:1px solid var(--line);}
.door{
	position:relative;
	min-width:0;
	aspect-ratio:1/1.08;
	min-height:120px;
	padding:14px;
	border-radius:18px;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-start;
	text-align:left;
	border:1px solid var(--doorEdge);
	transition:transform .18s ease,box-shadow .18s ease;
	-webkit-tap-highlight-color:transparent;
}
.tone0{background:var(--wine);color:var(--cream);}
.tone1{background:var(--forest);color:var(--cream);}
.tone2{background:var(--gold);color:var(--ground);}
.tone3{background:var(--plum);color:var(--cream);}
@media (hover:hover){.door:hover{transform:translateY(-3px);}}
.door:active{transform:scale(.97);}
.door:focus-visible,.btn:focus-visible{outline:3px solid var(--cream);outline-offset:3px;}
.num{font-family:'Fraunces',Georgia,serif;font-size:44px;font-weight:600;line-height:1;}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;}
.door .tagOpened{display:none;}
.door.today{border:2px solid var(--gold);box-shadow:0 0 0 4px var(--goldRing),0 0 36px var(--goldGlow);}
.door.today .tag{padding:5px 10px;border-radius:999px;background:var(--ground);color:var(--cream);font-weight:700;}
.door.opened{background:var(--cream);color:var(--wine);border:2px dashed var(--gold);}
.door.opened .tagToday{display:none;}
.door.opened .tagOpened{display:inline-flex;font-weight:700;}
/*FOOTER*/
footer{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
footer .note{margin:0;font-family:'Caveat',cursive;font-size:30px;color:var(--blush);}
footer .by{margin:0;font-size:14px;letter-spacing:.08em;color:var(--muted);}
/*TOAST*/
.toast{
	position:fixed;
	left:50%;
	bottom:32px;
	transform:translateX(-50%);
	max-width:calc(100% - 48px);
	padding:14px 22px;
	border-radius:999px;
	background:var(--cream);
	color:var(--ground);
	font-size:16px;
	font-weight:600;
	box-shadow:0 12px 40px var(--shadow);
	display:flex;
	align-items:center;
	gap:10px;
	z-index:20;
	opacity:0;
	pointer-events:none;
	transition:opacity .2s;
}
.toast.show{opacity:1;}
/*DIALOG*/
.overlay{position:fixed;inset:0;background:var(--backdrop);display:none;align-items:center;justify-content:center;padding:24px;z-index:10;}
.overlay.show{display:flex;}
.card{
	position:relative;
	width:100%;
	max-width:520px;
	max-height:calc(100% - 16px);
	overflow:auto;
	padding:44px 40px 36px;
	border-radius:24px;
	background:var(--cream);
	color:var(--ground);
	box-shadow:0 30px 80px var(--shadowDeep);
	display:flex;
	flex-direction:column;
	gap:18px;
	animation:pop .32s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
.x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:none;background:transparent;color:var(--wine);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dayrow{display:flex;align-items:baseline;gap:14px;}
.big{font-family:'Fraunces',Georgia,serif;font-size:88px;font-weight:600;line-height:.9;color:var(--wine);}
.month{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);}
.card h2{margin:0;font-family:'Fraunces',Georgia,serif;font-size:34px;font-weight:400;font-style:italic;line-height:1.15;}
.card .msg{margin:0;font-family:'Caveat',cursive;font-size:28px;line-height:1.25;color:var(--line);}
.gift{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:16px;background:var(--forest);color:var(--cream);}
.gift svg{flex:none;margin-top:2px;}
.gift .lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.gift .txt{font-size:17px;line-height:1.45;}
.close{align-self:center;min-height:48px;padding:0 28px;border-radius:999px;border:none;background:var(--wine);color:var(--cream);font-size:16px;font-weight:700;cursor:pointer;}
/*LOCK*/
.lock{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;}
.lockCard{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.lockCard h1{font-size:clamp(40px,10vw,64px);}
.lockCard label{font-size:15px;color:var(--muted);}
.lockCard input{width:100%;min-height:52px;padding:0 18px;border-radius:999px;border:1px solid var(--plum);background:var(--pill);color:var(--cream);font:inherit;font-size:17px;text-align:center;}
.lockCard input:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.error{margin:0;color:var(--blush);font-weight:600;}
/*TABLET*/
@media (max-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
/*MOBILE*/
@media (max-width:600px){
	.wrap{padding:44px 16px calc(40px + env(safe-area-inset-bottom));gap:28px;}
	.sub{font-size:27px;}
	.grid{gap:10px;padding:12px;border-radius:20px;}
	.door{min-height:0;aspect-ratio:1/1.12;padding:10px;border-radius:14px;}
	.num{font-size:30px;}
	.tagText{display:none;}
	.overlay{align-items:flex-end;padding:0;}
	.card{border-radius:24px 24px 0 0;padding:36px 24px calc(28px + env(safe-area-inset-bottom));max-height:88vh;}
	.big{font-size:64px;}
	.toast{bottom:20px;border-radius:16px;font-size:15px;}
}
/*REDUCED MOTION*/
@media (prefers-reduced-motion:reduce){.flake{display:none;}.card{animation:none;}.door{transition:none;}}