:root {
  --navy: #14213d;
  --navy-2: #1f3260;
  --red: #ce1126;
  --red-dark: #a50e1f;
  --bg: #f3f5f9;
  --card: #fff;
  --card-border: #e3e7ef;
  --text: #1d2433;
  --muted: #6b7385;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1524;
    --card: #182036;
    --card-border: #26304a;
    --text: #e6e9f0;
    --muted: #98a1b5;
  }
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > footer { margin-top: auto; }
.text-muted { color: var(--muted) !important; }
a { color: inherit; }

/* nav */
.grove-nav { background: var(--navy); border-bottom: 4px solid var(--red); }
.grove-nav .nav-link { color: rgba(255, 255, 255, .85); font-weight: 500; text-decoration: none; }
.grove-nav .nav-link:hover { color: #fff; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 1.05rem;
}
.btn-grove { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn-grove:hover, .btn-grove:focus { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

/* dashboard grid */
.grove-main { max-width: 1400px; margin: 0 auto; width: 100%; }
.grove-grid { display: flex; gap: 1rem; align-items: flex-start; }
.grove-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; min-height: 4rem; }
.grove-col > .widget { flex: none; }
@media (max-width: 767.98px) {
  .grove-grid { flex-direction: column; align-items: stretch; }
  .grove-col { flex: none; min-height: 0; }
}

/* widget card */
.widget {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 33, 61, .04);
  overflow: hidden;
}
.widget-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--card-border);
  font-weight: 600;
}
.widget-head .updated { margin-left: auto; font-size: .75rem; font-weight: 400; color: var(--muted); }
.widget-head .bi { color: var(--red); }
.widget-body { padding: 1rem; }
.widget-note { font-size: .875rem; color: var(--muted); }
.widget-stale { font-size: .75rem; color: #b26a00; padding: .25rem 1rem; background: rgba(255, 170, 0, .1); }

/* arrange mode */
.arranging .widget { cursor: grab; outline: 2px dashed var(--card-border); outline-offset: 2px; }
.arranging .widget-head::after { content: "\F4D6"; font-family: "bootstrap-icons"; color: var(--muted); }
.arranging .grove-col { background: rgba(127, 127, 127, .06); border-radius: 14px; padding: .5rem; }
.widget.dragging { opacity: .4; }
.arranging .widget a { pointer-events: none; }

/* weather */
.wx-now { display: flex; align-items: center; gap: 1rem; }
.wx-now .bi { font-size: 2.75rem; color: var(--red); }
.wx-temp { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; margin-top: 1rem; text-align: center; font-size: .8rem; }
.wx-days .bi { font-size: 1.25rem; display: block; margin: .15rem 0; }
.wx-days .lo { color: var(--muted); }

/* news */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { display: flex; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--card-border); }
.news-list li:first-child { border-top: 0; padding-top: 0; }
.news-list img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.news-list a { text-decoration: none; font-weight: 500; }
.news-list a:hover { text-decoration: underline; }

/* links */
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.links-grid a {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .75rem .5rem; border: 1px solid var(--card-border); border-radius: 10px;
  text-decoration: none; font-size: .85rem; font-weight: 500;
}
.links-grid a:hover { border-color: var(--red); }
.links-grid .bi { font-size: 1.3rem; color: var(--red); }

/* modal in dark mode */
.modal-content { background: var(--card); color: var(--text); }

/* ================= home: photo background + glass cards ================= */
.home {
  --glass: rgba(14, 21, 40, .74);
  --glass-border: rgba(255, 255, 255, .10);
  --sky: #8fc8f2;           /* powder blue accent, readable on dark glass */
  --muted: rgba(255, 255, 255, .62);
  color: #fff;
  background: #0f1a33;
}
/* The backdrop is a fixed layer (not background-attachment: fixed, which iOS ignores). */
.home::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  /* No photo yet: a navy-to-cardinal evening sky. */
  background-image:
    radial-gradient(900px 500px at 80% 0%, rgba(143, 200, 242, .35), transparent 60%),
    radial-gradient(800px 600px at 10% 100%, rgba(206, 17, 38, .45), transparent 60%),
    linear-gradient(160deg, #14213d 0%, #1f3260 45%, #4a1530 100%);
  background-size: cover;
}
.home.has-photo::before {
  /* Darken the top and bottom so white text stays readable on bright photos. */
  background-image:
    linear-gradient(180deg, rgba(8, 12, 24, .6) 0%, rgba(8, 12, 24, .35) 40%, rgba(8, 12, 24, .3) 60%, rgba(8, 12, 24, .65) 100%),
    var(--photo);
  background-position: center;
}
.home .text-muted { color: var(--muted) !important; }
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.home-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
}
.home-brand { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; text-decoration: none; }
.home-actions { display: flex; align-items: center; gap: .5rem; }
.glass-btn {
  background: rgba(14, 21, 40, .55); color: #fff; border: 1px solid var(--glass-border);
  border-radius: 999px; padding: .4rem .9rem; font-weight: 600; font-size: .9rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.glass-btn.icon-only { width: 2.4rem; height: 2.4rem; padding: 0; display: inline-grid; place-items: center; }
.glass-btn:hover { background: rgba(14, 21, 40, .8); }
.study-btn {
  background: var(--red); color: #fff; border: 0; border-radius: 10px;
  padding: .55rem 1rem; font-weight: 700; box-shadow: 0 4px 14px rgba(206, 17, 38, .35);
}
.study-btn:hover { background: var(--red-dark); }

.home-main { max-width: 1440px; margin: 0 auto; width: 100%; padding: 0 1.25rem 2rem; }

/* hero */
.hero { text-align: center; padding: 4vh 0 5vh; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hero-hello { font-size: clamp(2.4rem, 6.5vw, 5.25rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.hero-name {
  all: unset; cursor: pointer;
  border-bottom: 3px solid rgba(255, 255, 255, .85);
}
.hero-name:hover, .hero-name:focus-visible { border-bottom-color: var(--sky); color: var(--sky); }
.hero-name-input {
  font: inherit; color: inherit; background: transparent; border: 0; outline: 0;
  border-bottom: 3px solid var(--sky); width: 7em; text-align: left; text-shadow: inherit;
}
.hero-date { font-size: clamp(1.25rem, 3vw, 2.4rem); font-weight: 700; margin-top: .4rem; opacity: .95; }
.hero-pill {
  display: inline-block; margin-top: 1rem; padding: .3rem .9rem; border-radius: 999px;
  background: rgba(14, 21, 40, .55); border: 1px solid var(--glass-border);
  font-weight: 600; font-size: .9rem; text-shadow: none;
}

/* cards */
.home .widget {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  color: #fff;
}
.home .widget-head { border-bottom: 0; padding: 1.1rem 1.4rem .25rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.home .widget-head .bi { display: none; }
.home .widget-head .accent { color: var(--sky); }
.home .widget-head .updated { color: var(--muted); }
.home .widget-body { padding: .6rem 1.4rem 1.3rem; }
.home .widget-note { color: var(--muted); }
.home .widget-stale { color: #ffd38a; background: rgba(255, 170, 0, .12); margin: 0 1rem; border-radius: 8px; }
.home.arranging .widget { outline-color: rgba(255, 255, 255, .35); }
.home.arranging .grove-col { background: rgba(255, 255, 255, .06); }

/* weather */
.home .wx-now { gap: .75rem; }
.home .wx-now .bi { font-size: 2.5rem; color: #ffd166; }
.home .wx-temp { font-size: 2.6rem; }
.wx-hours { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; margin-top: 1.1rem; font-weight: 600; }
.wx-hours .bi { display: block; font-size: 1.7rem; margin: .35rem 0; color: #ffd166; }
.wx-hours .bi-moon-stars, .wx-hours .bi-cloud-moon { color: #e8e3c4; }
.home .wx-days { color: var(--muted); }

/* news */
.home .news-list li { border-top-color: rgba(143, 200, 242, .35); padding: .8rem 0; }
.home .news-list a { font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: #fff; }
.home .news-list img { width: 72px; height: 54px; border-radius: 10px; }

/* links */
.home .links-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .9rem; }
.home .links-grid a { border: 0; padding: .4rem 0; color: #fff; font-size: .8rem; font-weight: 600; }
.home .links-grid .bi {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 16px;
  font-size: 1.45rem; color: #fff; background: var(--tile, var(--red));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); transition: transform .15s;
}
.home .links-grid a:hover .bi { transform: translateY(-2px) scale(1.04); }

/* photo credit + footer */
.photo-credit {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 5;
  padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; color: #fff;
}
.photo-credit a { color: var(--sky); }
.home-footer { text-align: center; font-size: .8rem; color: rgba(255, 255, 255, .7); padding: 1.25rem 1rem 3.5rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.home-footer a { color: #fff; }

/* study mode */
.study { text-align: center; padding: 6vh 0; }
.study-clock { font-size: clamp(4rem, 14vw, 10rem); font-weight: 800; letter-spacing: -.03em; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); line-height: 1; }
.study-timer { display: inline-block; margin-top: 2rem; padding: 1.25rem 1.75rem; border-radius: 22px; min-width: 300px; }
.study-modes { display: flex; gap: .35rem; justify-content: center; }
.study-modes button { background: transparent; color: var(--muted); border: 0; border-radius: 999px; padding: .3rem .8rem; font-weight: 600; }
.study-modes button.active { background: rgba(255, 255, 255, .14); color: #fff; }
.study-time { font-size: 3.5rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: .5rem 0 .75rem; }
.study-go { background: var(--sky); color: #0f1a33; border: 0; border-radius: 999px; padding: .4rem 1.4rem; font-weight: 700; }
.studying .hero, .studying .grove-grid, .studying #arrange-btn { display: none; }
.studying .study { display: block !important; }

/* settings modal on dark */
.home .modal-content { background: #16203a; color: #fff; border: 1px solid var(--glass-border); }
.home .modal-header, .home .modal-footer { border-color: var(--glass-border); }
.home .form-control { background: rgba(255, 255, 255, .08); border-color: var(--glass-border); color: #fff; }
.home .form-control::placeholder { color: var(--muted); }

@media (max-width: 767.98px) {
  .home-bar { padding: .75rem 1rem; }
  #arrange-btn { display: none; }
  .home-main { padding: 0 1rem 2rem; }
  .hero { padding: 2vh 0 3vh; }
  .photo-credit { position: static; display: inline-block; margin: 0 1rem; }
  .home-footer { padding-bottom: 1.5rem; }
}

/* search */
.search {
  position: relative; max-width: 640px; margin: 1.75rem auto 0; text-shadow: none;
}
.search .bi { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: #5f6b85; font-size: 1.1rem; }
.search input {
  width: 100%; border: 0; outline: 0; border-radius: 999px;
  padding: .95rem 1.25rem .95rem 3.1rem; font-size: 1.05rem; color: #1d2433;
  background: rgba(255, 255, 255, .95); box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}
.search input:focus { box-shadow: 0 0 0 4px rgba(143, 200, 242, .55), 0 8px 28px rgba(0, 0, 0, .3); }
.search input::placeholder { color: #7a8499; }
.search-hidden .search { display: none; }

/* game day */
.game-next { text-align: center; padding: .25rem 0 .5rem; }
.game-label { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--sky, #8fc8f2); }
.game-badge {
  display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 800;
  letter-spacing: .08em; background: var(--red); color: #fff;
}
.game-badge.live::before { content: "● "; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.game-matchup { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin: .35rem 0 .25rem; }
.game-when { font-weight: 600; }
.game-extra { color: var(--muted); font-size: .9rem; margin-top: .15rem; }
.game-list { list-style: none; padding: 0; margin: .75rem 0 0; border-top: 1px solid rgba(143, 200, 242, .35); }
.game-list li { display: flex; gap: .75rem; padding: .45rem 0; font-weight: 600; }
.game-list-when { color: var(--muted); min-width: 3.5rem; }
.gameday-pill { margin-right: .35rem; }
.gameday .gameday-pill { background: var(--red); border-color: transparent; box-shadow: 0 4px 18px rgba(206, 17, 38, .5); }
.home.gameday::before {
  box-shadow: inset 0 6px 0 var(--red);
}
@media (prefers-reduced-motion: reduce) { .game-badge.live::before { animation: none; } }

/* moments, trivia, snow, finals */
.moment-pill { margin-right: .35rem; background: rgba(143, 200, 242, .25); }
.hero-trivia {
  display: table; max-width: 640px; margin: 1rem auto 0; padding: .4rem .9rem; border-radius: 12px;
  font-size: .95rem; text-shadow: none; background: rgba(14, 21, 40, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.finals .study-btn { animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(206, 17, 38, .25); } }
.snow { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.snow span { position: absolute; top: -5%; color: #fff; opacity: .85; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh) translateX(30px); } }

/* countdowns */
.countdown-list { list-style: none; margin: 0; padding: 0; }
.countdown-list li { display: flex; align-items: center; gap: .9rem; padding: .45rem 0; }
.countdown-days {
  min-width: 3.4rem; text-align: center; font-weight: 800; font-size: 1.35rem; line-height: 1;
  padding: .4rem .3rem; border-radius: 12px; background: rgba(255, 255, 255, .1);
}
.countdown-days small { display: block; font-size: .65rem; font-weight: 600; color: var(--muted); margin-top: .15rem; }
.countdown-name { font-weight: 600; flex: 1; }
.countdown-remove { background: none; border: 0; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.countdown-remove:hover { color: var(--cream, #fff); }
.countdown-add { margin-top: .6rem; }
.countdown-add-btn { background: none; border: 0; color: var(--sky, #8fc8f2); font-weight: 600; padding: 0; }
.countdown-form { display: flex; gap: .4rem; flex-wrap: wrap; }
.countdown-form input {
  flex: 1 1 8rem; min-width: 0; border-radius: 10px; border: 1px solid var(--glass-border, #ccc);
  background: rgba(255, 255, 255, .08); color: inherit; padding: .35rem .6rem; color-scheme: dark;
}

/* on the square */
.square-name { font-size: 1.35rem; font-weight: 800; margin: .3rem 0 .2rem; }
.square-name a { text-decoration: none; }
.square-blurb { color: var(--cream, #fff); opacity: .85; }
.square-deal {
  display: inline-block; margin-top: .6rem; padding: .25rem .7rem; border-radius: 999px;
  background: rgba(224, 161, 0, .2); color: #ffd166; font-weight: 700; font-size: .85rem;
}

/* welcome */
.welcome-mark { width: 56px; height: 56px; font-size: 1.6rem; border-radius: 14px; margin: 0 auto; }
.role-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.role-choice {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .5rem;
  border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, .06);
  color: #fff; font-weight: 700;
}
.role-choice .bi { font-size: 1.5rem; color: var(--sky); }
.role-choice:hover, .role-choice:focus-visible { background: rgba(143, 200, 242, .15); border-color: var(--sky); }
.home .form-select { background-color: rgba(255, 255, 255, .08); border-color: var(--glass-border); color: #fff; }
.home .form-select option { color: #000; }

/* tonight in oxford */
.event-chips { display: flex; gap: .4rem; margin-bottom: .6rem; }
.event-chip {
  border: 1px solid var(--glass-border); background: transparent; color: var(--muted);
  border-radius: 999px; padding: .2rem .75rem; font-weight: 600; font-size: .85rem;
}
.event-chip.active { background: rgba(255, 255, 255, .14); color: var(--cream, #fff); }
.event-group + .event-group { margin-top: .75rem; }
.event-list { list-style: none; padding: 0; margin: .25rem 0 0; }
.event-list li { display: flex; gap: .8rem; padding: .45rem 0; border-top: 1px solid rgba(143, 200, 242, .2); }
.event-list li:first-child { border-top: 0; }
.event-time { min-width: 4.6rem; color: var(--muted); font-weight: 600; font-size: .9rem; padding-top: .1rem; }
.event-time.now { color: #7ee2a8; }
.event-list.with-day .event-time { min-width: 6.6rem; white-space: nowrap; }
.event-text { min-width: 0; }
.event-text a, .event-text > span { font-weight: 700; text-decoration: none; color: var(--cream, #fff); }
.event-text a:hover { text-decoration: underline; }
.event-meta { color: var(--muted); font-size: .85rem; }
.event-food {
  display: inline-block; margin-left: .4rem; padding: 0 .5rem; border-radius: 999px;
  background: rgba(126, 226, 168, .18); color: #7ee2a8; font-weight: 700; font-size: .75rem;
}

/* dining */
.dining-list { list-style: none; padding: 0; margin: .4rem 0 0; }
.dining-list li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid rgba(143, 200, 242, .2); }
.dining-list li:first-child { border-top: 0; }
.dining-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: rgba(255, 255, 255, .3); }
.is-open .dining-dot { background: #7ee2a8; box-shadow: 0 0 0 3px rgba(126, 226, 168, .2); }
.dining-text { flex: 1; min-width: 0; }
.dining-name { font-weight: 700; }
.is-closed .dining-name { color: var(--muted, rgba(255, 255, 255, .7)); }
.dining-status { color: var(--muted); font-size: .85rem; }
.dining-status.soon { color: #ffd166; }
.dining-list a { font-size: .8rem; font-weight: 700; color: var(--sky); text-decoration: none; }

/* my classes */
.class-next { padding-bottom: .25rem; }
.class-next-label { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin: .3rem 0 .15rem; }
.class-next-when { font-weight: 600; }
.class-pill { margin-right: .35rem; background: rgba(143, 200, 242, .25); }

/* game day extras */
.game-forecast { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .25rem .8rem;
  border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 600; font-size: .9rem; }
.game-forecast .bi { color: #ffd166; }
.game-note { margin-top: .6rem; color: #ffd166; font-weight: 600; font-size: .9rem; }
.game-tips { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid rgba(143, 200, 242, .35); }
.game-tip { padding: .2rem 0; font-size: .9rem; color: var(--muted); }
.game-tip a, .game-tip strong { color: var(--cream, #fff); font-weight: 700; text-decoration: none; }
.game-tip a:hover { text-decoration: underline; }

/* live score */
.game-score { text-align: center; padding: .25rem 0 .9rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(143, 200, 242, .35); }
.game-score-line { display: flex; align-items: baseline; justify-content: center; gap: .7rem; margin-top: .4rem; flex-wrap: wrap; }
.game-score-team { font-weight: 700; font-size: 1.05rem; }
.game-score-num { font-size: 2.1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.game-result { margin-top: .2rem; font-weight: 800; }
.is-win .game-result { color: #7ee2a8; }
.is-loss .game-result { color: var(--muted); }
.gameday-pill.live::before { content: "● "; color: #fff; animation: blink 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .gameday-pill.live::before { animation: none; } }
.gameday-pill.win, .gameday-pill.live { background: var(--red); border-color: transparent; box-shadow: 0 4px 18px rgba(206, 17, 38, .5); }

/* =====================================================================
   Southern editorial theme: serif headlines, cream on navy, hairlines,
   and cardinal red only for live / game-day moments.
   ===================================================================== */
.home {
  --cream: #f4efe6;
  --ink: #0c1426;
  --glass: rgba(12, 20, 38, .62);
  --hair: rgba(244, 239, 230, .14);
  --hair-strong: rgba(244, 239, 230, .28);
  --muted: rgba(244, 239, 230, .62);
  --sage: #a9c9a4;
  --gold: #dcc58f;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  color: var(--cream);
  background: var(--ink);
}
.home::before {
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(244, 239, 230, .10), transparent 65%),
    radial-gradient(900px 600px at 0% 100%, rgba(206, 17, 38, .16), transparent 60%),
    linear-gradient(170deg, #0e1830 0%, #14213d 50%, #1a1626 100%);
}
.home.has-photo::before {
  /* An oval of shade behind the headline, plus top and bottom shading, so cream type
     reads on bright photos without boxes. */
  background-image:
    radial-gradient(ellipse 62% 50% at 50% 30%, rgba(8, 12, 24, .58), transparent 74%),
    linear-gradient(180deg, rgba(8, 12, 24, .55) 0%, rgba(8, 12, 24, .3) 40%, rgba(8, 12, 24, .32) 62%, rgba(8, 12, 24, .7) 100%),
    var(--photo);
}
.home.gameday::before { box-shadow: inset 0 2px 0 var(--red); }
.home .text-muted { color: var(--muted) !important; }

/* small caps label used throughout */
.home .widget-head, .home .game-label, .hero-kicker, .hero-date, .home .study-btn,
.home .game-badge, .home .event-chip, .home .role-choice {
  font-family: "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .18em;
}

/* top bar */
.home .home-brand { font-weight: 600; letter-spacing: .02em; color: var(--cream); }
.home .brand-mark { width: 28px; height: 28px; border-radius: 7px; font-size: .9rem; }
.home .glass-btn { background: transparent; border: 1px solid var(--hair-strong); color: var(--cream); font-weight: 500; }
.home .glass-btn:hover { background: rgba(244, 239, 230, .08); }
.home .study-btn {
  background: transparent; color: var(--cream); border: 1px solid var(--hair-strong); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .68rem; font-weight: 600; box-shadow: none;
}
.home .study-btn:hover { background: rgba(244, 239, 230, .1); }
.home.finals .study-btn { border-color: var(--cream); }

/* hero */
.home .hero { padding: 3vh 0 5vh; text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.hero-kicker { font-size: .68rem; font-weight: 600; letter-spacing: .32em; opacity: .85; margin-bottom: 1.4rem; }
.home .hero-hello {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.005em; line-height: 1;
  font-size: clamp(2.9rem, 7.2vw, 6rem);
}
.home .hero-name { font-style: italic; border-bottom: 1px solid transparent; color: inherit; }
.home .hero-name:hover, .home .hero-name:focus-visible { border-bottom-color: var(--cream); color: inherit; }
.home .hero-name-input { font-style: italic; border-bottom: 1px solid var(--cream); }
.home .hero-date { font-size: .74rem; font-weight: 600; letter-spacing: .3em; margin-top: 1.1rem; opacity: .92; }
.hero-rule { width: 44px; height: 1px; margin: 1.3rem auto 0; background: var(--hair-strong); }

/* search */
.home .search { max-width: 560px; margin-top: 1.6rem; }
.home .search .bi { color: var(--cream); opacity: .7; left: 1.05rem; font-size: 1rem; z-index: 1; }
.home .search input {
  border-radius: 10px; padding: .8rem 1.1rem .8rem 2.8rem; font-size: 1rem; color: var(--cream);
  background: rgba(12, 20, 38, .5); border: 1px solid var(--hair-strong); box-shadow: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.home .search input::placeholder { color: var(--muted); }
.home .search input:focus { border-color: rgba(244, 239, 230, .6); box-shadow: none; }

/* one status line: only the first visible item shows, as quiet text with a dot */
.hero-status { margin-top: 1.25rem; min-height: 1.5rem; }
.hero-status > .hero-pill:not(.d-none) ~ .hero-pill:not(.d-none) { display: none !important; }
.home .hero-status .hero-pill {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  font-size: .92rem; font-weight: 500; letter-spacing: .01em; color: var(--cream);
}
.home .hero-status .hero-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cream); opacity: .7; animation: none;
}
.home .hero-status .gameday-pill::before, .home.gameday .hero-status .gameday-pill::before { background: var(--red); opacity: 1; }
.home .hero-status .gameday-pill.live::before { animation: blink 1.2s infinite; }
.home .hero-trivia {
  display: block; max-width: 560px; margin: 1.1rem auto 0; padding: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 14px rgba(0, 0, 0, .7);
}

/* cards */
.home .widget {
  border-radius: 14px; background: var(--glass); border: 1px solid var(--hair); box-shadow: none; color: var(--cream);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  animation: rise .5s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.home .widget-head { padding: 1.15rem 1.5rem .15rem; font-size: .68rem; font-weight: 600; color: var(--muted); }
.home .widget-head .updated { text-transform: none; letter-spacing: 0; font-size: .72rem; font-weight: 400; }
.home .widget-body { padding: .75rem 1.5rem 1.5rem; }
.home .widget-stale { color: var(--gold); background: rgba(220, 197, 143, .1); margin: .4rem 1.5rem 0; border-radius: 6px; }
.home .widget-note { color: var(--muted); }

/* serif numerals and headlines inside cards */
.home .wx-temp, .home .game-matchup, .home .game-score-num, .home .countdown-days, .home .class-next-label,
.home .square-name, .home .study-clock, .home .study-time, .home .news-list a {
  font-family: var(--serif); font-weight: 500; letter-spacing: 0;
  font-variant-numeric: lining-nums;  /* Cormorant's default old-style 1 looks like an I */
}
.home .hero-hello { font-variant-numeric: lining-nums; }
.home .countdown-days small { font-family: "Inter", system-ui, sans-serif; font-size: .58rem; letter-spacing: .08em; }
.home .game-label { font-size: .64rem; font-weight: 600; color: var(--muted); }

/* weather */
.home .wx-now .bi, .home .wx-hours .bi, .home .wx-hours .bi-moon-stars, .home .wx-hours .bi-cloud-moon { color: var(--cream); }
.home .wx-now .bi { font-size: 2.2rem; }
.home .wx-temp { font-size: 3.2rem; }
.home .wx-hours { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-weight: 500; font-size: .9rem; }
.home .wx-hours > div + div { border-left: 1px solid var(--hair); }
.home .wx-hours .bi { font-size: 1.35rem; opacity: .9; }

/* hairline dividers */
.home .news-list li, .home .event-list li, .home .dining-list li { border-top-color: var(--hair); }
.home .game-list, .home .game-tips, .home .game-score { border-color: var(--hair); }

/* news */
.home .news-list a { font-size: 1.3rem; line-height: 1.2; color: var(--cream); }
.home .news-list img { border-radius: 6px; filter: saturate(.85); }

/* game day */
.home .game-matchup { font-size: 2.1rem; }
.home .game-score-num { font-size: 2.6rem; }
.home .game-score-team { font-weight: 500; }
.home .game-badge {
  display: inline-flex; align-items: center; gap: .45rem; background: none; padding: 0;
  color: var(--cream); font-size: .64rem; font-weight: 700;
}
.home .game-badge::before, .home .game-badge.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.home .game-badge.live::before { animation: blink 1.2s infinite; }
.home .is-win .game-result { color: var(--sage); }
.home .game-forecast { background: rgba(244, 239, 230, .07); border: 1px solid var(--hair); }
.home .game-forecast .bi { color: var(--cream); }
.home .game-note { color: var(--gold); }

/* classes, countdowns, square */
.home .class-next-label { font-size: 2.1rem; }
.home .countdown-days {
  background: none; border: 1px solid var(--hair); font-size: 1.7rem; border-radius: 10px; min-width: 3.6rem;
}
.home .countdown-add-btn { color: var(--cream); opacity: .8; text-decoration: underline; text-underline-offset: 3px; }
.home .square-name { font-size: 1.8rem; }
.home .square-deal { background: rgba(220, 197, 143, .12); color: var(--gold); font-weight: 600; }

/* events and dining */
.home .event-chip { font-size: .62rem; border-color: var(--hair-strong); color: var(--muted); }
.home .event-chip.active { background: rgba(244, 239, 230, .12); color: var(--cream); }
.home .event-time.now { color: var(--sage); }
.home .event-food { background: rgba(169, 201, 164, .14); color: var(--sage); }
.home .is-open .dining-dot { background: var(--sage); box-shadow: none; }
.home .dining-status.soon { color: var(--gold); }
.home .dining-list a, .home .square-name a { color: var(--cream); }

/* quick links: outlined monochrome circles */
.home .links-grid .bi {
  width: 3rem; height: 3rem; border-radius: 50%; background: transparent; border: 1px solid var(--hair-strong);
  color: var(--cream); box-shadow: none; font-size: 1.15rem;
}
.home .links-grid a { color: var(--cream); font-weight: 500; }
.home .links-grid a:hover .bi { background: rgba(244, 239, 230, .1); transform: none; }

/* photo credit and footer */
.home .photo-credit { background: rgba(12, 20, 38, .45); border-color: var(--hair); font-size: .72rem; letter-spacing: .04em; }
.home .home-footer { color: var(--muted); font-size: .74rem; letter-spacing: .02em; }
.home .home-footer a { color: var(--cream); }

/* study mode */
.home .study-clock { font-size: clamp(4.5rem, 15vw, 11rem); font-weight: 400; }
.home .study-timer { border-radius: 14px; background: var(--glass); border: 1px solid var(--hair); }
.home .study-time { font-size: 3.6rem; }
.home .study-go { background: var(--cream); color: var(--ink); }
.home .study-modes button.active { background: rgba(244, 239, 230, .12); }

/* modals */
.home .modal-content { background: #111a2e; color: var(--cream); border: 1px solid var(--hair); border-radius: 14px; }
.home .modal-title, .home #welcome-title { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; }
.home .btn-grove { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.home .btn-grove:hover, .home .btn-grove:focus { background: #fff; border-color: #fff; color: var(--ink); }
.home .role-choice { border-color: var(--hair-strong); background: transparent; font-size: .66rem; color: var(--cream); }
.home .role-choice .bi { color: var(--cream); }
.home .role-choice:hover, .home .role-choice:focus-visible { background: rgba(244, 239, 230, .08); border-color: var(--cream); }
.home .form-control, .home .form-select { border-color: var(--hair-strong); }

@media (max-width: 767.98px) {
  .hero-kicker { margin-bottom: 1rem; }
  .home .widget-head { padding: 1rem 1.2rem .1rem; }
  .home .widget-body { padding: .7rem 1.2rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home .widget { animation: none; }
  .home .hero-status .gameday-pill.live::before, .home .game-badge.live::before { animation: none; }
}

/* =====================================================================
   Alternate looks, picked in Settings (body[data-theme]). Editorial above is the default.
   ===================================================================== */

/* ---------- Game Day: bold, condensed, scoreboard-like ---------- */
.home[data-theme="gameday"] {
  --serif: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --glass: rgba(10, 17, 36, .86);
  --hair: rgba(244, 239, 230, .1);
}
.home[data-theme="gameday"] .hero-hello {
  text-transform: uppercase; font-weight: 700; letter-spacing: .01em; font-size: clamp(3rem, 8vw, 6.6rem); line-height: .92;
}
.home[data-theme="gameday"] .hero-name { font-style: normal; color: var(--cream); box-shadow: inset 0 -.12em 0 var(--red); }
.home[data-theme="gameday"] .hero-kicker { color: var(--cream); }
.home[data-theme="gameday"] .widget { border-radius: 6px; border: 0; border-top: 3px solid var(--red); }
.home[data-theme="gameday"] .widget-head {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; color: var(--cream);
}
.home[data-theme="gameday"] .widget-head .updated { font-family: "Inter", sans-serif; color: var(--muted); }
.home[data-theme="gameday"] .wx-temp, .home[data-theme="gameday"] .game-matchup,
.home[data-theme="gameday"] .game-score-num, .home[data-theme="gameday"] .countdown-days,
.home[data-theme="gameday"] .class-next-label, .home[data-theme="gameday"] .square-name,
.home[data-theme="gameday"] .study-clock, .home[data-theme="gameday"] .study-time {
  font-weight: 700; text-transform: uppercase;
}
.home[data-theme="gameday"] .news-list a { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.05rem; }
.home[data-theme="gameday"] .game-score-num { font-size: 3.2rem; }
.home[data-theme="gameday"] .search input { background: #f4efe6; color: #0c1426; border: 0; border-radius: 6px; }
.home[data-theme="gameday"] .search input::placeholder { color: #5b6478; }
.home[data-theme="gameday"] .search .bi { color: #0c1426; }
.home[data-theme="gameday"] .hero-status .hero-pill {
  background: var(--red); padding: .35rem .9rem; border-radius: 4px; font-weight: 600; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .1em;
}
.home[data-theme="gameday"] .hero-status .hero-pill::before { background: #fff; }
.home[data-theme="gameday"] .hero-trivia { font-family: "Inter", sans-serif; font-style: normal; font-size: .9rem; }
.home[data-theme="gameday"] .links-grid .bi { border-radius: 6px; background: var(--red); border: 0; }
.home[data-theme="gameday"] .countdown-days { border-radius: 4px; background: rgba(206, 17, 38, .22); border: 0; }
.home[data-theme="gameday"] .study-btn { background: var(--red); border-color: var(--red); border-radius: 4px; }

/* ---------- Magnolia: light paper cards, navy serif, daytime ---------- */
.home[data-theme="magnolia"] .widget, .home[data-theme="magnolia"] .modal-content {
  --cream: #14213d;
  --muted: rgba(20, 33, 61, .58);
  --hair: rgba(20, 33, 61, .12);
  --hair-strong: rgba(20, 33, 61, .26);
  --sage: #4c7a47;
  --gold: #8a6a1c;
  background: rgba(250, 246, 238, .95); color: #14213d; border-color: rgba(20, 33, 61, .1);
  box-shadow: 0 12px 32px rgba(8, 12, 24, .22);
}
.home[data-theme="magnolia"] .widget-head .updated { color: rgba(20, 33, 61, .5); }
.home[data-theme="magnolia"] .game-score-team, .home[data-theme="magnolia"] .wx-hours,
.home[data-theme="magnolia"] .game-when, .home[data-theme="magnolia"] .dining-name { color: #14213d; }
.home[data-theme="magnolia"] .event-chip.active, .home[data-theme="magnolia"] .game-forecast { background: rgba(20, 33, 61, .07); }
.home[data-theme="magnolia"] .widget-stale { background: rgba(138, 106, 28, .1); }
.home[data-theme="magnolia"] .search input { background: rgba(250, 246, 238, .95); color: #14213d; border-color: transparent; }
.home[data-theme="magnolia"] .search input::placeholder { color: rgba(20, 33, 61, .5); }
.home[data-theme="magnolia"] .search .bi { color: #14213d; }
.home[data-theme="magnolia"] .modal-content .form-control, .home[data-theme="magnolia"] .modal-content .form-select {
  background: #fff; color: #14213d;
}
.home[data-theme="magnolia"] .modal-content .btn-close { filter: none; }
.home[data-theme="magnolia"] .modal-content .btn-grove { background: #14213d; border-color: #14213d; color: #f4efe6; }
.home[data-theme="magnolia"] .study-timer { background: rgba(250, 246, 238, .95); color: #14213d; }
.home[data-theme="magnolia"] .study-go { background: #14213d; color: #f4efe6; }
.home[data-theme="magnolia"] .study-timer .glass-btn, .home[data-theme="magnolia"] .study-modes button { color: #14213d; border-color: rgba(20, 33, 61, .26); }

/* ---------- Minimal: frosted glass, rounded, no serif ---------- */
.home[data-theme="minimal"] {
  --serif: "Inter", system-ui, -apple-system, sans-serif;
  --glass: rgba(18, 24, 38, .4);
}
.home[data-theme="minimal"] .hero-kicker, .home[data-theme="minimal"] .hero-rule { display: none; }
.home[data-theme="minimal"] .hero-hello { font-weight: 600; letter-spacing: -.03em; font-size: clamp(2.6rem, 6vw, 4.8rem); }
.home[data-theme="minimal"] .hero-name { font-style: normal; }
.home[data-theme="minimal"] .hero-date { text-transform: none; letter-spacing: 0; font-size: 1.15rem; font-weight: 500; }
.home[data-theme="minimal"] .widget {
  border-radius: 22px; border: 0;
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
}
.home[data-theme="minimal"] .widget-head, .home[data-theme="minimal"] .game-label,
.home[data-theme="minimal"] .game-badge, .home[data-theme="minimal"] .event-chip {
  text-transform: none; letter-spacing: 0;
}
.home[data-theme="minimal"] .widget-head { font-size: .95rem; font-weight: 600; color: var(--cream); }
.home[data-theme="minimal"] .game-label { font-size: .8rem; }
.home[data-theme="minimal"] .wx-temp, .home[data-theme="minimal"] .game-score-num,
.home[data-theme="minimal"] .study-clock, .home[data-theme="minimal"] .study-time,
.home[data-theme="minimal"] .countdown-days { font-weight: 300; letter-spacing: -.02em; }
.home[data-theme="minimal"] .game-matchup, .home[data-theme="minimal"] .class-next-label,
.home[data-theme="minimal"] .square-name { font-weight: 600; letter-spacing: -.02em; }
.home[data-theme="minimal"] .news-list a { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; }
.home[data-theme="minimal"] .search input { border-radius: 999px; border: 0; background: rgba(255, 255, 255, .14); }
.home[data-theme="minimal"] .hero-status .hero-pill {
  background: rgba(255, 255, 255, .14); padding: .35rem .9rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.home[data-theme="minimal"] .hero-trivia { font-family: "Inter", sans-serif; font-style: normal; font-size: .9rem; }
.home[data-theme="minimal"] .links-grid .bi { border: 0; background: rgba(255, 255, 255, .14); }
.home[data-theme="minimal"] .countdown-days { border: 0; background: rgba(255, 255, 255, .1); border-radius: 14px; }
.home[data-theme="minimal"] .glass-btn, .home[data-theme="minimal"] .study-btn { border: 0; background: rgba(255, 255, 255, .14); }
.home[data-theme="minimal"] .study-btn { text-transform: none; letter-spacing: 0; font-size: .85rem; }