html, body {width: 100%; height: 100%}
*, *::before, *::after {cursor: url("assets/images/cursor.png") 4 4, auto !important}
body {
  margin: 0;
  background: black;
  overflow: hidden;
  font-family: monospace
}

.scene {
  position: relative;
  width: 100%; height: 100vh;
  background: black;
  overflow: hidden;
  image-rendering: pixelated;
}
@supports (height: 100dvh) {.scene {height: 100dvh}}
.scene {height: var(--vh, 100dvh)}

.mikewrap {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(5);
  width: 62px; height: 59px;
  image-rendering: pixelated;
  cursor: pointer
}
.mikesprite {
  position: absolute;
  image-rendering: pixelated;
  display: none
}
.mikeidle {
  left: 0; top: 0;
  display: block
}
.mikebashful {left: 5px; top: 2px}
.mikedroop {left: 5px; top: 1px}

.mikewrap.reacting .mikeidle {display: none}
.mikewrap.reacting.bashful .mikebashful {display: block}
.mikewrap.reacting.droop .mikedroop {display: block}

/*//////////////////////////////////////////////////////////////////////*/

.dwbox {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(460px, calc(100vw - 24px)); height: 130px;
  padding: 26px 36px;
  background: black;
  display: none
}

.dwbox.open {display: block}

.dwborder {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.dwcorner {
  position: absolute;
  width: 32px;
  height: 32px;
  image-rendering: pixelated
}

.dw-tl {top: 0; left: 0}
.dw-tr {top: 0; right: 0; transform: scaleX(-1)}
.dw-bl {bottom: 0; left: 0; transform: scaleY(-1)}
.dw-br {bottom: 0; right: 0; transform: scale(-1,-1)}

.dwedge {
  position: absolute;
  image-rendering: pixelated;
  background-size: 100% 100%;
  background-repeat: no-repeat
}

.dw-t, .dw-b {
  left: 32px;
  right: 32px;
  height: 32px;
  background-image: url("assets/images/textbox_top.png")
}

.dw-l, .dw-r {
  top: 32px;
  bottom: 32px;
  width: 32px;
  background-image: url("assets/images/textbox_left.png")
}

.dw-t {top: 0}
.dw-b {bottom: 0; transform: scaleY(-1)}
.dw-l {left: 0}
.dw-r {right: 0; transform: scaleX(-1)}

.dwcontent {
  position: relative;
  height: 100%
}

.dwline {
  display: block
}

.choicelist {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.choicerow {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer
}

.choicesoul {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  visibility: hidden
}
.choicerow.selected .choicesoul {visibility: visible}

/*//////////////////////////////////////////////////////////////////////*/

.drline {
  display: inline-block;
  white-space: nowrap
}

.drglyph {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: var(--gs);
  height: 28px
}

.drglyph::before {
  content: ""; position: absolute; top: 0;
  left: var(--go); width: var(--gw); height: var(--gh);
  background-color: white;
  -webkit-mask-image: var(--atlas, url("assets/fonts/fnt_main.png"));
  mask-image: var(--atlas, url("assets/fonts/fnt_main.png"));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: var(--gp);
  mask-position: var(--gp);
  image-rendering: pixelated
}
.drglyphmissing::before {display: none}