body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 24px; color: #111; background: #f8f9fb; }
.card {  border-radius: 12px; padding: 20px; max-width: 780px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
h1 { margin: 0 0 12px; font-size: 22px; }
p { color: #374151; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.stat { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; text-align: center; }
.stat .label { font-size: 12px; color: #6b7280; }
.stat .value { font-weight: 700; font-size: 20px; margin-top: 6px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
button { appearance: none; border: 1px solid #1f2937; background: #111827; color: white; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
button[disabled] { opacity: 0.6; cursor: not-allowed; }
.muted { color: #6b7280; font-size: 13px; }
.logs { background: #0b1020; color: #e5e7eb; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; border-radius: 10px; padding: 12px; margin-top: 12px; font-size: 12px; max-height: 220px; overflow: auto; }
select { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; background: #fff; }
label { font-size: 13px; color: #374151; }
.game-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; padding: 5px; margin: 0 0 12px 0; }
.game-time { color: #000; font-size: 12px; margin: 2px 0 2px; }
.team-image { width: 50px; height: 50px; object-fit: contain; display: flex; align-items: center; justify-content: center; margin-bottom: -12px; }
.team-image img { max-width: 50px; max-height: 50px; width: auto; height: auto; }
.team-image svg { transform: translate(-50%, -50%); position: relative; left: 50%; top: 50%; }
.game-row .live-dot { position: absolute; top: -5px; left: -5px; width: 12px; height: 12px; background: #ef4444; border-radius: 9999px; box-shadow: 0 0 0 0 rgba(239,68,68,0.7); animation: pulse-live 1.5s infinite; }
@keyframes pulse-live { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
.team { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; padding: 12px 20px 12px 12px; border-radius: 12px 0 12px 0; position: relative; transform: skewX(-10deg); border-left: 7px solid; }
.team .left, .team .meta, .team .faces, .team .foot { transform: skewX(10deg); }
.team .left { display: inline-flex; align-items: center; gap: 6px; position: relative; padding-left: 0; }
.team .left .team-image { margin-right: 6px; }
.team .left span { color: white; font-weight: 800; }
.team .meta { color: rgba(255, 255, 255, 0.8); }
.team .meta { display: flex; flex-direction: column; line-height: 1.2; align-items: flex-end; text-align: right; margin-right: 70px; }
.team .meta .score { color: white; font-weight: 800; }
.team .meta .status { color: rgba(255, 255, 255, 0.7); font-size: 12px; margin-bottom: -12px; }
.team .left .home-icon { color: white; }
.team .foot { position: absolute; left: 79px; bottom: 2px; font-size: 12px; color: #aaa; }
.winner { opacity: 1; }
.team.winner .left span { color: white; }
.team.loser .left span { color: #bbb; }
.team.loser .meta .score { color: #bbb; }
.team.loser { filter: grayscale(100%); }
.home-icon { opacity: 0.1; position: absolute; left: 70px; top: 50%; transform: translateY(-50%); font-size: 44px; line-height: 1; pointer-events: none; }
.faces { display: inline-flex; gap: 6px; align-items: center; position: absolute; top: 0; right: 6px; }
.face {width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 5px solid #d1d5db;
    background-size: cover;
    background-position: center;
    margin-top: -7px;
    margin-right: -10px;
    position: relative;}
.face.explicit { border-color: inherit; }
.face.assigned { border-color: inherit; }
/* Winner/loser borders on completed games */
.team.winner .face { border-color: #16a34a; }
.team.loser .face { border-color: #b91c1c; }
/* Picked badge (explicit picker) */
.face.picked::after { content: "✓"; position: absolute; right: -7px; bottom: -7px; width: 18px; height: 18px; background: #000; color: #fff; border-radius: 9999px; border: 2px solid #fff; font-size: 14px; line-height: 14px; text-align: center; }
.team .foot {
    position: absolute;
    left: 78px;
    bottom: 2px;
    font-size: 12px;
}
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 12px; padding: 16px; width: 340px; border: 1px solid #e5e7eb; }
.modal h3 { margin: 0 0 12px; font-size: 16px; text-align: center; }
.face-choice { display: flex; gap: 16px; justify-content: center; }
.face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.face-card .pic { width: 72px; height: 72px; border-radius: 9999px; background-size: cover; background-position: center; border: 2px solid transparent; }
.face-card .label { font-size: 13px; color: #374151; }
.face-card:hover .pic { border-color: #2563eb; }

/* Week containers and headers */
.week-block { background: #ddd; border: 1px solid #444; border-radius: 10px; padding: 8px; margin: 10px 0; }
.week-block.alt { background: #a3c0e0; }
.week-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; position: sticky; top: 0; z-index: 5; background: inherit; backdrop-filter: saturate(180%) blur(2px); padding: 4px 2px; transform: skewX(-10deg); border-radius: 12px 0 12px 0; }
.week-head { background: #ffffffcc; padding: 0; /* border: 1px solid #e5e7eb; */ border-radius: 12px 0 12px 0; }
.week-head .week-title { font-weight: 800; padding:10px; transform: skewX(10deg); }
.week-scores { display: inline-flex; gap: 8px; align-items: center; transform: skewX(10deg); }
.week-scores span { display: inline-block;padding:10px;border-radius: 12px 0 12px 0; font-size: 16px; font-weight: 700; transform: skewX(-10deg); }
.week-scores .ashley { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e3a8a; }
.week-scores .brandi { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b; }

/* Mobile layout adjustments */
@media (max-width: 520px) {
  body { margin-left: 0; margin-right: 0; }
  #weeks-list-wrap { margin-left: -10px; margin-right: -10px; }
  .game-row { grid-template-columns: 1fr; gap: 8px; }
  .game-row::before { display: none; }
  .team { padding-right: 56px; }
  .faces { top: 2px; right: 6px; }
  .face { width: 40px; height: 40px; border-width: 5px; margin-top: -7px; }
  .team .left { padding-left: 0; }
  .home-icon { font-size: 36px; }
}

/* Mobile stacked team separator */

/* Settings gear button */
.settings-button { position: absolute; top: 10px; right: 10px; z-index: 60; background: transparent; border: none; color: #6b7280; cursor: pointer; padding: 6px; border-radius: 8px; }
.settings-button:hover { color: #111827; background: rgba(0,0,0,0.05); }

/* Page head layout */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head h1 { margin: 0; color: #fff;}
h2 { color: #fff;}

/* Center weeks container on desktop */
@media (min-width: 781px) {
  #weeks-container { margin-left: auto !important; margin-right: auto !important; background: #444;}
}

/* Season totals footer */
.season-footer { position: fixed; left: 0; right: 0; bottom: 0; background: #ffffff; border-top: 1px solid #e5e7eb; padding: 0; z-index: 55; }
.season-footer .season-inner { max-width: 780px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.season-footer .week-title { font-weight: 800; }
.season-footer .week-scores { display: inline-flex; gap: 8px; align-items: center; }
.season-footer .week-scores span { display: inline-block; border-radius: 12px 0 12px 0; padding: 10px; font-size: 16px; font-weight: 700; transform: skewX(-10deg); }
.season-footer .week-scores .ashley { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e3a8a; padding: 0 15px; transform: skewX(-20deg); }
.season-footer .week-scores .brandi { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b; padding: 0 15px; transform: skewX(-20deg); }

body { padding-bottom: 56px; }