/*! Big updates module for tag pages (.bu--tag, design 1a) and monthly pages
    (.bu--month, design 2b). design_handoff_major_updates_tag_month.
    Load after tag.css (tag pages) / after top.css (monthly pages).
    The card is the home page .ou-card (home.css) adapted: same values,
    prefixed bu- so the two modules can evolve separately. Dark only. */

.bu { display:flex; flex-direction:column; gap:14px; }

/* --- head: tag pages reuse .row-head/.kicker/h2/.rule/.sub/.row-meta/.row-price/.row-nav
       from tag.css; monthly pages reuse .tp-head/.kicker/h2/.rule/.tp-sub/.tp-pill
       from top.css. Only the extras live here. --- */
.bu-sub { font:400 13px/1.45 'Inter',sans-serif; color:rgba(255,255,255,.46); text-wrap:pretty; }
.bu-note { font:400 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.32); }
.bu-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* --- lane --- */
.bu-stage { position:relative; }
.bu-lane { display:flex; gap:16px; align-items:stretch; overflow-x:auto; scroll-snap-type:x mandatory;
           scrollbar-width:none; padding:2px 0 10px; overscroll-behavior-x:contain; }
.bu-lane::-webkit-scrollbar { display:none; }
.bu-fade { position:absolute; top:0; bottom:10px; right:0; width:72px;
           background:linear-gradient(90deg,transparent,#0b0b0d); pointer-events:none; }

/* --- card --- */
.bu-card { flex:0 0 300px; scroll-snap-align:start; display:flex; flex-direction:column; border-radius:16px; min-width:0;
           position:relative; overflow:hidden; background:#0d0d10; isolation:isolate; }
.bu-bg { position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); object-fit:cover;
         filter:blur(28px) saturate(1.4) brightness(.32); z-index:-1; pointer-events:none; }
.bu-card::after { content:""; position:absolute; inset:0; border-radius:16px; border:1px solid rgba(255,255,255,.1); pointer-events:none; }
.bu-card.is-1-0::after { border-color:oklch(72% 0.17 150 / .7); box-shadow:inset 0 0 24px oklch(72% 0.17 150 / .18); z-index:2; }
.bu-art { position:relative; }
.bu-art > div { aspect-ratio:460/215; -webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent); }
.bu-art img { width:100%; height:100%; object-fit:cover; display:block; }
.bu-when { position:absolute; top:10px; left:10px; background:oklch(78% 0.13 300); color:#14141a;
           font:700 9px 'Inter',sans-serif; letter-spacing:.03em; padding:3px 7px; border-radius:5px; }
.bu-body { padding:0 18px 18px; margin-top:-26px; position:relative; display:flex; flex-direction:column; gap:14px; flex:1; }
.bu-namebox { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.bu-badges { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.bu-badge-10 { background:oklch(72% 0.17 150); color:#14141a; font:700 9px 'Inter',sans-serif; letter-spacing:.03em; padding:3px 7px; border-radius:5px; }
.bu-tag { border:1px solid rgba(255,255,255,.22); background:rgba(11,11,13,.5); color:rgba(255,255,255,.75);
          border-radius:20px; padding:2px 9px; font:600 10.5px 'Inter',sans-serif; }
.bu-name { font:700 21px/1.15 'Space Grotesk',sans-serif; color:#fff; text-wrap:balance; }
.bu-stats { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.bu-players { display:flex; flex-direction:column; gap:2px; }
.bu-players b { font:700 28px/1 'Space Grotesk',sans-serif; color:#fff; font-variant-numeric:tabular-nums; }
.bu-cap { font:600 10px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.bu-count { display:flex; flex-direction:column; gap:2px; padding-bottom:1px; }
.bu-count b { font:700 15px/1.2 'Space Grotesk',sans-serif; color:oklch(88% 0.1 300); }
.bu-count span { font:500 11.5px 'Inter',sans-serif; color:rgba(255,255,255,.6); }

/* date strip: 7 days (tag) or the whole month (month) */
.bu-strip { display:flex; flex-direction:column; gap:6px; }
.bu-track { position:relative; height:16px; }
.bu-rail { position:absolute; left:0; right:0; top:7px; height:2px; border-radius:2px; background:oklch(78% 0.13 300 / .35); }
.bu-future { position:absolute; right:0; top:7px; height:0; border-top:2px dashed rgba(255,255,255,.14); }
.bu-now { position:absolute; top:1px; width:2px; height:14px; border-radius:1px; background:rgba(255,255,255,.7); }
.bu-dot { position:absolute; top:3px; width:10px; height:10px; margin-left:-5px; border-radius:50%;
          box-shadow:0 0 0 2px rgba(13,13,16,.9); background:oklch(78% 0.13 300); }
.bu-dot.is-1-0 { background:oklch(72% 0.17 150); }
.bu-strip-lbl { position:relative; display:flex; justify-content:space-between; gap:8px; font:500 11px 'Inter',sans-serif; color:rgba(255,255,255,.55); }
.bu-strip-lbl .bu-today { position:absolute; transform:translateX(-50%); color:rgba(255,255,255,.8); }

.bu-lead { display:flex; flex-direction:column; gap:6px; padding:12px 13px; border-radius:11px; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.08); }
.bu-date { font:600 11px 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.bu-link { color:oklch(88% 0.1 300); text-decoration:underline; text-decoration-color:oklch(78% 0.13 300 / .55); text-underline-offset:3px; }
.bu-link:hover { color:#c9a6fa; text-decoration-color:currentColor; }
.bu-link:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; border-radius:2px; }
.bu-lead .bu-link { font:600 16px/1.3 'Space Grotesk',sans-serif; text-underline-offset:4px; text-wrap:pretty; }
.bu-ext { width:12px; height:12px; margin-left:6px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-1px; }
.bu-excerpt { margin:0; font:400 13px/1.55 'Inter',sans-serif; color:rgba(255,255,255,.72);
              display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bu-rest { display:flex; flex-direction:column; gap:7px; }
.bu-rest-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.bu-rest-row .bu-link { min-width:0; font:600 13px/1.4 'Inter',sans-serif; }
.bu-rest-row span { flex:none; font:400 12px 'Inter',sans-serif; color:rgba(255,255,255,.55); }
.bu-cardfoot { margin-top:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font:500 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.62); }
.bu-rev { color:oklch(85% 0.14 150); }
.bu-patches { color:rgba(255,255,255,.78); }

/* --- monthly: week tabs (2b) --- */
.bu-weeks { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.bu-week { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:12px 14px; border-radius:12px;
           text-align:left; cursor:pointer; color:#fff; background:#141417; border:1px solid rgba(255,255,255,.1); font:inherit; }
.bu-week:hover:not(:disabled) { border-color:rgba(255,255,255,.3); }
.bu-week[aria-selected="true"] { background:oklch(78% 0.13 300 / .14); border-color:oklch(78% 0.13 300 / .7); }
.bu-week:disabled { background:#0b0b0d; border:1px dashed rgba(185,138,247,.35); cursor:default; }
.bu-week:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; }
.bu-week-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.bu-week-k { font:600 10px 'Inter',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.bu-week.is-current .bu-week-k { color:oklch(80% 0.13 85); }
.bu-week-n { font:700 15px 'JetBrains Mono',monospace; color:oklch(88% 0.09 300); }
.bu-week-range { font:700 17px 'Space Grotesk',sans-serif; }
.bu-week:disabled .bu-week-range { color:rgba(255,255,255,.35); }
.bu-week-low { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; height:34px; }
.bu-bars { display:flex; align-items:flex-end; gap:3px; height:100%; flex:1; }
.bu-bars i { flex:1; min-height:3px; border-radius:2px; background:rgba(255,255,255,.22); }
.bu-week[aria-selected="true"] .bu-bars i { background:oklch(78% 0.13 300); }
.bu-bars i.is-future { background:transparent; border:1px dashed rgba(185,138,247,.35); height:3px !important; }
.bu-thumbs { display:flex; flex:none; padding-left:14px; }
.bu-thumbs img { width:44px; height:21px; object-fit:cover; border-radius:4px; border:1px solid #0b0b0d;
                 margin-left:-14px; box-shadow:0 2px 6px rgba(0,0,0,.6); }

/* loading: same as the home module */
.bu-scan { height:2px; border-radius:2px; background:rgba(255,255,255,.06); overflow:hidden; position:relative; }
.bu-scan::before { content:""; position:absolute; top:0; bottom:0; left:0; width:40%;
                   background:linear-gradient(90deg,transparent,oklch(78% 0.13 300),transparent); animation:bu-scan 1.4s ease-in-out infinite; }
@keyframes bu-scan { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .bu-scan::before { animation:none; } }

@media (max-width: 640px) {
  .bu-lane { margin:0 -16px; padding:2px 16px 10px; scroll-padding-left:16px; }
  .bu-fade { right:-16px; }
  .bu-card { flex-basis:280px; }
  /* week tabs become one swipeable row */
  .bu-weeks { display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
  .bu-weeks::-webkit-scrollbar { display:none; }
  .bu-week { flex:0 0 168px; }
}

/* --- additions: not in the handoff stylesheet, values from home.css .ou-* --- */
.bu[hidden] { display:none; }
.bu-more { font:500 12.5px 'Inter',sans-serif; color:rgba(255,255,255,.6); }
.bu-lane > .bu-note { margin:0; padding:28px 4px; }
.bu-sentinel { flex:0 0 1px; }
.bu-fade[hidden] { display:none; }
.bu--month .bu-bar .row-nav { margin-left:auto; gap:8px; }
/* Monthly arrows: filled accent circles with white chevrons, so a long week
   reads as scrollable. Phones swipe and hide them (tag.css). */
.bu--month .row-nav button { width:38px; height:38px; color:#fff; border:none;
                             background:oklch(60% 0.19 300); box-shadow:0 4px 14px oklch(60% 0.19 300 / .45); }
.bu--month .row-nav button:hover:not(:disabled) { background:oklch(68% 0.18 300); color:#fff;
                                                  box-shadow:0 4px 18px oklch(68% 0.18 300 / .6); }
.bu--month .row-nav button:focus-visible { outline:2px solid oklch(88% 0.1 300); outline-offset:2px; }
.bu--month .row-nav button:disabled { opacity:1; background:transparent; box-shadow:none;
                                      color:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.14); }
.bu--month .row-nav svg { width:14px; height:14px; stroke-width:2.6; }

/* The game's name links to its Steam page, with the tag pages' Steam mark and
   arrow (.gc-cta, tag.css) after it. */
.bu-rev.is-wait { color:rgba(255,255,255,.55); }
a.bu-name { text-decoration:none; }
a.bu-name:hover { color:#fff; text-decoration:underline; }
a.bu-name:hover .gc-steam { fill:#fff; }
a.bu-name:hover .gc-arrow { stroke:#fff; }
a.bu-name:focus-visible { outline:2px solid oklch(78% 0.13 300); outline-offset:2px; border-radius:2px; }