/* The stage, skills and navigation share the available browser height. */
html { overscroll-behavior: none; }
body { overscroll-behavior-y: none; }
body.shaman-overlay-open { overflow: hidden; }
.game-shell {
  --tap-art-width: min(218px, 57vw);
  --tap-row: calc(var(--tap-art-width) * 501 / 1600 + 26px);
  --slate-dock-width: min(264px, calc(100vw - 24px));
  --dock-height: calc(var(--slate-dock-width) * 587 / 1600);
  --mobile-skills-height: 244px;
  --slate-extra-stage-height: 0px;
  --oak-stage-growth: 0px;
  height: 100dvh;
  min-height: 560px;
  padding: var(--safe-top) 0 calc(var(--dock-height) + var(--safe-bottom));
  grid-template-areas: 'hud' 'order' 'hero' 'tap' 'skills';
  grid-template-rows: 64px max-content minmax(0, 1fr) var(--tap-row) var(--mobile-skills-height);
  border-inline: 0;
}
.game-shell > .hud { grid-area: hud; min-height: 0; padding-block: 2px; }
.hud .tier-button { height: 58px; flex-basis: 49px; }
.hud .tier-art { width: 49px; height: 54px; }
.hud .tier-count { left: 8px; bottom: 0; font-size: 10px; }
.hud .hud-main { gap: 3px; }
.hud .gear { flex-basis: 40px; width: 40px; height: 44px; }
.hud .gold-resource .resource-copy { align-items: flex-start; text-align: left; }
.game-shell > .order-board { grid-area: order; margin-block: 0 32px; }
.game-shell > .hero-zone {
  grid-area: hero;
  min-height: 0;
  padding: 0 8px;
  overflow: hidden;
}
.game-shell > .tap-zone { grid-area: tap; padding: 1px 12px 0; align-content: start; gap: 6px 0; }
.tap-sub { font-size: 12px; line-height: 16px; }
.game-shell > .skills-grid.oak-skills {
  grid-area: skills;
  min-height: 0;
  height: var(--mobile-skills-height);
  padding: 3px 7px 5px;
  gap: 5px 8px;
  background: none;
}
.oak-skills .oak-content {
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  grid-template-rows: 17px minmax(0, 1fr) minmax(0, 1fr) 44px;
  grid-template-areas: 'medallion title' 'medallion description' 'medallion effect' 'upgrade upgrade';
  align-content: stretch;
  gap: 0 4px;
  padding: 8px 10px 6px;
  min-height: 0;
}
.oak-skills .oak-title { font-size: 14px; line-height: 17px; text-align: left; }
.oak-skills .oak-label { font-size: 11px; line-height: 1.1; align-self: end; }
.oak-skills .oak-effect { font-size: 14px; line-height: 1; gap: 2px; align-self: start; }
.oak-skills .oak-medallion { width: min(100%, 48px); justify-self: center; }
.oak-skills .oak-upgrade:is(:enabled, :disabled) { min-height: 44px; }
.oak-skills .oak-upgrade-face { min-height: 44px; padding: 2px 5px; font-size: 15px; }
.oak-skills .oak-upgrade-face img { width: 16px; height: 16px; }
.oak-skills .oak-card::before { border-image-width: 25px 18px 18px 20px; }
.game-shell .forest {
  top: calc(-1 * (var(--mobile-skills-height) + var(--tap-row) + var(--dock-height) + var(--safe-bottom)));
  bottom: 0;
  background-size: cover;
  background-position: center bottom;
}
.game-shell .shading { background: linear-gradient(#08232d55, transparent 25%, transparent 48%, #091d263d); }
.game-shell .helper-launch {
  bottom: calc(var(--mobile-skills-height) + var(--tap-row) + var(--dock-height) + var(--safe-bottom) + 8px);
  width: 44px;
  height: 48px;
}
.game-shell .slate-dock,
.game-shell:not(:has(.veil)) .slate-dock {
  position: absolute;
  bottom: var(--safe-bottom);
  z-index: 100;
}
.game-shell .slate-dock .nav-button { min-width: 44px; min-height: 44px; }
.slate-dock .nav-label { font-size: 11px; line-height: 12px; }
.veil {
  top: 0 !important;
  height: calc(100dvh - var(--dock-height) - var(--safe-bottom));
  padding: calc(8px + var(--safe-top)) 8px 8px;
  overscroll-behavior: none;
  touch-action: pan-y;
}
.modal-body { min-height: 0; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
.modal.enamel-modal { height: min(704px, 100%); }
.guide-scroll { touch-action: pan-y; overscroll-behavior: none; }
.guide-layer { touch-action: pan-y; }
.game-shell:has(.guide-layer) .modal-body { overflow: hidden; }
.guide-close { width: 44px; height: 44px; }

@media (max-height: 700px) {
  .game-shell { --mobile-skills-height: 208px; --tap-art-width: min(190px, 55vw); --slate-dock-width: min(242px, calc(100vw - 24px)); grid-template-rows: 54px max-content minmax(0, 1fr) var(--tap-row) var(--mobile-skills-height); }
  .hud .tier-button { height: 50px; flex-basis: 44px; }
  .hud .tier-art { width: 44px; height: 47px; }
  .oak-skills .oak-content { grid-template-rows: 16px minmax(0, 1fr) minmax(0, 1fr) 44px; padding-top: 5px; padding-bottom: 3px; }
  .oak-skills .oak-title { line-height: 16px; }
  .oak-skills .oak-medallion { width: min(100%, 34px); }
  .game-shell > .order-board { max-width: 320px; margin-bottom: 32px; }
}
@media (max-width: 359px) {
  .oak-skills .oak-title { font-size: 12px; }
  .oak-skills .oak-label { font-size: 10px; }
  .oak-skills .oak-effect { font-size: 12px; }
  .game-shell > .skills-grid.oak-skills { column-gap: 5px; padding-inline: 5px; }
}

@media (max-height: 600px) {
  .game-shell {
    --mobile-skills-height: 188px;
    --tap-art-width: min(170px, 53vw);
    --slate-dock-width: min(216px, calc(100vw - 24px));
    grid-template-rows: 46px max-content minmax(0, 1fr) var(--tap-row) var(--mobile-skills-height);
  }
  .hud .tier-button { height: 44px; }
  .hud .tier-art { height: 42px; }
  .game-shell > .order-board { margin-bottom: 26px; }
  .game-shell > .skills-grid.oak-skills { padding-block: 2px; gap: 4px 5px; }
  .oak-skills .oak-content {
    grid-template-rows: 14px minmax(0, 1fr) minmax(0, 1fr) 44px;
    padding-block: 2px;
  }
  .oak-skills .oak-title { font-size: 12px; line-height: 14px; }
  .oak-skills .oak-medallion { width: min(100%, 28px); }
  .oak-skills .oak-label { font-size: 10px; }
  .oak-skills .oak-effect { font-size: 12px; }
}