/* Extras menu */
#extras { position: relative; }
#extras summary { cursor: pointer; padding: 4px 8px; border-radius: 8px; background: #FFFFFF; color: #000000; list-style: none; font-weight: 700; }
#extras > div { position: absolute; right: 0; bottom: calc(100% + 10px); display: grid; gap: 6px; padding: 10px 12px; min-width: 200px; border-radius: 12px; background: #000000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .34); }
#extras label { display: flex; gap: 7px; align-items: center; white-space: nowrap; }

/* Page transitions */
#wipe { position: fixed; inset: 0; z-index: 90; display: flex; pointer-events: none; }
#wipe i { display: block; flex: 1; height: 110%; margin-top: -5%; }
#wipe.in i { transform: translateY(-110%); animation: wipein .5s cubic-bezier(.65, 0, .35, 1) forwards; }
#wipe.out i { animation: wipeout .6s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes wipein { to { transform: translateY(0); } }
@keyframes wipeout { to { transform: translateY(112%); } }

/* Market-hours pill */
.mood-pill { display: inline-block; margin-top: 18px !important; padding: 7px 13px; border-radius: 999px; background: rgba(7, 6, 15, .86); font-size: 14px; font-weight: 600; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--fx-d); }
.mood-pill.open { box-shadow: inset 0 0 0 1.5px var(--fx-a); }
html[data-theme="terrain"] .hero .cta { margin-top: 16px; }

/* Sound button */
#snd { position: fixed; right: 14px; bottom: 74px; z-index: 55; padding: 9px 14px; border: 0; border-radius: 999px; font: 700 14px var(--body, sans-serif); background: #07060F; color: #FFFFFF; box-shadow: 0 0 0 2px var(--fx-a), 0 8px 22px rgba(0, 0, 0, .5); cursor: pointer; }
#snd[aria-pressed="true"] { background: var(--fx-a); color: #07060F; }

/* BUNCHA DATA background */
#word-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .54; }
html.has-bg[data-theme="terrain"] { background: #07060F; }
html.has-bg[data-theme="terrain"] body { background: transparent; }
html.has-bg[data-theme="terrain"] .real-band { background: rgba(7, 6, 15, .34); }
html.has-bg[data-theme="terrain"] .quiz-band, html.has-bg[data-theme="terrain"] .smart-band, html.has-bg[data-theme="terrain"] .news-band, html.has-bg[data-theme="terrain"] .course { background: rgba(14, 11, 28, .46); }
html.has-bg[data-theme="terrain"] .play-band { background: transparent; }
html.has-bg[data-theme="terrain"] .ai-band { background: rgba(30, 18, 70, .5); }
html.has-bg[data-theme="terrain"] .contact-band { background: rgba(21, 17, 41, .5); }
html.has-bg[data-theme="terrain"] .lab-band { background: rgba(29, 11, 61, .55); }

/* 3D guides */
html[data-theme="terrain"] .book.opens { transition: transform .6s cubic-bezier(.2, .9, .3, 1.1); }
.book.waiting { transform: translate3d(0, 150px, -700px) rotateY(-110deg) rotateX(24deg) !important; opacity: 0; }
.book.flown { animation: bookfly 1.15s cubic-bezier(.16, .95, .3, 1.05) backwards; }
@keyframes bookfly { from { transform: translate3d(0, 150px, -700px) rotateY(-110deg) rotateX(24deg); opacity: 0; } 40% { opacity: 1; } }
.book.opens img { transform-origin: left center; transition: transform .75s cubic-bezier(.3, .8, .3, 1); z-index: 5; }
.book.opens.open { transform: rotateY(-6deg) rotateX(3deg) translateX(20%) !important; }
.book.opens.open img { transform: translateZ(13px) rotateY(-158deg); }
.pg { position: absolute; inset: 2px 3px 2px 0; padding: 14px 13px; display: flex; flex-direction: column; gap: 8px; background: #FFF8EC; color: #07060F; border-radius: 1px 5px 5px 1px; transform-origin: left center; transform: translateZ(11px); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: 13px; line-height: 1.28; box-shadow: inset 8px 0 12px -8px rgba(0, 0, 0, .4); transition: transform .65s cubic-bezier(.3, .8, .3, 1); overflow: hidden; }
.pg b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5316B0; }
.pg span { display: block; padding-top: 6px; border-top: 1px solid rgba(7, 6, 15, .18); }
.pg1 { z-index: 4; }
.pg2 { z-index: 3; transform: translateZ(10px); }
.pg3 { z-index: 2; transform: translateZ(9px); }
.book.opens.open .pg1 { animation: turn1 4.6s .85s ease-in-out infinite; }
.book.opens.open .pg2 { animation: turn2 4.6s .85s ease-in-out infinite; }
@keyframes turn1 { 0%, 22% { transform: translateZ(11px) rotateY(0); } 34%, 92% { transform: translateZ(11px) rotateY(-165deg); } 100% { transform: translateZ(11px) rotateY(0); } }
@keyframes turn2 { 0%, 56% { transform: translateZ(10px) rotateY(0); } 68%, 92% { transform: translateZ(10px) rotateY(-165deg); } 100% { transform: translateZ(10px) rotateY(0); } }
.peek { display: block; margin: -4px auto 6px; padding: 8px 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #FFFFFF; font: 700 14px var(--body); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.peek:hover { background: rgba(255, 255, 255, .28); }

/* Falling data behind the game */
#data-rain { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .9; }
html.is-game[data-theme="terrain"] body { background: transparent; }
html.is-game[data-theme="terrain"] { background: #07060F; }
html.is-game[data-theme="terrain"] main > h1 { text-shadow: 0 2px 18px #000000, 0 0 40px #000000; }
html.is-game[data-theme="terrain"] main > footer { padding: 12px 16px; border-radius: 12px; background: rgba(7, 6, 15, .86); }
#world-flash { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
#world-flash.win { background: radial-gradient(circle, color-mix(in srgb, var(--fx-a) 55%, transparent), transparent 72%); animation: wf .9s ease-out; }
#world-flash.lose { background: radial-gradient(circle, color-mix(in srgb, var(--fx-b) 60%, transparent), transparent 72%); animation: wf 1.1s ease-out; }
@keyframes wf { 0% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  #snd { bottom: 104px; right: 10px; padding: 7px 11px; font-size: 13px; }
  #extras > div { right: -40px; }
  .pg { font-size: 11.5px; padding: 10px; gap: 5px; }
  .book.opens.open { transform: rotateY(-6deg) rotateX(3deg) translateX(24%) !important; }
}
@media (prefers-reduced-motion: reduce) { .book.opens.open .pg1, .book.opens.open .pg2 { animation: none; } }

/* Two colors, not a rainbow */
html[data-theme="terrain"] #scroll-bar { background: linear-gradient(90deg, #4F7BFF, var(--fx-b)); }
html[data-theme="terrain"] .quiz-glow { background: linear-gradient(90deg, #4F7BFF, var(--fx-b), #4F7BFF) 0 0 / 300% 100%; }
html[data-theme="terrain"] .sweepable::after { background: linear-gradient(90deg, transparent, #4F7BFF, var(--fx-b), transparent); }

/* Email signups */
.su { margin-top: 20px; padding: 20px 22px; border-radius: 16px; background: #17132A; color: #FFFFFF; text-align: left; box-shadow: inset 0 0 0 2px var(--fx-b); }
.su.wide { max-width: none; margin-top: 22px; }
html[data-theme="terrain"] .su .su-title { margin: 0; font: var(--w, 300) clamp(23px, 2.8vw, 32px)/1.14 var(--display); letter-spacing: var(--track, -.03em); color: #FFFFFF; text-transform: none; }
.su .su-text { margin: 8px 0 0; font-size: 16.5px; line-height: 1.42; color: #E9E6F7; }
.su-form { margin-top: 12px; }
.su-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.su-row { display: flex; flex-wrap: wrap; gap: 9px; }
.su-row input { flex: 1 1 230px; min-width: 0; padding: 13px 17px; font: 500 17px var(--body, sans-serif); color: #07060F; background: #FFFFFF; border: 0; border-radius: 999px; }
.su-row button { flex: none; padding: 13px 24px; font: 700 17px var(--body, sans-serif); color: #07060F; background: var(--fx-b); border: 0; border-radius: 999px; cursor: pointer; transition: transform .15s ease; }
.su-row button:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); }
.su-row button:disabled { opacity: .6; cursor: default; }
.su .su-msg { margin: 8px 0 0; min-height: 1.3em; font-size: 15px; font-weight: 600; color: #FFFFFF; }
.su .su-msg.bad { color: #FFD76A; }
.su .su-fine { margin: 2px 0 0; font-size: 13.5px; color: #C9C6DE; }
.su .su-fine a { color: #FFFFFF; }
.su .su-done { margin: 0; font-weight: 700; font-size: 18px; color: #FFFFFF; }
.foot-join a { font-weight: 700; color: var(--fx-a); }
p.foot-join { margin: 0 0 12px; font-size: 16px; }
@media (max-width: 560px) { .su-row button { width: 100%; } }

/* Every section's text sits on a dark panel, so nothing is ever read on top of the falling numbers. The word shows in the gaps. */
html.has-bg[data-theme="terrain"] section.band:not(.hero):not(.promo-band) { background: transparent !important; }
html.has-bg[data-theme="terrain"] section.band:not(.hero):not(.promo-band) > .wrap { padding: clamp(20px, 3vw, 38px); border-radius: 22px; background: rgba(9, 7, 20, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html.is-game[data-theme="terrain"] main > h1 { width: fit-content; max-width: 100%; padding: 6px 18px 10px; border-radius: 14px; background: rgba(7, 6, 15, .86); text-shadow: none; }
@media (max-width: 760px) { html.has-bg[data-theme="terrain"] section.band:not(.hero):not(.promo-band) > .wrap { margin-inline: 10px; width: auto; } }