/* A permanent lower lane. The game scrolls in its own viewport above it. */
:root {
  --ad-card-height: 50px;
  --ad-reserve: calc(78px + env(safe-area-inset-bottom, 0px));
  --play-height: calc(100dvh - var(--ad-reserve));
}
html { height: 100%; overflow: hidden; }
body { height: 100dvh; min-height: 0; display: block; overflow: hidden; padding: 0; }
#app {
  position: fixed;
  inset: 0 0 var(--ad-reserve);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px 52px;
}
.shell { min-height: var(--play-height); padding-bottom: 16px; }
#advertising-slot {
  position: fixed;
  inset: auto 0 0;
  height: var(--ad-reserve);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  z-index: 90;
}
.advertising-label { font: 10px/12px system-ui, sans-serif; color: var(--muted); }
#damas-ad { flex: 0 0 50px; }
/* Hide the entire unit (never crop it) below its minimum supported width. */
@media (max-width: 319px) { #damas-ad { display: none !important; } }
/* These controls belong to the scrollable area, not to the advertising lane. */
.handoff-action { bottom: 0; padding-bottom: 8px; }
/* A visual continuation, never a second scroller or a layer that catches taps. */
.scroll-cue {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--ad-reserve) + var(--scroll-cue-lift, 0px));
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity .16s ease;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #182b30cc 72%, var(--bg));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(transparent, #000 75%);
  mask-image: linear-gradient(transparent, #000 75%);
}
.scroll-cue span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  border-radius: 20px;
  background: #182b30df;
  color: #e1c58f;
  font-size: .6875rem;
  line-height: 1.6;
}
.scroll-cue svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.scroll-cue[data-visible='true'] { opacity: 1; }
body:has(dialog[open]) .scroll-cue { opacity: 0; }
#notice { bottom: calc(var(--ad-reserve) + 12px); }
#modal, #fullscreen-dialog {
  top: calc((100dvh - var(--ad-reserve)) / 2);
  left: 50%;
  bottom: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  max-height: calc(100dvh - var(--ad-reserve) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}