/* MyApps for Samsung TVs. The same brand, sizes and motion as the Android app, drawn for a
   1920 x 1080 screen (one Android "dp" is two pixels here). */

/* Android draws the display face with extra boldness on top of its bold file; declaring the file as
   regular weight makes the browser do the same, so titles have the same weight on both. */
@font-face { font-family: "Comfortaa"; src: url("../fonts/comfortaa_700.ttf"); font-weight: 400; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins_400.ttf"); font-weight: 400; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins_700.ttf"); font-weight: 700; }

/* No CSS variables, grid or flex gaps: the 2016-2018 sets (Tizen 2.4 to 4.0, Chromium 47-56) know none of
   them, and a page that loses its colours and its focus ring there is unusable. Values are written out:
   ivory #FBFCEE, brown #343B1B, blue #3971B8 (strong #2E5E9C), tea #C8D69B, vanilla #F6E6A5,
   ease cubic-bezier(.2, .9, .3, 1), focus 170ms, side 128px. */

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #FBFCEE; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
/* The stage is the 1920 x 1080 picture every screen is drawn on; index.html zooms it to the browser. */
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; }
.f { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.f:active { transform: scale(.98); }
.card.focused:active, .tile.focused:active, .chan.focused:active, .event.focused:active { transform: scale(1.03); }
body {
  font-family: "Poppins", sans-serif; color: #343B1B;
  background: #FBFCEE radial-gradient(1440px 1440px at 92% 10%, rgba(246, 230, 165, .5), rgba(246, 230, 165, .15) 40%, rgba(246, 230, 165, 0) 70%) no-repeat;
  -webkit-user-select: none; user-select: none; cursor: default;
}
[hidden] { display: none !important; }
/* The display face is drawn a touch heavier, as Android draws it. */
.header h1, .hero h2, .tile .name, .chan .n, .event .time, .event .title, .pick h3, .dialog h3, .poster .art .alt, .cover .nm { -webkit-text-stroke: .022em currentColor; }
img { display: block; }

/* ------------------------------------------------------------------ screens */
.screen { position: absolute; top:0;right:0;bottom:0;left:0; padding: 60px 128px 0; display: flex; flex-direction: column; }
.screen.enter { animation: screenIn 220ms cubic-bezier(.2, .9, .3, 1) both; }
.screen.back { animation: screenBack 220ms cubic-bezier(.2, .9, .3, 1) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(2.5%); } }
@keyframes screenBack { from { opacity: 0; transform: scale(1.025); } }

.header { display: flex; align-items: center; height: 84px; flex: none; }
.header .mark { width: 248px; height: 84px; object-fit: contain; object-position: left center; }
.header h1 { margin: 0 0 0 36px; font: 700 48px/1.1 "Comfortaa"; color: #3971B8; letter-spacing: -.02em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header .spacer { flex: 1; }

/* A scrolling area: moved by the app as focus moves, never by a scroll bar. */
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; position: relative; margin: 0 -48px; padding: 0 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 24px), transparent 100%); }
.scroll > .inner { padding: 24px 0 120px; }
.scroll::-webkit-scrollbar, .chips::-webkit-scrollbar, [data-hscroll]::-webkit-scrollbar, .dialog .opts::-webkit-scrollbar { display: none; }
[data-hscroll] { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.dialog .opts { overflow-y: auto; scrollbar-width: none; }

/* ------------------------------------------------------------------ focus: one lift for every card */
.f { transition: transform 170ms cubic-bezier(.2, .9, .3, 1), background-color 160ms ease, color 160ms ease; outline: none; }
.card.focused, .tile.focused, .poster.focused .art, .chan.focused, .event.focused { transform: scale(1.06); }
.poster .art { transform-origin: 50% 75%; transition: transform 170ms cubic-bezier(.2, .9, .3, 1); }

.btn-text { display: inline-flex; align-items: center; height: 88px; padding: 0 36px; border-radius: 28px; font: 700 30px "Poppins"; color: #3971B8; }
.btn-text.focused { background: #C8D69B; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 96px; min-width: 280px; padding: 0 56px; border-radius: 32px;
  font: 700 32px "Poppins"; color: #FBFCEE; background: #3971B8; border: 6px solid transparent; }
.btn.focused { background: #2E5E9C; border-color: #343B1B; }
.btn.disabled { background: rgba(57, 113, 184, .4); }

/* ------------------------------------------------------------------ home */
.hero h2 { margin: 120px 0 0; font: 700 68px/1.15 "Comfortaa"; color: #3971B8; letter-spacing: -.02em; }
.hero p { margin: 22px 0 0; font: 400 32px "Poppins"; color: rgba(52, 59, 27, .55); }
.tiles { display: flex; margin-top: 48px; }
.tiles > * + * { margin-left: 104px; }
.tile { position: relative; flex: none; width: 780px; height: 412px; border-radius: 44px; padding: 48px 64px 52px; display: flex; flex-direction: column; justify-content: flex-end; }
.tile::after { content: ""; position: absolute; top:-10px;right:-10px;bottom:-10px;left:-10px; border-radius: 54px; border: 10px solid transparent; transition: border-color 120ms ease; }
.tile.focused::after { border-color: #3971B8; }
.tile.movies { background: #C8D69B; }
.tile.live { background: #F6E6A5; }
.tile svg { width: 112px; height: 112px; fill: #3971B8; margin-bottom: auto; flex: none; }
.tile .host { font: 700 26px "Poppins"; letter-spacing: .12em; text-transform: uppercase; color: #343B1B; }
.tile .name { margin-top: 12px; font: 700 68px/1.12 "Comfortaa"; color: #3971B8; }

.section { margin: 72px 0 0; font: 700 24px "Poppins"; letter-spacing: .12em; text-transform: uppercase; color: #343B1B; }
.row { display: flex; margin-top: 28px; }
.row > * + * { margin-left: 32px; }

/* ------------------------------------------------------------------ posters, channels, events */
.poster { width: 250px; flex: none; }
.poster .art { position: relative; height: 372px; border-radius: 28px; background: #C8D69B; overflow: hidden; }
.poster .art img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms cubic-bezier(.2, .9, .3, 1); }
.poster .art img.on { opacity: 1; }
.poster .art .alt { position: absolute; top:0;right:0;bottom:0;left:0; padding: 20px; display: flex; align-items: center; justify-content: center; text-align: center; font: 700 28px "Comfortaa"; color: #3971B8; }
.poster .art::after { content: ""; position: absolute; top:0;right:0;bottom:0;left:0; border-radius: 28px; border: 8px solid transparent; }
.poster.focused .art::after { border-color: #3971B8; }
.poster .t { margin-top: 16px; font: 700 26px "Poppins"; color: #343B1B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster.focused .t { color: #3971B8; }
.poster .s { font: 400 22px "Poppins"; color: rgba(52, 59, 27, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster .bar { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 8px; border-radius: 4px; background: rgba(251, 252, 238, .7); }
.poster .bar i { display: block; height: 100%; border-radius: 4px; background: #3971B8; }
.poster .lock { position: absolute; top:0;right:0;bottom:0;left:0; display: flex; align-items: center; justify-content: center; flex-direction: column; font: 700 26px "Poppins"; color: #3971B8; }
.poster .lock > * + * { margin-top: 12px; }

/* Rows of cards: wrapped flex with margins, which every set draws alike (6 posters, 4 channels, 2 events). */
.grid { display: flex; flex-wrap: wrap; align-items: flex-start; margin: -16px 0; }
.grid > * { margin: 16px 32px 16px 0; }
.grid.posters > * { width: 250px; }
.grid.posters > *:nth-child(6n) { margin-right: 0; }
.grid.chans > * { width: 392px; }
.grid.chans > *:nth-child(4n) { margin-right: 0; }
.grid.events > * { width: 816px; }
.grid.events > *:nth-child(2n) { margin-right: 0; }
/* Rows of posters by kind, each scrolling sideways; the ring is drawn outside the row, so it has air. */
.prows { padding-bottom: 24px; }
.prowwrap + .prowwrap { margin-top: 20px; }
.prowwrap .section { margin: 0 0 4px; }
.prow { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 14px 12px 12px; margin: 0 -12px; }
.prow::-webkit-scrollbar { display: none; }
.prow > * + * { margin-left: 32px; }
.chips.sports { margin-top: 4px; }
.chips.sports .chip { height: 60px; font-size: 23px; padding: 0 26px; }
.header .mark.f { border-radius: 16px; transition: transform 170ms cubic-bezier(.2, .9, .3, 1); }
.header .mark.focused { transform: scale(1.06); box-shadow: 0 0 0 6px #C8D69B; }

.chan { position: relative; height: 168px; border-radius: 36px; background: #F6E6A5; padding: 0 40px; display: flex; align-items: center; }
.chan > * + * { margin-left: 24px; }
.chan::after, .event::after { content: ""; position: absolute; top:-10px;right:-10px;bottom:-10px;left:-10px; border-radius: 46px; border: 10px solid transparent; }
.chan.focused::after, .event.focused::after { border-color: #3971B8; }
.chan .n { font: 700 34px/1.2 "Comfortaa"; color: #3971B8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chan .pin { position: absolute; right: 26px; top: 20px; font: 700 20px "Poppins"; letter-spacing: .1em; color: #343B1B; opacity: .55; }

.event { position: relative; height: 224px; border-radius: 44px; background: #C8D69B; padding: 0 40px; display: flex; align-items: center; }
.event > * + * { margin-left: 24px; }
.event .when { width: 248px; flex: none; display: flex; flex-direction: column; align-items: center; }
.event .time { font: 700 52px "Comfortaa"; color: #3971B8; white-space: nowrap; }
.event .time small { font-size: 26px; margin-left: 4px; }
.event .badge { margin-top: 12px; padding: 4px 20px; border-radius: 16px; background: #3971B8; color: #FBFCEE; font: 700 22px "Poppins"; letter-spacing: .1em; }
.event .badge.tomorrow { background: #343B1B; }
.event .what { flex: 1; min-width: 0; }
.event .sport { font: 700 20px "Poppins"; letter-spacing: .1em; text-transform: uppercase; color: #343B1B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event .title { margin-top: 4px; font: 700 32px/1.25 "Comfortaa"; color: #3971B8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event .chs { margin-top: 4px; font: 400 24px "Poppins"; color: rgba(52, 59, 27, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ search screens */
.searchbox { display: flex; align-items: center; width: 1120px; height: 108px; margin-top: 24px; border-radius: 56px; background: #fff; border: 4px solid rgba(52, 59, 27, .2); padding: 0 44px; flex: none; }
.searchbox.focused { border: 8px solid #3971B8; padding: 0 40px; }
.searchbox svg { width: 48px; height: 48px; fill: #3971B8; flex: none; }
.searchbox input { flex: 1; margin-left: 28px; border: 0; outline: 0; background: none; font: 400 36px "Poppins"; color: #343B1B; }
.searchbox input::-webkit-input-placeholder { color: rgba(52, 59, 27, .4); }
.searchbox input::placeholder { color: rgba(52, 59, 27, .4); }

.chips { display: flex; margin-top: 24px; flex: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 12px 6px; margin-left: -6px; margin-right: -6px; }
.chips > * + * { margin-left: 16px; }
.chips .label { align-self: center; width: 140px; flex: none; font: 700 22px "Poppins"; letter-spacing: .1em; text-transform: uppercase; color: rgba(52, 59, 27, .55); }
.chip { flex: none; height: 72px; padding: 0 32px; border-radius: 40px; background: #fff; border: 3px solid rgba(52, 59, 27, .2); display: flex; align-items: center; font: 700 26px "Poppins"; color: #3971B8; white-space: nowrap; }
.chip.on { background: #3971B8; border-color: #3971B8; color: #FBFCEE; }
.chip.focused { transform: scale(1.06); border: 6px solid #3971B8; background: #C8D69B; color: #3971B8; }
.chip.on.focused { border-color: #343B1B; background: #3971B8; color: #FBFCEE; }

.status { display: flex; align-items: center; margin-top: 20px; height: 52px; flex: none; font: 700 24px "Poppins"; letter-spacing: .1em; text-transform: uppercase; color: #343B1B; }
.status > * + * { margin-left: 28px; }
.status .hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(52, 59, 27, .4); }

/* ------------------------------------------------------------------ surprise */
.pick { flex: 1; margin: 36px 0 48px; border-radius: 44px; background: #F6E6A5; padding: 44px; display: flex; align-items: center; }
.pick > * + * { margin-left: 52px; }
.pick .art { position: relative; width: 352px; height: 528px; border-radius: 28px; background: #C8D69B; overflow: hidden; flex: none; }
.pick .art img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms cubic-bezier(.2, .9, .3, 1); }
.pick .art img.on { opacity: 1; }
.pick .text { flex: 1; min-width: 0; }
.pick h3 { margin: 0; font: 700 60px/1.15 "Comfortaa"; color: #3971B8; letter-spacing: -.02em; }
.pick .meta { margin-top: 12px; font: 700 24px "Poppins"; letter-spacing: .08em; text-transform: uppercase; }
.pick .ov { margin-top: 20px; font: 400 30px/1.6 "Poppins"; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pick .actions { display: flex; margin-top: 32px; }
.pick .actions > * + * { margin-left: 24px; }
.settle { animation: settle 280ms cubic-bezier(.2, .9, .3, 1) both; }
@keyframes settle { from { opacity: 0; transform: translateY(24px); } }

/* ------------------------------------------------------------------ settings */
.rows { width: 1300px; }
.srow { position: relative; display: flex; align-items: center; min-height: 120px; padding: 24px 40px 24px 44px; border-radius: 28px; }
.srow.focused { background: #C8D69B; }
.srow.focused::before { content: ""; position: absolute; left: 12px; top: 20px; bottom: 20px; width: 10px; border-radius: 5px; background: #3971B8; }
.srow .tx { flex: 1; }
.srow .tt { font: 700 36px "Poppins"; }
.srow .ts { margin-top: 4px; font: 400 26px/1.4 "Poppins"; color: rgba(52, 59, 27, .55); }
.shead { margin: 40px 0 8px 44px; font: 700 24px "Poppins"; letter-spacing: .12em; text-transform: uppercase; }
.shead:first-child { margin-top: 8px; }

/* ------------------------------------------------------------------ the waiting dots */
.dots { display: inline-flex; align-items: center; height: 20px; }
.dots i + i { margin-left: 12px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: currentColor; animation: breathe 1100ms linear infinite; }
.dots i:nth-child(2) { animation-delay: 366ms; }
.dots i:nth-child(3) { animation-delay: 733ms; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.72); } 50% { opacity: 1; transform: scale(1); } }
.dots.blue { color: #3971B8; }
.dots.big i { width: 24px; height: 24px; }
.dots.big { height: 32px; }
.dots.big i + i { margin-left: 20px; }

/* ------------------------------------------------------------------ messages in passing */
#notice { position: absolute; left: 50%; bottom: 64px; max-width: 1280px; transform: translate(-50%, 28px); opacity: 0; z-index: 90;
  padding: 24px 48px; border-radius: 36px; background: #3971B8; color: #FBFCEE; font: 700 30px/1.35 "Poppins"; text-align: center;
  transition: opacity 180ms cubic-bezier(.2, .9, .3, 1), transform 220ms cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
#notice.on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ dialogs */
.scrim { position: absolute; top:0;right:0;bottom:0;left:0; z-index: 80; cursor: pointer; background: rgba(52, 59, 27, .45); display: flex; align-items: center; justify-content: center; }
.dialog { min-width: 820px; max-width: 1100px; max-height: 1000px; display: flex; flex-direction: column; border-radius: 44px; background: #FBFCEE; padding: 56px 64px 44px; animation: dialogIn 200ms cubic-bezier(.2, .9, .3, 1) both; }
/* A long list (a match on many channels) scrolls inside the dialog instead of running off the screen. */
.dialog .opts { overflow: hidden; min-height: 0; flex: 1 1 auto; }
@keyframes dialogIn { from { opacity: 0; transform: scale(.95); } }
.dialog h3 { margin: 0; font: 700 44px "Comfortaa"; color: #3971B8; }
.dialog p { margin: 18px 0 0; font: 400 30px/1.5 "Poppins"; }
.dialog .opts { margin-top: 28px; display: flex; flex-direction: column; }
.dialog .opt + .opt { margin-top: 8px; }
.dialog .opt { height: 96px; display: flex; align-items: center; padding: 0 40px; border-radius: 28px; font: 700 32px "Poppins"; }
.dialog .opt.focused { background: #C8D69B; color: #3971B8; }
.pinbox { text-align: center; }
.pinbox .digits { display: flex; justify-content: center; margin: 36px 0 12px; }
.pinbox .digits i + i { margin-left: 28px; }
.pinbox .digits i { width: 36px; height: 36px; border-radius: 50%; border: 4px solid #3971B8; }
.pinbox .digits i.on { background: #3971B8; }
.pinbox .msg { min-height: 44px; font: 400 28px "Poppins"; color: rgba(52, 59, 27, .55); }
.pinbox .msg.bad { color: #8A3A28; }
.pad { display: flex; flex-wrap: wrap; width: 416px; margin: 20px auto 0; }
.pad .k { width: 128px; margin: 0 16px 16px 0; }
.pad .k:nth-child(3n) { margin-right: 0; }
.pad .k { height: 128px; border-radius: 28px; display: flex; align-items: center; justify-content: center; font: 700 44px "Poppins"; color: #3971B8; }
.pad .k.small { font-size: 26px; }
.pad .k.focused { background: #C8D69B; }

/* ------------------------------------------------------------------ live player */
#player { position: absolute; top:0;right:0;bottom:0;left:0; z-index: 60; background: #000; }
/* A pointer brought along the top of the picture brings the bar up (see Player.pointerBar). */
.pstrip { position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: 3; }
/* The way out for a finger or a pointer: comes with the bar, and stays on a touch screen. */
.pback { position: absolute; left: 32px; top: 28px; z-index: 4; height: 72px; padding: 0 30px 0 24px; border-radius: 36px; background: #FBFCEE; border: 5px solid #3971B8; color: #3971B8;
  font: 700 28px "Poppins"; display: flex; align-items: center; opacity: 0; transform: translateY(-12px); transition: opacity 180ms cubic-bezier(.2, .9, .3, 1), transform 220ms cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.pback.on, html.touch .pback { opacity: 1; transform: none; pointer-events: auto; }
.pback.focused { background: #C8D69B; }
html.narrow .pback { left: calc(20px + env(safe-area-inset-left, 0px)); top: calc(20px + env(safe-area-inset-top, 0px)); height: 60px; font-size: 24px; padding: 0 22px 0 18px; }
#player iframe { position: absolute; top:0;right:0;bottom:0;left:0; width: 100%; height: 100%; border: 0; }
.cover { position: absolute; top:0;right:0;bottom:0;left:0; z-index: 2; background: #000; color: #F6E6A5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 220ms cubic-bezier(.2, .9, .3, 1); text-align: center; padding: 0 160px; }
.cover > * + * { margin-top: 96px; }
.cover .nm { font: 700 76px/1.2 "Comfortaa"; }
.cover .sub { margin-top: -64px; font: 400 30px/1.5 "Poppins"; color: rgba(251, 252, 238, .7); max-width: 1200px; }
.cover.off { opacity: 0; pointer-events: none; }
.pbar { position: absolute; left: 50%; bottom: 72px; transform: translate(-50%, 28px); opacity: 0; z-index: 3; display: flex; padding: 16px 20px;
  border-radius: 52px; background: #FBFCEE; border: 6px solid #3971B8; transition: opacity 180ms cubic-bezier(.2, .9, .3, 1), transform 220ms cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.pbar > * + * { margin-left: 8px; }
.pbar.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pbar .btn-text { height: 80px; padding: 0 30px; font-size: 28px; }


/* ------------------------------------------------------------------ phones and tablets held upright
   The stage is 720 wide and as tall as it needs; the page scrolls (index.html sets html.narrow). */
html.narrow, html.narrow body { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100vh; min-height: 100dvh; }
html.narrow #stage { position: relative; width: 720px; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
html.narrow .screen { position: relative; min-height: 100vh; min-height: 100dvh; padding: calc(28px + env(safe-area-inset-top, 0px)) 28px calc(40px + env(safe-area-inset-bottom, 0px)); }
html.narrow .header { height: auto; flex-wrap: wrap; row-gap: 12px; }
html.narrow .header .mark { width: 186px; height: 63px; }
html.narrow .header h1 { font-size: 40px; margin-left: 24px; flex: 1 1 100%; order: 3; margin: 8px 0 0; white-space: normal; }
html.narrow .header .btn-text { height: 64px; padding: 0 22px; font-size: 24px; }
html.narrow .scroll { flex: none; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
html.narrow .scroll > .inner { padding: 20px 0 40px; }
html.narrow .hero h2 { margin-top: 56px; font-size: 52px; }
html.narrow .hero p { font-size: 26px; }
html.narrow .tiles { flex-wrap: wrap; margin-top: 32px; }
html.narrow .tiles > * + * { margin-left: 0; margin-top: 28px; }
html.narrow .tile { width: 664px; height: 300px; padding: 36px 44px 40px; border-radius: 36px; }
html.narrow .tile svg { width: 84px; height: 84px; }
html.narrow .tile .name { font-size: 52px; }
html.narrow .section { margin-top: 48px; }
html.narrow .row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 12px 0; margin: 16px -28px 0; padding-left: 28px; }
html.narrow .row::-webkit-scrollbar { display: none; }
html.narrow .grid > * { margin: 12px 24px 12px 0; }
html.narrow .prow { margin: 0 -28px; padding: 14px 28px 12px; }
html.narrow .prow > * + * { margin-left: 24px; }
html.narrow .prow .poster { width: 205px; }
html.narrow .grid.posters > * { width: 205px; }
html.narrow .grid.posters > *:nth-child(6n) { margin-right: 24px; }
html.narrow .grid.posters > *:nth-child(3n) { margin-right: 0; }
html.narrow .poster { width: 205px; }
html.narrow .poster .art { height: 306px; border-radius: 22px; }
html.narrow .poster .t { font-size: 22px; }
html.narrow .poster .s { font-size: 19px; }
html.narrow .grid.chans > * { width: 320px; }
html.narrow .grid.chans > *:nth-child(4n) { margin-right: 24px; }
html.narrow .grid.chans > *:nth-child(2n) { margin-right: 0; }
html.narrow .chan { height: 150px; padding: 0 28px; border-radius: 30px; }
html.narrow .chan .n { font-size: 28px; }
html.narrow .grid.events > * { width: 664px; margin-right: 0; }
html.narrow .event { height: auto; min-height: 180px; padding: 20px 28px; border-radius: 34px; }
html.narrow .event .when { width: 180px; }
html.narrow .event .time { font-size: 40px; }
html.narrow .searchbox { width: 100%; height: 92px; }
html.narrow .searchbox input { font-size: 30px; }
html.narrow .chips { margin: 20px -28px 0; padding: 12px 28px; }
html.narrow .status { height: auto; flex-wrap: wrap; row-gap: 6px; font-size: 20px; }
html.narrow .pick { flex-direction: column; align-items: stretch; padding: 32px; margin: 28px 0 32px; }
html.narrow .pick > * + * { margin-left: 0; margin-top: 24px; }
html.narrow .pick .art { width: 300px; height: 450px; align-self: center; }
html.narrow .pick h3 { font-size: 46px; }
html.narrow .pick .ov { font-size: 26px; }
html.narrow .rows { width: 100%; }
html.narrow .srow { padding: 20px 24px 20px 36px; }
html.narrow .srow .tt { font-size: 30px; }
html.narrow .srow .ts { font-size: 22px; }
html.narrow .scrim { position: fixed; }
html.narrow .dialog { min-width: 0; width: calc(100% - 48px); max-width: 664px; max-height: 85vh; padding: 36px 32px 28px; border-radius: 34px; }
html.narrow .dialog h3 { font-size: 36px; }
html.narrow .dialog p { font-size: 26px; }
html.narrow .dialog .opt { height: 84px; font-size: 28px; }
html.narrow #player { position: fixed; }
html.narrow .pbar { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html.narrow .pbar .btn-text { height: 64px; padding: 0 20px; font-size: 24px; }
html.narrow .cover .nm { font-size: 48px; }
html.narrow .cover .sub { font-size: 24px; margin-top: -40px; }
html.narrow #notice { position: fixed; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 48px); font-size: 24px; padding: 18px 28px; }

/* Motion is kept for those who want it. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }