/*
 * Knelldeep stage.
 *
 * The site stylesheet styles the page around the stage. This file styles only
 * the stage and its screens. The palette is a cold teal ground with a bell
 * bronze accent. The stage is landscape. On a touch screen in portrait, a
 * notice asks the player to turn the phone.
 */

/* The UI builder owns ui.css: cards, marks, captions and menu screens. */
@import url("./ui.css");

.kd {
  --kd-ground: #081517;
  --kd-deep: #0d2226;
  --kd-teal: #173a40;
  --kd-teal-light: #2f6269;
  --kd-bronze: #b3843f;
  --kd-bronze-light: #deb068;
  --kd-bone: #ebe3d0;
  --kd-mist: #9db5b2;
  --kd-rust: #d08a6a;
  --kd-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --kd-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  position: relative;
  width: 100%;
  margin: 0 0 2rem;
}

/*
 * The stage fills the width of the viewport. When the viewport is too short
 * for that width, the height sets the width, so the stage keeps its shape.
 */
.kd-stage {
  position: relative;
  width: min(100%, calc(100vh * 16 / 9));
  width: min(100%, calc(100svh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  color: var(--kd-bone);
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(222, 176, 104, 0.10), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 100%, var(--kd-teal), transparent 65%),
    linear-gradient(180deg, var(--kd-ground) 0%, var(--kd-deep) 55%, var(--kd-ground) 100%);
  border-block: 1px solid var(--kd-teal);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* A viewport wider than 16:9 gets a 2:1 stage, bound by the height in the same way. */
@media (min-aspect-ratio: 16/9) {
  .kd-stage {
    width: min(100%, calc(100vh * 2));
    width: min(100%, calc(100svh * 2));
    aspect-ratio: 2 / 1;
  }
}

.kd-screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}

.kd-status {
  margin: 0;
  font: 500 0.9rem/1.5 var(--kd-mono);
  letter-spacing: 0.08em;
  color: var(--kd-mist);
}

/* Title card */

.kd-title {
  text-align: center;
}

.kd-name {
  margin: 0;
  font-family: var(--kd-serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--kd-bronze-light);
  text-shadow: 0 0 0.6em rgba(179, 132, 63, 0.35), 0 0.05em 0 #3a2a12;
}

.kd-subtitle {
  margin: clamp(0.4rem, 1.4vw, 1rem) 0 0;
  font-family: var(--kd-serif);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  letter-spacing: 0.04em;
  color: var(--kd-mist);
}

.kd-subtitle::before,
.kd-subtitle::after {
  content: "";
  display: inline-block;
  width: clamp(1.5rem, 5vw, 4rem);
  height: 1px;
  margin: 0 0.8em;
  vertical-align: middle;
  background: var(--kd-bronze);
}

/* Developer readout */

.kd-readout {
  position: absolute;
  left: clamp(0.5rem, 2vw, 1.5rem);
  bottom: clamp(0.5rem, 2vw, 1.5rem);
  max-width: min(26rem, 60%);
  padding: 0.6rem 0.8rem;
  background: rgba(8, 21, 23, 0.78);
  border: 1px solid var(--kd-teal-light);
  border-left: 3px solid var(--kd-bronze);
  border-radius: 0 4px 4px 0;
  font: 500 clamp(0.62rem, 1.1vw, 0.78rem)/1.45 var(--kd-mono);
  color: var(--kd-mist);
}

.kd-readout-title {
  margin: 0 0 0.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kd-bronze-light);
}

.kd-readout-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.9rem;
  margin: 0;
}

.kd-readout-list dt {
  color: var(--kd-bone);
}

.kd-readout-list dd {
  margin: 0;
}

/* Error panel */

.kd-error {
  max-width: 44rem;
  max-block-size: 100%;
  overflow: auto;
  padding: 1rem 1.2rem;
  background: rgba(8, 21, 23, 0.9);
  border: 1px solid var(--kd-rust);
  border-radius: 4px;
}

.kd-error-title {
  margin: 0 0 0.5rem;
  font-family: var(--kd-serif);
  font-size: 1.3rem;
  color: var(--kd-rust);
}

.kd-error-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 500 0.8rem/1.5 var(--kd-mono);
  color: var(--kd-bone);
}

/*
 * Portrait notice. It shows only on a touch screen, because the player can turn
 * that device. A tall desktop window keeps the landscape stage.
 */

.kd-turn {
  display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
  .kd-stage {
    width: min(100%, calc(80vh * 3 / 4));
    width: min(100%, calc(80svh * 3 / 4));
    aspect-ratio: 3 / 4;
  }

  .kd-turn {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--kd-ground);
  }

  .kd-turn p {
    margin: 0;
    color: var(--kd-mist);
  }

  .kd-turn .kd-turn-title {
    font-family: var(--kd-serif);
    font-size: 1.8rem;
    color: var(--kd-bronze-light);
  }

  .kd-turn::before {
    content: "";
    width: 3.2rem;
    height: 2rem;
    margin-bottom: 0.6rem;
    border: 2px solid var(--kd-bronze);
    border-radius: 6px;
  }
}

/* A boot error must stay readable, so the notice never covers it. */
.kd-stage[data-state="error"] .kd-turn {
  display: none;
}

.kd-dev {
  padding-top: 0;
  padding-bottom: 3rem;
}

/*
 * Game layers. docs/knelldeep/ARCHITECTURE.md names the module that owns each
 * layer. The modules add the layer elements to the stage when the game
 * starts. A layer takes no pointer input unless its own rules say so.
 */

.kd-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* stage.mjs: the WebGL surface. */
.kd-world {
  z-index: 0;
  display: block;
  touch-action: none;
}

/* hud.mjs: strike bars and parry rings. */
.kd-hud {
  z-index: 10;
  pointer-events: none;
}

/* ui.mjs: marks anchored to figures, captions and menu screens. */
.kd-marks {
  z-index: 20;
  pointer-events: none;
}

.kd-captions {
  z-index: 30;
  pointer-events: none;
}

.kd-menus {
  z-index: 40;
  pointer-events: none;
}

/* camera.mjs: the black fade for cuts. */
.kd-fade {
  z-index: 50;
  pointer-events: none;
  background: #05070a;
  opacity: 0;
}

/* ui.mjs: the pause button, outside check input. */
.kd-pause {
  position: absolute;
  z-index: 60;
}

/* boot.mjs: the loading line and the error panel. */
.kd-stage > .kd-screen {
  z-index: 70;
}

.kd-stage[data-state="ready"] > .kd-screen {
  display: none;
}

.kd-stage[data-state="error"] > .kd-screen {
  background: rgba(8, 21, 23, 0.94);
}

.kd-stage > .kd-turn {
  z-index: 80;
}

/* While a check is open, a tap belongs to the check, never to a card or a menu. */
.kd-stage[data-kd-check="open"] .kd-marks *,
.kd-stage[data-kd-check="open"] .kd-menus * {
  pointer-events: none !important;
}