@font-face{font-family:Andika;font-weight:700;src:url(fonts/Andika-Bold.ttf)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#233e60;font-family:Andika,system-ui,sans-serif;color:#233e60;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
button{font-family:inherit;border:none;cursor:pointer;touch-action:manipulation;color:inherit}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
[hidden]{display:none!important}
svg.p{display:block}
/* home */
#home{background:linear-gradient(#fffef8,#fff5e4);overflow-y:auto}
.logo{text-align:center;font-weight:700;font-size:36px;line-height:1;padding:14px 0 4px}
.logo span{-webkit-text-stroke:1.5px #fff;paint-order:stroke fill;text-shadow:0 3px 0 #0005}
.r{color:#e8362f}.y{color:#ffd23f}
.logo .sub{font-size:21px;color:#233e60;margin-top:6px}
.mix{margin:10px auto 2px;display:block;font-size:22px;font-weight:700;background:#ffd23f;border-radius:30px;padding:12px 26px;box-shadow:0 4px 0 #c90}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:10px 12px 8px}
.tile{position:relative;border-radius:20px;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 0 #0002;min-height:118px}
.tile b{font-size:34px;line-height:1;color:#233e60}
.tile svg{width:66px;height:66px;background:#fff;border-radius:12px;margin-top:4px}
.tile .st{position:absolute;top:2px;right:6px;font-size:18px}
.foot{text-align:center;font-size:13px;padding:8px 0 16px}
/* bars */
.bar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px}
.ic{width:56px;height:56px;border-radius:16px;background:#ffffff22;font-size:28px;color:#fff;flex:0 0 auto}
.ic:active,.act:active,.opt:active,.play:active{transform:scale(.93)}
.ttl{font-size:44px;font-weight:700;color:#ffd23f;flex:1;text-align:center;line-height:1}
/* hub */
#hub{background:#233e60;color:#fff;overflow-y:auto}
.card{position:relative;margin:4px 14px;background:#fffef8;color:#233e60;border-radius:24px;padding:10px;display:flex;flex-direction:column;align-items:center;box-shadow:0 6px 18px #0005}
.bigpic svg{width:min(46vw,200px);height:min(46vw,200px)}
.kw{font-size:30px;font-weight:700;margin-top:2px}
.note{font-size:15px;text-align:center;margin-top:4px;color:#ac2f35}
.play{background:#ffd23f;border-radius:50%;box-shadow:0 4px 0 #c90}
.play.big{position:absolute;right:12px;top:12px;width:66px;height:66px;font-size:32px}
.play.playing,.ic.playing{animation:pulse .8s infinite}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;max-width:560px;width:100%;margin:0 auto}
.act{border-radius:22px;padding:12px 6px;font-size:19px;font-weight:700;color:#233e60;box-shadow:0 5px 0 #0004;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;justify-content:center}
.act span{font-size:36px;line-height:1}
.a1{background:#b9d7ff}.a2{background:#ffd23f}.a3{background:#9be7a0}.a4{background:#ffb3a7}
/* game */
#game{background:#233e60;color:#fff}
.stars{flex:1;text-align:center;font-size:28px;letter-spacing:1px;white-space:nowrap;overflow:hidden}
.stars i{font-style:normal;opacity:.25}.stars i.on{opacity:1}
.prompt{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 12px;min-height:36%}
.prompt .pc{background:#fff;border-radius:24px;padding:8px;box-shadow:0 6px 16px #0006}
.prompt .pc svg{width:min(44vw,34vh,210px);height:min(44vw,34vh,210px)}
.prompt .bigL{font-size:min(34vw,26vh,150px);font-weight:700;line-height:1.05;color:#ffd23f;text-shadow:0 5px 0 #0006;background:#ffffff14;border-radius:28px;padding:0 24px}
.prompt .hint{font-size:20px;margin-top:8px;color:#fff;text-align:center}
.opts{flex:1;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:14px;padding:8px 12px 18px;max-width:560px;width:100%;margin:0 auto}
.opt{background:#fffef8;color:#233e60;border-radius:24px;box-shadow:0 5px 0 #0005;display:flex;align-items:center;justify-content:center}
.opt.letter{width:min(28vw,140px);height:min(28vw,140px);font-size:min(17vw,84px);font-weight:700}
.opt.pic{width:min(28vw,150px);height:min(28vw,150px);padding:6px}
.opt.pic svg{width:100%;height:100%}
.opt.word{flex-direction:column;width:min(42vw,200px);padding:8px 6px 6px;font-size:22px;font-weight:700}
.opt.word svg{width:min(32vw,150px);height:min(32vw,150px)}
.opt.word small{font-size:13px;color:#ac2f35}
.opt.ok{background:#9be7a0;animation:pop .45s}
.opt.bad{animation:shake .45s;background:#ffd0ca}
.opt.dim{opacity:.35}
/* drag */
.board{display:flex;flex-direction:column;width:100%;height:100%;gap:10px}
.tray{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:110px;align-content:flex-start}
.drag{width:min(23vw,112px);height:min(23vw,112px);background:#fffef8;border-radius:20px;padding:5px;box-shadow:0 4px 0 #0005;touch-action:none;cursor:grab}
.drag svg{width:100%;height:100%;pointer-events:none}
.drag.lift{position:fixed;z-index:20;box-shadow:0 12px 24px #0008;transform:scale(1.08);pointer-events:none}
.bins{flex:1;display:flex;gap:10px}
.bin{flex:1;border:4px dashed #ffffff88;border-radius:24px;display:flex;flex-direction:column;align-items:center;padding:6px;min-height:170px;transition:background .15s}
.bin b{font-size:min(16vw,72px);color:#ffd23f;line-height:1.05}
.bin .got{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.bin .got svg{width:min(14vw,60px);height:min(14vw,60px);background:#fff;border-radius:12px;padding:2px}
.bin.over{background:#ffffff22;border-color:#ffd23f}
.bin.bad{animation:shake .45s}
/* done */
#done{background:linear-gradient(#fffef8,#fff1c9);align-items:center;justify-content:center}
.doneBox{text-align:center;padding:12px}
.doneBox img{height:min(40vh,300px);border-radius:24px;box-shadow:0 6px 14px #0003}
.doneTxt{font-size:44px;font-weight:700;color:#e8362f;margin-top:6px}
.doneStars{font-size:38px;margin:4px 0 12px;animation:pulse 1.2s infinite}
.row{display:flex;gap:14px;justify-content:center}
.row .act{width:150px}
#tapHint{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#233e60aa;z-index:30}
#tapHint span{font-size:64px;background:#ffd23f;border-radius:50%;width:140px;height:140px;display:flex;align-items:center;justify-content:center;animation:pulse 1s infinite;box-shadow:0 6px 0 #c90}
#fx{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-size:90px;z-index:25;pointer-events:none;animation:burst .8s forwards}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes pop{40%{transform:scale(1.15)}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}
.mini{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:40px;font-weight:700;padding:20px 60px 6px 10px;color:#233e60}
.mini span{background:#fff1b8;border-radius:16px;padding:2px 10px}