/* 見た目は90年代、中身は現代的。JavaScriptなし、外部読み込みなし。 */
:root {
  --tile: #008080;
  --panel: #c0c0c0;
  --ink: #000;
  --navy: #000080;
  --link: #0000ee;
  --visited: #551a8b;
  --alert: #f00;
  --paper: #fff;
  --hi: #fff;
  --lo: #808080;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tile) url("/bg.svg"); }
body {
  margin: 0;
  padding: 12px;
  font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
#page {
  max-width: 800px;
  margin: 0 auto;
  background: var(--paper);
  border: 4px ridge var(--panel);
}
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--alert); }
:focus-visible { outline: 2px dotted var(--alert); outline-offset: 2px; }

#top { background: var(--navy); color: #fff; text-align: center; padding-bottom: 12px; }
#top h1 {
  margin: 10px 8px 0;
  font-size: 2.1rem;
  letter-spacing: .12em;
  color: #ff0;
  text-shadow: 3px 3px 0 #000;
}
#top .sub { margin: 0; font-size: .9rem; }
.ticker {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  color: #0f0;
  font-size: .9rem;
  padding: 2px 0;
  border-bottom: 2px solid var(--lo);
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 24s linear infinite;
}
@keyframes ticker { to { transform: translateX(-100%); } }

.layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
#menu { background: var(--panel); padding: 10px; border-right: 2px solid var(--lo); }
#menu h2 { font-size: .9rem; margin: 0 0 8px; background: var(--navy); color: #fff; padding: 1px 6px; letter-spacing: .1em; }
#menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#menu a, #menu a:visited {
  display: block;
  padding: 3px 8px;
  color: #000;
  text-decoration: none;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--hi) #404040 #404040 var(--hi);
}
#menu a:hover { background: #d8d8d8; color: #000; }
#menu a:active, #menu a[aria-current="page"] {
  background: #b0b0b0;
  border-color: #404040 var(--hi) var(--hi) #404040;
}

main { padding: 14px 18px 20px; min-width: 0; }
main h2 {
  font-size: 1.25rem;
  color: var(--navy);
  border-bottom: 3px double var(--navy);
  margin: 1.4em 0 .5em;
  padding-bottom: 2px;
}
main h2:first-child { margin-top: 0; }
hr {
  height: 4px;
  border: 0;
  margin: 1.4em 0;
  background: linear-gradient(90deg, #f00, #f90, #ff0, #0c0, #0cf, #00f, #909);
}
.new { color: var(--alert); font-weight: bold; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.construction {
  margin: 1.2em 0;
  padding: 6px;
  background: repeating-linear-gradient(45deg, #ffd800 0 14px, #000 14px 28px);
}
.construction p { margin: 0; padding: 8px 12px; background: #fff; text-align: center; font-weight: bold; }

dl.log { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; }
dl.log dt { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: bold; }
dl.log dd { margin: 0; }

article { border: 3px groove var(--panel); padding: 6px 14px 8px; margin: 0 0 14px; }
article h3 { margin: 0 0 2px; font-size: 1.05rem; color: var(--navy); }
article p { margin: .3em 0; }
time { color: #555; font-size: .85rem; }
dl.spec { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; }
dl.spec dt { font-weight: bold; }
dl.spec dd { margin: 0; }

.banners { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
img.banner { width: 88px; height: 31px; border: 1px solid #000; }
pre { overflow-x: auto; background: #000; color: #0f0; padding: 8px 10px; font-size: .85rem; line-height: 1.5; }

footer { border-top: 2px solid var(--lo); background: var(--panel); padding: 8px 14px; font-size: .85rem; text-align: center; }
footer p { margin: 0; }

@media (max-width: 640px) {
  .layout { grid-template-columns: 1fr; }
  #menu { border-right: 0; border-bottom: 2px solid var(--lo); }
  #menu ul { grid-template-columns: repeat(2, 1fr); }
  main { padding: 12px 12px 18px; }
  #top h1 { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker { white-space: normal; }
  .ticker span { animation: none; padding-left: 8px; }
  .blink { animation: none; }
}