/* VR Lightgun Framework — shared site styles.
   Deliberately plain: white page, system font, ruled tables. */

html{scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:#444;
  font:15px/1.6 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
.page{max-width:1080px;margin:0 auto;padding:36px 20px 70px}
h1{margin:0 0 4px;font-size:30px;color:#222}
.sub{margin:0 0 10px;color:#888}
.meta{color:#888;font-size:14px;margin:0}
a{color:#06c}

/* one consistent gap under the masthead whether or not .meta is present */
.cols{display:flex;gap:36px;align-items:flex-start;margin-top:26px}
.content{flex:1;min-width:0}

/* ---- sidebar ---------------------------------------------------------- */
/* Two levels: a section per page, and that page's own <h2>s beneath it.
   Sub-items are only ever shown for the page you are on. */
nav{
  flex:0 0 190px;position:sticky;top:24px;
  font-size:14px;
}
/* The masthead holds the logo and (narrow screens only) the menu button. Its
   margin is the logo's old one, so the desktop sidebar is unchanged. */
nav .navbar{margin:0 0 20px}
nav .logo{display:block;margin:0}
nav .logo img{display:block;width:150px;height:auto}
nav .navtoggle{display:none}

nav ul{list-style:none;margin:0;padding:0}
nav .section + .section{margin-top:22px}
nav a{color:#06c;text-decoration:none}
nav a:hover{text-decoration:underline}

/* Off-site links sit above the sections, same small-caps chrome as a.top
   but always accented, since they are never the current page. */
nav ul.links{margin:0 0 22px}
nav ul.links a{
  display:block;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  padding:0 0 8px;
}

nav a.top{
  display:block;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  padding:0 0 8px;
}
nav .section.current > a.top{color:#222}

nav .subs a{display:block;padding:3px 0 3px 10px}

/* ---- content ---------------------------------------------------------- */
/* The landing-page trailer embed; aspect-ratio keeps it 16:9 at any width. */
.content iframe.video{
  display:block;width:100%;aspect-ratio:16/9;border:0;margin:0 0 24px;
}

h2{margin:0 0 10px;font-size:21px;color:#222;scroll-margin-top:20px}
/* A heading that links out (the game headings on VRLF Mods). It keeps the
   heading's own colour rather than going link-blue, so the page does not read
   as a column of blue; the arrow is what marks it as a link. A heading with
   two links gets two arrows, which is correct — they go to different games. */
.content h2 a{color:inherit;text-decoration:none}
.content h2 a:hover{text-decoration:underline}
.content h2 a::after{
  content:"\2197";
  font-size:.7em;color:#9a9a9a;
  margin-left:.22em;vertical-align:.18em;
}
.content section + section h2{margin-top:44px}
/* The page title now lives inside .content, so it needs its own gap to the
   first heading — the bare h1 rule's 4px was sized for a .sub beneath it. */
.content h1{margin:0 0 20px}
/* h3 is a level BELOW the sidebar: nav.js derives sub-items from h2 only,
   so use h3 to break a section up without adding sidebar entries. */
.content h3{margin:26px 0 6px;font-size:17px;color:#222;scroll-margin-top:20px}
.content p{margin:0 0 14px}
/* The release date under each Update log version heading. */
.content p.date{margin:-6px 0 10px;color:#888}
.content ul,.content ol{margin:0 0 14px;padding-left:22px}
.content li{margin:0 0 6px}
.content code{
  font:13px/1.5 Consolas,"SF Mono",Menlo,monospace;
  background:#f4f4f4;padding:1px 4px;border-radius:2px;
}
.content pre{
  background:#f4f4f4;padding:12px 14px;overflow-x:auto;
  font:13px/1.5 Consolas,"SF Mono",Menlo,monospace;margin:0 0 16px;
}
.content pre code{background:none;padding:0}

/* Schema reference lists: one <li> per key. Tighter than a prose list and
   hanging-indented, so a wrapped line sits clear of the key it describes. */
.content ul.schema{list-style:none;padding-left:0;margin:0 0 18px}
.content ul.schema li{
  margin:0 0 7px;padding-left:16px;text-indent:-16px;
}
.content ul.schema code{white-space:nowrap}

/* A note that applies to a whole platform, sitting between its heading and its
   table. The left rule marks it as an aside so it does not read as the first
   row of the table beneath it. */
.platnote{
  margin:0 0 14px;padding:2px 0 2px 12px;
  border-left:2px solid #e8e8e8;
  color:#777;font-size:14px;
}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:13px;color:#888;font-weight:600;
  padding:6px 10px;border-bottom:2px solid #ddd;white-space:nowrap;
}
td{padding:8px 10px;border-bottom:1px solid #e8e8e8;vertical-align:top}
td.game{color:#222;font-weight:600;min-width:12ch}
td.notes{color:#777;min-width:24ch}
/* The player count that replaced the Players column — a shade darker than the
   note it opens, so it still reads as a field rather than as prose. */
td.notes .np{color:#555;font-weight:600}

/* Settings reference tables (Documentation → Advanced Settings). Same ruled
   table as the compatibility grid; the key and default columns are monospaced
   because every value in them is literal text to type into a file. A cell may
   hold several related keys separated by <br>, so nowrap applies per line. */
table.settings td.key{
  font:13px/1.7 Consolas,"SF Mono",Menlo,monospace;
  color:#222;white-space:nowrap;
}
table.settings td.def{
  font:13px/1.7 Consolas,"SF Mono",Menlo,monospace;
  color:#666;white-space:nowrap;
}
table.settings td.where{white-space:nowrap;color:#555;font-size:14px}
/* "File only" is the absence of a panel, so it is greyed back wherever it
   appears: the .cfg column cell, and .cfgonly in the prose above a block. */
table.settings td.where.cfg,.cfgonly{color:#aaa}

.state{color:#888;margin:30px 0}
.placeholder{color:#aaa;font-style:italic}
hr{border:0;border-top:1px solid #e8e8e8;margin:40px 0 16px}
.foot{color:#888;font-size:14px}

@media (max-width:760px){
  .cols{display:block}
  nav{position:static;flex:none;margin:0 0 24px}
  nav .logo img{width:120px}

  /* Logo left, menu button right. */
  nav .navbar{display:flex;align-items:center;justify-content:space-between;margin:0}

  /* 44px square is the smallest comfortable touch target; the bars are three
     spans so the open state can fold them into a cross. */
  nav .navtoggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 10px;margin-right:-10px;
    background:none;border:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  nav .navtoggle .bar{
    height:2px;background:#444;border-radius:2px;
    transition:transform .18s ease,opacity .18s ease;
  }
  /* Bars sit 7px apart centre to centre (2px tall, 5px gap), so that is how
     far the outer two travel to meet in the middle. */
  nav .navtoggle.open .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav .navtoggle.open .bar:nth-child(2){opacity:0}
  nav .navtoggle.open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Collapsed by default, and the FULL nav when open — sub-items included,
     which is the whole point of the button. */
  nav .navmenu{display:none}
  nav .navmenu.open{
    display:block;margin-top:14px;padding-top:14px;
    border-top:1px solid #e8e8e8;
  }

  /* Undo the desktop sidebar's tight vertical rhythm: in a drop-down these are
     tap targets, so they get room. */
  nav ul.links{display:block;margin:0 0 18px}
  nav ul.links a{padding:7px 0}
  nav ul.sections{display:block}
  nav .section + .section{margin-top:16px}
  nav a.top{padding:7px 0}
  nav .subs a{padding:7px 0 7px 12px}

  /* Three columns fit a phone without the min-widths that kept the old seven
     from collapsing; .tablewrap still scrolls if a long note pushes past. */
  th,td{padding:6px 8px}
  td.game,td.notes{min-width:0}
}