:root {
  --ink:#171717;
  --lime:#ceff5a;
  --purple:#b99bfa;
  --coral:#ff836b
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--purple);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer;
  color:inherit
}
button:focus-visible,a:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:6px
}
[hidden] {
  display:none!important
}
.game-header,.game-footer {
  width:min(1100px,calc(100% - 64px));
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.game-header {
  padding-block:28px;
  border-bottom:1px solid #17171744
}
.game-header a {
  font-size:12px;
  font-weight:700
}
.game-header>span {
  font-family:monospace;
  font-size:9px;
  letter-spacing:1px
}
.game-shell {
  width:min(960px,calc(100% - 48px));
  margin:auto;
  min-height:calc(100dvh - 159px);
  display:grid;
  align-content:center;
  padding:50px 0
}
.game-intro {
  text-align:center;
  position:relative
}
.eyebrow {
  font-family:monospace;
  letter-spacing:2px;
  font-size:11px;
  display:block
}
h1,h2,p {
  margin:0
}
h1 {
  font-size:clamp(60px,8.5vw,104px);
  line-height:1;
  letter-spacing:-5px;
  margin-top:28px;
  position:relative;
  z-index:1
}
h1 span {
  background:var(--lime);
  padding:0 10px 5px;
  display:inline-block;
  transform:rotate(-2deg)
}
.intro-star {
  position:absolute;
  right:6%;
  top:7%;
  font-size:120px;
  transform:rotate(12deg);
  color:var(--coral);
  line-height:1
}
.game-intro p {
  font-size:16px;
  line-height:1.8;
  margin-top:30px
}
.game-button {
  border:1.5px solid var(--ink);
  background:var(--ink);
  color:#fff;
  border-radius:6px;
  padding:18px 26px;
  font-size:13px;
  font-weight:700;
  box-shadow:4px 4px #17171744;
  transition:transform .15s,box-shadow .15s;
  display:inline-block
}
.game-button:hover {
  transform:translate(-2px,-2px);
  box-shadow:6px 6px #17171744
}
.game-intro .game-button {
  margin-top:28px
}
.demo-note {
  font-size:10px;
  line-height:1.7;
  display:block;
  color:#4f3b6c;
  max-width:380px;
  margin:25px auto 0
}
.game-footer {
  padding-block:22px;
  border-top:1px solid #17171744;
  font-family:monospace;
  font-size:9px;
  letter-spacing:1px
}
.game-footer a {
  font-weight:bold
}
.play-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.play-heading h2 {
  font-size:35px;
  letter-spacing:-1.5px;
  margin-top:14px
}
.score {
  background:var(--lime);
  border:1.5px solid var(--ink);
  border-radius:5px;
  font-family:monospace;
  font-size:20px;
  font-weight:bold;
  padding:14px 17px;
  white-space:nowrap
}
.play-instruction {
  font-size:12px;
  margin-top:15px;
  color:#4f3b6c
}
.game-world {
  height:330px;
  position:relative;
  background:#f6f5f0;
  border:2px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  margin-top:23px
}
.world-sun {
  position:absolute;
  right:30px;
  top:0;
  font-size:110px;
  color:var(--coral);
  line-height:1.3
}
.world-cloud {
  position:absolute;
  width:88px;
  height:23px;
  border-radius:30px;
  background:#ddd6eb
}
.world-cloud::before {
  content:"";
  position:absolute;
  left:22px;
  bottom:7px;
  border-radius:30px;
  width:35px;
  height:28px;
  background:inherit
}
.cloud-one {
  left:35px;
  top:44px
}
.cloud-two {
  left:45%;
  top:23px;
  transform:scale(.75)
}
.world-mountain {
  position:absolute;
  left:37%;
  bottom:31px;
  width:200px;
  height:150px;
  background:#ded4ee;
  clip-path:polygon(50% 0,100% 100%,0 100%)
}
.world-mascot {
  position:absolute;
  left:24px;
  bottom:37px;
  width:85px;
  height:105px;
  border:2px solid var(--ink);
  border-radius:45px 45px 3px 3px;
  background:var(--coral);
  transform:rotate(-6deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.world-mascot span {
  letter-spacing:8px;
  font-size:12px;
  margin-left:8px
}
.world-mascot i {
  font-size:30px;
  font-style:normal;
  line-height:1
}
.world-ground {
  height:33px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:repeating-linear-gradient(90deg,var(--lime) 0,var(--lime) 29px,var(--ink) 29px,var(--ink) 31px);
  border-top:3px solid var(--ink)
}
.collect-star {
  position:absolute;
  width:54px;
  height:54px;
  background:var(--lime);
  border:2px solid var(--ink);
  box-shadow:4px 4px var(--ink);
  font-size:33px;
  line-height:1;
  border-radius:5px;
  transition:transform .2s,background .2s;
  z-index:3
}
.collect-star:hover {
  transform:rotate(-9deg) scale(1.1);
  background:var(--coral)
}
.collect-star:disabled {
  background:var(--purple);
  box-shadow:0 0 var(--ink);
  font-size:24px;
  transform:scale(.8)
}
.star-1 {
  left:18%;
  top:34%
}
.star-2 {
  left:36%;
  top:58%
}
.star-3 {
  left:47%;
  top:20%
}
.star-4 {
  left:65%;
  top:47%
}
.star-5 {
  left:81%;
  top:65%
}
.memory-message {
  text-align:center;
  font-size:15px;
  line-height:1.6;
  margin-top:22px;
  min-height:48px
}
.next-button {
  display:block;
  margin:10px auto 0;
  background:var(--lime);
  color:var(--ink)
}
.game-finale {
  text-align:center
}
.level-tag {
  display:inline-block;
  font-family:monospace;
  font-size:12px;
  background:var(--lime);
  border:1px solid var(--ink);
  border-radius:4px;
  padding:9px 15px;
  transform:rotate(-3deg);
  margin-top:22px
}
.game-finale h2 {
  font-size:clamp(52px,8vw,87px);
  line-height:1;
  letter-spacing:-4px;
  margin-top:25px
}
.game-finale h2 span {
  color:#fff;
  text-shadow:2px 2px var(--ink)
}
.game-finale p {
  font-size:14px;
  line-height:1.8;
  margin-top:10px
}
.finale-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  margin-top:25px;
  flex-wrap:wrap
}
.game-link {
  font-size:12px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:5px
}
.cake {
  position:relative;
  width:140px;
  height:110px;
  margin:25px auto 15px
}
.cake-bottom {
  position:absolute;
  bottom:5px;
  left:10px;
  right:10px;
  height:48px;
  border:2px solid var(--ink);
  background:var(--coral);
  border-radius:4px
}
.cake-top {
  position:absolute;
  bottom:48px;
  left:25px;
  right:25px;
  height:27px;
  border:2px solid var(--ink);
  background:var(--lime);
  z-index:2;
  border-radius:4px
}
.cake-plate {
  height:6px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--ink);
  border-radius:5px
}
.candles {
  display:flex;
  gap:16px;
  position:absolute;
  left:46px;
  bottom:74px
}
.candles i {
  height:21px;
  width:5px;
  background:var(--ink);
  position:relative
}
.candles i::before {
  content:"";
  position:absolute;
  top:-14px;
  left:-2px;
  width:9px;
  height:12px;
  border-radius:8px 0 8px 8px;
  background:var(--coral);
  transform:rotate(18deg)
}
.confetti-piece {
  position:fixed;
  top:-20px;
  left:var(--left);
  width:9px;
  height:17px;
  background:var(--color);
  z-index:20;
  pointer-events:none;
  animation:fall var(--duration) linear var(--delay) both
}
#confetti {
  pointer-events:none
}
@keyframes fall {
  to {
    transform:translateY(110dvh) rotate(630deg)
  }
}
.no-script {
  text-align:center;
  padding:20px;
  background:var(--lime)
}
@media(max-width:650px) {
  .game-header,.game-footer {
    width:calc(100% - 36px)
  }
  .game-header {
    padding-block:22px
  }
  .game-header a {
    font-size:11px
  }
  .game-header>span {
    font-size:7px;
    letter-spacing:0;
    text-align:right;
    max-width:100px;
    line-height:1.5
  }
  .game-shell {
    width:calc(100% - 36px);
    padding-block:46px;
    min-height:calc(100dvh - 145px)
  }
  h1 {
    font-size:65px;
    letter-spacing:-3.6px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.5px
  }
  .intro-star {
    font-size:74px;
    right:-3px;
    top:-13px
  }
  .game-intro p {
    font-size:13px
  }
  .game-button {
    font-size:12px;
    padding:17px 20px
  }
  .demo-note {
    font-size:9px;
    max-width:280px
  }
  .game-footer {
    font-size:7px;
    letter-spacing:.7px
  }
  .play-heading {
    align-items:flex-start;
    gap:12px
  }
  .play-heading .eyebrow {
    font-size:7px;
    letter-spacing:1px
  }
  .play-heading h2 {
    font-size:27px;
    letter-spacing:-1.2px;
    max-width:240px;
    margin-top:12px
  }
  .score {
    font-size:15px;
    padding:11px;
    min-width:73px;
    text-align:center
  }
  .play-instruction {
    font-size:10px;
    line-height:1.6
  }
  .game-world {
    height:345px
  }
  .world-sun {
    font-size:85px;
    right:5px;
    top:8px
  }
  .world-mascot {
    left:17px;
    width:63px;
    height:88px
  }
  .world-mountain {
    left:25%;
    width:170px
  }
  .collect-star {
    width:46px;
    height:46px;
    font-size:29px
  }
  .star-1 {
    left:12%;
    top:29%
  }
  .star-2 {
    left:32%;
    top:54%
  }
  .star-3 {
    left:44%;
    top:14%
  }
  .star-4 {
    left:66%;
    top:38%
  }
  .star-5 {
    left:77%;
    top:67%
  }
  .world-cloud {
    transform:scale(.7);
    left:1px
  }
  .cloud-two {
    left:37%;
    top:20px;
    transform:scale(.5)
  }
  .memory-message {
    font-size:12px;
    min-height:43px
  }
  .game-finale h2 {
    font-size:58px;
    letter-spacing:-3px
  }
  .game-finale p {
    font-size:12px
  }
  .finale-actions {
    gap:22px
  }
  .cake {
    margin-top:24px
  }
  .level-tag {
    font-size:10px
  }
}
@media(max-width:360px) {
  h1 {
    font-size:57px
  }
  .game-finale h2 {
    font-size:50px
  }
  .play-heading h2 {
    font-size:24px
  }
  .collect-star {
    width:43px;
    height:43px;
    font-size:27px
  }
  .star-5 {
    left:78%
  }
  .score {
    font-size:13px;
    padding:10px;
    min-width:65px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .confetti-piece {
    display:none
  }
}