/*
  The page around the canvas, and the two faces the canvas draws with.

  Everything visible is painted in the canvas; this file exists to hold the shell
  still, load the type, and put something worth looking at on screen during the
  second or two before the first painting decodes.

  The fonts are copied into the project rather than linked. The game has to run
  from a folder with no network, and a canvas measures text against whatever face
  has actually arrived: a webfont landing late does not reflow a canvas the way it
  reflows a document, it silently leaves every line break computed against the
  fallback. So they are local, they are preloaded, and the first frame waits for
  document.fonts.ready before anything is laid out.
*/

@font-face {
  font-family: "Braj Display";
  src: url("./assets/fonts/eb-garamond-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Braj Display";
  src: url("./assets/fonts/eb-garamond-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Braj Sans";
  src: url("./assets/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/*
  The Devanagari half.

  Named as separate families rather than as extra sources on the Latin ones, so
  that the stack in theme.js decides the order and a mixed line falls through
  per glyph: a Hindi sentence carrying a roman place name or a numeral keeps
  the Latin face for those characters.

  Tiro is a true text serif and stands beside EB Garamond without either
  looking borrowed, which is why the riddles are set in it. It ships a single
  weight, and the stack never asks it for another.
*/
@font-face {
  font-family: "Braj Display Hindi";
  src: url("./assets/fonts/tiro-devanagari-hindi-devanagari-400-normal.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Braj Display Hindi";
  src: url("./assets/fonts/tiro-devanagari-hindi-devanagari-400-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "Braj Sans Hindi";
  src: url("./assets/fonts/noto-sans-devanagari-devanagari-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  font-family: "Braj Sans", system-ui, sans-serif;
  background: #05080b;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html,
body,
#game-shell {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05080b;
}

body {
  position: fixed;
  inset: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#game-shell {
  position: relative;
  isolation: isolate;
}

/*
  The notch, and the bar the thumb swipes from.

  The page is viewport-fit=cover, which is what lets the artwork run to all four
  edges of a phone held upright, where the cut-out is in the status bar and the
  game has nothing up there but sky. Turned on its side the same cut-out is in
  the middle of one long edge, exactly where the board or the column stands, and
  the home indicator crosses the bottom of both.

  So the shell keeps out of the way in landscape and only in landscape. The
  canvas measures itself with getBoundingClientRect, so the whole layout follows
  the smaller box with nothing else to change, and on a handset with no insets
  at all every one of these is zero and nothing moves.
*/
@media (orientation: landscape) and (max-height: 520px) {
  #game-shell {
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  outline: none;
}

#game.is-interactive { cursor: pointer; }
#game.is-dragging { cursor: grabbing; }

/*
  The opening. A lotus drawn in CSS, breathing, over the same blue-black the game
  uses, so there is no colour jump when the canvas takes over. Pointer-events are
  off permanently, not just once it fades: a veil still catching the first tap
  while it faded was what swallowed the opening touch on a phone last time.
*/
#boot {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  color: rgba(242, 205, 122, 0.82);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(20, 102, 106, 0.2), transparent 58%),
    #05080b;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 900ms ease, visibility 900ms ease;
}

#boot.is-gone {
  visibility: hidden;
  opacity: 0;
}

.boot-lotus {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}

.boot-lotus span {
  position: absolute;
  inset: 0;
  border-radius: 50% 0 50% 50%;
  border: 1px solid rgba(217, 167, 67, 0.6);
  transform-origin: 50% 50%;
  animation: bloom 3.4s ease-in-out infinite;
}

.boot-lotus span:nth-child(1) { transform: rotate(0deg) scale(0.72); animation-delay: 0s; }
.boot-lotus span:nth-child(2) { transform: rotate(60deg) scale(0.72); animation-delay: 0.14s; }
.boot-lotus span:nth-child(3) { transform: rotate(120deg) scale(0.72); animation-delay: 0.28s; }
.boot-lotus span:nth-child(4) { transform: rotate(180deg) scale(0.72); animation-delay: 0.42s; }
.boot-lotus span:nth-child(5) { transform: rotate(240deg) scale(0.72); animation-delay: 0.56s; }
.boot-lotus span:nth-child(6) { transform: rotate(300deg) scale(0.72); animation-delay: 0.7s; }

.boot-rule {
  width: 9rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9a743, transparent);
  animation: breathe 2.1s ease-in-out infinite;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes bloom {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 1; }
}

@keyframes breathe {
  0%, 100% { opacity: 0.2; transform: scaleX(0.5); }
  50% { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-lotus span,
  .boot-rule { animation: none; }
}

/*
  The keyboard summoner.

  A real, focusable, one-pixel input under the canvas. It has to be genuinely
  in the layout: opacity:0 with pointer-events:none still lets it take focus,
  whereas display:none, visibility:hidden and off-viewport positioning all stop
  iOS raising the keyboard for it. So it sits at the top left with nothing to
  see, and the field the player looks at is drawn on the canvas above it.
*/
#answer-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  outline: none;
  opacity: 0;
  pointer-events: none;
  /* 16px or larger, or iOS Safari zooms the whole page when it takes focus. */
  font-size: 16px;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  z-index: -1;
}