@font-face{font-family:Playfair;src:url('../fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');font-display:swap}
@font-face{font-family:Roboto;src:url('../fonts/Roboto-Regular.ttf') format('truetype');font-display:swap}
:root{--brass:#c59a51;--cream:#e7e3da;--muted:#b6c2c5;--ink:#020609}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:#071923;color:var(--cream);font-family:Roboto,Arial,sans-serif;line-height:1.7}
body:before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,6,9,.32),rgba(2,6,9,.82)),url('../img/world-map.webp') center/cover no-repeat}
a{color:var(--cream);text-decoration:none}a:hover{color:var(--brass)}a:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.container{max-width:1180px}.site-header{padding:22px 0;background:rgba(2,6,9,.76);border-bottom:1px solid #c59a5138}.wordmark{font-family:Playfair,Georgia,serif;letter-spacing:.08em;font-size:17px}.site-header nav div{font-size:14px}
.hero{padding-top:70px;padding-bottom:40px;min-height:810px;display:flex;flex-direction:column;align-items:center;justify-content:center}.eyebrow{color:var(--brass);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}.hero-logo{width:330px;max-width:75vw;height:210px;object-fit:contain;margin:0 0 22px;filter:drop-shadow(0 6px 16px #000)}
h1,h2,h3{font-family:Playfair,Georgia,serif;line-height:1.15}h1{font-size:clamp(42px,5.4vw,76px);text-shadow:0 4px 22px #000;margin-bottom:24px}.hero-copy{max-width:590px;font-size:18px;color:#dae0df;text-shadow:0 2px 8px #000}.brass-button{display:inline-flex;gap:40px;align-items:center;padding:14px 30px;border:2px solid var(--brass);border-radius:30px;background:linear-gradient(#214733,#091b13);box-shadow:0 6px 25px #0008;margin-top:18px}.release-note{font-size:12px;color:var(--muted);margin:20px 0}
.section-space{padding-top:80px;padding-bottom:35px}.section-heading{max-width:700px;margin:0 auto 42px;text-align:center}.section-heading h2{font-size:clamp(32px,4vw,48px)}.section-heading>p:last-child{color:var(--muted);margin-top:18px}.feature-panel{height:100%;padding:30px;background:#020609ed;border:1px solid #b8792b80;border-radius:12px;box-shadow:4px 8px 24px #0009}.section-number{color:var(--brass);font-size:12px;letter-spacing:.14em}.feature-panel h3{font-size:26px;margin:26px 0 18px}.feature-panel p{color:var(--muted);margin:0}
.world-window{margin-top:38px;min-height:320px;border:3px solid var(--brass);border-radius:16px;background:linear-gradient(90deg,#020609ed,transparent),url('../img/world-map.webp') center/cover;box-shadow:4px 8px 24px #000b;display:flex;align-items:center;padding:48px}.world-window>div{max-width:360px}.world-window h3{font-size:38px}.world-window p:last-child{color:var(--muted)}
.advisor-card{height:100%;background:#020609f2;border:2px solid #aa7d3b;border-radius:14px;overflow:hidden;box-shadow:4px 8px 24px #0009}.advisor-image{height:260px;background:radial-gradient(ellipse at bottom,#284149,#07121a);border-bottom:1px solid #aa7d3b}.advisor-image img{height:100%;width:100%;object-fit:contain;object-position:bottom}.advisor-copy{padding:22px}.advisor-copy h3{font-size:24px;margin:8px 0 15px}.advisor-role{color:var(--brass);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.advisor-copy p{font-size:14px;color:var(--muted);margin:0}.development-panel{padding:40px;border:3px solid var(--brass);border-radius:16px;background:#020609ed;box-shadow:4px 8px 24px #0009}.development-panel h2{font-size:42px}.development-panel p:last-child{color:var(--muted);max-width:630px;margin:20px 0 0}.status-badge{display:inline-block;border:1px solid #b8792b80;color:var(--brass);padding:12px 18px;border-radius:6px;font-size:11px;letter-spacing:.08em}footer{padding-top:40px;padding-bottom:35px;font-size:12px;color:var(--muted)}
.skip-link{position:absolute;left:12px;top:-100px;background:var(--ink);padding:10px;z-index:10}.skip-link:focus{top:12px}
@media(max-width:767px){.container{padding-left:24px;padding-right:24px}.hero{padding-top:45px;min-height:740px}.hero-logo{width:280px;height:180px}.hero-copy{font-size:16px}.section-space{padding-top:55px}.world-window{padding:30px}.development-panel{padding:28px}.status-badge{margin-top:25px}.advisor-image{height:280px}.site-header nav{justify-content:center!important}.eyebrow{letter-spacing:.12em}.world-window h3{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.feature-panel{overflow:hidden}.feature-hero{display:block;width:calc(100% + 60px);max-width:none;height:175px;object-fit:cover;object-position:center 35%;margin:-30px -30px 26px;border-bottom:1px solid #b8792b80}

/* Feature cards follow the game's major panel styling. */
.feature-panel {
  padding: 0 24px 28px;
  background: #020609;
  border: 3px solid #c59a51;
  border-radius: 16px;
  box-shadow: 4px 8px 18px rgba(0, 0, 0, .72);
  overflow: hidden;
}
.feature-hero {
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  margin: 0 -24px 24px;
  border-bottom: 0;
  background: #020609;
}
.feature-panel h3 { font-size: 25px; margin: 18px 0 16px; }
.feature-panel p { color: #c7d0d4; }
.feature-panel .section-number { color: #dfb86a; }
@media (min-width: 768px) and (max-width: 1099px) {
  #game > .row > .col-md-4 { width: 100%; }
  .feature-panel { padding: 0 32px 32px; }
  .feature-hero { width: calc(100% + 64px); margin: 0 -32px 24px; }
}
/* One wide game banner lets the original composition breathe. */
.game-hero { margin: 0 0 28px; border: 3px solid #c59a51; border-radius: 16px; overflow: hidden; background: #020609; box-shadow: 4px 8px 18px rgba(0,0,0,.72); }
.game-hero img { display: block; width: 100%; height: auto; }
.feature-panel { padding: 28px 24px; }
@media (min-width: 768px) and (max-width: 1099px) {
  #game > .row > .col-md-4 { width: 33.333333%; }
  .feature-panel { padding: 24px 20px; }
}
/* Three translucent panels sit within one brass-framed fleet scene. */
.game-showcase { position: relative; isolation: isolate; min-height: 488px; display: flex; align-items: flex-end; padding: 128px 24px 24px; border: 3px solid #c59a51; border-radius: 16px; overflow: hidden; background: #020609; box-shadow: 4px 8px 18px rgba(0,0,0,.72); }
.showcase-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.game-showcase::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,transparent 35%,rgba(2,6,9,.3) 100%); }
.showcase-cards { width: calc(100% + var(--bs-gutter-x)); flex: 0 0 auto; }
.showcase-cards .feature-panel { background: rgba(2,6,9,.78); border: 1px solid rgba(197,154,81,.8); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.35); padding: 25px 22px; }
.showcase-cards .feature-panel p { color: #e0e5e4; }
@media (max-width:767px) {
  .game-showcase { min-height: 0; padding: 210px 16px 16px; }
  .showcase-image { height: 100%; object-position: 47% top; }
  .showcase-cards .feature-panel { background: rgba(2,6,9,.86); }
}
.ship-card { height:100%; background:#020609; border:3px solid #c59a51; border-radius:16px; box-shadow:4px 8px 18px rgba(0,0,0,.72); overflow:hidden; }
.ship-art { height:240px; padding:22px 14px 8px; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center,#18303a 0%,#020609 75%); }
.ship-art img { display:block; width:100%; height:100%; object-fit:contain; }
.ship-copy { padding:18px 26px 28px; }
.ship-copy .eyebrow { font-size:10px; margin-bottom:12px; }
.ship-copy h3 { font-size:27px; margin-bottom:18px; }
.ship-copy>p:last-child { color:#c7d0d4; margin-bottom:0; }
@media(max-width:767px) { .ship-art { height:280px; } }
.multiplayer-panel { padding:48px; border:3px solid #c59a51; border-radius:16px; background:linear-gradient(105deg,rgba(2,6,9,.98),rgba(5,22,30,.92)); box-shadow:4px 8px 18px rgba(0,0,0,.72); }
.multiplayer-panel h2 { font-size:clamp(38px,5vw,64px); max-width:850px; margin-bottom:24px; }
.multiplayer-panel>p { max-width:710px; }
.multiplayer-panel .multiplayer-lead { font-size:21px; color:#e7e3da; }
.multiplayer-panel>p:not(.eyebrow):not(.multiplayer-lead):not(.multiplayer-signoff) { color:#c7d0d4; }
.multiplayer-signoff { color:#dfb86a; margin-top:24px; margin-bottom:0; }
@media(max-width:767px) { .multiplayer-panel { padding:30px 24px; } .site-header nav>div { flex-wrap:wrap; justify-content:center; } }
/* HQ-inspired portraits rise above their panels. */
#advisors .section-heading { margin-bottom:65px; }
#advisor-grid { row-gap:70px!important; }
.advisor-card { overflow:visible; position:relative; margin-top:50px; border-width:3px; background:#020609; }
.advisor-image { position:relative; margin-top:-62px; height:300px; background:transparent; border:0; border-radius:0; }
.advisor-image img { display:block; height:100%; width:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 8px rgba(0,0,0,.45)); }
.advisor-copy { padding:16px 22px 25px; }
.advisor-copy h3 { line-height:1.25; }
.advisor-copy blockquote { color:#c7d0d4; font-size:15px; line-height:1.75; margin:0; }
@media(max-width:575px) { .advisor-image { height:360px; } }
/* Blend portrait bases into the black advisor panel. */
.advisor-image::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(2,6,9,0), #020609);
  pointer-events: none;
}
/* Closing panel uses the game's headquarters scene. */
.development-panel {
  background: linear-gradient(90deg,rgba(2,6,9,.94) 0%,rgba(2,6,9,.78) 55%,rgba(2,6,9,.45) 100%), url('../img/hero-decisions.webp') center 45% / cover no-repeat;
}
@media(max-width:767px) {
  .development-panel { background: linear-gradient(rgba(2,6,9,.84),rgba(2,6,9,.92)), url('../img/hero-decisions.webp') center / cover no-repeat; }
}

.gameplay-card { height:100%; margin:0; overflow:hidden; border:2px solid var(--brass); border-radius:14px; background:var(--ink); box-shadow:4px 8px 18px #0009; }
.gameplay-card>a { display:block; }
.gameplay-card>a:focus-visible { outline-offset:-4px; }
.gameplay-card img { display:block; width:100%; height:auto; }
.gameplay-card figcaption { padding:24px; }
.gameplay-card h3 { font-size:26px; margin-bottom:12px; }
.gameplay-card p { color:var(--muted); margin:0; }
/* Keep portrait panels inside their row, including the raised top margin. */
.advisor-card { height: calc(100% - 50px); }
.site-header nav>div { flex-wrap: wrap; justify-content: center; }
.site-header nav a { display: inline-block; padding: 6px 0; }
@media (max-width:991px) {
  .showcase-cards>.col-md-4 { width:100%; }
  .game-showcase { min-height:0; padding:200px 16px 16px; }
  .showcase-image { height:320px; object-position:center top; }
  .game-showcase::after { background:linear-gradient(180deg,transparent 120px,#020609 320px); }
  .showcase-cards .feature-panel { background:rgba(2,6,9,.86); }
  .feature-panel h3 { margin-top:12px; }
}
@media (max-width:767px) {
  .site-header { padding:12px 0; }
  .site-header nav>div { column-gap:18px!important; row-gap:2px!important; }
  .hero { min-height:0; padding-top:38px; padding-bottom:30px; }
  .hero-logo { width:250px; height:150px; margin-bottom:16px; }
  h1 { font-size:clamp(34px,8vw,52px); }
  .hero .eyebrow { font-size:11px; }
  .hero-copy { max-width:540px; }
  .section-heading { margin-bottom:28px; }
  .ship-art { height:220px; }
  .world-window { padding:26px; min-height:260px; }
  .development-panel h2 { font-size:34px; }
  .multiplayer-panel h2 { font-size:clamp(32px,7.8vw,48px); }
  .multiplayer-panel .multiplayer-lead { font-size:18px; }
}
@media (max-width:575px) {
  .container { padding-left:18px; padding-right:18px; }
  .advisor-image { height:300px; }
  #advisor-grid { row-gap:48px!important; }
  .advisor-copy { padding:16px 24px 25px; }
}