html,
body {
  height: 100vh;
}

body {
  background: #2a1420;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  color: #ffe3f1;

  position: relative;
}

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  /* ? Flex items don't shrink below their content's intrinsic size by
  ? default, which would silently defeat the canvas's max-width: 100% below. */
  min-width: 0;
  width: 100%;
  padding: 0 10px;
}

#pinkSpaceCanvas {
  background: #ffcfe6;
  border: 2px solid #ffe3f1;
  image-rendering: pixelated;

  /* ? Keeps the canvas at its native 720x480 game resolution (sprite
  ? positions in pinkSpace.js are all in those pixel coordinates) while
  ? letting the browser scale the rendered bitmap down to fit narrow
  ? viewports, instead of overflowing/forcing horizontal scroll. */
  max-width: 100%;
  height: auto;
}

#controlsHint {
  font-size: 12px;
  opacity: 0.6;
  margin: 0;
  letter-spacing: 0.5px;
}

#textboxContainer {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 20px);
  width: min(90vw, 480px);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

  z-index: 20;
}

#textboxContainer.show {
  opacity: 1;
  transform: translate(-50%, 0);
  /* ? Base rule sets pointer-events: none so it doesn't block clicks on the
  ? canvas while hidden -- re-enable it here so tapping to advance dialogue
  ? actually lands on the textbox instead of passing through to whatever's
  ? behind it. */
  pointer-events: auto;
}

#textbox {
  background: #1a0c12;
  border: 2px solid #ffe3f1;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  height: 70px;
}

#textboxText {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

#textboxCursor {
  animation: bob 0.6s infinite alternate;
  font-size: 10px;
  opacity: 0.8;
}

#textboxChoices.show ~ #textboxCursor {
  display: none;
}

#textboxChoices {
  display: none;
  gap: 18px;
  flex: 1;
  justify-content: flex-end;
}

#textboxChoices.show {
  display: flex;
}

.choiceOption {
  font-size: 14px;
  padding: 2px 10px;
  border: 1px solid transparent;
  opacity: 0.55;
}

.choiceOption.selected {
  opacity: 1;
  border-color: #ffe3f1;
}

.choiceOption.selected::before {
  content: "\25B8 ";
}

@keyframes bob {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(3px);
  }
}

#computerScreen {
  position: absolute;
  width: 60vw;
  height: 70vh;




  --s: 100px; /*? control the size of this design~ */
  --c1: #2a1420;
  --c2: #3b1f2e;

  --_g: radial-gradient(
    #0000 60%,
    var(--c1) 61% 63%,
    #0000 64% 77%,
    var(--c1) 78% 80%,
    #0000 81%
  );
  --_c: , #0000 75%, var(--c2) 0;
  background:
    conic-gradient(at 12% 20% var(--_c)) calc(var(--s) * 0.44)
      calc(0.9 * var(--s)),
    conic-gradient(at 12% 20% var(--_c)) calc(var(--s) * -0.06)
      calc(0.4 * var(--s)),
    conic-gradient(at 20% 12% var(--_c)) calc(0.9 * var(--s))
      calc(var(--s) * 0.44),
    conic-gradient(at 20% 12% var(--_c)) calc(0.4 * var(--s))
      calc(var(--s) * -0.06),
    var(--_g),
    var(--_g) calc(var(--s) / 2) calc(var(--s) / 2) var(--c2);
  background-size: var(--s) var(--s);

  display: flex;
  flex-direction: column;

  border: 10px solid #ffcfe6;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;

}

#computerScreen.show {
  opacity: 1;
  pointer-events: all;
}

#computerScreen button {
  background: none;
  border: none;
}

#computerScreen.locked .desktop,
#computerScreen.locked .tray {
  pointer-events: none;
}

#computerScreen .desktop {
  flex: 1;
  align-self: stretch;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
}

#computerScreen .desktopIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 4px;
  width: 100px;
  aspect-ratio: 1;

  border: 1px solid transparent;
  padding: 4px;

  color: #e588a2;
  font-family: inherit;
  font-size: 10px;
  text-align: center;
  cursor: pointer;

  border-radius: 10px;
}

#computerScreen .desktopIconGlyph {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
  transition: transform 0.15s;
}

#computerScreen iconify-icon.desktopIconGlyph {
  font-size: 4em;
}

#computerScreen img.desktopIconGlyph {
  height: 40px;
}

#computerScreen p.desktopIconGlyph {
  font-size: 4em;
}

#computerScreen .desktopIconLabel {
  line-height: 1.2;
  word-break: break-word;

  color: #ffe3f1;
}

#computerScreen .desktopIcon:hover,
#computerScreen .desktopIcon:focus-visible {
  border-color: #ffe3f1;
  outline: none;
}

#computerScreen .desktopIcon:hover .desktopIconGlyph,
#computerScreen .desktopIcon:focus-visible .desktopIconGlyph {
  transform: scale(1.15);
}

#computerScreen .spacer {
  flex: 1;
}

#computerScreen .tray {
  width: 100%;
  height: 8%;
  background: #2a1420;
  border-top: 5px solid #ffcfe6;

  display: flex;

  font-family: inherit;
  color: #ffcfe6;
}

#computerScreen .tray button:hover {
    background: #3b1f2e;
}

#computerScreen .tray button:active {
    background: #472738;
}

#computerScreen .tray #ILLogo {
  height: 100%;
  aspect-ratio: 1;

  color: #ffcfe6;
}

#computerScreen .tray #ILLogo img {
  width: 100%;
}

#computerScreen .tray #time {
  height: 100%;
  aspect-ratio: 16/9;

  font-size: 1.8em;
  color: inherit;
  font-family: inherit;
}

#computerScreen .tray #IME {
    height: 100%;
    aspect-ratio: 1;

    color: inherit;
    font-family: inherit;
    font-size: 1.6em;
}

#touchControls {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 30;

  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(3, 52px);
  gap: 4px;
}

@media (hover: none) and (pointer: coarse) {
  #touchControls {
    display: grid;
  }

  #controlsHint {
    display: none;
  }

  #textboxContainer {
    top: 25%;
    bottom: auto;
    transform: translate(-50%, -20px);

    z-index: 99;
  }

  #textboxContainer.show {
    transform: translate(-50%, 0);
  }

  #computerScreen {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100vw;
    height: 60vh;
    z-index: 35;
  }

  #computerScreen .desktopIcon {
    width: 78px;
    font-size: 9px;
  }

  .trash {
    display: none;
  }

  #computerScreen iconify-icon.desktopIconGlyph,
  #computerScreen p.desktopIconGlyph {
    font-size: 3em;
  }

  #computerScreen img.desktopIconGlyph {
    height: 32px;
  }

  #computerScreen .tray #time {
    font-size: 1.1em;
  }

  #computerScreen .tray #IME {
    font-size: 1em;
  }
}

.dpadButton {
  grid-column: 2;
  grid-row: 2;

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

  background: rgba(255, 207, 230, 0.25);
  border: 2px solid #ffe3f1;
  border-radius: 8px;
  color: #ffe3f1;
  font-size: 1.1em;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

.dpadButton:active {
  background: rgba(255, 207, 230, 0.5);
}

#dpadUp {
  grid-column: 2;
  grid-row: 1;
}

#dpadLeft {
  grid-column: 1;
  grid-row: 2;
}

#dpadRight {
  grid-column: 3;
  grid-row: 2;
}

#dpadDown {
  grid-column: 2;
  grid-row: 3;
}

/* * Helpers */

.flex  {
    display: flex;
}

.desktopColumn {
    height: 100%;
    flex-flow: column nowrap;
}