:root{
  --background:#19182b;
  --accent:#f5ce69;
  --secondary:#b8cb91;
  --cream:#f7edd8;
  --muted:#b9b4c4;
  --panel:#262438;
  --ink:#242232;
  --line:#454052;
  color-scheme:dark;
  font-family:'Trebuchet MS',Verdana,sans-serif;
  background:var(--background);
  color:var(--cream);
  font-synthesis:none
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  min-width:320px;
  background:radial-gradient(ellipse at 76% 24%,#38303944,transparent 55%),var(--background)
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-tap-highlight-color:transparent
}
button:disabled{
  cursor:default
}
button:focus-visible{
  outline:3px solid #fff4bf;
  outline-offset:5px
}
button{
  transition:transform .15s,background .15s
}
button:not(:disabled):active{
  transform:translateY(2px)
}
img{
  max-width:100%;
  height:auto
}
h1,h2,p{
  margin:0
}
h1,h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400
}
h1{
  font-size:clamp(2.3rem,4vw,3.8rem);
  line-height:1.08;
  letter-spacing:-.04em
}
h2{
  font-size:2rem;
  line-height:1.2
}
p{
  line-height:1.65
}
button,fieldset{
  min-width:0
}
[hidden]{
  display:none!important
}
main:focus{
  outline:none
}
.site-header{
  max-width:1400px;
  margin:auto;
  min-height:116px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 5%
}
.brand{
  border:0;
  background:none;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  font-size:14px;
  line-height:1.35;
  letter-spacing:.02em;
  padding:0;
  min-height:48px
}
.brand b{
  font-size:15px;
  font-weight:600
}
.brand-star{
  font-size:44px;
  line-height:1;
  color:var(--accent);
  transform:rotate(10deg)
}
.header-actions{
  display:flex;
  align-items:center;
  gap:28px
}
.week-label{
  font-size:10px;
  letter-spacing:.2em;
  color:var(--muted)
}
.icon-button{
  border:1px solid var(--line);
  border-radius:25px;
  background:transparent;
  min-height:44px;
  padding:0 17px;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--accent);
  font-size:22px
}
.icon-button span{
  font-size:12px;
  color:var(--cream)
}
.site-footer{
  max-width:1400px;
  margin:auto;
  padding:26px 5%;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.02em;
  color:#a39caf
}
.site-footer span span{
  font-size:19px;
  color:var(--accent);
  margin-left:12px
}
.home-screen{
  max-width:1320px;
  margin:auto;
  min-height:655px;
  display:grid;
  grid-template-columns:1fr 1.08fr;
  align-items:center;
  padding:5px 5% 25px;
  gap:24px
}
.home-copy{
  position:relative;
  z-index:1;
  padding-bottom:10px
}
.eyebrow{
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--accent);
  line-height:1.7
}
.eyebrow>span{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:7px
}
.welcome{
  font-family:Georgia,serif;
  font-size:20px;
  color:#cec4d2;
  margin:34px 0 17px
}
.home-copy h1{
  font-size:clamp(62px,6.7vw,95px);
  position:relative;
  line-height:1;
  letter-spacing:-.065em;
  white-space:nowrap
}
.home-copy h1 em,.completion-copy h1 em{
  color:var(--accent);
  font-weight:400
}
.title-star{
  display:inline-block;
  font-size:55px;
  vertical-align:top;
  margin:10px 0 0 26px;
  font-weight:400;
  color:var(--accent)
}
.home-description{
  max-width:340px;
  margin:26px 0 28px;
  font-size:15px;
  color:#c7c1cf;
  line-height:1.85
}
.primary,.secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  min-height:52px;
  padding:14px 24px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  border:1px solid transparent;
  line-height:1.4;
  text-align:center
}
.primary{
  background:var(--accent);
  color:var(--ink);
  box-shadow:0 5px 0 #a4833c33
}
.primary:hover{
  background:#ffdc84
}
.primary>span{
  font-size:23px;
  line-height:1
}
.secondary{
  border-color:#595064;
  background:#302a41;
  color:var(--cream)
}
.secondary:hover{
  background:#41354f
}
.secondary:disabled{
  opacity:.4
}
.text-button,.back-button{
  min-height:44px;
  border:0;
  background:none;
  color:#d1c6da;
  font-size:13px;
  padding:10px 8px;
  text-decoration:underline;
  text-underline-offset:5px
}
.back-button{
  text-decoration:none;
  padding-left:0
}
.home-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.enter-button{
  font-size:15px;
  min-height:59px;
  padding:17px 27px;
  border-radius:12px;
  gap:28px
}
.home-details{
  display:flex;
  gap:21px;
  margin:33px 0 20px;
  font-size:10px;
  color:#c0b7ca
}
.home-details span+span{
  border-left:1px solid var(--line);
  padding-left:21px
}
.home-details b{
  display:block;
  font-family:Georgia,serif;
  font-size:23px;
  font-weight:400;
  color:#e8e0ce;
  margin-bottom:5px
}
.save-note{
  font-size:10px;
  color:#b6acbe;
  line-height:1.6;
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:360px
}
.save-note i{
  height:5px;
  width:5px;
  flex-shrink:0;
  background:var(--secondary);
  border-radius:50%
}
.home-art{
  position:relative;
  max-width:510px;
  justify-self:end;
  margin:0 8px 0 0
}
.original-castle{
  display:block;
  width:100%;
  max-height:650px;
  object-fit:contain;
  border-radius:43% 43% 18px 18px;
  box-shadow:0 0 70px #e8c6630a
}
.art-twinkle{
  position:absolute;
  color:var(--accent);
  font-size:32px;
  animation:twinkle 4s ease-in-out infinite;
  z-index:1
}
.t1{
  top:10%;
  left:-8%
}
.t2{
  right:-6%;
  top:34%;
  font-size:46px;
  animation-delay:1s
}
.art-credit{
  position:absolute;
  bottom:28px;
  left:-35px;
  transform:rotate(-5deg);
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #71644d;
  background:#f2e6c9;
  color:#423c3b;
  border-radius:5px;
  padding:13px 21px;
  box-shadow:3px 7px 0 #0b0d1744;
  font-size:12px;
  line-height:1.6
}
.art-credit strong{
  font-weight:600
}
.credit-spark{
  font-size:31px
}
.floating-guide{
  position:absolute;
  right:-32px;
  top:3%;
  display:flex;
  align-items:center;
  gap:3px;
  transform:rotate(7deg);
  font-size:10px;
  line-height:1.5;
  color:#eee1cb;
  animation:float 5s ease-in-out infinite
}
.floating-guide img{
  width:64px
}
.adventure-strip{
  border-top:1px solid #393346;
  border-bottom:1px solid #393346;
  padding:19px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  color:#c9bed1;
  font-size:12px;
  letter-spacing:.025em
}
.adventure-strip span{
  color:var(--accent);
  font-size:18px
}
.screen-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  margin-bottom:20px
}
.star-counter{
  display:flex;
  gap:9px;
  align-items:center;
  color:#e4d8c4;
  font-size:13px;
  white-space:nowrap
}
.star-counter span{
  color:var(--accent);
  font-size:23px
}
.section-heading{
  text-align:center;
  margin:20px auto 32px
}
.section-heading h1{
  margin:12px 0 16px
}
.section-heading>p:not(.eyebrow){
  font-size:14px;
  color:var(--muted)
}
.map-screen{
  max-width:1140px;
  margin:auto;
  padding:0 30px 30px
}
.room-map{
  position:relative;
  padding-top:27px;
  margin-top:46px
}
.map-roof{
  position:absolute;
  height:73px;
  width:88%;
  top:-23px;
  left:6%;
  background:#373247;
  clip-path:polygon(0 100%,0 67%,6% 67%,6% 30%,9% 30%,9% 67%,22% 67%,22% 45%,34% 45%,34% 66%,44% 66%,50% 0,56% 66%,65% 66%,65% 45%,78% 45%,78% 67%,91% 67%,91% 30%,94% 30%,94% 67%,100% 67%,100% 100%);
  text-align:center
}
.map-roof span{
  display:inline-block;
  margin-top:30px;
  color:var(--accent)
}
.rooms{
  position:relative;
  border:1px solid #4f465f;
  background:#302b40;
  padding:24px;
  border-radius:16px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:17px;
  box-shadow:0 12px 40px #0002
}
.room-card{
  position:relative;
  min-height:210px;
  background:#201e30;
  border:1px solid #50465e;
  border-radius:70px 70px 13px 13px;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:20px 9px 13px;
  gap:9px;
  overflow:hidden
}
.room-card.available{
  border:2px solid var(--accent);
  box-shadow:0 0 24px #f5ce6912;
  background:#3a3142
}
.room-card.completed{
  border-color:#8c9c72;
  background:#2b3040
}
.room-card:not(:disabled):hover{
  transform:translateY(-4px)
}
.room-number{
  position:absolute;
  top:19px;
  left:19px;
  font-size:10px;
  color:#c3b5cc
}
.room-picture{
  display:flex;
  width:100px;
  height:90px;
  background:var(--room-color);
  border-radius:50%;
  align-items:center;
  justify-content:center
}
.room-picture img{
  width:100px;
  height:87px;
  object-fit:contain
}
.room-name{
  font-family:Georgia,serif;
  font-size:17px;
  line-height:1.25;
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:center
}
.room-state{
  font-size:10px;
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:20px
}
.room-card.completed .room-state{
  color:#c8dca6
}
.room-card.locked .room-picture{
  filter:grayscale(1);
  opacity:.25
}
.room-card.locked .room-name,.room-card.locked .room-state{
  color:#a69bb2
}
.room-card.locked{
  background:#282436;
  border-style:dashed
}
.map-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0
}
.play-screen{
  max-width:880px;
  margin:auto;
  padding:0 24px 30px;
  text-align:center;
  min-height:690px
}
.room-step{
  font-size:10px;
  color:var(--muted);
  letter-spacing:.12em
}
.ghost-message{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:0 auto;
  min-height:75px
}
.ghost-message img{
  width:69px;
  animation:float 5s ease-in-out infinite
}
.ghost-message p{
  font-size:15px;
  text-align:left;
  line-height:1.5;
  max-width:430px;
  background:#302a40;
  padding:14px 19px;
  border-radius:18px 18px 18px 3px
}
.challenge-illustration{
  height:235px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin:0 auto 16px
}
.challenge-illustration::before{
  content:'';
  position:absolute;
  width:225px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(ellipse,#8c6e9c20,transparent 70%);
  z-index:-1
}
.challenge-illustration>img{
  height:235px;
  width:auto;
  animation:appear .4s ease-out
}
.listening-orb{
  display:flex;
  flex-direction:column;
  color:var(--accent);
  font-size:13px;
  gap:12px
}
.listening-orb>span:first-child{
  font-size:64px;
  animation:float 3s ease-in-out infinite
}
.answer-slots{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:center;
  margin:0 auto;
  max-width:680px
}
.answer-slot{
  border:2px dashed #86738d;
  border-radius:10px;
  min-width:50px;
  height:57px;
  background:#252236;
  font-size:27px;
  position:relative;
  font-weight:600;
  color:#f7ecd6
}
.answer-slot:disabled{
  opacity:1
}
.answer-slot.correct{
  background:#bcd598;
  border:2px solid #c8eaa1;
  color:#263e2f
}
.answer-slot.wrong{
  background:#6c3548;
  border:2px solid #ef8890;
  color:#ffe2df
}
.slot-dot{
  color:#7f718d
}
.slot-mark{
  position:absolute;
  bottom:0;
  right:3px;
  font-size:12px;
  line-height:1.2
}
.spelling-status{
  font-size:12px;
  color:#ccc0d6;
  min-height:45px;
  padding:14px 0 9px;
  line-height:1.5
}
.letter-bank{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  min-height:65px;
  max-width:600px;
  margin:4px auto 20px
}
.letter-tile{
  height:55px;
  width:51px;
  border-radius:9px;
  border:1px solid #edddbc;
  border-bottom:5px solid #b7a486;
  background:#f7e9c9;
  color:#393145;
  font-size:25px;
  font-weight:600;
  box-shadow:0 3px 0 #09081355
}
.letter-tile:hover:not(:disabled){
  background:#ffedab;
  transform:translateY(-3px)
}
.letter-tile:disabled{
  opacity:.14;
  border-bottom-width:1px;
  box-shadow:none
}
.spelling-tools{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center
}
.spelling-tools .secondary{
  font-size:12px;
  min-height:46px;
  padding:10px 16px;
  gap:6px
}
.entry-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px
}
.entry-controls small{
  color:var(--muted);
  font-size:12px
}
.earned-star{
  font-size:38px;
  color:var(--accent);
  margin:0 0 12px;
  animation:pop .5s ease-out
}
.button-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}
.solved-picture{
  filter:drop-shadow(0 0 15px #f5ce6920)
}
.reward-screen{
  max-width:950px;
  margin:auto;
  padding:0 24px 36px;
  text-align:center;
  min-height:690px
}
.reward-screen .section-heading{
  margin-bottom:18px
}
.reward-screen .section-heading h1{
  font-size:clamp(2rem,4vw,3.1rem)
}
.reward-art{
  position:relative;
  width:310px;
  margin:0 auto;
  max-width:100%
}
.reward-art img{
  width:300px;
  max-height:275px
}
.reward-spark{
  position:absolute;
  font-size:38px;
  color:var(--accent)
}
.s1{
  top:23%;
  left:2%
}
.s2{
  top:55%;
  right:0
}
.reward-message{
  color:#cec2d4;
  font-size:14px;
  margin:12px auto 22px
}
.reward-screen>.text-button{
  display:block;
  margin:17px auto
}
.carving-layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:25px;
  align-items:center;
  max-width:760px;
  margin:0 auto 20px
}
.pumpkin-preview{
  max-width:360px;
  margin:auto;
  width:100%;
  filter:drop-shadow(0 0 28px #e9913e1a)
}
.pumpkin-preview svg{
  width:100%;
  display:block
}
.face-choices{
  display:flex;
  flex-direction:column;
  gap:15px;
  text-align:left
}
.face-choices fieldset{
  border:0;
  padding:0;
  margin:0
}
.face-choices legend{
  font-size:12px;
  color:var(--accent);
  margin:0 0 9px
}
.choice-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.choice{
  border:1px solid #665471;
  background:#30293e;
  font-size:12px;
  padding:10px 13px;
  border-radius:9px;
  min-height:44px;
  flex:1
}
.choice[aria-pressed=true]{
  color:var(--ink);
  background:var(--accent);
  border-color:var(--accent)
}
.finished-pumpkin{
  filter:drop-shadow(0 0 30px #f5ce6955);
  max-width:320px;
  animation:appear .6s
}
.completion-screen{
  max-width:1150px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:35px;
  align-items:center;
  padding:10px 30px 35px;
  position:relative;
  overflow:hidden
}
.completion-copy{
  z-index:1
}
.completion-copy h1{
  font-size:clamp(60px,6vw,88px);
  margin:26px 0
}
.completion-copy>p:not(.eyebrow){
  color:#c9bfd2;
  font-size:14px
}
.all-stars{
  color:var(--accent);
  font-size:32px;
  letter-spacing:5px;
  margin:23px 0 10px
}
.completion-copy .button-row{
  justify-content:flex-start;
  margin-top:25px
}
.completion-art{
  position:relative;
  padding:0 15px
}
.celebration-castle{
  max-height:640px;
  object-fit:contain;
  border-radius:44% 44% 16px 16px;
  filter:drop-shadow(0 0 28px #f5ce6933)
}
.celebrating-ghost{
  position:absolute;
  bottom:10%;
  left:-30px;
  animation:dance 3s ease-in-out infinite
}
.confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden
}
.confetti i{
  position:absolute;
  left:var(--x);
  top:-30px;
  width:7px;
  height:12px;
  background:var(--accent);
  animation:confetti 8s linear infinite;
  animation-delay:calc(var(--i) * -.33s);
  opacity:.65
}
.confetti i:nth-child(3n){
  background:#ba9bcd
}
.confetti i:nth-child(3n + 1){
  background:#bad394
}
.float img{
  animation:float 3s ease-in-out infinite
}
.wiggle img,.dance img{
  animation:dance 2s ease-in-out infinite
}
.sparkle .reward-spark{
  animation:twinkle 2s ease-in-out infinite
}
.bubble img{
  animation:float 2.5s ease-in-out infinite
}
.bubble .reward-spark{
  border:2px solid #b9ce8f;
  color:transparent;
  border-radius:50%;
  width:19px;
  height:19px;
  animation:bubble 3s ease-out infinite
}
.swoop img{
  animation:swoop 4s ease-in-out infinite
}
.bow img{
  animation:bow 3s ease-in-out infinite
}
.peek img{
  animation:peek 3s ease-in-out infinite
}
.pop img{
  animation:rewardpop 3s ease-in-out infinite
}
dialog{
  border:1px solid #736080;
  background:#2c263b;
  color:var(--cream);
  border-radius:22px;
  padding:26px 24px 30px;
  text-align:center;
  max-width:calc(100% - 32px);
  width:470px;
  box-shadow:0 20px 100px #0008
}
dialog::backdrop{
  background:#0d0b1ac9;
  backdrop-filter:blur(5px)
}
dialog p{
  color:#d3c8da;
  font-size:13px;
  margin:18px 0 25px
}
dialog h2{
  margin-top:10px
}
dialog .button-row{
  gap:10px
}
noscript{
  display:block;
  text-align:center;
  padding:40px
}
@keyframes float{
  0%,100%{
    transform:translateY(0) rotate(2deg)
  }
  50%{
    transform:translateY(-9px) rotate(-2deg)
  }
}
@keyframes twinkle{
  0%,100%{
    opacity:.45;
    transform:scale(.9)
  }
  50%{
    opacity:1;
    transform:scale(1.08)
  }
}
@keyframes appear{
  from{
    opacity:0;
    transform:translateY(8px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes pop{
  0%{
    transform:scale(.5)
  }
  70%{
    transform:scale(1.2)
  }
  100%{
    transform:scale(1)
  }
}
@keyframes dance{
  0%,100%{
    transform:rotate(-5deg) translateY(0)
  }
  50%{
    transform:rotate(5deg) translateY(-9px)
  }
}
@keyframes swoop{
  0%,100%{
    transform:translate(-13px,4px) rotate(-7deg)
  }
  50%{
    transform:translate(13px,-10px) rotate(5deg)
  }
}
@keyframes bow{
  0%,100%{
    transform:rotate(0)
  }
  40%,60%{
    transform:rotate(8deg) translateY(8px)
  }
}
@keyframes peek{
  0%,100%{
    transform:translateX(-9px)
  }
  50%{
    transform:translateX(9px) rotate(4deg)
  }
}
@keyframes rewardpop{
  0%,100%{
    transform:scale(1)
  }
  50%{
    transform:scale(1.04) rotate(-2deg)
  }
}
@keyframes bubble{
  from{
    transform:translateY(20px);
    opacity:0
  }
  50%{
    opacity:1
  }
  to{
    transform:translateY(-60px);
    opacity:0
  }
}
@keyframes confetti{
  to{
    transform:translateY(800px) rotate(450deg)
  }
}
@media(min-width:1500px){
  .home-screen{
    min-height:720px
  }
  .original-castle{
    max-height:700px
  }
}
@media(max-width:1000px){
  .home-screen{
    gap:20px;
    padding-top:20px;
    min-height:600px
  }
  .home-copy h1{
    font-size:67px
  }
  .home-copy .eyebrow{
    font-size:8px
  }
  .welcome{
    font-size:17px;
    margin-top:25px
  }
  .title-star{
    margin-left:12px;
    font-size:39px
  }
  .home-description{
    font-size:14px
  }
  .home-details{
    gap:15px
  }
  .home-details span+span{
    padding-left:15px
  }
  .home-art{
    margin-right:12px
  }
  .floating-guide{
    right:-22px;
    top:-5%
  }
  .floating-guide span{
    display:none
  }
  .art-credit{
    left:-12px;
    bottom:16px;
    padding:10px 13px;
    font-size:10px
  }
  .rooms{
    gap:12px;
    padding:18px
  }
  .room-name{
    font-size:15px
  }
  .room-picture{
    width:86px;
    height:78px
  }
  .room-picture img{
    width:86px
  }
  .room-card{
    min-height:195px
  }
  .map-screen{
    padding:0 22px 25px
  }
  .week-label{
    display:none
  }
  .room-number{
    top:16px;
    left:12px
  }
  .completion-screen{
    gap:10px
  }
  .all-stars{
    font-size:25px;
    letter-spacing:3px
  }
}
@media(max-width:760px){
  .site-header{
    min-height:88px;
    padding:17px 6%
  }
  .brand{
    font-size:11px;
    gap:9px
  }
  .brand b{
    font-size:12px
  }
  .brand-star{
    font-size:33px
  }
  .icon-button{
    padding:0 13px
  }
  .icon-button span{
    font-size:10px
  }
  .home-screen{
    display:flex;
    flex-direction:column;
    padding:10px 25px 30px;
    gap:15px;
    min-height:0
  }
  .home-copy{
    text-align:center;
    padding:0;
    display:contents
  }
  .home-copy .eyebrow{
    font-size:8px;
    order:0
  }
  .welcome{
    order:1;
    font-size:15px;
    margin:4px 0 -2px
  }
  .home-copy h1{
    font-size:clamp(48px,9.5vw,70px);
    order:2;
    white-space:normal
  }
  .home-copy h1 br{
    display:none
  }
  .title-star{
    display:none
  }
  .home-art{
    order:3;
    margin:6px 18px 0;
    max-width:330px;
    width:85%;
    align-self:center;
    justify-self:unset
  }
  .original-castle{
    max-height:400px
  }
  .floating-guide{
    right:-29px;
    top:8%;
    width:54px
  }
  .floating-guide img{
    width:54px
  }
  .art-twinkle{
    font-size:26px
  }
  .t2{
    right:-10%;
    font-size:34px
  }
  .art-credit{
    font-size:9px;
    left:-23px;
    bottom:10px;
    gap:7px;
    padding:8px 11px
  }
  .credit-spark{
    font-size:23px
  }
  .home-description{
    order:4;
    text-align:center;
    margin:6px auto 0;
    font-size:13px;
    max-width:310px;
    line-height:1.6
  }
  .home-buttons{
    order:5;
    justify-content:center
  }
  .enter-button{
    min-height:54px;
    font-size:14px;
    padding:13px 23px
  }
  .home-details{
    order:6;
    margin:9px 0 0;
    gap:22px;
    text-align:center
  }
  .home-details span+span{
    padding-left:22px
  }
  .home-details b{
    font-size:21px
  }
  .home-copy>.save-note{
    order:7;
    margin-top:3px;
    text-align:center
  }
  .adventure-strip{
    font-size:10px;
    gap:14px;
    padding:14px 16px;
    text-align:center
  }
  .site-footer{
    padding:21px 6%;
    font-size:9px;
    gap:15px
  }
  .site-footer>span:last-child{
    display:none
  }
  .section-heading{
    margin:14px auto 24px
  }
  .section-heading h1{
    font-size:35px;
    max-width:440px;
    margin:10px auto 13px
  }
  .section-heading>p:not(.eyebrow){
    font-size:12px
  }
  .rooms{
    grid-template-columns:repeat(2,1fr);
    padding:18px;
    gap:15px
  }
  .room-card{
    min-height:190px;
    padding-top:18px
  }
  .room-picture{
    width:95px;
    height:82px
  }
  .room-picture img{
    width:93px;
    height:83px
  }
  .room-name{
    font-size:17px;
    min-height:36px
  }
  .room-card:last-child:nth-child(odd){
    grid-column:1 / -1
  }
  .map-screen{
    padding:0 20px 20px
  }
  .map-roof{
    height:60px;
    top:-20px
  }
  .room-map{
    padding-top:20px
  }
  .map-bottom{
    flex-direction:column
  }
  .screen-top{
    margin-bottom:12px
  }
  .play-screen{
    min-height:640px;
    padding:0 18px 25px
  }
  .ghost-message{
    min-height:75px;
    gap:4px
  }
  .ghost-message img{
    width:59px
  }
  .ghost-message p{
    padding:11px 13px;
    font-size:13px;
    max-width:275px
  }
  .room-step{
    font-size:8px;
    letter-spacing:.06em
  }
  .star-counter{
    font-size:11px;
    gap:6px
  }
  .star-counter span{
    font-size:19px
  }
  .back-button{
    font-size:11px
  }
  .challenge-illustration{
    height:206px;
    margin-bottom:12px
  }
  .challenge-illustration>img{
    height:206px
  }
  .answer-slots{
    gap:6px;
    max-width:340px
  }
  .answer-slot{
    height:51px;
    min-width:44px;
    width:44px;
    font-size:23px
  }
  .letter-bank{
    gap:8px;
    max-width:330px;
    margin-bottom:16px;
    min-height:58px
  }
  .letter-tile{
    height:51px;
    width:46px;
    font-size:23px
  }
  .spelling-status{
    font-size:11px;
    min-height:42px;
    padding:11px 0
  }
  .spelling-tools{
    gap:8px
  }
  .spelling-tools .secondary{
    font-size:10px;
    padding:10px 11px;
    min-height:46px
  }
  .reward-screen{
    padding:0 20px 25px;
    min-height:640px
  }
  .reward-screen .screen-top>.eyebrow{
    font-size:8px
  }
  .reward-art{
    width:265px
  }
  .reward-art img{
    width:250px
  }
  .reward-message{
    font-size:13px;
    margin:9px auto 19px
  }
  .carving-layout{
    grid-template-columns:1fr;
    gap:0;
    max-width:380px;
    margin-bottom:23px
  }
  .pumpkin-preview{
    max-width:260px
  }
  .face-choices{
    gap:12px
  }
  .face-choices fieldset{
    display:grid;
    grid-template-columns:47px 1fr;
    align-items:center
  }
  .face-choices legend{
    float:left;
    margin:0;
    font-size:11px
  }
  .choice{
    font-size:10px;
    padding:9px 8px
  }
  .choice-row{
    gap:5px
  }
  .completion-screen{
    display:flex;
    flex-direction:column;
    padding:15px 25px 30px;
    text-align:center
  }
  .completion-copy .eyebrow{
    font-size:8px
  }
  .completion-copy h1{
    font-size:62px;
    margin:18px 0
  }
  .completion-copy h1 br{
    display:none
  }
  .completion-copy>p:not(.eyebrow){
    font-size:12px
  }
  .completion-copy .button-row{
    justify-content:center;
    margin:20px 0
  }
  .completion-art{
    width:290px;
    max-width:90%
  }
  .celebration-castle{
    max-height:370px
  }
  .celebrating-ghost{
    width:75px
  }
  .all-stars{
    font-size:25px;
    margin:18px 0 8px
  }
  .completion-count{
    font-size:11px
  }
  .earned-star{
    font-size:30px
  }
  .button-row .primary,.button-row .secondary{
    font-size:12px;
    padding:12px 17px;
    min-height:48px
  }
}
@media(max-width:360px){
  .home-copy h1{
    font-size:43px
  }
  .answer-slots{
    gap:5px
  }
  .answer-slot{
    width:44px;
    min-width:44px
  }
  .spelling-tools{
    gap:5px
  }
  .spelling-tools .secondary{
    padding:10px 8px
  }
  .rooms{
    padding:12px;
    gap:10px
  }
  .room-name{
    font-size:15px
  }
  .home-details{
    gap:13px
  }
  .home-details span+span{
    padding-left:13px
  }
  .all-stars{
    letter-spacing:1px
  }
}
@supports(padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    padding-bottom:env(safe-area-inset-bottom)
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Keep room numbers inside the arched doors at every width. */
.room-number{
  top:7px;
  left:0;
  right:0;
  text-align:center
}

/* Challenge choices use the existing paper, moonlight and rounded-door palette. */
.difficulty-screen{max-width:1060px;margin:auto;padding:0 28px 35px;text-align:center;min-height:660px}
.difficulty-options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0 25px}
.difficulty-card{border:1px solid #65546f;background:var(--panel);border-radius:60px 60px 15px 15px;padding:27px 23px 23px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:300px;text-align:center}
.difficulty-card.last-played{border-color:var(--accent)}
.difficulty-card:hover{background:#342c43;transform:translateY(-3px)}
.difficulty-symbol{font-size:45px;line-height:1;color:var(--accent)}
.difficulty-card strong{font-family:Georgia,serif;font-size:30px;font-weight:400}
.difficulty-description{font-size:13px;line-height:1.65;color:#c9bfd2;flex:1}
.difficulty-progress{font-size:11px;color:var(--secondary)}
.difficulty-enter{font-size:12px;color:var(--accent)}
.star-rule{font-size:12px;line-height:1.8;color:#c9bfd2;margin:18px auto}
.mode-badge{border:1px solid #665471;background:#302a40;border-radius:22px;min-height:44px;padding:9px 15px;color:var(--accent);font-size:11px;white-space:nowrap}
.mode-row{display:flex;align-items:center;justify-content:center;gap:15px;margin:-8px 0 4px}
.star-rule-inline{font-size:10px;color:#c9bfd2}
.room-card.completed .room-state{flex-direction:column;gap:3px}
.room-state .room-star{font-size:9px;color:var(--accent)}
.completion-stars{font-size:20px!important;color:var(--accent)!important;margin-bottom:8px}
.all-stars .unearned{color:#8c8197}
@media(max-width:760px){
  .difficulty-screen{padding:0 20px 25px;min-height:640px}
  .difficulty-options{grid-template-columns:1fr;gap:13px;max-width:400px;margin:23px auto}
  .difficulty-card{border-radius:30px 30px 13px 13px;min-height:0;padding:17px 23px;gap:10px}
  .difficulty-symbol{font-size:29px}
  .difficulty-card strong{font-size:26px}
  .difficulty-description{font-size:12px}
  .difficulty-card .difficulty-progress{font-size:10px}
  .difficulty-screen .eyebrow{font-size:8px}
  .mode-badge{font-size:10px;padding:8px 13px}
  .mode-row{margin:-5px 0 2px;gap:12px}
  .star-rule-inline{font-size:9px}
  .hard-mode .challenge-illustration,.nightmare-mode .challenge-illustration{height:166px;margin-bottom:9px}
  .hard-mode .challenge-illustration>img,.nightmare-mode .challenge-illustration>img{height:166px}
  .hard-mode .letter-bank,.nightmare-mode .letter-bank{max-width:350px;gap:5px;margin-bottom:11px}
  .hard-mode .letter-tile,.nightmare-mode .letter-tile{width:44px;height:48px}
  .hard-mode .answer-slots,.nightmare-mode .answer-slots{max-width:354px;gap:5px}
  .reward-screen .screen-top{flex-wrap:wrap}
}

/* V1.2: achievements, hidden spelling, and the two special moments. */
.room-card{overflow:visible}
.room-achievement{position:absolute;top:8px;right:-6px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:34px;line-height:1;background:#2d293e;border:1px solid #76613e;box-shadow:0 3px 9px #0004;z-index:1}
.room-achievement.star-earned{color:var(--accent);text-shadow:0 0 10px #efc85b44}
.room-achievement.star-missing{color:#c3b5cd;border-color:#796685}
.pending-banner{display:flex;justify-content:center;align-items:center;gap:20px;padding:17px;background:#302a40;border:1px solid #65546f;border-radius:14px;margin-bottom:35px}
.pending-banner p{font-size:13px;color:#d7cbe0}
.hidden-count{padding:14px 24px;min-height:52px;border:1px dashed #86738d;border-radius:30px;font-size:16px;letter-spacing:.025em;color:var(--cream)}
.ghost-baskets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:680px;margin:8px auto 10px}
.ghost-basket{display:flex;align-items:center;flex-direction:column;background:#2b273b;border:1px solid #62516e;border-radius:45px 45px 15px 15px;padding:12px 9px 10px;gap:6px;min-height:238px}
.ghost-basket:hover:not(:disabled){background:#383046;border-color:var(--accent)}
.candy-ghost{width:96px;height:84px;object-fit:contain;transform:translateY(calc(var(--full) * -2px)) rotate(calc(var(--full) * 2deg));filter:drop-shadow(0 0 calc(var(--full) * 5px) #eac76733)}
.basket-wish{display:flex;align-items:center;justify-content:center;gap:5px;min-height:42px;font-size:11px;color:#e2d5e9}
.basket-wish img{height:42px;width:42px;object-fit:contain}
.basket{position:relative;display:block;width:110px;height:65px;max-width:100%}
.basket>svg{display:block;width:100%;height:100%}
.basket-fill{position:absolute;inset:23px 10px 5px;display:flex;align-items:center;justify-content:center;color:#725344}
.basket-fill>span{display:grid;place-items:center;min-width:24px;font-size:23px}
.basket-fill img{width:28px;height:28px}
.basket-count{font-size:11px;color:var(--accent)}
.candy-progress{font-size:15px;color:var(--accent);margin:18px auto}
.candy-tray{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px;max-width:750px;margin:0 auto 22px}
.candy-sweet{display:grid;place-items:center;min-height:76px;border:2px solid #544661;background:#312a40;border-radius:14px;padding:2px}
.candy-sweet img{width:68px;height:65px;pointer-events:none}
.candy-sweet.is-selected{border-color:var(--accent);background:#4a3b4c;box-shadow:0 0 0 3px #f5ce6920;transform:translateY(-4px)}
.candy-sweet.gentle-bounce{animation:candy-bounce .4s ease-out}
.candy-cheer .candy-ghost{animation:dance 1.5s ease-in-out infinite}
.candy-finale{margin:15px auto 22px;font-size:27px}
#candy-message{min-height:24px}
@keyframes candy-bounce{0%,100%{transform:translateY(-4px)}40%{transform:translateY(-13px)}70%{transform:translateY(-2px)}}
@media(max-width:760px){
  .room-achievement{width:44px;height:44px;font-size:33px;right:-5px;top:6px}
  .pending-banner{flex-direction:column;gap:12px;padding:15px}
  .ghost-baskets{gap:8px;margin-top:6px}
  .ghost-basket{min-height:206px;border-radius:32px 32px 12px 12px;padding:10px 5px;gap:3px}
  .candy-ghost{width:73px;height:65px}
  .basket-wish{font-size:10px;min-height:52px;line-height:1.4;flex-direction:column;gap:1px}
  .basket-wish img{width:33px;height:30px}
  .basket{width:97px;height:57px}
  .basket-fill{inset:21px 8px 5px}
  .basket-fill>span{min-width:21px}
  .basket-fill img{width:23px;height:24px}
  .candy-tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:330px;margin-bottom:17px}
  .candy-sweet{min-height:66px}
  .candy-sweet img{height:56px;width:64px}
  .candy-progress{margin:13px auto;font-size:13px}
  .special-screen .section-heading{margin-bottom:12px}
  .special-screen .section-heading h1{margin:9px auto 12px}
  .special-screen .reward-message{font-size:12px;margin-bottom:12px}
}