* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden;

  background: #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

body {
  overscroll-behavior: none;
}

/* ----------------------------------------
   GARDEN VIEWPORT
---------------------------------------- */

.garden {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #ffffff;

  perspective: 1400px;
  perspective-origin: 50% 50%;

  touch-action: none;

  cursor: none;
}

/* ----------------------------------------
   LARGE GRID WORLD
---------------------------------------- */

.world {
  position: absolute;

  left: 0;
  top: 0;

  width: 3600px;
  height: 2200px;

  transform-origin: 0 0;
  transform-style: preserve-3d;

  will-change: transform;

  background-color: #ffffff;

  /*
    Small grid + large grid.
  */

  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(0, 0, 0, 0.22) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.22) 1px,
      transparent 1px
    );

  background-size:
    80px 80px,
    80px 80px,
    800px 800px,
    800px 800px;
}

/* ----------------------------------------
   OBJECT WRAPPER
---------------------------------------- */

.data-paper {
  position: absolute;

  width: 520px;

  overflow: visible;

  user-select: none;
  touch-action: none;

  transform-style: preserve-3d;
}

/*
  Scaling and rotation happen on object-3d.

  The dashed box is also attached to object-3d,
  so the box scales and rotates together with
  the object.
*/

.object-3d {
  position: relative;

  width: 100%;

  aspect-ratio: var(--ratio, 1 / 1);

  transform-origin: center center;
  transform-style: preserve-3d;

  will-change: transform;
}

/* ----------------------------------------
   DASHED OBJECT BOX
---------------------------------------- */

.data-paper.is-unlocked
.object-3d::after {
  content: "";

  position: absolute;
  inset: 0;

  border:
    1px dashed
    rgba(0, 0, 0, 0.65);

  pointer-events: none;

  z-index: 1000;
}

/*
  Selected visitor object gets a stronger box.
*/

.data-paper[data-custom="true"].is-selected
.object-3d::after {
  border:
    1.5px dashed
    #000000;
}

/*
  Locked objects do not display a box.
*/

.data-paper.is-locked
.object-3d::after {
  display: none;
}

/* ----------------------------------------
   OBJECT CURSORS
---------------------------------------- */

.data-paper.is-unlocked {
  cursor: grab;
}

.data-paper.is-unlocked:active {
  cursor: grabbing;
}

.data-paper.is-locked {
  cursor: default;
}

/* ----------------------------------------
   3D OBJECT FACES
---------------------------------------- */

.object-face {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.object-face.front {
  transform:
    rotateY(0deg)
    translateZ(0.2px);
}

.object-face.back {
  transform:
    rotateY(180deg)
    translateZ(0.2px);
}

.data-svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}

/* ----------------------------------------
   MOVING METADATA TEXT
---------------------------------------- */

.marquee-row text {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-weight: 400;

  letter-spacing: 0.2px;

  dominant-baseline: middle;

  white-space: pre;

  pointer-events: none;
}

/* ----------------------------------------
   DELETE BUTTON
---------------------------------------- */

.delete-object-button {
  position: fixed;

  width: 32px;
  height: 32px;

  display: none;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0 0 2px;

  border: 1px solid #000000;
  border-radius: 50%;

  background: #ffffff;
  color: #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 21px;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  pointer-events: auto;

  z-index: 100000;
}

.delete-object-button:hover {
  background: #000000;
  color: #ffffff;
}

/* ----------------------------------------
   INSTRUCTIONS
---------------------------------------- */

.instructions {
  position: fixed;

  left: 20px;
  top: 18px;

  padding: 7px 9px;

  border: 1px solid #000000;

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  color: #000000;

  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.4;

  pointer-events: none;

  z-index: 5000;
}

/* ----------------------------------------
   OBJECT MAKER
---------------------------------------- */

.object-maker {
  position: fixed;

  left: 50%;
  bottom: 24px;

  width:
    min(
      720px,
      calc(100vw - 40px)
    );

  height: 52px;

  display: flex;
  align-items: stretch;

  transform:
    translateX(-50%);

  border: 1px solid #000000;

  background: #ffffff;

  z-index: 9000;
}

.object-text-input {
  min-width: 0;
  flex: 1;

  height: 100%;

  padding: 0 18px;

  border: 0;
  border-radius: 0;

  outline: none;

  background: transparent;

  color: #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 15px;
}

.object-text-input::placeholder {
  color: #000000;
  opacity: 1;
}

.make-object-button {
  flex: 0 0 auto;

  min-width: 140px;
  height: 100%;

  padding: 0 18px;

  border: 0;
  border-left: 1px solid #000000;
  border-radius: 0;

  background: #ffffff;
  color: #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.08em;

  cursor: pointer;
}

.make-object-button:hover {
  background: #000000;
  color: #ffffff;
}

.make-object-button:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ----------------------------------------
   DEBUG
---------------------------------------- */

#debug {
  position: fixed;

  left: 16px;
  bottom: 88px;

  max-width: 520px;

  padding: 6px 8px;

  color: red;

  background:
    rgba(
      255,
      255,
      255,
      0.9
    );

  font-size: 12px;
  line-height: 1.4;

  pointer-events: none;

  z-index: 9999;
}

/* ----------------------------------------
   MOBILE
---------------------------------------- */

@media (max-width: 600px) {
  .instructions {
    left: 12px;
    top: 12px;

    max-width:
      calc(100vw - 24px);

    font-size: 8px;
  }

  .object-maker {
    bottom: 14px;

    width:
      calc(100vw - 24px);

    height: 48px;
  }

  .object-text-input {
    padding: 0 12px;

    font-size: 13px;
  }

  .make-object-button {
    min-width: 108px;

    padding: 0 10px;

    font-size: 9px;
  }

  .delete-object-button {
    width: 34px;
    height: 34px;

    font-size: 23px;
  }
}
/* ----------------------------------------
   GARDEN CARE TOOLBOX
---------------------------------------- */

.care-toolbox {
  position: fixed;

  top: 24px;
  right: 24px;

  width: 230px;

  border: 1px solid #000000;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  z-index: 2000000;

  pointer-events: auto;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

.care-toolbox-header {
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-left: 14px;

  border-bottom:
    1px solid #000000;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.1em;
}

.care-toolbox-collapse {
  width: 42px;
  height: 100%;

  padding: 0;

  border: 0;
  border-left:
    1px solid #000000;

  background: #ffffff;
  color: #000000;

  font-size: 18px;

  cursor: pointer;
}

.care-toolbox-collapse:hover {
  background: #000000;
  color: #ffffff;
}

.care-toolbox.is-collapsed {
  width: 165px;
}

.care-toolbox.is-collapsed
.care-toolbox-body {
  display: none;
}

.care-toolbox-body {
  display: flex;
  flex-direction: column;
}

.care-tool {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 4px;

  padding: 13px 14px;

  border: 0;
  border-bottom:
    1px solid #000000;

  background: #ffffff;
  color: #000000;

  text-align: left;

  cursor: pointer;
}

.care-tool:hover {
  background: #f2f2f2;
}

.care-tool.is-active {
  background: #000000;
  color: #ffffff;
}

.care-tool strong {
  font-size: 12px;

  letter-spacing: 0.09em;
}

.care-tool small {
  font-size: 11px;
  line-height: 1.35;

  opacity: 0.7;
}

.care-tool-done {
  width: 100%;

  padding: 12px 14px;

  border: 0;
  border-bottom:
    1px solid #000000;

  background: #ffffff;
  color: #000000;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.09em;

  cursor: pointer;
}

.care-tool-done:hover {
  background: #000000;
  color: #ffffff;
}

.care-tool-status {
  min-height: 52px;

  margin: 0;

  padding: 11px 14px;

  font-size: 11px;
  line-height: 1.4;

  color:
    rgba(
      0,
      0,
      0,
      0.65
    );
}

/* ----------------------------------------
   CARE CURSORS
---------------------------------------- */

body.care-mode-active
.data-paper {
  cursor: crosshair;
}

body.care-mode-water
.data-paper {
  cursor: cell;
}

body.care-mode-weed
.data-paper {
  cursor: not-allowed;
}

body.care-mode-tend
.data-paper {
  cursor: help;
}

/* ----------------------------------------
   CARE STATUS
---------------------------------------- */

.data-paper[data-care-status]::before {
  content:
    attr(data-care-status);

  position: absolute;

  left: 0;
  bottom: -25px;

  padding: 4px 6px;

  border:
    1px solid #000000;

  background: #ffffff;
  color: #000000;

  font-size: 9px;
  line-height: 1;

  letter-spacing: 0.08em;

  pointer-events: none;

  z-index: 200;
}

/* ----------------------------------------
   WATER EFFECT
---------------------------------------- */

.data-paper.is-being-watered
.object-3d {
  animation:
    garden-water-growth
    700ms
    cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );
}

.data-paper.is-watered
.marquee-row text {
  letter-spacing: 0.5px;
}

@keyframes garden-water-growth {
  0% {
    filter: blur(0);
  }

  35% {
    filter: blur(1.5px);
  }

  65%,
  100% {
    filter: blur(0);
  }
}

/* ----------------------------------------
   WEED EFFECT
---------------------------------------- */

.data-paper.is-under-revision
.marquee-row:nth-child(3n)
text {
  opacity: 0.22;

  text-decoration:
    line-through;
}

.data-paper.is-under-revision
.marquee-row:nth-child(4n)
text {
  opacity: 0.45;
}

/* ----------------------------------------
   OBJECT CARE NOTE
---------------------------------------- */

.object-care-note {
  position: absolute;

  left: 12px;
  top: 12px;

  max-width: 210px;

  padding: 8px 10px;

  border:
    1px solid #000000;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  color: #000000;

  font-size: 11px;
  line-height: 1.4;

  pointer-events: none;

  z-index: 500;
}

.object-care-note::before {
  content: "CARE NOTE";

  display: block;

  margin-bottom: 5px;

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 0.1em;
}

/* ----------------------------------------
   TEND DIALOG
---------------------------------------- */

.care-note-dialog {
  position: fixed;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    rgba(
      255,
      255,
      255,
      0.52
    );

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  z-index: 3000000;
}

.care-note-dialog.is-open {
  display: flex;
}

.care-note-form {
  width:
    min(
      460px,
      100%
    );

  border:
    1px solid #000000;

  background: #ffffff;
}

.care-note-heading {
  padding: 14px 16px;

  border-bottom:
    1px solid #000000;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.1em;
}

.care-note-label {
  display: block;

  padding:
    16px 16px
    10px;

  font-size: 13px;
  line-height: 1.45;
}

.care-note-input {
  display: block;

  width:
    calc(
      100% - 32px
    );

  min-height: 120px;

  margin:
    0 16px 16px;

  padding: 12px;

  resize: vertical;

  border:
    1px solid #000000;

  border-radius: 0;

  outline: none;

  background: #ffffff;
  color: #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 13px;
  line-height: 1.45;
}

.care-note-input:focus {
  outline:
    2px solid #000000;

  outline-offset: 2px;
}

.care-note-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  border-top:
    1px solid #000000;
}

.care-note-cancel,
.care-note-submit {
  height: 46px;

  border: 0;

  background: #ffffff;
  color: #000000;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.08em;

  cursor: pointer;
}

.care-note-cancel {
  border-right:
    1px solid #000000;
}

.care-note-cancel:hover,
.care-note-submit:hover {
  background: #000000;
  color: #ffffff;
}
/* ----------------------------------------
   FLOWER CURSOR
---------------------------------------- */

html,
body,
.garden,
.world {
  cursor: none;
}

.data-paper,
.data-paper.is-unlocked,
.data-paper.is-locked,
.data-paper:active {
  cursor: none;
}

.flower-cursor {
  position: fixed;

  left: 0;
  top: 0;

  transform:
    translate(
      -50%,
      -50%
    );

  color: #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 28px;
  line-height: 1;

  pointer-events: none;

  user-select: none;

  z-index: 9999999;

  will-change:
    left,
    top,
    transform;
}

/* 鼠标移动时留下的小花 */

.cursor-flower-trail {
  position: fixed;

  left: 0;
  top: 0;

  color: #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 16px;
  line-height: 1;

  pointer-events: none;

  user-select: none;

  z-index: 9999998;

  animation:
    cursor-flower-fade
    900ms
    ease-out
    forwards;
}

@keyframes cursor-flower-fade {
  0% {
    opacity: 0.9;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1)
      rotate(0deg);
  }

  100% {
    opacity: 0;

    transform:
      translate(
        -50%,
        35px
      )
      scale(0.25)
      rotate(100deg);
  }
}

/* ----------------------------------------
   FLOWER SHOWER
---------------------------------------- */

.flower-shower-particle {
  position: fixed;

  left: 0;
  top: -50px;

  color: #000000;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1;

  pointer-events: none;

  user-select: none;

  z-index: 9999997;

  animation-name:
    flower-shower-fall;

  animation-timing-function:
    linear;

  animation-fill-mode:
    forwards;

  will-change:
    transform,
    opacity;
}

@keyframes flower-shower-fall {
  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        -40px,
        0
      )
      rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  88% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--flower-drift),
        calc(100vh + 120px),
        0
      )
      rotate(
        var(--flower-rotation)
      );
  }
}

/* 点击时鼠标小小放大 */

.flower-cursor.is-clicking {
  transform:
    translate(
      -50%,
      -50%
    )
    scale(1.45)
    rotate(20deg);
}

/* 输入框和按钮仍使用正常鼠标 */

.object-maker,
.object-maker *,
.care-toolbox,
.care-toolbox *,
.care-note-dialog,
.care-note-dialog * {
  cursor: auto;
}

button {
  cursor: pointer;
}

input,
textarea {
  cursor: text;
}
/* ----------------------------------------
   FIXED ASCII GARDEN
---------------------------------------- */

.ascii-garden-layer {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;
  user-select: none;

  z-index: 0;
}

.ascii-garden-decoration {
  position: absolute;

  margin: 0;

  color: #000000;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-weight: 400;

  line-height: 0.82;

  letter-spacing: -0.04em;

  white-space: pre;

  text-align: center;

  transform-origin:
    center bottom;

  pointer-events: none;
  user-select: none;

  /*
    Keep the decorative garden behind
    the original silhouettes.
  */

  z-index: 0;

  /*
    Makes the large characters feel softer
    and less likely to compete with objects.
  */

  filter:
    blur(0.15px);

  will-change:
    transform;
}

/*
  Original objects always remain above
  the ASCII garden.
*/

.data-paper {
  z-index: 10;
}

/*
  Slightly soften decorations when they
  happen to sit beneath an object.
*/

.data-paper,
.object-3d,
.object-face {
  isolation: isolate;
}

.ascii-garden-decoration {
  -webkit-mask-image:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.98) 0%,
      rgba(0, 0, 0, 0.92) 72%,
      rgba(0, 0, 0, 0.5) 100%
    );

  mask-image:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.98) 0%,
      rgba(0, 0, 0, 0.92) 72%,
      rgba(0, 0, 0, 0.5) 100%
    );
}