/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * Stackfall: LogosVox original code. The well as large as the screen allows.
 * Tall screens (phones held upright): a slim strip on top (hold, level,
 * lines, next, pause), the well under it. Wide screens (phones held
 * sideways, desktops): the strip becomes a column beside the well.
 * The well's size is set by stackfall.js from the space .sf-stage gets.
 * The pad (.lv-buttons) shows only with "Show buttons" in the game menu.
 */
.sf-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "strip" "stage" "pad" "keys";
  gap: 8px;
  align-items: stretch;
  justify-content: stretch;
  padding-top: 8px;
  padding-bottom: 8px;
}
.sf-strip { grid-area: strip; display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.sf-stage { grid-area: stage; }
.sf-pad { grid-area: pad; }
.sf-keys { grid-area: keys; margin: 0; }

.sf-box, .sf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 6px;
  border-radius: var(--lv-radius);
  background: var(--lv-surface);
  border: 1px solid var(--lv-edge);
  color: var(--lv-ink);
}
.sf-box small, .sf-stat small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lv-ink-subtle); line-height: 1.2; }
.sf-stat { min-width: 52px; }
.sf-stat b { font-size: 18px; line-height: 1.1; }
.sf-box--tap { cursor: pointer; font: inherit; transition: background var(--lv-fast) var(--lv-ease), transform var(--lv-fast) var(--lv-ease); }
.sf-box--tap:hover { background: var(--lv-surface-hover); }
.sf-box--tap:active { transform: scale(0.96); background: var(--lv-surface-active); }
.sf-hold { width: 64px; flex: none; }
.sf-next { flex: 1; min-width: 0; }
#hold { width: 48px; height: 26px; }
#next { width: 100%; height: 26px; }
.sf-pause { min-width: 48px; min-height: 48px; padding: 0; flex: none; }

/* The stage takes what is left and is the gesture surface; the tray inside is sized to whole cells. */
.sf-stage { display: grid; place-items: center; min-width: 0; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
.sf-board { padding: 4px; border-radius: 14px; }
.sf-board canvas { display: block; }

.sf-pad { display: flex; justify-content: space-between; gap: 10px; user-select: none; -webkit-user-select: none; }
.sf-pad-l, .sf-pad-r { display: flex; gap: 6px; flex: 1; }
.sf-pad button {
  flex: 1;
  min-width: 44px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lv-radius);
  border: 1px solid var(--lv-edge-strong);
  background: var(--lv-void-raised);
  color: var(--lv-ink);
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  transition: background var(--lv-fast) var(--lv-ease), transform var(--lv-fast) var(--lv-ease);
}
.sf-pad button svg { width: 22px; height: 22px; }
.sf-pad button.is-down { background: var(--lv-surface-active); transform: scale(0.95); }
.sf-pad [data-act="rotate"] { color: var(--lv-g-violet); border-color: color-mix(in srgb, var(--lv-g-violet) 45%, var(--lv-edge-strong)); }

/* Wide screens: the strip is a column beside the well; with buttons on, they go on the other side. */
@media (min-aspect-ratio: 4/5) {
  .sf-main {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: ". strip stage pad ." ". keys keys keys .";
    column-gap: 14px;
  }
  .sf-strip { flex-direction: column; width: 92px; justify-content: center; }
  .sf-hold { width: 100%; }
  #hold { width: 60px; height: 36px; }
  .sf-next { flex: none; }
  #next { width: 60px; height: 132px; }
  .sf-stat b { font-size: 22px; }
  .sf-pause { width: 100%; }
  .sf-pad { flex-direction: column; justify-content: center; gap: 8px; }
  .sf-pad-l, .sf-pad-r { flex: none; display: grid; grid-template-columns: repeat(2, 58px); grid-auto-rows: 52px; gap: 8px; }
  .sf-pad-l [data-act="soft"] { grid-column: 1 / span 2; grid-row: 2; }
  .sf-pad-r [data-act="rotate"] { grid-column: 1 / span 2; grid-row: 1; }
}
/* Phones held sideways: little height, so the strip packs tighter. */
@media (min-aspect-ratio: 4/5) and (max-height: 540px) {
  .sf-main { padding-top: 6px; padding-bottom: 6px; }
  .sf-strip { gap: 4px; width: 84px; }
  .sf-box, .sf-stat { min-height: 40px; padding: 2px 4px; }
  #hold { height: 26px; }
  #next { height: 92px; }
  .sf-stat b { font-size: 18px; }
  .sf-pause { min-height: 40px; }
}
@media (hover: hover) and (pointer: fine) {
  .sf-board { padding: 6px; border-radius: 18px; }
}