/* ── RESET & TOKENS ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0d2b55;
  --blue:   #1a56a0;
  --sky:    #2e8bc0;
  --gold:   #f5a623;
  --gold2:  #e08000;
  --red:    #d63031;
  --green:  #00897b;
  --white:  #ffffff;
  --off:    #f4f7fb;
  --muted:  #6b7a99;
  --border: #d4ddf0;
  --radius: 14px;
  --shadow: 0 4px 24px rgba(13,43,85,.12);
  --ball-sz: clamp(34px, 6.5vw, 44px);
  --header-h: 64px;   /* fallback; JS measures the real header height at runtime */
  font-family: 'Nunito', sans-serif;
}

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  background: var(--off);
  color: var(--navy);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── HEADER ─────────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: var(--white);
  padding: 0 1.5rem;
  box-shadow: 0 3px 16px rgba(0,0,0,.25);
  position: sticky; top: 0; z-index: 100;
}

.header-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}

.logo-svg {
  height: 44px;
  width: auto;
  display: block;
}

nav { display: flex; gap: .25rem; }

nav a {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem .7rem;
  border-radius: 8px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}

nav a:hover { background: rgba(255,255,255,.15); color: var(--white); }

/* ── MOBILE NAV ─────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: .15rem .4rem;
  border-radius: 8px;
}
.nav-toggle:hover { background: rgba(255,255,255,.15); }

@media (max-width: 600px) {
  .nav-toggle { display: block; }
  nav {
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy);
    padding: .4rem 0;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    border-top: 1px solid rgba(255,255,255,.08);
    display: none;
    z-index: 95;
  }
  nav.open { display: flex; }
  nav a {
    width: 100%;
    border-radius: 0;
    padding: .9rem 1.5rem;
    font-size: .95rem;
  }
}

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 55%, var(--sky) 100%);
  color: var(--white);
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
}

.hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.15;
  margin-bottom: .6rem;
}

.hero h1 span { color: var(--gold); }

.hero p {
  font-size: clamp(.9rem, 2.5vw, 1.05rem);
  opacity: .85;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── MAIN CARD ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.5rem;
  margin: 0 auto;
  max-width: 860px;
  width: calc(100% - 2rem);
}

.main-content {
  margin: -2.5rem auto 2rem;
  width: 100%;        /* fill the column; without this the auto side-margins
                         shrink-wrap the block to its content, so the
                         #gameInfoBar text width was setting the page width
                         and the balls reflowed differently per game. */
  max-width: 900px;
  padding: 0 1rem;
}

/* ── SECTION LABEL ──────────────────────────────────────────── */
.section-label {
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: .75rem;
}

/* ── GAME TYPE TABS ─────────────────────────────────────────── */
.game-type-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
  margin-bottom: .5rem;
}

@media (max-width: 540px) {
  .game-type-grid { grid-template-columns: repeat(3, 1fr); }
}

.type-btn {
  border: 2.5px solid var(--border);
  background: var(--off);
  border-radius: 10px;
  padding: .7rem .3rem;
  cursor: pointer;
  text-align: center;
  transition: all .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.type-btn:hover { border-color: var(--sky); background: #eef5fb; }

.type-btn.active {
  border-color: var(--blue);
  background: #e8f0fd;
}

.type-btn .tb-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.25);
}
.tb-dot.d-red    { background: radial-gradient(circle at 35% 30%, #ff7070, #c62828 72%); }
.tb-dot.d-purple { background: radial-gradient(circle at 35% 30%, #b57bf7, #6a1b9a 72%); }
.tb-dot.d-blue   { background: radial-gradient(circle at 35% 30%, #5baaff, #1565c0 72%); }
.tb-dot.d-green  { background: radial-gradient(circle at 35% 30%, #66bb8a, #2e7d52 72%); }
.tb-dot.d-orange { background: radial-gradient(circle at 35% 30%, #ffb74d, #e65100 72%); }
.tb-dot.d-gold   { background: radial-gradient(circle at 35% 30%, #fff176, #f9a825 72%); }

.type-btn .tb-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .3px;
}

/* ── GAME PICKER ROW ────────────────────────────────────────── */
.options-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
  .options-row { grid-template-columns: 1fr; }
}

.field-group { display: flex; flex-direction: column; gap: .4rem; }

select, input[type="number"] {
  border: 2px solid var(--border);
  border-radius: 10px;
  height: 48px;
  padding: 0 .9rem;
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: border-color .2s;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; cursor: pointer; }

select:focus, input[type="number"]:focus { border-color: var(--blue); }

input[type="number"] { width: 90px; text-align: center; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 480px) { input[type="number"] { width: 100%; } }

/* ── GENERATE BUTTON ────────────────────────────────────────── */
.btn-generate {
  background: linear-gradient(135deg, #56c271 0%, #2e9e4f 100%);
  color: var(--white);
  border: none;
  border-radius: 10px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 0 1.6rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(46,158,79,.4);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .3px;
}

.btn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46,158,79,.5);
}

.btn-generate:active { transform: translateY(0); }

.gen-spark {
  font-size: 1.4em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* ── PICKS DISPLAY ───────────────────────────────────────────── */
.picks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.picks-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--navy);
}

.picks-actions { display: flex; gap: .5rem; }

.btn-clear {
  background: none;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: .35rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .78rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s;
}

.btn-clear:hover { border-color: var(--red); color: var(--red); }

.btn-copyall:hover { border-color: var(--blue); color: var(--blue); }
.btn-copyall:disabled { opacity: .5; cursor: not-allowed; }

.pick-tools {
  display: flex;
  gap: .1rem;
  align-items: center;
}

.pick-tool {
  background: none;
  border: none;
  border-radius: 8px;
  padding: .3rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s, background .18s, color .18s;
  white-space: nowrap;
}

.pick-row:hover .pick-tool { opacity: 1; }
.pick-tool:hover { background: var(--off); }
.pick-tool.t-copy:hover { color: var(--blue); }
.pick-tool.t-save:hover { color: var(--gold2); }
.pick-tool.t-del:hover  { color: var(--red); }
.pick-tool.copied { opacity: 1; color: var(--green); }
.pick-tool.saved  { opacity: 1; color: var(--gold2); cursor: default; }

@media (hover: none) {
  .pick-tool { opacity: 1; }
}

.picks-container {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  height: 280px;
  overflow-y: auto;
  /* Reserve the scrollbar gutter at all times so the row width — and thus
     the fitted ball size — doesn't change when the list grows past the
     scroll point. Without this the scrollbar appears mid-layout and the
     fitter measures a width that's about to shrink. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  border: 1px solid #e3eaf6;
  border-radius: 10px;
  padding: 1rem;
  background: #f7f9fc;
}
.picks-container::-webkit-scrollbar { width: 8px; }
.picks-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.picks-container::-webkit-scrollbar-track { background: transparent; }

.pick-count {
  color: var(--muted);
  font-weight: 100;
  font-size: .9rem;
}

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
}

.empty-state .es-icon { font-size: 2.5rem; margin-bottom: .5rem; }

.empty-state p { font-size: .9rem; font-weight: 600; }

/* ── PICK ROW ────────────────────────────────────────────────── */
.pick-row {
  display: flex;
  align-items: center;       /* vertically center the name+icons column to the balls */
  gap: .75rem;
  animation: popIn .3s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* Left column: game name on top, copy/save icons beneath it.
   Fixed width so every row's balls start at the same x; the name wraps
   to 2–3 lines inside it as needed. Narrower on phones (see media query). */
.pick-meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
  width: 138px;
}

.pick-label {
  font-size: .78rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

/* Right side: the balls, free to wrap onto multiple lines if needed. */
.pick-balls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  flex: 1 1 auto;
  min-width: 0;
}

.balls-group {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
}

.plus-sep {
  font-size: 1rem;
  font-weight: 900;
  color: var(--muted);
  padding: 0 .1rem;
}

/* ── SMALL-BALL COSMETIC ─────────────────────────────────────────
   The fit function (JS) sizes balls per row to fill the available
   width on one line. When it has to go small, it adds .ball-sm to the
   row: we drop the glossy highlight and lighten the number shadow so
   two-digit numbers stay crisp at small sizes (any screen). */
.pick-row.ball-sm .ball::before { display: none; }
.pick-row.ball-sm .ball-num { text-shadow: 0 1px 1px rgba(0,0,0,.3); }

/* ── LOTTERY BALL ────────────────────────────────────────────── */
.ball {
  width: var(--ball-sz);
  height: var(--ball-sz);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  cursor: default;
  animation: ballSpin .4s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes ballSpin {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to   { opacity: 1; transform: none; }
}

/* Ball faces by color slot */
.ball-blue {
  background: radial-gradient(circle at 35% 30%, #5baaff 0%, #1565c0 45%, #0d3b7a 100%);
  box-shadow: 0 4px 14px rgba(21,101,192,.45), inset 0 1px 3px rgba(255,255,255,.35);
}
.ball-red {
  background: radial-gradient(circle at 35% 30%, #ff7070 0%, #c62828 45%, #7b0000 100%);
  box-shadow: 0 4px 14px rgba(198,40,40,.45), inset 0 1px 3px rgba(255,255,255,.35);
}
.ball-green {
  background: radial-gradient(circle at 35% 30%, #66bb8a 0%, #2e7d52 45%, #1b5235 100%);
  box-shadow: 0 4px 14px rgba(46,125,82,.45), inset 0 1px 3px rgba(255,255,255,.35);
}
.ball-purple {
  background: radial-gradient(circle at 35% 30%, #b57bf7 0%, #6a1b9a 45%, #38006b 100%);
  box-shadow: 0 4px 14px rgba(106,27,154,.45), inset 0 1px 3px rgba(255,255,255,.35);
}
.ball-orange {
  background: radial-gradient(circle at 35% 30%, #ffb74d 0%, #e65100 45%, #bf360c 100%);
  box-shadow: 0 4px 14px rgba(230,81,0,.45), inset 0 1px 3px rgba(255,255,255,.35);
}
.ball-gold {
  background: radial-gradient(circle at 35% 30%, #fff176 0%, #f9a825 45%, #e65100 100%);
  box-shadow: 0 4px 16px rgba(249,168,37,.55), inset 0 1px 3px rgba(255,255,255,.45);
}

/* Shine highlight */
.ball::before {
  content: '';
  position: absolute;
  top: 12%; left: 18%;
  width: 38%; height: 30%;
  background: rgba(255,255,255,.42);
  border-radius: 50%;
  filter: blur(3px);
  transform: rotate(-20deg);
}

.ball-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: calc(var(--ball-sz) * .40);
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  position: relative;
  z-index: 1;
  line-height: 1;
  letter-spacing: -.5px;
}

/* ── DIVIDER ─────────────────────────────────────────────────── */
hr.divider {
  border: none;
  border-top: 2px solid var(--border);
  margin: 1.5rem 0;
}

/* ── GAME INFO ───────────────────────────────────────────────── */
.game-info-bar {
  background: var(--off);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: .6rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Row gap only — horizontal spacing between items is provided by the · separators. */
  gap: .35rem 0;
}

/* Each "Label: value" pair is one unit: it stays on a single line and wraps whole. */
.game-info-bar .info-item {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  white-space: nowrap;
}

/* Keep the  ·  look as a separator between items.
   Trailing ::after (on all but the last item) keeps the dot at the end of a
   line rather than leading a wrapped one. */
.game-info-bar .info-item:not(:last-child)::after {
  content: "·";
  color: var(--muted);
  font-weight: 700;
  margin: 0 .55rem;
}

.game-info-bar span { color: var(--navy); }

/* ── LATEST RESULTS DRAWER ───────────────────────────────────── */
.results-drawer {
  position: fixed;
  top: var(--header-h);      /* sits right under the sticky header (measured at runtime) */
  left: 0; right: 0;
  z-index: 90;               /* below header (100) so it tucks underneath */
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;      /* transparent gutters never block the page */
  transform: translateY(calc(-100% + 30px));  /* collapsed: only the tab peeks out */
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.results-drawer.open { transform: translateY(0); }

.rd-panel {
  pointer-events: auto;
  width: clamp(760px, 80vw, 1040px);
  max-width: 96vw;
  background: var(--off);
  box-shadow: 0 5px 14px rgba(13,43,85,.18);
  border-radius: 0 0 var(--radius) var(--radius);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding: .75rem;
}
@media (max-width: 860px) {
  .rd-panel { grid-template-columns: 1fr; width: 94vw; }
}

.rd-tab {
  pointer-events: auto;
  height: 30px;
  display: flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: #fff;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .5px;
  padding: 0 1.1rem;
  border-radius: 0 0 12px 12px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(13,43,85,.28);
}
.rd-tab .rd-chev { transition: transform .35s; font-size: .65rem; }
.results-drawer.open .rd-tab .rd-chev { transform: rotate(180deg); }

.result-card {
  --ball-sz: 28px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 5px 14px rgba(13,43,85,.18);
  border: 1px solid var(--border);
  padding: .8rem .9rem .9rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 34px; }
.rc-logo { height: 32px; width: auto; display: block; border-radius: 4px; cursor: pointer;}
.rc-jackpot { text-align: right; line-height: 1.1; }
.rc-jp-label { display: block; font-size: .54rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.rc-jp-amt { display: block; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: .95rem; color: var(--green); }
.rc-date { font-size: .72rem; font-weight: 700; color: var(--muted); }
.rc-date b { color: var(--navy); }
.rc-balls { display: flex; flex-wrap: nowrap; align-items: center; gap: .28rem; }
.rc-meta { font-size: .66rem; font-weight: 700; color: var(--muted); }
.rc-err { font-size: .8rem; color: var(--muted); font-weight: 600; padding: .4rem 0; }

/* white result ball (main numbers) */
.ball-white {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eef2f7 55%, #ccd6e6 100%);
  box-shadow: 0 4px 14px rgba(13,43,85,.22), inset 0 1px 3px rgba(255,255,255,.85);
}
.ball-white .ball-num { color: var(--navy); text-shadow: none; }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  margin-top: auto;
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
  color: rgba(255,255,255,.6);
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: .78rem;
  line-height: 1.8;
}

footer a { color: var(--gold); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer strong { color: var(--white); }

/* ── AD SLOT ─────────────────────────────────────────────────── */
/* In-content unit between the generator and the About section.
   Matches the cards' max-width/gutters; min-height reserves space so
   the page doesn't jump when the ad fills in (reduces layout shift). */
.ad-slot {
  max-width: 860px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  text-align: center;
}
.ad-slot .adsbygoogle {
  display: block;
  min-height: 100px;
}

/* ── ABOUT SECTION ───────────────────────────────────────────── */
.about-section {
  max-width: 860px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.about-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.about-card h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: .75rem;
}

.about-card p {
  font-size: .88rem;
  line-height: 1.7;
  color: #3a4a6b;
}

.about-card p strong { color: var(--blue); }

/* Secondary headings + spacing within the expanded About content. */
.about-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: .98rem;
  font-weight: 900;
  color: var(--navy);
  margin: 1.4rem 0 .5rem;
}
.about-card p + p { margin-top: .85rem; }
.about-card .games-line { font-weight: 700; color: var(--navy); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-section {
  max-width: 860px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.faq-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.faq-card h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 1rem;
}
.faq-item { border-top: 1px solid var(--border); }
.faq-item:first-of-type { border-top: none; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: none;
  border: none;
  padding: .95rem 0;
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  color: var(--navy);
  cursor: pointer;
}
.faq-q:hover { color: var(--blue); }
.faq-chev { transition: transform .22s; font-size: .7rem; color: var(--muted); flex-shrink: 0; }
.faq-q[aria-expanded="true"] .faq-chev { transform: rotate(180deg); }
.faq-a {
  font-size: .86rem;
  line-height: 1.7;
  color: #3a4a6b;
  padding: 0 0 1rem;
}
.faq-a[hidden] { display: none; }

/* ── DISCLAIMER ──────────────────────────────────────────────── */
#disclaimer {
  max-width: 860px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.disc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fff8e1;
  border: 2px solid #ffe082;
  border-radius: var(--radius);
  padding: .9rem 1.25rem;
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  font-weight: 800;
  color: #bf360c;
  cursor: pointer;
  transition: background .18s;
}

.disc-toggle:hover { background: #fff3cd; }

.disc-chevron { transition: transform .22s; font-size: .8rem; }
.disc-toggle[aria-expanded="true"] .disc-chevron { transform: rotate(180deg); }

#disclaimer .disc-card {
  background: #fff8e1;
  border: 2px solid #ffe082;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: -2px;
  padding: 1.25rem 1.5rem;
  font-size: .82rem;
  color: #5d4037;
  line-height: 1.7;
}

#disclaimer .disc-card p + p { margin-top: .85rem; }
#disclaimer .disc-card strong { color: #bf360c; }

.disc-help {
  padding-top: .85rem;
  border-top: 1px dashed #ffcc80;
}
.disc-help a { color: #bf360c; font-weight: 800; }

/* ── MODAL ────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(13,43,85,.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  text-align: center;
  animation: modalPop .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

.modal h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: .75rem;
}

.modal p { font-size: .9rem; color: #3a4a6b; line-height: 1.6; margin-bottom: 1.25rem; }

.modal-btn {
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: .65rem 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: .9rem;
  cursor: pointer;
  transition: opacity .2s;
}

.modal-btn:hover { opacity: .88; }

/* ── GAMES EDITOR ─────────────────────────────────────────────── */
.editor-overlay { align-items: flex-start; }
.editor-modal {
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  margin: 2.5vh auto;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: modalPop .25s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
.editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: var(--white);
}
.editor-head h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 1.15rem; margin: 0; color: var(--white);
}
.editor-x {
  background: rgba(255,255,255,.15); color: var(--white);
  border: none; border-radius: 8px; width: 32px; height: 32px;
  font-size: .95rem; cursor: pointer; transition: background .2s; line-height: 1;
}
.editor-x:hover { background: rgba(255,255,255,.3); }
.editor-intro {
  font-size: .85rem; color: #3a4a6b; line-height: 1.55;
  padding: .9rem 1.4rem 0; margin: 0;
}
.editor-intro strong { color: var(--blue); }
.editor-body { padding: .5rem 1.4rem 1rem; overflow-y: auto; flex: 1; }

.ge-section { margin-top: 1.1rem; }
.ge-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding-bottom: .4rem; margin-bottom: .6rem;
  border-bottom: 2px solid var(--border);
}
.ge-section-head h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: .95rem; color: var(--navy); margin: 0;
}
.ge-add {
  background: #eef5fb; color: var(--blue); border: 1px solid var(--border);
  border-radius: 8px; padding: .3rem .7rem; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.ge-add:hover { background: #dfecf8; }

.ge-card {
  border: 1px solid var(--border); border-radius: 12px;
  padding: .7rem .8rem; margin-bottom: .6rem; background: var(--off);
}
.ge-card.invalid { border-color: var(--red); background: #fff4f4; }
.ge-fields {
  display: grid; gap: .55rem .7rem;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  align-items: end;
}
.ge-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ge-field.ge-name { grid-column: 1 / -1; }
.ge-field.ge-bonusname { grid-column: 1 / -1; }
.ge-field label {
  font-size: .68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.ge-field input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 8px;
  padding: .42rem .55rem; font-family: 'Nunito', sans-serif;
  font-size: .9rem; color: var(--navy); background: var(--white);
}
.ge-field input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(46,139,192,.15); }
.ge-card-foot { display: flex; justify-content: flex-end; margin-top: .45rem; }
.ge-del {
  background: none; border: none; color: var(--red);
  font-size: .76rem; font-weight: 700; cursor: pointer; padding: .2rem .3rem;
}
.ge-del:hover { text-decoration: underline; }
.ge-bonus-tag {
  display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  color: var(--gold2); background: #fff6e6; border: 1px solid #f3d9a6;
  border-radius: 6px; padding: .08rem .4rem; margin-left: .5rem; vertical-align: middle;
}
.ge-empty { font-size: .82rem; color: var(--muted); font-style: italic; padding: .2rem 0 .4rem; }

.editor-msg {
  margin: 0 1.4rem; padding: .6rem .8rem; border-radius: 8px;
  font-size: .82rem; font-weight: 700;
  background: #fff4f4; color: #b3261e; border: 1px solid #f3c4c0;
}
.editor-foot {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.4rem; border-top: 1px solid var(--border); background: var(--white);
}
.ge-foot-spacer { flex: 1; }
.ge-btn {
  border-radius: 9px; padding: .55rem 1.1rem; font-family: 'Montserrat', sans-serif;
  font-weight: 800; font-size: .82rem; cursor: pointer; border: 1px solid transparent;
  transition: opacity .2s, background .2s;
}
.ge-reset { background: none; color: var(--muted); border-color: var(--border); }
.ge-reset:hover { background: var(--off); }
.ge-cancel { background: none; color: var(--navy); border-color: var(--border); }
.ge-cancel:hover { background: var(--off); }
.ge-save { background: linear-gradient(135deg, var(--blue), var(--navy)); color: var(--white); }
.ge-save:hover { opacity: .9; }

div#generator, div#saved, div#faq, div#about, div#picksContainer, #picks-header{
  scroll-margin-top: 68px;
}

/* Discreet entry point under the game controls */
.customize-row { display: flex; justify-content: flex-end; margin-top: .5rem; }
.link-btn {
  background: none; border: none; color: var(--blue); cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: .85rem; font-weight: 700; padding: .2rem;
}
.link-btn:hover { text-decoration: underline; }
.link-btn span{
  vertical-align: middle;
}
.link-btn span.gear {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box; /* Ensures padding doesn't distort width/height */
    font-size: 1.4rem;
}
/* iPhone/iOS specific override */
@supports (-webkit-touch-callout: none) {
  .link-btn span.gear {
    font-size: .9rem;
  }
}

@media (max-width: 600px) {
  .editor-modal { margin: 0; max-width: 100%; min-height: 100vh; max-height: 100vh; border-radius: 0; }
  .editor-foot { flex-wrap: wrap; }
  .ge-reset { order: 3; flex: 1 0 100%; margin-top: .2rem; }
}

/* ── RESPONSIVE TWEAKS ───────────────────────────────────────── */
@media (max-width: 600px) {
  /* Narrower name column + tighter ball gaps give the fitter more room
     to keep dense rows on one line before it has to shrink balls. */
  .pick-meta { width: 96px; }
  .pick-balls  { gap: .3rem; }
  .balls-group { gap: .3rem; }
}