:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#0b0f1b;color:#f7f8ff}body{background:radial-gradient(ellipse at 50% 30%,#273553 0%,#121a2d 40%,#090d17 100%)}.sitebar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px max(20px,calc((100vw - 1100px)/2));z-index:5}.sitebar a{color:#c9d5ef;text-decoration:none;font-size:13px;font-weight:700}.sitebar a:hover{color:white}.logo{font-size:18px!important;letter-spacing:-.06em}.logo b{color:#aebeff}.shell{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:76px 20px 30px;gap:15px}.heading{text-align:center}.heading h1{margin:0;font-size:clamp(22px,3vw,32px);letter-spacing:-.04em}.heading p{margin:7px 0 0;color:#aeb9cf;font-size:12px}.phone{position:relative;width:min(370px,calc((100dvh - 205px)*.475),calc(100vw - 40px));aspect-ratio:390/844;background:#090b11;border:5px solid #454b56;border-radius:clamp(28px,5vw,51px);padding:8px;box-shadow:0 0 0 2px #151b25,0 28px 80px #000b, inset 0 0 0 1px #8c95a2;overflow:hidden}.screen{position:relative;width:100%;height:100%;border-radius:clamp(20px,4vw,39px);overflow:hidden;background:#171f36}.screen iframe{width:100%;height:100%;border:0;display:block;background:#171f36}.island{position:absolute;top:13px;left:50%;transform:translateX(-50%);height:21px;width:95px;background:#05070a;border-radius:30px;pointer-events:none;z-index:2;box-shadow:0 1px 1px #ffffff19}.home-indicator{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);height:4px;width:92px;background:#ffffffc0;border-radius:10px;pointer-events:none;z-index:2}.footnote{color:#8997b2;font-size:12px;text-align:center}.switcher{display:flex;gap:18px;justify-content:center}.switcher a{font-size:12px;color:#aebeff;text-decoration:none}.switcher a[aria-current]{color:white;font-weight:800}@media(max-width:650px){html,body{height:100%;overflow:hidden;background:#101421}.sitebar,.heading,.footnote,.switcher,.island,.home-indicator{display:none}.shell{display:block;min-height:100dvh;padding:0}.phone{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;padding:0;box-shadow:none}.screen{border-radius:0;width:100%;height:100%}}@media(max-height:650px) and (min-width:651px){.heading p,.footnote{display:none}.shell{padding-top:55px;gap:8px}.phone{width:min(270px,calc((100dvh - 120px)*.475))}}
/* iPhone game launcher: desktop and mobile */
.phone .screen{transition:transform .34s cubic-bezier(.2,.8,.2,1),border-radius .34s,filter .34s;transform-origin:50% 46%}
.phone.hub-open .screen{transform:translateY(-9%) scale(.79);border-radius:28px;filter:brightness(.7);pointer-events:none}
.hub-home{position:absolute;inset:8px;z-index:4;display:flex;flex-direction:column;align-items:center;background:linear-gradient(155deg,#334e84,#192643 55%,#0d1529);border-radius:36px;color:white;opacity:0;visibility:hidden;transform:translateY(100%);transition:transform .38s cubic-bezier(.18,.8,.22,1),opacity .28s,visibility .38s;overflow:hidden;padding:34px 15px 50px}
.hub-home:before{content:"";position:absolute;width:270px;height:270px;top:28%;left:-90px;background:radial-gradient(circle,#ff903b55,transparent 68%);pointer-events:none}
.phone.hub-open .hub-home{transform:translateY(0);opacity:1;visibility:visible}
.hub-status{display:flex;justify-content:space-between;align-self:stretch;font-size:10px;font-weight:800;letter-spacing:.08em;opacity:.8}
.hub-title{font-size:clamp(20px,3vw,28px);font-weight:850;letter-spacing:-.05em;margin-top:clamp(35px,8vh,85px)}
.hub-apps{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%;margin-top:30px;max-width:290px}
.hub-app{appearance:none;border:0;background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:9px;font:600 11px system-ui;cursor:pointer;touch-action:manipulation;text-align:center}
.hub-icon{width:90px;height:90px;max-width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:22px;box-shadow:0 10px 20px #0006,inset 0 1px #ffffff66;font-weight:1000;font-size:57px;transition:transform .16s}
.hub-app:active .hub-icon{transform:scale(.92)}
.hub-five{background:linear-gradient(140deg,#ffbb44,#f46a16);color:white}.hub-clock{font-size:22px;align-self:center}
.hub-stick{background:linear-gradient(140deg,#fc5363,#b5174e);font-size:36px;position:relative}.hub-stick small{font-size:13px;position:absolute;bottom:8px;right:10px}
.hub-hint{margin-top:auto;font-size:11px;opacity:.65}
.home-gesture{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:170px;height:36px;z-index:8;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;touch-action:none;cursor:grab;outline-offset:-4px}
.home-gesture .home-indicator{position:static;transform:none;display:block;width:92px;height:5px;box-shadow:0 0 3px #0008;pointer-events:none}
.home-gesture:focus-visible{outline:2px solid #fff}
@media(max-width:650px){.hub-home{inset:0;border-radius:0;padding-top:max(36px,env(safe-area-inset-top));padding-bottom:max(48px,env(safe-area-inset-bottom))}.home-gesture{display:flex;bottom:env(safe-area-inset-bottom);height:42px;padding-bottom:13px}.home-gesture .home-indicator{display:block}.phone.hub-open .screen{transform:translateY(-7%) scale(.83)}.hub-title{margin-top:12vh}.hub-icon{width:min(25vw,100px);height:min(25vw,100px)}}

/* Stickman Reflex cover as home-screen app icon */
.hub-cover-icon{overflow:hidden;padding:0!important;background:#131725!important}
.hub-cover-icon img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* Prevent app artwork from expanding to the full phone viewport.
   Keep the cover constrained to an iOS-style square launcher icon. */
.hub-app { min-width:0; width:100%; }
.hub-app .hub-icon {
  display:block; position:relative; flex:0 0 auto;
  width:90px; height:90px; max-width:90px; max-height:90px;
  min-width:0; min-height:0; aspect-ratio:1 / 1;
  overflow:hidden; border-radius:22px;
}
.hub-app .hub-cover-icon > img {
  display:block; position:absolute; inset:0;
  width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:cover; object-position:center;
  border-radius:inherit;
}
@media(max-width:650px) {
  .hub-app .hub-icon {width:min(25vw,100px);height:min(25vw,100px);max-width:100px;max-height:100px}
}

/* 5 Seconds bomb has no square tile; show transparent PNG only. */
.hub-app .hub-bomb-icon{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.hub-app .hub-bomb-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px #0008)}

/* TORTORO app in phone launcher */
.hub-app .hub-tortoro-icon{background:radial-gradient(circle at 50% 50%,#2c4c42,#18283b);box-shadow:0 10px 20px #0006,inset 0 1px #ffffff33;}
.hub-app .hub-tortoro-icon img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5px;filter:drop-shadow(0 3px 3px #0007)}
.hub-apps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
.switcher{flex-wrap:wrap}

/* Three-app launcher, consistent grid and reliable square art */
.hub-apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:330px;width:100%;margin-top:32px}
.hub-app{font-size:10px;gap:8px;min-width:0}
.hub-app .hub-icon{width:clamp(60px,9vw,88px);height:clamp(60px,9vw,88px);max-width:100%;max-height:none}
.hub-app .hub-tortoro-icon{padding:0!important;background:#142c29!important;overflow:hidden!important}
.hub-app .hub-tortoro-icon img{padding:0!important;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
@media(max-width:650px){.hub-apps{gap:8px;max-width:330px}.hub-app .hub-icon{width:min(24vw,90px);height:min(24vw,90px)}}

/* TORTORO: dedicated landscape game viewport. Other games remain portrait. */
@media (min-width:651px) {
 .phone.phone-landscape {
   width:min(960px,calc(100vw - 40px),calc((100dvh - 200px)*1.6));
   aspect-ratio: 8 / 5; height:auto; max-width:none;
   border-radius:38px; padding:10px;
 }
 .phone.phone-landscape .screen {border-radius:27px;}
 .phone.phone-landscape .island {display:none;}
 .phone.phone-landscape .home-gesture {bottom:0;}
 .phone.phone-landscape .hub-home {border-radius:27px;}
 .phone.phone-landscape .hub-title {margin-top:18px;}
 .phone.phone-landscape .hub-apps {margin-top:20px;}
}
@media (max-width:650px) and (orientation:landscape) {
 .phone.phone-landscape {width:100vw;height:100dvh;aspect-ratio:auto;}
}

/* Stable clickable TORTORO launcher link */
.hub-app[href]{text-decoration:none;position:relative;z-index:6;cursor:pointer}
.hub-app[href] .hub-icon{pointer-events:none}
.hub-app[href] img{pointer-events:none}

/* TORTORO game-library icon: anchor positioning fix */
.hub-app .hub-icon.hub-tortoro-icon{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:#102a27!important;}
.hub-app .hub-icon.hub-tortoro-icon > img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;opacity:1!important;visibility:visible!important;transform:none!important;padding:0!important;filter:none!important;}