*{box-sizing:border-box}body{margin:0;background:#101b25;color:#e9f0ef;font-family:'Noto Sans Thai',system-ui,sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 60% 5%,#23433b66,transparent 60%)}main{max-width:1500px;margin:auto;padding:24px 40px;position:relative}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #ffffff20;background:#ffffff08;border-radius:10px;padding:10px 15px}button:hover{background:#ffffff18}header{display:flex;align-items:center;gap:30px;border-bottom:1px solid #ffffff15;padding-bottom:22px}.brand{font-size:23px;letter-spacing:-1px;font-weight:900;color:#ffd66c;text-decoration:none}.brand span{color:#eef5f2;margin-left:5px}.tag{font-size:10px;letter-spacing:3px;color:#81958e}header button{margin-left:auto;font-size:12px}.heading{display:flex;justify-content:space-between;align-items:center;padding:30px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:#f4c761;font-weight:700}h1{font-size:31px;line-height:1.45;margin:8px 0}h1 span{color:#9cb8a9;margin-left:18px}.sub{color:#92a59f;font-size:13px;margin:0}.power{min-width:150px;border-left:1px solid #ffffff20;padding-left:25px}.power small{color:#91a79d;font-size:11px}.power strong{display:block;font-size:34px;color:#ffda78}.power strong span{font-size:12px;color:#a4b1ac}#bars{display:flex;gap:4px}#bars i{display:block;width:18px;height:5px;border-radius:3px;background:#34463f}#bars i.on{background:#ffd16a}.layout{display:grid;grid-template-columns:180px minmax(300px,1fr) 210px;gap:23px}aside{padding-top:8px}.chapter{display:flex;gap:12px;align-items:center}.chapter>span{font-size:30px;background:#244434;padding:8px;border-radius:14px}.chapter p{font-size:10px;color:#93a99d}.chapter strong{display:block;color:#eff4ef;font-size:15px}.label{font-size:11px;color:#8da39a;margin:22px 0 12px}#levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#levels button{padding:11px 0;color:#80938e;font-size:12px}#levels button.active{background:#f7d078;color:#1a2c24;border-color:#f7d078;font-weight:800}#levels button.done{color:#a9dcaa;border-color:#526e54}#levels button:disabled{opacity:.35;cursor:default}.tip{border-top:1px solid #ffffff13;margin-top:24px;padding-top:18px;font-size:11px;color:#8da39a}.tip b{color:#dbcb9e}.tip p{line-height:1.9}.arena{border:1px solid #ffffff1a;border-radius:18px;overflow:hidden;box-shadow:0 22px 70px #0005;background:#172c29}.arenaTop,.arenaBottom{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;font-size:11px;background:#1c302e}.arenaTop button{padding:4px 9px;font-size:10px}.arenaTop b{font-size:12px}.live{display:inline-block;width:7px;height:7px;background:#a9dd81;border-radius:50%;margin-right:8px}#objective{color:#a7b9b1}.boardWrap{position:relative;background:#254438}canvas{width:100%;display:block;aspect-ratio:13/11;touch-action:none}.arenaBottom{color:#b8c8be;padding:14px 18px}.mission{background:#1b302d;border:1px solid #ffffff0d;border-radius:15px;padding:18px}.mission h3{font-size:17px;margin:10px 0}.mission>p:not(.eyebrow){color:#93aaa0;font-size:12px;line-height:1.9}.mission>div{font-size:11px;border-top:1px solid #ffffff0c;padding-top:12px;margin-top:12px;color:#c6d3bf}.controls p{font-size:11px;color:#9aafa4}kbd{font-family:inherit;display:inline-block;border:1px solid #ffffff20;border-bottom:3px solid #ffffff20;padding:3px 6px;border-radius:5px;color:#dbe5de;font-size:10px}.controls button{width:100%;font-size:11px;margin-top:10px}.legend{font-size:10px;display:grid;gap:12px;color:#82998e;margin-top:22px}#overlay{position:absolute;inset:0;background:#0c211dbd;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center}.modal{text-align:center;padding:25px;max-width:370px}#modalIcon{font-size:58px}h2{font-size:25px;margin:13px 0}#modalText{color:#bacdc0;font-size:13px;line-height:1.9}#action{background:#f8d179;color:#18281e;font-weight:800;border:0;padding:13px 30px;box-shadow:0 7px 0 #a87a32}.touch{display:none}footer{display:flex;gap:20px;color:#6c8278;font-size:10px;padding:25px 0}footer span{color:#95a99d}footer small{margin-left:auto}@media(max-width:1100px){.layout{grid-template-columns:140px minmax(300px,1fr)}.right{display:none}h1{font-size:25px}h1 span{display:block;margin:0}}@media(max-width:700px){main{padding:15px}.tag{display:none}.heading{padding:20px 0}h1{font-size:22px}.sub{max-width:230px;font-size:10px}.power{min-width:80px;padding-left:12px}.power strong{font-size:28px}.layout{display:block}.layout>aside:first-child{display:none}.arenaTop{padding:10px;font-size:9px}.arenaBottom{padding:10px;font-size:10px}.touch{display:flex;justify-content:space-between;align-items:center;margin:18px 30px}.dpad{display:grid;grid-template-columns:repeat(3,48px);gap:5px}.dpad button{height:44px;padding:0;background:#263d36}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.touch #plant{width:84px;height:75px;background:#e7b958;color:#182a20;font-size:26px;touch-action:none}.touch small{display:block;font-size:10px}footer{font-size:8px;gap:8px}footer small{display:none}}

/* Tablet, touch laptops, safe areas, and compact landscape play. */
body{min-width:320px}main{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}.devicebar{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:11px;color:#a9beb2}.devicebar label{margin-left:auto}.devicebar select{font:inherit;color:#e9f0ef;background:#213c32;border:1px solid #ffffff30;border-radius:8px;padding:7px;max-width:125px}.devicebar button{padding:7px 12px;font-size:11px}button{touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #ffd16a;outline-offset:3px}.touch button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.dpad button:active,#plant:active{transform:translateY(2px);filter:brightness(1.25)}.touch{overscroll-behavior:contain}.boardWrap{isolation:isolate}
@media(pointer:coarse),(hover:none){.touch{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin:18px auto;gap:35px}.dpad{display:grid;grid-template-columns:repeat(3,58px);gap:6px}.dpad button{height:52px;padding:0;background:#263d36}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.touch #plant{width:96px;height:84px;background:#e7b958;color:#182a20;font-size:28px}.touch small{display:block;font-size:11px}.controls{display:none}}
@media(min-width:701px) and (max-width:1100px){main{padding:20px}.layout{grid-template-columns:130px minmax(0,1fr);gap:16px}}
@media(max-width:700px){.devicebar{font-size:9px;gap:8px;flex-wrap:wrap}.devicebar span{width:100%;letter-spacing:.3px}.devicebar label{margin-left:0}.devicebar button{margin-left:auto}.modal{padding:16px}h2{font-size:21px}.touch{margin:14px 12px}.arenaTop{gap:5px}#objective{font-size:8px}.power{flex-shrink:0}.heading>div:first-child{min-width:0}}
@media(max-height:550px) and (orientation:landscape) and (pointer:coarse){header,.heading,.layout>aside,.devicebar>span,footer{display:none}.devicebar{position:absolute;top:6px;left:12px;width:155px;display:block}.devicebar button{margin-top:6px}main{padding-top:5px}.layout{display:block;width:min(58vw,calc((100dvh - 70px)*13/11));margin:auto}.arenaTop{padding:5px;font-size:8px}.arenaBottom{padding:5px;font-size:9px}#objective{display:none}.touch{margin:0;position:static}.dpad{position:fixed;bottom:20px;left:max(12px,env(safe-area-inset-left));grid-template-columns:repeat(3,44px);gap:4px}.dpad button{height:42px}.touch #plant{position:fixed;right:max(15px,env(safe-area-inset-right));bottom:25px;width:80px;height:76px}.modal{padding:8px}#modalIcon{font-size:30px}h2{font-size:17px;margin:6px}#modalText{font-size:10px;margin:6px}#action{padding:8px 20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.companyLinks{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.companyLinks a{color:#ffd16a;text-decoration:underline}#company{color:#f4d38c}.devicebar{flex-wrap:wrap}.brandNote{font-size:11px;color:#c5d9c5}
@media(max-width:700px){.devicebar button{margin-left:0}.tag{display:none}footer{flex-wrap:wrap}footer b{color:#e9c877}}

/* Moonlit pixel adventure: amber lanterns, indigo stone and readable play. */
body{background:#0c0e19}body:before{background:radial-gradient(ellipse at 50% 0,#40344955,transparent 65%),radial-gradient(ellipse at 80% 50%,#15394033,transparent 60%)}.heroSprite{width:100px;height:112px;flex-shrink:0;background-image:url('assets/pixel-atlas-v1.png');background-size:400% 400%;background-position:0 0;image-rendering:pixelated;filter:drop-shadow(0 8px 18px #f4a63833);margin-right:15px}.heading{justify-content:flex-start}.heading .power{margin-left:auto}.heading h1{font-size:29px}.heading h1 span{color:#adb9cb}.arena{border-color:#4d4352;box-shadow:0 20px 70px #0009,0 0 40px #e7ae3910;background:#131828}.arenaTop,.arenaBottom{background:#1c2030}.boardWrap{background:#111425}.chapter>span{background:#292a3a}.mission{background:#1b1e2c;border-color:#ffffff12}canvas{image-rendering:pixelated}.modal{background:#121727eb;border:1px solid #b38b4b66;border-radius:18px;box-shadow:0 12px 50px #0008}#overlay{background:#080c1888;backdrop-filter:blur(3px)}#modalTitle{color:#ffe1a3}.devicebar select{background:#232a39}#levels button.active{background:#f0c573}#action{background:#f4c96f}.tip b{color:#f3ca87}.arenaBottom{color:#c1c5d4}.devicebar{color:#aab4c8}footer b{color:#f0c778}
@media(max-width:1100px){.heading h1{font-size:25px}.heroSprite{width:85px;height:95px}}@media(max-width:700px){.heroSprite{width:60px;height:68px;margin-right:8px}.heading h1{font-size:18px}.heading .eyebrow{font-size:8px;letter-spacing:.5px}.heading .sub{font-size:9px}.power{min-width:66px;padding-left:8px}.power small{font-size:9px}.power strong{font-size:25px}.heading{gap:0}.heading>div:nth-child(2){flex:1;min-width:0}.heading .power{flex:0 0 66px}.power #bars{gap:2px}#bars i{width:10px}.modal{max-width:90%}#modalText{font-size:11px}.modal #modalIcon{font-size:42px}}
@media(max-width:700px){main{padding-top:10px}header{padding-bottom:10px;gap:10px}.brand{font-size:20px}header button{padding:7px 9px;font-size:10px}.heading{padding:11px 0}.heading h1{font-size:16px;margin:2px 0;line-height:1.4}.heading .eyebrow{font-size:7px;margin:0 0 4px;letter-spacing:0}.heading .sub{display:none}.heroSprite{width:54px;height:62px}.devicebar{margin-bottom:8px;gap:5px}.devicebar>span{display:none}.devicebar button{font-size:9px;padding:6px 8px}.devicebar select{padding:5px;font-size:10px}.arenaTop{padding:8px 10px}.arenaBottom{padding:8px 10px}.touch{max-width:360px;margin:10px auto;gap:20px}.dpad{grid-template-columns:repeat(3,48px);gap:4px}.dpad button{height:42px}.touch #plant{height:76px;width:86px}footer{padding:12px 0;font-size:8px}.inGame .heading{display:none}}

.modalMascot{display:block;width:100px;height:108px;margin:auto;background:url('assets/pixel-atlas-v1.png') 0 0/400% 400%;image-rendering:pixelated;filter:drop-shadow(0 5px 12px #f8b84444)}@media(max-width:700px){.modalMascot{width:68px;height:74px}}

/* High quality downsampling for fine detail; app icons render from vector masters. */
canvas,.heroSprite,.modalMascot{image-rendering:auto}