:root{
  --sidebar-width:260px;
  --sidebar-visible-handle:48px; /* amount left visible when collapsed so hamburger is always clickable */
  --bg:#05060a;
  --card:#0f1724;
  --accent:#ff6b6b;
  --muted:#98a0b3;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --maxwidth:1200px;
  --transition: .32s cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff;border-radius:6px;z-index:120}

#app{display:block;min-height:100vh}

/* Sidebar fixed so it can slide independently; hamburger/handle remains visible when collapsed */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  width:var(--sidebar-width);
  height:100vh;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-right:1px solid rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  gap:12px;
  transform: translateX(0);
  transition: transform var(--transition), width var(--transition);
  z-index:120;
  will-change:transform;
}
/* right-position variant */
.sidebar.sidebar-right{
  left:auto;
  right:0;
  border-right: none;
  border-left: 1px solid rgba(255,255,255,0.03);
}

/* Collapsed behavior:
   - move sidebar mostly offscreen but leave a small visible handle area (sidebar-visible-handle).
   - the visible handle will contain the hamburger so it's always clickable.
*/
.sidebar.collapsed{
  transform: translateX(calc(-100% + var(--sidebar-visible-handle)));
}
.sidebar.sidebar-right.collapsed{
  transform: translateX(calc(100% - var(--sidebar-visible-handle)));
}

/* keep hamburger always visible and positioned near the handle left/top */
.brand{display:flex;align-items:center;gap:12px;justify-content:space-between}
.brand-left{display:flex;align-items:center;gap:12px}
.brand h1{font-size:18px;margin:0;text-transform:capitalize}
#sidebarToggle{
  background:transparent;border:0;color:var(--accent);font-size:20px;cursor:pointer;
  /* make the toggle visually stand out even when sidebar is collapsed */
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
}
#sidebarPositionToggle{background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer}
.controls{margin-top:4px;display:flex;flex-direction:column;gap:8px}
.controls input[type="search"]{
  background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:10px;color:inherit;
}
.filters label{display:block;font-size:13px;color:var(--muted)}
.nav h3{margin:8px 0 4px 0;color:var(--muted);font-size:13px}
.nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.platform-btn{background:transparent;border:0;color:inherit;padding:8px;border-radius:8px;text-align:left;cursor:pointer}
.platform-btn:hover{background:rgba(255,255,255,0.02)}
.sidebar-foot{margin-top:auto;color:var(--muted);font-size:12px}

/* Main content must offset for sidebar when visible.
   We use sibling selector to adjust main margins depending on sidebar state/side.
*/
.main{
  transition: margin var(--transition), padding var(--transition);
  margin-left: calc(var(--sidebar-width));
  min-height:100vh;
}
/* when sidebar is on right, use right margin instead */
.sidebar.sidebar-right ~ .main{
  margin-left: 0;
  margin-right: calc(var(--sidebar-width));
}
/* when collapsed, keep a small offset so content doesn't jump under the visible handle */
.sidebar.collapsed ~ .main{
  margin-left: var(--sidebar-visible-handle);
}
.sidebar.sidebar-right.collapsed ~ .main{
  margin-right: var(--sidebar-visible-handle);
}

/* On small screens the sidebar behaves like an overlay (keeps the previous behavior).
   The hamburger handle will remain visible on the left or right edge accordingly.
*/
@media (max-width:900px){
  .sidebar{
    /* overlay style */
    position:fixed;
    transform: translateX(calc(-100% + var(--sidebar-visible-handle)));
  }
  .sidebar:not(.collapsed){
    transform: translateX(0);
  }
  .main{margin:0}
}

/* Home full-screen */
.section{padding:28px 20px}
.home-section{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.28));
}
.hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;background:linear-gradient(180deg, rgba(8,10,16,0.6), rgba(2,4,8,0.65));z-index:0;
}
.home-overlay{
  position:relative;z-index:4;text-align:center;padding:36px;border-radius:12px;background:linear-gradient(180deg, rgba(2,6,12,0.62), rgba(2,6,12,0.3));backdrop-filter: blur(6px);box-shadow: 0 20px 60px rgba(2,6,12,0.6);max-width:900px;margin:36px;
}
.home-overlay h1{margin:0 0 10px 0;font-size:44px;letter-spacing:1px}
.home-overlay p{margin:0 0 18px 0;color:var(--muted);font-size:16px}
.home-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.home-note{margin-top:8px;font-size:13px;color:var(--muted)}

/* buttons */
.btn{appearance:none;border:0;padding:10px 16px;border-radius:10px;background:rgba(255,255,255,0.06);color:inherit;cursor:pointer;font-size:15px}
.btn.play{background:linear-gradient(90deg,var(--accent),#7e57ff);box-shadow:0 10px 30px rgba(125,87,255,0.12)}
.btn.small{padding:8px 12px;font-size:14px}
.btn.online{background:linear-gradient(90deg,#34d399,#60a5fa);}

/* Cards / modal (kept from earlier) */
.card{position:relative;overflow:hidden;border-radius:12px;background:var(--card);height:300px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;border:1px solid rgba(255,255,255,0.03)}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(2,6,12,0.6)}
.card .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.48) contrast(.9) saturate(1.15);transition:transform .6s cubic-bezier(.2,.9,.2,1), filter .28s;transform-origin:center}
.card:hover .bg{transform:scale(1.08);filter:brightness(.6)}
.card .meta{position:relative;padding:14px;z-index:2;color:#fff;background: linear-gradient(180deg, transparent 0%, rgba(2,6,12,0.6) 60%)}
.card .meta h4{margin:0 0 6px 0}
.card .meta p{margin:0;font-size:13px;color:var(--muted)}
.card .actions{display:flex;gap:8px;margin-top:10px;align-items:center}

/* Modal */
.modal{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,12,0.7)}
.modal-content{position:relative;z-index:210;width:min(1000px,95%);max-height:85vh;overflow:auto;border-radius:12px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.video-wrap{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#000;margin:8px 0}
.modal-desc{color:var(--muted)}

/* Visual helpers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}