/* Glossy moulded plastic keys: full face, extruded sides and whole-key travel.
   All selectors are scoped to the alphabet tray, never quiz answer buttons. */
.board[data-mode] {
  --keyboard-rest-depth: 9px;
  --keyboard-key-gap: clamp(10px, 1vw, 16px);
  --keyboard-key-width: clamp(96px, calc((100vw - 112px - 13 * var(--keyboard-key-gap)) / 14), 128px);
  --keyboard-key-height: clamp(72px, calc(var(--keyboard-key-width) / 1.35), 84px);
}
.board[data-mode] .workspace .panel.tray {
  grid-template-rows: auto;
  gap: 0;
  padding: 0 10px;
}
.keyboard-slider {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.board[data-mode] .workspace .letter-grid {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: var(--keyboard-key-height);
  grid-auto-flow: column;
  grid-auto-columns: var(--keyboard-key-width);
  align-content: start;
  align-items: start;
  justify-content: start;
  min-width: 0;
  gap: var(--keyboard-key-gap);
  padding: 12px 12px calc(13px + var(--keyboard-rest-depth));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.letter-grid::-webkit-scrollbar { display: none; }
.keyboard-slider.has-left .letter-grid { --edge-left: 22px; }
.keyboard-slider.has-right .letter-grid { --edge-right: 22px; }
.keyboard-slider .letter-grid {
  --edge-left: 0px;
  --edge-right: 0px;
  mask-image: linear-gradient(to right, transparent, #000 var(--edge-left), #000 calc(100% - var(--edge-right)), transparent);
}
.board[data-mode] .workspace .letter-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.board[data-mode] .workspace .letter-grid.is-dragging .letter-tile { cursor: grabbing; }
.keyboard-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--ink);
  background: var(--surface-sunk);
  transition: background 160ms var(--ease), transform 160ms var(--ease), opacity 160ms;
}
.keyboard-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.keyboard-arrow:hover:not(:disabled) { background: #FFF6D1; border-color: var(--container-line); }
.keyboard-arrow:active:not(:disabled) { transform: scale(.94); }
.keyboard-arrow:disabled { opacity: .22; cursor: default; background: transparent; }
.keyboard-arrow:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.board[data-mode] .workspace .letter-tile {
  width: var(--keyboard-key-width);
  height: var(--keyboard-key-height);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  flex: none;
  scroll-snap-align: start;
  --key-depth: 0px;
  --key-stem: var(--keyboard-rest-depth);
  --key-travel: 0px;
  --key-face: #23CF99;
  --key-side: color-mix(in srgb, var(--key-face), #061823 45%);
  --key-radius: clamp(12px, 1.1vw, 19px);
  border: 1px solid color-mix(in srgb, var(--key-face), #081821 55%);
  border-radius: var(--key-radius);
  padding: 0;
  color: #061823;
  background:
    linear-gradient(150deg, #FFFFFF10, #FFFFFF00 45%, #08243314),
    var(--key-face);
  box-shadow:
    0 var(--key-stem) 0 var(--key-side),
    0 calc(var(--key-stem) + 1px) 0 #071722,
    0 13px 14px -7px #07172570,
    inset 0 2px 1px #FFFFFFB0,
    inset 2px 0 3px #FFFFFF40,
    inset -2px 0 3px #08243220,
    inset 0 -4px 5px #08243326;
  transform: translateY(var(--key-travel));
  filter: none;
  isolation: isolate;
  overflow: visible;
  transition: transform 150ms cubic-bezier(.2,.8,.3,1), box-shadow 150ms ease-out;
}
.board[data-mode] .letter-tile:nth-child(6n + 2) { --key-face: #FD505D; }
.board[data-mode] .letter-tile:nth-child(6n + 3) { --key-face: #FEE044; }
.board[data-mode] .letter-tile:nth-child(6n + 4) { --key-face: #0CA5FE; }
.board[data-mode] .letter-tile:nth-child(6n + 5) { --key-face: #BE82FC; }
.board[data-mode] .letter-tile:nth-child(6n) { --key-face: #FD8118; }
.board[data-mode] .workspace .letter-tile::before {
  z-index: 1;
  inset: 1px;
  border: 0;
  border-radius: inherit;
  opacity: 1;
  background:
    radial-gradient(ellipse at 88% 92%, #FFFFFF30, #FFFFFF00 42%);
  box-shadow: inset 0 1px 1px #FFFFFF66;
  transform: none;
  filter: none;
  pointer-events: none;
}
.board[data-mode] .workspace .letter-tile::after { content: none; }
.board[data-mode] .workspace .letter-tile > span {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: block;
  width: max-content;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  padding: 0;
  color: #061823;
  background: none;
  filter: none;
  text-shadow: 0 1px 0 #FFFFFF20;
  transform: translate(-50%, -50%);
  transition: none;
  pointer-events: none;
}
.keyboard-baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.board[data-mode] .workspace .letter-tile:hover:not([aria-pressed="true"]) {
  --key-travel: -2px;
  --key-stem: 11px;
  transform: translateY(var(--key-travel));
  filter: none;
}
.board[data-mode] .workspace .letter-tile[aria-pressed="true"] {
  --key-travel: 8px;
  --key-stem: 1px;
  transform: translateY(var(--key-travel));
  box-shadow: 0 var(--key-stem) 0 var(--key-side), 0 2px 0 #071722,
    0 4px 6px -4px #07172555,
    inset 0 3px 7px #08243332,
    inset 1px 0 2px #FFFFFF35,
    inset 0 -1px 2px #FFFFFF70;
}
.board[data-mode] .workspace .letter-tile:active,
.board[data-mode] .workspace .letter-tile:active:hover:not([aria-pressed="true"]) {
  --key-travel: 9px;
  --key-stem: 0px;
  transform: translateY(var(--key-travel));
  box-shadow: 0 1px 0 #071722, 0 2px 4px -3px #07172555,
    inset 0 4px 8px #08243340, inset 0 -1px 2px #FFFFFF65;
  transition-duration: 45ms;
}
.board[data-mode] .workspace .letter-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (max-width: 1023px) {
  .board[data-mode] { --keyboard-rest-depth: 6px; }
  .board[data-mode] .workspace .letter-tile { --key-stem: 6px; }
  .board[data-mode] .workspace .letter-tile:hover:not([aria-pressed="true"]) { --key-stem: 8px; }
  .board[data-mode] .workspace .letter-tile[aria-pressed="true"] { --key-travel: 5px; --key-stem: 1px; }
  .board[data-mode] .workspace .letter-tile:active,
  .board[data-mode] .workspace .letter-tile:active:hover:not([aria-pressed="true"]) { --key-travel: 6px; --key-stem: 0px; }
}
@media (max-width: 620px) {
  .board[data-mode] .workspace .panel.tray { padding-inline: 4px; }
  .keyboard-slider { gap: 0; }
  .board[data-mode] .workspace .letter-tile { --key-depth: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .board[data-mode] .workspace .letter-tile,
  .board[data-mode] .workspace .letter-tile::before,
  .board[data-mode] .workspace .letter-tile > span { transition: none; }
}