/* Generated by tools/build-player.mjs. Preserve source order; edit individual files, then regenerate. */

/* Source: css/style.css; sha256: 235aa97cc699283c23c36d074e293ec8da42dbf11625917d438e2e3705de9ffd */
/* ============================================================
   Picture reveal — ClassPlay 样式
   设计令牌
   ============================================================ */
:root {
  --violet-900: #1b0f3d;
  --violet-800: #2a1860;
  --violet-700: #3d2390;
  --violet-600: #5b32c9;
  --violet-500: #7c4dff;
  --violet-300: #b39dff;
  --violet-100: #ece5ff;

  --teal: #00c2a8;
  --teal-dark: #009882;
  --orange: #ff8a3d;
  --orange-dark: #e0701f;
  --pink: #ff4d8d;
  --yellow: #ffc93c;
  --green: #2fbf71;
  --green-dark: #1e9a57;
  --red: #f2545b;
  --red-dark: #cf3a41;

  --ink: #1f1436;
  --ink-soft: #5b5175;
  --ink-mute: #8b83a3;
  --line: #e7e2f5;
  --paper: #ffffff;
  --page: #f6f4ff;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-1: 0 1px 2px rgba(45, 22, 100, .06), 0 4px 12px rgba(45, 22, 100, .06);
  --sh-2: 0 6px 20px rgba(45, 22, 100, .12);
  --sh-3: 0 18px 44px rgba(45, 22, 100, .18);

  --font: "Nunito", "Baloo 2", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-weight: 800; cursor: pointer; border: 0; }

/* ============================================================
   通用组件
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: var(--violet-500);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18);
  transition: transform .08s ease, filter .15s ease;
  user-select: none;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.btn.teal { background: var(--teal); }
.btn.orange { background: var(--orange); }
.btn.pink { background: var(--pink); }
.btn.green { background: var(--green); }
.btn.ghost {
  background: #fff;
  color: var(--violet-600);
  box-shadow: inset 0 0 0 2px var(--violet-100), inset 0 -4px 0 rgba(124, 77, 255, .12);
}
.btn.ghost:hover { background: #faf8ff; }
.btn.sm { padding: 8px 14px; font-size: 14px; border-radius: var(--r-sm); }
.btn.lg { padding: 16px 34px; font-size: 19px; border-radius: var(--r-lg); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.card {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: var(--violet-100);
  color: var(--violet-600);
}

.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--violet-500);
  box-shadow: 0 0 0 4px rgba(124, 77, 255, .14);
}
.textarea { resize: vertical; min-height: 52px; line-height: 1.45; }
.label { display: block; font-size: 13px; font-weight: 800; color: var(--ink-soft); margin: 0 0 6px; }
.field { margin-bottom: 16px; }

/* ============================================================
   顶栏
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 26px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.brand .logo {
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--violet-500), var(--pink));
  color: #fff; font-size: 19px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.brand small { display: block; font-size: 11px; font-weight: 800; color: var(--ink-mute); letter-spacing: .5px; }
.topbar .spacer { flex: 1; }

/* ============================================================
   首页（活动库）
   ============================================================ */
.page { max-width: 1140px; margin: 0 auto; padding: 28px 26px 80px; }

.hero {
  border-radius: var(--r-xl);
  padding: 34px 38px;
  color: #fff;
  background:
    radial-gradient(900px 300px at 88% -30%, rgba(255, 201, 60, .35), transparent 60%),
    radial-gradient(600px 320px at 6% 120%, rgba(0, 194, 168, .40), transparent 62%),
    linear-gradient(120deg, var(--violet-700), var(--violet-500) 55%, #a06bff);
  box-shadow: var(--sh-3);
}
.hero h1 { margin: 0 0 8px; font-size: 30px; font-weight: 900; letter-spacing: -.4px; }
.hero p { margin: 0 0 20px; max-width: 640px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .88); line-height: 1.6; }
.hero .row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn.ghost { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .1); color: #fff; }
.hero .btn.ghost:hover { background: rgba(255, 255, 255, .2); }

.sec-title {
  display: flex; align-items: baseline; gap: 10px;
  margin: 34px 0 16px;
  font-size: 19px; font-weight: 900;
}
.sec-title span { font-size: 14px; font-weight: 700; color: var(--ink-mute); }

.grid-quiz { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 18px; }

.quiz-card {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.quiz-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.quiz-card .thumb {
  position: relative; height: 158px;
  background: linear-gradient(135deg, #efe8ff, #dcd0ff);
  overflow: hidden;
}
.quiz-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quiz-card .badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 900; color: #fff;
  background: rgba(27, 15, 61, .62);
  backdrop-filter: blur(3px);
}
.quiz-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.quiz-card h3 { margin: 0; font-size: 16.5px; font-weight: 900; line-height: 1.35; }
.quiz-card .meta { font-size: 12.5px; font-weight: 700; color: var(--ink-mute); }
.quiz-card .acts { display: flex; gap: 8px; margin-top: auto; }
.quiz-card .acts .btn { flex: 1; }
.icon-btn {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: #f4f1ff; color: var(--violet-600);
  font-size: 15px;
}
.icon-btn:hover { background: var(--violet-100); }
.icon-btn.danger { background: #fff1f2; color: var(--red); }
.icon-btn.danger:hover { background: #ffe1e3; }

.empty {
  padding: 46px 20px; text-align: center;
  border: 2px dashed var(--line); border-radius: var(--r-lg);
  color: var(--ink-mute); font-weight: 800;
}

/* ============================================================
   编辑器
   ============================================================ */
.editor-wrap { max-width: 1240px; margin: 0 auto; padding: 22px 26px 130px; }
.editor-cols { display: grid; grid-template-columns: 1fr 366px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .editor-cols { grid-template-columns: 1fr; } }

.panel { padding: 20px 22px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); margin-bottom: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 900; }
.panel-head .hint { font-size: 12.5px; font-weight: 700; color: var(--ink-mute); }

.q-item { border: 2px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 14px; background: #fcfbff; }
.q-item .qh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.q-item .no {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--violet-500); color: #fff; font-size: 14px; font-weight: 900;
}
.q-item .qh .grow { flex: 1; font-size: 13px; font-weight: 800; color: var(--ink-mute); }

.img-pick { display: flex; gap: 12px; align-items: flex-start; }
.img-prev {
  width: 128px; height: 96px; flex: 0 0 128px;
  border-radius: var(--r-sm); border: 2px dashed var(--line);
  background: #fff center/cover no-repeat;
  display: grid; place-items: center;
  color: var(--ink-mute); font-size: 12px; text-align: center; overflow: hidden;
}
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.img-tools { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.img-tools .row { display: flex; gap: 8px; flex-wrap: wrap; }
.samples { display: flex; gap: 6px; flex-wrap: wrap; }
.samples button {
  width: 40px; height: 34px; border-radius: 8px; padding: 0;
  background: #fff center/cover no-repeat;
  box-shadow: inset 0 0 0 2px var(--line);
}
.samples button:hover { box-shadow: inset 0 0 0 2px var(--violet-500); }

.opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.opt-row .letter {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: #efeaff; color: var(--violet-600); font-size: 14px; font-weight: 900;
}
.opt-row.correct .letter { background: var(--green); color: #fff; }
.opt-row .pick {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 2px var(--line);
  color: transparent; font-size: 15px;
}
.opt-row.correct .pick { background: var(--green); box-shadow: none; color: #fff; }
.opt-row .del { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: transparent; color: var(--ink-mute); font-size: 15px; }
.opt-row .del:hover { background: #fff1f2; color: var(--red); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .t { font-size: 14px; font-weight: 800; }
.switch-row .d { font-size: 12px; font-weight: 700; color: var(--ink-mute); margin-top: 2px; }
.switch { position: relative; width: 50px; height: 28px; flex: 0 0 50px; border-radius: 999px; background: #ddd7ee; transition: background .18s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(22px); }

.theme-row { display: flex; gap: 10px; }
.theme-dot { width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), var(--sh-1); }
.theme-dot.sel { outline: 3px solid var(--ink); outline-offset: 2px; }

.save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.save-bar .spacer { flex: 1; }
.save-bar .status { font-size: 13px; font-weight: 800; color: var(--ink-mute); }

.preview-stage {
  position: relative;
  border-radius: var(--r-lg);
  padding: 18px;
  background: linear-gradient(150deg, var(--tw-a, #2a1860), var(--tw-b, #1b0f3d));
  min-height: 260px;
  display: grid; place-items: center;
}
.preview-stage .pv-title { position: absolute; top: 12px; left: 16px; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.6); }
.pv-img { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #2a1860; aspect-ratio: 4/3; }
.pv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; }
.pv-grid i { background: linear-gradient(160deg, var(--tw-c, #6a4ad6), var(--tw-d, #4a2fa8)); border-radius: 2px; opacity: 1; transition: opacity .5s; }
.pv-grid i.gone { opacity: 0; }
.pv-opts { margin-top: 10px; display: grid; gap: 6px; }
.pv-opts span {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 9px;
  font-size: 12.5px; font-weight: 800;
  background: rgba(255,255,255,.94); color: var(--ink);
}
.pv-opts span b { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: #efeaff; color: var(--violet-600); font-size: 11px; }
.pv-opts span.ok { background: var(--green); color: #fff; }
.pv-opts span.ok b { background: rgba(255,255,255,.35); color: #fff; }

/* ============================================================
   游戏界面
   ============================================================ */
body.game {
  --tw-a: #2a1860;
  --tw-b: #180d3a;
  --tw-c: #7c4dff;
  --tw-d: #5b32c9;
  --tw-g1: rgba(124, 77, 255, .42);
  --tw-g2: rgba(0, 194, 168, .22);
  --tw-g3: rgba(255, 77, 141, .28);
  background:
    radial-gradient(1000px 460px at 12% -12%, var(--tw-g1), transparent 62%),
    radial-gradient(880px 420px at 92% 4%, var(--tw-g2), transparent 60%),
    radial-gradient(700px 400px at 50% 118%, var(--tw-g3), transparent 60%),
    linear-gradient(165deg, var(--tw-a), var(--tw-b) 62%, var(--tw-b));
  color: #fff;
  min-height: 100vh;
}
body.game::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.10) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}
.game-shell { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 16px 20px 40px; }

.hud {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
}
.hud .g-title { font-size: 15px; font-weight: 900; }
.hud .g-title small { display: block; font-size: 11px; font-weight: 800; color: rgba(255,255,255,.55); }
.hud .spacer { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 900;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  white-space: nowrap;
}
.pill.score { background: linear-gradient(180deg, var(--yellow), #f0a800); color: #4a2d00; box-shadow: inset 0 -3px 0 rgba(0,0,0,.16); }
.pill.lives { letter-spacing: 1px; }
.pill.mute { cursor: pointer; padding: 7px 11px; }

.stage {
  padding: 18px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), var(--sh-3);
  backdrop-filter: blur(10px);
}
.qtext { font-size: 19px; font-weight: 900; text-align: center; margin: 2px 0 14px; line-height: 1.4; }

.reveal-wrap { display: grid; grid-template-columns: 1fr 108px; gap: 16px; align-items: stretch; }
@media (max-width: 780px) { .reveal-wrap { grid-template-columns: 1fr; } }

.pic {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: #241350; aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.16);
}
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buzz-hint { font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,.62); text-align: center; }

.timerbar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; margin-top: 14px; }
.timerbar > i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--yellow)); transition: width .25s linear; }
.timerbar.low > i { background: linear-gradient(90deg, var(--orange), var(--red)); }

.options { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .options { grid-template-columns: 1fr; } }
.opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: #fff; color: var(--ink);
  font-size: 16px; font-weight: 900; text-align: left;
  box-shadow: inset 0 -4px 0 rgba(45, 22, 100, .12), var(--sh-2);
  transition: transform .1s, background .18s, color .18s;
}
.opt:hover { transform: translateY(-2px); }
.opt .k {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--violet-100); color: var(--violet-600); font-size: 14px;
}
.opt.correct { background: var(--green); color: #fff; box-shadow: inset 0 -4px 0 var(--green-dark), var(--sh-2); }
.opt.correct .k { background: rgba(255,255,255,.3); color: #fff; }
.opt.wrong { background: var(--red); color: #fff; box-shadow: inset 0 -4px 0 var(--red-dark), var(--sh-2); }
.opt.wrong .k { background: rgba(255,255,255,.3); color: #fff; }
.opt.dim { opacity: .45; }
.opt.locked { pointer-events: none; }
.options.hidden, .hidden { display: none !important; }

.flypoints {
  position: fixed; z-index: 80; pointer-events: none;
  font-size: 34px; font-weight: 900; color: var(--yellow);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
  animation: fly 1.05s ease-out forwards;
}
@keyframes fly {
  0% { opacity: 0; transform: translateY(10px) scale(.7); }
  22% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-84px) scale(1); }
}

.toast-msg {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 90; padding: 12px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 900; color: #fff;
  background: rgba(27, 15, 61, .92); box-shadow: var(--sh-3);
  opacity: 0; transition: opacity .25s, transform .25s;
}
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

.next-row { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

/* 开始页 / 结束页 */
.center-card {
  max-width: 640px; margin: 34px auto;
  padding: 30px 32px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), var(--sh-3);
  backdrop-filter: blur(10px);
  text-align: center;
}
.center-card h1 { margin: 0 0 8px; font-size: 27px; font-weight: 900; }
.center-card .sub { font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,.72); margin-bottom: 20px; line-height: 1.6; }
.start-thumb { width: 100%; max-width: 400px; margin: 0 auto 20px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); aspect-ratio: 4/3; }
.start-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stat-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.big-score { font-size: 62px; font-weight: 900; line-height: 1; color: var(--yellow); text-shadow: 0 4px 0 rgba(0,0,0,.25); margin: 6px 0 4px; }
.review { margin: 20px 0; display: grid; gap: 10px; text-align: left; max-height: 320px; overflow: auto; padding-right: 4px; }
.rv-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); background: rgba(255,255,255,.07); }
.rv-item img { width: 62px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 62px; }
.rv-item .info { flex: 1; font-size: 13px; font-weight: 800; line-height: 1.5; }
.rv-item .info .ok { color: #7ef0b4; }
.rv-item .info .no { color: #ff9aa2; }
.rv-item .mark { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.rv-item .mark.ok { background: var(--green); }
.rv-item .mark.no { background: var(--red); }

.lb { text-align: left; margin: 18px 0 8px; }
.lb h4 { margin: 0 0 10px; font-size: 14px; font-weight: 900; color: rgba(255,255,255,.75); }
.lb ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(255,255,255,.07); font-size: 14px; font-weight: 800; }
.lb li .n { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.14); font-size: 12px; }
.lb li .spacer { flex: 1; }
.name-row { display: flex; gap: 10px; margin-top: 12px; }
.name-row .input { background: rgba(255,255,255,.92); color: var(--ink); }

.footer-note { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-mute); margin-top: 26px; line-height: 1.7; }

/* ============================================================
   v2 — 模板画廊 / 类型徽章
   ============================================================ */
.grid-tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; }
.tpl-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: var(--r-lg); overflow: hidden;
  background: #fff; box-shadow: var(--sh-1); cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.tpl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tpl-card .ic {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; font-size: 23px;
  background: linear-gradient(135deg, var(--violet-500), var(--pink));
  color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.tpl-card h3 { margin: 0; font-size: 16px; font-weight: 900; }
.tpl-card p { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-mute); line-height: 1.5; }
.tpl-card .go { margin-top: auto; font-size: 12.5px; font-weight: 900; color: var(--violet-600); }
.tpl-card .go::after { content: " →"; }

.quiz-card .thumb .big-ic {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 58px; color: rgba(255,255,255,.92);
}

/* ============================================================
   v2 — 通用游戏容器 / 弹层
   ============================================================ */
.gstage {
  position: relative;
  padding: 20px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), var(--sh-3);
  backdrop-filter: blur(10px);
  min-height: 420px;
}
.gprompt { font-size: 20px; font-weight: 900; text-align: center; margin: 4px 0 16px; line-height: 1.4; }
.gmodal {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(15, 8, 38, .72);
  border-radius: var(--r-xl);
  animation: gm-in .22s ease;
}
@keyframes gm-in { from { opacity: 0; } to { opacity: 1; } }
.gmodal .box {
  width: min(520px, 92%); max-height: 86%; overflow: auto;
  padding: 24px; border-radius: var(--r-lg);
  background: #fff; color: var(--ink); text-align: center;
  box-shadow: var(--sh-3);
  animation: gm-pop .26s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes gm-pop { from { transform: scale(.82); } to { transform: scale(1); } }
.gmodal h3 { margin: 0 0 12px; font-size: 21px; font-weight: 900; }
.gmodal img { max-width: 100%; border-radius: var(--r-sm); }

.confetti-piece {
  position: fixed; z-index: 120; top: 46%; width: 10px; height: 14px;
  border-radius: 2px; pointer-events: none;
  animation: confetti-fly 1.4s ease-out forwards;
}
@keyframes confetti-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* ============================================================
   What's inside? (openbox)
   ============================================================ */

/* ============================================================
   Quiz show
   ============================================================ */
.gs-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.gs-q {
  flex: 1; padding: 18px 22px; border-radius: var(--r-md);
  background: #fff; color: var(--ink);
  font-size: 20px; font-weight: 900; line-height: 1.4; text-align: center;
  box-shadow: var(--sh-2);
}
.gs-timer {
  position: relative; width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--tw-c, #7c4dff) 360deg, rgba(255,255,255,.14) 0deg);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.16), var(--sh-2);
}
.gs-timer::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--tw-b, #180d3a); }
.gs-timer b { position: relative; z-index: 1; font-size: 26px; font-weight: 900; }
.gs-timer.danger b { color: #ff9aa2; }
.gs-img { max-width: 300px; max-height: 150px; margin: 0 auto 14px; display: block; border-radius: var(--r-sm); box-shadow: var(--sh-2); }
.gs-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .gs-opts { grid-template-columns: 1fr; } }
.gs-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 18px; border-radius: var(--r-md);
  font-size: 18px; font-weight: 900; color: #fff; text-align: left;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.20), var(--sh-2);
  transition: transform .1s, filter .15s, opacity .2s;
}
.gs-opt:hover { transform: translateY(-2px); filter: brightness(1.08); }
.gs-opt .k { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.28); font-size: 15px; }
.gs-opt.c1 { background: linear-gradient(150deg, #7c4dff, #5b32c9); }
.gs-opt.c2 { background: linear-gradient(150deg, #00c2a8, #079c88); }
.gs-opt.c3 { background: linear-gradient(150deg, #ff8a3d, #e0701f); }
.gs-opt.c4 { background: linear-gradient(150deg, #ff4d8d, #d62f6c); }
.gs-opt.c5 { background: linear-gradient(150deg, #2f9be0, #1c74b5); }
.gs-opt.c6 { background: linear-gradient(150deg, #8bc34a, #5f9a24); }
.gs-opt.correct { outline: 4px solid #7ef0b4; outline-offset: 2px; }
.gs-opt.wrong { opacity: .35; }
.gs-opt.locked { pointer-events: none; }
.gs-streak { font-size: 13px; font-weight: 900; color: var(--yellow); text-align: center; margin-top: 10px; min-height: 18px; }

/* ============================================================
   Anagram
   ============================================================ */
.ag-clue { font-size: 19px; font-weight: 900; text-align: center; margin: 4px 0 18px; }
.ag-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; min-height: 64px; }
.ag-slots { margin-bottom: 20px; }
.ag-tile, .ag-slot {
  width: 54px; height: 60px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 900; user-select: none;
}
.ag-tile {
  background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: inset 0 -5px 0 rgba(45,22,100,.16), var(--sh-2);
  transition: transform .1s, opacity .18s;
}
.ag-tile:hover { transform: translateY(-3px); }
.ag-tile.used { opacity: .22; pointer-events: none; transform: scale(.9); }
.ag-slot {
  background: rgba(255,255,255,.10); color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30);
  cursor: pointer;
}
.ag-slot.filled { background: linear-gradient(150deg, var(--tw-c, #7c4dff), var(--tw-d, #5b32c9)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.ag-word-ok .ag-slot { background: var(--green); box-shadow: inset 0 -4px 0 var(--green-dark); }
.ag-shake { animation: ag-shake .45s ease; }
@keyframes ag-shake {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}

/* ============================================================
   Spin the Wheel
   ============================================================ */
.wheel-area { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.wheel-frame { position: relative; width: min(430px, 82vw); aspect-ratio: 1; }
.wheel-frame canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 14px 26px rgba(0,0,0,.35)); }
.wheel-pointer {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 17px solid transparent; border-right: 17px solid transparent;
  border-top: 30px solid #fff;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
.wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e7e2f5);
  box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 -4px 0 rgba(0,0,0,.08);
  display: grid; place-items: center; font-size: 22px; cursor: pointer; z-index: 2;
  user-select: none;
}
.wheel-result { text-align: center; }

/* ============================================================
   Category sort
   ============================================================ */
.sort-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
@media (max-width: 700px) { .sort-cols { grid-template-columns: 1fr; } }
.sort-col {
  min-height: 240px; padding: 14px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
  transition: box-shadow .15s, background .15s;
}
.sort-col.over { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 3px var(--tw-c, #7c4dff); }
.sort-col h4 {
  margin: 0 0 12px; padding: 10px; border-radius: var(--r-sm);
  background: linear-gradient(150deg, var(--tw-c, #7c4dff), var(--tw-d, #5b32c9));
  font-size: 16px; font-weight: 900; text-align: center;
}
.sort-col .pile { display: flex; flex-direction: column; gap: 8px; }
.sort-card {
  padding: 13px 16px; border-radius: var(--r-md);
  background: #fff; color: var(--ink);
  font-size: 17px; font-weight: 900; text-align: center;
  box-shadow: inset 0 -4px 0 rgba(45,22,100,.14), var(--sh-2);
  cursor: grab; user-select: none;
  transition: transform .12s, opacity .2s;
}
.sort-card:active { cursor: grabbing; }
.sort-card.in-col { cursor: default; box-shadow: var(--sh-1); }
.sort-card.ok { background: var(--green); color: #fff; }
.sort-card.no { background: var(--red); color: #fff; }
.sort-deck { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 64px; margin-bottom: 14px; }
.sort-deck:empty::after { content: "All cards sorted — tap Check answers"; font-size: 13px; font-weight: 800; opacity: .6; }

/* ============================================================
   v3 — 在线搜图弹窗（编辑器）
   ============================================================ */
.emodal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(27, 15, 61, .55);
  backdrop-filter: blur(4px);
  animation: gm-in .2s ease;
}
.emodal .box {
  width: min(680px, 94vw); max-height: 84vh; overflow: auto;
  padding: 22px 24px; border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--sh-3);
  animation: gm-pop .24s cubic-bezier(.2, 1.4, .4, 1);
}
.emodal h3 { margin: 0 0 12px; font-size: 18px; font-weight: 900; color: var(--ink); }
.esearch-row { display: flex; gap: 10px; margin-bottom: 14px; }
.esearch-row .input { flex: 1; }
.esearch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-height: 120px; }
@media (max-width: 640px) { .esearch-grid { grid-template-columns: repeat(3, 1fr); } }
.esearch-grid button {
  padding: 0; border-radius: var(--r-sm); overflow: hidden;
  aspect-ratio: 4/3; background: #f4f1ff center/cover no-repeat;
  box-shadow: inset 0 0 0 2px var(--line);
  transition: transform .12s, box-shadow .12s;
}
.esearch-grid button:hover { transform: scale(1.04); box-shadow: inset 0 0 0 3px var(--violet-500); }
.esearch-status { grid-column: 1 / -1; align-self: center; text-align: center; font-size: 13.5px; font-weight: 800; color: var(--ink-mute); padding: 26px 10px; line-height: 1.6; }
.esearch-credit { margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--ink-mute); text-align: right; }

/* ============================================================
   v3 — 语音（编辑器音频行 + 播放页扬声器）
   ============================================================ */
.audio-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); background: #f6f3ff; margin-bottom: 12px; }
.audio-row .tag { font-size: 12.5px; font-weight: 900; color: var(--violet-600); }
.audio-row .cur { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); flex: 1; }
.audio-row .rec-on { color: var(--red); animation: rec-blink 1s infinite; }
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.gspeak {
  position: absolute; top: 14px; right: 16px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(255,255,255,.14); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.gspeak:hover { background: rgba(255,255,255,.26); }

/* ============================================================
   v3 — 选项改单列长条
   ============================================================ */
.options { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }
.reveal-wrap { grid-template-columns: 1fr 118px; }

/* 设置分组小标题 */
.set-sec {
  margin: 16px 0 8px; padding-bottom: 6px;
  font-size: 12px; font-weight: 900; letter-spacing: .6px;
  text-transform: uppercase; color: var(--violet-600);
  border-bottom: 1px solid var(--line);
}
.set-sec:first-child { margin-top: 0; }

/* Quiz show 生命线 */
.ll-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ll-btn {
  padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 900; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.14);
  transition: transform .1s, filter .15s;
}
.ll-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.ll-btn[disabled] { opacity: .35; pointer-events: none; }

/* 游戏级计时器样式由 play.js 的 .pill 提供（position 需要） */
.stage { position: relative; }

/* Quiz show 生命线 */
.gs-lifelines { display: flex; gap: 8px; justify-content: center; margin: 0 0 10px; flex-wrap: wrap; }
.gs-life {
  padding: 6px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12); color: #fff; font-weight: 900; font-size: 13px;
  cursor: pointer; transition: transform .12s, background .12s;
}
.gs-life:hover:not(:disabled) { transform: scale(1.06); background: rgba(255,255,255,.24); }
.gs-life:disabled { opacity: .35; cursor: default; text-decoration: line-through; }
.gs-bonus-banner {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(10,6,30,.82); backdrop-filter: blur(4px);
}
.gs-bonus-banner .inner {
  text-align: center; color: #fff; animation: gm-pop .45s cubic-bezier(.2,1.6,.4,1);
}
.gs-bonus-banner h2 { font-size: 40px; margin: 0 0 8px; color: var(--yellow); text-shadow: 0 4px 18px rgba(255,201,60,.5); }
.gs-bonus-banner p { font-size: 18px; font-weight: 800; margin: 0 0 18px; }

/* Anagram 逐字母判定色 */
.ag-slot.right { background: var(--green); border-color: var(--green-dark); color: #fff; }
.ag-slot.bad { background: var(--red); border-color: #c62f45; color: #fff; animation: ag-shake .3s; }
.ag-next-row { display: flex; justify-content: center; margin-top: 14px; }

/* Category sort — Table 布局 */
.sort-cols.table { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sort-cols.table .sort-col { border: 3px solid rgba(255,255,255,.5); border-radius: 6px; background: rgba(255,255,255,.08); }
.sort-cols.table .sort-col h4 { border-bottom: 3px solid rgba(255,255,255,.5); border-radius: 0; margin: 0; padding: 10px; background: rgba(0,0,0,.22); }
.sort-cols.table .pile { padding: 10px; }

/* ================= 界面对齐（2026-09-30） ================= */
:root { --brand: #1f9bf0; --brand-dark: #1583d6; --navy: #22304a; }

/* 品牌蓝按钮（New activity / Done） */
.btn.blue, a.btn.blue {
  background: linear-gradient(180deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
  box-shadow: inset 0 -3px 0 rgba(0, 60, 120, .28), var(--sh-1) !important;
}
.btn.blue:hover { filter: brightness(1.06); }

/* 主页 Hero：白底深蓝字 */
.hero { background: #fff !important; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.hero h1 { color: var(--navy); }
.hero p { color: #5a6b85 !important; }
.hero .btn.ghost {
  box-shadow: inset 0 0 0 2px var(--brand) !important;
  background: #fff !important; color: var(--brand-dark) !important;
}
.hero .btn.ghost:hover { background: #eef7ff !important; }
.hero .ww-stat { margin-top: 16px; font-size: 13px; font-weight: 800; color: #8aa0bd; }

/* 模板卡：顶部彩色图块 */
.tpl-card { padding: 0 !important; overflow: hidden; }
.tpl-card .ic {
  width: 100%; height: 108px; border-radius: 0 !important;
  font-size: 44px !important; display: grid; place-items: center;
  background: linear-gradient(150deg, #7c4dff, #4b23b8) !important;
  color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.tpl-card h3 { padding: 12px 16px 0; color: var(--navy); }
.tpl-card p { padding: 4px 16px 0; }
.tpl-card .go { padding: 10px 16px 14px; color: var(--brand-dark) !important; }
.tpl-card[href*="type=imagequiz"] .ic { background: linear-gradient(150deg, #38b6ff, #1f6feb) !important; }
.tpl-card[href*="type=openbox"] .ic { background: linear-gradient(150deg, #ffb24d, #f2711c) !important; }
.tpl-card[href*="type=speakingcards"] .ic { background: linear-gradient(150deg, #2fd4b6, #0fa48a) !important; }
.tpl-card[href*="type=gameshow"] .ic { background: linear-gradient(150deg, #b06bff, #6a2fc9) !important; }
.tpl-card[href*="type=anagram"] .ic { background: linear-gradient(150deg, #ff6f91, #e63950) !important; }
.tpl-card[href*="type=wheel"] .ic { background: linear-gradient(150deg, #ffd54d, #f2a71c) !important; }
.tpl-card[href*="type=groupsort"] .ic { background: linear-gradient(150deg, #5cc8ff, #2f7de1) !important; }

/* 编辑器：面包屑 */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; margin-left: 18px; }
.crumbs a { color: var(--brand-dark); }
.crumbs a:hover { text-decoration: underline; }
.crumbs b { color: var(--navy); }
.crumbs .sep { color: #b7c4d6; }
.crumbs .dim { color: #b7c4d6; }

/* 模板 chip（编辑器右上） */
.tpl-chip {
  background: #eef7ff; color: var(--brand-dark);
  border: 1.5px solid #cfe7fb; font-weight: 900;
}

/* "+ Instruction" 折叠链 */
.instr-toggle {
  background: none; padding: 0; font-size: 13.5px; font-weight: 900;
  color: var(--brand-dark); cursor: pointer;
}
.instr-toggle:hover { text-decoration: underline; }
#instrBox { margin-top: 8px; }

/* 内容列底部 Done 行 */
.done-row { display: flex; justify-content: flex-end; margin-top: 16px; }

/* 开始/结算卡：白卡 */
.center-card {
  background: #fff;
  box-shadow: 0 18px 50px rgba(8, 14, 40, .38);
  backdrop-filter: none;
}
.center-card h1 { color: var(--navy); }
.center-card .sub { color: #5a6b85; }
.center-card .stat-row .pill,
.center-card .pill {
  background: #eef7ff; color: var(--brand-dark);
  box-shadow: inset 0 0 0 1.5px #cfe7fb;
  text-shadow: none;
}
.center-card #startBtn {
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  box-shadow: inset 0 -3px 0 rgba(0, 60, 120, .28), 0 10px 24px rgba(31, 155, 240, .35);
  font-size: 19px; padding: 14px 46px;
}
.center-card .btn.ghost { color: var(--brand-dark); box-shadow: inset 0 0 0 2px #cfe7fb; background: #fff; }
.center-card .review { text-align: left; }
.center-card .rv-item { background: #f6faff; border: 1px solid #e2eefb; }
.center-card .rv-item .info { color: var(--navy); }
.center-card .lb { background: #f6faff; border: 1px solid #e2eefb; color: var(--navy); }
.center-card .big-score { color: var(--brand-dark); text-shadow: none; }
.center-card .name-row .input { background: #fff; color: var(--navy); }

/* ============================================================
   ClassPlay library, authoring workspace and classic game frame
   ============================================================ */
:root {
  --brand: #168bce;
  --brand-dark: #096da9;
  --navy: #273b4e;
  --violet-600: #096da9;
  --violet-500: #168bce;
  --violet-100: #e8f4fc;
  --ink: #273b4e;
  --ink-soft: #52677a;
  --ink-mute: #6b7e8d;
  --line: #dce4e9;
  --page: #f5f7f9;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 9px;
  --r-xl: 12px;
  --sh-1: 0 2px 5px rgba(30, 55, 75, .05);
  --sh-2: 0 4px 12px rgba(30, 55, 75, .12);
  --sh-3: 0 14px 32px rgba(20, 40, 60, .18);
  --font: "Segoe UI", Arial, "Microsoft YaHei", sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-weight: 400; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #eeae24; outline-offset: 3px; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 300; padding: 12px 20px; background: #fff; color: var(--brand-dark); border-radius: 6px; box-shadow: var(--sh-2); }
.skip-link:focus { top: 8px; }
.btn { min-height: 42px; padding: 10px 19px; gap: 8px; border-radius: 5px; font-size: 15px; font-weight: 600; line-height: 1.3; background: var(--brand); box-shadow: none; transition: background .16s, box-shadow .16s; }
.btn:hover { filter: none; background: var(--brand-dark); }
.btn:active { transform: none; box-shadow: none; }
.btn.blue, a.btn.blue { background: var(--brand) !important; box-shadow: none !important; }
.btn.blue:hover, a.btn.blue:hover { background: var(--brand-dark) !important; filter: none; }
.btn.ghost { background: #fff; color: var(--brand-dark); border: 1px solid #cadde9; box-shadow: none; }
.btn.ghost:hover { background: #edf6fc; }
.btn.sm { min-height: 36px; padding: 7px 12px; font-size: 13px; border-radius: 5px; }
.btn.lg { padding: 13px 26px; font-size: 17px; border-radius: 6px; }
.input, .select, .textarea { min-width: 0; max-width: 100%; border: 1px solid #bbcbd6; padding: 10px 12px; font-size: 14px; font-weight: 400; border-radius: 5px; min-height: 42px; }
.input::placeholder, .textarea::placeholder { color: #80909c; opacity: 1; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,139,206,.12); }
.label { color: var(--ink); font-weight: 600; }
.topbar { min-height: 72px; padding: 0 max(24px, calc((100vw - 1200px) / 2)); gap: 28px; background: #fff; border-color: #dce4e9; }
.brand { gap: 9px; font-size: 25px; font-weight: 700; color: #293c4c; letter-spacing: -.8px; white-space: nowrap; }
.brand .logo { width: 30px; height: 30px; padding: 0; gap: 3px; grid-template-columns: 1fr 1fr; background: none; color: var(--brand); border-radius: 0; box-shadow: none; }
.brand .logo:has(i) { display: grid; }
.brand .logo i { width: 13px; height: 13px; background: var(--brand); border-radius: 2px; }
.brand .logo i:nth-child(2) { opacity: .68; }
.brand .logo i:nth-child(3) { opacity: .46; }
.main-nav { align-self: stretch; display: flex; gap: 26px; align-items: stretch; }
.main-nav a { display: flex; align-items: center; padding: 2px 0 0; font-size: 14px; font-weight: 600; color: #6b7e8d; border-bottom: 3px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: var(--brand-dark); }
.main-nav a.active { border-bottom-color: var(--brand); }
.page { max-width: 1200px; padding: 34px 24px 30px; }
.library-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 55px; align-items: center; padding: 36px 40px; background: #fff; border: 1px solid #e3e9ed; border-radius: 9px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; color: #60849b; margin: 0 0 8px; }
.library-intro h1 { font-size: clamp(28px, 3vw, 36px); line-height: 1.17; margin: 0 0 14px; letter-spacing: -1.1px; font-weight: 700; }
.library-intro p:not(.eyebrow) { font-size: 14px; line-height: 1.7; color: var(--ink-soft); max-width: 460px; margin: 0 0 22px; }
.create-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 0; padding: 0; }
.create-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.create-steps li:not(:last-child)::after { content: "→"; position: absolute; top: 39px; right: -18px; color: #a6c3d6; font-size: 22px; }
.create-steps b { font-size: 13px; font-weight: 600; color: var(--ink); margin: 12px 0 3px; }
.create-steps li > span:last-child { font-size: 11px; color: #6b7e8d; }
.step-art { width: 80px; height: 80px; background: #ecf6fd; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.art-template { display: grid; grid-template-columns: 20px 20px; grid-template-rows: 20px 20px; gap: 5px; align-content: center; }
.art-template i { width: 20px; height: 20px; background: #1b90d2; border-radius: 3px; }
.art-template i:nth-child(2) { background: #4faf8c; }.art-template i:nth-child(3) { background: #e9ae4c; }.art-template i:nth-child(4) { background: #bc85cc; }
.art-content { flex-direction: column; gap: 6px; }
.art-content i { width: 44px; height: 8px; border-radius: 2px; background: #61b3df; }
.art-content i:first-child { height: 13px; background: #1b90d2; }
.art-content i:last-child { width: 31px; align-self: flex-start; margin-left: 18px; }
.art-play { color: #1b90d2; font-size: 34px; padding-left: 5px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 37px 0 18px; }
.sec-title { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 650; letter-spacing: -.4px; gap: 11px; }
.sec-title span#count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 7px; background: #e4edf3; color: #55748b; border-radius: 5px; font-size: 12px; font-weight: 600; }
.section-count, .device-note { color: var(--ink-mute); font-size: 12px; white-space: nowrap; }
.device-note span { color: #58a49a; font-size: 10px; margin-right: 5px; }
.grid-tpl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.tpl-card { gap: 0; border: 1px solid #dce4e9; border-radius: 7px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.tpl-card:hover { transform: none; border-color: #78b7dc; box-shadow: 0 4px 14px rgba(19,111,164,.1); }
.template-art { display: block; width: 100%; background: #3d9cda; aspect-ratio: 16 / 9; overflow: hidden; }
.template-art svg { display: block; width: 100%; height: 100%; }
.art-imagequiz { background: #4caae2 !important; }.art-openbox { background: #d98532 !important; }.art-speakingcards { background: #2ea99b !important; }
.art-gameshow { background: #65419d !important; }.art-anagram { background: #d57369 !important; }.art-wheel { background: #f0d99d !important; }.art-groupsort { background: #65b0d3 !important; }
.template-copy { display: flex; flex-direction: column; flex: 1; padding: 16px 15px 15px; }
.tpl-card h3 { padding: 0; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.3; }
.tpl-card p { padding: 0; font-size: 12px; font-weight: 400; color: var(--ink-soft); margin: 6px 0 16px; line-height: 1.5; }
.tpl-card .go { padding: 0; font-size: 12px; font-weight: 600; color: var(--brand-dark) !important; }
.library-toolbar { display: flex; gap: 12px; margin: 0 0 20px; }
.search-field { position: relative; flex: 1; }
.search-field > span { position: absolute; left: 13px; top: 4px; color: #8ba0b0; font-size: 27px; pointer-events: none; }
.search-field .input { padding-left: 41px; }
.library-toolbar .select { width: 204px; }
.grid-quiz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.quiz-card { border: 1px solid #dce4e9; border-radius: 7px; box-shadow: none; }
.quiz-card:hover { transform: none; box-shadow: 0 4px 14px rgba(19,111,164,.1); border-color: #78b7dc; }
.quiz-card .thumb { height: auto; aspect-ratio: 16 / 9; background: #edf4f9; }
.quiz-card .thumb img { object-fit: contain; background: #edf4f9; }
.thumb-play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 35px; height: 35px; padding-left: 2px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand-dark); box-shadow: 0 2px 7px rgba(0,0,0,.12); font-size: 13px; }
.quiz-card .body { padding: 16px; gap: 6px; }
.activity-template { color: #7b8e9a; font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: .6px; }
.quiz-card h3 { font-size: 16px; font-weight: 600; color: #243c4f; line-height: 1.35; }
.quiz-card h3, .editor-heading h1, .center-card h1, .gprompt, .gs-q, .sort-card, .sort-col h4 { overflow-wrap: anywhere; }
.quiz-card h3 a:hover { color: var(--brand-dark); }
.quiz-card .meta { font-size: 12px; font-weight: 400; margin-bottom: 9px; }
.quiz-card .acts { gap: 7px; }
.icon-btn { border-radius: 5px; background: #f1f6f9; width: 34px; height: 36px; flex-basis: 34px; font-size: 18px; font-weight: 500; color: #47748d; }
.icon-btn:hover { background: #e5f2fa; }
.icon-btn.danger { background: #fff; color: #8a9ba6; }
.icon-btn.danger:hover { background: #fff0ee; color: #bf5548; }
.empty { grid-column: 1 / -1; background: #fff; border: 1px dashed #b9ccd9; padding: 38px 20px; font-weight: 400; }
.empty b { color: var(--ink); font-size: 17px; font-weight: 600; }
.empty p { margin: 7px 0 18px; font-size: 14px; }
.footer-note { display: flex; gap: 22px; align-items: center; justify-content: space-between; margin-top: 45px; padding: 24px 0 0; border-top: 1px solid #dce4e9; text-align: left; font-size: 11px; font-weight: 400; line-height: 1.7; }
.footer-note p { margin: 0; flex: 1; }
.footer-brand { font-size: 16px; font-weight: 600; color: #68849a; }

/* Editor: content at left, optional controls at right. */
.editor-wrap { max-width: 1248px; padding: 26px 24px 120px; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 24px; }
.editor-heading h1 { margin: 0; font-size: 27px; line-height: 1.2; font-weight: 600; letter-spacing: -.6px; }
.crumbs { margin-left: 8px; gap: 12px; font-size: 12px; font-weight: 400; }
.crumbs a, .crumbs b, .crumbs .dim { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.crumbs b { font-weight: 600; color: var(--brand-dark); }
.step-number { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.crumbs .dim { color: #8b9eac; }
.chip.tpl-chip { border: 1px solid #c8e3f5; border-radius: 5px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.editor-cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.editor-cols > *, .library-intro > *, .search-field, .img-tools { min-width: 0; }
.panel { border: 1px solid #dce4e9; padding: 21px 23px; border-radius: 7px; box-shadow: none; }
.panel-head { align-items: flex-start; margin-bottom: 14px; }
.panel-head h2 { font-size: 15px; font-weight: 650; }
.panel-head .hint, .hint { font-size: 11px; font-weight: 400; color: var(--ink-mute); line-height: 1.6; }
.content-panel > .panel-head { display: block; margin-bottom: 22px; }
.content-panel > .panel-head h2 { margin-bottom: 6px; }
.content-panel > .panel-head .hint { font-size: 12px; }
.activity-title { font-size: 17px; min-height: 47px; font-weight: 500; }
.author-field { margin: 17px 0; }
.author-field .label span { color: #899ba7; font-weight: 400; }
.instr-toggle { font-size: 12px; font-weight: 600; }
#instrBox .hint { margin: 5px 0 0; }
.q-item { border: 1px solid #d7e2ea; background: #fbfcfd; padding: 18px; border-radius: 6px; margin-bottom: 18px; }
.q-item .no { background: #168bce; width: 27px; height: 27px; flex-basis: 27px; border-radius: 4px; font-size: 13px; font-weight: 600; }
.q-item .qh .grow { font-size: 12px; font-weight: 500; color: #788e9c; }
.editor-content .row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.img-pick { gap: 15px; }
.img-prev { background-color: #f0f5f8; border: 1px dashed #afc9d9; border-radius: 5px; width: 144px; height: 110px; flex-basis: 144px; font-size: 11px; }
.img-prev img { object-fit: contain; }
.img-tools .row { gap: 6px; }
.samples button { border-radius: 4px; box-shadow: inset 0 0 0 1px #cbdde8; }
.opt-row { gap: 8px; }
.opt-row .letter { background: #e9f3fa; color: #39799f; border-radius: 4px; font-weight: 600; font-size: 13px; }
.opt-row .pick { box-shadow: inset 0 0 0 1px #c3d5e0; border-radius: 50%; }
.opt-row.correct .pick, .opt-row.correct .letter { background: #2d9b69; }
.audio-row { background: #edf6fb; border-radius: 5px; border: 1px solid #dcebf4; font-size: 12px; }
.audio-row .tag, .audio-row .cur { font-size: 11px; font-weight: 500; }
.editor-sidebar .panel { padding: 18px; margin-bottom: 17px; }
.preview-stage { min-height: 228px; padding: 38px 16px 22px; border-radius: 5px; }
.preview-stage .pv-title { font-size: 10px; font-weight: 500; opacity: .8; }
.preview-content { width: 100%; color: #fff; text-align: center; }
#pvThumb { margin: 0 auto 12px; }
#pvThumb img { object-fit: contain !important; }
#pvTitle { font-size: 20px; font-weight: 600; line-height: 1.35; }
#pvChips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
#pvChips .pill { font-size: 10px; padding: 4px 7px; font-weight: 500; }
.preview-note { margin: 10px 0 0; color: var(--ink-mute); font-size: 11px; text-align: center; }
.switch-row { padding: 11px 0; border-bottom: 1px solid #eaf0f4; }
.switch-row .t { font-size: 12px; font-weight: 600; }
.switch-row .d { font-size: 11px; font-weight: 400; }
.switch { width: 40px; height: 23px; flex-basis: 40px; background: #c4d0d8; padding: 0; border: 0; }
.switch::after { width: 17px; height: 17px; }
.switch.on { background: var(--brand); }.switch.on::after { transform: translateX(17px); }
.theme-row { flex-wrap: wrap; gap: 8px; }
.theme-dot { width: 34px; height: 34px; border-radius: 5px; }
.theme-dot.sel { outline: 2px solid var(--brand-dark); }
.font-field { margin-top: 17px; }
.set-sec { color: #54809b; font-size: 10px; font-weight: 600; letter-spacing: .7px; margin-top: 20px; border-bottom-color: #e1eaf0; }
.done-row { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e3ebf0; }
.save-bar { gap: 12px; padding: 13px max(24px, calc((100vw - 1200px) / 2)); background: #fff; backdrop-filter: none; box-shadow: 0 -3px 12px rgba(35,62,80,.04); }
.save-bar .status { color: #597384; font-size: 12px; font-weight: 500; }
.storage-note { margin: 2px 0 0; font-size: 10px; color: #889ba7; }
.toast-msg { max-width: calc(100vw - 30px); bottom: 90px; border-radius: 6px; font-size: 13px; font-weight: 500; padding: 12px 18px; text-align: center; background: #294355; }

/* Game stage: broad play area and clear controls without glass layers. */
body.game { background: linear-gradient(155deg, var(--tw-a), var(--tw-b)); font-weight: 500; }
body.game::before { background: none; opacity: 0; }
.game-shell { max-width: 1120px; padding: 20px 24px 36px; }
.hud { padding: 12px 18px; border-radius: 7px; background: rgba(0,0,0,.16); box-shadow: none; backdrop-filter: none; gap: 10px; }
.hud .g-title { font-size: 15px; font-weight: 600; }
.hud .g-title small { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.7); }
.pill { border-radius: 5px; font-size: 12px; font-weight: 600; padding: 6px 10px; }
.pill.score { background: #ffe099; color: #634820; box-shadow: none; }
.gstage { min-height: 560px; padding: 38px 30px 30px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); border-radius: 8px; box-shadow: none; backdrop-filter: none; }
.gprompt, .qtext { font-size: 24px; font-weight: 600; line-height: 1.4; margin-bottom: 22px; }
.center-card { padding: 34px 40px; border-radius: 10px; box-shadow: 0 15px 45px rgba(0,0,0,.2); }
.center-card h1 { font-size: 28px; font-weight: 650; }
.center-card .sub { font-weight: 400; color: #5b7386; }
.center-card .pill { background: #eff5f9; color: #426781; font-size: 11px; font-weight: 500; box-shadow: none; }
.center-card #startBtn { font-size: 18px; border-radius: 6px; padding: 14px 45px; background: var(--brand); box-shadow: none; }
.center-card .btn.ghost { border: 1px solid #cadde9; box-shadow: none; }
.center-card .big-score { font-weight: 700; }
.center-card .rv-item .info .ok { color: #238354; }.center-card .rv-item .info .no { color: #bc4d43; }
.center-card .lb { padding: 14px; border-radius: 6px; }
.center-card .lb h4 { color: #597284; font-size: 12px; }
.center-card .lb li { background: #fff; color: #38566c; font-weight: 500; }
.start-thumb { max-width: 330px; aspect-ratio: 16 / 10; box-shadow: none; background: #eaf4fa; }
.start-thumb img { object-fit: contain; }
.pic { max-height: 420px; background: #edf5fa; border: 4px solid rgba(255,255,255,.85); border-radius: 6px; box-shadow: 0 4px 13px rgba(0,0,0,.15); }
.pic img { object-fit: contain; }
.reveal-wrap { max-width: 850px; margin: auto; grid-template-columns: minmax(0, 1fr) 118px; }
.buzz-hint { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.85); }
.timerbar { max-width: 740px; margin: 14px auto 0; height: 6px; }
.options { max-width: 740px; gap: 10px; margin-top: 20px; }
.opt { border-radius: 6px; padding: 13px 17px; font-size: 17px; font-weight: 600; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.opt:hover { transform: none; background: #f0f8ff; }
.opt .k { border-radius: 4px; font-weight: 600; background: #dfedf7; color: #376d91; }
.opt.correct:hover, .opt.correct { background: #2d9b69; color: #fff; }
.opt.wrong:hover, .opt.wrong { background: #d8544b; color: #fff; }
.gmodal { border-radius: 8px; background: rgba(18,35,50,.74); }
.gmodal .box { border-radius: 9px; padding: 26px; }
.gmodal h3 { font-size: 23px; font-weight: 600; }
.gs-head { gap: 16px; }.gs-q { font-size: 24px; padding: 22px; border-radius: 6px; font-weight: 600; }
.gs-opt { padding: 19px; border-radius: 6px; font-weight: 600; font-size: 19px; box-shadow: 0 4px 0 rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.4); }
.gs-opt.c1 { background: #307eca; }.gs-opt.c2 { background: #229679; }.gs-opt.c3 { background: #cf863c; }.gs-opt.c4 { background: #b4547e; }.gs-opt.c5 { background: #2b8fb3; }.gs-opt.c6 { background: #6d9b2f; }
.gs-opt .k { border-radius: 4px; }
.gs-life { font-weight: 500; font-size: 12px; border-width: 1px; }
.gs-img { max-width: min(300px, 100%); }
.ag-clue { font-size: 23px; font-weight: 600; margin-bottom: 28px; }
.ag-row { gap: 10px; }.ag-slots { margin-bottom: 30px; }
.ag-tile, .ag-slot { border-radius: 5px; width: 59px; height: 65px; font-size: 30px; font-weight: 600; }
.ag-tile { box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.ag-tile:disabled, .ag-tile.used { opacity: .25; transform: none; }
.ag-slot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.wheel-frame { width: min(460px, 76vw); }.wheel-frame canvas { filter: drop-shadow(0 8px 18px rgba(0,0,0,.2)); }
.wheel-hub { font-size: 18px; font-weight: 500; }
.sort-cols { gap: 20px; margin-bottom: 28px; }
.sort-col { min-width: 0; border-radius: 5px; padding: 0 14px 14px; min-height: 250px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.sort-col h4 { background: rgba(0,0,0,.18); margin: 0 -14px 13px; border-radius: 5px 5px 0 0; padding: 14px; font-size: 19px; font-weight: 600; }
.sort-col.over { background: rgba(255,255,255,.17); box-shadow: inset 0 0 0 3px #e3d6a0; }
.sort-col:focus-visible { outline: 3px solid #eeae24; outline-offset: 4px; }
.sort-card { border-radius: 5px; padding: 11px 19px; font-weight: 600; font-size: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.sort-card.selected { outline: 3px solid #f4d178; outline-offset: 3px; }
.sort-card img { max-width: 90px; max-height: 65px; object-fit: contain; }
.sort-deck { margin: 22px 0 15px; gap: 13px; }
.sort-deck:empty::after { color: #fff; opacity: .85; }
.next-row { flex-wrap: wrap; }
.game .btn.green { background: #258d60; }
.game .btn.green:hover { background: #207852; }

@media (max-width: 1050px) {
  .topbar { padding: 0 20px; gap: 20px; }
  .grid-tpl { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .library-intro { gap: 25px; padding: 30px; }
  .editor-cols { grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; }
  .crumbs { gap: 6px; font-size: 11px; margin-left: 0; }
  .editor-page .brand { font-size: 21px; }
  .panel { padding: 18px; }
}
@media (max-width: 820px) {
  .library-intro { grid-template-columns: 1fr; gap: 28px; }
  .library-intro p:not(.eyebrow) { max-width: none; }
  .create-steps { max-width: 460px; }
  .grid-quiz { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .editor-cols { grid-template-columns: minmax(0,1fr); }
  .editor-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .editor-sidebar .panel { margin: 0; }
  .editor-page .crumbs { display: none; }
  .panel-head { flex-wrap: wrap; gap: 4px; }
  .gstage { padding: 35px 20px 24px; min-height: 520px; }
  .hud { flex-wrap: wrap; }.hud .g-title { max-width: 100%; }
}
@media (max-width: 580px) {
  html { scroll-padding-top: 82px; }
  .topbar { padding: 12px 16px; min-height: 64px; gap: 10px; }
  .brand { font-size: 22px; }.brand .logo { width: 25px; height: 25px; gap: 3px; }.brand .logo i { width: 11px; height: 11px; }
  .topbar > .btn { font-size: 12px; padding: 9px 10px; min-height: 36px; }
  .main-nav { display: none; }
  .page, .editor-wrap { padding-left: 16px; padding-right: 16px; }
  .page { padding-top: 20px; }
  .library-intro { padding: 24px 20px; gap: 24px; }
  .library-intro h1 { font-size: 28px; letter-spacing: -.8px; }
  .create-steps { gap: 9px; }.create-steps li:not(:last-child)::after { right: -11px; top: 29px; font-size: 17px; }
  .step-art { width: 63px; height: 63px; border-radius: 12px; }
  .art-content i { width: 35px; }.art-content i:last-child { width: 25px; margin-left: 14px; }
  .create-steps b { font-size: 11px; }.create-steps li > span:last-child { font-size: 10px; }
  .section-heading { margin-top: 28px; align-items: flex-start; }.section-count { max-width: 80px; text-align: right; white-space: normal; font-size: 10px; line-height: 1.6; }
  .sec-title { font-size: 22px; }.device-note { display: none; }
  .grid-tpl { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .template-copy { padding: 12px; }.tpl-card h3 { font-size: 14px; }.tpl-card p { font-size: 11px; margin-bottom: 12px; }.tpl-card .go { font-size: 11px; }
  .library-toolbar { flex-wrap: wrap; gap: 8px; }.library-toolbar .search-field { flex-basis: 100%; }.library-toolbar .select { width: 100%; }
  .grid-quiz { grid-template-columns: minmax(0,1fr); gap: 18px; }.quiz-card .thumb { aspect-ratio: 16 / 8; }
  .footer-note { flex-direction: column; gap: 8px; align-items: flex-start; }
  .editor-wrap { padding-bottom: 140px; }.editor-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 18px; }.editor-heading h1 { font-size: 25px; }
  .editor-sidebar { grid-template-columns: minmax(0,1fr); }
  .panel { padding: 16px; }.q-item { padding: 13px; }.img-pick { flex-direction: column; gap: 11px; }.img-prev { width: 100%; height: 150px; flex-basis: auto; }.img-tools { width: 100%; }
  .opt-row { gap: 6px; }.opt-row .letter { width: 26px; flex-basis: 26px; }.opt-row .pick { width: 27px; height: 27px; flex-basis: 27px; }.opt-row .input { min-width: 0; padding: 9px; }
  .save-bar { padding: 10px 16px; gap: 9px; flex-wrap: wrap; }.save-bar > div { width: 100%; }.save-bar .spacer { display: none; }.save-bar > .btn { flex: 1; font-size: 12px; padding: 10px; }.storage-note { display: none; }
  .game-shell { padding: 12px 10px 24px; }.hud { padding: 11px 12px; gap: 7px; }.hud .g-title { width: 100%; font-size: 14px; }.hud .spacer { display: none; }.hud .pill { padding: 5px 8px; font-size: 11px; }.hud .pill.mute { margin-left: auto; }
  .center-card { padding: 26px 20px; margin: 20px auto; }.center-card h1 { font-size: 23px; }.center-card .sub { font-size: 13px; }.center-card .stat-row { gap: 7px; }
  .gstage { padding: 42px 12px 22px; border-radius: 6px; min-height: 460px; }.gprompt, .qtext { font-size: 20px; }.gmodal .box { max-height: 92%; padding: 20px; }
  .reveal-wrap { grid-template-columns: minmax(0,1fr); gap: 16px; }.pic { aspect-ratio: 4 / 3; }.buzz-hint { max-width: 100px; text-align: left; }
  .opt { padding: 12px 13px; font-size: 15px; }.gs-head { gap: 10px; }.gs-q { font-size: 18px; padding: 14px; }.gs-timer { width: 63px; height: 63px; flex-basis: 63px; }.gs-timer b { font-size: 21px; }.gs-opt { padding: 14px; font-size: 16px; }
  .ag-tile, .ag-slot { width: 41px; height: 49px; font-size: 23px; }.ag-row { gap: 7px; }.ag-clue { font-size: 20px; }.wheel-frame { width: min(390px, 79vw); }
  .sort-cols, .sort-cols.table { grid-template-columns: minmax(0,1fr); gap: 14px; }.sort-col { min-height: 130px; }.sort-col h4 { font-size: 17px; }.sort-card { font-size: 16px; }.sort-deck { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html:where(:not([data-motion-managed])) { scroll-behavior: auto; }
  :where(:root:not([data-motion-managed])) *, :where(:root:not([data-motion-managed])) *::before, :where(:root:not([data-motion-managed])) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
html:where([data-reduce-motion]) { scroll-behavior: auto; }
:where(:root[data-reduce-motion]) *, :where(:root[data-reduce-motion]) *::before, :where(:root[data-reduce-motion]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
/* Crossword uses the remaining stage height; oversized grids and clue lists keep scrolling. */
.activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] .puzzle-shell {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] .crossword-layout {
  flex: 1; min-height: 0; align-items: stretch;
}
.activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] :is(.puzzle-scroll,.crossword-clues) {
  height: 100%; max-height: 100%; min-height: 0;
}
.activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] .crossword-grid {
  grid-template-columns: repeat(var(--puzzle-columns),var(--crossword-cell-size,36px));
  min-width: 0; max-width: none;
}
.activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] :is(.crossword-cell,.crossword-block) {
  width: var(--crossword-cell-size,36px); height: var(--crossword-cell-size,36px);
}
.activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] .crossword-cell input {
  font-size: clamp(18px,calc(var(--crossword-cell-size,36px)*.6),38px); padding-top: 4px;
}
.activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] .crossword-number {
  font-size: clamp(9px,calc(var(--crossword-cell-size,36px)*.23),14px);
}
@media (max-width:650px) {
  .activity-player[data-game="crossword"] #gameStage[data-crossword-fit="yes"] .crossword-layout {
    grid-template-rows: minmax(0,1fr) minmax(105px,31%);
  }
}

/* Source: css/site.css; sha256: ac8cbcc05ae36e4bbffee1170ba358831cef42bd2dd59580496def85cec3160e */
/* Compact library and template picker. These styles are independent of game themes. */
button, input, select, textarea { font: inherit; }
@font-face { font-family: "ClassPlay Round"; src: url("../assets/fonts/Nunito-Variable.woff2") format("woff2"); font-style: normal; font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "ClassPlay Display"; src: url("../assets/fonts/Baloo2-Variable.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }
body.site-page { margin: 0; background: linear-gradient(#cce6f3, #e8f5fb 450px); color: #222; font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: 400; }
.site-header { background: #fff; border-bottom: 1px solid #dae8ef; }
.site-header-inner { min-height: 50px; display: flex; align-items: center; gap: 22px; padding: 0 30px; max-width: 1600px; margin: auto; }
.site-brand { display: inline-flex; align-items: center; gap: 5px; color: #222; font-size: 24px; font-weight: 700; letter-spacing: -1.1px; line-height: 1; white-space: nowrap; }
.site-brand { font-family: "ClassPlay Round", Arial, sans-serif; font-weight: 900; }
.iq-activity-svg text { font-family: "ClassPlay Round", Nunito, Arial, sans-serif; }
.site-logo { display: grid; grid-template-columns: 9px 9px; grid-template-rows: 9px 9px; gap: 2px; margin-right: 1px; }
.site-logo i { display: block; width: 9px; height: 9px; background: #33a4e4; }
.site-logo i:nth-child(2) { opacity: .58; }.site-logo i:nth-child(3) { opacity: .72; }
.site-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; align-self: stretch; }
.site-nav a { display: flex; align-items: center; border-bottom: 2px solid transparent; font-size: 13px; color: #222; padding: 0 2px; }
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: #39a4e5; color: #1573ad; }
/* Tool navigation uses the same understated accent as the worksheet controls. */
.site-page:is(.tools-page, .tracing-page) .site-header .site-nav a[aria-current="page"] { color: #176b9b; border-bottom: 2px solid #176b9b; background: transparent; box-shadow: none; }
.site-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #bbb; background: linear-gradient(#fff, #f6f6f6); color: #222; font: inherit; font-size: 13px; font-weight: 400; padding: 7px 12px; border-radius: 0; min-height: 34px; line-height: 1.25; cursor: pointer; white-space: nowrap; }
.site-button:hover { background: #eef6fc; border-color: #7cb9dd; }
.site-button.primary { color: #fff; background: #39a5e8; border-color: #339add; font-weight: 600; }
.site-button.primary:hover { background: #268ecb; }
.site-create { min-height: 32px; font-size: 13px; padding: 6px 13px; }
.site-main { width: calc(100% - 72px); max-width: 1280px; min-height: calc(100vh - 136px); margin: 24px auto 0; background: #fff; box-shadow: 0 1px 5px rgba(70,95,110,.08); }
.site-page .site-input, .site-page .site-select { font-family: inherit; font-size: 13px; font-weight: 400; color: #333; height: 35px; min-width: 0; border: 1px solid #c6c6c6; border-radius: 0; background: #fff; outline: none; padding: 7px 10px; box-shadow: none; }
.site-page .site-input:focus, .site-page .site-select:focus { border-color: #40a6e0; box-shadow: 0 0 0 1px #40a6e0; }
.site-input::placeholder { color: #aaa; }
.site-input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.site-page button:focus-visible, .site-page a:focus-visible { outline: 2px solid #267fb6; outline-offset: 3px; }
.picker-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid #e4e4e4; padding: 27px 32px 24px; }
.picker-steps { display: flex; align-items: center; gap: 16px; font-size: 20px; color: #898989; line-height: 1.2; white-space: nowrap; }
.picker-steps h1 { font-size: 20px; font-weight: 400; color: #111; line-height: inherit; margin: 0; letter-spacing: 0; }
.step-chevron { color: #8e8e8e; font-size: 30px; font-weight: 300; line-height: .6; }
.compact-search { position: relative; flex: 0 1 210px; }
.compact-search .site-input { width: 100%; padding-right: 30px; }
.compact-search > span { display: grid; place-items: center; position: absolute; right: 10px; top: 0; height: 35px; color: #444; pointer-events: none; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; padding: 26px 32px 40px; }
.template-card { display: flex; min-width: 0; height: 122px; border: 1px solid #d7d7d7; background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .15s, border-color .15s; overflow: hidden; }
.template-card:hover { border-color: #72bce9; background: #f3faff; }
.template-thumb { flex: 0 0 120px; width: 120px; height: 120px; display: block; background: #e9f5fc; }
.iq-template-svg { display: block; width: 100%; height: 100%; }
.template-card .template-copy { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 13px 14px 13px 18px; }
.template-copy h2 { font-size: 16px; font-weight: 400; line-height: 1.15; margin: 0; }
.template-copy p { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.35; color: #696969; }
.site-empty { grid-column: 1 / -1; padding: 50px 20px; text-align: center; color: #777; }
.site-empty h2 { font-weight: 400; color: #333; font-size: 20px; }
.site-empty p { font-size: 14px; }
.library-heading { display: flex; align-items: center; gap: 22px; min-height: 75px; padding: 19px 27px; border-bottom: 4px solid #d4e8f2; }
.library-heading h1 { font-size: 25px; font-weight: 600; letter-spacing: 0; margin: 0 auto 0 0; line-height: 1.25; }
.library-title { margin-right: auto; min-width: 0; }
.library-title h1 { overflow-wrap: anywhere; }
.library-tools { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.library-view-controls { display: flex; gap: 3px; }
.library-view-controls .site-button { width: 34px; padding: 0; color: #7895a6; }
.library-view-controls .site-button[aria-pressed=true] { color: #258fc9; border-color: #83b9da; background: #eaf6fc; }
.library-search { position: relative; width: 240px; }
.library-search .site-input { width: 100%; padding-right: 37px; }
.library-search > span { display: grid; place-items: center; position: absolute; right: 0; top: 0; width: 35px; height: 35px; border-left: 1px solid #c6c6c6; font-size: 24px; color: #333; pointer-events: none; }
.library-order-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 50px; padding: 12px 27px 7px; color: #555; font-size: 12px; }
.library-sort-options { display: flex; align-items: center; gap: 17px; }
.library-sort-options button { font: inherit; font-size: 12px; font-weight: 400; padding: 2px 0; border: none; background: none; color: #666; }
.library-sort-options button[aria-pressed=true] { color: #111; }
.library-sort-options button[aria-pressed=true]::after { content: " ▴"; }
.library-order-row .site-select { height: 29px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
.library-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 19px 15px; padding: 16px 27px 40px; align-content: start; }
.library-card { position: relative; min-width: 0; border: 1px solid #ccc; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.library-card:hover { border-color: #79bde5; }
.activity-thumb { display: block; width: 100%; aspect-ratio: 4/3; background: #d4eaf7; overflow: hidden; }
.activity-thumb svg, .activity-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.activity-details { padding: 8px 9px 28px; min-height: 81px; }
.activity-details h2 { margin: 0 0 5px; font-size: 15px; font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-details h2 a { color: #111; }
.activity-details h2 a:hover { color: #197cba; }
.activity-template-name { margin: 0; font-size: 11px; color: #888; line-height: 1.25; }
.activity-meta { position: absolute; bottom: 7px; left: 9px; right: 40px; margin: 0; font-size: 10px; font-weight: 400; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-menu { position: absolute; right: 3px; bottom: 4px; }
.activity-menu > summary { list-style: none; display: grid; place-items: center; width: 32px; height: 28px; border-left: 1px solid #eee; color: #555; cursor: pointer; font-size: 21px; line-height: 1; }
.activity-menu > summary::-webkit-details-marker { display: none; }
.activity-menu[open] > summary { color: #1887c8; background: #eef8ff; }
.activity-actions { position: absolute; z-index: 15; right: 0; top: 32px; width: 150px; display: flex; flex-direction: column; background: #fff; padding: 4px 0; border: 1px solid #bbb; box-shadow: 0 3px 12px rgba(0,0,0,.14); }
.activity-action { display: block; text-align: left; width: 100%; border: 0; background: #fff; font: inherit; font-size: 13px; font-weight: 400; color: #333; padding: 9px 14px; cursor: pointer; }
.activity-action:hover { color: #147bb9; background: #edf8ff; }
.activity-action.delete-action { color: #a04e49; border-top: 1px solid #eee; }
.folder-card { position: relative; align-self: start; min-height: 112px; margin-top: 8px; padding: 21px 18px 32px; border-radius: 0 4px 4px 4px; background: #8cc7e9; border-top: 7px solid #6dafd5; color: #111; box-shadow: inset 6px 0 #67afd8; }
.folder-card::before { content: ""; position: absolute; width: 38%; height: 9px; left: 0; top: -15px; border-radius: 6px 8px 0 0; background: #6dafd5; }
.folder-card h2 { font-size: 15px; font-weight: 400; margin: 0 0 7px; line-height: 1.2; overflow-wrap: anywhere; }
.folder-card p { margin: 0; font-size: 11px; color: #557c93; }
.folder-card .activity-menu > summary { border-left: 1px solid rgba(43,104,141,.2); }
.folder-open::after { content: ""; position: absolute; inset: 0; }
.folder-card .activity-menu { z-index: 3; }
.library-breadcrumb { color: #777; font-size: 12px; margin: 0 0 7px; }
.library-breadcrumb a { color: #333; }.library-breadcrumb span { padding: 0 10px; }
.folder-up { display: grid; place-items: center; min-height: 112px; padding: 14px; font-size: 35px; width: 145px; color: #579bbb; border: 0; font-weight: 400; }
.library-notice { padding: 16px 27px 0; font-size: 12px; color: #888; }
.library-notice a { color: #1789cb; }
.site-dialog { width: min(460px, calc(100vw - 32px)); border: 1px solid #bbb; background: #fff; color: #333; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.site-dialog::backdrop { background: rgba(30,55,75,.4); }
.site-dialog h2 { font-size: 21px; font-weight: 400; margin: 0 0 22px; }
.site-dialog label { display: block; color: #555; font-size: 13px; margin-bottom: 8px; }
.site-dialog .site-input, .site-dialog .site-select { width: 100%; }
.site-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.site-page .toast-msg { bottom: 25px; font-family: Arial, sans-serif; }
.library-list[data-view=list] { grid-template-columns: minmax(0, 1fr); }
.library-list[data-view=list] .library-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); max-width: none; }
.library-list[data-view=list] .activity-thumb { height: 96px; }
.library-list[data-view=list] .activity-details { padding: 17px 50px 27px 20px; min-height: 96px; }
.library-list[data-view=list] .activity-meta { left: 148px; bottom: 14px; }
.library-list[data-view=list] .folder-card { max-width: none; min-height: 90px; }
.site-footer { max-width: 1280px; margin: 0 auto; padding: 17px 0 24px; color: #7490a2; font-size: 10px; text-align: center; line-height: 1.5; }
.site-footer p { margin: 3px 0; }
@media (max-width: 1100px) {
  .template-grid { gap: 17px; padding: 24px; }.picker-toolbar { padding-left: 24px; padding-right: 24px; }
  .template-thumb { flex-basis: 105px; width: 105px; height: 120px; }.template-copy p { font-size: 12px; }.template-card .template-copy { padding-left: 13px; }
  .library-heading { flex-wrap: wrap; }.library-tools { flex: 1; }.library-heading h1 { font-size: 24px; }
  .library-search { width: 210px; }
}
@media (max-width: 900px) {
  .site-main { width: calc(100% - 40px); margin-top: 20px; }.template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-thumb { flex-basis: 120px; width: 120px; }.picker-steps, .picker-steps h1 { font-size: 18px; }.picker-steps { gap: 12px; }.compact-search { flex-basis: 180px; }
  .library-list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }.library-search { width: 180px; }.library-heading { gap: 15px; }
}
@media (max-width: 650px) {
  .site-header-inner { padding: 0 15px; gap: 12px; min-height: 51px; }.site-brand { font-size: 21px; }.site-nav { gap: 13px; }.site-nav a { font-size: 11px; }.site-create { font-size: 11px; padding: 6px 9px; }
  .site-main { width: calc(100% - 24px); margin-top: 14px; }.picker-toolbar { padding: 23px 17px 19px; flex-wrap: wrap; gap: 18px; }.picker-steps { gap: 11px; font-size: 16px; }.picker-steps h1 { font-size: 16px; }.step-chevron { font-size: 24px; }.compact-search { flex-basis: 100%; }
  .template-grid { padding: 19px 17px 30px; gap: 13px; grid-template-columns: minmax(0, 1fr); }.template-card .template-copy { padding-left: 18px; }.template-copy p { font-size: 13px; }
  .library-heading { padding: 17px; }.library-heading h1 { font-size: 23px; }.library-tools { justify-content: flex-start; flex-basis: 100%; }.library-search { flex: 1; width: auto; min-width: 130px; }
  .library-order-row { padding: 12px 17px; gap: 12px; flex-wrap: wrap; }.library-sort-options { gap: 11px; margin-left: auto; font-size: 11px; }.library-sort-options button { font-size: 11px; }
  .library-list { padding: 10px 17px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }.activity-details { padding: 8px 8px 29px; }.activity-details h2 { font-size: 13px; }.activity-template-name { font-size: 10px; }.activity-meta { font-size: 9px; left: 8px; }
  .folder-card { min-height: 100px; padding: 16px 12px 30px; }.folder-card h2 { font-size: 13px; }.folder-card p { font-size: 10px; }.folder-up { width: 100%; }
  .site-footer { padding: 15px 20px 20px; }
}
@media (max-width: 420px) {
  .site-nav a#templatesNav { display: none; }.site-header-inner { gap: 8px; }.site-nav { gap: 0; }
  .picker-steps, .picker-steps h1 { font-size: 14px; }.picker-steps { gap: 7px; }.step-chevron { font-size: 20px; }
  .template-thumb { flex-basis: 100px; width: 100px; }.template-card .template-copy { padding: 11px 10px 11px 12px; }.template-copy p { font-size: 12px; }
  .library-list { grid-template-columns: minmax(0, 1fr); }.library-card { max-width: 260px; width: 100%; }.folder-card { max-width: 260px; }.folder-up { width: 130px; }
}
@media (prefers-reduced-motion: reduce) { :where(:root:not([data-motion-managed])) .template-card { transition: none; } }/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .template-card { transition: none; }

/* Source: css/i18n.css; sha256: 3c91680235f6c98a8d1a3a41086bfcd5d9bb286e4a2903be12530d20a906ffdb */
.cp-language-switch{display:flex;align-items:center;flex:0 0 auto;border:1px solid #b8c6d0;border-radius:5px;overflow:hidden;background:#fff;margin-left:8px;align-self:center}
.cp-language-switch button{appearance:none;min-width:38px;border:0;background:transparent;color:#405766;padding:6px 8px;font:600 12px/1.25 "ClassPlay Round","PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer;white-space:nowrap;border-radius:0}
.cp-language-switch button+button{border-left:1px solid #d9e2e8}
.cp-language-switch button[aria-pressed=true]{background:#137fbb;color:#fff}
.cp-language-switch button:focus-visible{outline:2px solid #15334b;outline-offset:-3px}
/* The worksheet's language selector stays secondary to its print action. */
.site-page:is(.tools-page,.tracing-page) .cp-language-switch{border-color:#b8cad5;background:#fff}
.site-page:is(.tools-page,.tracing-page) .cp-language-switch button{color:#536775;font-family:inherit}
.site-page:is(.tools-page,.tracing-page) .cp-language-switch button[aria-pressed=true]{background:#eaf3f8;color:#176b9b}
.site-page:is(.tools-page,.tracing-page) .cp-language-switch button:focus-visible{outline-color:#176b9b}
html[lang=zh-CN] body{font-family:"ClassPlay Round","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
html[lang=zh-CN] .site-nav{gap:16px}
html[lang=zh-CN] .template-copy h2{line-height:1.5}
html[lang=zh-CN] .template-copy p{line-height:1.65}
html[lang=zh-CN] .editor-steps h1,html[lang=zh-CN] .picker-steps h1{white-space:nowrap}
html[lang=zh-CN] .setting-row label{line-height:1.6}
html[lang=zh-CN] .buzz-hint{line-height:1.65}
html[lang=zh-CN] .launch-button{letter-spacing:0}
@media(max-width:700px){.cp-language-switch{margin-left:auto}.cp-language-switch button{min-width:32px;padding:6px}.site-header-inner{flex-wrap:wrap}.site-header .site-nav{flex-shrink:1}html[lang=zh-CN] .site-nav{gap:12px}}
@media(max-width:400px){.site-header .site-create{padding:6px 8px}.cp-language-switch{margin-left:2px}.site-header-inner{gap:8px}}

/* Source: css/account-nav.css; sha256: e3dd40919766c8f09978cf43d47bafd54606775d5dbc83f88040be2734bd7e38 */
.cp-account-nav { position: relative; display: inline-flex; flex-shrink: 0; }
.cp-account-nav [hidden] { display: none !important; }
.cp-account-button, .cp-account-signin { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; padding: 4px 10px 4px 5px; border: 1px solid #c9d6de; border-radius: 4px; background: #fff; color: #263b48; font: 600 13px/1 "ClassPlay Round", Arial, sans-serif; white-space: nowrap; cursor: pointer; text-decoration: none; }
.cp-account-signin { padding: 4px 14px; }
.cp-account-button:hover, .cp-account-button[aria-expanded=true], .cp-account-signin:hover { background: #eef7fd; border-color: #8cc4e6; }
.cp-account-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.cp-account-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 4px; color: #fff; background: linear-gradient(135deg, #46b4f0, #2783c4); font-size: 14px; font-weight: 800; }
.cp-account-caret { width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid #445; border-bottom: 0; margin-top: 3px; }
.cp-account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 210px; padding: 6px 0; background: #fff; border: 1px solid #c9c9c9; border-radius: 4px; box-shadow: 0 8px 24px rgba(20,50,70,.2); }
.cp-account-menu button { display: block; width: 100%; padding: 10px 18px; border: 0; background: none; text-align: left; font: 500 14.5px/1.2 "ClassPlay Round", Arial, sans-serif; color: #222; cursor: pointer; }
.cp-account-menu button:hover, .cp-account-menu button:focus-visible { background: #e9f5fd; color: #1474b3; outline: none; }
.cp-account-menu button[data-account-action=logout] { border-top: 1px solid #eee; margin-top: 4px; padding-top: 12px; }
@media (max-width: 800px) { .site-header-inner { flex-wrap: wrap; gap: 10px; padding-top: 8px; padding-bottom: 8px; } .site-nav { gap: 14px; } .cp-account-label { max-width: 100px; } }
@media (max-width: 500px) { .cp-account-label { max-width: 70px; } .site-nav { margin-left: auto; } .cp-language-switch { margin-left: auto; } }

/* Public tools share teacher destinations without loading or requiring a cloud
   library. Only their explicitly marked headers use the mobile disclosure. */
.site-header .site-header-inner[data-teacher-nav] { position: relative; }
.site-header .site-header-inner[data-teacher-nav] .site-nav { margin-left: auto; gap: 4px; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a { display: flex; align-items: center; min-height: 44px; padding: 10px 11px; border: 0; border-radius: 9px; font: 700 14px/1.35 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--cp-muted, #526976); }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a:hover { color: var(--cp-action, #176b9b); background: #edf5f8; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a[aria-current] { color: var(--cp-action, #176b9b); background: #eaf3f7; box-shadow: inset 0 -2px #176b9b; }
.site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-teacher-account-link { display: none; }
.site-header .site-header-inner[data-teacher-nav] [hidden] { display: none !important; }
.cp-teacher-nav-toggle { align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 12px; background: #fff; border: 1px solid var(--cp-line, #d7e3e7); border-radius: 9px; color: var(--cp-ink, #183747); font: 700 13px/1.35 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; cursor: pointer; }
.cp-teacher-nav-toggle svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cp-teacher-nav-toggle:hover, .cp-teacher-nav-toggle[aria-expanded=true] { border-color: #83acbe; background: #edf5f8; }
@media (min-width: 961px) { .site-header .site-header-inner[data-teacher-nav] { gap: 14px; flex-wrap: nowrap; }.site-header .site-header-inner[data-teacher-nav] .cp-account-label { max-width: 120px; } }
@media (max-width: 960px) {
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 66px; padding: 10px 16px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { grid-column: 1; grid-row: 1; font-size: 24px; min-width: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch { grid-column: 2; grid-row: 1; margin: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button { min-width: 36px; min-height: 40px; padding: 6px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { display: inline-flex; grid-column: 3; grid-row: 1; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-nav { position: absolute; z-index: 90; top: calc(100% + 6px); left: 12px; right: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 5px; width: auto; min-height: 0; margin: 0; padding: 10px; border: 1px solid var(--cp-line, #d7e3e7); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px #15374724; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > a { justify-content: flex-start; min-height: 44px; padding: 10px 11px; white-space: normal; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-teacher-account-link { display: flex; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-nav { margin: 0; justify-self: end; max-width: 100%; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-signin { display: none; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-label { max-width: 74px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-button { min-height: 44px; max-width: 100%; gap: 5px; font-size: 12px; padding-right: 8px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-avatar { width: 24px; height: 24px; font-size: 12px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-account-menu { min-width: 210px; }
}
@media (max-width: 370px) { .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { font-size: 21px; }.cp-teacher-nav-toggle { padding: 9px; }.cp-teacher-nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ── One top bar for the whole site ───────────────────────────────────────────
   Every app and tool page uses this bar. The header says who it is for
   (data-audience: teacher or visitor; js/account-nav.js); links marked
   data-teacher-only or data-visitor-only follow it, so a parent on the tracing
   tool never meets "Class results", and a teacher never meets "Sign up".
   Order on wide screens: logo · links · New activity · account · language. */
.site-header .site-header-inner[data-teacher-nav]:not([data-audience=teacher]) [data-teacher-only],
.site-header .site-header-inner[data-teacher-nav]:not([data-audience=visitor]) [data-visitor-only] { display: none !important; }
.site-header .site-header-inner[data-teacher-nav] > .site-brand { order: 0; margin-right: auto; }
.site-header .site-header-inner[data-teacher-nav] > .cp-teacher-nav-toggle { order: 5; }
.site-header .site-header-inner[data-teacher-nav] > .site-nav { order: 1; margin-left: 0; }
.site-header .site-header-inner[data-teacher-nav] > .site-create { order: 2; }
.site-header .site-header-inner[data-teacher-nav] > .cp-account-nav { order: 3; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch { order: 4; }
.site-header .site-header-inner[data-teacher-nav] .site-logo { flex: none; }
.site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .cp-teacher-account-link { display: none !important; }
.site-header .site-header-inner[data-teacher-nav] .site-create { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 10px; white-space: nowrap; }
.site-create-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-nav { align-items: center; gap: 8px; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signin,
.site-header .site-header-inner[data-teacher-nav] .cp-account-signup { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 10px; font: 800 14px/1 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signin { background: #fff; border: 1px solid #c5d6d3; color: #173b43; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signin:hover { background: #f1f6f2; border-color: #9fbab3; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signup { background: #155f69; border: 1px solid #155f69; color: #fff; box-shadow: 0 3px 0 #0a424c; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-signup:hover { background: #114e57; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-nav [hidden] { display: none !important; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-button { min-height: 42px; border-radius: 10px; border-color: #c5d6d3; color: #173b43; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-button:hover,
.site-header .site-header-inner[data-teacher-nav] .cp-account-button[aria-expanded=true] { background: #f1f6f2; border-color: #9fbab3; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-avatar { border-radius: 8px; background: linear-gradient(135deg, #2f8a78, #155f69); }
.site-header .site-header-inner[data-teacher-nav] .cp-account-menu { border-radius: 12px; border-color: #d7e3e7; overflow: hidden; }
.site-header .site-header-inner[data-teacher-nav] .cp-account-menu button:hover,
.site-header .site-header-inner[data-teacher-nav] .cp-account-menu button:focus-visible { background: #eef5f1; color: #155f69; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch { margin-left: 0; border: 1px solid #c5d6d3; border-radius: 10px; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch button { min-height: 40px; min-width: 42px; font-weight: 700; color: #4e6265; }
.site-header .site-header-inner[data-teacher-nav] > .cp-language-switch button[aria-pressed=true] { background: #155f69; color: #fff; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a[aria-current] { color: #155f69; background: #edf4ef; box-shadow: inset 0 -2px #155f69; }
.site-header .site-header-inner[data-teacher-nav] .site-nav > a:hover { color: #155f69; background: #f1f6f2; }

@media (max-width: 960px) {
  /* One row: logo · ＋ · language · Menu. Everything else lives in the Menu. */
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { grid-template-columns: minmax(0, 1fr) auto auto auto; min-height: 64px; padding: 10px 16px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create { grid-column: 2; grid-row: 1; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch { grid-column: 3; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { grid-column: 4; border-radius: 10px; border-color: #c5d6d3; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { margin: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-nav { grid-template-columns: minmax(0, 1fr); padding: 8px; border-radius: 14px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > a { min-height: 48px; font-size: 15px; }
  /* Account sits at the foot of the menu: Log in and Sign up side by side, or the teacher's account button. */
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav { display: flex; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid #e3ebe6; justify-self: stretch; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signin,
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signup { display: inline-flex; flex: 1; min-height: 46px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signin[hidden],
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-signup[hidden] { display: none !important; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-button { flex: 1; justify-content: flex-start; min-height: 46px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced .site-nav > .cp-account-nav .cp-account-label { max-width: none; }
}
@media (max-width: 600px) {
  /* New activity becomes a ＋ button; the language switch shows only the other language. */
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create { width: 44px; min-height: 44px; padding: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create .site-create-icon { width: 22px; height: 22px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button[aria-pressed=true] { display: none; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button { min-width: 44px; min-height: 44px; border: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { width: 44px; padding: 0; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { font-size: 22px; }
}
.site-header .site-header-inner[data-teacher-nav] .site-nav > a { text-decoration: none; }

/* My library, always one tap away for teachers. On wide screens it is the first link
   in the bar; narrower than that it gets its own button beside ＋ instead of hiding
   in the Menu. */
.site-library-quick { display: none; }
.site-library-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; flex: none; }
@media (max-width: 960px) {
  .site-header .site-header-inner[data-teacher-nav][data-audience=teacher] > .site-library-quick { display: inline-flex; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick { grid-column: 2; grid-row: 1; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid #c5d6d3; border-radius: 10px; background: #fff; color: #173b43; font: 800 14px/1 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick:hover { background: #f1f6f2; border-color: #9fbab3; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick:focus-visible { outline: 3px solid #173b43; outline-offset: 2px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create { grid-column: 3; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch { grid-column: 4; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { grid-column: 5; }
}
@media (max-width: 600px) {
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick { width: 44px; padding: 0; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header .site-header-inner[data-teacher-nav] > .site-library-quick .site-library-icon { width: 22px; height: 22px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced { gap: 6px; padding: 10px 12px; }
}
@media (max-width: 380px) {
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-brand { font-size: 19px; gap: 6px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-library-quick,
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .site-create,
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-teacher-nav-toggle { width: 42px; min-height: 42px; }
  .site-header .site-header-inner[data-teacher-nav].teacher-nav-enhanced > .cp-language-switch button { min-width: 42px; min-height: 42px; }
}

/* Source: css/cloud-sync.css; sha256: 8c04204fdf98df43c56bb7e9cbceb42dd0b252d064db48730530d9e9f7fcba10 */
.cloud-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:0 0 14px;border:1px solid #bad6e5;border-radius:5px;background:#f3faff;color:#365464;font:13px/1.45 "ClassPlay Round",system-ui,sans-serif}.cloud-status[hidden]{display:none}.cloud-status[data-mode=saved]{background:#eef8f0;border-color:#badcc3;color:#2c613c}.cloud-status[data-mode=conflict],.cloud-status[data-mode=error],.cloud-status[data-mode=expired]{background:#fff8e8;border-color:#e7cd8b;color:#765217}.cloud-status>span{flex:1 1 320px}.cloud-action{border:1px solid currentColor;border-radius:4px;background:#fff;color:inherit;cursor:pointer;padding:5px 9px;font:inherit;white-space:normal}.cloud-action:hover{background:#e4f1fb}.cloud-action:focus-visible{outline:3px solid #138bca;outline-offset:2px}@media(max-width:600px){.cloud-status{margin:0 0 10px;padding:9px 10px;font-size:12px}.cloud-action{min-height:34px}}
/* Signed-in storage notices occupy their own rows above the player and sidebar. */
.resource-layout>.cloud-status,.resource-layout>.library-notice{grid-column:1/-1;align-self:start;min-width:0;margin:0}
@media(max-width:620px){.resource-layout>.cloud-status,.resource-layout>.library-notice{margin-bottom:10px}}

/* Update 1: on the player page, routine sync notices (checking, loading, saving, saved) keep one
   slim line of fixed height, so starting a game never moves the player. Warnings still expand. */
.resource-layout>.cloud-status.compact{height:30px;padding:0 12px;flex-wrap:nowrap;overflow:hidden;font-size:12.5px;line-height:30px}
.resource-layout>.cloud-status.compact>span{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:620px){.resource-layout>.cloud-status.compact{height:26px;line-height:26px;font-size:12px;margin-bottom:6px}}

/* Source: css/resource.css; sha256: 160d7a84db108a7afb1c7622b2570551ef668e276e9a30bcb20acd7f27413fe8 */
/* Resource page: an activity canvas, compact tools, and a template rail. */
body.resource-page{background:linear-gradient(#cce6f2,#e9f4f8 580px);color:#242424;font:15px Arial,sans-serif;margin:0;min-height:100vh}
.resource-page .site-header{height:64px;background:#fff;border-bottom:1px solid #d4dce0;display:flex;align-items:center;gap:20px;padding:0 28px}.resource-page .site-brand{display:flex;align-items:center;gap:7px;font-size:25px;font-weight:750;color:#30373c;text-decoration:none}.resource-page .brand-mark{color:#36a9e3;font-size:32px}.resource-page .site-tagline{font-size:12px;color:#666}.resource-page .site-header nav{margin-left:auto;display:flex;gap:22px;align-items:center}.resource-page .site-header nav a{color:#30373c;text-decoration:none;font-size:14px}.resource-page .site-header .site-create,.resource-primary{background:#39ace8!important;color:white!important;border:1px solid #289bd7!important;padding:9px 18px;border-radius:2px;cursor:pointer;font:inherit}
.resource-layout{max-width:1560px;margin:24px auto;display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:12px;padding:0 20px}.resource-main{min-width:0}.activity-player.game-shell{position:relative;container-type:inline-size;width:100%;max-width:none;height:auto;aspect-ratio:16/9;padding:0;margin:0;overflow:hidden;background:#133c64;color:#fff;font-family:Arial,sans-serif;border-radius:0;box-shadow:none}.activity-player:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:#153b62}.activity-player #screenPlay,.activity-player #gameStage{height:100%;width:100%;position:relative;min-height:0;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}.activity-player #gameStage{overflow:hidden;background:transparent}.activity-player .hud{position:absolute;inset:0 0 auto;z-index:8;background:linear-gradient(#0003,transparent);border:0;min-height:0;height:4.5cqw;display:flex;align-items:center;justify-content:center;padding:.6cqw 1cqw;color:inherit;pointer-events:none}.activity-player .hud .pill{background:none;border:0;border-radius:0;box-shadow:none;font-size:2.1cqw;padding:0}.activity-player #pScore{position:absolute;right:1cqw}.activity-player #pLives{position:absolute;left:1cqw}.activity-player[data-phase=start] .hud{display:none}.player-controls{position:absolute;inset:auto .7cqw .55cqw;z-index:20;display:flex;gap:1cqw;pointer-events:none}.player-controls span{flex:1}.player-controls button{pointer-events:auto;color:inherit;border:0;background:transparent;font-size:3.3cqw;line-height:1;padding:0 .3cqw;min-width:3cqw;cursor:pointer;opacity:.85}.player-controls button:hover{opacity:1}.player-controls #pauseBtn{font-size:2cqw;border-radius:50%;background:#fff;color:#333;width:3cqw;height:3cqw}
.player-start{position:absolute;inset:0;color:white;background:#0d171f}.start-artwork{position:absolute;inset:0;opacity:.28;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#227ec0,#071f3c)}.start-artwork>svg{height:100%;width:80%;filter:saturate(.95)}.start-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:4cqw 5cqw 7cqw;background:#0005}.start-template{font-size:2.2cqw}.start-content h1{font-size:4.4cqw;line-height:1.1;margin:3cqw 0 1cqw;font-weight:500;max-width:100%;overflow-wrap:anywhere}.start-actions{display:flex;gap:1.7cqw;margin:auto}.launch-button{width:13cqw;height:13cqw;display:flex;flex-direction:column;gap:1.2cqw;align-items:center;justify-content:center;background:#000c;border:1px solid #aaa;border-radius:4px;color:white;font-size:2cqw;cursor:pointer}.launch-button span{color:#40b5f0;font-size:4.5cqw;line-height:1}.launch-button:hover{background:#259bdccc}.start-content p{font-size:1.9cqw;line-height:1.4;margin:1cqw 0 0;max-width:84%;font-weight:400}
.player-end,.player-menu{position:absolute;inset:0;z-index:15;display:grid;place-items:center;background:#0009}.end-panel{width:34cqw;max-height:88%;overflow:auto;background:linear-gradient(#292929,#101010);border:1px solid #aaa;border-radius:4px;box-shadow:0 4px 15px #0008;color:white;padding:1.2cqw;text-align:center;font-size:1.6cqw}.end-panel h2{font-size:1.4cqw;text-transform:uppercase;font-weight:400;margin:0;padding:.3cqw 0 1cqw;border-bottom:1px solid #000}.end-panel>button,.end-panel>a{display:block;background:none;border:0;color:white;text-decoration:none;width:100%;padding:1cqw .3cqw;font:inherit;cursor:pointer}.end-panel>button:hover,.end-panel>a:hover{background:#279cdc}.end-summary{display:flex;justify-content:space-evenly;padding:1cqw}.end-summary span{color:#54bbf5;display:block}.end-summary strong{display:block;font-weight:400;font-size:3.4cqw;margin:.2cqw}.end-panel p{font-size:1.2cqw;margin:.6cqw 0}.end-panel .stat-row{font-size:1.2cqw;margin:0;justify-content:center}.end-panel .pill{background:transparent;border:0;padding:0 5px;color:#ccc;font:inherit}
.resource-details,.resource-options,.resource-sidebar section{background:white;border:1px solid #d4dadd;border-radius:2px}.resource-details{display:flex;flex-wrap:wrap;gap:12px;align-items:start;padding:22px 24px;min-height:116px}.resource-details h1{font-size:25px;font-weight:600;margin:0 0 12px}.resource-details p{font-size:13px;color:#777;margin:0}.resource-actions{margin-left:auto;display:flex;gap:15px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.resource-actions a,.resource-actions button:not(.resource-primary){font:13px Arial;color:#656565;background:none;border:0;text-decoration:none;padding:8px 0;cursor:pointer}.resource-actions .resource-primary{margin-right:6px}#imageCredits{width:100%;font-size:11px;color:#888}#imageCredits:empty{display:none}#imageCredits a{color:#777}
.resource-options{margin-top:12px;padding:0 22px 22px}.resource-tabs{display:flex;border-bottom:1px solid #ddd;gap:18px;padding-top:12px}.resource-tabs button{font:15px Arial;color:#555;border:0;border-bottom:2px solid transparent;background:none;padding:10px 0;cursor:pointer}.resource-tabs [aria-selected=true]{border-color:#42aee6;color:#222}.resource-options h2{font-size:17px;margin:25px 0}.resource-options .set-sec{font-weight:600;border-bottom:1px solid #e5e5e5;padding:16px 0 8px;margin:0 0 15px}.setting-row{display:flex;align-items:center;gap:16px;min-height:45px;max-width:700px;padding:4px 0}.setting-row>label:first-child{width:230px;font-size:14px}.setting-row input[type=range]{width:190px;accent-color:#40ace7}.setting-row input[type=checkbox]{width:17px;height:17px;accent-color:#40ace7}.setting-row select,.font-label+select{padding:7px;border:1px solid #ccc;background:white;color:#333;font:14px Arial;border-radius:0}.setting-row output{font-size:13px;color:#666}.settings-actions{display:flex;gap:12px;margin-top:25px}.settings-actions button:not(.resource-primary){padding:9px 15px;border:1px solid #ccc;background:#f6f6f6;color:#555;cursor:pointer}.resource-options .muted,#settingsNotice{font-size:13px;color:#777}.resource-sidebar section{padding:22px;margin-bottom:12px}.resource-sidebar h2{font-size:17px;font-weight:600;margin:0 0 15px}.template-switch,.style-switch{display:flex;align-items:center;gap:7px;width:100%;padding:4px;background:white;border:0;text-align:left;cursor:pointer;color:#333;font:13px Arial;min-height:54px}.template-switch svg{width:48px;height:48px;flex-shrink:0}.template-switch:hover,.style-switch:hover{background:#e8f5fd}.template-switch.selected,.style-switch.selected{background:#3cadea;color:white}.template-switch:disabled{opacity:.35;cursor:default}.style-preview{width:68px;height:47px;display:flex;align-items:center;justify-content:center;gap:3px;flex-shrink:0;border:1px solid #888;background:var(--sample-bg);overflow:hidden}.style-preview i{font-style:normal;font-size:14px;color:white;border:2px solid #fff8;background:var(--sample-accent);padding:5px 4px;box-shadow:1px 2px 0 #0006}.font-label{display:block;color:#999;text-transform:uppercase;font-size:11px;margin:25px 0 10px}.font-label+select{width:100%}.sidebar-note{font-size:11px;color:#777;line-height:1.4;margin:8px 0 0}.resource-options .lb{padding:0;max-width:800px;background:none;border:0;color:#333}.resource-options .lb ol{padding:0}.resource-options .lb li{display:flex;gap:15px;list-style:none;border-bottom:1px solid #ddd;padding:12px 5px}.resource-options .name-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.resource-options input[type=text],#nameInput{padding:9px;border:1px solid #ccc;font:inherit}.resource-options .review{color:#333;max-height:none}#shareDialog{width:min(520px,90vw);border:1px solid #aaa;border-radius:4px;padding:28px;color:#333}#shareDialog::backdrop{background:#0008}#shareDialog h2{margin:0 0 16px}#shareDialog p{line-height:1.5;color:#666}#shareDialog textarea{display:block;width:100%;margin:10px 0 16px;border:1px solid #ccc;padding:8px;box-sizing:border-box}.dialog-close{float:right;border:0;background:none;font-size:26px;cursor:pointer}.hidden{display:none!important}
@media(max-width:900px){.resource-layout{grid-template-columns:minmax(0,1fr) 180px;padding:0 10px;gap:9px;margin-top:12px}.resource-sidebar section{padding:12px}.resource-sidebar h2{font-size:15px}.template-switch{font-size:12px}.template-switch svg{width:36px;height:36px}.resource-details{padding:15px}.resource-details h1{font-size:21px}.resource-actions{margin-left:0}.style-preview{width:50px}.resource-page .site-tagline{display:none}}
@media(max-width:620px){.resource-layout{display:block;padding:0 7px;margin-top:8px}.resource-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.resource-page .site-header{height:56px;padding:0 12px;gap:10px}.resource-page .site-header nav{gap:12px}.resource-page .site-header nav a{font-size:12px}.resource-page .site-brand{font-size:21px}.resource-page .site-header .site-create{padding:8px}.resource-details{min-height:0}.resource-options{padding:0 14px 20px}.setting-row>label:first-child{width:42%}.setting-row input[type=range]{width:35%}.settings-actions{flex-wrap:wrap}.player-controls button{font-size:4.5cqw}.launch-button{width:16cqw;height:16cqw}.start-content p{font-size:2.5cqw}.end-panel{width:45cqw;font-size:2.4cqw}.end-panel h2,.end-panel p{font-size:2cqw}}
/* A tablet standing upright gives the game the full width; the play-another-way and world choices sit under the title, side by side. */
@media(min-width:621px) and (max-width:900px){.resource-layout{grid-template-columns:minmax(0,1fr)}.resource-main{display:contents}.resource-main>*{order:5;min-width:0}.resource-main>.classroom-status{order:0}.resource-main>.activity-player{order:1}.resource-main>.resource-details{order:2}.resource-sidebar{order:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:9px;align-items:start}#visualStyles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));column-gap:10px;align-content:start;max-height:330px}.resource-main>.resource-options{order:4;margin-top:0}.resource-sidebar>section{min-width:0}}
.activity-clock{position:absolute;left:1cqw;top:.7cqw;z-index:9;font-size:2cqw;line-height:1.3;color:inherit}.activity-player[data-paused=true] *{animation-play-state:paused!important}.player-controls #pMute{position:relative;display:grid;place-items:center}.player-controls #pMute svg{width:3cqw;height:3cqw}.mute-slash{position:absolute!important;width:3.2cqw;height:2px;background:currentColor;transform:rotate(-45deg);pointer-events:none}.activity-player[data-phase=start] .player-controls{color:white}.start-artwork>svg{width:100%;height:100%}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .activity-player *{animation-duration:.01ms!important;transition-duration:.01ms!important}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .activity-player *{animation-duration:.01ms!important;transition-duration:.01ms!important}

/* Shared player chrome stays legible over every game surface. */
.activity-player .hud{inset:0;height:100%;align-items:flex-start;background:none}.activity-player .hud .pill{color:inherit;font-weight:400}.activity-player #pCount{position:absolute;bottom:.8cqw;left:20%;right:20%;justify-content:center;font-size:2cqw}.activity-player #pScore,.activity-player #pLives{top:.7cqw}.activity-player #pLives:not(.hidden)~#pScore{top:.7cqw}.activity-player .activity-clock{left:1cqw}.activity-player:has(#pLives:not(.hidden)) .activity-clock{left:10cqw}.activity-player:is([data-game=wheel],[data-game=anagram],[data-game=groupsort]){color:#333}.activity-player #gameStage{font-family:inherit}.start-artwork .scene-title{display:none}.launch-button svg{width:4.5cqw;height:4.5cqw}.player-controls button>svg{width:2.8cqw;height:2.8cqw;display:block}.player-controls #pauseBtn{background:none;color:currentColor}.player-controls #pauseBtn svg circle{fill:currentColor}.player-controls #pauseBtn svg path{stroke:#435360}.activity-player:is([data-game=wheel],[data-game=anagram],[data-game=groupsort]) #pauseBtn svg path{stroke:#fff}


.game-intro{position:absolute;inset:0;z-index:10;background:#123e73}.game-intro>svg{width:100%;height:100%;display:block}.game-intro>button{position:absolute;right:2%;bottom:9%;border:1px solid #fff9;border-radius:2px;background:#0008;color:white;font:inherit;font-size:1.3cqw;padding:.5cqw 1cqw;cursor:pointer}


.resource-page .site-header{display:block;height:auto;padding:0}.resource-page .site-brand{font-size:24px;gap:5px}.resource-page .site-header nav a{font-size:13px}.resource-page .site-header .site-create{padding:7px 12px;font-size:13px}.resource-page .site-header nav{gap:25px}@media(max-width:620px){.resource-page .site-brand{font-size:21px}.resource-page .site-header nav{gap:12px}.resource-page .site-header nav a,.resource-page .site-header .site-create{font-size:12px}}


.activity-player[data-game=groupsort] #pCount{display:none}.activity-player[data-game=speakingcards] #pCount{top:.7cqw;bottom:auto}


@media(max-width:620px){.setting-row select{min-width:0;max-width:calc(58% - 16px)}.resource-sidebar>section{min-width:0}.resource-page .site-header nav{gap:8px}}


/* Update 1: pictures and recordings load before Play (play.js prepareMedia). */
#screenStart .start-loading{margin:1.4cqw auto 0;padding:.35em .9em;max-width:80%;border-radius:999px;background:#000a;color:#fff;font-size:clamp(12px,1.6cqw,18px);line-height:1.35;text-shadow:none}
#screenStart .start-loading[hidden]{display:none}
#screenStart .start-loading{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;border-radius:12px}
#screenStart .start-retry{min-height:44px;padding:8px 12px;border:1px solid #fff9;border-radius:8px;background:#fff;color:#193d46;font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer}
#screenStart .start-retry:hover{background:#e1f1ed}
#screenStart .start-retry:focus-visible{outline:3px solid #ffc95a;outline-offset:3px}
.activity-player[data-media-loading=true] .launch-button{opacity:.5;cursor:progress}
.activity-player[data-media-loading=true] .launch-button:hover{background:#000c}
/* Update 4: activity actions (Share · Edit · Print · More ▾). */
.resource-actions a,.resource-actions button:not(.resource-primary){display:inline-flex;align-items:center;gap:6px}
.resource-actions svg{flex:none}
.resource-more{position:relative;display:inline-flex}.resource-more[hidden]{display:none}
.resource-more-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:160px;padding:5px 0;background:#fff;border:1px solid #c9c9c9;border-radius:3px;box-shadow:0 6px 20px rgba(20,50,70,.18)}
.resource-more-menu[hidden]{display:none}
.resource-actions .resource-more-menu button{display:block;width:100%;padding:9px 16px!important;text-align:left;color:#222!important;font:14px Arial!important}
.resource-actions .resource-more-menu button:hover{background:#e9f5fd;color:#1474b3!important}
.resource-rename{width:420px;max-width:calc(100vw - 32px)}.resource-rename .site-input{width:100%}

/* Pick and talk keeps optional template/world browsing one clear action
   away from the activity, while preserving the selected world's full scene. */
.resource-layout.conversation-focus { grid-template-columns: minmax(0, 1fr); }
.resource-layout.conversation-focus > .resource-sidebar { display: none; }
.conversation-view-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}
.conversation-view-controls[hidden] { display: none; }
#conversationFocusBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #b9cecb;
  border-radius: 10px;
  background: #fff;
  color: #17494b;
  font: 800 14px/1.3 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}
#conversationFocusBtn:hover { background: #e4f0e9; }
#conversationFocusBtn:focus-visible { outline: 3px solid #17494b; outline-offset: 3px; }
@media (min-width: 621px) {
  /* Leave room for the page header, view switch and utility dock so the
     complete 16:9 activity remains visible in a typical desktop viewport. */
  .resource-layout.conversation-focus {
    max-width: min(1560px, calc((100svh - 212px) * 1.777778 + 40px));
  }
}
@media (min-width: 621px) and (max-width: 900px) {
  .resource-main > .conversation-view-controls { order: 0; }
}
@media (max-width: 620px) {
  .conversation-view-controls { margin-bottom: 8px; }
  #conversationFocusBtn { padding-inline: 12px; }
}
/* A note a game puts under one of its settings (js/play.js), such as a layout that would leave cards out of view on this screen. */
.setting-note{box-sizing:border-box;max-width:454px;margin:-2px 0 8px 246px;padding:6px 10px;border-left:3px solid #e8a21a;border-radius:4px;background:#fff6dc;color:#4f3a00;font:13px/1.45 Arial,sans-serif}.setting-note[hidden]{display:none}
@media(max-width:620px){.setting-note{max-width:none;margin-left:0}}

/* Source: css/gameplay.css; sha256: bf64ef412cebd8990b0fdba3f89b00626e58a64043443e2f87c392b1002f6c29 */
/* Activity-specific gameplay. The authoring pages retain their own stylesheet. */
.activity-player {
  container-type: inline-size;
  --game-blue: #1761a8;
  --game-yellow: #fff000;
  --game-ink: #143c62;
}
.activity-player #screenPlay { height: 100%; }
.activity-player #gameStage {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 5.5% 5% 6%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
.activity-player button { font-family: inherit; }
.activity-player #gameStage strong { font-weight: 900; }
.activity-player .gprompt {
  margin: 0 0 2%;
  font-size: clamp(12px, 2.5cqw, 34px);
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.activity-player .buzz-hint { font-size: clamp(10px, 1.35cqw, 18px); color: #fff; }
.activity-player .next-row { margin: 2% 0 0; gap: 1.5cqw; }
.activity-player .btn {
  border-radius: 3px;
  border: 2px solid rgba(255,255,255,.75);
  background: #1681d9;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  color: #fff;
  padding: .7cqw 1.8cqw;
  min-height: 0;
  font-size: clamp(11px, 1.8cqw, 25px);
  font-weight: 600;
}
.activity-player .btn.ghost { background: rgba(0,37,81,.45); color: #fff; }
.activity-player .btn.green { background: #278b35; }
.activity-player .answer-choice { position: relative; min-width: 0; }
.activity-player .answer-choice > .opt,
.activity-player .answer-choice > .gs-opt { width: 100%; height: 100%; margin: 0; }
.activity-player .answer-content { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: center; gap: 1cqw; }
.activity-player .answer-picture { display: block; object-fit: contain; max-width: 100%; }
.activity-player .answer-audio {
  position: absolute;
  right: .5cqw;
  bottom: .5cqw;
  display: grid;
  place-items: center;
  width: 3.3cqw;
  height: 3.3cqw;
  min-width: 24px;
  min-height: 24px;
  border: 1px solid rgba(255,255,255,.5);
  background: #0962ac;
  color: #fff;
  padding: .5cqw;
  border-radius: 3px;
}
.activity-player .answer-audio svg { width: 100%; height: 100%; fill: currentColor; }
.activity-player .answer-audio svg path { stroke: currentColor; stroke-width: 1.5; }
.activity-player .gspeak {
  width: 4.7cqw;
  height: 3.8cqw;
  min-width: 27px;
  min-height: 23px;
  border: 0;
  border-radius: 0;
  padding: .6cqw;
  background: #cf0064;
  box-shadow: none;
  font-size: clamp(15px, 2.7cqw, 36px);
}
.activity-player .gspeak svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.activity-player .gmodal {
  z-index: 15;
  position: absolute;
  inset: 0;
  border-radius: 0;
  padding: 3%;
}
.activity-player .gmodal .box {
  max-height: 100%;
  width: min(78%, 780px);
  border-radius: 4px;
  padding: 3cqw;
  font-size: clamp(12px, 2cqw, 27px);
  overflow: auto;
}
.activity-player .gmodal h3 { font-size: clamp(17px, 3.2cqw, 44px); line-height: 1.2; }
.activity-player .game-clock { font-size: clamp(11px, 1.8cqw, 24px); }

/* Quiz show: stage rays, large question and framed choices. */
.activity-player[data-game="gameshow"] {
  background:
    radial-gradient(ellipse at center, rgba(10,181,214,.66), transparent 56%),
    repeating-conic-gradient(from 3deg at 50% 56%, #1f539b 0deg 8deg, #214682 8deg 15deg);
}
.activity-player[data-game="gameshow"] #gameStage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  padding: 6% 7% 7%;
}
.activity-player[data-game="gameshow"] .gspeak { position: static; flex: 0 0 auto; }
.activity-player[data-game="gameshow"] .gs-head {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}
.activity-player[data-game="gameshow"] .gs-q {
  flex: 0 1 auto;
  max-width: 84%;
  min-height: 0;
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(22px, 5.4cqw, 82px);
  line-height: 1.14;
  font-weight: 900;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: .16cqw #050b12;
  paint-order: stroke fill;
  text-shadow: .14cqw .16cqw 0 #050b12;
}
.activity-player[data-game="gameshow"] .gs-timer {
  position: absolute;
  top: 6%;
  right: 3%;
  width: 5.5cqw;
  height: 5.5cqw;
  flex-basis: auto;
  padding: .35cqw;
}
.activity-player[data-game="gameshow"] .gs-timer b { font-size: clamp(12px, 2.1cqw, 30px); }
.activity-player[data-game="gameshow"] .gs-lifelines {
  position: absolute;
  top: 6%;
  left: 3%;
  display: flex;
  gap: .6cqw;
  margin: 0;
  z-index: 2;
}
.activity-player[data-game="gameshow"] .gs-life {
  border-radius: 3px;
  padding: .55cqw .85cqw;
  min-height: 0;
  font-size: clamp(9px, 1.25cqw, 17px);
  color: #fff;
  border: 1px solid #fbbbdf;
  background: #aa0055;
  box-shadow: none;
}
.activity-player[data-game="gameshow"] .gs-img { max-width: 37%; max-height: 14cqw; width: auto; margin: 0; border-radius: 0; object-fit: contain; }
.activity-player[data-game="gameshow"] .gs-opts {
  display: grid;
  width: 78%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.7cqw;
  margin: 0;
}
.activity-player[data-game="gameshow"] .gs-opts[data-count="2"] { width: 44%; }
.activity-player[data-game="gameshow"] .gs-opt {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  min-height: 7.3cqw;
  padding: 1cqw;
  border: .45cqw solid var(--game-yellow);
  border-radius: 0;
  color: #fff;
  background: rgba(0,20,38,.72);
  box-shadow: none;
  font-size: clamp(15px, 2.7cqw, 39px);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
}
.activity-player[data-game="gameshow"] .gs-opt .k {
  background: transparent;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  color: #eed000;
  border-radius: 0;
  font-size: clamp(15px, 2.4cqw, 35px);
  font-weight: 900;
}
.activity-player[data-game="gameshow"] .gs-opt.has-picture { flex-direction: column; min-height: 13cqw; gap: .5cqw; }
.activity-player[data-game="gameshow"] .gs-opt.has-picture .answer-content { flex-direction: column; }
.activity-player[data-game="gameshow"] .gs-opt .answer-picture { width: 100%; max-height: 8.5cqw; }
.activity-player[data-game="gameshow"] .gs-opts[data-count="4"] .gs-opt.has-picture { min-height: 10cqw; padding: .5cqw; }
.activity-player[data-game="gameshow"] .gs-opts[data-count="4"] .gs-opt.has-picture .answer-picture { max-height: 5.5cqw; }
.activity-player[data-game="gameshow"] #gameStage[data-answer-count="5"] .gs-q,
.activity-player[data-game="gameshow"] #gameStage[data-answer-count="6"] .gs-q { font-size: 3.8cqw; }
.activity-player[data-game="gameshow"] .gs-opts[data-count="5"] .gs-opt,
.activity-player[data-game="gameshow"] .gs-opts[data-count="6"] .gs-opt { min-height: 7cqw; font-size: 2cqw; padding: .4cqw; }
.activity-player[data-game="gameshow"] .gs-opts[data-count="5"] .gs-opt.has-picture,
.activity-player[data-game="gameshow"] .gs-opts[data-count="6"] .gs-opt.has-picture { min-height: 7.8cqw; }
.activity-player[data-game="gameshow"] .gs-opts[data-count="5"] .answer-picture,
.activity-player[data-game="gameshow"] .gs-opts[data-count="6"] .answer-picture { max-height: 3.8cqw; }
.activity-player[data-game="gameshow"] .gs-opt.correct { border-color: #39ed67; background: #13522d; outline: 0; }
.activity-player[data-game="gameshow"] .gs-opt.wrong { border-color: #f22d47; background: #801c2d; opacity: 1; }
.activity-player[data-game="gameshow"] .gs-streak { font-size: clamp(11px, 1.9cqw, 26px); margin: 0; min-height: 2.2cqw; font-weight: 700; }
.activity-player[data-game="gameshow"] .gs-bonus-banner { position: absolute; z-index: 12; inset: 0; background: rgba(4,26,61,.96); border-radius: 0; }
.activity-player[data-game="gameshow"] .gs-bonus-banner .inner { width: 80%; padding: 3cqw; text-align: center; }
.activity-player[data-game="gameshow"] .gs-bonus-banner h2 { font-size: 4cqw; color: #ffe500; }
.activity-player[data-game="gameshow"] .gs-bonus-banner p { font-size: 2cqw; }
.activity-player[data-game="gameshow"] .gs-bonus-choices .btn { width: 12cqw; height: 15cqw; background: #ce0068; border: .4cqw solid #ffe700; font-size: 4cqw; }

/* What's inside? (openbox): a numbered door opens to a question and its answer column. */
/* What's inside? (openbox): the whole deck fits the board; a chosen tile grows to reading size. */

/* Classic wheel: left pointer, a white centre, and a full-word result. */
.activity-player[data-game="wheel"] { background: #fff; color: #222; }
.activity-player[data-game="wheel"] #gameStage { padding: 4% 5% 6%; color: #222; }
.activity-player[data-game="wheel"] .gprompt { color: #555; font-size: 1.6cqw; margin: 0; height: 2.5cqw; }
.activity-player[data-game="wheel"] .wheel-area { height: calc(100% - 2.5cqw); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.7cqw; }
.activity-player[data-game="wheel"] .wheel-frame { position: relative; width: 37cqw; height: 37cqw; margin: 0; flex: 0 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .2cqw #ddd, 0 0 0 .7cqw #fafafa, 0 0 1.6cqw .6cqw #eee; }
.activity-player[data-game="wheel"] canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.activity-player[data-game="wheel"] canvas:active { cursor: grabbing; }
.activity-player[data-game="wheel"] .wheel-pointer { top: 50%; left: -6cqw; right: auto; width: 4.3cqw; height: 4.3cqw; transform: translateY(-50%); background: #aeb2b5; border: 0; filter: none; clip-path: polygon(0 25%, 45% 25%, 45% 0, 100% 50%, 45% 100%, 45% 75%, 0 75%); }
.activity-player[data-game="wheel"] .wheel-pointer::after { content: ''; position: absolute; inset: .15cqw; background: #ededed; clip-path: inherit; }
.activity-player[data-game="wheel"] .wheel-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 6.2cqw; height: 6.2cqw; border: .4cqw solid #fff; border-radius: 50%; background: #fff; box-shadow: inset 0 0 .45cqw #aaa, 0 0 0 .13cqw #b7b7b7; padding: 0; }
.activity-player[data-game="wheel"] .next-row { margin: 0; }
.activity-player[data-game="wheel"] .btn { color: #333; background: linear-gradient(#fff, #f8f8f8); border: 1px solid #bbb; box-shadow: none; padding: .55cqw 2.8cqw; font-size: 1.8cqw; font-weight: 400; }
.activity-player[data-game="wheel"] #finishBtn { position: absolute; right: 1.8%; bottom: 6%; font-size: 1.2cqw; padding: .35cqw .8cqw; opacity: .65; }
.activity-player[data-game="wheel"] .wheel-picked { background: #fff; padding: 5% 8% 7%; }
.activity-player[data-game="wheel"] .wheel-result { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3cqw; padding: 0; width: 100%; height: 100%; box-shadow: none; background: none; overflow: visible; }
.activity-player[data-game="wheel"] .wheel-result-segment { min-height: 25cqw; width: 72%; padding: 3cqw; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2cqw; color: #fff; background: var(--selected-color); border: .4cqw solid #fff; box-shadow: 0 0 0 .15cqw #ccc; border-radius: 2cqw; animation: wheel-winner-in .45s cubic-bezier(.18,.85,.28,1.13); }
.activity-player[data-game="wheel"] .wheel-picked-label { font-size: clamp(23px, 5cqw, 72px); line-height: 1.15; text-align: center; }
.activity-player[data-game="wheel"] .wheel-result-segment img { max-height: 18cqw; max-width: 85%; object-fit: contain; border-radius: 0; }
.activity-player[data-game="wheel"] .wheel-result-actions { display: flex; gap: 1.7cqw; flex-wrap: wrap; justify-content: center; }
.activity-player[data-game="wheel"] .wheel-listen { display: flex; align-items: center; gap: .7cqw; }
.activity-player[data-game="wheel"] .wheel-listen svg { display: block; width: 2cqw; height: 2cqw; fill: currentColor; }
@keyframes wheel-winner-in { from { opacity: .2; transform: scale(.15) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

/* Picture reveal: the picture under bubble wrap, beside its "I know it!" button
   (js/games/imagequiz.js and css/imagequiz.css). */
.activity-player[data-game="imagequiz"] {
  background: radial-gradient(ellipse at 50% 42%, #2b7f93, #10394d 72%);
}
.activity-player[data-game="imagequiz"] #gameStage { padding: 3% 5% 7%; }
.activity-player[data-game="imagequiz"] #iqText { margin: 0 0 1%; height: 6.5cqw; font-size: clamp(19px, 5.1cqw, 76px); font-weight: 900; line-height: 1.1; -webkit-text-stroke: .17cqw #090d16; paint-order: stroke fill; text-shadow: .13cqw .18cqw 0 #090d16; }
.activity-player[data-game="imagequiz"] .reveal-wrap { display: block; width: 100%; max-width: none; margin: 0; height: 34cqw; }
.activity-player[data-game="imagequiz"] .pic { width: 60cqw; height: 33.75cqw; min-height: 0; max-height: none; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.activity-player[data-game="imagequiz"] .pic img { display: block; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: contain; }
.activity-player[data-game="imagequiz"] .iq-know { position: absolute; left: 0; right: 0; bottom: 4.2cqw; z-index: 3; display: flex; align-items: center; flex-direction: column; }
.activity-player[data-game="imagequiz"] #iqHint,
.activity-player[data-game="imagequiz"] #iqBar,
.activity-player[data-game="imagequiz"] #iqStatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.activity-player[data-game="imagequiz"] .iq-countdown { position: absolute; top: .7%; left: .7%; z-index: 4; color: #fff; font-size: 2cqw; }
.activity-player[data-game="imagequiz"] .gspeak { position: absolute; top: 3%; left: 5%; }
.activity-player[data-game="imagequiz"] .options { position: absolute; left: 16%; right: 16%; top: 19%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: auto; max-width: none; gap: 2.6cqw; margin: 0; }
.activity-player[data-game="imagequiz"] .opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 18cqw; padding: 3.4cqw 1cqw 1.8cqw; border: .45cqw solid #ffffff; border-radius: 1.2cqw; box-shadow: 0 .45cqw 0 #062433; color: #ffffff; background: rgba(6,34,52,.78); font-size: clamp(19px,4.2cqw,65px); font-weight: 600; line-height: 1.15; text-align: center; }
.activity-player[data-game="imagequiz"] .opt .k { position: absolute; top: .7cqw; left: 0; right: 0; width: auto; height: auto; background: none; color: #8fe6ff; border-radius: 0; font-size: 2.5cqw; font-weight: 800; }
.activity-player[data-game="imagequiz"] .opt .answer-content { flex-direction: column; }
.activity-player[data-game="imagequiz"] .opt .answer-picture { height: 9cqw; max-width: 100%; }
.activity-player[data-game="imagequiz"] .opt.correct { border-color: #4be66d; background: #17492c; color: #fff; outline: 0; }
.activity-player[data-game="imagequiz"] .opt.wrong { border-color: #ed3746; background: #7b1c31; opacity: .55; }
.activity-player[data-game="imagequiz"] .options[data-count="3"] .opt,
.activity-player[data-game="imagequiz"] .options[data-count="4"] .opt { min-height: 0; height: 12cqw; font-size: 3.1cqw; padding-top: 2.5cqw; }
.activity-player[data-game="imagequiz"] .options[data-count="3"] .answer-picture,
.activity-player[data-game="imagequiz"] .options[data-count="4"] .answer-picture { height: 5.5cqw; }
.activity-player[data-game="imagequiz"] .options[data-count="5"] .opt,
.activity-player[data-game="imagequiz"] .options[data-count="6"] .opt { min-height: 0; height: 8.5cqw; font-size: 2cqw; padding: 1.7cqw .7cqw .5cqw; border-width: .4cqw; }
.activity-player[data-game="imagequiz"] .options[data-count="5"],
.activity-player[data-game="imagequiz"] .options[data-count="6"] { top: 12%; gap: 1.5cqw; }
.activity-player[data-game="imagequiz"] .options[data-count="5"] .k,
.activity-player[data-game="imagequiz"] .options[data-count="6"] .k { font-size: 1.7cqw; top: .3cqw; }
.activity-player[data-game="imagequiz"] .options[data-count="5"] .answer-picture,
.activity-player[data-game="imagequiz"] .options[data-count="6"] .answer-picture { height: 3cqw; }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="answer"] #iqText,
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="locked"] #iqText,
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="answer"] .pic,
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="locked"] .pic,
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="answer"] .iq-countdown,
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="locked"] .iq-countdown,
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="answer"] .gspeak,
.activity-player[data-game="imagequiz"] #gameStage[data-layout="separate"][data-game-phase="locked"] .gspeak { display: none; }
.activity-player[data-game="imagequiz"] #iqNextRow { position: absolute; right: 3%; bottom: 7%; z-index: 5; }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"] .pic { width: 44cqw; height: 24.75cqw; margin: 4cqw 0 0; }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"] .options { left: 53%; right: 5%; top: 22%; gap: 1cqw; }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"] .opt { min-height: 10cqw; font-size: 2.4cqw; padding-top: 2cqw; }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"] .opt .k { top: .35cqw; font-size: 1.5cqw; }

/* A sparse same-page body can grow without changing the question or reveal grid. */
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"][data-adaptive-body="yes"] .reveal-wrap { height: var(--iq-body-height); }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"][data-adaptive-body="yes"] .pic { width: 57cqw; height: var(--iq-body-height); }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"][data-adaptive-body="yes"] .options { left: 66%; top: var(--iq-answer-top); }
.activity-player[data-game="imagequiz"] #gameStage[data-layout="together"][data-adaptive-body="yes"] .opt { min-height: var(--iq-answer-height); }

/* Classic anagram: picture clue beside a bank of beveled letter tiles. */
.activity-player[data-game="anagram"] { background: #fff; color: #222; }
.activity-player[data-game="anagram"] #gameStage { padding: 6.2% 7% 8%; color: #222; }
.activity-player[data-game="anagram"] .ag-clue { position: absolute; top: 4%; left: 9%; right: 9%; margin: 0; font-size: 2.3cqw; color: #333; text-align: center; }
.activity-player[data-game="anagram"] .ag-layout { --puzzle-width: 77cqw; display: flex; align-items: center; justify-content: center; gap: 6cqw; width: 100%; height: 100%; }
.activity-player[data-game="anagram"] .ag-layout.has-picture { --puzzle-width: 43cqw; justify-content: space-between; }
.activity-player[data-game="anagram"] #agImage { max-width: none; width: 33cqw; max-height: 43cqw; height: 100%; object-fit: contain; margin: 0; border-radius: 0; flex: 0 0 33cqw; }
.activity-player[data-game="anagram"] .ag-puzzle { --letter-size: min(8.5cqw, calc((var(--puzzle-width) - 2cqw) / var(--letter-count) - .8cqw)); width: var(--puzzle-width); display: flex; flex-direction: column; align-items: center; gap: .7cqw; }
.activity-player[data-game="anagram"] .ag-instruction { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.activity-player[data-game="anagram"] .ag-row { display: flex; align-items: center; justify-content: center; gap: .7cqw; flex-wrap: nowrap; margin: 0; width: 100%; }
.activity-player[data-game="anagram"] .ag-row { flex-wrap: wrap; }
.activity-player[data-game="anagram"] .ag-word-group { display: flex; flex-wrap: wrap; justify-content: center; gap: .7cqw; max-width: 100%; }
.activity-player[data-game="anagram"] .ag-puzzle { --letter-size: max(2.5cqw,min(8.5cqw, calc((var(--puzzle-width) - 2cqw) / var(--letter-count) - .8cqw))); }
.activity-player[data-game="anagram"] .ag-tile,
.activity-player[data-game="anagram"] .ag-slot { position: relative; width: var(--letter-size); height: var(--letter-size); min-width: 0; min-height: 0; flex: 0 0 var(--letter-size); padding: 0; border-radius: .15cqw; font: 400 clamp(14px,calc(var(--letter-size) * .67),80px)/1 Arial,sans-serif; color: #fff; border: .25cqw solid #909090; background: linear-gradient(#656565 57%, #5d5d5d 57%); box-shadow: inset .12cqw .12cqw 0 #a6a6a6, inset -.12cqw -.12cqw 0 #4d4d4d, 0 .2cqw .25cqw #0002; }
.activity-player[data-game="anagram"] .ag-tile:hover { filter: brightness(1.08); transform: translateY(-.3cqw); }
.activity-player[data-game="anagram"] .ag-tile.used { visibility: hidden; opacity: 0; }
.activity-player[data-game="anagram"] .ag-slots { width: max-content; max-width: 100%; padding: .6cqw; border: .13cqw solid #888; border-radius: .7cqw; background: #fff; min-height: calc(var(--letter-size) + 1.2cqw); }
.activity-player[data-game="anagram"] .ag-slot:not(.filled) { background: #fff; box-shadow: none; border: 0; }
.activity-player[data-game="anagram"] .ag-slot:not(.filled)::after { content: ''; position: absolute; bottom: .7cqw; left: 8%; right: 8%; height: .55cqw; background: #dedede; }
.activity-player[data-game="anagram"] .ag-slot.right { color: #fff; background: linear-gradient(#37a7e6 58%,#2e99d5 58%); border-color: #4ab9f5; box-shadow: inset .12cqw .12cqw 0 #79cffa, inset -.12cqw -.12cqw 0 #2888c1, 0 .2cqw .3cqw #0003; }
.activity-player[data-game="anagram"] .ag-slot.fixed { border: 0; background: none; box-shadow: none; color: #333; }
.activity-player[data-game="anagram"] .ag-slot.fixed.space { width: calc(var(--letter-size) * .45); flex-basis: calc(var(--letter-size) * .45); }
.activity-player[data-game="anagram"] .ag-type { color: inherit; background: transparent; border: 0; padding: 0; line-height: 1; font-size: 2.7cqw; cursor: pointer; }
.activity-player[data-game="anagram"] .ag-type svg { display: block; width: 2.7cqw; height: 2cqw; min-width: 18px; min-height: 14px; }
.activity-player[data-game="anagram"] .ag-keyboard { position: absolute; left: 50%; bottom: 9%; width: 1px; height: 1px; border: 0; padding: 0; opacity: .01; font-size: 16px; }
.activity-player[data-game="anagram"] .ag-letter-check { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: calc(var(--letter-size) * 1.12); font-weight: 900; -webkit-text-stroke: .12cqw #33526a; paint-order: stroke fill; animation: ag-check-in .6s ease-out; }
.activity-player[data-game="anagram"] .ag-letter-check { pointer-events: none; }
.activity-player[data-game="anagram"] .ag-next-row { margin: 1.7cqw 0 0; min-height: 3cqw; }
.activity-player[data-game="anagram"] .btn { background: #fafafa; border: 1px solid #aaa; color: #333; box-shadow: none; font-size: 1.6cqw; padding: .5cqw 2cqw; font-weight: 400; }
.activity-player[data-game="anagram"] .ag-nav { position: absolute; bottom: 1%; left: 0; right: 0; display: flex; gap: .6cqw; align-items: center; justify-content: center; font-size: 2cqw; color: #222; }
.activity-player[data-game="anagram"] .ag-nav button { padding: 0; border: 0; background: none; color: #444; font-size: 3cqw; line-height: 1; cursor: pointer; }
.activity-player[data-game="anagram"] #pCount { visibility: hidden; }
.activity-player[data-game="anagram"] .ag-voice { position: absolute; top: 4.5%; right: 5%; background: #555; }
.activity-player[data-game="anagram"] .ag-tile,
.activity-player[data-game="anagram"] .ag-slot { font-weight: var(--anagram-weight,400); }
.activity-player[data-game="anagram"] #gameStage[data-layout="rearrange"] .ag-slots { padding: 1cqw; gap: 1cqw; }
@keyframes ag-check-in { from { opacity: 0; transform: scale(2.4) rotate(-20deg); } 25% { opacity: 1; transform: scale(1.12); } 75% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.8); } }

/* Category sort: a compact card tray beside outlined group slots. */
.activity-player[data-game="groupsort"] { background: #fff; color: #222; }
.activity-player[data-game="groupsort"] #gameStage { padding: 8% 1.5% 8%; color: #222; }
.activity-player[data-game="groupsort"] .sort-layout { --sort-card-width: calc((36cqw - .5cqw * (var(--bank-columns) - 1)) / var(--bank-columns)); display: grid; grid-template-columns: 37cqw minmax(0,1fr); gap: 2.4cqw; align-items: start; height: 100%; width: 100%; }
.activity-player[data-game="groupsort"] .sort-deck { display: grid; grid-template-columns: repeat(var(--bank-columns),minmax(0,1fr)); grid-auto-rows: max-content; align-content: start; justify-content: start; gap: .5cqw; margin: 0; padding: .4cqw; border: .1cqw solid #a8a8a8; border-radius: .3cqw; background: #fff; min-height: 10cqw; max-height: 100%; overflow: auto; }
.activity-player[data-game="groupsort"] .sort-cols { display: grid; grid-template-columns: repeat(var(--group-count),minmax(0,1fr)); gap: 2cqw; margin: 0; height: 100%; }
.activity-player[data-game="groupsort"] .sort-col { min-height: 0; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; }
.activity-player[data-game="groupsort"] .sort-col.over { outline: .2cqw solid #4cacdf; outline-offset: .3cqw; background: #ecf8ff; }
.activity-player[data-game="groupsort"] .sort-heading { display: flex; align-items: center; justify-content: center; gap: 1.3cqw; margin: 0 0 .7cqw; min-height: 3.3cqw; }
.activity-player[data-game="groupsort"] .sort-heading img { width: 8.5cqw; height: 8.5cqw; object-fit: contain; }
.activity-player[data-game="groupsort"] .sort-heading h4 { background: none; color: #111; padding: 0; margin: 0; font-size: clamp(11px,2.2cqw,32px); font-weight: 400; text-align: center; }
.activity-player[data-game="groupsort"] .pile { display: grid; grid-template-columns: repeat(var(--group-columns),minmax(0,1fr)); grid-auto-rows: max-content; align-content: start; gap: .7cqw; min-height: 0; padding: 0; overflow: auto; }
.activity-player[data-game="groupsort"] .sort-card,
.activity-player[data-game="groupsort"] .sort-empty-slot { box-sizing: border-box; width: var(--sort-card-width); min-width: 0; height: calc(var(--sort-card-width) * 1.15); min-height: 0; flex: none; border-radius: .12cqw; }
.activity-player[data-game="groupsort"] .sort-card { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .35cqw; padding: .4cqw; margin: 0; color: #fff; border: .2cqw solid #ffffff66; background: var(--card-color); box-shadow: inset 0 .2cqw .2cqw #ffffff22, 0 .2cqw .2cqw #0002; cursor: grab; font-size: clamp(9px,calc(var(--sort-card-width) * .22),23px); font-weight: 400; line-height: 1.1; transition: transform .14s, box-shadow .14s; }
.activity-player[data-game="groupsort"] .sort-card { touch-action: none; user-select: none; -webkit-user-select: none; }
.activity-player[data-game="groupsort"] .sort-card.dragging { opacity: .22; transform: none; }
.activity-player[data-game="groupsort"] .sort-card.sort-drag-ghost { position: absolute; pointer-events: none; z-index: 30; margin: 0; transform: rotate(-3deg) scale(1.06); box-shadow: 0 .7cqw 1cqw #0005; opacity: .98; }
.activity-player[data-game="groupsort"] .sort-card.has-picture { height: calc(var(--sort-card-width) * 1.6); }
.activity-player[data-game="groupsort"] .sort-card:hover { transform: translateY(-.3cqw); box-shadow: 0 .5cqw .45cqw #0003; }
.activity-player[data-game="groupsort"] .sort-card[aria-pressed="true"] { outline: .3cqw solid #ffbd13; outline-offset: .1cqw; }
.activity-player[data-game="groupsort"] .sort-card.in-col { padding: .4cqw; width: var(--sort-card-width); }
/* Ordinary vocabulary reserves one stable row height for the original tray.
   Photos, audio and longer reading cards retain their larger surfaces. */
#activityPlayer[data-game="groupsort"] #gameStage .sort-layout[data-compact-words="true"] :is(.sort-card,.sort-empty-slot) {
  width:min(100%,var(--sort-compact-width,100%))!important;justify-self:center;
  height:var(--sort-compact-height,calc(var(--sort-card-width) * 1.15))!important;
  min-height:var(--sort-compact-height,calc(var(--sort-card-width) * 1.15))!important;
}
#activityPlayer[data-game="groupsort"] #gameStage .sort-layout[data-compact-words="true"] .sort-deck {
  gap:max(8px,.7cqw);padding:10px;
}
#activityPlayer[data-game="groupsort"] #gameStage .sort-layout[data-compact-words="true"] .sort-caption {
  box-sizing:border-box;padding-block:.25em;
}
@media(max-width:620px){
  #activityPlayer[data-game="groupsort"] #gameStage .sort-layout[data-compact-words="true"] :is(.sort-card,.sort-empty-slot){padding-block:3px}
}
#activityPlayer[data-game="groupsort"] #gameStage #sortHint {
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;
}
.activity-player[data-game="groupsort"] .sort-card-picture { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(var(--sort-card-width) * .9); background: #fff; }
.activity-player[data-game="groupsort"] .sort-card-picture img { width: 100%; height: 100%; object-fit: contain; }
.activity-player[data-game="groupsort"] .sort-caption { text-align: center; overflow-wrap: anywhere; }
.activity-player[data-game="groupsort"] .sort-audio { position: static; border: 0; background: none; color: #fff; margin: 0; padding: 0; font-size: 1.2cqw; line-height: 1; min-height: 1.5cqw; cursor: pointer; }
.activity-player[data-game="groupsort"] .sort-audio svg { display: block; width: 1.5cqw; height: 1.5cqw; fill: currentColor; }
.activity-player[data-game="groupsort"] .sort-empty-slot { border: .08cqw solid #bdbdbd; background: #fff; min-height: calc(var(--sort-card-width) * 1.15); }
.activity-player[data-game="groupsort"] .sort-mark { position: absolute; inset: 3px 3px auto auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #176544; color: #fff; font: 800 16px/1 system-ui,sans-serif; -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 0 0 2px #fff; animation: sort-mark-in .3s ease-out; }
.activity-player[data-game="groupsort"] .sort-mark { pointer-events: none; }
.activity-player[data-game="groupsort"] .sort-mark { animation-delay: var(--mark-delay,0ms); animation-fill-mode: backwards; }
.activity-player[data-game="groupsort"] .sort-card.ok { animation: sort-correct-card .45s ease-out var(--mark-delay,0ms) backwards; }
.activity-player[data-game="groupsort"] .sort-card.no { animation: sort-wrong-card .35s ease-in-out var(--mark-delay,0ms) backwards; }
.activity-player[data-game="groupsort"] .sort-card.no .sort-mark { color: #fff; background: #b82e3b; -webkit-text-stroke: 0; }
/* Reserve the small result badge before sorting, so marking never covers a
   caption or changes the card's dimensions. Pictures keep their full width. */
#activityPlayer[data-game="groupsort"] #gameStage .sort-card { padding-block-start: 26px !important; }
#activityPlayer[data-game="groupsort"] #gameStage .sort-layout[data-compact-words="true"] .sort-card {
  padding-block-start: 3px !important;
  padding-inline: 8px 26px !important;
}
#activityPlayer[data-game="groupsort"] #gameStage .sort-card[aria-disabled="true"] { cursor: default; }
#activityPlayer[data-game="groupsort"] #gameStage .sort-card[aria-disabled="true"]:hover { transform: none; }
#activityPlayer[data-game="groupsort"] #gameStage[data-game-phase="retry"] :is(.sort-card.ok,.sort-card.ok .sort-mark) { animation: none; }
#activityPlayer[data-game="groupsort"] #gameStage[data-game-phase="marked"] .sort-deck:empty { visibility: hidden; }
.activity-player[data-game="groupsort"] #sortHint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.activity-player[data-game="groupsort"] .next-row { position: absolute; bottom: 1%; left: 20%; right: 20%; margin: 0; }
.activity-player[data-game="groupsort"] #checkBtn { background: linear-gradient(#fff,#f8f8f8); border: 1px solid #bbb; color: #333; box-shadow: none; padding: .5cqw 2.5cqw; font-size: 1.7cqw; font-weight: 400; }

/* On a phone, the unsorted cards sit above their groups. Reading and placing
   are both possible without squeezing three desktop banks into one row. */
@media (max-width: 620px) {
  #activityPlayer.game-shell[data-game="groupsort"]:not(:fullscreen)::before {
    aspect-ratio: auto;
    height: clamp(610px, 82svh, 740px);
  }
  #activityPlayer[data-game="groupsort"] #gameStage {
    padding: 38px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #activityPlayer[data-game="groupsort"] .sort-layout {
    --sort-card-width: calc((100cqw - 40px) / 3);
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-deck {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-height: 44px;
    max-height: 258px;
    padding: 8px;
    border-radius: 12px;
    overscroll-behavior: contain;
  }
  #activityPlayer[data-game="groupsort"] .sort-layout[data-short-deck="true"] {
    --sort-card-width: calc((100cqw - 40px) / 2);
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-layout[data-short-deck="true"] .sort-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 330px;
  }
  /* Every group stays in view: up to three side by side, more wrap onto
     the next row instead of hiding off the right edge. */
  #activityPlayer[data-game="groupsort"] .sort-cols {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(auto-fit, minmax(max(96px, calc((100% - 24px) / 3)), 1fr));
    gap: 12px 8px;
    padding: 0 2px 6px;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-col {
    height: auto;
    min-height: 192px;
    border-radius: 12px;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-heading {
    min-height: 44px;
    margin-bottom: 6px;
    padding: 6px;
  }
  #activityPlayer[data-game="groupsort"] .sort-heading h4 {
    font-size: 17px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  #activityPlayer[data-game="groupsort"] .sort-heading img {
    width: 44px;
    height: 44px;
  }
  #activityPlayer[data-game="groupsort"] .pile {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    max-height: 244px;
    padding: 0 8px 8px;
    overscroll-behavior: contain;
  }
  #activityPlayer[data-game="groupsort"] .sort-layout[data-short-deck="true"] .pile {
    max-height: none;
  }
  #activityPlayer[data-game="groupsort"] #gameStage :is(.sort-card,.sort-empty-slot) {
    width: 100%;
    height: auto;
    min-height: 68px !important;
    padding: 9px 6px;
    border-radius: 9px;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-deck .sort-card {
    min-height: 72px !important;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-card:not(.ok):not(.no) {
    background: var(--style-surface, #fffdf5);
    color: var(--style-ink, #173d47);
    border: 2px solid color-mix(in srgb, var(--card-color) 55%, var(--style-surface, #fffdf5));
    border-top-width: 5px;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-empty-slot {
    min-height: 48px !important;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-caption {
    /* Long authored words wrap instead of being made microscopic. */
    font-size: 16px !important;
    line-height: 1.35;
    overflow-wrap: anywhere !important;
  }
  #activityPlayer[data-game="groupsort"] #gameStage .sort-card.has-picture {
    min-height: 128px !important;
  }
  #activityPlayer[data-game="groupsort"] .sort-card-picture {
    height: 74px;
    min-height: 74px;
  }
  #activityPlayer[data-game="groupsort"] .sort-audio {
    min-width: 44px;
    min-height: 44px;
  }
  #activityPlayer[data-game="groupsort"] .sort-audio svg {
    width: 22px;
    height: 22px;
  }
  #activityPlayer[data-game="groupsort"] .next-row {
    position: relative;
    inset: auto;
    margin: 16px 0 0;
    display: flex;
    justify-content: center;
  }
  #activityPlayer[data-game="groupsort"] #sortHint {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    clip-path: none;
    overflow: visible;
    margin: 14px 0 0;
    padding: 8px 10px;
    border-radius: 9px;
    background: #ffffffeb;
    color: #183c45;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
  }
  #activityPlayer[data-game="groupsort"] #checkBtn {
    min-height: 44px;
    min-width: 156px;
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 700;
  }
}
@keyframes sort-mark-in { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sort-correct-card { 45% { transform: scale(1.12); filter: brightness(1.2); } }
@keyframes sort-wrong-card { 20%,60% { transform: translateX(-.5cqw) rotate(-3deg); } 40%,80% { transform: translateX(.5cqw) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-motion-managed])) .activity-player *, :where(:root:not([data-motion-managed])) .activity-player *::before, :where(:root:not([data-motion-managed])) .activity-player *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
:where(:root[data-reduce-motion]) .activity-player *, :where(:root[data-reduce-motion]) .activity-player *::before, :where(:root[data-reduce-motion]) .activity-player *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
.ag-word-wrong .ag-slot:not(.fixed):not(.right){outline:3px solid #d94d4d;outline-offset:-3px}

/* Letter tiles share the same interaction on mouse, pen and touch screens. */
.activity-player[data-game="anagram"] :is(.ag-tile,.ag-slot):not(:disabled){touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.activity-player[data-game="anagram"] :is(.ag-tile,.ag-slot.filled):not(:disabled):not(.fixed){cursor:grab}
.activity-player[data-game="anagram"] .ag-dragging{opacity:.35;cursor:grabbing}
.activity-player[data-game="anagram"] .ag-drop-target{outline:3px solid var(--blue,#2273a6)!important;outline-offset:3px}
.activity-player[data-game="anagram"] .ag-return-target{outline:2px dashed var(--blue,#2273a6);outline-offset:6px}
.activity-player[data-game="anagram"] .ag-status{margin:0;padding:.3em .7em;max-width:100%;border-radius:.5em;background:#fffffff0;color:#203d4b;font-size:clamp(13px,1.45cqw,20px);text-shadow:none;text-align:center}
.activity-player[data-game="anagram"] .ag-status:empty{display:none}
.ag-drag-ghost{position:fixed!important;z-index:2147483000;pointer-events:none!important;user-select:none!important;margin:0!important;box-sizing:border-box!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important;transition:none!important;animation:none!important}

/* Update 1: picture answers in Quiz show were drawn too small.
   Two picture answers now take most of the width; three or four keep a 2 x 2 grid.
   When the question also shows a picture, answers step back down so nothing overflows. */
.activity-player[data-game="gameshow"] .gs-opts[data-count="2"]:has(.has-picture) { width: 62%; }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="1"],[data-count="2"]) .gs-opt.has-picture { min-height: 19cqw; }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="1"],[data-count="2"]) .gs-opt.has-picture .answer-picture { max-height: 14cqw; }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="3"],[data-count="4"]) .gs-opt.has-picture { min-height: 13.5cqw; }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="3"],[data-count="4"]) .gs-opt.has-picture .answer-picture { max-height: 9.5cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)) .gs-opts:is([data-count="1"],[data-count="2"]) .gs-opt.has-picture { min-height: 13cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)) .gs-opts:is([data-count="1"],[data-count="2"]) .gs-opt.has-picture .answer-picture { max-height: 8.5cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)) .gs-opts:is([data-count="3"],[data-count="4"]) .gs-opt.has-picture { min-height: 10cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)) .gs-opts:is([data-count="3"],[data-count="4"]) .gs-opt.has-picture .answer-picture { max-height: 5.5cqw; }

/* Short sparse questions use the available stage; original picture sizing stays intact. */
.activity-player[data-game="gameshow"] #gameStage[data-sparse-question="yes"][data-sparse-room="yes"] .gs-q {
  font-size: var(--gs-sparse-question-size, clamp(22px, 8.8cqw, 128px));
  line-height: 1.1;
}
.activity-player[data-game="gameshow"] #gameStage[data-sparse-question="yes"][data-sparse-room="yes"] .gs-opt {
  min-height: var(--gs-sparse-answer-height, 14cqw);
}

/* Update 2: Quiz show accepts up to six answers, laid out as three rows of two. A fifth
   answer is centred under the others; text stays readable on a phone; a question picture
   makes the picture answers step down so the grid still fits the stage. */
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="5"],[data-count="6"]) { width: 82%; gap: 1.4cqw; }
.activity-player[data-game="gameshow"] .gs-opts[data-count="5"] > .answer-choice:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - .7cqw); }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="5"],[data-count="6"]) .gs-opt { min-height: 7.4cqw; padding: .5cqw; font-size: clamp(11px, 2.3cqw, 32px); }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="5"],[data-count="6"]) .gs-opt .k { font-size: clamp(11px, 2.1cqw, 30px); }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="5"],[data-count="6"]) .gs-opt.has-picture { min-height: 9.6cqw; padding: .4cqw; gap: .3cqw; }
.activity-player[data-game="gameshow"] .gs-opts:is([data-count="5"],[data-count="6"]) .gs-opt.has-picture .answer-picture { max-height: 5.8cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)) .gs-opts:is([data-count="5"],[data-count="6"]) .gs-opt { min-height: 5.6cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)) .gs-opts:is([data-count="5"],[data-count="6"]) .gs-opt.has-picture { min-height: 7.4cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)) .gs-opts:is([data-count="5"],[data-count="6"]) .gs-opt.has-picture .answer-picture { max-height: 4cqw; }
.activity-player[data-game="gameshow"] #gameStage:has(.gs-img:not(.hidden)):is([data-answer-count="5"],[data-answer-count="6"]) .gs-img { max-height: 10cqw; }

/* A cramped six-picture stage retains its question and uses shorter answer rows. */
.activity-player[data-game="gameshow"] #gameStage[data-dense-pictures-fit="yes"] { justify-content: flex-start; overflow-y: auto; }
.activity-player[data-game="gameshow"] #gameStage[data-dense-pictures-fit="yes"] .gs-opts[data-count="6"] .gs-opt { min-height: var(--gs-dense-answer-height); flex-direction: row; }
.activity-player[data-game="gameshow"] #gameStage[data-dense-pictures-fit="yes"] .gs-opt.has-picture .answer-content { flex-direction: row; gap: .6cqw; }
.activity-player[data-game="gameshow"] #gameStage[data-dense-pictures-fit="yes"] .gs-opt.has-picture .answer-picture { width: auto; max-width: 38%; height: var(--gs-dense-picture-height); max-height: var(--gs-dense-picture-height); }

/* Update 1: a larger wheel, so its labels and pictures can be read from the back of a room. */
.activity-player[data-game="wheel"] .wheel-frame { width: 46cqw; height: 46cqw; }

/* Update 2: What's inside? (openbox) ends with a recap of every box — picture, text, recording, the answer
   to a quiz box and its mark — instead of a text-only list of quiz boxes. */

/* Update 2: review pictures are shown whole (not cropped), and recorded items get a Listen button. */
.review .rv-item img { object-fit: contain; background: #fff; }
.review-listen-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.review-listen { min-height: 34px; }
.review-listen svg { width: 16px; height: 16px; vertical-align: middle; }
.iq-review-item .info .iq-review-answer-picture { display: block; margin-top: 4px; }
.review .rv-item .info .ok { color: #238354; }
.review .rv-item .info .no { color: #bc4d43; }

/* The wheel turns as one painted picture (wheel.js): it gets its own layer, and the soft
   shadow sits on the still frame so it does not swing round with the wheel. */
.activity-player[data-game="wheel"] .wheel-frame canvas { will-change: transform; filter: none; }
.activity-player[data-game="wheel"] .wheel-frame { box-shadow: 0 0 0 .2cqw #ddd, 0 0 0 .7cqw #fafafa, 0 0 1.6cqw .6cqw #eee, 0 1.4cqw 2.2cqw .4cqw #0000001f; }
.activity-player[data-game="wheel"] .wheel-pointer { transform-origin: 12% 0%; z-index: 2; }


/* Source: css/imagequiz.css; sha256: f1f7ab125d89f1368015f38495f60846971aacf8a1010b16f154d548aa52bd21 */
/* Picture reveal's transitions follow the game's own beats (motion in js/games/imagequiz.js). */
.activity-player[data-game=imagequiz] #gameStage[data-layout=separate]:is([data-game-phase=continue-reveal],[data-game-phase=completion-transition]) :is(#iqText,.pic,.iq-countdown,.gspeak){display:none}
.activity-player[data-game=imagequiz] #gameStage:is([data-game-phase=completion-reveal],[data-game-phase=full-picture],[data-game-phase=ready-next],[data-game-phase=question-transition]) .iq-know{display:none}
.activity-player[data-game=imagequiz] .iq-options-enter{animation:iq-answers-appear .35s ease both}
.activity-player[data-game=imagequiz] .iq-options-exit{animation:iq-answers-exit .45s ease both;pointer-events:none}
.activity-player[data-game=imagequiz] #gameStage.iq-answer-transition .reveal-wrap{animation:iq-picture-exit .5s ease both}
/* What leaves between pictures keeps its hidden state in its own style, not only in an
   animation's fill, so nothing old can show again while the next picture is named. */
.activity-player[data-game=imagequiz] #gameStage.iq-question-exit .reveal-wrap{opacity:0;animation:iq-leave .45s ease}
@keyframes iq-answers-appear{from{opacity:0;transform:translateY(1.4cqw)}to{opacity:1;transform:none}}
@keyframes iq-answers-exit{to{opacity:0;transform:translateY(1.4cqw)}}
@keyframes iq-picture-exit{to{opacity:0;transform:scale(.94)}}
@keyframes iq-leave{from{opacity:1;transform:none}to{opacity:0;transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .activity-player[data-game=imagequiz] :is(.iq-options-enter,.iq-options-exit,.reveal-wrap){animation:none!important}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .activity-player[data-game=imagequiz] :is(.iq-options-enter,.iq-options-exit,.reveal-wrap){animation:none!important}

/* A question is a reading banner, not a fixed-height display headline. Allow
   bilingual clues to wrap above the measured picture instead of over it. */
#activityPlayer[data-game=imagequiz] #gameStage #iqText{height:auto;min-height:1.35em;margin:0 0 12px;padding:8px 54px;font-size:clamp(20px,3cqw,36px);line-height:1.35;letter-spacing:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-wrap:balance;text-shadow:none;-webkit-text-stroke:0}
#activityPlayer[data-game=imagequiz] #gameStage .gspeak{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border-radius:10px}

/* The picture and its "I know it!" button have separate spaces: the 16:9 picture
   under its bubble wrap, and the button beside it instead of over it. */
@media(min-width:621px){
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate]{display:flex;flex-direction:column;gap:16px;padding:28px 4% 24px;overflow-y:auto;overscroll-behavior:contain}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate] #iqText{flex:none;margin:0}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate] .reveal-wrap{display:grid;grid-template-columns:minmax(0,60cqw) minmax(160px,20cqw);grid-template-rows:minmax(0,1fr);justify-content:center;align-items:center;gap:4cqw;flex:1;min-height:0;width:100%;height:auto}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate] .pic{width:auto;max-width:100%;height:100%;max-height:33.75cqw;aspect-ratio:16/9;margin:0;flex:none;justify-self:center}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate] .iq-know{position:static;inset:auto;width:auto;height:100%;max-height:300px;min-height:0;margin:0;gap:12px;justify-content:center;align-self:center}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate] .iq-know-btn{width:clamp(132px,15cqw,190px);flex:0 1 auto;max-width:100%}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate] #iqHint{position:static;clip-path:none;flex:none;width:auto;height:auto;max-width:100%;overflow:visible;padding:8px 12px;border-radius:10px;background:#071d32e6;color:#fff;font-size:16px;line-height:1.35;text-align:center}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate]:is([data-game-phase=answer],[data-game-phase=locked]) .reveal-wrap{display:none}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate]:is([data-game-phase=completion-reveal],[data-game-phase=full-picture],[data-game-phase=ready-next],[data-game-phase=question-transition]) .reveal-wrap{grid-template-columns:minmax(0,60cqw)}
}

/* Keep the picture, clue and "I know it!" button together in portrait orientation.
   The answer page gets its own readable composition, including six-choice games. */
@media(max-width:620px){
  #activityPlayer.game-shell[data-game=imagequiz]:not(:fullscreen)::before{aspect-ratio:auto;height:clamp(500px,70svh,640px)}
  #activityPlayer[data-game=imagequiz] #gameStage{display:flex;flex-direction:column;justify-content:safe center;gap:12px;padding:40px 12px 18px;overflow-y:auto;overscroll-behavior:contain}
  #activityPlayer[data-game=imagequiz] #gameStage #iqText{min-height:0;flex:none;margin:0 0 6px;padding:8px 12px;font-size:clamp(20px,5.6cqw,26px);line-height:1.35}
  #activityPlayer[data-game=imagequiz] .reveal-wrap{display:flex;flex-direction:column;align-items:center;flex:none;height:auto;gap:18px}
  #activityPlayer[data-game=imagequiz] #gameStage .pic{width:92cqw;height:51.75cqw;max-width:100%;margin:0 auto;border-radius:10px;overflow:hidden}
  #activityPlayer[data-game=imagequiz] .iq-know{position:static;inset:auto;margin:0;width:100%}
  #activityPlayer[data-game=imagequiz] #iqHint{position:static;clip-path:none;flex:none;width:auto;height:auto;max-width:none;padding:7px 12px;border-radius:9px;background:#071d32e6;color:#fff;font-size:14px;line-height:1.4;text-align:center}
  #activityPlayer[data-game=imagequiz] #iqStatus{position:static;clip-path:none;flex:none;width:100%;height:auto;max-width:none;padding:8px 12px;margin:0;border-radius:9px;background:#071d32e6;color:#fff;font-size:14px;line-height:1.4;text-align:center;overflow:visible}
  #activityPlayer[data-game=imagequiz] #iqStatus:empty{display:none}
  #activityPlayer[data-game=imagequiz] #gameStage .options{position:static;inset:auto;width:100%;flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
  #activityPlayer[data-game=imagequiz] #gameStage .options .opt{height:auto;min-height:112px;padding:32px 10px 12px;font-size:18px;line-height:1.35;border-width:2px;border-radius:10px}
  #activityPlayer[data-game=imagequiz] #gameStage .options .answer-content{font-size:18px!important;line-height:1.35;overflow-wrap:anywhere;min-width:0;width:100%}
  #activityPlayer[data-game=imagequiz] #gameStage .options .k{top:8px;font-size:14px;line-height:1.3}
  #activityPlayer[data-game=imagequiz] #gameStage .options .answer-picture{height:76px;max-width:100%}
  #activityPlayer[data-game=imagequiz] #gameStage .answer-choice:has(.answer-audio) .opt{padding-bottom:56px}
  #activityPlayer[data-game=imagequiz] #gameStage .answer-audio{right:6px;bottom:6px;min-width:44px;min-height:44px;width:44px;height:44px;padding:10px;border-radius:8px}
  #activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate]:is([data-game-phase=answer],[data-game-phase=locked]) .reveal-wrap{display:none}
  #activityPlayer[data-game=imagequiz] #iqNextRow{position:static;inset:auto;align-self:flex-end;margin:4px 0 0}
  #activityPlayer[data-game=imagequiz] #iqNext{min-height:44px;padding:10px 18px;font-size:16px}
  #activityPlayer[data-game=imagequiz] .gspeak{top:36px;left:auto;right:12px;width:44px;height:44px}
  #activityPlayer[data-game=imagequiz] #gameStage:has(#iqSpeak:not(.hidden)) #iqText{padding-right:48px}
}

/* A wrong try is crossed out and stays unavailable while the other answers
   remain open. Going back to the picture hides the answers the same way. */
#activityPlayer[data-game=imagequiz] #gameStage .opt.ruled-out .answer-content{text-decoration:line-through;text-decoration-thickness:.09em}
#activityPlayer[data-game=imagequiz] #gameStage[data-layout=separate][data-game-phase=retry-transition] :is(#iqText,.reveal-wrap,.iq-countdown,.gspeak){display:none}

/* Consolidation: the answer sits on the lower edge of the whole picture (the
   game places it with --iq-answer-x/y), a tick when the player named it. */
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-card{position:absolute;left:var(--iq-answer-x,50%);top:var(--iq-answer-y,72%);z-index:6;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.45em;width:max-content;max-width:min(92%,44rem);min-height:44px;margin:0;padding:.3em .95em .3em .4em;border:.1em solid #fff;border-radius:999px;background:#fffdf6;color:#17223b;font:800 clamp(20px,3cqw,42px)/1.15 "ClassPlay Round",system-ui,sans-serif;letter-spacing:0;text-align:left;text-shadow:none;box-shadow:0 .3em 0 #0000002e,0 .45em 1.3em #0006;transform:translate(-50%,-50%);animation:iq-answer-pop .5s cubic-bezier(.2,1.5,.45,1) both}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-card[hidden]{display:none}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-mark{display:grid;place-items:center;flex:none;width:1.45em;height:1.45em;border-radius:50%;background:#1f9d55;color:#fff;font-size:.85em;line-height:1}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-label{flex:none;padding:.35em .65em;border-radius:999px;background:#ffd66b;color:#4d3300;font-size:.48em;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-picture{display:block;flex:none;width:auto;height:1.9em;max-width:4.5em;object-fit:contain;border-radius:.25em;background:#fff}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-text{min-width:0;overflow-wrap:anywhere}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-listen{display:grid;place-items:center;flex:none;box-sizing:border-box;width:44px;height:44px;min-width:44px;margin:0;padding:10px;border:2px solid #b9c8e8;border-radius:50%;background:#eef3fd;color:#17223b;cursor:pointer}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-listen svg{display:block;width:100%;height:100%;fill:currentColor}
#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-listen svg path{stroke:currentColor;stroke-width:1.5}
#activityPlayer[data-game=imagequiz] #gameStage.iq-question-exit .iq-answer-card{opacity:0;animation:iq-answer-leave .45s ease}
@keyframes iq-answer-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes iq-answer-exit{to{opacity:0;transform:translate(-50%,-50%) scale(.94)}}
@keyframes iq-answer-leave{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.94)}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) #activityPlayer[data-game=imagequiz] #gameStage .iq-answer-card{animation:none!important}}
:where(:root[data-reduce-motion]) #activityPlayer[data-game=imagequiz] #gameStage .iq-answer-card{animation:none!important}
@media(max-width:620px){#activityPlayer[data-game=imagequiz] #gameStage .iq-answer-card{font-size:20px;max-width:calc(100% - 24px)}#activityPlayer[data-game=imagequiz] #gameStage:has(#iqAnswer:not([hidden])) #iqStatus{margin-top:30px}}

/* Between pictures: the old question leaves with its picture, and the next
   picture is named where it will appear (the game places it with --iq-round-x/y). */
#activityPlayer[data-game=imagequiz] #gameStage.iq-question-exit :is(#iqText,.gspeak,#iqOpts){opacity:0;animation:iq-leave .45s ease}
#activityPlayer[data-game=imagequiz] #gameStage .iq-round{position:absolute;left:var(--iq-round-x,50%);top:var(--iq-round-y,50%);z-index:6;box-sizing:border-box;width:max-content;max-width:min(92%,40rem);margin:0;padding:.4em 1.1em;border:.1em solid #fff;border-radius:999px;background:#fffdf6;color:#17223b;font:800 clamp(20px,2.6cqw,36px)/1.15 "ClassPlay Round",system-ui,sans-serif;letter-spacing:0;text-align:center;text-shadow:none;box-shadow:0 .3em 0 #0000002e,0 .45em 1.3em #0006;transform:translate(-50%,-50%);pointer-events:none;animation:iq-answer-pop .45s cubic-bezier(.2,1.5,.45,1) both}
#activityPlayer[data-game=imagequiz] #gameStage .iq-round[hidden]{display:none}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) #activityPlayer[data-game=imagequiz] #gameStage :is(.iq-round,.iq-question-exit #iqText,.iq-question-exit .gspeak,.iq-question-exit #iqOpts,.iq-question-exit .iq-answer-card){animation:none!important}}
:where(:root[data-reduce-motion]) #activityPlayer[data-game=imagequiz] #gameStage :is(.iq-round,.iq-question-exit #iqText,.iq-question-exit .gspeak,.iq-question-exit #iqOpts,.iq-question-exit .iq-answer-card){animation:none!important}
/* On a phone the status line is visible: after "I know it!" and when time is up, the hint says it once. */
@media(max-width:620px){#activityPlayer[data-game=imagequiz] #gameStage:is([data-game-phase=ready],[data-game-phase=look]) #iqStatus{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%)}}

/* The bubble wrap: one canvas over the picture, drawn by the game in four inks it
   reads from these probes: the world's third colour, its deep and light tones,
   and its outline colour (a plain teal set without a world). */
#activityPlayer[data-game=imagequiz] #gameStage .pic{position:relative;--iq-bubble:var(--wk-c3,var(--sk-accent,#2ed3f0));--iq-bubble-deep:var(--wk-c3d,#1491b0);--iq-bubble-shine:var(--wk-c3s,#d8f7fd);--iq-bubble-line:var(--wk-line,#17223b)}
#activityPlayer[data-game=imagequiz] #gameStage .iq-wrap{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
#activityPlayer[data-game=imagequiz] #gameStage .iq-inks{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden}
#activityPlayer[data-game=imagequiz] #gameStage .iq-inks i:nth-child(1){color:var(--iq-bubble)}
#activityPlayer[data-game=imagequiz] #gameStage .iq-inks i:nth-child(2){color:var(--iq-bubble-deep)}
#activityPlayer[data-game=imagequiz] #gameStage .iq-inks i:nth-child(3){color:var(--iq-bubble-shine)}
#activityPlayer[data-game=imagequiz] #gameStage .iq-inks i:nth-child(4){color:var(--iq-bubble-line)}

/* "I know it!": a round button with a raised hand, in the world's second colour. */
#activityPlayer[data-game=imagequiz] #gameStage .iq-know{display:flex;flex-direction:column;align-items:center;gap:10px}
#activityPlayer[data-game=imagequiz] #gameStage .iq-know-btn{--iq-know:var(--wk-c2,#ffc21a);--iq-know-deep:var(--wk-c2d,#b87e00);--iq-know-ink:var(--wk-drop,#1a0b48);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12em;box-sizing:border-box;width:clamp(132px,15cqw,190px);height:auto;aspect-ratio:1;min-width:0;min-height:0;margin:0 0 .4em;padding:.5em .3em .55em;border:.16em solid var(--iq-know-ink);border-radius:50%;background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--iq-know) 50%,#fff) 0 15%,var(--iq-know) 52%,var(--iq-know-deep) 100%);color:var(--iq-know-ink);font:900 clamp(16px,1.9cqw,24px)/1.05 var(--wk-display,"ClassPlay Round"),"ClassPlay Round",system-ui,sans-serif;letter-spacing:0;text-transform:none;text-shadow:none;box-shadow:0 .38em 0 var(--iq-know-ink),0 .7em 1.1em #0006;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,filter .2s}
#activityPlayer[data-game=imagequiz] #gameStage .iq-hand{display:block;width:46%;height:auto;color:var(--iq-know-ink);overflow:visible;transform-origin:50% 90%}
/* White words with a dark edge read on every world's button colour (yellow, blue or purple). */
#activityPlayer[data-game=imagequiz] #gameStage .iq-know-label{display:block;white-space:nowrap;color:#fff;text-shadow:0 .08em 0 var(--iq-know-ink),.06em 0 0 var(--iq-know-ink),-.06em 0 0 var(--iq-know-ink),0 -.06em 0 var(--iq-know-ink),.045em .045em 0 var(--iq-know-ink),-.045em .045em 0 var(--iq-know-ink),.045em -.045em 0 var(--iq-know-ink),-.045em -.045em 0 var(--iq-know-ink)}
#activityPlayer[data-game=imagequiz] #gameStage .iq-know-btn:hover:not(:disabled){transform:translateY(-.08em)}
#activityPlayer[data-game=imagequiz] #gameStage .iq-know-btn:focus-visible{outline:4px solid #fff;outline-offset:4px}
#activityPlayer[data-game=imagequiz] #gameStage :is(.iq-know-btn:active:not(:disabled),.iq-know-btn.pressed){transform:translateY(.3em);box-shadow:0 .08em 0 var(--iq-know-ink),0 .3em .6em #0005}
#activityPlayer[data-game=imagequiz] #gameStage .iq-know-btn:disabled:not(.pressed){cursor:default;filter:saturate(.55) brightness(.92)}
#activityPlayer[data-game=imagequiz] #gameStage .iq-know-btn.pressed .iq-hand{animation:iq-wave .5s ease}
#activityPlayer[data-game=imagequiz] #gameStage .iq-know-btn.pressed::after{content:"";position:absolute;inset:-.25em;border:.18em solid var(--iq-know);border-radius:50%;pointer-events:none;animation:iq-ring .6s ease-out both}
@keyframes iq-wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}65%{transform:rotate(10deg)}}
@keyframes iq-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
/* What a right answer is worth now: stars that go out as the bubbles pop. */
#activityPlayer[data-game=imagequiz] #gameStage .iq-worth{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;max-width:100%;padding:5px 10px;border-radius:999px;background:var(--wk-pill,#071d32e6);color:var(--wk-pill-ink,#fff);font:800 14px/1.2 "ClassPlay Round",system-ui,sans-serif}
#activityPlayer[data-game=imagequiz] #gameStage .iq-worth:empty{display:none}
#activityPlayer[data-game=imagequiz] #gameStage .iq-worth-label{margin-right:4px}
#activityPlayer[data-game=imagequiz] #gameStage .iq-worth i{flex:none;width:14px;height:14px;background:#ffffff40;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:background-color .25s}
#activityPlayer[data-game=imagequiz] #gameStage .iq-worth i.on{background:var(--wk-mark,#ffc21a)}
/* On a phone the button sits beside its worth and hint under the picture, so all three fit a short screen. */
@media(max-width:620px){
  #activityPlayer[data-game=imagequiz] #gameStage .iq-know{display:grid;grid-template-columns:auto minmax(0,auto);grid-template-areas:"button worth" "button hint";align-items:center;justify-content:center;column-gap:14px;row-gap:8px}
  #activityPlayer[data-game=imagequiz] #gameStage .iq-know-btn{grid-area:button;width:clamp(100px,28cqw,128px);margin:0 0 .3em;font-size:16px}
  #activityPlayer[data-game=imagequiz] #gameStage .iq-worth{grid-area:worth;justify-self:start;align-self:end}
  #activityPlayer[data-game=imagequiz] #gameStage #iqHint{grid-area:hint;justify-self:start;align-self:start;text-align:left}
}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) #activityPlayer[data-game=imagequiz] #gameStage :is(.iq-know-btn,.iq-know-btn.pressed .iq-hand,.iq-know-btn.pressed::after,.iq-worth i){animation:none!important;transition:none!important}}
:where(:root[data-reduce-motion]) #activityPlayer[data-game=imagequiz] #gameStage :is(.iq-know-btn,.iq-know-btn.pressed .iq-hand,.iq-know-btn.pressed::after,.iq-worth i){animation:none!important;transition:none!important}

/* Source: css/theme-scenes.css; sha256: c516fc01f208ebbb9431009c9f535cf51c23f04becfbcb3df6dfda649fde35b8 */
/* Lesson type inside every learning world follows the player's font choice; small scene
   decorations stay still for No movement. */
.activity-player[data-world-kit] #gameStage{font-family:inherit}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .activity-player[data-world-kit] :is(.cp-float,.cp-twinkle,.scene-card-entry){animation:none!important;transition:none!important}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .activity-player[data-world-kit] :is(.cp-float,.cp-twinkle,.scene-card-entry){animation:none!important;transition:none!important}

/* Source: css/pair-games.css; sha256: bcdd13d1a4033291e29c14c9b1153bf63feed4f7c3791afed6d89eab7759fabb */
.pair-face-content{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;text-align:center;color:inherit;overflow-wrap:anywhere}
.pair-face-picture{display:flex;align-items:center;justify-content:center;min-height:0;width:100%;flex:1;max-height:180px}
.pair-face-picture img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;user-select:none}
.pair-face-text{font:inherit;line-height:1.3;white-space:pre-wrap}.pair-audio-art{width:70px;max-width:85%;height:70px}
.pair-game-instruction,.pair-game-status{margin:10px 0 16px;text-align:center;line-height:1.5;font-size:clamp(14px,1.8vw,21px)}
.pair-game-status{font-size:clamp(13px,1.5vw,17px);min-height:28px;margin-top:16px}.pair-game-actions{display:flex;justify-content:center;gap:12px;padding-bottom:10px}.pair-game-actions .btn.lg{font-size:18px;min-height:44px;padding:10px 22px}
.activity-player:is([data-game=matchingpairs],[data-game=matchup]) #gameStage{padding:28px 36px 55px;overflow-y:auto;align-content:start}
.memory-grid{display:grid;grid-template-columns:repeat(var(--pair-columns,4),minmax(0,1fr));gap:12px;width:min(880px,100%);margin:0 auto}
.memory-card{position:relative;appearance:none;padding:0;border:0;background:none;aspect-ratio:1.05;perspective:900px;color:#24333d;font-size:clamp(16px,2.2vw,32px);font-family:inherit;border-radius:8px;cursor:pointer}
.memory-card-inner{display:block;position:absolute;inset:0;transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.75,.3,1)}
.memory-back,.memory-face{position:absolute;inset:0;border-radius:8px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;box-shadow:0 5px 0 #14465d,0 6px 12px #102b4f35;overflow:hidden;border:3px solid #d9eff8;padding:min(10px,7%)}
.memory-back{background:repeating-linear-gradient(45deg,#2697c8 0 7px,#218bbb 7px 14px);color:#fff}.memory-back>span{font-size:clamp(30px,6vw,68px);font-family:"ClassPlay Display",sans-serif;text-shadow:0 3px #185a80}
.memory-back small{position:absolute;right:8px;bottom:6px;font-size:14px;font-weight:700;background:#fff2;padding:2px 6px;border-radius:20px}
.memory-face{transform:rotateY(180deg);background:#fffef0;border-color:#d5c8a5;font-size:clamp(16px,2.2cqw,32px)}.memory-face .pair-face-picture{max-height:75%}.memory-face .pair-face-text{font-weight:800}
.memory-card.is-faceup .memory-card-inner{transform:rotateY(180deg)}.memory-card.is-matched .memory-face{background:#e2f3d8;border-color:#59a249;box-shadow:0 3px 0 #397b33}
.memory-match-mark{display:none;position:absolute;top:-8px;right:-8px;border-radius:50%;background:#52a841;color:#fff;font-size:20px;line-height:26px;width:28px;border:2px solid white;box-shadow:0 2px 4px #0004}.memory-card.is-matched .memory-match-mark{display:block}
.memory-card.is-mismatch .memory-face{border-color:#dd6860;background:#fff1ec}.memory-card:focus-visible{outline:4px solid #ffc43e;outline-offset:4px}.memory-card:disabled{opacity:1;cursor:default}
.pair-review{gap:12px}.pair-review .pair-face-content{height:auto;min-height:75px;flex:1;padding:8px;background:#f4f9fb;border-radius:5px;color:#243a47}.pair-review .pair-face-picture{height:60px;flex:none}.pair-review-number{font-weight:700;opacity:.65}
.pair-review-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px}.pair-review-side .btn{align-self:center;min-height:36px}.pair-review-side button svg{width:18px;height:18px;vertical-align:middle}
.matchup-rows{display:grid;gap:10px;width:min(860px,100%);margin:auto}.matchup-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:14px}
.matchup-prompt,.matchup-target,.matchup-answer{position:relative;display:flex;min-height:80px;padding:10px 14px;align-items:center;justify-content:center;border:2px solid #d7ebf6;border-radius:5px;background:#f9fbff;color:#1c3449;font-size:clamp(16px,2vw,25px);font-family:inherit;font-weight:700;line-height:1.3;box-shadow:0 3px 0 #23567550}
.matchup-prompt .pair-face-picture,.matchup-target .pair-face-picture,.matchup-answer .pair-face-picture{height:70px;max-height:70px;width:45%;flex:0 0 45%}.matchup-prompt .pair-face-content:has(img),.matchup-target .pair-face-content:has(img),.matchup-answer .pair-face-content:has(img){flex-direction:row}.matchup-prompt .pair-face-text,.matchup-target .pair-face-text,.matchup-answer .pair-face-text{min-width:0;flex:1}
.matchup-target{border-style:dashed;background:#e3effb;color:#284a62;cursor:pointer}.matchup-placeholder{opacity:.45;font-size:28px;font-weight:800}.matchup-target:has(.pair-face-content){border-style:solid;background:#fff7dc;border-color:#dbb653}
.matchup-bank{width:min(930px,100%);margin:22px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.matchup-answer{background:#fff7dc;border-color:#dbb653;cursor:grab;touch-action:none;user-select:none}.matchup-answer.is-selected{outline:4px solid #ffd633;outline-offset:1px;transform:translateY(-3px)}
.matchup-target.is-correct{border-color:#5fac56;background:#e7f4df}.matchup-target.is-correct:after{content:'✓';position:absolute;right:5px;top:4px;background:#4f9c48;color:#fff;border-radius:50%;font-size:16px;padding:2px 5px}.matchup-target.is-wrong{border-color:#cd625d;background:#fff0ee}.matchup-target.is-drop-target{outline:4px solid #facd2e;background:#fff4a4}.matchup-answer.is-dragging{opacity:.25}.matchup-drag-ghost{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-50%) rotate(-3deg);opacity:.95;box-shadow:0 8px 22px #0006}
.pair-listen{position:absolute;right:4px;top:4px;background:#fff;border:1px solid #b8d4e6;color:#2474a6;width:28px;height:28px;padding:5px;border-radius:50%;cursor:pointer}.pair-listen svg{width:100%;height:100%}
.matchup-target:focus-visible,.matchup-answer:focus-visible{outline:4px solid #ffd633;outline-offset:2px}
@media(max-width:700px){.activity-player:is([data-game=matchingpairs],[data-game=matchup]) #gameStage{padding:24px 12px 48px}.memory-grid{gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.memory-card{font-size:clamp(12px,3.8vw,22px)}.memory-back,.memory-face{padding:5px;border-width:2px}.memory-back small{font-size:10px;right:3px;bottom:3px}.matchup-row{gap:8px}.matchup-prompt,.matchup-target,.matchup-answer{padding:8px;min-height:72px;font-size:18px}.matchup-bank{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.pair-game-instruction{font-size:16px}.pair-game-status{font-size:14px}}
@media(max-width:620px){
 .activity-player.game-shell:is([data-game=matchingpairs],[data-game=matchup]):not(:fullscreen){height:clamp(440px,65vh,600px);aspect-ratio:auto}
 .activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) .hud .pill,.activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) #pCount{font-size:14px}
 .activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) .player-controls button>svg{width:24px;height:24px}
 .activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) #pMute svg{width:24px;height:24px}
 .activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) .end-panel{width:80%;font-size:16px;padding:14px}
 .activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) .end-panel h2,.activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) .end-panel p{font-size:14px}
 .activity-player:is([data-game=matchingpairs],[data-game=matchup],[data-game=flashcards]) .end-summary strong{font-size:26px}
}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .memory-card-inner{transition:none}:where(:root:not([data-motion-managed])) .matchup-answer{transition:none}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .memory-card-inner{transition:none}:where(:root[data-reduce-motion]) .matchup-answer{transition:none}
/* Paged Pair match keeps the bank and all current page rows inside the player. */
.activity-player[data-game=matchup] #gameStage{padding:4.5% 2.5% 7%;overflow:hidden}.matchup-shell{height:100%;display:flex;flex-direction:column;gap:1cqw;min-height:0}.matchup-shell .pair-game-instruction{margin:0;flex:none;font-size:clamp(12px,1.5cqw,20px)}.matchup-content{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);gap:2cqw;flex:1;min-height:0}.matchup-shell .matchup-rows{grid-column:2;grid-row:1;grid-template-rows:repeat(var(--matchup-rows,3),minmax(45px,1fr));gap:.8cqw;width:100%;height:100%;min-height:0;overflow:auto;margin:0;padding:3px}.matchup-shell .matchup-row{gap:1cqw;min-height:0}.matchup-shell .matchup-bank{grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--matchup-rows,3),minmax(45px,1fr));gap:.8cqw;width:100%;min-height:0;overflow:auto;margin:0;padding:3px}.matchup-shell .matchup-prompt,.matchup-shell .matchup-target,.matchup-shell .matchup-answer{height:100%;min-height:0;min-width:0;max-height:100%;padding:.7cqw;font-size:clamp(12px,1.75cqw,24px);font-weight:400;overflow:hidden}.matchup-shell .pair-face-picture{height:100%;max-height:100%;min-height:0;width:100%;flex:1}.matchup-shell .pair-face-content:has(img){flex-direction:column;gap:.3cqw}.matchup-shell .pair-face-content:has(img) .pair-face-text{flex:0 0 auto;font-size:.85em}.matchup-shell .pair-face-text{flex:none;max-width:100%}.matchup-shell .matchup-placeholder{font-size:clamp(14px,2cqw,25px)}.matchup-footer{display:flex;align-items:center;justify-content:space-between;gap:1cqw;min-height:35px;flex:none}.matchup-footer .pair-game-status{font-size:clamp(11px,1.4cqw,17px);margin:0;min-height:0;max-width:55%}.matchup-pagination{display:flex;align-items:center;justify-content:flex-end;gap:1cqw}.matchup-pagination>span{font-size:clamp(11px,1.4cqw,17px);white-space:nowrap}.matchup-pagination .btn.lg{font-size:clamp(12px,1.5cqw,19px);min-height:35px;padding:.5em .9em;white-space:nowrap}.matchup-shell .matchup-target.is-selected{outline:3px solid #ffd633;outline-offset:-2px}.matchup-answer-sound{position:absolute;right:4px;bottom:2px;font-size:15px;color:#2474a6}.activity-player[data-game=matchup] #gameStage[data-matchup-layout=mixed] .matchup-content{grid-template-columns:minmax(0,1fr)}.activity-player[data-game=matchup] #gameStage[data-matchup-layout=mixed] .matchup-rows{grid-column:1}.activity-player[data-game=matchup] #gameStage[data-matchup-layout=mixed] .matchup-target{cursor:grab;touch-action:none;user-select:none}.matchup-drag-ghost .pair-face-picture{max-height:100px}@media(max-width:620px){.activity-player[data-game=matchup] #gameStage{padding:32px 8px 42px}.matchup-content{grid-template-columns:minmax(0,28%) minmax(0,1fr);gap:10px}.matchup-shell .matchup-rows,.matchup-shell .matchup-bank{gap:7px;grid-template-rows:repeat(var(--matchup-rows,3),minmax(48px,1fr))}.matchup-shell .matchup-row{gap:6px}.matchup-shell .matchup-prompt,.matchup-shell .matchup-target,.matchup-shell .matchup-answer{font-size:13px;padding:4px}.matchup-footer{flex-wrap:wrap;gap:6px}.matchup-footer .pair-game-status{max-width:100%;font-size:12px}.matchup-pagination{width:100%;justify-content:space-between}.matchup-pagination>span{font-size:12px}.matchup-pagination .btn.lg{font-size:12px;min-height:30px;padding:6px 9px}.matchup-shell .pair-game-instruction{font-size:12px}.matchup-shell .pair-listen{width:22px;height:22px;padding:3px}}
.matchup-review-side{flex:1;min-width:0}.matchup-review-side button{margin:5px;font-size:12px}.matchup-review-side .pair-face-content{min-height:80px}.matchup-review-side .pair-face-picture{height:70px;flex:none}
/* Pair match keeps each card alive and moves a same-size visual between stable pockets. */
.activity-player.game-shell[data-game=matchup]:not(:fullscreen){height:680px;aspect-ratio:auto}
.matchup-shell{position:relative}
.matchup-shell .matchup-rows,.matchup-shell .matchup-bank{transition:opacity .16s ease;grid-template-rows:repeat(var(--matchup-rows,3),minmax(68px,1fr))}
.matchup-bank-slot{position:relative;min-width:0;min-height:0;border:2px solid transparent;border-radius:6px}
.matchup-bank-slot.is-empty{border:2px dashed #7897aa55;background:#ffffff18}
.matchup-shell .matchup-target{padding:0;display:block;touch-action:none;user-select:none;box-shadow:none}
.matchup-shell .matchup-target .matchup-placeholder{display:grid;place-items:center;height:100%}
.matchup-shell .matchup-target .matchup-placeholder[hidden]{display:none}
.matchup-shell .matchup-target[data-filled=true]{border-color:transparent;background:transparent}
.matchup-shell .matchup-answer{width:100%;height:100%;margin:0;cursor:grab;touch-action:none;opacity:1}
.activity-player[data-game=matchup] .matchup-shell .matchup-answer:is(:hover,:active,.is-selected){transform:none}
.matchup-shell .matchup-answer.is-selected{outline:3px solid #d99716;outline-offset:-3px}
.matchup-shell .matchup-answer.is-dragging{opacity:.18}
.matchup-shell .matchup-answer:disabled{cursor:default;opacity:1}
.matchup-shell .matchup-target.is-correct>.matchup-answer{background:#e7f4df;border-color:#568f4a}
.matchup-shell .matchup-target.is-wrong>.matchup-answer{background:#fff0ee;border-color:#c56662}
.matchup-shell .matchup-target.is-correct:after{display:none}
.matchup-shell .matchup-target.is-drop-target{outline:3px solid #d8a126;outline-offset:-2px;background:#fff7d6}
.matchup-mark{position:absolute;right:5px;top:5px;z-index:2;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#437f3b;color:#fff;font:bold 19px/1 Arial;box-shadow:0 1px 3px #1234;pointer-events:none}
.matchup-mark:empty{display:none}
.is-wrong>.matchup-mark{background:#b84d49}
.matchup-motion-layer{position:absolute;inset:0;pointer-events:none;z-index:35;overflow:visible}
.matchup-shell .matchup-moving-card{position:absolute;display:flex;max-height:none;pointer-events:none;opacity:1!important;transform:none!important;transition:none!important;box-shadow:0 7px 15px #17364b38!important;will-change:left,top,width,height}
.matchup-shell .matchup-moving-card .pair-face-picture{max-height:100%;height:100%}
.matchup-footer .pair-game-status{background:#fff9e9ed;color:#213e50;padding:4px 8px;border-radius:5px}
@media(max-width:620px){.activity-player[data-game=matchup] .activity-clock{font-size:14px}}
@media(max-width:620px){.activity-player.game-shell[data-game=matchup]:not(:fullscreen){height:680px}.matchup-shell .matchup-rows,.matchup-shell .matchup-bank{grid-template-rows:repeat(var(--matchup-rows,3),minmax(72px,1fr))}.matchup-content{grid-template-columns:minmax(0,29%) minmax(0,1fr);gap:7px}.matchup-shell .matchup-prompt,.matchup-shell .matchup-answer{font-size:14px;padding:5px}.matchup-mark{width:22px;height:22px;font-size:17px;right:3px;top:3px}.matchup-shell .pair-game-instruction{font-size:13px}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .matchup-shell .matchup-rows,:where(:root:not([data-motion-managed])) .matchup-shell .matchup-bank{transition:none}}:where(:root[data-reduce-motion]) .matchup-shell .matchup-rows,:where(:root[data-reduce-motion]) .matchup-shell .matchup-bank{transition:none}

/* Update 1: Pair match words were set at 12px on tablets; give them child-readable size. */
.matchup-shell .matchup-prompt,.matchup-shell .matchup-target,.matchup-shell .matchup-answer{font-size:clamp(15px,2.5cqw,32px);overflow-wrap:anywhere}

/* A short memory deck uses the available height, with faces large enough to read. */
.activity-player[data-game=matchingpairs] .memory-grid{max-width:760px}
#activityPlayer[data-game=matchingpairs] #gameStage #mpStatus{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);margin:0;min-height:0;width:max-content;max-width:calc(100% - 24px);padding:5px 12px;font-size:14px;line-height:1.3;border-radius:12px;background:var(--style-surface,#fffaf0);color:var(--style-ink,#183c59)!important;text-shadow:none;z-index:2}
@media(max-width:620px){.activity-player[data-game=matchingpairs] .memory-grid{grid-template-columns:repeat(var(--memory-phone-columns,4),minmax(0,1fr));gap:10px}.activity-player[data-game=matchingpairs] .memory-card{aspect-ratio:1.45}.activity-player[data-game=matchingpairs] .memory-face{font-size:clamp(16px,5cqw,23px)}.activity-player[data-game=matchingpairs] .memory-back small{font-size:12px}}

/* Keep the status in its own row: it must never cover a card or intercept a
   child's tap. Ordinary decks share the remaining space before the first turn. */
#activityPlayer[data-game=matchingpairs] #gameStage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;align-content:stretch;overflow:hidden}
#activityPlayer[data-game=matchingpairs] #gameStage>.pair-game-instruction{grid-row:1;margin:0;font-size:clamp(14px,1.8cqw,21px)}
#activityPlayer[data-game=matchingpairs] #gameStage>.memory-grid{grid-row:2;height:100%;min-height:0;grid-auto-rows:minmax(0,1fr);padding:8px;overflow:auto;overscroll-behavior:contain}
#activityPlayer[data-game=matchingpairs] #gameStage>.memory-grid[data-text-reading=true]{grid-auto-rows:max-content;align-content:start}
#activityPlayer.activity-player[data-game=matchingpairs] #gameStage>.memory-grid:not([data-text-reading=true]) .memory-card{height:100%;min-height:0;aspect-ratio:auto}
#activityPlayer[data-game=matchingpairs] #gameStage>#mpStatus{grid-row:3;position:static;transform:none;justify-self:center;margin:0;max-width:100%;pointer-events:none}
@media(max-width:620px){
  #activityPlayer[data-game=matchingpairs] #gameStage .memory-grid:not([data-text-reading=true]) .pair-face-content:has(.pair-face-picture):has(.pair-face-text){flex-direction:row;gap:6px}
  #activityPlayer[data-game=matchingpairs] #gameStage .memory-grid:not([data-text-reading=true]) .pair-face-content:has(.pair-face-text) .pair-face-picture{flex:0 1 42%;width:42%;height:100%;max-height:100%}
  #activityPlayer[data-game=matchingpairs] #gameStage .memory-grid:not([data-text-reading=true]) .pair-face-content:has(.pair-face-picture) .pair-face-text{flex:1;min-width:0}
}

/* Source: css/speedsort.css; sha256: 08c59e66387b2095bb075fcbca7a6005637e43f59edf9d631d3a0fbece8aad40 */
/* Drop and sort (formerly Moving card sort): ClassPlay's drop tube (js/games/speedsort.js). One card at a time drifts down
   above the groups' bins: a glass tube, or in a learning world that world's own way down and bins
   (see the end of this file). The world also supplies the scene, colours, type and buttons through
   its --wk tokens. Original ClassPlay design (5.46.0; each world's own, 5.52.0). */
#activityPlayer[data-game=speedsort]{--dt-ink:var(--wk-flat-ink,var(--wk-ink,#173e54));--dt-paper:var(--wk-card-flat,var(--style-surface,#fffdf7));--dt-edge:var(--wk-line,#376883);--dt-drop:var(--wk-drop,#143b54);--dt-radius:var(--wk-radius-sm,16px);--dt-good:var(--wk-good,#2fbf71);--dt-good-d:var(--wk-good-d,#1d8f50);--dt-bad:var(--wk-bad,#e5484d);--dt-bad-d:var(--wk-bad-d,#a8262b)}
#activityPlayer[data-game=speedsort] #gameStage{padding:clamp(10px,1.8cqw,24px) clamp(12px,2.4cqw,34px);font-family:var(--wk-display,inherit)}
.dt-shell{container:dt-shell/size;position:relative;height:100%;min-height:0;isolation:isolate}
.dt-shell *{box-sizing:border-box}
.dt-icon{display:block;width:20px;height:20px;flex:none}
/* Said to a screen reader only: each card as it drops in. */
.dt-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dt-layout{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto 1.6em;gap:clamp(6px,1.2cqh,12px)}

/* ---------- The top row: how many are sorted, the next cards, and Pause ---------- */
.dt-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:44px}
.dt-where{justify-self:start;min-width:0;margin:0;padding:6px 14px;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(14px,1.5cqw,20px)/1.25 var(--wk-display,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-next{display:flex;align-items:center;gap:6px;min-height:40px;padding:3px 10px 3px 12px;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(12px,1.2cqw,16px)/1 var(--wk-display,inherit)}
.dt-next:not(:has(.dt-mini)){visibility:hidden}
.dt-next-cards{display:flex;gap:5px}
.dt-mini{display:grid;place-items:center;width:46px;height:34px;overflow:hidden;border:2px solid color-mix(in srgb,var(--dt-ink) 30%,transparent);border-radius:6px;background:var(--dt-paper);color:var(--dt-ink);font-size:10px;line-height:1.05;text-align:center}
.dt-mini img{max-width:90%;max-height:90%;object-fit:contain}
.dt-mini span{padding:0 2px;overflow:hidden;overflow-wrap:anywhere}
.dt-pause{justify-self:end;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:8px 16px;border:var(--wk-btn-line,2px solid var(--dt-edge));border-radius:999px;background:var(--wk-ghost,var(--style-surface,#fffdf7));color:var(--wk-ghost-ink,var(--style-ink,#173e54));box-shadow:0 3px 0 var(--dt-drop);font:800 clamp(14px,1.4cqw,18px)/1.15 var(--wk-display,inherit);cursor:pointer;touch-action:manipulation}
.dt-shell.is-held .dt-pause{background:var(--wk-btn,#246e98);color:var(--wk-btn-ink,#fff)}
.dt-pause:disabled{opacity:.5;cursor:default}
:is(.dt-pause,.dt-bin,.dt-listen):focus-visible{outline:4px solid var(--wk-mark,#ffd34a);outline-offset:3px}

/* ---------- The glass tube ---------- */
.dt-tube-zone{container:dt-zone/size;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:6px;min-height:0}
.dt-tube{position:relative;width:min(100%,max(240px,min(38cqw,58cqh)),460px);height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:3px solid #ffffffc4;border-top:0;border-bottom:0;border-radius:0 0 30px 30px;background:linear-gradient(90deg,#ffffff4d,#ffffff14 22%,#ffffff08 62%,#ffffff3d 86%,#ffffff1f);box-shadow:inset 0 0 0 2px #00000014,0 8px 24px #00000026}
/* The tube's coloured rim at the top and its floor at the bottom. */
.dt-cap{height:16px;margin:0 -12px;border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--wk-c2,#f2b632) 75%,#fff),var(--wk-c2,#f2b632));box-shadow:0 3px 0 var(--wk-c2d,#b47f0a)}
.dt-floor{height:10px;margin:0 6px 4px;border-radius:999px;background:color-mix(in srgb,var(--dt-ink) 22%,transparent)}
.dt-shell.is-low .dt-floor{background:color-mix(in srgb,var(--dt-bad) 70%,transparent)}
/* The lane the card falls down. The card's height is a share of the lane, so it always has
   most of the lane still to fall, however short the game is. */
.dt-lane{container:dt-lane/size;position:relative;min-height:0;margin:8px 14px 6px;overflow:hidden}
.dt-card{position:absolute;left:0;right:0;top:0;height:clamp(44px,36cqh,170px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border:var(--wk-card-line,3px solid var(--dt-edge));border-radius:var(--dt-radius);background:var(--dt-paper);color:var(--dt-ink);box-shadow:var(--wk-card-drop,0 4px 0 var(--dt-drop),0 8px 14px #0000002e);cursor:grab;touch-action:none;user-select:none;will-change:transform}
.dt-card.has-picture{height:clamp(80px,50cqh,280px)}
.dt-card.is-dragging{opacity:.35}
.dt-picture{display:flex;justify-content:center;align-items:center;flex:1 1 auto;width:100%;min-height:0}
.dt-picture img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.dt-text{max-width:100%;font:800 clamp(18px,min(9cqw,7cqh),40px)/1.15 var(--wk-display,inherit);text-align:center;overflow-wrap:normal}
.dt-text.is-long{font-size:15px;line-height:1.35;text-align:start;overflow-wrap:anywhere;overflow-y:auto;max-height:100%;overscroll-behavior:contain;scrollbar-width:thin}
/* Beside a picture, long words keep up to half the card and scroll there. */
.dt-card.has-picture .dt-text.is-long{flex:0 0 auto;max-height:50%}
/* A card with a recording keeps its words clear of its Listen button. */
.dt-card:has(.dt-listen){padding-inline:50px}
.dt-listen{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:38px;height:38px;padding:7px;border:0;border-radius:50%;background:var(--wk-btn,#246e98);color:var(--wk-btn-ink,#fff);box-shadow:var(--wk-btn-drop,0 2px 0 var(--dt-drop));cursor:pointer}
.dt-time{width:min(100%,max(240px,min(38cqw,58cqh)),460px);height:8px;border-radius:999px;background:color-mix(in srgb,var(--dt-ink) 18%,transparent);overflow:hidden}
.dt-time i{display:block;height:100%;border-radius:inherit;background:var(--wk-c3,#4f9a34);transform-origin:0 50%}
.dt-shell.is-low .dt-time i{background:var(--dt-bad)}
/* A card on its way to a bin, and a card being dragged. */
.dt-flying,.dt-ghost{position:absolute;z-index:40;margin:0;pointer-events:none;transform-origin:50% 50%}
.dt-ghost{z-index:41;cursor:grabbing;box-shadow:0 14px 28px #00000040;opacity:.96;rotate:-2deg}

/* ---------- The bins ---------- */
.dt-bins{display:grid;grid-template-columns:repeat(var(--dt-columns,3),minmax(0,1fr));gap:clamp(8px,1.2cqw,16px)}
.dt-bin{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:clamp(78px,15cqh,128px);margin:0;padding:0 8px 8px;border:0;border-radius:6px 6px 18px 18px;background:linear-gradient(180deg,color-mix(in srgb,var(--dt-tone) 82%,#fff),var(--dt-tone) 40%,var(--dt-tone-d));box-shadow:inset 0 -6px 0 #0000001f,0 4px 0 var(--dt-tone-d),0 8px 14px #00000029;color:var(--dt-ink);font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,box-shadow .15s ease}
/* The bin's open mouth. */
.dt-bin-mouth{height:12px;margin:0 -8px 6px;border-radius:6px 6px 50% 50%/6px 6px 12px 12px;background:color-mix(in srgb,var(--dt-tone-d) 70%,#000);box-shadow:inset 0 4px 4px #00000059}
.dt-bin-face{display:flex;align-items:safe center;justify-content:safe center;gap:8px;min-width:0;min-height:0;padding:4px 10px;border-radius:10px;background:var(--dt-paper);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--dt-tone-d) 40%,transparent)}
.dt-bin-picture{height:clamp(28px,7cqh,52px);max-width:42%;object-fit:contain}
.dt-bin-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;min-width:0;overflow:hidden;font:800 clamp(14px,1.8cqw,24px)/1.1 var(--wk-display,inherit);overflow-wrap:anywhere;text-align:center}
/* A group named only by its picture: the picture may use the bin's width. */
.dt-bin-title:empty{display:none}
.dt-bin-face:has(.dt-bin-title:empty) .dt-bin-picture{max-width:90%}
.dt-bin-count{position:absolute;right:-6px;top:-8px;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--dt-paper);color:var(--dt-ink);font:900 14px/1 var(--wk-display,inherit);box-shadow:0 0 0 3px var(--dt-tone-d)}
.dt-bin-key{position:absolute;left:6px;top:-9px;display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 12px/1 var(--wk-display,inherit)}
@media (hover:hover){.dt-bin:not(:disabled,[aria-disabled=true]):hover{transform:translateY(-3px)}}
.dt-bin.is-over{transform:translateY(-4px) scale(1.04);box-shadow:0 0 0 4px var(--wk-mark,#ffd34a),0 4px 0 var(--dt-tone-d)}
.dt-bin.is-good{box-shadow:0 0 0 5px var(--dt-good),0 4px 0 var(--dt-tone-d)}
.dt-bin.is-bad{box-shadow:0 0 0 5px var(--dt-bad),0 4px 0 var(--dt-tone-d)}
.dt-bin:disabled{cursor:default}
/* Paused: the bins wait with the card. */
.dt-bin[aria-disabled=true]{opacity:.62;cursor:default}

/* ---------- What happened ---------- */
.dt-status{justify-self:center;max-width:min(92%,760px);min-height:1.5em;margin:0;padding:.25em .95em;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(13px,1.4cqw,18px)/1.3 var(--wk-display,inherit);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-status:empty{visibility:hidden}
.dt-review img{max-height:56px}

/* ---------- Narrow and short games ---------- */
@container dt-shell (max-width:560px){
  .dt-top{grid-template-columns:minmax(0,1fr) auto}
  .dt-next{display:none}
  .dt-pause .dt-pause-label{display:none}
  .dt-pause{padding:8px 12px}
  .dt-bins{grid-template-columns:repeat(min(var(--dt-columns,3),2),minmax(0,1fr))}
  .dt-layout[data-groups="3"] .dt-bins{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dt-bin-title{font-size:clamp(13px,4cqw,18px)}
  /* The status may take two lines on a phone instead of being cut off. */
  .dt-layout{grid-template-rows:auto minmax(0,1fr) auto 2.6em}
  .dt-status{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;align-self:center;border-radius:14px;white-space:normal;font-size:13px;line-height:1.25}
}
/* Five to eight groups: lower bins leave the tube more room. */
.dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bin{min-height:clamp(56px,9cqh,96px)}
@container dt-shell (max-width:560px) and (orientation:portrait){
  .dt-bin-title{-webkit-line-clamp:2}
  .dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bin{min-height:48px}
  .dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bin-picture{height:clamp(24px,6cqh,40px)}
  /* Seven or eight groups: three slimmer bins to a row, so the tube keeps its height. */
  .dt-layout:is([data-groups="7"],[data-groups="8"]) .dt-bins{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px}
  .dt-layout:is([data-groups="7"],[data-groups="8"]) .dt-bin{padding:0 5px 5px}
  .dt-layout:is([data-groups="7"],[data-groups="8"]) .dt-bin-mouth{height:8px;margin:0 -5px 4px}
  .dt-layout:is([data-groups="7"],[data-groups="8"]) .dt-bin-face{gap:4px;padding:2px 6px}
}
@container dt-shell (max-height:440px) and (orientation:portrait){
  .dt-bin{min-height:56px}
  .dt-layout{grid-template-rows:auto minmax(0,1fr) auto 1.4em}
}
/* A short, wide game (a phone on its side, a low window): the tube stands beside the bins and
   keeps the full height. The count and the next cards give way; the status and Pause sit under
   the bins. */
@container dt-shell (max-height:440px) and (orientation:landscape){
  .dt-layout{grid-template-columns:minmax(170px,min(36%,330px)) minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"tube bins bins" "tube status pause";column-gap:clamp(10px,2cqw,20px);row-gap:8px}
  .dt-top{display:contents}
  .dt-where,.dt-next{display:none}
  .dt-pause{grid-area:pause;align-self:end}
  .dt-tube-zone{grid-area:tube}
  .dt-bins,.dt-layout[data-groups="3"] .dt-bins{grid-area:bins;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(44px,1fr);gap:8px}
  .dt-layout:is([data-groups="3"],[data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bins{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Each bin is sized by its row, and its label plate and words by the bin. */
  .dt-bin,.dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bin{container:dt-bin/size;min-height:44px;padding:0 5px 5px}
  .dt-bin-mouth{height:8px;margin:0 -5px 4px}
  .dt-bin-face{align-self:center;gap:6px;min-height:min(100%,40px);max-height:100%;padding:1px 6px;overflow:hidden}
  .dt-bin-title{-webkit-line-clamp:2;font-size:clamp(13px,min(11cqw,20cqh),28px);line-height:1.05}
  .dt-bin-picture{height:clamp(20px,34cqh,72px);max-width:45%}
  .dt-bin-face:has(.dt-bin-title:empty) .dt-bin-picture{height:clamp(24px,58cqh,110px);max-width:90%}
  .dt-status{grid-area:status;justify-self:start;align-self:center;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;border-radius:14px;white-space:normal;font-size:13px;line-height:1.25}
}
/* Seven or eight groups on a wider screen: four bins to a row. */
@container dt-shell (max-height:440px) and (orientation:landscape) and (min-width:760px){
  .dt-layout:is([data-groups="7"],[data-groups="8"]) .dt-bins{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:620px){
  #activityPlayer.game-shell[data-game=speedsort]:not(:fullscreen){height:clamp(600px,90svh,760px)}
  #activityPlayer[data-game=speedsort] #gameStage{padding:10px}
}
/* High contrast: bins keep an edge, the time left stays visible, and a bin's right or wrong
   answer and the card being dragged over it are outlined. */
@media (forced-colors:active){
  .dt-bin{border:2px solid ButtonText}
  .dt-time{border:1px solid CanvasText}
  .dt-time i,.dt-shell.is-low .dt-time i{forced-color-adjust:none;background:Highlight}
  .dt-bin:is(.is-good,.is-over){outline:4px solid Highlight;outline-offset:2px}
  .dt-bin.is-bad{outline:4px dashed Highlight;outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) :is(.dt-bin,.dt-card){transition:none}}
:where(:root[data-reduce-motion]) :is(.dt-bin,.dt-card){transition:none}

/* ---------- Each learning world's own way down and its own bins ----------
   The world sets the drawings (js/themekit/registry.js: IQ.dropWorld, as --wk-drop-* and --wk-bin-*);
   without a world the glass tube and plain bins above stay. Original ClassPlay drawings (5.52.0). */
#activityPlayer[data-world-kit] .dt-tube{--dt-tube-w:min(100cqw,max(240px,min(38cqw,58cqh)),460px);--dt-head-h:min(calc(var(--dt-tube-w) * 1.1538 * var(--wk-drop-head-k,.06)),28cqh);--dt-foot-h:min(calc(var(--dt-tube-w) * 1.1538 * var(--wk-drop-foot-k,.04)),12cqh);width:var(--dt-tube-w);border:0;border-radius:0;background:none;box-shadow:none;isolation:isolate}
/* The walls, and what the card falls through, between the top and the bottom. */
#activityPlayer[data-world-kit] .dt-tube::before{content:'';position:absolute;inset:var(--dt-head-h) 0 var(--dt-foot-h);z-index:-1;background:var(--wk-drop-tile-l) left top/var(--wk-drop-wall,10%) auto repeat-y,var(--wk-drop-tile-r) right top/var(--wk-drop-wall,10%) auto repeat-y,var(--wk-drop-fill,none);pointer-events:none}
/* The top and the bottom reach a little past the walls. */
#activityPlayer[data-world-kit] .dt-cap{position:relative;z-index:2;height:var(--dt-head-h);margin:0 calc(var(--dt-tube-w) * -.0769);border-radius:0;background:var(--wk-drop-head) center bottom/100% auto no-repeat;box-shadow:none}
#activityPlayer[data-world-kit] .dt-floor,#activityPlayer[data-world-kit] .dt-shell.is-low .dt-floor{position:relative;z-index:2;height:var(--dt-foot-h);margin:0 calc(var(--dt-tube-w) * -.0769);border-radius:0;background:var(--wk-drop-foot) center top/100% auto no-repeat;transition:filter .2s ease}
/* Running out of time: the bottom glows. */
#activityPlayer[data-world-kit] .dt-shell.is-low .dt-floor{filter:drop-shadow(0 -3px 5px var(--dt-bad))}
#activityPlayer[data-world-kit] .dt-lane{z-index:1;margin:4px calc(var(--wk-drop-wall,10%) + 5px) 2px}
#activityPlayer[data-world-kit] .dt-time{width:var(--dt-tube-w)}
/* Construction site: the crane lowers each card on its hook. */
#activityPlayer[data-world-kit=construction-site] .dt-lane .dt-card::before{content:'';position:absolute;left:50%;bottom:calc(100% + 14px);width:3px;height:200cqh;translate:-50% 0;background:#2a2f36}
#activityPlayer[data-world-kit=construction-site] .dt-lane .dt-card::after{content:'';position:absolute;left:50%;bottom:calc(100% - 8px);width:24px;height:24px;translate:-50% 0;background:var(--wk-drop-hook) center/contain no-repeat}

/* The bins: the world's shape takes the group's colour (or the material's own colour, tinted by it);
   the outline and shading keep their line width at any size and small drawings keep their shape.
   A bin keeps a wide shape: in a wide row it stays at most a little over four times as wide as it is
   high, in the middle of its place. */
#activityPlayer[data-world-kit] .dt-bins{--dt-bin-h:clamp(86px,17cqh,140px)}
#activityPlayer[data-world-kit] .dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bins{--dt-bin-h:clamp(64px,11cqh,104px)}
#activityPlayer[data-world-kit] #gameStage .dt-bin{--dt-bin-c:color-mix(in srgb,var(--dt-tone) var(--wk-bin-mix,100%),var(--wk-bin-base,#fff));container:dt-bin/size;justify-self:center;width:100%;max-width:calc(var(--dt-bin-h) * 4.4);min-height:var(--dt-bin-h);isolation:isolate;padding:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 5px 4px #00000040)}
#activityPlayer[data-world-kit] .dt-bin::before,#activityPlayer[data-world-kit] .dt-bin::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
#activityPlayer[data-world-kit] .dt-bin::before{background:var(--wk-bin-texture,linear-gradient(#0000,#0000)),linear-gradient(180deg,color-mix(in srgb,var(--dt-bin-c) 76%,#fff),var(--dt-bin-c) 46%,color-mix(in srgb,var(--dt-bin-c) 80%,#000));-webkit-mask:var(--wk-bin-shape) center/100% 100% no-repeat,var(--wk-bin-shape-tile,linear-gradient(#0000,#0000));mask:var(--wk-bin-shape) center/100% 100% no-repeat,var(--wk-bin-shape-tile,linear-gradient(#0000,#0000))}
#activityPlayer[data-world-kit] .dt-bin::after{background:var(--wk-bin-front,none) center/100% 100% no-repeat,var(--wk-bin-deco,linear-gradient(#0000,#0000)),var(--wk-bin-art) center/100% 100% no-repeat}
/* The label sits where the drawing leaves it room, and its words are sized by the label. */
#activityPlayer[data-world-kit] .dt-bin-mouth{height:calc(var(--wk-bin-top,30) * 1cqh);margin:0;background:none;box-shadow:none}
#activityPlayer[data-world-kit] .dt-bin-face{container-type:size;align-self:stretch;min-height:0;max-height:none;overflow:hidden;margin:0 calc(var(--dt-bin-side,var(--wk-bin-side,10)) * 1cqw) calc(var(--wk-bin-bottom,10) * 1cqh);padding:2px 8px;gap:6px;border-radius:var(--wk-bin-plate,10px);background:var(--dt-paper);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--dt-tone-d) 50%,transparent),0 2px 0 #00000029}
#activityPlayer[data-world-kit] .dt-bin-title{-webkit-line-clamp:2;font-size:clamp(13px,min(15cqw,44cqh),26px);line-height:1.05}
#activityPlayer[data-world-kit] .dt-bin-picture{height:clamp(16px,80cqh,64px);max-width:42%}
#activityPlayer[data-world-kit] .dt-bin-face:has(.dt-bin-title:empty) .dt-bin-picture{height:clamp(18px,88cqh,72px);max-width:90%}
#activityPlayer[data-world-kit] .dt-bin.is-over{box-shadow:none;filter:drop-shadow(0 0 2px var(--wk-mark,#ffd34a)) drop-shadow(0 0 2px var(--wk-mark,#ffd34a)) drop-shadow(0 5px 4px #00000040)}
#activityPlayer[data-world-kit] .dt-bin.is-good{box-shadow:none;filter:drop-shadow(0 0 3px var(--dt-good)) drop-shadow(0 0 2px var(--dt-good)) drop-shadow(0 5px 4px #00000040)}
#activityPlayer[data-world-kit] .dt-bin.is-bad{box-shadow:none;filter:drop-shadow(0 0 3px var(--dt-bad)) drop-shadow(0 0 2px var(--dt-bad)) drop-shadow(0 5px 4px #00000040)}
#activityPlayer[data-world-kit] .dt-bin.is-good .dt-bin-face{box-shadow:inset 0 0 0 3px var(--dt-good-d),0 2px 0 #00000029}
#activityPlayer[data-world-kit] .dt-bin.is-bad .dt-bin-face{box-shadow:inset 0 0 0 3px var(--dt-bad-d),0 2px 0 #00000029}
#activityPlayer[data-world-kit] .dt-bin-count{top:-6px;right:-4px}
/* A phone: narrow bins give the label more of their width. */
@container dt-shell (max-width:560px) and (orientation:portrait){
  #activityPlayer[data-world-kit] .dt-bins{--dt-bin-h:clamp(74px,13cqh,104px)}
  #activityPlayer[data-world-kit] .dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bins{--dt-bin-h:56px}
  #activityPlayer[data-world-kit] .dt-bin{--dt-bin-side:calc(var(--wk-bin-side,10) * .55)}
  #activityPlayer[data-world-kit] .dt-bin-face{padding:2px 5px;gap:4px}
}
@container dt-shell (max-height:440px) and (orientation:portrait){#activityPlayer[data-world-kit] .dt-bins{--dt-bin-h:60px}}
/* A short, wide game: up to four bins stand one above another beside the way down (five to eight in
   two columns), each as wide as its height allows. */
@container dt-shell (max-height:440px) and (orientation:landscape){
  #activityPlayer[data-world-kit] #gameStage .dt-bins,#activityPlayer[data-world-kit] #gameStage .dt-layout:is([data-groups="3"],[data-groups="4"]) .dt-bins{grid-template-columns:minmax(0,1fr)}
  #activityPlayer[data-world-kit] #gameStage .dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bins{grid-template-columns:repeat(2,minmax(0,1fr))}
  #activityPlayer[data-world-kit] #gameStage .dt-bin,#activityPlayer[data-world-kit] #gameStage .dt-layout:is([data-groups="5"],[data-groups="6"],[data-groups="7"],[data-groups="8"]) .dt-bin{width:auto;max-width:100%;height:100%;min-height:0;aspect-ratio:3.6}
}

/* Source: css/groupsort.css; sha256: cebf8640f8eb2cb0d698ede25ece8da3fa854b7b9f881991d40ab4edfd4aa9de */
/* Category sort (js/games/groupsort.js): each learning world's own container for a group: a cave, a fish
   tank, a rocket, a silo, a tower... drawn for ClassPlay (js/themekit/registry.js: IQ.groupWorld), set by
   the world as --wk-group-*. Its walls repeat down to any height and its top and bottom keep their shape;
   inside, where the cards go, it is a calm tint of the group's own colour, equally bright for every group,
   with the world's material only at its edges. Original ClassPlay design (5.54.0, refined in 5.55.0). */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-col{--gs-c:color-mix(in srgb,var(--wk-c) 32%,var(--wk-group-paper,#fff));position:relative;isolation:isolate;padding:0 0 calc(var(--wk-group-foot-k,.12) * 100%);border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
/* The drawing sits behind the label and the cards, measured by its own width. */
.sort-col-art{display:none}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-col-art{display:block;position:absolute;inset:0;z-index:-1;container:sort-art/inline-size;filter:drop-shadow(0 4px 4px #00000033);pointer-events:none}
/* The inside and its walls, between the top and the bottom: the world's material shades the edges and shows
   faintly through the group's tint. */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-col-art::before{content:'';position:absolute;inset:calc(var(--wk-group-top-k,.3) * 100cqw - 2px) 0 calc(var(--wk-group-foot-k,.12) * 100cqw - 2px);background:var(--wk-group-tile-l) left top/var(--wk-group-wall,7%) auto repeat-y,var(--wk-group-tile-r) right top/var(--wk-group-wall,7%) auto repeat-y,linear-gradient(90deg,color-mix(in srgb,var(--wk-group-base,#fff) 38%,transparent),transparent 18% 82%,color-mix(in srgb,var(--wk-group-base,#fff) 38%,transparent)),linear-gradient(color-mix(in srgb,var(--gs-c) 74%,transparent),color-mix(in srgb,var(--gs-c) 74%,transparent)),var(--wk-group-texture,linear-gradient(#0000,#0000)),linear-gradient(180deg,color-mix(in srgb,var(--gs-c) 80%,#fff),var(--gs-c) 50%,color-mix(in srgb,var(--gs-c) 92%,#000));pointer-events:none}
/* The top and the bottom keep their shape. */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-col-art::after{content:'';position:absolute;inset:0;background:var(--wk-group-top) center top/100% auto no-repeat,var(--wk-group-foot) center bottom/100% auto no-repeat}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-col.over{background:none;outline:0}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-col.over .sort-col-art{filter:drop-shadow(0 0 3px var(--wk-mark,#ffd34a)) drop-shadow(0 0 3px var(--wk-mark,#ffd34a))}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-col:focus-visible{outline:4px solid var(--wk-mark,#ffd34a);outline-offset:3px}
/* The group's label: a plate on the container, edged in the group's colour. */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-heading{position:relative;z-index:1;flex:none;container-type:inline-size;flex-wrap:wrap;row-gap:2px;margin:calc(var(--wk-group-sign,.2) * 100%) calc(var(--wk-group-wall,7%) + 5px) 8px;padding:4px 8px;min-height:0;gap:6px;border-radius:10px;background:var(--wk-card-flat,#fffdf7);color:var(--wk-flat-ink,#173e54);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--wk-c) 72%,transparent),0 2px 0 #00000033;text-shadow:none;corner-shape:round}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-heading :is(h4,span,b){color:var(--wk-flat-ink,#173e54);text-shadow:none;line-height:1.1}
/* The name and picture are sized by the plate, so a narrow container keeps its name whole (below the
   picture when they do not fit side by side). */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-heading h4{font-size:clamp(14px,19cqw,24px);overflow-wrap:normal}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-heading img{width:auto;height:clamp(22px,26cqw,52px);max-width:45%;object-fit:contain}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .pile{position:relative;z-index:1;margin:0 calc(var(--wk-group-wall,7%) + 4px);padding:2px 0 6px}
/* A place waiting for a card: a plain, light recess on the tint, outlined in the group's colour. */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-empty-slot{background:color-mix(in srgb,#fff 60%,transparent);border:2px dashed color-mix(in srgb,var(--wk-cd,#2d4b5a) 40%,transparent);box-shadow:inset 0 1px 3px #0000001f}
/* A phone's narrow containers let their cards reach over the walls a little. */
@media (max-width:620px){
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-heading{margin-inline:calc(var(--wk-group-wall,7%) + 2px)}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .pile{margin:0 calc(var(--wk-group-wall,7%) * .4)}
}
/* On a computer or a tablet the board and Check share the game area, so nothing reaches under the controls,
   and js/games/groupsort.js (fitBoard) sizes the cards: the tray's cards are as large as the tray allows
   and keep that size and shape in their containers ([data-board=cards]); a lesson too big for that holds
   them there as labels ([data-board=labels]). A phone keeps its own scrolling layout. */
@media (min-width:621px){
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort]{display:flex;flex-direction:column;padding:40px clamp(10px,1.4vw,22px) 8px}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout{--sort-containers:1;flex:1 1 auto;min-height:0;height:auto;grid-template-rows:minmax(0,1fr)}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .next-row{position:static;flex:none;display:flex;justify-content:center;margin:8px 0 0}
  /* Five or six groups stand in two rows of three, each group's name a little higher on its container. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-cols:has(>.sort-col:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));row-gap:10px}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-cols:has(>.sort-col:nth-child(5)) .sort-heading{margin-top:calc(var(--wk-group-sign,.2) * 55%)}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-deck{grid-template-columns:repeat(var(--sort-tray-columns,var(--bank-columns)),var(--sort-card-width));justify-content:center}
  /* Every card, in the tray or kept in a container, and every place for one: one width and one height. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true])[data-board] :is(.sort-card:not(.sort-label),[data-board=cards] .sort-empty-slot){width:var(--sort-card-width)!important;max-width:none;height:auto!important;min-height:var(--sort-card-h,0px)!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout[data-board=cards] .sort-empty-slot{height:var(--sort-card-h)!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout[data-board=cards] .pile{grid-template-columns:repeat(var(--sort-pile-columns,1),var(--sort-card-width));justify-content:center;gap:8px}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout[data-board=cards] .pile:has(.sort-label){grid-template-columns:minmax(0,1fr)}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-card.has-picture:not(.sort-label){padding-block-start:14px!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-card:not(.sort-label) .sort-card-picture{height:calc(var(--sort-card-width) * var(--sort-picture,.66))}
  /* A picture alone fills its card. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-card.has-picture:not(.sort-label):not(:has(.sort-caption:not(:empty))){padding:0!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-card.has-picture:not(.sort-label):not(:has(.sort-caption:not(:empty))) .sort-card-picture{height:var(--sort-card-h,var(--sort-card-width))}
  /* Word-only cards are wide tiles, their words in the middle and as large as fits (js/game-text-fit.js). */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout[data-word-tiles=true] .sort-card:not(.sort-label){justify-content:center;padding:4px 22px!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout[data-word-tiles=true] .sort-card:not(.sort-label) .sort-caption{text-align:center;padding-block:0}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout[data-word-tiles=true] .sort-card:not(.sort-label) .sort-mark{inset:3px 3px auto auto;translate:none}
  /* An empty tray says so across its middle. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-deck:empty{align-content:center}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-deck:empty::after{grid-column:1/-1;justify-self:center;max-width:26ch;padding:0 12px;text-align:center;font-size:clamp(14px,1.6cqw,19px);line-height:1.35;color:var(--wk-on-scene,#fff);text-shadow:var(--wk-on-scene-shadow,0 1px 2px #0006);opacity:.95}
  html[lang^=zh] #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-deck:empty::after{content:"卡片都分好了，点“检查”核对答案"}
  /* Labels: a picture beside its word, one under another (pictures alone side by side), as tall as the
     container leaves room for. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout[data-board=labels] .pile{grid-template-columns:repeat(var(--sort-label-columns,1),minmax(0,1fr));gap:6px}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) :is(.sort-label,[data-board=labels] .sort-empty-slot){width:100%;max-width:none;height:var(--sort-chip-h,44px)!important;min-height:0!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label{flex-direction:row;justify-content:flex-start;gap:6px;padding:3px 22px 3px 5px!important;overflow:hidden}
  /* A label is plain: the world's corner pictures stay on the tray's cards. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label.has-picture:not(.ok,.no){background:var(--wk-card-photo,#fffdf7)}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label .sort-card-picture{flex:none;width:calc(var(--sort-chip-h,44px) - 14px);height:calc(var(--sort-chip-h,44px) - 14px);min-height:0}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label .sort-caption{flex:1 1 0;width:auto;min-width:0;text-align:start;font-size:clamp(12px,calc(var(--sort-chip-h,44px) * .4),20px)}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true])[data-plain-labels=true] .sort-label:has(.sort-caption:not(:empty)) .sort-card-picture{display:none}
  /* Words alone keep the middle; a label keeps room at its end for the tick or cross. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label:is(:not(.has-picture),[data-plain-labels=true] *){justify-content:center;padding:3px 22px 3px 6px!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label:not(.has-picture) .sort-caption{text-align:center}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label .sort-mark{inset:50% 3px auto auto;width:18px;height:18px;font-size:13px;translate:0 -50%}
  /* A picture alone fills its label, its mark on the corner. */
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label.has-picture:not(:has(.sort-caption:not(:empty))){justify-content:center;padding:2px!important;height:var(--sort-chip-h,44px)!important}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label.has-picture:not(:has(.sort-caption:not(:empty))) .sort-card-picture{width:100%;height:100%}
  #activityPlayer[data-world-kit][data-phase] #gameStage[data-game=groupsort] .sort-layout:not([data-wordy=true]) .sort-label.has-picture:not(:has(.sort-caption:not(:empty))) .sort-mark{inset:2px 2px auto auto;translate:none}
}

/* Source: css/flashcards.css; sha256: aa802cea4a5e84bc422c955f22b443eae03f58d4fb095442d97e60a99f141fcb */
/* Flashcards: ClassPlay's study trays (js/games/flashcards.js). An index card in the middle,
   "Practise again" and "Got it" trays either side, a row of marks for the round below.
   The learning world supplies the scene, colours, type and buttons. Original ClassPlay design (5.43.0). */
#activityPlayer[data-game=flashcards]{--fl-ink:var(--wk-flat-ink,var(--style-ink,#173e54));--fl-paper:var(--wk-card-flat,var(--style-surface,#fffdf7));--fl-edge:var(--wk-line,#376883);--fl-drop:var(--wk-drop,#143b54);--fl-radius:var(--wk-radius-sm,18px);--fl-know:var(--wk-good,#2fbf71);--fl-know-d:var(--wk-good-d,#1d8f50);--fl-again:var(--wk-c2,#ffbe2e);--fl-again-d:var(--wk-c2d,#c98a0e)}
#activityPlayer[data-game=flashcards] #gameStage{padding:clamp(10px,2cqw,28px) clamp(12px,2.6cqw,36px) clamp(10px,1.6cqw,22px);font-family:var(--wk-display,inherit)}
.fl-shell{position:relative;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(8px,1.2cqw,16px);color:var(--fl-ink);isolation:isolate}
.fl-shell *{box-sizing:border-box}
.fl-shell [hidden]{display:none!important}
.fl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.fl-where{margin:0;padding:6px 14px;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(14px,1.5cqw,20px)/1.25 var(--wk-display,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}

/* ---------- The desk: trays and the card ---------- */
.fl-desk{display:grid;grid-template-columns:clamp(112px,15cqw,210px) minmax(0,1fr) clamp(112px,15cqw,210px);gap:clamp(12px,2.4cqw,34px);min-height:0}
.fl-shell[data-sorting=off] .fl-desk{grid-template-columns:minmax(0,1fr)}
.fl-table{container:fl-table/size;position:relative;display:grid;place-items:center;min-width:0;min-height:0}
.fl-card-wrap,.fl-pile{width:min(100cqw,calc(100cqh * 1.55),1040px);aspect-ratio:1.55}
.fl-card-wrap{position:relative;z-index:2;perspective:1800px}
.fl-pile{position:absolute;z-index:1;pointer-events:none}
.fl-pile i{position:absolute;inset:0;display:none;border:var(--wk-card-line,3px solid var(--fl-edge));border-radius:var(--fl-radius);background:var(--fl-paper);box-shadow:0 3px 0 var(--fl-drop)}
.fl-pile i:nth-child(1){translate:9px 10px;rotate:1.6deg;filter:brightness(.9)}
.fl-pile i:nth-child(2){translate:4px 5px;rotate:-.8deg;filter:brightness(.95)}
.fl-pile[data-waiting="1"] i:nth-child(2),.fl-pile[data-waiting="2"] i{display:block}
.fl-card{position:absolute;inset:0;border-radius:var(--fl-radius);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.25,1);cursor:pointer;outline-offset:5px}
.fl-card.is-turned{transform:rotateX(180deg)}
.fl-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:clamp(28px,9%,64px) 7% 6%;overflow:hidden;border:var(--wk-card-line,3px solid var(--fl-edge));border-radius:inherit;background:var(--fl-paper);color:var(--fl-ink);box-shadow:var(--wk-card-drop,0 4px 0 var(--fl-drop),0 8px 14px #0000002e);backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center}
/* The front has a coloured edge; the back is ruled like an index card. */
.fl-front::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(7px,1.6%,12px);background:var(--wk-c3,#22bfd2);pointer-events:none}
.fl-back{transform:rotateX(180deg);background-color:var(--fl-paper);background-image:linear-gradient(180deg,transparent 0 calc(14% - 1px),color-mix(in srgb,var(--wk-c1,#e2683c) 55%,transparent) calc(14% - 1px) calc(14% + 1px),transparent calc(14% + 1px)),repeating-linear-gradient(180deg,transparent 0 calc(var(--fl-rule,11%) - 1px),color-mix(in srgb,var(--wk-c3,#22bfd2) 22%,transparent) calc(var(--fl-rule,11%) - 1px) var(--fl-rule,11%));background-position:0 0,0 14%}
.fl-tag{position:absolute;left:clamp(10px,2.4%,20px);top:clamp(12px,3.4%,24px);z-index:2;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--fl-ink) 9%,transparent);color:var(--fl-ink);font:800 clamp(11px,1.1cqw,14px)/1.4 var(--wk-display,inherit);letter-spacing:.04em;text-transform:uppercase;opacity:.75;pointer-events:none}
.fl-face .pair-face-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:clamp(6px,1.4cqw,16px);width:100%;height:100%;min-height:0;font-size:clamp(18px,4cqw,52px);font-weight:800;line-height:1.15;overflow-wrap:normal}
.fl-face .pair-face-picture{display:flex;align-items:center;justify-content:center;flex:1 1 auto;width:100%;min-height:min(72px,30%);max-height:62%;overflow:hidden}
.fl-face .pair-face-picture img{max-width:100%;max-height:100%;object-fit:contain}
.fl-face .pair-face-text{flex:0 0 auto;max-width:100%;padding-block:2px}
.fl-face .pair-face-content[data-reading=true]{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 6px 2px 2px;text-align:start}
.fl-face .pair-face-content[data-reading=true] .pair-face-picture{flex:0 0 auto;height:min(160px,40%);min-height:72px}
.fl-face .pair-audio-art{width:min(42%,150px);height:auto;max-height:70%}
.fl-card[data-mark=know] .fl-face{border-color:var(--fl-know-d)}
.fl-card[data-mark=again] .fl-face{border-color:var(--fl-again-d)}
.fl-ribbon{position:absolute;right:-8px;top:14px;z-index:3;padding:6px 14px 6px 12px;border-radius:8px 0 0 8px;background:var(--fl-know-d);color:#fff;font:900 clamp(13px,1.35cqw,18px)/1.2 var(--wk-display,inherit);box-shadow:0 3px 0 #00000033;pointer-events:none}
.fl-ribbon[data-mark=again]{background:var(--fl-again-d)}
.fl-ribbon::after{content:"";position:absolute;right:0;bottom:-8px;border:4px solid transparent;border-top-color:#0000004d;border-left-color:#0000004d}
/* The round notice sits on the card, so it is solid: the world's see-through pill colour is laid twice over the card's paper and the word underneath never shows through. */
.fl-banner{position:absolute;z-index:4;left:50%;top:50%;translate:-50% -50%;width:max-content;max-width:90%;margin:0;text-wrap:balance;padding:clamp(10px,2cqw,18px) clamp(18px,3.6cqw,34px);border-radius:999px;background-color:var(--fl-paper);background-image:linear-gradient(var(--wk-pill,#163c50e6),var(--wk-pill,#163c50e6)),linear-gradient(var(--wk-pill,#163c50e6),var(--wk-pill,#163c50e6));color:var(--wk-pill-ink,#fff);font:900 clamp(18px,3.4cqw,34px)/1.25 var(--wk-display,inherit);text-align:center;box-shadow:0 6px 18px #00000040;animation:fl-banner 1.8s ease both;pointer-events:none}
@keyframes fl-banner{0%{opacity:0;scale:.8}12%{opacity:1;scale:1.04}22%{scale:1}82%{opacity:1}100%{opacity:0}}
/* While the notice shows, the words and picture on the card step back so the notice reads cleanly. */
.fl-shell.is-new-round .fl-card-wrap:not(.fl-flying) .pair-face-content{animation:fl-hush 1.8s ease both}
@keyframes fl-hush{0%,100%{opacity:1}12%,82%{opacity:.1}}
.fl-flying{position:absolute;z-index:30;margin:0;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.fl-flying .fl-card{transition:none}

/* ---------- Trays ---------- */
.fl-tray{--fl-tray:var(--fl-know);--fl-tray-d:var(--fl-know-d);position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:center;gap:6px;min-width:0;min-height:0;margin:0;padding:12px 8px 10px;border:3px solid var(--fl-tray-d);border-radius:var(--wk-radius,22px);background:linear-gradient(180deg,color-mix(in srgb,var(--fl-tray) 16%,var(--fl-paper)),color-mix(in srgb,var(--fl-tray) 30%,var(--fl-paper)));color:var(--fl-tray-d);box-shadow:0 5px 0 var(--fl-tray-d),inset 0 -14px 0 color-mix(in srgb,var(--fl-tray) 22%,transparent);font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.fl-tray[data-fl-mark=again]{--fl-tray:var(--fl-again);--fl-tray-d:var(--fl-again-d)}
.fl-tray:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.04)}
.fl-tray:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--fl-tray-d)}
.fl-tray:disabled{cursor:default}
.fl-tray[aria-pressed=true]{background:linear-gradient(180deg,color-mix(in srgb,var(--fl-tray) 34%,var(--fl-paper)),color-mix(in srgb,var(--fl-tray) 52%,var(--fl-paper)))}
.fl-tray-label{display:flex;flex-direction:column;align-items:center;gap:4px;font:900 clamp(14px,1.55cqw,21px)/1.15 var(--wk-display,inherit);text-align:center}
.fl-tray-label .fl-icon{width:clamp(24px,2.6cqw,34px);height:clamp(24px,2.6cqw,34px);padding:4px;border-radius:50%;background:var(--fl-tray-d);color:#fff;stroke-width:3}
.fl-tray-pile{position:relative;width:76%;height:100%;max-height:120px;min-height:34px}
.fl-tray-pile::before{content:"";position:absolute;left:8%;right:8%;bottom:6%;height:42%;border:2px dashed color-mix(in srgb,var(--fl-tray-d) 55%,transparent);border-radius:8px}
.fl-tray-pile i{position:absolute;left:8%;right:8%;bottom:6%;height:42%;border:2px solid var(--fl-tray-d);border-radius:8px;background:var(--fl-paper);box-shadow:0 2px 0 #00000026;opacity:0;translate:0 -20px;transition:opacity .25s ease,translate .3s cubic-bezier(.3,1.4,.5,1)}
.fl-tray-pile i.is-in{opacity:1;translate:0 0}
.fl-tray-pile i:nth-child(2){bottom:16%;rotate:-4deg}.fl-tray-pile i:nth-child(3){bottom:26%;rotate:3deg}.fl-tray-pile i:nth-child(4){bottom:36%;rotate:-2deg}
.fl-tray-count{min-width:2em;padding:2px 10px;border-radius:999px;background:var(--fl-tray-d);color:#fff;font:900 clamp(16px,1.9cqw,26px)/1.2 var(--wk-display,inherit);text-align:center;font-variant-numeric:tabular-nums}

/* ---------- The round's marks ---------- */
.fl-track{display:flex;gap:clamp(2px,.35cqw,5px);width:min(76%,880px);height:12px;margin:0 auto;align-items:center}
.fl-track i{flex:1;min-width:2px;height:8px;border-radius:999px;background:#ffffffb3;box-shadow:inset 0 0 0 1px #00000026;transition:height .2s ease,background-color .2s ease}
.fl-track i[data-state=seen]{background:color-mix(in srgb,var(--wk-c3,#22bfd2) 55%,#fff)}
.fl-track i[data-state=know]{background:var(--fl-know)}
.fl-track i[data-state=again]{background:var(--fl-again)}
.fl-track i.is-current{height:12px;box-shadow:0 0 0 2px var(--fl-drop)}

/* ---------- Buttons ---------- */
.fl-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.fl-moves{grid-column:2;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1cqw,12px)}
.fl-finish{grid-column:3;justify-self:end}
.fl-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:46px;margin:0;padding:8px 16px;border:var(--wk-btn-line,2px solid var(--fl-edge));border-radius:999px;background:var(--wk-ghost,var(--style-surface,#fffdf7));color:var(--wk-ghost-ink,var(--style-ink,#173e54));box-shadow:0 3px 0 var(--fl-drop);font:800 clamp(14px,1.45cqw,19px)/1.15 var(--wk-display,inherit);text-shadow:var(--wk-ghost-shadow,none);white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.fl-btn:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.05)}
.fl-btn:not(:disabled):active{transform:translateY(2px);box-shadow:none}
.fl-btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.fl-btn.fl-turn{background:var(--wk-btn,#246e98);color:var(--wk-btn-ink,#fff);text-shadow:var(--wk-btn-shadow,none);box-shadow:var(--wk-btn-drop,0 3px 0 var(--fl-drop))}
.fl-btn.fl-round{width:46px;padding:0}
.fl-btn.fl-quiet{min-height:42px;padding:6px 14px;font-size:clamp(13px,1.3cqw,17px)}
.fl-finish.is-ready{background:var(--wk-go,#2fbf71);color:var(--wk-go-ink,#fff);text-shadow:var(--wk-go-shadow,none)}
.fl-icon{display:block;width:22px;height:22px;flex:0 0 auto}
.fl-shell :is(button,.fl-card[role=button]):focus-visible{outline:3px solid var(--wk-mark,#f6c24f);outline-offset:3px}
:is(.fl-side,.fl-status){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- All cards ---------- */
.fl-panel{position:absolute;inset:0;z-index:40;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:3%;border-radius:var(--wk-radius,20px);background:color-mix(in srgb,var(--fl-drop) 42%,transparent)}
.fl-panel-box{display:flex;flex-direction:column;gap:12px;width:min(100%,900px);max-height:100%;padding:clamp(12px,2cqw,22px);border:var(--wk-card-line,3px solid var(--fl-edge));border-radius:var(--wk-radius,20px);background:var(--fl-paper);color:var(--fl-ink);box-shadow:0 14px 34px #0000004d}
.fl-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fl-panel-head h2{margin:0;font:900 clamp(18px,2.2cqw,28px)/1.2 var(--wk-display,inherit);color:inherit}
.fl-review-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.fl-review-list:focus-visible{outline:3px solid var(--wk-mark,#f6c24f);outline-offset:2px;border-radius:8px}
.fl-panel:focus{outline:none}
.fl-review-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid color-mix(in srgb,var(--fl-ink) 14%,transparent);font-size:clamp(13px,1.4cqw,17px)}
.fl-review-number{width:2em;flex:0 0 auto;text-align:center;font-weight:900;opacity:.6}
.fl-review-faces{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.fl-review-faces .pair-review-side{min-width:0}
.fl-review-faces .pair-face-content{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--fl-ink) 5%,transparent);overflow-wrap:anywhere}
.fl-review-faces .pair-face-picture{flex:0 1 40%;min-width:0;display:flex;justify-content:center}
.fl-review-faces img{max-width:100%;max-height:64px;object-fit:contain}
.fl-review-faces .pair-audio-art{width:44px;height:44px}
.fl-review-empty{align-self:center;opacity:.6;font-weight:600}
.fl-review-mark{width:8.5em;flex:0 0 auto;padding:3px 8px;border-radius:999px;text-align:center;font-weight:900;font-size:.88em;background:color-mix(in srgb,var(--fl-ink) 8%,transparent)}
.fl-review-item[data-state=know] .fl-review-mark{background:var(--fl-know-d,#1d8f50);color:#fff}
.fl-review-item[data-state=again] .fl-review-mark{background:var(--fl-again-d,#c98a0e);color:#fff}
.fl-review-item[data-state=unseen]{opacity:.7}
/* The end screen's own light panel: plain colours, whatever the world. */
.fl-final-review{--fl-ink:#243a47;--fl-know-d:#1d8f50;--fl-again-d:#a86f0b}
.fl-final-review .fl-review-item{color:#243a47;border-bottom:1px solid #d7e1e8;font-size:14px}
.fl-final-review .fl-review-mark{background:#e6edf1;color:#243a47}
.fl-final-review .fl-review-faces .pair-face-content{background:#f4f9fb}
#activityPlayer[data-game=flashcards] .fl-final{font:inherit}
#activityPlayer[data-game=flashcards] .fl-final-total{font-style:normal;font-size:.62em;font-weight:700;opacity:.7}

/* ---------- Phones: card on top, trays side by side below it ---------- */
@media (max-width:620px){
  #activityPlayer.game-shell[data-game=flashcards]:not(:fullscreen){height:clamp(600px,88svh,720px);aspect-ratio:auto}
  #activityPlayer[data-game=flashcards] #gameStage{padding:12px 12px 10px}
  .fl-shell{gap:10px}
  .fl-where{max-width:64%;font-size:14px;padding:5px 11px;white-space:normal;line-height:1.2}
  .fl-desk{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px}
  .fl-table{grid-column:1/-1;grid-row:1}
  .fl-shell .fl-tray{grid-row:2;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;justify-items:start;gap:8px;min-height:60px;padding:8px 10px}
  .fl-tray-label{flex-direction:row;gap:6px;font-size:15px;text-align:start}
  .fl-tray-label .fl-icon{width:26px;height:26px}
  .fl-tray-pile{display:none}
  .fl-tray-count{grid-column:3;font-size:17px}
  .fl-card-wrap,.fl-pile{width:min(100cqw,calc(100cqh * 1.15));aspect-ratio:1.15}
  .fl-face{padding:34px 14px 12px}
  .fl-track{width:100%}
  .fl-bottom{grid-template-columns:1fr;gap:8px}
  .fl-moves{grid-column:1;flex-wrap:wrap}
  .fl-moves .fl-btn{min-height:48px;padding:8px 12px;font-size:15px}
  .fl-moves #flPrevious .fl-label,.fl-moves #flNext .fl-label{display:none}
  .fl-finish{grid-column:1;justify-self:center}
  .fl-review-faces{grid-template-columns:1fr}
  .fl-review-mark{width:6.5em}
}
/* Short screens (a phone on its side, in full screen) keep every control within reach. */
@media (min-width:621px) and (max-height:500px){
  #activityPlayer[data-game=flashcards] #gameStage{padding:6px 14px 8px}
  .fl-shell{gap:6px}
  .fl-top{min-height:38px}
  .fl-btn{min-height:42px;padding:6px 12px}
  .fl-tray{padding:8px 6px}
  .fl-tray-pile{max-height:60px}
}
@media (prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) :is(.fl-card,.fl-tray-pile i,.fl-track i){transition:none}:where(:root:not([data-motion-managed])) .fl-banner{animation:none}:where(:root:not([data-motion-managed])) .fl-shell.is-new-round .fl-card-wrap:not(.fl-flying) .pair-face-content{animation:none;opacity:.1}}
:where(:root[data-reduce-motion]) :is(.fl-card,.fl-tray-pile i,.fl-track i){transition:none}
:where(:root[data-reduce-motion]) .fl-banner{animation:none}
:where(:root[data-reduce-motion]) .fl-shell.is-new-round .fl-card-wrap:not(.fl-flying) .pair-face-content{animation:none;opacity:.1}

/* Source: css/sequence-games.css; sha256: 2c64a17097a1d503d3e8d70f1d50121597379b15168f084ee8349faa84c7daca */

.sequence-instruction,.sequence-status{font-family:inherit;text-align:center;line-height:1.5;margin:4px 0 15px;font-size:clamp(15px,2cqw,25px)}.sequence-status{font-size:clamp(13px,1.5cqw,18px);min-height:24px;margin-top:18px}.sequence-actions{display:flex;justify-content:center;gap:12px}.sequence-actions .btn{font-size:clamp(15px,1.8cqw,23px);padding:10px 20px;min-height:42px}
.sentence-page{position:relative;max-width:940px;margin:0 auto 20px}.sentence-picture{display:flex;justify-content:center;align-items:center;margin:0 auto 16px;max-width:440px;height:clamp(100px,20cqw,235px)}.sentence-picture img{object-fit:contain;max-width:100%;max-height:100%}.sentence-text{font-size:clamp(20px,3cqw,38px);line-height:2.1;white-space:pre-wrap;text-align:center;overflow-wrap:anywhere;font-weight:700}.sentence-page[data-alignment=left] .sentence-text{text-align:left}.sentence-gap,.sentence-word{font-family:inherit;font-size:inherit;line-height:1.35;min-height:45px;border:2px solid #aacfe8;box-shadow:0 3px 0 #245a8150;border-radius:5px;background:#fffbdc;color:#183c59;padding:8px 17px;vertical-align:baseline;cursor:pointer;overflow-wrap:anywhere}.sentence-gap{display:inline-block;min-width:85px;max-width:100%;margin:0 5px;vertical-align:middle;border-style:dashed;background:#d9eafb}.sentence-gap:not(:empty){font-weight:700}.sentence-word{font-size:clamp(17px,2.4cqw,29px);touch-action:none;user-select:none;cursor:grab}.sentence-bank{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;max-width:940px;margin:auto}.sentence-bank[data-alignment=left]{justify-content:flex-start}.sentence-word.is-selected{outline:4px solid #ffd73b;outline-offset:2px;transform:translateY(-3px)}.sentence-word.is-dragging{opacity:.25}.sentence-gap.is-drop-target{outline:4px solid #ffda45;background:#fff0b1}.sentence-gap.is-correct{border-style:solid;border-color:#55a84d;background:#e1f3d6}.sentence-gap.is-wrong{border-style:solid;border-color:#cd675e;background:#fff0ea}.sentence-listen{display:block;margin:0 auto 12px;background:#fff;border:2px solid #a6c8df;color:#245a7c;border-radius:50%;width:40px;height:40px;padding:8px}.sentence-listen svg{width:100%;height:100%}.sentence-review>div{flex:1;display:flex;align-items:center;gap:12px;white-space:pre-wrap;overflow-wrap:anywhere}.sentence-review img{max-height:70px;max-width:90px;object-fit:contain}.sequence-drag-ghost{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-50%) rotate(-2deg);box-shadow:0 9px 24px #0006;opacity:.94}.sentence-word:focus-visible,.sentence-gap:focus-visible{outline:4px solid #ffd644;outline-offset:3px}
.sentence-editor-help{padding:12px 15px;background:#eff7fc;color:#315670;border-left:3px solid #63aedd;line-height:1.6}.sentence-wrong-label{display:block;margin-top:16px;font-weight:600}.sentence-wrong-label textarea{display:block;width:100%;margin-top:6px;border:1px solid #c3cfdb;background:#fff;padding:8px;font:inherit;min-height:65px}.sentence-blank-preview{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.sentence-blank-preview span{padding:4px 9px;border:1px solid #77ab6b;border-radius:3px;background:#eef8e6;color:#315b27}
@media(max-width:700px){.activity-player[data-game=completesentence] #gameStage{padding:22px 12px 50px}.sentence-text{font-size:22px;line-height:2}.sentence-gap,.sentence-word{min-height:42px;padding:7px 11px}.sequence-instruction{font-size:17px}.sentence-picture{height:160px}}
@media(max-width:620px){.activity-player.game-shell:is([data-game=rankorder],[data-game=completesentence]):not(:fullscreen){height:clamp(460px,70vh,650px);aspect-ratio:auto}.activity-player:is([data-game=rankorder],[data-game=completesentence]) .hud .pill,.activity-player:is([data-game=rankorder],[data-game=completesentence]) #pCount{font-size:14px}.activity-player:is([data-game=rankorder],[data-game=completesentence]) .end-panel{width:80%;font-size:16px;padding:14px}.activity-player:is([data-game=rankorder],[data-game=completesentence]) .end-panel h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .sentence-word{transform:none}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .sentence-word{transform:none}
.sequence-status:empty{display:none}

.sentence-gap,.sentence-word{min-width:44px;min-height:44px}.sentence-listen{width:44px;height:44px}
/* Gap fill's board: css/gapfill.css. */

/* Source: css/rankorder.css; sha256: 6a37cebe5a324596730691ead99d248a1860875ed0b761ee00cf280272b4cb3e */
/* Sequence sort (js/games/rankorder.js). The board fits the game area: fitBoard measures the room and planBoard
   sets the cards' size (--rank-card-w, --rank-card-h), how many stand side by side (--rank-columns, --rank-rows),
   a picture card's caption row (--rank-caption-h) and the board's shape (data-board): "pictures", a grid read left
   to right and then down; "list", cards one under another, in up to three lists side by side, each card with a lane
   in front of it (--rank-lane) where its place number stands on the world's trail; "row", one row. A long list
   first takes smaller cards, closer together (--rank-gap-fit); only a lesson that still does not fit scrolls
   (data-fits=false), along its own direction, stopping with whole cards in view, with a sign at each end counting
   the cards out of view. A board that fits never scrolls, so nothing drawn while a card is held (the gap it would
   land in, the faded place it left) can add a scroll bar that would shrink the board under it. Only the selected
   card shows its arrows. In a learning world the cards stand on the world's own trail (data-trail), further apart
   to show it, and each number stands on the world's own spot. */

/* The game area: the message, the board, and Check. */
#activityPlayer[data-game=rankorder] #gameStage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:12px 20px;overflow:hidden;align-content:stretch}
#activityPlayer[data-game=rankorder] #gameStage>.rank-message{grid-row:1;justify-self:center;box-sizing:border-box;max-width:100%;margin:0;padding:4px 12px;border-radius:9px;background:var(--style-surface,#fffaf0);color:var(--style-ink,#183c59);font-size:clamp(16px,1.7cqw,21px);font-weight:700;line-height:1.35;text-align:center}
#activityPlayer[data-game=rankorder] #gameStage>.rank-list{grid-row:2;grid-column:1;position:relative;box-sizing:border-box;width:100%;max-width:none;height:100%;min-width:0;min-height:0;margin:0;--rank-pad-y:8px;--rank-pad-x:8px;--rank-band:26px;padding:var(--rank-pad-y) var(--rank-pad-x);display:grid;--rank-gap-y:12px;--rank-gap-x:12px;gap:var(--rank-gap-fit,var(--rank-gap-y)) var(--rank-gap-x);justify-content:center;align-content:center;overflow:visible;overscroll-behavior:contain;scrollbar-width:thin;--rank-drop:8px}
#activityPlayer[data-game=rankorder] #gameStage>.sequence-actions{grid-row:3;margin:0;padding:0;min-height:46px;align-items:center}
#activityPlayer[data-game=rankorder] #gameStage>.sequence-actions .btn{min-width:150px;min-height:46px;padding:8px 28px;font-size:clamp(17px,1.8cqw,22px)}

/* The boards. */
#activityPlayer[data-game=rankorder] #gameStage .rank-list:not([data-board]){grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-rows:minmax(64px,auto)}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-board=pictures]{grid-template-columns:repeat(var(--rank-columns,3),var(--rank-card-w,200px));grid-auto-rows:var(--rank-card-h,200px)}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-board=list]{grid-auto-flow:column;grid-template-rows:repeat(var(--rank-rows,5),var(--rank-card-h,60px));grid-template-columns:repeat(var(--rank-columns,1),calc(var(--rank-lane,0px) + var(--rank-card-w,600px)));--rank-gap-x:18px}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-board=row]{grid-auto-flow:column;grid-auto-columns:var(--rank-card-w,160px);grid-template-rows:var(--rank-card-h,160px)}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-trail]{--rank-gap-y:22px;--rank-gap-x:30px}
/* A list's trail runs down its lane, not between its cards, so they stand closer; lists side by side keep room for the turn between them. */
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-trail][data-board=list]{--rank-gap-y:10px;--rank-gap-x:36px}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-fits=false]{align-content:start;overflow-x:hidden;overflow-y:auto}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-board=row][data-fits=false]{justify-content:start;overflow-x:auto;overflow-y:hidden}
/* A board that scrolls keeps a band at each end of its scroll (--rank-band) for the sign that counts the cards out of
   view there (js/games/rankorder.js: showMore). It stops with whole cards in view (planBoard sizes the cards so they
   fill the room between the bands exactly); its edge fades where more cards wait. A held card scrolls it freely. */
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-fits=false]:not([data-board=row]){padding-block:var(--rank-band);scroll-padding-block:var(--rank-band);scroll-snap-type:y mandatory}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-board=row][data-fits=false]{padding-inline:var(--rank-band);scroll-padding-inline:var(--rank-band);scroll-snap-type:x mandatory;--rank-fade-way:to right}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-fits=false]>.rank-row{scroll-snap-align:start}
#activityPlayer[data-game=rankorder] #gameStage .rank-list[data-fits=false].is-held{scroll-snap-type:none}
.rank-list[data-fits=false]{--rank-fade-a:0px;--rank-fade-b:0px;-webkit-mask-image:linear-gradient(var(--rank-fade-way,to bottom),transparent,#000 var(--rank-fade-a),#000 calc(100% - var(--rank-fade-b)),transparent);mask-image:linear-gradient(var(--rank-fade-way,to bottom),transparent,#000 var(--rank-fade-a),#000 calc(100% - var(--rank-fade-b)),transparent)}
.rank-list[data-fits=false][data-more-before]{--rank-fade-a:var(--rank-band,26px)}
.rank-list[data-fits=false][data-more-after]{--rank-fade-b:var(--rank-band,26px)}
/* The signs ("↓ 2 more cards") stand over the board's bands; a tap shows the next cards. Along One row they stand
   under the row's two ends. */
#activityPlayer[data-game=rankorder] #gameStage>.rank-more{grid-row:2;grid-column:1;z-index:6;align-self:end;justify-self:center;display:flex;align-items:center;box-sizing:border-box;height:24px;margin:1px 0;padding:0 14px;border:2px solid #fff;border-radius:12px;background:var(--wk-c1,#1d4b55);color:#fff;font-family:var(--wk-display,inherit);font-size:15px;font-weight:800;line-height:1;white-space:nowrap;box-shadow:0 2px 6px #0004;cursor:pointer}
#activityPlayer[data-game=rankorder] #gameStage>.rank-more[data-more=before]{align-self:start}
#activityPlayer[data-game=rankorder] #gameStage>.rank-more[data-axis=x]{align-self:end;margin:0 10px 6px}
#activityPlayer[data-game=rankorder] #gameStage>.rank-more[data-axis=x][data-more=before]{justify-self:start}
#activityPlayer[data-game=rankorder] #gameStage>.rank-more[data-axis=x][data-more=after]{justify-self:end}
#activityPlayer[data-game=rankorder] #gameStage>.rank-more[hidden]{display:none}
#activityPlayer[data-game=rankorder] #gameStage>.rank-more:focus-visible{outline:3px solid #ffd644;outline-offset:2px}

/* A card. */
.rank-row{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-width:0;min-height:0;margin:0;border:2px solid #b9d8eb;border-radius:8px;padding:8px;background:#fffef2;color:#183c59;box-shadow:0 3px 0 #16415a60;font-family:inherit;font-weight:700;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.rank-row:focus-visible{outline:4px solid #ffd644;outline-offset:3px}
.rank-row.is-locked{cursor:default}
.rank-row.is-correct{border-color:#58a95d;background:#e5f5dd}
.rank-row.is-wrong{border-color:#d36e67;background:#fff0eb}
/* A card under the mouse brightens; it does not move (a card rising from under the pointer would flicker). */
@media(hover:hover){.rank-list:not(.is-held) .rank-row:not(.is-locked,.is-selected):hover{filter:brightness(1.05)}}
.rank-row.is-selected{z-index:3;outline:4px solid var(--wk-c2,#ffd644);outline-offset:2px;translate:0 -4px}
.rank-row.is-dragging{opacity:.35}
/* The place a held card left stays put, faded (not lifted or tilted like a piece in other games). */
#activityPlayer[data-game=rankorder] #gameStage .rank-row.is-dragging{scale:none;rotate:none;translate:none;filter:none;transition:none}
.rank-list.is-held,.rank-list.is-held .rank-row{cursor:grabbing}
/* The copy that follows the pointer, from where the card was taken hold of (js/games/rankorder.js sets its place,
   size and pivot). */
.rank-row.sequence-drag-ghost{position:fixed;left:0;top:0;margin:0;z-index:10000;pointer-events:none;transform:rotate(-2deg);box-shadow:0 14px 30px #0006;opacity:.96;transition:none}
.rank-item-content{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:0;text-align:center}
.rank-item-content img{display:block;min-width:0;min-height:0;object-fit:contain;pointer-events:none}
.rank-item-content>span{display:block;min-width:0;font-size:clamp(18px,2.2cqw,28px);line-height:1.25;white-space:pre-wrap;overflow-wrap:anywhere}
.rank-item-content>span:empty{display:none}
.rank-label{display:grid;place-items:center;flex:none;box-sizing:border-box;min-width:32px;height:32px;padding:0 7px;border-radius:16px;background:#1d4b55;color:#fff;font-size:17px;font-weight:800;line-height:1;pointer-events:none}
.rank-label:empty{display:none}
.rank-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.rank-step,.rank-listen{display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;min-width:40px;margin:0;padding:7px;border:2px solid #a8c8df;border-radius:50%;background:#e5f2fc;color:#245a7c;font:inherit;cursor:pointer}
.rank-step svg,.rank-listen svg{display:block;width:100%;height:100%}
.rank-listen svg{fill:currentColor}
.rank-step:disabled{opacity:.3;cursor:default}
.rank-step:focus-visible,.rank-listen:focus-visible{outline:3px solid #f4b02e;outline-offset:2px}
.rank-mark{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#3f8f3a;color:#fff;font-size:19px;font-weight:900;line-height:1;pointer-events:none;box-shadow:0 0 0 2px #fff}
.rank-row.is-wrong .rank-mark{background:#c63f37}
.rank-row.is-selected .rank-mark{display:none}

/* Picture grid and row: the picture fills the card, a caption has a row of its own under it, and the number,
   the mark, the listen button and the selected card's arrows sit on the card's corners and sides (a card of words
   alone keeps its top for its number and mark). */
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-row,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]){flex-direction:column;justify-content:center;width:100%;height:100%;padding:8px}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-item-content,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-item-content{flex-direction:column;gap:4px;width:100%;height:100%}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-item-content img,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-item-content img{flex:1 1 0;width:100%;height:0;max-height:100%}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-item-content>span,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-item-content>span{flex:none;box-sizing:border-box;width:100%;height:var(--rank-caption-h,32px);padding:0 4px;overflow:hidden;align-content:center;line-height:1.15}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-item-content:not(:has(img))>span,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-item-content:not(:has(img))>span{flex:1 1 auto;height:auto;max-height:100%;padding:0 6px;line-height:1.25}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-row:not(:has(img)),.sequence-drag-ghost:is([data-board=pictures],[data-board=row]):not(:has(img)){padding-top:44px}
/* Word cards with no number on their corner (Auto numbers on number cards, or No numbers) use their whole height. */
:is(.rank-list[data-board=pictures],.rank-list[data-board=row])[data-labels=none] .rank-row:not(:has(img)),.sequence-drag-ghost:is([data-board=pictures],[data-board=row])[data-labels=none]:not(:has(img)){padding-top:8px}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-label,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-label{position:absolute;left:6px;top:6px;z-index:2}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-tools,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-tools{display:contents}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-mark,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-mark{position:absolute;right:6px;top:6px;z-index:2}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-listen,.sequence-drag-ghost:is([data-board=pictures],[data-board=row]) .rank-listen{position:absolute;right:6px;bottom:calc(var(--rank-caption-h,0px) + 12px);z-index:2}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-step{position:absolute;top:calc((100% - var(--rank-caption-h,0px)) / 2);z-index:2;width:44px;height:44px;translate:0 -50%;box-shadow:0 2px 6px #0004}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-step[data-rank-step="-1"]{left:4px}
:is(.rank-list[data-board=pictures],.rank-list[data-board=row]) .rank-step[data-rank-step="1"]{right:4px}

/* List: the card's words (and picture) fill it, as large as its height allows; its buttons and mark stand at its
   end, in a column of their own width (--rank-tools-w) so the words stay put when the arrows appear, as large as
   the card is tall (--rank-button). Its place number is not on the card: it stands in front of it, on the trail in
   the list's lane (.rank-place, below), so a number card never sits on a different number. */
.rank-list[data-board=list] .rank-row,.sequence-drag-ghost[data-board=list]{display:grid;grid-template-columns:minmax(0,1fr) var(--rank-tools-w,86px);align-items:center;gap:6px;width:100%;height:100%;padding:2px 8px}
.rank-list[data-board=list] .rank-row{width:auto;margin-left:var(--rank-lane,0px)}
/* With room to spare, a list card keeps as much room before its words as its buttons take after them, so its words stand in its middle (planBoard: balanced). */
.rank-list[data-board=list][data-balanced] .rank-row,.sequence-drag-ghost[data-board=list][data-balanced]{grid-template-columns:var(--rank-tools-w,86px) minmax(0,1fr) var(--rank-tools-w,86px)}
.rank-list[data-board=list] .rank-label,.sequence-drag-ghost[data-board=list] .rank-label{display:none}
.rank-list[data-board=list] .rank-item-content,.sequence-drag-ghost[data-board=list] .rank-item-content{grid-column:1;grid-row:1;flex-direction:row;width:100%;height:100%}
.rank-list[data-board=list] .rank-item-content img,.sequence-drag-ghost[data-board=list] .rank-item-content img{flex:none;width:auto;height:100%;max-width:45%}
.rank-list[data-board=list] .rank-item-content>span,.sequence-drag-ghost[data-board=list] .rank-item-content>span{flex:0 1 auto;max-height:100%;overflow:hidden;line-height:1.2}
.rank-list[data-board=list] .rank-tools,.sequence-drag-ghost[data-board=list] .rank-tools{grid-column:2;grid-row:1}
.rank-list[data-board=list][data-balanced] .rank-item-content,.sequence-drag-ghost[data-board=list][data-balanced] .rank-item-content{grid-column:2}
.rank-list[data-board=list][data-balanced] .rank-tools,.sequence-drag-ghost[data-board=list][data-balanced] .rank-tools{grid-column:3}
.rank-list[data-board=list] :is(.rank-step,.rank-listen),.sequence-drag-ghost[data-board=list] .rank-listen{width:var(--rank-button,40px);height:var(--rank-button,40px);min-width:var(--rank-button,40px);padding:calc(var(--rank-button,40px) * .17)}
.rank-list[data-board=list] .rank-mark,.sequence-drag-ghost[data-board=list] .rank-mark{width:min(32px,var(--rank-button,40px));height:min(32px,var(--rank-button,40px))}

/* A list's place numbers (js/games/rankorder.js: drawPlaces), small and quiet, on the trail in front of the cards.
   They belong to the places: a moved card takes the number of the place it lands in. */
.rank-places{position:absolute;left:0;top:0;z-index:1;width:0;height:0;pointer-events:none}
.rank-place{position:absolute;left:0;top:0;display:grid;place-items:center;box-sizing:border-box;min-width:var(--rank-spot,28px);height:var(--rank-spot,28px);padding:0 5px;transform:translate(-50%,-50%);border-radius:calc(var(--rank-spot,28px) / 2);background:#1d4b55;color:#fff;font-family:inherit;font-size:calc(var(--rank-spot,28px) * .46);font-weight:800;line-height:1;white-space:nowrap}
#activityPlayer[data-world-kit][data-phase] #gameStage .rank-place{padding:0 2px;border-radius:0;background:var(--wk-seq-spot) center/contain no-repeat;color:var(--wk-seq-spot-ink,#fff);font-family:var(--wk-display,inherit);font-size:calc(var(--rank-spot,28px) * .44);text-shadow:none}
#activityPlayer[data-world-kit][data-phase] #gameStage .rank-list[data-labels=ordinal] .rank-place{font-size:calc(var(--rank-spot,28px) * .34)}

/* Where a held card would go: a bar in the middle of the gap it would go into, kept inside the board
   (js/games/rankorder.js: showPlace places it), sliding from gap to gap. */
.rank-drop{position:absolute;left:0;top:0;z-index:5;box-sizing:border-box;border-radius:4px;background:var(--wk-c2,#ffcf33);box-shadow:0 0 0 2px #ffffffd9,0 2px 8px #0005;pointer-events:none;opacity:0;transition:opacity .12s ease-out}
.rank-drop.is-shown{opacity:1;transition:opacity .12s ease-out,translate .09s ease-out}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .rank-drop.is-shown{transition:opacity .12s ease-out}}
:where(:root[data-reduce-motion]) .rank-drop.is-shown{transition:opacity .12s ease-out}

/* The world's trail (js/games/rankorder.js: drawTrail) runs behind the cards and is seen between them (in a list,
   unbroken down its lane, through the place numbers). When every card is in order it lights up from the first place
   to the last (the game moves the light, reaching a card on each beat), and each card hops as the light reaches it
   (--rank-run-at; a hop, not a swell, so no card reaches past the board's edge). */
.rank-trail{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
.rank-trail path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rank-trail-glow{stroke-dasharray:1000;stroke-dashoffset:1000;opacity:0}
.rank-list[data-trail]>.rank-row{z-index:1}
.rank-list[data-trail]>.rank-row.is-selected{z-index:3}
.rank-list.is-run .rank-trail-glow{stroke-dashoffset:0;opacity:.8}
.rank-list.is-run>.rank-row{animation:rank-run .5s cubic-bezier(.3,1.5,.5,1) var(--rank-run-at,0s) both}
.rank-list.is-run .rank-label{animation:rank-run-spot .7s ease-out var(--rank-run-at,0s) both}
.rank-list.is-run .rank-place{animation:rank-run-spot .7s ease-out var(--rank-run-at,0s) both}
@keyframes rank-run{0%{translate:0 0}35%{translate:0 -6px}100%{translate:0 0}}
@keyframes rank-run-spot{0%{filter:none}30%{filter:drop-shadow(0 0 7px var(--wk-seq-glow,#ffe27a)) brightness(1.15)}100%{filter:drop-shadow(0 0 3px var(--wk-seq-glow,#ffe27a))}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .rank-list.is-run :is(.rank-row,.rank-label){animation:none}}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) does the same. */
:where(:root[data-reduce-motion]) .rank-list.is-run :is(.rank-row,.rank-label){animation:none}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .rank-list.is-run .rank-place{animation:none}}
:where(:root[data-reduce-motion]) .rank-list.is-run .rank-place{animation:none}

/* A grid card's number stands on the world's own spot (js/themekit/registry.js: --wk-seq-spot), sized to the cards
   (--rank-spot). */
#activityPlayer[data-world-kit][data-phase] #gameStage .rank-list .rank-label:not(:empty){min-width:var(--rank-spot,40px);height:var(--rank-spot,40px);padding:0 2px;border:0;border-radius:0;background:var(--wk-seq-spot) center/contain no-repeat;box-shadow:none;color:var(--wk-seq-spot-ink,#fff);font-size:calc(var(--rank-spot,40px) * .43);text-shadow:none}
#activityPlayer[data-world-kit][data-phase] #gameStage .rank-list[data-labels=ordinal] .rank-label:not(:empty){font-size:calc(var(--rank-spot,40px) * .32)}

/* Short list cards (a long list squeezed into its room, data-compact) show their world's plain card face, with its
   own colours, edge and type: at that height a world's decorations (stripes, stitching, dashes) would crowd the words. */
#activityPlayer[data-world-kit][data-phase] #gameStage .rank-list[data-compact] .rank-row:not(.is-correct,.is-wrong,.is-selected){background:var(--pc-card-bg)}

/* Quiz show studio: its cards' marquee bulbs (two rows, about a hundred on a card) would crowd the words while
   students sort, so a card keeps its calm purple face and gold edge; its bulbs light up when the card is checked in
   order (the studio's gold bulbs, made for its light picture cards, which show on the light green of a card in
   order), and flash card by card in the end run. The other worlds' card decorations are quiet and stay as they are. */
#activityPlayer[data-world-kit=quiz-show-studio][data-phase] #gameStage .rank-list .rank-row{isolation:isolate}
#activityPlayer[data-world-kit=quiz-show-studio][data-phase] #gameStage .rank-list .rank-row:not(.is-correct,.is-wrong,.is-selected){background:var(--pc-card-bg)}
#activityPlayer[data-world-kit=quiz-show-studio][data-phase] #gameStage .rank-list .rank-row::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pc-edge);opacity:0;pointer-events:none;transition:opacity .45s ease-out}
#activityPlayer[data-world-kit=quiz-show-studio][data-phase] #gameStage .rank-list .rank-row.is-correct::before{opacity:1}
#activityPlayer[data-world-kit=quiz-show-studio][data-phase] #gameStage .rank-list.is-run .rank-row::before{animation:rank-bulbs .8s ease-out var(--rank-run-at,0s) both}
@keyframes rank-bulbs{0%{opacity:.3;filter:none}35%{opacity:1;filter:brightness(1.6) drop-shadow(0 0 3px #fff3b0)}100%{opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) #activityPlayer[data-world-kit=quiz-show-studio] .rank-list .rank-row::before{transition:none;animation:none}}
:where(:root[data-reduce-motion]) #activityPlayer[data-world-kit=quiz-show-studio] .rank-list .rank-row::before{transition:none;animation:none}

/* The review after the game. */
.rank-review{display:flex;gap:15px;align-items:center}
.rank-review .rank-item-content{height:auto;justify-content:flex-start}
.rank-review img{max-height:60px;max-width:90px}
.rank-review-mark{display:flex;align-items:center;gap:6px;margin-left:auto;font-weight:800}
.rank-review-mark.ok{color:#237a50}
.rank-review-mark.no{color:#b43d3d}
.rank-review-mark small{font-size:12px;font-weight:600;opacity:.85;white-space:nowrap}

@media(max-width:700px){
  #activityPlayer[data-game=rankorder] #gameStage{gap:8px;padding:8px 8px 10px}
  #activityPlayer[data-game=rankorder] #gameStage>.rank-message{padding:3px 8px;font-size:15px;line-height:1.3}
  #activityPlayer[data-game=rankorder] #gameStage>.rank-list{--rank-gap-y:8px;--rank-gap-x:8px;--rank-pad-y:6px;--rank-pad-x:4px;--rank-band:24px;--rank-drop:6px}
  #activityPlayer[data-game=rankorder] #gameStage .rank-list[data-board=list]{--rank-gap-x:12px}
  #activityPlayer[data-game=rankorder] #gameStage .rank-list[data-trail]{--rank-gap-y:16px;--rank-gap-x:20px}
  #activityPlayer[data-game=rankorder] #gameStage .rank-list[data-trail][data-board=list]{--rank-gap-y:8px;--rank-gap-x:24px}
  #activityPlayer[data-game=rankorder] #gameStage .rank-label{min-width:28px;height:28px;padding:0 6px;font-size:15px}
  #activityPlayer[data-game=rankorder] #gameStage>.rank-more{height:20px;padding:0 10px;font-size:13px}
}

/* Source: css/gapfill.css; sha256: d8f55a014c1485a0d76c53d55cf71a112652fc6122c2ffae95f6aef5d8cddfa6 */
/* Gap fill (js/games/completesentence.js). The page fits the game area: fitPage sizes the sentence's type
   (--sentence-font), the box every gap reserves for the longest word in the bank (--sentence-gap-width,
   --sentence-gap-height), a page's picture (--sentence-picture-h), the bank's type (--sentence-bank-font) and the
   bank's share of the room (--sentence-bank-max). The sentence and the bank stand together in the middle of the
   game area; a passage too long for the room scrolls inside its panel, a bank too long for its share inside the
   bank. A placed word sits on the same tile it had in the bank. A gap found right at a check stays, green. With
   "Fix and check again" a wrong word goes back to the bank and stays crossed out in its gap until another word goes
   in; after a page's last check a wrong gap shows the right word, with the word that was there on a tag. */

#activityPlayer[data-game=completesentence]:not(:fullscreen){min-height:600px}
#activityPlayer[data-game=completesentence] #gameStage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,max-content) max-content 40px 46px;row-gap:14px;align-content:center;padding:14px 22px 16px;overflow:hidden}
#activityPlayer[data-game=completesentence] #gameStage>.sentence-help{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* The page: the sentence, beside its picture (above it on a phone). */
#activityPlayer[data-game=completesentence] #gameStage>.sentence-page{grid-row:1;box-sizing:border-box;width:100%;height:100%;max-width:1100px;min-width:0;min-height:0;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden}
#activityPlayer[data-game=completesentence] #gameStage .sentence-text{position:relative;box-sizing:border-box;flex:0 1 auto;width:100%;min-width:0;min-height:0;max-height:100%;margin:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:var(--sentence-font,clamp(22px,2.8cqw,34px));line-height:1.7;padding:14px 18px;border-radius:16px;background:var(--style-surface,#fffaf0);color:var(--style-ink,#183c59)}
#activityPlayer[data-game=completesentence] #gameStage .sentence-text.is-reader{scrollbar-gutter:stable}
#activityPlayer[data-game=completesentence] #gameStage>.sentence-page.has-picture{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:20px;row-gap:8px}
#activityPlayer[data-game=completesentence] #gameStage .sentence-picture{grid-column:1;grid-row:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;height:var(--sentence-picture-h,240px);min-height:0;margin:0}
#activityPlayer[data-game=completesentence] #gameStage .sentence-picture img{display:block;width:100%;height:100%;object-fit:contain}
#activityPlayer[data-game=completesentence] #gameStage .sentence-page.has-picture .sentence-text{grid-column:2;grid-row:1 / span 2}
#activityPlayer[data-game=completesentence] #gameStage .sentence-listen{grid-column:1;grid-row:2;flex:none;margin:0 auto}

/* A gap: the box the longest word in the bank needs, its word centred in it. (The box's track is fixed, so its word
   is never laid out one letter wide, which wrapped a short word and left a scroll bar beside it.) */
#activityPlayer[data-game=completesentence] #gameStage .sentence-gap{position:relative;box-sizing:border-box;display:inline-grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;vertical-align:middle;width:var(--sentence-gap-width,100px);height:var(--sentence-gap-height,52px);max-width:calc(100% - 10px);min-width:44px;min-height:44px;margin:max(8px,.3em) 5px;padding:6px 12px;font-size:inherit;font-weight:700;line-height:1.3;overflow:visible;white-space:pre-wrap}
/* A gap's word never scrolls (its gap is made for the longest word in the bank), unless a teacher's answer is
   longer than three lines (has-long-gap): then it scrolls inside its gap. Its padding holds the letters' tops and
   tails, which reach past a line of 1.3. */
#activityPlayer[data-game=completesentence] #gameStage .sentence-gap-label{box-sizing:border-box;display:block;min-width:0;min-height:0;width:100%;height:auto;max-height:100%;padding-block:.18em;overflow:hidden;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere}
#activityPlayer[data-game=completesentence] #gameStage .sentence-page.has-long-gap .sentence-gap-label{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#activityPlayer[data-game=completesentence] #gameStage .sentence-gap.sentence-measure{position:absolute;inset:0 auto auto 0;visibility:hidden;pointer-events:none;display:inline-block;max-width:none;min-width:0;height:auto;margin:0;overflow:visible;white-space:pre-wrap}
/* A placed word keeps its tile. */
#activityPlayer[data-game=completesentence] #gameStage .sentence-gap.is-filled:not(.is-correct,.is-wrong){border-style:solid;background:#fffbdc;box-shadow:0 3px 0 #245a8150}
#activityPlayer[data-world-kit][data-phase][data-game=completesentence] #gameStage .sentence-gap.is-filled:not(.is-correct,.is-wrong){background:var(--pc-tile),var(--pc-tile-bg,var(--wk-tile));color:var(--pc-tile-ink,var(--wk-tile-ink));border:var(--pc-tile-line,3px solid var(--wk-tile-line,var(--wk-line)));text-shadow:var(--pc-tile-shadow,var(--wk-tile-shadow,none));box-shadow:var(--pc-ring-tile,0 0 #0000),0 4px 0 var(--wk-drop)}
#activityPlayer[data-game=completesentence] #gameStage .sentence-gap:is(.is-correct,.is-revealed){border-style:solid}
/* A word found wrong, crossed out in its gap until another word goes in. */
#activityPlayer[data-game=completesentence] #gameStage .sentence-gap.is-retry .sentence-gap-was{text-decoration:line-through;text-decoration-thickness:.12em;opacity:.8}
/* After the last check, the word that was in a wrong gap, on a tag over its corner. */
#activityPlayer[data-game=completesentence] #gameStage .sentence-gap.is-revealed .sentence-gap-was{position:absolute;top:0;right:0;z-index:2;translate:28% -62%;max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.12em .55em;border-radius:999px;background:#b83a32;color:#fff;font-size:max(12px,.42em);line-height:1.35;text-decoration:line-through;text-shadow:none;box-shadow:0 1px 3px #0005;pointer-events:none}

/* The word bank, just under the sentence. A word in a gap leaves a faint outline in its place, so the bank keeps
   its shape. */
#activityPlayer[data-game=completesentence] #gameStage>.sentence-bank{grid-row:2;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:10px 12px;width:100%;max-width:1100px;max-height:var(--sentence-bank-max,150px);min-height:0;margin:0 auto;padding:8px 8px 12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#activityPlayer[data-game=completesentence] #gameStage>.sentence-bank[data-alignment=left]{justify-content:flex-start}
/* More words below: the last row fades. */
#activityPlayer[data-game=completesentence] #gameStage>.sentence-bank.is-scroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),#0003);mask-image:linear-gradient(#000 calc(100% - 26px),#0003)}
#activityPlayer[data-game=completesentence] #gameStage .sentence-word{box-sizing:border-box;max-width:100%;flex:none;font-size:var(--sentence-bank-font,clamp(20px,2.3cqw,28px));line-height:1.3;padding:.3em .8em;white-space:pre-wrap;overflow-wrap:anywhere}
#activityPlayer[data-phase][data-game=completesentence] #gameStage>.sentence-bank>.sentence-word.is-used{visibility:visible;pointer-events:none;background:#ffffff38;border-style:dashed;border-color:#1e2a3366;box-shadow:none;text-shadow:none;filter:none;translate:none}
#activityPlayer[data-phase][data-game=completesentence] #gameStage>.sentence-bank>.sentence-word.is-used>*{visibility:hidden}
/* The word being dragged stays in its place, faded (lifted, it would reach past the bank's edge). */
#activityPlayer[data-game=completesentence] #gameStage .sentence-word.is-dragging{scale:none;rotate:none;translate:none;filter:none;opacity:.35;transition:none}

/* The line under the bank: gaps left, then what the check found. In a world it reads like the sentence. */
#activityPlayer[data-game=completesentence] #gameStage>.sequence-status{grid-row:3;justify-self:center;align-self:center;box-sizing:border-box;max-width:100%;margin:0;min-height:0;font-size:clamp(14px,1.5cqw,18px);line-height:1.25;padding:.35em 1em;border-radius:999px;font-weight:800}
#activityPlayer[data-game=completesentence] #gameStage>.sequence-status:empty{visibility:hidden}
#activityPlayer[data-world-kit][data-phase][data-game=completesentence] #gameStage>.sequence-status:not(:empty){background:var(--wk-panel);color:var(--wk-ink)!important;border:0;box-shadow:0 2px 0 #00000026,0 4px 10px #00000026}
#activityPlayer[data-world-kit][data-phase][data-game=completesentence] #gameStage>.sequence-status[data-tone=right]{background:linear-gradient(var(--wk-good-s),var(--wk-good-s)),var(--wk-card-flat,#fff);color:var(--wk-good-ink)!important}
#activityPlayer[data-game=completesentence] #gameStage>.sequence-actions{grid-row:4;min-height:44px;margin:0;align-items:center}
#activityPlayer[data-game=completesentence] #gameStage>.sequence-actions .btn{min-width:140px;min-height:44px;padding:7px 24px}

/* Every gap right: the gaps hop one after another as their notes play, and the sentence glows. */
#activityPlayer[data-game=completesentence] #gameStage .sentence-page.is-done .sentence-gap{animation:sentence-hop .5s cubic-bezier(.3,1.5,.5,1) var(--sentence-hop-at,0s) both}
#activityPlayer[data-game=completesentence] #gameStage .sentence-page.is-done .sentence-text{outline:6px solid transparent;outline-offset:-6px;animation:sentence-glow 1.2s ease-out}
@keyframes sentence-hop{0%{translate:0 0}35%{translate:0 -7px}100%{translate:0 0}}
@keyframes sentence-glow{25%{outline-color:var(--wk-seq-glow,#ffe27a)}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) #activityPlayer[data-game=completesentence] #gameStage .sentence-page.is-done :is(.sentence-gap,.sentence-text){animation:none}}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) does the same. */
:where(:root[data-reduce-motion]) #activityPlayer[data-game=completesentence] #gameStage .sentence-page.is-done :is(.sentence-gap,.sentence-text){animation:none}

/* The review after the game: each gap marked, the word chosen when it was wrong crossed out. */
.sentence-review>div{flex:1;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere}
.sentence-review .gap-review{white-space:nowrap}
.sentence-review mark{padding:.1em .4em;border-radius:6px;font-weight:700;color:inherit}
.sentence-review mark.is-right,.sentence-review .is-fixed mark{background:#d8f1cf;box-shadow:inset 0 -2px #4f9c48}
.sentence-review .is-wrong mark,.sentence-review mark.is-missed{background:#fde2de;box-shadow:inset 0 -2px #c0453c}
.sentence-review .gap-review s{color:#b43d3d;font-weight:600}
.sentence-review .gap-review small{margin-left:4px;font-size:12px;font-weight:600;opacity:.8}
.sentence-review-mark{display:flex;flex-direction:column;align-items:center;margin-left:auto;font-weight:800}
.sentence-review-mark.ok{color:#237a50}
.sentence-review-mark.no{color:#b43d3d}
.sentence-review-mark small{font-size:12px;font-weight:600}

@media(max-width:700px){
  #activityPlayer[data-game=completesentence]:not(:fullscreen){height:690px}
  #activityPlayer[data-game=completesentence] #gameStage{grid-template-rows:minmax(0,max-content) max-content 38px 44px;row-gap:10px;padding:10px}
  #activityPlayer[data-game=completesentence] #gameStage>.sentence-page.has-picture{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);gap:8px}
  #activityPlayer[data-game=completesentence] #gameStage .sentence-picture{grid-column:1 / -1;grid-row:1;height:var(--sentence-picture-h,150px)}
  #activityPlayer[data-game=completesentence] #gameStage .sentence-page.has-picture .sentence-text{grid-column:1 / -1;grid-row:2}
  #activityPlayer[data-game=completesentence] #gameStage .sentence-page.has-picture .sentence-listen{grid-column:2;grid-row:1;align-self:end;z-index:1;margin:4px}
  #activityPlayer[data-game=completesentence] #gameStage .sentence-text{line-height:1.6;padding:8px 10px}
  #activityPlayer[data-game=completesentence] #gameStage .sentence-gap{padding:5px 9px}
  #activityPlayer[data-game=completesentence] #gameStage>.sentence-bank{gap:8px;padding:6px 4px 10px}
}

/* Source: css/quiz.css; sha256: e8e1e54a0025d69dc301f4e87c430dba476384c7e84066bd09986507f8400f8e */
.activity-player[data-game="quiz"]{background:#1c75ac;color:#fff}
.activity-player[data-game="quiz"] #gameStage{padding:4.5% 4% 7%;color:inherit}
.quiz-shell{height:100%;display:flex;flex-direction:column;gap:1.2cqw;min-height:0}
.quiz-question{flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:1.2cqw;min-height:4cqw;max-height:25%;overflow:auto}
.quiz-question-content{display:flex;align-items:center;justify-content:center;gap:1.6cqw;white-space:pre-wrap;text-align:center;font-size:3cqw;line-height:1.22;font-weight:600;overflow-wrap:anywhere}
.quiz-question-content img{max-height:10cqw;max-width:25%;object-fit:contain}
.quiz-question.has-image{flex:0 1 40%;max-height:40%}.quiz-question.has-image .quiz-question-content{height:100%;max-height:100%}.quiz-question.has-image img{max-height:100%;max-width:100%}.quiz-question.has-image .quiz-question-content:has(span) img{max-width:35%}
.quiz-instruction{font-size:1.5cqw;text-align:center;min-height:1.6cqw;margin:0}
.quiz-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--quiz-rows),minmax(0,1fr));gap:1.4cqw;flex:1 1 auto;min-height:0}
.quiz-choice-wrap{position:relative;min-width:0;min-height:0}
.quiz-choice{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#202d38;background:#fff;border:.3cqw solid #eaf7ff;border-radius:1.1cqw;padding:1.4cqw 3.7cqw;font:inherit;font-size:2.5cqw;cursor:pointer;box-shadow:0 .4cqw 0 #0c4d78;transition:transform .16s,background .16s,opacity .16s}
.quiz-choice:focus-visible{outline:.4cqw solid #ffd842;outline-offset:.3cqw}
.quiz-choice:hover:not(:disabled){transform:translateY(-.3cqw);background:#f4fbff}
.quiz-choice-content{display:flex;align-items:center;justify-content:center;gap:1cqw;width:100%;height:100%;min-height:0;flex-direction:column;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere}
.quiz-choice-content img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;flex:1 1 auto}
.quiz-choice-content span{flex:0 0 auto;max-width:100%}
.quiz-choice.has-image:has(.quiz-choice-content span) img{max-height:70%}
.quiz-letter{position:absolute;left:.9cqw;top:.9cqw;display:grid;place-items:center;background:#e8f3fa;color:#285d85;border-radius:.5cqw;min-width:2.2cqw;height:2.2cqw;font-size:1.4cqw}
.quiz-choice.is-selected{border-color:#ffd638;background:#fffbe1;transform:none}
.quiz-choice.is-correct{background:#e6f5db;border-color:#7ac641;color:#254913}
.quiz-choice.is-wrong{background:#fbe2e2;border-color:#e64b4b;color:#6c2020;animation:quiz-wrong-shake .3s}
.quiz-choice.is-dim{opacity:.55}
.quiz-mark{position:absolute;right:.8cqw;top:.7cqw;font-size:2.4cqw;font-weight:900}
.quiz-audio{display:grid;place-items:center;border:0;border-radius:50%;background:#fff;color:#236797;width:3.5cqw;height:3.5cqw;flex:0 0 auto;cursor:pointer}
.quiz-audio svg{fill:currentColor;width:70%;height:70%}
.quiz-answer-audio{position:absolute;right:.7cqw;bottom:.7cqw;box-shadow:0 0 0 .1cqw #b7d8ee}
.quiz-sound-symbol{font-size:6cqw}
.quiz-footer{display:flex;align-items:center;gap:1.4cqw;min-height:44px;flex:0 0 auto}
.quiz-footer p{margin:0;flex:1;font-size:1.8cqw}
.quiz-skip,.quiz-next{font:inherit;font-size:1.8cqw;color:#fff;border:.15cqw solid #b8ddf7;border-radius:.5cqw;background:#166699;padding:.5cqw 1.7cqw;cursor:pointer}
.quiz-next{background:#fff;color:#24567a}.quiz-next[hidden],.quiz-skip[hidden]{display:none}
.quiz-review-item{padding:14px;border-bottom:1px solid #ddd}.quiz-review-item h3{font-size:18px;line-height:1.4;font-weight:500}.quiz-review-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quiz-review-answer{padding:10px;display:flex;flex-direction:column;gap:8px;border:1px solid #ccc;border-radius:6px;overflow-wrap:anywhere}.quiz-review-answer.is-correct{border-color:#80bc5b;background:#f1f9eb}.quiz-review-answer img{height:140px;width:100%;object-fit:contain}.quiz-review-question-image{max-height:140px;max-width:100%;object-fit:contain}.quiz-review-audio{align-self:flex-start;background:#fff;border:1px solid #91b9d3;border-radius:4px;padding:6px;cursor:pointer}
@keyframes quiz-wrong-shake{25%{transform:translateX(-.8cqw)}75%{transform:translateX(.8cqw)}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .quiz-choice{transition:none}:where(:root:not([data-motion-managed])) .quiz-choice.is-wrong{animation:none}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .quiz-choice{transition:none}:where(:root[data-reduce-motion]) .quiz-choice.is-wrong{animation:none}

/* A portrait classroom game is a readable composition, not a scaled-down
   desktop slide. The footer remains in the shared utility strip. */
@media (max-width: 620px) {
  #activityPlayer.game-shell[data-game="quiz"]:not(:fullscreen)::before {
    aspect-ratio: auto;
    height: clamp(500px, 72svh, 650px);
  }
  #activityPlayer[data-game="quiz"] #gameStage {
    /* The shared HUD already reserves its own row above this stage. */
    padding: 8px 12px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #activityPlayer[data-game="quiz"] .quiz-shell {
    height: auto;
    min-height: 100%;
    justify-content: center;
    gap: 14px;
  }
  #activityPlayer[data-game="quiz"] #gameStage .quiz-question {
    flex: none;
    max-width: 100%;
    max-height: none;
    min-height: 48px;
    margin-top: 0;
    padding: 12px;
    overflow: visible;
    border-radius: 12px;
  }
  #activityPlayer[data-game="quiz"] .quiz-question-content {
    font-size: clamp(19px, 5.2cqw, 28px);
    line-height: 1.35;
  }
  #activityPlayer[data-game="quiz"] .quiz-question.has-image .quiz-question-content {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  #activityPlayer[data-game="quiz"] .quiz-question.has-image img {
    max-height: 150px;
    max-width: 100%;
  }
  #activityPlayer[data-game="quiz"] .quiz-question.has-image .quiz-question-content:has(span) img {
    max-width: 100%;
  }
  #activityPlayer[data-game="quiz"] .quiz-instruction {
    font-size: 14px;
    line-height: 1.4;
    min-height: 0;
  }
  #activityPlayer[data-game="quiz"] .quiz-instruction:empty { display: none; }
  #activityPlayer[data-game="quiz"] .quiz-choices {
    flex: none;
    grid-template-rows: none;
    grid-auto-rows: minmax(96px, max-content);
    gap: 12px;
  }
  #activityPlayer[data-game="quiz"] .quiz-choice-wrap:has(.has-image) {
    height: clamp(172px, 51cqw, 260px);
  }
  #activityPlayer[data-game="quiz"] #gameStage .quiz-choice {
    min-height: 96px;
    padding: 36px 10px 12px;
    border-width: 2px;
    border-radius: 12px;
    font-size: 18px;
  }
  #activityPlayer[data-game="quiz"] .quiz-choice-content {
    /* The shared text fitter must not reduce children's answers below18px. */
    font-size: 18px !important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  #activityPlayer[data-game="quiz"] #gameStage .quiz-letter {
    left: 9px;
    top: 8px;
    min-width: 24px;
    height: 24px;
    font-size: 14px;
  }
  #activityPlayer[data-game="quiz"] .quiz-mark {
    right: 9px;
    top: 8px;
    font-size: 24px;
  }
  #activityPlayer[data-game="quiz"] .quiz-audio {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  #activityPlayer[data-game="quiz"] .quiz-footer {
    min-height: 44px;
    gap: 12px;
    align-items: center;
  }
  #activityPlayer[data-game="quiz"] .quiz-footer p {
    font-size: 14px;
    line-height: 1.4;
  }
  #activityPlayer[data-game="quiz"] :is(.quiz-skip,.quiz-next) {
    min-width: 64px;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 16px;
    border-width: 1px;
    border-radius: 9px;
  }
}

/* Answer feedback stays readable without a full-width panel over the world. */
@media(min-width:621px) and (max-height:500px){
  /* Landscape phones need actual reading space; width-based padding must not
     squeeze an answer into a one-pixel strip. Long lessons scroll as a board. */
  #activityPlayer[data-game=quiz] #gameStage{padding:8px 16px 8px;overflow-y:auto;overscroll-behavior:contain}
  #activityPlayer[data-game=quiz] #gameStage .quiz-shell{height:auto;min-height:100%;gap:8px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question{flex:none;max-height:none;min-height:64px;padding:6px 12px;overflow:visible}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question-content{height:auto;max-height:none;font-size:20px;line-height:1.25}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question.has-image img{height:64px;max-height:64px;max-width:24%;object-fit:contain}
  #activityPlayer[data-game=quiz] #gameStage .quiz-instruction:empty{display:none}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choices{flex:1 0 auto;grid-template-rows:none;grid-auto-rows:minmax(52px,auto);gap:8px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice{min-height:52px;padding:6px 46px;font-size:18px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice-content{height:auto;min-height:24px;overflow:visible;font-size:18px!important;line-height:1.25}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image{min-height:100px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice-content img{max-height:72px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-audio{width:44px;height:44px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-answer-audio{bottom:4px;right:4px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-footer{min-height:44px}
  #activityPlayer[data-game=quiz] #gameStage :is(.quiz-skip,.quiz-next){min-height:44px;font-size:16px;padding:6px 16px}
}

#activityPlayer[data-game=quiz] #gameStage #quizStatus:not(:empty){
  flex:0 1 auto;width:fit-content;max-width:calc(100% - 100px);margin-right:auto;
  padding:5px 10px;border:1px solid color-mix(in srgb,var(--style-ink,#183e61) 18%,transparent);
  border-radius:999px;background:var(--style-surface,#fffaf0);color:var(--style-ink,#183e61);
  line-height:1.35;text-shadow:none;box-shadow:0 1px 3px #173c4014
}

/* Long reading questions start at their first line and scroll independently,
   so the answer choices remain close at hand on both phones and desktops. */
#activityPlayer[data-game=quiz] #gameStage .quiz-question.is-passage{
  flex:0 0 auto;width:100%;max-width:100%;min-height:0;
  max-height:clamp(110px,32svh,260px);align-items:flex-start;justify-content:flex-start;
  overflow:auto;overscroll-behavior:contain;scroll-padding-block:12px;
}
#activityPlayer[data-game=quiz] #gameStage .quiz-question.is-passage .quiz-question-content{
  flex:1 1 auto;width:100%;min-width:0;height:auto;max-height:none;
  align-items:flex-start;justify-content:flex-start;text-align:start;
  font-size:clamp(18px,2.1cqw,26px);line-height:1.45;
}
#activityPlayer[data-game=quiz] #gameStage .quiz-question.is-passage .quiz-question-content>span{
  flex:1 1 auto;min-width:0;max-width:100%;
}
#activityPlayer[data-game=quiz] #gameStage .quiz-question.is-passage .quiz-question-content img{
  flex:0 0 auto;max-height:120px;max-width:25%;object-fit:contain;
}

/* Read the prompt first. Ordinary sentences get their natural height instead
   of being squeezed into 25% of the board while empty answers grow below. */
#activityPlayer[data-game=quiz] #gameStage .quiz-question:not(.has-image):not(.is-passage){
  flex:none;width:100%;max-width:100%;min-height:0;max-height:none;
  margin:0;padding:clamp(14px,1.8cqw,24px) clamp(18px,2.8cqw,36px);
  overflow:visible;
}
#activityPlayer[data-game=quiz] #gameStage .quiz-question:not(.has-image):not(.is-passage) .quiz-question-content{
  flex:1;min-width:0;width:100%;height:auto;max-height:none;
  font-size:clamp(24px,3.5cqw,38px);line-height:1.35;
}
#activityPlayer[data-game=quiz] #gameStage .quiz-question.is-sentence .quiz-question-content{
  justify-content:flex-start;text-align:start;
}
#activityPlayer[data-game=quiz] #gameStage .quiz-question-content>span{min-width:0;max-width:100%;}
#activityPlayer[data-game=quiz] #gameStage .quiz-instruction:empty{display:none;}
#activityPlayer[data-game=quiz] #gameStage .quiz-choices:not(:has(.has-image)){
  min-height:calc(var(--quiz-rows) * 88px + (var(--quiz-rows) - 1) * 1.4cqw);
}
#activityPlayer[data-game=quiz] #gameStage .quiz-choice-content{line-height:1.3;}
#activityPlayer[data-game=quiz] #gameStage .quiz-choice:not(.has-image):not(:has(.quiz-letter)){
  padding:12px 20px;
}
@media(min-width:621px){
  /* The shared HUD already owns its top row. Percentage padding used to
     consume another fifth of a short game before the lesson even began. */
  #activityPlayer[data-game=quiz] #gameStage{padding:clamp(12px,1.6cqw,22px) 3cqw 14px;}
}
@media(max-width:620px){
  #activityPlayer[data-game=quiz] #gameStage .quiz-question:not(.has-image):not(.is-passage){padding:16px;}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question:not(.has-image):not(.is-passage) .quiz-question-content{font-size:clamp(22px,6.1cqw,28px);}
}
@media(min-width:621px) and (max-height:500px){
  #activityPlayer[data-game=quiz] #gameStage{padding:6px 16px;}
  /* A definite shell height breaks the feedback loop between percentage-height
     answer buttons and auto-height flex/grid rows in a short fullscreen. */
  #activityPlayer[data-game=quiz] #gameStage .quiz-shell{height:100%;min-height:0;justify-content:flex-start;}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question:not(.has-image):not(.is-passage){padding:10px 16px;}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question:not(.has-image):not(.is-passage) .quiz-question-content{font-size:clamp(24px,3.4cqw,28px);line-height:1.3;}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choices:not(:has(.has-image)){flex:1 1 0;grid-template-rows:repeat(var(--quiz-rows),minmax(58px,1fr));grid-auto-rows:auto;min-height:calc(var(--quiz-rows) * 58px + (var(--quiz-rows) - 1) * 8px);}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice:not(.has-image):not(:has(.quiz-letter)){padding:6px 18px;}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice:not(.has-image) .quiz-choice-content{height:100%;min-height:0;}
}
@media(min-width:621px) and (max-height:420px){
  #activityPlayer[data-game=quiz] #gameStage .quiz-question:not(.has-image):not(.is-passage) .quiz-question-content{font-size:26px;}
  /* Three choices leave a fourth position free. Use that space for feedback
     and Next/Skip on a short phone, rather than adding another scrolled row. */
  #activityPlayer[data-game=quiz] #gameStage .quiz-shell:has(.quiz-choices[data-count="3"]):not(:has(.quiz-choice.has-image)){position:relative;}
  #activityPlayer[data-game=quiz] #gameStage .quiz-shell:has(.quiz-choices[data-count="3"]):not(:has(.quiz-choice.has-image)) .quiz-footer{position:absolute;right:4px;bottom:4px;width:calc(50% - 8px);gap:8px;}
}

/* Source: css/findmatch.css; sha256: 70096d40239c5a4dc9b1b69d99e7610b48d149a2c45e0e051beca630a801e714 */
/* Lock and key (formerly Clue match, js/games/findmatch.js). The clue is written on a
   padlock's label; the answers hang on a pegboard as key tags. The learning world supplies the
   scene, colours, type and buttons through its --wk tokens. Original ClassPlay design (5.44.0). */
#activityPlayer[data-game=findmatch]{--lk-ink:var(--wk-flat-ink,var(--wk-ink,#173e54));--lk-paper:var(--wk-card-flat,var(--style-surface,#fffdf7));--lk-edge:var(--wk-line,#376883);--lk-drop:var(--wk-drop,#143b54);--lk-radius:var(--wk-radius-sm,16px);--lk-body:var(--wk-c2,#f2b632);--lk-body-d:var(--wk-c2d,#b47f0a);--lk-steel:#aab4be;--lk-steel-d:#6f7a85;--lk-hole:#2b2219;--lk-good:var(--wk-good,#2fbf71);--lk-good-d:var(--wk-good-d,#1d8f50);--lk-bad:var(--wk-bad,#e5484d)}
#activityPlayer[data-game=findmatch] #gameStage{padding:clamp(10px,2cqw,26px) clamp(12px,2.4cqw,34px);font-family:var(--wk-display,inherit)}
.lk-shell{container:lk-shell/size;position:relative;height:100%;min-height:0;isolation:isolate}
.lk-layout{height:100%;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-rows:minmax(0,1fr) auto;gap:clamp(8px,1.6cqw,22px) clamp(12px,2.4cqw,32px)}
.lk-shell *{box-sizing:border-box}
.lk-shell [hidden]{display:none!important}
.lk-icon{display:block;width:100%;height:100%}
/* Said to a screen reader only: each new clue. */
.lk-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- The lock ---------- */
.lk-lockside{display:grid;grid-template-areas:"where" "zone" "ring";grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:center;gap:clamp(6px,1.2cqh,14px);min-width:0;min-height:0}
.lk-where{grid-area:where;margin:0;padding:6px 14px;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(14px,1.6cqw,20px)/1.25 var(--wk-display,inherit);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lk-lock-zone{grid-area:zone;container:lk-zone/size;position:relative;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.lk-lock{position:relative;flex:none;width:min(100cqw,calc((100cqh - 22px) / 1.08),540px);aspect-ratio:1/1.08;transform-origin:50% 0}
.lk-lock.is-away{visibility:hidden}
/* The shackle: a steel loop whose left leg lifts out when the lock opens. */
.lk-shackle{position:absolute;left:20%;width:60%;top:0;height:42%;border:clamp(10px,9cqmin,28px) solid var(--lk-steel);border-bottom:0;border-radius:999px 999px 0 0;box-shadow:inset 0 4px 0 #ffffff80,0 3px 0 #0000002e;transform-origin:93% 100%;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.lk-body{position:absolute;left:0;right:0;top:33%;bottom:0;z-index:1;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;padding:7% 7% 5%;border:4px solid var(--lk-body-d);border-radius:clamp(18px,8cqmin,44px);background:linear-gradient(180deg,color-mix(in srgb,var(--lk-body) 82%,#fff),var(--lk-body) 46%,color-mix(in srgb,var(--lk-body) 88%,#000));box-shadow:inset 0 4px 0 #ffffff6b,inset 0 -6px 0 #00000021,0 6px 0 var(--lk-body-d),0 14px 24px #00000038;transition:box-shadow .25s ease}
/* The label the clue is written on; a recorded clue's Listen button sits beside the words. */
.lk-plate{position:relative;width:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;padding:5% 6%;border-radius:clamp(10px,4cqmin,24px);background:var(--lk-paper);color:var(--lk-ink);box-shadow:inset 0 2px 7px #0000002e,0 1px 0 #ffffff99;overflow:hidden}
.lk-plate:has(> .lk-listen:not([hidden])){grid-template-columns:auto minmax(0,1fr);column-gap:clamp(6px,2.4cqmin,14px);padding-left:4%}
.lk-clue{width:100%;height:100%;min-height:0;display:grid;place-items:center}
.lk-clue .pair-face-content{display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:clamp(4px,1.6cqmin,12px);width:100%;height:100%;min-height:0;text-align:center}
.lk-clue .pair-face-picture{display:flex;justify-content:center;align-items:center;flex:1 1 auto;width:100%;min-height:0;max-height:60%}
.lk-clue .pair-face-content:not(:has(.pair-face-text)) .pair-face-picture{max-height:100%;height:100%}
.lk-clue .pair-face-picture img{max-width:100%;max-height:100%;object-fit:contain}
.lk-clue .pair-face-text{flex:0 0 auto;max-width:100%;font-size:clamp(18px,7cqmin,60px);font-weight:800;line-height:1.15;overflow-wrap:normal}
.lk-clue[data-reading=true] .pair-face-content{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lk-clue[data-reading=true] .pair-face-text{font-size:16px;text-align:start;overflow-wrap:anywhere}
.lk-clue .pair-audio-art{width:min(46%,150px);height:auto}
.lk-keyhole{position:relative;width:clamp(16px,6.5cqmin,36px);aspect-ratio:1/1.65;margin-top:clamp(6px,3cqmin,16px)}
.lk-keyhole::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1;border-radius:50%;background:var(--lk-hole);box-shadow:0 2px 0 #ffffff59}
.lk-keyhole::after{content:"";position:absolute;left:28%;right:28%;top:40%;bottom:0;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);background:var(--lk-hole)}
.lk-listen{width:clamp(34px,10cqmin,48px);height:clamp(34px,10cqmin,48px);padding:7px;border:0;border-radius:50%;background:var(--wk-btn,#fff);color:var(--wk-btn-ink,#173e54);box-shadow:var(--wk-btn-shadow,0 3px 0 #00000033);cursor:pointer}
.lk-listen:focus-visible{outline:4px solid var(--wk-mark,#ffd34a);outline-offset:3px}
/* Open: the shackle lifts and swings, and the lock glows. */
.lk-lock.is-open .lk-shackle{transform:translateY(-17%) rotate(-24deg)}
.lk-lock.is-open .lk-body{box-shadow:0 0 0 6px color-mix(in srgb,var(--lk-good) 60%,transparent),inset 0 4px 0 #ffffff6b,0 6px 0 var(--lk-body-d),0 14px 24px #00000038}
.lk-lock.is-open .lk-keyhole::before,.lk-lock.is-open .lk-keyhole::after{background:var(--lk-good-d)}
/* The time for each lock runs down under it. */
.lk-time{flex:none;width:min(84%,380px);height:12px;padding:2px;border-radius:999px;background:var(--wk-pill,#163c50b8);overflow:hidden}
.lk-time i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--wk-c3,#4f9a34);transform-origin:0 50%}
.lk-time.is-short i{background:var(--lk-bad)}

/* ---------- The key ring: every opened lock ---------- */
.lk-ring{grid-area:ring;display:flex;align-items:center;gap:8px;min-height:38px;max-width:100%;padding:5px 14px 5px 7px;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(13px,1.4cqw,18px)/1 var(--wk-display,inherit)}
.lk-ring-loop{flex:none;width:26px;height:26px;border:4px solid #d3dae0;border-radius:50%;box-shadow:inset 0 0 0 1px #0000002e,0 1px 0 #0000004d}
.lk-ring-locks{display:flex;align-items:flex-end;gap:4px;min-width:0;overflow:hidden}
.lk-ring-locks i{position:relative;flex:none;width:13px;height:11px;margin-top:8px;border-radius:3px;background:var(--lk-body);box-shadow:inset 0 -2px 0 #0000002b}
.lk-ring-locks i::before{content:"";position:absolute;left:1px;bottom:9px;width:9px;height:8px;border:2px solid #d3dae0;border-bottom:0;border-radius:6px 6px 0 0;transform:rotate(-22deg);transform-origin:100% 100%}
.lk-ring-count{white-space:nowrap}

/* ---------- The pegboard and its key tags ----------
   The tag padding and string length per density are the frame js/games/findmatch.js allows
   for around a tag's words (frameHeight): change them together. */
.lk-board{position:relative;display:grid;grid-template-columns:repeat(var(--lk-cols,3),minmax(0,1fr));grid-template-rows:repeat(var(--lk-rows,3),minmax(0,1fr));gap:clamp(8px,1.3cqw,14px);min-width:0;min-height:0;padding:clamp(10px,1.6cqw,20px);border:var(--wk-panel-border,3px solid var(--lk-edge));border-radius:var(--wk-radius,22px);background:radial-gradient(circle,color-mix(in srgb,var(--lk-edge) 26%,transparent) 0 2px,transparent 2.6px) 6px 6px/24px 24px,var(--wk-panel,#fdf8ea);box-shadow:var(--wk-panel-shadow,0 6px 0 var(--lk-drop))}
/* More keys than the board can hold at a readable size: the board scrolls. */
.lk-board[data-scroll=true]{grid-template-rows:repeat(var(--lk-rows,3),var(--lk-row,52px));align-content:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
:is(.lk-board,.lk-flying-frame){--lk-string:18px}
:is(.lk-board,.lk-flying-frame)[data-density=compact]{--lk-string:10px}
:is(.lk-board,.lk-flying-frame)[data-density=dense]{--lk-string:7px}
.lk-peg{container:lk-peg/size;position:relative;min-width:0;min-height:0;padding-top:var(--lk-string)}
/* The peg the tag hangs from. */
.lk-peg::before{content:"";position:absolute;left:50%;top:0;z-index:3;width:10px;height:10px;translate:-50% -2px;border-radius:50%;background:var(--lk-steel-d);box-shadow:inset 0 2px 0 #ffffff80,0 2px 2px #00000042}
.lk-tag{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:22px 12px 8px;border:var(--wk-card-line,3px solid var(--lk-edge));border-radius:var(--lk-radius);background:var(--lk-paper);color:var(--lk-ink);box-shadow:var(--wk-card-drop,0 4px 0 var(--lk-drop),0 8px 14px #0000002e);font:inherit;text-align:center;cursor:pointer;touch-action:manipulation;transform-origin:50% calc(-1 * var(--lk-string));transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease}
/* The string to the peg, and the tag's eyelet in the tag's colour. */
.lk-tag::before{content:"";position:absolute;left:50%;bottom:calc(100% - 9px);width:2px;height:calc(var(--lk-string) + 9px);translate:-50% 0;background:color-mix(in srgb,var(--lk-edge) 72%,transparent);pointer-events:none}
.lk-tag::after{content:"";position:absolute;left:50%;top:5px;width:11px;height:11px;translate:-50% 0;border-radius:50%;background:var(--lk-paper);box-shadow:0 0 0 3px var(--lk-tone,#3d8bd6);pointer-events:none}
.lk-tag-key{position:absolute;left:8px;top:6px;width:clamp(18px,24cqh,34px);height:auto;color:color-mix(in srgb,var(--lk-tone,#3d8bd6) 80%,#000);opacity:.85;transform:rotate(-28deg)}
.lk-tag .pair-face-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;min-height:0;overflow:hidden}
.lk-tag .pair-face-picture{display:flex;justify-content:center;align-items:center;flex:1 1 auto;width:100%;min-height:0}
.lk-tag .pair-face-content:has(.pair-face-text) .pair-face-picture{max-height:66%}
.lk-tag .pair-face-picture img{max-width:100%;max-height:100%;object-fit:contain}
.lk-tag .pair-face-text{max-width:100%;font-size:clamp(14px,min(34cqh,13cqw),44px);font-weight:800;line-height:1.12;overflow-wrap:normal}
.lk-tag .pair-audio-art{height:100%;width:auto;max-width:60%}
.lk-tag-listen{position:absolute;right:5px;bottom:5px;z-index:2;width:30px;height:30px;padding:6px;border:0;border-radius:50%;background:var(--wk-btn,#fff);color:var(--wk-btn-ink,#173e54);box-shadow:var(--wk-btn-shadow,0 2px 0 #00000033);cursor:pointer}
@media (hover:hover){.lk-tag:hover:not(:disabled):not(.is-tried):not(.is-away){transform:rotate(-3deg)}}
.lk-tag:focus-visible,.lk-tag-listen:focus-visible{outline:4px solid var(--wk-mark,#ffd34a);outline-offset:3px}
.lk-tag.is-away{opacity:.28}
/* A key already tried in this lock is crossed through. */
.lk-tag.is-tried{opacity:.6;cursor:default;background:linear-gradient(to top right,transparent calc(50% - 2px),color-mix(in srgb,var(--lk-bad) 75%,transparent) calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),var(--lk-paper)}
.lk-tag.is-hint{box-shadow:0 0 0 4px var(--lk-good),0 0 20px 6px color-mix(in srgb,var(--lk-good) 50%,transparent);animation:lk-glow 1.1s ease-in-out infinite alternate}
@keyframes lk-glow{to{box-shadow:0 0 0 4px var(--lk-good),0 0 8px 2px color-mix(in srgb,var(--lk-good) 35%,transparent)}}
.lk-peg.is-gone .lk-tag,.lk-peg.is-gone .lk-tag-listen{visibility:hidden}
:is(.lk-board,.lk-flying-frame)[data-density=compact] .lk-tag{padding:16px 10px 5px}
:is(.lk-board,.lk-flying-frame)[data-density=compact] .lk-tag::after{top:4px;width:9px;height:9px}
:is(.lk-board,.lk-flying-frame)[data-density=compact] .lk-tag-key{top:3px;width:min(20px,24cqh)}
/* Small tags keep their room for words: no eyelet and no key drawing. */
:is(.lk-board,.lk-flying-frame)[data-density=dense] .lk-tag{padding:6px 6px 4px}
:is(.lk-board,.lk-flying-frame)[data-density=dense] .lk-tag::before{bottom:100%;height:var(--lk-string)}
:is(.lk-board,.lk-flying-frame)[data-density=dense] .lk-tag::after,:is(.lk-board,.lk-flying-frame)[data-density=dense] .lk-tag-key{display:none}
:is(.lk-board,.lk-flying-frame)[data-density=dense] .lk-tag-listen{width:24px;height:24px;padding:4px;right:3px;bottom:3px}
/* A key with its own Listen button keeps its words clear of the button. */
.lk-peg:has(> .lk-tag-listen) > .lk-tag,.lk-flying-frame.has-listen > .lk-tag{padding-right:40px}
.lk-board[data-density=compact] .lk-peg:has(> .lk-tag-listen) > .lk-tag,.lk-flying-frame.has-listen[data-density=compact] > .lk-tag{padding-right:36px}
.lk-board[data-density=dense] .lk-peg:has(> .lk-tag-listen) > .lk-tag,.lk-flying-frame.has-listen[data-density=dense] > .lk-tag{padding-right:30px}
/* A key on its way to the lock, and an opened lock on its way to the ring: copies in frames the
   size of their own space, so they look exactly like what they copy. */
.lk-flying-frame{position:absolute;z-index:40;margin:0;pointer-events:none}
.lk-flying-frame.lk-peg::before{display:none}
.lk-flying-frame.is-lock{z-index:35;container:lk-zone/size}
.lk-flying-frame .lk-lock{transform-origin:50% 50%}
.lk-flying{transform-origin:50% 50%;transition:none;opacity:1}
.lk-flying::before{display:none}

/* ---------- What happened ---------- */
.lk-status{grid-column:1/-1;justify-self:center;max-width:min(92%,760px);min-height:1.5em;margin:0;padding:.3em .95em;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(14px,1.5cqw,19px)/1.35 var(--wk-display,inherit);text-align:center}
.lk-status:empty{visibility:hidden}

/* ---------- A narrow game (a phone): the lock above the board, as wide as the screen ---------- */
@container lk-shell (max-width:640px){
  /* Few keys leave the lock more of the height. */
  .lk-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.3fr) minmax(0,1fr) auto}
  .lk-layout:has(.lk-peg:nth-child(5)){grid-template-rows:minmax(0,1.1fr) minmax(0,1fr) auto}
  .lk-layout:has(.lk-peg:nth-child(9)){grid-template-rows:minmax(0,.9fr) minmax(0,1.1fr) auto}
  .lk-lockside{grid-template-areas:"where ring" "zone zone";grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);justify-items:start;width:100%}
  .lk-ring{justify-self:end;min-height:32px;padding:4px 10px 4px 5px}
  .lk-ring-locks{display:none}
  .lk-lock-zone{justify-self:stretch;gap:6px}
  .lk-lock{width:min(100cqw,calc((100cqh - 18px) * 1.45),540px);aspect-ratio:1.45/1}
  .lk-shackle{left:27%;width:46%;height:36%}
  .lk-body{top:26%;padding:5% 5% 4%}
  .lk-keyhole{width:clamp(12px,5cqmin,24px);margin-top:4px}
}
/* ---------- A short game (a phone on its side, a small window): a wider lock ---------- */
@container lk-shell (max-height:470px){
  .lk-lockside{grid-template-areas:"where ring" "zone zone";grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);justify-items:start;width:100%}
  .lk-ring{justify-self:end;min-height:30px;padding:3px 10px 3px 5px}
  .lk-ring-locks{display:none}
  .lk-lock-zone{justify-self:stretch;gap:6px}
  .lk-lock{width:min(100cqw,calc((100cqh - 18px) * 1.3),540px);aspect-ratio:1.3/1}
  .lk-shackle{left:25%;width:50%;height:37%}
  .lk-body{top:27%;padding:5% 6% 4%}
  .lk-keyhole{width:clamp(12px,5cqmin,24px);margin-top:4px}
}
@media (max-width:620px){
  #activityPlayer.game-shell[data-game=findmatch]:not(:fullscreen){height:clamp(600px,90svh,760px)}
  #activityPlayer[data-game=findmatch] #gameStage{padding:10px}
}
/* High contrast: a tried key is struck through and the hint and the open lock are outlined. */
@media (forced-colors:active){
  .lk-tag.is-tried{border-style:dashed;text-decoration:line-through}
  .lk-tag.is-hint{outline:4px solid Highlight;outline-offset:3px}
  .lk-lock.is-open .lk-body{outline:4px solid Highlight}
}
@media (prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) :is(.lk-shackle,.lk-tag,.lk-body){transition:none}:where(:root:not([data-motion-managed])) .lk-tag.is-hint{animation:none}}
:where(:root[data-reduce-motion]) :is(.lk-shackle,.lk-tag,.lk-body){transition:none}
:where(:root[data-reduce-motion]) .lk-tag.is-hint{animation:none}

/* Source: css/unjumble.css; sha256: d01aaae8b94fd98f2ba9fbe880422dcf339029a9aabdce0be90b7ee779cc6af2 */
.activity-player[data-game=unjumble] #gameStage{padding:28px 30px 55px;overflow-y:auto;align-content:start}.unjumble-layout{width:min(960px,100%);margin:0 auto}.unjumble-status{font-size:clamp(15px,1.6vw,20px);line-height:1.5;margin:14px 0 22px;text-align:center}.unjumble-status{min-height:30px;font-size:17px}.unjumble-status:empty{display:none}.unjumble-media{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}.unjumble-media:empty{display:none}.unjumble-media img{display:block;width:auto;max-width:100%;height:clamp(160px,23cqw,280px);object-fit:contain}.unjumble-slots,.unjumble-bank{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px}.unjumble-layout[data-alignment=center] :is(.unjumble-slots,.unjumble-bank){justify-content:center}.unjumble-slots{padding:18px 14px;min-height:110px;border-radius:12px;background:#0002;border:2px dashed #ffffff80;margin-bottom:26px}.unjumble-bank{min-height:96px;padding:6px 12px}.unjumble-word,.unjumble-slot{position:relative;min-width:74px;min-height:62px;padding:10px 16px;border:2px solid #cee5f7;border-radius:8px;font-family:inherit;font-size:clamp(20px,2.5vw,30px);color:#16354d;background:linear-gradient(#fff,#e1eef7);box-shadow:0 5px 0 #91afc5;cursor:pointer;overflow-wrap:anywhere;touch-action:none}.unjumble-slot{background:#f8fcff26;color:inherit;border:2px dashed #ffffff9c;box-shadow:none}.unjumble-slot:has([data-word]){background:#f9fcff;color:#16354d;border:2px solid #e5f3ff;box-shadow:0 5px 0 #91afc5}.unjumble-slot.is-correct{background:#d2f8b6;color:#285923;border-color:#76bc52;box-shadow:0 5px 0 #4e9236}.unjumble-slot.is-wrong{background:#ffbab7;color:#73302c;border-color:#e07469}.unjumble-position{font-size:18px;opacity:.65}.unjumble-slot.is-drop-target{outline:4px solid #ffdd54;outline-offset:3px}.unjumble-word:focus-visible,.unjumble-slot:focus-visible{outline:4px solid #ffdb59;outline-offset:4px}.unjumble-actions{display:flex;justify-content:center;gap:14px}.unjumble-drag-ghost{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-50%);padding:12px 16px;border:2px solid #fff;border-radius:8px;background:#e8f5ff;color:#15354c;font-size:26px;box-shadow:0 8px 24px #0006}.unjumble-word.is-dragging,.unjumble-slot.is-dragging{opacity:.4}.unjumble-review{display:flex;gap:12px;white-space:pre-wrap}.unjumble-review img{max-width:180px;max-height:120px;display:block;object-fit:contain}
@media(max-width:700px){.activity-player[data-game=unjumble] #gameStage{padding:20px 12px 50px}.unjumble-word,.unjumble-slot{min-width:60px;min-height:52px;font-size:20px;padding:8px 12px}.unjumble-slots,.unjumble-bank{gap:10px}.unjumble-slots{padding:14px 10px}.unjumble-status{font-size:15px}.unjumble-media img{height:clamp(160px,42cqw,200px)}}

/* Whole-sentence marking needs the same reachable actions as word-level play. */
#activityPlayer[data-game=unjumble] [data-sentence-audio]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:10px 14px;font-size:18px;line-height:1.25;flex-shrink:0}
#activityPlayer[data-game=unjumble] [data-sentence-audio] svg{width:20px;height:20px;flex:none}
#activityPlayer[data-game=unjumble] #gameStage{overflow-y:auto;overscroll-behavior:contain}
#activityPlayer[data-game=unjumble] .unjumble-actions .btn{min-width:110px;min-height:44px;padding:10px 16px;font-size:clamp(14px,1.8cqw,24px);line-height:1.3;box-sizing:border-box}
@media(max-width:620px){
  .resource-page #activityPlayer.game-shell[data-game=unjumble]:not(:fullscreen){height:clamp(600px,80svh,760px)}
  #activityPlayer[data-game=unjumble] #gameStage{padding:20px 12px 16px}
}

/* Keep the word tiles and controls reachable on short landscape screens. */
@media(max-height:500px) and (min-width:621px){.unjumble-media img{height:clamp(96px,28svh,160px)}}

/* Reserve each target for the complete word set before the first placement.
   Returning or marking a word cannot resize its neighbours or the bank. */
#activityPlayer[data-game=unjumble] #gameStage .unjumble-slot{box-sizing:border-box;display:inline-grid;place-items:center;flex:none;width:var(--unjumble-slot-width,100px);height:var(--unjumble-slot-height,62px);max-width:100%;min-width:44px;min-height:44px;line-height:1.3}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-slot-label{box-sizing:border-box;display:block;min-width:0;min-height:0;width:100%;height:100%;padding-block:.1em;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:anywhere}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-word.is-used{visibility:hidden;pointer-events:none}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-word.unjumble-measure{position:absolute;inset:0 auto auto 0;visibility:hidden;pointer-events:none;display:block;max-width:none;min-width:0;height:auto;margin:0;overflow:visible;white-space:pre-wrap;line-height:1.3}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-status{display:block;min-height:30px;margin:8px 0;line-height:1.3}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-status:empty{visibility:hidden}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-slots{gap:16px 12px;padding-block:12px}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-bank{gap:16px 12px}
@media(max-width:700px){#activityPlayer[data-game=unjumble] #gameStage .unjumble-media img{height:clamp(100px,32cqw,140px)}}

/* Give the prompt, two word regions and actions explicit, stable tracks.
   Large word sets scroll in their own regions, never move the whole game. */
#activityPlayer[data-game=unjumble] #gameStage{display:block;padding:12px 22px 16px;overflow:hidden}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.1fr) minmax(0,.9fr) 30px 48px;gap:10px;width:100%;max-width:1100px;height:100%;min-height:0}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-layout:has(.unjumble-media:not(:empty)){grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);column-gap:20px}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-media{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;flex-wrap:nowrap;min-width:0;min-height:0;height:100%;margin:0;gap:8px}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-media:empty{display:none}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-media img{width:100%;height:100%;max-height:320px;min-height:0;flex:1;object-fit:contain}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-media button{flex:none}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-slots{grid-column:1;grid-row:1;box-sizing:border-box;min-width:0;min-height:0;height:100%;margin:0;align-content:flex-start;align-content:safe center;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-bank{grid-column:1;grid-row:2;box-sizing:border-box;min-width:0;min-height:0;height:100%;margin:0;align-content:flex-start;align-content:safe center;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-layout:has(.unjumble-media:not(:empty)) :is(.unjumble-slots,.unjumble-bank){grid-column:2}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-status{grid-column:1 / -1;grid-row:3;box-sizing:border-box;align-self:center;justify-self:center;max-width:100%;min-height:0;max-height:30px;margin:0;padding:3px 9px;overflow:auto}
#activityPlayer[data-game=unjumble] #gameStage .unjumble-actions{grid-column:1 / -1;grid-row:4;min-height:48px;align-items:center}
@media(max-width:700px){
  .resource-page #activityPlayer.game-shell[data-game=unjumble]:not(:fullscreen){height:690px}
  #activityPlayer[data-game=unjumble] #gameStage{padding:10px}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 128px 30px 44px;gap:8px}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-layout:has(.unjumble-media:not(:empty)){grid-template-columns:minmax(0,1fr);grid-template-rows:100px minmax(0,1fr) 128px 30px 44px;gap:8px}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-media{grid-column:1;grid-row:1}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-media img{height:100%;max-height:100px}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-layout:has(.unjumble-media:not(:empty)) .unjumble-slots{grid-column:1;grid-row:2}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-layout:has(.unjumble-media:not(:empty)) .unjumble-bank{grid-column:1;grid-row:3}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-layout:has(.unjumble-media:not(:empty)) .unjumble-status{grid-row:4}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-layout:has(.unjumble-media:not(:empty)) .unjumble-actions{grid-row:5}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-slots{gap:16px 8px;padding:8px 10px}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-bank{gap:12px 8px}
  #activityPlayer[data-game=unjumble] #gameStage :is(.unjumble-slot,.unjumble-measure){font-size:18px;padding:6px 9px}
  #activityPlayer[data-game=unjumble] #gameStage .unjumble-actions{min-height:44px}
}

/* Source: css/labelleddiagram.css; sha256: 6299d4c181d7dc66f5074a8e388fdf8bb0cd661db868274ea18b731819ac2fcb */
.diagram-shell{height:100%;display:flex;flex-direction:column;gap:1.2cqw;padding:1.5cqw;overflow:hidden;color:#173451}.diagram-instruction,.diagram-caption{flex:none;margin:0;text-align:center;font-size:clamp(12px,1.65cqw,20px)}.diagram-caption{font-weight:600}.diagram-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,24%);gap:1.5cqw;min-height:0;flex:1}.diagram-board{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid #8cb9d4;background:#fff;box-shadow:0 2px 4px #1544672e}.diagram-base-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.diagram-point-layer{position:absolute;pointer-events:none}.diagram-target,.diagram-editor-point{position:absolute;transform:translate(-50%,-50%);width:clamp(28px,4cqw,44px);height:clamp(28px,4cqw,44px);border:3px solid #148ace;border-radius:50%;background:#fff;color:#116da6;font-weight:700;font-size:clamp(13px,1.8cqw,20px);box-shadow:0 2px 4px #17345140;pointer-events:auto;z-index:2;touch-action:none}.diagram-target.is-filled{background:#e7f5ff}.diagram-target.is-drop-target,.diagram-target:focus-visible{outline:4px solid #ffcb36;outline-offset:3px}.diagram-pin-number{display:block}.diagram-pin-face{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:clamp(54px,8cqw,90px);max-height:clamp(42px,10cqw,100px);min-height:35px;display:flex;align-items:center;justify-content:center;gap:4px;padding:4px;background:#fff;border:2px solid #148ace;border-radius:5px;box-shadow:0 2px 3px #17345125;font-size:clamp(11px,1.3cqw,17px);overflow:hidden;overflow-wrap:anywhere}.diagram-pin-face img{max-width:100%;max-height:8cqw;object-fit:contain}.diagram-pin-face:has(img) span{font-size:.85em}.diagram-target.pin-left .diagram-pin-face{left:100%;transform:translateX(-100%)}.diagram-target.pin-right .diagram-pin-face{left:0;transform:none}.diagram-target.is-correct{background:#d7f4ce;border-color:#42a334;color:#247221}.diagram-target.is-correct .diagram-pin-face{border-color:#42a334}.diagram-target.is-wrong{border-color:#d73545;background:#ffe8eb;animation:diagram-shake .25s 2}.diagram-target.is-wrong .diagram-pin-face{border-color:#d73545}.diagram-bank{display:flex;flex-direction:column;gap:1cqw;overflow:auto;min-height:0;padding:3px}.diagram-label-cell{position:relative;flex:0 0 auto;min-height:45px}.diagram-label{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:55px;padding:7px;border:2px solid #2486bb;border-radius:5px;background:#fff;box-shadow:0 3px 0 #126a9d;color:#173451;cursor:grab;touch-action:none;font-size:clamp(13px,1.8cqw,24px);overflow-wrap:anywhere}.diagram-label img{max-width:100%;max-height:11cqw;object-fit:contain}.diagram-label:has(img) span{font-size:.8em}.diagram-label.is-selected{outline:4px solid #ffcb36;outline-offset:-2px;background:#fff8dd}.diagram-label.is-dragging{opacity:.3}.diagram-label-audio,.diagram-picture-audio{position:absolute;right:5px;bottom:5px;width:26px;height:26px;padding:4px;border:1px solid #559dbf;background:#eff9ff;border-radius:50%;color:#146c9b}.diagram-label-audio svg,.diagram-picture-audio svg{width:100%;height:100%}.diagram-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:37px;flex:none}.diagram-status{margin:0;font-size:clamp(12px,1.45cqw,18px)}.diagram-footer .btn{white-space:nowrap;font-size:clamp(12px,1.65cqw,20px);padding:.65em 1em}.diagram-drag-ghost{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-50%);opacity:.95;box-shadow:0 8px 20px #15374e50;max-height:150px}.diagram-drag-ghost img{max-height:120px}.diagram-sound-symbol{font-size:2em}.diagram-review{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;padding-left:28px}.diagram-review li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid #c4ddeb}.diagram-review img{max-width:130px;max-height:110px;object-fit:contain}.diagram-review button{font-size:12px}.diagram-picture-editor{padding:18px;background:#fff;border:1px solid #d4dee6}.diagram-picture-editor h2,.diagram-labels-heading{font-size:20px;margin:0 0 12px}.diagram-map-hint{font-size:14px;color:#526b7c}.diagram-editor-map{position:relative;height:480px;width:100%;overflow:hidden;border:1px solid #99bed2;background:#f4f9fc}.diagram-editor-point{width:32px;height:32px;font-size:14px;cursor:move}.diagram-editor-point.is-selected{outline:4px solid #ffcb36;z-index:3}.diagram-labels-heading{margin:22px 0 12px}.diagram-label-editor.is-selected{box-shadow:inset 4px 0 #198bc6}.diagram-select-label{border:0;background:transparent;cursor:pointer}.diagram-coordinates{display:flex;flex-wrap:wrap;gap:15px;font-size:13px;margin-top:9px;color:#526b7c}.diagram-coordinates label{display:flex;align-items:center;gap:7px}.diagram-coordinates input{width:88px;padding:4px;border:1px solid #bdced9;border-radius:3px;font:inherit}@keyframes diagram-shake{25%{margin-left:-4px}75%{margin-left:4px}}@media(max-width:600px){.diagram-shell{gap:2cqw;padding:2cqw}.diagram-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 25%;gap:2cqw}.diagram-bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;align-content:start}.diagram-label-cell{min-width:0}.diagram-label{height:100%;min-height:42px;padding:4px;font-size:12px}.diagram-label img{max-height:12cqw}.diagram-target{width:24px;height:24px;border-width:2px;font-size:12px}.diagram-pin-face{width:45px;max-height:50px;min-height:25px;bottom:calc(100% + 3px);padding:2px;font-size:10px}.diagram-pin-face img{max-height:44px}.diagram-footer{gap:5px}.diagram-footer .btn{padding:7px;font-size:12px}.diagram-status{font-size:11px}.diagram-instruction{font-size:12px}.diagram-editor-map{height:300px}}@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .diagram-target.is-wrong{animation:none}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .diagram-target.is-wrong{animation:none}
.activity-player.game-shell[data-game="labelleddiagram"]{background:#e9f5fc;color:#173451}.diagram-shell{padding:5cqw 2cqw 7cqw}.diagram-layout{position:relative;grid-template-columns:minmax(90px,20%) minmax(0,1fr) minmax(90px,20%);gap:1.5cqw}.diagram-connections{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}.diagram-connections line{stroke:#148ace;stroke-width:2.5;stroke-linecap:round}.diagram-connections line.is-correct{stroke:#42a334}.diagram-bank{justify-content:space-evenly;position:relative;z-index:3}.diagram-board{z-index:1}.diagram-label.is-placed{background:#e7f5ff}.diagram-label.is-correct{border-color:#42a334;background:#d7f4ce;box-shadow:0 3px 0 #287c22;opacity:1;cursor:default}.diagram-label:disabled{color:#173451}.diagram-review-picture{position:relative;width:100%;max-width:650px;margin:0 auto}.diagram-review-picture>img{display:block;width:100%;height:auto}.diagram-review-pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:25px;height:25px;border:2px solid #42a334;border-radius:50%;background:#fff;color:#247221;font-size:13px;font-weight:700}@media(max-width:600px){.activity-player.game-shell[data-game="labelleddiagram"]{aspect-ratio:4/5}.activity-player[data-game="labelleddiagram"]:fullscreen{aspect-ratio:auto}.diagram-shell{padding:7cqw 2cqw 8cqw}.diagram-layout{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 28%;gap:2cqw}.diagram-board{grid-row:1;grid-column:1/3}.diagram-bank{grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:initial;gap:2cqw}.diagram-bank-left{grid-column:1}.diagram-bank-right{grid-column:2}.diagram-label-cell{min-height:35px}.diagram-label{min-height:35px}.diagram-label img{max-height:13cqw}.diagram-footer{min-height:35px}.diagram-connections line{stroke-width:1.5}.diagram-status{max-width:62%}}

.activity-player[data-game="labelleddiagram"] #gameStage{padding:0}.activity-player[data-game="labelleddiagram"] .activity-clock{color:#173451}.diagram-bank{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--bank-rows,3),minmax(44px,1fr));align-content:start;gap:1cqw}.diagram-label-cell{min-height:0}.diagram-label{height:100%;min-height:0;overflow:hidden;user-select:none}.diagram-label img{pointer-events:none;-webkit-user-drag:none;max-height:100%;min-height:0}.diagram-target span{pointer-events:none}@media(max-width:600px){.diagram-bank{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--mobile-bank-rows,2),minmax(32px,1fr));gap:2cqw}.diagram-label-cell{min-height:0}.diagram-label{min-height:0}.diagram-label img{max-height:100%}}
/* A lifted source label must not add a horizontal scrollbar while dragging. */
.activity-player[data-game="labelleddiagram"] .diagram-bank{overflow-x:hidden;overflow-y:auto}

/* The picture, labels and grading row need their own space outside fullscreen.
   A generic video aspect ratio compressed nearby authored points into one hit area. */
#activityPlayer[data-game="labelleddiagram"] .diagram-target{min-width:44px;min-height:44px}
/* Listening is a separate target beside a label, never over its caption. */
#activityPlayer[data-game="labelleddiagram"] :is(.diagram-label-audio,.diagram-picture-audio){width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;display:grid;place-items:center}
#activityPlayer[data-game="labelleddiagram"] .diagram-label-cell:has(.diagram-label-audio){display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:center;min-height:64px}
#activityPlayer[data-game="labelleddiagram"] .diagram-label-audio{position:static;justify-self:end;align-self:center}
#activityPlayer[data-game="labelleddiagram"] .diagram-label-cell:has(.diagram-label-audio) .diagram-label{min-height:64px}
#activityPlayer[data-game="labelleddiagram"] .diagram-label{word-break:keep-all}
#activityPlayer[data-game="labelleddiagram"] .diagram-caption{font-size:clamp(16px,1.65cqw,20px);line-height:1.35;white-space:normal;overflow-wrap:anywhere}
@media(min-width:601px){
  @container(max-width:700px){
    #activityPlayer[data-game="labelleddiagram"] .diagram-shell{padding:2cqw}
    #activityPlayer[data-game="labelleddiagram"] .diagram-label-cell:has(.diagram-label-audio){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(64px,1fr) 44px}
    #activityPlayer[data-game="labelleddiagram"] .diagram-label-cell:has(.diagram-label-audio) .diagram-label{font-size:16px;line-height:1.3}
    #activityPlayer[data-game="labelleddiagram"] .diagram-label-cell:has(.diagram-label-audio) .diagram-label>[data-user-content]{min-width:0;max-width:100%;font-size:16px;line-height:1.3}
    #activityPlayer[data-game="labelleddiagram"] .diagram-label-audio{justify-self:center}
  }
}
@media (max-width:600px){
  #activityPlayer.game-shell[data-game="labelleddiagram"]:not(:fullscreen){height:calc(100cqw + 220px)}
  #activityPlayer[data-game="labelleddiagram"] .diagram-target{width:44px;height:44px;font-size:16px}
  #activityPlayer[data-game="labelleddiagram"] .diagram-label{min-height:44px;font-size:16px;line-height:1.3}
  #activityPlayer[data-game="labelleddiagram"] .diagram-bank{grid-template-rows:repeat(var(--mobile-bank-rows,2),minmax(44px,1fr))}
  #activityPlayer[data-game="labelleddiagram"] .diagram-bank:has(.diagram-label-audio){grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--bank-rows,3),minmax(64px,1fr))}
  #activityPlayer[data-game="labelleddiagram"] .diagram-instruction,
  #activityPlayer[data-game="labelleddiagram"] .diagram-status{font-size:14px;line-height:1.35}
  #activityPlayer[data-game="labelleddiagram"] .diagram-footer{min-height:44px}
  #activityPlayer[data-game="labelleddiagram"] .diagram-footer .btn{min-height:44px;font-size:14px;white-space:normal}
}

/* Selecting a point changes its hint, not the picture or label-bank height. */
#activityPlayer[data-game="labelleddiagram"] .diagram-footer{box-sizing:border-box;flex:0 0 64px;height:64px;min-height:64px}
#activityPlayer[data-game="labelleddiagram"] .diagram-status{max-height:64px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-width:600px){
  #activityPlayer[data-game="labelleddiagram"] .diagram-footer{flex-basis:84px;height:84px;min-height:84px}
  #activityPlayer[data-game="labelleddiagram"] .diagram-status{max-height:84px}
}

/* Source: css/jigsaw.css; sha256: 44112b18b2c0bdafeb398b7bacf5fcbf2015c93df378515523fc20c97d066612 */
/* A physical picture puzzle with an airy tray and generous touch targets. */
.activity-player[data-game="jigsaw"]{--jp-ink:var(--style-ink,#21434b);--jp-accent:var(--tw-d,#38795d);--jp-gold:#f4c353;--jp-paper:var(--style-surface,#fffdf6);--jp-line:#34664740;--jp-shadow:#153e3625}
#activityPlayer.game-shell[data-game="jigsaw"]{aspect-ratio:4/3}
.activity-player[data-game="jigsaw"] #gameStage{padding:0;color:var(--jp-ink);font-family:"ClassPlay Round",Arial,sans-serif}
.jp-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;gap:1.5cqw;padding:5cqw 3.2cqw 7cqw;box-sizing:border-box;overflow:hidden;color:var(--jp-ink)}
.jp-shell [hidden]{display:none!important}.jp-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px}.jp-kicker{margin:0;font-weight:800;font-size:clamp(12px,1.45cqw,19px);letter-spacing:.13em;color:var(--jp-ink);background:var(--jp-paper);border:1px solid #ffffff80;border-radius:999px;padding:.5em .85em;box-shadow:0 2px 0 #19352b14}.jp-progress{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;background:var(--jp-paper);border:1px solid #ffffffb0;box-shadow:0 2px 0 #19352b14;min-width:20%}.jp-progress-track{width:clamp(50px,9cqw,130px);height:8px;border-radius:99px;background:#20443217;overflow:hidden}.jp-progress-track>span{display:block;width:0;height:100%;background:linear-gradient(90deg,#64ad7c,#a4cf65);border-radius:inherit;transition:width .3s ease}.jp-count{font-size:clamp(12px,1.5cqw,20px);white-space:nowrap;min-width:3.5em;text-align:center}
.jp-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,38%);gap:2.3cqw;flex:1;min-height:0}.jp-board-area{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.jp-board{position:relative;flex:none;max-width:100%;border-radius:12px;background:var(--jp-paper);box-shadow:0 0 0 7px var(--jp-paper),0 0 0 9px #ffffff9c,0 5px 0 9px #29574025,0 13px 25px #173e3126;overflow:hidden;isolation:isolate;transition:box-shadow .2s ease}.jp-board::before{content:"";position:absolute;inset:0;background:radial-gradient(#8b9f6d20 .7px,transparent .8px) 0 0/8px 8px;pointer-events:none}.jp-board.is-drag-over{box-shadow:0 0 0 7px var(--jp-paper),0 0 0 10px var(--jp-gold),0 8px 24px #173e3126}.jp-reference{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease;pointer-events:none;user-select:none;-webkit-user-drag:none}.jp-reference.has-guide{opacity:.17}.jp-reference.is-peeking{opacity:1;z-index:4}.jp-targets,.jp-placed,.jp-sparkles{position:absolute;inset:0}.jp-placed,.jp-sparkles{pointer-events:none}.jp-targets{z-index:1}.jp-placed{z-index:2}.jp-sparkles{z-index:5;overflow:hidden}.jp-target{position:absolute;display:grid;place-items:center;border:0;padding:0;background:transparent;color:#809883;min-width:0;min-height:0;cursor:pointer;touch-action:manipulation;outline-offset:-5px}.jp-target-cut{position:absolute;display:block;pointer-events:none;overflow:visible}.jp-target-cut svg{display:block;width:100%;height:100%;overflow:visible}.jp-cut-outline{fill:#e2ead632;stroke:#7e9d8050;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:3 4;transition:fill .18s ease,stroke .18s ease}.jp-target-dot{pointer-events:none;font:400 clamp(12px,1.7cqw,20px)/1 Arial;opacity:.32;transition:opacity .15s ease}.jp-target.is-filled{cursor:default}.jp-target.is-filled .jp-target-dot{opacity:0}.jp-target.is-filled .jp-cut-outline{stroke:transparent;fill:transparent}.jp-target.is-drop-target .jp-cut-outline,.jp-target.is-hint .jp-cut-outline{fill:#ffe08b66;stroke:#d39722;stroke-width:3;stroke-dasharray:none}.jp-target.is-drop-target .jp-target-dot,.jp-target.is-hint .jp-target-dot{opacity:1;color:#895b16}.jp-target.is-hint{animation:jp-hint-glow .8s ease-in-out 3}.jp-target.is-wrong .jp-cut-outline{fill:#ed876933;stroke:#bb6145;stroke-width:2;stroke-dasharray:none}.jp-target:focus-visible{outline:4px solid #bf8109;z-index:3}.jp-placed-piece{position:absolute;pointer-events:none;overflow:visible}.jp-placed-piece svg{display:block;width:100%;height:100%;overflow:visible}.jp-piece-edge{fill:none;stroke:#fff8;stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round}.jp-placed-piece .jp-piece-edge{stroke:#fff8;stroke-width:.7}.jp-placed-piece.is-snapped{animation:jp-snap-settle .32s ease-out}.jp-caption-bar{display:flex;align-items:center;gap:12px;flex:none;max-width:100%;margin:14px 0 0;padding:10px 14px;border-radius:14px;background:var(--jp-paper);color:var(--jp-ink);border:1px solid #ffffffb0;box-shadow:0 3px 0 #173e3120;box-sizing:border-box;min-width:0}
.jp-caption{margin:0;min-width:0;font-size:clamp(22px,2.8cqw,34px);font-weight:800;line-height:1.3;text-align:center;overflow-wrap:anywhere;flex:1;color:var(--jp-ink);padding:4px 0;max-height:none;overflow:visible}
.jp-caption:focus-visible{outline:3px solid #b67a12;outline-offset:3px;border-radius:5px}
.jp-caption-play{flex:none;min-height:48px;min-width:48px;align-self:center}.jp-caption-play[aria-pressed="true"]{background:#ffe394;border-color:#bd851e}
.jp-tray-area{display:flex;flex-direction:column;min-height:0;min-width:0;background:color-mix(in srgb,var(--jp-paper) 94%,transparent);border:1px solid #ffffffa0;border-radius:16px;padding:1cqw 1.1cqw;box-shadow:0 3px 0 #173e3120,inset 0 2px 0 #fff9;gap:1cqw}.jp-tray-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:clamp(12px,1.45cqw,18px);line-height:1.2;padding:2px}.jp-remaining{font-size:.85em;white-space:nowrap;color:var(--jp-ink);opacity:.8}.jp-tray{display:grid;grid-template-columns:repeat(var(--jp-columns,3),minmax(44px,1fr));grid-template-rows:repeat(var(--jp-rows,3),minmax(44px,1fr));gap:8px;align-content:start;flex:1;min-height:0;overflow:auto;padding:3px;scrollbar-width:thin;scrollbar-color:#97a994 transparent}.jp-piece-slot{position:relative;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--jp-paper) 92%,#b8ceb8);border:1px solid #29594124;box-shadow:inset 0 1px 0 #fff9,0 2px 0 #1d443310}.jp-piece-slot.is-used{background:#edf4e64f;border-style:dashed;box-shadow:none}.jp-piece-slot.is-used::after{content:"✓";position:absolute;color:#648b72;font-size:18px;opacity:.55;pointer-events:none}.jp-piece{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:44px;min-width:44px;border:2px solid transparent;border-radius:10px;padding:0;background:transparent;cursor:grab;touch-action:none;user-select:none;outline-offset:1px;transition:background .15s ease,border-color .15s ease}.jp-piece svg{display:block;width:calc(100% - 12px);max-width:100%;height:calc(100% - 12px);max-height:100%;overflow:hidden;filter:drop-shadow(0 2px 1px #17352242);pointer-events:none}.jp-piece .jp-piece-edge{stroke:#fff9;stroke-width:1.2}.jp-piece-grip{position:absolute;right:1px;bottom:1px;width:15px;height:18px;border-radius:6px;background:#fffdf6ba;color:#446653;font-size:16px;line-height:16px;text-align:center;opacity:0;pointer-events:none}.jp-piece:hover .jp-piece-grip,.jp-piece:focus-visible .jp-piece-grip,.jp-piece.is-selected .jp-piece-grip{opacity:1}.jp-piece:hover{background:#e7efd96b}.jp-piece.is-selected{background:#ffe9a0;border-color:#bd851e;box-shadow:0 0 0 2px #fff8,inset 0 0 0 1px #fff7}.jp-piece:focus-visible{outline:3px solid #b67a12;border-color:transparent}.jp-piece.is-dragging{opacity:.22;cursor:grabbing}.jp-piece.is-wrong{animation:jp-return-nudge .4s ease}.jp-piece.is-returning{animation:jp-snap-settle .25s ease}.jp-piece:disabled{opacity:1}.jp-tool{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #2f674c33;border-radius:999px;background:#fffdf6;color:var(--jp-ink);padding:8px 12px;min-height:44px;min-width:44px;font-family:inherit;font-weight:700;font-size:clamp(12px,1.35cqw,17px);line-height:1.2;cursor:pointer;box-shadow:0 2px 0 #214a3414;white-space:nowrap;touch-action:manipulation}.jp-tool svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}.jp-tool:focus-visible{outline:3px solid #b67a12;outline-offset:2px}.jp-tool:hover:not(:disabled){background:#fff4d3;border-color:#b67a12}.jp-tool:active:not(:disabled){transform:translateY(1px);box-shadow:none}.jp-tool:disabled{opacity:.45;cursor:default}.jp-footer{flex:none;display:flex;justify-content:space-between;align-items:center;gap:1.3cqw;min-height:44px}.jp-status{margin:0;max-width:70%;font-size:clamp(12px,1.45cqw,18px);line-height:1.35;background:var(--jp-paper);padding:.45em .7em;border-radius:9px;color:var(--jp-ink)}.jp-assistance{display:flex;align-items:center;gap:8px;flex:none}.jp-motion-layer{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible}.jp-drag-piece,.jp-flying-piece{position:absolute;pointer-events:none;filter:drop-shadow(0 10px 8px #143e3342)}.jp-drag-piece svg,.jp-flying-piece svg{display:block;width:100%;height:100%;overflow:visible}.jp-drag-piece{transform:none;will-change:left,top,width,height}.jp-motion-layer.is-floating{position:fixed;z-index:10000}.jp-flying-piece.is-returning{opacity:.9}.jp-snap-star{position:absolute;color:#f2c246;font-size:clamp(22px,4cqw,42px);transform:translate(-50%,-50%);animation:jp-snap-star .6s ease-out forwards;text-shadow:0 2px 0 #fff,0 1px 10px #e3b74d85}.jp-celebration-star{position:absolute;left:var(--star-x);top:-20%;color:#eabe43;font-size:clamp(22px,4cqw,48px);text-shadow:0 2px 0 #fff;animation:jp-star-fall 1.2s var(--star-delay) ease-in forwards}.jp-board.is-complete .jp-piece-edge{opacity:0;transition:opacity .4s ease}.jp-targets.is-finished{opacity:0}.jp-review{margin:0 auto;max-width:660px}.jp-review img{width:100%;height:auto;max-height:65vh;object-fit:contain;display:block;border-radius:12px}.jp-review figcaption{font-size:15px;text-align:center;margin-top:10px;overflow-wrap:anywhere}.jp-loading{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:2cqw}.jp-loading-piece{width:clamp(50px,10cqw,100px);height:clamp(50px,10cqw,100px);fill:#d7e6b9;stroke:#5b8556;stroke-width:2;filter:drop-shadow(0 5px 0 #31543523);animation:jp-loading-bob 1.5s ease-in-out infinite}.jp-loading h2,.jp-loading p{margin:0;background:var(--jp-paper);border-radius:10px;padding:5px 12px;color:var(--jp-ink);max-width:90%}.jp-loading h2{font-size:clamp(17px,2.4cqw,30px)}.jp-loading p{font-size:clamp(13px,1.6cqw,20px)}
@keyframes jp-snap-settle{0%{transform:scale(.97)}55%{transform:scale(1.012)}100%{transform:scale(1)}}@keyframes jp-snap-star{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-20deg)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-130%) scale(1.35) rotate(20deg)}}@keyframes jp-return-nudge{25%{transform:translateX(-3px)}65%{transform:translateX(3px)}}@keyframes jp-hint-glow{50%{filter:drop-shadow(0 0 8px #f4c353)}}@keyframes jp-star-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(480px) rotate(var(--star-turn))}}@keyframes jp-loading-bob{50%{transform:translateY(-6px) rotate(5deg)}}
.activity-player[data-game="jigsaw"] .activity-clock{right:3cqw;top:1.4cqw;color:var(--jp-ink);background:var(--jp-paper);border-radius:999px;padding:3px 8px}
@media(max-width:600px){#activityPlayer.game-shell[data-game="jigsaw"]:not(:fullscreen){height:max(calc(100cqw + 340px),var(--jp-mobile-height,0px));aspect-ratio:auto}.jp-shell{padding:14cqw 5cqw 18cqw;gap:4cqw}.jp-kicker{font-size:11px;letter-spacing:.07em;padding:6px 9px}.jp-top{gap:6px}.jp-progress{gap:5px;padding:5px 7px;min-width:0}.jp-progress-track{width:38px;height:6px}.jp-count{font-size:12px}.jp-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(var(--jp-board-min,190px),1fr) 286px;gap:5cqw}.jp-board{border-radius:8px;box-shadow:0 0 0 5px var(--jp-paper),0 0 0 7px #ffffff9c,0 4px 0 7px #29574025,0 9px 18px #173e3126}.jp-board.is-drag-over{box-shadow:0 0 0 5px var(--jp-paper),0 0 0 8px var(--jp-gold),0 8px 18px #173e3126}.jp-caption-bar{margin-top:12px;padding:9px 10px;gap:8px;border-radius:10px}.jp-caption{font-size:18px;max-height:none}.jp-caption-play{min-height:44px;min-width:44px;flex-direction:column;gap:3px}.jp-tray-area{padding:8px;border-radius:12px;gap:5px;position:relative}.jp-tray-heading{font-size:13px;min-height:23px;justify-content:space-between;flex-wrap:wrap;gap:3px 8px}.jp-tray{grid-template-columns:repeat(var(--jp-columns,3),minmax(44px,1fr));grid-template-rows:repeat(var(--jp-rows,3),minmax(44px,1fr));gap:7px;padding:2px}.jp-piece{min-height:44px;min-width:44px;border-radius:7px}.jp-footer{align-items:flex-start;gap:7px;min-height:50px}.jp-status{font-size:12px;max-width:none;flex:1;padding:5px 7px}.jp-assistance{gap:5px}.jp-tool{padding:7px;gap:4px;font-size:12px}.jp-assistance .jp-tool{flex-direction:column;gap:2px;min-width:46px;padding:5px 6px}.jp-assistance .jp-tool svg{width:17px;height:17px}.jp-target-dot{font-size:13px}.activity-player[data-game="jigsaw"] .activity-clock{top:3cqw;right:5cqw;font-size:12px}.jp-review img{max-height:55vh}.activity-player[data-game="jigsaw"]:fullscreen .jp-shell{padding-top:50px;padding-bottom:65px}.activity-player[data-game="jigsaw"]:fullscreen .jp-workspace{grid-template-rows:minmax(0,1fr) minmax(150px,35%)}}
@media(max-width:360px){.jp-kicker{font-size:10px;letter-spacing:.03em}.jp-progress-track{width:28px}.jp-workspace{grid-template-rows:minmax(var(--jp-board-min,160px),1fr) 286px}.jp-status{font-size:11px}.jp-remaining{font-size:10px}.jp-shell{gap:4cqw}.jp-assistance .jp-tool{min-width:44px}}
@media(min-width:601px) and (max-height:550px){
.activity-player[data-game="jigsaw"]:fullscreen .jp-shell{padding:4px 22px;gap:0}
.activity-player[data-game="jigsaw"]:fullscreen .jp-top{position:absolute;top:10px;right:22px;width:46%;gap:8px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-kicker{font-size:10px;letter-spacing:.04em;padding:6px 8px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-progress{padding:5px 7px;gap:5px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-progress-track{width:32px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-count{font-size:12px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-workspace{grid-template-columns:minmax(0,1fr) minmax(280px,46%);gap:20px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-tray-area{margin-top:47px;margin-bottom:57px;padding:5px;gap:4px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-tray-heading{font-size:12px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-tray{grid-template-columns:repeat(var(--jp-columns,3),minmax(44px,1fr));grid-template-rows:repeat(var(--jp-rows,3),minmax(44px,1fr));gap:5px;padding:1px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-board-area{flex-direction:row;gap:0}
.activity-player[data-game="jigsaw"]:fullscreen .jp-caption-bar{order:-1;flex-direction:column;flex:none;width:clamp(88px,14vw,130px);margin:0 10px 0 0;padding:8px;max-height:none;gap:8px}
.activity-player[data-game="jigsaw"]:fullscreen #gameStage:has(>.activity-clock) .jp-caption-bar{margin-top:32px;max-height:none}
.activity-player[data-game="jigsaw"]:fullscreen .jp-caption{font-size:18px;line-height:1.3;max-height:none;min-height:0;white-space:pre-wrap;overflow:visible;flex:none;width:100%}
.activity-player[data-game="jigsaw"]:fullscreen .jp-board-area[data-caption-layout="row"]{flex-direction:column}
.activity-player[data-game="jigsaw"]:fullscreen .jp-board-area[data-caption-layout="row"] .jp-caption-bar{order:0;flex-direction:row;width:100%;margin:14px 0 0;padding:8px;gap:8px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-board-area[data-caption-layout="row"] .jp-caption{flex:1;width:auto}
.activity-player[data-game="jigsaw"]:fullscreen .jp-caption-play{min-height:44px;min-width:44px;flex-direction:column;gap:2px;padding:5px 7px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-footer{position:absolute;right:22px;bottom:4px;width:46%;gap:6px;align-items:center}
.activity-player[data-game="jigsaw"]:fullscreen .jp-status{font-size:12px;max-width:none;flex:1;padding:5px 7px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-assistance{gap:4px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-assistance .jp-tool{font-size:11px;flex-direction:column;padding:5px;gap:2px;min-width:44px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-assistance .jp-tool svg{width:16px;height:16px}
.activity-player[data-game="jigsaw"]:fullscreen .activity-clock{top:7px;left:23px;right:auto;font-size:12px}
}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .jp-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}:where(:root:not([data-motion-managed])) .jp-snap-star{display:none}:where(:root:not([data-motion-managed])) .jp-celebration-star{display:none}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .jp-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}:where(:root[data-reduce-motion]) .jp-snap-star{display:none}:where(:root[data-reduce-motion]) .jp-celebration-star{display:none}

#activityPlayer[data-game="jigsaw"] :is(#pCount,#pScore){display:none}

/* A caption chooser lets children jump straight to any picture. */
.jp-picture-nav{display:flex;min-width:0;flex:1;max-width:440px}
.jp-chooser-toggle{width:100%;justify-content:flex-start;gap:10px;padding:9px 12px;min-height:48px;white-space:normal;text-align:left}
.jp-picture-number{font-size:clamp(14px,1.8cqw,22px);font-weight:800;white-space:nowrap}
.jp-choose-label{font-size:clamp(12px,1.35cqw,17px);font-weight:700;opacity:.85}
.jp-choose-chevron{margin-left:auto;transition:transform .18s ease}.jp-chooser-toggle[aria-expanded="true"] .jp-choose-chevron{transform:rotate(180deg)}
.jp-picker-backdrop{position:absolute;inset:0;background:#102f3980;backdrop-filter:blur(5px);z-index:19;border-radius:inherit}
.jp-picture-picker{position:absolute;inset:clamp(16px,5cqw,64px) clamp(14px,4cqw,50px) auto;max-height:calc(100% - clamp(32px,10cqw,128px));display:flex;flex-direction:column;gap:20px;padding:clamp(16px,2.5cqw,32px);box-sizing:border-box;background:var(--jp-paper);color:var(--jp-ink);border:2px solid #fff9;border-radius:22px;box-shadow:0 10px 0 #173e3140,0 22px 60px #102f3959;z-index:20;overflow:hidden}
.jp-picker-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex:none}.jp-picker-heading h2{margin:0;font-size:clamp(22px,3cqw,36px);font-weight:800;line-height:1.15}.jp-picker-heading p{margin:8px 0 0;font-size:clamp(14px,1.6cqw,20px);line-height:1.4;max-width:58ch}.jp-picker-close{flex:none;padding:8px}
.jp-picture-options{display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px;overflow:auto;min-height:0;padding:3px 4px 7px;scrollbar-width:thin;scrollbar-color:#97a994 transparent}
.jp-picture-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1 1 160px;min-width:0;max-width:calc(50% - 6px);min-height:112px;box-sizing:border-box;padding:15px;border:2px solid #36634f3b;border-radius:14px;box-shadow:0 3px 0 #173e311a;background:color-mix(in srgb,var(--jp-paper) 94%,#acd3bf);color:var(--jp-ink);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;transition:background .15s ease,border-color .15s ease}
.jp-picture-option:hover{background:#fff1ba;border-color:#bb8929}.jp-picture-option:focus-visible{outline:3px solid #b67a12;outline-offset:2px}.jp-picture-option[aria-current="true"]{background:#ffe9a0;border-color:#bd851e;box-shadow:0 3px 0 #bd851e66}.jp-option-number{display:grid;place-items:center;min-width:30px;height:30px;padding:0 5px;border-radius:999px;background:#214a3414;font-weight:800;font-size:16px;line-height:1;box-sizing:border-box}.jp-option-caption{display:block;font-size:clamp(18px,1.85cqw,25px);font-weight:800;line-height:1.3;overflow-wrap:anywhere;white-space:normal}.jp-option-state{display:block;margin-top:auto;font-size:13px;line-height:1.3;font-weight:700;opacity:.8}.jp-picture-option.is-complete .jp-option-state{color:#286449;opacity:1}
@media(min-width:1000px){.jp-picture-option{max-width:calc(33.333% - 8px)}}
@media(max-width:600px){.jp-chooser-toggle{padding:8px;gap:6px;min-height:44px;flex-wrap:wrap}.jp-picture-number{font-size:14px}.jp-choose-label{font-size:12px}.jp-chooser-toggle>svg{width:17px;height:17px}.jp-choose-label{flex-basis:100%;padding-left:23px}.jp-choose-chevron{position:absolute;right:9px;top:12px}.jp-chooser-toggle{position:relative;padding-right:32px}.jp-picture-picker{inset:14px 10px auto;max-height:calc(100% - 28px);padding:14px;gap:14px;border-radius:16px}.jp-picker-heading{gap:10px}.jp-picker-heading h2{font-size:22px}.jp-picker-heading p{font-size:14px}.jp-picture-options{gap:10px}.jp-picture-option{flex-basis:calc(50% - 5px);max-width:calc(50% - 5px);padding:12px;gap:8px;min-height:120px}.jp-option-caption{font-size:18px}.jp-option-state{font-size:12px}}
@media(min-width:601px) and (max-height:550px){.activity-player[data-game="jigsaw"]:fullscreen .jp-chooser-toggle{min-height:44px;gap:5px;padding:6px 8px}.activity-player[data-game="jigsaw"]:fullscreen .jp-choose-label{font-size:11px}.activity-player[data-game="jigsaw"]:fullscreen .jp-picture-number{font-size:13px}.activity-player[data-game="jigsaw"]:fullscreen .jp-picture-picker{inset:10px 20px auto;max-height:calc(100% - 20px);padding:14px;gap:12px}.activity-player[data-game="jigsaw"]:fullscreen .jp-picker-heading h2{font-size:24px}.activity-player[data-game="jigsaw"]:fullscreen .jp-picker-heading p{font-size:14px}.activity-player[data-game="jigsaw"]:fullscreen .jp-picture-option{flex-basis:150px;max-width:calc(33.333% - 8px);min-height:110px;padding:12px}.activity-player[data-game="jigsaw"]:fullscreen .jp-option-caption{font-size:18px}}
.jp-shell.has-many-pictures .jp-kicker{display:none}
.jp-continue{background:#ffe394;border-color:#bd851e;flex:none;white-space:normal;max-width:45%;text-align:center}
.jp-review+.jp-review{margin-top:28px}
@media(max-width:600px){
.jp-top{gap:5px}
.jp-shell.has-many-pictures .jp-progress-track{display:none}.jp-shell.has-many-pictures .jp-progress{padding:7px;flex:none}
.jp-piece svg{width:calc(100% - 10px);height:calc(100% - 10px)}
}
@media(min-width:601px) and (max-height:550px){
.activity-player[data-game="jigsaw"]:fullscreen .jp-top{top:3px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-picture-nav{gap:4px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-shell.has-many-pictures .jp-progress-track{display:none}
.activity-player[data-game="jigsaw"]:fullscreen .jp-tray-heading{line-height:1;font-size:11px;padding:1px}
.activity-player[data-game="jigsaw"]:fullscreen .jp-piece svg{width:calc(100% - 8px);height:calc(100% - 8px)}
.activity-player[data-game="jigsaw"]:fullscreen .jp-piece-slot{border-radius:8px}
}
/* The assembled photograph leads the portrait layout. Its height follows the
   real image aspect ratio; a compact, separate tray holds every piece. */
@media(max-width:600px){
  #activityPlayer[data-game=jigsaw] .jp-shell{
    --jp-tray-height:220px;padding:16px 14px 18px;gap:16px;
  }
  #activityPlayer[data-game=jigsaw] .jp-shell:has([data-jp-piece="15"]){--jp-tray-height:252px}
  #activityPlayer[data-game=jigsaw] .jp-workspace{
    grid-template-rows:minmax(var(--jp-board-min,230px),1fr) var(--jp-tray-height);
    gap:20px;
  }
  #activityPlayer[data-game=jigsaw] .jp-board-area{padding:0;box-sizing:border-box}
  #activityPlayer[data-game=jigsaw] .jp-caption-bar{margin-top:14px;padding:9px 10px;gap:8px;width:100%}
  #activityPlayer[data-game=jigsaw] .jp-tray-area{
    padding:0;background:none;border:0;border-radius:0;box-shadow:none;gap:8px;
  }
  #activityPlayer[data-game=jigsaw] .jp-tray-heading strong{background:var(--jp-paper);border-radius:8px;padding:5px 9px}
  #activityPlayer[data-game=jigsaw] .jp-remaining{background:var(--jp-paper);border-radius:999px;padding:5px 8px}
  #activityPlayer[data-game=jigsaw] .jp-tray{padding:3px;gap:8px}
  #activityPlayer[data-game=jigsaw] .jp-piece svg{width:calc(100% - 4px);height:calc(100% - 4px)}
  #activityPlayer[data-game=jigsaw] .jp-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
  #activityPlayer[data-game=jigsaw] .jp-assistance{grid-column:2;grid-row:1;justify-self:end}
  #activityPlayer[data-game=jigsaw] .jp-continue{grid-column:1;grid-row:1;max-width:100%}
  #activityPlayer[data-game=jigsaw] .jp-status{grid-column:1/-1;grid-row:2;width:100%;box-sizing:border-box;font-size:12px;line-height:1.4;padding:7px 10px}
}

/* Source: css/visual-styles.css; sha256: 0dbb4df918519e2c66be5bff13e80123ede8c0d511ce41bf4e3bf73922633848 */
/* Theme typefaces, the theme picker, and the shared colours every learning world gives the games'
   cards, tiles and panels (set by IQ.applyTheme in js/store.js and js/themekit/registry.js). */
@font-face{font-family:Poppins;src:url('../assets/fonts/Poppins-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('../assets/fonts/Poppins-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url('../assets/fonts/Poppins-Bold.woff2') format('woff2');font-style:normal;font-weight:700 900;font-display:swap}
#visualStyles{max-height:490px;overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 7px 3px;scrollbar-width:thin;scrollbar-color:#9fb9c9 #eef4f7}
.activity-player.game-shell[data-visual-style=extended][data-game]{background-color:var(--tw-a);background-image:var(--style-backdrop);background-position:center;background-size:100% 100%;background-repeat:no-repeat;--scene-background:var(--style-backdrop);--scene-text:var(--style-text);--scene-text-outline:none;color:var(--style-text)}
.activity-player[data-visual-style=extended] #gameStage{color:var(--style-text);background:transparent}
.activity-player[data-visual-style=extended] :is(.quiz-question,.quiz-footer,.sequence-instruction,.sequence-status,.sentence-text,.pair-game-instruction,.pair-game-status,.fm-progress,.fm-instruction,.unjumble-instruction,.unjumble-status,.diagram-instruction,.diagram-caption,.diagram-status){color:var(--style-text);text-shadow:none}
.activity-player[data-visual-style=extended] :is(.rank-row,.sentence-word,.sentence-gap,.quiz-choice,.matchup-prompt,.matchup-target,.matchup-answer,.memory-face,.fm-choice,.fm-target,.unjumble-word,.unjumble-slot,.diagram-label):not(.is-correct):not(.is-wrong){background:var(--style-surface);border-color:var(--tw-c);color:var(--style-ink);box-shadow:0 3px 0 var(--tw-d)}
.activity-player[data-visual-style=extended] :is(.rank-row.is-correct,.sentence-gap.is-correct,.quiz-choice.is-correct,.matchup-target.is-correct,.unjumble-slot.is-correct,.diagram-label.is-correct){color:#21471b}
.activity-player[data-visual-style=extended] :is(.rank-row.is-wrong,.sentence-gap.is-wrong,.quiz-choice.is-wrong,.matchup-target.is-wrong,.unjumble-slot.is-wrong){color:#742d28}
.activity-player[data-visual-style=extended] :is(.rank-label,.quiz-letter){background:var(--style-surface);color:var(--style-ink)}
.activity-player[data-themed-cards=yes] .memory-back{background:var(--style-card-back) center/100% 100% no-repeat;color:var(--style-ink);border-color:var(--tw-c)}
.activity-player[data-visual-style=extended] .diagram-shell{color:var(--style-text)}
.activity-player[data-visual-style=extended] :is(.opt,.gs-opt):not(.correct):not(.wrong){background:var(--style-surface);color:var(--style-ink);border-color:var(--tw-c)}
.activity-player[data-visual-style=extended] :is(.opt,.gs-opt):not(.correct):not(.wrong) .k{color:var(--style-ink)}
.activity-player[data-visual-style=extended] :is(.ag-tile,.ag-slot.filled):not(.right):not(.wrong),.activity-player[data-visual-style=extended] .sort-card:not(.yes):not(.no){background:var(--style-surface);color:var(--style-ink);border-color:var(--tw-c);box-shadow:0 3px 0 var(--tw-d)}
.activity-player[data-visual-style=extended] .sort-col{background:color-mix(in srgb,var(--style-surface) 82%,transparent);border-color:var(--tw-c)}
.activity-player[data-visual-style=extended] .sort-heading h4{color:var(--style-ink)}
@media(max-width:700px){#visualStyles{max-height:340px}.activity-player.game-shell[data-visual-style=extended][data-game]{background-size:auto 100%;background-position:center}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .cp-float,:where(:root:not([data-motion-managed])) .cp-twinkle,:where(:root:not([data-motion-managed])) .activity-player[data-visual-style=extended] .scene-card-entry{animation:none!important}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .cp-float,:where(:root[data-reduce-motion]) .cp-twinkle,:where(:root[data-reduce-motion]) .activity-player[data-visual-style=extended] .scene-card-entry{animation:none!important}

/* Source: css/conversation-cards.css; sha256: f32c0a28ee7e0532692a6ac6dd9bb4bc13e2bf100e5cd3e4f6bdddcfe94070e6 */
/* Pick and talk (formerly Conversation cards, js/games/speakingcards.js). The cards wait in the learning world's own holder
   beside the talk spots (a bottle, a barrel, a wishing well…: --wk-talk-art), and each world draws
   its cards its own way (--wk-talk-paper, -ink, -line, -radius, -drop, -glow, -pad, -back; all set in
   js/themekit/registry.js). The world also supplies the scene, colours, type and buttons through its
   --wk tokens. Original ClassPlay design (5.43.0, each world's holder and cards 5.49.0). */
#activityPlayer[data-game=speakingcards]{--tj-ink:var(--wk-card-ink,var(--style-ink,#173e54));--tj-paper:var(--wk-card,var(--style-surface,#fffdf7));--tj-flat-ink:var(--wk-flat-ink,var(--style-ink,#173e54));--tj-edge:var(--wk-line,#376883);--tj-drop:var(--wk-drop,#143b54);--tj-radius:var(--wk-radius-sm,18px);--tj-tools:58px}
#activityPlayer[data-game=speakingcards] #gameStage{padding:clamp(12px,2.2cqw,30px) clamp(12px,2.6cqw,36px);font-family:var(--wk-display,inherit)}
.tj-shell{container:tj-shell/size;position:relative;height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,16cqw,210px);gap:clamp(12px,2cqw,26px);color:var(--tj-flat-ink);isolation:isolate}
.tj-shell *{box-sizing:border-box}
.tj-shell [hidden]{display:none!important}

/* ---------- Talk spots ---------- */
.tj-table{container:tj-table/size;position:relative;z-index:2;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.tj-shell[data-layout=single] .tj-table{overflow:visible}
.tj-shell[data-layout=single] .tj-spots{height:100%;display:grid;place-items:center}
.tj-shell[data-layout=single] .tj-spot{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.tj-shell[data-layout=single] .tj-holder{width:min(100cqw,calc((100cqh - var(--tj-tools)) * 1.6),1000px);aspect-ratio:1.6;height:auto}
.tj-shell[data-layout=groups] .tj-spots{display:grid;grid-template-columns:repeat(var(--tj-columns),minmax(0,1fr));grid-auto-rows:minmax(130px,1fr);gap:clamp(12px,1.6cqw,20px);min-height:100%;padding:12px 8px 6px}
@container tj-table (max-width:780px){.tj-shell[data-layout=groups] .tj-spots{grid-template-columns:repeat(var(--tj-columns-mid),minmax(0,1fr))}}
@container tj-table (max-width:470px){.tj-shell[data-layout=groups] .tj-spots{grid-template-columns:repeat(var(--tj-columns-small),minmax(0,1fr))}}
.tj-shell[data-layout=groups] .tj-spot{container:tj-spot/inline-size;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;min-width:0;min-height:0}
.tj-shell[data-layout=groups] .tj-holder{width:100%;height:100%;min-height:96px}
.tj-holder{position:relative;min-width:0;min-height:0}
.tj-flight{position:absolute;inset:0;perspective:1800px;transform-origin:50% 50%}
.tj-spot.is-empty .tj-flight{visibility:hidden}
.tj-card{position:absolute;inset:0;border-radius:var(--wk-talk-radius,var(--tj-radius));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.25,1);outline-offset:4px}
.tj-card.is-turned{transform:rotateX(180deg)}
.tj-card.can-turn{cursor:pointer}
.tj-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:clamp(6px,4%,18px);padding:var(--wk-talk-pad,7% 8%);overflow:hidden;border:var(--wk-talk-line,var(--wk-card-line,3px solid var(--tj-edge)));border-radius:inherit;background:var(--wk-talk-paper,var(--tj-paper));color:var(--wk-talk-ink,var(--tj-ink));text-shadow:var(--wk-talk-glow,none);box-shadow:var(--wk-talk-drop,var(--wk-card-drop,0 4px 0 var(--tj-drop),0 8px 14px #0000002e));backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center;font-family:var(--wk-display,inherit)}
/* The crease where a card was folded in the glass jar (the worlds draw their own cards). */
.tj-shell:not([data-holder=jar]) .tj-face::before{display:none}
.tj-face::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;translate:0 -50%;background:linear-gradient(90deg,#0000002b,#00000000 7%,#00000000 93%,#0000002b);pointer-events:none}
.tj-back{transform:rotateX(180deg);background:var(--wk-talk-back,linear-gradient(color-mix(in srgb,var(--wk-c2,#ffbe2e) 17%,transparent),color-mix(in srgb,var(--wk-c2,#ffbe2e) 17%,transparent)),var(--tj-paper))}
/* The fern occupies the right corner of this world's front paper. Keep a
   picture's caption in the clear content area without moving the artwork. */
#activityPlayer[data-world-kit=dinosaur-valley] .tj-front:has(.tj-picture):has(.tj-text){padding-right:22%;transition:none!important}
.tj-face>*{position:relative;z-index:1}
.tj-text{max-width:100%;flex:0 0 auto;font-size:clamp(18px,6cqw,56px);font-weight:800;line-height:1.15;overflow-wrap:normal;padding-block:.12em}
.tj-text[data-reading=true]{scrollbar-width:thin;overscroll-behavior:contain;text-align:start}
.tj-picture{display:flex;justify-content:center;align-items:center;flex:0 1 auto;min-height:0;max-width:100%}
.tj-face:not(:has(.tj-text)) .tj-picture{flex:1 1 auto;height:100%}
.tj-picture img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tj-sound{display:grid;place-items:center;width:min(42%,140px);aspect-ratio:1;border-radius:50%;background:var(--wk-c3s,#d8f7fa);color:var(--wk-c3d,#0f8ea0)}
.tj-sound .tj-icon{width:56%;height:56%}
/* A card with another side has a folded corner. */
.tj-corner{position:absolute;right:0;bottom:0;z-index:2;display:none;width:clamp(18px,9%,46px);aspect-ratio:1;border-radius:0 0 var(--wk-talk-radius,var(--tj-radius)) 0;background:linear-gradient(135deg,transparent 49%,color-mix(in srgb,var(--wk-c2,#f2b632) 75%,#fff) 50%);box-shadow:-2px -2px 4px #0000001a;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.tj-card.can-turn .tj-corner{display:block}
.tj-number{position:absolute;left:-8px;top:-10px;z-index:4;display:grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border:2px solid #fff;border-radius:999px;background:var(--wk-c3,#22bfd2);color:#fff;font:900 16px/1 var(--wk-display,inherit);box-shadow:0 2px 0 var(--tj-drop);pointer-events:none}
.tj-fill{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0;padding:12px;border:var(--wk-slot-line,3px dashed #ffffffe6);border-radius:var(--tj-radius);background:var(--wk-slot,#ffffff40);color:var(--wk-on-scene,#fff);text-shadow:var(--wk-on-scene-shadow,0 1px 3px #000a);font:800 clamp(16px,2cqw,26px)/1.2 var(--wk-display,inherit);cursor:pointer;touch-action:manipulation}
.tj-fill b{font-size:1.6em;line-height:1}
.tj-fill-slip{display:block;width:clamp(70px,9cqw,120px);aspect-ratio:1.6/1;border-radius:10px;rotate:-6deg;box-shadow:0 4px 0 #00000026;animation:tj-bob 2.6s ease-in-out infinite}
@keyframes tj-bob{50%{translate:0 -6px;rotate:4deg}}
.tj-fill:disabled{cursor:default;opacity:.6}
.tj-fill:not(:disabled):hover{background:color-mix(in srgb,var(--wk-slot,#ffffff40) 70%,#fff)}
.tj-tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;min-height:48px}
.tj-shell[data-layout=groups] .tj-tools{gap:6px;min-height:44px}
.tj-tool,.tj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;margin:0;padding:8px 16px;border:var(--wk-btn-line,2px solid var(--tj-edge));border-radius:999px;background:var(--wk-ghost,var(--style-surface,#fffdf7));color:var(--wk-ghost-ink,var(--style-ink,#173e54));box-shadow:0 3px 0 var(--tj-drop);font:800 clamp(14px,1.45cqw,19px)/1.15 var(--wk-display,inherit);text-shadow:var(--wk-ghost-shadow,none);white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.tj-icon{display:block;width:22px;height:22px;flex:0 0 auto}
.tj-tool:not(:disabled):hover,.tj-btn:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.05)}
.tj-tool:not(:disabled):active,.tj-btn:not(:disabled):active{transform:translateY(2px);box-shadow:none}
.tj-tool:disabled,.tj-btn:disabled{opacity:.5;cursor:default;box-shadow:none}
@container tj-spot (max-width:330px){.tj-tool .tj-tool-label{display:none}.tj-tool{padding:8px 11px}}

/* ---------- The jar and its controls ---------- */
.tj-station{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;gap:clamp(6px,.7cqw,9px);min-height:0;max-height:100%;padding:clamp(10px,1cqw,14px);border:var(--wk-board-line,3px solid #ffffffcc);border-radius:var(--wk-radius,22px);background:var(--wk-board,#ffffff33);box-shadow:var(--wk-board-shadow,0 8px 20px #0000001f)}
.tj-station .tj-btn{width:100%}
.tj-station .tj-btn:not(.tj-next){min-height:44px;padding:8px 10px;font-size:clamp(13px,1.25cqw,17px)}
.tj-btn.tj-next{min-height:54px;font-size:clamp(16px,1.5cqw,20px);background:var(--wk-go,linear-gradient(#43c97b,#2aa960));color:var(--wk-go-ink,#fff);text-shadow:var(--wk-go-shadow,none);box-shadow:var(--wk-btn-drop,0 4px 0 var(--tj-drop))}
.tj-btn.tj-next .tj-icon{width:24px;height:24px}
/* Empty is a teaching state, not an automatic finish. Keep every control in place. */
.tj-station[data-primary=finish] #tjNext{background:var(--wk-ghost,var(--style-surface,#fffdf7));color:var(--wk-ghost-ink,var(--style-ink,#173e54));text-shadow:var(--wk-ghost-shadow,none);box-shadow:none}
.tj-station[data-primary=finish] #tjFinish{background:var(--wk-go,linear-gradient(#43c97b,#2aa960));color:var(--wk-go-ink,#fff);text-shadow:var(--wk-go-shadow,none);box-shadow:var(--wk-btn-drop,0 4px 0 var(--tj-drop))}
/* The count sits on the button's corner, so two digits never push the words out. */
.tj-btn.tj-talked{position:relative;margin-top:clamp(2px,.6cqw,8px)}
.tj-badge{position:absolute;top:-9px;right:-6px;display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:2px solid #fff;border-radius:999px;background:var(--wk-c3,#22bfd2);color:#fff;font:900 13px/1 var(--wk-display,inherit);font-variant-numeric:tabular-nums;text-shadow:none;box-shadow:0 2px 0 #00000026}
.tj-talked:disabled .tj-badge{display:none}
.tj-jar{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px;flex:0 0 auto;width:100%;margin:0;padding:4px 0 2px;border:0;border-radius:18px;background:none;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tj-jar:disabled{cursor:default}
/* The world's holder (full, then empty) grows with the height the game has, and never squeezes onto
   the buttons below it. The count sits where the world's drawing leaves room for it. */
.tj-jar-art{position:relative;display:block;height:clamp(64px,17cqh,132px);aspect-ratio:5/6;background:var(--wk-talk-art,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%22113%22%20rx%3D%2232%22%20ry%3D%225%22%20fill%3D%22%23000%22%20opacity%3D%22.16%22%2F%3E%3Cpath%20d%3D%22M18%2032q0-8%208-8h48q8%200%208%208v68q0%2010-10%2010H28q-10%200-10-10Z%22%20fill%3D%22%23e8f6fb%22%20fill-opacity%3D%22.8%22%20stroke%3D%22%233a7a94%22%20stroke-width%3D%223%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2291%22%20width%3D%2220%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23ffb08a%22%20stroke%3D%22%233a5a6a%22%20stroke-width%3D%221.6%22%20transform%3D%22rotate(-14%2030%2096)%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2293%22%20width%3D%2220%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23ffd76a%22%20stroke%3D%22%233a5a6a%22%20stroke-width%3D%221.6%22%20transform%3D%22rotate(8%2046%2098)%22%2F%3E%3Crect%20x%3D%2252%22%20y%3D%2290%22%20width%3D%2220%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%239edac6%22%20stroke%3D%22%233a5a6a%22%20stroke-width%3D%221.6%22%20transform%3D%22rotate(-6%2062%2095)%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2281%22%20width%3D%2220%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23b9a7f2%22%20stroke%3D%22%233a5a6a%22%20stroke-width%3D%221.6%22%20transform%3D%22rotate(12%2038%2086)%22%2F%3E%3Crect%20x%3D%2245%22%20y%3D%2281%22%20width%3D%2220%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23ff9db0%22%20stroke%3D%22%233a5a6a%22%20stroke-width%3D%221.6%22%20transform%3D%22rotate(-10%2055%2086)%22%2F%3E%3Crect%20x%3D%2237%22%20y%3D%2271%22%20width%3D%2220%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%239fd0ff%22%20stroke%3D%22%233a5a6a%22%20stroke-width%3D%221.6%22%20transform%3D%22rotate(4%2047%2076)%22%2F%3E%3Cpath%20d%3D%22M26%2036v58%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.75%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%222.5%22%20fill%3D%22%23cfe9f2%22%20stroke%3D%22%233a7a94%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%229%22%20width%3D%2250%22%20height%3D%2215%22%20rx%3D%224%22%20fill%3D%22%23e2683c%22%20stroke%3D%22%238a3a1a%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M31%2013v7M37%2013v7M43%2013v7M49%2013v7M55%2013v7M61%2013v7M67%2013v7%22%20stroke%3D%22%23ffffff66%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E")) center/contain no-repeat;transform-origin:50% 92%;transition:transform .2s ease}
.tj-jar.is-empty .tj-jar-art{background-image:var(--wk-talk-empty-art,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20120%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%22113%22%20rx%3D%2232%22%20ry%3D%225%22%20fill%3D%22%23000%22%20opacity%3D%22.16%22%2F%3E%3Cpath%20d%3D%22M18%2032q0-8%208-8h48q8%200%208%208v68q0%2010-10%2010H28q-10%200-10-10Z%22%20fill%3D%22%23e8f6fb%22%20fill-opacity%3D%22.8%22%20stroke%3D%22%233a7a94%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M26%2036v58%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.75%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%2256%22%20height%3D%227%22%20rx%3D%222.5%22%20fill%3D%22%23cfe9f2%22%20stroke%3D%22%233a7a94%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%229%22%20width%3D%2250%22%20height%3D%2215%22%20rx%3D%224%22%20fill%3D%22%23e2683c%22%20stroke%3D%22%238a3a1a%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M31%2013v7M37%2013v7M43%2013v7M49%2013v7M55%2013v7M61%2013v7M67%2013v7%22%20stroke%3D%22%23ffffff66%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"))}
.tj-jar:not(:disabled):hover .tj-jar-art{transform:translateY(-3px) rotate(-2deg)}
.tj-jar-tag{position:absolute;z-index:4;left:var(--tj-tag-x,82%);top:var(--tj-tag-y,26%);translate:-50% -50%;display:grid;place-items:center;min-width:34%;aspect-ratio:1;padding:0 4px;border:2px solid #fff;border-radius:50%;background:var(--wk-c2,#f2b632);color:var(--wk-ink,#3b2414);font:900 clamp(13px,1.55cqw,21px)/1 var(--wk-display,inherit);box-shadow:0 2px 0 var(--tj-drop);rotate:8deg}
.tj-jar-caption{max-width:100%;font:800 clamp(12px,1.2cqw,16px)/1.2 var(--wk-display,inherit);color:var(--wk-on-scene,#fff);text-shadow:var(--wk-on-scene-shadow,0 1px 2px #000a);text-align:center;text-wrap:balance}
.tj-jar.is-empty .tj-jar-tag{opacity:.75}

/* A card on its way (and the one waiting on an empty spot): the world's own card, or in the glass
   jar a folded slip in one of the world's colours. */
:is(.tj-flight,.tj-flyer,.tj-fill-slip)[data-tone="1"]{--tj-slip:color-mix(in srgb,var(--wk-c1,#ff7a59) 52%,#fff)}
:is(.tj-flight,.tj-flyer,.tj-fill-slip)[data-tone="2"]{--tj-slip:color-mix(in srgb,var(--wk-c2,#ffbe2e) 55%,#fff)}
:is(.tj-flight,.tj-flyer,.tj-fill-slip)[data-tone="3"]{--tj-slip:color-mix(in srgb,var(--wk-c3,#22bfd2) 50%,#fff)}
:is(.tj-flight,.tj-flyer,.tj-fill-slip)[data-tone="4"]{--tj-slip:color-mix(in srgb,var(--wk-c4,#9a7cff) 48%,#fff)}
:is(.tj-flight,.tj-flyer,.tj-fill-slip)[data-tone="5"]{--tj-slip:color-mix(in srgb,var(--wk-good,#2fbf71) 48%,#fff)}
.tj-paper{background-color:var(--tj-slip,#ffd9a0);background-image:linear-gradient(180deg,#ffffff5c,#ffffff00 46%,#0000001f 50%,#ffffff40 51.5%,#0000000d);border:2px solid #0000001f;border-radius:var(--tj-radius)}
.tj-shell:not([data-holder=jar]) .tj-paper{background:var(--wk-talk-paper,var(--tj-slip,#ffd9a0));border:var(--wk-talk-line,2px solid #0000001f);border-radius:var(--wk-talk-radius,var(--tj-radius));box-shadow:var(--wk-talk-drop,none)}
.tj-cover{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
.tj-flyer,.tj-filed{position:absolute;z-index:30;pointer-events:none;transform-origin:0 0;will-change:transform}
.tj-flyer{box-shadow:0 3px 8px #00000038}
.tj-spot.is-arriving .tj-tools{visibility:hidden}
.tj-filed>.tj-card{transition:none}

/* ---------- Picked cards: the world's own cards, large enough for the class ---------- */
.tj-panel{position:absolute;inset:0;z-index:40;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:3%;border-radius:var(--wk-radius,20px);background:color-mix(in srgb,var(--tj-drop) 42%,transparent)}
.tj-panel-box{display:flex;flex-direction:column;gap:clamp(10px,1.4cqw,18px);width:min(100%,1120px);height:min(100%,560px);min-height:0;max-height:100%;padding:clamp(12px,2cqw,24px);border:var(--wk-card-line,3px solid var(--tj-edge));border-radius:var(--wk-radius,20px);background:var(--wk-card-flat,#fffdf7);color:var(--tj-flat-ink);box-shadow:0 14px 34px #0000004d}
.tj-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tj-panel-head h2{margin:0;font:900 clamp(18px,2.2cqw,28px)/1.2 var(--wk-display,inherit);color:inherit}
.tj-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2cqw,26px);flex:1 1 auto;min-width:0;min-height:0;padding:4px 6px 12px;outline-offset:2px}
.tj-gallery[data-columns="1"]{grid-template-columns:minmax(0,560px);justify-content:center}
.tj-gallery[data-count="1"]{grid-template-columns:minmax(0,560px);justify-content:center}
.tj-gallery-card{container:tj-review-card/inline-size;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;min-width:0;min-height:0;padding:clamp(14px,2cqw,26px);border:var(--wk-talk-line,var(--wk-card-line,3px solid var(--tj-edge)));border-radius:var(--wk-talk-radius,var(--tj-radius));background:var(--wk-talk-paper,var(--tj-paper));color:var(--wk-talk-ink,var(--tj-ink));text-shadow:var(--wk-talk-glow,none);box-shadow:var(--wk-talk-drop,var(--wk-card-drop,0 4px 0 var(--tj-drop)));font-family:var(--wk-display,inherit)}
.tj-gallery-card[data-side=back]{background:var(--wk-talk-back,var(--wk-talk-paper,var(--tj-paper)))}
/* The stone tablet's fern belongs in its corner, clear of the sentence. */
@container tj-shell (min-height:360px){
  #activityPlayer[data-world-kit=dinosaur-valley] .tj-gallery-card{padding-bottom:64px}
}
.tj-gallery-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3cqw,20px);width:100%;height:100%;min-width:0;min-height:0;text-align:center}
.tj-gallery-face .tj-picture{flex:0 0 auto;align-self:stretch;width:100%;height:100%;min-width:0;min-height:0;max-height:none}
.tj-gallery-face .tj-picture img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border:0;border-radius:0;background:none;box-shadow:none}
.tj-gallery-face .tj-text{flex:0 0 auto;width:100%;min-width:0;margin:0;padding:.12em 0;font-family:inherit;font-size:clamp(24px,7.5cqw,44px);font-weight:800;line-height:1.22;overflow-wrap:anywhere;text-wrap:pretty;text-align:center}
.tj-gallery-face .tj-text[data-reading=true]{overscroll-behavior:contain;scrollbar-width:thin;text-align:start}
.tj-gallery-face .tj-sound{flex:0 1 auto;width:min(45%,150px);max-height:100%;margin:auto}
.tj-gallery-tools{display:flex;justify-content:center;align-items:center;gap:10px;min-height:44px}
.tj-gallery-tools:empty{display:none}
.tj-gallery-tools .tj-tool{font-size:clamp(14px,3.5cqw,18px)}
.tj-gallery-nav{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:16px;min-height:44px}
.tj-gallery-nav .tj-btn{width:44px;height:44px;padding:8px}
#tjGalleryPrev .tj-icon{rotate:180deg}
#tjGalleryPage{min-width:64px;text-align:center;font:800 clamp(16px,1.6cqw,21px)/1.2 var(--wk-display,inherit);font-variant-numeric:tabular-nums}
@container tj-shell (max-height:359px){
  .tj-panel{padding:8px}
  .tj-panel-box{gap:8px;padding:10px 14px}
  .tj-gallery{padding:2px 4px 6px}
  .tj-gallery-card{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);gap:10px;padding:12px}
  .tj-gallery-face:has(.tj-picture):has(.tj-text){flex-direction:row;gap:14px}
  .tj-gallery-face:has(.tj-text) .tj-picture{flex:0 1 44%;width:44%;height:100%;align-self:stretch}
  .tj-gallery-face .tj-text{flex:1 1 auto;font-size:clamp(22px,4cqw,34px)}
  .tj-gallery-tools{flex-direction:column;gap:6px}
  .tj-gallery-tools .tj-tool{width:44px;height:44px;padding:8px}
  .tj-gallery-tools .tj-tool-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #activityPlayer[data-world-kit=dinosaur-valley] .tj-gallery-card{padding-right:22%}
}
.tj-shell :is(button,[data-tj-card][role=button]):focus-visible{outline:3px solid var(--wk-mark,#f6c24f);outline-offset:3px}
.tj-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.tj-panel:focus{outline:none}
.tj-gallery:focus-visible{outline:3px solid var(--wk-mark,#f6c24f);outline-offset:2px;border-radius:8px}
.tj-station:focus{outline:none}
/* A short game (a small window, or a phone on its side in full screen): the jar shrinks and
   the four smaller buttons share two rows, so every control stays in reach. */
@media (min-width:621px){
  @container tj-shell (max-height:444px){
    .tj-station{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
    .tj-jar{grid-column:1/-1;gap:3px;padding:0}
    .tj-jar-art{height:clamp(46px,17cqh,96px)}
    .tj-station .tj-btn.tj-next{grid-column:1/-1;min-height:44px}
    .tj-station .tj-btn:not(.tj-next){flex-direction:column;gap:2px;min-height:48px;padding:4px;border-radius:14px;font-size:12.5px;line-height:1.1;white-space:normal;text-align:center}
    .tj-station .tj-btn:not(.tj-next) .tj-icon{width:19px;height:19px}
    .tj-btn.tj-talked{margin-top:0}
  }
}

/* The end screen: how many cards were talked about. */
#activityPlayer[data-game=speakingcards] .tj-final{font:inherit}
#activityPlayer[data-game=speakingcards] .tj-final-total{font-style:normal;font-size:.62em;font-weight:700;opacity:.7}

/* ---------- Phones: the cards above, the jar and its controls below ---------- */
@media (max-width:620px){
  #activityPlayer.game-shell[data-game=speakingcards]:not(:fullscreen)::before{aspect-ratio:auto;height:530px}
  #activityPlayer.game-shell[data-game=speakingcards]:has(.tj-shell[data-layout=groups]):not(:fullscreen)::before{height:600px}
  #activityPlayer[data-game=speakingcards] #gameStage{padding:14px 12px 12px}
  .tj-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px}
  .tj-shell[data-layout=single] .tj-holder{width:min(100cqw,calc((100cqh - var(--tj-tools)) * 1.45));aspect-ratio:1.45}
  .tj-shell[data-layout=groups] .tj-spots{grid-auto-rows:minmax(170px,auto);padding:12px 6px 4px}
  .tj-station{align-self:stretch;display:grid;grid-template-columns:92px repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:8px;padding:10px}
  .tj-jar{grid-column:1;grid-row:1/span 2;align-content:center;padding:0}
  .tj-jar-art{height:82px}
  .tj-jar-caption{font-size:11px;white-space:normal;text-align:center}
  .tj-station .tj-next{grid-column:2/-1;grid-row:1;min-height:50px;font-size:17px}
  #tjBack{grid-column:2;grid-row:2}#tjMix{grid-column:3;grid-row:2}#tjTalked{grid-column:4;grid-row:2}#tjFinish{grid-column:5;grid-row:2}
  .tj-station .tj-btn:not(.tj-next){flex-direction:column;gap:2px;min-height:52px;margin:0;padding:5px 3px;border-radius:14px;font-size:12.5px;line-height:1.1;white-space:normal;text-align:center}
  .tj-station .tj-btn:not(.tj-next) .tj-icon{width:20px;height:20px}
  .tj-talked .tj-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tj-tool{padding:8px 13px;font-size:15px}
  .tj-shell[data-layout=groups] .tj-tools{gap:4px}
  .tj-shell[data-layout=groups] .tj-tool{padding:8px 9px}
  .tj-panel{padding:10px}
}
@media (prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) :is(.tj-card,.tj-jar-art){transition:none}:where(:root:not([data-motion-managed])) .tj-fill-slip{animation:none}}
:where(:root[data-reduce-motion]) :is(.tj-card,.tj-jar-art){transition:none}
:where(:root[data-reduce-motion]) .tj-fill-slip{animation:none}

/* Source: css/reveal-boxes.css; sha256: c6e7a4b8a57552d1b0ecf5274bfeb36972125240e1729b6eefe0a9aaecb07903 */
/* What's inside? (js/games/openbox.js, formerly Reveal boxes): a wall of numbered hiding places, a different kind in every
   learning world (the drawings, --wk-hide-art and --wk-hide-open-art, come with the world from
   js/themekit/registry.js). An opened one lets a card rise with what was inside. The world also
   supplies the scene, colours, type and buttons through its --wk tokens.
   Original ClassPlay design (5.45.0, hiding places 5.47.0). */
#activityPlayer[data-game=openbox]{--rb-ink:var(--wk-flat-ink,var(--wk-ink,#173e54));--rb-paper:var(--wk-card-flat,var(--style-surface,#fffdf7));--rb-edge:var(--wk-line,#376883);--rb-drop:var(--wk-drop,#143b54);--rb-radius:var(--wk-radius-sm,16px);--rb-good:var(--wk-good,#2fbf71);--rb-good-d:var(--wk-good-d,#1d8f50);--rb-bad:var(--wk-bad,#e5484d);--rb-bad-d:var(--wk-bad-d,#a8262b)}
#activityPlayer[data-game=openbox] #gameStage{padding:clamp(10px,1.8cqw,24px) clamp(12px,2.4cqw,34px);font-family:var(--wk-display,inherit)}
.rb-shell{container:rb-shell/size;position:relative;height:100%;min-height:0;isolation:isolate}
.rb-shell *{box-sizing:border-box}
.rb-shell [hidden]{display:none!important}
.rb-icon{display:block;width:22px;height:22px;flex:none}
.rb-layout{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.6cqh,14px)}

/* ---------- The rows above and below the wall ---------- */
.rb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px}
.rb-bottom{display:flex;align-items:center;justify-content:flex-end;min-height:42px}
/* While a card is open the rows step aside, so nothing is half covered behind it. */
.rb-shell:has(> .rb-reader:not([hidden])) :is(.rb-top,.rb-bottom){visibility:hidden}
.rb-where{min-width:0;margin:0;padding:6px 14px;border-radius:999px;background:var(--wk-pill,#163c50b8);color:var(--wk-pill-ink,#fff);font:800 clamp(14px,1.5cqw,20px)/1.25 var(--wk-display,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-pick,.rb-finish,.rb-back-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:46px;margin:0;padding:8px 18px;border:var(--wk-btn-line,2px solid var(--rb-edge));border-radius:999px;background:var(--wk-ghost,var(--style-surface,#fffdf7));color:var(--wk-ghost-ink,var(--style-ink,#173e54));box-shadow:0 3px 0 var(--rb-drop);font:800 clamp(14px,1.45cqw,19px)/1.15 var(--wk-display,inherit);text-shadow:var(--wk-ghost-shadow,none);white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.rb-pick{background:var(--wk-btn,#246e98);color:var(--wk-btn-ink,#fff);text-shadow:var(--wk-btn-shadow,none);box-shadow:var(--wk-btn-drop,0 3px 0 var(--rb-drop))}
.rb-back-button{min-height:50px;padding:10px 24px;background:var(--wk-btn,#246e98);color:var(--wk-btn-ink,#fff);text-shadow:var(--wk-btn-shadow,none);box-shadow:var(--wk-btn-drop,0 3px 0 var(--rb-drop))}
.rb-finish{min-height:42px;padding:6px 14px;font-size:clamp(13px,1.3cqw,17px)}
@media (hover:hover){
  :is(.rb-pick,.rb-finish,.rb-back-button):not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.05)}
  .rb-hider:not(:disabled):hover .rb-figure{transform:translateY(-4%)}
  .rb-option:not(.is-locked):hover{transform:translateY(-2px)}
}
:is(.rb-pick,.rb-finish,.rb-back-button):not(:disabled):active{transform:translateY(2px);box-shadow:none}
:is(.rb-pick,.rb-finish,.rb-back-button):disabled{opacity:.5;cursor:default;box-shadow:none}
:is(.rb-pick,.rb-finish,.rb-back-button,.rb-hider,.rb-option,.rb-listen,.rb-sound,.rb-answer-listen):focus-visible{outline:4px solid var(--wk-mark,#ffd34a);outline-offset:3px}

/* ---------- The wall of hiding places ---------- */
.rb-wall{display:grid;grid-template-columns:repeat(var(--rb-cols,4),minmax(0,1fr));grid-template-rows:repeat(var(--rb-rows,2),minmax(0,1fr));gap:clamp(8px,1.2cqw,14px);min-height:0;padding:clamp(10px,1.6cqw,20px);border:var(--wk-panel-border,3px solid var(--rb-edge));border-radius:var(--wk-radius,22px);background:var(--wk-panel,#fdf8ea);box-shadow:var(--wk-panel-shadow,0 6px 0 var(--rb-drop))}
/* Very many boxes on a small screen: each keeps a usable size and the wall scrolls. */
.rb-wall[data-scroll=true]{grid-template-rows:repeat(var(--rb-rows,2),var(--rb-row,52px));align-content:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.rb-cubby{container:rb-cubby/size;position:relative;min-width:0;min-height:0;border-radius:14px;background:color-mix(in srgb,var(--rb-ink) 6%,transparent);box-shadow:inset 0 3px 8px color-mix(in srgb,var(--rb-ink) 14%,transparent)}
/* The whole cubby is the button; the drawing (6 × 5) stands at its foot, leaving room above it
   for the tag of an opened one. */
.rb-hider{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:14px;background:none;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
.rb-figure{position:absolute;left:50%;bottom:3%;width:min(94cqw,calc(86cqh * 1.2));aspect-ratio:6/5;translate:-50% 0;transform-origin:50% 92%;transition:transform .18s ease,filter .18s ease}
.rb-art,.rb-art-open{position:absolute;inset:0;background:var(--wk-hide-art) 50% 100%/contain no-repeat}
.rb-art-open{background-image:var(--wk-hide-open-art);opacity:0}
/* The number, on the drawing where the world puts it (--rb-num-x/y). */
.rb-badge{position:absolute;left:var(--rb-num-x,50%);top:var(--rb-num-y,55%);display:grid;place-items:center;width:clamp(20px,26cqh,50px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--rb-tone) 60%,#fff),var(--rb-tone) 55%,var(--rb-tone-d));box-shadow:0 0 0 2px #fff,0 0 0 3.5px #0000006b,0 3px 0 2px var(--rb-tone-d);color:#fff;font:900 clamp(11px,13cqh,26px)/1 var(--wk-display,inherit);text-shadow:0 1px 0 var(--rb-tone-d);transition:opacity .15s ease}
/* Opened: the open drawing, a tag with what was inside, and the number in the corner. */
.rb-hider.is-open :is(.rb-art,.rb-badge){opacity:0}
.rb-hider:is(.is-open,.is-opening) .rb-art-open{opacity:1}
.rb-peek{position:absolute;left:14%;right:14%;top:3%;height:38%;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3% 5%;overflow:hidden;border:2px solid color-mix(in srgb,var(--rb-ink) 24%,transparent);border-radius:8px;background:var(--rb-paper);color:var(--rb-ink);font:800 clamp(9px,9cqh,17px)/1.15 var(--wk-display,inherit);text-align:center;box-shadow:0 3px 8px #00000033;rotate:-2deg}
.rb-peek img{display:block;max-width:80%;max-height:60%;object-fit:contain}
.rb-peek span{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rb-hider.is-open .rb-peek{display:flex}
.rb-number{position:absolute;left:5%;bottom:6%;z-index:3;display:none;place-items:center;min-width:1.7em;height:1.7em;padding:0 .35em;border-radius:999px;background:var(--rb-tone);color:#fff;font:900 clamp(10px,10cqh,17px)/1 var(--wk-display,inherit);box-shadow:0 0 0 2px #fff;pointer-events:none}
.rb-hider.is-open .rb-number{display:grid}
/* Closed again after reading (for a memory game): a tick on its number. */
.rb-hider.is-read .rb-badge{filter:saturate(.5)}
.rb-hider.is-read .rb-badge::after{content:"✓";position:absolute;right:-16%;top:-16%;display:grid;place-items:center;width:52%;aspect-ratio:1;border-radius:50%;background:var(--rb-good-d);color:#fff;font-size:.6em;box-shadow:0 0 0 2px #fff}
.rb-hider.is-picking .rb-figure{transform:translateY(-5%) scale(1.06);filter:drop-shadow(0 0 3px var(--wk-mark,#ffd34a)) drop-shadow(0 0 10px var(--wk-mark,#ffd34a))}
.rb-wall[data-density=dense] .rb-peek{font-size:0}
.rb-wall[data-density=dense] .rb-peek img{display:none}

/* ---------- Opening: each world's hiding place moves its own way, then shows itself open ---------- */
.rb-hider.is-opening .rb-figure{animation:rb-hop .3s ease-in-out}
.rb-shell[data-motion=wobble] .rb-hider.is-opening .rb-figure{animation-name:rb-wobble}
.rb-shell[data-motion=shake] .rb-hider.is-opening .rb-figure{animation-name:rb-shake}
.rb-shell[data-motion=sway] .rb-hider.is-opening .rb-figure{animation-name:rb-sway;transform-origin:50% 0}
.rb-hider.is-opening :is(.rb-art,.rb-badge){animation:rb-vanish .08s .29s both}
.rb-hider.is-opening .rb-art-open{animation:rb-appear .16s .28s both}
@keyframes rb-hop{0%,100%{transform:none}35%{transform:translateY(-7%) scale(1.03,.97)}70%{transform:translateY(1%) scale(.98,1.02)}}
@keyframes rb-wobble{0%,100%{transform:none}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}88%{transform:rotate(2deg)}}
@keyframes rb-shake{0%,100%{transform:none}15%{transform:translateX(-4%)}35%{transform:translateX(4%)}55%{transform:translateX(-3%)}75%{transform:translateX(2%)}}
@keyframes rb-sway{0%,100%{transform:none}25%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
@keyframes rb-vanish{to{opacity:0}}
@keyframes rb-appear{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* ---------- The card with what was inside ---------- */
.rb-reader{position:absolute;inset:0;z-index:30;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:clamp(8px,2cqw,26px);border-radius:var(--wk-radius,22px);background:color-mix(in srgb,var(--rb-drop) 48%,transparent)}
.rb-card{position:relative;display:grid;grid-template-rows:auto minmax(min(30%,7em),1fr) minmax(0,auto) auto auto;gap:clamp(8px,1.5cqh,14px);width:min(100%,960px);height:min(100%,700px);padding:clamp(12px,2cqw,24px) clamp(14px,2.6cqw,36px) clamp(12px,2.2cqw,26px);border:var(--wk-card-line,3px solid var(--rb-edge));border-radius:var(--wk-radius,22px);background:var(--rb-paper);color:var(--rb-ink);box-shadow:var(--wk-card-drop,0 6px 0 var(--rb-drop)),0 18px 40px #00000059;transform-origin:50% 50%}
/* Which hiding place it came from: its drawing, opened, and its name ("Egg 3"). */
.rb-tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:0;padding:3px 14px 3px 4px;border-radius:999px;background:color-mix(in srgb,var(--rb-tone,var(--wk-c1,#3d8bd6)) 16%,var(--rb-paper));font:800 clamp(13px,1.4cqw,18px)/1.2 var(--wk-display,inherit)}
.rb-tag-art{flex:none;width:clamp(34px,4.4cqw,50px);aspect-ratio:6/5;background:var(--wk-hide-open-art) 50% 100%/contain no-repeat}
.rb-body{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:clamp(8px,1.6cqh,16px);padding:0 clamp(4px,1.6cqw,20px);overflow:hidden}
.rb-picture{display:flex;justify-content:center;align-items:center;flex:1 1 auto;width:100%;min-height:0;max-height:62%}
.rb-body:not(:has(.rb-text)) .rb-picture{max-height:100%}
.rb-picture img{max-width:100%;max-height:100%;object-fit:contain}
/* The words, with their Listen button right beside them. */
.rb-say{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4cqw,16px);max-width:100%;min-height:0;flex:0 0 auto}
.rb-text{flex:0 1 auto;min-width:0;max-width:100%;font-size:clamp(20px,4.6cqw,58px);font-weight:800;line-height:1.2;text-align:center;text-wrap:balance;overflow-wrap:normal}
.rb-text[data-reading=true]{font-size:17px;line-height:1.45;text-align:start;text-wrap:pretty;overflow-wrap:break-word;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* More to read below: the last line fades until the passage is scrolled to its end. */
:is(.rb-text[data-reading=true],.rb-answers).has-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent)}
.rb-listen,.rb-answer-listen,.rb-sound{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:9px;border:0;border-radius:50%;background:var(--wk-btn,#246e98);color:var(--wk-btn-ink,#fff);box-shadow:var(--wk-btn-drop,0 3px 0 var(--rb-drop));cursor:pointer}
/* A recording on its own is one large Listen button. */
.rb-sound{width:min(30%,150px);height:auto;aspect-ratio:1;padding:0}
.rb-sound .rb-icon{width:52%;height:52%}
.rb-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:clamp(8px,1.2cqw,14px);min-height:0;margin:-8px;padding:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.rb-answers[data-count="3"],.rb-answers[data-count="5"],.rb-answers[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.rb-choice{position:relative;display:flex;gap:6px;min-width:0}
.rb-option{flex:1;display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;margin:0;padding:8px 14px;border:var(--wk-card-line,3px solid var(--rb-edge));border-radius:var(--rb-radius);background:color-mix(in srgb,var(--wk-c1,#3d8bd6) 7%,var(--rb-paper));color:var(--rb-ink);box-shadow:0 3px 0 var(--rb-drop);font:800 clamp(15px,1.9cqw,26px)/1.2 var(--wk-display,inherit);text-align:start;cursor:pointer;transition:transform .15s ease}
.rb-key{display:grid;place-items:center;flex:none;width:1.7em;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--wk-c1,#3d8bd6) 20%,transparent);font-size:.8em}
.rb-answer{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:break-word}
.rb-answer img{max-height:64px;max-width:96px;min-width:0;object-fit:contain}
/* Picture answers are what a player looks at: they take the larger share of the card, and each
   picture fills its tile, above its words, with the answer's letter in the corner. */
.rb-card:has(.rb-answers[data-pictures=true]:not([hidden])){grid-template-rows:auto minmax(3.4em,.6fr) minmax(0,1.6fr) auto auto}
.rb-answers[data-pictures=true]{grid-auto-rows:minmax(96px,1fr);align-content:stretch}
.rb-shell .rb-answers[data-pictures=true][data-cols]{grid-template-columns:repeat(var(--rb-pic-cols,2),minmax(0,1fr))}
.rb-answers[data-pictures=true] .rb-choice{min-height:0}
.rb-answers[data-pictures=true] .rb-option{position:relative;flex-direction:column;justify-content:center;gap:4px;min-height:0;padding:10px 10px 8px;text-align:center}
.rb-answers[data-pictures=true] .rb-key{position:absolute;left:6px;top:6px;font-size:.66em}
.rb-answers[data-pictures=true] .rb-answer{flex:1 1 auto;flex-direction:column;justify-content:center;gap:4px;width:100%;min-height:0}
.rb-answers[data-pictures=true] .rb-answer img{flex:1 1 0;width:100%;max-width:100%;min-height:0;max-height:none;object-fit:contain}
.rb-answers[data-pictures=true] .rb-answer span{flex:none}
.rb-option.is-locked{cursor:default}
.rb-option.is-right{border-color:var(--rb-good-d);background:color-mix(in srgb,var(--rb-good) 24%,var(--rb-paper))}
.rb-option.is-wrong{border-color:var(--rb-bad-d);background:color-mix(in srgb,var(--rb-bad) 20%,var(--rb-paper))}
.rb-feedback{min-height:1.3em;margin:0;text-align:center;font:800 clamp(15px,1.7cqw,22px)/1.3 var(--wk-display,inherit)}
/* A question keeps the room for its feedback and its button, so nothing moves when they appear. */
.rb-card:not([data-kind=question]) .rb-feedback:empty{display:none}
.rb-back-button:disabled{visibility:hidden}
.rb-good{color:var(--rb-good-d)}.rb-bad{color:var(--rb-bad-d)}
.rb-hint{color:color-mix(in srgb,var(--rb-ink) 80%,transparent)}
.rb-revisit{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.rb-revisit img{max-height:56px;max-width:90px;object-fit:contain}
/* A surprise arrives with a bonus stamp. */
.rb-bonus{display:inline-block;padding:.25em .8em;border:4px double var(--rb-good-d);border-radius:12px;color:var(--rb-good-d);font:900 clamp(22px,3.4cqw,44px)/1.1 var(--wk-display,inherit);letter-spacing:.02em;transform:rotate(-8deg)}
.rb-actions{display:flex;justify-content:center}

/* ---------- The end-of-game recap ---------- */
.rb-recap{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
#eReview:has(.rb-recap){max-height:640px}
.rb-recap-item{position:relative;display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid #dbe5ec;border-radius:8px;background:#fff;color:#243a47}
.rb-recap-item.is-unopened{opacity:.6}
.rb-recap-number{flex:0 0 auto;min-width:26px;height:26px;border-radius:13px;display:grid;place-items:center;background:#f3e7d2;color:#7a4a1c;font-weight:800}
.rb-recap-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rb-recap-picture{display:block;width:100%;height:96px;object-fit:contain;border-radius:6px;background:#f8f5ec}
.rb-recap-text{font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.rb-recap-answer{display:flex;flex-direction:column;gap:4px;padding-top:6px;border-top:1px dashed #d9cdb4}
.rb-recap-answer .rb-recap-picture{height:64px}
.rb-recap-status{margin:0;font-size:13px;font-weight:700;color:#5d7282}
.rb-recap-status .ok{color:#238354}.rb-recap-status .no{color:#bc4d43}
.rb-recap-item:has(> .mark) .rb-recap-body{padding-right:26px}
.rb-recap-item .mark{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px}
.rb-recap-item .mark.ok{background:#2fa36b}.rb-recap-item .mark.no{background:#d9534f}
.rb-recap .btn{align-self:flex-start;min-height:34px}.rb-recap .btn svg{width:16px;height:16px;vertical-align:middle}
.rb-recap-hidden{opacity:.75;font-weight:800;padding:8px}

/* ---------- Narrow and short games ---------- */
@container rb-shell (max-width:560px){
  .rb-pick .rb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rb-pick{padding:8px 12px}
  .rb-answers,.rb-answers[data-count]{grid-template-columns:minmax(0,1fr)}
  /* Five or six answers on a phone: two to a row, so they all show. */
  .rb-answers:is([data-count="5"],[data-count="6"]),.rb-answers[data-pictures=true]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb-body{padding:0 4px}
}
/* A short game (a phone on its side): answers side by side, but never four pictures in a row. */
@container rb-shell (max-height:460px) and (min-width:561px){
  .rb-card{padding-top:10px;padding-bottom:10px}
  .rb-answers,.rb-answers[data-count]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rb-answers:is([data-count="2"],[data-count="4"]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb-answers[data-count="4"]:not([data-pictures=true]){grid-template-columns:repeat(4,minmax(0,1fr))}
  .rb-answers[data-pictures=true]{grid-auto-rows:minmax(72px,1fr)}
  .rb-option{min-height:44px;padding:4px 10px}
  /* Picture answers beside the question, so they keep the card's whole height. */
  .rb-card:has(.rb-answers[data-pictures=true]:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"tag answers" "body answers" "feedback answers" "actions answers";column-gap:clamp(12px,2cqw,24px)}
  .rb-card:has(.rb-answers[data-pictures=true]:not([hidden])) > .rb-tag{grid-area:tag}
  .rb-card:has(.rb-answers[data-pictures=true]:not([hidden])) > .rb-body{grid-area:body}
  .rb-card:has(.rb-answers[data-pictures=true]:not([hidden])) > .rb-answers{grid-area:answers}
  .rb-card:has(.rb-answers[data-pictures=true]:not([hidden])) > .rb-feedback{grid-area:feedback}
  .rb-card:has(.rb-answers[data-pictures=true]:not([hidden])) > .rb-actions{grid-area:actions}
}
@container rb-shell (max-height:460px){
  .rb-card:not(:has(.rb-answers[data-pictures=true]:not([hidden]))){grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(2.4em,1fr) minmax(0,auto) auto;grid-template-areas:"body body body" "answers answers answers" "tag feedback actions";align-items:center}
  .rb-back-button{min-height:44px;padding:6px 18px}
  .rb-card:not(:has(.rb-answers[data-pictures=true]:not([hidden]))) > .rb-tag{grid-area:tag}
  .rb-card:not(:has(.rb-answers[data-pictures=true]:not([hidden]))) > :is(.rb-body,.rb-answers){align-self:stretch}
  .rb-card:not(:has(.rb-answers[data-pictures=true]:not([hidden]))) > .rb-body{grid-area:body}
  .rb-card:not(:has(.rb-answers[data-pictures=true]:not([hidden]))) > .rb-answers{grid-area:answers}
  .rb-card:not(:has(.rb-answers[data-pictures=true]:not([hidden]))) > .rb-feedback{grid-area:feedback}
  .rb-card:not(:has(.rb-answers[data-pictures=true]:not([hidden]))) > .rb-actions{grid-area:actions}
}
@container rb-shell (max-height:460px) and (max-width:560px){
  .rb-card{padding-top:10px;padding-bottom:10px}
  .rb-option{min-height:44px;padding:4px 10px}
  .rb-answers[data-pictures=true]{grid-auto-rows:minmax(72px,1fr)}
}
@media (max-width:620px){
  #activityPlayer.game-shell[data-game=openbox]:not(:fullscreen){height:clamp(560px,86svh,720px)}
  #activityPlayer[data-game=openbox] #gameStage{padding:10px}
}
/* High contrast: the light that picks a box, and right and wrong answers, are outlined or struck through. */
@media (forced-colors:active){
  .rb-card{border:3px solid CanvasText}
  .rb-hider.is-picking{outline:4px solid Highlight;outline-offset:-4px}
  .rb-badge{forced-color-adjust:none;background:Canvas;color:CanvasText;box-shadow:0 0 0 2px CanvasText}
  .rb-option.is-right{outline:4px solid Highlight;outline-offset:2px}
  .rb-option.is-wrong{border-style:dashed;text-decoration:line-through}
}
/* Less movement: a hiding place shows itself open at once. */
@media (prefers-reduced-motion:reduce){
  :where(:root:not([data-motion-managed])) .rb-shell[data-motion] .rb-hider.is-opening :is(.rb-figure,.rb-art,.rb-badge,.rb-art-open){animation:none}
  :where(:root:not([data-motion-managed])) .rb-shell[data-motion] .rb-hider.is-opening :is(.rb-art,.rb-badge){opacity:0}
  :where(:root:not([data-motion-managed])) .rb-figure{transition:none}
}
:where(:root[data-reduce-motion]) .rb-shell[data-motion] .rb-hider.is-opening :is(.rb-figure,.rb-art,.rb-badge,.rb-art-open){animation:none}
:where(:root[data-reduce-motion]) .rb-shell[data-motion] .rb-hider.is-opening :is(.rb-art,.rb-badge){opacity:0}
:where(:root[data-reduce-motion]) .rb-figure{transition:none}

/* Source: css/classroom.css; sha256: 12c1493811ae15e97fa17fe76ea5dc6e54aa725439c7be94ba7f664610bf2598 */
.classroom-dialog{width:min(620px,94vw);max-height:90vh;overflow:auto;border:0;border-radius:16px;padding:28px;color:#172e45;box-shadow:0 24px 90px #102c4c55}.classroom-dialog::backdrop{background:#122c4f88}.classroom-close{float:right}.classroom-close button{border:0;background:none;font-size:28px;cursor:pointer}.classroom-dialog label{display:grid;gap:7px;margin:15px 0;font-weight:650}.classroom-dialog input,.classroom-dialog select,.classroom-dialog textarea{width:100%;min-height:42px;padding:9px;border:1px solid #b4c6d6;border-radius:7px;font:inherit;box-sizing:border-box}.classroom-dialog input[type=number]{max-width:160px}.classroom-dialog [hidden]{display:none}.classroom-note,.classroom-dialog p{font-size:14px;line-height:1.6}.classroom-status{min-height:22px}.classroom-status.is-error,.assignment-save-status.is-error{color:#a12531}.classroom-link-result,.classroom-existing{margin-top:20px}.classroom-link-result .site-button,.classroom-existing .site-button{margin:8px 8px 8px 0}.classroom-dialog details{margin-top:16px}.classroom-dialog summary{cursor:pointer}.classroom-page{max-width:1180px;margin:30px auto;padding:28px;background:white;border-radius:12px;min-height:60vh}.classroom-page h1{font-size:30px;margin-top:0}.classroom-page .classroom-search{display:flex;gap:12px;max-width:680px}.classroom-search input{flex:1;min-width:0}.classroom-community-grid,.classroom-assignment-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:26px 0}.classroom-community-card,.classroom-report-card{border:1px solid #cadbe8;border-radius:12px;padding:18px;overflow:hidden}.classroom-community-card a{text-decoration:none;color:inherit}.classroom-community-card h2,.classroom-report-card h2{font-size:20px;margin:12px 0}.classroom-community-art{display:block;background:#e8f5fb;height:130px;overflow:hidden;border-radius:9px}.classroom-community-art svg{width:100%;height:100%}.classroom-tags{display:flex;flex-wrap:wrap;gap:6px}.classroom-tags span{background:#e9f0fa;border-radius:12px;padding:4px 9px;font-size:13px}.classroom-report-card button{margin:5px 7px 0 0}.classroom-summary{display:flex;gap:16px;margin:24px 0}.classroom-summary>div{display:grid;gap:6px;border-radius:10px;background:#e9f5fc;padding:20px;min-width:120px}.classroom-summary strong{font-size:30px}.classroom-summary span{font-size:14px}.classroom-page table{border-collapse:collapse;width:100%;text-align:left;font-size:14px}.classroom-page th,.classroom-page td{border-bottom:1px solid #dce5eb;padding:12px 10px;vertical-align:top}.classroom-page th{background:#eef5fa}.classroom-table-scroll{overflow-x:auto}.classroom-page details{border-bottom:1px solid #dce5eb;padding:12px}.classroom-page summary{cursor:pointer}.classroom-page li{padding:7px;overflow-wrap:anywhere}.classroom-empty{padding:30px;background:#f4f8fc;border-radius:12px}.classroom-empty h2{font-size:21px}.assignment-save-status{padding:12px;margin:14px 0;border-radius:8px;background:#edf8f2;font-size:14px}.assignment-retry{margin-bottom:16px}.classroom-student .site-header,.classroom-student .resource-sidebar,.classroom-student .resource-details,.classroom-student .resource-tabs,.classroom-student #settingsPanel,.classroom-student #leaderboardPanel,.classroom-student #editLink,.classroom-student #viewScoresBtn,.classroom-student #previewBtn,.classroom-student .cloud-status{display:none!important}.classroom-student .resource-layout{display:block;max-width:1100px;margin:20px auto}.classroom-student .resource-options{padding:0;background:transparent;border:0}.classroom-embed .resource-layout{margin:0;max-width:none}.classroom-embed .activity-player{border-radius:0}.classroom-embed{background:transparent!important}.classroom-student .resource-main{min-width:0}.classroom-dialog button:focus-visible,.classroom-page a:focus-visible{outline:3px solid #157dc3;outline-offset:3px}@media(max-width:600px){.classroom-page{margin:12px;padding:18px}.classroom-summary{flex-wrap:wrap}.classroom-summary>div{min-width:0;flex:1;padding:12px}.classroom-dialog{padding:20px}.classroom-student .resource-layout{margin:0 0 12px}.classroom-community-grid{grid-template-columns:1fr}.classroom-page h1{font-size:25px}}

/* Source: css/retired-games.css; sha256: fd142caae7326c6b73509c60c78562bc1f359651aaa489db00b113d83b0ca496 */
.retired-game-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto;border:1px solid #cfdae4;border-radius:18px;padding:28px;background:#fff;color:#233c50;font-family:"ClassPlay Round",Arial,sans-serif;box-shadow:0 24px 80px #15334d38}
.retired-game-dialog::backdrop{background:#17334d66}
.retired-game-dialog h2{font-size:24px;line-height:1.25;margin:0 0 12px;letter-spacing:0}
.retired-game-dialog p{font-size:15px;line-height:1.55;margin:12px 0;overflow-wrap:anywhere}
.retired-game-dialog .retired-game-lesson{font-weight:750;color:#436079}
.retired-game-dialog label{display:block;font-size:14px;font-weight:750;margin:20px 0 8px}
.retired-game-dialog select{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border:1px solid #b9cbdb;border-radius:8px;background:#fff;color:inherit;font:inherit}
.retired-game-dialog .retired-game-review-note{font-size:13px;color:#587086}
.retired-game-dialog [hidden]{display:none!important}
.retired-game-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}
.retired-game-actions .site-button{min-height:44px;border-radius:8px;white-space:normal;font:inherit;font-weight:650;text-align:center;padding:10px 16px}
.retired-game-dialog :is(button,select,a):focus-visible,.retired-game-card :is(button,a):focus-visible{outline:3px solid #2276b5;outline-offset:3px}
.retired-game-page{width:min(720px,calc(100% - 32px));margin:48px auto}
.retired-game-card{padding:32px;border:1px solid #d5e2eb;border-radius:18px;background:#fff;color:#233c50}
.retired-game-card h1{font-size:28px;line-height:1.3;overflow-wrap:anywhere;margin:0 0 16px}
.retired-game-card p{font-size:16px;line-height:1.6}
@media(max-width:600px){.retired-game-dialog{padding:22px}.retired-game-actions{justify-content:stretch}.retired-game-actions .site-button{flex:1}.retired-game-card{padding:24px}.retired-game-page{margin:24px auto}}

/* Source: css/puzzles.css; sha256: 8194827a670c5f688ea9d087049857ff239d012907b06f285f8a81380ac027f5 */
.activity-player:is([data-game=crossword],[data-game=wordsearch]) #gameStage{padding:3.4cqw 2.4cqw 5.5cqw;overflow:auto;align-content:start}.puzzle-shell{width:100%;color:var(--tw-text,#183e61)}.puzzle-instruction{margin:0 0 14px;text-align:center;font-size:clamp(14px,1.65cqw,23px)}.crossword-layout,.wordsearch-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr);gap:22px;align-items:start}.puzzle-scroll{max-width:100%;overflow:auto;padding:8px;border-radius:12px;background:#ffffffd9;max-height:62vh;overscroll-behavior:contain}.crossword-grid,.wordsearch-grid{display:grid;grid-template-columns:repeat(var(--puzzle-columns),minmax(28px,1fr));gap:2px;min-width:calc(var(--puzzle-columns)*30px);margin:auto;max-width:100%;width:max-content}.crossword-cell{position:relative;display:block;min-width:30px;aspect-ratio:1;background:#fff;border:1px solid #638798;border-radius:3px}.crossword-cell input{display:block;width:100%;height:100%;min-width:0;border:0;padding:6px 0 0;text-align:center;background:transparent;font:700 22px/1.2 inherit;color:#173d51;text-transform:uppercase;border-radius:3px}.crossword-number{position:absolute;left:3px;top:0;font:700 9px/1.1 sans-serif;pointer-events:none;color:#24475d}.crossword-cell.is-active{background:#fff5b6}.crossword-cell.is-correct{background:#dff3d3}.crossword-cell.is-wrong{background:#ffe0da}.crossword-cell:focus-within{outline:3px solid #147dae;z-index:1}.crossword-block{background:#15384c;border-radius:3px;aspect-ratio:1}.crossword-clues{display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow:auto;padding:3px}.crossword-clue-row{position:relative}.crossword-clue{display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;border:2px solid #8faebf;border-radius:9px;padding:10px 36px 10px 10px;color:#173d51;background:#fff;font:inherit;font-size:clamp(13px,1.55cqw,20px);cursor:pointer}.crossword-clue.is-active{border-color:#da9c20;background:#fff8d5}.crossword-clue.is-solved{border-color:#569344;background:#e8f6df}.crossword-clue small{font-size:.8em}.crossword-clue .pair-face-picture{height:75px}.puzzle-audio{background:#e6f1f7;color:#175e84;border:1px solid #7396aa;border-radius:50%;width:34px;height:34px;padding:6px;cursor:pointer;flex:none}.puzzle-audio svg{width:100%;height:100%}.crossword-clue-row>.puzzle-audio{position:absolute;right:6px;top:6px}.puzzle-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.puzzle-status{min-height:24px;margin:12px 0;text-align:center;font-size:clamp(13px,1.6cqw,19px)}.wordsearch-cell{width:32px;height:32px;border:0;border-radius:5px;padding:0;touch-action:none;user-select:none;background:transparent;color:#143c50;font:700 20px/1 sans-serif;cursor:pointer}.wordsearch-cell:hover{background:#e0eef8}.wordsearch-cell.is-selected{background:#ffd57d}.wordsearch-cell.is-found{background:#c4e6b5;color:#22500e}.wordsearch-cell:focus-visible,.puzzle-audio:focus-visible,.crossword-clue:focus-visible{outline:3px solid #187fab;outline-offset:2px}.wordsearch-words{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto}.wordsearch-words li{display:flex;align-items:center;gap:8px;min-height:42px;background:#fff6df;border:1px solid #c2a66e;border-radius:8px;padding:8px;color:#2b4653;font-size:clamp(14px,1.8cqw,23px);overflow-wrap:anywhere}.wordsearch-words li.is-found{background:#e0f2d7;border-color:#5d983e}.wordsearch-words img{width:38px;height:38px;object-fit:contain}.wordsearch-check{color:#548636;font-weight:800}.wordsearch-words .puzzle-audio{margin-left:auto}
@media(max-width:650px){.activity-player:is([data-game=crossword],[data-game=wordsearch]) #gameStage{padding:30px 10px 45px}.crossword-layout,.wordsearch-layout{grid-template-columns:1fr;gap:12px}.puzzle-scroll{max-height:340px}.crossword-clues,.wordsearch-words{max-height:210px}.crossword-clue{font-size:15px}.crossword-clue .pair-face-picture{height:60px}.wordsearch-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.wordsearch-words li{font-size:14px;min-width:0}.puzzle-instruction,.puzzle-status{font-size:14px}.puzzle-actions .btn{min-height:44px}}
/* These games need a readable grid and clues, including on narrow phones. */
.activity-player.game-shell:is([data-game=crossword],[data-game=wordsearch]):not(:fullscreen){aspect-ratio:auto;height:720px}
.crossword-grid{grid-template-columns:repeat(var(--puzzle-columns),36px);min-width:0;max-width:none}
.crossword-cell,.crossword-block{width:36px;height:36px;min-width:0;aspect-ratio:auto}
.crossword-cell input{min-height:0;font-family:inherit;font-size:22px;font-weight:700;line-height:1.2}
.puzzle-status:not(:empty){width:fit-content;max-width:100%;margin:12px auto;padding:5px 10px;border-radius:7px;background:#fff9e8ed;color:#173d51}
@media(max-width:650px){.activity-player.game-shell:is([data-game=crossword],[data-game=wordsearch]):not(:fullscreen){height:720px}.puzzle-scroll{max-height:300px}.crossword-clues,.wordsearch-words{max-height:180px}.crossword-grid{grid-template-columns:repeat(var(--puzzle-columns),32px)}.crossword-cell,.crossword-block{width:32px;height:32px}.crossword-cell input{font-size:19px}}

/* One picture clue must not force every other word into a scrolling column. */
@media(min-width:651px){
  #activityPlayer[data-game=wordsearch] #gameStage :is(.puzzle-scroll,.wordsearch-words){max-height:420px}
}
@media(max-width:650px){
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-layout .wordsearch-words:has(img){grid-template-columns:repeat(2,minmax(0,1fr));max-height:250px}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li:has(img){grid-column:1 / -1}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li>span:not(.wordsearch-check){min-width:0;line-height:1.3;overflow-wrap:normal}
}

/* Source: css/player-polish.css; sha256: f8b39d5ebbf26f59b834ed4cc5c2b19e2811f080db46cbbaabb729c92c4e4256 */
/* Player: loading screen, music and sound buttons. */
.start-loader{display:none;flex-direction:column;align-items:center;gap:max(8px,1.1cqw);margin:auto;color:#fff;font:700 clamp(13px,1.9cqw,22px)/1.2 "ClassPlay Round",Arial,sans-serif;text-shadow:0 1px 2px #0007}
.activity-player[data-media-loading=true] .start-loader{display:flex}
.activity-player[data-media-loading=true] .start-actions{display:none}
.start-spinner{display:flex;gap:max(6px,1cqw);height:max(26px,4cqw);align-items:flex-end}
.start-spinner i{width:max(11px,2.1cqw);height:max(11px,2.1cqw);border-radius:50%;background:#ffd34d;box-shadow:0 2px 0 #0003;animation:cp-load-bounce 1s ease-in-out infinite}
.start-spinner i:nth-child(2){background:#5ad1a0;animation-delay:.14s}
.start-spinner i:nth-child(3){background:#58b8ff;animation-delay:.28s}
@keyframes cp-load-bounce{0%,80%,100%{transform:translateY(0) scale(.82);opacity:.75}40%{transform:translateY(calc(-1 * max(10px,1.6cqw))) scale(1);opacity:1}}
.start-progress{width:clamp(150px,26cqw,380px);height:max(7px,.85cqw);border-radius:999px;background:#ffffff38;box-shadow:inset 0 1px 2px #0004;overflow:hidden}
.start-progress i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ffd34d,#7fe0a8 60%,#58b8ff);transition:width .3s ease}
.activity-player[data-media-loading=false] .start-actions .launch-button{animation:cp-launch-pop .42s cubic-bezier(.2,1.5,.4,1) both}
.activity-player[data-media-loading=false] .start-actions .launch-button+.launch-button{animation-delay:.07s}
@keyframes cp-launch-pop{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
.player-controls #pMusic{position:relative;display:grid;place-items:center}
.player-controls #pMusic svg{width:2.7cqw;height:2.7cqw}
.player-controls #pMusic[hidden]{display:none}
.player-controls #pMusic.is-off svg{opacity:.75}
@media (max-width:620px){.player-controls #pMusic svg{width:4cqw;height:4cqw}}
@media (prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .start-spinner i,:where(:root:not([data-motion-managed])) .activity-player[data-media-loading=false] .start-actions .launch-button{animation:none}}/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */:where(:root[data-reduce-motion]) .start-spinner i,:where(:root[data-reduce-motion]) .activity-player[data-media-loading=false] .start-actions .launch-button{animation:none}
/* Listener preferences stay within the player in native full screen. */
.player-audio-settings{position:relative;pointer-events:auto;display:grid;align-items:center}
.player-controls #pAudioSettings{display:grid;place-items:center;min-width:32px;min-height:32px}
.player-controls #pAudioSettings svg{width:2.7cqw;height:2.7cqw;min-width:16px;min-height:16px}
.audio-settings-panel{position:absolute;right:0;bottom:calc(100% + max(6px,.6cqw));width:clamp(180px,30cqw,280px);max-width:88cqw;box-sizing:border-box;padding:10px 12px;background:#fff;color:#173b58;border:1px solid #b7c9d7;border-radius:10px;box-shadow:0 5px 20px #0004;font:600 clamp(13px,1.25cqw,14px)/1.25 Arial,sans-serif;text-shadow:none;pointer-events:auto}
.audio-settings-panel[hidden]{display:none}
.audio-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.audio-settings-panel label{display:block;color:inherit;font:inherit;margin:0}
.audio-settings-panel output{font:inherit;font-variant-numeric:tabular-nums}
.audio-settings-panel input[type=range]{display:block;width:100%;height:24px;margin:3px 0 7px;padding:0;accent-color:#187ea6;cursor:pointer}
.audio-settings-panel select{display:block;width:100%;min-height:30px;margin:5px 0 0;padding:4px 6px;border:1px solid #a3b7c8;border-radius:5px;background:#fff;color:#173b58;font:inherit;cursor:pointer}
.audio-settings-panel p{margin:7px 0 0;font-size:12px;font-weight:400}
.audio-settings-panel p:empty{display:none}

/* Controls keep a usable hit area on a phone without changing game-piece motion. */
#activityPlayer .player-controls{gap:4px;align-items:center}
#activityPlayer .player-controls>button,#activityPlayer .player-controls #pAudioSettings{display:grid;place-items:center;flex:0 0 44px;min-width:44px;min-height:44px;width:44px;height:44px;padding:4px;box-sizing:border-box;border-radius:8px;opacity:1}
#activityPlayer .player-controls button>svg{width:clamp(20px,2.8cqw,30px);height:clamp(20px,2.8cqw,30px)}
#activityPlayer .player-controls button:focus-visible{outline:3px solid #ffcf4d;outline-offset:-3px;background:#153b62cc}
#activityPlayer .player-controls button:hover{background:#153b6240}
#activityPlayer .hud .pill,#activityPlayer .activity-clock{font-size:clamp(13px,2cqw,28px)}
#activityPlayer .end-panel{width:min(420px,84cqw);padding:clamp(12px,1.2cqw,20px);font-size:clamp(14px,1.6cqw,21px);overscroll-behavior:contain}
#activityPlayer .end-panel h2{font-size:clamp(16px,1.8cqw,24px);line-height:1.3}
#activityPlayer .end-panel p,#activityPlayer .end-panel .stat-row{font-size:clamp(13px,1.4cqw,19px);line-height:1.4}
#activityPlayer .end-panel>button,#activityPlayer .end-panel>a{min-height:44px;display:flex;align-items:center;justify-content:center}
#activityPlayer .end-summary strong{font-size:clamp(24px,3.4cqw,46px)}
/* A clear next step after playing, with secondary actions kept distinct. */
#activityPlayer .end-panel{box-sizing:border-box;display:flex;flex-direction:column;gap:6px;border-radius:18px}
#activityPlayer #screenEnd .end-panel{border-radius:18px}
#activityPlayer .end-panel h2{font-weight:700;text-transform:none;border-bottom:0;padding:4px 4px 8px}
#activityPlayer .end-summary{padding:10px 4px;gap:20px}
#activityPlayer .end-summary strong{font-weight:700;font-variant-numeric:tabular-nums}
#activityPlayer .end-panel>button,#activityPlayer .end-panel>a{flex-shrink:0;box-sizing:border-box;border:1px solid currentColor;border-radius:9px;padding:10px 14px;font-weight:600;line-height:1.3}
#activityPlayer .end-panel :is(#againBtn,#resumeBtn){background:#ffcf67;color:#193b42;border:1px solid #ffcf67;box-shadow:0 3px 0 #ad782d;margin:5px 0 3px;font-weight:800}
#activityPlayer .end-panel :is(#againBtn,#resumeBtn):hover{background:#ffe09a;color:#193b42}
#activityPlayer .end-panel :is(button,a):focus-visible{outline:3px solid #56bcff;outline-offset:2px}
#activityPlayer .end-panel :is(#viewScoresBtn,#editLink){border-color:transparent;font-size:.9em}
#activityPlayer .end-panel #eNote:empty{display:none}
#activityPlayer .game-intro>button{min-height:44px;font-size:clamp(13px,1.3cqw,18px);padding:8px 14px}
#activityPlayer #gameStage:focus-visible{outline:3px solid #ffcf4d;outline-offset:-4px}
@media(max-width:620px){
  #activityPlayer #pCount{font-size:12px}
  #activityPlayer .end-panel{max-height:calc(100% - 12px)}
}

/* The utilities own a physical footer, outside every template's canvas. A fluid
   player adds that space to its original 16:9 canvas; fixed-height games and
   native full screen reserve it within their available height. */
#activityPlayer.game-shell{--player-utility-height:52px;aspect-ratio:auto;padding-bottom:var(--player-utility-height)}
#activityPlayer.game-shell:not(:fullscreen)::before{content:"";display:block;aspect-ratio:16/9;pointer-events:none}
#activityPlayer #screenPlay{position:absolute;inset:0 0 var(--player-utility-height);width:100%;height:auto}
#activityPlayer :is(.player-start,.player-end,.player-menu){bottom:var(--player-utility-height)}
#activityPlayer .player-controls{inset:auto 0 0;height:var(--player-utility-height);padding:4px;box-sizing:border-box;background:linear-gradient(#19364d,#0d263b);color:#fff}
#activityPlayer .player-controls>span{min-width:0}
#activityPlayer .player-controls #pauseBtn svg path{stroke:#0d263b}
#activityPlayer #pCount{left:52px;right:auto;bottom:15px;translate:none;max-width:calc(100% - 252px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;padding:.28em .5em;box-sizing:border-box}
#activityPlayer .end-panel{max-height:calc(100% - 12px)}

/* Template actions sit above the utilities, with room to tap rather than a
   miniature label squeezed against the canvas edge. */
#activityPlayer:is([data-game=wheel]) #gameStage{padding-bottom:max(6.5%,56px)}
#activityPlayer #gameStage :is(#finishBtn){right:8px;bottom:8px;min-width:64px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 12px;font-size:clamp(13px,1.2cqw,18px);opacity:1}
#activityPlayer[data-game=wheel] #gameStage .gprompt{font-size:clamp(12px,1.6cqw,22px);height:auto;min-height:1.35em;line-height:1.35}
@media(max-width:620px){
  #activityPlayer.game-shell[data-game=unjumble]:not(:fullscreen){height:clamp(480px,65svh,640px)}
}

/* Portrait anagrams keep a picture clue above full-size letter controls. */
@media(max-width:620px){
  #activityPlayer.game-shell[data-game=anagram]:not(:fullscreen){height:clamp(650px,78svh,780px)}
  #activityPlayer[data-game=anagram] #gameStage{display:flex;flex-direction:column;gap:14px;padding:56px 12px 12px;overflow-y:auto;overscroll-behavior:contain}
  #activityPlayer[data-game=anagram] #gameStage .ag-clue{position:static;inset:auto;flex:none;width:100%;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
  #activityPlayer[data-game=anagram] #gameStage:has(.ag-voice:not(.hidden)) .ag-clue{padding-right:48px;box-sizing:border-box}
  #activityPlayer[data-game=anagram] #gameStage .ag-layout{--puzzle-width:100%;display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:18px;width:100%;height:auto;min-height:0}
  #activityPlayer[data-game=anagram] #gameStage .ag-layout.has-picture{--puzzle-width:100%;justify-content:center}
  #activityPlayer[data-game=anagram] #gameStage #agImage{flex:0 1 140px;min-height:85px;width:min(180px,52cqw);height:140px;max-height:140px;object-fit:contain}
  #activityPlayer[data-game=anagram] #gameStage .ag-puzzle{--letter-size:44px;width:100%;gap:10px;flex:none}
  #activityPlayer[data-game=anagram] #gameStage :is(.ag-row,.ag-word-group){gap:6px}
  #activityPlayer[data-game=anagram] #gameStage :is(.ag-tile,.ag-slot){width:44px;height:44px;flex-basis:44px;min-width:44px;min-height:44px;font-size:26px;border-radius:4px}
  #activityPlayer[data-game=anagram] #gameStage .ag-slot.fixed.space{width:20px;min-width:20px;flex-basis:20px}
  #activityPlayer[data-game=anagram] #gameStage .ag-slots{padding:6px;min-height:56px;box-sizing:border-box;gap:6px}
  #activityPlayer[data-game=anagram] #gameStage .ag-next-row{margin:8px 0 0;min-height:44px}
  #activityPlayer[data-game=anagram] #gameStage .ag-next-row .btn{min-width:110px;min-height:44px;padding:10px 18px;font-size:16px}
  #activityPlayer[data-game=anagram] #gameStage .ag-type{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:6px}
  #activityPlayer[data-game=anagram] #gameStage .ag-type.hidden{display:none}
  #activityPlayer[data-game=anagram] #gameStage .ag-type svg{width:28px;height:20px}
  #activityPlayer[data-game=anagram] #gameStage .ag-nav{position:static;inset:auto;flex:none;gap:12px;min-height:44px;font-size:14px}
  #activityPlayer[data-game=anagram] #gameStage .ag-nav button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;font-size:24px;border-radius:6px}
  #activityPlayer[data-game=anagram] #gameStage .ag-voice{top:50px;right:12px;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px}
}

/* Source: css/game-skin.css; sha256: c557162d696747f3ab0c5f558b10e6da94ac94ea158e5d0e1552abf60bbe75b3 */
/* ClassPlay game skin: one look for every template, coloured by the visual style.
   Depth, motion and feedback for pieces, bold HUD badges, clear buttons, moving scenery,
   and brighter start and end screens. Loaded after every template stylesheet. */

.activity-player {
  --sk-edge: var(--tw-d, #1676b8);
  --sk-accent: var(--tw-c, #2195db);
  --sk-depth: clamp(3px, .42cqw, 7px);
  --sk-radius: clamp(6px, .85cqw, 14px);
  --sk-good: #2fb36a; --sk-good-edge: #1c7f45;
  --sk-bad: #e5484d; --sk-bad-edge: #a52a2f;
  --sk-hud: #0d2333d9; --sk-hud-ink: #fff;
  --sk-font-display: "ClassPlay Display", "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif;
}


/* ---------- HUD badges: timer, score, lives, progress ---------- */
.activity-player .activity-clock,
.activity-player #pScore,
.activity-player #pLives:not(.hidden),
.activity-player #pCount {
  align-items: center; justify-content: center; gap: .45em; width: max-content; min-width: 0;
  padding: .28em .8em; border-radius: 999px; background: var(--sk-hud); color: var(--sk-hud-ink) !important;
  font: 800 clamp(13px, 1.75cqw, 24px)/1.15 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: .02em;
  box-shadow: 0 .25cqw 0 #0005, inset 0 1px 0 #ffffff26; text-shadow: none; -webkit-text-stroke: 0;
}
.activity-player .activity-clock, .activity-player #pScore, .activity-player #pLives:not(.hidden) { display: inline-flex; }
.activity-player #pCount:empty { visibility: hidden; }
/* Progress sits beside the pause button so it never covers a template's own buttons. */
.activity-player #pCount { left: max(4.6cqw, 50px); right: auto; bottom: .75cqw; }
.activity-player[data-game=speakingcards] #pCount { left: 50%; translate: -50% 0; }
.activity-player .activity-clock { top: .7cqw; left: .9cqw; }
#activityPlayer:has(#pLives:not(.hidden)) .activity-clock { left: 13cqw; }
.activity-player .activity-clock::before { content: ""; width: .95em; height: .95em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3Cpath d='M12 8.5V13l3 2M9.5 2.5h5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3Cpath d='M12 8.5V13l3 2M9.5 2.5h5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.activity-player .activity-clock.cp-urgent { background: #ae2530; animation: cp-urgent .9s ease-in-out infinite; }
@keyframes cp-urgent { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
.activity-player #pScore { top: .7cqw; right: .9cqw; }
.activity-player #pScore.cp-bump { animation: cp-bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cp-bump { 0% { scale: 1; } 40% { scale: 1.32; background: var(--sk-good); } 100% { scale: 1; } }
.activity-player[data-phase=start] .activity-clock { display: none; }

/* ---------- Buttons inside the game ---------- */
.activity-player #gameStage .btn {
  border-radius: 999px; font-weight: 800; letter-spacing: .01em; text-shadow: none;
  box-shadow: 0 var(--sk-depth) 0 #00000040, 0 calc(var(--sk-depth) * 1.6) calc(var(--sk-depth) * 2.4) #0000002e;
  transition: translate .12s ease, box-shadow .12s ease, filter .15s ease, opacity .15s ease;
}
.activity-player #gameStage .btn:not(:disabled):hover { translate: 0 -2px; filter: brightness(1.06); }
.activity-player #gameStage .btn:not(:disabled):active { translate: 0 var(--sk-depth); box-shadow: 0 0 0 #0000, 0 1px 2px #0003; }
.activity-player #gameStage .btn.green {
  background: linear-gradient(#43c97b, #2aa960); color: #fff; border: 0;
  box-shadow: 0 var(--sk-depth) 0 #187a41, 0 calc(var(--sk-depth) * 1.8) calc(var(--sk-depth) * 2.6) #0003;
}
.activity-player #gameStage .btn.green:disabled { background: linear-gradient(#9ccfb1, #87bfa0); color: #ffffffe6; box-shadow: 0 var(--sk-depth) 0 #6e9f84; opacity: .85; cursor: not-allowed; }
.activity-player #gameStage .btn.lg:not(.green):not(.ghost) { background: linear-gradient(color-mix(in srgb, var(--sk-accent) 88%, #fff), var(--sk-accent)); color: #fff; border: 0; box-shadow: 0 var(--sk-depth) 0 var(--sk-edge), 0 calc(var(--sk-depth) * 1.8) calc(var(--sk-depth) * 2.6) #0003; }
.activity-player #gameStage .btn.ghost { background: #0f2a3dcc; color: #fff; border: 1px solid #ffffff40; box-shadow: 0 calc(var(--sk-depth) * .7) 0 #0006; }

/* ---------- Pieces: depth, rounded corners, bold text, lift on hover ---------- */
.activity-player #gameStage :is(.ag-tile, .sort-card, .matchup-answer, .unjumble-word, .sentence-word, .diagram-label, .quiz-choice, .rank-row, .options .opt, .gs-opt) {
  border-radius: var(--sk-radius);
  transition: translate .14s ease, box-shadow .14s ease, filter .14s ease, background-color .2s ease;
}
.activity-player #gameStage :is(.ag-tile, .sort-card, .matchup-answer, .unjumble-word, .sentence-word, .diagram-label, .quiz-choice, .options .opt) {
  box-shadow: 0 var(--sk-depth) 0 color-mix(in srgb, var(--sk-edge) 82%, #000), 0 calc(var(--sk-depth) * 1.6) calc(var(--sk-depth) * 2.2) #0000002a, inset 0 1px 0 #ffffff80;
  font-weight: 700;
}
.activity-player #gameStage :is(.ag-tile, .sort-card, .matchup-answer, .unjumble-word, .sentence-word, .diagram-label, .quiz-choice, .options .opt, .gs-opt):not(:disabled):not(.is-correct):not(.is-wrong):not(.correct):not(.wrong):hover {
  translate: 0 -3px; filter: brightness(1.04);
}
.activity-player #gameStage :is(.ag-tile, .sort-card, .matchup-answer, .unjumble-word, .sentence-word, .diagram-label, .quiz-choice, .options .opt, .gs-opt):not(:disabled):active {
  translate: 0 calc(var(--sk-depth) * .7);
}
/* Lifted while dragged; ringed while chosen; glowing where it can land. */
.activity-player #gameStage :is(.is-dragging, .dragging, [class*=drag-ghost]) {
  scale: 1.06; rotate: -2deg; filter: drop-shadow(0 1.2cqw 1.2cqw #0005); z-index: 50; transition: none;
}
.activity-player #gameStage :is(.is-selected, .pressed):not(.is-correct):not(.is-wrong) {
  outline: max(3px, .32cqw) solid #ffd23f; outline-offset: max(2px, .18cqw); translate: 0 -3px;
}
.activity-player #gameStage :is(.is-drop-target, .over) {
  outline: max(3px, .3cqw) dashed #fff; outline-offset: max(2px, .2cqw); box-shadow: 0 0 0 max(5px, .55cqw) color-mix(in srgb, var(--sk-accent) 55%, transparent), 0 0 2cqw color-mix(in srgb, var(--sk-accent) 70%, transparent);
}
/* Drop wells look like slots a piece fits into. */
.activity-player #gameStage :is(.ag-slot:not(.filled), .unjumble-slot:not(.is-filled), .sentence-gap:not(.is-filled), .sort-empty-slot, .matchup-target:empty) {
  border-radius: var(--sk-radius); box-shadow: inset 0 .3cqw .5cqw #00000026;
}
/* Right and wrong states keep their colours and gain a ring. */
.activity-player #gameStage :is(.ag-tile, .ag-slot, .sort-card, .matchup-answer, .matchup-target, .unjumble-word, .unjumble-slot, .sentence-word, .sentence-gap, .diagram-label, .diagram-target, .quiz-choice, .rank-row, .options .opt, .gs-opt):is(.is-correct, .correct, .right, .yes, .is-matched) { box-shadow: 0 var(--sk-depth) 0 var(--sk-good-edge), 0 0 0 max(3px, .3cqw) var(--sk-good) !important; }
.activity-player #gameStage :is(.ag-tile, .ag-slot, .sort-card, .matchup-answer, .matchup-target, .unjumble-word, .unjumble-slot, .sentence-word, .sentence-gap, .diagram-label, .diagram-target, .quiz-choice, .rank-row, .options .opt, .gs-opt):is(.is-wrong, .wrong, .no, .is-mismatch):not(.ag-shake) { box-shadow: 0 var(--sk-depth) 0 var(--sk-bad-edge), 0 0 0 max(3px, .3cqw) var(--sk-bad) !important; }

/* A piece that turns right or wrong changes colour at once: a fading background would leave
   the new dark text on the old dark tile for a moment. */
/* (:not(#no-id) only lifts this above the piece rule, whose :is() list counts as three classes.) */
.activity-player #gameStage :is(.is-correct, .is-wrong, .correct, .wrong, .right, .yes, .no, .is-matched, .is-mismatch):not(#no-id) { transition-property: translate, box-shadow, filter; }

/* ---------- Motion: arrive, celebrate, shake ---------- */
/* A word placed in a Sentence builder space keeps the weight it had in the bank. */
.activity-player #gameStage .unjumble-slot > [data-word] { font-weight: 700; }
/* Dragging a word or card never selects its text (the blue highlight a browser draws). */
.activity-player #gameStage { -webkit-user-select: none; user-select: none; }
.activity-player #gameStage :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
/* A screen with room to spare grows to fill the stage (game-fx.js chooses --cp-fill). */
.activity-player #gameStage[data-cp-fill] > .cp-fill-zoom { zoom: var(--cp-fill, 1); }
/* The small instruction line keeps its size, so it stays clear of the timer and score badges. */
.activity-player #gameStage[data-cp-fill] :is(.unjumble-instruction, .sequence-instruction, .puzzle-instruction) { zoom: calc(1 / var(--cp-fill, 1)); }
/* A piece flying into a box that clips it travels as a copy above the game (game-fx.js). */
.activity-player #gameStage .cp-glide-layer { position: absolute; inset: 0; z-index: 70; pointer-events: none; overflow: visible; contain: layout; }
.activity-player #gameStage .cp-glide-hidden { visibility: hidden !important; }
.cp-enter { animation: cp-enter .46s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: var(--cp-delay, 0ms); }
.cp-enter-panel { animation: cp-enter-panel .5s cubic-bezier(.2, .8, .3, 1.1) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes cp-enter { 0% { opacity: 0; translate: 0 1.6cqw; scale: .8; } 65% { opacity: 1; translate: 0 -.3cqw; scale: 1.04; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes cp-enter-panel { 0% { opacity: 0; translate: 0 -1.4cqw; scale: .96; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
.activity-player #gameStage .cp-good { animation: cp-good .55s cubic-bezier(.3, 1.7, .5, 1); }
.activity-player #gameStage .cp-bad { animation: cp-bad .5s ease; }
@keyframes cp-good { 0% { scale: 1; } 35% { scale: 1.12; } 100% { scale: 1; } }
@keyframes cp-bad { 0%, 100% { translate: 0 0; } 15% { translate: -1cqw 0; } 35% { translate: .9cqw 0; } 55% { translate: -.6cqw 0; } 75% { translate: .35cqw 0; } }
.cp-burst { position: absolute; z-index: 60; width: 0; height: 0; pointer-events: none; }
.cp-burst i { position: absolute; left: 0; top: 0; animation: cp-spark var(--d) cubic-bezier(.15, .7, .3, 1) forwards; }
.cp-burst .cp-spark-dot { width: max(7px, .7cqw); height: max(7px, .7cqw); margin: -.35cqw; border-radius: 50%; background: #ffd84a; box-shadow: 0 0 .6cqw #fff6; }
.cp-burst .cp-spark-star { width: max(14px, 1.4cqw); height: max(14px, 1.4cqw); margin: -.7cqw; background: #fff4a8;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.cp-burst-good i:nth-child(3n+2) { background: #7ef0b0; }
.cp-burst-bad i { background: #ff8a8a !important; clip-path: none; border-radius: 50%; width: max(5px, .5cqw); height: max(5px, .5cqw); }
@keyframes cp-spark { 0% { translate: 0 0; scale: .3; opacity: 1; rotate: 0deg; } 70% { opacity: 1; } 100% { translate: var(--dx) var(--dy); scale: 1; opacity: 0; rotate: var(--r); } }

/* ---------- Start screen: the style's scenery around a bright title card ---------- */
.activity-player .start-artwork { opacity: 1; }
#activityPlayer .start-content { justify-content: center; padding: 2.5cqw 4cqw 5.5cqw; background: radial-gradient(ellipse at 50% 50%, #0000 35%, #00000052 100%); text-shadow: none; }
#activityPlayer .start-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; width: min(74%, 64cqw); margin: auto; padding: 2.3cqw 3cqw 2.5cqw;
  border-radius: 2.2cqw; background: #fffffff0; color: #1d3a50; box-shadow: 0 .8cqw 0 #00000030, 0 2cqw 4cqw #0000004d; animation: cp-card-in .55s cubic-bezier(.2, 1.25, .4, 1) both; }
@keyframes cp-card-in { from { opacity: 0; translate: 0 -2cqw; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
#activityPlayer .start-card .start-template { margin: 0; padding: .32em 1.1em; border-radius: 999px; background: var(--sk-accent); color: #fff; font: 800 clamp(11px, 1.5cqw, 20px)/1.2 "ClassPlay Round", sans-serif; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 .22cqw 0 var(--sk-edge); }
#activityPlayer .start-card h1 { display: block; max-width: 100%; margin: 0; padding: 0; background: none; box-shadow: none; color: #1d3a50; font-family: var(--sk-font-display); font-weight: 800; font-size: clamp(20px, 4.3cqw, 58px); line-height: 1.08; text-shadow: none; text-wrap: balance; overflow-wrap: anywhere; }
#activityPlayer .start-card .start-actions { margin: .5cqw 0 .2cqw; gap: 1.8cqw; }
#activityPlayer .start-card #sSub { max-width: 100%; margin: 0; padding: 0; background: none; color: #46606f; font-size: clamp(12px, 1.6cqw, 21px); line-height: 1.35; font-weight: 600; text-shadow: none; }
#activityPlayer .start-card .start-loader { margin: .6cqw 0; color: #1d3a50; text-shadow: none; }
#activityPlayer .start-card .start-progress { background: #1d3a501f; box-shadow: inset 0 1px 2px #0002; }
#activityPlayer .start-card .start-loading { margin: 0; background: #fde7e7; color: #8a2b2b; }
#activityPlayer .start-card .launch-button { width: 11.5cqw; height: 11.5cqw; min-width: 64px; min-height: 64px; border-radius: 1.6cqw; border: max(2px, .22cqw) solid #d9e5ec; background: linear-gradient(#ffffff, #e9f2f8); color: #1d3a50;
  font: 800 clamp(12px, 1.7cqw, 22px)/1.1 "ClassPlay Round", sans-serif; box-shadow: 0 .55cqw 0 #b8cad6, 0 1cqw 1.6cqw #0000002e; transition: translate .15s ease, box-shadow .15s ease; text-shadow: none; }
#activityPlayer .start-card .launch-button span { color: var(--sk-accent); }
#activityPlayer .start-card #startBtn { background: linear-gradient(#ffd75e, #ffb627); border-color: #ffe9a6; color: #5a3500; box-shadow: 0 .55cqw 0 #d98a00, 0 1cqw 1.6cqw #0000002e; }
#activityPlayer .start-card #startBtn span { color: #fff; filter: drop-shadow(0 .2cqw 0 #c27800); }
#activityPlayer .start-card .launch-button:not(:disabled):hover { translate: 0 -.3cqw; }
#activityPlayer .start-card .launch-button:not(:disabled):active { translate: 0 .45cqw; box-shadow: 0 .1cqw 0 #b8cad6; }
#activityPlayer[data-media-loading=false] .start-card #startBtn { animation: cp-launch-pop .42s cubic-bezier(.2, 1.5, .4, 1) .07s both, sk-play-glow 2.4s ease-in-out .6s infinite; }
@keyframes sk-play-glow { 0%, 100% { box-shadow: 0 .55cqw 0 #d98a00, 0 1cqw 1.6cqw #0000002e, 0 0 0 0 #ffbf3300; } 50% { box-shadow: 0 .55cqw 0 #d98a00, 0 1cqw 1.6cqw #0000002e, 0 0 0 1cqw #ffbf3340; } }
@media (max-width: 620px) { #activityPlayer .start-card { width: 88%; padding: 2cqw 2.4cqw; gap: 1cqw; } #activityPlayer .start-card #sSub { display: none; } }

/* ---------- End screen: stars and a counting score ---------- */
.activity-player .end-stars { display: flex; justify-content: center; gap: .8cqw; margin: .2cqw 0 .6cqw; }
.activity-player .end-stars i { width: clamp(26px, 4.2cqw, 58px); aspect-ratio: 1; background: #ffffff2e;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.activity-player .end-stars i.on { background: linear-gradient(#ffe680, #ffb21f); animation: cp-star-in .5s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--i) * .22s + .25s); }
.activity-player .end-stars i:nth-child(2) { translate: 0 -.6cqw; scale: 1.15; }
@keyframes cp-star-in { 0% { scale: 0; rotate: -60deg; opacity: 0; } 100% { opacity: 1; } }
.activity-player #screenEnd .end-panel { animation: cp-panel-in .45s cubic-bezier(.2, 1.2, .4, 1) both; border-radius: 1.2cqw; }
@keyframes cp-panel-in { from { opacity: 0; translate: 0 2cqw; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
   :where(:root:not([data-motion-managed])) .cp-burst { display: none; }
  :where(:root:not([data-motion-managed])) .cp-enter, :where(:root:not([data-motion-managed])) .cp-enter-panel, :where(:root:not([data-motion-managed])) .activity-player #gameStage .cp-good, :where(:root:not([data-motion-managed])) .activity-player #gameStage .cp-bad, :where(:root:not([data-motion-managed])) .activity-player #pScore.cp-bump,
  :where(:root:not([data-motion-managed])) .activity-player .activity-clock.cp-urgent, :where(:root:not([data-motion-managed])) .activity-player .end-stars i.on, :where(:root:not([data-motion-managed])) .activity-player #screenEnd .end-panel, :where(:root:not([data-motion-managed])) #activityPlayer[data-media-loading=false] .start-card #startBtn, :where(:root:not([data-motion-managed])) #activityPlayer .start-card { animation: none; }
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
 :where(:root[data-reduce-motion]) .cp-burst { display: none; }
:where(:root[data-reduce-motion]) .cp-enter, :where(:root[data-reduce-motion]) .cp-enter-panel, :where(:root[data-reduce-motion]) .activity-player #gameStage .cp-good, :where(:root[data-reduce-motion]) .activity-player #gameStage .cp-bad, :where(:root[data-reduce-motion]) .activity-player #pScore.cp-bump,
:where(:root[data-reduce-motion]) .activity-player .activity-clock.cp-urgent, :where(:root[data-reduce-motion]) .activity-player .end-stars i.on, :where(:root[data-reduce-motion]) .activity-player #screenEnd .end-panel, :where(:root[data-reduce-motion]) #activityPlayer[data-media-loading=false] .start-card #startBtn, :where(:root[data-reduce-motion]) #activityPlayer .start-card { animation: none; }

/* ---------- Template touches ---------- */
/* Picture reveal: the countdown as a badge (the bubble wrap's inks are in css/imagequiz.css). */
.activity-player[data-game=imagequiz] #gameStage .iq-countdown { top: .7cqw; left: .9cqw; display: inline-flex; padding: .28em .8em; border-radius: 999px; background: var(--sk-hud); color: #fff; font: 800 clamp(13px, 1.75cqw, 24px)/1.15 "ClassPlay Round", sans-serif; box-shadow: 0 .25cqw 0 #0005; }
.activity-player[data-game=imagequiz] #gameStage .iq-countdown:empty { display: none; }
.activity-player[data-game=imagequiz] #gameStage .pic { border-radius: 1cqw; overflow: hidden; box-shadow: 0 .5cqw 0 #00000033, 0 0 0 .35cqw #ffffffd9; }

/* Sequence sort: the cards' depth and number badges (their board is css/rankorder.css). */
.activity-player[data-game=rankorder] #gameStage .rank-row { font-weight: 700; box-shadow: 0 var(--sk-depth) 0 color-mix(in srgb, var(--sk-edge) 75%, #000), 0 calc(var(--sk-depth) * 1.5) calc(var(--sk-depth) * 2) #00000026; }
.activity-player[data-game=rankorder] #gameStage .rank-label { background: var(--sk-accent); color: #fff; box-shadow: 0 .18cqw 0 var(--sk-edge); }
.activity-player:is([data-game=rankorder], [data-game=completesentence]) #gameStage .sequence-actions { padding-bottom: 1cqw; }

/* Gap fill: its picture's corners (its board, type and gaps are css/gapfill.css). */
.activity-player[data-game=completesentence] #gameStage .sentence-gap { border-radius: var(--sk-radius); }
.activity-player[data-game=completesentence] #gameStage .sentence-picture { border-radius: 1cqw; }
.activity-player[data-game=completesentence] #gameStage .sentence-picture img { border-radius: 1cqw; box-shadow: 0 .45cqw 0 #00000026; }

/* Category sort: bold cards, trays with a coloured title bar. */
.activity-player[data-game=groupsort] #gameStage .sort-card:not(.has-picture) { font-size: clamp(14px, 2.4cqw, 34px); font-weight: 800; }
/* Sentence cards (js/games/groupsort.js): wide and short, one shared size that keeps the deck in view. */
.activity-player[data-game=groupsort] #gameStage .sort-layout[data-wordy=true] .sort-card:not(.has-picture) { font-size: var(--sort-text, clamp(13px, 1.6cqw, 21px)); font-weight: 700; line-height: 1.2; padding: .5cqw .7cqw; }
.activity-player[data-game=groupsort] #gameStage .sort-layout[data-wordy=true] .sort-empty-slot { height: calc(var(--sort-card-width) * .6); min-height: calc(var(--sort-card-width) * .6); }
.activity-player[data-game=groupsort] #gameStage .sort-col { border-radius: 1.2cqw; background: color-mix(in srgb, var(--style-surface, #fff) 38%, transparent); box-shadow: 0 .45cqw 0 #00000030, inset 0 0 0 .2cqw color-mix(in srgb, var(--style-surface, #fff) 75%, transparent); }
.activity-player[data-game=groupsort] #gameStage .sort-heading { margin: 0 0 .8cqw; padding: .55cqw 1cqw; min-height: 4cqw; background: linear-gradient(color-mix(in srgb, var(--sk-accent) 88%, #fff), var(--sk-accent)); box-shadow: 0 .3cqw 0 var(--sk-edge); }
.activity-player[data-game=groupsort] #gameStage .sort-heading h4 { color: #fff; font-weight: 800; text-decoration: none; text-shadow: 0 .12cqw 0 #0003; border: 0; }
.activity-player[data-game=groupsort] #gameStage .pile { padding: 0 .8cqw .8cqw; }
.activity-player[data-game=groupsort] #gameStage .sort-empty-slot { border: .16cqw dashed color-mix(in srgb, var(--style-surface, #fff) 80%, #0000); background: color-mix(in srgb, var(--style-surface, #fff) 22%, transparent); border-radius: var(--sk-radius); box-shadow: inset 0 .2cqw .4cqw #0000001f; }
.activity-player[data-game=groupsort] #gameStage .sort-deck { border-radius: 1.2cqw; border: 0; background: color-mix(in srgb, var(--style-surface, #fff) 30%, transparent); box-shadow: 0 .45cqw 0 #00000030, inset 0 0 0 .2cqw color-mix(in srgb, var(--style-surface, #fff) 70%, transparent); padding: .8cqw; }
.activity-player[data-game=groupsort] #gameStage .sort-col.over { background: color-mix(in srgb, var(--sk-accent) 30%, transparent); }

/* Quiz and gameshow: answer letters as round badges. */
.activity-player[data-game=quiz] #gameStage .quiz-letter { border-radius: 50%; font-weight: 800; }

/* Anagram: letter tiles with a printed face, the clue on a label. */
.activity-player[data-game=anagram] #gameStage :is(.ag-tile:not(.used), .ag-slot.filled:not(.right):not(.wrong):not(.fixed)) {
  background: linear-gradient(#ffffff, var(--style-surface, #fffef5)); color: var(--style-ink, #24475e); border: max(1px, .18cqw) solid color-mix(in srgb, var(--sk-edge) 40%, #fff);
  box-shadow: 0 var(--sk-depth) 0 color-mix(in srgb, var(--sk-edge) 85%, #000), 0 calc(var(--sk-depth) * 1.6) calc(var(--sk-depth) * 2.2) #0000002e, inset 0 -.25cqw 0 #00000010;
  font-weight: 800; border-radius: var(--sk-radius);
}
.activity-player[data-game=anagram] #gameStage .ag-slots { border: 0; border-radius: 1.2cqw; background: #ffffffd9; box-shadow: inset 0 .25cqw .5cqw #00000020, 0 .35cqw 0 #00000026; }
.activity-player[data-game=anagram] #gameStage .ag-slot:not(.filled)::after { border-radius: 999px; background: color-mix(in srgb, var(--sk-edge) 30%, #e2e2e2); }
.activity-player[data-game=anagram] #gameStage .ag-clue { left: 0; right: 0; margin: 0 auto; translate: none; width: max-content; max-width: 82%; padding: .35em 1.1em; border-radius: 999px; background: #ffffffe6; color: var(--style-ink, #24475e); font-weight: 800; font-size: clamp(14px, 2.4cqw, 32px); box-shadow: 0 .3cqw 0 #00000026; text-shadow: none; }
.activity-player[data-game=anagram] #gameStage .ag-clue:empty { display: none; }
.activity-player[data-game=anagram] #gameStage .ag-next-row .btn { font-size: clamp(14px, 1.9cqw, 25px); padding: .55cqw 2.4cqw; min-height: 0; }

/* Quiz: the question sits on a card so it reads over any scenery. */
.activity-player[data-game=quiz] #gameStage .quiz-question { width: auto; max-width: 92%; margin-left: auto; margin-right: auto; padding: .7cqw 2cqw; border-radius: 1.2cqw; background: #ffffffeb; color: var(--style-ink, #24475e); box-shadow: 0 .4cqw 0 #00000026; text-shadow: none; }
.activity-player[data-game=quiz] #gameStage .quiz-question * { color: inherit; text-shadow: none; }
.activity-player[data-game=quiz] #gameStage .quiz-choice { font-size: clamp(15px, 2.4cqw, 32px); }

/* Lucky wheel: a bigger Spin button. */
.activity-player[data-game=wheel] #gameStage .next-row .btn.lg { font-size: clamp(15px, 2.1cqw, 28px); padding: .7cqw 3.2cqw; }

/* Small players: lighter badges, and the quiz question clears them. */
@container (max-width: 640px) {
  .activity-player .activity-clock, .activity-player #pScore, .activity-player #pLives:not(.hidden), .activity-player #pCount, .activity-player[data-game=imagequiz] #gameStage .iq-countdown { font-size: 11px; padding: .18em .55em; }
  .activity-player[data-game=quiz] #gameStage .quiz-question { margin-top: 22px; }
}

/* Player buttons stay visible over light and dark scenery alike. */
.activity-player .player-controls button { filter: drop-shadow(0 .1cqw .16cqw #000a); }
.activity-player .player-controls #pauseBtn { filter: none; }

/* Status lines under the game read on any scenery. */
.activity-player #gameStage :is(.pair-game-status, .sequence-status, .unjumble-status, .diagram-status, .puzzle-status):not(:empty) { display: inline-block; width: auto; max-width: 70%; padding: .3em .9em; border-radius: 999px; background: #0d2333b8; color: #fff !important; text-shadow: none; }

/* Source: css/theme-materials.css; sha256: 31f1767979a521296f9939ef91db89ca00a816b289c77e1a0b796567d9f923a1 */
/* Buttons and panels the games share in every learning world: the pause menu, Quiz show
   lifelines, quiz skip and next, the Pick and talk read-aloud and the What's inside? reveal. */
.activity-player[data-world-kit] #playerMenu .end-panel>button:not(#resumeBtn){background:var(--tw-d);color:#fff;border-color:var(--tw-d);box-shadow:0 3px 0 color-mix(in srgb,var(--tw-d) 65%,#000)}
.activity-player[data-world-kit] #playerMenu .end-panel>button:not(#resumeBtn):focus-visible{outline:3px solid var(--style-ink);outline-offset:3px}
.activity-player[data-world-kit] #gameStage .gs-life{min-height:44px;min-width:44px;background:var(--tw-d);color:#fff;border:2px solid var(--tw-c);border-radius:12px;box-shadow:0 2px 0 #17372d22;font-family:inherit;font-weight:700;opacity:1;text-shadow:none}
.activity-player[data-world-kit] #gameStage .gs-life:disabled{background:var(--style-surface);color:var(--style-ink);border-style:dashed;border-color:var(--tw-c);box-shadow:none;text-decoration:line-through;opacity:1}
.activity-player[data-world-kit] #gameStage .gs-life:focus-visible{outline:3px solid var(--style-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--style-surface)}
.activity-player[data-world-kit] #gameStage :is(.quiz-skip,.quiz-next){background:var(--tw-d);color:#fff;border:2px solid var(--tw-d);border-radius:10px;box-shadow:0 2px 0 #17372d20;font-family:inherit;opacity:1}
.activity-player[data-world-kit] #gameStage :is(.quiz-skip,.quiz-next):disabled{background:var(--style-surface);color:var(--style-ink);border-color:var(--tw-c);border-style:dashed;box-shadow:none}
.activity-player[data-world-kit] #gameStage :is(.quiz-skip,.quiz-next):focus-visible{outline:3px solid var(--style-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--style-surface)}

/* Source: css/quality.css; sha256: 22836a20ae40dcdc07d2e7ba25afa14f7d7aff456820dc5482c16f082fb84406 */
/* Phones must not enlarge text on their own: sizes stay the same on every page and orientation. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* ClassPlay's teacher surfaces. Game scenery and authored content keep their own styles. */
:root {
  --cp-ink: #173b43;
  --cp-muted: #526976;
  --cp-action: #155f69;
  --cp-action-hover: #114e57;
  --cp-teal: #087b72;
  --cp-line: #dfe6dc;
  --cp-paper: #fff;
  --cp-radius: 14px;
  --cp-shadow: 0 4px 20px #163d5010;
}
body.site-page:not(.welcome-page), body.resource-page {
  background: radial-gradient(ellipse at 8% 0%, #e7f4ef 0, transparent 46%), #f7f6ef;
  color: var(--cp-ink);
  font-family: "ClassPlay Round", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.site-page .site-header, .resource-page .site-header { background: #ffffffed; border-bottom: 1px solid var(--cp-line); }
.site-header .site-header-inner { box-sizing: border-box; min-height: 72px; gap: 22px; padding: 10px 28px; }
.site-header .site-brand { color: var(--cp-ink); gap: 9px; font-size: 26px; letter-spacing: -.9px; }
.site-logo { position: relative; display: block; width: 33px; height: 33px; flex: 0 0 33px; transform: none; }
.site-logo i { position: absolute; display: block; width: 17px; height: 27px; left: 5px; bottom: 3px; opacity: 1; border-radius: 5px 5px 2px 5px; transform-origin: 8px 24px; background: var(--cp-teal); }
.site-logo i:nth-child(1) { transform: rotate(-30deg); background: #a6d9c6; }
.site-logo i:nth-child(2) { transform: rotate(-9deg); background: #eeb697; }
.site-logo i:nth-child(3) { transform: rotate(14deg); background: #247d74; }
.site-logo i:nth-child(4) { width: 8px; height: 9px; left: 12px; bottom: 13px; border-radius: 0; background: #f2c861; clip-path: polygon(0 0,100% 50%,0 100%); transform: rotate(14deg); }
.site-header .site-nav { align-items: center; gap: 8px; }
.site-header .site-nav a, .resource-page .site-header nav a {
  box-sizing: border-box; min-height: 44px; padding: 10px 13px; border: 0; border-radius: 9px;
  font: 700 14px/1.35 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--cp-muted); white-space: nowrap;
}
.site-header .site-nav a:hover { color: var(--cp-action); background: #eef3e8; }
.site-header .site-nav a[aria-current] { color: var(--cp-action); background: #e6efe9; box-shadow: inset 0 -2px #155f69; }
.site-page .site-button, .resource-page .site-button {
  min-height: 44px; padding: 10px 16px; border-radius: 9px; border-color: #c5d6d3;
  background: #fff; color: var(--cp-ink); font-size: 14px; font-weight: 700; line-height: 1.3;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.site-page .site-button:hover:not(:disabled), .resource-page .site-button:hover:not(:disabled) { background: #eef3e8; border-color: #8fb3a6; }
.site-page:not(.welcome-page) .site-button.primary, .resource-page .site-button.primary,
.resource-page .resource-primary, .resource-page .site-header .site-create {
  color: #fff !important; background: var(--cp-action) !important; border-color: var(--cp-action) !important;
  border-radius: 9px; box-shadow: 0 3px 8px #155f691c;
}
.site-page:not(.welcome-page) .site-button.primary:hover:not(:disabled), .resource-page .site-button.primary:hover:not(:disabled),
.resource-page .resource-primary:hover:not(:disabled) { background: var(--cp-action-hover) !important; border-color: var(--cp-action-hover) !important; }
.site-page :is(button, a, input, select, textarea, summary):focus-visible,
.resource-page :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #155f69; outline-offset: 3px; }
.site-page .site-input, .site-page .site-select { height: 44px; border-color: #c5d6d3; border-radius: 9px; font-size: 15px; }
.site-page .site-input::placeholder { color: #637581; opacity: 1; }
.site-page .site-input:focus, .site-page .site-select:focus { border-color: var(--cp-action); box-shadow: 0 0 0 3px #155f6918; }
.cp-account-nav .cp-account-button, .cp-account-nav .cp-account-signin { min-height: 44px; border-radius: 10px; font-size: 14px; }
.cp-account-nav .cp-account-avatar { border-radius: 8px; background: var(--cp-action); }
.cp-account-nav .cp-account-menu, .lib-context-menu { border-color: var(--cp-line); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px #15374724; }
.cp-account-nav .cp-account-menu button, .lib-context-menu button { min-height: 44px; border-radius: 7px; }
.site-header :is(.cp-language-switch, .account-language, .admin-language) { border-radius: 9px; border-color: #c5d6d3; }
.site-header :is(.cp-language-switch, .account-language, .admin-language) button { min-height: 40px; min-width: 42px; font-size: 13px; }
.site-header :is(.cp-language-switch, .account-language, .admin-language) button[aria-pressed=true] { background: var(--cp-action); color: #fff; }
.site-page .site-footer { color: var(--cp-muted); font-size: 12px; padding: 24px 20px 28px; }
.site-page .site-dialog { border: 1px solid var(--cp-line); border-radius: 18px; padding: 28px; }
.site-page .site-dialog h2 { color: var(--cp-ink); font-weight: 800; }
.site-page .site-dialog::backdrop { background: #102d4963; }
.site-page .cloud-status { border-radius: 12px; font-size: 14px; padding: 12px 16px; }
.cloud-status .cloud-action { min-height: 40px; padding: 8px 12px; border-radius: 7px; }

/* A calm, legible workbench with the owner's folder colours preserved. */
.activity-library-page .site-main { margin-top: 28px; max-width: 1280px; }
.activity-library-page .library-page .library-heading { border-radius: var(--cp-radius); padding: 26px 28px; box-shadow: var(--cp-shadow); align-items: center; }
.activity-library-page .library-page h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; color: var(--cp-ink); letter-spacing: -.7px; }
.activity-library-page .library-page .library-tools .site-button { min-height: 44px; border-radius: 9px; border-color: #c5d6d3; color: var(--cp-ink); }
.activity-library-page .library-page .library-search .site-input { height: 44px; border-radius: 9px 0 0 9px; font-size: 15px; }
.activity-library-page .library-page .library-search .site-button { border-radius: 0 9px 9px 0; }
.activity-library-page .library-page .library-view-controls .site-button { min-width: 44px; }
.activity-library-page .library-page .library-view-controls .site-button:first-child { border-radius: 9px 0 0 9px; }
.activity-library-page .library-page .library-view-controls .site-button:last-child { border-radius: 0 9px 9px 0; }
.activity-library-page .library-page .library-view-controls .site-button[aria-pressed=true] { background: #e6efe9; color: var(--cp-action); box-shadow: inset 0 -3px var(--cp-action); }
.activity-library-page .library-page .library-body { margin-top: 18px; padding: 20px 28px 32px; border-radius: var(--cp-radius); box-shadow: var(--cp-shadow); }
.activity-library-page .library-page .library-order-row { gap: 16px; flex-wrap: wrap; font-size: 14px; padding-bottom: 16px; }
.activity-library-page .library-page .library-order-row button { min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--cp-muted); }
.activity-library-page .library-page .library-order-row button[aria-pressed=true] { color: var(--cp-action); background: #eef3e8; }
.activity-library-page .library-count { margin: 0 auto 0 0; color: var(--cp-muted); font-size: 13px; line-height: 1.5; }
.activity-library-page .library-page .library-list { gap: 22px 20px; }
.activity-library-page .lib-folder .folder-shape { width: 100%; min-width: 0; aspect-ratio: auto; height: 128px; min-height: 0; }
.activity-library-page .folder-back { border-radius: 9px 13px 12px 12px; }
.activity-library-page .folder-front { border-radius: 9px 9px 12px 12px; box-shadow: inset 0 1px #ffffff45, 0 2px 6px #1537470a; }
.activity-library-page .lib-folder-link { transition: transform .2s ease; }
.activity-library-page .lib-folder-link:hover { transform: translateY(-4px); }
.activity-library-page .lib-folder .lib-name { font-size: 17px; line-height: 1.35; }
.activity-library-page .lib-folder .lib-sub { font-size: 13px; color: #173b43; }
.activity-library-page .lib-activity { border-color: var(--cp-line); border-radius: 12px; overflow: hidden; box-shadow: 0 3px 9px #15374709; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.activity-library-page .lib-activity:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #15374716; border-color: #9dbcae; }
.activity-library-page .lib-thumb { border-bottom-color: var(--cp-line); }
.activity-library-page .lib-info { min-height: 92px; padding: 13px 58px 14px 14px; gap: 7px; }
.activity-library-page .lib-activity .lib-name { font-size: 15px; line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.activity-library-page .lib-activity .lib-sub { color: var(--cp-muted); font-size: 13px; }
.activity-library-page .lib-menu-button { width: 44px; height: 44px; border-radius: 8px; border-color: #b5c7bf; }
.activity-library-page .lib-activity .lib-menu-button { bottom: 14px; right: 10px; }
.activity-library-page .library-list[data-view=small] .folder-shape { height: 112px; min-height: 0; }
.activity-library-page .library-list[data-view=small] .lib-info { min-height: 88px; padding-right: 54px; }
.activity-library-page .library-list[data-view=small] .lib-menu-button { width: 40px; height: 40px; }
.activity-library-page .library-list[data-view=small] .lib-folder .lib-name { font-size: 14px; }
.activity-library-page .library-list[data-view=small] .lib-folder .lib-sub { font-size: 12px; }
.activity-library-page .library-list[data-view=small] .folder-front { padding-right: 48px; }
.site-page .template-card { border-color: var(--cp-line); border-radius: 12px; box-shadow: 0 3px 9px #15374709; }
.site-page .template-card:hover { border-color: #9dbcae; box-shadow: 0 7px 20px #15374712; }
.site-page .template-copy h2 { color: var(--cp-ink); font-weight: 800; }
.site-page .template-copy p { color: var(--cp-muted); }
.site-page .picker-toolbar { padding-top: 28px; }
.site-page .picker-steps h1 { font-weight: 800; color: var(--cp-ink); }

/* Authoring uses the same type and controls; learning content itself is untouched. */
.site-page.editor-page :is(button, input, textarea, select) { font-family: inherit; }
.site-page.editor-page .editor-main { border-radius: 16px; box-shadow: var(--cp-shadow); }
.editor-page .item-panel, .editor-page .group-editor { background: #f3f5ee; border-radius: 12px; padding: 16px; }
.editor-page .editor-input-box { border-color: #c5d6d3; border-radius: 8px; overflow: hidden; }
.editor-page .editor-input-box:focus-within { border-color: var(--cp-action); box-shadow: 0 0 0 3px #155f6916; }
.editor-page .field-media-btn { width: 44px; height: 44px; border-radius: 7px; }
.editor-page .field-media-btn:hover, .editor-page .field-media-btn.attached { color: var(--cp-action); background: #e6efe9; }
.editor-page #previewBtn { color: var(--cp-ink); }
.editor-page .answer-state { min-width: 36px; width: 36px; height: 36px; border-radius: 8px; }
.editor-page .answer-correct .answer-state { background: #19764d; }
.editor-page .answer-wrong .answer-state { background: #b9473e; }
.editor-page .answer-remove { width: 36px; height: 36px; min-width: 36px; display: grid; place-items: center; }
.editor-page .field-picture button { min-width: 36px; min-height: 36px; border-radius: 7px; }
.editor-page .group-remove, .editor-page .group-image-button { min-width: 36px; min-height: 36px; }
.editor-page .add-content, .editor-page .add-answer { min-height: 44px; border-radius: 8px; color: var(--cp-action); }
.editor-page .field-format { border-radius: 7px; overflow: hidden; }
.site-page.account-page { background: radial-gradient(ellipse at 15% 5%, #e4f3ec, transparent 55%), #f7f6ef; }
.account-page .account-layout { box-shadow: 0 12px 45px #163d5010; border-color: var(--cp-line); }
.account-page .account-explainer { background: linear-gradient(155deg, #e6f3ef, #eef3ec); }
.resource-page .resource-info, .resource-page .resource-settings, .resource-page .resource-sidebar>section { border-radius: 12px; border-color: var(--cp-line); }
.resource-page .resource-info h1 { color: var(--cp-ink); }
.resource-page .resource-actions :is(a, button) { min-height: 40px; }
.resource-page .resource-actions a { color: var(--cp-action); }
.resource-page .resource-sidebar .template-switch { border-radius: 8px; }
.resource-page .resource-main>.activity-player { border-radius: 14px; box-shadow: 0 8px 28px #13364b1c; }
.resource-page .activity-player:fullscreen { border-radius: 0; }

@media(max-width:1100px) {
  .site-header .site-header-inner { gap: 12px; padding-inline: 20px; flex-wrap: wrap; }
  .site-header .site-nav { gap: 3px; }
  .site-header .site-nav a { padding-inline: 9px; }
  .activity-library-page .library-page .library-tools { justify-content: flex-start; }
}
@media(max-width:760px) {
  .site-header .site-header-inner { min-height: 64px; padding: 12px 16px; gap: 10px; }
  .site-header .site-brand { font-size: 24px; }
  .site-header .site-nav { order: 5; flex-basis: 100%; min-height: 44px; flex-wrap: wrap; justify-content: space-between; margin: 0; gap: 2px; }
  .site-header .site-nav a, .resource-page .site-header nav a { font-size: 13px; padding-inline: 10px; }
  .site-header .site-create { margin-left: auto; }
  .site-header .cp-account-nav { margin-left: 0; }
  .site-header .cp-language-switch { margin-left: auto; }
  .activity-library-page .site-main { width: calc(100% - 24px); margin-top: 18px; }
  .activity-library-page .library-page .library-heading { padding: 22px 18px; }
  .activity-library-page .library-page .library-body { padding: 16px 18px 24px; }
  .activity-library-page .library-page .library-tools { gap: 10px; }
  .activity-library-page .library-page .library-search { flex: 1 1 100%; order: 3; }
  .activity-library-page .library-page .library-search .site-input { width: 100%; }
  .activity-library-page .library-page .library-order-row { gap: 4px; }
  .activity-library-page .library-order-label { flex-basis: 100%; margin: 0 0 2px; }
  .activity-library-page .library-count { flex-basis: 100%; margin-bottom: 8px; }
  .activity-library-page .library-page .library-list { gap: 18px 14px; }
  .editor-page .editor-input-box { grid-template-columns: minmax(0,1fr) 44px; }
  .editor-page .field-format { height: 42px; }
  .editor-page .field-format button { width: 40px; height: 40px; line-height: 40px; }
  .editor-page .answer-state { width: 40px; min-width: 40px; height: 40px; }
  .editor-page .answer-remove { width: 36px; min-width: 36px; }
  .editor-page .answer-grid { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:420px) {
  .site-header .site-create { font-size: 13px; padding: 10px 12px; }
  .cp-account-nav .cp-account-label { max-width: 96px; }
  .activity-library-page .library-page .library-order-row { justify-content: space-between; }
  .activity-library-page .library-page .library-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px; }
  .activity-library-page .lib-folder .lib-name { font-size: 14px; }
  .activity-library-page .folder-front { padding: 12px 48px 10px 11px; }
  .activity-library-page .lib-folder .lib-sub { font-size: 12px; }
  .activity-library-page .lib-info { min-height: 108px; padding: 11px 12px 52px; }
  .activity-library-page .lib-activity .lib-name { font-size: 14px; }
  .activity-library-page .lib-menu-button { width: 40px; height: 40px; }
  .activity-library-page .lib-activity .lib-menu-button { bottom: 8px; right: 8px; }
  .activity-library-page .library-list[data-view=small] .lib-info { padding: 10px 10px 50px; }
  .editor-page .item-panel { padding: 12px 10px; }
}
@media(prefers-reduced-motion:reduce) {
  :where(:root:not([data-motion-managed])) .site-page .site-button, :where(:root:not([data-motion-managed])) .site-page .template-card, :where(:root:not([data-motion-managed])) .activity-library-page .lib-activity, :where(:root:not([data-motion-managed])) .activity-library-page .lib-folder-link { transition: none; }
  :where(:root:not([data-motion-managed])) .activity-library-page .lib-activity:hover, :where(:root:not([data-motion-managed])) .activity-library-page .lib-folder-link:hover { transform: none; }
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
:where(:root[data-reduce-motion]) .site-page .site-button, :where(:root[data-reduce-motion]) .site-page .template-card, :where(:root[data-reduce-motion]) .activity-library-page .lib-activity, :where(:root[data-reduce-motion]) .activity-library-page .lib-folder-link { transition: none; }
:where(:root[data-reduce-motion]) .activity-library-page .lib-activity:hover, :where(:root[data-reduce-motion]) .activity-library-page .lib-folder-link:hover { transform: none; }
@media(forced-colors:active) {
  .site-page .site-button.primary, .resource-page .resource-primary { border: 2px solid ButtonText !important; }
  .site-header .site-nav a[aria-current] { outline: 2px solid LinkText; }
  .folder-front, .folder-back { border: 1px solid CanvasText; }
}
/* Footer links to the privacy notice, terms and contact address on every teacher page. */
.site-footer .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; }
.site-footer .site-footer-links a { color: var(--cp-ink); font-weight: 700; text-decoration: none; }
.site-footer .site-footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Source: css/layout-fixes.css; sha256: fe5eb1128bb4b3e2a3f5403d1182d9a84e603757b69331584605a32344830476 */
/* Fit the wheel to the actual play area after fullscreen and orientation changes.
   The canvas keeps its drawing resolution; only the displayed diameter changes. */
.activity-player[data-game="wheel"] #gameStage {
  display: flex;
  flex-direction: column;
}
.activity-player[data-game="wheel"] .gprompt { flex: 0 0 auto; }
.activity-player[data-game="wheel"] .wheel-area {
  height: auto;
  flex: 1 1 0;
  min-height: 0;
}
.activity-player[data-game="wheel"] .wheel-frame {
  width: var(--wheel-diameter, 46cqw);
  height: var(--wheel-diameter, 46cqw);
}
/* Transparent corners of the rotated square canvas must not intercept the
   controls beneath the round wheel. Dragging still works across its circle. */
.activity-player[data-game="wheel"] .wheel-frame canvas {
  clip-path: circle(50%);
}
.activity-player[data-game="wheel"] :is(#spinBtn, .wheel-hub, .wheel-result-actions .btn) {
  min-width: 44px;
  min-height: 44px;
}
@media (max-width: 600px) {
  /* A wheel needs a square play area and room for its controls, even in page preview. */
  #activityPlayer.game-shell[data-game="wheel"]:not(:fullscreen)::before {
    aspect-ratio: auto;
    height: calc(100cqw + 100px);
  }
}

/* Source: css/original-player.css; sha256: abdc2cdc525ed91af0d724c6152a9c61bbb8de26f72913289463c6761dd595e9 */
/* Original ClassPlay studio chrome. Game-specific sizing remains with its game. */
#activityPlayer.game-shell {
  --player-utility-height: 52px;
  --player-status-height: 0px;
  border-radius: 20px;
  box-shadow: 0 12px 40px #17494b18;
  outline: 1px solid #17494b18;
  isolation: isolate;
}
#activityPlayer:fullscreen { border-radius: 0; outline: 0; }
/* The clock belongs to player chrome, outside the lesson's clipping and drag
   geometry. Reserve a real row only while a game has a status to show. */
#activityPlayer[data-phase=play]:has(.hud > .activity-clock, .hud > .score:not(.hidden), .hud > .lives:not(.hidden)) { --player-status-height: 36px; }
#activityPlayer:is([data-game=matchup], [data-game=jigsaw])[data-phase=play]:not(:has(.hud > .activity-clock)) { --player-status-height: 0px; }
#activityPlayer #screenPlay { top: var(--player-status-height); }
#activityPlayer .hud {
  inset: 0 0 auto;
  height: 36px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: none;
  border: 0;
  border-radius: 0;
}
#activityPlayer:not([data-phase=play]) .hud { display: none; }
#activityPlayer .hud > :is(.activity-clock, .score, .lives) {
  position: static;
  box-sizing: border-box;
  min-height: 28px;
  max-width: 100%;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--style-ink, #17494b) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--style-surface, #fffdf7) 94%, transparent);
  color: var(--style-ink, #17494b) !important;
  box-shadow: 0 2px 0 #163c5014;
  font: 800 clamp(12px, 1.3cqw, 16px)/1.15 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: none;
  white-space: nowrap;
}
#activityPlayer .hud > .lives { grid-column: 1; grid-row: 1; justify-self: start; }
#activityPlayer .hud > .activity-clock { grid-column: 2; grid-row: 1; justify-self: center; }
#activityPlayer .hud > .score { grid-column: 3; grid-row: 1; justify-self: end; }
#activityPlayer .hud > .activity-clock.cp-urgent { background: #9e3532 !important; color: #fffdf7 !important; animation: none; border-color: #9e3532; }
#activityPlayer .hud > .score.cp-bump { animation: none; }
#activityPlayer .player-controls {
  color: var(--style-ink, #17494b);
  background: var(--style-surface, #fffdf7);
  border-top: 1px solid color-mix(in srgb, var(--style-ink, #17494b) 16%, transparent);
  box-shadow: 0 -3px 12px #17494b08;
  gap: 4px;
}
#activityPlayer .player-controls button {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  opacity: 1;
  padding: 3px;
  transition: background 160ms ease;
}
#activityPlayer .player-controls button::after {
  content: attr(data-control-label);
  font: 800 11px/1.1 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
#activityPlayer .player-controls button svg { width: 22px; height: 22px; flex: 0 0 22px; }
#activityPlayer .player-controls #pauseBtn svg path { stroke: var(--style-surface, #fffdf7); }
#activityPlayer .player-controls button:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
#activityPlayer :is(button, [role=button], input, select):focus-visible { outline: 3px solid #d8851e; outline-offset: 3px; }
#activityPlayer .player-controls .mute-slash { width: 25px; top: 14px; background: currentColor; }
#activityPlayer #pCount { top: auto; height: auto; min-height: 0; border: 0; background: none; border-radius: 0; box-shadow: none; color: var(--style-ink, #17494b) !important; font-weight: 800; font-family: "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; }
#activityPlayer .player-controls #pCount { position: absolute; z-index: 1; pointer-events: none; }
#activityPlayer[data-game=jigsaw] .activity-clock { color: var(--jp-ink, #17494b) !important; background: var(--jp-paper, #fffdf7) !important; }
#activityPlayer[data-game=jigsaw] .activity-clock.cp-urgent { color: #fffdf7 !important; background: #9e3532 !important; }
#activityPlayer .start-card {
  box-sizing: border-box;
  min-height: 0;
  width: min(560px, calc(100% - 32px));
  max-height: 100%;
  gap: 12px;
  padding: clamp(16px, 2cqw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  border: 1px solid #17494b25;
  box-shadow: 0 16px 44px #17494b22;
  background: #fffdf7f7;
  color: #17494b;
  backdrop-filter: blur(8px);
}
#activityPlayer .start-template { color: #356b65; font-weight: 800; letter-spacing: .02em; }
#activityPlayer .start-card h1 { font-size: clamp(22px, 3.4cqw, 42px); font-weight: 850; letter-spacing: -.025em; text-wrap: balance; }
#activityPlayer .start-card #sSub { display: block; color: #385c59; line-height: 1.5; }
#activityPlayer .start-card .launch-button {
  width: clamp(112px, 17cqw, 180px);
  height: auto;
  min-width: 112px;
  flex-direction: row;
  gap: 8px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid #17494b2e;
  border-radius: 12px;
  background: #e4f0e9;
  color: #17494b;
  box-shadow: 0 3px 0 #17494b18;
  min-height: 48px;
  transition: background 160ms, transform 160ms, box-shadow 160ms;
}
#activityPlayer .start-card .launch-button span { font-size: 25px; line-height: 1; }
#activityPlayer .start-card .start-actions { justify-content: center; flex-wrap: wrap; }
#activityPlayer .start-card .launch-button:not(:disabled):hover { translate: none; transform: translateY(-2px); box-shadow: 0 5px 0 #17494b18; }
#activityPlayer .start-card .launch-button:not(:disabled):active { translate: none; transform: translateY(1px); }
#activityPlayer .start-card #startBtn { background: #247d74; color: #fffdf7; border-color: #247d74; box-shadow: 0 3px 0 #17494b28; }
#activityPlayer[data-media-loading=false] .start-card #startBtn { animation: none; }
#activityPlayer :is(.end-panel, .pause-panel) { border-radius: 20px; background: #fffdf7; color: #17494b; box-shadow: 0 14px 46px #17494b2e; }
#activityPlayer .end-panel { width: min(360px, calc(100% - 32px)); }
#activityPlayer .end-summary { padding: 6px 4px; gap: 16px; }
#activityPlayer .end-summary span { color: #42645f; font-size: 13px; }
.resource-page .resource-sidebar section { padding: 18px; border-radius: 16px; background: #ffffffeb; border: 1px solid #d7e3e7; box-shadow: 0 4px 20px #163d5008; }
.resource-page .resource-sidebar h2 { font: 800 17px/1.3 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; color: #17494b; }
.resource-page :is(.template-switch,.style-switch) {
  border-radius: 10px;
  padding: 7px;
  margin: 3px 0;
  gap: 9px;
  color: #17494b;
  font: 700 13px/1.35 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif;
  border: 1px solid transparent;
}
.resource-page :is(.template-switch,.style-switch):hover { background: #f0f5ef; }
.resource-page :is(.template-switch,.style-switch).selected { color: #17494b; border-color: #247d74; background: #e4f0e9; box-shadow: inset 3px 0 #247d74; }
.resource-page .style-preview { width: 68px; height: 47px; border: 1px solid #17494b25; border-radius: 7px; background: #f8f5ed; }
.resource-page .style-preview svg { display: block; width: 100%; height: 100%; }
.resource-page .template-switch .iq-template-svg { border-radius: 10px; }
.resource-page .font-label + select { border-radius: 8px; min-height: 44px; border-color: #bcced7; }
.resource-page .sidebar-note { color: #526976; }
/* Play another way: what is being tried, and the button that keeps it. */
.resource-page #switchNote:not(:empty) { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.resource-page .template-keep { display: block; width: 100%; min-height: 44px; margin: 10px 0 0; padding: 10px 14px; font: 800 14px/1.3 "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; text-align: center; overflow-wrap: anywhere; }
.resource-page .template-keep[hidden] { display: none; }
@media (max-width: 600px) {
  #activityPlayer.game-shell { border-radius: 14px; }
  #activityPlayer:fullscreen { border-radius: 0; }
  #activityPlayer .player-controls { gap: 1px; }
  #activityPlayer .player-controls button { padding: 3px 1px; }
  #activityPlayer .start-card { border-radius: 18px; width: calc(100% - 24px); padding: 16px 12px; }
  #activityPlayer .start-card .start-actions { gap: 8px; }
  #activityPlayer .start-card #sSub { font-size: 13px; line-height: 1.4; }
  .resource-page .resource-sidebar section { padding: 14px; }
}
@media (max-width: 480px) {
  /* A separate progress line avoids squeezing a lesson counter into the gap
     between five full-size utility buttons. */
  #activityPlayer.game-shell { --player-utility-height: 64px; }
  #activityPlayer.game-shell:is([data-game=matchup], [data-game=anagram], [data-game=jigsaw]) { --player-utility-height: 52px; }
  #activityPlayer .player-controls { align-items: flex-end; }
  #activityPlayer .player-controls #pCount {
    inset: 3px 8px auto;
    width: auto;
    max-width: none;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
  }
  #activityPlayer .hud > .lives {
    max-height: 28px;
    padding: 3px 6px;
    font-size: 11px;
    line-height: 11px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #activityPlayer .hud > .score { padding-inline: 6px; }
  #activityPlayer .start-card { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-motion-managed])) #activityPlayer .start-card .launch-button, :where(:root:not([data-motion-managed])) #activityPlayer .player-controls button { transition: none; }
  :where(:root:not([data-motion-managed])) #activityPlayer .start-card .launch-button:not(:disabled):hover { transform: none; }
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
:where(:root[data-reduce-motion]) #activityPlayer .start-card .launch-button, :where(:root[data-reduce-motion]) #activityPlayer .player-controls button { transition: none; }
:where(:root[data-reduce-motion]) #activityPlayer .start-card .launch-button:not(:disabled):hover { transform: none; }

/* Source: css/matchup-studio.css; sha256: d314b0c3943eeae7475447df9744365e452841516e26385508bd030a96efe2fb */
/* Original ClassPlay matching gallery.
   The authored clue is the visual anchor: answer deck, matching bays, then
   generous picture/text clues. No worksheet enclosure or miniature photo. */
#activityPlayer.game-shell[data-game=matchup]{overflow:clip}
#activityPlayer.game-shell[data-game=matchup]:not(:fullscreen){height:clamp(580px,48vw,660px)}
#activityPlayer.game-shell[data-game=matchup]:not(:fullscreen):has(.matchup-studio[data-density=reading]){height:740px}
#activityPlayer[data-game=matchup] #gameStage:has(.matchup-studio){
  --mu-ink:var(--style-ink,#17494b);--mu-paper:var(--style-surface,#fffdf7);
  --mu-line:color-mix(in srgb,var(--mu-ink) 32%,var(--mu-paper));
  --mu-bay-line:color-mix(in srgb,var(--mu-ink) 70%,var(--mu-paper));
  --mu-card-height:96px;--mu-answer-picture:58px;--mu-columns:5;
  padding:8px 14px 10px;overflow:hidden
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio{
  display:flex;flex-direction:column;gap:12px;width:100%;height:100%;min-height:0;
  color:var(--mu-ink);font-family:inherit
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-heading{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;
  flex:none;min-height:44px;padding:0;background:none;border:0;border-radius:0;box-shadow:none
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-counts{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#activityPlayer[data-game=matchup] #gameStage :is(.matchup-studio-progress,#muPage){
  padding:5px 9px;border:0;border-radius:20px;background:var(--mu-paper);color:var(--mu-ink);
  font-family:inherit;font-size:13px;font-weight:750;line-height:1.3;white-space:nowrap
}
#activityPlayer[data-game=matchup] #gameStage #muPage:empty{display:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-page-size{
  display:inline-flex;align-items:center;gap:5px;padding:0 7px;min-height:44px;border-radius:9px;
  background:var(--mu-paper);color:var(--mu-ink);font-family:inherit;font-weight:650;font-size:13px;line-height:1.2
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-heading select{
  width:auto;min-width:48px;min-height:44px;margin:0;padding:5px 23px 5px 6px;border:0;border-radius:8px;
  background-color:var(--mu-paper);color:var(--mu-ink);font-family:inherit;font-size:16px;font-weight:750
}
#activityPlayer[data-game=matchup] #gameStage .matchup-page-size:has(select option:only-child){display:none}
#activityPlayer[data-game=matchup] #gameStage :is(.matchup-page-size-hint,#muRemaining){
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap
}
#activityPlayer[data-game=matchup] #gameStage .matchup-page-size-hint[hidden]{display:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-layout{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  gap:18px;flex:1;min-width:0;min-height:0
}
#activityPlayer[data-game=matchup] #gameStage :is(.matchup-studio-board,.matchup-studio-tray){
  min-width:0;min-height:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:var(--mu-ink)
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-board{position:relative;overflow:hidden}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-tray{display:flex;flex-direction:column;gap:0}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-tray[hidden]{display:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-tray>header{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-bank{
  display:grid;grid-template-columns:repeat(var(--mu-columns),minmax(0,1fr));grid-template-rows:none;grid-auto-rows:max-content;
  align-content:start;gap:10px 14px;min-width:0;min-height:0;width:100%;margin:0;padding:4px 4px 8px;
  background:none;border:0;border-radius:0;box-shadow:none;color:inherit;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--mu-line) transparent
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-bank-slot{min-width:0;min-height:var(--mu-card-height);border:0;background:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-bank-slot.is-empty{visibility:hidden;pointer-events:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-rows{
  display:grid;grid-template-columns:repeat(var(--mu-columns),minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(0,1fr);
  align-content:stretch;align-items:stretch;gap:14px;min-width:0;min-height:0;width:100%;height:100%;
  margin:0;padding:4px 4px 8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--mu-line) transparent
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-pair{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--mu-card-height) minmax(0,1fr);
  align-items:stretch;gap:12px;min-width:0;min-height:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-link{display:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-bay{
  grid-row:1;position:relative;display:flex;align-items:stretch;justify-content:stretch;
  min-width:0;min-height:var(--mu-card-height);height:auto;max-height:none;padding:0;
  border:2px dashed var(--mu-bay-line);border-radius:var(--cp-material-radius,13px);
  background:color-mix(in srgb,var(--mu-paper) 84%,transparent);color:var(--mu-ink);
  box-shadow:inset 0 2px 0 #ffffff80;overflow:visible;
  transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-placeholder{
  display:flex;align-items:center;justify-content:center;width:100%;height:auto;
  min-height:calc(var(--mu-card-height) - 4px);padding:7px;color:var(--mu-ink);
  font-family:inherit;font-size:15px;font-weight:650;line-height:1.25;opacity:.82
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-placeholder svg{display:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-placeholder[hidden]{display:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-bay[data-filled=true]{border:0;padding:0;background:none;box-shadow:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-bay[data-filled=false]{touch-action:pan-y}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue{
  grid-row:2;position:relative;display:flex;align-items:center;justify-content:center;
  min-width:0;min-height:120px;height:100%;max-height:none;padding:5px;
  border:0;border-radius:12px;background:color-mix(in srgb,var(--mu-paper) 94%,transparent);
  color:var(--mu-ink);box-shadow:0 3px 0 #163c5018;font-family:inherit;
  font-size:clamp(18px,2.1cqw,25px);font-weight:750;line-height:1.3;
  overflow:visible;overflow-wrap:anywhere;touch-action:pan-y
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue:has(img){
  padding:0;background:none;border:0;box-shadow:none
}
/* The clue recording owns its own bottom row; it must not cover the caption. */
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue:has(>.pair-listen){padding-bottom:54px}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue>.pair-face-content{
  display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;
  height:100%;min-width:0;min-height:0;gap:6px
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue .pair-face-picture{
  display:flex;align-items:center;justify-content:center;flex:1;width:100%;height:100%;
  min-height:0;max-height:none
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue .pair-face-picture img{
  width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;
  border-radius:0;filter:none
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue .pair-face-text{
  flex:none;min-width:0;min-height:0;max-height:none;overflow:visible;
  color:var(--mu-ink);background:var(--mu-paper);border-radius:8px;padding:4px 7px;
  font-size:1em;line-height:1.3;overflow-wrap:anywhere
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue:not(:has(img)) .pair-face-text{background:none;padding:0}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer{
  --mu-card-color:var(--art-card-1,#fff1bc);
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
  width:100%;height:var(--mu-card-height);min-height:var(--mu-card-height);max-height:none;
  margin:0;padding:9px;border:var(--cp-material-border,2px solid var(--art-card-edge,var(--mu-line)));
  border-radius:var(--cp-material-radius,13px);
  background-color:var(--mu-card-color);
  background-image:var(--art-card-texture,none),linear-gradient(145deg,color-mix(in srgb,var(--mu-card-color) 86%,#fff),var(--mu-card-color));
  color:var(--mu-ink);box-shadow:var(--art-card-shadow,var(--cp-material-shadow,0 4px 0 #163c5026));
  font-family:inherit;font-size:clamp(18px,2.2cqw,27px);font-weight:800;line-height:1.25;
  overflow:visible;overflow-wrap:anywhere;text-shadow:none;-webkit-text-stroke:0;
  transform:none;translate:none;cursor:grab;
  transition:border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer[data-card-tone='1']{--mu-card-color:var(--art-card-2,#e1f2d8)}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer[data-card-tone='2']{--mu-card-color:var(--art-card-3,#ddecfd)}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer[data-card-tone='3']{--mu-card-color:var(--art-card-4,#ffe4dd)}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer[data-card-tone='4']{--mu-card-color:var(--art-card-5,#e9e4fb)}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer>.pair-face-content{
  display:flex;align-items:center;justify-content:center;flex-direction:row;width:100%;
  height:auto;min-width:0;min-height:0;gap:8px;flex:1
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer .pair-face-picture{
  display:flex;align-items:center;justify-content:center;flex:0 0 var(--mu-answer-picture);
  width:var(--mu-answer-picture);height:var(--mu-answer-picture);min-height:0;max-height:none
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer .pair-face-picture:only-child{flex:1;width:100%}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer .pair-face-picture img{
  width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain
}
/* When pictures are the movable side, use the vertical space occupied by the
   oversized word clues for the pictures instead. Page size and answer logic stay intact. */
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=compact][data-photo-answers=true]{
  --mu-card-height:clamp(118px,12.6cqw,144px)
}
/* Pictures on both sides share the space, keeping the fixed picture readable too. */
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=compact][data-photo-answers=true][data-photo-clues=true]{
  --mu-card-height:clamp(118px,10.5cqw,120px)
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=compact][data-photo-answers=true][data-photo-clues=false] .matchup-studio-clue{
  min-height:96px;height:auto;align-self:start;
  font-size:clamp(18px,2.5cqw,36px)
}
#activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio[data-density=compact][data-photo-answers=true][data-photo-clues=false]{
  --mu-card-height:clamp(118px,26vh,260px)
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=compact] .matchup-studio-clue:has(img){
  min-height:0
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer .pair-face-text{
  flex:1;min-width:0;min-height:0;max-height:none;overflow:visible;
  font-size:1em;line-height:1.25;overflow-wrap:anywhere
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(.matchup-answer-sound){padding-right:46px}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer-sound{
  position:absolute;right:3px;top:50%;translate:0 -50%;display:grid;place-items:center;
  width:40px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--mu-paper) 68%,transparent);
  color:var(--mu-ink);border:1px solid color-mix(in srgb,var(--mu-ink) 18%,transparent);
  font-size:22px;pointer-events:none
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer-sound svg{width:22px;height:22px}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .pair-listen{
  position:absolute;bottom:5px;right:5px;top:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:5px;border:1px solid var(--mu-line);
  border-radius:10px;background:var(--mu-paper);color:var(--mu-ink);box-shadow:0 2px 4px #163c5024
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .pair-listen svg{width:18px;height:18px;flex:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-guide{display:none}
/* Selection, movement and ticks/crosses carry the visual feedback. Keep the
   spoken guidance available without adding reading tasks to the lesson. */
#activityPlayer[data-game=matchup] #gameStage :is(#muStatus,.matchup-studio-mixed-guide){
  display:block;position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-footer{
  display:flex;align-items:center;justify-content:flex-end;flex:none;gap:10px;min-height:44px;
  padding:0;background:none;border:0;border-radius:0;color:var(--mu-ink)
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-pagination{width:auto;gap:8px}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-pagination .btn{
  min-width:140px;min-height:44px;padding:9px 15px;border:2px solid #17494b;border-radius:11px;
  background:#247d74;color:#fffdf7;box-shadow:0 3px 0 #17494b;font-family:inherit;font-size:16px;
  font-weight:800;line-height:1.25;white-space:normal
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-pagination .btn:disabled{
  background:var(--mu-paper);color:var(--mu-ink);border-color:var(--mu-line);box-shadow:0 2px 0 #163c5020;opacity:.85
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:is(:hover,:active,.is-selected,.is-dragging){transform:none;translate:none;filter:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer.is-selected{
  outline:3px solid #247d74;outline-offset:2px;box-shadow:0 4px 0 #17494b,0 0 0 6px #ffffff;cursor:grabbing
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-bay.is-drop-target{
  outline:3px solid #247d74;outline-offset:2px;border-color:#247d74;background:#e4f1e9;box-shadow:inset 0 0 0 2px #ffffff
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-bay.is-correct>.matchup-answer{
  color:#21471b;background:#e7f4df;border:2px solid #568f4a;box-shadow:0 4px 0 #568f4a!important
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-bay.is-wrong>.matchup-answer{
  color:#742d28;background:#fff0ee;border:2px solid #c56662;box-shadow:0 4px 0 #c56662!important
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-mark{top:-7px;right:-7px;width:28px;height:28px;font-size:19px;border:2px solid #fff}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio :is(.matchup-answer,.matchup-studio-bay,.pair-listen,select):focus-visible{
  outline:3px solid #17494b;outline-offset:3px;box-shadow:0 0 0 6px #ffffff
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-scroll-cue{
  position:absolute;z-index:3;bottom:4px;right:8px;padding:4px 9px;background:var(--mu-paper);color:var(--mu-ink);
  border-radius:16px;box-shadow:0 2px 4px #163c5020;font-family:inherit;font-weight:750;font-size:12px;line-height:1.2;pointer-events:none
}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio-scroll-cue[hidden]{display:none}
#activityPlayer[data-game=matchup] #gameStage[data-matchup-layout=mixed] .matchup-studio-layout{grid-template-rows:minmax(0,1fr)}
/* Long authored sentences and explicit All on a small screen use a readable
   paged reading arrangement, never tiny fitted type or cropped photographs. */
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-studio-layout{grid-template-rows:auto minmax(0,1fr)}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-bank{grid-template-columns:repeat(3,minmax(0,1fr));max-height:230px}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-rows{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-studio-pair{grid-template-rows:auto auto}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-studio-clue{min-height:160px;height:auto}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-studio-clue .pair-face-picture{height:180px;flex:none}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-answer{height:auto}
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-bank .pair-face-text{max-height:100px;overflow-y:auto;scrollbar-width:thin;touch-action:pan-y}
/* A sentence measured to fit its tile shows no scroll bar for the pixel or two its letters reach past the line. */
#activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-bank .pair-face-text[data-card-text-fit=fit]{overflow-y:visible}
#activityPlayer[data-game=matchup][data-phase=play]:has(.matchup-studio) :is(#pCount,#pScore){visibility:hidden}
#activityPlayer[data-game=matchup] #screenEnd :is(#reviewBtn,#viewScoresBtn,#editLink){color:var(--style-ink,#17494b);background:transparent;opacity:1;text-shadow:none}
#activityPlayer[data-game=matchup] #screenEnd :is(#reviewBtn,#viewScoresBtn,#editLink):hover{background:color-mix(in srgb,var(--style-ink,#17494b) 8%,var(--style-surface,#fffdf7))}
#activityPlayer[data-game=matchup] #screenEnd :is(#eTitle,#eNote,#eScore,#eTime,.end-summary span,#eStats,#eStats .pill){color:var(--style-ink,#17494b);text-shadow:none}
@media(max-width:700px){
  #activityPlayer.game-shell[data-game=matchup]:not(:fullscreen){height:690px}
  #activityPlayer.game-shell[data-game=matchup]:not(:fullscreen):has(.matchup-studio[data-density=reading]){height:760px}
  #activityPlayer[data-game=matchup] #gameStage:has(.matchup-studio){--mu-card-height:94px;--mu-answer-picture:40px;padding:7px 7px 9px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio{gap:9px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio-heading{gap:6px;min-height:38px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio-counts{gap:5px}
  #activityPlayer[data-game=matchup] #gameStage :is(.matchup-studio-progress,#muPage){padding:4px 7px;font-size:12px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-page-size{font-size:12px;padding:0 5px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio-heading select{min-width:46px;padding-right:20px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio-layout{gap:14px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-bank,
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-rows{gap:10px;padding:4px 3px 8px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio-pair{gap:10px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer{font-size:18px;padding:6px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(.matchup-answer-sound){padding:38px 5px 7px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer-sound{width:44px;height:30px;top:4px;left:50%;right:auto;translate:-50% 0;border:0;background:color-mix(in srgb,var(--mu-paper) 50%,transparent)}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer-sound svg{width:18px;height:18px}
  /* A picture, a caption and a recording need their own small composition.
     Keeping the narrow desktop row would squeeze a word into three lines
     below the speaker and spill it outside the picked-up card. */
  #activityPlayer[data-game=matchup] #gameStage:has(.matchup-answer img){--mu-card-height:118px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img){padding:7px 6px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img):has(.matchup-answer-sound){padding:7px 6px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img)>.pair-face-content{flex-direction:column;gap:4px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) .pair-face-text{flex:none;width:100%;line-height:1.2}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) .matchup-answer-sound{left:auto;right:5px;top:9px;translate:none;width:30px;height:30px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-placeholder{font-size:13px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue{min-height:120px;padding:4px;font-size:18px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=compact][data-photo-answers=true][data-photo-clues=false] .matchup-studio-clue{padding-left:1px;padding-right:1px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio-clue .pair-face-picture{min-height:0;max-height:none}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-footer{flex-wrap:wrap;gap:7px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .pair-game-status{flex-basis:100%;font-size:13px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-pagination{width:100%;justify-content:flex-end}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio .matchup-pagination .btn{min-width:0;min-height:44px;width:100%;font-size:16px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-bank{grid-template-columns:repeat(2,minmax(0,1fr));max-height:220px}
  #activityPlayer[data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-rows{grid-template-columns:minmax(0,1fr)}
}
@media(orientation:landscape) and (max-height:500px){
  #activityPlayer[data-game=matchup]:fullscreen #gameStage:has(.matchup-studio){--mu-card-height:74px;padding:5px 8px 7px}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio[data-density=compact][data-photo-answers=true][data-photo-clues=false]{--mu-card-height:74px}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio[data-density=compact][data-photo-answers=true][data-photo-clues=false] .matchup-bank{grid-template-columns:repeat(2,minmax(0,1fr))}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio[data-density=compact][data-photo-answers=true][data-photo-clues=false] .matchup-studio-clue{min-height:72px;font-size:18px;padding-top:2px}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio{gap:6px}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio-layout{grid-template-columns:200px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio .matchup-bank{grid-template-columns:minmax(0,1fr);max-height:none;height:100%}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio-tray{height:100%}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio .matchup-rows{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio-pair{grid-template-rows:74px auto}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio-clue{min-height:110px;height:auto}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio-clue .pair-face-picture{min-height:110px;height:120px;flex:none}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio .matchup-answer{min-height:74px;font-size:18px}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio .matchup-footer{flex-wrap:nowrap}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio .pair-game-status{flex-basis:auto}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio .matchup-pagination{width:auto}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage .matchup-studio .matchup-pagination .btn{width:auto;min-width:125px}
  #activityPlayer[data-game=matchup]:fullscreen #gameStage[data-matchup-layout=mixed] .matchup-studio-layout{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  :where(:root:not([data-motion-managed])) #activityPlayer[data-game=matchup] #gameStage .matchup-studio :is(.matchup-studio-bay,.matchup-answer,.matchup-rows,.matchup-bank){transition:none}
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
:where(:root[data-reduce-motion]) #activityPlayer[data-game=matchup] #gameStage .matchup-studio :is(.matchup-studio-bay,.matchup-answer,.matchup-rows,.matchup-bank){transition:none}
#activityPlayer[data-game=matchup][data-paused=true] #gameStage .matchup-studio *{animation-play-state:paused}

/* Source: css/world-settings.css; sha256: ac3e8c4abc77307be9daf9bead6058e05bdb28b8e05eda09f8bea9a38d2e463b */
/* Contextual settings stay out of the layout until they apply to this lesson. */
.setting-row[hidden]{display:none!important}

/* Source: css/themekit.css; sha256: 00111ac19ae787398e83413e292057d00865652f862cae64711b7d1e601a7766 */
/* ClassPlay learning worlds: live scenes, guides and openings (js/themekit/*.js).
   Original ClassPlay artwork. The scene sits behind every screen of the player. */
.tk-stage { isolation: isolate; }
.tk-scene { container-type: size; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: layout paint; border-radius: inherit; }
.tk-paused, .tk-paused * { animation-play-state: paused !important; }
.tk-layer { position: absolute; pointer-events: none; }
.tk-layer > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tk-particles { position: absolute; inset: 0; }
.tk-actors { position: absolute; inset: 0; }
.tk-actors > * { position: absolute; left: 0; top: 0; will-change: transform; }
.tk-actors svg { display: block; width: 100%; height: auto; }
.tk-flipx > svg { transform: scaleX(-1); }
.tk-mascot { position: absolute; bottom: 1.5%; width: clamp(64px, 11cqmin, 132px); z-index: 3; transform-origin: 50% 100%; }
.tk-mascot--left { left: 1.5%; }
.tk-mascot--right { right: 1.5%; }
.tk-mascot--waiting { opacity: 0; }
.tk-mascot svg { display: block; width: 100%; height: auto; overflow: visible; }
.tk-mascot svg * { transform-box: view-box; }
.tk-sway, .tk-flip, .tk-jelly-bell, .tk-jelly-legs, .tk-rays-swing, .tk-crab-legs { transform-box: view-box; }
@keyframes tk-sway { from { transform: rotate(-3.2deg); } to { transform: rotate(3.2deg); } }
.tk-sway { animation: tk-sway 4.8s ease-in-out infinite alternate; }
.tk-sway--slow { animation-duration: 7.2s; animation-delay: -2s; }
.tk-sway--fast { animation-duration: 3.1s; animation-delay: -1s; }
.tk-calm *, .tk-calm::before, .tk-calm::after { animation: none !important; }

/* Intro */
.tk-intro { container-type: size; position: absolute; inset: 0; z-index: 60; overflow: hidden; cursor: pointer; border-radius: inherit; }
.tk-intro-skip { position: absolute; right: 12px; bottom: 12px; z-index: 5; font: 700 15px/1 "ClassPlay Round", Nunito, Poppins, system-ui, sans-serif; padding: 9px 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,.75); background: rgba(10,30,50,.35); color: #fff; cursor: pointer; backdrop-filter: blur(2px); }
.tk-intro-skip:focus-visible { outline: 3px solid #ffd35c; outline-offset: 2px; }

/* ---------------- Ocean adventure ---------------- */
.tk-ocean-adventure { background: linear-gradient(180deg, #67dbe0 0%, #2eb0cb 26%, #1a8bb6 58%, #10679a 84%, #0d5a8c 100%); }
.tk-ocean-adventure .oa-rays { inset: 0; mix-blend-mode: screen; }
.tk-ocean-adventure .oa-far { left: 0; right: 0; bottom: 7%; height: 44%; }
.tk-ocean-adventure .oa-floor { left: 0; right: 0; bottom: 0; height: 13%; }
.tk-ocean-adventure .oa-mid { left: 0; right: 0; bottom: 6%; height: 40%; }
.tk-ocean-adventure .oa-near-l { left: 0; bottom: 0; height: clamp(150px, 42%, 60cqw); aspect-ratio: 560 / 440; }
.tk-ocean-adventure .oa-near-r { right: 0; bottom: 0; height: clamp(150px, 46%, 62cqw); aspect-ratio: 560 / 460; }
.tk-ocean-adventure .oa-caustics ellipse { opacity: .0; animation: oa-caustic 5.5s ease-in-out infinite; }
.tk-ocean-adventure .oa-caustics .c2 { animation-delay: -1.4s; animation-duration: 6.4s; }
.tk-ocean-adventure .oa-caustics .c3 { animation-delay: -3s; animation-duration: 5s; }
.tk-ocean-adventure .oa-caustics .c4 { animation-delay: -4.2s; animation-duration: 7s; }
@keyframes oa-caustic { 0%, 100% { opacity: .05; } 50% { opacity: .55; } }
.tk-ocean-adventure .tk-rays-swing { transform-origin: 800px 0; animation: oa-rays 15s ease-in-out infinite alternate; }
@keyframes oa-rays { from { transform: rotate(-2.2deg); } to { transform: rotate(2.6deg); } }
.tk-ocean-adventure .tk-ray { animation: oa-ray 6.5s ease-in-out infinite alternate; }
.tk-ocean-adventure .tk-ray.r2 { animation-duration: 8.5s; animation-delay: -3s; }
.tk-ocean-adventure .tk-ray.r3 { animation-duration: 7.2s; animation-delay: -1s; }
.tk-ocean-adventure .tk-ray.r4 { animation-duration: 9s; animation-delay: -5s; }
.tk-ocean-adventure .tk-ray.r5 { animation-duration: 10s; animation-delay: -4s; }
.tk-ocean-adventure .tk-ray.r6 { animation-duration: 7.8s; animation-delay: -6s; }
@keyframes oa-ray { from { opacity: .12; } to { opacity: .5; } }
.tk-ocean-adventure .tk-mascot { left: 15%; bottom: 2%; width: clamp(70px, 13cqmin, 150px); }
@container (max-aspect-ratio: 3/4) { .tk-ocean-adventure .tk-mascot { left: 2%; } }
.tk-flip--front { animation: oa-flipper 1.6s ease-in-out infinite alternate; }
.tk-flip--front2 { animation: oa-flipper 1.6s ease-in-out infinite alternate-reverse; }
.tk-flip--back { animation: oa-flipper 2.1s ease-in-out infinite alternate; }
@keyframes oa-flipper { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.tk-jelly-bell { animation: oa-pulse 1.8s ease-in-out infinite; }
.tk-jelly-legs { animation: oa-legs 1.8s ease-in-out infinite; }
@keyframes oa-pulse { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.06, .88); } }
@keyframes oa-legs { 0%, 100% { transform: scaleY(1) skewX(0); } 45% { transform: scaleY(1.08) skewX(4deg); } }
.tk-crab-legs { animation: oa-scuttle .22s steps(2) infinite; }
@keyframes oa-scuttle { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* ---------------- Space voyage ---------------- */
.tk-space-adventure { background: radial-gradient(120% 90% at 50% 110%, #3a1f78 0%, #1d1a5c 38%, #0f1240 68%, #080b2a 100%); }
.tk-space-adventure .sv-nebula { inset: -4%; }
.tk-space-adventure .sv-planets { inset: 0; }
.tk-space-adventure .sv-ground { left: 0; right: 0; bottom: 0; height: 24%; }
.tk-space-adventure .sv-near-l { left: 0; bottom: 0; height: clamp(140px, 40%, 58cqw); aspect-ratio: 560 / 420; }
.tk-space-adventure .sv-near-r { right: 0; bottom: 0; height: clamp(150px, 44%, 60cqw); aspect-ratio: 560 / 440; }
.tk-space-adventure .tk-mascot { right: 4%; left: auto; bottom: 26%; width: clamp(66px, 11cqmin, 130px); }
@container (max-aspect-ratio: 3/4) { .tk-space-adventure .tk-mascot { bottom: 20%; } }
.tk-space-adventure .sv-drift-a, .tk-space-adventure .sv-drift-b, .tk-space-adventure .sv-float-a, .tk-space-adventure .sv-float-b, .tk-space-adventure .sv-float-c { transform-box: view-box; }
.tk-space-adventure .sv-drift-a { animation: sv-drift 40s ease-in-out infinite alternate; }
.tk-space-adventure .sv-drift-b { animation: sv-drift 52s ease-in-out infinite alternate-reverse; }
@keyframes sv-drift { from { transform: translate(-30px, 0) scale(1); } to { transform: translate(40px, 12px) scale(1.06); } }
.tk-space-adventure .sv-float-a { animation: sv-float 18s ease-in-out infinite alternate; }
.tk-space-adventure .sv-float-b { animation: sv-float 13s ease-in-out infinite alternate-reverse; }
.tk-space-adventure .sv-float-c { animation: sv-float 9s ease-in-out infinite alternate; }
@keyframes sv-float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.tk-space-adventure .sv-beacon { animation: sv-beacon 1.4s steps(2) infinite; }
@keyframes sv-beacon { 50% { opacity: .25; } }
.tk-space-adventure .sv-glow { animation: sv-glow 3.6s ease-in-out infinite alternate; }
@keyframes sv-glow { from { opacity: .45; } to { opacity: 1; } }

/* ---------------- Dinosaur valley ---------------- */
.tk-dinosaur-valley { background: linear-gradient(180deg, #7fd0f5 0%, #b6e6f2 42%, #ffe9b8 70%, #ffdca0 100%); }
.tk-dinosaur-valley .dv-sky { inset: 0; }
.tk-dinosaur-valley .dv-trees { left: 0; right: 0; bottom: 8%; height: 36%; }
.tk-dinosaur-valley .dv-floor { left: 0; right: 0; bottom: 0; height: 14%; }
.tk-dinosaur-valley .dv-near-l { left: 0; bottom: 0; height: clamp(150px, 46%, 62cqw); aspect-ratio: 560 / 440; }
.tk-dinosaur-valley .dv-near-r { right: 0; bottom: 0; height: clamp(140px, 40%, 58cqw); aspect-ratio: 560 / 460; }
.tk-dinosaur-valley .tk-mascot { left: 14%; bottom: 1.5%; width: clamp(88px, 17cqmin, 190px); }
@container (max-aspect-ratio: 3/4) { .tk-dinosaur-valley .tk-mascot { left: 3%; } }
.tk-dinosaur-valley .dv-cloud, .tk-dinosaur-valley .dv-smoke circle, .tk-dinosaur-valley .dv-wing, .tk-dinosaur-valley .dv-neck, .tk-dinosaur-valley .dv-leg, .tk-dinosaur-valley .dv-bwing, .tk-dinosaur-valley .dv-egg { transform-box: view-box; }
.tk-dinosaur-valley .dv-cloud.c1 { animation: dv-cloud 70s linear infinite alternate; }
.tk-dinosaur-valley .dv-cloud.c2 { animation: dv-cloud 90s linear infinite alternate-reverse; }
.tk-dinosaur-valley .dv-cloud.c3 { animation: dv-cloud 60s linear infinite alternate; }
@keyframes dv-cloud { from { transform: translateX(-80px); } to { transform: translateX(90px); } }
.tk-dinosaur-valley .dv-smoke .puff { fill: #f1e7e2; transform-box: view-box; transform-origin: 0 0; animation: dv-smoke 7.5s ease-out infinite; opacity: 0; }
.tk-dinosaur-valley .dv-smoke .p2 { animation-delay: -2.5s; }
.tk-dinosaur-valley .dv-smoke .p3 { animation-delay: -5s; }
@keyframes dv-smoke { 0% { transform: translate(1210px, 330px) scale(.35); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(1270px, 150px) scale(1.7); opacity: 0; } }
.tk-dinosaur-valley .dv-lavaglow { animation: dv-glowpulse 3s ease-in-out infinite alternate; }
@keyframes dv-glowpulse { from { opacity: .55; } to { opacity: 1; } }
.tk-dinosaur-valley .dv-wing-l { animation: dv-flap .5s ease-in-out infinite alternate; }
.tk-dinosaur-valley .dv-wing-r { animation: dv-flap .5s ease-in-out infinite alternate-reverse; }
@keyframes dv-flap { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
.tk-dinosaur-valley .dv-neck { animation: dv-neck 3s ease-in-out infinite alternate; }
@keyframes dv-neck { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.tk-dinosaur-valley .dv-leg.l1 { animation: dv-step 1.2s ease-in-out infinite alternate; }
.tk-dinosaur-valley .dv-leg.l2 { animation: dv-step 1.2s ease-in-out infinite alternate-reverse; }
@keyframes dv-step { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
.tk-dinosaur-valley .dv-bwing { animation: dv-bflap .18s ease-in-out infinite alternate; }
@keyframes dv-bflap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
.tk-dinosaur-valley .dv-egg.e2 { transform-origin: 262px 380px; animation: dv-wobble 5s ease-in-out infinite; }
@keyframes dv-wobble { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-6deg); } 92% { transform: rotate(5deg); } 95% { transform: rotate(-3deg); } }

/* ---------------- Quiz show studio ---------------- */
.tk-quiz-show-studio { background: radial-gradient(120% 90% at 50% 34%, #8a45e6 0%, #4f22ad 46%, #22105e 100%); }
.tk-quiz-show-studio .qs-back, .tk-quiz-show-studio .qs-beams { inset: 0; }
.tk-quiz-show-studio .qs-beams { mix-blend-mode: screen; }
.tk-quiz-show-studio .qs-floor { left: 0; right: 0; bottom: 0; height: 22%; }
.tk-quiz-show-studio .qs-valance { left: 0; right: 0; top: 0; height: clamp(34px, 9%, 84px); }
.tk-quiz-show-studio :is(.qs-curtain-l, .qs-curtain-r) { top: 0; bottom: 0; width: clamp(26px, min(9cqw, 15cqh), 150px); }
.tk-quiz-show-studio .qs-curtain-l { left: 0; }
.tk-quiz-show-studio .qs-curtain-r { right: 0; }
.tk-quiz-show-studio .qs-near-l { left: 0; bottom: 0; height: clamp(70px, 20%, 26cqw); aspect-ratio: 560 / 440; }
.tk-quiz-show-studio .qs-near-r { right: 0; bottom: 0; height: clamp(110px, 33%, 44cqw); aspect-ratio: 560 / 440; }
.tk-quiz-show-studio .tk-mascot { left: 1.5%; bottom: 2%; width: clamp(70px, 12.5cqmin, 146px); }
.tk-quiz-show-studio :is(.qs-rays, .qs-wave, .qs-bulb, .qs-bar, .qs-screen-star, .qs-pool, .qs-ring, .qs-lamp) { transform-box: view-box; }
.tk-quiz-show-studio .qs-rays { transform-origin: 800px 380px; animation: qs-spin 140s linear infinite; }
@keyframes qs-spin { to { transform: rotate(360deg); } }
.tk-quiz-show-studio .qs-wave { animation: qs-wave 7.5s linear infinite; }
@keyframes qs-wave { from { transform: translateX(0); } to { transform: translateX(1700px); } }
.tk-quiz-show-studio .qs-screen-star { transform-origin: 800px 344px; animation: qs-throb 3.2s ease-in-out infinite alternate; }
@keyframes qs-throb { from { transform: scale(.9); opacity: .16; } to { transform: scale(1.06); opacity: .34; } }
.tk-quiz-show-studio .qs-bulb.b1 { animation: qs-chase 1.1s steps(1) infinite; }
.tk-quiz-show-studio .qs-bulb.b2 { animation: qs-chase 1.1s steps(1) infinite -.55s; }
@keyframes qs-chase { 0% { opacity: 1; } 50% { opacity: .38; } }
.tk-quiz-show-studio .qs-bar { animation: qs-bar 1.6s ease-in-out infinite alternate; }
.tk-quiz-show-studio .qs-bar.k1 { animation-delay: -.4s; } .tk-quiz-show-studio .qs-bar.k2 { animation-delay: -.8s; } .tk-quiz-show-studio .qs-bar.k3 { animation-delay: -1.2s; }
@keyframes qs-bar { from { opacity: .25; } to { opacity: 1; } }
.tk-quiz-show-studio .qs-beam { animation: qs-sweep 8s ease-in-out infinite alternate; }
.tk-quiz-show-studio .qs-beam.b2 { animation-duration: 10s; animation-delay: -3s; }
.tk-quiz-show-studio .qs-beam.b3 { animation-duration: 9s; animation-delay: -6s; animation-direction: alternate-reverse; }
.tk-quiz-show-studio .qs-beam.b4 { animation-duration: 11s; animation-delay: -2s; animation-direction: alternate-reverse; }
@keyframes qs-sweep { from { transform: rotate(-13deg); } to { transform: rotate(15deg); } }
.tk-quiz-show-studio .qs-pool { animation: qs-pool 3.4s ease-in-out infinite alternate; }
.tk-quiz-show-studio .qs-pool.p2 { animation-delay: -1.7s; }
@keyframes qs-pool { from { opacity: .45; } to { opacity: 1; } }
.tk-quiz-show-studio .qs-ring { animation: qs-ring 6s linear infinite; }
@keyframes qs-ring { to { stroke-dashoffset: -320; } }
.tk-quiz-show-studio .qs-lamp { animation: qs-pool 1.9s ease-in-out infinite alternate; }
.tk-quiz-show-studio .tk-qs-spot { height: 0; padding-bottom: 7%; margin-left: -11%; margin-top: -3%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 220, .55), rgba(255, 250, 220, 0)); mix-blend-mode: screen; }
.tk-quiz-show-studio .tk-qs-cheer .qs-cheer-star { animation: qs-flash .6s steps(1) infinite; }
.tk-quiz-show-studio .tk-qs-cheer .qs-cheer-star.s2 { animation-delay: .2s; }
.tk-quiz-show-studio .tk-qs-cheer .qs-cheer-star.s3 { animation-delay: .4s; }
@keyframes qs-flash { 0% { opacity: 1; } 34% { opacity: .25; } }

/* ---------------- Chalkboard classroom ---------------- */
.tk-chalkboard-classroom { background: linear-gradient(180deg, #fdf3d8 0%, #f2dcae 72%, #c98a4e 100%); }
.tk-chalkboard-classroom .cc-wall { inset: 0; }
.tk-chalkboard-classroom .cc-floor { left: 0; right: 0; bottom: 0; height: 14%; }
.tk-chalkboard-classroom .cc-near-l { left: 0; bottom: 0; height: clamp(90px, 27%, 34cqw); aspect-ratio: 560 / 440; }
.tk-chalkboard-classroom .cc-near-r { right: 0; bottom: 0; height: clamp(90px, 27%, 34cqw); aspect-ratio: 560 / 440; }
.tk-chalkboard-classroom .tk-mascot { left: 1.5%; bottom: 2%; width: clamp(60px, 11.5cqmin, 132px); }
.tk-chalkboard-classroom :is(.cc-doodle, .cc-cloud, .cc-branch, .cc-flag, .cc-hand-s, .cc-hand-m, .cc-globe-spin, .cc-ball-spin, .cc-wing) { transform-box: view-box; }
.tk-chalkboard-classroom .cc-doodle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cc-draw 26s ease-in-out infinite; }
.tk-chalkboard-classroom .cc-doodle.d2 { animation-delay: -4.3s; } .tk-chalkboard-classroom .cc-doodle.d3 { animation-delay: -8.6s; }
.tk-chalkboard-classroom .cc-doodle.d4 { animation-delay: -13s; } .tk-chalkboard-classroom .cc-doodle.d5 { animation-delay: -17.3s; } .tk-chalkboard-classroom .cc-doodle.d6 { animation-delay: -21.6s; }
@keyframes cc-draw { 0% { stroke-dashoffset: 100; opacity: .95; } 10% { stroke-dashoffset: 0; opacity: .95; } 62% { stroke-dashoffset: 0; opacity: .95; } 70% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
.tk-chalkboard-classroom .cc-cloud { animation: cc-cloud 30s ease-in-out infinite alternate; }
@keyframes cc-cloud { from { transform: translateX(-30px); } to { transform: translateX(60px); } }
.tk-chalkboard-classroom .cc-branch { animation: cc-branch 5s ease-in-out infinite alternate; }
@keyframes cc-branch { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.tk-chalkboard-classroom .cc-flag { animation: cc-flag 3.6s ease-in-out infinite alternate; }
.tk-chalkboard-classroom .cc-flag.f1 { animation-delay: -1.2s; } .tk-chalkboard-classroom .cc-flag.f2 { animation-delay: -2.4s; }
@keyframes cc-flag { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.tk-chalkboard-classroom .cc-hand-s { transform-origin: 1470px 196px; animation: cc-tick 60s steps(60) infinite; }
.tk-chalkboard-classroom .cc-hand-m { transform-origin: 1470px 196px; animation: cc-tick 3600s linear infinite; }
@keyframes cc-tick { to { transform: rotate(360deg); } }
.tk-chalkboard-classroom .tk-cc-ball .cc-ball-spin { animation: cc-tick 1.2s linear infinite; }
.tk-chalkboard-classroom .tk-cc-butterfly .cc-wing { transform-origin: 30px 25px; animation: cc-flap .2s ease-in-out infinite alternate; }
.tk-chalkboard-classroom .tk-cc-butterfly .cc-wing.r { animation-direction: alternate-reverse; }
@keyframes cc-flap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }

/* ---------------- Lunar New Year ---------------- */
.tk-lunar-new-year { background: linear-gradient(180deg, #2a1250 0%, #5e1a5c 45%, #b8324a 74%, #ef7a45 100%); }
.tk-lunar-new-year .ln-sky { inset: 0; }
.tk-lunar-new-year .ln-lanterns { left: 0; right: 0; top: 0; height: clamp(90px, 30%, 280px); }
.tk-lunar-new-year .ln-floor { left: 0; right: 0; bottom: 0; height: 14%; }
.tk-lunar-new-year .ln-near-l { left: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-lunar-new-year .ln-near-r { right: 0; bottom: 0; height: clamp(100px, 30%, 40cqw); aspect-ratio: 560 / 440; }
.tk-lunar-new-year .tk-mascot { left: 1.5%; bottom: 2%; width: clamp(72px, 13cqmin, 150px); }
.tk-lunar-new-year :is(.ln-lantern, .ln-cloud, .ln-stars circle) { transform-box: view-box; }
.tk-lunar-new-year .ln-lantern { animation: ln-swing 3.4s ease-in-out infinite alternate; }
.tk-lunar-new-year .ln-lantern.l1 { animation-duration: 4.1s; animation-delay: -1.3s; } .tk-lunar-new-year .ln-lantern.l2 { animation-duration: 3.8s; animation-delay: -2.2s; } .tk-lunar-new-year .ln-lantern.l3 { animation-duration: 4.5s; animation-delay: -.6s; }
@keyframes ln-swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.tk-lunar-new-year .ln-cloud.c1 { animation: ln-drift 40s ease-in-out infinite alternate; }
.tk-lunar-new-year .ln-cloud.c2 { animation: ln-drift 52s ease-in-out infinite alternate-reverse; }
@keyframes ln-drift { from { transform: translateX(-50px); } to { transform: translateX(60px); } }
.tk-lunar-new-year .ln-stars circle { animation: ln-twinkle 2.6s ease-in-out infinite alternate; }
.tk-lunar-new-year .ln-stars .s1 { animation-delay: -1s; } .tk-lunar-new-year .ln-stars .s2 { animation-delay: -1.8s; animation-duration: 3.4s; }
@keyframes ln-twinkle { from { opacity: .25; } to { opacity: 1; } }
.tk-lunar-new-year .tk-ln-skylantern { filter: drop-shadow(0 0 10px rgba(255, 179, 92, .7)); }

/* ---------------- Safari savanna ---------------- */
.tk-safari-savanna { background: linear-gradient(180deg, #8fd0ee 0%, #ffe2a8 46%, #ffb760 72%, #d89848 100%); }
.tk-safari-savanna .sf-sky { inset: 0; }
.tk-safari-savanna .sf-grass { left: 0; right: 0; bottom: 0; height: 20%; }
.tk-safari-savanna .sf-near-l { left: 0; bottom: 0; height: clamp(90px, 26%, 34cqw); aspect-ratio: 560 / 440; }
.tk-safari-savanna .sf-near-r { right: 0; bottom: 0; height: clamp(110px, 34%, 44cqw); aspect-ratio: 560 / 440; }
.tk-safari-savanna .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-safari-savanna :is(.sf-cloud, .sf-shimmer, .sf-grass, .sf-leg, .sf-neck, .sf-bird) { transform-box: view-box; }
.tk-safari-savanna .sf-cloud.c1 { animation: sf-cloud 60s ease-in-out infinite alternate; }
.tk-safari-savanna .sf-cloud.c2 { animation: sf-cloud 75s ease-in-out infinite alternate-reverse; }
.tk-safari-savanna .sf-cloud.c3 { animation: sf-cloud 50s ease-in-out infinite alternate; }
@keyframes sf-cloud { from { transform: translateX(-60px); } to { transform: translateX(80px); } }
.tk-safari-savanna .sf-shimmer { animation: sf-shimmer 2.6s ease-in-out infinite alternate; }
@keyframes sf-shimmer { from { opacity: .25; transform: translateX(-6px); } to { opacity: .8; transform: translateX(6px); } }
.tk-safari-savanna .sf-grass.g1 { animation: sf-grass 4.4s ease-in-out infinite alternate; }
.tk-safari-savanna .sf-grass.g2 { animation: sf-grass 3.6s ease-in-out infinite alternate-reverse; }
@keyframes sf-grass { from { transform: skewX(-2.2deg); } to { transform: skewX(2.2deg); } }
.tk-safari-savanna .tk-sf-walker .sf-leg { transform-origin: 50% 0; transform-box: fill-box; animation: sf-step 1.1s ease-in-out infinite alternate; }
.tk-safari-savanna .tk-sf-walker .sf-leg.b { animation-direction: alternate-reverse; }
.tk-safari-savanna .tk-sf-zebra .sf-leg { animation-duration: .42s; }
.tk-safari-savanna .tk-sf-elephant .sf-leg { animation-duration: 1.5s; }
@keyframes sf-step { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.tk-safari-savanna .tk-sf-walker .sf-neck { animation: sf-neck 3.2s ease-in-out infinite alternate; }
@keyframes sf-neck { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.tk-safari-savanna .tk-sf-zebra.trot > svg { animation: sf-trot .42s ease-in-out infinite; }
@keyframes sf-trot { 50% { transform: translateY(-3px); } }
.tk-safari-savanna .tk-sf-zebra.trot.tk-flipx > svg { animation-name: sf-trot-flip; }
@keyframes sf-trot-flip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-3px); } }
.tk-safari-savanna .tk-sf-birds .sf-bird { transform-origin: 50% 50%; transform-box: fill-box; animation: sf-flap .5s ease-in-out infinite alternate; }
.tk-safari-savanna .tk-sf-birds .sf-bird.b2 { animation-delay: -.25s; }
@keyframes sf-flap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }

/* Ocean adventure opening */
.oa-intro { background: transparent; }
.oa-intro-col { position: absolute; left: 0; right: 0; top: 0; height: 280%; background: linear-gradient(180deg, #7fd3ff 0%, #c8f0ff 14%, #58d4df 14.3%, #2eb0cb 30%, #1a8bb6 55%, #10679a 80%, #0d5a8c 100%); will-change: transform, opacity; }
.oa-intro-sky { position: absolute; left: 0; right: 0; top: 0; height: 14.3%; overflow: hidden; }
.oa-intro-sun { position: absolute; width: 22cqmin; height: 22cqmin; right: 14%; top: 10%; border-radius: 50%; background: radial-gradient(circle, #fffbe0 0 30%, rgba(255,240,170,.45) 46%, rgba(255,240,170,0) 70%); }
.oa-intro-cloud { position: absolute; height: 7cqmin; border-radius: 999px; background: #fff; opacity: .92; box-shadow: 4cqmin -2.5cqmin 0 1cqmin #fff, -4cqmin -1.5cqmin 0 .4cqmin #fff; }
.oa-intro-cloud.c1 { width: 22cqmin; left: 12%; top: 34%; }
.oa-intro-cloud.c2 { width: 16cqmin; left: 48%; top: 18%; opacity: .8; }
.oa-intro-surface { position: absolute; left: -2%; width: 104%; top: calc(14.3% - 1.6%); height: 4.5%; }
.oa-intro-water { position: absolute; left: 0; right: 0; top: 14.3%; height: 40%; mix-blend-mode: screen; opacity: .9; }
.oa-intro-water svg { width: 100%; height: 100%; display: block; }
.oa-intro-pip { position: absolute; left: 0; top: 0; width: clamp(70px, 13cqmin, 150px); z-index: 2; will-change: transform; transform-origin: 50% 50%; }
.oa-intro-pip svg { width: 100%; height: auto; display: block; }
.oa-intro-fish, .oa-intro-turtle { position: absolute; left: 0; top: 0; z-index: 1; will-change: transform; }
.oa-intro-fish svg, .oa-intro-turtle svg { width: 100%; height: auto; display: block; }
.oa-intro-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.oa-intro-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; }
.oa-intro-bubble { min-width: min(76cqw, 620px); max-width: 86cqw; box-sizing: border-box; padding: 4.2cqmin 7cqmin; border-radius: 999px; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.6), rgba(255,255,255,.14) 34%, rgba(150,235,245,.2) 70%, rgba(150,235,245,.32)); border: 3px solid rgba(255,255,255,.9); box-shadow: inset 0 0 34px rgba(255,255,255,.4), 0 12px 34px rgba(0,40,70,.28); text-align: center; display: flex; flex-direction: column; gap: 1cqmin; backdrop-filter: blur(2px); }
.oa-intro-kicker { font: 700 clamp(13px, 2.4cqmin, 22px)/1.1 "ClassPlay Display", "ClassPlay Display", 'Baloo 2', Nunito, sans-serif; color: #fff7c9; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(10,60,90,.5); }
.oa-intro-name { font: 800 clamp(28px, 7.4cqmin, 76px)/1.02 "ClassPlay Display", 'Baloo 2', Nunito, sans-serif; color: #fff; -webkit-text-stroke: .1em #0d4f7a; paint-order: stroke fill; text-shadow: 0 .08em 0 #0b3f63; overflow-wrap: anywhere; }
.oa-intro--still { background: transparent; }

/* Space voyage opening */
.svi { background: transparent; }
.svi-col { position: absolute; left: 0; right: 0; top: 0; height: 300%; will-change: transform, opacity; }
.svi-space { position: absolute; left: 0; right: 0; top: 0; height: 60%; background:
  radial-gradient(1.6px 1.6px at 22px 38px, #fff 60%, transparent 62%), radial-gradient(1.2px 1.2px at 140px 90px, #cfe9ff 60%, transparent 62%),
  radial-gradient(2px 2px at 90px 160px, #fff 60%, transparent 62%), radial-gradient(1.2px 1.2px at 180px 20px, #ffe9c7 60%, transparent 62%),
  radial-gradient(60% 40% at 30% 30%, rgba(209,79,216,.35), transparent 70%), radial-gradient(50% 40% at 75% 60%, rgba(47,199,240,.28), transparent 70%), #0b0f2e;
  background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 100% 100%, 100% 100%, 100% 100%; }
.svi-air { position: absolute; left: 0; right: 0; top: 60%; height: 25%; background: linear-gradient(180deg, #0b0f2e 0%, #1d2a78 45%, #3f58c2 80%, #5f78d8 100%); }
.svi-site { position: absolute; left: 0; right: 0; top: 85%; height: 15%; background: linear-gradient(180deg, #5f78d8 0%, #8f7fd6 45%, #ff9f8a 85%, #ffb98f 100%); overflow: hidden; }
.svi-ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.svi-rocket { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; }
.svi-rocket svg { width: 100%; height: auto; display: block; }
.svi-rocket .svi-fire { transform-box: view-box; }
.svi-smoke { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.svi-puff { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #ffffff 0%, #ece8f8 42%, rgba(205,196,236,.55) 60%, rgba(205,196,236,0) 72%); will-change: transform, opacity; }
.svi-count { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 5; font: 700 clamp(56px, 20cqmin, 190px)/1 Poppins, "ClassPlay Round", sans-serif; color: #e9fbff; text-shadow: 0 0 18px #5ff2ff, 0 0 44px rgba(95,242,255,.6); opacity: 0; }
.svi-count.svi-go { color: #ffd34a; text-shadow: 0 0 18px #ffb84a, 0 0 44px rgba(255,184,74,.6); }
.svi-warp { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.svi-bolt { position: absolute; left: 0; top: 0; z-index: 6; will-change: transform; }
.svi-bolt svg { width: 100%; height: auto; display: block; overflow: visible; }
.svi-title { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 7; }
.svi-panel { position: relative; min-width: min(78cqw, 660px); max-width: 88cqw; box-sizing: border-box; padding: 3.6cqmin 6cqmin; border-radius: 3cqmin; background: linear-gradient(180deg, rgba(24,34,104,.86), rgba(10,14,52,.9)); border: 3px solid #5ff2ff; box-shadow: 0 0 26px rgba(95,242,255,.55), inset 0 0 26px rgba(95,242,255,.22); text-align: center; display: flex; flex-direction: column; gap: 1.2cqmin; }
.svi-panel::before, .svi-panel::after { content: ''; position: absolute; width: 4cqmin; height: 4cqmin; border: 3px solid #ffd34a; }
.svi-panel::before { left: -10px; top: -10px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.svi-panel::after { right: -10px; bottom: -10px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.svi-kicker { font: 600 clamp(12px, 2.2cqmin, 20px)/1 Poppins, "ClassPlay Round", sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #ffd34a; }
.svi-name { font: 700 clamp(26px, 6.8cqmin, 70px)/1.06 Poppins, "ClassPlay Round", sans-serif; color: #fff; text-shadow: 0 0 14px rgba(95,242,255,.85); overflow-wrap: anywhere; }
.svi--still { background: transparent; }

/* Dinosaur valley opening */
.dvi { background: transparent; }
.dvi-shade { position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(ellipse at 50% 64%, rgba(60,30,0,0) 34%, rgba(52,28,8,.42) 100%); }
.dvi-nest, .dvi-egg, .dvi-tino { position: absolute; left: 0; top: 0; will-change: transform; }
.dvi-nest { z-index: 1; }
.dvi-tino { z-index: 3; transform-origin: 0 0; }
.dvi-egg { z-index: 4; transform-origin: 50% 92%; }
.dvi-nest svg, .dvi-egg svg, .dvi-tino svg { width: 100%; height: auto; display: block; overflow: visible; }
.dvi-shell-top, .dvi-crack { transform-box: view-box; }
.dvi-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dvi-sign { position: absolute; z-index: 2; left: 50%; top: 30%; width: min(80cqw, 560px); aspect-ratio: 640 / 220; transform: translate(-50%, -160cqh); will-change: transform; }
.dvi-sign > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 8px 0 rgba(84,52,22,.35)); }
.dvi-sign-text { position: absolute; inset: 9% 8% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqmin; text-align: center; }
.dvi-kicker { font: 700 clamp(12px, 2.6cqmin, 22px)/1 "ClassPlay Display", 'Baloo 2', Nunito, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #5b4128; }
.dvi-name { font: 800 clamp(26px, 8.2cqmin, 74px)/1.02 "ClassPlay Display", 'Baloo 2', Nunito, sans-serif; color: #fff4dc; -webkit-text-stroke: .09em #5b3a1e; paint-order: stroke fill; text-shadow: 0 .07em 0 #4a2f17; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dvi--still .dvi-sign { top: 50%; transform: translate(-50%, -50%); }

/* Quiz show studio opening */
.qsi { background: transparent; perspective: 1000px; }
.qsi-curtain { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1; will-change: transform; }
.qsi-curtain--l { left: 0; transform-origin: 0 50%; }
.qsi-curtain--r { right: 0; transform-origin: 100% 50%; }
.qsi-curtain > svg { display: block; width: 100%; height: 100%; }
.qsi-dark { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 50% 40%, rgba(16, 6, 40, .82), rgba(8, 2, 22, .96)); pointer-events: none; }
.qsi-beam { position: absolute; top: -6%; height: 112%; width: 36cqw; margin-left: -18cqw; z-index: 3; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255, 248, 220, .85), rgba(255, 248, 220, .28) 70%, rgba(255, 248, 220, 0)); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.qsi-beam::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 3%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 225, .9), rgba(255, 250, 225, 0)); }
.qsi-beam--0 { filter: hue-rotate(290deg) saturate(3); }
.qsi-beam--2 { filter: hue-rotate(150deg) saturate(3); }
.qsi-sign { position: absolute; left: 50%; top: 36%; z-index: 5; width: min(82cqw, 700px); transform: translate(-50%, -50%); perspective: 900px; }
.qsi-sign-inner { position: relative; box-sizing: border-box; padding: 4.2cqmin 6.5cqmin 4.6cqmin; border-radius: 30px; text-align: center; display: flex; flex-direction: column; gap: 1.1cqmin; transform-origin: 50% 0;
  background: radial-gradient(130% 120% at 50% 0%, #6a2fd0 0%, #3a1590 55%, #26106a 100%); border: 6px solid #ffc21a; box-shadow: 0 0 0 6px #7a3fd8, 0 14px 0 #1a0b48, 0 0 46px rgba(255, 79, 163, .55); }
.qsi-sign-inner::before { content: ''; position: absolute; inset: 6px; border-radius: 24px; padding: 9px; pointer-events: none;
  background: radial-gradient(circle, #fff6c9 0 3.4px, rgba(255, 210, 90, .5) 4.6px, transparent 6px) 0 0 / 20px 20px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: qsi-bulbs .5s steps(2) infinite; }
@keyframes qsi-bulbs { to { background-position: 20px 0; } }
.qsi-kicker { position: relative; font: 700 clamp(12px, 2.3cqmin, 21px)/1 Poppins, "ClassPlay Round", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #ffd84a; text-shadow: 0 2px 0 #1a0b48; }
.qsi-name { position: relative; font: 800 clamp(26px, 7.6cqmin, 76px)/1.04 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #fff; -webkit-text-stroke: .08em #2a1170; paint-order: stroke fill; text-shadow: 0 .07em 0 #1a0b48, 0 0 22px rgba(255, 79, 163, .85); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qsi-lift { position: absolute; left: 0; top: 0; z-index: 4; aspect-ratio: 4 / 1; border-radius: 50%; background: radial-gradient(closest-side, #ffe680, #ffc21a 70%, #c98a00); box-shadow: 0 0 30px rgba(255, 216, 74, .8); will-change: transform; }
.qsi-tivi { position: absolute; left: 0; top: 0; z-index: 6; transform-origin: 0 0; will-change: transform; }
.qsi-tivi svg { width: 100%; height: auto; display: block; overflow: visible; }
.qsi-tivi svg * { transform-box: view-box; }
.qsi-fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.qsi--still .qsi-sign { top: 50%; }

/* Chalkboard classroom opening */
.cci { background: transparent; }
.cci-board { position: absolute; inset: 0; z-index: 0; border: clamp(10px, 2.2cqmin, 22px) solid #b07a48; border-radius: inherit; box-shadow: inset 0 0 0 4px #8a5a2b, inset 0 0 60px rgba(0, 0, 0, .35);
  background: radial-gradient(40% 30% at 30% 30%, rgba(255, 255, 255, .1), transparent 70%), radial-gradient(45% 35% at 70% 70%, rgba(255, 255, 255, .08), transparent 70%), linear-gradient(180deg, #357758, #28603f); }
.cci-frame { position: absolute; inset: 6% 5%; z-index: 1; pointer-events: none; }
.cci-frame > svg, .cci-underline > svg, .cci-star > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cci-star { position: absolute; z-index: 1; width: clamp(40px, 9cqmin, 90px); aspect-ratio: 1; }
.cci-star--a { left: 10%; top: 12%; } .cci-star--b { right: 11%; bottom: 16%; transform: rotate(14deg); }
.cci-words { position: absolute; left: 50%; top: 44%; z-index: 2; transform: translate(-50%, -50%); width: min(80cqw, 760px); display: flex; flex-direction: column; align-items: center; gap: 1.4cqmin; text-align: center; }
.cci-kicker { font: 700 clamp(13px, 2.6cqmin, 24px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffe08a; text-shadow: 0 0 2px rgba(255, 224, 138, .6); }
.cci-name { font: 700 clamp(28px, 8.4cqmin, 84px)/1.08 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #fbfbf2; text-shadow: 0 0 1.5px rgba(255, 255, 255, .8), 2px 2px 0 rgba(255, 255, 255, .12); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 .1em; }
.cci-chalk { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(34px, 6cqmin, 64px); height: clamp(9px, 1.5cqmin, 16px); margin: -6px 0 0 -4px; border-radius: 4px; background: linear-gradient(180deg, #ffffff, #e9e6da); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transform-origin: 0 50%; }
.cci-underline { position: absolute; z-index: 2; height: clamp(14px, 3cqmin, 30px); }
.cci-bell { position: absolute; right: 7%; top: 8%; z-index: 3; width: clamp(48px, 10cqmin, 100px); transform-origin: 50% 8%; }
.cci-bell svg { display: block; width: 100%; height: auto; }
.cci-penny { position: absolute; left: 0; top: 0; z-index: 5; transform-origin: 0 0; will-change: transform; }
.cci-penny svg { width: 100%; height: auto; display: block; overflow: visible; }
.cci-penny svg * { transform-box: view-box; }
.cci-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.cci--still .cci-words { top: 50%; }

/* Lunar New Year opening */
.lni { background: transparent; }
.lni-shade { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 40%, rgba(30, 8, 50, .82), rgba(14, 4, 26, .96)); }
.lni-crackers { position: absolute; left: 7%; top: 0; z-index: 3; width: clamp(28px, 5cqmin, 54px); aspect-ratio: 60 / 300; }
.lni-crackers svg, .lni-lantern svg { display: block; width: 100%; height: auto; }
.lni-lantern { position: absolute; top: 0; z-index: 2; width: clamp(40px, 8.5cqmin, 96px); margin-left: clamp(-48px, -4.25cqmin, -20px); transform-origin: 50% 0; }
.lni-scroll { position: absolute; left: 50%; top: 18%; z-index: 4; width: min(74cqw, 640px); display: flex; flex-direction: column; align-items: stretch; transform: translate(-50%, 0); }
.lni-rod { position: relative; z-index: 2; height: clamp(12px, 2.4cqmin, 22px); margin: 0 -4%; border-radius: 999px; background: linear-gradient(180deg, #a0602c, #6b3a1e); box-shadow: 0 3px 0 rgba(40, 10, 10, .4); }
.lni-rod::before, .lni-rod::after { content: ''; position: absolute; top: 50%; width: clamp(14px, 2.8cqmin, 26px); aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 35%, #fff2b0, #f6b72b 55%, #b47a06); }
.lni-rod::before { left: -6px; } .lni-rod::after { right: -6px; }
.lni-paper { position: relative; margin: -4px 0; padding: 4.4cqmin 6cqmin 4.8cqmin; text-align: center; display: flex; flex-direction: column; gap: 1.2cqmin; background: radial-gradient(120% 90% at 50% 0%, #ef4b4f, #c41e2b 60%, #a81f2a); box-shadow: inset 0 0 0 6px #a81f2a, inset 0 0 0 9px #f6b72b, inset 0 0 0 12px #a81f2a; }
.lni-paper::before, .lni-paper::after { content: ''; position: absolute; width: clamp(18px, 4cqmin, 36px); aspect-ratio: 1; top: 18px; border: 3px solid #f6b72b; border-radius: 0 0 0 60%; border-top: 0; border-right: 0; }
.lni-paper::before { left: 18px; } .lni-paper::after { right: 18px; transform: scaleX(-1); }
.lni-kicker { font: 700 clamp(13px, 2.6cqmin, 24px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffd36b; text-shadow: 0 2px 0 #7a1020; }
.lni-name { font: 800 clamp(26px, 7.6cqmin, 76px)/1.06 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #fff6e0; -webkit-text-stroke: .07em #7a1020; paint-order: stroke fill; text-shadow: 0 .07em 0 #5a0a14, 0 0 18px rgba(255, 211, 107, .55); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lni-lulu { position: absolute; left: 0; top: 0; z-index: 6; transform-origin: 0 0; will-change: transform; }
.lni-lulu svg { width: 100%; height: auto; display: block; overflow: visible; }
.lni-lulu svg * { transform-box: view-box; }
.lni-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.lni--still .lni-scroll { top: 50%; transform: translate(-50%, -50%); }

/* Safari savanna opening */
.sfi { background: transparent; }
.sfi-animal { position: absolute; left: 0; top: 0; z-index: 1; will-change: transform; }
.sfi-animal svg { display: block; width: 100%; height: auto; }
.sfi .sf-leg { transform-box: fill-box; transform-origin: 50% 0; animation: sf-step 1s ease-in-out infinite alternate; }
.sfi .sf-leg.b { animation-direction: alternate-reverse; }
.sfi .sfi-zebra .sf-leg { animation-duration: .4s; }
.sfi .sf-neck { transform-box: view-box; }
.sfi-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sfi-veil svg { display: block; width: 100%; height: 100%; }
.sfi-bino, .sfi-rims { transform-box: view-box; transform-origin: 0 0; }
.sfi-sign { position: absolute; left: 50%; bottom: 14%; z-index: 3; width: min(78cqw, 660px); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.sfi-plank { position: relative; box-sizing: border-box; width: 100%; padding: 3.6cqmin 6cqmin 4cqmin; border-radius: 22px; text-align: center; display: flex; flex-direction: column; gap: 1cqmin;
  background: repeating-linear-gradient(178deg, rgba(255, 255, 255, .08) 0 4px, transparent 4px 14px), linear-gradient(180deg, #d39a5a, #a8703e); border: 5px solid #6b3a1e; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 8px 0 #4a2610, 0 16px 26px rgba(60, 30, 10, .35); }
.sfi-plank::before, .sfi-plank::after { content: ''; position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #4a2610; box-shadow: 0 calc(100% + 0px) 0 #4a2610; }
.sfi-plank::before { left: 16px; } .sfi-plank::after { right: 16px; }
.sfi-post { width: clamp(16px, 3cqmin, 28px); height: clamp(40px, 12cqh, 120px); margin-top: -4px; background: linear-gradient(90deg, #8a5a2b, #6b3a1e); border-radius: 0 0 6px 6px; }
.sfi-kicker { font: 700 clamp(13px, 2.5cqmin, 23px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #ffe8b0; text-shadow: 0 2px 0 #4a2610; }
.sfi-name { font: 800 clamp(26px, 7.4cqmin, 74px)/1.06 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #fff8e6; -webkit-text-stroke: .07em #4a2610; paint-order: stroke fill; text-shadow: 0 .07em 0 #3a1e08; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sfi-mound { position: absolute; z-index: 5; aspect-ratio: 16 / 7; border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px; transform-origin: 50% 100%; background: radial-gradient(ellipse at 50% 30%, #3a2410 0 22%, transparent 23%), linear-gradient(180deg, #e2a656, #b8782e); }
.sfi-kiki { position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 0 0; will-change: transform; }
.sfi-kiki svg { width: 100%; height: auto; display: block; overflow: visible; }
.sfi-kiki svg * { transform-box: view-box; }
.sfi-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sfi--still .sfi-sign { bottom: auto; top: 50%; transform: translate(-50%, -50%); }

/* ---------------- Polar expedition ---------------- */
.tk-polar-expedition { background: linear-gradient(180deg, #16386f 0%, #2f6db0 34%, #7cbde6 60%, #cdeefa 78%, #f2fbff 100%); }
.tk-polar-expedition .pl-sky { inset: 0; }
.tk-polar-expedition .pl-ground { left: 0; right: 0; bottom: 0; height: 19%; }
.tk-polar-expedition .pl-near-l { left: 0; bottom: 0; height: clamp(90px, 28%, 36cqw); aspect-ratio: 560 / 440; }
.tk-polar-expedition .pl-near-r { right: 0; bottom: 0; height: clamp(110px, 34%, 44cqw); aspect-ratio: 560 / 440; }
.tk-polar-expedition .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-polar-expedition :is(.pl-aurora, .pl-stars circle, .pl-glint, .pl-sparkle) { transform-box: view-box; }
.tk-polar-expedition .pl-aurora { animation: pl-aurora 14s ease-in-out infinite alternate; }
.tk-polar-expedition .pl-aurora.a2 { animation-duration: 19s; animation-delay: -6s; }
@keyframes pl-aurora { from { transform: translateX(-30px) skewX(-4deg); opacity: .55; } to { transform: translateX(40px) skewX(5deg); opacity: 1; } }
.tk-polar-expedition .pl-stars circle { animation: pl-twinkle 2.8s ease-in-out infinite alternate; }
.tk-polar-expedition .pl-stars .s1 { animation-delay: -1.1s; } .tk-polar-expedition .pl-stars .s2 { animation-delay: -2s; }
@keyframes pl-twinkle { from { opacity: .3; } to { opacity: 1; } }
.tk-polar-expedition .pl-glint { animation: pl-glint 3s ease-in-out infinite alternate; }
@keyframes pl-glint { from { opacity: .2; transform: translateX(-8px); } to { opacity: .8; transform: translateX(8px); } }
.tk-polar-expedition .pl-sparkle { animation: pl-twinkle 1.9s ease-in-out infinite alternate; }
.tk-polar-expedition .pl-flag { transform-box: fill-box; transform-origin: 0 50%; animation: pl-flag 1.6s ease-in-out infinite alternate; }
@keyframes pl-flag { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(5deg) scaleX(1.04); } }
.tk-polar-expedition .tk-pl-walker > svg { transform-origin: 50% 100%; animation: pl-waddle .5s ease-in-out infinite alternate; }
.tk-polar-expedition .tk-pl-walker.tk-flipx > svg { animation-name: pl-waddle-flip; }
@keyframes pl-waddle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes pl-waddle-flip { from { transform: scaleX(-1) rotate(-7deg); } to { transform: scaleX(-1) rotate(7deg); } }
.tk-polar-expedition .tk-pl-bird .pl-wing { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-glide 1.8s ease-in-out infinite alternate; }
@keyframes pl-glide { from { transform: scaleY(1); } to { transform: scaleY(.6); } }
.tk-polar-expedition :is(.tk-pl-floe, .tk-pl-ship) > svg { animation: pl-bob 3.2s ease-in-out infinite alternate; }
.tk-polar-expedition :is(.tk-pl-floe, .tk-pl-ship).tk-flipx > svg { animation-name: pl-bob-flip; }
@keyframes pl-bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(3px) rotate(1deg); } }
@keyframes pl-bob-flip { from { transform: scaleX(-1) translateY(0) rotate(-1deg); } to { transform: scaleX(-1) translateY(3px) rotate(1deg); } }
.tk-polar-expedition .tk-pl-whale .pl-tail { transform-box: fill-box; transform-origin: 50% 100%; }
.tk-polar-expedition .tk-pl-whale .pl-ripple { transform-box: fill-box; transform-origin: 50% 50%; }

.tk-polar-expedition .pl-drift { animation: pl-drift 4.6s ease-in-out infinite alternate; }
@keyframes pl-drift { from { transform: translate(-6px, 0); } to { transform: translate(8px, 2px); } }
.tk-polar-expedition .pl-colony .pl-p { transform-box: fill-box; transform-origin: 50% 100%; }
.tk-polar-expedition .pl-colony .w1 { animation: pl-waddle 1.6s ease-in-out infinite alternate; }
.tk-polar-expedition .pl-colony .w2 { animation: pl-waddle 2.1s ease-in-out infinite alternate-reverse; }
.tk-polar-expedition .pl-near-r :is(.pl-head, .pl-wave, .pl-face) { transform-box: fill-box; }
.tk-polar-expedition .pl-near-r .pl-head { transform-origin: 4% 55%; animation: pl-nuzzle 6.5s ease-in-out infinite; }
@keyframes pl-nuzzle { 0%, 55%, 100% { transform: rotate(0); } 66%, 82% { transform: rotate(11deg); } }
.tk-polar-expedition .pl-near-r .pl-wave { transform-origin: 18% 92%; animation: pl-wave 6.5s ease-in-out infinite; }
@keyframes pl-wave { 0%, 8%, 40%, 100% { transform: rotate(0); } 14%, 26% { transform: rotate(-22deg); } 20%, 32% { transform: rotate(10deg); } }
.tk-polar-expedition .pl-near-r .pl-face { transform-origin: 50% 90%; animation: pl-tilt 6.5s ease-in-out infinite; }
@keyframes pl-tilt { 0%, 44%, 100% { transform: rotate(0); } 54%, 66% { transform: rotate(-8deg); } }
.tk-polar-expedition .tk-pl-bear :is(.pl-leg, .pl-head) { transform-box: fill-box; }
.tk-polar-expedition .tk-pl-bear .pl-leg { transform-origin: 50% 8%; animation: pl-step 1s ease-in-out infinite alternate; }
.tk-polar-expedition .tk-pl-bear .pl-leg.b { animation-direction: alternate-reverse; }
@keyframes pl-step { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.tk-polar-expedition .tk-pl-bear .pl-head { transform-origin: 6% 50%; animation: pl-nod 1s ease-in-out infinite alternate; }
@keyframes pl-nod { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }
.tk-polar-expedition .tk-pl-bear.cub :is(.pl-leg, .pl-head) { animation-duration: .6s; }

/* ---------------- Farm friends ---------------- */
.tk-farm-friends { background: linear-gradient(180deg, #6cc4f0 0%, #b8e4f8 42%, #e9f7d8 64%, #9fd664 76%, #6fb845 100%); }
.tk-farm-friends .fm-sky { inset: 0; }
.tk-farm-friends .fm-grass { left: 0; right: 0; bottom: 0; height: 19%; }
.tk-farm-friends .fm-near-l { left: 0; bottom: 0; height: clamp(90px, 28%, 36cqw); aspect-ratio: 560 / 440; }
.tk-farm-friends .fm-near-r { right: 0; bottom: 0; height: clamp(120px, 38%, 46cqw); aspect-ratio: 560 / 440; }
.tk-farm-friends .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-farm-friends :is(.fm-cloud, .fm-grass) { transform-box: view-box; }
.tk-farm-friends .fm-cloud.c1 { animation: fm-cloud 58s ease-in-out infinite alternate; }
.tk-farm-friends .fm-cloud.c2 { animation: fm-cloud 72s ease-in-out infinite alternate-reverse; }
.tk-farm-friends .fm-cloud.c3 { animation: fm-cloud 48s ease-in-out infinite alternate; }
@keyframes fm-cloud { from { transform: translateX(-60px); } to { transform: translateX(80px); } }
.tk-farm-friends .fm-rays { transform-box: view-box; transform-origin: 1250px 170px; animation: fm-rays 40s linear infinite; }
@keyframes fm-rays { to { transform: rotate(360deg); } }
.tk-farm-friends .fm-wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: fm-spin 6s linear infinite; }
@keyframes fm-spin { to { transform: rotate(360deg); } }
.tk-farm-friends .fm-vane { transform-box: fill-box; transform-origin: 30% 100%; animation: fm-vane 5s ease-in-out infinite alternate; }
@keyframes fm-vane { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
.tk-farm-friends .fm-grass.g1 { animation: fm-grass 4.4s ease-in-out infinite alternate; }
.tk-farm-friends .fm-grass.g2 { animation: fm-grass 3.6s ease-in-out infinite alternate-reverse; }
@keyframes fm-grass { from { transform: skewX(-2.2deg); } to { transform: skewX(2.2deg); } }
.tk-farm-friends .tk-fm-tractor .fm-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: fm-spin 1.4s linear infinite; }
.tk-farm-friends .tk-fm-tractor .fm-puff { transform-box: fill-box; transform-origin: 30% 100%; animation: fm-puff 1.2s ease-out infinite; }
@keyframes fm-puff { from { transform: translateY(6px) scale(.5); opacity: .9; } to { transform: translateY(-10px) scale(1.3); opacity: 0; } }
.tk-farm-friends .tk-fm-tractor > svg { animation: fm-chug .3s ease-in-out infinite alternate; }
.tk-farm-friends .tk-fm-tractor.tk-flipx > svg { animation-name: fm-chug-flip; }
@keyframes fm-chug { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes fm-chug-flip { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-1.5px); } }
.tk-farm-friends .tk-fm-waddle > svg { transform-origin: 50% 100%; animation: pl-waddle .4s ease-in-out infinite alternate; }
.tk-farm-friends .tk-fm-waddle.tk-flipx > svg { animation-name: pl-waddle-flip; }
.tk-farm-friends .tk-fm-cow .fm-leg { transform-box: fill-box; transform-origin: 50% 0; animation: fm-step 1.3s ease-in-out infinite alternate; }
.tk-farm-friends .tk-fm-cow .fm-leg.b { animation-direction: alternate-reverse; }
@keyframes fm-step { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.tk-farm-friends .tk-fm-cow .fm-head { transform-box: fill-box; transform-origin: 10% 30%; animation: fm-nod 2.6s ease-in-out infinite alternate; }
@keyframes fm-nod { from { transform: rotate(-4deg); } to { transform: rotate(10deg); } }
.tk-farm-friends .tk-fm-butterfly .fm-wing { animation: fm-flutter .18s ease-in-out infinite alternate; }
.tk-farm-friends .tk-fm-butterfly.b2 .fm-wing { animation-duration: .22s; }
@keyframes fm-flutter { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.tk-farm-friends .tk-fm-birds .fm-bird { transform-origin: 50% 50%; transform-box: fill-box; animation: fm-flap .45s ease-in-out infinite alternate; }
.tk-farm-friends .tk-fm-birds .fm-bird.b2 { animation-delay: -.22s; }
@keyframes fm-flap { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }

.tk-farm-friends :is(.fm-graze, .fm-calf, .fm-baa, .fm-goat) :is(.fm-head, .fm-tail), .tk-farm-friends :is(.fm-peck, .fm-cat, .fm-blink) { transform-box: fill-box; }
.tk-farm-friends :is(.fm-graze, .fm-calf, .fm-baa) .fm-head { transform-origin: 10% 30%; }
.tk-farm-friends .fm-graze .fm-head { animation: fm-graze 7s ease-in-out infinite; }
.tk-farm-friends .fm-graze.g2 .fm-head { animation-delay: -3.4s; animation-duration: 8.2s; }
@keyframes fm-graze { 0%, 28%, 100% { transform: rotate(0); } 38%, 86% { transform: rotate(28deg); } 50%, 62%, 74% { transform: rotate(23deg); } 56%, 68% { transform: rotate(30deg); } }
.tk-farm-friends .fm-calf .fm-head { animation: fm-nod 2.8s ease-in-out infinite alternate; }
.tk-farm-friends :is(.fm-graze, .fm-calf) .fm-tail { transform-origin: 90% 5%; animation: fm-swish 2.2s ease-in-out infinite alternate; }
@keyframes fm-swish { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
.tk-farm-friends .fm-baa .fm-head { animation: fm-baa 6s ease-in-out infinite; }
.tk-farm-friends .fm-baa.b2 .fm-head { animation-delay: -2.5s; }
@keyframes fm-baa { 0%, 66%, 100% { transform: rotate(0); } 72%, 90% { transform: rotate(-12deg); } }
.tk-farm-friends .fm-peck { transform-origin: 50% 100%; animation: fm-peck 2.4s ease-in-out infinite; }
.tk-farm-friends .fm-peck.p2 { animation-delay: -1s; animation-duration: 2.8s; }
.tk-farm-friends .fm-peck.p3 { animation-delay: -1.7s; animation-duration: 2s; }
@keyframes fm-peck { 0%, 40%, 100% { transform: rotate(0); } 48%, 60% { transform: rotate(24deg); } 54% { transform: rotate(6deg); } 68% { transform: rotate(0); } }
.tk-farm-friends .fm-bob { animation: fm-bobbing 2.6s ease-in-out infinite alternate; }
.tk-farm-friends .fm-bob.b2 { animation-delay: -1.3s; }
@keyframes fm-bobbing { from { transform: translateY(0); } to { transform: translateY(2.5px); } }
.tk-farm-friends .fm-goat .fm-head { transform-origin: 20% 70%; animation: fm-proud 5.5s ease-in-out infinite; }
@keyframes fm-proud { 0%, 58%, 100% { transform: rotate(0); } 66%, 84% { transform: rotate(-12deg); } }
.tk-farm-friends .fm-goat .fm-tail { transform-origin: 80% 100%; animation: fm-swish .5s ease-in-out infinite alternate; }
.tk-farm-friends .fm-cat { transform-origin: 50% 100%; animation: fm-cat 7s ease-in-out infinite; }
@keyframes fm-cat { 0%, 50%, 100% { transform: rotate(0); } 60%, 76% { transform: rotate(-12deg); } }
.tk-farm-friends .fm-blink, .fmi2-barn .fm-blink { transform-origin: 50% 50%; animation: fm-blink 4s infinite; }
.fmi2-barn .fm-blink { transform-box: fill-box; animation-duration: 1.7s; }
@keyframes fm-blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.tk-farm-friends.fmi2-hold .fm-near-r { opacity: 0; }

/* ---------------- Pirate island ---------------- */
.tk-pirate-island { background: linear-gradient(180deg, #4fc0ef 0%, #9fe0f5 38%, #dcf6fb 56%, #2fb3c8 66%, #0f86a8 84%, #f2d690 100%); }
.tk-pirate-island .pr-sky { inset: 0; }
.tk-pirate-island .pr-sand { left: 0; right: 0; bottom: 0; height: 18%; }
.tk-pirate-island .pr-near-l { left: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-pirate-island .pr-near-r { right: 0; bottom: 0; height: clamp(110px, 34%, 44cqw); aspect-ratio: 560 / 440; }
.tk-pirate-island .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-pirate-island :is(.pr-cloud, .pr-wave, .pr-glint, .pr-foam) { transform-box: view-box; }
.tk-pirate-island .pr-cloud.c1 { animation: fm-cloud 60s ease-in-out infinite alternate; }
.tk-pirate-island .pr-cloud.c2 { animation: fm-cloud 74s ease-in-out infinite alternate-reverse; }
.tk-pirate-island .pr-cloud.c3 { animation: fm-cloud 50s ease-in-out infinite alternate; }
.tk-pirate-island .pr-wave.w1 { animation: pr-wave 4.2s ease-in-out infinite alternate; }
.tk-pirate-island .pr-wave.w2 { animation: pr-wave 5.4s ease-in-out infinite alternate-reverse; }
@keyframes pr-wave { from { transform: translateX(-14px); opacity: .25; } to { transform: translateX(14px); opacity: .6; } }
.tk-pirate-island .pr-glint, .tk-pirate-island .pr-coin { animation: pl-twinkle 2.2s ease-in-out infinite alternate; }
.tk-pirate-island .pr-foam { animation: pr-foam 3.6s ease-in-out infinite alternate; }
@keyframes pr-foam { from { transform: translateY(0); opacity: .9; } to { transform: translateY(5px); opacity: .55; } }
.tk-pirate-island .pr-glow { animation: pr-glow 2.4s ease-in-out infinite alternate; }
@keyframes pr-glow { from { opacity: .45; } to { opacity: 1; } }
.tk-pirate-island .pr-flag { transform-box: fill-box; transform-origin: 0 50%; animation: pl-flag 1.4s ease-in-out infinite alternate; }
.tk-pirate-island .pr-crab { animation: pr-crab 5s ease-in-out infinite alternate; }
@keyframes pr-crab { 0%, 40% { transform: translate(940px, 150px); } 60%, 100% { transform: translate(1010px, 150px); } }
.tk-pirate-island :is(.tk-pr-ship, .tk-pr-bottle) > svg { animation: pl-bob 2.8s ease-in-out infinite alternate; }
.tk-pirate-island :is(.tk-pr-ship, .tk-pr-bottle).tk-flipx > svg { animation-name: pl-bob-flip; }
.tk-pirate-island .tk-pr-ship .pr-sail { transform-box: fill-box; transform-origin: 50% 50%; animation: pr-sail 3s ease-in-out infinite alternate; }
@keyframes pr-sail { from { transform: scaleX(.96); } to { transform: scaleX(1.04); } }
.tk-pirate-island .tk-pr-ship .pr-flag2 { transform-box: fill-box; transform-origin: 0 50%; animation: pl-flag 1.2s ease-in-out infinite alternate; }
.tk-pirate-island .tk-pr-gulls .pr-gull { transform-origin: 50% 50%; transform-box: fill-box; animation: fm-flap .5s ease-in-out infinite alternate; }
.tk-pirate-island .tk-pr-gulls .pr-gull.b2 { animation-delay: -.25s; }

.tk-pirate-island .pr-moored { transform-box: fill-box; transform-origin: 50% 84%; animation: pr-moor 4s ease-in-out infinite alternate; }
@keyframes pr-moor { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
.tk-pirate-island .pr-jolly { transform-box: fill-box; transform-origin: 0 50%; animation: pl-flag 1.3s ease-in-out infinite alternate; }
.tk-pirate-island .pr-foam2 { animation: pr-foam 3s ease-in-out infinite alternate; }
.tk-pirate-island :is(.pr-mate, .pr-lookout) :is(.pr-wave-l, .pr-wave-r), .tk-pirate-island :is(.pr-watch, .pr-digger .pr-dig, .pr-reader .pr-map, .pr-watch .pr-spy, .pr-eyes) { transform-box: fill-box; }
.tk-pirate-island :is(.pr-mate, .pr-lookout) .pr-wave-l { transform-origin: 77% 86%; animation: pr-wave-l 1.2s ease-in-out infinite alternate; }
.tk-pirate-island :is(.pr-mate, .pr-lookout) .pr-wave-r { transform-origin: 23% 86%; animation: pr-wave-r 1.2s ease-in-out infinite alternate; }
.tk-pirate-island .pr-lookout :is(.pr-wave-l, .pr-wave-r) { animation-delay: -.6s; }
@keyframes pr-wave-l { from { transform: rotate(-18deg); } to { transform: rotate(10deg); } }
@keyframes pr-wave-r { from { transform: rotate(18deg); } to { transform: rotate(-10deg); } }
.tk-pirate-island .pr-watch { transform-origin: 50% 100%; animation: pr-sway 3.2s ease-in-out infinite alternate; }
@keyframes pr-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.tk-pirate-island .pr-watch .pr-spy { transform-origin: 70% 90%; animation: pr-scan 4.5s ease-in-out infinite alternate; }
@keyframes pr-scan { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.tk-pirate-island .pr-digger .pr-dig { transform-origin: 68% 4%; animation: pr-dig 1.3s ease-in-out infinite; }
@keyframes pr-dig { 0%, 100% { transform: rotate(-6deg); } 40%, 60% { transform: translateY(4px) rotate(10deg); } }
.tk-pirate-island .pr-reader .pr-map { transform-origin: 50% 100%; animation: pr-read 3s ease-in-out infinite alternate; }
@keyframes pr-read { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.tk-pirate-island :is(.pr-watch, .pr-digger, .pr-reader) .pr-eyes { transform-origin: 50% 50%; animation: fm-blink 4.2s infinite; }
.tk-pirate-island .pr-digger .pr-eyes { animation-delay: -1.4s; }
.tk-pirate-island .pr-reader .pr-eyes { animation-delay: -2.6s; }

.tk-pirate-island.pri2-hold .pr-moored { opacity: 0; }
/* ---------------- Fairy-tale castle ---------------- */
.tk-fairytale-castle { background: linear-gradient(180deg, #8ab4ff 0%, #c3c2ff 36%, #ffd2ec 60%, #b9e59a 74%, #84c868 100%); }
.tk-fairytale-castle .fc-sky { inset: 0; }
.tk-fairytale-castle .fc-meadow { left: 0; right: 0; bottom: 0; height: 19%; }
.tk-fairytale-castle .fc-near-l { left: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-fairytale-castle .fc-near-r { right: 0; bottom: 0; height: clamp(110px, 34%, 44cqw); aspect-ratio: 560 / 440; }
.tk-fairytale-castle .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-fairytale-castle :is(.fc-cloud, .fc-grass, .fc-rainbow) { transform-box: view-box; }
.tk-fairytale-castle .fc-cloud.c1 { animation: fm-cloud 62s ease-in-out infinite alternate; }
.tk-fairytale-castle .fc-cloud.c2 { animation: fm-cloud 76s ease-in-out infinite alternate-reverse; }
.tk-fairytale-castle .fc-cloud.c3 { animation: fm-cloud 52s ease-in-out infinite alternate; }
.tk-fairytale-castle .fc-rainbow { animation: fc-shine 6s ease-in-out infinite alternate; }
@keyframes fc-shine { from { opacity: .4; } to { opacity: .65; } }
.tk-fairytale-castle :is(.fc-twinkle > g, .fc-sparkle path) { transform-box: fill-box; transform-origin: 50% 50%; animation: fc-twinkle 2.4s ease-in-out infinite alternate; }
.tk-fairytale-castle .fc-twinkle .s1 { animation-delay: -.9s; } .tk-fairytale-castle .fc-twinkle .s2 { animation-delay: -1.7s; }
@keyframes fc-twinkle { from { opacity: .25; transform: scale(.6); } to { opacity: 1; transform: scale(1.1); } }
.tk-fairytale-castle .fc-pennant { transform-box: fill-box; transform-origin: 0 50%; animation: pl-flag 1.5s ease-in-out infinite alternate; }
.tk-fairytale-castle .fc-pennant.p2 { animation-delay: -.5s; } .tk-fairytale-castle .fc-pennant.p3 { animation-delay: -1s; }
.tk-fairytale-castle .fc-grass.g1 { animation: fm-grass 4.4s ease-in-out infinite alternate; }
.tk-fairytale-castle .fc-smoke { transform-box: fill-box; transform-origin: 50% 100%; animation: fc-smoke 3.2s ease-out infinite; }
@keyframes fc-smoke { from { transform: translateY(16px) scale(.6); opacity: .9; } to { transform: translateY(-14px) scale(1.15); opacity: 0; } }
.tk-fairytale-castle .fc-lantern { animation: pr-glow 1.8s ease-in-out infinite alternate; }
.tk-fairytale-castle .tk-fc-unicorn .fc-leg { transform-box: fill-box; transform-origin: 50% 0; animation: fm-step .5s ease-in-out infinite alternate; }
.tk-fairytale-castle .tk-fc-unicorn .fc-leg.b { animation-direction: alternate-reverse; }
.tk-fairytale-castle .tk-fc-unicorn.trot > svg { animation: fc-trot .5s ease-in-out infinite; }
.tk-fairytale-castle .tk-fc-unicorn.trot.tk-flipx > svg { animation-name: fc-trot-flip; }
@keyframes fc-trot { 50% { transform: translateY(-4px); } }
@keyframes fc-trot-flip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-4px); } }
.tk-fairytale-castle .tk-fc-butterfly .fc-wing { animation: fm-flutter .2s ease-in-out infinite alternate; }
.tk-fairytale-castle .tk-fc-butterfly.b2 .fc-wing { animation-duration: .24s; }
.tk-fairytale-castle .tk-fc-birds .fc-flap { transform-box: fill-box; transform-origin: 100% 100%; animation: fc-flap .3s ease-in-out infinite alternate; }
@keyframes fc-flap { from { transform: rotate(0); } to { transform: rotate(40deg); } }
.tk-fairytale-castle .tk-fc-birds .fc-ribbon { animation: fc-ribbon 1s ease-in-out infinite alternate; }
@keyframes fc-ribbon { from { transform: translateY(0); } to { transform: translateY(3px); } }
.tk-fairytale-castle .tk-fc-star { filter: drop-shadow(0 0 6px rgba(255, 240, 180, .9)); }

/* Polar expedition opening */
.pli2 { background: transparent; }
.pli2-night { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6, 16, 46, .82), rgba(10, 30, 70, .55) 58%, rgba(20, 50, 90, .3)); }
.pli2-aurora { position: absolute; left: -6%; right: -6%; top: 0; height: 72%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.pli2-aurora > svg { display: block; width: 100%; height: 100%; }
.pli2 :is(.pli2-bear, .pli2-ball, .pli2-cub, .pli2-pip, .pli2-peng) { position: absolute; left: 0; top: 0; will-change: transform; }
.pli2-bear { z-index: 2; }
.pli2-ball { z-index: 3; transform-origin: 50% 100%; }
.pli2-cub { z-index: 3; transform-origin: 50% 60%; }
.pli2-peng { z-index: 3; transform-origin: 50% 100%; }
.pli2-pip { z-index: 4; transform-origin: 50% 55%; }
.pli2 :is(.pli2-bear, .pli2-ball, .pli2-cub, .pli2-pip, .pli2-peng) svg { display: block; width: 100%; height: auto; overflow: visible; }
.pli2-peng svg { transform: scaleX(-1); }
.pli2-pip svg * { transform-box: view-box; }
.pli2 :is(.pl-leg, .pl-head, .pl-flipper) { transform-box: fill-box; }
.pli2 .pl-leg { transform-origin: 50% 8%; }
.pli2 .pl-head { transform-origin: 6% 50%; }
.pli2 .pl-flipper { transform-origin: 70% 6%; }
.pli2-sign { position: absolute; left: 50%; top: 6%; z-index: 3; width: min(80cqw, 680px); transform: translateX(-50%); transform-origin: 50% 40%; }
.pli2-board { position: relative; box-sizing: border-box; width: 100%; padding: 3.4cqmin 6cqmin 3.6cqmin; border-radius: 24px; text-align: center; display: flex; flex-direction: column; gap: .9cqmin;
  background: linear-gradient(180deg, #f7fdff 0%, #dcf3ff 55%, #bfe6fb 100%); border: 4px solid #5aa8dc; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), inset 0 -10px 18px rgba(120, 190, 235, .35), 0 0 28px rgba(140, 240, 220, .55), 0 10px 24px rgba(10, 40, 80, .3); }
.pli2-board::before { content: ''; position: absolute; left: 12px; right: 12px; top: -13px; height: 24px; border-radius: 999px; background: #ffffff; box-shadow: 0 3px 0 #d4ecfa; }
.pli2-icicles { position: absolute; left: 4%; width: 92%; top: calc(100% - 4px); height: clamp(14px, 4.6cqmin, 40px); transform-origin: 50% 0; overflow: visible; }
.pli2-icicles path { fill: #d9f3ff; stroke: #7cc0e8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pli2-kicker { font: 700 clamp(13px, 2.5cqmin, 23px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #e8553a; }
.pli2-name { font: 800 clamp(26px, 7.2cqmin, 72px)/1.06 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #163e6b; text-shadow: 0 .05em 0 #ffffff; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pli2-poof { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #ffffff 0 34%, rgba(240, 250, 255, .92) 50%, rgba(220, 240, 252, .5) 62%, rgba(220, 240, 252, 0) 72%); }
.pli2-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.pli2--still .pli2-sign { top: 50%; transform: translate(-50%, -50%); }

/* Farm friends opening */
.fmi2 { background: transparent; }
.fmi2-dawn { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 140, 90, .62), rgba(255, 196, 120, .4) 55%, rgba(255, 226, 160, .22)); }
.fmi2-barn { position: absolute; z-index: 2; transform-origin: 0 0; will-change: transform; }
.fmi2-barn > svg { display: block; width: 100%; height: 100%; }
.fmi2-door { position: absolute; left: 43.93%; top: 71.82%; width: 30%; height: 28.18%; perspective: 700px; }
.fmi2-inside { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, #7a4518 0%, #3a1e0b 55%, #1e0f05 100%); }
.fmi2-eyes { position: absolute; width: 13%; height: 7%; background: radial-gradient(circle at 25% 50%, #fff7c8 0 26%, transparent 32%), radial-gradient(circle at 75% 50%, #fff7c8 0 26%, transparent 32%); filter: drop-shadow(0 0 4px rgba(255, 236, 150, .9)); }
.fmi2-leaf { position: absolute; top: 0; bottom: 0; width: 50%; }
.fmi2-leaf svg { display: block; width: 100%; height: 100%; }
.fmi2-leaf.l { left: 0; transform-origin: 0 50%; }
.fmi2-leaf.r { right: 0; transform-origin: 100% 50%; }
.fmi2 :is(.fmi2-animal, .fmi2-rooster, .fmi2-poppy) { position: absolute; left: 0; top: 0; z-index: 3; will-change: transform; }
.fmi2-animal { transform-origin: 50% 100%; }
.fmi2 :is(.fmi2-face, .fmi2-rooster, .fmi2-poppy) svg { display: block; width: 100%; height: auto; overflow: visible; }
.fmi2-rooster { z-index: 4; transform-origin: 50% 95%; }
.fmi2-poppy { z-index: 5; transform-origin: 50% 55%; }
.fmi2-poppy svg * { transform-box: view-box; }
.fmi2 :is(.fm-leg, .fm-head, .fm-tail, .fm-crow, .fm-beak, .fm-wing) { transform-box: fill-box; }
.fmi2 .fm-leg { transform-origin: 50% 0; }
.fmi2 .fm-crow { transform-origin: 30% 90%; }
.fmi2 .fm-beak { transform-origin: 0 60%; }
.fmi2 .fm-wing { transform-origin: 20% 30%; }
.fmi2 .fm-tail { transform-origin: 90% 90%; }
.fmi2-sign { position: absolute; left: 50%; top: 0; z-index: 4; width: min(78cqw, 660px); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transform-origin: 50% 0; }
.fmi2-ropes { width: 64%; height: clamp(18px, 7cqh, 64px); background: linear-gradient(90deg, transparent 0 4px, #b8894a 4px 9px, transparent 9px calc(100% - 9px), #b8894a calc(100% - 9px) calc(100% - 4px), transparent calc(100% - 4px)); }
.fmi2-board { position: relative; box-sizing: border-box; width: 100%; padding: 3.4cqmin 6cqmin 3.8cqmin; border-radius: 20px; text-align: center; display: flex; flex-direction: column; gap: 1cqmin;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 3px, transparent 3px 26px), linear-gradient(180deg, #e8b878, #c98a4e); border: 5px solid #7a4a1c; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 8px 0 #5a3412, 0 16px 26px rgba(60, 30, 10, .35); }
.fmi2-kicker { font: 700 clamp(13px, 2.5cqmin, 23px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #fff4c8; text-shadow: 0 2px 0 #7a4a1c; }
.fmi2-name { font: 800 clamp(26px, 7.2cqmin, 72px)/1.06 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #fffaf0; -webkit-text-stroke: .07em #b8261c; paint-order: stroke fill; text-shadow: 0 .07em 0 #7a1c14; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fmi2-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.fmi2--still .fmi2-sign { top: 50%; transform: translate(-50%, -50%); }

/* Pirate island opening */
.pri2 { background: transparent; }
.pri2-sea { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.pri2-sea.back { z-index: 1; height: 31%; }
.pri2-sea.front { z-index: 3; height: 21%; }
.pri2-roll { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: pri2-roll 3.6s linear infinite; }
.pri2-sea.front .pri2-roll { animation-duration: 2.6s; }
.pri2-roll > svg { display: block; width: 100%; height: 100%; }
@keyframes pri2-roll { to { transform: translateX(-50%); } }
.pri2-fleet { position: absolute; z-index: 2; transform-origin: 0 0; will-change: transform; }
.pri2-ship, .pri2-rock { position: absolute; inset: 0; transform-origin: 50% 84%; }
.pri2-rock { animation: pri2-rock 2.4s ease-in-out infinite alternate; }
@keyframes pri2-rock { from { transform: rotate(-1.6deg) translateY(0); } to { transform: rotate(1.6deg) translateY(1.2%); } }
.pri2-rock > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pri2-sailwrap { position: absolute; left: 29.06%; top: 19.29%; width: 45%; height: 39.64%; }
.pri2-sail { position: absolute; inset: 0; box-sizing: border-box; padding: 6% 9% 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqmin; text-align: center; transform-origin: 50% 0;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #fffdf6 0%, #f6ecd2 64%, #e8d4a6 100%); border: 3px solid #c9b08a; border-radius: 10px 10px 26px 26px / 10px 10px 44px 44px; box-shadow: inset 0 -12px 18px rgba(160, 120, 60, .22); }
.pri2-kicker { font: 700 clamp(11px, 2.1cqmin, 20px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #b8361f; }
.pri2-name { font: 800 clamp(20px, 5.4cqmin, 54px)/1.06 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #3b2414; text-shadow: 0 .05em 0 rgba(255, 248, 220, .9); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pri2 :is(.pr-wave-l, .pr-wave-r, .pr-spy, .pr-hat, .pr-gun, .pr-jolly) { transform-box: fill-box; }
.pri2 .pr-wave-l { transform-origin: 77% 86%; }
.pri2 .pr-wave-r { transform-origin: 23% 86%; }
.pri2 .pr-spy { transform-origin: 70% 90%; }
.pri2 .pr-hat { transform-origin: 50% 80%; }
.pri2 .pr-gun { transform-origin: 50% 50%; }
.pri2 .pr-jolly { transform-origin: 0 50%; animation: pl-flag 1.2s ease-in-out infinite alternate; }
.pri2-flash { position: absolute; z-index: 4; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #fffbe0 0 18%, #ffd23f 30%, rgba(255, 140, 40, .75) 52%, rgba(255, 120, 40, 0) 70%); }
.pri2-pepper { position: absolute; left: 0; top: 0; z-index: 5; transform-origin: 50% 55%; will-change: transform; }
.pri2-pepper svg { width: 100%; height: auto; display: block; overflow: visible; }
.pri2-pepper svg * { transform-box: view-box; }
.pri2-gulls { position: absolute; left: 0; top: 0; z-index: 1; }
.pri2-gulls svg { display: block; width: 100%; height: auto; }
.pri2-gulls .pr-gull { transform-origin: 50% 50%; transform-box: fill-box; animation: fm-flap .5s ease-in-out infinite alternate; }
.pri2-gulls .pr-gull.b2 { animation-delay: -.25s; }
.pri2-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.pri2--still .pri2-sail { inset: auto; left: 50%; top: 50%; width: min(70cqw, 600px); min-height: 36cqh; transform: translate(-50%, -50%); }

/* Fairy-tale castle opening */
.fci { background: transparent; }
.fci-book { position: absolute; z-index: 2; perspective: 1800px; filter: drop-shadow(0 14px 20px rgba(50, 30, 90, .3)); }
.fci-page, .fci-leaf, .fci-cover { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; }
.fci-page svg, .fci-face svg { display: block; width: 100%; height: 100%; }
.fci-page { border-radius: 0 6px 6px 0; overflow: hidden; }
.fci-leaf, .fci-cover { transform-origin: 0 50%; transform-style: preserve-3d; }
.fci-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 0 6px 6px 0; overflow: hidden; }
.fci-face.back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
.fci-popup { position: absolute; z-index: 3; transform-origin: 50% 100%; }
.fci-popup svg { display: block; width: 100%; height: auto; }
.fci-ribbon { position: absolute; left: 50%; top: 4%; z-index: 4; width: min(80cqw, 680px); transform: translateX(-50%); }
.fci-band { position: relative; box-sizing: border-box; width: 100%; padding: 2.6cqmin 8cqmin 3cqmin; text-align: center; display: flex; flex-direction: column; gap: .8cqmin; border-radius: 14px;
  background: linear-gradient(180deg, #ff9fcf, #e2559c); border: 4px solid #a82a6a; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 7px 0 #7a1c4c, 0 14px 24px rgba(80, 20, 60, .3); }
.fci-kicker { font: 700 clamp(13px, 2.4cqmin, 22px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #fff3c4; text-shadow: 0 2px 0 #a82a6a; }
.fci-name { font: 800 clamp(24px, 6.8cqmin, 68px)/1.06 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #ffffff; -webkit-text-stroke: .07em #6a1c4c; paint-order: stroke fill; text-shadow: 0 .07em 0 #5a1440; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fci-ember { position: absolute; left: 0; top: 0; z-index: 5; transform-origin: 50% 100%; will-change: transform; }
.fci-ember svg { width: 100%; height: auto; display: block; overflow: visible; }
.fci-ember svg * { transform-box: view-box; }
.fci-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.fci--still .fci-ribbon { top: 50%; transform: translate(-50%, -50%); }

/* ---------------- Superhero city ---------------- */
.tk-superhero-city { background: linear-gradient(180deg, #3d9cf5 0%, #7cc8ff 40%, #c8ecff 64%, #d9e2ee 78%, #4f5d7e 100%); }
.tk-superhero-city .hc-sky { inset: 0; }
.tk-superhero-city .hc-street { left: 0; right: 0; bottom: 0; height: 19%; }
.tk-superhero-city .hc-near-l { left: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-superhero-city .hc-near-r { right: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-superhero-city .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-superhero-city :is(.hc-rays, .fm-cloud) { transform-box: view-box; }
.tk-superhero-city .hc-rays { animation: fm-rays 120s linear infinite; }
.tk-superhero-city .fm-cloud.c1 { animation: fm-cloud 60s ease-in-out infinite alternate; }
.tk-superhero-city .fm-cloud.c2 { animation: fm-cloud 74s ease-in-out infinite alternate-reverse; }
.tk-superhero-city .fm-cloud.c3 { animation: fm-cloud 50s ease-in-out infinite alternate; }
.tk-superhero-city .hc-beacon { transform-box: fill-box; transform-origin: 50% 50%; animation: hc-beacon 2.4s ease-in-out infinite alternate; }
@keyframes hc-beacon { from { transform: scale(.9) rotate(-8deg); } to { transform: scale(1.14) rotate(8deg); } }
.tk-superhero-city .hc-blink { animation: hc-blink 1.4s ease-in-out infinite alternate; }
@keyframes hc-blink { from { opacity: 1; } to { opacity: .2; } }
/* Hero children turn their arms, capes and heads about the joints drawn in js/themekit/hero-art.js. */
.tk-superhero-city :is(.hc-arm, .hc-cape, .hc-head, .hc-eyes, .hc-kitten, .hc-kit-head, .hc-car) { transform-box: fill-box; }
.tk-superhero-city .hc-arm { transform-origin: 50% 50%; }
.tk-superhero-city .hc-cape { transform-origin: 50% 0; animation: hc-cape 1.1s ease-in-out infinite alternate; }
@keyframes hc-cape { from { transform: skewX(-5deg) scaleX(.96); } to { transform: skewX(6deg) scaleX(1.04); } }
.tk-superhero-city .hc-eyes { transform-origin: 50% 50%; animation: fm-blink 4.4s infinite; }
.tk-superhero-city .hc-roof.b .hc-eyes { animation-delay: -1.6s; } .tk-superhero-city .hc-strong .hc-eyes { animation-delay: -2.8s; }
.tk-superhero-city .hc-roof.a .hc-arm.r { animation: hc-wave 1.2s ease-in-out infinite alternate; }
@keyframes hc-wave { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
.tk-superhero-city .hc-roof.b .hc-head { transform-origin: 50% 90%; animation: hc-look 5s ease-in-out infinite; }
@keyframes hc-look { 0%, 40%, 100% { transform: rotate(0); } 50%, 80% { transform: rotate(-8deg); } }
.tk-superhero-city .hc-roof.c .hc-arm.l { animation: hc-point 6s ease-in-out infinite; }
@keyframes hc-point { 0%, 60%, 100% { transform: rotate(0); } 68%, 88% { transform: rotate(150deg); } }
.tk-superhero-city .hc-hover { animation: hc-hover 2.6s ease-in-out infinite alternate; }
@keyframes hc-hover { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.tk-superhero-city .hc-rescuer .hc-arm.l { animation: hc-reach 2.6s ease-in-out infinite alternate; }
@keyframes hc-reach { from { transform: rotate(-6deg); } to { transform: rotate(10deg); } }
.tk-superhero-city .hc-kitten { transform-origin: 50% 100%; }
.tk-superhero-city .hc-kit-head { transform-origin: 50% 80%; animation: hc-mew 3.6s ease-in-out infinite; }
@keyframes hc-mew { 0%, 50%, 100% { transform: rotate(0); } 60%, 80% { transform: rotate(14deg); } }
.tk-superhero-city .hc-lift { animation: hc-lift 2.2s ease-in-out infinite; }
@keyframes hc-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.tk-superhero-city .hc-car { transform-origin: 50% 100%; animation: hc-car 2.2s ease-in-out infinite; }
@keyframes hc-car { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-3px); } }
.tk-superhero-city .hc-tl { opacity: .25; animation: hc-tl 6s step-end infinite; }
.tk-superhero-city .hc-tl.g { animation-delay: -4s; } .tk-superhero-city .hc-tl.y { animation-delay: -2s; }
@keyframes hc-tl { 0% { opacity: 1; } 33.3% { opacity: .25; } }
.tk-superhero-city .hc-lamp { animation: pr-glow 2.4s ease-in-out infinite alternate; }
.tk-superhero-city .tk-hc-flyer .hc-cape2 { transform-box: fill-box; transform-origin: 100% 50%; animation: hc-stream .35s ease-in-out infinite alternate; }
@keyframes hc-stream { from { transform: scaleY(.9) skewY(-3deg); } to { transform: scaleY(1.08) skewY(3deg); } }
.tk-superhero-city .tk-hc-flyer .hc-speed { animation: hc-speed .3s linear infinite alternate; }
@keyframes hc-speed { from { opacity: .3; transform: translateX(6px); } to { opacity: .9; transform: translateX(-6px); } }
.tk-superhero-city .tk-hc-blimp .hc-prop { animation: hc-prop .25s linear infinite alternate; }
@keyframes hc-prop { from { transform: scaleY(1); } to { transform: scaleY(.15); } }
.tk-superhero-city .tk-hc-blimp > svg { animation: pl-bob 3.4s ease-in-out infinite alternate; }
.tk-superhero-city .tk-hc-blimp.tk-flipx > svg { animation-name: pl-bob-flip; }
.tk-superhero-city .tk-hc-bus .hc-wheel { animation: fm-spin .6s linear infinite; }
.tk-superhero-city .tk-hc-bus > svg { animation: fm-chug .25s ease-in-out infinite alternate; }
.tk-superhero-city .tk-hc-bus.tk-flipx > svg { animation-name: fm-chug-flip; }
.tk-superhero-city .tk-hc-birds .hc-bird { transform-origin: 50% 50%; transform-box: fill-box; animation: fm-flap .45s ease-in-out infinite alternate; }
.tk-superhero-city .tk-hc-birds .hc-bird.b2 { animation-delay: -.22s; }

/* Heroes beat the villains: a rooftop punch that sends a robot reeling, and a flying hero bonking Grumbo the monster over the skyline. */
.tk-superhero-city :is(.hc-puncher, .hc-robot, .hc-mon) { transform-box: fill-box; transform-origin: 50% 100%; }
.tk-superhero-city :is(.hcm-arm, .hcr-arm) { transform-box: fill-box; transform-origin: 50% 50%; }
.tk-superhero-city :is(.hc-hit, .hc-bonkpow, .hc-dizzy, .hc-bonk) { transform-box: view-box; }
.tk-superhero-city .hc-puncher { animation: hc-lunge 2.4s ease-in-out infinite; }
@keyframes hc-lunge { 0%, 28%, 70%, 100% { transform: translateX(0); } 38% { transform: translateX(-6px) rotate(-3deg); } 44% { transform: translateX(8px) rotate(2deg); } 56% { transform: translateX(2px); } }
.tk-superhero-city .hc-roof.a.hc-puncher .hc-arm.r { animation: hc-jab 2.4s ease-in-out infinite; }
@keyframes hc-jab { 0%, 30%, 70%, 100% { transform: rotate(0); } 38% { transform: rotate(14deg); } 44% { transform: rotate(-10deg); } 56% { transform: rotate(-4deg); } }
.tk-superhero-city .hc-robot { animation: hc-recoil 2.4s ease-in-out infinite; }
@keyframes hc-recoil { 0%, 42%, 82%, 100% { transform: rotate(0); } 47% { transform: translateX(6px) rotate(12deg); } 58% { transform: translateX(2px) rotate(-4deg); } 68% { transform: rotate(2deg); } }
.tk-superhero-city .hc-robot .hcr-arm { animation: hc-flail .3s ease-in-out infinite alternate; }
.tk-superhero-city .hc-robot .hcr-arm.r { animation-direction: alternate-reverse; }
@keyframes hc-flail { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.tk-superhero-city .hc-bulb { animation: hc-blink .8s ease-in-out infinite alternate; }
.tk-superhero-city .hc-hit { opacity: 0; animation: hc-pop 2.4s ease-out infinite; }
@keyframes hc-pop { 0%, 42% { opacity: 0; transform: scale(.3); } 46% { opacity: 1; transform: scale(1.15); } 54% { opacity: 1; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(.8); } }
.tk-superhero-city .hc-mon { animation: hc-monwobble 5s ease-in-out infinite; }
@keyframes hc-monwobble { 0%, 29%, 62%, 100% { transform: rotate(0); } 33% { transform: rotate(7deg); } 41% { transform: rotate(-4deg); } 50% { transform: rotate(2deg); } }
.tk-superhero-city .hc-mon .hcm-arm { animation: hc-shake .9s ease-in-out infinite alternate; }
.tk-superhero-city .hc-mon .hcm-arm.r { animation-direction: alternate-reverse; }
@keyframes hc-shake { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.tk-superhero-city .hc-bonk { animation: hc-bonk 5s ease-in-out infinite; }
@keyframes hc-bonk { 0%, 100% { transform: translate(-70px, -60px); } 30% { transform: translate(78px, 62px); } 40% { transform: translate(30px, 24px); } 62% { transform: translate(-30px, -20px); } }
.tk-superhero-city .hc-bonk .hc-cape2 { transform-box: fill-box; transform-origin: 100% 50%; animation: hc-stream .35s ease-in-out infinite alternate; }
.tk-superhero-city .hc-bonkpow { opacity: 0; animation: hc-pop2 5s ease-out infinite; }
@keyframes hc-pop2 { 0%, 29% { opacity: 0; transform: scale(.3); } 32% { opacity: 1; transform: scale(1.15); } 38% { opacity: 1; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(.8); } }
.tk-superhero-city .hc-dizzy { opacity: 0; animation: hc-dizzy 5s linear infinite; }
@keyframes hc-dizzy { 0%, 32% { opacity: 0; transform: rotate(0); } 36% { opacity: 1; } 60% { opacity: 1; transform: rotate(360deg); } 66%, 100% { opacity: 0; transform: rotate(420deg); } }
.tk-superhero-city .tk-hc-chase .hc-cape2 { transform-box: fill-box; transform-origin: 100% 50%; animation: hc-stream .3s ease-in-out infinite alternate; }
.tk-superhero-city .tk-hc-chase .hc-speed { animation: hc-speed .3s linear infinite alternate; }
.tk-superhero-city .tk-hc-chase .hc-jet { transform-box: fill-box; transform-origin: 50% 0; animation: hc-jet .12s linear infinite alternate; }
@keyframes hc-jet { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }
.tk-superhero-city .tk-hc-chase > svg { animation: pl-bob .5s ease-in-out infinite alternate; }
.tk-superhero-city .tk-hc-chase.tk-flipx > svg { animation-name: pl-bob-flip; }

/* Superhero city opening */
.hci { background: transparent; }
.hci-lines { position: absolute; left: 50%; top: 50%; width: 170cqmax; height: 170cqmax; margin: -85cqmax 0 0 -85cqmax; z-index: 1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 140, .6) 0 5deg, rgba(255, 255, 255, 0) 5deg 12deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 8%, #000 24%, transparent 58%); mask-image: radial-gradient(circle, transparent 0 8%, #000 24%, transparent 58%); }
.hci-panel { position: absolute; left: 50%; top: 0; z-index: 4; box-sizing: border-box; width: min(82cqw, 640px); padding: 3.2cqmin 5cqmin 3.6cqmin; display: flex; flex-direction: column; align-items: center; gap: 1.2cqmin; text-align: center; transform-origin: 50% 50%; will-change: transform;
  background: #ffffff; border: 5px solid #24305e; border-radius: 10px; box-shadow: 9px 9px 0 #24305e; }
.hci-panel::after { content: ''; position: absolute; right: 8px; top: 8px; width: 30%; height: 64%; pointer-events: none; background: radial-gradient(circle, rgba(255, 111, 174, .4) 0 32%, transparent 36%) 0 0 / 12px 12px;
  -webkit-mask-image: linear-gradient(225deg, #000 18%, transparent 70%); mask-image: linear-gradient(225deg, #000 18%, transparent 70%); }
.hci-cap { position: relative; z-index: 1; align-self: flex-start; padding: .7cqmin 1.8cqmin; background: #ffd23f; border: 3px solid #24305e; transform: rotate(-2deg); box-shadow: 3px 3px 0 #24305e; }
.hci-kicker { font: 800 clamp(12px, 2.3cqmin, 21px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #24305e; }
.hci-name { position: relative; z-index: 1; font: 900 clamp(26px, 7cqmin, 70px)/1.05 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #ff4f4f; -webkit-text-stroke: .06em #24305e; paint-order: stroke fill; text-shadow: .06em .07em 0 #24305e; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hci :is(.hci-hero, .hci-burst, .hci-zuzu, .hci-monster, .hci-dizzy) { position: absolute; left: 0; top: 0; will-change: transform; }
.hci :is(.hci-hero, .hci-burst, .hci-zuzu, .hci-monster, .hci-dizzy) svg { display: block; width: 100%; height: auto; overflow: visible; }
.hci-hero { z-index: 5; transform-origin: 50% 50%; }
.hci-hero .hc-cape2 { transform-box: fill-box; transform-origin: 100% 50%; animation: hc-stream .3s ease-in-out infinite alternate; }
.hci-hero .hc-speed { animation: hc-speed .25s linear infinite alternate; }
.hci-burst { z-index: 3; transform-origin: 50% 50%; }
.hci-monster { z-index: 3; transform-origin: 50% 100%; }
.hci-monster .hcm-arm { transform-box: fill-box; transform-origin: 50% 50%; }
.hci-dizzy { z-index: 4; transform-origin: 50% 50%; }
.hci-zuzu { z-index: 6; transform-origin: 50% 55%; }
.hci-zuzu svg * { transform-box: view-box; }
.hci-fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.hci--still .hci-panel { top: 50%; transform: translate(-50%, -50%); }

/* ---------------- Halloween night ---------------- */
.tk-halloween-night { background: linear-gradient(180deg, #120e33 0%, #2c2266 32%, #5a3f9a 58%, #c46a8a 74%, #2a1f55 84%, #23384a 100%); }
.tk-halloween-night .hw-sky { inset: 0; }
.tk-halloween-night .hw-lawn { left: 0; right: 0; bottom: 0; height: 19%; }
.tk-halloween-night .hw-near-l { left: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-halloween-night .hw-near-r { right: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-halloween-night .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-halloween-night .fm-cloud { transform-box: view-box; }
.tk-halloween-night .fm-cloud.c1 { animation: fm-cloud 64s ease-in-out infinite alternate; }
.tk-halloween-night .fm-cloud.c2 { animation: fm-cloud 80s ease-in-out infinite alternate-reverse; }
.tk-halloween-night .hw-star { animation: hw-twinkle 2.8s ease-in-out infinite alternate; }
.tk-halloween-night .hw-star.s1 { animation-delay: -1s; } .tk-halloween-night .hw-star.s2 { animation-delay: -1.9s; animation-duration: 3.6s; }
@keyframes hw-twinkle { from { opacity: 1; } to { opacity: .3; } }
.tk-halloween-night .hw-halo { transform-box: fill-box; transform-origin: 50% 50%; animation: hw-halo 5s ease-in-out infinite alternate; }
@keyframes hw-halo { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }
/* Bats beat their wings about the shoulders, in the scene, in passing flocks and in the opening. */
:is(.tk-halloween-night, .hwi) .hw-wing { transform-box: fill-box; transform-origin: 100% 70%; animation: hw-flap-l .32s ease-in-out infinite alternate; }
:is(.tk-halloween-night, .hwi) .hw-wing.r { transform-origin: 0 70%; animation-name: hw-flap-r; }
@keyframes hw-flap-l { from { transform: rotate(-26deg); } to { transform: rotate(18deg); } }
@keyframes hw-flap-r { from { transform: rotate(26deg); } to { transform: rotate(-18deg); } }
.tk-halloween-night .hw-bat { animation: hw-bob 2.2s ease-in-out infinite alternate; }
.tk-halloween-night .hw-bat.b2 { animation-delay: -1.1s; }
@keyframes hw-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.tk-halloween-night .hw-bunting .hw-wing { animation: none; }
.tk-halloween-night .hw-bunting { transform-box: fill-box; transform-origin: 50% 0; animation: hw-swing 2.6s ease-in-out infinite alternate; }
@keyframes hw-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
/* The house: a ghost waves from the tower window, candle-lit windows flicker, ghosts float about. */
.tk-halloween-night .hw-peek { transform-box: fill-box; transform-origin: 50% 100%; animation: hw-peek 6s ease-in-out infinite; }
@keyframes hw-peek { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-9deg); } 60% { transform: translateY(-3px) rotate(9deg); } }
.tk-halloween-night .hw-win { animation: hw-flicker 4s linear infinite; }
@keyframes hw-flicker { 0%, 44%, 50%, 68%, 74%, 100% { opacity: 1; } 47% { opacity: .76; } 71% { opacity: .86; } }
.tk-halloween-night .hw-float.a { animation: hw-float 3.6s ease-in-out infinite alternate; }
.tk-halloween-night .hw-float.b { animation: hw-float 4.4s ease-in-out infinite alternate-reverse; }
@keyframes hw-float { from { transform: translateY(0); } to { transform: translateY(-16px); } }
/* Cats swish their tails, eyes blink, jack-o'-lanterns and candles flicker, the cauldron bubbles. */
.tk-halloween-night .hw-cat-tail { transform-box: fill-box; transform-origin: 0 100%; animation: hw-tail 2.4s ease-in-out infinite alternate; }
.tk-halloween-night .hw-cat-tail2 { transform-box: fill-box; transform-origin: 100% 100%; animation: hw-tail 1.6s ease-in-out infinite alternate; }
@keyframes hw-tail { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.tk-halloween-night :is(.hw-eyes, .hw-owl-eyes) { transform-box: fill-box; transform-origin: 50% 50%; animation: fm-blink 4.6s infinite; }
.tk-halloween-night .hw-owl-eyes { animation-duration: 5.4s; animation-delay: -2s; }
.tk-halloween-night .hw-kid.dino .hw-eyes { animation-delay: -1.5s; }
.tk-halloween-night .hw-witchcat .hw-eyes { animation-delay: -3s; }
.tk-halloween-night .hw-glow { animation: hw-glow 1.8s ease-in-out infinite alternate; }
.tk-halloween-night .hw-jack.j2 .hw-glow { animation-delay: -.7s; } .tk-halloween-night .hw-jack.j3 .hw-glow { animation-delay: -1.3s; }
@keyframes hw-glow { from { opacity: .68; } to { opacity: 1; } }
.tk-halloween-night .hw-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: hw-flame .9s ease-in-out infinite alternate; }
@keyframes hw-flame { from { transform: scale(.85, .9) rotate(-4deg); } to { transform: scale(1.05, 1.12) rotate(4deg); } }
.tk-halloween-night .hw-bubbles circle { transform-box: fill-box; transform-origin: 50% 50%; animation: hw-bubble 2.4s ease-in infinite; }
.tk-halloween-night .hw-bubbles .hb2 { animation-delay: -.8s; } .tk-halloween-night .hw-bubbles .hb3 { animation-delay: -1.6s; }
@keyframes hw-bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(-34px) scale(1.1); opacity: 1; } 100% { transform: translateY(-42px) scale(1.5); opacity: 0; } }
.tk-halloween-night .hw-witchcat { transform-box: fill-box; transform-origin: 50% 100%; animation: hw-sway 3.2s ease-in-out infinite alternate; }
@keyframes hw-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.tk-halloween-night .hw-lamp { animation: pr-glow 2.4s ease-in-out infinite alternate; }
/* Trick-or-treaters on the porch turn their arms, heads, tails and sheets about the joints drawn in js/themekit/halloween-art.js. */
:is(.tk-halloween-night, .hwi) :is(.hw-arm, .hw-head, .hw-tail, .hw-sheet, .hw-leg) { transform-box: fill-box; }
:is(.tk-halloween-night, .hwi) .hw-arm { transform-origin: 50% 50%; }
.tk-halloween-night .hw-kid.witch .hw-arm.r { animation: hw-wave 1.1s ease-in-out infinite alternate; }
@keyframes hw-wave { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.tk-halloween-night .hw-kid.witch .hw-head { transform-origin: 50% 90%; animation: hw-look 5s ease-in-out infinite; }
@keyframes hw-look { 0%, 40%, 100% { transform: rotate(0); } 50%, 80% { transform: rotate(-8deg); } }
.tk-halloween-night .hw-kid.dino .hw-arm.r { animation: hw-shake .5s ease-in-out infinite alternate; }
@keyframes hw-shake { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
.tk-halloween-night .hw-kid.dino .hw-tail { transform-origin: 100% 0; animation: hw-wag 1.2s ease-in-out infinite alternate; }
@keyframes hw-wag { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.tk-halloween-night .hw-kid.sheet .hw-sheet { transform-origin: 50% 0; animation: hw-flutter 2.2s ease-in-out infinite alternate; }
@keyframes hw-flutter { from { transform: skewX(-3deg); } to { transform: skewX(3deg); } }
.tk-halloween-night .hw-kid.sheet { animation: hw-hop 3.4s ease-in-out infinite; }
@keyframes hw-hop { 0%, 70%, 86%, 100% { transform: translateY(0); } 78% { transform: translateY(-10px); } 92% { transform: translateY(-5px); } }
/* Passers-by: bats, the young witch on her broom, a ghost, the black cat and a spider. */
.tk-halloween-night .tk-hw-bats > svg { animation: hw-bob 1.4s ease-in-out infinite alternate; }
.tk-halloween-night .tk-hw-witch > svg { animation: pl-bob 1.6s ease-in-out infinite alternate; }
.tk-halloween-night .tk-hw-witch.tk-flipx > svg { animation-name: pl-bob-flip; }
.tk-halloween-night .tk-hw-witch .hw-broom { transform-box: fill-box; transform-origin: 100% 50%; animation: hw-bristle .3s ease-in-out infinite alternate; }
@keyframes hw-bristle { from { transform: skewY(-4deg); } to { transform: skewY(4deg); } }
.tk-halloween-night .tk-hw-ghost > svg { animation: hw-ghostly 2.4s ease-in-out infinite alternate; }
.tk-halloween-night .tk-hw-ghost.tk-flipx > svg { animation-name: hw-ghostly-flip; }
@keyframes hw-ghostly { from { transform: translateY(0) rotate(-4deg); opacity: .8; } to { transform: translateY(-10px) rotate(4deg); opacity: 1; } }
@keyframes hw-ghostly-flip { from { transform: scaleX(-1) translateY(0) rotate(-4deg); opacity: .8; } to { transform: scaleX(-1) translateY(-10px) rotate(4deg); opacity: 1; } }
.tk-halloween-night .tk-hw-cat > svg { animation: fm-chug .25s ease-in-out infinite alternate; }
.tk-halloween-night .tk-hw-cat.tk-flipx > svg { animation-name: fm-chug-flip; }
.tk-halloween-night .hw-leg { transform-origin: 50% 50%; animation: hw-step .5s ease-in-out infinite alternate; }
.tk-halloween-night .hw-leg.b { animation-direction: alternate-reverse; }
@keyframes hw-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.tk-halloween-night .tk-hw-spider > svg { transform-origin: 50% 0; animation: hw-dangle 2s ease-in-out infinite alternate; }
@keyframes hw-dangle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.tk-halloween-night .tk-hw-spider .hw-legs { transform-box: fill-box; transform-origin: 50% 50%; animation: hw-wiggle .4s ease-in-out infinite alternate; }
@keyframes hw-wiggle { from { transform: scaleX(.92); } to { transform: scaleX(1.06); } }

/* Halloween night opening */
.hwi { background: transparent; }
.hwi-glow { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 214, 120, .6) 0, rgba(255, 150, 50, .28) 38%, rgba(255, 150, 50, 0) 68%); }
.hwi-sign { position: absolute; left: 50%; top: 0; z-index: 5; box-sizing: border-box; width: min(80cqw, 600px); padding: 3.4cqmin 5cqmin 4cqmin; display: flex; flex-direction: column; align-items: center; gap: 1.2cqmin; text-align: center; transform-origin: 50% 0; will-change: transform;
  background: radial-gradient(120% 140% at 50% 0, #4a3590 0, #2c2266 60%, #221a50 100%); border: 5px solid #ff8a2b; border-radius: 22px; box-shadow: 0 0 0 4px #1d1438, 0 0 34px rgba(255, 150, 60, .45), 0 14px 30px rgba(10, 6, 30, .45); }
.hwi-web { position: absolute; left: 0; top: 0; width: 17%; max-width: 92px; pointer-events: none; }
.hwi-drips { position: absolute; left: 7%; right: 7%; top: calc(100% + 4px); height: max(10px, 2.6cqmin); pointer-events: none; }
.hwi-sign :is(.hwi-web, .hwi-drips, .hwi-sbat) svg { display: block; width: 100%; overflow: visible; }
.hwi-drips svg { height: 100%; }
.hwi-sbat { position: absolute; bottom: calc(100% - 1.4cqmin); width: 17%; max-width: 104px; z-index: 2; animation: hwi-hover .5s ease-in-out infinite alternate; }
.hwi-sbat.l { left: 13%; } .hwi-sbat.r { right: 13%; animation-delay: -.25s; }
@keyframes hwi-hover { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.hwi-cap { position: relative; z-index: 1; padding: .6cqmin 2.2cqmin; background: #ff8a2b; border: 3px solid #1d1438; border-radius: 999px; box-shadow: 0 3px 0 #1d1438; }
.hwi-kicker { font: 800 clamp(12px, 2.3cqmin, 21px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #1d1438; }
.hwi-name { position: relative; z-index: 1; font: 900 clamp(26px, 7cqmin, 68px)/1.08 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #ffe27a; -webkit-text-stroke: .06em #1d1438; paint-order: stroke fill; text-shadow: .04em .06em 0 #1d1438, 0 0 .4em rgba(255, 170, 60, .55); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hwi :is(.hwi-jack, .hwi-ghost, .hwi-wisp, .hwi-kid, .hwi-bat, .hwi-boo) { position: absolute; left: 0; top: 0; will-change: transform; }
.hwi :is(.hwi-jack, .hwi-ghost, .hwi-wisp, .hwi-kid, .hwi-bat, .hwi-boo, .hwi-lid) svg { display: block; width: 100%; height: auto; overflow: visible; }
.hwi-jack { z-index: 4; transform-origin: 50% 100%; }
.hwi-lid { position: absolute; left: 26.85%; top: 1.5%; width: 46.3%; transform-origin: 50% 80%; }
.hwi-jack .hwi-light { opacity: 0; }
.hwi-ghost { z-index: 3; transform-origin: 50% 50%; }
.hwi-ghost svg { animation: hwi-ghost .5s ease-in-out infinite alternate; }
@keyframes hwi-ghost { from { transform: skewX(-3deg); } to { transform: skewX(3deg); } }
.hwi-wisp { z-index: 3; transform-origin: 50% 100%; }
.hwi-wisp svg * { transform-box: view-box; }
.hwi-boo { z-index: 7; transform-origin: 20% 95%; }
.hwi-kid { z-index: 6; transform-origin: 50% 100%; }
.hwi-bat { z-index: 6; }
.hwi-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hwi--still .hwi-sign { top: 50%; transform: translate(-50%, -50%); }

/* ---------------- Sports day ---------------- */
.tk-sports-day { background: linear-gradient(180deg, #3fb0ff 0%, #8fd6ff 38%, #d8f4ff 56%, #8fd47a 62%, #e2683c 70%, #6cc04a 80%, #58ad3c 100%); }
.tk-sports-day .sd-sky { inset: 0; }
.tk-sports-day .sd-lawn { left: 0; right: 0; bottom: 0; height: 19%; }
.tk-sports-day .sd-near-l { left: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-sports-day .sd-near-r { right: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-sports-day .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-sports-day :is(.sd-rays, .fm-cloud) { transform-box: view-box; }
.tk-sports-day .sd-rays { animation: fm-rays 90s linear infinite; }
.tk-sports-day .fm-cloud.c1 { animation: fm-cloud 60s ease-in-out infinite alternate; }
.tk-sports-day .fm-cloud.c2 { animation: fm-cloud 76s ease-in-out infinite alternate-reverse; }
.tk-sports-day .fm-cloud.c3 { animation: fm-cloud 52s ease-in-out infinite alternate; }
.tk-sports-day .sd-bunting { animation: sd-bunting 3.2s ease-in-out infinite alternate; }
@keyframes sd-bunting { from { transform: translateY(0); } to { transform: translateY(5px); } }
.tk-sports-day .sd-bulb { animation: pr-glow 1.2s ease-in-out infinite alternate; }
.tk-sports-day .sd-bulb.b2 { animation-delay: -.6s; }
/* The crowd cheers: arms wave and flags flap in a wave along the stands. */
.tk-sports-day .sd-fan-arm { transform-box: fill-box; transform-origin: 0 100%; animation: sd-fan .7s ease-in-out infinite alternate; }
@keyframes sd-fan { from { transform: rotate(-16deg); } to { transform: rotate(22deg); } }
.tk-sports-day .sd-flag { transform-box: fill-box; transform-origin: 0 100%; animation: sd-flagwave .8s ease-in-out infinite alternate; }
@keyframes sd-flagwave { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
/* The tug of war heaves to and fro. */
.tk-sports-day .sd-tug { animation: sd-tug 2.6s ease-in-out infinite alternate; }
@keyframes sd-tug { 0%, 20% { transform: translateX(-10px); } 80%, 100% { transform: translateX(12px); } }
/* Children turn their arms, heads and legs about the joints drawn in js/themekit/sports-art.js. */
:is(.tk-sports-day, .sdi) :is(.sd-arm, .sd-leg, .sd-rarm, .sd-head, .sd-rhead, .sd-dleg) { transform-box: fill-box; transform-origin: 50% 50%; }
.tk-sports-day :is(.sd-eyes, .sd-pony, .sd-pony2, .sd-tail, .sd-band, .sd-push) { transform-box: fill-box; }
.tk-sports-day .sd-eyes { transform-origin: 50% 50%; animation: fm-blink 4.4s infinite; }
.tk-sports-day .sd-win.two .sd-eyes { animation-delay: -1.4s; } .tk-sports-day .sd-win.three .sd-eyes { animation-delay: -2.6s; }
.tk-sports-day .sd-pony { transform-origin: 0 0; animation: sd-pony 1.4s ease-in-out infinite alternate; }
@keyframes sd-pony { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
.tk-sports-day .sd-sack { transform-box: fill-box; transform-origin: 50% 100%; animation: sd-hop .8s ease-in-out infinite; }
@keyframes sd-hop { 0%, 100% { transform: translateY(0) scale(1.05, .94); } 15% { transform: translateY(0) scale(.97, 1.04); } 50% { transform: translateY(-34px) scale(.98, 1.03); } 85% { transform: translateY(0) scale(1.06, .92); } }
.tk-sports-day .sd-sack-run { animation: sd-sackrun 7s ease-in-out infinite alternate; }
@keyframes sd-sackrun { from { transform: translateX(-36px); } to { transform: translateX(30px); } }
.tk-sports-day .sd-win.one .sd-arm.r { animation: sd-trophy 1.3s ease-in-out infinite alternate; }
@keyframes sd-trophy { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.tk-sports-day .sd-win.two .sd-arm.r { animation: sd-wave 1s ease-in-out infinite alternate; }
@keyframes sd-wave { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.tk-sports-day .sd-win.three .sd-arm.l { animation: sd-clap-l .32s ease-in-out infinite alternate; }
.tk-sports-day .sd-win.three .sd-arm.r { animation: sd-clap-r .32s ease-in-out infinite alternate; }
@keyframes sd-clap-l { from { transform: rotate(0); } to { transform: rotate(-30deg); } }
@keyframes sd-clap-r { from { transform: rotate(0); } to { transform: rotate(30deg); } }
.tk-sports-day .sd-win.one { animation: sd-bounce-win 3s ease-in-out infinite; }
@keyframes sd-bounce-win { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-12px); } 80% { transform: translateY(0); } 88% { transform: translateY(-6px); } }
/* Passers-by: relay runners, a wheelchair racer, a puppy and balloons. */
.tk-sports-day .sd-run .sd-leg.f, .tk-sports-day .sd-run .sd-rarm.b { animation: sd-stride .34s ease-in-out infinite alternate; }
.tk-sports-day .sd-run .sd-leg.b, .tk-sports-day .sd-run .sd-rarm.f { animation: sd-stride .34s ease-in-out infinite alternate-reverse; }
.tk-sports-day .sd-run.late :is(.sd-leg, .sd-rarm) { animation-delay: -.17s; }
@keyframes sd-stride { from { transform: rotate(-36deg); } to { transform: rotate(32deg); } }
.tk-sports-day .tk-sd-relay > svg { animation: sd-bob .17s ease-in-out infinite alternate; }
.tk-sports-day .tk-sd-relay.tk-flipx > svg { animation-name: sd-bob-flip; }
@keyframes sd-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes sd-bob-flip { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-4px); } }
.tk-sports-day .sd-wheel { transform-box: view-box; animation: fm-spin .7s linear infinite; }
.tk-sports-day .sd-push { transform-origin: 10% 10%; animation: sd-push .7s ease-in-out infinite alternate; }
@keyframes sd-push { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
.tk-sports-day .tk-sd-dog .sd-dleg.a { animation: sd-gallop .26s ease-in-out infinite alternate; }
.tk-sports-day .tk-sd-dog .sd-dleg.b { animation: sd-gallop .26s ease-in-out infinite alternate-reverse; }
@keyframes sd-gallop { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.tk-sports-day .sd-dtail { transform-box: view-box; animation: sd-wag .2s ease-in-out infinite alternate; }
@keyframes sd-wag { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.tk-sports-day .tk-sd-dog > svg { animation: sd-bob .13s ease-in-out infinite alternate; }
.tk-sports-day .tk-sd-dog.tk-flipx > svg { animation-name: sd-bob-flip; }
.tk-sports-day .tk-sd-balloons > svg { transform-origin: 50% 100%; animation: sd-sway 3s ease-in-out infinite alternate; }
@keyframes sd-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Sports day opening */
.sdi { background: transparent; }
.sdi-count { position: absolute; left: 0; top: 0; z-index: 9; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; will-change: transform;
  font: 900 64px/1 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #2f7bea; background: radial-gradient(circle at 36% 30%, #ffffff 0 40%, #e8f2ff 100%); border: 6px solid #1f2a44; box-shadow: 0 8px 0 #1f2a44, 0 14px 26px rgba(20, 30, 60, .3); }
.sdi-count.go { border-radius: 999px; color: #ffffff; background: linear-gradient(180deg, #4fd06a, #2fae6a); -webkit-text-stroke: .05em #1f2a44; paint-order: stroke fill; letter-spacing: .02em; }
.sdi-banner { position: absolute; left: 50%; top: 0; z-index: 7; box-sizing: border-box; width: min(80cqw, 620px); padding: 2.8cqmin 6cqmin 3.4cqmin; display: flex; flex-direction: column; align-items: center; gap: 1.2cqmin; text-align: center; transform-origin: 50% 50%; will-change: transform;
  background: linear-gradient(180deg, #ff6b5e, #e8392f); border: 5px solid #1f2a44; border-radius: 18px; box-shadow: 0 8px 0 #1f2a44, 0 16px 30px rgba(20, 30, 60, .3); }
.sdi-banner::before { content: ''; position: absolute; inset: 7px; border: 3px dashed rgba(255, 255, 255, .7); border-radius: 12px; pointer-events: none; }
.sdi-cap { position: relative; z-index: 1; padding: .6cqmin 2.2cqmin; background: #ffd23f; border: 3px solid #1f2a44; border-radius: 999px; box-shadow: 0 3px 0 #1f2a44; }
.sdi-kicker { font: 800 clamp(12px, 2.3cqmin, 21px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #1f2a44; }
.sdi-name { position: relative; z-index: 1; font: 900 clamp(26px, 7cqmin, 68px)/1.08 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #ffffff; -webkit-text-stroke: .06em #1f2a44; paint-order: stroke fill; text-shadow: .04em .07em 0 #1f2a44; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sdi :is(.sdi-post, .sdi-runner, .sdi-podium, .sdi-kid, .sdi-sunny, .sdi-tape) { position: absolute; left: 0; top: 0; will-change: transform; }
.sdi :is(.sdi-post, .sdi-runner, .sdi-podium, .sdi-kid, .sdi-sunny, .sdi-medal) svg { display: block; width: 100%; height: auto; overflow: visible; }
.sdi-tape { z-index: 5; transform-origin: 0 50%; box-sizing: border-box; border: 2px solid #1f2a44; border-radius: 4px; background: repeating-linear-gradient(90deg, #ff4f4f 0 16px, #ffffff 16px 30px); }
.sdi-runner { transform-origin: 50% 100%; }
.sdi-podium { z-index: 3; }
.sdi-kid { z-index: 4; transform-origin: 50% 100%; }
.sdi-sunny { z-index: 6; transform-origin: 50% 55%; }
.sdi-sunny svg * { transform-box: view-box; }
.sdi-medal { position: absolute; left: 37%; top: 54.5%; width: 26%; z-index: 1; }
.sdi-medal svg * { transform-box: fill-box; }
.sdi-fx { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.sdi--still .sdi-banner { top: 50%; transform: translate(-50%, -50%); }

/* ---------------- Construction site ---------------- */
.tk-construction-site { background: linear-gradient(180deg, #5cbcff 0%, #a6dcff 44%, #e4f5ff 62%, #ecc888 66%, #d9a860 100%); }
.tk-construction-site .cn-sky { inset: 0; }
.tk-construction-site .cn-ground { left: 0; right: 0; bottom: 0; height: 19%; }
.tk-construction-site .cn-near-l { left: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-construction-site .cn-near-r { right: 0; bottom: 0; height: clamp(110px, 36%, 46cqw); aspect-ratio: 560 / 440; }
.tk-construction-site .tk-mascot { left: 4%; bottom: 3%; width: clamp(60px, 11.5cqmin, 134px); }
.tk-construction-site .fm-cloud { transform-box: view-box; }
.tk-construction-site .fm-cloud.c1 { animation: fm-cloud 62s ease-in-out infinite alternate; }
.tk-construction-site .fm-cloud.c2 { animation: fm-cloud 78s ease-in-out infinite alternate-reverse; }
.tk-construction-site .fm-cloud.c3 { animation: fm-cloud 54s ease-in-out infinite alternate; }
/* The crane's trolley runs along the jib and its load of beams sways. */
.tk-construction-site .cn-trolley { animation: cn-trolley 14s ease-in-out infinite alternate; }
@keyframes cn-trolley { 0%, 10% { transform: translateX(-60px); } 90%, 100% { transform: translateX(150px); } }
.tk-construction-site .cn-load { transform-box: view-box; animation: cn-sway 3.2s ease-in-out infinite alternate; }
@keyframes cn-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
/* Young builders hammer, wave, look about and shovel, turning about the joints drawn in js/themekit/build-art.js. */
:is(.tk-construction-site, .cni) :is(.cn-arm, .cn-head, .cn-leg) { transform-box: fill-box; transform-origin: 50% 50%; }
.tk-construction-site .cn-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: fm-blink 4.6s infinite; }
.tk-construction-site .cn-crew.wave .cn-eyes { animation-delay: -1.6s; } .tk-construction-site .cn-crew.shovel .cn-eyes { animation-delay: -3s; }
.tk-construction-site .cn-crew.hammer .cn-arm.r { animation: cn-hammer .5s ease-in infinite alternate; }
@keyframes cn-hammer { from { transform: rotate(-30deg); } to { transform: rotate(40deg); } }
.tk-construction-site .cn-crew.wave .cn-arm.r { animation: cn-wave 1s ease-in-out infinite alternate; }
@keyframes cn-wave { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.tk-construction-site .cn-crew.look .cn-head { transform-origin: 50% 90%; animation: cn-look 5s ease-in-out infinite; }
@keyframes cn-look { 0%, 40%, 100% { transform: rotate(0); } 50%, 80% { transform: rotate(-9deg); } }
.tk-construction-site .cn-crew.shovel .cn-arm.r { animation: cn-shovel 1.6s ease-in-out infinite; }
@keyframes cn-shovel { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-38deg); } 60% { transform: rotate(-30deg); } }
.tk-construction-site .cn-drum { transform-box: view-box; animation: fm-spin 3s linear infinite; }
/* The digger scoops earth: boom, stick and bucket turn about their pins. */
.tk-construction-site :is(.cn-boom, .cn-stick, .cn-bucket) { transform-box: view-box; }
.tk-construction-site .cn-boom { animation: cn-boom 4.8s ease-in-out infinite; }
@keyframes cn-boom { 0%, 100% { transform: rotate(0); } 35%, 55% { transform: rotate(-12deg); } 75% { transform: rotate(4deg); } }
.tk-construction-site .cn-stick { animation: cn-stick 4.8s ease-in-out infinite; }
@keyframes cn-stick { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(18deg); } 60% { transform: rotate(-10deg); } }
.tk-construction-site .cn-bucket { animation: cn-bucket 4.8s ease-in-out infinite; }
@keyframes cn-bucket { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-30deg); } 55% { transform: rotate(40deg); } 80% { transform: rotate(10deg); } }
/* Passers-by: the dump truck, the wheelbarrow and birds. */
.tk-construction-site :is(.tk-cn-truck, .tk-cn-barrow) .cn-wheel { transform-box: view-box; animation: fm-spin .9s linear infinite; }
.tk-construction-site .tk-cn-truck > svg { animation: fm-chug .25s ease-in-out infinite alternate; }
.tk-construction-site .tk-cn-truck.tk-flipx > svg { animation-name: fm-chug-flip; }
.tk-construction-site .tk-cn-barrow .cn-leg.f { animation: cn-step .5s ease-in-out infinite alternate; }
.tk-construction-site .tk-cn-barrow .cn-leg.b { animation: cn-step .5s ease-in-out infinite alternate-reverse; }
@keyframes cn-step { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.tk-construction-site .tk-cn-barrow > svg { animation: fm-chug .25s ease-in-out infinite alternate; }
.tk-construction-site .tk-cn-barrow.tk-flipx > svg { animation-name: fm-chug-flip; }
.tk-construction-site .tk-cn-birds .cn-bird { transform-origin: 50% 50%; transform-box: fill-box; animation: fm-flap .45s ease-in-out infinite alternate; }
.tk-construction-site .tk-cn-birds .cn-bird.b2 { animation-delay: -.22s; }

/* Construction site opening */
.cni { background: transparent; }
.cni-sign { position: absolute; left: 50%; top: 0; z-index: 6; box-sizing: border-box; width: min(78cqw, 600px); padding: 3.6cqmin 5.4cqmin 3.8cqmin; display: flex; flex-direction: column; align-items: center; gap: 1.2cqmin; text-align: center; will-change: transform; --sling: max(48px, 10cqmin);
  background: #fffdf6; border: 5px solid #1e2a3a; border-radius: 12px; box-shadow: 0 8px 0 #1e2a3a, 0 16px 28px rgba(20, 30, 50, .3); }
.cni-sign::before { content: ''; position: absolute; inset: 7px; border: 9px solid transparent; border-image: repeating-linear-gradient(45deg, #ffc21a 0 10px, #1e2a3a 10px 20px) 9; pointer-events: none; }
.cni-sign::after { content: ''; position: absolute; inset: 20px; pointer-events: none;
  background: radial-gradient(circle at 5px 5px, #8a98a8 0 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 5px) 5px, #8a98a8 0 4px, transparent 4.5px), radial-gradient(circle at 5px calc(100% - 5px), #8a98a8 0 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #8a98a8 0 4px, transparent 4.5px); }
.cni-sling { position: absolute; left: 14%; right: 14%; bottom: calc(100% + 5px); height: var(--sling); pointer-events: none; }
.cni-sling svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cni-ring { position: absolute; left: 50%; bottom: calc(100% + 5px + var(--sling) - 9px); width: 18px; height: 18px; margin-left: -9px; box-sizing: border-box; border: 4px solid #1e2a3a; border-radius: 50%; background: #b8c4d0; }
.cni-cap { position: relative; z-index: 1; padding: .6cqmin 2.2cqmin; background: #ff8a2b; border: 3px solid #1e2a3a; border-radius: 999px; box-shadow: 0 3px 0 #1e2a3a; }
.cni-kicker { font: 800 clamp(12px, 2.3cqmin, 21px)/1.1 "ClassPlay Display", "ClassPlay Round", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #1e2a3a; }
.cni-name { position: relative; z-index: 1; font: 900 clamp(26px, 7cqmin, 68px)/1.08 "ClassPlay Display", "ClassPlay Round", sans-serif; color: #1e2a3a; text-shadow: .045em .06em 0 #ffc21a; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cni :is(.cni-slab, .cni-mod, .cni-hook, .cni-tess, .cni-kid) { position: absolute; left: 0; top: 0; will-change: transform; }
.cni :is(.cni-slab, .cni-mod, .cni-hook, .cni-tess, .cni-kid) svg { display: block; width: 100%; height: auto; overflow: visible; }
.cni-slab { z-index: 3; }
.cni-mod { z-index: 4; }
.cni-mod .cn-lit { opacity: 0; }
.cni-mod .cn-flag { transform-box: view-box; animation: cn-flag .5s ease-in-out infinite alternate; }
@keyframes cn-flag { from { transform: skewY(-7deg) scaleX(.92); } to { transform: skewY(6deg) scaleX(1); } }
.cni-hook { z-index: 6; }
.cni-tess { z-index: 5; transform-origin: 50% 55%; }
.cni-tess svg * { transform-box: view-box; }
.cni-kid { z-index: 6; transform-origin: 50% 100%; }
.cni-fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.cni--still .cni-sign { top: 50%; transform: translate(-50%, -50%); }
.cni--still .cni-sign :is(.cni-sling, .cni-ring) { display: none; }

.tk-front { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.tk-front .tk-particles { position: absolute; inset: 0; }
.tk-emote { position: absolute; z-index: 4; width: clamp(26px, 5cqmin, 46px); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.tk-emote svg { display: block; width: 100%; height: auto; }

/* Source: css/themekit-worlds.css; sha256: 1954d97c37954ed99dd93f21b63d13b6527d6356ca9217f485f418211a32e6fd */
/* ClassPlay's eleven learning worlds in the player. The live scene (css/themekit.css) sits
   behind every game; these rules give each world its own surfaces, type, buttons, cards,
   tiles and boards. Layout and sizing stay with each game's own styles. Original ClassPlay design. */

/* ---------- World tokens ---------- */
#activityPlayer.activity-player[data-world-kit] {
  background-image: var(--style-backdrop); background-size: cover;
  --wk-display: var(--activity-font);
  /* Every game's pieces (css/themekit-games.css). A world sets what differs from these. */
  --wk-radius-sm: 16px; --wk-mark: var(--wk-c2);
  --wk-card: var(--wk-panel); --wk-card-flat: #ffffff; --wk-card-ink: var(--wk-ink); --wk-flat-ink: var(--wk-card-ink);
  --wk-card-line: 3px solid var(--wk-line); --wk-card-drop: 0 4px 0 var(--wk-drop), 0 8px 14px rgba(0, 0, 0, .16);
  --wk-card-photo: var(--wk-card-flat); --wk-card-photo-ink: var(--wk-card-ink);
  --wk-good-ink: var(--wk-card-ink); --wk-bad-ink: var(--wk-card-ink);
  --wk-board: rgba(255, 255, 255, .2); --wk-board-line: 3px solid rgba(255, 255, 255, .8); --wk-board-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  --wk-pill: var(--wk-bar); --wk-pill-ink: var(--wk-bar-ink);
  --wk-grid-board: rgba(255, 255, 255, .92); --wk-grid: #ffffff; --wk-grid-ink: var(--wk-ink); --wk-grid-line: var(--wk-line); --wk-grid-block: var(--wk-drop);
  --wk-maze-path: var(--wk-card-flat); --wk-maze-wall: var(--wk-c3); --wk-maze-wall-d: var(--wk-c3d);
  --wk-flight-sky: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16)); --wk-flight-ground: var(--wk-c3);
  --wk-mole-garden: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)); --wk-mole-hole: var(--wk-drop);
}
#activityPlayer.activity-player[data-world-kit=ocean-adventure] {
  --wk-ink: #0b3f63; --wk-ink-soft: #2d6c8f; --wk-line: #0d4f7a; --wk-drop: #0b3f63;
  --wk-panel: radial-gradient(130% 110% at 18% 8%, #ffffff 0 40%, #ecfcfc 68%, #d6f4f6 100%);
  --wk-panel-border: 4px solid #0d4f7a; --wk-radius: 26px;
  --wk-panel-shadow: 0 6px 0 #0b3f63, 0 14px 24px rgba(4, 44, 74, .24);
  --wk-tile: radial-gradient(130% 120% at 20% 10%, #c9fbf3 0 30%, #7fe7e0 70%, #49cfd6 100%);
  --wk-tile-ink: #0b3f63;
  --wk-slot: rgba(255, 255, 255, .26); --wk-slot-line: 3px dashed rgba(255, 255, 255, .92);
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1px -1px 0 #0b3f63, 1px -1px 0 #0b3f63, -1px 1px 0 #0b3f63, 1px 1px 0 #0b3f63, 0 2px 0 #0b3f63, 0 3px 10px rgba(5, 50, 90, .45);
  --wk-btn: linear-gradient(180deg, #ff8a6a, #ec5634); --wk-btn-ink: #ffffff; --wk-btn-line: 3px solid #0b3f63; --wk-btn-drop: 0 5px 0 #0b3f63; --wk-btn-shadow: 0 2px 0 rgba(150, 45, 20, .55);
  --wk-ghost: linear-gradient(180deg, #ffffff, #e2f8fa); --wk-ghost-ink: #0b3f63;
  --wk-go: linear-gradient(180deg, #4fd383, #22a862); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(15, 95, 50, .6);
  --wk-c1: #ff7a59; --wk-c1d: #c9452c; --wk-c1s: #ffe4dc;
  --wk-c2: #ffbe2e; --wk-c2d: #c98a0e; --wk-c2s: #fff2cf;
  --wk-c3: #22bfd2; --wk-c3d: #0f8ea0; --wk-c3s: #d8f7fa;
  --wk-c4: #9a7cff; --wk-c4d: #6a4fd6; --wk-c4s: #ece6ff;
  --wk-good: #2fbf71; --wk-good-d: #1d8f50; --wk-good-s: #dcffe9;
  --wk-bad: #ff5d5d; --wk-bad-d: #c23b3b; --wk-bad-s: #ffe3e3;
  --wk-bar: rgba(4, 48, 82, .38); --wk-bar-ink: #ffffff;
  --art-card-1: #ffffff; --art-card-2: #effcfc; --art-card-3: #fff6e6; --art-card-4: #f1fbff; --art-card-5: #fff1ed;
  --art-card-edge: #0d4f7a; --art-card-shadow: 0 5px 0 #0b3f63, 0 10px 18px rgba(4, 44, 74, .22); --art-card-texture: none;
  --wk-radius-sm: 18px; --wk-pill: rgba(4, 48, 82, .62); --wk-pill-ink: #ffffff;
  --wk-card: radial-gradient(130% 120% at 18% 10%, #ffffff 0 45%, #eefbfc 100%); --wk-card-flat: #ffffff;
  --wk-card-drop: 0 4px 0 #0b3f63, 0 8px 14px rgba(4, 44, 74, .18);
  --wk-board: rgba(220, 250, 255, .2); --wk-board-line: 3px solid rgba(255, 255, 255, .85);
  --wk-grid-line: #8cc8de; --wk-grid-block: #0d4f7a;
  --wk-maze-path: #e9fbf7; --wk-maze-wall: #22bfd2; --wk-maze-wall-d: #0f7f96;
  --wk-flight-sky: linear-gradient(180deg, rgba(200, 245, 255, .55), rgba(120, 220, 235, .2)); --wk-flight-ground: #ffd9a0;
  --wk-mole-garden: linear-gradient(180deg, rgba(255, 232, 190, .55), rgba(255, 217, 160, .85)); --wk-mole-hole: #0d4f7a;
  --wk-wheel: #ff7a59, #ffbe2e, #22bfd2, #9a7cff, #2fbf71, #ff8fb5, #2a7fc4, #ff9f2e;
}
#activityPlayer.activity-player[data-world-kit=space-adventure] {
  --wk-ink: #f2fbff; --wk-ink-soft: #b9d7ff; --wk-line: #5ff2ff; --wk-drop: #070a26;
  --wk-panel: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px), linear-gradient(180deg, rgba(44, 62, 162, .96), rgba(19, 25, 84, .97));
  --wk-panel-border: 2px solid #5ff2ff; --wk-radius: 16px;
  --wk-panel-shadow: 0 0 0 4px rgba(95, 242, 255, .13), 0 0 22px rgba(95, 242, 255, .38), inset 0 0 24px rgba(95, 242, 255, .13), 0 10px 22px rgba(0, 0, 0, .35);
  --wk-screen: linear-gradient(180deg, #f6fbff, #e1efff); --wk-screen-ink: #141f4f;
  --wk-tile: linear-gradient(180deg, #2c3e9e, #18216a); --wk-tile-ink: #f2fbff;
  --wk-slot: rgba(95, 242, 255, .07); --wk-slot-line: 2px dashed rgba(95, 242, 255, .85);
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: 0 0 12px rgba(95, 242, 255, .9), 0 2px 0 #10164a;
  --wk-btn: linear-gradient(180deg, #7ff7ff, #36d6ef); --wk-btn-ink: #0b0f2e; --wk-btn-line: 2px solid #c9fbff; --wk-btn-drop: 0 0 16px rgba(95, 242, 255, .65), 0 4px 0 #0d6f86;
  --wk-ghost: linear-gradient(180deg, rgba(44, 62, 162, .9), rgba(19, 25, 84, .92)); --wk-ghost-ink: #e9fbff;
  --wk-go: linear-gradient(180deg, #b6ff98, #6be24a); --wk-go-ink: #0b1a08;
  --wk-c1: #ff5fd2; --wk-c1d: #c22ea0; --wk-c1s: rgba(255, 95, 210, .2);
  --wk-c2: #ffd34a; --wk-c2d: #c9971a; --wk-c2s: rgba(255, 211, 74, .2);
  --wk-c3: #5ff2ff; --wk-c3d: #1fa9c4; --wk-c3s: rgba(95, 242, 255, .2);
  --wk-c4: #8dff6a; --wk-c4d: #44b82c; --wk-c4s: rgba(141, 255, 106, .2);
  --wk-good: #8dff6a; --wk-good-d: #2f9e23; --wk-good-s: rgba(141, 255, 106, .22);
  --wk-bad: #ff5f7e; --wk-bad-d: #b8203f; --wk-bad-s: rgba(255, 95, 126, .22);
  --wk-bar: rgba(8, 11, 42, .62); --wk-bar-ink: #bff8ff;
  --art-card-1: #f2fbff; --art-card-2: #e8f3ff; --art-card-3: #f3eeff; --art-card-4: #eafcff; --art-card-5: #fff8e3;
  --art-card-edge: #5ff2ff; --art-card-shadow: 0 0 0 2px #5ff2ff, 0 0 16px rgba(95, 242, 255, .45), 0 8px 16px rgba(0, 0, 0, .3); --art-card-texture: none;
  --wk-radius-sm: 12px; --wk-mark: #ffd34a; --wk-pill: rgba(8, 11, 42, .72); --wk-pill-ink: #bff8ff;
  --wk-card: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px), linear-gradient(180deg, #2c3e9e, #161f66); --wk-card-ink: #f2fbff;
  --wk-card-flat: #eef6ff; --wk-flat-ink: #141f4f; --wk-card-line: 2px solid #5ff2ff; --wk-card-drop: 0 0 0 3px rgba(0, 0, 0, .22), 0 0 14px rgba(95, 242, 255, .35), 0 6px 14px rgba(0, 0, 0, .3);
  --wk-card-photo: var(--wk-screen); --wk-card-photo-ink: var(--wk-screen-ink); --wk-good-ink: #141f4f; --wk-bad-ink: #141f4f;
  --wk-board: rgba(10, 14, 52, .5); --wk-board-line: 2px solid rgba(95, 242, 255, .65); --wk-board-shadow: 0 0 18px rgba(95, 242, 255, .2), inset 0 0 18px rgba(95, 242, 255, .08);
  --wk-grid-board: rgba(236, 245, 255, .95); --wk-grid: #ffffff; --wk-grid-ink: #141f4f; --wk-grid-line: #5ff2ff; --wk-grid-block: #0b1040;
  --wk-maze-path: #dfeaff; --wk-maze-wall: #5b3fae; --wk-maze-wall-d: #2a1d6e;
  --wk-flight-sky: linear-gradient(180deg, rgba(20, 28, 85, .55), rgba(58, 31, 120, .35)); --wk-flight-ground: #5b3fae;
  --wk-mole-garden: linear-gradient(180deg, rgba(91, 63, 174, .55), rgba(58, 39, 128, .8)); --wk-mole-hole: #0b0f2e;
  --wk-wheel: #ff5fd2, #ffd34a, #5ff2ff, #8dff6a, #8a7bff, #ff8a5f, #3fa9ff, #ff5f7e;
}
#activityPlayer.activity-player[data-world-kit=dinosaur-valley] {
  --wk-ink: #4a2f17; --wk-ink-soft: #5e4329; --wk-line: #6b5640; --wk-drop: #5b4632;
  --wk-panel: radial-gradient(circle at 18% 28%, rgba(110, 82, 50, .14) 0 2px, transparent 3px) 0 0 / 37px 31px, radial-gradient(circle at 68% 62%, rgba(255, 255, 255, .35) 0 2px, transparent 3px) 0 0 / 43px 29px, radial-gradient(130% 110% at 22% 12%, #f6eedc 0 32%, #e2d3b5 64%, #ccb897 100%);
  --wk-panel-border: 3px solid #7d6a52; --wk-radius: 22px 28px 20px 30px / 26px 20px 30px 22px;
  --wk-panel-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 rgba(90, 66, 40, .2), 0 6px 0 #6b5640, 0 14px 22px rgba(60, 40, 20, .25);
  --wk-tile: repeating-linear-gradient(176deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 11px), linear-gradient(180deg, #bb8854, #94633a);
  --wk-tile-ink: #fff4dc;
  --wk-slot: rgba(255, 238, 196, .5); --wk-slot-line: 3px dashed #8a6440;
  --wk-on-scene: #fff6df; --wk-on-scene-shadow: -1.5px -1.5px 0 #4a2f17, 1.5px -1.5px 0 #4a2f17, -1.5px 1.5px 0 #4a2f17, 1.5px 1.5px 0 #4a2f17, 0 3px 0 #4a2f17, 0 4px 10px rgba(60, 35, 10, .45);
  --wk-btn: linear-gradient(180deg, #6cc85a, #3a9a36); --wk-btn-ink: #ffffff; --wk-btn-line: 3px solid #2f5b23; --wk-btn-drop: 0 5px 0 #2f5b23; --wk-btn-shadow: 0 2px 0 rgba(30, 70, 25, .7);
  --wk-ghost: repeating-linear-gradient(176deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 11px), linear-gradient(180deg, #b07a48, #8a5a30); --wk-ghost-ink: #fff4dc; --wk-ghost-shadow: 0 2px 0 rgba(60, 36, 14, .7);
  --wk-go: linear-gradient(180deg, #ffa64d, #e8691c); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(140, 55, 10, .6);
  --wk-c1: #ff7a2f; --wk-c1d: #b9501a; --wk-c1s: #ffe6d4;
  --wk-c2: #ffc23a; --wk-c2d: #b8860e; --wk-c2s: #fff1cc;
  --wk-c3: #5fb84f; --wk-c3d: #3a8a35; --wk-c3s: #e3f6dc;
  --wk-c4: #4fb3ff; --wk-c4d: #2a7fc4; --wk-c4s: #def0ff;
  --wk-good: #46a83f; --wk-good-d: #2f6b2b; --wk-good-s: #e3f8da;
  --wk-bad: #e85a3c; --wk-bad-d: #9c3018; --wk-bad-s: #ffe2d8;
  --wk-bar: rgba(74, 47, 23, .46); --wk-bar-ink: #fff3d6;
  --art-card-1: #fff8ea; --art-card-2: #f6eedc; --art-card-3: #eef7e6; --art-card-4: #fff1dc; --art-card-5: #f3ebe0;
  --art-card-edge: #7d6a52; --art-card-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 5px 0 #6b5640, 0 10px 18px rgba(60, 40, 20, .22); --art-card-texture: none;
  --wk-radius-sm: 14px 18px 13px 19px / 17px 13px 19px 14px; --wk-pill: rgba(74, 47, 23, .66); --wk-pill-ink: #fff3d6;
  --wk-card: radial-gradient(130% 110% at 22% 12%, #fffdf4 0 42%, #f6edd8 100%); --wk-card-flat: #fffaf0;
  --wk-card-line: 3px solid #7d6a52; --wk-card-drop: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 0 #6b5640, 0 8px 14px rgba(60, 40, 20, .2);
  --wk-tile-shadow: 0 2px 0 rgba(74, 47, 23, .65);
  --wk-board: rgba(255, 246, 222, .28); --wk-board-line: 3px solid rgba(255, 250, 235, .85);
  --wk-grid-board: rgba(255, 250, 238, .93); --wk-grid: #fffdf4; --wk-grid-line: #b8925d; --wk-grid-block: #6b4a2c;
  --wk-maze-path: #f3e6c4; --wk-maze-wall: #6cc35a; --wk-maze-wall-d: #3f8a35;
  --wk-flight-sky: linear-gradient(180deg, rgba(190, 235, 250, .5), rgba(255, 233, 184, .3)); --wk-flight-ground: #6cc35a;
  --wk-mole-garden: linear-gradient(180deg, rgba(166, 216, 106, .55), rgba(95, 184, 79, .85)); --wk-mole-hole: #5b3a1e;
  --wk-wheel: #ff7a2f, #ffc23a, #5fb84f, #4fb3ff, #e85a3c, #a6d86a, #b07a48, #ff9ab0;
}

#activityPlayer.activity-player[data-world-kit=quiz-show-studio] {
  --wk-ink: #2c1773; --wk-ink-soft: #553a95; --wk-line: #2c1773; --wk-drop: #1a0b48;
  --wk-panel: radial-gradient(130% 120% at 50% 0%, #ffffff 0 48%, #f5eeff 80%, #ebdfff 100%);
  --wk-panel-border: 4px solid #2c1773; --wk-radius: 24px;
  --wk-panel-shadow: 0 0 0 4px #ffc21a, 0 7px 0 4px #1a0b48, 0 16px 30px rgba(20, 6, 60, .4);
  --wk-tile: linear-gradient(180deg, #ff6fb6, #e0217e); --wk-tile-ink: #ffffff; --wk-tile-shadow: 0 2px 0 rgba(110, 8, 56, .65);
  --wk-slot: rgba(255, 255, 255, .16); --wk-slot-line: 3px dashed rgba(255, 216, 74, .95);
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1.5px -1.5px 0 #2c1773, 1.5px -1.5px 0 #2c1773, -1.5px 1.5px 0 #2c1773, 1.5px 1.5px 0 #2c1773, 0 3px 0 #2c1773, 0 0 14px rgba(255, 79, 163, .8);
  --wk-btn: linear-gradient(180deg, #ff6fb6, #e0217e); --wk-btn-ink: #ffffff; --wk-btn-line: 3px solid #2c1773; --wk-btn-drop: 0 5px 0 #1a0b48; --wk-btn-shadow: 0 2px 0 rgba(110, 8, 56, .6);
  --wk-ghost: linear-gradient(180deg, #ffffff, #efe4ff); --wk-ghost-ink: #2c1773;
  --wk-go: linear-gradient(180deg, #8de85a, #43b61f); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(25, 85, 8, .65);
  --wk-c1: #ff4fa3; --wk-c1d: #c41d72; --wk-c1s: #ffe0ef;
  --wk-c2: #ffc21a; --wk-c2d: #b87e00; --wk-c2s: #fff2c8;
  --wk-c3: #2ed3f0; --wk-c3d: #1491b0; --wk-c3s: #d8f7fd;
  --wk-c4: #7ddc3a; --wk-c4d: #46a01e; --wk-c4s: #e6f9d6;
  --wk-good: #36c46b; --wk-good-d: #1e8a45; --wk-good-s: #d9f7e3;
  --wk-bad: #ff4d5e; --wk-bad-d: #c22436; --wk-bad-s: #ffe0e3;
  --wk-bar: rgba(26, 11, 72, .62); --wk-bar-ink: #ffffff;
  --art-card-1: #ffffff; --art-card-2: #f6efff; --art-card-3: #fff6e0; --art-card-4: #eefcff; --art-card-5: #fff0f7;
  --art-card-edge: #2c1773; --art-card-shadow: 0 5px 0 #1a0b48, 0 10px 18px rgba(20, 6, 60, .3); --art-card-texture: none;
  --wk-radius-sm: 18px; --wk-pill: rgba(26, 11, 72, .72); --wk-pill-ink: #ffffff; --wk-mark: #ffc21a;
  --wk-card: linear-gradient(180deg, #ffffff, #f6f0ff); --wk-card-flat: #ffffff;
  --wk-card-drop: 0 4px 0 #1a0b48, 0 8px 16px rgba(20, 6, 60, .3);
  --wk-board: rgba(255, 255, 255, .12); --wk-board-line: 3px solid rgba(255, 216, 74, .85); --wk-board-shadow: 0 0 22px rgba(255, 79, 163, .25);
  --wk-grid-board: rgba(255, 255, 255, .95); --wk-grid-line: #b9a3e8; --wk-grid-block: #2c1773;
  --wk-maze-path: #f4ecff; --wk-maze-wall: #8a45e6; --wk-maze-wall-d: #4f22ad;
  --wk-flight-sky: linear-gradient(180deg, rgba(138, 69, 230, .45), rgba(255, 79, 163, .25)); --wk-flight-ground: #ff4fa3;
  --wk-mole-garden: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 79, 163, .35)); --wk-mole-hole: #1a0b48;
  --wk-wheel: #ff4fa3, #ffc21a, #2ed3f0, #7ddc3a, #8a45e6, #ff8a3d, #3d7bff, #ff5f7e;
}

#activityPlayer.activity-player[data-world-kit=chalkboard-classroom] {
  --wk-ink: #2c3e50; --wk-ink-soft: #4d6275; --wk-line: #2f5d4a; --wk-drop: #234636;
  --wk-panel: repeating-linear-gradient(180deg, transparent 0 29px, rgba(110, 160, 220, .2) 29px 31px), linear-gradient(90deg, transparent 0 22px, rgba(255, 110, 110, .4) 22px 24px, transparent 24px), #fffdf4;
  --wk-panel-border: 3px solid #2f5d4a; --wk-radius: 16px;
  --wk-panel-shadow: 0 6px 0 #234636, 0 14px 24px rgba(40, 60, 40, .25);
  --wk-tile: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(180deg, #3a7a5b, #2b5f45); --wk-tile-ink: #fbfbf2; --wk-tile-line: #a8743f; --wk-tile-shadow: 0 0 1.5px rgba(255, 255, 255, .7);
  --wk-slot: rgba(255, 255, 255, .5); --wk-slot-line: 3px dashed #2f5d4a;
  --wk-on-scene: #fbfbf2; --wk-on-scene-shadow: -1.5px -1.5px 0 #1f4433, 1.5px -1.5px 0 #1f4433, -1.5px 1.5px 0 #1f4433, 1.5px 1.5px 0 #1f4433, 0 3px 0 #1f4433, 0 0 6px rgba(255, 255, 255, .35);
  --wk-btn: linear-gradient(180deg, #ffe066, #f5b800); --wk-btn-ink: #3b2a12; --wk-btn-line: 3px solid #3b2a12; --wk-btn-drop: 0 5px 0 #3b2a12; --wk-btn-shadow: none;
  --wk-ghost: linear-gradient(180deg, #ffffff, #f4efe0); --wk-ghost-ink: #2c3e50;
  --wk-go: linear-gradient(180deg, #5fd17e, #2f9a4f); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(20, 80, 40, .6);
  --wk-c1: #ff6f91; --wk-c1d: #c43f63; --wk-c1s: #ffe3ea;
  --wk-c2: #ffc93c; --wk-c2d: #b88a00; --wk-c2s: #fff4cf;
  --wk-c3: #4fa3ff; --wk-c3d: #2a6fc4; --wk-c3s: #def0ff;
  --wk-c4: #4cbf6b; --wk-c4d: #2f8a48; --wk-c4s: #e0f6e6;
  --wk-good: #3fb55f; --wk-good-d: #2a7f42; --wk-good-s: #dff5e5;
  --wk-bad: #ef5350; --wk-bad-d: #b8322f; --wk-bad-s: #fde2e1;
  --wk-bar: rgba(35, 70, 54, .7); --wk-bar-ink: #fbfbf2;
  --art-card-1: #fffdf4; --art-card-2: #fbf6e8; --art-card-3: #eef7ff; --art-card-4: #fff4e0; --art-card-5: #effaf0;
  --art-card-edge: #2f5d4a; --art-card-shadow: 0 5px 0 #234636, 0 10px 18px rgba(40, 60, 40, .22); --art-card-texture: none;
  --wk-radius-sm: 14px; --wk-pill: rgba(35, 70, 54, .78); --wk-pill-ink: #fbfbf2; --wk-mark: #ffc93c;
  --wk-card: linear-gradient(180deg, #ffffff, #fbf6e8); --wk-card-flat: #fffdf4;
  --wk-card-drop: 0 4px 0 #234636, 0 8px 14px rgba(40, 60, 40, .2);
  --wk-board: rgba(47, 107, 79, .3); --wk-board-line: 3px dashed rgba(253, 252, 242, .8); --wk-board-shadow: none;
  --wk-grid-board: #fffdf4; --wk-grid-line: #9fc3ea; --wk-grid-block: #2f6b4f;
  --wk-maze-path: #fffdf4; --wk-maze-wall: #3a7a5b; --wk-maze-wall-d: #2b5f45;
  --wk-flight-sky: linear-gradient(180deg, rgba(143, 211, 245, .5), rgba(216, 241, 251, .35)); --wk-flight-ground: #9ed37a;
  --wk-mole-garden: linear-gradient(180deg, rgba(201, 138, 78, .5), rgba(154, 98, 52, .75)); --wk-mole-hole: #3b2a12;
  --wk-wheel: #ff6f91, #ffc93c, #4fa3ff, #4cbf6b, #b07cff, #ff8a3d, #3fc7c7, #e8402f;
}

#activityPlayer.activity-player[data-world-kit=lunar-new-year] {
  --wk-ink: #5a1220; --wk-ink-soft: #7d3340; --wk-line: #7a1020; --wk-drop: #5a0a14;
  --wk-panel: radial-gradient(130% 120% at 50% 0%, #fffaf0 0 46%, #fff1d6 80%, #ffe6bd 100%);
  --wk-panel-border: 4px solid #b8202f; --wk-radius: 20px;
  --wk-panel-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 5px #f6b72b, 0 6px 0 #7a1020, 0 16px 28px rgba(60, 6, 20, .38);
  --wk-tile: radial-gradient(120% 90% at 30% 15%, #ff6a5c 0%, #e8343f 45%, #c41e2b 100%); --wk-tile-ink: #fff6e0; --wk-tile-line: #f6b72b; --wk-tile-shadow: 0 2px 0 rgba(90, 8, 16, .65);
  --wk-slot: rgba(255, 240, 210, .3); --wk-slot-line: 3px dashed #f6b72b;
  --wk-on-scene: #fff6e0; --wk-on-scene-shadow: -1.5px -1.5px 0 #6b0f1a, 1.5px -1.5px 0 #6b0f1a, -1.5px 1.5px 0 #6b0f1a, 1.5px 1.5px 0 #6b0f1a, 0 3px 0 #6b0f1a, 0 0 14px rgba(255, 179, 92, .7);
  --wk-btn: linear-gradient(180deg, #ef4b4f, #c41e2b); --wk-btn-ink: #fff6e0; --wk-btn-line: 3px solid #7a1020; --wk-btn-drop: 0 5px 0 #5a0a14; --wk-btn-shadow: 0 2px 0 rgba(90, 8, 16, .6);
  --wk-ghost: linear-gradient(180deg, #fffaf0, #ffecc8); --wk-ghost-ink: #5a1220;
  --wk-go: linear-gradient(180deg, #3cc28a, #1f9a63); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(10, 80, 50, .6);
  --wk-c1: #e8343f; --wk-c1d: #a81f2a; --wk-c1s: #ffe1e3;
  --wk-c2: #f6b72b; --wk-c2d: #b47a06; --wk-c2s: #fff1cc;
  --wk-c3: #23a86b; --wk-c3d: #137a4a; --wk-c3s: #d9f5e8;
  --wk-c4: #ff7fae; --wk-c4d: #c8467a; --wk-c4s: #ffe4ef;
  --wk-good: #2fb36a; --wk-good-d: #1d7f48; --wk-good-s: #dcf6e6;
  --wk-bad: #d0302f; --wk-bad-d: #8e1818; --wk-bad-s: #fde0de;
  --wk-bar: rgba(80, 10, 30, .62); --wk-bar-ink: #fff6e0;
  --art-card-1: #fffaf0; --art-card-2: #fff1d6; --art-card-3: #ffe9e4; --art-card-4: #fff6d8; --art-card-5: #f2fbf4;
  --art-card-edge: #b8202f; --art-card-shadow: 0 5px 0 #7a1020, 0 10px 18px rgba(60, 6, 20, .3); --art-card-texture: none;
  --wk-radius-sm: 16px; --wk-pill: rgba(80, 10, 30, .72); --wk-pill-ink: #fff6e0; --wk-mark: #f6b72b;
  --wk-card: linear-gradient(180deg, #fffaf0, #fff0d4); --wk-card-flat: #fffaf0;
  --wk-card-line: 3px solid #b8202f; --wk-card-drop: 0 4px 0 #7a1020, 0 8px 16px rgba(60, 6, 20, .3);
  --wk-board: rgba(255, 220, 180, .14); --wk-board-line: 3px solid rgba(246, 183, 43, .85); --wk-board-shadow: 0 0 20px rgba(255, 140, 80, .25);
  --wk-grid-board: #fffaf0; --wk-grid-line: #e8b0a0; --wk-grid-block: #a81f2a;
  --wk-maze-path: #fff6e0; --wk-maze-wall: #e8343f; --wk-maze-wall-d: #a81f2a;
  --wk-flight-sky: linear-gradient(180deg, rgba(42, 18, 80, .45), rgba(184, 50, 74, .3)); --wk-flight-ground: #6a1c4c;
  --wk-mole-garden: linear-gradient(180deg, rgba(255, 220, 180, .2), rgba(138, 58, 74, .55)); --wk-mole-hole: #3a0c1c;
  --wk-wheel: #e8343f, #f6b72b, #23a86b, #ff7fae, #ff8a3d, #8a5ad6, #3d9be0, #c41e2b;
}

#activityPlayer.activity-player[data-world-kit=safari-savanna] {
  --wk-ink: #4a3216; --wk-ink-soft: #6b4f2c; --wk-line: #8a5a2b; --wk-drop: #6b4422;
  --wk-panel: radial-gradient(130% 120% at 20% 10%, #fffaf0 0 42%, #fbefd2 75%, #f3e0b4 100%);
  --wk-panel-border: 3px solid #8a5a2b; --wk-radius: 20px;
  --wk-panel-shadow: inset 0 0 0 5px #fffaf0, inset 0 0 0 7px rgba(138, 90, 43, .28), 0 6px 0 #6b4422, 0 14px 24px rgba(80, 50, 20, .28);
  --wk-tile: linear-gradient(180deg, #f6e2b4, #e5c47e); --wk-tile-ink: #4a3216; --wk-tile-line: #8a5a2b;
  --wk-slot: rgba(255, 248, 230, .45); --wk-slot-line: 3px dashed #8a5a2b;
  --wk-on-scene: #fff8e6; --wk-on-scene-shadow: -1.5px -1.5px 0 #4a3216, 1.5px -1.5px 0 #4a3216, -1.5px 1.5px 0 #4a3216, 1.5px 1.5px 0 #4a3216, 0 3px 0 #4a3216, 0 4px 10px rgba(60, 35, 10, .4);
  --wk-btn: linear-gradient(180deg, #f08a52, #cf5a26); --wk-btn-ink: #fff8e6; --wk-btn-line: 3px solid #6b3416; --wk-btn-drop: 0 5px 0 #6b3416; --wk-btn-shadow: 0 2px 0 rgba(100, 40, 10, .6);
  --wk-ghost: linear-gradient(180deg, #fffaf0, #f5e6c4); --wk-ghost-ink: #4a3216;
  --wk-go: linear-gradient(180deg, #8ccf55, #4f9a2f); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(30, 80, 10, .6);
  --wk-c1: #e2683c; --wk-c1d: #a8431f; --wk-c1s: #ffe6da;
  --wk-c2: #f2b632; --wk-c2d: #b47f0a; --wk-c2s: #fff2cc;
  --wk-c3: #2fa7a0; --wk-c3d: #1c7570; --wk-c3s: #dbf4f2;
  --wk-c4: #9b6bd6; --wk-c4d: #6a45a8; --wk-c4s: #efe6fb;
  --wk-good: #4caf50; --wk-good-d: #2e7d32; --wk-good-s: #e2f5e2;
  --wk-bad: #e2563c; --wk-bad-d: #a83a22; --wk-bad-s: #fde3dc;
  --wk-bar: rgba(74, 50, 22, .66); --wk-bar-ink: #fff3d6;
  --art-card-1: #fffaf0; --art-card-2: #fbefd2; --art-card-3: #fff3e6; --art-card-4: #f4f9e8; --art-card-5: #eef8f7;
  --art-card-edge: #8a5a2b; --art-card-shadow: 0 5px 0 #6b4422, 0 10px 18px rgba(80, 50, 20, .24); --art-card-texture: none;
  --wk-radius-sm: 16px; --wk-pill: rgba(74, 50, 22, .72); --wk-pill-ink: #fff3d6; --wk-mark: #f2b632;
  --wk-card: linear-gradient(180deg, #fffaf0, #f8ebcc); --wk-card-flat: #fffaf0;
  --wk-card-line: 3px solid #8a5a2b; --wk-card-drop: 0 4px 0 #6b4422, 0 8px 14px rgba(80, 50, 20, .22);
  --wk-board: rgba(255, 246, 222, .26); --wk-board-line: 3px dashed rgba(255, 250, 235, .9); --wk-board-shadow: none;
  --wk-grid-board: #fffaf0; --wk-grid-line: #d9b27a; --wk-grid-block: #8a5a2b;
  --wk-maze-path: #fbefd2; --wk-maze-wall: #7cc24a; --wk-maze-wall-d: #4f9a2f;
  --wk-flight-sky: linear-gradient(180deg, rgba(143, 208, 238, .5), rgba(255, 226, 168, .3)); --wk-flight-ground: #e2a656;
  --wk-mole-garden: linear-gradient(180deg, rgba(234, 183, 106, .45), rgba(201, 138, 62, .8)); --wk-mole-hole: #3a2410;
  --wk-wheel: #e2683c, #f2b632, #2fa7a0, #9b6bd6, #7cc24a, #ff8a9a, #3d8bd6, #c98a3e;
}
#activityPlayer.activity-player[data-world-kit=polar-expedition] {
  --wk-ink: #163e6b; --wk-ink-soft: #3d6890; --wk-line: #1f4f86; --wk-drop: #163e6b;
  --wk-panel: radial-gradient(130% 120% at 20% 8%, #ffffff 0 44%, #eef8ff 72%, #dcefff 100%);
  --wk-panel-border: 4px solid #1f4f86; --wk-radius: 24px;
  --wk-panel-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 6px rgba(31, 79, 134, .18), 0 6px 0 #163e6b, 0 14px 26px rgba(10, 40, 80, .28);
  --wk-tile: linear-gradient(180deg, #ffffff, #d6ecfb); --wk-tile-ink: #163e6b; --wk-tile-line: #1f4f86;
  --wk-slot: rgba(255, 255, 255, .3); --wk-slot-line: 3px dashed rgba(255, 255, 255, .95);
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1.5px -1.5px 0 #163e6b, 1.5px -1.5px 0 #163e6b, -1.5px 1.5px 0 #163e6b, 1.5px 1.5px 0 #163e6b, 0 3px 0 #163e6b, 0 4px 10px rgba(10, 40, 80, .45);
  --wk-btn: linear-gradient(180deg, #ff9a5c, #e8553a); --wk-btn-ink: #ffffff; --wk-btn-line: 3px solid #8a2e16; --wk-btn-drop: 0 5px 0 #8a2e16; --wk-btn-shadow: 0 2px 0 rgba(120, 40, 10, .6);
  --wk-ghost: linear-gradient(180deg, #ffffff, #e2f2ff); --wk-ghost-ink: #163e6b;
  --wk-go: linear-gradient(180deg, #4fc4dc, #1f86b0); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(10, 60, 90, .6);
  --wk-c1: #e8553a; --wk-c1d: #a8361f; --wk-c1s: #ffe4dc;
  --wk-c2: #2f9fd0; --wk-c2d: #1b6f96; --wk-c2s: #dcf3fc;
  --wk-c3: #2fa97a; --wk-c3d: #1c7a55; --wk-c3s: #dcf5ea;
  --wk-c4: #8a6ad6; --wk-c4d: #5d43a3; --wk-c4s: #ece6fb;
  --wk-good: #3fb98a; --wk-good-d: #23805c; --wk-good-s: #dcf5ea;
  --wk-bad: #e8553a; --wk-bad-d: #a8361f; --wk-bad-s: #ffe4dc;
  --wk-bar: rgba(22, 62, 107, .7); --wk-bar-ink: #eaf6ff;
  --art-card-1: #ffffff; --art-card-2: #eef8ff; --art-card-3: #f2f0ff; --art-card-4: #eefaf4; --art-card-5: #fff4ee;
  --art-card-edge: #1f4f86; --art-card-shadow: 0 5px 0 #163e6b, 0 10px 18px rgba(10, 40, 80, .24); --art-card-texture: none;
  --wk-radius-sm: 16px; --wk-pill: rgba(22, 62, 107, .74); --wk-pill-ink: #eaf6ff; --wk-mark: #ffb84a;
  --wk-card: linear-gradient(180deg, #ffffff, #e6f4ff); --wk-card-flat: #ffffff;
  --wk-card-line: 3px solid #1f4f86; --wk-card-drop: 0 4px 0 #163e6b, 0 8px 14px rgba(10, 40, 80, .22);
  --wk-board: rgba(255, 255, 255, .22); --wk-board-line: 3px dashed rgba(255, 255, 255, .92); --wk-board-shadow: none;
  --wk-grid-board: #ffffff; --wk-grid-line: #b8d8ef; --wk-grid-block: #1f4f86;
  --wk-maze-path: #eef8ff; --wk-maze-wall: #5fb3e0; --wk-maze-wall-d: #1f6fa0;
  --wk-flight-sky: linear-gradient(180deg, rgba(34, 87, 154, .45), rgba(184, 226, 246, .3)); --wk-flight-ground: #eaf6ff;
  --wk-mole-garden: linear-gradient(180deg, rgba(234, 248, 255, .35), rgba(184, 220, 245, .7)); --wk-mole-hole: #1f4f86;
  --wk-wheel: #e8553a, #2f9fd0, #ffb84a, #2fa97a, #8a6ad6, #ff8fb0, #1f6fa0, #4fc4dc;
}

#activityPlayer.activity-player[data-world-kit=farm-friends] {
  --wk-ink: #3d2b14; --wk-ink-soft: #6b5232; --wk-line: #7a4a1c; --wk-drop: #5a3412;
  --wk-panel: radial-gradient(130% 120% at 20% 10%, #fffdf4 0 42%, #fbf3dc 75%, #f2e4bc 100%);
  --wk-panel-border: 3px solid #7a4a1c; --wk-radius: 18px;
  --wk-panel-shadow: inset 0 0 0 5px #fffdf4, inset 0 0 0 7px rgba(200, 50, 40, .25), 0 6px 0 #5a3412, 0 14px 24px rgba(70, 45, 15, .26);
  --wk-tile: linear-gradient(180deg, #fbe7a8, #f2cf68); --wk-tile-ink: #3d2b14; --wk-tile-line: #7a4a1c;
  --wk-slot: rgba(255, 253, 240, .45); --wk-slot-line: 3px dashed #7a4a1c;
  --wk-on-scene: #fffdf4; --wk-on-scene-shadow: -1.5px -1.5px 0 #3d2b14, 1.5px -1.5px 0 #3d2b14, -1.5px 1.5px 0 #3d2b14, 1.5px 1.5px 0 #3d2b14, 0 3px 0 #3d2b14, 0 4px 10px rgba(50, 35, 10, .4);
  --wk-btn: linear-gradient(180deg, #ef5a4c, #c8322a); --wk-btn-ink: #fffdf4; --wk-btn-line: 3px solid #7a1c14; --wk-btn-drop: 0 5px 0 #7a1c14; --wk-btn-shadow: 0 2px 0 rgba(100, 20, 10, .6);
  --wk-ghost: linear-gradient(180deg, #fffdf4, #f5ebcf); --wk-ghost-ink: #3d2b14;
  --wk-go: linear-gradient(180deg, #8ccf55, #4f9a2f); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(30, 80, 10, .6);
  --wk-c1: #d8402f; --wk-c1d: #9e2a22; --wk-c1s: #fde3dc;
  --wk-c2: #f2b632; --wk-c2d: #b47f0a; --wk-c2s: #fff2cc;
  --wk-c3: #4f9a34; --wk-c3d: #346e1f; --wk-c3s: #e2f3d6;
  --wk-c4: #3d8bd6; --wk-c4d: #245f9e; --wk-c4s: #dfeefb;
  --wk-good: #4caf50; --wk-good-d: #2e7d32; --wk-good-s: #e2f5e2;
  --wk-bad: #d8402f; --wk-bad-d: #9e2a22; --wk-bad-s: #fde3dc;
  --wk-bar: rgba(61, 43, 20, .68); --wk-bar-ink: #fff6d8;
  --art-card-1: #fffdf4; --art-card-2: #fbf3dc; --art-card-3: #fff0ec; --art-card-4: #eef8e4; --art-card-5: #fff8dc;
  --art-card-edge: #7a4a1c; --art-card-shadow: 0 5px 0 #5a3412, 0 10px 18px rgba(70, 45, 15, .24); --art-card-texture: none;
  --wk-radius-sm: 14px; --wk-pill: rgba(61, 43, 20, .74); --wk-pill-ink: #fff6d8; --wk-mark: #f2b632;
  --wk-card: linear-gradient(180deg, #fffdf4, #f8eed2); --wk-card-flat: #fffdf4;
  --wk-card-line: 3px solid #7a4a1c; --wk-card-drop: 0 4px 0 #5a3412, 0 8px 14px rgba(70, 45, 15, .22);
  --wk-board: rgba(255, 250, 230, .26); --wk-board-line: 3px dashed rgba(255, 253, 240, .92); --wk-board-shadow: none;
  --wk-grid-board: #fffdf4; --wk-grid-line: #dcc28a; --wk-grid-block: #7a4a1c;
  --wk-maze-path: #fbf3dc; --wk-maze-wall: #7cc24a; --wk-maze-wall-d: #4f9a2f;
  --wk-flight-sky: linear-gradient(180deg, rgba(108, 196, 240, .45), rgba(240, 250, 255, .3)); --wk-flight-ground: #7cbf47;
  --wk-mole-garden: linear-gradient(180deg, rgba(159, 214, 100, .45), rgba(111, 184, 69, .8)); --wk-mole-hole: #5a3412;
  --wk-wheel: #d8402f, #f2b632, #4f9a34, #3d8bd6, #ff8fb0, #8a5a2b, #9b6bd6, #ffd23f;
}

#activityPlayer.activity-player[data-world-kit=pirate-island] {
  --wk-ink: #3b2414; --wk-ink-soft: #6b4a2c; --wk-line: #6b3f1c; --wk-drop: #4a2a10;
  --wk-panel: radial-gradient(130% 120% at 20% 10%, #fffaf0 0 40%, #fbedd0 72%, #f2dcae 100%);
  --wk-panel-border: 4px solid #6b3f1c; --wk-radius: 16px;
  --wk-panel-shadow: inset 0 0 0 5px #fffaf0, inset 0 0 0 7px rgba(107, 63, 28, .25), 0 6px 0 #4a2a10, 0 14px 24px rgba(60, 35, 10, .3);
  --wk-tile: linear-gradient(180deg, #fbe2b0, #e8bf78); --wk-tile-ink: #3b2414; --wk-tile-line: #6b3f1c;
  --wk-slot: rgba(255, 250, 235, .4); --wk-slot-line: 3px dashed #6b3f1c;
  --wk-on-scene: #fffaf0; --wk-on-scene-shadow: -1.5px -1.5px 0 #3b2414, 1.5px -1.5px 0 #3b2414, -1.5px 1.5px 0 #3b2414, 1.5px 1.5px 0 #3b2414, 0 3px 0 #3b2414, 0 4px 10px rgba(40, 25, 5, .45);
  --wk-btn: linear-gradient(180deg, #ef5a4c, #c8322a); --wk-btn-ink: #fffaf0; --wk-btn-line: 3px solid #6b1c14; --wk-btn-drop: 0 5px 0 #6b1c14; --wk-btn-shadow: 0 2px 0 rgba(90, 20, 10, .6);
  --wk-ghost: linear-gradient(180deg, #fffaf0, #f5e6c4); --wk-ghost-ink: #3b2414;
  --wk-go: linear-gradient(180deg, #3fc4d6, #12839e); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(10, 60, 80, .6);
  --wk-c1: #d8402f; --wk-c1d: #9e2a22; --wk-c1s: #fde3dc;
  --wk-c2: #e8a21a; --wk-c2d: #a8700a; --wk-c2s: #fff0c8;
  --wk-c3: #138fa8; --wk-c3d: #0b6276; --wk-c3s: #d8f2f6;
  --wk-c4: #2f9a4a; --wk-c4d: #1f6e33; --wk-c4s: #def4e2;
  --wk-good: #2f9a4a; --wk-good-d: #1f6e33; --wk-good-s: #def4e2;
  --wk-bad: #d8402f; --wk-bad-d: #9e2a22; --wk-bad-s: #fde3dc;
  --wk-bar: rgba(59, 36, 20, .7); --wk-bar-ink: #fff4d6;
  --art-card-1: #fffaf0; --art-card-2: #fbedd0; --art-card-3: #eef9fb; --art-card-4: #fff2e6; --art-card-5: #f0f8ec;
  --art-card-edge: #6b3f1c; --art-card-shadow: 0 5px 0 #4a2a10, 0 10px 18px rgba(60, 35, 10, .26); --art-card-texture: none;
  --wk-radius-sm: 12px; --wk-pill: rgba(59, 36, 20, .74); --wk-pill-ink: #fff4d6; --wk-mark: #ffd23f;
  --wk-card: linear-gradient(180deg, #fffaf0, #f8e8c6); --wk-card-flat: #fffaf0;
  --wk-card-line: 3px solid #6b3f1c; --wk-card-drop: 0 4px 0 #4a2a10, 0 8px 14px rgba(60, 35, 10, .24);
  --wk-board: rgba(255, 246, 220, .24); --wk-board-line: 3px dashed rgba(255, 250, 235, .9); --wk-board-shadow: none;
  --wk-grid-board: #fffaf0; --wk-grid-line: #d9b27a; --wk-grid-block: #6b3f1c;
  --wk-maze-path: #fbedd0; --wk-maze-wall: #138fa8; --wk-maze-wall-d: #0b6276;
  --wk-flight-sky: linear-gradient(180deg, rgba(79, 192, 239, .45), rgba(220, 246, 251, .3)); --wk-flight-ground: #f2d690;
  --wk-mole-garden: linear-gradient(180deg, rgba(255, 230, 168, .4), rgba(242, 200, 121, .8)); --wk-mole-hole: #4a2a10;
  --wk-wheel: #d8402f, #e8a21a, #138fa8, #2f9a4a, #8a5ad6, #ff8a5c, #3d8bd6, #c98a4e;
}

#activityPlayer.activity-player[data-world-kit=fairytale-castle] {
  --wk-ink: #3d2a6b; --wk-ink-soft: #64508f; --wk-line: #6a4fc4; --wk-drop: #3d2a6b;
  --wk-panel: radial-gradient(130% 120% at 20% 8%, #ffffff 0 42%, #f8f0ff 72%, #efe2ff 100%);
  --wk-panel-border: 4px solid #6a4fc4; --wk-radius: 26px;
  --wk-panel-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 7px rgba(255, 200, 61, .55), 0 6px 0 #3d2a6b, 0 14px 26px rgba(50, 30, 90, .26);
  --wk-tile: linear-gradient(180deg, #fff3fb, #f0dcff); --wk-tile-ink: #3d2a6b; --wk-tile-line: #6a4fc4;
  --wk-slot: rgba(255, 255, 255, .34); --wk-slot-line: 3px dashed rgba(255, 255, 255, .95);
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1.5px -1.5px 0 #3d2a6b, 1.5px -1.5px 0 #3d2a6b, -1.5px 1.5px 0 #3d2a6b, 1.5px 1.5px 0 #3d2a6b, 0 3px 0 #3d2a6b, 0 4px 10px rgba(50, 30, 90, .45);
  --wk-btn: linear-gradient(180deg, #ff8fc6, #d9559c); --wk-btn-ink: #ffffff; --wk-btn-line: 3px solid #7a1c4c; --wk-btn-drop: 0 5px 0 #7a1c4c; --wk-btn-shadow: 0 2px 0 rgba(90, 20, 60, .6);
  --wk-ghost: linear-gradient(180deg, #ffffff, #f1e8ff); --wk-ghost-ink: #3d2a6b;
  --wk-go: linear-gradient(180deg, #9a7cf0, #6a4fc4); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(40, 20, 90, .6);
  --wk-c1: #d9559c; --wk-c1d: #9e2a6a; --wk-c1s: #ffe2f1;
  --wk-c2: #e8a21a; --wk-c2d: #a8700a; --wk-c2s: #fff2cc;
  --wk-c3: #3d8bd6; --wk-c3d: #245f9e; --wk-c3s: #dfeefb;
  --wk-c4: #7a5ad6; --wk-c4d: #4f3aa3; --wk-c4s: #ece6fb;
  --wk-good: #3fa96a; --wk-good-d: #237a48; --wk-good-s: #ddf4e6;
  --wk-bad: #d9455c; --wk-bad-d: #9e2a3e; --wk-bad-s: #fde2e6;
  --wk-bar: rgba(61, 42, 107, .7); --wk-bar-ink: #fbf4ff;
  --art-card-1: #ffffff; --art-card-2: #f8f0ff; --art-card-3: #fff0f7; --art-card-4: #f0f8ff; --art-card-5: #fffbe8;
  --art-card-edge: #6a4fc4; --art-card-shadow: 0 5px 0 #3d2a6b, 0 10px 18px rgba(50, 30, 90, .22); --art-card-texture: none;
  --wk-radius-sm: 18px; --wk-pill: rgba(61, 42, 107, .74); --wk-pill-ink: #fbf4ff; --wk-mark: #ffc83d;
  --wk-card: linear-gradient(180deg, #ffffff, #f4ebff); --wk-card-flat: #ffffff;
  --wk-card-line: 3px solid #6a4fc4; --wk-card-drop: 0 4px 0 #3d2a6b, 0 8px 14px rgba(50, 30, 90, .2);
  --wk-board: rgba(255, 255, 255, .24); --wk-board-line: 3px dashed rgba(255, 255, 255, .92); --wk-board-shadow: none;
  --wk-grid-board: #ffffff; --wk-grid-line: #d6c8f4; --wk-grid-block: #6a4fc4;
  --wk-maze-path: #f8f0ff; --wk-maze-wall: #ff8fc6; --wk-maze-wall-d: #d9559c;
  --wk-flight-sky: linear-gradient(180deg, rgba(138, 180, 255, .45), rgba(255, 210, 236, .3)); --wk-flight-ground: #a6dc84;
  --wk-mole-garden: linear-gradient(180deg, rgba(185, 229, 154, .45), rgba(132, 200, 104, .8)); --wk-mole-hole: #3d2a6b;
  --wk-wheel: #d9559c, #e8a21a, #3d8bd6, #7a5ad6, #3fa96a, #ff8a5c, #4fc4dc, #c98a4e;
}

#activityPlayer.activity-player[data-world-kit=superhero-city] {
  --wk-ink: #24305e; --wk-ink-soft: #4a5680; --wk-line: #24305e; --wk-drop: #24305e;
  --wk-panel: radial-gradient(130% 120% at 20% 10%, #ffffff 0 45%, #f2f6ff 75%, #e4ecff 100%);
  --wk-panel-border: 4px solid #24305e; --wk-radius: 12px;
  --wk-panel-shadow: 8px 8px 0 #24305e, 0 14px 26px rgba(20, 30, 70, .22);
  --wk-tile: linear-gradient(180deg, #fff6c8, #ffd56b); --wk-tile-ink: #24305e; --wk-tile-line: #24305e;
  --wk-slot: rgba(255, 255, 255, .4); --wk-slot-line: 3px dashed #24305e;
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1.5px -1.5px 0 #24305e, 1.5px -1.5px 0 #24305e, -1.5px 1.5px 0 #24305e, 1.5px 1.5px 0 #24305e, 0 3px 0 #24305e, 0 4px 10px rgba(20, 30, 70, .45);
  --wk-btn: linear-gradient(180deg, #ff6b5e, #e8392f); --wk-btn-ink: #ffffff; --wk-btn-line: 3px solid #24305e; --wk-btn-drop: 0 5px 0 #24305e; --wk-btn-shadow: 0 2px 0 rgba(20, 30, 70, .6);
  --wk-ghost: linear-gradient(180deg, #ffffff, #e8eeff); --wk-ghost-ink: #24305e;
  --wk-go: linear-gradient(180deg, #ffd23f, #f2a812); --wk-go-ink: #24305e; --wk-go-shadow: 0 2px 0 rgba(255, 255, 255, .6);
  --wk-c1: #ff4f4f; --wk-c1d: #b8262c; --wk-c1s: #ffe2e2;
  --wk-c2: #2f7bea; --wk-c2d: #1d4fa8; --wk-c2s: #dfeaff;
  --wk-c3: #ffb020; --wk-c3d: #b8780a; --wk-c3s: #fff1d0;
  --wk-c4: #2fae6a; --wk-c4d: #1d7a48; --wk-c4s: #dcf5e6;
  --wk-good: #2fae6a; --wk-good-d: #1d7a48; --wk-good-s: #dcf5e6;
  --wk-bad: #ff4f4f; --wk-bad-d: #b8262c; --wk-bad-s: #ffe2e2;
  --wk-bar: rgba(36, 48, 94, .72); --wk-bar-ink: #ffffff;
  --art-card-1: #ffffff; --art-card-2: #fff6d8; --art-card-3: #e8f2ff; --art-card-4: #ffe8f2; --art-card-5: #e8fbef;
  --art-card-edge: #24305e; --art-card-shadow: 0 5px 0 #24305e, 0 10px 18px rgba(20, 30, 70, .24); --art-card-texture: none;
  --wk-radius-sm: 10px; --wk-pill: rgba(36, 48, 94, .76); --wk-pill-ink: #ffffff; --wk-mark: #ffd23f;
  --wk-card: linear-gradient(180deg, #ffffff, #eef3ff); --wk-card-flat: #ffffff;
  --wk-card-line: 3px solid #24305e; --wk-card-drop: 4px 4px 0 #24305e, 0 8px 14px rgba(20, 30, 70, .2);
  --wk-board: rgba(255, 255, 255, .24); --wk-board-line: 3px dashed rgba(255, 255, 255, .92); --wk-board-shadow: none;
  --wk-grid-board: #ffffff; --wk-grid-line: #b9c8ec; --wk-grid-block: #24305e;
  --wk-maze-path: #eef3ff; --wk-maze-wall: #2f7bea; --wk-maze-wall-d: #1d4fa8;
  --wk-flight-sky: linear-gradient(180deg, rgba(61, 156, 245, .45), rgba(200, 236, 255, .3)); --wk-flight-ground: #d9e2ee;
  --wk-mole-garden: linear-gradient(180deg, rgba(200, 236, 255, .4), rgba(127, 200, 255, .7)); --wk-mole-hole: #24305e;
  --wk-wheel: #ff4f4f, #2f7bea, #ffb020, #2fae6a, #7b4fd6, #ff6fae, #1fb3b3, #ffd23f;
}

#activityPlayer.activity-player[data-world-kit=halloween-night] {
  --wk-ink: #2a1a4a; --wk-ink-soft: #5a4a7a; --wk-line: #1d1438; --wk-drop: #1d1438;
  --wk-panel: radial-gradient(130% 120% at 20% 10%, #fffaf0 0 45%, #fff0db 78%, #ffe4c2 100%);
  --wk-panel-border: 4px solid #1d1438; --wk-radius: 20px;
  --wk-panel-shadow: 0 0 0 4px #ff8a2b, 0 0 26px rgba(255, 150, 60, .45), 0 14px 26px rgba(10, 6, 30, .45);
  --wk-tile: linear-gradient(180deg, #f3ebff, #dccbff); --wk-tile-ink: #2a1a4a; --wk-tile-line: #1d1438;
  --wk-slot: rgba(255, 255, 255, .14); --wk-slot-line: 3px dashed rgba(255, 226, 122, .9);
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1.5px -1.5px 0 #1d1438, 1.5px -1.5px 0 #1d1438, -1.5px 1.5px 0 #1d1438, 1.5px 1.5px 0 #1d1438, 0 3px 0 #1d1438, 0 0 14px rgba(255, 150, 60, .7);
  --wk-btn: linear-gradient(180deg, #ffa24a, #f2701a); --wk-btn-ink: #1d1438; --wk-btn-line: 3px solid #1d1438; --wk-btn-drop: 0 5px 0 #1d1438; --wk-btn-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  --wk-ghost: linear-gradient(180deg, #ffffff, #efe8ff); --wk-ghost-ink: #2a1a4a;
  --wk-go: linear-gradient(180deg, #b8ff7a, #6fd63a); --wk-go-ink: #1d1438; --wk-go-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  --wk-c1: #ff8a2b; --wk-c1d: #c4560e; --wk-c1s: #ffe8d2;
  --wk-c2: #8a5ae0; --wk-c2d: #5a32a8; --wk-c2s: #ece2ff;
  --wk-c3: #4fbf3a; --wk-c3d: #2f8a22; --wk-c3s: #e2f8d8;
  --wk-c4: #ff5c8a; --wk-c4d: #c42f5c; --wk-c4s: #ffe2ea;
  --wk-good: #4fbf3a; --wk-good-d: #2f8a22; --wk-good-s: #e2f8d8;
  --wk-bad: #ff4f6d; --wk-bad-d: #b8203f; --wk-bad-s: #ffe2e8;
  --wk-bar: rgba(29, 20, 56, .72); --wk-bar-ink: #ffe9c8;
  --art-card-1: #fffaf0; --art-card-2: #f3ebff; --art-card-3: #ffefdc; --art-card-4: #eafbe4; --art-card-5: #ffe8ef;
  --art-card-edge: #1d1438; --art-card-shadow: 0 5px 0 #1d1438, 0 10px 18px rgba(10, 6, 30, .35); --art-card-texture: none;
  --wk-radius-sm: 14px; --wk-pill: rgba(29, 20, 56, .78); --wk-pill-ink: #ffe9c8; --wk-mark: #ffb020;
  --wk-card: linear-gradient(180deg, #fffaf0, #fff0db); --wk-card-flat: #fffaf0;
  --wk-card-line: 3px solid #1d1438; --wk-card-drop: 0 4px 0 #1d1438, 0 8px 16px rgba(10, 6, 30, .3);
  --wk-board: rgba(29, 20, 56, .32); --wk-board-line: 3px dashed rgba(255, 226, 122, .85); --wk-board-shadow: none;
  --wk-grid-board: #fffaf0; --wk-grid-line: #d9c8f0; --wk-grid-block: #2a1a4a;
  --wk-maze-path: #fff0db; --wk-maze-wall: #8a5ae0; --wk-maze-wall-d: #5a32a8;
  --wk-flight-sky: linear-gradient(180deg, rgba(44, 34, 102, .55), rgba(196, 106, 138, .3)); --wk-flight-ground: #2a1f55;
  --wk-mole-garden: linear-gradient(180deg, rgba(90, 63, 154, .45), rgba(42, 31, 85, .75)); --wk-mole-hole: #1d1438;
  --wk-wheel: #ff8a2b, #8a5ae0, #4fbf3a, #ff5c8a, #ffb020, #4fd0ff, #c58cff, #ff6b3a;
}

#activityPlayer.activity-player[data-world-kit=sports-day] {
  --wk-ink: #1f2a44; --wk-ink-soft: #4a5878; --wk-line: #1f2a44; --wk-drop: #1f2a44;
  --wk-panel: linear-gradient(180deg, #ffffff 0%, #f4f8ff 70%, #e8f0fc 100%);
  --wk-panel-border: 4px solid #1f2a44; --wk-radius: 18px;
  --wk-panel-shadow: 0 7px 0 #1f2a44, 0 16px 28px rgba(20, 40, 80, .22);
  --wk-tile: linear-gradient(180deg, #fff6d0, #ffe08a); --wk-tile-ink: #1f2a44; --wk-tile-line: #1f2a44;
  --wk-slot: rgba(255, 255, 255, .45); --wk-slot-line: 3px dashed #ffffff;
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1.5px -1.5px 0 #1f2a44, 1.5px -1.5px 0 #1f2a44, -1.5px 1.5px 0 #1f2a44, 1.5px 1.5px 0 #1f2a44, 0 3px 0 #1f2a44, 0 4px 10px rgba(20, 40, 80, .4);
  --wk-btn: linear-gradient(180deg, #ff6b5e, #e8392f); --wk-btn-ink: #ffffff; --wk-btn-line: 3px solid #1f2a44; --wk-btn-drop: 0 5px 0 #1f2a44; --wk-btn-shadow: 0 2px 0 rgba(20, 30, 60, .6);
  --wk-ghost: linear-gradient(180deg, #ffffff, #e8f0fc); --wk-ghost-ink: #1f2a44;
  --wk-go: linear-gradient(180deg, #4fd06a, #2fae6a); --wk-go-ink: #ffffff; --wk-go-shadow: 0 2px 0 rgba(20, 60, 30, .6);
  --wk-c1: #ff5a4e; --wk-c1d: #c4302a; --wk-c1s: #ffe2df;
  --wk-c2: #2f7bea; --wk-c2d: #1d4fa8; --wk-c2s: #dfeaff;
  --wk-c3: #ffb020; --wk-c3d: #b8780a; --wk-c3s: #fff1d0;
  --wk-c4: #2fae6a; --wk-c4d: #1d7a48; --wk-c4s: #dcf5e6;
  --wk-good: #2fae6a; --wk-good-d: #1d7a48; --wk-good-s: #dcf5e6;
  --wk-bad: #ff5a4e; --wk-bad-d: #c4302a; --wk-bad-s: #ffe2df;
  --wk-bar: rgba(31, 42, 68, .7); --wk-bar-ink: #ffffff;
  --art-card-1: #ffffff; --art-card-2: #fff6d8; --art-card-3: #e8f2ff; --art-card-4: #ffe8e6; --art-card-5: #e6f8ec;
  --art-card-edge: #1f2a44; --art-card-shadow: 0 5px 0 #1f2a44, 0 10px 18px rgba(20, 40, 80, .22); --art-card-texture: none;
  --wk-radius-sm: 12px; --wk-pill: rgba(31, 42, 68, .76); --wk-pill-ink: #ffffff; --wk-mark: #ffd23f;
  --wk-card: linear-gradient(180deg, #ffffff, #eef4ff); --wk-card-flat: #ffffff;
  --wk-card-line: 3px solid #1f2a44; --wk-card-drop: 0 4px 0 #1f2a44, 0 8px 14px rgba(20, 40, 80, .2);
  --wk-board: rgba(255, 255, 255, .26); --wk-board-line: 3px dashed rgba(255, 255, 255, .95); --wk-board-shadow: none;
  --wk-grid-board: #ffffff; --wk-grid-line: #c4d4ee; --wk-grid-block: #1f2a44;
  --wk-maze-path: #fff6e8; --wk-maze-wall: #e2683c; --wk-maze-wall-d: #b04a24;
  --wk-flight-sky: linear-gradient(180deg, rgba(63, 176, 255, .45), rgba(216, 244, 255, .3)); --wk-flight-ground: #6cc04a;
  --wk-mole-garden: linear-gradient(180deg, rgba(143, 212, 122, .45), rgba(108, 192, 74, .75)); --wk-mole-hole: #1f2a44;
  --wk-wheel: #ff5a4e, #2f7bea, #ffb020, #2fae6a, #b06ae0, #ff8ab0, #1fb3b3, #ffd23f;
}

#activityPlayer.activity-player[data-world-kit=construction-site] {
  --wk-ink: #1e2a3a; --wk-ink-soft: #4a5a6e; --wk-line: #1e2a3a; --wk-drop: #1e2a3a;
  --wk-panel: linear-gradient(180deg, #fffdf6 0%, #fff6e0 100%);
  --wk-panel-border: 4px solid #1e2a3a; --wk-radius: 12px;
  --wk-panel-shadow: 0 0 0 5px #ffc21a, 0 0 0 8px #1e2a3a, 0 16px 28px rgba(30, 42, 58, .3);
  --wk-tile: linear-gradient(180deg, #ffe9a8, #ffc21a); --wk-tile-ink: #1e2a3a; --wk-tile-line: #1e2a3a;
  --wk-slot: rgba(255, 255, 255, .35); --wk-slot-line: 3px dashed #1e2a3a;
  --wk-on-scene: #ffffff; --wk-on-scene-shadow: -1.5px -1.5px 0 #1e2a3a, 1.5px -1.5px 0 #1e2a3a, -1.5px 1.5px 0 #1e2a3a, 1.5px 1.5px 0 #1e2a3a, 0 3px 0 #1e2a3a, 0 4px 10px rgba(30, 42, 58, .45);
  --wk-btn: linear-gradient(180deg, #ffa24a, #f2701a); --wk-btn-ink: #1e2a3a; --wk-btn-line: 3px solid #1e2a3a; --wk-btn-drop: 0 5px 0 #1e2a3a; --wk-btn-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  --wk-ghost: linear-gradient(180deg, #ffffff, #eef1f5); --wk-ghost-ink: #1e2a3a;
  --wk-go: linear-gradient(180deg, #ffd84a, #ffc21a); --wk-go-ink: #1e2a3a; --wk-go-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  --wk-c1: #ff8a2b; --wk-c1d: #c4560e; --wk-c1s: #ffe8d2;
  --wk-c2: #2f7bea; --wk-c2d: #1d4fa8; --wk-c2s: #dfeaff;
  --wk-c3: #e0533a; --wk-c3d: #a8301e; --wk-c3s: #ffe0da;
  --wk-c4: #2fae6a; --wk-c4d: #1d7a48; --wk-c4s: #dcf5e6;
  --wk-good: #2fae6a; --wk-good-d: #1d7a48; --wk-good-s: #dcf5e6;
  --wk-bad: #e0533a; --wk-bad-d: #a8301e; --wk-bad-s: #ffe0da;
  --wk-bar: rgba(30, 42, 58, .74); --wk-bar-ink: #ffe9a8;
  --art-card-1: #fffdf6; --art-card-2: #fff3d0; --art-card-3: #eef3f8; --art-card-4: #ffe8d8; --art-card-5: #e8f6ec;
  --art-card-edge: #1e2a3a; --art-card-shadow: 0 5px 0 #1e2a3a, 0 10px 18px rgba(30, 42, 58, .26); --art-card-texture: none;
  --wk-radius-sm: 10px; --wk-pill: rgba(30, 42, 58, .78); --wk-pill-ink: #ffe9a8; --wk-mark: #ffc21a;
  --wk-card: linear-gradient(180deg, #fffdf6, #fff3d8); --wk-card-flat: #fffdf6;
  --wk-card-line: 3px solid #1e2a3a; --wk-card-drop: 0 4px 0 #1e2a3a, 0 8px 14px rgba(30, 42, 58, .22);
  --wk-board: rgba(255, 255, 255, .26); --wk-board-line: 3px dashed rgba(30, 42, 58, .7); --wk-board-shadow: none;
  --wk-grid-board: #fffdf6; --wk-grid-line: #e2cfa0; --wk-grid-block: #1e2a3a;
  --wk-maze-path: #fff6e0; --wk-maze-wall: #e0533a; --wk-maze-wall-d: #a8301e;
  --wk-flight-sky: linear-gradient(180deg, rgba(92, 188, 255, .45), rgba(228, 245, 255, .3)); --wk-flight-ground: #d9a860;
  --wk-mole-garden: linear-gradient(180deg, rgba(236, 200, 136, .45), rgba(217, 168, 96, .75)); --wk-mole-hole: #1e2a3a;
  --wk-wheel: #ffc21a, #ff8a2b, #2f7bea, #e0533a, #2fae6a, #8a98a8, #b8f03a, #1fb3b3;
}

/* ---------- Player chrome: start, controls, pause and end ---------- */
#activityPlayer[data-world-kit] #startArtwork { display: none; }
#activityPlayer[data-world-kit] .player-start { background: transparent; }
#activityPlayer[data-world-kit] #screenPlay { background: transparent; }
#activityPlayer[data-world-kit] .start-card,
#activityPlayer[data-world-kit] .end-panel {
  background: var(--wk-panel); border: var(--wk-panel-border); border-radius: var(--wk-radius); box-shadow: var(--wk-panel-shadow);
  color: var(--wk-ink); font-family: var(--wk-display); text-shadow: none;
}
#activityPlayer[data-world-kit=space-adventure] .start-card,
#activityPlayer[data-world-kit=space-adventure] .end-panel { position: relative; }
#activityPlayer[data-world-kit=space-adventure] .start-card::before,
#activityPlayer[data-world-kit=space-adventure] .end-panel::before { content: ''; position: absolute; inset: 6px; pointer-events: none; border-radius: 10px;
  background: linear-gradient(#ffd34a, #ffd34a) 0 0 / 26px 3px, linear-gradient(#ffd34a, #ffd34a) 0 0 / 3px 26px, linear-gradient(#ffd34a, #ffd34a) 100% 100% / 26px 3px, linear-gradient(#ffd34a, #ffd34a) 100% 100% / 3px 26px; background-repeat: no-repeat; }
#activityPlayer[data-world-kit] .start-card h1, #activityPlayer[data-world-kit] .end-panel h2 { color: var(--wk-ink); font-family: var(--wk-display); font-weight: 800; letter-spacing: 0; }
#activityPlayer[data-world-kit=space-adventure] .start-card h1, #activityPlayer[data-world-kit=space-adventure] .end-panel h2 { text-shadow: 0 0 14px rgba(95, 242, 255, .7); }
#activityPlayer[data-world-kit] .start-template { background: var(--wk-c1d); color: #fff; border: 2px solid var(--wk-c1); font-family: var(--wk-display); }
#activityPlayer[data-world-kit=space-adventure] .start-template { color: #0b0f2e; background: #ffd34a; border-color: #fff3c4; text-transform: uppercase; letter-spacing: .14em; }
#activityPlayer[data-world-kit] #sSub { color: var(--wk-ink-soft); font-family: var(--wk-display); }
#activityPlayer[data-world-kit] .launch-button,
#activityPlayer[data-world-kit] .end-panel button,
#activityPlayer[data-world-kit] .end-panel a#editLink {
  background: var(--wk-ghost); color: var(--wk-ghost-ink); border: var(--wk-btn-line); box-shadow: var(--wk-btn-drop);
  border-radius: 999px; font-family: var(--wk-display); font-weight: 800; text-shadow: var(--wk-ghost-shadow, none);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#activityPlayer[data-world-kit] #startBtn, #activityPlayer[data-world-kit] #againBtn, #activityPlayer[data-world-kit] #resumeBtn { background: var(--wk-btn); color: var(--wk-btn-ink); }
/* Keep the world's colours on hover (css/player-polish.css lightens these two buttons for the classic look). */
#activityPlayer[data-world-kit] .end-panel :is(#againBtn, #resumeBtn):hover { background: var(--wk-btn); color: var(--wk-btn-ink); }
#activityPlayer[data-world-kit] .launch-button:not(:disabled):hover,
#activityPlayer[data-world-kit] .end-panel button:hover { transform: translateY(-2px); filter: brightness(1.05); }
#activityPlayer[data-world-kit] .launch-button:not(:disabled):active,
#activityPlayer[data-world-kit] .end-panel button:active { transform: translateY(3px); box-shadow: none; }
#activityPlayer[data-world-kit] .launch-button span { color: inherit; }
/* Start buttons grow with their label (world fonts differ in width) and tighten on small players. */
#activityPlayer[data-world-kit] .start-card .launch-button { width: auto; min-width: clamp(112px, 17cqw, 180px); padding-inline: clamp(10px, 1.6cqw, 18px); gap: clamp(5px, .8cqw, 8px); }
#activityPlayer[data-world-kit] .start-card .launch-button span { font-size: clamp(19px, 2.4cqw, 25px); }
#activityPlayer[data-world-kit] .player-controls { background: var(--wk-bar); color: var(--wk-bar-ink); border-color: transparent; backdrop-filter: blur(3px); }
#activityPlayer[data-world-kit] .player-controls button, #activityPlayer[data-world-kit] .player-controls .pill { color: var(--wk-bar-ink); }
#activityPlayer[data-world-kit] .player-controls #pauseBtn svg circle { fill: var(--wk-bar-ink); }
#activityPlayer[data-world-kit] .player-controls #pauseBtn svg path { stroke: var(--wk-drop); }
#activityPlayer[data-world-kit] .hud .pill, #activityPlayer[data-world-kit] .activity-clock {
  background: var(--wk-ghost); color: var(--wk-ghost-ink); border: var(--wk-btn-line); box-shadow: var(--wk-btn-drop); font-family: var(--wk-display); font-weight: 800;
}
#activityPlayer[data-world-kit] .player-menu { background: rgba(0, 0, 0, .28); }
#activityPlayer[data-world-kit] .end-summary > div { background: rgba(255, 255, 255, .55); border-radius: 16px; color: var(--wk-ink); }
#activityPlayer[data-world-kit=space-adventure] .end-summary > div { background: rgba(95, 242, 255, .12); border: 1px solid rgba(95, 242, 255, .5); }
#activityPlayer[data-world-kit] .end-summary strong { color: var(--wk-ink); font-family: var(--wk-display); }
#activityPlayer[data-world-kit] #eNote, #activityPlayer[data-world-kit] #eStats { color: var(--wk-ink-soft); }
#activityPlayer[data-world-kit] .end-stars i { filter: drop-shadow(0 3px 0 var(--wk-drop)); }
#activityPlayer[data-world-kit=space-adventure] .end-stars i.on { filter: drop-shadow(0 0 10px #ffd34a); }

/* Short players (a phone using "Play here"): the start card leaves out its long description and the
   end panel puts the score beside the buttons, so nothing important hides below a scroll. */
#activityPlayer[data-world-kit] :is(#screenStart, #screenEnd) { container-type: size; }
@container (max-height: 420px) {
  #activityPlayer[data-world-kit] .start-card #sSub { display: none; }
  #activityPlayer[data-world-kit] #screenEnd .end-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; align-items: center; column-gap: 14px; row-gap: 4px; width: min(460px, calc(100% - 24px)); }
  #activityPlayer[data-world-kit] #screenEnd .end-panel > * { grid-column: 1; margin-block: 0; }
  #activityPlayer[data-world-kit] #screenEnd .end-panel > h2 { grid-column: 1 / -1; padding: 0 4px 2px; font-size: 15px; }
  #activityPlayer[data-world-kit] #screenEnd .end-panel > :is(button, a) { grid-column: 2; min-height: 36px; padding-block: 5px; }
  #activityPlayer[data-world-kit] #screenEnd .end-summary { padding: 0; gap: 10px; }
  #activityPlayer[data-world-kit] #screenEnd .end-summary strong { font-size: 22px; }
  #activityPlayer[data-world-kit] #screenEnd :is(#eNote, #eStats) { font-size: 12px; line-height: 1.3; }
}

/* Readable labels everywhere. Several games and the shared player colour these with the
   theme ink (some with !important); each world restates its own ink on its own surfaces. */
#activityPlayer[data-world-kit] .hud > :is(.activity-clock, .score, .lives, .pill),
#activityPlayer[data-world-kit] .hud .pill,
#activityPlayer[data-world-kit] .activity-clock { color: var(--wk-ghost-ink) !important; text-shadow: var(--wk-ghost-shadow, none); }
#activityPlayer[data-world-kit] .player-controls #pCount { color: var(--wk-bar-ink) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#activityPlayer[data-world-kit][data-phase] #screenEnd :is(#eTitle, #eScore, #eTime, .end-summary strong) { color: var(--wk-ink); }
#activityPlayer[data-world-kit][data-phase] #screenEnd :is(#eNote, #eStats, #eStats .pill, .end-summary span) { color: var(--wk-ink-soft); }
#activityPlayer[data-world-kit][data-phase] #screenEnd :is(#reviewBtn, #viewScoresBtn, #editLink) { background: var(--wk-ghost); color: var(--wk-ghost-ink); border: var(--wk-btn-line); box-shadow: var(--wk-btn-drop); text-shadow: var(--wk-ghost-shadow, none); }
#activityPlayer[data-world-kit][data-phase] :is(#startBtn, #againBtn, #resumeBtn) { color: var(--wk-btn-ink); text-shadow: var(--wk-btn-shadow, none); }

/* Guides stand clear of the control bar; the opening hands over to the same spot. */
#activityPlayer[data-world-kit] .tk-mascot { bottom: calc(var(--player-utility-height, 44px) + 4px); }
#activityPlayer[data-world-kit=ocean-adventure] .tk-mascot { left: 1.2%; }
#activityPlayer[data-world-kit=dinosaur-valley] .tk-mascot { left: 1.2%; }
#activityPlayer[data-world-kit=space-adventure] .tk-mascot { right: 1.2%; bottom: calc(var(--player-utility-height, 44px) + 6%); }

/* Text written straight onto the scene */
#activityPlayer[data-world-kit] #gameStage :is(.pair-game-instruction, .pair-game-status, .matchup-studio-guide, .gs-streak, .gs-q) {
  color: var(--wk-on-scene); text-shadow: var(--wk-on-scene-shadow); font-family: var(--wk-display);
}

/* ---------- Shared buttons inside games ---------- */
#activityPlayer[data-world-kit] #gameStage .btn {
  background: var(--wk-ghost); color: var(--wk-ghost-ink); border: var(--wk-btn-line); box-shadow: var(--wk-btn-drop);
  border-radius: 999px; font-family: var(--wk-display); font-weight: 800; text-shadow: var(--wk-ghost-shadow, none);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#activityPlayer[data-world-kit] #gameStage :is(.btn.green, #scFinish) { background: var(--wk-go); color: var(--wk-go-ink); text-shadow: var(--wk-go-shadow, none); }
#activityPlayer[data-world-kit] #gameStage .btn:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.06); }
#activityPlayer[data-world-kit] #gameStage .btn:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
#activityPlayer[data-world-kit] #gameStage .btn:disabled { opacity: .55; }
#activityPlayer[data-world-kit] #gameStage .btn svg { color: inherit; fill: currentColor; }

/* ---------- Quiz show ---------- */
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-q { font-weight: 800; }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt {
  background: radial-gradient(130% 120% at 18% 10%, #ffffff 0 40%, var(--wk-cs, #f4fbff) 100%);
  border: 4px solid var(--wk-cd, var(--wk-line)); border-radius: var(--wk-radius);
  box-shadow: 0 6px 0 var(--wk-cd, var(--wk-drop)), 0 12px 20px rgba(0, 0, 0, .16);
  color: var(--wk-ink); font-family: var(--wk-display); font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .3s ease;
}
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt.c1 { --wk-c: var(--wk-c1); --wk-cd: var(--wk-c1d); --wk-cs: var(--wk-c1s); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt.c2 { --wk-c: var(--wk-c2); --wk-cd: var(--wk-c2d); --wk-cs: var(--wk-c2s); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt.c3 { --wk-c: var(--wk-c3); --wk-cd: var(--wk-c3d); --wk-cs: var(--wk-c3s); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt:is(.c4, .c5, .c6) { --wk-c: var(--wk-c4); --wk-cd: var(--wk-c4d); --wk-cs: var(--wk-c4s); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt .k {
  box-sizing: border-box; width: 1.9em; height: 1.9em; min-width: 0; padding: 0; display: grid; place-items: center; line-height: 1;
  background: var(--wk-c); color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--wk-cd), 0 3px 0 3px var(--wk-cd);
  border-radius: 50%; text-shadow: -1px -1px 0 var(--wk-cd), 1px -1px 0 var(--wk-cd), -1px 1px 0 var(--wk-cd), 1px 1px 0 var(--wk-cd), 0 2px 0 var(--wk-cd); font-family: var(--wk-display); font-weight: 800;
}
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt:not(:disabled):not(.locked):hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--wk-cd), 0 16px 24px rgba(0, 0, 0, .2); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt:not(:disabled):not(.locked):active { transform: translateY(4px); box-shadow: 0 2px 0 var(--wk-cd); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt.correct { --wk-c: var(--wk-good); --wk-cd: var(--wk-good-d); --wk-cs: var(--wk-good-s); animation: wk-correct .62s cubic-bezier(.2, .8, .3, 1.3); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt.wrong { --wk-c: var(--wk-bad); --wk-cd: var(--wk-bad-d); --wk-cs: var(--wk-bad-s); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-opt:is(.is-gone, .eliminated) { opacity: .4; filter: saturate(.5); transform: scale(.97); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-timer { font-family: var(--wk-display); }
#activityPlayer[data-world-kit] #gameStage[data-game=gameshow] .gs-life { border-color: var(--wk-line); }

/* Space: dark console answers with a coloured signal strip and hexagon keys */
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=gameshow] .gs-opt {
  background: linear-gradient(90deg, var(--wk-c) 0 10px, transparent 10px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px), linear-gradient(180deg, #2c3e9e, #161f66);
  border: 2px solid var(--wk-c); border-radius: 14px; color: #f2fbff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .25), 0 0 18px var(--wk-cs), 0 0 26px rgba(0, 0, 0, .35);
}
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 0; border: 0; box-shadow: none; color: #0b0f2e; text-shadow: none; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=gameshow] .gs-opt:not(:disabled):not(.locked):hover { box-shadow: 0 0 0 3px rgba(0, 0, 0, .25), 0 0 28px var(--wk-c); }
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=gameshow] .gs-opt .answer-picture { background: var(--wk-screen); border-radius: 10px; padding: 4px; }
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=gameshow] .gs-opt.wrong { animation: wk-glitch .45s steps(2, end); }
/* Dinosaur: boulder answers with gem keys */
#activityPlayer[data-world-kit=dinosaur-valley] #gameStage[data-game=gameshow] .gs-opt {
  background: var(--wk-panel); border: 3px solid #7d6a52; border-radius: var(--wk-radius);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 rgba(90, 66, 40, .2), 0 6px 0 #6b5640, 0 12px 18px rgba(60, 40, 20, .22);
}
#activityPlayer[data-world-kit=dinosaur-valley] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 10px 10px 50% 50% / 10px 10px 60% 60%; border: 2px solid #fff; background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .85) 0 10%, transparent 11%), linear-gradient(180deg, var(--wk-c), var(--wk-cd)); }
#activityPlayer[data-world-kit=dinosaur-valley] #gameStage[data-game=gameshow] .gs-opt.correct { background: linear-gradient(rgba(70, 168, 63, .2), rgba(70, 168, 63, .2)), var(--wk-panel); border-color: #46a83f; }
#activityPlayer[data-world-kit=dinosaur-valley] #gameStage[data-game=gameshow] .gs-opt.wrong { background: linear-gradient(rgba(232, 90, 60, .18), rgba(232, 90, 60, .18)), var(--wk-panel); border-color: #e85a3c; animation: wk-rumble .42s linear; }
#activityPlayer[data-world-kit=ocean-adventure] #gameStage[data-game=gameshow] .gs-opt.wrong { animation: wk-wobble .5s ease-in-out; }

/* ---------- Pair match ---------- */
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-heading { color: var(--wk-ghost-ink); text-shadow: none; font-family: "ClassPlay Round", "PingFang SC", "Microsoft YaHei", sans-serif; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-page-size { background: var(--wk-ghost); color: var(--wk-ghost-ink); text-shadow: none; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] :is(.matchup-studio-progress, .matchup-page-size select) {
  background: var(--wk-ghost); color: var(--wk-ghost-ink); border: var(--wk-btn-line); box-shadow: var(--wk-btn-drop); border-radius: 999px; font-family: inherit; font-weight: 800; text-shadow: none;
}
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-answer {
  background: var(--wk-tile); color: var(--wk-tile-ink); border: 3px solid var(--wk-tile-line, var(--wk-line)); border-radius: var(--wk-radius);
  box-shadow: 0 5px 0 var(--wk-drop), 0 10px 16px rgba(0, 0, 0, .18); font-family: var(--wk-display); font-weight: 800; text-shadow: var(--wk-tile-shadow, none);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-answer :is(.pair-face-text, .pair-face-content) { color: inherit; font-family: inherit; }
#activityPlayer[data-world-kit=ocean-adventure] #gameStage[data-game=matchup] .matchup-answer { border-radius: 999px; }
#activityPlayer[data-world-kit=dinosaur-valley] #gameStage[data-game=matchup] .matchup-answer { border-color: #5b3a1e; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 5px 0 #5b3a1e, 0 10px 16px rgba(60, 40, 20, .22); text-shadow: 0 2px 0 rgba(74, 47, 23, .65); }
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=matchup] .matchup-answer { border: 2px solid #5ff2ff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25), 0 0 16px rgba(95, 242, 255, .4); }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-answer:hover { transform: translateY(-3px); filter: brightness(1.05); }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-answer:is(.is-selected, .is-dragging) { outline: 4px solid var(--wk-c2); outline-offset: 3px; transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 12px 0 var(--wk-drop), 0 20px 26px rgba(0, 0, 0, .25); }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-clue:not(:has(img)) {
  background: var(--wk-panel); border: var(--wk-panel-border); border-radius: var(--wk-radius); box-shadow: var(--wk-panel-shadow);
  color: var(--wk-ink); font-family: var(--wk-display); font-weight: 700;
}
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=matchup] .matchup-studio-clue:not(:has(img)) { background: var(--wk-screen); color: var(--wk-screen-ink); border: 2px solid #5ff2ff; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-clue:has(img) { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-clue:has(img) .pair-face-text { background: var(--wk-card-flat); color: var(--wk-flat-ink); text-shadow: none; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-clue :is(.pair-face-text, .pair-face-content) { color: inherit; font-family: inherit; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-bay { background: var(--wk-slot); border: var(--wk-slot-line); border-radius: var(--wk-radius); box-shadow: none; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-bay.is-drop-target { background: rgba(255, 255, 255, .5); border-style: solid; border-color: var(--wk-c2); }
#activityPlayer[data-world-kit=dinosaur-valley] #gameStage[data-game=matchup] .matchup-studio-bay {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 70'%3E%3Cg fill='%238a6440' fill-opacity='.22'%3E%3Cellipse cx='30' cy='44' rx='13' ry='16'/%3E%3Cellipse cx='16' cy='22' rx='5' ry='8' transform='rotate(-20 16 22)'/%3E%3Cellipse cx='30' cy='16' rx='5' ry='8'/%3E%3Cellipse cx='44' cy='22' rx='5' ry='8' transform='rotate(20 44 22)'/%3E%3C/g%3E%3C/svg%3E") center / auto 64% no-repeat, var(--wk-slot);
}
#activityPlayer[data-world-kit=space-adventure] #gameStage[data-game=matchup] .matchup-studio-bay {
  background: linear-gradient(90deg, rgba(95, 242, 255, .9) 0 3px, transparent 3px) 10px 50% / 20px 3px repeat-y, var(--wk-slot);
}
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-tray { background: transparent; border: 0; box-shadow: none; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-board { background: transparent; border: 0; box-shadow: none; }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-mark { font-family: var(--wk-display); }

/* A lesson picture is the piece itself. The theme still owns the word cards,
   landing spaces, sound buttons and feedback, without framing every photograph. */
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) {
  padding:0; border:0; border-radius:6px; background:none; box-shadow:none; text-shadow:none;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img)>.pair-face-content {
  flex-direction:column; height:100%; gap:4px; min-height:0;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) .pair-face-picture {
  flex:1 1 0%; width:100%; height:100%; min-height:0; max-height:none; margin:0; align-self:stretch;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) .pair-face-picture img {
  display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) .pair-face-text {
  flex:0 0 auto; width:auto; max-width:100%; padding:2px 7px; border-radius:6px;
  background:var(--wk-card-flat); color:var(--wk-flat-ink); font-size:clamp(16px,1.8cqw,23px); line-height:1.2;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img):has(.matchup-answer-sound) {
  padding:0;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) .matchup-answer-sound {
  left:auto; right:0; top:0; translate:none; width:30px; height:30px; border-radius:50%;
  background:var(--wk-card-flat); color:var(--wk-flat-ink);
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio .matchup-answer:has(img) .matchup-answer-sound svg {
  width:18px; height:18px;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio-clue:has(img):has(>.pair-listen) {
  padding:0;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio-clue:has(img)>.pair-listen {
  top:0; right:0; bottom:auto; border-radius:50%; box-shadow:none;
}
/* Reading cards grow with the sentence; a percentage-height photo must not
   take the entire scrolling deck and push its caption out of view. */
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-answer:has(img)>.pair-face-content {
  height:auto;
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio[data-density=reading] .matchup-answer:has(img) .pair-face-picture {
  flex:none; height:clamp(80px,10cqw,110px);
}
#activityPlayer[data-world-kit][data-game=matchup] #gameStage .matchup-studio-bay[data-filled=true] {
  border:0; background:none; box-shadow:none;
}

/* ---------- Entrances and feedback ---------- */
#activityPlayer[data-world-kit=ocean-adventure] #gameStage .cp-enter { animation: wk-float-in .62s cubic-bezier(.2, .8, .3, 1.25) both; animation-delay: var(--cp-delay, 0ms); }
#activityPlayer[data-world-kit=space-adventure] #gameStage .cp-enter { animation: wk-scan-in .5s cubic-bezier(.3, .7, .3, 1) both; animation-delay: var(--cp-delay, 0ms); }
#activityPlayer[data-world-kit=dinosaur-valley] #gameStage .cp-enter { animation: wk-drop-in .6s cubic-bezier(.3, .7, .4, 1) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes wk-float-in { from { opacity: 0; transform: translateY(34px) scale(.86); } 62% { opacity: 1; transform: translateY(-5px) scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes wk-scan-in { from { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(2); } 70% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.5); } to { opacity: 1; clip-path: inset(0 0 0 0); filter: none; } }
@keyframes wk-drop-in { from { opacity: 0; transform: translateY(-46px) rotate(-2deg); } 55% { opacity: 1; transform: translateY(5px) scaleY(.94) rotate(.6deg); } 78% { transform: translateY(-3px) scaleY(1.02); } to { opacity: 1; transform: none; } }
@keyframes wk-correct { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 60% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes wk-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg); } 45% { transform: rotate(2.5deg); } 70% { transform: rotate(-1.5deg); } }
@keyframes wk-glitch { 0% { transform: translateX(0); filter: none; } 25% { transform: translateX(-5px); filter: hue-rotate(60deg) brightness(1.4); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); filter: none; } 100% { transform: translateX(0); } }
@keyframes wk-rumble { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, 1px) rotate(-.6deg); } 40% { transform: translate(3px, -1px) rotate(.5deg); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, 0); } }
@media (prefers-reduced-motion: reduce) {
  :where(:root:not([data-motion-managed])) #activityPlayer[data-world-kit] #gameStage :is(.cp-enter, .gs-opt) { animation: none !important; }
}
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rules. */
:where(:root[data-reduce-motion]) #activityPlayer[data-world-kit] #gameStage :is(.cp-enter, .gs-opt) { animation: none !important; }
#activityPlayer[data-world-kit][data-world-style=still] #gameStage :is(.cp-enter, .gs-opt) { animation: none !important; }
:where(:root[data-reduce-motion]) #activityPlayer[data-world-kit] :is(.start-card, .end-panel)::before,
#activityPlayer[data-world-kit][data-world-style=still] :is(.start-card, .end-panel)::before { animation: none !important; }

/* Quiz show studio: marquee lights round the screens, lit-bulb answer keys, scoreboard entrances */
/* The bulbs are background layers just inside the frame: start cards and end panels scroll on small
   screens, so anything drawn outside them would be clipped (and would add scroll bars). Two bulb sets
   take turns to light up; the panel's parent runs the chase so the card's own entrance stays intact. */
@property --wk-qs-a { syntax: '<color>'; inherits: true; initial-value: #fff7d1; }
@property --wk-qs-b { syntax: '<color>'; inherits: true; initial-value: #d9900f; }
#activityPlayer[data-world-kit=quiz-show-studio] :is(.start-card, .end-panel) {
  --qs-a: var(--wk-qs-a, #fff7d1) 0 2.6px, color-mix(in srgb, var(--wk-qs-a, #fff7d1) 45%, transparent) 3.8px, transparent 5.5px;
  --qs-b: var(--wk-qs-b, #d9900f) 0 2.6px, color-mix(in srgb, var(--wk-qs-b, #d9900f) 45%, transparent) 3.8px, transparent 5.5px;
  background:
    radial-gradient(circle at 9px 50%, var(--qs-a)) 0 5px / 36px 12px round no-repeat, radial-gradient(circle at 27px 50%, var(--qs-b)) 0 5px / 36px 12px round no-repeat,
    radial-gradient(circle at 50% 9px, var(--qs-b)) calc(100% - 5px) 0 / 12px 36px no-repeat round, radial-gradient(circle at 50% 27px, var(--qs-a)) calc(100% - 5px) 0 / 12px 36px no-repeat round,
    radial-gradient(circle at 9px 50%, var(--qs-b)) 0 calc(100% - 5px) / 36px 12px round no-repeat, radial-gradient(circle at 27px 50%, var(--qs-a)) 0 calc(100% - 5px) / 36px 12px round no-repeat,
    radial-gradient(circle at 50% 9px, var(--qs-a)) 5px 0 / 12px 36px no-repeat round, radial-gradient(circle at 50% 27px, var(--qs-b)) 5px 0 / 12px 36px no-repeat round,
    var(--wk-panel);
}
#activityPlayer[data-world-kit=quiz-show-studio] .end-panel { padding: clamp(20px, 2cqw, 26px); }
#activityPlayer[data-world-kit=quiz-show-studio] :is(.start-content, #screenEnd, #playerMenu) { animation: wk-qs-chase 1.2s linear infinite; }
@keyframes wk-qs-chase { 0%, 48% { --wk-qs-a: #fff7d1; --wk-qs-b: #d9900f; } 52%, 100% { --wk-qs-a: #d9900f; --wk-qs-b: #fff7d1; } }
@media (prefers-reduced-motion: reduce) { :where(:root:not([data-motion-managed])) #activityPlayer[data-world-kit=quiz-show-studio] :is(.start-content, #screenEnd, #playerMenu) { animation: none !important; } }
/* The player's own "No movement" choice (html[data-reduce-motion], js/motion-preference.js) applies the same rule. */
:where(:root[data-reduce-motion]) #activityPlayer[data-world-kit=quiz-show-studio] :is(.start-content, #screenEnd, #playerMenu) { animation: none !important; }
#activityPlayer[data-world-kit=quiz-show-studio][data-world-style=still] :is(.start-content, #screenEnd, #playerMenu) { animation: none !important; }
#activityPlayer[data-world-kit=quiz-show-studio] .start-template { background: #ffc21a; color: #2c1773; border-color: #fff3c4; }
#activityPlayer[data-world-kit=quiz-show-studio] #gameStage[data-game=gameshow] .gs-opt { border-width: 5px; }
#activityPlayer[data-world-kit=quiz-show-studio] #gameStage[data-game=gameshow] .gs-opt .k { background: radial-gradient(circle at 35% 30%, #ffffff 0 12%, var(--wk-c) 42%, var(--wk-cd) 100%); box-shadow: 0 0 0 3px var(--wk-cd), 0 0 14px var(--wk-c); }
#activityPlayer[data-world-kit=quiz-show-studio] #gameStage[data-game=gameshow] .gs-opt.wrong { animation: wk-buzz .4s linear; }
#activityPlayer[data-world-kit=quiz-show-studio] #gameStage .cp-enter { animation: wk-flip-in .55s cubic-bezier(.3, .8, .3, 1.15) both; animation-delay: var(--cp-delay, 0ms); transform-origin: 50% 0; }
@keyframes wk-flip-in { from { opacity: 0; transform: perspective(700px) rotateX(-80deg); } 65% { opacity: 1; transform: perspective(700px) rotateX(10deg); } to { opacity: 1; transform: none; } }
@keyframes wk-buzz { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
#activityPlayer[data-world-kit=quiz-show-studio] .tk-mascot { left: 1.2%; }

/* Chalkboard classroom: notebook pages taped up, index-card answers, chalkboard tiles */
#activityPlayer[data-world-kit=chalkboard-classroom] :is(.start-card, .end-panel) { position: relative; }
/* Tape folded over the two top corners. It is drawn inside the page (the panel scrolls on small
   screens and clips anything outside it), so each corner square paints a diagonal strip. */
#activityPlayer[data-world-kit=chalkboard-classroom] :is(.start-card, .end-panel)::before,
#activityPlayer[data-world-kit=chalkboard-classroom] :is(.start-card, .end-panel)::after { content: ''; position: absolute; top: 0; width: 50px; height: 50px; pointer-events: none;
  background: linear-gradient(var(--tape-dir), transparent 0 18%, rgba(196, 150, 40, .45) 18% 19%, rgba(255, 228, 112, .82) 19% 30%, rgba(255, 238, 160, .82) 30% 34%, rgba(255, 228, 112, .82) 34% 45%, rgba(196, 150, 40, .45) 45% 46%, transparent 46%); }
#activityPlayer[data-world-kit=chalkboard-classroom] :is(.start-card, .end-panel)::before { left: 0; --tape-dir: to bottom right; }
#activityPlayer[data-world-kit=chalkboard-classroom] :is(.start-card, .end-panel)::after { right: 0; --tape-dir: to bottom left; }
#activityPlayer[data-world-kit=chalkboard-classroom] .start-template { background: #2f6b4f; color: #fbfbf2; border-color: #a8743f; }
#activityPlayer[data-world-kit=chalkboard-classroom] #gameStage[data-game=gameshow] .gs-opt { background: linear-gradient(var(--wk-c), var(--wk-c)) top / 100% 12px no-repeat, repeating-linear-gradient(180deg, transparent 0 25px, rgba(110, 160, 220, .2) 25px 27px) 0 12px / 100% 100% no-repeat, #fffdf4; border-radius: 10px; }
#activityPlayer[data-world-kit=chalkboard-classroom] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 8px; }
#activityPlayer[data-world-kit=chalkboard-classroom] #gameStage .cp-enter { animation: wk-paper-in .5s cubic-bezier(.25, .8, .35, 1.1) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes wk-paper-in { from { opacity: 0; transform: translateY(-18px) rotate(-2deg) scale(.96); } 70% { opacity: 1; transform: translateY(3px) rotate(.4deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=chalkboard-classroom] .tk-mascot { left: 1.2%; }
/* Instructions written on the wall sit on little framed chalkboards, so the bunting never runs behind the words.
   (#screenPlay outranks the shared on-scene rule in css/themekit-games.css, whose list includes an id.) */
#activityPlayer.activity-player[data-world-kit=chalkboard-classroom][data-phase] #screenPlay #gameStage :is(.puzzle-instruction, .unjumble-instruction, .diagram-instruction, .pair-game-instruction),
#activityPlayer.activity-player[data-world-kit=chalkboard-classroom][data-phase] #screenPlay #gameStage[data-game=wheel] .gprompt {
  box-sizing: border-box; width: fit-content; max-width: calc(100% - 20px); margin-left: auto; margin-right: auto;
  padding: .2em .9em .28em; border-radius: 8px; background: #2f5d4a; color: #fbfbf2;
  text-shadow: 0 0 1px rgba(255, 255, 255, .45); box-shadow: 0 0 0 3px #a8743f, 0 4px 0 3px #6e4a28;
}

/* Lunar New Year: gold-trimmed paper, lantern answer keys, cards that unfold */
#activityPlayer[data-world-kit=lunar-new-year] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=lunar-new-year] :is(.start-card, .end-panel)::before,
#activityPlayer[data-world-kit=lunar-new-year] :is(.start-card, .end-panel)::after { content: ''; position: absolute; top: 10px; width: 26px; height: 26px; border: 3px solid #e8343f; border-radius: 0 0 0 70%; border-top: 0; border-right: 0; pointer-events: none; }
#activityPlayer[data-world-kit=lunar-new-year] :is(.start-card, .end-panel)::before { left: 10px; }
#activityPlayer[data-world-kit=lunar-new-year] :is(.start-card, .end-panel)::after { right: 10px; transform: scaleX(-1); }
#activityPlayer[data-world-kit=lunar-new-year] .start-template { background: #c41f2c; color: #fff6e0; border-color: #f6b72b; }
#activityPlayer[data-world-kit=lunar-new-year] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 46% 46% 42% 42% / 52% 52% 48% 48%; border-color: #f6b72b; background: radial-gradient(circle at 40% 30%, #ff8a7a 0 18%, var(--wk-c) 55%, var(--wk-cd) 100%); }
#activityPlayer[data-world-kit=lunar-new-year] #gameStage .cp-enter { animation: wk-unfold .55s cubic-bezier(.3, .8, .35, 1.1) both; animation-delay: var(--cp-delay, 0ms); transform-origin: 50% 0; }
@keyframes wk-unfold { from { opacity: 0; transform: scaleY(.2); } 60% { opacity: 1; transform: scaleY(1.05); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=lunar-new-year] .tk-mascot { left: 1.2%; }

/* Safari savanna: stitched canvas, leather-button answer keys, cards that pop up like a lookout */
#activityPlayer[data-world-kit=safari-savanna] :is(.start-card, .end-panel) { outline: 2px dashed rgba(138, 90, 43, .55); outline-offset: -11px; }
#activityPlayer[data-world-kit=safari-savanna] .start-template { background: #8a5a2b; color: #fff8e6; border-color: #e5c47e; }
#activityPlayer[data-world-kit=safari-savanna] #gameStage[data-game=gameshow] .gs-opt { outline: 2px dashed rgba(138, 90, 43, .45); outline-offset: -9px; }
#activityPlayer[data-world-kit=safari-savanna] #gameStage[data-game=gameshow] .gs-opt .k { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55) 0 12%, transparent 13%), linear-gradient(180deg, var(--wk-c), var(--wk-cd)); }
#activityPlayer[data-world-kit=safari-savanna] #gameStage .cp-enter { animation: wk-pop-up .55s cubic-bezier(.25, .9, .35, 1.25) both; animation-delay: var(--cp-delay, 0ms); transform-origin: 50% 100%; }
@keyframes wk-pop-up { from { opacity: 0; transform: translateY(40px) scaleY(.7); } 60% { opacity: 1; transform: translateY(-6px) scaleY(1.04); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=safari-savanna] .tk-mascot { left: 3%; }

/* Polar expedition: frosted panels with a snowy edge, icy answer keys, cards that glide in over the ice */
#activityPlayer[data-world-kit=polar-expedition] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=polar-expedition] :is(.start-card, .end-panel)::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 11px 0, #ffffff 0 8px, rgba(159, 211, 242, .9) 8px 9.5px, transparent 10px) 0 0 / 22px 12px repeat-x; }
#activityPlayer[data-world-kit=polar-expedition] .start-template { background: #1f4f86; color: #ffffff; border-color: #9fd3f2; }
#activityPlayer[data-world-kit=polar-expedition] #gameStage[data-game=gameshow] .gs-opt .k { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .75) 0 13%, transparent 14%), linear-gradient(180deg, var(--wk-c), var(--wk-cd)); }
#activityPlayer[data-world-kit=polar-expedition] #gameStage .cp-enter { animation: wk-glide-in .55s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes wk-glide-in { from { opacity: 0; transform: translateX(-36px) skewX(8deg); } 65% { opacity: 1; transform: translateX(5px) skewX(-2deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=polar-expedition] .tk-mascot { left: 3%; }

/* Farm friends: gingham-trimmed paper, barn-red answer keys, cards that bounce in like a hop */
#activityPlayer[data-world-kit=farm-friends] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=farm-friends] :is(.start-card, .end-panel)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none; border-radius: var(--wk-radius) var(--wk-radius) 0 0;
  background: repeating-linear-gradient(90deg, rgba(216, 64, 47, .55) 0 12px, transparent 12px 24px), repeating-linear-gradient(180deg, rgba(216, 64, 47, .35) 0 6px, transparent 6px 12px); }
#activityPlayer[data-world-kit=farm-friends] .start-template { background: #c8322a; color: #fffdf4; border-color: #fbe7a8; }
#activityPlayer[data-world-kit=farm-friends] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 10px; background: linear-gradient(180deg, var(--wk-c), var(--wk-cd)); box-shadow: inset 0 0 0 2px rgba(255, 253, 244, .65); }
#activityPlayer[data-world-kit=farm-friends] #gameStage .cp-enter { animation: wk-hop-in .55s cubic-bezier(.25, .9, .35, 1.25) both; animation-delay: var(--cp-delay, 0ms); transform-origin: 50% 100%; }
@keyframes wk-hop-in { from { opacity: 0; transform: translateY(-30px) scale(.9); } 55% { opacity: 1; transform: translateY(4px) scale(1.03, .95); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=farm-friends] .tk-mascot { left: 3%; }

/* Pirate island: rope-edged parchment, gold doubloon answer keys, cards that swing in on a rope */
#activityPlayer[data-world-kit=pirate-island] :is(.start-card, .end-panel) { outline: 3px dotted rgba(107, 63, 28, .55); outline-offset: -10px; }
#activityPlayer[data-world-kit=pirate-island] .start-template { background: #3b2414; color: #ffd23f; border-color: #e8a21a; }
#activityPlayer[data-world-kit=pirate-island] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 50%; border-color: #a8700a; background: radial-gradient(circle at 35% 30%, #fff6c8 0 14%, #ffd23f 40%, #c9900f 100%); color: #3b2414; }
#activityPlayer[data-world-kit=pirate-island] #gameStage .cp-enter { animation: wk-swing-in .6s cubic-bezier(.3, .8, .35, 1.1) both; animation-delay: var(--cp-delay, 0ms); transform-origin: 50% 0; }
@keyframes wk-swing-in { from { opacity: 0; transform: rotate(-9deg) translateY(-14px); } 55% { opacity: 1; transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=pirate-island] .tk-mascot { left: 3%; }

/* Fairy-tale castle: storybook pages with a gold border, jewel answer keys, cards that appear with a twirl */
#activityPlayer[data-world-kit=fairytale-castle] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=fairytale-castle] :is(.start-card, .end-panel)::before,
#activityPlayer[data-world-kit=fairytale-castle] :is(.start-card, .end-panel)::after { content: ''; position: absolute; top: 10px; width: 22px; height: 22px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #ffc83d 0 3px, transparent 3.5px), conic-gradient(from 45deg, transparent 0 20%, rgba(255, 200, 61, .9) 20% 30%, transparent 30% 45%, rgba(255, 200, 61, .9) 45% 55%, transparent 55% 70%, rgba(255, 200, 61, .9) 70% 80%, transparent 80% 95%, rgba(255, 200, 61, .9) 95%); border-radius: 50%; }
#activityPlayer[data-world-kit=fairytale-castle] :is(.start-card, .end-panel)::before { left: 12px; }
#activityPlayer[data-world-kit=fairytale-castle] :is(.start-card, .end-panel)::after { right: 12px; }
#activityPlayer[data-world-kit=fairytale-castle] .start-template { background: #6a4fc4; color: #ffffff; border-color: #ffc83d; }
#activityPlayer[data-world-kit=fairytale-castle] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 36% 36% 50% 50% / 30% 30% 70% 70%; border-color: #ffc83d; background: radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .8) 0 12%, var(--wk-c) 50%, var(--wk-cd) 100%); }
#activityPlayer[data-world-kit=fairytale-castle] #gameStage .cp-enter { animation: wk-twirl-in .6s cubic-bezier(.3, .85, .35, 1.15) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes wk-twirl-in { from { opacity: 0; transform: scale(.6) rotate(-10deg); } 60% { opacity: 1; transform: scale(1.04) rotate(2deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=fairytale-castle] .tk-mascot { left: 3%; }

/* Superhero city: comic panels with a halftone corner, tilted answer keys, cards that zoom in */
#activityPlayer[data-world-kit=superhero-city] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=superhero-city] :is(.start-card, .end-panel)::before { content: ''; position: absolute; right: 10px; top: 10px; width: 64px; height: 64px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 111, 174, .45) 0 30%, transparent 34%) 0 0 / 10px 10px; -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 75%); mask-image: linear-gradient(225deg, #000 30%, transparent 75%); }
#activityPlayer[data-world-kit=superhero-city] .start-template { background: #24305e; color: #ffd23f; border-color: #ffd23f; }
#activityPlayer[data-world-kit=superhero-city] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 8px; border-color: #24305e; transform: rotate(-5deg); box-shadow: 3px 3px 0 #24305e; background: linear-gradient(180deg, var(--wk-c), var(--wk-cd)); }
#activityPlayer[data-world-kit=superhero-city] #gameStage .cp-enter { animation: wk-zoom-in .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes wk-zoom-in { from { opacity: 0; transform: translateX(60px) skewX(-14deg) scale(.9); } 60% { opacity: 1; transform: translateX(-6px) skewX(4deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=superhero-city] .tk-mascot { left: 3%; }

/* Halloween night: cosy candle-lit cards with a cobweb corner and a dangling spider, pumpkin answer keys, cards that float in like friendly ghosts */
#activityPlayer[data-world-kit=halloween-night] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=halloween-night] :is(.start-card, .end-panel)::before { content: ''; position: absolute; left: 6px; top: 6px; width: 72px; height: 72px; pointer-events: none; opacity: .45;
  background: repeating-radial-gradient(circle at 0 0, transparent 0 15px, #5a4a7a 15px 16.5px), repeating-conic-gradient(from 90deg at 0 0, #5a4a7a 0 1.4deg, transparent 1.4deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 58%, transparent 72%); mask-image: radial-gradient(circle at 0 0, #000 58%, transparent 72%); }
#activityPlayer[data-world-kit=halloween-night] :is(.start-card, .end-panel)::after { content: ''; position: absolute; right: 28px; top: 0; width: 18px; height: 46px; pointer-events: none; transform-origin: 50% 0; animation: wk-dangle 2.6s ease-in-out infinite alternate;
  background: radial-gradient(circle at 36% 36px, #ffffff 0 1.6px, transparent 2px), radial-gradient(circle at 64% 36px, #ffffff 0 1.6px, transparent 2px), radial-gradient(circle at 50% 38px, #2a1a4a 0 7px, transparent 7.5px), linear-gradient(#5a4a7a, #5a4a7a) 50% 0 / 2px 32px no-repeat; }
@keyframes wk-dangle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
#activityPlayer[data-world-kit=halloween-night] .start-template { background: #2a1a4a; color: #ffb36b; border-color: #ff8a2b; }
#activityPlayer[data-world-kit=halloween-night] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 46% 46% 44% 44% / 54% 54% 46% 46%; border-color: #1d1438; box-shadow: 0 3px 0 #1d1438; background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .55) 0 10%, transparent 32%), linear-gradient(180deg, var(--wk-c), var(--wk-cd)); }
#activityPlayer[data-world-kit=halloween-night] #gameStage .cp-enter { animation: wk-ghost-in .6s cubic-bezier(.3, .85, .35, 1.1) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes wk-ghost-in { from { opacity: 0; transform: translateY(28px) scale(.9) rotate(-3deg); } 60% { opacity: 1; transform: translateY(-5px) scale(1.02) rotate(1.5deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=halloween-night] .tk-mascot { left: 3%; }

/* Sports day: scoreboard cards with a running-track stripe, medal answer keys, cards that sprint in from the side */
#activityPlayer[data-world-kit=sports-day] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=sports-day] :is(.start-card, .end-panel)::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: none; border-radius: 0 0 14px 14px;
  background: repeating-linear-gradient(180deg, #e2683c 0 3px, #ffffff 3px 4.5px); opacity: .9; }
#activityPlayer[data-world-kit=sports-day] :is(.start-card, .end-panel)::after { content: ''; position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff6c8 0 22%, transparent 24%), radial-gradient(circle, #ffd23f 0 60%, #1f2a44 62% 70%, transparent 72%); }
#activityPlayer[data-world-kit=sports-day] .start-template { background: #2f7bea; color: #ffffff; border-color: #1f2a44; }
#activityPlayer[data-world-kit=sports-day] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 50%; border-color: #1f2a44; box-shadow: 0 3px 0 #1f2a44, inset 0 0 0 3px rgba(255, 255, 255, .55); background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .6) 0 12%, transparent 34%), linear-gradient(180deg, var(--wk-c), var(--wk-cd)); }
#activityPlayer[data-world-kit=sports-day] #gameStage .cp-enter { animation: wk-sprint-in .5s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: var(--cp-delay, 0ms); }
@keyframes wk-sprint-in { from { opacity: 0; transform: translateX(-70px) skewX(10deg); } 60% { opacity: 1; transform: translateX(6px) skewX(-4deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=sports-day] .tk-mascot { left: 3%; }

/* Construction site: plans on cream card with hazard-stripe trim and corner bolts, hard-hat answer keys, cards that drop in like a crane load */
#activityPlayer[data-world-kit=construction-site] :is(.start-card, .end-panel) { position: relative; }
#activityPlayer[data-world-kit=construction-site] :is(.start-card, .end-panel)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none; border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(45deg, #ffc21a 0 10px, #1e2a3a 10px 20px); }
#activityPlayer[data-world-kit=construction-site] :is(.start-card, .end-panel)::after { content: ''; position: absolute; inset: 18px 10px 8px; pointer-events: none;
  background: radial-gradient(circle at 5px 5px, #8a98a8 0 3.5px, transparent 4px), radial-gradient(circle at calc(100% - 5px) 5px, #8a98a8 0 3.5px, transparent 4px), radial-gradient(circle at 5px calc(100% - 5px), #8a98a8 0 3.5px, transparent 4px), radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #8a98a8 0 3.5px, transparent 4px); }
#activityPlayer[data-world-kit=construction-site] .start-template { background: #1e2a3a; color: #ffc21a; border-color: #ffc21a; }
#activityPlayer[data-world-kit=construction-site] #gameStage[data-game=gameshow] .gs-opt .k { border-radius: 50% 50% 10% 10% / 70% 70% 12% 12%; border-color: #1e2a3a; box-shadow: 0 3px 0 #1e2a3a; background: linear-gradient(180deg, rgba(255, 255, 255, .45) 0 18%, transparent 30%), linear-gradient(180deg, var(--wk-c), var(--wk-cd)); }
#activityPlayer[data-world-kit=construction-site] #gameStage .cp-enter { animation: wk-crane-in .62s cubic-bezier(.3, .85, .35, 1.15) both; animation-delay: var(--cp-delay, 0ms); transform-origin: 50% 0; }
@keyframes wk-crane-in { from { opacity: 0; transform: translateY(-60px) rotate(-4deg); } 55% { opacity: 1; transform: translateY(6px) rotate(2deg); } 80% { transform: translateY(-2px) rotate(-1deg); } to { opacity: 1; transform: none; } }
#activityPlayer[data-world-kit=construction-site] .tk-mascot { left: 3%; }

/* Source: css/themekit-games.css; sha256: f0a2561cd2bb63f80729e4efc3b062a33f82d3e508e4bb74163a15c39b96b349 */
/* Learning worlds in every game. The world tokens (--wk-*, css/themekit-worlds.css) dress the
   pieces each template already draws: answer cards, letter tiles, drop spaces, boards, column
   headings, small buttons and status labels. Layout, sizing and motion stay with each game's
   own styles; a new world needs only its tokens. Original ClassPlay design. */

/* ---------- Shared skin values follow the world ---------- */
#activityPlayer.activity-player[data-world-kit] {
  --sk-edge: var(--wk-drop); --sk-accent: var(--wk-c1); --sk-radius: var(--wk-radius-sm);
  --sk-good: var(--wk-good); --sk-good-edge: var(--wk-good-d); --sk-bad: var(--wk-bad); --sk-bad-edge: var(--wk-bad-d);
  --sk-hud: var(--wk-pill); --sk-hud-ink: var(--wk-pill-ink); --sk-font-display: var(--wk-display);
  --jp-paper: var(--wk-card-flat); --jp-ink: var(--wk-flat-ink);
}
#activityPlayer[data-world-kit][data-phase] #gameStage { font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.is-selected, .pressed, .selected):not(.is-correct):not(.is-wrong) { outline-color: var(--wk-mark); }
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.is-drop-target, .over) { outline-color: var(--wk-mark); }
#activityPlayer[data-world-kit][data-phase] #gameStage :is(button, [role=button], [tabindex]):focus-visible { outline-color: var(--wk-mark); }

/* ---------- Words written on the scene ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.gprompt, .puzzle-instruction, .puzzle-status, .unjumble-instruction, .diagram-instruction, .arcade-status, .ag-progress, #agProgress, .unjumble-position, .wheel-result-note) {
  color: var(--wk-on-scene); text-shadow: var(--wk-on-scene-shadow); font-family: var(--wk-display); background: none; border: 0; box-shadow: none;
}
/* Short labels and status lines become the world's pills. */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.sequence-instruction, .sequence-status, .unjumble-status, .diagram-status, .iq-countdown, .matchup-studio-progress) {
  background: var(--wk-pill); color: var(--wk-pill-ink); border: 0; box-shadow: none; text-shadow: none; font-family: var(--wk-display); font-weight: 800;
}

/* ---------- Prompts: the question, clue or sentence a child reads first ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-question, .sentence-text, .arcade-question, .mole-instruction) {
  background: var(--wk-panel); color: var(--wk-ink); border: var(--wk-panel-border); border-radius: var(--wk-radius); box-shadow: var(--wk-panel-shadow); font-family: var(--wk-display);
}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-question, .sentence-text, .arcade-question, .mole-instruction) :is(.pair-face-text, .quiz-question-content, strong, span:not([class])) { color: inherit; }

/* ---------- Answer cards: things a child taps ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .rank-row, .crossword-clue, .wordsearch-words li, .mole-card, .answer-cloud, .maze-answer, .opt, .memory-face, .fm-choice) {
  background: var(--wk-card); color: var(--wk-card-ink); border: var(--wk-card-line); box-shadow: var(--wk-card-drop); font-family: var(--wk-display); text-shadow: none;
}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .rank-row, .crossword-clue, .wordsearch-words li, .opt, .memory-face, .fm-choice) { border-radius: var(--wk-radius-sm); }
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .rank-row, .crossword-clue, .wordsearch-words li, .mole-card, .answer-cloud, .maze-answer, .opt, .memory-face, .fm-choice) :is(.pair-face-text, .quiz-choice-content, .answer-content, span:not([class]), small, b) { color: inherit; }
/* Picture answers keep a light card so the picture reads, whatever the world's colours. */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .opt, .memory-face).has-image,
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .opt, .memory-face, .mole-card, .answer-cloud):has(img) { background: var(--wk-card-photo); color: var(--wk-card-photo-ink); }

/* ---------- Pieces: things a child picks up and places ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.ag-tile, .sort-card, .unjumble-word, .sentence-word, .diagram-label) {
  background: var(--wk-tile); color: var(--wk-tile-ink); border: 3px solid var(--wk-tile-line, var(--wk-line)); border-radius: var(--wk-radius-sm);
  box-shadow: 0 4px 0 var(--wk-drop), 0 8px 14px rgba(0, 0, 0, .16); font-family: var(--wk-display); font-weight: 800; text-shadow: var(--wk-tile-shadow, none);
}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.ag-tile, .sort-card, .unjumble-word, .sentence-word, .diagram-label) :is(.pair-face-text, .sort-caption, span:not([class])) { color: inherit; }
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.sort-card, .diagram-label):has(img) { background: var(--wk-card-photo); color: var(--wk-card-photo-ink); text-shadow: none; }

/* ---------- Spaces a piece fits into ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.ag-slot, .unjumble-slot, .sentence-gap, .sort-empty-slot) {
  background: var(--wk-slot); color: var(--wk-ink); border: var(--wk-slot-line); border-radius: var(--wk-radius-sm); font-family: var(--wk-display);
}
/* A filled space shows its piece on the world's tile. */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.ag-slot.filled, .unjumble-slot.is-filled, .unjumble-slot:has([data-word]), .sentence-gap.is-filled) {
  background: var(--wk-tile); color: var(--wk-tile-ink); border: 3px solid var(--wk-tile-line, var(--wk-line)); border-style: solid; text-shadow: var(--wk-tile-shadow, none);
}

/* ---------- Boards and areas that hold the pieces ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.sort-col, .sort-deck, .puzzle-scroll, .unjumble-slots, .ag-slots, .mole-garden, .matchup-studio-bank) {
  background: var(--wk-board); border: var(--wk-board-line); border-radius: var(--wk-radius); box-shadow: var(--wk-board-shadow);
}
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-cols.table .sort-col { border-radius: var(--wk-radius-sm); }

/* ---------- Right and wrong keep their meaning in every world ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .rank-row, .crossword-clue, .wordsearch-words li, .answer-cloud, .opt, .memory-face, .sort-card, .ag-slot, .unjumble-slot, .sentence-gap, .diagram-label, .diagram-target):is(.is-correct, .correct, .right, .is-solved, .is-found) {
  background: linear-gradient(var(--wk-good-s), var(--wk-good-s)), var(--wk-card-flat); color: var(--wk-good-ink); border-color: var(--wk-good-d); text-shadow: none;
}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .rank-row, .answer-cloud, .opt, .memory-face, .sort-card, .ag-slot, .unjumble-slot, .sentence-gap, .diagram-target):is(.is-wrong, .wrong, .bad, .is-mismatch) {
  background: linear-gradient(var(--wk-bad-s), var(--wk-bad-s)), var(--wk-card-flat); color: var(--wk-bad-ink); border-color: var(--wk-bad-d); text-shadow: none;
}
#activityPlayer[data-world-kit][data-phase] #gameStage .memory-card.is-matched .memory-face { background: linear-gradient(var(--wk-good-s), var(--wk-good-s)), var(--wk-card-flat); color: var(--wk-good-ink); border-color: var(--wk-good-d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .memory-card.is-mismatch .memory-face { background: linear-gradient(var(--wk-bad-s), var(--wk-bad-s)), var(--wk-card-flat); color: var(--wk-bad-ink); border-color: var(--wk-bad-d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .mole-target.is-correct .mole-card { background: linear-gradient(var(--wk-good-s), var(--wk-good-s)), var(--wk-card-flat); color: var(--wk-good-ink); border-color: var(--wk-good-d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .mole-target.is-wrong .mole-card { background: linear-gradient(var(--wk-bad-s), var(--wk-bad-s)), var(--wk-card-flat); color: var(--wk-bad-ink); border-color: var(--wk-bad-d); }
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice.is-selected, .crossword-clue.is-active) { background: linear-gradient(var(--wk-c2s), var(--wk-c2s)), var(--wk-card-flat); color: var(--wk-flat-ink); border-color: var(--wk-c2d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .quiz-choice.is-dim { opacity: .5; }
#activityPlayer[data-world-kit][data-phase] #gameStage .wordsearch-check { color: var(--wk-good-d); }

/* ---------- Small round and square buttons inside games ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-skip, .quiz-next, .quiz-audio, .rank-row button, .puzzle-audio, .arcade-listen, .maze-controls button, .flight-controls button, .gspeak, .sort-audio, .answer-audio, .diagram-label-audio, #agPrev, #agSkip) {
  background: var(--wk-ghost); color: var(--wk-ghost-ink); border: 2px solid var(--wk-line); box-shadow: 0 3px 0 var(--wk-drop); text-shadow: var(--wk-ghost-shadow, none); font-family: var(--wk-display);
}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-audio, .rank-row button, .puzzle-audio, .arcade-listen, .gspeak, .sort-audio, .answer-audio, .diagram-label-audio) svg { fill: currentColor; color: inherit; }
#activityPlayer[data-world-kit][data-phase] #gameStage .rank-row button { border-width: 1.5px; box-shadow: 0 2px 0 var(--wk-drop); }
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.rank-label, .quiz-letter, .mole-key, .maze-answer-number, .memory-back small, .crossword-number) { background: var(--wk-c1); color: #fff; border: 0; text-shadow: 0 1px 0 var(--wk-c1d); font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-number { background: none; color: var(--wk-c1d); text-shadow: none; }

/* ---------- What's inside? (openbox) ---------- */

/* ---------- Wheel ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-frame { background: var(--wk-card-flat); box-shadow: 0 0 0 .5cqw var(--wk-line), 0 0 0 1.1cqw var(--wk-rim, rgba(255, 255, 255, .7)), 0 1.2cqw 0 .9cqw var(--wk-drop), 0 2cqw 3cqw rgba(0, 0, 0, .25); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-hub { background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--wk-c2) 19% 100%); border-color: var(--wk-line); color: var(--wk-ink); box-shadow: 0 .3cqw 0 var(--wk-drop); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-pointer { background: var(--wk-line); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-pointer::after { background: var(--wk-c1); }

/* ---------- Picture reveal: the picture waits under bubble wrap in the world's colours ---------- */
/* The wrap is drawn by js/games/imagequiz.js in the inks css/imagequiz.css takes from these tokens. */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=imagequiz] .pic { background: var(--wk-card-flat); border: var(--wk-panel-border); border-radius: var(--wk-radius-sm); box-shadow: var(--wk-panel-shadow); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=imagequiz] .opt .k { color: var(--wk-c1d); font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=imagequiz] #iqText { color: var(--wk-on-scene); text-shadow: var(--wk-on-scene-shadow); font-family: var(--wk-display); }

/* ---------- Category sort and speed sort ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-card-picture img { max-width:100%; max-height:100%; }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-card.has-picture:not(:has(.sort-caption:not(:empty))) {
  padding:0; border:0; background:none; box-shadow:none;
  width:100%; max-width:var(--sort-card-width);
  height:var(--sort-card-width) !important; min-height:0 !important;
}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.sort-deck,.pile):has(.sort-card.has-picture) { gap:max(8px,.7cqw); }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-card.has-picture:not(:has(.sort-caption:not(:empty))) .sort-card-picture {
  flex:1; height:100%; min-height:0; background:none;
}
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-card.has-picture .sort-caption:empty { display:none; }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-col { --wk-c: var(--wk-c1); --wk-cd: var(--wk-c1d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-col:nth-child(4n+2) { --wk-c: var(--wk-c3); --wk-cd: var(--wk-c3d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-col:nth-child(4n+3) { --wk-c: var(--wk-c2); --wk-cd: var(--wk-c2d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-col:nth-child(4n+4) { --wk-c: var(--wk-c4); --wk-cd: var(--wk-c4d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-heading { background: linear-gradient(180deg, var(--wk-c), var(--wk-cd)); color: #fff; border-radius: calc(var(--wk-radius) - 6px) calc(var(--wk-radius) - 6px) 0 0; text-shadow: 0 2px 0 var(--wk-cd); font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-heading :is(h4, span, b) { color: #fff; text-shadow: 0 2px 0 var(--wk-cd); }
/* The live scene is the backdrop; the game's own painted stage would hide it. */

/* ---------- Crossword and word search ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.crossword-grid, .wordsearch-grid) { font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage .puzzle-scroll { background: var(--wk-grid-board); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-block { background: var(--wk-grid-block); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-cell { background: var(--wk-grid); border-color: var(--wk-grid-line); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-cell input { color: var(--wk-grid-ink); font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-cell.is-active { background: var(--wk-c2s); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-cell.is-correct { background: var(--wk-good-s); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-cell.is-wrong { background: var(--wk-bad-s); }
#activityPlayer[data-world-kit][data-phase] #gameStage .crossword-cell:focus-within { outline-color: var(--wk-c1); }
#activityPlayer[data-world-kit][data-phase] #gameStage .wordsearch-cell { color: var(--wk-grid-ink); font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage .wordsearch-cell:hover { background: var(--wk-c3s); }
#activityPlayer[data-world-kit][data-phase] #gameStage .wordsearch-cell.is-selected { background: var(--wk-c2); color: #fff; }
#activityPlayer[data-world-kit][data-phase] #gameStage .wordsearch-cell.is-found { background: var(--wk-good-s); color: var(--wk-good-ink); }

/* ---------- Maze run, airplane and pop-up targets ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage .maze-board { background: var(--wk-maze-wall-d); border: 4px solid var(--wk-line); border-radius: var(--wk-radius-sm); box-shadow: 0 6px 0 var(--wk-drop); }
#activityPlayer[data-world-kit][data-phase] #gameStage .maze-cell { background: var(--wk-maze-path); }
#activityPlayer[data-world-kit][data-phase] #gameStage .maze-cell.is-wall { background: linear-gradient(135deg, var(--wk-maze-wall), var(--wk-maze-wall-d)); box-shadow: inset 1px 2px rgba(255, 255, 255, .3), inset -1px -2px rgba(0, 0, 0, .25); }
#activityPlayer[data-world-kit][data-phase] #gameStage .maze-answer { border-radius: 10px; }
#activityPlayer[data-world-kit][data-phase] #gameStage .maze-answer.is-closed { opacity: .45; }
#activityPlayer[data-world-kit][data-phase] #gameStage .flight-sky { background: var(--wk-flight-sky); border: 4px solid var(--wk-line); border-radius: var(--wk-radius); box-shadow: 0 6px 0 var(--wk-drop); }
#activityPlayer[data-world-kit][data-phase] #gameStage .flight-horizon { background: var(--wk-flight-ground); box-shadow: 70px -20px 0 var(--wk-flight-ground), -90px -18px 0 var(--wk-flight-ground); opacity: .45; }
#activityPlayer[data-world-kit][data-phase] #gameStage .answer-cloud { border-radius: 35% 40% 30% 33% / 50%; }
#activityPlayer[data-world-kit][data-phase] #gameStage .mole-garden { background: var(--wk-mole-garden); }
#activityPlayer[data-world-kit][data-phase] #gameStage .mole-ground { background: var(--wk-mole-hole); box-shadow: inset 0 5px 0 rgba(0, 0, 0, .35), 0 4px 0 rgba(255, 255, 255, .35); }

/* ---------- Picture labels ---------- */
#activityPlayer.activity-player.game-shell[data-world-kit][data-game=labelleddiagram] { background-color: transparent; color: var(--wk-ink); }
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-board { border: var(--wk-panel-border); border-radius: var(--wk-radius-sm); box-shadow: var(--wk-panel-shadow); background: var(--wk-card-flat); overflow: hidden; }
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-target { background: var(--wk-c1); color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--wk-c1d), 0 4px 0 3px var(--wk-c1d); font-family: var(--wk-display); font-weight: 800; }
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-target span { color: inherit; }
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-target.is-filled { background: var(--wk-c3); box-shadow: 0 0 0 3px var(--wk-c3d), 0 4px 0 3px var(--wk-c3d); }
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-target.is-correct { background: var(--wk-good); box-shadow: 0 0 0 3px var(--wk-good-d), 0 4px 0 3px var(--wk-good-d); color: #fff; }
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-target.is-wrong { background: var(--wk-bad); box-shadow: 0 0 0 3px var(--wk-bad-d), 0 4px 0 3px var(--wk-bad-d); color: #fff; }

/* ---------- Flashcards and matching pairs ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage .memory-back { background: var(--style-card-back) center / 100% 100% no-repeat; border: 0; box-shadow: 0 5px 0 var(--wk-drop), 0 8px 14px rgba(0, 0, 0, .2); border-radius: var(--wk-radius-sm); }
#activityPlayer[data-world-kit][data-phase] #gameStage .memory-back > span { color: #fff; text-shadow: 0 3px 0 var(--wk-drop); font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage .memory-match-mark { background: var(--wk-good); }

/* ---------- Anagram ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.ag-clue, .ag-hint) { color: var(--wk-on-scene); text-shadow: var(--wk-on-scene-shadow); font-family: var(--wk-display); }
#activityPlayer[data-world-kit][data-phase] #gameStage .ag-voice { background: var(--wk-ghost); color: var(--wk-ghost-ink); border: 2px solid var(--wk-line); box-shadow: 0 3px 0 var(--wk-drop); }

/* Source: css/themekit-skins.css; sha256: 081189fbc9d20887604caa869c081f6cc40ab16c9f7285fd50585b3043ceabf5 */
/* Each learning world's own game pieces, so a game looks made for its world and not only placed
   in front of it: the wheel's centre and pointer (its colours and rim are painted by
   js/games/wheel.js), the word search and jigsaw boards and flash cards. The pictures are set with the world by js/themekit/skins.js. Letter tracing and Monster
   escape keep their own scenes (they offer no world choice).
   Original ClassPlay design. */

/* ---------- Board and frame colours per world (word search, jigsaw) ---------- */
#activityPlayer.activity-player[data-world-kit] { --sk-board: var(--wk-grid-board); --sk-board-ink: var(--wk-grid-ink); --sk-board-line: rgba(0, 0, 0, .28); --sk-frame: var(--wk-c3); --sk-frame-d: var(--wk-c3d); --sk-board-art: none; }
#activityPlayer.activity-player[data-world-kit=quiz-show-studio] { --sk-board: #2c1773; --sk-board-ink: #ffe36a; --sk-board-line: rgba(255, 227, 106, .6); --sk-frame: #ffd84a; --sk-frame-d: #c8901a; --sk-board-art: radial-gradient(circle at 50% 0, rgba(255, 79, 163, .35), transparent 60%); }
#activityPlayer.activity-player[data-world-kit=chalkboard-classroom] { --sk-board: #2f5d4a; --sk-board-ink: #fffdf4; --sk-board-line: rgba(255, 253, 244, .6); --sk-frame: #b07a40; --sk-frame-d: #6e4416; --sk-board-art: radial-gradient(60% 40% at 30% 30%, rgba(255, 255, 255, .08), transparent 70%), radial-gradient(50% 35% at 75% 70%, rgba(255, 255, 255, .06), transparent 70%); }
#activityPlayer.activity-player[data-world-kit=ocean-adventure] { --sk-board: #e6f7fc; --sk-board-ink: #0d4f7a; --sk-board-line: rgba(13, 79, 122, .45); --sk-frame: #1fa6d6; --sk-frame-d: #0d4f7a; --sk-board-art: repeating-radial-gradient(circle at 100% 100%, transparent 0 18px, rgba(31, 166, 214, .07) 18px 22px); }
#activityPlayer.activity-player[data-world-kit=space-adventure] { --sk-board: #1d2140; --sk-board-ink: #bff8ff; --sk-board-line: rgba(95, 242, 255, .6); --sk-frame: #5ff2ff; --sk-frame-d: #2b2f7a; --sk-board-art: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 80%, #fff, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 65%, #bff8ff, transparent); }
#activityPlayer.activity-player[data-world-kit=dinosaur-valley] { --sk-board: #e9e1cc; --sk-board-ink: #4a4030; --sk-board-line: rgba(74, 64, 48, .45); --sk-frame: #a89e8a; --sk-frame-d: #6e685c; --sk-board-art: radial-gradient(4px 3px at 18% 22%, rgba(110, 104, 92, .25), transparent), radial-gradient(5px 4px at 76% 64%, rgba(110, 104, 92, .22), transparent), radial-gradient(3px 3px at 44% 86%, rgba(110, 104, 92, .25), transparent); }
#activityPlayer.activity-player[data-world-kit=lunar-new-year] { --sk-board: #b8141f; --sk-board-ink: #ffe08a; --sk-board-line: rgba(255, 224, 138, .6); --sk-frame: #f6b72b; --sk-frame-d: #a8700a; --sk-board-art: radial-gradient(circle at 50% 50%, rgba(255, 216, 106, .14), transparent 65%); }
#activityPlayer.activity-player[data-world-kit=safari-savanna] { --sk-board: #f6e3b4; --sk-board-ink: #3b2414; --sk-board-line: rgba(59, 36, 20, .45); --sk-frame: #c98a3e; --sk-frame-d: #8a5a2b; --sk-board-art: repeating-linear-gradient(0deg, transparent 0 22px, rgba(138, 90, 43, .08) 22px 24px); }
#activityPlayer.activity-player[data-world-kit=polar-expedition] { --sk-board: #e8f6ff; --sk-board-ink: #1f4f86; --sk-board-line: rgba(31, 79, 134, .45); --sk-frame: #8ad0f0; --sk-frame-d: #1f6fa0; --sk-board-art: linear-gradient(135deg, rgba(255, 255, 255, .7) 0 18%, transparent 18% 100%); }
#activityPlayer.activity-player[data-world-kit=farm-friends] { --sk-board: #fff3d0; --sk-board-ink: #3b2414; --sk-board-line: rgba(59, 36, 20, .4); --sk-frame: #c8352a; --sk-frame-d: #7a1f18; --sk-board-art: repeating-linear-gradient(90deg, transparent 0 30px, rgba(176, 122, 64, .07) 30px 32px); }
#activityPlayer.activity-player[data-world-kit=pirate-island] { --sk-board: #f2dcae; --sk-board-ink: #4a2a0e; --sk-board-line: rgba(74, 42, 14, .45); --sk-frame: #8b5a2b; --sk-frame-d: #5a3a1a; --sk-board-art: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(138, 90, 43, .25)); }
#activityPlayer.activity-player[data-world-kit=fairytale-castle] { --sk-board: #fff0fa; --sk-board-ink: #6a4fc4; --sk-board-line: rgba(106, 79, 196, .45); --sk-frame: #ffd27a; --sk-frame-d: #c8901a; --sk-board-art: radial-gradient(circle at 12% 12%, rgba(255, 95, 168, .12), transparent 30%), radial-gradient(circle at 88% 88%, rgba(176, 124, 255, .14), transparent 30%); }
#activityPlayer.activity-player[data-world-kit=superhero-city] { --sk-board: #fffbe0; --sk-board-ink: #24305e; --sk-board-line: rgba(36, 48, 94, .5); --sk-frame: #ff4f4f; --sk-frame-d: #24305e; --sk-board-art: radial-gradient(circle, rgba(47, 123, 234, .13) 1.6px, transparent 1.8px) 0 0 / 10px 10px; }
#activityPlayer.activity-player[data-world-kit=halloween-night] { --sk-board: #2a1a4a; --sk-board-ink: #ffb020; --sk-board-line: rgba(255, 176, 32, .55); --sk-frame: #ff8a2b; --sk-frame-d: #7a2a00; --sk-board-art: radial-gradient(circle at 85% 15%, rgba(255, 224, 138, .16), transparent 28%); }
#activityPlayer.activity-player[data-world-kit=sports-day] { --sk-board: #2fae6a; --sk-board-ink: #ffffff; --sk-board-line: rgba(255, 255, 255, .7); --sk-frame: #ffffff; --sk-frame-d: #1f2a44; --sk-board-art: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 40px, transparent 40px 80px); }
#activityPlayer.activity-player[data-world-kit=construction-site] { --sk-board: #1f5fa8; --sk-board-ink: #ffffff; --sk-board-line: rgba(255, 255, 255, .6); --sk-frame: #ffc21a; --sk-frame-d: #1e2a3a; --sk-board-art: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 18px 18px; }

/* ---------- Wheel: the world's centre button and pointer ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-frame { background: transparent; box-shadow: 0 1.3cqw 2.4cqw rgba(0, 0, 0, .3); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-hub { width: 8.6cqw; height: 8.6cqw; border: 0; border-radius: 50%; background: var(--wk-wheel-hub-art) center / 100% 100% no-repeat; box-shadow: 0 .35cqw .7cqw rgba(0, 0, 0, .32); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-hub:hover { filter: brightness(1.06); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-pointer { left: -6.6cqw; width: 8.4cqw; height: 5cqw; background: var(--wk-wheel-pointer-art) center / contain no-repeat; clip-path: none; filter: drop-shadow(0 .3cqw .25cqw rgba(0, 0, 0, .35)); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-pointer::after { display: none; }

/* ---------- What's inside? (openbox): each world's own boxes ---------- */
/* Dinosaur eggs */
/* Lunar New Year red envelopes */
/* Pirate treasure chests */
/* Safari wooden crates */
/* Polar ice blocks */
/* Farm barn doors */
/* Halloween pumpkins */
/* Superhero comic panels */
/* Construction crates */

/* ---------- Word search: the world's own puzzle board ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wordsearch] .puzzle-scroll {
  background: var(--sk-board-art), var(--sk-board); border: 0; border-radius: var(--wk-radius-sm);
  box-shadow: 0 0 0 .55cqw var(--sk-frame), 0 0 0 .85cqw var(--sk-frame-d), 0 1cqw 0 .85cqw rgba(0, 0, 0, .18), 0 1.6cqw 2.4cqw rgba(0, 0, 0, .22);
}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wordsearch] .wordsearch-cell:not(.is-selected):not(.is-found) { color: var(--sk-board-ink); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wordsearch] .wordsearch-cell:not(.is-selected):not(.is-found):hover { background: color-mix(in srgb, var(--sk-board-ink) 18%, transparent); }

/* ---------- Jigsaw: a framed board in the world's colours ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=jigsaw] .jp-board {
  background: var(--sk-board-art), var(--sk-board);
  box-shadow: 0 0 0 .55cqw var(--sk-frame), 0 0 0 .85cqw var(--sk-frame-d), 0 1cqw 0 .85cqw rgba(0, 0, 0, .18), 0 1.6cqw 2.4cqw rgba(0, 0, 0, .24);
}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=jigsaw] .jp-target { color: var(--sk-board-line); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=jigsaw] .jp-target:not(.is-filled):not(.is-drop-target):not(.is-hint):not(.is-wrong) .jp-cut-outline { fill: transparent; stroke: var(--sk-board-line); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=jigsaw] .jp-tray-area { background: var(--wk-panel); border: var(--wk-panel-border); border-radius: var(--wk-radius); box-shadow: var(--wk-panel-shadow); color: var(--wk-ink); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=jigsaw] .jp-tray-heading { color: var(--wk-ink); font-family: var(--wk-display); }


/* Source: css/themekit-pieces.css; sha256: bea68e2e584425d2d1de38ded65024fc0d59aa0d8c923c0147627fdfdfc17a87 */
/* Each learning world's own answer cards, pieces, number badges, diagram pins, group headings
   and speed-sort bins: their shape (corners), decoration and finish follow the world, while each
   game keeps its own layout and its right/wrong colours. Generated by tools/gen-world-pieces.py;
   every drawing is original ClassPlay artwork made in CSS.
   Firefox and older Safari, which do not know corner-shape, show the same pieces with rounded corners. */

#activityPlayer.activity-player[data-world-kit] { --pc-none: linear-gradient(transparent, transparent); --pc-ring-card: 0 0 0 0 transparent; --pc-ring-tile: 0 0 0 0 transparent; }
#activityPlayer.activity-player[data-world-kit=quiz-show-studio] {
  --pc-shape: round;
  --pc-card-r: 16px;
  --pc-tile-r: 18px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: radial-gradient(circle, #ffc21a 0 2.6px, transparent 3.6px) 6px 3px / 15px 9px repeat-x, radial-gradient(circle, #ffc21a 0 2.6px, transparent 3.6px) 6px calc(100% - 3px) / 15px 9px repeat-x;
  --pc-card: radial-gradient(circle, #fff3b0 0 2.4px, rgba(255, 243, 176, .35) 3.2px, transparent 4px) 6px 4px / 15px 9px repeat-x, radial-gradient(circle, #fff3b0 0 2.4px, rgba(255, 243, 176, .35) 3.2px, transparent 4px) 6px calc(100% - 4px) / 15px 9px repeat-x, radial-gradient(circle, #fff3b0 0 2.4px, rgba(255, 243, 176, .35) 3.2px, transparent 4px) 4px 6px / 9px 15px repeat-y, radial-gradient(circle, #fff3b0 0 2.4px, rgba(255, 243, 176, .35) 3.2px, transparent 4px) calc(100% - 4px) 6px / 9px 15px repeat-y;
  --pc-card-bg: linear-gradient(180deg, #7a3fe0, #4b1fa8);
  --pc-card-ink: #ffffff;
  --pc-card-line: 3px solid #ffd23f;
  --pc-tile: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%) 50% 3px / calc(100% - 14px) 45% no-repeat, radial-gradient(circle, rgba(255, 246, 200, .9) 0 2px, transparent 2.8px) 10px 50% / 6px 6px no-repeat, radial-gradient(circle, rgba(255, 246, 200, .9) 0 2px, transparent 2.8px) calc(100% - 10px) 50% / 6px 6px no-repeat;
  --pc-pin: radial-gradient(circle at 36% 30%, #fffbd6 0 20%, #ffd23f 45%, #e8a21a 100%);
  --pc-pin-ink: #5a2a00;
  --pc-pin-line: 3px solid #ffffff;
  --pc-pin-ring: #c8901a;
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: radial-gradient(circle, #fff3b0 0 2.4px, transparent 3.4px) 6px calc(100% - 4px) / 14px 9px repeat-x;
}
#activityPlayer.activity-player[data-world-kit=chalkboard-classroom] {
  --pc-shape: round;
  --pc-card-r: 5px;
  --pc-tile-r: 7px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: linear-gradient(rgba(255, 228, 140, .85), rgba(255, 228, 140, .85)) 50% 0 / 34% 8px no-repeat, linear-gradient(#ff8a8a, #ff8a8a) 0 11px / 100% 2px no-repeat;
  --pc-card: repeating-linear-gradient(90deg, rgba(255, 253, 244, .55) 0 6px, transparent 6px calc(6px + 5px)) 5px 5px / calc(100% - 2 * 5px) 2px no-repeat, repeating-linear-gradient(90deg, rgba(255, 253, 244, .55) 0 6px, transparent 6px calc(6px + 5px)) 5px calc(100% - 5px) / calc(100% - 2 * 5px) 2px no-repeat, repeating-linear-gradient(180deg, rgba(255, 253, 244, .55) 0 6px, transparent 6px calc(6px + 5px)) 5px 5px / 2px calc(100% - 2 * 5px) no-repeat, repeating-linear-gradient(180deg, rgba(255, 253, 244, .55) 0 6px, transparent 6px calc(6px + 5px)) calc(100% - 5px) 5px / 2px calc(100% - 2 * 5px) no-repeat;
  --pc-card-bg: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(180deg, #3a7a5b, #2b5f45);
  --pc-card-ink: #fffdf4;
  --pc-card-line: 4px solid #b07a40;
  --pc-tile: repeating-linear-gradient(90deg, rgba(255, 253, 244, .6) 0 6px, transparent 6px calc(6px + 5px)) 5px 5px / calc(100% - 2 * 5px) 2px no-repeat, repeating-linear-gradient(90deg, rgba(255, 253, 244, .6) 0 6px, transparent 6px calc(6px + 5px)) 5px calc(100% - 5px) / calc(100% - 2 * 5px) 2px no-repeat, repeating-linear-gradient(180deg, rgba(255, 253, 244, .6) 0 6px, transparent 6px calc(6px + 5px)) 5px 5px / 2px calc(100% - 2 * 5px) no-repeat, repeating-linear-gradient(180deg, rgba(255, 253, 244, .6) 0 6px, transparent 6px calc(6px + 5px)) calc(100% - 5px) 5px / 2px calc(100% - 2 * 5px) no-repeat;
  --pc-pin: linear-gradient(#2f5d4a, #2f5d4a);
  --pc-pin-ink: #fffdf4;
  --pc-pin-line: 3px dashed #fffdf4;
  --pc-pin-ring: #8a5a2b;
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 9px, transparent 9px 14px) 12% calc(100% - 5px) / 76% 3px no-repeat;
}
#activityPlayer.activity-player[data-world-kit=ocean-adventure] {
  --pc-shape: round;
  --pc-card-r: 28px;
  --pc-tile-r: 26px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: radial-gradient(circle at 50% 0, transparent 0 5px, rgba(31, 166, 214, .4) 5.5px 7px, transparent 7.5px) 0 calc(100% - 2px) / 14px 8px repeat-x;
  --pc-card: radial-gradient(circle, transparent 0 3px, rgba(255, 255, 255, .9) 3.5px 4.6px, transparent 5.1px) calc(100% - 10px) 7px / 12px 12px no-repeat, radial-gradient(circle, transparent 0 2px, rgba(255, 255, 255, .85) 2.4px 3.3px, transparent 3.8px) calc(100% - 23px) 15px / 9px 9px no-repeat, radial-gradient(circle, transparent 0 1.6px, rgba(255, 255, 255, .8) 2px 2.7px, transparent 3.1px) calc(100% - 13px) 22px / 7px 7px no-repeat;
  --pc-card-bg: radial-gradient(130% 120% at 25% 15%, #effdff 0 30%, #a8e9f7 70%, #62cbe9 100%);
  --pc-card-ink: #063552;
  --pc-card-line: 3px solid #ffffff;
  --pc-tile: radial-gradient(60% 55% at 28% 22%, rgba(255, 255, 255, .65), transparent 70%), radial-gradient(circle, transparent 0 2.5px, rgba(255, 255, 255, .8) 3px 3.9px, transparent 4.4px) calc(100% - 12px) 6px / 10px 10px no-repeat;
  --pc-pin: radial-gradient(circle at 34% 28%, #ffffff 0 16%, #9fe6f6 42%, #1fa6d6 100%);
  --pc-pin-ink: #063552;
  --pc-pin-line: 2px solid rgba(255, 255, 255, .95);
  --pc-pin-ring: rgba(13, 79, 122, .55);
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: radial-gradient(circle at 50% 0, transparent 0 5px, rgba(255, 255, 255, .55) 5.5px 7px, transparent 7.5px) 0 calc(100% - 1px) / 14px 8px repeat-x;
  --pc-photo-line: 3px solid #1fa6d6;
}
#activityPlayer.activity-player[data-world-kit=space-adventure] {
  --pc-shape: bevel;
  --pc-card-r: 12px;
  --pc-tile-r: 10px;
  --pc-badge-r: 30%;
  --pc-badge-shape: bevel;
  --pc-edge: linear-gradient(#5ff2ff, #5ff2ff) 6px 6px / 12px 2px no-repeat, linear-gradient(#5ff2ff, #5ff2ff) 6px 6px / 2px 12px no-repeat, linear-gradient(#5ff2ff, #5ff2ff) calc(100% - 6px) calc(100% - 6px) / 12px 2px no-repeat, linear-gradient(#5ff2ff, #5ff2ff) calc(100% - 6px) calc(100% - 6px) / 2px 12px no-repeat, radial-gradient(circle, #ff5fd2 0 2.4px, transparent 2.9px) calc(100% - 8px) 8px / 7px 7px no-repeat;
  --pc-card: linear-gradient(#5ff2ff, #5ff2ff) 6px 6px / 12px 2px no-repeat, linear-gradient(#5ff2ff, #5ff2ff) 6px 6px / 2px 12px no-repeat, linear-gradient(#5ff2ff, #5ff2ff) calc(100% - 6px) calc(100% - 6px) / 12px 2px no-repeat, linear-gradient(#5ff2ff, #5ff2ff) calc(100% - 6px) calc(100% - 6px) / 2px 12px no-repeat, radial-gradient(circle, #ff5fd2 0 2.4px, transparent 2.9px) calc(100% - 8px) 8px / 7px 7px no-repeat, linear-gradient(transparent, transparent);
  --pc-card-bg: var(--wk-card);
  --pc-card-ink: var(--wk-card-ink);
  --pc-card-line: var(--wk-card-line);
  --pc-tile: linear-gradient(rgba(191, 248, 255, .85), rgba(191, 248, 255, .85)) 5px 5px / 9px 2px no-repeat, linear-gradient(rgba(191, 248, 255, .85), rgba(191, 248, 255, .85)) 5px 5px / 2px 9px no-repeat, linear-gradient(rgba(191, 248, 255, .85), rgba(191, 248, 255, .85)) calc(100% - 5px) calc(100% - 5px) / 9px 2px no-repeat, linear-gradient(rgba(191, 248, 255, .85), rgba(191, 248, 255, .85)) calc(100% - 5px) calc(100% - 5px) / 2px 9px no-repeat, radial-gradient(circle, #ffd34a 0 2px, transparent 2.5px) calc(100% - 7px) 7px / 6px 6px no-repeat;
  --pc-pin: linear-gradient(180deg, #2c3e9e, #141c5a);
  --pc-pin-ink: #bff8ff;
  --pc-pin-line: 2px solid #5ff2ff;
  --pc-pin-ring: rgba(95, 242, 255, .45);
  --pc-pin-r: 30%;
  --pc-pin-shape: bevel;
  --pc-head: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) 5px 5px / 10px 2px no-repeat, linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) 5px 5px / 2px 10px no-repeat, linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) calc(100% - 5px) calc(100% - 5px) / 10px 2px no-repeat, linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) calc(100% - 5px) calc(100% - 5px) / 2px 10px no-repeat;
}
#activityPlayer.activity-player[data-world-kit=dinosaur-valley] {
  --pc-shape: round;
  --pc-card-r: 16px 9px 18px 11px / 11px 17px 9px 15px;
  --pc-tile-r: 12px 7px 14px 8px / 8px 13px 7px 12px;
  --pc-badge-r: 50% 50% 46% 46% / 58% 58% 42% 42%;
  --pc-badge-shape: round;
  --pc-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M2%2018C3%208%209%203%2018%202c-1%209-6%2015-16%2016Z%22%20fill%3D%22%236aa84f%22%20fill-opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M2%2018%2014%206%22%20stroke%3D%22%233f6e2a%22%20stroke-opacity%3D%22.5%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") calc(100% - 5px) calc(100% - 4px) / 16px 16px no-repeat;
  --pc-card: radial-gradient(circle, rgba(110, 82, 50, .26) 0 1.6px, transparent 2.0px) 3px 4px / 23px 19px, radial-gradient(circle, rgba(110, 82, 50, .16) 0 1.2px, transparent 1.6px) 13px 11px / 29px 23px, linear-gradient(118deg, transparent 0 46%, rgba(110, 82, 50, .3) 46% 50%, transparent 50%) calc(100% - 8px) 6px / 18px 14px no-repeat;
  --pc-card-bg: linear-gradient(180deg, #dcd3bf, #bcae92);
  --pc-card-ink: #3f3422;
  --pc-card-line: 3px solid #6e685c;
  --pc-tile: radial-gradient(circle, rgba(255, 238, 196, .32) 0 1.5px, transparent 1.9px) 4px 3px / 17px 14px, radial-gradient(circle, rgba(60, 36, 16, .25) 0 1.3px, transparent 1.7000000000000002px) 11px 9px / 21px 17px;
  --pc-pin: radial-gradient(circle at 40% 30%, #fffdf4 0 22%, #efe3c4 62%, #d9c79c 100%);
  --pc-pin-ink: #5a3a1a;
  --pc-pin-line: 3px solid #6b5640;
  --pc-pin-ring: rgba(107, 86, 64, .5);
  --pc-pin-r: 50% 50% 46% 46% / 58% 58% 42% 42%;
  --pc-pin-shape: round;
  --pc-head: radial-gradient(circle, rgba(255, 255, 255, .28) 0 1.6px, transparent 2.0px) 4px 4px / 19px 15px;
}
#activityPlayer.activity-player[data-world-kit=lunar-new-year] {
  --pc-shape: scoop;
  --pc-card-r: 12px;
  --pc-tile-r: 12px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: radial-gradient(circle, #f6b72b 0 2.6px, transparent 3.1px) 6px 6px / 7px 7px no-repeat, radial-gradient(circle, #f6b72b 0 2.6px, transparent 3.1px) calc(100% - 6px) 6px / 7px 7px no-repeat, radial-gradient(circle, #f6b72b 0 2.6px, transparent 3.1px) 6px calc(100% - 6px) / 7px 7px no-repeat, radial-gradient(circle, #f6b72b 0 2.6px, transparent 3.1px) calc(100% - 6px) calc(100% - 6px) / 7px 7px no-repeat;
  --pc-card: radial-gradient(circle, #ffd86a 0 2.6px, transparent 3.1px) 6px 6px / 7px 7px no-repeat, radial-gradient(circle, #ffd86a 0 2.6px, transparent 3.1px) calc(100% - 6px) 6px / 7px 7px no-repeat, radial-gradient(circle, #ffd86a 0 2.6px, transparent 3.1px) 6px calc(100% - 6px) / 7px 7px no-repeat, radial-gradient(circle, #ffd86a 0 2.6px, transparent 3.1px) calc(100% - 6px) calc(100% - 6px) / 7px 7px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%201v2%22%20stroke%3D%22%23a8700a%22%20stroke-width%3D%221.2%22%2F%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2210%22%20rx%3D%227%22%20ry%3D%226%22%20fill%3D%22%23e8343f%22%2F%3E%3Cpath%20d%3D%22M6%204h8M6%2016h8M10%2016v3%22%20stroke%3D%22%23f6b72b%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") calc(100% - 8px) 50% / 16px 16px no-repeat;
  --pc-card-bg: radial-gradient(120% 90% at 30% 15%, #ff6a5c 0%, #d8202f 55%, #b0141f 100%);
  --pc-card-ink: #fff1c4;
  --pc-card-line: 3px solid #f6b72b;
  --pc-tile: radial-gradient(circle, #ffd86a 0 2.2px, transparent 2.7px) 5px 5px / 6px 6px no-repeat, radial-gradient(circle, #ffd86a 0 2.2px, transparent 2.7px) calc(100% - 5px) 5px / 6px 6px no-repeat, radial-gradient(circle, #ffd86a 0 2.2px, transparent 2.7px) 5px calc(100% - 5px) / 6px 6px no-repeat, radial-gradient(circle, #ffd86a 0 2.2px, transparent 2.7px) calc(100% - 5px) calc(100% - 5px) / 6px 6px no-repeat;
  --pc-pin: radial-gradient(circle at 40% 34%, #fff2b8 0 18%, #f6b72b 52%, #c8901a 100%);
  --pc-pin-ink: #9a1018;
  --pc-pin-line: 3px solid #fff6d6;
  --pc-pin-ring: #a8700a;
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: linear-gradient(#f6b72b, #f6b72b) 0 calc(100% - 3px) / 100% 3px no-repeat, linear-gradient(#ffe9a8, #ffe9a8) 0 calc(100% - 7px) / 100% 1px no-repeat;
  --pc-ring-card: inset 0 0 0 2px #b0141f, inset 0 0 0 3.5px rgba(255, 216, 106, .9);
  --pc-ring-tile: inset 0 0 0 2px rgba(255, 216, 106, .95);
}
#activityPlayer.activity-player[data-world-kit=safari-savanna] {
  --pc-shape: round;
  --pc-card-r: 6px;
  --pc-tile-r: 8px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: repeating-linear-gradient(90deg, #e2683c 0 6px, #1d1d1d 6px 9px, #fffaf0 9px 12px, #2fa7a0 12px 18px, #f2b632 18px 24px) 0 0 / 100% 5px no-repeat;
  --pc-card: repeating-linear-gradient(90deg, #e2683c 0 6px, #1d1d1d 6px 9px, #fffaf0 9px 12px, #2fa7a0 12px 18px, #f2b632 18px 24px) 0 0 / 100% 5px no-repeat, repeating-linear-gradient(180deg, transparent 0 13px, rgba(90, 52, 24, .18) 13px 14px), radial-gradient(circle, #5a3418 0 2.2px, transparent 2.7px) 6px 50% / 6px 6px no-repeat, radial-gradient(circle, #5a3418 0 2.2px, transparent 2.7px) calc(100% - 6px) 50% / 6px 6px no-repeat;
  --pc-card-bg: linear-gradient(180deg, #ecca92, #cf9550);
  --pc-card-ink: #33200f;
  --pc-card-line: 3px solid #6b4a2c;
  --pc-tile: repeating-linear-gradient(180deg, transparent 0 13px, rgba(90, 52, 24, .2) 13px 14px), radial-gradient(circle, #6b4a2c 0 2.2px, transparent 2.7px) 6px 50% / 6px 6px no-repeat, radial-gradient(circle, #6b4a2c 0 2.2px, transparent 2.7px) calc(100% - 6px) 50% / 6px 6px no-repeat;
  --pc-pin: radial-gradient(circle, #fffaf0 0 50%, transparent 52%), conic-gradient(#e2683c 0 25%, #f2b632 0 50%, #2fa7a0 0 75%, #1d1d1d 0);
  --pc-pin-ink: #3b2414;
  --pc-pin-line: 2px solid #3b2414;
  --pc-pin-ring: rgba(59, 36, 20, .45);
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: repeating-linear-gradient(90deg, #e2683c 0 6px, #1d1d1d 6px 9px, #fffaf0 9px 12px, #2fa7a0 12px 18px, #f2b632 18px 24px) 0 calc(100% - 2px) / 100% 5px no-repeat;
}
#activityPlayer.activity-player[data-world-kit=polar-expedition] {
  --pc-shape: squircle;
  --pc-card-r: 16px;
  --pc-tile-r: 14px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: linear-gradient(135deg, rgba(255, 255, 255, .95) 0 16%, transparent 16% 100%) 0 0 / 55% 70% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20stroke%3D%22%237cc4e8%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10%201v18M2.2%205.5l15.6%209M2.2%2014.5l15.6-9%22%2F%3E%3Cpath%20d%3D%22M7.5%202.5%2010%205l2.5-2.5M7.5%2017.5%2010%2015l2.5%202.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") calc(100% - 6px) 6px / 14px 14px no-repeat;
  --pc-card: linear-gradient(135deg, rgba(255, 255, 255, .95) 0 16%, transparent 16% 100%) 0 0 / 55% 70% no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20stroke%3D%22%237cc4e8%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10%201v18M2.2%205.5l15.6%209M2.2%2014.5l15.6-9%22%2F%3E%3Cpath%20d%3D%22M7.5%202.5%2010%205l2.5-2.5M7.5%2017.5%2010%2015l2.5%202.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") calc(100% - 6px) 6px / 14px 14px no-repeat, radial-gradient(circle, rgba(124, 196, 232, .45) 0 1.3px, transparent 1.7000000000000002px) 2px calc(100% - 3px) / 9px 7px repeat-x;
  --pc-card-bg: linear-gradient(180deg, #f4fcff, #bfe6fa);
  --pc-card-ink: #123f6e;
  --pc-card-line: 3px solid #ffffff;
  --pc-tile: linear-gradient(118deg, transparent 0 18%, rgba(255, 255, 255, .85) 18% 25%, transparent 25% 33%, rgba(255, 255, 255, .55) 33% 36%, transparent 36%);
  --pc-pin: radial-gradient(circle at 34% 28%, #ffffff 0 24%, #c8ecfb 60%, #7cc4e8 100%);
  --pc-pin-ink: #1f4f86;
  --pc-pin-line: 3px solid #ffffff;
  --pc-pin-ring: #1f6fa0;
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: linear-gradient(118deg, transparent 0 20%, rgba(255, 255, 255, .55) 20% 28%, transparent 28%);
  --pc-photo-line: 3px solid #7cc4e8;
}
#activityPlayer.activity-player[data-world-kit=farm-friends] {
  --pc-shape: round;
  --pc-card-r: 10px;
  --pc-tile-r: 10px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: conic-gradient(rgba(216, 64, 47, .85) 0 25%, #ffffff 0 50%, rgba(216, 64, 47, .85) 0 75%, #ffffff 0) 0 0 / 8px 8px repeat-x, repeating-linear-gradient(90deg, rgba(216, 64, 47, .6) 0 5px, transparent 5px 9px) 0 11px / 100% 1.5px no-repeat;
  --pc-card: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)) 0 6px / 100% 2px no-repeat, linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)) 0 calc(100% - 6px) / 100% 2px no-repeat, repeating-linear-gradient(90deg, transparent 0 26px, rgba(0, 0, 0, .1) 26px 28px);
  --pc-card-bg: linear-gradient(180deg, #d8402f, #b02a22);
  --pc-card-ink: #ffffff;
  --pc-card-line: 3px solid #ffffff;
  --pc-tile: repeating-linear-gradient(100deg, transparent 0 7px, rgba(176, 122, 64, .2) 7px 8px);
  --pc-pin: radial-gradient(circle, #ffd23f 0 42%, #ffffff 44% 100%);
  --pc-pin-ink: #3b2414;
  --pc-pin-line: 3px solid #4f9a34;
  --pc-pin-ring: rgba(79, 154, 52, .55);
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: conic-gradient(rgba(216, 64, 47, .85) 0 25%, #ffffff 0 50%, rgba(216, 64, 47, .85) 0 75%, #ffffff 0) 0 calc(100% - 1px) / 8px 8px repeat-x;
  --pc-photo-line: 3px solid #b02a22;
}
#activityPlayer.activity-player[data-world-kit=pirate-island] {
  --pc-shape: round;
  --pc-card-r: 10px 16px 9px 14px;
  --pc-tile-r: 7px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: linear-gradient(45deg, transparent 43%, #c0392b 43% 57%, transparent 57%) calc(100% - 7px) 7px / 11px 11px no-repeat, linear-gradient(-45deg, transparent 43%, #c0392b 43% 57%, transparent 57%) calc(100% - 7px) 7px / 11px 11px no-repeat, radial-gradient(120% 100% at 50% 50%, transparent 64%, rgba(138, 90, 43, .3) 100%);
  --pc-card: linear-gradient(45deg, transparent 43%, #c0392b 43% 57%, transparent 57%) calc(100% - 7px) 7px / 11px 11px no-repeat, linear-gradient(-45deg, transparent 43%, #c0392b 43% 57%, transparent 57%) calc(100% - 7px) 7px / 11px 11px no-repeat, radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(120, 72, 30, .32) 100%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236b3f1c%22%20stroke-opacity%3D%22.55%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%224%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M10%206v12M5%2010h10M3%2013c1%204%204%205%207%205s6-1%207-5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6px calc(100% - 5px) / 14px 14px no-repeat;
  --pc-card-bg: linear-gradient(180deg, #f6e4bd, #e9cc94);
  --pc-card-ink: #4a2a0e;
  --pc-card-line: 3px solid #6b3f1c;
  --pc-tile: repeating-linear-gradient(90deg, transparent 0 22px, rgba(90, 52, 24, .24) 22px 24px), radial-gradient(circle, #5a3a1a 0 1.8px, transparent 2.3px) 5px 5px / 6px 6px no-repeat, radial-gradient(circle, #5a3a1a 0 1.8px, transparent 2.3px) calc(100% - 5px) 5px / 6px 6px no-repeat, radial-gradient(circle, #5a3a1a 0 1.8px, transparent 2.3px) 5px calc(100% - 5px) / 6px 6px no-repeat, radial-gradient(circle, #5a3a1a 0 1.8px, transparent 2.3px) calc(100% - 5px) calc(100% - 5px) / 6px 6px no-repeat;
  --pc-pin: radial-gradient(circle at 40% 34%, #fff2b8 0 16%, #e8b04a 52%, #a8700a 100%);
  --pc-pin-ink: #4a2a0e;
  --pc-pin-line: 3px solid #6b3f1c;
  --pc-pin-ring: rgba(42, 22, 6, .55);
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: repeating-linear-gradient(60deg, #d8b06a 0 4px, #8a5a2b 4px 7px) 0 calc(100% - 1px) / 100% 5px no-repeat;
  --pc-tile-bg: linear-gradient(180deg, #a8743f, #7a4f24);
  --pc-tile-ink: #fff3d6;
  --pc-tile-line: 3px solid #4a2a0e;
  --pc-tile-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
#activityPlayer.activity-player[data-world-kit=fairytale-castle] {
  --pc-shape: scoop;
  --pc-card-r: 14px;
  --pc-tile-r: 14px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M5%202h10l4%205-9%2011L1%207Z%22%20fill%3D%22%23ff7ab8%22%20stroke%3D%22%23a8306a%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%207h18M7%202%205%207l5%2011%205-11-2-5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.7%22%20stroke-width%3D%22.8%22%2F%3E%3C%2Fsvg%3E") 50% 3px / 16px 14px no-repeat;
  --pc-card: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M5%202h10l4%205-9%2011L1%207Z%22%20fill%3D%22%23ff7ab8%22%20stroke%3D%22%23a8306a%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%207h18M7%202%205%207l5%2011%205-11-2-5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.7%22%20stroke-width%3D%22.8%22%2F%3E%3C%2Fsvg%3E") 50% 3px / 16px 14px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%200c1%206%204%209%2010%2010-6%201-9%204-10%2010-1-6-4-9-10-10%206-1%209-4%2010-10Z%22%20fill%3D%22%23ffc94a%22%2F%3E%3C%2Fsvg%3E") 7px 7px / 11px 11px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%200c1%206%204%209%2010%2010-6%201-9%204-10%2010-1-6-4-9-10-10%206-1%209-4%2010-10Z%22%20fill%3D%22%23ffc94a%22%2F%3E%3C%2Fsvg%3E") calc(100% - 7px) calc(100% - 7px) / 9px 9px no-repeat;
  --pc-card-bg: linear-gradient(180deg, #ffe8f5, #e8d2ff);
  --pc-card-ink: #4a2a8a;
  --pc-card-line: 3px solid #e8b04a;
  --pc-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%200c1%206%204%209%2010%2010-6%201-9%204-10%2010-1-6-4-9-10-10%206-1%209-4%2010-10Z%22%20fill%3D%22%23ffc94a%22%2F%3E%3C%2Fsvg%3E") calc(100% - 6px) 6px / 9px 9px no-repeat;
  --pc-pin: conic-gradient(from 30deg, #ffb8dc, #d9559c, #ff9fc8, #b03a7c, #ffb8dc);
  --pc-pin-ink: #ffffff;
  --pc-pin-line: 3px solid #ffd27a;
  --pc-pin-ring: #6a4fc4;
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: radial-gradient(circle at 50% 100%, #ffd27a 0 3.5px, transparent 4px) 0 100% / 12px 6px repeat-x;
  --pc-ring-card: inset 0 0 0 2px rgba(255, 210, 122, .95);
  --pc-ring-tile: inset 0 0 0 2px rgba(255, 255, 255, .9), inset 0 0 0 3.5px rgba(176, 124, 255, .45);
}
#activityPlayer.activity-player[data-world-kit=superhero-city] {
  --pc-shape: bevel;
  --pc-card-r: 7px;
  --pc-tile-r: 6px;
  --pc-badge-r: 28%;
  --pc-badge-shape: bevel;
  --pc-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22m10%201%202.6%205.6%206.1.7-4.5%204.2%201.2%206L10%2014.5%204.6%2017.5l1.2-6L1.3%207.3l6.1-.7Z%22%20fill%3D%22%23ffd23f%22%20stroke%3D%22%2324305e%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") calc(100% - 4px) 4px / 15px 15px no-repeat;
  --pc-card: radial-gradient(circle, rgba(255, 79, 79, .22) 0 1.5px, transparent 1.8px) 0 0 / 7px 7px, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22m10%201%202.6%205.6%206.1.7-4.5%204.2%201.2%206L10%2014.5%204.6%2017.5l1.2-6L1.3%207.3l6.1-.7Z%22%20fill%3D%22%23ffd23f%22%20stroke%3D%22%2324305e%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") calc(100% - 4px) 4px / 16px 16px no-repeat;
  --pc-card-bg: linear-gradient(180deg, #fff59a, #ffd84a);
  --pc-card-ink: #1c2550;
  --pc-card-line: 4px solid #24305e;
  --pc-tile: radial-gradient(circle, rgba(255, 79, 79, .24) 0 1.5px, transparent 1.8px) 0 0 / 7px 7px;
  --pc-pin: linear-gradient(#ffd23f, #ffd23f);
  --pc-pin-ink: #24305e;
  --pc-pin-line: 3px solid #24305e;
  --pc-pin-ring: #ff4f4f;
  --pc-pin-r: 28%;
  --pc-pin-shape: bevel;
  --pc-head: radial-gradient(circle, rgba(255, 255, 255, .28) 0 1.5px, transparent 1.8px) 0 0 / 7px 7px, linear-gradient(#24305e, #24305e) 0 100% / 100% 3px no-repeat;
  --pc-ring-card: inset 0 0 0 1px rgba(36, 48, 94, .25);
}
#activityPlayer.activity-player[data-world-kit=halloween-night] {
  --pc-shape: round;
  --pc-card-r: 10px;
  --pc-tile-r: 22px 22px 7px 7px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: radial-gradient(circle at 50% 0, #6a3fb0 0 5px, transparent 5.5px) 0 0 / 22px 9px repeat-x, linear-gradient(#6a3fb0, #6a3fb0) 0 0 / 100% 3px no-repeat;
  --pc-card: radial-gradient(circle at 50% 0, #ff8a2b 0 5px, transparent 5.5px) 0 0 / 22px 9px repeat-x, linear-gradient(#ff8a2b, #ff8a2b) 0 0 / 100% 3px no-repeat;
  --pc-card-bg: linear-gradient(180deg, #4a2a7a, #2a1a4a);
  --pc-card-ink: #fff3e0;
  --pc-card-line: 3px solid #ff8a2b;
  --pc-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2016%22%3E%3Cpath%20d%3D%22M10%207c1-2%202-2%203%200%202-2%204-2%207%200-2%201-3%203-3%205-2-1-4-1-5%201-1-1-1-1-2%200-1-2-3-2-5-1%200-2-1-4-3-5%203-2%205-2%207%200%201-2%202-2%203%200Z%22%20fill%3D%22%236a3fb0%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E") calc(100% - 6px) 5px / 16px 11px no-repeat;
  --pc-pin: radial-gradient(circle, #ff8a2b 0 44%, transparent 46%), conic-gradient(#ff8a2b 0 12.5%, #fffaf0 0 25%, #ff8a2b 0 37.5%, #fffaf0 0 50%, #ff8a2b 0 62.5%, #fffaf0 0 75%, #ff8a2b 0 87.5%, #fffaf0 0);
  --pc-pin-ink: #ffffff;
  --pc-pin-line: 2px solid #7a2a00;
  --pc-pin-ring: #2a1a4a;
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: radial-gradient(circle at 50% 0, rgba(42, 26, 74, .55) 0 4px, transparent 4.5px) 0 calc(100% + 1px) / 18px 8px repeat-x;
  --pc-tile-bg: linear-gradient(180deg, #ffa24a, #ee7616);
  --pc-tile-ink: #2a1a4a;
  --pc-tile-line: 3px solid #7a2a00;
  --pc-tile-shadow: none;
}
#activityPlayer.activity-player[data-world-kit=sports-day] {
  --pc-shape: round;
  --pc-card-r: 12px;
  --pc-tile-r: 12px;
  --pc-badge-r: 50%;
  --pc-badge-shape: round;
  --pc-edge: repeating-linear-gradient(90deg, #ff5a4e 0 14px, #ffffff 14px 28px) 0 calc(100% - 1px) / 100% 5px no-repeat;
  --pc-card: linear-gradient(90deg, rgba(255, 255, 255, .8) 0 4px, transparent 4px 7px, rgba(255, 255, 255, .8) 7px 9px, transparent 9px) 0 0 / 14px 100% no-repeat, linear-gradient(-90deg, rgba(255, 255, 255, .8) 0 4px, transparent 4px 7px, rgba(255, 255, 255, .8) 7px 9px, transparent 9px) 100% 0 / 14px 100% no-repeat, repeating-linear-gradient(90deg, #ff5a4e 0 14px, #ffffff 14px 28px) 0 calc(100% - 1px) / 100% 5px no-repeat;
  --pc-card-bg: linear-gradient(180deg, #2a72e0, #1a56b8);
  --pc-card-ink: #ffffff;
  --pc-card-line: 3px solid #ffffff;
  --pc-tile: linear-gradient(90deg, rgba(255, 255, 255, .8) 0 4px, transparent 4px 7px, rgba(255, 255, 255, .8) 7px 9px, transparent 9px) 0 0 / 14px 100% no-repeat, linear-gradient(-90deg, rgba(255, 255, 255, .8) 0 4px, transparent 4px 7px, rgba(255, 255, 255, .8) 7px 9px, transparent 9px) 100% 0 / 14px 100% no-repeat;
  --pc-pin: radial-gradient(circle at 34% 28%, #ffffff 0 34%, #e3e9f2 100%);
  --pc-pin-ink: #1f2a44;
  --pc-pin-line: 3px solid #1f2a44;
  --pc-pin-ring: #ff5a4e;
  --pc-pin-r: 50%;
  --pc-pin-shape: round;
  --pc-head: repeating-linear-gradient(90deg, #ff5a4e 0 14px, #ffffff 14px 28px) 0 calc(100% - 1px) / 100% 4px no-repeat;
  --pc-photo-line: 3px solid #1a56b8;
  --pc-tile-bg: linear-gradient(180deg, #2a72e0, #1a56b8);
  --pc-tile-ink: #ffffff;
  --pc-tile-line: 3px solid #ffffff;
  --pc-tile-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
#activityPlayer.activity-player[data-world-kit=construction-site] {
  --pc-shape: notch;
  --pc-card-r: 8px;
  --pc-tile-r: 7px;
  --pc-badge-r: 30%;
  --pc-badge-shape: bevel;
  --pc-edge: repeating-linear-gradient(135deg, #1e2a3a 0 6px, #ffc21a 6px 12px) 0 100% / 100% 6px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) 5px 5px / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) calc(100% - 5px) 5px / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) 5px calc(100% - 5px) / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) calc(100% - 5px) calc(100% - 5px) / 7px 7px no-repeat;
  --pc-card: repeating-linear-gradient(135deg, #1e2a3a 0 6px, #ffc21a 6px 12px) 0 100% / 100% 6px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) 5px 5px / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) calc(100% - 5px) 5px / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) 5px calc(100% - 5px) / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) calc(100% - 5px) calc(100% - 5px) / 7px 7px no-repeat, linear-gradient(transparent, transparent);
  --pc-card-bg: repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 6px), linear-gradient(180deg, #ffd84a, #ffc21a);
  --pc-card-ink: #1e2a3a;
  --pc-card-line: 3px solid #1e2a3a;
  --pc-tile: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 6px), radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) 4px 4px / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) calc(100% - 4px) 4px / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) 4px calc(100% - 4px) / 7px 7px no-repeat, radial-gradient(circle at 40% 35%, #f4f7fb 0 1.1px, #8a98a8 1.5px 2.5px, #4a5868 2.6px 2.9px, transparent 3.2px) calc(100% - 4px) calc(100% - 4px) / 7px 7px no-repeat;
  --pc-pin: linear-gradient(#ffc21a, #ffc21a);
  --pc-pin-ink: #1e2a3a;
  --pc-pin-line: 3px solid #1e2a3a;
  --pc-pin-ring: #8a98a8;
  --pc-pin-r: 30%;
  --pc-pin-shape: bevel;
  --pc-head: repeating-linear-gradient(135deg, #1e2a3a 0 6px, #ffc21a 6px 12px) 0 100% / 100% 6px no-repeat;
}

/* ---------- Answer cards a child taps (quiz, image quiz, rank order, find the match) ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .rank-row, .opt, .fm-choice):not(.has-image, :has(img), .is-correct, .correct, .right, .is-solved, .is-found, .is-wrong, .wrong, .bad, .is-mismatch, .is-selected, .selected, .ok, .no, .used),
#activityPlayer[data-world-kit][data-phase] #gameStage .rank-row:has(img):not(.has-image, .is-correct, .correct, .right, .is-solved, .is-found, .is-wrong, .wrong, .bad, .is-mismatch, .is-selected, .selected, .ok, .no, .used) {
  background: var(--pc-card), var(--pc-card-bg); color: var(--pc-card-ink); border: var(--pc-card-line);
  border-radius: var(--pc-card-r); corner-shape: var(--pc-shape); box-shadow: var(--pc-ring-card), var(--wk-card-drop);
}
/* Picture answers keep their light card so the picture reads, inside the world's frame. */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice, .opt, .fm-choice):is(.has-image, :has(img)):not(.is-correct, .correct, .right, .is-solved, .is-found, .is-wrong, .wrong, .bad, .is-mismatch, .is-selected, .selected, .ok, .no, .used) {
  background: var(--pc-edge), var(--wk-card-photo); border: var(--pc-photo-line, var(--pc-card-line)); border-radius: var(--pc-card-r); corner-shape: var(--pc-shape);
}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.sort-card, .diagram-label):has(img):not(.is-correct, .correct, .right, .is-solved, .is-found, .is-wrong, .wrong, .bad, .is-mismatch, .is-selected, .selected, .ok, .no, .used) {
  background: var(--pc-edge), var(--wk-card-photo); border-radius: var(--pc-tile-r); corner-shape: var(--pc-shape);
}
/* ---------- Pieces a child picks up (anagram, group sort, unjumble, complete the sentence, labelled diagram, match up) ---------- */
/* Marking changes the answer's colour, not the border space around its text.
   Keep the same world frame when the default artwork selector stops matching. */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice,.rank-row,.opt,.fm-choice):is(.is-correct,.correct,.right,.is-solved,.is-found,.is-wrong,.wrong,.bad,.is-mismatch,.is-selected,.selected,.ok,.no,.used){border:var(--pc-card-line)}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice,.opt,.fm-choice):has(img):is(.is-correct,.correct,.right,.is-solved,.is-found,.is-wrong,.wrong,.bad,.is-mismatch,.is-selected,.selected,.ok,.no,.used){border:var(--pc-photo-line,var(--pc-card-line))}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice,.rank-row,.opt,.fm-choice):is(.is-correct,.correct,.right,.is-solved,.is-found,.ok){border-color:var(--wk-good-d)}
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-choice,.rank-row,.opt,.fm-choice):is(.is-wrong,.wrong,.bad,.is-mismatch,.no){border-color:var(--wk-bad-d)}
#activityPlayer[data-world-kit][data-phase] #gameStage .quiz-choice.is-selected:not(.is-correct,.is-wrong){border-color:var(--wk-c2d)}

#activityPlayer[data-world-kit][data-phase] #gameStage :is(.ag-tile, .sort-card, .unjumble-word, .sentence-word, .diagram-label):not(.has-image, :has(img), .is-correct, .correct, .right, .is-solved, .is-found, .is-wrong, .wrong, .bad, .is-mismatch, .is-selected, .selected, .ok, .no, .used) {
  background: var(--pc-tile), var(--pc-tile-bg, var(--wk-tile)); color: var(--pc-tile-ink, var(--wk-tile-ink)); border: var(--pc-tile-line, 3px solid var(--wk-tile-line, var(--wk-line)));
  text-shadow: var(--pc-tile-shadow, var(--wk-tile-shadow, none)); border-radius: var(--pc-tile-r); corner-shape: var(--pc-shape);
  box-shadow: var(--pc-ring-tile), 0 4px 0 var(--wk-drop), 0 8px 14px rgba(0, 0, 0, .16);
}
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-answer:not(.has-image, :has(img), .is-correct, .correct, .right, .is-solved, .is-found, .is-wrong, .wrong, .bad, .is-mismatch, .is-selected, .selected, .ok, .no, .used) {
  background: var(--pc-tile), var(--pc-tile-bg, var(--wk-tile)); color: var(--pc-tile-ink, var(--wk-tile-ink)); border: var(--pc-tile-line, 3px solid var(--wk-tile-line, var(--wk-line)));
  text-shadow: var(--pc-tile-shadow, var(--wk-tile-shadow, none)); border-radius: var(--pc-tile-r); corner-shape: var(--pc-shape);
  box-shadow: var(--pc-ring-tile), 0 5px 0 var(--wk-drop), 0 10px 16px rgba(0, 0, 0, .18);
}
/* The slots and spaces take the same corners as the pieces that fill them. */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.ag-slot, .unjumble-slot, .sentence-gap, .sort-empty-slot) { border-radius: var(--pc-tile-r); corner-shape: var(--pc-shape); }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-bay { border-radius: var(--pc-card-r); corner-shape: var(--pc-shape); }
/* ---------- Prompts keep their text clear: only the world's edge decoration ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.quiz-question, .sentence-text) { background: var(--pc-edge), var(--wk-panel); border-radius: var(--pc-card-r); corner-shape: var(--pc-shape); }
#activityPlayer[data-world-kit] #gameStage[data-game=matchup] .matchup-studio-clue:not(:has(img)) { background: var(--pc-edge), var(--wk-panel); border-radius: var(--pc-card-r); corner-shape: var(--pc-shape); }
/* ---------- Number and letter badges ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage :is(.rank-label, .quiz-letter) { border-radius: var(--pc-badge-r); corner-shape: var(--pc-badge-shape); }
/* ---------- Picture labels pins waiting for a label ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-target:not(.is-filled, .is-correct, .is-wrong) {
  background: var(--pc-pin); color: var(--pc-pin-ink); border: var(--pc-pin-line); border-radius: var(--pc-pin-r); corner-shape: var(--pc-pin-shape);
  box-shadow: 0 0 0 3px var(--pc-pin-ring), 0 4px 0 3px var(--pc-pin-ring);
}
#activityPlayer[data-world-kit][data-phase] #gameStage .diagram-target:is(.is-filled, .is-correct, .is-wrong) { border-radius: var(--pc-pin-r); corner-shape: var(--pc-pin-shape); }
/* ---------- Category sort headings (Drop and sort draws each world's own bins: css/speedsort.css) ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage .sort-heading { background: var(--pc-head), linear-gradient(180deg, var(--wk-c), var(--wk-cd)); corner-shape: var(--pc-shape); }
/* ---------- Pop-ups (the wheel's pick, a tic-tac-toe question): the world stays in view,
   dimmed, and the pop-up is one of the world's own panels ---------- */
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-picked,
#activityPlayer[data-world-kit][data-phase] #gameStage .ttt-shell .ttt-challenge { background: color-mix(in srgb, var(--wk-drop) 62%, transparent); border: 0; box-shadow: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-picked > .wheel-result {
  background: var(--pc-edge), var(--wk-panel); color: var(--wk-ink); border: var(--wk-panel-border); border-radius: var(--wk-radius); corner-shape: var(--pc-shape);
  box-shadow: var(--wk-panel-shadow); padding: clamp(14px, 2.4cqw, 32px);
}
#activityPlayer[data-world-kit][data-phase] #gameStage[data-game=wheel] .wheel-picked > .wheel-result { width: min(88%, 1000px); height: auto; max-height: 100%; margin: auto; }

/* Source: css/monsterescape.css; sha256: ea76baf32e95b03156866e26825d24bd69a9b8e4d5526eaf728c79c3d259c0d2 */
/* The game owns its illustrated world; existing lesson themes are untouched. */
#activityPlayer[data-game="monsterescape"]{--me-ink:#174957;--me-accent:#167b9b;--me-sky:#aee4e9;background:var(--me-sky);background-image:none;color:var(--me-ink)}
#activityPlayer[data-game="monsterescape"] #gameStage{padding:0;overflow:hidden;color:var(--me-ink);text-shadow:none;font-family:inherit}
#activityPlayer[data-game="monsterescape"] .hud{background:var(--me-sky)}
#activityPlayer[data-game="monsterescape"] .player-controls{background:var(--me-ink);background-image:none;color:#fffdf7}
#activityPlayer[data-game="monsterescape"] .player-controls button{color:#fffdf7}
#activityPlayer[data-game="monsterescape"] #pauseBtn svg path{stroke:var(--me-ink)}
#activityPlayer[data-game="monsterescape"] #startArtwork{display:block;opacity:1;background:var(--me-sky);background-image:none}
#activityPlayer[data-game="monsterescape"] .me-launch-scene{position:absolute;inset:0 0 39%;overflow:hidden}
#activityPlayer[data-game="monsterescape"] .me-launch-scene.is-3d{inset:0;background:#0e5a72}
.me-launch-scene.is-3d img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 40%}
#activityPlayer[data-game="monsterescape"] #startArtwork:has(.me-launch-scene.is-3d){background:#0e5a72}
#activityPlayer[data-game="monsterescape"] #startArtwork:has(.me-launch-scene.is-3d)+.start-content{background:linear-gradient(transparent 50%,#04121b99 85%)}
#activityPlayer[data-game="monsterescape"] .start-content{justify-content:flex-end;padding:16px 20px 22px;background:linear-gradient(transparent 45%,color-mix(in srgb,var(--me-sky) 60%,#fffdf7) 70%);font-family:inherit}
#activityPlayer[data-game="monsterescape"] .start-card{width:min(560px,calc(100% - 12px));margin:auto auto 0;padding:17px 22px;gap:9px;background:#fffdf7f5;border-color:color-mix(in srgb,var(--me-accent) 26%,white);color:var(--me-ink);backdrop-filter:none}
#activityPlayer[data-game="monsterescape"] .start-card :is(h1,#sSub){color:var(--me-ink);font-family:inherit}
#activityPlayer[data-game="monsterescape"] .start-card .start-template{background:var(--me-accent);color:#fffdf7}
#activityPlayer[data-game="monsterescape"] .start-card .launch-button{background:#fffdf7;color:var(--me-ink);border-color:color-mix(in srgb,var(--me-accent) 35%,white);font-family:inherit}
#activityPlayer[data-game="monsterescape"] .start-card #startBtn{background:var(--me-accent);border-color:var(--me-accent);color:#fffdf7}
#activityPlayer[data-game="monsterescape"] .start-card .launch-button span{color:inherit;filter:none}
#activityPlayer[data-game="monsterescape"] :is(.end-panel,.pause-panel){color:var(--me-ink);font-family:inherit}
#activityPlayer[data-game="monsterescape"] .end-panel>:is(button,a):not(#againBtn):not(#resumeBtn):not(.hidden){background:#fff;color:var(--me-ink);border:1.5px solid color-mix(in srgb,var(--me-accent) 35%,#fff);box-shadow:0 2px 0 color-mix(in srgb,var(--me-accent) 18%,#fff)}
#activityPlayer[data-game="monsterescape"] .end-panel>:is(button,a):not(#againBtn):not(#resumeBtn):hover{background:color-mix(in srgb,var(--me-sky) 28%,#fff);border-color:var(--me-accent)}
#activityPlayer.game-shell[data-game="monsterescape"]:not(:fullscreen){min-height:580px}
.me-opening{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;background:var(--me-sky);font-family:inherit;color:var(--me-ink)}
.me-opening .me-opening-scene{inset:0 0 24%}
.me-opening .me-beast-position{animation:me-intro-arrive .8s cubic-bezier(.17,.8,.25,1) both}
.me-opening .me-explorer-arm{transform-box:fill-box;transform-origin:right bottom;animation:me-wave .6s .6s ease-in-out 2}
.me-opening-letters{position:absolute;inset:auto 0 6%;display:flex;gap:13px;justify-content:center;pointer-events:none}
.me-opening-letters i{display:grid;place-items:center;position:relative;width:clamp(48px,7cqw,83px);height:clamp(52px,7.5cqw,90px);border-radius:15px;border:2px solid color-mix(in srgb,var(--me-accent) 40%,white);border-bottom-width:5px;background:#fffdf7;color:var(--me-ink);font-size:clamp(28px,4.5cqw,53px);font-style:normal;font-weight:800;box-shadow:0 5px 10px #213b4810;animation:me-intro-letter 1.9s ease-out both}
.me-opening-letters i:nth-child(2){animation-delay:.1s}.me-opening-letters i:nth-child(3){animation-delay:.2s}
.me-opening-letters i::after{content:"";position:absolute;bottom:13%;left:25%;right:25%;height:3px;border-radius:3px;background:var(--me-accent)}
.me-opening-skip{position:absolute;z-index:3;top:15px;right:16px;display:flex;align-items:center;gap:5px;min-height:44px;padding:8px 12px;border:1px solid #ffffffa8;border-radius:99px;background:#fffdf7f5;color:var(--me-ink);font:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 3px 12px #20384112}
.me-opening-skip svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.me-opening-skip:focus-visible{outline:3px solid var(--me-accent);outline-offset:3px}
@keyframes me-intro-arrive{from{translate:-110% 0}to{translate:0 0}}@keyframes me-intro-letter{0%{opacity:0;translate:0 28px;rotate:-8deg}28%,72%{opacity:1;translate:0 0;rotate:0deg;color:var(--me-ink)}90%,100%{opacity:1;color:transparent;translate:0 0;rotate:0deg}}
#activityPlayer[data-game="monsterescape"] :is(#pCount,#pLives){display:none}
#activityPlayer[data-game="monsterescape"] .activity-clock{z-index:6;top:12px;left:14px;right:auto;background:#fffffff0;color:#274e60;text-shadow:none;padding:5px 10px;border-radius:99px;font-size:14px}
.me-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,.9fr) minmax(210px,1fr);height:100%;width:100%;min-width:0;min-height:440px;background:#f6f7ef;color:var(--me-ink);isolation:isolate;font-family:inherit;text-shadow:none}
.me-shell *{box-sizing:border-box}.me-shell [hidden]{display:none!important}
.me-adventure{position:relative;min-height:0;overflow:hidden;background:var(--me-sky);border-bottom:3px solid color-mix(in srgb,var(--me-accent) 28%,white)}
.me-scene{position:absolute;inset:0;overflow:hidden}.me-scene-art{display:block;width:100%;height:100%;overflow:hidden}
.me-topline{position:absolute;z-index:2;top:12px;right:16px;left:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.me-round-count{font-size:14px;font-weight:800;background:#fffffff0;color:var(--me-ink);padding:6px 12px;border-radius:99px;line-height:1.3;box-shadow:0 2px 0 #2038410c}
.me-chances{margin-left:auto;display:flex;align-items:center;gap:8px;border-radius:99px;background:#fffffff0;color:var(--me-ink);padding:7px 12px;box-shadow:0 2px 0 #2038410c;min-height:38px}
.me-chances>svg{width:21px;height:21px;fill:#d07c80;stroke:#ad5d69;stroke-width:1.4}.me-chances-number{font-size:19px;line-height:1}.me-chances-dots{display:flex;gap:4px;margin-left:2px}.me-chances-dots i{width:7px;height:7px;border-radius:50%;background:var(--me-accent);transition:background .2s}.me-chances-dots i.is-used{background:#d3dbdf}
.me-beast-position{transition:transform .68s cubic-bezier(.22,.8,.31,1)}.me-beast-shadow{transition:cx .68s ease}.me-beast{transform-box:fill-box;transform-origin:center bottom;animation:me-breathe 3.6s ease-in-out infinite}.me-eyes{transform-box:fill-box;transform-origin:center;animation:me-blink 7s infinite}.me-beast-limb{transform-box:fill-box;transform-origin:top center;animation:me-wiggle 3s ease-in-out infinite}.me-tentacles{transform-box:fill-box;transform-origin:top center;animation:me-wiggle 4s ease-in-out infinite}.me-explorer-body{transform-box:fill-box;transform-origin:center bottom;animation:me-breathe 3.2s ease-in-out infinite}.me-hero-worry{display:none}.me-shell.is-near .me-hero-worry{display:block}.me-shell.is-near .me-hero-smile{display:none}.me-shell.is-wrong-guess .me-explorer-arm{transform-box:fill-box;transform-origin:right bottom;animation:me-wave .5s ease-in-out 2}.me-shell.is-right-guess .me-letter.is-revealed{animation:me-letter-pop .28s ease-out}
.me-water-ribbon{animation:me-water 8s ease-in-out infinite}.me-water-ribbon.second{animation-duration:11s;animation-direction:reverse}.me-scene-float{animation:me-float 7s ease-in-out infinite}.me-stars{animation:me-glimmer 5s ease-in-out infinite}.me-bubbles{animation:me-bubble 7s ease-in-out infinite}.me-snow{animation:me-snow 9s linear infinite}.me-gear{transform-origin:515px 112px;animation:me-gear 28s linear infinite}.me-beacon{animation:me-glimmer 2s infinite}
.me-lesson{display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px clamp(12px,3cqw,40px) 18px;gap:14px;background:linear-gradient(#fffdf7,#f3f6ef);position:relative;z-index:3}
.me-passage{flex:1;min-height:56px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a8bec4 transparent;display:block;text-align:center;align-content:center;font-size:clamp(24px,3.2cqw,43px);line-height:1.75;letter-spacing:0;padding:0 3px;color:var(--me-ink);font-weight:800;outline-offset:3px}
.me-passage[data-length="medium"]{font-size:clamp(22px,2.6cqw,35px)}.me-passage[data-length="long"]{font-size:clamp(20px,2.1cqw,28px);line-height:1.9;text-align:left;align-content:start}
.me-word{display:inline-flex;vertical-align:baseline;white-space:nowrap;max-width:100%;flex-wrap:wrap;justify-content:center;margin:0 0 4px}.me-passage[data-length="long"] .me-word{justify-content:flex-start}
.me-letter{display:inline-grid;place-items:center;min-width:.43em;height:1.45em;vertical-align:baseline;position:relative;line-height:1.25}.me-letter.is-letter{width:.82em;border-bottom:2px solid color-mix(in srgb,var(--me-accent) 62%,white);margin:0 .055em;min-width:0}.me-letter.is-revealed{border-bottom-color:color-mix(in srgb,var(--me-accent) 24%,white)}.me-hidden-letter{color:transparent;user-select:none}.me-letter.is-missed{color:#a76373;border-bottom-color:#d4a2ac}.me-space{display:inline-block;width:.55em;height:1px}
.me-keyboard{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;max-width:720px;width:100%;margin:0 auto;touch-action:manipulation}.me-keyboard-row{display:flex;justify-content:center;gap:7px;width:100%}.me-key{position:relative;flex:0 1 60px;width:60px;min-width:0;min-height:44px;aspect-ratio:1.28;border-radius:11px;border:1.5px solid color-mix(in srgb,var(--me-accent) 33%,white);border-bottom-width:4px;background:#fff;color:var(--me-ink);font:800 clamp(19px,2cqw,28px)/1 "ClassPlay Round",Arial,sans-serif;display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 2px 3px #25444b0a;text-shadow:none;transition:transform .12s,background .15s,border-color .15s}.me-key:hover:not(:disabled){background:#fff5cb;border-color:var(--me-accent);transform:translateY(-2px)}.me-key:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}.me-key:focus-visible,:is(.me-continue,.me-retry-round):focus-visible,.me-passage:focus-visible{outline:3px solid var(--me-accent);outline-offset:3px}.me-key:disabled{cursor:default;box-shadow:none}.me-key.is-correct{color:#286b53;background:#e2efe0;border-color:#a4c7ae;border-bottom-width:2px}.me-key.is-wrong{color:#9a7a82;background:#ece7e5;border-color:#ddd1d0;border-bottom-width:2px}.me-key-mark{position:absolute;right:4px;bottom:3px;font-size:11px;line-height:1;font-family:Arial,sans-serif}.me-key.is-wrong::before{content:"";position:absolute;width:54%;height:1px;background:#b79b9e;transform:rotate(-28deg)}
.me-round-result{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px;background:#fffdf6;box-shadow:0 5px 25px #30445225;border:1.5px solid #fff;border-radius:15px;white-space:nowrap}.me-result-icon{display:grid;place-items:center;background:#dcecd8;color:#387455;border-radius:50%;width:30px;height:30px;font-size:23px}.me-round-result strong{font-size:23px;color:var(--me-ink)}:is(.me-continue,.me-retry-round){border:0;border-radius:9px;background:var(--me-accent);color:#fff;font:800 16px/1.2 "ClassPlay Round",Arial,sans-serif;min-height:44px;min-width:74px;padding:10px 17px;cursor:pointer;margin-left:5px}
.me-shell[data-state="won"] .me-explorer-body{animation:me-hero-hop .65s ease-in-out 2}.me-shell[data-state="won"] .me-rescue-stars{animation:me-rescue 1.4s ease-out both}.me-shell[data-state="won"] .me-beast{animation:me-sulk 1s ease-out both}.me-shell[data-state="lost"] .me-explorer-body{animation:me-swallow .8s .65s ease-in both}.me-shell[data-state="lost"] .me-jaws{transform-box:fill-box;transform-origin:center;animation:me-gulp 1.2s .35s ease-in-out both}.me-shell[data-state="lost"] .me-poof{animation:me-poof 1s 1.2s ease-out both}
.me-announcement{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.me-review p{white-space:pre-wrap;font-size:20px;line-height:1.6;color:inherit}.me-editor-round textarea{resize:vertical;min-height:112px;font-size:17px;line-height:1.5}.me-editor-options{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px}.me-editor-options label{display:grid;gap:7px;flex:1 1 180px;max-width:300px;font-size:14px;font-weight:700}.me-editor-options select{width:100%;min-height:42px;font:inherit}
#activityPlayer[data-game="monsterescape"] :is(.me-key,.me-continue,.me-retry-round){font-family:inherit}
#activityPlayer[data-game="monsterescape"][data-paused="true"] :is(.me-shell,.me-opening) *{animation-play-state:paused!important}
@media(max-width:600px){#activityPlayer[data-game="monsterescape"] .me-launch-scene{bottom:38%}#activityPlayer[data-game="monsterescape"] .start-content{padding:12px 8px 18px}#activityPlayer[data-game="monsterescape"] .start-card{padding:17px 12px}#activityPlayer[data-game="monsterescape"] .start-card h1{font-size:27px}.me-opening .me-opening-scene{bottom:28%}.me-opening-letters{bottom:11%;gap:10px}.me-opening-letters i{width:58px;height:64px;font-size:35px}.me-opening-skip{top:12px;right:12px}}
@keyframes me-breathe{50%{transform:translateY(-3px) rotate(.6deg)}}@keyframes me-wiggle{50%{transform:rotate(4deg)}}@keyframes me-blink{0%,43%,46%,100%{transform:scaleY(1)}44%,45%{transform:scaleY(.08)}}@keyframes me-wave{50%{transform:rotate(-17deg)}}@keyframes me-letter-pop{50%{transform:translateY(-4px)}}@keyframes me-water{50%{transform:translateX(40px)}}@keyframes me-float{50%{translate:0 -7px}}@keyframes me-glimmer{50%{opacity:.45}}@keyframes me-bubble{50%{translate:0 -12px;opacity:.5}}@keyframes me-snow{to{translate:30px 95px}}@keyframes me-gear{to{rotate:360deg}}@keyframes me-hero-hop{35%{transform:translateY(-23px) rotate(-5deg)}70%{transform:translateY(-4px) rotate(4deg)}}@keyframes me-rescue{0%{opacity:0;translate:0 10px}20%,70%{opacity:1}100%{opacity:0;translate:0 -25px}}@keyframes me-sulk{to{transform:translateX(-25px) rotate(-4deg)}}@keyframes me-swallow{0%{transform:translate(0,0) scale(1);opacity:1}65%{opacity:1}100%{transform:translate(0,-65px) scale(.04);opacity:0}}@keyframes me-gulp{35%{scale:1.4 1.5}60%{scale:1.5 1.6}100%{scale:.95 .7}}@keyframes me-poof{0%{opacity:0;scale:.4}20%{opacity:1}100%{opacity:0;scale:1.7;translate:0 -25px}}
@media(max-width:600px){#activityPlayer.game-shell[data-game="monsterescape"]:not(:fullscreen){height:max(620px,calc(100cqw + 275px));aspect-ratio:auto}.me-shell{grid-template-rows:minmax(185px,.7fr) minmax(300px,1fr);min-height:0}.me-lesson{padding:14px 8px 17px;gap:14px}.me-topline{top:11px;left:11px;right:11px}.me-chances{padding:6px 10px;gap:5px;min-height:35px}.me-chances-dots{gap:3px}.me-chances-dots i{width:5px;height:5px}.me-chances-number{font-size:17px}.me-passage{font-size:27px;line-height:1.8;min-height:90px}.me-passage[data-length="medium"]{font-size:23px}.me-passage[data-length="long"]{font-size:21px;min-height:130px}.me-keyboard{gap:6px}.me-keyboard-row{gap:4px}.me-key{min-height:44px;max-width:42px;border-radius:7px;font-size:21px;aspect-ratio:auto;height:47px;border-bottom-width:3px}.me-key-mark{font-size:9px;right:2px;bottom:2px}.me-round-result{bottom:12px;gap:7px;padding:7px 8px 7px 10px}.me-round-result strong{font-size:20px}:is(.me-continue,.me-retry-round){font-size:15px;padding:9px 12px;min-width:65px}.me-result-icon{width:27px;height:27px;font-size:20px}}
@media(min-width:601px) and (max-height:550px){#activityPlayer[data-game="monsterescape"]:fullscreen .me-shell{grid-template-rows:minmax(140px,.8fr) minmax(205px,1fr);min-height:0}#activityPlayer[data-game="monsterescape"]:fullscreen .me-lesson{padding:8px 24px;gap:6px}#activityPlayer[data-game="monsterescape"]:fullscreen .me-key{height:44px;aspect-ratio:auto}#activityPlayer[data-game="monsterescape"]:fullscreen .me-passage{font-size:27px;min-height:40px}#activityPlayer[data-game="monsterescape"]:fullscreen .me-keyboard{gap:4px}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .me-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}:where(:root:not([data-motion-managed])) .me-shell[data-state="lost"] .me-explorer-body{opacity:0}}
:where(:root[data-reduce-motion]) .me-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}:where(:root[data-reduce-motion]) .me-shell[data-state="lost"] .me-explorer-body{opacity:0}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) :is(.me-opening,.me-launch-scene) *{animation:none!important;transition:none!important}}
:where(:root[data-reduce-motion]) :is(.me-opening,.me-launch-scene) *{animation:none!important;transition:none!important}

/* Each adventure carries its own letter console into the learning area. */
.me-shell{position:relative;--me-deck:#e4f3ef;--me-console:#245d6b;--me-key-face:#edf9f5;--me-key-edge:#a1cbcc;--me-key-radius:50%;--me-console-radius:28px}
.me-lesson{background:linear-gradient(180deg,color-mix(in srgb,var(--me-deck) 55%,#fff) 0%,var(--me-deck) 100%);gap:10px;padding-bottom:14px}
.me-keyboard{position:relative;max-width:650px;gap:6px;padding:10px 18px 12px;border:2px solid color-mix(in srgb,var(--me-key-edge) 65%,var(--me-console));border-radius:var(--me-console-radius);background:linear-gradient(155deg,color-mix(in srgb,var(--me-console) 84%,#fff),var(--me-console));box-shadow:0 5px 0 color-mix(in srgb,var(--me-console) 80%,#172e3d),inset 0 1px 0 #ffffff40}
.me-keyboard::before,.me-keyboard::after{content:"";position:absolute;top:8px;width:5px;height:5px;border-radius:50%;background:var(--me-key-edge);box-shadow:inset 0 1px 1px #102a4a55}
.me-keyboard::before{left:8px}.me-keyboard::after{right:8px}
.me-keyboard-row{gap:6px}
.me-key{flex-basis:54px;width:54px;height:46px;aspect-ratio:auto;min-height:44px;border-radius:var(--me-key-radius);border:1.5px solid var(--me-key-edge);border-bottom-width:3px;background:linear-gradient(#fff8,var(--me-key-face));color:var(--me-ink);box-shadow:0 2px 0 #172e3d44,inset 0 1px 0 #fff9;font-size:clamp(19px,2cqw,25px)}
.me-key:hover:not(:disabled){background:color-mix(in srgb,var(--me-key-face) 70%,#fff);border-color:#fff;transform:translateY(-2px)}
.me-key.is-correct{color:#205941;background:#d6ead2;border-color:#91bfa1;box-shadow:inset 0 2px 4px #23473c18}
.me-key.is-wrong{color:color-mix(in srgb,var(--me-key-edge) 70%,#fff);background:color-mix(in srgb,var(--me-console) 82%,#fff);border-color:color-mix(in srgb,var(--me-console) 60%,var(--me-key-edge));box-shadow:inset 0 2px 4px #172e3d22}
.me-key.is-wrong::before{background:var(--me-key-edge)}
.me-key-mark{right:5px;bottom:4px}
.me-shell[data-choosing="true"] :is(.me-adventure,.me-lesson) *{animation-play-state:paused!important}

/* Small live controls and a chooser bounded by the game, never the browser. */
.me-change-adventure,.me-change-chances{pointer-events:auto;flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:9px;border:1.5px solid color-mix(in srgb,var(--me-accent) 24%,#fff);border-radius:12px;background:#fffdf7f5;color:var(--me-ink);font:inherit;cursor:pointer;box-shadow:0 2px 0 #20384110}
.me-change-adventure svg,.me-change-chances svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.me-change-adventure:hover:not(:disabled),.me-change-chances:hover:not(:disabled){background:#fff;border-color:var(--me-accent)}
.me-change-adventure:focus-visible,.me-change-chances:focus-visible{outline:3px solid var(--me-accent);outline-offset:3px}
.me-change-adventure:disabled,.me-change-chances:disabled{opacity:.45;cursor:default}
/* chances stay as the teacher set them on a student's own device (assignments and embedded lessons) */
.classroom-student .me-change-chances{display:none!important}
.me-topline{justify-content:flex-start;gap:8px}
.me-chances{margin-left:auto}
.me-choice-dialog{position:absolute;inset:0;z-index:30;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:14px;border:0;border-radius:0;background:#142e4c8c;color:var(--me-ink);font:inherit;text-shadow:none;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.me-choice-dialog[hidden],.me-choice-dialog:not([open]){display:none!important}
.me-choice-dialog::backdrop{background:transparent;backdrop-filter:none}
.me-choice-card{display:flex;flex-direction:column;width:min(730px,100%);max-width:100%;max-height:100%;min-height:0;overflow:hidden;border:2px solid color-mix(in srgb,var(--me-accent) 35%,#fff);border-radius:20px;background:#fffdf7;box-shadow:0 12px 35px #102a4a40}
.me-choice-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 9px;border-bottom:1px solid color-mix(in srgb,var(--me-accent) 16%,#fff)}
.me-choice-title{margin:0;font:800 clamp(19px,2.2cqw,24px)/1.25 "ClassPlay Round","Microsoft YaHei",sans-serif;color:var(--me-ink)}
.me-choice-close{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:8px;border:1px solid #d0dce1;border-radius:50%;background:#fff;color:var(--me-ink);cursor:pointer}
.me-choice-close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.me-choice-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 18px 14px;scrollbar-width:thin}
.me-choice-body h3{margin:0 0 8px;font-size:15px;color:var(--me-ink);font-family:inherit}
.me-world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.me-world-choice{position:relative;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:4px;border:2px solid #d8e2e4;border-radius:14px;background:#fff;color:#2a4757;text-align:left;font:800 15px/1.3 "ClassPlay Round","Microsoft YaHei",sans-serif;cursor:pointer;box-shadow:0 2px 0 #d8e2e480;transition:border-color .15s,background .15s}
.me-world-choice:hover{border-color:var(--me-accent)}
.me-world-choice.is-selected{border-color:var(--me-accent);background:color-mix(in srgb,var(--me-sky) 25%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--me-accent) 20%,transparent)}
.me-world-choice.is-selected::after{content:"✓";position:absolute;top:10px;right:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--me-accent);color:#fff;font-size:15px;border:2px solid #fff;box-shadow:0 2px 6px #0004}
.me-world-thumb{display:block;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:9px;background:#0e5a72}
.me-world-thumb img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.me-world-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;padding:9px 7px 7px}
.me-world-current{font-size:11px;line-height:1.3;font-weight:700;color:#416174;background:#edf2f5;border-radius:5px;padding:3px 5px}
.me-world-current[hidden]{display:none}
.me-choice-footer{flex:none;display:flex;justify-content:flex-end;gap:8px;padding:10px 18px 12px;border-top:1px solid color-mix(in srgb,var(--me-accent) 16%,#fff);background:#fffdf7}
.me-choice-keep,.me-choice-play{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:95px;padding:9px 16px;border:1.5px solid color-mix(in srgb,var(--me-accent) 35%,#fff);border-radius:11px;background:#fff;color:var(--me-ink);font:800 15px/1.2 "ClassPlay Round","Microsoft YaHei",sans-serif;cursor:pointer}
.me-choice-play{background:var(--me-accent);border-color:var(--me-accent);color:#fff}
.me-choice-play svg{width:18px;height:18px;fill:currentColor}
.me-choice-dialog button:focus-visible,.me-choice-dialog select:focus-visible{outline:3px solid var(--me-accent);outline-offset:2px}
.me-choice-chances{padding:12px 0 18px;display:grid;justify-items:center;gap:12px;text-align:center}
.me-chance-label{display:grid;gap:10px;font-size:17px;font-weight:800;width:min(270px,100%)}
.me-choice-limit{width:min(270px,100%);min-height:52px;border:1.5px solid color-mix(in srgb,var(--me-accent) 45%,#fff);border-radius:12px;padding:8px 14px;background:#fff;color:var(--me-ink);font-family:inherit;font-size:24px;font-weight:800;line-height:1.3}
.me-choice-remaining{margin:0;font-size:17px;font-weight:800;color:var(--me-ink)}
.me-choice-used{margin:0;max-width:35ch;font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--me-ink) 75%,#fff)}
.me-editor-round .me-editor-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(135px,.3fr);align-items:start;gap:16px;margin:14px 0 0}
.me-editor-round .me-editor-options>label{max-width:none;min-width:0;display:grid;gap:6px;font-size:14px;font-weight:700}
.me-editor-round .me-editor-options select{min-width:0;width:100%;font:inherit}
.me-editor-scenes{margin:0;padding:0;border:0;min-inline-size:0}
.me-editor-scenes legend{padding:0;margin:0 0 6px;font-size:14px;font-weight:700}
.me-editor-scene-options{display:grid;grid-template-columns:repeat(3,minmax(0,210px));gap:8px;max-width:646px}
.me-editor-round .me-editor-scene-option{position:relative;display:grid;grid-template-columns:64px 15px minmax(0,1fr);align-items:center;gap:7px;max-width:none;min-width:0;min-height:58px;margin:0;padding:6px;border:2px solid #ccd8df;border-radius:10px;background:#fff;color:#294758;cursor:pointer;font-size:13px;line-height:1.3;font-weight:700;overflow:hidden}
.me-editor-round .me-editor-scene-option:hover{border-color:#729bb5}
.me-editor-round .me-editor-scene-option:has(input:checked){border-color:#276fa2;background:#edf5fb;box-shadow:0 0 0 1px #276fa224}
.me-editor-round .me-editor-scene-option:has(input:focus-visible){outline:3px solid #276fa2;outline-offset:2px}
.me-editor-scene-radio{grid-column:2;grid-row:1;width:15px;height:15px;margin:0;accent-color:#276fa2}
.me-editor-scene-thumb{grid-column:1;grid-row:1;display:block;width:64px;aspect-ratio:16/9;overflow:hidden;border-radius:5px;background:#0e5a72}
.me-editor-scene-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.me-editor-scene-name{grid-column:3;grid-row:1;padding-right:2px}
#activityPlayer[data-game="monsterescape"]:has(.activity-clock) .me-topline{left:100px}
@media(max-width:600px){
 .me-lesson{gap:10px;padding:12px 7px 14px}.me-keyboard{padding:9px 7px 11px;gap:6px;border-radius:18px}.me-keyboard-row{gap:4px}.me-key{flex-basis:38px;width:38px;height:46px;max-width:38px;font-size:20px}.me-key-mark{font-size:9px;right:3px;bottom:3px}
 .me-keyboard::before,.me-keyboard::after{top:4px;width:4px;height:4px}.me-keyboard::before{left:4px}.me-keyboard::after{right:4px}
 .me-topline{gap:6px}.me-change-adventure,.me-change-chances{width:38px;height:38px;min-height:38px;padding:8px}.me-round-count{font-size:12px;padding:6px 8px}.me-chances-dots{display:none}
 .me-choice-dialog{padding:9px}.me-choice-card{border-radius:16px}.me-choice-header{padding:10px 12px 7px}.me-choice-title{font-size:20px}.me-choice-body{padding:10px 12px 12px}
 .me-world-grid{gap:8px}.me-world-choice{font-size:12px}.me-world-caption{padding:7px 3px 4px;gap:4px}.me-world-current{font-size:10px}.me-choice-footer{padding:9px 12px 10px}.me-choice-keep,.me-choice-play{font-size:14px;min-width:85px;padding:9px 12px}
 .me-editor-round .me-editor-options{grid-template-columns:1fr;gap:10px}
 .me-editor-scene-options{grid-template-columns:1fr;max-width:320px}
}
@media(min-width:601px) and (max-height:550px){.me-choice-dialog{padding:8px}.me-choice-header{padding:8px 14px 5px}.me-choice-body{padding:8px 14px}.me-world-grid{gap:10px;max-width:560px;margin-inline:auto}.me-choice-footer{padding:7px 14px 9px}.me-keyboard{padding:6px 15px 8px}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .me-choice-dialog *{transition:none!important}}
:where(:root[data-reduce-motion]) .me-choice-dialog *{transition:none!important}

/* Shark lagoon in 3D (js/games/monsterescape-3d.js): a realistic scene with dark, sporty game
   chrome. Only a shark round on a device that can show 3D gets .is-3d; everything else keeps
   the illustrated look above. */
@font-face{font-family:"CP Anton";src:url("../assets/fonts/Anton-Regular-latin.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"CP Barlow Semi Condensed";src:url("../assets/fonts/BarlowSemiCondensed-SemiBold-latin.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"CP Barlow Semi Condensed";src:url("../assets/fonts/BarlowSemiCondensed-Bold-latin.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"CP Hyperlegible";src:url("../assets/fonts/AtkinsonHyperlegible-Bold-latin.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
:is(.me-shell.is-3d,.me3d-loading){--me3d-line:#1f4b64;--me3d-text:#e8f5fb;--me3d-muted:#8fb3c5;--me3d-cyan:#3fd3ff;--me3d-red:#ff3d3d;--me3d-gold:#ffc93d;--me3d-good:#2ee6a6;--me3d-display:"CP Anton",Impact,"Arial Narrow Bold","PingFang SC","Microsoft YaHei",sans-serif;--me3d-ui:"CP Barlow Semi Condensed","Arial Narrow","PingFang SC","Microsoft YaHei",system-ui,sans-serif;--me3d-read:"CP Hyperlegible",Verdana,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
#activityPlayer[data-game="monsterescape"][data-me3d="on"]{background:#04121b}
#activityPlayer[data-game="monsterescape"] .me-shell.is-3d :is(.me-key,.me-continue,.me-retry-round){font-family:var(--me3d-ui)}
#activityPlayer[data-game="monsterescape"][data-me3d="on"] .hud{background:#04121b}
#activityPlayer[data-game="monsterescape"][data-me3d="on"] .player-controls{background:#061723;border-top:1px solid #1f4b64}
#activityPlayer[data-game="monsterescape"][data-me3d="on"] #pauseBtn svg path{stroke:#061723}
#activityPlayer[data-game="monsterescape"][data-me3d="on"] #pScore{background:#0a2130;color:#e8f5fb;border-color:#1f4b64;box-shadow:none}
#activityPlayer[data-game="monsterescape"][data-me3d="on"] .activity-clock{background:#04121bcc;color:#fff;border:1px solid #ffffff26;font-family:"CP Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;font-weight:700;letter-spacing:.06em}
/* The lesson takes the height its sentence and keyboard need (up to 60%); the scene gets the rest. */
.me-shell.is-3d{grid-template-rows:minmax(200px,1fr) fit-content(60%);container:me3d-shell/size;background:#071a26;color:var(--me3d-text)}
/* In full screen (a class reading from a projector) a short sentence that would leave its line half
   empty grows to fill it, up to a share of the height, so the scene keeps most of the screen; one that
   already needs two lines keeps its size. Full screen enlarges the window's layout as one piece
   (fullscreen-canvas.js), so these sizes are in that layout's units. --me-chars is the sentence's length. */
.me-shell.is-3d .me-passage{--me-chars:40}
@media(min-height:551px){#activityPlayer:fullscreen .me-shell.is-3d .me-passage[data-length="short"]{font-size:clamp(24px,max(min(3.2cqw,43px),min((100cqw - 150px) / (var(--me-chars) * 1.15),9.5cqh)),66px)}
@container me3d-shell (max-height:660px){#activityPlayer:fullscreen .me-shell.is-3d .me-passage[data-length="short"]{font-size:clamp(22px,max(min(2.8cqw,36px),min((100cqw - 150px) / (var(--me-chars) * 1.15),9.5cqh)),66px)}}}
.me-shell.is-3d .me-adventure{background:#0e5a72;border-bottom:1px solid var(--me3d-line)}
.me-shell.is-3d .me-topline{z-index:4;transition:opacity .6s ease .1s}
.me-shell.is-3d:is([data-scene-mode="opening"],[data-scene-mode="cine"]) .me-topline{opacity:0;pointer-events:none;transition-duration:.2s;transition-delay:0s}
.me-shell.is-3d :is(.me-change-adventure,.me-change-chances){border:1px solid #ffffff33;border-radius:12px;background:#04121b8c;color:#fff;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.me-shell.is-3d :is(.me-change-adventure,.me-change-chances):hover:not(:disabled){background:#04121bb3;border-color:var(--me3d-cyan);color:var(--me3d-cyan)}
.me-shell.is-3d :is(.me-change-adventure,.me-change-chances):focus-visible{outline:2px solid var(--me3d-cyan);outline-offset:2px}
.me-shell.is-3d .me-round-count{background:#04121b8c;color:#fff;border:1px solid #ffffff26;box-shadow:none;font:700 14px/1.25 var(--me3d-ui);letter-spacing:.12em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.me-shell.is-3d .me-chances{gap:10px;padding:8px 12px;min-height:40px;border-radius:12px;background:#04121b8c;border:1px solid #ffffff26;color:#ffd5d5;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.me-shell.is-3d .me-chances>svg{display:none}
.me-shell.is-3d .me-chances-number{font:400 20px/1 var(--me3d-display);letter-spacing:.02em;color:#fff;min-width:1ch;text-align:center}
.me-shell.is-3d .me-chances-dots{display:flex;gap:5px;margin:0}
.me-shell.is-3d .me-chances-dots i{width:clamp(9px,calc(150px / var(--me-lives,3) - 5px),26px);height:12px;border-radius:2px;transform:skewX(-18deg);background:linear-gradient(#ff7a6b,var(--me3d-red) 55%,#b31212);box-shadow:0 0 10px #ff3d3d99;transition:none}
.me-shell.is-3d .me-chances-dots i.is-used{background:#ffffff14;box-shadow:inset 0 0 0 1px #ff3d3d66}
.me-shell.is-3d .me-chances-dots i.is-breaking{animation:me3d-life-break .7s ease-out both}
.me-shell.is-3d.is-last-chance .me-chances-dots i:not(.is-used){animation:me3d-life-pulse .55s ease-in-out infinite alternate}
.me-shell.is-3d .me-round-result{bottom:calc(11% + 14px);transform:none;translate:-50% 0;padding:0;gap:12px;background:none;border:0;box-shadow:none;animation:me3d-rise .4s both}
.me-shell.is-3d .me-round-result :is(.me-result-icon,strong){display:none}
.me-shell.is-3d :is(.me-continue,.me-retry-round){margin:0;min-height:48px;min-width:150px;padding:0 26px;border-radius:10px;background:linear-gradient(180deg,#5fe0ff,#19a9d6);color:#031520;font:700 18px/1 var(--me3d-ui);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 0 5px #3fd3ff2e,0 14px 34px #000a}
.me-shell.is-3d :is(.me-continue,.me-retry-round):hover{filter:brightness(1.08)}
.me-shell.is-3d :is(.me-continue,.me-retry-round):focus-visible{outline:3px solid #fff;outline-offset:4px}
.me-shell.is-3d .me-lesson{gap:14px;padding:16px clamp(10px,3cqw,32px) 18px;background:linear-gradient(180deg,#0c2636,#071a26);border-top:1px solid var(--me3d-line);transition:opacity .4s}
.me-shell.is-3d[data-opening="true"] .me-lesson{opacity:.55}
.me-shell.is-3d .me-passage{color:#fff;font-family:var(--me3d-read);font-weight:700;scrollbar-color:#2a5a74 transparent}
#activityPlayer:not([data-font="default"]) .me-shell.is-3d .me-passage{font-family:inherit}
.me-shell.is-3d .me-passage:focus-visible{outline:2px solid #3fd3ff8c;outline-offset:4px;border-radius:8px}
/* a hidden letter is a lit slot that stands out from the panel: a lighter tile, a fine edge and a thick line */
.me-shell.is-3d .me-letter.is-letter{width:.8em;height:1.3em;margin:0 .05em;border:0;border-radius:.12em;background:#215472;box-shadow:inset 0 -.15em 0 var(--me3d-cyan),inset 0 0 0 1px #3fd3ff45,0 0 14px #3fd3ff26}
.me-shell.is-3d .me-letter.is-revealed{background:#11314a;box-shadow:inset 0 -.15em 0 var(--me3d-good)}
.me-shell.is-3d .me-letter.is-missed{color:#ff8a80;background:#2a1820;box-shadow:inset 0 -.15em 0 var(--me3d-red)}
.me-shell.is-3d .me-letter.is-new{animation:me3d-tile-glow .8s ease-out both}
.me-shell.is-3d .me-keyboard{max-width:680px;gap:9px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.me-shell.is-3d .me-keyboard::before,.me-shell.is-3d .me-keyboard::after{display:none}
.me-shell.is-3d .me-keyboard-row{gap:7px}
.me-shell.is-3d .me-key{flex:0 1 64px;width:64px;height:50px;min-height:44px;border:1px solid #2a5a74;border-radius:9px;background:linear-gradient(180deg,#1a3c50,#11303f);color:var(--me3d-text);box-shadow:0 4px 0 #061620;font:700 clamp(20px,2.4cqw,26px)/1 var(--me3d-ui);text-shadow:none;transition:transform .08s,box-shadow .08s,border-color .15s,color .15s}
.me-shell.is-3d .me-key:hover:not(:disabled){background:linear-gradient(180deg,#1f4760,#143749);border-color:var(--me3d-cyan);color:var(--me3d-cyan);transform:none}
.me-shell.is-3d .me-key:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #061620}
.me-shell.is-3d .me-key:focus-visible{outline:2px solid var(--me3d-cyan);outline-offset:2px}
.me-shell.is-3d .me-key:disabled:not(.is-correct):not(.is-wrong){opacity:.6}
.me-shell.is-3d .me-key.is-correct{background:linear-gradient(180deg,#11604d,#0c4a3c);border-color:var(--me3d-good);color:#c5ffeb;transform:translateY(3px);box-shadow:0 1px 0 #061620}
.me-shell.is-3d .me-key.is-wrong{background:#1a1418;border-color:#5a2630;color:#7a4a52;transform:translateY(3px);box-shadow:0 1px 0 #061620}
.me-shell.is-3d .me-key.is-wrong::before,.me-shell.is-3d .me-key.is-wrong::after{content:"";position:absolute;left:30%;right:30%;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:var(--me3d-red)}
.me-shell.is-3d .me-key.is-wrong::before{transform:rotate(-45deg)}.me-shell.is-3d .me-key.is-wrong::after{transform:rotate(45deg)}
.me-shell.is-3d .me-key-mark{display:none}
.me-shell.is-3d .me-key.is-shake{animation:me3d-key-shake .4s}
.me-shell.is-3d .me-choice-dialog{background:#020a10b3}
/* A shorter scene box keeps the lesson compact (after the rules it adjusts, so it takes effect) and the
   sentence smaller, by its length: a medium sentence (three lines on a laptop) and a long one would
   otherwise take the short sentence's size and be cut off. */
@container me3d-shell (max-height:660px){.me-shell.is-3d .me-lesson{gap:10px;padding-top:12px;padding-bottom:14px}.me-shell.is-3d .me-keyboard{gap:7px}.me-shell.is-3d .me-key{height:44px}.me-shell.is-3d .me-passage{font-size:clamp(22px,2.8cqw,36px);line-height:1.6}.me-shell.is-3d .me-passage[data-length="medium"]{font-size:clamp(20px,2.4cqw,30px)}.me-shell.is-3d .me-passage[data-length="long"]{font-size:clamp(18px,2cqw,24px);line-height:1.75}}

/* The scene box: canvas, distance meters, letterbox, caption, title slam and skip */
.me3d{position:absolute;inset:0;overflow:hidden;container-type:size;background:radial-gradient(120% 90% at 50% 25%,#1b7f9a,#0b3d52 60%,#04121b);color:#fff;font-family:var(--me3d-ui);-webkit-user-select:none;user-select:none}
.me3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.me3d.is-shaking{animation:me3d-frame-shake .45s}
.me3d-meters{position:absolute;z-index:3;left:14px;bottom:12px;display:flex;gap:8px;pointer-events:none;transition:opacity .6s ease .1s}
.me3d-meter{display:flex;align-items:baseline;gap:6px;padding:7px 11px 6px;border-radius:10px;background:#04121b99;border:1px solid #ffffff22;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 13px/1 var(--me3d-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--me3d-muted)}
.me3d-meter b{min-width:2.6ch;text-align:right;font:400 22px/1 var(--me3d-display);letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.me3d-meter i{font-style:normal;letter-spacing:0;color:var(--me3d-muted)}
.me3d-meter.is-shark b{color:#ff8a80}.me3d-meter.is-boat b{color:#8be9ff}
.me3d.is-last .me3d-meter.is-shark{border-color:#ff3d3d99;box-shadow:0 0 16px #ff3d3d55}
.me3d:is([data-mode="opening"],.is-cine) .me3d-meters{opacity:0;transition-duration:.2s;transition-delay:0s}
.me3d-bar{position:absolute;z-index:5;left:0;right:0;height:11%;background:#000;transition:transform .45s cubic-bezier(.3,0,.2,1)}
.me3d-bar.is-top{top:0;transform:translateY(-101%)}.me3d-bar.is-bottom{bottom:0;transform:translateY(101%)}
.me3d.is-cine .me3d-bar{transform:none}
.me3d-caption{position:absolute;z-index:4;left:0;right:0;bottom:14%;padding:0 16px;text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.me3d-caption b{display:block;font:400 clamp(28px,min(7.5cqw,17cqh),76px)/1 var(--me3d-display);letter-spacing:.05em;text-transform:uppercase;text-shadow:0 3px 0 #02121c,0 2px 22px #000a}
.me3d-caption span{display:block;margin-top:8px;font:700 clamp(12px,1.8cqw,16px)/1.2 var(--me3d-ui);letter-spacing:.22em;text-transform:uppercase;color:#bfefff;text-shadow:0 1px 10px #000a}
.me3d.is-caption .me3d-caption{opacity:1;transform:none}
.me3d-skip{position:absolute;z-index:7;top:12px;right:14px;display:flex;align-items:center;gap:4px;min-height:40px;padding:7px 10px 7px 13px;border:1px solid #ffffff44;border-radius:9px;background:#00000080;color:#fff;font:700 14px/1 var(--me3d-ui);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.me3d-skip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.me3d-skip:hover,.me3d-skip:focus-visible{border-color:var(--me3d-cyan);color:var(--me3d-cyan);outline:none}
.me3d.is-cine .me3d-skip{top:calc(11% + 8px)}
.me3d-slam{position:absolute;z-index:6;inset:11% 0 calc(11% + 66px);display:grid;place-content:center;justify-items:center;gap:8px;padding:0 16px;text-align:center;pointer-events:none}
.me3d-slam-title{position:relative;padding:0 .08em;font:400 clamp(44px,min(15cqw,30cqh),150px)/.9 var(--me3d-display);letter-spacing:.03em;text-transform:uppercase;transform:skewX(-8deg);color:transparent;-webkit-background-clip:text;background-clip:text;opacity:0}
.me3d-slam[data-kind="caught"] .me3d-slam-title{background-image:linear-gradient(180deg,#ffe1d6 0%,#ff6b57 38%,#c8150f 52%,#ff4e3a 70%,#ffb3a1 100%);filter:drop-shadow(0 4px 0 #2a0303) drop-shadow(0 0 26px #ff2a1a99)}
.me3d-slam[data-kind="escaped"] .me3d-slam-title{background-image:linear-gradient(180deg,#fff 0%,#fff0b3 30%,#ffc93d 50%,#c98400 62%,#ffe27a 100%);filter:drop-shadow(0 4px 0 #2b1a00) drop-shadow(0 0 26px #ffc93d99)}
.me3d-slam-sub{max-width:44ch;font:600 clamp(14px,2.2cqw,20px)/1.35 var(--me3d-ui);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px #000;opacity:0}
.me3d-slam-sub b{display:block;margin-top:4px;font:700 clamp(17px,3cqw,28px)/1.25 var(--me3d-read);letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
@container (max-height:340px){.me3d-slam-sub{display:none}.me3d-slam{inset:9% 0 calc(9% + 60px)}}
.me3d-slam.is-on .me3d-slam-title{animation:me3d-slam-in .55s cubic-bezier(.2,.9,.3,1.15) both}
.me3d-slam.is-on .me3d-slam-sub{animation:me3d-rise .5s .45s ease-out both}
.me3d-slam.is-on::before{content:"";position:absolute;left:50%;top:50%;width:30cqw;height:30cqw;margin:-15cqw 0 0 -15cqw;border-radius:50%;border:6px solid #ffffffaa;animation:me3d-shockwave .6s .12s ease-out both}
.me3d-slam.is-on::after{content:"";position:absolute;left:-10%;right:-10%;top:48%;height:9px;transform:skewY(-4deg);animation:me3d-streak .5s .1s ease-out both}
.me3d-slam[data-kind="caught"].is-on::after{background:linear-gradient(90deg,transparent,#ff3d3d,transparent)}
.me3d-slam[data-kind="escaped"].is-on::after{background:linear-gradient(90deg,transparent,#ffc93d,transparent)}
.me3d-loading{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:100%;height:100%;min-height:0;padding:16px;background:radial-gradient(120% 80% at 50% 20%,#0f4a63,#04121b 70%);color:#e8f5fb}
.me3d-recovery{position:absolute;inset:0;z-index:8;overflow:auto}
.me3d-recovery>.me3d-loading{min-height:100%}
.me3d-loading-poster{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover}
.me3d-loading::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#04121be6,#04121b66)}
.me3d-loading-card{display:grid;justify-items:center;gap:14px;max-width:100%;padding:24px;text-align:center}
.me3d-loading-card b{font:400 clamp(34px,6cqw,60px)/1 var(--me3d-display);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 3px 0 #02121c}
.me3d-loading-bar{position:relative;width:min(280px,70vw);height:6px;border-radius:3px;overflow:hidden;background:#ffffff1f}
.me3d-loading-bar i{position:absolute;inset:0 auto 0 0;width:40%;border-radius:3px;background:linear-gradient(90deg,#3fd3ff00,#3fd3ff,#8be9ff);animation:me3d-load 1.1s ease-in-out infinite}
.me3d-loading-note{font:700 14px/1.3 var(--me3d-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--me3d-muted)}
.me3d-loading-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.me3d-retry,.me3d-back{min-height:44px;padding:10px 18px;border:1px solid #ffffff40;border-radius:10px;background:#0b2433;color:#e8f5fb;font:700 15px/1.3 var(--me3d-ui);cursor:pointer}
.me3d-retry{border-color:var(--me3d-cyan);background:#123d50}
.me3d-retry:hover:not(:disabled),.me3d-back:hover:not(:disabled){border-color:var(--me3d-cyan);color:var(--me3d-cyan)}
.me3d-retry:focus-visible,.me3d-back:focus-visible{outline:2px solid var(--me3d-cyan);outline-offset:3px}
.me3d-retry:disabled{opacity:.5;cursor:wait}
.me3d-loading.is-error .me3d-loading-bar{display:none}
.me3d-loading.is-error .me3d-loading-note{max-width:38ch;letter-spacing:0;text-transform:none;line-height:1.5}
/* While shaders compile the bar fills with them, in the world's own colour, with the share done under it. */
.me3d-loading[data-monster] .me3d-loading-bar.is-measured i{width:0;translate:none;animation:none;background:linear-gradient(90deg,var(--me3d-cyan),#ffffffd9);transition:width .3s ease-out}
.me3d-loading-pct{margin-top:-6px;font:700 13px/1 var(--me3d-ui);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--me3d-text)}
.me3d-loading-pct:empty{display:none}
.me3d-loading-hint{max-width:34ch;font:600 14px/1.45 var(--me3d-ui);color:var(--me3d-muted)}
.me3d-loading.is-error :is(.me3d-loading-pct,.me3d-loading-hint){display:none}
@keyframes me3d-frame-shake{15%{translate:-8px 4px}30%{translate:7px -5px}45%{translate:-5px 3px}60%{translate:4px -2px}80%{translate:-2px 1px}}
@keyframes me3d-life-break{0%{background:#fff;box-shadow:0 0 22px #fff}25%{transform:skewX(-18deg) scale(1.4,1.6)}100%{background:#ffffff14;box-shadow:inset 0 0 0 1px #ff3d3d66;transform:skewX(-18deg)}}
@keyframes me3d-life-pulse{to{box-shadow:0 0 22px #ff3d3d;filter:brightness(1.3)}}
@keyframes me3d-tile-glow{0%{box-shadow:inset 0 -.15em 0 var(--me3d-good),0 0 0 .1em color-mix(in srgb,var(--me3d-good) 55%,transparent),0 0 30px var(--me3d-good);transform:translateY(-.12em)}100%{box-shadow:inset 0 -.15em 0 var(--me3d-good);transform:none}}
@keyframes me3d-key-shake{20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}
@keyframes me3d-slam-in{0%{opacity:0;transform:skewX(-8deg) scale(3.2);filter:blur(10px)}55%{opacity:1;transform:skewX(-8deg) scale(.92)}100%{opacity:1;transform:skewX(-8deg) scale(1)}}
@keyframes me3d-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes me3d-shockwave{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(2.4)}}
@keyframes me3d-streak{0%{opacity:0;transform:skewY(-4deg) scaleX(0)}40%{opacity:1}100%{opacity:0;transform:skewY(-4deg) scaleX(1)}}
@keyframes me3d-load{0%{translate:-100% 0}100%{translate:250% 0}}
@media(max-width:600px){
 .me-shell.is-3d{grid-template-rows:minmax(220px,1fr) fit-content(64%)}
 .me-shell.is-3d .me-lesson{gap:12px;padding:12px 7px 14px}
 .me-shell.is-3d .me-keyboard{gap:8px}.me-shell.is-3d .me-keyboard-row{gap:4px}
 .me-shell.is-3d .me-key{flex-basis:38px;width:38px;max-width:40px;height:48px;font-size:21px;border-radius:8px}
 .me-shell.is-3d .me-chances{gap:7px;padding:7px 9px;min-height:36px}
 .me-shell.is-3d .me-chances-dots{display:flex;gap:4px}
 .me-shell.is-3d .me-chances-dots i{width:clamp(6px,calc(104px / var(--me-lives,3) - 4px),18px);height:10px}
 .me-shell.is-3d .me-chances-number{font-size:18px}
 .me3d-meters{left:9px;bottom:9px;gap:6px}.me3d-meter{padding:6px 8px 5px;font-size:11px}.me3d-meter b{font-size:18px}
 .me3d-skip{top:9px;right:9px}
 .me-shell.is-3d :is(.me-continue,.me-retry-round){min-width:130px;font-size:16px}
}
@media(min-width:601px) and (max-height:550px){#activityPlayer[data-game="monsterescape"]:fullscreen .me-shell.is-3d{grid-template-rows:minmax(150px,1fr) fit-content(62%)}#activityPlayer[data-game="monsterescape"]:fullscreen .me-shell.is-3d .me-key{height:42px}}
/* The game's size in the page. Wider than a phone it takes the window's height (less a margin) instead
   of a 16:9 box: an upright tablet or a tall window gives the scene that room, and a laptop shows the
   whole game, keys and controls included, once starting a round has brought it into view. */
@media(min-width:601px){#activityPlayer.game-shell[data-game="monsterescape"]:not(:fullscreen){aspect-ratio:auto;height:clamp(480px,calc(100svh - 20px),130vw);min-height:0}}
/* In 3D the round's status (rounds won, a clock) floats in the scene's top line instead of taking a row
   of its own, in the world's glass, and steps aside for the films as the top line does. */
#activityPlayer[data-game="monsterescape"][data-me3d="on"]{--me3d-chip:#04121b8c}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="dinosaur"]{--me3d-chip:#140f068c}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="planet"]{--me3d-chip:#0b07188c}
@media(min-width:601px),(orientation:landscape) and (max-height:500px){
 #activityPlayer[data-game="monsterescape"][data-me3d="on"][data-phase=play]:has(.me-shell.is-3d){--player-status-height:0px}
 #activityPlayer[data-game="monsterescape"][data-me3d="on"][data-phase=play]:has(.me-shell.is-3d) .hud{top:12px;height:40px;padding:0 8px;display:flex;justify-content:center;align-items:center;gap:8px;background:none;pointer-events:none;transition:opacity .6s ease .1s}
 #activityPlayer[data-game="monsterescape"][data-me3d="on"][data-phase=play]:has(.me-shell.is-3d:is([data-scene-mode="opening"],[data-scene-mode="cine"])) .hud{opacity:0;transition-duration:.2s;transition-delay:0s}
 #activityPlayer[data-game="monsterescape"][data-me3d="on"]:has(.me-shell.is-3d) .hud>:is(#pScore,.activity-clock){min-height:40px;padding:8px 13px;border:1px solid #ffffff26;border-radius:12px;background:var(--me3d-chip);color:#fff!important;box-shadow:none;font:700 15px/1.2 "CP Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.08em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
 #activityPlayer[data-game="monsterescape"][data-me3d="on"]:has(.activity-clock) .me-shell.is-3d .me-topline{left:16px}
}
/* Phones held sideways (and other short, wide windows): the scene and the lesson sit side by side, so the
   scene, the sentence and every key are on the screen together, in the page (which then takes the whole
   window's height) as in full screen. Keys share the lesson's width, nine to a row. */
@media(orientation:landscape) and (max-height:500px){
 #activityPlayer.game-shell[data-game="monsterescape"]:not(:fullscreen){aspect-ratio:auto;height:max(280px,calc(100svh - 12px));min-height:0}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-shell,.me-shell.is-3d){grid-template-columns:minmax(0,1fr) clamp(280px,44%,420px);grid-template-rows:minmax(0,1fr);min-height:0}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-adventure{border-bottom:0;border-right:3px solid color-mix(in srgb,var(--me-accent) 28%,white)}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-shell.is-3d .me-adventure{border-right:1px solid var(--me3d-line)}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-lesson,.me-shell.is-3d .me-lesson){justify-content:center;gap:8px;padding:10px 8px;border-top:0}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-passage,.me-shell.is-3d .me-passage){min-height:40px;font-size:22px;line-height:1.6}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-passage,.me-shell.is-3d .me-passage)[data-length="medium"]{font-size:20px}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-passage,.me-shell.is-3d .me-passage)[data-length="long"]{font-size:18px;line-height:1.7}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-keyboard,.me-shell.is-3d .me-keyboard){width:100%;max-width:none;gap:5px}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-keyboard,.me-shell.is-3d .me-keyboard){padding-inline:min(18px,3%)}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-shell.is-3d .me-keyboard{padding-inline:0}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-keyboard-row,.me-shell.is-3d .me-keyboard-row){gap:4px}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-key,.me-shell.is-3d .me-key){flex:none;width:calc((100% - 32px) / 9);min-width:0;max-width:48px;height:42px;min-height:40px;font-size:19px;border-radius:8px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-key-mark{font-size:9px;right:2px;bottom:2px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-topline,#activityPlayer[data-game="monsterescape"][data-me3d="on"]:has(.activity-clock) .me-shell.is-3d .me-topline{top:9px;left:9px;right:9px;gap:6px}
 #activityPlayer[data-game="monsterescape"][data-phase] :is(.me-change-adventure,.me-change-chances){width:36px;height:36px;min-height:36px;padding:8px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-round-count{font-size:12px;padding:6px 8px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-shell.is-3d .me-chances{gap:7px;padding:7px 9px;min-height:36px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-shell.is-3d .me-chances-dots i{width:clamp(6px,calc(104px / var(--me-lives,3) - 4px),18px);height:10px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-shell.is-3d .me-chances-number{font-size:18px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me3d-meters{left:9px;bottom:9px;gap:6px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me3d-meter{padding:6px 8px 5px;font-size:11px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me3d-meter b{font-size:18px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me3d-skip{top:9px;right:9px}
 #activityPlayer[data-game="monsterescape"][data-phase] .me-shell.is-3d :is(.me-continue,.me-retry-round){min-width:120px;min-height:44px;padding:0 18px;font-size:16px}
 /* the status sits at the top of the lesson, over the sentence */
 #activityPlayer[data-game="monsterescape"][data-me3d="on"][data-phase=play]:has(.me-shell.is-3d) .hud{top:6px;left:auto;right:0;width:clamp(280px,44%,420px)}
 #activityPlayer[data-game="monsterescape"][data-me3d="on"]:has(.me-shell.is-3d) .hud>:is(#pScore,.activity-clock){min-height:34px;padding:6px 11px;font-size:14px}
 #activityPlayer[data-game="monsterescape"][data-me3d="on"][data-phase]:has(.me-shell.is-3d):has(.hud>:is(.activity-clock,#pScore:not(.hidden))) .me-shell.is-3d .me-lesson{padding-top:52px}
}

/* Dinosaur valley in 3D (js/games/monsterescape-valley.js): the same sporty chrome in the warm
   colours of the valley: dark earth, amber highlights, leaf-green for found letters. */
#activityPlayer[data-game="monsterescape"] .me-launch-scene.is-3d[data-monster="dinosaur"],#activityPlayer[data-game="monsterescape"] #startArtwork:has(.me-launch-scene[data-monster="dinosaur"]){background:#3d4a26}
.me-launch-scene.is-3d[data-monster="dinosaur"] img{object-position:52% 38%}
#activityPlayer[data-game="monsterescape"] #startArtwork:has(.me-launch-scene[data-monster="dinosaur"])+.start-content{background:linear-gradient(transparent 50%,#140f0699 85%)}
:is(.me-shell.is-3d,.me3d-loading)[data-monster="dinosaur"]{--me3d-line:#4f4328;--me3d-text:#f7f0de;--me3d-muted:#d3bf93;--me3d-cyan:#ffb547;--me3d-good:#a8ea6e}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="dinosaur"]{background:#100d07}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="dinosaur"] .hud{background:#100d07}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="dinosaur"] .player-controls{background:#17120a;border-top-color:#4f4328}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="dinosaur"] #pauseBtn svg path{stroke:#17120a}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="dinosaur"] #pScore{background:#241d10;color:#f7f0de;border-color:#4f4328}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="dinosaur"] .activity-clock{background:#100d07cc}
.me-shell.is-3d[data-monster="dinosaur"]{background:#120e07}
.me-shell.is-3d[data-monster="dinosaur"] .me-adventure{background:#3d4a26}
.me-shell.is-3d[data-monster="dinosaur"] :is(.me-change-adventure,.me-change-chances,.me-round-count,.me-chances){background:#140f068c}
.me-shell.is-3d[data-monster="dinosaur"] :is(.me-change-adventure,.me-change-chances):hover:not(:disabled){background:#140f06b8}
.me-shell.is-3d[data-monster="dinosaur"] .me-chances{color:#ffd9c7}
.me-shell.is-3d[data-monster="dinosaur"] :is(.me-continue,.me-retry-round){background:linear-gradient(180deg,#ffd77e,#f2a12a);color:#2a1700;box-shadow:0 0 0 5px #ffb5472e,0 14px 34px #000a}
.me-shell.is-3d[data-monster="dinosaur"] .me-lesson{background:linear-gradient(180deg,#261f11,#140f08)}
.me-shell.is-3d[data-monster="dinosaur"] .me-passage{scrollbar-color:#5c4d2c transparent}
.me-shell.is-3d[data-monster="dinosaur"] .me-passage:focus-visible{outline-color:#ffb5478c}
.me-shell.is-3d[data-monster="dinosaur"] .me-letter.is-letter{background:#4d3f20;box-shadow:inset 0 -.15em 0 var(--me3d-cyan),inset 0 0 0 1px #ffb54745,0 0 14px #ffb54726}
.me-shell.is-3d[data-monster="dinosaur"] .me-letter.is-revealed{background:#283416;box-shadow:inset 0 -.15em 0 var(--me3d-good)}
.me-shell.is-3d[data-monster="dinosaur"] .me-letter.is-missed{background:#301a13}
.me-shell.is-3d[data-monster="dinosaur"] .me-key{border-color:#5f5030;background:linear-gradient(180deg,#3b3220,#2a2315);box-shadow:0 4px 0 #0c0905}
.me-shell.is-3d[data-monster="dinosaur"] .me-key:hover:not(:disabled){background:linear-gradient(180deg,#463b25,#32291a);border-color:var(--me3d-cyan);color:var(--me3d-cyan)}
.me-shell.is-3d[data-monster="dinosaur"] .me-key:active:not(:disabled){box-shadow:0 1px 0 #0c0905}
.me-shell.is-3d[data-monster="dinosaur"] .me-key.is-correct{background:linear-gradient(180deg,#3c6a20,#2b5116);border-color:var(--me3d-good);color:#e6ffd2;box-shadow:0 1px 0 #0c0905}
.me-shell.is-3d[data-monster="dinosaur"] .me-key.is-wrong{background:#1d1310;border-color:#5c2a22;color:#80524a;box-shadow:0 1px 0 #0c0905}
.me-shell.is-3d[data-monster="dinosaur"] .me-choice-dialog{background:#0c0804b3}
.me-shell[data-monster="dinosaur"] .me3d{background:radial-gradient(120% 90% at 50% 25%,#b9a777,#55623a 55%,#140f06)}
.me-shell[data-monster="dinosaur"] .me3d-meter{background:#140f0699}
.me-shell[data-monster="dinosaur"] .me3d-meter.is-boat b{color:#ffd77e}
.me-shell[data-monster="dinosaur"] .me3d.is-last .me3d-meter.is-shark{border-color:#ff5a3d99;box-shadow:0 0 16px #ff5a3d55}
.me-shell[data-monster="dinosaur"] .me3d-caption b{color:#fff7e6;text-shadow:0 3px 0 #1d1306,0 2px 22px #000a}
.me-shell[data-monster="dinosaur"] .me3d-caption span{color:#ffe0a3}
.me3d-loading[data-monster="dinosaur"]{background:radial-gradient(120% 80% at 50% 20%,#57502c,#100d07 70%)}
.me3d-loading[data-monster="dinosaur"]::before{background:linear-gradient(0deg,#100d07e6,#100d0759)}
.me3d-loading[data-monster="dinosaur"] .me3d-loading-card b{text-shadow:0 3px 0 #1d1306}
.me3d-loading[data-monster="dinosaur"] .me3d-loading-bar i{background:linear-gradient(90deg,#ffb54700,#ffb547,#ffe0a3)}
.me3d-loading[data-monster="dinosaur"] :is(.me3d-retry,.me3d-back){background:#2a2213}
.me3d-loading[data-monster="dinosaur"] .me3d-retry{background:#3d3018}
/* Alien planet in 3D (js/games/monsterescape-planet.js): the same sporty chrome in the colours of
   the planet at dusk: deep violet, crystal cyan for the letters, the rocket's warm orange. */
#activityPlayer[data-game="monsterescape"] .me-launch-scene.is-3d[data-monster="planet"],#activityPlayer[data-game="monsterescape"] #startArtwork:has(.me-launch-scene[data-monster="planet"]){background:#241a45}
.me-launch-scene.is-3d[data-monster="planet"] img{object-position:50% 40%}
#activityPlayer[data-game="monsterescape"] #startArtwork:has(.me-launch-scene[data-monster="planet"])+.start-content{background:linear-gradient(transparent 50%,#0b071899 85%)}
:is(.me-shell.is-3d,.me3d-loading)[data-monster="planet"]{--me3d-line:#3b2d66;--me3d-text:#f3eeff;--me3d-muted:#bba9ea;--me3d-cyan:#6fe9ff;--me3d-good:#8affc1}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="planet"]{background:#0b0718}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="planet"] .hud{background:#0b0718}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="planet"] .player-controls{background:#120c24;border-top-color:#3b2d66}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="planet"] #pauseBtn svg path{stroke:#120c24}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="planet"] #pScore{background:#1d1538;color:#f3eeff;border-color:#3b2d66}
#activityPlayer[data-game="monsterescape"][data-me3d="on"][data-me-world="planet"] .activity-clock{background:#0b0718cc}
.me-shell.is-3d[data-monster="planet"]{background:#0b0718}
.me-shell.is-3d[data-monster="planet"] .me-adventure{background:#241a45}
.me-shell.is-3d[data-monster="planet"] :is(.me-change-adventure,.me-change-chances,.me-round-count,.me-chances){background:#0b07188c}
.me-shell.is-3d[data-monster="planet"] :is(.me-change-adventure,.me-change-chances):hover:not(:disabled){background:#0b0718b8}
.me-shell.is-3d[data-monster="planet"] .me-chances{color:#ffd3f0}
.me-shell.is-3d[data-monster="planet"] :is(.me-continue,.me-retry-round){background:linear-gradient(180deg,#9af5ff,#3fc6e8);color:#06212a;box-shadow:0 0 0 5px #6fe9ff2e,0 14px 34px #000a}
.me-shell.is-3d[data-monster="planet"] .me-lesson{background:linear-gradient(180deg,#1d1538,#0e0a1e)}
.me-shell.is-3d[data-monster="planet"] .me-passage{scrollbar-color:#4b3c80 transparent}
.me-shell.is-3d[data-monster="planet"] .me-passage:focus-visible{outline-color:#6fe9ff8c}
.me-shell.is-3d[data-monster="planet"] .me-letter.is-letter{background:#3b2e70;box-shadow:inset 0 -.15em 0 var(--me3d-cyan),inset 0 0 0 1px #6fe9ff45,0 0 14px #6fe9ff26}
.me-shell.is-3d[data-monster="planet"] .me-letter.is-revealed{background:#13332c;box-shadow:inset 0 -.15em 0 var(--me3d-good)}
.me-shell.is-3d[data-monster="planet"] .me-letter.is-missed{background:#2e1530}
.me-shell.is-3d[data-monster="planet"] .me-key{border-color:#4b3c80;background:linear-gradient(180deg,#2a2050,#1c1538);box-shadow:0 4px 0 #07040f}
.me-shell.is-3d[data-monster="planet"] .me-key:hover:not(:disabled){background:linear-gradient(180deg,#33285e,#221a44);border-color:var(--me3d-cyan);color:var(--me3d-cyan)}
.me-shell.is-3d[data-monster="planet"] .me-key:active:not(:disabled){box-shadow:0 1px 0 #07040f}
.me-shell.is-3d[data-monster="planet"] .me-key.is-correct{background:linear-gradient(180deg,#1f6a5a,#154f43);border-color:var(--me3d-good);color:#dcfff0;box-shadow:0 1px 0 #07040f}
.me-shell.is-3d[data-monster="planet"] .me-key.is-wrong{background:#1a1024;border-color:#4e2a52;color:#7d5a85;box-shadow:0 1px 0 #07040f}
.me-shell.is-3d[data-monster="planet"] .me-choice-dialog{background:#06030eb3}
.me-shell[data-monster="planet"] .me3d{background:radial-gradient(120% 90% at 50% 25%,#b49ae6,#3d2b70 55%,#0b0718)}
.me-shell[data-monster="planet"] .me3d-meter{background:#0b071899}
.me-shell[data-monster="planet"] .me3d-meter.is-boat b{color:#ffb070}
.me-shell[data-monster="planet"] .me3d.is-last .me3d-meter.is-shark{border-color:#7dff8a99;box-shadow:0 0 16px #7dff8a55}
.me-shell[data-monster="planet"] .me3d-caption b{color:#f6f1ff;text-shadow:0 3px 0 #1a0f3a,0 2px 22px #000a}
.me-shell[data-monster="planet"] .me3d-caption span{color:#b8f6ff}
.me3d-loading[data-monster="planet"]{background:radial-gradient(120% 80% at 50% 20%,#3f2f73,#0b0718 70%)}
.me3d-loading[data-monster="planet"]::before{background:linear-gradient(0deg,#0b0718e6,#0b071859)}
.me3d-loading[data-monster="planet"] .me3d-loading-card b{text-shadow:0 3px 0 #1a0f3a}
.me3d-loading[data-monster="planet"] .me3d-loading-bar i{background:linear-gradient(90deg,#6fe9ff00,#6fe9ff,#d8fbff)}
.me3d-loading[data-monster="planet"] :is(.me3d-retry,.me3d-back){background:#1d1538}
.me3d-loading[data-monster="planet"] .me3d-retry{background:#2c2154}

/* Source: css/tictactoe.css; sha256: d3185389cd7e252882882b683bfcaad92868275f8c9c1e40c3dbac2ce9deb91e */
/* Original, tactile classroom board. Existing learning worlds supply the scenery and music. */
#activityPlayer[data-game=tictactoe]{--ttt-ink:var(--wk-card-ink,var(--style-ink,#173e54));--ttt-paper:var(--wk-card,var(--style-surface,#fffdf7));--ttt-edge:var(--wk-line,#376883);--ttt-drop:var(--wk-drop,#143b54);--ttt-x:#ad650b;--ttt-o:#326bb3;--ttt-radius:var(--wk-radius-sm,18px);--ttt-board:var(--wk-board,#ffffff24)}
#activityPlayer.game-shell[data-game=tictactoe]:not(:fullscreen){height:clamp(580px,46vw,680px)}
#activityPlayer[data-game=tictactoe] #gameStage{padding:clamp(10px,1.8cqw,24px) clamp(10px,3cqw,36px) clamp(10px,1.5cqw,20px);font-family:inherit}
#activityPlayer[data-game=tictactoe] .ttt-shell{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.1cqw,15px);position:relative;color:var(--ttt-ink);isolation:isolate}
.ttt-shell *{box-sizing:border-box}
/* Each player's colour, for their badge, their turn and the match result. */
#activityPlayer[data-game=tictactoe] :is(.ttt-team,.ttt-status,.ttt-final-team)[data-team=X]{--ttt-team:var(--ttt-x)}
#activityPlayer[data-game=tictactoe] :is(.ttt-team,.ttt-status,.ttt-final-team)[data-team=O]{--ttt-team:var(--ttt-o)}
.ttt-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;width:100%;max-width:1040px;margin:0 auto}
.ttt-team{display:flex;gap:8px;align-items:center;width:max-content;max-width:100%;min-height:44px;padding:5px 13px 5px 7px;border:2px solid color-mix(in srgb,var(--ttt-edge) 55%,#fff);border-radius:999px;background:var(--wk-card-flat,#fffdf7);color:var(--wk-flat-ink,var(--style-ink,#173e54));box-shadow:0 3px 0 var(--ttt-drop);font-family:inherit;font-weight:800;font-size:clamp(12px,1.55cqw,20px);line-height:1.2;text-align:start;cursor:pointer;touch-action:manipulation;transition:transform .18s ease,box-shadow .18s ease;position:relative}
.ttt-team-label{white-space:nowrap}
.ttt-team-caret{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ttt-team:disabled{cursor:default}
.ttt-team:enabled:hover{filter:brightness(1.035)}
.ttt-team[data-team=O]{justify-self:end}
.ttt-team.is-active{border-color:var(--ttt-team,var(--ttt-edge));box-shadow:0 3px 0 var(--ttt-drop),0 0 0 4px color-mix(in srgb,var(--ttt-team,#fff) 45%,transparent);transform:translateY(-1px)}
.ttt-team.is-active .ttt-team-symbol{box-shadow:0 0 0 2px currentColor}
.ttt-team-symbol,.ttt-challenge-team{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ttt-x);box-shadow:inset 0 0 0 1px #173e5425}
.ttt-team[data-team=O] .ttt-team-symbol{color:var(--ttt-o)}
.ttt-team-symbol svg,.ttt-challenge-team svg,.ttt-cell-mark svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Wins sit in their own badge, a cup and a number, apart from the player's name. */
.ttt-team-wins{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;padding:2px 8px 2px 6px;border-radius:999px;background:var(--ttt-team,#476a82);color:#fff;font-size:.82em;line-height:1.25;font-variant-numeric:tabular-nums}
.ttt-team-wins svg{display:block;width:1.05em;height:1.05em;flex:0 0 auto;fill:currentColor}
.ttt-team-wins b{font-weight:900}
.ttt-status{justify-self:center;margin:0!important;padding:7px 15px;line-height:1.2;text-align:center;font-size:clamp(15px,2cqw,25px);font-weight:800;color:var(--wk-pill-ink,var(--style-ink,#173e54));background:var(--wk-pill,var(--style-surface,#fffdf7));border-radius:999px;max-width:100%;white-space:nowrap;text-shadow:none!important}
/* The turn line wears the colour and symbol of the player it is about. */
.ttt-status{display:flex;align-items:center;justify-content:center;gap:.4em;transition:background-color .25s ease,color .25s ease}
.ttt-status[data-team=X],.ttt-status[data-team=O]{background:var(--ttt-team);color:#fff}
.ttt-status-symbol{display:none;flex:0 0 auto;width:1.5em;height:1.5em;padding:.2em;border-radius:50%;background:#fff;color:var(--ttt-team);box-shadow:0 0 0 2px #ffffffb3}
.ttt-status[data-team=X] .ttt-status-symbol,.ttt-status[data-team=O] .ttt-status-symbol{display:block}
.ttt-status-symbol svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ttt-status-text{min-width:0}
.ttt-board-wrap{min-width:0;min-height:0;position:relative;display:grid;place-items:center}
.ttt-board{width:100%;height:auto;aspect-ratio:1;max-width:100%;max-height:100%;min-height:0;position:relative;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(7px,1.2cqw,15px);padding:clamp(8px,1.2cqw,15px);border:var(--wk-board-line,2px solid #ffffffb3);border-radius:calc(var(--ttt-radius) + 10px);background:var(--ttt-board);box-shadow:var(--wk-board-shadow,0 8px 20px #102d4425)}
.ttt-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;gap:clamp(7px,1.2cqw,15px)}
.ttt-gridcell{min-width:0;min-height:0;position:relative}
.ttt-cell{position:relative;display:block;width:100%;height:100%;margin:0;padding:clamp(4px,.8cqw,10px);min-width:0;min-height:0;overflow:hidden;border:var(--wk-card-line,2px solid var(--ttt-edge));border-radius:var(--ttt-radius);background:var(--ttt-paper);background-image:var(--wk-card);color:var(--ttt-ink);box-shadow:var(--wk-card-drop,0 4px 0 var(--ttt-drop),0 6px 12px #102d4418);font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,box-shadow .16s ease;isolation:isolate}
.ttt-cell.has-picture{background:var(--wk-card-photo,var(--style-surface,#fffdf7));color:var(--wk-card-photo-ink,var(--style-ink,#173e54))}
.ttt-cell:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.025)}
.ttt-cell:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ttt-drop)}
.ttt-cell:disabled{opacity:1;cursor:default;color:inherit}
.ttt-cell.is-claimed{border-color:color-mix(in srgb,var(--ttt-ink) 40%,transparent)}
.ttt-cell.is-winning{outline:3px solid var(--wk-mark,#f6c24f);outline-offset:-3px}
.ttt-cell-face,.ttt-content{height:100%;width:100%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.ttt-content{flex-direction:column;gap:clamp(2px,.45cqw,5px)}
.ttt-picture{display:flex;justify-content:center;align-items:center;flex:1 1 0;min-height:0;width:100%;overflow:hidden}
.ttt-picture img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.ttt-content.has-text .ttt-picture{height:70%;flex:1 1 60%}
.ttt-text{display:block;max-width:100%;flex:0 1 auto;font-weight:800;text-align:center;font-size:clamp(17px,2.75cqw,37px);line-height:1.15;overflow-wrap:anywhere;white-space:pre-line;text-shadow:none;-webkit-text-stroke:0}
.ttt-text[data-length=medium]{font-size:clamp(14px,2.1cqw,28px);line-height:1.2}
.ttt-cell[data-length=long] .ttt-text{font-size:clamp(12px,1.65cqw,22px);line-height:1.23;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ttt-cell.has-picture .ttt-text{font-size:clamp(12px,1.8cqw,24px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex-shrink:0}
.ttt-cell-mark{position:absolute;inset:0;margin:auto;width:min(64%,100px);height:min(64%,100px);aspect-ratio:1;display:none;align-items:center;justify-content:center;border-radius:50%;padding:7%;background:#fff;color:var(--ttt-x);border:2px solid currentColor;box-shadow:0 3px 0 #173e5420,0 3px 12px #183e5430;z-index:2;pointer-events:none}
.ttt-cell[data-owner=X] .ttt-cell-mark,.ttt-cell[data-owner=O] .ttt-cell-mark{display:block}
.ttt-cell[data-owner=O] .ttt-cell-mark{color:var(--ttt-o)}
.ttt-cell.is-claimed .ttt-cell-face{opacity:.12}
.ttt-win-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible;opacity:.9}
/* A bold winning line with a dark edge; the game sets its width from the board (--ttt-line). */
.ttt-win-line path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ttt-win-line .ttt-win-line-main{stroke:var(--wk-mark,#f6c24f);stroke-width:var(--ttt-line,8px)}
.ttt-win-line .ttt-win-line-edge{stroke:var(--ttt-drop,#143b54);stroke-width:calc(var(--ttt-line,8px) + 5px);opacity:.5}
.ttt-shell[data-result=X] .ttt-win-line path,.ttt-shell[data-result=O] .ttt-win-line path{animation:ttt-connect .48s ease-out both}
.ttt-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:1040px;width:100%;margin:auto}
/* Fit the square to the stage's real height. The side rail uses the space that
   a landscape board cannot use without turning its cells into rectangles. */
#activityPlayer[data-game=tictactoe] .ttt-shell[data-layout=side]{grid-template-columns:minmax(0,1fr) clamp(150px,22cqw,220px);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(16px,3cqw,36px)}
.ttt-shell[data-layout=side] .ttt-board-wrap{grid-column:1;grid-row:1 / 3}
.ttt-shell[data-layout=side] .ttt-heading{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0}
.ttt-shell[data-layout=side] .ttt-team{width:100%;justify-content:center;padding:6px 10px;font-size:clamp(15px,1.8cqw,22px)}
.ttt-shell[data-layout=side] .ttt-team-label{display:inline}
.ttt-shell[data-layout=side] .ttt-team-symbol{width:36px;height:36px}
.ttt-shell[data-layout=side] .ttt-status{font-size:clamp(16px,2cqw,24px);white-space:normal;width:100%;padding:9px 6px}
.ttt-shell[data-layout=side] .ttt-footer{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.ttt-shell[data-layout=side] .ttt-round-label{order:-1;align-self:center}
.ttt-shell[data-layout=side] .ttt-next-actions{display:flex;flex-direction:column;align-items:stretch}
.ttt-shell[data-layout=side] :is(.ttt-small,.ttt-rematch){min-height:44px;font-size:15px}
.ttt-round-label{font-size:clamp(12px,1.3cqw,16px);line-height:1.2;font-weight:800;border-radius:999px;background:var(--wk-pill,var(--style-surface,#fffdf7));color:var(--wk-pill-ink,var(--style-ink,#173e54));padding:5px 10px;white-space:nowrap}
.ttt-next-actions{display:flex;align-items:center;gap:8px}
.ttt-shell :is(.ttt-small,.ttt-rematch,.ttt-claim,.ttt-listen,.ttt-cancel){display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:40px;padding:7px 12px;font:800 clamp(12px,1.35cqw,17px)/1.15 var(--activity-font,inherit);border:var(--wk-btn-line,2px solid var(--ttt-edge));border-radius:12px;color:var(--wk-ghost-ink,var(--style-ink,#173e54));background:var(--wk-ghost,var(--style-surface,#fffdf7));box-shadow:0 2px 0 var(--ttt-drop);cursor:pointer;text-shadow:none;white-space:nowrap;touch-action:manipulation}
.ttt-shell :is(.ttt-small,.ttt-rematch,.ttt-claim,.ttt-listen,.ttt-cancel) svg{width:19px;height:19px;flex:0 0 auto}
.ttt-shell .ttt-small:disabled{opacity:.55;cursor:default;box-shadow:none}
.ttt-shell :is(.ttt-rematch,.ttt-claim){background:var(--wk-btn,#246e98);color:var(--wk-btn-ink,#fff);box-shadow:var(--wk-btn-drop,0 3px 0 var(--ttt-drop))}
.ttt-shell :is(button):focus-visible{outline:3px solid var(--wk-mark,#f6c24f);outline-offset:3px}
.ttt-shell .ttt-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ttt-shell .ttt-challenge{--ttt-turn-content-height:120px;position:absolute;inset:0;z-index:10;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:14px;border:0;border-radius:20px;background:#102a4d38;overflow:hidden;color:var(--ttt-ink)}
.ttt-shell .ttt-challenge[open]{display:grid;place-items:center}
#activityPlayer[data-game=tictactoe][data-world-kit][data-phase] #gameStage .ttt-shell .ttt-challenge{background:color-mix(in srgb,var(--wk-drop,#102a4d) 22%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.ttt-challenge[data-kind=picture]{--ttt-turn-content-height:210px}
.ttt-challenge[data-kind=mixed]{--ttt-turn-content-height:220px}
.ttt-challenge[data-length=medium]{--ttt-turn-content-height:180px}
.ttt-challenge[data-length=long]{--ttt-turn-content-height:230px}
.ttt-challenge::backdrop{display:none}
.ttt-challenge-card{display:flex;flex-direction:column;width:min(460px,100%);height:auto;max-height:100%;min-height:0;margin:0;padding:16px;border:var(--wk-panel-border,3px solid var(--ttt-edge));border-radius:var(--wk-radius,22px);background:var(--wk-panel,var(--style-surface,#fffdf7));box-shadow:var(--wk-panel-shadow,0 8px 20px #102a4d4a);color:var(--wk-ink,var(--ttt-ink));gap:12px}
.ttt-challenge-heading{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:44px}
.ttt-challenge-team{width:34px;height:34px;border:2px solid currentColor}
.ttt-challenge[data-team=O] .ttt-challenge-team{color:var(--ttt-o)}
.ttt-challenge-heading h2{flex:1;min-width:0;margin:0;padding:0;font-size:20px;font-weight:800;line-height:1.2;color:inherit;text-shadow:none}
.ttt-shell .ttt-cancel,.ttt-shell .ttt-listen{flex:0 0 44px;min-width:44px;width:44px;height:44px;min-height:44px;padding:10px;border-radius:50%}
.ttt-shell .ttt-cancel{border:0;background:transparent;box-shadow:none;color:inherit}
.ttt-shell .ttt-listen{border:1px solid currentColor;box-shadow:none}
.ttt-listen>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ttt-challenge-content{min-height:0;flex:0 1 var(--ttt-turn-content-height);height:var(--ttt-turn-content-height);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;border-radius:var(--ttt-radius);background:var(--wk-card-photo,var(--style-surface,#fffdf7));color:var(--wk-card-photo-ink,var(--style-ink,#173e54))}
.ttt-challenge .ttt-content{height:100%;gap:10px}
.ttt-challenge .ttt-picture{max-height:100%;flex:1 1 0}
.ttt-challenge .ttt-text{font-size:42px;line-height:1.23;max-height:100%;overflow-wrap:anywhere}
.ttt-challenge .ttt-text[data-length=medium]{font-size:30px;line-height:1.3}
.ttt-challenge .ttt-text[data-length=long]{font-size:20px;line-height:1.4;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:left;padding:3px}
.ttt-challenge .ttt-content.has-picture.has-text .ttt-text{flex:0 1 auto;font-size:28px;max-height:45%;overflow:auto;scrollbar-width:thin}
.ttt-challenge[data-length=long] .ttt-content.has-picture{flex-direction:row;gap:12px}
.ttt-challenge[data-length=long] .ttt-content.has-picture .ttt-picture{width:30%;height:100%;flex:0 0 30%}
.ttt-challenge[data-length=long] .ttt-content.has-picture .ttt-text{flex:1;max-height:100%;font-size:20px}
.ttt-listen.is-listening{outline:3px solid var(--wk-mark,#f6c24f);outline-offset:2px}
.ttt-challenge-actions{display:grid;grid-template-columns:1fr;gap:10px;flex:0 0 auto}
.ttt-shell .ttt-claim{min-height:48px;font-size:17px}
.ttt-shell .ttt-claim svg{width:25px;height:25px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.ttt-claim-symbol{display:inline-flex;flex:0 0 auto}
/* A small token palette belongs to the game, and never interrupts a turn. */
.ttt-shell .ttt-symbol-picker{position:absolute;inset:0;z-index:11;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:12px;border:0;border-radius:20px;background:color-mix(in srgb,var(--wk-drop,#102a4d) 22%,transparent);color:var(--wk-ink,var(--ttt-ink));overflow:hidden}
.ttt-shell .ttt-symbol-picker[open]{display:grid;place-items:center}
.ttt-symbol-picker::backdrop{display:none}
.ttt-symbol-card{display:flex;flex-direction:column;width:min(440px,100%);max-height:100%;min-height:0;margin:0;padding:16px;gap:12px;border:var(--wk-panel-border,3px solid var(--ttt-edge));border-radius:var(--wk-radius,22px);background:var(--wk-panel,var(--style-surface,#fffdf7));box-shadow:var(--wk-panel-shadow,0 8px 20px #102a4d4a)}
.ttt-symbol-card>header{display:flex;align-items:center;gap:12px;flex:0 0 44px}
.ttt-symbol-card h2{flex:1;margin:0;font:800 20px/1.25 var(--activity-font,inherit);color:inherit;text-shadow:none}
.ttt-symbol-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
.ttt-symbol-close svg{width:22px;height:22px}
.ttt-symbol-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:0;overflow-y:auto;padding:3px;overscroll-behavior:contain}
.ttt-symbol-option{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:82px;padding:6px 3px;border:2px solid transparent;border-radius:13px;background:var(--wk-card-flat,#fffdf7);color:var(--ttt-x);font:800 13px/1.25 var(--activity-font,inherit);cursor:pointer;touch-action:manipulation}
.ttt-symbol-picker[data-team=O] .ttt-symbol-option{color:var(--ttt-o)}
.ttt-symbol-option svg{display:block;width:43px;height:43px;max-width:100%;flex:0 0 43px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ttt-symbol-option>span{color:var(--wk-flat-ink,var(--style-ink,#173e54));max-width:100%}
.ttt-symbol-option[aria-pressed=true]{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.ttt-symbol-option:not(:disabled):hover{border-color:currentColor}
.ttt-symbol-option:disabled{opacity:.32;cursor:default}
.ttt-image-fallback{padding:8px;text-align:center;line-height:1.3;font-size:clamp(13px,1.6cqw,19px);font-weight:700;color:inherit}
.ttt-picture.image-error{background:repeating-linear-gradient(135deg,#173e5408 0 10px,transparent 10px 20px);border-radius:8px}
.ttt-cell.just-claimed .ttt-cell-mark{animation:ttt-stamp .35s cubic-bezier(.19,1,.22,1)}
.ttt-cell.just-claimed .ttt-stroke{stroke-dasharray:100;animation:ttt-draw .38s ease-out both}
/* One celebration, built around the symbol the children chose. It lives inside
   the square board, never covers the controls, and leaves the winning line. */
.ttt-victory{--ttt-victor:var(--ttt-x);position:absolute;inset:0;z-index:5;overflow:hidden;border-radius:inherit;pointer-events:none!important;user-select:none;isolation:isolate}
.ttt-victory[data-result=O]{--ttt-victor:var(--ttt-o)}
.ttt-victory *{pointer-events:none!important}
.ttt-victory-halo{position:absolute;left:50%;top:50%;width:95%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff9 0,#fff5 25%,color-mix(in srgb,var(--wk-mark,#ffd66b) 35%,transparent) 48%,transparent 71%);transform:translate(-50%,-50%);animation:ttt-victory-halo 2.9s ease-out both}
.ttt-victory-seal{position:absolute;left:50%;top:50%;width:86%;display:grid;justify-items:center;gap:0;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 4px #102d4438);z-index:2;animation:ttt-victory-seal 2.9s both}
.ttt-victory-crown{position:relative;width:min(76%,260px);aspect-ratio:1.2;margin-bottom:-8px}
.ttt-victory-laurel{display:block;width:100%;height:100%;overflow:visible;fill:var(--wk-mark,#ffd66b);color:var(--wk-mark,#ffd66b);filter:drop-shadow(0 2px 0 color-mix(in srgb,var(--ttt-victor) 65%,#173e54));animation:ttt-victory-laurel 2.9s both}
.ttt-victory-medal{position:absolute;left:25%;top:18%;width:50%;aspect-ratio:1;display:grid;place-items:center;padding:11%;border:clamp(3px,.6cqw,7px) solid #ffd66b;border-radius:50%;color:var(--ttt-x);background:var(--wk-card-flat,#fffdf7);box-shadow:0 4px 0 color-mix(in srgb,var(--ttt-victor) 70%,#173e54),inset 0 0 0 2px #fff;overflow:hidden}
.ttt-victory-medal[data-team=O]{color:var(--ttt-o)}
.ttt-victory-medal svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ttt-victory-medal::after{content:"";position:absolute;inset:-30% auto -30% -55%;width:35%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:rotate(25deg);animation:ttt-victory-shine 2.9s both}
.ttt-victory-label{position:relative;max-width:100%;padding:10px 24px;text-align:center;font-family:var(--activity-font,inherit);font-weight:900;font-size:clamp(22px,3.5cqw,40px);line-height:1.2;white-space:nowrap;color:var(--wk-btn-ink,#fff);background:var(--wk-btn,#246e98);border:var(--wk-btn-line,2px solid var(--ttt-edge));border-radius:var(--wk-radius-sm,12px);box-shadow:var(--wk-btn-drop,0 4px 0 var(--ttt-drop));text-shadow:none}
.ttt-victory-label::before,.ttt-victory-label::after{content:"";position:absolute;top:28%;width:23px;height:80%;background:var(--wk-btn,#246e98);filter:brightness(.8);z-index:-1}
.ttt-victory-label::before{right:calc(100% - 3px);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,25% 50%)}
.ttt-victory-label::after{left:calc(100% - 3px);clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%)}
.ttt-victory-particle{position:absolute;left:50%;top:50%;width:clamp(12px,2.1cqw,24px);aspect-ratio:1;color:var(--wk-mark,#ffd66b);opacity:0;animation:ttt-victory-flight 1.8s cubic-bezier(.16,.67,.35,1) both;animation-delay:var(--ttt-burst-delay);filter:drop-shadow(0 1px 1px #173e5460);z-index:1}
.ttt-victory-particle[data-kind=symbol]{width:clamp(22px,3.4cqw,36px);color:var(--ttt-victor)}
.ttt-victory-particle:nth-child(4n){color:#fff}
.ttt-victory-particle svg{width:100%;height:100%;display:block;fill:currentColor;stroke:#fff;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ttt-cell.is-celebrating .ttt-cell-mark{animation:ttt-winning-token .7s cubic-bezier(.2,.7,.25,1) both;animation-delay:calc(var(--ttt-win-order,0) * 110ms)}
.ttt-victory[data-result=draw] .ttt-victory-crown{width:min(72%,220px);aspect-ratio:1.6;margin-bottom:8px}
.ttt-victory[data-result=draw] .ttt-victory-medal{left:7%;top:10%;width:46%;padding:9%;transform:rotate(-8deg)}
.ttt-victory[data-result=draw] .ttt-victory-medal[data-team=O]{left:47%;transform:rotate(8deg)}
.ttt-victory[data-result=draw] .ttt-victory-laurel{display:none}
.ttt-victory[data-result=draw] .ttt-victory-seal{animation-name:ttt-draw-seal}
.ttt-victory[data-result=draw] .ttt-victory-halo{background:radial-gradient(circle,#fff8 0,#fff3 40%,transparent 68%)}
.ttt-victory[data-motion=reduced] *,.ttt-victory[data-motion=reduced] .ttt-victory-medal::after{animation:none!important}
#activityPlayer[data-paused=true] .ttt-victory *,#activityPlayer[data-paused=true] .ttt-victory-medal::after,#activityPlayer[data-paused=true] .ttt-cell.is-celebrating .ttt-cell-mark,#activityPlayer[data-paused=true] .ttt-win-line path{animation-play-state:paused!important}
@keyframes ttt-winning-token{0%,100%{transform:scale(1) rotate(0)}30%{transform:translateY(-7px) scale(1.18) rotate(-8deg)}60%{transform:translateY(2px) scale(.97) rotate(5deg)}}
@keyframes ttt-victory-halo{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.45)}28%,76%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes ttt-victory-seal{0%,12%{opacity:0;transform:translate(-50%,-42%) scale(.38) rotate(-8deg)}24%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}32%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-56%) scale(.88)}}
@keyframes ttt-draw-seal{0%,8%{opacity:0;transform:translate(-50%,-45%) scale(.85)}24%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-52%) scale(.97)}}
@keyframes ttt-victory-laurel{0%,15%{opacity:0;transform:scale(.65) rotate(-12deg)}30%,100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ttt-victory-shine{0%,30%{left:-55%;opacity:0}35%{opacity:.9}55%,100%{left:130%;opacity:0}}
@keyframes ttt-victory-flight{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}12%{opacity:1}68%{opacity:1}100%{opacity:0;transform:translate(calc(var(--ttt-flight-x) - 50%),calc(var(--ttt-flight-y) + var(--ttt-flight-fall) - 50%)) scale(.75) rotate(var(--ttt-spin))}}
.ttt-shell.is-dealing .ttt-cell{animation:ttt-deal .38s cubic-bezier(.18,.8,.25,1) backwards;animation-delay:calc(var(--ttt-order,0) * 28ms)}
.ttt-row:nth-child(1) .ttt-gridcell:nth-child(2){--ttt-order:1}.ttt-row:nth-child(1) .ttt-gridcell:nth-child(3){--ttt-order:2}.ttt-row:nth-child(2) .ttt-gridcell:nth-child(1){--ttt-order:3}.ttt-row:nth-child(2) .ttt-gridcell:nth-child(2){--ttt-order:4}.ttt-row:nth-child(2) .ttt-gridcell:nth-child(3){--ttt-order:5}.ttt-row:nth-child(3) .ttt-gridcell:nth-child(1){--ttt-order:6}.ttt-row:nth-child(3) .ttt-gridcell:nth-child(2){--ttt-order:7}.ttt-row:nth-child(3) .ttt-gridcell:nth-child(3){--ttt-order:8}
@keyframes ttt-deal{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ttt-stamp{from{opacity:0;transform:scale(1.45) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes ttt-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes ttt-connect{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
#activityPlayer[data-game=tictactoe][data-world-kit=space-adventure]{--ttt-radius:12px;--ttt-board:linear-gradient(135deg,#111745e6,#254175aa)}
#activityPlayer[data-game=tictactoe][data-world-kit=quiz-show-studio]{--ttt-radius:16px;--ttt-board:linear-gradient(180deg,#6823a357,#221056a6)}
#activityPlayer[data-game=tictactoe][data-world-kit=dinosaur-valley]{--ttt-board:linear-gradient(135deg,#f6e2b391,#a3c98966);--ttt-radius:22px}
#activityPlayer[data-game=tictactoe][data-world-kit=chalkboard-classroom]{--ttt-board:linear-gradient(135deg,#f8e1baae,#d8bf99a8);--ttt-radius:12px}
#activityPlayer[data-game=tictactoe][data-world-kit=lunar-new-year]{--ttt-board:linear-gradient(180deg,#8c1d31cf,#551b3eab);--ttt-radius:17px}
#activityPlayer[data-game=tictactoe][data-world-kit=safari-savanna]{--ttt-board:linear-gradient(150deg,#e7b978b3,#b27a4661);--ttt-radius:24px}
#activityPlayer[data-game=tictactoe][data-world-kit=ocean-adventure]{--ttt-board:linear-gradient(145deg,#d5fcf55c,#4fcce63b);--ttt-radius:20px}
#activityPlayer[data-game=tictactoe][data-world-kit=polar-expedition]{--ttt-board:linear-gradient(160deg,#ffffffb8,#bfe2f8a6);--ttt-radius:22px}
#activityPlayer[data-game=tictactoe][data-world-kit=farm-friends]{--ttt-board:linear-gradient(150deg,#fbe7a8b3,#d9a83a66);--ttt-radius:14px}
#activityPlayer[data-game=tictactoe][data-world-kit=pirate-island]{--ttt-board:linear-gradient(150deg,#f6dfa6c4,#c9905a73);--ttt-radius:12px}
#activityPlayer[data-game=tictactoe][data-world-kit=fairytale-castle]{--ttt-board:linear-gradient(150deg,#ffffffad,#e6d6ff99);--ttt-radius:26px}
#activityPlayer[data-game=tictactoe][data-world-kit=superhero-city]{--ttt-board:linear-gradient(150deg,#ffffffcc,#c8ecffa6);--ttt-radius:12px}
#activityPlayer[data-game=tictactoe][data-world-kit=halloween-night]{--ttt-board:linear-gradient(150deg,#fffaf0d9,#e9dcffb3);--ttt-radius:22px}
#activityPlayer[data-game=tictactoe][data-world-kit=sports-day]{--ttt-board:linear-gradient(150deg,#ffffffd9,#d8f4ffb3);--ttt-radius:18px}
#activityPlayer[data-game=tictactoe][data-world-kit=construction-site]{--ttt-board:linear-gradient(150deg,#fffdf6d9,#fff3d0b3);--ttt-radius:12px}
/* The end screen shows the match in the players' own symbols, in place of a score (★ 2 – 1 ☾). */
#activityPlayer[data-game=tictactoe] .ttt-final{display:flex;align-items:center;justify-content:center;gap:.28em;font:inherit;line-height:1.25;color:inherit}
#activityPlayer[data-game=tictactoe] .ttt-final b{font:inherit}
#activityPlayer[data-game=tictactoe] .ttt-final-team{display:block;width:.95em;height:.95em;padding:.15em;border-radius:50%;background:#fff;color:var(--ttt-team);box-shadow:inset 0 0 0 .06em currentColor}
#activityPlayer[data-game=tictactoe] .ttt-final-team svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#activityPlayer[data-game=tictactoe] .ttt-final-dash{opacity:.5;font-style:normal;font-weight:400}
.ttt-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ttt-review-square{min-height:100px;padding:10px;border:1px solid #31536d25;border-radius:12px;background:#fff;color:#173e54}
.ttt-review-square .ttt-picture{height:80px;flex:0 0 80px}.ttt-review-square .ttt-text{font-size:16px!important}
.ttt-editor-intro{margin:0 0 20px;color:#567089;font-size:15px;line-height:1.6}
.ttt-editor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ttt-editor-grid .ttt-editor-square{position:relative;min-width:0;padding:18px 16px;border:1px solid #cddce8;border-radius:15px;background:#f7fafc}
.ttt-editor-square .editor-field{min-width:0}.ttt-editor-square .editor-input-box{min-width:0}.ttt-editor-square .content-input{min-height:65px;resize:vertical;font-size:17px}
.ttt-editor-square .field-format-tools{margin-top:7px}.ttt-editor-square .item-reorder{position:absolute;right:10px;top:8px}
.editor-page .ttt-editor-grid .ttt-editor-square{margin:0;padding:18px 16px}
.editor-page .ttt-editor-square .item-panel{padding:0;border:0;border-radius:0;background:transparent}
.editor-page .ttt-editor-square .editor-field>label{padding-right:36px;font-weight:700;min-height:28px}
.editor-page .ttt-editor-square .item-actions{position:absolute;right:10px;top:12px;left:auto;margin:0;display:block}
.editor-page .ttt-editor-square .item-actions .item-reorder{position:static;width:32px;height:32px;padding:6px}
.editor-page .ttt-editor-square .editor-input-box{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:stretch;min-width:0}
.editor-page .ttt-editor-square .editor-input-box>.content-input{grid-column:1;grid-row:1;min-height:72px;width:100%;resize:vertical;font-size:17px;line-height:1.45}
.editor-page .ttt-editor-square .editor-input-box>.field-media{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-self:start;padding:0}
.editor-page .ttt-editor-square .field-media-btn{width:44px;height:44px}
.editor-page .ttt-editor-square .has-picture .editor-input-box>.field-picture{grid-column:1;grid-row:1;justify-self:stretch;justify-content:center;min-height:106px;width:100%;max-width:100%;margin:0;padding:8px 38px 8px 8px;border:0;border-bottom:1px solid #d8e3eb}
.editor-page .ttt-editor-square .field-picture img{max-width:100%;max-height:110px;width:auto;height:auto;object-fit:contain}
.editor-page .ttt-editor-square .has-picture .editor-input-box>.content-input{grid-column:1;grid-row:2;min-height:65px}
@media(max-width:620px){#activityPlayer.game-shell[data-game=tictactoe]:not(:fullscreen){height:600px;--player-utility-height:52px}}
@media(max-width:1050px){.ttt-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ttt-editor-grid{grid-template-columns:1fr}.ttt-editor-square .content-input{min-height:58px}}
@container(max-width:620px){
  #activityPlayer[data-game=tictactoe] #gameStage{padding:12px 8px 10px}
  .ttt-heading{gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}.ttt-team{gap:5px;padding:4px 8px;font-size:14px;min-height:44px;width:100%;justify-content:center}.ttt-team[data-team=X]{grid-column:1;grid-row:1}.ttt-team[data-team=O]{grid-column:2;grid-row:1}.ttt-team-symbol{width:27px;height:27px}.ttt-team-wins{min-width:10px}.ttt-heading .ttt-status{grid-column:1 / 3;grid-row:2}
  .ttt-status{font-size:16px;padding:6px 10px}.ttt-board{padding:8px;gap:9px;border-width:2px;border-radius:20px}.ttt-row{gap:9px}.ttt-cell{border-width:2px;border-radius:13px;padding:5px}
  .ttt-cell .ttt-text{font-size:18px}.ttt-cell .ttt-text[data-length=medium]{font-size:14px}.ttt-cell[data-length=long] .ttt-text{font-size:12px;-webkit-line-clamp:4}.ttt-cell.has-picture .ttt-text{font-size:13px;line-height:1.12}
  .ttt-shell :is(.ttt-small,.ttt-rematch){font-size:12px;min-height:38px;padding:6px 8px;gap:4px}.ttt-shell .ttt-small svg{width:17px;height:17px}.ttt-round-label{font-size:11px;padding:4px 8px}.ttt-footer{gap:5px}.ttt-next-actions{gap:5px}
  .ttt-shell .ttt-challenge{padding:10px;border-radius:18px}.ttt-challenge-card{padding:12px;gap:10px;border-width:2px;border-radius:17px}.ttt-challenge-heading h2{font-size:18px}.ttt-challenge-team{width:30px;height:30px}
  .ttt-challenge .ttt-text{font-size:34px}.ttt-challenge .ttt-text[data-length=medium]{font-size:25px}.ttt-challenge .ttt-text[data-length=long]{font-size:20px}.ttt-challenge .ttt-content.has-picture.has-text .ttt-text{font-size:24px}.ttt-challenge[data-length=long] .ttt-content.has-picture .ttt-text{font-size:20px}
  .ttt-shell .ttt-claim{font-size:16px;min-height:48px;padding:7px}
  .ttt-symbol-card{padding:12px;gap:8px}.ttt-symbol-card h2{font-size:18px}.ttt-symbol-option{font-size:12px;min-height:76px}.ttt-symbol-option svg{width:40px;height:40px;flex-basis:40px}
}
@media(max-height:520px) and (min-width:621px){
  #activityPlayer[data-game=tictactoe]:fullscreen #gameStage{padding:8px 12px}
  #activityPlayer[data-game=tictactoe]:fullscreen .ttt-shell[data-layout=side]{column-gap:18px;grid-template-columns:minmax(0,1fr) 180px}
  /* Use scarce landscape height for the lesson, not repeated frame padding.
     This keeps normal vocabulary intact at the readable text-size floor. */
  #activityPlayer[data-game=tictactoe]:fullscreen .ttt-board{padding:6px;gap:6px}
  #activityPlayer[data-game=tictactoe]:fullscreen .ttt-row{gap:6px}
  #activityPlayer[data-game=tictactoe]:fullscreen .ttt-cell{padding:2px}
  .ttt-shell[data-layout=side] .ttt-heading{gap:5px}.ttt-shell[data-layout=side] .ttt-team{padding:3px 8px;font-size:15px}.ttt-shell[data-layout=side] .ttt-team-symbol{width:28px;height:28px}.ttt-shell[data-layout=side] .ttt-status{font-size:16px;padding:5px}
  .ttt-shell[data-layout=side] .ttt-footer,.ttt-shell[data-layout=side] .ttt-next-actions{gap:5px}.ttt-shell[data-layout=side] .ttt-round-label{font-size:11px;padding:3px 7px}
  .ttt-shell[data-layout=side] .ttt-footer{display:grid;grid-template-columns:1fr 1fr}.ttt-shell[data-layout=side] .ttt-round-label{grid-column:1 / 3;justify-self:center}.ttt-shell[data-layout=side] .ttt-next-actions{display:contents}.ttt-shell[data-layout=side] .ttt-rematch{grid-column:1 / 3;grid-row:2}.ttt-shell[data-layout=side] .ttt-small{padding:5px;font-size:12px}
  .ttt-shell .ttt-challenge{padding:8px}.ttt-challenge-card{padding:12px;gap:8px}
  .ttt-challenge[data-kind=mixed] .ttt-content{flex-direction:row;gap:12px}
  .ttt-challenge[data-kind=mixed] .ttt-picture{height:100%;width:42%;flex:0 0 42%}
  .ttt-challenge[data-kind=mixed] .ttt-text{flex:1;max-height:100%}
  .ttt-challenge[data-length=long] .ttt-content.has-picture .ttt-picture{width:30%;flex-basis:30%}
}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .ttt-shell *{animation:none!important;transition:none!important}}
:where(:root[data-reduce-motion]) .ttt-shell *{animation:none!important;transition:none!important}
.ttt-shell [hidden]{display:none!important}

/* Source: css/lettertracing.css; sha256: 15ccacbcff9db85760c770452e00e9cc87b9b57f04601ab1d540f2b71ba0f748 */
/* Original, quiet writing garden. The letter stays the strongest visual on the screen. */
#activityPlayer[data-game=lettertracing]{--lt-ink:#284940;--lt-blue:#367ea8;--lt-green:#367960;--lt-paper:#fffcf2;background:#e7efdf!important;color:var(--lt-ink);font-family:"ClassPlay Round","PingFang SC","Microsoft YaHei",sans-serif}
#activityPlayer[data-game=lettertracing] #gameStage{padding:14px 18px;overflow:hidden;background:linear-gradient(155deg,#edf3e7,#dae9e0);color:var(--lt-ink);font-family:inherit}
#activityPlayer[data-game=lettertracing].game-shell:not(:fullscreen){height:clamp(610px,47vw,720px)}
#activityPlayer[data-game=lettertracing] .scene-decor,#activityPlayer[data-game=lettertracing] .cp-world-scene,#activityPlayer[data-game=lettertracing] .world-scene{display:none}
.lt-shell,.lt-shell *{box-sizing:border-box}
.lt-shell{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) 65px;gap:12px;position:relative;isolation:isolate;color:#284940;text-shadow:none;--lt-ink:#284940;--lt-blue:#367ea8;--lt-green:#367960}
.lt-heading{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;z-index:1;min-width:0}
.lt-current-letter{height:52px;background:#fffcf2;border-radius:15px;box-shadow:0 2px 0 #b5c9b7;color:var(--lt-ink)}
.lt-current-letter svg{height:100%;width:100%}
.lt-lesson-picker{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;padding:3px 3px 6px;min-width:0;scroll-snap-type:x proximity}
.lt-lesson-picker button{position:relative;flex:0 0 41px;height:45px;margin:0;padding:2px;border:1px solid #c3d2c6;border-radius:12px;background:#f9fcf6;color:#456255;cursor:pointer;scroll-snap-align:center;box-shadow:0 2px 0 #c4d2c3}
.lt-lesson-picker button svg{width:100%;height:100%;display:block}
.lt-lesson-picker button[aria-pressed=true]{background:#fffef9;border:2px solid var(--lt-green);box-shadow:0 2px 0 var(--lt-green)}
.lt-lesson-picker button.is-done::after{content:"";position:absolute;right:0;top:-2px;width:9px;height:9px;background:#4f9a70;border:2px solid #fff;border-radius:50%}
.lt-lesson-count{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lt-workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:20px;align-items:center;position:relative;z-index:1;width:100%;max-width:780px;justify-self:center}
.lt-paper{height:100%;min-height:0;position:relative;border:1px solid #d5ddcd;border-radius:22px;background:#fffcf2;box-shadow:0 5px 0 #c5d1bd,0 12px 28px #37544416;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:12px 16px 9px}
.lt-paper::before{content:"";position:absolute;top:0;left:22px;bottom:0;border-left:1px solid #e7c8bf;opacity:.7;pointer-events:none}
.lt-pad{display:block;width:100%;height:100%;min-height:0;flex:1;max-width:440px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;overflow:visible;outline-offset:-3px}
.lt-guidelines path{fill:none;stroke:#b9d4e0;stroke-width:.6;pointer-events:none}
.lt-guidelines path:nth-child(1){stroke-dasharray:2 2}
.lt-guidelines .lt-baseline{stroke:#d6b1a2;stroke-width:.8}
.lt-guides path{fill:none;stroke:#d0d3c6;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.lt-guides path.is-current{stroke:#b6c7cc}
.lt-ink path{fill:none;stroke:var(--lt-blue);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.lt-direction{pointer-events:none}
.lt-direction path{fill:none;stroke:var(--lt-green);stroke-width:2.5;stroke-linecap:round}
.lt-start-ring{fill:#fffcf2;fill-opacity:.9;stroke:var(--lt-green);stroke-width:1.5}
.lt-start-dot{fill:var(--lt-green)}
.lt-demo{pointer-events:none;display:none}
.lt-demo-strokes path{fill:none;stroke:var(--lt-blue);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.lt-demo-pencil{filter:drop-shadow(1px 1px 1px #28494026)}
.lt-shell[data-watching=true] .lt-ink{opacity:.12}
.lt-shell[data-watching=true] .lt-guides{opacity:.55}
.lt-stroke-dots{height:8px;display:flex;gap:6px;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
.lt-stroke-dots i{width:6px;height:6px;border-radius:50%;background:#d1d7cb}
.lt-stroke-dots i.is-current{background:#639680;box-shadow:0 0 0 2px #63968026}
.lt-stroke-dots i.is-done{background:var(--lt-blue)}
.lt-pad-hint{flex-shrink:0;margin:0!important;min-height:21px;line-height:1.2;font-size:15px;font-weight:500;color:#516b60;text-align:center}
.lt-pad-complete{opacity:0;transform-origin:104px -8px;transition:opacity .2s,transform .25s;transform:scale(.3)}
.lt-pad-complete circle{fill:#e0f0d9;stroke:#6f9d68;stroke-width:1}
.lt-pad-complete path{fill:none;stroke:#367960;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lt-shell[data-complete=true] .lt-pad-complete{opacity:1;transform:scale(1)}
.lt-toolbox{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.lt-shell button{font:inherit;touch-action:manipulation}
.lt-toolbox button,.lt-finish,.lt-opening-skip{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:12px 8px;min-height:48px;border:1px solid #a9c3b3;border-radius:16px;background:#fffdf3;color:#284940;box-shadow:0 3px 0 #a7bca7;font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.lt-toolbox button svg,.lt-finish svg,.lt-opening-skip svg{width:21px;height:21px;flex-shrink:0}
.lt-toolbox .lt-next{margin-top:7px;color:#fff;background:#367960;border-color:#27654d;box-shadow:0 3px 0 #23553f}
.lt-toolbox button:disabled{opacity:.48;cursor:default;box-shadow:none}
.lt-toolbox button[aria-pressed=true]{background:#e7f0e1;border:2px solid #367960}
.lt-toolbox button:hover:not(:disabled),.lt-finish:hover{transform:translateY(-1px)}
.lt-toolbox button:active:not(:disabled),.lt-finish:active{transform:translateY(2px);box-shadow:0 1px 0 #a7bca7}
.lt-shell button:focus-visible,.lt-pad:focus-visible,.lt-editor button:focus-visible{outline:3px solid #367ea8;outline-offset:3px}
.lt-shell [hidden]{display:none!important}
.lt-sprig{position:absolute;bottom:35px;z-index:-1;width:130px;height:180px;pointer-events:none;opacity:.7;transform-origin:bottom center}
.lt-sprig svg{width:100%;height:100%}
.lt-sprig-left{left:-38px;animation:lt-leaves 9s ease-in-out infinite alternate}
.lt-sprig-right{right:-36px;transform:scaleX(-1);animation:lt-leaves-right 11s ease-in-out infinite alternate}
.lt-garden{display:flex;align-items:flex-end;gap:13px;min-width:0;position:relative;z-index:1;border-bottom:2px solid #9db39e;padding-bottom:3px}
.lt-garden-flowers{display:flex;align-items:flex-end;gap:2px;flex:1;min-width:0;height:60px;overflow:hidden}
.lt-flower{width:39px;max-width:calc(100% / 12);height:56px;min-width:0;flex:1}
.lt-flower .lt-petals{opacity:0;transform:scale(.3);transform-origin:25px 30px;transition:opacity .35s,transform .5s cubic-bezier(.2,.9,.2,1.4)}
.lt-flower.is-grown .lt-petals{opacity:1;transform:scale(1)}
.lt-garden-progress{font-size:15px;font-weight:700;padding-bottom:11px;white-space:nowrap}
.lt-finish{min-height:39px;padding:8px 12px;font-size:14px;margin-bottom:3px;background:#f4f8ec}
.lt-announcement{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lt-guide-nudge .lt-start-ring{animation:lt-dot .3s ease-out}
.lt-launch{height:100%;min-height:180px;position:relative;display:grid;place-items:center;background:linear-gradient(150deg,#f0f5e6,#d8e9df);border-radius:25px;overflow:hidden}
.lt-launch-paper{height:85%;aspect-ratio:1/1;max-height:270px;position:relative;background:#fffcf2;border:1px solid #cbd8c4;border-radius:19px;box-shadow:0 5px 0 #aabca5,0 15px 25px #45604716;transform:rotate(-4deg);display:grid;place-items:center;color:#367ea8}
.lt-launch-paper svg{height:85%;width:85%}
.lt-launch-pencil{position:absolute;right:0;bottom:20%;font-size:65px;color:#b47c30;transform:rotate(-18deg)}
.lt-launch-garden{position:absolute;left:5%;bottom:0;height:85%;width:28%;opacity:.8}
.lt-launch-garden svg{height:100%;width:100%}
.lt-launch-flower{position:absolute;right:7%;bottom:0;width:15%;height:48%}
.lt-launch-flower svg{width:100%;height:100%;max-width:none}
.lt-opening{height:100%;display:grid;place-items:center;position:relative;animation:lt-paper-in .45s ease-out}
.lt-opening .lt-launch{width:90%;height:88%}
.lt-opening .lt-launch-paper path{path-length:100;stroke-dasharray:450;stroke-dashoffset:450;animation:lt-opening-draw 1.1s .1s ease-out forwards}
.lt-opening-skip{position:absolute;bottom:15px;right:20px;z-index:2;min-width:90px}
.lt-review{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px}
.lt-review>div{background:#fffcf2;border:1px solid #d6dece;border-radius:15px;padding:4px;position:relative;color:#6b7c72;height:100px}
.lt-review>div.is-done{border-color:#6c9a7c;color:#367ea8}
.lt-review>div>svg{width:100%;height:100%}
.lt-review span{position:absolute;right:3px;top:3px;color:#367960}
.lt-review span svg{width:18px;height:18px}
/* Authoring: choose letters, then read the exact lesson order. */
.lt-editor{max-width:880px;margin:auto;color:#284940}
.lt-editor-intro{display:flex;align-items:center;gap:18px;padding:18px 22px;background:#edf4e8;border-radius:20px;margin-bottom:22px}
.lt-editor-intro svg{width:65px;height:65px;flex-shrink:0;color:#367ea8}
.lt-editor-intro h2{margin:0 0 5px;font-size:22px}.lt-editor-intro p{margin:0;line-height:1.5;color:#566e63}
.lt-editor-section{margin:0 0 22px;padding:20px;border:1px solid #d9e3d7;border-radius:18px;background:#fff}
.lt-editor-section h3{margin:0 0 12px;font-size:18px}.lt-editor-section>p{color:#586d63;line-height:1.45}
.lt-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.lt-editor-toolbar button{background:#f3f8ef;border:1px solid #b6cdb6;color:#284940;border-radius:10px;padding:9px 14px;font:inherit;cursor:pointer}
.lt-editor-picker{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:7px;margin:10px 0}
.lt-letter-add{min-height:40px;border:1px solid #b9cdbf;border-radius:10px;background:#fafdf6;color:#284940;font:inherit;font-size:24px;cursor:pointer;display:grid;place-items:center}
.lt-letter-add svg{width:26px;height:35px}.lt-letter-add:hover{border-color:#367960;background:#edf5e6}.lt-letter-add:disabled{opacity:.4;cursor:default}
.lt-editor-sequence{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.lt-editor-chip{display:flex;align-items:center;gap:5px;border:1px solid #c5d5c6;background:#f6f9f1;border-radius:12px;padding:5px;min-width:85px}
.lt-editor-chip>svg{height:50px;width:38px;color:#367ea8}.lt-editor-chip>span{font-size:25px;margin:0 8px}
.lt-editor-chip-actions{display:flex;flex-direction:column;gap:2px}.lt-editor-chip-actions button{width:28px;height:25px;display:grid;place-items:center;border:0;background:transparent;color:#476e57;border-radius:4px;cursor:pointer;padding:0}.lt-editor-chip-actions button:hover{background:#e1ead8}.lt-editor-chip-actions button:disabled{opacity:.25}.lt-editor-chip-actions button svg{width:17px;height:17px}
.lt-editor-empty{padding:20px;color:#697b6a;background:#f7faf4;border-radius:12px}.lt-editor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.lt-editor-option{display:flex;flex-direction:column;gap:8px}.lt-editor-option select{font:inherit;width:100%}
.lt-editor-case{display:flex;gap:5px;border-right:1px solid #d1ddce;padding-right:10px}.lt-editor-case button[aria-pressed=true]{background:#e1eddb;border-color:#367960;box-shadow:inset 0 0 0 1px #367960}.lt-editor-order-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.lt-editor-order-heading h2{margin:0;font-size:20px}.lt-editor-order-heading>span{font-size:13px;color:#617c67;white-space:nowrap}.lt-editor-chip .lt-editor-position{font-size:11px;color:#768976;margin:0 2px;align-self:flex-start}.lt-editor-chip strong{font-size:30px;font-weight:600;min-width:32px;text-align:center}.lt-editor-limit{color:#886027!important;font-size:14px}.lt-editor [hidden]{display:none!important}
.resource-layout.letter-tracing-layout{grid-template-columns:minmax(0,1fr)}.resource-layout.letter-tracing-layout>.resource-sidebar[hidden]{display:none!important}
.lt-letter-add .lt-editor-glyph{width:30px;height:39px}.lt-editor-chip .lt-editor-glyph{width:39px;height:53px;color:#367ea8}
#activityPlayer[data-game=lettertracing] .player-controls,#activityPlayer[data-game=lettertracing] .player-controls *{text-shadow:none!important;-webkit-text-stroke:0}
#activityPlayer[data-game=lettertracing] .end-panel{background:#fffcf2!important;color:#284940!important;opacity:1;border:1px solid #bfd0b7;box-shadow:0 12px 35px #253f3329}
#activityPlayer[data-game=lettertracing] .end-panel :is(h2,p,strong,span){color:#284940!important;text-shadow:none!important;-webkit-text-stroke:0}
#activityPlayer[data-game=lettertracing] .end-panel :is(button,a){background:#f4f8ec!important;color:#284940!important;border:1px solid #a9c3b3!important;box-shadow:0 2px 0 #a7bca7!important;text-shadow:none!important;-webkit-text-stroke:0;font-family:inherit;border-radius:12px}
#activityPlayer[data-game=lettertracing] .end-panel :is(#againBtn,#resumeBtn){background:#367960!important;color:#fff!important;border-color:#27654d!important;box-shadow:0 3px 0 #23553f!important}
#activityPlayer[data-game=lettertracing] .end-summary>div:has(#eScore),#activityPlayer[data-game=lettertracing] #viewScoresBtn{display:none!important}
#activityPlayer[data-game=lettertracing] .end-summary{justify-content:center}
@keyframes lt-leaves{to{transform:rotate(3deg)}}@keyframes lt-leaves-right{to{transform:scaleX(-1) rotate(3deg)}}@keyframes lt-dot{50%{stroke-width:3;fill:#ddedc8}}@keyframes lt-paper-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes lt-opening-draw{to{stroke-dashoffset:0}}
@media(max-width:600px){
 #activityPlayer[data-game=lettertracing].game-shell:not(:fullscreen){height:620px;min-height:620px}
 #activityPlayer[data-game=lettertracing] #gameStage{padding:10px 12px}
 .lt-shell{grid-template-rows:auto minmax(0,1fr) 55px;gap:9px}.lt-heading{grid-template-columns:39px minmax(0,1fr) auto;gap:7px}.lt-current-letter{height:42px;border-radius:10px}.lt-lesson-count{font-size:13px}.lt-lesson-picker{gap:5px}.lt-lesson-picker button{flex-basis:34px;height:38px;border-radius:9px}
 .lt-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:13px;height:100%}.lt-paper{border-radius:17px;padding:9px 7px 6px}.lt-paper::before{left:14px}.lt-toolbox{flex-direction:row;gap:7px;justify-content:center}.lt-toolbox button{flex:1;flex-direction:column;gap:4px;min-height:56px;padding:6px 3px;border-radius:12px;font-size:12px}.lt-toolbox .lt-next{margin-top:0}.lt-toolbox button svg{width:19px;height:19px}.lt-pad-hint{font-size:13px;min-height:18px}.lt-garden{gap:6px}.lt-garden-flowers{height:48px}.lt-flower{height:45px}.lt-finish{font-size:12px;padding:7px;gap:4px;min-height:34px}.lt-garden-progress{font-size:12px;padding-bottom:8px}.lt-finish svg{width:16px}.lt-sprig{width:75px;opacity:.5}.lt-sprig-left{left:-30px}.lt-sprig-right{right:-30px}
 .lt-editor-picker{grid-template-columns:repeat(7,minmax(0,1fr))}.lt-editor-section{padding:13px}.lt-editor-intro{padding:14px;gap:10px}.lt-editor-intro h2{font-size:19px}.lt-editor-options{grid-template-columns:1fr}
}
@media(max-height:550px) and (orientation:landscape){#activityPlayer[data-game=lettertracing]:fullscreen .lt-workspace{grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:1fr}.lt-toolbox{flex-direction:column;gap:5px}.lt-toolbox button{min-height:34px;flex-direction:row;padding:6px;font-size:12px}.lt-shell{grid-template-rows:42px minmax(0,1fr) 36px;gap:5px}.lt-heading{height:42px}.lt-garden-flowers{height:33px}.lt-flower{height:32px}.lt-paper{padding:4px}.lt-pad-hint{font-size:11px;min-height:14px}.lt-sprig{display:none}}
@media(prefers-reduced-motion:reduce){:where(:root:not([data-motion-managed])) .lt-shell *,:where(:root:not([data-motion-managed])) .lt-opening *{animation:none!important;transition:none!important}}:where(:root[data-reduce-motion]) .lt-shell *,:where(:root[data-reduce-motion]) .lt-opening *{animation:none!important;transition:none!important}
#activityPlayer[data-paused=true] .lt-shell *{animation-play-state:paused!important}

/* Source: css/wordmaze.css; sha256: d97cdcd1d5d65d9fee6f4f3b2591d4cb37f9a383087fb4fcab447d56b3831fa5 */
/* Word maze: corridors carved through the learning world's hedge, and four word
   signposts that point where they move the explorer. Every colour is the world's
   own token (css/themekit-worlds.css); the fallbacks only apply outside a world. */
#activityPlayer.game-shell[data-game=wordmaze]:not(:fullscreen){height:clamp(570px,46vw,700px)}
#activityPlayer[data-game=wordmaze] #gameStage{padding:clamp(10px,1.6cqw,22px) clamp(12px,2.6cqw,34px);overflow:hidden;font-family:inherit}
#activityPlayer[data-game=wordmaze] .wm-shell{
  --wm-ink:var(--wk-ink,#25384a);--wm-line:var(--wk-line,#25384a);--wm-drop:var(--wk-drop,#17293a);
  --wm-path:var(--wk-maze-path,#f6f0dc);--wm-wall:var(--wk-maze-wall,#6cc35a);--wm-wall-d:var(--wk-maze-wall-d,#3f8a35);
  --wm-card:var(--wk-card-flat,#fffdf7);--wm-card-ink:var(--wk-flat-ink,#25384a);
  --wm-accent:var(--wk-c1,#ff7a2f);--wm-mark:var(--wk-mark,var(--wk-c2,#ffc23a));
  --wm-bad:var(--wk-bad,#e85a3c);--wm-bad-d:var(--wk-bad-d,#a8301e);--wm-good:var(--wk-good,#46a83f);
  --wm-pill:var(--wk-pill,rgba(37,56,74,.72));--wm-pill-ink:var(--wk-pill-ink,#fff);--wm-radius:var(--wk-radius-sm,16px);
  --wm-dx:0;--wm-dy:0;
  container:wm-shell/size;position:relative;isolation:isolate;width:100%;height:100%;min-height:0;color:var(--wm-ink)
}
.wm-shell *{box-sizing:border-box}

/* ---------- Layout ----------
   Wide stages: the square board on the left, the signposts on the right.
   Tall stages: hearts and Undo, the board, then the signposts below it.
   The board's side comes from the stage itself, so it arrives at its final size. */
.wm-layout{
  --wm-status:clamp(36px,7cqh,50px);--wm-gap:clamp(8px,2cqh,18px);
  --wm-side:min(calc(100cqh - var(--wm-status) - var(--wm-gap)),58cqw);
  display:grid;height:100%;min-height:0;
  grid-template-columns:var(--wm-side) minmax(0,1fr);grid-template-rows:var(--wm-status) var(--wm-side);
  grid-template-areas:"hearts undo" "map pad";column-gap:clamp(16px,3.4cqw,52px);row-gap:var(--wm-gap);align-content:center
}
@container wm-shell (min-aspect-ratio:28/25){
  .wm-shell[data-wordy=true] .wm-layout{--wm-side:min(calc(100cqh - var(--wm-status) - var(--wm-gap)),50cqw)}
}
@container wm-shell (max-aspect-ratio:27/25){
  .wm-layout{
    --wm-pad-min:clamp(236px,36cqh,330px);
    --wm-side:min(100cqw,calc(100cqh - var(--wm-status) - 2 * var(--wm-gap) - var(--wm-pad-min)));
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--wm-status) var(--wm-side) minmax(0,1fr);
    grid-template-areas:"hearts undo" "map map" "pad pad";align-content:stretch
  }
  .wm-shell[data-pictures=true] .wm-layout{--wm-pad-min:clamp(290px,44cqh,420px)}
  .wm-shell[data-wordy=true] .wm-layout{--wm-pad-min:clamp(300px,50cqh,470px)}
}

/* ---------- Hearts, dollars and Undo ---------- */
.wm-status{grid-area:hearts;align-self:center;justify-self:start;display:flex;align-items:center;gap:clamp(6px,1.2cqw,12px);min-width:0;max-width:100%}
.wm-hearts{grid-area:hearts;align-self:center;justify-self:start;display:flex;align-items:center;gap:clamp(3px,.7cqw,7px);min-height:calc(var(--wm-status) - 4px);padding:4px clamp(9px,1.4cqw,14px);border-radius:999px;background:var(--wm-pill)}
.wm-heart{display:grid;width:clamp(20px,calc(var(--wm-status) * .62),32px);min-width:14px;aspect-ratio:28/26}
/* A narrow stage with many hearts: the hearts get smaller so the dollar board and Undo keep their size. */
.wm-status .wm-hearts{flex:0 1 auto;min-width:0}
.wm-bank{flex:none}
.wm-heart svg{width:100%;height:100%;overflow:visible;fill:var(--wm-bad);stroke:var(--wm-bad-d);stroke-width:2;stroke-linejoin:round;transition:fill .2s ease,stroke .2s ease}
.wm-heart.is-empty svg{fill:transparent;stroke:var(--wm-pill-ink);stroke-opacity:.6;stroke-dasharray:3 2.5}
.wm-heart.wm-heart-lost{animation:wm-heart-lost .62s cubic-bezier(.3,.7,.4,1)}
.wm-heart.wm-heart-back{animation:wm-heart-back .52s cubic-bezier(.3,1.5,.5,1)}
/* The dollar board: a gold-rimmed sign that counts every coin and door across the lesson. */
.wm-bank{display:inline-flex;align-items:center;gap:clamp(4px,.7cqw,8px);min-height:calc(var(--wm-status) - 4px);padding:3px clamp(11px,1.5cqw,16px) 3px 4px;border-radius:999px;background:var(--wm-pill);box-shadow:inset 0 0 0 2px rgba(255,212,84,.7);color:#ffe27a;font-family:var(--wk-display,inherit);font-size:clamp(17px,calc(var(--wm-status) * .5),26px);font-weight:800;line-height:1;white-space:nowrap}
.wm-bank-coin{display:block;flex:none;width:calc(var(--wm-status) - 10px);height:calc(var(--wm-status) - 10px)}
.wm-bank-coin svg,.wm-outcome-prize-coin svg,.wm-prize svg,.wm-coin-art svg,.wm-flight svg{display:block;width:100%;height:100%;overflow:visible}
.wm-bank-amount{min-width:2ch;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.wm-bank.wm-bank-up{animation:wm-bank-up .56s cubic-bezier(.3,1.5,.5,1)}
.wm-bank.wm-bank-up .wm-bank-coin{animation:wm-coin-flip .56s ease-out}
.wm-coin-label{font:900 38px/1 var(--wk-display,system-ui,sans-serif);letter-spacing:-1.5px}
/* Undo lives beside the signposts, in the compass's free bottom-right corner (see Signposts). */
#activityPlayer[data-game=wordmaze] .wm-undo{display:inline-flex;align-items:center;gap:8px;min-height:calc(var(--wm-status) - 4px);padding:4px clamp(12px,1.6cqw,18px) 4px clamp(10px,1.3cqw,14px);border:2px solid var(--wm-line);border-radius:999px;background:var(--wk-ghost,#fff);color:var(--wk-ghost-ink,var(--wm-card-ink));box-shadow:0 3px 0 var(--wm-drop);text-shadow:var(--wk-ghost-shadow,none);font:inherit;font-size:clamp(14px,calc(var(--wm-status) * .38),20px);font-weight:800;line-height:1;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,box-shadow .12s ease,opacity .2s ease}
.wm-undo svg{width:1.25em;height:1.25em;flex:none}
#activityPlayer[data-game=wordmaze] .wm-undo:enabled:active{transform:translateY(3px);box-shadow:0 0 0 var(--wm-drop)}
#activityPlayer[data-game=wordmaze] .wm-undo:disabled{opacity:.5;cursor:default}

/* ---------- The board ---------- */
.wm-map-bay{grid-area:map;display:grid;place-items:center;min-width:0;min-height:0}
.wm-map{container-type:size;position:relative;width:var(--wm-side);height:var(--wm-side);max-width:100%;border:clamp(3px,.9cqmin,6px) solid var(--wm-line);border-radius:var(--wm-radius);background:var(--wm-wall-d);box-shadow:0 6px 0 var(--wm-drop),0 14px 28px rgba(0,0,0,.22)}
.wm-floor{position:absolute;inset:0;border-radius:calc(var(--wm-radius) - 4px);overflow:hidden}
.wm-maze-art{display:block;width:100%;height:100%}
.wm-hedge{fill:var(--wm-wall)}
.wm-maze-art pattern circle{fill:var(--wm-wall-d);opacity:.42}
.wm-corridor-edge path{stroke:var(--wm-wall-d)}
.wm-corridor path{stroke:var(--wm-path)}
.wm-dangers circle{fill:color-mix(in srgb,var(--wm-bad) 22%,transparent)}
.wm-exit-mark{fill:color-mix(in srgb,var(--wm-good) 30%,transparent)}
.wm-start-mark{stroke:var(--wm-accent);stroke-dasharray:.1 .08;opacity:.85}
.wm-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.wm-route path{fill:none;stroke:var(--wm-accent);stroke-width:.12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 .25}
.wm-piece{position:absolute;left:0;top:0;width:calc(100% / var(--wm-n,5));height:calc(100% / var(--wm-n,5));transform:translate(calc(var(--col,0) * 100%),calc(var(--row,0) * 100%));pointer-events:none}
.wm-hazard{position:absolute;inset:17%;display:grid;place-items:center;transform-origin:50% 80%}
.wm-hazard svg,.wm-exit-art svg,.wm-explorer-art svg,.wm-hub-art svg,.wm-outcome-badge svg{display:block;width:100%;height:100%;overflow:visible}
.wm-exit{z-index:2}
.wm-exit-art{position:absolute;inset:9% 11% 7%;display:block;transition:filter .3s ease}
.wm-explorer{z-index:5;transition:transform .24s cubic-bezier(.3,.8,.35,1)}
.wm-explorer.wm-instant,.wm-instant{transition:none!important}
.wm-explorer-body{position:absolute;inset:1% 7% 5%;display:block;transform-origin:50% 92%}
.wm-explorer-art{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 0 rgba(255,255,255,.85));transition:transform .18s ease}
.wm-shell:not([data-skin]) .wm-explorer[data-side=left] .wm-explorer-art{transform:scaleX(-1)}
.wm-ground{display:none}
.wm-shell[data-size="9"] .wm-explorer-body{inset:-2% 3% 3%}

/* Coins: one dollar each, on the squares the maze placed them; collected ones fly to the board. */
/* Bigger coins are worth more: $1 smallest, $5 largest (js/games/wordmaze.js draws the four designs). */
.wm-coin{z-index:1;--wm-coin-scale:1}
.wm-coin[data-value="1"]{--wm-coin-scale:.8}
.wm-coin[data-value="2"]{--wm-coin-scale:.9}
.wm-coin[data-value="5"]{--wm-coin-scale:1.12;z-index:2}
.wm-coin::before{content:"";position:absolute;left:calc(50% - 19% * var(--wm-coin-scale));right:calc(50% - 19% * var(--wm-coin-scale));bottom:calc(36.4% - 17.4% * var(--wm-coin-scale));height:8%;border-radius:50%;background:rgba(20,24,40,.24)}
.wm-coin-art{position:absolute;inset:19% 21% 23%;display:block;scale:var(--wm-coin-scale);transform-origin:50% 70%}
.wm-coin.is-taken{visibility:hidden}
.wm-coin.wm-coin-back .wm-coin-art{animation:wm-pop .42s cubic-bezier(.3,1.5,.5,1)}
.wm-coin-glint{transform-box:fill-box;transform-origin:center;opacity:.9}
.wm-prize{position:absolute;right:-2%;top:-6%;z-index:3;display:block;width:44%;height:44%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));transition:opacity .25s ease,scale .25s ease}
.wm-won .wm-prize{opacity:0;scale:.4}
.wm-flights{position:absolute;inset:0;z-index:30;pointer-events:none}
.wm-flight{position:absolute;left:0;top:0;display:block;will-change:transform;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
#activityPlayer:not([data-world-style=still]) .wm-shell:not(.wm-opening) .wm-coin:not(.wm-coin-back) .wm-coin-art{animation:wm-coin-bob 2.6s ease-in-out calc(var(--i,0) * -.45s) infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell .wm-coin-glint{animation:wm-glint 3.4s ease-in-out calc(var(--i,0) * -.8s) infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell:not(.wm-won) .wm-prize .wm-coin-glint{animation:wm-glint 3.4s ease-in-out -1.7s infinite}

/* The opening: corridors grow outward from the start, then the door and dangers appear. */
.wm-opening .wm-maze-art :is(.wm-corridor,.wm-corridor-edge) path{stroke-dasharray:1 1;animation:wm-carve .3s ease-out var(--d) both}
.wm-opening .wm-maze-art :is(.wm-dangers circle,.wm-exit-mark){transform-box:fill-box;transform-origin:center;animation:wm-pop .4s cubic-bezier(.3,1.5,.5,1) calc(var(--d) + .18s) both}
.wm-opening .wm-hazard-cell .wm-hazard{animation:wm-pop .42s cubic-bezier(.3,1.5,.5,1) calc(var(--d) + .22s) both}
.wm-opening .wm-exit-art,.wm-opening .wm-prize{animation:wm-pop .46s cubic-bezier(.3,1.5,.5,1) var(--wm-exit-d,.6s) both}
.wm-opening .wm-coin-art{animation:wm-pop .42s cubic-bezier(.3,1.5,.5,1) calc(var(--d) + .3s) both}
.wm-opening .wm-explorer-body{animation:wm-drop .5s cubic-bezier(.3,1.4,.5,1) both}

/* What the board says back: a hop, a bump against the hedge, an ouch, a cheer. */
.wm-explorer-body.wm-step{animation:wm-step .3s cubic-bezier(.3,.7,.4,1)}
.wm-explorer-body.wm-bump{animation:wm-bump .36s ease-out}
.wm-explorer-body.wm-ouch{animation:wm-ouch .52s ease-out}
.wm-explorer-body.wm-ouch .wm-explorer-art{animation:wm-ouch-tint .52s ease-out}
.wm-explorer-body.wm-cheer{animation:wm-cheer 1.1s cubic-bezier(.3,.7,.4,1)}
.wm-hazard-cell.wm-flare .wm-hazard{animation:wm-flare .56s ease-out}
.wm-map::after{content:"";position:absolute;inset:calc(-1 * clamp(3px,.9cqmin,6px));border-radius:inherit;box-shadow:0 0 0 7px color-mix(in srgb,var(--wm-bad) 62%,transparent),inset 0 0 0 3px var(--wm-bad);opacity:0;pointer-events:none;z-index:8}
.wm-map.wm-hurt::after{animation:wm-hurt .52s ease-out}
.wm-won .wm-exit-art{filter:drop-shadow(0 0 .35em var(--wm-mark)) drop-shadow(0 0 .12em #fff)}
.wm-bonk{z-index:6;opacity:0}
.wm-bonk-star{position:absolute;left:calc(50% + var(--wm-dx) * 50%);top:calc(50% + var(--wm-dy) * 50%);width:44%;aspect-ratio:1;translate:-50% -50%}
.wm-bonk-star svg{display:block;width:100%;height:100%}
.wm-bonk.wm-bonk-on{opacity:1;animation:wm-fade-out .46s ease-in both}
.wm-bonk.wm-bonk-on .wm-bonk-star{animation:wm-bonk .46s cubic-bezier(.3,1.6,.5,1)}
.wm-echo{z-index:7;opacity:0}
.wm-echo-bubble{position:absolute;left:50%;bottom:86%;display:flex;align-items:center;justify-content:center;max-width:min(330%,92cqw);padding:.22em .7em .26em;border:max(2px,.45cqmin) solid var(--wm-line);border-radius:999px;background:var(--wm-card);color:var(--wm-card-ink);box-shadow:0 3px 0 var(--wm-drop);font-size:clamp(13px,5.4cqmin,30px);font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;translate:-50% 0}
.wm-echo-bubble img{display:block;height:1.7em;width:auto;max-width:5em;object-fit:contain}
.wm-echo[data-below=true] .wm-echo-bubble{bottom:auto;top:86%}
.wm-echo[data-edge=start] .wm-echo-bubble{left:4%;translate:0 0}
.wm-echo[data-edge=end] .wm-echo-bubble{left:auto;right:4%;translate:0 0}
.wm-echo.wm-echo-on{opacity:1}
.wm-echo.wm-echo-on .wm-echo-bubble{animation:wm-echo .9s ease-out both}
.wm-confetti{z-index:4;opacity:0}
.wm-confetti i{position:absolute;left:50%;top:46%;width:10%;height:15%;border-radius:2px;background:var(--wm-accent);opacity:0}
.wm-confetti i:nth-child(5n+2){background:var(--wm-mark)}
.wm-confetti i:nth-child(5n+3){background:var(--wm-good)}
.wm-confetti i:nth-child(5n+4){background:var(--wk-c4,#9a7cff)}
.wm-confetti i:nth-child(5n){background:var(--wk-c3,#22bfd2)}
.wm-confetti.wm-burst{opacity:1}
.wm-confetti.wm-burst i{animation:wm-confetti 1.1s cubic-bezier(.2,.7,.3,1) both}

/* ---------- Signposts ---------- */
.wm-controls{grid-area:pad;container:wm-pad/size;position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);min-width:0;min-height:0;
  --tip:clamp(30px,10cqmin,58px);--edge:calc(var(--tip) * .6 + 5px);--wm-undo-h:calc(var(--wm-status) - 4px)}
.wm-compass,.wm-outcome{grid-area:1/1}
/* Four signs of one size around the compass: up and down are as wide as left and right. */
.wm-compass{
  --hub:clamp(48px,19cqmin,124px);--gx:clamp(10px,3.2cqmin,22px);
  align-self:center;justify-self:center;width:min(100%,700px);height:min(100%,560px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--hub) minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));
  row-gap:clamp(10px,3.2cqmin,22px);column-gap:var(--gx);padding:var(--edge)
}
/* Undo: lined up with the bottom-right corner of the compass, clear of the down and right signs. */
#activityPlayer[data-game=wordmaze] .wm-controls>.wm-undo{grid-area:1/1;justify-self:end;align-self:end;position:relative;z-index:2;
  margin:0 calc((100cqw - min(100cqw,700px)) / 2 + var(--edge)) calc((100cqh - min(100cqh,560px)) / 2 + var(--edge)) 0;min-height:var(--wm-undo-h)}
.wm-shell:is(.wm-won,.wm-lost) .wm-controls>.wm-undo{visibility:hidden}
/* A narrow compass leaves room for a round Undo only: its arrow, with the same label for screen readers. */
@container wm-pad (max-width:400px){
  #activityPlayer[data-game=wordmaze] .wm-controls>.wm-undo{width:max(var(--wm-undo-h),40px);min-height:max(var(--wm-undo-h),40px);padding:0;justify-content:center}
  .wm-controls>.wm-undo .wm-undo-label{display:none}
}
#activityPlayer[data-game=wordmaze] .wm-direction{
  --wm-sign:var(--wm-card);
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;
  padding:clamp(6px,2cqmin,14px) clamp(8px,2.6cqmin,18px);border:3px solid var(--wm-line);border-radius:var(--wm-radius);
  background:var(--wm-sign);color:var(--wm-card-ink);filter:drop-shadow(0 4px 0 var(--wm-drop));
  font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,filter .12s ease
}
.wm-up{grid-area:1/1/2/4}.wm-down{grid-area:3/1/4/4}.wm-left{grid-area:2/1}.wm-right{grid-area:2/3}
.wm-up,.wm-down{justify-self:center;width:calc((100% - var(--hub) - 2 * var(--gx)) / 2)}
@media (hover:hover){#activityPlayer[data-game=wordmaze] .wm-direction:enabled:hover{--wm-sign:color-mix(in srgb,var(--wm-card) 84%,var(--wm-mark))}}
#activityPlayer[data-game=wordmaze] .wm-direction:enabled:active{transform:translateY(3px);filter:drop-shadow(0 1px 0 var(--wm-drop))}
#activityPlayer[data-game=wordmaze] :is(.wm-direction,.wm-undo,.wm-continue,.wm-outcome-undo):focus-visible{outline:4px solid var(--wm-mark);outline-offset:4px}
.wm-direction:disabled{cursor:default}
/* The arrow badge: one size on every sign, centred on the sign's outer border (3px, so 1.5px out). */
.wm-tip{position:absolute;z-index:1;display:block;width:var(--tip);height:var(--tip);pointer-events:none;filter:drop-shadow(0 2px 0 var(--wm-drop));transition:scale .12s ease}
.wm-tip svg{display:block;width:100%;height:100%;overflow:visible}
.wm-tip-disc{fill:var(--wm-card-ink);stroke:var(--wm-card);stroke-width:1.6px}
.wm-tip-arrow{fill:none;stroke:var(--wm-card);stroke-width:3.3px;stroke-linecap:round;stroke-linejoin:round}
.wm-up .wm-tip,.wm-down .wm-tip{left:50%;margin-left:calc(var(--tip) / -2)}
.wm-left .wm-tip,.wm-right .wm-tip{top:50%;margin-top:calc(var(--tip) / -2)}
.wm-up .wm-tip{top:calc(var(--tip) / -2 - 1.5px)}
.wm-down .wm-tip{bottom:calc(var(--tip) / -2 - 1.5px)}
.wm-left .wm-tip{left:calc(var(--tip) / -2 - 1.5px)}
.wm-right .wm-tip{right:calc(var(--tip) / -2 - 1.5px)}
@media (hover:hover){#activityPlayer[data-game=wordmaze] .wm-direction:enabled:hover .wm-tip{scale:1.08}}
/* Words keep clear of the badge and stay centred: the sign makes the same room on both sides. */
#activityPlayer[data-game=wordmaze] .wm-direction:is(.wm-up,.wm-down){padding-top:calc(var(--tip) / 2 + 2px);padding-bottom:calc(var(--tip) / 2 + 2px)}
#activityPlayer[data-game=wordmaze] .wm-direction:is(.wm-left,.wm-right){padding-left:calc(var(--tip) / 2 + 6px);padding-right:calc(var(--tip) / 2 + 6px)}
.wm-direction.wm-pressed{animation:wm-press .24s ease-out}
.wm-direction.wm-pressed .wm-tip svg{animation:wm-nudge .24s ease-out}
.wm-word-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,1cqmin,8px);width:100%;height:100%;min-width:0;min-height:0}
.wm-word{display:block;width:100%;min-height:0;font-size:var(--wm-word-size,28px);line-height:1.15;text-align:center;font-weight:800;overflow-wrap:normal;word-break:normal}
.wm-word-ink{display:block;width:100%;min-width:0}
/* Font fitting must measure its new size synchronously. World-wide transition
   rules otherwise animate each measuring step and make the result oscillate. */
#activityPlayer[data-game=wordmaze] :is(.wm-word,.wm-word-ink){transition:none!important;animation:none!important}
.wm-picture{display:flex;flex:1 1 auto;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0}
.wm-picture img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.has-picture.has-text .wm-word{flex:0 0 34%;display:flex;align-items:center;justify-content:center}
.wm-image-error{min-height:2em;border-radius:10px;background:color-mix(in srgb,var(--wm-card-ink) 8%,transparent)}
.wm-hub{grid-area:2/2;align-self:center;justify-self:center;display:grid;place-items:center;width:var(--hub);aspect-ratio:1;border:3px solid var(--wm-line);border-radius:50%;background:var(--wm-path);box-shadow:0 4px 0 var(--wm-drop),inset 0 -6px 0 color-mix(in srgb,var(--wm-wall) 45%,transparent);overflow:hidden}
.wm-hub-art{display:block;width:68%;height:82%;translate:0 4%}
/* Long words and phrases get the width; the medallion between the signs gives way. */
.wm-shell[data-long=true] .wm-compass{--hub:clamp(40px,13cqmin,84px);--gx:clamp(8px,2.4cqmin,16px)}
.wm-shell[data-wordy=true] .wm-compass{--hub:clamp(36px,12cqmin,84px);--gx:clamp(8px,2.4cqmin,16px);row-gap:clamp(8px,2.4cqmin,16px)}
/* When the compass is too narrow to read the words, the signs stack in the same order (js fit()). */
.wm-shell[data-stack=true] .wm-compass{--hub:0px;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(8px,2.4cqmin,14px);padding-bottom:calc(var(--edge) + var(--wm-undo-h) + 8px)}
.wm-shell[data-stack=true] .wm-compass .wm-direction{grid-area:auto;justify-self:stretch;width:100%}
.wm-shell[data-stack=true] .wm-hub{display:none}
.wm-shell[data-stack=true] .has-picture.has-text .wm-word-content{flex-direction:row;gap:clamp(6px,2cqmin,14px)}
.wm-shell[data-stack=true] .has-picture.has-text .wm-picture{flex:0 0 30%;height:100%}
.wm-shell[data-stack=true] .has-picture.has-text .wm-word{flex:1 1 0;height:100%}
/* A narrow column keeps the words and drops the decoration between them. */
@container wm-pad (max-width:320px){.wm-compass{--hub:0px;--gx:clamp(8px,3cqw,14px)}.wm-hub{display:none}}
.wm-shell[data-wordy=true] .wm-word{line-height:1.2}

/* ---------- Result card: replaces the signposts until the teacher continues ---------- */
.wm-shell:is(.wm-won,.wm-lost) .wm-compass{visibility:hidden}
.wm-outcome{align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,2.4cqmin,14px);width:min(100%,460px);max-height:100%;padding:clamp(14px,5cqmin,30px);background:var(--wk-panel,#fffdf6);color:var(--wk-ink,#25384a);border:var(--wk-panel-border,3px solid #25384a);border-radius:var(--wk-radius,24px);box-shadow:var(--wk-panel-shadow,0 6px 0 #17293a);text-align:center;overflow:auto}
.wm-outcome[hidden]{display:none}
.wm-outcome:not([hidden]){animation:wm-rise .36s cubic-bezier(.3,1.3,.5,1) both}
.wm-outcome-badge{width:clamp(52px,17cqmin,100px);aspect-ratio:1;display:grid;place-items:center}
.wm-outcome[data-result=lost] .wm-outcome-badge svg{fill:transparent;stroke:var(--wm-bad);stroke-width:2.2;stroke-dasharray:3.2 2.4;stroke-linejoin:round}
.wm-outcome-title{font-family:var(--wk-display,inherit);font-size:clamp(22px,8cqmin,42px);line-height:1.1;font-weight:800}
.wm-outcome-prize{display:inline-flex;align-items:center;gap:.3em;padding:.12em .55em .12em .16em;border:2px solid #e39b16;border-radius:999px;background:#ffe27a;color:#6b3a00;font-family:var(--wk-display,inherit);font-size:clamp(20px,6cqmin,32px);font-weight:900;line-height:1.1;box-shadow:0 3px 0 rgba(120,70,0,.35)}
.wm-outcome-prize[hidden]{display:none}
.wm-outcome-prize-coin{display:block;width:1.35em;height:1.35em}
.wm-outcome:not([hidden]) .wm-outcome-prize{animation:wm-pop .46s cubic-bezier(.3,1.5,.5,1) .15s both}
.wm-outcome-note{max-width:30ch;font-size:clamp(14px,3.8cqmin,20px);line-height:1.35;color:var(--wk-ink-soft,currentColor)}
.wm-outcome-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:clamp(2px,1cqmin,8px)}
#activityPlayer[data-game=wordmaze] .wm-continue{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px clamp(20px,6cqmin,32px);border:var(--wk-btn-line,3px solid #205a56);border-radius:999px;background:var(--wk-go,#3a8c79);color:var(--wk-go-ink,#fff);box-shadow:var(--wk-btn-drop,0 5px 0 #205a56);text-shadow:var(--wk-go-shadow,none);font:inherit;font-size:clamp(18px,5.6cqmin,26px);font-weight:800;line-height:1.1;cursor:pointer;touch-action:manipulation}
#activityPlayer[data-game=wordmaze] .wm-outcome-undo{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px 20px;border:2px solid var(--wm-line);border-radius:999px;background:var(--wk-ghost,#fff);color:var(--wk-ghost-ink,var(--wm-card-ink));box-shadow:0 3px 0 var(--wm-drop);font:inherit;font-size:clamp(15px,4.4cqmin,20px);font-weight:800;line-height:1.1;cursor:pointer;touch-action:manipulation}
#activityPlayer[data-game=wordmaze] .wm-outcome-undo[hidden]{display:none}
:is(.wm-continue,.wm-outcome-undo) svg{width:1.15em;height:1.15em;flex:none}
#activityPlayer[data-game=wordmaze] :is(.wm-continue,.wm-outcome-undo):active{transform:translateY(3px)}

/* ---------- World mazes: Dinosaur valley, Ocean adventure, Space voyage ----------
   js/games/_word-maze-worlds.js draws the world's ground, walls, guide, hazards and goal.
   Gradients and shapes live once in .wm-defs and every layer of the board refers to them. */
.wm-defs{position:absolute;width:0;height:0;overflow:hidden}
.wm-skin-art{display:block;width:100%;height:100%}
.wm-shell[data-skin=dino]{--wm-rim:#3a7a2f;--wm-glow:rgba(255,226,140,.95)}
.wm-shell[data-skin=ocean]{--wm-rim:#1b5578;--wm-glow:rgba(255,236,150,.95)}
.wm-shell[data-skin=space]{--wm-rim:#1f1650;--wm-glow:rgba(95,242,255,.9)}
.wm-shell[data-skin] .wm-map{background:var(--wm-rim)}
.wm-opening .wm-skin-art .wm-carve-layer path{stroke-dasharray:1 1;animation:wm-carve .3s ease-out var(--d) both}
.wm-opening .wm-skin-art :is(.wm-dec,.wm-start-art){transform-box:fill-box;transform-origin:50% 90%;animation:wm-pop .4s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0ms) + .2s) both}
/* A world hazard sits inside its corridor, about as wide as the path, not across the walls. */
.wm-shell[data-skin] .wm-hazard{inset:18%}
.wm-shell[data-skin] .wm-exit-art{inset:-4%;transition:translate .3s ease,filter .3s ease}
.wm-shell[data-skin].wm-won .wm-exit-art{translate:14% -12%;filter:drop-shadow(0 0 .3em var(--wm-glow))}
/* The guide: front walking down, back walking up, side view (mirrored) left and right. */
.wm-shell[data-skin] .wm-explorer-body{inset:-8% -6% 4%;transition:translate .3s ease,scale .3s ease}
.wm-shell[data-skin=space] .wm-explorer-body{inset:-13% -12% 3%}
.ww-done{display:block;width:100%;height:100%}
.ww-done svg{display:block;width:100%;height:100%;overflow:visible}
.wm-shell[data-skin] .wm-explorer-art{filter:none}
.ww-walker{position:relative;display:block;width:100%;height:100%}
.wm-explorer-art .ww-view{position:absolute;inset:0;display:none;width:100%;height:100%;overflow:visible}
.wm-explorer[data-facing=down] .ww-view[data-view=front],.wm-explorer[data-facing=up] .ww-view[data-view=back],.wm-explorer:is([data-facing=left],[data-facing=right]) .ww-view[data-view=side]{display:block}
.wm-explorer[data-facing=left] .ww-view[data-view=side]{transform:scaleX(-1)}
.wm-shell[data-skin] .wm-ground{display:block;position:absolute;left:22%;right:22%;bottom:5%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(16,24,40,.36),rgba(16,24,40,0));transition:translate .3s ease}
.wm-shell[data-skin=space] .wm-ground{left:28%;right:28%;bottom:2%}
.wm-shell[data-skin=space] .ww-walker{filter:drop-shadow(0 0 1.5px #1f1650) drop-shadow(0 0 4px rgba(95,242,255,.5))}
/* At the goal the guide steps aside so the nest, chest or rocket stays in view. */
.wm-shell[data-skin].wm-won .wm-explorer-body{translate:-30% 8%;scale:.86}
.wm-shell[data-skin].wm-won .wm-ground{translate:-30% 0}
/* Only the moving parts turn about their own box. The groups that place and scale each drawing
   keep their transform attribute as drawn: a fill-box origin would shift them. */
:is(.ww-leg,.ww-tail,.ww-eyes,.ww-arms,.ww-mantle,.ww-arm-l,.ww-arm-r,.ww-jets,.ww-bubble,.ww-wisps,.ww-jelly,.ww-tentacles,.ww-zap,.ww-flame,.ww-egg,.ww-egg-l,.ww-egg-r,.ww-baby,.ww-shell-top,.ww-crack,.ww-lid,.ww-lid-open,.ww-treasure,.ww-glow,.ww-sparks,.ww-rocket,.ww-smoke){transform-box:fill-box}
.ww-view[data-view=side] .ww-tail{transform-origin:96% 20%}
.ww-view[data-view=back] .ww-tail{transform-origin:50% 0}
.ww-eyes{transform-origin:50% 50%}
.ww-leg{transform-origin:50% 0}
/* A step: Tino strides, Pip pushes off with its arms, Bolt glides on its jets. */
.wm-shell[data-skin] .wm-explorer-body.wm-step{animation:ww-walk .3s ease-in-out}
.wm-step .ww-leg-a{animation:ww-stride-a .3s ease-in-out}
.wm-step .ww-leg-b{animation:ww-stride-b .3s ease-in-out}
.wm-step .ww-tail{animation:ww-wag .3s ease-in-out}
.wm-shell[data-skin=ocean] .wm-explorer-body.wm-step{animation:ww-swim .32s ease-out}
.ww-mantle{transform-origin:50% 100%}
.ww-arms{transform-origin:50% 0}
.wm-step .ww-arms{animation:ww-push .32s ease-out}
.wm-shell[data-skin=space] .wm-explorer-body.wm-step{animation:ww-glide .3s ease-in-out}
.ww-jets{transform-origin:50% 0}
.wm-step .ww-jets{animation:ww-boost .3s ease-out}
.ww-arm-l{transform-origin:100% 0}.ww-arm-r{transform-origin:0 0}
.wm-cheer :is(.ww-arm-l,.ww-arm-r){animation:ww-wave .36s ease-in-out 3}
.wm-cheer .ww-arm-r{animation-direction:reverse}
.wm-cheer .ww-arms{animation:ww-push .36s ease-out 3}
.wm-cheer .ww-bulb{animation:ww-bulb-flash .36s steps(1) 3}
.wm-cheer .ww-tail{animation:ww-wag .3s ease-in-out 3}
/* The hazards and goals while waiting. */
.ww-bubble,.ww-zap,.ww-sparks,.ww-smoke,.ww-treasure{transform-origin:50% 50%}
.ww-tentacles,.ww-lid-open,.ww-lid,.ww-egg,.ww-egg-l,.ww-egg-r,.ww-baby{transform-origin:50% 100%}
:is(.wm-exit,.ww-done) .ww-flame{transform-origin:50% 0}
.wm-exit .ww-flame{transform:scaleY(0)}
.wm-hazard .ww-flame{transform-origin:50% 100%}
/* Goals: a nest of eggs, a closed chest, a rocket on its pad. */
.wm-exit .ww-baby,.wm-exit .ww-crack,.wm-exit .ww-lid-open,.wm-exit .ww-treasure,.wm-exit .ww-sparks,.wm-exit .ww-smoke{opacity:0}
.wm-exit .ww-glow{opacity:.45}
/* The goal reached: the egg hatches, the chest opens, the rocket fires and lifts off its pad.
   Each end state is a plain style, so it still shows with movement turned off. */
:is(.wm-won .wm-exit,.ww-done) .ww-egg{animation:ww-shake .44s ease-in-out}
:is(.wm-won .wm-exit,.ww-done) .ww-shell-top{opacity:0;transform:translate(18px,-26px) rotate(34deg);animation:ww-shell-off .62s ease-out .3s backwards}
:is(.wm-won .wm-exit,.ww-done) .ww-crack{opacity:1;animation:wm-pop .2s ease-out .2s backwards}
:is(.wm-won .wm-exit,.ww-done) .ww-baby{opacity:1;animation:ww-hatch .7s cubic-bezier(.3,1.5,.5,1) .36s backwards,ww-chirp 1.3s ease-in-out 1.1s infinite}
:is(.wm-won .wm-exit,.ww-done) :is(.ww-egg-l,.ww-egg-r){animation:ww-shake .44s ease-in-out .5s 2}
:is(.wm-won .wm-exit,.ww-done) .ww-lid{opacity:0;transform:scaleY(0);animation:ww-lid-shut .2s ease-in backwards}
:is(.wm-won .wm-exit,.ww-done) .ww-lid-open{opacity:1;animation:ww-lid-up .26s ease-out .18s backwards}
:is(.wm-won .wm-exit,.ww-done) .ww-treasure{opacity:1;animation:ww-rise-in .5s cubic-bezier(.3,1.5,.5,1) .3s backwards}
:is(.wm-won .wm-exit,.ww-done) .ww-glow{opacity:1;animation:ww-glow-up .6s ease-out .2s backwards}
:is(.wm-won .wm-exit,.ww-done) .ww-sparks{opacity:1;animation:ww-twinkle 1.4s ease-in-out .5s infinite}
:is(.wm-won .wm-exit,.ww-done) .ww-flame{transform:none;animation:ww-ignite .3s ease-out backwards,ww-thrust .14s ease-in-out .3s infinite alternate}
:is(.wm-won .wm-exit,.ww-done) .ww-rocket{transform:translateY(-15px);animation:ww-liftoff 1s cubic-bezier(.5,0,.3,1) backwards,ww-hover 1.8s ease-in-out 1s infinite}
:is(.wm-won .wm-exit,.ww-done) .ww-smoke{opacity:1;animation:ww-puff .9s ease-out backwards}
.wm-hazard-cell.wm-flare .ww-zap{animation:ww-zap-hit .56s steps(1)}
/* Movement that only plays while the world is moving (not with No movement). */
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-eyes{animation:ww-blink 4.6s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .wm-explorer-body:not(.wm-step,.wm-cheer) .ww-tail{animation:ww-wag 1.8s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .wm-explorer-body:not(.wm-step) .ww-mantle{animation:ww-breathe 2.8s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .wm-explorer-body:not(.wm-step,.wm-cheer) .ww-arms{animation:ww-sway 2.8s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin=space] .ww-walker{animation:ww-hover-bolt 2.4s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin=space] .wm-ground{animation:ww-hover-shadow 2.4s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .wm-explorer-body:not(.wm-step) .ww-jets{animation:ww-flicker .16s ease-in-out infinite alternate}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .wm-explorer-body:not(.wm-cheer) .ww-bulb{animation:ww-bulb 2.4s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-bubble{animation:ww-bubble 2.6s ease-in infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-bubble-2{animation-delay:-1.3s}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-wisps{animation:ww-wisp 3s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-jelly{animation:ww-bob 3s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-tentacles{animation:ww-trail 3s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .wm-hazard-cell:not(.wm-flare) .ww-zap{animation:ww-zap 3s steps(1) infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .wm-hazard .ww-flame{animation:ww-plasma .5s ease-in-out infinite alternate}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-alarm{animation:ww-alarm 1.6s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin] .ww-light{animation:ww-light 1.6s steps(1) infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin]:not(.wm-won) .wm-exit .ww-egg{animation:ww-wobble 3.6s ease-in-out infinite}
#activityPlayer:not([data-world-style=still]) .wm-shell[data-skin]:not(.wm-won) .wm-exit .ww-glow{animation:ww-glow 2.8s ease-in-out infinite}
/* The compass between the signposts, and the scene's guide, who is now on the board. */
.wm-shell[data-skin] .wm-hub{background:none}
.wm-shell[data-skin] .wm-hub-art{width:108%;height:108%;translate:0 0}
#activityPlayer[data-phase=play]:has(.wm-shell[data-skin]) .tk-mascot{display:none}
/* The scenery steps back while the maze is on screen: the goal is in the maze, so the scene's copy
   (the valley's egg nest, the reef's treasure chest) is put away, and the volcano and the planets
   behind the signposts fade so the words stand out. */
#activityPlayer[data-phase=play]:has(.wm-shell[data-skin=dino]) .dv-nest,
#activityPlayer[data-phase=play]:has(.wm-shell[data-skin=ocean]) .oa-near-r .tk-chest{display:none}
#activityPlayer[data-phase=play]:has(.wm-shell[data-skin=dino]) .dv-volcano,
#activityPlayer[data-phase=play]:has(.wm-shell[data-skin=space]) .sv-planets{opacity:.45;filter:saturate(.6)}
@keyframes ww-walk{0%,100%{transform:none}45%{transform:translateY(-6%)}}
@keyframes ww-stride-a{0%,100%{transform:none}30%{transform:translateY(-7px) rotate(-6deg)}}
@keyframes ww-stride-b{0%,100%{transform:none}70%{transform:translateY(-7px) rotate(6deg)}}
@keyframes ww-wag{0%,100%{transform:none}35%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
@keyframes ww-swim{0%,100%{transform:none}35%{transform:translateY(-5%) scale(.95,1.06)}70%{transform:scale(1.04,.96)}}
@keyframes ww-push{0%,100%{transform:none}40%{transform:scale(1.08,.82)}}
@keyframes ww-sway{0%,100%{transform:none}50%{transform:scale(1.03,.96) skewX(3deg)}}
@keyframes ww-breathe{0%,100%{transform:none}50%{transform:scale(1.025,.975)}}
@keyframes ww-glide{0%,100%{transform:none}45%{transform:translateY(-4%) rotate(calc(var(--wm-dx) * 7deg))}}
@keyframes ww-boost{0%,100%{transform:none}35%{transform:scale(1.15,1.5)}}
@keyframes ww-flicker{from{transform:scale(.94,.86)}to{transform:scale(1.04,1.06)}}
@keyframes ww-hover-bolt{0%,100%{transform:none}50%{transform:translateY(-3.5%)}}
@keyframes ww-hover-shadow{0%,100%{transform:none;opacity:1}50%{transform:scale(.86);opacity:.72}}
@keyframes ww-bulb{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes ww-bulb-flash{0%{fill:#fff7c2}50%{fill:#ffd34a}}
@keyframes ww-wave{0%,100%{transform:none}50%{transform:rotate(-26deg)}}
@keyframes ww-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.12)}}
@keyframes ww-bubble{0%{opacity:0;transform:scale(.3)}22%{opacity:1;transform:none}78%{opacity:1;transform:translateY(-3px) scale(1.12)}100%{opacity:0;transform:translateY(-4px) scale(1.5)}}
@keyframes ww-wisp{0%,100%{opacity:.25;transform:none}50%{opacity:.7;transform:translateY(-4px)}}
@keyframes ww-bob{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes ww-trail{0%,100%{transform:none}50%{transform:skewX(5deg) scaleY(.95)}}
@keyframes ww-zap{0%,78%{opacity:0}80%,84%{opacity:1}82%,86%,100%{opacity:0}}
@keyframes ww-zap-hit{0%,30%,60%{opacity:1}15%,45%,100%{opacity:0}}
@keyframes ww-plasma{from{transform:scale(.93,.86)}to{transform:scale(1.05,1.06)}}
@keyframes ww-alarm{0%,100%{opacity:.25}50%{opacity:.85}}
@keyframes ww-light{0%{fill:#ff4f6d}50%{fill:#7a1f33}}
@keyframes ww-wobble{0%,72%,100%{transform:none}78%{transform:rotate(-6deg)}84%{transform:rotate(5deg)}90%{transform:rotate(-2deg)}}
@keyframes ww-glow{0%,100%{opacity:.35}50%{opacity:.6}}
@keyframes ww-shake{0%,100%{transform:none}20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
@keyframes ww-shell-off{from{opacity:1;transform:none}40%{opacity:1;transform:translate(6px,-18px) rotate(14deg)}}
@keyframes ww-hatch{from{opacity:0;transform:translateY(14px) scale(.8)}30%{opacity:1}}
@keyframes ww-chirp{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@keyframes ww-lid-shut{from{opacity:1;transform:none}}
@keyframes ww-lid-up{from{opacity:1;transform:scaleY(0)}}
@keyframes ww-rise-in{from{opacity:0;transform:translateY(12px) scale(.7)}}
@keyframes ww-glow-up{from{opacity:.45;transform:scale(.6)}}
@keyframes ww-twinkle{0%,100%{opacity:1;transform:none}50%{opacity:.35;transform:scale(.8)}}
@keyframes ww-ignite{from{transform:scaleY(0)}}
@keyframes ww-thrust{from{transform:scale(.9,.92)}to{transform:scale(1.06,1.12)}}
@keyframes ww-liftoff{0%{transform:none}8%,24%{transform:translateX(-1.2px)}16%,32%{transform:translateX(1.2px)}40%{transform:none}100%{transform:translateY(-15px)}}
@keyframes ww-hover{0%,100%{transform:translateY(-15px)}50%{transform:translateY(-18px)}}
@keyframes ww-puff{from{opacity:0;transform:scale(.3)}50%{opacity:1}}

@keyframes wm-coin-bob{0%,100%{transform:none}50%{transform:translateY(-7%)}}
@keyframes wm-glint{0%,62%,100%{opacity:0;transform:scale(.3) rotate(0)}74%{opacity:1;transform:scale(1.15) rotate(45deg)}86%{opacity:0;transform:scale(.4) rotate(90deg)}}
@keyframes wm-coin-flip{0%,100%{transform:none}50%{transform:scaleX(-1) scale(1.15)}}
@keyframes wm-bank-up{0%{transform:none}35%{transform:scale(1.16)}100%{transform:none}}
@keyframes wm-step{0%{transform:none}35%{transform:translateY(-16%) scale(.95,1.05)}70%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
@keyframes wm-bump{0%{transform:none}30%{transform:translate(calc(var(--wm-dx) * 20%),calc(var(--wm-dy) * 20%)) scale(.94)}55%{transform:translate(calc(var(--wm-dx) * -6%),calc(var(--wm-dy) * -6%))}100%{transform:none}}
@keyframes wm-ouch{0%{transform:none}26%{transform:translate(calc(var(--wm-dx) * 34%),calc(var(--wm-dy) * 34%)) rotate(calc(var(--wm-dx) * 8deg))}50%{transform:translate(calc(var(--wm-dx) * -8%),calc(var(--wm-dy) * -8%))}64%{transform:translateX(-6%)}78%{transform:translateX(5%)}100%{transform:none}}
@keyframes wm-ouch-tint{20%,55%{filter:drop-shadow(0 0 .3em var(--wm-bad)) saturate(1.3)}}
@keyframes wm-cheer{0%,36%,72%,100%{transform:none}18%{transform:translateY(-24%) rotate(-7deg)}54%{transform:translateY(-16%) rotate(7deg)}}
@keyframes wm-flare{0%{transform:none}30%{transform:scale(1.3) rotate(-5deg)}60%{transform:scale(.94)}100%{transform:none}}
@keyframes wm-hurt{0%,100%{opacity:0}25%,45%{opacity:1}}
@keyframes wm-bonk{0%{scale:.3;rotate:-20deg}60%{scale:1.12;rotate:4deg}100%{scale:1;rotate:0deg}}
@keyframes wm-fade-out{0%,62%{opacity:1}100%{opacity:0}}
@keyframes wm-echo{0%{opacity:0;transform:translateY(16%) scale(.7)}14%{opacity:1;transform:none}72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14%)}}
@keyframes wm-confetti{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(.5)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--a) + 160deg)) translateY(calc(var(--r) * -720%)) scale(1)}}
@keyframes wm-carve{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wm-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes wm-drop{0%{opacity:0;transform:translateY(-38%) scale(.8)}60%{opacity:1}100%{transform:none}}
@keyframes wm-press{40%{transform:translateY(4px)}}
@keyframes wm-nudge{40%{transform:translate(calc(var(--wm-dx) * 7px),calc(var(--wm-dy) * 7px))}}
@keyframes wm-heart-lost{0%{transform:none}25%{transform:scale(1.4) rotate(-10deg)}55%{transform:scale(.8) rotate(6deg)}100%{transform:none}}
@keyframes wm-heart-back{0%{transform:scale(.3)}100%{transform:none}}
@keyframes wm-rise{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- Phones: the player grows for long phrases ---------- */
@media (max-width:700px){
  #activityPlayer.game-shell[data-game=wordmaze]:not(:fullscreen){height:760px;max-height:none}
  #activityPlayer.game-shell[data-game=wordmaze]:not(:fullscreen):has(.wm-shell[data-pictures=true]){height:840px}
  #activityPlayer.game-shell[data-game=wordmaze]:not(:fullscreen):has(.wm-shell[data-wordy=true]){height:920px}
}

/* ---------- Reduced motion: every state still shows, nothing travels ---------- */
@media (prefers-reduced-motion:reduce){
  :where(:root:not([data-motion-managed])) #activityPlayer[data-game=wordmaze] .wm-shell *,:where(:root:not([data-motion-managed])) #activityPlayer[data-game=wordmaze] .wm-shell *::before,:where(:root:not([data-motion-managed])) #activityPlayer[data-game=wordmaze] .wm-shell *::after{animation:none!important;transition:none!important}
  :where(:root:not([data-motion-managed])) #activityPlayer[data-game=wordmaze] .wm-confetti{display:none}
}
:where(:root[data-reduce-motion]) #activityPlayer[data-game=wordmaze] .wm-shell *,:where(:root[data-reduce-motion]) #activityPlayer[data-game=wordmaze] .wm-shell *::before,:where(:root[data-reduce-motion]) #activityPlayer[data-game=wordmaze] .wm-shell *::after{animation:none!important;transition:none!important}
:where(:root[data-reduce-motion]) #activityPlayer[data-game=wordmaze] .wm-confetti{display:none}

/* Authoring uses the same compact picture/word fields as the other games. */
.wordmaze-editor-intro{max-width:76ch;margin:0 0 20px;color:#4e6678;line-height:1.55}
.wordmaze-editor-round .item-panel{min-width:0}
.wordmaze-round-title{font-size:20px;margin:0 0 16px;color:#25384a}
.wordmaze-direction-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.wordmaze-editor-direction{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;min-width:0}
.wordmaze-editor-arrow{display:grid;place-items:center;margin-top:33px;width:28px;height:36px;color:#266d9a;font:800 28px/1 sans-serif}
.wordmaze-editor-direction .editor-field{min-width:0}
@media(max-width:650px){.wordmaze-direction-fields{grid-template-columns:1fr;gap:16px}.wordmaze-editor-round{padding-inline:12px}.wordmaze-editor-intro{font-size:14px}}

/* Source: css/game-text-fit.css; sha256: 420ffb91f22347fc34e1c30fd312a49d2905c4f024a4e3531a732db867c3c013 */
/* A reading board only appears when a memory card cannot hold its full text
   at a readable size. Vocabulary boards keep their original card grid. */
#activityPlayer #gameStage .memory-grid[data-text-reading=true]{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  width:100%;max-width:880px!important
}
#activityPlayer #gameStage .memory-grid[data-text-reading=true] .memory-card{
  min-height:var(--memory-reading-height,180px);aspect-ratio:auto;min-width:0;width:100%
}
/* A successfully measured square needs no arbitrary three-line truncation.
   Very long passages still open in the existing full reading dialog. */
#activityPlayer .ttt-cell .ttt-text[data-card-text-fit=fit]{
  display:block;-webkit-line-clamp:unset;overflow:visible
}
/* A centred flex caption must use the answer's width, not shrink-wrap the
   previous font size. Long unbroken words can wrap at the readable minimum. */
#activityPlayer .options .opt .answer-content{width:100%}
#activityPlayer .options .opt .answer-content>span{
  min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap
}
/* Measured vocabulary has one size per card role. A caption must occupy the
   available row instead of shrink-wrapping yesterday's tiny font. */
#activityPlayer #gameStage [data-card-text-role]{
  min-width:0;max-width:100%;white-space:pre-wrap;word-break:normal
}
#activityPlayer #gameStage [data-card-text-role][data-card-text-fit=fit]{
  overflow:visible;text-overflow:clip;-webkit-line-clamp:unset
}
#activityPlayer #gameStage :is(.sort-caption,.diagram-label>[data-user-content]){width:100%}
#activityPlayer #gameStage :is(.pair-face-content,.quiz-choice-content,.answer-content):has(>[data-card-text-fit=fit]){overflow:visible}

/* Source: css/classroom-media.css; sha256: bf0f421a93e60b468c3348b4b652da070edc2ccd65f82e9c8dbc78740fd48a48 */
/* Wide quiz choices use their horizontal space for a full picture beside its
   label. Phone cards keep a vertical composition with an explicit image area. */
@media(min-width:621px){
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image .quiz-choice-content{flex-direction:row;gap:18px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image .quiz-choice-content img{flex:0 0 42%;width:42%;height:100%;max-width:42%;max-height:100%;object-fit:contain}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image .quiz-choice-content:not(:has(>span)) img{flex:1 1 auto;width:100%;max-width:100%}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image .quiz-choice-content>span{flex:1;min-width:0;max-width:100%;line-height:1.3}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image{min-height:132px;padding:12px 38px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-shell{overflow-y:auto;overscroll-behavior:contain;padding:4px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choices:has(.has-image){min-height:calc(var(--quiz-rows) * 132px + (var(--quiz-rows) - 1) * 1.4cqw)}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question.has-image:not(.is-passage){min-height:108px;max-height:120px;flex:0 0 auto}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question.has-image:not(.is-passage) img{width:clamp(90px,13cqw,160px);height:90px;max-height:100%;object-fit:contain;flex:none}
}
#activityPlayer[data-game=quiz] #gameStage .quiz-choice-content:has(>[data-card-text-fit=reading]){overflow:hidden}
#activityPlayer[data-game=quiz] #gameStage .quiz-choice-content>[data-card-text-fit=reading]{flex:1 1 auto;min-height:0;max-height:100%;overflow:auto;text-align:start;overscroll-behavior:contain}
@media(max-width:620px){
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice-wrap:has(.has-image){height:210px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image .quiz-choice-content img{width:100%;height:100px;min-height:100px;max-height:100px;flex:none;object-fit:contain}
}

/* Memory cards must retain useful picture/letter size. Long decks can scroll;
   the grid fitter must never narrow the whole board to postage-stamp cards. */
#activityPlayer[data-game=matchingpairs] #gameStage .memory-grid:not([data-text-reading=true]){width:100%;max-width:1100px}
#activityPlayer[data-game=matchingpairs] #gameStage .memory-grid:not([data-text-reading=true]) .memory-card{width:100%;min-width:0;min-height:132px}
#activityPlayer[data-game=matchingpairs] #gameStage .memory-face .pair-face-picture{flex:1;max-height:none}
#activityPlayer[data-game=matchingpairs] #gameStage .memory-face .pair-face-picture img{width:100%;height:100%;object-fit:contain}
@media(max-width:620px){
  #activityPlayer[data-game=matchingpairs] #gameStage .memory-grid:not([data-text-reading=true]){grid-template-columns:repeat(2,minmax(0,1fr))}
  #activityPlayer[data-game=matchingpairs] #gameStage .memory-grid:not([data-text-reading=true]) .memory-card{min-height:132px;aspect-ratio:1.15}
}


/* Picture clues are teaching material too, not decorative list icons. */
#activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words img{width:64px;height:64px;flex:none;object-fit:contain}
#activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li{flex:none;font-size:clamp(18px,2cqw,26px)}
@media(min-width:621px) and (max-width:900px){
  /* A narrow side tray should not break ordinary vocabulary into syllables. */
  #activityPlayer[data-game=groupsort] #gameStage .sort-layout:not([data-wordy=true]):has(.sort-cols>.sort-col:nth-child(-n+2):last-child){--bank-columns:2!important;--group-columns:1!important}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li:has(img){display:grid;grid-template-columns:18px minmax(0,1fr) auto;grid-template-rows:64px auto;gap:5px}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li:has(img) .wordsearch-check{grid-column:1;grid-row:1 / span 2}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li:has(img) img{grid-column:2;grid-row:1;justify-self:center}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li:has(img)>span:not(.wordsearch-check){grid-column:2;grid-row:2;min-width:0;text-align:center}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words li:has(img) .puzzle-audio{grid-column:3;grid-row:1 / span 2}
}
@media(max-width:620px){
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words img{width:52px;height:52px}
  #activityPlayer[data-game=wordsearch] #gameStage .wordsearch-words:has(img){grid-template-columns:1fr}
}

/* Landscape phones need a composition for their short height. Keep full
   vocabulary and useful pictures visible while controls retain touch targets. */
@media(min-width:621px) and (max-height:500px){
  #activityPlayer[data-game=quiz] #gameStage .quiz-question.has-image:not(.is-passage){min-height:64px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-question.has-image:not(.is-passage) img{height:52px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image{min-height:88px;padding:8px 38px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choices:has(.has-image){min-height:calc(var(--quiz-rows) * 88px + (var(--quiz-rows) - 1) * 8px)}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image .quiz-choice-content{height:100%}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice.has-image .quiz-choice-content img{height:68px;max-height:68px}
  #activityPlayer[data-game=quiz] #gameStage .quiz-choice-content:has(>[data-card-text-fit=reading]){height:120px}
}

/* Source: css/fullscreen-canvas.css; sha256: 1c935a96424d7a89d291d700481e4ae44c018520390a12a0a9fcec428621d5ab */
/* Full screen enlarges the game as one piece (js/fullscreen-canvas.js), and the page behind the
   full-screen player never shows a scroll bar. */
/* The stage is also the size container its pieces measure themselves against (cqw), so their
   sizes follow the stage's own layout width rather than the full-screen player's. */
#activityPlayer:fullscreen[data-canvas=zoom] #gameStage { zoom: var(--cp-canvas, 1); container-type: inline-size; }
html:has(#activityPlayer:fullscreen), html:has(#activityPlayer:fullscreen) body { overflow: hidden; }

/* Source: css/game-fonts.css; sha256: 90b802db7ee593b684dbd76a7d29c49c3a7b82b1f5b61827e847da74a3641d66 */
/* An explicit teacher font belongs to the lesson, not the surrounding world.
   The existing licensed handwriting face is local on phones and computers. */
@font-face {
  font-family: "ClassPlay Hand";
  src: url("../assets/fonts/tracing-fonts/PatrickHand-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
#activityPlayer[data-font]:not([data-font="default"]):not([data-game="lettertracing"]) :is(#sTitle,#gTitle) {
  font-family: var(--cp-content-font) !important;
}
#activityPlayer[data-font]:not([data-font="default"]):not([data-game="lettertracing"]) #gameStage :is(
  [data-user-content]:not(img):not(button),
  .pair-face-text,
  .quiz-question-content > span,
  .quiz-choice-content > span,
  .answer-content > span,
  #iqText,
  .sort-caption,
  .sort-heading h4,
  .ag-clue,
  .ag-tile,
  .ag-slot,
  .unjumble-word,
  .unjumble-slot > [data-word],
  .sentence-text,
  .sentence-word,
  .sentence-gap,
  .rank-item-content,
  .diagram-caption,
  .diagram-label > span,
  .wordsearch-cell,
  .wordsearch-words li,
  .jp-caption,
  .jp-picture-caption,
  .ttt-text,
  .ttt-reading-text,
  .me-passage,
  .me-key,
  .wheel-picked-label
) {
  font-family: var(--cp-content-font) !important;
}

/* Source: css/wheel-multi.css; sha256: efc9395da6666c89bee516de089bf2d4927da4e69aa397b726fc6a8be6831062 */
/* Wheels are the activity: extra lists share the same themed rim, pointer and hub. */
.activity-player[data-game="wheel"] #gameStage[data-wheel-count] { min-height: 0; }
.activity-player[data-game="wheel"] .wheel-single-viewport { min-height: 0; display: grid; place-items: center; }
.activity-player[data-game="wheel"] .wheel-toolbar { flex: 0 0 auto; align-items: center; gap: clamp(7px, 1.2cqw, 18px); margin: 0; }
.activity-player[data-game="wheel"] .wheel-duration { display: flex; align-items: center; gap: 7px; font-size: clamp(12px, 1.45cqw, 20px); font-weight: 700; color: var(--wk-ink, #263e4b); }
.activity-player[data-game="wheel"] .wheel-duration [data-wheel-duration-label] { color: #223f51; background: #f5fbff; padding: .15em .35em; border-radius: 5px; line-height: 1.2; }
.activity-player[data-game="wheel"] .wheel-duration select { min-width: 68px; min-height: 44px; border: 1px solid var(--wk-line, #c5d2db); border-radius: 10px; padding: 5px 9px; background: #f5fbff; color: #193b54; font: inherit; }
.activity-player[data-game="wheel"] .wheel-multi-area { width: 100%; height: 100%; gap: clamp(5px, 1cqw, 14px); }
.activity-player[data-game="wheel"] .wheel-grid { width: 100%; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: clamp(5px, 1.1cqw, 16px); }
.activity-player[data-game="wheel"] #gameStage:is([data-wheel-count="3"], [data-wheel-count="4"]) .wheel-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.activity-player[data-game="wheel"] #gameStage[data-wheel-layout="wide"][data-wheel-count="3"] .wheel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.activity-player[data-game="wheel"] #gameStage[data-wheel-layout="wide"][data-wheel-count="4"] .wheel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.activity-player[data-game="wheel"] .wheel-unit { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 4px; }
.activity-player[data-game="wheel"] .wheel-name { max-width: 92%; margin: 0; padding: 3px 10px; border: 1px solid var(--wk-line, #b4ccd7); border-radius: 999px; background: #f5fbff; font-size: clamp(13px, 1.8cqw, 26px); font-weight: 800; line-height: 1.15; color: #193b54; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.activity-player[data-game="wheel"] .wheel-viewport { min-height: 0; width: 100%; height: 100%; display: grid; place-items: center; padding-left: 3%; }
.activity-player[data-game="wheel"] .wheel-unit .wheel-spin { min-width: 80px; min-height: 44px; padding: 4px 16px; font-size: clamp(13px, 1.5cqw, 22px); line-height: 1.1; }
/* Relative sizing preserves each world's artwork on the smaller independent wheels. */
#activityPlayer[data-game="wheel"] #gameStage[data-wheel-count]:not([data-wheel-count="1"]) .wheel-hub { width: 20% !important; height: 20% !important; min-width: 32px; min-height: 32px; }
#activityPlayer[data-game="wheel"] #gameStage[data-wheel-count]:not([data-wheel-count="1"]) .wheel-pointer { left: -15.5% !important; width: 19.5% !important; height: 12% !important; }
.activity-player[data-game="wheel"] .wheel-result-segment { color: var(--selected-ink, #fff); overflow: auto; min-height: 0; max-height: 100%; flex-shrink: 1; }
.activity-player[data-game="wheel"] .wheel-picked-label { flex-shrink: 0; overflow-wrap: anywhere; }
.activity-player[data-game="wheel"] .wheel-result-segment > img { width: auto; max-height: 18cqw; max-width: 90%; object-fit: contain; flex-shrink: 0; }
.activity-player[data-game="wheel"] .wheel-result-name { font-size: clamp(13px, 1.8cqw, 24px); font-weight: 800; opacity: .9; }
.activity-player[data-game="wheel"] .wheel-picked-many .wheel-result { gap: 1.5cqw; }
.activity-player[data-game="wheel"] .wheel-result-grid { width: 100%; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.5cqw, 24px); overflow: auto; }
.activity-player[data-game="wheel"] .wheel-result-grid .wheel-result-segment { width: 100%; padding: 1.7cqw; gap: 1cqw; border-radius: 1.5cqw; box-sizing: border-box; }
.activity-player[data-game="wheel"] .wheel-result-grid .wheel-result-segment > img { max-height: 10cqw; }
.activity-player[data-game="wheel"] .wheel-result-remove { display: flex; align-items: center; gap: 7px; font-size: clamp(13px, 1.5cqw, 20px); min-height: 36px; cursor: pointer; }
.activity-player[data-game="wheel"] .wheel-result-remove input { accent-color: #2278b1; width: 20px; height: 20px; }
.activity-player[data-game="wheel"] .wheel-review-icon { width: 62px; height: 48px; flex: 0 0 62px; display: grid; place-items: center; font-size: 24px; }
/* Focus keeps one actual wheel large; switching only hides its neighbours. */
.activity-player[data-game="wheel"] .wheel-name { min-height: 44px; cursor: zoom-in; font-family: inherit; }
.activity-player[data-game="wheel"] .wheel-name::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 7px; vertical-align: -.1em; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.activity-player[data-game="wheel"] .wheel-focus-nav { flex: 0 0 auto; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 5px 8px; }
.activity-player[data-game="wheel"] .wheel-focus-tabs { min-width: 0; display: grid; grid-template-columns: repeat(var(--wheel-tabs, 4), minmax(0, 1fr)); gap: 5px; }
.activity-player[data-game="wheel"] :is(.wheel-focus-tabs, .wheel-result-tabs) button,
.activity-player[data-game="wheel"] .wheel-all-view { min-width: 0; min-height: 44px; padding: 6px 9px; border: 1px solid #a7c2d3; border-radius: 10px; background: #f5fbff; color: #193b54; font-family: inherit; font-size: clamp(14px, 1.5cqw, 20px); font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.activity-player[data-game="wheel"] :is(.wheel-focus-tabs, .wheel-result-tabs) button { display: flex; align-items: center; gap: 5px; }
.activity-player[data-game="wheel"] .wheel-focus-tabs button { position: relative; white-space: nowrap; padding-left: 6px; padding-right: 14px; }
.activity-player[data-game="wheel"] .wheel-nav-number { flex: 0 0 20px; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: #193b54; color: #fff; font-size: 12px; line-height: 1; font-weight: 800; }
.activity-player[data-game="wheel"] .wheel-nav-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-player[data-game="wheel"] :is(.wheel-focus-tabs, .wheel-result-tabs) button[aria-selected="true"] { border-color: #176ba3; background: #dceffc; box-shadow: inset 0 -3px 0 #176ba3; }
.activity-player[data-game="wheel"] .wheel-focus-tabs button[data-state="spinning"]::after { content: ''; position: absolute; right: 5px; top: calc(50% - 4px); width: 8px; height: 8px; border: 2px solid #176ba3; border-right-color: transparent; border-radius: 50%; animation: wheel-nav-spin .7s linear infinite; }
.activity-player[data-game="wheel"] .wheel-focus-tabs button[data-state="picked"]::after { content: ''; position: absolute; right: 5px; top: calc(50% - 3px); width: 6px; height: 6px; background: #176ba3; border-radius: 50%; }
.activity-player[data-game="wheel"] .wheel-focus-status { grid-column: 1/-1; font-size: 13px; line-height: 1.2; background: #f5fbff; color: #193b54; justify-self: center; padding: 2px 8px; border-radius: 5px; }
.activity-player[data-game="wheel"] .wheel-focus-status:empty { display: none; }
#activityPlayer[data-game="wheel"] #gameStage[data-wheel-view="focus"][data-wheel-count] .wheel-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.activity-player[data-game="wheel"] #gameStage[data-wheel-view="focus"] .wheel-name { cursor: default; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; font-size: clamp(14px, 2cqw, 24px); }
.activity-player[data-game="wheel"] #gameStage[data-wheel-view="focus"] .wheel-name::after { display: none; }
.activity-player[data-game="wheel"] :is(.wheel-unit, .wheel-focus-nav, .wheel-result-tabs, .wheel-result-segment)[hidden] { display: none !important; }
/* A result has three fixed boundaries: tabs, a bounded reading body, and actions. */
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .gmodal.wheel-picked { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; max-height: 100%; padding: clamp(8px, 2cqw, 26px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .gmodal.wheel-picked > .box.wheel-result { width: 100%; height: 100%; max-height: 100%; min-height: 0; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: clamp(6px, 1cqw, 14px); overflow: hidden; box-sizing: border-box; }
.activity-player[data-game="wheel"] .wheel-result-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(var(--wheel-tabs, 4), minmax(0, 1fr)); gap: 6px; }
.activity-player[data-game="wheel"] .wheel-result-tabs button { font-size: clamp(14px, 1.8cqw, 22px); white-space: nowrap; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-results-body { flex: 1 1 0; min-height: 0; width: 100%; max-height: 100%; display: flex; justify-content: center; overflow: hidden; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: clamp(8px, 1.4cqw, 20px); }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-result-segment { min-width: 0; min-height: 0; max-height: 100%; width: 100%; box-sizing: border-box; padding: clamp(8px, 1.7cqw, 24px); display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; overflow: hidden; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-result-reading { flex: 1 1 0; min-height: 0; width: 100%; padding: 1px 3px; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked-label { box-sizing: border-box; font-size: var(--wheel-result-font, clamp(20px, 4cqw, 56px)); min-height: 0; padding-block: .2em; line-height: 1.25; overflow-wrap: anywhere; white-space: pre-wrap; }
.activity-player[data-game="wheel"] .wheel-result-reading > img { display: block; width: auto; max-width: 90%; max-height: min(23cqw, 180px); object-fit: contain; margin: 0 auto 10px; }
.activity-player[data-game="wheel"] .wheel-result-name { flex: 0 0 auto; min-width: 0; font-size: clamp(16px, 2cqw, 26px); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.activity-player[data-game="wheel"] .wheel-result-tools { flex: 0 0 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.activity-player[data-game="wheel"] .wheel-result-tools:empty { display: none; }
.activity-player[data-game="wheel"] :is(.wheel-listen, .wheel-result-remove) { min-height: 44px; box-sizing: border-box; padding: 6px 10px; font-size: max(16px, 1.5cqw); }
.activity-player[data-game="wheel"] .wheel-result-remove { gap: 8px; }
.activity-player[data-game="wheel"] .wheel-result-remove input { width: 22px; height: 22px; flex: 0 0 22px; }
.activity-player[data-game="wheel"] .wheel-result-actions { flex: 0 0 auto; min-height: 44px; margin: 0; display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; }
.activity-player[data-game="wheel"] .wheel-result-actions .btn { min-height: 44px; min-width: 68px; padding: 7px 12px; font-size: clamp(16px, 1.8cqw, 24px); }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-result-actions .btn:is(:hover, :focus-visible, :active) { transform: none; translate: none; scale: none; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-mode="pages"] .wheel-result-grid { display: flex; }
/* A short winner is a compact centred reveal, rather than an almost empty page. */
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .gmodal.wheel-picked[data-result-size="compact"] > .box.wheel-result { width: fit-content; min-width: min(70%, 380px); max-width: 92%; height: auto; max-height: 100%; gap: clamp(10px, 1.5cqw, 18px); }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .gmodal.wheel-picked-many[data-result-size="compact"] > .box.wheel-result { width: min(92%, 900px); min-width: 0; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-size="compact"] .wheel-results-body { flex: 0 1 auto; width: auto; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-size="compact"] .wheel-result-segment { width: 100%; padding: clamp(18px, 3cqw, 40px); }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked-many[data-result-size="compact"] .wheel-result-segment { padding: clamp(12px, 1.8cqw, 24px); }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-size="compact"] .wheel-result-reading { flex: 0 1 auto; padding: 2px; scrollbar-gutter: auto; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-result-segment[data-short-result="true"] .wheel-result-reading { display: flex; flex-direction: column; align-items: center; justify-content: safe center; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-result-segment[data-short-result="true"] .wheel-picked-label { text-align: center; width: 100%; }
/* The illustrated pointer keeps its character; this fixed nose marks the exact winning ray. */
.activity-player[data-game="wheel"] .wheel-pointer-tip { position: absolute; left: .5%; top: 50%; width: 5%; height: 7%; transform: translateY(-50%); z-index: 3; overflow: visible; pointer-events: none; }
.activity-player[data-game="wheel"] .wheel-pointer-tip path { fill: #fffdf0; stroke: var(--wk-line, #193b54); stroke-width: 2.5; stroke-linejoin: round; }
/* A selected picture gets a bounded, centered stage in the world's own paper and ink. */
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-result-segment { background: var(--wk-card-flat, #f6fbff); color: var(--wk-flat-ink, #193b54); border: 2px solid var(--wk-line, #193b54); border-top: clamp(5px, .65cqw, 9px) solid var(--selected-color); box-shadow: 0 4px 0 var(--wk-drop, #193b5426); }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-size="picture"] > .box.wheel-result { width: min(84%, 900px); height: min(92%, 760px); max-height: 100%; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked-many[data-result-size="picture"] > .box.wheel-result { width: 96%; height: 96%; }
.activity-player[data-game="wheel"] .wheel-result-picture { display: grid; place-items: center; min-width: 0; min-height: 0; width: 100%; height: clamp(80px, 28cqw, 280px); }
.activity-player[data-game="wheel"] .wheel-result-picture img { display: block; width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-size="picture"] .wheel-result-reading { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: center; gap: clamp(6px, 1cqw, 14px); overflow: hidden; scrollbar-gutter: auto; }
.activity-player[data-game="wheel"] .wheel-picked[data-result-size="picture"] .wheel-result-picture { height: 100%; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-size="picture"][data-result-mode="grid"] .wheel-result-reading { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked-many[data-result-size="picture"] .wheel-picked-label { font-size: clamp(20px, 3cqw, 40px); line-height: 1.15; }
#activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked-label:empty { display: none; }
.activity-player[data-game="wheel"] .wheel-result-name { text-align: center; }
@media (max-width: 600px) {
  #activityPlayer[data-game="wheel"] #gameStage[data-game="wheel"][data-wheel-count] .wheel-picked[data-result-size="picture"] > .box.wheel-result { width: 98%; height: 94%; }
}
@keyframes wheel-nav-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { :where(:root:not([data-motion-managed])) .activity-player[data-game="wheel"] .wheel-focus-tabs button[data-state="spinning"]::after { animation: none; } }
:where(:root[data-reduce-motion]) .activity-player[data-game="wheel"] .wheel-focus-tabs button[data-state="spinning"]::after { animation: none; }
@media (max-width: 600px) {
  #activityPlayer.game-shell[data-game="wheel"]:not(:fullscreen):has(#gameStage:is([data-wheel-count="3"], [data-wheel-count="4"]))::before { height: calc(100cqw + 180px); }
  .activity-player[data-game="wheel"] .wheel-toolbar { gap: 6px; flex-wrap: nowrap; }
  .activity-player[data-game="wheel"] .wheel-toolbar .btn { font-size: 14px; padding: 6px 10px; min-height: 44px; }
  .activity-player[data-game="wheel"] .wheel-duration { flex-direction: column; gap: 2px; font-size: 12px; line-height: 1; }
  .activity-player[data-game="wheel"] .wheel-duration select { min-height: 32px; padding: 3px 7px; }
  .activity-player[data-game="wheel"] .wheel-result-grid { gap: 8px; }
  .activity-player[data-game="wheel"] .wheel-result-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-player[data-game="wheel"] .wheel-result-actions { gap: 6px; }
  .activity-player[data-game="wheel"] .wheel-result-actions .btn { padding-inline: 8px; }
}