:root{
    --bg:            #12140F;
    --bg-panel:      #1B1E16;
    --bg-panel-2:    #21251B;
    --line:          #3A3F2E;
    --line-dim:      #2A2E22;
    --olive:         #6E7A4F;
    --olive-bright:  #9CAD6A;
    --amber:         #E8A33D;
    --amber-dim:     #A9762C;
    --red:           #C1462F;
    --green:         #4F9D5C;
    --bone:          #E9E5D6;
    --bone-dim:      #ACA995;
    --mono-dim:      #6B6F5C;

    --f-display: 'Big Shoulders Display', sans-serif;
    --f-head:    'Oswald', sans-serif;
    --f-mono:    'JetBrains Mono', monospace;
    --f-body:    'Barlow', sans-serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--bone);
    font-family:var(--f-body);
    line-height:1.55;
    overflow-x:hidden;
  }

  /* subtle vertical scan texture */
  body::before{
    content:'';
    position:fixed; inset:0;
    pointer-events:none;
    z-index:999;
    background:repeating-linear-gradient(180deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 3px);
    opacity:.35;
    mix-blend-mode:overlay;
  }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  ul{ list-style:none; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

  .eyebrow{
    font-family:var(--f-mono);
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--amber);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:8px; height:8px;
    background:var(--amber);
    display:inline-block;
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  }

  h1,h2,h3{ font-family:var(--f-display); font-weight:900; letter-spacing:.01em; text-transform:uppercase; color:var(--bone); }

  .btn{
    font-family:var(--f-head);
    font-weight:600;
    font-size:14px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:14px 26px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--amber);
    color:var(--bg);
    background:var(--amber);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .btn:hover{ background:var(--bone); transform:translateY(-2px); }
  .btn.ghost{
    background:transparent;
    color:var(--bone);
    border-color:var(--line);
  }
  .btn.ghost:hover{ border-color:var(--amber); color:var(--amber); background:transparent; }

  /* ===== TOP STATUS BAR ===== */
  .statusbar{
    background:var(--bg-panel);
    border-bottom:1px solid var(--line-dim);
    font-family:var(--f-mono);
    font-size:11px;
    letter-spacing:.05em;
    color:var(--mono-dim);
  }
  .statusbar .wrap{
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 28px;
    flex-wrap:wrap;
    gap:8px 20px;
  }
  .statusbar .seg{ display:flex; gap:22px; flex-wrap:wrap; }
  .statusbar .live{
    color:var(--red); font-weight:700; display:flex; align-items:center; gap:6px;
  }
  .live-dot{
    width:7px; height:7px; border-radius:50%; background:var(--mono-dim);
  }
  .live-dot.is-online{ background:var(--green); animation:pulse 1.6s ease-in-out infinite; }
  .live-dot.is-offline{ background:var(--red); }
  .statusbar .live.is-online{ color:var(--green); }
  .statusbar .live.is-offline{ color:var(--red); }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

  /* ===== HEADER / NAV ===== */
  header.site{
    position:sticky; top:0; z-index:100;
    background:rgba(18,20,15,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line-dim);
  }
  header.site .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
  }
  .logo{
    font-family:var(--f-display);
    font-weight:900;
    font-size:26px;
    letter-spacing:.03em;
    display:flex; align-items:baseline; gap:8px;
  }
  .logo span{ color:var(--amber); }
  nav.main ul{ display:flex; gap:30px; }
  nav.main a{
    font-family:var(--f-head);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--bone-dim);
    position:relative;
    padding:4px 0;
  }
  nav.main a:hover{ color:var(--amber); }
  .nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--bone); font-family:var(--f-mono); font-size:12px; padding:8px 12px; }

  @media (max-width: 900px){
    nav.main{
      position:absolute; top:100%; left:0; right:0;
      background:var(--bg-panel);
      border-bottom:1px solid var(--line);
      max-height:0; overflow:hidden;
      transition:max-height .25s ease;
    }
    nav.main.open{ max-height:420px; }
    nav.main ul{ flex-direction:column; padding:14px 28px; gap:0; }
    nav.main a{ display:block; padding:12px 0; border-bottom:1px solid var(--line-dim); }
    .nav-toggle{ display:block; }
  }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    padding:100px 0 90px;
    border-bottom:1px solid var(--line-dim);
    background:
      radial-gradient(ellipse 900px 500px at 85% -10%, rgba(110,122,79,.28), transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, #0F110C 100%);
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:60px;
    align-items:center;
  }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

  .hero h1{
    font-size:clamp(52px, 8vw, 108px);
    line-height:.92;
    margin:16px 0 22px;
  }
  .hero h1 em{
    font-style:normal;
    color:transparent;
    -webkit-text-stroke:2px var(--amber);
  }
  .hero p.lead{
    font-size:18px;
    color:var(--bone-dim);
    max-width:46ch;
    margin-bottom:34px;
  }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }

  .hero-radar{
    position:absolute;
    top:0; right:0;
    width:640px;
    max-width:46vw;
    height:100%;
    pointer-events:none;
    opacity:.85;
    z-index:0;
  }
  .hero-radar svg{ width:100%; height:100%; display:block; }

  /* ----- "loot" gasit de radar — iconite originale, nu asset-uri de joc ----- */
  .radar-loot{ position:absolute; inset:0; pointer-events:none; }
  .loot-ping{
    position:absolute;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    opacity:0;
    transform:translate(-50%,-50%) scale(.6);
    animation:lootAppear 3.4s ease-in-out forwards;
  }
  .loot-ping .icon{
    width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 0 6px rgba(232,163,61,.7));
  }
  .loot-ping .icon svg{ width:100%; height:100%; }
  .loot-ping .label{
    font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--amber); white-space:nowrap;
    background:rgba(10,11,8,.65); padding:2px 6px;
  }
  .loot-ping .ring{
    position:absolute; top:13px; left:13px;
    width:26px; height:26px; margin:-13px 0 0 -13px;
    border:1px solid var(--amber); border-radius:50%;
    animation:lootRing 3.4s ease-out forwards;
  }
  @keyframes lootAppear{
    0%{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
    12%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
    78%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(.85); }
  }
  @keyframes lootRing{
    0%{ transform:scale(.4); opacity:.9; }
    70%{ opacity:0; }
    100%{ transform:scale(2.6); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .loot-ping{ animation:none; opacity:0; }
  }
  .radar-ring{ fill:none; stroke:var(--olive); opacity:.5; }
  .radar-ring.dashed{ stroke:var(--line); stroke-dasharray:4 6; opacity:.6; }
  .radar-axis{ stroke:var(--line-dim); stroke-width:1; }
  .radar-star{ fill:var(--bone); }
  .radar-blip{ fill:var(--amber); }
  .radar-blip-glow{
    fill:none; stroke:var(--amber); stroke-width:1.5;
    transform-origin:center;
    transform-box:fill-box;
    animation:radarPing 2.4s ease-out infinite;
  }
  @keyframes radarPing{
    0%{ transform:scale(1); opacity:.8; }
    100%{ transform:scale(3.2); opacity:0; }
  }
  @media (max-width:900px){ .hero-radar{ display:none; } }
  @media (prefers-reduced-motion: reduce){
    .radar-sweep{ display:none; }
    .radar-blip-glow{ animation:none; opacity:.25; }
  }
    margin-top:40px;
    display:flex; gap:10px; flex-wrap:wrap;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--olive-bright);
  }
  .hero-tags span{
    border:1px solid var(--line); padding:6px 12px;
    text-transform:uppercase;
  }

  .hero-panel{
    background:var(--bg-panel);
    border:1px solid var(--line);
    padding:26px;
    position:relative;
  }
  .hero-panel::before{
    content:'DOSAR OPERATOR';
    position:absolute; top:-11px; left:20px;
    background:var(--bg);
    padding:0 8px;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--amber);
  }
  .stat-row{
    display:flex; justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--line-dim);
    font-family:var(--f-mono); font-size:13px;
  }
  .stat-row:last-child{ border-bottom:none; }
  .stat-row .k{ color:var(--mono-dim); text-transform:uppercase; letter-spacing:.06em; }
  .stat-row .v{ color:var(--bone); font-weight:700; }

  /* ===== SECTION SHELL ===== */
  section{ padding:90px 0; border-bottom:1px solid var(--line-dim); }
  .sec-head{ margin-bottom:46px; max-width:60ch; }
  .sec-head h2{ font-size:clamp(34px,5vw,52px); margin-top:12px; }
  .sec-head p{ color:var(--bone-dim); margin-top:14px; font-size:16px; }

  /* ===== LIVE PLAYER ===== */
  .live-player-section{ background:linear-gradient(180deg, #171A11 0%, var(--bg) 100%); }
  .live-player-section[hidden]{ display:none; }
  .live-player-eyebrow{ display:flex; align-items:center; gap:10px; }
  .live-player-eyebrow::before{ display:none; }
  .live-player-eyebrow .live-dot{ width:8px; height:8px; }

  .live-player-grid{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:2px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .live-player-grid{ grid-template-columns:1fr; } }

  .live-player-frame{ aspect-ratio:16/9; background:#000; }
  .live-player-frame iframe{ display:block; }
  .live-chat-frame{ background:var(--bg-panel); min-height:340px; }
  @media (max-width:900px){ .live-chat-frame{ height:420px; } }
  .live-chat-frame iframe{ display:block; }

  /* ===== DESPRE ===== */
  .about-grid{
    display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start;
  }
  @media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
  .about-grid .frame{
    aspect-ratio:1/1;
    background:var(--bg-panel);
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  .about-grid .frame img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center center;
    filter:grayscale(45%) contrast(1.15) brightness(.88);
    transform:scale(1);
    transition:filter .5s ease, transform .5s ease;
  }
  .about-grid .frame:hover img{
    filter:grayscale(10%) contrast(1.05) brightness(.98);
    transform:scale(1.04);
  }

  /* ----- ilustratie animata (inlocuieste poza) ----- */
  .frame-anim{ background:radial-gradient(ellipse at 50% 30%, #1E2216 0%, #12140F 70%); }
  .anim-bg{
    position:absolute; inset:0;
    background:repeating-linear-gradient(115deg, rgba(110,122,79,.06) 0px, rgba(110,122,79,.06) 2px, transparent 2px, transparent 22px);
  }
  .anim-particles{ position:absolute; inset:0; pointer-events:none; }
  .anim-particles span{
    position:absolute;
    width:4px; height:4px;
    background:var(--amber);
    border-radius:50%;
    opacity:.7;
    animation:floatParticle 7s ease-in-out infinite;
  }
  .anim-particles span:nth-child(1){ left:14%; top:70%; animation-delay:0s; }
  .anim-particles span:nth-child(2){ left:82%; top:30%; animation-delay:1.1s; background:var(--olive-bright); }
  .anim-particles span:nth-child(3){ left:24%; top:20%; animation-delay:2.3s; }
  .anim-particles span:nth-child(4){ left:70%; top:75%; animation-delay:3.4s; background:var(--olive-bright); }
  .anim-particles span:nth-child(5){ left:50%; top:12%; animation-delay:4.2s; }
  .anim-particles span:nth-child(6){ left:90%; top:60%; animation-delay:5.1s; background:var(--olive-bright); }
  @keyframes floatParticle{
    0%, 100%{ transform:translateY(0) scale(1); opacity:.2; }
    50%{ transform:translateY(-18px) scale(1.4); opacity:.85; }
  }

  .anim-figure{
    position:absolute; left:50%; top:50%;
    width:78%; height:78%;
    transform:translate(-50%,-50%);
    animation:breathe 4.5s ease-in-out infinite;
    transform-origin:50% 65%;
  }
  @keyframes breathe{
    0%, 100%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-49%) scale(1.015); }
  }
  .anim-glow{ animation:glowPulse 3s ease-in-out infinite; transform-origin:150px 115px; }
  @keyframes glowPulse{
    0%, 100%{ opacity:.7; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.08); }
  }
  .anim-headset-glow{ animation:headsetPulse 2.2s ease-in-out infinite; }
  .anim-twitch-badge{ animation:twitchPulse 2.8s ease-in-out infinite; transform-origin:150px 215px; }
  @keyframes twitchPulse{
    0%, 100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.06); opacity:.88; }
  }
  @keyframes headsetPulse{
    0%, 100%{ stroke:#E8A33D; }
    50%{ stroke:#9CAD6A; }
  }
  .anim-blink{ animation:visorBlink 3.6s ease-in-out infinite; }
  .anim-blink-delay{ animation-delay:.15s; }
  @keyframes visorBlink{
    0%, 92%, 100%{ opacity:1; }
    96%{ opacity:.15; }
  }
  .anim-hand-l{ animation:handTiltL 5s ease-in-out infinite; transform-origin:71px 200px; }
  .anim-hand-r{ animation:handTiltR 5s ease-in-out infinite; transform-origin:229px 200px; }
  @keyframes handTiltL{
    0%, 100%{ transform:rotate(0deg) translateY(0); }
    50%{ transform:rotate(-3deg) translateY(-3px); }
  }
  @keyframes handTiltR{
    0%, 100%{ transform:rotate(0deg) translateY(0); }
    50%{ transform:rotate(3deg) translateY(-3px); }
  }

  /* rotating HUD rings around the whole scene */
  .anim-hud-ring{ animation:hudSpin 22s linear infinite; transform-origin:150px 150px; }
  .anim-hud-ring-rev{ animation:hudSpinRev 16s linear infinite; transform-origin:150px 150px; }
  @keyframes hudSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  @keyframes hudSpinRev{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }

  /* orbiting scan markers around the head */
  .anim-orbit-a{ animation:orbitA 6s linear infinite; transform-origin:150px 104px; }
  .anim-orbit-b{ animation:orbitB 9s linear infinite; transform-origin:150px 104px; }
  @keyframes orbitA{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  @keyframes orbitB{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }

  /* small equalizer bars near the headset, like an active mic */
  .eq-bar{ transform-origin:bottom center; animation:eqPulse 1.1s ease-in-out infinite; }
  .eq-bar-1{ animation-delay:0s; }
  .eq-bar-2{ animation-delay:.18s; }
  .eq-bar-3{ animation-delay:.34s; }
  .eq-bar-4{ animation-delay:.5s; }
  @keyframes eqPulse{
    0%, 100%{ transform:scaleY(.4); opacity:.65; }
    50%{ transform:scaleY(1); opacity:1; }
  }

  /* subtle 3D parallax tilt on mouse move (see js/about-figure.js) */
  .frame-anim{ perspective:700px; }
  .anim-scene{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .2s ease-out; will-change:transform; }

  @media (prefers-reduced-motion: reduce){
    .anim-particles span, .anim-figure, .anim-glow, .anim-headset-glow, .anim-blink, .anim-hand-l, .anim-hand-r,
    .anim-twitch-badge, .anim-hud-ring, .anim-hud-ring-rev, .anim-orbit-a, .anim-orbit-b, .eq-bar{ animation:none; }
  }

  .about-grid .frame .corner{
    position:absolute; width:22px; height:22px;
    border-color:var(--amber); pointer-events:none;
    opacity:.85;
  }
  .about-grid .frame .corner.tl{ top:14px; left:14px; border-top:2px solid; border-left:2px solid; }
  .about-grid .frame .corner.tr{ top:14px; right:14px; border-top:2px solid; border-right:2px solid; }
  .about-grid .frame .corner.bl{ bottom:14px; left:14px; border-bottom:2px solid; border-left:2px solid; }
  .about-grid .frame .corner.br{ bottom:14px; right:14px; border-bottom:2px solid; border-right:2px solid; }
  .about-grid .frame .idtag{
    position:absolute; top:14px; left:44px;
    font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--amber);
    text-transform:uppercase;
  }
  .about-grid .frame::before{
    content:'25+ ANI ÎN GAMING';
    position:absolute; bottom:16px; left:16px;
    font-family:var(--f-mono); font-size:11px; color:var(--amber); letter-spacing:.08em;
    z-index:2;
  }
  .about-copy p{ margin-bottom:18px; color:var(--bone-dim); font-size:16px; }
  .about-copy strong{ color:var(--bone); }

  .timeline{ margin-top:30px; display:flex; flex-direction:column; gap:0; }
  .timeline li{
    display:grid; grid-template-columns:120px 1fr; gap:20px;
    padding:16px 0; border-top:1px solid var(--line-dim);
    font-size:14px;
  }
  .timeline li:last-child{ border-bottom:1px solid var(--line-dim); }
  .timeline .tag{ font-family:var(--f-mono); color:var(--amber); font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
  .timeline .desc{ color:var(--bone-dim); }

  /* ===== PROGRAM ===== */
  .schedule-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:2px;
    background:var(--line-dim);
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .schedule-grid{ grid-template-columns:repeat(4, 1fr); } }
  @media (max-width:560px){ .schedule-grid{ grid-template-columns:repeat(2, 1fr); } }

  .sched-day{
    background:var(--bg-panel);
    padding:22px 16px;
    display:flex; flex-direction:column; gap:10px;
    border-top:2px solid var(--olive);
  }
  .sched-day.is-weekend{ border-top-color:var(--line); }
  .sched-day .d{
    font-family:var(--f-head); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim);
  }
  .sched-day .t{
    font-family:var(--f-mono); font-size:14px; color:var(--bone); font-weight:700;
  }
  .sched-day.is-weekend .t{ color:var(--mono-dim); font-weight:500; }

  /* ===== STASH / SETUP GRID (signature element) ===== */
  .stash-toolbar{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    margin-bottom:24px;
    font-family:var(--f-mono); font-size:12px; color:var(--mono-dim); letter-spacing:.05em;
  }
  .stash-toolbar .slots{ color:var(--olive-bright); }

  .stash{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2px;
    background:var(--line-dim);
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .stash{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .stash{ grid-template-columns:1fr; } }

  .item{
    background:var(--bg-panel);
    padding:20px;
    min-height:150px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative;
    border-left:3px solid var(--tier, var(--olive));
    transition:background .15s ease, transform .15s ease;
  }
  .item:hover{ background:var(--bg-panel-2); transform:translateY(-2px); }
  .item .row1{ display:flex; justify-content:space-between; align-items:flex-start; }
  .item .cat{
    font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--tier, var(--olive-bright));
  }
  .item .rarity{
    width:9px; height:9px;
    background:var(--tier, var(--olive));
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
    flex:none;
  }
  .item .name{ font-family:var(--f-head); font-size:15px; font-weight:600; color:var(--bone); margin-top:10px; line-height:1.3; }
  .item .spec{ font-family:var(--f-mono); font-size:11px; color:var(--bone-dim); margin-top:6px; }

  /* ===== LINKS / SOCIAL ===== */
  .link-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-dim); border:1px solid var(--line); }
  @media (max-width:800px){ .link-grid{ grid-template-columns:repeat(2,1fr); } }
  .link-card{
    background:var(--bg-panel);
    padding:32px 24px;
    display:flex; flex-direction:column; gap:14px;
    transition:background .15s ease;
  }
  .link-card:hover{ background:var(--bg-panel-2); }
  .link-card .ico{
    width:38px; height:38px;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-mono); font-weight:700; color:var(--amber);
  }
  .link-card .name{ font-family:var(--f-head); font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size:15px; }
  .link-card .sub{ font-family:var(--f-mono); font-size:11px; color:var(--mono-dim); }
  .link-card .arrow{ margin-top:auto; font-family:var(--f-mono); font-size:12px; color:var(--olive-bright); }

  /* ===== CLIPURI TWITCH ===== */
  .clips-toolbar{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    margin-bottom:24px;
    font-family:var(--f-mono); font-size:12px; color:var(--mono-dim); letter-spacing:.05em;
  }
  .clips-toolbar .go{ color:var(--amber); }

  .clips-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:2px;
    background:var(--line-dim);
    border:1px solid var(--line);
  }

  .clip-card{
    background:var(--bg-panel);
    display:flex; flex-direction:column;
    transition:background .15s ease, transform .15s ease;
  }
  .clip-card:hover{ background:var(--bg-panel-2); transform:translateY(-2px); }

  .clip-thumb{
    position:relative;
    aspect-ratio:16/9;
    background:#0B0C09;
    overflow:hidden;
  }
  .clip-thumb img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(.9) contrast(1.05) brightness(.92);
    transition:transform .4s ease, filter .3s ease;
  }
  .clip-card:hover .clip-thumb img{ transform:scale(1.06); filter:saturate(1) brightness(1); }
  .clip-thumb .clip-rank{
    position:absolute; top:8px; left:8px;
    background:var(--amber); color:var(--bg);
    font-family:var(--f-mono); font-weight:700; font-size:11px;
    padding:2px 8px;
    clip-path:polygon(0 0, 100% 0, 88% 100%, 0 100%);
  }
  .clip-thumb .clip-duration{
    position:absolute; bottom:8px; right:8px;
    background:rgba(0,0,0,.75);
    color:var(--bone);
    font-family:var(--f-mono); font-size:11px;
    padding:2px 6px;
  }
  .clip-thumb .clip-play{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s ease;
    background:rgba(10,11,8,.25);
  }
  .clip-card:hover .clip-play{ opacity:1; }
  .clip-play svg{ width:34px; height:34px; }

  .clip-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .clip-title{
    font-family:var(--f-head); font-size:14px; font-weight:500; color:var(--bone);
    line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .clip-meta{
    display:flex; justify-content:space-between; align-items:center;
    font-family:var(--f-mono); font-size:11px; color:var(--mono-dim);
    margin-top:auto;
  }
  .clip-meta .views{ color:var(--olive-bright); }

  .clip-skel{ background:var(--bg-panel); }
  .clip-skel .clip-thumb{ background:linear-gradient(100deg, var(--bg-panel) 30%, var(--bg-panel-2) 50%, var(--bg-panel) 70%); background-size:200% 100%; animation:shimmer 1.6s infinite; }
  .clip-skel .clip-body::before{
    content:''; display:block; height:12px; width:80%; background:var(--line-dim);
  }
  @keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

  .clips-fallback{
    grid-column:1/-1;
    background:var(--bg-panel);
    padding:40px 24px;
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  .clips-fallback p{ color:var(--bone-dim); font-size:14px; max-width:44ch; }

  @media (prefers-reduced-motion: reduce){
    .clip-skel .clip-thumb{ animation:none; }
  }

  /* ===== GENERATOR LINK OBS ===== */
  .gen-box{
    background:var(--bg-panel);
    border:1px solid var(--line);
    padding:28px;
  }
  .gen-row{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:8px; }

  .gen-step{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line-dim); }
  .gen-step-head{
    display:flex; align-items:center; gap:12px; margin-bottom:18px;
    width:100%; background:none; border:none; cursor:pointer; padding:0; text-align:left;
  }
  .gen-step-num{ font-family:var(--f-mono); font-size:12px; color:var(--amber); }
  .gen-step-title{ font-family:var(--f-head); font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--bone); flex:1; }
  .gen-step-chevron{ font-family:var(--f-mono); color:var(--amber); font-size:16px; transition:transform .2s ease; }
  .gen-step.collapsed .gen-step-chevron{ transform:rotate(-90deg); }
  .gen-step.collapsed .gen-step-body{ display:none; }
  .gen-step.collapsed{ padding-bottom:0; }

  .gen-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px 18px;
  }
  @media (max-width:800px){ .gen-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .gen-grid{ grid-template-columns:1fr; } }
  .gen-field-wide{ grid-column:span 3; }
  @media (max-width:800px){ .gen-field-wide{ grid-column:span 2; } }
  @media (max-width:560px){ .gen-field-wide{ grid-column:span 1; } }

  .gen-field{ min-width:0; }
  .gen-field label{
    display:flex; justify-content:space-between; gap:8px;
    font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--mono-dim); margin-bottom:8px;
  }
  .gen-field label span{ color:var(--amber); text-transform:none; letter-spacing:0; }

  .gen-field input[type="text"],
  .gen-field input[type="number"],
  .gen-field select{
    width:100%;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--bone);
    padding:11px 12px;
    font-family:var(--f-mono); font-size:13px;
  }
  .gen-field input:focus, .gen-field select:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }

  .gen-field input[type="range"]{ width:100%; accent-color:var(--amber); }
  .gen-field input[type="color"]{
    width:100%; height:40px; padding:2px;
    background:var(--bg); border:1px solid var(--line); cursor:pointer;
  }

  .gen-checks{ display:flex; gap:18px; flex-wrap:wrap; }
  .gen-check{
    display:flex; align-items:center; gap:8px;
    font-family:var(--f-body); font-size:14px; color:var(--bone-dim);
    text-transform:none; letter-spacing:0; cursor:pointer;
  }
  .gen-check input{ accent-color:var(--amber); width:16px; height:16px; }

  .gen-result{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line-dim); }
  .gen-result label{
    display:block; font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
    letter-spacing:.08em; color:var(--amber); margin-bottom:8px;
  }
  .gen-output{ display:flex; gap:10px; flex-wrap:wrap; }
  .gen-output input{
    flex:1; min-width:240px;
    background:var(--bg);
    border:1px solid var(--olive-bright);
    color:var(--olive-bright);
    padding:13px 14px;
    font-family:var(--f-mono); font-size:13px;
  }
  .gen-hint{
    margin-top:16px;
    font-size:13px; color:var(--bone-dim); line-height:1.7;
  }
  .gen-hint strong{ color:var(--bone); }

  /* ===== CLIP PLAYER ===== */
  /* Ascuns implicit — rulează DOAR cand pagina e incarcata cu ?obs=1
     (adica atunci cand OBS deschide linkul generat mai sus). Nu e vizibil
     in navigarea normala a site-ului. */
  #clip-player{ display:none; }
  body.obs-mode #clip-player{ display:block; }

  .cp-toolbar{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    margin-bottom:24px;
    font-family:var(--f-mono); font-size:12px; color:var(--mono-dim); letter-spacing:.05em;
  }
  #cpCounter{ color:var(--olive-bright); }

  .cp-stage{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:2px;
    background:var(--line-dim);
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .cp-stage{ grid-template-columns:1fr; } }

  .cp-frame{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; transition:opacity var(--cp-speed, 300ms) ease; }
  .cp-frame iframe, .cp-frame video{ width:100%; height:100%; display:block; position:relative; z-index:1; object-fit:contain; background:#000; }
  .cp-frame.cp-fade{ opacity:0; }

  /* overlay: logo + badge joc, sus */
  .cp-overlay-top{
    position:absolute; top:14px; left:14px; right:14px; z-index:3;
    display:flex; align-items:center; gap:10px; pointer-events:none;
  }
  .cp-logo{ width:38px; height:38px; border:2px solid var(--cp-bordercolor, var(--amber)); border-radius:50%; object-fit:cover; }
  .cp-game-badge{
    font-family:var(--cp-font, var(--f-mono)); font-size:12px;
    background:rgba(10,11,8,.72); color:var(--cp-fontcolor, var(--amber));
    padding:5px 10px; text-shadow:1px 1px 0 var(--cp-outlinecolor, #000);
  }

  /* overlay: titlu + autor, jos */
  .cp-overlay-bottom{
    position:absolute; left:14px; right:14px; bottom:16px; z-index:3;
    display:flex; flex-direction:column; gap:2px; pointer-events:none;
  }
  .cp-overlay-title{
    font-family:var(--cp-font, var(--f-head)); font-size:18px; font-weight:700;
    color:var(--cp-fontcolor, var(--bone));
    text-shadow:1.5px 1.5px 0 var(--cp-outlinecolor, #000), -1px -1px 0 var(--cp-outlinecolor, #000);
  }
  .cp-overlay-author{
    font-family:var(--cp-font, var(--f-mono)); font-size:12px;
    color:var(--cp-fontcolor, var(--olive-bright));
    text-shadow:1px 1px 0 var(--cp-outlinecolor, #000);
  }

  /* bara de timp pana la urmatorul clip */
  .cp-timerbar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.5); z-index:4; }
  .cp-timerbar-fill{ height:100%; width:0%; background:var(--cp-bordercolor, var(--amber)); }

  /* efecte */
  .cp-fx-scanlines{
    position:absolute; inset:0; z-index:5; pointer-events:none;
    background:repeating-linear-gradient(180deg, rgba(0,0,0,.25) 0px, rgba(0,0,0,.25) 1px, transparent 1px, transparent 3px);
  }
  .cp-fx-static{
    position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    animation:staticNoise .2s steps(2) infinite;
  }
  @keyframes staticNoise{ 0%{ transform:translate(0,0); } 100%{ transform:translate(-2px,1px); } }
  @media (prefers-reduced-motion: reduce){ .cp-fx-static{ animation:none; } }

  /* Error message shown DIRECTLY over the video frame — unlike .cp-info,
     this stays visible in OBS mode too, so a streamer can actually see
     when something's wrong instead of just a frozen/blank video. */
  .cp-error-overlay{
    position:absolute; inset:0; z-index:10;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:24px;
    background:rgba(10,11,8,.82);
  }
  .cp-error-msg{
    font-family:var(--f-mono); font-size:13px; color:var(--amber);
    max-width:80%; line-height:1.6;
  }

  .cp-info{
    background:var(--bg-panel);
    padding:24px;
    display:flex; flex-direction:column; gap:14px;
  }
  .cp-title{
    font-family:var(--f-head); font-size:17px; font-weight:600; color:var(--bone); line-height:1.35;
  }
  .cp-meta{
    display:flex; gap:16px;
    font-family:var(--f-mono); font-size:12px; color:var(--mono-dim);
  }
  .cp-meta span:first-child{ color:var(--amber); }

  .cp-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .cp-btn{
    font-family:var(--f-mono); font-size:12px;
    background:var(--bg); color:var(--bone-dim);
    border:1px solid var(--line);
    padding:9px 12px;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .cp-btn:hover{ border-color:var(--amber); color:var(--amber); }
  .cp-btn-main{ color:var(--amber); border-color:var(--amber-dim); }
  .cp-btn[aria-pressed="false"]{ opacity:.5; }

  .cp-hint{
    font-family:var(--f-body); font-size:12px; color:var(--mono-dim);
    margin-top:auto; padding-top:14px; border-top:1px solid var(--line-dim);
    line-height:1.6;
  }
  .cp-hint code{
    font-family:var(--f-mono); font-size:11px; color:var(--olive-bright);
    background:var(--bg); padding:2px 6px; word-break:break-all;
  }

  /* Mod OBS: ascunde tot in afara de player, pentru folosire ca browser source */
  body.obs-mode header.site,
  body.obs-mode .hero-radar,
  body.obs-mode .statusbar,
  body.obs-mode section:not(#clip-player),
  body.obs-mode footer,
  body.obs-mode .sec-head,
  body.obs-mode .cp-toolbar,
  body.obs-mode .cp-info{ display:none !important; }
  body.obs-mode{ background:transparent; }
  body.obs-mode .wrap{ max-width:none; padding:0; }
  body.obs-mode section#clip-player{ padding:0; border:none; }
  body.obs-mode .cp-stage{ border:none; grid-template-columns:1fr; }
  body.obs-mode .cp-frame{ aspect-ratio:auto; width:100vw; height:100vh; }
  body.obs-mode.cp-fullscreen .cp-frame{ border:none !important; }

  /* ===== PARTENERI ===== */
  .partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-dim); border:1px solid var(--line); }
  @media (max-width:800px){ .partners{ grid-template-columns:1fr; } }
  .partner{ background:var(--bg-panel); padding:34px 26px; }
  .partner .name{ font-family:var(--f-head); font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--bone); }
  .partner .desc{ font-family:var(--f-body); font-size:14px; color:var(--bone-dim); margin-top:10px; }
  .partner .go{ margin-top:16px; display:inline-block; font-family:var(--f-mono); font-size:12px; color:var(--amber); }

  /* ===== CONTACT ===== */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
  @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-info .row{ display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line-dim); }
  .contact-info .row:last-child{ border-bottom:1px solid var(--line-dim); }
  .contact-info .k{ font-family:var(--f-mono); font-size:11px; color:var(--amber); text-transform:uppercase; letter-spacing:.08em; width:140px; flex:none; padding-top:2px; }
  .contact-info .v{ font-size:15px; color:var(--bone); }

  form.contact{ display:flex; flex-direction:column; gap:16px; }
  form.contact label{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--mono-dim); display:block; margin-bottom:8px; }
  form.contact input, form.contact textarea{
    width:100%;
    background:var(--bg-panel);
    border:1px solid var(--line);
    color:var(--bone);
    padding:13px 14px;
    font-family:var(--f-body); font-size:14px;
  }
  form.contact input:focus, form.contact textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
  form.contact textarea{ resize:vertical; min-height:120px; }

  /* ===== FOOTER ===== */
  footer{ padding:40px 0; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
  footer .fmono{ font-family:var(--f-mono); font-size:12px; color:var(--mono-dim); letter-spacing:.05em; }
  .back-top{ font-family:var(--f-mono); font-size:12px; color:var(--olive-bright); }
  .back-top:hover{ color:var(--amber); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .live-dot{ animation:none; }
    *{ transition:none !important; }
  }

  ::selection{ background:var(--amber); color:var(--bg); }
  :focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }