@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap');
:root{color-scheme:dark;font-family:Nunito,ui-rounded,system-ui,sans-serif;color:#fff5e1;background:#251044}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:linear-gradient(180deg,#251044bb,#1b0d36ee),url('./sky.webp') center/cover fixed;padding:max(16px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom));}main{width:100%;max-width:420px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.brand{display:flex;gap:10px;align-items:center}.hat{font-size:42px;color:#ffc965}h1{font-size:30px;letter-spacing:-1.3px;line-height:1;margin:0;font-weight:900}.brand small{font-size:12px;color:#cbbce0}button{font:800 15px Nunito,system-ui;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.icon{width:42px;height:42px;border:1px solid #735696;border-radius:50%;background:#ffffff0c;color:#ffe2a5;font-size:24px}.stats{display:flex;justify-content:space-between;background:#ffffff08;border:1px solid #ffffff16;border-radius:16px;padding:12px 16px;text-align:center}.stats small{font-size:9px;font-weight:800;letter-spacing:1px;color:#c8b4dd}.stats strong{display:block;font-size:25px}.clock{margin:16px 0 12px}.clock>div:first-child{display:flex;align-items:center;justify-content:space-between}#timer-label{font-size:10px;letter-spacing:1.4px;font-weight:900;color:#cebee0}#timer{font-size:28px;line-height:1.3}#timer span{font-size:13px;margin-left:2px;color:#cdbce0}.track{height:6px;background:#ffffff16;border-radius:9px;overflow:hidden;margin-top:6px}#bar{height:100%;width:100%;background:#6be1c8;border-radius:9px;transition:width .1s linear}#bar.urgent{background:#ff896f}.board-wrap{position:relative;background:#160925;border:2px solid #87609e;border-bottom:6px solid #5a3676;border-radius:22px;padding:12px;box-shadow:0 8px 28px #11051e77,inset 0 0 20px #0005}.corners{position:absolute;right:12px;top:-17px;color:#ffe1a2;font-size:27px}#board{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.cube{aspect-ratio:1;border:0;border-radius:12px;background:linear-gradient(#fff2d8,#efdab2);color:#38204a;border-bottom:5px solid #b99c76;box-shadow:0 3px 0 #0003;font-weight:900;font-size:clamp(23px,7vw,33px);position:relative;transition:transform .1s}.cube.selected{background:linear-gradient(#8ce9d5,#57c7b2);border-color:#288e80;transform:translateY(3px)}.cube.selected:after{content:attr(data-order);position:absolute;font-size:10px;top:4px;right:6px;color:#235349}.cube.empty{background:#ffffff05;border:1px dashed #ffffff14;box-shadow:none}.cube.mystery{background:linear-gradient(#ffd976,#edac42);border-color:#ac742d;font-size:30px}.cube.fall{animation:fall .55s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--delay)}@keyframes fall{0%{transform:translateY(-90px) rotate(-12deg);opacity:0}75%{transform:translateY(3px) rotate(2deg);opacity:1}100%{transform:translateY(0);opacity:1}}.spell{margin-top:16px;text-align:center}.spell>small{font-size:9px;letter-spacing:2px;color:#bba4d1;font-weight:900}#word{font-size:24px;min-height:39px;font-weight:900;letter-spacing:3px;overflow-wrap:anywhere}#word.placeholder{font-size:13px;letter-spacing:0;color:#b9a3d0;padding-top:8px}.actions{display:grid;grid-template-columns:1fr 1.8fr 1fr;gap:8px;margin-top:8px}.primary{border:0;border-bottom:4px solid #c1873a;border-radius:13px;background:#ffd17e;color:#382044;padding:13px 9px}.primary:disabled{opacity:.45;cursor:default}.secondary{border:1px solid #73528e;background:#ffffff07;border-radius:12px;color:#e7d5f8;padding:10px 4px;font-size:12px}#feedback{text-align:center;font-size:13px;min-height:20px;margin:16px 0 3px;color:#dfceef}#bonus{text-align:center;font-size:12px;color:#ffdc88;min-height:18px;margin:0}.text-button{display:block;margin:9px auto;background:none;border:0;color:#b9a3d0;font-size:12px;text-decoration:underline;padding:8px}footer{text-align:center;font-size:10px;color:#9a83b4;line-height:1.6}.overlay{position:fixed;inset:0;background:#130920d9;backdrop-filter:blur(8px);display:grid;place-items:center;padding:22px;z-index:10}.overlay.hidden{display:none}.card{width:100%;max-width:360px;border:1px solid #9066b4;background:radial-gradient(ellipse at top,#53316e,#27123e 75%);border-radius:26px;text-align:center;padding:28px 25px;box-shadow:0 25px 80px #0006}.big-hat{font-size:60px;color:#ffd17e;line-height:1}.eyebrow{font-size:9px;letter-spacing:2px;color:#d1b4eb;font-weight:900}h2{font-size:35px;font-weight:900;line-height:1.07;margin:15px 0;letter-spacing:-1px}.card>p{font-size:14px;color:#ddcdea;line-height:1.6}.rules{display:grid;gap:10px;text-align:left;font-size:12px;margin:24px 0;color:#e9d8f5}.card .primary{width:100%;font-size:17px}.card p.fine{font-size:10px;color:#b69cc8;margin-bottom:0}button:focus-visible{outline:3px solid #7de8d2;outline-offset:3px}@media(max-height:740px){header{margin-bottom:10px}.stats{padding:8px 14px}.clock{margin:10px 0}.board-wrap{padding:9px}#board{gap:7px}.spell{margin-top:10px}#feedback{margin-top:10px}footer{font-size:9px}}@media(prefers-reduced-motion:reduce){.cube.fall{animation:none}.cube,#bar{transition:none}}

.header-tools{display:flex;gap:8px}.game-nav,.welcome-nav{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.game-nav .text-button,.welcome-nav .text-button{margin:0;padding:9px 4px}.panel-card{max-height:calc(100dvh - 44px);overflow:auto;text-align:left}.panel-close{display:block;margin-left:auto;min-height:44px;padding:10px 20px}.panel-card h2{font-size:29px}.setting-row{padding:18px 0;border-bottom:1px solid #ffffff20}.setting-row label{display:block;font-weight:800;margin-bottom:10px}.setting-row select{width:100%;background:#231038;color:#fff5e1;border:1px solid #9670b7;border-radius:10px;padding:12px;font:inherit}.setting-row input{width:22px;height:22px;vertical-align:middle;accent-color:#ffd17e}.panel-card p,.panel-card li{font-size:15px;line-height:1.65;color:#e4d4ef}.panel-card ol{padding-left:22px}.panel-card li{margin-bottom:13px}.panel-card .fine{font-size:12px;color:#c2a8d5}.panel-card .primary{margin-top:16px}.upgrade-badge{display:inline-block;background:#ffd17e;color:#382044;border-radius:20px;padding:7px 12px;font-size:12px;font-weight:900}.panel-card [disabled]{cursor:default;opacity:.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}

/* Keep word submission within the visible mobile viewport, including Safari chrome. */
@media(max-width:600px){
 body{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:calc(155px + env(safe-area-inset-bottom));}
 header{margin-bottom:8px}.hat{font-size:32px}h1{font-size:26px}
 .stats{padding:7px 12px}.stats strong{font-size:23px}
 .clock{margin:8px 0}.board-wrap{width:min(100%,calc(100dvh - 350px));margin-inline:auto;padding:8px;border-radius:16px}
 #board{gap:6px}.cube{font-size:clamp(20px,6vw,30px);border-radius:9px}
 .spell{position:fixed;left:0;right:0;bottom:0;z-index:5;margin:0;padding:9px max(14px,calc((100vw - 420px)/2)) calc(10px + env(safe-area-inset-bottom));background:#27123ef5;border-top:1px solid #9670b7;box-shadow:0 -8px 24px #13092066;}
 #word{min-height:32px;font-size:22px;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #word.placeholder{padding:0;font-size:13px}.actions{margin-top:5px;gap:7px}.actions button{min-height:48px}
 #feedback{margin:10px 0 3px}.game-nav{gap:10px}.text-button{margin:3px auto}
 .overlay{overflow:auto}.card{max-height:calc(100dvh - 44px);overflow:auto}
}
@media(max-width:600px){#board{grid-template-columns:repeat(4,minmax(0,1fr))}.cube{min-width:0;min-height:0;padding:0}.cube.mystery{font-size:22px}}

#board{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:600px){#board{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.cube{font-size:clamp(16px,5vw,27px)}.cube.mystery{font-size:20px}}

#submit{background:#fff;color:#251044;border:3px solid #b88cdb;border-bottom:5px solid #9670b7;font-size:16px;font-weight:900;box-shadow:0 0 0 2px #251044,0 3px 12px #0005}
#submit:disabled{opacity:1;background:#fff;color:#74647e;border-color:#8d7c9b;box-shadow:none}
.actions[hidden],#board-play[hidden],#announcement[hidden]{display:none}
#board-play{width:100%;min-height:50px;background:#fff;border:3px solid #b88cdb;color:#251044;margin-top:5px}
.cube.face-down{background:linear-gradient(135deg,#9871bb,#573573);border-color:#3b2056;box-shadow:inset 0 0 0 2px #b699cb66,0 3px 0 #0003}
#announcement{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#27123ef5;border-radius:16px;padding:20px;text-align:center;color:#fff;font-size:clamp(17px,5vw,23px);font-weight:900;line-height:1.4}
.cube.flip{animation:cube-flip .6s ease both;animation-delay:calc(var(--delay) / 3)}
@keyframes cube-flip{0%{transform:rotateY(90deg);opacity:.3}100%{transform:rotateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.cube.flip{animation:none}}

.spell #feedback{margin:0 0 2px;min-height:34px;line-height:17px;font-size:12px}.spell #bonus{min-height:16px;line-height:16px;font-size:11px;margin-bottom:3px}
@media(max-width:600px){.board-wrap{width:min(100%,calc(100dvh - 410px))}}

#wizard-prize[hidden]{display:none}
#wizard-prize{position:absolute;z-index:4;left:5px;right:5px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;padding:15px 12px;border:3px solid #ffdb8d;border-radius:18px;background:#fff5e8;color:#321946;box-shadow:0 8px 30px #160925aa;animation:prize-pop .3s ease-out}
.prize-wizard{font-size:55px;line-height:1.2;flex-shrink:0}
#prize-title{display:block;font-size:14px;line-height:1.3}#prize-message{font-size:18px;font-weight:900;line-height:1.3;margin:7px 0 0}
@keyframes prize-pop{from{opacity:0;transform:translateY(-35%) scale(.85)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){#wizard-prize{animation:none}}

.welcome-mascot{height:144px;display:flex;align-items:center;justify-content:center}.welcome-mascot img{width:150px;height:150px;filter:drop-shadow(0 8px 8px #12082044);animation:wizi-float 3s ease-in-out infinite}
#overlay .card{padding-top:15px}#overlay h2{font-size:29px;margin:12px 0;color:#fff4d6}#overlay .rules{margin:16px 0;gap:8px}
.prize-wizard{width:75px;height:75px;object-fit:contain;flex-shrink:0}
@keyframes wizi-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@media(max-height:650px){.welcome-mascot{height:106px}.welcome-mascot img{width:115px;height:115px}#overlay .card{padding:12px 20px}#overlay h2{font-size:25px}#overlay .card>p{margin:8px 0;font-size:12px}}
@media(prefers-reduced-motion:reduce){.welcome-mascot img{animation:none}}

/* Explicit equal rows prevent blank and populated buttons sizing differently in Safari. */
#board{aspect-ratio:1;grid-template-rows:repeat(5,minmax(0,1fr));align-items:stretch}
#board .cube{width:100%;height:100%;aspect-ratio:auto;min-width:0;min-height:0;line-height:1;padding:0}
.cube.fall{animation-fill-mode:backwards}.cube.flip{animation-fill-mode:backwards}

#intro[hidden]{display:none}#intro{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#724592,#27123e 65%);color:#fff4d6}
.intro-scene{width:min(90vw,370px);text-align:center;animation:intro-away .65s ease 2.7s both}
.intro-character svg{width:min(70vw,290px);height:auto;overflow:visible;filter:drop-shadow(0 15px 12px #16092566);animation:intro-chuckle .28s ease-in-out .3s 5}
.intro-wand{transform-origin:164px 166px;animation:intro-wave .55s ease-in-out .8s 3}
#intro-title{font-size:42px;margin:5px 0}#intro-caption{font-size:15px;line-height:1.4;margin:10px 0}
.intro-laugh{font-size:24px;font-weight:900;color:#ffdf8a;margin:0;animation:intro-ha 1.5s ease .2s both}
.intro-controls{position:absolute;z-index:4;bottom:max(22px,env(safe-area-inset-bottom));left:18px;right:18px;display:flex;justify-content:center;gap:14px}.intro-controls button{min-height:44px;padding:10px 15px;background:#27123ecc}
.intro-smoke{position:absolute;inset:0;pointer-events:none}.intro-smoke i{position:absolute;left:calc(50% + (var(--p) - 3.5)*8vw);top:calc(45% + (var(--p) - 3.5)*3vh);width:42vmax;height:42vmax;margin:-21vmax;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9ed,#dfc9f0 55%,#b598d2 75%);opacity:0;animation:intro-puff 1.5s ease-in-out calc(2.45s + var(--p)*.035s) both;box-shadow:0 0 50px #e8d6f4}
@keyframes intro-chuckle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes intro-wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-24deg)}70%{transform:rotate(12deg)}}
@keyframes intro-ha{0%{opacity:0;transform:scale(.7)}20%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes intro-away{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}
@keyframes intro-puff{0%{opacity:0;transform:scale(.05)}20%{opacity:1}50%{opacity:1;transform:scale(1.8)}100%{opacity:0;transform:translateY(15vh) scale(2.4)}}
@media(prefers-reduced-motion:reduce){#intro *{animation:none!important}}
#intro{animation:intro-dissolve .85s ease 3.45s both}
@keyframes intro-dissolve{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#intro{animation:none}}

/* Gravity follows the real source row, including surviving tiles above a gap. */
.cube.fall{animation:stack-fall .52s cubic-bezier(.22,.72,.25,1) both;animation-delay:var(--delay,0ms)}
@keyframes stack-fall{0%{transform:translateY(var(--fall-distance));opacity:.55}76%{transform:translateY(3px);opacity:1}90%{transform:translateY(-2px)}100%{transform:translateY(0);opacity:1}}
.board-wrap{overflow:hidden}.corners{display:none}.cube.mystery{font-size:22px;text-shadow:0 1px #fff8;box-shadow:inset 0 0 0 2px #ffe5a1,0 3px 0 #0003}
.spell-progress{margin:12px 0;padding:11px 14px;background:#1c102dbb;border:1px solid #9b75b84d;border-radius:14px}
.spell-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:12px}.spell-progress strong{color:#92e7d5}.spell-progress span{color:#ffe0a0}
.rune-track{height:5px;border-radius:5px;background:#ffffff16;margin-top:8px;overflow:hidden}.rune-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b598ff,#ffcf74);transition:width .35s ease}
.spell-progress p{font-size:10px;color:#c5b4db;margin:7px 0 0;line-height:1.35}
#resume-run[hidden]{display:none}#resume-run{margin-bottom:12px;background:#9be6d2;border-color:#52aa96}#resume-run:not([hidden])+#start{background:transparent;color:#e3caed;border:1px solid #8a64a6;font-size:14px}
@media(min-width:800px){
 body{padding:32px 28px}main{max-width:890px;display:grid;grid-template-columns:minmax(350px,480px) minmax(250px,320px);gap:12px 32px;align-items:start}
 header{grid-column:1/-1;margin-bottom:12px}.brand h1{font-size:38px}.brand small{font-size:14px}.stats{grid-column:2;grid-row:2;margin:0}.clock{grid-column:1;grid-row:2;margin:0}
 .board-wrap{grid-column:1;grid-row:3/8;width:100%;margin:0;padding:14px}#board{gap:9px}.cube{font-size:34px}
 .spell-progress{grid-column:2;grid-row:3;margin:0;padding:15px}.spell-progress p{font-size:12px;line-height:1.5}
 .spell{grid-column:2;grid-row:4;margin-top:0;background:#1c102dcc;border:1px solid #ffffff25;border-radius:18px;padding:18px 14px}.spell #feedback{min-height:44px;font-size:14px;line-height:21px}.spell #bonus{min-height:20px;margin:10px 0}#word{margin:10px 0;font-size:23px}.actions{grid-template-columns:1fr 1fr}#submit{grid-column:1/-1;grid-row:1;min-height:52px}#undo,#clear{min-height:42px}
 .game-nav{grid-column:2;grid-row:5;gap:8px}#restart{grid-column:2;grid-row:6;margin:0}footer{grid-column:1/-1;font-size:11px;margin-top:4px}
}
@media(max-width:600px){.spell-progress{margin:7px 0;padding:8px 10px}.spell-progress p{margin-top:4px}.board-wrap{width:min(100%,calc(100dvh - 475px))}.rune-track{margin-top:5px}.cube.mystery{font-size:clamp(14px,4vw,22px)}}
@media(max-width:600px) and (max-height:700px){.brand small,.spell-progress p{display:none}.board-wrap{width:min(100%,calc(100dvh - 430px))}.spell-progress{padding:6px 8px}.spell-progress>div:first-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cube.fall{animation:none}.rune-track i{transition:none}}
/* Give the letters useful tap areas without pushing submission below the fold. */
@media(max-width:600px){
 .spell>small{display:none}.spell #bonus:empty{display:none}.spell #feedback{min-height:30px;line-height:15px}
 #word{min-height:30px;line-height:30px}.actions button{padding:9px 4px;min-height:48px}#submit{font-size:15px}
 .board-wrap{width:min(100%,calc(100dvh - 405px))}
}
@media(max-width:600px) and (max-height:700px){
 .stats{padding:5px 10px}.stats strong{font-size:20px}.clock{margin:6px 0}#timer{font-size:24px}
 .board-wrap{width:min(100%,calc(100dvh - 385px))}
}

/* Earned board transitions and the occasional anagram challenge. */
.chapter-card{max-width:460px;text-align:center}.chapter-star{display:block;font-size:72px;color:#e6b343;line-height:1.2}.chapter-note{padding:16px;border-radius:16px;background:#f1e6fc;color:#4e256e!important}.bonus-round .cube:not(.empty):not(.face-down):not(.mystery){background:linear-gradient(145deg,#fff6c9,#f6d374);border-color:#dba940;color:#493019}.bonus-round .cube.selected{background:#623398!important;color:white!important}