/* Candy colors, physical toy board, strong selection and animated yarn. */
:root {
  --ink: #80536b;
  --muted: #aa7790;
  --cream: #fff4cd;
  --line: #f0bfcd;
  background: #b4ecdf;
}
body {
  background: radial-gradient(ellipse at 50% 40%, #fff8d6, #b8eddd);
}
.cat-atmosphere,
.menu-screen .cat-atmosphere {
  background:
    linear-gradient(#fff9ca0d, transparent 60%, #fff8d838),
    url("assets/sprites-v2/playroom.webp") center 48% / cover;
}
.play-screen .cat-atmosphere {
  background:
    linear-gradient(#f4ffe38f, #fff9d355 65%, #fff8dfaa),
    url("assets/sprites-v2/playroom.webp") center / cover;
}
.map-screen .cat-atmosphere {
  background:
    linear-gradient(#edfff0b0, #fff6d5ca),
    url("assets/sprites-v2/playroom.webp") center / cover;
}
.floating-paw {
  color: #f793b6;
  opacity: 0.6;
}
.room-light {
  background: radial-gradient(ellipse at 50% 30%, #fffbd944, transparent 70%);
}
.cat-sprite {
  background-image: url("assets/sprites-v2/cats.webp");
}
.cat-animation {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  image-rendering: auto;
  pointer-events: none;
}
.cat-sprite.has-video {
  background-image: none;
}
.cat-sprite.has-video .cat-animation {
  visibility: visible;
}
.cat-sprite {
  position: relative;
}
.cat-home,
.cat-home-art,
.event-cat-home {
  background-image: url("assets/sprites-v2/homes.webp");
}
.icon-button {
  color: #9d627a;
  background: linear-gradient(#fffce7, #ffdcb4);
  border: 3px solid #fffde7;
  box-shadow:
    0 4px 0 #d795a4,
    0 7px 9px #bd758027;
  border-radius: 18px;
  rotate: -3deg;
}
.icon-button:active {
  box-shadow: 0 1px 0 #d795a4;
}
.hud-tools .icon-button:last-child {
  rotate: 4deg;
}
.currency-pill {
  background: #fff3a9;
  color: #a98238;
  border: 3px solid #fffbe0;
  box-shadow: 0 3px 0 #d8b95d;
}
.button.primary {
  background: linear-gradient(#ffae80, #ff875f 55%, #fc775a);
  border: 3px solid #fff0be;
  box-shadow:
    inset 0 4px 0 #ffc8a4,
    0 6px 0 #d15c59,
    0 10px 0 #f5ae8e80,
    0 13px 18px #cb80592b;
  color: #fffde5;
  text-shadow: 0 2px 0 #d96656;
  border-radius: 26px;
}
.button.primary:active {
  box-shadow:
    inset 0 3px 0 #ffc8a4,
    0 2px 0 #d15c59;
}
.game-logo h1 {
  color: #ff9e61;
  -webkit-text-stroke-color: #c6754c;
  text-shadow:
    0 3px 0 #fffad9,
    0 6px 0 #fff2c0,
    0 8px 0 #c68a68,
    0 10px 10px #76504436;
}
.game-logo h1 span {
  color: #4fbdaa;
  -webkit-text-stroke-color: #388b7e;
}
.logo-en {
  background: #fff5c8;
  color: #a57c4a;
  box-shadow: 0 2px 0 #e6c483;
  display: inline-block;
}
.game-logo p {
  color: #967359;
  text-shadow: 0 1px 0 #fff8dd;
}
.logo-orbit {
  color: #fcb25c;
}
.menu-cat {
  animation: none;
}
.menu-cats {
  filter: drop-shadow(0 8px 3px #b07d6433);
}
.cat-name-tag {
  background: #ffefd0;
  border-color: #fffde8;
  color: #ad7758;
  box-shadow: 0 3px 0 #edbc87;
}
.welcome-rug {
  background: radial-gradient(
    ellipse,
    #76d8b86b 15%,
    #f8e9b6 16%,
    #62cdbb 24%,
    #b9eac8 25%,
    #78cdbe38 62%,
    transparent 64%
  );
}
.scene-bubble {
  color: #cc747e;
  background: #fff5d4;
  border-color: #fffade;
  box-shadow: 0 3px 0 #ecaf9d;
}
.menu-modes b {
  color: #9c6582;
}
.menu-modes small {
  color: #ae8192;
}
.menu-rank {
  color: #a78c73;
}
.map-emblem {
  background: linear-gradient(#b8f0ce, #71d8be);
  border-color: #f4fff0;
  box-shadow:
    inset 0 3px 0 #d7ffe4,
    0 5px 0 #42b6a3;
  color: #39968c;
}
.daily-emblem {
  background: linear-gradient(#ffeb8e, #ffc853);
  border-color: #fff8c9;
  box-shadow:
    inset 0 3px 0 #fff5b8,
    0 5px 0 #d5a340;
  color: #b28333;
}
.endless-emblem {
  background: linear-gradient(#e9c7fa, #cda1ed);
  border-color: #fbecff;
  box-shadow:
    inset 0 3px 0 #f2dcff,
    0 5px 0 #a579c3;
  color: #916eb0;
}
.event-heading h1 {
  color: #f09470;
  text-shadow: 0 3px 0 #fff7d2;
}
.endless-screen .event-heading h1 {
  color: #b687d5;
}
.event-heading p,
.event-controls p {
  color: #ae8c83;
}
.event-ticket {
  background: #fff5b8;
  border-color: #fffce0;
  box-shadow: 0 4px 0 #dac179;
}
.event-ticket b {
  color: #b68b53;
}
.game-level-title h1 {
  color: #9e6b91;
  font-weight: 950;
  text-shadow: 0 2px 0 #fffde0;
}
.game-level-title h1 > b {
  color: #ed9a79;
}
.level-world-label {
  color: #a57a91;
}
.board-stats {
  background: none;
  border: 0;
  box-shadow: none;
  gap: 9px;
  padding: 0;
}
.board-stats > div {
  background: linear-gradient(#fff8d0, #ffeaa7);
  border: 2px solid #fffce5;
  border-radius: 19px;
  box-shadow: 0 3px 0 #deba74;
  padding: 5px 4px 4px;
  min-height: 51px;
}
.board-stats > div:nth-child(2) {
  background: linear-gradient(#daf6cf, #bcebc5);
  box-shadow: 0 3px 0 #88c5a8;
}
.board-stats > div:nth-child(3) {
  background: linear-gradient(#ffe3e2, #ffcbd5);
  box-shadow: 0 3px 0 #dea2b6;
}
.board-stats > div + div {
  border-left: 2px solid #fffce5;
}
.board-stats span:not(.stars):not(.hearts),
.board-stats b small {
  color: #b58c6c;
}
.board-stats b {
  color: #af8362;
}
.stars .filled {
  fill: #ffd254;
  stroke: #d9a039;
}
.stars .empty {
  fill: #ebdec0;
  stroke: #d7caaa;
}
.board-scene {
  isolation: isolate;
}
.board-edge {
  background: linear-gradient(#8ce3cc, #6cd3c0);
  border: 4px solid #edffdc;
  border-radius: 30px;
  box-shadow:
    inset 0 0 0 4px #b0f3d7,
    0 8px 0 #45a79b,
    0 12px 0 #9cd7bc,
    0 18px 22px #62a59430;
}
.board-ear {
  position: absolute;
  top: -9px;
  width: 16%;
  height: 12%;
  background: #89dfc7;
  border: 4px solid #edffdc;
  border-bottom: 0;
  border-radius: 45% 45% 0 0;
  z-index: -1;
}
.ear-left {
  left: 7%;
  rotate: -17deg;
}
.ear-right {
  right: 7%;
  rotate: 17deg;
}
.board-paw {
  position: absolute;
  bottom: -3px;
  left: 50%;
  translate: -50% 0;
  font-size: 18px;
  color: #e9ffe3;
  text-shadow: 0 1px 0 #479f90;
  line-height: 1;
}
.board {
  background: #fff3c0;
  border-radius: 18px;
}
.tiles {
  gap: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff1ba;
}
.cell {
  border-radius: 0;
}
.floor,
.floor:nth-child(3n),
.wall {
  background: #fff4cc;
  border: 0;
  box-shadow: none;
  filter: none;
}
.cell:nth-child(2n) {
  background: #ffedb4;
}
.cell:after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px dashed #e5ca8799;
  border-radius: 12%;
  pointer-events: none;
}
.wall:after {
  display: none;
}
.wall {
  position: relative;
}
.obstacle {
  display: block;
  position: relative;
  z-index: 2;
  width: 110%;
  height: 110%;
  background: url("assets/sprites-v2/obstacles.webp")
    calc(var(--obstacle-x) * 100%) calc(var(--obstacle-y) * 100%) / 200% 200%;
  filter: drop-shadow(0 3px 1px #9b73582b);
  pointer-events: none;
}
.obstacle-hit .obstacle {
  animation: obstacle-wiggle 0.45s ease-in-out;
}
.board-toy {
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
  background: url("assets/sprites-v2/obstacles.webp") 0 0 / 200% 200%;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 1px #a7784633);
  opacity: 0.9;
}
.toy-a {
  right: -3%;
  top: -4%;
  width: 14%;
  rotate: 13deg;
}
.toy-b {
  left: -4%;
  bottom: 0;
  width: 13%;
  background-position: 100% 100%;
  rotate: -13deg;
}
.cat-home {
  width: 108%;
  height: 108%;
  filter: drop-shadow(0 3px 1px #9b73582b);
  z-index: 2;
}
.home-symbol {
  font-weight: 900;
  border: 2px solid var(--orb-color);
  background: #fffee8;
  bottom: 3%;
  left: 8%;
  font-size: clamp(9px, calc(var(--cell-size) * 0.17), 14px);
  width: 23%;
}
.home-heart {
  color: #fa7ea2;
  top: 0;
  right: 8%;
}
.active-home .cat-home:before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 2px dashed var(--orb-color);
  border-radius: 32%;
  filter: drop-shadow(0 0 2px white);
  animation: home-beacon 1.9s ease-in-out infinite;
  z-index: -1;
}
.active-home .cat-home {
  filter: drop-shadow(0 0 2px #fffdf0) drop-shadow(0 0 4px var(--orb-color))
    drop-shadow(0 3px 1px #9b73582b);
}
.selected-cell:before {
  content: "";
  position: absolute;
  inset: 3%;
  background: radial-gradient(
    ellipse at 50% 70%,
    #ffe265b3,
    #fff5ad55 50%,
    transparent 72%
  );
  border-radius: 40%;
  z-index: 0;
}
.orb {
  z-index: 5;
}
.orb .cat-sprite {
  width: 104%;
  height: 104%;
  left: -2%;
  bottom: 0;
  filter: drop-shadow(0 3px 1px #a372563b);
}
.orb.selected {
  z-index: 8;
}
.orb.selected .cat-sprite {
  filter: drop-shadow(2px 0 0 #fffef0) drop-shadow(-2px 0 0 #fffef0)
    drop-shadow(0 -2px 0 #fffef0) drop-shadow(0 0 4px #ffe462)
    drop-shadow(0 3px 1px #bd945b77);
}
.orb-halo {
  inset: 60% 2% 1%;
  background: #fff28b61;
  border: 3px solid #ffba4a;
  border-radius: 50%;
  width: auto;
  height: auto;
  opacity: 0;
}
.orb.selected .orb-halo {
  inset: 60% 2% 1%;
  border: 3px solid #ffd466;
  opacity: 1;
  background: #fff39c9c;
  box-shadow:
    0 0 0 3px #fffdf5,
    0 0 0 5px #f4a56555;
  animation: selection-ring 1.25s ease-in-out infinite;
}
.selection-pointer {
  position: absolute;
  left: 50%;
  top: -14%;
  translate: -50% 0;
  color: #ff956c;
  font-size: clamp(12px, calc(var(--cell-size) * 0.24), 21px);
  line-height: 1;
  text-shadow:
    1px 1px 0 #fffdf1,
    -1px 0 0 #fffdf1,
    0 -1px 0 #fffdf1;
  display: none;
  pointer-events: none;
  z-index: 8;
}
.orb.selected .selection-pointer {
  display: block;
  animation: selection-arrow 0.9s ease-in-out infinite;
}
.selection-spark {
  position: absolute;
  top: 48%;
  font-size: clamp(9px, calc(var(--cell-size) * 0.15), 14px);
  color: #f4b740;
  text-shadow: 0 1px 0 #fffde6;
  display: none;
  pointer-events: none;
}
.spark-left {
  left: -2%;
}
.spark-right {
  right: -2%;
  top: 38%;
}
.orb.selected .selection-spark {
  display: block;
  animation: selection-twinkle 1.2s ease-in-out infinite;
}
.orb.selected .spark-right {
  animation-delay: -0.6s;
}
.cat-reaction {
  right: 3%;
  top: -9%;
  color: #f188ac;
}
.selection-pop .cat-sprite {
  animation: selection-pop 0.42s ease-out;
}
.partner-strip > button {
  background: linear-gradient(#fffad8, #ffe9b1);
  border: 2px solid #fffae9;
  box-shadow: 0 3px 0 #dac286;
}
.partner-strip > button.selected {
  background: #fff4a6;
  border: 3px solid var(--orb-color);
  box-shadow:
    0 0 0 2px white,
    0 4px 0 color-mix(in srgb, var(--orb-color) 70%, #b68b66);
  scale: 1.08;
}
.partner-strip .cat-sprite {
  background-image: url("assets/sprites-v2/cats.webp");
}
.board-message {
  color: #ae8397;
  font-weight: 700;
  text-shadow: 0 1px 0 #fffade;
}
.partner-bar #docked-count {
  color: #9b8d6d;
}
.tethers {
  z-index: 4;
}
.tether {
  stroke: #f59aab;
  stroke-width: 1.4;
  filter: drop-shadow(0 0.4px 0.1px #a15e6544);
}
.yarn-shadow {
  stroke: #ba768349;
  stroke-width: 2.1;
  transform: translateY(0.4px);
}
.yarn-highlight {
  stroke: #ffe9c5;
  stroke-width: 0.5;
}
.yarn-stitch {
  stroke: #df789d;
  stroke-width: 0.42;
  stroke-dasharray: 0.18 1.2;
  opacity: 0.65;
  animation: yarn-flow 1.35s linear infinite;
}
.yarn-pair-1 .tether {
  stroke: #b594e8;
}
.yarn-pair-1 .yarn-stitch {
  stroke: #9476d0;
}
.yarn-pair-1 .yarn-highlight {
  stroke: #fce7ff;
}
.active-pair .tether {
  stroke-width: 1.65;
}
.active-pair .yarn-highlight {
  stroke-width: 0.6;
}
.yarn-knot circle {
  fill: #fff6cc;
  stroke: #f2ab8b;
  stroke-width: 0.45;
}
.yarn-knot path {
  fill: #f48bab;
}
.yarn-traveller circle {
  fill: #fffbd3;
  stroke: #f3cf70;
  stroke-width: 0.28;
}
.yarn-traveller path {
  stroke: #fff9dd;
  stroke-width: 0.24;
  stroke-linecap: round;
}
.yarn-traveller {
  filter: drop-shadow(0 0 0.6px #fff2a6);
}
.yarn-tug {
  animation: none;
}
.menu-yarn path {
  stroke: #f995b1;
  stroke-width: 6;
  filter: drop-shadow(0 3px 0 #ca789146);
}
.menu-yarn .yarn-shine {
  stroke: #fff2d1;
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  animation: menu-yarn-flow 1.4s linear infinite;
}
.game-actions button {
  background: linear-gradient(#ffe9d9, #ffc5b8);
  border: 3px solid #fff8dd;
  box-shadow: 0 4px 0 #dc9b9f;
  border-radius: 22px;
}
.game-actions button:nth-child(2) {
  background: linear-gradient(#efdefb, #d3baf2);
  box-shadow: 0 4px 0 #ae90cc;
}
.game-actions button:nth-child(3) {
  background: linear-gradient(#fff6b8, #ffdf7c);
  box-shadow: 0 4px 0 #d5b163;
}
.game-actions .icon,
.game-actions span {
  color: #b47b87;
}
.game-actions button:nth-child(2) .icon,
.game-actions button:nth-child(2) span {
  color: #9773b8;
}
.game-actions button:nth-child(3) .icon,
.game-actions button:nth-child(3) span {
  color: #b08a44;
}
.direction-pad:before {
  background: linear-gradient(#bceecb, #8ad5be);
  border: 3px solid #e9ffe0;
  box-shadow: 0 4px 0 #72b69e;
  border-radius: 38%;
  inset: 11px;
}
.direction {
  background: linear-gradient(#b3f0d1, #76dabb);
  border: 3px solid #f1ffdd;
  box-shadow: 0 4px 0 #55ac99;
  color: #418f87;
  border-radius: 15px;
}
.direction:active {
  background: #75d5b7;
  box-shadow: 0 1px 0 #55ac99;
}
.direction .icon {
  stroke-width: 3;
}
.pad-center {
  color: #5bad94;
  font-size: 27px;
}
.gate {
  background: #ffd799;
}
.gate:before {
  content: "";
  position: absolute;
  inset: 20% 12% 5%;
  border: 4px solid #ea9c58;
  border-radius: 8px;
  box-shadow: 0 3px 0 #c98956;
  background: repeating-linear-gradient(90deg, #fae2bc 0 14%, #d68b57 15% 25%);
}
.gate-bars {
  z-index: 2;
  color: #ba7952;
  font-size: clamp(16px, calc(var(--cell-size) * 0.5), 30px);
}
.gate-open .gate:before {
  opacity: 0.35;
  transform: scaleY(0.28);
  transform-origin: 50% 100%;
}
.switch {
  background: #ffef9f;
}
.switch-glyph {
  background: #ffd75c;
  color: #d29c35;
  border: 2px solid #fff9ca;
  border-radius: 30%;
  width: 58%;
  height: 58%;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 #d4af4a;
}
.portal {
  background: #ead6fb;
}
.portal-glyph {
  color: #b986df;
  text-shadow: 0 0 4px #fff7ff;
}
.ice {
  background: linear-gradient(135deg, #d0f4fb, #bfe8f4);
}
.ice-glyph {
  color: #79b7d4;
}
.world-picker-button {
  background: #d4f0c4;
  box-shadow: 0 3px 0 #a1c6a9;
  color: #659f91;
  border-color: #faffdc;
}
.map-title h1 {
  color: #8f759b;
}
.map-title small,
.level-name {
  color: #ae92a6;
}
.route-shadow {
  stroke: #e4a8b5;
  stroke-width: 18;
}
.route-dots {
  stroke: #fff3bf;
  stroke-width: 9;
}
.level-disc {
  background: linear-gradient(#fff7bf, #ffe2a4);
  color: #b5925c;
  border-color: #fffddf;
  box-shadow:
    0 6px 0 #dab27d,
    0 9px 12px #c2967b23;
}
.level-node.completed .level-disc {
  background: linear-gradient(#baf1c8, #8ddebd);
  color: #4d9f8d;
  border-color: #efffe1;
  box-shadow: 0 6px 0 #69b6a4;
}
.level-node.locked .level-disc {
  background: #e6dace;
  color: #b9a396;
  box-shadow: 0 4px 0 #c5b4a4;
  border-color: #f5eedb;
}
.level-node.current .level-disc {
  background: linear-gradient(#ffbc8a, #ff936f);
  box-shadow:
    0 6px 0 #d07872,
    0 0 0 7px #fff3b99c;
  border-color: #fff2cc;
}
.you-are-here {
  background: #fff5c5;
  color: #c2887c;
  box-shadow: 0 2px 0 #e7b992;
}
.world-picker-grid button {
  background: #e8f5d9;
  border-color: #cde3c1;
}
.world-picker-grid button.chosen {
  background: #fff0c5;
  border-color: #eda59d;
}
dialog {
  background: linear-gradient(#fff8df, #fff0d2);
  border-color: #fffde9;
  box-shadow:
    0 7px 0 #e0adae,
    0 20px 80px #71587255;
  color: #a67c8d;
}
dialog::backdrop {
  background: #7759777a;
}
.dialog-content h2 {
  color: #ba809e;
}
.eyebrow {
  color: #c89daf;
}
.result-metrics {
  background: #ffead0;
  border-radius: 19px;
}
.crown-earned {
  background: #fff5b7;
  color: #b99246;
}
.result-score {
  color: #deae53;
}
.settings-note {
  color: #b29ca2;
}
.toggle.on {
  background: #77d8ba;
}
.result-friends .cat-sprite {
  background-image: url("assets/sprites-v2/cats.webp");
}
#toast {
  background: #fff7ddee;
  color: #bc889b;
  border-color: #fffbe9;
  box-shadow:
    0 4px 0 #e9b0bd,
    0 8px 20px #bc81a029;
}
@keyframes selection-ring {
  50% {
    transform: scale(1.05, 0.94);
    box-shadow:
      0 0 0 4px #fffdf5,
      0 0 0 8px #f4a5652b;
  }
}
@keyframes selection-arrow {
  50% {
    transform: translateY(-4px);
  }
}
@keyframes selection-twinkle {
  50% {
    transform: scale(0.6) rotate(20deg);
    opacity: 0.55;
  }
}
@keyframes selection-pop {
  40% {
    transform: translateY(-8%) scale(1.1, 0.94);
  }
  70% {
    transform: translateY(0) scale(0.98, 1.03);
  }
}
@keyframes home-beacon {
  50% {
    transform: scale(1.08);
    opacity: 0.45;
  }
}
@keyframes yarn-flow {
  to {
    stroke-dashoffset: -2.76;
  }
}
@keyframes menu-yarn-flow {
  to {
    stroke-dashoffset: -14;
  }
}
@keyframes obstacle-wiggle {
  20%,
  60% {
    transform: rotate(-5deg);
  }
  40%,
  80% {
    transform: rotate(5deg);
  }
}
@media (max-height: 690px) and (orientation: portrait) {
  .board-stats > div {
    padding: 3px;
    min-height: 46px;
  }
  .board-stats {
    gap: 6px;
  }
  .board-ear {
    top: -6px;
    border-width: 3px;
  }
  .game-actions button {
    border-radius: 19px;
  }
}
@media (max-width: 359px) {
  .board-edge {
    border-radius: 23px;
  }
  .board-stats > div {
    border-radius: 16px;
  }
  .board-toy {
    width: 12%;
  }
  .selection-pointer {
    top: -10%;
  }
  .board-paw {
    font-size: 15px;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .game-actions button {
    border-radius: 14px;
    border-width: 2px;
  }
  .board-stats > div {
    min-height: 44px;
    padding: 3px;
  }
  .board-ear {
    top: -5px;
    height: 9%;
  }
  .direction-pad:before {
    border-radius: 38%;
  }
  .board-toy {
    width: 12%;
  }
  .board-edge {
    border-radius: 24px;
  }
}
html[data-paused="true"] *,
html[data-paused="true"] *:before,
html[data-paused="true"] *:after {
  animation-play-state: paused !important;
}
html[data-motion="off"] .selection-pointer,
html[data-motion="off"] .selection-spark,
html[data-motion="off"] .orb-halo,
html[data-motion="off"] .home-beacon,
html[data-motion="off"] .yarn-stitch,
html[data-motion="off"] .menu-yarn .yarn-shine {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .selection-pointer,
  .selection-spark,
  .orb-halo,
  .home-beacon,
  .yarn-stitch,
  .menu-yarn .yarn-shine {
    animation: none !important;
  }
}