*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#4A3F8F;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
body{font-family:"Nunito","Varela Round","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;color:#d8d2f0}
#console{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px}
#console:before{content:"";position:absolute;left:-10%;right:-10%;top:4%;height:62%;background:#5A4FA3;border-radius:0 0 50% 50% / 0 0 30% 30%;z-index:-1}
#console.stack{flex-direction:column}
#console.side{flex-direction:row}
#bezel{position:relative;background:#2B2B33;border-radius:22px;padding:28px 46px 18px}
.narrow #bezel{padding:24px 6px 10px;border-radius:14px}
#bezel .brand{position:absolute;left:0;right:0;top:7px;text-align:center;font-style:italic;font-weight:800;letter-spacing:.05em;color:#d6d0f2;font-size:11px;white-space:nowrap;overflow:hidden}
#bezel .power{position:absolute;left:10px;top:44%;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:7px;font-weight:800;letter-spacing:.06em;color:#9a94b8}
#bezel .power i{width:7px;height:7px;border-radius:50%;background:#58d838;box-shadow:0 0 0 1px #1a1a1e}
.narrow #bezel .power{left:4px;top:8px;flex-direction:row}
.narrow #bezel .power{font-size:0}
.sh{position:absolute;top:-9px;width:64px;height:16px;border:0;background:#b9b4d6;color:#3b3560;font-weight:900;font-size:10px;line-height:16px}
.sh.l{left:10px;border-radius:12px 6px 2px 2px;text-align:left;padding-left:10px}
.sh.r{right:10px;border-radius:6px 12px 2px 2px;text-align:right;padding-right:10px}
.sh.on{filter:brightness(.85)}
#screen{background:#F8F8F8;line-height:0;outline:2px solid #17171c;overflow:hidden;position:relative}
#screen canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
#pad{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:6px 14px;width:100%;max-width:560px}
.side #pad{display:contents}
#dpad{position:relative;width:108px;height:108px;display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px)}
#dpad .d{background:#3a3a44;border:0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
#dpad .up{grid-column:2;grid-row:1;border-radius:5px 5px 0 0}
#dpad .left{grid-column:1;grid-row:2;border-radius:5px 0 0 5px}
#dpad .mid{grid-column:2;grid-row:2;background:#3a3a44;position:relative}
#dpad .mid:after{content:"";position:absolute;inset:11px;border-radius:50%;background:#2e2e36}
#dpad .right{grid-column:3;grid-row:2;border-radius:0 5px 5px 0}
#dpad .down{grid-column:2;grid-row:3;border-radius:0 0 5px 5px}
#dpad button.on{filter:brightness(1.4)}
#pills{display:flex;justify-content:center;gap:18px;align-self:end;padding-bottom:6px}
#pills div{display:flex;flex-direction:column;align-items:center;gap:3px}
#pills span{font-weight:800;font-size:10px;letter-spacing:.08em;color:#cfc8ee}
.pill{width:44px;height:13px;border-radius:8px;border:0;background:#2f2a5e;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
#ab{display:flex;gap:16px;padding:8px 0}
#ab div{display:flex;flex-direction:column;align-items:center}
#ab .a{margin-top:-24px}
#ab button{width:56px;height:56px;border-radius:50%;border:0;background:#B9B4D6;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 0 0 2px #2f2a5e}
#ab button:after{font-weight:900;font-size:22px;color:#3b3560}
#ab .a button:after{content:"A"}
#ab .b button:after{content:"B"}
#ab span{display:none}
#ab button.on,.pill.on{filter:brightness(.85)}
#hint{grid-column:1/-1;text-align:center;font-weight:800;font-style:italic;font-size:11px;letter-spacing:.05em;color:#b7aee8}
.side #dpad{order:-1}
.side #hint{display:block;position:absolute;left:0;right:0;bottom:4px;font-size:10px;pointer-events:none}
.side #pills{flex-direction:row;position:absolute;bottom:24px;right:14px;left:auto;transform:none;padding:0}
@media (hover:hover){button{cursor:pointer}}

.narrow #pad{gap:4px 6px;max-width:100%;padding:0 4px}
.narrow #dpad{width:96px;height:96px;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px)}
.narrow #ab{gap:10px}
.narrow #ab button{width:48px;height:48px}
.narrow #ab .a{margin-top:-18px}
.narrow #pills{gap:8px}
.narrow .pill{width:38px}
.narrow #hint{font-size:10px;line-height:1.3}

#stage{position:fixed;inset:0;z-index:1;pointer-events:none}
#stage canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#pad,.sh{position:relative;z-index:2}
.sh{position:absolute}

#stage canvas{pointer-events:none}
#dpad,#pills,#ab,#hint{position:relative;z-index:3}
.sh{z-index:3}
#pills button,#ab button,#dpad button,.sh{touch-action:none}

.side #pills{position:absolute}

#logo{grid-column:1/-1;text-align:center;font-style:italic;font-weight:900;color:#8f86d0;letter-spacing:.12em;line-height:1.1;display:none}
#logo b{display:block;font-size:22px}
#logo span{font-size:10px;letter-spacing:.2em}
.stack.narrow #logo{display:block;margin-top:6px}
.stack.narrow{gap:20px}
.stack.narrow #pad{row-gap:14px}
.stack.narrow #pills{flex-direction:column;gap:10px;align-self:center;padding:0}
@media (min-height:600px){
  .stack.narrow #dpad{width:114px;height:114px;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px)}
  .stack.narrow #ab button{width:56px;height:56px}
  .stack.narrow #ab .a{margin-top:-24px}
}

.stack.narrow{justify-content:flex-start;padding-top:max(14px,4vh);gap:0}
.stack.narrow #bezel{margin-top:10px}
.stack.narrow #pad{flex:0 0 auto;align-content:start;padding-bottom:4px;row-gap:8px}

/* tall upright phones: the controls grow into the room under the screen */
@media (min-height:700px) and (max-aspect-ratio:3/4){
  .stack.narrow #dpad{width:min(140px,17vh,36vw);height:min(140px,17vh,36vw);grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
  .stack.narrow #ab{gap:10px}
  .stack.narrow #ab button{width:min(64px,8.5vh,16vw);height:min(64px,8.5vh,16vw)}
  .stack.narrow #ab button:after{font-size:26px}
  .stack.narrow #ab .a{margin-top:-28px}
  .stack.narrow .pill{width:52px;height:16px}
  .stack.narrow #pills span{font-size:11px}
  .stack.narrow #logo b{font-size:26px}
  .stack.narrow #hint{font-size:11px}
  .stack.narrow #pad{padding-top:6px;padding-bottom:8px}
}

/* the goal line: what to do right now */
#goal{grid-column:1/-1;justify-self:center;max-width:94%;min-height:1.2em;text-align:center;font-weight:800;font-size:12px;letter-spacing:.03em;color:#F8F0FF;background:#3a3178;border-radius:10px;padding:5px 12px;position:relative;z-index:3;pointer-events:none}
#goal:empty{visibility:hidden}
.side #goal{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:11px;padding:3px 10px;white-space:nowrap}
#hint .touch{display:none}
@media (pointer:coarse){#hint .touch{display:inline}#hint .keys{display:none}}
@media (min-height:700px) and (max-aspect-ratio:3/4){.stack.narrow #goal{font-size:14px;padding:8px 14px}}

/* the D-pad carries its four arrows, moulded into the plastic */
#dpad button.d{position:relative}
#dpad button.d:after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border:7px solid transparent;transform:translate(-50%,-50%)}
#dpad button.up:after{border-bottom-color:#5c5c6a;border-top-width:0;margin-top:-2px}
#dpad button.down:after{border-top-color:#5c5c6a;border-bottom-width:0;margin-top:2px}
#dpad button.left:after{border-right-color:#5c5c6a;border-left-width:0;margin-left:-2px}
#dpad button.right:after{border-left-color:#5c5c6a;border-right-width:0;margin-left:2px}
#dpad{filter:drop-shadow(0 2px 0 #1e1e24)}
/* on an upright phone the screen takes the room the logo had */
.stack.narrow #logo{display:none}
/* the goal pill keeps two lines of room on an upright phone, so the screen does not jump as it changes */
.stack.narrow #goal{min-height:calc(2.6em + 10px);display:flex;align-items:center;justify-content:center}
.stack.narrow #goal:empty{visibility:hidden}
/* upright phone: the console starts at the top with room for the L and R tabs, and never centres itself off the screen */
#console.stack.narrow{justify-content:flex-start;padding-top:14px;padding-bottom:4px}