/* Marshmallow test. Everything scoped under .mst-*. */
.mst-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the test */
.mst-test { flex: 1; justify-content: center; }
.mst-table { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.mst-ring { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.mst-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.mst-rt { fill: none; stroke: rgba(234, 227, 215, .12); stroke-width: 8; }
.mst-rf { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; }
.mst-secs { font: 800 40px/1 var(--sans); color: var(--text); margin-top: -8px; }
.mst-ring small { position: absolute; bottom: 30px; font: 700 12.5px var(--sans); color: var(--dim); }
.mst-ring.mst-stop .mst-rf { stroke: var(--faint); }
.mst-ring.mst-done .mst-rf { stroke: var(--mint); }
.mst-plate { position: relative; width: 250px; height: 130px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 26px; }
.mst-plate::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #F4F1EA 0 55%, #D9D4C8 56% 64%, #F4F1EA 65%); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.mst-plate img { position: relative; width: 92px; height: auto; opacity: 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.mst-plate .mst-m2 { display: none; }
.mst-plate img.in { opacity: 1; animation: mst-drop .55s cubic-bezier(.3, 1.5, .5, 1); }
.mst-plate .mst-m2.in { display: block; }
@keyframes mst-drop { from { transform: translateY(-140px); opacity: 0; } 60% { transform: translateY(6px) scaleY(.9); opacity: 1; } }
.mst-plate img.eaten { animation: mst-eat .6s ease-in forwards; }
@keyframes mst-eat { 30% { transform: scale(.85); clip-path: circle(48% at 70% 30%); } to { transform: scale(.2); opacity: 0; } }
.mst-out { font: 700 17px/1.3 var(--serif); color: var(--text); text-align: center; animation: mst-fade .4s ease-out; }
@keyframes mst-fade { from { opacity: 0; transform: translateY(6px); } }
.mst-years { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; justify-content: center; }
.mst-years span { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 13px var(--sans); color: var(--dim); }
.mst-years img { width: 54px; height: auto; }
.mst-years b { display: grid; place-items: center; width: 64px; height: 54px; border-radius: 10px; background: var(--surface); border: 2px solid var(--line-strong); font: 800 18px var(--sans); color: var(--text); }
.mst-years i { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--gold)); margin-bottom: 20px; }
.btn.mst-eat { background: var(--raised); color: var(--text); border: 2px solid var(--line-strong); box-shadow: none; }

/* the kid art */
.mst-art { display: block; width: 210px; max-width: 100%; max-height: 30vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 16px 26px rgba(123, 92, 253, .3)); }

/* the chart */
.mst-chart { max-width: 360px; margin: 0 auto; gap: 6px; }
.mst-plot { display: block; width: 100%; max-width: 340px; height: auto; }
.mst-ax { stroke: rgba(234, 227, 215, .4); stroke-width: 1.5; }
.mst-axt { fill: var(--dim); font: 700 13px var(--sans); }
.mst-fit { stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 6; transition: opacity .5s; }
.mst-fit.mst-faded { opacity: .18; }
.mst-fit0 { stroke: var(--violet-bright); stroke-dasharray: none; transition: opacity .6s; }
.mst-fit1 { stroke: var(--gold); stroke-dasharray: none; transition: opacity .6s; }
.mst-kr { fill: #2A2140; stroke: rgba(234, 227, 215, .45); stroke-width: 2.5; transition: stroke .4s; }
.mst-h1 .mst-kr { stroke: var(--gold); }
.mst-h0 .mst-kr { stroke: var(--violet-bright); }
.mst-key { display: flex; gap: 14px; justify-content: center; font: 700 12.5px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.mst-key.on { opacity: 1; }
.mst-key span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; border: 2.5px solid currentColor; vertical-align: -1px; }
.mst-key .mst-k1 { color: var(--gold); }
.mst-key .mst-k0 { color: var(--violet-bright); }
.mst-note { font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }

/* the promise */
.mst-promise { gap: 8px; }
.mst-you { align-self: center; display: flex; flex-direction: column; gap: 1px; max-width: 300px; padding: 7px 12px; border-radius: 16px 16px 16px 6px; background: var(--raised); opacity: 0; transition: opacity .3s; }
.mst-you.on { opacity: 1; }
.mst-you small { font: 800 12px var(--sans); color: var(--dim); }
.mst-you span { font: 600 14px/1.3 var(--serif); color: var(--text); }
.mst-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 360px; }
.mst-child { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); color: var(--text); text-align: center; }
.mst-child:disabled { cursor: default; }
.mst-face { width: 76px; height: 76px; object-fit: cover; object-position: top; border-radius: 50%; background: #2A2140; }
.mst-child b { font: 700 17px var(--serif); }
.mst-jar { font: 700 12.5px var(--sans); color: var(--dim); }
.mst-badge { min-height: 20px; padding: 2px 8px; border-radius: 99px; font: 800 12px var(--sans); }
.mst-badge:empty { visibility: hidden; }
.mst-kept .mst-badge { background: rgba(63, 214, 154, .16); color: var(--mint); }
.mst-broke .mst-badge { background: rgba(234, 227, 215, .12); color: var(--text); }
.mst-fw { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.mst-mini { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.mst-mini.on { opacity: 1; }
.mst-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.mst-mini .mst-rt { stroke-width: 4; }
.mst-mini .mst-rf { stroke-width: 4; }
.mst-mm { position: absolute; right: -4px; top: -2px; width: 26px; height: auto; transition: opacity .3s, transform .3s; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.mst-ate .mst-mm { opacity: 0; transform: scale(.3); }
.mst-ate .mst-rf { stroke: var(--faint); }
.mst-fw em { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; padding: 1px 8px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line-strong); font: 800 12.5px var(--sans); font-style: normal; color: var(--text); }
.mst-fw em:empty { display: none; }
.mst-timing .mst-jar { display: none; }
.mst-timing .mst-face { width: 64px; height: 64px; }
.mst-child.mst-picked { box-shadow: 0 0 0 2px var(--violet-bright); }

/* Tess */
.mst-jaycard { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.mst-jaycard img { width: 110px; height: auto; flex: none; }
.mst-jaycard div { display: flex; flex-direction: column; gap: 4px; }
.mst-jaycard b { font: 700 18px var(--serif); }
.mst-jaycard span { font: 600 15px/1.35 var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .mst-ring { width: 96px; height: 96px; }
  .mst-ring small { bottom: 22px; }
  .mst-secs { font-size: 32px; }
  .mst-plate { height: 108px; }
  .mst-plate img { width: 76px; }
  .mst-face { width: 60px; height: 60px; }
  .mst-fw { width: 74px; height: 74px; }
  .mst-timing .mst-face { width: 56px; height: 56px; }
  .mst-art { max-height: 24vh; }
  .mst-jaycard img { width: 84px; }
}