/* Options (js/screens/options.js): CONTROLS, TOUCH, SOUND and GAME on the summer sky.
 *
 * Built on the pixel UI kit (css/pixel.css, DESIGN.md): boxes, borders, gaps and drops are
 * whole art / fine pixels (var(--px), var(--fp), set by js/main.js); type is Jersey 10 on
 * its grid (--t1 18.667 px labels and caps, --t15 buttons and tabs), so widths that must fit
 * a word are plain px. Corners notched, drops hard and straight down. Phones get tap targets
 * of at least 44 CSS px (--hit); a phone on its side lays the two halves of the controls
 * table next to each other.
 *
 * The last section is not this screen: it mirrors the fight's touch pad for left-handed
 * players (js/input.js setTouchOptions sets data-tp-hand on the pad).
 */

.gf-options {
  --hit: calc(var(--px) * 12);   /* a row / button: 48 CSS px on a desktop (--px 4) */
  --cap: calc(var(--px) * 10);   /* a key cap's height */
  --gap: calc(var(--px) * 2);
  --gut: calc(var(--px) * 4);    /* page gutter */
  --in: calc(var(--px) * 4);     /* panel padding */
  --c0: 104px;                   /* the controls table's action column ("SPECIAL" at 18.667 px) */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--gut);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-weight: 400;
  overflow-x: clip;
}
.gf-options *, .gf-options *::before, .gf-options *::after { box-sizing: border-box; }
.gf-options i { font-style: normal; }
.gf-options button { font-weight: 400; }

/* phones (and anything with a finger): 44 CSS px targets, whole art pixels */
@media (pointer: coarse), (max-width: 900px), (max-height: 520px) {
  .gf-options { --hit: calc(var(--px) * 22); --cap: var(--hit); --gut: calc(var(--px) * 2); --in: calc(var(--px) * 3); }
}
@supports (width: round(up, 44px, 2px)) {
  @media (pointer: coarse), (max-width: 900px), (max-height: 520px) {
    .gf-options { --hit: max(calc(var(--px) * 12), round(up, 44px, var(--px))); }
  }
}

/* ---------------------------------------------------------------- the sky */
/* hard-edged bands (the one gradient the kit allows) and two rows of pixel clouds */
.gf-opt-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' shape-rendering='crispEdges'%3E%3Cg fill='%23f4f8fd'%3E%3Crect x='0' y='15' width='64' height='9'/%3E%3Crect x='2' y='11' width='14' height='4'/%3E%3Crect x='4' y='9' width='10' height='2'/%3E%3Crect x='6' y='8' width='6' height='1'/%3E%3Crect x='18' y='7' width='20' height='8'/%3E%3Crect x='20' y='5' width='16' height='2'/%3E%3Crect x='23' y='3' width='10' height='2'/%3E%3Crect x='25' y='2' width='6' height='1'/%3E%3Crect x='41' y='10' width='18' height='5'/%3E%3Crect x='43' y='8' width='14' height='2'/%3E%3Crect x='46' y='6' width='8' height='2'/%3E%3C/g%3E%3Cg fill='%23e6f0fb'%3E%3Crect x='0' y='20' width='64' height='4'/%3E%3C/g%3E%3Cg fill='%23b9d6ee'%3E%3Crect x='0' y='23' width='64' height='1'/%3E%3C/g%3E%3C/svg%3E") left calc(var(--px) * -6) bottom 0 / calc(var(--px) * 64) calc(var(--px) * 24) repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20' shape-rendering='crispEdges'%3E%3Cg fill='%23c3ecf7'%3E%3Crect x='0' y='13' width='80' height='7'/%3E%3Crect x='6' y='8' width='18' height='5'/%3E%3Crect x='9' y='5' width='12' height='3'/%3E%3Crect x='30' y='10' width='14' height='3'/%3E%3Crect x='33' y='8' width='8' height='2'/%3E%3Crect x='52' y='6' width='20' height='7'/%3E%3Crect x='55' y='3' width='14' height='3'/%3E%3Crect x='59' y='1' width='6' height='2'/%3E%3C/g%3E%3C/svg%3E") left calc(var(--px) * 17) bottom calc(var(--px) * 14) / calc(var(--px) * 80) calc(var(--px) * 20) repeat-x,
    linear-gradient(var(--sky-2) 0 calc(var(--px) * 16), var(--sky) calc(var(--px) * 16));
}

/* ---------------------------------------------------------------- frame */
.gf-opt-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--px) * 180);
  min-width: 0;
}
.gf-opt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: calc(var(--px) * 4);
  row-gap: var(--gap);
}
.gf-opt-back {
  min-height: var(--hit);
  margin-bottom: var(--gap);
  padding: 0 calc(var(--px) * 3) 0 calc(var(--px) * 2);
}
.gf-opt-back.px-btn { gap: calc(var(--fp) * 3); font-size: var(--t1); }
.gf-opt-back .gf-opt-arrow { width: calc(var(--fp) * 5); height: calc(var(--fp) * 5); }
.gf-opt-title { margin-bottom: var(--gap); white-space: nowrap; }

.gf-opt-tabs { margin-left: auto; flex-wrap: nowrap; min-width: 0; }
.gf-opt-tabs .px-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hit);
  white-space: nowrap;
}
.gf-opt-tabs .px-tab.is-focus { background: var(--gold); }
.gf-opt-tabs .px-tab[aria-selected="true"].is-focus { background: var(--gold-hi); }
/* the open tab sits on the panel's top edge, covering it */
.gf-opt-tabs .px-tab[aria-selected="true"] {
  position: relative;
  z-index: 1;
  margin-bottom: calc(var(--px) * -1);
  min-height: calc(var(--hit) + var(--px));
}

.gf-opt-panel { padding: var(--in); min-width: 0; }
.gf-opt-page[hidden] { display: none; }
.gf-opt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- controls */
.gf-opt-tables { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: calc(var(--px) * 6); }
.gf-opt-keys {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.gf-opt-keys .gf-opt-c0 { width: var(--c0); }
.gf-opt-keys th, .gf-opt-keys td { padding: 0; text-align: center; vertical-align: middle; }
.gf-opt-keys thead th { height: calc(var(--px) * 11); vertical-align: top; }
.gf-opt-keys tbody tr { height: calc(var(--cap) + var(--px) * 2); border-top: var(--fp) dashed var(--cloud-shade); }
.gf-opt-keys tbody tr.is-row { background: var(--gold-hi); }
/* stacked, the second half needs no header of its own */
.gf-opt-thead-2 { display: none; }
.gf-opt-keys[data-part="buttons"] tbody tr:first-child { border-top-style: solid; border-top-color: var(--cloud-shade); }

.gf-opt-keys th.gf-opt-act {
  padding-left: var(--gap);
  text-align: left;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
/* the column heads: 1P red, 2P blue, the pad in grass green, as plates */
.gf-opt-col {
  display: inline-block;
  padding: calc(var(--fp) * 2) calc(var(--fp) * 5) var(--fp);
  border: var(--fp) solid var(--ink);
  font-size: var(--t1);
  line-height: 1;
  color: var(--paper);
  background: var(--night);
  box-shadow: 0 var(--fp) 0 var(--ink);
  text-shadow: 0 var(--fp) 0 var(--ink);
  white-space: nowrap;
}
.gf-opt-col.is-p1 { background: var(--p1); }
.gf-opt-col.is-p2 { background: var(--p2); }
.gf-opt-col.is-pad { background: var(--grass3); }
.gf-opt-short { display: none; }

.gf-opt-cap {
  position: relative;
  width: calc(100% - var(--px) * 4);
  max-width: 104px;                /* "NUM ENT" is the longest name: 7 x 12 px */
  min-width: var(--hit);
  height: var(--cap);
  padding: 0 var(--px);
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}
.gf-opt-captext { display: block; overflow: hidden; text-overflow: clip; }
.gf-opt-arrow { display: block; width: 10px; height: 10px; fill: currentColor; flex: none; } /* 2 px a pixel: the height of Jersey's 18.667 px capitals */
/* a cap with a second key has a gold corner (the "+1" is for screen readers' sake only) */
.gf-opt-more {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--fp) * 4);
  height: calc(var(--fp) * 4);
  overflow: hidden;
  background: var(--gold);
  box-shadow: calc(var(--fp) * -1) var(--fp) 0 var(--ink);
  color: transparent;
  font-size: 0;
  line-height: 0;
}
@media (hover: hover) {
  .gf-opt-cap:hover { background: var(--gold-hi); }
}
.gf-opt-cap.is-focus { background: var(--gold); box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -2) 0 var(--gold-deep); }
.gf-opt-cap:focus-visible { outline: none; background: var(--gold); }
.gf-opt-cap.is-none { color: var(--stone-3); }
.gf-opt-cap.is-flash { background: var(--gold); }
.gf-opt-cap.is-taken { background: var(--red-hi); color: var(--white); }
.gf-opt-cap.is-listening { color: var(--ink); }
.gf-opt-cap.is-fixed {
  background: var(--cloud);
  color: var(--stone);
  box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--cloud-shade);
  border-color: var(--stone);
  cursor: default;
}
.gf-options.is-listening .gf-opt-cap:not(.is-listening):not(.is-fixed) { color: var(--stone-3); }

.gf-opt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap) calc(var(--px) * 4);
  margin-top: calc(var(--px) * 3);
}
.gf-opt-note {
  flex: 1 1 calc(var(--px) * 120);
  min-width: 0;
  min-height: calc(var(--px) * 8);
  margin: 0;
  font-size: var(--t1);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--plum);
  overflow-wrap: anywhere;
}
.gf-opt-note[data-kind="ok"] { color: var(--grass-3); }
.gf-opt-note[data-kind="warn"] { color: var(--red-deep); }
.gf-opt-note[data-kind="listen"], .gf-opt-note[data-kind="listen-warn"] { color: var(--ink); }
.gf-opt-note[data-kind="listen-warn"] .gf-opt-blink { color: var(--red-deep); }
.gf-opt-note .gf-opt-esc { color: var(--stone-3); white-space: nowrap; }
.gf-opt-blink { animation: gf-opt-blink 1s steps(1) infinite; }
@keyframes gf-opt-blink { 50% { opacity: 0; } }
.gf-opt-reset.px-btn { min-height: var(--hit); flex: none; font-size: var(--t1); }

/* ---------------------------------------------------------------- rows (touch, sound, game) */
.gf-opt-rows { min-width: 0; }
.gf-opt-row {
  flex-wrap: wrap;
  row-gap: var(--px);
  min-height: calc(var(--hit) + var(--px) * 2);
  cursor: default;
}
.gf-opt-row > :last-child { margin-left: auto; }   /* a control that wraps stays on the right */
.gf-opt-row:last-child { border-bottom: 0; }
.gf-opt-row:focus-within { background: transparent; }
.gf-opt-row.is-focus { background: var(--gold-hi); }
.gf-opt-label { white-space: nowrap; }

.gf-opt-seg { display: inline-flex; gap: var(--px); }
.gf-opt-segbtn, .gf-opt-step { min-width: var(--hit); min-height: var(--hit); padding: var(--fp) 0 0; }
.gf-opt-segbtn[aria-checked="true"] { background: var(--gold); box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--gold-deep); }
.gf-opt-step[disabled] { opacity: 1; background: var(--cloud); color: var(--stone); cursor: default; }

.gf-opt-slide { display: inline-flex; align-items: center; gap: var(--px); }
.gf-opt-slider { cursor: pointer; padding: var(--px) 0; outline: none; }
.gf-opt-slider:focus-visible { outline: var(--fp) solid var(--red); outline-offset: var(--px); }
.gf-opt-val {
  min-width: 48px;                 /* "100%" */
  font-size: var(--t1);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
[data-slider="music"] .gf-opt-val, [data-slider="sfx"] .gf-opt-val { min-width: 24px; }
[data-slider="level"] .gf-opt-val { min-width: 96px; text-align: left; }   /* "4 SWEATY" */

.gf-opt-toggle { min-height: var(--hit); align-items: stretch; }
.gf-opt-toggle > span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--hit); }
.gf-opt-toggle:focus-visible { outline: var(--fp) solid var(--red); outline-offset: var(--px); }

.gf-opt-tip {
  margin: calc(var(--px) * 3) 0 0;
  font-size: var(--t1);
  line-height: 1.1;
  color: var(--slate);
}

/* ---------------------------------------------------------------- touch: rows + preview */
.gf-opt-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--px) * 4);
}
.gf-opt-split > .gf-opt-rows { flex: 1 1 400px; }  /* beside the preview only when both fit */
.gf-opt-preview {
  flex: none;
  display: grid;
  justify-items: center;
  gap: var(--gap);
  margin: 0 auto;
}
/* the preview draws on its own pixel: --px on a phone, 3 px on a desktop (at --px 4 it would
   dwarf 16 px type) */
.gf-opt-phone {
  --pv: min(var(--px), 3px);
  --pv-a: 1;
  position: relative;
  width: calc(var(--pv) * 94);  /* an 88 x 44 screen in a 3-pixel bezel */
  height: calc(var(--pv) * 50);
  border: calc(var(--pv) * 3) solid var(--ink-2);
  outline: var(--pv) solid var(--ink);
  background: var(--sky);
  box-shadow: var(--pv) calc(var(--pv) * 2) 0 var(--pv) var(--ink);
  overflow: hidden;
}
.gf-opt-phone::before {   /* the ground */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--pv) * 9);
  background: var(--grass);
  box-shadow: 0 calc(var(--pv) * -1) 0 var(--grass-hi);
}
.gf-opt-pv {
  position: absolute;
  display: grid;
  place-items: center;
  border: var(--pv) solid var(--ink);
  background: var(--cloud);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
  opacity: var(--pv-a);
  clip-path: polygon(var(--pv) 0, calc(100% - var(--pv)) 0, 100% var(--pv), 100% calc(100% - var(--pv)),
    calc(100% - var(--pv)) 100%, var(--pv) 100%, 0 calc(100% - var(--pv)), 0 var(--pv));
}
.gf-opt-pv-stick { background: var(--cloud-2); }
.gf-opt-pv-stick > b {
  display: block;
  width: calc(var(--pv) * 7);
  height: calc(var(--pv) * 7);
  border: var(--pv) solid var(--ink);
  background: var(--gold);
}
.gf-opt-pv-btn[data-b="p"] { background: var(--red-hi); }
.gf-opt-pv-btn[data-b="k"] { background: var(--sky-pale); }
.gf-opt-pv-btn[data-b="s"] { background: var(--gold); }
.gf-opt-pv-pause {
  position: absolute;
  top: calc(var(--pv) * 2);
  right: calc(var(--pv) * 2);
  width: calc(var(--pv) * 5);
  height: calc(var(--pv) * 5);
  border: var(--pv) solid var(--ink);
  background: var(--cloud);
}
.gf-opt-pvcap { font-size: var(--t1); color: var(--slate); }

/* ---------------------------------------------------------------- phones */
/* a phone on its side: the two halves of the controls table side by side */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .gf-opt-wrap { max-width: 880px; }
  .gf-options { --c0: 88px; }
  .gf-opt-tables { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gf-opt-thead-2 { display: table-header-group; }
  .gf-opt-keys[data-part="buttons"] tbody tr:first-child { border-top-style: dashed; }
  .gf-opt-long { display: none; }
  .gf-opt-short { display: inline; }
  .gf-opt-tip { display: none; }
}
/* narrow: tabs across the whole width, short column names */
@media (max-width: 600px) {
  .gf-options { --c0: 88px; align-items: flex-start; }
  .gf-opt-wrap { max-width: none; }
  .gf-opt-tabs { width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .gf-opt-tabs .px-tab { flex: 1 0 auto; padding-inline: calc(var(--px) * 2); }
  .gf-opt-long { display: none; }
  .gf-opt-short { display: inline; }
  .gf-opt-cap { width: calc(100% - var(--px) * 2); }
  .gf-opt-split > .gf-opt-rows { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gf-opt-blink { animation: none; }
}

/* ---------------------------------------------------------------- the fight's touch pad */
/* Left-handed (js/input.js setTouchOptions({ left: true }) -> .touch-pad[data-tp-hand="left"]):
   the stick moves to the right, the buttons to the left. The button arc is mirrored as one
   group (and each label turned back), so it follows whatever css/fight.css lays out; only the
   two groups' anchors are restated here (they mirror fight.css's own). Size and opacity are
   inline styles input.js sets itself. */
.touch-pad[data-tp-hand="left"] .tp-zone { left: auto; right: 0; }
.touch-pad[data-tp-hand="left"] .tp-stick {
  left: auto;
  right: calc(max(var(--tp-edge), env(safe-area-inset-right)) + 8px);
}
.touch-pad[data-tp-hand="left"] .tp-buttons {
  right: auto;
  left: max(var(--tp-edge), env(safe-area-inset-left));
  scale: -1 1;
}
.touch-pad[data-tp-hand="left"] .tp-btn > * { scale: -1 1; }
.fight-root[data-layout="tall"] > .touch-pad[data-tp-hand="left"] .tp-stick { left: auto; right: calc(50% - var(--tp-stick) / 2 - 3px); }
.fight-root[data-layout="tall"] > .touch-pad[data-tp-hand="left"] .tp-buttons { right: auto; left: var(--side); }