@font-face {
  font-family: "Pofak";
  src: url("../homepage/fonts/pofak-vf.8c0127ea6c45.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

:root {
  --night: #14064b;
  --purple: #6d3bc1;
  --pink: #f45cae;
  --gold: #ffd748;
  --cream: #fff9e7;
  --cloud: #e9fbff;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 20% 23%, #8f51da4d, transparent 29%),
    radial-gradient(circle at 82% 60%, #1bbde33d, transparent 30%),
    linear-gradient(150deg, #22086a, #12043f 58%, #071a4c);
  font-family: Pofak, Tahoma, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.game-sky { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.game-sky::before { position: absolute; inset: 0; content: ""; opacity: .35; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #ffe874 0 1px, transparent 1.5px); background-position: 0 0, 28px 35px; background-size: 84px 84px, 127px 127px; }
.sky-star { position: absolute; color: #fff7a8; text-shadow: 0 0 14px #ffe56c; animation: twinkle 3.8s ease-in-out infinite; }
.sky-star-one { top: 18%; right: 7%; }
.sky-star-two { top: 9%; left: 17%; animation-delay: -1.4s; }
.sky-star-three { bottom: 18%; left: 7%; animation-delay: -2.6s; }
.sky-cloud { position: absolute; width: 190px; height: 57px; border-radius: 999px; background: #dff9ff17; box-shadow: 50px -19px 0 3px #dff9ff17, 94px 4px 0 6px #dff9ff17; animation: drift 12s ease-in-out infinite; }
.sky-cloud::before { position: absolute; width: 80px; height: 80px; right: 38px; top: -42px; border-radius: 50%; content: ""; background: inherit; }
.sky-cloud-one { top: 29%; right: -95px; }
.sky-cloud-two { bottom: 20%; left: -90px; transform: scale(.72); animation-delay: -6s; }

.game-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1180px, 100% - 38px);
  min-height: 88px;
  margin: 0 auto;
}

.game-back { justify-self: start; display: inline-flex; align-items: center; gap: 9px; color: #d0c3f2; font-size: 12px; font-weight: 800; }
.game-back span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff38; border-radius: 50%; color: #fff; background: #ffffff12; transition: background .18s, transform .18s; }
.game-back:hover span, .game-back:focus-visible span { background: #ffffff28; transform: translateX(3px); }
.game-brand { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand-latin { direction: ltr; display: inline-flex; align-items: end; letter-spacing: -2px; font: 900 21px/.8 "Arial Rounded MT Bold", Arial, sans-serif; }
.brand-latin i, .brand-latin b { font-style: normal; text-shadow: 0 2px #33104e; }
.brand-latin i:nth-child(1), .brand-latin i:nth-child(6) { color: #ff6caf; }
.brand-latin i:nth-child(2) { color: #ffbf45; }
.brand-latin i:nth-child(3) { color: #63d9e2; }
.brand-latin i:nth-child(4) { color: #9cd66d; }
.brand-latin i:nth-child(5) { color: #a88cff; }
.brand-latin b { margin-left: 4px; color: #f2a8ff; letter-spacing: -1px; }
.game-brand small { margin-top: 8px; color: #ff76bc; font-size: 10px; font-weight: 900; }
.game-header-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.sound-toggle { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #ffffff35; border-radius: 15px; color: #fff; background: #ffffff12; }
.sound-toggle[aria-pressed="false"] { opacity: .65; filter: grayscale(1); }
.star-score { direction: ltr; display: inline-flex; align-items: center; gap: 8px; min-width: 72px; height: 43px; border: 1px solid #ffe86b59; border-radius: 15px; padding: 0 13px; background: #ffd94d17; }
.star-score i { color: var(--gold); font-style: normal; filter: drop-shadow(0 0 7px #ffe26b); }
.star-score b { color: #fff7c9; font: 900 17px/1 Arial, sans-serif; }

.game-main { width: min(1020px, 100% - 32px); margin: 8px auto 0; padding-bottom: 35px; }
.castle-status { display: grid; grid-template-columns: 1fr minmax(310px, 450px); align-items: center; gap: 25px; margin-bottom: 18px; }
.castle-status-copy span, .castle-status-copy strong { display: block; }
.castle-status-copy span { color: #ffbdde; font-size: 11px; font-weight: 900; }
.castle-status-copy strong { margin-top: 5px; color: #fff8db; font-size: 18px; }
.door-track { direction: ltr; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.door-track li { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; color: #8e80b5; transition: color .25s; }
.door-track li::after { position: absolute; z-index: -1; right: calc(50% + 22px); top: 17px; width: calc(100% - 28px); height: 2px; content: ""; background: #ffffff1d; }
.door-track li:first-child::after { display: none; }
.mini-door { display: grid; place-items: end center; width: 31px; height: 38px; border: 2px solid currentColor; border-bottom: 0; border-radius: 18px 18px 2px 2px; padding-bottom: 4px; background: #ffffff0a; transition: box-shadow .25s, background .25s, transform .25s; }
.mini-door i { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.door-track b { font: 900 10px/1 Arial, sans-serif; }
.door-track li.is-current { color: #75edff; }
.door-track li.is-current .mini-door { background: #57ecff1f; box-shadow: 0 0 15px #50eaff87, inset 0 0 12px #68f2ff2e; transform: translateY(-3px); }
.door-track li.is-open { color: var(--gold); }
.door-track li.is-open .mini-door { background: linear-gradient(145deg, #ffe56d, #f29b38); box-shadow: 0 0 15px #ffd84b94; transform: perspective(60px) rotateY(-27deg); transform-origin: left; }
.castle-progress { grid-column: 2; height: 4px; margin-top: -14px; overflow: hidden; border-radius: 999px; background: #ffffff16; }
.castle-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #57dfee, #ffd94b); transition: width .45s ease; box-shadow: 0 0 9px #70ebf9; }

.play-card { isolation: isolate; position: relative; min-height: 615px; overflow: hidden; border: 1px solid #ffffff52; border-radius: 38px; padding: 34px 40px 30px; color: #27155e; background: radial-gradient(circle at 80% 4%, #ffffff, transparent 26%), linear-gradient(145deg, #fff9e9, #f2e9ff 61%, #ddf8ff); box-shadow: 0 35px 80px #05021f5c, inset 0 2px #fff; }
.play-card::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .3; background-image: radial-gradient(circle, #8c66c8 0 1px, transparent 1.3px); background-size: 49px 49px; mask-image: linear-gradient(#000, transparent 72%); }
.billie-guide { position: absolute; z-index: 3; top: 25px; left: 30px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 9px 9px #48206c2e); }
.billie-face { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #bd7f50 0 42%, #f3b67b 43%); }
.billie-face::before { position: absolute; top: -8px; right: 3px; width: 53px; height: 26px; border-radius: 50%; content: ""; background: repeating-radial-gradient(circle at 50% 100%, #321b38 0 8px, transparent 9px 13px); }
.billie-face b { z-index: 1; margin-top: 10px; color: #3b2340; font: 900 14px/1 Arial, sans-serif; }
.billie-face i { position: absolute; z-index: 2; top: 27px; width: 45px; height: 18px; border: 3px solid #2c1a3d; border-radius: 10px; }
.billie-face i::before { position: absolute; top: -3px; right: 18px; width: 3px; height: 16px; content: ""; background: #2c1a3d; }
.billie-hair { position: absolute; z-index: 3; top: -17px; right: 2px; color: #ffd843; font-size: 16px; }
.billie-guide small { margin-top: 5px; color: #7b5390; font-size: 10px; font-weight: 900; }

.word-scene { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 27px; width: min(690px, 100%); margin: 0 auto; }
.word-picture { position: relative; display: grid; place-items: center; width: 170px; height: 150px; border: 1px solid #9e7ecb24; border-radius: 41px; background: #ffffffb8; box-shadow: 0 18px 34px #593e8321, inset 0 1px #fff; }
.word-picture img { z-index: 2; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.word-picture > span { z-index: 2; font-size: 76px; filter: drop-shadow(0 9px 9px #4d2c7136); }
.picture-glow { position: absolute; width: 85px; height: 85px; border-radius: 50%; background: #ffd84842; filter: blur(17px); }
.word-copy > p { margin: 0 0 9px; color: #6f6282; font-size: 12px; font-weight: 700; }
.word-copy h1 { margin: 0; color: #3a1c79; font-size: 33px; line-height: 1.35; }
.word-copy h1 small { display: block; margin-top: 6px; color: #a28bb5; font-size: 11px; }
.listen-button { display: inline-flex; align-items: center; gap: 8px; min-height: 37px; margin-top: 11px; border: 1px solid #6f3dba29; border-radius: 999px; padding: 0 13px; color: #6940a6; background: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 7px 17px #4e24721a; }
.listen-button:hover, .listen-button:focus-visible { background: #f9f3ff; }

.word-builder { margin: 28px auto 0; }
.answer-slots { display: flex; justify-content: center; gap: clamp(8px, 1.6vw, 15px); min-height: 72px; }
.answer-slot { display: grid; place-items: center; width: clamp(49px, 7vw, 67px); height: clamp(59px, 8vw, 72px); border: 2px dashed #a78bc6; border-radius: 21px; color: #4b258d; background: #fff9; font: 900 clamp(25px, 4vw, 35px)/1 "Arial Rounded MT Bold", Arial, sans-serif; transition: transform .2s, border-color .2s, background .2s; }
.answer-slot:empty::before { content: attr(data-ghost); color: #7951a7; opacity: .16; }
button.answer-slot:not(:empty) { border-style: solid; border-color: #7040b8; background: #fff; box-shadow: 0 8px 18px #48237018; }
button.answer-slot:not(:empty):hover { transform: translateY(-2px); }
.answer-slots.is-wrong .answer-slot { animation: softShake .42s ease; border-color: #e8a44c; background: #fff3d7; }
.answer-slots.is-correct .answer-slot { border-color: #35b995; color: #107c60; background: #e7fff8; animation: slotPop .44s ease; }

.letter-clouds { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; min-height: 90px; margin-top: 25px; padding: 10px; }
.letter-cloud { position: relative; display: grid; place-items: center; width: 72px; height: 58px; border: 0; border-radius: 50%; color: #4d2991; background: #fff; font: 900 31px/1 "Arial Rounded MT Bold", Arial, sans-serif; box-shadow: 20px 7px 0 -10px #fff, -18px 8px 0 -11px #fff, 0 13px 24px #4b2b751f; transition: transform .2s, opacity .2s; animation: cloudBob 4.2s ease-in-out infinite; }
.letter-cloud:nth-child(2n) { animation-delay: -1.4s; }
.letter-cloud:nth-child(3n) { animation-delay: -2.7s; }
.letter-cloud:hover, .letter-cloud:focus-visible { transform: translateY(-5px) scale(1.05); outline: 3px solid #ffd74b; outline-offset: 5px; }
.letter-cloud.is-used { opacity: .18; pointer-events: none; transform: scale(.8); }
.letter-cloud.is-distractor { color: #7a68a1; }

.game-feedback { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; margin: 9px auto 0; border-radius: 17px; color: #716483; font-size: 11px; font-weight: 700; text-align: center; }
.game-feedback span { font-size: 21px; }
.game-feedback p { margin: 0; }
.game-feedback.is-hint { color: #6c3ca5; background: #efe5ff; }
.game-feedback.is-success { color: #087a5c; background: #dffff5; }
.play-actions { display: flex; justify-content: center; gap: 10px; margin-top: 7px; }
.soft-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; border: 1px solid #7750a52a; border-radius: 999px; padding: 0 14px; color: #73598c; background: #ffffff8f; font-size: 10px; font-weight: 900; }
.soft-button:hover, .soft-button:focus-visible { background: #fff; }

.success-burst { position: absolute; z-index: 20; inset: 0; pointer-events: none; opacity: 0; }
.success-burst.is-active { opacity: 1; }
.success-burst span { position: absolute; top: 50%; left: 50%; color: var(--gold); font-size: 35px; filter: drop-shadow(0 0 7px #ffca28); }
.success-burst.is-active span:nth-child(1) { animation: burstOne .8s ease-out forwards; }
.success-burst.is-active span:nth-child(2) { animation: burstTwo .8s ease-out forwards; }
.success-burst.is-active span:nth-child(3) { animation: burstThree .8s ease-out forwards; }
.success-burst.is-active span:nth-child(4) { animation: burstFour .8s ease-out forwards; }
.success-burst.is-active span:nth-child(5) { animation: burstFive .8s ease-out forwards; }
.parent-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 15px 0 0; color: #afa1d3; font-size: 10px; }
.parent-note span { color: #ff7ec0; font-size: 17px; }

.game-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: #0b032dd9; backdrop-filter: blur(18px); }
.overlay-card { width: min(530px, 100%); border: 1px solid #ffffff63; border-radius: 35px; padding: 34px; color: #2d1669; text-align: center; background: radial-gradient(circle at 50% 0, #ffffff, transparent 37%), linear-gradient(145deg, #fff8e7, #eee5ff); box-shadow: 0 35px 100px #0008, inset 0 2px #fff; }
.overlay-castle { direction: ltr; display: flex; align-items: end; justify-content: center; height: 92px; margin: -6px auto 15px; }
.overlay-castle i { width: 48px; height: 66px; border-radius: 17px 17px 3px 3px; background: linear-gradient(#b275e5, #6a47b8); box-shadow: inset 7px 0 #fff2; }
.overlay-castle b { display: grid; place-items: center; width: 76px; height: 85px; border-radius: 20px 20px 3px 3px; color: #ffe36d; background: linear-gradient(#a66cdf, #5433a3); font: 900 18px/1 Arial, sans-serif; }
.overlay-castle span { margin: 0 -2px 6px; color: #bceefa; font-size: 42px; }
.overlay-badge { display: inline-flex; border-radius: 999px; padding: 7px 12px; color: #6a35ae; background: #e4d6fa; font-size: 10px; font-weight: 900; }
.overlay-card h2 { margin: 13px 0 8px; color: #351472; font-size: 34px; line-height: 1.35; }
.overlay-card > p { max-width: 420px; margin: 0 auto; color: #716381; font-size: 13px; line-height: 1.9; }
.overlay-card fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 24px 0 0; padding: 0; border: 0; }
.overlay-card legend { width: 100%; margin-bottom: 10px; color: #6e5c82; font-size: 11px; font-weight: 900; }
.overlay-card fieldset button { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-height: 79px; border: 1px solid #8061ad2e; border-radius: 20px; padding: 12px; color: #4e3471; background: #ffffffb5; text-align: right; box-shadow: 0 10px 25px #51327010; transition: transform .2s, border-color .2s; }
.overlay-card fieldset button:hover, .overlay-card fieldset button:focus-visible { border-color: #8b47d5; transform: translateY(-3px); outline: 3px solid #ffd747; outline-offset: 2px; }
.overlay-card fieldset button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #eee5ff; font-size: 21px; }
.overlay-card fieldset b { align-self: end; font-size: 13px; }
.overlay-card fieldset small { align-self: start; margin-top: 3px; color: #8b7b9b; font-size: 8px; line-height: 1.5; }
.overlay-sound-note { display: block; margin-top: 17px; color: #8d7d9d; font-size: 8px; }
.completion-card { width: min(570px, 100%); }
.trophy { margin: -7px 0 5px; font-size: 72px; filter: drop-shadow(0 13px 17px #7a4b2c38); }
.completion-card > p b { color: #6d31b6; font-size: 18px; }
.learned-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0; }
.learned-words span { border: 1px solid #7952b82e; border-radius: 999px; padding: 8px 12px; color: #603399; background: #fff; font: 900 12px/1 Arial, sans-serif; }
.completion-actions { display: grid; gap: 9px; }
.completion-actions a, .completion-actions button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 999px; font-size: 13px; font-weight: 900; }
.completion-actions a { color: #2d1764; background: linear-gradient(#ffe875, #ffd12d); box-shadow: 0 13px 27px #ffc62f3b; }
.completion-actions button { color: #694c83; background: #fff; border: 1px solid #73509d29; }
.no-script { position: fixed; z-index: 200; right: 20px; bottom: 20px; border-radius: 12px; padding: 12px; color: #5a2f29; background: #fff0d3; }

@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(25px); } }
@keyframes cloudBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes softShake { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }
@keyframes slotPop { 0% { transform: scale(.85); } 65% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes burstOne { to { opacity: 0; transform: translate(-180px, -170px) rotate(110deg); } }
@keyframes burstTwo { to { opacity: 0; transform: translate(150px, -190px) rotate(-90deg); } }
@keyframes burstThree { to { opacity: 0; transform: translate(-220px, 95px) rotate(80deg); } }
@keyframes burstFour { to { opacity: 0; transform: translate(210px, 120px) rotate(-120deg); } }
@keyframes burstFive { to { opacity: 0; transform: translate(0, -240px) rotate(170deg); } }

@media (max-width: 760px) {
  .game-header { min-height: 72px; }
  .game-brand small { display: none; }
  .castle-status { grid-template-columns: 1fr; gap: 12px; }
  .castle-status-copy { display: flex; align-items: center; justify-content: space-between; }
  .castle-progress { grid-column: 1; margin-top: -7px; }
  .play-card { min-height: 600px; padding: 27px 22px 25px; }
  .billie-guide { top: 16px; left: 17px; transform: scale(.76); transform-origin: top left; }
  .word-scene { grid-template-columns: 125px 1fr; gap: 17px; }
  .word-picture { width: 125px; height: 118px; border-radius: 31px; }
  .word-picture > span { font-size: 58px; }
  .word-copy h1 { font-size: 26px; }
}

@media (max-width: 520px) {
  .game-header { width: min(100% - 22px, 1180px); grid-template-columns: 1fr auto; }
  .game-brand { display: none; }
  .game-back { font-size: 10px; }
  .game-header-actions { grid-column: 2; }
  .game-main { width: min(100% - 20px, 1020px); margin-top: 2px; }
  .castle-status-copy strong { font-size: 14px; }
  .door-track { gap: 7px; }
  .door-track b { display: none; }
  .play-card { min-height: 620px; border-radius: 27px; padding: 23px 14px 22px; }
  .word-scene { grid-template-columns: 1fr; gap: 9px; text-align: center; }
  .word-picture { width: 115px; height: 105px; margin: 0 auto; border-radius: 28px; }
  .word-copy > p { max-width: 270px; margin: 0 auto 6px; }
  .word-copy h1 { font-size: 23px; }
  .listen-button { margin-top: 8px; }
  .billie-guide { display: none; }
  .word-builder { margin-top: 20px; }
  .answer-slots { gap: 7px; min-height: 58px; }
  .answer-slot { width: min(51px, 15vw); height: 56px; border-radius: 17px; font-size: 24px; }
  .letter-clouds { gap: 10px; min-height: 76px; margin-top: 19px; }
  .letter-cloud { width: 57px; height: 47px; font-size: 25px; box-shadow: 15px 6px 0 -9px #fff, -14px 7px 0 -9px #fff, 0 10px 19px #4b2b751f; }
  .game-feedback { margin-top: 5px; padding-inline: 10px; line-height: 1.65; }
  .parent-note { line-height: 1.8; text-align: center; }
  .overlay-card { border-radius: 28px; padding: 27px 19px; }
  .overlay-card h2 { font-size: 29px; }
  .overlay-card fieldset { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}