/* The photograph is the handset. Live game and touch targets sit on its display and keys. */
main{max-width:1600px;grid-template-columns:minmax(260px,360px) minmax(0,1fr);align-items:start;padding:32px 5% 48px;gap:20px;overflow:visible;background:#101511}
.intro{padding-top:170px;position:sticky;top:35px}
h1{font-size:clamp(40px,3.5vw,56px)}
.lede{font-size:19px}.launch{margin-top:35px}
.arcade{min-width:0}.arcade:before{display:none}.orbit-label{margin:0 0 14px;font-size:12px}
.phone{width:min(100%,620px);aspect-ratio:640 / 1480;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;position:relative;overflow:hidden;container-type:inline-size}
.phone-asset{position:absolute;width:160%;height:auto;max-width:none;left:-30.47%;top:-2.03%;user-select:none;pointer-events:none}
.speaker,.phone-brand,.model{display:none}
.screen-frame{position:absolute;left:15.85%;top:23.95%;width:67.2%;height:20.1%;border:0;border-radius:4%;padding:1.2%;display:flex;flex-direction:column;overflow:hidden;background:#a7b97d;box-shadow:inset 2px 3px 10px #25331370}
.screen-frame canvas{width:100%;flex:1;min-height:0;height:0;image-rendering:pixelated;outline-offset:-3px}
.lcd-top,.lcd-bottom{height:10%;flex-shrink:0;font-size:2.1cqw;line-height:1}.lcd-top{font-size:1.8cqw}
.phone-controls{position:absolute;inset:0;padding:0;display:block;pointer-events:none}
.phone-controls button,.phone-controls .navi{position:absolute;background:transparent;border:0;box-shadow:none;color:transparent;border-radius:45%;padding:0;font-size:0;pointer-events:auto}
.phone-controls #restart{left:14%;top:51%;width:20%;height:8%}
.phone-controls #menu{left:29%;top:49%;width:42%;height:5.5%}
.phone-controls #sound{left:68%;top:51%;width:20%;height:9%}
.phone-controls button:active{background:#bee57935;filter:none;transform:none}
.keypad{position:absolute;inset:0;padding:0;display:block;pointer-events:none}
.keypad button{position:absolute;width:22%;height:5.8%;background:transparent;color:transparent;border:0;box-shadow:none;padding:0;pointer-events:auto;font-size:0}
.keypad button span{display:none}
.keypad button:nth-child(3n+1){left:11%}.keypad button:nth-child(3n+2){left:39%}.keypad button:nth-child(3n){left:68%}
.keypad button:nth-child(-n+3){top:62%}.keypad button:nth-child(n+4):nth-child(-n+6){top:69.3%}.keypad button:nth-child(n+7):nth-child(-n+9){top:76.7%}.keypad button:nth-child(n+10){top:84.1%}
.keypad button:nth-child(3n+2){margin-top:4%}
.keypad button:active,.keypad button.pressed{background:#bee57945;filter:none;transform:none;box-shadow:0 0 14px #bee57940}
.phone-caption{width:min(100%,530px);font-size:12px;margin:15px 0 0}.side-note{display:none}
@media(min-width:1500px){main{grid-template-columns:380px minmax(0,1fr)}.phone{width:680px}}
@media(max-width:900px){main{grid-template-columns:250px minmax(0,1fr);padding:26px 3%;gap:10px}.intro{padding-top:100px}h1{font-size:38px}.lede{font-size:17px}.primary{min-width:220px;gap:20px;padding:16px}.control-guide{gap:14px}.phone-caption{font-size:10px}}
@media(max-width:650px){header{height:66px}main{display:flex;flex-direction:column;gap:28px;padding:18px 0 36px}.arcade{order:0;width:100%}.intro{order:1;position:static;padding:0 6%;text-align:center}.phone{width:min(100%,540px)}.orbit-label{display:block;font-size:10px;margin-bottom:10px}.phone-caption{width:88%;font-size:10px}.intro h1{font-size:38px;margin:14px 0}.intro .eyebrow{font-size:11px}.launch{margin-top:25px}.primary{margin-inline:auto}.tokenomics{padding-top:34px}}
/* Fit the complete handset, including the last keypad row, into the first viewport. */
header{height:80px}
main{min-height:calc(100svh - 80px);grid-template-columns:minmax(260px,400px) minmax(0,1fr);align-items:center;padding:16px 7%;gap:clamp(24px,5vw,80px)}
.intro{position:static;padding-top:0}
.phone{width:min(100%,calc((100svh - 160px) * .432432),440px)}
.orbit-label{font-size:11px;margin-bottom:10px}
.phone-caption{width:min(100%,340px);font-size:10px;margin-top:10px}
.intro h1{font-size:clamp(36px,3.5vw,52px)}
.intro .lede{font-size:18px;line-height:1.5}.intro .primary{margin-top:24px}.intro .launch{margin-top:28px}
@media(max-width:900px) and (min-width:651px){main{grid-template-columns:minmax(240px,1fr) minmax(0,1fr);padding:16px 4%;gap:20px}.intro h1{font-size:36px}.intro .lede{font-size:16px}}
@media(max-width:650px){header{height:64px}main{min-height:0;display:flex;padding:12px 0 32px;gap:32px}.arcade{width:100%;order:0}.phone{width:min(92vw,calc((100svh - 136px) * .432432),390px)}.orbit-label{font-size:10px;margin-bottom:8px}.phone-caption{width:min(88%,310px);margin-top:8px;font-size:9px}.intro{padding:0 6%;order:1}.intro h1{font-size:36px}.intro .launch{margin-top:24px}}
@media(max-height:550px) and (min-width:651px){header{height:56px}main{min-height:calc(100svh - 56px);padding-block:10px}.phone{width:min(100%,calc((100svh - 112px) * .432432))}.orbit-label,.phone-caption{display:none}.intro h1{font-size:30px;margin:12px 0}.intro .lede{font-size:15px;margin:10px 0}.intro .eyebrow{font-size:10px}.intro .primary{margin-top:12px;padding:12px 18px}.intro .control-guide{margin-top:16px}.intro .launch{margin-top:16px}}