/* Handheld / portrait layout
   - Screen on top
   - Horizontal, swipeable module rail underneath
   - Preserves DOM + JS contracts
*/

@media (max-width: 780px) and (orientation: portrait) {
  /* Let the device grow vertically (no forced 16:9) */
  .console {
    aspect-ratio: auto;
  }

  /* Stack screen + rail */
  .console-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;

    /* override grid rules from console.css */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  /* ---------- 70 / 30 split ---------- */
  /* Screen takes ~70% */
  .etch-shell {
    width: 100%;
    flex: 0 0 62vh;          /* “screen band” height */
    max-height: 62vh;
  }

  /* Rail takes ~30% */
  .module-column {
    flex: 0 0 28vh;
    height: 34vh;
    min-height: 260px;       /* ensures it's an instrument, not a sliver */
    max-height: 380px;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;

    /* align rail edge to screen edge */
    padding: 14px 16px 18px;
    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;

    /* swipe rail horizontally; knob will opt out */
    touch-action: pan-x;
  }

  .module-column::-webkit-scrollbar { display: none; }
  .module-column { scrollbar-width: none; }

  /* No peeking: one full-width card per swipe */
  .module-column > .module {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
  }

  .module,
  .module-frame,
  .module-panel {
    height: 100%;
  }

  /* Ensure the screen fills its band cleanly */
  .etch-frame,
  .etch-screen {
    height: 100%;
    position: relative; /* needed for overlay */
    overflow: hidden;   /* keeps grain inside rounded corners */
  }

  .etch-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;

    /* fake grain using layered gradients (no asset) */
    background-image:
      repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.015) 0px,
        rgba(255,255,255,0.015) 1px,
        rgba(0,0,0,0.015) 2px,
        rgba(0,0,0,0.015) 3px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.010) 0px,
        rgba(255,255,255,0.010) 1px,
        rgba(0,0,0,0.010) 2px,
        rgba(0,0,0,0.010) 3px
      );

    opacity: 0.35;              /* try 0.20–0.40 */
    mix-blend-mode: overlay;    /* feels like plastic texture */
  }

  /* ---------- Knob interaction reliability ---------- */
  #etchKnob {
    position: relative;
    z-index: 5;

    pointer-events: auto;
    touch-action: none;       /* knob always wins drags */

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  #etchCanvas {
    image-rendering: pixelated;
    filter: contrast(1.15) brightness(0.92);
  }

  #etchKnob .vk-cap,
  #etchKnob .vk-ring {
    pointer-events: auto;
  }

  /* ---------- Knob: big hit target, smaller visuals ---------- */
  .vector-knob {
    --vk-size: 96px;         /* tweak 96–116 */
    --vk-max-lean: 9px;

    /* Big touch target */
    width: calc(var(--vk-size) + 72px);
    height: calc(var(--vk-size) + 72px);

    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    border-radius: 50%;

    /* invisible hitpad */
    background: transparent;
    box-shadow: none;

    touch-action: none;
  }

  /* draw the visual “base knob” */
  .vector-knob::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--vk-size);
    height: var(--vk-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #111;
    box-shadow:
      inset 2px 2px 6px rgba(0,0,0,0.75),
      inset -1px -1px 1px rgba(255,255,255,0.04);
    pointer-events: none;
  }

  /* Convert ring/cap off inset-based sizing into explicit sizing */
  .vk-ring {
    position: absolute;
    inset: auto;              /* IMPORTANT: disable console.css inset */
    left: 50%;
    top: 50%;
    width: calc(var(--vk-size) - 40px);
    height: calc(var(--vk-size) - 40px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.05),
      inset 0 0 0 2px rgba(0,0,0,0.55);
    pointer-events: none;
  }

  .vk-cap {
    position: absolute;
    inset: auto;              /* IMPORTANT: disable console.css inset */
    left: 50%;
    top: 50%;
    width: calc(var(--vk-size) - 52px);
    height: calc(var(--vk-size) - 52px);
    border-radius: 50%;
    background: #161a1d;
    box-shadow:
      0 10px 18px rgba(0,0,0,0.60),
      inset 1px 1px 1px rgba(255,255,255,0.06),
      inset -2px -3px 6px rgba(0,0,0,0.80);

    transform:
      translate(-50%, -50%)
      translate(var(--vk-x, 0px), var(--vk-y, 0px))
      rotate(var(--vk-rot, 0deg));
  }

  .vk-tick {
    height: 11px;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(-58px);
    pointer-events: none;
  }

  .vk-dot { width: 9px; height: 9px; top: 6px; }
  .vk-dimple { width: 12px; height: 12px; }
}