/* НОВ ИЗГЛЕД · R1 (10.10.2026 · claude/HOME-UI-1-plan.md)
 * ⚠ EXPERIMENTAL, само по изричен адрес: /nov/nachalo.html. Нищо от
 * production не зарежда този файл; махането на папката public/nov/ е целият
 * rollback. Цветовете са „Aero Noir" от платното (claude/HOME-UI-0). */
:root{
  --ink:#070B14; --s1:#0E1628; --s2:#111A2E; --s3:#172440;
  --t1:#EAF1FF; --t2:#A9B8D6; --t3:#8FA6CF; --line:rgba(150,185,255,.18);
  --ok:#3DDC97; --busy:#6CB6FF; --warn:#F5B841; --err:#FF6B6B; --idle:#7F90B3;
  --home:#6CB6FF; --kino:#E5484D; --igri:#B8F23A; --ps2:#5B8DFF; --pc:#39D5E6;
  --srv:#3DDC97; --mash:#A78BFA; --port:#F2C14E;
  --f-ui:"Onest","Segoe UI",system-ui,sans-serif;
  --f-disp:"Unbounded","Onest","Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body.nov-body{background:radial-gradient(1200px 600px at 40% -10%,rgba(70,120,210,.22),transparent 60%),var(--ink);
  color:var(--t1);font-family:var(--f-ui);font-size:15px;line-height:1.4}
a{color:inherit}
button{font:inherit;color:inherit}
.nov-wrap{padding:10px 24px 24px;max-width:1920px;margin:0 auto}

/* ── Началото ─────────────────────────────────────────────────────── */
.h-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:16px}
.h-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.h-aside{display:flex;flex-direction:column;gap:12px}
.card{border-radius:16px;background:var(--s1);border:1px solid var(--line);padding:14px}
.card h2{margin:0 0 8px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline}
.card h2 small{font-weight:500;color:var(--t3);font-size:12px}
.empty{color:var(--t3);font-size:13px;padding:4px 0}

.kino{position:relative;display:flex;height:540px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(229,72,77,.25);background:#0A0B10}
.kino-hero{position:relative;flex:1;min-width:0;background-size:cover;background-position:center}
.kino-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,16,.96) 0%,
  rgba(10,11,16,.7) 38%,rgba(10,11,16,.1) 75%),linear-gradient(0deg,#0A0B10 0%,rgba(10,11,16,0) 55%)}
.kino-in{position:relative;padding:22px 28px;display:flex;flex-direction:column;gap:12px;height:100%}
.kino-head{display:flex;align-items:baseline;gap:12px}
.kino-head b{font:700 20px var(--f-disp)}
.kino-head span{font-size:13px;color:#C9CFDD}
.kino-tag{margin-top:48px;font-size:13px;font-weight:700;letter-spacing:.18em;color:#FF8A92}
.kino-title{font:700 62px/.95 var(--f-disp);max-width:640px;text-shadow:0 6px 30px rgba(0,0,0,.5);text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* HOME-LOGO · логото от TMDB вместо името с букви */
.kino-title.лого{display:block;-webkit-line-clamp:unset;overflow:visible;text-shadow:none}
.kino-title.лого img{display:block;width:auto;height:auto;max-width:min(520px,100%);max-height:112px;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 6px 24px rgba(0,0,0,.55))}
.kino-sub{font-size:16px;color:#D6DBE7}
/* дъска 10 · „Ново в Кино" — 7 широки карти долу в картината */
.kino-new{position:absolute;left:28px;right:24px;bottom:20px;display:flex;flex-direction:column;gap:8px}
.kn-h{font-size:15px;font-weight:700}.kn-h span{font-weight:500;font-size:13px;color:#A6AEC0}
.kn-row{display:flex;gap:8px;overflow:hidden}
.kn{position:relative;flex:none;width:196px;height:110px;border-radius:6px;background:#1B2944 center/cover;text-decoration:none;color:#fff}
.kn:hover{outline:2px solid rgba(255,255,255,.7)}
/* 10.10 · някои кадри от TMDB са на бял фон (Kingsman, Extraction) — името не се четеше; тъмно отдолу като на дъската */
.kn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 35%,rgba(6,12,24,.88));pointer-events:none}
.kn b,.kn span{z-index:1}
.kn b{position:absolute;left:8px;top:8px;font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;background:#E5484D}
.kn span{position:absolute;left:10px;right:10px;bottom:8px;font-size:13px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kino-btns{display:flex;gap:10px;margin-top:6px}
.btn-w{height:50px;padding:0 26px;border-radius:8px;border:0;background:#fff;color:#000;font-weight:700;font-size:17px;
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.btn-g{height:50px;padding:0 22px;border-radius:8px;background:rgba(109,109,110,.7);color:#fff;font-weight:700;
  font-size:16px;display:inline-flex;align-items:center;text-decoration:none}
.kino-watch{flex:none;width:400px;border-left:1px solid rgba(255,255,255,.08);background:rgba(16,17,24,.92);
  padding:18px;display:flex;flex-direction:column;gap:10px}
.kino-watch[hidden]{display:none}
.kw-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.kw-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#FF9AA0;font-weight:500}
.kw-live i{width:8px;height:8px;border-radius:50%;background:var(--kino);box-shadow:0 0 8px var(--kino)}
.kw{display:flex;gap:12px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.kw-img{flex:none;width:70px;height:105px;border-radius:6px;background:#222 center/cover}
.kw-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kw-t{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-who{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:2px}
.kw-who i{width:22px;height:22px;border-radius:50%;background:#A78BFA;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;color:#06121F}
.kw-s{font-size:12px;color:#A6AEC0}
.kw-bar{margin-top:auto;height:4px;border-radius:2px;background:rgba(255,255,255,.15)}
.kw-bar i{display:block;height:4px;border-radius:2px;background:var(--kino)}
.kw-more{font-size:12px;color:#7E8598}
/* HOME-JOIN · „Гледай с …“ в картата на „Гледат сега“ */
.kw-join{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;background:#fff;color:#141414;font-size:13px;font-weight:700;text-decoration:none}
.kw-join:hover{background:#dcdcdc}
.kw-join:focus-visible{outline:3px solid #7CC4FF;outline-offset:2px}

/* дъска 10: PS2 620 px · три плочки по ~290 px, височина 356 px */
.h-row{display:grid;grid-template-columns:minmax(0,620fr) repeat(3,minmax(0,290fr));gap:14px}
.h-row > .ps2{margin-right:6px}
.tile{display:flex;flex-direction:column;gap:10px;height:356px;border-radius:20px;padding:18px;text-decoration:none;color:var(--t1);
  background:linear-gradient(160deg,var(--tbg,transparent),var(--s1) 60%);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--c)}
.tile:hover{border-color:var(--c)}
.tile-h{display:flex;justify-content:space-between;align-items:center}
.tile-h b{font:600 17px var(--f-disp)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#C8D4EA}
.st i{width:7px;height:7px;border-radius:50%;background:var(--d,var(--idle))}
.tile-art{flex:1;min-height:110px;border-radius:12px;background:var(--s3) center/cover}
.tile-l1{font-weight:700;font-size:15px}
.tile-l2{font-size:13px;color:var(--t2)}
.ps2{background:linear-gradient(160deg,rgba(43,91,214,.32),var(--s1) 60%);border-top-color:var(--ps2)}
.ps2-r{flex:1;display:flex;gap:14px;min-height:0;align-items:center;padding:10px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(169,196,255,.15);text-decoration:none}
.ps2-r.on{background:rgba(91,141,255,.14);border-color:rgba(157,185,255,.4)}
/* HOME-PS2 · всеки ред е врата към своята стая */
.ps2-r[data-href]{cursor:pointer;transition:background .15s,border-color .15s}
.ps2-r[data-href]:hover{background:rgba(91,141,255,.2);border-color:rgba(157,185,255,.55)}
.ps2-r[data-href]:focus-visible{outline:3px solid #7CC4FF;outline-offset:2px}
.ps2-go{margin-left:auto;flex:none;align-self:center;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.1);font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.ps2-r.on .ps2-go{background:#fff;color:#0B1530}
.ps2-cov{flex:none;width:80px;height:112px;border-radius:4px;background:var(--s3) center/cover;
  border:1px dashed rgba(169,196,255,.35)}
.ps2-r.on .ps2-cov{border:1px solid rgba(255,255,255,.25)}
.ps2-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.ps2-n{font-weight:700;font-size:14px;color:#A9C4FF;display:flex;align-items:center;gap:8px}
.ps2-p{font-size:13px;color:#C8D4EA}
.ps2-g{font:700 18px var(--f-disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* HOME-PS3 (12.10) · плочката с три колони (PS2 · Стая 1 · PS2 · Стая 2 · PS3 стая); броят колони се слага от nachalo.html */
.ps2-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1;min-height:0}
.ps2-3 > .empty{grid-column:1/-1;align-self:center}
.ps2-3 .ps2-r{flex-direction:column;align-items:stretch;gap:9px;padding:12px;min-width:0}
.ps2-3 .ps2-n{flex-wrap:wrap;gap:4px 8px;font-size:13px}
.ps2-3 .ps2-cov{width:72px;height:100px;align-self:center;display:flex;align-items:center;justify-content:center}
.ps2-3 .ps2-cov b{font:700 15px var(--f-disp);letter-spacing:.06em;color:rgba(169,196,255,.55)}
.ps2-3 .ps2-tx{gap:3px}
.ps2-3 .ps2-g{font-size:16px}
.ps2-3 .ps2-p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps2-3 .ps2-go{margin:auto 0 0;text-align:center}
/* HOME-PS3-2 (12.10) · ⚠ ОБЪРНАТ РЕД · беше: името на играта на един ред с „…" („Ratchet & Cla…"). Сега до два реда, малко
   по-малко; цялото име е в title на колоната. */
.ps2-3 .ps2-g{font-size:15px;line-height:1.2;white-space:normal;overflow:hidden;text-overflow:clip;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.ps2-3 .ps2-под{font-size:12.5px;font-weight:600;line-height:1.25;color:#C8D4EA;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* PS3 · иконата на играта е хоризонтална (ICON0 320×176) → рамката е хоризонтална; отзад — същата икона, размита */
.ps2-3 .ps2-r{position:relative;overflow:hidden}
.ps2-3 .ps2-r > *{position:relative}
.ps2-3 .ps2-r > .ps2-бг{position:absolute;inset:-24px;background:center/cover no-repeat;filter:blur(18px) saturate(1.2);opacity:.38;pointer-events:none}
.ps2-3 .ps2-r.ik .ps2-cov{width:100%;max-width:168px;height:auto;aspect-ratio:320/176;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.5)}

.ppl{display:flex;align-items:center;gap:10px;padding:5px 0}
.ppl-av{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--s3);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.ppl-av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--d,var(--idle));border:2px solid var(--s1)}
.ppl-tx{display:flex;flex-direction:column;min-width:0}
.ppl-tx b{font-size:13px;font-weight:600}
.ppl-tx span{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt{display:grid;grid-template-columns:52px 1fr 64px;align-items:center;gap:8px;padding:3px 0}
.mt span{font-size:12px;color:#C8D4EA}
.mt em{font:normal 11px var(--f-mono);text-align:right}
.mt div{height:6px;border-radius:3px;background:#1B2944}
.mt div i{display:block;height:6px;border-radius:3px;background:var(--mash)}

@media (max-width:1280px){
  .h-grid{grid-template-columns:1fr}
  .h-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kino{flex-direction:column}
  .kino-watch{width:auto;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
}

/* дъска 10 · дясната колона стига до долу; „Последно в Хъба" поема остатъка */
.h-aside .feed{flex:1;min-height:0;overflow:hidden}
.mash{border-color:rgba(167,139,250,.24)}
.fd{display:grid;grid-template-columns:8px 1fr;gap:8px;align-items:start;padding:5px 0}
.fd i{width:7px;height:7px;margin-top:6px;border-radius:50%}
.fd span{font-size:12px;line-height:1.45;color:#D2DDF2}.fd em{font:normal 12px var(--f-mono);color:#8FA6CF}
.tile-art.игра{background-size:cover;background-position:center}
@media (min-width:1281px){ .h-aside{height:916px} }   /* = 540 (Кино) + 20 + 356 (плочките) — колоната свършва с плочките, както на дъската */
/* HOME-REQ (10.10 · Николай: „бутонът горе със заявките е счупен") · менютата на шапката (chrome.css) четат --panel / --line /
   --ink / --accent от темата на хъба; тук ги няма → прозрачен фон и бутони на браузъра. Същият вид, със стойности за Началото. */
.appbar .machmenu{background:#151B26;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 22px 60px rgba(0,0,0,.65);color:#E9ECF2}
.appbar .machmenu .mmhead{color:#8C95A8;border-bottom:1px solid rgba(255,255,255,.1)}
.appbar .machmenu .mmhead span{color:#B8C0D0}
.appbar .machmenu .mmi{color:#E9ECF2}
.appbar .machmenu .mmi:hover{background:rgba(255,255,255,.08)}
.appbar .reqmenu{z-index:200}
.appbar .reqrow{border-bottom:1px solid rgba(255,255,255,.08)}
.appbar .copybtn{font-family:inherit;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:6px;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#E9ECF2}
.appbar .copybtn:hover{background:rgba(255,255,255,.16)}
.appbar .copybtn.danger{color:#FF8A80;border-color:rgba(255,138,128,.4)}
.appbar .copybtn.danger:hover{background:rgba(255,138,128,.12)}
.appbar .copybtn.done{background:#3FB46B;color:#fff;border-color:transparent}
