.quest-card {
  margin: 0 16px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s;
}
.quest-card:active { transform: scale(.99); }

.quest-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.quest-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.quest-card-cover-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-container), var(--secondary-container));
}
.quest-card-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.45));
  pointer-events: none;
}
.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: var(--on-primary-container);
  background: rgba(208, 238, 244, .92);
}
.badge-audio { top: 8px; right: 8px; }
.badge-progress {
  top: 8px; left: 8px;
  background: rgba(255, 240, 199, .95);
  color: var(--on-secondary-container);
}
.badge-price,
.badge-purchased {
  bottom: 8px; right: 8px;
}
.badge-price {
  background: var(--primary);
  color: var(--on-primary);
}
.badge-purchased {
  background: rgba(208, 240, 208, .96);
  color: var(--on-tertiary-container);
}
.quest-card-body {
  padding: 12px 16px 16px;
}
.quest-card-body h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quest-card-stats {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--on-surface-variant);
}
.quest-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.list-page {
  padding: 12px 0 16px;
}
.list-page .list-items > * + * {
  margin-top: 16px;
}

.profile-page {
  padding: 12px 16px 0;
}
.profile-card {
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.profile-card > div:not(.profile-card-icon) {
  flex: 1;
  min-width: 0;
}
.profile-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 22px;
}
.profile-card h2,
.profile-section-title {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.3;
}
.profile-card p {
  margin: 0 0 12px;
  color: var(--on-surface-variant);
  font-size: 14px;
}
.profile-card p:last-child {
  margin-bottom: 0;
}
.profile-auth-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--on-surface);
}
.profile-auth-label strong {
  color: var(--on-surface);
  font-weight: 600;
}
.auth-provider-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.auth-provider-icon__img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.profile-section-title {
  margin-top: 20px;
  margin-bottom: 12px;
}

.oauth-login-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
a.oauth-login-btn {
  text-decoration: none;
  box-sizing: border-box;
  gap: 10px;
}
.oauth-login-btn__label {
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.oauth-login-btn .auth-provider-icon--button {
  flex-shrink: 0;
}
.oauth-login-btn--google { background: #fff; color: #1a1a1a; border: 1px solid var(--outline); }
.oauth-login-btn--yandex { background: #fc3f1d; color: #fff; }
.oauth-login-btn--vk { background: #0077ff; color: #fff; }

.auth-done-page {
  min-height: 100vh;
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 16px;
  text-align: center;
  color: var(--on-surface);
  background: var(--background);
}

.city-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.city-chips::-webkit-scrollbar { display: none; }

/* ── Detail ── */
.detail-page { padding: 12px 16px 24px; }
.detail-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-hero__thumb {
  display: block;
  width: 100%;
  max-height: 33vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: zoom-in;
  text-align: left;
}
.detail-hero__thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.detail-hero__thumb img {
  display: block;
  width: 100%;
  max-height: 33vh;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  vertical-align: bottom;
}
/* Narrower than 4:3: 4:3 preview + center crop. At least 4:3 wide: full width, natural height. */
.detail-hero__thumb--crop {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: min(100%, calc(33vh * 4 / 3));
  margin-inline: auto;
}
.detail-hero__thumb--crop img {
  max-height: none;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.detail-hero__thumb--natural img {
  height: auto;
}
.detail-price { font-size: 18px; font-weight: 700; margin: 16px 0; }
.detail-desc { white-space: pre-wrap; font-size: 15px; line-height: 1.55; }
.progress-card {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  margin: 12px 0;
}
.progress-card strong { display: block; margin-bottom: 2px; }

.download-status { margin-top: 12px; font-size: 13px; color: var(--on-surface-variant); }
.download-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
}
.completion-thanks svg {
  margin-left: 4px;
  color: var(--primary);
}
.completion-feedback-actions {
  width: 100%;
  margin-top: 0;
}
.progress-bar {
  height: 6px;
  background: var(--surface-variant);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  transition: width .25s;
}

/* ── Gameplay ── */
.gameplay { padding: 12px 16px 24px; }
.gameplay--nav-screen,
.gameplay--task-screen {
  padding-bottom: 0;
}
.gameplay-navigating {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 -16px;
  padding: 0 16px;
}
.gameplay--nav-screen .gameplay-navigating {
  height: calc(100dvh - 56px - 12px);
  max-height: calc(100dvh - 56px - 12px);
}
.gameplay-navigating-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gameplay-navigating-map {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gameplay-navigating-map-leaflet {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gameplay-coords-panel {
  flex-shrink: 0;
  min-width: 0;
}
.gameplay-coords-panel-scale-outer {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.gameplay-coords-panel-scale-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  width: max-content;
  max-width: none;
}
.gameplay-coords-panel__leading {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}
.gameplay-coords-panel__leading .gameplay-answer-revealed__copy {
  flex-shrink: 0;
}
.gameplay-coords-panel__text {
  flex: 0 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.3;
  display: flex;
  align-items: center;
}
.gameplay-coords-panel__maps {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
}
.gameplay-coords-panel__maps-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  text-align: center;
}
.gameplay-coords-panel__maps-label > span {
  display: block;
}
.gameplay-navigating-media {
  flex-shrink: 0;
}
.gameplay-navigating-bar {
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  margin-top: 8px;
  background: var(--background);
}
.gameplay-navigating-hint {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
}
.gameplay-navigating-bar .actions-row {
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid var(--outline);
}
.gameplay-task-screen {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 -16px;
  padding: 0 16px;
  /* Room above the keyboard; set from JS via visualViewport (GameplayPage). */
  padding-bottom: var(--gameplay-keyboard-inset, 0px);
}
.gameplay--task-screen .gameplay-task-screen {
  height: calc(100dvh - 56px - 12px);
  max-height: calc(100dvh - 56px - 12px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gameplay-task-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
/* Centers task + hints vertically when short; margins collapse when content overflows. */
.gameplay-task-scroll-body {
  flex: 0 0 auto;
  width: 100%;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.gameplay-task-scroll-body > :not(.gameplay-task-card) {
  align-self: stretch;
}
.gameplay-task-card {
  width: 100%;
  max-width: 22rem;
  box-sizing: border-box;
  margin-inline: auto;
  padding: 10px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.gameplay-task-card h2 {
  margin: 0 0 6px;
  font-size: 17px;
}
.gameplay-task-card .media-strip {
  margin-top: 0;
  margin-bottom: 8px;
}
.gameplay-task-card .media-strip:last-child {
  margin-bottom: 0;
}
.gameplay-task-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.gameplay-task-card .quest-rich-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.gameplay-task-card .media-strip + p {
  margin-top: 4px;
}
.gameplay-task-card .media-strip + .quest-rich-text {
  margin-top: 4px;
}
.gameplay-task-card p + .media-strip {
  margin-top: 8px;
}
.gameplay-task-card .quest-rich-text + .media-strip {
  margin-top: 8px;
}
.gameplay-task-bar {
  flex-shrink: 0;
  padding-top: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  margin-top: 8px;
  border-top: 1px solid var(--outline);
  background: var(--background);
}
.gameplay-task-bar .answer-box {
  margin-top: 0;
}
.gameplay-task-bar .actions-row {
  margin-top: 10px;
}
.gameplay-task-bar .gameplay-task-hints {
  flex-wrap: nowrap;
}
.gameplay-task-bar .gameplay-task-hints .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  font-size: 14px;
  padding-inline: 12px;
}
.gameplay h2 { font-size: 18px; font-weight: 700; margin: 4px 0 10px; }
.gameplay p { font-size: 15px; line-height: 1.55; margin: 6px 0; white-space: pre-line; }
.gameplay .quest-rich-text {
  font-size: 15px;
  line-height: 1.55;
  margin: 6px 0;
}
.gameplay .media-strip {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gameplay .media-strip > .audio-player {
  margin-top: 0;
}
.gameplay .media-strip__thumb {
  display: block;
  width: 100%;
  max-height: 33vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: zoom-in;
  text-align: left;
}
.gameplay .media-strip__thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.gameplay .media-strip__thumb img {
  display: block;
  width: 100%;
  max-height: 33vh;
  height: auto;
  margin-top: 0;
  border-radius: var(--radius-md);
  object-fit: contain;
  vertical-align: bottom;
}

/* Native player, sized like a photo so a step with video reads the same as a
   step with a picture. The poster stands in until playback starts, so nothing
   of the clip itself is fetched on arrival. */
.gameplay .media-strip__video {
  display: block;
  width: 100%;
  max-height: 40vh;
  border-radius: var(--radius-md);
  background: #000;
}

/* ── Swipeable media carousel (fields with 2+ images) ──
   Swipeability cues: the next slide peeks in from the edge, an "i / n" counter
   sits on the slide, and the active dot differs by SHAPE (pill), not colour
   alone (colour-blind safe). */
.media-carousel {
  position: relative;
}
.media-carousel__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.media-carousel__track::-webkit-scrollbar { display: none; }
.media-carousel__slide {
  /* Width follows the frame height so a short (landscape) viewport can't
     stretch the slide into a wide letterbox; on portrait the 86% cap wins
     and keeps the peek. */
  flex: 0 0 min(86%, calc(33vh * 3 / 2));
  min-width: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
}
.media-carousel__thumb {
  display: block;
  width: 100%;
  height: 33vh;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
}
/* Short landscape (phones held sideways): 33vh is tiny — give the frame more
   height and let its width grow with it. */
@media (orientation: landscape) and (max-height: 600px) {
  .media-carousel__thumb { height: 78vh; }
  .media-carousel__slide { flex-basis: min(86%, calc(78vh * 3 / 2)); }
}
.media-carousel__thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.media-carousel__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--surface-variant);
}
/* Per-image caption under the inline preview (full text lives in the lightbox) */
.media-figure {
  margin: 0;
  min-width: 0;
}
.media-caption {
  margin-top: 6px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--on-surface-variant);
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Lightbox (yarl Captions plugin) full caption, centered to match previews */
.yarl__slide_description {
  text-align: center;
}
/* Extreme-length captions scroll instead of covering the whole image */
.yarl__slide_description_container {
  max-height: 40vh;
  overflow-y: auto;
}

.media-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.media-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--on-surface);
  opacity: 0.35;
  transition: width 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}
.media-carousel__dot--active {
  width: 18px;
  opacity: 1;
  background: var(--primary);
}
/* Desktop-only chevrons; touch users swipe */
.media-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.media-carousel__nav--prev { left: 8px; }
.media-carousel__nav--next { right: 8px; }
@media (hover: hover) and (pointer: fine) {
  .media-carousel:hover .media-carousel__nav,
  .media-carousel__nav:focus-visible {
    display: flex;
  }
}

/* Custom audio chrome: native `<audio controls>` can render invisible sliders/icons
   while keeping hit-targets (OS color-scheme + inherited typography quirks). */
.audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--surface-variant);
  border-radius: var(--radius-md);
  border: 1px solid var(--outline);
}
.audio-player audio { display: none; }
.audio-player__toggle {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--on-primary);
  transition: opacity .15s;
}
.audio-player__toggle:active { opacity: .88; }
.audio-player__range {
  flex: 1;
  min-width: 0;
  height: 8px;
  accent-color: var(--primary);
}
.audio-player__range:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.audio-player__time {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.2;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.audio-player__rate {
  flex-shrink: 0;
  max-width: 5.5rem;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.2;
  color: var(--on-surface-variant);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.gameplay .answer-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.gameplay h2 {
  display: flex;
  align-items: center;
  gap: 0.35em;
  flex-wrap: wrap;
}
.gameplay .answer-box input {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--outline);
  font-size: 16px;
}
.gameplay .answer-box input:focus { outline: none; border-color: var(--primary); }
.answer-wrong {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--error);
  font-size: 14px;
}
.answer-wrong svg { flex-shrink: 0; margin-top: 2px; }
.gameplay-correct-title {
  font-size: 21px;
}
.gameplay-correct-title svg {
  color: #6BCB6B;
}
.hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-top: 10px;
}
.hint svg { flex-shrink: 0; margin-top: 2px; }
.hint__rich {
  flex: 1;
  min-width: 0;
  align-self: stretch;
}
.hint__rich .quest-rich-text {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.hint.gameplay-coords-panel {
  align-items: center;
}
.hint.gameplay-coords-panel svg {
  margin-top: 0;
}
.gameplay-answer-revealed {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gameplay-answer-revealed__text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.gameplay-answer-revealed__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-family: inherit;
  line-height: 1;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--on-tertiary-container);
  cursor: pointer;
  transition: opacity .15s;
}
.gameplay-answer-revealed__copy:hover {
  opacity: .88;
}
.gameplay-answer-revealed__copy:active {
  opacity: .75;
}
.gameplay-answer-revealed__copy:focus {
  outline: none;
}
.gameplay-answer-revealed__copy:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.gameplay-answer-revealed__copy svg {
  margin-top: 0;
}
.gameplay-map-wrap {
  margin: 10px 0 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gameplay-map-wrap--fill {
  flex: 1;
  min-height: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
}
.gameplay-map-wrap .leaflet-container {
  font-family: inherit;
  background: var(--surface-variant);
}
.gameplay-map-wrap--fill .leaflet-container {
  flex: 1;
  min-height: 0;
}
.actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.actions-row .btn { flex: 1; min-width: 140px; }

/* ── Completion ── */
.completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 16px;
}

.completion-celebration {
  width: min(100%, 360px);
  margin: 0 auto;
  padding: 18px 20px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 2px solid var(--secondary);
  box-shadow:
    0 0 0 1px var(--surface) inset,
    0 0 0 3px rgba(139, 105, 20, 0.2) inset,
    0 6px 20px rgba(26, 107, 122, 0.1),
    var(--shadow);
}

.completion-celebration-icon {
  font-size: 44px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9A227;
  filter: drop-shadow(0 1px 2px rgba(201, 162, 39, 0.35));
}

.completion-celebration-title {
  margin: 12px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--on-surface);
}

.completion-celebration-message {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--on-primary-container);
  white-space: pre-wrap;
}

.completion textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--outline);
  resize: vertical;
}

/* Gameplay header: progress + subtle skip + burger menu */
.gameplay-topbar .gameplay-topbar-end {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 6px;
}
.gameplay-topbar-progress {
  font-size: 13px;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
/* Leaflet map panes use z-index ~200–700; keep gameplay header above the map. */
.topbar.gameplay-topbar {
  z-index: 3000;
}
.gameplay-menu {
  position: relative;
}
.gameplay-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}
.gameplay-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--on-surface);
  background: none;
  border: none;
  cursor: pointer;
}
.gameplay-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.gameplay-menu-item:active:not(:disabled) {
  background: var(--surface-variant);
}
.gameplay-menu-item + .gameplay-menu-item {
  border-top: 1px solid var(--outline);
}