:root{
    --stone: #16140F;
    --stone-2: #1E1B15;
    --bronze: #B98B3E;
    --bronze-bright: #D7AD5F;
    --crimson: #7C2529;
    --crimson-deep: #591A1D;
    --sapphire: #2C4A6E;
    --sapphire-deep: #1C3049;
    --parchment: #E8DFC8;
    --parchment-dim: #B7AD94;
    --iron: #3A3630;
    --iron-light: #55503f;

    --display: 'Cinzel', serif;
    --body: 'EB Garamond', serif;

    --maxw: 1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--stone);
    color:var(--parchment);
    font-family:var(--body);
    font-size:19px;
    line-height:1.6;
  }
  h1,h2,h3, .brand{
    font-family:var(--display);
    font-weight:600;
    letter-spacing:0.02em;
    margin:0;
    color:var(--bronze-bright);
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  section{padding:110px 0;}

  @media (max-width:720px){
    body{font-size:17px;}
    section{padding:72px 0;}
    .wrap{padding:0 22px;}
  }

  /* texture overlay */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:2;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:10;
    background:rgba(22,20,15,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--iron);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; max-width:var(--maxw); margin:0 auto;
  }
  .brand{font-size:20px; letter-spacing:0.08em;}
  .brand span{color:var(--parchment);}
  nav.links{display:flex; align-items:center; gap:34px; font-family:var(--display); font-size:14px; letter-spacing:0.05em;}
  nav.links a{text-decoration:none; color:var(--parchment-dim); transition:color .2s;}
  nav.links a:hover{color:var(--bronze-bright);}

  .nav-dropdown{position:relative;}
  .nav-dropdown-toggle{
    display:flex; align-items:center; gap:5px; background:none; border:none;
    font-family:var(--display); font-size:14px; letter-spacing:0.05em; color:var(--parchment-dim);
    padding:0; cursor:pointer; transition:color .2s;
  }
  .nav-dropdown-toggle:hover{color:var(--bronze-bright);}
  .nav-dropdown-toggle .caret{width:12px; height:12px; fill:currentColor; transition:transform .2s;}
  .nav-dropdown.open .nav-dropdown-toggle .caret{transform:rotate(180deg);}
  .nav-dropdown.open .nav-dropdown-toggle{color:var(--bronze-bright);}
  .nav-dropdown-menu{
    position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%);
    background:var(--stone-2); border:1px solid var(--iron-light);
    min-width:220px; padding:8px 0; display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-6px);
    transition:opacity .18s, transform .18s, visibility .18s; z-index:15;
  }
  .nav-dropdown.open .nav-dropdown-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
  .nav-dropdown-menu a{
    padding:10px 20px; font-size:13px; letter-spacing:0.03em; white-space:nowrap;
    border-left:2px solid transparent;
  }
  .nav-dropdown-menu a:hover{background:rgba(185,139,62,0.08); border-left-color:var(--bronze);}

  .nav-cta{
    font-family:var(--display); font-size:13px; letter-spacing:0.05em;
    border:1px solid var(--bronze); color:var(--bronze-bright);
    padding:9px 18px; text-decoration:none; transition:.2s;
  }
  .nav-cta:hover{background:var(--bronze); color:var(--stone);}
  .menu-btn{display:none; background:none; border:none; color:var(--bronze-bright); font-size:26px; cursor:pointer;}

  @media (max-width:860px){
    nav.links{display:none;}
    .nav-cta{display:none;}
    .menu-btn{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:92vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    position:relative;
    padding:60px 24px;
    background:
      radial-gradient(ellipse at 50% 20%, rgba(185,139,62,0.14), transparent 60%),
      linear-gradient(180deg, var(--stone) 0%, #100E0A 100%);
    border-bottom:1px solid var(--iron);
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; left:50%; top:-140px; transform:translateX(-50%);
    width:900px; height:900px;
    background:radial-gradient(circle, rgba(124,37,41,0.18), transparent 65%);
    pointer-events:none;
  }
  .hero-logo{
    width:min(300px, 60vw);
    margin-bottom:8px;
    position:relative; z-index:1;
    filter:drop-shadow(0 0 40px rgba(185,139,62,0.25));
  }
  .hero .subtitle{
    font-family:var(--body); font-style:italic;
    color:var(--parchment-dim);
    font-size:clamp(17px,2vw,21px);
    max-width:560px; margin:24px auto 0;
    position:relative; z-index:1;
  }
  .format-stats{
    margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center;
    font-family:var(--display); font-size:13px; letter-spacing:0.04em; color:var(--parchment-dim);
    position:relative; z-index:1;
  }
  .format-stats b{color:var(--bronze-bright);}
  .format-stats .divider{color:var(--iron-light);}
  .hero .ctas{
    margin-top:44px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
    position:relative; z-index:1;
  }
  .btn{
    font-family:var(--display); font-size:14px; letter-spacing:0.05em;
    padding:15px 30px; text-decoration:none; border:1px solid transparent;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform .15s ease, background .2s, border-color .2s, color .2s;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--bronze); color:var(--stone);}
  .btn-primary:hover{background:var(--bronze-bright);}
  .btn-outline{border-color:var(--parchment-dim); color:var(--parchment);}
  .btn-outline:hover{border-color:var(--bronze-bright); color:var(--bronze-bright);}
  .btn svg{width:18px; height:18px; fill:currentColor;}

  .hero .status{
    margin-top:56px; font-family:var(--display); font-size:12px;
    letter-spacing:0.14em; color:var(--parchment-dim);
    border-top:1px solid var(--iron); padding-top:18px;
    position:relative; z-index:1;
  }
  .hero .status b{color:var(--bronze-bright); font-weight:600;}

  /* ---------- SECTION HEADINGS ---------- */
  .kicker-row{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
  .kicker-row .rule{height:1px; flex:1; background:var(--iron-light);}
  h2.section-title{font-size:clamp(30px,4vw,42px);}

  /* ---------- ABOUT ---------- */
  .about{
    display:grid; grid-template-columns:1.2fr 0.8fr; gap:70px; align-items:center;
  }
  .about p{color:var(--parchment-dim); max-width:52ch;}
  .stat-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
  .stat-chips span{
    font-family:var(--display); font-size:12px; letter-spacing:0.04em; color:var(--bronze-bright);
    border:1px solid var(--iron-light); padding:8px 14px;
  }
  .about-emblem{
    aspect-ratio:1; border:1px solid var(--iron-light);
    display:flex; align-items:center; justify-content:center;
    background:
      repeating-linear-gradient(135deg, rgba(185,139,62,0.05) 0 2px, transparent 2px 14px),
      var(--stone-2);
  }
  .about-emblem svg{width:52%; height:52%;}
  @media (max-width:860px){
    .about{grid-template-columns:1fr; gap:36px;}
    .about-emblem{order:-1; max-width:280px; margin:0 auto;}
  }

  /* ---------- MISSION / VISION ---------- */
  .mv{
    display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  }
  .mv .tablet{
    background:var(--stone-2); border:1px solid var(--iron-light);
    padding:44px 40px;
  }
  .mv .tablet h3{font-size:24px; margin-bottom:18px;}
  .mv .tablet p{color:var(--parchment-dim); margin:0;}
  .mv .standard{
    width:1px; background:linear-gradient(180deg, transparent, var(--bronze), transparent);
    margin:0 42px; position:relative;
  }
  .mv .standard::before{
    content:"⚜"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:var(--stone); color:var(--bronze); font-size:20px; padding:10px 0; width:24px; text-align:center;
  }
  @media (max-width:780px){
    .mv{grid-template-columns:1fr;}
    .mv .standard{width:60%; height:1px; margin:32px auto; background:linear-gradient(90deg, transparent, var(--bronze), transparent);}
  }

  /* ---------- CARDS GALLERY ---------- */
  /* ---------- CARD SEARCH & FILTERS ---------- */
  .card-filters{
    margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;
    padding:20px; border:1px solid var(--iron-light); background:var(--stone-2);
  }
  .filter-search{
    display:flex; align-items:center; gap:10px; flex:1; min-width:220px;
    border:1px solid var(--iron-light); padding:10px 14px; background:var(--stone);
  }
  .filter-search svg{width:18px; height:18px; fill:var(--parchment-dim); flex-shrink:0;}
  .filter-search input{
    flex:1; background:none; border:none; outline:none; color:var(--parchment);
    font-family:var(--body); font-size:16px;
  }
  .filter-search input::placeholder{color:var(--parchment-dim);}
  .filter-selects{display:flex; gap:12px; flex-wrap:wrap;}
  .filter-selects select{
    appearance:none; -webkit-appearance:none;
    background:var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B7AD94' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size:16px; border:1px solid var(--iron-light); color:var(--parchment);
    font-family:var(--body); font-size:15px; padding:10px 34px 10px 14px; cursor:pointer;
  }
  .filter-selects select:focus{border-color:var(--bronze);}
  .filter-selects button{
    font-family:var(--display); font-size:12px; letter-spacing:0.05em;
    background:none; border:1px solid var(--parchment-dim); color:var(--parchment-dim);
    padding:10px 18px; cursor:pointer; transition:.2s;
  }
  .filter-selects button:hover{border-color:var(--bronze-bright); color:var(--bronze-bright);}
  .results-count{margin-top:20px; font-size:14px; color:var(--parchment-dim); font-style:italic;}
  .no-results{
    margin-top:30px; padding:40px; text-align:center; border:1px dashed var(--iron-light);
    color:var(--parchment-dim); font-style:italic;
  }
  @media (max-width:640px){
    .card-filters{flex-direction:column; align-items:stretch;}
    .filter-selects{flex-direction:column;}
    .filter-selects select, .filter-selects button{width:100%;}
  }

  .edad-tag{
    position:absolute; top:10px; left:10px;
    font-family:var(--display); font-size:10px; letter-spacing:0.06em; color:var(--parchment);
    background:rgba(0,0,0,0.55); border:1px solid var(--iron-light); padding:4px 9px;
  }
  .card-civ{font-size:13px; color:var(--bronze-bright); font-family:var(--display); letter-spacing:0.02em; margin-bottom:2px;}

  .cards-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:26px;
    margin-top:36px;
  }
  .card{
    border:1px solid var(--iron-light);
    background:var(--stone-2);
    display:flex; flex-direction:column;
    transition:transform .2s ease, border-color .2s;
  }
  .card:hover{transform:translateY(-6px); border-color:var(--bronze);}
  .card-art{
    aspect-ratio:4/3; position:relative;
    display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid var(--iron-light);
  }
  .card-art svg{width:44%; height:44%; opacity:0.85;}
  .rarity{
    position:absolute; top:10px; right:10px;
    font-family:var(--display); font-size:10px; letter-spacing:0.08em;
    padding:4px 9px; border:1px solid currentColor;
  }
  .rarity.comun{color:#9AA79C;}
  .rarity.rara{color:#6E9BC7;}
  .rarity.epica{color:#B072C9;}
  .rarity.legendaria{color:var(--bronze-bright);}

  .card-body{padding:18px 18px 20px; flex:1; display:flex; flex-direction:column;}
  .card-body h3{font-size:18px; color:var(--parchment); margin-bottom:4px;}
  .card-faction{font-size:13px; color:var(--parchment-dim); font-style:italic; margin-bottom:12px;}
  .card-ability{font-size:14.5px; color:var(--parchment-dim); flex:1; margin-bottom:14px;}
  .card-stats{
    display:flex; justify-content:space-between; font-family:var(--display);
    font-size:13px; color:var(--bronze-bright); border-top:1px solid var(--iron-light); padding-top:12px;
  }

  .cards-note{
    margin-top:26px; color:var(--parchment-dim); font-size:15px; font-style:italic;
  }

  .deck-build{margin-top:64px; border-top:1px solid var(--iron-light); padding-top:40px;}
  .deck-build h3{font-size:15px; letter-spacing:0.08em; color:var(--bronze-bright); margin-bottom:22px;}
  .deck-build-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:24px;
    font-size:15px; color:var(--parchment-dim);
  }
  .deck-build-grid .num{
    display:block; font-family:var(--display); font-size:34px; color:var(--bronze-bright); margin-bottom:6px;
  }
  .deck-build-grid em{display:block; font-style:italic; font-size:13px; margin-top:4px; opacity:0.85;}

  .keywords-cloud{margin-top:52px;}
  .keywords-cloud h3{font-size:15px; letter-spacing:0.08em; color:var(--bronze-bright); margin-bottom:18px;}
  .kw-tags{display:flex; flex-wrap:wrap; gap:10px;}
  .kw-tags span{
    font-family:var(--display); font-size:12px; letter-spacing:0.03em; color:var(--parchment-dim);
    border:1px solid var(--iron-light); padding:7px 14px; transition:.2s;
  }
  .kw-tags span:hover{border-color:var(--bronze); color:var(--bronze-bright);}

  /* ---------- COMMUNITY ---------- */
  .community{
    background:
      radial-gradient(ellipse at 30% 0%, rgba(124,37,41,0.35), transparent 55%),
      radial-gradient(ellipse at 75% 100%, rgba(44,74,110,0.4), transparent 55%),
      #201a17;
    border-top:1px solid var(--iron); border-bottom:1px solid var(--iron);
    text-align:center;
  }
  .community h2{color:var(--parchment); font-size:clamp(30px,4vw,44px);}
  .community p{color:#E9D3D4; max-width:560px; margin:18px auto 0;}
  .community .ctas{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:38px;}
  .community .btn-outline{border-color:#E9D3D4;}
  .community .btn-outline:hover{border-color:var(--bronze-bright); color:var(--bronze-bright);}

  /* ---------- ROADMAP ---------- */
  .roadmap-list{
    margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  }
  .phase{
    position:relative; padding:0 30px 0 0;
    border-left:1px solid var(--iron-light);
    padding-left:30px;
  }
  .phase:first-child{border-left:1px solid transparent; padding-left:0;}
  .phase .numeral{font-family:var(--display); font-size:15px; color:var(--bronze); letter-spacing:0.1em; margin-bottom:10px; display:block;}
  .phase h3{font-size:20px; margin-bottom:10px; color:var(--parchment);}
  .phase p{color:var(--parchment-dim); font-size:15.5px; margin:0;}
  .phase .tag{
    display:inline-block; margin-top:14px; font-family:var(--display); font-size:11px;
    letter-spacing:0.08em; color:var(--stone); background:var(--bronze); padding:3px 10px;
  }
  .phase.current .tag{background:var(--crimson); color:var(--parchment);}
  .roadmap-list.cols-4{grid-template-columns:repeat(4,1fr);}

  /* ---------- PHASE TIMELINE ---------- */
  .phase-timeline{
    position:relative; display:flex; justify-content:space-between; align-items:flex-start;
    margin:40px 0 8px; padding:0 4px;
  }
  .pt-line{
    position:absolute; top:19px; left:5%; right:5%; height:2px;
    background:linear-gradient(90deg, var(--bronze), var(--iron-light) 85%);
    z-index:0;
  }
  .pt-node{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px;
    flex:1;
  }
  .pt-dot{
    width:40px; height:40px; border-radius:50%; background:var(--stone-2); border:2px solid var(--iron-light);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-size:15px; color:var(--parchment-dim);
    transition:.2s;
  }
  .pt-node.current .pt-dot{
    background:var(--bronze); border-color:var(--bronze-bright); color:var(--stone);
    box-shadow:0 0 0 5px rgba(185,139,62,0.18);
  }
  .pt-label{
    font-family:var(--display); font-size:11.5px; letter-spacing:0.04em; color:var(--parchment-dim);
    text-align:center; max-width:100px;
  }
  .pt-node.current .pt-label{color:var(--bronze-bright);}
  @media (max-width:640px){
    .phase-timeline{flex-direction:column; align-items:flex-start; gap:26px; margin:32px 0 20px;}
    .pt-line{top:0; bottom:0; left:19px; right:auto; width:2px; height:auto;
      background:linear-gradient(180deg, var(--bronze), var(--iron-light) 85%);}
    .pt-node{flex-direction:row; align-items:center; gap:16px;}
    .pt-label{text-align:left; max-width:none;}
  }
  @media (max-width:860px){
    .roadmap-list{grid-template-columns:1fr; gap:36px;}
    .phase{border-left:1px solid var(--iron-light); padding-left:22px;}
    .phase:first-child{border-left:1px solid var(--iron-light); padding-left:22px;}
  }

  .principle-box{
    margin-top:52px; border:1px solid var(--bronze); background:rgba(185,139,62,0.06);
    padding:24px 28px; font-style:italic; color:var(--parchment-dim); font-size:16px; max-width:70ch;
  }
  .principle-box b{font-style:normal; font-family:var(--display); font-size:13px; letter-spacing:0.05em; color:var(--bronze-bright); display:block; margin-bottom:8px;}

  /* ---------- SUBSECTIONS (dentro de ¿Cómo jugar?) ---------- */
  .subsection{margin-top:76px; padding-top:56px; border-top:1px solid var(--iron-light);}
  .subsection:first-of-type{margin-top:44px; padding-top:0; border-top:none;}
  .subsection-title{font-size:clamp(24px,3vw,30px); color:var(--bronze-bright); margin-bottom:18px;}

  /* ---------- ZONE TABLE ---------- */
  .zone-table{margin-top:46px; border:1px solid var(--iron-light);}
  .zone-row{
    display:grid; grid-template-columns:1.1fr 1.6fr 0.9fr;
    padding:14px 20px; border-top:1px solid var(--iron-light);
    font-size:15.5px; align-items:center;
  }
  .zone-row:first-child{border-top:none;}
  .zone-row.zone-head{
    font-family:var(--display); font-size:12px; letter-spacing:0.06em;
    color:var(--bronze-bright); background:var(--stone-2); border-top:none;
  }
  .zone-row span:first-child{color:var(--parchment); font-weight:600;}
  .zone-row span:nth-child(2){color:var(--parchment-dim);}
  .zone-tag{
    justify-self:start; font-family:var(--display); font-size:11px; letter-spacing:0.04em;
    padding:4px 10px; border:1px solid currentColor;
  }
  .zone-tag.van{color:var(--crimson); }
  .zone-tag.ret{color:var(--sapphire);}
  @media (max-width:640px){
    .zone-row{grid-template-columns:1fr; gap:4px; text-align:left;}
    .zone-tag{justify-self:start;}
  }

  .cardtype-grid{
    margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px;
  }
  .cardtype{border-left:2px solid var(--bronze); padding-left:20px;}
  .cardtype h3{font-size:17px; margin-bottom:10px; color:var(--parchment);}
  .cardtype p{color:var(--parchment-dim); font-size:15px; margin:0;}

  .board-diagram{
    margin-top:64px; border:1px dashed var(--iron-light); padding:56px 30px;
    text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  .board-diagram-icon{width:52px; height:52px; opacity:0.85;}
  .board-diagram h3{font-size:19px; color:var(--parchment);}
  .board-diagram p{color:var(--parchment-dim); max-width:52ch; margin:0; font-size:15px;}
  .board-diagram-tag{
    margin-top:6px; font-family:var(--display); font-size:11px; letter-spacing:0.06em;
    color:var(--bronze); border:1px solid var(--bronze); padding:5px 12px;
  }
  .board-diagram.board-diagram-img{
    border:1px solid var(--iron-light); padding:14px; gap:18px;
  }
  .board-diagram-img img{
    width:100%; max-width:960px; height:auto; border:1px solid var(--iron-light);
  }
  .board-diagram-img p{max-width:70ch;}

  /* ---------- WORLD MAP ---------- */
  .world-map-wrap{
    position:relative; width:100%; max-width:980px; margin:38px auto 0;
  }
  .world-map-bg{width:100%; height:auto; display:block; opacity:0.95;}
  .map-pin{
    position:absolute; transform:translate(-50%,-50%);
    width:34px; height:34px; border-radius:50%;
    background:var(--stone); border:2px solid var(--bronze);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer; padding:0;
    box-shadow:0 0 0 0 rgba(185,139,62,0.5);
    transition:transform .15s, box-shadow .3s, border-color .2s;
  }
  .map-pin:hover{transform:translate(-50%,-50%) scale(1.18);}
  .map-pin.active{
    border-color:var(--bronze-bright);
    box-shadow:0 0 0 6px rgba(215,173,95,0.22);
  }
  .map-pin-custom{background:var(--sapphire); font-size:14px; color:var(--parchment);}
  @keyframes pinPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(185,139,62,0.35);}
    50%{box-shadow:0 0 0 8px rgba(185,139,62,0);}
  }
  .map-pin:not(.active){animation:pinPulse 2.6s infinite;}

  @media (max-width:640px){
    .map-pin{width:26px; height:26px; font-size:12px;}
  }

  .civ-panel{
    margin-top:44px; border:1px solid var(--iron-light); background:var(--stone);
    padding:34px 32px; min-height:80px;
  }
  .civ-panel-hint{color:var(--parchment-dim); font-style:italic; margin:0; text-align:center;}
  .civ-panel-header{display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
  .civ-panel-header .flag{font-size:34px;}
  .civ-panel-header h3{font-size:24px; margin:0;}
  .civ-panel-header .region{color:var(--parchment-dim); font-size:14px; font-style:italic;}
  .civ-panel-body{display:grid; grid-template-columns:1.4fr 1fr; gap:34px;}
  .civ-panel-body p{color:var(--parchment-dim); margin:0 0 14px;}
  .civ-tag{
    display:inline-block; font-family:var(--display); font-size:12px; letter-spacing:0.04em;
    color:var(--bronze-bright); border:1px solid var(--bronze); padding:5px 12px; margin-top:6px;
  }
  .civ-cards-box h4{font-size:14px; letter-spacing:0.04em; color:var(--bronze-bright); margin:0 0 12px;}
  .civ-cards-box ul{list-style:none; margin:0 0 16px; padding:0; color:var(--parchment-dim); font-size:14.5px;}
  .civ-cards-box li{padding:5px 0; border-bottom:1px solid var(--iron-light);}
  .civ-cards-box li:last-child{border-bottom:none;}
  .civ-cards-box .btn{font-size:12px; padding:10px 18px;}
  .civ-pending{color:var(--parchment-dim); font-style:italic; font-size:14px;}
  @media (max-width:720px){
    .civ-panel-body{grid-template-columns:1fr;}
  }

  /* ---------- AGES TABLE ---------- */
  .ages-table{margin-top:44px; border:1px solid var(--iron-light);}
  .age-row{
    display:grid; grid-template-columns:0.5fr 1.8fr 1fr 1.4fr;
    padding:16px 20px; border-top:1px solid var(--iron-light);
    font-size:15px; align-items:center; gap:10px;
  }
  .age-row:first-child{border-top:none;}
  .age-row.age-head{
    font-family:var(--display); font-size:12px; letter-spacing:0.06em;
    color:var(--bronze-bright); background:var(--stone); border-top:none;
  }
  .age-num{
    font-family:var(--display); font-size:20px; color:var(--bronze-bright); justify-self:start;
  }
  .age-row span:nth-child(2){color:var(--parchment-dim);}
  .age-cost{color:var(--bronze-bright); font-family:var(--display); font-size:13px; letter-spacing:0.03em;}
  .age-row span:last-child{color:var(--parchment);}
  @media (max-width:720px){
    .age-row{grid-template-columns:1fr; gap:4px; text-align:left;}
    .age-row.age-head{display:none;}
    .age-row:not(.age-head){
      padding:20px; margin-top:14px; border:1px solid var(--iron-light); border-top:1px solid var(--iron-light);
    }
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:56px 0 34px; border-top:1px solid var(--iron);
    background:var(--stone-2);
  }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;
  }
  .footer-links{display:flex; gap:26px; font-size:15px;}
  .footer-links a{text-decoration:none; color:var(--parchment-dim); transition:.2s;}
  .footer-links a:hover{color:var(--bronze-bright);}
  .footer-social{display:flex; gap:16px; margin-top:18px;}
  .footer-social a{color:var(--parchment-dim); transition:.2s;}
  .footer-social a:hover{color:var(--bronze-bright);}
  .footer-social svg{width:20px; height:20px; fill:currentColor;}
  .footer-bottom{
    margin-top:40px; padding-top:22px; border-top:1px solid var(--iron);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:13px; color:var(--parchment-dim);
  }

.map-viewport{overflow:hidden;border:1px solid var(--iron);margin-top:38px}.map-viewport .world-map-wrap{margin:0 auto;transition:transform .75s ease;will-change:transform}.map-pin{ text-decoration:none }.map-pin:focus-visible{outline:3px solid var(--parchment);outline-offset:5px}
.civ-top{padding:22px 0;border-bottom:1px solid var(--iron)}.civ-top .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.civ-top a{text-decoration:none;color:var(--bronze-bright)}
.civ-hero{padding:65px 0 40px;position:relative;overflow:hidden;border-bottom:1px solid var(--iron)}.civ-hero h1{font-size:clamp(38px,7vw,76px)}.civ-hero .wrap{position:relative;z-index:1}.civ-symbol{font-size:44px}.civ-region{color:var(--parchment-dim)}.civ-atlas{position:absolute;inset:0;opacity:.18;overflow:hidden;pointer-events:none}.civ-atlas img{width:100%;height:100%;object-fit:cover;animation:arrival 1.2s ease forwards;transform-origin:var(--origin)}@keyframes arrival{from{transform:scale(1)}to{transform:scale(2.4)}}
.civ-nav{display:flex;gap:12px 25px;flex-wrap:wrap;padding:24px 0}.civ-nav a{color:var(--bronze-bright);text-underline-offset:5px}.civ-content{max-width:900px}.civ-content section{padding:42px 0;border-bottom:1px solid var(--iron);scroll-margin-top:24px}.civ-content h2{font-size:27px}.civ-content p{color:var(--parchment-dim)}.emblematic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;padding:0}.emblematic li{padding:20px;border:1px solid var(--iron-light);color:var(--bronze-bright)}.tech-ages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}.tech-age{border:1px solid var(--iron-light);padding:20px 14px}.tech-age h3{font-size:17px}.tech-age p{font-size:16px}.civ-footer{padding:32px 0;color:var(--parchment-dim)}
@media(max-width:640px){.tech-ages,.emblematic{grid-template-columns:1fr 1fr}.civ-hero{padding-top:40px}.civ-top .brand{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.map-viewport .world-map-wrap{transition:none}.civ-atlas img{animation:none;transform:scale(2.4)}.map-pin{animation:none!important}}

/* Full card images */
.card-art-full{display:block;background:var(--stone);overflow:hidden;cursor:zoom-in}.card-art-full img{width:100%;height:auto;display:block;aspect-ratio:816/1110;object-fit:contain}.card-art-full:focus-visible{outline:3px solid var(--bronze-bright);outline-offset:-3px}
.brand-emblem{width:48px;height:48px;object-fit:contain;vertical-align:middle;margin-right:10px}.emblematic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}.emblematic-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;background:#201b14;color:var(--parchment);border:1px solid #806234;border-radius:10px;text-align:left;font:inherit;cursor:pointer}.emblematic-card strong{font-family:var(--display);font-size:20px}.emblematic-art{width:100%;max-height:340px;object-fit:contain}.emblematic-star{width:44px;height:44px;align-self:flex-end}.emblematic-placeholder{display:grid;place-items:center;min-height:150px;color:var(--parchment-dim)}.emblematic-card:focus-visible{outline:3px solid #edc878;outline-offset:4px}.emblematic-card:hover{border-color:#edc878}
/* Season announcement */
.seasons{background:radial-gradient(ellipse at 70% 45%,#50351c40,transparent 65%),#14120f;scroll-margin-top:90px}.season-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}.season-poster{display:block;max-width:500px;border:1px solid #85612d;border-radius:8px;overflow:hidden;box-shadow:0 16px 48px #0008;cursor:zoom-in}.season-poster img{display:block;width:100%;height:auto}.season-number{color:var(--bronze-bright);font:600 13px var(--display);letter-spacing:.18em;text-transform:uppercase}.season-copy h3{font:600 clamp(28px,3.6vw,46px)/1.2 var(--display);color:var(--parchment);margin:16px 0 24px}.season-lead{font-size:24px;color:var(--bronze-bright)}.season-copy p{line-height:1.6}.season-civs{display:flex;flex-direction:column;margin:28px 0;border-top:1px solid #65502f}.season-civs a{display:flex;justify-content:space-between;padding:15px 0;color:var(--parchment);font-family:var(--display);border-bottom:1px solid #65502f;text-decoration:none}.season-civs a:hover{color:var(--bronze-bright)}.season-next{font-size:15px;color:var(--parchment-dim)}.season-poster:focus-visible,.season-civs a:focus-visible{outline:3px solid #e0b871;outline-offset:4px}@media(max-width:760px){.season-feature{grid-template-columns:1fr}.season-poster{max-width:440px;margin:auto}.season-copy h3{font-size:30px}}
.season-civs a{align-items:center;justify-content:flex-start;gap:16px}.season-civs .season-emblem{display:block;width:64px;height:64px;object-fit:contain;flex:none}.season-civs strong{font-weight:500}.season-civs a>span{margin-left:auto}@media(max-width:480px){.season-civs .season-emblem{width:52px;height:52px}}
.about-emblem .about-logo{display:block;width:100%;max-width:360px;height:auto;object-fit:contain;margin:auto;filter:drop-shadow(0 10px 24px #0006)}
.season-coming{display:block;padding:10px 14px;color:var(--parchment-dim);opacity:.65;white-space:nowrap;cursor:default}.season-dropdown .nav-dropdown-menu{min-width:250px}