﻿/* Shared game layout and theme polish for user-facing pages. */

:root {
  --game-page-width: var(--fc-container-max-width, 480px);
  --game-page-padding: var(--fc-container-padding, 12px);
  --game-radius: 18px;
  --game-card-radius: 14px;
  --game-img-button-width: 170px;
  --game-img-button-height: 48px;
  --game-text-size: var(--fc-theme-text-size, 16px);
  --game-small-text-size: var(--fc-theme-small-text-size, 15px);
  --game-title-size: var(--fc-theme-title-text-size, 17px);
}

html.theme-dark,
html.theme-light,
body.game-themed {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body.game-themed {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-image: var(--fc-page-bg-image) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-color: var(--fc-page-bg-color) !important;
  color: var(--fc-text-color) !important;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-size: var(--game-text-size) !important;
  line-height: 1.4 !important;
}

body.game-themed *,
body.game-themed *::before,
body.game-themed *::after {
  box-sizing: border-box;
}

/* Mobile browsers sometimes turn long game values into blue phone links. */
body.game-themed a[x-apple-data-detectors],
body.game-themed a[href^="tel:"]:not(.allow-phone-link) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  font: inherit !important;
  cursor: inherit !important;
}

body.game-themed img,
body.game-themed video,
body.game-themed canvas,
body.game-themed iframe,
body.game-themed svg {
  max-width: 100%;
}

body.game-themed table {
  max-width: 100%;
  table-layout: auto;
}

body.game-themed .main-container,
body.game-themed .main,
body.game-themed .container,
body.game-themed .content,
body.game-themed .wrap,
body.game-themed .wrapper,
body.game-themed .page,
body.game-themed .screen,
body.game-themed .game,
body.game-themed .game-page,
body.game-themed .page-wrap,
body.game-themed .app,
body.game-themed .layout,
body.game-themed .login-container,
body.game-themed .profile-container {
  width: 100% !important;
  max-width: var(--game-page-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}

body.game-themed > :where(
  .main-container,
  .main,
  .container,
  .content,
  .wrap,
  .wrapper,
  .page,
  .screen,
  .game,
  .game-page,
  .page-wrap,
  .app,
  .layout,
  .login-container,
  .profile-container
) {
  background: var(--fc-main-bg) !important;
  box-shadow: var(--fc-main-shadow) !important;
  color: var(--fc-text-color) !important;
  margin-top: 0 !important;
}

body.game-themed > .main-container,
body.game-themed > .main,
body.game-themed > .container,
body.game-themed > .content,
body.game-themed > .wrap,
body.game-themed > .wrapper,
body.game-themed > .page,
body.game-themed > .screen,
body.game-themed > .game,
body.game-themed > .app,
body.game-themed > .layout,
body.game-themed > .login-container,
body.game-themed > .profile-container {
  padding-left: var(--game-page-padding) !important;
  padding-right: var(--game-page-padding) !important;
}

body.game-themed .main-container,
body.game-themed .main,
body.game-themed .container,
body.game-themed .login-container,
body.game-themed .profile-container {
  border-radius: 20px;
}

body.theme-light.game-themed .main-container,
body.theme-light.game-themed .main,
body.theme-light.game-themed .container,
body.theme-light.game-themed .content,
body.theme-light.game-themed .wrap,
body.theme-light.game-themed .wrapper,
body.theme-light.game-themed .page,
body.theme-light.game-themed .screen,
body.theme-light.game-themed .game,
body.theme-light.game-themed .app,
body.theme-light.game-themed .layout,
body.theme-light.game-themed .login-container,
body.theme-light.game-themed .profile-container {
  background: var(--fc-main-bg) !important;
  border: 1px solid rgba(95, 51, 18, .42) !important;
  box-shadow: var(--fc-main-shadow) !important;
  color: var(--fc-text-color) !important;
}

body.theme-light.game-themed {
  color: var(--fc-text-color) !important;
}

body.game-themed .slot-embed {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.game-themed .slot-embed.header-embed {
  margin-left: calc(var(--game-page-padding) * -1) !important;
  margin-right: calc(var(--game-page-padding) * -1) !important;
  max-width: calc(100% + (var(--game-page-padding) * 2)) !important;
  width: calc(100% + (var(--game-page-padding) * 2)) !important;
}

body.game-themed .slot-embed .main-container,
body.game-themed .slot-embed .main,
body.game-themed .slot-embed .container,
body.game-themed .slot-embed .content,
body.game-themed .slot-embed .wrap,
body.game-themed .slot-embed .wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-shadow: none !important;
}

body.game-themed :where(.main-container, .main, .container) > :where(
  .logo,
  .header-box,
  .header-events,
  .daily-reward-static,
  .main-banner-wrap,
  #dragon-container,
  #mine-container,
  #expedition-container,
  #fallen-breakthrough-container
) {
  max-width: calc(var(--game-page-width) - 4px) !important;
  width: calc(100% + (var(--game-page-padding) * 2) - 4px) !important;
  margin-left: calc((var(--game-page-padding) * -1) + 2px) !important;
  margin-right: calc((var(--game-page-padding) * -1) + 2px) !important;
}

body.game-themed .slot-embed.header-embed > :where(
  .logo,
  .header-box,
  .header-events,
  .daily-reward-static,
  .main-banner-wrap,
  #dragon-container,
  #mine-container,
  #expedition-container,
  #fallen-breakthrough-container
) {
  width: calc(100% - 4px) !important;
  max-width: calc(var(--game-page-width) - 4px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.theme-light.game-themed .card,
body.theme-light.game-themed .panel,
body.theme-light.game-themed .box,
body.theme-light.game-themed .block,
body.theme-light.game-themed .section,
body.theme-light.game-themed .list-card,
body.theme-light.game-themed .shop-card,
body.theme-light.game-themed .clan-card,
body.theme-light.game-themed .event-card,
body.theme-light.game-themed .quest-card,
body.theme-light.game-themed .inventory-card,
body.theme-light.game-themed .battle-card,
body.theme-light.game-themed .stat-card,
body.theme-light.game-themed .row-card,
body.theme-light.game-themed .item-card,
body.theme-light.game-themed .profile-container,
body.theme-light.game-themed .clan,
body.theme-light.game-themed .clan-item,
body.theme-light.game-themed .war,
body.theme-light.game-themed .member,
body.theme-light.game-themed .building,
body.theme-light.game-themed .application,
body.theme-light.game-themed .shop-item,
body.theme-light.game-themed .quest,
body.theme-light.game-themed .bonus-item,
body.theme-light.game-themed .bonus-group,
body.theme-light.game-themed .player-info,
body.theme-light.game-themed .avatar-box,
body.theme-light.game-themed .rate,
body.theme-light.game-themed .pill,
body.theme-light.game-themed .reward,
body.theme-light.game-themed .log,
body.theme-light.game-themed .eq-section,
body.theme-light.game-themed .eq-tile,
body.theme-light.game-themed .gearEmbedMain,
body.theme-light.game-themed .cfi-card,
body.theme-light.game-themed .modal-card,
body.theme-light.game-themed .modal-box,
body.theme-light.game-themed .modal-content,
body.theme-light.game-themed .modal-dialog,
body.theme-light.game-themed .modal-window,
body.theme-light.game-themed .dlg,
body.theme-light.game-themed .dialog-card,
body.theme-light.game-themed .popup-card,
body.theme-light.game-themed .inv-block {
  background: var(--fc-card-bg) !important;
  border-color: var(--fc-border-soft) !important;
  color: var(--fc-text-color) !important;
  box-shadow: var(--fc-card-shadow) !important;
}

body.theme-light.game-themed .row,
body.theme-light.game-themed .line,
body.theme-light.game-themed .entry,
body.theme-light.game-themed .member,
body.theme-light.game-themed .building,
body.theme-light.game-themed .application,
body.theme-light.game-themed .shop-item,
body.theme-light.game-themed .quest,
body.theme-light.game-themed .bonus-item,
body.theme-light.game-themed li {
  color: var(--fc-text-color) !important;
  border-color: var(--fc-border-soft) !important;
}

body.theme-light.game-themed h1,
body.theme-light.game-themed h2,
body.theme-light.game-themed h3,
body.theme-light.game-themed h4,
body.theme-light.game-themed .title,
body.theme-light.game-themed .page-title,
body.theme-light.game-themed .section-title,
body.theme-light.game-themed .card-title,
body.theme-light.game-themed .subtitle,
body.theme-light.game-themed .hdr,
body.theme-light.game-themed legend {
  color: var(--fc-title-color) !important;
  font-size: var(--game-title-size) !important;
  text-shadow: 0 1px 0 rgba(255, 247, 215, .70), 0 0 8px rgba(132, 75, 22, .18) !important;
}

body.theme-light.game-themed p,
body.theme-light.game-themed span,
body.theme-light.game-themed div,
body.theme-light.game-themed td,
body.theme-light.game-themed th,
body.theme-light.game-themed label {
  border-color: var(--fc-border-soft);
}

body.theme-light.game-themed .muted,
body.theme-light.game-themed .hint,
body.theme-light.game-themed .desc,
body.theme-light.game-themed .description,
body.theme-light.game-themed .note,
body.theme-light.game-themed .small,
body.theme-light.game-themed .meta,
body.theme-light.game-themed .help,
body.theme-light.game-themed .caption {
  color: var(--fc-muted-color) !important;
  opacity: .96 !important;
  font-size: var(--game-small-text-size) !important;
}

/* Long descriptive text uses the same warm readable tone as daily-reward subtitles. */
body.theme-light.game-themed .city-desc,
body.theme-light.game-themed .subtitle {
  color: var(--fc-title-color) !important;
  text-shadow:
    0 1px 0 rgba(255, 247, 215, .78),
    0 0 5px rgba(255, 239, 190, .42) !important;
}

/* Daily reward calendar: pale dark-theme labels are unreadable on parchment. */
body.theme-light.game-themed .reward-list-title,
body.theme-light.game-themed #rewardList .reward-row,
body.theme-light.game-themed #rewardList .reward-row .day,
body.theme-light.game-themed #rewardList .reward-row.current,
body.theme-light.game-themed #rewardList .reward-row.claimed {
  color: var(--fc-title-color) !important;
  text-shadow:
    0 1px 0 rgba(255, 247, 215, .78),
    0 0 5px rgba(255, 239, 190, .42) !important;
}

body.theme-light.game-themed #statusLine.status-wait {
  color: var(--fc-title-color) !important;
  text-shadow:
    0 1px 0 rgba(255, 247, 215, .78),
    0 0 5px rgba(255, 239, 190, .42) !important;
}

body.theme-light.game-themed #rewardList .reward-row.current,
body.theme-light.game-themed #rewardList .reward-row.current .day,
body.theme-light.game-themed #rewardList .reward-row.claimed,
body.theme-light.game-themed #rewardList .reward-row.claimed .day {
  color: #2f6729 !important;
  font-weight: 800;
  opacity: 1 !important;
  text-shadow:
    0 1px 0 rgba(246, 255, 225, .90),
    0 0 5px rgba(99, 145, 64, .22) !important;
}

body.theme-light.game-themed .back-link {
  color: var(--fc-menu-text-color) !important;
  background: var(--fc-menu-bg) !important;
  border-color: var(--fc-border-gold) !important;
  box-shadow: var(--fc-menu-shadow) !important;
  text-shadow:
    0 1px 0 rgba(255, 253, 239, .98),
    0 0 4px rgba(255, 244, 202, .94) !important;
}

body.theme-light.game-themed .back-link:hover {
  color: #7b3509 !important;
  background: var(--fc-menu-bg-hover) !important;
  box-shadow: var(--fc-menu-shadow-hover) !important;
}

body.theme-light.game-themed a {
  color: #6c3610;
}

body.theme-light.game-themed a:hover {
  color: #8b4b16;
}

body.theme-light.game-themed .btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)),
body.theme-light.game-themed .button:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)),
body.theme-light.game-themed .menu-btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)),
body.theme-light.game-themed .profile-link,
body.theme-light.game-themed a.btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)),
body.theme-light.game-themed a.button:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)) {
  color: var(--fc-menu-text-color) !important;
  background: var(--fc-menu-bg) !important;
  border-color: var(--fc-border-gold) !important;
  box-shadow: var(--fc-menu-shadow) !important;
  text-shadow:
    0 1px 0 rgba(255, 253, 239, .98),
    0 0 4px rgba(255, 244, 202, .94) !important;
}

body.theme-light.game-themed .btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)) *,
body.theme-light.game-themed .button:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)) *,
body.theme-light.game-themed .menu-btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)) *,
body.theme-light.game-themed .profile-link *,
body.theme-light.game-themed a.btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)) *,
body.theme-light.game-themed a.button:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)) * {
  color: var(--fc-menu-text-color) !important;
  text-shadow:
    0 1px 0 rgba(255, 253, 239, .98),
    0 0 4px rgba(255, 244, 202, .94) !important;
}

body.theme-light.game-themed .profile-link > span,
body.theme-light.game-themed .profile-link-text,
body.theme-light.game-themed .menu-btn > span,
body.theme-light.game-themed .btn > span,
body.theme-light.game-themed .button > span,
body.theme-light.game-themed .ftr .fbtn {
  color: var(--fc-menu-text-color) !important;
  letter-spacing: .35px;
  text-shadow:
    0 1px 0 rgba(255, 253, 239, .98),
    0 0 4px rgba(255, 244, 202, .94) !important;
}

body.theme-light.game-themed .btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)):hover,
body.theme-light.game-themed .button:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)):hover,
body.theme-light.game-themed .menu-btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)):hover,
body.theme-light.game-themed .profile-link:hover,
body.theme-light.game-themed a.btn:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)):hover,
body.theme-light.game-themed a.button:not(:where(.img-btn,.imgBtn,.imgbtn,.imgbtn-submit,.buy-btn,.btn-img,.btn-image,.image-btn,.bt-img-btn,.fight-btn,.donate-btn,.send-btn-img,.cancel-btn-img,.find-btn-img,.img-btn-large,.img-btn-small,.img-btn-join)):hover {
  color: #7b3509 !important;
  background: var(--fc-menu-bg-hover) !important;
  border-color: rgba(126, 70, 20, .72) !important;
  box-shadow: var(--fc-menu-shadow-hover) !important;
}

body.theme-light.game-themed button img,
body.theme-light.game-themed .img-btn,
body.theme-light.game-themed .img-btn img,
body.theme-light.game-themed .merc img,
body.theme-light.game-themed .icon-btn img {
  box-shadow: none !important;
  background: transparent !important;
}

body.theme-light.game-themed input,
body.theme-light.game-themed select,
body.theme-light.game-themed textarea {
  background: rgba(255, 248, 226, .86) !important;
  border: 1px solid rgba(104, 55, 18, .32) !important;
  color: var(--fc-text-color) !important;
  box-shadow: inset 0 1px 3px rgba(74, 38, 14, .10) !important;
}

body.theme-light.game-themed input::placeholder,
body.theme-light.game-themed textarea::placeholder {
  color: rgba(86, 48, 18, .65) !important;
}

body.theme-light.game-themed table,
body.theme-light.game-themed th,
body.theme-light.game-themed td {
  border-color: rgba(104, 55, 18, .24) !important;
  color: var(--fc-text-color) !important;
}

body.theme-light.game-themed th {
  background: rgba(146, 84, 27, .16) !important;
  color: var(--fc-title-color) !important;
}

body.theme-light.game-themed hr {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(124, 71, 19, .72), transparent) !important;
}

body.theme-light.game-themed .success,
body.theme-light.game-themed .ok {
  color: #305018 !important;
  border-color: rgba(90, 130, 50, .28) !important;
}

body.theme-light.game-themed .error,
body.theme-light.game-themed .err,
body.theme-light.game-themed .danger {
  color: #7b2518 !important;
  border-color: rgba(146, 54, 28, .32) !important;
}

body.theme-light.game-themed .warning,
body.theme-light.game-themed .warn {
  color: #70440d !important;
  border-color: rgba(150, 96, 24, .35) !important;
}

body.theme-light.game-themed .login-container h1,
body.theme-light.game-themed .login-container h2,
body.theme-light.game-themed .login-container h3,
body.theme-light.game-themed .player-name,
body.theme-light.game-themed .bonus-group-title {
  color: var(--fc-title-color) !important;
  text-shadow: 0 1px 0 rgba(255, 247, 215, .70) !important;
}

body.theme-light.game-themed .bonus-stat-val,
body.theme-light.game-themed .pill,
body.theme-light.game-themed strong {
  color: var(--fc-text-color) !important;
}

/* Light theme keeps the dark theme layout, but replaces dark surfaces only. */
body.theme-light.game-themed :where(.modal, .modal-backdrop, .dlg-backdrop) {
  background: rgba(55, 31, 13, .48);
}

body.theme-light.game-themed :where(.modal-card, .modal-box, .modal-content, .modal-dialog, .modal-window, .dlg, .dialog-card, .popup-card) {
  background: linear-gradient(180deg, rgba(249, 229, 184, .98), rgba(205, 153, 84, .96)) !important;
  border-color: rgba(128, 73, 24, .62) !important;
  box-shadow: 0 12px 30px rgba(61, 32, 11, .30), inset 0 1px 0 rgba(255, 251, 229, .48) !important;
  color: var(--fc-text-color) !important;
}

body.theme-light.game-themed :where(.modal-backdrop, .modal-overlay) > :where(.modal, .modal-content, .dialog, .popup) {
  background: linear-gradient(180deg, rgba(249, 229, 184, .98), rgba(205, 153, 84, .96)) !important;
  border-color: rgba(128, 73, 24, .62) !important;
  box-shadow: 0 12px 30px rgba(61, 32, 11, .30), inset 0 1px 0 rgba(255, 251, 229, .48) !important;
  color: var(--fc-text-color) !important;
}

body.theme-light.game-themed :where(.modal-card, .modal-box, .modal-content, .modal-dialog, .modal-window, .dlg, .dialog-card, .popup-card)
  :where(.modal-title, .modal-text, .dlg-title, .dlg-text, .title, .text) {
  color: var(--fc-text-color) !important;
}

body.theme-light.game-themed :where(.modal-card, .modal-box, .modal-content, .modal-dialog, .modal-window, .dlg, .dialog-card, .popup-card)
  :where(.x, .modal-close, .dlg-close) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6b3510 !important;
  text-shadow: none !important;
}

body.theme-light.game-themed .pet-hero {
  background: rgba(255, 241, 205, .42) !important;
}

body.theme-light.game-themed .inv-block {
  background: linear-gradient(180deg, rgba(255, 242, 209, .76), rgba(217, 173, 105, .52)) !important;
  border-color: rgba(128, 73, 24, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 251, 229, .38), 0 2px 6px rgba(68, 35, 11, .14) !important;
}

body.theme-light.game-themed :where(
  .stat-name,
  .num,
  .rule-val,
  .tbx-val,
  .tbx-muted,
  .modal-text
) {
  color: var(--fc-text-color) !important;
  text-shadow: none !important;
}

body.theme-light.game-themed :where(.modal-card, .modal-box, .modal-content, .modal-dialog, .modal-window)
  :where(.label, .stat-name, .num, .rule-val, .tbx-val, .tbx-muted) {
  color: var(--fc-text-color) !important;
}

body.theme-light.game-themed :where(.tbx-name, .plus) {
  color: var(--fc-accent-color) !important;
}

/* Gold page: accordion buttons remain calm like in the dark theme. */
body.theme-light.game-themed .acc-item {
  background: rgba(255, 239, 200, .38) !important;
  border-color: rgba(115, 64, 22, .25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .30) !important;
}

body.theme-light.game-themed .acc-item.open {
  border-color: rgba(132, 75, 22, .52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .36), 0 2px 8px rgba(73, 36, 12, .14) !important;
}

body.theme-light.game-themed .acc-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--fc-text-color) !important;
  text-shadow: none !important;
}

body.theme-light.game-themed :where(
  .acc-title,
  .gold-line,
  .gold-line .label,
  .feature,
  .mode-meta-row,
  .field label,
  .qr-line,
  .bonus-table th,
  .bonus-table td,
  .referral-link
) {
  color: var(--fc-text-color) !important;
  text-shadow: none !important;
}

body.theme-light.game-themed :where(
  .acc-sub,
  .pay-entry-note,
  .qr-muted,
  .referral-note
) {
  color: var(--fc-muted-color) !important;
}

body.theme-light.game-themed .acc-icon {
  background: rgba(104, 55, 18, .10) !important;
  color: var(--fc-accent-color) !important;
}

body.theme-light.game-themed :where(
  .feature,
  .buy-box,
  .pay-entry-status,
  .qr-summary,
  .referral-box
) {
  background: rgba(255, 244, 215, .46) !important;
  border-color: rgba(115, 64, 22, .22) !important;
  box-shadow: none !important;
}

body.theme-light.game-themed .mode-status {
  background: rgba(167, 111, 39, .12) !important;
  border-color: rgba(126, 73, 23, .28) !important;
  color: #63330f !important;
}

body.theme-light.game-themed :where(.mode-image-btn, .shop-image-btn, .icon-btn) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.theme-light.game-themed :where(.qr-text-btn, .referral-copy-btn, .modal-close-btn) {
  background: var(--fc-menu-bg) !important;
  border-color: var(--fc-border-gold) !important;
  box-shadow: var(--fc-menu-shadow) !important;
  color: var(--fc-menu-text-color) !important;
  text-shadow:
    0 1px 0 rgba(255, 253, 239, .98),
    0 0 4px rgba(255, 244, 202, .94) !important;
}

body.theme-light.game-themed .qr-code-box {
  background: rgba(224, 246, 218, .76) !important;
  border-color: rgba(62, 122, 63, .34) !important;
  color: #285c2c !important;
}

body.theme-light.game-themed :where(.qr-flash.ok, .msg.ok) {
  background: rgba(220, 246, 217, .78) !important;
  border-color: rgba(63, 135, 74, .38) !important;
  color: #285c2c !important;
}

body.theme-light.game-themed :where(.qr-flash.err, .msg.err) {
  background: rgba(250, 220, 211, .82) !important;
  border-color: rgba(159, 69, 69, .38) !important;
  color: #812a20 !important;
}

body.theme-light.game-themed [style*="background:#111"],
body.theme-light.game-themed [style*="background: #111"],
body.theme-light.game-themed [style*="background:#222"],
body.theme-light.game-themed [style*="background: #222"],
body.theme-light.game-themed [style*="background:#1f2035"],
body.theme-light.game-themed [style*="background: #1f2035"],
body.theme-light.game-themed [style*="background:#1c213a"],
body.theme-light.game-themed [style*="background: #1c213a"],
body.theme-light.game-themed [style*="background:rgba(0,0,0"],
body.theme-light.game-themed [style*="background: rgba(0,0,0"],
body.theme-light.game-themed [style*="background-color:#111"],
body.theme-light.game-themed [style*="background-color: #111"],
body.theme-light.game-themed [style*="background-color:#222"],
body.theme-light.game-themed [style*="background-color: #222"] {
  background: var(--fc-card-bg) !important;
  background-color: transparent !important;
  color: var(--fc-text-color) !important;
  border-color: var(--fc-border-soft) !important;
}

body.theme-light.game-themed [style*="color:#fff"],
body.theme-light.game-themed [style*="color: #fff"],
body.theme-light.game-themed [style*="color:#ffffff"],
body.theme-light.game-themed [style*="color: #ffffff"],
body.theme-light.game-themed [style*="color:white"],
body.theme-light.game-themed [style*="color: white"],
body.theme-light.game-themed [style*="color:#f0f0f0"],
body.theme-light.game-themed [style*="color: #f0f0f0"],
body.theme-light.game-themed [style*="color:#ffe"],
body.theme-light.game-themed [style*="color: #ffe"],
body.theme-light.game-themed [style*="color:#eee"],
body.theme-light.game-themed [style*="color: #eee"],
body.theme-light.game-themed [style*="color:#ddd"],
body.theme-light.game-themed [style*="color: #ddd"] {
  color: var(--fc-text-color) !important;
}

body.theme-light.game-themed [style*="color:#bbb"],
body.theme-light.game-themed [style*="color: #bbb"],
body.theme-light.game-themed [style*="color:#777"],
body.theme-light.game-themed [style*="color: #777"] {
  color: var(--fc-muted-color) !important;
}

body.theme-light.game-themed [style*="color:#f5c542"],
body.theme-light.game-themed [style*="color: #f5c542"],
body.theme-light.game-themed [style*="color:gold"],
body.theme-light.game-themed [style*="color: gold"] {
  color: var(--fc-accent-color) !important;
}

body.game-themed :where(
  .img-btn,
  .imgBtn,
  .imgbtn,
  .imgbtn-submit,
  .buy-btn,
  .btn-img,
  .btn-image,
  .image-btn,
  .bt-img-btn,
  .fight-btn,
  .donate-btn,
  .send-btn-img,
  .cancel-btn-img,
  .find-btn-img,
  .img-btn-large,
  .img-btn-small,
  .img-btn-join
) {
  align-items: center !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  height: var(--game-img-button-height) !important;
  justify-content: center !important;
  margin: 6px auto !important;
  max-height: var(--game-img-button-height) !important;
  max-width: var(--game-img-button-width) !important;
  min-height: var(--game-img-button-height) !important;
  min-width: var(--game-img-button-width) !important;
  overflow: visible !important;
  padding: 0 !important;
  text-shadow: none !important;
  width: var(--game-img-button-width) !important;
}

body.game-themed :where(
  .img-btn,
  .imgBtn,
  .imgbtn,
  .imgbtn-submit,
  .buy-btn,
  .btn-img,
  .btn-image,
  .image-btn,
  .bt-img-btn,
  .fight-btn,
  .donate-btn,
  .send-btn-img,
  .cancel-btn-img,
  .find-btn-img,
  .img-btn-large,
  .img-btn-small,
  .img-btn-join
) img,
body.game-themed .imgbtn img,
body.game-themed img:where(.btn-img, .nav-btn-img, .btn-image, .image-btn, .bot-btn-img) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  height: var(--game-img-button-height) !important;
  max-height: var(--game-img-button-height) !important;
  max-width: var(--game-img-button-width) !important;
  min-height: var(--game-img-button-height) !important;
  min-width: var(--game-img-button-width) !important;
  object-fit: contain !important;
  padding: 0 !important;
  width: var(--game-img-button-width) !important;
}

body.game-themed :where(
  .btn-buy.btn-img,
  .btn-do-buy.btn-img,
  .btn-cancel-buy.btn-img,
  .btn-improve.btn-img,
  .btn-do-upgrade.btn-img,
  .btn-cancel.btn-img,
  .btn-clear.btn-img
) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 6px auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  text-indent: -9999px !important;
  text-shadow: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

body.game-themed .buy-btn {
  background: transparent url("/images/buttons/kup.png") center center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  display: block !important;
  font-size: 0 !important;
  height: var(--buy-btn-h, 48px) !important;
  line-height: 0 !important;
  margin: 6px auto !important;
  max-height: var(--buy-btn-h, 48px) !important;
  max-width: 170px !important;
  min-height: var(--buy-btn-h, 48px) !important;
  min-width: 170px !important;
  overflow: hidden !important;
  padding: 0 !important;
  text-indent: -9999px !important;
  text-shadow: none !important;
  width: 170px !important;
}

body.game-themed .imgbtn {
  align-items: center !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  height: var(--game-img-button-height) !important;
  justify-content: center !important;
  margin: 6px auto !important;
  max-height: var(--game-img-button-height) !important;
  max-width: var(--game-img-button-width) !important;
  min-height: var(--game-img-button-height) !important;
  min-width: var(--game-img-button-width) !important;
  overflow: visible !important;
  padding: 0 !important;
  text-shadow: none !important;
  width: var(--game-img-button-width) !important;
}

body.game-themed .imgbtn-submit {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  height: var(--game-img-button-height) !important;
  justify-content: center !important;
  margin: 6px auto !important;
  max-height: var(--game-img-button-height) !important;
  max-width: var(--game-img-button-width) !important;
  min-height: var(--game-img-button-height) !important;
  min-width: var(--game-img-button-width) !important;
  overflow: visible !important;
  padding: 0 !important;
  width: var(--game-img-button-width) !important;
}

body.game-themed .btn-buy.btn-img {
  background: transparent url("/images/buttons/kup.png") center center / contain no-repeat !important;
  height: var(--btn-buy-h, 48px) !important;
  max-height: var(--btn-buy-h, 48px) !important;
  max-width: var(--btn-buy-w, 170px) !important;
  width: var(--btn-buy-w, 170px) !important;
}

body.game-themed .btn-do-buy.btn-img {
  background: transparent url("/images/buttons/kup.png") center center / contain no-repeat !important;
  height: var(--btn-buy-submit-h, 48px) !important;
  max-height: var(--btn-buy-submit-h, 48px) !important;
  max-width: var(--btn-buy-submit-w, 170px) !important;
  width: var(--btn-buy-submit-w, 170px) !important;
}

body.game-themed .btn-cancel-buy.btn-img {
  background: transparent url("/images/buttons/otmena.png") center center / contain no-repeat !important;
  height: var(--btn-buy-cancel-h, 48px) !important;
  max-height: var(--btn-buy-cancel-h, 48px) !important;
  max-width: var(--btn-buy-cancel-w, 170px) !important;
  width: var(--btn-buy-cancel-w, 170px) !important;
}

body.game-themed .btn-improve.btn-img {
  background: transparent url("/images/buttons/apgreid.png") center center / contain no-repeat !important;
  height: var(--btn-improve-open-h, 48px) !important;
  max-height: var(--btn-improve-open-h, 48px) !important;
  max-width: var(--btn-improve-open-w, 170px) !important;
  width: var(--btn-improve-open-w, 170px) !important;
}

body.game-themed .btn-do-upgrade.btn-img {
  background: transparent url("/images/buttons/apgreid.png") center center / contain no-repeat !important;
  height: var(--btn-upgrade-submit-h, 48px) !important;
  max-height: var(--btn-upgrade-submit-h, 48px) !important;
  max-width: var(--btn-upgrade-submit-w, 170px) !important;
  width: var(--btn-upgrade-submit-w, 170px) !important;
}

body.game-themed .btn-cancel.btn-img {
  background: transparent url("/images/buttons/otmena.png") center center / contain no-repeat !important;
  height: var(--btn-cancel-h, 48px) !important;
  max-height: var(--btn-cancel-h, 48px) !important;
  max-width: var(--btn-cancel-w, 170px) !important;
  width: var(--btn-cancel-w, 170px) !important;
}

body.game-themed .btn-clear.btn-img {
  background: transparent url("/images/buttons/sbros.png") center center / contain no-repeat !important;
  height: var(--btn-clear-h, 48px) !important;
  max-height: var(--btn-clear-h, 48px) !important;
  max-width: var(--btn-clear-w, 170px) !important;
  width: var(--btn-clear-w, 170px) !important;
}

/* English locale: image buttons contain Russian text, so render translated HTML text. */
html[lang="en"] body.game-themed .buy-btn,
html[lang="en"] body.game-themed .btn-buy.btn-img,
html[lang="en"] body.game-themed .btn-do-buy.btn-img,
html[lang="en"] body.game-themed .btn-cancel-buy.btn-img,
html[lang="en"] body.game-themed .btn-improve.btn-img,
html[lang="en"] body.game-themed .btn-do-upgrade.btn-img,
html[lang="en"] body.game-themed .btn-cancel.btn-img,
html[lang="en"] body.game-themed .btn-clear.btn-img {
  background:#8d190f linear-gradient(180deg,#b42b18,#741109) !important;
  border:2px solid #d9a53b !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 0 1px rgba(255,235,151,.28),0 2px 5px rgba(0,0,0,.42) !important;
  color:#ffe89a !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  text-indent:0 !important;
  overflow:visible !important;
  text-shadow:0 1px 1px #321000 !important;
}

@media (max-width: 480px) {
  body.game-themed {
    width: 100vw !important;
  }

  body.game-themed .main-container,
  body.game-themed .main,
  body.game-themed .container,
  body.game-themed .content,
  body.game-themed .wrap,
  body.game-themed .wrapper,
  body.game-themed .page,
  body.game-themed .screen,
  body.game-themed .game,
  body.game-themed .app,
  body.game-themed .layout,
  body.game-themed .login-container,
  body.game-themed .profile-container {
    max-width: 100vw !important;
  }
}

/* Постоянные титулы первых ста игроков. */
.player-founder-title {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
  overflow: visible;
  vertical-align: middle;
}

.player-founder-title--profile {
  width: 96px;
  height: 96px;
  margin: 0;
  position: absolute;
  top: 0;
  right: max(4px, calc((100% - 312px) / 4));
  z-index: 2;
  pointer-events: none;
}

.player-founder-title--medium {
  width: 42px;
  height: 42px;
  margin-left: 7px;
}

.player-founder-title--compact {
  width: 32px;
  height: 32px;
  margin: 3px 0;
}

.player-founder-title .player-founder-title__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.profile-avatar,
.facecheck-avatar-box,
.profile-detail-avatar-line,
.profile-header .avatar-wrap {
  position: relative;
}

.profile-detail-avatar-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width: 380px) {
  .player-founder-title--compact {
    width: 28px;
    height: 28px;
  }
}


