/* platform/web/site.css — Witchin Stichin's page (docs/WEB.md).
 * The page wears the game: WITCHLIGHT night violet, moon parchment, ember
 * lanterns, coven green, and the game's own face (Averia Serif Libre, OFL).
 * #frame's box is load-bearing: the loader sizes the engine buffer from it at
 * PLAY time. The game is landscape, so the frame is 16:9 at every width and
 * portrait phones get a rotate tip instead of a tall buffer. */

@font-face {
  font-family: "Averia Serif Libre";
  src: url("fonts/AveriaSerifLibre-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Averia Serif Libre";
  src: url("fonts/AveriaSerifLibre-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --night: #0b0819;          /* the sky */
  --night-deep: #06040f;
  --panel: #241f38;          /* night ground / panel violet */
  --panel-soft: #2b2547;
  --parchment: #ece6d4;      /* moon parchment */
  --parchment-dim: #b7b0a1;
  --ember: #f2a03d;          /* lantern warmth */
  --ember-deep: #c77a20;
  --coven: #a5e06a;          /* the P1 green */
  --spirit: #7fc4e8;
  --hostile: #e94f37;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--night); }

body {
  font-family: "Averia Serif Libre", Georgia, "Times New Roman", serif;
  color: var(--parchment);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--coven); text-decoration: underline; }
a:hover { color: var(--ember); }

/* ------------------------------------------------------------ the marquee */

#mast {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem 0.5rem;
  background: linear-gradient(180deg, #120d26, var(--night));
  border-bottom: 1px solid rgba(236, 230, 212, 0.14);
}

.mast-word {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: var(--parchment);
  text-decoration: none;
}

.mast-word:hover { color: var(--ember); }

.mast-word em {
  font-style: normal;
  color: var(--coven);
}

.mast-tag {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--parchment-dim);
}

/* --------------------------------------------------------------- the frame */

#frame {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--night-deep);
  overflow: hidden;
  border-bottom: 3px solid var(--panel-soft);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
}

#frame:fullscreen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  aspect-ratio: auto;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#frame:-webkit-full-screen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  aspect-ratio: auto;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#frame:fullscreen #canvas,
#frame:-webkit-full-screen #canvas {
  width: min(100vw, 177.7778vh);
  height: min(56.25vw, 100vh);
  flex: none;
}

/* Wide phones are shorter than a 16:9 box sized from viewport width. Fit the
   whole game to the visible height so its bottom edge never falls off-screen. */
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .game-page #mast { display: none; }
  .game-page #frame {
    width: min(100vw, 177.7778vh);
    width: min(100vw, 177.7778svh);
    max-width: none;
  }
}

/* The buffer keeps the shape it booted at; object-fit letterboxes instead of
   stretching when the frame's shape stops matching it. */
#canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--night-deep);
  outline: none;
  image-rendering: auto;
  touch-action: none;
}

/* --------------------------------------------------------------- the cover */

#cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding: 3vmin 4vmin;
  background:
    linear-gradient(180deg, rgba(11, 8, 25, 0.10) 0%,
      rgba(11, 8, 25, 0.35) 45%, rgba(6, 4, 15, 0.86) 100%),
    url("art/hero.jpg") center / cover no-repeat,
    var(--night-deep);
  transition: opacity 420ms ease;
  z-index: 3;
}

#cover.gone { opacity: 0; pointer-events: none; }

.cover-inner {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin-top: 1vmin;
}

.eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  color: var(--parchment-dim);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 8vmin, 4.4rem);
  line-height: 0.92;
  letter-spacing: 0.08em;
  margin: 0.3rem 0 0.6rem;
  color: var(--parchment);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 10px 26px rgba(0, 0, 0, 0.6);
}

h1 span {
  display: block;
  font-size: 0.92em;
  color: var(--coven);
  letter-spacing: 0.16em;
}

.pitch {
  font-size: clamp(0.98rem, 2.2vmin, 1.15rem);
  line-height: 1.38;
  color: var(--parchment);
  background: rgba(11, 8, 25, 0.72);
  border: 1px solid rgba(236, 230, 212, 0.22);
  border-radius: 12px;
  padding: 0.55rem 0.95rem;
  max-width: 32rem;
  margin: 0 auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

#play {
  appearance: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.18em;
  color: #1a1206;
  background: linear-gradient(180deg, #ffc46a, var(--ember) 55%, var(--ember-deep));
  border: 2px solid #ffd79a;
  border-radius: 999px;
  padding: 0.55rem 3rem 0.5rem;
  margin-top: 1.1rem;
  cursor: pointer;
  min-height: 56px;
  box-shadow: 0 0 0 4px rgba(242, 160, 61, 0.18), 0 14px 30px rgba(0, 0, 0, 0.5);
}

#play:hover:enabled { filter: brightness(1.06); transform: translateY(-1px); }
#play:active:enabled { transform: translateY(2px); }
#play:disabled { opacity: 0.7; cursor: default; }

#bar {
  height: 10px;
  margin: 1.2rem auto 0.6rem;
  max-width: 22rem;
  background: rgba(236, 230, 212, 0.14);
  border: 1px solid rgba(236, 230, 212, 0.35);
  border-radius: 999px;
  overflow: hidden;
}

#bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--coven), #d3f5a8);
  transition: width 160ms linear;
}

#status {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  color: var(--parchment);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#diag {
  margin: 0.35rem auto 0;
  max-width: 36rem;
  font-size: 0.8rem;
  color: var(--parchment-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  word-break: break-word;
}

#reset {
  appearance: none;
  margin-top: 0.8rem;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--parchment);
  background: rgba(36, 31, 56, 0.92);
  border: 1px solid rgba(236, 230, 212, 0.45);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  min-height: 40px;
  cursor: pointer;
}

#reset:hover { background: var(--panel-soft); }

.fineprint {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--parchment-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ----------------------------------------------------------------- the hud */

#hud { position: absolute; right: 10px; top: 10px; z-index: 4; }

#hud button {
  appearance: none;
  font-family: inherit;
  border: 1px solid rgba(236, 230, 212, 0.5);
  background: rgba(11, 8, 25, 0.7);
  color: var(--parchment);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  padding: 0.4rem 0.8rem;
  min-height: 34px;
  border-radius: 999px;
  cursor: pointer;
}

#hud button:hover { background: var(--panel-soft); }

/* Landscape game, portrait phone: say so once, small. */
#rotate {
  display: none;
  text-align: center;
  font-size: 0.95rem;
  color: var(--parchment-dim);
  padding: 0.5rem 1rem 0;
}

@media (max-width: 700px) and (orientation: portrait) {
  #rotate { display: block; }
}

/* --------------------------------------------------------------- the copy */

#below {
  background: linear-gradient(180deg, var(--night) 0%, #100c22 100%);
  border-top: 1px solid rgba(236, 230, 212, 0.1);
}

#below .inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.6rem 1.6rem 2.4rem;
}

.promise {
  max-width: 46rem;
  margin: 0 auto 2.6rem;
  padding: 1.1rem 1.6rem 1.2rem;
  text-align: center;
  background: var(--panel);
  border: 1px solid rgba(165, 224, 106, 0.45);
  border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(165, 224, 106, 0.06), 0 14px 30px rgba(0, 0, 0, 0.35);
}

.promise-title {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coven);
  margin-bottom: 0.3rem;
}

.promise p:not(.promise-title) {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--parchment);
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}

#below h2 {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  color: var(--ember);
  margin-bottom: 0.45rem;
}

#below p {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--parchment);
}

/* ------------------------------------------------------------- the family */

.family {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.8rem;
  padding: 1.2rem 1.4rem;
  background: var(--panel);
  border: 1px solid rgba(236, 230, 212, 0.18);
  border-radius: 16px;
}

.family div { max-width: 40rem; }

footer {
  margin-top: 2.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(236, 230, 212, 0.16);
  text-align: center;
}

footer p { font-size: 0.98rem; }

footer .tiny {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--parchment-dim);
}

/* ------------------------------------------------------------ small rooms */

@media (max-width: 820px) {
  #below .inner { padding-top: 2rem; }
  h1 { letter-spacing: 0.04em; }
  #play { width: min(100%, 20rem); }
  .cover-inner { margin-top: 0; }
  #cover { padding-top: 2vmin; }
  .pitch { font-size: 0.95rem; }
}

@media (max-width: 700px) and (orientation: portrait) {
  /* The 16:9 frame is short on a portrait phone; keep the cover copy tight
     so PLAY stays inside it. */
  .eyebrow { display: none; }
  h1 { font-size: clamp(1.6rem, 9vmin, 2.4rem); margin-bottom: 0.3rem; }
  .pitch { display: none; }
  #play { margin-top: 0.4rem; min-height: 46px; font-size: 1.25rem; }
  #bar { margin-top: 0.6rem; }
  .fineprint { display: none; }
}

/* ------------------------------------------------------------- embed mode */

/* ?embed=1 puts the class on <html>: the page is an iframe inside
   https://mogames.gg/games/witchin-stichin, where the portal owns the mast,
   copy, and footer. Only the game frame survives, filling the whole iframe
   viewport; the loader sizes the engine buffer from that box at PLAY time.
   Last in the file on purpose: these rules must out-cascade the
   equal-specificity #frame rules and media queries above. */
.embed, .embed body {
  margin: 0;
  overflow: hidden;
  background: var(--night-deep);
}
.embed #mast,
.embed #rotate,
.embed #below { display: none; }
.embed #frame {
  width: 100%;
  max-width: none;
  height: 100vh;   /* fallback */
  height: 100svh;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--night-deep);
}