/* Design system: flag red, white, and one deeper shading red. One typeface. */
:root {
  --red: #D52B1E;
  --red-deep: #8E160F;
  --white: #FFFFFF;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --slide: 700ms;
  /* Soft glide: no whipping. Open 0.7 s, close 0.6 s, gentle ease in and out. */
  --open: 700ms; --close: 600ms; --glide: cubic-bezier(.45, .05, .25, 1);
  /* Desktop version settings */
  --band: 25vw;
  --panel-w: max(var(--band), 320px);
  --pad: 40px;
  --text: 15px;
  --big: 104px;
  --touch: 40px;
}
@media (max-width: 760px), (pointer: coarse) and (orientation: portrait) {
  /* Mobile version settings */
  :root { --band: 25vw; --pad: 26px; --text: 18px; --big: 120px; --touch: 52px; }
}
@media (prefers-reduced-motion: reduce) { :root { --slide: 1ms; --open: 1ms; --close: 1ms; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--white); overscroll-behavior: none; }
body { font-family: var(--font); color: var(--white); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: none; }

.flag { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
#brain { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
/* Band sheen: light passing over a waving flag. Two passes, both bands in sync. */
.sheen { position: fixed; top: 0; bottom: 0; width: var(--band); overflow: hidden; pointer-events: none; }
.sheen-left { left: 0; }
.sheen-right { right: 0; }
.sheen::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 25%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: translateY(-110%) skewY(-6deg); opacity: 0;
}
.sheen.sweep::before { animation: sheen 1150ms 2 both; }
@keyframes sheen {
  0% { transform: translateY(-110%) skewY(-6deg); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  39% { transform: translateY(150%) skewY(4deg); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  78% { transform: translateY(410%) skewY(-5deg); opacity: 1; }
  78.1%, 100% { transform: translateY(410%) skewY(-5deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sheen { display: none; } }
#brain.over-band { cursor: pointer; }
#brain.dragging { cursor: grabbing; }

.mode-name {
  position: fixed; left: 50%; bottom: 9vh; transform: translate(-50%, 8px);
  color: var(--red); font-weight: 600; font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
  padding-left: .42em; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.mode-name.show { opacity: 1; transform: translate(-50%, 0); }

/* Panels: the flag opening up. Same red, no border, no shadow. */
.panel {
  position: fixed; top: 0; bottom: 0; width: var(--panel-w); min-width: var(--panel-w); max-width: var(--panel-w); contain: layout; background: var(--red);
  transition: transform var(--close) var(--glide), visibility 0s linear var(--close);
  visibility: hidden; z-index: 5; display: flex; flex-direction: column;
}
.panel-left { left: 0; transform: translateX(-100%); }
.panel-right { right: 0; transform: translateX(100%); }
.panel.open { transform: none; visibility: visible; transition: transform var(--open) var(--glide), visibility 0s; }
.panel-inner {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: calc(var(--pad) + 8px) var(--pad) var(--pad);
  scrollbar-width: none; opacity: 0; transform: translateY(10px);
  transition: opacity 400ms var(--ease) 0ms, transform 400ms var(--ease) 0ms;
}
.panel-inner::-webkit-scrollbar { display: none; }
.panel.open .panel-inner { opacity: 1; transform: none; transition-delay: 220ms; }
.panel-edge {
  position: absolute; top: 0; bottom: 0; width: 18px; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 2;
}
.panel-left .panel-edge { right: -9px; }
.panel-right .panel-edge { left: -9px; }
.panel-edge::after { content: ""; position: absolute; top: 50%; left: 8px; width: 2px; height: 48px; margin-top: -24px; background: var(--white); opacity: 0; transition: opacity 200ms; border-radius: 1px; }
.panel-edge:hover::after, .panel-edge:focus-visible::after { opacity: .7; }

.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.eyebrow.small { font-size: 11px; opacity: .85; margin-top: 34px; }
.hint { margin: 0 0 28px; font-size: var(--text); font-weight: 300; line-height: 1.45; opacity: .92; }

.field { position: relative; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--white); }
textarea, .options input {
  flex: 1; width: 100%; background: transparent; border: 0; outline: none; resize: none; color: var(--white);
  caret-color: var(--white); font: 400 calc(var(--text) + 3px)/1.4 var(--font); padding: 8px 0 10px; min-height: var(--touch);
}
textarea::placeholder, .options input::placeholder { color: rgba(255,255,255,.55); }
::selection { background: var(--white); color: var(--red); }
.send { display: none; border: 0; background: transparent; color: var(--white); width: var(--touch); height: var(--touch); padding: 0; cursor: pointer; align-items: center; justify-content: center; border-radius: 2px; }
.send:hover, .send:active { background: var(--white); color: var(--red); }

/* The only button style. */
.btn {
  appearance: none; border: 0; background: transparent; color: var(--white); font: 500 calc(var(--text) - 1px)/1 var(--font);
  letter-spacing: .06em; padding: 0 14px; min-height: var(--touch); cursor: pointer; border-radius: 2px;
  transition: background 160ms, color 160ms; margin-left: -14px;
}
.btn:hover, .btn:active, .btn:focus-visible { background: var(--white); color: var(--red); outline: none; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-wide { margin-top: 18px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; }
.row { display: flex; gap: 18px; margin-top: 6px; }
.row .btn + .btn { margin-left: 0; }

.options { list-style: none; margin: 0; padding: 0; counter-reset: opt; }
.options li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.55); counter-increment: opt; }
.options li::before { content: counter(opt); font-size: 12px; font-weight: 600; width: 14px; opacity: .8; }
.options input { font-size: var(--text); min-height: var(--touch); padding: 6px 0; }
.options .x { border: 0; background: transparent; color: var(--white); font-size: 20px; line-height: 1; width: 34px; height: 34px; cursor: pointer; border-radius: 2px; opacity: .8; }
.options .x:hover { background: var(--white); color: var(--red); opacity: 1; }
.status { min-height: 1.4em; margin: 22px 0 0; font-size: 13px; font-weight: 400; opacity: .9; }

/* Answer cards: white on red, big numbers, thin white bars. */
.answer { animation: none; }
.answer.land { animation: land 700ms var(--ease); }
@keyframes land { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.answer .q { font-size: 13px; font-weight: 400; line-height: 1.45; opacity: .9; margin: 0 0 18px; overflow-wrap: anywhere; }
.big { font-size: var(--big); font-weight: 800; letter-spacing: -.04em; line-height: .9; margin: 0; }
.big small { font-size: .26em; font-weight: 500; letter-spacing: 0; margin-left: 6px; opacity: .85; }
.big.word { font-size: calc(var(--big) * .44); letter-spacing: -.02em; line-height: 1.05; overflow-wrap: anywhere; }
.meta { font-size: 13px; margin: 14px 0 8px; letter-spacing: .04em; }
.bar { height: 2px; background: rgba(255,255,255,.28); position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--white); transition: width 900ms var(--ease) 120ms; }
.subs { margin-top: 30px; display: grid; gap: 16px; }
.sub-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; letter-spacing: .04em; }
.sub-top b { font-weight: 600; }
.rank { margin-top: 26px; display: grid; gap: 16px; }

.history-wrap { margin-top: 10px; }
.history { list-style: none; margin: 0; padding: 0; }
.history li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.35); font-size: 13px; line-height: 1.4; display: flex; gap: 12px; justify-content: space-between; cursor: pointer; }
.history li:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.history li span:first-child { opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history li b { font-weight: 600; white-space: nowrap; }

/* Mobile: panels still slide out of the left and right bands, wider, with larger text and targets. */
@media (max-width: 760px), (pointer: coarse) and (orientation: portrait) {
  :root { --panel-w: 88vw; }
  .panel { padding-top: env(safe-area-inset-top); }
  .panel.open { transform: translateX(var(--drag, 0px)); }
  /* Open on mobile: the red is 80% opaque so the brain shows through slightly. Text stays solid white. */
  .panel { background: rgba(213, 43, 30, 0.8); }
  .panel.dragging { transition: none; }
  .panel-edge { width: 44px; touch-action: manipulation; }
  .panel-left .panel-edge { right: -22px; }
  .panel-right .panel-edge { left: -22px; }
  .panel-edge::after { left: 12px; opacity: .55; height: 56px; margin-top: -28px; }
  .panel-right .panel-edge::after { left: 30px; }
  .panel-inner { padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom)); touch-action: pan-y; }
  .send { display: inline-flex; }
  .mode-name { font-size: 12px; bottom: 7vh; }
  .eyebrow { font-size: 14px; }
  .eyebrow.small { font-size: 13px; }
  .answer .q, .meta, .sub-top, .history li, .status { font-size: 16px; }
  .history li { padding: 16px 0; }
  .options .x { width: 48px; height: 48px; font-size: 24px; }
  .btn-wide { font-size: 15px; }
}
#brain.over-lobe { cursor: pointer; }

/* Mentor: the explainer, same white on red. */
[hidden] { display: none !important; }
.mentor-title { margin: 0 0 26px; font-size: calc(var(--text) + 15px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.35); font-size: var(--text); font-weight: 300; line-height: 1.4; }
.steps li::before { content: counter(step); font-size: 12px; font-weight: 600; min-width: 14px; padding-top: .2em; opacity: .85; }
.abilities { margin: 0; display: grid; }
.abilities > div { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.35); }
.abilities dt { font-size: calc(var(--text) + 2px); font-weight: 600; margin-bottom: 4px; }
.abilities dt span { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; opacity: .75; margin-left: 10px; }
.abilities dd { margin: 0; font-size: var(--text); font-weight: 300; line-height: 1.4; opacity: .95; }

/* Stable layout while typing: fixed box height, inner scroll, no flex growth from content. */
.field > textarea { min-width: 0; height: calc((var(--text) + 3px) * 1.4 * 3 + 18px); max-height: none; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; scrollbar-width: none; flex: 1 1 0; }
.field > textarea::-webkit-scrollbar { display: none; }
.field .send { flex: 0 0 var(--touch); }
.options li > input { min-width: 0; flex: 1 1 0; text-overflow: ellipsis; }
.options .x { flex: 0 0 auto; }
.row { flex-wrap: nowrap; }
.row .btn { flex: 0 0 auto; white-space: nowrap; }
.status { min-height: 2.8em; }

/* Panel sheen: the same white pass as the bands. Once after an answer lands, looping while the brain thinks. */
.psheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.psheen::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 25%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.3), rgba(255,255,255,0));
  transform: translateY(-110%) skewY(-6deg); opacity: 0;
}
.psheen.sweep::before { animation: psheen 1400ms 1 both; }
.psheen.loop::before { animation: psheen 2600ms infinite; }
@keyframes psheen {
  0% { transform: translateY(-110%) skewY(-6deg); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  50% { transform: translateY(150%) skewY(4deg); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  92% { transform: translateY(410%) skewY(-5deg); opacity: 1; }
  92.1%, 100% { transform: translateY(410%) skewY(-5deg); opacity: 0; }
}
.panel-inner { position: relative; z-index: 2; }
.panel-edge { z-index: 3; }

/* Working: the pressed button breathes until the answer arrives. */
.working, .btn[disabled].working { opacity: 1; pointer-events: none; animation: work 1100ms ease-in-out infinite; }
@keyframes work { 0%, 100% { background: rgba(255,255,255,.08); } 50% { background: rgba(255,255,255,.32); } }
.send.working { color: var(--white); }

/* Mentor links: same as Add option, with a thin underline. */
.btn.link { margin-top: 22px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Thin white cue on the question side while the answer panel is open on mobile. */
.edge-cue { position: fixed; left: 10px; top: 50%; width: 2px; height: 56px; margin-top: -28px; background: var(--white); border-radius: 1px; opacity: 0; pointer-events: none; z-index: 4; transition: opacity 400ms var(--glide); }
body.cue-left .edge-cue { opacity: .75; transition-delay: var(--open); }

@media (max-width: 760px), (pointer: coarse) and (orientation: portrait) {
  /* Mobile mode name: twice the size, lifted off the bottom. */
  .mode-name { font-size: 24px; bottom: 13vh; }
}
@media (prefers-reduced-motion: reduce) { .psheen, .working { animation: none !important; } .psheen { display: none; } }