:root{--blue:#257fe9;--cyan:#36dff7;--yellow:#ffd143;--ink:#17395e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;display:grid;place-items:center;background:#1767a5;font-family:Tahoma,"Noto Sans Thai",sans-serif}button{font:inherit;border:0;cursor:pointer}.game{position:relative;width:min(100vw,calc(100dvh*16/9));height:min(100dvh,calc(100vw*9/16));aspect-ratio:16/9;background:url('assets/city-board.png') center/100% 100% no-repeat;overflow:hidden}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:linear-gradient(90deg,#167ee4ea,#167ee4a8 52%,transparent)}.intro-card{width:80%;display:flex;align-items:center;justify-content:center;color:white;text-align:center;text-shadow:0 3px 5px #07539a}.intro-card>img{width:30%;height:70vh;object-fit:contain;filter:drop-shadow(0 12px 5px #063a6677)}.intro-card small{background:#ff556e;border:3px solid white;border-radius:99px;padding:.35em 1em;font-weight:bold}.intro-card h1,.result-card h1{font-size:clamp(48px,7vw,110px);line-height:.8;margin:.16em 0;text-shadow:0 6px 0 #1754a4}.intro-card h1 span{color:var(--yellow)}.intro-card p,.result-card p{font-size:clamp(16px,1.7vw,27px);font-weight:bold}.primary{background:linear-gradient(#ffe976,#ffb91d);color:#633900;border:4px solid white;border-radius:20px;padding:.55em 1.5em;font-weight:bold;font-size:clamp(16px,1.5vw,24px);box-shadow:0 7px 0 #ae6408}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #ae6408}
.play{position:absolute;inset:0;z-index:2}header{position:absolute;z-index:10;left:1%;right:1%;top:1%;height:8%;display:grid;grid-template-columns:1fr minmax(220px,35%) 1fr;align-items:center;background:#145b9be8;color:white;border:3px solid white;border-radius:18px;padding:5px 13px;box-shadow:0 5px 0 #0b3e74;font-size:clamp(12px,1.2vw,20px)}.progress{text-align:center;font-weight:bold}.progress i{display:block;height:10px;background:#ffffff55;border-radius:99px;overflow:hidden}.progress b{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),#ff53a1);transition:.3s}.tools{text-align:right}.tools button{width:clamp(30px,3vw,44px);aspect-ratio:1;border-radius:12px;margin-left:5px;background:white;color:var(--ink);font-size:clamp(16px,2vw,24px);box-shadow:0 3px 0 #9db5cb}
.mission{position:absolute;z-index:5;left:3%;top:13%;width:18%;height:49%;background:#fffaf0;color:var(--ink);border:5px solid #79adf4;border-radius:26px;padding:clamp(8px,1.2vw,20px);box-shadow:0 7px 0 #2564a9}.mission small{display:inline-block;background:#357ce8;color:white;border-radius:10px;padding:.25em 1em;font-weight:bold}.mission h2{font-size:clamp(15px,1.55vw,25px);margin:.5em 0}.mission p{font-size:clamp(10px,.9vw,15px)}.mission ol{list-style:none;padding:0;margin:0;display:grid;gap:clamp(3px,.5vh,8px)}.mission li{display:flex;gap:7px;align-items:center;background:#eaf3ff;border-radius:10px;padding:.35em .5em;font-size:clamp(10px,.95vw,16px);font-weight:bold}.mission li:before{content:attr(data-index);display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:7px;background:#3b7ee8;color:white}.mission li.current{outline:4px solid var(--yellow);background:#fff3b8}.mission li.done{opacity:.45;text-decoration:line-through}.mission li.wrong{animation:shake .35s;background:#ffd5d5}.mission li b{font-size:1.5em;color:#248ae9}.mission #feedback{margin-top:8px;color:#e14b45;font-weight:bold;font-size:clamp(9px,.8vw,13px)}
.board{position:absolute;left:26.3%;top:18.6%;width:49.8%;height:66.8%;z-index:3}.cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}.cell{position:relative}.obstacle{position:absolute;inset:14%;border-radius:14px;background:linear-gradient(145deg,#8cd641,#378b33);box-shadow:0 5px 0 #276924}.obstacle:before{content:"";position:absolute;width:45%;height:50%;left:28%;bottom:58%;border-radius:50%;background:#6fd04b;box-shadow:-10px 4px 0 #3e9d39,10px 5px 0 #94e363}.target,.robot{position:absolute;width:calc(100%/6);height:calc(100%/6);display:grid;place-items:center;transition:left .22s,top .22s;z-index:4}.target img{width:78%;height:92%;object-fit:contain;filter:drop-shadow(0 0 10px #ffe832)}.robot img{width:84%;height:105%;object-fit:contain;filter:drop-shadow(0 5px 3px #0005);transition:transform .2s}.facing{position:absolute;z-index:5;top:-25%;left:50%;transform:translateX(-50%);font-size:clamp(18px,2.5vw,40px);color:#11d7ff;text-shadow:0 0 4px white,0 0 12px #00aaff}.robot.bump{animation:shake .35s}
.controls{position:absolute;z-index:8;left:22%;right:2%;bottom:1.5%;height:13%;display:flex;justify-content:center;align-items:end;gap:1%}.controls button{height:90%;min-width:13%;border:4px solid white;border-radius:19px;color:white;box-shadow:0 6px 0 #174b8c;display:grid;grid-template-columns:auto auto;grid-template-rows:1fr auto;align-items:center;justify-content:center;gap:0 8px}.controls button b{font-size:clamp(24px,3vw,48px)}.controls button span{font-weight:bold;font-size:clamp(10px,1.05vw,17px)}.controls kbd{grid-column:1/-1;font-size:10px;opacity:.8}.turn.left{background:linear-gradient(#9b62ef,#6a35c3)}.forward{background:linear-gradient(#3ed6ff,#168de4)}.back{background:linear-gradient(#57d49a,#1aa96d)}.turn.right{background:linear-gradient(#ffc93e,#ed9216)}.controls .utility{background:#49657e;min-width:12%}.result-card{text-align:center;color:white}.result-card>div{font-size:clamp(75px,10vw,150px)}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}
@media(max-height:600px){.mission{top:11%;height:52%}.mission h2{margin:.25em 0}.controls{height:14%}.mission li{padding:.2em .4em}}

/* Full-screen playfield and unmistakable delivery route. */
.game{width:100vw;height:100dvh;aspect-ratio:auto}
.route{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.route polyline{fill:none;stroke:#21c9ff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18 16;filter:drop-shadow(0 0 5px white) drop-shadow(0 0 11px #087fe9);animation:routeFlow .7s linear infinite}
.target i{position:absolute;width:88%;aspect-ratio:1;border:5px solid #ffe02f;border-radius:50%;background:#fff8;box-shadow:0 0 18px 7px #fff,0 0 28px 12px #ffdf00;animation:targetPulse 1s ease-in-out infinite}
.target img{position:relative}.robot img{transform:none!important}
@keyframes routeFlow{to{stroke-dashoffset:-34}}
@keyframes targetPulse{50%{transform:scale(1.12);opacity:.65}}

/* Version 2: robot travels on the visible top-down road network. */
.game{background-image:url('assets/city-road-map-v2.png')}
.board{left:26.55%;top:15.15%;width:40.7%;height:62.1%}
.target,.robot{width:20%;height:20%;transform:translate(-50%,-50%)}
.robot img{width:74%;height:92%}.target img{width:68%;height:82%}
.obstacle{display:none}

.program{grid-template-columns:repeat(3,1fr)!important;max-height:55%;overflow:auto}.program li{justify-content:center;min-width:0}.program li:before{display:none}.program li.empty{grid-column:1/-1;border:2px dashed #83a8d4;background:#eef6ff;color:#6d86a2;padding:1.1em .4em}.controls{left:22%;gap:.6%}.controls button{min-width:10.5%}.controls .utility{min-width:9%;background:#5f7185}.controls .run{min-width:12%;background:linear-gradient(#4ddd85,#0ca653);box-shadow:0 6px 0 #08733a}.controls button:disabled{filter:grayscale(.75);opacity:.65;cursor:not-allowed}.route polyline{stroke:#31e4ff;stroke-width:9}

/* Simple top-view mode: one road, one car, one destination. */
.game{background-image:url('assets/topview-park-v3.png')}.board{left:28%;top:18%;width:58%;height:61%}.route{z-index:1}.route polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}.route .road-base{stroke:#5c6570;stroke-width:58;filter:drop-shadow(0 5px 3px #30411d77);animation:none}.route .road-center{stroke:#fff2c6;stroke-width:5;stroke-dasharray:15 14;animation:none;filter:none}.route .player-route{stroke:#2be2ff;stroke-width:9;stroke-dasharray:18 16;filter:drop-shadow(0 0 5px white) drop-shadow(0 0 9px #087fe9)}.robot{z-index:5}.robot img{width:58%;height:88%;object-fit:contain;transform:rotate(var(--car-dir,0deg))!important;transition:transform .25s}.facing{top:-17%;font-size:clamp(15px,1.8vw,30px)}.target{z-index:4}.target img{width:58%;height:72%}

.block-rule b{display:inline-block;background:#fff0a8;color:#754d00;border:2px solid #f5bd23;border-radius:9px;padding:.3em .55em;margin-bottom:.35em}.road-blocks{position:absolute;inset:0;z-index:2;pointer-events:none}.road-block{position:absolute;width:16%;height:16%;transform:translate(-50%,-50%);border:4px solid #fff0c3;border-radius:13px;box-shadow:inset 0 0 0 3px #454e59,0 4px 4px #32451f66}.road-block span{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:#ffe04f;color:#17395e;border:2px solid white;font-weight:900;font-size:clamp(9px,.85vw,14px);box-shadow:0 2px 0 #b47d00}.road-block.start span{background:#55e49c}.route .road-base{stroke-width:48}.robot img{width:42%;height:68%}.target img{width:48%;height:62%}