@font-face{font-family:LandingMyanmar;src:url('/assets/myanmar-bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;font-family:LandingMyanmar,'Myanmar Text',sans-serif;color:#fff2b4;--safe:env(safe-area-inset-bottom,0px);--deep:#03102c;--mid:#123785;--bright:#3ad4ff;--shadow:#020b25}
*{box-sizing:border-box}html{margin:0;min-width:280px}body{margin:0;background:radial-gradient(ellipse at top,var(--mid),var(--deep) 80%);padding-bottom:calc(clamp(116px,25vw,170px) + var(--safe) + 14px)}
body[data-theme='03-jade-green']{--deep:#001d10;--mid:#006b39;--bright:#71f6a4;--shadow:#001e12}body[data-theme='04-purple-gold']{--deep:#1b042e;--mid:#66248d;--bright:#df94ff;--shadow:#1b032e}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:4px}
.landing{max-width:724px;margin:auto;box-shadow:0 0 70px #0008;background:var(--deep)}.poster{position:relative;aspect-ratio:1/3;overflow:hidden;background:var(--deep)}.master-art{display:block;width:100%;height:auto}
.brand{position:absolute;left:42%;top:.7%;width:55%;display:flex;align-items:center;flex-direction:column;gap:clamp(2px,.5vw,4px)}.brand-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 3px var(--shadow))}.brand-platform{font:800 clamp(11px,2.9vw,21px)/1.4 Arial,sans-serif;letter-spacing:.12em;color:#fff3ad;background:linear-gradient(var(--mid),var(--deep));border:1px solid #ffd975;border-radius:999px;padding:2px 16px;box-shadow:0 2px 6px #0006}
.headline{position:absolute;top:25%;left:2%;width:96%;margin:0;text-align:center;font-size:clamp(16px,4.7vw,34px);line-height:1.55;color:#fff17c;text-shadow:2px 2px 0 var(--shadow),-2px -2px 0 var(--shadow),0 3px 8px var(--shadow)}
.hero-actions{position:absolute;left:8%;top:28.5%;width:84%;display:grid;gap:clamp(6px,1.1vw,8px)}
.action{font-family:inherit;position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(6px,1.6vw,12px);width:100%;min-height:44px;height:clamp(44px,11vw,80px);padding:4px clamp(8px,2vw,20px);border:2px solid #fff282;border-radius:999px;box-shadow:0 0 0 2px #a66d15,0 0 0 4px var(--shadow),inset 0 2px 1px #fff7bc,inset 0 -5px 1px #b86b00,0 5px 9px #0006;text-decoration:none;color:#452400;font-size:clamp(14px,4.7vw,32px);font-weight:700;line-height:1.45;white-space:nowrap;background:linear-gradient(#fff58b 0%,#ffe849 30%,#ffd107 70%,#efa700 100%);cursor:pointer}
.action.h5{color:#fff6ba;background:linear-gradient(#a6f773 0%,#26cf44 25%,#049536 72%,#00662e 100%);box-shadow:0 0 0 2px #b17a10,0 0 0 4px var(--shadow),inset 0 2px 1px #ebffb9,inset 0 -5px 1px #005324,0 5px 9px #0006;text-shadow:0 2px 1px #074820}.action-symbol{flex-shrink:0;width:clamp(32px,8.3vw,60px);height:clamp(32px,8.3vw,60px);filter:drop-shadow(0 2px 2px #0006)}.action:hover{filter:brightness(1.08)}.action:active{filter:brightness(.94)}
.game-window{position:absolute;margin:0;left:6.9%;width:86.1%;height:13.08%;overflow:hidden;isolation:isolate;background:var(--deep)}.screen-fill{position:absolute;inset:-10px;background-image:var(--screen);background-size:cover;background-position:center;filter:blur(10px) brightness(.4);z-index:-1}.game-window img{display:block;width:100%;height:100%;object-fit:contain}
.game-title{position:absolute;left:27%;width:46%;margin:0;display:flex;align-items:center;justify-content:center;height:2.2%;color:#fff1b2;font-size:clamp(12px,3.6vw,26px);line-height:1.3;text-shadow:0 2px 2px var(--shadow)}.game-1{top:43%}.title-1{top:40.15%}.game-2{top:62.25%}.title-2{top:59.44%}.game-3{top:80.8%}.title-3{top:77.86%}body[data-theme='03-jade-green'] .title-1{top:40.48%}body[data-theme='03-jade-green'] .game-1{top:43.2%}
.release-summary{display:flex;gap:14px;align-items:center;justify-content:center;padding:16px;font:700 12px/1.5 Arial,sans-serif;background:var(--deep);border-top:1px solid #ffd46655}.age{border:1px solid #d8ac56;border-radius:999px;padding:1px 5px}
.dock{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:20;width:100%;max-width:724px;padding:7px 9px calc(7px + var(--safe));display:grid;gap:7px;border:2px solid #f4c54c;border-bottom:0;border-radius:20px 20px 0 0;background:linear-gradient(100deg,var(--deep),var(--mid) 50%,var(--deep));box-shadow:0 -4px 14px #0008}.dock .action{height:clamp(44px,9.3vw,67px);font-size:clamp(15px,4.3vw,28px);box-shadow:inset 0 2px 1px #fff9b0,inset 0 -3px 1px #bb7400,0 1px 4px #0006}.dock .h5{box-shadow:inset 0 2px 1px #d8ffb4,inset 0 -3px 1px #005321,0 1px 4px #0006}.dock .action-symbol{width:clamp(32px,8vw,48px);height:clamp(32px,8vw,48px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}
body.export{padding-bottom:0}body.export .dock{position:static;transform:none;margin:auto}body.export .landing{box-shadow:none}
@media(prefers-reduced-motion:no-preference){.action{transition:filter .12s ease}}@media(min-width:725px){.landing{border:1px solid #bc8f36}.dock{border-left-width:3px;border-right-width:3px}}

/* Same image composition; native lazy loading also covers blurred previews. */
.game-window img.screen-fill{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);object-fit:cover;filter:blur(10px) brightness(.4);z-index:-1}