@font-face {
  font-family: "Lilita One";
  src: url("../fonts/lilita-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* The shared menus' own colours, sizes and font are left as they are in every
   game; these are Button Bash's additions. */
:root {
  --rose: #aa4860;
  --paper: #fff7e9;
  --bb-text: 1;
}
body {
  background: #e9d5b9;
  color: var(--ink);
  font-family: var(--font);
  background-image:
    radial-gradient(ellipse at 20% 0%, #fff9e8, transparent 65%),
    linear-gradient(130deg, #f1ddcc, #d2b8b7);
  touch-action: manipulation;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 3px solid #3987aa;
  outline-offset: 3px;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
h1,
h2,
p {
  margin: 0;
}
button,
input,
select {
  touch-action: manipulation;
}
button {
  min-height: 44px;
}
#sewingRoom {
  height: 100%;
  overflow: auto;
  touch-action: pan-y;
}
/* The Sewing Room is the title every game has, laid out by the shared menus
   (the logo, Play, the shared menu and foot), with the quilt being stitched and
   the three other ways to play under the menu. It scrolls only on a screen too
   short for it. */
#title {
  background: radial-gradient(ellipse at 50% 30%, #fff9edc9, transparent 75%);
  overflow-y: auto;
  justify-content: flex-start;
  touch-action: pan-y;
}
#title .title-col {
  gap: clamp(9px, 2.8vh, 26px);
  flex: none;
}
/* It holds two rows more than the other games' titles, so its logo gives way on
   a short screen. */
#title .logo-img {
  max-height: 24vh;
}
@media (max-height: 700px) {
  #title .logo-img {
    max-height: 12.5vh;
  }
}
.reduced .logo-row,
.battery .logo-row {
  animation: none;
}
/* Play keeps every game's size; a label too long for it is made smaller
   (fitPlay in app.js). */
#title #playBtn {
  width: min(100%, 372px);
  min-width: 0;
}
/* (no transition, which Reduce motion gives every property: fitPlay reads the
   size it has just set) */
#title #playLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: none !important;
}
/* Button Bash's text size reaches the tiles and the quilt card too. */
#title .title-menu .btn {
  font-size: calc(clamp(13px, 3.7vmin, 16px) * var(--bb-text));
  /* Room for two lines of label in every tile, so both rows are one size
     whichever labels wrap: the icon, the gap, two lines and the padding. */
  min-height: calc(1.75em + 5px + 2.2em + 20px + 2 * var(--bw));
}
/* The other ways to play start a game, so they are in Play's colour. */
#title .title-menu.ways .btn svg {
  color: #fff;
  filter: drop-shadow(0 2px 0 rgba(107, 58, 31, 0.4));
}
/* The quilt being stitched, a tile as wide as the menu: its picture and how far
   it is. It opens the quilt. */
.quilt-card {
  display: flex;
  width: min(100%, 372px);
  min-height: 0;
  padding: 8px 12px 8px 8px;
  gap: 12px;
  justify-content: flex-start;
  border-radius: calc(var(--radius) * 0.85);
  white-space: normal;
  text-align: left;
}
.quilt-card::before {
  left: 6%;
  right: 6%;
  top: 5%;
  height: 26%;
}
.quilt-thumb {
  flex: none;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(107, 58, 31, 0.3);
  border-radius: 9px;
  overflow: hidden;
  background: #e7d4b8;
}
.quilt-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 100%;
}
.quilt-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.15;
  font-size: calc(clamp(13px, 3.7vmin, 16px) * var(--bb-text));
}
.quilt-card-text span {
  font-weight: 800;
  color: rgba(59, 35, 20, 0.72);
}
.result-quilt svg {
  display: block;
  width: 100%;
  height: auto;
}
.result-quilt {
  width: min(210px, 55vw);
  margin: 8px auto;
  border: 5px solid #fcf0d9;
  border-radius: 8px;
  overflow: hidden;
}
.text-button {
  border: 2px solid var(--brown);
  border-radius: 999px;
  background: var(--cream);
  color: var(--brown);
  box-shadow: 0 2px 0 var(--brown);
  text-decoration: none;
  min-height: 44px;
  font-size: calc(16px * var(--bb-text));
  font-weight: 900;
  padding: 9px 14px;
}
#playArea {
  max-width: 480px;
  margin: auto;
  padding: calc(var(--sat) + var(--hud-h) + var(--gap) * 2) 12px
    calc(var(--sab) + 12px);
}
.pattern-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin: 3px 3px 12px;
  gap: 3px;
}

.pattern-heading b {
  font-size: calc(24px * var(--bb-text));
  font-weight: 900;
  color: var(--brown);
}

.goal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 17px;
  position: relative;
}
.goal-card:after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(107, 58, 31, 0.3);
  border-radius: calc(var(--radius) - 7px);
  pointer-events: none;
}
.goal-card strong {
  font-size: calc(28px * var(--bb-text));
  line-height: 1.1;
  display: block;
  font-weight: 1000;
}
.small-label {
  display: block;
  font-size: calc(15px * var(--bb-text));
  font-weight: 800;
  color: rgba(59, 35, 20, 0.7);
  margin-bottom: 4px;
}
.goal-art {
  width: 47px;
  height: 47px;
  transform: rotate(10deg);
}
.goal-art svg {
  width: 100%;
  height: 100%;
}
.moves {
  text-align: center;
  border-left: 2px solid rgba(107, 58, 31, 0.15);
  padding-left: 19px;
}
.moves strong {
  color: var(--rose);
}
.board-frame {
  background: linear-gradient(
    135deg,
    #f1d2a1,
    #b77747 28%,
    #e3b77a 54%,
    #925536
  );
  padding: 9px;
  border: 1px solid #88563d;
  border-radius: 19px;
  box-shadow:
    0 6px 0 #784b35,
    0 12px 18px #50322f40,
    inset 0 2px 1px #fff3cf,
    inset 0 -3px 2px #8b553b;
}
.fabric {
  background-color: #416474;
  background-image:
    radial-gradient(ellipse at 42% 28%, #ffffff14, #061e3340),
    repeating-linear-gradient(0deg, #061e3310 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #ffffff0d 0 1px, transparent 1px 4px);
  padding: 6px;
  border: 2px dashed #bdc6b48c;
  border-radius: 11px;
  box-shadow:
    inset 0 3px 8px #10283680,
    inset 0 -1px 2px #e7f8ec35;
}
#grid {
  display: grid;
  grid-template-columns: repeat(var(--size, 7), 1fr);
  gap: 2px;
  touch-action: none;
}
.cell {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 65%, #102c3b20, transparent 72%);
  touch-action: none;
  transition: background 0.15s;
  outline-offset: 0;
}
.cell svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 1px #6c493633);
  pointer-events: none;
}
.cell.selected {
  background: #ffffffa6;
  box-shadow:
    inset 0 0 0 2px #6fb8db,
    0 0 10px #82d7ed;
}
.cell.hint {
  box-shadow:
    inset 0 0 0 2px #fff6b9,
    0 0 12px #fff59c;
  background: #fffbd950;
}
.cell.hint[data-hint-direction] {
  z-index: 2;
}
.cell.hint[data-hint-direction]::after {
  content: "➜";
  position: absolute;
  left: calc(100% + 1px);
  top: 50%;
  --hint-angle: 0deg;
  transform: translate(-50%, -50%) rotate(var(--hint-angle));
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid #fff9d3;
  border-radius: 50%;
  background: #ffe99f;
  color: #674435;
  box-shadow: 0 2px 4px #2e211955;
  font-size: 21px;
  line-height: 1;
  pointer-events: none;
  animation: hint-swipe 1s ease-in-out infinite alternate;
}
.cell.hint[data-hint-direction="left"]::after {
  left: -1px;
  --hint-angle: 180deg;
}
.cell.hint[data-hint-direction="down"]::after {
  left: 50%;
  top: calc(100% + 1px);
  --hint-angle: 90deg;
}
.cell.hint[data-hint-direction="up"]::after {
  left: 50%;
  top: -1px;
  --hint-angle: -90deg;
}
@keyframes hint-swipe {
  from {
    transform: translate(-50%, -50%) rotate(var(--hint-angle)) translateX(-2px);
  }
  to {
    transform: translate(-50%, -50%) rotate(var(--hint-angle)) translateX(2px);
  }
}
.reduced .cell.hint::after {
  animation: none;
}
.hem {
  display: flex;
  justify-content: space-around;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  color: #fff4e0;
  padding: 6px 0 0;
}
#statusLine:empty {
  display: none;
}
#statusLine {
  text-align: center;
  font-size: calc(16px * var(--bb-text));
  min-height: 38px;
  line-height: 1.4;
  padding: 14px 5px 6px;
  color: var(--ink);
}
.tool-tray {
  display: flex;
  gap: 5px;
  padding: 8px 7px;
}
.tool-tray button {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 3px 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  min-height: 45px;
}
.tool-tray button.selected {
  background: #edc7c5;
  box-shadow: inset 0 0 0 1px #b96a7c;
}
.tool-tray .tool-icon {
  font-size: 27px;
  display: block;
  line-height: 1;
  color: #9d4861;
  filter: drop-shadow(0 2px #fff3e6);
}
.tool-tray .quantity {
  position: absolute;
  bottom: 0;
  right: 1px;
  background: var(--pink);
  border-radius: 12px;
  color: white;
  min-width: 17px;
  font-size: calc(15px * var(--bb-text));
  font-weight: 900;
  padding: 1px 6px;
  border: 2px solid var(--brown);
  text-shadow: 0 1px 0 rgba(107, 58, 31, 0.4);
}
.under-board {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.bobbin {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px dashed #c5a785;
  padding: 9px 5px 0;
  color: #927257;
  font-size: 11px;
}
.bobbin > span:first-child {
  font-size: 24px;
  color: #b25a6e;
}
.bobbin > div {
  flex: 1;
}
progress {
  display: block;
  width: 100%;
  height: 7px;
  accent-color: #b56b7e;
  margin-top: 4px;
}
.screen {
  z-index: 12;
}
/* Button Bash's own cards (results, goals, helpers, notes) are the shared
   menus' cards: cream, edged in brown, a centred title. */
dialog {
  color: var(--ink);
  background: var(--cream);
  border: var(--bw) solid var(--brown);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  max-width: 400px;
  width: calc(100% - 2 * var(--gap));
  max-height: calc(100dvh - var(--sat) - var(--sab) - 2 * var(--gap));
  padding: clamp(18px, 5vmin, 28px);
  overflow: auto;
  touch-action: pan-y;
}
dialog[open] {
  animation: slide-in 0.34s cubic-bezier(0.25, 1.45, 0.5, 1) both;
}
.reduced dialog[open] {
  animation: none;
}
dialog::backdrop {
  background: rgba(59, 35, 20, 0.3);
}
.panel-heading {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 4px;
  margin-bottom: clamp(8px, 2.4vmin, 14px);
}
.panel-heading h2 {
  grid-column: 2;
  margin: 0;
  font-size: clamp(24px, 7vmin, 34px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--brown);
  text-align: center;
}
.panel-heading button {
  grid-column: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--brown);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, var(--cream) 55%, #ffe2c6 100%);
  box-shadow: 0 2px 0 var(--brown);
  color: var(--brown);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}
#panelContent p {
  font-size: calc(16px * var(--bb-text));
  font-weight: 700;
  line-height: 1.4;
  margin: 10px 0;
}
#panelContent .result-text {
  text-align: center;
}
#panelContent .panel-actions {
  margin-top: 14px;
}
#panelContent .panel-actions .btn {
  white-space: normal;
  min-width: 0;
}
/* Game controls use the shared sheet, rows, and toggles. */
.bb-options summary,
.bb-device-check summary {
  cursor: pointer;
  padding: 16px 4px;
  font-weight: 800;
}
.bb-device-check a {
  color: inherit;
}
.result-stars {
  font-size: 48px;
  letter-spacing: 7px;
  text-align: center;
  color: #ffc93c;
  text-shadow:
    0 2px 0 var(--brown),
    0 0 1px var(--brown);
}
.result-patch {
  width: 110px;
  margin: 8px auto;
  transform: rotate(-5deg);
}
/* The player's sewing, under Your wins on the Games won sheet's All time, in the
   menus' own rows. */
.sewing {
  margin: 4px 0 2px;
}
.sewing .set-label {
  min-width: min-content;
  font-size: calc(15px * var(--bb-text));
}
.sewing-value {
  flex: 0 1 auto;
  text-align: right;
  font-size: calc(16px * var(--bb-text));
  font-weight: 900;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
}
.sewing .badges {
  justify-content: center;
  margin-top: 10px;
}
#announcement {
  position: fixed;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 44%;
  text-align: center;
  font-weight: 1000;
  font-size: 30px;
  color: #fff3cb;
  text-shadow: 0 2px 3px #7e4159;
  z-index: 9;
}
/* Dim background darkens the room; the cards and menus stay as in every game. */
.night {
  background: #2e2932;
}
.night #title {
  background: radial-gradient(ellipse at 50% 30%, #4a3c46, transparent 75%);
}
.night .fabric {
  background-color: #293e53;
}
.night .pattern-heading b,
.night #statusLine,
.night #saveNote {
  color: #f6e3cf;
}
.contrast .cell svg,
.contrast .cell img {
  filter: contrast(1.2) drop-shadow(0 2px #382736);
}
.left-hand .tool-tray {
  flex-direction: row-reverse;
}
.reduced .cell svg {
  animation: none !important;
}
.reduced * {
  scroll-behavior: auto !important;
}
.large {
  --bb-text: 1.15;
}
.largest {
  --bb-text: 1.3;
}
#hudScore,
#hudBest {
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
  .board-frame {
    padding: 12px;
  }
}
@media (max-height: 740px) {
  .pattern-heading {
    margin-bottom: 7px;
  }
  .goal-card {
    padding: 8px 15px;
  }
  .tool-tray {
    padding: 4px;
  }
  .bobbin {
    padding-top: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cell svg {
    animation: none;
  }
  .star-track i {
    transition: none;
  }
}
.tool-icon svg {
  display: block;
  width: 100%;
  height: 41px;
  filter: drop-shadow(0 2px 1px #70453644);
}
.tool-tray .tool-icon {
  height: 41px;
}
.tool-tray button {
  padding: 0 0 7px;
}
.tool-tray .quantity {
  bottom: -1px;
}
.battery .cell svg {
  animation: none !important;
}
.battery .star-track i {
  transition: none;
}
body[data-season="spring"] .fabric {
  background-color: #416f67;
}
body[data-season="summer"] .fabric {
  background-color: #396f7b;
}
body[data-season="autumn"] .fabric {
  background-color: #4c6075;
}
body[data-season="winter"] .fabric {
  background-color: #485d7a;
}
.night[data-season] .fabric {
  background-color: #293e53;
}
html {
  touch-action: manipulation;
}
.tool-tray {
  overflow-x: auto;
  touch-action: pan-x;
}
.tool-tray button {
  min-width: 44px;
}
.tool-tray .tool-icon {
  pointer-events: none;
}
@media (max-height: 740px) and (min-width: 360px) {
  .pattern-heading {
    margin-top: 0;
    margin-bottom: 6px;
  }
  .goal-card {
    padding: 5px 15px;
  }
  .goal-art {
    width: 39px;
    height: 39px;
  }
  .bobbin {
    display: none;
  }
  #statusLine {
    min-height: 27px;
    padding-top: 10px;
  }
  .board-frame {
    padding: 7px;
  }
  .fabric {
    padding: 4px;
  }
}
.badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.sewing-badge {
  border: 1px dashed #bd9b75;
  border-radius: 20px;
  background: #f1dfbb;
  padding: 6px 10px;
  font-size: calc(13px * var(--bb-text));
  color: #815947;
}

#grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.button-piece {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 55%;
  pointer-events: none;
}
.cell.selected .button-piece {
  transform: scale(1.07);
}
.cell.selected {
  z-index: 1;
}
#grid[aria-busy="true"] .cell.selected .button-piece {
  transform: none;
}
.stitch-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 2px;
  background: #fff6c5;
  pointer-events: none;
  z-index: 3;
}
/* Keep long shared-menu actions inside their pill on every viewport. */
#pause .panel-actions.row .btn {
  flex: 1 1 130px;
  min-width: 0;
  padding: 10px 12px;
  white-space: normal;
}
#pause .panel-actions .btn span {
  min-width: 0;
  overflow-wrap: anywhere;
}
#pause .panel-actions .btn svg {
  flex-shrink: 0;
}
.reduced .modal .panel {
  animation: none;
}
@media (max-height: 480px) {
  #pause .panel {
    overflow-y: auto;
  }
}
.reduced .cell,
.reduced .star-track i {
  transition: none;
}
#pause .panel-actions.row .btn {
  font-size: clamp(15px, 3.8vmin, 18px);
}
#pause .panel-actions .btn span {
  overflow-wrap: normal;
}

.cell.grabbed {
  z-index: 4;
  cursor: grabbing;
}
.cell.drag-neighbor {
  z-index: 2;
}
.cell.grabbed .button-piece {
  will-change: transform;
}
#grid[data-drag] .button-piece {
  pointer-events: none;
}
@property --bb-lift {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.table-light {
  position: fixed;
  inset: -25%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 30% 15%,
    var(--bb-light-color, #fff5d6),
    transparent 65%
  );
  opacity: 0.4;
  transform: translate3d(var(--bb-light-x, 0%), var(--bb-light-y, 0%), 0);
  transition:
    transform 2s linear,
    opacity 1s;
}
#sewingRoom {
  position: relative;
}
.fabric {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fabric::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -40%;
  z-index: -1;
  background: linear-gradient(
    90deg,
    transparent 20%,
    #fff7da30 21% 46%,
    transparent 47% 49%,
    #fff7da24 50% 74%,
    transparent 75%
  );
  transform: translate3d(var(--bb-light-x, 0%), var(--bb-light-y, 0%), 0)
    rotate(-28deg);
  transition: transform 2s linear;
}
.button-piece {
  --bb-shadow-x: 1px;
  --bb-shadow-y: 2px;
}
.button-piece {
  position: relative;
}
.button-piece > img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.button-piece::before {
  content: "";
  position: absolute;
  inset: 13% 10% 5%;
  background: radial-gradient(
    ellipse,
    #1023328c 25%,
    #10233245 60%,
    transparent 73%
  );
  transform: translate(
      calc(var(--bb-shadow-x) * (1 + var(--bb-lift) * 2.5)),
      calc(var(--bb-shadow-y) * (1 + var(--bb-lift) * 2.5))
    )
    scale(calc(1 + var(--bb-lift) * 0.08));
  opacity: calc(1 - var(--bb-lift) * 0.1);
}
.button-sheen {
  transform: none;
}

.thread-effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 6;
}
.thread-effects path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-light="lamp"] .table-light {
  opacity: 0.16;
}
body[data-light="lamp"] .fabric::before {
  background: radial-gradient(ellipse at 80% 20%, #ffd39045, transparent 65%);
}
.reduced .table-light,
.reduced .fabric::before,
.battery .table-light,
.battery .fabric::before {
  transition: none;
}

/* The targets share one compact tray, with a separate count for every task. */
.goal-card {
  gap: 9px;
  padding: 9px 12px;
}
.goal-target {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 150px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
  position: relative;
}
.goal-target[hidden] {
  display: none;
}
.goal-target > div:last-child {
  display: contents;
}
.goal-target .small-label {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}
.goal-target .goal-art {
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 42px;
  flex: 0 0 38px;
  transform: none;
}
.goal-target[data-complete="true"] strong {
  color: #308258;
}
.goal-target[data-complete="true"] .goal-art:after {
  content: "✓";
  position: absolute;
  right: -2px;
  bottom: 0;
  border-radius: 50%;
  background: #328656;
  color: #fff;
  font: 900 13px/19px var(--font);
  width: 19px;
  text-align: center;
}
.goal-art {
  position: relative;
}
.goal-card .moves {
  flex: 0 0 auto;
  padding-left: 12px;
}
.goal-flight {
  position: fixed;
  z-index: 12;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.goal-flight img {
  display: block;
  width: 100%;
  height: 100%;
}
.fabric-fleck {
  position: absolute;
  width: 9px;
  height: 6px;
  border: 1px dashed #fff0cf;
  border-radius: 2px;
  background: #d78991;
  pointer-events: none;
  z-index: 5;
}
@media (max-width: 360px) {
  .goal-card {
    gap: 5px;
    padding: 8px 10px;
  }
  .goal-target {
    gap: 4px;
  }
  .goal-target .goal-art {
    width: 27px;
    height: 33px;
    flex-basis: 27px;
  }
  .goal-card .moves {
    padding-left: 7px;
  }
}
.button-pile {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.button-pile svg {
  position: absolute;
  width: 70%;
  height: 70%;
}
.button-pile svg:nth-child(1) {
  left: 0;
  top: 0;
  transform: rotate(-12deg);
}
.button-pile svg:nth-child(2) {
  right: 0;
  top: 15%;
}
.button-pile svg:nth-child(3) {
  left: 8%;
  bottom: 0;
  transform: rotate(10deg);
}
.goal-card + .board-frame {
  margin-top: 14px;
}
.helper-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.helper-heading[hidden],
#bobbin[hidden] {
  display: none;
}

.tool-tray {
  margin-top: 14px;
  justify-content: space-around;
  overflow: visible;
}
.tool-tray button {
  flex: 1;
  max-width: 120px;
  padding: 7px 6px;
}
.tool-tray .tool-icon {
  width: 44px;
  height: 44px;
  margin: auto;
}

.tool-tray .quantity {
  top: 1px;
  right: 5px;
  bottom: auto;
}
#bobbin {
  display: flex;
  margin-top: 4px;
  padding-top: 5px;
  font-size: 10px;
}
@media (max-height: 740px) {
  .tool-tray .tool-icon {
    width: 40px;
    height: 40px;
  }
  #bobbin progress {
    height: 5px;
    margin-top: 2px;
  }
}

.tool-tray .tool-icon svg {
  height: 100%;
}

.goal-target strong {
  grid-column: 2;
  grid-row: 1;
}
.helper-detail {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guide-art {
  display: block;
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}
.guide-art svg {
  width: 100%;
  height: 100%;
}

.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
#panelContent .puzzle-grid button {
  margin: 0;
  min-height: 52px;
  font-size: calc(20px * var(--bb-text));
}

.under-board {
  gap: 10px;
  margin-top: 14px;
}

#pauseGoal span {
  display: block;
}