:root {
  --bg: #0E0D0C; --panel: #1F1A15; --panel2: #2A241D; --line: #2C2721; --text: #F3EEE6; --muted: #A39A8E;
  --accent: #F2A541; --accent-ink: #1A1208; --ok: #7CC79A; --warn: #E2685B;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Archivo', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: clamp(11px, 1.25vw, 28px); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); }
:focus { outline: none; }
::-webkit-scrollbar { display: none; }

#app { display: flex; height: 100vh; }
#nav { width: 6.2rem; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 0; border-right: 1px solid var(--line); }
#nav .logo { width: 2.8rem; height: 2.8rem; border-radius: 0.8rem; background: none; display: block; margin-bottom: 1.6rem; }
#nav .logo svg { width: 100%; height: 100%; display: block; }
#nav a.logo { padding: 0; gap: 0; flex-direction: row; transition: transform .12s; }
#nav a.logo:hover, #nav a.logo:focus, #nav a.logo.active { background: none; }
#nav a.logo:hover { transform: scale(1.06); }
#nav a.logo:focus { box-shadow: 0 0 0 0.2rem var(--text); }
#nav a { width: 4.4rem; padding: 0.7rem 0 0.5rem; border-radius: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--muted); transition: background .12s, color .12s; }
#nav a svg { width: 1.5rem; height: 1.5rem; }
#nav a span { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; }
#nav a.push { margin-top: auto; }
#nav a.active { background: var(--panel2); color: var(--accent); }
#nav a:hover, #nav a:focus { background: var(--panel2); color: var(--text); }
#nav a:focus { box-shadow: 0 0 0 0.18rem var(--accent); }

#view { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 2.2rem 0 3rem 2.5rem; scroll-padding: 4rem 0; }
.pad-r { padding-right: 2.5rem; }

/* ---------- headings, chips ---------- */
.page-title { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.page-sub { color: var(--muted); font-size: 1rem; margin-top: 0.3rem; }
.head { display: flex; align-items: baseline; gap: 1rem; padding-right: 2.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-right: 2.5rem; margin: 1.1rem 0; align-items: center; }
.chip { height: 2.5rem; padding: 0 1.1rem; border-radius: 1.25rem; border: 2px solid #3E362D; background: transparent; font-size: 0.95rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s; }
.chip:hover, .chip:focus { background: var(--panel2); }
.chip:focus { box-shadow: 0 0 0 0.18rem var(--accent); border-color: transparent; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chips .gap { width: 1.2rem; }
.letters { display: flex; flex-wrap: wrap; gap: 0.25rem; padding-right: 2.5rem; margin-bottom: 1.2rem; }
.letters button { width: 2rem; height: 2rem; border-radius: 0.5rem; border: none; background: transparent; color: var(--muted); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.letters button:hover, .letters button:focus { background: var(--panel2); color: var(--text); }
.letters button:focus { box-shadow: 0 0 0 0.16rem var(--accent); }

/* ---------- buttons ---------- */
.btn { height: 3.2rem; padding: 0 1.8rem; border-radius: 1.6rem; border: 2px solid #4A4138; background: transparent; font-size: 1.1rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; transition: transform .12s; }
.btn svg { width: 1.1rem; height: 1.1rem; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn:hover, .btn:focus { transform: scale(1.04); }
.btn:focus { box-shadow: 0 0 0 0.2rem var(--bg), 0 0 0 0.38rem var(--accent); }
.btn.small { height: 2.5rem; padding: 0 1.2rem; font-size: 0.95rem; }
.btns { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- posters and cards ---------- */
.poster { position: relative; width: 100%; border-radius: 0.75rem; overflow: hidden; background: #1c1814; }
.poster::before, .land::before { content: ''; display: block; padding-top: 150%; }
.land::before { padding-top: 56.25%; }
.poster img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ph { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: hsl(var(--h) 28% 17%); overflow: hidden; }
.ph i { position: absolute; width: 85%; height: 0; padding-bottom: 85%; border-radius: 50%; background: hsl(var(--h) 38% 34%); top: var(--oy); left: var(--ox); }
.ph span { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.8rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; word-break: break-word; }
.card { display: block; flex-shrink: 0; width: 8.2rem; border-radius: 0.9rem; transition: transform .12s; position: relative; }
.card .cap { margin-top: 0.55rem; font-size: 0.95rem; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .sub { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }
.card:hover, .card:focus { transform: scale(1.06); z-index: 2; }
.card:focus .poster, .card:focus .land { box-shadow: 0 0 0 0.22rem var(--accent); }
.card:focus .cap { color: var(--accent); }
.card .tick { position: absolute; top: 0.45rem; right: 0.45rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ok); color: #0c1a12; display: flex; align-items: center; justify-content: center; }
.card .tick svg { width: 0.9rem; height: 0.9rem; }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.28rem; background: rgba(0,0,0,.55); }
.pbar b { display: block; height: 100%; background: var(--accent); }
.card.wide { width: 11.5rem; }
.land { position: relative; width: 100%; border-radius: 0.75rem; overflow: hidden; background: #1c1814; }
.land img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.land .ph span { font-size: 1.15rem; }
.land .badge { position: absolute; left: 0.6rem; top: 0.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 0.2rem 0.5rem; border-radius: 0.3rem; }

.row-block { margin-top: 1.1rem; }
.row-block h2 { font-size: 1.25rem; margin-bottom: 0; padding-right: 2.5rem; display: flex; align-items: baseline; gap: 0.8rem; }
.row-block h2 small { font-size: 0.9rem; color: var(--muted); font-family: var(--body); font-weight: 400; }
.row { display: flex; gap: 1rem; overflow-x: auto; padding: 0.7rem 2.5rem 0.6rem 0.6rem; margin-left: -0.6rem; scroll-padding: 0 4rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.4rem, 1fr)); gap: 1.7rem 1.3rem; padding: 0.6rem 2.5rem 1rem 0.6rem; margin-left: -0.6rem; }
.grid .card { width: auto; }

/* ---------- hero ---------- */
.hero { position: relative; height: 11.5rem; margin-right: 2.5rem; border-radius: 1.2rem; overflow: hidden; background: var(--panel); }
.hero .art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.hero .art img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero .art::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(14,13,12,.92) 0%, rgba(14,13,12,.55) 50%, rgba(14,13,12,.1) 100%); }
.hero .art svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.hero .txt { position: absolute; left: 2.2rem; bottom: 1.4rem; max-width: 36rem; display: flex; flex-direction: column; gap: 0.45rem; }
.eyebrow { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: 2.4rem; line-height: 1; font-weight: 700; }
.hero .meta { color: #C9C0B4; font-size: 1rem; }
.hero .prog { width: 20rem; height: 0.3rem; border-radius: 0.2rem; background: #3A332B; overflow: hidden; }
.hero .prog b { display: block; height: 100%; background: var(--accent); }
.hero .btns { margin-top: 0.2rem; }

/* ---------- detail pages ---------- */
.detail { position: relative; min-height: calc(100vh - 5.2rem); margin-left: -2.5rem; padding: 0 0 0 2.5rem; }
.detail .bg { position: absolute; top: -2.2rem; right: 0; width: 72%; height: 40vw; max-height: 60rem; z-index: 0; overflow: hidden; }
.detail .bg img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: .6; }
.detail .bg::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, #0E0D0C 0%, rgba(14,13,12,.8) 22%, rgba(14,13,12,.25) 55%, rgba(14,13,12,0) 80%), linear-gradient(180deg, rgba(14,13,12,0) 50%, #0E0D0C 100%); }
.detail .bg svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.detail .body { position: relative; z-index: 1; max-width: 44rem; display: flex; flex-direction: column; gap: 1.1rem; padding-top: 0.5rem; }
.detail h1 { font-size: 4rem; line-height: .98; font-weight: 700; }
.back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 1rem; align-self: flex-start; padding: 0.3rem 0.7rem 0.3rem 0.3rem; border-radius: 1rem; }
.back svg { width: 1.1rem; height: 1.1rem; }
.back:hover, .back:focus { color: var(--text); background: var(--panel2); }
.back:focus { box-shadow: 0 0 0 0.16rem var(--accent); }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 1.1rem; color: #C9C0B4; }
.facts .dot { color: #5A5148; }
.tag { padding: 0.15rem 0.6rem; border-radius: 0.4rem; border: 1px solid #4A4138; font-size: 0.85rem; font-weight: 600; color: #C9C0B4; }
.overview { font-size: 1.2rem; line-height: 1.5; color: #D6CEC3; max-width: 38rem; margin: 0; }
.overview.muted { color: var(--muted); font-size: 1rem; }
.playinfo { margin-top: 0.8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; color: var(--muted); }
.playinfo .mode { display: flex; align-items: center; gap: 0.7rem; color: #D6CEC3; font-size: 1.02rem; }
.playinfo .dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.playinfo .dot.remux { background: var(--accent); }
.playinfo .dot.transcode { background: #E2985B; }
.playinfo code { font-family: Consolas, monospace; font-size: 0.85rem; word-break: break-all; }

.season-chips { margin: 1.6rem 0 0.8rem; padding-right: 0; }
.eps { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.3rem 2.5rem 1rem 0.3rem; max-width: 58rem; }
.ep { display: flex; align-items: center; gap: 1.1rem; padding: 0.8rem 1.1rem; border-radius: 0.8rem; background: var(--panel); position: relative; overflow: hidden; transition: transform .1s; }
.ep:hover, .ep:focus { background: var(--panel2); transform: translateX(0.3rem); }
.ep:focus { box-shadow: 0 0 0 0.2rem var(--accent); }
.ep .n { width: 2.6rem; font-family: var(--display); font-size: 1.4rem; font-weight: 700; color: var(--accent); text-align: center; flex-shrink: 0; }
.ep .t { flex: 1; min-width: 0; font-size: 1.05rem; font-weight: 500; display: flex; flex-direction: column; gap: 0.2rem; }
.ep .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep .d { font-size: 0.85rem; font-weight: 400; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep .still { width: 9rem; height: 5.06rem; border-radius: 0.5rem; overflow: hidden; flex-shrink: 0; background: #1c1814; }
.ep .still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep .s { color: var(--muted); font-size: 0.85rem; flex-shrink: 0; }
.ep .ok { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ok); color: #0c1a12; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ep .ok svg { width: 0.9rem; height: 0.9rem; }
.ep .pbar { height: 0.22rem; }

/* ---------- search / settings ---------- */
.search-box { width: 100%; max-width: 40rem; height: 3.4rem; border-radius: 1.7rem; border: 2px solid #4A4138; background: var(--panel); color: var(--text); font-size: 1.2rem; padding: 0 1.5rem; font-family: var(--body); }
.search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(242,165,65,.3); }
.empty { color: var(--muted); font-size: 1.1rem; padding: 2rem 0; }
.panel { background: var(--panel); border-radius: 1rem; padding: 1.4rem 1.6rem; margin: 1.2rem 2.5rem 0 0; max-width: 46rem; display: flex; flex-direction: column; gap: 0.8rem; }
.panel h3 { font-size: 1.2rem; }
.kv { display: grid; grid-template-columns: 11rem 1fr; gap: 0.5rem 1rem; font-size: 1rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }
.good { color: var(--ok); } .bad { color: var(--warn); }
.panel p { margin: 0; color: #D6CEC3; line-height: 1.5; font-size: 1rem; }
.panel code { font-family: Consolas, monospace; background: #15110d; padding: 0.1rem 0.4rem; border-radius: 0.3rem; font-size: 0.92rem; }

/* ---------- player ---------- */
#player { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000; z-index: 50; }
#player[hidden] { display: none; }
#video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
#subs { position: absolute; left: 8%; right: 8%; bottom: 7%; text-align: center; pointer-events: none; transition: bottom .2s; }
#player.ui #subs { bottom: 24%; }
#subs span { display: inline-block; font-size: 2rem; line-height: 1.3; font-weight: 500; padding: 0.1rem 0.7rem; background: rgba(0,0,0,.55); border-radius: 0.3rem; text-shadow: 0 0.1rem 0.3rem #000; margin-top: 0.15rem; }
#subs div { display: block; }
#spinner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#spinner[hidden] { display: none; }
#spinner i { width: 4rem; height: 4rem; border-radius: 50%; border: 0.35rem solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#ui { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity .25s; background: linear-gradient(180deg, rgba(0,0,0,.65) 0, transparent 22%, transparent 55%, rgba(0,0,0,.85) 100%); }
#player.ui #ui { opacity: 1; pointer-events: auto; }
#player:not(.ui) { cursor: none; }
#ptop { position: absolute; left: 4rem; top: 2.6rem; }
#ptitle { font-family: var(--display); font-size: 2.2rem; font-weight: 700; }
#psub { font-size: 1.1rem; color: #C9C0B4; margin-top: 0.3rem; }
#pbottom { position: absolute; left: 4rem; right: 4rem; bottom: 2.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
#bar { position: relative; height: 0.4rem; border-radius: 0.2rem; background: #3A332B; cursor: pointer; margin: 0.6rem 0 0.2rem; }
#bar { touch-action: none; user-select: none; -webkit-user-select: none; }
#bar::before { content: ''; position: absolute; left: 0; right: 0; top: -1.1rem; bottom: -1.1rem; }
#bar.drag { height: 0.55rem; }
#bar.drag #knob { transform: scale(1.35); }
#bar:focus { height: 0.55rem; box-shadow: 0 0 0 0.18rem rgba(242,165,65,.5); }
#buf, #fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0.2rem; }
#buf { background: #5a4f43; width: 0; }
#fill { background: var(--accent); width: 0; }
#knob { position: absolute; top: 50%; width: 1.3rem; height: 1.3rem; margin: -0.65rem 0 0 -0.65rem; border-radius: 50%; background: var(--text); left: 0; }
#times { display: flex; justify-content: space-between; font-size: 1.1rem; color: #D6CEC3; font-variant-numeric: tabular-nums; }
#ctrls { display: flex; align-items: center; justify-content: center; gap: 1.3rem; margin-top: 0.4rem; }
#ctrls button { height: 3.4rem; min-width: 3.4rem; border-radius: 1.7rem; border: none; background: var(--panel2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform .1s; }
#ctrls button svg { width: 1.6rem; height: 1.6rem; }
#ctrls button.txt { padding: 0 1.4rem; font-size: 1.05rem; font-weight: 500; }
#ctrls button.big { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
#ctrls button.big svg { width: 1.9rem; height: 1.9rem; }
#ctrls button:hover, #ctrls button:focus { transform: scale(1.08); }
#ctrls button:focus { box-shadow: 0 0 0 0.16rem #000, 0 0 0 0.32rem var(--accent); }
#ctrls .sep { width: 1px; height: 2.2rem; background: #3A332B; margin: 0 0.3rem; }
#ctrls [hidden] { display: none; }
#pmenu { position: absolute; right: 4rem; bottom: 11rem; min-width: 18rem; max-width: 30rem; max-height: 60vh; overflow-y: auto; background: #1b1713; border: 1px solid #3a332b; border-radius: 1rem; padding: 0.6rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.6); }
#pmenu[hidden] { display: none; }
#pmenu h4 { margin: 0.5rem 0.8rem 0.6rem; font-family: var(--display); font-size: 1.1rem; color: var(--muted); font-weight: 600; }
#pmenu button { display: flex; width: 100%; align-items: center; gap: 0.8rem; text-align: left; border: none; background: transparent; color: var(--text); font-size: 1.1rem; padding: 0.8rem 1rem; border-radius: 0.6rem; cursor: pointer; }
#pmenu button:hover, #pmenu button:focus { background: var(--panel2); }
#pmenu button:focus { box-shadow: 0 0 0 0.16rem var(--accent); }
#pmenu button .chk { width: 1.1rem; color: var(--accent); }
#pnote { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); background: rgba(20,17,13,.92); border: 1px solid #3a332b; border-radius: 0.9rem; padding: 1rem 1.6rem; font-size: 1.15rem; text-align: center; max-width: 36rem; }
#pnote[hidden] { display: none; }
#pnote small { display: block; color: var(--muted); margin-top: 0.4rem; font-size: 0.9rem; }

/* ----- detail page extras: tagline, credits, cast ----- */
.tagline { font-size: 1.15rem; font-style: italic; color: var(--accent); margin: 0; }
.credits { display: flex; flex-direction: column; gap: 0.3rem; font-size: 1rem; color: #D6CEC3; max-width: 38rem; }
.credit { display: flex; gap: 0.9rem; align-items: baseline; }
.credit span { flex: 0 0 7.4rem; color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: .06em; }
.person { flex-shrink: 0; width: 7.4rem; text-align: center; border-radius: 0.9rem; padding: 0.4rem 0.2rem; outline: none; transition: transform .12s; }
.person .face { position: relative; width: 5.6rem; height: 5.6rem; margin: 0 auto; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; color: #A89E92; }
.person .face img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.person:focus { transform: scale(1.06); }
.person:focus .face { box-shadow: 0 0 0 0.22rem var(--accent); }
.person:focus .pn { color: var(--accent); }
.person .pn { margin-top: 0.5rem; font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.person .pr { margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero .btn { height: 2.7rem; font-size: 1rem; padding: 0 1.4rem; }

/* ----- live channels ----- */
.card.wide.livecard { width: 15rem; }
.livecard.off { opacity: .6; }
.livecard.off:hover, .livecard.off:focus { opacity: 1; }
.land .badge.live { background: #E5484D; color: #fff; }
.land .views { position: absolute; right: 0.6rem; bottom: 0.6rem; font-size: 0.75rem; font-weight: 600; background: rgba(0,0,0,.7); color: #F3EEE6; padding: 0.15rem 0.45rem; border-radius: 0.3rem; }
.land img.av { top: 50%; left: 50%; right: auto; bottom: auto; width: 4.6rem; height: 4.6rem; margin: -2.3rem 0 0 -2.3rem; border-radius: 50%; }
.livewatch { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; background: #000; }
.livewatch iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; background: #000; }
.livewatch-back { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 61; background: rgba(14,13,12,.75); }

/* ---------- home dashboard (bento) ---------- */
.dh { display: flex; justify-content: space-between; align-items: baseline; margin: -0.4rem 2.5rem 0.9rem 0; }
.dh .greet { font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.dh .clock b { font-family: var(--display); font-size: 2.1rem; font-weight: 600; }
.dh .clock span { margin-left: 0.9rem; color: var(--muted); font-size: 1.05rem; }
.bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 21rem; grid-template-rows: 15rem 12rem; gap: 1rem; margin-right: 2.5rem; }
.bento .hero { grid-column: 1 / span 2; height: auto; margin: 0; }
.bento .hero h1 { font-size: 3.5rem; }
.bento .hero .txt { left: 2rem; bottom: 1.5rem; max-width: 30rem; }
.hero .stack { position: absolute; right: 1.6rem; bottom: 1.4rem; width: 15rem; display: flex; flex-direction: column; gap: 0.6rem; }
.mini { display: block; background: rgba(14,13,12,.66); border-radius: 0.8rem; padding: 0.6rem 0.85rem; transition: transform .12s; }
.mini b { display: block; font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini span { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.mini .prog { width: 100%; height: 0.25rem; margin-top: 0.45rem; }
.mini:hover, .mini:focus { transform: scale(1.03); }
.mini:focus { box-shadow: 0 0 0 0.18rem var(--accent); }
.bx { background: var(--panel); border-radius: 1.2rem; padding: 1rem 1.3rem; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.5rem; }
.bx h3 { font-size: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.1rem; }
.bx h3 small { font-family: var(--body); font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.bx .empty { color: var(--muted); font-size: 0.95rem; margin: 0.3rem 0 0; }
.bx .rec { display: inline-block; vertical-align: 0.05rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--warn); margin-right: 0.55rem; }
.wx { justify-content: space-between; }
.wx-top { display: flex; justify-content: space-between; align-items: flex-start; }
.wx .k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.wx .big { font-family: var(--display); font-size: 4.4rem; line-height: 1; font-weight: 600; margin-top: 0.2rem; }
.wx .txt2 { font-size: 0.95rem; color: #D9D0C4; margin-top: 0.25rem; }
.wx svg.lg { width: 4.4rem; height: 4.4rem; flex: none; }
.wx-days { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.wx-days div { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.85rem; color: var(--muted); }
.wx-days b { color: var(--text); font-size: 1rem; font-weight: 600; }
.wx-days svg.sm { width: 1.5rem; height: 1.5rem; }
.ev { display: flex; align-items: center; gap: 0.8rem; }
.dateblk { width: 2.3rem; height: 2.3rem; border-radius: 0.6rem; background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.dateblk small { font-size: 0.55rem; color: var(--accent); font-weight: 700; text-transform: uppercase; line-height: 1; }
.dateblk b { font-size: 1rem; line-height: 1.1; }
.evt { min-width: 0; }
.evt .t { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt .s { font-size: 0.8rem; color: var(--muted); }
.td { display: flex; align-items: center; gap: 0.7rem; font-size: 1rem; min-width: 0; }
.td .dot { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--accent); flex: none; }
.td .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.td em.late { color: var(--warn); }
.bx .more { font-size: 0.85rem; color: var(--muted); }
.lv { display: flex; align-items: center; gap: 0.8rem; padding: 0.2rem; margin: -0.2rem; border-radius: 0.7rem; transition: transform .12s; }
.lv:hover, .lv:focus { transform: scale(1.03); }
.lv:focus { box-shadow: 0 0 0 0.18rem var(--accent); }
.lv img, .lv .av { width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none; object-fit: cover; background: #3B2F57; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.lv .lt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv .lt b { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv .lt small { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv em { font-style: normal; font-size: 0.9rem; color: #D9D0C4; }

.bento .hero h1.lg { font-size: 2.5rem; }
.bento .hero h1.xl { font-size: 2.1rem; line-height: 1.05; }
.bento .hero .txt { max-width: 31rem; }

/* profile button in the nav, and the login / "Who's watching?" screens */
#nav #who { margin-top: auto; width: 4.4rem; padding: 0.6rem 0 0.4rem; border: 0; border-radius: 0.9rem; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--muted); }
#nav #who[hidden] { display: none; }
#nav #who i { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 1rem; color: var(--accent-ink); }
#nav #who span { font-size: 0.72rem; font-weight: 500; max-width: 4.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav #who:hover, #nav #who:focus { background: var(--panel2); color: var(--text); }
#nav #who:focus { box-shadow: 0 0 0 0.18rem var(--accent); }
#gate { position: fixed; inset: 0; z-index: 200; background: radial-gradient(60rem 36rem at 50% 30%, #2A1E12 0%, var(--bg) 70%); display: flex; align-items: center; justify-content: center; }
#gate[hidden] { display: none; }
.gbox { width: 26rem; max-width: 90vw; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
.gbox.wide { width: auto; gap: 2.4rem; }
.gbox h1 { font-size: 2.2rem; }
.gbox p { margin: 0 0 0.6rem; color: var(--muted); font-size: 1.05rem; }
.glogo { width: 4.2rem; height: 4.2rem; margin-bottom: 0.4rem; }
.glogo svg { width: 100%; height: 100%; display: block; }
.gbox input { width: 100%; height: 3.2rem; padding: 0 1.2rem; border-radius: 1rem; border: 2px solid #4A4138; background: var(--panel); color: var(--text); font: inherit; font-size: 1.15rem; }
.gbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.18rem var(--accent); }
.gbox .btn { margin-top: 0.4rem; justify-content: center; width: 100%; }
.gbox .btn:focus { box-shadow: 0 0 0 0.2rem var(--text); }
.gerr { min-height: 1.3rem; color: var(--warn); font-size: 0.95rem; }
.profiles { display: flex; gap: 2.2rem; flex-wrap: wrap; justify-content: center; }
.prof { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 0.6rem; border-radius: 1.2rem; color: var(--muted); }
.prof i { width: 8rem; height: 8rem; border-radius: 1.4rem; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 3.6rem; font-family: var(--display); color: var(--accent-ink); transition: transform .12s; }
.prof span { font-size: 1.3rem; font-weight: 500; }
.prof:hover, .prof:focus { color: var(--text); }
.prof:hover i, .prof:focus i { transform: scale(1.08); }
.prof:focus i { box-shadow: 0 0 0 0.25rem var(--text); }

.prof i { position: relative; }
.prof i .lk { position: absolute; right: -0.5rem; bottom: -0.5rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--bg); color: var(--text); display: grid; place-items: center; }
.prof i .lk svg { width: 1.3rem; height: 1.3rem; }
.pav { width: 5rem; height: 5rem; border-radius: 1.2rem; display: grid; place-items: center; font-weight: 700; font-size: 2.2rem; font-family: var(--display); color: var(--accent-ink); }
.dots { display: flex; gap: 1rem; margin: 0.4rem 0; }
.dots b { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid #6B6054; }
.dots b.on { background: var(--accent); border-color: var(--accent); }
.pad { display: grid; grid-template-columns: repeat(3, 4.6rem); gap: 0.8rem; margin-top: 0.4rem; }
.pad button { height: 4.2rem; border-radius: 1rem; border: 2px solid #4A4138; background: var(--panel); color: var(--text); font-size: 1.6rem; font-weight: 600; cursor: pointer; }
.pad button:hover, .pad button:focus { background: var(--panel2); }
.pad button:focus { box-shadow: 0 0 0 0.2rem var(--accent); border-color: transparent; }
.bento.solo { grid-template-rows: 15rem auto; }
.bento.solo > .bx:not(.wx) { grid-column: 1 / -1; }

/* ---------- phones (narrow or short screens): bottom tab bar, one column, touch-sized ---------- */
@media (max-width: 820px), (max-height: 480px) {
  html { font-size: 15px; }
  #app { flex-direction: column-reverse; height: 100vh; height: 100dvh; }
  #nav { width: 100%; flex-direction: row; justify-content: space-around; align-items: center; gap: 0; padding: 0.25rem 0.4rem calc(0.25rem + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); background: var(--bg); flex-shrink: 0; }
  #nav .logo { display: none; }
  #nav a, #nav #who { width: auto; flex: 1; max-width: 5.5rem; padding: 0.5rem 0 0.35rem; margin: 0; }
  #nav a span, #nav #who span { font-size: 0.7rem; }
  #nav #who i { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
  #nav #who { margin-top: 0; }
  #view { padding: 1rem 0 1.5rem 1rem; scroll-padding: 1rem 0; -webkit-overflow-scrolling: touch; }
  .page-title { font-size: 1.7rem; }
  .head { padding-right: 1rem; }
  .chips { padding-right: 1rem; flex-wrap: nowrap; overflow-x: auto; margin: 0.8rem 0; }
  .chips .gap { width: 0.2rem; flex: none; }
  .chip { flex: none; }
  .letters { padding-right: 1rem; }
  .row { padding-right: 1rem; gap: 0.8rem; }
  .card { width: 7.4rem; }
  .card.wide { width: 11rem; }
  .card.wide.livecard { width: 12.5rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: 1.1rem 0.8rem; padding-right: 1rem; }
  .row-block h2 { padding-right: 1rem; font-size: 1.15rem; }
  .card:hover, .card:focus, .btn:hover, .btn:focus { transform: none; }

  /* home: one column */
  .dh { margin: 0 1rem 0.8rem 0; }
  .dh .greet { font-size: 1.15rem; }
  .dh .clock b { font-size: 1.6rem; }
  .dh .clock span { margin-left: 0.5rem; font-size: 0.85rem; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin-right: 1rem; gap: 0.8rem; }
  .bento.solo { grid-template-rows: none; }
  .bento .hero { grid-column: auto; height: auto; min-height: 17rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem; margin: 0; }
  .bento .hero .txt { position: relative; left: auto; bottom: auto; max-width: none; }
  .bento .hero h1, .bento .hero h1.lg, .bento .hero h1.xl { font-size: 2rem; line-height: 1.05; }
  .hero .stack { position: relative; right: auto; bottom: auto; width: auto; flex-direction: row; margin-top: 0.8rem; gap: 0.5rem; }
  .hero .stack .mini { flex: 1; min-width: 0; }
  .hero .prog { width: 100%; }
  .bx { padding: 0.9rem 1rem; }
  .wx .big { font-size: 3.4rem; }

  /* detail pages */
  .detail { margin-left: -1rem; padding-left: 1rem; padding-right: 1rem; min-height: 0; }
  .detail .bg { width: 100%; height: 62vw; max-height: none; top: -1rem; }
  .detail h1 { font-size: 2.1rem; }
  .overview { font-size: 1rem; }
  .eps { padding-right: 1rem; }
  .ep { gap: 0.7rem; padding: 0.6rem 0.7rem; }
  .ep .still { width: 6.2rem; height: 3.5rem; }
  .ep .n { width: 1.8rem; font-size: 1.1rem; }
  .credit span { flex-basis: 5.4rem; }
  .panel { margin-right: 1rem; }
  .kv { grid-template-columns: 7rem 1fr; }
  .search-box { height: 3rem; font-size: 1.05rem; }

  /* player */
  #ptop { left: 1.2rem; top: 1.2rem; right: 1.2rem; }
  #ptitle { font-size: 1.3rem; }
  #pbottom { left: 1.2rem; right: 1.2rem; bottom: 1.2rem; }
  #ctrls { flex-wrap: wrap; gap: 0.7rem; }
  #ctrls button { height: 2.8rem; min-width: 2.8rem; }
  #ctrls button.big { width: 3.6rem; height: 3.6rem; }
  #ctrls .sep { display: none; }
  #pmenu { right: 1rem; left: 1rem; bottom: 9rem; max-width: none; }
  #subs span { font-size: 1.1rem; }
  .livewatch-back { top: 0.7rem; left: 0.7rem; }

  /* login and profiles */
  .prof i { width: 5.2rem; height: 5.2rem; font-size: 2.4rem; }
  .prof span { font-size: 1.05rem; }
  .prof i .lk { width: 1.8rem; height: 1.8rem; right: -0.4rem; bottom: -0.4rem; }
  .pad { grid-template-columns: repeat(3, 4.2rem); }
  .pad button { height: 3.8rem; }
  .profiles { gap: 1rem; }
  .gbox h1 { font-size: 1.7rem; }
}