/* ---------------------------------------------------------------------------
   The college game (src/cfb_view.js): the room kit's windows on the campus,
   a phone held sideways first (844 x 390).
--------------------------------------------------------------------------- */
.cf { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 60; background: var(--night, #070d1c);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
.cf-in { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; padding: 10px 12px 40px; }
.cf-load { margin: 60px auto; padding: 14px 18px; background: var(--win, #0f1e38); color: #fff; box-shadow: var(--frame); font: 800 14px/1.3 var(--sans); }
.cf-win .rm-wb { padding: 10px; }
.cf-note { margin: 0 3px 8px; font: 700 12px/1.4 var(--sans); color: var(--soft, #c5d2e3); }
.cf-door { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cf-big { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 0; cursor: pointer; background: var(--card, #fff); color: var(--card-ink, #0d1b2a); box-shadow: var(--frame); }
.cf-big b { font: 400 26px/1 var(--disp); }
.cf-big span { font: 700 12px/1.35 var(--sans); }
.cf-big:hover, .cf-big:focus-visible { background: var(--gold); }
.cf-big.red b { color: var(--red, #e11d48); }

.cf-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--win, #0f1e38); color: #fff; box-shadow: var(--frame); }
.cf-id { display: grid; gap: 2px; min-width: 0; }
.cf-id b { font: 400 26px/1 var(--disp); color: var(--gold); }
.cf-id span { font: 800 11.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.cf-acts { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.cf-tabs, .cf-confs, .cf-focus { flex-wrap: wrap; }
.cf-body { display: grid; gap: 14px; }

.cf-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.cf-kv > div { display: grid; gap: 3px; align-content: start; margin: 3px; padding: 8px 10px; background: var(--card, #fff); color: var(--card-ink, #0d1b2a); box-shadow: var(--frame); min-width: 0; }
.cf-kv span { font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cf-kv b { font: 400 28px/1 var(--disp); }
.cf-kv b.cf-sm { font: 800 13px/1.3 var(--sans); }
.cf-kv i { font: 700 11px/1.3 var(--sans); font-style: normal; }

.cf-list { display: grid; gap: 4px; }
.cf-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 3px; padding: 6px 9px; background: var(--card, #fff); color: var(--card-ink, #0d1b2a); box-shadow: var(--frame-2); font: 700 12.5px/1.3 var(--sans); }
.cf-row.dim { opacity: .75; }
.cf-row.me { background: var(--gold); }
.cf-wk { min-width: 34px; font: 900 11px/1 var(--sans); letter-spacing: .04em; }
.cf-res { padding: 2px 5px 1px; font: 900 11px/1 var(--sans); color: #fff; }
.cf-res.w { background: var(--green, #16a34a); } .cf-res.l { background: var(--red, #e11d48); }
.cf-st { color: var(--gold-dk, #b88a00); letter-spacing: -1px; }
.rm-tbl tr.me .cf-st { color: inherit; }
.cf-seeds { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 3px 8px; color: #fff; font: 800 12px/1.3 var(--sans); }
.cf-seeds .me { color: var(--gold); }
.cf-champ { margin: 8px 3px 0; color: #fff; font: 800 14px/1.3 var(--sans); }

.cf-ros { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cf-grp { display: grid; gap: 3px; align-content: start; }
.cf-grp > b { color: var(--gold); font: 900 12px/1 var(--sans); letter-spacing: .08em; margin: 0 3px 2px; }
.cf-man { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: baseline; margin: 0 3px; padding: 4px 7px; background: var(--card, #fff); color: var(--card-ink, #0d1b2a); font: 700 12px/1.2 var(--sans); }
.cf-man.st { box-shadow: inset 4px 0 0 0 var(--gold); }
.cf-man span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-man em { font-style: normal; font-weight: 900; }

.cf-form { display: grid; gap: 8px; color: #fff; font: 800 12px/1.3 var(--sans); }
.cf-form label { display: grid; gap: 4px; max-width: 320px; }
.cf-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cf-offer { display: grid; gap: 3px; text-align: left; padding: 9px 11px; border: 0; cursor: pointer; background: var(--card, #fff); color: var(--card-ink, #0d1b2a); box-shadow: var(--frame); }
.cf-offer b { font: 400 22px/1 var(--disp); }
.cf-offer span, .cf-offer small { font: 700 11.5px/1.3 var(--sans); }
.cf-offer:hover, .cf-offer:focus-visible { background: var(--gold); }
.cf-pp { white-space: nowrap; }
.cf-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cf-up { display: grid; gap: 4px; padding: 9px 11px; margin: 3px; background: var(--card, #fff); color: var(--card-ink, #0d1b2a); box-shadow: var(--frame); font: 700 12px/1.3 var(--sans); }
.cf-up b { font: 400 22px/1 var(--disp); }
.cf-up em { font-style: normal; font-weight: 900; }
.cf-draft { display: grid; gap: 6px; margin: 3px 3px 10px; padding: 12px; background: var(--gold); color: var(--ink, #0d1b2a); box-shadow: var(--frame); }
.cf-draft b.disp { font: 400 34px/1 var(--disp); }
.cf-draft span { font: 800 14px/1.35 var(--sans); }
@media (max-width: 900px) { .cf-in { padding: 8px 8px 40px; gap: 10px; } .cf-id b { font-size: 22px; } }