/* ==========================================================================
   RUNE UI — biblioteca de componentes do RAG IDLE
   --------------------------------------------------------------------------
   Um mini design system. Toda peça de interface do site sai daqui, o que
   mantém a coerência quando o projeto crescer (wiki, ranking, painel).
   Prefixo `rune-` para nunca colidir com estilos de seção.
   ========================================================================== */


/* ==========================================================================
   1. RUNE FRAME — a assinatura visual do site
   Moldura dourada com quatro cantos em L, desenhados só com gradiente.
   Sem imagem, escala em qualquer tamanho, colorível por token.
   ========================================================================== */

.rune-frame {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Os quatro cantos ornamentados. */
.rune-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  --c: var(--gold);
  --len: 16px;
  --thk: 2px;
  background:
    /* superior esquerdo */
    linear-gradient(var(--c), var(--c)) 0 0        / var(--thk) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0        / var(--len) var(--thk) no-repeat,
    /* superior direito */
    linear-gradient(var(--c), var(--c)) 100% 0     / var(--thk) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0     / var(--len) var(--thk) no-repeat,
    /* inferior esquerdo */
    linear-gradient(var(--c), var(--c)) 0 100%     / var(--thk) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100%     / var(--len) var(--thk) no-repeat,
    /* inferior direito */
    linear-gradient(var(--c), var(--c)) 100% 100%  / var(--thk) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100%  / var(--len) var(--thk) no-repeat;
  filter: drop-shadow(0 0 4px var(--gold-a35));
}

.rune-frame--lg::before { --len: 26px; --thk: 3px; }
.rune-frame--flush { border-radius: 0; }

/* Variante sem preenchimento — só a moldura, para sobrepor conteúdo. */
.rune-frame--hollow { background: transparent; backdrop-filter: none; }


/* ==========================================================================
   2. RUNE PANEL — superfície de conteúdo
   ========================================================================== */

.rune-panel {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rune-panel--sunken {
  background: var(--sunken);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
}


/* ==========================================================================
   3. RUNE BUTTON
   ========================================================================== */

.rune-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  min-height: 46px;
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  transition:
    transform var(--fast) var(--ease),
    box-shadow var(--base) var(--ease),
    background-color var(--base) var(--ease),
    border-color var(--base) var(--ease),
    color var(--base) var(--ease);
}

.rune-btn:active { transform: translateY(1px); }

.rune-btn[disabled],
.rune-btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* --- primária: ouro sólido, a ação que queremos que aconteça --- */
.rune-btn--primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #c9a33c);
  color: var(--gold-ink);
  border-color: var(--gold-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(0, 0, 0, .22),
    0 6px 18px rgba(232, 193, 79, .22);
}
.rune-btn--primary:hover {
  background: linear-gradient(180deg, #fff3c4, var(--gold-hi) 55%, var(--gold));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 0 rgba(0, 0, 0, .2),
    0 8px 26px rgba(232, 193, 79, .42);
  transform: translateY(-2px);
}

/* --- fantasma: moldura dourada, ação secundária --- */
.rune-btn--ghost {
  background: rgba(232, 193, 79, .06);
  color: var(--gold-hi);
  border-color: var(--gold-a35);
}
.rune-btn--ghost:hover {
  background: rgba(232, 193, 79, .14);
  border-color: var(--gold);
  color: var(--gold-hi);
  transform: translateY(-2px);
  box-shadow: var(--glow-gold);
}

/* --- discreta: sem moldura, para ações terciárias --- */
.rune-btn--quiet {
  background: transparent;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  min-height: 38px;
  padding: var(--s2) var(--s3);
}
.rune-btn--quiet:hover { color: var(--gold-hi); }

/* --- emoldurada: a que abre o site ---
   Borda dupla com um vão escuro entre as duas linhas, serifada e espaçada.
   É o botão de portal de MMO: pesa mais que um botão comum de propósito. */
.rune-btn--ornate {
  font-family: var(--f-epic);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  padding: var(--s4) clamp(var(--s8), 4vw, var(--s16));
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 52%, #c9a33c);
  color: var(--gold-ink);
  border: 1px solid var(--gold-hi);
  box-shadow:
    inset 0 0 0 3px rgba(42, 30, 5, .45),
    inset 0 0 0 4px rgba(247, 227, 154, .55),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 8px 24px rgba(232, 193, 79, .22);
}
.rune-btn--ornate:hover {
  background: linear-gradient(180deg, #fff3c4, var(--gold-hi) 52%, var(--gold));
  box-shadow:
    inset 0 0 0 3px rgba(42, 30, 5, .4),
    inset 0 0 0 4px rgba(255, 246, 214, .7),
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 10px 34px rgba(232, 193, 79, .45);
  transform: translateY(-2px);
}

/* variante escura, para a ação secundária ao lado da dourada */
.rune-btn--ornate.rune-btn--dark {
  background: linear-gradient(180deg, rgba(20, 28, 54, .95), rgba(10, 14, 28, .95));
  color: var(--gold-hi);
  border-color: var(--gold-a35);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, .5),
    inset 0 0 0 4px rgba(232, 193, 79, .3),
    0 8px 24px rgba(0, 0, 0, .4);
}
.rune-btn--ornate.rune-btn--dark:hover {
  color: #fff6da;
  border-color: var(--gold);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, .45),
    inset 0 0 0 4px rgba(232, 193, 79, .55),
    0 10px 30px rgba(232, 193, 79, .2);
  transform: translateY(-2px);
}

.rune-btn--sm { min-height: 38px; padding: var(--s2) var(--s4); font-size: var(--t-xs); }
.rune-btn--lg { min-height: 56px; padding: var(--s4) var(--s10); font-size: var(--t-md); }
.rune-btn--block { display: flex; width: 100%; }

/* --- estado de carregamento: some o rótulo, entra o giro --- */
.rune-btn.is-loading { pointer-events: none; color: transparent !important; }
.rune-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--gold-ink);
  animation: spin .7s linear infinite;
}
.rune-btn--ghost.is-loading::after { color: var(--gold); }


/* ==========================================================================
   4. RUNE GEM — o losango esmeralda da moldura de referência
   ========================================================================== */

.rune-gem {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #7dffd4, var(--emerald) 45%, var(--emerald-dk));
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--emerald-a30), inset 0 0 4px rgba(255, 255, 255, .6);
  animation: pulse-gem 2.6s ease-in-out infinite;
}
.rune-gem--sm { width: 9px; height: 9px; }
.rune-gem--delayed { animation-delay: 1.3s; }
.rune-gem--gold {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-dk));
  box-shadow: 0 0 10px var(--gold-a35), inset 0 0 4px rgba(255, 255, 255, .6);
}


/* ==========================================================================
   5. RUNE BAR — barra de progresso estilo HUD de RPG
   ========================================================================== */

.rune-bar {
  position: relative;
  height: 10px;
  background: var(--sunken);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}

.rune-bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--emerald-dk), var(--emerald));
  box-shadow: 0 0 10px var(--emerald-a30);
  transition: width var(--base) var(--ease);
  position: relative;
}

/* Ranhuras diagonais — dá a leitura de "barra de jogo", não de formulário. */
.rune-bar__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, .16) 0 6px,
    transparent 6px 14px
  );
}

.rune-bar--hp  .rune-bar__fill { background: linear-gradient(90deg, #8f231b, var(--hp)); box-shadow: 0 0 10px rgba(224,72,60,.35); }
.rune-bar--sp  .rune-bar__fill { background: linear-gradient(90deg, #1c5da8, var(--sp)); box-shadow: 0 0 10px rgba(74,163,255,.35); }
.rune-bar--exp .rune-bar__fill { background: linear-gradient(90deg, #5a37a8, var(--exp)); box-shadow: 0 0 10px rgba(155,107,255,.35); }
.rune-bar--gold .rune-bar__fill { background: linear-gradient(90deg, var(--gold-dk), var(--gold)); box-shadow: var(--glow-gold); }

.rune-bar--thin { height: 6px; }
.rune-bar--thick { height: 16px; }


/* ==========================================================================
   6. RUNE FIELD — campo de formulário
   ========================================================================== */

.rune-field { display: flex; flex-direction: column; gap: var(--s2); }

.rune-field__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rune-field__wrap { position: relative; display: flex; align-items: center; }

.rune-input {
  width: 100%;
  padding: var(--s3) var(--s4);
  min-height: 46px;
  background: var(--sunken);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--t-md);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.rune-input::placeholder { color: var(--dim); }
.rune-input:focus {
  border-color: var(--gold);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 0 3px var(--gold-a15);
}
/* O anel de foco do campo já é evidente — dispensa o outline global. */
.rune-input:focus-visible { outline: none; }

/* Espaço para o botão de revelar senha. */
.rune-input--with-action { padding-right: 46px; }

.rune-field__action {
  position: absolute;
  right: var(--s2);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.rune-field__action:hover { color: var(--gold); background: var(--gold-a15); }

/* Mensagem de erro — o espaço é reservado para o layout não pular. */
.rune-field__error {
  display: block;
  min-height: 1.15em;
  font-size: var(--t-xs);
  color: var(--danger);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.rune-field.has-error .rune-field__error { opacity: 1; transform: none; }
.rune-field.has-error .rune-input {
  border-color: var(--danger);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 0 3px rgba(227, 86, 74, .16);
}

/* --- caixa de seleção --- */
.rune-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: var(--t-sm);
  color: var(--muted);
  cursor: pointer;
  line-height: 1.45;
}
.rune-check input {
  appearance: none;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  background: var(--sunken);
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-sm);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.rune-check input:checked {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi);
}
.rune-check input:checked::after {
  content: '';
  display: block;
  width: 5px; height: 10px;
  margin: 2px auto 0;
  border: solid var(--gold-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.rune-check a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }



/* ==========================================================================
   7. RUNE TABS
   ========================================================================== */

.rune-tabs {
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  background: var(--sunken);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-md);
}

.rune-tab {
  flex: 1;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--r-sm);
  text-align: center;
  transition: color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.rune-tab:hover { color: var(--text); }
.rune-tab[aria-selected="true"] {
  color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 10px rgba(232, 193, 79, .25);
}

/* Variante sublinhada — usada nas abas de notícias. */
.rune-tabs--line { background: none; border: 0; border-bottom: 1px solid var(--gold-a15); padding: 0; gap: var(--s2); border-radius: 0; }
.rune-tabs--line .rune-tab {
  flex: 0 0 auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--t-xs);
}
.rune-tabs--line .rune-tab[aria-selected="true"] {
  color: var(--gold);
  background: none;
  border-bottom-color: var(--gold);
  box-shadow: none;
}


/* ==========================================================================
   8. RUNE TOOLTIP
   ========================================================================== */

.rune-tooltip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translate(-8px, -50%);
  padding: var(--s2) var(--s3);
  background: var(--panel-hi);
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--gold-hi);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-md);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
  z-index: 2;
}
/* Bico apontando para o ícone. */
.rune-tooltip::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--gold-a35);
}

:where(a, button):hover > .rune-tooltip,
:where(a, button):focus-visible > .rune-tooltip {
  opacity: 1;
  transform: translate(0, -50%);
}


/* ==========================================================================
   9. RUNE CHIP / BADGE
   ========================================================================== */

.rune-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-hi);
  background: var(--gold-a15);
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-pill);
}
.rune-chip--emerald { color: var(--emerald); background: rgba(46,230,168,.10); border-color: var(--emerald-a30); }
.rune-chip--muted   { color: var(--muted);   background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }


/* ==========================================================================
   10. RUNE CARD — base para pilares, sistemas, classes
   ========================================================================== */

.rune-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6);
  height: 100%;
  background: linear-gradient(160deg, var(--panel-hi), var(--panel));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md);
  overflow: hidden;
  transition:
    transform var(--base) var(--ease),
    border-color var(--base) var(--ease),
    box-shadow var(--base) var(--ease);
}

/* Fio de luz dourado que acende no topo do card ao passar o mouse. */
.rune-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.rune-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-a35);
  box-shadow: var(--shadow-md), 0 0 30px rgba(232, 193, 79, .10);
}
.rune-card:hover::before { opacity: 1; }

.rune-card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  font-size: 26px;
  line-height: 1;
  background: var(--sunken);
  border: 1px solid var(--gold-a35);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5);
}

.rune-card__title { font-family: var(--f-epic); font-size: var(--t-lg); color: var(--gold-hi); }
.rune-card__text  { font-size: var(--t-sm); color: var(--muted); }


/* ==========================================================================
   11. DIVISOR ORNAMENTAL
   ========================================================================== */

.rune-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--gold-a35);
}
.rune-divider::before,
.rune-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 160px;
  background: linear-gradient(90deg, transparent, var(--gold-a35));
}
.rune-divider::after { background: linear-gradient(90deg, var(--gold-a35), transparent); }


/* ==========================================================================
   12. MODAL — casca compartilhada (login vive dentro dela)
   ========================================================================== */

.rune-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s4);
  visibility: hidden;
}
.rune-modal.is-open { visibility: visible; }

.rune-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.rune-modal.is-open .rune-modal__backdrop { opacity: 1; }

.rune-modal__dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - var(--s8));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease-out-back);
}
.rune-modal.is-open .rune-modal__dialog { opacity: 1; transform: none; }

/* A barra de rolagem dourada da página fica berrante dentro de uma janela
   pequena — aqui ela precisa desaparecer na moldura. */
.rune-modal__dialog { scrollbar-width: thin; scrollbar-color: rgba(232,193,79,.28) transparent; }
.rune-modal__dialog::-webkit-scrollbar { width: 6px; }
.rune-modal__dialog::-webkit-scrollbar-track { background: transparent; }
.rune-modal__dialog::-webkit-scrollbar-thumb {
  background: rgba(232, 193, 79, .28);
  border: 0;
  border-radius: 99px;
}

/* --- barra de título: a citação direta da janela clássica de RO --- */
.rune-titlebar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: linear-gradient(180deg, var(--bg-600), var(--bg-700));
  border-bottom: 1px solid var(--gold-a35);
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.rune-titlebar__title {
  flex: 1;
  font-family: var(--f-pixel);
  font-size: 10px;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}
.rune-titlebar__close {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .25);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.rune-titlebar__close:hover { color: #fff; background: var(--danger); border-color: var(--danger); }