/* 1Mazing on the web — the glasses' stylesheet (/glasses/app.css) with a browser theme on top.
 *
 * The glasses display is additive, so that sheet is pure black with bright type. A browser is an
 * ordinary screen: the site's navy, a column that grows on a desktop, and — for games driven by
 * arrow keys — a touch pad under the board (#pad, built by app.js when MAZING_WEB is set). */

body.web {
  --bg: #0b0e14;
  --surface: #161b29;
  --surface-hi: #1f2638;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(124, 137, 255, 0.16), transparent 60%),
    var(--bg);
  min-block-size: 100dvh;
}
/* The play column: phone-width on a phone, a comfortable board on a desktop, never past the fold. */
body.web #app {
  inline-size: min(100vw, 760px);
  block-size: 100dvh;
  padding-block-end: calc(var(--pad) + env(safe-area-inset-bottom));
}
body.web.pad-on #app { block-size: calc(100dvh - 168px - env(safe-area-inset-bottom)); }
@media (min-width: 900px) and (min-height: 700px) {
  body.web #app { block-size: min(100dvh, 860px); }
  body.web.pad-on #app { block-size: min(calc(100dvh - 168px), 760px); }
  body.web .launcher { grid-template-columns: repeat(4, 1fr); }
}
body.web { flex-direction: column; justify-content: flex-start; }
@media (min-height: 700px) { body.web:not(.pad-on) { justify-content: center; } }
/* With the pad up, the board sits at the top and fills exactly the space above the pad. */

/* The launcher: a little more breathing room than the 600x600 glasses allow. */
body.web .btn.tilebtn { min-block-size: 108px; }
body.web .launcher { overflow: auto; align-content: start; }

/* The way to the apps, under the games. */
.webfoot { margin: 0; text-align: center; font-size: 16px; color: var(--muted); }
.webfoot a { color: var(--accent); }

/* ---- the keyboard's cursor, hidden while a mouse or finger is driving ---------------------------
   app.js sets body.pointer-input on a press and clears it on the first key. Selection marks (the
   picked piece, the anchored letter, Sudoku's chosen cell) stay — only "where an arrow goes next" hides. */
body.web.pointer-input .wscur { display: none; }
body.web.pointer-input .fgt.cur { outline: none; }
body.web.pointer-input .ck-sq.cur, body.web.pointer-input .cs-sq.cur { box-shadow: none; }
body.web.pointer-input .ck-sq.cur.last { box-shadow: inset 0 0 0 3px rgba(245, 179, 59, 0.75); }
body.web.pointer-input .cs-sq.cur.chk { box-shadow: inset 0 0 0 3px #ff5a5a; }
body.web .ck-sq, body.web .cs-sq, body.web .fgt, body.web #ssmid { cursor: pointer; }

/* ---- the touch pad: arrows, OK and Pause, for games built for the glasses' arrow keys ---------- */
#pad {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: linear-gradient(to top, rgba(11, 14, 20, 0.98), rgba(11, 14, 20, 0.85));
  border-block-start: 1px solid #222b3d;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
#pad[hidden] { display: none; }
/* A game that takes swipes (1Maze): the browser must not claim the drag as a scroll or a
   pull-to-refresh, or it cancels the pointer and the swipe never arrives. */
body.web.swipe-on #app { touch-action: none; overscroll-behavior: none; }
.pk {
  inline-size: 52px; block-size: 52px;
  border: 0; border-radius: 14px;
  background: var(--surface-hi);
  color: var(--text);
  font: inherit; font-size: 22px; font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pk:active { background: #2c3550; transform: scale(0.94); }
.pk-cross {
  display: grid;
  grid-template-columns: 52px 52px 52px;
  grid-template-rows: 46px 46px 46px;
  gap: 2px;
  grid-template-areas: ". up ." "left . right" ". down .";
}
.pk-cross .pk { inline-size: 52px; block-size: 46px; }
.pk-up { grid-area: up; } .pk-left { grid-area: left; } .pk-right { grid-area: right; } .pk-down { grid-area: down; }
.pk-ok { inline-size: 76px; block-size: 76px; border-radius: 50%; background: var(--accent); color: #1a1406; font-size: 20px; }
.pk-back { inline-size: 56px; block-size: 56px; border-radius: 50%; }
/* With a mouse and a keyboard there's nothing to tap: the boards take clicks and drags (drive the
   maze, sweep a word, drag the tiles) and the arrow keys do the rest. The pad shrinks to its Pause
   button in the corner — Escape's twin for a mouse — and the board gets the whole height back. */
@media (hover: hover) and (pointer: fine) {
  #pad {
    inset: 12px 12px auto auto;
    padding: 0;
    background: none;
    border: 0;
  }
  #pad .pk-cross, #pad .pk-ok { display: none; }
  #pad .pk-back { inline-size: 44px; block-size: 44px; font-size: 18px; opacity: 0.8; }
  #pad .pk-back:hover { opacity: 1; }
  body.web.pad-on #app { block-size: min(100dvh, 860px); }
  body.web.pad-on { justify-content: center; }
}