/* POC (owner 2026-10-08: "it really has to feel like netflix"): the archive as a streaming service, the site's front (site/lib/flix.js)
   (site/lib/flix.js, static/flix.js). Its own stylesheet: nothing here touches the rest of the site. */
:root { --bg: #141414; --red: #e50914; --text: #fff; --dim: #b3b3b3; --dim2: #808080; --panel: #181818; --pad: 4%; --per: 6; --gap: .4vw;
  --cw: calc((100vw - 2 * var(--pad) - (var(--per) - 1) * var(--gap)) / var(--per)); color-scheme: dark; }
@media (max-width: 1399px) { :root { --per: 5; } } @media (max-width: 1099px) { :root { --per: 4; } }
@media (max-width: 799px) { :root { --per: 3; } }
* { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(body.fx), body.fx { overflow-x: clip; }
body.fx { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }

/* the opening: the rune, a beat, the page (once a visit) */
.ftudum { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #000; animation: fxout .45s ease 1.55s forwards; pointer-events: none; }   /* clicks go through it (a click on the logo during it went nowhere) */
.ftudum[hidden] { display: none; }
.ftd { display: flex; align-items: center; gap: 18px; animation: fxtd 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.ftd img { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 0 28px rgba(77,187,223,.85)); }
.ftd b { font: 900 64px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.02em; } .ftd i, .flogo i { font-style: normal; color: #4dbbdf; }
@keyframes fxtd { 0% { transform: scale(.55); opacity: 0; filter: blur(8px); } 35% { opacity: 1; filter: blur(0); } 70% { transform: scale(1.04); } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes fxout { to { opacity: 0; visibility: hidden; } }

/* the bar: see-through over the billboard, solid once scrolled */
.fnav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; gap: 2.4vw; padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(0,0,0,.72) 10%, rgba(0,0,0,0)); transition: background-color .4s; }
.fnav.solid { background-color: #141414; }
.flogo { display: flex; align-items: center; gap: 8px; } .flogo img { image-rendering: pixelated; }
.flogo b { font: 900 25px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.02em; }
.flinks { display: flex; gap: 20px; font-size: 14px; } .flinks a { color: #e5e5e5; transition: color .3s; } .flinks a:hover { color: #b3b3b3; } .flinks a.on { color: #fff; font-weight: 700; }
.fnr { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.fico { display: grid; place-items: center; border: 0; background: none; padding: 0; position: relative; }
.fme { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; } .fme i { font-style: normal; font-size: 12px; transition: transform .3s; } .fme:hover i { transform: rotate(180deg); }
.fav { width: 32px; height: 32px; border-radius: 4px; background: #333 center / 70% no-repeat; image-rendering: pixelated; }

/* the billboard: the best moment playing, its title and two buttons on the left, the rating box on the right */
.fbb { position: relative; height: 56.25vw; max-height: 100vh; min-height: 460px; }
.fbbm { position: absolute; inset: 0; overflow: hidden; background: #000; }
.fbbp, .fbbv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: opacity .8s; }
.fbbv { opacity: 0; } .fbb.playing .fbbv { opacity: 1; } .fbb.playing .fbbp { opacity: 0; }
.fbbsh { position: absolute; inset: 0; background: linear-gradient(77deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 32%, rgba(0,0,0,0) 70%), linear-gradient(180deg, rgba(20,20,20,0) 62%, rgba(20,20,20,.15) 70%, rgba(20,20,20,.55) 82%, #141414 100%); }
.fbbin { position: absolute; z-index: 2; left: var(--pad); bottom: 31%; width: 38%; }
.fbbtag { display: flex; align-items: center; gap: .7vw; font-size: 1.45vw; font-weight: 700; margin-bottom: .9vw; text-shadow: 2px 2px 4px rgba(0,0,0,.45); }
.fbbt { margin: 0 0 1.1vw; font: 900 clamp(30px, 3.9vw, 72px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; text-shadow: 2px 2px 6px rgba(0,0,0,.5); text-wrap: balance; transition: transform 1.2s, font-size 1.2s; transform-origin: left bottom; }
.fbbs { margin: 0 0 1.5vw; font-size: clamp(14px, 1.25vw, 22px); line-height: 1.3; text-shadow: 2px 2px 4px rgba(0,0,0,.45); transition: opacity .8s, max-height .8s; max-height: 10em; overflow: hidden; }
.fbb.quiet .fbbs { opacity: 0; max-height: 0; } .fbb.quiet .fbbt { transform: scale(.78); }
.fbbb { display: flex; gap: .7vw; }
.fplay, .finfo { display: inline-flex; align-items: center; gap: .6em; padding: .55em 1.9em .55em 1.4em; border: 0; border-radius: 4px; font-size: clamp(15px, 1.3vw, 24px); font-weight: 700; white-space: nowrap; }
.fplay { background: #fff; color: #000; } .fplay:hover { background: rgba(255,255,255,.75); }
.finfo { background: rgba(109,109,110,.7); color: #fff; } .finfo:hover { background: rgba(109,109,110,.4); }
.fbbr { position: absolute; z-index: 2; right: 0; bottom: 31%; display: flex; align-items: center; gap: 1.1vw; }
.fmute { width: clamp(36px, 2.6vw, 48px); height: clamp(36px, 2.6vw, 48px); display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: transparent; } .fmute:hover { background: rgba(255,255,255,.1); }
.frating { display: flex; align-items: center; min-width: 9vw; padding: .45vw 3vw .45vw .8vw; border-left: 3px solid #dcdcdc; background: rgba(51,51,51,.6); font-size: clamp(13px, 1.1vw, 20px); }
.ft10 { display: inline-grid; place-items: center; background: var(--red); color: #fff; font: 900 .52vw/0.95 "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; padding: .25vw .2vw; border-radius: 2px; }
.ft10.big { font-size: clamp(9px, .75vw, 14px); width: clamp(26px, 2.1vw, 40px); height: clamp(32px, 2.6vw, 50px); }

/* the rows: a title, a page indicator, cards a page at a time; the first rows over the billboard's foot */
.frows { position: relative; z-index: 3; margin-top: -11vw; padding-bottom: 4vw; }
.frow { margin: 0 0 3vw; position: relative; }
.fh { margin: 0 var(--pad) .55vw; font-size: clamp(15px, 1.4vw, 26px); font-weight: 700; color: #e5e5e5; } .fh a { display: inline-flex; align-items: baseline; gap: .6vw; }
.fxa { font-size: .62em; color: #54b9c5; opacity: 0; transform: translateX(-1em); transition: opacity .4s, transform .4s; white-space: nowrap; } .fxa i { font-style: normal; }
.frow:hover .fxa { opacity: 1; transform: none; }
.fpg { position: absolute; top: .4vw; right: var(--pad); display: flex; gap: 2px; opacity: 0; transition: opacity .3s; } .frow:hover .fpg { opacity: 1; }
.fpg i { width: 12px; height: 2px; background: #4d4d4d; } .fpg i.on { background: #aaa; }
.fsl { position: relative; padding: 0 var(--pad); overflow-x: clip; overflow-clip-margin: 0; }
.ftr { display: flex; gap: var(--gap); transition: transform .75s ease; will-change: transform; }
.fbtn { position: absolute; z-index: 4; top: 0; bottom: 0; width: calc(var(--pad) - var(--gap)); border: 0; padding: 0; background: rgba(20,20,20,.5); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .2s, background .2s; }
.fbtn i { font: 400 3vw/1 "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; transition: transform .1s; } .fbtn:hover { background: rgba(20,20,20,.7); } .fbtn:hover i { transform: scale(1.25); }
.fprev { left: 0; border-radius: 0 4px 4px 0; } .fnext { right: 0; border-radius: 4px 0 0 4px; } .frow:hover .fbtn { opacity: 1; } .fbtn[hidden] { display: none; }

/* a card: the picture, a little rune in its corner, its title over the bottom */
.fc { flex: 0 0 var(--cw); position: relative; }
.fca { display: block; }
.fci { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #2b2b2b;
  /* depth (owner: "the cards needs more drop shadow or something"): a soft shadow under, a faint light edge */
  box-shadow: 0 10px 22px rgba(0,0,0,.7), 0 3px 6px rgba(0,0,0,.55); outline: 1px solid rgba(255,255,255,.07); outline-offset: -1px; }
.fci img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.fci::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.82)); }
.frune { position: absolute; z-index: 2; top: 7%; left: 5%; width: 9%; aspect-ratio: 1; background: url(/static/rune.svg) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.fct { position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 8%; font: 900 clamp(11px, .95vw, 18px)/1.05 "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 2px 3px #000, 0 0 12px rgba(0,0,0,.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fct small { display: block; font-weight: 700; font-size: .72em; color: #ddd; margin-bottom: .2em; }
.fnew { position: absolute; z-index: 3; left: 50%; bottom: 0; transform: translateX(-50%); padding: .15vw .5vw; border-radius: 2px 2px 0 0; background: var(--red); font: 700 clamp(9px, .62vw, 12px)/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; }
.fci .fnew ~ .fct { bottom: 22%; }
.fci .ft10 { position: absolute; z-index: 3; top: 0; right: 4%; width: 1.7vw; height: 2.3vw; }
.fprog { position: absolute; z-index: 3; left: 6%; right: 6%; bottom: 5%; height: 3px; background: rgba(255,255,255,.35); } .fprog i { display: block; height: 100%; background: var(--red); }
.fci .fprog ~ .fct, .fci:has(.fprog) .fct { bottom: 13%; }

/* Top 10: a big outlined number, a tall picture beside it */
.ftoprow { --per: 5; } @media (max-width: 1099px) { .ftoprow { --per: 4; } } @media (max-width: 799px) { .ftoprow { --per: 3; } }
.ftoprow .fc, .ftallrow .fc { flex-basis: calc((100vw - 2 * var(--pad) - (var(--per) - 1) * var(--gap)) / var(--per)); }
.fcn .fca { display: flex; align-items: flex-end; height: 100%; }
.fn { flex: 0 0 50%; font: 900 calc(var(--cw) * .96)/.76 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.08em; color: #141414; -webkit-text-stroke: 4px #595959; text-align: right; margin-right: -.1em; }
.fcn .fci { flex: 0 0 50%; aspect-ratio: 2 / 3; }
/* a Top 10 poster: the tall picture, a deep fade, the title set like a film's, where and when under it */
.fcn .fci::after { inset: 30% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 45%, rgba(0,0,0,.94)); }
.fpt { left: 7%; right: 7%; bottom: 7%; text-align: center; font: 900 clamp(12px, 1.12vw, 22px)/1.04 Cinzel, Georgia, serif; text-transform: uppercase; letter-spacing: .015em;
  color: #f3ead8; text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 16px rgba(0,0,0,.9); -webkit-line-clamp: 5; }
.fpt small { margin: .5em 0 0; font: 700 clamp(9px, .62vw, 12px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .12em; color: #e6c575; }
.fcn .frune { width: 13%; }
/* the poster stands in front of its number: its shadow falls on it */
.fcn .fci { box-shadow: -14px 12px 26px rgba(0,0,0,.85), 0 4px 10px rgba(0,0,0,.6); }
.fn { text-shadow: 0 8px 18px rgba(0,0,0,.6); }
.ftallrow .fci { aspect-ratio: 2 / 3; }

/* the hover panel: the card, half again as big, playing, with its buttons and what it is */
.fbob { position: absolute; z-index: 40; border-radius: 6px; background: var(--panel); box-shadow: 0 3px 10px rgba(0,0,0,.75); overflow: hidden; opacity: 0; transform: scale(.67);
  transition: transform .28s ease, opacity .2s ease; pointer-events: none; }
.fbob.on { opacity: 1; transform: scale(1); pointer-events: auto; }
.fbobv { position: relative; aspect-ratio: 16 / 9; background: #000; } .fbobv img, .fbobv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.fbobv video { opacity: 0; transition: opacity .5s; } .fbobv.playing video { opacity: 1; }
.fbobv b { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 7%; font: 900 clamp(13px, 1.15vw, 22px)/1.05 "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.fbobi { padding: 1em 1.1em 1.2em; font-size: clamp(12px, .85vw, 15px); }
.fbobb { display: flex; gap: .45em; margin-bottom: .9em; }
.fcir { width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(42,42,42,.6); padding: 0; }
.fcir:hover { border-color: #fff; } .fcir.wht { background: #fff; color: #000; border-color: #fff; } .fcir.wht:hover { background: rgba(255,255,255,.8); }
.fcir.right { margin-left: auto; } .fcir.on { border-color: #fff; }
.fmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-bottom: .7em; font-weight: 600; }
.fmatch { color: #46d369; font-weight: 700; } .fver { padding: 0 .4em; border: 1px solid rgba(255,255,255,.4); font-size: .9em; } .fhd { padding: 0 .3em; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; font-size: .75em; }
.ftags { display: flex; flex-wrap: wrap; gap: .4em; color: #fff; } .ftags span + span::before { content: "•"; color: #646464; margin-right: .4em; }

/* More info: the window */
.fmodal { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: rgba(0,0,0,.7); }
.fmodal[hidden] { display: none; }
.fmbox { position: relative; width: min(850px, 94vw); margin: 2em auto 4em; border-radius: 6px; overflow: hidden; background: var(--panel); box-shadow: 0 3px 10px rgba(0,0,0,.75); animation: fxin .3s ease; }
@keyframes fxin { from { transform: scale(.9); opacity: 0; } }
.fmh { position: relative; aspect-ratio: 16 / 9; background: #000; } .fmh img, .fmh video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.fmh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #181818 0%, rgba(24,24,24,0) 45%); }
.fmht { position: absolute; z-index: 2; left: 3em; right: 3em; bottom: 9%; } .fmht h2 { margin: 0 0 .7em; font: 900 clamp(24px, 3.2vw, 44px)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 2px 2px 6px rgba(0,0,0,.6); }
.fmht .fbobb { margin: 0; align-items: center; } .fmht .fplay { font-size: 18px; padding: .45em 1.6em .45em 1.2em; } .fmht .fcir { font-size: 17px; }
.fmx { position: absolute; z-index: 3; top: 1em; right: 1em; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #181818; display: grid; place-items: center; }
.fmb { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2em; padding: 0 3em 1.5em; }
.fmb p { margin: .6em 0 0; font-size: 15px; line-height: 1.5; } .fmside { font-size: 14px; color: #ddd; } .fmside div { margin: .5em 0; } .fmside span { color: #777; }
.fms { padding: 0 3em 2em; } .fms h3 { margin: 1.2em 0 .8em; font-size: 22px; }
.fep { display: grid; grid-template-columns: 2.2em 140px minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: 1em; border-bottom: 1px solid #404040; border-radius: 4px; }
.fep:hover { background: #333; } .fep > i { font-style: normal; font-size: 22px; color: #d2d2d2; text-align: center; }
.fep img { width: 140px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #2b2b2b; image-rendering: pixelated; } .fep b { font-size: 15px; } .fep small { display: block; color: #d2d2d2; font-size: 13px; margin-top: .2em; }
.fep em { font-style: normal; color: #d2d2d2; font-size: 14px; }
.flike { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.flk { border-radius: 4px; overflow: hidden; background: #2f2f2f; } .flk img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; }
.flk div { padding: .8em 1em 1em; font-size: 13px; } .flk b { display: block; font-size: 14px; margin: .4em 0 .3em; } .flk .fmeta { margin: 0; }

/* Who's watching? */
.fwho { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #141414; animation: fxin .35s ease; }
.fwho[hidden], .fminfo[hidden] { display: none; }
.fwho h1 { margin: 0 0 1.4em; font-size: clamp(30px, 3.5vw, 60px); font-weight: 400; }
.fwhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vw; max-width: 90vw; }
.fwp { display: flex; flex-direction: column; align-items: center; gap: .6em; width: clamp(96px, 10vw, 180px); border: 0; background: none; padding: 0; color: #808080; }
.fwpic { position: relative; width: 100%; aspect-ratio: 1; border-radius: 4px; border: .3vw solid transparent; display: grid; place-items: center; background: #333; overflow: hidden; }
.fwpic img { width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; }
.fwp b { font-size: clamp(13px, 1.3vw, 22px); font-weight: 400; } .fwp small { margin-top: -.4em; font-size: clamp(11px, .8vw, 14px); color: #666; }
.fwp:hover .fwpic { border-color: #fff; } .fwp:hover b { color: #fff; }
.fwguest .fwpic { background: #1f2a33; } .fwguest .fwpic img { width: 52%; height: 52%; }
.fwmin .fwpic { background: radial-gradient(circle at 50% 35%, #3b2b12, #120d06); } .fwmin em { font: italic 700 clamp(18px, 2vw, 34px)/1 Georgia, serif; color: #e6c575; letter-spacing: .02em; }
.fwmin .fwpic i { position: absolute; bottom: 10%; font-style: normal; font-size: clamp(18px, 1.8vw, 30px); color: #e6c575; }
.fwnote { max-width: 620px; margin: 3em 1em 0; text-align: center; color: #808080; font-size: 14px; line-height: 1.5; }
.fminfo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.75); }
.fmibox { width: min(460px, 92vw); padding: 2em 2.2em; border-radius: 8px; background: #181818; box-shadow: 0 3px 10px rgba(0,0,0,.75); } .fmibox h2 { margin: 0 0 .6em; } .fmibox p { color: #ccc; line-height: 1.5; }

/* a category's page: its name, the menu of everything in it, the rows (no billboard) */
.fcatpage .frows { margin-top: 0; }
.fcat { position: relative; z-index: 20; padding: 96px var(--pad) 1.6vw; }
.fcath { display: flex; align-items: center; flex-wrap: wrap; gap: .5em 1.1em; }
.fcath h1 { margin: 0; font: 700 clamp(28px, 2.6vw, 46px)/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.fcatback { font-size: clamp(16px, 1.3vw, 22px); color: #b3b3b3; } .fcatback:hover { color: #fff; } .fsep { font-style: normal; color: #666; font-size: 1.4em; }
.fcatl { margin: .5em 0 0; color: #b3b3b3; font-size: 15px; } .fcatl a { color: #fff; font-weight: 700; } .fpad { padding: 0 var(--pad); }
.fdrop { position: relative; } .fdrop summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 1.6em; padding: .3em .6em .3em .8em;
  border: 1px solid rgba(255,255,255,.9); background: #000; font-size: 14px; font-weight: 700; } .fdrop summary::-webkit-details-marker { display: none; }
.fdrop summary i { font-style: normal; font-size: 11px; } .fdrop summary:hover { background: rgba(255,255,255,.1); }
.fdropm { position: absolute; z-index: 50; top: calc(100% + 2px); left: 0; width: min(760px, 92vw); max-height: 70vh; overflow: auto; padding: .8em 0; background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.15); columns: 3 200px; column-gap: 0; }
.fdropm a { display: block; break-inside: avoid; padding: .3em 1.2em; font-size: 14px; line-height: 1.25; } .fdropm a:hover b { text-decoration: underline; }
.fdropm a.on b { color: #e50914; } .fdropm small { display: block; color: #8c8c8c; font-size: 12px; }

.ffoot { padding: 2em var(--pad) 6em; color: #808080; font-size: 13px; } .ffoot a { color: #b3b3b3; }
.ftab { display: none; }

/* a phone: the billboard as a card, rows that scroll with a finger, a tab bar at the bottom */
@media (max-width: 700px) {
  :root { --per: 3.2; --pad: 3.5%; --gap: 6px; }
  .flinks { display: none; } .fnav { height: 56px; } .flogo b { font-size: 21px; }
  .fbb { height: auto; min-height: 0; max-height: none; padding: 70px 6% 0; }
  .fbbm { position: relative; inset: auto; aspect-ratio: 4 / 5; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
  .fbbsh { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 100%); }
  .fbbin { left: 10%; right: 10%; width: auto; bottom: 22px; text-align: center; } .fbbtag { justify-content: center; font-size: 13px; } .fbbs { display: none; }
  .fbbt { font-size: 28px; } .fbbb { justify-content: center; gap: 10px; } .fplay, .finfo { flex: 1; justify-content: center; font-size: 15px; padding: .6em 1em; }
  .fbbr { display: none; } .frows { margin-top: 26px; }
  .fh { font-size: 17px; margin-bottom: 8px; } .fpg, .fbtn { display: none; }
  .fsl { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; } .fsl::-webkit-scrollbar { display: none; }
  .ftr { transform: none !important; } .fc { scroll-snap-align: start; } .fci { aspect-ratio: 3 / 4; }
  .fct { font-size: 12px; } .fn { -webkit-text-stroke: 2px #595959; }
  .ftoprow { --per: 2.3; } .ftallrow { --per: 3.2; }
  .fmb { grid-template-columns: 1fr; padding: 0 1.2em 1em; } .fms, .fmht { padding: 0 1.2em 1.5em; } .fmht { left: 1.2em; right: 1.2em; }
  .fep { grid-template-columns: 1.6em 100px minmax(0, 1fr); } .fep img { width: 100px; } .fep em { display: none; } .flike { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftab { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); background: rgba(20,20,20,.96); border-top: 1px solid #222; }
  .ftab a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #9a9a9a; } .ftab a.on { color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .ftudum { display: none; } .ftr, .fbob { transition: none; } }

/* the player (static/flixplay.js): the whole window black, the 16:9 picture in the middle, the controls over it */
body.fwatch { background: #000; overflow: hidden; }
.fplayer { position: fixed; inset: 0; display: grid; place-items: center; background: #000; }
#fstage { display: block; background: #000; }
.fwload { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: #ccc; font-size: 15px; }
.fwload.err .fspin { display: none; } .fwload p { margin: 0; max-width: 420px; text-align: center; }
.fspin { width: 64px; height: 64px; border-radius: 50%; border: 5px solid rgba(229,9,20,.25); border-top-color: var(--red); animation: fxspin .9s linear infinite; } @keyframes fxspin { to { transform: rotate(360deg); } }
.fwui { position: absolute; inset: 0; transition: opacity .4s; pointer-events: none; } .fwui > * { pointer-events: auto; }
.fwui.gone { opacity: 0; } .fwui.gone > * { pointer-events: none; }
.fwui::before, .fwui::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.fwui::before { top: 0; height: 140px; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0)); }
.fwui::after { bottom: 0; height: 200px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.fwback { position: absolute; z-index: 2; top: 22px; left: 26px; font-size: 40px; color: #fff; display: grid; transition: transform .15s; } .fwback:hover { transform: scale(1.15); }
.fwwhy { position: absolute; z-index: 2; top: 30px; right: 30px; color: #46d369; font: 700 13px/1 Menlo, monospace; }
.fwflash { position: absolute; z-index: 2; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,0,0,.45); font-size: 46px; color: #fff; opacity: 0; pointer-events: none; } .fwflash.on { animation: fxflash .6s ease forwards; }
@keyframes fxflash { 0% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.4); } }
.fwbot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 26px 18px; }
.fwbarrow { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.fwbar { position: relative; flex: 1; height: 5px; background: rgba(255,255,255,.25); cursor: pointer; transition: height .1s; touch-action: none; }
.fwbar:hover { height: 8px; } .fwbuf { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.35); } .fwfill { position: absolute; inset: 0 auto 0 0; background: var(--red); }
.fwknob { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--red); transition: transform .1s; } .fwbar:hover .fwknob { transform: scale(1.3); }
.fwtip { position: absolute; bottom: 18px; transform: translateX(-50%); padding: 4px 8px; border-radius: 3px; background: rgba(0,0,0,.85); font-size: 13px; white-space: nowrap; }
.fwtip[hidden] { display: none; }
.fwleft { min-width: 52px; font-size: 16px; text-align: right; }
.fwrow { display: flex; align-items: center; gap: 24px; }
.fwrow button { border: 0; background: none; padding: 0; color: #fff; font-size: 40px; line-height: 1; display: grid; place-items: center; transition: transform .15s; } .fwrow button:hover { transform: scale(1.2); }
.fwrow .fwtxt { font: 700 20px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: 54px; height: 40px; border: 2px solid rgba(255,255,255,.5); border-radius: 4px; }
.fwrow .fwtxt.on { border-color: #fff; } .fwrow .fwview { min-width: 92px; border-color: #fff; }
.fwtitle { flex: 1; min-width: 0; text-align: center; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwtitle b { font-weight: 700; } .fwtitle span { color: #b3b3b3; margin-left: 10px; }
.fwmom { position: absolute; z-index: 3; right: 26px; bottom: 120px; width: min(460px, 90vw); max-height: 60vh; overflow: auto; padding: 18px 0; border-radius: 4px; background: rgba(38,38,38,.97); }
.fwmom[hidden] { display: none; } .fwmom h3 { margin: 0 22px 10px; font-size: 22px; }
.fwmom button { display: grid; grid-template-columns: 26px 112px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 10px 22px; border: 0; background: none; color: #fff; text-align: left; }
.fwmom button:hover { background: #3a3a3a; } .fwmom i { font-style: normal; color: #aaa; font-size: 18px; } .fwmom img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #222; image-rendering: pixelated; }
.fwmom b { display: block; font-size: 15px; } .fwmom small { color: #aaa; } .fwmom p { margin: 0 22px; color: #aaa; }
@media (max-width: 900px) { .fwrow { gap: 14px; } }   /* a folding phone opened: the full screen button stays on screen */
@media (max-width: 700px) { .fwrow { gap: 14px; } .fwrow button { font-size: 30px; } .fwtitle { display: none; } .fwbot { padding: 0 14px 12px; } .fwback { font-size: 32px; top: 14px; left: 14px; } }
/* the view menu over the view button: 16:9, Classic, 4:3 */
.fwviews { position: absolute; z-index: 3; right: 26px; bottom: 120px; width: min(380px, 90vw); padding: 14px 0 10px; border-radius: 4px; background: rgba(38,38,38,.97); }
.fwviews[hidden] { display: none; } .fwviews h3 { margin: 0 22px 8px; font-size: 20px; }
.fwviews button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; width: 100%; padding: 10px 22px; border: 0; background: none; color: #b3b3b3; text-align: left; }
.fwviews button:hover, .fwviews button.on { color: #fff; } .fwviews button:hover { background: #3a3a3a; } .fwviews i { font-style: normal; font-weight: 700; }
.fwviews b { display: block; font-size: 17px; } .fwviews small { display: block; margin-top: 2px; color: #8c8c8c; font-size: 13px; }
/* the points of interest on the player's bar: a dot each, its colour by kind, bigger under the pointer */
.fwmk { position: absolute; z-index: 2; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 1.5px rgba(0,0,0,.6); cursor: pointer; transition: transform .1s; }
.fwmk:hover { transform: scale(1.6); } .fwmk.k-kill { background: #ff8a3d; } .fwmk.k-level { background: #46d369; } .fwmk.k-boss { background: #b16cff; } .fwmk.k-find { background: #f5c451; }
.fwbar:hover .fwmk { margin-top: -4.5px; }
/* the call to share recordings (owner: "needs a good CTA to upload cams"): a banner between the rows, a button in the bar */
.fshare { padding: 7px 14px; border-radius: 4px; background: var(--red); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; } .fshare:hover { background: #f6121d; }
.fcta { margin: 1vw var(--pad) 3.5vw; }
.fctain { position: relative; display: flex; align-items: center; gap: 3vw; padding: clamp(22px, 2.6vw, 44px) clamp(22px, 3vw, 54px); border-radius: 8px; overflow: hidden;
  background: radial-gradient(120% 140% at 85% 50%, rgba(77,187,223,.28), rgba(20,20,20,0) 60%), linear-gradient(100deg, #1d1d1d, #101418); border: 1px solid rgba(255,255,255,.08); }
.fctat { flex: 1; min-width: 0; } .fctak { display: block; color: #e6c575; font-size: clamp(13px, 1vw, 17px); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4em; }
.fctat h2 { margin: 0 0 .4em; font: 900 clamp(22px, 2.3vw, 40px)/1.08 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.fctat p { margin: 0 0 1.3em; max-width: 680px; color: #cfcfcf; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.45; }
.fctab { gap: .5em; }
.fctaart { position: relative; flex: 0 0 clamp(140px, 16vw, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.fctaart img { width: 62%; image-rendering: pixelated; filter: drop-shadow(0 0 30px rgba(77,187,223,.7)); }
.fctaart span { position: absolute; padding: .25em .6em; border-radius: 4px; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.2); font: 700 clamp(12px, .95vw, 16px)/1 Menlo, monospace; color: #9ee3f5; }
.fctaart span:nth-of-type(1) { top: 8%; left: 2%; transform: rotate(-8deg); } .fctaart span:nth-of-type(2) { top: 44%; right: 0; transform: rotate(6deg); } .fctaart span:nth-of-type(3) { bottom: 8%; left: 14%; transform: rotate(-3deg); }
.ffcta { color: #b3b3b3; font-size: 15px; } .ffcta a { color: #fff; font-weight: 700; }
@media (max-width: 700px) { .fshare { display: none; } .fctain { flex-direction: column; align-items: flex-start; } .fctaart { display: none; } }
/* share this moment: a panel over the share button */
.fwshare { position: absolute; z-index: 3; right: 26px; bottom: 120px; width: min(460px, 92vw); padding: 18px 22px; border-radius: 4px; background: rgba(38,38,38,.97); }
.fwshare[hidden] { display: none; } .fwshare h3 { margin: 0 0 4px; font-size: 20px; } .fwshare p { margin: 0 0 14px; color: #aaa; font-size: 14px; }
.fwshl { display: flex; gap: 8px; } .fwshl input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #555; border-radius: 4px; background: #141414; color: #fff; font: 14px Menlo, monospace; }
.fwshl .fplay { font-size: 15px; padding: .5em 1.2em; } .fwshn { margin-top: 10px; padding: 8px 14px; border: 1px solid #777; border-radius: 4px; background: none; color: #fff; font-weight: 700; } .fwshn[hidden] { display: none; }

/* the Modern UI's panel and console (the watch page's, owner 2026-10-08: "i want this UI for 16:9 and classic its much
   easier to work with"): its rules from style.css (the panel, the console and body.skin's look), scoped to .fmui so the
   streaming pages keep their own; static/fmpanel.js fills it */
.fmui { --font: Manrope, system-ui, sans-serif; --dim: #a9a9b2; --mute: #8a8a94; --text: #e6e6ea; --gold2: #9ee3f5; }
.fmui .sidecol { position: relative; background: #4a4a4c; background-size: auto; overflow: hidden; }
.fmui .tcside { position: absolute; inset: 4px; display: flex; flex-direction: column; gap: 4px; font: 12px/1.35 var(--font); color: #d8d8dc;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6a6a6e #2a2a2d; }
.fmui .tcside > * { flex-shrink: 0; }
.fmui .tcside canvas { display: block; image-rendering: pixelated; }
.fmui .tcside section { margin: 0; }
.fmui .tw { border: 1px solid #101012; box-shadow: inset 1px 1px 0 #77777c, inset -1px -1px 0 #2b2b2f; background: rgba(0,0,0,.06); }
.fmui .tw h5 { margin: 0; padding: 0 7px; height: 16px; line-height: 16px; font-size: 11.5px; font-weight: 700; color: #d6d6da; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(#4b4b50, #39393d); border-bottom: 1px solid #1b1b1e; text-shadow: 0 1px 0 #000; }
.fmui .tw h5 { display: flex; align-items: center; gap: 3px; }
.fmui .tw h5 span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fmui .wb { flex: none; width: 13px; height: 13px; padding: 0; border: 1px solid #111; border-radius: 2px; background: linear-gradient(#66666b, #46464a); color: #e8e8e8;
  font: 700 11px/10px var(--font); cursor: pointer; box-shadow: inset 1px 1px 0 #85858a; text-shadow: none; }
.fmui .wb:hover { background: linear-gradient(#7a7a80, #525257); }
.fmui .win.min .wc { display: none; }
.fmui .tw.grow.min { flex: 0 0 auto; min-height: 0; }
.fmui .tw.mm { display: flex; gap: 6px; padding: 5px; }
.fmui .tw.mm canvas { border: 1px solid #101012; outline: 1px solid #6a6a6e; }
.fmui .mmctl { display: grid; grid-template-columns: 1fr; align-content: start; justify-items: center; gap: 4px; flex: 1; padding-top: 2px; }
.fmui .mmctl button { width: 26px; height: 22px; padding: 0; border: 1px solid #111; border-radius: 3px; background: linear-gradient(#5b5b60, #404044); color: #e6e6e6; font: 700 14px/1 var(--font); cursor: pointer; box-shadow: inset 1px 1px 0 #7d7d82; }
.fmui .mmctl button:hover { background: linear-gradient(#69696e, #48484d); }
.fmui .mmctl b { font-size: 15px; color: #fff; text-shadow: 0 1px 0 #000; }
.fmui .mmctl small { color: #bdbdc2; font-size: 11px; }
.fmui .tw.st { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; row-gap: 3px; padding: 5px 7px; }
.fmui .sb { height: 9px; border: 1px solid #0c0c0e; border-radius: 2px; overflow: hidden; }
.fmui .sb i { display: block; height: 100%; width: 0; transition: width .2s; }
.fmui .sb.hp { background: #3a1210; }
.fmui .sb.hp i { background: linear-gradient(#ff5a50, #c3201a); }
.fmui .sb.mp { background: #121a3a; }
.fmui .sb.mp i { background: linear-gradient(#6a8cff, #2443c9); }
.fmui .tw.st span { min-width: 30px; text-align: right; font-weight: 700; font-size: 12px; color: #fff; text-shadow: 0 1px 0 #000; font-variant-numeric: tabular-nums; }
.fmui .tw.inv { display: grid; place-items: center; padding: 6px 0 2px; }
.fmui .tw.win canvas { margin: 4px auto; }
.fmui .sk { padding: 3px 7px 5px; }
.fmui .sk .r { display: grid; grid-template-columns: 1fr auto; column-gap: 6px; padding: 1px 0; }
.fmui .sk span { color: #cfcfd4; }
.fmui .sk b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000; }
.fmui .sk i, .fmui .bl i { grid-column: 1 / -1; display: block; height: 3px; margin-top: 1px; background: #1c1c1f; border-radius: 2px; overflow: hidden; }
.fmui .sk u, .fmui .bl u { display: block; height: 100%; background: #6fbf6f; }
.fmui .tw.grow { flex: 1 0 auto; min-height: 90px; }
.fmui .bl { list-style: none; margin: 0; padding: 3px 7px; }
.fmui .bl li { padding: 2px 0; }
.fmui .bl li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d2d2d6; }
.fmui .bl li.pl span { color: #fff; font-weight: 600; }
.fmui .bl li.none { color: #9a9aa0; }
.fmui .console { position: relative; margin-top: 4px; background: #101013; box-shadow: inset 1px 1px 0 #070708, inset -1px -1px 0 #2e2e35; }
.fmui .ctabs { display: flex; align-items: center; gap: 2px; padding: 3px 3px 0; background: #1d1d22; }
.fmui .ctabs button { border: 0; border-radius: 4px 4px 0 0; padding: 4px 14px; background: #2a2a31; color: var(--dim); font-size: 12px; font-weight: 650; cursor: pointer; }
.fmui .ctabs button.on { background: #101013; color: var(--text); }
.fmui .ctabs .ro { color: var(--mute); font-size: 11px; padding-right: 8px; }
.fmui .cbody { height: 150px; overflow: auto; padding: 6px 10px; font: 12.5px/1.5 "Verdana", "DejaVu Sans", sans-serif; }
.fmui .cbody p { margin: 0; color: #e6e6e6; }
.fmui .cbody .t { color: #6b6b75; margin-right: 8px; font-variant-numeric: tabular-nums; }
.fmui .cbody .server { color: #f2f2a2; }
.fmui .cbody .npc { color: #7fd0ff; }
.fmui .cbody .future { display: none; }
.fmui .cbody .hint { color: var(--mute); }
.fmui .chatgate { display: none; position: absolute; left: 0; right: 0; top: 26px; bottom: 0; place-content: center; text-align: center; gap: 10px; color: var(--dim); font-size: 13px; background: rgba(16,16,19,.94); }
.fmui .chatgate button { justify-self: center; border: 1px solid #204c5a; background: #0c1e24; color: var(--gold2); border-radius: 8px; padding: 6px 14px; cursor: pointer; font-weight: 650; }
.fmui .console.gated .chatgate { display: grid; }
.fmui { --tc-bg: url(/static/ui/bg.png); --tc-barempty: url(/static/ui/barempty.png); --tc-barhp: url(/static/ui/barhp.png); --tc-barmp: url(/static/ui/barmp.png);
  --tc-symhp: url(/static/ui/symhp.png); --tc-symmp: url(/static/ui/symmp.png); --tc-pz: 1; }
.fmui .client, .fmui .viewcol, .fmui .sidecol { background: var(--tc-bg) repeat; }
.fmui .client { box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.fmui .viewcol, .fmui .sidecol { box-shadow: inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.5); }
/* the panel's windows: dark glass on the stone, a plain title bar, round buttons */
.fmui .tcside { gap: 6px; font: 12.5px/1.4 Manrope, system-ui, sans-serif; }
.fmui .tw { border: 1px solid rgba(0,0,0,.55); border-radius: 6px; background: rgba(8,8,10,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); overflow: hidden; }
.fmui .tw h5 { height: 24px; line-height: 24px; padding: 0 5px 0 9px; gap: 4px; font: 600 12px/24px Manrope, sans-serif; letter-spacing: .02em; color: #e6e6ea; text-shadow: none;
  background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(255,255,255,.06); }
.fmui .win.cont h5 span { text-transform: capitalize; }
.fmui .wb { width: 18px; height: 18px; border: 0; border-radius: 4px; background: rgba(255,255,255,.08); color: #cfcfd4; box-shadow: none; font: 600 13px/18px Manrope, sans-serif; }
.fmui .wb:hover { background: rgba(255,255,255,.18); color: #fff; }
/* the client's own pictures stay pixel for pixel */
.fmui .tcside canvas { image-rendering: pixelated; }
.fmui .tw.mm { align-items: flex-start; padding: 6px; }
.fmui .tw.mm canvas { border: 1px solid #000; outline: 0; }
.fmui .mmctl button { border: 0; border-radius: 6px; background: rgba(255,255,255,.1); box-shadow: none; color: #e6e6ea; font: 600 15px/1 Manrope, sans-serif; }
.fmui .mmctl button:hover { background: rgba(255,255,255,.2); }
.fmui .mmctl b { font: 700 15px Manrope, sans-serif; }
.fmui .mmctl small { color: #a9a9b2; }
/* health and mana: the client's own bars and symbols, the numbers the page's */
.fmui .tw.st { grid-template-columns: 14px calc(90px * var(--tc-pz)) auto; justify-content: start; align-items: center; column-gap: 7px; row-gap: 5px; padding: 8px 9px; }
.fmui .tw.st::before, .fmui .tw.st::after { content: ""; width: 12px; height: 11px; background: var(--tc-symhp) 0 0 / 12px 11px no-repeat; image-rendering: pixelated; grid-column: 1; }
.fmui .tw.st::before { grid-row: 1; }
.fmui .tw.st::after { grid-row: 2; background-image: var(--tc-symmp); }
.fmui .sb { grid-column: 2; width: calc(90px * var(--tc-pz)); height: calc(11px * var(--tc-pz)); border: 0; border-radius: 0; background: var(--tc-barempty) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.fmui .sb.hp { grid-row: 1; }
.fmui .sb.mp { grid-row: 2; }
.fmui .sb i { background: var(--tc-barhp) 0 0 / calc(90px * var(--tc-pz)) 100% no-repeat; image-rendering: pixelated; }
.fmui .sb.mp i { background-image: var(--tc-barmp); }
.fmui .tw.st span { grid-column: 3; min-width: 0; text-align: left; font: 700 12.5px Manrope, sans-serif; color: #fff; }
.fmui .hpv { grid-row: 1; }
.fmui .mpv { grid-row: 2; }
.fmui .tw.inv { padding: 6px 0 4px; background: rgba(8,8,10,.35); }
/* skills and the battle list: the page's words, the game's colours for a player */
.fmui .sk { padding: 6px 9px 8px; }
.fmui .sk span { color: #c9c9d1; }
.fmui .sk b { color: #fff; text-shadow: none; }
.fmui .sk i, .fmui .bl i { background: rgba(0,0,0,.6); }
.fmui .sk u { background: #3fb950; }   /* green (owner 2026-10-08: "make these bars green") */
.fmui .bl { padding: 5px 9px 7px; }
.fmui .bl li span { color: #d2d2d6; }
.fmui .bl li.pl span { color: #fff; }
/* the console: the page's tabs and type on the stone, every line in the game's own colour */
.fmui .console { background: linear-gradient(rgba(8,8,10,.55), rgba(8,8,10,.55)), var(--tc-bg); box-shadow: inset 1px 1px 0 rgba(0,0,0,.6), inset -1px -1px 0 rgba(255,255,255,.06); }
.fmui .ctabs { background: transparent; gap: 4px; padding: 6px 6px 0; }
.fmui .ctabs button { border-radius: 6px 6px 0 0; padding: 5px 14px; background: rgba(255,255,255,.06); color: #a9a9b2; font: 600 12.5px Manrope, sans-serif; }
.fmui .ctabs button.on { background: rgba(0,0,0,.45); color: #fff; }
.fmui .ctabs .ro { color: #8a8a94; }
.fmui .cbody { margin: 0 6px 6px; background: rgba(0,0,0,.45); border-radius: 0 6px 6px 6px; font: 12.5px/1.55 "DejaVu Sans Mono", Menlo, Consolas, monospace; }
.fmui .cbody p { color: #e8e8e8; }
.fmui .cbody .t { color: #7c7c86; }
.fmui .cbody p b { font-weight: 600; }
.fmui .cbody .say { color: #f5e663; }
.fmui .cbody .npc { color: #6fd0ff; }
.fmui .cbody .warn { color: #ff6b6b; }
.fmui .cbody .good { color: #6fe37a; }
.fmui .chatgate { background: rgba(10,10,12,.88); }
/* where static/flixplay.js puts the panel: in 16:9 and Map the two strips beside the recording (right: minimap, health,
   mana, equipment, skills; left: battle list and backpacks), in Classic the client around the game (the panel on the
   right, the console under the game). Each box is laid out at the panel's own size and scaled to its place. */
.fmui.fside, .fmui.fcbox, .fmui .fcpanel, .fmui .fccon { position: absolute; overflow: hidden; }
.fmui.fside { z-index: 1; transition: opacity .25s; } .fmui.fside[hidden], .fmui.fcbox[hidden] { display: none; }
.fmui.fside > .sidecol, .fmui .fcpanel > .sidecol, .fmui .fccon > div { position: absolute; left: 0; top: 0; padding: 0; transform-origin: 0 0; }
.fmui.fside .tcside { inset: 6px 5px; }
.fmui.fcbox { background: var(--tc-bg) repeat; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.5); }
.fmui .fccon .console { height: 100%; margin: 0; display: flex; flex-direction: column; } .fmui .fccon .cbody { flex: 1; height: auto; min-height: 0; }
body.fwatch.fcl #fstage { position: absolute; z-index: 1; }
/* containers: one row of slots until the chevron opens them all (as style.css has it for the watch page) */
.fmui .win.cont .cw { overflow: hidden; max-height: calc(36px * var(--tc-pz, 1) + 8px); padding: 4px 0; transition: max-height .25s ease; }
.fmui .win.cont.full .cw { max-height: calc(36px * 10 * var(--tc-pz, 1) + 8px); }
.fmui .win.cont .cw canvas { display: block; margin: 0 auto !important; }
.fmui .wb { display: inline-grid; place-items: center; padding: 0; } .fmui .wb[hidden] { display: none; }
.fmui .wb[data-act="more"] svg { transition: transform .2s; } .fmui .win.full .wb[data-act="more"] svg { transform: rotate(180deg); }
.fmui .fccon[hidden], .fmui .fcpanel[hidden] { display: none; }
/* beside the recording the battle list is only as tall as who is in it (owner: "it opens battle window far too big"),
   the backpacks right under it */
.fmui.fside .tw.grow { flex: 0 0 auto; min-height: 0; }

/* the player's About panel (site/lib/flix.js watch): the recording in words, its moments, who is on it; the page's text
   for search engines too, since /watch/<id> became the player (owner 2026-10-08: "Default is the netflix view") */
.fwabout { position: absolute; z-index: 3; right: 26px; bottom: 120px; width: min(520px, 92vw); max-height: 64vh; overflow: auto; padding: 20px 24px; border-radius: 4px; background: rgba(38,38,38,.97); color: #ddd; font-size: 15px; line-height: 1.5; }
.fwabout[hidden] { display: none; } .fwabout h1 { margin: 0 0 4px; font-size: 22px; color: #fff; } .fwabout h2 { margin: 16px 0 6px; font-size: 16px; color: #fff; }
.fwabout p { margin: 6px 0; } .fwabout .fwsub { color: #aaa; font-size: 14px; } .fwabout ol { margin: 0; padding: 0; list-style: none; }
.fwabout ol a { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: #ddd; border-bottom: 1px solid #333; } .fwabout ol a:hover b { color: #fff; text-decoration: underline; }
.fwabout ol small { color: #999; font-variant-numeric: tabular-nums; } .fwabout .fwcast a { color: #ddd; } .fwabout .fwcast a:hover, .fwabout .fwold a { color: #fff; text-decoration: underline; }
.fwabout .fwold { margin-top: 14px; color: #aaa; font-size: 14px; }
/* a phone held upright (owner 2026-10-08: "In vertical on my mobile i cant full screen": the row ran past the screen's
   edge, full screen and the view button with it): smaller buttons, no 10-second jumps (the bar does that), all on screen */
@media (max-width: 560px) {
  .fwbot { padding: 0 12px 12px; } .fwrow { gap: 9px; justify-content: space-between; } .fwrow button { font-size: 26px; }
  #fwb10, #fwf10 { display: none; }
  .fwrow .fwtxt { font-size: 15px; min-width: 40px; height: 32px; } .fwrow .fwview { min-width: 66px; }
}
/* the view menu's second part, the pixels (smooth with xBRZ, or the client's own) */
.fwviews { max-height: calc(100vh - 160px); overflow: auto; } .fwviews h3:not(:first-child) { margin-top: 14px; }
/* the HD button (xBRZ half over the pixels) needs its place in a phone's row too: tighter, and no speed on the smallest */
@media (max-width: 560px) { .fwrow { gap: 6px; } }
/* the settings behind the gear: the views, the speed in a row, HD and the chat as switches */
.fwseg { display: flex; gap: 6px; padding: 0 22px 6px; } .fwviews .fwseg button { display: block; width: auto; flex: 1; padding: 8px 0; border: 1px solid #555; border-radius: 4px; color: #ccc; font: 700 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; }
.fwviews .fwseg button.on { border-color: #fff; background: #fff; color: #111; }
.fwviews .fwsw { grid-template-columns: minmax(0, 1fr) 40px; align-items: center; margin-top: 4px; color: #fff; }
.fwsw i { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #555; transition: background .15s; }
.fwsw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fwsw.on i { background: #e50914; } .fwsw.on i::after { transform: translateX(18px); }
.fwashare { display: none; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 8px 14px; border: 1px solid #666; border-radius: 4px; background: none; color: #fff; font-size: 15px; }
.fwseto { margin-top: 12px; }
/* a low screen: the views on the left, the speed, HD and chat on the right, nothing to scroll */
@media (max-height: 640px) and (min-width: 600px) { .fwviews { display: grid; grid-template-columns: 1fr 1fr; align-items: start; width: min(700px, 96vw); } .fwviews .fwseto { margin-top: 0; } }
@media (max-height: 500px) and (min-width: 600px) { .fwviews .fwsetv small { display: none; } }
#fstage { touch-action: manipulation; }                     /* a double tap jumps, it does not zoom */
/* a phone, held either way: play, About, Moments, the gear and full screen; the 10-second jumps a double tap on the
   picture, Share inside About; every menu a sheet from the screen's foot, as high as the screen the browser leaves
   (dvh: without its own bar) and solid, over the panel and the console */
@media (max-width: 700px), (max-height: 500px), (pointer: coarse) and (max-width: 950px) {
  #fwb10, #fwf10, #fwshareb { display: none; } .fwtitle { display: none; } .fwrow { justify-content: space-between; } .fwashare { display: inline-flex; }
  html body.fwatch .fwviews, html body.fwatch .fwmom, html body.fwatch .fwabout, html body.fwatch .fwshare { position: fixed; z-index: 40; left: 0; right: 0; top: auto; bottom: 0; width: auto;
    max-height: 78vh; max-height: 78dvh; overflow: auto; overscroll-behavior: contain; border-radius: 14px 14px 0 0; background: #262626;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.7); }
  body.fwatch .fwviews button { padding-top: 8px; padding-bottom: 8px; }
}

/* an actor page (site/lib/flix.js actor): the headshot on the right fading into the page, who they were, then the rows
   and every recording they are in, by year */
.fact { position: relative; min-height: min(62vh, 640px); display: flex; align-items: flex-end; padding: 120px 4% 48px; overflow: hidden; }
.factpic { position: absolute; inset: 0 0 0 30%; } .factpic img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; image-rendering: pixelated; }
/* a character's own picture (indexer/char-pics.js): them in its middle; on a wide screen it starts further right, so the
   middle lands where the shade has cleared (about 72 % across); on a phone the whole width */
.factpic.fchar { left: 45%; } .factpic.fchar .fcold, .factpic.fchar video { display: none; }
.factpic .fcpic { object-position: 50% 45%; }
/* on a phone: the picture over the top of the header, the shade from below (the name and buttons sit under the character,
   not over them) */
@media (max-width: 700px) { .factpic.fchar { left: 0; bottom: 36%; opacity: .9; }
  .factpic.fchar + .factsh { background: linear-gradient(0deg, #141414 36%, rgba(20,20,20,.55) 48%, rgba(20,20,20,0) 66%); } }
.factsh { position: absolute; inset: 0; background: linear-gradient(90deg, #141414 28%, rgba(20,20,20,.75) 48%, rgba(20,20,20,0) 75%), linear-gradient(0deg, #141414 0, rgba(20,20,20,0) 35%); }
.factin { position: relative; max-width: 640px; } .factkick { margin: 0 0 6px; color: #e50914; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; }
.fact h1 { margin: 0 0 10px; font: 900 clamp(40px, 6vw, 76px)/1 Cinzel, Georgia, serif; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.factwho { margin: 0 0 6px; font-size: 20px; color: #fff; } .factline { margin: 0 0 22px; font-size: 16px; color: #bcbcbc; }
.ffilm { padding: 10px 4% 40px; } .ffilm h2 { font-size: 22px; margin: 10px 0 4px; } .ffilm h3 { margin: 20px 0 6px; font-size: 16px; color: #aaa; }
.ffilm ul { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: 40px; }
.ffilm li { break-inside: avoid; display: flex; flex-direction: column; padding: 7px 0; border-bottom: 1px solid #262626; }
.ffilm li a { color: #e5e5e5; font-weight: 600; } .ffilm li a:hover { color: #fff; text-decoration: underline; } .ffilm li span { color: #8c8c8c; font-size: 13px; }
.fmside a { color: inherit; } .fmside a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 700px) { .fact { min-height: 70vh; padding: 90px 16px 28px; } .factpic { inset: 0; opacity: .55; } .factwho { font-size: 17px; } }

/* Panels on a phone held upright (owner 2026-10-08: "Panels still doesnt have the UI back?"): the picture across the
   top, the panel under it two windows a row (the battle list and backpacks the whole width), the controls and the menus
   on and under the picture (--fpic: its height) */
body.fwatch.fport #fstage { position: absolute; }
.fmui.fside.fport .tcside { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 6px; inset: 6px; }
.fmui.fside.fport .tcside > * { flex: 1 1 calc(50% - 6px); min-width: 0; }
.fmui.fside.fport .tcside > .win.grow, .fmui.fside.fport .tcside > .fmconts { flex-basis: 100%; }
body.fport .fwbot { bottom: auto; top: var(--fpic); transform: translateY(-100%); }
body.fport .fwui::after { bottom: auto; top: calc(var(--fpic) - 110px); height: 110px; }
body.fport .fwflash { top: calc(var(--fpic) / 2); }
body.fport .fwviews, body.fport .fwmom, body.fport .fwabout, body.fport .fwshare { bottom: auto; top: calc(var(--fpic) + 8px); right: 8px; max-height: calc(100vh - var(--fpic) - 16px); }

/* Classic on a phone held upright: the console first under the game, the whole width, then the panel's windows */
.fmui.fside.fport .tcside > .console { flex-basis: 100%; margin-top: 0; } .fmui.fside.fport .console .cbody { height: 140px; }
/* the actor page's record (owner 2026-10-08: "we need to intergrate all these legacyp aces as actor pages"): the header's
   clip, the facts, the level over time, the guilds, their life a year at a time, what they are only named in */
.factpic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (prefers-reduced-motion: reduce) { .factpic video { display: none; } }
.fstats { display: flex; flex-wrap: wrap; gap: 10px 34px; padding: 0 4% 18px; }
.fstats div { display: flex; flex-direction: column; } .fstats b { font-size: 26px; font-weight: 800; color: #fff; } .fstats span { color: #8c8c8c; font-size: 13px; }
.fsec { padding: 14px 4% 26px; } .fsec h2 { font-size: 22px; margin: 6px 0 12px; } .fsec h2 small { color: #8c8c8c; font-size: 14px; font-weight: 600; margin-left: 8px; }
.lvchart { display: block; width: 100%; height: auto; background: #181818; border: 1px solid #262626; border-radius: 6px; }
.lvchart .gl, .lvchart .gx { stroke: #2b2b2b; stroke-width: 1; } .lvchart .gx { stroke-dasharray: 2 4; }
.lvchart .yl, .lvchart .xl { fill: #8c8c8c; font: 600 12px "Helvetica Neue", Helvetica, Arial, sans-serif; } .lvchart .yl { text-anchor: end; } .lvchart .xl { text-anchor: middle; }
.lvchart .ln { stroke: #e50914; stroke-width: 2.5; stroke-linecap: round; } .lvchart .gap { stroke: #555; stroke-width: 1.5; stroke-dasharray: 4 5; }
.lvchart .pt { fill: #fff; stroke: #141414; stroke-width: 2; cursor: pointer; } .lvchart a:hover .pt { fill: #e50914; r: 7; }
.lvchart.narrow { display: none; } .lvchart.narrow .yl, .lvchart.narrow .xl { font-size: 14px; }
.fghist { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.fghist li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #262626; }
.fghist i { width: 9px; height: 9px; border-radius: 50%; background: #555; } .fghist i.g { background: #e50914; } .fghist small { grid-column: 2; color: #8c8c8c; font-size: 12px; }
.fghist a, .fvocs a, .fmoments a, .ffilmlist a { color: #e5e5e5; } .fghist a:hover, .fvocs a:hover, .ffilmlist a:hover { color: #fff; text-decoration: underline; }
.fvocs { color: #aaa; font-size: 14px; }
.fyears { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; } .fyears a { padding: 4px 12px; border: 1px solid #444; border-radius: 3px; color: #ccc; font-size: 14px; } .fyears a:hover { border-color: #fff; color: #fff; }
.fyear { padding: 6px 0 14px; scroll-margin-top: 80px; } .fyear h3 { margin: 16px 0 8px; font-size: 20px; } .fyear h3 small { display: block; color: #8c8c8c; font-size: 13px; font-weight: 600; margin-top: 2px; }
.fmoments { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fmoments a { display: flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 3px; background: #2a2a2a; } .fmoments a:hover { background: #3a3a3a; }
.fmoments b { font-weight: 600; } .fmoments span { color: #999; font-size: 13px; }
.ffilmlist { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: 40px; }
.ffilmlist li { break-inside: avoid; display: flex; flex-direction: column; padding: 7px 0; border-bottom: 1px solid #262626; } .ffilmlist li a { font-weight: 600; } .ffilmlist li span { color: #8c8c8c; font-size: 13px; }
@media (max-width: 900px) { .lvchart.wide { display: none; } .lvchart.narrow { display: block; } .fstats { gap: 8px 22px; } .fstats b { font-size: 21px; } }
/* comments in the player (static/flixplay.js): the About panel's tabs, the form, the list, a white dot on the timeline
   for a pinned one, the one passing as it plays (bottom left), the count on the info button */
.fwtabs { display: flex; gap: 6px; margin: -4px 0 12px; } .fwtabs button { border: 0; border-bottom: 2px solid transparent; background: none; color: #aaa; font-size: 16px; font-weight: 700; padding: 4px 2px; margin-right: 12px; cursor: pointer; }
.fwtabs button.on { color: #fff; border-color: #e50914; } .fwtabs small { color: #aaa; font-weight: 600; }
.fwcform { display: grid; gap: 8px; margin-bottom: 14px; }
.fwcform input:not([type]), .fwcform textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #444; border-radius: 4px; background: #181818; color: #fff; font: inherit; font-size: 15px; }
.fwcform textarea { resize: vertical; min-height: 64px; } .fwcpin, .fwcpops { display: flex; gap: 8px; align-items: center; color: #bbb; font-size: 14px; } .fwcpops { margin-top: 12px; }
.fwcrow { display: flex; gap: 12px; align-items: center; justify-content: space-between; } .fwcrow span { color: #999; font-size: 13px; } .fwcrow .fplay { padding: 8px 20px; font-size: 15px; }
.fwcform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fwclist { list-style: none; margin: 0; padding: 0; } .fwclist li { padding: 9px 0; border-bottom: 1px solid #333; }
.fwclist li > div { display: flex; gap: 10px; align-items: baseline; } .fwclist li a { color: #e5e5e5; font-size: 13px; text-decoration: underline; } .fwclist time { color: #888; font-size: 12px; margin-left: auto; }
.fwclist p { margin: 4px 0 0; color: #ddd; white-space: pre-line; word-break: break-word; } .fwclist .none { color: #999; }
.fwmk.k-com { background: #fff; }
.fwbadge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e50914; color: #fff; font: 700 11px/18px Arial, sans-serif; font-style: normal; }
#fwaboutb { position: relative; }
.fwtoast { position: absolute; z-index: 2; left: 24px; bottom: 130px; max-width: min(420px, 80vw); padding: 10px 14px; border-radius: 4px; background: rgba(20,20,20,.88); color: #eee; font-size: 15px;
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; pointer-events: none; }
.fwtoast.on { opacity: 1; transform: none; } .fwtoast b { display: block; color: #fff; font-size: 13px; margin-bottom: 2px; } body.fport .fwtoast { bottom: auto; top: calc(var(--fpic) - 150px); }
/* a short phone screen (owner 2026-10-08 on a Z Fold's front screen: "this isnt so nice UX": the card ran under the tab
   bar, its title and buttons hidden): the card only as tall as the screen leaves room for, the next row peeking below */
@media (max-width: 700px) {
  .fbb { padding-top: 64px; }
  .fbbm { aspect-ratio: auto; height: clamp(230px, calc(100vh - 240px), calc(88vw * 1.25)); height: clamp(230px, calc(100svh - 240px), calc(88vw * 1.25)); }
  .fbbt { font-size: clamp(20px, 6.4vw, 28px); } .fbbin { bottom: 16px; }
}
/* Minibia's mark in the picture's top right corner, every view (flixplay.js layoutNow places it) */
.fwbug { position: absolute; z-index: 2; display: block; box-sizing: border-box; padding: 4px 7px 3px; border-radius: 6px; background: rgba(8,8,10,.62); opacity: .85; transition: opacity .2s, background .2s; }
.fwbug:hover, .fwbug:focus-visible { opacity: 1; background: rgba(8,8,10,.8); } .fwbug img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
/* paused a while: one line about Minibia over the bar */
.fwpline { display: inline-block; margin-bottom: 10px; padding: 6px 12px; border-radius: 4px; background: rgba(0,0,0,.6); color: #ddd; font-size: 14px; animation: fxin .4s ease; }
.fwpline:hover { color: #fff; background: rgba(0,0,0,.8); } .fwpline[hidden] { display: none; }
#fwsnd:not(.on) { opacity: .7; }
/* the end of a recording: what to watch next, Minibia, watch again */
.fwend { position: absolute; inset: 0; z-index: 30; overflow: auto; display: grid; place-items: center; padding: 28px 24px; background: rgba(0,0,0,.88); animation: fxin .35s ease; }
.fwend[hidden] { display: none; }
.fwendx { position: absolute; top: 14px; right: 16px; border: 0; background: none; color: #fff; font-size: 30px; display: grid; }
.fwendin { width: min(1100px, 100%); } .fwendin h2 { margin: 0 0 14px; font-size: 26px; }
.fwnext { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
/* the first pick plays next: "Next in 10" and a bar filling under its picture */
.fwnc.first .fwnp { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; }
.fwenext { display: none; color: #fff; } .fwnc .fwenext b { display: inline; margin: 0; font-size: inherit; line-height: inherit; font-variant-numeric: tabular-nums; }
.fwend.counting .fwenext { display: inline; } .fwend.counting .fwewhy { display: none; }
.fwebar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #e50914; }
.fwend.counting .fwebar { width: 100%; transition: width 10s linear; }
.fwnc { display: block; color: #fff; min-width: 0; } .fwnc:hover .fwnp { outline: 2px solid #fff; outline-offset: 2px; }
.fwnp { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #222; }
.fwnp img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.fwnp i { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 3px; background: rgba(0,0,0,.8); font: 600 12px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; }
.fwnc small { display: block; margin-top: 8px; color: #46d369; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fwnc b { display: block; margin-top: 2px; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fwnc em { display: block; margin-top: 2px; color: #999; font-size: 13px; font-style: normal; }
.fwendrow { display: flex; gap: 14px; align-items: stretch; margin-top: 24px; }
.fwmb { flex: 1; display: flex; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid #4a3d22; border-radius: 6px; background: linear-gradient(90deg, #1d2618, #2a2316); color: #d8d2c4; }
.fwmb img { flex: none; width: 112px; height: auto; } .fwmb span { flex: 1; font-size: 14px; line-height: 1.45; } .fwmb span b { display: block; color: #fff; font-size: 17px; margin-bottom: 2px; }
.fwmb em { flex: none; padding: 10px 18px; border-radius: 4px; background: #e50914; color: #fff; font-style: normal; font-weight: 700; } .fwmb:hover em { background: #f6121d; }
.fwagain { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; border: 1px solid #666; border-radius: 6px; background: none; color: #fff; font-size: 16px; } .fwagain:hover { border-color: #fff; }
@media (max-width: 700px) {
  .fwend { place-items: start center; grid-template-columns: minmax(0, 1fr); padding: 18px 14px 0; } .fwendin h2 { font-size: 20px; margin: 0 52px 12px 0; }
  .fwnext { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } .fwnc b { font-size: 14px; } .fwnc em { display: none; }
  .fwendrow { position: sticky; bottom: 0; gap: 8px; margin-top: 12px; padding: 10px 0 12px; background: linear-gradient(rgba(0,0,0,0), #000 10px); }
  .fwmb { min-width: 0; gap: 10px; padding: 8px 10px; } .fwmb img { width: 64px; } .fwmb span { min-width: 0; } .fwmb span b { margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fwmbd { display: none; } .fwmb em { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
  .fwagain { justify-content: center; padding: 0 14px; font-size: 20px; } .fwagl { display: none; } .fwpline { font-size: 13px; }
}
@media (max-width: 384px) { .fwmb img { display: none; } }   /* the narrowest phones: "Play Minibia" carries the name */
@media (max-height: 500px) and (min-width: 600px) {
  .fwend { place-items: start center; padding: 16px 20px; } .fwendin h2 { font-size: 18px; margin-bottom: 8px; }
  .fwnext { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .fwnc small { margin-top: 5px; } .fwnc em { display: none; } .fwnc b { font-size: 13px; -webkit-line-clamp: 1; }
  .fwendrow { margin-top: 12px; } .fwmb { padding: 8px 14px; } .fwmb span { font-size: 13px; }
}
/* Panels on a phone held upright: the strip that stays, the tabs, one window at a time (flixplay.js seat) */
.fmui.fside.fport.ftabbed .tcside { flex-direction: column; flex-wrap: nowrap; gap: 0; inset: 0; }
.fmui.fside.fport.ftabbed .tcside > * { flex: none; }
.fmui.fside.fport.ftabbed .tcside > .fppane { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 10px 14px; }
.fpstat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 12px 8px; background: rgba(8,8,10,.6); }
.fmui .fpstat .tw.st { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; row-gap: 5px; }
.fmui .fpstat .sb { height: 11px; } .fmui .fpstat .tw.st span { font-size: 13px; min-width: 42px; }
.fmlv { display: flex; flex-direction: column; gap: 3px; color: #b8b8be; font-size: 13px; text-align: right; } .fmlv b { color: #fff; font-variant-numeric: tabular-nums; }
.fptabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #2c2c31; background: rgba(8,8,10,.6); } .fptabs::-webkit-scrollbar { display: none; }
.fptabs button { flex: 1 0 auto; padding: 11px 12px 9px; border: 0; border-bottom: 2px solid transparent; background: none; color: #9a9aa2; font: 600 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.fptabs button.on { color: #fff; border-bottom-color: #e50914; }
.fppane .fpoff { display: none !important; }
.fmui .fppane .tw { border: 0; border-radius: 6px; }
.fmui .fppane .win[data-win="skills"] > h5, .fmui .fppane .win[data-win="battle"] > h5 { display: none; }
.fmui .fppane .win.min .wc { display: block; }
.fmui .fppane .sk { padding: 6px 12px 8px; font-size: 15px; } .fmui .fppane .sk .r { padding: 4px 0; } .fmui .fppane .sk i { height: 4px; margin-top: 4px; }
.fmui .fppane .bl { padding: 4px 12px; font-size: 15px; } .fmui .fppane .bl li { padding: 6px 0 4px; } .fmui .fppane .bl i { height: 4px; margin-top: 4px; }
.fmui .fppane .tw.inv { padding: 14px 0; } .fmui .fppane .tw.inv canvas { width: min(62vw, 300px); height: auto; image-rendering: pixelated; }
.fmui .fppane .tw.mm { justify-content: center; align-items: flex-start; gap: 12px; padding: 12px; } .fmui .fppane .tw.mm canvas { width: min(64vw, 318px); height: auto; image-rendering: pixelated; }
.fmui .fppane .fmconts { zoom: 1.35; }
.fmui .fppane .console { margin: 0; height: 100%; display: flex; flex-direction: column; } .fmui .fppane .console .cbody { flex: 1; height: auto; min-height: 120px; font-size: 13.5px; }
/* search: one box under the bar, the answer in rows (flix.js searchPage) */
.fsearch { padding-bottom: 0; }
.fsform { display: flex; align-items: center; gap: 12px; max-width: 760px; padding: 0 16px; height: 56px; border: 1px solid #4a4a4f; border-radius: 6px; background: #1b1b1d; color: #aaa; }
.fsform:focus-within { border-color: #e5e5e5; color: #fff; }
.fsform input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font: 500 19px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; outline: none; }
.fsform input::placeholder { color: #8a8a90; }
.fsadv { flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-left: 1px solid #3a3a3f; color: #cfcfd4; font-size: 15px; font-weight: 600; white-space: nowrap; }
.fsadv:hover { color: #fff; } .fsadv b { font-weight: inherit; }
@media (max-width: 480px) { .fsadv { padding: 7px 4px 7px 10px; font-size: 14px; } .fsadv b { display: none; } }
.fsres { margin-top: 1.5vw !important; min-height: 50vh; }
@media (max-width: 700px) { .fsform { height: 50px; } .fsform input { font-size: 17px; } }
/* the privacy page: plain reading width */
.fprose { max-width: 760px; color: #d6d6d6; font-size: 16px; line-height: 1.6; } .fprose h2 { margin: 26px 0 6px; color: #fff; font-size: 19px; } .fprose p { margin: 0 0 10px; } .fprose a { color: #fff; text-decoration: underline; }
/* the library (site/lib/library.js): tabs, a search box and filters, then dense lists that play in the old viewer */
.flib { max-width: 1180px; }
.lbtabs { display: flex; gap: 4px; margin: 4px 0 18px; border-bottom: 1px solid #2c2c31; }
.lbtabs a { padding: 10px 16px 9px; color: #9a9aa2; font-weight: 600; font-size: 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.lbtabs a.on { color: #fff; border-bottom-color: #e50914; } .lbtabs a:hover { color: #fff; }
.lbform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 14px; }
.lbq { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid #4a4a4f; border-radius: 6px; background: #1b1b1d; color: #9a9aa2; }
.lbq:focus-within { border-color: #e5e5e5; color: #fff; } .lbq input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font-size: 16px; outline: none; }
.lbsels { display: flex; flex-wrap: wrap; gap: 10px; }
.lbsel { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9a9aa2; }
.lbsel select { height: 40px; min-width: 150px; max-width: 220px; padding: 0 30px 0 10px; border: 1px solid #4a4a4f; border-radius: 6px; background: #1b1b1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23aaa' stroke-width='2.5'/%3E%3C/svg%3E") right 10px center no-repeat; color: #fff; font-size: 14px; -webkit-appearance: none; appearance: none; }
.lbn0 { margin: 6px 0 10px; color: #9a9aa2; font-size: 14px; } .lbctx { margin: 0 0 8px; color: #ccc; } .lbctx a { color: #fff; text-decoration: underline; }
.lbl { list-style: none; margin: 0; padding: 0; border-top: 1px solid #232327; }
.lbr { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid #232327; }
.lbr.lbp { grid-template-columns: minmax(0, 1fr) auto auto; }
.lbt { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #222; }
.lbt img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.lbt i { position: absolute; right: 5px; bottom: 5px; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.8); color: #fff; font: 600 11px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; }
.lbpl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: #fff; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .15s; } .lbt:hover .lbpl { opacity: 1; }
.lbi { min-width: 0; } .lbn { display: block; color: #fff; font-weight: 600; font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbn:hover { text-decoration: underline; }
.lbm { margin: 3px 0 0; color: #a9a9b0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbs { margin: 2px 0 0; color: #7f7f88; font-size: 13px; }
.lbk { display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: 3px; background: #2a2a2f; color: #ddd; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.lbk-boss { background: #5a2a6b; } .lbk-kill, .lbk-fight { background: #7a1f22; } .lbk-died { background: #3b3b42; } .lbk-level { background: #1f5f3a; } .lbk-find { background: #6b5317; }
.lbgo { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 38px; padding: 0 16px; border: 0; border-radius: 4px; background: #fff; color: #111; font-weight: 700; font-size: 14px; }
.lbgo:hover { background: #ddd; } .lbghost { background: none; color: #fff; border: 1px solid #5a5a60; } .lbghost:hover { background: #2a2a2f; }
.lbnone { color: #aaa; padding: 20px 0; }
.lbpg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 10px; }
.lbpg a, .lbpg b, .lbpg span { min-width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 4px; color: #ddd; font-size: 14px; }
.lbpg a { border: 1px solid #3a3a40; } .lbpg a:hover { border-color: #fff; color: #fff; } .lbpg b { background: #fff; color: #111; }
@media (max-width: 700px) {
  .lbtabs a { flex: 1; text-align: center; padding: 10px 6px 9px; font-size: 15px; }
  .lbsels { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .lbsel select { min-width: 0; max-width: none; width: 100%; }
  .lbr { grid-template-columns: 112px minmax(0, 1fr); gap: 4px 12px; } .lbr .lbgo { display: none; }
  .lbr.lbp { grid-template-columns: minmax(0, 1fr) auto; } .lbr.lbp .lbgo { display: inline-flex; min-width: 0; height: 34px; padding: 0 10px; font-size: 13px; } .lbr.lbp .lbghost { display: none; }
  .lbn { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lbm { font-size: 12.5px; }
}
/* the full-site test, night of 2026-10-08: the category menu opened past the screen's edge (it hung from its button,
   which sits at the right of the header): it hangs from the header now, as wide as fits; touch targets at least ~40px */
.fcath { position: relative; } .fdrop { position: static; }
.fdropm { left: 0; max-width: calc(100vw - 2 * var(--pad, 16px)); }
.fico { min-width: 40px; min-height: 40px; }
@media (max-width: 700px) { .fdropm { right: 0; width: auto; max-width: none; } }
@media (pointer: coarse) {
  .fcatback { display: inline-block; padding: 8px 0; }
  .fh a { padding: 6px 0; }
  .ffoot a { display: inline-block; padding: 9px 2px; }
}
/* the Top 10 posters on a narrow phone (the Fold's front screen): the words fit, one line more */
@media (max-width: 700px) { .fpt { font-size: 10.5px; letter-spacing: 0; -webkit-line-clamp: 6; overflow-wrap: break-word; } }
/* a tablet held upright (820px): the bar's links on one line, without the Share button (it is in the footer and on
   the home page): with Library in the bar it ran past the edge */
.flinks a { white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 701px) { .fshare { display: none; } .flinks { gap: 16px; } }
/* the category menu: a grid that scrolls down (its three columns with a height limit grew sideways past the menu) */
.fdropm { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start; overflow: hidden auto; }
/* the newer kinds of moment: their pins and their library tags */
.fwmk.k-bossdown { background: #7b3fe4; } .fwmk.k-raid { background: #ff5a5a; } .fwmk.k-gm { background: #5ac8fa; } .fwmk.k-closecall { background: #ffd60a; }
.fwmk.k-battle { background: #ff8a3d; } .fwmk.k-loot { background: #e6c575; }
.lbk-bossdown { background: #4b2a8b; } .lbk-raid { background: #8b2a2a; } .lbk-gm { background: #1f5f7a; } .lbk-closecall { background: #7a6a10; } .lbk-battle { background: #7a3a12; } .lbk-loot { background: #6b5317; }