:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: the existing Mr Wagemans bands (yellow → charcoal → sky blue → white → yellow), tidied with wave edges, one content width and the dancing stick men as the only decoration. Deliberately single-theme: brand colours. */
:root {
  --yellow: #f7c849;
  --yellow-deep: #eab52a;
  --sky: #80c0f3;
  --sky-soft: #d6ebfc;
  --charcoal: #404040;
  --ink: #262626;
  --ink-soft: #555b61;
  --white: #ffffff;
  --blue: #0057e1;
  --blue-dark: #0046b5;
  --line: #e4e6e8;
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fig: url("/assets/img-8607156902.webp");
  --radius: 18px;
  --kid: 'Mr Wagemans Print', 'Andika', "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { animation: none !important; transition: none !important; } }
body { background: var(--white); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; }
/* Every classroom tool uses the Mr Wagemans Print font, including drag ghosts that sit outside the tool while moving */
.tool-body, .sp-ghost, .nn-ghost, .wg-ghost, .wm-ghost { --display: var(--kid); --body: var(--kid); font-family: var(--kid); }
.tool-body h1, .tool-body h2, .tool-body h3 { letter-spacing: 0; }
.tool-body button, .tool-body input, .tool-body select, .tool-body textarea { font-family: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.eyebrow { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1rem; padding: 13px 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; font-family: var(--body); transition: transform .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-dark); }
.btn-dark { background: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: var(--ink); }
.btn-line { border-color: var(--charcoal); color: var(--charcoal); background: transparent; }
.btn-yt { display: inline-flex; align-items: center; gap: 8px; }
.btn-yt svg { width: 22px; height: 22px; flex: none; color: #e5484d; }
.btn-line:hover { background: rgba(255,255,255,.4); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--yellow); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--yellow); border-bottom: 1px solid rgba(64,64,64,.12); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 48px; height: 48px; border-radius: 50%; background: var(--white); object-fit: cover; object-position: center 30%; border: 2px solid var(--charcoal); }
.brand span { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--charcoal); letter-spacing: -.02em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a.link { text-decoration: none; font-weight: 700; color: var(--charcoal); padding: 8px 12px; border-radius: 999px; font-size: .95rem; }
.nav a.link:hover { background: rgba(255,255,255,.5); }
.nav .btn { padding: 9px 16px; font-size: .92rem; margin-left: 6px; }
.menu-btn { display: none; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--charcoal); background: rgba(255,255,255,.55); border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; }
.mobile-menu { background: var(--yellow); border-top: 1px solid rgba(64,64,64,.12); }
.top .mobile-menu .wrap { display: grid; justify-content: stretch; gap: 0; padding-block: 8px 14px; }
.brand span { white-space: nowrap; }
@media (max-width: 480px) { .menu-btn .lbl { display: none; } .menu-btn { padding: 9px 11px; } .brand span { font-size: 1.15rem; } .brand img { width: 42px; height: 42px; } .nav .btn { padding: 9px 13px; margin-left: 2px; } }
.mobile-menu a { text-decoration: none; font-weight: 700; color: var(--charcoal); padding: 12px 4px; border-bottom: 1px solid rgba(64,64,64,.12); }
.mobile-menu a:last-child { border-bottom: 0; }
@media (max-width: 1040px) { .nav a.link { display: none; } .menu-btn { display: inline-flex; } }
@media (min-width: 1041px) { .mobile-menu { display: none !important; } }

/* Hero */
.hero { background: var(--yellow); position: relative; }
.hero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding-block: 56px 24px; }
.hero .eyebrow { color: var(--charcoal); opacity: .8; }
.hero h1 { font-size: clamp(2.5rem, 6.5vw, 4.4rem); color: var(--charcoal); margin-top: 12px; }
.hero h1 em { font-style: normal; color: var(--white); -webkit-text-stroke: 2px var(--charcoal); paint-order: stroke fill; }
.hero .lede { margin-top: 18px; font-size: 1.2rem; color: var(--ink); max-width: 36ch; }
.hero .ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.ticks { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 700; color: var(--charcoal); font-size: .95rem; }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--charcoal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23f7c849' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.stage { position: relative; aspect-ratio: 1; max-width: 360px; width: 100%; justify-self: center; }
.stage .face { position: absolute; inset: 12%; border-radius: 50%; background: var(--sky); border: 4px solid var(--charcoal); overflow: hidden; }
.stage .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig { display: block; background: var(--fig) center/contain no-repeat; aspect-ratio: 142/170; }
.stage .fig { position: absolute; width: 22%; }
.stage .f1 { left: -2%; top: 4%; transform: rotate(-8deg); }
.stage .f2 { right: -4%; top: 30%; transform: scaleX(-1) rotate(-6deg); width: 18%; }
.stage .f3 { left: 6%; bottom: -2%; width: 17%; transform: scaleX(-1); }
@keyframes bop { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.stage .fig { animation: bop 1.6s ease-in-out infinite; }
.stage .f2 { animation-delay: .4s; } .stage .f3 { animation-delay: .8s; }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 36px 16px; }
  .stage { max-width: 260px; }
}

/* Wave edges between bands */
.wave { display: block; width: 100%; height: 48px; }
.wave path { fill: currentColor; }
.to-charcoal { color: var(--charcoal); background: var(--yellow); }
.to-sky { color: var(--sky); background: var(--charcoal); }
.to-white { color: var(--white); background: var(--sky); }
.to-soft { color: var(--sky-soft); background: var(--white); }
.to-yellow { color: var(--yellow); background: var(--sky-soft); }

/* About */
.about { background: var(--charcoal); color: var(--white); }
.about .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 40px 56px; }
.about .eyebrow { color: var(--yellow); }
.about h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-top: 10px; }
.about p { margin-top: 16px; color: #e6e6e6; max-width: 52ch; font-size: 1.1rem; }
.promises { display: grid; gap: 14px; align-content: center; }
.promise { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 18px; }
.promise .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); display: grid; place-items: center; color: var(--charcoal); }
.promise .ic svg { width: 24px; height: 24px; }
.promise h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.promise p { margin-top: 4px; font-size: .98rem; color: #d3d3d3; }
@media (max-width: 820px) { .about .wrap { grid-template-columns: 1fr; gap: 28px; } }

/* Section heads */
.head { display: grid; gap: 10px; max-width: 62ch; margin-bottom: 32px; }
.head h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); color: var(--charcoal); }
.head p { color: var(--ink); font-size: 1.1rem; }

/* Brain breaks */
.breaks { background: var(--sky); }
.breaks .wrap { padding-block: 40px 56px; }
.breaks .eyebrow { color: var(--blue-dark); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card { min-width: 0; background: var(--white); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.pill { align-self: flex-start; font-weight: 700; font-size: .82rem; padding: 4px 12px; border-radius: 999px; background: var(--sky-soft); color: var(--blue-dark); }
.card h3 { font-size: 1.55rem; color: var(--charcoal); }
.card p { color: var(--ink-soft); flex: 1; }
.card .btn { align-self: flex-start; padding: 10px 18px; font-size: .95rem; }

/* PE + resources */
.more .wrap { padding-block: 40px 56px; display: grid; gap: 56px; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.split .eyebrow { color: var(--blue); }
.split .head { margin: 0; }
.feature { background: var(--charcoal); color: var(--white); border-radius: var(--radius); padding: 30px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.feature h3 { font-size: 1.8rem; color: var(--yellow); }
.feature p { color: #e0e0e0; max-width: 46ch; }
.feature .btn { justify-self: start; }
.feature .fig { position: absolute; width: 74px; right: 22px; bottom: 18px; filter: invert(1); opacity: .9; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 24px; } }
.res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .res { grid-template-columns: 1fr; } }
.resources { background: var(--sky-soft); }
.resources .wrap { padding-block: 40px 56px; }
.res .card { box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.res .pill { background: var(--yellow); color: var(--charcoal); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: .85rem; padding: 3px 10px; border-radius: 999px; background: #f3f4f5; color: var(--ink); }
/* Download counter on printable cards */
.dl-count { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--ink-soft); }
.dl-count svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.dl-count strong { color: var(--charcoal); font-variant-numeric: tabular-nums; }
.use-count { display: flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--ink-soft); margin: 0; }
.use-count svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.use-count strong { color: var(--charcoal); font-variant-numeric: tabular-nums; }
.tool-card .use-count { margin-top: auto; }
.tool-head .use-count { margin-left: auto; }
.soon { align-self: flex-start; font-weight: 700; font-size: .92rem; padding: 9px 16px; border-radius: 999px; border: 2px dashed #c9cdd1; color: var(--ink-soft); }

/* Share band */
.share { background: var(--yellow); }
.share .wrap { padding-block: 40px 0; text-align: center; display: grid; justify-items: center; gap: 14px; }
.share h2 { font-size: clamp(2rem, 5vw, 3.2rem); color: var(--charcoal); }
.share p { max-width: 54ch; font-size: 1.1rem; }
.share .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.linkbox { display: flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--charcoal); border-radius: 999px; padding: 6px 6px 6px 18px; max-width: 100%; margin-top: 6px; }
.linkbox code { font-family: var(--body); font-weight: 700; font-size: .95rem; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; user-select: all; }
.linkbox .btn { padding: 8px 16px; font-size: .9rem; flex: none; }
.dancefloor { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; width: 100%; margin-top: 28px; padding-inline: 4%; }
.dancefloor .fig { width: clamp(28px, 5vw, 52px); }
.dancefloor .fig:nth-child(2n) { transform: scaleX(-1); }
.dancefloor .fig:nth-child(3n) { width: clamp(24px, 4vw, 42px); }
.dancefloor .fig:nth-child(n+6) { display: none; }
@media (min-width: 640px) { .dancefloor .fig:nth-child(n+6) { display: block; } }


/* Home teaser for printables */
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.teaser .head { margin: 0; }
.peek { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.peek li { background: var(--white); border-radius: var(--radius); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.peek-t { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--charcoal); letter-spacing: -.01em; }
.tag { font-weight: 700; font-size: .82rem; padding: 4px 12px; border-radius: 999px; background: #eef0f2; color: var(--ink-soft); }
.tag.ok { background: var(--yellow); color: var(--charcoal); }
.tag-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 7px 14px; font-size: .88rem; border: 2px solid var(--charcoal); transition: transform .15s ease, background-color .15s ease; }
.tag-btn:hover { transform: translateY(-2px); background: var(--charcoal); color: var(--yellow); }
.tag-btn svg { width: 16px; height: 16px; }
@media (max-width: 820px) { .teaser { grid-template-columns: 1fr; gap: 24px; } }

/* Printables page */
.p-hero { background: var(--sky-soft); }
.p-hero .wrap { padding-block: 32px 40px; display: grid; gap: 10px; }
.p-hero h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); color: var(--charcoal); }
.p-hero .lede { font-size: 1.15rem; max-width: 52ch; }
.reach { justify-self: start; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; background: var(--white); border-radius: 999px; padding: 7px 16px 7px 12px; font-size: .95rem; color: var(--ink-soft); max-width: 100%; }
.reach svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.reach strong { color: var(--charcoal); font-variant-numeric: tabular-nums; }
.back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; color: var(--charcoal); padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--white); margin-bottom: 14px; }
.back:hover { background: var(--yellow); }
.back svg { width: 18px; height: 18px; }
.p-list .wrap { padding-block: 40px 64px; display: grid; gap: 40px; }
.p-list .res .card { border: 1px solid var(--line); box-shadow: none; }
.p-list .res .pill { background: var(--yellow); color: var(--charcoal); }
.p-cta { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; background: var(--yellow); border-radius: var(--radius); padding: 24px 28px; }
.p-cta .fig { width: 52px; }
.p-cta h2 { font-size: 1.5rem; color: var(--charcoal); }
.p-cta p { margin-top: 4px; }
@media (max-width: 700px) { .p-cta { grid-template-columns: 1fr; justify-items: start; } }


/* Printables: filters */
.p-tools { display: grid; gap: 16px; }
.search { display: flex; align-items: center; gap: 10px; background: var(--white); border: 2px solid var(--line); border-radius: 999px; padding: 4px 18px; max-width: 460px; }
.search:focus-within { border-color: var(--blue); }
.search svg { width: 20px; height: 20px; color: var(--ink-soft); flex: none; }
.search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); padding: 9px 0; width: 100%; min-width: 0; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat { font: inherit; font-weight: 700; font-size: .95rem; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.cat:hover { background: var(--sky-soft); }
.cat[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
.cat .n { font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .7; }
.years { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.years-lab { font-weight: 700; font-size: .9rem; color: var(--ink-soft); margin-right: 4px; }
.yr { font: inherit; font-weight: 700; font-size: .88rem; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--white); color: var(--charcoal); cursor: pointer; }
.yr:hover { border-color: var(--sky); background: var(--sky-soft); }
.yr[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.card-years { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: .9rem; font-weight: 700; color: var(--blue-dark); }
.card-years svg { width: 18px; height: 18px; flex: none; color: var(--blue); }
.card-suggested { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; padding: 3px 12px 3px 8px; border-radius: 999px; background: var(--yellow); color: var(--charcoal); border: 2px solid var(--charcoal); }
.card-suggested svg { width: 17px; height: 17px; flex: none; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-type { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.empty { text-align: center; color: var(--ink-soft); padding: 24px; border: 2px dashed var(--line); border-radius: var(--radius); }


/* Work with me */
.standards { display: grid; gap: 14px; }
.standards h2 { font-size: 1.6rem; color: var(--charcoal); }
.standards .ticks { margin: 0; }
.contact { background: var(--charcoal); color: var(--white); border-radius: var(--radius); padding: 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.contact h2 { font-size: 1.8rem; color: var(--yellow); }
.contact p { margin-top: 6px; color: #e0e0e0; max-width: 46ch; }
.contact-actions { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.contact .linkbox { border-color: var(--yellow); margin: 0; }
.contact .linkbox { min-width: 0; }
@media (max-width: 480px) { .contact .linkbox { flex-wrap: wrap; border-radius: 18px; padding: 10px 12px 10px 16px; } .contact .linkbox code { flex: 1 1 100%; white-space: normal; overflow: visible; } }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; } }
.foot-link { color: #cfcfcf; font-weight: 700; font-size: .92rem; }


/* Classroom tools list */
.tool-card { text-decoration: none; color: inherit; border: 1px solid var(--line); box-shadow: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.tool-card:hover, .tool-card:focus-visible, .p-list .res .tool-card:hover, .p-list .res .tool-card:focus-visible { transform: translateY(-3px); border-color: #9ccef6; background: #e3f1fd; box-shadow: 0 10px 22px rgba(0,87,225,.08); }
.tool-card:focus-visible { outline: none; }
.tool-card .btn svg { transition: transform .18s ease; }
.tool-card:hover .btn svg, .tool-card:focus-visible .btn svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .tool-card, .tool-card .btn svg { transition: none; } .tool-card:hover, .tool-card:focus-visible { transform: none; } }
.tool-card .btn { align-self: flex-start; }
.mini-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 4px; }
.mini-grid span { aspect-ratio: 1; display: grid; place-items: center; font-size: .62rem; font-weight: 700; background: #f3f4f5; border-radius: 4px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mini-grid .y { background: var(--yellow); color: var(--charcoal); }
.mini-grid .b { background: var(--blue); color: var(--white); }
.soon-card { background: var(--sky-soft); border: 0; box-shadow: none; position: relative; }
.soon-card .fig { width: 46px; }

/* Paint the Squares */
.tool-head { background: var(--sky-soft); }
.tool-head .wrap { padding-block: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tool-head .back { margin: 0; }
.tool-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--charcoal); }
.tool-body .wrap { padding-block: 24px 56px; }
.pts { display: grid; gap: 14px; background: var(--white); }
.pts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.seg { display: inline-flex; flex-wrap: wrap; background: #f0f2f4; border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 700; font-size: .95rem; border: 0; border-radius: 999px; padding: 9px 16px; background: transparent; color: var(--charcoal); cursor: pointer; }
.seg button svg { width: 18px; height: 18px; }
.seg button[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 2px #d5d9dd; cursor: pointer; padding: 0; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--charcoal); transform: scale(1.08); }
.field { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--ink-soft); }
.field select, .field input { font: inherit; font-weight: 700; color: var(--charcoal); border: 2px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--white); }
.field input { width: 6.5em; }
.field select:focus, .field input:focus { border-color: var(--blue); outline: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.act { font: inherit; font-weight: 700; font-size: .92rem; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.act:hover { background: var(--yellow); }
.count { margin-left: auto; font-weight: 700; color: var(--ink-soft); background: var(--yellow); color: var(--charcoal); border-radius: 999px; padding: 8px 16px; font-variant-numeric: tabular-nums; }
.count b { font-size: 1.15rem; }
.pts-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none; font-size: clamp(.85rem, 2.6vw, 1.7rem); }
.sq { aspect-ratio: 1; min-width: 0; border: 2px solid #dde1e5; border-radius: 10px; background: var(--white); color: var(--charcoal); font: inherit; font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; display: grid; place-items: center; transition: background-color .12s ease, transform .12s ease; line-height: 1; overflow: hidden; }
.sq:hover { border-color: var(--charcoal); }
.sq.painted { border-color: transparent; }
.sq.hid span { visibility: hidden; }
.sq.hid { background-image: repeating-linear-gradient(45deg, rgba(64,64,64,.06) 0 6px, transparent 6px 12px); }
.sq.pop { transform: scale(.92); }
.pts-tip { color: var(--ink-soft); font-size: .95rem; }
.full-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 1rem; border: 0; border-radius: 999px; padding: 11px 20px; background: var(--blue); color: var(--white); cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.full-btn:hover { background: var(--blue-dark); transform: translateY(-2px); }
.full-btn svg { width: 20px; height: 20px; }
.sound-btn { display: inline-flex; align-items: center; gap: 6px; }
.sound-btn svg { width: 18px; height: 18px; }
.sound-btn .wave-off { display: none; }
.sound-btn[aria-pressed="false"] .wave-on { display: none; }
.sound-btn[aria-pressed="false"] .wave-off { display: inline; }
.pts.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; align-content: start; }
.pts.is-full .pts-grid { width: min(100%, calc((100vh - 230px) * var(--ratio, 1))); margin: 0 auto; font-size: min(3.2vh, 2.4vw); }
.pts.is-full .pts-tip { display: none; }
@media (max-width: 600px) { .full-btn { margin-left: 0; } .pts.is-full .pts-grid, .pts:fullscreen .pts-grid { width: 100%; font-size: clamp(.85rem, 3.4vw, 1.4rem); } }
.pts:fullscreen { padding: 20px 28px; overflow: auto; align-content: start; }
.pts:fullscreen .pts-grid { width: min(100%, calc((100vh - 230px) * var(--ratio, 1))); margin: 0 auto; font-size: min(3.2vh, 2.4vw); }
.pts:fullscreen .pts-tip { display: none; }
@media (max-width: 600px) { .pts-grid { gap: 3px; } .sq { border-radius: 6px; border-width: 1px; } .count { margin-left: 0; } }


/* Rekenrek */
.tools-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
#classroom-tools .p-list .wrap { gap: 28px; }
.tool-card .mini-grid, .tool-card .mini-rek { height: 110px; align-content: center; }
.tool-card .mini-timer { height: 110px; width: 110px; }
.tools-grid .empty { grid-column: 1 / -1; margin: 0; }
/* See more: the tools and printables pages show 9 cards at a time */
.more-wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.more-btn.less { background: var(--white); }
.more-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--charcoal); background: var(--yellow); border: 2px solid var(--charcoal); border-radius: 999px; padding: 12px 24px; cursor: pointer; box-shadow: 0 3px 0 var(--charcoal); transition: transform .12s ease, box-shadow .12s ease; }
.more-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--charcoal); }
.more-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--charcoal); }
.more-btn svg { width: 20px; height: 20px; }
.more-btn .n { font-weight: 400; color: var(--ink-soft); }
.mini-rek { display: grid; gap: 8px; background: var(--charcoal); border-radius: 12px; padding: 12px 10px; margin-bottom: 4px; }
.mini-rek div { display: flex; align-items: center; gap: 2px; position: relative; }
.mini-rek div::before { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: #c9ced3; }
.mini-rek i { position: relative; width: 16px; height: 16px; border-radius: 50%; flex: none; }
.mini-rek .r { background: radial-gradient(circle at 38% 32%, #ff7b7b, #c4161c); }
.mini-rek .w { background: radial-gradient(circle at 38% 32%, #ffffff, #cfd4d9); }
.mini-rek b { flex: 1; }
.rk { display: grid; gap: 14px; background: var(--white); --u: 48px; }
.rk-stage { position: relative; justify-self: center; max-width: 100%; }
.rk-frame { background: var(--charcoal); border-radius: calc(var(--u) * .45); padding: calc(var(--u) * .5) calc(var(--u) * .55); display: grid; gap: calc(var(--u) * .24); box-shadow: 0 8px 0 rgba(0,0,0,.08); }
.rk-row { display: flex; align-items: center; gap: calc(var(--u) * .35); }
.rk-row.split { margin-top: calc(var(--u) * .3); }
.rk-track { position: relative; width: calc(var(--u) * 20); height: var(--u); flex: none; }
.rk-track::before { content: ""; position: absolute; left: calc(var(--u) * -.25); right: calc(var(--u) * -.25); top: 50%; height: max(3px, calc(var(--u) * .09)); transform: translateY(-50%); background: linear-gradient(#e3e6e9, #a9b0b6); border-radius: 3px; }
.rk-bead { position: absolute; left: 0; top: 0; width: var(--u); height: var(--u); border-radius: 50%; padding: 0; border: 0; cursor: grab; touch-action: none; --c1: #ff6b6b; --c2: #c4161c;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.75) 0 14%, rgba(255,255,255,0) 15%), radial-gradient(circle at 45% 40%, var(--c1), var(--c2) 75%);
  box-shadow: inset 0 calc(var(--u) * -.08) calc(var(--u) * .14) rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.3); will-change: transform; }
.rk-bead.w { --c1: #ffffff; --c2: #c3c9cf; }
.rk-bead.b { --c1: #4d8fff; --c2: #0046b5; }
.rk-bead:active { cursor: grabbing; }
.rk-row.anim .rk-bead { transition: transform .28s cubic-bezier(.3, .8, .3, 1); }
.rk-n { min-width: calc(var(--u) * 1.1); text-align: center; font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * .62); color: var(--yellow); font-variant-numeric: tabular-nums; }
.rk.no-nums .rk-n { visibility: hidden; }
.rk.no-nums .rk-total b { visibility: hidden; }
.rk-cover { position: absolute; inset: 0; border-radius: calc(var(--u) * .45); background: repeating-linear-gradient(45deg, var(--sky) 0 18px, #9ccef6 18px 36px); display: grid; place-items: center; }
.rk-cover span { font-family: var(--display); font-weight: 800; font-size: calc(var(--u) * 2.2); color: var(--white); -webkit-text-stroke: 3px var(--charcoal); paint-order: stroke fill; }
.rk.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; align-content: start; }
.rk:fullscreen { padding: 20px 28px; overflow: auto; align-content: start; }
.rk.is-full .pts-tip, .rk:fullscreen .pts-tip { display: none; }
.rk.is-full, .rk:fullscreen { grid-template-rows: auto auto 1fr; align-content: stretch; }
.rk.is-full .rk-stage, .rk:fullscreen .rk-stage { align-self: start; justify-self: center; }

/* Ten frame */
.mini-tf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 190px; height: auto !important; background: var(--charcoal); border-radius: 12px; padding: 8px; margin-bottom: 4px; align-self: flex-start; }
.mini-tf i { aspect-ratio: 1; background: #fff; border-radius: 5px; display: grid; place-items: center; }
.mini-tf i::after { content: ""; width: 72%; height: 72%; border-radius: 50%; }
.mini-tf i.r::after { background: radial-gradient(circle at 38% 32%, #ff7b7b, #c4161c); }
.mini-tf i.y::after { background: radial-gradient(circle at 38% 32%, #ffe28a, #e0a800); }
.tf { display: grid; gap: 14px; background: var(--white); --cell: 110px; }
.tf-stage { position: relative; justify-self: center; max-width: 100%; }
.tf-frame { display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(2, var(--cell)); gap: calc(var(--cell) * .07); padding: calc(var(--cell) * .09); background: var(--charcoal); border-radius: calc(var(--cell) * .16); box-shadow: 0 8px 0 rgba(0,0,0,.08); }
.tf-cell { position: relative; padding: 0; border: 0; background: var(--white); border-radius: calc(var(--cell) * .1); cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.tf-cell:hover { background: #fff8e1; }
.tf-cell:focus-visible { outline: 4px solid var(--sky); outline-offset: 2px; }
.tf-cell::after { content: ""; width: 74%; height: 74%; border-radius: 50%; transform: scale(0); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); --c1: #ff6b6b; --c2: #c4161c;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0 13%, rgba(255,255,255,0) 14%), radial-gradient(circle at 45% 40%, var(--c1), var(--c2) 75%);
  box-shadow: inset 0 calc(var(--cell) * -.05) calc(var(--cell) * .09) rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.25); }
.tf-cell.y::after { --c1: #ffe28a; --c2: #e0a800; }
.tf-cell.on::after { transform: scale(1); }
.tf-sum { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
.tf-sum .count { margin-left: 0; }
.tf-sum .count.red { background: #fde0e1; }
.tf-sum .count.ten { background: #e3f1fd; }
.tf.no-nums .tf-sum b { visibility: hidden; }
.tf-cover { position: absolute; inset: 0; border-radius: calc(var(--cell) * .16); background: repeating-linear-gradient(45deg, var(--sky) 0 18px, #9ccef6 18px 36px); display: grid; place-items: center; }
.tf-cover span { font-family: var(--display); font-weight: 800; font-size: calc(var(--cell) * 1.1); color: var(--white); -webkit-text-stroke: 3px var(--charcoal); paint-order: stroke fill; }
.tf.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.tf:fullscreen { padding: 20px 28px; overflow: auto; }
.tf.is-full, .tf:fullscreen { grid-template-rows: auto auto 1fr; align-content: stretch; }
.tf.is-full .pts-tip, .tf:fullscreen .pts-tip { display: none; }
.tf.is-full .tf-stage, .tf:fullscreen .tf-stage { align-self: center; }
@media (max-width: 600px) { .tf-sum { margin-left: 0; } }

/* Dice frame */
.mini-hd { display: flex; gap: 6px; background: var(--charcoal); border-radius: 12px; padding: 7px; margin-bottom: 4px; align-self: flex-start; height: auto !important; }
.mini-hd i { width: 84px; height: 84px; background: #fff; border-radius: 9px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 8px; }
.mini-hd b { border-radius: 50%; margin: 3px; }
.mini-hd b.r { background: radial-gradient(circle at 38% 32%, #ff7b7b, #c4161c); }
.mini-hd b.y { background: radial-gradient(circle at 38% 32%, #ffe28a, #e0a800); }
.hd { display: grid; gap: 14px; background: var(--white); --die: 200px; }
.hd-sets { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px 40px; }
.hd-set { display: grid; gap: 10px; justify-items: center; }
.hd-label { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--charcoal); background: var(--yellow); border-radius: 999px; padding: 4px 16px; }
.hd-set.pupil .hd-label { background: var(--sky); }
.hd-stage { position: relative; max-width: 100%; display: grid; gap: calc(var(--die) * .1); }
.hd-frame { display: grid; grid-template-columns: repeat(2, var(--die)); gap: calc(var(--die) * .05); padding: calc(var(--die) * .05); background: var(--charcoal); border-radius: calc(var(--die) * .1); box-shadow: 0 8px 0 rgba(0,0,0,.08); }
.hd-die { position: relative; width: var(--die); height: var(--die); padding: calc(var(--die) * .07); background: var(--white); border-radius: calc(var(--die) * .08); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); touch-action: none; transition: background-color .15s ease; }
.hd-die.over { background: #e6f4e0; }
.hd-die.full { background: #f4f4f4; }
.hd-dot { display: grid; place-items: center; cursor: pointer; border-radius: 50%; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: none; }
.hd-dot:focus-visible { outline: 3px solid var(--sky); outline-offset: -2px; }
.hd-dot:not(.on):hover::before { content: ""; width: 60%; height: 60%; border-radius: 50%; border: 2px dashed #d6d6d6; grid-area: 1 / 1; }
.hd-dot::after { content: ""; grid-area: 1 / 1; width: 82%; height: 82%; border-radius: 50%; transform: scale(0); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); --c1: #ff6b6b; --c2: #c4161c;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0 13%, rgba(255,255,255,0) 14%), radial-gradient(circle at 45% 40%, var(--c1), var(--c2) 75%);
  box-shadow: inset 0 calc(var(--die) * -.018) calc(var(--die) * .03) rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.25); }
.hd-die.y .hd-dot::after { --c1: #ffe28a; --c2: #e0a800; }
.hd-dot.on::after { transform: scale(1); }
.hd-dot.on { cursor: grab; }
.hd-tray { justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--die) * .05); max-width: 100%; min-height: calc(var(--die) * .3); padding: calc(var(--die) * .05) calc(var(--die) * .09); background: #f2ece0; border: 3px dashed #c9b994; border-radius: 999px; }
.hd-tray-label { font-weight: 700; color: #8a7a55; padding-right: 4px; }
.hd-chip, .hd-drag { width: calc(var(--die) * .18); height: calc(var(--die) * .18); max-width: 56px; max-height: 56px; min-width: 30px; min-height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0 13%, rgba(255,255,255,0) 14%), radial-gradient(circle at 45% 40%, #ff6b6b, #c4161c 75%); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.hd-chip:focus-visible { outline: 4px solid var(--sky); outline-offset: 2px; }
.hd-drag { position: fixed; z-index: 60; pointer-events: none; width: calc(var(--die) * .22); height: calc(var(--die) * .22); max-width: none; max-height: none; transform: translate(-50%, -50%); cursor: grabbing; box-shadow: 0 8px 14px rgba(0,0,0,.3); }
.hd-drag.y { background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0 13%, rgba(255,255,255,0) 14%), radial-gradient(circle at 45% 40%, #ffe28a, #e0a800 75%); }
.hd-tick { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.hd-tick svg { width: calc(var(--die) * .9); height: calc(var(--die) * .9); filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); animation: hd-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hd-pop { from { transform: scale(0); } }
.hd-status { min-height: 1.5em; font-weight: 700; font-size: 1.1rem; color: var(--charcoal); text-align: center; }
.hd-mode-btn[aria-pressed="true"] { background: var(--yellow); }
.hd.match .hd-norm, .hd.match .hd-sumbar { display: none; }
.hd-sum { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
.hd-sum .count { margin-left: 0; }
.hd-sum .count.red { background: #fde0e1; }
.hd-sum .count.ten { background: #e3f1fd; }
.hd.no-nums .hd-sum b { visibility: hidden; }
.hd-cover { position: absolute; inset: 0; z-index: 3; border-radius: calc(var(--die) * .1); background: repeating-linear-gradient(45deg, var(--sky) 0 18px, #9ccef6 18px 36px); display: grid; place-items: center; }
.hd-cover span { font-family: var(--display); font-weight: 800; font-size: calc(var(--die) * .8); color: var(--white); -webkit-text-stroke: 3px var(--charcoal); paint-order: stroke fill; }
.hd.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.hd:fullscreen { padding: 20px 28px; overflow: auto; }
.hd.is-full, .hd:fullscreen { align-content: start; }
.hd.is-full .pts-tip, .hd:fullscreen .pts-tip { display: none; }
@media (max-width: 600px) { .hd-sum { margin-left: 0; } }

/* Phonics flash cards */
.mini-fc { position: relative; width: 200px; height: 112px; margin-bottom: 4px; align-self: flex-start; }
.mini-fc span { position: absolute; display: grid; place-items: center; width: 118px; height: 82px; border: 3px solid var(--charcoal); border-radius: 14px; background: var(--white); font: 700 46px var(--kid); color: var(--charcoal); }
.mini-fc span:nth-child(1) { left: 10px; top: 18px; transform: rotate(-8deg); background: #fdf0c8; }
.mini-fc span:nth-child(2) { left: 70px; top: 14px; transform: rotate(5deg); background: #e3f1fd; }
.fc { display: grid; gap: 16px; background: var(--white); }
.fc-setup { display: grid; gap: 14px; }
.fc-setup > * { min-width: 0; }
.fc-row .field { flex-wrap: wrap; max-width: 100%; }
.fc-row .field select { max-width: 100%; min-width: 0; }
.fc-setup h2 { font-size: 1.4rem; color: var(--charcoal); }
.fc-setup p { color: var(--ink-soft); }
.fc-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fc-text { width: 100%; min-height: 120px; resize: vertical; font: 700 1.5rem/1.5 var(--kid); color: var(--charcoal); border: 2px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.fc-text:focus { outline: none; border-color: var(--blue); }
.fc-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 10px; }
.fc-preview span { font: 700 1.05rem var(--kid); color: var(--charcoal); background: #f6f7f8; border: 2px solid var(--line); border-radius: 10px; padding: 2px 10px; }
.fc-preview .more { background: transparent; border-color: transparent; color: var(--ink-soft); font-family: inherit; }
.fc-foot { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; border-top: 2px solid var(--line); padding-top: 14px; }
.fc-ready { font-weight: 700; color: var(--ink-soft); }
.fc-ready.ok { color: #1f7a43; }
.fc-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.fc-check input { width: 20px; height: 20px; accent-color: var(--blue); }
.fc-play { display: grid; gap: 14px; }
.fc-stage { position: relative; display: grid; place-items: center; padding: 10px 0; perspective: 1400px; }
.fc-card { position: relative; width: min(100%, 760px); aspect-ratio: 16 / 10; container-type: inline-size; display: grid; place-items: center; background: var(--white); border: 5px solid var(--charcoal); border-radius: 32px; box-shadow: 0 10px 0 rgba(0,0,0,.08); overflow: hidden; cursor: pointer; --tint: #fdf0c8; transition: transform .16s ease-in; }
.fc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14px; background: var(--tint); }
.fc-card.out { transform: rotateY(90deg); }
.fc-card.in { transition-timing-function: ease-out; }
.fc-word { font-family: var(--kid); font-weight: 700; color: var(--charcoal); line-height: 1.3; text-align: center; padding: 0 4cqw 3cqw; white-space: nowrap; }
.fc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #eef1f4; }
.fc-bar i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.fc-bar i.run { animation: fcbar var(--dur, 3s) linear forwards; }
.fc-bar i.paused { animation-play-state: paused; }
@keyframes fcbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fc-card.manual .fc-bar { display: none; }
.fc-done { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 16px; background: var(--yellow); border-radius: 0; text-align: center; padding: 20px; }
.fc-done b { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 9cqw, 5rem); color: var(--charcoal); }
.fc-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
.fc-ctl { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--charcoal); background: var(--white); color: var(--charcoal); display: grid; place-items: center; cursor: pointer; }
.fc-ctl svg { width: 28px; height: 28px; }
.fc-ctl.big { width: 80px; height: 80px; background: var(--blue); border-color: var(--blue); color: var(--white); }
.fc-ctl.big svg { width: 36px; height: 36px; }
.fc-ctl.big .ic-play { display: none; } .fc-ctl.big.paused .ic-play { display: inline; } .fc-ctl.big.paused .ic-pause { display: none; }
.fc-ctl:disabled { opacity: .4; cursor: default; }
.fc-count { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--charcoal); min-width: 7.5em; text-align: center; }
.fc.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.fc:fullscreen { padding: 18px 26px; overflow: auto; }
.fc.is-full .fc-play:not([hidden]), .fc:fullscreen .fc-play:not([hidden]) { display: flex; flex-direction: column; height: 100%; }
.fc.is-full .fc-play > *, .fc:fullscreen .fc-play > * { flex: 0 0 auto; }
.fc.is-full .fc-stage, .fc:fullscreen .fc-stage { flex: 1 1 0; min-height: 0; container-type: size; }
.fc.is-full .fc-card, .fc:fullscreen .fc-card { width: min(100cqw, 160cqh); }
.fc.is-full .pts-tip, .fc:fullscreen .pts-tip { display: none; }
@media (max-width: 600px) { .fc-card { border-width: 4px; border-radius: 22px; } .fc-ctl { width: 54px; height: 54px; } .fc-ctl.big { width: 68px; height: 68px; } .fc-text { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .fc-card { transition: none; } }

/* World map drag and drop */
.mini-wm { width: 220px; height: 114px; margin-bottom: 4px; align-self: flex-start; }
.wm { display: grid; gap: 12px; background: var(--white); }
.wm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 2.4em; }
.wm-score { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--charcoal); background: #e3f1fd; border-radius: 999px; padding: 6px 16px; }
.wm-msg { font-weight: 800; font-size: 1.1rem; }
.wm-msg.ok { color: #1f7a43; } .wm-msg.no { color: #c4161c; }
.wm-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 64px; padding: 12px; background: #f6f7f8; border-radius: 18px; align-items: center; }
.wm-chip { font: inherit; font-family: var(--display); font-weight: 800; font-size: 1.15rem; padding: 10px 18px; border-radius: 999px; border: 3px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .15s ease; }
.wm-chip.ocean { background: #cfe8fa; font-style: italic; }
.wm-chip:hover { transform: translateY(-2px); }
.wm-chip.sel { outline: 4px solid var(--blue); outline-offset: 3px; transform: scale(1.06); }
.wm-chip.lift { visibility: hidden; }
.wm-chip.nope { animation: wmshake .45s ease; }
@keyframes wmshake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.wm-ghost { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%) rotate(-3deg) scale(1.08); box-shadow: 0 10px 22px rgba(0,0,0,.25); cursor: grabbing; }
.wm-done-msg { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: #1f7a43; }
.wm-mapbox { position: relative; }
.wm-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.wm-sea { fill: #cfe8fa; stroke: var(--charcoal); stroke-width: 2.5; }
.wm-land { fill: #ece6d6; stroke: var(--charcoal); stroke-width: 1; stroke-linejoin: round; transition: fill .45s ease; cursor: pointer; }
.wm-land.done { fill: var(--c); }
.wm-land.hover:not(.done) { fill: #fff1b8; }
.wm-land.bad { animation: wmbad .7s ease; }
@keyframes wmbad { 30% { fill: #f5a3a6; } }
.wm-lab rect { fill: var(--white); stroke: var(--charcoal); stroke-width: 2.5; }
.wm-lab text { font: 800 17px var(--display); fill: var(--charcoal); }
.wm-lab.ocean rect { fill: #ffffff; stroke: #1f5fa8; stroke-dasharray: 4 3; }
.wm-lab.ocean text { fill: #1f5fa8; font-style: italic; }
.wm-lab > g { animation: wmpop .45s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes wmpop { from { transform: scale(0); } }
.wm-lab.shown rect { stroke: #8a96a3; }
.wm.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.wm:fullscreen { padding: 18px 26px; overflow: auto; }
.wm.is-full, .wm:fullscreen { display: flex; flex-direction: column; height: 100%; }
.wm.is-full > *, .wm:fullscreen > * { flex: 0 0 auto; }
.wm.is-full .pts-tip, .wm:fullscreen .pts-tip { display: none; }
.wm.is-full .wm-mapbox, .wm:fullscreen .wm-mapbox { flex: 1 1 0; min-height: 160px; container-type: size; }
.wm.is-full .wm-svg, .wm:fullscreen .wm-svg { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh * 1.923); height: min(100cqh, 100cqw / 1.923); }
.wm.is-full .wm-chip, .wm:fullscreen .wm-chip { font-size: clamp(1.1rem, 2.2vh, 1.6rem); }
@media (max-width: 600px) { .wm-chip { font-size: .98rem; padding: 8px 13px; } .wm-tray { gap: 8px; padding: 10px; } }

/* On-screen number pad */
.np { position: absolute; z-index: 70; left: 0; top: 0; width: 250px; display: grid; gap: 8px; padding: 10px; background: var(--white); border: 3px solid var(--charcoal); border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.np[hidden] { display: none; }
.np-head { display: flex; align-items: center; gap: 8px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; padding: 0 2px; }
.np-head:active { cursor: grabbing; }
.np-head b { flex: 1; font-family: var(--display); font-size: 1rem; color: var(--charcoal); }
.np-grip { width: 22px; height: 14px; background: radial-gradient(circle, #9aa3ab 1.6px, transparent 1.8px) 0 0 / 7px 7px; }
.np-x { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); font: 800 1.2rem/1 var(--display); color: var(--charcoal); cursor: pointer; display: grid; place-items: center; padding: 0; }
.np-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.np-key { font: inherit; font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; padding: .45em 0; border: 2px solid var(--charcoal); border-radius: 12px; background: var(--white); color: var(--charcoal); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.np-key:active { transform: translateY(2px); background: #fff8e1; }
.np-key.del { font-size: 1.3rem; }
.np-key.ok { background: var(--blue); border-color: var(--blue); color: var(--white); font-size: 1.15rem; }
.np-target { outline: 5px solid var(--sky); outline-offset: 4px; animation: np-glow 1.4s ease-in-out infinite; }
@keyframes np-glow { 50% { outline-color: rgba(128,192,243,.35); } }
.is-full .np, :fullscreen .np { width: 300px; }
.is-full .np-key, :fullscreen .np-key { font-size: 2rem; }
.is-full .np-key.ok, :fullscreen .np-key.ok, .is-full .np-key.del, :fullscreen .np-key.del { font-size: 1.3rem; }
.bm:not(.is-full), .pw:not(.is-full) { position: relative; }
@media (max-width: 600px) { .np { width: 210px; } .np-key { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .np-target { animation: none; } }
.bm-seg.miss.typed { color: var(--blue); }

/* Decorate the tree */
.xt.tug .tug-scene { width: min(100%, 980px); margin: 0 auto; }
.xt.tug.kids .tug-scene { width: min(100%, 700px); }
.xt-scene .twinkle { fill: #ffffff; animation: xttw 2.4s ease-in-out infinite alternate; }
@keyframes xttw { from { opacity: .25; } to { opacity: 1; } }
.xt-scene .moon circle { fill: #fff6d6; }
.xt-scene .hill { fill: #e8f1fa; } .xt-scene .snow-ground { fill: #ffffff; }
.xt-tree .trunk { fill: #8a5a36; stroke: var(--charcoal); stroke-width: 4; }
.xt-tree .tub { stroke: var(--charcoal); stroke-width: 4; stroke-linejoin: round; }
.xt-tree.t1 .tub { fill: var(--t1); } .xt-tree.t2 .tub { fill: var(--t2); }
.xt-tree .tub-band { stroke: #f7c849; stroke-width: 5; }
.xt-tree .leaf { stroke: var(--charcoal); stroke-width: 4; stroke-linejoin: round; }
.xt-tree .l1 { fill: #2f8f55; } .xt-tree .l2 { fill: #37a062; } .xt-tree .l3 { fill: #42b06e; }
.xt-tree .orn { opacity: 0; transition: opacity .25s ease; }
.xt-tree .orn.on { opacity: 1; }
.xt-tree .orn .pop { transform-box: fill-box; transform-origin: center; }
.xt-tree .orn.on .pop { animation: xtpop .55s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes xtpop { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }
.xt-tree .bauble circle:not(.shine) { stroke: var(--charcoal); stroke-width: 3.5; }
.xt-tree .bauble .cap { fill: #c9b26a; stroke: var(--charcoal); stroke-width: 2.5; }
.xt-tree .bauble .shine { fill: #ffffff; opacity: .7; }
.xt-tree .garland path { fill: none; stroke: #f7c849; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 7; }
.xt-tree.t1 .garland path { stroke: #f7c849; } .xt-tree.t2 .garland path { stroke: #e8ecef; }
.xt-tree .garland.on path { animation: xtdraw .8s ease; }
@keyframes xtdraw { from { opacity: 0; transform: translateY(-14px); } }
.xt-tree .cane-w { fill: none; stroke: #ffffff; stroke-width: 7; stroke-linecap: round; }
.xt-tree .cane-r { fill: none; stroke: #e5484d; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 5 5; }
.xt-tree .cane .pop { filter: drop-shadow(0 0 0 #404040); }
.xt-tree .xt-lights, .xt-tree .xt-gifts, .xt-tree .xt-star { opacity: 0; pointer-events: none; }
.xt-tree .xt-gifts rect { stroke: var(--charcoal); stroke-width: 3.5; }
.xt-tree .xt-gifts .ribbon { fill: none; stroke: #ffffff; stroke-width: 5; } .xt-tree .xt-gifts .ribbon.r2 { stroke: #e5484d; }
.xt-tree .xt-gifts .bow { fill: #ffffff; stroke: var(--charcoal); stroke-width: 2; } .xt-tree .xt-gifts .bow.r2 { fill: #e5484d; }
.xt-tree .xt-star { transform: translate(0, 58px); }
.xt-tree .xt-star path { fill: #f7c849; stroke: var(--charcoal); stroke-width: 4; stroke-linejoin: round; }
.xt-tree .xt-star .glow { fill: #fff3b0; opacity: .45; }
.xt-tree .xt-star .spin { transform-box: fill-box; transform-origin: center; }
.xt-tree.won .xt-star { opacity: 1; }
.xt-tree.won .xt-star .spin { animation: xtstar 1s cubic-bezier(.2, .9, .3, 1.3) both, xtglow 1.6s ease-in-out 1s infinite alternate; }
@keyframes xtstar { 0% { transform: translateY(-140px) scale(.3) rotate(-200deg); } 100% { transform: none; } }
@keyframes xtglow { to { filter: drop-shadow(0 0 10px #fff3b0); } }
.xt-tree.won .xt-lights { opacity: 1; transition: opacity .4s ease .5s; }
.xt-tree.won .xt-lights circle { stroke: var(--charcoal); stroke-width: 1.5; animation: xtlight .9s ease-in-out infinite alternate; }
@keyframes xtlight { from { opacity: .35; } to { opacity: 1; } }
.xt-tree.won .xt-gifts { opacity: 1; transition: opacity .5s ease .8s; }
.xt-tree.cheer { animation: xtcheer .55s ease; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes xtcheer { 35% { transform: scale(1.03, .97); } 70% { transform: scale(.99, 1.02); } }
.xt-snow circle { fill: #ffffff; opacity: .9; animation: xtfall linear infinite; }
@keyframes xtfall { from { transform: translate(0, -30px); } to { transform: translate(var(--dx, 20px), 470px); } }
.xt-confetti path { animation: pbconf 1.4s cubic-bezier(.2, .8, .3, 1) forwards; }
.mini-xt { width: 220px; height: 110px; margin-bottom: 4px; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .xt-snow { display: none; } }
/* Pop the balloon */
.mini-pb { width: 220px; height: 110px; margin-bottom: 4px; align-self: flex-start; }
.pb-scene .pb-sky { fill: #d9eefc; }
.pb-scene .cloud ellipse { fill: #ffffff; }
.pb-scene .cloud.c1 { transform: translate(500px, 70px); animation: mcdrift 38s linear infinite alternate; }
.pb-scene .cloud.c2 { transform: translate(160px, 40px); animation: mcdrift2 46s linear infinite alternate; }
.pb-scene .grass { fill: #7cc36b; }
.pb-popline { fill: none; stroke-width: 4; stroke-dasharray: 12 10; opacity: .55; }
.pb-popline.t1, .pb-poplabel.t1 { stroke: var(--t1); fill: none; } .pb-popline.t2, .pb-poplabel.t2 { stroke: var(--t2); }
.pb-poplabel { font: 800 22px var(--display); stroke: none !important; }
.pb-poplabel.t1 { fill: var(--t1); } .pb-poplabel.t2 { fill: var(--t2); }
.pb-bal.t1 { --bc: var(--t1); } .pb-bal.t2 { --bc: var(--t2); }
.pb-skin, .pb-knot { fill: var(--bc); stroke: var(--charcoal); stroke-width: 5; vector-effect: non-scaling-stroke; }
.pb-shine { fill: #ffffff; opacity: .45; }
.pb-neck { stroke: var(--charcoal); stroke-width: 5; }
.pb-hose { fill: none; stroke: var(--charcoal); stroke-width: 6; stroke-linecap: round; }
.pb-grow { transform-origin: 0 0; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), opacity .12s ease; }
.pb-sway { transform-origin: 0 0; animation: pbsway 3.2s ease-in-out infinite alternate; }
.pb-bal.t2 .pb-sway { animation-delay: -1.6s; }
@keyframes pbsway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.pb-bal.puff .pb-sway { animation: pbpuff .6s ease; }
@keyframes pbpuff { 30% { transform: scale(1.06, .96); } 60% { transform: scale(.97, 1.03); } }
.pb-pump .barrel, .pb-pump .foot { fill: #9aa3ab; stroke: var(--charcoal); stroke-width: 4; }
.pb-pump.t1 .barrel { fill: #c9def7; } .pb-pump.t2 .barrel { fill: #f7d0d1; }
.pb-pump .handle line { stroke: var(--charcoal); stroke-width: 6; }
.pb-pump .handle rect { fill: var(--charcoal); }
.pb-pump.go .handle { animation: pbpush .55s ease; }
@keyframes pbpush { 45% { transform: translateY(30px); } }
.pb-burst { opacity: 0; pointer-events: none; }
.pb-burst path { stroke: var(--charcoal); stroke-width: 7; stroke-linecap: round; fill: none; }
.pb-burst text { font: 800 64px var(--display); fill: var(--yellow); stroke: var(--charcoal); stroke-width: 4; paint-order: stroke fill; }
.pb-bal.popped .pb-grow { transform: scale(1.12) !important; opacity: 0; transition: transform .12s ease-out, opacity .12s ease .06s; }
.pb-bal.popped .pb-burst { animation: pbburst 1.4s ease forwards; transform-origin: 0 -150px; }
@keyframes pbburst { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.pb-confetti rect { animation: pbconf 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes pbconf { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--r)); opacity: 0; } }
.pb.tug .tug-scene { width: min(100%, 980px); margin: 0 auto; }
.pb.tug.kids .tug-scene { width: min(100%, 700px); }
.pb.tug.is-full .tug-scene, .pb.tug:fullscreen .tug-scene { width: min(100%, calc(46vh * 2.17)); }
.pb.tug.kids.is-full .tug-scene, .pb.tug.kids:fullscreen .tug-scene { width: min(100%, calc(30vh * 2.17)); }
@media (prefers-reduced-motion: reduce) { .pb-sway { animation: none; } }

/* Bar model tool */
.mini-bm { width: 220px; display: grid; gap: 8px; background: #f6f7f8; border-radius: 10px; padding: 12px; margin-bottom: 4px; align-self: flex-start; height: auto !important; }
.mini-bm div { display: flex; height: 30px; }
.mini-bm span { display: grid; place-items: center; font: 800 14px var(--display); color: var(--charcoal); border: 2px solid var(--charcoal); }
.mini-bm span + span { border-left: 0; }
.bm { display: grid; gap: 16px; background: var(--white); --bar-h: 96px; --bar-fs: 2.4rem; }
.bm-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.bm-stage { display: grid; gap: calc(var(--bar-h) * .3); padding: 22px 0 10px; width: 100%; max-width: 1100px; justify-self: center; }
.bm-sum { text-align: center; font-family: var(--display); font-weight: 800; font-size: calc(var(--bar-fs) * .8); color: var(--charcoal); min-height: 1.2em; }
.bm.no-sum .bm-sum { visibility: hidden; }
.bm-bar { display: flex; height: var(--bar-h); width: 100%; }
.bm-seg { flex: var(--v, 1) 1 0px; min-width: 2.6em; position: relative; display: grid; place-items: center; font: inherit; font-family: var(--display); font-weight: 800; font-size: var(--bar-fs); color: var(--charcoal); background: var(--c, #f7c849); border: 3px solid var(--charcoal); padding: 0 4px; cursor: pointer; transition: flex-grow .45s cubic-bezier(.3, 1.2, .5, 1), background-color .2s ease; overflow: hidden; white-space: nowrap; }
.bm-seg + .bm-seg { border-left-width: 0; }
.bm-seg:first-child { border-radius: 12px 0 0 12px; }
.bm-seg:last-child { border-radius: 0 12px 12px 0; }
.bm-seg:only-child { border-radius: 12px; }
.bm-seg.whole { --c: var(--blue); color: var(--white); }
.bm-seg.p1 { --c: #f7c849; } .bm-seg.p2 { --c: #80c0f3; } .bm-seg.p3 { --c: #7cc36b; } .bm-seg.p4 { --c: #f5a3a6; }
.bm-seg.miss { background: repeating-linear-gradient(45deg, #eef1f4 0 14px, #e1e6eb 14px 28px); border-style: dashed; color: var(--charcoal); }
.bm-seg.miss.shown { background: #e2f6ea; border-style: solid; color: #1f7a43; }
.bm-seg.miss.shown::after { content: ""; }
.bm-seg:focus-visible { outline: 4px solid var(--sky); outline-offset: 2px; z-index: 1; }
.bm-seg:hover:not(.miss) { filter: brightness(1.05); }
.bm-answer { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: center; }
.bm-answer label { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--charcoal); }
.bm-answer input { font: inherit; font-family: var(--display); font-weight: 800; font-size: 1.6rem; width: 5em; text-align: center; border: 3px solid var(--charcoal); border-radius: 12px; padding: 4px 8px; color: var(--charcoal); }
.bm-answer input:focus { outline: none; border-color: var(--blue); }
.bm-check { background: var(--blue); color: var(--white); border-color: var(--blue); }
.bm-check:hover { background: var(--blue-dark); }
.bm-result { min-width: 10em; font-weight: 800; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 8px; }
.bm-result.ok { color: #1f7a43; } .bm-result.no { color: #c4161c; }
.bm-result svg { width: 34px; height: 34px; animation: bm-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bm-pop { from { transform: scale(0); } }
.bm-edit { display: grid; gap: 10px; background: #f6f7f8; border-radius: var(--radius); padding: 16px 18px; }
.bm-edit h3 { font-size: 1.1rem; color: var(--charcoal); }
.bm-edit .bm-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.bm-edit .field input { width: 5.5em; }
.bm-edit .field input[readonly] { background: repeating-linear-gradient(45deg, #eef1f4 0 8px, #e1e6eb 8px 16px); border-style: dashed; }
.bm-edit .field.whole span { color: var(--blue); }
.bm-warn { color: #c4161c; font-weight: 700; min-height: 1.2em; }
.bm-edit-note { color: var(--ink-soft); font-size: .92rem; }
.bm.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.bm:fullscreen { padding: 20px 28px; overflow: auto; }
.bm.is-full, .bm:fullscreen { --bar-h: min(17vh, 190px); --bar-fs: min(7vh, 5rem); align-content: start; }
.bm.is-full .pts-tip, .bm:fullscreen .pts-tip, .bm.is-full .bm-edit, .bm:fullscreen .bm-edit { display: none; }
@media (max-width: 600px) { .bm { --bar-h: 70px; --bar-fs: 1.6rem; } .bm-seg { min-width: 2.2em; } .bm-answer input { width: 4.2em; } }

/* Multilink cubes */
.mlc { display: grid; gap: 14px; background: var(--white); --u: 40px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mlc-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #f0f2f4; border-radius: 18px; padding: 10px 12px; }
.mlc-pal { --u: 40px; position: relative; width: 48px; height: 50px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; display: grid; place-items: end center; }
.mlc-pal .mlc-cube { position: relative; }
.mlc-pal:hover .mlc-cube, .mlc-pal:focus-visible .mlc-cube { transform: translateY(-3px); }
.mlc-pal:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.mlc-bin { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--charcoal); background: var(--white); border: 2px dashed #9aa3ab; border-radius: 14px; padding: 8px 14px; min-height: 50px; }
.mlc-bin svg { width: 24px; height: 24px; }
.mlc-bin.hot { background: #fde0e1; border-color: #e5484d; color: #b4232a; }
.mlc-stage { position: relative; height: clamp(360px, 62vh, 560px); background: #f7f9fb; background-image: radial-gradient(#dfe5ea 1.2px, transparent 1.3px); background-size: 22px 22px; border: 2px solid #e3e6e9; border-radius: 18px; overflow: hidden; touch-action: none; }
.mlc-floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * .35); background: #e3e6e9; border-top: 2px solid #c9ced3; }
.mlc-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--ink-soft); font-weight: 700; font-size: 1.05rem; pointer-events: none; }
.mlc-cube { position: absolute; width: var(--u); height: var(--u); box-sizing: border-box; background: var(--c); border-radius: calc(var(--u) * .1); cursor: grab; touch-action: none; transition: transform .12s ease;
  box-shadow: inset 0 0 0 max(1px, calc(var(--u) * .05)) rgba(0,0,0,.24), inset calc(var(--u) * .1) calc(var(--u) * .1) 0 rgba(255,255,255,.24), inset calc(var(--u) * -.08) calc(var(--u) * -.08) 0 rgba(0,0,0,.12); }
.mlc-cube::before { content: ""; position: absolute; left: 31%; width: 38%; top: calc(var(--u) * -.15); height: calc(var(--u) * .2); background: var(--c); border-radius: calc(var(--u) * .06) calc(var(--u) * .06) 0 0; box-shadow: inset 0 0 0 max(1px, calc(var(--u) * .045)) rgba(0,0,0,.24); }
.mlc-cube::after { content: ""; position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; background: rgba(0,0,0,.14); box-shadow: inset 0 calc(var(--u) * .04) calc(var(--u) * .05) rgba(0,0,0,.25); }
.mlc-label { position: absolute; width: var(--u); text-align: center; font-family: var(--display); font-weight: 800; font-size: max(13px, calc(var(--u) * .55)); line-height: 1; color: var(--charcoal); pointer-events: none; font-variant-numeric: tabular-nums; }
.mlc-label.on { color: var(--blue); }
.mlc-label.side { text-align: left; width: auto; }
.mlc-cube.h::before { left: auto; right: calc(var(--u) * -.15); top: 31%; width: calc(var(--u) * .2); height: 38%; border-radius: 0 calc(var(--u) * .06) calc(var(--u) * .06) 0; }
.rot-btn { display: inline-flex; align-items: center; gap: 6px; }
.rot-btn svg { width: 18px; height: 18px; }
.act:disabled { opacity: .45; cursor: default; background: var(--white); }
.mlc.no-nums .mlc-label, .mlc.no-nums .mlc-sum b { visibility: hidden; }
.mlc-ghost { position: absolute; width: var(--u); box-sizing: border-box; border: 3px dashed var(--blue); border-radius: calc(var(--u) * .12); background: rgba(0,87,225,.06); pointer-events: none; }
.mlc-ghost.bad { border-color: #e5484d; background: rgba(229,72,77,.08); }
.mlc-drag { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; filter: drop-shadow(0 10px 10px rgba(0,0,0,.25)); }
.mlc-sum { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.mlc-sum .count { margin-left: 0; }
.mlc.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: hidden; }
.mlc:fullscreen { padding: 20px 28px; overflow: hidden; }
.mlc.is-full, .mlc:fullscreen { grid-template-rows: auto auto auto 1fr; }
.mlc.is-full .mlc-stage, .mlc:fullscreen .mlc-stage { height: auto; min-height: 0; }
.mlc.is-full .pts-tip, .mlc:fullscreen .pts-tip { display: none; }

/* Part-part-whole */
.pw { display: grid; gap: 14px; background: var(--white); }
.pw-wrap { display: grid; justify-items: center; gap: 10px; padding: 10px 0 4px; }
.pw-stage { position: relative; container-type: inline-size; --fa: 50%; --fb: 50%; }
.pw-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqw; background: var(--bg); border: max(3px, .8cqw) solid var(--charcoal); --bg: #e3f1fd; }
.pw-box[data-k="a"] { --bg: #fde0e1; }
.pw-box[data-k="b"] { --bg: #fdf0c8; }
.pw-box input { width: 100%; min-width: 0; border: 0; background: transparent; text-align: center; font-family: var(--display); font-weight: 800; color: var(--charcoal); padding: 0; font-variant-numeric: tabular-nums; outline: none; caret-color: var(--blue); }
.pw-box input[readonly] { cursor: default; }
.pw-box input::placeholder { color: var(--charcoal); opacity: 1; }
.pw-box:focus-within { box-shadow: 0 0 0 5px rgba(0,87,225,.25); }
.pw-box.hid { --bg: #fff; border-style: dashed; border-color: var(--blue); }
.pw-box.hid input::placeholder { color: var(--blue); }
.pw-box.right { --bg: #dcf5e3; border-style: solid; border-color: #2e9e5b; }
.pw-box.right input { color: #1e7a43; }
.pw-box.wrong { animation: pw-shake .4s; border-color: #e5484d; }
@keyframes pw-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pw-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .8cqw; max-width: 74%; }
.pw-dots i { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; box-shadow: inset 0 -.5cqw .8cqw rgba(0,0,0,.2); }
.pw-dots.many i { width: 3cqw; height: 3cqw; }
.pw-dots i.gap { margin-right: 1.2cqw; }
.pw-dots i.r { background: radial-gradient(circle at 38% 32%, #ff7b7b, #c4161c); }
.pw-dots i.y { background: radial-gradient(circle at 38% 32%, #ffe28a, #e0a800); }
.pw-dots i.w { background: radial-gradient(circle at 38% 32%, #7fb0ff, #0057e1); }
/* Cherry (circles) */
.pw-stage.cherry { width: min(100%, 640px); aspect-ratio: 1.25; }
.pw-stage.cherry .pw-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-lines line { stroke: var(--charcoal); stroke-width: 6; vector-effect: non-scaling-stroke; }
.pw-stage.cherry .pw-box { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.pw-stage.cherry [data-k="whole"] { left: 50%; top: 23.75%; }
.pw-stage.cherry [data-k="a"] { left: 22%; top: 76.25%; }
.pw-stage.cherry [data-k="b"] { left: 78%; top: 76.25%; }
.pw-stage.cherry .pw-box input { font-size: 13cqw; line-height: 1; }
.pw-stage.cherry .pw-box.has-dots input { font-size: 8cqw; }
.pw-stage.cherry .pw-dots { width: calc(5 * 4.2cqw + 4 * .8cqw); max-width: none; }
.pw-stage.cherry .pw-dots.many { width: calc(5 * 3cqw + 4 * .8cqw); }
.pw-stage.cherry .pw-dots i.gap { margin-right: 0; }
.pw-stage.cherry .pw-box.wrong { animation-name: pw-shake-c; }
@keyframes pw-shake-c { 20%, 60% { transform: translate(-50%, -50%) translateX(-6px); } 40%, 80% { transform: translate(-50%, -50%) translateX(6px); } }
/* Bar */
.pw-stage.bar { width: min(100%, 900px); display: grid; grid-template-columns: var(--fa) var(--fb); }
.pw-stage.bar .pw-lines { display: none; }
.pw-stage.bar [data-k="whole"] { grid-column: 1 / -1; }
.pw-stage.bar .pw-box { min-height: 15cqw; padding: 1.5cqw; border-radius: 1.4cqw; }
.pw-stage.bar [data-k="a"] { margin-top: 1.4cqw; margin-right: .7cqw; }
.pw-stage.bar [data-k="b"] { margin-top: 1.4cqw; margin-left: .7cqw; }
.pw-stage.bar .pw-box input { font-size: 8cqw; line-height: 1.05; }
.pw-stage.bar .pw-dots { max-width: 96%; }
.pw-stage.bar .pw-dots i { width: 2.6cqw; height: 2.6cqw; }
.pw-warn { margin: 0; font-weight: 700; color: #b4232a; background: #fde0e1; border-radius: 999px; padding: 6px 14px; }
.act:disabled { opacity: .45; cursor: default; background: var(--white); }
.pw.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.pw:fullscreen { padding: 20px 28px; overflow: auto; }
.pw.is-full, .pw:fullscreen { grid-template-rows: auto auto 1fr; }
.pw.is-full .pts-tip, .pw:fullscreen .pts-tip { display: none; }
.pw.is-full .pw-wrap, .pw:fullscreen .pw-wrap { align-content: center; }
.pw.is-full .pw-stage.cherry, .pw:fullscreen .pw-stage.cherry { width: min(100%, calc((100vh - 230px) * 1.25)); }
.pw.is-full .pw-stage.bar, .pw:fullscreen .pw-stage.bar { width: min(100%, 1300px); }
@media (max-width: 600px) { .mc-sum { margin-left: 0; } .mc-tray { gap: 4px; padding: 8px; } .mc-pal { width: 42px; --u: 34px; } .mc-bin { margin-left: 0; } }


/* Classroom timer */
.mini-timer { position: relative; width: 110px; aspect-ratio: 1; margin-bottom: 4px; }
.mini-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mini-timer circle { fill: none; stroke-width: 9; }
.mini-timer .t { stroke: var(--sky-soft); }
.mini-timer .p { stroke: var(--blue); stroke-dasharray: 264; stroke-dashoffset: 70; stroke-linecap: round; }
.mini-timer span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.tm { position: relative; display: grid; gap: 22px; background: var(--white); }
.tm-stage { display: grid; justify-items: center; gap: 20px; }
.tm-ring { position: relative; width: min(420px, 82vw); aspect-ratio: 1; }
.tm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.tm-track, .tm-prog { fill: none; stroke-width: 14; }
.tm-track { stroke: var(--sky-soft); }
.tm-prog { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 565.49; stroke-dashoffset: 0; transition: stroke .3s ease; }
.tm.ending .tm-prog { stroke: #e5484d; }
.tm.paused .tm-prog { stroke: #9aa3ab; }
.tm-read { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.tm-digits { font-family: var(--display); font-weight: 800; font-size: min(96px, 19vw); line-height: 1; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.tm-digits small { font-size: .45em; letter-spacing: 0; }
.tm.ending .tm-digits { color: #d1343a; }
.tm-label { font-weight: 700; font-size: 1rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; }
.tm-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.tm-go { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 800; font-family: var(--display); font-size: 1.35rem; border: 0; border-radius: 999px; padding: 14px 34px; background: var(--blue); color: var(--white); cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.tm-go:hover { transform: translateY(-2px); background: var(--blue-dark); }
.tm-go svg { width: 24px; height: 24px; }
.tm-go .i-pause { display: none; }
.tm.running .tm-go .i-pause { display: inline; }
.tm.running .tm-go .i-play { display: none; }
.tm.running #tm-go { background: var(--charcoal); }
.tm-reset { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; font-size: 1rem; }
.tm-reset svg { width: 18px; height: 18px; }
.tm-set { display: grid; gap: 16px; justify-items: center; border-top: 1px solid var(--line); padding-top: 20px; }
.tm.running .tm-set { opacity: .45; pointer-events: none; }
.tm.watch .tm-set { display: none; }
.tm-steppers { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.stepper { display: grid; gap: 6px; justify-items: center; }
.stepper label { font-weight: 700; font-size: .9rem; color: var(--ink-soft); }
.stepper-row { display: flex; align-items: center; gap: 8px; }
.step { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); font: inherit; font-size: 1.6rem; font-weight: 800; color: var(--charcoal); cursor: pointer; line-height: 1; }
.step:hover { background: var(--yellow); }
.stepper input { width: 3.2em; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.8rem; color: var(--charcoal); border: 2px solid var(--line); border-radius: 12px; padding: 4px 2px; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; border-color: var(--blue); }
.tm-presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tm-presets button { font: inherit; font-weight: 700; font-size: .95rem; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--sky-soft); color: var(--blue-dark); cursor: pointer; }
.tm-presets button:hover { background: var(--yellow); color: var(--charcoal); }
.tm-opts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; }
.tm-done { position: absolute; inset: 0; z-index: 3; background: var(--yellow); border-radius: var(--radius); display: grid; place-items: center; animation: tmflash 1s steps(1) infinite; }
@keyframes tmflash { 50% { background: #ffd96b; } }
.tm-done-in { display: grid; justify-items: center; gap: 18px; padding: 20px; text-align: center; }
.tm-done-text { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 12vw, 8rem); color: var(--charcoal); line-height: 1; }
.tm-figs { display: flex; gap: 20px; }
.tm-figs .fig { width: clamp(40px, 7vw, 80px); animation: bop 0.8s ease-in-out infinite; }
.tm-figs .fig:nth-child(2) { animation-delay: .2s; transform: scaleX(-1); }
.tm-figs .fig:nth-child(3) { animation-delay: .4s; }
.tm.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.tm:fullscreen { padding: 20px 28px; overflow: auto; }
.tm.is-full, .tm:fullscreen { display: flex; flex-direction: column; justify-content: center; }
.tm.is-full .tm-top, .tm:fullscreen .tm-top { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.tm.is-full .tm-set, .tm:fullscreen .tm-set { display: none; }
.tm.is-full .tm-ring, .tm:fullscreen .tm-ring { width: min(72vmin, 92vw); }
.tm.is-full .tm-digits, .tm:fullscreen .tm-digits { font-size: min(17vmin, 20vw); }
.tm.is-full .tm-done, .tm:fullscreen .tm-done { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .tm-done { animation: none; } }


/* Tug of war */
.mini-tug { height: 110px; display: grid; align-items: center; margin-bottom: 4px; }
.mini-tug svg { width: 100%; max-width: 220px; height: 110px; border-radius: 10px; }
.tug { --t1: #0057e1; --t1-soft: #d6ebfc; --t2: #e5484d; --t2-soft: #fde0e1; position: relative; background: var(--white); }
.tug-setup { display: grid; gap: 18px; max-width: 860px; margin: 0 auto; }
.tug-setup h2 { font-size: 1.8rem; color: var(--charcoal); }
.tug-setup-head p { margin-top: 6px; color: var(--ink-soft); max-width: 62ch; }
.tug-teams { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.tug-quick { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 16px; background: #fff8e1; border: 2px solid #f3dd9a; border-radius: 16px; }
.tug-quick .field select { max-width: min(100%, 300px); }
.tug-quick-note { color: var(--ink-soft); font-size: .9rem; flex-basis: 100%; }
.tug-team { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 8px 6px 16px; font-weight: 700; font-size: .9rem; color: var(--white); }
.tug-team.t1 { background: var(--t1); } .tug-team.t2 { background: var(--t2); }
.tug-team input { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 7px 12px; width: 10em; color: var(--charcoal); }
.tug-qhead { display: grid; grid-template-columns: 2rem 1.6fr 1fr; gap: 10px; font-weight: 700; font-size: .85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.tug-qhead span:first-child { grid-column: 2; }
.tug-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: q; }
.tug-qs li { display: grid; grid-template-columns: 2rem 1.6fr 1fr; gap: 10px; align-items: center; counter-increment: q; }
.tug-qs li::before { content: counter(q); font-family: var(--display); font-weight: 800; color: var(--ink-soft); text-align: right; }
.tug-qs input { font: inherit; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; color: var(--ink); }
.tug-qs input:focus { outline: none; border-color: var(--blue); }
.tug-qs li.example input { color: var(--ink-soft); font-style: italic; }
.tug-setup-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
.tug-start-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tug-ready { font-weight: 700; color: var(--ink-soft); }
.tug-ready.ok { color: #1f7a43; }
.tm-go:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.tug-game { display: grid; gap: 16px; }
.tug-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.tug-side { display: flex; align-items: center; gap: 12px; }
.tug-side.t2 { justify-content: flex-end; }
.tug-side .nm { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2.6vw, 1.7rem); padding: 6px 16px; border-radius: 999px; color: var(--white); }
.tug-side.t1 .nm { background: var(--t1); } .tug-side.t2 .nm { background: var(--t2); }
.tug-side .pl { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--charcoal); font-variant-numeric: tabular-nums; }
.tug-qcount { font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; text-align: center; }
.tug-scene { border-radius: var(--radius); overflow: hidden; border: 2px solid var(--line); }
.tug-scene svg { display: block; width: 100%; height: auto; }
.tug-scene .z1 { fill: var(--t1-soft); } .tug-scene .z2 { fill: var(--t2-soft); }
.tug-scene .ground { stroke: #9aa3ab; stroke-width: 3; }
.tug-scene .winline { stroke-width: 4; stroke-dasharray: 10 8; }
.tug-scene .winline.t1 { stroke: var(--t1); } .tug-scene .winline.t2 { stroke: var(--t2); }
.tug-scene .winlabel { font: 800 18px var(--display); letter-spacing: .06em; }
.tug-scene .winlabel.t1 { fill: var(--t1); } .tug-scene .winlabel.t2 { fill: var(--t2); }
.tug-scene .flag line { stroke: var(--charcoal); stroke-width: 4; }
.tug-scene .flag path { fill: var(--yellow); stroke: var(--charcoal); stroke-width: 2; stroke-linejoin: round; }
.tug-scene .rope { stroke: #b5803e; stroke-width: 14; stroke-linecap: round; }
.tug-scene .rope-twist { stroke: #8a5d27; stroke-width: 14; stroke-dasharray: 3 9; stroke-linecap: butt; opacity: .55; }
.tug-scene .ribbon { fill: #e5484d; }
.tug-scene .knot { fill: var(--yellow); stroke: var(--charcoal); stroke-width: 4; }
.tug-scene .puller path { fill: none; stroke: var(--charcoal); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tug-scene .puller .head { stroke: var(--charcoal); stroke-width: 4; }
.tug-scene .t1 .head { fill: var(--t1); } .tug-scene .t2 .head { fill: var(--t2); }
#tug-rope { transition: transform .7s cubic-bezier(.25, 1.4, .45, 1); }
.tug-scene .team { transition: transform .25s ease; }
.tug.heave-t1 .team.t1 { transform: translateX(-10px); }
.tug.heave-t2 .team.t2 { transform: translateX(10px); }
.tug-card { display: grid; gap: 14px; justify-items: center; text-align: center; background: #f6f7f8; border-radius: var(--radius); padding: 22px 18px; }
.tug-q { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: 1.05; color: var(--charcoal); max-width: 22ch; overflow-wrap: anywhere; }
.tug-a { font-weight: 700; font-size: clamp(1.1rem, 2.6vw, 1.6rem); color: #1f7a43; background: #e2f6ea; border-radius: 999px; padding: 6px 18px; }
.tug-buttons { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; width: 100%; }
.tug-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.35rem); border: 0; border-radius: 999px; padding: 16px 22px; color: var(--white); cursor: pointer; transition: transform .15s ease, filter .15s ease; min-width: 0; }
.tug-btn svg { width: 24px; height: 24px; flex: none; }
.tug-btn.t1 { background: var(--t1); } .tug-btn.t2 { background: var(--t2); }
.tug-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tug-btn:disabled { opacity: .5; cursor: default; transform: none; }
.tug-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tug-mid { display: grid; gap: 8px; }
.act:disabled { opacity: .45; cursor: default; }
.tug-win-text { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 9vw, 6.5rem); line-height: 1; color: var(--charcoal); }
.tug-win-text b { color: var(--win, var(--charcoal)); }
@media (max-width: 700px) {
  .tug-qs li, .tug-qhead { grid-template-columns: 1.4rem 1fr; }
  .tug-qs li input:last-child { grid-column: 2; }
  .tug-qhead span:last-child { display: none; }
  .tug-buttons { grid-template-columns: 1fr 1fr; }
  .tug-mid { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr 1fr; }
  .tug-score { grid-template-columns: 1fr 1fr; }
  .tug-qcount { grid-column: 1 / -1; grid-row: 1; }
}
.tug.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.tug:fullscreen { padding: 20px 28px; overflow: auto; }
.tug.is-full .pts-tip, .tug:fullscreen .pts-tip { display: none; }
.tug.is-full .tug-scene, .tug:fullscreen .tug-scene { width: min(100%, calc(40vh * 4.8)); margin: 0 auto; }
.tug.is-full .tug-done, .tug:fullscreen .tug-done { border-radius: 0; }
/* Tug of war: teacher or children mode */
.tug-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tug-mode-btn { display: grid; gap: 4px; text-align: left; font: inherit; border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--white); color: var(--ink); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.tug-mode-btn b { font-family: var(--display); font-size: 1.15rem; color: var(--charcoal); }
.tug-mode-btn span { color: var(--ink-soft); font-size: .92rem; }
.tug-mode-btn:hover { border-color: var(--sky); }
.tug-mode-btn[aria-pressed="true"] { border-color: var(--blue); background: #e3f1fd; box-shadow: inset 0 0 0 1px var(--blue); }
.tug-qs input.need { border-color: #e5484d; background: #fff6f6; }
.tug-play { display: grid; gap: 16px; }
.tug.kids .tug-play { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.tug.kids .tug-btn { display: none; }
.tug.kids .tug-buttons { grid-template-columns: 1fr; justify-items: center; }
.tug.kids .tug-mid { grid-template-columns: 1fr 1fr; }
.tug.kids .tug-q { font-size: clamp(2rem, 5vw, 4rem); }
.tug-pad { --tc: var(--t1); --ts: var(--t1-soft); display: grid; gap: 8px; padding: 12px; border-radius: var(--radius); background: var(--ts); border: 3px solid var(--tc); }
.tug-pad.t2 { --tc: var(--t2); --ts: var(--t2-soft); }
.tug-pad-name { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.35rem); color: var(--white); background: var(--tc); border-radius: 999px; padding: 5px 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tug-pad-disp { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.3; min-height: 1.3em; background: var(--white); border: 2px solid var(--tc); border-radius: 12px; padding: 4px 14px; text-align: right; color: var(--charcoal); font-variant-numeric: tabular-nums; overflow: hidden; transition: background-color .15s ease; }
.tug-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tug-key { font: inherit; font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 1.8rem); border: 2px solid var(--charcoal); border-radius: 12px; background: var(--white); color: var(--charcoal); padding: .4em 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; min-width: 0; }
.tug-key:active { transform: translateY(2px); background: #fff8e1; }
.tug-key.del { font-size: clamp(1rem, 2vw, 1.3rem); }
.tug-key.ent { background: var(--tc); border-color: var(--tc); color: var(--white); font-size: clamp(1rem, 2vw, 1.3rem); }
.tug-key:disabled { opacity: .5; cursor: default; transform: none; }
.tug-pad-msg { min-height: 1.4em; text-align: center; font-weight: 700; color: var(--charcoal); }
.tug-pad.wrong { animation: tugshake .4s ease; }
.tug-pad.wrong .tug-pad-disp { background: #fde0e1; }
.tug-pad.right .tug-pad-disp { background: #e2f6ea; border-color: #1f7a43; }
@keyframes tugshake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.tug.kids.is-full .tug-scene, .tug.kids:fullscreen .tug-scene { width: min(100%, calc(24vh * 4.8)); }
.tug.kids.is-full .tug-key, .tug.kids:fullscreen .tug-key { padding: .3em 0; }
.mc.tug.kids .tug-scene { width: min(100%, 760px); margin: 0 auto; }
.mc.tug.kids.is-full .tug-scene, .mc.tug.kids:fullscreen .tug-scene { width: min(100%, calc(30vh * 2.19)); }
@media (max-width: 800px) {
  .tug.kids .tug-play { grid-template-columns: 1fr 1fr; }
  .tug.kids .tug-card { grid-column: 1 / -1; order: -1; padding: 16px 12px; }
  .tug-pad { padding: 8px; gap: 6px; }
  .tug-keys { gap: 4px; }
}


/* Mountain climb */
.mc-scene .sun { fill: var(--yellow); }
.mc-scene .cloud ellipse { fill: #ffffff; }
.mc-scene .cloud.c1 { transform: translate(300px, 90px); animation: mcdrift 38s linear infinite alternate; }
.mc-scene .cloud.c2 { transform: translate(780px, 60px); animation: mcdrift2 46s linear infinite alternate; }
@keyframes mcdrift { from { transform: translate(260px, 90px); } to { transform: translate(380px, 90px); } }
@keyframes mcdrift2 { from { transform: translate(820px, 60px); } to { transform: translate(700px, 60px); } }
.mc-scene .hill-back { fill: #b9cad8; }
.mc-scene .mt-lit { fill: #8797a8; }
.mc-scene .mt-shade { fill: #6f8194; }
.mc-scene .snow { fill: #ffffff; }
.mc-scene .grass { fill: #7cc36b; }
.mc-scene .ledge { fill: #4f5f70; }
.mc-scene .ledge-top { stroke-width: 4; stroke-linecap: round; }
.mc-scene .t1 .ledge-top, .mc-scene .trail.t1 { stroke: var(--t1); }
.mc-scene .t2 .ledge-top, .mc-scene .trail.t2 { stroke: var(--t2); }
.mc-scene .trail { fill: none; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .75; }
.mc-scene .step-n { font: 800 15px var(--display); fill: #ffffff; }
.mc-scene .summit line { stroke: var(--charcoal); stroke-width: 4; }
.mc-scene .summit path { fill: var(--yellow); stroke: var(--charcoal); stroke-width: 2; stroke-linejoin: round; transition: fill .3s ease; }
.mc-scene .summit.won-t1 path { fill: var(--t1); }
.mc-scene .summit.won-t2 path { fill: var(--t2); }
.mc-climber { transition: transform .8s cubic-bezier(.3, 1.25, .5, 1); }
.mc-climber .mc-body path { fill: none; stroke: var(--charcoal); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mc-climber .head { stroke: var(--charcoal); stroke-width: 4; }
.mc-climber.t1 .head, .mc-climber.t1 .pack { fill: var(--t1); }
.mc-climber.t2 .head, .mc-climber.t2 .pack { fill: var(--t2); }
.mc-climber .pack { stroke: var(--charcoal); stroke-width: 2.5; }
.mc-climber.hop .mc-body { animation: mchop .55s ease; }
@keyframes mchop { 40% { transform: translateY(-22px); } }
.mc-climber.cheer .mc-body { animation: mccheer .6s ease-in-out infinite; }
@keyframes mccheer { 50% { transform: translateY(-14px); } }
.tug-side .pl small { font-size: .55em; color: var(--ink-soft); }
.mc.tug.is-full .tug-scene, .mc.tug:fullscreen .tug-scene { width: min(100%, calc(46vh * 2.19)); margin: 0 auto; }
/* Games in full screen: everything fits on one screen. The picture takes whatever height is left over. */
.tug.is-full .tug-game:not([hidden]), .tug:fullscreen .tug-game:not([hidden]) { display: flex; flex-direction: column; height: 100%; gap: clamp(8px, 1.6vh, 16px); }
.tug.is-full .tug-game > *, .tug:fullscreen .tug-game > * { flex: 0 0 auto; }
.tug.is-full .tug-game > .tug-scene, .tug:fullscreen .tug-game > .tug-scene { flex: 1 1 0; min-height: 110px; position: relative; width: 100% !important; margin: 0; border: 0; border-radius: 0; overflow: visible; }
.tug.is-full .tug-game > .tug-scene, .tug:fullscreen .tug-game > .tug-scene { container-type: size; --ar: 4.8; }
.mc.tug .tug-game > .tug-scene { --ar: 2.193; } .pb.tug .tug-game > .tug-scene { --ar: 2.174; } .xt.tug .tug-game > .tug-scene { --ar: 2.174; }
.tug.is-full .tug-scene svg, .tug:fullscreen .tug-scene svg { position: absolute; inset: 0; margin: auto; width: auto; height: 100%; max-width: 100%; border: 2px solid var(--line); border-radius: var(--radius); box-sizing: border-box; }
@supports (width: 1cqw) {
  /* Keep the picture's shape: as big as fits, never stretched or letterboxed */
  .tug.is-full .tug-scene svg, .tug:fullscreen .tug-scene svg { width: min(100cqw, 100cqh * var(--ar)); height: min(100cqh, 100cqw / var(--ar)); max-width: none; }
}
/* Children mode on wider screens: keypads down each side, picture and question in the middle */
@media (min-width: 801px) {
  .tug.kids.is-full .tug-game:not([hidden]), .tug.kids:fullscreen .tug-game:not([hidden]) {
    display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 3fr) minmax(210px, .8fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "bar bar bar" "score score score" "p1 scene p2" "p1 card p2"; column-gap: clamp(10px, 1.6vw, 24px); }
  .tug.kids.is-full .tug-game > .pts-bar, .tug.kids:fullscreen .tug-game > .pts-bar { grid-area: bar; }
  .tug.kids.is-full .tug-game > .tug-score, .tug.kids:fullscreen .tug-game > .tug-score { grid-area: score; }
  .tug.kids.is-full .tug-game > .tug-scene, .tug.kids:fullscreen .tug-game > .tug-scene { grid-area: scene; min-height: 0; }
  .tug.kids.is-full .tug-play, .tug.kids:fullscreen .tug-play { display: contents; }
  .tug.kids.is-full .tug-pad.t1, .tug.kids:fullscreen .tug-pad.t1 { grid-area: p1; align-self: end; }
  .tug.kids.is-full .tug-pad.t2, .tug.kids:fullscreen .tug-pad.t2 { grid-area: p2; align-self: end; }
  .tug.kids.is-full .tug-card, .tug.kids:fullscreen .tug-card { grid-area: card; }
  .tug.kids.is-full .tug-game > .pts-tip, .tug.kids:fullscreen .tug-game > .pts-tip { display: none; }
}
@media (min-width: 801px) and (min-height: 541px) {
  /* Tug of war's picture is long and thin, so it goes full width above the keypads */
  #tug.kids.is-full .tug-game:not([hidden]), #tug.kids:fullscreen .tug-game:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas: "bar bar bar" "score score score" "scene scene scene" "p1 card p2"; }
  #tug.kids.is-full .tug-card, #tug.kids:fullscreen .tug-card { align-self: start; }
}
@media (min-width: 801px) and (max-height: 540px) {
  /* Short screens such as a phone on its side: slimmer keypad columns would squash the picture */
  .tug.kids.is-full .tug-game:not([hidden]), .tug.kids:fullscreen .tug-game:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); }
}
.tug.is-full .tug-card, .tug:fullscreen .tug-card { padding-top: clamp(10px, 2vh, 24px); padding-bottom: clamp(10px, 2vh, 24px); }
.tug.is-full .tug-q, .tug:fullscreen .tug-q { font-size: clamp(1.8rem, 7vh, 4.5rem); }
.tug.kids.is-full .tug-q, .tug.kids:fullscreen .tug-q { font-size: clamp(1.6rem, 6vh, 4rem); }
.tug.kids.is-full .tug-pad, .tug.kids:fullscreen .tug-pad { gap: clamp(3px, .7vh, 8px); padding: clamp(6px, 1.1vh, 12px); }
.tug.kids.is-full .tug-pad-name, .tug.kids:fullscreen .tug-pad-name { font-size: clamp(.9rem, 2.4vh, 1.35rem); padding: 2px 10px; }
.tug.kids.is-full .tug-pad-disp, .tug.kids:fullscreen .tug-pad-disp { font-size: clamp(1.2rem, 4.4vh, 2.7rem); padding: 0 12px; }
.tug.kids.is-full .tug-keys, .tug.kids:fullscreen .tug-keys { gap: clamp(3px, .6vh, 6px); }
.tug.kids.is-full .tug-key, .tug.kids:fullscreen .tug-key { font-size: clamp(.95rem, 3.1vh, 1.8rem); padding: .22em 0; }
.tug.kids.is-full .tug-key.del, .tug.kids.is-full .tug-key.ent, .tug.kids:fullscreen .tug-key.del, .tug.kids:fullscreen .tug-key.ent { font-size: clamp(.8rem, 2.3vh, 1.3rem); }
.tug.kids.is-full .tug-pad-msg, .tug.kids:fullscreen .tug-pad-msg { min-height: 1.2em; font-size: clamp(.8rem, 2vh, 1rem); }
@media (prefers-reduced-motion: reduce) { .mc-scene .cloud { animation: none; } }


/* Home: classroom tools promo */
.tools-promo { margin-top: 22px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--charcoal); background: var(--white); border: 2px solid var(--charcoal); border-radius: var(--radius); padding: 12px 14px; max-width: 520px; box-shadow: 0 4px 0 var(--charcoal); transition: transform .15s ease, box-shadow .15s ease; }
.tools-promo:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--charcoal); }
.tp-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--sky); display: grid; place-items: center; }
.tp-ic svg { width: 26px; height: 26px; }
.tp-text { display: grid; gap: 1px; min-width: 0; font-size: .95rem; line-height: 1.35; }
.tp-text b { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.tp-new { justify-self: start; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--blue); color: var(--white); border-radius: 999px; padding: 2px 8px; }
.tp-go { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; background: var(--yellow); border-radius: 999px; padding: 8px 12px; }
.tp-go svg { width: 18px; height: 18px; }
@media (max-width: 480px) { .tp-go { padding: 8px; } .tp-go { font-size: 0; gap: 0; } }


/* Timer looks */
.tm-looks button { padding: 9px 14px; }
.tm-view { display: none; }
.tm.look-ring #tm-ring { display: block; }
.tm.look-sand #tm-sand { display: grid; }
.tm.look-bar #tm-barv { display: grid; }
.tm.look-game #tm-game { display: block; }
.tm-big { font-family: var(--display); font-weight: 800; font-size: min(110px, 20vw); line-height: 1; color: var(--charcoal); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.tm-big small { font-size: .45em; letter-spacing: 0; }
.tm.ending .tm-big { color: #d1343a; }
/* Sand timer */
.tm-sand { justify-items: center; gap: 10px; }
.tm-sand svg { width: min(220px, 52vw); height: auto; display: block; }
.tm-sand .glass { fill: rgba(214, 235, 252, .6); }
.tm-sand .glass-edge { fill: none; stroke: var(--charcoal); stroke-width: 4; }
.tm-sand .sand { fill: var(--yellow); }
.tm.ending .tm-sand .sand { fill: #ff8a3d; }
.tm-sand .stream { stroke: #e3a821; stroke-width: 4; stroke-dasharray: 4 6; opacity: 0; transition: opacity .2s; }
.tm.running .tm-sand .stream { opacity: 1; animation: sandfall .35s linear infinite; }
@keyframes sandfall { to { stroke-dashoffset: -10; } }
.tm-sand .wood { fill: #c48a45; stroke: var(--charcoal); stroke-width: 3; }
.tm-sand .shine { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 5; stroke-linecap: round; }
/* Bar */
.tm-barv { width: min(900px, 100%); gap: 16px; justify-items: center; }
.tm-bar { position: relative; width: 100%; height: clamp(46px, 9vw, 86px); background: var(--sky-soft); border-radius: 999px; overflow: hidden; border: 4px solid var(--charcoal); }
.tm-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 999px; background-color: #2fa55c; background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2) 0 14px, transparent 14px 28px); background-size: 40px 40px; transition: width .2s linear, background-color .4s ease; }
.tm.running .tm-bar-fill { animation: barslide 1s linear infinite; }
@keyframes barslide { to { background-position: 40px 0; } }
.tm[data-lvl="mid"] .tm-bar-fill { background-color: var(--yellow); }
.tm[data-lvl="low"] .tm-bar-fill { background-color: #e5484d; }
.tm-bar-foot { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tm-bar-pct { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Game */
.tm-game { --px: "Press Start 2P", ui-monospace, monospace; position: relative; overflow: hidden; width: min(720px, calc(100% - 24px)); margin: 14px auto; background: #1b1d3a; color: #ffffff; border-radius: 6px; padding: clamp(16px, 3vw, 28px); font-family: var(--px); box-shadow: 0 0 0 4px #0d0e21, 0 0 0 8px var(--yellow), 0 0 0 12px #0d0e21; }
.tm-game::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px); }
.g-head { display: flex; justify-content: space-between; gap: 10px; font-size: clamp(9px, 1.6vw, 15px); color: #8fd3ff; }
.g-pct { text-align: center; font-size: clamp(30px, 9vw, 84px); line-height: 1.1; color: var(--yellow); text-shadow: .06em .06em 0 #e5484d; margin: clamp(14px, 3vw, 26px) 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-track { position: relative; padding-top: clamp(30px, 5vw, 44px); }
.g-blocks { display: grid; grid-template-columns: repeat(20, 1fr); gap: clamp(2px, .5vw, 4px); padding: clamp(4px, .8vw, 6px); background: #0d0e21; border: 4px solid #ffffff; }
.g-blocks span { height: clamp(16px, 3.6vw, 34px); background: #2a2d55; }
.g-blocks span.on { background: #3ddc84; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), inset 0 4px 0 rgba(255, 255, 255, .3); }
.tm[data-lvl="mid"] .g-blocks span.on { background: var(--yellow); }
.tm[data-lvl="low"] .g-blocks span.on { background: #ff4d5a; }
.g-runner { position: absolute; top: 0; left: 100%; transform: translateX(-50%); width: clamp(22px, 3.4vw, 32px); transition: left .3s steps(3); }
.g-runner svg { width: 100%; height: auto; display: block; }
.g-runner .g-body, .g-runner .fa, .g-runner .fb { fill: #ffffff; }
.g-runner .g-body rect:nth-child(-n+6) { fill: var(--yellow); }
.g-runner .fb { opacity: 0; }
.tm.running .g-runner .fa { animation: gfa .3s steps(1) infinite; }
.tm.running .g-runner .fb { animation: gfb .3s steps(1) infinite; }
@keyframes gfa { 50% { opacity: 0; } }
@keyframes gfb { 0% { opacity: 0; } 50% { opacity: 1; } }
.g-status { text-align: center; margin-top: clamp(14px, 3vw, 24px); font-size: clamp(11px, 2.2vw, 20px); }
.g-status.blink { animation: gblink 1s steps(1) infinite; }
@keyframes gblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .g-status.blink, .tm.running .tm-bar-fill, .tm.running .tm-sand .stream { animation: none; } }
/* Looks in full screen */
.tm.is-full .tm-sand svg, .tm:fullscreen .tm-sand svg { width: auto; height: 50vh; }
.tm.is-full .tm-big, .tm:fullscreen .tm-big { font-size: min(14vmin, 18vw); }
.tm.is-full .tm-barv, .tm:fullscreen .tm-barv { width: 92vw; max-width: none; justify-self: center; }
.tm.is-full .tm-bar, .tm:fullscreen .tm-bar { height: 15vh; }
.tm.is-full .tm-game, .tm:fullscreen .tm-game { width: min(92vw, 125vh); }
.tm.is-full .g-pct, .tm:fullscreen .g-pct { font-size: min(13vmin, 11vw); }
.tm.is-full .g-blocks span, .tm:fullscreen .g-blocks span { height: 8vh; }
.tm.is-full .tm-stage, .tm:fullscreen .tm-stage { margin-top: 70px; }


/* Number line */
.nl { position: relative; display: grid; gap: 14px; background: var(--white); }
.nl-top .full-btn { margin-left: auto; }
.nl-eq { text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.15; color: var(--charcoal); min-height: 1.2em; font-variant-numeric: tabular-nums; }
.nl-eq .p { color: var(--blue); }
.nl-eq .n { color: #e5484d; }
.nl-eq .ans { background: var(--yellow); border-radius: 12px; padding: 0 .25em; }
.nl-hint { text-align: center; color: var(--ink-soft); font-weight: 700; min-height: 1.5em; }
.nl-scene { border: 2px solid var(--line); border-radius: var(--radius); background: #fbfcfd; overflow: hidden; transition: transform .1s; }
.nl-scene svg { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.nl-axis { stroke: var(--charcoal); stroke-width: 5; stroke-linecap: round; }
.nl-end { fill: var(--charcoal); }
.nl-tick { stroke: var(--charcoal); stroke-width: 4; stroke-linecap: round; }
.nl-t.minor .nl-tick { stroke-width: 2.5; }
.nl-num { font-family: var(--display); font-weight: 800; fill: var(--charcoal); text-anchor: middle; }
.nl-hit { fill: transparent; cursor: pointer; }
.nl-t:hover .nl-tick { stroke: var(--blue); }
.nl-t:hover .nl-num { fill: var(--blue); }
.nl-qbox rect { fill: var(--sky-soft); stroke: var(--blue); stroke-width: 2.5; }
.nl-qbox .nl-num { fill: var(--blue); }
.nl-start-dot { fill: var(--yellow); stroke: var(--charcoal); stroke-width: 3; }
.nl-jump path { fill: none; stroke-width: 5; stroke-linecap: round; }
.nl-jump.p path { stroke: var(--blue); }
.nl-jump.n path { stroke: #e5484d; }
.nl-jump text { font: 800 28px var(--display); text-anchor: middle; paint-order: stroke; stroke: #fbfcfd; stroke-width: 7px; stroke-linejoin: round; }
.nl-jump.p text { fill: var(--blue); }
.nl-jump.n text { fill: #e5484d; }
.nl-jump.new text { animation: nlpop .35s .5s both; }
@keyframes nlpop { from { opacity: 0; } }
#nl-man { pointer-events: none; }
#nl-man .head { fill: var(--yellow); stroke: var(--charcoal); stroke-width: 3.5; }
#nl-man path { fill: none; stroke: var(--charcoal); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
#nl-man.ghost { opacity: .3; }
#nl-jumps { pointer-events: none; }
.nl-msg { text-align: center; font-weight: 700; color: #d1343a; min-height: 1.4em; margin-top: -6px; }
.nl.shake .nl-scene { animation: nlshake .35s; }
@keyframes nlshake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.nl-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: center; }
.nl-jbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nl-jb { font: inherit; font-family: var(--display); font-weight: 800; font-size: 1.15rem; border: 0; border-radius: 999px; padding: 10px 16px; min-width: 66px; cursor: pointer; color: var(--white); transition: transform .15s ease, filter .15s ease; font-variant-numeric: tabular-nums; }
.nl-jb.p { background: var(--blue); }
.nl-jb.n { background: #e5484d; }
.nl-jb:hover { transform: translateY(-2px); filter: brightness(1.08); }
.nl-jb.gap { margin-left: 14px; }
.nl .field input { width: 5.5em; }
.nl-set { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
#nl-answer[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
.nl.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; align-content: center; }
.nl:fullscreen { padding: 20px 28px; overflow: auto; align-content: center; }
.nl.is-full .nl-set, .nl:fullscreen .nl-set, .nl.is-full .pts-tip, .nl:fullscreen .pts-tip { display: none; }
.nl.is-full .nl-top, .nl:fullscreen .nl-top { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.nl.is-full .nl-scene, .nl:fullscreen .nl-scene { width: min(100%, calc(52vh * 3.45)); margin: 0 auto; }
@media (max-width: 600px) { .nl-jb { min-width: 54px; padding: 9px 12px; font-size: 1rem; } .nl-jb.gap { margin-left: 0; } }


/* Whiteboard */
#whiteboard .tool-body .wrap { max-width: 1320px; }
.wb { display: grid; gap: 10px; background: var(--white); }
.wb-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.wb-bar .full-btn { margin-left: auto; }
.wb-bar .act { display: inline-flex; align-items: center; gap: 6px; }
.wb-bar .act svg { width: 18px; height: 18px; }
.wb-bar .act[disabled] { opacity: .4; cursor: default; background: var(--white); }
.wb-bar select { font: inherit; font-weight: 700; font-size: .92rem; border: 2px solid var(--charcoal); border-radius: 999px; padding: 7px 12px; background: var(--white); color: var(--charcoal); cursor: pointer; }
.wb-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--sky-soft); border-radius: var(--radius); padding: 10px 12px; }
.wb-tset { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-tset button { display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 6px 6px 5px; font: inherit; font-size: .72rem; font-weight: 700; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--charcoal); cursor: pointer; }
.wb-tset button svg { width: 24px; height: 24px; }
.wb-tset button:hover { background: var(--white); }
.wb-tset button[aria-pressed="true"] { background: var(--white); border-color: var(--charcoal); box-shadow: 0 3px 0 var(--charcoal); }
.wb-sep { width: 2px; align-self: stretch; background: rgba(64, 64, 64, .15); border-radius: 2px; }
.wb-cols { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wb-col { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); background: var(--c); cursor: pointer; padding: 0; }
.wb-col[aria-pressed="true"] { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.wb-custom { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(0, 0, 0, .25); background: conic-gradient(#e5484d, #f7c849, #3a9d6a, #80c0f3, #0057e1, #8a4fd6, #e5484d); cursor: pointer; }
.wb-custom input { position: absolute; inset: -8px; width: 50px; height: 50px; opacity: 0; cursor: pointer; }
.wb-custom.on { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.wb-size { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; color: var(--charcoal); }
.wb-size input { width: 120px; accent-color: var(--blue); }
.wb-dot { width: 40px; height: 40px; display: grid; place-items: center; }
.wb-dot i { display: block; border-radius: 50%; background: var(--charcoal); }
.wb-stamps { display: flex; gap: 4px; }
.wb-stamps[hidden] { display: none; }
.wb-stamps button { width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; background: var(--white); cursor: pointer; padding: 6px; }
.wb-stamps button svg { width: 100%; height: 100%; }
.wb-stamps button[aria-pressed="true"] { border-color: var(--charcoal); }
.wb-stage { position: relative; width: 100%; height: max(340px, calc(100vh - var(--wb-chrome, 250px))); height: max(340px, calc(100dvh - var(--wb-chrome, 250px))); border: 3px solid var(--charcoal); border-radius: 16px; overflow: hidden; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; justify-self: center; }
.wb-stage canvas { position: absolute; left: 0; top: 0; display: block; }
.wb-stage .wb-draw { cursor: crosshair; }
.wb-stage.t-text .wb-draw { cursor: text; }
.wb-stage.t-fill .wb-draw { cursor: cell; }
.wb-cursor { position: absolute; left: 0; top: 0; border: 2px solid rgba(64, 64, 64, .7); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); display: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.wb-text { position: absolute; z-index: 3; min-width: 120px; border: 2px dashed var(--blue); background: rgba(255, 255, 255, .6); font-family: var(--kid); line-height: 1.2; padding: 0 4px; resize: none; overflow: hidden; outline: none; white-space: pre; }
.wb .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wb-main { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 10px; align-items: start; }
.wb-main.no-tray { grid-template-columns: minmax(0, 1fr); }
.wb-main.no-tray .wb-tray { display: none; }
.wb-tray { height: max(340px, calc(100vh - var(--wb-chrome, 250px))); height: max(340px, calc(100dvh - var(--wb-chrome, 250px))); overflow-y: auto; overscroll-behavior: contain; background: var(--sky-soft); border-radius: 16px; padding: 10px 10px 14px; display: grid; align-content: start; gap: 10px; }
.wb-tray h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 4px 2px 0; }
.wb-tray .wb-tray-tip { font-size: .8rem; color: var(--ink-soft); margin: 0 2px; line-height: 1.35; }
.wb-tgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-ti { display: grid; place-items: center; min-width: 50px; height: 50px; padding: 4px 6px; background: var(--white); border: 2px solid transparent; border-radius: 12px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font: inherit; }
.wb-ti.wide { flex: 1 1 100%; }
.wb-ti:hover { border-color: var(--charcoal); }
.wb-ti:active { cursor: grabbing; }
.wb-ti svg { display: block; max-width: 100%; pointer-events: none; }
.wb-items { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wb-stage .wb-draw, .wb-stage .wb-over { z-index: 1; }
.wb-stage.t-move .wb-draw { pointer-events: none; }
.wb-stage.t-move .wb-items { pointer-events: auto; }
.wb-item { position: absolute; left: 0; top: 0; transform-origin: center center; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.wb-item svg { display: block; overflow: visible; pointer-events: none; }
.wb-item.sel { outline: 3px dashed var(--blue); outline-offset: 6px; border-radius: 6px; }
.wb-item.dragging { cursor: grabbing; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .22)); }
.wb-ghost { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; opacity: .9; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.wb-ghost svg { display: block; }
.wb-selbar { position: absolute; z-index: 4; display: flex; gap: 4px; padding: 4px; background: var(--white); border: 2px solid var(--charcoal); border-radius: 12px; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.wb-selbar[hidden] { display: none; }
.wb-selbar button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--charcoal); cursor: pointer; padding: 0; }
.wb-selbar button:hover { background: var(--sky-soft); }
.wb-selbar button.bin:hover { background: #fde4e4; color: #b4232a; }
.wb-selbar svg { width: 22px; height: 22px; }
.wb-tray.drop-del { outline: 3px dashed #d64545; outline-offset: -3px; }
@media (max-width: 760px) { .wb-main { grid-template-columns: minmax(0, 1fr); } .wb-tray { height: auto; max-height: 300px; } }
.wb-msg { font-weight: 700; color: var(--ink-soft); min-height: 1.2em; margin: 0; font-size: .92rem; }
@media (max-width: 760px) { .wb-tset button { min-width: 0; width: 46px; } .wb-tset button span { display: none; } .wb-sep { display: none; } .wb-bar .full-btn { margin-left: 0; } }
.wb.is-full { position: fixed; inset: 0; z-index: 50; overflow: auto; align-content: start; padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
.wb:fullscreen { overflow: auto; align-content: start; padding: 10px 16px; }
.wb.is-full .pts-tip, .wb:fullscreen .pts-tip, .wb.is-full .wb-msg:empty, .wb:fullscreen .wb-msg:empty { display: none; }
/* Feelings check-in */
#feelings-check-in .tool-body .wrap { max-width: 1200px; }
.fci { display: grid; gap: 14px; background: var(--white); }
.fci-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.fci-bar .full-btn { margin-left: auto; }
.fci-bar .act, .fci-t-acts .act { display: inline-flex; align-items: center; gap: 6px; }
.fci-bar .act svg, .fci-t-acts .act svg { width: 18px; height: 18px; }
.fci-hold { position: relative; overflow: hidden; }
.fci-hold::before { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: left; z-index: 0; }
.fci-hold.holding::before { transform: scaleX(1); transition: transform .9s linear; }
.fci-hold > * { position: relative; z-index: 1; }
.fci-board { position: relative; background: var(--sky-soft); border-radius: var(--radius); padding: clamp(14px, 3vw, 28px); display: grid; gap: 16px; overflow: hidden; }
.fci-q { text-align: center; font-family: var(--kid); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 3.2rem); color: var(--charcoal); line-height: 1.1; }
.fci-sub { text-align: center; margin: -8px 0 0; color: var(--ink-soft); font-weight: 700; }
.fci-faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 16px); }
.fci-faces.six { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; width: 100%; justify-self: center; }
.fci-face { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; background: var(--white); border: 3px solid var(--charcoal); border-radius: 20px; cursor: pointer; font: inherit; font-family: var(--kid); font-weight: 700; font-size: clamp(1rem, 1.9vw, 1.4rem); color: var(--charcoal); box-shadow: 0 4px 0 var(--charcoal); transition: transform .12s; touch-action: manipulation; }
.fci-face svg { width: min(100%, 120px); height: auto; aspect-ratio: 1; }
.fci-faces.six .fci-face svg { width: min(100%, 150px); }
.fci-face:hover { transform: translateY(-3px); }
.fci-face:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--charcoal); }
.fci-face.z-blue { background: #e6f2fd; } .fci-face.z-green { background: #e5f6e6; } .fci-face.z-yellow { background: #fdf3d3; } .fci-face.z-red { background: #fde4e4; }
.fci.plain .fci-face { background: var(--white); }
.fci-thanks { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; background: rgba(255, 255, 255, .96); padding: 20px; }
.fci-thanks[hidden] { display: none; }
.fci-thanks svg.big { width: clamp(120px, 22vw, 200px); height: auto; animation: fci-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.fci-thanks h2 { font-family: var(--kid); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--charcoal); }
.fci-thanks p { margin: 0; font-family: var(--kid); font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--ink-soft); font-weight: 700; }
.fci-chat { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.fci-chat button { font: inherit; font-family: var(--kid); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.4rem); padding: 12px 22px; border-radius: 999px; border: 3px solid var(--charcoal); background: var(--white); color: var(--charcoal); cursor: pointer; box-shadow: 0 4px 0 var(--charcoal); }
.fci-chat button.yes { background: var(--yellow); }
@keyframes fci-pop { from { transform: scale(.4); opacity: 0; } }
/* teacher view */
.fci-teacher { display: grid; gap: 16px; background: var(--white); border: 3px solid var(--charcoal); border-radius: var(--radius); padding: clamp(14px, 3vw, 26px); }
.fci-teacher[hidden] { display: none; }
.fci-t-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.fci-t-top h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--charcoal); }
.fci-t-top select { font: inherit; border: 2px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--white); color: var(--ink); }
.fci-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.fci-stat { background: var(--sky-soft); border-radius: 14px; padding: 12px 14px; }
.fci-stat b { display: block; font-family: var(--display); font-size: 1.9rem; color: var(--charcoal); line-height: 1.1; }
.fci-stat span { font-size: .9rem; color: var(--ink-soft); font-weight: 700; }
.fci-stat.chat { background: #fdf0c8; }
.fci-zonebar { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: #eef1f4; }
.fci-zonebar i { display: block; height: 100%; }
.fci-zkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; font-weight: 700; color: var(--ink-soft); margin-top: 6px; }
.fci-zkey span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.fci-bars { display: grid; gap: 8px; }
.fci-row { display: grid; grid-template-columns: 44px minmax(70px, 110px) minmax(0, 1fr) 42px; gap: 10px; align-items: center; }
.fci-row svg { width: 44px; height: 44px; }
.fci-row .nm { font-weight: 700; color: var(--charcoal); }
.fci-row .track { height: 22px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.fci-row .fill { height: 100%; border-radius: 999px; min-width: 0; transition: width .5s; }
.fci-row .n { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--charcoal); text-align: right; }
.fci-times { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fci-times li { display: inline-flex; align-items: center; gap: 4px; background: #f4f6f8; border-radius: 999px; padding: 3px 10px 3px 4px; font-size: .85rem; color: var(--ink-soft); font-weight: 700; }
.fci-times li svg { width: 24px; height: 24px; }
.fci-times li.talk { background: #fdf0c8; color: #7a5a00; }
.fci-teacher h3 { font-size: 1.1rem; color: var(--charcoal); margin-bottom: 8px; }
.fci-set { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.fci-set .lab { font-weight: 700; font-size: .92rem; color: var(--charcoal); margin-right: 6px; }
.fci-set .seg button { font-size: .88rem; padding: 7px 12px; }
.fci-t-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fci-empty { color: var(--ink-soft); font-weight: 700; }
.fci-note { font-size: .88rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .fci-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fci-bar .full-btn { margin-left: 0; } .fci-faces, .fci-faces.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fci-face { padding: 8px 4px; border-radius: 14px; } .fci-row { grid-template-columns: 34px minmax(60px, 80px) minmax(0, 1fr) 30px; gap: 6px; } .fci-row svg { width: 34px; height: 34px; } }
@media (max-width: 380px) { .fci-faces, .fci-faces.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .fci-thanks svg.big { animation: none; } .fci-face { transition: none; } }
.fci.is-full { position: fixed; inset: 0; z-index: 50; overflow: auto; align-content: start; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.fci:fullscreen { overflow: auto; align-content: start; padding: 14px 20px; }
.fci.is-full .fci-board, .fci:fullscreen .fci-board { min-height: calc(100vh - 90px); align-content: center; }
.fci.is-full .fci-face svg, .fci:fullscreen .fci-face svg { width: min(100%, 16vh); }
.fci.is-full .fci-faces.six .fci-face svg, .fci:fullscreen .fci-faces.six .fci-face svg { width: min(100%, 22vh); }
.fci.is-full .pts-tip, .fci:fullscreen .pts-tip { display: none; }
/* Phonics screening check */
#phonics-screening-check .tool-body .wrap { max-width: 1200px; }
.psc { display: grid; gap: 14px; background: var(--white); }
.psc-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.psc-bar .full-btn { margin-left: auto; }
.psc-bar .act, .psc-nav .act, .psc-res-acts .act { display: inline-flex; align-items: center; gap: 6px; }
.psc-bar .act svg, .psc-nav .act svg, .psc-res-acts .act svg { width: 18px; height: 18px; }
.psc-stage { position: relative; min-height: 440px; background: var(--sky-soft); border-radius: var(--radius); padding: clamp(14px, 3vw, 28px); display: grid; align-content: start; gap: 16px; overflow: hidden; }
.psc-alien { display: inline-block; width: 1em; height: 1em; flex: none; }
.psc-alien svg { width: 100%; height: 100%; display: block; }
/* start screen */
.psc-start { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.psc-start h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--charcoal); line-height: 1.1; }
.psc-start p { margin: 0; }
.psc-intro { display: grid; gap: 12px; }
.psc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.psc-facts li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--charcoal); }
.psc-facts .psc-alien { font-size: 2rem; }
.psc-facts b.dot { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-size: 1rem; }
.psc-form { display: grid; gap: 12px; background: var(--white); border-radius: var(--radius); padding: 18px; border: 2px solid var(--line); }
.psc-field { display: grid; gap: 5px; }
.psc-field > label, .psc-field > .psc-lab { font-weight: 700; font-size: .92rem; color: var(--charcoal); }
.psc-form select { font: inherit; font-size: 1rem; width: 100%; border: 2px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--white); color: var(--ink); }
.psc-form select:focus { outline: none; border-color: var(--blue); }
.psc-form .seg { flex-wrap: wrap; }
.psc-form .seg button { font-size: .9rem; padding: 7px 13px; }
.psc-go { display: inline-flex; justify-content: center; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 1.2rem; border: 3px solid var(--charcoal); border-radius: 999px; padding: 13px 22px; background: var(--yellow); color: var(--charcoal); cursor: pointer; box-shadow: 0 4px 0 var(--charcoal); }
.psc-go svg { width: 22px; height: 22px; }
.psc-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--charcoal); }
.psc-note { font-size: .88rem; color: var(--ink-soft); }
/* check pages */
.psc-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.psc-where { font-family: var(--kid); font-weight: 700; font-size: 1.15rem; color: var(--charcoal); }
.psc-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.psc-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--charcoal); }
.psc-dots i.on { background: var(--yellow); }
.psc-dots i.done { background: var(--charcoal); }
.psc-dots i.gap { width: 6px; border: 0; background: transparent; }
.psc-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 18px); }
.psc-page.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; width: 100%; justify-self: center; }
.psc-card { position: relative; background: var(--white); border: 3px solid var(--charcoal); border-radius: 18px; min-height: clamp(150px, 24vh, 240px); display: grid; grid-template-rows: 1fr auto; padding: 12px; container-type: inline-size; }
.psc-page.one .psc-card { min-height: clamp(260px, 46vh, 460px); }
.psc-card .psc-alien { position: absolute; top: 10px; left: 10px; font-size: clamp(2.4rem, 12cqi, 4.2rem); }
.psc-word { font-family: var(--kid); font-weight: 400; font-size: clamp(2.6rem, 17cqi, 6.5rem); color: #1d1d1d; display: grid; place-items: center; line-height: 1.1; padding: 10px 6px 4px; letter-spacing: .02em; overflow-wrap: anywhere; text-align: center; }
.psc-page.one .psc-word { font-size: clamp(3.4rem, 15cqi, 9rem); }
.psc-mark { display: flex; justify-content: center; gap: 10px; }
.psc-mark[hidden] { display: none; }
.psc-mark button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: .95rem; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--white); color: var(--ink-soft); cursor: pointer; }
.psc-mark button svg { width: 18px; height: 18px; }
.psc-mark button.yes[aria-pressed="true"] { background: #2f8f57; border-color: #2f8f57; color: #fff; }
.psc-mark button.no[aria-pressed="true"] { background: #d64545; border-color: #d64545; color: #fff; }
.psc-card.is-yes { border-color: #2f8f57; }
.psc-card.is-no { border-color: #d64545; }
.psc-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.psc-tally { font-weight: 700; color: var(--ink-soft); }
.psc-next { background: var(--charcoal) !important; color: var(--white) !important; border-color: var(--charcoal) !important; }
/* break and results */
.psc-break { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 20px 0; }
.psc-break h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--charcoal); }
.psc-break .psc-alien { font-size: 6rem; animation: psc-bob 2.4s ease-in-out infinite; }
@keyframes psc-bob { 50% { transform: translateY(-10px) rotate(-6deg); } }
.psc-res { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.psc-score { background: var(--white); border-radius: var(--radius); border: 3px solid var(--charcoal); padding: 20px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.psc-ring { width: 180px; height: 180px; }
.psc-ring text { font-family: var(--kid); }
.psc-verdict { font-weight: 800; font-size: 1.1rem; padding: 6px 14px; border-radius: 999px; }
.psc-verdict.met { background: #dff3e4; color: #1f7a43; }
.psc-verdict.not { background: #fdf0c8; color: #7a5a00; }
.psc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.psc-split div { background: var(--sky-soft); border-radius: 12px; padding: 8px; font-size: .88rem; color: var(--ink-soft); }
.psc-split b { display: block; font-size: 1.3rem; color: var(--charcoal); }
.psc-detail { display: grid; gap: 16px; min-width: 0; }
.psc-detail h3 { font-size: 1.15rem; color: var(--charcoal); margin-bottom: 6px; }
.psc-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.psc-chips li { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; background: var(--white); border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--charcoal); }
.psc-chips li .psc-alien { font-size: 1.3rem; }
.psc-chips.sounds li { background: #fdf0c8; border-color: #f2d98a; font-family: var(--kid); font-size: 1.15rem; }
.psc-chips.sounds li small { font-family: var(--body); font-size: .78rem; color: var(--ink-soft); }
.psc-res-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.psc-bit { position: absolute; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; z-index: 4; animation: psc-conf 1.7s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes psc-conf { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@media (max-width: 860px) { .psc-start, .psc-res { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .psc-bar .full-btn { margin-left: 0; } .psc-page { grid-template-columns: minmax(0, 1fr); } .psc-card { min-height: 130px; } .psc-word { font-size: clamp(2.4rem, 14cqi, 4rem); } }
@media (prefers-reduced-motion: reduce) { .psc-bit { display: none; } .psc-break .psc-alien { animation: none; } }
.psc.is-full { position: fixed; inset: 0; z-index: 50; overflow: auto; align-content: start; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.psc:fullscreen { overflow: auto; align-content: start; padding: 14px 20px; }
.psc.is-full .psc-stage, .psc:fullscreen .psc-stage { min-height: calc(100vh - 90px); }
.psc.is-full .psc-card, .psc:fullscreen .psc-card { min-height: calc((100vh - 290px) / 2); }
.psc.is-full .psc-page.one .psc-card, .psc:fullscreen .psc-page.one .psc-card { min-height: calc(100vh - 300px); }
.psc.is-full .pts-tip, .psc:fullscreen .pts-tip { display: none; }
/* Puzzle maker */
#puzzle-maker .tool-body .wrap { max-width: 1300px; }
.pz { display: grid; gap: 14px; background: var(--white); }
.pz-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.pz-bar .full-btn { margin-left: auto; }
.pz-bar .act, .pz-acts .act { display: inline-flex; align-items: center; gap: 6px; }
.pz-bar .act svg, .pz-acts .act svg { width: 18px; height: 18px; }
.pz-tabs button { font-size: 1rem; padding: 9px 16px; }
.pz-main { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 18px; align-items: start; }
.pz-setup { display: grid; gap: 14px; background: var(--sky-soft); border-radius: var(--radius); padding: 16px; }
.pz-setup form { display: grid; gap: 12px; }
.pz-setup form[hidden] { display: none; }
.pz-field { display: grid; gap: 5px; min-width: 0; }
.pz-field > label, .pz-field > .pz-lab { font-weight: 700; font-size: .92rem; color: var(--charcoal); }
.pz-field small { font-weight: 400; color: var(--ink-soft); }
.pz-setup input[type="text"], .pz-setup textarea, .pz-setup select { font: inherit; font-size: 1rem; width: 100%; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--white); color: var(--ink); }
.pz-setup textarea { min-height: 190px; resize: vertical; line-height: 1.45; }
.pz-setup input:focus, .pz-setup textarea:focus, .pz-setup select:focus { outline: none; border-color: var(--blue); }
.pz-setup .seg { flex-wrap: wrap; }
.pz-setup .seg button { font-size: .88rem; padding: 7px 12px; }
.pz-make { display: inline-flex; justify-content: center; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 1.1rem; border: 3px solid var(--charcoal); border-radius: 999px; padding: 12px 20px; background: var(--yellow); color: var(--charcoal); cursor: pointer; box-shadow: 0 4px 0 var(--charcoal); }
.pz-make svg { width: 22px; height: 22px; }
.pz-make:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--charcoal); }
.pz-msg { font-weight: 700; color: var(--charcoal); }
.pz-msg.bad { color: #b4232a; }
.pz-msg:empty { display: none; }
.pz-play { display: grid; gap: 12px; min-width: 0; }
.pz-top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.pz-top h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--charcoal); }
.pz-status { font-weight: 700; color: var(--ink-soft); }
.pz-status.win { color: #1f7a43; font-size: 1.15rem; }
.pz-area { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: 16px; align-items: start; }
.pz-area.wide-side { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.pz-area.no-side { grid-template-columns: minmax(0, 1fr); }
.pz-board { min-width: 0; display: grid; justify-items: center; gap: 12px; }
.pz-grid { container-type: inline-size; display: grid; width: min(100%, 620px); background: var(--white); border: 3px solid var(--charcoal); border-radius: 14px; padding: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pz-ws { grid-template-columns: repeat(var(--n), 1fr); }
.pz-ws .pz-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: calc(100cqi / var(--n) * .56); font-weight: 700; color: var(--charcoal); border-radius: 40%; cursor: pointer; line-height: 1; }
.pz-ws .pz-cell.f0 { background: #fde3c8; } .pz-ws .pz-cell.f1 { background: #dcebfd; } .pz-ws .pz-cell.f2 { background: #dff3e4; } .pz-ws .pz-cell.f3 { background: #fbd3dc; } .pz-ws .pz-cell.f4 { background: #ece0fb; } .pz-ws .pz-cell.f5 { background: #fdf0c8; }
.pz-ws .pz-cell.sel { background: var(--yellow); }
.pz-ws.answers .pz-cell.ans:not([class*=" f"]) { box-shadow: inset 0 0 0 3px #e5484d; }
.pz-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pz-side h3 { font-size: 1.1rem; color: var(--charcoal); }
.pz-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pz-words li { font-weight: 700; font-size: 1.05rem; background: var(--sky-soft); border-radius: 999px; padding: 4px 12px; color: var(--charcoal); }
.pz-words li.done { text-decoration: line-through; text-decoration-thickness: 3px; background: #dff3e4; color: #1f7a43; }
.pz-cw { grid-template-columns: repeat(var(--cols), 1fr); width: min(100%, calc(var(--cols) * 46px + 12px)); background: transparent; border: 0; padding: 0; gap: 0; }
.pz-cw .pz-block { aspect-ratio: 1; }
.pz-cw .pz-cc { position: relative; aspect-ratio: 1; background: var(--white); outline: 2px solid var(--charcoal); outline-offset: -1px; }
.pz-cw .pz-cc input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 700; font-size: calc(100cqi / var(--cols) * .55); color: var(--charcoal); text-transform: uppercase; padding: 0; padding-top: 6%; caret-color: transparent; border-radius: 0; }
.pz-cw .pz-cc input:focus { outline: none; }
.pz-cw .pz-cc.word { background: #fdf0c8; }
.pz-cw .pz-cc.cur { background: var(--yellow); }
.pz-cw .pz-cc.wrong input { color: #b4232a; }
.pz-cw .pz-cc.wrong { background: #fde3e4; }
.pz-cw .pz-cc.shown input { color: var(--blue); }
.pz-num { position: absolute; top: 2px; left: 3px; font-size: calc(100cqi / var(--cols) * .22); font-weight: 700; color: var(--charcoal); line-height: 1; pointer-events: none; z-index: 1; }
.pz-clues { display: grid; gap: 12px; }
.pz-clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pz-clues li { display: flex; gap: 8px; padding: 5px 8px; border-radius: 10px; cursor: pointer; line-height: 1.35; }
.pz-clues li b { flex: none; min-width: 1.4em; color: var(--charcoal); }
.pz-clues li.on { background: #fdf0c8; }
.pz-clues li.ok { color: #1f7a43; text-decoration: line-through; }
.pz-sd { grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 560px); padding: 0; overflow: hidden; }
.pz-sd .pz-s { aspect-ratio: 1; display: grid; place-items: center; border-right: 1px solid #c3cad1; border-bottom: 1px solid #c3cad1; font: inherit; font-size: calc(100cqi / var(--n) * .52); font-weight: 400; color: var(--blue); background: var(--white); padding: 0; cursor: pointer; line-height: 1; overflow: hidden; }
.pz-sd.small .pz-s { font-size: calc(100cqi / var(--n) * .26); overflow-wrap: anywhere; }
.pz-sd .pz-s.given { color: var(--charcoal); font-weight: 700; cursor: default; background: #f4f6f8; }
.pz-sd .pz-s.br { border-right: 3px solid var(--charcoal); } .pz-sd .pz-s.bb { border-bottom: 3px solid var(--charcoal); }
.pz-sd .pz-s.lastc { border-right: 0; } .pz-sd .pz-s.lastr { border-bottom: 0; }
.pz-sd .pz-s.peer { background: #eef5fd; }
.pz-sd .pz-s.sel { background: var(--yellow); }
.pz-sd .pz-s.wrong { color: #b4232a; background: #fde3e4; }
.pz-pal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pz-pal button { min-width: 52px; height: 52px; padding: 0 12px; font: inherit; font-size: 1.4rem; font-weight: 700; border: 3px solid var(--charcoal); border-radius: 12px; background: var(--white); color: var(--charcoal); cursor: pointer; box-shadow: 0 3px 0 var(--charcoal); }
.pz-pal button.rub { font-size: .9rem; }
.pz-pal button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--charcoal); }
.pz-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pz-bit { position: absolute; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; z-index: 4; animation: pzconf 1.6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes pzconf { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@media (max-width: 980px) { .pz-main { grid-template-columns: minmax(0, 1fr); } .pz-area, .pz-area.wide-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pz-bar .full-btn { margin-left: 0; } .pz-pal button { min-width: 44px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .pz-bit { display: none; } }
.pz.is-full { position: fixed; inset: 0; z-index: 50; overflow: auto; align-content: start; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.pz:fullscreen { overflow: auto; align-content: start; padding: 14px 20px; }
.pz.is-full .pz-main, .pz:fullscreen .pz-main { grid-template-columns: minmax(0, 1fr); }
.pz.is-full .pz-setup, .pz:fullscreen .pz-setup, .pz.is-full .pz-tabs, .pz:fullscreen .pz-tabs, .pz.is-full .pts-tip, .pz:fullscreen .pts-tip { display: none; }
.pz.is-full .pz-grid, .pz:fullscreen .pz-grid { width: min(100%, 78vh); }
.pz.is-full .pz-cw, .pz:fullscreen .pz-cw { width: min(100%, calc(var(--cols) * 7.5vh)); }
/* Colourful semantics */
#colourful-semantics .tool-body .wrap { max-width: 1300px; }
.cs { --who: #f29b38; --who-s: #fde3c8; --doing: #f7c849; --doing-s: #fdf0c8; --what: #3a9d6a; --what-s: #dff3e4; --where: #3d7ef0; --where-s: #dcebfd; display: grid; gap: 14px; background: var(--white); }
.cs-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.cs-bar .full-btn { margin-left: auto; }
.cs-bar .act, .cs-panel .act { display: inline-flex; align-items: center; gap: 6px; }
.cs-bar .act svg { width: 18px; height: 18px; }
.cs-bar .act[aria-expanded="true"] { background: var(--charcoal); color: var(--white); }
.cs-lab { font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.cs-pdf-msg { font-weight: 700; color: var(--charcoal); margin: -4px 0 0; }
.cs-pdf-msg:empty { display: none; }
.cs-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-board, .cs-sentence, .cs-pick-cards { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cs-board { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; align-items: start; }
.cs-col, .cs-pick-part { --c: var(--who); --s: var(--who-s); }
.cs-col.p-doing, .cs-pick-part.p-doing { --c: var(--doing); --s: var(--doing-s); }
.cs-col.p-what, .cs-pick-part.p-what { --c: var(--what); --s: var(--what-s); }
.cs-col.p-where, .cs-pick-part.p-where { --c: var(--where); --s: var(--where-s); }
.cs-col { display: grid; gap: 10px; background: var(--s); border: 3px solid var(--c); border-radius: var(--radius); padding: 10px; min-width: 0; }
.cs-col[hidden] { display: none; }
.cs-head { font-size: clamp(1.05rem, 1.8vw, 1.4rem); text-align: center; background: var(--c); color: var(--charcoal); border-radius: 12px; padding: 6px 8px; }
.cs-col.p-what .cs-head, .cs-col.p-where .cs-head { color: var(--white); }
.cs-slot { display: grid; place-items: center; min-height: clamp(130px, 15vw, 190px); background: var(--white); border: 3px dashed var(--c); border-radius: 16px; padding: 8px; transition: background .15s, transform .15s; }
.cs-slot.full { border-style: solid; }
.cs-slot.over { background: var(--s); transform: scale(1.03); }
.cs-hint { color: var(--ink-soft); font-size: .9rem; text-align: center; }
.cs-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cs-tray:empty::before { content: "No cards chosen. Press Choose cards to add some."; color: var(--ink-soft); font-size: .85rem; text-align: center; }
.cs-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; width: clamp(66px, 6.4vw, 88px); padding: 5px 4px 4px; background: var(--white); border: 3px solid var(--c); border-radius: 12px; cursor: grab; font: inherit; font-size: clamp(.72rem, .95vw, .9rem); font-weight: 700; color: var(--charcoal); touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 3px 0 var(--c); }
.cs-card svg, .cs-card img, .cs-card .cs-word { width: 100%; aspect-ratio: 1; pointer-events: none; }
.cs-card img { object-fit: cover; border-radius: 6px; display: block; }
.cs-card .cs-word { display: grid; place-items: center; border-radius: 8px; background: var(--s); font-size: calc(var(--fs, 1.6) * 1em); line-height: 1.05; text-align: center; overflow: hidden; overflow-wrap: break-word; padding: 4px; }
.cs-card > span { pointer-events: none; line-height: 1.1; overflow-wrap: break-word; text-align: center; max-width: 100%; }
.cs-card.long > span { font-size: .8em; letter-spacing: -.01em; }
.cs-card:hover { transform: translateY(-2px); }
.cs-card.used { visibility: hidden; }
.cs-card.big { width: clamp(104px, 11vw, 150px); font-size: clamp(.9rem, 1.3vw, 1.15rem); cursor: pointer; }
.cs-card.big.in { animation: cspop .4s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes cspop { from { transform: scale(.5); } }
.cs-ghost { position: fixed; z-index: 80; pointer-events: none; margin: 0; transform: rotate(-4deg) scale(1.08); box-shadow: 0 10px 18px rgba(0, 0, 0, .2); }
.cs-sentence { display: flex; align-items: center; gap: 14px; background: #f7f8fa; border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 18px; min-height: 84px; }
.cs-read { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); cursor: pointer; box-shadow: 0 3px 0 var(--charcoal); padding: 0; }
.cs-read svg { width: 28px; height: 28px; }
.cs-read:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--charcoal); }
.cs-text { font-size: clamp(1.4rem, 3vw, 2.5rem); line-height: 1.35; color: var(--charcoal); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cs-text .w { padding: 0 .12em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cs-text .w-who { background: var(--who-s); box-shadow: inset 0 -.18em 0 var(--who); }
.cs-text .w-doing { background: var(--doing-s); box-shadow: inset 0 -.18em 0 var(--doing); }
.cs-text .w-what { background: var(--what-s); box-shadow: inset 0 -.18em 0 var(--what); }
.cs-text .w-where { background: var(--where-s); box-shadow: inset 0 -.18em 0 var(--where); }
.cs-text .w.reading { background: var(--yellow); }
.cs-text.empty { color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.3rem); }
/* Choose cards panel and Add your own card */
.cs-panel { display: grid; gap: 16px; border: 2px solid var(--charcoal); border-radius: var(--radius); padding: clamp(14px, 2.4vw, 22px); background: #f7f8fa; }
.cs-panel[hidden] { display: none; }
.cs-panel-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cs-panel-head h2 { font-size: 1.35rem; color: var(--charcoal); }
.cs-panel-head p { color: var(--ink-soft); flex: 1 1 260px; }
.cs-panel-head .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cs-add { display: grid; gap: 12px; background: var(--white); border: 2px dashed var(--charcoal); border-radius: 16px; padding: 14px 16px; }
.cs-add h3 { font-size: 1.15rem; color: var(--charcoal); }
.cs-add-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; align-items: end; }
.cs-field { display: grid; gap: 5px; min-width: 0; }
.cs-field label, .cs-field .cs-flab { font-weight: 700; font-size: .9rem; color: var(--charcoal); }
.cs-field input[type="text"], .cs-field select { font: inherit; font-size: 1rem; width: 100%; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--white); color: var(--ink); }
.cs-field input:focus, .cs-field select:focus { outline: none; border-color: var(--blue); }
.cs-photo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-photo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cs-photo .act { cursor: pointer; }
.cs-photo:focus-within .act { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); }
.cs-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 2px solid var(--line); }
.cs-add-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.cs-add-foot .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cs-note { font-size: .88rem; color: var(--ink-soft); }
.cs-msg { font-weight: 700; }
.cs-msg.bad { color: #b4232a; } .cs-msg.ok { color: #1f7a43; }
.cs-pick { display: grid; gap: 14px; }
.cs-pick-part { display: grid; gap: 10px; background: var(--s); border: 3px solid var(--c); border-radius: 16px; padding: 12px; }
.cs-pick-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cs-pick-head h3 { font-size: 1.15rem; color: var(--charcoal); }
.cs-pick-head .n { color: var(--ink-soft); font-size: .9rem; margin-right: auto; }
.cs-pick-head .act { font-size: .85rem; padding: 6px 12px; background: var(--white); }
.cs-pick-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-pick-cards .cs-card { cursor: pointer; width: 76px; touch-action: manipulation; }
.cs-pick-cards .cs-card[aria-pressed="false"] { opacity: .38; box-shadow: none; border-style: dashed; }
.cs-pick-cards .cs-card[aria-pressed="true"]::after { content: ""; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #1f7a43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border: 2px solid var(--white); }
.cs-own-wrap { display: grid; gap: 4px; justify-items: center; }
.cs-del { font: inherit; font-size: .75rem; font-weight: 700; border: 0; background: none; color: #b4232a; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
.cs-del.sure { background: #b4232a; color: var(--white); text-decoration: none; border-radius: 999px; padding: 3px 8px; }
@media (max-width: 860px) { .cs-board { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) { .cs-bar .full-btn { margin-left: 0; } .cs-col { padding: 8px; } .cs-tray { gap: 6px; } .cs-card { width: 62px; } .cs-sentence { padding: 12px; gap: 10px; } .cs-read { width: 48px; height: 48px; } .cs-pick-cards .cs-card { width: 66px; } }
@media (prefers-reduced-motion: reduce) { .cs-card.big.in { animation: none; } }
.cs.is-full { position: fixed; inset: 0; z-index: 50; overflow: auto; align-content: start; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.cs:fullscreen { overflow: auto; align-content: start; padding: 14px 20px; }
.cs.is-full .pts-tip, .cs:fullscreen .pts-tip { display: none; }
/* Spelling game */
#spelling-game .tool-body .wrap { max-width: 1200px; }
/* Known bug notice: delete the sg-notice paragraph in the page once the voice is fixed */
.sg-notice { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 16px; background: #fff6d6; border: 2px solid var(--charcoal); border-radius: 14px; color: var(--charcoal); font-size: 1rem; line-height: 1.45; }
.sg-notice svg { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.sg { display: grid; gap: 12px; background: var(--white); }
.sg-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.sg-bar .full-btn { margin-left: auto; }
.sg-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sg-lab { font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.sg-vowels .v { font: 400 1.2rem/1 'Mr Wagemans Print', 'Andika', var(--body); min-width: 40px; }
.sg-game { position: relative; overflow: hidden; display: grid; gap: clamp(12px, 2.4vw, 22px); padding: clamp(14px, 3vw, 28px); background: var(--sky); background-image: radial-gradient(rgba(255, 255, 255, .22) 2px, transparent 2.5px); background-size: 26px 26px; border: 3px solid var(--charcoal); border-radius: var(--radius); box-shadow: 0 5px 0 rgba(0, 0, 0, .12); }
.sg-stars { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.sg-stars svg { width: clamp(22px, 3.6vw, 34px); height: clamp(22px, 3.6vw, 34px); }
.sg-stars path { fill: rgba(255, 255, 255, .55); stroke: var(--charcoal); stroke-width: 2.2; stroke-linejoin: round; transition: fill .3s; }
.sg-stars .on path { fill: var(--yellow); }
.sg-stars .new { animation: sg-star .6s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes sg-star { 0% { transform: scale(.3) rotate(-90deg); } 100% { transform: none; } }
.sg-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 4vw, 44px); align-items: center; justify-content: center; }
.sg-pic { position: relative; width: clamp(150px, 26vw, 270px); aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; background: var(--white); border: 3px solid var(--charcoal); border-radius: 26px; box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.sg-pic svg { width: 84%; height: 84%; }
.sg-pic.in svg { animation: sg-in .5s cubic-bezier(.2, .9, .3, 1.35); }
@keyframes sg-in { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
.sg-hear { position: absolute; left: -12px; bottom: -12px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); cursor: pointer; box-shadow: 0 3px 0 var(--charcoal); padding: 0; }
.sg-hear svg { width: 28px; height: 28px; }
.sg-hear:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--charcoal); }
.sg-right { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.sg-word { display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; cursor: default; }
.sg-slot { position: relative; width: clamp(66px, 12vw, 124px); aspect-ratio: .86; display: grid; place-items: center; background: var(--white); border: 3px solid var(--charcoal); border-radius: 18px; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); font: 400 clamp(50px, 9.4vw, 100px)/1 'Mr Wagemans Print', 'Andika', var(--body); color: var(--charcoal); padding-bottom: .12em; transition: transform .18s ease, background .25s; }
.sg-slot::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 16%; height: 5px; border-radius: 3px; background: #c9d3dc; }
.sg-slot.next::after { background: var(--blue); animation: sg-blink 1s steps(2) infinite; }
.sg-slot.filled::after { display: none; }
.sg-slot.pop { animation: sg-pop .35s cubic-bezier(.2, .9, .3, 1.5); }
.sg-slot.say { transform: translateY(-12px) scale(1.08); background: var(--yellow); }
.sg-word.done { cursor: pointer; }
.sg-word.done .sg-slot { background: #c6efd2; }
.sg-word.whole .sg-slot { animation: sg-hop .5s ease both; }
.sg-word.whole .sg-slot:nth-child(2) { animation-delay: .08s; }
.sg-word.whole .sg-slot:nth-child(3) { animation-delay: .16s; }
@keyframes sg-blink { 50% { opacity: .15; } }
@keyframes sg-pop { from { transform: scale(.6); } }
@keyframes sg-hop { 40% { transform: translateY(-16px); } }
.sg-after { min-height: 64px; display: grid; gap: 10px; justify-items: center; align-content: center; }
.sg-praise { font: 800 clamp(1.4rem, 3.4vw, 2.2rem)/1.1 var(--display); color: var(--charcoal); text-align: center; text-wrap: balance; }
.sg-praise:empty { display: none; }
.sg-keys { --kw: clamp(40px, 6.6vw, 70px); --kg: clamp(5px, 1vw, 10px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kg); width: 100%; max-width: calc(13 * var(--kw) + 12 * var(--kg)); margin: 0 auto; }
.sg-key { --k: #fdf0c8; width: var(--kw); aspect-ratio: 1; display: grid; place-items: center; padding: 0 0 .14em; border: 3px solid var(--charcoal); border-radius: 14px; background: var(--k); color: var(--charcoal); font: 400 clamp(30px, 4.6vw, 48px)/1 'Mr Wagemans Print', 'Andika', var(--body); cursor: pointer; box-shadow: 0 4px 0 var(--charcoal); transition: transform .08s ease, box-shadow .08s ease; touch-action: manipulation; }
.sg-key:hover { filter: brightness(1.04); }
.sg-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--charcoal); }
.sg-key.vow { --k: #fbd3dc; }
.sg-key.alt { --k: #dcedfb; }
.sg-key.nope { animation: sg-shake .4s; }
.sg-key.hint { animation: sg-glow 1s ease-in-out infinite; }
@keyframes sg-shake { 20%, 60% { transform: translateX(-6px) rotate(-4deg); } 40%, 80% { transform: translateX(6px) rotate(4deg); } }
@keyframes sg-glow { 50% { transform: translateY(-5px); box-shadow: 0 9px 0 var(--charcoal), 0 0 0 6px rgba(255, 255, 255, .8); } }
.sg-fly { position: fixed; z-index: 70; display: grid; place-items: center; padding-bottom: .14em; border: 3px solid var(--charcoal); border-radius: 14px; color: var(--charcoal); font-family: 'Mr Wagemans Print', 'Andika', var(--body); pointer-events: none; }
.sg-bit { position: absolute; width: 11px; height: 15px; border-radius: 3px; pointer-events: none; z-index: 4; }
.sg-win { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 14px; padding: 20px; text-align: center; background: rgba(128, 192, 243, .95); }
.sg-win h2 { font: 800 clamp(2rem, 6vw, 3.6rem)/1.05 var(--display); color: var(--charcoal); }
.sg-win p { font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.3rem); color: var(--charcoal); }
.sg-win .sg-bigstar { width: clamp(90px, 16vw, 150px); animation: sg-star .8s cubic-bezier(.2, .9, .3, 1.4); }
.sg-win .sg-bigstar path { fill: var(--yellow); stroke: var(--charcoal); stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 900px) { .sg-keys { max-width: calc(9 * var(--kw) + 8 * var(--kg)); } }
@media (max-width: 640px) { .sg-keys { max-width: calc(7 * var(--kw) + 6 * var(--kg)); } .sg-stage { grid-template-columns: 1fr; justify-items: center; } .sg-bar .full-btn { margin-left: 0; } .sg-after { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .sg *, .sg *::after { animation: none !important; transition: none !important; } }
.sg.is-full { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: auto; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sg:fullscreen { display: flex; flex-direction: column; padding: 14px 20px; overflow: auto; }
.sg.is-full .sg-game, .sg:fullscreen .sg-game { flex: 1; align-content: space-evenly; }
.sg.is-full .pts-tip, .sg:fullscreen .pts-tip { display: none; }

/* Handwriting board */
@font-face { font-family: 'Mr Wagemans Print'; src: url('/fonts/mr-wagemans-print-v2.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mr Wagemans Print'; src: url('/fonts/mr-wagemans-print-bold-v2.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
#handwriting-board .tool-body .wrap { max-width: 1400px; }
.hw { display: grid; gap: 12px; background: var(--white); }
.hw-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.hw-bar .full-btn { margin-left: auto; }
.hw-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hw-lab { font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.hw .sw { width: 34px; height: 34px; }
.hw .act { display: inline-flex; align-items: center; gap: 6px; }
.hw .act svg { width: 18px; height: 18px; }
.hw .act[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
.hw-size button { padding: 7px 12px; }
.hw-size i { display: inline-block; border-radius: 50%; background: currentColor; }
.hw-set { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; background: var(--sky-soft); border-radius: 14px; padding: 10px 12px; }
.hw-lines { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-lines button { display: flex; flex-direction: column; align-items: center; gap: 3px; font: inherit; font-weight: 700; font-size: .78rem; border: 2px solid transparent; border-radius: 12px; background: var(--white); padding: 5px 8px; cursor: pointer; color: var(--charcoal); }
.hw-lines button[aria-pressed="true"] { border-color: var(--charcoal); }
.hw-lines svg { width: 46px; height: 26px; border-radius: 3px; border: 1px solid var(--line); }
.hw-step { display: inline-flex; align-items: center; gap: 6px; }
.hw-step button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); font: 800 1.15rem/1 var(--display); cursor: pointer; padding: 0; }
.hw-step button:hover { background: var(--yellow); }
.hw-step output { min-width: 1.4em; text-align: center; font: 800 1.35rem/1 var(--display); color: var(--charcoal); font-variant-numeric: tabular-nums; }
.hw-trace { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--white); border-radius: 12px; padding: 6px 8px; }
.hw-trace input[type="text"] { font: 400 1.3rem 'Mr Wagemans Print', 'Andika', var(--body); color: var(--charcoal); border: 2px solid var(--line); border-radius: 10px; padding: 3px 10px; width: 11em; max-width: 100%; }
.hw-trace input[type="text"]:focus { outline: none; border-color: var(--blue); }
.hw-trace .seg button { padding: 6px 12px; font-size: .85rem; }
.hw-board { position: relative; height: min(72vh, max(320px, 50vw)); border: 3px solid var(--charcoal); border-radius: var(--radius); overflow: hidden; background: #ffffff; box-shadow: 0 5px 0 rgba(0, 0, 0, .12); }
.hw-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hw-ink { cursor: crosshair; touch-action: none; }
.hw.erasing #hw-ink { cursor: cell; }
@media (max-width: 600px) { .hw-bar .full-btn { margin-left: 0; } .hw-board { height: 62vh; } }
.hw.is-full { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.hw:fullscreen { display: flex; flex-direction: column; padding: 14px 20px; }
.hw.is-full .hw-board, .hw:fullscreen .hw-board { flex: 1; height: auto; min-height: 0; }
.hw.is-full .pts-tip, .hw:fullscreen .pts-tip { display: none; }

/* Feedback form: report a bug or request a tool or printable */
.fb { display: grid; gap: 16px; background: var(--sky-soft); border: 2px solid var(--charcoal); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); }
.fb-head { display: flex; gap: 14px; align-items: flex-start; }
.fb-icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--yellow); border: 2px solid var(--charcoal); color: var(--charcoal); }
.fb-icon svg { width: 28px; height: 28px; }
.fb-head h2 { font-size: 1.5rem; color: var(--charcoal); }
.fb-head p { margin-top: 4px; color: var(--ink-soft); max-width: 60ch; }
.fb-form { display: grid; gap: 12px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kind { font: inherit; font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); cursor: pointer; }
.fb-kind svg { width: 18px; height: 18px; }
.fb-kind[aria-checked="true"] { background: var(--charcoal); color: var(--white); }
.fb-lab { font-weight: 700; font-size: .95rem; color: var(--charcoal); }
.fb-lab small { font-weight: 400; color: var(--ink-soft); font-size: .9em; }
.fb textarea, .fb input[type="email"], .ib input[type="password"] { font: inherit; font-size: 1rem; width: 100%; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--white); color: var(--ink); }
.fb textarea { min-height: 120px; resize: vertical; }
.fb textarea:focus, .fb input:focus, .ib input:focus { outline: none; border-color: var(--blue); }
.fb-field { display: grid; gap: 6px; }
.fb-email { max-width: 420px; }
.fb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fb-note { font-size: .88rem; color: var(--ink-soft); }
.fb-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fb-row .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.fb-row .btn:disabled { opacity: .6; cursor: wait; }
.fb-status { font-weight: 700; }
.fb-status.bad { color: #b4232a; }
.fb-done { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; background: var(--white); border: 2px solid #3a9d6a; border-radius: 14px; padding: 14px 16px; font-weight: 700; color: #1f7a43; }
.fb-done svg { width: 26px; height: 26px; flex: none; }
.fb-done .act { margin-left: auto; }
.fb-open { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.fb-open svg { width: 18px; height: 18px; }
.tool-about .fb { margin-top: 10px; }
.tool-about .fb-head h2 { font-size: 1.2rem; }
.fb-slot { margin-top: 8px; }
@media (max-width: 600px) { .fb-head { flex-direction: column; } .fb-done .act { margin-left: 0; } }

/* Feedback inbox (private page) */
.ib .wrap { padding-block: 28px 64px; display: grid; gap: 18px; }
.ib-login { display: grid; gap: 10px; max-width: 420px; background: var(--sky-soft); border-radius: var(--radius); padding: 22px; }
.ib-login .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; justify-self: start; }
.ib-check { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }
.ib-err { color: #b4232a; font-weight: 700; min-height: 1.2em; }
.ib-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ib-bar .act[aria-pressed="true"] { background: var(--charcoal); color: var(--white); }
.ib-bar .act .n { font-weight: 400; opacity: .8; }
.ib-bar .ib-right { margin-left: auto; display: flex; gap: 8px; }
.ib-list { display: grid; gap: 12px; }
#ib-box { display: grid; gap: 14px; }
#ib-box[hidden] { display: none; }
.ib-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-cat { font: inherit; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 2px solid transparent; background: var(--line); color: var(--charcoal); cursor: pointer; }
.ib-cat.bug { background: #fde3e4; } .ib-cat.tool { background: var(--sky-soft); } .ib-cat.printable { background: #fdf0c8; } .ib-cat.idea { background: #dff3e4; }
.ib-cat[aria-pressed="true"] { border-color: var(--charcoal); }
.ib-cat .n { font-weight: 400; }
.ib-item { display: grid; gap: 8px; border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--white); }
.ib-item.done { opacity: .62; }
.ib-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .88rem; color: var(--ink-soft); }
.ib-kind { font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 3px 10px; color: var(--charcoal); }
.ib-kind.bug { background: #fde3e4; } .ib-kind.tool { background: var(--sky-soft); } .ib-kind.printable { background: #fdf0c8; } .ib-kind.idea { background: #dff3e4; }
.ib-msg { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.ib-email { font-size: .92rem; overflow-wrap: anywhere; }
.ib-email b { user-select: all; }
.ib-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-acts .act { font-size: .85rem; padding: 6px 12px; }
.ib-acts .warn { border-color: #b4232a; color: #b4232a; }
.ib-empty { color: var(--ink-soft); padding: 18px 0; }

/* Group maker */
#group-maker .tool-body .wrap { max-width: 1400px; }
.gm { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; background: var(--white); }
.gm-main { display: grid; gap: 14px; min-width: 0; }
.gm-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.gm-step { display: inline-flex; align-items: center; gap: 6px; }
.gm-step button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); font: 800 1.3rem/1 var(--display); cursor: pointer; padding: 0; }
.gm-step button:hover { background: var(--yellow); }
.gm-step output { min-width: 2.2em; text-align: center; font: 800 1.6rem/1 var(--display); color: var(--charcoal); font-variant-numeric: tabular-nums; }
.gm-go { display: inline-flex; align-items: center; gap: 9px; font: 800 1.15rem/1 var(--display); border: 3px solid var(--charcoal); border-radius: 999px; padding: 12px 22px; background: var(--yellow); color: var(--charcoal); cursor: pointer; box-shadow: 0 4px 0 var(--charcoal); transition: transform .12s ease, box-shadow .12s ease; }
.gm-go:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--charcoal); }
.gm-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--charcoal); }
.gm-go svg { width: 22px; height: 22px; }
.gm-go.spin svg { animation: gm-spin .5s ease; }
@keyframes gm-spin { to { transform: rotate(360deg); } }
.gm-msg { font-weight: 700; border-radius: 14px; padding: 10px 14px; background: var(--sky-soft); color: var(--charcoal); }
.gm-msg.bad { background: #fde3e4; color: #b4232a; }
.gm-msg:empty { display: none; }
.gm-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; align-items: start; }
.gm-group { --c: var(--yellow); border: 3px solid var(--charcoal); border-radius: var(--radius); background: var(--white); box-shadow: 0 5px 0 rgba(0, 0, 0, .12); overflow: hidden; min-width: 0; }
.gm-group h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--c); border-bottom: 3px solid var(--charcoal); padding: 10px 14px; font-size: 1.35rem; color: var(--charcoal); }
.gm-group h3 small { font: 700 .85rem var(--body); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 2px 10px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.gm-names { list-style: none; margin: 0; padding: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.gm-names li { background: color-mix(in srgb, var(--c) 30%, #ffffff); border: 2px solid var(--charcoal); border-radius: 999px; padding: 4px 13px; font-weight: 700; color: var(--charcoal); font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; }
.gm-board.deal .gm-names li { animation: gm-deal .32s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes gm-deal { from { opacity: 0; transform: translateY(-14px) rotate(-6deg) scale(.7); } }
.gm-empty { border: 3px dashed var(--line); border-radius: var(--radius); padding: 28px 20px; text-align: center; color: var(--ink-soft); font-weight: 700; }
.gm-side { display: grid; gap: 14px; }
.gm-box { border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; background: var(--white); }
.gm-box h2 { font-size: 1.1rem; color: var(--charcoal); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gm-box h2 small { font: 700 .85rem var(--body); color: var(--ink-soft); letter-spacing: 0; }
.gm-small { font-size: .85rem; color: var(--ink-soft); }
.gm-side textarea, .gm-side select { font: inherit; font-size: .95rem; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; color: var(--ink); background: var(--white); min-width: 0; }
.gm-side textarea { min-height: 170px; resize: vertical; line-height: 1.45; }
.gm-side textarea:focus, .gm-side select:focus { outline: none; border-color: var(--blue); }
.gm-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.gm-pick span { font-size: .85rem; color: var(--ink-soft); font-weight: 700; }
.gm-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gm-pairs li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fde3e4; border-radius: 12px; padding: 6px 6px 6px 12px; font-weight: 700; color: var(--charcoal); font-size: .92rem; }
.gm-pairs li svg { width: 16px; height: 16px; color: #b4232a; flex: none; }
.gm-pairs li button { margin-left: auto; border: 0; background: rgba(0, 0, 0, .08); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-weight: 800; line-height: 1; color: var(--charcoal); padding: 0; }
.gm-pairs .none { background: none; padding: 0; color: var(--ink-soft); font-weight: 400; }
.gm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-actions .act { font-size: .85rem; padding: 7px 12px; }
@media (max-width: 980px) { .gm { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .gm-bar .full-btn { margin-left: 0; } }
.gm.is-full { position: fixed; inset: 0; z-index: 50; display: block; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.gm:fullscreen { display: block; padding: 20px 28px; overflow: auto; }
.gm.is-full .gm-side, .gm:fullscreen .gm-side, .gm.is-full .pts-tip, .gm:fullscreen .pts-tip { display: none; }
.gm.is-full .gm-board, .gm:fullscreen .gm-board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gm.is-full .gm-group h3, .gm:fullscreen .gm-group h3 { font-size: 1.7rem; }
.gm.is-full .gm-names li, .gm:fullscreen .gm-names li { font-size: 1.35rem; }

/* Seating plan */
#seating-plan .tool-body .wrap { max-width: 1520px; }
.sp { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; background: var(--white); }
.sp-main { display: grid; gap: 12px; min-width: 0; }
.sp-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.sp-bar select { font: inherit; font-weight: 700; border: 2px solid var(--line); border-radius: 10px; padding: 7px 10px; max-width: 220px; color: var(--charcoal); background: var(--white); }
.sp-bar .full-btn { margin-left: auto; }
.sp-strip { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; background: var(--sky-soft); border-radius: 14px; padding: 10px 12px; }
.sp-strip input { font: inherit; border: 2px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.sp-small { font-size: .85rem; color: var(--ink-soft); }
.sp-viewport { overflow: auto; border: 2px solid var(--line); border-radius: var(--radius); background: #e6ecf1; }
.sp-sizer { position: relative; margin: 0 auto; }
.sp-room { position: absolute; left: 0; top: 0; width: 1200px; height: 800px; transform-origin: 0 0; overflow: hidden; background-color: #f4f7fa; background-image: radial-gradient(#cfd8e1 1.5px, transparent 1.7px); background-size: 20px 20px; user-select: none; -webkit-user-select: none; }
.sp-item { position: absolute; touch-action: none; cursor: grab; }
.sp-item.dragging { cursor: grabbing; z-index: 30; }
.sp-item.dragging .sp-shape { box-shadow: 0 14px 22px rgba(0, 0, 0, .18); }
.sp-shape { position: absolute; inset: 0; background: var(--c, #ffffff); border: 3px solid var(--charcoal); border-radius: 10px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.sp-shape.round { border-radius: 50%; }
.sp-label { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.05; color: var(--charcoal); white-space: nowrap; pointer-events: none; text-align: center; }
.k-area .sp-shape { background: color-mix(in srgb, var(--c, #80c0f3) 32%, #ffffff); border: 3px dashed rgba(64, 64, 64, .35); box-shadow: none; border-radius: 30px; place-items: start center; padding-top: 10px; }
.k-area .sp-label { font-size: 22px; opacity: .55; }
.k-spot .sp-shape { border-width: 3px; }
.t-board .sp-shape { background: #ffffff; border-width: 4px; border-radius: 4px; box-shadow: none; }
.t-board .sp-label { font-size: 13px; }
.t-door .sp-shape { background: #c48a45; border-width: 2px; border-radius: 3px; box-shadow: none; }
.t-door .sp-label { font-size: 11px; color: #ffffff; }
.t-teacher .sp-shape { background: #c48a45; }
.t-teacher .sp-label { color: #ffffff; font-size: 16px; }
.sp-seat { position: absolute; min-width: 52px; max-width: 82px; height: 36px; padding: 0 8px; border-radius: 999px; background: #ffffff; border: 2.5px solid var(--charcoal); font: 700 16px/31px var(--body); color: var(--charcoal); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); touch-action: none; }
.sp-seat:not(.named) { color: #8d969e; border-style: dashed; background: rgba(255, 255, 255, .9); font-size: 18px; }
.k-spot .sp-seat { max-width: 104px; }
.k-spot .sp-seat:not(.named) { background: rgba(255, 255, 255, .55); border-color: rgba(64, 64, 64, .6); }
.sp-seat:hover, .sp-seat:focus-visible { border-color: var(--blue); }
.sp-seat.drop { background: var(--yellow); border-color: var(--charcoal); border-style: solid; transform-origin: center; }
.sp.picking .sp-seat:not(.named) { background: #fff5d6; border-color: var(--yellow); }
.sp-item.sel .sp-shape { outline: 4px solid var(--blue); outline-offset: 5px; }
.sp-edit { position: absolute; z-index: 50; transform: translate(-50%, -50%); width: 140px; font: 700 16px var(--body); color: var(--charcoal); border: 3px solid var(--blue); border-radius: 10px; padding: 6px 8px; text-align: center; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.sp-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -60%) rotate(-4deg); background: var(--yellow); border: 2.5px solid var(--charcoal); border-radius: 999px; padding: 6px 14px; font-weight: 700; color: var(--charcoal); box-shadow: 0 10px 20px rgba(0, 0, 0, .2); white-space: nowrap; }
.sp-side { display: grid; gap: 14px; }
.sp-box { border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; background: var(--white); }
.sp-box h2 { font-size: 1.1rem; color: var(--charcoal); }
.sp-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-add button { display: flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: .86rem; text-align: left; border: 2px solid var(--line); background: var(--white); border-radius: 10px; padding: 6px 8px; cursor: pointer; color: var(--charcoal); min-width: 0; }
.sp-add button:hover { border-color: var(--charcoal); background: var(--sky-soft); }
.sp-add svg { width: 28px; height: 22px; flex: none; }
.sp-add button span { min-width: 0; overflow-wrap: anywhere; }
.sp-sel-empty { color: var(--ink-soft); font-size: .95rem; }
.sp-sel-type { font-weight: 700; color: var(--charcoal); }
.sp-field { display: grid; gap: 4px; font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.sp-side input[type="text"], .sp-side textarea { font: inherit; font-size: .95rem; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; color: var(--ink); min-width: 0; }
.sp-side input[type="text"]:focus, .sp-side textarea:focus, .sp-strip input:focus { outline: none; border-color: var(--blue); }
.sp-side textarea { min-height: 86px; resize: vertical; }
.sp-colors { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-colors button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--charcoal); cursor: pointer; padding: 0; }
.sp-colors button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--blue); }
.sp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-actions .act { font-size: .85rem; padding: 7px 12px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 8px; border: 2px dashed var(--line); border-radius: 12px; align-content: flex-start; }
.sp-chips-empty { color: var(--ink-soft); font-size: .88rem; padding: 4px; }
.sp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--yellow); color: var(--charcoal); border-radius: 999px; padding: 4px 5px 4px 12px; font-weight: 700; font-size: .9rem; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sp-chip.picked { outline: 3px solid var(--blue); outline-offset: 1px; }
.sp-chip button { border: 0; background: rgba(0, 0, 0, .1); border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-weight: 800; line-height: 1; color: var(--charcoal); padding: 0; }
.sp-stats { font-weight: 700; color: var(--ink-soft); font-size: .9rem; }
.sp-msg { color: #b4232a; font-weight: 700; font-size: .9rem; min-height: 1.2em; }
.sp-msg.ok { color: #1f7a43; }
.sp-print-title { display: none; font-size: 1.6rem; color: var(--charcoal); }
@media (max-width: 980px) { .sp { grid-template-columns: 1fr; } .sp-add { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.sp.is-full { position: fixed; inset: 0; z-index: 50; display: block; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.sp:fullscreen { display: block; padding: 12px 20px; overflow: auto; }
.sp.is-full .sp-side, .sp:fullscreen .sp-side, .sp.is-full .pts-tip, .sp:fullscreen .pts-tip { display: none; }
.sp.is-full .sp-viewport, .sp:fullscreen .sp-viewport { border: 0; background: transparent; }
@media print {
  @page { size: landscape; margin: 10mm; }
  body.sp-printing::before, body.sp-printing > header, body.sp-printing > footer, body.sp-printing > main:not(#seating-plan) { display: none !important; }
  body.sp-printing #seating-plan .tool-head, body.sp-printing .sp-side, body.sp-printing .sp-bar, body.sp-printing .sp-strip, body.sp-printing #seating-plan .pts-tip { display: none !important; }
  body.sp-printing #seating-plan .wrap { padding: 0; max-width: none; }
  body.sp-printing .sp { display: block; }
  body.sp-printing .sp-viewport { overflow: visible; border: 0; background: none; }
  body.sp-printing .sp-print-title { display: block; margin-bottom: 6px; }
  body.sp-printing .sp-item.sel .sp-shape { outline: none; }
  body.sp-printing * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Place value counters */
.mini-pvc { height: 110px; width: 220px; }
.pvc { display: grid; gap: 14px; background: var(--white); --d: 40px; }
.pvc-board { display: grid; grid-auto-flow: column; grid-template-rows: auto var(--zh, 260px) auto; column-gap: 5px; background: var(--charcoal); padding: 5px; border-radius: 16px; user-select: none; -webkit-user-select: none; }
.pvc-head { background: var(--hb, #f3f4f5); border-radius: 11px 11px 0 0; text-align: center; padding: 7px 2px 6px; line-height: 1.1; min-width: 0; overflow: hidden; transition: box-shadow .15s ease; }
.pvc-head b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(.95rem, 2.2vw, 1.6rem); color: var(--charcoal); overflow-wrap: anywhere; }
.pvc-head small { display: block; font-size: clamp(.62rem, 1.3vw, .92rem); font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pvc.h-words .pvc-head b { font-size: clamp(.66rem, 1.4vw, 1.08rem); }
.pvc.h-letters .pvc-head small, .pvc.h-words .pvc-head small { display: none; }
.pvc.h-values .pvc-head b { display: none; }
.pvc.tight .pvc-head small { display: none; }
.pvc.tight .pvc-head b { font-size: .74rem; }
.pvc.tight.h-values .pvc-head small { display: block; font-size: .55rem; }
.pvc.h-values .pvc-head small { font-family: var(--display); font-weight: 800; font-size: clamp(.7rem, 1.6vw, 1.25rem); color: var(--charcoal); }
.pvc-zone { position: relative; background: var(--white); cursor: pointer; touch-action: manipulation; min-width: 0; transition: background-color .15s ease; }
.pvc-zone.target { background: #fff8e1; }
.pvc-head.target { box-shadow: inset 0 0 0 3px var(--blue); }
.pvc-foot { background: var(--white); border-radius: 0 0 11px 11px; border-top: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 2px 8px; min-width: 0; }
.pvc-digit { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 3.6vw, 2.6rem); line-height: 1; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.pvc-digit.over { color: #c4161c; }
.pvc.u-value .pvc-digit { font-size: clamp(.7rem, 1.6vw, 1.3rem); overflow-wrap: anywhere; text-align: center; max-width: 100%; }
.pvc.u-none .pvc-digit { display: none; }
.pvc.no-total .pvc-digit { visibility: hidden; }
.pvc-pm { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pvc-b { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); font: inherit; font-weight: 800; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; display: grid; place-items: center; touch-action: manipulation; }
.pvc-b:hover { background: var(--yellow); }
.pvc-b:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.pvc-dot { display: grid; place-items: center; }
.pvc-dot::after { content: ""; width: clamp(7px, 1.3vw, 14px); aspect-ratio: 1; border-radius: 50%; background: var(--white); }
.pvc-c { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); border-radius: 50%; display: grid; place-items: center; color: var(--ct, #fff); font-family: var(--display); font-weight: 800; font-size: calc(var(--d) * .4); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; cursor: grab; touch-action: none; z-index: 1;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.5) 0 10%, rgba(255,255,255,0) 34%), var(--cf, #404040);
  box-shadow: inset 0 0 0 calc(var(--d) * .07) rgba(0,0,0,.16), 0 2px 3px rgba(0,0,0,.22);
  transition: left .3s cubic-bezier(.3, 1.25, .5, 1), top .3s cubic-bezier(.3, 1.25, .5, 1), transform .2s ease, opacity .2s ease; }
.pvc-c[data-len="3"] { font-size: calc(var(--d) * .33); }
.pvc-c[data-len="4"] { font-size: calc(var(--d) * .27); }
.pvc-c[data-len="5"] { font-size: calc(var(--d) * .22); }
.pvc.no-vals .pvc-c { font-size: 0; }
.pvc-c.new { animation: pvc-in .32s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pvc-in { from { transform: scale(0); } }
.pvc-c.drag { transition: none; z-index: 30; cursor: grabbing; box-shadow: 0 12px 20px rgba(0,0,0,.3); }
.pvc-c.gone { transform: scale(0); opacity: 0; pointer-events: none; }
.pvc-c.going { pointer-events: none; z-index: 20; }
.pvc-no { animation: pvc-no .32s ease; }
@keyframes pvc-no { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pvc-msg { min-height: 1.6em; margin: 0; text-align: center; font-weight: 700; color: var(--blue); }
.pvc-msg.bad { color: #c4161c; }
.pvc-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.pvc-total { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.15; color: var(--charcoal); background: var(--yellow); border-radius: 18px; padding: 2px 24px; min-width: 2.6em; text-align: center; font-variant-numeric: tabular-nums; }
.pvc.no-total .pvc-total { color: transparent; background: repeating-linear-gradient(45deg, var(--sky) 0 14px, #9ccef6 14px 28px); }
.pvc.no-total .pvc-total::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); -webkit-text-stroke: 2px var(--charcoal); paint-order: stroke fill; }
.pvc-exp { font-weight: 700; color: var(--ink-soft); font-size: clamp(1rem, 2.4vw, 1.5rem); font-variant-numeric: tabular-nums; text-align: center; }
.pvc.no-total .pvc-exp { visibility: hidden; }
.pvc-opts { display: grid; gap: 16px; border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; background: #fafbfc; }
.pvc-opts[hidden] { display: none; }
.pvc-sec { display: grid; gap: 10px; }
.pvc-sec h2 { font-size: 1rem; color: var(--charcoal); letter-spacing: 0; }
.pvc-opts .opts { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pvc-opts .field { flex-wrap: wrap; }
.pvc-opts .field select { max-width: 100%; }
#pvc-more[aria-expanded="true"] { background: var(--charcoal); color: var(--white); }
.pvc:not(.show-pm) .pvc-pm { display: none; }
.pvc-total { cursor: pointer; }
.pvc .make .field input { width: 8em; }
.pvc.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; display: flex; flex-direction: column; }
.pvc:fullscreen { padding: 20px 28px; overflow: auto; display: flex; flex-direction: column; }
.pvc.is-full .pvc-board, .pvc:fullscreen .pvc-board { flex: 1 1 auto; min-height: 280px; grid-template-rows: auto minmax(0, 1fr) auto; }
.pvc.is-full .pts-tip, .pvc:fullscreen .pts-tip { display: none; }
@media (max-width: 600px) { .pvc-b { width: 28px; height: 28px; font-size: 1.05rem; } .pvc-opts { padding: 12px; } }
/* Underwater counting */
.uc { display: grid; gap: 14px; background: var(--white); }
.uc-scene { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: linear-gradient(180deg, #7fd3f5 0%, #3aa6e0 38%, #1f78c4 75%, #175fa8 100%); box-shadow: 0 8px 0 rgba(0,0,0,.08); }
.uc-rays { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(105deg, transparent 8%, rgba(255,255,255,.16) 12%, transparent 19%),
  linear-gradient(98deg, transparent 30%, rgba(255,255,255,.12) 34%, transparent 41%),
  linear-gradient(110deg, transparent 55%, rgba(255,255,255,.14) 59%, transparent 66%); }
.uc-sand { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; pointer-events: none; }
.uc-sand svg { width: 100%; height: 100%; display: block; }
.uc-weed { position: absolute; bottom: 4%; width: 9%; height: 46%; pointer-events: none; transform-origin: 50% 100%; animation: uc-sway 4s ease-in-out infinite alternate; }
.uc-weed.l { left: 1%; } .uc-weed.r { right: 1.5%; height: 36%; animation-delay: -2s; }
.uc-weed svg { width: 100%; height: 100%; display: block; }
@keyframes uc-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.uc-bub { position: absolute; bottom: -6%; width: 2.2%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(255,255,255,.12); pointer-events: none; animation: uc-rise 9s linear infinite; }
@keyframes uc-rise { to { transform: translateY(-1100%); opacity: 0; } }
.uc-pearls { position: absolute; top: 3%; left: 50%; transform: translateX(-50%); display: flex; gap: 1.1%; width: 52%; justify-content: center; z-index: 3; }
.uc-pearls i { flex: 0 0 auto; width: 6.5%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.55); transition: background .3s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
.uc-pearls i.on { background: radial-gradient(circle at 35% 30%, #fff 0 18%, #f4ecff 30%, #cdbfe0 100%); border-color: #fff; transform: scale(1.18); box-shadow: 0 0 10px rgba(255,255,255,.8); }
.uc-field { position: absolute; left: 4%; right: 4%; top: 14%; bottom: 3%; z-index: 2; --cs: 60px; }
.uc-cr { position: absolute; width: var(--cs); height: var(--cs); margin: calc(var(--cs) / -2) 0 0 calc(var(--cs) / -2); cursor: pointer; animation: uc-bob var(--dur, 3s) ease-in-out var(--del, 0s) infinite alternate; }
.uc-cr svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0,30,70,.25)); }
.uc-cr.flip svg { transform: scaleX(-1); }
.uc-cr.in { animation: uc-in .45s cubic-bezier(.3,1.5,.5,1) backwards, uc-bob var(--dur, 3s) ease-in-out var(--del, 0s) infinite alternate; }
@keyframes uc-in { from { transform: scale(0); } }
@keyframes uc-bob { from { translate: 0 -3%; } to { translate: 4% 4%; } }
.uc-cr::after { content: attr(data-n); position: absolute; top: -8%; right: -6%; min-width: 42%; height: 42%; padding: 0 4%; border-radius: 999px; display: grid; place-items: center; background: var(--yellow); color: var(--charcoal); border: 3px solid var(--white); font-family: var(--display); font-weight: 800; font-size: calc(var(--cs) * .26); line-height: 1; transform: scale(0); transition: transform .2s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.uc-cr.counted::after { transform: scale(1); }
.uc-cr.out { transition: transform .35s ease, opacity .35s ease; transform: translateY(-40%) scale(.4); opacity: 0; }
.uc-say { position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%) scale(0); font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 6vw, 4.2rem); color: var(--white); -webkit-text-stroke: 3px var(--charcoal); paint-order: stroke fill; white-space: nowrap; pointer-events: none; transition: transform .3s cubic-bezier(.3,1.6,.5,1); background: rgba(23,95,168,.82); border: 4px solid var(--white); border-radius: 999px; padding: .1em .7em .15em; box-shadow: 0 8px 20px rgba(0,30,70,.3); }
.uc-say.show { transform: translate(-50%, -50%) scale(1); }
.uc-panel { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; text-align: center; background: rgba(23,95,168,.55); }
.uc-panel[hidden] { display: none; }
.uc-panel h2 { font-size: clamp(1.6rem, 5vw, 3.2rem); color: var(--white); -webkit-text-stroke: 2px var(--charcoal); paint-order: stroke fill; }
.uc-panel p { color: var(--white); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.4rem); margin: 0; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.uc-pick { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.uc-big { font: inherit; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 3.4vw, 2rem); border: 4px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); border-radius: 999px; padding: .35em 1.1em; cursor: pointer; box-shadow: 0 6px 0 var(--charcoal); transition: transform .12s ease, box-shadow .12s ease; }
.uc-big:hover { transform: translateY(-2px); }
.uc-big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--charcoal); }
.uc-big.alt { background: var(--white); }
.uc-chest { width: clamp(110px, 26%, 220px); animation: uc-in .6s cubic-bezier(.3,1.5,.5,1) both; }
.uc-chest .lid { transform-origin: 20px 52px; animation: uc-lid .7s .45s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes uc-lid { from { transform: rotate(0); } to { transform: rotate(-28deg); } }
.uc-q { text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3.6vw, 2.4rem); color: var(--charcoal); margin: 0; min-height: 1.2em; }
.uc-nums { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; max-width: calc(var(--n, 5) * 96px); width: 100%; justify-self: center; margin-inline: auto; }
.uc-nums[hidden] { display: none; }
.uc-n { aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--charcoal); background: var(--white); color: var(--charcoal); font: inherit; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 4vw, 2.6rem); line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 5px 0 var(--charcoal); touch-action: manipulation; transition: transform .12s ease, background-color .12s ease; }
.uc-n:hover { background: var(--yellow); }
.uc-n:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--charcoal); }
.uc-n:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.uc-n.no { background: #e8eaed; color: #9aa0a6; border-color: #b5bac0; box-shadow: 0 5px 0 #b5bac0; cursor: default; animation: uc-no .32s ease; }
@keyframes uc-no { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.uc-n.yes { background: #7cc36b; }
.uc.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; display: flex; flex-direction: column; }
.uc:fullscreen { padding: 20px 28px; overflow: auto; display: flex; flex-direction: column; }
.uc.is-full .uc-scene, .uc:fullscreen .uc-scene { flex: 1 1 auto; min-height: 220px; aspect-ratio: auto; }
.uc.is-full .pts-tip, .uc:fullscreen .pts-tip { display: none; }
@media (max-width: 600px) {
  .uc-scene { aspect-ratio: 4 / 3.4; border-radius: 16px; }
  .uc-nums.ten { --n: 5 !important; }
  .uc-pearls { width: 80%; }
}
/* Jungle counting (uses the underwater counting styles) */
.uc.jungle .uc-scene { background: linear-gradient(180deg, #c8ecaa 0%, #79c97f 38%, #3a9a57 76%, #2a7d44 100%); }
.jc-vines { position: absolute; left: 0; right: 0; top: 0; height: 26%; pointer-events: none; z-index: 1; }
.jc-vines svg { width: 100%; height: 100%; display: block; }
.uc.jungle .uc-weed { width: 13%; height: 42%; bottom: 6%; }
.uc.jungle .uc-weed.r { height: 34%; }
.uc.jungle .uc-pearls i.on { background: radial-gradient(circle at 35% 30%, #fffbe0 0 16%, #f7c849 46%, #d9a21f 100%); box-shadow: 0 0 10px rgba(255,230,120,.9); }
.uc.jungle .uc-panel { background: rgba(30,96,50,.58); }
.uc.jungle .uc-say { background: rgba(30,96,50,.86); }
/* Move the counters */
.mc { display: grid; gap: 14px; background: var(--white); --d: 48px; }
.mc-stars { align-self: center; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--charcoal); background: var(--yellow); border-radius: 999px; padding: 6px 14px; font-variant-numeric: tabular-nums; }
.mc-start { display: grid; justify-items: center; gap: 18px; padding: 40px 16px; border-radius: 22px; background: #e3f1fd; text-align: center; }
.mc-start[hidden], .mc-game[hidden] { display: none; }
.mc-start h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--charcoal); }
.mc-pick { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.mc-game { display: grid; gap: 14px; }
.mc-target { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.mc-ask { font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 3.2vw, 2.1rem); color: var(--charcoal); }
.mc-num { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 9vw, 5.6rem); line-height: 1; color: var(--charcoal); background: var(--yellow); border: 4px solid var(--charcoal); border-radius: 22px; padding: .06em .4em .1em; min-width: 1.5em; text-align: center; box-shadow: 0 6px 0 var(--charcoal); font-variant-numeric: tabular-nums; }
.mc-num.pop { animation: mc-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes mc-pop { from { transform: scale(.4); } }
.mc-stage { position: relative; height: 400px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.mc-top { position: absolute; left: 0; right: 0; top: 0; border: 4px dashed #80c0f3; background: #e3f1fd; border-radius: 22px; transition: background-color .2s ease, border-color .2s ease; }
.mc-top span { position: absolute; left: 14px; top: 8px; font-weight: 700; font-size: .95rem; color: #3b78b8; }
.mc-top.good { background: #e3f5dc; border-color: #7cc36b; }
.mc-top.drop { background: #fff8e1; }
.mc-tray { position: absolute; left: 0; right: 0; bottom: 0; background: #f3f4f5; border: 2px solid var(--line); border-radius: 22px; }
.mc-slot { position: absolute; width: var(--d); height: var(--d); border-radius: 50%; border: 3px dashed rgba(0,87,225,.22); pointer-events: none; }
.mc-c { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); padding: 0; border: 0; border-radius: 50%; cursor: pointer; z-index: 2; touch-action: none;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.7) 0 12%, rgba(255,255,255,0) 14%), radial-gradient(circle at 45% 40%, #ff6b6b, #c4161c 75%);
  box-shadow: inset 0 calc(var(--d) * -.05) calc(var(--d) * .09) rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.25);
  transition: left .35s cubic-bezier(.3, 1.25, .5, 1), top .35s cubic-bezier(.3, 1.25, .5, 1), transform .15s ease; }
.mc-c:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.mc-c.drag { transition: none; z-index: 10; transform: scale(1.12); box-shadow: 0 10px 18px rgba(0,0,0,.3); cursor: grabbing; }
.mc-c.hop { animation: mc-hop .5s ease; }
@keyframes mc-hop { 40% { transform: translateY(-30%); } }
.mc-msg { margin: 0; min-height: 1.4em; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 3vw, 1.9rem); color: var(--charcoal); }
.mc-msg.good { color: #2e7d32; }
.mc-msg.bad { color: #c4161c; }
.mc.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; display: flex; flex-direction: column; }
.mc:fullscreen { padding: 20px 28px; overflow: auto; display: flex; flex-direction: column; }
.mc.is-full .mc-game, .mc:fullscreen .mc-game { flex: 1 1 auto; grid-template-rows: auto minmax(220px, 1fr) auto auto; }
.mc.is-full .mc-stage, .mc:fullscreen .mc-stage { height: auto !important; }
.mc.is-full .pts-tip, .mc:fullscreen .pts-tip { display: none; }
/* Tool about text and footer tool links */
.tool-about { border-top: 1px solid var(--line); }
.tool-about .wrap { padding-block: 28px 44px; display: grid; gap: 8px; }
.tool-about h2 { font-size: 1.35rem; color: var(--charcoal); }
.tool-about p { max-width: 70ch; color: var(--ink-soft); }
footer nav.foot-tools { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; align-items: center; padding-block: 22px 0; font-size: .92rem; color: #cfcfcf; }
.foot-tools b { color: var(--white); }
.foot-tools a { color: #e6e6e6; text-decoration: none; }
.foot-tools a:hover { color: var(--yellow); text-decoration: underline; }

/* Footer */
footer { background: var(--charcoal); color: var(--white); }
footer .wrap { padding-block: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: .92rem; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); }
.social a:hover { background: var(--yellow); color: var(--charcoal); }
.social svg { width: 18px; height: 18px; }
footer small { color: #cfcfcf; font-size: .9rem; }

/* Quiet hatchery */
.qh { display: grid; gap: 16px; background: var(--white); }
.qh.is-full { position: fixed; inset: 0; z-index: 50; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; align-content: start; }
.qh:fullscreen { padding: 16px; overflow: auto; align-content: start; }
.qh-test { border: 3px dashed var(--charcoal); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 12px; background: repeating-linear-gradient(-45deg, #fff6d6 0 16px, #fdecb0 16px 32px); }
.qh-test-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.qh-test-head b { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--charcoal); display: inline-flex; align-items: center; gap: 8px; }
.qh-test-head b::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #e5484d; }
.qh-test-head span { font-weight: 700; font-size: .92rem; color: var(--ink-soft); }
.qh-test .act.armed { background: #e5484d; border-color: #e5484d; color: var(--white); }
.qh-tabs { display: inline-flex; gap: 4px; background: var(--sky-soft); padding: 4px; border-radius: 999px; }
.qh-tabs button { font: inherit; font-weight: 700; font-size: .95rem; border: 0; background: transparent; color: var(--charcoal); padding: 8px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.qh-tabs button[aria-selected="true"] { background: var(--charcoal); color: var(--white); }
.qh-tabs .n { background: var(--yellow); color: var(--charcoal); border-radius: 999px; padding: 0 8px; font-size: .8rem; font-variant-numeric: tabular-nums; }

.qh-play { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .qh-play { grid-template-columns: minmax(0, 1fr); } }
.qh-scene { position: relative; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius); background: #bfe0fa; padding: 18px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; isolation: isolate; }
.qh-scene > * { position: relative; z-index: 1; }
.qh-scene > .qh-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.qh-cloud { animation: qh-drift 60s linear infinite; }
.qh-cloud.c2 { animation-duration: 85s; animation-delay: -30s; }
.qh-sunrays { transform-box: fill-box; transform-origin: center; animation: qh-spin 40s linear infinite; }
.qh-status { background: rgba(255,255,255,.72); border-radius: 18px; padding: 6px 18px; }
.qh-status { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.4rem, 3.4vw, 2.3rem); color: var(--charcoal); text-align: center; text-wrap: balance; max-width: 22ch; min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
.qh-status.loud { color: #c62f35; }
.qh-eggbox { width: min(260px, 60vw); --g: 0px; position: relative; margin-top: 6px; }
.qh-eggbox::before { content: ""; position: absolute; left: -30%; right: -30%; top: -12%; bottom: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 224, 120, var(--ga, 0)), transparent); transition: background .5s; z-index: 0; }
.qh-egg { display: block; width: 100%; height: auto; position: relative; z-index: 1; transform-origin: 50% 92%; filter: drop-shadow(0 0 var(--g) #ffd34d); transition: filter .5s; }
.qh-nest { display: block; width: 150%; max-width: none; margin: -40% 0 0 -25%; position: relative; z-index: 2; }
.qh-nest-back { position: absolute; left: -25%; width: 150%; max-width: none; bottom: 0; z-index: 0; }
.qh-eggbox.near .qh-egg { animation: qh-nudge 1.3s ease-in-out infinite; }
.qh-eggbox.loud .qh-egg { animation: qh-wobble .32s ease-in-out infinite; }
.qh-eggbox.hatching .qh-egg { animation: qh-shake .12s linear infinite; }
.qh-cracks path { transition: stroke-dashoffset .6s ease; }
.qh-prog { width: min(440px, 92%); }
.qh-bar { height: 20px; border-radius: 999px; background: var(--white); border: 2px solid var(--charcoal); overflow: hidden; }
.qh-bar span { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .3s; }
.qh-ptext { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-weight: 700; font-size: .95rem; color: var(--charcoal); font-variant-numeric: tabular-nums; }

.qh-panel { border: 2px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 16px; }
.qh-mlab { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.qh-mlab .loud { color: #c62f35; } .qh-mlab .quiet { color: #2e8540; }
.qh-mtrack { position: relative; height: 28px; margin-top: 6px; border-radius: 10px; background: #f0f2f3; border: 2px solid var(--charcoal); overflow: hidden; }
.qh-mfill { position: absolute; inset: 0 auto 0 0; width: 0; background: #5cb85c; }
.qh-mfill.loud { background: #e5484d; }
.qh-mline { position: absolute; top: 0; bottom: 0; width: 4px; background: var(--charcoal); transform: translateX(-2px); }
.qh .tm-go { justify-content: center; width: 100%; }
.qh .tm-go.on { background: var(--charcoal); }
.qh-practice { background: var(--sky-soft); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; font-size: .95rem; }
.qh-noise { font: inherit; font-weight: 700; border: 2px solid #c62f35; color: #c62f35; background: var(--white); border-radius: 999px; padding: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.qh-noise.held { background: #e5484d; color: var(--white); }
.qh-range { display: grid; gap: 6px; }
.qh-range input { width: 100%; padding: 0; border: 0; accent-color: var(--blue); }
.qh-note { color: var(--ink-soft); font-size: .92rem; }

.qh-cr { display: block; }
.qh-cr.sil .qh-art * { fill: #c9d2d9 !important; stroke: #c9d2d9 !important; }
.qh-cr.sil .qh-art [fill="none"] { fill: none !important; }
.qh-tw { transform-box: fill-box; transform-origin: center; animation: qh-tw 1.6s ease-in-out infinite; }
.qh-tw:nth-child(2n) { animation-delay: .5s; } .qh-tw:nth-child(3n) { animation-delay: 1s; }

.qh-book { display: grid; gap: 24px; }
.qh-book-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 16px; }
.qh-book-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: var(--charcoal); }
.qh-stats { font-weight: 700; color: var(--ink-soft); }
.qh-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .qh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qh-card.t-ultra { border-color: #9cc2f7; } .qh-card.t-mega { border-color: #c9b06a; }
.qh-card.t-insane { border-color: transparent; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, #ff8a8a, #f7c849, #8be08b, #80c0f3, #c39bff) border-box; }
.qh-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 12px 16px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.qh-card .qh-cr { width: 100%; max-width: 150px; height: auto; }
.qh-card h3 { font-size: 1.3rem; color: var(--charcoal); }
.qh-card .meta { font-size: .9rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.qh-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.qh-chip { font-weight: 700; font-size: .78rem; padding: 3px 10px; border-radius: 999px; background: var(--sky-soft); color: var(--blue-dark); }
.qh-chip.rare { background: var(--sky); color: var(--charcoal); }
.qh-chip.ultra { background: var(--blue); color: var(--white); }
.qh-chip.mega { background: var(--charcoal); color: var(--yellow); }
.qh-chip.insane { color: var(--charcoal); background: linear-gradient(90deg, #ff8a8a, #f7c849, #8be08b, #80c0f3, #c39bff, #ff8a8a); background-size: 200% 100%; animation: qh-rainbow 3s linear infinite; }
.qh-tier { display: grid; gap: 12px; }
.qh-tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.qh-tier-head .qh-chip { font-size: .95rem; padding: 5px 14px; }
.qh-tier-head .odds { font-weight: 700; color: var(--charcoal); }
.qh-tier-head .found { color: var(--ink-soft); font-size: .92rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.qh-tiers { display: grid; gap: 26px; }
.qh-test .qh-shinybox { display: inline-flex; align-items: center; gap: 8px; }
.qh-test .qh-shinybox input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.qh-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qh-test-row > span { font-weight: 700; font-size: .85rem; color: var(--ink-soft); min-width: 5.5em; }
.qh-chip.shiny { background: var(--yellow); color: var(--charcoal); }
.qh-book h3.sub { font-size: 1.35rem; color: var(--charcoal); margin-bottom: 10px; }
.qh-log { list-style: none; margin: 0; padding: 0; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qh-log li { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line); }
.qh-log li:first-child { border-top: 0; }
.qh-log .qh-cr { width: 46px; height: 46px; flex: none; }
.qh-log .who { flex: 1; min-width: 0; font-weight: 700; color: var(--charcoal); overflow-wrap: anywhere; }
.qh-log .who small { font-weight: 400; color: var(--ink-soft); font-size: .95rem; }
.qh-log time { color: var(--ink-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.qh-log .empty { padding: 18px; color: var(--ink-soft); }
.qh-backup { border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.qh-backup summary { font-weight: 700; color: var(--charcoal); cursor: pointer; }
.qh-backup .in { display: grid; gap: 10px; margin-top: 12px; max-width: 640px; }
.qh-backup p { color: var(--ink-soft); }
.qh-backup textarea { width: 100%; min-height: 70px; border: 2px solid var(--line); border-radius: 10px; padding: 10px; font: .8rem ui-monospace, Menlo, Consolas, monospace; resize: vertical; word-break: break-all; }
.qh-backup .msg { font-weight: 700; color: var(--charcoal); }

.qh-hatch { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overflow: auto; background: rgba(38,38,38,.6); padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.qh-hcard { background: var(--white); border: 3px solid var(--charcoal); border-radius: 26px; padding: 22px; width: 100%; max-width: 460px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.qh-reveal { position: relative; width: min(230px, 64vw); aspect-ratio: 1; }
.qh-rays.ultra { --rc: #80c0f3; } .qh-rays.mega { --rc: #f7c849; opacity: .8; }
.qh-rays.insane { background: repeating-conic-gradient(#ff8a8a 0 8deg, transparent 8deg 18deg, #8be08b 18deg 26deg, transparent 26deg 36deg, #80c0f3 36deg 44deg, transparent 44deg 54deg) !important; opacity: .75; animation-duration: 6s; }
.qh-rays { position: absolute; inset: -6%; border-radius: 50%; opacity: .55; background: repeating-conic-gradient(var(--rc, var(--yellow)) 0 9deg, transparent 9deg 30deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); animation: qh-spin 14s linear infinite; }
.qh-reveal .qh-cr { position: relative; width: 100%; height: 100%; animation: qh-pop .8s cubic-bezier(.2, 1.5, .4, 1) both; }
.qh-hcard h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); color: var(--charcoal); }
.qh-hcard .new { font-weight: 700; color: var(--blue); }
.qh-hcard .blurb { color: var(--ink-soft); }
.qh-hcard .tm-figs .fig { width: 44px; }
.qh-hcard label { width: 100%; text-align: left; display: grid; gap: 4px; font-weight: 700; color: var(--charcoal); }
.qh-hcard input { font: inherit; border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.qh-hcard input:focus { border-color: var(--blue); outline: none; }
/* Quiet hatchery in full screen: the egg fills the screen, the noise bar stays big, settings shrink to one row */
.qh.is-full, .qh:fullscreen { display: flex; flex-direction: column; gap: 12px; }
.qh:fullscreen { width: 100%; height: 100%; }
.qh.is-full > *, .qh:fullscreen > * { flex: 0 0 auto; }
.qh.is-full .qh-test, .qh:fullscreen .qh-test, .qh.is-full .pts-tip, .qh:fullscreen .pts-tip { display: none !important; }
.qh.is-full .qh-play:not([hidden]), .qh:fullscreen .qh-play:not([hidden]) { display: flex; flex-direction: column; gap: 12px; align-items: stretch; flex: 1 1 0; min-height: 0; }
.qh.is-full .qh-book:not([hidden]), .qh:fullscreen .qh-book:not([hidden]) { flex: 1 1 0; min-height: 0; overflow: auto; }
.qh.is-full .qh-scene, .qh:fullscreen .qh-scene { flex: 1 1 0; min-height: 0; justify-content: space-evenly; padding: 1.5vh 12px 1.2vh; gap: 1vh; }
.qh.is-full .qh-status, .qh:fullscreen .qh-status { font-size: clamp(1.1rem, 5vh, 3.4rem); padding-block: .4vh; max-width: 30ch; min-height: 0; }
.qh.is-full .qh-eggbox, .qh:fullscreen .qh-eggbox { width: min(36vh, 64vw); }
.qh.is-full .qh-prog, .qh:fullscreen .qh-prog { width: min(640px, 82%); }
.qh.is-full .qh-bar, .qh:fullscreen .qh-bar { height: clamp(18px, 3vh, 30px); }
.qh.is-full .qh-ptext, .qh:fullscreen .qh-ptext { font-size: clamp(.95rem, 2.2vh, 1.35rem); }
.qh.is-full .qh-panel, .qh:fullscreen .qh-panel { grid-template-columns: minmax(0, 2.4fr) auto auto minmax(140px, 1fr); align-items: center; gap: 8px 18px; padding: 10px 16px; }
.qh.is-full .qh-mtrack, .qh:fullscreen .qh-mtrack { height: clamp(28px, 5vh, 46px); }
.qh.is-full .qh-mlab, .qh:fullscreen .qh-mlab { font-size: clamp(.8rem, 1.8vh, 1rem); }
.qh.is-full .qh-note, .qh:fullscreen .qh-note { display: none; }
.qh.is-full .qh-panel .tm-go, .qh:fullscreen .qh-panel .tm-go { width: auto; font-size: 1.05rem; padding: 10px 20px; }
.qh.is-full .qh-panel .field, .qh:fullscreen .qh-panel .field { font-size: .85rem; }
.qh.is-full .qh-practice, .qh:fullscreen .qh-practice { grid-column: 1 / -1; padding: 8px 12px; }
.qh.is-full .qh-practice p, .qh:fullscreen .qh-practice p { display: none; }
@media (max-height: 520px) {
  .qh.is-full .qh-panel .field, .qh:fullscreen .qh-panel .field { display: none; }
  .qh.is-full .qh-panel, .qh:fullscreen .qh-panel { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 12px; }
  .qh.is-full .qh-eggbox, .qh:fullscreen .qh-eggbox { width: min(26vh, 40vw); }
  .qh.is-full .qh-status, .qh:fullscreen .qh-status { font-size: 1rem; }
  .qh.is-full .pts-bar, .qh:fullscreen .pts-bar { gap: 8px; }
}
@media (max-width: 760px) {
  .qh.is-full .qh-panel, .qh:fullscreen .qh-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qh.is-full .qh-panel > :first-child, .qh:fullscreen .qh-panel > :first-child { grid-column: 1 / -1; }
}

.mini-egg svg { width: 100%; max-width: 220px; height: 110px; border-radius: 10px; }
.mini-egg { height: 110px; display: grid; align-items: center; margin-bottom: 4px; }

@keyframes qh-nudge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes qh-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes qh-shake { 0% { transform: translate(-4px, 0) rotate(-4deg); } 50% { transform: translate(4px, -2px) rotate(4deg); } 100% { transform: translate(-4px, 0) rotate(-4deg); } }
@keyframes qh-pop { from { transform: scale(.2) translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qh-spin { to { transform: rotate(360deg); } }
@keyframes qh-drift { from { transform: translateX(-260px); } to { transform: translateX(1060px); } }
@keyframes qh-rainbow { to { background-position: 200% 0; } }
@keyframes qh-tw { 0%, 100% { transform: scale(.5); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }
.qh .tm-go .i-pause { display: none; }
.qh .tm-go.on .i-play { display: none; }
.qh .tm-go.on .i-pause { display: inline; }

/* Now and next board */
.nn { display: grid; gap: 22px; background: var(--white); }
.nn.is-full { position: fixed; inset: 0; z-index: 50; overflow: auto; align-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.nn:fullscreen { padding: 24px; overflow: auto; align-content: center; }
.nn.is-full .nn-hide-full, .nn:fullscreen .nn-hide-full { display: none !important; }
.nn-board { display: flex; align-items: stretch; justify-content: center; gap: clamp(6px, 1.6vw, 16px); }
.nn-panel { flex: 1 1 0; max-width: 380px; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 12px; padding: clamp(8px, 1.8vw, 18px); border: 3px solid var(--charcoal); border-radius: 24px; background: #f6f8f9; transition: background-color .15s ease, transform .15s ease; }
.nn-panel.drop { background: var(--sky-soft); transform: scale(1.02); }
.nn-label { font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 3.4vw, 2.2rem); line-height: 1.2; padding: 2px clamp(12px, 2.4vw, 28px); border-radius: 999px; border: 3px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); }
.nn-panel[data-slot="1"] .nn-label { background: var(--sky); }
.nn-panel[data-slot="2"] .nn-label { background: #e3d8fb; }
.nn-slot { width: 100%; aspect-ratio: 1; display: grid; }
.nn-empty { border: 3px dashed #b9c1c7; border-radius: 20px; display: grid; place-items: center; text-align: center; color: var(--ink-soft); font-weight: 700; font-size: clamp(.8rem, 1.6vw, 1rem); padding: 10px; background: var(--white); }
.nn-arrow { align-self: center; flex: none; width: clamp(22px, 4.5vw, 54px); height: auto; }
.nn-card { -webkit-user-select: none; user-select: none; width: 100%; height: 100%; display: grid; align-content: center; justify-items: center; gap: 0; padding: 7% 6% 6%; border: 3px solid var(--charcoal); border-radius: 20px; font: inherit; color: var(--charcoal); text-align: center; cursor: pointer; container-type: inline-size; }
.nn-card:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.nn-ico { width: 60cqi; aspect-ratio: 1; display: block; }
.nn-ico svg { width: 100%; height: 100%; display: block; }
.nn-name { margin-top: 3cqi; font-family: var(--body); font-weight: 700; font-size: 12cqi; line-height: 1.05; overflow-wrap: anywhere; max-width: 100%; }
.nn-time { margin-top: 2cqi; font-weight: 700; font-size: 8cqi; line-height: 1; color: var(--ink-soft); }
.nn-card.c-white { background: #fff; } .nn-card.c-blue { background: #d6ebfc; } .nn-card.c-yellow { background: #fff0c2; } .nn-card.c-red { background: #ffe0dc; } .nn-card.c-green { background: #e1f2d8; }
.nn-card.c-purple { background: #ebe4fb; } .nn-card.c-orange { background: #ffe4cc; } .nn-card.c-pink { background: #fde2ee; } .nn-card.c-grey { background: #eceff1; }
.nn-step { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.nn-step .tm-go:disabled { opacity: .45; cursor: default; transform: none; }
.nn-prog { font-weight: 700; color: var(--ink-soft); min-width: 7em; text-align: center; font-variant-numeric: tabular-nums; }
.nn-sec h2 { font-size: 1.45rem; color: var(--charcoal); }
.nn-sectop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.nn-hint { color: var(--ink-soft); margin: 4px 0 12px; }
.nn-plan { list-style: none; margin: 0; padding: 18px 14px 14px; display: flex; flex-wrap: wrap; gap: 18px 12px; min-height: 140px; border: 2px dashed #c9d2d9; border-radius: var(--radius); background: #fafbfc; transition: background-color .15s ease, border-color .15s ease; }
.nn-plan.drop { border-color: var(--blue); background: var(--sky-soft); }
.nn-item { position: relative; width: 104px; touch-action: none; }
.nn-item .nn-card { aspect-ratio: 1; height: auto; border-width: 2px; border-radius: 14px; }
.nn-item .nn-name, .nn-grid .nn-name { font-size: max(11.5px, 12cqi); } .nn-item .nn-time { font-size: max(10px, 8cqi); }
.nn-item.now .nn-card { box-shadow: 0 0 0 4px var(--yellow); }
.nn-item.next .nn-card { box-shadow: 0 0 0 4px var(--sky); }
.nn-badge { position: absolute; top: -11px; left: 8px; z-index: 1; font-size: .72rem; font-weight: 800; line-height: 1.5; padding: 0 8px; border-radius: 999px; border: 2px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); }
.nn-item.next .nn-badge { background: var(--sky); }
.nn-x { position: absolute; top: -11px; right: -9px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); font: 700 1.05rem/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0; }
.nn-x:hover { background: #ffe0dc; }
.nn-item.drop-before::before { content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 5px; border-radius: 3px; background: var(--blue); }
.nn-plan.drop-end::after { content: ""; width: 5px; min-height: 104px; border-radius: 3px; background: var(--blue); }
.nn-none { color: var(--ink-soft); align-self: center; padding: 8px; max-width: 46ch; }
.nn-dragging { opacity: .3; }
.nn-ghost { position: fixed; z-index: 120; pointer-events: none; transform: rotate(-3deg); filter: drop-shadow(0 12px 22px rgba(0,0,0,.28)); margin: 0; }
.nn-find { width: 12em !important; }
.nn-jump { margin: 0 0 4px; }
.nn-group h3 { font-family: var(--body); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
.nn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.nn-grid .nn-card { aspect-ratio: 1; height: auto; border-width: 2px; border-radius: 14px; touch-action: none; transition: transform .12s ease; }
.nn-grid .nn-card:hover { transform: translateY(-2px); }
.nn-mine { position: relative; }
.nn-mine-edit { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--charcoal); background: var(--white); color: var(--charcoal); cursor: pointer; display: grid; place-items: center; padding: 0; }
.nn-mine-edit svg { width: 14px; height: 14px; }
.nn-make { aspect-ratio: 1; border: 2px dashed var(--charcoal); border-radius: 14px; background: var(--white); color: var(--charcoal); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 4px; padding: 6px; }
.nn-make b { font-size: 1.8rem; line-height: 1; }
.nn-make:hover { background: var(--yellow); }
.nn-printbox { border: 2px solid var(--charcoal); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 10px; background: #fffaf0; }
.nn-printbox h2 { font-size: 1.2rem; color: var(--charcoal); }
.nn-printbox > label { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--charcoal); }
.nn-printbox input { width: 20px; height: 20px; accent-color: var(--blue); margin: 3px 0 0; flex: none; }
.nn-printbox .sub { padding-left: 30px; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.nn-printbox .sub label { display: flex; gap: 8px; align-items: flex-start; }
.nn-printbox .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nn-pmsg { font-weight: 700; color: var(--charcoal); }
.nn-dlg { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; overflow: auto; background: rgba(38,38,38,.55); padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.nn-dlg-card { background: var(--white); border: 3px solid var(--charcoal); border-radius: 24px; padding: 20px; width: 100%; max-width: 640px; display: grid; gap: 14px; }
.nn-dlg-card h2 { font-size: 1.5rem; color: var(--charcoal); }
.nn-dlg-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 520px) { .nn-dlg-top { grid-template-columns: minmax(0, 1fr); } .nn-dlg-prev { width: 130px; } }
.nn-dlg-prev { aspect-ratio: 1; }
.nn-fields { display: grid; gap: 12px; }
.nn-f { display: grid; gap: 6px; font-weight: 700; color: var(--charcoal); }
.nn-f input { font: inherit; font-weight: 700; border: 2px solid var(--line); border-radius: 10px; padding: 8px 12px; width: 100%; }
.nn-f input:focus { border-color: var(--blue); outline: none; }
.nn-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; max-height: 220px; overflow: auto; padding: 6px; border: 2px solid var(--line); border-radius: 12px; }
.nn-icons button { aspect-ratio: 1; border: 2px solid transparent; border-radius: 10px; background: #f3f5f6; padding: 5px; cursor: pointer; }
.nn-icons button:hover { background: var(--sky-soft); }
.nn-icons button[aria-pressed="true"] { border-color: var(--blue); background: var(--sky-soft); }
.nn-icons svg { width: 100%; height: 100%; display: block; }
.nn-cols { display: flex; gap: 10px; flex-wrap: wrap; }
.nn-cols button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--charcoal); cursor: pointer; padding: 0; }
.nn-cols button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--blue); }
.nn-dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nn-dlg-actions .gap { flex: 1; }
.nn-dlg-actions .btn { padding: 9px 20px; }
.act.nn-danger { border-color: #c62f35; color: #c62f35; }
.act.nn-danger:hover { background: #ffe0dc; }
.act.nn-armed { background: #c62f35; color: var(--white); }
.nn.is-full .nn-panel, .nn:fullscreen .nn-panel { max-width: min(44vw, 64vh); }
.nn.is-full .nn-board.three .nn-panel, .nn:fullscreen .nn-board.three .nn-panel { max-width: min(30vw, 60vh); }
.nn.is-full .nn-label, .nn:fullscreen .nn-label { font-size: clamp(1.4rem, 5vh, 3.2rem); }
.nn.is-full .pts-bar, .nn:fullscreen .pts-bar { justify-content: flex-end; }
@media (max-width: 560px) { .nn-item { width: 88px; } .nn-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .nn-label { border-width: 2px; } .nn-panel { border-width: 2px; border-radius: 16px; } .nn-card { border-width: 2px; border-radius: 14px; } }
.mini-nn { height: 110px; display: flex; align-items: center; gap: 8px; }
.mini-nn .p { width: 92px; border: 2px solid var(--charcoal); border-radius: 12px; padding: 6px; display: grid; justify-items: center; gap: 4px; background: #f6f8f9; }
.mini-nn .p b { font-family: var(--display); font-size: .78rem; line-height: 1.3; padding: 0 10px; border-radius: 999px; border: 2px solid var(--charcoal); background: var(--yellow); color: var(--charcoal); }
.mini-nn .p + svg + .p b { background: var(--sky); }
.mini-nn .p span { width: 54px; height: 54px; border: 2px solid var(--charcoal); border-radius: 10px; display: grid; place-items: center; }
.mini-nn .p span svg { width: 40px; height: 40px; }
.mini-nn > svg { width: 26px; }

/* Widgets board */
.wg { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; background: var(--white); }
@media (max-width: 900px) { .wg { grid-template-columns: minmax(0, 1fr); } }
.wg-main { display: grid; gap: 12px; min-width: 0; }
.wg-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.wg-bar select { font: inherit; font-weight: 700; border: 2px solid var(--line); border-radius: 10px; padding: 7px 10px; max-width: 220px; color: var(--charcoal); background: var(--white); }
.wg-bar .full-btn { margin-left: auto; }
.wg-strip { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; background: var(--sky-soft); border-radius: 14px; padding: 10px 12px; }
.wg-strip input { font: inherit; border: 2px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.wg-msg { font-weight: 700; color: var(--charcoal); }
.wg .wg-bar .act, .wg .wg-tools .act { padding: 5px 12px; font-size: .88rem; min-height: 0; }
.wg-tools { gap: 6px; }
.wg-tools .hint { font-size: .88rem; }
.wg-boards { gap: 6px 8px; }
.wg-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--charcoal); cursor: pointer; }
.wg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.wg-tools { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: 44px; }
.wg-tools .act:disabled { opacity: .4; cursor: default; }
.wg-tools .hint { color: var(--ink-soft); font-size: .92rem; margin-right: 4px; }
.wg-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; border: 3px solid var(--charcoal); border-radius: 14px; background: #fff; overflow: hidden; touch-action: none; }
.wg-frame.drop { box-shadow: 0 0 0 5px var(--sky); }
.wg-stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; background-image: radial-gradient(#dde3e8 2px, transparent 2px); background-size: 50px 50px; }
.wg-frame.plain .wg-stage { background-image: none; }
.wg-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ink-soft); font-size: 34px; font-weight: 700; pointer-events: none; padding: 80px; }
.wg-item { position: absolute; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; transform-origin: center; }
.wg-item:active { cursor: grabbing; }
.wg-item .nn-card { cursor: inherit; }
.wg-item.sel { outline: calc(3px / var(--k, 1)) dashed var(--blue); outline-offset: calc(6px / var(--k, 1)); border-radius: 12px; }
/* The resize dot stays about 30px on screen whatever the board's scale */
.wg-handle { display: none; position: absolute; right: calc(-18px / var(--k, 1)); bottom: calc(-18px / var(--k, 1)); width: calc(30px / var(--k, 1)); height: calc(30px / var(--k, 1)); border-radius: 50%; background: var(--blue); border: calc(3px / var(--k, 1)) solid #fff; box-shadow: 0 0 0 calc(2px / var(--k, 1)) var(--blue); cursor: nwse-resize; touch-action: none; }
.wg-item.sel .wg-handle { display: block; }
.wg-text { font-family: var(--body); font-weight: 700; line-height: 1.15; white-space: nowrap; color: var(--charcoal); padding: .12em .45em; border-radius: .35em; }
.wg-text.c-white { background: transparent; }
.wg-text:not(.c-white) { border: 3px solid var(--charcoal); }
.wg-text.c-blue { background: #d6ebfc; } .wg-text.c-yellow { background: #fff0c2; } .wg-text.c-red { background: #ffe0dc; } .wg-text.c-green { background: #e1f2d8; }
.wg-text.c-purple { background: #ebe4fb; } .wg-text.c-orange { background: #ffe4cc; } .wg-text.c-pink { background: #fde2ee; } .wg-text.c-grey { background: #eceff1; }
.wg-arrow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wg-side { display: grid; gap: 12px; border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; }
.wg-side h2 { font-size: 1.3rem; color: var(--charcoal); }
.wg-side .nn-hint { margin: 0; font-size: .92rem; }
.wg-specials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wg-special { font: inherit; font-weight: 700; color: var(--charcoal); border: 2px solid var(--charcoal); border-radius: 12px; background: var(--white); padding: 10px 8px; cursor: pointer; display: grid; justify-items: center; gap: 4px; touch-action: none; -webkit-user-select: none; user-select: none; }
.wg-special:hover { background: var(--yellow); }
.wg-special .big { font-size: 1.5rem; line-height: 1; font-weight: 800; }
.wg-special svg { width: 44px; height: 24px; }
.wg-find { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wg-find label { display: grid; gap: 4px; font-weight: 700; font-size: .85rem; color: var(--ink-soft); }
.wg-find select, .wg-find input { font: inherit; font-size: .95rem; border: 2px solid var(--line); border-radius: 10px; padding: 7px 8px; min-width: 0; width: 100%; color: var(--charcoal); background: var(--white); }
.wg-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: 520px; overflow: auto; padding: 4px 4px 8px 2px; }
@media (max-width: 900px) { .wg-lib { max-height: 340px; } }
.wg-lib .nn-card { aspect-ratio: 1; height: auto; border-width: 2px; border-radius: 12px; touch-action: none; }
.wg-lib .nn-name { font-size: max(10.5px, 12cqi); }
.wg-lib h3 { grid-column: 1 / -1; font-family: var(--body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 8px 0 0; }
.wg-ghost { position: fixed; z-index: 120; pointer-events: none; transform: rotate(-3deg); filter: drop-shadow(0 12px 22px rgba(0,0,0,.28)); margin: 0; }
.wg-dragging { opacity: .35; }
.wg-guide { position: absolute; background: var(--blue); pointer-events: none; z-index: 5; opacity: .85; }
.wg-guide.v { top: 0; bottom: 0; width: 4px; margin-left: -2px; }
.wg-guide.h { left: 0; right: 0; height: 4px; margin-top: -2px; }
.wg.is-full { position: fixed; inset: 0; z-index: 50; overflow: auto; grid-template-columns: minmax(0, 1fr); align-content: start; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.wg:fullscreen { overflow: auto; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 12px 16px; }
.wg.is-full .wg-hide-full, .wg:fullscreen .wg-hide-full { display: none !important; }
.wg.is-full .wg-frame, .wg:fullscreen .wg-frame { width: min(100%, calc((100vh - 130px) * 16 / 9)); margin: 0 auto; }
.mini-wg { height: 110px; border: 2px solid var(--charcoal); border-radius: 10px; position: relative; background: #fff radial-gradient(#dde3e8 1.5px, transparent 1.5px) 0 0 / 14px 14px; overflow: hidden; }
.mini-wg span { position: absolute; width: 42px; height: 42px; border: 2px solid var(--charcoal); border-radius: 8px; background: #fff; display: grid; place-items: center; }
.mini-wg span svg { width: 30px; height: 30px; }
.mini-wg b { position: absolute; font-family: var(--body); font-size: .8rem; color: var(--charcoal); }