/* Gate: a height-aware layout with a scrollable fallback for enlarged text. */
:root {
  color-scheme: dark;
  font-size: 150%;
  /* --safe-top: env(safe-area-inset-top, 0px); */
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --viewport-height: 100vh;
  --gap: clamp(.375rem, 1.2dvh, .75rem);
  --art-size: 0.33rem;
  --gate-panel-width: clamp(11.5rem, 20vw, 14rem);
}

@supports not (height: 100dvh) {
  :root { --gap: clamp(.375rem, 1.2vh, .75rem); }
}

@supports (height: 100svh) {
  :root { --viewport-height: 100svh; }
}

@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}

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

html {
  min-height: 100%;
  background: #1a1a1a;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(3rem + var(--safe-top));
}

body {
  display: flex;
  flex-direction: column;
  min-height: var(--viewport-height);
  margin: 0;
  color: #fff;
  font-family: Arial, Verdana, sans-serif;
  font-size: 1.125rem;
  background: #1a1a1a linear-gradient(45deg, #1a1a1a, #2d2d2d 25%, #1a1a1a 50%, #404040 75%, #1a1a1a);
}

a { color: inherit; }
.flink { text-decoration: none; }
a.bule { color: #5895ff; }

:focus {
  outline: 3px solid gold;
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid gold; outline-offset: 3px; }

img { display: block; max-width: 100%; height: auto; }
h2 { margin: 0; }

/* Pin the visible controls to each upper corner, inside device safe insets. */
body > a[href="0021/so03d6.html"] {
  position: fixed;
  top: var(--safe-top);
  left: var(--safe-left);
  z-index: 200;
  display: grid;
  place-items: start;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  text-decoration: none;
  touch-action: manipulation;
}

body > a[href="0021/so03d6.html"]:focus-visible { outline-offset: -3px; }

.lefttop {
  position: static;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

#dtext {
  position: fixed;
  top: var(--safe-top);
  right: var(--safe-right);
  z-index: 300;
  width: fit-content;
  max-width: calc(100% - var(--safe-left) - var(--safe-right));
  margin: 0;
  pointer-events: none;
}

#dtext[open] { width: 42rem; }

#dsum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-left: auto;
  padding: .125rem .375rem;
  border-radius: 0 0 0 .2rem;
  background: #ff0101;
  color: #000;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

#dsum,
#dpa { pointer-events: auto; }

#dsum::-webkit-details-marker { display: none; }
#dsum::marker { content: ""; }
#dtext[open] #dsum { color: #fff; background-color: #9d1010; }
#dsum:focus-visible { outline-offset: -3px; }

#dpa {
  /* Reserve the summary line, its padding, and the gap above this panel. */
  max-height: max(0px, calc(var(--viewport-height) - 2rem - var(--safe-top) - var(--safe-bottom)));
  margin: .25rem 0 0;
  padding: 1rem;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  border: 1px solid #ffffff33;
  border-radius: .5rem;
  box-shadow: 0 .35rem 1rem #0009;
  background: #0a0a0a;
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.5;
}

#dpa p { margin: 0 0 .75rem; }
#dpa p:last-child { margin-bottom: 0; }

#hhh {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25em;
  color: #ff7373;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 700;
}

#geg {
  width: fit-content;
  max-width: 100%;
  padding: .1rem .25rem;
  background: red;
  color: #000;
  font-weight: 700;
}

.center-container {
  position: relative;
  z-index: 100;
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: calc(3rem + var(--safe-top)) calc(1rem + var(--safe-right)) var(--gap) calc(1rem + var(--safe-left));
}

.content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "exit" "title" "artwork" "links";
  justify-items: center;
  align-content: center;
  gap: var(--gap);
  width: 100%;
  max-width: 36rem;
  min-width: 0;
  margin: 0 auto;
  text-align: center;
}

.content-wrapper > a.flink {
  grid-area: exit;
  display: block;
  width: min(100%, 25rem);
  border-radius: .25rem;
}

#mainh {
  margin: 0;
  padding: .25rem .75rem;
  border: 1px solid #ffffff26;
  border-radius: .25rem;
  background: #080808;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

#loved {
  grid-area: title;
  display: flex;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

#loved > a { display: inline-flex; max-width: 100%; min-width: 0; border-radius: .3rem; }

#love {
  max-width: 100%;
  padding: .3rem .65rem;
  border: 2px solid hotpink;
  border-radius: .3rem;
  background: #080808;
  color: pink;
  font-size: clamp(1.28rem, 3.2vw, 2.125rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

#texted {
  grid-area: artwork;
  width: var(--gate-panel-width);
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.highlight {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: .4rem .6rem;
  border: 1px solid #00ff0029;
  border-radius: .6rem;
  background: #080808;
  box-shadow: 0 .35rem 1rem #0006;
  container-type: inline-size;
}

.highlight > a { display: block; max-width: 100%; }

.ascii-art {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  color: #0f0;
  font: 400 var(--art-size)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  text-shadow: 0 0 1px #00ff008c;
}

/* Keep the complete 38-line drawing proportional to the frame's inner width. */
@supports (font-size: 1cqi) {
  .ascii-art { font-size: calc(100cqi / 29.2); }
}

.container {
  grid-area: links;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  max-width: 100%;
  min-width: 0;
  text-align: center;
}

.hero { width: fit-content; max-width: 100%; min-width: 0; }

.hero[aria-label="Intro text"] { width: var(--gate-panel-width); }
#texttwo { width: 100%; }

.overlay-text {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: .45rem .1rem;
  border: 1px solid #ffffff1a;
  border-radius: .5rem;
  background: #080808;
  box-shadow: 0 .35rem 1rem #0006;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tagline {
  display: flex;
  flex-direction: column;
  color: #ff0101;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: .75;
  padding: .2rem;
  text-align: center;
}

.tagline,
.tagline-center,
a.flink.f2 { letter-spacing: normal; word-spacing: normal; }

.tagline-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3rem; }
.tagline > br { display: none; }

.tagline a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 1em;
  max-width: 100%;
  padding: .15rem 0;
  touch-action: manipulation;
}

#xboarder {
  padding: .3rem .8rem;
  border: 3px solid gold;
  border-radius: .5rem;
  box-shadow: 0 0 0 1px #b8860b, 0 .35rem 1rem #0006;
}

#xboarder h2 { font-size: clamp(2rem, 2.8vw, 2.5rem); line-height: 1.15; }

.home-link {
  max-width: 100%;
  min-height: 2.75rem;
  padding: .15rem .3rem;
  color: gold;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .16s ease, background-color .16s ease;
  touch-action: manipulation;
}

#ftc1 {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: .4rem calc(1rem + var(--safe-right)) calc(.4rem + var(--safe-bottom)) calc(1rem + var(--safe-left));
  color: #ccc;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#sign { font-size: .65em; line-height: 0; vertical-align: super; }

/* Compact, narrow windows still keep the complete figure and every link. */
@media (max-width: 31.999rem) {
  .highlight { padding-top: .25rem; padding-bottom: .25rem; }
  #ftc1 { padding-top: .25rem; padding-bottom: calc(.25rem + var(--safe-bottom)); }
}

@media (max-width: 31.999rem) and (max-height: 32rem) {
  .center-container { padding-top: calc(2.75rem + var(--safe-top)); }
  #mainh { font-size: 2.125rem; }
  #ftc1 { padding-top: .25rem; padding-bottom: calc(.25rem + var(--safe-bottom)); }
}

/* Wide, short windows: keep the links beside the complete artwork. */
@media (min-width: 32rem) and (max-height: 40rem),
       (min-width: 48rem) and (max-height: 55rem),
       (min-width: 100rem) and (max-height: 60rem) {
  .content-wrapper {
    grid-template-areas: "exit artwork" "title artwork" "links artwork";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: clamp(.75rem, 3vw, 2rem);
    max-width: 48rem;
  }

  #texted { align-self: center; }
}

@media (min-width: 32rem) and (max-height: 40rem) {
  #mainh { font-size: clamp(2rem, 3.5vw, 2.75rem); }
}

@media (min-width: 32rem) and (max-height: 24rem) {
  .center-container { padding-top: calc(2.75rem + var(--safe-top)); }
}

/* Small phones: readable controls and a details panel inside the viewport. */
@media (max-width: 48rem), (max-height: 26rem) {
  #dtext[open] { width: 32rem; }

  #dsum { font-size: .875rem; }

  #dpa {
    max-height: max(0px, calc(var(--viewport-height) - 1.625rem - var(--safe-top) - var(--safe-bottom)));
    padding: .5rem;
    font-size: .75rem;
    line-height: 1.45;
  }

  #dpa p { margin-bottom: .5rem; }
  #dpa p:last-child { margin-bottom: 0; }
  #hhh { font-size: 1.125em; }
}

/* Small phones retain the original vertical order in both orientations. */
@media (max-width: 25rem) and (max-height: 44rem),
       (min-width: 25.001rem) and (max-width: 48rem) and (max-height: 26rem) {
  :root {
    --gate-panel-width: clamp(8.25rem, 62vw, 10rem);
  }

  .center-container {
    padding: calc(2rem - 1px + var(--safe-top)) calc(.375rem + var(--safe-right)) 0 calc(.375rem + var(--safe-left));
  }

  .content-wrapper {
    grid-template-areas: "exit" "title" "artwork" "links";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }

  #mainh {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0 .4rem;
    font-size: 1.5rem;
    line-height: 1;
  }

  #love { padding: .08rem .2rem; }
  .highlight { padding: 0 .25rem; }
  .tagline { font-size: 1rem; }
  #xboarder { padding: 0 .25rem; }
  #xboarder h2 { font-size: 1.61rem; }
  .home-link { min-height: 44px; padding: .1rem 0; }

  #ftc1 {
    padding: 0 calc(.375rem + var(--safe-right)) var(--safe-bottom) calc(.375rem + var(--safe-left));
    font-size: .666667rem;
  }
}

/* Older Safari uses the same panel width without requiring container units. */
@supports not (font-size: 1cqi) {
  @media (max-width: 25rem) and (max-height: 44rem),
         (min-width: 25.001rem) and (max-width: 48rem) and (max-height: 26rem) {
    .ascii-art {
      font-size: min(var(--art-size), calc((min(var(--gate-panel-width), calc(100vw - .75rem - 20px - var(--safe-left) - var(--safe-right))) - .5rem - 2px) / 29.2));
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .flink:not(.f2):not(.bule):hover { color: #fff; }
  .home-link:hover { color: #fff; background-color: #ffffff0d; }
}

@media (prefers-reduced-motion: reduce) {
  .home-link { transition: none; }
}

/* Applied only when the complete page needs more height than the viewport. */
html[data-hide-ascii] #texted { display: none; }

html[data-hide-ascii] .content-wrapper {
  grid-template-areas: "exit" "title" "links";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  max-width: 36rem;
}