/* ============================================================
   CAPRON'S CUP — Application Styles
   Built on the Vintage Hockey Crest Design System
   ============================================================ */

/* ---------- Typography (varsity pairing) ---------- */
:root {
  --font-display: "Big Shoulders Display", sans-serif;
  --font-head: "Libre Caslon Display", serif;
  --font-body: "Spectral", serif;
  --display-tracking: 0.01em;
  --display-weight: 800;

  /* palette */
  --paper:      #e8ddc4;
  --paper-2:    #e0d3b6;
  --paper-deep: #d6c7a4;
  --cream:      #f4ecd9;
  --ink:        #211a10;
  --ink-soft:   #5a4a33;
  --ink-faint:  #8a785a;

  --red:        #8f2a1e;
  --red-bright: #b13a29;
  --navy:       #1c3245;
  --gold:       #ad8129;
  --gold-bright:#cda23f;
  --green:      #2c4632;

  /* nation crest colors */
  --can: #9c2b22;
  --usa: #1f3a5f;
  --swe: #2456a6;
  --fin: #5f93b5;

  --rule: rgba(33, 26, 16, 0.28);
  --rule-soft: rgba(33, 26, 16, 0.14);

  --shadow-card: 0 2px 0 rgba(33,26,16,0.10), 0 18px 40px -22px rgba(33,26,16,0.55);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #1c1813;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Loading ---------- */
.view-loading {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--navy);
}
.loading-inner {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.loading-puck {
  width: 24px; height: 10px;
  background: var(--gold-bright);
  border-radius: 5px;
  animation: puck-slide 1s ease-in-out infinite alternate;
}
@keyframes puck-slide {
  0% { transform: translateX(-30px); opacity: 0.5; }
  100% { transform: translateX(30px); opacity: 1; }
}
.loading-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 13px;
  color: rgba(244, 236, 217, 0.6);
}

/* ---------- Paper texture ---------- */
.paper {
  position: relative;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,250,235,0.55), rgba(255,250,235,0) 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(33,26,16,0.18), rgba(33,26,16,0) 55%);
}
.paper::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.paper > * { position: relative; z-index: 1; }

/* ---------- Shared components ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase; line-height: 0.92;
  color: var(--ink); margin: 0;
}
.kicker {
  font-family: var(--font-body); font-style: italic;
  color: var(--ink-soft); font-size: 16px;
}
.btn {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 15px;
  padding: 14px 22px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--cream);
  cursor: pointer; border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(33,26,16,0.25);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(33,26,16,0.3); }
.btn.gold { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn.gold:hover { background: #d4ae52; }
.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: none; border-color: var(--rule);
}
.btn:disabled {
  opacity: 0.5; cursor: not-allowed;
  transform: none; box-shadow: 3px 3px 0 rgba(33,26,16,0.25);
}

/* ============================================================
   CREST
   ============================================================ */
.crest {
  position: relative; width: 230px; height: 230px;
  display: grid; place-items: center;
}
.crest .ring-text { position: absolute; inset: 0; }
.crest .ring-text text {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13.5px; letter-spacing: 0.16em; fill: var(--ink);
  text-transform: uppercase;
}
.crest-core {
  width: 150px; height: 150px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #f4ecd9, #e3d4b2 70%, #d2bf95);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--ink);
  display: grid; place-items: center; position: relative;
}
.crest-core::before {
  content: ""; position: absolute; width: 120px; height: 120px;
  border-radius: 50%; border: 1px dashed rgba(33,26,16,0.35);
}
.crest .sticks { position: absolute; width: 150px; height: 150px; }
.crest .sticks i {
  position: absolute; left: 50%; top: 50%;
  width: 116px; height: 7px; background: var(--ink);
  border-radius: 3px; transform-origin: center;
  opacity: 0.9; display: block; font-style: normal;
}
.crest .sticks i:nth-child(1) { transform: translate(-50%,-50%) rotate(38deg); }
.crest .sticks i:nth-child(2) { transform: translate(-50%,-50%) rotate(-38deg); }
.crest .sticks i::after {
  content: ""; position: absolute; right: -2px; top: -4px;
  width: 16px; height: 15px; background: var(--ink); border-radius: 2px 3px 4px 1px;
}
.crest .monogram {
  position: relative; z-index: 2;
  font-family: var(--font-head); font-weight: 700;
  font-size: 58px; color: var(--ink); line-height: 1;
  text-shadow: 0 1px 0 rgba(244,236,217,0.7);
}
.crest .puck {
  position: absolute; bottom: 30px; width: 16px; height: 6px;
  background: var(--ink); border-radius: 3px; z-index: 2;
}

/* Small crest for app view */
.crest-sm {
  width: 120px; height: 120px;
}
.crest-sm .crest-core {
  width: 80px; height: 80px;
}
.crest-sm .crest-core::before {
  width: 62px; height: 62px;
}
.crest-sm .sticks { width: 80px; height: 80px; }
.crest-sm .sticks i { width: 60px; height: 4px; }
.crest-sm .sticks i::after { width: 10px; height: 9px; top: -2px; right: -1px; }
.crest-sm .monogram { font-size: 30px; }
.crest-sm .puck { bottom: 16px; width: 10px; height: 4px; }

/* Ribbon */
.ribbon {
  display: inline-block; position: relative; white-space: nowrap;
  background: var(--red); color: var(--cream);
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
  padding: 8px 22px; border: 1px solid rgba(33,26,16,0.4);
  box-shadow: inset 0 0 0 1px rgba(244,236,217,0.3);
}
.ribbon::before, .ribbon::after {
  content: ""; position: absolute; top: 0; width: 0; height: 0;
  border-top: 16px solid var(--red); border-bottom: 16px solid var(--red);
}
.ribbon::before { left: -12px; border-left: 12px solid transparent; }
.ribbon::after  { right: -12px; border-right: 12px solid transparent; }

/* ============================================================
   LOGIN LAYOUT
   ============================================================ */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.login .hero {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  padding: 70px;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(244,236,217,0.5), rgba(244,236,217,0) 70%);
  overflow: hidden;
}
.login .hero::after {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  border: 2px solid rgba(28,50,69,0.16);
  box-shadow: 0 0 0 40px rgba(143,42,30,0.05), inset 0 0 0 90px rgba(28,50,69,0.04);
  z-index: 0;
}
.login .hero > * { position: relative; z-index: 1; }

.login .wordmark { text-align: center; line-height: 0.86; }
.login .wordmark .l1 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  text-transform: uppercase; font-size: 88px; letter-spacing: 0.01em;
  color: var(--ink); display: block;
}
.login .wordmark .l2 {
  font-family: var(--font-head); font-style: italic;
  font-size: 64px; color: var(--red); display: block; margin-top: -6px;
}
.login .meta-row {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 13px; color: var(--ink-soft);
}
.login .meta-row .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* Right panel */
.login .panel {
  background: linear-gradient(180deg, var(--navy), #16283a);
  color: var(--cream); padding: 80px 64px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.login .panel::before {
  content: ""; position: absolute; inset: 16px;
  border: 1px solid rgba(244,236,217,0.18); pointer-events: none;
}
.login .panel .panel-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 380px;
}
.login .panel .p-eyebrow {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; font-size: 12px;
  color: var(--gold-bright);
}
.login .panel h2 {
  font-family: var(--font-head); font-size: 40px; margin: 0; line-height: 1;
}

/* Form fields */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,236,217,0.65);
}
.field input {
  font-family: var(--font-body); font-size: 17px; color: var(--cream);
  background: rgba(244,236,217,0.06); border: 1px solid rgba(244,236,217,0.28);
  padding: 13px 15px; border-radius: 2px; outline: none;
  transition: border-color 0.15s ease;
}
.field input:focus {
  border-color: var(--gold-bright);
}
.field input::placeholder { color: rgba(244,236,217,0.4); }

.login .panel form .btn {
  width: 100%; text-align: center; margin-top: 8px;
}

.login .alt {
  text-align: center; font-size: 14px; color: rgba(244,236,217,0.7);
}
.login .alt a {
  color: var(--gold-bright); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.login .alt a:hover { color: #d4ae52; }

.login .panel-foot {
  position: absolute; bottom: 24px; left: 64px; right: 64px;
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(244,236,217,0.45); letter-spacing: 0.05em;
}

/* Sent / error states */
.sent-msg {
  font-size: 17px; line-height: 1.6; color: rgba(244,236,217,0.85);
  margin-bottom: 8px;
}
.sent-msg strong { color: var(--gold-bright); }
.sent-sub {
  font-size: 14px; color: rgba(244,236,217,0.55);
  font-style: italic; margin-bottom: 24px;
}
.alt-link {
  color: var(--gold-bright); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font-size: 14px;
}
.alt-link:hover { color: #d4ae52; }
.error-msg {
  font-size: 16px; line-height: 1.6; color: rgba(244,236,217,0.75);
  margin-bottom: 20px;
}

/* Form status messages */
.form-status {
  font-size: 14px; padding: 10px 14px; border-radius: 2px;
  margin-top: 8px;
}
.form-status.error {
  background: rgba(143,42,30,0.2); border: 1px solid rgba(143,42,30,0.4);
  color: #f0a8a0;
}

/* ============================================================
   APP VIEW (authenticated placeholder)
   ============================================================ */
.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 44px; gap: 20px;
  background: var(--ink); color: var(--cream);
}
.app-brand {
  display: flex; align-items: center; gap: 14px;
}
.mini-crest {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--gold-bright);
  font-family: var(--font-head); font-size: 16px; color: var(--gold-bright);
}
.brand-name {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 19px;
}
.app-user {
  flex-shrink: 0;
}
.user-info {
  text-align: right; line-height: 1.2;
}
.user-sub-row {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  margin-top: 2px;
}
.user-name {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; color: var(--gold-bright);
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.user-role {
  display: block;
  font-size: 10px; color: rgba(244,236,217,0.45);
  letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-display);
}
.logout-btn {
  background: none; color: rgba(244,236,217,0.5);
  border: none; box-shadow: none;
  font-size: 11px; padding: 0;
  cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.logout-btn:hover {
  color: var(--gold-bright);
  transform: none;
}

/* Tournament selector bar (persistent, below nav) */
.tournament-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 44px;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule-soft);
}
.tournament-bar-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 11px; color: var(--ink-faint);
}
.tournament-bar-select {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 14px; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--rule);
  padding: 6px 28px 6px 12px; border-radius: 2px;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a4a33' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.app-body {
  min-height: calc(100vh - 110px);
  display: grid; place-items: center;
}
.app-placeholder {
  text-align: center; padding: 80px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.app-welcome-heading {
  font-size: 48px;
}

/* ============================================================
   NAV TABS
   ============================================================ */
.app-nav {
  display: flex; gap: 4px;
}
.nav-item {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 13px; color: rgba(244,236,217,0.65);
  padding: 9px 16px; text-decoration: none; border-radius: 2px;
  cursor: pointer;
}
.nav-item:hover { color: rgba(244,236,217,0.85); }
.nav-item.active { color: var(--ink); background: var(--gold-bright); }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-wrap {
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: 40px 32px 60px;
  display: flex; flex-direction: column; gap: 28px;
}
.admin-header {
  display: flex; flex-direction: column; gap: 8px;
}
.admin-title { font-size: 42px; }

.admin-card {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.admin-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  background: var(--ink); color: var(--cream);
}
.admin-card-head h2 {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 16px;
  margin: 0;
}
.admin-form {
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.admin-form-inline {
  flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px;
}
.admin-form-inline .admin-field { flex: 1; min-width: 200px; }
.admin-field {
  display: flex; flex-direction: column; gap: 6px;
}
.admin-field label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.admin-field input, .admin-field select {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  padding: 10px 12px; border-radius: 2px; outline: none;
}
.admin-field input:focus, .admin-field select:focus {
  border-color: var(--gold);
}
.btn-sm {
  font-size: 12px; padding: 8px 16px;
}
.btn.red { background: var(--red); border-color: var(--red); color: var(--cream); }
.btn.red:hover { background: var(--red-bright); }
.admin-empty {
  padding: 22px; color: var(--ink-soft); font-style: italic; text-align: center;
}

/* Tournament list items */
.t-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background 0.1s ease;
}
.t-list-item:last-child { border-bottom: none; }
.t-list-item:hover { background: rgba(173,129,41,0.08); }
.t-list-left {
  display: flex; align-items: center; gap: 14px;
}
.t-list-name {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px;
}
.t-list-year {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--ink-soft);
}
.t-list-right {
  display: flex; align-items: center; gap: 14px;
}
.t-list-meta {
  font-size: 13px; color: var(--ink-soft); font-style: italic;
}

/* Status badges */
.status-badge {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  padding: 5px 12px; border-radius: 2px;
}
.status-badge.upcoming     { background: var(--paper-deep); color: var(--ink-soft); }
.status-badge.round_robin  { background: rgba(28,50,69,0.15); color: var(--navy); }
.status-badge.final        { background: rgba(173,129,41,0.2); color: var(--gold); }
.status-badge.complete     { background: rgba(44,70,50,0.15); color: var(--green); }

/* Detail sections */
.detail-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--rule-soft);
}
.detail-section:last-child { border-bottom: none; }
.detail-section h3 {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px;
  color: var(--red); margin: 0 0 14px;
}
.detail-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.detail-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  color: var(--ink-soft);
}
.detail-danger {
  padding-top: 24px;
}

/* Game cards in admin */
.game-card {
  background: var(--paper); border: 1px solid var(--rule-soft);
  border-radius: 2px; padding: 16px 18px;
  margin-bottom: 10px;
}
.game-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.game-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
  color: var(--ink-soft);
}
.game-matchup {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.game-matchup .vs {
  font-size: 14px; color: var(--ink-soft); font-style: italic;
  font-family: var(--font-body); font-weight: 400;
}
.game-matchup .flag-sm {
  width: 22px; height: 16px; border-radius: 2px;
  display: inline-grid; place-items: center;
  color: #f4ecd9; font-size: 9px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.game-result-show {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--green); margin-top: 6px;
}
.game-result-show .ot-tag {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
}
.game-predictions {
  font-size: 12px; color: var(--ink-faint); font-style: italic;
}
.game-result-form {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
}
.game-result-form .admin-field { min-width: 0; }
.game-result-form .admin-field.short { width: 70px; flex: none; }
.game-result-form .admin-field.winner-field { flex: 1; min-width: 130px; }
.game-result-form .ot-field {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
  color: var(--ink-soft); padding-bottom: 2px;
}
.game-result-form .ot-field input[type="checkbox"] {
  width: 16px; height: 16px;
}

/* Admin standings table adjustments */
.admin-standings {
  width: 100%; margin-top: 8px;
}
.admin-standings tbody td {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Toast notification */
.admin-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  padding: 14px 24px; border-radius: 2px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  animation: toast-in 0.25s ease;
}
.admin-toast.success { background: var(--green); color: var(--cream); }
.admin-toast.error   { background: var(--red); color: var(--cream); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   EYEBROW & RULE-DOUBLE (shared vintage components)
   ============================================================ */
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.32em;
  font-size: 12px; font-weight: 700; color: var(--red);
}
.rule-double {
  border: 0; height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-top: 3px;
  margin: 0;
}

/* ============================================================
   BRACKET / MY PICKS
   ============================================================ */
.bracket-wrap {
  width: 100%; max-width: 1000px; margin: 0 auto;
  padding: 40px 32px 60px;
  display: flex; flex-direction: column; gap: 32px;
}

/* Tournament selector */
.bracket-selector {
  display: flex; align-items: center; gap: 12px;
}
.bracket-selector-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  color: var(--ink-soft);
}
.bracket-select {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--rule);
  padding: 8px 12px; border-radius: 2px;
}

/* Section header */
.bracket-header {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bracket-title { font-size: 48px; }
.bracket-header .kicker { margin: 0; }
.bracket-header .rule-double { width: 100%; margin-top: 6px; }

/* Status bar */
.bracket-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
}
.pick-counter {
  display: flex; align-items: baseline; gap: 4px;
}
.pick-count {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 1; color: var(--ink);
}
.pick-total {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px;
  color: var(--ink-soft);
}
.lock-countdown {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
  color: var(--red);
}

/* Section titles */
.bracket-section-title {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px;
  color: var(--red); margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.bracket-section-title--final {
  color: var(--gold);
  font-size: 20px;
  letter-spacing: 0.2em;
  text-align: center;
}

/* Game cards grid */
.bracket-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Individual pick card */
.pick-card {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: border-color 0.15s ease;
}
.pick-card--warning {
  border-color: #b8860b;
  box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.3), var(--shadow-card);
}
.pick-card--locked {
  opacity: 0.7;
}
.pick-card--locked::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(232, 221, 196, 0.35);
  pointer-events: none;
  border-radius: 2px;
}

/* Final card special */
.pick-card--final {
  background: linear-gradient(180deg, #18283a, #101d2c);
  color: var(--cream);
  border-color: var(--gold);
  padding: 28px;
}
.pick-card--final .pick-vs { color: rgba(244,236,217,0.5); }
.pick-card--final .pick-team-name { color: var(--cream); }
.pick-card--final .pick-team-code { color: rgba(244,236,217,0.8); }
.pick-card--final .pick-prompt { color: rgba(244,236,217,0.5); }
.pick-card--final .pick-check { color: var(--gold-bright); }
.pick-card--final .pick-card-lock-badge {
  background: rgba(205,162,63,0.2); color: var(--gold-bright);
  border-color: rgba(205,162,63,0.4);
}
.final-matchup {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.final-matchup .pick-team {
  flex: 1; max-width: 200px;
}
.pick-vs--final {
  font-size: 20px;
}

.pick-card-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  color: var(--ink-soft);
}
.pick-card-label--final {
  text-align: center;
  color: var(--gold-bright);
  font-size: 13px;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.pick-card-lock-badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
  padding: 3px 8px; border-radius: 2px;
  background: rgba(33,26,16,0.08); color: var(--ink-faint);
  border: 1px solid var(--rule-soft);
}

/* Team block inside pick card */
.pick-team {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 8px;
  border: 2px solid transparent;
  border-radius: 3px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.pick-team--interactive {
  cursor: pointer;
}
.pick-team--interactive:hover {
  background: rgba(173,129,41,0.06);
  border-color: var(--rule);
}
.pick-team--selected {
  background: rgba(173,129,41,0.08);
}
.pick-team--winner {
  background: rgba(44,70,50,0.08);
  border-color: var(--green);
}

.pick-team-logo {
  width: 48px; height: 48px;
  object-fit: contain;
  border-radius: 2px;
}
.pick-team-code {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px;
  padding: 3px 10px; border-radius: 2px;
  color: var(--cream);
}
.pick-team-code.can { background: var(--can, #9c2b22); }
.pick-team-code.usa { background: var(--usa, #1f3a5f); }
.pick-team-code.swe { background: var(--swe, #2456a6); }
.pick-team-code.fin { background: var(--fin, #5f93b5); }

.pick-team-name {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px;
  color: var(--ink);
}

.pick-check {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
  color: var(--gold);
}

.pick-vs {
  font-family: var(--font-body); font-style: italic;
  font-size: 15px; color: var(--ink-faint);
  text-align: center; padding: 2px 0;
}

.pick-result {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 8px; margin-top: 4px;
  border-top: 1px solid var(--rule-soft);
}
.pick-result--final {
  border-top-color: rgba(205,162,63,0.3);
}
.pick-score {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: var(--ink);
}
.pick-card--final .pick-score { color: var(--cream); }
.pick-ot {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
}
.pick-card--final .pick-ot { color: rgba(244,236,217,0.5); }

.pick-verdict {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
  padding: 3px 10px; border-radius: 2px;
}
.pick-verdict--correct {
  background: rgba(44,70,50,0.15); color: var(--green);
}
.pick-verdict--wrong {
  background: rgba(143,42,30,0.12); color: var(--red);
}

.pick-prompt {
  text-align: center; font-style: italic;
  font-size: 13px; color: var(--ink-faint);
  padding: 4px 0;
}

/* Standings predictions */
.standings-predict {
  display: flex; flex-direction: column; gap: 10px;
}
.standings-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}
.standings-row--locked {
  opacity: 0.7;
}
.standings-pos {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; width: 40px; text-align: center;
  color: var(--ink);
}
.standings-select {
  flex: 1;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  padding: 10px 12px; border-radius: 2px; outline: none;
}
.standings-select:focus { border-color: var(--gold); }
.standings-select:disabled {
  opacity: 0.6; cursor: not-allowed;
}
.standings-verdict {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
  padding: 3px 10px; border-radius: 2px;
  white-space: nowrap;
}
.standings-verdict--correct {
  background: rgba(44,70,50,0.15); color: var(--green);
}
.standings-verdict--wrong {
  background: rgba(143,42,30,0.12); color: var(--red);
}
.standings-lock-icon {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
  color: var(--ink-faint);
}

/* Save button area */
.bracket-actions {
  display: flex; justify-content: center;
  padding-top: 8px;
}
.bracket-save-btn {
  font-size: 17px; padding: 16px 40px;
}

/* ─── Score Display ─────────────────────────────────────────── */
.score-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(173,129,41,0.15), 0 18px 40px -22px rgba(33,26,16,0.45);
}

.score-total {
  display: flex; align-items: baseline; gap: 2px;
}
.score-total-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  color: var(--ink-soft);
  margin-right: 10px;
}
.score-total-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 42px; line-height: 1;
  color: var(--gold);
}
.score-total-denom {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1;
  color: var(--ink-faint);
}

.score-breakdown {
  display: flex; align-items: center; gap: 16px;
}
.score-cat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.score-cat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; line-height: 1;
  color: var(--gold);
}
.score-cat-max {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; line-height: 1;
  color: var(--ink-faint);
  margin-top: -2px;
}
.score-cat-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
  color: var(--ink-soft);
}
.score-cat-sep {
  width: 1px; height: 32px;
  background: var(--rule-soft);
}

/* ─── Pick Verdict Icons ───────────────────────────────────── */
.pick-verdict--correct {
  background: rgba(44,70,50,0.15); color: var(--green);
}
.pick-verdict--wrong {
  background: rgba(143,42,30,0.12); color: var(--red);
}
.pick-mark {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; line-height: 1;
  margin-left: 4px;
}
.pick-mark--correct { color: var(--gold); }
.pick-mark--wrong { color: var(--ink-faint); opacity: 0.5; }

/* Empty state */
.bracket-empty {
  text-align: center; padding: 60px 20px;
  color: var(--ink-soft); font-style: italic;
  font-size: 16px;
}

/* ============================================================
   LEADERBOARD / THE TABLE
   ============================================================ */
.lb-wrap {
  width: 100%; max-width: 1000px; margin: 0 auto;
  padding: 40px 44px 52px;
}
.lb-selector {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.lb-title { font-size: 52px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }
.section-head .titles h1 { font-size: 52px; }
.section-head .updated {
  font-family: var(--font-body); font-style: italic; color: var(--ink-soft); font-size: 14px;
}

/* podium */
.podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 26px 0 34px; }
.pod-card {
  position: relative; background: var(--cream);
  border: 1.5px solid var(--ink); border-radius: 3px;
  padding: 22px 22px 20px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 12px;
}
.pod-card.first { background: linear-gradient(180deg, #f6ecca, #efe0b4); }
.pod-rank {
  position: absolute; top: -16px; left: 22px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  border: 2px solid var(--paper);
}
.pod-card.first .pod-rank { background: var(--gold); color: var(--ink); }
.pod-top { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.pod-top .name { font-family: var(--font-head); font-size: 25px; line-height: 1; }
.pod-stats { display: flex; gap: 26px; border-top: 1px solid var(--rule-soft); padding-top: 12px; }
.pod-stat .v { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.pod-stat .l { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; color: var(--ink-soft); }
.pod-pick { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.cup-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 11px; color: var(--gold);
}

/* nation badge */
.nation {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.08em;
}
.nation .flag, .flag {
  width: 30px; height: 22px; border-radius: 2px; flex: none;
  display: inline-grid; place-items: center;
  color: #f4ecd9; font-size: 11px; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.18);
}
.flag.can { background: var(--can); }
.flag.usa { background: var(--usa); }
.flag.swe { background: var(--swe); }
.flag.fin { background: var(--fin); }

/* monogram avatar (also used in design-reference) */
.mono {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  color: var(--cream); letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 2px rgba(244,236,217,0.6), inset 0 0 0 3px rgba(33,26,16,0.25);
}

/* standings table */
.standings { width: 100%; border-collapse: collapse; background: var(--cream);
  border: 1.5px solid var(--ink); box-shadow: var(--shadow-card); }
.standings thead th {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 11px; color: var(--cream);
  background: var(--ink); padding: 13px 16px; text-align: left;
}
.standings th.num, .standings td.num { text-align: right; }
.standings tbody td { padding: 14px 16px; border-top: 1px solid var(--rule-soft); font-size: 16px; }
.standings tbody tr:nth-child(even) { background: rgba(33,26,16,0.035); }
.standings tbody tr.you { background: rgba(173,129,41,0.12); box-shadow: inset 3px 0 0 var(--gold); }
.standings .rk { font-family: var(--font-display); font-weight: 800; font-size: 18px; width: 54px; }
.standings .player { display: flex; align-items: center; gap: 13px; }
.standings .player .pn { font-family: var(--font-head); font-size: 19px; line-height: 1; }
.standings .pts { font-family: var(--font-display); font-weight: 800; font-size: 20px; }

/* clickable leaderboard rows */
.lb-row { cursor: pointer; transition: background 0.1s ease; }
.lb-row:hover { background: rgba(173,129,41,0.08) !important; }
.lb-row.you { cursor: default; }
.lb-row.you:hover { background: rgba(173,129,41,0.12) !important; }

.you-tag {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
  color: var(--gold); margin-left: 6px;
}

/* ============================================================
   HONOUR ROLL
   ============================================================ */
.honour {
  margin-top: 0;
  background:
    linear-gradient(180deg, rgba(44,70,50,0.96), rgba(28,46,33,0.98));
  color: #ece2c6; border: 1.5px solid var(--ink); box-shadow: var(--shadow-card);
  padding: 34px 40px 40px; position: relative;
}
.honour::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(205,162,63,0.35); pointer-events: none; }
.honour .hh { text-align: center; margin-bottom: 26px; position: relative; z-index: 1; }
.honour .hh .he { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; font-size: 12px; color: var(--gold-bright); }
.honour .hh .ht { font-family: var(--font-head); font-size: 38px; margin-top: 4px; color: #f4ecd9; }
.honour .hh .hm { font-style: italic; color: rgba(236,226,198,0.7); font-size: 14px; margin-top: 6px; }
.roll { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 48px; position: relative; z-index: 1; }
.roll-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px;
  padding: 13px 4px; border-bottom: 1px dotted rgba(236,226,198,0.28);
}
.roll-row .yr { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--gold-bright); width: 64px; }
.roll-row .wn { font-family: var(--font-head); font-size: 21px; }
.roll-row .nn { font-size: 13px; color: rgba(236,226,198,0.7); font-style: italic; }
.roll-row.reign .wn::after { content: " ★"; color: var(--gold-bright); }

/* ============================================================
   CONSENSUS
   ============================================================ */
.consensus-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.consensus-card {
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.consensus-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
  color: var(--ink-soft); margin-bottom: 8px;
}
.consensus-bar-wrap {
  margin-bottom: 6px;
}
.consensus-bar {
  display: flex; height: 24px; border-radius: 2px; overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.consensus-fill {
  transition: width 0.3s ease;
  min-width: 0;
  /* Reset flag styles when used as bar fill */
  width: auto; height: 100%;
  box-shadow: none;
  display: block;
}
.consensus-fill--home { border-radius: 2px 0 0 2px; }
.consensus-fill--away { border-radius: 0 2px 2px 0; }
.consensus-fill.can { background: var(--can); }
.consensus-fill.usa { background: var(--usa); }
.consensus-fill.swe { background: var(--swe); }
.consensus-fill.fin { background: var(--fin); }
.consensus-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
  color: var(--ink-soft);
}
.consensus-team {
  display: flex; align-items: center; gap: 6px;
}

/* ============================================================
   BRACKET COMPARISON
   ============================================================ */
.compare-header {
  margin-bottom: 20px;
}
.compare-score-cards {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-bottom: 28px;
}
.compare-score-card {
  flex: 1; max-width: 300px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.compare-who {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px;
  color: var(--ink-soft); margin-bottom: 6px;
}
.compare-pts {
  font-family: var(--font-display); font-weight: 800;
  font-size: 48px; line-height: 1;
  color: var(--gold);
}
.compare-breakdown {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px;
  color: var(--ink-faint); margin-top: 6px;
}
.compare-vs {
  font-family: var(--font-body); font-style: italic;
  font-size: 18px; color: var(--ink-faint);
}

.compare-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.compare-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 12px 16px;
}
.compare-row--final {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(24,40,58,0.04), rgba(16,29,44,0.06));
}
.compare-row--agree {
  background: rgba(44,70,50,0.06);
}
.compare-cell { text-align: center; }
.compare-my { text-align: right; }
.compare-their { text-align: left; }
.compare-center { text-align: center; }
.compare-game-label {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
  color: var(--ink-soft);
}
.compare-matchup {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.compare-result {
  margin-top: 4px;
}
.compare-score-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--ink-soft);
}
.compare-standings-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.compare-standing-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--cream);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 44px;
  background: var(--ink); color: rgba(244,236,217,0.5);
  font-family: var(--font-body); font-size: 13px;
  border-top: 1px solid rgba(244,236,217,0.1);
}
.footer-left { font-style: italic; }
.footer-right { font-size: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .login {
    grid-template-columns: 1fr;
  }
  .login .hero {
    padding: 48px 32px;
    min-height: auto;
  }
  .login .wordmark .l1 { font-size: 52px; }
  .login .wordmark .l2 { font-size: 40px; }
  .login .panel { padding: 48px 32px 64px; }
  .login .panel-foot { left: 32px; right: 32px; }
  .login .meta-row { font-size: 11px; gap: 12px; }

  /* Topbar stacks on tablet */
  .app-topbar { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }

  /* Nav tabs: scroll horizontally instead of overflow */
  .app-nav {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; gap: 2px;
    scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  /* Ensure touch targets are at least 44px */
  .nav-item { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 9px 14px; }

  .app-welcome-heading { font-size: 32px; }
  .admin-wrap { padding: 24px 16px 48px; }
  .admin-title { font-size: 30px; }
  .admin-form-inline { flex-direction: column; }
  .game-result-form { flex-direction: column; align-items: stretch; }
  .game-result-form .admin-field.short { width: 100%; }

  /* Bracket responsive */
  .bracket-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .bracket-title { font-size: 36px; }
  .bracket-wrap { padding: 24px 16px 48px; }
  .bracket-status { flex-direction: column; gap: 8px; align-items: flex-start; }
  .score-display { flex-direction: column; gap: 12px; align-items: flex-start; }
  .score-total-num { font-size: 32px; }
  .final-matchup { flex-direction: column; gap: 10px; }
  .final-matchup .pick-team { max-width: 100%; }

  /* Leaderboard responsive: horizontal scroll for table */
  .lb-wrap { padding: 24px 16px 48px; }
  .lb-title, .section-head .titles h1 { font-size: 36px; }
  .podium { grid-template-columns: 1fr; gap: 14px; }
  .consensus-grid { grid-template-columns: 1fr; }
  .roll { grid-template-columns: 1fr; }
  .compare-score-cards { flex-direction: column; gap: 12px; }
  .compare-score-card { max-width: 100%; }
  .compare-row { grid-template-columns: 1fr; gap: 6px; }
  .compare-my, .compare-their { text-align: center; }

  /* Standings table horizontal scroll */
  .standings { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Footer responsive */
  .site-footer { padding: 16px 20px; font-size: 12px; }

  /* Ensure buttons are touch-friendly */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .logout-btn { min-height: 44px; }

  /* Pick team touch targets */
  .pick-team--interactive { min-height: 44px; }
}

@media (max-width: 480px) {
  .crest { width: 160px; height: 160px; }
  .crest-core { width: 105px; height: 105px; }
  .crest-core::before { width: 82px; height: 82px; }
  .crest .sticks { width: 105px; height: 105px; }
  .crest .sticks i { width: 80px; height: 5px; }
  .crest .sticks i::after { width: 12px; height: 11px; top: -3px; }
  .crest .monogram { font-size: 40px; }
  .crest .puck { bottom: 22px; width: 12px; height: 5px; }
  .crest .ring-text text { font-size: 10px; }
  .login .wordmark .l1 { font-size: 40px; }
  .login .wordmark .l2 { font-size: 30px; }
  .login .panel h2 { font-size: 30px; }

  /* Bracket mobile */
  .bracket-grid { grid-template-columns: 1fr; }
  .bracket-title { font-size: 28px; }
  .pick-card { padding: 14px; }
  .pick-team-logo { width: 36px; height: 36px; }
  .standings-row { flex-wrap: wrap; gap: 8px; }
  .standings-pos { width: 32px; font-size: 15px; }
  .standings-select { min-width: 0; }

  /* Footer stacks on small screens */
  .site-footer { flex-direction: column; gap: 6px; text-align: center; padding: 14px 16px; }

  /* Topbar: stack brand and user */
  .app-topbar { flex-direction: column; align-items: stretch; padding: 12px 16px; }
  .app-brand { justify-content: center; }
  .app-nav { justify-content: center; }
  .app-user { justify-content: center; flex-wrap: wrap; }
  .user-greeting { font-size: 13px; }
}