/* bar.css — the bottom control bar as the Sony RM-889 remote: a light warm-gray
 * plastic body with clusters separated by painted gray lines, dark matte RUBBER keys
 * (flat, no gradient, slight finger dish) with white glyphs, vertical +/- rockers
 * (paired arches), round info/mute/etc keys, and a green power key at the far right. */

#bar {
  /* The remote OVERLAYS the screen — it never resizes the picture. Floats above the video
     (z15) and below the page modals (panel z20 / settings z25). */
  position: absolute;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 96px;                       /* clears MENU (left) and power (right) so the
                                               gray groups stay centered between them */
  background: #c9c8c2;                      /* remote body — light warm gray */
  border-top: 1px solid #dbdad4;
}
/* BOTTOM controller: pinned along the bottom edge, overlaying the picture's lower strip.
   Nothing resizes, so the hide is a pure GPU transform slide (no reflow → no video jank). */
body:not(.ctrl-vertical) #bar { left: 0; right: 0; bottom: 0; }
/* The remote sticks to the WINDOW bottom at its natural height (NOT anchored up to the picture's
   letterboxed bottom edge). That way it's the same size in every window — never grows to fill a tall
   window's letterbox — there's no black gap under it, and translateY(100%) slides it fully off. (On a
   letterboxed picture the bottom OSD bar sits at the picture's bottom edge, above the remote.) */
body.mode-wide:not(.ctrl-vertical)  #bar,
body.mode-retro:not(.ctrl-vertical) #bar { bottom: 0; }
body.barfloat.barhidden:not(.ctrl-vertical) #bar { transform: translateY(100%); }

/* TOUCH hide: just drop it (display:none, no transform → no tablet mis-paint). */
body.barhidden:not(.barfloat) #bar { display: none; }

/* Two-stage reveal (desktop): a mouse move PEEKS the remote in ~10%; getting near / onto it slides it
   fully out. Pure GPU transform-slide (nothing reflows). barpeek sits between hidden (100% off) and
   full (0). */
body.barfloat #bar { transition: transform 0.18s ease; }
body.barfloat.barpeek:not(.ctrl-vertical) #bar { transform: translateY(70%); }   /* bottom: 30% peeking up */
body.barfloat.ctrl-vertical.barpeek #bar { transform: translateX(70%); }         /* side: 30% peeking in */

/* ─── VERTICAL CONTROLLER VARIANT (Controller setting = Side) ───────────────────
   The remote becomes a column OVERLAID on the RIGHT edge of the picture — it does NOT
   resize the video (it floats over it). Same keys as the bottom bar, re-flowed vertically
   with POWER at the top and MENU at the bottom; it hides by sliding out to the right. */
body.ctrl-vertical #bar {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  align-content: start;
  column-gap: 26px;
  row-gap: 8px;
  width: auto;
  height: auto;
  align-self: stretch;
  padding: 24px 22px;
  border-top: none;
  box-shadow: -10px 0 22px rgba(0, 0, 0, 0.34);
}
/* unwrap the bottom-bar groups so each key is a direct GRID item (rockers stay whole) */
body.ctrl-vertical #bar .grp,
body.ctrl-vertical #bar .grp .keys { display: contents; }
/* power + menu out of their absolute pin (horizontal bar) */
body.ctrl-vertical #bar #power,
body.ctrl-vertical #bar #gear {
  position: static; left: auto; right: auto; top: auto; transform: none;
}
body.ctrl-vertical #bar #power:active,
body.ctrl-vertical #bar #gear:active { transform: translateY(1px); }

/* ── placement, top → bottom (matching the reference remote) ── */
body.ctrl-vertical #bar #mute  { grid-row: 1; grid-column: 1; }                 /* mute  top-left  */
body.ctrl-vertical #bar #power { grid-row: 1; grid-column: 2; order: 0; }        /* power top-right */
body.ctrl-vertical #bar .grp:has(#volup) .glabel  { grid-row: 2; grid-column: 1; }  /* △ label    */
body.ctrl-vertical #bar .grp:has(#nextch) .glabel { grid-row: 2; grid-column: 2; }  /* PROGR label */
body.ctrl-vertical #bar .volrk { grid-row: 3; grid-column: 1; }                 /* VOL rocker   */
body.ctrl-vertical #bar .chrk  { grid-row: 3; grid-column: 2; }                 /* PROGR rocker */
/* relabel + tuck the labels right above their rockers, with a gap above (section break) */
body.ctrl-vertical #bar .grp:has(#volup) .glabel,
body.ctrl-vertical #bar .grp:has(#nextch) .glabel {
  font-size: 0; align-self: end; margin: 16px 0 0; letter-spacing: 0;
}
body.ctrl-vertical #bar .grp:has(#volup) .glabel::after  { content: "\25B3"; font-size: 15px; line-height: 1; }
body.ctrl-vertical #bar .grp:has(#nextch) .glabel::after { content: "PROGR"; font-size: 9px; letter-spacing: 1px; }

/* VOL rocker = ONE tall capsule (a continuous pill, split by a thin groove) */
body.ctrl-vertical #bar .volrk { gap: 2px; }
body.ctrl-vertical #bar .volrk .arch { width: 48px; height: 32px; }
body.ctrl-vertical #bar .volrk .arch.up { border-radius: 24px 24px 5px 5px; }
body.ctrl-vertical #bar .volrk .arch.dn { border-radius: 5px 5px 24px 24px; }
/* PROGR rocker = two SEPARATE rounded keys (+/−) — a clearly different shape */
body.ctrl-vertical #bar .chrk { gap: 9px; }
body.ctrl-vertical #bar .chrk .arch { width: 46px; height: 32px; border-radius: 12px; }

/* everything else (info, list, PIC, MENU) dropped underneath for now — each centred on its
   own full-width row, cleanly stacked. We'll arrange these properly next. */
body.ctrl-vertical #bar #info,
body.ctrl-vertical #bar #changech,
body.ctrl-vertical #bar #mode,
body.ctrl-vertical #bar #fs,
body.ctrl-vertical #bar #gear,
body.ctrl-vertical #bar .grp:has(#mode) .glabel {
  grid-column: 1 / -1;
  justify-self: center;
}
body.ctrl-vertical #bar #gear { order: 0; margin-top: 4px; }
body.ctrl-vertical #bar #info { margin-top: 18px; }   /* gap below the rockers */
/* SIDE controller: pinned along the RIGHT edge, full height, overlaying the right strip of
   the picture. Hide slides it off to the right (pure transform — nothing resizes). */
body.ctrl-vertical #bar { top: 0; right: 0; bottom: 0; left: auto; align-content: center; }
body.barfloat.ctrl-vertical.barhidden #bar { transform: translateX(100%); }

/* a cluster: a row of keys with a printed label below; divided from the next by a
   flat gray line painted on the body (not a beveled box) */
.grp {
  display: flex;
  flex-direction: column-reverse;          /* printed label sits ABOVE the keys */
  align-items: center;
  gap: 7px;
  padding: 2px 24px;
}
.grp .keys { display: flex; align-items: center; gap: 11px; }
.grp .glabel {
  color: #16160f;                           /* black printed label on the gray body */
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
}

/* dark matte rubber keys: flat colour (no gradient), white glyphs, a faint inner
   dish (the finger bevel) plus a soft drop shadow so they sit on the body */
#bar button {
  display: inline-flex;
  align-items: center;
  /* it's a TV remote, not a form — never show a focus ring or a tap-flash that lingers after a
     keyboard/gamepad channel change (the press is conveyed by the :active dome, not a highlight) */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  justify-content: center;
  line-height: 1;
  /* matte rubber, RAISED off the body: subtle top-lit dome + drop shadow (lit from
     above — highlight on top, soft shadow below), medium gray sampled from the photo */
  background: linear-gradient(180deg, #8c8f89 0%, #7e817b 52%, #74776f 100%);
  border: none;
  color: #fff;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  /* soft matte rubber: gentle top sheen, soft inner under-shade, diffuse drop shadow */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 -3px 5px rgba(0, 0, 0, 0.12), 0 3px 7px rgba(0, 0, 0, 0.22);
}
#bar button:active { background: linear-gradient(180deg, #74776f, #7e817b); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.2); transform: translateY(1px); }
#bar button.active { background: #6d706a; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.38); }

/* round keys (info, list, mute, aspect, screen) with the finger dish */
#bar .rnd { width: 46px; height: 46px; border-radius: 50%; padding: 0; }

/* the +/- rocker: two PERFECT semicircle arches paired into a split circle. Each arch
   is width W, height W/2, with full (W/2) radius on its outer corners and a flat inner
   edge → the two halves make a true circle with a thin finger groove. */
.rocker { display: flex; flex-direction: column; gap: 2px; }
#bar .arch { width: 48px; height: 24px; padding: 0; }
#bar .arch.up { border-radius: 24px 24px 0 0; }   /* perfect top semicircle, flat bottom */
#bar .arch.dn { border-radius: 0 0 24px 24px; }   /* flat top, perfect bottom semicircle */

/* FX-debug toggle — a tiny dev pill tucked in the free space above MENU (top-right of the bar).
   Opens the effects panel (fxdebug.js). id+id beats the generic #bar button styling. */
#bar #dbg {
  position: absolute; right: 18px; top: 5px;
  width: auto; min-width: 0; height: 16px; padding: 0 7px;
  font: 700 9px/15px "Courier New", monospace; letter-spacing: 1px;
  border-radius: 8px; color: #6a7280; background: #e2e1db; border: 1px solid #b9b8b2;
  box-shadow: none;
}
#bar #dbg:active { transform: translateY(1px); }
#bar #dbg.active { color: #06222e; background: #6fd3ff; border-color: #6fd3ff; }
body.ctrl-vertical #bar #dbg { display: none; }   /* dev tool: bottom-controller only */

/* MENU — a wider rounded rubber key, parked at the far right */
#bar .menu { width: auto; min-width: 66px; height: 42px; border-radius: 21px; padding: 0 16px; }
#bar #gear.menu { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
#bar #gear.menu:active { transform: translateY(calc(-50% + 1px)); }

/* green power key, far right like the remote (id+id beats #bar button) */
#bar #power {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #55b453 0%, #46a347 55%, #3e9742 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 -3px 5px rgba(0, 0, 0, 0.14), 0 3px 7px rgba(0, 0, 0, 0.22);
}
#bar #power:active { background: linear-gradient(180deg, #3e9742, #46a347); transform: translateY(calc(-50% + 1px)); }
#bar #power.active { background: #318536; }   /* standby on */

/* glyph icons — white, inherit the key colour */
#bar button .ic {
  width: 19px; height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.9;                          /* fat glyphs like the painted remote keys */
  stroke-linecap: round;
  stroke-linejoin: round;
}
#bar button .ic .f { fill: currentColor; stroke: none; }
#bar .arch .ic { width: 17px; height: 17px; }
#bar #power .ic { width: 21px; height: 21px; }

/* ─── DARK THEME — the black Sony Trinitron / WEGA remote ───────────────────────
   Matte charcoal ABS body, dark gunmetal RUBBER keys, off-white silk-screen
   legends. Default is the light RM-889; this is toggled from the Display setting
   (body.dark). Lighting model is unchanged (keys raised, lit from above) — only the
   plastic/rubber/ink colours shift to the black-remote palette. */
body.dark #bar {
  background: linear-gradient(180deg, #2a2930 0%, #201f24 100%);   /* matte black ABS, molded */
  border-top: 1px solid #3a3942;
}
body.dark .grp .glabel {
  color: #d6d7da;                                                  /* off-white print on black */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
body.dark #bar button {
  background: linear-gradient(180deg, #4a4951 0%, #3d3c44 52%, #322f37 100%);   /* gunmetal rubber */
  color: #eef0f2;                                                  /* silk-screen white */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14), inset 0 -3px 5px rgba(0, 0, 0, 0.30), 0 3px 7px rgba(0, 0, 0, 0.50);
}
body.dark #bar button:active { background: linear-gradient(180deg, #322f37, #3d3c44); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); }
body.dark #bar button.active { background: #2b2930; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
/* the green power key stays (the lit "on" affordance), just deepened to sit on black */
body.dark #bar #power { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -3px 5px rgba(0, 0, 0, 0.30), 0 3px 7px rgba(0, 0, 0, 0.50); }