*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font:16px system-ui,Arial,sans-serif;color:#493523;background:#fbf4e2}button,select{font:inherit;color:inherit;border:1px solid #d6c6a2;border-radius:12px;background:#fffaf0;cursor:pointer;touch-action:manipulation}button:hover{background:#fff0c7}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #168599;outline-offset:2px}#app{height:100dvh;max-width:1350px;margin:auto;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column}header{display:flex;align-items:center;gap:7px;flex-shrink:0;min-height:55px;padding:5px 0}.icon{width:38px;height:38px;padding:7px;font-size:23px;font-weight:800;flex-shrink:0}svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.brand{flex:1;min-width:0;line-height:1.1}.brand b{font-size:25px;color:#117e89;letter-spacing:-1px}.brand b span{color:#de592f}.brand small{display:block;font-size:11px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#avatar{width:43px;height:43px;padding:0;overflow:hidden;background:white;flex-shrink:0}#avatarCanvas{width:100%;height:100%}.pill{font-size:13px;font-weight:bold;white-space:nowrap;padding:9px 8px}.mission{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:13px;background:#f1e5ca;flex-shrink:0;min-height:54px}.mission b{font-size:14px}.mission p{font-size:12px;line-height:1.25;margin:3px 0 0;max-width:800px}#inventory{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;font-weight:bold}main{display:flex;flex-direction:column;min-height:0;flex:1;gap:5px}.playarea{min-height:0;flex:1;position:relative;display:flex;justify-content:center;align-items:center;padding:7px 0 27px}#board{width:100%;height:100%;object-fit:contain;display:block;touch-action:none}.boardtools{position:absolute;bottom:0;display:flex;gap:7px;justify-content:center}.boardtools button,.boardtools select{font-size:11px;padding:4px 9px;border-radius:8px}.console{flex-shrink:0;display:flex;flex-direction:column;gap:5px;padding:4px 2px 7px}.programhead{display:flex;justify-content:space-between;align-items:center;font-size:12px}.programhead button{font-size:11px;padding:4px 10px}.queue{display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;min-height:46px;max-height:46px;padding:3px;background:#e9dfcb;border-radius:10px;scrollbar-width:thin;align-items:center}.queue:empty:before{content:'Tervezz egy rövid szakaszt, vagy az egész útvonalat!';font-size:11px;padding:6px;color:#76654b}.queue button{position:relative;min-width:40px;height:37px;border-radius:8px;font-size:21px;padding:4px 7px 2px;font-weight:bold;flex-shrink:0}.queue button small{position:absolute;left:3px;top:1px;font:9px system-ui}.queue button.active{background:#ffcf69;outline:2px solid #a65c14}.queue button.error{background:#ffd4cc;border:2px solid #cf4a38}.queue button.selected{outline:3px solid #168599}.queue button.done{background:#dcebcf}#status{font-size:12px;line-height:1.2;margin:0;min-height:29px;display:flex;align-items:center;padding:3px 7px;background:#fffaf0;border-radius:8px}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.pad button{height:49px;display:flex;align-items:center;justify-content:center;gap:6px;background:#f4b84e;border-color:#d49233;font-weight:bold}.pad svg{width:26px;height:26px;flex-shrink:0}.pad small{font-size:11px}.pad .go,.go{background:#278a66;color:white;border-color:#1d7353;font-weight:800}.go:hover{background:#217657}.actions{display:grid;grid-template-columns:1fr .8fr 1.2fr;gap:5px}.actions button{font-size:10px;padding:8px 4px}.next{font-size:12px;padding:7px;background:#e3efd9;border-color:#bdd0a9;font-weight:700}dialog{border:1px solid #d8c9a8;border-radius:23px;padding:22px;max-width:950px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow:auto;color:#493523;background:#fffbf1;box-shadow:0 20px 60px #3d2e2940}dialog::backdrop{background:#23332688;backdrop-filter:blur(4px)}.modalhead{display:flex;align-items:center;justify-content:space-between}.modalhead h1{margin:0;color:#117e89;font-size:28px}.close{font-size:25px;width:38px;height:38px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.worldcard{padding:0;overflow:hidden;text-align:left;background:white}.worldcard img{width:100%;aspect-ratio:1.6;object-fit:cover;object-position:left;display:block}.worldcard strong{display:block;padding:9px 10px;font-size:14px}.worldcard small{display:block;padding:0 10px 12px;color:#776449;font-size:11px}.chargrid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.chargrid button{padding:7px 3px}.chargrid canvas{width:100%;aspect-ratio:1;display:block}.chargrid b{font-size:12px}.chosen{outline:3px solid #1d8d85;outline-offset:1px}.levelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.levelgrid button{padding:17px 8px;min-height:100px}.levelgrid b{display:block;font-size:25px;color:#267b60}.levelgrid span{display:block;font-size:13px;margin-top:7px}.levelgrid small{display:block;margin-top:5px}.random{grid-column:1/-1;background:#e8e1f5}.helptext p{line-height:1.6}.legend{display:flex;gap:12px;flex-wrap:wrap}.legend div{text-align:center;width:100px}.legend canvas{width:80px;height:80px}.legend small{display:block}.helptext img{max-width:100%;border-radius:10px}.modalfooter{margin-top:18px;font-size:12px;color:#79664f}#victory{max-width:390px;text-align:center}#victory h2{font-size:25px}.celebration{font-size:42px;color:#e6aa31;letter-spacing:7px}#winner{width:150px;height:160px}#victory button{display:block;width:100%;padding:12px;margin:8px 0}.busyhint{padding:40px;text-align:center}#app.loading{opacity:.5;pointer-events:none}@media(min-width:850px){#app{padding:15px 24px;height:100dvh}header{height:68px}.brand b{font-size:35px}.brand small{font-size:13px}.mission{padding:12px 16px}.mission b{font-size:18px}.mission p{font-size:14px}main{flex-direction:row;gap:20px}.playarea{height:100%;flex:1;padding:12px 0 38px}.console{width:340px;flex-shrink:0;justify-content:center;gap:12px}.queue{min-height:128px;max-height:200px;flex-wrap:wrap;overflow-y:auto}.programhead{font-size:15px}.queue button{height:45px;min-width:43px;font-size:25px}.pad button{height:70px}.pad small{font-size:13px}#status{font-size:14px;min-height:58px}.actions button{font-size:12px;padding:12px 5px}.next{font-size:16px;padding:13px}.boardtools button,.boardtools select{font-size:13px;padding:6px 14px}.console .programhead button{font-size:13px;padding:6px 12px}}@media(max-width:650px){.grid{grid-template-columns:repeat(2,1fr)}.chargrid{grid-template-columns:repeat(3,1fr)}dialog{padding:15px}.levelgrid{gap:7px}.levelgrid button{min-height:90px}.mission p{font-size:11px}.brand b{font-size:22px}#help{width:30px}.icon{width:33px;height:33px}.pill{padding:7px 5px;font-size:11px}}@media(max-height:670px) and (max-width:849px){header{min-height:44px}.mission{padding:5px 8px;min-height:43px}.mission p{font-size:10px}.console{gap:3px}.pad button{height:40px}.queue{min-height:40px;max-height:40px}.queue button{height:33px}.actions button{padding:6px 3px}.next{padding:5px}#status{min-height:24px;font-size:11px}}@media(orientation:landscape) and (max-width:849px){header{min-height:40px}.mission{min-height:35px;padding:4px 10px}.mission p{display:none}main{flex-direction:row;gap:10px}.console{width:310px;gap:3px;justify-content:center}.playarea{padding-bottom:27px}.pad button{height:38px}.queue{min-height:38px;max-height:38px}.actions button{padding:6px 3px}.grid{grid-template-columns:repeat(4,1fr)}}
@media(orientation:landscape) and (max-height:400px) and (max-width:849px){header{min-height:36px;height:36px;padding:1px 0}.mission{min-height:26px;padding:2px 8px}.mission b{font-size:12px}.console{padding:1px 0;gap:2px}.programhead{font-size:11px}.queue{min-height:34px;max-height:34px}.queue button{height:29px}.pad button{height:32px}.pad svg{width:21px;height:21px}.pad small{font-size:10px}#status{min-height:22px;font-size:10px}.actions button{padding:5px 3px}.next{padding:4px}.boardtools button,.boardtools select{padding:2px 8px;font-size:10px}}

.pictured{display:flex;align-items:center;gap:4px;margin:3px 0;flex-wrap:wrap}.taskicon{width:30px;height:30px;display:block;border-radius:7px;flex-shrink:0}.taskgroup{display:inline-flex;align-items:center;gap:3px}.taskgroup b{font-size:11px}.taskarrow{font-weight:bold;color:#82704c;font-size:17px}.taskcheck{font-size:25px;color:#258a58;font-weight:bold}.success{justify-content:center;margin:12px 0}.success .taskicon{width:44px;height:44px}.success .taskgroup b{font-size:14px}.celebration svg{width:180px;height:50px;fill:#f6bd42;stroke:#b97a24;stroke-width:2}.mission{padding:5px 10px}.mission p{margin:2px 0 0}.mission b{font-size:13px}@media(orientation:landscape) and (max-height:400px){.mission .pictured{display:inline-flex;margin:0 8px}.mission .taskicon{width:23px;height:23px}.mission b{font-size:11px}}

/* A küldetés csak a pálya előtti ablakban foglal helyet. */
#briefing{max-width:480px;text-align:center}#briefing h2{margin:0 0 16px;color:#117e89}#briefing .mission{display:block;padding:16px;background:#f1e5ca}#briefing .mission b{font-size:18px}#briefing .pictured{justify-content:center;gap:8px;margin:18px 0}#briefing .taskicon{width:52px;height:52px}#briefing .taskgroup b{font-size:16px}#briefing .mission p{display:block;font-size:14px;line-height:1.5}#briefing #inventory{display:none}#briefing #lesson{font-size:14px;line-height:1.5}#begin{width:100%;padding:14px;margin-top:8px}
.pad svg{width:32px;height:32px}.pad #run svg{fill:currentColor;stroke-width:1}.queue:empty:before{content:'＋ ↑ ↶ ↷ ↓ ◷';font-size:20px;letter-spacing:8px}#status:empty{display:none}#status{min-height:22px}.brand small{display:none}
@media(max-width:849px){header{min-height:48px;gap:5px}.brand b{font-size:20px}.console{gap:4px;padding:2px 0 4px}.pad button{height:46px}.playarea{padding-top:0}.queue{min-height:42px;max-height:42px}#status{font-size:11px;min-height:20px}.actions button{padding:7px 3px}.next{padding:6px}.icon{width:33px;height:36px}#help{width:28px}.brand{min-width:0}#avatar{width:36px;height:36px}.programhead{font-size:11px}}
@media(max-width:370px){header{gap:3px}.brand b{font-size:17px}.pill{font-size:10px;padding:6px 4px}.icon{width:30px;padding:6px}}
@media(orientation:landscape) and (max-width:849px){.console{width:300px}.pad button{height:40px}.pad svg{width:28px;height:28px}header{min-height:38px;height:38px}}

/* Közös vezérlősor és a parancsok alatti külön görgetési hely. */
.programhead{gap:6px;justify-content:flex-start}.programhead>b{margin-right:auto;white-space:nowrap}.programhead #sound,.programhead #speed,.programhead #insert{font-size:11px;padding:5px 7px;min-height:30px;border-radius:8px;white-space:nowrap}.programhead #speed{min-width:0;max-width:100px}.playarea{padding-bottom:0}.queue{min-height:60px;max-height:60px;padding:4px 4px 17px;align-items:flex-start;scrollbar-width:auto;scroll-padding-inline:4px}.queue button{height:37px;flex-shrink:0}.queue:empty{min-height:44px;max-height:44px;padding-bottom:4px}.queue::-webkit-scrollbar{height:12px;width:12px}.queue::-webkit-scrollbar-track{background:#e9dfcb;border-radius:8px}.queue::-webkit-scrollbar-thumb{background:#ae9875;border:3px solid #e9dfcb;border-radius:8px}
@media(min-width:850px){.queue{min-height:128px;max-height:200px;align-content:flex-start;overflow-x:hidden;padding:5px 16px 5px 5px}.queue button{height:45px}.queue:empty{min-height:128px;max-height:200px}.playarea{padding-bottom:8px}}
@media(max-width:370px){.programhead{gap:4px}.programhead #sound,.programhead #speed,.programhead #insert{font-size:10px;padding:5px}.programhead #speed{max-width:90px}}

/* Kompakt kezelőpanel: bal oldalt a műveletek, jobb oldalt az irányok. */
.controlcluster{display:contents}
@media(max-width:849px){
.controlcluster{display:grid;grid-template-columns:minmax(94px,.85fr) minmax(180px,2fr);gap:8px;align-items:center}
.controlcluster .actions{display:grid;grid-template-columns:1fr;gap:4px}
.controlcluster .actions button{min-height:28px;padding:5px 4px;font-size:10px;line-height:1.2}
.controlcluster .pad{gap:4px;width:100%;max-width:260px;justify-self:center}
.controlcluster .pad button{height:38px;min-width:0;padding:5px;border-radius:10px}
.controlcluster .pad svg{width:26px;height:26px}
.console .queue{flex-wrap:wrap;align-content:flex-start;align-items:flex-start;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;min-height:124px;max-height:124px;padding:5px 5px 5px 5px;gap:5px;scroll-padding-block:5px}
.console .queue button{height:34px;min-width:37px;padding:4px 6px 2px;font-size:21px}
.console .queue:empty{min-height:124px;max-height:124px}
.console .queue::-webkit-scrollbar{width:12px;height:12px}
}
@media(max-width:849px) and (max-height:740px){.console .queue,.console .queue:empty{min-height:85px;max-height:85px}}
@media(orientation:landscape) and (max-width:849px){.console .queue,.console .queue:empty{min-height:85px;max-height:85px}.controlcluster{gap:6px;grid-template-columns:94px 1fr}.controlcluster .pad button{height:34px}.controlcluster .actions button{min-height:25px;padding:4px 2px}}