@charset "UTF-8";
:root {
  color-scheme:light;
  --bg:#f4f5ee;
  --ink:#223f39;
  --muted:#728079;
  --line:#dce1d5;
  --coral:#d92d49;
  --blue:#245add;
  --gold:#f2cf16;
  --mint:#07834b;
  --violet:#8035d1;
  --orange:#f77912;
  --cyan:#12c9dc;
  --pink:#e024a3;
  --lime:#9abe1a;
  --indigo:#352994;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Devanagari",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  touch-action:manipulation;
}
button:disabled {
  cursor:default;
}
button:focus-visible,a:focus-visible {
  outline:3px solid #b57b37;
  outline-offset:4px;
}
button {
  border:0;
}
a {
  color:inherit;
}
button svg {
  display:block;
  width:20px;
  height:20px;
}
p,h1,h2 {
  margin:0;
}
button[hidden],[hidden] {
  display:none!important;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:12px;
  z-index:100;
  background:white;
  padding:12px;
}
.skip-link:focus {
  top:10px;
}
.header {
  width:min(1240px,100%);
  margin:auto;
  padding:24px 42px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wordmark {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  font-size:25px;
  font-weight:800;
  letter-spacing:-1.4px;
}
.wordmark-light {
  font-weight:450;
}
.brand-period {
  color:#bd7746;
}
.brand-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:13px;
  background:var(--ink);
  color:#d2e5bd;
  font-size:27px;
  transform:rotate(-10deg);
}
.header-tools {
  display:flex;
  gap:12px;
  align-items:center;
}
.language-button {
  padding:6px 13px;
  background:transparent;
  font-size:12px;
  font-weight:700;
  min-height:44px;
  border:1px solid var(--line);
  border-radius:50px;
}
.language-button span {
  padding:0 6px;
  color:#bcc2b7;
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  background:transparent;
  border-radius:50%;
  transition:background .18s;
}
.icon-button:hover {
  background:#e5e9df;
}
.layout {
  width:min(1160px,100%);
  display:grid;
  grid-template-columns:minmax(220px,1fr) 420px 180px;
  gap:46px;
  align-items:center;
  margin:8px auto 20px;
  padding:0 28px;
  flex:1;
}
.editorial {
  padding-bottom:40px;
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  font-weight:750;
  display:flex;
  align-items:center;
  gap:9px;
}
.tiny-star {
  font-size:23px;
  color:#819475;
}
h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(40px,4.6vw,63px);
  font-weight:400;
  letter-spacing:-2.7px;
  line-height:1.04;
  white-space:pre-line;
  margin:27px 0 20px;
}
.hero-copy {
  max-width:270px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.editorial-rule {
  height:1px;
  background:var(--line);
  width:46px;
  margin:32px 0 22px;
}
.small-feature {
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
}
.feature-icon {
  font-size:9px;
  width:23px;
  height:23px;
  border:1px solid #c9d1c0;
  display:grid;
  place-items:center;
  border-radius:50%;
  flex-shrink:0;
  font-weight:700;
}
.small-feature p {
  font-size:12px;
  line-height:1.5;
  color:#617268;
}
.colour-signature {
  display:flex;
  gap:6px;
  margin-top:36px;
}
.colour-signature i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--coral);
}
.colour-signature i:nth-child(2) {
  background:var(--blue);
}
.colour-signature i:nth-child(3) {
  background:var(--gold);
}
.colour-signature i:nth-child(4) {
  background:var(--mint);
}
.colour-signature i:nth-child(5) {
  background:var(--violet);
}
.colour-signature i:nth-child(6) { background:var(--orange); }
.colour-signature i:nth-child(7) { background:var(--cyan); }
.colour-signature i:nth-child(8) { background:var(--pink); }
.colour-signature i:nth-child(9) { background:var(--lime); }
.colour-signature i:nth-child(10) { background:var(--indigo); }
.little-note {
  font-size:10px;
  color:#7b867a;
  margin-top:11px;
}
.game-shell {
  position:relative;
  width:100%;
  background:#fffffa;
  border:1px solid #dce2d4;
  border-radius:28px;
  box-shadow:0 10px 0 -5px #e5e9dc,0 24px 64px -30px #65765755;
  padding:13px 18px 14px;
  overflow:hidden;
  isolation:isolate;
  outline:none;
}
.game-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.level-button {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:750;
  letter-spacing:1px;
  min-height:44px;
  padding:6px 8px;
  background:transparent;
  border-radius:10px;
}
.grid-icon {
  font-size:21px;
  font-weight:400;
  color:#89957e;
}
.game-tools {
  display:flex;
}
.game-tools .icon-button {
  color:#83917e;
}
.pack-heading,.tray-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  font-size:9px;
  font-weight:750;
  letter-spacing:1.2px;
  margin:0 4px 11px;
}
.pack-heading>span:last-child {
  font-size:10px;
  letter-spacing:0;
  font-weight:500;
  color:#7c8b7e;
}
.boxes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  padding:0 4px;
}
.toolbox {
  --color:var(--coral);
  height:72px;
  position:relative;
  background:color-mix(in srgb,var(--color) 18%,#fff);
  border:1px solid color-mix(in srgb,var(--color) 60%,#fff);
  border-bottom:5px solid color-mix(in srgb,var(--color) 78%,#b5a68b);
  border-radius:12px;
  box-shadow:0 4px 5px #3245370d;
  transition:background .25s;
  transform-origin:center 70%;
  isolation:isolate;
}
.box-lid {
  position:absolute;
  inset:-1px -1px -4px;
  z-index:3;
  display:grid;
  place-items:center;
  border-radius:12px;
  transform-origin:center top;
  background:linear-gradient(145deg,#ffffff65,#ffffff00),var(--color);
  border:1px solid color-mix(in srgb,var(--color) 70%,#182a22);
  border-bottom:5px solid color-mix(in srgb,var(--color) 70%,#182a22);
  box-shadow:inset 0 2px 0 #fff8,0 6px 12px #23342622;
  color:white;
  font-size:26px;
  text-shadow:0 2px 2px #243c3860;
}
.box-lid span { display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff8c; border-radius:50%; }
.large-plate .plate-art { filter:drop-shadow(0 5px 3px #34452d40); }
.toolbox:before {
  content:"";
  position:absolute;
  top:-4px;
  left:12px;
  right:12px;
  height:7px;
  border-radius:5px;
  background:color-mix(in srgb,var(--color) 70%,#fff);
  border:1px solid color-mix(in srgb,var(--color) 85%,#fff);
}
.box-label {
  font-size:9px;
  letter-spacing:1px;
  font-weight:750;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 10px 4px;
  color:color-mix(in srgb,var(--color) 40%,#334338);
}
.box-label>span:first-child {
  font-size:11px;
}
.box-wells {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:1px 8px;
}
.box-well {
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#64716212;
  box-shadow:inset 0 2px 3px #35423222;
  border:1px solid #fff9;
}
.toolbox.completed {
  background:#eef1e7;
  border-color:#dfe5d5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#96a78e;
  font-size:12px;
  gap:8px;
}
.toolbox.completed:before {
  background:#e1e7d8;
  border-color:#dbe2d0;
}
.packed-bounce {
  animation:packed .45s ease;
}
.queue-line {
  display:flex;
  gap:9px;
  align-items:center;
  justify-content:center;
  height:28px;
  font-size:7px;
  font-weight:750;
  letter-spacing:1.1px;
  color:#929c8d;
}
.queue {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:10px;
}
.queue-dot {
  font-size:10px;
  line-height:1;
  color:var(--color);
}
.board-frame {
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:18px;
  background-color:#f0f0e4;
  background-image:radial-gradient(#bac2ac75 .9px,transparent 1px);
  background-size:18px 18px;
  border:1px solid #e4e7d9;
}
.board {
  position:absolute;
  left:0;
  top:0;
  width:360px;
  height:360px;
  transform-origin:top left;
  user-select:none;
  -webkit-user-select:none;
}
.peg-label {
  position:absolute;
  bottom:9px;
  left:0;
  right:0;
  text-align:center;
  font-size:6px;
  font-weight:750;
  letter-spacing:2px;
  color:#a3ab98;
}
.plate {
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  /* Pose changes use a single explicit WAAPI animation, never CSS interpolation. */
  transition-property:none;
}
.plate-art {
  position:absolute;
  inset:0;
  width:100%;
  height:calc(100% + 5px);
  overflow:visible;
  filter:drop-shadow(0 3px 2px #34452d30);
}
.plate.fallen {
  opacity:0;
  pointer-events:none;
}
.screw-hole {
  position:absolute;
  top:50%;
  width:13px;
  height:13px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#445c4f;
  box-shadow:inset 0 4px 3px #26332a88,0 1px 0 #fff8;
  border:3px solid #ffffff50;
}
.screw-button {
  position:absolute;
  top:50%;
  width:var(--touch-size,56px);
  height:var(--touch-size,56px);
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:transparent;
  padding:0;
  transition:opacity .15s;
  isolation:isolate;
  pointer-events:auto;
}
.screw-button:disabled { pointer-events:none; }
.screw-button .screw-head {
  width:28px;
  height:28px;
  transition:transform .18s,filter .18s;
}
.screw-button:not(:disabled):hover .screw-head {
  transform:translateY(-3px) rotate(12deg);
  filter:brightness(1.08);
}
.screw-button:not(:disabled):active .screw-head {
  transform:translateY(-1px) rotate(35deg);
}
.screw-button:focus-visible {
  outline-offset:-4px;
}
.screw-button.covered .screw-head {
  filter:brightness(.85);
}
.screw-button.covered {
  visibility:hidden;
}
.screw-hole.covered {
  visibility:hidden;
}
.screw-button.removed {
  opacity:0;
  pointer-events:none;
}
.screw-head {
  --color:var(--coral);
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  position:relative;
  color:#fff;
  font-weight:800;
  font-size:14px;
  line-height:1;
  background:radial-gradient(circle at 32% 22%,#ffffff55 0%,#ffffff00 37%,#12222d15 80%),var(--color);
  border:2px solid color-mix(in srgb,var(--color) 55%,#152535);
  box-shadow:inset 0 2px 0 #ffffff95,inset 0 -3px 0 #27362928,0 3px 1px #253c3960,0 4px 6px #203d3926;
  text-shadow:0 1px 1px #0005;
}
.screw-head[style*="--gold"], .screw-head[style*="--orange"], .screw-head[style*="--cyan"], .screw-head[style*="--lime"] { color:#172735; text-shadow:0 1px 0 #fff5; }
.screw-head:after {
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid #ffffff36;
  border-bottom-color:#23392d35;
  border-radius:50%;
}
.screw-head>span {
  position:relative;
  z-index:1;
}
.screw-button .screw-head>span {
  font-size:13px;
  transform:rotate(calc(-1 * var(--pose-angle,0deg)));
}
.launch {
  position:absolute;
  z-index:100;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:24px;
  text-align:center;
  background:#f4f5ee3d;
}
.launch p {
  font-size:12px;
  line-height:1.6;
  color:var(--ink);
  max-width:280px;
  margin:0;
  width:100%;
  padding:16px 16px 12px;
  border-radius:18px 18px 0 0;
  background:#fffef5e8;
  backdrop-filter:blur(6px);
}
.launch .primary-button { max-width:280px; min-height:58px; font-size:17px; border-radius:0 0 18px 18px; box-shadow:0 8px 24px #163e3538; }
.game-shell[data-phase="ready"] .playing-tools { opacity:.45; }
.game-shell[data-phase="playing"] .board { touch-action:pinch-zoom; }
.primary-button {
  min-height:50px;
  background:var(--ink);
  border-radius:14px;
  padding:13px 18px;
  color:#fffefa;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
  font-weight:650;
  font-size:14px;
  box-shadow:0 3px 0 #102a24;
  transition:background .18s,transform .18s;
}
.primary-button:hover {
  background:#355b4c;
}
.primary-button:active {
  transform:translateY(2px);
}
.primary-button:disabled {
  background:#8a988e;
  box-shadow:none;
}
.primary-button>span:last-child:not(:first-child) {
  font-size:22px;
  font-weight:400;
}
.playing-tools {
  padding-top:16px;
}
.tray-heading {
  margin-bottom:9px;
  font-size:8px;
}
.tray-heading>span:last-child {
  font-size:10px;
  letter-spacing:0;
  color:#8a9782;
}
.tray {
  display:flex;
  justify-content:center;
  gap:6px;
  min-height:46px;
  padding:0 0 9px;
}
.tray-slot {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex-shrink:1;
  border-radius:12px;
  background:#edf0e6;
  border:1px solid #d9e0d0;
  box-shadow:inset 0 2px 3px #7d8e7122;
  position:relative;
}
.tray-slot:empty:after {
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d4dcc8;
  box-shadow:inset 0 1px 2px #81997544;
}
.tray-slot.bonus {
  border:1px dashed #90ae7c;
  background:#f1f6e8;
}
.tray.full .tray-slot {
  border-color:#d3a67b;
}
.bottom-actions {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:4px;
}
.extra-button {
  border:1px solid #d7dfca;
  background:#f2f5ea;
  border-radius:11px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1;
  font-size:11px;
  font-weight:700;
}
.extra-button:disabled {
  opacity:.5;
}
.extra-icon {
  color:#708d54;
  font-size:23px;
  font-weight:400;
}
.ad-pill {
  font-size:10px;
  padding:3px 6px;
  background:#dde8cf;
  border-radius:5px;
  color:#6c8356;
}
.help-button {
  border:1px solid #dce2d4;
  border-radius:11px;
  font-family:Georgia,serif;
  font-size:20px;
}
.game-hint {
  font-size:10px;
  line-height:1.55;
  min-height:15px;
  color:#7d8b76;
  text-align:center;
  margin:11px auto 0;
  max-width:330px;
}
.game-shell[data-phase="ready"] .game-hint {
  visibility:hidden;
}
.right-note {
  align-self:center;
  text-align:center;
  padding-left:6px;
}
.mini-art {
  position:relative;
  margin:0 auto 24px;
  width:100px;
  height:100px;
}
.mini-art:before {
  content:"";
  position:absolute;
  inset:15px;
  border:1px solid #d0d9c5;
  border-radius:18px;
  transform:rotate(26deg);
}
.mini-screw {
  position:absolute;
  inset:20px;
  display:grid;
  place-items:center;
  font-size:29px;
  font-weight:800;
  color:#7d9670;
  border-radius:50%;
  border:1px solid #a6bd95;
  background:#d8e8c9;
  box-shadow:inset 0 4px 0 #ffffff99,0 5px 0 #afc09d;
  transform:rotate(23deg);
}
.mini-art i {
  position:absolute;
  right:0;
  top:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d8b787;
}
.right-note>p {
  font-size:9px;
  letter-spacing:2px;
  line-height:1.9;
  font-weight:600;
}
.note-dash {
  height:1px;
  width:25px;
  background:var(--line);
  margin:25px auto;
}
.right-note .collection-note {
  font-size:11px;
  letter-spacing:0;
  color:#87917e;
  font-weight:400;
}
.footer {
  width:min(1156px,100%);
  margin:0 auto;
  padding:17px 28px 22px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:8px;
  letter-spacing:1.8px;
  color:#8d9885;
}
.footer>span:last-child {
  letter-spacing:0;
  font-size:10px;
}
.toast {
  position:absolute;
  z-index:40;
  left:50%;
  bottom:158px;
  max-width:90%;
  width:max-content;
  transform:translate(-50%,12px);
  padding:10px 17px;
  border-radius:12px;
  background:#233f39ed;
  color:white;
  font-size:12px;
  line-height:1.4;
  box-shadow:0 5px 24px #223d3933;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0);
}
.ad-shield {
  position:absolute;
  inset:0;
  z-index:60;
  background:#fffffaf2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:30px;
  text-align:center;
  font-size:14px;
}
.spinner {
  width:32px;
  height:32px;
  border:3px solid #dbe5d4;
  border-top-color:var(--ink);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
dialog {
  padding:0;
  border:1px solid #dce3d1;
  border-radius:26px;
  background:#fffff8;
  color:var(--ink);
  width:min(380px,calc(100% - 32px));
  max-height:calc(100svh - 40px);
  overflow:auto;
  box-shadow:0 30px 120px #162d3f55;
}
dialog::backdrop {
  background:#163b344f;
  backdrop-filter:blur(6px);
}
.modal-body {
  padding:28px;
  text-align:center;
}
.modal-mark {
  height:70px;
  width:70px;
  border-radius:23px;
  background:#e5ecd8;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  color:#6e8d54;
  font-size:36px;
  transform:rotate(-8deg);
}
.modal-mark.win-mark {
  background:#f7e9b9;
  color:#b68c36;
}
.modal-body .eyebrow {
  justify-content:center;
  font-size:9px;
  margin-bottom:10px;
}
.modal-body h2 {
  font:400 31px/1.15 Georgia,"Times New Roman",serif;
  letter-spacing:-1px;
  white-space:pre-line;
}
.modal-body p {
  margin:14px 0 22px;
  font-size:13px;
  line-height:1.7;
  color:#7b8875;
}
.modal-body .primary-button {
  margin-top:12px;
}
.secondary-button {
  min-height:46px;
  display:block;
  width:100%;
  padding:11px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  background:transparent;
  margin-top:9px;
  border:1px solid #dce3d2;
}
.secondary-button:hover {
  background:#f0f4e8;
}
.text-button {
  min-height:44px;
  display:block;
  margin:7px auto 0;
  background:transparent;
  font-size:12px;
  color:#78876f;
  text-decoration:underline;
  text-underline-offset:4px;
}
.level-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
  margin:23px 0;
}
.level-cell {
  height:47px;
  min-width:44px;
  border-radius:12px;
  border:1px solid #d6dfcb;
  background:#f0f4e7;
  font-size:14px;
  position:relative;
}
.level-cell:disabled {
  background:#f0f0e8;
  color:#b4bbae;
  border-color:#e7eadd;
}
.level-cell.completed {
  background:#dfeacf;
  color:#567548;
}
.level-cell.completed:after {
  content:"✓";
  position:absolute;
  right:3px;
  bottom:2px;
  font-size:9px;
}
.level-cell.current {
  border:2px solid var(--ink);
}
.modal-body.levels-modal {
  padding:25px 20px;
}
.help-steps {
  text-align:left;
  list-style:none;
  counter-reset:steps;
  padding:0;
  display:grid;
  gap:16px;
  margin:22px 0;
  font-size:13px;
  line-height:1.5;
}
.help-steps li {
  counter-increment:steps;
  display:flex;
  align-items:center;
  gap:10px;
}
.help-steps li:before {
  content:counter(steps);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:#e6edda;
  border-radius:50%;
  flex-shrink:0;
}
.flying-screw {
  position:fixed;
  z-index:100;
  pointer-events:none;
  margin:0;
  transform-origin:center;
  will-change:transform;
  backface-visibility:hidden;
}
.test-badge {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#593e73;
  color:#fff;
  font-size:11px;
  padding:5px;
  text-align:center;
  z-index:70;
}
.test-dialog .modal-mark {
  background:#ecdeef;
  color:#725082;
}
.noscript {
  position:fixed;
  inset:auto 12px 12px;
  background:#233f39;
  color:#fff;
  padding:20px;
  border-radius:12px;
  z-index:99;
}
html[lang="hi"] h1,html[lang="hi"] .modal-body h2 {
  font-family:"Noto Sans Devanagari",Arial,sans-serif;
  letter-spacing:-.7px;
  line-height:1.4;
}
html[lang="hi"] h1 {
  font-size:44px;
}
html[lang="hi"] .eyebrow,html[lang="hi"] .pack-heading,html[lang="hi"] .tray-heading {
  letter-spacing:0;
}
html[lang="hi"] .game-hint {
  font-size:11px;
}
.ad-active .board *, .ad-active .boxes *, .page-paused .board * {
  animation-play-state:paused!important;
}
.page-paused .board,.ad-active .board {
  pointer-events:none;
}
@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}
@keyframes packed {
  0%,100% {
    transform:scale(1);
  }
  40% {
    transform:scale(.94);
  }
  70% {
    transform:scale(1.05);
  }
}

@media(min-width:1440px) {
  .layout {
    gap:65px;
  }
  .game-shell {
    margin:16px 0;
  }
  .header {
    padding-top:30px;
  }
}
@media(max-width:1060px) {
  .layout {
    grid-template-columns:minmax(200px,1fr) 400px;
    max-width:870px;
    gap:35px;
  }
  .right-note {
    display:none;
  }
  .header {
    max-width:870px;
  }
  .editorial {
    padding-bottom:15px;
  }
  h1 {
    font-size:51px;
  }
}
@media(max-width:700px) {
  .header {
    padding:12px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
    max-width:450px;
  }
  .wordmark {
    font-size:23px;
    gap:9px;
  }
  .brand-icon {
    width:34px;
    height:34px;
    border-radius:11px;
    font-size:23px;
  }
  .header-tools {
    gap:4px;
  }
  .language-button {
    font-size:11px;
    padding-inline:10px;
  }
  .header-tools .icon-button {
    min-width:44px;
  }
  .layout {
    display:block;
    padding:0 max(10px,env(safe-area-inset-left)) 0 max(10px,env(safe-area-inset-right));
    width:100%;
    max-width:440px;
    margin:0 auto 12px;
    flex:initial;
  }
  .editorial {
    display:none;
  }
  .game-shell {
    border-radius:24px;
    padding:8px 6px 10px;
  }
  .game-topbar {
    margin-bottom:7px;
  }
  .pack-heading {
    font-size:8px;
    margin-bottom:9px;
  }
  .toolbox {
    height:64px;
  }
  .box-well {
    width:28px;
    height:28px;
  }
  .box-wells {
    gap:7px;
  }
  .box-label {
    padding-top:8px;
  }
  .queue-line {
    height:22px;
  }
  .playing-tools {
    padding-top:13px;
  }
  .game-hint {
    margin-top:9px;
  }
  .footer {
    padding:10px 15px max(18px,env(safe-area-inset-bottom));
    flex-direction:column;
    align-items:center;
    gap:7px;
    font-size:7px;
    letter-spacing:1.4px;
  }
  .footer>span:last-child {
    font-size:9px;
  }

}
@media(max-width:370px) {
  .game-shell {
    padding:8px 6px 10px;
  }
  .level-button {
    letter-spacing:.7px;
    font-size:10px;
  }
  .box-wells {
    gap:6px;
  }
  .boxes {
    gap:10px;
  }
  .tray {
    gap:4px;
  }
  .tray-slot {
    width:39px;
    height:39px;
  }
  .box-label {
    font-size:8px;
  }
  .game-hint {
    font-size:9px;
  }
  .tray-heading {
    font-size:7px;
  }
  .header {
    padding-top:8px;
    padding-bottom:7px;
  }
  .board-frame {
    border-radius:15px;
  }
}
@media(orientation:landscape) and (max-height:550px) {
  .layout {
    grid-template-columns:220px 360px;
    display:grid;
    max-width:660px;
    align-items:start;
    gap:25px;
  }
  .editorial {
    display:block;
    position:sticky;
    top:15px;
  }
  h1 {
    font-size:35px;
    margin:15px 0;
  }
  .hero-copy {
    font-size:11px;
  }
  .small-feature,.editorial-rule,.colour-signature,.little-note {
    display:none;
  }
  .header {
    padding-top:8px;
    padding-bottom:8px;
    max-width:660px;
  }
  .game-shell {
    margin:0;
  }
  .footer {
    max-width:660px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .plate {
    will-change:auto;
  }
}
@media(max-width:370px) {
  .level-grid {
    gap:6px;
  }
}
html[lang="hi"] .pack-heading,html[lang="hi"] .tray-heading {
  font-size:10px;
}

/* The site provides the surrounding navigation when the game is embedded. */
html[data-embedded="true"] body {
  min-height:0;
}
html[data-embedded="true"] {
  overflow:hidden;
}
html[data-embedded="true"] .header {
  width:min(100%,460px);
  max-width:none;
  margin:0 auto;
  padding:10px 10px 8px;
  justify-content:flex-end;
}
html[data-embedded="true"] .wordmark,
html[data-embedded="true"] .editorial,
html[data-embedded="true"] .right-note,
html[data-embedded="true"] .footer {
  display:none;
}
html[data-embedded="true"] .layout {
  display:block;
  flex:none;
  width:min(100%,460px);
  max-width:none;
  margin:0 auto 12px;
  padding:0 10px;
}
html[data-embedded="true"] .game-shell {
  margin:0;
}

/* Celebration lives in the dialog top layer, above its backdrop. */
dialog[data-kind="win"] { border-color:#ddcf9c; background:#fffdf1; }
dialog[data-kind="win"] .modal-body { padding:24px; }
dialog[data-kind="win"] .modal-mark { width:56px; height:56px; margin-bottom:12px; }
dialog[data-kind="win"] h2 { font-family:inherit; font-weight:800; font-size:30px; letter-spacing:-1px; }
dialog[data-kind="win"] p { margin:10px 0 18px; }
dialog[data-kind="win"] .primary-button { min-height:58px; font-size:18px; font-weight:800; color:#183d34; background:#f9b66c; box-shadow:0 4px 0 #dc9750; }
.fireworks { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; border-radius:inherit; }
.fireworks i { position:absolute; width:5px; height:9px; border-radius:3px; background:var(--spark); opacity:0; animation:firework 1080ms cubic-bezier(.12,.5,.3,1) var(--delay) both; }
.fireworks.still i { animation:none; opacity:.5; transform:translate(calc(var(--dx)*.65),calc(var(--dy)*.65)); }
@keyframes firework {
  0% { opacity:0; transform:translate(0,0) scale(.25); }
  12% { opacity:1; }
  65% { opacity:.95; }
  100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(160deg) scale(.4); }
}
@media(max-width:700px) {
  html[data-embedded="true"] .layout { padding:0; margin-bottom:0; }
  html[data-embedded="true"] .header { padding:5px 6px 3px; }
  .box-label { padding:5px 9px 3px; }
  .pack-heading { margin-bottom:7px; }
  .game-topbar { margin-bottom:3px; }
}

/* A toy-like invitation, with the puzzle still visible behind it. */
.launch { padding:20px; gap:14px; background:radial-gradient(ellipse,#fff8df66,transparent 72%); }
.launch p { order:2; max-width:275px; padding:10px 15px; border-radius:18px; font-size:12px; background:#fffdf1e8; box-shadow:0 3px 12px #405c3320; }
.launch .primary-button { position:relative; isolation:isolate; max-width:320px; min-height:82px; padding:15px 19px; gap:12px; border:3px solid #fff6c7; border-radius:30px; color:#623908; background:linear-gradient(180deg,#ffe47e,#ffb64d); font-size:clamp(18px,4.8vw,23px); font-weight:850; box-shadow:0 7px 0 #d88b31,0 12px 24px #87552738,inset 0 3px 0 #ffffffb0; transition:transform .13s,box-shadow .13s; }
.launch .primary-button:hover { background:linear-gradient(180deg,#ffec97,#ffc264); transform:translateY(-2px); }
.launch .primary-button:active { transform:translateY(5px) scale(.98); box-shadow:0 2px 0 #d88b31,0 4px 12px #87552725; }
.play-mascot { position:relative; flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; border-radius:16px; background:linear-gradient(145deg,#ff8d9c,#f44f78); color:#fff; text-shadow:0 2px 0 #bc3659; box-shadow:inset 0 3px 0 #ffbec8,0 4px 0 #ce4266; font-size:27px; animation:play-wiggle 2.8s ease-in-out infinite; }
.play-mascot i { position:absolute; bottom:-7px; width:19px; height:9px; border-radius:0 0 5px 5px; background:repeating-linear-gradient(0deg,#739f95 0 2px,#bae1cc 2px 4px); z-index:-1; }
.play-arrow { font-size:19px; filter:drop-shadow(0 2px 0 #ffffff70); }
@keyframes play-wiggle { 0%,70%,100% { transform:rotate(-9deg); } 78% { transform:rotate(12deg) translateY(-4px); } 87% { transform:rotate(-12deg); } }
.tray { gap:9px; padding:3px 0 7px; }
.tray-slot { width:49px; height:49px; border-radius:15px; }
.tray-slot.locked { border:2px dashed #e0a653; background:#fff2cc; color:#986222; cursor:pointer; padding:3px; box-shadow:0 3px 0 #e9cd9a; transition:transform .12s,background .12s; }
.tray-slot.locked:hover { background:#ffe7a5; }
.tray-slot.locked:active { transform:translateY(2px); }
.tray-slot.locked:disabled { cursor:default; opacity:.72; }
.tray-slot.bonus:disabled { opacity:1; cursor:default; }
.slot-lock { display:flex; flex-direction:column; align-items:center; gap:1px; }
.slot-lock svg { width:22px; height:22px; }
.slot-lock small { font:800 8px/1.1 Arial,sans-serif; letter-spacing:.7px; }
.bottom-actions { justify-content:flex-end; margin-top:0; height:44px; }
.help-button { width:44px; height:44px; min-height:44px; font-size:18px; border-radius:50%; }
.packing-box { will-change:transform,opacity; }
dialog[data-kind="win"] { width:min(440px,calc(100% - 28px)); overflow:visible; border:3px solid #fff0ac; background:radial-gradient(ellipse at 50% 0,#fff4b7,#fffdf1 70%); border-radius:34px; box-shadow:0 20px 90px #35352155; }
dialog[data-kind="win"] .modal-body { position:relative; z-index:1; padding:32px 22px 30px; }
dialog[data-kind="win"] .modal-mark { width:98px; height:98px; margin-bottom:20px; border-radius:32px; font-size:64px; color:#fff8bc; background:linear-gradient(140deg,#ffd735,#ffab19); box-shadow:0 7px 0 #ec9634,0 0 0 10px #ffde6e33; text-shadow:0 3px 0 #d79721; animation:win-pop .6s cubic-bezier(.18,1.4,.5,1) both; }
dialog[data-kind="win"] h2 { color:#b74848; font-size:clamp(25px,7vw,36px); letter-spacing:-.8px; }
dialog[data-kind="win"] p { color:#717c68; margin:12px 0 26px; font-size:14px; }
dialog[data-kind="win"] .primary-button { min-height:74px; border:2px solid #fff6cc; border-radius:24px; color:#633607; background:linear-gradient(#ffda68,#ffb44d); font-size:22px; box-shadow:0 6px 0 #dd9239,0 10px 20px #e9b65d33; }
dialog[data-kind="win"] .primary-button:active { transform:translateY(4px); box-shadow:0 2px 0 #dd9239; }
.fireworks { position:fixed; inset:0; width:100%; height:100%; border-radius:0; overflow:hidden; z-index:0; }
.fireworks i { width:9px; height:15px; box-shadow:0 0 10px color-mix(in srgb,var(--spark) 40%,transparent); animation:joy-burst 1400ms cubic-bezier(.1,.55,.25,1) var(--delay) both; }
.fireworks i:nth-child(3n) { border-radius:50%; width:12px; height:12px; }
.fireworks i:nth-child(5n) { clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); width:19px; height:19px; }
@keyframes joy-burst { 0% { opacity:0; transform:translate(0,0) scale(.2); } 10% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.6); } }
@keyframes win-pop { from { transform:translateY(14px) rotate(-20deg) scale(.55); opacity:0; } to { transform:rotate(-8deg) scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .play-mascot,dialog[data-kind="win"] .modal-mark { animation:none; } .fireworks.still i { animation:none; } }