body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 900px 700px at 50% -10%, rgba(212, 175, 55, 0.1), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 110%, rgba(30, 92, 46, 0.12), transparent 60%),
    #030304;
}

.phone-frame {
  width: 430px;
  max-width: 100vw;
  height: 100vh;
  max-height: 932px;
  border: 10px solid #1a1a1f;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.18), 0 0 70px -18px rgba(212, 175, 55, 0.35);
}
/* The bezel above is a desktop-preview mockup of a phone, not meant
   for an actual phone screen (or the wrapped app) -- on a real narrow
   viewport it just reads as an ugly border eating into your usable
   area. Below this width, drop it entirely and go edge-to-edge. */
@media (max-width: 480px) {
  .phone-frame {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

.phone-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Same field photo as the Draft Board header, with the same dark
     overlay gradient for text contrast, instead of just the plain turf
     pattern (.turf-bg) every other screen uses. */
  background-image: linear-gradient(180deg, rgba(6, 8, 12, 0.72) 0%, rgba(6, 8, 12, 0.88) 100%), url("shared/images/field-bg.jpg");
  background-size: cover;
  background-position: center 65%;
}

/* ---------------- Header ---------------- */

.entry-header {
  padding: 16px 16px 14px;
  flex: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.setup-link {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: none;
}
.setup-link:hover { border-color: var(--gold-dim); }
button.setup-link { cursor: pointer; font: inherit; padding: 0; }

/* Title on the left, break/settings buttons grouped on the right --
   was a centered single row before the buttons moved up next to the
   title. */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.entry-title-block { display: flex; flex-direction: column; gap: 1px; }

/* Same treatment as the Draft Board title: plain white text with a
   hard (0-blur) blue outline, no glow/drop-shadow. */
.entry-title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow:
    -1px 0 0 #2f6fed,
    1px 0 0 #2f6fed,
    0 -1px 0 #2f6fed,
    0 1px 0 #2f6fed,
    -1px -1px 0 #2f6fed,
    1px -1px 0 #2f6fed,
    -1px 1px 0 #2f6fed,
    1px 1px 0 #2f6fed;
}

/* "BID BOARD" alone doesn't tell a first-time user what this screen
   actually does -- this makes the actual function (logging picks)
   visible at a glance, not just the brand name. */
.entry-subtitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #59c2f0;
}

/* ---------------- Main ---------------- */

.entry-main {
  flex: 1;
  min-height: 0; /* without this, a flex child won't actually scroll internally -- it just grows to fit its content instead */
  overflow-y: auto;
  padding: 18px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The header no longer scrolls at all now -- previously the whole
   .phone-screen scrolled as one unit, and an overlay-style scrollbar
   (common on Android WebView -- it draws on top of content rather
   than reserving layout space, so no amount of padding could clear
   it) would visually cover the rightmost header button (Settings)
   while scrolling. Header now stays put; only this content area
   scrolls, so its scrollbar never overlaps the header at all. */

.section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.section-label::before {
  content: "";
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  flex: none;
}

/* ---------------- Break mode ---------------- */

/* Small pill next to the title (not its own full-width section below
   the slide-to-confirm) -- on/off state is conveyed by color, so the
   label just reads "Break" rather than "START BREAK"/"END BREAK". */
.break-toggle-btn {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-alt-grad);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.break-toggle-btn[hidden] { display: none; }
.break-toggle-btn.active {
  background: linear-gradient(180deg, #e8544a, #c53d3d);
  border-color: #c53d3d;
  color: #fff;
}

/* ---------------- Search ---------------- */

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-grad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  box-shadow: var(--panel-sheen), var(--shadow-panel);
  transition: border-color 0.15s ease;
}
.search-box:focus-within { border-color: var(--gold-dim); }
.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
}
.search-box input::placeholder { color: var(--text-faint); }

.laces-accent {
  height: 8px;
  margin: 6px 20px 0;
  background-image: repeating-linear-gradient(90deg, var(--gold-dim) 0px, var(--gold-dim) 2px, transparent 2px, transparent 9px);
  opacity: 0.5;
}

.search-results {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--panel-alt-grad);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: 14px;
  box-shadow: var(--panel-sheen);
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.search-result-item:active,
.search-result-item:hover { border-color: var(--gold-dim); }
.search-result-item:active { transform: scale(0.99); }
.search-result-item .sr-name { font-weight: 600; color: var(--text); }
.search-result-item .sr-pos {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

.search-result-custom {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--panel-alt-grad);
  border: 1px dashed var(--border-soft);
}
.search-result-custom .src-label {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.search-result-custom .src-pos-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.search-result-custom .src-warning {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--gold-bright);
}
.src-pos-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.src-pos-btn:active { transform: scale(0.96); }

/* ---------------- Preview card ---------------- */

.preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-alt-grad);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--panel-sheen), 0 0 20px -6px rgba(212, 175, 55, 0.4);
}
.preview-info { flex: 1; }
.preview-name { font-size: 17px; font-weight: 800; color: var(--text); }
.preview-position { font-size: 12px; font-weight: 700; color: var(--gold-bright); margin-top: 2px; letter-spacing: 0.5px; }
.clear-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.clear-btn:hover { border-color: var(--gold); color: var(--gold); }
.nominate-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.nominate-btn[hidden] { display: none; }
.nominate-btn:hover { background: var(--gold-dim); color: var(--bg); }
.nominate-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------------- Team grid ---------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.team-box {
  position: relative;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 11px 12px 10px;
  cursor: pointer;
  border: 3px solid transparent;
  overflow: hidden;
  box-shadow: inset 0 -22px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s ease;
}
.team-box:active { transform: scale(0.97); }
.team-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0px, rgba(255,255,255,0.35) 6px, rgba(255,255,255,0.08) 6px, rgba(255,255,255,0.08) 12px);
}
.team-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, transparent 45%, rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
}
.team-box-name {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.97);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  margin-top: 4px;
}
.team-box-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
  margin: 6px 0;
}
.team-box-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1.4;
  width: 100%;
}
.team-box-stat .tbs-icon { font-size: 10px; margin-left: 8px; }
.team-box-stat .tbs-icon:first-child { margin-left: 0; }
.team-box-stat .tbs-val { font-weight: 800; color: #fff; }
.team-box.selected {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.35), 0 0 18px rgba(45, 212, 191, 0.5), inset 0 -22px 30px rgba(0, 0, 0, 0.4);
}
.team-box.out-of-money {
  cursor: not-allowed;
  filter: grayscale(0.9) brightness(0.55);
}
.team-box.out-of-money:active { transform: none; }
.team-box-out-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.team-box-check {
  position: absolute;
  top: 6px;
  right: 6px;
  line-height: 0;
  display: none;
}
.team-box.selected .team-box-check { display: block; }

/* ---------------- Bid slider ---------------- */

.bid-amount-track {
  position: relative;
  padding-top: 38px;
}

.amount-bubble {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #201703;
  font-weight: 800;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: left 0.05s linear;
}
.amount-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: var(--gold) transparent transparent transparent;
}

.field-frame {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #cfa544, #8a6c1f 45%, #cfa544);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* $1-at-a-time nudge buttons, built into the same metallic frame as the
   slider (not separate floating circles) -- dragging a touch slider
   precisely to an exact dollar is fiddly; these give an exact,
   repeatable increment without leaving the frame. */
.bid-step-btn {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #fff9e8;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.bid-step-btn:active { transform: scale(0.92); }

#bidSlider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: 8px;
  background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.85) 0px,
      rgba(255, 255, 255, 0.85) 3px,
      transparent 3px,
      transparent 34px
    ),
    linear-gradient(180deg, var(--field-green) 0%, var(--field-green-dark) 100%);
  border: 2px solid #143f1f;
  cursor: pointer;
}

#bidSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='10' ry='6.2' fill='%236b4226' transform='rotate(-38 12 12)'/%3E%3Cg stroke='%23f3f2ee' stroke-width='1.1' stroke-linecap='round' transform='rotate(-38 12 12)'%3E%3Cline x1='7.2' y1='12' x2='16.8' y2='12'/%3E%3Cline x1='9.6' y1='10.2' x2='9.6' y2='13.8'/%3E%3Cline x1='11.4' y1='10.2' x2='11.4' y2='13.8'/%3E%3Cline x1='12.6' y1='10.2' x2='12.6' y2='13.8'/%3E%3Cline x1='14.4' y1='10.2' x2='14.4' y2='13.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  border: none;
}

#bidSlider::-moz-range-track {
  height: 48px;
  border-radius: 8px;
  background: repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.85) 0px,
      rgba(255, 255, 255, 0.85) 3px,
      transparent 3px,
      transparent 34px
    ),
    linear-gradient(180deg, var(--field-green) 0%, var(--field-green-dark) 100%);
  border: 2px solid #143f1f;
}
#bidSlider::-moz-range-thumb {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='10' ry='6.2' fill='%236b4226' transform='rotate(-38 12 12)'/%3E%3C/svg%3E");
  background-size: cover;
}

.budget-stat-row {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding: 0 2px;
}
.bsr-item { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bsr-item.center { align-items: center; flex: 1.4; }
.bsr-item.right { align-items: flex-end; }
.bsr-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); }
.bsr-value { font-size: 13px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.bsr-value.bsr-highlight { font-size: 15px; font-weight: 800; color: #2dd4bf; }

/* ---------------- Slide to confirm ---------------- */

.confirm-section { margin-top: 4px; }

.slide-confirm {
  position: relative;
  height: 62px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1b2a4a, #0c1526);
  border: 1px solid #2a3a5c;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  user-select: none;
}
.slide-confirm.disabled { opacity: 0.5; }

.slide-progress {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.28), rgba(45, 212, 191, 0.06));
  pointer-events: none;
}

.slide-confirm-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scl-main { font-size: 15px; font-weight: 800; letter-spacing: 1.5px; color: #fff; }
.scl-sub { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7f8dae; margin-top: 2px; }

.slide-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3d7ff0, #16305c);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.slide-confirm.disabled .slide-handle { cursor: not-allowed; }
.slide-handle:active { cursor: grabbing; }
.slide-handle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------------- Recent picks / undo ---------------- */

.pick-search-input {
  width: 100%;
  background: var(--panel-alt-grad);
  box-shadow: var(--panel-sheen);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.pick-search-input::placeholder { color: var(--text-faint); }
.pick-search-input:focus { border-color: var(--gold-dim); }

.recent-picks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.recent-picks-empty {
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  padding: 10px;
}
.recent-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--panel-alt-grad);
  border: 1px solid var(--border-soft);
  box-shadow: var(--panel-sheen);
}
.rp-team-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.rp-info { flex: 1; min-width: 0; }
.rp-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-name .rp-pos { font-size: 10px; font-weight: 800; color: var(--gold-bright); margin-left: 4px; }
.rp-team { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.rp-undo {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-faint);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.rp-undo:hover { border-color: #f28b82; color: #f28b82; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--gold-bright);
  color: #201703;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }