/* Core theme */
:root{
  --bg:#0f1116; --panel:#151922; --panel-2:#1b1f2a;
  --text:#e7e7e7; --muted:#a8b0c2;
  --brand:#ff7a18; --brand-2:#ffb968;
  --radius:16px; --shadow:0 0 0 1px rgba(255,122,24,0.15), 0 10px 30px -10px rgba(0,0,0,.7), 0 0 25px rgba(255,122,24,0.08) inset;
}
*{box-sizing:border-box} html,body{background:var(--bg); color:var(--text); margin:0; font:400 16px/1.6 system-ui,Segoe UI,Roboto,Arial}
img{max-width:100%; display:block}
.container{width:min(1200px,92vw); margin-inline:auto}

.site-header{border-bottom:1px solid rgba(255,122,24,.25); position:sticky; top:0; z-index:5; background:linear-gradient(180deg,#141821,#0f1116)}
.title{font-size:clamp(28px,4vw,56px); margin:0; padding-top:22px; text-align:center; text-shadow:0 0 30px rgba(255,122,24,.35)}
.subtitle{text-align:center; margin:.25rem 0 1rem; color:var(--brand-2)}
.top-nav{display:flex; gap:.5rem; justify-content:center; padding:8px 0 18px}
.btn{border:1px solid rgba(255,122,24,.35); background:linear-gradient(180deg, rgba(255,122,24,.12), rgba(255,122,24,.06)); color:var(--text); padding:.6rem .9rem; border-radius:12px; cursor:pointer; box-shadow:var(--shadow); transition:.2s; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem}
.btn-primary{background:linear-gradient(180deg, rgba(255,122,24,.35), rgba(255,122,24,.15))}
.btn-ghost{background:transparent} .btn-ghost.active{outline:2px solid rgba(255,122,24,.35)}

.card{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border-radius:var(--radius); padding:20px; margin:26px auto; box-shadow:var(--shadow); border:1px solid rgba(255,122,24,.12)}
.section-title{display:flex; align-items:center; gap:.6rem; margin-bottom:14px}
.section-title .dot{width:8px;height:8px;border-radius:50%; background:var(--brand)}
.centered{text-align:center}.glow{text-shadow:0 0 24px rgba(255,122,24,.35)}

.map-wrapper{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,122,24,.2)}
.legend{display:flex; gap:1rem; justify-content:center; align-items:center; margin-top:.6rem; color:var(--muted)}
.pill{display:inline-block; width:18px; height:8px; border-radius:999px; margin-right:.4rem; border:1px solid rgba(255,255,255,.15)}
.pill-green{background:#2ecc71}.pill-orange{background:#ff7a18}.pill-gray{background:#7f8796}
.cta-row{display:flex; justify-content:center; margin-top:14px}

.grid-2{display:grid; grid-template-columns: 1fr; gap:22px; margin-top:10px; margin-bottom:40px}
@media (min-width: 940px){ .grid-2{ grid-template-columns: 1fr 1fr; gap:22px } .grid-2 .card{width:100%} }

.viggo-head{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.orb-img{width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,122,24,.6); box-shadow:0 0 18px rgba(255,122,24,.6)}
.muted{color:var(--muted)}

.kpi{margin:14px 0}
.kpi-label{display:flex; justify-content:center; align-items: center; gap: 8px; font-weight:600; margin-bottom:6px}
.bar{height:10px; background:#0b0d12; border:1px solid rgba(255,122,24,.2); border-radius:999px; overflow:hidden}
.bar .bar-fill{display:block; height:100%; width:var(--val); background:linear-gradient(90deg, var(--brand), rgba(255,122,24,.7)); box-shadow:0 0 20px rgba(255,122,24,.35)}
.trend{color:#39d98a; font-size:.9rem; margin-top:8px}

/* Awards */
.awards-group{background:rgba(0,0,0,.18); border:1px solid rgba(255,122,24,.18); border-radius:14px; padding:14px; margin-bottom:12px}
.awards-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.badge-emoji{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%}
.badge-emoji.gold{background: radial-gradient(circle, #ffd778, #ffb22e)}
.badge-emoji.silver{background: radial-gradient(circle, #e0e6f0, #aeb7c8)}
.badge-emoji.bronze{background: radial-gradient(circle, #ff9b7b, #ff7a18)}
.awards-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:14px; justify-items:center; align-items:start}
.award{
  text-align: center;
  position: relative;
  width: 110px;
  height: 140px; /* Increased height to accommodate name */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.award img {
  width: 110px !important; 
  height: 110px !important;
  min-width: 110px !important;
  min-height: 110px !important;
  max-width: 110px !important;
  max-height: 110px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,122,24,.35) !important;
  box-shadow: 0 0 16px rgba(255,122,24,.25) !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 auto !important;
  aspect-ratio: 1 / 1 !important;
}

/* Media query for responsive sizing */
@media (max-width: 940px){
  .award {
    width: 96px;
    height: 130px; /* Increased height to accommodate name */
  }
  
  .award img { 
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }
}
.winner-name{
  margin-top:8px; 
  font-size:.85rem; 
  color:var(--muted);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 5px;
  box-sizing: border-box;
  text-align: center;
}

/* Clans */
.clans-grid{display:grid; grid-template-columns:1fr; gap:22px}
@media(min-width:900px){ .clans-grid{ grid-template-columns: repeat(4, 1fr)} }
.clan-card{background:linear-gradient(180deg,#0f1218,#141925); border:1px solid rgba(255,122,24,.22); border-radius:18px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:var(--shadow)}
.clan-avatar{width:84px; height:84px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,122,24,.6); box-shadow:0 0 16px rgba(255,122,24,.4)}
.clan-name{margin:4px 0 0; letter-spacing:.5px} .clan-meta{margin:0 0 8px; color:var(--muted)} .clan-card .btn{width:100%; justify-content:center}

/* Cards Semanais */
.cards-semanas{display:grid; grid-template-columns:1fr; gap:18px; overflow: visible; /* Prevent scrollbar */}
@media(min-width:1100px){ .cards-semanas{ grid-template-columns: repeat(4,1fr) } }
.cards-group2{background:rgba(0,0,0,.16); border:1px solid rgba(255,122,24,.22); border-radius:14px; padding:14px; box-shadow:var(--shadow); overflow: visible; /* Prevent scrollbar */}
.cards-group2 h4{text-align:center; margin:4px 0 10px}
.banner-wrap{border-radius:10px; overflow:hidden; border:2px solid rgba(255,122,24,.35); box-shadow:0 0 24px rgba(255,122,24,.15) inset}
.banner-wide{width:100%; height:150px; object-fit:cover; display:block}
.mini-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.mini{background:rgba(20,24,32,.9); border:1px solid rgba(255,255,255,.12); border-radius:10px; overflow:hidden; margin:0}
.mini img{width:100%; height:120px; object-fit:cover; display:block}
.mini figcaption{padding:8px 10px; font-size:.9rem}
.mini figcaption b{display:block; margin-bottom:2px}
.mini figcaption span{color:var(--muted); font-size:.85rem}

/* Map pins & modal */
.map-pins{ position:absolute; inset:0; pointer-events:none }
.pin{position:absolute; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 50% 40%, #ffd3a6 0%, #ff7a18 55%, #a14400 100%); box-shadow:0 0 15px rgba(255,122,24,.6), 0 0 0 2px rgba(0,0,0,.35); border:1px solid rgba(255,122,24,.6); pointer-events:auto; cursor:pointer}
.pin[data-status="Conquistado"]{ background:radial-gradient(circle at 50% 40%, #bdf8d4, #3ddc84 60%, #0f5a3a) }
.pin[data-status="Neutro"]{ background:radial-gradient(circle at 50% 40%, #d4d8e3, #7f8796 60%, #3c4150) }
.tooltip{ position:absolute; transform:translate(-50%, calc(-100% - 16px)); min-width:200px; max-width:260px; background:rgba(17,20,28,.95); border:1px solid rgba(255,122,24,.35); padding:10px 12px; border-radius:10px; box-shadow:var(--shadow); color:var(--text); pointer-events:none; z-index:3 }
.tooltip .t-title{ font-weight:700; margin:0 0 2px } .tooltip .t-status{ color:var(--brand-2); font-size:.9rem; margin:0 0 6px } .tooltip .t-desc{ color:var(--muted); font-size:.92rem; margin:0 }
.tooltip::after{ content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); border:8px solid transparent; border-top-color:rgba(17,20,28,.95) }
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index: 20; /* garante que fique acima do cabeçalho sticky */
}
.modal[aria-hidden="false"]{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.8) }
.modal-card{ 
  position:relative; 
  z-index:1; 
  width:min(650px,80vw) !important; 
  max-height:75vh !important; 
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); 
  border:1px solid rgba(255,122,24,.25); 
  border-radius:16px; 
  padding:50px 16px 16px 16px; /* Increased top padding for close button */
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,122,24,.12) inset; 
  overflow-y:auto; 
  box-sizing:border-box;
  margin-top: 20px; /* Add space from the top */
}
.modal-close{ 
  position:fixed; 
  right:16px; 
  top:16px; 
  border:0; 
  background:rgba(0,0,0,.9); 
  color:#ff7a18; 
  font-size:24px; 
  line-height:1; 
  cursor:pointer; 
  width:36px; 
  height:36px; 
  border-radius:50%; 
  display:grid; 
  place-items:center; 
  z-index:1000; /* Significantly increased z-index to ensure visibility */
  box-shadow: 0 0 15px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,122,24,.4);
}
.clan-modal{ 
  width:min(680px, 85vw); 
  max-height:75vh; 
  overflow-y:auto;
  padding-top: 40px; /* Added space for close button */
  position: relative;
}
.clan-list{ margin-top:8px; max-height:360px; overflow:auto; background:rgba(0,0,0,.18); border:1px solid rgba(255,122,24,.18); border-radius:10px; padding:10px 12px }
.clan-list ul{ list-style:none; margin:0; padding:0 } .clan-list li{ padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.06)} .clan-list li:last-child{ border-bottom:0 }

.site-footer{padding:28px 0 40px; text-align:center; color:var(--muted)}


/* Header background image behind menus */
.site-header{
  position:sticky; top:0; z-index:5;
  background:
    linear-gradient(180deg, rgba(20,24,33,.86), rgba(15,17,22,.90)),
    url('assets/header_bg.png') center/cover no-repeat;
}
@media (min-width: 900px){
  .site-header{ background-attachment: fixed, fixed; }
}


/* Lightbox / Zoom de imagem */
.lightbox-card{
  position:relative; z-index:1;
  max-width: min(96vw, 1200px);   /* ocupa quase toda a largura da tela */
  max-height: 92vh;               /* nunca passa da altura visível */
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,122,24,.25);
  border-radius:12px;
  padding:16px 12px 12px 12px;    /* borda interna equilibrada */
  display:flex; flex-direction:column; align-items:center;
  overflow: auto;
  margin: auto;
}
.lightbox-card img{
  max-width: 92vw;                /* sempre respeita a largura da viewport */
  max-height: 80vh;               /* imagem nunca passa da altura útil */
  object-fit: contain;            /* mostra 100% da imagem, sem corte nem distorção */
  border-radius:10px;
  box-shadow: 0 0 35px rgba(0,0,0,.6);
}
.lightbox-card figcaption{
  color: var(--muted);
  margin-top: 6px;
  font-size: .95rem;
  text-align:center;
}
/* class util para desabilitar zoom quando quiser */
.no-zoom img, img[data-nozoom="true"]{ pointer-events:auto } /* still clickable elsewhere */

/* --- Header revamped --- */
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.brand{ display:flex; align-items:center; gap:10px }
.brand-icon{ font-size:26px; color: var(--brand) }
.brand-sub{ color:#c9c9c9; font-size:.9rem; margin-top:-6px; opacity:.9 }
.header-quote .subtitle{ display:flex; align-items:center; gap:.6rem; color:#cfd6e6; opacity:.85 }
.accent-bar{ display:inline-block; width:8px; height:18px; background: var(--brand); border-radius:2px }

.site-header{
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(15,15,16,.88), rgba(15,17,22,.92)),
    url('assets/header_bg.png') center/cover no-repeat;
}

/* Pills menu style */
.top-nav{ display:flex; gap:.5rem; align-items:center }
.btn-menu{
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.15);
  color:#eaeaea;
  padding:.5rem .7rem;
  border-radius:10px;
}
.btn-menu .icon-mute{ display:none }
.btn-menu[aria-pressed="true"] .icon-sound{ display:none }
.btn-menu[aria-pressed="true"] .icon-mute{ display:inline }

/* Hover: dark orange bg + blue text */
:root{ --menu-hover:#c55a12; --menu-hover-text:#7ab0ff }
.btn-menu:hover, .btn-menu:focus{
  background: var(--menu-hover);
  color: var(--menu-hover-text);
  outline: none;
}

/* keep emoji icons from recoloring on hover in some browsers */
.btn-menu:hover span, .btn-menu:focus span{ color: var(--menu-hover-text) }

/* Reduce title spacing to match screenshot */
.title{ margin:0 }
.subtitle{ margin:.3rem 0 .9rem }


/* Centered hero for Olho de Viggo */
.viggo-hero{ display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:8px; text-align:center }
.viggo-hero .orb-img{ width:84px; height:84px; margin-bottom:6px }
.viggo-hero h3{ margin:.2rem 0 0 }
.viggo-hero .muted{ margin:0 0 .6rem }

/* Awards container alignment */
.awards{ display:flex; flex-direction:column; gap:14px }
.awards-grid{ justify-items:center }

/* Harmonização de alturas no grid ao lado do Viggo */
.grid-2{align-items:start}
.grid-2 .card{height:100%}

@media (max-width: 940px){
  .award img{ width:96px; height:96px }
  .awards-grid{ gap:12px }
}


/* Sound button icon swap based on data-playing */
#btnSound .icon-mute{ display:none }
#btnSound[data-playing="false"] .icon-mute{ display:inline }
#btnSound[data-playing="false"] .icon-sound{ display:none }


/* ===== Galeria de Territórios (popup) ===== */
.territories-modal{max-width:700px !important;width:min(80vw,700px) !important;max-height:70vh !important;overflow-y:auto}
.territories-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  max-height:min(50vh,500px); overflow:auto; padding-right:4px; margin-top:8px;
}
@media (max-width: 860px){ .territories-list{ grid-template-columns:1fr; } }

/* Responsividade para todos os modais */
@media (max-width: 768px) {
  .modal-card{ width:min(90vw, 680px); max-height:85vh; padding:12px; }
  .territories-modal{ width:min(90vw, 800px); max-height:80vh; }
  .clan-modal{ width:min(90vw, 680px); max-height:80vh; }
  .modal-close{ right:6px; top:6px; width:28px; height:28px; font-size:20px; }
}

@media (max-width: 480px) {
  .modal-card{ width:min(95vw, 680px); max-height:90vh; padding:10px; }
  .territories-modal{ width:min(95vw, 800px); max-height:85vh; }
  .clan-modal{ width:min(95vw, 680px); max-height:85vh; }
  .modal-close{ right:4px; top:4px; width:24px; height:24px; font-size:18px; }
}
.territory-card{
  display:flex; gap:14px; align-items:center; background:var(--panel-2);
  border:1px solid rgba(255,122,24,.45); border-radius:12px; padding:12px; box-shadow:var(--shadow);
}
.territory-medal{ width:88px; height:88px; object-fit:contain; border-radius:50%; flex:0 0 88px;
  background:#0b1118; border:1px solid rgba(255,255,255,.08);
}
.t-info{ display:flex; flex-direction:column; gap:6px; }
.t-title{ font-weight:800; letter-spacing:.2px }
.t-clan{ display:flex; align-items:center; gap:8px; font-weight:600; }
.clan-badge{ width:36px; height:36px; object-fit:contain; }
.t-status-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.85rem; font-weight:700; border:1px solid rgba(255,255,255,.12) }
.t-status-green{ background:#103a26; color:#baf7d2; border-color:#36d483 }
.t-status-orange{ background:#402616; color:#ffd1ad; border-color:#ff8a3d }
.t-status-gray{ background:#283040; color:#cfd6e6; border-color:#566079 }

/* ===== Ordem da Sinergia — layout e visual ===== */
.ordem-grid-center{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:22px;
  justify-content:center;
}
@media (max-width:1100px){ .ordem-grid-center{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width:560px){ .ordem-grid-center{ grid-template-columns: minmax(220px, 1fr); } }

.ordem-card{
  background: linear-gradient(180deg,#0f131b,#151a25);
  border:1px solid rgba(255,122,24,.35);
  border-radius:16px;
  padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.ordem-card-media{
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;              /* garante área sempre quadrada */
  max-width: 220px;
  margin-inline:auto;
  display:grid; place-items:center;
  background:#0e1118; border:1px solid rgba(255,255,255,.06); border-radius:12px;
  overflow:hidden;
}
.ordem-card-media img{ 
  width:100%;
  height:100%;
  object-fit:contain;               /* mostra a foto inteira, sem cortar */
  display:block;
  border-radius:50%;                /* mantém o formato circular */
}
.ordem-card-name{ 
  text-align:center; 
  font-weight:700; 
  color:#ff9d4f;
  font-size:0.95rem;
  line-height:1.2;
}

/* Ações do painel Ordem da Sinergia */
.ordem-actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
}
.ordem-info-modal{
  max-width:720px;
}
.ordem-info-text p{
  margin:0 0 .75rem;
  color:var(--muted);
  font-size:.95rem;
}

/* ===== Trono das Insígnias â€" layout e visual ===== */
.trono-grid-center{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:22px;
  justify-content:center;
}
@media (max-width:1100px){ .trono-grid-center{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width:560px){ .trono-grid-center{ grid-template-columns: minmax(220px, 1fr); } }

.trono-card{
  background: linear-gradient(180deg,#0f131b,#151a25);
  border:1px solid rgba(255,122,24,.35);
  border-radius:16px;
  padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.trono-card-media{
  width:100%; height:160px; display:grid; place-items:center;
  background:#0e1118; border:1px solid rgba(255,255,255,.06); border-radius:12px;
}
.trono-card-media img{ max-width:85%; max-height:85%; object-fit:contain; display:block; }
.trono-card-title{ text-align:center; font-weight:800; letter-spacing:.4px; }
.trono-card-winner{ display:flex; align-items:center; gap:10px; }
.trono-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid #ff9d4f; background:#0b0e14; box-shadow:0 0 12px rgba(255,122,24,.3); }
.trono-avatar img{ width:100%; height:100%; object-fit:cover; }
.trono-winner-name{ color:#ff9d4f; font-weight:700; }

/* ===== Trono das Insígnias: avatar maior ===== */

/* controle central do tamanho (mude aqui) */
:root{
  --trono-avatar-size: 84px; /* experimente 96px, 100px, etc. */
}

.trono-card-winner{
  display: flex;
  align-items: center;
  justify-content: center;   /* centraliza avatar + nome */
  gap: 12px;                 /* espaço entre avatar e nome */
  margin-top: 8px;
}

.trono-avatar{
  width: var(--trono-avatar-size);
  height: var(--trono-avatar-size);
  flex: 0 0 auto;            /* não encolhe */
  border-radius: 50%;
  overflow: hidden;          /* corta cantos da imagem em círculo */
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.trono-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* preenche sem distorcer */
  display: block;
}

.trono-winner-name{
  font-size: .95rem;         /* opcional: nome um pouco maior */
  line-height: 1.2;
}

/* opcional: levemente menor em telas pequenas */
@media (max-width: 540px){
  :root{ --trono-avatar-size: 72px; }
}


/* ===== Cartas Mestras ===== */
#cartas-mestras{ border:1px solid rgba(255,122,24,.35); }
.cm-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:14px }
.cm-grid{ display:grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap:20px }
@media (max-width: 980px){ .cm-grid{ grid-template-columns: 1fr } }
.cm-card{
  display:grid; grid-template-columns: 280px 1fr; gap:16px;
  background: linear-gradient(180deg, #0f131b, #151a25);
  border:1px solid rgba(255,122,24,.35);
  border-radius:16px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
@media (max-width: 720px){ .cm-card{ grid-template-columns: 1fr } }
.cm-image{ background:#0e1118; border:1px solid rgba(255,255,255,.06); border-radius:12px; display:grid; place-items:center; }
.cm-image img{ width:100%; height:auto; display:block; border-radius:10px; }
.cm-title{ margin:6px 0 10px; font-weight:800; letter-spacing:.4px }
.cm-title .cm-sub{ font-weight:600; color:#c7b39a }
.cm-attrs{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px }
.cm-attrs li{ line-height:1.4 }
.cm-note{ margin-top:0; color:#c7c0b4; font-size:.95rem }


/* ===== Cartas Mestras: upgrades (3 colunas + modal) ===== */
.cm-grid{ display:grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap:22px }
@media (max-width: 1200px){ .cm-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
@media (max-width: 720px){ .cm-grid{ grid-template-columns: 1fr; } }
.cm-card{ cursor: zoom-in; }

/* Modal */
.cm-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.76);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
  overflow-y: auto;
  max-height: 100vh;
  box-sizing: border-box;
}
.cm-modal.open{ display: flex; }
.cm-modal-img{
  max-width: min(70vw, 500px) !important;
  max-height: 55vh !important;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  object-fit: contain;
}
.cm-close{
  position: fixed; top: 10px; right: 10px;
  font-size: 32px; line-height: 1;
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid #ff7a18;
  background: rgba(0,0,0,.9); color: #ff7a18;
  display:grid; place-items:center; cursor:pointer;
  z-index: 1002;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.cm-close:hover{ transform: scale(1.05); }

/* Responsividade para modais */
@media (max-width: 768px) {
  .cm-modal{
    padding: 10px;
  }
  .cm-modal-img{
    max-width: 80vw;
    max-height: 55vh;
  }
  .cm-close{
    top: 8px; right: 8px;
    width: 40px; height: 40px;
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .cm-modal{
    padding: 6px;
  }
  .cm-modal-img{
    max-width: 75vw;
    max-height: 50vh;
  }
  .cm-close{
    top: 4px; right: 4px;
    width: 36px; height: 36px;
    font-size: 20px;
  }
}
.cm-caption{
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center; font-weight: 700; color: #ffcf99;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  padding: 6px 8px;
}


/* ===== Cartas Mestras: correções de layout e proporção ===== */
.cm-grid{ align-items: start; }
.cm-card{
  grid-template-columns: 240px 1fr; /* imagem mais estreita para caber em 3 colunas */
  align-items: start;
}
@media (max-width: 1200px){ .cm-card{ grid-template-columns: 220px 1fr; } }
@media (max-width: 720px){ .cm-card{ grid-template-columns: 1fr; } }

/* Coluna da imagem: mantém proporção de carta (2:3) e evita estourar altura */
.cm-image{
  width: 100%;
  aspect-ratio: 2 / 3;
  max-height: 420px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:#0e1118;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}
.cm-image img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* sem distorcer */
  display: block;
}

/* Texto do card: evita estouro e mantém boa leitura */
.cm-body{ overflow: hidden; }
.cm-attrs{ margin-top: 6px; }
.cm-attrs li{ word-break: normal; overflow-wrap: anywhere; }


/* ===== Cartas Mestras: layout final (2 colunas desktop, 1 no mobile) ===== */
.cm-grid{ display:grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap:24px; align-items:start; }
@media (max-width: 900px){ .cm-grid{ grid-template-columns: 1fr; } }

/* Cartão com duas colunas internas: imagem fixa + texto */
.cm-card{ display:grid; grid-template-columns: 280px 1fr; gap:16px; align-items:start; }
@media (max-width: 1200px){ .cm-card{ grid-template-columns: 260px 1fr; } }
@media (max-width: 720px){ .cm-card{ grid-template-columns: 1fr; } }

/* Imagem com proporção 2:3 sem distorção */
.cm-image{ width:100%; aspect-ratio: 2/3; max-height: 520px; overflow:hidden; display:grid; place-items:center; }
.cm-image img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ===== Efeito de Hover nas Imagens ===== */
.hover-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Efeito de zoom ao passar o mouse */
.hover-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.hover-card:hover img {
  transform: scale(1.1);
}

/* Legenda aparece no hover */
.hover-card figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 8px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
}
.hover-card:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Livro (Regulamento) ===== */
#livro-guardian{ border:1px solid rgba(255,122,24,.35); }
.livro-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:14px; }
.livro-hero{ margin: 6px 0 18px; display:grid; place-items:center; }
.livro-hero img{ max-width: 320px; width: 100%; height: auto; display:block; border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.45); }
.livro-hero figcaption{ color:#cfc7bb; font-size:.95rem; margin-top:8px; text-align:center; }
.livro-content{ color:#fff; }
.livro-content p{ text-align: justify; margin: 0 0 12px; }
.livro-content ul{ margin: 0 0 12px 1.25rem; display: grid; gap: 4px; }
.livro-table{ width:100%; border-collapse:collapse; margin: 8px 0 16px; background: rgba(10,14,20,.5); border:1px solid rgba(255,255,255,.08); border-radius: 10px; overflow:hidden; }
.livro-table th, .livro-table td{ padding:10px 12px; text-align:left; color:#fff; }
.livro-table thead{ background: rgba(255,122,24,.15); }
.livro-table tbody tr + tr td{ border-top: 1px solid rgba(255,255,255,.08); }
@media (max-width: 720px){
  .livro-hero img{ max-width: 260px; }
}

/* Bloco explicativo - Ordem da Sinergia (página livro) */
.livro-sinergia{
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 14px;
  border:1px solid rgba(255,122,24,.28);
  background: linear-gradient(180deg,#141821,#10131c);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(180px, 1fr);
  gap: 18px;
}
.livro-sinergia-text p{
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: var(--muted);
}
.livro-sinergia-meta{
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:.9rem;
  color:#b0b6c3;
}
.livro-sinergia-meta small{
  color:#8d96a8;
}
@media (max-width: 720px){
  .livro-sinergia{
    grid-template-columns: 1fr;
  }
  .livro-sinergia-meta{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.12);
    padding-left:0;
    padding-top:10px;
  }
}

/* ===== Lista de Territórios no modal ===== */
.territories-modal { max-width: 700px !important; max-height: 70vh !important; overflow-y: auto; }
.territories-list{
  margin-top: 10px;
  display: grid;
  gap: 10px;
  max-height: 60vh;
  overflow: auto;
  padding-right: 6px;
}
.territory-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.t-left .t-name{ font-weight: 700; }
.t-right{ display: flex; align-items: center; gap: 8px; }
.t-status{ opacity: 0.9; font-weight: 600; }

.btn .badge{
  margin-left: .5rem;
  padding: .1rem .4rem;
  font-size: .8rem;
  font-weight: 700;
  border-radius: .5rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}

/* ===== Mini Painel Admin ===== */
.adm-toggle{
  position: fixed; right: 18px; bottom: 18px;
  z-index: 1000;
  padding: .55rem .8rem;
  border-radius: .7rem;
  background: #1f2937; color:#fff; border:1px solid #374151;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.adm-toggle[aria-expanded="true"]{ background:#374151 }

.adm-panel{
  position: fixed; right: 18px; bottom: 66px; width: 340px;
  background: rgba(12,14,20,.95); color:#e5e7eb;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px; backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  z-index: 1000; display: none;
}
.adm-panel[aria-hidden="false"]{ display: block; }

.adm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.adm-close{ background:transparent; color:#9ca3af; border:0; font-size:1rem; cursor:pointer }
.adm-close:hover{ color:#fff }

.adm-body{ padding: .9rem 1rem 1.1rem }

.adm-field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.7rem }
.adm-field span{ font-size:.85rem; color:#9ca3af }
.adm-field select{
  width:100%; background:#0b1020; color:#e5e7eb;
  border:1px solid #2a3142; border-radius:.6rem; padding:.5rem .6rem;
  outline:none;
}

.adm-actions{ display:flex; gap:.6rem; margin-top:.4rem }
.adm-actions .btn{ padding:.5rem .8rem; border-radius:.6rem; border:1px solid #40475d; background:#11172a; color:#e5e7eb }
.adm-actions .btn:hover{ background:#182038 }
.adm-actions .btn.btn-primary{ border-color:#82410b; background:linear-gradient(180deg,#c46b1f,#8b4513); color:#fff }
.adm-actions .btn.btn-secondary{ background:#0d1326 }

.adm-more{ margin-top:.8rem }
.adm-bulk{ padding:.5rem 0 }
.adm-bulk-row{ display:flex; gap:.5rem; align-items:center }
.adm-bulk-row select{ flex:1 }
.adm-bulk-row .btn{ white-space:nowrap }

/* ===== FIX: Trono das Insígnias — layout estável e imagens proporcionais ===== */

.trono-section{
  --medal-size: clamp(120px, 16vw, 180px); /* tamanho da medalha por viewport */
}

/* grade responsiva dos cards */
.trono-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 22px;
}
@media (max-width: 1100px){
  .trono-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .trono-grid{ grid-template-columns: 1fr; }
}

/* card do trono */
.trono-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: #0e1118;
  border-radius: 14px;
}

/* área da imagem: sempre quadrada e centralizada */
.trono-card-media{
  width: 100%;
  height: var(--medal-size);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 10px;
  background: #0b0f16;
  border-radius: 12px;
  overflow: hidden; /* evita qualquer transbordo */
}

/* a medalha SEMPRE cabe no quadrado, sem cortar nem distorcer */
.trono-card-media img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* legenda e “Aguardando” */
.trono-card h4{
  margin: 0;
  font-size: 0.95rem;
  text-align: center;
}
.trono-user{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.trono-user img{
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
}

/* CINTA DE SEGURANÇA:
   se algum <img> ficou solto dentro da seção (fora do card),
   não deixa ele estourar o painel */
.trono-section > img{
  max-width: 100%;
  height: auto !important;
  display: block;
  margin: 0 auto;
}