.reveillon-panel { margin:14px clamp(14px,3.8vw,55px); padding:18px 22px; border:1px solid #c7ac74; background:linear-gradient(125deg,#182b3b,#101d30); border-radius:6px; }
.reveillon-panel h2 { font:clamp(32px,4.5vw,66px)/1.04 Georgia,serif; color:#ffe6ad; margin:8px 0 14px; letter-spacing:-.025em; }
.reveillon-panel p { color:var(--soft); font-size:14px; max-width:780px; margin:8px 0; }
.reveillon-panel .reveillon-kicker { letter-spacing:.18em; font-size:10px; color:#f4d79a; }
.reveillon-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.reveillon-controls button,.reveillon-controls label { min-height:44px; padding:10px 14px; border:1px solid #8f9bab; background:#10203a; color:var(--ink); border-radius:4px; font-size:13px; }
.reveillon-controls label { display:flex; align-items:center; gap:8px; }
.reveillon-controls input { width:18px; height:18px; accent-color:#ffe0a0; }
.reveillon-controls .reveillon-primary { background:#f4d79a; color:#14243b; font-weight:750; }
.reveillon-panel [hidden],.reveillon-panel[hidden] { display:none; }
.reveillon-teaser { margin:14px 0; }
.reveillon-teaser summary { min-height:44px; padding:10px 0; cursor:pointer; color:var(--gold); font-size:13px; }
:is(#reveillon-canvas,#christmas-canvas) { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
:is(.reveillon-playing,.christmas-playing) #scene-frame { box-shadow:0 0 70px #d7a65c33; }
:is(.reveillon-playing,.christmas-playing) .reveillon-panel h2 { animation:reveillon-title 1.3s ease-out both; }
@keyframes reveillon-title { from { opacity:0; transform:translateY(12px); } to {opacity:1;transform:none;} }
:is(.reveillon-day,.christmas-day) .hero { padding-top:22px; padding-bottom:14px; }
:is(.reveillon-day,.christmas-day) .hero h1 { font-size:clamp(30px,4vw,48px); }
:is(.reveillon-day,.christmas-day) .hero .eyebrow,:is(.reveillon-day,.christmas-day) .hero::before { display:none; }
@media(max-width:680px){.reveillon-panel{margin:12px 9px;padding:14px}.reveillon-panel h2{font-size:35px}.reveillon-panel p{font-size:13px}.reveillon-controls{gap:8px}.reveillon-controls button{flex:1 1 120px}:is(.reveillon-day,.christmas-day) .hero{padding-top:12px}:is(.reveillon-day,.christmas-day) .hero h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){:is(.reveillon-playing,.christmas-playing) .reveillon-panel h2{animation:none}}

.reveillon-panel h2 span { white-space:nowrap; }
:is(#reveillon-settings,#christmas-settings) { margin-top:8px; }
:is(#reveillon-settings,#christmas-settings) summary { min-height:44px; padding:10px 0; color:var(--soft); font-size:13px; cursor:pointer; }
:is(.reveillon-day,.christmas-day) .hero-copy { display:none; }
:is(.reveillon-day,.christmas-day) .hero { display:block; padding:0 clamp(18px,4vw,55px) 4px; }
:is(.reveillon-day,.christmas-day) .progress-panel { display:flex; align-items:center; gap:14px; max-width:none; padding:8px 0; border:0; border-bottom:1px solid var(--line); background:none; }
:is(.reveillon-day,.christmas-day) .progress-track,:is(.reveillon-day,.christmas-day) .progress-stars { display:none; }
:is(.reveillon-day,.christmas-day) .progress-line { margin:0; }
:is(.reveillon-day,.christmas-day) .progress-line strong { font-size:28px; }
:is(.reveillon-day,.christmas-day) .progress-caption { min-height:0; }
:is(.reveillon-day,.christmas-day) .scene-finale { display:none; }
@media(max-width:680px){.reveillon-panel h2{font-size:31px; text-wrap:balance}.reveillon-panel{padding:12px}.reveillon-panel p{font-size:12px}.reveillon-controls button{padding:8px 10px}:is(.reveillon-day,.christmas-day) .progress-panel{padding:4px 0}.reveillon-controls{margin-top:8px}}

.reveillon-preparing .countdown { border-color:#d8b779; }
.reveillon-preparing #countdown-values b { font-size:32px; color:#ffe6ad; }