.spell-player{--sp-ink:#33304f;--sp-primary:#7351bc;--sp-cream:#fff8ec;--sp-gap:12px;--sp-radius:24px;position:fixed;inset:0;margin:0;padding:0;border:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--sp-cream);color:var(--sp-ink);font-family:Fredoka,sans-serif}.spell-player *{box-sizing:border-box}.spell-player::backdrop{background:var(--sp-cream)}body:has(.spell-player[open]){overflow:hidden}.spell-shell{max-width:440px;min-height:100svh;margin:auto;padding:16px 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.spell-player button{font:500 18px Fredoka,sans-serif;border:0;min-height:72px;cursor:pointer;border-radius:var(--sp-radius);color:var(--sp-ink);touch-action:manipulation}.spell-player button:active{transform:scale(.95)}.spell-player button:focus-visible{outline:3px solid #7351bc;outline-offset:4px}.spell-player svg{width:28px;height:28px}.spell-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.spell-top button{width:72px;background:#ede3fa;display:grid;place-items:center;color:var(--sp-primary)}.spell-top strong{font-size:23px}.spell-progress{display:flex;gap:8px;margin-top:16px}.spell-progress span{height:8px;flex:1;background:#e9dff2;border-radius:20px}.spell-progress .lit{background:#7351bc}.spell-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 0 12px;gap:18px}.spell-kicker{font:11px Andika,sans-serif;letter-spacing:1px;margin:0;color:#696078}.spell-main h1{font:500 28px/1.2 Fredoka,sans-serif;margin:0;text-align:center}.spell-picture{position:relative;width:190px;height:176px;background:#e3f2e6;display:grid;place-items:center;border-radius:40px!important}.spell-picture>img{width:150px;height:150px;object-fit:contain;pointer-events:none}.spell-picture>span{position:absolute;bottom:0;right:-10px;display:grid;place-items:center;background:#7351bc;color:white;width:48px;height:48px;border-radius:50%}.spell-picture svg{width:24px;height:24px}.spell-slots,.spell-bank{display:flex;gap:var(--sp-gap);justify-content:center}.spell-slot{width:80px;height:84px;background:#f1e9df;box-shadow:inset 0 -4px 0 #d9cfc0;font:52px Andika,sans-serif!important}.spell-slot span{display:block;width:26px;height:4px;background:#c6b8a6;border-radius:8px;margin:auto}.spell-slot.filled{background:#d9eee2;color:#245d49;box-shadow:inset 0 -4px 0 #b7d8c7}.spell-instruction{font:13px/1.5 Andika,sans-serif;margin:0;text-align:center;color:#655d70}.spell-tile{width:80px;height:84px;font:52px Andika,sans-serif!important;box-shadow:0 5px 0 #32244c28;touch-action:none!important;user-select:none}.tile-0{background:#ffd481}.tile-1{background:#c9b6ef}.tile-2{background:#b8dfed}.spell-tile:disabled{visibility:hidden}.spell-tile.hint{outline:4px solid #7351bc;outline-offset:4px;animation:spell-pulse .7s ease-in-out 2}.spell-coach{display:flex;align-items:center;gap:12px;width:100%;margin-top:2px;min-height:68px}.spell-coach img{width:52px;height:60px;object-fit:contain}.spell-status{font:14px/1.5 Andika,sans-serif;margin:0}.spell-shell footer{margin-top:10px}.spell-next,.spell-hint{width:100%;display:flex;align-items:center;justify-content:center;gap:12px}.spell-next{background:#7351bc;color:white!important;box-shadow:0 5px 0 #52358e}.spell-hint{background:#efe5fa;color:#594285!important}.spell-player [hidden]{display:none!important}.spell-ghost{position:fixed;z-index:20;transform:translate(-50%,-50%);background:#ffd481;border-radius:20px;width:72px;height:80px;display:grid;place-items:center;font:50px Andika,sans-serif;pointer-events:none;box-shadow:0 8px 20px #3333}.spell-summary{align-items:center;justify-content:center;gap:24px;text-align:center}.spell-summary>img{width:180px;height:190px;object-fit:contain}.spell-summary h1,.spell-summary p{margin:0}.spell-stars{display:flex;gap:16px;color:#d69a15}.spell-stars svg{width:44px;height:44px}@keyframes spell-pulse{50%{transform:translateY(-6px)}}@media(max-height:760px){.spell-main{gap:12px;padding-top:16px}.spell-picture{width:160px;height:144px}.spell-picture>img{width:128px;height:128px}.spell-main h1{font-size:26px}}@media(max-width:350px){.spell-shell{padding-left:16px;padding-right:16px}.spell-slot,.spell-tile{width:76px}.spell-main h1{font-size:25px}}@media(prefers-reduced-motion:reduce){.spell-player *{animation:none!important;transition:none!important}}
.spell-player h1:focus{outline:none}
@media(max-height:760px){.spell-main{gap:8px}.spell-picture{height:136px}.spell-picture>img{height:120px}}

/* Shared toy glyph across choices, placed letters and drag preview. */
.spell-glyph{display:block;width:64px;height:74px;object-fit:contain;margin:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}.spell-tile,.spell-slot,.spell-ghost{display:grid;place-items:center;padding:0}.spell-slot.filled .spell-glyph{width:60px;height:70px}.spell-tile{border:2px solid #ffffffb0!important;box-shadow:0 5px 0 #b3a08b,inset 0 2px 0 #fff9}.spell-slot.filled{box-shadow:inset 0 -4px 0 #b7d8c7,inset 0 2px 0 #fff9}.spell-ghost .spell-glyph{width:60px;height:70px}