:root{--bg:#090712;--panel:#160e26;--panel2:#221332;--pink:#f331cb;--lime:#a5ff18;--cyan:#28e7ff;--purple:#7d27ef;--orange:#ffac22;--text:#fbf7ff;--muted:#a49ab8}
*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,'Arial Black',sans-serif}body{overflow-x:hidden}button{cursor:pointer;font:inherit;color:inherit}button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}button:hover{filter:brightness(1.13)}button:active{transform:translateY(2px) scale(.99)}.hidden{display:none!important}#app{position:relative;max-width:1560px;margin:auto;min-height:100vh;padding:0 34px 20px}.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 15%,#39135970,transparent 45%),radial-gradient(ellipse at 0% 75%,#0c65702a,transparent 50%),linear-gradient(135deg,#0b0817,#14101e 65%,#100c1c)}.ambient-leaf{position:absolute;font-size:200px;opacity:.09;color:var(--pink);filter:blur(3px);animation:drift 8s infinite ease-in-out}.ambient-leaf.a{right:5%;top:30%}.ambient-leaf.b{bottom:12%;left:3%;color:var(--cyan);animation-delay:-3s}.ambient-leaf.c{top:3%;left:40%;font-size:85px;animation-delay:-5s}@keyframes drift{50%{transform:translateY(-28px) rotate(18deg)}}#siteHeader{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bf25c847;margin-bottom:28px}.brand{cursor:pointer;transform:skew(-4deg)}.brand-top{font-size:34px;line-height:1;font-weight:1000;letter-spacing:-2px;color:var(--cyan);text-shadow:3px 3px #542199,0 0 22px #23def661}.brand-top span{color:var(--orange);text-shadow:3px 3px #aa1978,0 0 15px #f98c2677}.brand-top small{color:#111;background:var(--lime);padding:2px 6px;font-size:13px;vertical-align:top;transform:rotate(8deg);display:inline-block;border-radius:4px}.brand-sub{font-size:10px;letter-spacing:3px;font-weight:1000;margin-top:9px;color:#ded1f3}.brand-sub span{color:var(--lime)}.top-actions{display:flex;align-items:center;gap:10px}.iconbutton,.header-btn{border:1px solid #8b4ba7;background:#1a1229;border-radius:13px;padding:12px 16px;box-shadow:inset 0 0 12px #da50d112}.iconbutton{font-size:26px;width:51px;height:50px;padding:5px}.header-btn{font-size:12px;letter-spacing:1.5px;font-weight:900}.header-btn b{background:var(--lime);color:#121122;padding:3px 6px;border-radius:6px;margin-left:7px}.hero-banner{display:grid;grid-template-columns:1fr 43%;min-height:490px;overflow:hidden;border:1px solid #b42cc7ad;border-radius:23px;background:linear-gradient(108deg,#181026 0%,#1b1333 56%,#311146 100%);box-shadow:0 0 40px #a133b022,inset 0 0 90px #9d25ad20;position:relative}.hero-banner:before{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(120deg,transparent 60%,#cf17cc13),repeating-linear-gradient(0deg,transparent 0px,transparent 39px,#ff2dd206 40px);}.hero-copy{position:relative;z-index:1;padding:58px 28px 45px 58px;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font-weight:1000;font-size:12px;letter-spacing:2.5px;color:var(--lime)}.eyebrow i{background:var(--pink);width:8px;height:8px;display:inline-block;border-radius:50%;margin-right:9px;box-shadow:0 0 10px var(--pink)}.hero-title{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(75px,8vw,142px);line-height:.84;font-style:italic;font-weight:1000;letter-spacing:-2px;text-shadow:7px 7px #4b175b,0 5px 0 #05050d;transform:skew(-4deg);margin:31px 0 24px}.hero-title em{font-style:inherit;color:var(--lime);text-shadow:7px 7px #5f157c,0 0 22px #98ff2d55}.hero-copy p{font-weight:500;color:#cfc2e3;font-size:16px;line-height:1.8;max-width:550px;margin:10px 0 27px}.hero-buttons{display:flex;gap:13px;flex-wrap:wrap}.big-button{padding:18px 24px;border-radius:12px;letter-spacing:1px;font-weight:1000;font-size:14px;box-shadow:0 5px 0 #06050d;transition:filter .1s,transform .1s}.big-button.primary{color:#151017;background:linear-gradient(135deg,#b7ff33,#63e900);border:2px solid #dcff72;box-shadow:0 0 20px #86f71348,0 5px 0 #0b0915}.big-button.secondary{border:2px solid #d42adb;background:linear-gradient(140deg,#581c84,#941c95)}.hero-foot{margin-top:auto;padding-top:32px;display:flex;flex-wrap:wrap;gap:12px;color:#bdacdc;font-weight:800;font-size:10px;letter-spacing:1px}.hero-foot span::first-letter{color:var(--pink)}.hero-portrait{position:relative;overflow:hidden;min-height:470px;background:#140b2c}.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;position:absolute;inset:0;filter:saturate(1.15) contrast(1.07)}.hero-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#1b132f 0%,transparent 33%),linear-gradient(0deg,#130e29bd,transparent 35%)}.portrait-stamp{z-index:2;position:absolute;bottom:28px;right:26px;text-align:center;padding:14px 17px;background:#11101acf;border:2px solid var(--lime);border-radius:12px;font-size:13px;font-weight:1000;line-height:1.3;color:var(--lime);transform:rotate(-5deg)}.splash-star{position:absolute;z-index:2;font-size:110px;color:var(--lime);opacity:.3;top:20px;right:15px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:34px 0 17px;font-family:Impact,'Arial Black',sans-serif;letter-spacing:1px;font-size:25px}.section-heading small{font-family:system-ui;font-size:11px;color:var(--muted);font-weight:900}.world-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.world-card{border:1px solid #682a83;background:#20152d;border-radius:16px;overflow:hidden;text-align:left;padding:0;position:relative;transition:transform .2s,border-color .2s}.world-card:hover{transform:translateY(-6px);border-color:var(--pink)}.world-card .world-image{height:134px;overflow:hidden}.world-card img{width:100%;height:100%;object-fit:cover}.world-card .world-card-text{padding:14px 16px 18px}.world-card strong{display:block;font-weight:1000;font-size:13px;letter-spacing:.4px;line-height:1.3}.world-card small{font-size:10px;color:var(--muted);margin-top:8px;display:block;font-weight:800}.world-card .world-number{position:absolute;top:12px;left:10px;background:var(--lime);color:#121018;font-weight:1000;font-size:12px;padding:4px 9px;border-radius:6px}.bottom-bar{display:flex;gap:11px;flex-wrap:wrap;margin-top:27px}.bottom-bar button,.text-button{border:1px solid #623577;background:#21142e;color:#e9d9fa;border-radius:10px;padding:13px 17px;font-size:12px;font-weight:900}.bottom-bar button:hover{border-color:var(--pink)}#gameScreen{padding-top:5px}#playFrame{width:min(100%,1160px);aspect-ratio:1160/720;margin:auto;background:#080713;border:2px solid #9934bb;border-radius:15px;position:relative;overflow:hidden;box-shadow:0 0 25px #a13cb328;touch-action:none}#gameCanvas{display:block;width:100%;height:100%}.game-top-controls{position:absolute;top:12px;right:14px;display:flex;gap:8px}.game-top-controls button{font-weight:1000;background:#0d0a1da8;border:1px solid #a030be;color:var(--lime);border-radius:9px;padding:5px 13px;font-size:21px}.game-bottom-tip{text-align:center;color:#b4a4c9;font-size:11px;letter-spacing:.6px;margin:14px 0}#touchControls{position:absolute;inset:0;pointer-events:none;display:none}#joystick{position:absolute;left:4%;bottom:7%;width:130px;height:130px;pointer-events:auto;touch-action:none;display:grid;place-items:center}#joystick small{position:absolute;bottom:-12px;font-weight:900;letter-spacing:2px;color:#ffffffac;font-size:9px}.joy-rim{width:118px;height:118px;border:3px solid #e638d388;border-radius:50%;background:#1e143981;box-shadow:0 0 20px #cb36cc4a,inset 0 0 25px #a22abb39;display:grid;place-items:center}.joy-rim #joyKnob{width:49px;height:49px;background:radial-gradient(circle at 35% 30%,#bdff4c,#5ab51f);border:3px solid #e3ff9d;border-radius:50%;box-shadow:0 0 13px #9bff00aa;transition:transform .03s}.touch-actions{position:absolute;bottom:6%;right:3.5%;display:grid;grid-template-columns:85px 64px;grid-template-rows:58px 58px 58px;gap:8px;align-items:center;justify-items:center}.touch-actions button{pointer-events:auto;touch-action:manipulation;border:2px solid #d64cef;background:#391855dc;border-radius:19px;font-size:22px;font-weight:1000;line-height:1;box-shadow:0 0 15px #d639cd66;width:61px;height:61px}.touch-actions button small{display:block;font-size:8px;margin-top:5px;letter-spacing:0}.touch-actions .touch-bomb{grid-row:1/span 2;grid-column:1;width:84px;height:84px;background:linear-gradient(135deg,#b6ff28,#68bd09);color:#101018;border-color:#ebff8f;border-radius:50%;font-size:38px}.touch-actions .touch-bomb small{font-size:10px}.game-top-controls{z-index:5}.touch-actions{z-index:5}#gameNotice{position:absolute;left:50%;top:14%;transform:translateX(-50%);padding:12px 20px;background:#110d25d9;color:var(--lime);border-radius:12px;font-weight:1000;font-size:13px;letter-spacing:1px;box-shadow:0 0 15px #000;display:none;pointer-events:none;z-index:6;text-align:center}#gameNotice.on{display:block;animation:popup .2s ease-out}@keyframes popup{from{transform:translateX(-50%) scale(.75)}}.inside-header{display:flex;gap:22px;align-items:center;padding:17px 0 0}.inside-header h1{font-family:Impact,'Arial Black';font-size:clamp(35px,5vw,64px);margin:10px 0}.inside-header h1 em{color:var(--lime);font-style:normal}.gallery-desc{color:#c9bbd9;line-height:1.7;max-width:950px;font-size:14px}.gallery-filters{display:flex;gap:10px;margin:20px 0}.filter{border:1px solid #6c317d;background:#221431;border-radius:9px;padding:12px 15px;font-weight:900;font-size:11px}.filter.active{background:var(--lime);border-color:var(--lime);color:#101119}#galleryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-bottom:32px}.gallery-item{cursor:pointer;background:#181126;border:1px solid #78428b;border-radius:15px;overflow:hidden;transition:transform .15s}.gallery-item:hover{transform:translateY(-4px);border-color:var(--pink)}.gallery-item img{width:100%;display:block;aspect-ratio:1491/1055;object-fit:cover}.gallery-item div{padding:13px 17px;font-weight:900;font-size:12px}.gallery-item div span{color:var(--lime);margin-right:9px}#lightbox{position:fixed;inset:0;background:#030205f5;z-index:100;display:grid;place-items:center}#lightboxImage{max-width:94vw;max-height:89vh;object-fit:contain;box-shadow:0 0 50px #f120ca22}#lightboxClose{position:absolute;top:10px;right:24px;background:none;border:0;font-size:42px}#lightboxPrev,#lightboxNext{position:absolute;top:50%;font-size:50px;background:#160b24aa;border:1px solid var(--pink);padding:4px 18px;border-radius:13px}#lightboxPrev{left:2%}#lightboxNext{right:2%}#lightboxCaption{position:absolute;bottom:9px;font-size:11px;font-weight:900;letter-spacing:1px;color:var(--lime)}#modalHost{position:fixed;z-index:70;inset:0;pointer-events:none}#modalHost:empty{display:none}.modal-mask{pointer-events:auto;position:absolute;inset:0;background:#020108d9;display:grid;place-items:center;overflow-y:auto;padding:22px}.modal{max-width:570px;width:100%;border:2px solid #d338d8;background:linear-gradient(145deg,#27123c,#120e1c);border-radius:20px;padding:32px;text-align:center;box-shadow:0 0 70px #a436ed33}.modal .modal-kicker{font-size:11px;letter-spacing:3px;color:var(--lime);font-weight:1000}.modal h2{font-family:Impact,'Arial Black';font-size:clamp(38px,6vw,65px);line-height:1.04;letter-spacing:1px;margin:13px 0 21px;font-style:italic}.modal h2 em{color:var(--lime);font-style:normal}.modal p{color:#c9bdd5;line-height:1.7;font-size:14px}.modal .modal-actions{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:22px}.modal .modal-actions button{min-width:155px}.mode-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0}.mode-row button{border:1px solid #813ea0;background:#321a46;padding:11px 12px;border-radius:8px;font-weight:900;font-size:12px}.mode-row button.selected{background:var(--lime);color:#11101b}.modal .setting{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #6d40804c;padding:14px 0;text-align:left;font-size:13px}.modal .setting select{background:#24162d;border:1px solid #9636a6;color:white;padding:8px;border-radius:8px}.onboarding{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#060310e8;padding:20px}.onboard-box{text-align:center;width:min(460px,100%);background:linear-gradient(145deg,#2c1747,#100b1f);padding:38px;border:2px solid #a7ff15;border-radius:25px;box-shadow:0 0 65px #7bef1548}.onboard-star{font-size:65px;color:var(--lime)}.onboard-box h2{font-family:Impact,'Arial Black';font-size:56px;margin:12px 0}.onboard-box h2 em{font-style:normal;color:var(--lime)}.onboard-box p{line-height:1.7;color:#bdaece}.onboard-box .text-button{display:block;margin:20px auto 0;border:0;background:transparent;color:#c1add2}
@media(max-width:1000px){#app{padding:0 18px 18px}.hero-copy{padding:36px 22px 32px 33px}.hero-title{font-size:clamp(57px,9vw,104px)}.world-cards{gap:8px}.world-card .world-card-text{padding:11px}.world-card strong{font-size:11px}.hero-banner{min-height:400px}.hero-portrait{min-height:400px}#galleryGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#app{padding:0 12px 12px}#siteHeader{height:78px;margin-bottom:17px}.brand-top{font-size:24px}.brand-sub{font-size:8px;letter-spacing:1.4px}.top-actions .iconbutton{width:40px;height:42px;font-size:21px}.header-btn{font-size:9px;padding:12px 8px}.hero-banner{grid-template-columns:1fr;min-height:0}.hero-copy{padding:30px 24px}.hero-title{font-size:82px}.hero-copy p{font-size:13px}.hero-portrait{min-height:235px;max-height:300px}.hero-portrait img{object-position:50% 55%}.hero-foot{padding-top:22px}.world-cards{grid-template-columns:repeat(2,1fr)}.world-card:last-child{grid-column:1/-1}.world-card .world-image{height:120px}.section-heading{font-size:20px}.section-heading small{font-size:9px}.bottom-bar button{flex:1 1 130px}#galleryGrid{grid-template-columns:1fr}.inside-header h1{font-size:35px}.gallery-filters{flex-wrap:wrap}.hero-buttons .big-button{font-size:12px;padding:16px}}
@media(pointer:coarse){#touchControls{display:block}}
@media (max-height:570px) and (orientation:landscape){#app{padding:0!important}#siteHeader{display:none}#gameScreen{padding:0}#playFrame{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;aspect-ratio:auto}#gameCanvas{width:100%;height:100%}.game-bottom-tip{display:none}#joystick{bottom:7%;left:5%}.touch-actions{bottom:4%;right:4%}.game-top-controls{top:7px;right:8px}}
:fullscreen #app{max-width:none;padding:0}:fullscreen #siteHeader{display:none}:fullscreen #gameScreen{padding:0}:fullscreen #playFrame{width:100vw;height:100dvh;border:0;border-radius:0;max-width:none;aspect-ratio:auto}:fullscreen #gameCanvas{width:100%;height:100%}:fullscreen .game-bottom-tip{display:none}

#touchThrow{grid-column:2;grid-row:3}.touch-actions button{width:59px;height:59px}
/* Preserve square gameplay tiles and character proportions at every aspect ratio. */
#gameCanvas{object-fit:contain}

.world-card .world-image{position:relative}.world-card .world-preview{position:absolute;right:8px;bottom:8px;width:38%;height:47%;border:2px solid #afff45;border-radius:6px;box-shadow:0 2px 10px #0009;overflow:hidden}.world-card .world-preview img{width:100%;height:100%;object-fit:cover;filter:saturate(1.2)}
/* Short landscape phone viewports: never trap users behind an oversized dialog. */
@media (orientation:landscape) and (max-height:570px){
 .onboarding{padding:6px;overflow-y:auto;align-items:center}
 .onboard-box{padding:12px 20px;max-height:calc(100dvh - 12px);overflow-y:auto}
 .onboard-star{font-size:27px}
 .onboard-box h2{font-size:33px;margin:5px 0}
 .onboard-box p{font-size:11px;line-height:1.35;margin:7px 0 10px}
 .onboard-box .big-button{padding:10px 15px;font-size:12px}
 .onboard-box .text-button{margin:5px auto 0;padding:6px 10px;font-size:10px}
 .modal-mask{display:flex;align-items:flex-start;justify-content:center;padding:7px;overflow:auto}
 .modal{margin:auto 0;padding:17px 20px;max-height:calc(100dvh - 14px);overflow-y:auto}
 .modal h2{font-size:34px;margin:7px 0 12px}
 .modal p{font-size:12px;line-height:1.4}
 .modal .mode-row{margin:9px 0}
 .modal .mode-row button{padding:8px;font-size:11px}
 .modal .modal-actions{margin-top:11px}
 .modal .big-button{padding:10px 13px;font-size:11px}
}
/* In widescreen phone landscape, reserve the letterbox gutters for touch inputs. */
@media (pointer:coarse) and (orientation:landscape) and (max-height:570px){
 #joystick{left:4px;bottom:13%;width:96px;height:100px}
 .joy-rim{width:87px;height:87px;border-width:2px}
 .joy-rim #joyKnob{width:40px;height:40px}
 .touch-actions{right:1.8%;bottom:6%;grid-template-columns:69px;grid-template-rows:53px 53px 53px 69px;gap:5px}
 .touch-actions button{grid-column:1!important;width:53px;height:53px;border-radius:15px;font-size:19px}
 .touch-actions #touchSpecial{grid-row:1}
 .touch-actions #touchCycle{grid-row:2}
 .touch-actions #touchThrow{grid-row:3}
 .touch-actions .touch-bomb{grid-column:1;grid-row:4;width:69px;height:69px;font-size:29px;border-radius:50%}
 .touch-actions button small{font-size:8px}
}