:root {
  color-scheme: light;
  --navy: #062856;
  --navy-deep: #031b3c;
  --blue: #0b63ce;
  --blue-bright: #1976ff;
  --blue-soft: #eaf3ff;
  --coral: #f04438;
  --coral-dark: #d92d20;
  --ink: #102a4c;
  --muted: #5d6f87;
  --line: #d8e3ef;
  --surface: #fff;
  --canvas: #f2f6fb;
  --easy: #087a47;
  --medium: #8a5700;
  --hard: #ad261e;
  --success: #087a47;
  --danger: #a61b14;
  --radius: 18px;
  --shadow: 0 10px 30px rgb(14 37 70 / 8%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--canvas);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--canvas); }
body { min-width: 280px; min-height: 100vh; margin: 0; background: var(--canvas); }
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 85% 0, rgb(25 118 255 / 9%), transparent 32rem),
    linear-gradient(180deg, #f8fbff, var(--canvas) 28rem);
  content: "";
}
a { color: var(--blue); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 68px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  box-shadow: 0 5px 20px rgb(3 27 60 / 22%);
}
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand img { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; }
.brand span { max-width: 150px; font-size: .84rem; font-weight: 850; line-height: 1.05; letter-spacing: .01em; }
.brand strong { display: block; color: #ff5d52; font-size: 1.14rem; }
.app-header form { margin: 0; }
.icon-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  padding: 10px;
  color: #fff;
  background: rgb(255 255 255 / 9%);
  box-shadow: none;
}
.icon-button svg, .nav-icon, .action-icon svg, .camera-icon svg, .mode-tabs svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-main { width: 100%; max-width: 780px; margin: 0 auto; padding: 22px 15px 120px; }
.guest-shell .app-main { min-height: calc(100vh - 60px); display: grid; align-content: center; padding-top: 32px; padding-bottom: 34px; }
.guest-state-page .app-main { min-height: calc(100vh - 160px); display: grid; align-content: center; }
.document-page .app-main { display: block; max-width: 850px; }

h1, h2, h3, p, dd { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(1.72rem, 8vw, 2.4rem); line-height: 1.08; letter-spacing: -.025em; }
h2 { margin: 0; font-size: 1.16rem; line-height: 1.25; }
h3 { margin: 0; font-size: 1rem; }
p { line-height: 1.5; }
.page-kicker { margin: 0 0 5px; color: var(--blue); font-size: .73rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.muted { color: var(--muted); }
.page-heading { margin-bottom: 20px; }
.page-heading > p:last-child { margin: 8px 0 0; }

.card {
  margin: 0 0 15px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card-title { display: flex; gap: 9px; align-items: center; margin-bottom: 16px; color: var(--ink); }
.card-title::before {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border: 4px solid var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--navy);
  content: "";
}
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.button, button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(180deg, #ec473c, var(--coral-dark));
  box-shadow: 0 7px 16px rgb(217 45 32 / 21%);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button-block { width: 100%; }
.button-secondary {
  border: 1px solid #8dbcf5;
  color: #0756b8;
  background: #fff;
  box-shadow: none;
}
.text-link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; font-weight: 750; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgb(11 99 206 / 40%);
  outline-offset: 3px;
}

input, select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 13px;
  border: 1px solid #bdccdc;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
}
input::placeholder, textarea::placeholder { color: #7a889a; opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 22px; min-height: 22px; padding: 0; accent-color: var(--blue); }
input[type="file"] { min-height: 56px; padding: 9px; font-size: .85rem; }
input[type="file"]::file-selector-button {
  margin-right: 8px;
  border: 0;
  border-radius: 8px;
  padding: 9px;
  color: var(--blue);
  background: var(--blue-soft);
  font-weight: 750;
}
label { color: var(--ink); font-weight: 750; }
.form-field { display: grid; gap: 6px; margin-bottom: 16px; }
.form-field small, .section-help, .submit-help { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.field-error { color: var(--danger); font-size: .82rem; font-weight: 750; }
.has-error input, .has-error select, .has-error textarea { border-color: #d92d20; background: #fff8f7; }
.errorlist { margin: 0 0 8px; padding: 10px 13px; border-radius: 9px; color: var(--danger); background: #ffebe9; list-style: none; font-size: .86rem; }
.helptext { color: var(--muted); font-size: .78rem; }
.form-alert {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid #f0afa9;
  border-radius: 12px;
  color: var(--danger);
  background: #fff0ee;
  font-size: .88rem;
}
.form-intro { margin: -4px 0 18px; color: var(--muted); font-size: .9rem; }

.message { margin: 0 0 15px; padding: 13px 15px; border: 1px solid #e8cc80; border-radius: 12px; color: #5f4300; background: #fff7d9; box-shadow: 0 4px 12px rgb(14 37 70 / 5%); }
.message-success { border-color: #94d3b3; color: #065d36; background: #e9f9f0; }
.message-error { border-color: #eeaaa4; color: var(--danger); background: #fff0ee; }
.status-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: .73rem; font-weight: 850; white-space: nowrap; }
.status-easy { color: var(--easy); background: #dff7eb; }
.status-medium { color: var(--medium); background: #fff0c9; }
.status-hard { color: var(--hard); background: #ffe2df; }
.status-instructor { color: #5231a6; background: #eae4ff; }
.status-points { color: var(--navy); background: #edf2f7; }
.count-badge, .live-badge { border-radius: 999px; padding: 6px 10px; color: var(--blue); background: var(--blue-soft); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.live-badge::before { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #0aa35d; content: ""; }

/* Dashboard */
.home-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-heading > div { min-width: 0; }
.game-state { flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; color: var(--muted); background: #e8edf3; font-size: .68rem; font-weight: 850; }
.game-state::before { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #8795a6; content: ""; }
.game-state.is-active { color: #05683b; background: #ddf7e9; }
.game-state.is-active::before { background: #08a75d; box-shadow: 0 0 0 3px rgb(8 167 93 / 14%); }
.score-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.score-overview > div { min-width: 0; padding: 14px 8px; text-align: center; }
.score-overview > div + div { border-left: 1px solid var(--line); }
.score-overview span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .68rem; }
.score-overview strong { display: block; color: var(--navy); font-size: 1.48rem; line-height: 1.1; }
.score-overview .difficulty-text { font-size: .9rem; line-height: 1.65; }
.score-overview.instructor-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.score-overview.instructor-overview strong { font-size: .93rem; line-height: 1.55; }
.rank-snapshot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: -3px 0 15px; }
.rank-snapshot a { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 1px 7px; align-items: end; border: 1px solid var(--line); border-radius: 13px; padding: 10px; color: var(--navy); background: #fff; box-shadow: 0 5px 15px rgb(14 37 70 / 5%); text-decoration: none; }
.rank-snapshot span { grid-column: 1 / -1; color: var(--muted); font-size: .62rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-snapshot strong { color: var(--blue); font-size: 1.15rem; }
.rank-snapshot small { color: var(--muted); font-size: .64rem; }
.difficulty-text-easy { color: var(--easy) !important; }
.difficulty-text-medium { color: var(--medium) !important; }
.difficulty-text-hard { color: var(--hard) !important; }
.dashboard-grid { display: grid; gap: 15px; }

.target-card { overflow: hidden; }
.target-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.target-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.target-identity { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 15px; }
.selfie-wrap {
  width: 108px;
  height: 108px;
  padding: 4px;
  border: 3px solid var(--blue-bright);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 7px 22px rgb(25 118 255 / 18%);
}
.instructor-target .selfie-wrap { border-color: #7657cb; box-shadow: 0 7px 22px rgb(82 49 166 / 17%); }
.selfie { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.selfie-placeholder { display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); font-size: 2.3rem; font-weight: 850; }
.target-identity h3 { font-size: 1.3rem; line-height: 1.18; }
.target-identity h3 span { color: var(--blue); font-style: italic; font-weight: 650; }
.target-identity .school { margin: 7px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.target-identity .study { margin: 5px 0 0; font-size: .78rem; }
.target-clue { display: flex; gap: 10px; margin-top: 17px; padding: 12px; border-radius: 12px; background: var(--blue-soft); }
.target-clue > span { font-size: 1.2rem; }
.target-clue p { display: grid; gap: 2px; margin: 0; font-size: .87rem; line-height: 1.35; }
.target-profile { display: grid; gap: 0; margin: 15px 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.target-profile div { padding: 10px 12px; }
.target-profile div + div { border-top: 1px solid var(--line); }
.target-profile dt { margin-bottom: 2px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.target-profile dd { margin: 0; font-size: .88rem; line-height: 1.4; }
.availability-note { margin: 15px 0 0; padding: 11px; border-radius: 11px; color: #5f4300; background: #fff6d8; font-size: .8rem; text-align: center; }
.instructor-expiry { color: #47308b; background: #f0ecff; }
.replace-box { margin-top: 16px; padding: 13px; border: 1px solid #f0ca70; border-radius: 12px; background: #fff8e6; }
.replace-box p { margin: 0 0 10px; font-size: .82rem; }

.action-card { display: grid; gap: 15px; background: linear-gradient(145deg, #f7fbff, #fff); }
.action-card-copy { display: flex; align-items: center; gap: 12px; }
.action-card-copy p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.action-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--blue); }
.difficulty-form { scroll-margin-top: 84px; }
.difficulty-form select { margin-bottom: 10px; }
.difficulty-form .form-actions { display: grid; gap: 11px; }
.difficulty-form button { width: 100%; min-height: 44px; box-shadow: none; }
.target-search-card form { display: grid; gap: 8px; }
.target-search-controls { display: grid; gap: 8px; }
.target-search-controls button { width: 100%; min-height: 44px; }
.target-search-card .text-link { margin-top: 6px; }
.target-choice-results { margin: 0; padding: 0; list-style: none; }
.target-choice-results li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.target-choice-results li:last-child { border-bottom: 0; }
.target-choice-initial {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: var(--blue-soft);
  font-weight: 850;
}
.target-choice-person { min-width: 0; }
.target-choice-person strong, .target-choice-person small { display: block; }
.target-choice-person small { margin-top: 3px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.target-choice-results form, .target-choice-results .status-chip { grid-column: 1 / -1; }
.target-choice-results form button { width: 100%; min-height: 42px; }
.target-choice-results .status-chip { justify-self: start; }
.target-results-note { margin: 13px 0 0; padding: 11px; border-radius: 10px; color: var(--muted); background: #f2f6fb; font-size: .78rem; }
.instructor-guide { padding: 22px; text-align: center; }
.instructor-guide p:not(.page-kicker) { color: var(--muted); }
.instructor-results .section-heading-row a { color: var(--blue); font-size: .72rem; font-weight: 800; }
.instructor-results h3 { margin: 16px 0 6px; font-size: .86rem; }
.instructor-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.instructor-metrics span { border-radius: 10px; padding: 10px; color: var(--muted); background: #f2f6fb; font-size: .72rem; text-align: center; }
.instructor-metrics strong { display: block; margin-bottom: 2px; color: var(--navy); font-size: 1.25rem; }
.compact-ranking { margin: 0; padding: 0; list-style: none; }
.compact-ranking li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 9px 0; color: var(--muted); font-size: .78rem; }
.compact-ranking li:last-child { border-bottom: 0; }
.compact-ranking strong { color: var(--success); white-space: nowrap; }
.catches-card { margin-top: 15px; }
.catch-list { margin: 0; padding: 0; list-style: none; }
.catch-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.catch-list li:last-child { border-bottom: 0; }
.catch-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-weight: 850; }
.catch-person { min-width: 0; display: grid; gap: 2px; font-size: .86rem; }
.catch-person small { color: var(--muted); font-size: .71rem; }
.points { color: var(--success); font-weight: 850; white-space: nowrap; }
.catch-list .list-empty { display: block; padding: 18px 8px; border: 0; color: var(--muted); text-align: center; font-size: .87rem; }

.empty-state { padding: 25px 20px; text-align: center; }
.empty-state-icon, .state-illustration { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 1.7rem; font-weight: 850; }
.empty-state-icon.success { color: var(--success); background: #dff7eb; }
.empty-state h2, .empty-state h3 { margin-bottom: 7px; }
.empty-state p:not(.page-kicker) { margin: 0 0 17px; color: var(--muted); font-size: .9rem; }
.empty-state.compact { padding: 22px 5px 5px; }

/* QR screen */
.mode-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-bottom: 14px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: #e7eef6; }
.mode-tabs:has(button:only-child) { grid-template-columns: 1fr; }
.mode-tabs button { min-height: 46px; gap: 7px; border-radius: 10px; padding: 9px; color: var(--muted); background: transparent; box-shadow: none; font-size: .82rem; }
.mode-tabs button[aria-selected="true"] { color: var(--blue); background: #fff; box-shadow: 0 3px 10px rgb(14 37 70 / 10%); }
.mode-tabs svg { width: 20px; height: 20px; }
.scanner-card { color: #fff; border-color: #12558f; background: linear-gradient(145deg, #07366b, #031d42); }
.scanner-card .page-kicker { color: #7fc6ff; }
.scanner-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scanner-card .count-badge { color: #d8ecff; background: rgb(255 255 255 / 12%); }
.scan-steps { margin: 16px 0; padding: 0; counter-reset: scan-step; list-style: none; }
.scan-steps li { position: relative; min-height: 29px; margin-bottom: 9px; padding-left: 36px; color: #d6e7f8; font-size: .82rem; line-height: 1.4; counter-increment: scan-step; }
.scan-steps li::before { position: absolute; top: -2px; left: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #3984c3; border-radius: 50%; color: #a8d6ff; content: counter(scan-step); font-size: .72rem; font-weight: 850; }
.scanner-frame { position: relative; min-height: 270px; display: grid; place-items: center; margin: 15px 0; border: 1px solid #2879bd; border-radius: 16px; background: repeating-linear-gradient(0deg, transparent 0 24px, rgb(34 125 204 / 11%) 25px), repeating-linear-gradient(90deg, transparent 0 24px, rgb(34 125 204 / 11%) 25px), #052b58; overflow: hidden; }
.scanner-frame::before, .scanner-frame::after { position: absolute; z-index: 2; width: 54px; height: 54px; border-color: #6cc4ff; border-style: solid; pointer-events: none; content: ""; }
.scanner-frame::before { top: 13px; left: 13px; border-width: 3px 0 0 3px; border-radius: 9px 0 0; }
.scanner-frame::after { right: 13px; bottom: 13px; border-width: 0 3px 3px 0; border-radius: 0 0 9px; }
.camera-placeholder { max-width: 220px; padding: 25px; text-align: center; }
.camera-placeholder p { margin: 10px 0 0; color: #b9d8f3; font-size: .8rem; }
.camera-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: auto; border-radius: 50%; color: #7fc6ff; background: rgb(255 255 255 / 9%); }
.camera-icon svg { width: 30px; height: 30px; }
#qr-reader { width: 100%; border: 0 !important; color: #fff; overflow: hidden; }
#qr-reader video { object-fit: cover; }
#qr-reader__dashboard { padding: 10px !important; }
#qr-reader__dashboard_section_csr button { min-height: 42px; box-shadow: none; }
#qr-reader a { color: #9bd2ff !important; }
.scanner-card > button + button, .my-code-card > button + button { margin-top: 9px; }
.scan-result { margin: 0 0 12px; padding: 12px; border-radius: 11px; color: #d7ecff; background: rgb(255 255 255 / 10%); font-size: .86rem; }
.scan-result.is-success { color: #083e27; background: #dff7eb; }
.scan-result.is-error { color: #811711; background: #ffe0dd; }
.camera-help { margin-top: 14px; color: #c3d9ed; font-size: .8rem; }
.camera-help summary { min-height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 750; }
.camera-help p { margin: 5px 0 0; }
.my-code-card { text-align: center; scroll-margin-top: calc(88px + env(safe-area-inset-top)); }
.my-code-card > p:not(.page-kicker, .qr-status) { color: var(--muted); }
.qr-stage { width: min(100%, 310px); aspect-ratio: 1; display: grid; place-items: center; margin: 18px auto 10px; padding: 14px; border: 2px solid #9bc4f4; border-radius: 20px; background: #f7fbff; box-shadow: inset 0 0 0 7px #fff; }
.qr-placeholder { color: var(--muted); }
.qr-placeholder span { display: block; color: var(--blue); font-size: 5rem; line-height: 1; }
.qr-placeholder p { margin: 8px 0 0; font-size: .8rem; }
#my-qr { width: 100%; height: 100%; border-radius: 10px; object-fit: contain; background: #fff; }
.qr-status { min-height: 22px; margin: 0 0 13px; color: var(--muted); font-size: .78rem; }
.privacy-hint { display: flex; gap: 9px; margin-top: 16px; padding: 11px; border-radius: 11px; color: #544308; background: #fff7dc; text-align: left; }
.privacy-hint p { margin: 0; font-size: .77rem; line-height: 1.4; }

/* Leaderboards */
.leaderboard-tabs { position: sticky; z-index: 10; top: calc(75px + max(0px, calc(env(safe-area-inset-top) - 10px))); display: flex; gap: 7px; margin: 0 -5px 15px; padding: 5px; overflow-x: auto; background: rgb(242 246 251 / 92%); scrollbar-width: none; backdrop-filter: blur(10px); }
.leaderboard-tabs::-webkit-scrollbar { display: none; }
.leaderboard-tabs a { flex: 1 0 auto; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: .76rem; font-weight: 800; text-decoration: none; }
.leaderboard-tabs a:first-child { color: #fff; border-color: var(--blue); background: var(--blue); }
.leaderboard-scope-picker { display: grid; gap: 15px; margin-bottom: 14px; background: linear-gradient(145deg, #f7fbff, #fff); }
.leaderboard-scope-picker h2 { margin-bottom: 5px; }
.leaderboard-scope-picker p { margin-top: 0; }
.leaderboard-scope-picker label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.scope-picker-controls { display: grid; gap: 8px; }
.scope-picker-controls select, .scope-picker-controls button { width: 100%; min-height: 44px; }
.leaderboard-layout { display: grid; gap: 15px; }
.leaderboard-layout .card { margin: 0; scroll-margin-top: calc(135px + env(safe-area-inset-top)); overflow: hidden; }
.leaderboard-layout .card > h2 { margin-bottom: 12px; }
.section-description { margin: 5px 0 0; font-size: .76rem; }
.university-position-card { background: linear-gradient(135deg, #082e60, #0b61b6); }
.university-position-card .page-kicker { color: #9bd2ff; }
.university-position { display: flex; gap: 14px; align-items: center; color: #fff; }
.university-position > strong { min-width: 62px; color: #fff; font-size: 2.4rem; line-height: 1; }
.university-position h2 { color: #fff; }
.university-position p { margin: 4px 0 0; color: #c9e4ff; font-size: .76rem; }
.table-wrap { margin: 10px -8px -8px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .83rem; }
th { color: var(--muted); background: #f7f9fc; font-size: .62rem; text-transform: uppercase; letter-spacing: .055em; }
th, td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th:first-child { width: 52px; }
th:last-child, td:last-child { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 2px dashed #9bc4f4; border-bottom: 0; }
.rank { width: 52px; text-align: center; }
.rank-number { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--muted); background: #edf2f7; font-weight: 850; }
tbody tr:nth-child(1) .rank-number { color: #674700; background: #ffe49d; }
tbody tr:nth-child(2) .rank-number { color: #4d5b68; background: #e1e7ed; }
tbody tr:nth-child(3) .rank-number { color: #7b3d19; background: #f3ccb2; }
.rank-selfie { width: 40px; height: 40px; margin-right: 8px; border: 2px solid #87baff; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.rank-initial { display: inline-grid; place-items: center; color: var(--blue); background: var(--blue-soft); font-weight: 850; }
.player-name { max-width: 165px; display: inline-grid; gap: 2px; vertical-align: middle; }
.player-name strong { font-size: .82rem; line-height: 1.25; }
.player-name small { color: var(--blue); font-size: .67rem; font-weight: 800; }
.table-points { color: var(--navy); font-size: 1rem; }
.current-player, .current-team { background: #eef6ff; box-shadow: inset 3px 0 var(--blue); }
.current-player-pinned { position: sticky; bottom: 0; }
.table-empty { padding: 24px 12px; color: var(--muted); text-align: center !important; }

/* Login and registration */
.auth-card { width: 100%; max-width: 500px; margin: auto; }
.auth-brand { margin-bottom: 22px; text-align: center; }
.auth-brand img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 16px rgb(14 37 70 / 13%)); }
.auth-brand h1 { margin-top: 4px; }
.auth-brand > .muted { margin: 7px 0 0; }
.auth-card .card { padding: 21px; }
.auth-form-card > .step-badge { display: table; margin: 0 0 13px; }
.auth-card form > button:last-of-type { width: 100%; margin-top: 3px; }
.turnstile-wrap { width: 100%; min-height: 65px; margin: 5px 0 16px; overflow: hidden; }
.cf-turnstile { width: 100%; }
.step-badge { border-radius: 999px; padding: 5px 9px; color: var(--success); background: #e1f7eb; font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.help-box { margin-top: 18px; padding: 13px; border-radius: 12px; color: #344c68; background: #eef4fa; font-size: .82rem; }
.help-box p { margin: 4px 0 0; line-height: 1.45; }
.registration-card { padding: 0 !important; overflow: hidden; }
.registration-intro { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); background: #f8fbff; }
.registration-intro > div { min-width: 0; }
.registration-intro .step-badge { display: table; margin-bottom: 5px; }
.registration-intro .muted { margin: 5px 0 0; font-size: .78rem; line-height: 1.4; }
.avatar-initial { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 1.4rem; font-weight: 850; }
.registration-card form { padding: 18px; }
.form-section { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.form-section legend { width: 100%; display: flex; align-items: center; gap: 9px; margin-bottom: 4px; padding: 0; color: var(--ink); font-size: 1.02rem; font-weight: 850; }
.form-section legend span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: .76rem; }
.form-section > .section-help { margin: 0 0 15px 37px; }
.selfie-upload { display: grid; gap: 14px; align-items: center; }
.selfie-preview { width: 112px; height: 112px; display: grid; place-items: center; margin: 0 auto; border: 2px dashed #8dbcf5; border-radius: 50%; color: var(--blue); background: var(--blue-soft); overflow: hidden; }
.selfie-preview span { font-size: 2.2rem; font-weight: 350; }
.selfie-preview img { width: 100%; height: 100%; object-fit: cover; }
.difficulty-options { display: grid; gap: 8px; }
.difficulty-option { min-height: 64px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.difficulty-option:has(input:checked) { border-width: 2px; padding: 9px 11px; box-shadow: 0 4px 12px rgb(14 37 70 / 7%); }
.difficulty-option span { display: grid; gap: 2px; }
.difficulty-option small { color: var(--muted); font-size: .75rem; font-weight: 500; }
.difficulty-option b { border-radius: 999px; padding: 5px 8px; font-size: .68rem; }
.difficulty-easy:has(input:checked) { border-color: #24a56b; background: #f3fcf7; }
.difficulty-easy b { color: var(--easy); background: #dff7eb; }
.difficulty-medium:has(input:checked) { border-color: #d79a25; background: #fffbf1; }
.difficulty-medium b { color: var(--medium); background: #fff0c9; }
.difficulty-hard:has(input:checked) { border-color: #df5d54; background: #fff7f6; }
.difficulty-hard b { color: var(--hard); background: #ffe2df; }
.profile-fields { display: grid; grid-template-columns: 1fr; column-gap: 12px; }
.profile-fields legend, .profile-fields > .section-help { grid-column: 1 / -1; }
.consent-box { margin: 0 0 16px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.consent-box label { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; font-size: .84rem; line-height: 1.45; }
.consent-box input { margin-top: 1px; }
.consent-box > p { margin: 9px 0 0 32px; color: var(--muted); font-size: .75rem; }
.submit-help { margin: 9px 0 0; text-align: center; }

/* Error and legal pages */
.guest-state-card { max-width: 470px; margin: auto; padding: 25px; text-align: center; }
.guest-state-card h1 { font-size: 1.75rem; }
.guest-state-card .state-message { color: var(--muted); }
.guest-state-card .help-box { margin-bottom: 16px; text-align: left; }
.guest-state-card .text-link { margin-top: 8px; }
.guest-state-card form { margin-top: 9px; }
.legal-document { padding: 0; overflow: hidden; }
.legal-header { padding: 24px 20px; color: #fff; background: linear-gradient(145deg, var(--navy-deep), var(--navy)); }
.legal-header .page-kicker { color: #86caff; }
.legal-header .lead { margin: 12px 0 0; color: #d7e6f5; }
.legal-summary { display: grid; border-bottom: 1px solid var(--line); background: #f7faff; }
.legal-summary div { display: grid; gap: 3px; padding: 12px 18px; }
.legal-summary div + div { border-top: 1px solid var(--line); }
.legal-summary strong { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.legal-summary span, .legal-summary a { font-size: .84rem; font-weight: 700; }
.legal-document > section { padding: 18px 20px 0; }
.legal-document > section h2 { margin-bottom: 8px; color: var(--navy); font-size: 1.08rem; }
.legal-document > section p, .legal-document > section li { font-size: .87rem; line-height: 1.6; }
.legal-document > section p { margin: 0 0 10px; }
.legal-document > section ul { margin: 0; padding-left: 21px; }
.legal-document > section li + li { margin-top: 5px; }
.legal-contact { display: grid; gap: 12px; margin-top: 22px; padding: 19px 20px; border-top: 1px solid var(--line); background: #f7faff; text-align: center; }

.bottom-nav {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 1px;
  padding: 6px 8px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -8px 26px rgb(14 37 70 / 9%);
  backdrop-filter: blur(14px);
}
.bottom-nav a { min-width: 70px; max-width: 110px; min-height: 58px; flex: 1 1 0; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: .66rem; font-weight: 750; }
.bottom-nav a[aria-current="page"] { color: var(--blue); background: var(--blue-soft); }
.bottom-nav .nav-icon { width: 23px; height: 23px; }
.bottom-nav .nav-primary { margin-top: -19px; }
.nav-primary-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--coral-dark); box-shadow: 0 6px 15px rgb(217 45 32 / 25%); }
.bottom-nav .nav-primary[aria-current="page"] { color: var(--coral-dark); background: transparent; }
.bottom-nav .nav-primary[aria-current="page"] .nav-primary-icon { color: #fff; box-shadow: 0 0 0 3px #ffd0cc, 0 6px 15px rgb(217 45 32 / 25%); }
body > footer { display: flex; justify-content: center; gap: 7px; padding: 16px 16px 105px; color: var(--muted); text-align: center; font-size: .72rem; }
.guest-shell > footer { padding-bottom: 24px; }
.guest-state-page > footer { padding-bottom: 24px; }
body > footer a { color: inherit; }

@media (min-width: 520px) {
  .card { padding: 21px; }
  .target-identity { grid-template-columns: 142px minmax(0, 1fr); gap: 20px; }
  .selfie-wrap { width: 142px; height: 142px; }
  .target-profile { grid-template-columns: 1fr 1fr; }
  .target-profile div:nth-child(even) { border-left: 1px solid var(--line); }
  .target-profile div:nth-child(2) { border-top: 0; }
  .difficulty-form .form-actions { grid-template-columns: 1fr auto; align-items: center; }
  .difficulty-form button { width: auto; }
  .target-search-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .target-search-controls button { width: auto; }
  .target-choice-results li { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .target-choice-results form, .target-choice-results .status-chip { grid-column: auto; }
  .target-choice-results form button { width: auto; }
  .selfie-upload { grid-template-columns: 120px minmax(0, 1fr); }
  .profile-fields { grid-template-columns: 1fr 1fr; }
  .form-field-wide { grid-column: 1 / -1; }
  .legal-summary { grid-template-columns: repeat(3, 1fr); }
  .legal-summary div + div { border-top: 0; border-left: 1px solid var(--line); }
}

@media (min-width: 760px) {
  .app-header { padding-right: max(24px, calc((100% - 980px) / 2)); padding-left: max(24px, calc((100% - 980px) / 2)); }
  .app-main { max-width: 980px; padding: 30px 24px 120px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dashboard-wide { grid-column: 1 / -1; }
  .action-card { grid-template-columns: 1fr auto; align-items: center; }
  .action-card .button { width: auto; }
  .leaderboard-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-leaderboard-card { grid-column: 1 / -1; }
  .leaderboard-scope-picker { grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); align-items: end; }
  .scope-picker-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .registration-card form { padding: 24px; }
  .legal-header { padding: 32px; }
  .legal-document > section { padding-right: 32px; padding-left: 32px; }
  .legal-contact { padding-right: 32px; padding-left: 32px; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
}

@media (max-width: 355px) {
  .app-main { padding-right: 11px; padding-left: 11px; }
  .home-heading { display: block; }
  .game-state { display: table; margin-top: 10px; }
  .target-card-heading { display: block; }
  .target-meta { justify-content: flex-start; margin-top: 9px; }
  .target-identity { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; }
  .selfie-wrap { width: 88px; height: 88px; }
  .bottom-nav a { min-width: 58px; font-size: .61rem; }
  .qr-stage { padding: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .card, .score-overview { animation: card-in .28s ease both; }
  @keyframes card-in { from { opacity: 0; transform: translateY(5px); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (prefers-contrast: more) {
  :root { --line: #8494a7; --muted: #40536c; }
  .card, input, select, textarea { border-width: 2px; }
}

/* 2026 role-based portal: simple mobile-first shell */
.app-shell .app-header {
  min-height: 62px;
  padding-block: max(8px, env(safe-area-inset-top)) 8px;
  background: #082b57;
  box-shadow: 0 4px 18px rgb(3 27 60 / 18%);
}
.app-shell .brand img { width: 36px; height: 36px; flex-basis: 36px; }
.app-shell .brand span { font-size: .72rem; }
.app-shell .brand strong { font-size: 1rem; }
.header-profile-link {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  color: #fff;
  background: rgb(255 255 255 / 12%);
  font-weight: 850;
  text-decoration: none;
}
.header-profile-link img { width: 100%; height: 100%; object-fit: cover; }
.app-shell .app-main { max-width: 720px; padding-top: 18px; }

.bottom-nav { gap: 6px; padding-top: 7px; }
.bottom-nav a { max-width: 180px; min-height: 56px; border-radius: 11px; font-size: .69rem; }
.bottom-nav a[aria-current="page"] { color: #075dce; background: #eaf3ff; }

.hunt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hunt-header h1 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
.hunt-header .muted { margin: 7px 0 0; font-size: .86rem; }
.hunt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.hunt-stats > * { min-width: 0; display: grid; gap: 2px; padding: 11px 7px; color: var(--muted); font-size: .68rem; text-align: center; text-decoration: none; }
.hunt-stats > * + * { border-left: 1px solid var(--line); }
.hunt-stats strong { color: var(--navy); font-size: 1.02rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }

.target-card-primary { padding: 15px; border-color: #c8d9ec; box-shadow: 0 12px 34px rgb(6 40 86 / 11%); }
.target-card-heading { margin-bottom: 13px; }
.target-card-heading h2 { font-size: 1.05rem; }
.target-identity { display: block; }
.target-card .selfie-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 15px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #eaf1f8;
  box-shadow: none;
}
.target-card .selfie { border-radius: 16px; object-position: center 28%; }
.target-card .selfie-placeholder { border: 1px solid var(--line); }
.target-identity h3 { color: var(--navy); font-size: clamp(1.38rem, 7vw, 1.8rem); }
.target-identity .school { font-size: .86rem; }
.target-primary-actions { display: grid; gap: 8px; margin-top: 16px; }
.target-primary-actions .button { min-height: 52px; }
.target-profile { background: #fbfcfe; }
.target-clue { background: #edf5ff; }

.bonus-hunt { padding: 0; overflow: hidden; }
.bonus-hunt > summary, .catches-disclosure > summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.bonus-hunt > summary::-webkit-details-marker, .catches-disclosure > summary::-webkit-details-marker { display: none; }
.bonus-hunt > summary span:first-child, .catches-disclosure > summary span:first-child { display: grid; gap: 2px; }
.bonus-hunt > summary small, .catches-disclosure > summary small { color: var(--muted); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.bonus-hunt > summary > span:last-child { color: var(--blue); font-size: 1.5rem; transition: transform .15s ease; }
.bonus-hunt[open] > summary > span:last-child { transform: rotate(90deg); }
.bonus-hunt > .target-card { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }

.home-utility-grid { display: grid; gap: 9px; margin: 14px 0; }
.instructor-bonus-note { margin: -2px 0 14px; border-radius: 12px; padding: 11px 13px; color: #49358a; background: #f0ecff; font-size: .78rem; text-align: center; }
.utility-action {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}
.utility-action > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); font-size: 1.45rem; }
.utility-action > span:last-child { display: grid; gap: 2px; }
.utility-action small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.catches-disclosure { padding: 0; overflow: hidden; }
.catches-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.catches-disclosure .catch-list { padding: 0 16px 8px; }

.compact-page-heading { margin-bottom: 15px; }
.compact-page-heading .muted { margin: 7px 0 0; }
.participation-switcher { display: grid; gap: 8px; padding: 14px; }
.participation-switcher > label { color: var(--muted); font-size: .72rem; font-weight: 800; }
.inline-form-controls { display: grid; gap: 8px; }
.profile-identity { display: grid; gap: 15px; text-align: center; }
.profile-photo-frame, .profile-photo-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 2.2rem;
  font-weight: 850;
}
.profile-photo-frame { width: 116px; height: 116px; margin: 0 auto; }
.profile-photo-frame img, .profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity-copy h2 { font-size: 1.42rem; }
.profile-identity-copy > p:not(.page-kicker) { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }
.identity-facts { display: grid; gap: 8px; margin: 13px 0 0; }
.identity-facts div { border-radius: 10px; padding: 9px; background: #f3f6fa; }
.identity-facts dt { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.identity-facts dd { margin-top: 2px; font-size: .78rem; font-weight: 700; }
.profile-score { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.profile-score span { padding: 10px; color: var(--muted); font-size: .69rem; }
.profile-score span + span { border-left: 1px solid var(--line); }
.profile-score strong { display: block; color: var(--navy); font-size: 1.15rem; }
.mode-explanation, .profile-visibility-note { margin: -3px 0 14px; font-size: .8rem; }
.mode-card .difficulty-options { display: grid; gap: 8px; margin-bottom: 12px; }
.mode-card .difficulty-option { min-height: 66px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.mode-card .difficulty-option:has(input:checked) { border-color: #5d9dec; background: #edf5ff; box-shadow: inset 0 0 0 1px #5d9dec; }
.mode-card .difficulty-option input { width: 20px; min-height: 20px; margin: 0; accent-color: var(--blue); }
.mode-card .difficulty-option span { display: grid; gap: 2px; }
.mode-card .difficulty-option strong { color: var(--navy); }
.mode-card .difficulty-option small { color: var(--muted); font-size: .72rem; }
.instructor-mode-card .button { margin-top: 12px; }
.profile-photo-upload { display: grid; gap: 13px; margin-bottom: 17px; border-radius: 14px; padding: 13px; background: #f4f7fb; }
.profile-photo-preview { width: 92px; height: 92px; margin: auto; }
.profile-photo-upload .form-field { margin: 0; }
.profile-photo-upload input[type="file"] { min-height: 46px; padding: 9px; background: #fff; }
.profile-form-grid { display: grid; gap: 0; }
.profile-form-grid textarea { min-height: 92px; resize: vertical; }
.account-links { display: grid; margin-top: 13px; border-top: 1px solid var(--line); }
.account-links > a, .account-links form { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.account-links > a { font-weight: 750; text-decoration: none; }
.account-links form { margin: 0; }
.text-button { min-height: 44px; justify-content: flex-start; padding: 0; color: var(--blue); background: transparent; box-shadow: none; }
.danger-text { color: var(--danger); }

.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(242 246 251 / 94%);
}
.leaderboard-tabs a, .leaderboard-tabs a:first-child {
  min-width: 0;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 0;
  border-radius: 10px;
  padding: 7px 4px;
  color: var(--muted);
  background: transparent;
  font-size: .68rem;
}
.leaderboard-tabs a.is-active, .leaderboard-tabs a[aria-current="page"] {
  color: #075dce;
  background: #fff;
  box-shadow: 0 3px 12px rgb(14 37 70 / 9%);
}
.leaderboard-scope-picker.faculty-picker { padding: 14px; }
.leaderboard-scope-picker.faculty-picker form { width: 100%; }
.player-leaderboard-card { box-shadow: 0 8px 24px rgb(14 37 70 / 7%); }
.player-leaderboard-card .section-heading-row { align-items: flex-start; }
.player-leaderboard-card .live-badge { flex: 0 0 auto; }

@media (min-width: 520px) {
  .home-utility-grid { grid-template-columns: 1fr 1fr; }
  .inline-form-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .profile-identity { grid-template-columns: 124px minmax(0, 1fr); align-items: center; text-align: left; }
  .profile-photo-frame { width: 124px; height: 124px; }
  .profile-score { grid-column: 1 / -1; text-align: center; }
  .identity-facts { grid-template-columns: 1fr 1fr; }
  .profile-photo-upload { grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
  .profile-photo-preview { width: 110px; height: 110px; }
  .profile-form-grid { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .profile-form-grid .form-field-wide { grid-column: 1 / -1; }
  .leaderboard-tabs a, .leaderboard-tabs a:first-child { flex-direction: row; gap: 6px; font-size: .75rem; }
}

@media (min-width: 650px) {
  .target-card-primary .target-identity { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1fr); gap: 22px; align-items: center; }
  .target-card-primary .selfie-wrap { margin: 0; aspect-ratio: 4 / 5; }
  .target-card-primary .target-clue, .target-card-primary .target-profile, .target-card-primary .target-primary-actions, .target-card-primary .replace-box, .target-card-primary .availability-note { margin-left: calc(42.5% + 13px); }
  .target-card-primary .target-primary-actions { grid-template-columns: 1fr 1fr; }
  .profile-identity { grid-template-columns: 142px minmax(0, 1fr) 150px; }
  .profile-photo-frame { width: 142px; height: 142px; }
  .profile-score { grid-column: auto; grid-template-columns: 1fr; }
  .profile-score span + span { border-top: 1px solid var(--line); border-left: 0; }
}

.admin-preview-banner {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  gap: 3px;
  padding: 9px 15px;
  color: #fff;
  background: #7a4610;
  box-shadow: 0 4px 18px rgb(20 28 40 / 22%);
  font-size: .75rem;
  text-align: center;
}
.admin-preview-banner a { color: #fff; font-weight: 850; }
.preview-readonly-note { margin: 12px 0 0; border-radius: 10px; padding: 10px 12px; color: #69430b; background: #fff5df; font-size: .78rem; font-weight: 700; text-align: center; }
.preview-profile-fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.preview-profile-fieldset[disabled] { opacity: .72; }
.admin-preview-mode .home-utility-grid { grid-template-columns: 1fr; }

@media (min-width: 650px) {
  .admin-preview-banner { grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; text-align: left; }
}