/* A cream field notebook and a mint workbench, using the game's existing candy art. */
.explorer-door {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 0 32px;
  padding: 23px 28px;
  border: 1px solid #cdddcf;
  border-radius: 18px;
  background: linear-gradient(110deg, #f1f7edee, #fff8f0ee);
  backdrop-filter: blur(12px);
}
.explorer-door > div:first-child {
  display: flex;
  align-items: center;
  gap: 18px;
}
.explorer-door > div > svg {
  width: 38px;
  height: 38px;
  color: #6b9177;
}
.explorer-door h2 {
  font: 500 24px var(--display);
  margin: 3px 0 7px;
}
.explorer-door p {
  font-size: 14px;
  color: #705a70;
  margin: 0;
  line-height: 1.7;
}
.explorer-door .eyebrow {
  color: #52765c;
  font-size: 12px;
  letter-spacing: 0.8px;
}
.explorer-door-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.explorer-back,
.explorer-door-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 15px;
  border: 1px solid #dacbd9;
  background: #fffaf4;
  color: #66506a;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}
.explorer-door-actions button:first-child {
  background: #e6f0e2;
  border-color: #b9cfb7;
  color: #426347;
}
.explorer-back svg,
.explorer-door-actions svg {
  width: 17px;
  height: 17px;
}
#explorerScreen {
  padding: 22px 0 36px;
}
.explorer-header {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid #dfd2dc;
}
.explorer-header h2 {
  font: 500 29px var(--display);
  margin: 6px 0 0;
  letter-spacing: -0.7px;
}
.explorer-header h2 span {
  color: #659078;
}
.explorer-header .eyebrow,
.lab-intro .eyebrow,
.explorer-intro .eyebrow,
.lab-notebook .eyebrow {
  font-size: 12px;
  letter-spacing: 0.8px;
  color: #567760;
}
.explorer-header nav {
  display: flex;
  gap: 7px;
}
.explorer-header nav button {
  display: flex;
  gap: 8px;
  align-items: center;
  background: transparent;
  border-radius: 10px;
  padding: 12px 15px;
  color: #705a70;
  font-size: 14px;
}
.explorer-header nav button[aria-current="page"] {
  background: #e6efdf;
  color: #426347;
}
.explorer-header nav svg {
  width: 17px;
  height: 17px;
}
.explorer-header .explorer-back > svg {
  transform: rotate(180deg);
}
.lab-intro,
.explorer-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
}
.lab-intro h3,
.explorer-intro h3 {
  font: 500 clamp(30px, 3vw, 42px)/1.1 var(--display);
  letter-spacing: -0.6px;
  margin: 10px 0 14px;
}
.lab-intro p,
.explorer-intro p {
  color: #705a70;
  font-size: 14px;
  line-height: 1.8;
  max-width: 570px;
  margin: 0;
}
.lab-free-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf1e4;
  border: 1px solid #c6d9bc;
  padding: 10px 13px;
  border-radius: 9px;
  color: #466947;
  font-size: 13px;
  white-space: nowrap;
}
.lab-free-label svg {
  width: 17px;
  height: 17px;
}
.lab-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 220px;
  align-items: start;
  gap: 24px;
}
.explorer-surface {
  background: #fffaf4ed;
  backdrop-filter: blur(12px);
  border: 1px solid #dfd5d9;
  border-radius: 18px;
  padding: 20px;
}
.lab-workbench h4,
.lab-notebook h4 {
  font: 500 22px var(--display);
  margin: 0 0 10px;
}
.lab-workbench p,
.lab-notebook p {
  font-size: 14px;
  line-height: 1.8;
  color: #705a70;
}
.lab-tool {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fffaf5;
  border: 1px solid #dfd2df;
  border-radius: 9px;
  padding: 9px;
  font-size: 13px;
  text-align: left;
}
.lab-tool svg {
  width: 17px;
  height: 17px;
}
.lab-tool.selected,
.lab-colors button.selected {
  border-color: #719775;
  background: #e5efdf;
  box-shadow: 0 0 0 1px #719775;
}
.lab-workbench > .lab-tool {
  width: 100%;
}
#labPalette {
  border: 0;
  padding: 0;
  margin: 19px 0;
  min-width: 0;
}
#labPalette legend,
.lab-legend,
.lab-room-label {
  font-size: 12px;
  color: #705a70;
  display: block;
  margin-bottom: 10px;
  font-weight: 800;
}
.lab-legend {
  padding-top: 17px;
}
.lab-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.lab-colors button {
  display: grid;
  place-items: center;
  border: 1px solid #e1d6dc;
  border-radius: 9px;
  background: #f8f2f4;
  padding: 6px;
}
.lab-colors img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px #84637a22);
}
.lab-specials {
  display: grid;
  gap: 6px;
}
.lab-specials .special-sample {
  width: 25px;
  height: 25px;
}
#labRoom {
  font: 700 13px var(--font);
  width: 100%;
  border: 1px solid #d6cad4;
  padding: 10px 5px;
  background: #fffaf5;
  color: #58445c;
  border-radius: 8px;
}
.lab-workbench .lab-room-note,
.lab-notebook .lab-save-note {
  font-size: 12px;
  margin-bottom: 0;
}
.lab-board-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0 12px;
  font-size: 12px;
  color: #705a70;
  font-weight: 800;
}
.lab-board-frame {
  padding: 10px;
  border: 1px solid #bfceb9;
  background: #e9f0e1;
  border-radius: 18px;
  box-shadow: 0 5px 0 #d2ddc6;
}
#labBoard {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
}
.lab-candy {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  left: calc(var(--col) * 12.5%);
  top: calc(var(--row) * 12.5%);
  border-radius: 7px;
  padding: 4px;
  background: #f4edf4;
  box-shadow: inset 0 0 0 1px #d7c7dd;
  transition:
    top 0.22s ease,
    left 0.22s ease,
    transform 0.2s,
    opacity 0.2s;
}
.lab-candy img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lab-candy.selected {
  z-index: 3;
  background: #ffeebc;
  box-shadow:
    inset 0 0 0 2px #ba9056,
    0 0 0 2px #fff3c3;
}
.lab-candy.lab-crush {
  opacity: 0;
  transform: scale(0.1) rotate(15deg);
}
.lab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.lab-actions .primary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px;
  font-size: 13px;
  background: #527459;
  border-color: #628268;
  box-shadow: 0 4px 0 #4d6c53;
}
.lab-actions .primary-button:hover {
  background: #45664c;
  box-shadow: 0 5px 0 #4d6c53;
}
.lab-actions .primary-button svg {
  width: 16px;
  height: 16px;
}
.lab-actions button:disabled {
  opacity: 1;
  color: #78687a;
  background: #ede6eb;
  border-style: dashed;
}
.lab-help {
  font-size: 13px;
  line-height: 1.8;
  color: #705a70;
  padding: 11px 13px;
  background: #fffaf4ed;
  border: 1px solid #e4d8df;
  border-radius: 10px;
  backdrop-filter: blur(12px);
}
.lab-notebook h4 {
  margin-top: 10px;
}
.lab-note-rule {
  height: 1px;
  background: #e6dce0;
  margin: 23px 0;
}
.lab-notebook .text-button {
  font-size: 13px;
}
.lab-discovery {
  display: flex;
  align-items: start;
  gap: 8px;
  padding: 13px 10px;
  margin: 12px 0;
  border: 1px solid #c5d6bd;
  background: #edf5e8;
  border-radius: 10px;
  color: #48684a;
}
.lab-discovery > svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.lab-discovery small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.8px;
}
.lab-discovery strong {
  display: block;
  font: 500 19px var(--display);
  margin: 5px 0;
}
.lab-discovery span {
  display: block;
  font-size: 12px;
  line-height: 1.6;
}
.journal-seal {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 175px;
  padding: 20px 12px;
  border: 1px solid #bfd1bd;
  border-radius: 50% 50% 18px 18px;
  background: #eff4e9e8;
  color: #56775e;
}
.journal-seal svg {
  width: 37px;
  height: 37px;
  margin-bottom: 8px;
}
.journal-seal strong {
  font: 500 43px var(--display);
}
.journal-seal small {
  font-size: 20px;
}
.journal-seal > span {
  font-size: 12px;
}
.journal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.journal-filters button {
  border: 1px solid #ded2dc;
  border-radius: 20px;
  background: #fffaf4;
  padding: 10px 15px;
  font-size: 13px;
  color: #705a70;
}
.journal-filters button[aria-pressed="true"] {
  background: #e6efdf;
  border-color: #aac1a8;
  color: #426347;
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.journal-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fffaf4f2;
  backdrop-filter: blur(12px);
  border: 1px solid #ded3db;
  border-radius: 15px;
  padding: 20px;
}
.journal-entry.discovered {
  border-color: #bdd0b8;
}
.journal-entry-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #705a70;
}
.journal-entry-top > span:first-child {
  letter-spacing: 1px;
}
.journal-entry.discovered .journal-entry-top > span:last-child {
  color: #426347;
}
.journal-emblem {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 24px 0 9px;
  border: 1px dashed #c6b4c9;
  border-radius: 50%;
  color: #91769a;
  background: #f0e8f3;
}
.discovered .journal-emblem {
  background: #e9f1e2;
  border: 1px solid #bdd0b8;
  color: #5b8063;
}
.journal-entry h4 {
  font: 500 23px var(--display);
  margin: 6px 0 10px;
}
.journal-entry p {
  font-size: 14px;
  color: #705a70;
  line-height: 1.9;
  margin: 0 0 20px;
}
.journal-entry-bottom {
  margin-top: auto;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.journal-entry-bottom small {
  font-size: 12px;
  color: #705a70;
  line-height: 1.7;
}
.journal-entry-bottom button {
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-size: 12px;
  color: #4b7054;
  font-weight: 900;
  flex-shrink: 0;
}
.journal-entry-bottom svg {
  width: 13px;
  height: 13px;
}
.explorer-relic {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: calc(var(--col) * 12.5%);
  top: calc(var(--row) * 12.5%);
  width: 12.5%;
  height: 12.5%;
  border: 2px dashed #a87e3e;
  border-radius: 8px;
  background: #ffdb694d;
  box-shadow:
    inset 0 0 12px #ffd57488,
    0 0 9px #e1ac6244;
}
.explorer-relic svg {
  position: absolute;
  right: -4px;
  top: -6px;
  width: 18px;
  height: 18px;
  padding: 2px;
  color: #886129;
  fill: #fff3bd;
  background: #fff4c9;
  border-radius: 50%;
}
.explorer-relic.found {
  border-style: solid;
  border-color: #86a27a;
  background: #b9db9755;
}
.campaign-discovery {
  text-align: left;
  margin-top: 18px;
  padding: 15px 17px;
  background: #fffaf4ed;
  border: 1px solid #decda9;
  border-radius: 12px;
  backdrop-filter: blur(12px);
}
.campaign-discovery > strong {
  display: block;
  font: 500 19px var(--display);
  margin-bottom: 7px;
}
.campaign-discovery p,
.campaign-discovery details {
  font-size: 13px;
  line-height: 1.8;
  color: #705a70;
}
.campaign-discovery summary {
  cursor: pointer;
  color: #886129;
  font-weight: 800;
}
.campaign-discovery button {
  margin-top: 10px;
  font-size: 13px;
}
@media (max-width: 1100px) {
  .lab-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
  }
  .lab-notebook {
    grid-column: 1 / -1;
  }
  .explorer-header {
    flex-wrap: wrap;
  }
  .explorer-header nav {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .explorer-door {
    align-items: start;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
  }
  .lab-intro {
    align-items: start;
    flex-direction: column;
    gap: 15px;
  }
  .lab-layout {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 13px;
  }
  .explorer-surface {
    padding: 15px;
  }
  .lab-colors img {
    width: 23px;
    height: 23px;
  }
  .lab-actions .primary-button,
  .lab-actions .explorer-back {
    width: 100%;
  }
  .lab-candy {
    padding: 2px;
  }
  .journal-seal {
    width: 120px;
  }
  .explorer-intro h3 {
    font-size: 32px;
  }
}
@media (max-width: 540px) {
  .explorer-header {
    gap: 16px 8px;
  }
  .explorer-header h2 {
    font-size: 24px;
  }
  .explorer-header .eyebrow {
    font-size: 12px;
    letter-spacing: 0.8px;
  }
  .explorer-back {
    padding: 10px;
    font-size: 12px;
  }
  .explorer-header nav button {
    font-size: 13px;
    padding: 10px;
  }
  .explorer-door-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .explorer-door-actions button {
    flex: 1;
    padding: 11px;
    white-space: nowrap;
  }
  .explorer-door > div:first-child {
    gap: 12px;
  }
  .explorer-door h2 {
    font-size: 22px;
  }
  .lab-layout {
    display: flex;
    flex-direction: column;
  }
  .lab-workbench,
  .lab-notebook,
  .lab-experiment {
    width: 100%;
  }
  .lab-experiment {
    order: 2;
  }
  .lab-notebook {
    order: 3;
  }
  .lab-workbench {
    padding: 15px;
  }
  .lab-workbench h4 {
    font-size: 21px;
  }
  .lab-workbench > p {
    margin: 5px 0 12px;
  }
  #labPalette {
    margin: 14px 0;
  }
  .lab-colors {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lab-colors button {
    padding: 5px 2px;
  }
  .lab-colors img {
    width: 27px;
    height: 27px;
    max-width: 100%;
  }
  .lab-specials {
    grid-template-columns: 1fr 1fr;
  }
  .lab-specials .lab-tool {
    padding: 8px 5px;
    font-size: 12px;
    gap: 5px;
  }
  .lab-specials .special-sample {
    width: 22px;
    height: 22px;
  }
  .lab-board-frame {
    padding: 7px;
    border-radius: 14px;
  }
  .lab-board-top {
    margin-top: 10px;
  }
  .lab-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .lab-actions .primary-button {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .journal-grid {
    grid-template-columns: 1fr;
  }
  .explorer-intro {
    align-items: start;
  }
  .explorer-intro h3 {
    font-size: 29px;
  }
  .explorer-intro p {
    font-size: 14px;
  }
  .journal-seal {
    width: 76px;
    padding: 14px 7px;
  }
  .journal-seal svg {
    width: 25px;
    height: 25px;
  }
  .journal-seal strong {
    font-size: 30px;
  }
  .journal-seal small {
    font-size: 15px;
  }
  .journal-seal > span {
    font-size: 12px;
    text-align: center;
  }
  .journal-entry {
    padding: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lab-candy {
    transition: none;
  }
}
/* Keep the notebook's headings and metadata out of narrow side-by-side columns. */
.explorer-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 20px;
}
.explorer-header > div,
.journal-entry,
.lab-workbench,
.lab-notebook {
  min-width: 0;
}
.explorer-header nav {
  min-width: 0;
}
.journal-entry-top {
  flex-wrap: wrap;
  row-gap: 8px;
  line-height: 1.5;
}
.journal-entry-bottom {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 14px;
  border-top: 1px solid #e9dfe3;
}
.journal-entry-bottom > small {
  flex-basis: 100%;
}
.journal-entry-bottom button {
  min-height: 32px;
}
.lab-actions {
  gap: 12px;
  margin-top: 24px;
}
.lab-help {
  margin-top: 18px;
}
.lab-workbench > p {
  margin: 8px 0 18px;
}
.lab-notebook p {
  margin: 12px 0;
}
.lab-room-label {
  margin-top: 22px;
}
.lab-notebook .lab-save-note {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #e7dce2;
}
@media (min-width: 1101px) {
  .lab-layout {
    grid-template-columns: 230px minmax(0, 1fr) 250px;
  }
}
@media (max-width: 1100px) {
  .explorer-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
  }
  .explorer-header nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    width: 100%;
  }
  .explorer-header > .explorer-back {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}
@media (max-width: 760px) {
  .explorer-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .explorer-intro > div:first-child {
    width: 100%;
  }
  .journal-seal {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    border-radius: 14px;
    padding: 16px 18px;
  }
  .journal-seal svg {
    margin: 0;
    flex-shrink: 0;
  }
  .journal-seal > span {
    text-align: left;
  }
  .explorer-door > div:first-child {
    align-items: flex-start;
  }
  .explorer-door-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}
@media (max-width: 540px) {
  .explorer-header {
    gap: 18px 10px;
    align-items: center;
  }
  .explorer-header .eyebrow {
    line-height: 1.5;
  }
  .explorer-header > .explorer-back {
    padding: 10px;
    white-space: nowrap;
  }
  .explorer-header > .explorer-back > svg {
    display: none;
  }
  .explorer-header nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .explorer-header nav button {
    flex-direction: column;
    justify-content: center;
    padding: 10px 6px;
    gap: 6px;
    line-height: 1.4;
  }
  .explorer-door-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .explorer-door-actions button {
    width: 100%;
    min-height: 44px;
  }
  .journal-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .journal-filters button {
    border-radius: 10px;
    padding: 10px 12px;
    line-height: 1.5;
  }
  .journal-filters button:first-child {
    grid-column: 1 / -1;
  }
  .journal-entry {
    padding: 22px;
  }
  .journal-emblem {
    margin-top: 18px;
  }
  .journal-entry h4 {
    line-height: 1.25;
  }
  .journal-entry p {
    line-height: 1.75;
  }
  .lab-specials .lab-tool {
    min-height: 48px;
    gap: 8px;
  }
  .lab-board-top {
    align-items: flex-start;
    flex-wrap: wrap;
    line-height: 1.5;
  }
  .lab-actions {
    margin-top: 24px;
    gap: 12px;
  }
}
.explorer-door > div > svg {
  flex-shrink: 0;
}
@media (min-width: 541px) and (max-width: 1100px) {
  .explorer-door {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .explorer-door > div:first-child {
    align-items: flex-start;
  }
  .explorer-door-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}