/* Reference direction: soft clay toys, front faces, quiet pastel studio. */
:root{--ink:#513c53;--muted:#806b83;--plum:#79558f}
body,body[data-challenge="easy"]{background:radial-gradient(ellipse at 48% 26%,#f6dfe1 0,transparent 60%),#deb0bb}
body[data-challenge="medium"]{background:radial-gradient(ellipse at 48% 26%,#eee2f3 0,transparent 60%),#c7b3d5}
body[data-challenge="hard"]{background:radial-gradient(ellipse at 48% 26%,#e6eddb 0,transparent 60%),#b4c6ae}
body[data-challenge="full"]{background:radial-gradient(ellipse at 48% 26%,#f5ecd9 0,transparent 60%),#ddc6a8}
#main{max-width:560px;padding:0 24px 24px}.game-top{height:76px;gap:12px}.play-brand{color:#60445d;text-shadow:none}.round-icon{border:0;background:#ffffff35;box-shadow:none}.top-points{background:#f5dd9f;box-shadow:inset 0 2px 3px #fff6,0 3px 6px #73543615}.stage{padding:8px 0 0}.stage-title>span{border:0;background:none;padding:0;color:#866c7c;font-size:10px;letter-spacing:2.1px}.stage-title h1{color:#60445d;text-shadow:none;font-size:30px;margin:9px 0 5px}.stage-title p{color:#806777;font-size:12px}.pyramid{--tile:61px;padding:32px 0 25px;min-height:0;gap:12px;perspective:none;overflow:visible;isolation:isolate}.pyramid[data-layers="5"]{--tile:58px}.pyramid[data-layers="6"]{--tile:53px}.pyramid[data-layers="7"]{--tile:47px}.pyramid[data-layers="8"]{--tile:42px}.pyramid-row{gap:9px;transform-style:flat;border-radius:12px;animation:front-float 3.9s ease-in-out infinite;animation-delay:calc(var(--row-index)*-.35s)}.pyramid.arrive .pyramid-row{animation:front-arrive .65s cubic-bezier(.2,.8,.3,1) both,front-float 3.9s .8s ease-in-out infinite;animation-delay:calc(var(--row-index)*70ms),calc(var(--row-index)*-.35s)}
.tile{display:block;position:relative;border:0;border-radius:24%;background:linear-gradient(135deg,#f7d789,#efbf65);box-shadow:inset 3px 4px 6px #fff7,inset -3px -4px 6px #a9783d36,0 6px 8px #6e4b6222;font:600 calc(var(--tile)*.46) var(--display);transform:translate(var(--follow-x,0px),var(--follow-y,0px));will-change:transform}.cube-front{position:absolute;inset:0;display:grid;place-items:center;transform:none;background:none;border:0;border-radius:inherit;color:#654c38}.cube-top,.cube-right{display:none}.tile.unknown{border:0;border-radius:24%;background:linear-gradient(135deg,#e8deef,#cec0de);box-shadow:inset 3px 4px 6px #fff7,inset -3px -4px 6px #71568924,0 6px 8px #6e4b6222}.tile.unknown .cube-front{color:#9c82ae}.active-row .tile.unknown{background:linear-gradient(135deg,#e8deef,#cec0de);border:0}.tile.entered{background:linear-gradient(135deg,#b89ad1,#9c7abc);border:0;box-shadow:inset 3px 4px 6px #fff5,inset -3px -4px 6px #62437544,0 6px 8px #6e4b6222}.tile.entered .cube-front{color:#fffaf3}.tile.correct{background:linear-gradient(135deg,#d7e9a4,#b7d484);border:0}.tile.correct .cube-front{color:#55703c}.tile.used{opacity:.65}.row-number{left:-21px;color:#917d92}.pyramid-base{display:none}.pyramid.celebrate .tile.correct{animation:none}.pyramid.celebrate .pyramid-row{animation:front-win .8s both,front-float 3.9s 1s infinite;animation-delay:calc(var(--row-index)*70ms),1s}
.clay-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.pyramid.webgl-ready .pyramid-row{animation:none!important;transform:none!important}.webgl-ready .tile{background:none!important;border:0!important;box-shadow:none!important;transform:none!important;opacity:1}.webgl-ready .cube-front{visibility:hidden}.webgl-ready .tile:after{content:'';position:absolute;left:12%;right:12%;bottom:-6px;height:8px;border-radius:50%;background:#63485f22;filter:blur(5px);z-index:-1}.webgl-ready .tile.used:after{opacity:.55}
.stage-bottom{height:28px;margin:0 0 14px;justify-content:center}.mascot-mini{width:56px;height:56px;left:9px;bottom:-3px}.mascot-mini img{width:56px;height:56px}.mascot-mini span{display:none}.touch-note{font-size:11px;color:#95798c;margin:0}.round-bubble{display:none}.game-controls{max-width:400px;margin:auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none}.hint-box{background:none;padding:0 0 12px;margin:0;gap:7px;color:#7f6576;font-size:12px;justify-content:center;line-height:1.5}.hint-box>span{font-size:16px}.input-label{font-size:11px;color:#897080;margin:0 0 6px}.answer-wrap{gap:7px}.answer-wrap input{height:44px;background:#ffffff35;border:0;border-radius:12px;box-shadow:inset 0 2px 3px #654b5910;font-size:22px;color:#614760}.answer-wrap input::placeholder{color:#977e90}.erase{height:44px;background:none;border:0;font-size:20px;color:#846c80}.letter-caption{margin:11px 0 7px;color:#967c8d;font-size:9px}.letter-rack{gap:7px;flex-wrap:wrap;margin-bottom:15px}.letter-btn{width:37px;height:40px;border:0;border-radius:11px;background:linear-gradient(135deg,#f5e4b9,#ecd398);box-shadow:inset 2px 2px 3px #fff6,inset -2px -3px 3px #a7864824,0 3px 4px #69475b14;font-size:18px;color:#7c6240}.letter-btn small{color:#a28b65}.letter-btn:disabled{opacity:.32}.actions{justify-content:center}.actions .primary{flex:1;max-width:310px;background:#a083b2;box-shadow:inset 0 2px 3px #fff2,0 4px 0 #80688e;color:#fffaf5;border:0;padding:13px;font-size:15px}.actions .secondary{background:#ffffff25;border:0;box-shadow:none;color:#846d87;padding:12px}.controls-bottom{justify-content:center;margin-top:13px}.controls-bottom .text-button{font-size:10px;color:#967e90}.level-dock{justify-content:center;padding:19px 0 0;gap:22px}.level-dock button{border:0;background:none;border-radius:0;padding:5px 0;color:#82687e;font-size:12px;box-shadow:none}.dock-mode{font-size:12px!important}.level-dock button:hover{background:none;color:#614760}.feedback{background:#ffffff30;padding:14px;text-align:center;color:#7b5c48;margin-bottom:13px}.feedback.success{background:#eff6d445;color:#5e773e}.feedback h3{font-size:24px}.meaning-list{justify-content:center}.meaning-list span{background:#ffffff35;font-size:11px}.movement-toggle{margin-top:18px}.settings-dialog{background:#faf3f6}.settings-dialog .setting-note{line-height:1.7}.game-top .quiet-note{display:none}
@keyframes front-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes front-arrive{from{opacity:0;transform:translateY(-65px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes front-win{0%,100%{transform:translateY(0)}40%{transform:translateY(-17px)}65%{transform:translateY(2px)}}
body[data-movement="off"] .pyramid-row,body[data-movement="off"] .pyramid.arrive .pyramid-row,body[data-movement="off"] .pyramid.celebrate .pyramid-row,body[data-movement="off"] .mascot-mini img,body[data-movement="off"] .menu-mascot{animation:none!important}.pyramid.interacting .pyramid-row{animation-play-state:paused}
@media(max-width:500px){#main{padding:0 20px 22px}.game-top{height:65px}.stage{padding-top:5px}.stage-title h1{font-size:27px}.pyramid{--tile:clamp(46px,13vw,58px);padding:29px 0 24px;gap:10px}.pyramid[data-layers="5"]{--tile:clamp(40px,11vw,49px)}.pyramid[data-layers="6"]{--tile:clamp(34px,9.5vw,43px)}.pyramid[data-layers="7"]{--tile:clamp(29px,8.2vw,37px)}.pyramid[data-layers="8"]{--tile:clamp(25px,7.1vw,33px)}.pyramid-row{gap:7px}.stage-bottom{margin-bottom:12px}.game-controls{padding:0}.hint-box{font-size:11px}.letter-btn{width:35px;height:38px}.letter-rack{gap:6px}.level-dock{gap:19px}.row-number{left:-17px;font-size:9px}.mascot-mini{left:1px}.touch-note{font-size:10px}}
@media(min-width:750px){#main{max-width:560px}.game-top{height:88px}.stage-title h1{font-size:32px}.pyramid{padding-top:38px;padding-bottom:29px}.stage-bottom{margin-bottom:20px}.game-controls{padding:0}}
