/* Palette and type follow safeandsoundpost.com: black, white, powder blue,
   uppercase with wide tracking. The pixel font lives only inside the canvas. */
:root{
  --bg:#000; --ink:#fff; --blue:#a9c2e0; --accent:#5b8cc6; --line:#2a3440;
  --sans:ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  height:100%;margin:0;background:var(--bg);color:var(--ink);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
}
.shell{
  position:relative;
  width:min(100%,470px);max-height:100%;margin:8px;
  background:var(--bg);
  border:2px solid var(--blue);border-radius:16px 16px 44px 16px;
  padding:12px 16px 18px;display:flex;flex-direction:column;gap:12px;
}
/* The checkerboard from the site footer, tucked into the square corner */
.shell::after{
  content:"";position:absolute;left:14px;bottom:14px;width:36px;height:24px;pointer-events:none;
  background:conic-gradient(var(--blue) 25%,transparent 0 50%,var(--blue) 0 75%,transparent 0) 0 0/24px 24px;
  opacity:.9;
}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:block;height:18px;width:auto;min-width:0}
.mute{
  font:inherit;font-size:9px;letter-spacing:.2em;color:var(--ink);background:none;
  border:2px solid var(--ink);border-radius:6px;padding:6px 8px;cursor:pointer;flex:none;
}
.mute:hover{border-color:var(--blue);color:var(--blue)}
.screen{background:#050505;border:2px solid var(--line);border-radius:10px 10px 26px 10px;padding:10px;display:flex;justify-content:center}
canvas{
  display:block;aspect-ratio:160/144;width:auto;background:#000;touch-action:none;
  height:min(calc(100vh - 330px),calc((100vw - 76px)*0.9),369px);
  height:min(calc(100dvh - 330px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)),calc((100vw - 76px)*0.9),369px);
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.controls{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.dpad{display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px)}
.btn{font:inherit;color:var(--ink);border:2px solid var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;touch-action:none;-webkit-user-select:none;user-select:none;padding:0}
.dir{background:var(--bg);font-size:14px;box-shadow:0 4px 0 var(--accent)}
.u{grid-area:1/2;border-radius:10px 10px 0 0;border-bottom:0}.d{grid-area:3/2;border-radius:0 0 10px 10px;border-top:0}
.l{grid-area:2/1;border-radius:10px 0 0 10px;border-right:0}.r{grid-area:2/3;border-radius:0 10px 10px 0;border-left:0}
.hub{grid-area:2/2;background:var(--bg);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);box-shadow:0 4px 0 var(--accent)}
.ab{display:flex;gap:14px;align-items:flex-end}
.round{border-radius:50%;box-shadow:0 5px 0 var(--accent);letter-spacing:.1em}
.a{background:var(--blue);border-color:var(--blue);color:#000;width:66px;height:66px;font-size:20px;margin-bottom:22px}
.b{background:var(--bg);border-color:var(--blue);color:var(--blue);width:56px;height:56px;font-size:16px}
.btn small{font-size:7px;letter-spacing:.15em;opacity:.85}
.btn.on{transform:translateY(3px);box-shadow:0 1px 0 var(--accent)}
.btn:focus-visible,.mute:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.hint{color:var(--blue);opacity:.7;font-size:8px;text-align:center;line-height:1.8;padding-left:40px}
@media (orientation:landscape) and (max-height:500px){
  .shell{flex-direction:row;flex-wrap:wrap;width:auto;align-items:center;gap:10px}
  .top{width:100%;order:-2}.controls{display:contents}.dpad{order:-1}.hint{display:none}
  .shell::after{display:none}
  canvas{height:min(calc(100dvh - 110px),380px)}
}