/* Convenience food lesson. All rules scoped under .cvf-* */
.cvf-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the clock */
.cvf-clock { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 132px; }
.cvf-clock svg { width: 100%; height: auto; display: block; overflow: visible; }
.cvf-clock b { font: 800 20px var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cvf-clock span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.cvf-clock.cvf-big { width: 160px; }
.cvf-clock.cvf-big b { font-size: 24px; }
.cvf-face { fill: #F3EFE8; stroke: #FFFFFF; stroke-width: 3; }
.cvf-tick { stroke: #8E86A6; stroke-width: 2.5; stroke-linecap: round; }
.cvf-arc { fill: rgba(123, 92, 253, .55); }
.cvf-hand { stroke: #2A2238; stroke-width: 3.5; stroke-linecap: round; }
.cvf-pin { fill: var(--violet); }

/* the jobs */
.cvf-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.cvf-job { min-height: 64px; padding: 8px 6px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  animation: cvfDeal .45s cubic-bezier(.3,1.4,.6,1) both; transition: background .3s, border-color .3s, opacity .3s; }
.cvf-job b { font: 700 14px var(--sans); line-height: 1.15; text-align: center; }
.cvf-job span { font: 700 13px var(--mono); color: var(--gold); }
.cvf-job.cvf-did { background: rgba(63, 214, 154, .16); border-color: var(--mint); cursor: default; }
.cvf-job.cvf-did b::before { content: '\2713  '; color: var(--mint); }
@keyframes cvfDeal { from { opacity: 0; transform: translateY(18px) scale(.9); } }
.cvf-note { font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }

/* the tray */
.cvf-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.cvf-tray { width: 46%; max-width: 180px; aspect-ratio: 1; object-fit: cover; border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: box-shadow .6s, filter .6s; }
.cvf-tray.cvf-hot { box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(252,192,80,.55); filter: saturate(1.15); }

/* where it went */
.cvf-ghost .cvf-job { animation: none; cursor: default; }
.cvf-fac { position: relative; width: 100%; max-width: 320px; border-radius: 14px; border: 2px dashed var(--line-strong); }
.cvf-moved .cvf-fac { border-color: transparent; }
.cvf-fac img { width: 100%; height: clamp(120px, 20vh, 170px); object-fit: cover; border-radius: 14px; display: block; opacity: 0; transform: scale(.94); transition: opacity .6s .5s, transform .6s .5s; }
.cvf-fac span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 13px var(--sans); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); opacity: 0; transition: opacity .5s 1s; }
.cvf-moved .cvf-ghost .cvf-job { animation: cvfFly .9s cubic-bezier(.5,0,.7,.4) forwards; }
.cvf-moved .cvf-ghost .cvf-job:nth-child(2) { animation-delay: .12s; }
.cvf-moved .cvf-ghost .cvf-job:nth-child(3) { animation-delay: .24s; }
.cvf-moved .cvf-fac img { opacity: 1; transform: none; }
.cvf-moved .cvf-fac span { opacity: 1; }
@keyframes cvfFly { to { opacity: 0; transform: translateY(110px) scale(.4); } }

/* who decides */
.cvf-who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 360px; }
.cvf-pick { min-height: 44px; padding: 8px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--text);
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; cursor: pointer; text-align: center; transition: border-color .3s, background .3s, opacity .3s; }
.cvf-pick img { width: 100%; height: clamp(96px, 16vh, 140px); object-fit: cover; border-radius: 10px; display: block; }
.cvf-pick b { font: 800 16px var(--sans); }
.cvf-pick span { font: 600 12.5px var(--sans); color: var(--dim); }
.cvf-pick.cvf-lock { cursor: default; }
.cvf-pick.cvf-lock:not(.cvf-right):not(.cvf-wrong) { opacity: .5; }
.cvf-pick.cvf-right { border-color: var(--mint); background: rgba(63, 214, 154, .14); }
.cvf-pick.cvf-wrong { border-color: var(--red); background: rgba(216, 85, 85, .14); }

/* the TV dinner */
.cvf-fig { margin: 0; width: 100%; max-width: 360px; }
.cvf-fig img { width: 100%; height: auto; max-height: 240px; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 10px 24px rgba(0,0,0,.35); }

@media (max-height: 700px) {
  .cvf-clock { width: 110px; }
  .cvf-clock.cvf-big { width: 128px; }
  .cvf-clock.cvf-big b { font-size: 20px; }
  .cvf-job { min-height: 56px; }
  .cvf-tray { max-width: 140px; }
  .cvf-fac img { height: 110px; }
  .cvf-pick img { height: 90px; }
  .cvf-fig img { max-height: 190px; }
}