:root{
  --surround:#241442;
  --ink:#ffe9b8;
  --jump:#ff4fd8;
  --duck:#2ee6d6;
  --btn-ink:#120b26;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--surround:#120b26;}}
:root[data-theme="dark"]{--surround:#120b26;}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  height:100%;margin:0;background:var(--surround);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
#screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;box-shadow:0 0 0 2px #4a2a78,0 12px 40px rgba(0,0,0,.55);outline:none;}
#pad{display:none;gap:12px;width:min(94vw,520px);}
#pad button{flex:1;height:64px;font:700 18px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;border:0;border-radius:10px;color:var(--btn-ink);touch-action:none;-webkit-tap-highlight-color:transparent;}
#pad #jump{background:var(--jump);}
#pad #duck{background:var(--duck);}
#pad button:active{filter:brightness(1.15);transform:translateY(1px);}
#pad button:focus-visible,#screen:focus-visible{outline:3px solid #ffd23f;outline-offset:3px;}
@media (pointer:coarse){#pad{display:flex;}}
/* Top-right button stack: fullscreen, handedness swap, Instagram. A flex
   column, so whichever buttons are showing stack with no gaps. */
#corner{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);
  display:flex;flex-direction:column;gap:8px;z-index:5;}
#fsBtn,#handBtn{display:none;
  width:40px;height:40px;border:0;border-radius:8px;background:#3a2a58;color:#ffe9b8;font:16px ui-monospace,Menlo,Consolas,monospace;
  touch-action:none;-webkit-tap-highlight-color:transparent;}
/* Instagram link: neon gold frame; the logo is instagram.svg used as a mask
   (the file draws in currentColor, which is black as a plain image). */
#igBtn{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:40px;height:40px;border-radius:8px;
  background:#1a0f33;border:2px solid #ffd23f;box-shadow:0 0 6px #ffd23f,0 0 14px rgba(255,210,63,.55),inset 0 0 6px rgba(255,210,63,.5);
  filter:drop-shadow(0 0 3px rgba(255,210,63,.6));-webkit-tap-highlight-color:transparent;}
#igBtn span{display:block;width:22px;height:22px;background:#ffd23f;
  -webkit-mask:url(../instagram.svg) center/contain no-repeat;mask:url(../instagram.svg) center/contain no-repeat;}
#igBtn:active{filter:brightness(1.25) drop-shadow(0 0 3px rgba(255,210,63,.6));}
#igBtn:focus-visible{outline:3px solid #3ff3ff;outline-offset:3px;}
body.playing #igBtn{display:none;}
#fsBtn:active,#handBtn:active{filter:brightness(1.2);}
@media (pointer:coarse){#fsBtn.supported{display:block;}}
/* Landscape on touch: no pad during play — the screen halves are the controls
   (input.js). The pad only appears, overlaid at the bottom, for initials entry.
   Top buttons hide during a take (body.playing) so nothing covers the HUD. */
@media (pointer:coarse) and (orientation:landscape){
  body{gap:0;}
  /* The canvas is sized to the full viewport here, so drop the root safe-area
     padding (iOS home-screen app: the landscape bottom inset shrank the body and
     the centered canvas overflowed upward, cutting off the top) and pin it. */
  :root{padding:0;}
  #screen{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);}
  #pad{display:none;}
  #handBtn{display:block;}
  body.playing #fsBtn,body.playing #handBtn{display:none;}
}