/* MJ SCORE v1242
   Visual target: approved solid-color mockup.
   No gradients. This is the single consolidated visual override. */

body.screen-main #app-title-home-link,
body.screen-main #app-title-home-link *,
body.screen-main #main-game-info-card,
body.screen-main #main-game-info-card *,
body.screen-main #score-input-panel,
body.screen-main #score-input-panel *,
body.screen-main #score-history-table-wrap,
body.screen-main #score-history-table-wrap * {
  background-image: none !important;
}

/* =========================================================
   HEADER — white logo slab + blue circular controls
   ========================================================= */
body.screen-main #app-title-home-link {
  overflow: visible !important;
  background: #f8fcff !important;
  border: 0 !important;
  border-bottom: 10px solid #e7f3ff !important;
  box-shadow: 0 8px 20px rgba(0, 64, 135, .12) !important;
  min-height: 78px !important;
  padding-top: 10px !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

body.screen-main #app-title-home-link .app-header-title-area {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 17px !important;
  box-shadow: 0 6px 0 #dcebf8, 0 13px 24px rgba(0, 61, 130, .13) !important;
  box-sizing: border-box !important;
}

body.screen-main #app-title-home-link .app-version-label {
  background: transparent !important;
  color: #1162bc !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

body.screen-main #icons_header {
  overflow: visible !important;
  gap: 8px !important;
  align-items: center !important;
}

body.screen-main #icons_header > #btn-share-game-url,
body.screen-main #icons_header > #btn-game-photo,
body.screen-main #icons_header > #btn-current-player-icon,
body.screen-main #icons_header > #btn-open-user-manual,
body.screen-main #icons_header > #btn-open-achievements {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  flex: 0 0 46px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

body.screen-main #icons_header > #btn-share-game-url,
body.screen-main #icons_header > #btn-open-user-manual,
body.screen-main #icons_header > #btn-open-achievements {
  display: inline-flex !important;
  background: #0876f8 !important;
  color: #ffffff !important;
  border: 2px solid #0060d1 !important;
  box-shadow: 0 5px 0 #0050ad, 0 10px 18px rgba(0, 72, 155, .19) !important;
}

body.screen-main #icons_header > #btn-current-player-icon {
  display: inline-flex !important;
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 80 !important;
  background: #ffffff !important;
  color: #0876f8 !important;
  border: 3px solid #0876f8 !important;
  box-shadow: 0 5px 0 #a9cee9, 0 10px 18px rgba(0, 72, 155, .15) !important;
}

body.screen-main #btn-share-game-url .share-url-icon {
  width: 19px !important;
  height: 19px !important;
}

body.screen-main #btn-open-user-manual .manual-open-button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

body.screen-main #btn-current-player-icon > img,
body.screen-main #btn-current-player-icon > .current-player-icon-photo-placeholder,
body.screen-main #btn-current-player-icon > #current-player-icon-initial {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  object-fit: cover !important;
}

body.screen-main #btn-current-player-icon .current-achievement-badge {
  position: absolute !important;
  top: -9px !important;
  right: -7px !important;
  z-index: 120 !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 5px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffd34a !important;
  color: #754b00 !important;
  border: 2px solid #f0a900 !important;
  box-shadow: 0 2px 0 #d79300, 0 4px 8px rgba(105, 71, 0, .20) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.screen-main #btn-current-player-icon .current-achievement-new-label {
  display: none !important;
}

/* =========================================================
   GAME INFO — large outlined card with nested rules card
   ========================================================= */
body.screen-main #main-area {
  gap: 24px !important;
}

body.screen-main #main-game-info-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 14px !important;
  position: relative !important;
  overflow: visible !important;
  background: #ffffff !important;
  border: 3px solid #0876f8 !important;
  border-radius: 18px !important;
  box-shadow: 0 7px 0 #1267bd, 0 16px 27px rgba(0, 66, 145, .15) !important;
  padding: 16px 14px 14px !important;
  color: #0754aa !important;
}

body.screen-main #main-game-info-card::before {
  content: none !important;
  display: none !important;
}

body.screen-main #main-game-info-card > div:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

body.screen-main #main-game-info-card .main-game-side {
  display: contents !important;
}

body.screen-main #main-game-title {
  display: block !important;
  color: #0454b5 !important;
  font-weight: 950 !important;
  line-height: 1.22 !important;
}

body.screen-main #main-game-title .main-game-title-main {
  display: block !important;
  color: #0454b5 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}

body.screen-main #main-game-title .main-game-title-period,
body.screen-main #main-game-title .main-game-title-location {
  display: block !important;
  margin-top: 6px !important;
  color: #1567c6 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

body.screen-main #main-game-meta {
  display: none !important;
}

body.screen-main #main-game-photo-button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  background: #ffffff !important;
  color: #16a2ee !important;
  border: 3px solid #0876f8 !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 0 #a9cee9, 0 10px 17px rgba(0, 72, 155, .14) !important;
}

body.screen-main #main-game-photo-button svg {
  width: 24px !important;
  height: 24px !important;
}

body.screen-main #main-game-rules {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.screen-main #main-game-rules .main-game-info-rule-card {
  position: relative !important;
  background: #f9fcff !important;
  border: 2px solid #9dcaff !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 #d7e8fa !important;
  padding: 20px 12px 10px !important;
  color: #0758b8 !important;
}

body.screen-main #main-game-rules .main-game-info-rule-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

body.screen-main #main-game-rules .mj-game-rule-line-member {
  position: absolute !important;
  top: -17px !important;
  left: 18px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.screen-main #main-game-rules .mj-member-count-badge {
  min-height: 31px !important;
  padding: 5px 14px !important;
  border: 2px solid #168bf0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0758b8 !important;
  box-shadow: 0 3px 0 #b9d9f3 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body.screen-main #main-game-rules .mj-game-rule-line-title {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px 14px !important;
  color: #0758b8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.screen-main #main-game-rules .mj-rule-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #0758b8 !important;
}

body.screen-main #main-game-rules .mj-rule-value {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 2px 7px !important;
  border: 1.5px solid #80baff !important;
  border-radius: 8px !important;
  background: #eaf5ff !important;
  color: #0758b8 !important;
  box-shadow: inset 0 -2px 0 #d6eaff !important;
  font-weight: 950 !important;
}

body.screen-main #main-game-rules .mj-rule-label,
body.screen-main #main-game-rules .mj-rule-separator {
  color: #1668c2 !important;
  font-weight: 850 !important;
}

/* =========================================================
   SCORE ENTRY PANEL — vivid blue cap + pale blue body
   ========================================================= */
body.screen-main #score-input-panel {
  background: #f0f8ff !important;
  border: 3px solid #0876f8 !important;
  border-radius: 19px !important;
  box-shadow: 0 7px 0 #aac9e4, 0 18px 31px rgba(0, 63, 139, .16) !important;
  padding: 0 13px 15px !important;
  overflow: hidden !important;
}

body.screen-main #score-input-panel > .flex.justify-between.items-center {
  background: #0869d9 !important;
  border: 0 !important;
  border-bottom: 4px solid #0057b7 !important;
  box-shadow: 0 4px 0 #b5d2eb !important;
  margin: 0 -13px 16px !important;
  padding: 14px 15px 13px !important;
  min-height: 58px !important;
}

body.screen-main #score-input-panel > .flex.justify-between.items-center h3,
body.screen-main #score-input-panel #span-active-round {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
}

body.screen-main #score-status-badge {
  background: #ffffff !important;
  color: #0863c9 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 #a8c8e4 !important;
  padding: 7px 13px !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

/* =========================================================
   PLAYER ROWS — mockup-like individual raised cards
   ========================================================= */
body.screen-main #score-inputs-container {
  display: grid !important;
  gap: 10px !important;
}

body.screen-main #score-inputs-container > .score-input-row {
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 2px solid #8eb7dd !important;
  border-radius: 15px !important;
  box-shadow: 0 5px 0 #bfd2e3, 0 10px 16px rgba(0, 56, 120, .10) !important;
  min-height: 64px !important;
  padding: 8px 9px !important;
  opacity: 1 !important;
}

body.screen-main #score-inputs-container > .score-input-row::before {
  content: none !important;
  display: none !important;
}

body.screen-main #score-inputs-container > .score-input-row--me {
  background: #e6f6ff !important;
  border: 4px solid #0795e9 !important;
  box-shadow: 0 6px 0 #77bae2, 0 13px 21px rgba(0, 103, 182, .15) !important;
  padding: 7px 8px !important;
}

body.screen-main .score-input-name {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.screen-main .score-player-achievement-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e9f7ff !important;
  color: #17a6ef !important;
  border: 2px solid #37b1ef !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 0 #b0d9ee !important;
}

body.screen-main .score-input-row--me .score-player-achievement-button {
  background: #25a8f3 !important;
  color: #ffffff !important;
  border-color: #168ed5 !important;
  box-shadow: 0 4px 0 #6db8df !important;
}

body.screen-main .score-player-icon-thumb,
body.screen-main .score-player-achievement-button .player-photo-placeholder-icon {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  max-width: 25px !important;
  border-radius: 6px !important;
}

body.screen-main .score-input-name-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.screen-main .score-input-player-name-text {
  min-width: 0 !important;
  color: #0754aa !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.screen-main .score-input-role-badges {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
  margin-left: auto !important;
}

body.screen-main .player-role-badge.self,
body.screen-main .player-role-badge.host {
  min-height: 22px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

body.screen-main .player-role-badge.self {
  background: #0876f8 !important;
  color: #ffffff !important;
  border: 2px solid #0060cb !important;
  box-shadow: 0 2px 0 #9bc7eb !important;
}

body.screen-main .player-role-badge.host {
  background: #ffffff !important;
  color: #0870db !important;
  border: 2px solid #168bf0 !important;
  box-shadow: 0 2px 0 #c2def5 !important;
}

body.screen-main .score-input-control {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

body.screen-main .score-input-own-control input {
  width: 108px !important;
  min-width: 108px !important;
  min-height: 44px !important;
  background: #ffffff !important;
  color: #064ca9 !important;
  border: 3px solid #0876f8 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 -3px 0 #e0eef9, 0 4px 0 #91bde0 !important;
  padding: 7px 11px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  text-align: right !important;
}

body.screen-main .score-display,
body.screen-main .score-display-locked {
  width: 108px !important;
  min-width: 108px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: #f8fafc !important;
  color: #164e86 !important;
  border: 2px solid #c1d0dd !important;
  border-radius: 11px !important;
  box-shadow: inset 0 -3px 0 #e7edf3, 0 3px 0 #d2dee8 !important;
  padding: 7px 10px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.screen-main .score-lock-icon {
  color: #f19b20 !important;
  opacity: 1 !important;
}

body.screen-main .score-chip-value {
  min-width: 76px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: #fff4cf !important;
  color: #5b470b !important;
  border: 2px solid #e4a20b !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 0 #dfba59 !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.screen-main .score-chip-value .mj-chip-gold-icon {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffd34a !important;
  color: #7e5600 !important;
  border: 2px solid #d89400 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 2px #fff0a8 !important;
  font-size: 13px !important;
}

/* =========================================================
   REMAINING POINTS — pale red alert with exclamation medallion
   ========================================================= */
body.screen-main #score-validation-warning,
body.screen-main .score-validation-compact.is-error {
  position: relative !important;
  background: #fff1f4 !important;
  color: #cf173b !important;
  border: 2px solid #ff5574 !important;
  border-radius: 15px !important;
  box-shadow: none !important;
  min-height: 86px !important;
  margin-top: 15px !important;
  padding: 15px 12px 13px 58px !important;
  overflow: visible !important;
}

body.screen-main #score-validation-warning::before {
  content: "!" !important;
  position: absolute !important;
  left: 19px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 31px !important;
  height: 31px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #d91c42 !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body.screen-main #score-validation-warning .score-validation-main {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px !important;
}

body.screen-main #score-validation-warning .score-validation-label {
  color: #cc1739 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.screen-main #score-validation-warning .score-validation-diff {
  color: #c91538 !important;
  font-size: 27px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}

body.screen-main #score-validation-warning .score-validation-sub {
  margin-top: 7px !important;
  color: #d54862 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}

/* =========================================================
   ACTIONS — broad disabled confirm, two raised icon buttons
   ========================================================= */
body.screen-main #confirm-round-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

body.screen-main #btn-confirm-round {
  grid-column: 1 / -1 !important;
  min-height: 55px !important;
}

body.screen-main #btn-reset-round,
body.screen-main #btn-abort-round {
  min-height: 58px !important;
}

body.screen-main #btn-confirm-round,
body.screen-main .score-confirm-button {
  background: #0876f8 !important;
  color: #ffffff !important;
  border: 3px solid #0054bd !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 0 #00489d, 0 11px 18px rgba(0, 67, 145, .15) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.screen-main #btn-confirm-round:disabled,
body.screen-main .score-confirm-button:disabled {
  background: #c5d7e7 !important;
  color: #f6fbff !important;
  border-color: #c5d7e7 !important;
  box-shadow: 0 5px 0 #a7bdd0 !important;
  opacity: 1 !important;
}

body.screen-main #btn-reset-round,
body.screen-main #btn-abort-round {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
}

body.screen-main #btn-reset-round {
  background: #ffffff !important;
  color: #0865cb !important;
  border: 3px solid #0876f8 !important;
  box-shadow: 0 6px 0 #98c0e1, 0 11px 17px rgba(0, 70, 150, .10) !important;
}

body.screen-main #btn-abort-round,
body.screen-main .host-round-emergency-button {
  background: #fff1f4 !important;
  color: #d2193e !important;
  border: 3px solid #ff617e !important;
  box-shadow: 0 6px 0 #e7b1bc, 0 11px 17px rgba(160, 20, 50, .09) !important;
}

body.screen-main .score-action-icon {
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 31px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.screen-main .score-action-icon svg {
  width: 29px !important;
  height: 29px !important;
}

body.screen-main .score-action-label {
  display: inline-block !important;
  text-align: center !important;
}

/* =========================================================
   SCORE TABLE — pale blue segmented table like the mockup
   ========================================================= */
body.screen-main #score-history-table-wrap {
  background: #ffffff !important;
  border: 3px solid #0876f8 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 0 #b0cee7, 0 14px 24px rgba(0, 64, 138, .12) !important;
  overflow: hidden !important;
}

body.screen-main #score-history-table-wrap table {
  background: #ffffff !important;
}

body.screen-main #score-history-table-wrap thead tr {
  background: #e7f3ff !important;
  color: #075fc7 !important;
  border-bottom: 2px solid #9fc9f2 !important;
}

body.screen-main #score-history-table-wrap thead th {
  background: #e7f3ff !important;
  color: #075fc7 !important;
  border-color: #9fc9f2 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

body.screen-main #score-history-table-wrap tbody {
  background: #ffffff !important;
  color: #154f86 !important;
}

body.screen-main #score-history-table-wrap tbody tr {
  background: #ffffff !important;
  border-color: #c9dff2 !important;
}

body.screen-main #score-history-table-wrap tbody td {
  border-color: #c9dff2 !important;
}

body.screen-main #score-history-table-wrap tfoot tr,
body.screen-main #score-history-table-wrap tfoot td {
  background: #f0f7ff !important;
  color: #0758b8 !important;
  border-color: #9fc9f2 !important;
}

/* =========================================================
   Narrow mobile tuning
   ========================================================= */
@media (max-width: 430px) {
  body.screen-main #app-title-home-link {
    min-height: 74px !important;
    padding-top: 9px !important;
    padding-bottom: 11px !important;
    margin-bottom: 15px !important;
  }

  body.screen-main #icons_header {
    gap: 7px !important;
  }

  body.screen-main #icons_header > #btn-share-game-url,
  body.screen-main #icons_header > #btn-game-photo,
  body.screen-main #icons_header > #btn-current-player-icon,
  body.screen-main #icons_header > #btn-open-user-manual,
  body.screen-main #icons_header > #btn-open-achievements {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    min-height: 43px !important;
    max-width: 43px !important;
    max-height: 43px !important;
    flex-basis: 43px !important;
  }

  body.screen-main #main-game-info-card {
    grid-template-columns: minmax(0, 1fr) 52px !important;
    padding: 14px 12px 13px !important;
  }

  body.screen-main #main-game-photo-button {
    width: 51px !important;
    height: 51px !important;
    min-width: 51px !important;
    min-height: 51px !important;
  }

  body.screen-main #score-input-panel {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  body.screen-main #score-input-panel > .flex.justify-between.items-center {
    margin-left: -11px !important;
    margin-right: -11px !important;
  }

  body.screen-main .score-player-achievement-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-basis: 38px !important;
  }

  body.screen-main .score-input-name {
    gap: 8px !important;
  }

  body.screen-main .score-input-name-main {
    gap: 5px !important;
  }

  body.screen-main .score-input-player-name-text {
    font-size: 13px !important;
  }

  body.screen-main .score-input-own-control input,
  body.screen-main .score-display,
  body.screen-main .score-display-locked {
    width: 96px !important;
    min-width: 96px !important;
  }

  body.screen-main .score-chip-value {
    min-width: 68px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.screen-main .score-input-control {
    gap: 6px !important;
  }
}

@media (max-width: 380px) {
  body.screen-main #icons_header {
    gap: 6px !important;
  }

  body.screen-main #icons_header > #btn-share-game-url,
  body.screen-main #icons_header > #btn-game-photo,
  body.screen-main #icons_header > #btn-current-player-icon,
  body.screen-main #icons_header > #btn-open-user-manual,
  body.screen-main #icons_header > #btn-open-achievements {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex-basis: 40px !important;
  }

  body.screen-main .score-input-own-control input,
  body.screen-main .score-display,
  body.screen-main .score-display-locked {
    width: 90px !important;
    min-width: 90px !important;
  }

  body.screen-main .score-chip-value {
    min-width: 63px !important;
  }

  body.screen-main .score-input-role-badges {
    display: none !important;
  }
}


/* =========================================================
   v1241 stability: single visual layer and a guaranteed interactive header control plane.
   ========================================================= */

body.screen-main #app-title-home-link .app-header-title-area {
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 8px 20px rgba(0,61,130,.14) !important;
}

body.screen-main #icons_header {
  position: relative !important;
  z-index: 60 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}

body.screen-main #icons_header > * {
  z-index: 61 !important;
  pointer-events: auto !important;
}

body.screen-main #icons_header > .hidden {
  display: none !important;
}

body.screen-main #icons_header > button:not(.hidden),
body.screen-main #icons_header > label:not(.hidden),
body.screen-main #icons_header > a:not(.hidden) {
  pointer-events: auto !important;
}

/* Header controls: one soft shadow only. */
body.screen-main #icons_header > #btn-share-game-url,
body.screen-main #icons_header > #btn-game-photo,
body.screen-main #icons_header > #btn-current-player-icon,
body.screen-main #icons_header > #btn-open-user-manual,
body.screen-main #icons_header > #btn-open-achievements {
  box-shadow: 0 7px 17px rgba(0,72,155,.20) !important;
}

/* Keep hidden-state ownership with the application; never force a hidden control visible. */
body.screen-main #icons_header > #btn-share-game-url.hidden,
body.screen-main #icons_header > #btn-game-photo.hidden,
body.screen-main #icons_header > #btn-current-player-icon.hidden,
body.screen-main #icons_header > #btn-open-user-manual.hidden,
body.screen-main #icons_header > #btn-open-achievements.hidden {
  display: none !important;
}

/* Remove the hard offset layer that made cards/buttons look duplicated. */
body.screen-main #main-game-info-card {
  box-shadow: 0 12px 26px rgba(0,66,145,.16) !important;
}
body.screen-main #main-game-photo-button {
  box-shadow: 0 7px 16px rgba(0,72,155,.16) !important;
}
body.screen-main #main-game-rules .main-game-info-rule-card {
  box-shadow: 0 4px 10px rgba(0,72,155,.09) !important;
}
body.screen-main #main-game-rules .mj-member-count-badge {
  box-shadow: 0 4px 10px rgba(0,72,155,.11) !important;
}
body.screen-main #score-input-panel {
  box-shadow: 0 13px 29px rgba(0,63,139,.17) !important;
}
body.screen-main #score-input-panel > .flex.justify-between.items-center {
  box-shadow: 0 5px 12px rgba(0,70,150,.14) !important;
}
body.screen-main #score-status-badge {
  box-shadow: 0 4px 10px rgba(0,72,155,.13) !important;
}
body.screen-main #score-inputs-container > .score-input-row {
  box-shadow: 0 7px 16px rgba(0,56,120,.13) !important;
}
body.screen-main #score-inputs-container > .score-input-row--me {
  box-shadow: 0 8px 18px rgba(0,103,182,.18) !important;
}
body.screen-main .score-player-achievement-button {
  box-shadow: 0 4px 10px rgba(0,96,170,.12) !important;
}
body.screen-main .player-role-badge.self,
body.screen-main .player-role-badge.host {
  box-shadow: 0 3px 8px rgba(0,72,155,.10) !important;
}
body.screen-main .score-input-own-control input {
  box-shadow: inset 0 -2px 0 #e0eef9, 0 5px 12px rgba(0,72,155,.14) !important;
}
body.screen-main .score-display,
body.screen-main .score-display-locked {
  box-shadow: inset 0 -2px 0 #e7edf3, 0 4px 10px rgba(0,58,120,.10) !important;
}
body.screen-main .score-chip-value {
  box-shadow: 0 5px 12px rgba(120,77,0,.12) !important;
}
body.screen-main #btn-confirm-round,
body.screen-main .score-confirm-button {
  box-shadow: 0 7px 16px rgba(0,67,145,.18) !important;
}
body.screen-main #btn-confirm-round:disabled,
body.screen-main .score-confirm-button:disabled {
  box-shadow: 0 5px 12px rgba(70,105,135,.12) !important;
}
body.screen-main #btn-reset-round {
  box-shadow: 0 7px 16px rgba(0,70,150,.14) !important;
}
body.screen-main #btn-abort-round,
body.screen-main .host-round-emergency-button {
  box-shadow: 0 7px 16px rgba(160,20,50,.12) !important;
}
body.screen-main #score-history-table-wrap {
  box-shadow: 0 10px 22px rgba(0,64,138,.14) !important;
}

/* Make the logo plane stop before the controls even under very narrow layouts. */
body.screen-main #app-title-home-link .app-header-title-area {
  min-width: 0 !important;
  overflow: hidden !important;
}
body.screen-main #icons_header {
  flex: 0 0 auto !important;
}


/* v1241: keep the logo behind the actionable icon plane. */
body.screen-main #app-title-home-link .app-header-title-area {
  position: relative !important;
  z-index: 0 !important;
}

body.screen-main #icons_header {
  position: relative !important;
  z-index: 500 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}

body.screen-main #icons_header > button,
body.screen-main #icons_header > label,
body.screen-main #icons_header > a {
  position: relative !important;
  z-index: 520 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

body.screen-main #icons_header > #btn-current-player-icon {
  z-index: 540 !important;
}

body.screen-main #icons_header svg,
body.screen-main #icons_header span,
body.screen-main #icons_header img {
  pointer-events: none !important;
}


/* v1242: make the visible circles' geometric hit areas explicit. */
body.screen-main #icons_header > #btn-share-game-url,
body.screen-main #icons_header > #btn-current-player-icon {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

body.screen-main #icons_header > #btn-share-game-url::before,
body.screen-main #icons_header > #btn-current-player-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}