/* Спільний вигляд сторінки-іграшки: одна іграшка на весь екран, підказка згори, кнопки знизу. */
  /* Розмір рахується від екрана: телефон, планшет, будь-яка орієнтація.
     --vh — висота без панелей браузера (dvh), де він є; --niz — смуга під кнопки. */
  :root {
    --vh: 100vh; --gap: 16px;
    --knopka: clamp(15px, 1.1vmin + 11px, 20px);
    --niz: calc(var(--knopka) * 2 + 44px + env(safe-area-inset-bottom));
  }
  @supports (height: 100dvh) { :root { --vh: 100dvh; } }
  html, body { height: 100%; }
  body {
    margin: 0; height: var(--vh); display: grid; place-items: center;
    background: #1b2a4a; color: #bed5ff;
    font-family: system-ui, sans-serif;
    overflow: hidden; overscroll-behavior: none;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .igrashka {
    /* портрет: іграшка на всю ширину, знизу лишається смуга під кнопки (і симетрично згори) */
    width: min(100vw, calc(var(--vh) - 2 * var(--niz)), 900px); /* на всю ширину: поля є в самому малюнку */ aspect-ratio: 1; display: block;
    touch-action: none; cursor: grab;
  }
  /* альбом: кнопки стоять по кутах, збоку від іграшки, тож вона бере майже всю висоту */
  @media (orientation: landscape) {
    .igrashka { width: min(calc(100vw - 2 * (var(--knopka) * 7 + 40px)), calc(var(--vh) - 2 * var(--gap)), 900px); }
  }
  .igrashka:active { cursor: grabbing; }
  .igrashka:focus-visible { outline: 3px solid #f2b705; outline-offset: 4px; border-radius: 22%; }
  .hint {
    position: fixed; left: 0; right: 0; top: calc(var(--gap) + 10px + env(safe-area-inset-top)); /* згори: внизу кнопки з довгими назвами */
    margin: 0; text-align: center; font-size: calc(var(--knopka) + 2px); opacity: .55; transition: opacity 1.2s;
    pointer-events: none;
  }
  /* альбом: іграшка займає всю висоту, тож підказка переходить у вільну бічну смугу ліворуч */
  @media (orientation: landscape) {
    .hint { top: 50%; right: auto; left: calc(var(--gap) + env(safe-area-inset-left)); width: calc(var(--knopka) * 7 + 24px); transform: translateY(-50%); }
  }
  .hint.gone { opacity: 0; }
  /* тихе посилання на всі іграшки — у лівому верхньому куті */
  .dodomu {
    position: fixed; z-index: 1; top: calc(var(--gap) + env(safe-area-inset-top)); left: calc(var(--gap) + env(safe-area-inset-left));
    padding: .4em .2em; color: inherit; opacity: .45; font-size: calc(var(--knopka) - 1px); font-weight: 600;
    text-decoration: none; letter-spacing: .02em;
  }
  .dodomu:hover, .dodomu:focus-visible { opacity: .85; }
  .knopka {
    position: fixed; bottom: calc(var(--gap) + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: .5em;
    padding: .65em 1em; min-height: 44px; box-sizing: border-box;
    border: 1px solid rgba(190,213,255,.25); border-radius: 999px;
    background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: var(--knopka);
    cursor: pointer; touch-action: manipulation;
  }
  .knopka[aria-pressed="false"], .knopka.tysha { opacity: .5; }
  .zvuk { right: calc(var(--gap) + env(safe-area-inset-right)); }
  .oktava { left: calc(var(--gap) + env(safe-area-inset-left)); }