/*
 * Hand-written stylesheet for Hunt on Demand Web TV.
 *
 * CONSTRAINT: only CSS that works on ~2015 smart-TV browsers (Samsung Tizen <= 3,
 * LG webOS <= 3, old WebKit). That rules out everything Tailwind v3 leaned on:
 *   - NO CSS custom properties / var()
 *   - NO modern space/slash rgb()  -> use hex or rgba(r,g,b,a)
 *   - NO flex `gap`                -> emulate with child margins
 *   - NO logical properties        -> use physical (left/right) — app is LTR
 *   - NO :where() / :is()
 * Flexbox carries -webkit- prefixes for old WebKit. This file replaces the
 * Tailwind build (which is no longer run). Class names match the templates.
 */

/* =========================================================================
   Reset (2015-safe subset of normalize/preflight)
   ========================================================================= */
*, :before, :after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #434343; }
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #121212; /* avoid a white flash before body bg paints */
}
body { margin: 0; line-height: inherit; color: #f7f7f7; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p, blockquote, dl, dd, figure, pre, hr { margin: 0; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: bolder; }
ul, ol, menu { list-style: none; margin: 0; padding: 0; }
img, video, svg, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; background-color: transparent; background-image: none; cursor: pointer; }
[hidden] { display: none; }

/* =========================================================================
   Layout / position / sizing
   ========================================================================= */
.fixed { position: fixed; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-0 { top: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.hidden { display: none; }
.pointer-events-none { pointer-events: none; }
.overflow-y-scroll { overflow-y: scroll; }
.whitespace-nowrap { white-space: nowrap; }

.min-h-screen { min-height: 100vh; }
.h-full { height: 100%; }
.h-10 { height: 2.5rem; }
.h-3 { height: .75rem; }
.max-h-\[50vh\] { max-height: 50vh; }

.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-1\/4 { width: 25%; }
.w-1\/5 { width: 20%; }
.w-3 { width: .75rem; }
.w-\[14\%\] { width: 14%; }
.min-w-\[50\%\] { min-width: 50%; }
.max-w-8xl { max-width: 90rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* =========================================================================
   Flexbox (prefixed for old WebKit TVs)
   ========================================================================= */
.flex { display: -webkit-flex; display: flex; }
.flex-col { -webkit-flex-direction: column; flex-direction: column; }
.flex-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.items-center { -webkit-align-items: center; align-items: center; }
.justify-center { -webkit-justify-content: center; justify-content: center; }
.justify-between { -webkit-justify-content: space-between; justify-content: space-between; }
.justify-end { -webkit-justify-content: flex-end; justify-content: flex-end; }

/* `gap` is unsupported before ~2020; emulate row gaps with child margins. */
.gap-4 > * + * { margin-left: 1rem; }
.gap-8 > * + * { margin-left: 2rem; }

/* =========================================================================
   Spacing
   ========================================================================= */
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-20 { margin-top: 5rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-24 { margin-bottom: 6rem; }
.mr-2 { margin-right: .5rem; }
.mr-4 { margin-right: 1rem; }
.mr-auto { margin-right: auto; }
.ms-0 { margin-left: 0; } /* logical -> physical (LTR) */

.p-1 { padding: .25rem; }
.p-2 { padding: .5rem; }
.p-4 { padding: 1rem; }
.p-10 { padding: 2.5rem; }
.p-16 { padding: 4rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-10 { padding-top: 2.5rem; }

/* sibling spacing helpers */
.space-y-4 > * + * { margin-top: 1rem; }
.-space-x-px > * + * { margin-left: -1px; } /* overlap pagination borders */

/* =========================================================================
   Typography
   ========================================================================= */
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.leading-tight { line-height: 1.25; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Colors (hex — no var(), no modern rgb())
   ========================================================================= */
.bg-gray-100 { background-color: #e3e3e3; }
.bg-gray-700 { background-color: #434343; }
.bg-gray-800 { background-color: #383838; }
.bg-gray-1000 { background-color: #121212; }
.bg-primary-200 { background-color: #e4d6a7; }
.bg-red-700 { background-color: #b73732; }
.text-white { color: #ffffff; }
.text-gray-50 { color: #f7f7f7; }
.text-gray-200 { color: #c8c8c8; }
.text-gray-400 { color: #818181; }
.text-gray-800 { color: #383838; }
.text-primary-950 { color: #361e12; }
.border-gray-700 { border-color: #434343; }

/* =========================================================================
   Borders / radius
   ========================================================================= */
.border { border-width: 1px; }
.border-e-0 { border-right-width: 0; } /* logical -> physical (LTR) */
.rounded-md { border-radius: .375rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-b-lg { border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem; }
.rounded-s-lg { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }   /* start = left (LTR) */
.rounded-e-lg { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }  /* end = right (LTR) */

/* =========================================================================
   Shadow
   ========================================================================= */
.shadow-2xl { -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }

/* =========================================================================
   POLISH — TV-specific, all 2015-safe
   ========================================================================= */

/* Smooth state changes */
a, button { -webkit-transition: background-color .15s ease, color .15s ease, outline-color .15s ease; transition: background-color .15s ease, color .15s ease, outline-color .15s ease; }

/* TV remotes navigate by FOCUS, not hover. The templates only had hover: styles,
   so nothing was visible when moving the D-pad. Mirror hover onto focus AND add a
   clear global focus ring so the selected element is always obvious. */
.hover\:bg-gray-600:hover, .hover\:bg-gray-600:focus { background-color: #515151; }
.hover\:bg-gray-700:hover, .hover\:bg-gray-700:focus { background-color: #434343; }
.hover\:text-white:hover, .hover\:text-white:focus { color: #ffffff; }

a:focus, button:focus, [tabindex]:focus {
  outline: 3px solid #e4d6a7; /* primary gold */
  outline-offset: 2px;
}

/* Video tiles: a bold gold frame + slight brighten so the selected video pops. */
#video_container a:focus { outline: 4px solid #e4d6a7; outline-offset: 0; }
#video_container a:focus img { -webkit-filter: brightness(1.12); filter: brightness(1.12); }

/* Primary action button (Abspielen / reload): clearer focus emphasis. */
.bg-primary-200:focus { background-color: #f2ebd3; outline-color: #ffffff; }

.block { display: block; }

/* Fullscreen player page (/watch): the <video> fills the whole viewport, so it looks
   fullscreen without the Fullscreen API (unreliable on old TVs). A <video> letterboxes
   itself, so no object-fit (not on 2015 TVs) is needed. */
.player-stage { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; }
.player-video { width: 100%; height: 100%; background-color: #000000; }
.player-back {
    position: fixed; top: 1.5rem; left: 1.5rem; z-index: 10;
    padding: .5rem 1rem; background-color: rgba(18, 18, 18, .75); border-radius: .5rem;
    opacity: 1; -webkit-transition: opacity .3s ease; transition: opacity .3s ease;
}
/* Stay visible while focused (remote navigated to it) even if the hide timer fired. */
.player-back:focus { opacity: 1; }

/* Diagnostics page (/debug) */
.debug-section { max-width: 60rem; }
.debug-row {
    display: -webkit-flex; display: flex;
    -webkit-justify-content: space-between; justify-content: space-between;
    padding: .75rem 0; border-bottom: 1px solid #383838;
}
.debug-row .k { color: #818181; margin-right: 1rem; }
.debug-row .v { color: #f7f7f7; font-weight: 600; text-align: right; word-break: break-all; }

/* =========================================================================
   MODERN COMPONENTS (2015-safe: -webkit- prefixes, rgba(), gradients, transforms)
   ========================================================================= */

/* --- Page header (video overview) --- */
.page-header {
    display: -webkit-flex; display: flex;
    -webkit-align-items: baseline; align-items: baseline;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
    padding: .25rem .6rem 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #262626;
}
.page-title { font-size: 2.1rem; font-weight: 700; color: #ffffff; letter-spacing: -.01em; }
.page-sub { margin-left: 1rem; font-size: 1.05rem; color: #818181; }

/* --- Video grid cards --- */
.video-card {
    -webkit-flex: 0 0 25%; flex: 0 0 25%;
    max-width: 25%;
    display: block;
    padding: .6rem;
}
.video-card-inner {
    display: block;
    background-color: #1b1b1b;
    border-radius: .65rem;
    overflow: hidden;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    -webkit-transition: -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
    transition: transform .18s ease, box-shadow .18s ease;
}
.video-thumb { display: block; width: 100%; height: auto; background-color: #000000; }
.video-meta { display: block; padding: .6rem .75rem .8rem; }
.video-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.7em; /* fallback if -webkit-line-clamp is unsupported */
    font-size: 1.02rem; line-height: 1.32; font-weight: 600; color: #f1f1f1;
}
.video-pub { display: block; margin-top: .3rem; font-size: .82rem; color: #8a8a8a; }

/* Shared tile hover/focus (videos, favorites, categories, publishers) */
.tile:hover .video-card-inner,
.tile:focus .video-card-inner {
    -webkit-transform: translateY(-6px); transform: translateY(-6px);
}
.tile:hover .video-card-inner {
    -webkit-box-shadow: 0 14px 30px rgba(0, 0, 0, .6); box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
}
/* Focus = the TV-remote selection: lift + a bold gold ring (replaces the generic outline). */
#video_container a.tile:focus { outline: none; }
.tile:focus .video-card-inner {
    -webkit-box-shadow: 0 0 0 3px #e4d6a7, 0 14px 30px rgba(0, 0, 0, .6);
    box-shadow: 0 0 0 3px #e4d6a7, 0 14px 30px rgba(0, 0, 0, .6);
}

/* Category cards (5 per row) — image + centered title */
.cat-card { -webkit-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; display: block; padding: .6rem; }
.cat-title { display: block; padding: .65rem .6rem .85rem; text-align: center; font-size: 1rem; font-weight: 600; color: #f1f1f1; }

/* Publisher cards (7 per row) — round logo + centered name */
.pub-card { -webkit-flex: 0 0 14.285%; flex: 0 0 14.285%; max-width: 14.285%; display: block; padding: .55rem; }
.pub-card .video-card-inner { padding: 1.1rem .6rem; text-align: center; }
.pub-logo {
    display: block; margin-left: auto; margin-right: auto;
    width: 88px; height: 88px; border-radius: 9999px;
    background-color: #ffffff; background-size: cover; background-position: center;
}
.pub-name { display: block; margin-top: .65rem; font-size: .92rem; font-weight: 600; color: #f1f1f1; }

/* Fixed 16:9 thumbnail box: reserves space (no layout shift while lazy images load)
   and keeps video cards a uniform height. object-fit isn't 2015-safe, so the source
   (already ~16:9) is stretched to fill the box. */
.thumb-box { display: block; position: relative; width: 100%; padding-top: 56.25%; background-color: #000000; overflow: hidden; }
.thumb-box .video-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Player error box (/watch) — shown on a fatal/stalled playback error with diagnostics */
.player-error {
    position: fixed; left: 50%; top: 50%;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    width: 90%; max-width: 40rem; z-index: 20;
    background-color: #7f1d1d; color: #ffffff;
    border: 3px solid #b91c1c; border-radius: .75rem; padding: 1.5rem; text-align: center;
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, .6); box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.player-error h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem; }
.player-error p { font-size: 1.15rem; line-height: 1.4; margin-bottom: .6rem; }
.player-error .tech { font-size: .85rem; opacity: .85; word-break: break-all; }
.player-error button {
    display: inline-block; width: 100%; margin-top: .6rem; padding: .85rem;
    font-size: 1.15rem; font-weight: 700; background-color: #ffffff; color: #7f1d1d;
    border-radius: .5rem; cursor: pointer;
}
.player-error button.err-secondary { background-color: #2c5aa0; color: #ffffff; }
.player-error button:focus { outline: 3px solid #ffffff; outline-offset: 2px; }
.player-error button[disabled] { opacity: .6; cursor: default; }

/* --- Pagination active page --- */
.pg-active { background-color: #e4d6a7; color: #361e12; border-color: #e4d6a7; }

/* --- Login page --- */
.login-screen { min-height: 100vh; padding: 3.5rem 3rem; }
.login-inner { max-width: 78rem; margin-left: auto; margin-right: auto; }
.login-brand { text-align: center; margin-bottom: 3rem; }
.login-logo { display: inline-block; height: 44px; width: auto; }
.login-heading { font-size: 3rem; font-weight: 700; color: #ffffff; letter-spacing: -.02em; margin-top: 1rem; }
.login-subheading { font-size: 1.25rem; color: #818181; margin-top: .6rem; }

.login-options {
    display: -webkit-flex; display: flex;
    -webkit-justify-content: center; justify-content: center;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.login-card {
    -webkit-flex: 1 1 30rem; flex: 1 1 30rem;
    max-width: 36rem;
    margin: .75rem;
    background-color: #1c1c1c;
    border: 1px solid #2e2e2e;
    border-radius: 1rem;
    padding: 2rem;
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, .4); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.login-step {
    display: inline-block;
    background-color: rgba(228, 214, 167, .14);
    color: #e4d6a7;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    padding: .28rem .75rem; border-radius: 9999px; margin-bottom: 1rem;
}
.login-card-title { font-size: 1.55rem; font-weight: 700; color: #f7f7f7; margin-bottom: 1.25rem; }
.login-hint { color: #9a9a9a; font-size: 1.05rem; line-height: 1.45; margin-bottom: 1rem; }
.login-qr-row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.login-qr {
    background-color: #ffffff; padding: .75rem; border-radius: .9rem;
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, .4); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.login-qr img { display: block; width: 220px; height: 220px; }
.login-qr-row .login-hint { margin-left: 1.5rem; margin-bottom: 0; }
.login-url {
    background-color: #0e0e0e; border: 1px solid #333333; border-radius: .6rem;
    padding: .85rem 1rem; font-size: 1.35rem; font-weight: 700; color: #ffffff;
    margin-bottom: 1.25rem; word-break: break-all;
}
.login-code { display: -webkit-flex; display: flex; }
.login-digit {
    -webkit-flex: 1 1 0; flex: 1 1 0;
    margin-right: .55rem; text-align: center;
    padding: 1rem .2rem; font-size: 2rem; font-weight: 700; color: #361e12;
    background-image: -webkit-linear-gradient(top, #efe2bb, #e4d6a7);
    background-image: linear-gradient(to bottom, #efe2bb, #e4d6a7);
    border-radius: .55rem;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .35); box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.login-digit:last-child { margin-right: 0; }
.login-timer { text-align: center; margin-top: 2.5rem; color: #818181; font-size: 1.1rem; }

/* Reusable primary button */
.btn-primary {
    display: inline-block;
    background-color: #e4d6a7; color: #361e12;
    font-size: 1.4rem; font-weight: 700;
    padding: .9rem 2.2rem; border-radius: .6rem; cursor: pointer;
    -webkit-transition: background-color .15s ease; transition: background-color .15s ease;
}
.btn-primary:hover, .btn-primary:focus { background-color: #efe2bb; }