/* X BR TOP CINE — Web Player (computador e celular) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #0A0F0B; color: #F2F4F7; overflow: hidden;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
#bg { position: fixed; inset: 0; background: #0A0F0B url("../img/bg.jpg") center / cover no-repeat; }
.screen { position: fixed; inset: 0; padding: 22px 28px; display: flex; flex-direction: column; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.muted { color: #A9B5AC; }

/* ---------- foco (teclado/controle) e mouse ---------- */
.focusable { outline: none; transition: transform .12s, box-shadow .12s, background .12s; }
.focusable:focus-visible, .tile:focus { box-shadow: 0 0 0 3px #3ADB5C; }
@media (hover: hover) {
  .tool:hover, .cat:hover, .ep:hover, .card:hover, .tab:hover, .back:hover { background: rgba(32, 58, 39, .95); }
}

/* ---------- comuns ---------- */
.input {
  display: block; width: 100%; height: 52px; margin-top: 12px; padding: 0 18px;
  background: rgba(20, 26, 23, .88); color: #F2F4F7; font-size: 17px; font-family: inherit;
  border: 2px solid transparent; border-radius: 12px; outline: none;
}
.input:focus { border-color: #3ADB5C; background: rgba(32, 58, 39, .92); }
.btn { display: block; width: 100%; height: 54px; margin-top: 18px; border-radius: 12px; background: rgba(20, 26, 23, .88); font-size: 18px; font-weight: bold; }
.btn.primary { background: #1E7A35; }
.btn.primary:hover, .btn.primary:focus { background: #25943F; }
.error { color: #FF6B6B; margin-top: 14px; min-height: 22px; white-space: pre-line; }
.msg { color: #A9B5AC; text-align: center; padding: 40px 20px; font-size: 17px; white-space: pre-line; }
.spinner {
  width: 44px; height: 44px; margin: 16px auto; border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .15); border-top-color: #3ADB5C; animation: spin .9s linear infinite;
}
.spinner.center { position: absolute; left: 50%; top: 45%; margin: -22px 0 0 -22px; z-index: 3; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(560px, 92vw); padding: 14px 20px;
  background: rgba(10, 15, 11, .96); border: 2px solid #3ADB5C; border-radius: 12px; text-align: center; z-index: 50;
}
.ico { display: inline-block; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.ico.big { width: 44px; height: 44px; display: block; margin: 0 auto 8px; }
.back {
  flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(20, 26, 23, .85) center / 26px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
}
.back.light { background-color: rgba(0, 0, 0, .55); }

/* ---------- login ---------- */
#screen-login { justify-content: center; align-items: center; overflow-y: auto; }
.login-box { width: min(440px, 100%); text-align: center; }
.login-logo { width: min(340px, 80%); height: auto; }
.sub { color: #A9B5AC; margin: 4px 0 8px; }
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 56px; }
.eye {
  position: absolute; right: 8px; top: 16px; width: 44px; height: 44px; opacity: .8;
  background: center / 24px no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A9B5AC' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}
.eye.on { opacity: 1; filter: drop-shadow(0 0 2px #3ADB5C); }

/* ---------- menu ---------- */
#screen-home { flex-direction: row; gap: 28px; align-items: stretch; }
.home-left { width: 36%; min-width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.clock { font-size: 28px; font-weight: bold; }
.exp { color: #3ADB5C; font-weight: bold; min-height: 22px; }
.exp.warn { color: #FF6B6B; }
.home-logo { width: min(380px, 90%); height: auto; margin: 14px 0; }
.toolbar { display: flex; gap: 10px; justify-content: center; }
.tool { width: 96px; height: 72px; border-radius: 12px; background: rgba(20, 26, 23, .85); font-size: 14px; }
.tool .ico { display: block; margin: 0 auto 4px; }
.notice { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); max-width: 92vw; padding: 10px 18px; border-radius: 10px; background: rgba(30, 122, 53, .92); z-index: 5; }
.home-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; padding: 10px 0; }
.tile {
  position: relative; overflow: hidden; border-radius: 16px; min-height: 120px;
  background: #141A17 center / cover no-repeat; border: 1px solid rgba(255, 255, 255, .15);
}
.tile .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.72) 50%, rgba(0,0,0,.84)); transition: opacity .15s; }
.tile .label {
  position: relative; display: block; color: #fff; font-size: clamp(18px, 2.4vw, 30px); font-weight: bold;
  text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}
.tile:hover, .tile:focus { transform: scale(1.03); }
.tile:hover .shade, .tile:focus .shade { opacity: .6; }
.tile:focus { border-color: #3ADB5C; }

/* ---------- lista ---------- */
.list-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.list-header h1 { font-size: 26px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-header .input { width: 320px; margin: 0; height: 44px; }
.list-body { flex: 1; display: flex; gap: 18px; min-height: 0; }
.cat-list { width: 290px; flex: none; overflow-y: auto; padding: 2px; }
.cat {
  display: block; width: 100%; text-align: left; padding: 13px 16px; margin-bottom: 8px;
  border-radius: 10px; background: rgba(20, 26, 23, .85); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat .count { color: #A9B5AC; font-size: 13px; margin-left: 6px; }
.cat.selected { background: rgba(30, 122, 53, .9); }
.cat.selected .count { color: #D6F5DE; }
.grid-wrap { flex: 1; position: relative; min-width: 0; min-height: 0; }
.grid-wrap.full { flex: 1; }
.grid {
  height: 100%; overflow-y: auto; padding: 4px; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.grid.posters { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.card { padding: 8px; border-radius: 12px; background: rgba(20, 26, 23, .85); text-align: center; position: relative; }
.card:focus { background: rgba(32, 58, 39, .95); }
.card .thumb { width: 100%; aspect-ratio: 16 / 10; background: #1A221D center / contain no-repeat; border-radius: 8px; }
.card.poster .thumb { aspect-ratio: 2 / 3; background-size: cover; }
.card .name {
  margin-top: 6px; font-size: 14px; line-height: 19px; height: 38px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card .star {
  position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #FFFFFF; font-size: 18px; line-height: 34px; opacity: .75;
}
.card .star.on { color: #FFC93C; opacity: 1; }
.search-tabs { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.tab { padding: 10px 20px; border-radius: 30px; background: rgba(20, 26, 23, .85); font-size: 15px; }
.tab.active { background: #1E7A35; }

/* ---------- episódios ---------- */
#screen-episodes .msg { position: relative; }
.ep-list { flex: 1; overflow-y: auto; padding: 2px; }
.ep { display: block; width: 100%; text-align: left; padding: 15px 18px; margin-bottom: 8px; border-radius: 10px; background: rgba(20, 26, 23, .85); font-size: 16px; }

/* ---------- player ---------- */
#screen-player { padding: 0; background: #000; }
#video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.osd {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 40px; background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0)); z-index: 4;
}
.osd-text { flex: 1; min-width: 0; }
.osd-name { font-size: 22px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osd-epg { font-size: 15px; color: #DDE5DF; margin-top: 4px; line-height: 1.4; white-space: pre-line; }
.osd-actions { display: flex; gap: 8px; }
.osd-btn { width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 0, 0, .55); font-size: 18px; }
.osd-btn:hover { background: rgba(30, 122, 53, .9); }
#osd-fav.on { color: #FFC93C; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .screen { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  #screen-home { flex-direction: column; gap: 10px; overflow-y: auto; }
  .home-left { width: 100%; min-width: 0; }
  .clock { font-size: 20px; }
  .home-logo { width: 200px; margin: 6px 0; }
  .home-grid { flex: none; grid-template-rows: none; grid-auto-rows: 120px; gap: 10px; }
  .tool { width: 84px; height: 62px; font-size: 13px; }
  .list-header h1 { font-size: 20px; }
  .list-header .input { width: 100%; order: 3; }
  .list-body { flex-direction: column; gap: 10px; }
  .cat-list { width: 100%; flex: none; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .cat { width: auto; flex: none; margin: 0; padding: 10px 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .grid.posters { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .card { padding: 6px; }
  .card .name { font-size: 12px; line-height: 16px; height: 32px; }
  .osd-name { font-size: 17px; }
}

/* ícones (os mesmos do app da TV) */
.ico-search{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M15.5%2C14h-0.79l-0.28%2C-0.27C15.41%2C12.59%2016%2C11.11%2016%2C9.5%2016%2C5.91%2013.09%2C3%209.5%2C3S3%2C5.91%203%2C9.5%205.91%2C16%209.5%2C16c1.61%2C0%203.09%2C-0.59%204.23%2C-1.57l0.27%2C0.28v0.79l5%2C4.99L20.49%2C19l-4.99%2C-5zM9.5%2C14C7.01%2C14%205%2C11.99%205%2C9.5S7.01%2C5%209.5%2C5%2014%2C7.01%2014%2C9.5%2011.99%2C14%209.5%2C14z%27/%3E%3C/svg%3E");}
.ico-refresh{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M17.65%2C6.35C16.2%2C4.9%2014.21%2C4%2012%2C4c-4.42%2C0%20-7.99%2C3.58%20-7.99%2C8s3.57%2C8%207.99%2C8c3.73%2C0%206.84%2C-2.55%207.73%2C-6h-2.08c-0.82%2C2.33%20-3.04%2C4%20-5.65%2C4%20-3.31%2C0%20-6%2C-2.69%20-6%2C-6s2.69%2C-6%206%2C-6c1.66%2C0%203.14%2C0.69%204.22%2C1.78L13%2C11h7V4l-2.35%2C2.35z%27/%3E%3C/svg%3E");}
.ico-logout{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M17%2C7l-1.41%2C1.41L18.17%2C11H8v2h10.17l-2.58%2C2.58L17%2C17l5%2C-5zM4%2C5h8V3H4c-1.1%2C0%20-2%2C0.9%20-2%2C2v14c0%2C1.1%200.9%2C2%202%2C2h8v-2H4V5z%27/%3E%3C/svg%3E");}
.ico-live{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M21%2C6h-7.59l3.29%2C-3.29L16%2C2l-4%2C4%20-4%2C-4%20-0.71%2C0.71L10.59%2C6H3c-1.1%2C0%20-2%2C0.89%20-2%2C2v12c0%2C1.1%200.9%2C2%202%2C2h18c1.1%2C0%202%2C-0.9%202%2C-2V8c0%2C-1.11%20-0.9%2C-2%20-2%2C-2zM21%2C20H3V8h18v12zM9%2C10v8l7%2C-4z%27/%3E%3C/svg%3E");}
.ico-movie{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M18%2C4l2%2C4h-3l-2%2C-4h-2l2%2C4h-3l-2%2C-4H8l2%2C4H7L5%2C4H4c-1.1%2C0%20-1.99%2C0.9%20-1.99%2C2L2%2C18c0%2C1.1%200.9%2C2%202%2C2h16c1.1%2C0%202%2C-0.9%202%2C-2V4h-4z%27/%3E%3C/svg%3E");}
.ico-series{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23FFFFFF%27%20d%3D%27M4%2C6H2v14c0%2C1.1%200.9%2C2%202%2C2h14v-2H4V6zM20%2C2H8c-1.1%2C0%20-2%2C0.9%20-2%2C2v12c0%2C1.1%200.9%2C2%202%2C2h12c1.1%2C0%202%2C-0.9%202%2C-2V4c0%2C-1.1%20-0.9%2C-2%20-2%2C-2zM12%2C14.5v-9l6%2C4.5%20-6%2C4.5z%27/%3E%3C/svg%3E");}
.ico-star{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23FFC93C%27%20d%3D%27M12%2C17.27L18.18%2C21l-1.64%2C-7.03L22%2C9.24l-7.19%2C-0.61L12%2C2%209.19%2C8.63%202%2C9.24l5.46%2C5.73L5.82%2C21z%27/%3E%3C/svg%3E");}

.player-error {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, 92vw);
  padding: 18px 22px; border-radius: 12px; background: rgba(10, 15, 11, .92); border: 2px solid #FF6B6B;
  text-align: center; white-space: pre-line; line-height: 1.5; z-index: 5; pointer-events: none;
}