/* 全ページ共通：グローバルナビ（assets/gnav.js）とスマホ幅の手直し。dist.py が全ページの </head> 直前に差し込む */
html,body{overflow-x:clip}
html.gnav-lock{overflow:hidden}

/* 下層ページのヘッダー：ロゴ｜横並びリンク｜メニューボタン、パンくずは2段目 */
.top-in{flex-wrap:wrap;row-gap:4px}
.top-in .logo{margin-right:auto}
.top-in .crumb{order:5;flex-basis:100%;line-height:1.6}
.gnav-inline{display:flex;gap:22px;font-size:14px}
.gnav-inline a{font-family:var(--f-body,sans-serif);font-size:14px;color:var(--fg,#F2F3EF);text-decoration:none;padding-block:6px;border-bottom:2px solid transparent}
.gnav-inline a:hover{color:var(--lime,#C6FF2E)}
.gnav-inline a[aria-current]{color:var(--lime,#C6FF2E);border-color:var(--lime,#C6FF2E)}
.gnav-btn{width:44px;height:44px;margin-right:-10px;display:none;place-items:center;background:none;border:0;color:var(--magenta,#FF3FD2);cursor:pointer}
@media (max-width:980px){.gnav-inline{display:none}.gnav-btn{display:grid}}

/* メニュー本体 */
.gnav{position:fixed;inset:0;z-index:200}
.gnav[hidden]{display:none}
.gnav-back{position:absolute;inset:0;background:rgba(3,4,5,.72);opacity:0;transition:opacity .2s}
.gnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);overflow-y:auto;overscroll-behavior:contain;background:#0B0D0F;border-left:1px solid var(--line,#262B30);box-shadow:-3px 0 0 rgba(255,63,210,.45);padding:calc(10px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(24px);opacity:0;transition:transform .2s,opacity .2s;background-image:repeating-linear-gradient(0deg,rgba(77,255,160,.035) 0 1px,transparent 1px 3px)}
.gnav.is-open .gnav-back{opacity:1}
.gnav.is-open .gnav-panel{transform:none;opacity:1}
.gnav-top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.gnav-rec{font-family:var(--f-mono,monospace);font-size:12px;letter-spacing:.12em;color:#4DFFA0;display:flex;align-items:center;gap:8px}
.gnav-rec i{width:8px;height:8px;border-radius:50%;background:#FF5A4E;animation:gnavblk 1.2s steps(1) infinite}
@keyframes gnavblk{50%{opacity:.15}}
.gnav-x{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;background:none;border:0;color:var(--fg,#F2F3EF);cursor:pointer}
.gnav-search{display:flex;margin:8px 0 14px;border:1px solid var(--line,#262B30);background:#08090B}
.gnav-search input{flex:1;min-width:0;min-height:48px;padding:0 14px;background:none;border:0;color:var(--fg,#F2F3EF);font-size:16px;font-family:var(--f-body,sans-serif)}
.gnav-search input:focus{outline:none}
.gnav-search:focus-within{border-color:var(--lime,#C6FF2E)}
.gnav-search button{width:48px;display:grid;place-items:center;background:var(--lime,#C6FF2E);color:#111;border:0;cursor:pointer}
.gnav-list{display:flex;flex-direction:column}
.gnav-list a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:54px;padding:12px 4px;border-bottom:1px solid var(--line,#262B30);color:var(--fg,#F2F3EF);text-decoration:none}
.gnav-list a b{font-family:var(--f-head,sans-serif);font-weight:400;font-size:18px;letter-spacing:.02em}
.gnav-list a small{font-family:var(--f-mono,monospace);font-size:10px;letter-spacing:.14em;color:var(--muted,#A3A9A6)}
.gnav-list a:hover b,.gnav-list a[aria-current] b{color:var(--lime,#C6FF2E)}
.gnav-list a[aria-current]{box-shadow:inset 3px 0 0 var(--lime,#C6FF2E);padding-left:12px}
.gnav button:focus-visible,.gnav a:focus-visible{outline:2px solid var(--lime,#C6FF2E);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gnav-back,.gnav-panel{transition:none}.gnav-rec i{animation:none}}

/* スマホ幅の手直し */
@media (max-width:760px){
  /* 3D画面：左上と右上のHUDが重なるので、サイズ表記を2段目に */
  .tv .hud{font-size:11px;gap:8px}
  .tv .hud.tr{top:34px;left:14px;right:14px;line-height:1.5}
  .tv .telop{font-size:13px}
}
@media (max-width:560px){
  /* UMA一覧：1列だと100体で画面36枚分になるので2列に */
  .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .item b{font-size:14px;line-height:1.5}
  .item small{font-size:11px;line-height:1.5}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .tabs a{flex:none}
}