/* style.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  overflow: hidden;
  background: #1e1e1a;
  /* Dark background for tablet safe zones */
}

img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

select option {
  background: #333 !important;
  color: #eee !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  transition: opacity 0.13s;
  font-family: Arial, sans-serif;
  font-size: 15px;
  background: #29241a;
  color: #eed89e;
  border: 1.5px solid #84632b;
  border-radius: 6px;
  min-width: 210px;
  padding: 13px 15px 13px 13px;
  box-shadow: 0 4px 24px #000a, 0 0 0 2px #b29767cc;
  line-height: 1.6;
}

/* Harmonise les infobulles du score, de l'or et du mana avec celles des ressources */
.custom-tooltip.resource-tooltip {
  font-size: 13.2px;
  line-height: 1.1;
  min-width: 200px;
  max-width: 280px;
  padding: 6px 12px;
  border-radius: 6px;
}

.custom-tooltip.resource-tooltip b {
  font-size: 13.8px;
}

.daily-reward-tooltip {
  max-width: 320px;
  white-space: normal;
  /* S'assure que l'infobulle passe au-dessus de la fenêtre quotidienne (z-index 200010) */
  z-index: 200020;
}

.daily-reward-tooltip-name {
  margin: 0 0 6px;
  color: #ffe6a4;
}

.daily-reward-tooltip-desc {
  margin: 0 0 6px;
  color: #f3e6c2;
}

.daily-reward-tooltip-usage {
  margin: 0;
  color: #d7c489;
  font-style: italic;
}

.custom-tooltip.region-tooltip {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 13.6px;
  line-height: 1.35;
  min-width: 320px;
  max-width: 520px;
  padding: 12px 16px 12px 14px;
  background: linear-gradient(135deg, #211c12, #18140c);
  color: #f6e5b5;
  border: 1.5px solid #a57b3e;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 224, 155, 0.4);
  border-radius: 6px;
}

.region-tooltip-title {
  font-weight: 700;
  color: #ffe6a4;
  margin-bottom: 6px;
}

.region-tooltip-line {
  margin: 2px 0;
}

.region-tooltip-label {
  color: #d5c38d;
}

.region-tooltip-value {
  color: #fef4c9;
  font-weight: 600;
}

.region-tooltip-hint {
  margin-top: 6px;
  font-style: italic;
  color: #c4b27e;
}

.region-tooltip-warning {
  margin-top: 8px;
  color: #ff6b5f;
  font-weight: 700;
}

.research-resource-header {
  /*font-size: 19px;*/
  margin: 0px 0px 8px 0px;
  margin-top: 8%;
  padding-left: 2%;
  line-height: 1.3em;
  color: #3d2e1f;
}

#building-tooltip {
  background: #25271e;
  color: #ffedbd;
  font-size: 15px;
  line-height: 1.35;
  border-radius: 8px;
  padding: 10px 16px 10px 12px;
  box-shadow: 2px 4px 12px #0009, 0 1px 0 #f4e3ba1c inset;
  min-width: 240px;
  max-width: 400px;
  pointer-events: none;
  opacity: 0.97;
  border: 2px solid #66592a;
  transition: opacity 0.18s;
  white-space: pre-line;
}

#building-tooltip.resource-tooltip {
  font-size: 13.2px;
  line-height: 1.1;
  min-width: 200px;
  max-width: 280px;
  padding: 6px 12px;
  border-radius: 6px;
}

.construction-speed-tooltip {
  min-width: 260px;
  max-width: 360px;
}

#building-tooltip .building-cap-tooltip {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#building-tooltip .building-cap-tooltip-label {
  color: #e7d8a6;
  font-weight: 600;
  margin-right: 6px;
}

#building-tooltip .building-cap-tooltip-value {
  color: #fff5c2;
  font-weight: 700;
}

#building-tooltip.resource-tooltip b {
  font-size: 13.8px;
}

.building-card.locked {
  opacity: 0.6;
}

.building-card.locked .building-thumb {
  opacity: 0.5;
  filter: grayscale(1);
}

.building-card.unbuildable {
  opacity: 0.6;
}

.building-card.unbuildable .building-thumb {
  opacity: 0.5;
  filter: grayscale(1);
}

.locked-unit {
  opacity: 0.6;
}

.locked-unit input,
.locked-unit button {
  pointer-events: none;
  opacity: 0.5;
}

#map-wrapper,
#city-grid {
  cursor: default !important;
}

.lou-scroll {
  scrollbar-width: auto;
  scrollbar-color: #5d9130;
  /* Pour Firefox */
}

.no-scroll {
  overflow-y: hidden;
}

.lou-scroll::-webkit-scrollbar {
  width: 22px;
  height: 22px;
  background: transparent;
}

.lou-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #7da55c, #45721c);
  border-radius: 8px;
  border: 2px solid #765b49;
}

.lou-scroll::-webkit-scrollbar-track {
  background: #a0907a;
  border-radius: 10px;
}

.lou-scroll::-webkit-scrollbar-button:single-button {
  display: block;
  height: 18px;
  background: linear-gradient(to bottom, #90c06e, #45721c);
  border-radius: 6px;
  border: 2px solid #e0d3b8;
  background-position: center;
  background-repeat: no-repeat;
}

.lou-scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='8' xmlns='http://www.w3.org/2000/svg'><polygon points='6,2 2,6 10,6' fill='%233e680c'/></svg>");
  background-size: 12px 8px;
}

.lou-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg width='12' height='8' xmlns='http://www.w3.org/2000/svg'><polygon points='2,2 10,2 6,6' fill='%233e680c'/></svg>");
  background-size: 12px 8px;
}

.lou-scroll::-webkit-scrollbar-button:single-button:horizontal {
  width: 18px;
}

.lou-scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg width='8' height='12' xmlns='http://www.w3.org/2000/svg'><polygon points='6,2 2,6 6,10' fill='%233e680c'/></svg>");
  background-size: 8px 12px;
}

.lou-scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg width='8' height='12' xmlns='http://www.w3.org/2000/svg'><polygon points='2,2 6,6 2,10' fill='%233e680c'/></svg>");
  background-size: 8px 12px;
}

#lou-header-banner {
  width: 498px;
  /* adapte EXACTEMENT à la largeur de ton image banner verte */
  height: 48px;
  /* hauteur = celle de l'image */
  margin: 0 auto;
  /* pour le centrer dans son parent */
  background: url(img/selectcity.png) center center no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  position: relative;
  flex-shrink: 0;
  background-position: -5px center;
  z-index: 10;
}

#lou-header-banner::before {
  content: url('img/UI/msc_btn_deco_end_left.png');
  position: absolute;
  top: 7px;
  right: 100%;
  margin-right: -11px;
  pointer-events: none;
}

#lou-header-banner::after {
  content: url('img/UI/msc_btn_deco_end_right.png');
  position: absolute;
  top: 7px;
  left: 100%;
  margin-left: -23px;
  pointer-events: none;
}

#sidebar-top-panel {
  background-image:
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/win_mainoverlay_l.png'),
    url('img/UI/win_mainoverlay_r.png'),
    url('img/UI/bgr_resource_container.png');
  background-position:
    left top,
    right top,
    left top,
    right top,
    center top;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y,
    repeat-y,
    no-repeat;
  background-size:
    auto,
    auto,
    auto,
    auto,
    100% 100%;
  margin-top: -20px;
  padding-top: 15px;
  position: relative;
  z-index: 1;
}

.lou-header-city-select {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.lou-header-city-select select {
  font-size: 13px;
  width: 197px;
  /* Ajuste ici pour bien centrer le texte sur la bannière */
  padding: 9px 3px 9px 37px;
  border: none;
  background: transparent;
  color: #dcc39a;
  font-weight: bold;
  outline: none;
  appearance: none;
  text-align: left;
  transform: translateX(-26px);
  top: -3px;
}

.lou-header-town-icon {
  position: absolute;
  transform: translateX(7px);
  top: 1px;
  width: 28px;
  height: 23px;
  background: none;
  /* ou background-size... si tu veux une taille d’icône commune */
  border: none;
  cursor: pointer;
  z-index: 2;
}

.pi-town-icon {
  width: 28px;
  height: 28px;
}

.lou-header-btn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.lou-header-btn-left,
.lou-header-btn-right,
.lou-header-btn-book {
  height: 45px;
  width: 45px;
  top: 0;
  background-size: 100% 100%;
}

.lou-header-btn-eye {
  height: 45px;
  width: 54px;
  top: 0;
  background-size: 100% 100%;
}

.lou-header-btn-eye {
  position: absolute;
  left: 287px;
  background-image: url('img/eyesicone.png'), url('img/form_bar/button-bar.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 29px 23px, 100% 100%;
}

.lou-header-btn-eye:hover {
  background-image: url('img/eyesicone.png'), url('img/form_bar/button-bar-hovered.png');
}

.lou-header-btn-eye:active {
  background-image: url('img/eyesicone.png'), url('img/form_bar/button-bar-pressed.png');
}

.lou-header-btn-left {
  position: absolute;
  left: 341px;
  background-image: url('img/scrollbar/scrollbar-left.png'), url('img/form_bar/button-bar.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 10px 13px, 100% 100%;
}

.lou-header-btn-left:hover {
  background-image: url('img/scrollbar/scrollbar-left.png'), url('img/form_bar/button-bar-hovered.png');
}

.lou-header-btn-left:active {
  background-image: url('img/scrollbar/scrollbar-left.png'), url('img/form_bar/button-bar-pressed.png');
}

.lou-header-btn-right {
  position: absolute;
  left: 386px;
  background-image: url('img/scrollbar/scrollbar-right.png'), url('img/form_bar/button-bar.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 10px 13px, 100% 100%;
}

.lou-header-btn-right:hover {
  background-image: url('img/scrollbar/scrollbar-right.png'), url('img/form_bar/button-bar-hovered.png');
}

.lou-header-btn-right:active {
  background-image: url('img/scrollbar/scrollbar-right.png'), url('img/form_bar/button-bar-pressed.png');
}

.lou-header-btn-book {
  position: absolute;
  left: 431px;
  background-image: url('img/livreicone.png'), url('img/form_bar_right/button-bar-right.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 25px 23px, 100% 100%;
}

.lou-header-btn-book:hover {
  background-image: url('img/livreicone.png'), url('img/form_bar_right/button-bar-right-hovered.png');
}

.lou-header-btn-book:active {
  background-image: url('img/livreicone.png'), url('img/form_bar_right/button-bar-right-pressed.png');
}

.modal-window {
  position: absolute;
  top: 90px;
  left: 508px;
  width: 677px;
  height: 614px;
  background-color: #e4d0af;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: hidden;
  user-select: none;
}

.modal-banner {
  position: relative;
  width: 100%;
  height: 36px;
  background: url('img/BannerModal.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: move;
}

.modal-title {
  color: #F5E8C5;
  font-size: 1.2rem;
  font-weight: bold;
  padding-left: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.modal-close-btn {
  position: absolute;
  top: 2px;
  right: 0px;
  width: 36px;
  height: 31px;
  background: url(img/Icon_Close_Button.png) no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}

.modal-close-btn:hover {
  opacity: 1;
}

.modal-close-btn-small {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 30px;
  height: 32px;
  background: url(img/Icon_Close_Button.png) no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s;
}

.modal-close-btn-small:hover {
  opacity: 1;
}

.modal-body {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  height: calc(100% - 45px);
  overflow-y: auto;
  padding: 12px 16px;
  box-sizing: border-box;
  font-size: 0.95rem;
  color: #3d2e1f;
  line-height: 1.4;
  background-color: #f5e8c5;
}

.modal-body p {
  margin-bottom: 8px;
}

.modal-body hr {
  border: none;
  border-top: 1px solid #a48a62;
  margin: 12px 0;
}

.modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 24px;
  box-sizing: border-box;
}

.objects-footer {
  justify-content: space-between;
  gap: 16px;
}

.objects-footer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  color: #3d2e1f;
  font-size: 0.85rem;
  padding-right: 46px;
  /* Ensure no overlap with the absolute button if text is long */
}

.objects-footer-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.objects-footer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.objects-footer-owner {
  flex-shrink: 0;
}

.objects-footer-label {
  white-space: nowrap;
  text-align: left;
}

.objects-footer-value {
  font-weight: 600;
}

.modal-banner {
  cursor: grabbing;
}

/* ───────────────────────────────────────────────────────────── */
/*  FENÊTRE “City Info” FLOTTANTE (Draggable)                     */
/* ───────────────────────────────────────────────────────────── */
#city-info-window {
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
}

#city-info-window .modal-banner {
  position: relative;
  top: -6px;
  z-index: 15;
}

#city-info-window .modal-body {
  background: transparent;
  padding: 9px;
}

#city-info-window #ci-city-reports-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#city-info-window #ci-city-reports-section .report-header {
  display: grid;
  grid-template-columns: 24px 1fr 100px 24px 24px;
  align-items: center;
  font-weight: bold;
  padding: 10px 6px;
  background: linear-gradient(to bottom, #fde9c7, #e9d1ad);
  border: 1px solid #9b7a4f;
  border-radius: 4px 4px 0 0;
}

#city-info-window #ci-city-reports-section .report-header .subject-label {
  padding-left: 26px;
}

#city-info-window #ci-city-reports-section .reports-list {
  max-height: 340px;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

#city-info-window #ci-city-reports-section .report-row .subject {
  position: relative;
  padding-left: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#city-info-window #ci-city-reports-section .report-row .subject::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* 5) Liste des rapports (scrollable si besoin) */
#city-info-window .modal-body .reports-list {
  max-height: 180px;
  /* ou moins, selon la place que vous souhaitez laisser */
  overflow-y: auto;
  border: 1px solid #a48a62;
  background: #faf0da;
  padding: 6px;
  border-radius: 4px;
}

#city-info-window .modal-body .reports-list em {
  font-style: italic;
  color: #3d2e1f;
}

#guide-window {
  overflow: visible;
}

#guide-window .modal-banner {
  position: relative;
  top: -6px;
  z-index: 30;
}


#command-window,
#virtues-window,
#alliance-info-window,
#alliance-attacks-window {
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
}

#command-window .modal-banner,
#virtues-window .modal-banner,
#alliance-info-window .modal-banner,
#alliance-attacks-window .modal-banner {
  position: relative;
  top: -6px;
  z-index: 15;
}

#command-window .modal-body,
#virtues-window .modal-body,
#alliance-info-window .modal-body,
#alliance-attacks-window .modal-body {
  background: transparent;
  padding: 9px;
  padding-bottom: 0px;
}

#alliance-info-window {
  width: 677px;
  height: 614px;
  overflow: visible;
}

.alliance-info-body {
  display: flex;
  flex-direction: column;
}

.alliance-info-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #a48a62;
  padding-bottom: 5px;
}

.alliance-info-tab-content.hidden {
  display: none;
}

.ai-info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-info-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.ai-label {
  font-weight: bold;
  color: #3d2e1f;
  min-width: 150px;
}

.ai-value {
  color: #5d432c;
  font-weight: 500;
  flex: 1;
}

.ai-rank-label {
  font-weight: bold;
  margin-left: auto;
}

.ai-rank-value {
  font-weight: bold;
  color: #3d2e1f;
  margin-right: 20px;
}

.ai-description-row {
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-top: 10px;
}

.ai-description-text {
  width: 100%;
  height: 250px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #a48a62;
  border-radius: 4px;
  padding: 10px;
  margin-top: 5px;
  white-space: pre-wrap;
  overflow-y: auto;
}

.alliance-member-header {
  display: flex;
  margin-bottom: 2px;
  font-weight: bold;
}

.alliance-member-list {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #9b7a4f;
  background: #faf0da;
  border-radius: 0 0 4px 4px;
}

.alliance-member-row {
  display: flex;
  padding: 8px 5px;
  border-bottom: 1px solid #e9d1ad;
  align-items: center;
  color: #3d2e1f;
}

.alliance-member-row:nth-child(even) {
  background-color: #f2e4ca;
}

.alliance-member-row:hover {
  background-color: #ebdcb9;
}

.alliance-member-row div {
  padding: 0 5px;
}

.player-link {
  color: #0044cc;
  text-decoration: none;
}

.player-link:hover {
  text-decoration: underline;
}

/*  FENÊTRE “Recruitment” FLOTTANTE (même style que City Info) */

#reports-window {
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
}

#reports-window .modal-banner {
  position: relative;
  top: -6px;
  z-index: 15;
}

#reports-window .modal-body {
  background: transparent;
  padding: 9px;
  padding-bottom: 0px;
}


/* Header banner */
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 51px;
  background: transparent;
  display: flex;
  align-items: flex-start;
  padding: 0 10px;
  z-index: 20;
}

#game-logo {
  position: fixed;
  top: 10px;
  right: 20px;
  width: 120px;
  pointer-events: none;
  z-index: 25;
  /* au-dessus du header et du player-info */
}

#game-logo img {
  display: block;
  width: 100%;
  height: auto;
}

#game-container {
  position: relative;
  width: 100%;
  height: calc(100dvh - 50px);
}

/* Fill vertical space on tablets/mobile */
@media (max-width: 1400px),
(max-height: 1100px) {
  #game-container {
    height: 100dvh;
  }
}

#top-bar-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 83px;
  background: url('img/UI/bgr_top.png') no-repeat center / 105% 102%;
  z-index: 1;
  pointer-events: none;
}

#game-nav {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;
}

#game-nav::before {
  content: '';
  position: absolute;
  top: 0px;
  bottom: -9px;
  left: -10px;
  width: 29px;
  background-image: url(img/deco_header_gauche.png);
  background-repeat: no-repeat;
  background-size: 10px 100%;
  pointer-events: none;
}

#game-nav::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -2px;
  right: -41px;
  width: 41px;
  background-image: url('img/deco_header.png');
  background-repeat: no-repeat;
  background-size: 33px 100%;
  pointer-events: none;
}

#game-nav .nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  padding: 12px;
  border-right: 1px solid #55451a;
  margin-right: 0;
  border-radius: 0;
}

#game-nav .nav-btn:last-child {
  border-right: none;
}

#nav-quests.new-quest {
  position: relative;
}

#nav-quests.new-quest::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('img/icon_mainmenu_quest.png') no-repeat center/contain;
}

#nav-mail.new-mail {
  position: relative;
}

#nav-mail.new-mail::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  background: url('img/icon_mainmenu_mail.png') no-repeat center/contain;
}

#nav-mail.new-mail::after {
  content: attr(data-unread);
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}

#nav-reports.new-report {
  position: relative;
}

#nav-reports.new-report::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('img/icon_mainmenu_reports.png') no-repeat center/contain;
}

#nav-social.new-social {
  position: relative;
}

#nav-social.new-social::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('img/icones/icon_mainmenu_friends_small.png') no-repeat center/contain;
}

#nav-social.new-social::after {
  content: attr(data-unread);
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}

#game-nav .shop-btn {
  background: linear-gradient(180deg, #327e96 0%, #20546b 100%);
}

#game-nav .shop-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

#bars-container {
  position: absolute;
  top: 96px;
  left: 93%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 16;
}

/* Maintain bar visibility on wide screens/tablets */
@media (min-width: 1200px) {
  #bars-container {
    left: auto;
    right: 20px;
    transform: none;
  }
}

#zone-bar {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  z-index: 16;
}

#zone-bar .zone-btn {
  width: 80px;
}

#zone-bar .zone-btn.active {
  background: linear-gradient(180deg, #ffaf00 0%, #fb9f00 100%);
  color: #772a00;
}

#coord-bar {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  z-index: 16;
}

#coord-bar input {
  width: 46px;
  text-align: center;
  border: 1px solid #666;
  border-radius: 4px;
  background: #f5e8c5;
  color: #333;
  padding: 2px;
}

#coord-bar .coord-eye-btn {
  width: 28px;
  height: 28px;
  background: url('img/eyesicone.webp') no-repeat center center;
  background-size: contain;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 2) Player info : juste sous le game-nav */
#player-info {
  position: absolute;
  z-index: 5;
  top: 45px;
  /* aligné en haut du conteneur de jeu */
  left: 0;
  right: 0;
  padding: 8px 18px;
  height: 46px;
  border-bottom-left-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 15;
  /* plus haut que #layout */
}

#player-info>* {
  flex: 0 0 164px;
  text-align: left;
}

/* Petite icône d’or */
#player-info .icon-small {
  width: 28px;
  height: 28px;
}

/* Icône de mana au format adapté */
#player-info .mana-icon-small {
  width: 32px;
  height: 32px;
}

.gold-group {
  display: flex;
  align-items: center;
  gap: 4px;
  /* petit écart entre icône et nombre d’or */
}

.mana-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.protect-group {
  display: none;
  position: absolute;
  top: 8px;
  left: calc(18px + 5 * 153px - 28px);
  align-items: center;
  gap: 4px;
}

.incoming-attack-group,
.outgoing-attack-group,
.illumination-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.protect-icon {
  width: 28px;
  height: 28px;
}

#username {
  color: #7889ae;
  text-shadow: 0 0 1px #2c3758, 0 0 3px #0e1c44, 0 0 5px #15214d;
}

#score,
#player-title,
#gold {
  color: #e7dab7;
  text-shadow: 0 0 1px #2c3758, 0 0 3px #0e1c44, 0 0 5px #15214d;
}

#mana {
  color: #e7dab7;
  text-shadow: 0 0 1px #2c3758, 0 0 3px #0e1c44, 0 0 5px #15214d;
}

#incoming-attacks,
#outgoing-attacks,
#illum-count {
  color: #858483;
}


.outgoing-attack-group.attack-active #outgoing-attacks {
  color: red;
}

#city-bar select {
  margin-right: 10px;
  padding: 6px;
}

.tab {
  padding: 6px 12px;
  margin-right: 6px;
  background: #4a694a;
  color: #fff;
  border: none;
  cursor: pointer;
}

header .tab.active {
  background: #82a87c;
}

/* Layout */
#layout {
  position: absolute;
  top: 0;
  /* espace pour #player-info */
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: calc(100% - -94px);
  background: #23241e;
}

/* Tablet safeguard for layout height */
@media (max-width: 1400px),
(max-height: 1100px) {
  #layout {
    height: 100%;
  }
}

/* Sidebar styling */
#sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* important pour empêcher tout le sidebar de scroller */
  position: absolute;
  top: 91px;
  left: 0px;
  bottom: 8px;
  width: 499px;
  /*background: url(img/panel-info.webp) no-repeat center / 99% 100%;*/
  background-position: 8px center;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-left: 9px;
  padding-right: 9px;
}

/*#sidebar-top-panel {
  background: url('img/ressources.webp') repeat-x center top;
  background-size: contain;
  padding-bottom: 0px;
  position: sticky;
  top: 0;
  z-index: 2;
}*/

/* Vos onglets sous #resources */
#sidebar-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0px 8px;
  margin-bottom: 5px;
  margin-top: -13px;
}

/* Chaque icône + bouton reçoit une largeur fixe identique */
#sidebar-tabs .tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centre icône et bouton */
  flex: none;
  /* pas de flex-grow */
  width: 100px;
  /* largeur fixe pour tous les onglets */
}

/* Cadre autour de l’icône */
.tab-icon-box {
  width: 95px;
  height: 45px;
  margin: 0 auto 6px;
  overflow: hidden;
  border: 2px solid #466113;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #eddfc5, #dcc69e);
  box-shadow: inset 0 3px 3px rgb(70 97 19);
}

/* L’image se centre et remplit verticalement le cadre */
.tab-icon-box .tab-icon {
  width: 52%;
  height: 107%;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.tab-icon-box.active-minister {
  box-shadow: inset 0 3px 3px rgb(70 97 19);
}

.tab-icon-box.active-minister .tab-icon {
  opacity: 1;
}

/* Bouton pleine largeur de l’onglet */
.tab-btn {
  width: 100%;
  padding: 8px 0 7px 0;
  font-size: 0.9em;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow:
    0 1px 0 #a89e6f inset,
    0 3px 7px #072500,
    0 2px 0 #35540b;
  transition:
    box-shadow 0.12s,
    background 0.11s,
    transform 0.1s;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  display: block;
}

/* Onglet actif : nuance plus foncée et texte plus lumineux */
.tab-item.active .tab-btn {
  background: linear-gradient(180deg, #3b660e 0%, #658624 70%, #314b0f 100%);
  color: #e7dab7;
  border: 1px solid #9a5c11;
}

.tab-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#objects-shop-btn:hover,
#game-nav .shop-btn:hover {
  background: linear-gradient(180deg, #6bb5d1 0%, #327e96 50%, #20546b 100%);
  color: #fffbe0;
}

.tab-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

.tab-btn:disabled {
  background: #888;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}


.btn-green-small {
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%) !important;
  color: #e7dab7 !important;
  border: 2px solid #4f7219 !important;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b !important;
  cursor: pointer;
  transition: background 0.11s, box-shadow 0.12s, transform 0.1s;
}

.btn-green-small:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%) !important;
  color: #fffbe0 !important;
}

.btn-green-small:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%) !important;
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645 !important;
  transform: translateY(2px);
}

.btn-blue-small {
  background: linear-gradient(180deg, #327e96 0%, #20546b 100%) !important;
  color: #fffbe0 !important;
  border: 2px solid #20546b !important;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  box-shadow: 0 1px 0 #6bb5d1 inset, 0 3px 7px rgba(0, 0, 0, 0.5), 0 2px 0 #153847 !important;
  cursor: pointer;
  transition: background 0.11s, box-shadow 0.12s, transform 0.1s;
}

.btn-blue-small:hover {
  background: linear-gradient(180deg, #6bb5d1 0%, #327e96 50%, #20546b 100%) !important;
  color: #fff !important;
}

.btn-blue-small:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%) !important;
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645 !important;
  transform: translateY(2px);
}


/* Special action buttons used inside overlays */
.overlay-btn {
  position: relative;
  width: 83%;
  margin: 0 auto;
  padding-left: 42px;
  padding-right: 42px;
}

.overlay-btn::before,
.overlay-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 41px;
  background-repeat: no-repeat;
  background-size: 41px 100%;
  pointer-events: none;
}

.overlay-btn::before {
  left: -35px;
  background-image: url('img/UI/msc_btn_deco_end_left.png');
}

.overlay-btn::after {
  right: -35px;
  background-image: url('img/UI/msc_btn_deco_end_right.png');
}

/* Button used to purify resources in the research panel */
.purify-btn {
  margin-left: 61px;
  margin-top: 2px;
  width: 76%;
}

/* Panel area */
#panel-area {
  /*padding:5px;*/
  flex: 1 1 auto;
  overflow-y: hidden;
  min-height: 0;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 5px;
  position: relative;
  overflow: visible;
  /* Background Stack:
     Paper (Bottom) - remains on main element
  */
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center / 100% 100%;
}

#panel-area::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
  /* Decorations Overlay Stack:
     1. Vertical Shadows (Top)
     2. Borders (Sides/Bottom)
  */
  background-image:
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/win_mainoverlay_b.png'),
    url('img/UI/win_mainoverlay_l.png'),
    url('img/UI/win_mainoverlay_r.png');
  background-position:
    left bottom 29px,
    right bottom 29px,
    left bottom,
    left top,
    right top;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-x,
    repeat-y,
    repeat-y;
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto;
}

.msc_win_deco_bl {
  position: absolute;
  bottom: -4px;
  left: -5px;
  width: 29px;
  height: 29px;
  background: url('img/UI/msc_win_deco_bl.png') no-repeat center / 100% 100%;
  z-index: 6;
  /* Raised to match overlay */
  pointer-events: none;
}

.msc_win_deco_br {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: 29px;
  height: 29px;
  background: url('img/UI/msc_win_deco_br.png') no-repeat center / 100% 100%;
  z-index: 6;
  /* Raised to match overlay */
  pointer-events: none;
}

.panel {
  margin-bottom: 20px;
}

.panel h3 {
  font-size: 1.1em;
  margin-bottom: -69px;
  margin-top: 0px;
  /*border-bottom:1px solid #a48a62;*/
  padding-bottom: 4px;
  /*flex: 1 1 auto;*/
  overflow: hidden;
}

.panel ul {
  list-style: none;
}

.panel ul li {
  padding: 4px 0;
}

.hidden {
  display: none !important;
}

/* Game message styling */
.game-message {
  color: #a30000;
  text-align: center;
  font-weight: bold;
  background: rgb(0 0 0 / 69%);
  padding: 4px 8px;
  position: fixed;
  top: 99px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
}

.game-message.error {
  color: #a30000;
}

.game-message.info {
  color: #e7dab7;
}

/* Game area styling */
#game {
  position: absolute;
  top: 80px;
  left: 504px;
  right: 0;
  bottom: 28px;
  background: #333;
  overflow: hidden;
  flex: 1 1 auto;
}

#map-wrapper {
  width: 100%;
  height: calc(100% - 2px);
  /* espace réservé pour le footer */
  overflow: hidden;
  /* c’est #game qui masque maintenant */
  position: relative;
  /* pour le positioning de city-grid */
  background: #666;
}

/* plus aucune sélection possible sur la carte ou ses enfants */
#map-container,
#city-grid,
#city-grid * {
  user-select: none;
  /* standard */
  -webkit-user-select: none;
  /* Safari/Chrome */
  -ms-user-select: none;
  /* IE10+ */
  -moz-user-select: none;
  /* Firefox */
  touch-action: none;
  /* désactive aussi le scroll tactile */
}

#city-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 2893px;
  height: 1809px;
  transform-origin: 0 0;
}

#city-grid img#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ——— canevas de grille ——— */
#city-grid canvas#gridCanvas {
  position: absolute;
  pointer-events: none;
  /* laisse passer tous les clics */
  /* width / height / top / left sont gérés en JS */
}

.palace-virtue-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  image-rendering: auto;
  display: block;
}

#region-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--region-width, 16384px);
  height: var(--region-height, 16384px);
  overflow: hidden;
  /* Avoid flashing a green background while the procedural region map re-renders */
  background-color: transparent;
  transform-origin: 0 0;
}

#region-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #0e2636;
  /* au cas où les tuiles tardent */
}

#region-map img {
  position: absolute;
  display: block;
}

#region-grid canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  pointer-events: auto;
}

/* Chat panel */
#chat-panel {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 640px;
  max-width: 640px;
  min-width: 640px;
  height: 260px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(22, 18, 12, 0.64) 0%, rgba(17, 14, 10, 0.64) 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  color: #f2eddd;
  z-index: 12;
  backdrop-filter: blur(1.5px);
  overflow: visible;
  padding: 10px 12px 12px;
  box-sizing: border-box;
}

#chat-panel.chat-panel--collapsed {
  display: none;
}

#chat-mini-toggle {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 12;
}

.chat-mini-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.2;
  color: #f4e6bf;
  background: linear-gradient(180deg, rgba(17, 30, 17, 0.92) 0%, rgba(14, 23, 14, 0.88) 100%);
  border: 1px solid rgba(80, 110, 68, 0.75);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.chat-mini-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, rgba(32, 48, 32, 0.95) 0%, rgba(22, 36, 22, 0.92) 100%);
}

.chat-mini-toggle:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.chat-mini-toggle:focus-visible {
  outline: 2px solid #d8c17a;
  outline-offset: 2px;
}

.chat-mini-toggle .chat-mini-icon {
  font-size: 16px;
  line-height: 1;
}

.chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  margin-bottom: -1px;
  background: none;
  border: none;
}

.chat-tab-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
}

.chat-tabs {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  gap: 0;
  flex-wrap: nowrap;
  border: 1px solid rgba(177, 123, 49, 0.9);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, rgba(67, 46, 28, 0.92) 0%, rgba(48, 31, 18, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 177, 0.18);
  overflow: visible;
  position: relative;
}

.chat-tab {
  position: relative;
  padding: 7px 18px 6px;
  font-size: 13px;
  line-height: 1.2;
  color: #f7e7c4;
  background: linear-gradient(180deg, rgb(88 74 68) 0%, rgb(65 45 36) 100%);
  border: none;
  border-right: 1px solid rgba(24, 15, 8, 0.45);
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  transform: translateY(2px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.chat-tab:hover {
  background: linear-gradient(180deg, rgba(94, 66, 38, 0.96) 0%, rgba(71, 47, 26, 0.96) 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.chat-tab.is-active {
  background: linear-gradient(180deg, rgba(122, 78, 36, 0.98) 0%, rgba(92, 57, 26, 0.98) 100%);
  color: #fff2bc;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 236, 198, 0.35);
  border: 1px solid rgba(212, 166, 80, 0.95);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  z-index: 2;
}

.chat-tab:last-child {
  border-right: none;
}

.chat-tab.is-disabled,
.chat-tab[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.chat-tabs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(177, 123, 49, 0.9);
  z-index: 1;
}

.chat-whisper-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px;
  align-items: center;
}

.chat-whisper-tabs[hidden] {
  display: none !important;
}

.chat-whisper-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chat-whisper-tab__button {
  background: none;
  border: none;
  color: #123d8f;
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.chat-whisper-tab__button:hover,
.chat-whisper-tab__button:focus {
  color: #1f56c1;
  background-color: rgba(26, 60, 132, 0.12);
  outline: none;
}

.chat-whisper-tab__button.is-active {
  color: #1f56c1;
  background-color: rgba(26, 60, 132, 0.2);
}

.chat-whisper-tab__close {
  background: none;
  border: none;
  color: #c7d4f6;
  font-size: 11px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.chat-whisper-tab__close:hover,
.chat-whisper-tab__close:focus {
  color: #f6f1ff;
  background-color: rgba(194, 208, 255, 0.18);
  outline: none;
}

.chat-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-bottom: 4px;
  align-self: flex-start;
}

.chat-control.tab-btn {
  width: 34px;
  min-width: 34px;
  height: 30px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-control.tab-btn span[aria-hidden="true"] {
  pointer-events: none;
}

.chat-control.tab-btn:disabled {
  background: rgba(46, 54, 44, 0.85);
  border-color: rgba(62, 72, 60, 0.9);
  color: #717a70;
  box-shadow: none;
  cursor: default;
}

.chat-body {
  flex: 1 1 auto;
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(177, 123, 49, 0.9);
  border-top: none;
  border-bottom: none;
  background: rgba(19, 14, 9, 0.41);
  box-shadow: inset 0 1px 0 rgba(255, 224, 176, 0.08);
  min-height: 0;
  overflow: hidden;
}

.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.35;
  color: #f2f9f0;
  font-family: 'Courier New', 'Lucida Console', monospace;
  gap: 4px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-message {
  display: block;
  padding: 1px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message--system .chat-text {
  color: #ffd978;
  font-style: italic;
}

.chat-timestamp {
  color: #ffffff;
  font-weight: 600;
  min-width: 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  margin-right: 8px;
}

.chat-tag {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-right: 8px;
}

.chat-tag--alliance {
  color: #83f1ff;
}

.chat-tag--whisper {
  color: #f0a8ff;
}

.chat-tag--patch {
  color: #ffd48a;
}

.chat-author {
  color: #ffe7a8;
  font-weight: 600;
}

.chat-author::after {
  content: ':';
  color: #ffe7a8;
  margin-left: 4px;
  margin-right: 4px;
}

.chat-author--interactive {
  cursor: pointer;
}

.chat-author--interactive:hover,
.chat-author--menu-open {
  text-decoration: underline;
}

.chat-author-container {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.chat-alliance-tag {
  color: #a48a62;
  font-weight: 600;
  margin-right: 4px;
}

.chat-alliance-tag--interactive {
  cursor: pointer;
}

.chat-alliance-tag--interactive:hover {
  text-decoration: underline;
  color: #ffe7a8;
}

.chat-text {
  flex: 1 1 auto;
  color: #f6ffef;
}

.chat-whisper-direction {
  color: #cdd6cf;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 600;
}

.chat-whisper-partner {
  color: #d9e7cf;
  font-weight: 600;
}

.chat-user-menu {
  position: fixed;
  z-index: 1200;
  min-width: 184px;
  background: rgba(18, 13, 9, 0.95);
  border: 1px solid rgba(255, 221, 171, 0.4);
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

.chat-user-menu[hidden] {
  display: none !important;
}

.chat-user-menu__item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: #ffe7a8;
  font-size: 13px;
  font-family: 'Courier New', 'Lucida Console', monospace;
  text-align: left;
  cursor: pointer;
  transition: background-color 80ms ease, color 80ms ease;
}

.chat-user-menu__item+.chat-user-menu__item {
  border-top: 1px solid rgba(255, 231, 168, 0.12);
}

.chat-user-menu__item:hover,
.chat-user-menu__item:focus {
  background: rgba(255, 231, 168, 0.16);
  color: #fffbe6;
  outline: none;
}

.chat-user-menu__item:active {
  background: rgba(255, 231, 168, 0.26);
}

.chat-input-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 12px;
  border: 1px solid rgba(177, 123, 49, 0.9);
  border-top: none;
  border-radius: 0 0 9px 9px;
  background: rgba(21, 15, 10, 0.41);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08);
  margin-top: -1px;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#chat-input {
  flex: 1 1 auto;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid rgb(168 134 101);
  background: rgba(15, 22, 15, 0.7);
  color: #f7ffef;
  font-size: 13px;
}

#chat-input::placeholder {
  color: rgba(221, 233, 211, 0.55);
}

.chat-send.tab-btn {
  width: auto;
  min-width: 96px;
  padding: 7px 18px;
  font-size: 0.85em;
}

.chat-status {
  font-size: 12px;
  min-height: 16px;
  color: #ff9b8f;
}

.chat-status[data-tone="info"] {
  color: #9bd7ff;
}

.region-entity-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 1;
}

.region-entity {
  position: absolute;
  pointer-events: none;
}

.region-entity img {
  position: absolute;
  pointer-events: none;
  image-rendering: auto;
}

.region-entity-content {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.region-entity-badge {
  display: block;
  position: relative;
  border-radius: 50%;
  background: transparent;
}

.region-entity-badge::before {
  content: '';
  position: absolute;
  inset: var(--region-badge-inset, 2px);
  border-radius: 50%;
  background: var(--region-badge-color, transparent);
}

.region-entity-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('img/icones/player_col_frame.png') no-repeat center/contain;
  pointer-events: none;
}

.region-entity-badge--player::before,
.region-entity-badge--player::after {
  transform: translateX(35px);
  transform: translateY(-5px);
}

#region-grid #region-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#region-grid #region-map img {
  position: absolute;
  width: 2048px;
  height: 2048px;
  image-rendering: auto;
}

#world-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--world-size);
  height: var(--world-size);
  overflow: hidden;
  background-color: #467337;
  transform-origin: 0 0;
}

#world-grid canvas {
  position: absolute;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

.region-selection-glow {
  pointer-events: none;
  mix-blend-mode: screen;
}

.cell {
  width: 178px;
  height: 111px;
  position: relative;
}

.cell.wall::before,
.cell.outer-ring::before {
  content: '';
  position: absolute;
  left: var(--cell-bg-left, 0);
  right: var(--cell-bg-right, 0);
  width: var(--cell-bg-width, auto);
  top: var(--cell-bg-top, auto);
  bottom: var(--cell-bg-bottom, 0);
  height: var(--cell-bg-height, 140%);
  background-image: var(--cell-bg);
  background-repeat: no-repeat;
  background-position: var(--cell-bg-position, center bottom);
  background-size: var(--cell-bg-size, auto);
  pointer-events: none;
  z-index: 4;
}

.gatehouse-overlay {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 3;
}

.cell.empty {
  display: none;
}

.cell.buildable {
  cursor: pointer;
}

.cell.port-zone {
  cursor: pointer;
}

.cell.resource,
.cell.built {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.cell-selection-marker {
  z-index: 1;
  /* au-dessus du reste mais sous les popups */
  pointer-events: none;
  transition: opacity 0.18s;
  opacity: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.cell-selection-marker.tutorial-highlight {
  animation: tutorialBlink 1s ease-in-out infinite;
}

@keyframes tutorialBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.cell img:not(.cell-selection-marker) {
  z-index: 2;
  position: relative;
  /* ou absolute si besoin */
}

/*────────────────────────────────────────────────────────────────
  Style pour la liste de bâtiments dans #panel-info
────────────────────────────────────────────────────────────────*/
.building-list-container {
  /* Même dimensions que votre image de fond FondListeBatiments.webp */
  width: 496px;
  height: 604px;

  /* Affiche l’image sous la zone des cartes, fixe (pas de scroll) */
  background: url('img/FondListeBatiments.webp') no-repeat center top;
  background-size: cover;

  /* Pour bien contenir la zone scrollable, on positionne en relatif */
  position: relative;

  /* L’importance : tout ce qui dépasse de ces 526×619 sera caché */
  overflow: hidden;
  margin: 0 auto;
  /* centre horizontalement, si besoin */
  flex: none;
  /* ne pas s’étirer dans le flex parent */
}

/* Conteneur flex pour aligner horizontalement + en grille */
.building-list {
  /* Occupe tout l’espace disponible dans building-list-container */
  width: 100%;
  height: 100%;

  /* C’est cette zone qui défile verticalement */
  overflow-y: hidden;
  overflow-x: hidden;

  /* On garde le flex pour placer les cartes en grille */
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  align-content: flex-start;

  /* Un padding plus large pour reproduire l’overlay boss/donjon */
  padding: 15px;
}

/* Chaque “carte† de bâtiment utilise CadreBR.png comme arrière-plan */
.building-card {
  position: relative;
  width: 143px;
  /* ajustez selon les dimensions réelles de CadreBR.png */
  height: 159px;
  /* ajustez selon les dimensions réelles de CadreBR.png */
  background: url('img/CadreBR.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Le bandeau du nom, sur fond NameBanner.png, positionné en absolu */
.building-banner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  /* ajustez à la taille réelle de NameBanner.png */
  height: 29px;
  /* ajustez à la taille réelle de NameBanner.png */
  background: url('img/NameBanner.png') no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #F5E8C5;
  /* couleur claire pour le texte */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* L’icône du bâtiment, centrée automatiquement dans le cadre */
.building-thumb {
  position: relative;
  width: 79px;
  /* adaptez à la taille de vos icônes */
  height: 79px;
  object-fit: contain;
  z-index: 1;
}

/* Optionnel : dans #building-details (pendant la sélection d’un bâtiment) */
#building-details {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* L’élément lui-même porte le scroll vertical */
  overflow-x: hidden;
  /* Pas de scroll horizontal */
  padding: 12px;
  box-sizing: border-box;
}

/*────────────────────────────────────────────────────────────────
  1) CONTENEUR OVERLAY “plein écran” dans #panel-info
────────────────────────────────────────────────────────────────*/

/* 2) Sélecteur de ville, ressources, onglets → hauteur « naturelle », pas de flex-grow */
#city-select-area,
#resources,
#sidebar-tabs {
  flex: none;
}

/* 4) #panel-info (le panel “Infos”) mesure maintenant 100% de  */
#panel-info {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: 13px;
  padding: 0 5px 0 7px;
}

#panel-quete {
  /* Overlay container for quest list */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
}

#panel-reports {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
}

#panel-alliance {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  overflow: hidden;
}

.alliance-accent {
  color: #f6d87b !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  font-weight: 600;
}

#panel-alliance .building-list-bg {
  padding-bottom: 18px;
  flex: 1 1 auto;
}

#panel-alliance .alliance-existing {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#panel-alliance .alliance-empty {
  padding: 18px 22px 8px;
  text-align: center;
  color: #f5e8c5;
}

#panel-alliance .alliance-empty-intro {
  margin: 0 auto 12px;
  max-width: 420px;
  line-height: 1.4;
  color: red;
}

#panel-alliance .alliance-empty-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#panel-alliance .alliance-empty .tab-btn.overlay-btn {
  min-width: 180px;
}

#panel-alliance .alliance-form {
  background: rgba(26, 18, 8, 0.7);
  border: 1px solid #a48a62;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0 auto 18px;
  width: clamp(240px, 90%, 460px);
  text-align: left;
  color: #f5e8c5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#panel-alliance .alliance-form-title {
  margin: 0 0 12px;
  text-align: center;
  font-size: 1.15rem;
  color: #f8ead1;
}

#panel-alliance .alliance-form label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 600;
  color: #f8ead1;
}

#panel-alliance .alliance-form input,
#panel-alliance .alliance-form textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #bca782;
  background: rgba(0, 0, 0, 0.35);
  color: #f8f1dd;
  font-family: inherit;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

#panel-alliance .alliance-form input:focus,
#panel-alliance .alliance-form textarea:focus {
  outline: none;
  border-color: #f6d87b;
  box-shadow: 0 0 0 1px rgba(246, 216, 123, 0.45);
}

#panel-alliance .alliance-form textarea {
  resize: vertical;
  min-height: 96px;
}

#panel-alliance .alliance-input-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #d4c4a3;
}

#panel-alliance .alliance-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#panel-alliance .alliance-empty-list {
  margin: 0;
  color: #f5e8c5;
  text-align: center;
  font-size: 0.95rem;
}

#panel-alliance #alliance-invitations-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  padding-bottom: 56px;
}

#panel-alliance #alliance-invitations {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #a48a62;
}

#panel-alliance #alliance-invitations.is-empty {
  justify-content: center;
  text-align: center;
}

#panel-alliance .alliance-invitations .alliance-empty-list {
  width: 100%;
  padding: 32px 0;
}

#panel-alliance .alliance-invitation-item {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(26, 18, 8, 0.55);
  color: #f5e8c5;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#panel-alliance .alliance-invitation-item:hover {
  background: rgba(60, 42, 20, 0.68);
}

#panel-alliance .alliance-invitation-item.selected {
  border-color: #f6d87b;
  background: rgba(82, 61, 28, 0.78);
  box-shadow: 0 0 8px rgba(246, 216, 123, 0.35);
}

#panel-alliance .alliance-invitation-name {
  font-weight: 600;
  font-size: 0.98rem;
}

#panel-alliance .alliance-invitation-meta {
  font-size: 0.82rem;
  color: #d4c4a3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#panel-alliance .alliance-invitation-message {
  font-style: italic;
  color: #e6d5b5;
  line-height: 1.3;
}

#panel-alliance #alliance-invite-accept {
  position: absolute;
  right: 34px;
  bottom: 12px;
  padding: 10px 18px;
  white-space: nowrap;
}

#panel-alliance .alliance-feedback {
  margin: 10px 0 0;
  font-size: 0.9rem;
}

#panel-alliance .alliance-feedback.error {
  color: #ffb0a0;
}

#panel-alliance .alliance-feedback.success {
  color: #b3f7c6;
}

#panel-alliance .alliance-tabs {
  margin-top: 12px;
}

/* 5) Overlay “liste des bâtiments” */
.panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  z-index: 150;
}

/* ───────────────────────────────────────────────────────────────
   Overlay carte du monde
   ─────────────────────────────────────────────────────────────── */
#world-map-overlay {
  padding: 0;
}

#world-map-overlay .building-list-bg {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#world-map-overlay .interface-banner {
  width: 100%;
}

#world-map-overlay .world-overlay-content {
  padding: 20px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  color: #5b411c;
}

.legend-toggle {
  align-self: center;
  width: 90%;
  text-transform: none;
  font-size: 0.95rem;
  font-family: 'Cinzel', serif;
  background: linear-gradient(180deg, #67cc3b 0%, #2f7d2b 100%);
  border: 1px solid #1b4d14;
  color: #f5ffdc;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  margin-bottom: 14px;
}

.legend-toggle:hover {
  background: linear-gradient(180deg, #6fe245 0%, #2b6b25 100%);
}

.legend-toggle.collapsed {
  background: linear-gradient(180deg, #f0b04d 0%, #c87a1f 100%);
  border-color: #8c4f0f;
  color: #fff7dc;
}

.legend-toggle.collapsed:hover {
  background: linear-gradient(180deg, #f6c164 0%, #b36416 100%);
}

.world-overlay-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#world-map-overlay .world-overlay-section+.world-overlay-section {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 230, 180, 0.18);
}

#world-map-overlay .world-overlay-legend {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.world-overlay-section-title {
  margin: 0 0 6px;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: #5b411c;
  text-shadow: none;
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(248, 236, 209, 0.92) 0%, rgba(231, 210, 170, 0.85) 100%);
  border: 1px solid rgba(91, 65, 28, 0.35);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.4px;
}

.world-overlay-legend-title {
  margin: 0;
  color: #5b411c;
  font-family: 'Cinzel', serif;
  text-shadow: none;
}

.world-legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.world-legend-list-secondary {
  margin-top: 12px;
}

.world-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 230, 180, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.world-legend-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5b411c;
  font-size: 0.95rem;
  font-family: 'Cinzel', serif;
}

.world-legend-item input[type="checkbox"] {
  accent-color: #3cbf5f;
}

input[data-layer-color] {
  width: 44px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(91, 65, 28, 0.7);
  background: #472e25;
  padding: 0;
  cursor: pointer;
}

input[data-layer-color]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

input[data-layer-color]::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.world-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #5b411c;
  font-size: 0.95rem;
  font-family: 'Cinzel', serif;
}

.world-overlay-section .world-filter-option:not(:first-of-type) {
  margin-top: 10px;
}

.world-filter-option input[type="checkbox"] {
  accent-color: #3cbf5f;
}

.world-filter-score {
  justify-content: space-between;
}

.world-filter-score label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.world-filter-score input[type="number"] {
  width: 110px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(91, 65, 28, 0.7);
  background: rgba(248, 236, 209, 0.4);
  color: #5b411c;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
}

.world-legend-separator {
  border: none;
  border-top: 1px solid rgba(255, 230, 180, 0.22);
  margin: 12px 0;
}

.world-legend-city-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.world-filter-range {
  justify-content: flex-start;
  gap: 12px;
}

.world-filter-range-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.world-filter-range-label {
  min-width: 96px;
}

.world-filter-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.world-filter-range-inputs input[type="number"] {
  width: 70px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(91, 65, 28, 0.7);
  background: rgba(248, 236, 209, 0.4);
  color: #5b411c;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
}

#world-filter-score-value {
  color: #5b411c;
  font-weight: 600;
}

.world-legend-reset {
  align-self: flex-end;
  margin-top: 8px;
  padding: 6px 18px;
  font-size: 0.9rem;
  font-family: 'Cinzel', serif;
  background: linear-gradient(180deg, #5bb53d 0%, #2f7223 100%);
  border: 1px solid #1b4d14;
  color: #f2ffdf;
  text-transform: none;
}

.world-legend-reset:hover {
  background: linear-gradient(180deg, #6bd04b 0%, #2b6720 100%);
}

.world-overlay-legend.collapsed {
  display: none;
}

/*────────────────────────────────────────────────────────────────
  2) BANDEAU SUPÉRIEUR “Select Building† / “Détails†
────────────────────────────────────────────────────────────────*/
.interface-banner.building-list-banner,
.interface-banner.building-details-banner,
.interface-banner.quest-list-banner,
#panel-alliance .interface-banner {
  position: sticky;
  top: 0;
  z-index: 2;
  background: none;
  /* Move background to ::before to allow layering */
  transform: translateX(0px);
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 473px;
  max-width: 96%;
  margin: 4px auto;
}

/* Main Banner Background */
.interface-banner.building-list-banner::before,
.interface-banner.building-details-banner::before,
.interface-banner.quest-list-banner::before,
#panel-alliance .interface-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(img/BannerTitreInterface.png) no-repeat center center;
  background-size: cover;
  z-index: 0;
  /* Behind content, in front of decorations */
}

/* Banner Decorations (Behind Background) */
.interface-banner.building-list-banner::after,
.interface-banner.building-details-banner::after,
.interface-banner.quest-list-banner::after,
#panel-alliance .interface-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  right: -10px;
  bottom: 0px;
  background-image: url('img/UI/bgr_detailinfo_tl.png'), url('img/UI/bgr_detailinfo_tr.png');
  background-position: top left, top right;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  pointer-events: none;
  z-index: -1;
  /* Behind ::before background */
}

.interface-banner {
  position: relative;
  flex: 0 0 auto;
  /* prend juste la hauteur du bandeau */
  background: url('img/BannerTitreInterface.png') no-repeat center center;
  background-size: cover;
  transform: translateX(-4px);
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 473px;
  max-width: 96%;
  margin: 4px auto;
}

/* Texte centré dans le bandeau (par exemple “Sélectionner un bâtiment”) */
.interface-banner .banner-text {
  font-family: Arial, sans-serif;
  font-size: 1.1em;
  color: #F5E8C5;
  /* couleur claire, à ajuster si besoin */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  z-index: 1;
}

#panel-quete .banner-text,
#panel-reports .banner-text,
#panel-research .banner-text,
#panel-mail .banner-text {
  position: absolute;
  left: 12px;
  top: 11px;
  color: #f5e8c5;
  font-weight: bold;
}

/* Bouton “×” pour fermer le panneau */
.interface-banner .banner-close {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 1.4em;
  color: #F5E8C5;
  cursor: pointer;
  z-index: 2;
}

.interface-banner .banner-close:hover {
  color: #ffffff;
}

/*────────────────────────────────────────────────────────────────
  5) ÉCRAN DE DÉTAIL : plein écran sous le bandeau “Détails”
────────────────────────────────────────────────────────────────*/
.building-detail-view {
  flex: 1 1 auto;
  /* prend tout l’espace sous le bandeau */
  overflow-y: auto;
  padding: 12px;
  background: transparent;
  display: flex;
  flex-direction: column;
}

/* L’aperçu “large” du bâtiment */
.building-detail-view .building-thumb-large {
  width: 128px;
  /* ajustez selon vos icônes “grandes” */
  height: 128px;
  object-fit: contain;
  margin: 0 auto 12px;
}

/* Texte de description sous l’image */
.building-detail-view .building-description {
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: #3d2e1f;
}

/* Bannière “Détails” intermédiaire (fond BannerDetails.png) */
.details-banner {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 40px;
  background: url('img/BannerDetails.png') no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F5E8C5;
  font-size: 1.1rem;
  margin: 16px 0 8px 0;
}

/* Plain banner without image background */
.details-banner-plain {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 40px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: left;
  color: #5b411c;
  font-size: 1rem;
  font-weight: bold;
  margin: 16px 0 8px 0;
}

/* Texte des bonus ou détails sous la bannière */
.building-detail-view .building-detail-text {
  font-size: 0.85rem;
  color: #3d2e1f;
  line-height: 1.2em;
}

/* Boutons “Retour” et “Construire” */
.building-detail-view .detail-buttons {
  margin: 4px 0;
  /* pousse les boutons en bas */
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.building-detail-view .detail-buttons button {
  flex: 1 1 40%;
  padding: 8px;
  font-size: 0.9rem;
  background-color: #435d18;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.building-detail-view .detail-buttons button:hover {
  background-color: #594725;
}

button.disabled,
button:disabled {
  opacity: 0.5 !important;
  background: #888 !important;
  cursor: not-allowed !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   1) On réutilise la “building-card” existante (fond CadreBR.png + bannière du nom),
      mais en version “détaillée” on veut un peu plus grand et aligné à gauche
   ─────────────────────────────────────────────────────────────────────────── */
.building-card.detail-icon {
  position: relative;
  width: 144px;
  /*  plus large que la version 128px de la liste  */
  height: 160px;
  /*  plus haut que la version 144px de la liste  */
  background: url('img/CadreBR.png') no-repeat center center;
  background-size: contain;
  margin-right: 16px;
  /* petit écart entre l’icône et le texte */
  flex: none;
  /* pour qu’il garde sa taille, même en flex */
}

/* On repositionne la bannière pour qu’elle repose bien en haut du cadre */
.building-card.detail-icon .building-banner {
  width: 128px;
  /* légèrement plus étroit pour rentrer dans le cadre */
  height: 29px;
  /* même hauteur que votre NameBanner.png */
  top: -2px;
  /* remonte légèrement au-dessus du cadre si besoin */
  left: 50%;
  transform: translateX(-50%);
}

/* Agrandir la miniature pour la vue détaillée */
.building-card.detail-icon .building-thumb {
  position: relative;
  width: 124px;
  height: 124px;
  object-fit: contain;
  z-index: 1;
  top: 1px;
  border-radius: 50%;
  /* rend l’image circulaire */
  overflow: hidden;
  /* cache tout ce qui dépasse du cercle */
  object-fit: cover;
}

/* ───────────────────────────────────────────────────────────────────────────
   2) Créer un conteneur flex pour aligner icône (gauche) + texte (droite) 
   ─────────────────────────────────────────────────────────────────────────── */
.details-fixed {
  /* occupe tout l’espace sous la bannière principale jusqu’à la bannière Détails */
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
}

/* Bannière “Détails” : on veut qu’elle garde toujours la même hauteur et le même visuel */

.detail-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* icône en haut, texte aligné en haut */
  margin-top: 12px;
}

/* ───────────────────────────────────────────────────────────────────────────
   3) Colonne de texte à droite de l’icône : on donne un max-width pour éviter débordement 
   ─────────────────────────────────────────────────────────────────────────── */
.detail-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* (Vous pouvez ajuster l’espacement entre les paragraphes, etc.) */
.detail-text .building-description {
  margin-bottom: 12px;
}

.detail-text .building-detail-text {
  margin-bottom: 16px;
}

.region-description {
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: #3d2e1f;
}

.region-building-description {
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: #3d2e1f;
}

/* Additional info block for boss/dungeon overlay */
.region-extra-info {
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: #3d2e1f;
}

.region-extra-info--cols {
  display: flex;
}

.region-extra-info--cols .extra-col {
  flex: 1;
}

.region-extra-info p {
  margin: 4px 0;
}

.region-travel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  margin: 8px 0;
  background: #f8efda1b;
  border-radius: 7px;
  font-size: 15px;
  color: #5b411c;
  text-align: center;
}

.region-travel-row .travel-col {
  flex: 1 1 33%;
}

/* Scrollable list for travel details, modeled on detail-scroll */
.region-travel-scroll {
  padding: 7px 8px 10px 13px;
  margin-bottom: 7px;
  background: #f8efda1b;
  border-radius: 7px;
  font-size: 15px;
  color: #5b411c;
  min-height: 36px;
  box-sizing: border-box;
}

.region-travel-scroll p,
.region-travel-scroll ul {
  margin: 0 0 8px 0;
  line-height: 1.3em;
  color: #3d2e1f;
}

/* Requirements list for colonization overlay */
.colonize-requirements {
  list-style: disc;
  margin: 0 0 8px 20px;
  color: #5b411c;
}

.colonize-requirements li {
  margin: 4px 0;
}

.colonize-requirements li::marker {
  font-size: 1.2em;
  font-weight: bold;
}

.player-name-ellipsis {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*────────────────────────────────────────────────────────────────━━━━━━━━━
  1) Conteneur principal de la section “Détails” (juste sous la bannière)
     → ce qui est fixe (coûts, production, boutons)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━────────────────────────────────────*/
.detail-main {
  padding: 12px;
  box-sizing: border-box;
}

/*────────────────────────────────────────────────────────────────━━━━━━━━━
  2) Conteneur “scrollable” pour afficher les informations détaillées
     → on fixe une hauteur max, et on active le scroll vertical
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━────────────────────────────────────*/
.detail-scroll {
  padding: 7px 8px 10px 13px;
  margin-bottom: 7px;
  background: #f8efda1b;
  border-radius: 7px;
  font-size: 15px;
  color: #5b411c;
  min-height: 36px;
  box-sizing: border-box;
}

/* Texte à l’intérieur de detail-scroll */
.detail-scroll p,
.detail-scroll ul {
  margin: 0 0 8px 0;
  line-height: 1.3em;
  color: #3d2e1f;
}

.bonus-header {
  font-size: 19px;
}

.bonus-item {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.detail-scroll b {
  color: #5b411c;
}

/* Si vous souhaitez que les boutons se retrouvent juste sous les coûts, 
   vous les laissez en dehors de detail-scroll. */
.detail-buttons {
  display: flex;
  justify-content: center;
  gap: 66px;
  /* espace entre les deux boutons */
  margin: 0px 0 0 0;
  /* espace en haut, aucun en bas ou côtés */
  padding: 0;
}

.detail-buttons button {
  min-width: 142px;
  /* largeur mini, ajuste à ta convenance */
  max-width: 160px;
  width: auto;
  /* largeur selon contenu */
  padding: 7px 0 7px 0;
  font-size: 1.08em;
  font-weight: bold;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  text-shadow: 0 1px 0 #35540b, 0 0 3px #fff8;
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  transition: box-shadow 0.12s, background 0.11s, transform 0.1s;
  cursor: pointer;
  outline: none;
  display: block;
  margin: 0;
}

.detail-buttons button:last-child {
  margin-right: 0;
}

.detail-buttons button:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.detail-buttons button:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

/* Action buttons displayed inside the region detail overlay */
.region-detail-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 0;
}

.region-detail-buttons button {
  width: 83%;
  margin: 0 auto;
  padding: 8px 42px 7px 42px;
  font-size: 1.08em;
  font-weight: bold;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  text-shadow: 0 1px 0 #35540b, 0 0 3px #fff8;
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  transition: box-shadow 0.12s, background 0.11s, transform 0.1s;
  cursor: pointer;
  outline: none;
  display: block;
  margin: 0;
}

.region-detail-buttons button:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.region-detail-buttons button:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

/*──────────────────────────────────────────────────────────────────────────
  Lignes “icône + montant” pour Bois / Pierre
──────────────────────────────────────────────────────────────────────────*/
#resources {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  /* Pour aligner en haut */
  padding: 10px 12px 0 12px;
  border-radius: 8px 8px 0 0;
  min-height: 58px;
  /* ajuste selon la taille des icônes */
}

.resource-requirements {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  margin-bottom: 8px;
}

.resource-requirements.palace-resource-sufficient .overlay-resource-amount {
  color: #2f7a34;
}

.resource-requirements.palace-resource-insufficient .overlay-resource-amount {
  color: #c0392b;
}

.resource-requirements.palace-resource-insufficient .overlay-resource-amount.resource-insufficient {
  color: #fb1300 !important;
}

.resource-block {
  display: flex;
  align-items: flex-start;
  min-width: 110px;
  margin-top: -7px;
}

.resource-line {
  display: flex;
  align-items: center;
  margin: 0 8px;
}

.resource-icon {
  width: 22px;
  height: 22px;
  margin-right: 5px;
  vertical-align: middle;
}

.research-small-icon {
  width: 24px;
  height: 24px;
  margin-right: 2px;
  vertical-align: middle;
}

.icon {
  width: 34px;
  height: 34px;
  margin-top: 2px;
  margin-left: 18px;
  user-select: none;
  -webkit-user-drag: none;
}

.resource-infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 3px;
  margin-top: 0px;
}



/* Amount displayed in the top HUD bar */
#resources .resource-amount {
  font-size: 14px;
  font-weight: bold;
  color: #3fb040;
  text-shadow: 0 1px 2px #0006, 0 0 2px #b37b14;
  line-height: 1.1;
}

/* Amount used inside overlay panels */
.overlay-resource-amount {
  font-size: 16px;
  font-weight: bold;
  color: #3d2e1f;
  line-height: 1.1;
  padding-right: 2%;
}

/* Color when the player lacks enough resources */
.resource-insufficient {
  color: #fb1300 !important;
}

.resource-prod {
  font-size: 13px;
  color: #a89e6f;
  margin-top: 7px;
  line-height: 1.1;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes tutorial-percent-blink {

  0%,
  100% {
    color: #ff0000;
    opacity: 1;
    text-shadow: 0 0 6px rgba(245, 196, 0, 0.7);
  }

  50% {
    color: #33ff00;
    opacity: 0.35;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.95);
  }
}

button.blink,
.resource-prod.blink,
.resource-amount.blink,
.mana-group.blink,
.mana-icon-small.blink {
  animation: blink 1s linear infinite;
}

.percent-value.tutorial-blink {
  animation: tutorial-percent-blink 1s ease-in-out infinite;
  font-weight: 700;
}

/*──────────────────────────────────────────────────────────────────────────
  Temps de construction
──────────────────────────────────────────────────────────────────────────*/
.build-time {
  font-size: 0.9rem;
  margin-bottom: 10px;
  color: #3d2e1f;
}

.palace-faith-line {
  font-size: 0.9rem;
  color: #3d2e1f;
  margin: 4px 0 12px;
  line-height: 1.35;
}

.palace-faith-label {
  font-weight: 600;
  margin-right: 6px;
}

/* Ligne affichant la vitesse de recrutement totale */
.recruit-speed-line {
  font-size: 16px;
  margin-bottom: 16px;
  color: #3d2e1f;
  text-align: center;
  display: block;
  width: 100%;
}

.recruit-speed-line.barracks-lines {
  text-align: left;
}

/* Only align columns inside the details overlay */
.detail-scroll .percent-value {
  display: inline-block;
  width: 84px;
  /* align plus sign vertically */
  text-align: left;
  /* align numbers after + */
}

/* For values followed by resource names in warehouse details */
.detail-scroll .storage-value {
  display: inline;
  width: auto;
}

/*──────────────────────────────────────────────────────────────────────────
  Production par heure (centrée)
──────────────────────────────────────────────────────────────────────────*/
.production-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

/* Layout for dungeon descriptions */
.dungeon-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}

.sanctuary-next-illumination {
  text-align: center;
  margin: 8px 0 12px;
  font-weight: 600;
}

.sanctuary-next-illumination .sanctuary-countdown {
  font-weight: 700;
}

.dungeon-forces {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}

.dungeon-forces img {
  width: 52px;
  height: 52px;
  border-radius: 3px;
  border: solid 2px #dac090;
  background: #fffbe5;
  box-shadow: 0 1px 3px #baa96949;
  object-fit: cover;
}

/* Spécifique à l'entrepôt : affichage vertical des valeurs de stockage */
.warehouse-storage {
  flex-direction: column;
  align-items: flex-start;
  margin-left: 20px;
}

/* Specific to the town hall: align storage like other overlays */
.townhall-storage {
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
}

.townhall-storage .bonus-item {
  margin: 2px 0;
  width: 100%;
}

.townhall-storage div {
  display: flex;
  align-items: center;
  margin: 2px 0;
}

.townhall-storage div img {
  margin-right: 5px;
}

.production-centered.townhall-storage .percent-value {
  display: inline-block;
  width: 84px;
  text-align: right;
}

.warehouse-storage .bonus-item {
  margin: 2px 0;
  width: 100%;
}

.warehouse-storage div {
  display: flex;
  align-items: center;
  margin: 2px 0;
}

.warehouse-storage div img {
  margin-right: 5px;
}

.production-centered.warehouse-storage .percent-value {
  display: inline-block;
  width: 84px;
  text-align: right;
}

/* Align cottage overlay bonus lines */
.production-centered.warehouse-storage .bonus-item-with-icon {
  align-items: center;
}

.production-centered.warehouse-storage .bonus-item-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.production-centered.warehouse-storage .bonus-item-with-icon .percent-value {
  width: auto;
  text-align: left;
}

.production-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* Icon for bonus sections where label, icon and text are inline */
.production-icon-inline {
  width: 22px;
  height: 22px;
  margin-right: 5px;
  vertical-align: middle;
}

/* Keep label, icon and value grouped together */
.bonus-item.inline {
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

/* Value container for inline production rows */
.production-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 84px;
  gap: 4px;
}

.production-text {
  font-size: 1rem;
  font-weight: bold;
  color: #3d2e1f;
}

/*------------------------------------------------------------------------------*/
/* 2) Conteneur principal de la barre de progression (en bas de la cellule)     */
/*------------------------------------------------------------------------------*/
.cell .construction-progress,
.cell .demolition-progress {
  bottom: unset;
  /* enlève le bottom */
  top: 65px;
  left: 4px;
  right: 4px;
  background: #e7d2a8;
  border: 2px solid #7d6a4a;
  box-shadow: 0 1px 2px #fff9 inset, 0 0px 3px #0002;
  height: 19px;
  min-width: 125px;
  max-width: 280px;
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 100;

}

/*------------------------------------------------------------------------------*/
/* 3) Partie “remplissage” de la barre : sa largeur varie de 0% à 100%         */
/*------------------------------------------------------------------------------*/
.cell .construction-progress .progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(90deg, #dab248 0%, #e6c676 60%, #be9540 100%);
  z-index: 1;
  /* Reduce transition and hint rendering for frequent updates */
  transition: width 0.05s;
  will-change: width;
  box-shadow: 0 1px 1px #fff5 inset;

}

.cell .demolition-progress .progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff5e5e, #ff0000);
  z-index: 1;
  transition: width 0.05s;
  will-change: width;
  box-shadow: 0 1px 1px #fff5 inset;
}

/*------------------------------------------------------------------------------*/
/* 4) Texte affichant le temps restant, centré dans la barre                     */
/*------------------------------------------------------------------------------*/
.cell .construction-progress .progress-text,
.cell .demolition-progress .progress-text {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  font-size: 15px;
  line-height: 19px;
  font-weight: bold;
  color: #fffbe0;
  text-shadow: 1px 1px 3px #7d6a4a, 0 1px 1px #be9540;
  pointer-events: none;
  user-select: none;
  letter-spacing: 1px;
}

/* 2) Classe pour positionner la grue exactement au-dessus de la tuile */
.crane-icon {
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  /* couvre toute la tuile */
  height: 110%;
  /* couvre toute la tuile */
  object-fit: contain;
  z-index: 10;
  /* au-dessus de la barre de progression et des autres éléments */
  pointer-events: none;
}

.demolition-icon {
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 110%;
  object-fit: contain;
  z-index: 10;
  pointer-events: none;
}

/* Badge indiquant le niveau du bâtiment */
.level-badge {
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('img/UI/building_level_display_bgr.png') no-repeat center center;
  background-size: 100% 100%;
  color: #ecbb6c;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  pointer-events: none;
}


/*─────────────────────────────────────────────────────────────────*/
/* 3) CONTENEUR COMMUN POUR LES SECTIONS : empiler verticalement  */
/*─────────────────────────────────────────────────────────────────*/
.queue-container {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.palace-illumination {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 4px 0 14px;
  --palace-illumination-glow: #fee487;
}

.palace-illumination-header {
  width: 100%;
  max-width: 456px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f5e8c5;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  margin: 0 auto;
}

.palace-illumination-title {
  font-size: 1.05rem;
  line-height: 1.2;
}

.palace-illumination-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  font-size: 0.9rem;
  color: var(--palace-illumination-glow, #fee487);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.palace-illumination-header .palace-illumination-status-text {
  color: var(--palace-illumination-glow, #fee487);
  font-size: 0.9rem;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.4),
    0 0 6px rgba(255, 255, 255, 0.75),
    0 0 14px var(--palace-illumination-glow, #fee487),
    0 0 28px var(--palace-illumination-glow, #fee487);
}

.palace-illumination-status-icon {
  width: 26px;
  height: 33px;
  filter:
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 10px var(--palace-illumination-glow, #fee487));
}

.palace-illumination.palace-illumination-inactive {
  --palace-illumination-glow: transparent;
}

.palace-illumination.palace-illumination-inactive .palace-illumination-status,
.palace-illumination.palace-illumination-inactive .palace-illumination-status-text {
  color: #d0c9b8;
}

.palace-illumination.palace-illumination-inactive .palace-illumination-status-text {
  text-shadow: none;
}

.palace-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 456px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  min-height: 212px;
  margin-bottom: 20px;
  padding-top: 8px;
}

.palace-banner .speed-banner-bg {
  top: -12px;
  height: 100%;
  min-height: 212px;
  width: 100%;
  max-width: 456px;
  left: 50%;
  transform: translateX(-50%);
  object-position: center top;
}

.palace-banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0px 11px 5px;
  color: #633c15;
  font-size: 0.97rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.65);
}

.palace-banner-content p {
  margin: 0;
  padding: 0px 11px 5px;
}

.palace-faith-text span,
.palace-damage-text span {
  font-weight: 700;
}

.palace-resources {
  width: 100%;
}

.palace-resources-title {
  font-size: 1rem;
  font-weight: 600;
  color: #6b2d1e;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  padding: 0px 11px 5px;
}

.palace-resource-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px 11px 5px;
}

.palace-resource {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #633c15;
  font-weight: 700;
  font-size: 0.95rem;
}

.palace-resource img {
  width: 37px;
  height: 37px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
}

.palace-illumination-description {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #633c15;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  padding: 0px 11px 5px;
}

.palace-illumination-stats {
  width: 100%;
  padding: 0 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.palace-illumination-icon {
  width: 37px;
  height: 37px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.palace-illumination-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.9fr));
  gap: 10px 18px;
  align-items: center;
  padding: 6px 0;
}

.palace-illumination-grid-label {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #3c1f0e;
}

.palace-illumination-grid-label--header {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

.palace-illumination-grid-icon {
  display: flex;
  align-items: center;
  justify-content: left;
}

.palace-illumination-grid-value {
  font-weight: 700;
  font-size: 1rem;
  color: #633c15;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

#building-queue {
  margin-bottom: 7px;
}

#attack-queue {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 7px;
}

#attack-queue.hidden {
  display: none;
}

.queue-banner.attack-banner {
  background: url('img/bgr_subheader_citinfo_attack.png') no-repeat center center;
  background-size: cover;
}

/* Force text color for attack banner if needed, or inherit from queue-banner */
.attack-banner span {
  color: #F5E8C5;
  /* Or maybe specific color from design? Defaulting to existing style */
}

/* Attack Queue Item specific styles */
.attack-queue-item {
  position: relative;
  width: 94%;
  /* Same width as building queue items usually ~400-475px depending on parent. 
     Building queue item uses auto margins often. Let's check parent.
     .queue-item in building queue is often just a div. 
     Reference 'bgr_commandqueue_item.png' implies a specific look.
  */
  min-height: 80px;
  margin: 0 auto 6px auto;
  background: url('img/bgr_commandqueue_item.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #3d2e1f;
  /* Dark brown text usually */
}

.attack-item-header {
  font-weight: bold;
  font-size: 1.1em;
  color: #235797;
  /* Blueish title based on image 'Unknown attack' */
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.attack-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95em;
  margin-bottom: 2px;
}

.attack-item-label {
  color: #2b2b2b;
}

.attack-item-value {
  color: #235797;
  /* Matches title color roughly or standard text */
  font-weight: 600;
}


/*─────────────────────────────────────────────────────────────────*/
/* 4) STYLE COMMUN DES BANNIÈRES (toutes les sections)            */
/*─────────────────────────────────────────────────────────────────*/
.queue-banner {
  background: url('img/BannerInterface.png') no-repeat center center;
  background-size: 95%;
  bottom: -3px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  padding-right: 12px;
  position: relative;
  padding-left: 22px;
  z-index: 1;
}

.queue-banner span {
  color: #F5E8C5;
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.queue-building-cap {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fee487;
  font-weight: bold;
  gap: 7px;
  margin-left: auto;
  /* force l’alignement à droite */
  margin-right: 4px;
}

.queue-building-icon {
  width: 28px;
  /* ajuste à la taille voulue */
  height: 25px;
  margin-left: 5px;
  filter: drop-shadow(1px 2px 0 #775a2a88);
  pointer-events: none;
  user-select: none;
}

.icon-building {
  width: 28px;
  height: 21px;
  margin-right: 3px;
  margin-left: 1px;
}

.icon-recruit {
  width: 30px;
  height: 23px;
  margin-right: 6px;
  margin-bottom: -5px;
}

.icon-command {
  width: 20px;
  height: 24px;
  margin-right: 10px;
  margin-bottom: -5px;
}


/*─────────────────────────────────────────────────────────────────*/
/* 6) SECTION 2 : FILE D’ATTENTE DE RECRUTEMENT                    */
/*─────────────────────────────────────────────────────────────────*/
#building-queue .queue-speed {
  width: 94%;
  min-height: 37px;
  /* ajuste selon la hauteur de ton image ! */
  margin: 0 auto 6px auto;
  bottom: 2px;
  /* rapproche le fond de la bannière */
  padding-left: 109px;
  /* ajuste pour centrer le texte sur ton fond */
  padding-top: 0px;
  font-size: smaller;
  font-weight: bold;
  color: #675d41;
  text-align: center;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  background: url('img/banner vitesse de construction.webp') center/100% 100% no-repeat;
  /* adapte le chemin si besoin (mets le bon nom d’image) */
  box-sizing: border-box;
  box-shadow: 0 1.5px 2.5px #af9e7926;
}

#building-queue .queue-items {
  display: flex;
  flex-wrap: wrap;
}

#building-queue .queue-empty {
  font-style: italic;
  color: #3d2e1f;
  text-align: center;
  padding: 12px 0;
  width: 100%;
}

#building-queue .construction-ad {
  position: relative;
  width: 407px;
  height: 94px;
  margin: 0 auto 6px auto;
  background: url('img/UI/bgr_minister_recruiting_merchandise.png') center/100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px 10px;
  box-sizing: border-box;
}

.construction-ad .minister-icon {
  position: absolute;
  top: 3px;
  left: 4px;
  width: auto;
  height: auto;
}

.construction-ad-text {
  font-weight: bold;
  color: #2d2308;
  width: 92%;
  margin-left: 8%;
  margin-bottom: 3%;
}

.construction-ad-link {
  align-self: flex-end;
  margin-right: 11px;
  color: #3a5771;
  font-weight: bold;
  cursor: pointer;
}

/* Liste des améliorations dans les overlays */
.upgrade-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.upgrade-queue .queue-item {
  width: 398px;
  /* or slightly less to fit within 94% overlay width */
}

#recruitment-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#recruitment-queue .queue-speed {
  font-size: 1rem;
  color: #3d2e1f;
  text-align: center;
}

#recruitment-queue .queue-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -6px;
}

#recruitment-queue .queue-empty {
  font-style: italic;
  color: #3d2e1f;
  text-align: center;
  padding: 12px 0;
  width: 100%;
}

#recruitment-queue .queue-item-troop {
  display: flex;
  align-items: center;
  background: url('img/bgr_unitqueuelarge_item.png') center/100% 100% no-repeat;
  width: 95%;
  min-height: 94px;
  margin: 0 auto 6px auto;
  padding: 0 10px;
  box-sizing: border-box;
}

#recruitment-queue .troop-left {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 8px 8px 2px;
}

#recruitment-queue .troop-left-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

#recruitment-queue .troop-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6px 3px;
  width: 104px;
  gap: 51px;
  box-sizing: border-box;
  position: relative;
  right: 69px;
}

#recruitment-queue .troop-name {
  font-weight: bold;
  color: #3d2e1f;
  margin-right: 8px;
}

#recruitment-queue .troop-progress {
  position: relative;
  width: 100%;
  height: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

#recruitment-queue .troop-progress .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(30, 144, 255, 0.6);
  width: 0%;
  transition: width 0.4s linear;
}

#recruitment-queue .troop-progress .progress-text {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  z-index: 1;
  user-select: none;
}

#recruitment-queue .troop-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  margin-left: auto;
}

#recruitment-queue .troop-right .unit-finish-time,
#recruitment-queue .troop-right .group-finish-time {
  font-size: 0.72rem;
  color: #2d2308;
  line-height: 1.1;
  margin: 2px 5px 0 0;
  position: relative;
}

#recruitment-queue .troop-right .group-finish-time {
  bottom: 3px;
  /* remonte de 3px */
}

#recruitment-queue .troop-finish-time {
  font-size: 0.85rem;
  font-weight: bold;
  color: #3d2e1f;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* Banner vitesse de recrutement (même base que construction) */
.speed-banner {
  position: relative;
  width: 456px;
  height: 97px;
  margin: 0 auto 6px auto;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.speed-banner.palace-banner {
  height: auto;
  min-height: 228px;
  padding-bottom: 18px;
  align-items: stretch;
  justify-content: flex-start;
}

.speed-banner.palace-banner .speed-banner-bg {
  height: calc(100% + 24px);
}

.speed-banner.palace-banner .palace-banner-content {
  align-items: flex-start;
}

/* Bandeau vitesse de défense (même style que .speed-banner
   mais hauteur ajustée pour panel-defense.webp) */
#defense-speed-banner {
  position: relative;
  width: 456px;
  height: 97px;
  flex-direction: column;
  margin: 0 auto 6px auto;
  background: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  z-index: 0;
}

.speed-banner-bg {
  position: absolute;
  left: 12px;
  bottom: 13px;
  width: 93%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.speed-banner-bg-def {
  position: absolute;
  left: 12px;
  top: -11px;
  width: 93%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.speed-banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  top: 4px;
  padding: 0 0px;
  height: 100%;
}

.defense-speed-banner-content {
  position: relative;
  flex-direction: column;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  color: #2d2308;
  padding: 6px 0;
  margin-top: 20px;
  height: 420px;
}

.defense-speed-banner-content .recruit-building {
  margin-bottom: -15px;
}

.recruit-building {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 54px;
  /* ajuste à la taille que tu veux pour chaque slot */
  gap: 1px;
}

.recruit-building img {
  width: 52px;
  height: 52px;
  margin-bottom: 2px;
  /* Ajuste le centrage vertical */
  margin-top: -29px;
  /* Permet de remonter si besoin */
  filter: drop-shadow(0 0 3px #433a12a2);
}

.speed-value {
  font-size: 13.3px;
  color: #633c15;
  font-weight: bold;
  text-shadow: 0 1px 1px #4b4b4b, 0 0px 6px #ffe;
}

/*─────────────────────────────────────────────────────────────────*/
/* 7) SECTION 3 : RÉCAPITULATIF DES COMMANDES                     */
/*─────────────────────────────────────────────────────────────────*/
#command-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#command-summary .queue-speed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  min-height: 37px;
  margin: 0 auto 2px auto;
  padding-top: 0;
  padding-left: 5px;
  padding-right: 5px;
  font-size: smaller;
  font-weight: bold;
  color: #675d41;
  text-align: center;
  letter-spacing: 0.5px;
  bottom: 11px;
  position: relative;
  z-index: 0;
  background: url('img/banner vitesse de construction.webp') center / 100% 100% no-repeat;
  box-sizing: border-box;
  box-shadow: 0 1.5px 2.5px #af9e7926;
}

#command-summary .queue-items-commands {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#command-summary .queue-empty {
  font-style: italic;
  color: #3d2e1f;
  text-align: center;
  padding: 12px 0;
}

#command-summary .command-item {
  /* Inherit default command item styling */
}

#command-summary .command-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  pointer-events: none;
}

#command-summary .command-item-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

#command-summary .cmd-title {
  font-weight: bold;
  color: #235797;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#command-summary .command-item img.cmd-repeat-icon {
  width: 30px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

#command-summary .cmd-sub {
  font-size: 0.85rem;
  color: #3d2e1f;
}

.command-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: url('img/bgr_commandqueue_item.png') center/100% 100% no-repeat;
  width: 95%;
  min-height: 94px;
  margin: 0 auto 6px auto;
  padding: 6px 10px;
  box-sizing: border-box;
}

.command-item .cmd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #3d2e1f;
  margin-top: 4px;
  margin-bottom: 2px;
}

.command-item .cmd-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
  margin-top: 9px;
  color: #675d41;
  margin-left: 2px;
}

.command-item .cmd-info:first-of-type {
  margin-bottom: 2px;
}

.command-item .cmd-label {
  min-width: 110px;
  font-weight: 600;
}

.command-item .cmd-value {
  display: inline-flex;
  align-items: center;
}

.command-item .cmd-info.cmd-player-info,
.command-item .cmd-info.cmd-alliance-info {
  margin-top: 6px;
}

.command-item .cmd-player-alliance-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  column-gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.command-item .cmd-player-alliance-row .cmd-label {
  min-width: 72px;
}

.command-item .cmd-info.cmd-city-info {
  gap: 6px;
}

.command-item .cmd-info.cmd-city-info .cmd-label {
  min-width: 72px;
}

.command-item .cmd-player-alliance-row .cmd-alliance-label {
  text-align: center;
  justify-self: start;
}

.command-item .cmd-player-alliance-row .cmd-value {
  min-width: 0;
}

.command-item .cmd-player-alliance-row .cmd-alliance-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-item .cmd-info.cmd-player-info .cmd-value,
.command-item .cmd-info.cmd-alliance-info .cmd-value {
  max-width: 100%;
}

.command-item .cmd-player-name {
  color: #235797;
  font-weight: bold;
}

.command-item .cmd-player-name.cmd-player-link {
  cursor: pointer;
}

.command-item .cmd-player-name.cmd-player-link:focus-visible {
  outline: 2px solid #235797;
  outline-offset: 2px;
}

.command-item .cmd-dungeon-name {
  color: #235797;
  font-weight: bold;
}

.command-item .cmd-arrive-time {
  font-weight: bold;
}

.command-item .cmd-destination-link {
  cursor: pointer;
}

.command-item .cmd-ts {
  margin-right: 6px;
}

.command-item .cmd-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.command-item .cmd-close-btn,
.command-item .cmd-option-btn {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.9rem;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #fffebf;
  border: 2px solid #4f7219;
  border-radius: 4px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 2px 4px #072500, 0 2px 0 #35540b;
  cursor: pointer;
}

.command-item .cmd-option-btn {
  position: absolute;
  bottom: 14px;
  right: 12px;
  width: 72px;
}

.command-item .cmd-close-btn {
  font-weight: bold;
}

/* Support items styled similarly to command items */
.support-item {
  position: relative;
}

.support-item .support-item-details {
  margin-top: 4px;
  display: grid;
  gap: 6px;
  box-sizing: border-box;
}

.support-item .support-info-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 8px;
  padding-right: 112px;
  box-sizing: border-box;
}

.support-item .support-info-row--split {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  column-gap: 4px;
}

.support-item .support-info-label {
  color: #675d41;
  min-width: 72px;
}

.support-item .support-info-label--center {
  text-align: center;
  justify-self: start;
}

.support-item .support-info-value {
  color: #235797;
  font-weight: 600;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-item .support-info-value--center {
  text-align: center;
  justify-self: center;
}

.support-item .cmd-title {
  color: #235797;
}

/*─────────────────────────────────────────────────────────────────*/
/* 8) SECTION 4 : SOUTIEN PROVENANT D’AUTRES VILLES               */
/*─────────────────────────────────────────────────────────────────*/
#support-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#support-queue .queue-speed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  min-height: 37px;
  margin: 0 auto 6px auto;
  padding: 0 6px;
  font-size: smaller;
  font-weight: bold;
  color: #675d41;
  letter-spacing: 0.5px;
  position: relative;
  bottom: 12px;
  z-index: 0;
  background: url('img/banner vitesse de construction.webp') center /100% 100% no-repeat;
  box-sizing: border-box;
  box-shadow: 0 1.5px 2.5px #af9e7926;
}

#support-queue .support-items {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

#support-queue .queue-empty {
  font-style: italic;
  color: #3d2e1f;
  text-align: center;
  padding: 12px 0;
}

/*─────────────────────────────────────────────────────────────────*/
/* 9) SECTION 5 : RÉCAPITULATIF COMMERCE                          */
/*─────────────────────────────────────────────────────────────────*/
#trade-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#trade-summary .queue-trade-cap {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fee487;
  font-weight: bold;
  gap: 7px;
  margin-left: auto;
  margin-right: 4px;
}

#trade-summary .queue-trade-icon {
  width: 28px;
  height: 25px;
  margin-left: 5px;
  filter: drop-shadow(1px 2px 0 #775a2a88);
  pointer-events: none;
  user-select: none;
}

#trade-summary .trade-resources {
  display: flex;
  gap: 16px;
  padding: 0 8px;
  margin-top: -4px;
}

#trade-summary .trade-queue-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
  margin-top: -6px;
}

.trade-queue-item {
  display: flex;
  align-items: center;
  /* 3-part composite background: Top, Bottom, Scaler */
  background-image:
    url('img/bgr_tradeinfo_top.png'),
    url('img/bgr_tradeinfo_bottom.png'),
    url('img/bgr_tradeinfo_scaler.png');
  background-position:
    center top,
    center bottom,
    center center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-y;
  background-size:
    100% auto,
    100% auto,
    100% auto;

  width: 95%;
  max-width: 100%;
  min-height: 70px;
  margin: 0 auto 6px auto;
  padding: 10px 10px;
  box-sizing: border-box;
}

/* Minister of Commerce variant */
.minister-active .trade-queue-item,
.trade-queue-item.minister-active {
  background-image:
    url('img/bgr_tradeinfo_min_top.png'),
    url('img/bgr_tradeinfo_min_bottom.png'),
    url('img/bgr_tradeinfo_min_scaler.png');
}

.trade-queue-item .trade-type-icon {
  width: auto;
  height: 30px;
  margin-right: 8px;
}

.trade-queue-item .trade-res-cols {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 2px;
}

.trade-queue-item .trade-res-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.trade-queue-item .trade-res-row img {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.trade-queue-item .trade-arrival {
  /* Remove fixed width to allow content to fit on one line */
  min-width: 90px;
  white-space: nowrap;
  margin-right: 4px;
  text-align: right;
  font-weight: bold;
  color: #2d2308;
}

.trade-queue-item .trade-artifact-icon {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  pointer-events: none;
}

#trade-summary .res-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: #3d2e1f;
}

#trade-summary .res-info img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  pointer-events: none;
}

/*─────────────────────────────────────────────────────────────────*/
/* 10) SECTION 6 : DÉFENSE DE LA CITÉ                              */
/*─────────────────────────────────────────────────────────────────*/
#city-defense {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#city-defense .queue-empty {
  font-style: italic;
  color: #3d2e1f;
  text-align: center;
  padding: 12px 0;
}

#city-defense .units-section,
#city-defense .towers-section,
#city-defense .traps-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
}

#city-defense .units-section {
  top: 74px;
  left: 17px;
  width: 416px;
}

#city-defense .towers-section {
  top: 220px;
  left: 17px;
  width: 416px;
}

#city-defense .traps-section {
  top: 370px;
  left: 17px;
  width: 416px;
}

#city-defense .two-col-grid {
  display: flex;
  width: 100%;
}

.defense-icons-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#city-defense .label-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: bold;
  color: #3d2e1f;
}

#city-defense .rows-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  align-items: flex-start;
}

#city-defense .label-col>div:first-child {
  height: 46px;
}

#city-defense .rows-col .row {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: max-content;
  min-width: max-content;
  padding-bottom: 2px;
  margin: 0 auto;
}

#city-defense .rows-col .icons-row {
  margin-bottom: 6px;
  min-height: 46px;
  align-items: center;
}

#city-defense .rows-col::-webkit-scrollbar {
  display: none;
}

#city-defense .hide-scrollbar {
  scrollbar-width: none;
}

#city-defense .hide-scrollbar::-webkit-scrollbar {
  display: none;
}

#city-defense .row-item {
  width: 44px;
  text-align: center;
  color: #3d2e1f;
  flex-shrink: 0;
  position: relative;
}

#city-defense .row-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

.unit-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  padding: 1px 3px;
  font-size: 10px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}

/* Ajoute un cadre autour des icônes des unités pour harmoniser avec la
   fenêtre de recrutement */
#city-defense .unit-icons img {
  border-radius: 3px;
  border: solid 2px #dac090;
  background: #fffbe5;
  box-shadow: 0 1px 3px #baa96949;
}

#city-defense .tower-icons img,
#city-defense .trap-icons img {
  border-radius: 3px;
  border: solid 2px #dac090;
  background: #fffbe5;
  box-shadow: 0 1px 3px #baa96949;
}

#city-defense .units-section>div:first-child,
#city-defense .towers-section>div:first-child,
#city-defense .traps-section>div:first-child {
  text-align: left;
  width: 100%;
}

.building-list-bg,
.quest-list-bg,
.report-list-bg,
.research-bg {
  background-image:
    url('img/UI/bgr_mask_detailheader.png'),
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/msc_win_detail_vert_shdw.png'),
    url('img/UI/bgr_detailinfo_bl.png'),
    url('img/UI/bgr_detailinfo_br.png'),
    url('img/UI/bgr_detailinfo_b.png'),
    url('img/UI/bgr_detailinfo_l.png'),
    url('img/UI/bgr_detailinfo_r.png'),
    url('img/UI/input_navrose.png');
  background-position:
    center top,
    left top 29px,
    right top 29px,
    left bottom 29px,
    right bottom 29px,
    left bottom,
    right bottom,
    center bottom,
    left top 29px,
    right top 29px,
    center 26px;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x,
    repeat-y,
    repeat-y,
    no-repeat;
  background-size:
    calc(80% + 90px) auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    calc(80% + 90px) 94%;
  overflow: hidden;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 14px #0006;
  display: flex;
  flex-direction: column;
}

.building-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 8px;
  padding: 0 10px;
  margin-left: -13px;
  /* Shift scrollbar left */
}

/* Dedicated list class for Building Details */
.details-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 25px;
  margin-right: 13px;
  padding: 0px 5px 0 7px;
}

/* Quest List - Prevent overflow */
.quest-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 29px;
  padding: 0 10px;
  margin-left: -13px;
  margin-right: 11px;
}

/* Research List - Prevent overflow */
.research-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 29px;
  padding: 0 10px;
  margin-left: -13px;
  margin-right: 11px;
}



#panel-alliance .admin-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

#panel-alliance .admin-actions .admin-action {
  width: 100%;
  display: flex;
  justify-content: center;
}

#panel-alliance .admin-actions .tab-btn {
  margin: 0;
}

#panel-alliance .admin-actions .tab-btn.active {
  background: linear-gradient(180deg, #ffaf00 0%, #fb9f00 100%);
  color: #772a00;
}

#panel-alliance .alliance-manage-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f7f2ea;
  border: 1px solid #cbbba2;
  border-radius: 6px;
  margin: 0 16px 16px;
}

#panel-alliance .alliance-manage-section .manage-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 4px;
}

#panel-alliance .alliance-manage-section .manage-header .tab-btn {
  width: auto;
  padding: 6px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#panel-alliance .alliance-manage-section .manage-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#panel-alliance .alliance-manage-section label {
  font-weight: 600;
  color: #3d2e1f;
}

#panel-alliance .alliance-manage-section input[type="search"] {
  padding: 8px 10px;
  border: 1px solid #b3a28f;
  border-radius: 4px;
  background: #fff;
  color: #3d2e1f;
}

#panel-alliance .alliance-manage-section input[type="search"]:focus {
  outline: none;
  border-color: #8c775d;
  box-shadow: 0 0 0 2px #d7c9b5;
}

#panel-alliance .alliance-manage-section .alliance-invite-result {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed #b3a28f;
  border-radius: 4px;
  background: #fffdf8;
  color: #5b4833;
  display: flex;
  align-items: center;
}

#panel-alliance .alliance-manage-section .alliance-invite-result.empty {
  color: #8a7a65;
  border-style: dashed;
}

#panel-alliance .alliance-manage-section .alliance-invite-result.success {
  border-style: solid;
  border-color: #5c9d53;
  color: #2f6131;
  background: #f0fff0;
}

#panel-alliance .alliance-manage-section .alliance-invite-result.error {
  border-style: solid;
  border-color: #c96356;
  color: #7c2318;
  background: #fff5f4;
}

#panel-alliance .alliance-manage-section .manage-pending h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #3d2e1f;
}

#panel-alliance .alliance-manage-section .alliance-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #cbbba2;
  border-radius: 4px;
  background: #fffdf8;
  max-height: 200px;
  overflow-y: auto;
}

#panel-alliance .alliance-manage-section .alliance-pending-list li {
  padding: 10px 12px;
  border-bottom: 1px solid #e2d7c7;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#panel-alliance .alliance-manage-section .alliance-pending-list li:last-child {
  border-bottom: none;
}

#panel-alliance .alliance-manage-section .pending-player-name {
  font-weight: 600;
  color: #3d2e1f;
}

#panel-alliance .alliance-manage-section .pending-meta {
  font-size: 0.85rem;
  color: #6b5d4b;
}

#panel-alliance .alliance-edit-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px;
  margin: 0 16px 16px;
  background: rgba(26, 18, 8, 0.82);
  border: 1px solid #a48a62;
  border-radius: 8px;
  color: #f5e8c5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

#panel-alliance .alliance-edit-section .alliance-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  box-shadow: none;
  color: inherit;
}

#panel-alliance .alliance-edit-section .manage-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

#panel-alliance .alliance-edit-section .manage-header .tab-btn {
  width: auto;
  padding: 6px 18px;
}

#panel-alliance .alliance-edit-section .alliance-form-actions,
#panel-alliance .alliance-edit-section .alliance-description-actions,
#panel-alliance .alliance-edit-section .alliance-danger-zone {
  gap: 12px;
}

#panel-alliance .alliance-edit-section .alliance-form-actions .tab-btn,
#panel-alliance .alliance-edit-section .alliance-description-actions .tab-btn {
  width: auto;
  padding: 6px 18px;
  font-size: 0.95rem;
  background: #34591a;
  color: #f5e8c5;
  border: 1px solid #4d7429;
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
  white-space: nowrap;
}

#panel-alliance .alliance-edit-section .tab-btn.overlay-btn {
  position: static;
  margin: 0;
  padding-left: 18px;
  padding-right: 18px;
}

#panel-alliance .alliance-edit-section .tab-btn.overlay-btn::before,
#panel-alliance .alliance-edit-section .tab-btn.overlay-btn::after {
  display: none;
}

#panel-alliance .alliance-edit-section .alliance-form-actions .tab-btn.secondary {
  background: #284715;
  border-color: #3c6120;
}

#panel-alliance .alliance-edit-section .alliance-form-actions .tab-btn:disabled {
  background: #555a4c;
  border-color: #6a705f;
  color: #bbb9a8;
}

#panel-alliance .alliance-edit-section .alliance-form-actions .tab-btn:not(:disabled):hover,
#panel-alliance .alliance-edit-section .alliance-description-actions .tab-btn:hover {
  background: #3f6b22;
  border-color: #598333;
}

#panel-alliance .alliance-edit-section .alliance-form-actions .tab-btn:not(:disabled):active,
#panel-alliance .alliance-edit-section .alliance-description-actions .tab-btn:active {
  background: #2b4d16;
  border-color: #3f6420;
}

#panel-alliance .alliance-edit-section .alliance-description-actions {
  margin-top: 16px;
}

#panel-alliance .alliance-edit-section .alliance-description-actions .tab-btn {
  padding-inline: 20px;
}

#panel-alliance .alliance-edit-section .alliance-danger-zone .tab-btn {
  width: auto;
  padding: 6px 22px;
  font-size: 0.95rem;
  background: #7e2222;
  color: #fce7e7;
  border: 1px solid #a53a3a;
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
  white-space: nowrap;
}

#panel-alliance .alliance-edit-section .alliance-danger-zone .tab-btn:hover {
  background: #992c2c;
  border-color: #be4545;
}

#panel-alliance .alliance-edit-section .alliance-danger-zone .tab-btn:active {
  background: #681919;
  border-color: #8f2f2f;
}

#panel-alliance .alliance-properties-form .alliance-form-title,
#panel-alliance .alliance-description-form .alliance-form-title {
  text-align: left;
  margin-bottom: 10px;
}

#panel-alliance .alliance-description-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #d9cdb2;
}

#panel-alliance .alliance-description-toolbar .toolbar-label {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#panel-alliance .alliance-description-toolbar .toolbar-buttons {
  display: flex;
  gap: 6px;
}

#panel-alliance .alliance-description-toolbar .bbcode-btn {
  width: 34px;
  height: 30px;
  border: 1px solid #4d7429;
  border-radius: 4px;
  background: #34591a;
  color: #f5e8c5;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, border-color 0.15s ease;
}

#panel-alliance .alliance-description-toolbar .bbcode-btn:hover:not(:disabled) {
  background: #3f6b22;
  border-color: #598333;
}

#panel-alliance .alliance-description-toolbar .bbcode-btn:active:not(:disabled) {
  background: #2b4d16;
  border-color: #3f6420;
}

#panel-alliance .alliance-description-toolbar .bbcode-btn:disabled {
  background: #555a4c;
  border-color: #6a705f;
  color: #bbb9a8;
  cursor: not-allowed;
  box-shadow: none;
}

#panel-alliance .alliance-description-toolbar.is-disabled {
  opacity: 0.6;
}

#panel-alliance .alliance-properties-form input:disabled,
#panel-alliance .alliance-properties-form input[disabled],
#panel-alliance .alliance-properties-form textarea:disabled,
#panel-alliance .alliance-properties-form textarea[disabled],
#panel-alliance .alliance-description-form textarea[readonly] {
  background: rgba(0, 0, 0, 0.18);
  color: #cdbfa3;
  cursor: not-allowed;
}

#panel-alliance .alliance-description-form.is-editing textarea {
  background: rgba(0, 0, 0, 0.35);
  color: #f8f1dd;
  cursor: text;
}

#panel-alliance .alliance-description-form textarea {
  min-height: 140px;
}

#panel-alliance .alliance-description-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

#panel-alliance .alliance-properties-hint {
  margin-top: 6px;
  color: #6b5d4b;
  font-style: italic;
}

#panel-alliance .alliance-danger-zone {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.tab-btn.overlay-btn.secondary {
  background: #d9cbb2;
  color: #3d2e1f;
}

.tab-btn.overlay-btn.secondary:hover {
  background: #cdbd9f;
}

.tab-btn.overlay-btn.danger {
  background: linear-gradient(180deg, #ab3737 0%, #6f1c1c 100%);
  border-color: #c25454;
  color: #fce8dc;
}

.tab-btn.overlay-btn.danger:hover {
  background: linear-gradient(180deg, #c95454 0%, #882525 100%);
  color: #fff4ee;
}

#panel-alliance .alliance-announcement {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
}

#panel-alliance .announcement-title {
  width: 90%;
  text-align: left;
  color: #3d2e1f;
  align-self: flex-start;
  font-size: 1.1rem;
  margin: 8px 0;
}

#panel-alliance .alliance-announcement textarea {
  width: 90%;
  height: 120px;
}

#panel-alliance .announcement-edit-btn {
  width: auto;
  padding: 5px 10px;
  margin: 8px 16px 0 auto;
}

#panel-alliance .announcement-edit-btn::before,
#panel-alliance .announcement-edit-btn::after {
  content: none;
}

#panel-alliance .alliance-history {
  margin: 12px 16px 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(61, 46, 31, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#panel-alliance .alliance-history-title {
  margin: 0 16px;
  color: #3d2e1f;
  font-size: 1.1rem;
}

#panel-alliance .alliance-history-list {
  list-style: none;
  margin: 0;
  padding: 0 27px;
  max-height: 200px;
  overflow-y: auto;
  color: #673420;
}

#panel-alliance .alliance-history-list li {
  padding: 8px 4px;
  border-bottom: 1px solid rgba(61, 46, 31, 0.15);
}

#panel-alliance .alliance-history-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#panel-alliance .alliance-history-list li:last-child {
  border-bottom: none;
}

#panel-alliance .alliance-history-list .alliance-empty-list {
  color: #673420;
  text-align: center;
  font-style: italic;
}

#panel-alliance .alliance-history-item-text {
  font-weight: 600;
  color: #3d2e1f;
}

#panel-alliance .alliance-history-item-detail {
  font-size: 0.9rem;
  color: #674f2b;
}

#panel-alliance .alliance-history-item-meta {
  font-size: 0.85rem;
  color: #856a45;
}

#panel-alliance .alliance-leave-btn {
  align-self: flex-end;
  margin: 0 16px 0 auto;
  padding: 6px 18px;
}

.alliance-members-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#panel-alliance .alliance-members-header h3 {
  margin: 0;
}

.refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
}

.alliance-members-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #b3a28f;
}

.alliance-members-table th,
.alliance-members-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #b3a28f;
}

.alliance-members-table th {
  background: #f5f5f5;
  font-weight: bold;
}

.alliance-members-table th:nth-child(1),
.alliance-members-table td:nth-child(1) {
  width: 60px;
}

.alliance-members-table th:nth-child(2),
.alliance-members-table td:nth-child(2) {
  width: 180px;
}

.alliance-members-table th:nth-child(3),
.alliance-members-table td:nth-child(3) {
  width: 180px;
}

.alliance-members-table th:nth-child(4),
.alliance-members-table td:nth-child(4) {
  width: 100px;
}

.alliance-members-table th:nth-child(5),
.alliance-members-table td:nth-child(5) {
  width: 110px;
  text-align: center;
}

.alliance-members-table tbody tr:nth-child(even) {
  background: #f2f2f2;
}

.alliance-members-table tbody tr:hover {
  background: #e0e0e0;
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #b3a28f;
}

.status-dot.online {
  background: #2ecc71;
}

.status-dot.offline {
  background: #7f8c8d;
}

.status-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.status-icon {
  width: 12px;
  height: 12px;
}

.status-text {
  font-size: 12px;
}

.member-preferences {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#panel-alliance .member-status-toggle {
  margin-bottom: 12px;
}

#panel-alliance #edit-member-status {
  width: auto;
  padding: 5px 10px;
  margin-top: 8px;
}

#panel-alliance #alliance-members {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#panel-alliance #alliance-members .alliance-members-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#panel-alliance #alliance-members .alliance-members-footer {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 6px;
}

.research-resources {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  padding: 0 6px 10px 6px;
  align-items: flex-start;
}

#panel-research .resource-name {
  margin-left: 28px;
  margin-bottom: 3px;
  color: #673420;
  font-size: 0.9em;
}

#panel-research .resource-block {
  margin-top: 6%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.building-list.lou-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

/* Align building selection overlay with boss/dungeon layout */
#panel-building-list .building-list.lou-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  align-content: flex-start;
  overflow-y: auto;
  padding-left: 21px;
}

#panel-building-list .building-card {
  flex: 0 0 auto;
  margin: 0;
}

/*carte liste construction*/
.queue-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  background: url('img/cartelisteconstruction.webp') center/100% 100% no-repeat;
  width: 95%;
  /* adapte à la taille de ta carte ! */
  min-height: 94px;
  margin: 0 auto 6px auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.queue-item-demolition-icon {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.queue-item-icon {
  width: 52px;
  height: 52px;
  margin: 21px 10px 0 8px;
  border-radius: 6px;
  box-shadow: 0 0 3px #bbb5;
  background: #e3dab7;
}

#recruitment-queue .queue-item-icon {
  margin: 0 10px 0 2px;
  /* centrer verticalement l’icône */
}

.queue-item-content {
  flex: 1 1 auto;
  margin-left: 4px;
  margin-top: 12px;
}

.queue-item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 1.09em;
  color: #2d2308;
  margin-bottom: 7px;
  padding-right: 6px;
}

.queue-item-endtime {
  font-size: 0.99em;
  color: #4d3a09;
  font-weight: normal;
  margin-left: 14px;
}

.queue-item-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-item.queue-item-draggable {
  cursor: grab;
}

.queue-item.queue-item-dragging {
  opacity: 0.8;
  cursor: grabbing;
}

.queue-item-drop-before::before,
.queue-item-drop-after::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  border-top: 3px solid #b9732f;
  border-radius: 2px;
  box-shadow: 0 0 4px #b9732faa;
}

.queue-item-drop-before::before {
  top: -6px;
}

.queue-item-drop-after::after {
  bottom: -6px;
}

.queue-item-duration {
  min-width: 120px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #2d2308;
  text-align: left;
}

.queue-item-progress-bar {
  background: #e7d2a8;
  border: 2px solid #7d6a4a;
  box-shadow: 0 1px 2px #fff9 inset, 0 0px 3px #0002;
  height: 19px;
  min-width: 120px;
  max-width: 240px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.recruit-progress-bar {
  align-self: flex-start;
  width: 100%;
  max-width: 240px;
}

.queue-item-progress {
  position: static;
  height: 100%;
  transition: none;
  will-change: width;
  box-shadow: 0 1px 1px #fff5 inset;
  background: linear-gradient(90deg, #dab248 0%, #e6c676 60%, #be9540 100%);
  z-index: 1;
}

.queue-item-progress.demolition-progress {
  position: static;
  background: linear-gradient(90deg, #ff5e5e, #ff0000);
  z-index: 1;
}

/* Progress bar for the whole troop batch */
.recruit-progress-total {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #789440;
  transition: width 0.18s;
  z-index: 1;
}

/* Mini progress bar for the current unit */
.recruit-progress-unit {
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #dab248 0%, #e6c676 60%, #be9540 100%);
  transition: width 0.18s;
  z-index: 2;
}

.queue-item-timer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffbe0;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #7d6a4a, 0 1px 1px #be9540;
  letter-spacing: 1px;
  z-index: 2;
  pointer-events: none;
}

/* Info text above the progress bar */
.queue-item-percent {
  text-align: center;
  font-weight: bold;
  font-size: 0.85rem;
  color: #2d2308;
}

.queue-item-prod-info {
  display: block;
  text-align: left;
  font-size: 0.72rem;
  line-height: 1;
  margin-top: 4px;
  color: #2d2308;
}

.queue-item-total-time {
  text-align: center;
  font-size: 0.72rem;
  font-weight: bold;
  color: #2d2308;
  margin-top: 2px;
}

.queue-cancel-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}

.queue-cancel-block .unit-finish-time,
.queue-cancel-block .group-finish-time {
  font-size: 0.72rem;
  color: #2d2308;
  line-height: 1.1;
}

.queue-btn-reset.tab-btn,
.queue-btn-cancel.tab-btn {
  min-width: 63px;
  margin-left: 0px;
}

/* Force la taille des boutons d’action dans la file de construction */
.small-btn.tab-btn {
  width: 69px !important;
  /* Ajuste à ta convenance */
  height: 26px;
  min-width: 68px;
  padding: 5px 0 5px 0;
  display: inline-block;
  margin: 0px 20px 0px 14px;
  box-sizing: border-box;
  right: -12px;
}

/* Boutons d'action alignés à droite dans la file de construction */
.queue-item-progress-row .queue-btn-reset {
  margin-left: auto;
  margin-right: 6px;
}

.queue-item-progress-row .queue-btn-cancel {
  margin-left: 0;
  margin-right: 0;
}

/* Alignement du bouton Convertir dans la file de construction */
.queue-item-progress-row .queue-btn-convert {
  margin-left: 0;
  margin-right: 0;
}

.downgrade-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 18px;
  margin: 16px 0 8px 0;
  padding: 0 8px;
}

.destroy-resource-btn {
  margin-bottom: 6px;
}

.destruction-time {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #000;
  margin-left: 14px;
}

.upgrade-section {
  border-radius: 10px;
  padding: 15px 20px 8px 20px;
  margin-bottom: 7px;
  min-width: 230px;
  color: #5b411c;
  font-size: 16px;
  box-shadow: 0 2px 4px #d6c0a222;
}

.panel-banner.hdv-banner {
  background: url('img/BannerDetails.png') repeat-x #5c3411;
  color: #fff9d0;
  font-weight: bold;
  font-size: 22px;
  padding: 8px 14px;
  border-radius: 10px 10px 0 0;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 2px #0004;
}

.townhall-flex {
  display: flex;
  align-items: flex-start;
  gap: 19px;
  margin-bottom: 10px;
}

.townhall-icon-block {
  position: relative;
  width: 144px;
  height: 160px;
  background: url('img/CadreBR.png') no-repeat center center;
  background-size: contain;
  margin-right: 16px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.townhall-icon {
  width: 76px;
  height: 76px;
  border-radius: 7px;
  box-shadow: 0 2px 6px #7d6a4a39;
  margin-top: 5px;
}

.townhall-main-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15.5px;
  color: #5b411c;
  background: #f5ecd5f3;
  border-radius: 8px;
  padding: 10px 16px 8px 18px;
  min-width: 220px;
  margin-top: 7px;
  box-shadow: 0 1px 3px #ceb58428 inset;
}

.townhall-main-info b {
  color: #5b411c;
  font-weight: bold;
}

.townhall-main-info .label {
  color: #ac9565;
  font-weight: normal;
  margin-right: 4px;
}

.townhall-upgrade-btn {
  display: block;
  width: 96%;
  margin: 8px auto 15px auto;
  padding: 7px 0 5px 0;
  font-weight: bold;
  font-size: 1.06em;
  background: linear-gradient(180deg, #4e7c28 0%, #436a2f 100%);
  color: #f5e8c5;
  border: 2px solid #3a5e21;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 1px 0 #a89e6f33 inset, 0 2px 6px #2c2b1829;
  transition: background 0.14s, box-shadow 0.11s;
}

.townhall-upgrade-btn:hover {
  background: linear-gradient(180deg, #6bb141 0%, #436a2f 100%);
  color: #fffbe8;
}

.upgrade-cost-time {
  margin-bottom: 9px;
}

.upgrade-cost-row {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-end;
}

.upgrade-cost-block {
  display: flex;
  align-items: center;
  margin-bottom: 1px;
}

.upgrade-cost-block .resource-icon {
  width: 22px;
  height: 22px;
  margin-right: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}

.upgrade-ressource-amount {
  color: #436a2f !important;
  font-weight: bold;
  font-size: 16.4px;
  margin-left: 2px;
}

.upgrade-ressource-amount.resource-insufficient {
  color: #fb1300 !important;
}

.upgrade-time-row {
  font-size: 15px;
  margin: 4px 0 2px 0;
  color: #5b411c;
  display: flex;
  justify-content: space-between;
}

.upgrade-time-row b {
  display: inline-block;
  width: 84px;
  text-align: right;
}

.upgrade-info {
  margin-top: 8px;
  margin-bottom: 3px;
  font-size: 15px;
  color: #5b411c;
}

.upgrade-info b {
  color: #5b411c;
}

.palace-virtue-bonus {
  margin-bottom: 2px;
}

.palace-virtue-bonus-list {
  margin: 0 0 8px 0;
  padding-left: 18px;
  color: #5b411c;
  font-size: 14px;
  line-height: 1.3;
}

.palace-virtue-bonus-list li {
  margin: 0 0 3px 0;
}

.recruitment-table {
  width: 100%;
  border-collapse: collapse;
  background: none;
  margin: 0 0 12px 0;
  font-size: 15px;
}

.recruitment-row {
  background: url("img/Tuile unite déblok.png") no-repeat center/100% 100%;
  height: 49px;
}

.recruitment-table th,
.recruitment-table td {
  border-bottom: 1px solid #cbb588;
  padding: 6px 9px;
  text-align: left;
  font-weight: bold;
}

.icon-cell {
  width: 60px;
  text-align: center;
  /* centers icon slightly, moving it to the right */
  padding-left: 6px;
  /* push icon away from the left edge */
}

/* Keep icon centered but add a bit more offset on the left */
.icon-cell .unit-icon {
  margin-left: 36px;
  margin-right: 0;
}

.recruitment-table th {
  background: #c8a96a;
  color: #4b340e;
  font-weight: bold;
  font-size: 16px;
  border-radius: 6px 6px 0 0;
}

.unit-icon {
  width: 31px;
  height: 31px;
  border-radius: 3px;
  border: solid 2px #dac090;
  margin-right: 6px;
  background: #fffbe5;
  box-shadow: 0 1px 3px #baa96949;
}

.recruit-input {
  font-size: 15px;
  padding: 2px 5px;
  border: 2.5px solid #baa984;
  border-radius: 3px;
  width: 70px;
  margin-right: 5px;
}

.recruit-input:focus {
  border-color: #baa984;
  outline: none;
}

.recruit-input::-webkit-inner-spin-button,
.recruit-input::-webkit-outer-spin-button {
  filter: invert(36%) sepia(24%) saturate(450%) hue-rotate(55deg) brightness(95%) contrast(88%);
}

/* Align quantity inputs and Max buttons to the right edge */
.recruitment-table td:nth-child(4) {
  text-align: right;
  padding-right: 4px;
}

.queued-count {
  color: #552b08;
  margin-left: -93px;
  margin-right: 55px;
  display: inline-block;
  width: 14px;
  text-align: center;
}

.max-btn {
  font-size: 13px;
  padding: 3px 2px;
  width: 101px;
  background: linear-gradient(to bottom, #f1dcc0, #e3c39a);
  border: 2.5px solid #baa984;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  color: #5d4314;
  margin-left: 2px;
}

/* Preserve gradient for disabled Max buttons */
.max-btn:disabled {
  background: linear-gradient(to bottom,
      rgba(241, 220, 191, 0.4),
      rgba(227, 195, 154, 0.4)) !important;
}

.recruitment-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 220px;
  position: relative;
  padding: 0 1px 0 1px;
  margin: 0px;
}

.footer-costs {
  display: grid;
  grid-template-columns: auto repeat(5, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
}

.footer-costs .resource-line,
.footer-costs .cost-row {
  display: contents;
}

.footer-costs span {
  font-size: 15px;
  color: #6b531e;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.footer-costs img {
  width: 19px;
  height: 19px;
  margin-right: 3px;
}

.footer-costs .cost-row span:nth-child(1) {
  grid-column: 1 / span 2;
}

.footer-costs .cost-row span:nth-child(2) {
  grid-column: 4 / span 2;
}

.footer-costs span b {
  margin-left: 6px;
}

.footer-costs .cost-row span {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
}

.footer-costs .cost-row span b {
  margin-left: 0;
  justify-self: start;
}

.footer-recruit-btn {
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  padding: 8px 20px 7px 20px;
  font-size: 16px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  transition: background 0.11s, box-shadow 0.12s, transform 0.1s;
  margin-right: 6px;
  align-self: flex-end;
  margin-top: 17px;
  margin-bottom: 106px;
  width: 142px;
  height: 30px;
}

.footer-recruit-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.footer-recruit-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

.panel-banner.recruitment-banner {
  background: url('img/BannerDetails.png') repeat-x #a97e3d;
  color: #fffbe8;
  font-weight: bold;
  font-size: 23px;
  letter-spacing: 1.1px;
  border-radius: 8px 8px 0 0;
  padding: 7px 14px 7px 19px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px #b3935b5c;
  border-bottom: 2px solid #e2c98a;
  position: relative;
}

.panel-banner .modal-title {
  flex: 1;
}

/* GLOBAL MODAL CLOSE BUTTON (Large) */
.modal-close-btn {
  /* Reset */
  background-color: transparent;
  border: none;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  outline: none;
  color: transparent;

  /* Dimensions & Image */
  width: 28px;
  height: 28px;
  background-image: url('img/Bouton_close/button-close.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Default Positioning (can be overridden) */
  position: absolute;
  right: 3px;
  top: 5px;
}

/* X Icon for Large Button */
.modal-close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-image: url('img/Bouton_close/icon_close_btn_large.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* States for Large Button */
.modal-close-btn:hover {
  background-image: url('img/Bouton_close/button-close-hovered.png');
}

.modal-close-btn:active {
  background-image: url('img/Bouton_close/button-close-pressed.png');
}

.modal-close-btn:focus {
  background-image: url('img/Bouton_close/button-close-focused.png');
}

/* SMALL CLOSE BUTTON */
.modal-close-btn-small {
  background-color: transparent;
  border: none;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  outline: none;
  color: transparent;

  width: 21px;
  height: 21px;
  background-image: url('img/Bouton_close/button-close-small.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  position: absolute;
  right: 5px;
  top: 5px;
}

.modal-close-btn-small:hover {
  background-image: url('img/Bouton_close/button-close-small-hovered.gif');
}

.modal-close-btn-small:active {
  background-image: url('img/Bouton_close/button-close-small-pressed.gif');
}

.modal-close-btn-small:focus {
  background-image: url('img/Bouton_close/button-close-small-focused.gif');
}

/*────────────────────────────────────────────────────────────────*/
/*  FENÊTRE “Recruitment” : fond personnalisé et liste scrollable */
/*────────────────────────────────────────────────────────────────*/

#recruitment-window {
  background: url('img/Modal Recrutementv1.webp') center;
  background-size: cover;
}

#shop-window {
  height: 781px;
}

#purchase-modal {
  width: 854px;
  height: 256px;
}

#reports-window {
  display: flex;
  flex-direction: column;
}

#reports-window .modal-body {
  position: relative;
  top: 0;
  left: -10px;
  width: 100%;
  height: auto;
  background: transparent;
  padding-left: 23px;
  padding-right: 1px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#reports-window .report-header-divider {
  border: 0;
  border-top: 1px solid #673420;
  margin: 4px 0 8px;
}

#reports-window .two-col-grid {
  display: flex;
  width: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

#reports-window .label-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: bold;
  color: #3d2e1f;
  margin-right: 8px;
  text-align: left;
}

#reports-window .rows-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#reports-window .report-attack-grid .label-col>div:first-child,
#reports-window .report-defense-grid .label-col>div:first-child,
#reports-window .scout-attack-grid .label-col>div:first-child,
#reports-window .scout-defense-grid .label-col>div:first-child {
  height: 52px;
}

#reports-window .rows-col .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#reports-window .icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 52px;
  margin-bottom: 0px;
}

#reports-window .row-item {
  display: flex;
  flex-direction: column;
  width: 52px;
  align-items: center;
  text-align: center;
  color: #3d2e1f;
  flex-shrink: 0;
  position: relative;
}

#reports-window .row-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  pointer-events: none;
}

#reports-window .attack-icons img,
#reports-window .defend-icons img,
#reports-window .scout-attack-icons img,
#reports-window .scout-defend-icons img,
#reports-window .reinforce-received-icons img,
#reports-window .siege-reinf-icons img,
#reports-window .pillage-reinf-icons img,
#reports-window .attack-reinf-icons img,
#reports-window .siege-scout-building-list img,
#reports-window .pillage-scout-building-list img {
  border-radius: 3px;
  border: solid 2px #dac090;
  background: #b5a893;
  box-shadow: 0 1px 3px #baa96949;
}

.report-summary {
  margin: 8px 0;
  margin-right: 10px;
}

.reinforce-overview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.reinforce-overview .report-section {
  margin-top: 0;
}

.reinforce-player-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 6px;
  text-align: left;
  position: relative;
  min-height: 1.5em;
}

.reinforce-player-line .report-player {
  flex: 0 0 auto;
  position: absolute;
  left: 0;
}

.reinforce-alliance {
  color: #3d2e1f;
  font-weight: 600;
}

.reinforce-share-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.reinforce-share-note {
  font-weight: normal;
}

.reinforce-share-divider {
  margin-top: 0;
  margin-bottom: 12px;
}

.reinforce-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #3d2e1f;
}

.reinforce-route-label {
  font-weight: 600;
}

.reinforce-route-separator {
  font-weight: 600;
  color: #3d2e1f;
}

.reinforce-unit-grid .rows-col {
  gap: 4px;
}

.reinforce-received-unit-grid {
  margin-bottom: 6px;
}

.reinforce-received-alliance {
  text-align: center;
  font-weight: bold;
  margin: 4px 0 6px 0;
  color: #0055aa;
  white-space: nowrap;
}

.reinforce-received-separator {
  margin: 6px 0;
}

.reinforce-received-target-label {
  font-weight: bold;
  margin-bottom: 2px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin: 2px 0;
}

.report-section {
  margin-top: 8px;
}

.report-city,
.report-player {
  color: #0055aa;
  text-align: left;
}

.report-city {
  margin: 2px 0 6px 0;
}

.report-player-line {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  margin: 2px 0;
}

.report-alliance {
  color: #0055aa;
  font-weight: 600;
}

.report-coords {
  color: #0055aa;
  text-align: left;
  margin-top: 2px;
}

.report-coords a {
  color: inherit;
}

.loot-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

/* Ensure attack report loot sections mirror scout styling */
.attack-only .loot-resources {
  justify-content: center;
}

.loot-resources b.gain {
  color: #3fb040;
}

.loot-artifact-reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.loot-artifact-row {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  margin-top: 16px;
}

.loot-artifact-reward img {
  width: 40px;
  height: 38px;
}

.pillage-only#pillage-summary-row {
  justify-content: flex-start;
}

#reports-window .trade-report {
  color: #3d2e1f;
}

#reports-window .trade-section-divider {
  border: 0;
  border-top: 1px solid #673420;
  margin: 8px 0;
}

#reports-window .trade-parties {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

#reports-window .trade-party {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#reports-window .trade-party-label {
  font-weight: bold;
}

#reports-window .trade-party-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
}

#reports-window .trade-party-details>div {
  line-height: 1.3;
  text-align: left;
}

#reports-window .trade-party-coords {
  color: #0055aa;
}

#reports-window .trade-party-coords a {
  color: inherit;
  text-decoration: none;
}

#reports-window .trade-party-coords a:hover {
  text-decoration: underline;
}

#reports-window .trade-party-divider {
  border: 0;
  border-top: 1px solid #84632b;
  margin: 0;
}

#reports-window .trade-resources-title {
  margin-top: 0;
}

@media (max-width: 640px) {
  #reports-window .trade-parties {
    flex-direction: column;
    gap: 12px;
  }

  #reports-window .trade-parties-divider {
    display: none;
  }
}

#reports-window .trade-resources-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 6px 0 10px;
}

#reports-window .trade-resources-row .trade-resource {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}

#reports-window .trade-resources-row img {
  width: 24px;
  height: 24px;
}

.attack-only .loot-note {
  text-align: left;
}

.loot-note,
.loot-trap-note {
  font-size: 0.8rem;
  margin: 1px 0;
  text-align: left;
}

.vertical-divider {
  width: 1px;
  background-color: #84632b;
  align-self: stretch;
}

.loot-details {
  margin: 6px 67px;
  padding: 4px 8px;
  border-radius: 4px;
}

.loot-detail-row {
  display: flex;
  justify-content: space-between;
  margin: 2px 0;
}

.colonize-message {
  text-align: center;
  margin: 8px 0;
  color: #3d2e1f;
}

.report-buttons {
  display: flex;
  gap: 6px;
  align-items: stretch;
  padding: 8px 10px;
  background: #d7bfa3;
  border-top: 1px solid rgba(61, 46, 31, 0.4);
  flex-shrink: 0;
}

.report-buttons>button,
.report-buttons .center-buttons>button {
  flex: 1 1 0;
}

.report-buttons .center-buttons {
  display: flex;
  gap: 6px;
  flex: 2 1 0;
}



.options-tabs {
  display: flex;
  margin-bottom: 8px;
  border-bottom: 2px solid #b52e2e00;
}

.options-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}

.options-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.options-tab-content {
  padding: 4px;
}

#options-window .options-body {
  position: absolute;
  isolation: isolate;
}

#options-window .options-body::before {
  content: '';
  position: absolute;
  inset: 4px 6px 6px;
  pointer-events: none;
  z-index: 0;

  background-image:
    url('img/UI/contour_angle_tl.png'),
    url('img/UI/contour_angle_tr.png'),
    url('img/UI/contour_angle_bl.png'),
    url('img/UI/contour_angle_br.png'),
    url('img/UI/contour_h.png'),
    url('img/UI/contour_h.png'),
    url('img/UI/contour_v.png'),
    url('img/UI/contour_v.png');
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-size:
    17px 17px,
    17px 17px,
    17px 17px,
    17px 17px,
    calc(100% - 34px) 3px,
    calc(100% - 34px) 3px,
    1px calc(100% - 34px),
    1px calc(100% - 34px);
  background-position:
    left top,
    right top,
    left bottom,
    right bottom,
    17px 0,
    17px 100%,
    0 17px,
    100% 17px;
}

#options-window .options-body>* {
  position: relative;
  z-index: 1;
}

.debug-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.debug-unit-tables {
  display: flex;
  gap: 12px;
}

.debug-units {
  border-collapse: collapse;
}

.debug-units td {
  padding: 2px 4px;
  border: 1px solid #444;
}

.volume-control {
  margin-top: 8px;
}

#opt-audio {
  padding: 10px 12px;
  border: 1px solid #4f7219;
  border-radius: 10px;
  color: #f4e6bf;
}

#opt-audio>label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  border: 1px solid #4f7219;
  border-radius: 8px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  color: #f4e6bf;
}

#opt-audio .volume-control {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #4f7219;
  border-radius: 10px;
}

#opt-audio .volume-control label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #633c32;
}

#opt-audio input[type="range"],
#opt-audio input[type="checkbox"] {
  accent-color: #5f852b;
}

#opt-audio input[type="range"] {
  width: 100%;
  background: transparent;
}

#objects-window {
  height: 59%;
}

#leaderboard-window {
  height: 60%;
}

#player-info-window {
  height: 60%;
}

#title-window {
  background: url('img/fenetre nouveau titre.png') center;
  background-size: cover;
  height: 62%;
  border: none;
}

#title-window[data-theme="minister-defense"] {
  background-image: url('img/fenetre_defense_minister_running_out.png');
}

#title-window[data-theme="minister-trade"] {
  background-image: url('img/fenetre_trade_minister_running_out.png');
}

#title-window[data-theme="minister-war"] {
  background-image: url('img/fenetre_war_minister_running_out.png');
}

#title-window[data-theme="minister-construction"] {
  background-image: url('img/fenetre_building_minister_running_out.png');
}

#title-window[data-theme="city-crushed"] {
  background-image: url('img/fenetre_city_crushed.png');
}

#title-window .modal-banner {
  background: url('img/UI/window-popup-captionbar-active.png') no-repeat center center;
  background-size: cover;
}

#colonize-window {
  background: url('img/fenetre_founded_new_city.png') center;
  background-size: cover;
  height: 62%;
  border: none;
}

#artifact-used-window {
  background: url('img/Objet_utiliser.png') center no-repeat;
  background-size: contain;
  width: 677px;
  height: 286px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
}

#artifact-used-window .modal-body {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

#session-expired-window {
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200020;
}

#session-expired-window .modal-body p {
  margin: 0;
  font-weight: bold;
  text-align: center;
}

#idle-warning-window {
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200020;
}

#idle-warning-window .modal-body p {
  margin: 0;
  font-weight: bold;
  text-align: center;
}

#artifact-used-message {
  color: #3d2e1f;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
}

/* Fenêtre Confirmation Château */
#castle-confirm-window {
  position: absolute;
  top: 101px;
  left: 512px;
  width: 601px;
  height: 263px;
  background: url('img/bgr_popup_castle_warning.png') no-repeat center / cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

#castle-confirm-window .details-banner {
  margin: 0;
  background: url(img/BannerDetails.png) no-repeat center center;
  background-size: 100% 100%;
  top: -7px;
  color: #d6bfa0;
}

#castle-confirm-window .castle-popup-body {
  padding: 0px 23px 9px 172px;
  color: #3d2e1f;
}

#castle-confirm-window .detail-buttons {
  margin-top: 25px;
}

/* Fenêtre Confirmation Palais */
#palace-confirm-window {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 40px);
  background: rgba(17, 12, 7, 0.55);
  z-index: 1500;
}

#palace-confirm-window:focus {
  outline: none;
}

#palace-confirm-window .palace-popup-panel {
  width: min(700px, 90%);
  aspect-ratio: 1031 / 451;
  background: url('img/fenetre construction palais.png') no-repeat center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 1vw, 64px) clamp(15px, 1vw, 87px);
  color: #2f2412;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

#palace-confirm-window .palace-popup-content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 24px);
  align-items: flex-start;
  width: 100%;
}

#palace-confirm-window .palace-popup-title {
  margin: clamp(0px, -2.6vw, -10px) 0 0 0;
  padding-left: clamp(4px, 0.2vw, 20px);
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  color: #f4e7c4;
}

#palace-confirm-window .palace-popup-body {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 18px);
  max-width: min(520px, 86%);
  align-items: flex-start;
}

#palace-confirm-window .palace-popup-text {
  font-size: clamp(14px, 2.1vw, 16px);
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

#palace-confirm-window .palace-popup-question {
  font-size: clamp(16px, 2.4vw, 15px);
  font-weight: 600;
  margin: 0;
  text-align: left;
  line-height: 1.5;
}

#palace-confirm-window .palace-popup-buttons {
  display: flex;
  justify-content: flex-end;
  gap: clamp(14px, 6vw, 14px);
  align-self: flex-end;
  margin: clamp(12px, 3vw, 20px) clamp(18px, 5vw, 36px) 0 0;
}

#palace-confirm-window .palace-popup-buttons .overlay-btn {
  min-width: 140px;
  top: -13px;
  right: 114%;
  width: auto;
  margin: 0;
  padding: 10px 24px;
  background: #3b660e;
  border-radius: 6px;
  border: 2px solid #4f7219;
  box-shadow: none;
}

#palace-confirm-window .palace-popup-buttons .overlay-btn::before,
#palace-confirm-window .palace-popup-buttons .overlay-btn::after {
  display: none;
}

/* Fenêtre Commandement */
#command-window {
  background: url('img/fenetre-commandement.png') center;
  background-size: cover;
  width: 734px;
  height: 778px;
}

#command-window .modal-body {
  background: transparent;
  padding: 9px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.command-tabs {
  display: flex;
  margin-bottom: 8px;
}

.command-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}

.command-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.command-tab-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
  position: relative;
  padding-bottom: 50px;
  min-height: 0;
}

/* Layout for PvP subtabs */
#cmd-pvp {
  padding: 0;
  display: flex;
  flex-direction: column;
}

#cmd-pvp .command-tabs {
  display: flex;
  margin-bottom: 8px;
}

#cmd-pvp .command-tab-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
}

/* Fenêtre Commerce */
#trade-window {
  background: url('img/Fenetre-commerce.png') center;
  background-size: cover;
  width: 826px;
  height: 517px;
  border: none;
}

#trade-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 18px;
}

/* Fenêtre Guides */
#guide-window {
  background-image: url('img/Fenetre-commerce.png'), url('img/UI/win_mainoverlay_paper.jpg');
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  width: 826px;
  height: 517px;
  border: none;
}

#guide-window .modal-body {
  background: transparent;
  top: 5px;
  display: flex;
  flex-direction: column;
  padding: 10px 18px 18px;
  position: relative;
  overflow: hidden;
}

#guide-second {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px;
  overflow: auto;
}

#guide-second .guide-second-wrapper {
  position: relative;
  width: min(100%, 540px);
  margin: 0 auto;
}

#guide-second .guide-second-image {
  display: block;
  width: 100%;
  height: auto;
}

#guide-second .guide-second-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#guide-second .guide-second-check {
  position: absolute;
  width: min(6%, 42px);
  max-width: 42px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 160ms ease-in-out;
}

#guide-second .guide-second-check.visible {
  opacity: 1;
}


#guide-artifact {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 4px;
  overflow: auto;
}

#guide-artifact .guide-artifact-wrapper {
  width: min(100%, 720px);
  margin: 0 auto;
}

#guide-artifact .guide-artifact-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}


#guide-city-defense {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 4px;
  overflow: auto;
}

#guide-city-defense .guide-city-defense-wrapper {
  width: min(100%, 720px);
  margin: 0 auto;
}

#guide-city-defense .guide-city-defense-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

#virtues-window {
  /* background: url('img/Fenetre-commerce.png') center; */
  /* background-size: cover; */
  width: 826px;
  height: 517px;
  border: none;
  overflow: visible;
}

#virtues-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
}

#alliance-attacks-window {
  width: 826px;
  height: 517px;
  border: none;
  overflow: visible;
}

#alliance-attacks-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 18px;
  overflow: hidden;
}

.alliance-attacks-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: center;
}

.alliance-attacks-content {
  flex: 1;
  overflow-y: auto;
}

.alliance-attacks-table {
  width: 100%;
  border-collapse: collapse;
}

.alliance-attacks-table th,
.alliance-attacks-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.alliance-attacks-table th {
  background-color: rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.virtues-tab-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 11px 6px;
}

.virtues-tab-track {
  flex: 1 1 auto;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.virtues-tab-track::-webkit-scrollbar {
  display: none;
}

.virtues-tabs {
  display: inline-flex;
  gap: 4px;
  scroll-padding: 4px;
}

.virtues-tab-nav-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 2px solid #444;
  border-radius: 50%;
  background: linear-gradient(180deg, #c2ab97, #8f7b5a);
  color: #1d1208;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, filter 120ms ease;
}

.virtues-tab-nav-btn:focus-visible {
  outline: 2px solid #ffe4af;
  outline-offset: 2px;
}

.virtues-tab-nav-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.virtues-tab-nav-btn:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.95);
}

.virtues-tab-nav-btn:disabled {
  opacity: 0.45;
  cursor: default;
  filter: grayscale(0.3);
}

.virtues-tab-btn {
  padding: 4px 10px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.virtues-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.virtues-tab-contents {
  flex: 1 1 auto;
  border-radius: 0 12px 12px 12px;
  padding: 18px;
  color: #463727;
  overflow-y: auto;
}

.virtues-tab-content {
  min-height: 100%;
}

.virtues-description {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.virtues-bonus-section {
  margin-bottom: 20px;
}

.virtues-bonus-section h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #3d2e1f;
}

.virtues-bonus-list {
  list-style: none;
  margin: 0;
}

.virtues-bonus-list li {
  font-size: 14px;
  line-height: 1.5;
}

.virtues-panel-title {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #3b2818;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.virtues-paragraph {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #463727;
}

.virtues-paragraph.virtues-bonus {
  font-style: italic;
}

.virtue-section {
  margin-top: 20px;
}

.virtue-section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #3d2e1f;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.virtue-section-label {
  flex: 1 1 auto;
}

.virtue-section-total {
  font-size: 15px;
  font-weight: 700;
  color: #5c452c;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 2px 10px;
}

.virtue-effects-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 14px;
  line-height: 1.5;
}

.virtue-effect-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #463727;
}

.virtue-effect-label {
  flex: 1 1 auto;
  padding-right: 12px;
}

.virtue-effect-value {
  font-weight: 600;
  color: #5c452c;
}

.virtue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.virtue-item {
  color: #463727;
}

.virtue-empty {
  margin-top: 4px;
  font-size: 14px;
  font-style: italic;
  color: #6f5a45;
}

.virtue-link,
.virtue-link:visited {
  color: #1a4fa3;
  text-decoration: underline;
  cursor: pointer;
}

.virtue-link:hover {
  color: #0d2f6d;
}

.virtue-city-name {
  font-weight: 600;
}

.virtue-sanctuary-continent,
.virtue-sanctuary-count {
  color: #5c452c;
  font-style: italic;
}

.trade-tabs {
  display: flex;
  margin-bottom: 6px;
  margin-top: 13px;
  margin-left: 11px;
}

#guide-tab-banner {
  position: relative;
  margin: 0 11px 6px 11px;
}

#guide-tab-banner img {
  display: block;
  width: 100%;
}

#guide-banner-title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.trade-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}

.trade-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.trade-tab-btn.disabled,
.trade-tab-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.trade-tab-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px;
}

#guide-window .trade-tab-content {
  overflow: auto;
}

#guide-window #guide-second {
  overflow: auto;
}

#guide-production {
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}

#guide-next-btn-container {
  position: relative;
  height: 50px;
}

.resource-steps {
  display: flex;
  gap: 0px;
  justify-content: center;
  align-items: flex-end;
  margin-top: 0;
  height: 100px;
}

.resource-step-btn {
  position: relative;
  width: 214px;
  height: 100px;
  border: none;
  background: url('img/Tutoriel/bouton_step_deverouiller.png') no-repeat center/contain;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.resource-step-btn img {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.resource-step-btn .step-label {
  font-size: 14px;
  color: #F5E8C5;
}

.resource-step-btn.locked {
  background-image: url('img/Tutoriel/bouton step verouiller.png');
}

.resource-step-btn:disabled {
  opacity: 1 !important;
  background: url('img/Tutoriel/bouton step verouiller.png') no-repeat center/contain !important;
  background-color: transparent !important;
  cursor: default !important;
}

.resource-step-btn.locked img {
  opacity: 0.5;
}

.resource-step-btn.locked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  background: url('img/Tutoriel/cadenas.png') no-repeat center/contain;
  transform: translate(-50%, -50%);
}

.resource-step-btn.selected {
  background-image: url('img/Tutoriel/bouton_step_selectionne.png');
  width: 217px;
  height: 121px;
  margin-top: -21px;
}

.guide-content {
  height: 320px;
  overflow-y: auto;
  margin: 8px 11px;
}

.guide-step-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.guide-step-content img {
  flex: 0 0 auto;
}

.guide-portrait {
  width: 120px;
  height: auto;
  align-self: flex-start;
}

.guide-text {
  margin-top: 4px;
  color: #3d2e1f;
}

.guide-text p.guide-step-heading {
  margin-top: 118px;
}

.wood-progress-wrapper,
.stone-progress-wrapper,
.iron-progress-wrapper,
.grain-progress-wrapper,
.gold-progress-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 6px;
}

.wood-progress-deco,
.stone-progress-deco,
.iron-progress-deco,
.grain-progress-deco,
.gold-progress-deco {
  display: block;
  width: 19px;
  height: auto;
}

.wood-progress-track,
.stone-progress-track,
.iron-progress-track,
.grain-progress-track,
.gold-progress-track {
  position: relative;
  flex: 1 1 auto;
  max-width: 568px;
  height: 35px;
  border: 2px solid #6b3d29;
  background: #985b42;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.wood-progress-fill,
.stone-progress-fill,
.iron-progress-fill,
.grain-progress-fill,
.gold-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #c39c3e, #efe198);
  transition: width 200ms ease-in-out;
}

.wood-progress-label,
.stone-progress-label,
.iron-progress-label,
.grain-progress-label,
.gold-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 16px);
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #2f170c;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.wood-progress-note,
.stone-progress-note,
.iron-progress-note,
.grain-progress-note,
.gold-progress-note {
  margin: 2px auto 0;
  /*max-width: 480px;*/
  font-size: 12px;
  font-style: italic;
  color: #4d3826;
  text-align: center;
}

.command-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 12px;
}

.command-controls h3 {
  margin: 0;
  color: #3f2216;
}

.command-actions {
  display: flex;
  gap: 6px;
}

/* Smaller command buttons used in raid controls */
.raid-btn {
  width: 109px;
  padding: 6px 0;
  min-width: 0;
}

.command-list-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
}

.raid-footer {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
}

.raid-note {
  text-align: center;
  margin: 8px 0;
}

.raid-target {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 12px;
}

.colonize-target {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 12px;
}

.raid-coord-bar {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  z-index: 16;
}

.colonize-coord-bar {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  z-index: 16;
}

.raid-coord-bar input,
.colonize-coord-bar input {
  width: 46px;
  text-align: center;
  border: 1px solid #666;
  border-radius: 4px;
  background: #f5e8c5;
  color: #333;
  padding: 2px;
}

.raid-coord-bar .coord-eye-btn,
.colonize-coord-bar .coord-eye-btn {
  width: 28px;
  height: 28px;
  background: url('img/eyesicone.webp') no-repeat center center;
  background-size: contain;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.raid-options,
.colonize-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 12px;
  margin-top: 10px;
  margin-bottom: 50px;
}

.raid-options label,
.colonize-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #3f2216;
}

.raid-options select,
.colonize-options select {
  padding: 8px 10px 7px 10px;
  font-size: 14px;
  background: linear-gradient(180deg, #888 0%, #777 50%, #666 100%);
  color: #e7dab7;
  border: 2px solid #666;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  outline: none;
  appearance: none;
}

.raid-options select:hover,
.colonize-options select:hover {
  background: linear-gradient(180deg, #a0a0a0 0%, #8c8c8c 50%, #7a7a7a 100%);
  color: #fffbe0;
}

.raid-options select:active,
.colonize-options select:active {
  background: linear-gradient(180deg, #919191 0%, #7e7e7e 50%, #6d6d6d 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

#colonize-repeat {
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  border: 2px solid #4f7219;
}

#colonize-repeat:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#colonize-repeat:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

.raid-info-row {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px;
  padding: 0 12px;
  margin: 8px 0;
  width: 74%;
  margin-bottom: 6%;
}

.raid-info-row div {
  color: #3f2216;
}

.pvp-warning-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  color: #b30000;
  font-weight: 700;
  margin: 6px 0 2px;
}

.pvp-warning-icon {
  width: 31px;
  height: 30px;
  object-fit: contain;
}

.pvp-warning-text {
  color: #b30000;
}

.raid-final-fixed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.raid-final-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

#attack-btn-final,
#pillage-btn-final,
#scout-btn-final,
#siege-btn-final,
#support-btn-final,
#colonize-btn-final,
#delete-btn-final,
#raid-btn-final {
  margin-top: 0;
  margin-bottom: 10px;
  /* tweak as needed */
}

.raid-selected {
  color: #3f2216;
}

#title-window .modal-body {
  background: transparent;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#colonize-window .modal-body {
  background: transparent;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#title-message {
  text-align: center;
  color: #3d2e1f;
  font-size: 1rem;
  margin-top: 254px;
}

#colonize-window-message {
  text-align: center;
  color: #3d2e1f;
  font-size: 1rem;
  margin-top: 254px;
}

#objects-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 9px 18px 12px;
  height: calc(100% - 108px);
}

.objects-footer {
  height: 72px;
  justify-content: flex-end;
  padding-right: 32px;
}

#leaderboard-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 9px;
}

#player-info-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 9px;
}

.player-info-tabs {
  display: flex;
  margin-bottom: 8px;
}

.player-info-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}

.player-info-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.player-info-buttons {
  display: none;
  gap: 6px;
  margin-bottom: 8px;
}

#player-info-window[data-active-tab="pi-player"] .player-info-buttons {
  display: flex;
}

.player-info-footer {
  display: none;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.35);
}

#player-info-window[data-active-tab="pi-player"] .player-info-footer,
#player-info-window[data-active-tab="pi-cities"] .player-info-footer {
  display: block;
}

#pi-cities {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#player-info-window .pi-player-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

#player-info-window .pi-player-layout .two-col-grid {
  flex: 1 1 auto;
  min-width: 0;
}

#player-info-window .pi-player-winner-image {
  flex: 0 0 auto;
  width: min(300px, 50%);
  max-height: 160px;
  object-fit: contain;
  align-self: flex-start;
}

#player-info-window .two-col-grid {
  display: flex;
  width: 100%;
}

#player-info-window .label-col {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}

#player-info-window .rows-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

#player-info-window .rows-col>div {
  min-height: 1em;
}

.player-info-legend {
  display: none;
  padding-bottom: 6px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 12px;
  font-size: 13px;
  color: #2f1e10;
}

#player-info-window[data-active-tab="pi-cities"] .player-info-legend {
  display: grid;
}

.player-info-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-info-legend .legend-icon {
  width: 28px;
  height: 28px;
}

.leaderboard-player-link {
  color: #3a5771;
  cursor: pointer;
  text-decoration: underline;
}

.player-city-list {
  display: grid;
  grid-template-columns: 28px minmax(160px, 1fr) 120px 90px 80px;
  column-gap: 6px;
  row-gap: 4px;
  align-items: center;
}

.player-city-row,
.player-city-header {
  display: contents;
}

.player-city-row>*,
.player-city-header>* {
  align-self: center;
}

.player-city-row>span,
.player-city-header>span {
  justify-self: start;
  min-width: 0;
}

.player-city-row .pi-town-icon {
  position: static;
  transform: none;
}

.player-city-header {
  font-weight: bold;
}

.leaderboard-tabs {
  display: flex;
  margin-bottom: 8px;
  border-bottom: 2px solid #444444;
}

.leaderboard-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}

.leaderboard-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-note {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #2f2416;
}

.window-loading-host {
  position: relative;
}

.window-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 22, 0.45);
  z-index: 10;
  pointer-events: none;
}

.window-loading-overlay img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #99876b;
}

.leaderboard-table .empty-row td {
  text-align: center;
  font-style: italic;
  color: #6a5641;
  padding: 10px 6px;
}

.leaderboard-subtabs {
  margin-bottom: 6px;
  border-bottom: 2px solid #444444;
  overflow-x: auto;
  white-space: nowrap;
}

/* Variante scrollable pour de nombreux sous-onglets (ex: Combat) */
.leaderboard-subtabs-scroll {
  display: flex;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #7a6850 transparent;
}

.leaderboard-subtab-btn {
  padding: 2px 8px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.leaderboard-subtab-btn.active {
  background: #dec9a5;
  border-color: #7a6850;
  border-bottom: 2px solid #dec9a5;
}

.leaderboard-subtab-btn:disabled,
.leaderboard-subtab-btn.disabled {
  background: linear-gradient(180deg, #b8aa93, #8f7d5e);
  border-color: #5e4f39;
  color: #d8ccb7;
  cursor: not-allowed;
  opacity: 0.7;
}

.objects-tabs {
  display: flex;
  margin-bottom: 8px;
  border-bottom: 2px solid #444444;
}

.objects-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 12px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 4px 8px;
}

#artifact-filter,
#artifact-shop-filter {
  padding: 8px 10px 7px 10px;
  font-size: 14px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  outline: none;
  appearance: none;
}

#artifact-filter:hover,
#artifact-shop-filter:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#artifact-filter:active,
#artifact-shop-filter:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

.objects-controls .shop-btn {
  width: 100px;
  padding: 8px 0;
  background: linear-gradient(180deg, #327e96 0%, #20546b 100%);
}

.objects-controls .shop-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.objects-controls .shop-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

#artifact-use-btn {
  position: static;
  width: auto;
  min-width: 110px;
  margin-right: 0;
}

.objects-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}

.objects-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.objects-tab-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px;
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.artifact-empty-message {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
  margin: 12px 0;
  border-radius: 6px;
  color: #6b5634;
  font-size: 0.95rem;
  line-height: 1.45;
}

.artifact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.6);
  padding: 4px;
  border-radius: 4px;
}

.artifact-item img {
  width: 32px;
  height: 32px;
}

/* Container for banner and card */
.artifact-card-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
}

.artifact-card-wrapper.selected {
  border-color: #39ff14;
  box-shadow: 0 0 4px #39ff14;
  animation: borderPulse 2s linear infinite;
}

@keyframes borderPulse {

  0%,
  100% {
    border-color: #39ff14;
    box-shadow: 0 0 4px #39ff14;
  }

  50% {
    border-color: #ff00ff;
    box-shadow: 0 0 8px #ff00ff;
  }
}


/* Nouvelle carte d'artéfact inspirée de .queue-item */
.artifact-card {
  position: relative;
  display: flex;
  background: #fff;
  width: 100%;
  height: 74%;
  box-sizing: border-box;
  border-radius: 0 0 6px 6px;
}

.artifact-card-wrapper.selected .artifact-card {
  min-height: 100px;
}

.artifact-card-banner {
  background: url('img/NameArtefacts.webp') center/cover no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px;
  font-weight: bold;
  color: #f5e8c5;
  font-size: 0.9rem;
  height: 28px;
  border-radius: 6px 6px 0 0;
}

.artifact-card.selected {
  border-color: #39ff14;
  box-shadow: 0 0 4px #39ff14;
  min-height: 100px;
}

/* Larger card used in the shop window */
.shop-artifact-card {
  min-height: 120px;
}

.artifact-card-wrapper.selected .shop-artifact-card,
.shop-artifact-card.selected {
  min-height: 120px;
}

.shop-artifact-card .artifact-card-content {
  align-items: center;
}

.shop-artifact-card .artifact-info {
  justify-content: space-between;
  height: 100%;
}

.shop-artifact-card .artifact-info .price-btn {
  margin-top: auto;
  align-self: flex-end;
  width: auto;
}

.artifact-card-content {
  display: flex;
  gap: 6px;
  padding: 4px;
  width: 100%;
}

.artifact-card-content .artifact-icon {
  width: 68px;
  height: 68px;
}

.artifact-card.selected .artifact-card-content .artifact-icon {
  width: 68px;
  height: 68px;
}

.artifact-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.artifact-desc {
  font-size: 0.75rem;
}

.artifact-mana {
  font-size: 0.8rem;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.artifact-mana img {
  width: 18px;
  height: 25px;
  margin-right: 2px;
}

.artifact-qty {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-weight: bold;
}

.artifact-shop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#shop-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 9px;
}

.shop-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  border-bottom: 2px solid #444444;
}

.shop-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.shop-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.shop-artifact-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e9cfab;
  padding: 0 12px 8px 12px;
  margin-bottom: 8px;
}

.shop-artifact-tabs {
  display: flex;
  margin-bottom: 8px;
  gap: 6px;
  border-bottom: 2px solid #444444;
}

.shop-artifact-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.shop-artifact-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}


.shop-artifact-header {
  position: relative;
  z-index: 20;
}

.shop-artifact-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.shop-artifact-tab-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px;
  position: relative;
  /* Create stacking context */
  z-index: 1;
  /* Keep below header */
}

.artifact-info .price-btn {
  margin-top: -2px;
  margin-left: 72px;
  width: 100%;
}

.shop-currency {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #a48a62;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.shop-currency img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}

.shop-tab-content {
  flex: 1 1 auto;
  overflow-y: auto;
}

#tab-artefact {
  display: flex !important;
  /* Force flex over default block if needed, though usually class-based */
  flex-direction: column;
  overflow: hidden !important;
  /* Override lou-scroll */
  height: 100%;
}

/* Ensure hidden state is respected despite display:flex */
#tab-artefact.hidden {
  display: none !important;
}

.minister-tile {
  position: relative;
  background: url('img/shop/bgr_minister.gif') no-repeat 0 0;
  width: 551px;
  height: 210px;
  margin: 0 auto 10px auto;
  box-sizing: border-box;
  color: #F5E8C5;
}

.minister-banner {
  height: 40px;
  display: flex;
  align-items: flex-start;
  padding-left: 5px;
  color: #F5E8C5;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 2px #000;
  padding-top: 1px;
  background: none;
}

.minister-content {
  display: flex;
  gap: 12px;
  padding: 0 7px 0 25px;
  height: calc(100% - 40px);
  align-items: flex-start;
}

.minister-img-frame {
  position: absolute;
  top: 26px;
  left: 5px;
  width: 130px;
  height: 153px;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.minister-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.minister-info {
  margin-left: 116px;
  /* Offset for image + spacing */
  width: 420px;
  margin-top: -10px;
  height: 148px;
  color: #673420;
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
}

.minister-buttons {
  position: absolute;
  bottom: 7px;
  left: 139px;
  display: flex;
  gap: 6px;
}

.minister-buttons .tab-btn {
  flex: none;
}

.price-btn {
  min-width: 120px;
  max-width: 160px;
  width: auto;
  padding: 7px 0;
}

.price-icon {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  vertical-align: middle;
}

#recruitment-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 9px;
}

.recruitment-list-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-bottom: 5px;
}

#recruitment-window.tutorial-recruit {
  height: clamp(300px, 55vh, 560px);
  width: 677px;
}

#recruitment-window.tutorial-recruit .recruitment-list-scroll {
  max-height: calc(100% - 160px);
  min-height: 120px;
}

@media (max-width: 768px) {
  #recruitment-window.tutorial-recruit {
    width: 90vw;
  }
}

@media (max-width: 480px) {
  #recruitment-window.tutorial-recruit {
    width: 95vw;
  }
}

.city-rename-input {
  font-size: 16px;
  padding: 5px 8px;
  border: 2px solid #baa984;
  border-radius: 6px;
  width: 92%;
  box-sizing: border-box;
  margin: 8px auto;
  display: block;
}

@keyframes flash-warning {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(2);
  }
}


/* @keyframes flash-red removed */
/* .flash-red removed */

.flash {
  animation: flash-warning 1s infinite;
}

/* Fin du CSS pour la liste des bâtiments */
/*────────────────────────────────────────────────────────────────*/
/* Footer situé en bas de la zone de jeu */
#game-footer {
  position: absolute;
  left: 501px;
  right: 0;
  bottom: 3px;
  height: 32px;
  color: #e7dab7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 14px;
  z-index: 15;
}

#game-footer a {
  color: #e7dab7;
  text-decoration: none;
  margin-left: 12px;
}

#game-footer a:hover {
  text-decoration: underline;
}

/* Quest panel styles */
#panel-quete .quest-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: bold;
  padding-left: 2px;
  cursor: pointer;
}

#panel-quete .quest-arrow {
  font-size: 1.5em;
  margin-right: 2px;
  transition: transform 0.2s;
  color: #9d6c1e;
}

#panel-quete .quest-category.collapsed .quest-row {
  display: none;
}

#panel-quete .quest-category.collapsed .quest-arrow {
  transform: rotate(-90deg);
}

#panel-quete .quest-cat-icon {
  width: 26px;
  height: 26px;
  margin-right: 4px;
}

#panel-quete .quest-category {
  margin-bottom: 12px;
}

#panel-quete .quest-list {
  max-height: 100%;
  overflow-y: auto;
  padding-left: 27px;
  padding-right: 4px;
  top: 18px;
  position: relative;
  color: #673420;
}

#panel-quete .quest-row {
  padding: 8px 4px;
  cursor: pointer;
  position: relative;
  padding-left: 92px;
  color: #006cb1;
}

#panel-quete .quest-row::before {
  content: '\2022';
  position: absolute;
  left: 78px;
  color: #9d6c1e;
}

#panel-quete .quest-row.completed::before {
  content: '';
  background: url('img/quete-valide.png') no-repeat center / 100% 100%;
  width: 25px;
  height: 25px;
  left: 68px;
  top: 0px;
}

#panel-quete .quest-row:hover {
  background: rgba(0, 0, 0, 0.1);
}

#panel-quete .quest-empty {
  padding: 8px 4px 8px 92px;
  font-style: italic;
  color: rgba(0, 108, 177, 0.6);
}

#panel-reports .report-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  padding-left: 27px;
  padding-right: 27px;
  padding-bottom: 1rem;
  color: #673420;
  margin: 0 14px 18px 14px;
}

#panel-reports {
  --col-subject: 1fr;
  --col-date: minmax(80px, 100px);
}

#panel-reports .report-header,
#panel-reports .report-row {
  display: grid;
  grid-template-columns: 24px var(--col-subject) var(--col-date) 24px 24px;
  /* Remove global gap and alignment to handle separately */
  column-gap: 0;
}

#ci-reports .report-row {
  display: flex !important;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: #006cb1;
  min-height: 24px;
}

#ci-reports .report-row:hover {
  background: rgba(255, 255, 255, 0.4);
}

#panel-reports .report-header,
#panel-reports .report-row {
  grid-template-columns: 24px var(--col-subject) var(--col-date) 24px 24px;
}

#panel-reports .report-header {
  font-weight: bold;
  cursor: default;
  margin-left: 14px;
  margin-right: 14px;
  padding: 10px 0;
  /* Adjusted padding for grid layout */
  background: linear-gradient(to bottom, #fde9c7, #e9d1ad);
  border: 1px solid #9b7a4f;
  border-bottom: 1px solid #9b7a4f;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  align-items: stretch;
}

#panel-reports .report-header>div {
  display: flex;
  align-items: center;
  padding-left: 5px;
}

/* Specific grid layout for City Info Reports */
#city-info-window .report-header,
#ci-reports .report-row {
  display: grid !important;
  /* Checkbox, Subject, Date, Icon, Action/Margin */
  grid-template-columns: 24px 1fr 100px 24px 24px;
  align-items: center;
}

#panel-reports .report-header .resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  /* Wider hit area */
  cursor: col-resize;
  user-select: none;
  height: 100%;
  z-index: 10;
  /* Optional: visual indicator */
  border-right: 1px solid transparent;
  /* Or a visible color if requested */
}

#panel-reports .report-header .resizer:hover {
  border-right-color: #a08060;
}

#panel-reports .report-header>div {
  position: relative;
  display: flex;
  align-items: center;
  /* Vertically center text in the stretched cell */
  padding-left: 4px;
  /* Internal spacing */
}

/* Separators */
#panel-reports .report-header>div:first-child,
#panel-reports .report-header .subject-label,
#panel-reports .report-header #report-date-header {
  border-right: 1px solid #5e4b35;
  padding-right: 4px;
}

#panel-reports .report-row {
  cursor: pointer;
  color: #006cb1;
  align-items: center;
  /* Keep rows centered */
  min-height: 45px;
}

#panel-reports .report-header input[type="checkbox"],
#panel-reports .report-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

#panel-reports .share-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

#panel-reports .report-header .subject-label {
  padding-left: 26px;
}

#report-date-header {
  cursor: pointer;
}

#panel-reports .report-row .subject {
  position: relative;
  padding-left: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Date Column Overflow */
#panel-reports .report-row>div:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
  /* Match header separator spacing */
}

#panel-reports .report-row .subject::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

#panel-reports .report-row.attack .subject::before,
#panel-reports .report-row.pillage .subject::before,
#panel-reports .report-row.siege .subject::before,
#panel-reports .report-row.defense .subject::before,
#city-info-window #ci-city-reports-section .report-row.attack .subject::before,
#city-info-window #ci-city-reports-section .report-row.pillage .subject::before,
#city-info-window #ci-city-reports-section .report-row.siege .subject::before,
#city-info-window #ci-city-reports-section .report-row.defense .subject::before {
  background-image: url('img/icon_rapport_atak_vert.png');
}

#panel-reports .report-row.scout .subject::before,
#city-info-window #ci-city-reports-section .report-row.scout .subject::before {
  background-image: url('img/icon_rapport_éclaireur.png');
}

#panel-reports .report-row.raid .subject::before,
#city-info-window #ci-city-reports-section .report-row.raid .subject::before {
  background-image: url('img/icon_rapport_raid_vert.png');
}

#panel-reports .report-row.reinforce .subject::before,
#city-info-window #ci-city-reports-section .report-row.reinforce .subject::before {
  background-image: url('img/icon_rapport_renfort.png');
}

#panel-reports .report-row.reinforce-received .subject::before,
#city-info-window #ci-city-reports-section .report-row.reinforce-received .subject::before {
  background-image: url('img/icon rapport recu.png');
}

#panel-reports .report-row.trade-self .subject::before,
#city-info-window #ci-city-reports-section .report-row.trade-self .subject::before {
  background-image: url('img/icon_rapport_commerce.png');
}

#panel-reports .report-row.trade-other .subject::before,
#city-info-window #ci-city-reports-section .report-row.trade-other .subject::before {
  background-image: url('img/icon_rapport_commerce_joueur.png');
}

#panel-reports .report-row.alliance .subject::before,
#city-info-window #ci-city-reports-section .report-row.alliance .subject::before {
  background-image: url('img/icon_rapport_alliance.png');
}

#panel-reports .report-row.unread {
  font-weight: bold;
}

#panel-reports .report-row:hover {
  background: rgba(0, 0, 0, 0.1);
}

#reports-list.filter-shareable .report-row:not([data-shareable="true"]) {
  display: none;
}

#panel-social .social-tabs {
  margin-bottom: 8px;
}

#panel-social .social-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#panel-social .report-list-bg {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#panel-social .social-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 27px 8px 27px;
  color: #673420;
}

#panel-social .social-title-row h3 {
  margin: 0;
}

#panel-social .social-refresh-btn {
  font-size: 1rem;
}

#panel-social .social-header,
#panel-social .social-row {
  display: grid;
  grid-template-columns: 24px 26px minmax(140px, 1.2fr) minmax(140px, 1fr) 24px 24px;
  column-gap: 0;
  /* align-items: center;  <-- Removed here, will set individually if needed */
}

#panel-social .social-header {
  align-items: stretch;
  /* Ensure cells stretch for full-height borders */
}

#panel-social .social-row {
  align-items: center;
}

#panel-social .social-header {
  font-weight: bold;
  cursor: default;
  margin-left: 14px;
  margin-right: 14px;
  padding: 10px 49px 10px 27px;
  background: linear-gradient(to bottom, #fde9c7, #e9d1ad);
  border: 1px solid #9b7a4f;
  border-bottom: 1px solid #9b7a4f;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  color: #673420;
}

#panel-social .social-header>div {
  display: flex;
  align-items: center;
  padding-left: 4px;
  height: 100%;
  /* Ensure border spans full height */
}

#panel-social .social-header>div:not(:last-child) {
  border-right: 1px solid #5e4b35;
  padding-right: 4px;
}

#panel-social .social-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  padding-left: 27px;
  padding-right: 27px;
  padding-bottom: 1rem;
  color: #006cb1;
  margin: 0 14px 18px 14px;
}

#panel-social .social-row {
  min-height: 45px;
  color: #006cb1;
}

#panel-social .social-row:hover {
  background: rgba(0, 0, 0, 0.1);
}

#panel-social .social-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
}

#panel-social .social-status {
  width: 17px;
  height: 17px;
}

#panel-social .social-header-lock,
#panel-social .social-lock {
  display: flex;
  align-items: center;
  justify-content: center;
}

#panel-social .social-header-lock img,
#panel-social .social-lock img {
  width: 17px;
  height: 17px;
}

#panel-social .social-actions {
  display: flex;
  gap: 6px;
}

#panel-social .social-actions .tab-btn {
  flex: 1;
}

#panel-social .social-invitations-content {
  gap: 18px;
  margin: 0 27px 18px 27px;
  color: #673420;
  overflow-y: auto;
}

#panel-social .social-section-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #673420;
}

#panel-social .social-section-empty {
  margin: 0;
  color: #6b5640;
}

/* Invitation card styles */
#panel-social .social-invite-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background-color: #e2d0ad;
  border: 1px solid #8f744d;
  border-radius: 4px;
}

#panel-social .invite-card-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#panel-social .invite-card-right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

#panel-social .invite-card-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

#panel-social .invite-player-name {
  font-weight: 600;
  color: #006cb1;
  cursor: pointer;
}

#panel-social .invite-player-name:hover {
  text-decoration: underline;
}

#panel-social .invite-alliance {
  font-size: 0.9em;
  color: #006cb1;
  cursor: pointer;
}

#panel-social .invite-alliance:hover {
  text-decoration: underline;
}

#panel-social .invite-player-title {
  font-size: 0.85em;
  color: #673420;
  font-style: italic;
}

#panel-social .invite-date {
  font-size: 0.85em;
  color: #6b5640;
}

#panel-social .btn-accept-invite {
  padding: 4px 12px;
  background: linear-gradient(to bottom, #7cb342, #558b2f);
  border: 1px solid #33691e;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9em;
}

#panel-social .btn-accept-invite:hover {
  background: linear-gradient(to bottom, #8bc34a, #689f38);
}

#panel-social .btn-decline-invite {
  padding: 4px 12px;
  background: linear-gradient(to bottom, #e9d1ad, #d4b896);
  border: 1px solid #9b7a4f;
  border-radius: 4px;
  color: #673420;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9em;
}

#panel-social .btn-decline-invite:hover {
  background: linear-gradient(to bottom, #f0dcc0, #e2c9a8);
}

#panel-social .invite-status {
  font-size: 0.9em;
  color: #6b5640;
  font-style: italic;
}

/* Clickable styles for friend list */
#panel-social .social-name.clickable,
#panel-social .social-alliance.clickable {
  cursor: pointer;
}

#panel-social .social-name.clickable:hover,
#panel-social .social-alliance.clickable:hover {
  text-decoration: underline;
}

#panel-social .social-invite-form {
  margin-top: 6px;
}

#panel-social .social-invite-panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(to bottom, #fde9c7, #e9d1ad);
  border: 1px solid #9b7a4f;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#panel-social .social-invite-panel label {
  font-weight: 700;
  color: #673420;
}

#panel-social .social-invite-panel input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #9b7a4f;
  border-radius: 4px;
  background: #fff4dc;
  color: #673420;
  font-family: inherit;
  font-size: 0.95rem;
}

#panel-social .social-invite-panel input:focus {
  outline: none;
  border-color: #7e5c35;
  box-shadow: 0 0 0 1px rgba(126, 92, 53, 0.4);
}

#panel-social .social-invite-panel .tab-btn {
  min-width: 110px;
}

.report-footer {
  padding: 6px;
}

.report-footer .select-all {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 8px;
}

.report-footer .report-actions {
  display: flex;
  gap: 6px;
}

.report-footer .report-actions .tab-btn {
  flex: 1;
}

.report-footer .report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.report-footer .report-filters label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

#reports-window #report-object {
  position: relative;
  padding-left: 30px;
}

#reports-window #report-object::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

#reports-window #report-object.attack::before,
#reports-window #report-object.pillage::before,
#reports-window #report-object.siege::before,
#reports-window #report-object.defense::before {
  background-image: url('img/icon_rapport_atak_vert.png');
}

#reports-window #report-object.scout::before {
  background-image: url('img/icon_rapport_éclaireur.png');
}

#reports-window #report-object.raid::before {
  background-image: url('img/icon_rapport_raid_vert.png');
}

#reports-window #report-object.reinforce::before {
  background-image: url('img/icon_rapport_renfort.png');
}

#reports-window #report-object.reinforce-received::before {
  background-image: url('img/icon rapport recu.png');
}

#reports-window #report-object.trade-self::before {
  background-image: url('img/icon_rapport_commerce.png');
}

#reports-window #report-object.trade-other::before {
  background-image: url('img/icon_rapport_commerce_joueur.png');
}

#reports-window #report-object.alliance::before {
  background-image: url('img/icon_rapport_alliance.png');
}

/* Research panel styles (same as quest panel) */
#panel-research .research-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: bold;
  padding-left: 2px;
  cursor: pointer;
}

#panel-research .research-arrow {
  font-size: 1.5em;
  margin-right: 2px;
  transition: transform 0.2s;
  color: #c1897b;
}

#panel-research .research-category.collapsed .research-row {
  display: none;
}

#panel-research .research-category.collapsed .research-arrow {
  transform: rotate(-90deg);
}

#panel-research .research-cat-icon {
  width: 26px;
  height: 26px;
  margin-right: 4px;
}

#panel-research .research-category {
  margin-bottom: 12px;
}

#panel-research .research-list {
  max-height: 100%;
  overflow-y: auto;
  padding-left: 27px;
  padding-right: 7px;
  top: 18px;
  position: relative;
  color: #673420;
}

#panel-research .research-row {
  padding: 8px 4px;
  cursor: pointer;
  position: relative;
  padding-left: 92px;
  color: #006cb1;
}

#panel-research .research-row::before {
  content: '\2022';
  position: absolute;
  left: 78px;
  color: #9d6c1e;
}

#panel-research .research-row.completed::before {
  content: '';
  background: url('img/quete-valide.png') no-repeat center / 100% 100%;
  width: 25px;
  height: 25px;
  left: 68px;
  top: 0px;
}

#panel-research .research-row:hover {
  background: rgba(0, 0, 0, 0.1);
}

#quest-info-window {
  background: url('img/Quete de progression.png') center;
  background-size: cover;
  height: 540px;
  width: 676px;
}

#research-info-window {
  /* Dimensions similar to quest */
  width: 676px;
  height: 720px;
  /* Adjusted height if needed, keeping similar to original or quest */
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
}

#research-info-window .modal-banner {
  position: relative;
  top: -6px;
  z-index: 15;
}

.research-sep {
  /* Replace hr default styling with image */
  border: none;
  height: 2px;
  background: url('img/UI/séparation.png') no-repeat center center;
  margin: 10px 0;
  background-size: 100% 100%;
}

#research-info-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 11px;
  position: relative;
  overflow-y: auto;
  top: 11px;
}

#research-info-window .research-details {
  top: 27px;
  left: 134px;
  overflow-y: auto;
  white-space: pre-line;
  margin: 34px 7px 19px 4px;
  margin-right: 14px;
  flex: 1;
  min-width: 0;
  max-height: 611px;
}

#research-info-window .research-section {
  margin-bottom: 8px;
}

#research-info-window .research-subtitle {
  font-weight: bold;
  text-align: left;
  color: #673420;
}

#research-info-window .research-text {
  margin-left: 20px;
  color: #3d2e1f;
  white-space: pre-line;
}

#research-info-window .research-value {
  font-weight: bold;
}

#research-info-window .research-sep {
  width: 100%;
  margin: 10px 0;
}

#research-info-window .research-section.center {
  text-align: center;
}

#research-info-window .research-cost-table {
  margin: 10px auto;
  border-collapse: collapse;
}

#research-info-window .research-cost-table td {
  padding: 2px 28px;
  color: #3d2e1f;
}

#research-info-window .research-cost-table img {
  width: 50px;
  height: 50px;
}

#research-info-window .research-search-btn {
  width: 90%;
  margin: 12px auto 0 auto;
}

#quest-info-window .modal-body {
  background: transparent;
  display: flex;
  flex-direction: column;
  padding: 11px;
  position: relative;
  overflow-y: auto;
  top: 5px;
}

#quest-title {
  position: absolute;
  color: #f5e8c5;
  left: 101px;
  top: -3px;
  /* text-align: center; */
  font-weight: bold;
  /* margin-bottom: 8px; */
}

#research-title {
  position: absolute;
  color: #f5e8c5;
  left: 101px;
  top: -3px;
  font-weight: bold;
}

#quest-description {
  top: 27px;
  left: 134px;
  /*width: calc(100% - 188px);*/
  /*height: calc(100% - 160px);*/
  overflow-y: auto;
  white-space: pre-line;
  margin: 29px 21px 40px 121px;
  flex: none;
  max-height: 240px;
}

#quest-progress {
  text-align: center;
  font-weight: bold;
  margin: 21px auto 0 auto;
}

#quest-rewards {
  background: url('img/bloc_récompense.png') no-repeat center/100% 100%;
  width: 92%;
  margin: 21px auto 0 auto;
  padding: 8px 0 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reward-icons {
  display: flex;
  gap: 55px;
  margin-bottom: 8px;
}

#quest-city-msg {
  margin-bottom: 4px;
  text-align: center;
}

#quest-cap-warning {
  color: red;
  font-size: 0.9em;
  text-align: center;
  margin-bottom: 4px;
}

.reward-icon {
  position: relative;
  width: 40px;
  height: 40px;
}

/* Icône de récompense pour les ressources classiques */
.reward-icon-resource {
  position: relative;
  width: 34px;
  height: 34px;
}

.reward-icon img {
  width: 100%;
  height: 100%;
}

.reward-icon-resource img {
  width: 100%;
  height: 100%;
}

.reward-icon span {
  position: absolute;
  top: 50%;
  left: 150%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.1em;
  color: #673420;
  pointer-events: none;
}

.reward-icon-resource span {
  position: absolute;
  top: 50%;
  left: 180%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.1em;
  color: #673420;
  pointer-events: none;
}

#quest-claim-btn {
  margin: 1px auto 0 auto;
  min-width: 143px;
  max-width: 262px;
  width: auto;
  padding: 7px 6px;
  font-size: 1.08em;
  font-weight: bold;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  text-shadow: 0 1px 0 #35540b, 0 0 3px #fff8;
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  transition: box-shadow 0.12s, background 0.11s, transform 0.1s;
  cursor: pointer;
  outline: none;
  display: block;
}

#quest-claim-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#quest-claim-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

#quest-guide-banner {
  position: relative;
  margin: 0 6px 8px 6px;
}

#quest-guide-banner img {
  display: block;
  width: 100%;
}

#quest-show-guide-btn {
  position: absolute;
  top: 49%;
  left: 67%;
  transform: translate(-50%, -50%);
  width: 225px;
  height: 46px;
  min-width: 0;
  padding: 0 1.6em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08em;
  font-weight: bold;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  text-shadow: 0 1px 0 #35540b, 0 0 3px #fff8;
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  transition: box-shadow 0.12s, background 0.11s;
  cursor: pointer;
}

#quest-show-guide-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#quest-show-guide-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
}

/* Loading screen styles */
#loading-screen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 10000;
}

.loading-logo {
  width: 300px;
  max-width: 80%;
}

.loading-bar {
  width: 60%;
  max-width: 400px;
  height: 20px;
  border: 2px solid #7d6a4a;
  background: #e7d2a8;
  overflow: hidden;
}

.loading-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #dab248 0%, #e6c676 60%, #be9540 100%);
}

.loading-text {
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
}

/* Purify tab */
.purify-scroll {
  height: 100%;
  overflow-y: auto;
}

.purify-icon {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin: 0 39px;
}

.purify-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 86px;
  padding: 3px 2px;
  background: linear-gradient(to bottom,
      rgba(241, 220, 191, 0.85),
      rgba(227, 195, 154, 0.85));
  border: 2.5px solid rgba(186, 169, 132, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  color: #5d4314;
}

.purify-input::-webkit-inner-spin-button,
.purify-input::-webkit-outer-spin-button {
  margin: 0;
}

/* Layout for icons and labels in the purify table */
.purify-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.purify-icon-wrapper .resource-name {
  margin-top: 2px;
  font-size: 0.8em;
  text-align: center;
}

/* Layout for purify quantity cells */
.purify-input-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-left: 23px;
  gap: 4px;
}

/* Max buttons for purify inputs */
.purify-max-btn {
  font-size: 13px;
  padding: 3px 2px;
  width: 86px;
  background: linear-gradient(to bottom,
      rgba(241, 220, 191, 0.85),
      rgba(227, 195, 154, 0.85));
  border: 2.5px solid rgba(186, 169, 132, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  color: #5d4314;
  margin-left: 2px;
}

/* Align row headers in purify table to the left */
#purify-table th[scope="row"] {
  text-align: left;
}

/* Purify all button inside trade tab */
.purify-all-btn {
  width: 84%;
  margin: 0 auto;
}

.purify-all-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Spacing rules for the purify resources table */
#purify-table {
  border-collapse: separate;
  border-spacing: 0;
}

#purify-table tr {
  border-bottom: 8px solid transparent;
}

#purify-input-row {
  border-bottom: 0;
}

#purify-table tr:last-child {
  border-bottom: none;
}

#purify-table td,
#purify-table th {
  padding-top: 6px;
  padding-bottom: 6px;
}

#purify-required-row td,
#purify-total-row td {
  text-align: center;
}

/* Trade send tab styles */
.trade-cap-title,
.trade-target-title,
.trade-res-title {
  margin-left: 12px;
  margin-top: 8px;
  margin-bottom: 4px;
  color: #3f2216;
}

.trade-cap-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px 8px;
  margin-left: 12px;
}

.trade-coord-bar {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  gap: 4px;
  z-index: 16;
}

.trade-coord-bar input {
  width: 46px;
  text-align: center;
  border: 1px solid #666;
  border-radius: 4px;
  background: #f5e8c5;
  color: #333;
  padding: 2px;
}

.trade-coord-bar .coord-eye-btn {
  width: 28px;
  height: 28px;
  background: url('img/eyesicone.webp') no-repeat center center;
  background-size: contain;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.trade-target-line {
  display: flex;
  align-items: center;
  gap: 70px;
  margin-left: 12px;
  margin-bottom: 4px;
}

.trade-player {
  margin-right: 56px;
}

.trade-route-line span:first-of-type {
  margin-right: 6px;
}

.trade-route-line {
  display: flex;
  align-items: center;
  gap: 90px;
  margin-left: 0px;
  margin-bottom: 4px;
}

.trade-select {
  margin-left: 12px;
  margin-top: 4px;
  padding: 8px 10px 7px 10px;
  font-size: 14px;
  min-width: 220px;
  background: linear-gradient(180deg, #888 0%, #777 50%, #666 100%);
  color: #e7dab7;
  border: 2px solid #666;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  outline: none;
  appearance: none;
}

.trade-select:disabled {
  background: linear-gradient(180deg, #6a6a6a 0%, #5d5d5d 50%, #4b4b4b 100%);
  border: 2px solid #555;
  box-shadow: 0 1px 0 #8a8a8a inset, 0 3px 7px #020202, 0 2px 0 #2c2c2c;
  color: #c8c8c8;
  cursor: not-allowed;
}

/* Green styled variant used in trade selects */
.trade-select-green {
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  border: 2px solid #4f7219;
}

.trade-select-green:disabled {
  background: linear-gradient(180deg, #5d5d5d 0%, #545454 50%, #474747 100%);
  border: 2px solid #535353;
  color: #c8c8c8;
  box-shadow: 0 1px 0 #7a7a7a inset, 0 3px 7px #020202, 0 2px 0 #2c2c2c;
}

.trade-select-green:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.trade-select-green:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

/* Ensure the route selector uses the same visual style as the city selector */
#trade-route-select {
  min-width: 220px;
  margin-left: 12px;
  margin-top: 4px;
  padding: 8px 10px 7px 10px;
  font-size: 14px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  outline: none;
  appearance: none;
}

#trade-route-select:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#trade-route-select:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

#trade-route-select option {
  background-color: #2f4a0a;
}

.trade-res-grid {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  row-gap: 6px;
  column-gap: 6px;
  margin-right: 8px;
  margin-left: 12px;
  align-items: center;
  vertical-align: top;
}

.trade-palace-disabled {
  opacity: 0.45;
  filter: grayscale(0.75);
  cursor: default !important;
}

.trade-palace-disabled img {
  filter: grayscale(1);
}

.trade-res-input.trade-palace-disabled {
  background: linear-gradient(to bottom,
      rgba(200, 200, 200, 0.35),
      rgba(170, 170, 170, 0.35));
}

.trade-icon img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.trade-res-input {
  width: 120px;
  padding: 3px 2px;
  background: linear-gradient(to bottom,
      rgba(241, 220, 191, 0.85),
      rgba(227, 195, 154, 0.85));
  border: 2.5px solid rgba(186, 169, 132, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  color: #5d4314;
}

.trade-max-btn {
  font-size: 13px;
  padding: 3px 2px;
  width: 120px;
  background: linear-gradient(to bottom,
      rgba(241, 220, 191, 0.85),
      rgba(227, 195, 154, 0.85));
  border: 2.5px solid rgba(186, 169, 132, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  color: #5d4314;
}

.trade-predef-grid {
  display: inline-grid;
  grid-template-columns: repeat(8, auto);
  gap: 4px;
  margin-bottom: 6px;
  vertical-align: top;
  row-gap: 18px;
  column-gap: 7px;
}

.trade-val-btn {
  font-size: 12px;
  padding: 2px;
  background: linear-gradient(to bottom,
      rgba(241, 220, 191, 0.4),
      rgba(227, 195, 154, 0.4));
  border: 2px solid rgba(186, 169, 132, 0.5);
  border-radius: 3px;
  cursor: pointer;
  color: #5d4314;
}

.trade-warning {
  color: #fb1300;
  text-align: center;
  margin: 8px 0;
}

.trade-capacity-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.trade-capacity-icon {
  width: 18px;
  height: 18px;
}

.trade-input-over-capacity {
  border-color: #fb1300;
  color: #b00000;
  box-shadow: 0 0 4px rgba(251, 19, 0, 0.4);
}

.trade-final {
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
}

/* Increased width for the trade send confirmation button */
.trade-confirm-btn {
  width: 190px;
}

#trade-send-btn {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Disabled state for trade button */
#trade-send-btn:disabled {
  opacity: 0.5;
  background: #888;
  cursor: not-allowed;
}

/* Highlight the viewport when the active city is under attack */
@keyframes incoming-attack-glow {

  0%,
  100% {
    box-shadow: 0 0 10px 4px rgba(255, 0, 0, 0.2) inset;
  }

  50% {
    box-shadow: 0 0 25px 8px rgba(255, 0, 0, 0.7) inset;
  }
}

body.incoming-attack-alert {
  animation: incoming-attack-glow 3s ease-in-out infinite;
}

/* ───────────────────────────────────────────────────────────── */
/*  Report top section (used by scout/attack/siege)              */
/* ───────────────────────────────────────────────────────────── */
.report-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .report-top {
    grid-template-columns: 1fr;
  }
}

/* Shared troop force table styling */
.troop-force-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  table-layout: fixed;
}

.troop-force-table caption {
  font-weight: bold;
  margin-bottom: 4px;
}

.troop-force-table th,
.troop-force-table td {
  padding: 4px 6px;
  text-align: center;
  border: none;
}

.troop-force-table th:not(:first-child),
.troop-force-table td:not(:first-child) {
  border-left: 1px solid #84632b;
}

.troop-force-table tr:not(:first-child) th,
.troop-force-table tr:not(:first-child) td {
  border-top: 1px solid #84632b;
}

.troop-force-table th:first-child,
.troop-force-table td:first-child {
  text-align: left;
}

.force-summary {
  padding-left: 0;
  border-left: none;
}

.scout-night-protection,
.scout-morale,
.night-protection,
.morale {
  text-align: center;
  margin: 10px 0;
}

.scout-divider,
.force-summary-divider {
  margin: 8px 0;
  border: none;
  border-top: 1px solid #84632b;
}

.force-summary-title {
  margin-bottom: 6px;
}

.force-summary-row {
  display: flex;
  justify-content: space-between;
  margin: 2px 0;
  padding-right: 18px;
}

.scout-targets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 8px;
  position: relative;
}

.scout-targets-title {
  margin-top: 10px;
}

.scout-target {
  position: relative;
  padding-right: 22px;
}

.scout-target::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("img/quete-valide.png") no-repeat center/contain;
}

.scout-target+.scout-target::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: #84632b;
}

.scout-target.undetected::after {
  background-image: url("img/invalide.png");
}

#reports-window .scout-building-list .row-item,
#reports-window .siege-building-list .row-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  text-align: center;
}

#reports-window .scout-building-list .row-item img,
#reports-window .scout-report-building-list .row-item img,
#reports-window .siege-building-list .row-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 3px;
  border: solid 2px #dac090;
  background: #b5a893;
  box-shadow: 0 1px 3px #baa96949;
}

/* Tutorial overlay */
.tutorial-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  pointer-events: none;
}

.tutorial-container>* {
  pointer-events: auto;
}

.tutorial-container.collapsed {
  /* Allow interaction with collapsed tutorial elements */
  pointer-events: auto;
}

.tutorial-container.collapsed #tutorial-skip,
.tutorial-container.collapsed #tutorial-continue {
  pointer-events: auto;
}

.tutorial-container.collapsed #tutorial-image {
  visibility: visible;
  opacity: 1;
}

.tutorial-container:not(.collapsed) #tutorial-image {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body.tutorial-ui-paused #tutorial-container,
body.tutorial-ui-paused #tutorial-image,
body.tutorial-ui-paused #tutorial-banner,
body.tutorial-ui-paused #tutorial-toggle,
body.tutorial-ui-paused #tutorial-continue,
body.tutorial-ui-paused #tutorial-skip,
body.tutorial-ui-paused #tutorial-reward {
  display: none !important;
}

.tutorial-container.collapsed #tutorial-toggle {
  pointer-events: auto;
  visibility: visible;
}

.tutorial-container .fenetre-tuto {
  display: block;
  max-width: none;
  width: 750px;
}

.respawn-notice {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none;
}

.respawn-notice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.respawn-notice .tutorial-container {
  position: relative;
  top: 0;
  left: 0;
  pointer-events: auto;
}

.respawn-notice-content h2 {
  text-align: center;
  margin-top: 0;
}

.respawn-notice-message {
  text-align: center;
  margin: 36px 60px 24px 60px;
  color: #71603b;
}

.respawn-notice .tutorial-btn-intro {
  display: block;
  margin: 12px auto 0 auto;
}

.tutorial-content {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #000;
}

.tutorial-content h2 {
  text-align: left;
  margin-bottom: 19px;
  margin-top: -9px;
  font-size: 18px;
  color: #f5e8c5;
}

.tutorial-content p {
  margin: 26px 0px;
  font-size: 16px;
  line-height: 1.2;
  margin-left: 216px;
  color: #71603b;
}

#tutorial-reward {
  margin-left: 130px;
  font-size: 16px;
  color: #71603b;
  display: flex;
  align-items: center;
  gap: 4px;
}

#tutorial-reward strong {
  font-weight: bold;
  margin-right: 4px;
}

.tutorial-btn,
.tutorial-btn-intro {
  position: absolute;
  width: 173px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  padding: 8px 20px 7px 20px;
  font-size: 16px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  transition: background 0.11s, box-shadow 0.12s, transform 0.1s;
}

.tutorial-btn {
  bottom: -10px;
  right: 6px;
}

.tutorial-btn-intro {
  bottom: 0px;
  right: 18px;
}

.tutorial-btn:hover,
.tutorial-btn-intro:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.tutorial-btn:active,
.tutorial-btn-intro:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

.tutorial-skip {
  position: absolute;
  bottom: -1px;
  right: 226px;
  color: #4e6b96;
  cursor: pointer;
}

.tutorial-confirm-title {
  color: #F5E8C5;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 8px;
  left: 20px;
}

.tutorial-confirm {
  position: absolute;
  top: 331px;
  left: 20px;
  width: 624px;
  height: 218px;
  padding: 50px 20px 20px;
  background: url('img/Tutoriel/quitter le tuto fenetre.png') center/cover no-repeat;
  color: #000;
  z-index: 1001;
}

.tutorial-confirm p {
  text-align: left;
  margin: 0;
}

.tutorial-confirm-buttons {
  position: absolute;
  bottom: 11px;
  right: 0px;
  display: flex;
  gap: 0px;
}

.tutorial-confirm button {
  margin: 0 10px;
  padding: 8px 20px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  cursor: pointer;
}

.tutorial-confirm button:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#tutorial-banner {
  position: fixed;
  top: 0;
  left: 556px;
  width: 773px;
  height: 555px;
  background: url("img/Tutoriel/bandeau%20tuto.png") center center no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f5e8c5;
  pointer-events: none;
}

#tutorial-banner * {
  pointer-events: auto;
}

#tutorial-banner.tuto-complete::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 68%;
  transform: translateY(-50%);
  width: 43px;
  height: 43px;
  background: url("img/Tutoriel/tuto_ok.png") center/contain no-repeat;
}

#tutorial-toggle {
  position: fixed;
  top: 252px;
  left: 1219px;
  width: 37px;
  height: 50px;
  border: 2px solid #4f7219;
  border-radius: 6px;
  cursor: pointer;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  transition: box-shadow 0.12s, background 0.11s, transform 0.1s;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

#tutorial-toggle:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
}

#tutorial-toggle:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

/* Dame Lyanna tutorial overlay */
.tutorial-container .dame-lyanna-tuto {
  display: block;
  max-width: none;
  width: 750px;
}

.dame-lyanna-content {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #000;
}

.dame-lyanna-content h2 {
  text-align: left;
  margin-bottom: 19px;
  margin-left: 101px;
  margin-top: -9px;
  font-size: 18px;
  color: #f5e8c5;
}

.dame-lyanna-content p {
  margin: 26px 0px;
  font-size: 16px;
  line-height: 1.2;
  margin-left: 130px;
  color: #71603b;
}

.dame-lyanna-btn {
  position: absolute;
  bottom: 5px;
  right: 18px;
  width: 173px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  padding: 8px 20px 7px 20px;
  font-size: 16px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  transition: background 0.11s, box-shadow 0.12s, transform 0.1s;
}

.dame-lyanna-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.dame-lyanna-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

.guide-next-btn {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  padding: 8px 20px 7px 20px;
  font-size: 16px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  transition: background 0.11s, box-shadow 0.12s, transform 0.1s;
}

.guide-next-btn:hover:not(.disabled) {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.guide-next-btn:active:not(.disabled) {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateX(-50%) translateY(2px);
}

.guide-next-btn.disabled {
  background: linear-gradient(180deg, #9e9e9e 0%, #8e8e8e 50%, #7e7e7e 100%);
  border-color: #9e9e9e;
  color: #e7dab7;
  box-shadow: 0 1px 0 #b8b8b8 inset, 0 3px 7px #555;
  cursor: default;
  pointer-events: none;
}

.daily-reward-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.3);
  z-index: 200000;
  pointer-events: all;
}

.blurred {
  filter: blur(4px);
}

/* ───────────────────────────────────────────────────────────── */
/*  Daily Reward Window - Reconstructed "Piece by Piece"          */
/* ───────────────────────────────────────────────────────────── */
#daily-reward-container.daily-reward {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200010;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Width is determined by content now */
  width: auto;
  height: auto;
}

/* --- HEADER --- */
.dr-header {
  display: flex;
  align-items: flex-end;
  /* Align bottom to connect with body */
  justify-content: center;
  width: 100%;
  margin-bottom: -14px;
  /* Slight overlap to prevent gaps */
  position: relative;
  z-index: 5;
}

.dr-hdr-left {
  width: 128px;
  /* Adjust based on image or let auto? Image is daily_reward_hdr_lft.png */
  height: 37px;
  /* arbitrary default, will be set by bg size */
  background: url('img/Daily_reward/daily_reward_hdr_lft.png') no-repeat right bottom;
}

.dr-hdr-mid {
  /* daily_reward_hdr_sclr.png - stretchable */
  background: url('img/Daily_reward/daily_reward_hdr_sclr.png') repeat-x bottom;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  padding: 0 5px;
}

.daily-reward-title {
  font-size: 18px;
  color: #f5e8c5;
  margin: 0;
  white-space: nowrap;
  text-shadow: 1px 1px 2px #000;
}

.dr-hdr-right {
  width: 128px;
  height: 37px;
  background: url('img/Daily_reward/daily_reward_hdr_rgt.png') no-repeat left bottom;
  transform: translateY(1px);
}

/* --- BODY ROW --- */
.dr-body-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
}

.dr-bgr-left {
  width: 20px;
  /* daily_reward_bgr_left.png approx layout width */
  background: url('img/Daily_reward/daily_reward_bgr_left.png') no-repeat right top;
  background-size: cover;
  /* Ensure it covers height */
}

.dr-bgr-right {
  width: 20px;
  /* daily_reward_bgr_right.png */
  background: url('img/Daily_reward/daily_reward_bgr_right.png') no-repeat left top;
  background-size: cover;
}

.dr-bgr-arr {
  width: 30px;
  height: 496px;
  /* daily_reward_bgr_mid_arr.png */
  background: url('img/Daily_reward/daily_reward_bgr_mid_arr.png') no-repeat center center;
  background-size: 100% 100%;
}

.dr-bgr-mid {
  /* daily_reward_bgr_mid.png */
  background: url('img/Daily_reward/daily_reward_bgr_mid.png') no-repeat center top;
  background-size: 100% 100%;
  width: 146px;
  /* Adjust based on content */
  min-height: 400px;
  /* Adjust based on asset */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Content inside the column */
.day-column {
  /* ensure correct spacing/alignment provided by parent flex */
}

/* The semi-transparent/framed background for the day content: day_container_normal.png */
.day-inner-bg {
  width: 162px;
  /* Matches day_container_normal.png approx */
  height: 355px;
  /* Adjust manually as requested */
  background: url('img/Daily_reward/day_container_normal.png') no-repeat center center;
  background-size: 100% 100%;
  /* Stretch to fit manually set height */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  position: relative;
  margin-top: 47px;
  /* Push down a bit from top of bgr_mid frame */
}

/* Highlight state - toggled via JS usually */
.day-column.active .day-inner-bg {
  background: url('img/Daily_reward/day_container_hilight.gif') no-repeat center center;
  background-size: 100% 100%;
  width: 162px;
  height: 355px;
}

.day-inner-bg h3 {
  color: #eee1c0;
  margin-bottom: 20px;
  margin-top: 7px;
  font-size: 16px;
  text-shadow: 1px 1px 2px #000;
}

/* --- ITEM FRAMES --- */
/* bgr_item_frame.png on top of daily_reward_bgr_mid */
.reward-frames-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  /* Take up available space */
}

.dr-item-frame {
  width: 72px;
  /* bgr_item_frame.png size approx */
  height: 80px;
  background: url('img/Daily_reward/bgr_item_frame.png') no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dr-item-frame img.reward-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Specific adjustments for 2 or 3 items to fit in the height */
.frames-3 .dr-item-frame {
  width: 71px;
  height: 71px;
}

.frames-3 .dr-item-frame img.reward-img {
  width: 64px;
  height: 64px;
}

/* Status text at bottom of column */
.dr-status-text {
  color: #a8d655;
  /* Greenish for claim? or default text color */
  font-size: 13px;
  text-align: center;
  margin-bottom: 15px;
  min-height: 20px;
}

.active .dr-status-text {
  font-weight: bold;
  color: #4eff4e;
}

.final-text {
  color: #554011;
  font-size: 12px;
}

/* --- FOOTER --- */
.dr-footer {
  margin-top: -64px;
  /* Pull up to overlap bottom of window */
  z-index: 10;
  position: relative;
}

#daily-claim-btn.claim-btn {
  /* Reusing existing style if possible or defining new */
  width: 232px;
  height: 30px;
  font-size: 16px;
  font-weight: bold;
  /* Use defaults from .tab-btn where possible, just override size */
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#daily-claim-btn.claim-btn:hover {
  filter: brightness(1.1);
}

.daily-reward-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200000;
}

/* Hide helper */
.hidden {
  display: none !important;
}

.daily-reward-day p.green {
  color: #00ad00;
  font-weight: bold;
}

@keyframes rainbow-border {
  0% {
    box-shadow: 0 0 4px 2px #ff0000;
  }

  25% {
    box-shadow: 0 0 4px 2px #ffff00;
  }

  50% {
    box-shadow: 0 0 4px 2px #00ff00;
  }

  75% {
    box-shadow: 0 0 4px 2px #00ffff;
  }

  100% {
    box-shadow: 0 0 4px 2px #ff00ff;
  }
}

.daily-reward-day.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.daily-report-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  z-index: 200000;
  /* Above any panel overlays and HUD elements */
  pointer-events: all;
}

#daily-report-container.daily-report {
  position: fixed;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 92vw);
  height: min(88vh, 760px);
  z-index: 200010;
  /* Keep the window above the dimmed overlay */
  display: flex;
  justify-content: center;
  align-items: center;
}

.daily-report-window {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.daily-report-inner {
  position: absolute;
  top: 3%;
  left: 7%;
  right: 7%;
  bottom: 13%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.daily-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -12px;
}

.daily-report-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #f5e8c5;
}

.daily-report-close {
  width: 28px;
  height: 28px;
  border: none;
  background-color: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background-image: url('img/Bouton_close/button-close.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-right: -39px;
  position: relative;
  outline: none;
}

.daily-report-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-image: url('img/Bouton_close/icon_close_btn_large.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.daily-report-close:hover {
  background-image: url('img/Bouton_close/button-close-hovered.png');
}

.daily-report-close:active {
  background-image: url('img/Bouton_close/button-close-pressed.png');
}

.daily-report-close:focus {
  background-image: url('img/Bouton_close/button-close-focused.png');
}

.daily-report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: -1px;
}

.daily-report-maintenance {
  background: url('img/bandeau_maintenance.png');
  color: #ffffff;
  background-size: contain;
  padding: 9px 5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.daily-report-tab {
  flex: 1 0 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px 6px;
  border: 2px solid #4b3620;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #c0a68a 0%, #9d8468 100%);
  color: #f5e8c5;
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-shadow: 0 1px 1px rgba(19, 10, 4, 0.55);
}

.daily-report-tab+.daily-report-tab {
  margin-left: 6px;
}

.daily-report-tab.active {
  background: linear-gradient(180deg, #e6d5b5 0%, #c9ac84 100%);
  color: #3b2512;
}

.daily-report-tab:not(.active) {
  opacity: 0.95;
}

.daily-report-tab:not(.active):hover {
  background: linear-gradient(180deg, #d9c1a0 0%, #b29472 100%);
  color: #fff2d6;
}

.daily-report-body {
  flex: 1;
  min-height: 0;
}

.daily-report-scroll {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  overflow-y: auto;
  padding-right: 6px;
}

.daily-report-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.daily-report-announcement-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.daily-report-announcement-main,
.daily-report-announcement-extra {
  flex: 1;
  width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.daily-report-section--announcement {
  --daily-report-width: 270px;
}

.daily-report-section--alliance,
.daily-report-section--empire {
  --daily-report-width: 420px;
}

.daily-report-banner-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.daily-report-banner-row .daily-report-banner {
  flex: 1 1 auto;
}

.daily-report-announcement-layout .daily-report-banner {
  width: 100% !important;
}

.daily-report-section--announcement .daily-report-section-content {
  width: 100% !important;
}

.daily-report-banner {
  width: min(var(--daily-report-width, 360px), 100%);
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #f5e8c5;
  text-shadow: 0 2px 4px rgba(12, 6, 2, 0.6);
  padding: 0 12px;
  box-sizing: border-box;
}

.daily-report-banner--announcement {
  height: 30px;
  background-image: url('img/banner annonce alliance rapport quotidien-artguru.png');
}

.daily-report-banner--alliance,
.daily-report-banner--empire {
  background-image: url('img/banner annonce alliance rapport quotidien-artguru.png');
  width: 100%;
}

.daily-report-section-content {
  width: min(var(--daily-report-width, 360px), 100%);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: #4a1f14;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: none;
}

.daily-report-section-content--announcement-extra {
  width: 100%;
}

.daily-report-sub-banner {
  width: min(var(--daily-report-width, 360px), 100%);
  height: 32px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.daily-report-sub-banner--alliance {
  background-image: url('img/Bandeau rapport quotidient new membre alliance.png');
  width: 100%;
  height: 63px;
}

.daily-report-sub-banner--empire {
  background-image: url('img/Bandeau rapport quotidient new empire.png');
  width: 100%;
  height: 63px;
}

.daily-report-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(var(--daily-report-width, 360px), 100%);
  color: #f5e8c5;
}

.daily-report-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
}

.daily-report-time {
  font-weight: 600;
  color: #4a1f14;
  min-width: 74px;
}

.daily-report-text {
  flex: 1;
  color: #4a1f14;
}

.daily-report-empty {
  font-style: italic;
  color: #4a1f14;
}

/* Alliance panel actions and tabs */
.alliance-actions {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 8px 0;
  padding: 0 6px;
}

.alliance-actions .tab-btn {
  margin: 0;
  flex: 1 1 0;
  width: auto;
  height: auto;
  padding: 7px 12px;
  white-space: nowrap;
}

.alliance-tabs {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.alliance-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.alliance-tab-btns {
  display: flex;
  margin-bottom: 8px;
  flex: 0 0 auto;
  border-bottom: 2px solid #444444;
}

.alliance-tab-btn {
  padding: 4px 10px;
  margin-right: 4px;
  border: 2px solid #444;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #c2ab97, #a2906e);
  cursor: pointer;
  font-size: 14px;
}

.alliance-tab-btn.active {
  background: #dec9a5;
  border-bottom: 2px solid #dec9a5;
}

.alliance-tab-content {
  /* placeholder for content styling */
}

#panel-alliance #alliance-diplomacy {
  padding: 8px 14px 14px;
  color: #4f2a18;
}

#panel-alliance .alliance-diplomacy-groups {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: 'Cinzel', serif;
}

#panel-alliance .alliance-diplomacy-group h3 {
  margin: 0;
  color: #6e2f1c;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.05;
}

#panel-alliance .alliance-diplomacy-group p {
  margin: 8px 0 0 14px;
  color: #3e3228;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

/* Mail overlay styles */
#panel-mail {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#panel-mail .mail-overlay-bg {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto;
}

#panel-mail .interface-banner {
  margin-bottom: 12px;
}

#panel-mail .mail-overlay-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 8px 8px;
  color: #3c1f0c;
  font-family: 'Cinzel', serif;
  position: relative;
}

#panel-mail .mail-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#panel-mail .mail-tab-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

#panel-mail .mail-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid #a46e35;
  background: linear-gradient(180deg, #fff6e5 0%, #f0dfc1 100%);
  color: #4b2b11;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 3px rgba(0, 0, 0, 0.25);
  text-transform: none;
  text-align: left;
}

#panel-mail .mail-tab-btn span {
  flex: 1 1 auto;
}

#panel-mail .mail-tab-btn::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: url('img/icon_mail_folder_open_small.png') no-repeat center/contain;
}

#panel-mail .mail-tab-btn.active {
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  border-color: #1e561b;
  color: #f6e9c6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px rgba(49, 114, 43, 0.25);
}

#panel-mail .mail-tab-btn.active::before {
  filter: brightness(1.1);
}

#panel-mail .mail-tab-btn:not(.active):hover {
  background: linear-gradient(180deg, #fff1d3 0%, #ead2a3 100%);
}

#panel-mail .mail-compose-btn {
  align-self: center;
  padding: 6px 24px;
  min-width: 82%;
  border-radius: 6px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  border: 1px solid #4f7219;
  color: #f6e9c6;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 0 #a89e6f, 0 3px 7px rgba(7, 37, 0, 0.45), 0 2px 0 #35540b;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

#panel-mail .mail-compose-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#panel-mail .mail-table-container {
  flex: 0 1 320px;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  background: rgba(255, 248, 228, 0.85);
  border: 1px solid rgba(121, 85, 41, 0.5);
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(64, 36, 12, 0.15);
}

#panel-mail .mail-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

#panel-mail .mail-list thead {
  background: linear-gradient(180deg, rgba(168, 121, 57, 0.4) 0%, rgba(124, 80, 32, 0.4) 100%);
  color: #2f1605;
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 2px 0 rgba(47, 22, 5, 0.35);
}

#panel-mail .mail-list thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #caa264 0%, #a57836 100%);
}

#panel-mail .mail-list th,
#panel-mail .mail-list td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(123, 79, 33, 0.35);
  font-family: 'Lato', sans-serif;
  color: #3f2a1a;
}

#panel-mail .mail-list th {
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#panel-mail .mail-list td {
  background: rgba(255, 252, 243, 0.65);
}

#panel-mail .mail-list tr:nth-child(even) td {
  background: rgba(249, 239, 214, 0.75);
}

#panel-mail .mail-list tr.unread td {
  font-weight: 700;
  color: #281208;
}

#panel-mail .mail-col-select {
  width: 36px;
}

#panel-mail .mail-actions {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#panel-mail .mail-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #432413;
  cursor: pointer;
  user-select: none;
  margin-left: 3px;
}

#panel-mail .mail-select-all input {
  width: 18px;
  height: 18px;
  accent-color: #3b8c32;
}

#panel-mail .mail-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 41px;
}

#panel-mail .mail-action-btn {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid #4f7219;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #f6e9c6;
  box-shadow: inset 0 1px 0 #a89e6f, 0 3px 7px rgba(7, 37, 0, 0.45), 0 2px 0 #35540b;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  transition: background 0.2s ease, color 0.2s ease;
}

#panel-mail .mail-action-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#panel-mail .mail-action-btn:disabled {
  background: linear-gradient(180deg, #d7d2c8 0%, #b8b1a6 100%);
  border-color: #9d968b;
  color: #6d5c4c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.2);
  cursor: default;
}

#mail-compose-window {
  width: 720px;
  height: 640px;
  user-select: text;
}

#mail-compose-window .modal-banner {
  cursor: move;
}

#mail-compose-window .modal-title {
  font-family: 'Cinzel', serif;
}

#mail-compose-window .mail-compose-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(210, 183, 132, 0.98) 0%, rgba(250, 238, 205, 0.95) 55%, rgba(241, 223, 188, 0.97) 100%);
  color: #2f1a0d;
  font-family: 'Lato', sans-serif;
}

#mail-compose-window .mail-compose-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
}

#mail-compose-window .mail-compose-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  #mail-compose-window .mail-compose-fields {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

#mail-compose-window .mail-compose-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
}

#mail-compose-window .mail-compose-field label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4a2e16;
}

#mail-compose-window .mail-compose-field input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(124, 80, 32, 0.6);
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.95rem;
  color: #2a1d10;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#mail-compose-window .mail-recipient-wrapper {
  position: relative;
}

#mail-compose-window .mail-recipient-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  background: rgba(255, 252, 238, 0.98);
  border: 1px solid rgba(121, 85, 41, 0.6);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(36, 18, 4, 0.25);
  z-index: 10;
}

#mail-compose-window .mail-recipient-suggestions li {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #3a2514;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#mail-compose-window .mail-recipient-suggestions li .mail-suggestion-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d190c;
}

#mail-compose-window .mail-recipient-suggestions li .mail-suggestion-meta {
  font-size: 0.75rem;
  color: rgba(58, 37, 20, 0.65);
}

#mail-compose-window .mail-recipient-suggestions li:hover,
#mail-compose-window .mail-recipient-suggestions li.active {
  background: linear-gradient(180deg, rgba(189, 143, 68, 0.25) 0%, rgba(189, 143, 68, 0.45) 100%);
}

#mail-compose-window .mail-compose-toolbar-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  #mail-compose-window .mail-compose-toolbar-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
}

#mail-compose-window .mail-compose-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255, 244, 216, 0.95) 0%, rgba(229, 201, 146, 0.85) 100%);
  border: 1px solid rgba(139, 92, 45, 0.6);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#mail-compose-window .mail-compose-toolbar button {
  min-width: 32px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid rgba(118, 78, 32, 0.75);
  background: linear-gradient(180deg, #fdf5dc 0%, #e7c88f 100%);
  color: #4a2d12;
  font-weight: 700;
  font-size: 0.85rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

#mail-compose-window .mail-compose-toolbar button:hover {
  background: linear-gradient(180deg, #fff9ec 0%, #f3d7a7 100%);
}

#mail-compose-window .mail-compose-toolbar button.active {
  background: linear-gradient(180deg, #3b660e 0%, #486411 100%);
  border-color: #314c0d;
  color: #f6ebc9;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

#mail-compose-window .mail-toolbar-separator {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(121, 82, 35, 0.1), rgba(121, 82, 35, 0.6), rgba(121, 82, 35, 0.1));
  margin: 0 4px;
}

#mail-compose-window .mail-compose-toolbar-options {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 10px;
  align-items: center;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255, 244, 216, 0.95) 0%, rgba(229, 201, 146, 0.85) 100%);
  border: 1px solid rgba(139, 92, 45, 0.6);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#mail-compose-window .mail-compose-toolbar-options label {
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #4a2e16;
  letter-spacing: 0.04em;
}

#mail-compose-window .mail-compose-toolbar-options select,
#mail-compose-window .mail-compose-toolbar-options input[type="color"] {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid rgba(118, 78, 32, 0.6);
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.85rem;
  color: #332012;
  cursor: pointer;
}

#mail-compose-window .mail-compose-toolbar-options input[type="color"] {
  width: 40px;
  height: 26px;
  padding: 0;
}

#mail-compose-window .mail-compose-editor {
  min-height: 280px;
  flex: 1 1 260px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(121, 85, 41, 0.7);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.12);
  font-size: 0.96rem;
  line-height: 1.55;
  overflow-y: auto;
}

#mail-compose-window .mail-compose-editor:focus {
  outline: 2px solid rgba(72, 100, 17, 0.5);
  outline-offset: 2px;
}

#mail-compose-window .mail-compose-editor p {
  margin: 0 0 0.65em;
}

#mail-compose-window .mail-compose-editor ul,
#mail-compose-window .mail-compose-editor ol {
  padding-left: 1.5rem;
}

#mail-compose-window .mail-compose-editor blockquote {
  margin: 0.75em 0;
  padding: 0.6em 0.8em;
  background: rgba(189, 143, 68, 0.18);
  border-left: 4px solid rgba(121, 85, 41, 0.7);
  font-style: italic;
}

#mail-compose-window .mail-compose-feedback {
  margin: 0;
  font-size: 0.88rem;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(173, 47, 32, 0.12);
  color: #7f2119;
  border: 1px solid rgba(173, 47, 32, 0.35);
}

#mail-compose-window .mail-compose-feedback.success {
  background: rgba(68, 116, 32, 0.16);
  color: #24520d;
  border-color: rgba(68, 116, 32, 0.45);
}

#mail-compose-window .mail-compose-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  margin-top: auto;
}

@media (min-width: 520px) {
  #mail-compose-window .mail-compose-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

#mail-compose-window .mail-word-count {
  font-size: 0.85rem;
  color: rgba(58, 34, 16, 0.8);
  font-style: italic;
}

#mail-compose-window .mail-compose-footer-actions {
  display: flex;
  gap: 10px;
}

#mail-compose-window .mail-compose-submit-btn {
  padding: 6px 16px;
  font-size: 0.95rem;
  font-family: 'Lato', sans-serif;
  color: #2f1a0d;
  background: rgba(255, 248, 228, 0.9);
  border: 1px solid rgba(96, 68, 34, 0.45);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#mail-compose-window .mail-compose-submit-btn:hover {
  background: rgba(239, 221, 186, 0.95);
  border-color: rgba(96, 68, 34, 0.6);
}

#mail-compose-window .mail-compose-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  #mail-compose-window {
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    left: 16px !important;
    top: 16px !important;
    right: auto !important;
  }
}

#mail-view-window {
  width: min(655px, calc(100vw - 32px));
  height: 640px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mail-view-window .modal-body {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  padding: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mail-view-window .mail-view-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#mail-view-window .mail-view-metadata {
  margin: 0;
  padding: 14px 16px;
  border: 2px solid #a86e32;
  border-radius: 6px;
  background: rgba(255, 248, 228, 0.85);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

#mail-view-window .mail-view-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#mail-view-window .mail-view-field+.mail-view-field {
  border-top: 1px solid rgba(95, 62, 26, 0.25);
  padding-top: 8px;
  margin-top: 8px;
}

#mail-view-window .mail-view-field dt {
  min-width: 88px;
  margin: 0;
  color: #5f3e1a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#mail-view-window .mail-view-field dd {
  flex: 1;
  margin: 0;
  color: #2a1d10;
  word-break: break-word;
}

#mail-view-window .mail-view-content {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: 100%;
  padding: 18px;
  border: 2px solid #a86e32;
  border-radius: 6px;
  background: #fff8e4;
  color: #2a1d10;
  overflow: auto;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

#mail-view-window .mail-view-content:empty::before {
  content: 'Aucun contenu';
  color: rgba(42, 29, 16, 0.6);
}

#mail-view-window .mail-view-content p {
  margin: 0 0 12px;
}

#mail-view-window .mail-view-content ul,
#mail-view-window .mail-view-content ol {
  margin: 0 0 12px 22px;
}

#mail-view-window .mail-view-content blockquote {
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 3px solid rgba(168, 110, 50, 0.5);
  color: rgba(42, 29, 16, 0.8);
  font-style: italic;
}

#mail-view-window .mail-view-content a {
  color: #2a5d9f;
  text-decoration: underline;
  word-break: break-word;
}

#mail-view-window .mail-view-footer {
  padding: 12px 18px;
  border-top: 2px solid #a86e32;
  background: linear-gradient(180deg, rgba(255, 248, 228, 0.95) 0%, rgba(218, 185, 128, 0.95) 100%);
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

#mail-view-window .mail-view-footer-buttons {
  display: flex;
  gap: 12px;
}

#mail-view-window .mail-view-action {
  padding: 7px 18px;
  border: 2px solid #4f7219;
  border-radius: 6px;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  font-weight: 600;
  box-shadow:
    0 1px 0 #a89e6f inset,
    0 3px 7px rgba(7, 37, 0, 0.8),
    0 2px 0 #35540b;
  cursor: pointer;
  transition:
    background 110ms ease,
    box-shadow 120ms ease,
    transform 100ms ease,
    color 110ms ease;
}

#mail-view-window .mail-view-action:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

#mail-view-window .mail-view-action:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(1px);
}

@media (max-width: 900px) {
  #mail-view-window {
    width: calc(100vw - 32px);
    left: 16px !important;
    right: auto !important;
    top: 32px !important;
  }
}

.support-intro {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #2b1f12;
}

.support-table th:nth-child(4),
.support-table td:nth-child(4) {
  min-width: 140px;
}

.palace-conditions-block {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(99, 76, 48, 0.3);
}

.palace-conditions-block .bonus-header {
  margin-top: 8px;
}

/* Smoke effect for specific buildings */
.smoke-overlay {
  position: absolute;
  width: 38px;
  height: 65px;
  background-image: url('img/animations/animseq_smoke_generic_01P.png');
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 100;
}

.smoke-overlay-furnace {
  position: absolute;
  width: 78px;
  height: 200px;
  background-image: url('img/animations/animseq_smoke_furnaceP.png');
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 100;
}

.fountain-overlay {
  position: absolute;
  width: 70px;
  height: 78px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 100;
}

.flag-overlay {
  position: absolute;
  width: 42px;
  height: 24px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 100;
}

/* Custom Close Button for Building Details & Others */
#btn-close-building-details,
#btn-close-building-list,
#btn-close-alliance,
#btn-close-research,
#btn-close-quests,
#btn-close-mail,
#btn-close-social,
#btn-close-social-requests,
#btn-close-region-details,
#btn-close-reports {
  background-color: transparent;
  border: none;
  color: transparent;
  width: 28px;
  height: 28px;
  background-image: url('img/Bouton_close/button-close.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  position: absolute;
  right: 7px;
  top: 48%;
  transform: translateY(-50%);
}

/* Centered X icon */
#btn-close-building-details::after,
#btn-close-building-list::after,
#btn-close-alliance::after,
#btn-close-research::after,
#btn-close-quests::after,
#btn-close-mail::after,
#btn-close-social::after,
#btn-close-social-requests::after,
#btn-close-region-details::after,
#btn-close-reports::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  /* Estimated size, adjusted for visual balance */
  height: 14px;
  background-image: url('img/Bouton_close/icon_close_btn_large.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

#btn-close-building-details:hover,
#btn-close-building-list:hover,
#btn-close-alliance:hover,
#btn-close-research:hover,
#btn-close-quests:hover,
#btn-close-social-requests:hover,
#btn-close-mail:hover,
#btn-close-social:hover,
#btn-close-region-details:hover,
#btn-close-reports:hover {
  background-image: url('img/Bouton_close/button-close-hovered.png');
}

#btn-close-building-details:active,
#btn-close-building-list:active,
#btn-close-alliance:active,
#btn-close-research:active,
#btn-close-quests:active,
#btn-close-mail:active,
#btn-close-social:active,
#btn-close-social-requests:active,
#btn-close-region-details:active,
#btn-close-reports:active {
  background-image: url('img/Bouton_close/button-close-pressed.png');
}

#btn-close-building-details:focus,
#btn-close-building-list:focus,
#btn-close-alliance:focus,
#btn-close-research:focus,
#btn-close-quests:focus,
#btn-close-mail:focus,
#btn-close-social:focus,
#btn-close-region-details:focus,
#btn-close-reports:focus {
  background-image: url('img/Bouton_close/button-close-focused.png');
  outline: none;
}

#btn-close-building-details:disabled,
#btn-close-building-list:disabled,
#btn-close-alliance:disabled,
#btn-close-research:disabled,
#btn-close-quests:disabled,
#btn-close-mail:disabled,
#btn-close-social:disabled,
#btn-close-social-requests:disabled,
#btn-close-region-details:disabled,
#btn-close-reports:disabled {
  background-image: url('img/Bouton_close/button-close-disabled.png');
  cursor: default;
}

.hidden {
  display: none !important;
}

/* Social Notification */
#nav-social.new-social {
  position: relative;
}

#nav-social.new-social::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  background: url('img/icones/icon_mainmenu_friends_small.png') no-repeat center/contain;
}

#nav-social.new-social::after {
  content: "(" attr(data-unread) ")";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}

/* Alliance Invitation Notification */
#nav-alliance.new-alliance {
  position: relative;
}

#nav-alliance.new-alliance::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  background: url('img/icon_mainmenu_new_alliance_invitation.png') no-repeat center/contain;
}

#nav-alliance.new-alliance::after {
  content: "(" attr(data-unread) ")";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}

/* Wrapper for pop-up notifications (toasts) */
.game-message {
  position: fixed;
  top: 70px;
  /* Below the header */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(37, 39, 30, 0.95);
  color: #ffedbd;
  border: 1px solid #7ea846;
  /* Matching invite button green or gold */
  border-radius: 6px;
  padding: 10px 20px;
  z-index: 200000;
  /* High z-index */
  font-size: 16px;
  font-family: Arial, sans-serif;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.game-message.show {
  opacity: 1;
  transform: translateX(-50%) translateY(10px);
}

.game-message.error {
  border-color: #f7a8a8;
  color: #fff;
  background: rgba(160, 20, 20, 0.95);
  box-shadow: 0 4px 15px rgba(100, 0, 0, 0.6);
}

.game-message.success {
  border-color: #7ea846;
  color: #d4f8b0;
}

/* Social Feedback */
.social-feedback {
  margin-top: 10px;
  min-height: 20px;
  font-size: 13px;
  text-align: center;
}

.social-feedback.success {
  color: #55ff55;
}

.social-feedback.error {
  color: #ff5555;
}

/* Refresh button style */
.refresh-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.12s, background 0.11s, transform 0.1s;
}

.refresh-btn:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
}

.refresh-btn:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}


/* Chat controls */
.chat-control {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  min-width: 24px;
}

.chat-control img {
  pointer-events: none;
  display: block;
}

/* Chat mini toggle (maximize) */
.chat-mini-toggle {
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  border: 2px solid #4f7219;
  border-radius: 6px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.12s, background 0.11s, transform 0.1s;
}

.chat-mini-toggle:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
}

.chat-mini-toggle:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

.chat-mini-toggle .chat-mini-icon {
  display: block;
}

.chat-mini-toggle .chat-mini-text {
  display: block;
  font-weight: bold;
  font-size: 14px;
  color: #fcf5dc;
  margin-left: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ─────────────────────────────────────────────────────────────────
   Refonte Shop Artifact Card (bgr_shop)
   ───────────────────────────────────────────────────────────────── */

/* Wrapper spécifique pour le Shop, activé via classe .shop-wrapper ajoutée en JS */
.artifact-card-wrapper.shop-wrapper {
  display: inline-block;
  position: relative;
  width: 269px;
  /* Fixe la largeur à celle de bgr_shop.png */
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 10px;
  /* Espacement dans la grille si nécessaire */
  vertical-align: top;
}

/* État sélectionné */
.artifact-card-wrapper.shop-wrapper.selected {
  outline: 2px solid #39ff14;
  box-shadow: 0 0 10px #39ff14;
  animation: none;
  /* Désactive pulse si on veut, ou on le garde */
}

/* Image de fond en taille native */
.artifact-shop-bg {
  display: block;
  pointer-events: none;
}

/* Conteneur de contenu par-dessus l'image */
.artifact-shop-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 3px 6px;
  /* Ajustez selon les marges de l'image bgr_shop */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* En-tête : Nom et Tier sur la même ligne */
.artifact-shop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  width: 100%;
}

/* En-tête : Nom et Tier */
.artifact-shop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  width: 100%;
  position: relative;
  /* Pour le z-index */
  z-index: 5;
  /* Au-dessus du cadre */
}

.artifact-shop-header .artifact-name {
  font-weight: bold;
  font-size: 14px;
  color: #fcf5dc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.artifact-shop-header .artifact-tier {
  font-weight: bold;
  font-size: 12px;
  color: #f5e8c5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  margin-left: 8px;
}

/* Le cadre par-dessus l'icône, mais sous le header */
.artifact-icon-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ... existing code ... */

/* Footer avec Prix (Gauche) et Bouton (Droite) */
.artifact-shop-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  width: 100%;
  padding-top: 2px;
  margin-bottom: 6px;
  /* Remonte légèrement le contenu du footer */
}

/* Description au même endroit */
.artifact-card-wrapper.shop-wrapper .artifact-desc {
  flex: 1;
  font-size: 11px;
  color: #673420;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow-y: auto;
  line-height: 1.25;
  margin-left: 8px;
  /* écart avec l'icône */
  max-height: 60px;
  /* Limite hauteur description */
}

/* Corps : Icone (gauche) + Description (droite) */
.artifact-shop-body {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 8px;
}

/* Conteneur de l'icône avec cadre */
.artifact-icon-container {
  position: relative;
  width: 58px;
  /* Ajuster selon la taille de bgr_item_frame */
  height: 58px;
  /* Ajuster selon la taille de bgr_item_frame */
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Le cadre par-dessus l'icône */
.artifact-icon-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* L'icône elle-même */
.artifact-card-wrapper.shop-wrapper .artifact-icon {
  width: 58px;
  height: 58px;
  z-index: 1;
  border-radius: 4px;
}

/* Footer avec Prix (Gauche) et Bouton (Droite) */
.artifact-shop-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  /* Pousse vers le bas */
  width: 100%;
  padding-top: 2px;
  padding-bottom: 6px;
  /* Remonte le bouton */
}

.artifact-price-display {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #c80000;
  /* Rouge comme sur l'image 1 */
  font-weight: bold;
  font-size: 14px;
}

.artifact-price-display .price-icon {
  width: 20px;
  height: 20px;
}

/* Bouton prix */
.artifact-card-wrapper.shop-wrapper .price-btn {
  width: auto;
  min-width: 80px;
  height: 28px;
  line-height: normal;
  margin: 0;
  padding: 0 12px;
  align-self: flex-end;
  /* Garde la priorité flex si besoin, mais géré par le footer */
}


/* ─────────────────────────────────────────────────────────────────
   Refonte Inventory Artifact Card (bgr_item_inventory)
   ───────────────────────────────────────────────────────────────── */

.artifact-card-wrapper.inventory-wrapper {
  display: inline-block;
  position: relative;
  width: 269px;
  /* Same width as shop wrapper for consistency */
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 10px;
  vertical-align: top;
  cursor: pointer;
}

/* Clear default selected styles */
.artifact-card-wrapper.inventory-wrapper.selected {
  border: none;
  box-shadow: none;
  animation: none;
}

.artifact-inventory-bg {
  display: block;
  pointer-events: none;
  width: 100%;
  height: auto;
}

.artifact-inventory-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 3px 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Header: Name and Tier */
.artifact-inventory-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  width: 100%;
  position: relative;
  z-index: 5;
}

.artifact-inventory-header .artifact-name {
  font-weight: bold;
  font-size: 14px;
  color: #fcf5dc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.artifact-inventory-header .artifact-tier {
  font-weight: bold;
  font-size: 12px;
  color: #f5e8c5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  margin-left: 8px;
}

/* Body: Icon + Description */
.artifact-inventory-body {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 8px;
}

/* Icon (reusing shop styles class logic if possible, or duplicated) */
.artifact-card-wrapper.inventory-wrapper .artifact-icon-container {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.artifact-card-wrapper.inventory-wrapper .artifact-icon-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.artifact-card-wrapper.inventory-wrapper .artifact-icon {
  width: 58px;
  height: 58px;
  z-index: 1;
  border-radius: 4px;
}

/* Right Column Container for Description + Mana */
.artifact-inventory-right-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 8px;
  /* Margin moved here from .artifact-desc */
  min-width: 0;
  /* Important for flex child text overflow */
}

/* Description */
.artifact-card-wrapper.inventory-wrapper .artifact-desc {
  font-size: 11px;
  color: #673420;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow-y: auto;
  line-height: 1.25;
  margin-left: 0;
  /* Reset margin */
  max-height: 50px;
  /* Reduced to make room for Mana */
  padding-bottom: 2px;
}

/* Mana Display */
.artifact-card-wrapper.inventory-wrapper .artifact-mana {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -3px;
  font-weight: bold;
  font-size: 13px;
  color: #673420;
  /* Mana blue-ish color */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.artifact-card-wrapper.inventory-wrapper .artifact-mana .mana-icon {
  width: 24px;
  height: 24px;
}

/* Footer: Quantity - Positioned absolutely to ensure it sits inside the frame */
.artifact-inventory-footer {
  position: absolute;
  bottom: 6px;
  right: 12px;
  width: auto;
  margin: 0;
  padding: 0;
}

.artifact-inventory-qty {
  font-weight: bold;
  color: #673420;
  font-size: 14px;
}

/* Ensure description doesn't go under the absolute footer */
.artifact-card-wrapper.inventory-wrapper .artifact-desc {
  flex: 1;
  font-size: 11px;
  color: #673420;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  overflow-y: auto;
  line-height: 1.25;
  margin-left: 8px;
  max-height: 60px;
  padding-bottom: 20px;
  /* Space for footer */
}

/* Townhall Upgrade Button & Quest Guide Button Decorations */
#btn-townhall-upgrade,
#btn-building-destroy,
#city-rename-btn,
#btn-building-downgrade,
#alliance-leave-btn,
#alliance-btn-show-create,
#alliance-invite-accept,
.region-btn {
  position: relative;
  overflow: visible;
}

#quest-show-guide-btn {
  overflow: visible;
}

#btn-townhall-upgrade::before,
#quest-show-guide-btn::before,
#btn-building-destroy::before,
#city-rename-btn::before,
#btn-building-downgrade::before,
#alliance-leave-btn::before,
#alliance-btn-show-create::before,
#alliance-invite-accept::before,
.region-btn::before {
  content: '';
  background-image: url('img/UI/msc_btn_deco_end_left.png');
  background-size: 20px 30px;
  background-repeat: no-repeat;
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translate(-100%, -50%);
  width: 20px;
  height: 30px;
}

#btn-townhall-upgrade::after,
#quest-show-guide-btn::after,
#btn-building-destroy::after,
#city-rename-btn::after,
#btn-building-downgrade::after,
#alliance-leave-btn::after,
#alliance-btn-show-create::after,
#alliance-invite-accept::after,
.region-btn::after {
  content: '';
  background-image: url('img/UI/msc_btn_deco_end_right.png');
  background-size: 20px 30px;
  background-repeat: no-repeat;
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translate(100%, -50%);
  width: 20px;
  height: 30px;
}

/* ─────────────────────────────────────────────────────────────────
   Refonte Quest Info Window (bgr_quest_header + Portrait)
   ───────────────────────────────────────────────────────────────── */
.quest-header-wrapper {
  position: relative;
  width: 98%;
  /* Widen to fit container ("épouser sa place") */
  height: 100px;
  bottom: 6px;
  /* Slightly taller to maintain aspect ratio roughly or fixed */
  background-image: url('img/fenetres/quete/bgr_quest_header.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Fill the area */
  /*margin: -5px auto 0 auto;*/
  /* Move up ("remonter un peu") */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  z-index: 1;
}

/* Adjust title to sit nicely over the banner */
/* Adjust title to sit nicely over the banner */
#quest-info-window .quest-title {
  position: absolute;
  /* Changed to absolute to float over everything in the row context */
  top: 11px;
  /* Adjust visual vertical position relative to the row top (which is shifted up) */
  left: 0;
  margin: 0;
  padding-left: 92px;
  /* Increase padding to visually clear the overlapping portrait on the left */
  padding-right: 20px;
  color: #fcdfa8;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.2;
  z-index: 10;
  /* Ensure it's on top of portrait if overlap occurs */
}

.quest-content-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  flex: 1;
  min-height: 0;
  gap: 0px;
  /* Remove gap to control overlap via margin */
  margin-top: -110px;
  /* Pull content up to overlap header ("portrait par dessus") */
  position: relative;
  z-index: 2;
  /* Sit above header */
  padding: 0 10px;
  /* Little padding for the row */
}

.quest-portrait-container {
  flex-shrink: 0;
  margin-right: -10px;
  /* Reduced from 81px to stick portraits closer. Negative because of previous layout quirks? Or small positive. Let's try small overlap or close. User said 'aligné a la droite'. Let's go with 10px. Actually user set 81px. Let's try 15px. */
  margin-left: -20px;
}

.quest-portrait {
  display: block;
  width: 128px;
  height: auto;
}

/* Updated Description Style */
#quest-info-window .quest-description {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 14px;
  color: #2b1f12;
  line-height: 1.5;
  padding-right: 5px;
  margin-top: 41px;
  margin-left: 7px;
  /* Increase to roughly 85px-95px to ensure it starts BELOW the header text area */

  /* Push text down so it doesn't overlap header too much if it's long, or align with portrait */
  max-height: 100%;
  overflow-y: auto;
}

.quest-type-icon {
  position: absolute;
  right: 6px;
  /* Adjust as needed */
  top: 17%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  max-height: 80%;
  /* Ensure it fits within header height */
  z-index: 5;
}

#quest-info-window {
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
  /* Allow corner decorations to extend outside */
}

/* Specific banner adjustment for Quest Window */
#quest-info-window .modal-banner {
  position: relative;
  top: -6px;
  /* Move up to hide background corners behind beveled edges */
  z-index: 15;
  /* Above borders */
}

/* Borders and Corner Decos */
.quest-deco-border-l {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background: url('img/UI/win_mainoverlay_l.png') repeat-y left top;
  z-index: 10;
  /* Below banner (15) */
  pointer-events: none;
}

.quest-deco-border-r {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 14px;
  background: url('img/UI/win_mainoverlay_r.png') repeat-y right top;
  z-index: 10;
  /* Below banner (15) */
  pointer-events: none;
}

.quest-deco-border-b {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: url('img/UI/win_mainoverlay_b.png') repeat-x bottom center;
  z-index: 10;
  pointer-events: none;
  background-size: 100% 100%;
}

/* User said corners "par dessus tout" */
.quest-deco-corner-bl {
  position: absolute;
  bottom: -5px;
  /* Adjust if it needs to overhang */
  left: -5px;
  width: 50px;
  /* Estimated size, check actual image dimensions if possible or auto */
  height: 50px;
  background: url('img/UI/msc_win_deco_bl.png') no-repeat bottom left;
  z-index: 20;
  /* On top of everything */
  pointer-events: none;
}

.quest-deco-corner-br {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 50px;
  height: 50px;
  background: url('img/UI/msc_win_deco_br.png') no-repeat bottom right;
  z-index: 20;
  /* On top of everything */
  pointer-events: none;
}

/* Additional Vertical Details */
.quest-deco-detail-l-t,
.quest-deco-detail-l-b,
.quest-deco-detail-r-t,
.quest-deco-detail-r-b {
  position: absolute;
  width: 9px;
  /* Estimated width */
  height: 100px;
  /* Estimated height */
  background: url('img/UI/msc_win_detail_vert.png') no-repeat center center;
  background-size: contain;
  z-index: 25;
  /* "au dessus de win_mainoverlay" (10) */
  pointer-events: none;
}

.quest-deco-detail-l-t {
  left: -2px;
  top: 6%;
  /* Below header area (~100px) */
}

.quest-deco-detail-l-b {
  left: -2px;
  bottom: 9%;
  /* Above corner ~50px */
}

.quest-deco-detail-r-t {
  right: -2px;
  top: 6%;
}

.quest-deco-detail-r-b {
  right: -2px;
  bottom: 9%;
}

/* Recruitment Window Styling */
#recruitment-window,
#alliance-support-window,
#options-window,
#mail-view-window {
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
}

#recruitment-window .modal-banner,
#alliance-support-window .modal-banner,
#options-window .modal-banner,
#mail-view-window .modal-banner {
  position: relative;
  top: -6px;
  z-index: 15;
}

#recruitment-window .modal-body,
#alliance-support-window .modal-body,
#options-window .modal-body,
#mail-view-window .modal-body {
  background: transparent;
  padding: 9px;
}

/* Command Window Styling */
#command-window,
#trade-window {
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
}

#command-window .modal-banner,
#trade-window .modal-banner {
  position: relative;
  top: -6px;
  z-index: 15;
}

#command-window .modal-body,
#trade-window .modal-body {
  background: transparent;
  padding: 9px;
}

/* Recruitment Images Footer */
.recruitment-images {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1%;
}

.recruitment-images img {
  width: 49%;
  top: 2px;
  left: 3px;
  height: auto;
  display: block;
}

/* Minister Promo Overlay */
.minister-promo {
  position: relative;
  width: 49%;
}

.minister-promo>img {
  width: 100%;
  display: block;
}

.minister-icon {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 32px !important;
  /* Force override common img style if needed */
  height: 32px !important;
  z-index: 2;
}

.minister-text {
  position: absolute;
  top: 2px;
  left: 42px;
  /* Icon width + gap */
  right: 5px;
  font-size: 13px;
  color: #3d2e1f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
  pointer-events: none;
  /* Let clicks pass through if needed, but link needs clicks */
}

/* Re-enable pointer events for the link specifically */
.minister-text {
  pointer-events: auto;
}

.minister-link {
  align-self: flex-end;
  color: #0055aa;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  margin-top: -6px;
  margin-right: 11px;
}

/* Max Button Styling */
.trade-max-btn,
.purify-max-btn,
#recruitment-list .max-btn {
  /* Keep current size (assumed from context or let it auto-size to content + padding, but user said 'keep size') */
  /* Remove default button styles to use image */
  background-color: transparent;
  border: none;
  box-shadow: none;

  /* Background Image */
  background-image: url('img/UI/form_recruiting/button-recruiting.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  /* Text Styles */
  color: #3d2e1f;
  /* Adjust text color to contrast with button (usually light/parchment) */
  font-weight: bold;
  font-size: 12px;
  text-shadow: none;

  /* Interaction */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  /* Adjust padding to maintain size */
  line-height: normal;
}

.trade-max-btn:hover,
.purify-max-btn:hover,
#recruitment-list .max-btn:hover {
  background-image: url('img/UI/form_recruiting/button-recruiting-hovered.png');
}

.trade-max-btn:active,
.purify-max-btn:active,
#recruitment-list .max-btn:active {
  background-image: url('img/UI/form_recruiting/button-recruiting-pressed.png');
  transform: translateY(1px);
}

.trade-max-btn:disabled,
.purify-max-btn:disabled,
#recruitment-list .max-btn:disabled {
  background-image: url('img/UI/form_recruiting/button-recruiting-disabled.png');
  cursor: default;
  color: #6d5c4c;
  opacity: 0.7;
}

.trade-max-btn:focus,
.purify-max-btn:focus,
#recruitment-list .max-btn:focus {
  background-image: url('img/UI/form_recruiting/button-recruiting-focused.png');
  outline: none;
}

.ui-separator {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px auto;
  opacity: 0.9;
}

/* Shared decoration styles for other windows */
#mail-compose-window,
#leaderboard-window,
#objects-window,
#shop-window,
#player-info-window {
  background: url('img/UI/win_mainoverlay_paper.jpg') no-repeat center center;
  background-size: 100% 100%;
  overflow: visible;
}

#mail-compose-window .modal-banner,
#leaderboard-window .modal-banner,
#objects-window .modal-banner,
#shop-window .modal-banner,
#player-info-window .modal-banner {
  top: -6px;
  z-index: 30;
}

/* Custom small green button matching the 'Boutique' style */
.btn-green-small {
  background: linear-gradient(180deg, #3b660e 0%, #3b670e 50%, #486411 100%);
  color: #e7dab7;
  border: 2px solid #4f7219;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 14px;
  box-shadow: 0 1px 0 #a89e6f inset, 0 3px 7px #072500, 0 2px 0 #35540b;
  cursor: pointer;
  transition: background 0.11s, box-shadow 0.12s, transform 0.1s;
  text-align: center;
}

.btn-green-small:hover {
  background: linear-gradient(180deg, #dcc39a 0%, #5f852b 50%, #a89e6f 100%);
  color: #fffbe0;
}

.btn-green-small:active {
  background: linear-gradient(180deg, #b8c46d 0%, #6f9432 50%, #38550f 100%);
  box-shadow: 0 0px 0 #b8c46d inset, 0 1px 1px #789645;
  transform: translateY(2px);
}

/* --- Command Window Split Layout --- */
.command-split-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  margin-top: 10px;
  margin-bottom: 50px;
}

.command-split-section .colonize-options {
  width: 49%;
  margin: 0;
  padding: 0;
}

/* --- Artifact Quantity Controls --- */
.artifact-use-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.artifact-qty-input {
  width: 60px;
  text-align: center;
}

.artifact-shop-qty-input {
  width: 50px;
  text-align: center;
  margin-right: 6px;
}

/* --- Artifact Command/Trade Selection Popup --- */
#artifact-command-select-popup,
#artifact-trade-select-popup {
  width: 520px;
  max-width: 90vw;
  z-index: 10005;
}

.artifact-command-select-body,
.artifact-trade-select-body {
  padding: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.artifact-select-hint {
  color: #eed89e;
  margin-bottom: 12px;
  font-size: 13px;
}

.artifact-command-list,
.artifact-trade-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Reuse command-item style for popup */
.artifact-command-list .command-item,
.artifact-trade-list .trade-item {
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

.artifact-command-list .command-item:hover,
.artifact-trade-list .trade-item:hover {
  filter: brightness(1.15);
  transform: scale(1.01);
}

.artifact-command-list .command-item.selected,
.artifact-trade-list .trade-item.selected {
  outline: 2px solid #ffd700;
  filter: brightness(1.2);
}

/* Trade item styling (similar to command-item) */
.trade-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: url('img/bgr_commandqueue_item.png') center/100% 100% no-repeat;
  width: 465px;
  min-height: 80px;
  margin: 0 auto 6px auto;
  padding: 8px 12px;
  box-sizing: border-box;
}

.trade-item .trade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #3d2e1f;
  margin-bottom: 4px;
}

.trade-item .trade-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
  color: #675d41;
  margin-top: 4px;
}

.trade-item .trade-label {
  min-width: 100px;
  font-weight: 600;
}

.trade-item .trade-value {
  display: inline-flex;
  align-items: center;
}

/* Shop artifact quantity input */
.artifact-shop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.artifact-shop-buy-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Continent Dropdown */
.continent-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 4px;
}

.continent-btn {
  /* Green style */
  background: linear-gradient(to bottom, #6b8c42 0%, #466028 100%);
  border: 1px solid #2e401b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #efffde;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  font-weight: 600;
  font-size: 13px;
  padding: 4px 10px;
  min-width: 60px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
}

.continent-btn:hover {
  background: linear-gradient(to bottom, #7da34d 0%, #52702f 100%);
}

.continent-btn:active {
  background: linear-gradient(to bottom, #3b5020 0%, #5d7d35 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.continent-btn::after {
  content: url('img/scrollbar/scrollbar-down.png');
  font-size: 0.8em;
  margin-left: 6px;
  color: #c4d6a8;
}

.continent-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: rgba(22, 18, 11, 0.95);
  border: 1px solid #a48a62;
  border-radius: 4px;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  min-width: 140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  gap: 2px;
}

.continent-list.hidden {
  display: none;
}

.continent-list-item {
  color: #f5e8c5;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
  font-size: 12px;
  transition: background 0.15s;
}

.continent-list-item:hover {
  background: rgba(246, 216, 123, 0.2);
  color: #fff;
}

.eye-btn {
  padding: 0;
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.eye-btn img {
  width: 20px;
  height: 14px;
}

.recherche-header-wrapper {
  position: relative;
  width: 97%;
  height: 100px;
  bottom: 12px;
  background-image: url('img/fenetres/quete/bgr_quest_header.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  z-index: 1;
}

#research-info-window .recherche-title {
  position: absolute;
  top: 4px;
  left: 0;
  margin: 0;
  padding-left: 92px;
  padding-right: 20px;
  color: #fcdfa8;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.2;
  z-index: 10;
}

.recherche-content-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  flex: 1;
  min-height: 0;
  gap: 0px;
  margin-top: -110px;
  position: relative;
  z-index: 2;
  padding: 0 10px;
}

.recherche-portrait-container {
  flex-shrink: 0;
  margin-right: -10px;
  margin-left: -20px;
}

.recherche-portrait {
  display: block;
  width: 128px;
  height: auto;
}

/* Decoration d'angle pour #game */
.game-corner-deco {
  position: absolute;
  z-index: 900;
  /* High enough to be above map, but check against other UI */
  pointer-events: none;
}

.game-corner-deco.top-left {
  top: 0;
  left: 0;
}

.game-corner-deco.bottom-left {
  bottom: 0;
  left: 0;
}

/* Decoration bordures pour #game */
.game-border-deco {
  position: absolute;
  z-index: 16;
  /* Lower than chat-panel (12) */
  pointer-events: none;
}

.game-border-deco.border-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  /* Estimated height to match typical borders/corners */
}

.game-border-deco.border-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  /* Estimated height */
}

.game-border-deco.border-left {
  top: 0;
  left: 0;
  width: 4px;
  /* Estimated width */
  height: 100%;
}

/* Troop Info Window */
.troop-info-unit-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 10px 0;
  min-height: 60px;
  align-items: center;
}

.troop-info-unit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.troop-info-unit-icon {
  width: 40px;
  height: 40px;
  border: 1px solid #7c6a46;
  border-radius: 4px;
}

.troop-info-unit-count {
  font-weight: bold;
  font-size: 14px;
}

.troop-info-options {
  padding: 10px 20px;
}

.troop-info-title {
  color: #5c3918;
  font-size: 16px;
  margin: 0 0 15px 0;
  font-weight: bold;
  text-align: left;
}

.troop-info-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.troop-info-label {
  font-weight: bold;
  min-width: 80px;
}

#ti-option-select {
  padding: 4px;
  min-width: 200px;
}

.troop-info-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  align-items: center;
}

.modal-btn-cancel,
.modal-btn-apply {
  padding: 6px 12px;
  border: 1px solid #5c4b30;
  cursor: pointer;
  font-weight: bold;
  border-radius: 3px;
  min-width: 140px;
}

.modal-btn-cancel {
  background: #6e6e6e;
  color: #dcdcdc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.modal-btn-cancel:hover {
  background: #7a7a7a;
}

.modal-btn-apply {
  background: #6a8e23;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: #4a6316;
}


.modal-btn-apply:hover {
  background: #769c27;
}

/* City Group Dropdown */
.lou-header-group-select {
  position: absolute;
  left: 10px;
  top: 0;
  display: flex;
  align-items: center;
  height: 45px;
  z-index: 5;
}

.group-select-bg-left {
  width: 45px;
  height: 45px;
  background: url('img/UI/icon_citybar_groups_disabled.png'), url('img/form_bar_left/button-bar-left.png');
  background-repeat: no-repeat, no-repeat;
  background-position: right center, left center;
  background-size: 36px 25px, 100% 100%;
  z-index: 1;
}

.group-select-bg-right {
  width: 33px;
  height: 45px;
  background: url('img/scrollbar/scrollbar-down.png'), url('img/form_bar/button-bar.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: 13px 10px, 100% 100%;
  margin-left: -2px;
  z-index: 2;
}

/* Hover States */
.lou-header-group-select:hover .group-select-bg-left {
  background-image: url('img/UI/icon_citybar_groups_disabled.png'), url('img/form_bar_left/button-bar-left-hovered.png');
}

.lou-header-group-select:hover .group-select-bg-right {
  background-image: url('img/scrollbar/scrollbar-down.png'), url('img/form_bar/button-bar-hovered.png');
}

/* Active/Pressed States */
.lou-header-group-select:active .group-select-bg-left {
  background-image: url('img/UI/icon_citybar_groups_disabled.png'), url('img/form_bar_left/button-bar-left-pressed.png');
}

.lou-header-group-select:active .group-select-bg-right {
  background-image: url('img/scrollbar/scrollbar-down.png'), url('img/form_bar/button-bar-pressed.png');
}

#group-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: transparent;
  border: none;
  color: #dcc39a;
  font-weight: bold;
  font-size: 12px;
  padding-left: 10px;
  cursor: pointer;
  appearance: none;
  z-index: 6;
  outline: none;
}

#group-select:focus {
  outline: none;
}

/* City Select Composite Background */
.lou-header-city-select {
  position: relative;
  left: -65px;
  top: 0;
  height: 49px;
  /* Ensure it creates a stacking context */
}

.city-select-bg-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 29px;
  height: 45px;
  background: url('img/form_bar/button-bar.png') no-repeat left center;
  background-size: 100% 100%;
  z-index: 1;
}

.city-select-bg-right {
  position: absolute;
  right: 24px;
  top: 0;
  width: 31px;
  height: 45px;
  background-image: url(img/scrollbar/scrollbar-down.png), url(img/form_bar/button-bar.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 13px 10px, 100% 100%;
  z-index: 1;
}

.city-select-bg-center {
  position: absolute;
  left: 9px;
  right: 0px;
  top: 0;
  width: 73%;
  height: 45px;
  background: url('img/form_bar/button-bar-plus.png') repeat-x center center;
  background-size: 100% 100%;
  /* Overlap the sides */
  z-index: 2;
  /* Higher z-index to cover seams */
}

/* Ensure content is above background */
.lou-header-town-icon,
#city-select {
  position: relative;
  z-index: 3;
}

/* Hover States for City Select */
.lou-header-city-select:hover .city-select-bg-left {
  background-image: url('img/form_bar/button-bar-hovered.png');
}

.lou-header-city-select:hover .city-select-bg-right {
  background-image: url('img/scrollbar/scrollbar-down.png'), url('img/form_bar/button-bar-hovered.png');
}

.lou-header-city-select:hover .city-select-bg-center {
  background-image: url('img/form_bar/button-bar-hovered-plus.png');
}

/* Active/Pressed States */
.lou-header-city-select:active .city-select-bg-left {
  background-image: url('img/form_bar/button-bar-pressed.png');
}

.lou-header-city-select:active .city-select-bg-right {
  background-image: url('img/scrollbar/scrollbar-down.png'), url('img/form_bar/button-bar-pressed.png');
}

.lou-header-city-select:active .city-select-bg-center {
  background-image: url('img/form_bar/button-bar-pressed-plus.png');
}

.game-message {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 10000;
  pointer-events: none;
  animation: fadeOut 5s forwards;
  border: 1px solid #cfaa56;
  box-shadow: 0 0 10px #000;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  text-align: center;
}

@keyframes fadeOut {
  0% {
    opacity: 0;
    top: 120px;
  }

  10% {
    opacity: 1;
    top: 100px;
  }

  80% {
    opacity: 1;
    top: 100px;
  }

  100% {
    opacity: 0;
    top: 80px;
  }
}

/* Game Toast Message */
.game-message {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #ffd700;
  border: 1px solid #ffd700;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 9999;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: toastFade 4s ease-in-out forwards;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

@keyframes toastFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  85% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
}

/* Forum Table Refactor */
.forum-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #e8e8e8;
  /* Light grey background for the whole table area */
  font-size: 13px;
  color: #333;
}

.forum-table th {
  background: linear-gradient(180deg, #000 0%, #673420 100%);
  color: #f4d4a5;
  padding: 8px;
  border: 1px solid #5b411c;
  font-weight: bold;
  font-size: 12px;
}

.forum-table td {
  padding: 8px;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
}

.forum-table tbody tr {
  background-color: #fff4e2;
  /* Default row color */
}

/* Zebra striping */
.forum-table tbody tr:nth-child(even) {
  background-color: #e0e0e0;
}

.forum-table tbody tr:hover {
  background-color: #d0d0d0;
  cursor: pointer;
}

.forum-topic-link {
  font-weight: bold;
  color: #8b4513;
  /* Brownish color for links */
  text-decoration: none;
}

.forum-topic-link:hover {
  text-decoration: underline;
}

.forum-topic-lastpost {
  font-size: 11px;
  color: #555;
  line-height: 1.4;
}

.forum-topic-pages {
  font-size: 10px;
  margin-left: 5px;
  color: #666;
}

/* Forum Reply Summary - Re-added */
.forum-topic-summary {
  margin-top: 20px;
  border: 1px solid #333;
  background-color: #fff;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.summary-header {
  background: linear-gradient(180deg, #4f1616 0%, #9b5600 100%);
  color: #fff;
  padding: 6px 10px;
  font-weight: bold;
  font-size: 12px;
  border-bottom: 1px solid #000;
  text-shadow: 1px 1px 0 #000;
}

.summary-post {
  border-top: 1px solid #999;
}

.summary-post:first-of-type {
  border-top: none;
}

/* Alternating backgrounds for the content part */
.summary-post:nth-child(even) .summary-content {
  background-color: #e4e4e4;
  /* Grey 1 */
}

.summary-post:nth-child(odd) .summary-content {
  background-color: #d0d0d0;
  /* Grey 2 */
}

.summary-meta {
  padding: 4px 8px;
  background-color: #b0c4de;
  /* Distinct header color for post, similar to screenshot blue-grey? using a neutral grey-blue */
  background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
  border-bottom: 1px solid #999;
  font-size: 11px;
  color: #333;
}

.summary-content {
  padding: 10px;
  color: #000;
  font-size: 12px;
  line-height: 1.4;
}

/* Forum Post Item Styling (New Layout) */
.forum-post-item {
  margin-bottom: 4px;
  font-family: Arial, sans-serif;
  border: 1px solid #999;
  background-color: #f0f0f0;
}

.forum-post-header {
  background: linear-gradient(180deg, #e0b04b 0%, #955600 100%);
  padding: 6px 10px;
  border-bottom: 1px solid #888;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.forum-post-info {
  display: flex;
  flex-direction: column;
}

.forum-post-author-line {
  font-weight: bold;
  font-size: 13px;
  color: #fff1dc;
  margin-bottom: 2px;
}

.forum-post-author {
  color: #fff;
  text-decoration: none;
}

.forum-post-author:hover {
  text-decoration: underline;
}

.forum-post-date-line {
  font-size: 11px;
  color: #000;
}

.forum-post-actions {
  /* Right side actions */
}

.forum-quote-btn {
  background: transparent;
  border: 1px solid #aaa;
  border-radius: 3px;
  cursor: pointer;
  color: #333;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}

.forum-quote-btn:hover {
  text-decoration: none;
  background: linear-gradient(to bottom, #fff, #f0f0f0);
  border-color: #888;
}

.forum-quote-btn img {
  height: 12px;
  width: auto;
}

.forum-post-content {
  background-color: #e8e8e8;
  /* Light grey content background as per screenshot */
  padding: 15px;
  color: #333;
  font-size: 13px;
  line-height: 1.5;
  min-height: 60px;
  border-top: 1px solid #fff;
  /* Highlight/Bevel effect */
}