/* Implements the reviewed wood / felt / natural-fur game design sheets. */
:root {
  --ink: #754b31;
  --muted: #9d7a5d;
  --cream: #fff1cf;
  --line: #d8b48c;
  background: #e5cda2;
}
body {
  background: #e5cda2;
}
.cat-atmosphere,
.menu-screen .cat-atmosphere,
.play-screen .cat-atmosphere,
.map-screen .cat-atmosphere {
  background:
    linear-gradient(#fff9de0d, #fff5d514 70%, #ffedc333),
    url("assets/breeds-v3/room.webp") center/cover;
}
.play-screen .cat-atmosphere {
  background:
    linear-gradient(#fff8df33, #ffefcf38),
    url("assets/breeds-v3/room.webp") center/cover;
}
.map-screen .cat-atmosphere {
  background:
    linear-gradient(#fff4dacc, #fff0c6bb),
    url("assets/breeds-v3/room.webp") center/cover;
}
.room-light {
  background: radial-gradient(ellipse at 50% 30%, #fff9cf25, transparent 70%);
}
.floating-paw {
  color: #d9827d;
  opacity: 0.45;
}
.cat-sprite,
.partner-strip .cat-sprite,
.result-friends .cat-sprite {
  background-image: var(--cat-source);
  background-size: 500% 100%;
  background-position: calc(var(--cat-col, 0) * 25%) 0;
  background-repeat: no-repeat;
}
.cat-sprite.has-video {
  background-image: none;
}
.cat-animation {
  image-rendering: auto;
}
.cat-home,
.cat-home-art {
  background-image: var(--home-source);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.event-cat-home {
  background-image: url("assets/breeds-v3/home-2.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.endless-screen .event-cat-home {
  background-image: url("assets/breeds-v3/home-6.webp");
}
.icon-button,
.currency-pill {
  color: #91613b;
  background: linear-gradient(#fff9e3, #edd5ad);
  border: 2px solid #fff5d7;
  box-shadow:
    inset 0 0 0 2px #c49c6d66,
    0 4px 0 #98704a,
    0 7px 10px #51311720;
  border-radius: 50%;
  rotate: 0deg;
}
.currency-pill {
  border-radius: 24px;
  color: #a17b35;
}
.icon-button:active {
  box-shadow:
    inset 0 0 0 2px #c49c6d66,
    0 1px 0 #98704a;
}
.hud-tools .icon-button:last-child {
  rotate: 0deg;
}
.button.primary {
  color: #fff9e1;
  background:
    repeating-linear-gradient(0deg, #ffffff0a 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #471f1908 0 1px, transparent 1px 4px),
    linear-gradient(#dc9580, #d27565);
  border: 3px solid #ffefd0;
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 2px #a45a4b,
    inset 0 3px 0 #f1b19b,
    0 6px 0 #975f45,
    0 10px 0 #ebc59499,
    0 12px 18px #6f402c30;
  text-shadow: 0 2px 0 #a65c49;
}
.button.primary:before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed #ffe6c599;
  border-radius: 20px;
  pointer-events: none;
}
.button.primary {
  position: relative;
}
.button.primary:active {
  box-shadow:
    inset 0 0 0 2px #a45a4b,
    0 2px 0 #975f45;
}
.button.secondary {
  background: #eddbbb;
  color: #895c39;
  border-color: #fff1d1;
  box-shadow: 0 4px 0 #ab8762;
}
.game-logo {
  position: relative;
}
.game-logo h1 {
  width: min(95%, 340px);
  height: 108px;
  margin: 0 auto;
  display: block;
  overflow: hidden;
  background: url("assets/breeds-v3/logo.webp") center/contain no-repeat;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  rotate: 0deg;
  line-height: 0;
  font-size: 0;
}
.game-logo h1 span {
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  rotate: 0deg;
  font-size: 0;
}
.logo-orbit,
.logo-en {
  display: none;
}
.game-logo p {
  margin-top: 2px;
  color: #7a573b;
  font-size: 12px;
  text-shadow: 0 1px #fff3db;
}
.menu-cats.breed-family {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px 3px;
  width: 100%;
  left: 0;
  height: min(85%, 270px);
  bottom: 8%;
  filter: drop-shadow(0 5px 2px #5935182b);
}
.breed-family .menu-cat {
  width: 114%;
  max-height: 100%;
  height: auto;
  aspect-ratio: 1;
  align-self: end;
  justify-self: center;
  rotate: 0deg;
  animation: none;
}
.cat-name-tag {
  font-size: 9px;
  padding: 2px 7px;
  border: 1px solid #fff5d2;
  background: #f6e2b9;
  color: #8b6442;
  box-shadow: 0 2px 0 #bc946a;
  border-radius: 8px;
  bottom: -6px;
}
.welcome-rug {
  background: radial-gradient(
    ellipse,
    #79986866 40%,
    #d4bc8477 57%,
    transparent 61%
  );
  height: 45%;
  bottom: 2%;
}
.scene-bubble {
  top: 2%;
  right: 1%;
  font-size: 11px;
  color: #9a6a4b;
  background: #fff2d3;
  border: 2px solid #fae4b9;
  box-shadow: 0 3px #c7a67a;
  rotate: 2deg;
}
.collection-button {
  position: absolute;
  left: 2%;
  top: 0;
  z-index: 5;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 2px solid #fff0c9;
  border-radius: 17px;
  background: linear-gradient(#fff3d4, #e9c997);
  box-shadow: 0 4px 0 #a68154;
  color: #8d613b;
  font-size: 10px;
  font-weight: 800;
  rotate: -3deg;
}
.collection-button .icon {
  width: 17px;
  height: 17px;
}
.collection-button b {
  display: grid;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
  background: #96754a;
  color: #fff6d9;
  border-radius: 50%;
  font-size: 12px;
}
.collection-button:active {
  box-shadow: 0 1px 0 #a68154;
}
.menu-modes b {
  color: #845b3c;
}
.menu-modes small,
.menu-rank {
  color: #947456;
}
.mode-emblem {
  border-radius: 50%;
  border: 3px solid #fff1cf;
  box-shadow:
    inset 0 0 0 3px #cd9d65,
    0 5px 0 #9e7548;
  background: radial-gradient(ellipse at 50% 30%, #efd5a2, #cea169);
}
.map-emblem {
  color: #6a8660;
}
.daily-emblem {
  color: #b36750;
}
.endless-emblem {
  color: #b68835;
}
.mode-emblem .icon {
  filter: drop-shadow(0 1px 0 #fff4d4);
}
.event-heading h1 {
  color: #9e6944;
  text-shadow: 0 2px #fff1d1;
}
.endless-screen .event-heading h1 {
  color: #8a7659;
}
.event-heading p,
.event-controls p {
  color: #927053;
}
.event-ticket {
  background: #ffe8af;
  border-color: #fff5d2;
  box-shadow: 0 4px #b88d53;
  color: #916b40;
}
.game-level-title {
  background: linear-gradient(#f5dfb5, #e5c397);
  padding: 4px 10px;
  border: 2px solid #fff1cf;
  border-radius: 17px;
  box-shadow: 0 3px 0 #b08a5e;
}
.game-level-title h1 {
  color: #835939;
  text-shadow: 0 1px #fff5db;
  font-size: 17px;
}
.game-level-title h1 > b {
  color: #b78152;
}
.level-world-label {
  color: #9e7750;
}
.board-stats > div {
  background: linear-gradient(#fff3d5, #f1d9b1);
  border: 2px solid #fff5da;
  border-radius: 17px;
  box-shadow: 0 3px #b48d5d;
}
.board-stats > div:nth-child(2) {
  background: linear-gradient(#e8efcf, #c2d1a4);
  box-shadow: 0 3px #92a57b;
}
.board-stats > div:nth-child(3) {
  background: linear-gradient(#ffe8cf, #efc9a3);
  box-shadow: 0 3px #c3956d;
}
.board-stats > div + div {
  border-left: 2px solid #fff5da;
}
.board-stats b {
  color: #8c6340;
}
.board-stats span:not(.stars):not(.hearts),
.board-stats b small {
  color: #a78159;
}
.stars .filled {
  fill: #f4bd59;
  stroke: #bb8837;
}
.stars .empty {
  fill: #e4cfa8;
  stroke: #c5ae8c;
}
.board-edge {
  inset: -30px -20px -24px;
  background: none;
  border: solid transparent;
  border-width: 30px 20px 24px;
  border-image-source: url("assets/breeds-v3/frame.webp");
  border-image-slice: 200 128 164 128;
  border-image-width: 30px 20px 24px;
  border-image-repeat: stretch;
  box-shadow: 0 7px 10px #75492c30;
  border-radius: 24px;
}
.board-ear,
.board-paw,
.board-toy {
  display: none;
}
.board {
  background: #d6b482;
  border-radius: 10px;
}
.tiles {
  gap: 2px;
  background: #c2ac83;
  border-radius: 10px;
  overflow: hidden;
}
.cell,
.floor,
.floor:nth-child(3n),
.wall {
  border: 0;
  border-radius: 9%;
  box-shadow: inset 0 1px 1px #fffce840;
  background-image: url("assets/breeds-v3/felt-cream.webp");
  background-color: #f2e5c5;
  background-size: 144px 144px;
  filter: none;
}
.cell:nth-child(2n) {
  background-color: #f2e5c5;
  background-image: url("assets/breeds-v3/felt-cream.webp");
}
.cell.cloth-sage,
.floor.cloth-sage:nth-child(3n) {
  background-image: url("assets/breeds-v3/felt-sage.webp");
  background-color: #b9c8a3;
}
.cell:after {
  inset: 4%;
  border: 1px dashed #fff7d590;
  border-radius: 8%;
}
.wall:after {
  display: block;
}
.obstacle {
  width: 100%;
  height: 100%;
  background-image: url("assets/breeds-v3/obstacles.webp");
  background-size: 200% 200%;
  filter: drop-shadow(0 2px 1px #62452e40);
}
.cat-home {
  width: 103%;
  height: 103%;
  filter: drop-shadow(0 2px 1px #6f513236);
  z-index: 2;
}
.home-symbol {
  border: 2px solid var(--orb-color);
  color: var(--orb-color);
  background: #fff3d5;
  left: 4%;
  bottom: 4%;
  font-size: clamp(9px, calc(var(--cell-size) * 0.17), 14px);
}
.home-heart {
  color: #d77c77;
  top: 3%;
  right: 4%;
}
.active-home .cat-home {
  filter: drop-shadow(0 0 2px #fff9df) drop-shadow(0 0 3px var(--orb-color))
    drop-shadow(0 2px 1px #6f513236);
}
.active-home .cat-home:before {
  inset: 7%;
  border: 2px dashed var(--orb-color);
  border-radius: 22%;
}
.orb .cat-sprite {
  width: 105%;
  height: 105%;
  left: -2.5%;
  bottom: 0;
  filter: drop-shadow(0 2px 1px #62442c44);
}
.orb.selected .cat-sprite {
  filter: drop-shadow(1px 0 0 #fff5d8) drop-shadow(-1px 0 0 #fff5d8)
    drop-shadow(0 -1px 0 #fff5d8) drop-shadow(0 0 2px #ffd271)
    drop-shadow(0 2px 1px #79523066);
}
.orb.selected .orb-halo {
  border-color: #e6b953;
  background: #f9e6a8aa;
  box-shadow:
    0 0 0 2px #fff8e5,
    0 0 0 4px #a7844d44;
}
.selection-pointer {
  color: #c9895b;
  text-shadow:
    1px 1px #fff4d7,
    -1px 0 #fff4d7;
}
.selection-spark {
  color: #e3b747;
  text-shadow: 0 1px #fff5df;
}
.selected-dot {
  display: none !important;
}
.selected-cell:before {
  background: radial-gradient(ellipse at 50% 70%, #ffdda17a, transparent 70%);
}
.partner-strip > button {
  border: 2px solid #ffefc9;
  background: radial-gradient(ellipse at 50% 30%, #f4dfb5, #d0aa78);
  box-shadow:
    inset 0 0 0 2px #b98955,
    0 3px 0 #9f764c;
  border-radius: 50%;
}
.partner-strip > button.selected {
  background: #fff0c7;
  border: 3px solid var(--orb-color);
  box-shadow:
    0 0 0 2px #fff8e3,
    0 4px 0 #ac8554;
}
.partner-bar #docked-count,
.board-message {
  color: #947355;
  text-shadow: 0 1px #fff5d8;
}
.tether {
  stroke: #a6ba8a;
  stroke-width: 1.25;
  filter: drop-shadow(0 0.3px 0.1px #5c774b66);
}
.yarn-shadow {
  stroke: #725c4a44;
  stroke-width: 1.9;
}
.yarn-highlight {
  stroke: #ffeed0;
  stroke-width: 0.38;
}
.yarn-stitch {
  stroke: #73966b;
  stroke-width: 0.35;
}
.yarn-pair-1 .tether {
  stroke: #ada0c8;
}
.yarn-pair-1 .yarn-stitch {
  stroke: #9586b1;
}
.yarn-pair-1 .yarn-highlight {
  stroke: #ede3fa;
}
.yarn-pair .tether {
  stroke: var(--yarn-color, #a6ba8a);
}
.yarn-pair .yarn-stitch {
  stroke: color-mix(in srgb, var(--yarn-color, #a6ba8a) 75%, #70553d);
}
.yarn-pair .yarn-highlight {
  stroke: color-mix(in srgb, var(--yarn-color, #a6ba8a) 20%, #fff5df);
}
.active-pair .tether {
  stroke-width: 1.4;
}
.active-pair .yarn-highlight {
  stroke-width: 0.45;
}
.yarn-knot circle {
  fill: #fff1d1;
  stroke: #b99d76;
}
.yarn-knot path {
  fill: #c68d7d;
}
.yarn-traveller circle {
  fill: #fff4c6;
  stroke: #cfac59;
}
.game-actions button {
  background: linear-gradient(#f4dfb8, #dcb77f);
  border: 2px solid #ffedc5;
  box-shadow:
    inset 0 0 0 2px #bd8f59,
    0 4px 0 #996e43;
  border-radius: 50%;
}
.game-actions button:nth-child(2),
.game-actions button:nth-child(3) {
  background: linear-gradient(#f4dfb8, #dcb77f);
  box-shadow:
    inset 0 0 0 2px #bd8f59,
    0 4px 0 #996e43;
}
.game-actions .icon,
.game-actions span,
.game-actions button:nth-child(2) .icon,
.game-actions button:nth-child(2) span,
.game-actions button:nth-child(3) .icon,
.game-actions button:nth-child(3) span {
  color: #94623b;
}
.game-actions button:nth-child(3) .icon {
  color: #ad8036;
}
.direction-pad:before {
  inset: 5px;
  background: radial-gradient(ellipse at 50% 25%, #ddbb87, #bd8d54);
  border: 3px solid #fff1cd;
  box-shadow:
    inset 0 0 0 2px #ab7948,
    0 5px 0 #8d633c;
  border-radius: 50%;
}
.direction {
  color: #a57a48;
  background: linear-gradient(#fff6dd, #e6c99b);
  border: 2px solid #ffedc5;
  box-shadow: 0 3px #b18c5d;
  border-radius: 16px;
}
.direction:active {
  background: #e2c396;
  box-shadow: 0 1px #b18c5d;
}
.pad-center {
  color: #c28d60;
  font-size: 28px;
  text-shadow: 0 1px #ffe7bc;
}
.gate {
  background-color: #dfc397;
}
.gate:before {
  border-color: #ac7a48;
  background: repeating-linear-gradient(90deg, #e0ba83 0 14%, #ac7b49 15% 25%);
}
.switch {
  background-color: #ecdb9e;
}
.switch-glyph {
  background: #dbb664;
  color: #9b7841;
  border-color: #fff1c5;
}
.portal {
  background-color: #d8c9e4;
}
.portal-glyph {
  color: #9d82b4;
  text-shadow: 0 0 3px #fff4eb;
}
.ice {
  background-image:
    linear-gradient(135deg, #d6e7edaa, #acc9dcb0),
    url("assets/breeds-v3/felt-cream.webp");
}
.ice-glyph {
  color: #719bb5;
}
.map-emblem,
.daily-emblem,
.endless-emblem {
  background: radial-gradient(ellipse at 50% 25%, #f4dfb5, #d1aa73);
  box-shadow:
    inset 0 0 0 3px #bb8e55,
    0 5px #986f42;
  border-color: #fff1cd;
}
.world-picker-button {
  background: #eee1b7;
  color: #8d8058;
  border-color: #fff0c9;
  box-shadow: 0 3px #baa176;
}
.map-title h1 {
  color: #805c3e;
}
.map-title small,
.level-name {
  color: #99795c;
}
.route-shadow {
  stroke: #bba27f;
}
.route-dots {
  stroke: #fff0c8;
}
.level-disc {
  background: linear-gradient(#fff2cd, #e6c68f);
  color: #936c43;
  border-color: #fff5d7;
  box-shadow: 0 6px #ba915b;
}
.level-node.completed .level-disc {
  background: linear-gradient(#d4e3b7, #aabc90);
  color: #667c51;
  border-color: #edf3d4;
  box-shadow: 0 6px #879c71;
}
.level-node.current .level-disc {
  background: linear-gradient(#eeb4a0, #d88f77);
  border-color: #ffe7c3;
  box-shadow:
    0 6px #ad7356,
    0 0 0 7px #fff1c588;
}
.level-node.locked .level-disc {
  background: #dacfbb;
  color: #a38e76;
  box-shadow: 0 4px #b8a185;
  border-color: #efdfc0;
}
.you-are-here {
  background: #fff0c8;
  color: #a77752;
  box-shadow: 0 2px #bc9b70;
}
.world-picker-grid button {
  background: #f1e6c6;
  border-color: #d8c4a0;
}
.world-picker-grid button.chosen {
  background: #fff0c6;
  border-color: #c69271;
}
dialog {
  color: #8b6849;
  background: linear-gradient(#fff6dc, #f2e3be);
  border-color: #fff4d6;
  box-shadow:
    0 7px #b79568,
    0 20px 70px #57361f55;
}
dialog::backdrop {
  background: #59422f85;
}
.dialog-content h2 {
  color: #815a3b;
}
.eyebrow {
  color: #ad8b5a;
}
.result-metrics {
  background: #ecdbb8;
}
.crown-earned {
  background: #ffedb5;
  color: #a27d37;
}
.result-score {
  color: #b48b40;
}
.settings-note {
  color: #ad9579;
}
.toggle.on {
  background: #92b580;
}
#toast {
  color: #94704f;
  background: #fff2d8ee;
  border-color: #fff4d5;
  box-shadow:
    0 4px #c0a073,
    0 8px 20px #76563822;
}
.breed-collection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.breed-card {
  border: 2px solid #d8c19b;
  border-radius: 20px;
  background: linear-gradient(#fffae6, #f1e1bc);
  padding: 12px 8px;
  box-shadow: 0 3px #c9aa7d;
}
.breed-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 5px;
}
.breed-card h3 {
  font-size: 18px;
  color: #855d3d;
}
.breed-card header span {
  font-size: 9px;
  color: #a78c6b;
}
.breed-card-cats {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.breed-card-cats > div {
  width: 50%;
  text-align: center;
}
.breed-card-cats .cat-sprite {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.breed-card-cats b {
  display: block;
  font-size: 12px;
  color: #805b3d;
}
.breed-card-cats small {
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.breed-card-homes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}
.breed-card-homes .cat-home-art {
  width: 48px;
  height: 48px;
}
.breed-card-homes > span:last-child {
  font-size: 9px;
  color: #997a58;
  max-width: 64px;
}
.breed-card > p {
  font-size: 9px;
  color: #a28c6d;
  text-align: center;
  margin: 8px 0 0;
}
.collection-dialog {
  max-width: 680px;
}
.collection-dialog > .dialog-content > p {
  font-size: 12px;
}
@media (min-width: 700px) and (min-height: 700px) {
  .menu-cats.breed-family {
    height: min(85%, 330px);
    width: 100%;
    bottom: 9%;
  }
  .game-logo h1 {
    height: 130px;
    width: 390px;
    max-width: 100%;
  }
  .breed-family .menu-cat {
    max-width: 130px;
    justify-self: center;
  }
}
@media (max-height: 690px) and (orientation: portrait) {
  .game-logo h1 {
    height: 82px;
    width: 275px;
  }
  .game-logo p {
    font-size: 10px;
  }
  .menu-cats.breed-family {
    height: 85%;
    bottom: 10%;
    gap: 10px 2px;
  }
  .cat-name-tag {
    font-size: 8px;
    padding: 1px 6px;
    bottom: -5px;
  }
  .collection-button {
    min-height: 44px;
    padding: 5px 8px;
    font-size: 9px;
    top: -4px;
  }
  .scene-bubble {
    font-size: 9px;
    padding: 4px 7px;
    top: -5px;
  }
  .board-edge {
    inset: -21px -14px -18px;
    border-width: 21px 14px 18px;
    border-image-width: 21px 14px 18px;
  }
  .game-actions button {
    border-radius: 50%;
  }
}
@media (max-width: 480px) {
  .breed-collection {
    grid-template-columns: 1fr;
  }
  .breed-card-cats .cat-sprite {
    max-width: 145px;
    margin: auto;
  }
  .breed-card {
    padding: 12px 14px;
  }
  .breed-card-homes .cat-home-art {
    width: 54px;
    height: 54px;
  }
}
@media (max-width: 359px) {
  .game-level-title {
    padding: 3px 7px;
  }
  .game-level-title h1 {
    font-size: 14px;
  }
  .menu-cats.breed-family {
    width: 96%;
    left: 2%;
  }
  .collection-button {
    left: 0;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .game-level-title .level-world-label {
    min-height: 18px;
    font-size: 9px;
  }
  .game-level-title h1 > b {
    font-size: 14px;
  }
  .game-top {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(215px, 0.9fr);
    column-gap: 26px;
    align-items: center;
  }
  .game-top > .back-button {
    grid-area: 1/1;
    justify-self: start;
  }
  .game-top > .game-level-title {
    grid-area: 1/2;
    justify-self: start;
    max-width: calc(100% - 56px);
  }
  .game-top > .icon-button:last-child {
    grid-area: 1/2;
    justify-self: end;
  }
  .game-logo h1 {
    height: 72px;
    width: 220px;
  }
  .game-logo p {
    font-size: 9px;
  }
  .menu-cats.breed-family {
    height: 90%;
    bottom: 4%;
    gap: 5px 2px;
    max-width: 310px;
    left: 50%;
    translate: -50% 0;
  }
  .cat-name-tag {
    display: none;
  }
  .collection-button {
    top: 0;
    left: 0;
    min-height: 44px;
    padding: 5px 8px;
    font-size: 9px;
  }
  .scene-bubble {
    top: 0;
    font-size: 8px;
  }
  .menu-scene {
    height: 68%;
  }
  .game-level-title {
    padding: 3px 7px;
  }
  .game-level-title h1 {
    font-size: 14px;
  }
  .board-edge {
    inset: -20px -14px -18px;
    border-width: 20px 14px 18px;
    border-image-width: 20px 14px 18px;
  }
  .game-actions button {
    border-radius: 50%;
  }
  .direction-pad:before {
    border-radius: 50%;
  }
}
@media (orientation: portrait) and (max-height: 600px) {
  .menu-cats.breed-family {
    height: 76%;
    bottom: 3%;
    gap: 6px 3px;
  }
}