:root { --sky:#17a3dd; --sky-deep:#078cc9; --ink:#13222d; --yellow:#ffc719; --green:#35bf52; --blue:#35aee8; --red:#ed5346; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:white; background:#ecf6fb; font-family:"Baloo 2", "Nunito", sans-serif; }
button { font:inherit; border:0; cursor:pointer; }
.app-shell { width:min(100%, 430px); min-height:100vh; margin:auto; overflow-x:hidden; position:relative; background:linear-gradient(160deg, #1dafe9 0%, var(--sky) 60%, #0794d2 100%); padding:22px 24px 32px; }
.topbar { height:48px; display:flex; align-items:center; justify-content:space-between; }
.circle-button { width:43px; height:43px; border-radius:50%; color:#64747b; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.13); font-size:31px; line-height:38px; font-family:Arial,sans-serif; }
.pro-toggle { display:flex; align-items:center; gap:7px; color:#d9f3ff; background:transparent; font:900 13px Nunito,sans-serif; }
.pro-toggle i { width:34px; height:20px; padding:3px; border-radius:12px; background:rgba(0,71,111,.45); box-shadow:inset 0 1px 2px rgba(0,0,0,.22); }
.pro-toggle i::after { content:""; display:block; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .18s ease; }
.pro-toggle.active { color:#fff3b0; }
.pro-toggle.active i { background:#ffc719; }
.pro-toggle.active i::after { transform:translateX(14px); }
h1 { margin:27px 0 20px; text-align:center; font-size:31px; line-height:1; letter-spacing:-.7px; text-shadow:0 3px 0 rgba(0,99,154,.22); }
.progress-label { margin:-12px 0 16px; text-align:center; color:#c9edfc; font:800 13px/1 Nunito,sans-serif; letter-spacing:.3px; }
.pro-description { width:min(100%, 306px); margin:-9px auto 15px; padding:8px 12px; border-radius:10px; text-align:center; color:#e8f8ff; background:rgba(0,87,138,.3); font:800 12px/1.28 Nunito,sans-serif; }
.level-grid { display:grid; grid-template-columns:repeat(2, 1fr); column-gap:52px; row-gap:18px; width:min(100%, 274px); margin:0 auto; }
.level-card { padding:0; background:#080e11; border:2px solid #61bc51; border-radius:4px; overflow:hidden; box-shadow:0 2px 0 rgba(0,0,0,.22); transition:transform .15s; }
.level-card:hover { transform:translateY(-2px); }
.level-number { height:25px; display:flex; align-items:center; justify-content:center; position:relative; color:#edf2f4; background:#9aa5aa; font:900 17px/1 Nunito,sans-serif; }
.level-number b { position:absolute; right:5px; color:#e7ffed; font-size:15px; }
.complete-level { border-color:#83d966; }
.level-card small { display:flex; min-height:25px; flex-direction:column; justify-content:center; gap:1px; padding:0 0 5px; color:#a8dff6; font:800 10px/1 Nunito,sans-serif; letter-spacing:.2px; }
.level-card small span:last-child { color:#e3f8ff; }
.preview { position:relative; width:96px; height:108px; margin:8px auto; background:#050a0c; }
.preview .piece, .game-piece { position:absolute; border-radius:3px; border:1px solid rgba(0,0,0,.34); box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 2px 1px rgba(0,0,0,.2); }
.preview .piece { margin:2px; }
.game-head { display:flex; align-items:center; justify-content:space-between; margin:22px 0 18px; }
.game-head h1 { margin:0; font-size:27px; }
.goal-guide { display:flex; align-items:center; justify-content:center; gap:13px; width:min(100%, 290px); margin:0 auto 15px; padding:8px 11px; border-radius:13px; background:rgba(0,105,164,.27); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.goal-copy { display:flex; flex-direction:column; gap:1px; text-align:right; font-family:Nunito,sans-serif; }
.goal-copy strong { color:#fff; font-size:16px; line-height:17px; }
.goal-copy span { color:#cbeeff; font-size:12px; font-weight:800; }
.mini-board { position:relative; width:52px; height:65px; flex:0 0 auto; overflow:hidden; border:2px solid #062e45; border-radius:4px; background-color:#071216; background-image:linear-gradient(rgba(160,211,232,.36) 1px, transparent 1px),linear-gradient(90deg,rgba(160,211,232,.36) 1px, transparent 1px); background-size:25% 20%; }
.mini-target { position:absolute; left:25%; bottom:0; width:50%; height:40%; border:2px dashed #ffe15b; background:rgba(255,215,54,.16); }
.mini-red { position:absolute; left:calc(25% + 3px); bottom:3px; width:calc(50% - 6px); height:calc(40% - 6px); border-radius:2px; background:var(--red); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.counter { min-width:80px; text-align:right; font:800 16px Nunito,sans-serif; letter-spacing:.2px; }
.counter span { display:block; color:#bce8fb; font-size:11px; line-height:10px; letter-spacing:1px; }
.board-wrap { position:relative; width:min(100%, 324px); margin:8px auto 0; padding:10px; background:#087cb4; border-radius:14px; box-shadow:inset 0 3px 0 rgba(255,255,255,.16), 0 5px 0 rgba(0,87,138,.3); }
.board { position:relative; width:100%; aspect-ratio:4/5; background:#071216; border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(255,255,255,.05); touch-action:none; }
.board::before { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(#8fb2c0 1px, transparent 1px),linear-gradient(90deg,#8fb2c0 1px, transparent 1px); background-size:25% 20%; }
.game-piece { transition:left .14s ease, top .14s ease; cursor:grab; z-index:2; }
.game-piece.selected { outline:3px solid #fff; outline-offset:2px; filter:brightness(1.1); }
.game-piece.hinted { z-index:6; animation:hint-pulse .6s ease-in-out 2; outline:3px solid #ffe35a; outline-offset:3px; filter:brightness(1.12); }
.hint-arrow { position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font:900 34px/1 Arial,sans-serif; text-shadow:0 2px 3px rgba(0,47,72,.7); pointer-events:none; animation:hint-arrow-pulse .6s ease-in-out 2; }
.game-piece.dragging { transition:none; cursor:grabbing; z-index:4; }
.red { background:var(--red); } .blue { background:var(--blue); } .green { background:var(--green); } .yellow { background:var(--yellow); }
.goal { position:absolute; z-index:1; left:25%; bottom:0; width:50%; height:40%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px; border:3px dashed #ffe35a; border-radius:6px; background:rgba(255,204,29,.15); box-shadow:inset 0 0 14px rgba(255,221,76,.2), 0 0 10px rgba(255,225,76,.25); pointer-events:none; }
.goal span { color:#fff0a3; font:900 10px/1 Nunito,sans-serif; letter-spacing:1px; text-shadow:0 1px 2px #503c00; }
.instruction { margin:20px auto 0; max-width:292px; text-align:center; color:#d4f2ff; font:800 15px/1.22 Nunito,sans-serif; }
.controls { margin:16px auto 0; display:flex; justify-content:center; gap:8px; }
.control { color:#fff; background:rgba(0,88,145,.36); width:43px; height:38px; border-radius:10px; font-size:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.control.hinted { animation:hint-pulse .6s ease-in-out 2; color:#674500; background:#ffe35a; }
.game-actions { display:flex; justify-content:center; gap:10px; margin:20px auto 0; }
.new-game, .hint-button, .undo-button { display:block; margin:0; padding:10px 15px; border-radius:19px; box-shadow:0 3px 0 rgba(0,0,0,.14); font:900 15px Nunito,sans-serif; }
.new-game { color:#0870a5; background:#fff; }
.hint-button { color:#674500; background:#ffe35a; box-shadow:0 3px 0 #d5a51a; }
.undo-button { color:#fff; background:#168fc7; box-shadow:0 3px 0 #0870a5; }
.undo-button:disabled { cursor:default; opacity:.5; }
.new-game:disabled { cursor:wait; opacity:.7; }
.complete { position:absolute; z-index:10; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(4,72,108,.71); padding:28px; }
.complete-card { width:100%; padding:29px 18px 25px; text-align:center; border-radius:22px; color:#197aa6; background:#fff; box-shadow:0 9px 0 rgba(0,80,121,.25); }
.complete-card .star { color:#ffbd1a; font-size:54px; line-height:45px; }
.complete-card h2 { margin:16px 0 3px; font-size:32px; line-height:1; }
.complete-card p { margin:0; color:#64767d; font:800 16px Nunito,sans-serif; }
.complete-actions { display:flex; flex-direction:column; align-items:center; gap:11px; margin-top:19px; }
.complete-card button { margin:0; color:#fff; background:#34bd55; padding:11px 31px; border-radius:18px; box-shadow:0 3px 0 #218f3a; font:900 16px Nunito,sans-serif; }
.complete-card .replay { color:#197aa6; background:#e4f5fc; box-shadow:0 3px 0 #b7deed; }
@keyframes hint-pulse { 50% { transform:scale(1.08); filter:brightness(1.22); } }
@keyframes hint-arrow-pulse { 50% { transform:translate(-50%,-50%) scale(1.14); } }
@media (max-width:360px) { .app-shell { padding-left:16px; padding-right:16px; } .level-grid { column-gap:30px; } }