/* ===== Fonts ===== */
@font-face{font-family:"Momcake";src:url("fonts/MomcakeBold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Momcake";src:url("fonts/MomcakeThin.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}

/* ===== Theme ===== */
:root{
  --space1:#0b1221; --space2:#111a34;
  --card:#0f172a; --card-2:#132243; --card-border:#243456;
  --text:#e5e7eb; --accent:#06b6d4; --gap:16px;
  --sidebar-w: 320px;
  --arrow-pad-l: 60px;   /* inner space to keep glow clear */
  --arrow-pad-r: 90px;
}

/* ===== Page chrome ===== */
html,body{
  height:100%; margin:0; color:var(--text);
  font-family:"Momcake", system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:radial-gradient(120vmax 90vmax at 50% 40%,var(--space2),var(--space1));
  overflow:hidden;
}
.page{height:100%; display:grid; grid-template-rows:auto 1fr; min-width:0}
header{ padding:14px 22px 10px; display:flex; align-items:center; gap:14px }
.sun-logo{ width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background: radial-gradient(circle at 30% 30%, #fff7 0 20%, #fde047 21% 60%, #f59e0b 61% 100%);
  box-shadow:0 0 40px 12px rgba(250,204,21,.35),0 0 120px 40px rgba(250,204,21,.20); text-decoration:none }
.sun-logo span{ font-weight:900; font-size:28px; color:#1f2937; text-shadow:0 2px 0 #fde68a66, 0 0 18px #fde047cc }

.brand{display:flex; align-items:center; gap:10px}
.brand .chip{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--card-border);border-radius:12px;background:linear-gradient(165deg,rgba(19,34,67,.6),rgba(15,23,42,.6));box-shadow:0 10px 22px rgba(0,0,0,.28)}
.brand .chip .dot{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9cf6ff 0 26%,#45e4f6 27% 58%,var(--accent) 59% 100%);box-shadow:0 0 10px rgba(6,182,212,.35)}
.brand .chip .label{font-weight:700;letter-spacing:.5px;font-size:16px}
.brand .season{background:#0d172b;border:1px solid var(--card-border);color:#fff;padding:8px 12px;border-radius:10px;font-size:14px;cursor:pointer}
#season{margin-left:auto;opacity:.9;font-size:14px;font-weight:300;letter-spacing:.4px}

.content{overflow-y:auto; overflow-x:hidden; padding:0 0 40px}
#rows{display:grid; gap:28px; padding:8px 22px 48px}

/* ===== Unit block ===== */
.unit-block{ overflow:visible }
.unit-heading{ margin:0 0 10px 0; font-size:18px; font-weight:700; color:var(--accent); letter-spacing:.6px }

/* Grid with menu + carousel */
.unit{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  align-items:start;
  column-gap:18px;
  min-width:0; position:relative; overflow:visible;
}
.unit-side{ min-width:0; z-index:1; display:flex; flex-direction:column; overflow:visible }
.unit-main{ min-width:0; z-index:2; position:relative; overflow:visible }

/* Left list */
.side-list{
  list-style:none; display:grid; gap:8px;
  margin:0; padding:8px;
  overflow-y:auto; overflow-x:hidden; /* height set in JS to match carousel */
  border:1px solid var(--card-border);
  border-radius:12px;
  background:linear-gradient(165deg, rgba(19,34,67,.45), rgba(15,23,42,.45));
}
.side-list::-webkit-scrollbar{ width:10px }
.side-list::-webkit-scrollbar-track{ background:#0d172b }
.side-list::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent),#67e8f9); border-radius:5px }
.side-list::-webkit-scrollbar-thumb:hover{ background:var(--accent) }

.side-item{ padding:8px 10px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.05); transition:background .2s,color .2s }
.side-item:hover{ background:var(--accent); color:#fff }
.side-item.active{ background:var(--accent); color:#fff }
.side-item .mi-step{ font-weight:700; color:var(--accent); margin:0 0 2px; font-size:12px; letter-spacing:.3px }
.side-item.active .mi-step{ color:#083344 }

/* Carousel (no drag; hidden scrollbar) */
.track{
  display:flex; gap:var(--gap);
  overflow-x:auto; overflow-y:visible;
  scroll-behavior:smooth;
  padding:8px var(--arrow-pad-r) 18px var(--arrow-pad-l); /* keep edges clear */
  cursor:default;
  scrollbar-width:none; -ms-overflow-style:none;
}
.track::-webkit-scrollbar{ display:none }

/* Bottom navigation bar under the carousel */
.unit-main .nav-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin:-7px 6px 0; pointer-events:auto;
}

.unit-main .nav-bar button{
  font-family: "Segoe UI Symbol", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  width:30px; height:30px; border-radius:50%;
  border:2px solid #082f49;
  background:#0ea5e9;
  color:#fff; /* make text visible again */
  font-weight:900; font-size:20px; /* show “‹” and “›” */
  cursor:pointer; opacity:.95;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.unit-main .nav-bar button:disabled{ opacity:.25; cursor:not-allowed }

/* Cards */
.card{
  background:linear-gradient(165deg,var(--card),var(--card-2));
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:12px;
  flex:0 0 clamp(260px, 38vw, 420px);
  display:flex; flex-direction:column; gap:10px; justify-content:space-between;
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
  cursor:pointer; /* clickable cards */
}
.card:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.34) }
.card.focused{
  border:2px solid var(--accent);
  box-shadow:0 0 20px rgba(6,182,212,.5), 0 18px 36px rgba(0,0,0,.38);
  filter:brightness(1.03)
}

.title{display:grid; gap:2px; margin-bottom:6px}
.title .step{font-weight:700; font-size:13px; letter-spacing:.3px; color:var(--accent)}
.title .name{font-weight:300; font-size:16px; letter-spacing:.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.player{ width:100%; aspect-ratio:var(--ratio,16/9); background:#000; border-radius:10px; overflow:hidden; flex-grow:1 }
.player iframe{ width:100%; height:100%; border:0; display:block }

.hint{opacity:.7; font-size:13px}