/* Simple view (class .phone-ui; the default on every screen).
   Only the two plates and a few buttons: plate picker top centre; REC / PLAY / STOP and a
   small tempo box in the middle; SILENCE in the bottom-left corner and a wide space-bar
   style LOCK along the rest of the bottom, so both thumbs can reach it.
   Portrait on a phone (class .phone-portrait): a "turn your phone sideways" screen.
   Loaded last so it can override the other stylesheets. */

/* Elements that only exist for the phone view are hidden everywhere else. */
.phone-bar,
.phone-tempo {
  display: none;
}

/* Pattern memories and the FX box exist in both layouts: see layout.css; this file only moves them. */

.rotate-hint {
  display: none;
}

.view-toggle {
  position: fixed;
  top: max(4px, env(safe-area-inset-top));
  right: max(4px, env(safe-area-inset-right));
  z-index: 55; /* above the power screen, so the layout can be chosen before starting */
  opacity: 0.75;
}

/* ------------------------------------------------------------- portrait */
.phone-portrait .rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #2a3150, #0b0d14);
}

.rotate-icon {
  font-size: 72px;
  line-height: 1;
  color: var(--accent);
  animation: rotate-nudge 2.4s ease-in-out infinite;
}

@keyframes rotate-nudge {
  0%,
  35% {
    transform: rotate(0deg);
  }
  65%,
  100% {
    transform: rotate(-90deg);
  }
}

.rotate-title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: var(--text);
}

.rotate-sub {
  margin: 0;
  max-width: 28ch;
  color: var(--text-dim);
}

/* -------------------------------------------------------------- landscape */
html.phone-ui,
html.phone-ui body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* The whole simple view is one grid, so nothing depends on fixed positions:
     top row:    logo | ten pattern buttons (all the free width) | Advanced view button
     middle:     plates and the centre column (picker, transport, tempo, effects)
     bottom row: SILENCE | LOCK (a wide bar) */
.chassis.phone-ui {
  --top-h: 42px;
  --bar-h: 36px;
  --tt: min(calc(100vh - var(--top-h) - var(--bar-h) - 2px), calc((100vw - 215px) / 2), 600px);
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 150px;
  grid-template-rows: var(--top-h) minmax(0, 1fr) var(--bar-h);
  grid-template-areas:
    "logo patterns toggle"
    "stage stage stage"
    "bottom bottom bottom";
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-width: none;
  overflow: hidden;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@supports (height: 100dvh) {
  .chassis.phone-ui {
    --tt: min(calc(100dvh - var(--top-h) - var(--bar-h) - 2px), calc((100vw - 215px) / 2), 600px);
  }
}

.phone-ui,
.phone-ui * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Title bar: its children become grid items: only the logo and the plate picker survive. */
.phone-ui .titlebar {
  display: contents;
}

.phone-ui .titlebar > :not(.plate-picker):not(.logo) {
  display: none;
}

.phone-ui .titlebar .logo {
  grid-area: logo;
  align-self: center;
  justify-self: start;
  padding-left: 8px;
}

.phone-ui .titlebar .logo-img {
  height: 36px;
}

/* The picker floats at the top of the middle (stage) area, above the centre column. */
.phone-ui .plate-picker {
  grid-area: stage;
  align-self: start;
  justify-self: center;
  z-index: 5;
  margin-top: 2px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(11, 13, 20, 0.85);
}

.phone-ui .plate-label,
.phone-ui #plate-refresh {
  display: none;
}

.phone-ui .plate-picker .select-dark {
  min-height: 28px;
  max-width: 190px;
  font-size: 12px;
}

/* Studios, status and flags are not part of the simple view. */
.phone-ui .studio-bar,
.phone-ui .studio-panels {
  display: none;
}

.phone-ui .statusbar {
  grid-area: stage;
  align-self: start;
  justify-self: center;
  margin-top: 40px; /* just under the plate picker */
  z-index: 4;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: none;
  font-size: 10px;
}

.phone-ui .status-msg {
  flex: none;
  max-width: min(300px, 44vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(11, 13, 20, 0.7);
}

.phone-ui .status-msg:empty {
  display: none;
}

.phone-ui .status-flags {
  display: none;
}

/* Plates | buttons | plate. */
.phone-ui .remix-studio {
  flex: 1;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "deckL console deckR";
  grid-area: stage;
  gap: 2px;
  padding: 1px 4px;
  align-items: center;
  justify-content: center;
}

.phone-ui .deck {
  gap: 0;
  justify-content: center;
}

.phone-ui .deck-head,
.phone-ui .deck-foot,
.phone-ui .tt-lock {
  display: none;
}

/* Bigger circles for fingers: the ring has room (neighbours are 27% apart). */
.phone-ui .pad {
  /* The ring is pushed out a little (the circles may overhang the rim) so the circles can be big. */
  width: 27%;
  left: calc(50% + (var(--x) - 50%) * 1.04);
  top: calc(50% + (var(--y) - 50%) * 1.04);
}

.phone-ui .tt {
  box-shadow: 0 0 0 2px #0a0b10, 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* The six buttons: picker (above), REC PLAY STOP, then LOCK and SILENCE. */
.phone-ui .console {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: stretch;
  padding: 40px 0 2px; /* room for the plate picker above */
  gap: 4px;
  background: none;
  border: 0;
  border-radius: 0;
}

.phone-ui .console > :not(.transport):not(.phone-bar):not(.phone-tempo):not(.warp-box) {
  display: none;
}

/* REC / PLAY / STOP and the tempo box stay centred between the pattern row and the effects. */
.phone-ui .transport {
  order: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: auto 0 0;
}

.phone-ui .tbtn-mix {
  display: none;
}

.phone-ui .tbtn {
  min-height: 40px;
  font-size: 10px;
}

.phone-ui .tbtn {
  flex-direction: row;
  gap: 4px;
  padding: 0 2px;
}

.phone-ui .tbtn .glyph {
  font-size: 15px;
}

.phone-ui .phone-tempo {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 2;
  gap: 4px;
  margin: 0 0 auto;
}

.phone-tempo-btn {
  min-width: 36px;
  min-height: 30px;
  font-size: 16px;
  line-height: 1;
}

.phone-tempo-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 78px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #0b170d;
  box-shadow: inset 0 1px 3px #000;
  font-family: var(--font-lcd);
  color: var(--lcd-fg);
}

.phone-tempo-value {
  font-size: 17px;
}

.phone-tempo-unit {
  font-size: 9px;
  letter-spacing: 0.15em;
}

/* SILENCE in the bottom-left corner, LOCK as wide as the rest of the bottom edge. */
.phone-ui .phone-bar {
  grid-area: bottom;
  display: grid;
  grid-template-columns: minmax(110px, 20%) 1fr;
  gap: 8px;
  padding: 1px 6px 2px;
}

.phone-ui .phone-bar .phone-btn {
  min-height: 0;
  height: 100%;
}

.phone-ui .phone-lock {
  font-size: 13px;
  letter-spacing: 0.3em;
}

.phone-btn {
  min-height: 0;
  height: 100%;
}

.phone-ui .phone-lock {
  font-size: 15px;
  letter-spacing: 0.3em;
}

.phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.phone-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  box-shadow: inset 0 0 2px #000;
}

.phone-lock.is-locked .phone-led {
  background: var(--lcd-fg);
  box-shadow: 0 0 8px var(--lcd-fg);
}

.phone-lock:active {
  background: linear-gradient(180deg, #ffa53a, #d86c00);
  color: #1c0d00;
}

.phone-silence.is-down {
  background: linear-gradient(180deg, #ffe066, #e0a800);
  border-color: #fff3b8 #6b4f00 #6b4f00 #fff3b8;
  color: #221800;
}

/* Power screen and dialogs fit a short screen. */
.phone-ui .power-box {
  max-width: 340px;
  padding: 10px 18px;
}

.phone-ui .power-box .logo-big {
  margin-bottom: 4px;
}

.phone-ui .power-box .logo-big .logo-img {
  height: 56px;
}

.phone-ui .power-box p:not(.error-text) {
  display: none;
}

.phone-ui .btn-power {
  min-height: 44px;
}

.phone-ui .dialog {
  max-height: 92vh;
  overflow: auto;
}

/* Pattern memories: one line of ten buttons using all the free width of the top row. */
.phone-ui .pattern-bar {
  grid-area: patterns;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: stretch;
  gap: 5px;
  padding: 4px 0;
  background: none;
  border: 0;
}

.phone-ui .pat-title {
  display: none;
}

.phone-ui .pat-btn {
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 18px;
}

.phone-ui .pat-btn::before {
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
}

.phone-ui .view-toggle {
  grid-area: toggle;
  position: relative;
  top: auto;
  right: auto;
  align-self: center;
  justify-self: end;
  margin-right: 6px;
  min-height: 34px;
  z-index: 55; /* above the power screen, so the layout can be chosen before starting */
}

/* The effects box (W.A.R.P.): four effect buttons over a small touch pad. */
.phone-ui .warp-box {
  order: 3;
  margin-top: 4px;
}

.phone-ui .warp-box > .ctl-row {
  display: none;
}

.phone-ui .warp {
  grid-template-columns: 1fr;
  gap: 3px;
}

.phone-ui .warp-targets {
  order: -1;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.phone-ui .warp-targets .btn {
  min-height: 24px;
  padding: 1px 2px;
  font-size: 9px;
}

.phone-ui .warp-pad {
  aspect-ratio: auto;
  min-height: 0;
  height: 34px;
}



@media (max-height: 340px) {
  .phone-ui .tbtn {
    min-height: 38px;
  }

  .phone-ui .warp-pad {
    height: 32px;
  }


}