.christmas-page { background:#fff8e8; color:#173c32; }
.christmas-page .site-header { border-color:#dcdac6; min-height:85px; }
.christmas-page .brand { color:#173c32; }
.back-games { color:#305e4d; font-size:.8rem; min-height:48px; display:flex; align-items:center; }
.christmas-main { max-width:780px; margin:auto; padding:35px 0 0; }
.christmas-heading { text-align:center; }
.workshop-tag { color:#7c4d14; font-size:.66rem; text-transform:uppercase; letter-spacing:.13em; font-weight:750; margin-bottom:12px; }
.christmas-heading h1 { font-family:Georgia,serif; font-size:clamp(2rem,5vw,3.25rem); letter-spacing:-.045em; margin-bottom:10px; }
.christmas-heading h1 em { color:#b32626; font-weight:normal; }
.christmas-heading>p:last-child { color:#486354; font-size:.93rem; margin-bottom:28px; }
.name-machine { position:relative; isolation:isolate; margin:0 auto; max-width:680px; padding:30px 34px 0; border:7px solid #e8b84a; border-radius:65px 65px 32px 32px; background:#b62629; box-shadow:inset 0 5px 0 #e5796a,inset 0 -9px 0 #8c1e24,0 9px 0 #ba8529,0 22px 0 -5px #173c32,0 35px 45px -25px #173c3266; }
.name-machine::before,.name-machine::after { content:'✦'; position:absolute; color:#e8b84a; top:95px; font-size:45px; left:-65px; }
.name-machine::after { left:auto; right:-65px; top:200px; font-size:26px; animation:workshop-spark 4s ease-in-out infinite; }
.machine-lights { display:flex; justify-content:space-around; position:absolute; top:-12px; left:10%; right:10%; height:24px; border-top:2px solid #173c32; border-radius:50%; }
.machine-lights i { display:block; width:13px; height:20px; border-radius:4px 4px 50% 50%; background:#fff4c5; border-top:5px solid #173c32; box-shadow:0 0 10px #fff4b8; animation:bulb-glow 3s ease-in-out infinite alternate; }
.machine-lights i:nth-child(3n) { background:#8fe1b8; animation-delay:-1s; }
.machine-lights i:nth-child(3n + 1) { background:#ffaca0; animation-delay:-2s; }
.machine-plaque { width:fit-content; max-width:100%; margin:0 auto 22px; padding:8px 23px; border:1px solid #e8b84a; border-radius:10px; background:#173c32; color:#f6d983; text-align:center; letter-spacing:.14em; font-size:.72rem; font-weight:800; box-shadow:0 3px 0 #7d2021; }
.machine-plaque small { font-size:.5rem; color:#fff8e8; letter-spacing:.17em; margin-top:2px; }
.machine-inputs { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:25px; }
.machine-inputs>div { min-width:0; }
.machine-inputs label { color:#fff8e8; font-size:.78rem; margin-bottom:7px; }
.machine-inputs small { color:#ffdfce; font-weight:400; font-size:.67rem; }
.machine-inputs select { border:2px solid #f0c873; border-radius:9px; background:#fff8e8; color:#173c32; font-weight:650; font-size:.9rem; min-height:54px; }
.christmas-page :where(button,select,a):focus-visible { outline:3px solid #1774b8; outline-offset:4px; box-shadow:0 0 0 5px #fff; }
.machine-inputs select:disabled { opacity:.8; }
.reel-housing { display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); align-items:center; padding:15px; border:3px solid #e8b84a; border-radius:20px; background:#173c32; box-shadow:0 4px 0 #7f1f22; }
.reel { position:relative; height:100px; overflow:hidden; background:#fff8e8; color:#173c32; border:2px solid #946b2a; border-radius:10px; box-shadow:inset 0 10px 14px #173c3220; }
.reel::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(#9a8e712b,transparent 30%,transparent 70%,#9a8e712b); }
.reel-strip { will-change:transform; }
.reel-strip span { display:flex; justify-content:center; align-items:center; height:96px; font-family:Georgia,serif; font-weight:bold; font-size:clamp(1rem,3.4vw,1.7rem); padding:0 3px; white-space:nowrap; }
.reel-plus { color:#e8b84a; text-align:center; }
.lever { position:absolute; right:-30px; top:200px; width:24px; height:90px; background:#ad7b2b; border:3px solid #173c32; border-radius:0 12px 12px 0; transform-origin:0 80%; }
.lever::before { content:''; position:absolute; height:75px; width:8px; background:#e8b84a; border:2px solid #173c32; bottom:30px; right:0; border-radius:8px; }
.lever span { position:absolute; width:32px; height:32px; background:#173c32; border:3px solid #e8b84a; border-radius:50%; right:-12px; top:-35px; }
.machine-instruction { color:#fff0d2; text-align:center; font-size:.72rem; margin:18px 0 12px; }
.reveal-button { display:flex; width:100%; background:#f3cb67; color:#4a2d10; border:2px solid #ffdf8d; border-radius:14px; box-shadow:0 5px 0 #7a491e; font-size:.94rem; min-height:60px; }
.reveal-button:hover { background:#ffe39b; }
.reveal-button:disabled { background:#eed497; color:#655433; cursor:default; }
.machine-base { margin:25px -20px 0; padding:11px; text-align:center; color:#ffdeb3; letter-spacing:.17em; font-size:.54rem; border-top:1px solid #e8b84a70; }
.machine-base span { color:#f3cb67; margin:0 16px; }
.name-machine[data-state=spinning] .lever { animation:pull-lever .4s ease-in-out; }
.name-machine[data-state=spinning] .reveal-button { transform:translateY(3px); box-shadow:0 2px 0 #7a491e; }
.name-machine[data-state=spinning] { animation:machine-start .4s ease; }
.name-machine[data-state=revealed] { animation:machine-celebrate .6s ease; }
.reveal-stars { position:absolute; pointer-events:none; display:flex; justify-content:space-between; left:8%; right:8%; top:48%; color:#ffdf8d; font-size:2.7rem; opacity:0; }
.name-machine[data-state=revealed] .reveal-stars { animation:reveal-sparkles .7s ease-out; }
.christmas-result { text-align:center; padding:38px 0 0; }
.christmas-result[hidden] { display:none; }
.result-eyebrow { color:#7c4d14; font-size:.75rem; font-weight:700; margin-bottom:8px; }
.christmas-result h2 { color:#173c32; font-family:Georgia,serif; font-size:clamp(1.8rem,5vw,2.5rem); overflow-wrap:anywhere; margin-bottom:10px; animation:name-arrives .45s ease; }
.christmas-result>p { font-size:.85rem; }
.result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.result-actions button { background:#176b45; font-size:.8rem; }
.result-actions button:hover { background:#105335; }
.result-actions button.secondary { color:#173c32; background:transparent; border-color:#8a9c86; }
.result-actions button:disabled { opacity:.6; }
#save-status { margin:12px 0 0; min-height:1.5em; }
.christmas-footnote { text-align:center; color:#536b59; font-family:Georgia,serif; font-style:italic; font-size:.8rem; margin:38px 0 0; }
@keyframes bulb-glow { to { box-shadow:0 0 3px #fff4b8; } }
@keyframes workshop-spark { 50% { opacity:.35; transform:scale(.8) rotate(15deg); } }
@keyframes pull-lever { 50% { transform:rotate(30deg); } }
@keyframes machine-start { 30% { transform:translateY(2px); } 65% { transform:translateY(-1px); } }
@keyframes machine-celebrate { 50% { box-shadow:inset 0 0 30px #ffc95488,0 0 35px #e8b84a88; } }
@keyframes name-arrives { from { opacity:.3; transform:translateY(6px); } }
@keyframes reveal-sparkles { 35% { opacity:1; transform:translateY(-14px) scale(1.15); } to { opacity:0; transform:translateY(-30px) scale(.7); } }
@media(max-width:800px) { .name-machine::before,.name-machine::after { display:none; } }
@media(max-width:520px) {
  .christmas-page .page-shell { padding:0 16px; }
  .christmas-page .site-header { gap:10px; min-height:75px; }
  .christmas-page .brand { font-size:.85rem; gap:7px; }
  .back-games { font-size:.68rem; }
  .christmas-main { padding-top:26px; }
  .workshop-tag { font-size:.53rem; letter-spacing:.08em; }
  .christmas-heading h1 { max-width:300px; margin-left:auto; margin-right:auto; }
  .name-machine { border-width:5px; border-radius:38px 38px 25px 25px; padding:25px 14px 0; }
  .machine-plaque { padding:8px 12px; font-size:.58rem; }
  .machine-inputs { gap:10px; margin-bottom:20px; }
  .machine-inputs label { font-size:.65rem; }
  .machine-inputs small { font-size:.56rem; }
  .machine-inputs select { padding:8px; font-size:.78rem; }
  .reel-housing { padding:8px; grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr); border-radius:15px; }
  .reel { height:86px; }
  .reel-strip span { height:82px; font-size:clamp(.85rem,3.7vw,1.05rem); }
  .lever { display:none; }
  .reveal-button { font-size:.76rem; padding:12px 8px; gap:5px; }
  .machine-instruction { font-size:.61rem; }
  .machine-base { margin:22px -5px 0; font-size:.45rem; letter-spacing:.1em; }
  .machine-base span { margin:0 8px; }
  .christmas-footnote { font-size:.7rem; }
}
@media(prefers-reduced-motion:reduce) {
  .christmas-page *, .christmas-page *::before, .christmas-page *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}