/* ============================================================
   NIGHTBOUND — CSS Principal (Menú + Tablero)
   ============================================================ */

/* ===================== MENÚ PRINCIPAL ===================== */
:root{
      --paper:#ead7ad;
      --paper-soft:#9f9278;
      --panel-border:rgba(150,135,105,.30);
      --red:#8f1b23;
      --red-soft:#a63a42;
      --white:#f3efea;
    }

    *{box-sizing:border-box;}
    html,body{
      width:100%;
      height:100%;
      margin:0;
      padding:0;
      overflow:hidden;
      background:#000;
      user-select:none;
      font-family:Georgia,"Times New Roman",serif;
    }
    button,input,select{font:inherit;}
    button{cursor:pointer;}
    img{-webkit-user-drag:none;user-select:none;}

    #forjaOnlineMenu{
      position:fixed;
      left:50%;
      top:50%;
      width:1920px;
      height:1080px;
      max-width:none;
      max-height:none;
      transform-origin:center center;
      transform:translate(-50%,-50%) scale(var(--forja-menu-scale,1));
      overflow:hidden;
      color:var(--paper);
      background:
        linear-gradient(90deg, rgba(2,4,4,.88) 0%, rgba(4,5,4,.55) 38%, rgba(5,6,5,.26) 62%, rgba(2,3,3,.78) 100%),
        url("../asset/ui/fondo menu.png") center center / cover no-repeat,
        #050706;
    }
    #forjaOnlineMenu::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 50% 55%, transparent 32%, rgba(0,0,0,.34) 73%, rgba(0,0,0,.86) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.020) 0 1px, transparent 1px 4px);
      opacity:.62;
      mix-blend-mode:multiply;
    }
    #forjaOnlineMenu::after{
      content:"";
      position:absolute;
      inset:8px;
      pointer-events:none;
      border:1px solid rgba(255,226,151,.18);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 90px rgba(0,0,0,.52);
    }
    #forjaOnlineMenu [hidden]{display:none!important;}

    .forja-menu-shell{
      position:relative;
      z-index:2;
      width:100%;
      height:100%;
      padding:42px 54px 38px 54px;
      display:grid;
      grid-template-columns:500px minmax(0,1fr) 500px;
      gap:28px;
    }

    .forja-left-menu{
      align-self:start;
      padding-top:18px;
      min-height:920px;
      display:grid;
      grid-template-rows:235px auto 1fr auto;
    }
    .forja-logo-block{
      height:235px;
      min-height:235px;
      max-height:235px;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:0;
      overflow:visible;
    }
    .forja-menu-logo-img{
      display:block;
      width:372px;
      max-width:372px;
      height:auto;
      object-fit:contain;
      margin-top:-38px;
      pointer-events:none;
      filter:drop-shadow(0 10px 22px rgba(0,0,0,.48));
    }
    .nightbound-logo-block{
      align-items:center;
      justify-content:center;
      padding-top:4px;
    }
    .nightbound-logo-text{
      display:grid;
      place-items:center;
      min-width:390px;
      padding:22px 22px 18px;
      border:1px solid rgba(143,27,35,.44);
      outline:1px solid rgba(214,169,79,.14);
      background:
        radial-gradient(circle at 50% 0%, rgba(143,27,35,.18), transparent 54%),
        linear-gradient(180deg,rgba(5,5,5,.62),rgba(0,0,0,.18));
      box-shadow:0 14px 28px rgba(0,0,0,.42), inset 0 0 24px rgba(0,0,0,.62);
      text-align:center;
      text-shadow:0 4px 12px rgba(0,0,0,.92);
    }
    .nightbound-logo-text strong{
      display:block;
      color:#f3eee8;
      font-size:3.05rem;
      line-height:.92;
      letter-spacing:.115em;
      font-weight:900;
      text-transform:uppercase;
    }
    .nightbound-logo-text span{
      display:block;
      margin-top:10px;
      color:#b9aa91;
      font-size:.80rem;
      line-height:1;
      letter-spacing:.26em;
      text-transform:uppercase;
    }

    .forja-main-buttons{
      width:468px;
      display:grid;
      gap:14px;
      margin-top:8px;
    }
    .forja-big-btn{
      display:block;
      width:100%;
      height:auto;
      min-height:0;
      padding:0;
      border:0;
      outline:0;
      background:transparent;
      box-shadow:none;
      overflow:visible;
    }
    .forja-btn-image{
      width:100%;
      height:auto;
      display:block;
      pointer-events:none;
      filter:drop-shadow(0 12px 24px rgba(0,0,0,.38));
      transition:transform .15s ease, filter .15s ease, opacity .15s ease;
    }
    .forja-big-btn:hover .forja-btn-image,
    .forja-big-btn:focus-visible .forja-btn-image,
    .forja-big-btn.active .forja-btn-image{
      transform:translateX(4px);
      filter:drop-shadow(0 16px 28px rgba(0,0,0,.48)) brightness(1.05);
    }
    .forja-big-btn:focus-visible{outline:none;}

    .forja-center-art{
      position:relative;
      display:grid;
      place-items:end center;
      padding-bottom:94px;
      pointer-events:none;
    }
    .forja-center-art::after{
      content:"";
      width:370px;
      height:70px;
      border-radius:50%;
      background:radial-gradient(ellipse, rgba(0,0,0,.82), transparent 70%);
    }

    .forja-right{
      align-self:start;
      justify-self:end;
      width:462px;
      display:grid;
      gap:28px;
      padding-top:34px;
    }
    .forja-profile,
    .forja-card,
    .forja-play-modal,
    .forja-hub-window{
      position:relative;
      border:1px solid var(--panel-border);
      border-radius:4px;
      background:
        radial-gradient(circle at 50% 0%, rgba(120,18,24,.08), transparent 34%),
        linear-gradient(180deg,#050505 0%,#000 100%);
      box-shadow:0 12px 32px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025);
    }
    .forja-profile::before,
    .forja-card::before,
    .forja-play-modal::before,
    .forja-hub-window::before{
      content:"";
      position:absolute;
      inset:4px;
      pointer-events:none;
      border:1px solid rgba(150,135,105,.16);
    }

    .forja-profile{
      width:450px;
      min-height:86px;
      justify-self:end;
      display:grid;
      grid-template-columns:72px 1fr;
      align-items:center;
      gap:12px;
      padding:10px 12px;
    }
    .forja-avatar{
      width:66px;
      height:66px;
      border-radius:50%;
      border:2px solid rgba(214,169,79,.70);
      background:url("../asset/personajes/retrato_de_un_guerrero_endurecido.webp") center 22% / cover no-repeat #111;
      box-shadow:0 0 0 3px rgba(0,0,0,.55), 0 0 18px rgba(214,169,79,.22);
    }
    .forja-profile b{
      display:block;
      color:#d8c9aa;
      font-size:1.24rem;
      line-height:1.1;
      letter-spacing:.02em;
    }
    .forja-profile span{
      display:block;
      margin-top:3px;
      color:var(--paper-soft);
      font-size:.86rem;
      line-height:1.28;
      letter-spacing:.045em;
      text-transform:uppercase;
    }

    .forja-card{padding:16px;}
    .forja-card h2{
      margin:0 0 12px;
      text-align:center;
      color:#c9bca0;
      font-size:1rem;
      text-transform:uppercase;
      letter-spacing:.20em;
    }


    /* NOVEDADES — módulo limpio único */
    #forjaNewsCard{
      width:462px;
      height:392px;
      min-height:392px;
      max-height:392px;
      padding:14px;
      border-color:rgba(150,118,86,.42);
      background:linear-gradient(180deg,rgba(9,9,9,.96),rgba(0,0,0,.98));
      overflow:hidden;
      box-sizing:border-box;
    }
    #forjaNewsCard h2{
      height:24px;
      line-height:24px;
      margin:0 0 10px;
      text-align:center;
      color:#c9bca0;
      font-size:1rem;
      text-transform:uppercase;
      letter-spacing:.20em;
      pointer-events:none;
    }
    #forjaNewsStage{
      display:block;
      position:relative;
      width:100%;
      height:300px;
      min-height:300px;
      max-height:300px;
      padding:0;
      margin:0;
      border:1px solid rgba(150,118,86,.36);
      border-radius:0;
      background:transparent;
      box-shadow:none;
      overflow:hidden;
      cursor:pointer;
      text-align:left;
    }
    #forjaNewsStage:hover,
    #forjaNewsStage:focus-visible{
      border-color:rgba(176,29,35,.78);
      outline:none;
      box-shadow:0 0 0 1px rgba(176,29,35,.28);
    }
    #forjaNewsImg{
      display:block;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
      border:0;
      outline:0;
      background:transparent;
      pointer-events:none;
      user-select:none;
    }
    .forja-news-clean-caption{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      display:block;
      padding:34px 18px 16px;
      background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.62) 55%,rgba(0,0,0,0));
      pointer-events:none;
    }
    .forja-news-clean-title{
      display:block;
      color:#d7c9ae;
      font-size:1.02rem;
      font-weight:900;
      line-height:1.1;
      letter-spacing:.01em;
      text-shadow:0 2px 4px #000;
    }
    .forja-news-clean-sub{
      display:block;
      margin-top:7px;
      color:#a9987b;
      font-style:normal;
      font-size:.86rem;
      line-height:1.1;
      text-shadow:0 2px 4px #000;
    }
    #forjaNewsDots{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:11px;
      height:18px;
      min-height:18px;
      margin:6px 0 0;
      padding:0;
      overflow:visible;
    }
    #forjaNewsDots button{
      width:10px;
      height:10px;
      min-width:10px;
      min-height:10px;
      padding:0;
      margin:0;
      border:0;
      border-radius:50%;
      background:#4b4740;
      box-shadow:none;
      cursor:pointer;
      opacity:1;
    }
    #forjaNewsDots button.active{
      background:#b01d23;
      box-shadow:0 0 9px rgba(176,29,35,.55);
    }
    #forjaNewsDots button:hover,
    #forjaNewsDots button:focus-visible{
      background:#c9bca0;
      outline:none;
    }

    .forja-news-modal{
      position:fixed;
      inset:0;
      z-index:999999;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      background:transparent;
      border:0;
      box-shadow:none;
    }
    .forja-news-modal-frame{
      position:relative;
      display:inline-block;
      max-width:96vw;
      max-height:94vh;
      line-height:0;
      background:transparent;
      border:0;
      outline:0;
      box-shadow:none;
    }
    .forja-news-modal-frame img{
      display:block;
      max-width:96vw;
      max-height:94vh;
      width:auto;
      height:auto;
      object-fit:contain;
      background:transparent;
      border:0;
      outline:0;
      box-shadow:none;
      border-radius:0;
    }
    .forja-news-modal-close{
      position:absolute;
      top:0;
      right:0;
      transform:translate(50%,-50%);
      width:34px;
      height:34px;
      min-width:34px;
      min-height:34px;
      padding:0;
      margin:0;
      display:grid;
      place-items:center;
      border:1px solid rgba(210,190,160,.38);
      border-radius:50%;
      background:rgba(8,8,8,.82);
      color:#eadfca;
      font-family:Georgia,serif;
      font-size:24px;
      line-height:1;
      text-shadow:0 1px 4px #000;
      box-shadow:0 2px 8px rgba(0,0,0,.72);
      cursor:pointer;
      z-index:2;
    }
    .forja-news-modal-close:hover,
    .forja-news-modal-close:focus-visible{
      background:rgba(70,10,14,.92);
      outline:none;
    }


    .forja-quick{min-height:150px;padding:16px 14px 18px;}
    .forja-quick h2{
      color:#c9bca0;
      letter-spacing:.12em;
    }
    .forja-quick-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      align-items:start;
      background:transparent;
    }
    .forja-quick-btn{
      display:block;
      aspect-ratio:1/1;
      min-height:0;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      overflow:visible;
    }
    .forja-quick-image{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      pointer-events:none;
      filter:drop-shadow(0 10px 18px rgba(0,0,0,.34));
      transition:transform .15s ease, filter .15s ease;
    }
    .forja-quick-btn:hover .forja-quick-image,
    .forja-quick-btn:focus-visible .forja-quick-image{
      transform:translateY(-3px);
      filter:drop-shadow(0 14px 24px rgba(0,0,0,.42)) brightness(1.05);
    }
    .forja-quick-btn:focus-visible{outline:none;}

    .forja-discord{
      width:100%;
      min-height:0;
      display:block;
      padding:0;
      margin:4px 0 0 0;
      border:0;
      outline:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      overflow:visible;
      cursor:pointer;
    }
    .forja-discord img{
      width:100%;
      height:auto;
      display:block;
      border:0;
      outline:0;
      background:transparent;
      box-shadow:none;
    }

    .forja-version{
      position:absolute;
      left:32px;
      bottom:24px;
      z-index:3;
      color:#6e684f;
      font-size:.78rem;
    }

    .forja-play-modal{
      position:absolute;
      z-index:8;
      left:50%;
      top:50%;
      width:430px;
      max-height:820px;
      transform:translate(-50%,-50%);
      padding:16px;
      border-color:rgba(143,27,35,.24);
    }
    .forja-play-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin:-2px 0 14px;
      padding-bottom:10px;
      border-bottom:1px solid rgba(143,27,35,.24);
    }
    .forja-play-head h2,
    .forja-hub-head h2{
      margin:0;
      color:var(--white);
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:1.08rem;
    }
    .forja-close-play,
    .forja-hub-close,
    .forja-small-btn{
      min-height:34px;
      padding:7px 10px;
      border:1px solid rgba(143,27,35,.42);
      border-radius:4px;
      color:var(--white);
      background:linear-gradient(#171717,#070707);
      box-shadow:inset 0 1px rgba(255,255,255,.04), 0 2px 0 rgba(0,0,0,.38);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.03em;
    }
    .forja-close-play,
    .forja-hub-close{
      width:36px;
      min-height:32px;
      padding:0;
      font-size:1.25rem;
    }
    .forja-small-btn.gold{
      color:var(--white);
      background:linear-gradient(#7b141b,#2a0508);
      border-color:var(--red);
    }
    .forja-small-btn:hover,
    .forja-close-play:hover,
    .forja-hub-close:hover{filter:brightness(1.12);}
    .forja-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:6px;
    }
    .forja-form{display:grid;gap:10px;}
    .forja-form input,
    .forja-form select{
      width:100%;
      height:38px;
      padding:8px 10px;
      border:1px solid rgba(143,27,35,.24);
      border-radius:4px;
      color:var(--white);
      background:#050505;
      outline:none;
    }
    .forja-form input::placeholder{color:rgba(243,239,234,.58);}
    .forja-rooms{
      display:grid;
      gap:8px;
      max-height:265px;
      overflow:auto;
      padding-right:4px;
    }
    .forja-room-row{
      border:1px solid rgba(143,27,35,.24);
      border-radius:4px;
      padding:9px;
      background:rgba(0,0,0,.25);
      cursor:pointer;
    }
    .forja-room-row:hover,
    .forja-room-row.active{
      border-color:var(--red);
      background:rgba(123,20,27,.10);
    }
    .forja-room-row b{
      display:block;
      color:var(--white);
    }
    .forja-room-row span{
      color:var(--white);
      font-size:.78rem;
    }
    .forja-status{
      min-height:22px;
      margin-top:8px;
      color:var(--white);
      font-size:.82rem;
      line-height:1.35;
    }

    .forja-hub-overlay{
      position:absolute;
      inset:0;
      z-index:12;
      display:grid;
      place-items:center;
      background:rgba(0,0,0,.58);
    }
    .forja-hub-window{
      width:min(860px,86vw);
      max-height:760px;
      display:grid;
      grid-template-rows:auto minmax(0,1fr);
      padding:0;
      overflow:hidden;
      border-color:rgba(143,27,35,.24);
    }
    .forja-hub-head{
      position:relative;
      z-index:2;
      min-height:54px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-bottom:1px solid rgba(143,27,35,.24);
    }
    .forja-hub-body{
      position:relative;
      z-index:2;
      min-height:0;
      padding:16px;
      overflow:auto;
    }
    .forja-hub-panel{
      border:1px solid rgba(143,27,35,.24);
      border-radius:5px;
      background:rgba(0,0,0,.28);
      padding:14px;
      color:var(--white);
    }
    .forja-hub-panel h3{
      margin:0 0 10px;
      color:var(--white);
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .forja-hub-panel p{
      margin:0;
      color:var(--white);
      line-height:1.45;
    }
    .forja-hub-grid3{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:12px;
    }
    .forja-hub-grid2{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .forja-list-stack{display:grid;gap:8px;}

    .forja-toast{
      position:absolute;
      left:50%;
      bottom:42px;
      z-index:20;
      transform:translateX(-50%);
      min-width:310px;
      max-width:640px;
      padding:10px 14px;
      border:1px solid rgba(143,27,35,.42);
      border-radius:4px;
      color:var(--white);
      background:rgba(0,0,0,.82);
      text-align:center;
      box-shadow:0 12px 30px rgba(0,0,0,.58);
    }