@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/press-start-2p-latin-400-normal.woff2") format("woff2");}
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
/* Layout: en enda arkadskärm (256x240, NES-upplösning) centrerad, touchkontroller under på mobil. Medvetet mörk, en look. */
:root{
  --bg:#111214; --frame:#000000; --edge:#2a2d30; --fg:#e6e6e6; --muted:#8c9096;
  --green:#5cbf4a; --btn:#26292c; --btn-hi:#34383c;
  --px:"Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg); font-family:var(--px); box-sizing:border-box;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:12px; display:flex; flex-direction:column; align-items:center; gap:12px;
}
#g{
  display:block; background:#000; border:4px solid var(--frame); box-shadow:0 0 0 2px var(--edge);
  image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; max-width:100%;
}
#g:focus-visible{outline:2px solid var(--green); outline-offset:4px}
.foot{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; font-size:8px; color:var(--muted); letter-spacing:.04em; line-height:1.6}
.foot b{color:var(--green); font-weight:400}
button{font-family:var(--px); color:var(--fg); background:var(--btn); border:2px solid #000; box-shadow:inset -2px -2px 0 #000a, inset 2px 2px 0 #fff2; cursor:pointer}
button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
#mute{font-size:8px; padding:6px 8px}
.stage{display:flex; flex-direction:column; align-items:center; gap:12px; width:100%}
.ctrl{display:none}
.stick{position:relative; width:128px; height:128px; border-radius:50%; background:var(--btn); border:3px solid #000;
  box-shadow:inset 0 0 0 2px #fff1, inset 0 6px 14px #0008; touch-action:none}
.stick::before,.stick::after{content:""; position:absolute; background:#0006; left:50%; top:50%; transform:translate(-50%,-50%)}
.stick::before{width:70%; height:14px}
.stick::after{width:14px; height:70%}
.knob{position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:#4a4f54; border:3px solid #000; box-shadow:inset -3px -3px 0 #0007, inset 3px 3px 0 #fff3; pointer-events:none; z-index:1}
.btns{flex-direction:column; align-items:center; gap:10px}
.small{display:flex; gap:10px}
.pill{font-size:8px; padding:8px 12px; border-radius:12px; touch-action:manipulation}
.ab{display:flex; gap:14px; align-items:flex-end}
.ab button{width:72px; height:72px; border-radius:50%; font-size:8px; line-height:1.4; touch-action:none}
.ab .a{background:#2f6a26; margin-bottom:22px}
.ab .b{background:#6a2620}
.ab button:active,.pill:active,.ab button.on{background:var(--btn-hi)}
.ab .a.on{background:#45913a} .ab .b.on{background:#923a30}
@media (pointer:coarse){
  html,body{overflow:hidden; overscroll-behavior:none}
  body{padding-block:8px; gap:8px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
  .ctrl{display:flex}
  .stage{display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"screen screen" "stick btns"; justify-items:center; align-items:center; gap:14px 8px}
  #g{grid-area:screen}
  .stick-wrap{grid-area:stick}
  .btns{grid-area:btns}
}
@media (pointer:coarse) and (orientation:landscape){
  body{justify-content:center}
  .stage{grid-template-columns:auto auto auto; grid-template-areas:"stick screen btns"; gap:14px; height:100%}
  .foot{display:none}
}