/* abc: the page around the canvas — the settings and letters sheets. */

:root {
  color-scheme: only light;
  --on: #1e6fd9; --off: #c8d4e6; --text: #555; --caption: #9aa8bd;
  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
[hidden] { display: none !important; }   /* also over the flex of .tool */
html, body { margin: 0; height: 100%; background: #fff; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.typing { cursor: none; }
canvas#canvas { display: block; touch-action: none; }

/* the sheets: settings slides down from the top, the letters up from the bottom */
#scrim { position: fixed; inset: 0; background: rgba(20, 40, 80, 0.18); opacity: 0; pointer-events: none; transition: opacity .22s; }
#scrim.on { pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: min(560px, 100%); box-sizing: border-box;
  background: #fff; touch-action: none; transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  max-height: 90%; overflow: hidden; display: flex; flex-direction: column; visibility: hidden;
}
.sheet.shown { visibility: visible; box-shadow: 0 0 32px rgba(20, 40, 80, .18); }
.sheet.dragging { transition: none; }
#settings { top: 0; border-radius: 0 0 28px 28px; transform: translateY(-105%);
  padding: max(20px, env(safe-area-inset-top)) 20px 24px; }
#picker { bottom: 0; border-radius: 28px 28px 0 0; transform: translateY(105%);
  padding: 22px 16px max(22px, env(safe-area-inset-bottom)); }
#settings.open, #picker.open { transform: translateY(0); }

:where(.sheet button) { font: inherit; border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit; }
.group { display: flex; flex-direction: column; align-items: center; margin: 4px 0 18px; }
.caption { font-size: 14px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; color: var(--caption); margin-bottom: 6px; }
.row { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 6vw, 34px); flex-wrap: wrap; }

/* the same look as the status line: blue is on, pale is off */
.toggle, .choice { font-weight: bold; color: var(--off); transition: color .15s; }
.toggle[aria-pressed="true"], .choice[aria-pressed="true"] { color: var(--on); }
.toggle { font-size: clamp(34px, 11vw, 54px); padding: 0 4px; }
.lang .choice { font-size: clamp(22px, 6.5vw, 30px); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-width: 72px; height: 86px; font-size: clamp(18px, 5vw, 24px); }
.tile canvas, .stars canvas { display: block; }
.stars { gap: 6px; }
.tools { gap: 28px; margin-top: 6px; }
.tool { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: bold; color: var(--text); padding: 8px 4px !important; }
.hint { font-size: 15px; color: var(--text); text-align: center; line-height: 1.4; margin: 10px 8px 0; }
.hint svg { width: 17px; height: 17px; vertical-align: -3px; stroke: var(--on); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tool svg { width: 22px; height: 22px; stroke: var(--on); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

#letters { overflow-y: auto; min-height: 0; }
#letters .set { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); margin-bottom: 14px; }
#letters .set:last-child { margin-bottom: 0; }
#letters button { font-size: clamp(28px, 8vw, 38px); font-weight: bold; color: #333; height: 58px; border-radius: 14px; }
#letters button.current { color: var(--on); background: #eef4fd; }