/* App controls are kept separate from screen artwork/layout styles. */
.top-actions { display: flex; flex: none; align-items: center; flex-wrap: nowrap; gap: .75rem; }
.install-app { position: relative; white-space: nowrap; flex: none; }
.install-app > svg { width: 1.6rem; height: 1.6rem; flex: none; }
.install-app__badge { position: absolute; right: -.2rem; bottom: -.2rem; padding: .1rem .3rem; border-radius: 1rem; background: var(--c-violet); color: white; font-size: .65rem; line-height: 1.2; }
.install-app__badge[hidden] { display: none !important; }
.map__top { --header-control: 3.5rem; display: grid; grid-template-columns: var(--header-control) minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.map__top > .btn--round, .map__top .top-actions > .btn { height: var(--header-control); min-height: var(--header-control); }
.map__top > .btn--round, .map__top .top-actions > .btn--round { width: var(--header-control); min-width: var(--header-control); padding: 0; }
.map__top .top-actions { justify-self: end; }
.map__top .player-chip { width: 100%; max-width: 16rem; height: var(--header-control); min-height: var(--header-control); gap: .5rem; padding: .25rem .75rem .25rem .25rem; overflow: hidden; }
.map__top .player-chip__avatar { width: calc(var(--header-control) - .75rem); height: calc(var(--header-control) - .75rem); }
.map__top .player-chip__text { min-width: 0; }
.map__top .player-chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map__top .player-chip__stars { white-space: nowrap; font-size: .85rem; }

@media (max-width: 39.99rem) {
  .map__top { --header-control: 3rem; gap: .5rem; }
  .top-actions { gap: .5rem; }
  .top-actions > .btn { width: 3rem; min-width: 3rem; height: 3rem; min-height: 3rem; padding: 0; }
  .top-actions .install-app > [data-offline-caption] { display: none; }
  .map__top .player-chip { gap: .35rem; padding-right: .5rem; }
  .map__top .player-chip__name { font-size: 1rem; }
  .map__top .player-chip__stars { gap: .15rem; font-size: .75rem; }
  .map__top .player-chip__stars svg { width: .85rem; height: .85rem; }
  .welcome__top { gap: .5rem; }
  .welcome__top .lang-switch { min-width: 0; padding: .25rem; gap: 0; }
  .welcome__top .lang-switch > svg { width: 1.2rem; height: 1.2rem; margin-right: .25rem; }
  .welcome__top .lang-switch button { min-width: 2.5rem; min-height: 2.5rem; padding: 0 .4rem; font-size: .85rem; }
}

.offline-notice { position: fixed; z-index: var(--z-toast); bottom: calc(var(--safe-b) + 1rem); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; width: min(38rem, calc(100% - 1.5rem)); padding: .85rem; border: 2px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); box-shadow: 0 .3rem 1rem #0002; }
.offline-notice[hidden], .offline-notice [hidden], .offline-dialog [hidden] { display: none !important; }
.offline-notice[data-kind="ready"] { border-color: var(--c-teal-deep, #168c75); }
.offline-notice[data-kind="ready"] .offline-notice__icon { color: var(--c-teal-deep, #168c75); }
.offline-notice[data-kind="error"] { border-color: var(--c-coral, #cf5a76); }
.offline-notice__icon svg { width: 1.6rem; height: 1.6rem; }
.offline-notice__body { font-size: .95rem; line-height: 1.35; }
.offline-notice__close { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; grid-column: 3; grid-row: 1; }
.offline-notice > .btn:not(.offline-notice__close) { grid-column: 2; justify-self: start; min-height: 2.75rem; padding: 0 .75rem; font-size: .85rem; }

.gate__card.offline-dialog { width: min(100%, 38rem); }
.offline-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; }
.offline-choice { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 1rem; text-align: left; border: 2px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink); cursor: pointer; }
.offline-choice[aria-pressed="true"] { border-color: var(--c-violet); background: var(--c-violet-soft, #f0ebff); }
.offline-choice span { font-size: .9rem; }
.offline-choice__size { margin-top: auto; font-weight: 800; }
.offline-status, .offline-detail, .install-guide__note { font-size: .9rem; }
.offline-progress { flex: none; width: 100%; min-height: 1.25rem; height: 1.25rem; accent-color: var(--c-violet); }
.offline-detail { overflow-wrap: anywhere; }
@media (max-width: 25rem) { .offline-choices { grid-template-columns: 1fr; } }