/* PEXMART kiosk — TV stylesheet.
 *
 * CONSTRAINTS (deliberate, do not "modernise"):
 *   - No CSS custom properties  : unsupported on older TV engines.
 *   - No CSS grid               : same. Layout is inline-block + percentages.
 *   - No blur / heavy shadows   : TV GPUs choke; borders and flat fills instead.
 *   - Everything sized for 4 m  : nothing below 20px, body copy at 24px.
 *   - 4% safe-area inset on UI  : older sets overscan and clip the edges.
 *
 * Brand values sampled from the supplied logo artwork:
 *   red #FC010E   yellow #FCEE01   black #020101   white #FDFCFC
 */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;                 /* a kiosk never scrolls */
  background: #000;
  color: #fdfcfc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-user-select: none; user-select: none;
  cursor: none;                     /* hide the TV browser's pointer */
}

/* ---------------------------------------------------------------- video */

#stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }

#video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  object-fit: contain;              /* ignored on old engines; harmless */
}

/* ------------------------------------------------------------ overlays */

.layer {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
}
.layer.on { display: block; }

/* ------------------------------------------------------- attract state */

/* Logo bug, bottom right, always visible while the loop runs. */
#bug {
  position: absolute; right: 3%; bottom: 4%;
  width: 17%; max-width: 300px; min-width: 150px;
  opacity: 0.92;
}
#bug img { width: 100%; display: block; border-radius: 6px; }

/* "Press OK" nudge, bottom left. */
#hint {
  position: absolute; left: 4%; bottom: 6%;
  padding: 14px 26px 14px 22px;
  background: #020101;
  border-left: 8px solid #fcee01;
  font-size: 26px; font-weight: bold;
  letter-spacing: 0.5px;
  opacity: 0;
  -webkit-transition: opacity 600ms linear;
  transition: opacity 600ms linear;
}
#hint.show { opacity: 1; }
#hint b { color: #fcee01; }

/* Shown only if the browser refuses to autoplay (see kiosk.js). */
#tapstart {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #0a0a0a;
  text-align: center;
  display: none;
}
#tapstart.on { display: block; }
#tapstart .mid { position: absolute; top: 34%; left: 0; width: 100%; }
#tapstart img { width: 26%; min-width: 240px; margin-bottom: 40px; border-radius: 8px; }
#tapstart .big {
  font-size: 46px; font-weight: bold; color: #fcee01;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#tapstart .small { font-size: 26px; color: #bbb; margin-top: 16px; }

/* --------------------------------------------------------------- menu */

#menu { background: #0a0a0a; }


#menuInner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 4% 4% 3%; }

/* Header: logo left, angular red/yellow rule beneath. */
#mhead { height: 9%; position: relative; }
#mhead img { height: 86%; max-height: 116px; display: block; border-radius: 5px; }
#mhead .kicker {
  position: absolute; right: 0; bottom: 22%;
  font-size: 24px; letter-spacing: 3px; color: #888; text-transform: uppercase;
}
#mrule {
  height: 7px;
  background: #fc010e;
  background: -webkit-linear-gradient(left, #fcee01 0%, #fc010e 42%, #fc010e 100%);
  background: linear-gradient(to right, #fcee01 0%, #fc010e 42%, #fc010e 100%);
  margin-bottom: 2.2%;
}

/* The grid is vertically centred in the space between the rule and the footer,
   so it stays balanced whether there are 4 tiles (one row) or 8 (two rows).
   display:table is used rather than flexbox because it is supported by every
   TV engine we might meet, including the pre-flexbox ones. */
#tilesWrap {
  position: absolute;
  left: 4%; top: 15%;
  width: 92%;
  height: 80%;                    /* explicit: display:table will not resolve
                                     its height from top/bottom offsets alone.
                                     Tall enough, with tiles sized below, that
                                     all 11 items sit in 3 rows with real
                                     margin to spare under TV overscan - no
                                     scrolling is possible on a kiosk. */
  display: table;
}

#tiles {
  display: table-cell;
  vertical-align: middle;
  font-size: 0;                   /* kills inline-block whitespace gaps */
}

.tile {
  display: inline-block;
  vertical-align: top;
  /* 4 across: (23 + 2) x 4 = 98%. Must stay under 100 or the row breaks early.
     4 columns (not 3) so that 7-8 items still fit two rows on a 1080p panel
     without the grid running off the bottom of the screen. */
  width: 23%;
  margin: 0 2% 2.2% 0;
  background: #141414;
  border: 5px solid #141414;
  position: relative;
  outline: none;
  -webkit-transition: border-color 120ms linear, background-color 120ms linear;
  transition: border-color 120ms linear, background-color 120ms linear;
}
.tile.last { margin-right: 0; }

/* Thumbnail is short and wide, not 16:9 - the point of a picker tile is the
   number and the title, not a big poster. object-fit is ignored (harmless)
   on engines that predate it, per the #video rule above. */
.tile .thumb { position: relative; width: 100%; padding-bottom: 34%; overflow: hidden; background: #000; }
/* Crop from the upper part of the frame, not the middle. These posters are
   16:9 squeezed into a letterbox strip, and a centre crop lands halfway down a
   slide - which reads as half-sentences ("...ace ne ends"). The top third
   carries the headline on the deck clips and the subject's head on the filmed
   ones. object-position is ignored on pre-2018 engines, which simply get the
   old centre crop - no worse than before. */
.tile .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 16%; }

/* Skewed number badge — echoes the angle of the logo's arrow. */
.tile .num {
  position: absolute; top: 0; left: 0;
  background: #fc010e;
  color: #fff;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px; line-height: 1;
  padding: 6px 13px 6px 9px;
  -webkit-transform: skewX(-12deg); transform: skewX(-12deg);
  margin-left: -6px;
}
.tile .num span { display: inline-block; -webkit-transform: skewX(12deg); transform: skewX(12deg); }

.tile .dur {
  position: absolute; right: 0; top: 0;
  background: rgba(2, 1, 1, 0.85);
  color: #fcee01;
  font-size: 15px; font-weight: bold;
  padding: 4px 9px;
}

.tile .meta { padding: 10px 12px 12px; }
.tile .t {
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 23px; line-height: 1.12; color: #fdfcfc;
  max-height: 52px;               /* caps at 2 lines regardless of title
                                      length - keeps every tile's total
                                      height identical and predictable.
                                      Verified: 11 tiles still sit in 3 rows
                                      inside #tilesWrap at this size. */
  overflow: hidden;
}
/* Description text removed from the picker grid: at kiosk viewing distance
   the number + title is what a visitor actually reads, and dropping it is
   most of what makes 11 tiles fit one screen with room to spare. */
.tile .b { display: none; }

/* Focus — must read from 4 metres. Thick yellow, brighter ground, red title. */
.tile.focus {
  border-color: #fcee01;
  background: #241f00;
}
.tile.focus .t { color: #fcee01; }
.tile.focus .b { color: #cfcfcf; }
.tile.focus .num { background: #fcee01; color: #020101; }

#mfoot {
  position: absolute; left: 4%; right: 4%; bottom: 2.5%;
  font-size: 24px; color: #8a8a8a;
  border-top: 2px solid #2a2a2a;
  padding-top: 16px;
}
#mfoot b { color: #fcee01; margin-right: 6px; }
#mfoot .hintitem { margin-right: 52px; }

/* ------------------------------------------------------------- player */

/* Lower-third title card, shown for the first few seconds of a clip.
   Sized to be read across a stand aisle, not off a desk: at 4 m a 40px title
   on a 55" panel is borderline, 60px is comfortable. */
#lower {
  position: absolute; left: 4%; bottom: 12%;
  max-width: 74%;
  padding: 24px 44px 26px 32px;
  background: rgba(2, 1, 1, 0.9);
  border-left: 16px solid #fc010e;
  opacity: 0;
  -webkit-transition: opacity 400ms linear;
  transition: opacity 400ms linear;
}
#lower.show { opacity: 1; }
/* Skewed number chip above the title — same vocabulary as the menu tiles, so
   the number a visitor pressed is the number they see confirmed on screen. */
#lower .n {
  display: inline-block;
  background: #fcee01; color: #020101;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px; line-height: 1;
  padding: 7px 15px 7px 11px;
  margin-bottom: 14px;
  -webkit-transform: skewX(-12deg); transform: skewX(-12deg);
  letter-spacing: 2px;
}
#lower .t {
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 60px; color: #fdfcfc; line-height: 1.06;
  letter-spacing: -0.5px;
}
#lower .b { font-size: 28px; color: #fcee01; margin-top: 12px; line-height: 1.25; }

/* GHOST SLUG — permanent, faint, top right.
   The title card has to fade or it sits over the footage all day; the slug is
   what remains. Deliberately low contrast so it never competes with the clip,
   but carrying a hard shadow so it stays legible over a bright frame (welding
   arcs, white pipe, sky) without needing a blurred backing plate, which TV
   GPUs handle badly. */
#ghost {
  position: absolute; top: 5%; right: 4%;
  max-width: 46%;
  text-align: right;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 26px; line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fdfcfc;
  opacity: 0.38;
  text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.9);
  display: none;
  white-space: nowrap;
  overflow: hidden;
}
#ghost.on { display: block; }
#ghostN { color: #fcee01; margin-right: 12px; }

#bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; background: rgba(255,255,255,0.14); }
#barfill { width: 0; height: 100%; background: #fcee01; }

#paused {
  position: absolute; top: 46%; left: 0; width: 100%;
  text-align: center;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 54px; color: #fcee01;
  display: none;
}
#paused.on { display: block; }

/* Brief toast for seek / actions. */
#toast {
  position: absolute; top: 6%; left: 50%; margin-left: -140px;
  width: 280px; text-align: center;
  background: rgba(2,1,1,0.88);
  border-bottom: 5px solid #fcee01;
  font-size: 30px; font-weight: bold;
  padding: 14px 0;
  opacity: 0;
  -webkit-transition: opacity 250ms linear;
  transition: opacity 250ms linear;
}
#toast.show { opacity: 1; }


/* ---------------------------------------------------- low-power fallback */
/* Added to <body> by kiosk.js when it measures the panel below 20 fps.
   Nobody is asked to read an fps number; the app decides and adapts. */
body.lowpower #hint,
body.lowpower #lower,
body.lowpower #toast,
body.lowpower .tile {
  -webkit-transition: none !important;
  transition: none !important;
}


/* Shown by the stall watchdog after ~8 s of no progress, so a slow load reads
   as "loading" rather than "broken" while the fallback kicks in. */
#loading {
  position: absolute; top: 50%; left: 0; width: 100%;
  margin-top: -30px; text-align: center;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 40px; color: #fcee01;
  display: none;
}
#loading.on { display: block; }