/* The chrome never eats width — a row must stay exactly as wide as the screen.
   It costs height instead: the ceiling drops by --band and everything lives up there. */
:root { --band: 96px; }
body.nohud { --band: 0px; }

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; background:#000; overflow:hidden; }
body { font:12px/1.5 ui-monospace, "DejaVu Sans Mono", monospace; color:#7a7a7a; cursor:none; }
body.showcursor { cursor:default; }

#c {
  position:fixed; left:0; top:var(--band);
  width:100vw; height:calc(100vh - var(--band));
  display:block; image-rendering:pixelated;
}
/* mobile browsers grow and shrink 100vh as the URL bar comes and goes, which
   would rebuild the board mid-game; dvh is the height we actually get */
@supports (height: 100dvh) {
  #c { height: calc(100dvh - var(--band)); }
}

#band { position:fixed; top:0; left:0; right:0; height:var(--band); overflow:hidden; }
body.nohud #band { display:none; }

/* a square in the corner, exactly as tall as the ceiling it stole */
#hud {
  position:absolute; left:0; top:0; width:var(--band); height:var(--band);
  padding:5px 6px; white-space:pre; font-size:10px; line-height:1.3;
  color:#5e5e5e; border-right:1px solid #262626; border-bottom:1px solid #262626;
}
#hud b { color:#c8c8c8; font-weight:normal; }
#hud .dim { color:#484848; }

/* the rest of the band is dead space anyway, so the key list lives there */
#help {
  position:absolute; left:calc(var(--band) + 14px); top:50%; transform:translateY(-50%);
  white-space:pre; color:#454545; font-size:10px;
  opacity:0; transition:opacity .6s;
}
#help.on { opacity:1; }

#toast {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:22px; color:#ff2e57; text-align:center; letter-spacing:2px;
  opacity:0; transition:opacity .35s; pointer-events:none;
  text-shadow:0 0 12px #000; white-space:pre-line;
}
#toast.on { opacity:1; }
#toast.small { font-size:12px; color:#4a4a4a; letter-spacing:1px; }

#overlay {
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:#000; text-align:center; padding:24px;
}
#overlay.hidden { display:none; }
#overlay h1 {
  font-size:44px; letter-spacing:14px; color:#ff2e57; font-weight:normal;
  text-shadow:0 0 24px #ff2e5766;
}
#overlay p { max-width:70ch; color:#6e6e6e; }
#overlay b { color:#d8d8d8; font-weight:normal; }
#overlay .go { color:#d8d8d8; border:1px solid #333; padding:10px 22px; cursor:pointer; }
#overlay .go:hover { border-color:#ff2e57; color:#fff; }
#overlay .back { color:#6e6e6e; }
#overlay .back:hover { color:#d8d8d8; }
#overlay .keys { color:#454545; white-space:pre; }
#counter { display:none; color:#4a4a4a; letter-spacing:1px; }
#counter.on { display:block; }
#counter b { color:#ff2e57; font-weight:normal; }

/* ---------------------------------------------------------------- phones
   A row is as wide as the screen, so a portrait phone is not a small version of
   this game, it is a different and worse one. Landscape or nothing. */
body {
  touch-action: none;              /* the canvas is a control surface, not a page */
  -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#rotate {
  display: none; position: fixed; inset: 0; z-index: 10; background: #000;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center; color: #6e6e6e;
}
/* drawn, not typed: a glyph would be tofu in any font that lacks it */
#rotate .glyph {
  width: 34px; height: 58px; border: 2px solid #ff2e57; border-radius: 7px;
  animation: tip 2.6s ease-in-out infinite;
}
@keyframes tip {
  0%, 30%   { transform: rotate(0deg); }      /* how you are holding it */
  60%, 100% { transform: rotate(90deg); }     /* how you should be */
}
@media (prefers-reduced-motion: reduce) { #rotate .glyph { animation: none; } }

body.portrait #rotate { display: flex; }
body.portrait #overlay { display: none; }

/* keyboard hints on desktop, finger hints on glass */
.touch { display: none; }
@media (pointer: coarse) {
  .keys { display: none; }
  .touch { display: block; }
  #overlay .go { padding: 14px 26px; }     /* a thumb is not a mouse pointer */
}

/* a landscape phone is ~400px tall; 96px of that is not a ceiling, it is a lid */
@media (max-height: 560px) {
  :root { --band: 62px; }
  #hud { font-size: 8px; line-height: 1.15; padding: 3px 4px; }
  #help { display: none; }
  #overlay h1 { font-size: 30px; letter-spacing: 8px; }
  #toast { font-size: 16px; }
}