/* ============================================================
   SAINT SEIYA IDLE — "Templo de Mármore Cinza" (tema único, 2026-11-12)
   Mármore cinza-pérola, grafite e ouro envelhecido discreto. Formas suaves,
   cantos arredondados como pedra polida, filetes dourados finos, frisos de meandro,
   colunas jônicas e a estátua de Atena. Carregado depois de style.css e marmore.css.
   ============================================================ */
:root {
  --ink: #23272b;          /* grafite */
  --ink-2: #474d54;
  --muted: #7a8087;
  --paper: #f4f3f0;        /* mármore pérola */
  --paper-2: #e2e1dd;      /* mármore cinza do fundo */
  --surface: #fbfbf9;
  --rule: #d7d5d0;
  --rule-2: #c2bfb8;
  --gold: #a8873f;         /* ouro envelhecido */
  --gold-deep: #7c6229;
  --gold-soft: #ece2c8;
  --line-gold: #cdb784;
  --surface-ouro: #f7f2e6;
  --surface-ouro-2: #efe5cd;
  --topo: rgba(240, 239, 235, .9);
  --raio: 14px;
  --raio-g: 22px;
  --sombra: 0 1px 1px rgba(30, 34, 38, .04), 0 2px 6px rgba(30, 34, 38, .05), 0 18px 40px -22px rgba(30, 34, 38, .35);
  --sombra-alta: 0 2px 4px rgba(30, 34, 38, .06), 0 26px 50px -24px rgba(30, 34, 38, .45);
  /* veios do mármore cinza: largos, suaves e em tons de grafite */
  --marmore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0028 .009' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .34 0 0 0 0 .37 0 0 0 -1.9 1.08'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23m)' opacity='.5'/%3E%3C/svg%3E");
  --meandro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h4V3h12v6h-6V6h3M16 11h8' fill='none' stroke='%23a8873f' stroke-width='1.2'/%3E%3C/svg%3E");
  --losango: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 1l5 5-5 5-5-5z' fill='%23a8873f'/%3E%3C/svg%3E");
  --f-head: 'Cinzel', 'Marcellus SC', serif;
}
html { color-scheme: light; }
body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(900px 900px at 100% 100%, rgba(120, 124, 130, .18), transparent 70%),
    var(--marmore) 0 0 / 900px 900px,
    var(--paper-2);
  color: var(--ink);
}

/* ---------- títulos: capitulares gregas com friso ---------- */
h1, h2, h3, h4, .cinzel { font-family: var(--f-head); }
.page-head { border: 0; margin: 2px 0 22px; padding-bottom: 14px; position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.page-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: var(--meandro) repeat-x left center / 14px 7px;
  -webkit-mask: linear-gradient(90deg, #000, #000 40%, transparent); mask: linear-gradient(90deg, #000, #000 40%, transparent);
  opacity: .7;
}
.page-head h1 { font-size: 30px; font-weight: 600; letter-spacing: .14em; color: var(--ink); }
.page-head p { font-style: italic; color: var(--muted); }

/* ---------- topo: entablamento de mármore ---------- */
#topbar {
  background: linear-gradient(rgba(250, 250, 248, .92), rgba(236, 235, 231, .9)), var(--marmore) 0 0 / 900px 900px;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-2);
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .6), 0 10px 24px -18px rgba(30, 34, 38, .5);
}
#topbar::after { bottom: -9px; height: 8px; background: var(--meandro) repeat-x left center / 16px 8px; opacity: .45; }
.logo-cdz { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: .12em; color: var(--ink); }
.logo-idle { color: var(--gold); letter-spacing: .3em; font-weight: 600; }
.coin {
  background: linear-gradient(#fff, #f1f0ec); border: 1px solid var(--rule); border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(30, 34, 38, .06); padding: 3px 14px 3px 4px;
}
.conta-btn { border-radius: 999px; background: linear-gradient(#fff, #f0efeb); border: 1px solid var(--rule); }
.conta-btn.entrar { background: var(--ink); border-color: var(--ink); color: #f4f1e8; border-radius: 999px; letter-spacing: .2em; }

/* ---------- menu: estela de mármore com a estátua de Atena ---------- */
#tabs {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25)),
    var(--marmore) 0 0 / 900px 900px, #ecebe7;
  border-right: 1px solid var(--rule-2);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .8), 6px 0 24px -20px rgba(30, 34, 38, .6);
  padding: 20px 14px;
}
#tabs::after { display: none; }
#tabs button { border-radius: 999px; padding: 9px 14px; font-family: var(--f-head); font-weight: 600; letter-spacing: .08em; color: var(--ink-2); transition: background .2s, color .2s, box-shadow .2s; }
#tabs button:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
#tabs button.active {
  background: linear-gradient(#fff, #f6f4ee); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-gold), 0 6px 16px -10px rgba(124, 98, 41, .55);
}
#tabs button.active::before {
  content: ''; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: var(--losango) center / contain no-repeat;
}
#tabs button { position: relative; }
@media (min-height: 940px) {
  #tabs .nav-foot { padding-top: 0; }
  #tabs .nav-foot::before {
    content: ''; display: block; height: min(34vh, 330px); margin: 8px auto 6px;
    background: url(../assets/layout/estatua_atena.png) center bottom / contain no-repeat;
    filter: drop-shadow(0 10px 14px rgba(30, 34, 38, .25)); opacity: .96;
  }
}

/* ---------- colunas jônicas emoldurando o conteúdo ---------- */
@media (min-width: 1180px) {
  main { padding-left: 64px; padding-right: 76px; position: relative; }
  #layout::after, main::before {
    content: ''; position: fixed; top: calc(var(--top) + 8px); bottom: 0; width: 46px; pointer-events: none; z-index: 1;
    background:
      url(../assets/layout/coluna_capitel.png) center top / 100% auto no-repeat,
      url(../assets/layout/coluna_base.png) center bottom / 100% auto no-repeat,
      url(../assets/layout/coluna_fuste.png) center top / 55% auto repeat-y;
    filter: drop-shadow(4px 0 8px rgba(30, 34, 38, .18));
  }
  #layout::after { right: 12px; }
  main::before { left: calc(var(--side) + 6px); }
}

/* ---------- superfícies: placas de mármore polido com filete dourado ---------- */
.panel, .frame {
  background: linear-gradient(rgba(255, 255, 255, .86), rgba(250, 250, 247, .8)), var(--marmore) 0 0 / 900px 900px, var(--surface);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--raio-g);
  box-shadow: 0 0 0 1px var(--rule), var(--sombra);
  position: relative;
}
.panel { padding: 24px 26px; margin-bottom: 22px; }
.panel::before {
  display: block; content: ''; position: absolute; inset: 6px; border-radius: calc(var(--raio-g) - 5px);
  border: 1px solid rgba(168, 135, 63, .22); pointer-events: none;
}
.panel h2 { font-weight: 600; letter-spacing: .08em; }
.panel h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .22em; font-weight: 600; color: var(--ink-2);
}
.panel h3::before { content: ''; flex: 0 0 9px; height: 9px; background: var(--losango) center / contain no-repeat; }
.panel h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-gold), transparent); }

/* ---------- botões: pedras lapidadas ---------- */
button { border-radius: 999px; background: linear-gradient(#fff, #f0efeb); border: 1px solid var(--rule-2); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(30, 34, 38, .08); transition: transform .12s, box-shadow .2s, filter .2s; }
button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--gold); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgba(124, 98, 41, .6); }
button:active:not(:disabled) { transform: translateY(0); }
button.primary {
  background: linear-gradient(#c7a964, var(--gold) 55%, #8d6f30); border: 1px solid #806427; color: #fffdf6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -8px rgba(124, 98, 41, .7);
}
button.gold { background: linear-gradient(#fbf7ec, var(--surface-ouro-2)); border: 1px solid var(--line-gold); color: var(--gold-deep); }
.chip { border-radius: 999px; }
select, input, .acc-form input { border-radius: 12px; }

/* ---------- barras ---------- */
.bar { border-radius: 999px; overflow: hidden; background: #e6e5e1; border: 1px solid var(--rule); }
.bar > div, #afk-bar, .bar.gold > div { border-radius: 999px; background: linear-gradient(90deg, #8d6f30, var(--gold), #d8c088); }

/* ---------- Santuário: pintura do chefe numa moldura arredondada ---------- */
.hero-banner { border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra-alta); }
.hero-banner .boss-art { border-radius: 50%; }
.tag-red { border-radius: 999px; padding: 4px 12px; background: #8e2a22; }

/* ---------- cartas ---------- */
.hcard { border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); border-top-width: 1px; box-shadow: 0 1px 2px rgba(30, 34, 38, .06), 0 10px 22px -16px rgba(30, 34, 38, .5); }
.hcard img { border-radius: 0; background: radial-gradient(circle at 50% 30%, #4b5056, #1d2024 82%); }
.hcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rare, var(--rule-2)); z-index: 2; }
.hcard.r-C { --rare: #9aa1ab; } .hcard.r-I { --rare: #4f9e5f; } .hcard.r-R { --rare: #3d78d8; } .hcard.r-E { --rare: #8a4fd0; }
.hcard.r-L { --rare: #d08a2a; } .hcard.r-SR { --rare: #d24a6a; } .hcard.r-SSR { --rare: linear-gradient(90deg, #c7a964, #fff3c8, #c7a964); }
.slot { border-radius: 16px; overflow: hidden; }

/* ---------- batalha e eventos ---------- */
#battle-wrap, .battle-frame, canvas#battle { border-radius: 18px; }
.evento, .evt-card, .loja-pac, .merc-oferta { border-radius: 18px; }
.loja-pac { background: linear-gradient(#fff, #f4f3ef); border: 1px solid var(--rule); box-shadow: var(--sombra); }
.loja-selo { border-radius: 999px; background: var(--ink); color: #f1e6c8; letter-spacing: .18em; }
.modal-box, #modal-content, .modal .panel { border-radius: var(--raio-g); }

/* ---------- respiro em telas pequenas ---------- */
@media (max-width: 860px) {
  .panel { padding: 18px; border-radius: 18px; }
  #tabs button.active::before { display: none; }
}

/* banner do próximo chefe: pintura escura em moldura de mármore (o texto é claro) */
.panel.hero-banner {
  color: #f4efe2; border: 1px solid rgba(255, 255, 255, .5);
  background:
    linear-gradient(90deg, rgba(24, 27, 31, .96) 0%, rgba(24, 27, 31, .82) 48%, rgba(24, 27, 31, .35) 100%),
    radial-gradient(520px 340px at 82% 50%, rgba(199, 169, 100, .35), transparent 70%),
    var(--marmore) 0 0 / 900px 900px, #2c3036;
  box-shadow: 0 0 0 1px var(--rule-2), var(--sombra-alta);
}
.panel.hero-banner::before { border-color: rgba(205, 183, 132, .35); }
.panel.hero-banner h2 { color: #fbf7ec; letter-spacing: .1em; }
.panel.hero-banner .sub, .panel.hero-banner .muted { color: #d9cdb0; }
.panel.hero-banner .boss-art { border: 2px solid #d9c595; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 20px 50px rgba(0, 0, 0, .45); }

.correio-btn .ico img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ícones do menu: parados (pedido de 2026-11-12) */
#tabs .ico, #tabs .ico * { animation: none !important; transform: none !important; }

/* Invocação: Bilhetes e Dourada lado a lado */
.invocacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 22px; }
.invocacoes .panel { display: flex; flex-direction: column; gap: 10px; }
.invocacoes .panel h2 { text-align: center; margin: 0; }
.invocacoes .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.invocacoes .rates { justify-content: center; }
.panel.dourada { background: linear-gradient(rgba(252, 248, 238, .92), rgba(246, 238, 220, .86)), var(--marmore) 0 0 / 900px 900px, var(--surface-ouro); }
.panel.dourada::before { border-color: rgba(168, 135, 63, .45); }

/* sem friso sob o topo: o meandro fica só no cabeçalho de cada página */
#topbar::after { display: none; }

/* chances da Invocação: tabela discreta (sem etiquetas coloridas) */
.invocacoes .rates { display: block; margin: 4px 0 6px; }
.chances { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0 28px; padding: 10px 6px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.chance { display: flex; align-items: center; gap: 9px; padding: 5px 2px; font-size: 13.5px; color: var(--ink-2); border-bottom: 1px dotted rgba(122, 128, 135, .25); }
.chance:nth-child(4), .chance:last-child { border-bottom: 0; }
.chance i { flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--rare, #9aa1ab); opacity: .85; }
.chance span { letter-spacing: .04em; }
.chance b { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chance.r-C { --rare: #9aa1ab; } .chance.r-I { --rare: #6f9a76; } .chance.r-R { --rare: #6a8cc4; } .chance.r-E { --rare: #9378c0; }
.chance.r-L { --rare: #c49a55; } .chance.r-SR { --rare: #c07a86; } .chance.r-SSR { --rare: var(--gold); }
.chance.r-SSR span, .chance.r-SSR b { color: var(--gold-deep); }

/* Ranking por season */
.season-topo .season-nome { font-family: var(--f-head); letter-spacing: .1em; text-transform: capitalize; margin-left: 6px; }
.rk-abas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rk-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 0 22px; align-items: start; }
@media (max-width: 900px) { .rk-grid { grid-template-columns: 1fr; } }
/* painel administrativo */
.adm-premios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-premios input, #adm-form input, #adm-form select { width: 100%; min-width: 0; box-sizing: border-box; }
.adm-user { display: block; padding: 4px 0; border-bottom: 1px dotted var(--rule); }

/* retratos: o fundo transparente da arte nunca mostra o mármore claro por trás (parecia "fundo branco") */
img.art, .dhead img, .destaque-arte, .boss-art, .rival img, .slot img, .merc-oferta img, .summon-res img {
  background: radial-gradient(circle at 50% 30%, #4b5056, #1d2024 82%);
}