/* Sandors TV on a television (html.tv, set by tv.js) — LG webOS and Fire TV look the same.
   Sizes follow the screen width: [N] = N pixels of a 1280-wide design, so a 1920-wide LG page
   and a 960-wide Fire TV page show the same layout, readable from the sofa.
   Focus: everything reachable with the arrows gets a clear white ring (.tv-focus, set by tv.js). */
html.tv { --u: calc(100vw / 1280); --gutter: calc(var(--u) * 56); --ring: calc(var(--u) * 4) solid #fff; scroll-behavior: auto; }
html.tv body { font-size: calc(var(--u) * 18); }
html.tv ::-webkit-scrollbar { display: none; }
html.tv, html.tv body { scrollbar-width: none; }

/* Mouse-only bits that a remote can't reach */
html.tv .row-arrow, html.tv #volume, html.tv #muteBtn, html.tv #fsBtn, html.tv #airplayBtn, html.tv .card .remove { display: none; }
html.tv :focus { outline: none; }

/* ---------- Top bar ---------- */
html.tv #topbar { gap: calc(var(--u) * 36); padding: calc(var(--u) * 22) var(--gutter); }
html.tv .brand { font-size: calc(var(--u) * 30); gap: calc(var(--u) * 12); }
html.tv .brand-mark { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
html.tv #tabs { gap: calc(var(--u) * 8); font-size: calc(var(--u) * 20); }
html.tv #tabs a { padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: calc(var(--u) * 6); transition: background .15s, color .15s; }
html.tv #tabs a.tv-focus { background: #fff; color: #000; }
html.tv .avatar { width: calc(var(--u) * 44); height: calc(var(--u) * 44); font-size: calc(var(--u) * 20); }
html.tv .avatar.tv-focus { outline: var(--ring); outline-offset: calc(var(--u) * 3); }
html.tv .account-menu { top: calc(var(--u) * 58); width: calc(var(--u) * 340); padding: calc(var(--u) * 18); font-size: calc(var(--u) * 16); }
html.tv .account-menu strong { font-size: calc(var(--u) * 19); }
html.tv .account-menu button { font-size: calc(var(--u) * 18); padding: calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 10); margin-top: calc(var(--u) * 8); border-radius: calc(var(--u) * 4); }
html.tv .account-menu button.tv-focus { background: #fff; color: #000; text-decoration: none; }

/* ---------- Buttons ---------- */
html.tv .btn { font-size: calc(var(--u) * 20); padding: calc(var(--u) * 12) calc(var(--u) * 30); gap: calc(var(--u) * 10); border-radius: calc(var(--u) * 6); transition: transform .15s, background .15s, color .15s; }
html.tv .btn svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
html.tv .btn.tv-focus { transform: scale(1.08); outline: var(--ring); outline-offset: calc(var(--u) * 3); }
html.tv .btn-dark.tv-focus, html.tv .btn-outline.tv-focus, html.tv .btn-ghost.tv-focus { background: #fff; color: #000; border-color: #fff; }
html.tv .btn-light.tv-focus { background: #fff; color: #000; box-shadow: 0 0 calc(var(--u) * 24) rgba(255, 255, 255, .45); }
html.tv .pill { font-size: calc(var(--u) * 16); padding: 0 calc(var(--u) * 8); }

/* ---------- Hero ---------- */
html.tv .hero { max-height: none; height: 100vh; }
html.tv .hero-content { max-width: calc(var(--u) * 720); margin-top: calc(var(--u) * 70); }
html.tv .hero-kicker { font-size: calc(var(--u) * 17); margin-bottom: calc(var(--u) * 10); }
html.tv .hero h1 { font-size: calc(var(--u) * 64); margin-bottom: calc(var(--u) * 24); }
html.tv .hero h1.long, html.tv .title-hero h1.long { font-size: calc(var(--u) * 48); }
html.tv .title-logo { max-width: calc(var(--u) * 560); max-height: calc(var(--u) * 200); }
html.tv .hero-meta { gap: calc(var(--u) * 14); font-size: calc(var(--u) * 18); margin-bottom: calc(var(--u) * 16); }
html.tv .hero p { font-size: calc(var(--u) * 20); max-width: calc(var(--u) * 620); margin-bottom: calc(var(--u) * 26); -webkit-line-clamp: 3; }
html.tv .hero-actions { gap: calc(var(--u) * 16); }
html.tv .hero-poster { width: calc(var(--u) * 260); }

/* ---------- Rows and cards ---------- */
html.tv .rows.flat { padding-top: calc(var(--u) * 110); }
html.tv .row { margin-bottom: calc(var(--u) * 6); min-height: 0; }
html.tv .row-head { gap: calc(var(--u) * 16); }
html.tv .row-head h2 { font-size: calc(var(--u) * 26); }
html.tv .row-track { gap: calc(var(--u) * 14); padding: calc(var(--u) * 22) var(--gutter) calc(var(--u) * 30); scroll-behavior: auto; }
html.tv .card { width: calc(var(--u) * 196); border-radius: calc(var(--u) * 6); transition: transform .18s, box-shadow .18s; }
html.tv .card:hover { transform: none; box-shadow: none; }
html.tv .card.tv-focus { transform: scale(1.1); z-index: 3; box-shadow: 0 0 0 calc(var(--u) * 4) #fff, 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, .8); }
html.tv .row-track .card:first-child.tv-focus { transform-origin: center; }
html.tv .card.wide { width: calc(var(--u) * 340); }
html.tv .card.channel { width: calc(var(--u) * 240); }
html.tv .card .label { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 10) calc(var(--u) * 12); }
html.tv .card .sub { font-size: calc(var(--u) * 15); padding: 0 calc(var(--u) * 12) calc(var(--u) * 12); }
html.tv .card .badge { font-size: calc(var(--u) * 14); padding: calc(var(--u) * 3) calc(var(--u) * 8); top: calc(var(--u) * 8); left: calc(var(--u) * 8); }
html.tv .card .placeholder { font-size: calc(var(--u) * 18); padding: calc(var(--u) * 14); }
html.tv .progress { height: calc(var(--u) * 5); }

/* ---------- Grid pages ---------- */
html.tv .page { padding: calc(var(--u) * 120) var(--gutter) calc(var(--u) * 60); }
html.tv .page-title { font-size: calc(var(--u) * 38); margin-bottom: calc(var(--u) * 28); }
html.tv .page .back { font-size: calc(var(--u) * 20); padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: calc(var(--u) * 4); margin-left: calc(var(--u) * -12); }
html.tv .page .back.tv-focus { background: #fff; color: #000; }
html.tv .grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 190), 1fr)); gap: calc(var(--u) * 30) calc(var(--u) * 18); }
html.tv .grid.channels { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 240), 1fr)); }
html.tv .grid .card:hover { transform: none; }
html.tv .grid .card.tv-focus { transform: scale(1.07); }
html.tv .empty, html.tv .loading-msg { font-size: calc(var(--u) * 22); }

/* ---------- Search: keyboard on the left, results on the right ---------- */
html.tv .page.tv-search { display: grid; grid-template-columns: calc(var(--u) * 420) 1fr; gap: calc(var(--u) * 44); align-items: start; }
html.tv .tv-search .search-head { position: sticky; top: calc(var(--u) * 110); text-align: left; margin: 0; }
html.tv .tv-search .search-head h1 { font-size: calc(var(--u) * 26); margin-bottom: calc(var(--u) * 16); }
html.tv .tv-search .search-box { width: 100%; }
html.tv .tv-search .search-box input { font-size: calc(var(--u) * 24); padding: calc(var(--u) * 14) calc(var(--u) * 18); border: calc(var(--u) * 3) solid #fff; background: #222; color: #fff; caret-color: transparent; }
html.tv .tv-search .search-box input::placeholder { color: #888; }
html.tv .tv-search .suggestions { display: none; }
html.tv .tv-keyboard { margin-top: calc(var(--u) * 18); }
html.tv .tv-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 8); }
html.tv .tv-keys-row { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); }
html.tv .tv-keyboard button { height: calc(var(--u) * 56); border: 0; border-radius: calc(var(--u) * 6); background: #2a2a2a; color: #fff; font-size: calc(var(--u) * 24); font-weight: 500; text-transform: uppercase; cursor: pointer; transition: transform .1s, background .1s; }
html.tv .tv-keys-row button { font-size: calc(var(--u) * 17); text-transform: none; }
html.tv .tv-keyboard button.tv-focus { background: #fff; color: #000; transform: scale(1.08); }
html.tv .tv-search .results { grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 270), 1fr)); gap: calc(var(--u) * 26) calc(var(--u) * 18); }
html.tv .result { border-radius: calc(var(--u) * 6); transition: transform .15s; }
html.tv .result.tv-focus { transform: scale(1.05); }
html.tv .result.tv-focus .thumb { box-shadow: 0 0 0 calc(var(--u) * 4) #fff; }
html.tv .result:hover .thumb img { transform: none; }
html.tv .result h3 { font-size: calc(var(--u) * 19); margin: calc(var(--u) * 10) 0 calc(var(--u) * 4); }
html.tv .result .result-meta { font-size: calc(var(--u) * 16); }

/* ---------- Title page ---------- */
html.tv .title-hero { min-height: 80vh; padding-bottom: calc(var(--u) * 50); }
html.tv .title-hero .hero-content { max-width: calc(var(--u) * 760); }
html.tv .title-hero h1 { font-size: calc(var(--u) * 64); }
html.tv .resume-note { font-size: calc(var(--u) * 18); margin-top: calc(var(--u) * 18); }
html.tv .resume-note .progress { width: calc(var(--u) * 240); }
html.tv .title-body { gap: calc(var(--u) * 48); }
html.tv .title-body p { font-size: calc(var(--u) * 20); }
html.tv .side-info { font-size: calc(var(--u) * 17); }
html.tv .episodes-head h2 { font-size: calc(var(--u) * 30); }
html.tv .episodes select { font-size: calc(var(--u) * 19); padding: calc(var(--u) * 10) calc(var(--u) * 16); }
html.tv .episodes select.tv-focus { outline: var(--ring); outline-offset: calc(var(--u) * 3); }
html.tv .episode { grid-template-columns: calc(var(--u) * 50) calc(var(--u) * 250) 1fr; gap: calc(var(--u) * 22); padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 8); }
html.tv .episode:hover { background: none; }
html.tv .episode.current { background: #222; }
html.tv .episode.tv-focus { background: #fff; color: #000; }
html.tv .episode.tv-focus p, html.tv .episode.tv-focus h3 small, html.tv .episode.tv-focus .num { color: #333; }
html.tv .episode .num { font-size: calc(var(--u) * 28); }
html.tv .episode h3 { font-size: calc(var(--u) * 21); }
html.tv .episode p { font-size: calc(var(--u) * 17); }
html.tv .list-btn.tv-focus, html.tv [data-list].tv-focus { outline: var(--ring); outline-offset: calc(var(--u) * 3); }

/* ---------- Player ---------- */
html.tv .player-top { padding: calc(var(--u) * 30) var(--gutter); gap: calc(var(--u) * 20); }
html.tv .player-title { font-size: calc(var(--u) * 28); }
html.tv .player-sub { font-size: calc(var(--u) * 19); }
html.tv .player-controls { padding: calc(var(--u) * 50) var(--gutter) calc(var(--u) * 34); }
html.tv .ctrl { width: calc(var(--u) * 64); height: calc(var(--u) * 64); }
html.tv .ctrl:hover { transform: none; }
html.tv .ctrl svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
html.tv .ctrl.tv-focus { background: #fff; color: #000; transform: scale(1.1); }
html.tv .ctrl-row { gap: calc(var(--u) * 16); }
html.tv .time { font-size: calc(var(--u) * 21); margin-left: calc(var(--u) * 14); }
html.tv .live-badge { font-size: calc(var(--u) * 19); }
html.tv .next-btn { font-size: calc(var(--u) * 20); padding: calc(var(--u) * 10) calc(var(--u) * 18); border-radius: calc(var(--u) * 6); }
html.tv .next-btn svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
html.tv .next-btn.tv-focus { background: #fff; color: #000; transform: none; }
html.tv .seek { height: calc(var(--u) * 28); margin-bottom: calc(var(--u) * 14); }
html.tv .seek-track { top: calc(var(--u) * 11); height: calc(var(--u) * 6); }
html.tv .seek:focus-within .seek-track { top: calc(var(--u) * 8); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 6); }
html.tv .seek:focus-within .seek-fill { background: var(--accent); }
html.tv .seek-knob { display: none; }
html.tv .seek:focus-within .seek-knob { display: block; position: absolute; right: calc(var(--u) * -12); top: 50%; width: calc(var(--u) * 24); height: calc(var(--u) * 24); margin-top: calc(var(--u) * -12); border-radius: 50%; background: #fff; }
html.tv .player-notice { font-size: calc(var(--u) * 19); bottom: calc(var(--u) * 150); }
html.tv .player-error { font-size: calc(var(--u) * 22); }
html.tv .cast-info { font-size: calc(var(--u) * 20); }
html.tv .tracks-panel .track { font-size: calc(var(--u) * 20); }
html.tv .tracks-panel .track.tv-focus, html.tv .tracks-done.tv-focus { outline: var(--ring); outline-offset: calc(var(--u) * 3); background: rgba(255, 255, 255, .15); }

/* ---------- Sign-in, profiles, PIN ---------- */
html.tv .login-brand { font-size: calc(var(--u) * 34); }
html.tv .login-brand .brand-mark { width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
html.tv .auth-form { max-width: calc(var(--u) * 560); padding: calc(var(--u) * 50) calc(var(--u) * 60) calc(var(--u) * 40); }
html.tv .auth-form h2 { font-size: calc(var(--u) * 40); }
html.tv .auth-form .hint { font-size: calc(var(--u) * 17); }
html.tv .auth-form label { font-size: calc(var(--u) * 17); }
html.tv .auth-form label input { font-size: calc(var(--u) * 22); padding: calc(var(--u) * 16); }
html.tv .auth-form label input.tv-focus { outline: var(--ring); background: #454545; }
html.tv .profiles-box h1 { font-size: calc(var(--u) * 52); margin-bottom: calc(var(--u) * 40); }
html.tv .profile-list { gap: calc(var(--u) * 34); }
html.tv .profile { width: calc(var(--u) * 170); }
html.tv .profile .face { font-size: calc(var(--u) * 70); border-width: calc(var(--u) * 5); transition: transform .15s, border-color .15s; }
html.tv .profile .name { font-size: calc(var(--u) * 22); margin-top: calc(var(--u) * 14); }
html.tv .profile.tv-focus { color: #fff; }
html.tv .profile.tv-focus .face { border-color: #fff; transform: scale(1.08); }
html.tv .profile .lock { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
html.tv .profile-form-fields > input, html.tv .pin-row input { font-size: calc(var(--u) * 22); padding: calc(var(--u) * 12) calc(var(--u) * 16); }
html.tv .profile-form-fields > input.tv-focus, html.tv .pin-row input.tv-focus { border-color: #fff; outline: var(--ring); }
html.tv .color-picker button { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
html.tv .color-picker button.tv-focus { outline: var(--ring); outline-offset: calc(var(--u) * 3); }
html.tv .pin-box h1 { font-size: calc(var(--u) * 38); }
html.tv .pin-digits { gap: calc(var(--u) * 18); }
html.tv .pin-digits input { width: calc(var(--u) * 80); height: calc(var(--u) * 80); font-size: calc(var(--u) * 38); border-width: calc(var(--u) * 3); }
html.tv .pin-digits input.tv-focus { border-color: var(--accent); transform: scale(1.08); }
html.tv .pin-pad { display: none; }

/* ---------- Settings ---------- */
html.tv .settings { max-width: calc(var(--u) * 900); }
html.tv .set-head h2 { font-size: calc(var(--u) * 24); }
html.tv .set-desc, html.tv .set-grid { font-size: calc(var(--u) * 18); }
html.tv .set-form input.tv-focus, html.tv .set-form select.tv-focus { outline: var(--ring); }

/* "Vedi tutto" at the end of a row (added by tv.js) */
html.tv .card.tv-more { display: flex; align-items: center; justify-content: center; align-self: stretch; background: #1f1f1f; border: calc(var(--u) * 2) solid #333; color: #ddd; font-size: calc(var(--u) * 19); font-weight: 500; text-align: center; }
html.tv .card.tv-more.tv-focus { background: #fff; color: #000; }
html.tv .row-head a { display: none; }