/* Reminiscence bump. Everything scoped under .rb-*. */
.rb-chart { position: relative; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
.rb-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.rb-svg.live { cursor: crosshair; }
.rb-svg .rb-base { stroke: var(--line-strong); stroke-width: 1.5; }
.rb-svg .rb-ticks line { stroke: var(--line-strong); stroke-width: 1; }
.rb-svg .rb-ticks text { fill: var(--dim); font: 600 11.5px var(--sans); text-anchor: middle; }
.rb-svg .rb-axis { fill: var(--faint); font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.rb-svg .rb-yl { fill: var(--faint); font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.rb-svg .rb-src { fill: var(--dim); font: italic 500 11.5px var(--serif); text-anchor: end; }

/* the guess: empty columns until drawn */
.rb-svg .rb-bars rect { fill: rgba(123,92,253,.42); stroke: var(--violet-bright); stroke-width: 1; transition: y .08s, height .08s; }
.rb-chart.dim .rb-bars rect { fill: rgba(123,92,253,.16); stroke: rgba(169,155,255,.4); }
.rb-svg .rb-bars .rb-slot { fill: rgba(169,155,255,.035); stroke: rgba(169,155,255,.16); stroke-dasharray: 3 3; }

/* Marta's memories, one dot each */
.rb-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 1; }
.rb-dot.fresh { animation: rbDrop .35s cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: center; }
@keyframes rbDrop { from { transform: translateY(-26px) scale(1.4); opacity: 0; } }

/* curves */
.rb-c path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rb-c .ln { stroke-width: 3; }
.rb-c .glow { stroke-width: 9; opacity: .22; }
.rb-c.gold .ln { stroke: var(--gold); } .rb-c.gold .glow { stroke: var(--gold); }
.rb-c.red .ln { stroke: #FF7A7A; } .rb-c.red .glow { stroke: #FF7A7A; }
.rb-c.dash .ln { stroke: var(--text); stroke-width: 2; stroke-dasharray: 10 8; opacity: .85; }
.rb-c.dash .glow { display: none; }
.rb-c.draw:not(.dash) .ln { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.rb-c.draw.on:not(.dash) .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.45,.05,.35,1); }
.rb-c.draw .glow { opacity: 0; }
.rb-c.draw.on .glow { opacity: .22; transition: opacity .5s 1s; }
.rb-c.dash.draw .ln { opacity: 0; }
.rb-c.dash.draw.on .ln { opacity: .85; transition: opacity .7s; }

/* bands and labels */
.rb-band { fill: rgba(252,192,80,.10); animation: rbIn .5s ease-out both; }
.rb-band.faint { fill: rgba(252,192,80,.06); }
.rb-band.script { fill: rgba(169,155,255,.14); }
.rb-band.guess { fill: rgba(169,155,255,.22); stroke: var(--violet-bright); stroke-width: 1.5; stroke-dasharray: 4 3; animation: none; }
@keyframes rbIn { from { opacity: 0; } }
.rb-lab { font: 800 11.5px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; animation: rbIn .4s ease-out both; }
.rb-lab.gold { fill: var(--gold); } .rb-lab.red { fill: #FF8A8A; } .rb-lab.violet { fill: var(--violet-bright); }

/* the move marker */
.rb-move line { stroke: var(--violet-bright); stroke-width: 1.5; stroke-dasharray: 3 3; }
.rb-move text { fill: var(--violet-bright); font: 700 11.5px var(--sans); }

/* legend and hint */
.rb-legend { display: flex; justify-content: center; gap: 18px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--dim); }
.rb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rb-legend .you i { width: 12px; height: 10px; border-radius: 2px; background: rgba(123,92,253,.42); border: 1px solid var(--violet-bright); }
.rb-legend .real i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.rb-hint { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; font-size: 13px; font-weight: 700; color: var(--violet-bright); letter-spacing: .04em; transition: opacity .3s; }
.rb-hint.gone { opacity: 0; }

/* tap zones over the chart */
.rb-zones { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 320 / 206; }
.rb-zone { position: absolute; top: 12.6%; height: 67%; min-width: 44px; border-radius: 10px; border: 2px dashed var(--violet-bright); background: rgba(123,92,253,.10); display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; transition: opacity .3s, border-color .15s, background .15s; }
.rb-zone span { font-size: 12px; font-weight: 800; color: var(--text); background: rgba(10,14,26,.85); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.rb-zone.locked { pointer-events: none; }
.rb-zone.right { border-style: solid; border-color: var(--mint); background: rgba(63,214,154,.12); }
.rb-zone.wrong { border-style: solid; border-color: var(--red); background: rgba(216,85,85,.14); }
.rb-zones.done .rb-zone { opacity: 0; }

/* an ordinary life to 100 */

/* her songs: a record card over a trail of reactions */
.rb-songs { width: 100%; max-width: 360px; margin: 0 auto; display: grid; gap: 8px; }
.rb-rec { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); transition: border-color .3s; }
.rb-songs.hot .rb-rec { border-color: var(--gold-deep); }
.rb-disc { width: 34px; height: 34px; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--gold) 0 5px, #111 6px 11px, #262626 12px 13px, #111 14px); }
.rb-songs.hot .rb-disc { box-shadow: 0 0 14px rgba(252,192,80,.5); }
.rb-rt { display: flex; flex-direction: column; }
.rb-rt b { font-size: 15px; font-weight: 800; color: var(--text); }
.rb-rt i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.rb-songs.hot .rb-rt i { color: var(--gold); }
.rb-sv { display: block; width: 100%; height: auto; overflow: visible; }
.rb-sv .ax { stroke: var(--line-strong); stroke-width: 1.5; }
.rb-sv .tk { fill: var(--dim); font: 600 11.5px var(--sans); text-anchor: middle; }
.rb-sv .yl { text-anchor: end; fill: var(--faint); font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.rb-sv .band { fill: rgba(252,192,80,.10); }
.rb-sv .bandl { fill: var(--gold); font: 800 11.5px var(--sans); text-anchor: middle; }
.rb-sv .trail circle { fill: var(--violet-bright); opacity: .7; }
.rb-sv .trail circle.hi { fill: var(--gold); opacity: 1; }
.rb-sv .now { fill: #fff; stroke: var(--gold); stroke-width: 2.5; }

/* your own bump */
.rb-you { width: 100%; max-width: 360px; margin: 0 auto; display: grid; gap: 10px; }
.rb-yb { position: relative; height: 52px; border-radius: 12px; background: var(--raised); }
.rb-yb span { position: absolute; bottom: -18px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.rb-yb .lo { left: 0; } .rb-yb .hi { right: 0; }
.rb-yb .bump { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: rgba(252,192,80,.35); border: 2px solid var(--gold); }
.rb-yb .par { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; background: rgba(169,155,255,.3); border: 2px dashed var(--violet-bright); }
.rb-ylab .p { font-size: 13px; font-weight: 700; color: var(--violet-bright); }
.rb-yb .mk { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; transition: left .1s; }
.rb-ylab { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.rb-ylab .a { font-size: 20px; font-weight: 800; color: var(--gold); }
.rb-ylab .st { font-size: 13px; font-weight: 700; color: var(--dim); }

/* four years, two by two */
.choices.rb-yrs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choices.rb-yrs .choice { justify-content: center; text-align: center; }


@media (max-height: 700px) {
  .rb-rec { padding: 6px 10px; }
}