/* Game screen: gallows stage, keyboard, hint buttons, result screen, word-reveal overlay, fox stage. */

  /* ---------- GAME ----------
     Every margin/gap/size below that's followed by a clamp(min, Nvh, max) is sized off the window's
     actual height, not a fixed px — same reasoning as #screenStart in screens.css: at 100% browser zoom
     on a shorter window the whole screen (topbar through the keyboard) needs to shrink to keep fitting
     without a scrollbar, while staying at its original comfortable size on tall/generous windows. The
     keyboard (5 rows on Cyrillic) and the gallows .stage are the two biggest contributors, so those get
     the most aggressive clamps. */
  /* .app's 58px top padding only exists to clear the fixed coin counter in the corner; on a wide screen
     the game column is far from that corner, so the game screen doesn't need it */
  @media (min-width: 700px){
    .app:has(#screenGame.active){ padding-top: 10px; }
  }

  /* The head of the game screen is one grid of three columns: menu button + location/level line on the
     left, the gallows in the middle (starting right at the top), hint controls + heart on the right.
     Narrow screens get a different arrangement of the same elements further down (max-width:480px). */
  .game-head{
    display:grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); column-gap:12px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "menu  stage hints"
      "cat   stage heart"
      ".     stage .";
  }

  .game-head #pauseBtn{ grid-area:menu; justify-self:start; }

  .game-head .cat-line{
    grid-area:cat; justify-self:start; text-align:left; margin-top:8px;
    color:var(--ink-soft); font-size:17px; line-height:1.4; overflow-wrap:anywhere;
  }

  /* first half ("Остров костей") on its own line, the rest ("Уровень 3 · Сложно") below it — the " · "
     between them stays in the text (textContent is unchanged), it's just not shown */
  .game-head .cat-line .cat-a{ display:block; }

  .game-head .cat-line .cat-sep{ display:none; }

  .game-head .stage{ grid-area:stage; }

  .game-head .hint-row{ grid-area:hints; justify-self:end; }

  .game-head .lives-heart{ grid-area:heart; justify-self:end; margin-top:10px; margin-right:12px; }

  /* the "Виселица" title is not shown on the game screen (kept in the DOM: ui.js translates it) */
  #screenGame #gameTitle{ display:none; }

  .lives-heart{ width:46px; height:46px; flex-shrink:0; }

  .lives-heart path{ stroke: var(--ink); stroke-width: 2.5; }

  .lives-heart .heart-outline{ fill:none; }

  .lives-heart .heart-seg{ fill: var(--ink); transition: opacity .15s ease; }

  .lives-heart .heart-seg.gone{ opacity: 0; }

  /* width:168px and height:152px below are only a fallback for the instant before JS first runs (so the
     SVG's height:100% has something to resolve against) — 152px matches STAGE_HEIGHT_PCT.default (90.5%
     of 168px) exactly. From then on applyStageHeight() (js/stage.js, search "STAGE_HEIGHT_PCT") sets
     BOTH inline: it derives the width from a shared height budget (a slice of the window's own height)
     instead of a plain CSS clamp(), because a plain width clamp can't know that some skins (fox, skeleton)
     are much taller than others at the same width — see the comment on applyStageHeight() itself. */
  .stage{ position:relative; width:168px; height:152px; pointer-events:none; flex-shrink:0; }

  .stage svg{ display:block; width:100%; height:100%; }

  .fox-gallows-frame{
    position:absolute; top:0; left:0; height:100%; width:100%;
    object-fit:contain; object-position:top left; pointer-events:none;
  }

  .skeleton-gallows-frame{
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:contain; object-position:top left; pointer-events:none;
  }

  /* skeleton skin character: hangs from the noose drawn into skeleton-gallows-frame.
     left/top/width are set inline by JS from CHARACTER_BOX_LAYOUT.skeleton
     (a single %-based config shared with the fox skin's box, further down)
     instead of being hardcoded here. */
  .skin-stage-skeleton{
    position:absolute;
    transform: translateX(-50%);
    pointer-events:none;
  }

  .skin-stage-skeleton::before{ content:""; display:block; padding-top:198.61%; }

  .skin-stage-skeleton img{ position:absolute; }

  .stage path, .stage circle, .stage line{
    fill:none; stroke: var(--ink); stroke-width: 4.5;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* "dark" character skin — identical shapes to the classic stickman and its
     gallows post, just black instead of the usual ink-blue */
  #stickFigure.dark-skin-color path,
  #stickFigure.dark-skin-color circle,
  #stickFigure.dark-skin-color line,
  #defaultFrame.dark-skin-color line{ stroke:#000000; }

  .face-line{ stroke-width: 3.5 !important; }

  .word-row{
    display:flex; justify-content:center; flex-wrap: wrap; gap: 10px;
    margin: clamp(4px, 1.2vh, 10px) 0 clamp(6px, 1.6vh, 14px); padding: 0 6px;
  }

  .character-source{
    text-align:center; font-family:'Caveat',cursive; font-weight:700; font-size:16px;
    color: var(--ink-soft); margin: -8px 0 14px;
  }

  .slot{
    min-width: 26px; text-align:center; border-bottom: 4px solid var(--ink);
    font-family:'Caveat', cursive; font-weight:700; font-size: 32px; line-height: 1; padding-bottom: 3px;
    min-height: calc(1em + 7px); /* same height empty or guessed, so revealing a letter never grows the page */
  }

  .slot.space{ border-bottom: none; min-width: 16px; }

  .message{
    text-align:center; min-height: clamp(16px, 3vh, 28px); font-family:'Caveat', cursive;
    font-size: 23px; font-weight:700; margin-bottom: clamp(3px, 0.8vh, 6px);
  }

  /* the win/lose line only ever appears together with the result screen on top of it, so it takes no
     room in the layout at all (it would otherwise push the page past the window's height) */
  #screenGame{ position:relative; }

  #screenGame .message{ position:absolute; left:0; right:0; min-height:0; margin:0; pointer-events:none; }

  .message.win{ color: var(--green); }

  .message.lose{ color: var(--red); }

  .keyboard{
    display:flex; flex-direction:column; gap:9px;
  }

  .key-row{
    display:flex; gap:5px; justify-content:center;
  }

  .key{
    position:relative; flex: 1 1 0; max-width: 52px; height: 58px; border: 2.5px solid var(--ink); border-radius: 11px;
    background: var(--card); font-size: 21px; color: var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    user-select:none; transition: transform .1s ease, opacity .15s ease;
  }

  .key:active{ transform: scale(0.9); }

  .key.used{ pointer-events:none; opacity:0.55; }

  .key.correct{ border-color: var(--green); }

  .key.wrong{ border-color: var(--red); }

  .key svg.mark{ position:absolute; inset:0; width:100%; height:100%; }

  .key svg.mark path{ fill:none; stroke-width:5; stroke-linecap:round; }

  .key.correct svg.mark path{ stroke: var(--green); }

  .key.wrong svg.mark path{ stroke: var(--red); }

  .bottom-actions{ display:flex; justify-content:center; gap:10px; margin-top: clamp(6px, 1.4vh, 14px); }

  /* ---------- RESULT SCREEN (win/lose) ---------- */
  #screenGame{ position:relative; } /* anchors .result-overlay below to just this screen */
  .result-overlay{
    position:absolute; inset:0; z-index:15;
    display:flex; align-items:center; justify-content:center;
    /* no backdrop of its own: only the picture is drawn, and it may spill past the card edges */
    background:none;
    opacity:0; pointer-events:none; transition: opacity .25s ease;
    overflow:hidden;
  }

  /* the result picture is its own framed card, so no extra dashed frame around the screen */
  .result-overlay::before{ display:none; }

  .result-overlay.open{ opacity:1; pointer-events:auto; }
  /* while the result picture is up, nothing of the game screen (gallows, keyboard...) shows around it */
  #screenGame:has(.result-overlay.open) > :not(.result-overlay){ visibility:hidden; }

  .result-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }

  /* One picture per mood (win / lose). The word / reward / coin change are laid over its blank areas, the
     buttons sit right below it. Sizes inside the picture use container units (cqw = 1% of the picture's width),
     so everything scales with it; the picture itself shrinks on short screens so the buttons never fall off. */
  .result-overlay.mood-win{  --art-ratio:.5625; --art-h:1280; --art-img:url(../assets/images/result-win.webp); }
  .result-overlay.mood-lose{ --art-ratio:.5467; --art-h:1317; --art-img:url(../assets/images/result-lose.webp); }

  .result-card{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center;
    gap:4px; width:100%; padding: 8px 12px;
  }

  .result-art{
    position:relative; container-type:inline-size;
    width:min(100%, 384px, calc((100vh - 24px) * var(--art-ratio, .5)));
    width:min(100%, 384px, calc((100dvh - 24px) * var(--art-ratio, .5)));
    aspect-ratio: 720 / var(--art-h, 1280);
    background: var(--art-img) center / 100% 100% no-repeat;
  }

  /* localised heading under the picture (the banner drawn in the picture is English-only) */
  .result-title{ margin:0; font-size:7.6cqw; line-height:1.05; letter-spacing:.04em; font-weight:700; color:var(--ink); }

  .result-info{
    position:absolute; left:7%; right:7%;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1.4cqw;
    text-align:center; font-family:'Caveat', cursive; font-weight:700; color: var(--ink);
  }
  /* the blank lower part of the card, under the drawing */
  .result-overlay.mood-win .result-info{ top:60.2%; }
  .result-overlay.mood-lose .result-info{ top:68.2%; }

  /* the solved word always stays on ONE line: it sizes to its content and
     fitResultWord() scales it down when it's wider than the space it has */
  .result-word{
    display:flex; flex-wrap:nowrap; justify-content:center; gap:1.2cqw;
    width:max-content; max-width:none; flex-shrink:0;
    transform-origin:center center;
  }
  .result-info .slot{ font-size:8.6cqw; min-width:6.6cqw; border-bottom-width:.9cqw; padding-bottom:.5cqw; }
  .result-info .slot.space{ min-width:3cqw; }

  .result-coins{
    display:flex; align-items:center; gap:2cqw;
    font-family:'Caveat', cursive; font-weight:700; font-size:6.4cqw; line-height:1.08; color: var(--ink);
  }
  .result-coins svg{ width:7.4cqw; height:7.4cqw; }
  .result-overlay.mood-lose .result-coins{ font-size:6.4cqw; }
  .result-overlay.mood-lose .result-coins svg{ width:7.4cqw; height:7.4cqw; }

  /* the cloud buttons live INSIDE the card, in the extended bottom part of the picture */
  .result-actions{ position:absolute; left:0; right:0; bottom:5.5%; display:flex; flex-direction:column; align-items:center; gap:0; }
  .result-actions .cloud-btn{ padding:3.6cqw 9cqw; }
  .result-actions .cloud-btn-label{ font-size:5.6cqw; }

  .cloud-btn{
    position:relative; background:none; border:none; cursor:pointer;
    padding: 15px 34px; display:flex; align-items:center; justify-content:center;
  }

  .cloud-btn-bg{ position:absolute; left:0; top:0; width:100%; height:100%; }

  .cloud-btn-label{
    position:relative; font-family:'Caveat', cursive; font-weight:700; font-size:20px; color: var(--ink);
  }

  .cloud-btn:active .cloud-btn-label{ transform: scale(0.96); }

  .confetti-piece{
    position:absolute; width:5px; height:5px; opacity:0;
    animation-name: confettiFall; animation-timing-function: linear; animation-iteration-count: infinite;
  }

  .crack-piece{ position:absolute; opacity:0; animation: crackFade 5.5s ease-in-out infinite; }

  .result-coins{ flex-wrap:wrap; justify-content:center; text-align:center; max-width:86cqw; }

  /* ---------- WORD REVEAL OVERLAY (scratch-off) ---------- */
  .word-reveal-panel{
    position: relative; align-items:center; gap:16px; padding: 26px 20px 22px;
  }

  .word-reveal-panel .reveal-close-btn{
    position:absolute; top:10px; right:10px; width:32px; height:32px;
    border:2.5px solid var(--ink); border-radius:50%; background:var(--card);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:'Caveat',cursive; font-weight:700; font-size:20px; line-height:1;
    color:var(--ink); padding:0;
  }

  .word-reveal-panel .reveal-close-btn:active{ transform: scale(0.92); }

  .scratch-wrap{
    position: relative; width:100%; min-height:64px; border:2.5px solid var(--ink);
    border-radius:12px; background: var(--card); overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }

  .scratch-word{
    font-family:'Caveat',cursive; font-weight:700; font-size:30px; letter-spacing:4px;
    color: var(--ink); text-align:center; padding: 14px 10px; word-break:break-word;
    user-select:none;
  }

  .scratch-wrap canvas{
    position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:pointer;
  }

  .word-reveal-panel .scratch-hint{
    text-align:center; font-size:13px; color:var(--ink-soft); margin-top:2px;
  }

  /* ---------- HINT BUTTON (lightbulb) ---------- */
  /* stacked in a column next to the gallows by default (see .stage-row above) — the max-width:480px
     query further down switches this back to a row below the gallows on narrow screens. */
  .hint-row{
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
    margin: 0; min-width:0; max-width:100%;
  }

  .hint-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin: 0; padding: clamp(5px, 1vh, 8px) 18px;
    border:2.5px solid var(--ink); border-radius:999px; background: var(--card);
    font-family:'Caveat',cursive; font-weight:700; font-size:18px; color:var(--ink);
    cursor:pointer; animation: hintPulse 1.4s ease-in-out infinite;
  }

  .hint-btn:active{ transform: scale(0.95); }

  .hint-btn[disabled]{ opacity:.5; cursor:default; animation:none; }

  .hint-btn .hint-icon{ flex-shrink:0; display:block; }

  /* ---------- generic "watch an ad for a reward" buttons ----------
     The wheel's bonus-spin button reuses the same ink-blue card look as
     every other button in the game (via the shared .btn/.btn.block classes)
     so it doesn't stand out as a different kind of UI — the little play-
     triangle badge is the only cue that it launches an ad. Same look is
     reused wherever an ad-reward is offered, across whichever ad network
     ends up wired to requestRewardAd() on a given platform build. */
  .ad-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
  }

  .ad-btn-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; background: var(--ink); color: var(--paper);
    font-size:10px; flex-shrink:0; line-height:1;
  }

  /* same ink/card look as .hint-btn right next to it (not the gold "ad" tint
     it used to have) — gold text/border was disappearing against several of
     the warm-toned background skins (aged paper, origami sunset, ...); the
     little gold ad-btn-icon badge alone is still enough of an "ad" cue */
  .hint-ad-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    flex-shrink:1; min-width:0; max-width:100%; padding: clamp(5px, 1vh, 8px) 14px;
    text-align:center; line-height:1.1; /* a long label (other languages) wraps instead of overflowing the column */
    border:2.5px solid var(--ink); border-radius:999px; background: var(--card);
    font-family:'Caveat',cursive; font-weight:700; font-size:16px; color: var(--ink);
    cursor:pointer;
  }

  .hint-ad-btn:active{ transform: scale(0.95); }

  .hint-ad-btn[disabled]{ opacity:.4; cursor:default; }

  .hint-ad-btn[disabled]:active{ transform:none; }

  .hint-ad-btn .ad-btn-icon{ width:16px; height:16px; font-size:9px; background: var(--gold); flex-shrink:0; }

  /* not enough room beside the gallows on a narrow phone for the hint column too (especially the wide
     "Смотреть рекламу" button) — fall back to the original stacked layout: gallows on top, hint controls
     in a row underneath it. */
  /* no room for three columns on a phone: menu / location line / heart across the top, the gallows
     centered under them, the hint controls in a row under the gallows */
  @media (max-width: 480px){
    .game-head{
      grid-template-columns: auto minmax(0,1fr) auto; column-gap:8px;
      grid-template-rows: auto auto auto;
      grid-template-areas:
        "menu  cat   heart"
        "stage stage stage"
        "hints hints hints";
    }
    .game-head .cat-line{ justify-self:center; align-self:center; text-align:center; margin-top:0; }
    .game-head .lives-heart{ align-self:center; margin:0; }
    .game-head .stage{ justify-self:center; margin-top:6px; }
    .game-head .hint-row{
      justify-self:center; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap;
      margin: 6px 0 4px;
    }
  }

  @media (max-width: 380px){
    /* .stage's width AND height are both set inline by applyStageHeight() (js/stage.js), which already
       switches to the narrower 142px budget itself below this same 380px breakpoint — no CSS override
       needed here any more. .skin-stage-fox's box is still %-of-width, so it stays proportioned too. */
    .slot{ font-size:26px; min-width:20px; }
    .key{ font-size:18px; max-width:44px; height:54px; }
    .key-row{ gap:3.5px; }
    .keyboard{ gap:7px; }
  }

  /* very short landscape embed frames (below 600px of height): the stage is already at its minimum
     (see fitStageToWindow() in stage.js), so the 5-row Russian keyboard needs slightly lower keys to
     fit without a scrollbar. Normal windows keep the full 58px keys. */
  @media (min-width: 481px) and (max-height: 600px){
    .key{ height:48px; }
    .keyboard{ gap:7px; }
  }

  /* fox skin rendered on the game stage, built part-by-part like the gallows figure.
     left/top/width of the box itself come from CHARACTER_BOX_LAYOUT.fox, and
     every individual part's own offset/size comes from FOX_PART_LAYOUT — both
     JS configs, all in percent, further down this file (search "EDIT HERE").
     Nothing about fox position/size is set in this stylesheet any more, so
     there's exactly one place to change any of it instead of several. */
  .skin-stage-fox{
    position: absolute;
    transform: translateX(-50%);
    pointer-events: none; /* purely decorative artwork — must never intercept clicks
      meant for real UI (like the hint button) that sits below the stage; without
      this, any part of the fox that visually overflows past the stage's own box
      (which is easy given how tall/loosely-positioned the parts are) silently
      blocks clicks on whatever it's covering */
  }

  .skin-stage-fox::before{ content:""; display:block; padding-top: 191.67%; } /* keeps wrapper height = image aspect ratio (240x460 canvas) */
  .skin-stage-fox img{ position:absolute; top:0; left:0; }