/* --- maze: a "steady hand" trace game (assets/maze.js) ------------ */
  .maze-lead { margin: -4px 0 4px; font: 400 0.82rem/1.5 var(--mono); color: var(--ink-dim); }
  .maze-kbhint { margin: 0 0 12px; font: 400 0.72rem/1.4 var(--mono); color: var(--ink-dim); opacity: 0.75; }
  .maze-body { display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .maze-stage {
    position: relative;
    width: 100%; max-width: 420px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    border: 1px solid var(--panel-brd);
    box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
  }
  .maze-stage:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
  .maze-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .maze-stage.maze-shake { animation: mazeShake 0.32s ease; }
  @keyframes mazeShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
  }
  @media (prefers-reduced-motion: reduce) { .maze-stage.maze-shake { animation: none; } }

  .maze-win {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; padding: 20px;
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .maze-win.is-shown { opacity: 1; pointer-events: auto; }
  .maze-win strong { font: 700 1.15rem/1.2 var(--sans); color: var(--ink); }
  .maze-win span { font: 500 0.8rem/1.4 var(--mono); color: var(--ink-soft); }

  .maze-bar { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; flex-wrap: wrap; }
  .maze-colors { display: flex; gap: 6px; }
  .maze-swatch {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid transparent;
    padding: 0; cursor: pointer;
    box-shadow: 0 0 0 1px var(--panel-brd);
  }
  .maze-swatch[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.15); }
  .maze-swatch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  .maze-swatch.is-rainbow {
    background: conic-gradient(from 0deg, #ff5a5a, #ffb454, #ffe066, #6bd88a, #5ab8ff, #b48cff, #ff5a5a);
  }

  .maze-shapes { display: flex; gap: 6px; width: 100%; max-width: 420px; }
  .maze-shapebtn {
    font: 600 0.66rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-soft); background: transparent; border: 1px solid var(--panel-brd);
    border-radius: 999px; padding: 5px 10px; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .maze-shapebtn:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); }
  .maze-shapebtn[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .maze-shapebtn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

  .maze-timedwrap { display: flex; align-items: center; gap: 6px; font: 600 0.72rem/1 var(--mono); color: var(--ink-soft); }
  .maze-timedwrap input { accent-color: var(--accent); cursor: pointer; }
  .maze-timedwrap label { cursor: pointer; }

  .maze-meta { display: flex; align-items: baseline; gap: 8px; margin-left: auto; font: 600 0.78rem/1 var(--mono); color: var(--ink-soft); }
  .maze-best { color: var(--ink-dim); }
  .maze-best::before { content: "best "; }

  .maze-new {
    font: 600 0.68rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft); background: transparent; border: 1px solid var(--panel-brd);
    border-radius: 8px; padding: 7px 11px; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .maze-new:hover { background: rgba(255, 255, 255, 0.16); color: var(--ink); }
  .maze-new:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

  .maze-dialog-body { padding: 18px; display: flex; justify-content: center; }
  .maze-dialog .maze-stage, .maze-dialog .maze-bar { max-width: min(84vw, 78vh, 620px); }