*{box-sizing:border-box}
:root{
 --bg:#f5f7fb;--card:#fff;--ink:#24304a;--muted:#71809a;--line:#dfe5ef;
 --accent:#5367d9;--good:#2fa86a;--good-bg:#ecfaf2;--bad:#e25555;--bad-bg:#fff0f0;
 --selected:#f2c94c
}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:Inter,Arial,sans-serif;color:var(--ink)}
button{font:inherit}
.game-shell{width:min(1400px,100%);margin:auto;padding:18px}
.game-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:800}
h1{font-size:clamp(22px,3vw,34px);margin:3px 0}
.primary-btn,.secondary-btn{border:0;border-radius:13px;padding:12px 17px;cursor:pointer;font-weight:800;touch-action:manipulation}
.primary-btn{background:var(--accent);color:#fff}
.secondary-btn{background:#fff;color:var(--ink);border:1px solid var(--line)}
.task-panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 5px 20px #2332500d;margin-bottom:16px}
.task-badge{display:inline-flex;background:#edf0ff;color:var(--accent);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}
.task-title{font-size:20px;font-weight:900;margin-top:7px}
.task-text{margin-top:5px;color:var(--muted);line-height:1.45}
.targets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.target{padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#fafbfe;font-size:14px;font-weight:800}

.play-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);gap:16px}
.pieces-area,.baskets-area{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px;min-width:0}
.area-title{font-weight:900;margin-bottom:10px}
.area-help{font-size:13px;color:var(--muted);margin:-4px 0 10px}
.pieces{
 position:relative;min-height:440px;border-radius:14px;
 background:linear-gradient(0deg,#8291aa14 1px,transparent 1px),linear-gradient(90deg,#8291aa14 1px,transparent 1px);
 background-size:28px 28px;overflow:hidden
}
.piece{
 position:absolute;width:62px;height:62px;display:flex;align-items:center;justify-content:center;
 cursor:pointer;user-select:none;-webkit-user-select:none;z-index:5;
 border-radius:12px;transition:transform .15s,filter .15s,box-shadow .15s,opacity .15s;
 touch-action:manipulation
}
.piece:hover{transform:scale(1.06)}
.piece.selected{
 transform:scale(1.16);z-index:50;
 box-shadow:0 0 0 4px #f2c94c55,0 10px 18px #24304a22;
 filter:drop-shadow(0 5px 5px #24304a22)
}
.piece svg{width:100%;height:100%;overflow:visible}

.baskets{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px}
.basket{
 min-height:185px;border:3px dashed #cbd3e2;border-radius:18px;background:linear-gradient(#fbfcff,#f5f7fb);
 display:flex;flex-direction:column;align-items:center;padding:10px;
 transition:.18s;position:relative;cursor:pointer;touch-action:manipulation
}
.basket:hover{border-color:#9da9c0}
.basket.target-ready{border-color:var(--accent);background:#f0f3ff;box-shadow:0 0 0 3px #5367d920}
.basket.correct{border-color:var(--good);background:var(--good-bg);animation:correctPop .28s}
.basket.wrong{border-color:var(--bad);background:var(--bad-bg);animation:shake .28s}
.basket-marker{
 width:58px;height:58px;display:flex;align-items:center;justify-content:center;
 margin:2px 0 5px;flex:0 0 auto
}
.basket-shape svg{width:100%;height:100%}
.basket-color{
 width:52px;height:52px;border-radius:50%;margin:4px 0 9px;
 background:var(--basket-color);border:3px solid #26334a38;
 box-shadow:inset 0 0 0 4px #ffffff55,0 3px 7px #24304a20
}
.basket-label{font-weight:900;font-size:15px}
.basket-count{font-size:12px;color:var(--muted);margin-top:3px}
.basket-inner{flex:1;width:100%;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;align-content:center}
.mini-piece{width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.mini-piece svg{width:100%;height:100%}

.message{min-height:30px;text-align:center;font-weight:900;padding:8px}
.message.good{color:var(--good)}
.message.bad{color:var(--bad)}
.bottom-actions{display:flex;justify-content:center;gap:10px;margin-top:5px}
.hint{margin:10px auto 0;max-width:760px;padding:12px 15px;background:#fff8d9;border:1px solid #f0dfa0;border-radius:12px;color:#6d5a14;text-align:center}
@keyframes shake{0%,100%{transform:translateX(0)}33%{transform:translateX(-6px)}66%{transform:translateX(6px)}}
@keyframes correctPop{50%{transform:scale(1.025)}}

@media(max-width:900px){
 .game-shell{padding:12px}
 .game-header{align-items:flex-start}
 .play-area{grid-template-columns:1fr}
 .pieces{min-height:420px}
 .basket{min-height:155px}
}
@media(max-width:560px){
 .game-header{gap:8px}
 h1{font-size:21px}
 .primary-btn{font-size:13px;padding:11px 13px}
 .task-panel{padding:13px}
 .task-title{font-size:18px}
 .pieces{min-height:360px;background-size:22px 22px}
 .piece{width:52px;height:52px}
 .baskets{grid-template-columns:1fr 1fr;gap:8px}
 .basket{min-height:135px;padding:8px;border-width:2px}
 .basket-marker{width:46px;height:46px}
 .basket-color{width:42px;height:42px;margin-bottom:6px}
 .basket-label{font-size:13px}
 .mini-piece{width:31px;height:31px}
 .area-help{font-size:12px}
}
@media(max-width:380px){
 .pieces{min-height:330px}
 .basket{min-height:125px}
 .piece{width:48px;height:48px}
 .basket-label{font-size:12px}
}

.win-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(20,28,48,.48);backdrop-filter:blur(4px)}
.win-overlay[hidden]{display:none}
.win-box{position:relative;width:min(390px,calc(100vw - 28px));background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 18px 22px;text-align:center;box-shadow:0 18px 55px rgba(25,35,60,.25);animation:winIn .28s ease-out}
.win-close{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;border-radius:50%;background:#f1f3f8;color:var(--ink);font-size:27px;line-height:1;cursor:pointer;z-index:2}
.win-alien{display:block;width:min(280px,75vw);height:auto;margin:2px auto 0;border-radius:18px;object-fit:contain}
.win-title{font-size:27px;font-weight:900;color:var(--accent);margin-top:2px}
.win-text{font-size:15px;color:var(--muted);margin:5px 0 15px}
@keyframes winIn{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:560px){.win-box{padding:14px 14px 18px}.win-alien{width:230px}.win-title{font-size:24px}}