:root {
  --bg:#070b12;
  --panel:#0e1520;
  --muted:#9aa6b2;
  --text:#e9eef5;
  --brand:#7ae582;
  --brand-2:#58a6ff;
  --border:#1b2432;
}

* { box-sizing:border-box }
html,body {
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
}
a { color:var(--brand-2); text-decoration:none }
img { display:block; max-width:100% }

.wrap { max-width:1100px; margin:20px auto; padding:0 16px }

/* Top bar */
.top {
  display:flex; gap:12px; align-items:center; margin-bottom:14px;
}
.top h1 {
  margin:0; font-size:22px; font-weight:800; letter-spacing:.2px;
}
.top .hint { color:var(--muted); font-size:14px }

/* --- Board layers --- */
.board { position: relative; background:#0a0f17; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.board-inner { position:absolute; inset:0; transform-origin: 0 0; }

/* SVG das arestas fica por baixo dos nós, mas acima do fundo */
.board-edges {
  position:absolute; inset:0;
  z-index: 0;
  pointer-events: none;           /* linha não intercepta o mouse */
}

/* --- Min/Max do painel --- */
.board-wrap.min .board-viewport{ display:none; }
.board-wrap.min .hide-when-min{ display:none; }
.board-wrap.min{ padding-bottom: 6px; } /* compacta um pouco quando fechado */

/* === Board (novo painel interativo) === */
.board-wrap {
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(14,21,32,.8);
  backdrop-filter: blur(6px);
  margin-bottom:16px;
  padding:10px;
}

.board-toolbar {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}

.board-viewport {
  position:relative;
  height: clamp(320px, 42vh, 520px);
  overflow:hidden;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#0b111a;
  touch-action:none;
}

.board-content { position:absolute; left:0; top:0; transform-origin:0 0; }
.board-nodes { position:absolute; inset:0; z-index: 1; }
.board-overlays { position:absolute; inset:0; z-index: 2; } /* labels/controles */

.board-node {
  position:absolute;
  width:200px;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  background:#0c121c;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.board-node:active { cursor:grabbing; }
.board-node.is-floating{ cursor: grabbing; outline:2px solid rgba(122,229,130,.55); box-shadow:0 10px 30px rgba(0,0,0,.35); }

.board-node img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.board-node .badge {
  position:absolute;
  top:0; left:0; right:0;
  background:rgba(10,16,24,0.85);
  border-bottom:1px solid var(--border);
  text-align:center;
  font-weight:700;
  font-size:14px;
  padding:4px 6px;
  color:var(--text);
  text-shadow:0 1px 2px #000;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

.board-svg { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:visible; }

/* Linha consistente no zoom */
.edge-path {
  fill: none;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

/* Cores e glow */
:root{
  --edge-green: #7aff9a;
  --edge-red:   #ff6b6b;
}
.edge-green{ stroke:#7aff9a; filter: drop-shadow(0 0 4px #7aff9a) drop-shadow(0 0 10px #7aff9a); }
.edge-red  { stroke:#ff6b6b; filter: drop-shadow(0 0 4px #ff6b6b) drop-shadow(0 0 10px #ff6b6b); }

/* (opcional) quando selecionada */
.edge-selected { stroke-dasharray: 6 6; }

.link-label {
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  background:#0f1824;
  border:1px solid var(--border);
  color:var(--text);
  padding:4px 6px;
  border-radius:8px;
  font-size:12px;
  display:flex;
  gap:6px;
  align-items:center;
  z-index:3;
}
.link-btn {
  background:#121a27;
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:6px;
  cursor:pointer;
}
.link-btn:hover { background:#172133; }

/* ===== Link editor ===== */
.link-label .row{ display:flex; gap:6px; align-items:center; }
.link-label .time{ 
  min-width:54px; text-align:center; 
  background:#0b111a; border:1px solid var(--border);
  color:var(--text); padding:4px 8px; border-radius:6px;
  font-variant-numeric: tabular-nums;
}

.link-label .time-edit{
  width:54px;
  min-width:54px;
  max-width:54px;
  height:auto;

  text-align:center;
  background:#0b111a;
  border:1px solid var(--border);
  color:var(--text);

  padding:4px 8px;
  border-radius:6px;

  font:inherit;
  font-size:12px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;

  outline:none;
  box-shadow:none;
  appearance:none;
}

.link-label .time-edit:focus{
  border-color:var(--brand-2);
  box-shadow:0 0 0 2px rgba(88,166,255,.18);
}

.link-label .time-edit::selection{
  background:rgba(88,166,255,.35);
  color:var(--text);
}

.link-label .dir-sel{
  background:#0b111a;border:1px solid var(--border);
  color:var(--text); padding:3px 6px; border-radius:6px; font-size:12px;
}
.link-label .ok-btn{
  background:var(--brand); color:#081018; border:0; 
  padding:4px 8px; border-radius:8px; cursor:pointer; font-weight:700;
}
/* Quando o timer estiver rodando: some o “box” e não capte cliques */
.link-label.locked{
  pointer-events:none;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  opacity:.75;
}
/* botão “Play/OK” discreto, do mesmo tamanho dos +/- */
.link-label .ok-btn{
  background:var(--brand);
  color:#081018;
  border:0;
  padding:2px 6px;     /* igual aos .link-btn */
  border-radius:6px;   /* igual aos .link-btn */
  cursor:pointer;
  font-weight:700;
}

.edge-line{ vector-effect: non-scaling-stroke; stroke-linecap:round; }

.board-viewport.link-mode { outline:2px dashed var(--brand); outline-offset:-6px; }
.toolbtn {
  background:#121a27;
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.toolbtn:hover { background:#172133; }
.toolbtn.green { background:var(--brand); color:#081018; border-color:transparent; }
.toolbtn.red { background:#d9534f; color:#fff; border-color:transparent; }

/* Botão Minimizar/Expandir (pequeno, no canto direito) */
.min-toggle{
  width:32px;
  height:32px;
  padding:0;
  border-radius:10px;
  font-weight:900;
  font-size:18px;
  line-height:1;
  transform: translateY(-2px);
  background:#1f6feb;
  border-color:#388bfd;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.min-toggle:hover{ filter:brightness(1.08); }

/* Esconder controles de zoom (mantém no código para uso futuro) */
#zoomOut, #zoomReset, #zoomIn { display:none; }

/* Nó selecionado (para remover mapa específico) */
.board-node.selected{
  outline:2px solid #1f6feb;
  box-shadow:0 0 0 3px rgba(31,111,235,.18), 0 6px 20px rgba(0,0,0,.25);
}

.board-viewport.drop-hint { box-shadow:0 0 0 2px var(--brand) inset; }

/* === Lista e cards === */
.search-bar {
  display:flex; gap:10px; align-items:center; margin:8px 0 12px;
}
.search-bar input {
  flex:1; padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0b111a; color:var(--text);
}
.results-hint { color:var(--muted); font-size:14px; margin:0 0 8px 2px; }

.grid {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.card {
  cursor:pointer;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#0c121c;
  display:flex;
  flex-direction:column;
}
.card:active { transform:translateY(1px); }
.card-h {
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--border);
  user-select:none;
}
.card-name { font-weight:800; }

.card-h{
  justify-content: space-between;
}
.card-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.card-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.mini-icons{
  display:flex;
  align-items:center;
  gap:6px;
}

.mini-icons{
  display:flex;
  align-items:center;
  gap:8px;
}
.mini-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border-radius:999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
}
.mini-icon img{
  width:18px;
  height:18px;
  object-fit:contain;
}
.mini-icon .count{
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#0b111a;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  font-size:11px;
  line-height:16px;
  text-align:center;
  font-weight:800;
}

/* ícones no node (Route Helper) */
.board-node .node-icons{
  position:absolute;
  right:6px;
  bottom:6px;
  display:flex;
  gap:6px;
  z-index:3;
}

.board-node .mini-icon{ background: rgba(0,0,0,.85); border: 1px solid rgba(255,255,255,.14); }

.board-node .mini-icon img{ opacity: .9; }
.board-node .mini-icon .count{ opacity: 1; }

.card-img {
  aspect-ratio:16/9;
  background:#0a0f17;
  position:relative;
  overflow:hidden;
}
.card-img img {
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.card-img img.placeholder {
  filter:grayscale(0.3) brightness(0.8);
  opacity:0.85;
  transition:opacity 0.25s ease;
}
.card-img img.is-loaded { cursor:grab; }
.card-img img.is-loaded:active { cursor:grabbing; }

/* Modal */
.modal {
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72);
  z-index:50;
}
.modal.open { display:flex; }
.modal-img-wrap {
  max-width:92vw; max-height:88vh;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  border:1px solid var(--border);
  background:#0c121c;
}
.modal-img-wrap img {
  display:block;
  width:100%; height:100%;
  object-fit:contain;
  background:#0a0f17;
}
.modal-close {
  position:absolute; top:14px; right:16px;
  background:#111a26; color:var(--text);
  border:1px solid var(--border);
  padding:8px 12px; border-radius:10px;
  cursor:pointer;
}

.badge {
  display:inline-block;
  background:#101a26;
  border:1px solid var(--border);
  color:var(--muted);
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
}

/* ===== Rotas (Salvar/Carregar) ===== */
.route-controls{display:flex;align-items:center;gap:8px;margin-left:12px;flex-wrap:wrap}
.route-input{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  min-width: 220px;
  outline: none;
}
.route-input::placeholder{color: rgba(255,255,255,.45)}

/* ===== Marca d’água do Route Helper ===== */
.board-watermark{
  position:absolute;
  right: 18px;
  bottom: 14px;

  pointer-events:none; /* não interfere em cliques */
  z-index:0;

  font-weight:700;
  font-size: 14px;
  letter-spacing: 0.06em;

  color: rgba(255,255,255,0.14);
  text-transform: lowercase;
  user-select:none;
  white-space: nowrap;
}

/* garante que conteúdo fique acima */
.board-content{
  position:relative;
  z-index:1;
}

/* Header */
.topbar{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background:linear-gradient(180deg, rgba(7,11,18,.8), rgba(7,11,18,.4));
  border-bottom:1px solid var(--border); padding:12px 18px;
  display:flex; align-items:center; gap:16px
}

.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand-name{letter-spacing:.3px}

.logo{
  width:28px;
  height:28px;
  border-radius:7px
}

.brand-link{
  color:var(--text);
  text-decoration:none
}

.brand-link:hover .brand-name{
  color:#fff
}

.nav{
  margin-left:auto;
  display:flex;
  gap:14px
}

.nav a{
  padding:6px 10px;
  border-radius:10px
}

.nav a:hover{
  background:#0f1824
}

.lang{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:8px
}

.lang .divider{
  opacity:.5
}

.lang-btn{
  background:#121a27;
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer
}

.lang-btn.active{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(122,229,130,.15)
}
.seo-text{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}



/* === Party Router / Voice Rooms === */
/* Mantém o Route Helper no mesmo centro/largura da página principal.
   Em telas largas, a sidebar usa o “espaço morto” à esquerda do conteúdo. */
.party-wrap{
  position:relative;
}

.party-layout{
  position:relative;
}

.party-main{
  min-width:0;
}

.party-sidebar{
  width:320px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(14,21,32,.82);
  padding:12px;
}

/* Desktop largo: sidebar fora do fluxo, à esquerda do conteúdo central. */
@media (min-width:1700px){
  .party-sidebar{
    position:absolute;
    left:-336px;
    top:0;
  }
}

/* Desktop médio: usa grid, mas com sidebar menor para não esmagar o router. */
@media (min-width:901px) and (max-width:1699px){
  .wrap.party-wrap{
    max-width:1280px;
  }

  .party-layout{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:14px;
    align-items:start;
  }

  .party-sidebar{
    width:auto;
    position:sticky;
    top:12px;
  }
}
.party-title{font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.party-help{color:var(--muted);font-size:13px;margin-bottom:10px}
.party-select,.party-input{
  width:100%;
  background:#0b111a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
  margin-bottom:8px;
}
.voice-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.voice-room{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:#0b111a;
  color:var(--text);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
}
.voice-room:hover,.voice-room.active{border-color:var(--brand-2);box-shadow:0 0 0 1px rgba(88,166,255,.25) inset}
.voice-room strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-room small{display:block;color:var(--muted);margin-top:3px}
.party-card{border:1px solid var(--border);border-radius:12px;background:#0b111a;padding:10px;margin-top:10px}
.party-card h3{margin:0 0 8px;font-size:15px}
.party-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.member-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding:8px 0}
.member-row:first-child{border-top:0}
.member-meta{min-width:0}
.member-meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-meta small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-btn{white-space:nowrap}
.status-pill{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:2px 8px;color:var(--muted);font-size:12px}
@media (max-width:900px){
  .party-layout{display:block}
  .party-sidebar{width:auto;position:relative;top:0;margin-bottom:16px}
}


/* === Albion World cinematic background === */
:root{
  --site-bg-image: url("/img/bg-main.jpg");
  --glass-panel: rgba(7, 11, 18, .56);
  --glass-panel-strong: rgba(7, 11, 18, .68);
  --glass-border: rgba(141, 166, 216, .18);
  --glass-border-soft: rgba(255,255,255,.10);
}

html{
  min-height:100%;
  background:#050812;
}

body{
  min-height:100vh;
  background:transparent;
  position:relative;
  isolation:isolate;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(rgba(5,8,15,.04), rgba(5,8,15,.04)),
    var(--site-bg-image) center center / cover no-repeat;
  filter:saturate(1.05) contrast(1.04);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 24%, rgba(10, 16, 30, .08) 0%, rgba(5, 8, 15, .28) 46%, rgba(5, 8, 15, .66) 100%),
    linear-gradient(180deg, rgba(5,8,15,.24) 0%, rgba(5,8,15,.46) 48%, rgba(5,8,15,.72) 100%),
    linear-gradient(90deg, rgba(5,8,15,.42) 0%, rgba(5,8,15,.10) 22%, rgba(5,8,15,.10) 72%, rgba(5,8,15,.48) 100%);
}

.wrap,
.modal{
  position:relative;
  z-index:1;
}

.topbar{
  background:
    linear-gradient(180deg, rgba(7,11,18,.74), rgba(7,11,18,.38));
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 10px 32px rgba(0,0,0,.22);
}

.board-wrap,
.card,
.party-sidebar,
.party-card,
.modal-img-wrap{
  background:var(--glass-panel);
  border-color:var(--glass-border);
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
}

.board-viewport,
.search-bar input,
.route-input,
.party-select,
.party-input,
.voice-room,
.link-label,
.badge,
.lang-btn,
.toolbtn{
  background:rgba(7,12,20,.56);
  border-color:var(--glass-border-soft);
}

.board-viewport{
  background:
    radial-gradient(circle at 50% 0%, rgba(88,166,255,.08), transparent 46%),
    rgba(7,12,20,.52);
}

.card-img{
  background:rgba(7,12,20,.54);
}


/* === Map card borders by zone / Golden marker === */
.card{
  position:relative;
  isolation:isolate;
  padding:2px;
  border:0;
  overflow:hidden;
  background:var(--card-border, var(--glass-panel));
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--card-border, var(--glass-border));
}

.card::after{
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:12px;
  background:rgba(7,11,18,.82);
}

.card-h,
.card-img{
  position:relative;
  z-index:1;
}

/* simple zone borders */
.card-zone-blue{
  --card-border:
    linear-gradient(135deg, rgba(88,166,255,.95), rgba(88,166,255,.18), rgba(88,166,255,.75));
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 24px rgba(88,166,255,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.card-zone-yellow{
  --card-border:
    linear-gradient(135deg, rgba(255,209,102,.95), rgba(255,209,102,.18), rgba(255,209,102,.76));
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 24px rgba(255,209,102,.16),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.card-zone-red{
  --card-border:
    linear-gradient(135deg, rgba(255,92,108,.95), rgba(255,92,108,.16), rgba(255,92,108,.78));
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 24px rgba(255,92,108,.17),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.card-zone-black{
  --card-border:
    linear-gradient(135deg, rgba(86,96,115,.92), rgba(17,24,39,.35), rgba(0,0,0,.94));
  box-shadow:
    0 18px 48px rgba(0,0,0,.36),
    0 0 22px rgba(117,132,160,.12),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Avalon portal border - first preview style, only blue/cyan (no purple) */
.card-avalon,
.card-avalon-t8{
  background:transparent;
}

.card-avalon::before,
.card-avalon-t8::before{
  inset:-42%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(118,215,255,.10) 28deg,
      rgba(118,215,255,.96) 55deg,
      rgba(135,232,255,.74) 92deg,
      transparent 132deg,
      rgba(118,215,255,.70) 190deg,
      transparent 246deg,
      rgba(135,232,255,.62) 302deg,
      transparent 360deg
    );
  filter:blur(8px);
  animation:spinPortal 7s linear infinite;
}

.card-avalon::after,
.card-avalon-t8::after{
  inset:2px;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 8%, rgba(118,215,255,.16), transparent 32%),
    rgba(7,11,18,.84);
}

.card-avalon .card-img::before,
.card-avalon-t8 .card-img::before{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(circle at 30% 50%, rgba(118,215,255,.12), transparent 24%),
    radial-gradient(circle at 70% 45%, rgba(135,232,255,.10), transparent 24%),
    radial-gradient(circle at 50% 70%, rgba(118,215,255,.09), transparent 30%);
  filter:blur(14px);
  opacity:.72;
  animation:smokeDrift 6s ease-in-out infinite alternate;
}

.card-avalon{
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 28px rgba(118,215,255,.20),
    0 0 42px rgba(135,232,255,.10),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Golden Avalon portal */
.card-avalon-t8::before{
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255,215,106,.18) 24deg,
      rgba(255,215,106,.98) 54deg,
      rgba(255,159,28,.92) 92deg,
      transparent 128deg,
      rgba(255,215,106,.76) 190deg,
      transparent 250deg,
      rgba(255,159,28,.80) 306deg,
      transparent 360deg
    );
  filter:blur(7px);
  animation:spinPortal 6s linear infinite;
}

.card-avalon-t8::after{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,215,106,.18), transparent 34%),
    rgba(7,11,18,.84);
}

.card-avalon-t8 .card-img::before{
  background:
    radial-gradient(circle at 32% 48%, rgba(255,215,106,.12), transparent 24%),
    radial-gradient(circle at 68% 46%, rgba(255,159,28,.10), transparent 26%),
    radial-gradient(circle at 50% 70%, rgba(255,235,170,.09), transparent 30%);
}

.card-avalon-t8{
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 28px rgba(255,215,106,.23),
    0 0 46px rgba(255,159,28,.12),
    inset 0 1px 0 rgba(255,255,255,.035);
}

@keyframes spinPortal{
  to{ transform:rotate(360deg); }
}

@keyframes smokeDrift{
  from{ transform:translate(-2%, -1%) rotate(0deg) scale(1); opacity:.54; }
  to{ transform:translate(2%, 1%) rotate(8deg) scale(1.05); opacity:.82; }
}

@media (prefers-reduced-motion: reduce){
  .card-avalon::before,
  .card-avalon-t8::before,
  .card-avalon .card-img::before,
  .card-avalon-t8 .card-img::before{
    animation:none;
  }
}


.top h1,
.brand-name,
.card-name,
.party-title,
.board-toolbar strong{
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}

.top .hint,
.results-hint,
.party-help{
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}

.nav a:hover,
.toolbtn:hover,
.lang-btn:hover{
  background:rgba(18, 31, 50, .66);
}


/* === SEO content (visible and user-friendly) === */
.seo-section{
  max-width:1100px;
  margin:28px auto 36px;
  padding:18px 20px;
  border:1px solid var(--glass-border);
  border-radius:16px;
  background:rgba(7,11,18,.50);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
.seo-section h2{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.25;
}
.seo-section h3{
  margin:18px 0 8px;
  font-size:16px;
  line-height:1.3;
}
.seo-section p{
  margin:0 0 10px;
  color:var(--muted);
}
.seo-section ul{
  margin:10px 0 0;
  padding-left:20px;
  color:var(--muted);
}
.seo-section li{ margin:4px 0; }



/* === Route Helper board node borders - additive only === */
/* Não altera a estrutura do node; apenas soma cor e brilho à borda existente. */
.board-node.card-zone-blue{
  border-color:rgba(88,166,255,.95);
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(88,166,255,.40),
    0 0 20px rgba(88,166,255,.22);
}

.board-node.card-zone-yellow{
  border-color:rgba(255,209,102,.95);
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,209,102,.38),
    0 0 20px rgba(255,209,102,.20);
}

.board-node.card-zone-red{
  border-color:rgba(255,92,108,.95);
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,92,108,.38),
    0 0 20px rgba(255,92,108,.20);
}

.board-node.card-zone-black{
  border-color:rgba(86,96,115,.95);
  box-shadow:
    0 6px 20px rgba(0,0,0,.30),
    0 0 0 1px rgba(117,132,160,.28),
    0 0 18px rgba(117,132,160,.14);
}

.board-node.card-avalon{
  border-color:rgba(118,215,255,.95);
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(118,215,255,.42),
    0 0 22px rgba(118,215,255,.24),
    0 0 34px rgba(135,232,255,.12);
  animation:avalonNodeGlow 6s ease-in-out infinite alternate;
}

.board-node.card-avalon-t8{
  border-color:rgba(255,215,106,.95);
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,215,106,.44),
    0 0 22px rgba(255,215,106,.25),
    0 0 34px rgba(255,159,28,.14);
  animation:goldenNodeGlow 5.4s ease-in-out infinite alternate;
}

/* garante que o nome fique acima de qualquer efeito */
.board-node .badge{
  z-index:5;
}

.board-node .node-icons{
  z-index:5;
}

@keyframes avalonNodeGlow{
  from{
    box-shadow:
      0 6px 20px rgba(0,0,0,.25),
      0 0 0 1px rgba(118,215,255,.34),
      0 0 16px rgba(118,215,255,.17),
      0 0 26px rgba(135,232,255,.08);
  }
  to{
    box-shadow:
      0 6px 20px rgba(0,0,0,.25),
      0 0 0 1px rgba(118,215,255,.52),
      0 0 24px rgba(118,215,255,.28),
      0 0 40px rgba(135,232,255,.15);
  }
}

@keyframes goldenNodeGlow{
  from{
    box-shadow:
      0 6px 20px rgba(0,0,0,.25),
      0 0 0 1px rgba(255,215,106,.35),
      0 0 16px rgba(255,215,106,.18),
      0 0 28px rgba(255,159,28,.08);
  }
  to{
    box-shadow:
      0 6px 20px rgba(0,0,0,.25),
      0 0 0 1px rgba(255,215,106,.54),
      0 0 24px rgba(255,215,106,.30),
      0 0 42px rgba(255,159,28,.16);
  }
}

@media (prefers-reduced-motion: reduce){
  .board-node.card-avalon,
  .board-node.card-avalon-t8{
    animation:none;
  }
}



/* === Animated portal border inside the Route Helper board === */
/* Mantém o estilo original do node e anima apenas a borda via background-clip. */
@property --portal-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

.board-node.card-avalon,
.board-node.card-avalon-t8{
  border:2px solid transparent;
  background:
    linear-gradient(#0c121c, #0c121c) padding-box,
    conic-gradient(
      from var(--portal-angle),
      transparent 0deg,
      rgba(118,215,255,.10) 28deg,
      rgba(118,215,255,.96) 55deg,
      rgba(135,232,255,.74) 92deg,
      transparent 132deg,
      rgba(118,215,255,.70) 190deg,
      transparent 246deg,
      rgba(135,232,255,.62) 302deg,
      transparent 360deg
    ) border-box;
  animation:
    portalBorderSpin 7s linear infinite,
    avalonNodeGlow 6s ease-in-out infinite alternate;
}

.board-node.card-avalon-t8{
  background:
    linear-gradient(#0c121c, #0c121c) padding-box,
    conic-gradient(
      from var(--portal-angle),
      transparent 0deg,
      rgba(255,215,106,.18) 24deg,
      rgba(255,215,106,.98) 54deg,
      rgba(255,159,28,.92) 92deg,
      transparent 128deg,
      rgba(255,215,106,.76) 190deg,
      transparent 250deg,
      rgba(255,159,28,.80) 306deg,
      transparent 360deg
    ) border-box;
  animation:
    portalBorderSpin 6s linear infinite,
    goldenNodeGlow 5.4s ease-in-out infinite alternate;
}

@keyframes portalBorderSpin{
  to{ --portal-angle:360deg; }
}

@media (prefers-reduced-motion: reduce){
  .board-node.card-avalon,
  .board-node.card-avalon-t8{
    animation:none;
  }
}


/* === Modal map preview fix === */
/* Mantém o modal fixo na tela. A regra .wrap, .modal anterior deixava o modal relativo
   e fazia a imagem aparecer embaixo da página em vez de expandir sobre a tela. */
.modal{
  position:fixed !important;
  inset:0 !important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);
  z-index:9999 !important;
}

.modal.open{
  display:flex !important;
}

.modal-img-wrap{
  position:relative;
  max-width:min(96vw, 1400px);
  max-height:92vh;
  border-radius:16px;
  overflow:hidden;
}

.modal-img-wrap img{
  display:block;
  width:auto;
  height:auto;
  max-width:96vw;
  max-height:92vh;
  object-fit:contain;
}

.modal-close{
  position:fixed;
  top:18px;
  right:20px;
  z-index:10000;
}