@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900;1000&display=swap');
[hidden]{display:none!important}:root{font-family:Nunito,'Segoe UI',sans-serif;color:#17204c;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 8% 16%,#ffe66c 0 7%,transparent 7.2%),radial-gradient(circle at 94% 84%,#ff7faa 0 9%,transparent 9.2%),linear-gradient(145deg,#55d9ca,#69aaff 56%,#8b70e8);min-height:100vh}button{font:inherit}.logic-app{min-height:calc(100dvh - 66px);padding:16px clamp(12px,3.5vw,44px) 24px}.game-header{height:68px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;background:#17245d;border:2px solid #ffffff66;border-radius:19px;padding:11px 18px;box-shadow:0 7px #26306338}.game-header>div:first-child{display:flex;flex-direction:column}.eyebrow{color:#66e4ca;font-size:.62rem;letter-spacing:1.8px;font-weight:1000}.game-header strong{font-size:1.08rem}.status{display:flex;gap:8px}.status span{padding:7px 11px;background:#ffffff16;border:1px solid #ffffff40;border-radius:99px;font-size:.76rem;font-weight:900}.start-screen{width:min(1080px,100%);height:calc(100dvh - 174px);margin:14px auto 0;display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}.kicker{color:#18547f;font-size:.68rem;letter-spacing:2px;font-weight:1000}.intro-copy h1{margin:9px 0 13px;max-width:550px;font-size:clamp(2.6rem,5.5vw,4.8rem);line-height:.94;letter-spacing:-3px}.intro-copy h1 em{color:#613ed0;font-style:normal}.intro-copy p{max-width:510px;color:#394f72;font-weight:800;line-height:1.5}.mini-code{display:flex;align-items:center;gap:8px;margin-top:22px}.mini-code span{display:grid;place-items:center;width:52px;height:52px;background:#fff;border:2px solid #eee9ff;border-radius:15px;font-size:1.4rem;box-shadow:0 5px #cbc6e8}.mini-code i{color:#6859b1;font-style:normal;font-size:1.3rem;font-weight:1000}.level-panel{padding:22px;background:#ffffffc9;border:4px solid #fff;border-radius:28px;box-shadow:0 10px #2b32662d}.level-panel h2{margin:0 0 14px;font-size:1.35rem}.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.level-card{position:relative;overflow:hidden;min-height:145px;padding:16px;text-align:left;border:3px solid #fff;border-radius:20px;color:#17204c;box-shadow:0 6px #3333662d;cursor:pointer;transition:.16s}.level-card:hover{transform:translateY(-4px)}.level-card:after{content:"";position:absolute;width:70px;height:70px;right:-24px;bottom:-30px;border:12px solid #fff5;border-radius:50%}.level-card>span,.level-card strong,.level-card small{display:block}.level-card>span{font-size:1.5rem}.level-card strong{margin-top:17px;font-size:1.25rem}.level-card small{font-weight:800}.easy{background:#baf1d8}.medium{background:#ffe18b}.hard{background:#ffb1c5}.code{background:#c7b8ff}.game-screen{width:min(1180px,100%);margin:12px auto 0}.play-top{height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:8px;color:#fff}.back-level{justify-self:start;padding:7px 12px;border:1px solid #ffffff70;border-radius:99px;background:#19285dbd;color:#fff;font-weight:900;cursor:pointer}.play-top>div:nth-child(2){display:flex;align-items:center;gap:8px}.play-top>div:nth-child(2) span{padding:4px 9px;border-radius:99px;background:#ffffff31;font-size:.72rem;font-weight:900}.lives{justify-self:end;display:flex;gap:3px;color:#ff3f70;font-size:1.3rem}.lives .lost{color:#ffffff4a}.game-layout{display:grid;grid-template-columns:minmax(430px,1.08fr) minmax(390px,.92fr);gap:14px}.maze-card,.program-card{background:#fffffff0;border:4px solid #fff;border-radius:26px;box-shadow:0 9px #27336b36}.maze-card{padding:14px}.maze-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;color:#5c5484;font-size:.76rem;font-weight:900}.maze-head button{border:0;border-radius:10px;padding:6px 9px;background:#e9e5ff;color:#58459c;font-size:.72rem;font-weight:1000;cursor:pointer}.maze{--cols:6;--rows:6;width:min(100%,520px);aspect-ratio:var(--cols)/var(--rows);margin:auto;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:4px;padding:7px;border:3px solid #132158;border-radius:18px;background:linear-gradient(145deg,#243475,#172357);box-shadow:inset 0 0 25px #080e35}.cell{position:relative;display:grid;place-items:center;min-width:0;border-radius:8px;background:linear-gradient(145deg,#eef8ff,#d9e6ff);font-size:clamp(1rem,2.6vw,1.8rem);box-shadow:inset 0 0 0 1px #fff}.cell:after{content:"";position:absolute;inset:3px;border:1px dashed #8ea5d055;border-radius:6px}.cell.wall{background:linear-gradient(145deg,#53638e,#34436f);box-shadow:inset 0 0 0 2px #6f7fa7}.cell.wall:before{content:"";width:72%;height:58%;background:repeating-linear-gradient(0deg,#28365d 0 5px,#44547d 5px 10px);border-radius:5px}.cell.wall:after{display:none}.cell.door{background:linear-gradient(145deg,#ffdb7e,#e9a83e)}.cell.visited{background:linear-gradient(145deg,#d9fff0,#b9efd9)}.robot{position:relative;z-index:2;display:grid;place-items:center;width:74%;height:74%;border-radius:14px;background:linear-gradient(145deg,#fff,#d8e2ff);filter:drop-shadow(0 4px 2px #17235a55);transition:.22s transform;font-size:clamp(1.1rem,3vw,2rem)}.robot.north{transform:rotate(-90deg)}.robot.south{transform:rotate(90deg)}.robot.west{transform:rotate(180deg)}.item{position:relative;z-index:1}.program-card{padding:14px;display:flex;flex-direction:column}.program-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.program-head>div{display:flex;flex-direction:column}.program-head>div span{color:#745fc1;font-size:.58rem;letter-spacing:1.5px;font-weight:1000}.program-head strong{font-size:1rem}.program-head>span{padding:5px 8px;border-radius:9px;background:#fff0b4;color:#755300;font-size:.68rem;font-weight:1000}.program{min-height:83px;max-height:105px;overflow:auto;display:flex;align-content:flex-start;flex-wrap:wrap;gap:6px;margin:9px 0;padding:9px;border:2px dashed #8d7ad0;border-radius:14px;background:#f2efff}.program p{width:100%;margin:auto;color:#786f9f;text-align:center;font-size:.74rem;font-weight:900}.program-step{display:flex;align-items:center;gap:4px;height:30px;padding:0 8px;border:2px solid #fff;border-radius:9px;background:#fff;box-shadow:0 3px #cbc4e4;font-size:.7rem;font-weight:1000}.program-step b{color:#7259c3}.program-step.loop{background:#e2d8ff;color:#5638ac}.palette{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.palette button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border:2px solid #e1dcf3;border-radius:12px;background:linear-gradient(145deg,#fff,#efefff);color:#17204c;font-size:.72rem;font-weight:1000;box-shadow:0 4px #c8c0e1;cursor:pointer}.palette button:hover{border-color:#745bd5;transform:translateY(-1px)}.palette button span{font-size:1rem}.palette .loop-command{display:none;background:linear-gradient(145deg,#eee8ff,#d7caff)}.program-card.code-mode .loop-command{display:flex}.edit-actions{display:flex;justify-content:space-between;margin-top:8px}.edit-actions button{border:0;background:transparent;color:#61558e;font-size:.68rem;font-weight:1000;cursor:pointer}.run{margin-top:7px;padding:10px;border:0;border-radius:12px;background:linear-gradient(100deg,#6d4ce0,#315ed0);color:#fff;font-weight:1000;box-shadow:0 5px #263a94;cursor:pointer}.run:disabled,.palette button:disabled,.edit-actions button:disabled{opacity:.48;cursor:default}.feedback{min-height:36px;margin-top:9px;padding:8px;border-radius:11px;background:#fff1b4;text-align:center;font-size:.73rem;font-weight:900}.feedback.good{background:#c8f1da;color:#126943}.feedback.bad{background:#ffd2dd;color:#8b1838}.result-screen{width:min(650px,100%);margin:38px auto;text-align:center;padding:34px 22px;background:#fffffff2;border:4px solid #fff;border-radius:29px;box-shadow:0 10px #26366b38}.result-icon{font-size:4rem}.result-screen>span{color:#654aca;font-size:.67rem;letter-spacing:2px;font-weight:1000}.result-screen h1{margin:6px 0;font-size:3rem}.result-screen p{color:#52617a;font-weight:800}.bonus{width:240px;margin:17px auto;padding:11px;border:3px solid #fff;border-radius:18px;background:linear-gradient(145deg,#fff0a4,#ffca42);box-shadow:0 5px #d69d2e}.bonus span,.bonus strong,.bonus small{display:block}.bonus span{font-size:1.6rem}.bonus strong{font-size:.78rem}.bonus small{font-weight:900}.result-actions{display:flex;justify-content:center;gap:9px}.result-actions button{padding:10px 14px;border:0;border-radius:12px;background:#19275f;color:#fff;font-weight:1000;cursor:pointer}.result-actions button:last-child{background:#7358dc}@media(max-height:760px) and (min-width:761px){.logic-app{padding-top:9px}.game-header{height:58px}.game-screen{margin-top:8px}.game-layout{gap:10px}.maze-card,.program-card{padding:10px}.maze{width:min(100%,455px)}.palette button{min-height:41px}.program{min-height:70px;max-height:82px}.feedback{margin-top:7px}.start-screen{height:calc(100dvh - 150px)}.level-card{min-height:120px}.level-card strong{margin-top:8px}}
@media(max-width:760px){.logic-app{padding:9px}.game-header{height:59px;padding:8px 11px}.eyebrow{font-size:.52rem}.game-header strong{font-size:.92rem}.status span{padding:5px 7px;font-size:.65rem}.start-screen{height:auto;display:block;margin-top:15px}.intro-copy h1{font-size:2.25rem;letter-spacing:-1.5px}.intro-copy p{font-size:.78rem}.mini-code{margin-top:13px}.mini-code span{width:39px;height:39px;font-size:1.05rem}.level-panel{margin-top:18px;padding:13px;border-radius:20px}.level-grid{gap:8px}.level-card{min-height:104px;padding:10px}.level-card>span{font-size:1.1rem}.level-card strong{margin-top:7px;font-size:1rem}.level-card small{font-size:.65rem}.game-layout{grid-template-columns:1fr;gap:9px}.game-screen{margin-top:7px}.play-top{height:34px}.play-top>div:nth-child(2) span{display:none}.maze-card,.program-card{border-radius:19px;padding:8px;border-width:3px}.maze-head{margin-bottom:6px}.maze{width:min(100%,360px);gap:3px;padding:5px}.cell{border-radius:6px}.legend{display:none}.program{min-height:56px;max-height:68px;margin:6px 0;padding:6px}.program-step{height:25px;padding:0 6px;font-size:.6rem}.palette{grid-template-columns:repeat(3,1fr);gap:5px}.palette button{min-height:39px;display:block;padding:4px;font-size:.6rem}.palette button span{display:block;font-size:.85rem}.program-card.code-mode .loop-command{display:block}.edit-actions{margin-top:5px}.run{margin-top:4px;padding:8px}.feedback{min-height:31px;margin-top:6px;padding:6px;font-size:.65rem}.result-screen{margin-top:18px;padding:24px 15px}}@media(max-width:410px){.status span:nth-child(2){display:none}.maze-head>span{font-size:.66rem}.back-level{font-size:.7rem;padding:6px 8px}.play-top>div:nth-child(2) strong{font-size:.82rem}.lives{font-size:1.05rem}}


/* Illustrated game board and direction controls */
body{background:radial-gradient(ellipse at 15% 5%,#b9fff0,transparent 40%),linear-gradient(140deg,#61d5c1,#6bb1ed 65%,#9696ee)}
.game-header{background:linear-gradient(110deg,#183b68,#212659);border:3px solid #b7d9ff;box-shadow:0 5px #26396740}
.maze-card{background:linear-gradient(145deg,#edfff5,#d2f3eb);border-color:#fff}
.maze{grid-template-rows:repeat(var(--rows),minmax(0,1fr));background:#427c64;border:7px solid #315b50;box-shadow:0 7px #223f3b,0 12px 24px #173f4430;gap:4px;padding:8px;border-radius:22px;width:min(100%,430px)}
.cell{background:linear-gradient(145deg,#fff8d9,#e9d6a8);box-shadow:inset 0 2px #fff,0 2px #a99870;font-size:1.65rem;min-height:0}
.cell:after{border:0;background:radial-gradient(#bca77755 1px,transparent 1px);background-size:9px 9px;pointer-events:none}
.cell.wall{background:linear-gradient(#65b887 0 20%,#438864 20% 30%,#427561 30%);border:2px solid #35604e;box-shadow:inset 0 3px #8cdb9c,0 4px #244e40}
.cell.wall:before{width:75%;height:58%;background:linear-gradient(25deg,transparent 45%,#ffffff15 46% 50%,transparent 51%);border:2px solid #ffffff15;border-radius:6px}
.cell.exit-cell{background:repeating-conic-gradient(#e3fff6 0% 25%,#8ac8b2 0% 50%) 50%/16px 16px;box-shadow:inset 0 0 0 3px #fff,0 0 12px #88fff1}
.item{filter:drop-shadow(0 3px 1px #59480e55);font-size:clamp(1.15rem,2.6vw,2rem)}
.robot{width:70%;height:64%;border:2px solid #fff;background:linear-gradient(#65e9ff,#1c9fcc);border-radius:10px;box-shadow:0 3px #126487;filter:drop-shadow(0 3px 3px #192d4a70);transform:none!important;overflow:visible}
.robot-face{display:flex;gap:5px;align-items:center;justify-content:center;position:absolute;inset:18% 10%;background:#142e52;border-radius:6px}
.robot-face b{width:5px;height:7px;background:#8effec;border-radius:3px;box-shadow:0 0 5px #6af9ff}
.robot-arrow{position:absolute;right:-45%;top:0;width:50%;height:100%;display:grid;place-items:center;color:#e85817;font:1000 22px/1 sans-serif;text-shadow:0 1px #fff,1px 0 #fff,-1px 0 #fff;z-index:5}
.robot.north .robot-arrow{right:25%;top:-70%;transform:rotate(-90deg)}.robot.south .robot-arrow{right:25%;top:70%;transform:rotate(90deg)}.robot.west .robot-arrow{right:95%;transform:rotate(180deg)}
.legend{display:flex;justify-content:center;gap:12px;margin-top:8px;font-size:.72rem;font-weight:900}.maze-head{color:#214d48}.maze-head>span{background:#fff;padding:7px;border-radius:9px}
.control-help{font-size:.72rem;font-weight:800;color:#555d82;margin:0 0 7px}
.palette{grid-template-columns:1fr 1fr;gap:8px}.palette button{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;text-align:left;min-height:63px;padding:6px 10px;border-radius:14px;border:2px solid #fff;box-shadow:0 4px #b1bed6;color:#182f54}
.palette button .direction-icon{grid-row:1/3;font:1000 35px/1 'Segoe UI',sans-serif;text-align:center}.palette button b{font-size:.9rem}.palette button small{font-size:.62rem;font-weight:800}
.palette [data-command=up]{background:linear-gradient(#c7ffdd,#99e7ba)}.palette [data-command=down]{background:linear-gradient(#d3edff,#aad5fc)}.palette [data-command=left]{background:linear-gradient(#ffefd1,#ffda9c)}.palette [data-command=right]{background:linear-gradient(#e9dfff,#cfc1f7)}
.palette [data-command=collect]{grid-column:1/-1;display:flex;min-height:34px;justify-content:center;background:#fff1a9}.program-card.code-mode .loop-command{display:flex;min-height:34px;justify-content:center}
.program{max-height:none;min-height:64px;background:#edf2fc;border-color:#9bb1d5}.run{background:linear-gradient(#30b57b,#16835b);box-shadow:0 4px #12583e}.program-step{height:27px}.start-screen{height:auto;min-height:calc(100dvh - 210px)}
@media(max-width:760px){.maze{width:min(100%,260px);padding:5px;border-width:5px;gap:3px}.game-header{height:52px}.game-layout{gap:7px}.maze-head{font-size:.65rem}.maze-head>span{padding:4px}.legend{display:none}.control-help{font-size:.64rem;margin-bottom:5px}.palette{gap:6px}.palette button{min-height:48px;padding:4px 7px;grid-template-columns:30px 1fr}.palette button .direction-icon{display:block;font-size:29px}.palette button b{font-size:.75rem}.palette button small{font-size:.55rem}.palette [data-command=collect],.program-card.code-mode .loop-command{min-height:28px}.program{min-height:38px;padding:4px;margin:5px 0}.program-step{font-size:.56rem;height:22px;padding:0 4px}.program-head strong{font-size:.85rem}.feedback{font-size:.62rem}.robot-arrow{font-size:17px}.robot-face{gap:3px}.robot-face b{width:4px;height:5px}.intro-copy h1{font-size:2rem}}
@media(min-width:761px) and (max-height:800px){.maze{width:min(100%,375px)}.palette button{min-height:56px}.logic-app{padding-bottom:12px}}