:root{
  --purple-900: #2b0b3a;
  --purple-700: #6a1b9a;
  --purple-500: #9c4dcc;
  --accent: #e9d8ff;
  --text: #111;
  --max-width: 1000px;
}
*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, sans-serif;
  margin:0;
  color:var(--text);
  background: linear-gradient(180deg, #f8f2ff 0%, #fff 100%);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  align-items:center;
}
.site-header{
  width:100%;
  background: linear-gradient(90deg,var(--purple-700),var(--purple-500));
  color:white;
  /* slightly narrower vertical padding for a thinner purple strip */
  padding:6px 12px;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
  position:relative;
  z-index:60;
}
.site-header .header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:var(--max-width);
  margin:0 auto;
}
.brand .avatar{
  /* larger avatar across pages */
  height:96px;
  width:96px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.15);
}
/* make avatar indicate clickability when JS enables it */
.brand .avatar.clickable{cursor:pointer}
.brand h1{margin:0;font-size:20px}
/* hide static site name in header; auth area will display "Welcome <name>" */
.brand h1{display:none}
.main-nav{
  margin-top:0;
  display:flex;
  gap:12px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}
.main-nav .btn{white-space:nowrap}

/* Focus styles for accessibility */
.main-nav .btn:focus{outline:3px solid rgba(255,255,255,0.18);outline-offset:2px}
.main-nav .btn{display:inline-flex;align-items:center;gap:6px}
.site-header #header-greeting{max-width:var(--max-width);margin:0 auto;padding:6px 12px;text-align:center;font-weight:800}
.site-header #header-greeting{font-size:18px;line-height:1.05}
/* animated reveal for the greeting so it doesn't reflow nav */
.site-header #header-greeting{opacity:0;transform:translateY(-6px);transition:opacity .28s ease,transform .28s ease}
.site-header #header-greeting.visible{opacity:1;transform:translateY(0)}
@media(min-width:900px){
  .site-header #header-greeting{font-size:22px}
}
.main-nav a{
  color:white;
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
}
.main-nav a:hover{background:rgba(255,255,255,0.08)}
.hero{
  max-width:var(--max-width);
  width:100%;
  margin:36px auto;
  padding:28px;
  background:linear-gradient(180deg, rgba(154,68,204,0.06), rgba(154,68,204,0.02));
  border-radius:12px;
  box-shadow:0 6px 18px rgba(117,80,168,0.06);
  text-align:center;
}
.hero-rich{position:relative;padding:36px 22px;overflow:hidden;background:linear-gradient(135deg, rgba(156,77,204,0.12), rgba(106,27,154,0.06));color:#1b0133}
.hero-inner{display:flex;gap:24px;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto}
.hero-copy{flex:1;min-width:260px}
.hero-copy h1{font-size:28px;margin:6px 0 8px;color:#2b0b3a}
.hero-copy .lead{font-size:16px;margin-bottom:12px;color:#3a1850}
.hero-ctas{margin-top:12px}
.role-cta{margin-top:10px;color:#5b3a78;font-weight:600}
.hero-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:420px}
.hero-cards .card{background:white;padding:12px;border-radius:12px;box-shadow:0 8px 22px rgba(117,80,168,0.08);text-align:left;transform:translateY(12px);opacity:0;transition:transform .48s cubic-bezier(.22,.9,.27,1),opacity .48s ease}
.hero-cards .card .card-emoji{font-size:28px;margin-bottom:8px}
.hero-cards .card h4{margin:0 0 6px;font-size:15px;color:#6a1b9a}
.hero-cards .card p{margin:0;color:#5b3a78;font-size:13px}

/* Staggered entrance */
.hero-cards .card:nth-child(1){transition-delay:120ms}
.hero-cards .card:nth-child(2){transition-delay:220ms}
.hero-cards .card:nth-child(3){transition-delay:320ms}
.hero-cards .card:nth-child(4){transition-delay:420ms}
.hero-rich .card.visible{transform:none;opacity:1}

/* hover lift */
.hero-cards .card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 32px rgba(117,80,168,0.12)}

/* Animated floating decorative shapes */
.hero-shapes .shape{position:absolute;border-radius:14px;filter:blur(10px);opacity:0.9}
.hero-shapes .s1{width:220px;height:220px;background:linear-gradient(90deg,#ffd6e8,#c89cff);right:-60px;top:-40px;animation:floatY 8s ease-in-out infinite}
.hero-shapes .s2{width:140px;height:140px;background:linear-gradient(90deg,#ffd8a8,#bfa1ff);left:-40px;bottom:-20px;animation:floatX 7s ease-in-out infinite}
.hero-shapes .s3{width:90px;height:90px;background:linear-gradient(90deg,#b8f6ff,#d9b3ff);right:20%;top:60%;animation:floatY 9s ease-in-out infinite}

@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}
@keyframes floatX{0%{transform:translateX(0)}50%{transform:translateX(14px)}100%{transform:translateX(0)}}

/* role-specific subtle color touches */
.video-card{border-left:4px solid #6a1b9a}
.web-card{border-left:4px solid #2b7cff}
.story-card{border-left:4px solid #ff7ab6}
.trader-card{border-left:4px solid #27ae60}

/* Responsive: stack hero on small screens */
@media(max-width:900px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero-cards{width:100%;grid-template-columns:repeat(2,1fr)}
  .hero-copy{width:100%}
  .hero-copy h1{font-size:22px}
  .hero-shapes .s1{display:none}
}

@media(max-width:420px){
  .hero-cards{grid-template-columns:1fr}
}
.site-footer{
  width:100%;
  margin-top:auto;
  padding:18px 0;
  text-align:center;
  color:#6a4b8f;
  font-size:14px;
}
@media(min-width:900px){
  .main-nav{justify-content:flex-end}
  .brand{justify-content:space-between}
}

/* Videos section styles */
.videos-section{
  max-width:var(--max-width);
  width:100%;
  margin:18px auto 48px;
  padding:18px;
  background:rgba(154,68,204,0.03);
  border-radius:10px;
}
.videos-section h3{margin-top:0}
.video-wrapper{
  position:relative;
  width:100%;
  /* prefer aspect-ratio when supported for simpler responsiveness */
  aspect-ratio: 16 / 9;
  height: auto;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(117,80,168,0.04);
}
.video-wrapper iframe{
  width:100%;
  height:100%;
  border:0;
}
.video-note{font-size:13px;color:#5b3a78;margin-top:8px}

/* small button utilities used by auth UI */
.btn{
  display:inline-block;
  background:var(--purple-700);
  color:white;
  padding:6px 10px;
  border-radius:8px;
  text-decoration:none;
  border:0;
  font-weight:600;
}
.btn:hover{opacity:0.95}
.btn-ghost{
  background:transparent;
  color:var(--purple-700);
  border:2px solid rgba(106,27,154,0.12);
}
.auth-user{font-weight:600;color:#3a1850;margin-right:8px}

/* Games grid and player */
.games-player{
  max-width:900px;
  margin:18px auto;
  padding:12px;
  background:rgba(154,68,204,0.03);
  border-radius:10px;
  text-align:center;
}
.games-player .player-area{
  width:100%;
  /* use aspect-ratio where helpful; keep a reasonable min-height on large screens */
  aspect-ratio: 16 / 9;
  min-height:260px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(117,80,168,0.06);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.games-player .player-area iframe{width:100%;height:100%;border:0}
.games-grid{max-width:1000px;margin:18px auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:6px}
.game-card{background:linear-gradient(180deg,#fff,#fbf8ff);border-radius:10px;padding:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:100px;transition:transform .18s ease,box-shadow .18s ease}
.game-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,0.06)}
.game-card .thumb{width:100%;height:100%;display:block;border-radius:8px;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6a1b9a}
.game-card small{display:block;margin-top:6px;color:#5b3a78;font-size:12px;text-align:center}
.game-close{position:absolute;right:12px;top:12px;background:rgba(0,0,0,0.6);color:white;padding:6px 8px;border-radius:6px;cursor:pointer}

/* Two-column games layout: left list, right big player */
.games-layout{
  display:flex;
  gap:18px;
  max-width:1200px;
  margin:18px auto;
  width:100%;
  align-items:flex-start; /* keep columns aligned at top */
}
.games-list-left{
  width:25%;
  min-width:220px;
  background:rgba(154,68,204,0.02);
  border-radius:8px;
  padding:12px;
  max-height:calc(100vh - 160px); /* allow the list to scroll within viewport */
  overflow:auto;
  position:relative;
}
.games-list-left .game-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}
.games-list-left .game-item:hover{background:rgba(154,68,204,0.03)}
.games-list-left .game-item.selected{background:linear-gradient(90deg, rgba(154,68,204,0.08), rgba(154,68,204,0.04));border-left:4px solid var(--purple-700)}
.games-list-left .game-item .mini{width:72px;height:54px;border-radius:6px;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6a1b9a;overflow:hidden}
.games-list-left .game-item .mini img{width:100%;height:100%;object-fit:cover;display:block}
.game-desc{font-size:13px;color:#5b3a78;margin-top:6px}
.games-player-right{width:75%;display:flex;flex-direction:column}
.games-player-right .player-area{flex:1;border-radius:8px;overflow:hidden;position:relative}
.games-player-right .player-area iframe{width:100%;height:100%;border:0}

/* Make the player area sticky so it remains visible while the left list scrolls */
.games-player-right .player-area.sticky{position:sticky;top:20px}

/* flash animation when game changed */
.player-flash{animation:playerFlash 700ms ease}
@keyframes playerFlash{
  0%{box-shadow:0 0 0 6px rgba(154,68,204,0.0)}
  30%{box-shadow:0 0 0 12px rgba(154,68,204,0.18)}
  100%{box-shadow:0 6px 18px rgba(117,80,168,0.06)}
}

@media(max-width:900px){
  .games-layout{flex-direction:column;padding:8px}
  .games-list-left{width:100%;height:auto;max-height:none}
  .games-player-right{width:100%}
  .brand .avatar{height:64px;width:64px}
  .hero{padding:16px;margin:18px auto}
  .site-header{padding:8px}
  .site-header #header-greeting{font-size:16px}
  .main-nav a{padding:6px 8px;font-size:14px}
  .video-wrapper{aspect-ratio:16/9}
  .games-player .player-area{min-height:180px}
  .games-player-right .player-area iframe{height:100%}
}

/* Hamburger toggle: hide the toggle on desktop, show on mobile */
.nav-toggle{display:none;background:transparent;border:0;color:white;padding:8px;border-radius:8px}
.nav-toggle svg{display:block}

@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  /* collapsed nav: hide and allow toggle */
  .main-nav{display:block;width:100%;flex-direction:column;gap:8px;padding:0;margin-top:8px;overflow:hidden;max-height:0;transition:max-height .32s ease;background:linear-gradient(90deg,var(--purple-700),var(--purple-500));border-radius:8px}
  .main-nav.open{max-height:420px;padding:12px}
  .header-inner{flex-direction:row;align-items:center}
}

/* backdrop overlay when nav open: use opacity + pointer-events so we can animate and trap focus */
.nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
  z-index:40;
}
.nav-backdrop.visible{opacity:1;pointer-events:auto}

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

/* Extra small screens — tighten spacing */
@media(max-width:420px){
  .brand .avatar{height:56px;width:56px}
  .hero{padding:12px}
  .main-nav{gap:8px}
  .main-nav a{padding:6px 6px;font-size:13px}
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
}

/* Comments should appear below the player (like YouTube) and not shrink the player.
   The player keeps a fixed height; the comments area is full-width below with its own scrolling. */
.games-player-right{flex-direction:column}
.games-player-right .player-area{flex:0 0 auto;position:relative;z-index:1}
.games-player-right .player-area iframe{width:100%;height:520px;border:0;display:block}
.comments-area{width:100%;max-width:900px;margin:12px auto;padding:12px;background:#fff;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.06);z-index:5}
.comments-area .comments-list{max-height:360px;overflow:auto;padding-right:6px}

@media(max-width:900px){
  .comments-area{margin-top:12px}
}