/* The whole page lives inside the Christmas room; controls remain legible. */
:root{--cream:#fff0d3;--green:#684a32;--gold:#ffd398;color-scheme:dark}
html{background:#725139}
body{background:#725139;color:#fff0d3;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url('/christmas-living-room.png') center center/cover no-repeat;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#25140750,transparent 35%,#20110832);pointer-events:none}
header,main{max-width:1440px;padding-left:32px;padding-right:32px}
header{padding-top:23px;padding-bottom:18px;border:0;text-shadow:0 2px 10px #000;align-items:center}
.brand{font-size:23px;letter-spacing:1px}.brand span{font-size:12px;letter-spacing:4px}.tag{color:#ffe7bd;font-size:9px}
.lights{display:none}
main{padding-top:0}
.hero{position:relative;display:grid;grid-template-columns:1fr 350px;align-items:end;gap:32px;min-height:650px;min-height:clamp(520px,76vh,830px);padding:24px 0 28px}
.room-view{display:none}
.intro{max-width:350px;padding:17px 21px;background:#382619c9;border:1px solid #efc0814f;border-radius:12px;box-shadow:0 8px 30px #180b1340;backdrop-filter:blur(5px)}
.intro .eyebrow{font-size:8px;letter-spacing:1.2px;color:#f4d09e}
h1{font-size:32px;line-height:1.14;letter-spacing:-1.2px;margin:10px 0}
.intro p{font-size:12px;line-height:1.65;color:#efdeca;margin:9px 0 0}
.radio{width:350px;padding:15px 18px;border-radius:10px;box-shadow:0 12px 40px #190e08aa}
.radio:before{display:none}.radio-top{font-size:7px;margin-bottom:9px;gap:8px}
.screen{min-height:92px;padding:11px 12px;border-width:4px;border-radius:7px}
.screen-label{font-size:7px;letter-spacing:1.4px}.screen h2{font-size:20px;line-height:1.15;margin:9px 0 5px}.screen p{font-size:12px}
.tape-machine{padding:8px;margin:10px 0;border-radius:5px}.deck-heading{font-size:7px;padding-bottom:5px}
.reel-bed{width:178px;margin:auto;gap:8%;padding:5px 0 22px}.spool{filter:drop-shadow(0 3px 2px #0006)}.tape-path{height:34px}
.head-block{padding:5px 8px;margin:0 40px 0;border-width:1px;font-size:6px}
.head-block output{font:12px monospace;letter-spacing:2px;color:#f9d992;background:#192219;padding:2px 6px;border-radius:2px}
.engineering{padding-top:8px;gap:5px}.dial{width:20px;height:20px;border-width:2px}.dial:after{left:7px;height:5px;width:2px}.engineering small{font-size:6px;margin-top:3px;letter-spacing:.6px}.toggle{width:8px;height:18px}.speed-plate{font-size:8px;padding:4px}.speed-plate small{font-size:5px}
.radio .controls button{min-height:43px;font-size:11px;padding:9px 8px;border-bottom-width:3px}
.deck-extras{margin-top:10px;gap:7px}.deck-extras input{height:20px}.deck-extras button{font-size:7px;padding:7px}.deck-extras label{font-size:7px}
#message{font-size:10px;min-height:15px;margin-top:9px}
.lower{display:grid;grid-template-columns:.8fr 1.5fr;gap:20px;border:0;align-items:start;margin-top:0}
.lower>div{padding:25px 28px;background:#3d2a1de8;border:1px solid #edc38e5e;border-radius:12px;box-shadow:0 12px 36px #1d11064f;backdrop-filter:blur(9px)}
.lower>div+div{border-left:1px solid #edc38e5e}.lower h2{font-size:24px;margin:14px 0}.lower p{color:#eddbc4}.eyebrow{color:#ffdbac}.lower .lava-card{display:none}
.wish-search input{background:#261a12e6;border-color:#ab8961;color:#fff2dc}.wish-search input::placeholder{color:#bda890}
.request .wish-help{color:#d5bea3}#wish-results{scrollbar-color:#bc9263 #38271a}#wish-results li{border-bottom-color:#ebc59329}#wish-results span{color:#e1cbb1}#wish-results small{color:#edbc8c}#wish-results button:disabled{background:#4b3929;border-color:#86705a;color:#c6b29a}
#wish-state{color:#e8cba7}#wish-receipt{background:#523d25;color:#ffe3ad}#wish-receipt.confirmed{background:#2b503b;color:#edffd7}
footer{padding:20px 18px;margin-top:24px;color:#f2dbc1;text-shadow:0 1px 4px #000;background:#342316bd;border-radius:8px;font-size:10px}
footer button{background:#5137249c;border-color:#d5b58f80;color:#ffead2}
.evening::after{background:#25140740}
@media(min-width:1600px){.hero{grid-template-columns:1fr 370px}.radio{width:370px}.reel-bed{width:190px}}
@media(max-width:760px){
 header,main{padding-left:16px;padding-right:16px}header{padding-top:20px;padding-bottom:16px}.brand{font-size:20px}
 body::before{background-position:40% center;background-size:auto 100lvh}
 .hero{display:flex;flex-direction:column;align-items:center;gap:16px;min-height:0;padding:0 0 20px}
 .room-view{display:block;order:0;width:100%;aspect-ratio:16/9;background:url('/christmas-living-room.png') center/cover no-repeat;border:1px solid #f4d1a044;border-radius:10px;box-shadow:0 5px 20px #0004}
 .intro{order:2;width:100%;max-width:440px;padding:12px 17px}.intro .eyebrow{font-size:7px}h1{font-size:25px;margin:6px 0}.intro h1 br{display:none}.intro p{font-size:11px;margin-top:5px}.intro p br{display:none}
 .radio{order:1;width:100%;max-width:370px;padding:13px 16px}.screen h2{font-size:20px}.screen{min-height:90px;padding:10px 12px}
 .head-block{margin-left:40px;margin-right:40px}.counter output{font-size:12px}
 .lower{grid-template-columns:1fr;gap:15px}.lower>div{padding:20px}.lower>div+div{border-top:1px solid #edc38e5e}.lower h2{font-size:22px}.lower .next{padding:17px 20px}.next h2{font-size:18px;margin:9px 0}.next p{margin-bottom:0}
 footer{font-size:9px;gap:10px;margin-top:18px}.wish-search input{font-size:16px}
}
@media(max-width:380px){.radio{padding:12px}.radio-top{font-size:6px}.deck-heading{font-size:6px}.head-block{margin-left:30px;margin-right:30px}.intro h1{font-size:23px}.lower>div{padding:17px}}

/* Compact live transport and a restrained fireplace glow aligned to the room image. */
.radio .controls{margin-top:12px}.christmas-clock{border-top:1px solid #edc38e55;margin-top:15px;padding-top:12px}
.christmas-clock span{display:block;font-size:11px;color:#e6c8a1}.christmas-clock strong{display:block;margin-top:6px;font-size:18px;font-variant-numeric:tabular-nums}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.charts article{padding:25px 28px;background:#3d2a1de8;border:1px solid #edc38e5e;border-radius:12px;backdrop-filter:blur(9px)}
.charts h2{font-size:24px;margin:14px 0}.charts ol{padding-left:22px;margin:0}.charts li{padding:10px 0;border-bottom:1px solid #edc38e24;font-size:13px;line-height:1.6}.charts li b{float:right;margin-left:10px;color:#ffd398;white-space:nowrap}
.ambient-room{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}.room-scene{position:absolute;left:50%;top:50%;width:max(100vw,177.683vh);height:max(100vh,56.28vw);transform:translate(-50%,-50%)}
.fire-glow{position:absolute;left:13.5%;top:49%;width:19%;height:23%;background:radial-gradient(ellipse at 44% 65%,#ffd47270,#ff6d1438 42%,transparent 72%);mix-blend-mode:screen;filter:blur(5px);transform-origin:50% 90%;animation:hearth 4.7s ease-in-out infinite alternate}
@keyframes hearth{0%{opacity:.25;transform:scale(.94,1)}37%{opacity:.6;transform:scale(1.02,1.05)}72%{opacity:.38;transform:scale(.97,1.02)}100%{opacity:.75;transform:scale(1.04,.98)}}
.still .fire-glow{animation-play-state:paused}.room-view{position:relative;overflow:hidden}
@media(max-width:760px){main{padding-top:16px}.charts{grid-template-columns:1fr;gap:15px}.charts article{padding:20px}.ambient-room{display:none}.christmas-clock strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.fire-glow{animation:none;opacity:.35}}

/* Matching glass cards, more room visible, and aligned chart counts. */
.hero{min-height:clamp(260px,40vh,430px);grid-template-columns:1fr 310px;gap:24px;padding:20px 0}
.intro{max-width:310px;padding:14px 18px}.intro h1{font-size:26px;margin:7px 0}.intro .eyebrow{font-size:7px}.christmas-clock{margin-top:10px;padding-top:9px}.christmas-clock strong{font-size:16px}
.radio{width:310px;padding:14px 16px;background:#3d2a1de8;color:#fff0d3;border:1px solid #edc38e5e;border-radius:12px;box-shadow:0 8px 28px #180b1340;backdrop-filter:blur(9px)}
.radio-top{color:#edc38e;font-size:8px;margin-bottom:7px}.radio .status{color:#f4cd91}.screen{background:transparent;border:0;box-shadow:none;min-height:0;padding:0}.screen-label{font-size:7px;color:#d5bea3}.screen h2{font-size:20px;margin:7px 0 4px;color:#fff0d3}.screen p{font-size:12px;color:#eddbc4;margin:0}
.radio .controls{gap:8px;margin-top:10px}.radio .controls button{min-height:40px;padding:8px;font-size:11px;border:1px solid #edc38e66;border-radius:6px;box-shadow:none}.radio #play{background:#9e3c2d;color:#fff0d3}.radio #mute{background:#ffffff0a;color:#fff0d3}
.deck-extras{margin-top:8px}.deck-extras label{color:#d5bea3}.deck-extras button{background:#ffffff0a;color:#fff0d3;border-color:#edc38e55}.deck-extras input{accent-color:#e9b974}#message{color:#d5bea3;font-size:10px;margin:6px 0 0;min-height:0}.evening .screen{box-shadow:none}
.lower{gap:16px}.lower>div,.charts article{padding:18px 22px}.lower h2,.charts h2{font-size:21px;margin:10px 0}.lower p{font-size:14px;line-height:1.55}.lower .eyebrow,.charts .eyebrow{font-size:9px}.charts{gap:16px;margin-top:16px}
.charts ol{padding:0;list-style:none;counter-reset:chart}.charts li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:8px;counter-increment:chart;padding:9px 0;font-size:12px;line-height:1.5}.charts li::before{content:counter(chart) '.';color:#d5bea3}.charts li span{min-width:0;overflow-wrap:anywhere}.charts li b{float:none;margin:0;white-space:nowrap;font-size:12px}
#wish-results{max-height:220px}.request .wish-help{font-size:11px}.wish-search input,.wish-search button{padding:12px}.charts li:only-child:not(:has(span))::before{content:''}
@media(min-width:1600px){.hero{grid-template-columns:1fr 320px}.radio{width:320px}}
@media(max-width:760px){.room-view{display:none}.hero{min-height:0;display:flex;gap:12px;padding:0 0 12px}.radio{width:100%;max-width:440px;padding:13px 16px}.intro{width:100%;max-width:440px;padding:13px 16px}.intro h1{font-size:23px}.lower,.charts{gap:12px}.lower>div,.charts article{padding:16px 18px}.lower .next{padding:14px 18px}.lower h2,.charts h2{font-size:20px}.wish-search input{font-size:16px}.radio .controls button{min-height:44px}.charts li{font-size:12px}.ambient-room{display:none}}

/* Keep the Christmas room unobstructed: one right-hand control column. */
main{width:min(390px,calc(100% - 40px));max-width:none;margin:0 24px 0 auto;padding:20px 0 24px}
.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:12px;padding:0 0 12px}
.radio{order:1;width:100%;max-width:none}.intro{order:0;width:100%;max-width:none;padding:12px 16px}
.intro h1{font-size:21px}.intro p{margin-top:4px}.intro .christmas-clock{margin-top:8px;padding-top:8px}
.lower,.charts{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.lower>div,.charts article{min-width:0;padding:15px 17px}.lower .next{padding:12px 17px}
.next h2{font-size:17px;margin:5px 0}.next p{font-size:13px;margin:5px 0 0}
.charts{margin-top:12px}.lower h2,.charts h2{font-size:20px}
.wish-search{min-width:0}.wish-search input{min-width:0;width:100%}
footer{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding:14px}
@media(max-width:760px){main{width:calc(100% - 24px);max-width:440px;margin:0 auto;padding:12px 0 20px}.radio{max-width:none}.intro{max-width:none}.hero{align-items:stretch}.wish-search input{font-size:16px}}

/* Small flame tongues stay within the photographed firebox, not the mantel. */
.hearth-flames{position:absolute;left:14%;top:48.5%;width:17.5%;height:23%;overflow:hidden;mix-blend-mode:screen;opacity:.65;filter:blur(1px);pointer-events:none}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame-rise 3.6s ease-in-out infinite alternate}
.f1{animation-duration:3.1s;animation-delay:-1.2s}.f2{animation-duration:4.3s;animation-delay:-2.8s}.f3{animation-duration:2.9s;animation-delay:-.8s}.f4{animation-duration:4.9s;animation-delay:-3.5s}.f5{animation-duration:3.8s;animation-delay:-1.9s}
@keyframes flame-rise{0%{transform:scale(.85,.72) skewX(-5deg);opacity:.45}35%{transform:scale(.95,.9) skewX(3deg);opacity:.8}70%{transform:scale(.88,.8) skewX(-2deg);opacity:.6}100%{transform:scale(1,1.04) skewX(4deg);opacity:.9}}
.still .flame{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hearth-flames{display:none}.flame{animation:none}}
@media(max-width:760px){.ambient-room{display:block}.room-scene{width:177.683lvh;height:100lvh;left:40%;top:0;transform:translateX(-40%)}}