/* ============================================================================
 * lottery-number-generator — style.css  (RT-FUN-077)
 * Tokens only (with hex fallbacks). Result box is DARK NAVY: text inside MUST
 * use --rt-result-ink / --rt-result-muted. Outside the box: --rt-ink/-soft/-muted.
 * ========================================================================== */

#lotto-tool { --lotto-radius: 12px; }

/* ── selector + market + mode rows ───────────────────────────────────────── */
.lotto-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.lotto-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1 1 220px; }
.lotto-label { font-size: .8rem; font-weight: 600; color: var(--rt-ink-soft, #2A3340); }

.lotto-select,
.lotto-input {
  width: 100%; min-height: 44px; padding: .55rem .7rem;
  font-size: 16px; /* >=16px: no iOS focus-zoom */
  border: 1px solid var(--rt-border, #d8dce2); border-radius: 8px;
  background: var(--rt-card, #fff); color: var(--rt-ink, #14213d);
}
.lotto-select:focus-visible,
.lotto-input:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }
.lotto-input.is-invalid { border-color: #dc2626; }
.lotto-help.lotto-error { color: #b91c1c; font-weight: 600; }

/* market segmented control — scrollable pill row (8 markets overflow on mobile) */
.lotto-market {
  display: flex; gap: .25rem; padding: .2rem; max-width: 100%;
  border: 1px solid var(--rt-border, #d8dce2); border-radius: 999px; background: var(--rt-card, #fff);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
/* right-edge fade signals the row scrolls — only applied (by JS) when it overflows */
.lotto-market.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
  mask-image: linear-gradient(to right, #000 90%, transparent);
}
.lotto-market button {
  flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
  min-height: 40px; padding: .4rem .85rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--rt-ink-muted, #6B7480); font-size: .82rem; font-weight: 600; cursor: pointer;
}
.lotto-market button.is-active { background: var(--rt-accent-soft, rgba(232,98,42,.10)); color: var(--rt-accent, #e8622a); }
.lotto-market button:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }

/* ── "more options" disclosure ───────────────────────────────────────────── */
.lotto-more-toggle {
  display: inline-flex; align-items: center; gap: .4rem; margin: .25rem 0 1rem;
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  color: var(--rt-accent, #e8622a); font-weight: 600; font-size: .85rem;
}
.lotto-more-toggle:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 3px; }
.lotto-more-toggle::after { content: '▾'; transition: transform .15s; }
.lotto-more-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ── mode tabs (mobile: horizontal scroll, not wrap) ─────────────────────── */
.lotto-modes { display: flex; gap: .4rem; margin-bottom: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.lotto-mode-tab {
  flex: 0 0 auto; scroll-snap-align: start;
  min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--rt-border, #d8dce2);
  border-radius: 999px; background: var(--rt-card, #fff); color: var(--rt-ink-soft, #2A3340);
  font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.lotto-mode-tab.is-active { background: var(--rt-ink, #14213d); color: #fff; border-color: var(--rt-ink, #14213d); }
.lotto-mode-tab:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }

.lotto-mode-gloss { font-size: .82rem; color: var(--rt-ink-muted, #6B7480); margin: 0 0 1rem; min-height: 1.2em; }

/* ── roll-position radiogroup ─────────────────────────────────────────────── */
.lotto-rollpos { display: flex; gap: .4rem; }
.lotto-rollcell {
  min-width: 44px; min-height: 44px; border: 1px solid var(--rt-border, #d8dce2); border-radius: 8px;
  background: var(--rt-card, #fff); color: var(--rt-ink-soft, #2A3340); font-weight: 700; cursor: pointer;
}
.lotto-rollcell.is-active { background: var(--rt-accent, #e8622a); border-color: var(--rt-accent, #e8622a); color: #fff; }
.lotto-rollcell:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }

/* ── system + lines slider ────────────────────────────────────────────────── */
.lotto-sysrow { display: flex; align-items: center; gap: .75rem; }
.lotto-sysrow input[type="range"] { flex: 1 1 auto; min-height: 44px; accent-color: var(--rt-accent, #e8622a); }
.lotto-sysval { min-width: 2.2em; text-align: center; font-weight: 700; font-size: 1.05rem; color: var(--rt-ink, #14213d); }
.lotto-help { font-size: .78rem; color: var(--rt-ink-muted, #6B7480); margin: .35rem 0 0; }

/* ── count chip + generate ────────────────────────────────────────────────── */
.lotto-action { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.lotto-count {
  align-self: flex-start; font-size: .8rem; font-weight: 600;
  color: var(--rt-ink-muted, #6B7480); background: var(--rt-accent-soft, rgba(232,98,42,.10));
  padding: .25rem .65rem; border-radius: 999px;
}
.lotto-count.is-warn { color: #92400e; background: #fef9c3; }
.lotto-generate {
  width: 100%; min-height: 48px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--rt-accent, #e8622a); color: #fff; font-size: 1rem; font-weight: 700;
}
.lotto-generate:hover { filter: brightness(1.05); }
.lotto-generate:disabled { opacity: .55; cursor: not-allowed; }
.lotto-generate:focus-visible { outline: 2px solid var(--rt-ink, #14213d); outline-offset: 3px; }
.lotto-actions-2 { display: flex; flex-wrap: wrap; gap: .5rem; }
.lotto-btn-secondary {
  min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--rt-border, #d8dce2);
  border-radius: 8px; background: var(--rt-card, #fff); color: var(--rt-ink, #14213d);
  font-weight: 600; cursor: pointer; flex: 1 1 auto;
}
.lotto-btn-secondary:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }

/* ── RESULT BOX (WHITE surface · big BLACK centred numbers) ───────────────────
   Owner override (2026-06-16): a dark/black result panel is inauspicious for the
   Chinese MY/SG lottery audience and reads worse than a real draw display. So
   this tool intentionally departs from the dark-navy result-box convention:
   white card, large near-black centred numerals. --------------------------------*/
.lotto-result {
  margin-top: 1.25rem; padding: 1.75rem 1.1rem; border-radius: var(--lotto-radius);
  background: var(--rt-card, #fff);
  border: 1px solid var(--rt-border, #ebebeb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  color: #1a1814;
  text-align: center;
}
.lotto-result-head { font-size: .85rem; color: var(--rt-ink-muted, #6B7480); margin: 0 0 1rem; text-align: center; }
.lotto-boards { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; justify-content: center; }
.lotto-boards--scroll { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; display: block; }
.lotto-board-row { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.lotto-boards--scroll .lotto-board-row { padding: .3rem 0; }
.lotto-board {
  font-family: var(--rt-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
  font-size: clamp(2.1rem, 8vw, 3.1rem); font-weight: 800; letter-spacing: .14em;
  color: #1a1814; line-height: 1.12;
}
.lotto-board--ghost { opacity: .28; }
.lotto-example { text-align: center; padding: .75rem 0; }
.lotto-example-cap { font-size: .8rem; color: var(--rt-ink-muted, #6B7480); margin: .65rem 0 0; }
.lotto-copy-line {
  min-height: 44px; padding: .2rem .65rem; border: 1px solid var(--rt-border, #d8dce2);
  border-radius: 6px; background: transparent; color: var(--rt-ink-muted, #6B7480);
  font-size: .72rem; font-weight: 600; letter-spacing: normal; cursor: pointer;
}
.lotto-copy-line:hover { color: var(--rt-ink, #14213d); border-color: var(--rt-ink-muted, #9aa1ab); }
.lotto-copy-line:focus-visible { outline: 2px solid var(--rt-accent, #e8622a); outline-offset: 2px; }
.lotto-cap-note { font-size: .8rem; color: var(--rt-ink-muted, #6B7480); margin: 1rem 0 0; text-align: center; }
.lotto-empty { color: var(--rt-ink-muted, #6B7480); margin: 0; }

/* ── responsible-gambling amber strip (always visible, non-dismissible) ───── */
.lotto-rg-strip {
  margin: 1.1rem 0 0; padding: .8rem 1rem; border-radius: 8px;
  background: #fef9c3; border: 1px solid #fde047; border-left: 4px solid #d97706;
  font-size: .82rem; line-height: 1.55; color: #78350f;
}
.lotto-rg-strip strong { color: #92400e; }
.lotto-rg-strip a { color: #92400e; font-weight: 700; text-decoration: underline; }

/* sr-only live status */
.lotto-sr-status {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lotto-more-toggle::after { transition: none; }
}

/* ── narrow phones ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* keep the numerals large on mobile — the clamp() floor (2.1rem) handles it.
     pick-game strings (e.g. "03 11 27 38 44 49") wrap inside the centred row. */
  .lotto-board { letter-spacing: .1em; word-break: break-word; }
  .lotto-board-row { flex-wrap: wrap; }
  .lotto-row { gap: .6rem; }
}