*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;font-family:"Courier New",ui-monospace,monospace;font-weight:900;color:#222;
background:linear-gradient(#7ec8ff 0 70%,#3fae3f 70% 72%,#8b5a2b 72%);overflow:hidden;touch-action:manipulation}
#top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#2b8a3e;border-bottom:6px solid #1b5e27;color:#fff}
#ttl{flex:1;font-size:clamp(18px,4vw,30px);letter-spacing:3px;text-shadow:3px 3px 0 #1b5e27}
#wallet{display:flex;gap:14px;font-size:clamp(18px,3.5vw,26px)}
.ib,.btn{font:inherit;border:0;cursor:pointer;background:#ffd43b;color:#222;box-shadow:inset -5px -5px 0 rgba(0,0,0,.25),inset 5px 5px 0 rgba(255,255,255,.4);border-radius:0}
.ib{width:56px;height:56px;font-size:28px}
.btn{padding:14px 22px;font-size:clamp(20px,3.5vw,30px);min-height:64px;min-width:64px}
.btn:active,.ib:active,.blk:active{transform:translateY(3px)}
#main{height:calc(100% - 78px);overflow:auto;padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.map{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;width:100%;max-width:1000px}
.lvl{position:relative;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;font-size:clamp(16px,2.6vw,22px);color:#fff;text-shadow:2px 2px 0 #000}
.lvl .ic{font-size:44px;text-shadow:none}.lvl .st{font-size:18px}
.lvl.lock{filter:grayscale(1) brightness(.7)}.lvl.lock::after{content:"🔒";position:absolute;top:6px;right:8px;font-size:30px}
.prompt{display:flex;align-items:center;gap:12px;background:#fff;padding:10px 16px;box-shadow:6px 6px 0 rgba(0,0,0,.3);font-size:clamp(22px,4.5vw,40px);max-width:100%;flex-wrap:wrap;justify-content:center}
.spk{width:80px;height:80px;font-size:42px;background:#4dabf7}
.mic{width:80px;height:80px;font-size:38px;background:#ff8787}
.it{font-size:clamp(14px,2.4vw,18px);color:#555;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;width:100%;max-width:900px}
.blk{min-height:130px;font-size:clamp(28px,6vw,56px);display:flex;align-items:center;justify-content:center;flex-direction:column;border:0;font-family:inherit;font-weight:900;cursor:pointer;
box-shadow:inset -8px -8px 0 rgba(0,0,0,.25),inset 8px 8px 0 rgba(255,255,255,.35);background:#fff;color:#222;touch-action:none}
.blk small{font-size:clamp(14px,2.5vw,20px)}
.ok{animation:pop .4s}.no{animation:shake .4s}
@keyframes pop{50%{transform:scale(1.15)}}@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.bar{width:100%;max-width:900px;height:20px;background:#555;box-shadow:inset 3px 3px 0 #000}.bar i{display:block;height:100%;background:#ffd43b;transition:width .3s}
#toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(0);font-size:80px;transition:transform .2s;pointer-events:none;z-index:9}
#toast.on{transform:translate(-50%,-50%) scale(1)}
.chip{padding:14px 26px;font-size:clamp(26px,5vw,44px);background:#ffd43b;box-shadow:inset -6px -6px 0 rgba(0,0,0,.25);touch-action:none;position:relative;z-index:5}
.card{min-height:110px;font-size:clamp(20px,4vw,40px)}.card.back{background:#2b8a3e;color:#2b8a3e}
.face{width:220px;height:220px}
.slots{display:flex;gap:8px;min-height:80px;flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.5);padding:8px;width:100%;max-width:900px}
.slots .blk,.words .blk{min-height:70px;padding:0 18px;font-size:clamp(22px,4.5vw,38px)}
.words{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
canvas{background:#7ec8ff;max-width:100%;touch-action:none;box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.mascot{width:120px;height:120px}
.end{background:#fff;padding:20px;text-align:center;box-shadow:8px 8px 0 rgba(0,0,0,.3);font-size:clamp(22px,4vw,34px)}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.vb{display:flex;align-items:flex-end;gap:2px}
.a-jump{animation:jmp .6s infinite}@keyframes jmp{50%{transform:translateY(-16px)}}
.a-run{animation:rn .3s infinite}@keyframes rn{50%{transform:translateX(8px) skewX(-8deg)}}
.a-sleep{transform:rotate(-90deg)}
.a-dance{animation:dn .5s infinite}@keyframes dn{25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.a-swim{animation:sw 1s infinite}@keyframes sw{50%{transform:translateY(8px) rotate(10deg)}}
.a-clap,.a-wave{animation:cl .4s infinite}@keyframes cl{50%{transform:scaleX(.9)}}
.wtab{min-width:160px}