/* lost-islands.css — платформенная оболочка «ЗАТЕРЯННЫХ ОСТРОВОВ» (js13k, MIT).
   Движок рисует канвас #g на весь вьюпорт (Screen.setSize ставит canvas.style и
   canvas.width/height от window) и двигает свои оверлеи (title / intro / loading /
   body / inventory / what / verb / time / win) через style.display. Здесь — базовая
   раскладка этих оверлеев (адаптированный оригинальный <style> js13k) + тулбар
   платформы (язык / пауза / звук-нет / фуллскрин), который лежит НАД игрой.
   Канвас адаптивный: не фиксированный 700px, а заполняет сцену, как в оригинале. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #06101c; color: #fff;
  font-size: 16px;
  font-family: "Lucida Console", Monaco, monospace;
}

/* ── сцена ──────────────────────────────────────────────────────────────── */
#li-stage { position: fixed; inset: 0; overflow: hidden; background: #06101c; }
#body { display: none; }
#g {
  display: block; width: 100%; height: 100%;
  border: 0; margin: 0; background: #000;
  image-rendering: pixelated; touch-action: none;
}

/* ── заголовок / интро / загрузка / победа (как в js13k) ────────────────── */
#title { padding: 2%; text-align: center; }
#title h1 { font-size: 480%; letter-spacing: -0.1em; margin: 0.1em 0 0 0; opacity: 0.4; }
#title .sub { font-size: 220%; letter-spacing: -0.05em; }
#title .credits { font-size: 100%; margin-top: 2em; opacity: 0.7; }
#title .ver { opacity: 0.5; }
#intro { display: none; max-width: 34em; margin: 1em auto; padding: 0 1em; }
#intro button {
  font-family: inherit; font-size: 150%; padding: 0.8em 1.6em; margin: 0 auto;
  display: block; border: solid 1px rgba(255,255,255,0.5); color: #fff;
  background: rgba(0,0,0,0.5); cursor: pointer;
}
#intro button span { font-size: 60%; display: block; margin-top: 0.5em; }
#intro p { margin: 1.4em 0; line-height: 1.35em; color: #a9c2d6; }
#loading { font-size: 180%; text-align: center; padding: 0.5em; color: #5252ff; }
#loading i { display: block; width: 2em; margin: 0 auto; font-size: 240%; font-style: normal; }
#loading .spin { animation: li-spin 3s infinite linear; }
@keyframes li-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#win { display: none; color: #ff5a5a; font-size: 120%; text-align: center; margin-top: 12vh; }
#win .winBig { font-size: 200%; }

/* ── HUD поверх канваса ─────────────────────────────────────────────────── */
#time { position: fixed; top: 0; left: 0; padding: 0.8em; color: #cfe3f5; }
#what {
  position: fixed; bottom: 0; left: 50%; width: 18em; margin-left: -9em;
  padding: 0.8em; text-align: center; border: solid 2px #5252ff; background: #000;
}
#verb { position: fixed; bottom: 3em; left: 50%; width: 18em; margin-left: -9em; text-align: center; color: #cfe3f5; }
#inventory {
  display: none;
  border: solid 2px #5252ff; max-width: 14em; background: rgba(0,0,0,0.82);
  position: fixed; top: 0; bottom: 0; right: 0; padding: 0.8em; overflow: auto;
}
#inventory h2 { font-size: 100%; margin: 0.6em 0 0.3em; }
#inventory ul { padding-left: 1.4em; margin: 0.2em 0; }
#inventory li { margin-bottom: 0.4em; }
#tips { font-size: 80%; color: #a9c2d6; }
#virtueCount, #people { text-align: right; }

/* ── тулбар платформы (язык / пауза / звук / фуллскрин) поверх игры ─────── */
#li-toolbar { position: fixed; top: 8px; right: 8px; z-index: 50; display: flex; gap: 6px; }
#li-toolbar .li-tool {
  font: 600 15px/1 "Lucida Console", Monaco, monospace; color: #cfe3f5;
  background: rgba(10,20,34,0.7); border: 1px solid rgba(120,160,200,0.4);
  border-radius: 6px; padding: 8px 10px; cursor: pointer; min-width: 34px;
}
#li-toolbar .li-tool:hover { background: rgba(30,52,82,0.85); color: #fff; }

/* ── подсказка и мобильный D-pad ────────────────────────────────────────── */
#li-hint {
  position: fixed; left: 50%; bottom: 9.5em; transform: translateX(-50%);
  z-index: 51; max-width: 90%; text-align: center; color: #eaf3fb;
  background: rgba(6,16,28,0.82); border: 1px solid rgba(120,160,200,0.35);
  border-radius: 8px; padding: 0.5em 0.9em; font-size: 14px;
}
#li-pad { position: fixed; left: 12px; bottom: 12px; z-index: 50; display: none; }
#li-pad button {
  font: 700 22px/1 monospace; color: #cfe3f5; background: rgba(10,20,34,0.7);
  border: 1px solid rgba(120,160,200,0.4); border-radius: 8px;
  width: 52px; height: 52px; cursor: pointer;
}
#li-pad .li-up { grid-area: u; } #li-pad .li-down { grid-area: d; }
#li-pad .li-left { grid-area: l; } #li-pad .li-right { grid-area: r; }
#li-pad .li-act { grid-area: a; font-size: 16px; }
@media (pointer: coarse) { #li-pad { display: grid; grid-template-areas: ". u ." "l a r" ". d ."; gap: 4px; } }