.brand-mark img,.access-brand img,.game-brand-logo img,.admin-logo img,.admin-brand img,.back-link img { object-fit: contain; }
.brand-mark img { width: 100%; height: 100%; }
.game-install-button { min-height: 40px; padding: 8px 14px; border: 1px solid #ffffff40; border-radius: 99px; color: #fff; background: #ffffff12; font: 800 .75rem "Outfit", system-ui; cursor: pointer; }
.game-install-button:hover { background: #ffffff22; }
.game-install-dialog { width: min(420px,calc(100% - 32px)); box-sizing: border-box; padding: 28px; border: 1px solid #dbd0e8; border-radius: 20px; color: #26314f; background: #fffcf7; font: 16px/1.6 "Outfit", system-ui; }
.game-install-dialog::backdrop { background: #10172aba; }
.game-install-dialog > button { float: right; width: 36px; height: 36px; border: 0; border-radius: 50%; font-size: 24px; cursor: pointer; }
.game-install-dialog h2 { font-size: 1.3rem; padding-right: 20px; }
@media (max-width:600px) { .topbar-actions { flex-wrap: wrap; } .game-install-button { font-size: .65rem; padding: 7px 10px; } }

.back-link img { width: 30px; height: 30px; vertical-align: middle; margin-right: 8px; }
.gameplein-admin-home img { display:block; width:38px; height:38px; }
.gameplein-return { display:inline-flex; align-items:center; gap:8px; margin:12px; color:#26314f; font:800 14px "Outfit", system-ui; text-decoration:none; }
.gameplein-return img { width:30px; height:30px; }

/* Match the install chip to the existing player and game-count chips. */
.topbar-actions > .game-install-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .52rem .85rem; color: #fff; background: rgba(255,255,255,.08); font: 900 .78rem/1 "Outfit",sans-serif; backdrop-filter: blur(12px); }
@media (max-width:560px) { .topbar-actions > .game-install-button { font-size: .72rem; } }

/* Compact logo aligned with the game title. */
.topbar .game-brand-group { align-items:center; gap:12px; }
.topbar .game-brand-logo { width:44px; height:48px; padding:2px; border-radius:0; box-sizing:border-box; }
.topbar .game-brand-logo img { display:block; width:100%; height:100%; object-fit:contain; }
@media (max-width:760px) { .topbar .game-brand-logo { width:36px; height:40px; } .topbar .game-brand-group { gap:8px; } }

/* Align the title with the visual centre of the logo body, below its tuft. */
.topbar .game-brand-group { display:flex; align-items:center; }
.topbar .game-brand-copy { display:flex; flex-direction:column; justify-content:center; min-height:48px; padding-top:4px; }
.topbar .game-brand-copy > .eyebrow { margin:0; line-height:1.2; }
.topbar .game-brand-copy > h2:empty { display:none; }
.topbar .game-brand-logo { align-self:center; margin:0; }
@media (max-width:760px) { .topbar .game-brand-copy { min-height:40px; padding-top:3px; } }

/* Compact title on narrow screens; the player chip already shows the name. */
.topbar .game-brand-copy > #playerLabel { display:none; }
.topbar .game-brand-title { display:flex; align-items:center; flex-wrap:wrap; gap:0 .45em; }
.game-brand-title > span { white-space:nowrap; }
.game-brand-theme::before { content:"·"; margin-right:.45em; }
@media (max-width:980px) {
  .topbar .game-brand-copy { min-height:40px; padding-top:2px; }
  .topbar .game-brand-title { display:grid; gap:3px; font-size:.64rem; letter-spacing:.075em; line-height:1.2; }
  .topbar .game-brand-theme { font-size:.58rem; letter-spacing:.08em; opacity:.85; }
  .game-brand-theme::before { content:none; }
}

/* Profile artwork is independent of the platform's emoji font. */
:is(.player-avatar, .remembered-avatar, .mobile-player-chip > span) > .profile-icon { display: block; width: 62%; height: 62%; object-fit: contain; flex: 0 0 auto; }

/* Logo artwork stays flat, including hover and installed-app views. */
:is(.brand-mark, .access-brand img, .game-brand-logo, .admin-logo, .admin-brand img, .back-link img),
:is(.brand-mark, .game-brand-logo, .admin-logo) img,
.topbar .game-brand-logo:hover { filter: none; box-shadow: none; }

/* The Gameplein wordmark follows the Gameroom reference. The golden icon stays unchanged. */
:is(.brand, .access-brand, .room-brand, .gameplein-return, .back-link:has(img), .game-brand-logo, .admin-brand, .gameplein-wordmark) {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.035em;
  text-decoration: none;
}
:is(.brand, .access-brand) { color:#fff; font-size:clamp(1.4rem,3vw,1.85rem); line-height:1.1; }
:is(.room-brand, .gameplein-return, .back-link:has(img)) { color:#303d36; }
.back-link:has(img) { display:inline-flex; align-items:center; gap:12px; font-size:1.75rem; }
.back-link:has(img) img { margin:0; }
.gameplein-return { font-size:1.5rem; gap:12px; }
.topbar .game-brand-logo { display:inline-flex; align-items:center; gap:10px; width:auto; height:48px; color:#303d36; background:transparent; border:0; }
.topbar .game-brand-logo img { width:38px; height:44px; flex:0 0 auto; }
.topbar .game-brand-logo .gameplein-wordmark { font-size:1.4rem; line-height:1.1; }
[data-brand-tone="dark"] :is(.gameplein-wordmark,.game-brand-logo,.back-link:has(img)),
[data-brand-tone="dark"].gameplein-wordmark { color:#fff; }
@media(max-width:760px) {
  .topbar .game-brand-logo { height:40px; }
  .topbar .game-brand-logo img { width:32px; height:38px; }
  .topbar .game-brand-logo .gameplein-wordmark { display:none; }
}

.topbar > .brand, .access-page > .access-brand { font-size:clamp(1.4rem,3vw,1.85rem); color:#fff; }
.start-screen > .back-link:has(img) { color:#303d36; font-size:1.75rem; font-weight:700; letter-spacing:-.035em; line-height:1.1; }
.start-screen > .back-link img { width:42px; height:48px; object-fit:contain; }
[data-brand-tone="dark"] .start-screen > .back-link:has(img) { color:#fff; }
@media(max-width:980px){.game-topografie .start-screen{padding-top:100px}}

/* Shared UI icons from the bundled icon collection. */
.gp-icon{display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:middle;background-color:currentColor;-webkit-mask:var(--gp-icon) center/contain no-repeat;mask:var(--gp-icon) center/contain no-repeat}
.gp-icon-home{--gp-icon:url("assets/icons/svg/fi-rr-home.svg")}
.gp-icon-arrow-right{--gp-icon:url("assets/icons/svg/fi-rr-arrow-right.svg")}
.gp-icon-arrow-up-right{--gp-icon:url("assets/icons/svg/fi-rr-arrow-up-right.svg")}
.gp-icon-download{--gp-icon:url("assets/icons/svg/fi-rr-download.svg")}
.gp-icon-user{--gp-icon:url("assets/icons/svg/fi-rr-user.svg")}
.gp-icon-angle-small-down{--gp-icon:url("assets/icons/svg/fi-rr-angle-small-down.svg")}
.gp-icon-sparkles{--gp-icon:url("assets/icons/svg/fi-rr-sparkles.svg")}
.gp-icon-trophy{--gp-icon:url("assets/icons/svg/fi-rr-trophy.svg")}
.gp-icon-cross{--gp-icon:url("assets/icons/svg/fi-rr-cross.svg")}

.gp-icon-book-alt{--gp-icon:url("assets/icons/svg/fi-rr-book-alt.svg")}

/* Give Safari an opaque page canvas to sample above the viewport. */
html { background-color: #141c3a; }
body.game-home {
  background-color: #141c3a;
  padding-top: env(safe-area-inset-top, 0px);
}