@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Playfair+Display+SC:wght@400;700;900&display=swap');

* { box-sizing: border-box; }
:root {
  --maroon: #3A0E14;
  --maroon-light: #5C1B24;
  --maroon-mid: #47121A;
  --maroon-deep: #2A0A0F;
  --maroon-vignette: #1C0508;
  --wood: #6B4226;
  --wood-dark: #4A2C1A;
  --wood-light: #8C5A34;
  --wood-edge: #3A2313;
  --gold: #C9A227;
  --cream: #EDE3D0;
}
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;
  background: var(--maroon);
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--cream);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.top-header {
  position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 10;
  background: var(--maroon);
  border-bottom: 1px solid rgba(201,162,39,0.25);
}

.game-modes-nav { position: fixed; top: 0; left: 26px; height: 46px; display: flex; align-items: center; z-index: 30; }
.gm-trigger {
  font-family: 'Playfair Display SC', serif;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--cream); opacity: 0.72; cursor: default;
  padding: 4px 0; border-bottom: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
  transition: opacity .15s, border-color .15s;
}
.gm-trigger .gm-caret { font-size: 9px; opacity: 0.8; transform: translateY(1px); }
.game-modes-nav:hover .gm-trigger,
.game-modes-nav.gm-open .gm-trigger { opacity: 1; border-color: var(--gold); }

.gm-panel {
  display: none; position: absolute; top: 100%; left: 0;
  width: max-content; min-width: 150px; padding: 8px 0;
  background: var(--maroon-mid); border: 1px solid rgba(201,162,39,0.35);
  border-radius: 5px; box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.gm-mode-highlight { color: var(--gold); opacity: 0.82; }
.game-modes-nav:hover .gm-panel,
.game-modes-nav.gm-open .gm-panel { display: block; }

.gm-item { position: relative; }
.gm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; font-size: 12.5px; letter-spacing: 0.02em; color: var(--cream);
  white-space: nowrap;
}
.gm-item.has-sub > .gm-row { cursor: default; }
.gm-item.has-sub:hover > .gm-row,
.gm-item.has-sub.gm-sub-open > .gm-row { background: rgba(201,162,39,0.12); }
.gm-arrow { font-size: 10px; opacity: 0.6; }
.gm-tag-wip { font-size: 9.5px; opacity: 0.55; font-style: italic; margin-left: 8px; }

.gm-submenu {
  display: none; position: absolute; top: -9px; left: 100%;
  width: max-content; min-width: 140px; padding: 8px 0;
  background: var(--maroon-mid); border: 1px solid rgba(201,162,39,0.35);
  border-radius: 5px; box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.gm-item.has-sub:hover > .gm-submenu,
.gm-item.has-sub.gm-sub-open > .gm-submenu { display: block; }

.gm-sub-link {
  display: block; padding: 7px 12px; font-size: 12.5px; color: var(--cream);
  opacity: 0.85; white-space: nowrap; transition: background .12s, opacity .12s;
}
.gm-sub-link:hover { background: rgba(201,162,39,0.16); opacity: 1; color: var(--gold); }
.gm-sub-link.wip { opacity: 0.4; cursor: default; }
.gm-sub-link.wip:hover { background: none; color: var(--cream); opacity: 0.4; }

.corner-nav { position: fixed; top: 0; right: 26px; height: 46px; z-index: 20; display: flex; gap: 22px; align-items: center; }
.corner-nav a {
  font-family: 'Playfair Display SC', serif;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--cream); opacity: 0.72;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.corner-nav a:hover { opacity: 1; border-color: var(--gold); }
.corner-nav a.nav-featured { color: var(--gold); opacity: 1; }
.corner-nav .sep { opacity: 0.3; font-size: 11px; }

@media (max-width: 700px) {
  .game-modes-nav { left: 12px; }
  .gm-trigger { font-size: 9px; }
  .gm-submenu {
    position: static; min-width: 0;
    padding: 2px 0 6px;
    border: none; border-radius: 0; box-shadow: none;
    background: rgba(0,0,0,0.18);
  }
  .gm-sub-link { font-size: 11px; padding: 7px 16px 7px 30px; }
  .gm-row { font-size: 11.5px; }

  .game-modes-nav:hover .gm-panel { display: none; }
  .game-modes-nav.gm-open .gm-panel { display: block; }
  .gm-item.has-sub:hover > .gm-submenu { display: none; }
  .gm-item.has-sub.gm-sub-open > .gm-submenu { display: block; }
  .gm-item.has-sub:hover > .gm-row { background: transparent; }
  .gm-item.has-sub.gm-sub-open > .gm-row { background: rgba(201,162,39,0.12); }
}
@media (max-width: 700px) {
  .corner-nav { right: 12px; gap: 6px; }
  .corner-nav a { font-size: 9px; letter-spacing: 0.04em; }
}

@media (max-width: 700px) {
  .top-header { height: 42px; }
  .game-modes-nav, .corner-nav { height: 42px; }
}