:root{
  --night:#17142b; --plum:#241f45; --plum-2:#352e63;
  --ink:#f4efe0; --dim:#b8b0d8; --gold:#ffcf5a;
  --win:#0d0c1f; --edge:#f4efe0;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--night);color:var(--ink);
  font-family:"DotGothic16","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:16px;line-height:1.8;
  padding-inline:16px;padding-block:max(24px,env(safe-area-inset-top)) max(48px,env(safe-area-inset-bottom));
}
a{color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:760px;margin-inline:auto;display:grid;gap:18px}
.win{background:var(--win);border:3px solid var(--edge);border-radius:6px;box-shadow:0 0 0 3px var(--win)}

/* ---------- トップ（街） ---------- */
.hero h1{margin:0;font-size:clamp(24px,6vw,34px);font-weight:400;letter-spacing:.04em;text-wrap:balance}
.tagline{margin:0;color:var(--dim)}
.screen{position:relative;border:4px solid var(--edge);border-radius:8px;overflow:hidden;background:#000}
.screen:focus-within{border-color:var(--gold)}
#town{display:block;width:100%;height:auto;aspect-ratio:240/176;image-rendering:pixelated;touch-action:none;outline:none;cursor:pointer}
.msg{position:absolute;left:4%;right:4%;bottom:5%;pointer-events:none;padding:8px 14px;font-size:clamp(12px,2.6vw,16px);line-height:1.6}
.fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .25s}
.fade.on{opacity:1}
.hint{margin:-8px 0 0;color:var(--dim);font-size:13px}
@media (pointer:coarse){.hint{display:none}}

.pad{display:none;justify-content:space-between;align-items:center;gap:16px}
@media (pointer:coarse){.pad{display:flex}}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}
.pad button{
  font:inherit;font-size:20px;color:var(--ink);background:var(--plum);
  border:2px solid var(--edge);border-radius:8px;touch-action:none;user-select:none;-webkit-user-select:none;
}
.pad button:active{background:#4a3f86}
.dpad [data-dir="up"]{grid-area:1/2}
.dpad [data-dir="left"]{grid-area:2/1}
.dpad [data-dir="right"]{grid-area:2/3}
.dpad [data-dir="down"]{grid-area:3/2}
.abtn{width:72px;height:72px;border-radius:50%!important;font-size:22px!important}

.menu-box{padding:12px 16px 16px;display:grid;gap:8px}
.menu-box h2{margin:0;font-size:15px;font-weight:400;color:var(--dim);letter-spacing:.06em}

/* ---------- メニュー（共通） ---------- */
.nav{display:flex;flex-wrap:wrap;gap:8px}
.nav a{
  color:var(--ink);text-decoration:none;background:var(--plum);
  border:2px solid var(--edge);border-radius:5px;padding:4px 14px;
}
.nav a:hover{background:var(--plum-2)}
.nav a[aria-current="page"]{border-color:var(--gold);color:var(--gold)}

/* ---------- 各ページ ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.top .back{color:var(--ink);text-decoration:none;font-size:15px}
.top .back:hover{color:var(--gold)}
.top .brand{color:var(--dim);text-decoration:none;font-size:14px}
.article{padding:20px clamp(16px,4vw,32px) 28px;overflow-wrap:anywhere}
.article > *{max-width:65ch}
.article h1{margin:0 0 12px;font-size:clamp(22px,5vw,30px);font-weight:400;color:var(--gold);text-wrap:balance;line-height:1.4}
.article h2{margin:28px 0 8px;font-size:21px;font-weight:400;color:var(--gold);line-height:1.4}
.article h3,.article h4,.article h5{margin:22px 0 6px;font-size:18px;font-weight:400;line-height:1.4}
.article p{margin:0 0 14px}
.article ul,.article ol{margin:0 0 14px;padding-left:1.4em}
.article li{margin-bottom:4px}
.article li::marker{color:var(--gold)}
.article blockquote{margin:0 0 14px;padding:4px 0 4px 14px;border-left:3px solid var(--dim);color:var(--dim)}
.article img{max-width:100%;height:auto;border-radius:4px}
.article code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--plum);padding:1px 5px;border-radius:3px}
.article pre{overflow-x:auto;background:var(--plum);padding:12px 14px;border-radius:4px}
.article pre code{background:none;padding:0}
.article hr{border:0;border-top:2px dashed var(--plum-2);margin:24px 0}
.meta{color:var(--dim);font-size:14px;margin:0 0 4px!important;font-variant-numeric:tabular-nums}

.shelf{list-style:none;padding:0!important;margin:12px 0 0;display:grid;gap:10px}
.shelf a{
  display:grid;gap:2px;text-decoration:none;color:var(--ink);
  background:var(--plum);border-left:6px solid var(--spine,var(--gold));border-radius:3px;padding:10px 14px;
}
.shelf .where{margin-left:10px;color:var(--spine,var(--gold))}
.shelf-nav{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.shelf-nav a{color:var(--ink);text-decoration:none;font-size:14px;border:2px solid var(--spine);border-radius:5px;padding:2px 10px}
.shelf-nav a:hover{background:var(--plum-2)}
.shelf-sec{max-width:none}
.shelf-sec h2{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--spine);padding-bottom:4px;color:var(--ink)!important}
.shelf-sec h2 small{color:var(--dim);font-size:13px}
.shelf a:hover{background:var(--plum-2)}
.shelf .date{color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums}
.shelf .t{font-size:17px}
.shelf .s{color:var(--dim);font-size:14px}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;font-size:14px}

.foot{color:var(--dim);font-size:13px;text-align:center}
@media (prefers-reduced-motion: reduce){.fade{transition:none}}