/* Pixel, the adventure companion. The rig (mskbuild/cat.py rig()) carries every
   pose's pieces; a class on the <svg> picks which are shown and how they move.
   Poses: is-wave, is-think, is-happy, is-cheer, is-proud. Accessories: wear-*. */
.px { display: block; overflow: visible; }
.px .px-arm, .px .px-trophy, .px .px-eyes-happy, .px .px-m, .px .px-acc, .px .px-q, .px .px-spark { display: none; }
.px .px-arm-rest, .px .px-m-smile { display: inline; }

.px.is-wave .px-arm-r.px-arm-rest, .px.is-proud .px-arm-r.px-arm-rest,
.px.is-think .px-arm-l.px-arm-rest, .px.is-cheer .px-arm-rest { display: none; }
.px.is-wave .px-arm-wave, .px.is-cheer .px-arm-cheer, .px.is-think .px-arm-scratch,
.px.is-proud .px-arm-hold, .px.is-proud .px-trophy { display: inline; }

.px.is-happy .px-eyes, .px.is-cheer .px-eyes, .px.is-proud .px-eyes { display: none; }
.px.is-happy .px-eyes-happy, .px.is-cheer .px-eyes-happy, .px.is-proud .px-eyes-happy { display: inline; }
.px.is-cheer .px-m-smile, .px.is-proud .px-m-smile, .px.is-think .px-m-smile { display: none; }
.px.is-cheer .px-m-grin, .px.is-proud .px-m-grin, .px.is-think .px-m-o, .px.is-think .px-q { display: inline; }
.px.is-happy .px-spark, .px.is-cheer .px-spark, .px.is-proud .px-spark { display: inline; }

.px.wear-party .px-acc-party, .px.wear-shades .px-acc-shades, .px.wear-scarf .px-acc-scarf,
.px.wear-wizard .px-acc-wizard, .px.wear-crown .px-acc-crown { display: inline; }
/* a hat replaces the visor's little light, and only one hat at a time */
.px.wear-wizard .px-acc-party, .px.wear-crown .px-acc-party, .px.wear-crown .px-acc-wizard { display: none; }

.px .px-all, .px .px-head, .px .px-eyes, .px .px-arm-wave, .px .px-arm-scratch, .px .px-q, .px .px-spark,
.px .px-trophy, .px .px-shadow, .px .px-arm-cheer { transform-box: view-box; }
.px .px-all { transform-origin: 50px 90px; }
.px .px-head { transform-origin: 50px 76px; transition: transform .35s ease; }
.px .px-eyes { transform-origin: 50px 53px; }
.px .px-arm-wave { transform-origin: 70px 77px; }
.px .px-arm-scratch { transform-origin: 30px 77px; }
.px .px-arm-cheer { transform-origin: 50px 77px; }
.px .px-trophy { transform-origin: 102px 52px; }
.px .px-shadow { transform-origin: 50px 91px; }
.px .px-q { transform-origin: 92px 2px; }
.px .px-spark-1 { transform-origin: 4px 4px; }
.px .px-spark-2 { transform-origin: 100px 18px; }
.px .px-spark-3 { transform-origin: -4px 56px; }

@media (prefers-reduced-motion: no-preference) {
  [data-motion="full"] .px .px-eyes { animation: px-blink 5.2s infinite; }
  [data-motion="full"] .px.is-idle .px-all { animation: px-breathe 3.4s ease-in-out infinite; }
  [data-motion="full"] .px.is-wave .px-arm-wave { animation: px-wave .55s ease-in-out infinite alternate; }
  [data-motion="full"] .px.is-think .px-head { transform: rotate(-7deg); }
  [data-motion="full"] .px.is-think .px-arm-scratch { animation: px-scratch .5s ease-in-out infinite alternate; }
  [data-motion="full"] .px.is-think .px-q { animation: px-bob 1.4s ease-in-out infinite; }
  [data-motion="full"] .px.is-happy .px-all { animation: px-jump .62s cubic-bezier(.3,.7,.4,1.3) 3; }
  [data-motion="full"] .px.is-happy .px-shadow { animation: px-shadow .62s cubic-bezier(.3,.7,.4,1.3) 3; }
  [data-motion="full"] .px.is-cheer .px-all { animation: px-dance 1.6s ease-in-out infinite; }
  [data-motion="full"] .px.is-cheer .px-arm-cheer { animation: px-arms .4s ease-in-out infinite alternate; }
  [data-motion="full"] .px.is-proud .px-trophy { animation: px-shine 1.8s ease-in-out infinite; }
  [data-motion="full"] .px .px-spark { animation: px-twinkle 1.3s ease-in-out infinite; }
  [data-motion="full"] .px .px-spark-2 { animation-delay: .4s; }
  [data-motion="full"] .px .px-spark-3 { animation-delay: .8s; }
}
.px.is-think .px-head { transform: rotate(-7deg); }

@keyframes px-blink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.12); } }
@keyframes px-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
@keyframes px-wave { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
@keyframes px-scratch { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes px-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes px-jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); }
  50% { transform: translateY(-18px) scale(.97, 1.04); } 85% { transform: translateY(0) scale(1.04, .95); } }
@keyframes px-shadow { 0%, 100% { transform: scale(1); opacity: .16; } 50% { transform: scale(.7); opacity: .08; } }
@keyframes px-dance {
  0% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-10px) rotate(-8deg); }
  25% { transform: translateY(0) rotate(0); } 37% { transform: translateY(-10px) rotate(8deg); }
  50% { transform: translateY(0) rotate(0); } 62% { transform: translateY(-16px) rotate(0) scale(1.04); }
  80% { transform: translateY(-6px) rotate(360deg); } 100% { transform: translateY(0) rotate(360deg); } }
@keyframes px-arms { from { transform: scaleY(1); } to { transform: scaleY(.94) translateY(3px); } }
@keyframes px-shine { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg) scale(1.05); } }
@keyframes px-twinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } }

/* ==========================================================================
   Key Stage 3 stretch tasks: the lobby, the game, the written rounds, the
   results, the hub and the printed worksheet.

   The game is a quiz show, so it is louder than the reading pages: a deep
   purple stage, four bright answer tiles that each carry a shape as well as
   a colour, and things that pop, slide and bounce. Everything that moves is
   switched off by the site-wide reduced motion rule in site.css.
   Pixel's poses come from the adventure's sheet, prepended at build time.
   ========================================================================== */

.st {
  --st-red: #D7263D; --st-red-d: #A3172C;
  --st-blue: #1F5FD1; --st-blue-d: #16449A;
  --st-yellow: #F2B705; --st-yellow-d: #B98A00; --st-yellow-ink: #1F1A05;
  --st-green: #1E7B34; --st-green-d: #145724;
  --st-stage-a: #3D1C78; --st-stage-b: #26105A; --st-stage-c: #170A3B;
  --st-gold: #FBBF24;
  --st-ok: #16A34A; --st-bad: #DC2626; --st-late: #D97706;
  position: relative;
}
.st [hidden], .st-stage [hidden] { display: none !important; }
/* site.css inks every <b>; on the dark stage the text colour comes from its box */
.st-stage b, .st-stage strong, .st-lobby b, .st-lobby strong { color: inherit; }
.st :focus-visible, .st-stage :focus-visible { outline: 3px solid #FDE047; outline-offset: 3px; }
.st-stage [tabindex="-1"]:focus { outline: none; }
.st-page { padding-bottom: var(--sp-6); }

/* --------------------------------------------------------- floating shapes */
.st-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; border-radius: inherit; }
.st-bg i { position: absolute; display: block; width: var(--s, 60px); height: var(--s, 60px); opacity: .13; background: #fff; }
.st-bg .st-s-tri { clip-path: polygon(50% 4%, 97% 92%, 3% 92%); }
.st-bg .st-s-dia { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.st-bg .st-s-cir { border-radius: 50%; }
.st-bg .st-s-sq { border-radius: 14%; }
/* They drift for about half a minute and then rest, so nothing keeps moving
   beside a question someone is trying to read. */
.st-bg i { animation: st-float var(--d, 9s) ease-in-out var(--dl, 0s) 3; }
.st-bg i:nth-child(1) { left: 4%; top: 12%; --s: 74px; }
.st-bg i:nth-child(2) { left: 22%; top: 72%; --s: 46px; --d: 11s; --dl: -3s; }
.st-bg i:nth-child(3) { left: 46%; top: 8%; --s: 38px; --d: 8s; --dl: -5s; }
.st-bg i:nth-child(4) { left: 64%; top: 64%; --s: 88px; --d: 12s; --dl: -2s; }
.st-bg i:nth-child(5) { left: 84%; top: 18%; --s: 54px; --d: 10s; --dl: -6s; }
.st-bg i:nth-child(6) { left: 90%; top: 78%; --s: 34px; --d: 9.5s; --dl: -1s; }
.st-bg i:nth-child(7) { left: 34%; top: 40%; --s: 26px; --d: 7.5s; --dl: -4s; }
.st-bg i:nth-child(8) { left: 74%; top: 38%; --s: 22px; --d: 8.5s; --dl: -7s; }
@keyframes st-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(14px, -22px) rotate(40deg); }
  66% { transform: translate(-12px, 12px) rotate(-25deg); }
}

/* ------------------------------------------------------------------- lobby */
.st-lobby {
  position: relative; display: grid; grid-template-columns: 230px 1fr; gap: var(--sp-5); align-items: center;
  margin-top: var(--sp-3); padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: var(--r-xl); overflow: hidden;
  color: #fff; background: radial-gradient(120% 140% at 0% 0%, #5B2A9E 0%, var(--st-stage-a) 38%, var(--st-stage-b) 72%, var(--st-stage-c) 100%);
  box-shadow: 0 22px 60px rgba(38, 16, 90, .35);
}
.st-lobby > *:not(.st-bg) { position: relative; z-index: 1; }
.st-lobby-host { display: grid; place-items: center; }
.st-lobby-host .px { width: 210px; max-width: 100%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.st-kicker { margin: 0 0 .35rem; font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #E9D5FF; }
.st-lobby h1 { color: #fff; margin: 0 0 var(--sp-4); font-size: var(--step-3); line-height: 1.15; }
.st-h1-tag {
  display: inline-block; vertical-align: .32em; margin-right: .35rem; padding: .22rem .65rem; border-radius: var(--r-pill);
  font: 800 .78rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--st-yellow-ink); background: var(--st-yellow);
}
.st-rounds { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.st-round {
  display: flex; align-items: center; gap: .7rem; margin: 0; padding: .7rem .8rem; border-radius: 18px;
  background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .22);
  animation: st-rise .55s cubic-bezier(.2, .8, .3, 1.2) both;
}
.st-round:nth-child(2) { animation-delay: .08s; }
.st-round:nth-child(3) { animation-delay: .16s; }
.st-round-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #fff; }
.st-round-ico svg { width: 36px; height: 36px; }
.st-round-txt { display: grid; line-height: 1.3; }
.st-round-txt b { font-family: var(--font-display); font-size: 1.02rem; }
.st-round-txt span { font-size: .82rem; color: #E9E2F7; }
.st-setup { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; margin-bottom: var(--sp-3); }
.st-name { display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 650; color: #F3E8FF; }
.st-name input {
  width: 11rem; min-height: 44px; padding: .45rem .8rem; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12); color: #fff; font: 650 1rem var(--font-body);
}
.st-name input::placeholder { color: #D8CCEF; }
.st-name input:focus { outline: 3px solid #FDE047; outline-offset: 2px; background: rgba(255, 255, 255, .2); }
.st-toggles { display: flex; gap: .5rem; }
.st-toggle {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .9rem; border-radius: var(--r-pill);
  font: 700 .88rem var(--font-body); cursor: pointer; color: #fff; background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .3); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.st-toggle .icon { width: 1.05em; height: 1.05em; }
.st-toggle::after {
  content: "Off"; margin-left: .15rem; padding: .05rem .45rem; border-radius: var(--r-pill);
  font-size: .72rem; background: rgba(255, 255, 255, .18);
}
.st-toggle[aria-pressed="true"] { color: var(--st-yellow-ink); background: #FDE68A; border-color: #FDE68A; }
.st-toggle[aria-pressed="true"]::after { content: "On"; background: rgba(31, 26, 5, .14); }
.st-best { margin: 0 0 var(--sp-3); font-size: .92rem; color: #FDE68A; font-weight: 650; display: flex; align-items: center; gap: .5rem; }
.st-best .st-stars .icon { width: 1.1rem; height: 1.1rem; }
.st-lobby-go { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.st-start {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 58px; padding: .8rem 2.1rem; border: 0; border-radius: var(--r-pill);
  cursor: pointer; font: 800 1.22rem var(--font-display); color: var(--st-yellow-ink); background: linear-gradient(180deg, #FDE047, var(--st-yellow));
  box-shadow: 0 6px 0 var(--st-yellow-d), 0 14px 28px rgba(0, 0, 0, .3); transition: transform .12s ease, box-shadow .12s ease;
  animation: st-pulse 2.4s ease-in-out 4;
}
.st-start .icon { width: 1.2em; height: 1.2em; }
.st-start:hover { transform: translateY(-2px); }
.st-start:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--st-yellow-d), 0 6px 14px rgba(0, 0, 0, .3); }
@keyframes st-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
.st-link {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .3rem .4rem; border: 0; background: none; cursor: pointer;
  font: 650 .88rem var(--font-body); color: #E9D5FF; text-decoration: underline; text-underline-offset: 3px;
}
.st-link .icon { width: 1em; height: 1em; }
.st-link:hover { color: #fff; }
.st-nojs { display: none; margin: var(--sp-3) 0 0; color: #FDE68A; font-weight: 650; }
.no-js .st-nojs { display: block; }
.no-js .st-setup, .no-js .st-lobby-go, .no-js .st-best, .no-js .st-task .st-start { display: none; }

/* the three tasks */
.st-tasks, .st-lobby > .st-lobby-go, .st-lobby > .st-nojs { grid-column: 1 / -1; }
.st-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 1.6vw, 1rem); }
.st-task {
  --tk1: #FDE047; --tk2: var(--st-yellow); --tkd: var(--st-yellow-d); --tki: var(--st-yellow-ink); --tkt: #FDE68A;
  display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 22px;
  background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .24);
  animation: st-rise .55s cubic-bezier(.2, .8, .3, 1.2) both;
}
.st-task:nth-child(2) { animation-delay: .1s; }
.st-task:nth-child(3) { animation-delay: .2s; }
.st-task-cat { --tk1: #FBCFE8; --tk2: #F472B6; --tkd: #BE185D; --tki: #3B0A24; --tkt: #FBCFE8; }
.st-task-match { --tk1: #BBF7D0; --tk2: #4ADE80; --tkd: #15803D; --tki: #052E16; --tkt: #BBF7D0; }
.st-task-sort { --tk1: #FED7AA; --tk2: #FB923C; --tkd: #C2410C; --tki: #431407; --tkt: #FED7AA; }
.st-task:nth-child(4) { animation-delay: .3s; }
/* Four tasks sit two by two. */
.st-tasks[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-task-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.st-task-art {
  width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25); animation: st-bob 3.6s ease-in-out 3;
}
.st-task:nth-child(2) .st-task-art { animation-delay: -1.2s; }
.st-task:nth-child(3) .st-task-art { animation-delay: -2.4s; }
.st-task:nth-child(4) .st-task-art { animation-delay: -3.2s; }
.st-task-art svg { width: 50px; height: 50px; }
.st-task-n {
  padding: .22rem .65rem; border-radius: var(--r-pill); font: 800 .74rem var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tki); background: var(--tkt);
}
.st-task h2 { margin: 0; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.2; }
.st-task-sum { margin: 0; font-size: .92rem; line-height: 1.5; color: #F3E8FF; }
.st-task-time { margin: 0; display: flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 650; color: #E9D5FF; }
.st-task-time .icon { width: 1em; height: 1em; }
.st-task .st-rounds { grid-template-columns: 1fr; gap: .35rem; margin: 0; }
.st-task .st-round { gap: .55rem; padding: .35rem .5rem; border-radius: 12px; animation: none; }
.st-task .st-round-ico { width: 34px; height: 34px; border-radius: 10px; }
.st-task .st-round-ico svg { width: 26px; height: 26px; }
.st-task .st-round-txt b { font-size: .9rem; }
.st-task .st-round-txt span { font-size: .76rem; }
.st-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.st-points li { display: flex; gap: .5rem; align-items: flex-start; margin: 0; max-width: none; font-size: .88rem; line-height: 1.4; color: #F3E8FF; }
.st-points .icon { flex: none; width: 1.15rem; height: 1.15rem; padding: .15rem; margin-top: .05rem; border-radius: 50%; color: var(--tki); background: var(--tkt); }
.st-task .st-best { margin: 0; font-size: .84rem; color: var(--tkt); }
.st-task .st-best .st-stars .icon { width: 1rem; height: 1rem; }
.st-task .st-start {
  margin-top: auto; width: 100%; justify-content: center; min-height: 54px; padding: .6rem 1rem; font-size: 1.15rem;
  color: var(--tki); background: linear-gradient(180deg, var(--tk1), var(--tk2));
  box-shadow: 0 6px 0 var(--tkd), 0 14px 28px rgba(0, 0, 0, .3); animation: none;
}
.st-task .st-start:active { box-shadow: 0 1px 0 var(--tkd), 0 6px 14px rgba(0, 0, 0, .3); }
.st-task-quiz .st-start { animation: st-pulse 2.4s ease-in-out 4; }
@media (max-width: 960px) { .st-tasks { grid-template-columns: 1fr; } }
@media (min-width: 701px) and (max-width: 960px) { .st-tasks[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .st-tasks[data-n="4"] { grid-template-columns: 1fr; } }
.st-back { margin: var(--sp-4) 0 0; font-weight: 650; }
.st-back a { display: inline-flex; align-items: center; gap: .45rem; }
.st-back .icon { width: 1.1em; height: 1.1em; }

@media (max-width: 860px) {
  .st-lobby { grid-template-columns: 1fr; text-align: left; }
  .st-lobby-host { position: absolute; right: -18px; top: -6px; width: 128px; opacity: .95; }
  .st-lobby-host .px { width: 128px; }
  .st-lobby h1 { padding-right: 88px; }
  .st-rounds { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ stage */
html.st-locked, html.st-locked body { overflow: hidden; }
.st-stage {
  position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  color: #fff; font-family: var(--font-body);
  background: radial-gradient(130% 120% at 15% 0%, #5B2A9E 0%, var(--st-stage-a) 30%, var(--st-stage-b) 65%, var(--st-stage-c) 100%);
  transition: background .6s ease;
}
.st-stage[data-round="short"] { background: radial-gradient(130% 120% at 15% 0%, #0E9AA0 0%, #037177 32%, #024F53 68%, #01383B 100%); }
.st-stage[data-round="long"] { background: radial-gradient(130% 120% at 15% 0%, #4F46E5 0%, #3730A3 34%, #272284 66%, #1A1662 100%); }
.st-stage[data-round="done"] { background: radial-gradient(130% 120% at 50% 0%, #7C3AED 0%, #4C1D95 40%, #2E1065 75%, #1E0A48 100%); }
.st-stage[data-round="cat"] { background: radial-gradient(130% 120% at 15% 0%, #BE185D 0%, #9D174D 32%, #701A75 68%, #4A044E 100%); }
.st-stage[data-round="match"] { background: radial-gradient(130% 120% at 50% 0%, #15803D 0%, #166534 35%, #14532D 70%, #052E16 100%); }
.st-stage[data-round="sort"] { background: radial-gradient(130% 120% at 50% 0%, #C2410C 0%, #9A3412 34%, #7C2D12 68%, #431407 100%); }
.st-stage > .st-bg { z-index: 0; }
.st-top, .st-body { position: relative; z-index: 1; }
.st-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.st-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.st-top {
  display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; padding: .6rem clamp(.7rem, 2.5vw, 1.4rem);
  background: rgba(0, 0, 0, .22); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.st-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .25);
}
.st-x .icon { width: 1.1rem; height: 1.1rem; }
.st-x:hover { background: rgba(255, 255, 255, .22); }
.st-top-label { display: grid; line-height: 1.2; min-width: 0; }
.st-top-label b { font-family: var(--font-display); font-size: 1rem; }
.st-top-label span { font-size: .78rem; color: #DDD3F3; }
.st-top-gap { flex: 1; }
.st-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.st-chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .75rem; border-radius: var(--r-pill);
  font: 800 .92rem var(--font-body); background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .22);
  font-variant-numeric: tabular-nums;
}
.st-chip small { font-size: .7rem; font-weight: 700; color: #DDD3F3; text-transform: uppercase; letter-spacing: .06em; }
.st-chip.is-bump { animation: st-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
.st-chip-streak svg { width: 16px; height: 20px; }
.st-chip-streak.is-hot { background: rgba(251, 146, 60, .3); border-color: #FB923C; }
.st-chip-streak.is-hot svg { animation: st-flicker .5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes st-bump { 0% { scale: 1; } 40% { scale: 1.22; } 100% { scale: 1; } }
@keyframes st-flicker { from { transform: scaleY(1) rotate(-3deg); } to { transform: scaleY(1.12) rotate(3deg); } }

.st-dots { display: flex; gap: 4px; flex-wrap: wrap; width: 100%; order: 9; }
.st-dots i { flex: 1; min-width: 10px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .18); transition: background .3s ease; }
.st-dots i.is-now { background: rgba(255, 255, 255, .6); animation: st-glow 1.2s ease-in-out infinite alternate; }
.st-dots i.is-ok { background: #4ADE80; }
.st-dots i.is-bad { background: #F87171; }
@keyframes st-glow { from { opacity: .55; } to { opacity: 1; } }

.st-body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(.8rem, 2.4vw, 1.6rem) clamp(.7rem, 2.5vw, 1.4rem) 2.5rem; }
.st-screen { width: min(100%, 1060px); margin: 0 auto; }
.st-screen-in { animation: st-screen .45s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes st-screen { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes st-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ splash */
.st-splash { min-height: 70vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--sp-3); }
.st-splash-tag {
  padding: .3rem .9rem; border-radius: var(--r-pill); font: 800 .82rem var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-yellow-ink); background: var(--st-yellow); animation: st-drop .5s cubic-bezier(.3, 1.5, .5, 1) both;
}
.st-splash h2 {
  margin: 0; color: #fff; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; letter-spacing: -.02em;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .18); animation: st-zoom .6s cubic-bezier(.2, 1.4, .4, 1) .1s both;
}
.st-splash p { margin: 0; max-width: 36ch; font-size: 1.08rem; color: #EDE9FE; animation: st-rise .5s ease .3s both; }
.st-splash-ico { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 28px; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, .28); animation: st-spin-in .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.st-splash-ico svg { width: 78px; height: 78px; }
.st-rivals { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; animation: st-rise .5s ease .45s both; }
.st-rival { display: grid; justify-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; color: #EDE9FE; }
.st-count {
  width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; margin-top: var(--sp-2);
  font: 800 4rem/1 var(--font-display); color: var(--st-stage-b); background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .18);
}
.st-count.is-pop { animation: st-count .9s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes st-drop { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes st-zoom { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes st-spin-in { from { opacity: 0; transform: rotate(-160deg) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes st-count { 0% { transform: scale(.2); opacity: 0; } 35% { transform: scale(1.15); opacity: 1; } 60% { transform: scale(.96); } 100% { transform: scale(1); } }

.st-go {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 54px; padding: .7rem 1.8rem; border: 0;
  border-radius: var(--r-pill); cursor: pointer; font: 800 1.08rem var(--font-display); color: var(--st-yellow-ink);
  background: linear-gradient(180deg, #FDE047, var(--st-yellow)); box-shadow: 0 5px 0 var(--st-yellow-d), 0 12px 24px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.st-go .icon { width: 1.1em; height: 1.1em; }
/* Buttons lift a little on hover. A pointer resting on the bottom edge would
   then fall off the lifted button, drop it, and land on it again, frame after
   frame; an invisible margin keeps the pointer inside while it is lifted. */
.st-go, .st-start, .st-tile, .st-duo-btn { position: relative; }
.st-go::before, .st-start::before, .st-tile::before, .st-duo-btn::before { content: ""; position: absolute; inset: -5px 0; }
.st-go:hover { transform: translateY(-2px); }
.st-go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--st-yellow-d), 0 6px 12px rgba(0, 0, 0, .25); }
.st-go[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.st-ghost {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: .55rem 1.2rem; border-radius: var(--r-pill); cursor: pointer;
  font: 700 .95rem var(--font-body); color: #fff; background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .35);
}
.st-ghost:hover { background: rgba(255, 255, 255, .2); }
.st-ghost .icon { width: 1.05em; height: 1.05em; }
.st-ghost.is-ink { color: var(--ink); background: var(--surface-2); border-color: var(--border-strong); }
.st-ghost.is-ink:hover { background: var(--surface-sunk); }

/* ----------------------------------------------------------- quiz blitz */
.st-blitz { display: grid; gap: clamp(.7rem, 1.6vw, 1rem); }
.st-qrow { display: grid; grid-template-columns: 1fr auto; gap: clamp(.6rem, 1.6vw, 1rem); align-items: stretch; }
.st-qcard {
  position: relative; display: grid; align-content: center; gap: .6rem; padding: clamp(1rem, 2.6vw, 1.7rem); border-radius: 22px;
  color: var(--ink); background: #fff; box-shadow: 0 10px 0 rgba(0, 0, 0, .14), 0 18px 40px rgba(0, 0, 0, .22);
  animation: st-card .5s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes st-card { from { opacity: 0; transform: translateY(-24px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.st-qmeta { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6D28D9; }
.st-qmeta .st-kind { padding: .12rem .55rem; border-radius: var(--r-pill); background: #EDE9FE; }
.st-qtext, .st-wq { text-wrap: pretty; max-width: none; }
.st-qtext { margin: 0; font: 750 clamp(1.15rem, 2.3vw, 1.6rem)/1.35 var(--font-display); color: var(--ink); letter-spacing: -.005em; }
.st-qtext code, .st-wq code, .st-fb-x code, .st-tile code, .st-ms code, .st-model code { font-family: var(--font-mono); font-size: .9em; padding: .05em .3em; border-radius: 6px; background: rgba(15, 32, 38, .08); }
.st-tile code { background: rgba(255, 255, 255, .2); }
/* site.css gives inline code the accent colour, a border and no wrapping:
   on a coloured button that is unreadable, and on a small card it overflows */
.st-stage :not(pre) > code, .st-lobby :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
.st-tile code, .st-duo-btn code { color: inherit; border-color: transparent; }
.st-catfb-x, .st-fb-x, .st-bubble-intro, .st-match-hint, .st-res-review li, .st-task-sum, .st-task-time { max-width: none; }
.st-code {
  margin: 0; padding: .8rem 1rem; border-radius: 14px; overflow-x: auto; max-height: 40vh;
  font: 500 clamp(.82rem, 1.5vw, .95rem)/1.55 var(--font-mono); color: #E2E8F0; background: #0F172A; text-align: left;
}
.st-code code { font: inherit; background: none; padding: 0; color: inherit; white-space: pre; }
.st-code .tok-kw { color: #F472B6; } .st-code .tok-str { color: #A7F3D0; } .st-code .tok-num { color: #FCD34D; }
.st-code .tok-com { color: #94A3B8; font-style: italic; } .st-code .tok-bi { color: #7DD3FC; } .st-code .tok-fn { color: #C4B5FD; }
.st-qhint { margin: 0; font-size: .9rem; font-weight: 700; color: #6D28D9; }

.st-side { display: grid; gap: .5rem; justify-items: center; align-content: center; width: 150px; }
.st-timer { position: relative; width: 112px; height: 112px; }
.st-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-timer .st-ring-bg { fill: rgba(0, 0, 0, .25); stroke: rgba(255, 255, 255, .16); stroke-width: 9; }
.st-timer .st-ring { fill: none; stroke: #A3E635; stroke-width: 9; stroke-linecap: round; transition: stroke .3s ease; }
.st-timer-n { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.4rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.st-timer.is-mid .st-ring { stroke: #FACC15; }
.st-timer.is-low .st-ring { stroke: #F87171; }
.st-timer.is-low .st-timer-n { animation: st-tock 1s ease-in-out infinite; color: #FECACA; }
.st-timer.is-off .st-timer-n { font-size: 1.05rem; text-align: center; line-height: 1.2; }
.st-timer.is-off .st-ring { stroke: rgba(255, 255, 255, .45); }
@keyframes st-tock { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
.st-host { width: 112px; }
.st-host .px { width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); }

.st-play { display: grid; gap: clamp(.7rem, 1.6vw, 1rem); }
.st-answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.5rem, 1.4vw, .85rem); }
.st-answers.is-three { grid-template-columns: repeat(3, 1fr); }
.st-answers.is-many { grid-template-columns: repeat(3, 1fr); }
.st-tile {
  --c: var(--st-red); --cd: var(--st-red-d); --t: #fff;
  position: relative; display: flex; align-items: center; gap: .8rem; min-height: clamp(70px, 11vh, 112px); padding: .8rem 1rem;
  border: 0; border-radius: 16px; cursor: pointer; text-align: left; color: var(--t);
  font: 750 clamp(1rem, 1.9vw, 1.2rem)/1.3 var(--font-body); background: var(--c);
  box-shadow: 0 6px 0 var(--cd), 0 12px 22px rgba(0, 0, 0, .22);
  transition: transform .12s ease, box-shadow .12s ease, opacity .3s ease, filter .3s ease;
  /* backwards, not both: a finished entrance must not pin opacity at 1,
     or answered tiles could never dim */
  animation: st-tile .45s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.st-tile:nth-child(2) { animation-delay: .06s; } .st-tile:nth-child(3) { animation-delay: .12s; }
.st-tile:nth-child(4) { animation-delay: .18s; } .st-tile:nth-child(5) { animation-delay: .24s; } .st-tile:nth-child(6) { animation-delay: .3s; }
@keyframes st-tile { from { opacity: 0; transform: scale(.6) translateY(20px); } to { opacity: 1; transform: none; } }
.st-tile:hover:not([disabled]) { transform: translateY(-3px); box-shadow: 0 9px 0 var(--cd), 0 16px 26px rgba(0, 0, 0, .26); }
.st-tile:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 1px 0 var(--cd), 0 6px 12px rgba(0, 0, 0, .2); }
.st-tile[disabled] { cursor: default; }
.st-c0 { --c: var(--st-red); --cd: var(--st-red-d); }
.st-c1 { --c: var(--st-blue); --cd: var(--st-blue-d); }
.st-c2 { --c: var(--st-yellow); --cd: var(--st-yellow-d); --t: var(--st-yellow-ink); }
.st-c3 { --c: var(--st-green); --cd: var(--st-green-d); }
.st-c4 { --c: #7C3AED; --cd: #5B21B6; }
.st-c5 { --c: #0E7490; --cd: #0B5568; }
.st-shape { flex: none; width: 34px; height: 34px; }
.st-shape svg { width: 100%; height: 100%; fill: currentColor; }
.st-tile-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.st-k {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  font: 800 .8rem var(--font-body); background: rgba(0, 0, 0, .18);
}
.st-c2 .st-k { background: rgba(31, 26, 5, .12); }
.st-tile .st-mark {
  position: absolute; top: -10px; right: -10px; width: 38px; height: 38px; border-radius: 50%; display: none; place-items: center;
  border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); color: #fff;
}
.st-tile .st-mark .icon { width: 20px; height: 20px; }
.st-tile.is-right .st-mark { display: grid; background: var(--st-ok); animation: st-stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.st-tile.is-wrong .st-mark { display: grid; background: var(--st-bad); animation: st-stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.st-tile.is-right { animation: st-win .6s ease both; filter: none; opacity: 1; }
.st-tile.is-wrong { animation: st-shake .5s ease both; }
.st-tile.is-dim { opacity: .34; }
.st-tile.is-on { outline: 4px solid #fff; outline-offset: -2px; transform: translateY(-2px); }
.st-tile.is-on .st-k { background: #fff; color: var(--c); }
.st-tile.is-used { opacity: .3; }
@keyframes st-stamp { from { transform: scale(2.4) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-win { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes st-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }

.st-tf .st-tile { min-height: clamp(90px, 16vh, 150px); justify-content: center; font-size: clamp(1.3rem, 3vw, 1.9rem); font-family: var(--font-display); }
.st-tf .st-tile .st-shape { width: 44px; height: 44px; }

.st-slots { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: .5rem; }
.st-slot {
  position: relative; display: flex; align-items: center; gap: .5rem; min-height: 64px; padding: .5rem .7rem; border-radius: 14px;
  font: 700 .95rem/1.25 var(--font-body); color: #EDE9FE; background: rgba(0, 0, 0, .2); border: 2px dashed rgba(255, 255, 255, .35);
}
.st-slot b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .85rem; background: rgba(255, 255, 255, .2); color: #fff; }
.st-slot.is-filled { border-style: solid; color: #fff; background: rgba(255, 255, 255, .14); animation: st-tile .35s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.st-slot.is-right { border-color: #4ADE80; background: rgba(74, 222, 128, .2); }
.st-slot.is-wrong { border-color: #F87171; background: rgba(248, 113, 113, .2); }

.st-typed { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.st-typed input {
  flex: 1 1 18rem; max-width: 30rem; min-height: 64px; padding: .6rem 1rem; border-radius: 16px; border: 3px solid #fff;
  font: 750 1.4rem var(--font-mono); color: var(--ink); background: #fff; text-align: center;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
}
.st-typed input:focus { outline: 4px solid #FDE047; outline-offset: 2px; }
.st-typed input.is-right { border-color: var(--st-ok); background: #DCFCE7; }
.st-typed input.is-wrong { border-color: var(--st-bad); background: #FEE2E2; animation: st-shake .5s ease both; }
.st-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* feedback after a game answer */
.st-fb {
  display: grid; grid-template-columns: auto 1fr auto; gap: .4rem 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 20px;
  color: #fff; background: var(--fb, var(--st-ok)); box-shadow: 0 8px 0 rgba(0, 0, 0, .16), 0 16px 34px rgba(0, 0, 0, .25);
  animation: st-fb .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.st-fb.is-ok { --fb: linear-gradient(135deg, #16A34A, #15803D); }
.st-fb.is-bad { --fb: linear-gradient(135deg, #DC2626, #B91C1C); }
.st-fb.is-late { --fb: linear-gradient(135deg, #D97706, #B45309); }
@keyframes st-fb { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.st-fb-badge { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); animation: st-stamp .55s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
.st-fb-badge .icon { width: 30px; height: 30px; }
.st-fb-head { display: grid; gap: .1rem; min-width: 0; }
.st-fb-head b { font: 800 clamp(1.3rem, 2.6vw, 1.7rem)/1.1 var(--font-display); }
.st-fb-head span { font-size: .92rem; color: #F0FDF4; }
.st-fb.is-bad .st-fb-head span, .st-fb.is-late .st-fb-head span { color: #FEF2F2; }
.st-fb-pts { font: 800 clamp(1.5rem, 3vw, 2.1rem)/1 var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.st-fb-streak { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; font-weight: 800; }
.st-fb-streak svg { width: 18px; height: 22px; animation: st-flicker .5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.st-fb-x { grid-column: 1 / -1; margin: 0; padding: .7rem .9rem; border-radius: 14px; background: rgba(0, 0, 0, .18); font-size: .98rem; line-height: 1.5; }
.st-fb-x b { color: #fff; }
.st-fb-ans { display: block; margin-bottom: .3rem; font-size: 1.02rem; }
.st-fb-go { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }

/* --------------------------------------------------- scoreboard and podium */
.st-board-wrap { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.st-board-wrap h2, .st-results h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 4.5vw, 2.8rem); animation: st-zoom .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.st-board-wrap > p { margin: 0; font-size: 1.05rem; color: #EDE9FE; }
.st-board { list-style: none; margin: 0; padding: 0; width: min(100%, 620px); display: grid; gap: .55rem; }
.st-row {
  display: grid; grid-template-columns: 2.2rem 44px 1fr auto; gap: .7rem; align-items: center; margin: 0;
  padding: .55rem .9rem; border-radius: 16px; color: var(--ink); background: #fff; text-align: left;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .14); will-change: transform;
}
.st-row.is-you { background: #FEF3C7; box-shadow: 0 5px 0 #D97706, 0 0 0 3px #FBBF24; }
.st-row-rank { font: 800 1.2rem var(--font-display); color: #6D28D9; text-align: center; }
.st-row-name { display: grid; line-height: 1.25; min-width: 0; }
.st-row-name b { font-weight: 800; overflow-wrap: anywhere; }
.st-row-bar { height: 8px; border-radius: 6px; background: #EDE9FE; overflow: hidden; }
.st-row-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 6px; background: linear-gradient(90deg, #8B5CF6, #6D28D9); transition: width .9s cubic-bezier(.2, .8, .3, 1); }
.st-row.is-you .st-row-bar i { background: linear-gradient(90deg, #F59E0B, #D97706); }
.st-row-pts { font: 800 1.1rem var(--font-display); font-variant-numeric: tabular-nums; }
.st-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--av, #8B5CF6); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.st-av svg { width: 32px; height: 32px; }
.st-av-you { font: 800 1.15rem var(--font-display); color: var(--st-yellow-ink); background: #FDE047; }

.st-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: .6rem; align-items: end; justify-content: center; min-height: 300px; width: 100%; }
.st-pod { display: grid; justify-items: center; gap: .4rem; }
.st-pod .st-av { width: 64px; height: 64px; animation: st-drop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.st-pod .st-av svg { width: 46px; height: 46px; }
.st-pod .st-av-you { font-size: 1.6rem; }
.st-pod-name { font-weight: 800; color: #fff; text-align: center; overflow-wrap: anywhere; }
.st-pod-pts { font-size: .9rem; color: #EDE9FE; font-variant-numeric: tabular-nums; }
.st-pod-block {
  width: 100%; display: grid; place-items: start center; padding-top: .6rem; border-radius: 14px 14px 0 0;
  font: 800 2.6rem/1 var(--font-display); color: rgba(255, 255, 255, .92); transform-origin: bottom;
  animation: st-grow .8s cubic-bezier(.2, 1, .3, 1) both;
}
.st-pod-1 .st-pod-block { height: 170px; background: linear-gradient(180deg, #FBBF24, #D97706); }
.st-pod-2 .st-pod-block { height: 125px; background: linear-gradient(180deg, #CBD5E1, #64748B); }
.st-pod-3 .st-pod-block { height: 92px; background: linear-gradient(180deg, #FDBA74, #C2410C); }
.st-pod-2 .st-pod-block, .st-pod-2 .st-av { animation-delay: .35s; }
.st-pod-1 .st-pod-block, .st-pod-1 .st-av { animation-delay: .7s; }
.st-pod.is-you .st-pod-name { color: #FDE047; }
.st-pod.is-you .st-av { box-shadow: 0 0 0 4px #FDE047, inset 0 -3px 0 rgba(0, 0, 0, .2); }
@keyframes st-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.st-crown { width: 40px; height: 28px; margin-bottom: -6px; animation: st-drop .5s ease 1.2s both; }

/* -------------------------------------------------------- written rounds */
.st-wcard {
  position: relative; display: grid; gap: .9rem; padding: clamp(1rem, 2.6vw, 1.7rem); border-radius: 22px; color: var(--ink); background: #fff;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .14), 0 18px 40px rgba(0, 0, 0, .22); animation: st-card .5s cubic-bezier(.2, 1.2, .4, 1) both;
}
.st-whead { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding-right: 84px; }
.st-whost { position: absolute; top: -34px; right: 8px; width: 92px; pointer-events: none; }
.st-whost .px { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.st-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: var(--r-pill); font: 800 .78rem var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: #3730A3; background: #E0E7FF; }
.st-pill.is-marks { color: #92400E; background: #FEF3C7; }
.st-pill.is-cmd { color: #fff; background: #4F46E5; }
.st-stage[data-round="short"] .st-pill.is-cmd { background: #0F766E; }
.st-wq { margin: 0; font: 750 clamp(1.1rem, 2.1vw, 1.42rem)/1.4 var(--font-display); color: var(--ink); }
.st-answer {
  width: 100%; min-height: 6.5rem; padding: .8rem 1rem; border-radius: 14px; border: 2px solid var(--border-strong); resize: vertical;
  font: 500 1.02rem/1.6 var(--font-body); color: var(--ink); background: var(--surface);
}
.st-answer.is-long { min-height: 13rem; }
.st-answer:focus { outline: 3px solid #6D28D9; outline-offset: 1px; border-color: #6D28D9; }
.st-answer[readonly] { background: var(--surface-2); }
.st-wmeta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .86rem; color: var(--ink-3); font-weight: 650; }
.st-meter { flex: 1 1 140px; max-width: 260px; height: 10px; border-radius: 6px; background: var(--surface-sunk); overflow: hidden; }
.st-meter i { display: block; height: 100%; width: var(--w, 0%); border-radius: 6px; background: linear-gradient(90deg, #F59E0B, #16A34A); transition: width .3s ease; }
.st-frame { display: flex; flex-wrap: wrap; gap: .45rem; }
.st-frame button {
  min-height: 40px; padding: .35rem .8rem; border-radius: var(--r-pill); cursor: pointer; font: 650 .88rem var(--font-body);
  color: #3730A3; background: #EEF2FF; border: 1.5px dashed #818CF8; animation: st-rise .35s ease both;
}
.st-frame button:hover { background: #E0E7FF; }
.st-wtools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.st-wtools .st-go { min-height: 50px; }
.st-help { min-height: 44px; padding: .4rem .9rem; border-radius: var(--r-pill); cursor: pointer; font: 700 .9rem var(--font-body); color: #4338CA; background: transparent; border: 2px solid #C7D2FE; }
.st-help:hover { background: #EEF2FF; }
.st-skip { min-height: 44px; padding: .4rem .8rem; border: 0; background: none; cursor: pointer; font: 650 .9rem var(--font-body); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.st-nudge { margin: 0; font-size: .9rem; font-weight: 650; color: #B45309; }

.st-wres { display: grid; gap: .8rem; padding-top: .2rem; border-top: 2px dashed var(--border); animation: st-rise .4s ease both; }
.st-wres > .st-go { justify-self: start; }
.st-score { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.st-score-n { font: 800 1.6rem/1 var(--font-display); color: #4C1D95; font-variant-numeric: tabular-nums; }
.st-score-n small { font-size: .95rem; color: var(--ink-3); }
.st-score-msg { font-weight: 650; color: var(--ink-2); }
.st-gain { display: inline-flex; padding: .2rem .7rem; border-radius: var(--r-pill); font: 800 1rem var(--font-display); color: #fff; background: #16A34A; animation: st-float-up 1.2s ease both; }
.st-gain.is-zero { background: #94A3B8; }
@keyframes st-float-up { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 30% { opacity: 1; transform: translateY(-4px) scale(1.12); } 100% { opacity: 1; transform: none; } }
.st-ms { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.st-ms li {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .5rem .7rem; border-radius: 12px;
  font-size: .95rem; line-height: 1.45; background: var(--surface-2); border: 1.5px solid var(--border);
  animation: st-rise .35s ease both;
}
.st-ms li .st-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #94A3B8; margin-top: 1px; }
.st-ms li .st-tick .icon { width: 14px; height: 14px; }
.st-ms li.is-hit { background: #DCFCE7; border-color: #86EFAC; }
.st-ms li.is-hit .st-tick { background: var(--st-ok); animation: st-stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.st-ms-head { margin: 0; font: 800 .82rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.st-model { padding: .8rem 1rem; border-radius: 14px; background: #F5F3FF; border-left: 5px solid #7C3AED; }
.st-model b { display: block; margin-bottom: .25rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: #5B21B6; }
.st-model p { margin: 0; font-size: .97rem; line-height: 1.6; }
.st-self { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; color: var(--ink-3); }
.st-self select { min-height: 40px; padding: .3rem .6rem; border-radius: 10px; border: 2px solid var(--border-strong); font: 700 .95rem var(--font-body); background: #fff; color: var(--ink); }

/* ----------------------------------------------------------- This or That */
/* Pixel's two extra poses: talking while a question is asked, and a wobble
   with a worried tilt after a wrong answer. */
.px.is-talk .px-arm-r.px-arm-rest { display: none; }
.px.is-talk .px-arm-wave { display: inline; }
.px.is-oops .px-m-smile { display: none; }
.px.is-oops .px-m-o { display: inline; }
.px.is-oops .px-head { transform: rotate(9deg) translateY(1.5px); }
@media (prefers-reduced-motion: no-preference) {
  [data-motion="full"] .px.is-talk .px-m-o { display: inline; animation: px-talk .26s steps(1) infinite; }
  [data-motion="full"] .px.is-talk .px-arm-wave { animation: px-wave .7s ease-in-out infinite alternate; }
  [data-motion="full"] .px.is-oops .px-all { animation: px-oops .65s ease both; }
}
@keyframes px-talk { 50% { opacity: 0; } }
@keyframes px-oops {
  0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-4deg); } 40% { transform: translateX(6px) rotate(4deg); }
  60% { transform: translateX(-3px) rotate(-2deg); } 80% { transform: translateX(2px); } }

.st-cat-splash .st-cat-hero { width: clamp(150px, 22vw, 200px); animation: st-drop .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.st-cat-hero .px { width: 100%; height: auto; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .35)); }
.st-cat-splash p { color: #FCE7F3; }

.st-cat { display: grid; gap: clamp(.8rem, 2vw, 1.2rem); width: min(100%, 900px); }
.st-cat-scene { display: grid; grid-template-columns: clamp(110px, 18vw, 190px) 1fr; gap: clamp(.9rem, 2.4vw, 1.6rem); align-items: center; }
.st-cat-pixel { position: relative; }
.st-cat-pixel .px { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.st-cat-fx { position: absolute; inset: 0; pointer-events: none; }
.st-cat-fx i { position: absolute; display: block; opacity: 0; }
.st-heart { width: 26px; left: 50%; top: 10%; }
.st-heart:nth-child(2) { left: 20%; top: 26%; width: 20px; }
.st-heart:nth-child(3) { left: 74%; top: 22%; width: 18px; }
.st-drop { width: 16px; right: 12%; top: 18%; }
.st-cat-fx svg { width: 100%; height: auto; display: block; }
.st-cat-pixel.is-love .st-heart { animation: st-heart 1.3s ease-out both; }
.st-cat-pixel.is-love .st-heart:nth-child(2) { animation-delay: .15s; }
.st-cat-pixel.is-love .st-heart:nth-child(3) { animation-delay: .3s; }
.st-cat-pixel.is-oops .st-drop { animation: st-sweat 1.4s ease-in both; }
@keyframes st-heart { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 25% { opacity: 1; transform: translateY(-6px) scale(1.1); } 100% { opacity: 0; transform: translateY(-60px) scale(.9); } }
@keyframes st-sweat { 0% { opacity: 0; transform: translateY(-6px) scale(.5); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(26px); } }
[data-motion="calm"] .st-cat-fx { display: none; }

.st-bubble {
  position: relative; display: grid; gap: .55rem; padding: clamp(1rem, 2.6vw, 1.5rem) clamp(1rem, 2.8vw, 1.7rem); border-radius: 26px;
  color: var(--ink); background: #fff; box-shadow: 0 10px 0 rgba(0, 0, 0, .14), 0 18px 40px rgba(0, 0, 0, .25);
  transform-origin: 0 55%; animation: st-pop-in .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
.st-bubble::before {
  content: ""; position: absolute; left: -13px; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  background: #fff; border-radius: 5px; transform: rotate(45deg);
}
@keyframes st-pop-in { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.st-bubble-intro { margin: 0; font: 800 .8rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #BE185D; }
.st-bubble-q { position: relative; margin: 0; font: 750 clamp(1.15rem, 2.4vw, 1.6rem)/1.38 var(--font-display); color: var(--ink); text-wrap: pretty; max-width: none; }
.st-bubble-q code { font-family: var(--font-mono); font-size: .9em; padding: .05em .3em; border-radius: 6px; background: rgba(15, 32, 38, .08); }
.st-bubble .st-code { position: relative; }
.st-w { display: inline-block; animation: st-word .34s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes st-word { from { opacity: 0; transform: translateY(8px) scale(.85); } }

.st-duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(.6rem, 1.6vw, 1rem); align-items: stretch; }
.st-duo:not(.is-ready) .st-duo-btn, .st-duo:not(.is-ready) .st-duo-or { visibility: hidden; }
.st-duo-or {
  align-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font: 800 1rem var(--font-display); text-transform: uppercase; color: #9D174D; background: #FCE7F3;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .18);
}
.st-duo.is-ready .st-duo-or { animation: st-stamp .45s cubic-bezier(.3, 1.6, .5, 1) .12s backwards; }
.st-duo-btn {
  --c: var(--st-blue); --cd: var(--st-blue-d); --t: #fff;
  position: relative; display: flex; align-items: center; gap: .8rem; min-height: clamp(86px, 15vh, 140px); padding: 1rem 1.2rem;
  border: 0; border-radius: 22px; cursor: pointer; text-align: left; color: var(--t); background: var(--c);
  font: 750 clamp(1.05rem, 2.1vw, 1.32rem)/1.3 var(--font-body);
  box-shadow: 0 7px 0 var(--cd), 0 14px 26px rgba(0, 0, 0, .25);
  transition: transform .12s ease, box-shadow .12s ease, opacity .3s ease;
}
.st-duo-b { --c: var(--st-yellow); --cd: var(--st-yellow-d); --t: var(--st-yellow-ink); }
.st-duo.is-ready .st-duo-a { animation: st-slide-l .5s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.st-duo.is-ready .st-duo-b { animation: st-slide-r .5s cubic-bezier(.2, 1.3, .4, 1) .08s backwards; }
@keyframes st-slide-l { from { opacity: 0; transform: translateX(-40px) rotate(-3deg); } }
@keyframes st-slide-r { from { opacity: 0; transform: translateX(40px) rotate(3deg); } }
.st-duo-btn:hover:not([disabled]) { transform: translateY(-3px); box-shadow: 0 10px 0 var(--cd), 0 18px 28px rgba(0, 0, 0, .28); }
.st-duo-btn:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 2px 0 var(--cd), 0 6px 12px rgba(0, 0, 0, .2); }
.st-duo-btn[disabled] { cursor: default; }
.st-duo-btn code { font-family: var(--font-mono); font-size: .9em; padding: .05em .3em; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.st-duo-b code { background: rgba(31, 26, 5, .1); }
.st-duo-k {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font: 800 .95rem var(--font-body); background: rgba(0, 0, 0, .18);
}
.st-duo-b .st-duo-k { background: rgba(31, 26, 5, .12); }
.st-duo-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.st-duo-btn .st-mark {
  position: absolute; top: -12px; right: -12px; width: 42px; height: 42px; border-radius: 50%; display: none; place-items: center;
  border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); color: #fff;
}
.st-duo-btn .st-mark .icon { width: 22px; height: 22px; }
.st-duo-btn.is-right .st-mark { display: grid; background: var(--st-ok); animation: st-stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.st-duo-btn.is-wrong .st-mark { display: grid; background: var(--st-bad); animation: st-stamp .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.st-duo-btn.is-right { box-shadow: 0 7px 0 var(--cd), 0 0 0 5px #4ADE80, 0 14px 26px rgba(0, 0, 0, .25); animation: st-win .6s ease both; opacity: 1; }
.st-duo-btn.is-wrong { animation: st-shake .5s ease both; }
.st-duo-btn.is-dim { opacity: .34; }

.st-chip-fish .st-fish { display: inline-flex; }
.st-chip-fish .st-fish svg { width: 26px; height: 16px; }
.st-flyfish { position: fixed; z-index: 6; width: 36px; height: 22px; pointer-events: none; transition: transform .7s cubic-bezier(.45, -.35, .55, 1); }
.st-flyfish svg { width: 100%; height: 100%; animation: st-wiggle .18s ease-in-out infinite alternate; }
@keyframes st-wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

.st-catfb {
  display: grid; gap: .6rem; padding: 1rem 1.2rem; border-radius: 22px; color: var(--ink); background: #fff;
  border-top: 8px solid var(--st-ok); box-shadow: 0 8px 0 rgba(0, 0, 0, .14), 0 16px 34px rgba(0, 0, 0, .25);
  animation: st-fb .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.st-catfb.is-bad { border-top-color: var(--st-bad); }
.st-catfb-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.st-catfb-head b { font: 800 clamp(1.3rem, 2.6vw, 1.7rem)/1.1 var(--font-display); color: #15803D; }
.st-catfb.is-bad .st-catfb-head b { color: #B91C1C; }
.st-catfb-badge {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--st-ok);
  animation: st-stamp .55s cubic-bezier(.3, 1.6, .5, 1) .1s both;
}
.st-catfb.is-bad .st-catfb-badge { background: var(--st-bad); }
.st-catfb-badge .icon { width: 24px; height: 24px; }
.st-catfb-pts { margin-left: auto; font: 800 1.5rem/1 var(--font-display); color: #15803D; animation: st-float-up 1.2s ease both; }
.st-catfb-streak { margin: 0; display: flex; align-items: center; gap: .45rem; font-weight: 800; color: #9A3412; }
.st-catfb-streak svg { width: 18px; height: 22px; animation: st-flicker .5s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.st-catfb-x { margin: 0; padding: .7rem .9rem; border-radius: 14px; background: #FDF2F8; font-size: 1rem; line-height: 1.55; }
.st-catfb-x code { font-family: var(--font-mono); font-size: .9em; padding: .05em .3em; border-radius: 6px; background: rgba(15, 32, 38, .08); }
.st-catfb .st-fb-ans b { color: var(--ink); }

/* ----------------------------------------------------------- Memory Match */
.st-match { display: grid; gap: clamp(.7rem, 1.8vw, 1rem); width: min(100%, 1000px); }
.st-match-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.st-match-hint { margin: 0; font-weight: 750; color: #DCFCE7; }
.st-peek .st-peek-n { padding: .05rem .5rem; border-radius: var(--r-pill); font-size: .78rem; background: rgba(255, 255, 255, .2); }
.st-peek[aria-disabled="true"] { opacity: .55; cursor: default; }
.st-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.45rem, 1.4vw, .9rem); }
.st-card {
  position: relative; aspect-ratio: 16 / 10; min-height: 104px; padding: 0; border: 0; border-radius: 18px; cursor: pointer;
  background: none; color: inherit; font: inherit; perspective: 1000px;
  animation: st-deal .55s cubic-bezier(.2, 1.2, .4, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes st-deal { from { opacity: 0; transform: translateY(-70px) rotate(-14deg) scale(.6); } }
.st-card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.st-card.is-up .st-card-in, .st-cards.is-peek .st-card-in { transform: rotateY(180deg); }
.st-card-back, .st-card-front {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 3px solid #fff;
}
.st-card-back { background: linear-gradient(135deg, #2563EB, #1E40AF); box-shadow: 0 6px 0 #172E70, 0 10px 18px rgba(0, 0, 0, .25); }
.st-card-back svg { width: 72%; height: 72%; }
.st-card:hover .st-card-back { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.st-card-front {
  transform: rotateY(180deg); align-content: center; gap: .3rem; padding: .45rem .55rem; text-align: center;
  color: var(--ink); background: #fff; box-shadow: 0 6px 0 #CBD5E1, 0 10px 18px rgba(0, 0, 0, .2);
}
.st-card-tag {
  justify-self: center; padding: .08rem .5rem; border-radius: var(--r-pill); font: 800 .64rem var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #6D28D9;
}
.st-card-b .st-card-tag { background: #0F766E; }
.st-card-t { font: 650 clamp(.78rem, 1.45vw, .96rem)/1.28 var(--font-body); overflow-wrap: anywhere; }
.st-card-a .st-card-t { font: 800 clamp(1rem, 2.2vw, 1.4rem)/1.18 var(--font-display); }
.st-card-t code { font-family: var(--font-mono); font-size: .92em; }
/* The faces wobble and bounce with translate and scale, never transform,
   which holds the half turn that shows the front. */
.st-card.is-miss .st-card-front { border-color: #F87171; background: #FEF2F2; animation: st-card-shake .5s ease .45s both; }
.st-card.is-matched { cursor: default; }
.st-card.is-matched .st-card-front { border-color: var(--pc); background: var(--pcl); animation: st-card-win .6s ease .35s both; }
@keyframes st-card-shake { 0%, 100% { translate: 0; } 20% { translate: -8px; } 40% { translate: 7px; } 60% { translate: -5px; } 80% { translate: 3px; } }
@keyframes st-card-win { 0%, 100% { scale: 1; } 35% { scale: 1.07; } }
.st-card-badge {
  position: absolute; top: -9px; right: -9px; z-index: 2; width: 32px; height: 32px; padding: 5px; border-radius: 50%;
  display: none; color: #fff; background: var(--pc); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.st-card-badge svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.st-card.is-matched .st-card-badge { display: block; animation: st-stamp .5s cubic-bezier(.3, 1.6, .5, 1) .4s both; }
.st-card.is-matched::after {
  content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 4px solid var(--pc); pointer-events: none;
  animation: st-ring .7s ease-out .35s both;
}
@keyframes st-ring { from { opacity: 1; transform: scale(.94); } to { opacity: 0; transform: scale(1.14); } }
.st-pair-0 { --pc: #D7263D; --pcl: #FFF1F2; }
.st-pair-1 { --pc: #1F5FD1; --pcl: #EFF6FF; }
.st-pair-2 { --pc: #B98A00; --pcl: #FEFCE8; }
.st-pair-3 { --pc: #1E7B34; --pcl: #F0FDF4; }
.st-pair-4 { --pc: #7C3AED; --pcl: #F5F3FF; }
.st-pair-5 { --pc: #0E7490; --pcl: #ECFEFF; }
.st-pop {
  position: absolute; left: 50%; top: 40%; z-index: 3; padding: .2rem .7rem; border-radius: var(--r-pill); white-space: nowrap;
  font: 800 1.05rem var(--font-display); color: #fff; background: #16A34A; box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  pointer-events: none; animation: st-pop-up 1.2s ease-out both;
}
.st-pop.is-combo { top: 12%; background: #EA580C; }
@keyframes st-pop-up { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -46px); } }

/* ---------------------------------------------------------------- Sort It */
.st-sort { display: grid; gap: clamp(.55rem, 1.5vw, .85rem); width: min(100%, 940px); }
.st-sort-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; }
.st-sort-q, .st-sort-prompt { margin: 0; max-width: none; font: 800 clamp(1.05rem, 2.4vw, 1.35rem)/1.3 var(--font-display); color: #FFEDD5; }
.st-sort-q code, .st-sort-prompt code, .st-bin-label code { font-family: var(--font-mono); font-size: .9em; }
.st-sort-left { padding: .25rem .75rem; border-radius: var(--r-pill); font-weight: 800; font-size: .85rem; background: rgba(255, 255, 255, .16); white-space: nowrap; }
.st-sort-deck { display: grid; justify-items: center; align-items: center; min-height: 142px; padding: .3rem 0 .5rem; }
.st-sort-pile, .st-sort-slot { grid-area: 1 / 1; width: min(100%, 560px); }
.st-sort-pile { position: relative; align-self: stretch; }
.st-sort-pile i {
  position: absolute; inset: 0; border-radius: 20px; background: #FFF7ED; border: 3px solid #fff; opacity: .45;
  transform: translateY(calc(var(--n) * 6px)) scale(calc(1 - var(--n) * .03));
}
.st-sort-pile i:nth-child(odd) { rotate: -.8deg; }
.st-sort-pile i:nth-child(even) { rotate: .9deg; }
.st-sort-slot { position: relative; z-index: 2; display: grid; }
.st-sort-card {
  position: relative; display: grid; gap: .35rem; justify-items: center; padding: .7rem 1.1rem 1rem; border-radius: 20px;
  color: var(--ink); background: #fff; border: 3px solid #fff; box-shadow: 0 7px 0 #FDBA74, 0 14px 26px rgba(0, 0, 0, .3);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: translate .38s cubic-bezier(.3, 1.4, .5, 1), rotate .38s ease, box-shadow .2s ease;
  animation: st-sort-in .5s cubic-bezier(.2, 1.25, .4, 1) backwards;
}
@keyframes st-sort-in { from { opacity: 0; transform: translateY(-40px) rotate(-7deg) scale(.86); } }
.st-sort-grip { width: 34px; height: 14px; color: #CBD5E1; }
.st-sort-grip svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.st-sort-t { margin: 0; max-width: none; text-align: center; font: 700 clamp(1.05rem, 2.3vw, 1.3rem)/1.4 var(--font-body); }
.st-sort-t code { font-family: var(--font-mono); font-size: .92em; padding: .05em .3em; border-radius: 6px; background: rgba(15, 32, 38, .08); }
.st-sort-card.is-drag { cursor: grabbing; z-index: 5; transition: box-shadow .2s ease; box-shadow: 0 7px 0 #FDBA74, 0 26px 44px rgba(0, 0, 0, .45); }
.st-sort-card.is-flying { pointer-events: none; transition: translate .42s cubic-bezier(.5, 0, .75, .35), rotate .42s ease, scale .42s ease-in, opacity .25s ease-in .17s; }
.st-sort-card.is-nudge { animation: st-sort-nudge .5s ease; }
@keyframes st-sort-nudge { 0%, 100% { transform: none; } 25% { transform: translateY(-10px) rotate(-2deg); } 60% { transform: translateY(4px) rotate(1.5deg); } }
.st-sort-card.is-wrong { cursor: default; border-color: #F87171; background: #FEF2F2; box-shadow: 0 7px 0 #FCA5A5, 0 14px 26px rgba(0, 0, 0, .3); animation: st-sort-shake .5s ease; }
@keyframes st-sort-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(3px); } }
.st-sort-fb { display: grid; gap: .45rem; justify-items: center; width: 100%; margin-top: .3rem; padding-top: .7rem; border-top: 2px dashed #FECACA; text-align: center; }
.st-sort-fb p { margin: 0; max-width: none; }
.st-sort-fb-h { font: 800 1.05rem/1.4 var(--font-display); color: #991B1B; }
.st-sort-fb-h .icon { width: 1.1em; height: 1.1em; vertical-align: -.17em; margin-right: .15em; }
.st-sort-fb-h b { color: #166534; }
.st-sort-fb-h .st-nw { white-space: nowrap; }
.st-sort-fb-x { font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
.st-sort-fb-x code { font-family: var(--font-mono); font-size: .9em; }
.st-sort-next { margin-top: .2rem; min-height: 50px; }
.st-sort-hint { margin: 0; max-width: none; text-align: center; font-size: .9rem; font-weight: 650; color: #FED7AA; }
.st-sort-hint.is-flash { animation: st-bump .6s cubic-bezier(.3, 1.6, .5, 1); color: #fff; }

.st-bins { display: grid; grid-template-columns: repeat(var(--bins, 2), minmax(0, 1fr)); gap: clamp(.45rem, 1.4vw, .8rem); }
.st-bins[data-n="3"] { --bins: 3; }
.st-bins[data-n="4"] { --bins: 4; }
.st-bin {
  position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: .35rem; justify-items: center; align-content: start;
  min-height: 124px; padding: .55rem .55rem .65rem; border: 3px solid #fff; border-radius: 16px 16px 30px 30px; cursor: pointer;
  color: #fff; background: linear-gradient(180deg, var(--bc), var(--bcd)); font: inherit;
  box-shadow: 0 6px 0 var(--bce), 0 12px 22px rgba(0, 0, 0, .28); transition: transform .15s ease, box-shadow .15s ease;
}
.st-bin::before { content: ""; position: absolute; inset: -5px 0; }
.st-bin-0 { --bc: #2563EB; --bcd: #1D4ED8; --bce: #172E70; }
.st-bin-1 { --bc: #0D9488; --bcd: #0F766E; --bce: #134E4A; }
.st-bin-2 { --bc: #8B5CF6; --bcd: #6D28D9; --bce: #3B0764; }
.st-bin-3 { --bc: #DB2777; --bcd: #BE185D; --bce: #6B0F37; }
.st-bin:hover { transform: translateY(-3px); }
.st-bin.is-over { transform: translateY(-5px) scale(1.04); box-shadow: 0 0 0 5px #FDE047, 0 10px 0 var(--bce), 0 18px 30px rgba(0, 0, 0, .35); }
.st-bin.is-answer { box-shadow: 0 0 0 5px #4ADE80, 0 6px 0 var(--bce), 0 12px 22px rgba(0, 0, 0, .28); animation: st-bin-glow .9s ease-in-out infinite alternate; }
@keyframes st-bin-glow { from { transform: none; } to { transform: translateY(-4px) scale(1.03); } }
.st-bin.is-no { animation: st-sort-shake .5s ease; }
.st-bin.is-hit { animation: st-bin-hit .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes st-bin-hit { 0% { transform: scale(1); } 35% { transform: scale(1.08, .92); } 70% { transform: scale(.97, 1.04); } 100% { transform: none; } }
.st-bin-top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; width: 100%; }
.st-bin-key { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font: 800 .9rem var(--font-display); color: var(--bce); background: #fff; }
.st-bin-shape { width: 22px; height: 22px; opacity: .85; }
.st-bin-shape svg { width: 100%; height: 100%; display: block; fill: #fff; }
.st-bin-n { min-width: 26px; padding: .05rem .4rem; border-radius: var(--r-pill); font: 800 .85rem var(--font-display); text-align: center; background: rgba(255, 255, 255, .22); font-variant-numeric: tabular-nums; }
.st-bin-label { font: 800 clamp(.95rem, 2vw, 1.15rem)/1.2 var(--font-display); text-align: center; overflow-wrap: anywhere; }
.st-bin-tray { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 4px; min-height: 16px; }
.st-bin-tray i { width: 16px; height: 12px; border-radius: 3px; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); animation: st-stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.st-bin-tray i.is-miss { background: repeating-linear-gradient(45deg, #FECACA 0 3px, #fff 3px 6px); }
.st-bin .st-pop { top: 50%; }
.st-bin .st-pop.is-combo { top: 4%; }
.st-sort-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.st-bin-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border-radius: 12px; font-weight: 800; color: #fff; background: var(--bcd); border: 2px solid #fff; }
.st-bin-chip .st-bin-key { width: 24px; height: 24px; }
.st-res-extra { display: grid; gap: .55rem; }
[data-motion="calm"] .st-sort-card, [data-motion="calm"] .st-bin { animation: none; transition: none; }

/* ---------------------------------------------------------------- results */
.st-res-review { display: grid; gap: .35rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.st-res-review > b { font: 800 .8rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.st-res-review ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .92rem; line-height: 1.45; }
.st-res-review li { margin: 0; }
.st-res-review code { font-family: var(--font-mono); font-size: .9em; padding: .05em .3em; border-radius: 6px; background: rgba(15, 32, 38, .08); }
.st-res-ans { display: block; font-weight: 750; color: #15803D; }
.st-res-a { font-weight: 800; color: #4C1D95; }
.st-res-a::after { content: ":"; }
.st-results { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.st-res-top { display: grid; justify-items: center; gap: .4rem; }
.st-res-top .px { width: 170px; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.st-res-title { margin: 0; font: 800 1.1rem var(--font-body); color: #FDE68A; letter-spacing: .04em; }
.st-res-stars { display: flex; gap: .4rem; }
.st-res-stars svg { width: clamp(52px, 10vw, 74px); height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .2)); }
.st-res-stars .st-bigstar { animation: st-star .6s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.st-res-stars .st-bigstar:nth-child(2) { animation-delay: .35s; }
.st-res-stars .st-bigstar:nth-child(3) { animation-delay: .7s; }
.st-res-stars .is-off { opacity: .28; }
@keyframes st-star { from { opacity: 0; transform: scale(.2) rotate(-200deg); } to { opacity: 1; transform: none; } }
.st-res-total { font: 800 clamp(2.4rem, 7vw, 3.8rem)/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.st-res-total small { display: block; margin-top: .3rem; font: 700 .85rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #DDD6FE; text-shadow: none; }
.st-res-best { padding: .3rem .9rem; border-radius: var(--r-pill); font-weight: 800; color: var(--st-yellow-ink); background: #FDE047; animation: st-bump .6s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; }
.st-res-card { width: min(100%, 680px); display: grid; gap: .55rem; padding: 1rem; border-radius: 20px; color: var(--ink); background: #fff; text-align: left; box-shadow: 0 8px 0 rgba(0, 0, 0, .14); }
.st-res-name { margin: 0; font: 800 1.05rem var(--font-display); color: #4C1D95; }
.st-res-row { display: grid; grid-template-columns: 44px 1fr auto; gap: .7rem; align-items: center; padding: .45rem .3rem; border-bottom: 1px solid var(--border); animation: st-rise .4s ease both; }
.st-res-row:last-of-type { border-bottom: 0; }
.st-res-row:nth-of-type(2) { animation-delay: .1s; } .st-res-row:nth-of-type(3) { animation-delay: .2s; }
.st-res-row .st-round-ico { width: 44px; height: 44px; background: var(--surface-2); }
.st-res-row .st-round-ico svg { width: 32px; height: 32px; }
.st-res-row b { display: block; font-family: var(--font-display); }
.st-res-row span { font-size: .86rem; color: var(--ink-3); }
.st-res-row strong { font: 800 1.15rem var(--font-display); color: #4C1D95; font-variant-numeric: tabular-nums; }
.st-medals { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; width: min(100%, 680px); }
.st-medal { display: grid; justify-items: center; gap: .3rem; width: 112px; font-size: .8rem; font-weight: 700; color: #EDE9FE; line-height: 1.3; animation: st-medal .6s cubic-bezier(.2, 1.5, .4, 1) both; }
.st-medal svg { width: 62px; height: 72px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.st-medal b { color: #fff; font-size: .86rem; }
@keyframes st-medal { from { opacity: 0; transform: rotateY(90deg) scale(.6); } to { opacity: 1; transform: none; } }
.st-res-go { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ----------------------------------------------------------- small screens */
@media (max-width: 700px) {
  .st-qrow { grid-template-columns: 1fr; }
  .st-side { width: auto; grid-auto-flow: column; justify-content: center; gap: 1rem; order: -1; }
  .st-timer { width: 70px; height: 70px; }
  .st-timer-n { font-size: 1.6rem; }
  .st-timer.is-off .st-timer-n { font-size: .78rem; }
  .st-host { width: 70px; }
  .st-answers, .st-answers.is-three, .st-answers.is-many { grid-template-columns: 1fr; }
  .st-tf .st-answers { grid-template-columns: 1fr 1fr; }
  .st-tile { min-height: 58px; padding: .6rem .8rem; }
  .st-shape { width: 26px; height: 26px; }
  .st-slots { grid-template-columns: 1fr 1fr; }
  .st-fb { grid-template-columns: auto 1fr; }
  .st-fb-pts { grid-column: 1 / -1; }
  .st-top-label span { display: none; }
  .st-chip { min-height: 32px; padding: .2rem .55rem; font-size: .82rem; }
  .st-chip small { display: none; }
  .st-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 250px; }
  .st-pod-1 .st-pod-block { height: 130px; } .st-pod-2 .st-pod-block { height: 96px; } .st-pod-3 .st-pod-block { height: 70px; }
  .st-row { grid-template-columns: 1.8rem 38px 1fr auto; padding: .45rem .6rem; }
  .st-av { width: 38px; height: 38px; }
  .st-cat-scene { grid-template-columns: 84px 1fr; gap: .9rem; align-items: start; }
  .st-cat-pixel { margin-top: .4rem; }
  .st-bubble::before { top: 34px; width: 22px; height: 22px; left: -9px; margin-top: 0; }
  .st-bubble-q { font-size: 1.08rem; }
  .st-duo { grid-template-columns: 1fr; gap: .5rem; }
  .st-duo-or { justify-self: center; width: 40px; height: 40px; font-size: .85rem; }
  .st-duo-btn { min-height: 70px; padding: .8rem 1rem; font-size: 1.02rem; }
  .st-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-card { aspect-ratio: 3 / 3.5; min-height: 0; }
  .st-card-t { font-size: .76rem; }
  .st-card-a .st-card-t { font-size: 1rem; }
  .st-card-front { padding: .35rem .4rem; border-width: 2px; }
  .st-card-tag { font-size: .58rem; padding: .05rem .4rem; }
  .st-bins[data-n="4"] { --bins: 2; }
  .st-bin { min-height: 96px; padding: .45rem .4rem .55rem; border-radius: 14px 14px 24px 24px; }
  .st-bin-shape { display: none; }
  .st-bin-label { font-size: .9rem; }
  .st-sort-deck { min-height: 120px; }
  .st-sort-card { padding: .55rem .8rem .8rem; }
  .st-sort-t { font-size: 1rem; }
  .st-sort-hint { font-size: .82rem; }
}

/* -------------------------------------------------------------------- hub */
.st-hub-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: center; }
.st-hub-art { display: flex; gap: .8rem; }
.st-hub-art svg { width: 76px; height: 76px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-2); animation: st-bob 3.6s ease-in-out 3; }
.st-hub-art svg:nth-child(2) { animation-delay: -1.2s; } .st-hub-art svg:nth-child(3) { animation-delay: -2.4s; }
.st-hub-art svg:nth-child(4) { animation-delay: -3.2s; }
.st-hub-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--sp-4) 0 0; }
@keyframes st-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.st-hub-year { padding-top: 0; }
.st-hub-unit { margin-bottom: var(--sp-5); }
.st-hub-unit h3 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.st-hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sp-3); }
.st-hub-card {
  position: relative; display: grid; gap: .3rem; padding: 1rem 1.1rem 1rem 1.25rem; border-radius: var(--r-l); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.st-hub-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #D7263D, #1F5FD1 35%, #F2B705 68%, #1E7B34); }
.st-hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #A78BFA; color: var(--ink); }
.st-hub-n { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6D28D9; }
.st-hub-card b { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; }
.st-stars { display: inline-flex; gap: .15rem; }
.st-stars .icon { width: 1.25rem; height: 1.25rem; color: #CBD5E1; }
.st-stars .icon.is-on { color: #D97706; fill: #FBBF24; }
.st-glyphs { position: absolute; width: 0; height: 0; overflow: hidden; }
.st-hub-tasks { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin-top: .2rem; }
.st-hub-task { display: inline-flex; align-items: center; gap: .25rem; }
.st-hub-task .st-g { width: 18px; height: 18px; flex: none; }
.st-hub-task .st-stars { gap: .1rem; }
.st-hub-task .st-stars .icon { width: .85rem; height: .85rem; }
.st-hub-task:not(.is-played) .st-g { opacity: .55; }
.st-hub-tasks.is-four { display: grid; grid-template-columns: repeat(2, max-content); }
@media (max-width: 700px) { .st-hub-head { grid-template-columns: 1fr; } .st-hub-art svg { width: 58px; height: 58px; } }

/* ------------------------------------------------------------- the sheet */
.st-sheet { display: none; margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--border); }
.no-js .st-sheet { display: block; }
.st-printout { display: none; }
.st-sheet h2 { margin-top: 0; }
.st-sheet-list { padding-left: 1.4rem; }
.st-sheet-q { margin-bottom: 1rem; }
.st-sheet-q > p { margin: 0 0 .35rem; font-weight: 600; }
.st-sheet-opts { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.st-sheet-opts li { display: flex; gap: .5rem; align-items: baseline; margin: 0; }
.st-sheet-tf { display: flex; gap: 1.5rem; }
.st-box { flex: none; display: inline-block; width: .9em; height: .9em; border: 1.5px solid var(--ink); border-radius: 3px; transform: translateY(.1em); }
.st-sheet-hint { margin: 0 0 .25rem; font-size: .9rem; color: var(--ink-3); }
.st-sheet-marks { font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.st-line { margin: 0; height: 1.9rem; border-bottom: 1px solid var(--border-strong); }
.st-sheet-code { margin: .3rem 0 .5rem; padding: .6rem .8rem; border-radius: 8px; background: var(--surface-2); font: .88rem/1.5 var(--font-mono); overflow-x: auto; }
/* site.css draws code light on dark; on the sheet's pale panel, and on paper, it must be dark */
.st-sheet-code { color: var(--ink); border-color: var(--border-strong); box-shadow: none; }
.st-sheet-code [class^="tok-"] { color: inherit; }
.st-key { margin-top: var(--sp-4); }
.st-key summary { cursor: pointer; font-weight: 700; }
.st-sheet-ms { margin: .2rem 0 .4rem; font-size: .92rem; }
.st-sheet-model p { margin: .2rem 0 0; font-size: .92rem; }
.st-sheet-match { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; }
.st-sheet-match th, .st-sheet-match td { padding: .55rem .7rem; border: 1px solid var(--border-strong); text-align: left; vertical-align: top; }
.st-sheet-match th { background: var(--surface-2); }
.st-sheet-match td b { display: inline-block; min-width: 1.4rem; }
.st-sheet-pairs { list-style: none; padding-left: 0; }
.st-sheet-sort { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; }
.st-sheet-sort th, .st-sheet-sort td { padding: .5rem .65rem; border: 1px solid var(--border-strong); text-align: left; vertical-align: top; }
.st-sheet-sort th { background: var(--surface-2); }
.st-sheet-sort thead th:not(:first-child) { text-align: center; width: 13%; }
.st-sheet-sort .st-sheet-tick { text-align: center; vertical-align: middle; }
.st-sheet-sort .st-box { width: 1.1em; height: 1.1em; transform: none; }

@media print {
  html.st-print-sheet .site-header, html.st-print-sheet .site-footer, html.st-print-sheet .crumbs,
  html.st-print-sheet .st, html.st-print-sheet .st-back, html.st-print-sheet .topic-nav,
  html.st-print-sheet .mascot-dock, html.st-print-sheet ins, html.st-print-sheet .adsbygoogle { display: none !important; }
  html.st-print-sheet .st-sheet { display: block !important; margin: 0; padding: 0; border: 0; background: none; }
  html.st-print-sheet .st-key { display: none; }
  html.st-print-answers .st-key { display: block; break-before: page; }
  html.st-print-answers .st-key summary { list-style: none; font-size: 1.3rem; }
  .st-sheet-q { break-inside: avoid; }
  html.st-print-result body > *:not(.st-printout) { display: none !important; }
  html.st-print-result .st-printout { display: block; padding: 1cm 0; }
  .st-printout .st-results h2, .st-printout .st-res-total, .st-printout .st-res-total small, .st-printout .st-medal,
  .st-printout .st-medal b, .st-printout .st-res-title { color: #000; text-shadow: none; }
  .st-printout .st-res-card { box-shadow: none; border: 1px solid #999; }
  .st-printout * { animation: none !important; }
}