*{box-sizing:border-box}body{margin:0;font-family:system-ui,'Segoe UI',sans-serif;color:#1d3e5c;background:radial-gradient(circle at 90% 0,#ffe9b7,transparent 36%),linear-gradient(145deg,#e4f7ff,#e9e9ff)}#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{display:flex;align-items:center;gap:12px;min-height:65px;background:#ffffffd9;padding:8px clamp(10px,3vw,26px);box-shadow:0 3px 16px #19446b16}.brand{font-size:clamp(16px,2.4vw,25px);font-weight:1000;white-space:nowrap}.brand small{display:block;font-size:10px;color:#7290a4}#progress{display:flex;gap:5px;max-width:430px;flex:1;margin:auto}.pip{flex:1;height:12px;background:#cedde8;border-radius:20px}.pip.done{background:#28bd87}.pip.now{background:#ffbd4c}.tool{background:#fff;border:1px solid #d6e5ee;border-radius:15px;font-size:24px;width:47px;height:45px;cursor:pointer}main{flex:1;min-height:0;padding:clamp(7px,1.6vh,18px);display:flex;align-items:center;justify-content:center}.screen{height:100%;max-height:780px;width:min(1080px,100%);display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:6px}.tag{color:#3981a8;letter-spacing:.12em;font-size:clamp(11px,1.7vw,16px);font-weight:950;text-transform:uppercase}.headline{margin:0;font-size:clamp(25px,4.4vw,50px);font-weight:1000;line-height:1.06;text-align:center}.hint{margin:0;color:#54758d;font-size:clamp(13px,1.8vw,19px);font-weight:700;text-align:center}.listen,.play{border:0;border-radius:99px;font-weight:950;cursor:pointer}.listen{background:#2179b6;color:#fff;padding:10px 26px;font-size:clamp(16px,2vw,23px);box-shadow:0 5px #13517e}.play{background:#ffc34f;color:#183e60;padding:16px 52px;font-size:clamp(23px,3vw,32px);box-shadow:0 7px #da9230}.game{width:min(950px,100%);flex:1;min-height:0;max-height:430px;display:flex;align-items:stretch;justify-content:center;gap:clamp(7px,1.5vw,18px)}.tile{min-width:0;flex:1;position:relative;background:#fff;border:4px solid #fff;border-radius:24px;box-shadow:0 7px 0 #bfd7e5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;touch-action:manipulation}.tile img{display:block;max-width:94%;width:auto;height:auto;max-height:76%;object-fit:contain;border-radius:14px}.tile span{font-size:clamp(14px,2.2vw,24px);font-weight:950}.tile.good,.drop.good{border-color:#2ac88b;background:#edfff6}.tile.bad{border-color:#ef7892;background:#fff0f4}.tile.selected{border-color:#f8b52b;background:#fff8dc}.tile.closed img{filter:brightness(0);opacity:.16}.tile.closed:after{content:'?';position:absolute;color:#257cb2;font-size:clamp(50px,10vh,110px);font-weight:1000}.feedback{min-height:31px;color:#18835b;font-size:clamp(17px,2.4vw,26px);font-weight:1000;text-align:center}.feedback.error{color:#d9536d}.scene{position:relative;width:min(850px,100%);height:100%;border:7px solid #fff;border-radius:28px;background:linear-gradient(#cceeff 0 54%,#edd3ac 54% 100%);box-shadow:0 7px 0 #bfd7e5;overflow:hidden}.scene:after{content:'';position:absolute;left:9%;top:9%;width:26%;height:36%;border-radius:14px;background:linear-gradient(145deg,#a7d9ff,#f5fcff);border:12px solid #fff9;box-shadow:0 5px 15px #0001}.scene .object{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;z-index:2;width:24%;height:45%}.scene .object img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.scene .object:nth-child(1){left:8%;bottom:4%}.scene .object:nth-child(2){left:39%;bottom:9%}.scene .object:nth-child(3){right:6%;bottom:5%}.scene .object.good{outline:6px solid #2bc789;border-radius:25px}.scene .object.bad{outline:4px solid #ff7993;border-radius:25px}.tray,.targets{display:flex;gap:12px;width:min(900px,100%);min-height:0}.tray{height:43%}.targets{height:38%}.tray .tile img{max-height:75%}.drop{flex:1;background:#ffffffb0;border:4px dashed #8bbbd2;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:950;font-size:clamp(18px,3vw,28px);cursor:pointer}.drop:before{content:'↓';color:#5198b9;font-size:clamp(22px,4vw,40px)}.drop.active{border-color:#f1b23c;background:#fffae5}.memory{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:12px;width:min(830px,100%);height:100%}.memory .tile{border-radius:20px}.memory .tile img{max-height:78%}.sequence{display:flex;gap:12px;width:min(900px,100%);height:100%}.counter{border-radius:20px;background:#fff;padding:8px 22px;font-weight:1000;color:#357fa7}.hero{display:flex;gap:12px;justify-content:center;max-height:46%;width:100%}.hero img{height:100%;width:min(29%,240px);object-fit:contain;border-radius:20px}.trophy{font-size:clamp(80px,20vh,180px)}footer{font-size:11px;color:#7690a3;text-align:center;padding:5px}@media(max-height:620px){header{min-height:49px;padding:4px 12px}.screen{gap:3px}.game{max-height:50vh}.tile{border-radius:17px}.listen{padding:7px 24px}footer{display:none}}@media(max-width:600px){header{gap:6px}.brand{font-size:14px}.brand small{display:none}.tool{width:36px;height:38px;font-size:20px}.pip{height:8px}.game{gap:6px}.tile{border-radius:15px;border-width:2px}.tile span{font-size:13px}.scene .object{width:29%}.memory{gap:5px}}
