@font-face{
    font-family: 'Determination Mono'; font-style:normal; font-weight:400; font-display:block;
    src:url(data:font/woff2;base64,d09GMgABAAAAABN4AA0AAAAAUiAAABMfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGiYGYACHZhEICvxw3kcBNgIkA4gEC4QEAAQgBYhxB4ZGGwtARUZuiiZMS0SFqo2oEi20+P+WQEWuG9LuBwVbEUrQrEWKFTIaMyNvJaDcHk/yLM0u6F7Fe9PAKzd2n/Q5yy0uabjup5+KKK7IVBAdoh2OWlA59F71CI19kgv//OdV9/0k1YDSQ616mQG0A5U5kLQS6u/X2jsx/7snuvL31HBNYhatka0xXXQ6CUL1EMH//7V2sbwhcc5P4BPSuqD2F94IMn/HMGk0C8lKIRLNSnPn4fn74bnvzaNxbdWgBR5tGUDVwKMBpUaRb/Z5eG99JJNCIhnRuuLuUUS3HXpMQjiGgCArkSD6g2se46O9tcUyWyvodNG4ts5mj6elpQK7PCcByFFd++FREv2fPfRTlFGnYg9hjCqCMKaYEUYYO99d/6CFl+KsY+vZGlug4Bm4+sK2sK1s999uep/uve3LbTcP9O2+80nAkbZyP0vTwIpiCIT6v6Um1Vhal3Slw6q0/nivDFjzZ2esGY3W9jqyJblcqWX/37VPHulKLQSkVxSagyEgNChheTwI5IUdACC2yQKvZUjSRMqvY0yzxKzfGksJnICIeCJRRGI3RLBNPItZpMIfth0CBHCj9ccD4OrOlBdXHK7FioBIIJkbHyGBsAEDiIwtYzSNQ6jl50rgGDUZnxfbMvooXQYQzrNoPNKZgx8r5NmL4WV/u/V4CQNgDuUT4OIBDmABJQDhoEoVAZhnLASUIOC+v1SpARX4lWEYZtsW2+1zUNChDFiLZp04Ikyat57e0299KToRiQKIRTl0Q5CBiYqZypn//4Dr2mrb7HLA0VAqHdasSYcBQ3ST5qynt/RRD1Uiq6acTdNfYNvYyFBfT1telAHHMEZBerVq5P39/V9xjxtc4gIHc/zx7Bk3/S7EgZFULTLnOrcAw9C1ZfdZCVoBq8EW0A7YBraDHsAusA/0Ag6Ag6A/cBQEw0BQJCgGNFB6oIyAI1DZGjhGVdVqgeNQA20YOAk10+aB01CL8y0DZ6E2QW0D56FuQd0DF6EB38BlamgcFrgCzQDXaM7oWXAd5p4+Bjfh0lKA+3ArtQqA93DrYiMAH+G2gu/udoIfdIfiMAA/ce/Bb89tBH+80AT464VmwD8Wnm5nAP6Lr9aCsEDCgIyxP68Elu0EQlJ0T9Y9b/9hBOn1+QPBUDgSjVE0w2Iunkim0plsLl8olsqVQDAUjkRj8UQylc5kcw2NTc0trW3tHZ1d3T29ff0DHPMHS6LGaPe4vX5fIBQJR2OJeDKVyWXzxUK1Uqv/1qdJfd2+Ihe/NxeweAY9od0KAHTewMYDOzWGM3TZfJs8nFuZvF6ur/epFPvf/P7/83Xt73ud8KeCQqmS6/Qw6cJmGX4d4ObvjrpZAyjIEAFEXCClC/FHVe+l5h416AUJqLYIZLkIqBRdn8x0qYXgeaHe6aotPDaTUI+Kxnqa43lvFOBBe89aIS2yWbFSHzxFYaCL/PHUUkrmjhTIE5ICsVA2qIsilOs26qMpMfK2VBI9e6KGi3+6P7YEUASw8UXZ1XTzGxHX9FYKncEC0nvHym8RsMAF83XX4a7D7QXOec8UH2lNTObRwu61udv47N5Gj7JZQfGZRZSLLLIwLNIDBNVQYqCnpdt7W3QMka7SIH5U5HWmkFq+V929UPmZNkA6MbGO0goOo99v024yfUf0teB88qDyJm3eDQ7u/xxeD9N6zcHbptkBjlV/tGChL93inTYTaVC4Hu3+P8zAC8vMAzpYhXiciPH8g453qdY5/H7VuXCtRz3EBW8zj+6d28M1mPO5z/Nrf/Svp3SlJppCyin8Mk0aokVDgtggLtwQxMPl9OXGLDxQAALfQqF/0eYKqgeHtIfsrqa+M/VnUQarF9APwwfIF4PJ+KK6Iy7tlg7jRThwD0D8hYkPzm9PL88X3HCY0UnstN3hNkC9Ha4w2c65xRhsR4i+tVTZr8drlWS9eoGMc5kwZrtLFqPSQ5LREKJ0zGmovEeSAjFXKw/OGehi7cDUVWEh0Z9qzYZF8MBL5d8Fc2fDqmwQFErT01TAHNJi2XK4aAxYaOBsAxYWmTPivAgWDtLzskqb41Z4VztBlLelhIaJRjtCW442oPC6+nDqImjjDBatnuhNzlbnzGGbbA7ExKsAdwamXU0NfG1sOKu4xMHVIJQURmd1h9NFOR8MEx4trCAoHhBQFRYKETA3296MKs3JRam32gzxDVsRDqIA4roFHuvvppbC17FRiJv0qYRzSDHdoULE96xw5AOKhjYXb/5WHcqeSp9vqYPJxM88mF3opcVsDKYUhJlVyMkJrgI3PIx+WS1uVGFYFZYamNGJlIVgevgIie5hmP0I/WJMYfCAEL6wqE55X9zJG9cVxTlE7Zmd3iu6F1vxbehYLlquCi+LiJHjtotg6H7Bwi/A3oGBoODS6TJ5hvLDQrlOtmksMhguN1piONW6pnUAWTCR3PcyqpkQreWRaOZ9MLy7AQLAdENCUiKRLAhU6EbwmfNbtA2OaCGDLQbSDfhbdTQm1UjvG/NVAIgEFE1ekR4Kn9ea8p7CTwrgSSBwnHtOxUxg7GAEe0Xc/QJ1GkzHVfQHeBLEOx08gA8AYhD77uNgcZsD6Qdk7tnwC/FhnbPSnxAj86RIB9fsn9PSUKrlcU7vtoJtRILTD/PMx9ksz4vpO9SU4TOpaJPT9W8DTQappl7Kk43M4fbYDlGDnSIZ2fs2SPO4FzzwypS9pNS45ymREg2iAooTMxQLUT3QS6Bdy5syLc0ZqRgTqFwJ3lvWsiNHT6GGU47vHuJI1xBxXd1CAJuhiFKSfdGOOT5BhMQLAUpbIWJRL2p74HI5la7847Z4xZUMC447E81NIuX8cZqUHpVR34+J4xXK0247g7RoAqs+SosS1ZFWyZMOILDrT4E1KcuIFKm8zpN3CnKW1L1s+9SyVSitJPEjjWbwqgzFExrzeCiFfEJzz3jH80gvD/g5e+BogLf20vRo5pb9RaHxOa3LGdBEQKii8QUaSfRsOsSOzrCEZ3H2EmKP2l6q/dS28IJ28JANKEepkJcuugqXdo4CkeZI7Wyx/ameZNI7qle2ufS0DzLk8bvgBPu7BDq3d8W38z02y5AosDFCI3klkmB7bIboes6ARg1EuwnnDwBnnK4e7V1XGdcLc1ShSEdiSkski3TtfCJ5mTzDfMyX8YRlA+wukph9S4iJM9INJiH3MKRvyCy30ARHZCoaRbJg18aPjdlsT5TZksiMCRjvPFLgE9o5IwklGWXqynBNB0r2NAdQM17GLdMokVFOTp4APhKkf40SmDbTGp7lmgXWuq8NslWO/KVRI3OKSxfoYZ1nqqnmd3MQOi6cqThPWNo6ba+x/yysDrYy2bslsReS/BdMSXLwRiN7vdshOFnqV4eeOBi4VzhtRxZu+tUoY+dO8nOg2oPTFxo0aaUyDR8iKqtFLgKTs3SnjPdg/jLHrzz5K7WjNfInZalhhsblVws4ONWXnySubE7TiVvTGe+jBKSZSpxdKmuR9+Y4i2KkDUaw/znQZhy9/6zs1Jz5nnmfeWYZ3mMRs+4gKLBKvHSo4kiHisoqZe2ZnMciv2RdXWbhWQkHIfHz1BoZoF+xswqir2HTIpJq9e4VmPXH02ZGfgBlxxIwK7knXOyOXvYqVH663Kn9LRrPi06+8D0zBY5hr8/9KVvrzw/08GZy4qS+hVD/wX5F17AFvC9HqpjlHS0/PLK6o7OVhz9mSBgEB7vXs8U3Uu1t754BnE8tLdZ6YrXojotrSwDAqLKBhMVp0fm9lUEUqJTfa8LNLH4mfyxeh49BZXLweAVom6xOnm9Rnxo4bOsbXiKTUkKFVUlaGm8KhLLUJsFldDTtx9OwPM0sgOyFB5ynOXfFp5IakXNUTTTEUg6KYQ65KgRZI1/2aggn/M06bqJhskIpBwCxsOYRuQmsZkCE8SOwE8Sh71z1Ybq7omMOb8t4GrLEjFi6TgV26GzyIwgYPZKjCdQmM3f2R0zII+odcMfgl1S2dItJkeWDM5Rr794/dkhswta8yPWT77nCSUBF/k61fLvMJVvRApdBHRNtCm0fwiUtI7alHnqFXZgmf1pBZBh+G9BlrKQ/6RUUmAUjUAoFO09GNOgRXkXD6IEgyKzZZmabTGGT5Eik5uOAVL2MeXhr7REp08w6GatoyHQ61k9rukXD7w1APKEYF+NaaFXsB3MqMUUfAWAXSSaMYANaIk7SxSyPtA59XP2pSD372UHffaOctvf4lvXm3+IP2pw/grL42cHi45+chiSbmkipnEwHxziYkqxSW4O1/2XprA2Ys1vce0uncH1hhrpRxFSVWTENjq1GXxRhGO8Tr/Fek9N/I89ZFXjJ1ix6fQp+R0Gg7j+XO72Iaxx0lTVVscBt5oUnkL6eVkC8/E6IxKuhh2JoY6n7I5d8F5Axpf2Jr5AlUqnfQVd3n8mh+4yFgnqC0235XpX47jM5zhrCh0AybJMixXeAp1qRxVG1hsaATtDKzjjAM32kxbHAjf6tiEyBcqxSlJgF8U+MbWr2NWgXRRObgKDeHDnBVb0mmjjUJ1JhEEvpnCAaSmu1xZ07Ha4qUJy10ScYpzS/U38zgY17MDJcE8LJRzSpdQqHZG9xj2vo3BFcEQHrNQs3ir03380MPYchOXXojhxnNaXBmvG4jQShZApxniMjIbr39MfhVrDIuA2k5geDimGhEC4uj4x82tyzGoY3L6MD8GaO2L7TSmjjscCy58Z27hFh1juyf4T1WT7U9cJ3WNGRrdPIfH0Y+spTSxASd+UOVqU6GZt34aW3xaVlyc2sWXSBit+piYUwyK4mzMq3eSyMd3hxyu5fo+/CnNvf3KqEm24jKUY9weMSh/PahLbU7md61jyXquAstzVy/r8DFOjYJ75d13Ui+fOhcz1KuiOIb6SeL2MwZ8a7h2M4lzrcXhbxDoMWoVeYyOqT8MnT+XyfcHfhfMGInwIVvW2SRJwZBMz2N/nxm1Z2xR3inlVMSLT2+/AECaH+PCfKqOMID1LvOu9f8gvGxuY15FiMzvY/dhk0hLFlmKA+gsuoH2+azZsii5j8qPIEt8w2iG62H9edX1fKpAx0y78R9yeWDffss3+Si60jHKs9FBGfJX855O8sxSIeCg68EHslw4koNU0QM6I/QudEaZyeDhot7FXVmEniMX7svzoxgdhSsA069gixrbCgokIM1ZRXxHopm4vhF0RajFce6FiarQgQ5J9M1Y+53J+azX/3/LlLAd7cvHMEp+zmSiD0/w2GvO03ksM6RlKsLEPPbhwMNeY/E48dYx7D85j/XHreMaTpUvLIJXjMOHa87VisB2gQJsx/JtDSG7q2WSjG9vDfrw2TeVgA1S6ficGMZCQqx9o65l+Bbf3adRj/SR7LtygCXcxaXGQTYgAhwAMMAqLZQgDAvtgsciI5jeYMIcbPWZRL/zmb5NydcwizBn19gMR8x0J2GKhHYOREiRTNGaJNj5xFm7ScsymRiZxDfJ79rQIUySfyUCZpbEy3AmLibIKJCZlSDeGwWFkIdcliCdMsU9ENUbZOzQrWzB4mUd3TMcimfZHOIpFTAWchOSAFxrUC045biUU1ZNOPmTSF6UA4mYbr11EzmTBjazW1jRntIHQLabOtb2ZUQpeNdNJd47KmseW3EpOdHUVmwf7C1FkrmLKrqlDtUW7WFui2mlE57p5xdBjmBpcWes2Ug0weGiCs+oYmwiQJ5LVNaja7O7gamqomXDQl1wIA2Bl1lQuLKB2xJDnwL/5rSWjTt6sW7CAua7y/taxpkm1LciALP8ttkWiiq6tTrzGU5Jw+3F7XzxaYXF4vOiwfpRwGBkT+tWiTmJQAKo0+9NSMjUjAZ9iw2binTmCG984DAdLV6X6mYMOUBxogCscozoQHQxhMEp9iHphtUtBmK9CcRXJj1gZRbO0sCsahNm01CW5E6HSLmAoxjj7zmqCt+XxWlsIcdYD+3zB006ScwMo/hIEcSrO4JmXFWtwAw9+bnC8Yj12WxA4kevA/LqGEEU4EkUQRTQyxdPQMjEzMLKxs7BycXNw8EALJy8cvICgkLCIqhkJjsDBOXEJSSlpGVk5eQVFJWUVAUEhYRFRMXEJSSlpGVk6DRk2atWjVpl2HTl269ejVp98AHsWsNMpoc7wzxhQTLbbeqhAwwUgzTTbXOCc9scQGK2x23llbtDJoVRuH2tpzwVWXXHbFe+1cuua6rdp7cOqOW27r4Npn43WiGTFmlG5Dd4YCk8VhGzfhygDTpsyYM2vHcsPNWzTCJ18cEJRsOQoohLshVRjbbA+5InjldSgVpWjFcNAbb61xz3MPPfLYM/c9DS0dPQMjEzMLKxs7BycXN09Pdtpjr1OBerHb6SA6csJYG51xxNEgOwsvH7+A4No5XF1g2SobGG4QN3wXdHBVPG1kGjMzma7MaqYvs5kZSG/3igZ5gl7RjsGr5yiFr3vY47y4l/CSXspLexkv61W9mlf3GrzGsEklcuDTCcXppCpuEt5kA2GTUyksEjaAqKF0KqEPJMU77WoimwAAAA==)
    format('woff2')
}

:root {
  --black: #000000;
  --path: #432044;
  --path-light: #542752;

  --tree-trunk: #28182d;
  --tree-dark: #87005f;
  --tree-purple: #ad007f;
  --tree-pink: #c90076;
  --tree-red: #e51b3e;
  --tree-red-light: #ed2545;

  --dialogue-border: #eeeeee;
  --dialogue-shadow: #777777;

  --dialogue-size: clamp(18px, 2.6vw, 34px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-variant-ligatures: none;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: var(--black);
}

body {
  overflow: hidden;
  color: #ffffff;
  font-family: "Determination Mono", "Courier New", monospace;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

.game-screen {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  position: relative;
  overflow: hidden;
  background: #000;
}

.room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* -------------------------
   THE PATH
   ------------------------- */

.path {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(74vw, 530px);
  height: 72%;
  transform: translateX(-50%);
  background: var(--path);

  /*
    Blocky pixel-art edges instead of a smooth shape.
  */
  clip-path: polygon(
    34% 0,
    66% 0,
    66% 13%,
    76% 13%,
    76% 38%,
    70% 38%,
    70% 64%,
    78% 64%,
    78% 100%,
    22% 100%,
    22% 64%,
    30% 64%,
    30% 38%,
    24% 38%,
    24% 13%,
    34% 13%
  );
}

/* A few hard-edged patches make the path feel more like a game background. */
.path::before,
.path::after {
  content: "";
  position: absolute;
  background: var(--path-light);
}

.path::before {
  width: 17%;
  height: 24%;
  left: 17%;
  top: 18%;
}

.path::after {
  width: 18%;
  height: 18%;
  right: 14%;
  top: 42%;
}

/* -------------------------
   TREE GIF
   ------------------------- */

.tree {
  position: absolute;
  left: 50%;
  top: 7%;
  width: min(500px, 72vw);
  aspect-ratio: 207 / 183;
  transform: translateX(-50%);
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  z-index: 3;
  image-rendering: pixelated;
}

.tree-gif {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.tree:hover {
  filter: brightness(1.08);
}

.tree:focus-visible {
  outline: 2px dashed #ffffff;
  outline-offset: 8px;
}

/* -------------------------
   DIALOGUE BOX
   ------------------------- */

.dialogue-box {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 6.5vh;
  width: min(92vw, 1080px);
  min-height: 126px;
  transform: translate(-50%, 18px);
  padding: 28px 30px 25px;
  background: #000000;
  border: 4px solid var(--dialogue-border);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 120ms steps(2),
    transform 120ms steps(2),
    visibility 0s linear 120ms;
}

.dialogue-box.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity 120ms steps(2),
    transform 120ms steps(2),
    visibility 0s;
}

/* Pixel-ish decorative corners */
.corner {
  position: absolute;
  width: 17px;
  height: 17px;
  background: #000;
  border: 3px solid var(--dialogue-border);
}

.corner-tl {
  left: -9px;
  top: -9px;
  box-shadow: 8px 8px 0 -5px #000, 8px 8px 0 -2px var(--dialogue-shadow);
}

.corner-tr {
  right: -9px;
  top: -9px;
  box-shadow: -8px 8px 0 -5px #000, -8px 8px 0 -2px var(--dialogue-shadow);
}

.corner-bl {
  left: -9px;
  bottom: -9px;
  box-shadow: 8px -8px 0 -5px #000, 8px -8px 0 -2px var(--dialogue-shadow);
}

.corner-br {
  right: -9px;
  bottom: -9px;
  box-shadow: -8px -8px 0 -5px #000, -8px -8px 0 -2px var(--dialogue-shadow);
}

#dialogue-text {
  font-size: var(--dialogue-size);
  line-height: 1.35;
  letter-spacing: 1px;
  color: #ffffff;
  white-space: nowrap;
}

.asterisk {
  margin-right: 0.45em;
  color: #ffffff;
}

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

@media (max-width: 650px) {
  .path {
    top: 18%;
    width: 92vw;
    height: 67%;
  }

  .tree {
    top: 10%;
    width: 88vw;
  }

  .dialogue-box {
    bottom: 4vh;
    width: 91vw;
    min-height: 108px;
    padding: 23px 18px;
    border-width: 3px;
  }

  #dialogue-text {
    font-size: clamp(17px, 4.7vw, 26px);
    white-space: normal;
  }

  .corner {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tree:not(.collected) {
    animation: none;
  }

  .dialogue-box,
  .dialogue-box.visible {
    transition: none;
  }
}