/* ==========================================================================
   CROWN Scout Girls — Collection screens (W-25 step 6)
   Commitments Tracker · Browse Players · Crown 35 · Film Room

   Ported from design_handoff_w25_recruiting_platform:
   - screens/CROWN Commitments.html
   - screens/CROWN Browse Players.html
   - screens/CROWN 35.html
   - screens/CROWN Film Room.html

   All rules scoped under the page-specific wrapper class so nothing leaks
   into legacy Zox News pages: .csg-commitments, .csg-browse, .csg-crown35,
   .csg-film. Shared bits live under .csg-collection so they can be reused
   without duplication.

   Data constraints enforced HERE at the CSS layer (belt-and-braces with
   the PHP templates):
   - Commitments: no date columns rendered anywhere. Corresponding classes
     for "N ago" stamps were intentionally NOT ported over.
   - Crown 35: no ".newtag" rule (dropped) and no ".mast .stamp" rule
     (dropped) — both would render date/recency info.
   - Browse: Crown 35 rank badge is TEXT ONLY. The .rankbadge rule renders
     the pill without a numeric rank — the template never emits a number.
   ========================================================================== */

/* ---------- Shared collection bits ---------- */
.csg-collection { background: #fff; color: #2A2A2A; }
.csg-collection a { color: var(--csg-red); }
.csg-collection a:hover { color: var(--csg-red-dark); }
.csg-collection img { display: block; max-width: 100%; }

.csg-collection .csg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.csg-collection .csg-wrap--wide { max-width: 1180px; }

.csg-collection .mast { padding: 44px 0 26px; }
.csg-collection .mast--rule { border-bottom: 2px solid #111; }
.csg-collection .mast .kj {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--csg-red);
}
.csg-collection .mast .kj svg { width: 15px; height: 15px; }
.csg-collection .mast h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 70px;
  line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase;
  color: #111; margin: 12px 0 0;
}
.csg-collection .mast .lede {
  font-family: var(--font-body); font-size: 18px; line-height: 1.5;
  color: #3A382F; max-width: 64ch; margin: 16px 0 0;
}

.csg-collection .controls {
  display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; padding: 22px 0;
}
.csg-collection .fgroup { display: flex; flex-direction: column; gap: 6px; }
.csg-collection .fgroup .fl {
  font-family: var(--font-ui); font-weight: 700; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #999;
}
.csg-collection .seg {
  display: inline-flex; border: 1px solid #DADADA;
  border-radius: var(--radius-md); overflow: hidden;
}
.csg-collection .seg a,
.csg-collection .seg button {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 9px 13px; background: #fff; border: 0;
  border-right: 1px solid #EDEDED; color: #555; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.csg-collection .seg a:last-child,
.csg-collection .seg button:last-child { border-right: 0; }
.csg-collection .seg a.on,
.csg-collection .seg button.on { background: var(--csg-red); color: #fff; }
.csg-collection .fcount {
  margin-left: auto; font-family: var(--font-ui); font-size: 12px;
  color: #888; padding-bottom: 9px;
}
.csg-collection .fcount b {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: #111; margin-right: 5px;
}

.csg-collection .stars {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 14px; letter-spacing: 2px; color: #D8D8D8; white-space: nowrap;
}
.csg-collection .stars .f { color: var(--csg-red); }

/* ==========================================================================
   Commitments Tracker
   ========================================================================== */

.csg-commitments .mast .stamp {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.04em; color: #888;
}
.csg-commitments .mast .stamp .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #37A853; box-shadow: 0 0 0 3px rgba(55,168,83,.18);
}

.csg-commitments .statstrip {
  display: flex; gap: 0; margin: 26px 0 4px;
  border: 1px solid #E4E4E4; border-radius: var(--radius-md); overflow: hidden;
}
.csg-commitments .statstrip .stat {
  flex: 1; padding: 18px 22px; border-right: 1px solid #EDEDED;
  display: flex; flex-direction: column; gap: 3px;
}
.csg-commitments .statstrip .stat:last-child { border-right: 0; }
.csg-commitments .statstrip .stat.total { background: #111; }
.csg-commitments .statstrip .stat b {
  font-family: var(--font-display); font-weight: 700; font-size: 38px;
  line-height: 1; color: #111; font-variant-numeric: tabular-nums;
}
.csg-commitments .statstrip .stat.total b { color: #fff; }
.csg-commitments .statstrip .stat b.d1 { color: var(--csg-red); }
.csg-commitments .statstrip .stat b.usports { color: #1D3B8B; }
.csg-commitments .statstrip .stat span {
  font-family: var(--font-ui); font-weight: 600; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #999;
}
.csg-commitments .statstrip .stat.total span { color: #BBB; }

.csg-commitments .thead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 10px 18px; border-bottom: 1px solid #E4E4E4;
}
.csg-commitments .thead span {
  font-family: var(--font-ui); font-weight: 700; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #AAA;
}
.csg-commitments .feed { display: flex; flex-direction: column; }

.csg-commitments .crow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px;
  padding: 20px 18px; border-bottom: 1px solid #F0F0F0;
  text-decoration: none; transition: background .12s; align-items: center;
}
.csg-commitments a.crow:hover { background: #FFF4F3; }
.csg-commitments .crow .idcol {
  display: grid; grid-template-columns: 56px 1fr 40px 210px;
  align-items: center; gap: 16px;
}
.csg-commitments .crow .ph {
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; position: relative; background: #ECECEC;
  box-shadow: 0 0 0 1px #E4E4E4;
}
.csg-commitments .crow .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.csg-commitments .crow .who .nm {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  line-height: 1; text-transform: uppercase; color: #111;
  display: flex; align-items: center; gap: 9px;
}
.csg-commitments a.crow:hover .who .nm { color: var(--csg-red); }
.csg-commitments .crow .who .meta {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.03em;
  color: #888; margin: 6px 0 7px;
}
.csg-commitments .crow .flow { display: grid; place-items: center; color: #D0D0D0; }
.csg-commitments .crow .flow svg { width: 22px; height: 22px; }
.csg-commitments a.crow:hover .flow { color: var(--csg-red); }
.csg-commitments .crow .dest { display: flex; align-items: center; gap: 12px; }
.csg-commitments .crow .dest .lg {
  width: 44px; height: 44px; border-radius: 7px;
  overflow: hidden; position: relative; background: #F2F2F2;
  box-shadow: 0 0 0 1px #E4E4E4; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--csg-red);
}
.csg-commitments .crow .dest .lg img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.csg-commitments .crow .dest .sch {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  line-height: 1.05; text-transform: uppercase; color: #111;
}
.csg-commitments .lvl {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-ui); font-weight: 700; font-size: 9px;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.csg-commitments .lvl.d1 { background: var(--csg-red); color: #fff; }
.csg-commitments .lvl.usports { background: #1D3B8B; color: #fff; }

.csg-commitments .crow .takecol { align-self: stretch; display: flex; }
.csg-commitments .crow .take { border-left: 3px solid var(--csg-red); padding: 4px 0 4px 16px; }
.csg-commitments .crow .take .tk {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--csg-red);
}
.csg-commitments .crow .take .tk svg { width: 14px; height: 14px; }
.csg-commitments .crow .take p {
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.58;
  color: #26241E; margin: 7px 0 0; text-wrap: pretty;
}
.csg-commitments .crow .takelock {
  width: 100%; border-left: 3px solid #E0E0E0;
  padding: 4px 0 4px 16px; display: flex; flex-direction: column; gap: 9px;
}
.csg-commitments .crow .takelock .ll {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.13em; text-transform: uppercase; color: #BBB;
}
.csg-commitments .crow .takelock .ll svg { width: 13px; height: 13px; }
.csg-commitments .crow .takelock .blur { display: flex; flex-direction: column; gap: 7px; }
.csg-commitments .crow .takelock .blur span { height: 8px; border-radius: 3px; background: #EDEDED; }
.csg-commitments .crow .takelock .blur span:nth-child(1) { width: 100%; }
.csg-commitments .crow .takelock .blur span:nth-child(2) { width: 96%; }
.csg-commitments .crow .takelock .blur span:nth-child(3) { width: 62%; }
.csg-commitments .crow .takelock .subcue {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; color: var(--csg-red);
}
.csg-commitments a.crow:hover .takelock .subcue { text-decoration: underline; }

.csg-commitments .empty {
  padding: 40px 18px; font-family: var(--font-ui);
  font-size: 13px; color: #999; text-align: center;
}

.csg-commitments .cta {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin: 36px 0 8px; padding: 30px 34px; background: #111;
  border-radius: var(--radius-md);
}
.csg-commitments .cta .gk {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--csg-red);
}
.csg-commitments .cta h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  line-height: 1.02; text-transform: uppercase; color: #fff; margin: 8px 0 8px;
}
.csg-commitments .cta p {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  color: #C8C8C8; margin: 0; max-width: 62ch;
}
.csg-commitments .cta .ctxt { flex: 1; min-width: 280px; }
.csg-commitments .cta .csg-btn { padding: 13px 26px; font-size: 14px; }

@media (max-width: 900px) {
  .csg-commitments .mast h1 { font-size: 48px; }
  .csg-commitments .statstrip { flex-wrap: wrap; }
  .csg-commitments .statstrip .stat { flex: 1 1 50%; border-bottom: 1px solid #EDEDED; }
  .csg-commitments .thead { display: none; }
  .csg-commitments .crow { grid-template-columns: 1fr; gap: 16px; }
  .csg-commitments .crow .idcol { grid-template-columns: 52px 1fr; gap: 8px 14px; }
  .csg-commitments .crow .flow { display: none; }
  .csg-commitments .crow .dest { grid-column: 2; }
}

/* ==========================================================================
   Browse Players
   ========================================================================== */

.csg-browse .searchbar { position: relative; display: flex; align-items: center; margin: 8px 0 20px; }
.csg-browse .searchbar .si {
  position: absolute; left: 18px; width: 20px; height: 20px;
  color: #999; pointer-events: none;
}
.csg-browse .searchbar input {
  width: 100%; font-family: var(--font-display); font-weight: 500;
  font-size: 19px; letter-spacing: 0.01em;
  padding: 16px 18px 16px 50px;
  border: 1px solid #DADADA; border-radius: var(--radius-md);
  color: #111; background: #fff; outline: none;
}
.csg-browse .searchbar input::placeholder {
  color: #B4B4B4; text-transform: none; letter-spacing: 0;
  font-family: var(--font-ui); font-weight: 400; font-size: 16px;
}
.csg-browse .searchbar input:focus {
  border-color: var(--csg-red);
  box-shadow: 0 0 0 3px rgba(213,43,30,.12);
}
.csg-browse .searchbar .clr {
  position: absolute; right: 12px; width: 30px; height: 30px;
  border: 0; background: #F0F0F0; border-radius: 50%;
  display: grid; place-items: center; color: #666; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; text-decoration: none;
}
.csg-browse .searchbar .clr:hover { background: #E4E4E4; color: #111; }

.csg-browse .rcount {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-family: var(--font-ui); font-size: 13px; color: #888; padding-bottom: 8px;
}
.csg-browse .rcount b {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: #111; margin-right: 4px;
}
.csg-browse .reset {
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  color: var(--csg-red); background: none; border: 0;
  cursor: pointer; text-decoration: underline; padding: 0;
}

.csg-browse .subhint {
  display: flex; align-items: center; gap: 9px;
  padding: 2px 0 14px; font-family: var(--font-ui); font-size: 13px; color: #888;
}
.csg-browse .subhint .lk {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #DADADA; display: grid; place-items: center;
  color: #999; flex: none;
}
.csg-browse .subhint .lk svg { width: 13px; height: 13px; }
.csg-browse .subhint a { font-weight: 600; }

.csg-browse .subfilters { padding-top: 0; }

/* Player grid */
.csg-browse .pgrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px 22px; padding: 14px 0 8px;
}
.csg-browse .pcard {
  text-decoration: none; display: flex; flex-direction: column;
  border: 1px solid #EAEAEA; border-radius: var(--radius-md);
  overflow: hidden; background: #fff;
  transition: box-shadow .14s, border-color .14s, transform .14s;
}
.csg-browse .pcard:hover {
  border-color: #D0D0D0;
  box-shadow: 0 14px 30px rgba(0,0,0,.09);
  transform: translateY(-2px);
}
.csg-browse .pshot { aspect-ratio: 4 / 5; position: relative; background: #ECECEC; overflow: hidden; }
.csg-browse .pshot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.csg-browse .pshot .imgslot__ph { object-fit: contain; padding: 20%; opacity: 0.55; }

/* Crown 35 badge — text only, NO rank number (README locked decision) */
.csg-browse .rankbadge {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--csg-red); color: #fff;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
}
.csg-browse .rankbadge svg { width: 13px; height: 13px; }
.csg-browse .rankbadge b {
  font-size: 10px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
}
.csg-browse .filmdot {
  position: absolute; right: 10px; top: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.62); display: grid; place-items: center; color: #fff;
}
.csg-browse .filmdot svg { width: 15px; height: 15px; }

.csg-browse .pbd { padding: 13px 14px 15px; }
.csg-browse .pnm {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  line-height: 1; text-transform: uppercase; color: #111;
}
.csg-browse .pcard:hover .pnm { color: var(--csg-red); }
.csg-browse .pmeta {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.02em;
  color: #888; margin: 6px 0 10px;
}
.csg-browse .prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.csg-browse .pcommit {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  text-transform: uppercase; color: #111; text-align: right; line-height: 1.1;
}
.csg-browse .popen {
  font-family: var(--font-ui); font-size: 11px; font-style: italic;
  letter-spacing: 0.03em; color: #BBB;
}

.csg-browse .noresult { text-align: center; padding: 64px 20px 48px; }
.csg-browse .noresult .nr-t {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  text-transform: uppercase; color: #111;
}
.csg-browse .noresult p {
  font-family: var(--font-body); font-size: 15px; color: #777; margin: 8px 0 18px;
}

@media (max-width: 1080px) { .csg-browse .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  {
  .csg-browse .pgrid { grid-template-columns: repeat(2, 1fr); }
  .csg-browse .mast h1 { font-size: 44px; }
  .csg-browse .rcount { width: 100%; margin-left: 0; }
}
@media (max-width: 460px)  { .csg-browse .pgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   The Crown 35
   ========================================================================== */

.csg-crown35 .tbl-wrap { position: relative; min-height: 640px; }
.csg-crown35 .thead,
.csg-crown35 .c35row {
  display: grid;
  grid-template-columns: 52px 1fr 108px 78px 190px 46px;
  align-items: center; gap: 16px;
}
.csg-crown35 .thead {
  padding: 11px 16px; border-bottom: 1px solid #E4E4E4;
}
.csg-crown35 .thead span {
  font-family: var(--font-ui); font-weight: 700; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #AAA;
}
.csg-crown35 .c35list { display: flex; flex-direction: column; }
.csg-crown35 .c35row {
  padding: 12px 16px; border-bottom: 1px solid #F0F0F0;
  text-decoration: none; transition: background .12s;
}
.csg-crown35 a.c35row:hover { background: #FFF4F3; }
.csg-crown35 .c35row .num {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  line-height: 1; color: #111; font-variant-numeric: tabular-nums; text-align: center;
}
.csg-crown35 .c35row.top5 .num { color: var(--csg-red); }
.csg-crown35 .c35row .ph {
  width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; position: relative; background: #ECECEC;
  box-shadow: 0 0 0 1px #E4E4E4;
}
.csg-crown35 .c35row .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.csg-crown35 .c35row .who .nm {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  line-height: 1; text-transform: uppercase; color: #111;
  display: flex; align-items: center; gap: 9px;
}
.csg-crown35 a.c35row:hover .who .nm { color: var(--csg-red); }
.csg-crown35 .c35row .who .meta {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.03em;
  color: #888; margin-top: 5px;
}
.csg-crown35 .c35row .stars { font-size: 15px; letter-spacing: 2px; color: #D8D8D8; text-align: left; }
.csg-crown35 .c35row .stars .f { color: var(--csg-red); }
.csg-crown35 .c35row .film { display: flex; }
.csg-crown35 .filmbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-weight: 700; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #151515;
  background: #F0F0F0; border: 1px solid #E0E0E0;
  padding: 4px 9px 4px 7px; border-radius: 999px;
}
.csg-crown35 .filmbadge svg { width: 13px; height: 13px; color: var(--csg-red); }
.csg-crown35 a.c35row:hover .filmbadge { background: #151515; color: #fff; border-color: #151515; }
.csg-crown35 a.c35row:hover .filmbadge svg { color: #fff; }
.csg-crown35 .film .none { width: 6px; height: 6px; border-radius: 50%; background: #E4E4E4; }
.csg-crown35 .c35row .commit {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  text-transform: uppercase; color: #111;
  display: flex; align-items: center; gap: 8px;
}
.csg-crown35 .c35row .commit .lg {
  width: 24px; height: 24px; border-radius: 5px;
  overflow: hidden; position: relative; background: #F2F2F2;
  box-shadow: 0 0 0 1px #E4E4E4; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; color: var(--csg-red);
}
.csg-crown35 .c35row .commit.open {
  color: #BBB; font-family: var(--font-ui); font-weight: 500; font-size: 12px;
  letter-spacing: 0.04em; text-transform: none; font-style: italic;
}
.csg-crown35 .c35row .note { display: flex; justify-content: center; }
.csg-crown35 .notebtn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--csg-red); background: #fff;
  display: grid; place-items: center; color: var(--csg-red);
}
.csg-crown35 .notebtn svg { width: 15px; height: 15px; }
.csg-crown35 a.c35row:hover .notebtn { background: var(--csg-red); color: #fff; }
.csg-crown35 .note .empty { width: 6px; height: 6px; border-radius: 50%; background: #E4E4E4; }

/* NO ".newtag" rule — the JSX had one; the template intentionally never emits it. */
/* NO ".mast .stamp" rule — the JSX showed "Last refreshed <date>"; forbidden here. */

.csg-crown35 .locked { filter: blur(6px); pointer-events: none; user-select: none; }
.csg-crown35 .veil {
  position: absolute; inset: 0; display: grid; place-items: start center;
  padding-top: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.9) 46%, #fff 70%);
}
.csg-crown35 .veil .card {
  text-align: center; background: #fff;
  border: 1px solid var(--csg-red); border-radius: var(--radius-md);
  padding: 34px 40px; box-shadow: 0 18px 44px rgba(0,0,0,.16); max-width: 440px;
}
.csg-crown35 .veil .lock {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--csg-red); display: grid; place-items: center; margin: 0 auto 16px;
}
.csg-crown35 .veil .lock svg { width: 22px; height: 22px; color: #fff; }
.csg-crown35 .veil .gk {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--csg-red);
}
.csg-crown35 .veil h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  line-height: 1.02; text-transform: uppercase; color: #111; margin: 8px 0 10px;
}
.csg-crown35 .veil p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: #333; margin: 0 0 20px;
}
.csg-crown35 .veil ul {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; gap: 9px; text-align: left;
}
.csg-crown35 .veil ul li {
  font-family: var(--font-ui); font-size: 13px; color: #222;
  padding-left: 22px; position: relative;
}
.csg-crown35 .veil ul li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 10px; height: 10px; background: var(--csg-red);
}

.csg-crown35 .legend {
  display: flex; align-items: center; gap: 9px; padding: 16px 16px 0;
  font-family: var(--font-ui); font-size: 12px; color: #888;
}
.csg-crown35 .legend .notebtn { width: 24px; height: 24px; }
.csg-crown35 .legend .notebtn svg { width: 12px; height: 12px; }

@media (max-width: 820px) {
  .csg-crown35 .mast h1 { font-size: 48px; }
  .csg-crown35 .thead .h-film,
  .csg-crown35 .c35row .film,
  .csg-crown35 .thead .h-note,
  .csg-crown35 .c35row .note { display: none; }
  .csg-crown35 .thead,
  .csg-crown35 .c35row { grid-template-columns: 46px 1fr 150px; }
}

/* ==========================================================================
   Film Room
   ========================================================================== */

.csg-film .mast {
  background: #111; color: #fff; padding: 40px 0 34px;
  border-bottom: 0;
}
.csg-film .mast h1 { color: #fff; }
.csg-film .mast .lede { color: #C8C8C8; }
.csg-film .mast .in { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

.csg-film .filterbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 40px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #E4E4E4;
  max-width: 1180px; margin: 0 auto;
}
.csg-film .catbar { display: flex; gap: 8px; flex-wrap: wrap; }
.csg-film .catbar a {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid #DADADA; background: #fff; color: #444;
  cursor: pointer; text-decoration: none;
}
.csg-film .catbar a:hover { border-color: #111; color: #111; }
.csg-film .catbar a.on { background: var(--csg-red); border-color: var(--csg-red); color: #fff; }
.csg-film .fcount { margin-left: auto; font-family: var(--font-ui); font-size: 12px; color: #888; }
.csg-film .fcount b { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #111; margin-right: 5px; }

.csg-film .grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px 26px; padding: 32px 0 12px;
}
.csg-film .vcard { text-decoration: none; display: flex; flex-direction: column; }
.csg-film .vthumb {
  aspect-ratio: 16 / 9; position: relative;
  border-radius: var(--radius-md); overflow: hidden;
  background: #0A0A0A; box-shadow: 0 0 0 1px #E4E4E4;
}
.csg-film .vthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.csg-film .vthumb .imgslot__ph { object-fit: contain; padding: 18%; opacity: 0.55; }
.csg-film .play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.csg-film .play span {
  width: 60px; height: 44px; border-radius: 11px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center; transition: background .14s;
}
.csg-film .play span::after {
  content: ""; border-left: 18px solid #fff;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px;
}
.csg-film .vcard:hover .play span { background: var(--csg-red); border-color: var(--csg-red); }
.csg-film .dur {
  position: absolute; right: 9px; bottom: 9px;
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.03em; color: #fff;
  background: rgba(0,0,0,.74); padding: 3px 7px; border-radius: 4px;
}
.csg-film .ctag {
  position: absolute; left: 11px; top: 11px;
  font-family: var(--font-ui); font-weight: 700; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  padding: 5px 9px; border-radius: var(--radius-sm);
}
.csg-film .ctag.game { background: var(--csg-red); }
.csg-film .ctag.high { background: #151515; }
.csg-film .vcard .bd { padding: 13px 2px 0; }
.csg-film .vcard h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  line-height: 1.12; text-transform: uppercase; color: #111; margin: 0;
}
.csg-film .vcard:hover h3 { color: var(--csg-red); }
.csg-film .vcard .dt {
  font-family: var(--font-ui); font-size: 12px; color: #888;
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
}

@media (max-width: 980px) { .csg-film .grid { grid-template-columns: repeat(2, 1fr); } .csg-film .mast h1 { font-size: 46px; } }
@media (max-width: 640px) { .csg-film .grid { grid-template-columns: 1fr; } }