/* Práctica en solitario (lab.html) — estructura propia de esta página. Colores y tipografías: tokens del skin activo
   (skins/<id>/tokens.css). Las capas se declaran en guard.css, que se carga antes. */
@layer base {
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--mono); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  button, a { touch-action: manipulation; }
  :focus-visible { outline: 2px dashed var(--acc); outline-offset: 3px; }
  body { min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .lab { width: min(100%, 580px); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

  /* cabecera: volver (con el logo) a la izquierda, idioma a la derecha */
  .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none; }
  .back svg { width: 22px; height: 22px; color: var(--mute); }
  .brand { font: 400 22px/1 var(--display); letter-spacing: -.04em; }
  .brand .a { color: transparent; -webkit-text-stroke: 1px var(--ink); }
  .brand .b { color: var(--acc); text-shadow: 0 0 14px var(--acc); }
  .tool { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; background: rgb(var(--bg-rgb) / .5); border: 1px solid var(--line-lo); border-radius: 0; color: var(--mute); font: inherit; font-size: 13px; letter-spacing: .14em; cursor: pointer; }
  .tool:hover { color: var(--ink); border-color: var(--line-hi); }
  .kicker { margin: 0; color: var(--mute); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }

  /* selector de figura: una sola fila grande (anterior · nombre · siguiente) en lugar de nueve botones */
  .stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
  .stepper button { height: 52px; display: grid; place-items: center; padding: 0; background: rgb(var(--acc-rgb) / .07); border: 2px solid var(--acc); border-radius: 0; color: var(--acc); cursor: pointer; }
  .stepper button:hover { background: rgb(var(--acc-rgb) / .18); box-shadow: 0 0 16px rgb(var(--acc-rgb) / .4); }
  .stepper button:active { transform: translateY(2px); }
  .stepper svg { width: 24px; height: 24px; }
  #shape-name { text-align: center; font: 400 clamp(26px, 8vw, 40px)/1 var(--display); text-transform: lowercase; letter-spacing: -.01em; text-shadow: 0 0 16px rgb(var(--ink-rgb) / .45); }

  #board { position: relative; line-height: 0; align-self: center; }
  canvas { border: 1px solid rgb(var(--arena-line-rgb) / .35); touch-action: none; cursor: crosshair; background: var(--bg); display: block; }

  /* resultado: número grande y una línea de detalle */
  #out { text-align: center; display: grid; gap: 2px; min-height: 84px; align-content: center; }
  #score { font: 400 clamp(46px, 14vw, 76px)/1 var(--mono); text-shadow: 0 0 14px currentColor; min-height: 1em; }
  #score.perfect { color: var(--top-ink); text-shadow: 0 0 18px var(--acc), 0 0 6px var(--white); }
  #score.good { color: var(--acc); }
  #score.mid { color: var(--amber); }
  #score.low { color: var(--hot); }
  #meta { color: var(--mute); font-size: 13px; letter-spacing: .04em; min-height: 1.4em; }

  /* acciones: tres botones iguales y grandes */
  .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .act { --hit-h: 52px; padding: 0 6px; background: rgb(var(--acc-rgb) / .05); border: 2px solid var(--line); border-radius: 0; color: var(--mute); font: inherit; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  .act:hover { border-color: var(--acc); color: var(--ink); }
  .act:active { transform: translateY(2px); }
  .act.on { color: var(--on-acc); background: var(--acc); border-color: var(--acc); font-weight: 700; box-shadow: 0 0 16px rgb(var(--acc-rgb) / .4); }

  /* etiqueta «skin: x» (la misma que en base.css: la práctica no carga base.css) */
  .skin-badge {
    position: fixed; top: max(2px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 80; margin: 0; padding: 0 .7em; pointer-events: none;
    font-size: 12px; line-height: 1.5; letter-spacing: .12em; white-space: nowrap; color: var(--mute);
    background: rgb(var(--bg-rgb) / .88); border: 1px solid var(--line-lo); -webkit-user-select: none; user-select: none;
  }

  footer { color: var(--mute); font-size: 12px; line-height: 1.5; text-align: center; margin-top: 4px; }
  @media (max-height: 700px) { footer { display: none; } .kicker { display: none; } }
}