/* Overconfidence lesson. All rules scoped under .ovc-* */

.ovc-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the test */
.ovc-pic { margin: 0; display: grid; place-items: center; }
.ovc-pic img { width: 230px; max-width: 100%; max-height: 26vh; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(123,92,253,.35)); }
.ovc-read { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ovc-read b { font: 800 30px/1.1 var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; }
.ovc-read span { font: 700 13px var(--sans); color: var(--dim); letter-spacing: .04em; }

.ovc-rng { position: relative; height: 72px; margin: 34px 4px 6px; cursor: grab; user-select: none; -webkit-user-select: none; }
.ovc-track { position: absolute; left: 22px; right: 22px; top: 22px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.1); }
.ovc-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); }
.ovc-th { position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(252,192,80,.22), 0 4px 10px rgba(0,0,0,.4); }
.ovc-ends { position: absolute; left: 12px; right: 12px; top: 50px; display: flex; justify-content: space-between; font: 700 12px var(--sans); color: var(--faint); }

/* the answer lands */
.ovc-pin { position: absolute; top: -34px; width: 0; height: 0; opacity: 0; transform: translateY(-30px); transition: transform .45s cubic-bezier(.3,1.4,.6,1), opacity .2s; z-index: 2; }
.ovc-pin::before { content: ''; position: absolute; left: -2px; top: 16px; width: 4px; height: 30px; border-radius: 2px; background: var(--gold); }
.ovc-pin b { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; background: var(--gold); color: #2a1b00; font: 800 13px var(--sans); white-space: nowrap; }
.ovc-rng.ovc-dropped .ovc-pin { opacity: 1; transform: none; }
.ovc-rng.ovc-locked { cursor: default; }
.ovc-rng.ovc-locked .ovc-th { box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ovc-rng.ovc-hit .ovc-fill { background: var(--mint); }
.ovc-rng.ovc-miss .ovc-fill { background: #4a4e66; }
.ovc-read.ovc-ok span { color: var(--mint); }
.ovc-read.ovc-no span { color: var(--dim); }

/* everyone else */
.ovc-bars { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 16px; }
.ovc-bar { display: grid; grid-template-columns: 70px 1fr 78px; align-items: center; gap: 8px; font: 700 13px var(--sans); color: var(--dim); }
.ovc-bar i { height: 22px; border-radius: 8px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.ovc-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 8px; transition: width .7s; }
.ovc-said i::after { background: var(--violet-bright); }
.ovc-got i::after { background: var(--gold); }
.ovc-you i::after { background: var(--mint); }
.ovc-bar b { color: var(--text); font-size: 14px; }

/* the pitch and the meters */
.ovc-con { width: 100%; max-width: 330px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.ovc-meters { display: flex; flex-direction: column; gap: 8px; }
.ovc-m { display: grid; grid-template-columns: 1fr 84px; gap: 2px 8px; font: 700 13px var(--sans); color: var(--dim); }
.ovc-m span { grid-column: 1 / -1; }
.ovc-m div { position: relative; height: 16px; border-radius: 6px; background: rgba(255,255,255,.08); }
.ovc-m div i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.ovc-sure div i { background: var(--gold); }
.ovc-right div i { background: var(--mint); width: 0; }
.ovc-right b { color: var(--dim); }
.ovc-m b { color: var(--text); font-size: 14px; }


@media (max-height: 700px) {
  .ovc-pic img { max-height: 20vh; width: 190px; }
  .ovc-read b { font-size: 26px; }
  .ovc-rng { height: 68px; }
}
.ovc-pitch { width: 100%; max-width: 330px; border-radius: 16px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; text-align: center;
  background: linear-gradient(160deg, #2a1f55, #14233f); border: 1px solid var(--line-strong); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.ovc-pitch small { font: 700 12px var(--sans); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.ovc-pitch b { font: 800 26px/1.15 var(--serif); color: var(--gold); }
.ovc-adds { display: flex; flex-direction: column; gap: 5px; }
.ovc-adds i { font: 600 14px var(--sans); font-style: normal; color: var(--text); padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.07); animation: ovcIn .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes ovcIn { from { opacity: 0; transform: translateY(6px) scale(.95); } }
/* After the pitch rules above, so the small phone wins. */
@media (max-height: 700px) {
  .ovc-con { gap: 8px; }
  .ovc-pitch { padding: 10px 14px 12px; gap: 5px; }
  .ovc-pitch b { font-size: 22px; }
  .ovc-adds { gap: 3px; }
  .ovc-adds i { padding: 3px 10px; font-size: 13px; }
  .ovc-meters { gap: 4px; }
  .ovc-m div { height: 11px; }
  .ovc-pitch small { font-size: 11.5px; }
}