:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
  color: #f2ece6;
  background: #0c0806;
  --bg: #0c0806;
  --panel: #171009;
  --ink: #f2ece6;
  --muted: #a4948a;
  --line: rgba(255, 255, 255, .1);
  --ember: #ff9d5c;
  --dim-red: #d8664f;
  --green: #8fcf9c;
}
* { box-sizing: border-box }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none }
body { min-height: 100dvh; background: radial-gradient(circle at 50% -10%, #201308 0, transparent 46%), #0c0806 }
button, a, input { font: inherit }
button { -webkit-tap-highlight-color: transparent }
.app { width: min(100%, 520px); min-height: 100dvh; margin: auto; position: relative; padding: max(12px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); overflow: hidden }
.topbar { height: 48px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; position: relative; z-index: 5 }
.home-link { color: #c7b9ac; text-decoration: none; font-size: 12px; font-weight: 900; letter-spacing: .08em; display: flex; gap: 7px; align-items: center }
.progress { height: 4px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden }
.progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dim-red), var(--ember)); transition: width .35s ease }
.sound-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #cbbcae; font-weight: 800 }
.screen { display: none; min-height: calc(100dvh - 84px); padding: 30px 4px 18px; animation: enter .28s ease }
.screen.active { display: block }
@keyframes enter { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.eyebrow { font-size: 12px; letter-spacing: .19em; font-weight: 950; color: var(--ember); margin: 0 0 14px }
.screen h1 { font-size: clamp(46px, 13vw, 68px); line-height: .96; letter-spacing: -.06em; margin: 12px 0 0; font-weight: 950 }
.screen h1 span { color: var(--ember) }
.lead { font-size: 15px; line-height: 1.85; color: #c3b6aa; margin: 22px 0 26px }
.lead strong { color: #fff }

.recap { border: 1px solid rgba(255, 157, 92, .3); background: rgba(255, 157, 92, .07); border-radius: 20px; padding: 16px 17px; margin: 4px 0 22px }
.recap-eyebrow { font-size: 12px; letter-spacing: .14em; font-weight: 950; color: var(--ember); margin: 0 0 10px }
.recap-list { display: flex; flex-direction: column; gap: 8px }
.recap-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 13px; padding: 9px 11px; background: rgba(0, 0, 0, .18) }
.recap-item strong { font-size: 13px; font-weight: 800 }
.recap-item .recap-btns { display: flex; gap: 6px }
.recap-item button { border: 1px solid var(--line); background: transparent; color: #d8cabe; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900 }
.recap-item button.ok { color: var(--green); border-color: rgba(143, 207, 156, .4) }
.recap-item button.still { color: var(--ember); border-color: rgba(255, 157, 92, .4) }
.recap-item.resolved { opacity: .45 }
.recap-hint { font-size: 12px; color: #9a8c80; margin: 10px 0 0 }

.intensity-card { background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--line); border-radius: 22px; padding: 18px; margin: 20px 0 }
.intensity-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; font-size: 12px; color: #c3b6aa }
.intensity-head strong { font-size: 27px; color: #fff }
.intensity-head small { font-size: 12px; color: #8c7f74; margin-left: 2px }
.intensity-card input { width: 100%; accent-color: var(--ember); margin: 18px 0 7px }
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #8c7f74 }

.primary-btn { width: 100%; border: 0; border-radius: 18px; background: #f5efe8; color: #180f08; padding: 18px 19px; font-weight: 950; display: flex; justify-content: space-between; align-items: center; margin-top: 18px; box-shadow: 0 12px 34px rgba(0, 0, 0, .3) }
.primary-btn:active { transform: scale(.985) }
.primary-btn b { font-size: 19px }
.primary-btn:disabled { opacity: .35 }
.primary-btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #f2ece6; box-shadow: none }
.secondary-btn { display: block; width: 100%; text-align: center; margin-top: 16px; background: transparent; border: 1px solid var(--line); color: #c3b6aa; border-radius: 16px; padding: 13px; font-weight: 800; font-size: 12px }
.microcopy, .hint, .privacy-note { font-size: 12px; line-height: 1.65; color: #8c7f74; text-align: center }
.local-stats { display: flex; justify-content: center; gap: 24px; margin-top: 24px; font-size: 12px; color: #8c7f74; letter-spacing: .1em }
.local-stats b { color: #d8cabe }

.screen-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px }
.screen h2 { font-size: 38px; line-height: 1.05; letter-spacing: -.05em; margin: 0; font-weight: 930 }
.screen h2 span, .screen h2 em { color: var(--ember); font-style: normal }
.sublead { color: #ab9c8f; font-size: 13px; line-height: 1.75; margin: 15px 0 24px }
.score-pill { min-width: 62px; height: 40px; border: 1px solid var(--line); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #ab9c8f; gap: 3px }
.score-pill span { color: #fff; font-weight: 950 }

.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px }
.slot-grid button { border: 1px solid var(--line); background: #14100b; color: #ece3d9; border-radius: 18px; padding: 18px 14px; display: flex; align-items: center; gap: 11px; text-align: left }
.slot-grid button span { font-size: 22px }
.slot-grid button b { font-size: 13px }
.slot-grid button.selected { border-color: rgba(255, 157, 92, .55); background: rgba(255, 157, 92, .12) }

.card-stage { min-height: 330px; position: relative; margin: 20px 0 14px; display: grid; place-items: center }
.thought-card { position: relative; width: 100%; min-height: 300px; border-radius: 26px; background: linear-gradient(160deg, #1c130a, #120c07); border: 1px solid rgba(255, 255, 255, .1); padding: 22px; box-shadow: 0 22px 50px rgba(0, 0, 0, .4); display: flex; flex-direction: column; gap: 16px; touch-action: pan-y; user-select: none; transition: transform .18s ease, opacity .18s ease }
.card-eyebrow { margin: 0; font-size: 12px; color: #9a8c80; font-weight: 800 }
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.chip-grid button { border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: #ece3d9; border-radius: 13px; padding: 12px 8px; font-size: 12px; font-weight: 800 }
.chip-grid button.selected { border-color: rgba(255, 157, 92, .6); background: rgba(255, 157, 92, .16); color: var(--ember) }
.thought-input { width: 100%; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: #f2ece6; border-radius: 13px; padding: 13px 14px; font-size: 14px }
.thought-input::placeholder { color: #8c7f74 }

.swipe-label { position: absolute; top: 18px; font-size: 12px; font-weight: 950; letter-spacing: .1em; opacity: 0; transition: opacity .15s; z-index: 3 }
.swipe-label.left { left: 10px; color: var(--green) }
.swipe-label.right { right: 10px; color: var(--ember) }

.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.choice { border: 1px solid var(--line); background: #14100b; color: #fff; border-radius: 17px; padding: 14px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; text-align: left }
.choice small { grid-column: 1 / -1; color: #8c7f74; font-size: 12px }
.choice strong { font-size: 16px; margin-top: 3px }
.choice span { font-size: 18px; align-self: end }
.choice.now strong, .choice.now span { color: var(--green) }
.choice.park strong, .choice.park span { color: var(--ember) }
.feedback { min-height: 26px; text-align: center; font-size: 12px; font-weight: 900; padding-top: 8px; color: #d8cabe }

.breathe-stage { height: 220px; display: grid; place-items: center; margin: 20px 0 }
.breathe-ring { width: 120px; height: 120px; border-radius: 50%; border: 1px solid rgba(255, 157, 92, .55); background: radial-gradient(circle, rgba(255, 157, 92, .22), transparent 70%); animation: breathe 7s ease-in-out infinite }
@keyframes breathe { 0%, 100% { transform: scale(.8); opacity: .6 } 50% { transform: scale(1.15); opacity: 1 } }
.breathe-text { text-align: center; font-size: 13px; line-height: 1.9; color: #ab9c8f }

.result-screen { text-align: center }
.result-symbol { display: flex; align-items: center; gap: 9px; color: #9a8c80; font-size: 12px; font-weight: 900; letter-spacing: .13em; margin: 20px 0 26px }
.result-symbol i { height: 1px; flex: 1; background: rgba(255, 255, 255, .16) }
.result-symbol b { font-size: 20px; color: #fff }
.result-screen h2 { font-size: 42px }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 }
.result-stats div { border: 1px solid var(--line); border-radius: 16px; padding: 13px 6px; background: rgba(255, 255, 255, .03) }
.result-stats small { display: block; font-size: 12px; color: #8c7f74; margin-bottom: 6px }
.result-stats strong { font-size: 16px }
.rule-card { text-align: left; border: 1px solid rgba(255, 157, 92, .24); background: rgba(255, 157, 92, .07); border-radius: 20px; padding: 18px; margin: 22px 0 }
.rule-card strong { font-size: 18px; display: block }
.rule-card p { font-size: 12px; line-height: 1.65; color: #ab9c8f; margin: 9px 0 0 }
.secondary-link { display: block; color: #ab9c8f; font-size: 12px; text-decoration: none; padding: 16px; text-align: center }

#darkScreen { background: #000; min-height: calc(100dvh - 84px); display: grid; place-items: center }
.dark-text { color: #4a3f36; font-size: 12px; letter-spacing: .1em }
body.lights-out { background: #000 }
body.lights-out .topbar { visibility: hidden }
.choice:disabled { opacity: .35 }

.flash { position: fixed; inset: 0; pointer-events: none; background: #fff; opacity: 0; z-index: 50 }
.flash.go { animation: flash .22s ease }
@keyframes flash { 0% { opacity: .1 } 100% { opacity: 0 } }

@media (max-height: 700px) {
  .screen { padding-top: 18px }
  .card-stage { min-height: 280px }
  .thought-card { min-height: 260px }
  .screen h1 { font-size: 46px }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .001ms !important; transition-duration: .001ms !important }
}