*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:#1a1a24;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}#shell{height:100%;display:flex;flex-direction:column}#screen-area{flex:1;min-height:0;display:flex}#bezel{flex:1;min-width:0;display:flex;flex-direction:column}#game{flex:1;min-height:0}#game canvas{image-rendering:pixelated}#bezel-label,#controls{display:none}body.handheld{background:#f3e5c2}body.handheld #shell{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}body.handheld #screen-area{padding:12px}body.handheld #bezel{background:#3a2c40;border-radius:12px 12px 40px;padding:14px;box-shadow:inset 0 2px 6px #00000080}body.handheld #bezel-label{display:block;text-align:center;padding-top:6px;font-family:monospace;font-size:11px;font-weight:700;letter-spacing:3px;color:#bcafde}body.handheld #controls{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"dpad ab" "menu menu";align-items:center;row-gap:26px;padding:10px 20px calc(18px + env(safe-area-inset-bottom))}body.handheld #dpad{grid-area:dpad}body.handheld #ab-btns{grid-area:ab}body.handheld #menu-btns{grid-area:menu;justify-self:center;align-self:start}#dpad{display:grid;grid-template-areas:". up ." "left mid right" ". down .";grid-template-columns:44px 44px 44px;grid-template-rows:44px 44px 44px;justify-self:start}.dpad-btn{border:2px solid #4b3b52;background:#5d4a66;box-shadow:0 3px #4b3b52;touch-action:none}.dpad-btn:active,.dpad-btn.pressed{background:#4b3b52;box-shadow:none;transform:translateY(2px)}.dpad-btn.up{grid-area:up;border-radius:10px 10px 0 0}.dpad-btn.down{grid-area:down;border-radius:0 0 10px 10px}.dpad-btn.left{grid-area:left;border-radius:10px 0 0 10px}.dpad-btn.right{grid-area:right;border-radius:0 10px 10px 0}.dpad-center{grid-area:mid;background:#5d4a66;border-top:2px solid #4b3b52;border-bottom:2px solid #4b3b52}#ab-btns{display:flex;gap:14px;align-items:center;justify-self:end;margin-right:10px;transform:rotate(-8deg)}.round{width:58px;height:58px;border-radius:50%;border:2px solid #4b3b52;font-family:monospace;font-size:20px;font-weight:700;color:#fff;touch-action:none}.round.a{background:#e8867c;box-shadow:0 4px #b95f5f}.round.b{background:#8fbf6f;box-shadow:0 4px #6a9451;margin-top:22px}.round:active,.round.pressed{box-shadow:none;transform:translateY(3px)}#menu-btns{display:flex;gap:12px;justify-self:center;align-self:end;padding-bottom:4px}.pill{width:52px;height:16px;border-radius:8px;border:2px solid #4b3b52;background:#c9b8d6;box-shadow:0 2px #4b3b52;font-family:monospace;font-size:7px;font-weight:700;color:#4b3b52;touch-action:none}.pill:active,.pill.pressed{box-shadow:none;transform:translateY(2px)}.pill:disabled{opacity:.55}@media(orientation:portrait){body.handheld #screen-area{flex:0 0 auto}body.handheld #bezel{width:100%}body.handheld #game{flex:none;width:100%;aspect-ratio:16 / 9}body.handheld #controls{flex:1;align-content:center}}@media(orientation:landscape){body.handheld #shell{flex-direction:row;align-items:center}body.handheld #screen-area{order:1;height:100%}body.handheld #controls{display:contents}body.handheld #dpad{order:0;margin-left:max(16px,env(safe-area-inset-left))}body.handheld #ab-btns{order:2;margin-right:max(20px,env(safe-area-inset-right))}body.handheld #menu-btns{position:fixed;left:50%;transform:translate(-50%);bottom:calc(6px + env(safe-area-inset-bottom))}}