/* =========================================================
   SLEIGHTERROR — TOWER
   ========================================================= */


/* ---------------------------------------------------------
   BASE / VIEWPORT
   --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  color: #eee;
}

.tower {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}


/* ---------------------------------------------------------
   RAYCASTER CANVAS
   --------------------------------------------------------- */

#tower-canvas {
  display: block;
  width: 100%;
  height: 100%;

  image-rendering: pixelated;

  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}


/* ---------------------------------------------------------
   START / PORTAL SCREEN
   --------------------------------------------------------- */

.tower-start {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  background: #050505;

  z-index: 100;
}

.tower-start[hidden] {
  display: none;
}

.tower-start__content {
  width:
    min(
      90vw,
      560px
    );

  text-align: center;
}

.tower-start h1 {
  margin: 0 0 1rem;

  letter-spacing: .18em;
}

.tower-start p {
  margin-bottom: 2rem;

  opacity: .65;
}

.tower-start__portal {
  display: block;

  width:
    min(
      70vw,
      360px
    );

  max-height: 42vh;

  margin:
    1.5rem
    auto;

  object-fit: contain;

  user-select: none;
  -webkit-user-select: none;

  pointer-events: none;
}

.tower-start button {
  display: block;

  margin:
    0
    auto
    1.5rem;

  padding:
    .75rem
    2rem;

  border:
    1px solid
    #aaa;

  background:
    transparent;

  color:
    #eee;

  font:
    inherit;

  letter-spacing:
    .15em;

  cursor:
    pointer;
}

.tower-start button:hover {
  background: #eee;
  color: #111;
}

.tower-start a {
  color: #777;

  font-size: .8rem;

  letter-spacing: .1em;

  text-decoration: none;
}


/* ---------------------------------------------------------
   TARGET / RETICLE / INTERACTION TAG
   --------------------------------------------------------- */

.tower-target {
  position: absolute;

  left: 50%;
  top: 50%;

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

  display: grid;
  place-items: center;

  pointer-events: none;

  z-index: 4;
}

.tower-reticle {
  color:
    rgba(
      255,
      255,
      255,
      .45
    );

  font-family:
    monospace;

  font-size:
    18px;
}

.tower-interaction-tag {
  position: absolute;

  top:
    calc(
      100% +
      .6rem
    );

  padding:
    .25rem
    .5rem;

  white-space: nowrap;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .2
    );

  background:
    rgba(
      0,
      0,
      0,
      .6
    );

  color:
    rgba(
      255,
      255,
      255,
      .8
    );

  font-size:
    .7rem;

  letter-spacing:
    .12em;
}


/* ---------------------------------------------------------
   MESSAGE / EXAMINE TEXT
   --------------------------------------------------------- */

.tower-message {
  position: absolute;

  left: 50%;
  bottom: 8%;

  transform:
    translateX(-50%);

  width:
    min(
      600px,
      calc(100% - 2rem)
    );

  padding:
    .6rem
    1rem;

  text-align: center;

  background:
    rgba(
      0,
      0,
      0,
      .72
    );

  opacity: 0;

  transition:
    opacity
    .2s
    ease;

  pointer-events: none;

  z-index: 6;
}

.tower-message.visible {
  opacity: 1;
}


/* ---------------------------------------------------------
   TOUCH CONTROLS
   --------------------------------------------------------- */

.tower-touch-controls {
  position: absolute;
  inset: 0;

  display: none;

  pointer-events: none;

  z-index: 4;
}

.tower-touch-walk,
.tower-touch-interact {
  touch-action: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;

  pointer-events: auto;
}

.tower-touch-walk {
  position: absolute;

  left: 50%;
  bottom: 1.25rem;

  transform:
    translateX(-50%);

  width: 74px;
  height: 74px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .35
    );

  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      .35
    );

  color:
    rgba(
      255,
      255,
      255,
      .7
    );

  font-size: 1.5rem;
}

.tower-touch-walk:active {
  background:
    rgba(
      255,
      255,
      255,
      .15
    );
}

.tower-touch-interact {
  position: absolute;

  right: 1rem;
  bottom: 1.5rem;

  min-width: 90px;
  min-height: 52px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .4
    );

  background:
    rgba(
      0,
      0,
      0,
      .55
    );

  color: #fff;

  font: inherit;

  letter-spacing: .08em;
}

@media (
  any-pointer: coarse
) {

  .tower-touch-controls {
    display: block;
  }

}


/* ---------------------------------------------------------
   CONTENT OVERLAY
   --------------------------------------------------------- */

.tower-content {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  min-width: 0;
  min-height: 0;

  padding: 1rem;

  overflow: hidden;

  background:
    rgba(
      0,
      0,
      0,
      .78
    );

  pointer-events: auto;

  z-index: 20;
}

.tower-content[hidden] {
  display: none;
}

.tower-content__panel {
  position: relative;

  width:
    min(
      760px,
      100%
    );

  max-width: 100%;
  max-height: 100%;
  min-height: 0;

  padding:
    0
    2rem
    2rem;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  border:
    4px double
    #5b4a35;

  background:
    #ddd5bd;

  color:
    #1f1a14;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

.tower-content__controls {
  position: sticky;

  top: 0;

  z-index: 10;

  display: flex;
  justify-content: flex-end;

  margin:
    0
    -2rem;

  padding:
    .75rem
    2rem;

  background:
    #ddd5bd;
}

#tower-content-close {
  min-width: 44px;
  min-height: 44px;

  margin: 0;

  padding:
    .5rem
    .8rem;

  border:
    1px solid
    currentColor;

  background:
    #ddd5bd;

  color:
    inherit;

  font:
    inherit;

  cursor: pointer;
}


/* ---------------------------------------------------------
   CONTENT INDEX
   --------------------------------------------------------- */

.tower-content-index {
  display: grid;

  gap: .75rem;
}

.tower-content-index__item {
  display: block;

  width: 100%;

  margin: 0;

  padding:
    .85rem
    1rem;

  text-align: left;

  border:
    1px solid
    rgba(
      31,
      26,
      20,
      .35
    );

  background: transparent;

  color: inherit;

  font: inherit;

  cursor: pointer;
}

.tower-content-index__item strong,
.tower-content-index__item span {
  display: block;
}

.tower-content-index__date {
  display: block;

  margin-top: .25rem;

  opacity: .55;

  font-size: .75rem;

  letter-spacing: .05em;
}


/* ---------------------------------------------------------
   DOCUMENT VIEW
   --------------------------------------------------------- */

.tower-document__header {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    .5rem
    1rem;

  align-items: start;

  margin-bottom: 2rem;
}

.tower-document__header h2 {
  min-width: 0;

  margin: 0;
}

.tower-document__header time {
  grid-column:
    1 /
    -1;

  opacity: .55;

  font-size: .85rem;
}

.tower-document__external {
  grid-column: 2;
  grid-row: 1;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border:
    1px solid
    currentColor;

  color: inherit;

  text-decoration: none;

  font-size: 1.35rem;
}

.tower-document {
  line-height: 1.65;
}

.tower-document img {
  max-width: 100%;
  height: auto;
}

.tower-document pre {
  max-width: 100%;

  overflow-x: auto;
}

.tower-document table {
  display: block;

  max-width: 100%;

  overflow-x: auto;
}

.tower-document__back {
  margin-top: 2rem;

  padding:
    .65rem
    1.25rem;

  border:
    1px solid
    currentColor;

  background:
    transparent;

  color: inherit;

  font: inherit;

  cursor: pointer;
}


/* ---------------------------------------------------------
   MINOR ILLUSION SPELL
   --------------------------------------------------------- */

body.spell-minor-illusion
#tower-canvas {
  filter:
    contrast(1.5)
    saturate(.4)
    hue-rotate(35deg);
}

.tower-spell-layer {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 5;
}

.minor-illusion {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.minor-illusion__apparition {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  animation:
    minorIllusionZoom
    3s
    linear
    forwards;
}

.minor-illusion__apparition img {
  width:
    min(
      80vw,
      700px
    );

  max-height: 85vh;

  object-fit: contain;

  image-rendering: auto;

  opacity: .9;
}

.minor-illusion--blocking {
  pointer-events: auto;

  cursor: pointer;

  background:
    rgba(
      0,
      0,
      0,
      .35
    );
}

.minor-illusion--blocking::after {
  content:
    "CLICK TO DISPEL";

  position: absolute;

  left: 50%;
  bottom: 7%;

  transform:
    translateX(-50%);

  color:
    rgba(
      255,
      255,
      255,
      .65
    );

  font-size: .75rem;

  letter-spacing: .2em;

  animation:
    spellPromptPulse
    1.5s
    ease-in-out
    infinite;
}

body.tower-cursor-visible,
body.tower-cursor-visible * {
  cursor: default;
}

body.tower-cursor-visible
.minor-illusion--blocking {
  cursor: pointer;
}


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

@media (
  max-width: 600px
) {

  .tower-content {
    padding: .5rem;
  }

  .tower-content__panel {
    width: 100%;
    max-height: 100%;

    padding:
      0
      .9rem
      1rem;
  }

  .tower-content__controls {
    margin:
      0
      -.9rem;

    padding:
      .5rem
      .9rem;
  }

  .tower-document__header {
    gap:
      .4rem
      .75rem;
  }

  .tower-document__external {
    width: 44px;
    height: 44px;
  }

}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes minorIllusionZoom {

  0% {
    transform:
      scale(.6);

    opacity: 0;
  }

  12% {
    opacity: .9;
  }

  85% {
    opacity: .9;
  }

  100% {
    transform:
      scale(1.35);

    opacity: 0;
  }

}

@keyframes spellPromptPulse {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: 1;
  }

}