/* Age of Cignare Online — shared site styles */

  :root{
    --bg-void: #0a0b0f;
    --bg-panel: #14161d;
    --bg-panel-raised: #1b1e28;
    --line: rgba(201,168,90,0.16);
    --gold: #c9a85a;
    --gold-bright: #e8c877;
    --blood: #9c2b3a;
    --blood-bright: #c73f52;
    --arcane: #3f8f8a;
    --text: #ded9cd;
    --text-dim: #8b8a86;
    --font-display: 'Cinzel', serif;
    --font-body: 'Spectral', serif;
    --font-mono: 'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background-color: var(--bg-void);
    background-image: url('../img/aoc-bg-throne.png');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text); font-family: var(--font-body); line-height:1.5;
  }
  a{color:inherit; text-decoration:none;}

  /* ===== SLIM UTILITY BAR (things not baked into the hero art) ===== */
  .announce{
    background: linear-gradient(90deg, rgba(156,43,58,0.18), rgba(63,143,138,0.1));
    border-bottom:1px solid var(--line);
    padding:6px 28px; font-size:11.5px; font-family:var(--font-mono);
    display:flex; gap:10px; align-items:center; color: var(--gold-bright); justify-content:center;
  }
  #notice-text{ transition: opacity 0.3s ease; }
  .announce b{color:var(--gold-bright);}

  /* ===== HERO IMAGE (the real art) ===== */
  .hero-art-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; position:relative; }
  .hero-art{ width:100%; display:block; }
  .hero-art-wrap::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:40%;
    background: linear-gradient(180deg, transparent, rgba(10,11,15,0.5));
    pointer-events:none;
  }
  .top-util-hotspot{
    position:absolute; top:3%; height:5%;
    cursor:pointer;
    background: rgba(232,200,119,0);
    transition: background .15s;
  }
  .top-util-hotspot:hover{ background: rgba(232,200,119,0.12); }

  /* ===== NAV HOTSPOTS OVER THE BAKED-IN ICON ROW ===== */
  .nav-hotspot{
    position:absolute; top:85%; height:14%;
    cursor:pointer;
    background: rgba(232,200,119,0);
    transition: background .15s;
  }
  .nav-hotspot:hover{ background: rgba(232,200,119,0.08); }
  .flag-hotspot{
    position:absolute; top:3%; height:5%; width:3.6%;
    cursor:pointer;
    background: rgba(232,200,119,0);
    transition: background .15s;
  }
  .flag-hotspot:hover{ background: rgba(232,200,119,0.15); }
  .dropdown{
    display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    background:var(--bg-panel); border:1px solid var(--gold); border-radius:0 0 4px 4px;
    min-width:210px; padding:8px 0; z-index:40; box-shadow:0 12px 30px rgba(0,0,0,0.5); text-align:left;
  }
  .nav-hotspot:hover .dropdown{ display:block;}
  .dropdown a{
    display:block; padding:7px 16px; font-family:var(--font-mono); font-size:11px;
    text-transform:none; letter-spacing:0.02em; color:var(--text-dim);
  }
  .dropdown a:hover{ background:rgba(201,168,90,0.08); color:var(--gold-bright);}

  /* ===== FEATURED SHOWCASE STRIP ===== */
  .showcase{ max-width:1240px; margin:24px auto 0; padding:0 28px;}
  .showcase-title{ font-family:var(--font-display); font-size:13px; letter-spacing:0.15em; color:var(--text-dim); text-transform:uppercase; margin-bottom:10px;}
  .showcase-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
  .showcase-item{ background:rgba(20,22,29,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border:1px solid var(--line); border-radius:4px; padding:12px; text-align:center; cursor:pointer;}
  .showcase-item:hover{ border-color:var(--gold);}
  .showcase-glyph{ width:52px; height:52px; margin:0 auto 8px; border-radius:4px; background:linear-gradient(160deg,#7a2f8f,#3d1749); border:1px solid #a860c9;}
  .showcase-item .name{ font-size:11px; font-weight:600;}
  .showcase-item .tier{ font-family:var(--font-mono); font-size:9px; color:var(--gold-bright);}

  /* ===== MAIN GRID ===== */
  .main-grid{ max-width:1240px; margin:26px auto 60px; padding:0 28px; display:grid; grid-template-columns:1fr 320px; gap:28px;}
  .panel{ background:rgba(20,22,29,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border:1px solid var(--line); border-radius:4px; padding:20px 22px; margin-bottom:22px;}
  .panel-title{
    font-family:var(--font-display); font-size:15px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gold-bright); display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line);
  }
  .panel-title::before{ content:''; width:3px; height:14px; background:var(--blood-bright); display:inline-block;}

  .video-embed{ width:100%; aspect-ratio:16/9; border-radius:4px; border:1px solid var(--line); background:#000; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-family:var(--font-mono); font-size:12px;}

  .news-card{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
  .news-card:last-child{border-bottom:none;}
  .news-thumb{ width:110px; height:70px; flex-shrink:0; border-radius:3px; background:linear-gradient(135deg,#25202a,#151217); border:1px solid var(--line);}
  .news-title{ font-family:var(--font-display); font-size:14px; color:var(--gold-bright); margin-bottom:4px;}
  .news-date{ font-family:var(--font-mono); font-size:10px; color:var(--text-dim); margin-bottom:6px;}
  .news-excerpt{ font-size:12.5px; color:var(--text-dim);}

  .forum-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .forum-cat{ background:rgba(27,30,40,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border:1px solid var(--line); border-radius:3px; padding:10px 12px; font-size:12px; display:flex; justify-content:space-between;}
  .forum-cat span.count{ font-family:var(--font-mono); color:var(--gold-bright); font-size:11px;}

  .status-row{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; padding:7px 0;}
  .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:7px; background:var(--arcane); box-shadow:0 0 6px var(--arcane);}
  .rank-row{ display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:6px 0; border-bottom:1px dashed var(--line);}
  .rank-row .place{ font-family:var(--font-mono); color:var(--gold-bright); width:20px;}
  .db-links a{ display:block; font-size:12.5px; padding:6px 0; color:var(--text-dim); border-bottom:1px dashed var(--line);}
  .db-links a:hover{ color:var(--gold-bright); padding-left:4px;}
  .db-links a::before{content:'› '; color:var(--blood-bright);}
  .cashshop-mini{ display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line);}
  .cashshop-mini:last-child{border:none;}
  .cs-icon{ width:36px; height:36px; border-radius:3px; background:linear-gradient(160deg,#8a6a1f,#3a2c0d); border:1px solid var(--gold-bright); flex-shrink:0;}
  .cs-name{ font-size:11.5px; font-weight:600;}
  .cs-price{ font-family:var(--font-mono); font-size:10.5px; color:var(--gold-bright);}

  /* ===== MODAL ===== */
  .overlay{ position:fixed; inset:0; background:rgba(4,4,6,0.78); display:none; align-items:center; justify-content:center; z-index:50; backdrop-filter:blur(3px);}
  .overlay.open{display:flex;}
  .modal{ width:580px; max-width:92vw; max-height:84vh; overflow-y:auto; background:var(--bg-panel); border:1px solid var(--gold); border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,0.6);}
  .modal-head{ display:flex; gap:16px; padding:22px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(201,168,90,0.06), transparent);}
  .modal-img{ width:84px; height:84px; border-radius:4px; flex-shrink:0;}
  .modal-name{ font-family:var(--font-display); font-size:20px; color:var(--gold-bright);}
  .modal-tier{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; margin-top:4px; text-transform:uppercase;}
  .modal-body{padding:18px 22px;}
  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px;}
  .stat{ background:var(--bg-panel-raised); border:1px solid var(--line); border-radius:3px; padding:8px 10px; font-size:12px;}
  .stat b{ color:var(--gold-bright); font-family:var(--font-mono);}
  .section-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); margin:14px 0 6px;}
  .drop-table{width:100%; border-collapse:collapse; font-size:12px;}
  .drop-table th{ text-align:left; font-family:var(--font-mono); font-size:10px; color:var(--text-dim); text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--line);}
  .drop-table td{ padding:7px 8px; border-bottom:1px dashed var(--line);}
  .drop-table tr:hover td{ background:rgba(201,168,90,0.05);}
  .rate{ font-family:var(--font-mono); color:var(--gold-bright);}
  .source-chip{ display:inline-block; font-size:11.5px; padding:6px 10px; margin:3px 4px 3px 0; background:var(--bg-panel-raised); border:1px solid var(--line); border-radius:3px;}
  .source-chip b{color:var(--gold-bright);}
  .close-x{ margin-left:auto; cursor:pointer; color:var(--text-dim); font-size:20px; padding:0 4px;}
  .close-x:hover{color:var(--blood-bright);}

/* ===== REGISTRATION MODAL ===== */
.register-modal{ width:480px; }
#register-test-banner{
  background: rgba(201,168,90,0.1); border:1px solid var(--gold);
  color: var(--gold-bright); font-family:var(--font-mono); font-size:11px;
  padding:10px 12px; border-radius:3px; margin-bottom:16px; line-height:1.4;
}
.form-row{ margin-bottom:12px; }
.form-row label{ display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); margin-bottom:5px;}
.form-row input, .form-row select{
  width:100%; background:var(--bg-panel-raised); border:1px solid var(--line); border-radius:3px;
  color:var(--text); font-family:var(--font-body); font-size:13px; padding:8px 10px;
}
.form-row input:focus, .form-row select:focus{ outline:none; border-color:var(--gold); }
.form-row-checkbox label{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; text-transform:none; letter-spacing:normal; color:var(--text-dim);}
.form-row-checkbox input{ width:auto; }
.register-error{
  background: rgba(156,43,58,0.15); border:1px solid var(--blood-bright); color:#f0b8bf;
  font-size:12px; padding:8px 10px; border-radius:3px; margin-bottom:12px;
}
.register-submit{
  width:100%; padding:11px; background:linear-gradient(180deg,#3a6b47,#1e3d27); border:1px solid #5f9e6b;
  border-radius:4px; color:#d7f0d9; font-family:var(--font-display); font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer;
}
.register-submit:hover{ border-color:#8fe09e; color:#fff; }