/* Ibux TV: a cable box on-screen display. Written for older TV browsers (no flex-gap, clamp, aspect-ratio). */
:root {
  --ink: #0b0a0e;
  --ink-2: #14121a;
  --ink-3: #1d1a26;
  --ivory: #f3ead6;
  --dim: #a79f8f;
  --amber: #ffb13b;
  --amber-d: #c9831a;
  --red: #e5483f;
  --green: #4fb477;
  --blue: #4a8fe0;
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body: 'Schibsted Grotesk', 'Trebuchet MS', Verdana, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--ivory); font-family: var(--body); cursor: none; }
body.mouse { cursor: default; }
.hidden { display: none !important; }

#video { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
#static { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .12s; image-rendering: pixelated; }
#static.on { opacity: 1; }
#grain { position: fixed; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; opacity: .05; z-index: 90;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px); }

.layer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20; }

/* ---------- boot ---------- */
#boot { background: radial-gradient(120% 90% at 50% 40%, #1f1a14 0%, var(--ink) 60%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 80; text-align: center; }
.boot-mark { font-family: var(--display); font-weight: 900; font-size: 22vw; line-height: .85; letter-spacing: -.01em; color: var(--ivory); }
.boot-mark span { color: var(--amber); margin-left: 1.4vw; }
.boot-line { margin-top: 5vh; font-size: 2.6vw; color: var(--ivory); animation: pulse 1.6s ease-in-out infinite; }
.boot-line b { color: var(--ink); background: var(--amber); padding: .1em .55em; border-radius: .25em; font-weight: 700; }
.boot-sub { margin-top: 2vh; font-size: 1.5vw; color: var(--dim); }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- typed digits ---------- */
#dial { position: fixed; right: 5vw; top: 6vh; z-index: 50; font-family: var(--display); font-weight: 900; font-size: 11vw; line-height: 1; color: var(--amber); text-shadow: 0 .06em 0 rgba(0,0,0,.6), 0 0 .5em rgba(0,0,0,.8); letter-spacing: .02em; }

/* ---------- banner ---------- */
#banner { position: fixed; left: 4vw; right: 4vw; bottom: 5vh; z-index: 40; background: linear-gradient(180deg, rgba(20,18,26,.92), rgba(11,10,14,.96)); border-left: .7vw solid var(--amber); padding: 2.4vh 2.6vw 2vh; box-shadow: 0 2vh 6vh rgba(0,0,0,.6); animation: rise .22s ease-out; }
@keyframes rise { from { transform: translateY(2vh); opacity: 0; } to { transform: none; opacity: 1; } }
#banner { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-column-gap: 2.4vw; align-items: center; }
#banner.hidden { display: none !important; }
.b-num { grid-row: 1 / 2; font-family: var(--display); font-weight: 900; font-size: 9vw; line-height: .9; color: var(--amber); min-width: 17vw; letter-spacing: .01em; }
.b-body { display: flex; align-items: center; min-width: 0; }
.b-logo { width: 9vw; height: 9vw; max-width: 130px; max-height: 130px; margin-right: 2vw; background: #fff; border-radius: .6vw; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.b-logo img { max-width: 86%; max-height: 86%; }
.b-logo.none { display: none; }
.b-text { min-width: 0; flex: 1; }
.b-name { font-family: var(--display); font-weight: 700; font-size: 4.6vw; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-meta { margin-top: .8vh; font-size: 1.7vw; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-flags { font-size: 1.5vw; margin-left: 2vw; text-align: right; color: var(--amber); font-weight: 700; flex: none; }
.b-keys { grid-column: 1 / 3; margin-top: 1.8vh; padding-top: 1.4vh; border-top: 1px solid rgba(243,234,214,.14); font-size: 1.3vw; color: var(--dim); }
.b-keys span { margin-right: 2.4vw; display: inline-block; }
.k { display: inline-block; width: .9vw; height: .9vw; border-radius: 50%; margin-right: .6vw; vertical-align: baseline; }
.k.red { background: var(--red); } .k.green { background: var(--green); } .k.yellow { background: var(--amber); } .k.blue { background: var(--blue); }

/* ---------- no signal ---------- */
#nosignal { z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; }
#nosignal.hidden { display: none !important; }
.ns-big { font-family: var(--display); font-weight: 900; font-size: 12vw; color: var(--ivory); letter-spacing: .04em; }
.ns-small { margin-top: 2vh; font-size: 2vw; color: var(--dim); }

/* ---------- volume ---------- */
#vol { position: fixed; left: 50%; bottom: 14vh; width: 36vw; margin-left: -18vw; z-index: 60; background: rgba(11,10,14,.9); padding: 1.6vh 2vw; border-radius: 1vw; text-align: center; }
.vol-label { font-family: var(--display); font-weight: 700; font-size: 2.4vw; letter-spacing: .1em; margin-bottom: 1vh; }
.vol-track { height: 1vh; background: rgba(243,234,214,.18); border-radius: 1vh; overflow: hidden; }
.vol-fill { height: 100%; background: var(--amber); }

/* ---------- guide ---------- */
#guide { background: rgba(11,10,14,.94); display: flex; padding: 4vh 4vw; z-index: 45; }
#guide.hidden { display: none !important; }
.g-rail { width: 24vw; flex: none; margin-right: 3vw; overflow: hidden; }
.g-rail .r { font-size: 1.9vw; padding: 1.5vh 1.4vw; margin-bottom: .6vh; border-left: .45vw solid transparent; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-rail .r small { color: var(--dim); opacity: .7; font-size: 1.3vw; margin-left: .6vw; }
.g-rail .r.sel { color: var(--ivory); border-left-color: var(--amber); background: var(--ink-3); }
.g-rail .r.focus { background: var(--amber); color: var(--ink); border-left-color: var(--ink); }
.g-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgba(243,234,214,.16); padding-bottom: 1.2vh; margin-bottom: 1.4vh; }
.g-head h2 { font-family: var(--display); font-weight: 900; font-size: 4.2vw; line-height: 1; }
.g-head span { color: var(--dim); font-size: 1.6vw; }
.g-list { flex: 1; overflow: hidden; position: relative; }
.row { display: flex; align-items: center; height: 8.6vh; padding: 0 1.6vw; border-left: .45vw solid transparent; }
.row .n { width: 7vw; font-family: var(--display); font-weight: 900; font-size: 3.6vw; color: var(--amber); flex: none; }
.row .lg { width: 7vw; height: 6vh; margin-right: 1.6vw; background: #fff; border-radius: .4vw; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.row .lg img { max-width: 88%; max-height: 88%; }
.row .lg.none { background: var(--ink-3); color: var(--dim); font-family: var(--display); font-weight: 700; font-size: 2.2vw; }
.row .nm { flex: 1; min-width: 0; font-size: 2.3vw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .mt { color: var(--dim); font-size: 1.5vw; margin-left: 1.4vw; flex: none; }
.row .fv { color: var(--amber); margin-left: 1vw; font-size: 2vw; width: 2vw; flex: none; }
.row.cur .nm { color: var(--amber); }
.row.focus { background: var(--amber); border-left-color: var(--ink); }
.row.focus .n, .row.focus .nm, .row.focus .mt, .row.focus .fv { color: var(--ink); }
.empty { padding: 6vh 2vw; font-size: 2.2vw; color: var(--dim); }

/* ---------- cinema ---------- */
#cinema { background: var(--ink); z-index: 46; overflow: hidden; }
#cinema.hidden { display: none !important; }
.c-backdrop { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: cover; background-position: center top; transition: opacity .3s; }
.c-shade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(11,10,14,.97) 8%, rgba(11,10,14,.55) 55%, rgba(11,10,14,.25) 100%), linear-gradient(0deg, rgba(11,10,14,1) 18%, rgba(11,10,14,0) 60%); }
.c-top { position: absolute; left: 4vw; top: 3.6vh; font-family: var(--display); font-weight: 900; }
.c-brand { font-size: 3vw; } .c-brand i { color: var(--amber); font-style: normal; margin-left: .3vw; }
.c-sub { margin-left: 1.6vw; font-size: 1.8vw; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; font-family: var(--body); font-weight: 600; }
.c-feature { position: absolute; left: 4vw; top: 13vh; width: 48vw; }
.c-feature { top: 11vh; height: 33vh; overflow: hidden; }
.c-feature .t { font-family: var(--display); font-weight: 900; font-size: 10vh; line-height: .95; max-height: 20vh; overflow: hidden; }
.c-feature .m { margin-top: 1.2vh; font-size: 3vh; color: var(--amber); font-weight: 700; }
.c-feature .o { margin-top: 1.2vh; font-size: 2.6vh; line-height: 1.35; color: var(--ivory); max-height: 10.5vh; overflow: hidden; }
.c-feature .h { margin-top: 1.2vh; font-size: 2.2vh; color: var(--dim); }
.c-rows { position: absolute; left: 0; right: 0; bottom: 6vh; height: 46vh; overflow: hidden; }
.c-row { margin-bottom: 1.8vh; height: 17vh; }
.c-row h3 { font-size: 1.7vw; font-weight: 700; margin: 0 0 .8vh 4vw; color: var(--ivory); }
.c-strip { white-space: nowrap; height: 14vh; overflow: hidden; padding-left: 4vw; font-size: 0; }
.card { display: inline-block; width: 9.4vh; height: 14vh; margin-right: 1vw; background: var(--ink-3) center/cover no-repeat; border-radius: .5vw; vertical-align: top; border: .3vw solid transparent; position: relative; }
.card.focus { border-color: var(--amber); transform: scale(1.12); z-index: 2; box-shadow: 0 1vh 3vh rgba(0,0,0,.7); }
.card .nm { position: absolute; left: 0; right: 0; bottom: 0; font-size: .9vw; padding: .4vw; background: rgba(0,0,0,.7); white-space: normal; line-height: 1.1; display: none; }
.card.noimg .nm { display: block; }
.c-attr { position: absolute; left: 4vw; right: 4vw; bottom: 1.6vh; font-size: 1.1vw; color: var(--dim); }
.c-trailer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 5; }
.c-trailer iframe { width: 100%; height: 100%; border: 0; }
.c-trailer-hint { position: absolute; right: 2vw; top: 2vh; background: rgba(0,0,0,.7); padding: .6vh 1vw; border-radius: .4vw; font-size: 1.4vw; color: var(--dim); }

@media (max-width: 900px) {
  .boot-line, .ns-small { font-size: 4vw; } .boot-sub { font-size: 3vw; }
  .b-name { font-size: 7vw; } .b-meta, .b-keys, .b-flags { font-size: 2.6vw; } .b-num { font-size: 13vw; min-width: 24vw; }
  .row .nm { font-size: 3.6vw; } .row .n { font-size: 6vw; } .row .mt { display: none; }
}