/* ── Rootle — rootle.css ──────────────────────────────────────────────────
   All rules scoped to #rootle-app to avoid conflicts with site CSS.
   Prefix: rt- on all classes and IDs.
   ───────────────────────────────────────────────────────────────────────── */

#rootle-app {
  --rt-site-header-h: 60px;
  --rt-game-header-h: 50px;
  --rt-bg:           #f5f4f0;
  --rt-surface:      #ffffff;
  --rt-border:       #e0ddd5;
  --rt-border-mid:   #c8c0b0;
  --rt-text:         #222222;
  --rt-text-muted:   #777777;
  --rt-text-faint:   #aaaaaa;
  --rt-blue:         #3a6ea5;
  --rt-blue-light:   #eef4ff;
  --rt-blue-mid:     #5b8fc9;
  --rt-green:        #5a9e5a;
  --rt-green-light:  #f0faf0;
  --rt-red:          #c0504a;
  --rt-red-light:    #fff5f5;
  --rt-male:         #5b8fc9;
  --rt-female:       #c97b8f;
  --rt-radius:       8px;
  --rt-radius-lg:    12px;
  --rt-shadow:       0 2px 8px rgba(0,0,0,0.09);

  background: var(--rt-bg);
  min-height: calc(100vh - 130px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--rt-text);
}

/* ── Screens ──────────────────────────────────────────────────────────── */
#rootle-app .rt-screen { display: none; }
#rootle-app .rt-screen.rt-active { display: block; }
#rootle-app #rt-game.rt-active {
  padding-top: var(--rt-game-header-h);
}

/* ── Home ─────────────────────────────────────────────────────────────── */
#rootle-app .rt-home-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

#rootle-app .rt-explore-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 0;
}

#rootle-app .rt-explore-row .rt-card {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  #rootle-app .rt-explore-row,
  #rootle-app .rt-explore-row-2 {
    flex-direction: column;
  }
  #rootle-app .rt-explore-row-2 {
    grid-template-columns: 1fr;
  }
}

#rootle-app .rt-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--rt-text);
  margin: 0 0 6px;
  letter-spacing: -1px;
}

#rootle-app .rt-title-le {
  color: var(--rt-green);
}

#rootle-app .rt-subtitle {
  font-size: 20px;
  color: var(--rt-text-muted);
  margin: 0 0 28px;
  font-weight: 400;
  letter-spacing: -0.2px;
}

#rootle-app .rt-subtitle-accent {
  color: var(--rt-green);
  font-weight: 600;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
#rootle-app .rt-card {
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}

#rootle-app .rt-card-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rt-text-muted);
  margin-bottom: 8px;
}

#rootle-app .rt-card-name {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 4px;
}

#rootle-app .rt-card-meta {
  font-size: 13px;
  color: var(--rt-text-muted);
  margin-bottom: 16px;
}

#rootle-app .rt-card-message {
  font-size: 14px;
  color: var(--rt-blue);
  background: var(--rt-blue-light);
  border-radius: var(--rt-radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

#rootle-app .rt-card-desc {
  font-size: 14px;
  color: var(--rt-text-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ── Explore controls ─────────────────────────────────────────────────── */
#rootle-app .rt-explore-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

#rootle-app .rt-resume-card {
  border-color: var(--rt-green);
  background: var(--rt-surface);
  margin-bottom: 16px;
}
#rootle-app .rt-share-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

#rootle-app .rt-share-input {
  flex: 1;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--rt-border-mid);
  border-radius: var(--rt-radius);
  background: var(--rt-bg);
  color: var(--rt-text-muted);
  min-width: 0;
}

#rootle-app .rt-btn-ghost {
  background: transparent;
  color: var(--rt-blue);
  border-color: var(--rt-blue);
  white-space: nowrap;
  padding: 7px 14px;
  font-size: 13px;
  width: auto;
}

#rootle-app .rt-btn-ghost:hover { background: var(--rt-blue); color: #fff; }

#rootle-app .rt-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#rootle-app .rt-field label {
  font-size: 12px;
  color: var(--rt-text-muted);
  font-weight: 500;
}

#rootle-app .rt-field select,
#rootle-app .rt-field input[type=text] {
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--rt-border-mid);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-text);
  width: 100%;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
#rootle-app .rt-btn {
  display: inline-block;
  font-size: 14px;
  padding: 9px 20px;
  border-radius: var(--rt-radius);
  border: 1px solid var(--rt-border-mid);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.12s, transform 0.08s;
}

#rootle-app .rt-btn:active { transform: scale(0.98); }

#rootle-app .rt-btn-primary {
  background: var(--rt-blue);
  color: #fff;
  border-color: var(--rt-blue);
  width: 100%;
}

#rootle-app .rt-btn-primary:hover { background: #2d5a8e; }

#rootle-app .rt-btn-green {
  background: var(--rt-green);
  color: #fff;
  border-color: var(--rt-green);
  width: 100%;
}
#rootle-app .rt-btn-green:hover { background: #4a8a4a; }

#rootle-app .rt-btn-secondary {
  background: var(--rt-surface);
  color: var(--rt-text);
  width: 100%;
}

#rootle-app .rt-btn-secondary:hover { background: var(--rt-bg); }

/* ── Game header ──────────────────────────────────────────────────────── */
#rootle-app .rt-game-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--rt-surface);
  border-bottom: 1px solid var(--rt-border);
  flex-wrap: wrap;
  position: fixed;
  top: var(--rt-site-header-h);
  left: 0;
  right: 0;
  z-index: 10;
}

#rootle-app .rt-back-btn {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--rt-border-mid);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  cursor: pointer;
  color: var(--rt-text-muted);
  white-space: nowrap;
}

#rootle-app .rt-back-btn:hover { background: var(--rt-bg); }

#rootle-app .rt-game-title-area {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

#rootle-app .rt-game-title {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#rootle-app .rt-size-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#rootle-app .rt-size-btn {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
  transition: box-shadow 0.08s, transform 0.08s;
  padding: 10px;
  box-sizing: content-box;
}

#rootle-app .rt-size-btn:active:not(:disabled) {
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
  transform: translateY(2px);
}

#rootle-app .rt-size-minus { background: #cc3333; color: #fff; }
#rootle-app .rt-size-plus  { background: #2a7a2a; color: #fff; }
#rootle-app .rt-size-btn:disabled { opacity: 0.3; cursor: default; }

#rootle-app .rt-size-pips {
  display: flex;
  gap: 5px;
  align-items: center;
}

#rootle-app .rt-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rt-border-mid);
  transition: background 0.15s;
  flex-shrink: 0;
}

#rootle-app .rt-pip-active {
  background: var(--rt-text);
}

#rootle-app .rt-size-label {
  font-size: 13px;
  color: var(--rt-text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

#rootle-app .rt-bloodline-select {
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid var(--rt-border-mid);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-text);
  cursor: pointer;
  flex-shrink: 0;
  max-width: 160px;
}

#rootle-app .rt-hamburger {
  display: none;
}

#rootle-app .rt-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.25);
}

#rootle-app .rt-menu-panel {
  position: fixed;
  top: calc(var(--rt-site-header-h) + var(--rt-game-header-h));
  right: 0;
  z-index: 200;
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: 10px 0 0 10px;
  min-width: 210px;
  box-shadow: -4px 8px 24px rgba(0,0,0,0.14);
  padding: 6px 0 10px;
}

#rootle-app .rt-menu-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rt-text-faint);
  padding: 8px 16px 2px;
}

#rootle-app .rt-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 11px 16px;
  font-size: 15px;
  color: var(--rt-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#rootle-app .rt-menu-item:active {
  background: var(--rt-bg);
}

#rootle-app .rt-menu-radio.rt-menu-active {
  color: var(--rt-blue);
  font-weight: 500;
}

#rootle-app .rt-menu-radio.rt-menu-active::before {
  content: '✓  ';
}

#rootle-app .rt-menu-divider {
  height: 1px;
  background: var(--rt-border);
  margin: 4px 0;
}

#rootle-app .rt-game-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#rootle-app .rt-hint-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--rt-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

/* ── Message banner ───────────────────────────────────────────────────── */
#rootle-app .rt-msg-banner {
  background: var(--rt-blue-light);
  border-bottom: 1px solid #c5d8f0;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--rt-blue);
  line-height: 1.5;
}

/* ── Game layout ──────────────────────────────────────────────────────── */
#rootle-app .rt-game-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  overflow-x: clip;
}

/* ── Tile tray ────────────────────────────────────────────────────────── */
#rootle-app .rt-tray {
  width: 170px;
  flex-shrink: 0;
  padding: 14px 12px;
  border-right: 1px solid var(--rt-border);
  background: var(--rt-surface);
  position: sticky;
  top: var(--rt-game-header-h);
  max-height: calc(100vh - var(--rt-game-header-h));
  overflow-y: auto;
  align-self: flex-start;
}

#rootle-app .rt-tray-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rt-text-faint);
  margin-bottom: 10px;
}

/* ── Person tiles ─────────────────────────────────────────────────────── */
#rootle-app .rt-tile {
  background: var(--rt-surface);
  border: 1.5px solid var(--rt-border-mid);
  border-radius: var(--rt-radius);
  padding: 8px 10px;
  margin-bottom: 7px;
  cursor: grab;
  font-size: 13px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  transition: box-shadow 0.12s, transform 0.1s;
  line-height: 1.35;
  position: relative;
}

#rootle-app .rt-tile:hover {
  box-shadow: var(--rt-shadow);
  transform: translateY(-1px);
}

#rootle-app .rt-tile.rt-dragging { opacity: 0.35; cursor: grabbing; }
#rootle-app .rt-tile.rt-male    { border-left: 3px solid var(--rt-male); }
#rootle-app .rt-tile.rt-female  { border-left: 3px solid var(--rt-female); }

#rootle-app .rt-tile-name  { font-weight: 500; color: var(--rt-text); }
#rootle-app .rt-tile-dates { font-size: 11px; color: var(--rt-text-faint); margin-top: 2px; }

#rootle-app .rt-tray-empty {
  font-size: 13px;
  color: var(--rt-text-faint);
  padding: 8px 0;
  font-style: italic;
}

/* ── Tree area ────────────────────────────────────────────────────────── */
#rootle-app .rt-tree-outer {
  flex: 1;
  min-width: 0;
  padding: 20px 16px;
  overflow-x: auto;
}

#rootle-app .rt-gen-row-pedigree {
  align-items: center;
}

#rootle-app .rt-gen-block {
  margin-bottom: 64px; /* extra space for connector lines between rows */
}

#rootle-app .rt-gen-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rt-text-faint);
  margin-bottom: 8px;
  padding-left: 2px;
}

#rootle-app .rt-gen-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-start;
}

/* ── Tree slots ───────────────────────────────────────────────────────── */
#rootle-app .rt-slot {
  width: 120px;
  min-height: 60px;
  border-radius: var(--rt-radius);
  border: 2px dashed var(--rt-border-mid);
  background: #faf9f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--rt-text-faint);
  text-align: center;
  padding: 8px;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
  box-sizing: border-box;
}

#rootle-app .rt-slot.rt-drag-over {
  background: var(--rt-blue-light);
  border-color: var(--rt-blue-mid);
  border-style: solid;
}

#rootle-app .rt-slot.rt-prime {
  border-style: solid;
  border-color: var(--rt-blue);
  background: var(--rt-blue-light);
  cursor: default;
}

#rootle-app .rt-slot.rt-prime .rt-slot-name { color: var(--rt-blue); }

#rootle-app .rt-slot.rt-filled {
  border-style: solid;
  border-color: var(--rt-border-mid);
  background: var(--rt-surface);
  cursor: pointer;
}

#rootle-app .rt-slot.rt-filled:hover { border-color: #a0a0a0; }
#rootle-app .rt-slot.rt-filled.rt-male   { border-left: 3px solid var(--rt-male); }
#rootle-app .rt-slot.rt-filled.rt-female { border-left: 3px solid var(--rt-female); }

#rootle-app .rt-slot.rt-correct {
  border-color: var(--rt-green);
  background: var(--rt-green-light);
}

#rootle-app .rt-slot.rt-wrong {
  border-color: var(--rt-red);
  background: var(--rt-red-light);
  animation: rt-shake 0.3s ease;
}

@keyframes rt-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

#rootle-app .rt-slot-inner { text-align: center; }
#rootle-app .rt-slot-name  { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--rt-text); }
#rootle-app .rt-slot-dates { font-size: 11px; color: var(--rt-text-faint); margin-top: 2px; }
#rootle-app .rt-slot-hint  { font-size: 10px; color: var(--rt-text-faint); font-style: italic; margin-top: 1px; }
#rootle-app .rt-slot-rel   { font-size: 10px; color: var(--rt-text-faint); margin-top: 3px; font-style: italic; }

#rootle-app .rt-remove-hint {
  position: absolute;
  top: 3px; right: 5px;
  font-size: 10px;
  color: var(--rt-text-faint);
  opacity: 0;
  transition: opacity 0.15s;
}
#rootle-app .rt-slot.rt-filled:hover .rt-remove-hint { opacity: 1; }

/* ── Status bar ───────────────────────────────────────────────────────── */

/* ── Win screen ───────────────────────────────────────────────────────── */
#rootle-app .rt-win-inner {
  max-width: 420px;
  margin: 60px auto;
  text-align: center;
  padding: 0 16px;
}

#rootle-app .rt-win-icon { font-size: 52px; margin-bottom: 12px; }

#rootle-app .rt-win-inner h2 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}

#rootle-app .rt-win-inner p {
  font-size: 15px;
  color: var(--rt-text-muted);
  margin-bottom: 8px;
  line-height: 1.6;
}

#rootle-app .rt-win-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#rootle-app #rt-tree {
  position: relative;
}

#rootle-app .rt-ordering-note {
  font-size: 12px;
  color: var(--rt-text-faint);
  padding: 6px 16px 10px;
  background: var(--rt-surface);
  font-style: italic;
}

/* ── Blood vs non-blood slot styling ──────────────────────────────────── */
#rootle-app .rt-slot.rt-blood {
  border-color: #1a7a1a !important;
  background: #f4fbf4 !important;
}

#rootle-app .rt-slot.rt-blood span {
  color: #5a9e5a;
}

#rootle-app .rt-slot.rt-nonblood {
  border-color: #b0a898 !important;
  background: #faf7f2 !important;
}

#rootle-app .rt-slot.rt-nonblood span {
  color: #b0a898;
}

#rootle-app .rt-slot.rt-filled.rt-blood {
  border-color: #1a7a1a !important;
  background: #f4fbf4 !important;
}

#rootle-app .rt-slot.rt-filled.rt-nonblood {
  border-color: #b0a898 !important;
  background: #faf7f2 !important;
}

/* correct/wrong override blood/nonblood when filled */
#rootle-app .rt-slot.rt-filled.rt-correct { border-color: var(--rt-green) !important; background: var(--rt-green-light) !important; }
#rootle-app .rt-slot.rt-filled.rt-wrong   { border-color: var(--rt-red)   !important; background: var(--rt-red-light)   !important; }

#rootle-app .rt-win-banner {
  background: var(--rt-green-light);
  border-top: 1px solid var(--rt-green);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--rt-green);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#rootle-app .rt-win-links { margin: 12px 0; text-align: left; }
#rootle-app .rt-win-banner-btns { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
#rootle-app .rt-win-banner-btns .rt-btn { width:auto; }

/* ── Legend ───────────────────────────────────────────────────────────── */
#rootle-app .rt-legend {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rt-border);
}

#rootle-app .rt-legend-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rt-text-faint);
  margin-bottom: 8px;
}

#rootle-app .rt-legend-heading {
  font-weight: 600;
  color: var(--rt-text);
  margin-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#rootle-app .rt-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: var(--rt-text);
  font-size: 13px;
  line-height: 1.3;
}

#rootle-app .rt-legend-box {
  display: inline-block;
  width: 22px;
  height: 14px;
  border-radius: 3px;
  border: 2px dashed #b0a898;
  flex-shrink: 0;
}

#rootle-app .rt-legend-box.rt-legend-blood    { border-color: #1a7a1a; background: #f4fbf4; }
#rootle-app .rt-legend-box.rt-legend-nonblood { border-color: #b0a898; background: #faf7f2; }
#rootle-app .rt-legend-box.rt-legend-prime    { border: 2px solid var(--rt-blue); background: var(--rt-blue-light); border-radius: 3px; }

#rootle-app .rt-legend-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

#rootle-app .rt-legend-line.rt-legend-line-blood    { background: #1a7a1a; }
#rootle-app .rt-legend-line.rt-legend-line-nonblood { background: #9b6b3a; }
#rootle-app .rt-legend-line.rt-legend-line-spouse   { background: #9b6b3a; }
#rootle-app .rt-legend-line.rt-legend-line-sibling      { background: none; border-top: 3px solid #1a7a1a; }
#rootle-app .rt-legend-line.rt-legend-line-halfsibling  { background: none; border-top: 2px dotted #9b6b3a; }

#rootle-app .rt-legend-text { font-weight: 500; font-size: 13px; }
#rootle-app .rt-legend-text.rt-legend-text-male   { color: var(--rt-male); }
#rootle-app .rt-legend-text.rt-legend-text-female { color: var(--rt-female); }

/* ── Key button ───────────────────────────────────────────────────────── */
#rootle-app .rt-key-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1.5px solid var(--rt-blue);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-blue);
  cursor: pointer;
  white-space: nowrap;
}
#rootle-app .rt-key-btn:hover { background: var(--rt-blue); color: #fff; }

/* ── Modal ────────────────────────────────────────────────────────────── */
#rootle-app .rt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  overflow-y: auto;
}

#rootle-app .rt-modal {
  background: var(--rt-surface);
  border-radius: var(--rt-radius-lg);
  border: 1px solid var(--rt-border);
  max-width: 340px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - max(32px, env(safe-area-inset-top)) - env(safe-area-inset-bottom, 16px));
}

#rootle-app .rt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--rt-border);
  flex-shrink: 0;
}

#rootle-app .rt-modal-header h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

#rootle-app .rt-modal-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--rt-text-faint);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
#rootle-app .rt-modal-close:hover { color: var(--rt-text); }

#rootle-app .rt-modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Touch support for iOS ────────────────────────────────────────────── */
#rootle-app .rt-tile {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

#rootle-app .rt-tray {
  touch-action: pan-y;
}

#rootle-app .rt-tree-outer {
  touch-action: pan-x pan-y;
}

@media (max-width: 540px) {
  #rootle-app .rt-tray { width: 130px; }
  #rootle-app .rt-slot { width: 104px; min-height: 56px; }
  #rootle-app .rt-game-title { font-size: 13px; }
  #rootle-app .rt-build-badge { display: none; }
  #rootle-app .rt-game-header { padding: 8px 10px; gap: 8px; }
  #rootle-app .rt-back-btn { padding: 4px 8px; font-size: 12px; }
  #rootle-app .rt-key-btn { padding: 4px 8px; font-size: 11px; }
}

/* ── Mobile — portrait AND landscape ──────────────────────────────────── */
@media (max-width: 480px) and (orientation: portrait),
       (max-height: 430px) and (orientation: landscape) {

  #rootle-app { --rt-game-header-h: 50px; }

  #rootle-app .rt-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--rt-border-mid);
    border-radius: var(--rt-radius);
    font-size: 18px;
    padding: 5px 10px;
    color: var(--rt-text);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Hide desktop header controls — hamburger menu handles them */
  #rootle-app .rt-size-control    { display: none; }
  #rootle-app .rt-game-controls   { display: none; }
  #rootle-app .rt-click-action-row { display: none; }

  /* Bloodline select: sits between name and hamburger, shows post-win */
  #rootle-app .rt-bloodline-select {
    order: unset;
    max-width: 130px;
    flex: 1;
    min-width: 0;
  }
}

/* ── Bottom drawer — portrait only ────────────────────────────────────── */
@media (max-width: 480px) and (orientation: portrait) {

  /* Game layout becomes a single column, tree gets full width */
  #rootle-app .rt-game-layout {
    flex-direction: column;
    padding-bottom: 160px;
  }

  /* Tray becomes a fixed bottom drawer */
  #rootle-app .rt-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 42vh;
    border-right: none;
    border-top: 2px solid var(--rt-border-mid);
    border-radius: 14px 14px 0 0;
    padding: 0 12px 12px;
    z-index: 20;
    transition: max-height 0.3s ease;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
    overflow-y: auto;
    touch-action: pan-y;
  }

  #rootle-app .rt-tray.rt-drawer-collapsed {
    max-height: 44px;
    overflow: hidden;
  }

  #rootle-app .rt-tray .rt-tray-label { display: none; }

  #rootle-app #rt-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 8px;
    touch-action: pan-x;
  }

  #rootle-app .rt-tile {
    min-width: 110px;
    max-width: 110px;
    margin-bottom: 0;
    flex-shrink: 0;
    touch-action: none;
  }

  #rootle-app .rt-bloodlines { margin-top: 8px; }

  #rootle-app .rt-tree-outer {
    width: 100%;
    flex: none;
    padding: 12px 8px;
  }

  /* Bloodlines: horizontal scroll */
  #rootle-app #rt-bloodline-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 6px;
    -webkit-overflow-scrolling: touch;
  }

  #rootle-app .rt-bloodline-btn { flex-shrink: 0; }

}

/* ── Drawer handle ─────────────────────────────────────────────────────── */
#rootle-app .rt-drawer-handle {
  display: none; /* hidden on desktop */
}

@media (max-width: 480px) and (orientation: portrait) {
  #rootle-app .rt-drawer-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px 8px;
    cursor: pointer;
    gap: 8px;
    position: sticky;
    top: 0;
    background: var(--rt-surface);
    z-index: 1;
    border-bottom: 1px solid var(--rt-border);
    margin-bottom: 8px;
  }

  #rootle-app .rt-drawer-grip {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--rt-border-mid);
    border-radius: 2px;
    flex-shrink: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 6px;
  }

  #rootle-app .rt-drawer-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--rt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
  }

  #rootle-app .rt-drawer-chevron {
    font-size: 12px;
    color: var(--rt-text-faint);
    margin-top: 4px;
    transition: transform 0.2s;
  }

  #rootle-app .rt-tray.rt-drawer-collapsed .rt-drawer-chevron {
    transform: rotate(180deg);
  }
}

/* ── Build version badge ──────────────────────────────────────────────── */
#rootle-app .rt-build-badge {
  font-size: 11px;
  color: var(--rt-text-faint);
  white-space: nowrap;
  margin-left: 4px;
}

/* ── Bloodlines ───────────────────────────────────────────────────────── */
#rootle-app .rt-bloodlines {
  margin-top: 4px;
}

#rootle-app .rt-bloodlines-divider {
  height: 1px;
  background: var(--rt-border);
  margin: 10px 0 8px;
}

#rootle-app .rt-bloodlines-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rt-text-faint);
  margin-bottom: 8px;
}

#rootle-app .rt-bloodline-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  margin-bottom: 5px;
  border: 1px solid var(--rt-border-mid);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s;
}

#rootle-app .rt-bloodline-btn:hover {
  background: var(--rt-bg);
}

#rootle-app .rt-bloodline-btn:active {
  background: #fff8dc;
  border-color: #c8a800;
}

#rootle-app .rt-bloodlines-hint {
  font-size: 11px;
  color: var(--rt-text-faint);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.4;
  text-align: center;
}

#rootle-app .rt-bloodline-btn.rt-bloodline-active {
  background: #fff8dc;
  border-color: #c8a800;
  color: #7a6000;
}

/* Highlight state — yellow background for bloodline members.
   High specificity to override blood/nonblood/correct/wrong !important rules. */
#rootle-app .rt-slot.rt-bloodline-highlight,
#rootle-app .rt-slot.rt-filled.rt-bloodline-highlight,
#rootle-app .rt-slot.rt-correct.rt-bloodline-highlight,
#rootle-app .rt-slot.rt-blood.rt-bloodline-highlight,
#rootle-app .rt-slot.rt-nonblood.rt-bloodline-highlight,
#rootle-app .rt-slot.rt-prime.rt-bloodline-highlight {
  background: #fff8a0 !important;
  border-color: #c8a800 !important;
}

/* ── Bloodline connector line highlight ─────────────────────────────── */
#rt-connectors .rt-connector-highlight {
  stroke: #ffe000 !important;
  stroke-width: 3 !important;
  opacity: 1 !important;
}

/* ── Place all button ─────────────────────────────────────────────────── */
#rootle-app .rt-btn-place-all {
  display: block;
  width: 100%;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px;
  border: 1px dashed var(--rt-border-mid);
  border-radius: var(--rt-radius);
  background: transparent;
  color: var(--rt-text-muted);
  cursor: pointer;
  text-align: center;
}
#rootle-app .rt-btn-place-all:hover { background: var(--rt-bg); color: var(--rt-text); }

/* ── About Rootle — home collapsible ────────────────────────────────────── */
#rootle-app .rt-about-home {
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

#rootle-app .rt-about-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--rt-text);
  font-family: inherit;
  text-align: left;
}

#rootle-app .rt-about-toggle:hover {
  background: var(--rt-bg);
}

#rootle-app .rt-about-chevron {
  font-size: 11px;
  color: var(--rt-text-muted);
  margin-left: 8px;
  flex-shrink: 0;
}

#rootle-app .rt-about-body {
  padding: 0 24px 20px;
}

/* ── About content — shared between home collapsible and modal ───────────── */
#rootle-app .rt-about-section {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--rt-text);
  line-height: 1.6;
}

#rootle-app .rt-about-section:last-child {
  margin-bottom: 0;
}

#rootle-app .rt-about-section p {
  margin: 0;
}

/* ── Explore Your Roots card ──────────────────────────────────────────── */
#rootle-app .rt-roots-prime {
  margin: 12px 0 8px;
  padding: 10px 14px;
  border: 2px solid var(--rt-blue);
  background: var(--rt-blue-light);
  border-radius: var(--rt-radius);
  text-align: center;
  cursor: pointer;
  transition: filter 0.12s;
}
#rootle-app .rt-roots-prime:hover { filter: brightness(0.93); }

#rootle-app .rt-roots-prime-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--rt-blue);
  line-height: 1.3;
}

#rootle-app .rt-roots-prime-year {
  font-size: 11px;
  color: var(--rt-text-faint);
  margin-top: 2px;
}

#rootle-app .rt-roots-lines {
  margin-top: 10px;
}

#rootle-app .rt-roots-lines-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rt-text-faint);
  margin-bottom: 8px;
}

#rootle-app .rt-roots-line-btn {
  display: block;
  width: 100%;
  padding: 7px 12px;
  margin-bottom: 6px;
  background: var(--rt-green);
  color: #fff;
  border: none;
  border-radius: var(--rt-radius);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
#rootle-app .rt-roots-line-btn:hover { background: #4a8a4a; }

#rootle-app .rt-roots-none {
  font-size: 13px;
  color: var(--rt-text-faint);
  font-style: italic;
  margin-top: 8px;
}

/* ── Spacing between dropdown and button in branch/roots cards ─────────── */
#rootle-app .rt-branches-card .rt-btn-green,
#rootle-app .rt-roots-card .rt-btn-green {
  margin-top: 12px;
}

/* ── Second explore row — grid forces equal card widths to match top row ── */
#rootle-app .rt-explore-row-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* ── Search card ──────────────────────────────────────────────────────────── */
#rootle-app .rt-search-row {
  margin-bottom: 10px;
}

#rootle-app .rt-search-label {
  display: block;
  font-size: 12px;
  color: var(--rt-text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

#rootle-app .rt-search-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#rootle-app .rt-search-input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--rt-border-mid);
  border-radius: var(--rt-radius);
  background: var(--rt-surface);
  color: var(--rt-text);
}

#rootle-app .rt-search-btn {
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

#rootle-app .rt-search-msg {
  font-size: 13px;
  color: var(--rt-text-faint);
  font-style: italic;
  margin: 0 0 8px;
}

#rootle-app .rt-search-card .rt-field {
  margin-bottom: 10px;
}

/* ── Spacing — button below search field/message ──────────────────────────── */
#rootle-app .rt-search-card .rt-btn-green,
#rootle-app .rt-entiretree-card .rt-btn-green {
  margin-top: 12px;
}

/* ── Click action pill toggle ─────────────────────────────────────────── */
#rootle-app .rt-click-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 0;
  border-top: none;
  margin-top: 0;
  margin-left: auto;
  flex-shrink: 0;
}

#rootle-app .rt-click-action-label {
  font-size: 12px;
  color: var(--rt-text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

#rootle-app .rt-pill-toggle {
  display: inline-flex;
  border: 1.5px solid var(--rt-blue);
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

#rootle-app .rt-pill-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border: none;
  background: var(--rt-surface);
  color: var(--rt-blue);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}

#rootle-app .rt-pill-btn:first-child {
  border-right: 1px solid var(--rt-blue);
}

#rootle-app .rt-pill-btn.rt-pill-active {
  background: var(--rt-blue);
  color: #fff;
}

#rootle-app .rt-pill-btn:not(.rt-pill-active):hover {
  background: var(--rt-blue-light);
}

@media (max-width: 540px) {
  #rootle-app .rt-click-action-row {
    width: 100%;
    padding: 6px 0 2px;
    border-top: 1px solid var(--rt-border);
    margin-top: 2px;
    margin-left: 0;
    gap: 8px;
  }
  #rootle-app .rt-pill-btn {
    font-size: 11px;
    padding: 4px 9px;
  }
}


/* ── Tray complete state (all placed) ─────────────────────────────────── */
#rootle-app .rt-tray.rt-tray-complete {
  background: var(--rt-green-light);
  border-right-color: var(--rt-green);
  transition: background 0.3s, border-color 0.3s;
}

#rootle-app .rt-tray.rt-tray-complete .rt-bloodlines-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--rt-green);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
  padding-top: 4px;
}

#rootle-app .rt-tray.rt-tray-complete .rt-bloodlines-label::before {
  content: '🌿 ';
}