html, body { margin: 0; }
/* the loading screen in the menu's language (Design/menu, chosen 2026-09-28): its painting (title.jpg, the game's own title), Cinzel in
   widely spaced capitals on engraved hairlines, bone on the dark, fire the only warm colour - the fuel burns along a hairline like a fuse */
:root {
    color-scheme: dark;
    --night: #05060b;
    --bone: #e8ddc9;
    --muted: #a39ca8;
    --hair: rgba(232,221,201,.26);
    --ember: #f39a4d;
    --blood: #b3180e;
  }
  html, body { height: 100%; }
  body { background: var(--night); color: var(--bone); font-family: "Cinzel", "Times New Roman", serif; overflow: hidden; }
  #stage { position: fixed; inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0; background: #000; }
  #unity-canvas { width: 100%; height: 100%; display: block; background: #000; outline: none; }
  #veil {
    position: absolute; inset: 0; display: grid; place-items: center; padding-inline: 16px; overflow: hidden;
    background: var(--night); transition: opacity .8s ease;
  }
  #veil::before {   /* the painting, drifting closer */
    content: ""; position: absolute; inset: -3%; z-index: 0;
    background: url("title.jpg") center 45% / cover no-repeat;
    animation: drift 40s ease-in-out infinite alternate;
  }
  #veil::after {    /* shaded where the words stand */
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(70% 55% at 50% 50%, rgba(3,4,10,.62), rgba(3,4,10,.25) 70%, rgba(3,4,10,0) 100%),
      linear-gradient(to bottom, rgba(3,4,10,.35), rgba(3,4,10,0) 30%, rgba(3,4,10,0) 70%, rgba(3,4,10,.55));
  }
  @keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, .5%); } }
  #veil.gone { opacity: 0; pointer-events: none; }
  .card { position: relative; z-index: 1; width: min(620px, 100%); display: grid; gap: 26px; text-align: center; }
  h1 {
    margin: 0; font-weight: 400; font-size: clamp(34px, 6.4vw, 70px); line-height: 1; text-transform: uppercase;
    letter-spacing: .42em; padding-inline-start: .42em;   /* (the spacing after the last letter, given back to the first) */
    color: var(--bone); text-shadow: 0 2px 18px rgba(0,0,0,.8);
  }
  h1::after { content: ""; display: block; height: 1px; width: 78%; margin: 22px auto 0; background: linear-gradient(90deg, transparent, rgba(232,221,201,.55), transparent); }
  .sub { margin: 0; color: var(--muted); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; text-wrap: balance; }
  .fuel { display: grid; gap: 12px; width: min(420px, 100%); justify-self: center; }
  .fuel-label { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
  .bar { position: relative; height: 1px; background: var(--hair); }
  .bar > i { position: relative; display: block; height: 2px; top: -.5px; width: 0%; background: linear-gradient(90deg, rgba(179,24,14,.3), var(--ember)); box-shadow: 0 0 10px rgba(243,154,77,.7); transition: width .25s linear; }
  .bar .tip { position: absolute; right: -8px; top: -21px; width: 14px; height: 23px; filter: drop-shadow(0 0 6px rgba(243,154,77,.9)); animation: flick 1.3s ease-in-out infinite; transform-origin: 50% 100%; }
  @keyframes flick { 0%,100% { transform: scaleY(1) scaleX(1); } 30% { transform: scaleY(1.12) scaleX(.94); } 60% { transform: scaleY(.94) scaleX(1.04); } }
  #err { color: #ff9d7a; font-size: 13px; letter-spacing: .06em; white-space: pre-wrap; text-align: left; font-family: Georgia, serif; }
  .keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 26px; text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .keys > div { padding: 7px 0; border-bottom: 1px solid var(--hair); }
  .keys b { color: var(--bone); font-weight: 600; letter-spacing: .18em; margin-inline-end: 10px; }
  #fs {
    position: absolute; right: 14px; bottom: 14px; z-index: 5; font: 400 11px/1 "Cinzel", Georgia, serif; letter-spacing: .28em; text-transform: uppercase;   /* (the bottom corner: the game's BACK and menu stand at the top right) */
    padding: 10px 14px 10px 17px; color: var(--bone); background: rgba(3,4,10,.55); border: 1px solid rgba(232,221,201,.35); border-radius: 0; cursor: pointer;
  }
  #fs:hover { border-color: var(--ember); }
  #go:focus-visible, #fs:focus-visible { outline: 1px solid var(--ember); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { #veil, .bar > i { transition: none; } #veil::before, .bar .tip { animation: none; } }

  /* phones and tablets */
  html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
  #stage, #unity-canvas { touch-action: none; }
  .keys.touch { display: none; }
  #rotate { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; align-content: center; gap: 14px; padding: 16px; background: var(--night); text-align: center; }
  #rotate svg { width: 76px; height: 76px; color: var(--bone); animation: tilt 2.6s ease-in-out infinite; }
  #rotate p { margin: 0; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); }
  #rotate small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  @keyframes tilt { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
  @media (pointer: coarse) {
    .keys.desk { display: none; }
    .keys.touch { display: grid; }
    #fs { display: none; }
  }
  @media (orientation: portrait) and (pointer: coarse) { #rotate { display: grid; } }
  @media (max-height: 520px) {
    .card { gap: 14px; }
    h1 { font-size: 32px; }
    h1::after { margin-top: 12px; }
    .sub { display: none; }
    .keys { font-size: 11px; }
    .keys > div { padding: 4px 0; }
  }
  @media (prefers-reduced-motion: reduce) { #rotate svg { animation: none; transform: rotate(-90deg); } }

  /* NEKROPYLON (2026-09-30): the name is built into the painting (the word as the gate of the dead on the hill), so nothing stands over
     the middle any more - the card goes low on the left on the fog, the shade with it; a squarer screen sees the whole painting */
  #veil { place-items: end start; padding: 0 0 max(4.5vh, 20px) max(4.5vw, 20px); }
  #veil::before { background-position: center 42%; }
  #veil::after {
    background:
      radial-gradient(62% 60% at 10% 100%, rgba(3,4,10,.8), rgba(3,4,10,.38) 55%, rgba(3,4,10,0) 100%),
      linear-gradient(to bottom, rgba(3,4,10,.18), rgba(3,4,10,0) 22%, rgba(3,4,10,0) 82%, rgba(3,4,10,.35));
  }
  .card { width: min(340px, 100%); gap: 14px; text-align: left; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sub { display: none; }
  .fuel { justify-self: start; width: 100%; }
  .keys { grid-template-columns: 1fr; gap: 0; font-size: 10.5px; }
  .keys > div { padding: 4px 0; }
  @media (max-aspect-ratio: 8/5) { #veil::before { background-size: contain; background-color: var(--night); } }
  @media (max-height: 520px) { .card { gap: 10px; } .keys { display: none; } }