/* v47 — phone keypad stays, ads after results, compact empty state */

html { overflow-x: clip; }
body { overflow-x: clip; }

.orbit { display: none !important; }

.ad-box { min-height: 0 !important; }
.ad-region:not(:has(ins[data-ad-status="filled"])) { display: none !important; }
body:not(.has-results) .ad-region { display: none !important; }
.ad-after-results .ad-box,
.ad-after-results ins.adsbygoogle { min-height: 90px !important; }

#results.empty {
  min-height: 120px !important;
  padding: 8px 0 4px !important;
  font-size: 0.95rem;
}
#coach {
  min-height: 4.7em;
}
#results.empty .examples { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.tiles {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.tiles[aria-hidden="true"]:empty { display: none !important; }
.tile { min-width: 36px; min-height: 44px; }

.keypad {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 6px !important;
  width: 100%;
  max-width: none !important;
}
.key-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.key,
.stage-tool .key {
  flex: 1 1 0;
  min-height: 44px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 2px !important;
  font-size: 0.92rem !important;
  border-radius: 8px !important;
  -webkit-tap-highlight-color: color-mix(in oklab, #f3e2b8 35%, transparent);
}
.key-wide { flex: 1.35 1 0 !important; max-width: none !important; }

.panel { display: flex; flex-direction: column; }
.panel > .field-label { order: 0; }
.panel > .input-row { order: 1; }
.panel > .coach { order: 2; }
.panel > .keypad { order: 3; }
.panel > .modes { order: 4; }
@media (max-width: 720px) {
  .modes { min-height: 96px; }
}
.panel > .refine-btn { order: 5; }
.panel > .status { order: 6; }
.panel > #results { order: 7; }
.panel > .tiles { order: 8; }
.panel > .next-play,
.panel > #nextPlay { order: 8; }
.panel > .best-play,
.panel > .len-jumps,
.panel > .define { order: 6; }
.panel > .try-label,
.panel > .len-row,
.panel > .quick-filters,
.panel > #wordleFields,
.panel > .examples,
.panel > .more { order: 9; }

body:not(.has-results) .status { padding: 4px 0 0 !important; }
body:not(.has-results) #resultsHeading { font-size: 1rem !important; }

/* Tool pages: letter box before the daily widget on phones. */
@media (max-width: 899px) {
  main.wrap {
    display: flex;
    flex-direction: column;
  }
  main.wrap > * { order: 10; }
  main.wrap > .crumbs { order: 0; }
  main.wrap > .hero { order: 1; }
  main.wrap > .panel { order: 2; }
  main.wrap > .daily { order: 3; }
  main.wrap > .ad-region { order: 4; }
  body.has-results .orbit { display: none !important; }
}

.daily {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px !important;
}

@media (min-width: 600px) {
  .key { min-height: 46px !important; }
  .orbit { display: block !important; }
}

@media (min-width: 900px) {
  .keypad { max-width: 520px !important; }
  .key { max-width: 46px !important; min-height: 42px !important; }
  .key-wide { max-width: 56px !important; }
  main.wrap > * { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .key:hover, .key:active { transform: none !important; }
}

/* v48 — LISTEN → SILENT on the felt. Keypad and ads untouched. */
.stage:has(.story-rack) .orbit { display: none !important; }

.story-rack {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(4px, 1.6vw, 8px);
  margin: 10px 0 8px;
  perspective: 640px;
  -webkit-perspective: 640px;
}

.story-tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(32px, 8.6vw, 46px);
  height: clamp(38px, 10.2vw, 54px);
  font-size: clamp(0.85rem, 2.5vw, 1.28rem);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: story-flip 6.5s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 80ms);
}

.story-tile i,
.story-tile b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #1c1710;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 42%),
    #e7d3a4;
  border-radius: 8px;
  box-shadow:
    0 12px 18px -14px #000,
    inset 0 -3px 0 rgba(90, 60, 20, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.story-tile i { transform: rotateY(0deg); }
.story-tile b { transform: rotateY(180deg); }

@keyframes story-flip {
  0%, 28% { transform: rotateY(0deg); }
  38%, 82% { transform: rotateY(180deg); }
  92%, 100% { transform: rotateY(0deg); }
}

.story-cap {
  margin: 0 0 8px;
  color: #d7c39a;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

html[data-theme="light"] .story-cap {
  color: var(--felt);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 2px auto 0;
  padding: 0 12px;
  width: 100%;
  color: #d7c39a;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-sizing: border-box;
}
.scroll-cue:hover,
.scroll-cue:focus-visible {
  color: #f6ecda;
}
html[data-theme="light"] .scroll-cue { color: var(--felt); }
html[data-theme="light"] .scroll-cue:hover,
html[data-theme="light"] .scroll-cue:focus-visible { color: var(--felt-deep); }
body.has-results .scroll-cue { display: none; }

.story-beats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0 8px;
  padding: 0;
  scroll-margin-top: 72px;
}
.story-beats li {
  margin: 0;
  padding: 16px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.story-beats .try-label { margin: 0 0 6px; }
.story-beats h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.story-beats p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.95rem;
}
.story-beats a { color: var(--felt); }

@media (min-width: 600px) {
  .story-rack { margin: 12px 0 10px; }
  .story-beats {
    grid-template-columns: 1fr 1fr 1fr;
    margin: 28px 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-tile {
    animation: none;
    transform: rotateY(180deg);
  }
}

/* v49 — stable hero, contrast that does not depend on the photo */
.stage-bg picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

#resultsHeading,
.stage-tool .status h2,
.stage-tool .status {
  color: #1c1710 !important;
  text-shadow: none !important;
}
#resultsHeading {
  background: #f6ecda !important;
  border-radius: 8px;
  padding: 2px 8px;
}
html[data-theme="dark"] #resultsHeading,
html[data-theme="dark"] .stage-tool .status,
html[data-theme="dark"] .stage-tool .status h2 {
  color: #1c1710 !important;
}

.modes .mode,
.stage-tool .modes .mode,
.panel .modes .mode {
  color: #1c1710 !important;
  background: #f6ecda !important;
  border-color: #6a5c48 !important;
}
.modes .mode[aria-pressed="true"],
.modes .mode[aria-selected="true"],
.stage-tool .modes .mode[aria-pressed="true"],
.stage-tool .modes .mode[aria-selected="true"],
.panel .modes .mode[aria-pressed="true"],
.panel .modes .mode[aria-selected="true"] {
  color: #f6ecda !important;
  background: #1f4a38 !important;
  border-color: #1f4a38 !important;
}

.chip,
.examples .chip,
.len-jumps .chip,
.stage-tool .len-jumps .chip,
.next-play .chip {
  color: #1c1710 !important;
  background: #f3e2b8 !important;
  border-color: #6b5a3e !important;
}

.refine-btn {
  color: #1c1710 !important;
  background: #f6ecda !important;
  border: 1px solid #6a5c48 !important;
}
.refine-btn[aria-pressed="true"] {
  color: #f6ecda !important;
  background: #1f4a38 !important;
  border-color: #1f4a38 !important;
}

.cinematic .site-footer {
  background: #14110e !important;
  color: #f3e6d0 !important;
}
.cinematic .site-footer a,
html[data-theme="light"] .cinematic .site-footer a {
  color: #f6ecda !important;
}
.cinematic .footer-grid .footer-head,
.cinematic .footer-grid h2,
html[data-theme="light"] .cinematic .footer-grid .footer-head,
html[data-theme="light"] .cinematic .footer-grid h2 {
  color: #f6ecda !important;
}

.consent {
  background: #1c1710 !important;
  color: #f6ecda !important;
}
.consent a { color: #f3e2b8 !important; }
.consent button.ghost {
  color: #f6ecda !important;
  background: #1c1710 !important;
  border: 2px solid #f6ecda !important;
}