/* metanew theme main.css v0.0.1 — mock06 由来 */

/* ══════════════════════════════════════════════
   metanew v5
   色  : Roblox 系の赤 + 近黒 + 温かみのある白（ロブ郎寄り）
   構造: OTABASE（セクション天罫 / 情報密度 / EXP帯）
   温度: ロブ郎（統計ストリップ / 日付タブ / 丸み）
   ══════════════════════════════════════════════ */
:root{
  --bg:#FAF8F3; --paper:#fff; --sur:#F4F1EA; --sur2:#EBE7DD;
  --line:#E5E0D5; --line2:#CFC9BA;
  --ink:#16181D; --ink2:#55575E; --ink3:#87888F;
  --red:#6C5CE7; --red-d:#5448B4; --red-s:#F2F0FD;   /* 主アクセント（キーカラー。テーマ設定で変更可） */
  --gold:#F4B400; --gold-s:#FFF8E4;                  /* ROBRANK / EXP / 星 のみ */
  --ok:#1B8A4B; --bad:#C8382C;                       /* 3択投票の信号色（緑=良い / 赤=悪い） */
  --r:12px; --r2:8px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:'Inter','Noto Sans JP',sans-serif;font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;padding-bottom:88px;
  /* v0.0.338: **日本語を文節の切れ目で折る。**
     「時刻はズレることがあ／ります」のような切れ方を減らす。
     継承するので全ページ・全部品に効く。
     **対応していないブラウザではこの宣言が丸ごと無視されるだけ**で、
     いままでと同じ折り方に戻る（壊れない）。
     既存の word-break 指定（メールアドレス等の break-all・4か所）とは要素が違うので当たらない。 */
  word-break:auto-phrase}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
svg{display:block;flex:none}
rt{font-size:.5em;color:var(--ink3)}
body:not(.kids) ruby{display:inline}
body:not(.kids) rt{display:none}
body:not(.kids) .only-k{display:none!important}
body.kids .only-n{display:none!important}
body:not(.auth) .only-in{display:none!important}
body.auth .only-out{display:none!important}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:900px){.wrap{padding:0 28px}}
.mono{font-family:'DM Mono',monospace;font-feature-settings:normal}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ico{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ico.s{width:13px;height:13px}.ico.l{width:20px;height:20px}
.fill{fill:currentColor;stroke:none}

/* ── ヘッダ ── */
#hdr{position:sticky;top:0;z-index:500;background:var(--ink);color:#fff}
.hdr-in{display:flex;align-items:center;gap:12px;height:54px;overflow:hidden}
.logo{font-weight:800;font-size:17px;letter-spacing:-.035em;flex:none;display:flex;align-items:center;gap:7px}
.logo i{width:7px;height:7px;background:var(--red);border-radius:2px;font-style:normal}
.hbadge{font-size:10.5px;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:2px 9px;flex:none}
@media(max-width:760px){.hbadge{display:none}}
.hnav{display:flex;gap:1px;margin-left:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.hnav::-webkit-scrollbar{display:none}
.hnav button{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);
  padding:6px 11px;border-radius:6px;white-space:nowrap;flex:none}
.hnav button:hover{color:#fff;background:rgba(255,255,255,.08)}
.hnav button.on{color:#fff;background:var(--red)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.hrank{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
  border-radius:99px;padding:4px 11px 4px 5px}
.hrank .lv{background:var(--gold);color:var(--ink);font-size:10px;font-weight:800;
  border-radius:99px;padding:2px 7px;letter-spacing:.02em}
.hrank .nm{font-size:11px;font-weight:600;color:rgba(255,255,255,.85)}
@media(max-width:700px){.hrank .nm{display:none}}
.login-btn{background:var(--red);color:#fff;font-size:12.5px;font-weight:700;
  border-radius:7px;padding:7px 15px}
.login-btn:hover{background:var(--red-d)}
.me{width:28px;height:28px;border-radius:50%;background:#4A5568}
@media(max-width:980px){.hnav{display:none}}

/* ── 見出し ── */
.sec{margin-bottom:44px}
.sec-hd{display:flex;align-items:center;gap:11px;margin-bottom:15px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:11px}
.sec-hd h2{font-size:16.5px;font-weight:800;letter-spacing:-.025em}
.sec-hd .en{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3)}
.sec-hd .more{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--red);
  display:flex;align-items:center;gap:4px}
.sec-hd .more:hover{text-decoration:underline}
.eye{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);margin-bottom:9px;display:flex;align-items:center;gap:9px}
.eye::before{content:'';width:18px;height:2px;background:var(--red)}
.pg-h{font-size:clamp(23px,4.4vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1.35}
.pg-s{font-size:13.5px;color:var(--ink2);margin:7px 0 22px}

/* ── カード ── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:980px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:980px){.grid.g4{grid-template-columns:repeat(4,1fr)}}
.gc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;text-align:left;width:100%;
  transition:border-color .15s,box-shadow .15s}
@media(hover:hover){.gc:hover{border-color:var(--ink);box-shadow:0 3px 0 var(--sur2)}}
.gc-th{aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center}
.gc-th .mk{font-size:30px;font-weight:800;color:rgba(255,255,255,.36);letter-spacing:-.05em}
.gc-th .tab{position:absolute;left:0;top:0;background:var(--red);color:#fff;
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;padding:3px 8px;
  border-radius:0 0 7px 0}
.gc-th .tab.g{background:var(--gold);color:var(--ink)}
.gc-b{padding:9px 10px 10px;display:flex;flex-direction:column;flex:1}
.gc-t{font-size:12.5px;font-weight:700;line-height:1.5;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-tags{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 12px}
.gc-tags span{font-size:10px;color:var(--ink2);background:var(--sur);padding:1px 6px;border-radius:4px}
.gc-st{display:flex;gap:1px;margin-top:auto;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.gc-st div{flex:1;background:var(--paper);padding:5px 0 6px;text-align:center}
.gc-st .l{font-size:8.5px;color:var(--ink3);letter-spacing:.04em}
.gc-st .v{font-size:12px;font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums}
.gc-st .v.r{color:var(--red)}

/* ── 汎用ブロック ── */
.blk{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:17px 15px;margin-top:12px}
@media(min-width:700px){.blk{padding:22px}}
.blk-h{display:flex;align-items:center;gap:10px;margin-bottom:15px;
  border-bottom:2px solid var(--ink);padding-bottom:9px}
.blk-h h3{font-size:15px;font-weight:800;letter-spacing:-.025em}
.blk-h .en{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3)}
.blk-h .n{margin-left:auto;font-size:12px;color:var(--ink3)}
.note{margin-top:15px;padding:12px 14px;background:var(--sur);border-radius:var(--r2);
  font-size:12.5px;color:var(--ink2);line-height:1.75}
.note b{font-weight:700;color:var(--ink)}

/* ── 統計ストリップ（ロブ郎の要素）── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:22px}
@media(min-width:640px){.stats{grid-template-columns:repeat(5,1fr)}}
.stats div{background:var(--paper);padding:11px 13px}
.stats .l{font-size:10.5px;color:var(--ink3);letter-spacing:.02em}
.stats .v{font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.stats .v small{font-size:11px;font-weight:600;color:var(--ink3);margin-left:1px}

/* ── ミッション帯（OTABASEのEXP帯）── */
.mbar{display:flex;align-items:center;gap:13px;background:var(--ink);color:#fff;
  border-radius:var(--r);padding:13px 16px;margin-top:12px;flex-wrap:wrap}
.mbar .tag{background:var(--gold);color:var(--ink);font-size:10px;font-weight:800;
  border-radius:99px;padding:3px 10px;letter-spacing:.06em;flex:none}
.mbar .t{font-size:13.5px;font-weight:700}
.mbar .d{font-size:11.5px;color:rgba(255,255,255,.55)}
.mbar .exp{margin-left:auto;font-size:13px;font-weight:800;color:var(--gold);flex:none}
.mbar .go{background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;
  border-radius:7px;padding:8px 15px;flex:none}
.mbar .go:hover{background:var(--gold)}

/* ── HOME ── */
#hero{background:var(--paper);border-bottom:1px solid var(--line);padding:34px 0 30px;
  position:relative;overflow:hidden}
#hero::after{content:'';position:absolute;right:-90px;top:-90px;width:300px;height:300px;
  background:var(--red-s);border-radius:70px;transform:rotate(24deg);pointer-events:none}
.hero-in{position:relative;z-index:1}
.hero-h1{font-size:clamp(25px,4.8vw,40px);font-weight:900;line-height:1.32;letter-spacing:-.045em}
.hero-h1 em{font-style:normal;color:var(--red)}
.hero-sub{font-size:13.5px;color:var(--ink2);margin-top:11px;max-width:36em}
.bigsearch{display:flex;align-items:center;gap:9px;background:var(--paper);
  border:2px solid var(--ink);border-radius:var(--r2);margin-top:20px;max-width:580px;padding:0 4px 0 13px}
.bigsearch input{flex:1;border:none;outline:none;padding:13px 0;font:inherit;font-size:15px;background:none}
.bigsearch input::placeholder{color:var(--ink3)}
.bigsearch button{background:var(--red);color:#fff;padding:10px 20px;border-radius:6px;
  font-weight:700;font-size:14px}
.bigsearch button:hover{background:var(--red-d)}
.ex{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;align-items:center}
.ex .lb{font-size:11.5px;color:var(--ink3)}
.ex button{font-size:12.5px;border:1px solid var(--line2);background:var(--paper);
  border-radius:99px;padding:5px 13px}
.ex button:hover{border-color:var(--red);color:var(--red)}
.doors{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
@media(min-width:680px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  transition:.15s}
.door:hover{border-color:var(--red);background:var(--red-s)}
.door .ic{width:38px;height:38px;border-radius:10px;background:var(--sur);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex:none}
.door .t{font-size:14px;font-weight:800;letter-spacing:-.02em}
.door .d{font-size:11.5px;color:var(--ink3);line-height:1.55}
.door .ar{margin-left:auto;color:var(--ink3)}
/* 日付タブ */
.dtabs{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden;margin-bottom:12px}
.dtabs button{flex:1;background:var(--paper);padding:8px 6px;font-size:12px;font-weight:600;
  color:var(--ink3);text-align:center}
.dtabs button .n{display:block;font-size:10px;color:var(--ink3);font-weight:500}
.dtabs button.on{background:var(--ink);color:#fff}
.dtabs button.on .n{color:rgba(255,255,255,.55)}
/* 最近見た */
.recent{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px}
.recent::-webkit-scrollbar{display:none}
.recent .rc{flex:none;width:94px;text-align:left}
.recent .rc .th{width:94px;height:94px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line)}
.recent .rc .th .mk{font-size:26px;font-weight:800;color:rgba(255,255,255,.36)}
.recent .rc .t{font-size:11px;font-weight:600;line-height:1.45;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── TOP PICKS ── */
.picks{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:860px){.picks{grid-template-columns:repeat(4,1fr);gap:14px}}
.pk{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);
  text-align:left;width:100%;display:flex;flex-direction:column;transition:.15s}
@media(hover:hover){.pk:hover{border-color:var(--ink);box-shadow:0 3px 0 var(--sur2)}}
.pk .im{aspect-ratio:16/10;position:relative;display:flex;align-items:center;justify-content:center}
.pk .im .mk{font-size:42px;font-weight:800;color:rgba(255,255,255,.34);letter-spacing:-.05em}
.pk .badge{position:absolute;left:8px;top:8px;background:var(--red);color:#fff;font-size:9.5px;
  font-weight:800;border-radius:99px;padding:3px 11px;letter-spacing:.08em;
  display:flex;align-items:center;gap:5px}
.pk .b{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1}
.pk .t{font-size:14px;font-weight:800;letter-spacing:-.025em;line-height:1.45}
.pk .d{font-size:11.5px;color:var(--ink2);margin-top:5px;line-height:1.65;flex:1}
.pk .row{display:flex;align-items:center;gap:11px;margin-top:11px;padding-top:9px;
  border-top:1px solid var(--line);font-size:11px;color:var(--ink3)}
.pk .row b{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.pk .row .r{color:var(--red)}

/* ── DISCOVER ── */
.dsc{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.dsc{grid-template-columns:232px 1fr;gap:28px}}
.fil{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  align-self:start;overflow:hidden}
@media(min-width:900px){.fil{position:sticky;top:70px}}
.fil-h{padding:10px 14px;font-size:12px;font-weight:800;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:7px}
.fil-h span{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;
  border-radius:99px;padding:1px 8px}
.fg{padding:13px 14px;border-top:1px solid var(--line)}
.fg:first-of-type{border-top:none}
.fg h4{font-size:12px;font-weight:700;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:12.5px;padding:6px 11px;border:1px solid var(--line2);background:var(--paper);
  border-radius:7px;min-height:34px}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.fil-sp{display:none}
@media(max-width:899px){.fil-sp{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px}
  .fil-sp::-webkit-scrollbar{display:none}.fil{display:none}}
.res-bar{display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:9px}
.res-bar .c{font-size:15px;font-weight:800}
.res-bar .c b{color:var(--red);font-size:19px}
.res-bar .s{font-size:12px;color:var(--ink3)}

/* ── GAME ── */
.gh{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  overflow:hidden}
.gh-band{height:6px;background:var(--red)}
.gh-in{padding:17px 15px}
@media(min-width:700px){.gh-in{padding:24px}}
.gh-top{display:grid;grid-template-columns:78px 1fr;gap:15px;align-items:start}
@media(min-width:620px){.gh-top{grid-template-columns:118px 1fr;gap:22px}}
.gh-ic{aspect-ratio:1;border-radius:16px;display:flex;align-items:center;justify-content:center}
.gh-ic .mk{font-size:42px;font-weight:800;color:rgba(255,255,255,.36);letter-spacing:-.05em}
.gh h1{font-size:clamp(21px,4.2vw,30px);font-weight:900;line-height:1.32;letter-spacing:-.04em}
.gh .orig{font-family:'DM Mono',monospace;font-size:11.5px;color:var(--ink3);margin-top:4px}
.gh .by{font-size:12.5px;color:var(--ink2);margin-top:8px}
.gh .by b{font-weight:700;color:var(--ink)}
.gh-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}
.gh-tags span{font-size:12px;padding:3px 10px;border-radius:6px;background:var(--sur);color:var(--ink2)}
.rbx{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);margin-top:18px}
@media(min-width:620px){.rbx{grid-template-columns:repeat(4,1fr)}}
.rbx div{background:var(--paper);padding:10px 4px;text-align:center}
.rbx .l{font-size:10px;color:var(--ink3)}
.rbx .v{font-size:17px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.rbx-note{padding:7px 15px;font-size:10.5px;color:var(--ink3);background:var(--sur);
  display:flex;gap:9px;flex-wrap:wrap}
.play{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--red);color:#fff;font-weight:800;font-size:16px;padding:15px;
  border-radius:var(--r2);margin-top:12px;box-shadow:0 3px 0 var(--red-d)}
.play:hover{background:var(--red-d);box-shadow:0 1px 0 var(--red-d);transform:translateY(2px)}
.play small{font-family:'DM Mono',monospace;font-size:10px;font-weight:400;color:rgba(255,255,255,.6)}
.acts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.act{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r2);
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;
  min-height:70px;justify-content:center}
.act .l{font-size:12.5px;font-weight:700;white-space:nowrap}
@media(max-width:560px){
  .acts{gap:5px}
  .act{padding:9px 2px;min-height:58px;gap:3px}
  .act .l{font-size:10px;letter-spacing:-.02em}
  .act .ico.l{width:16px;height:16px}
  .act .c{font-size:9px}
}
.act .c{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3)}
.act:hover{border-color:var(--ink)}
.act[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.act[aria-pressed="true"] .c{color:rgba(255,255,255,.5)}
.act[data-act="fav"][aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.act[data-act="fav"][aria-pressed="true"] svg{fill:var(--ink)}
.vote-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:15px}
.vt-n{font-size:40px;font-weight:900;letter-spacing:-.055em;line-height:1;
  font-variant-numeric:tabular-nums}
.vt-n span{font-size:14px;color:var(--ink3);font-weight:600;margin-left:5px;letter-spacing:0}
.vt-c{font-size:11.5px;color:var(--ink3);margin-top:2px}
.stars{color:var(--gold);display:flex;gap:1px}
.vt-dist{display:grid;gap:3px;min-width:140px}
.vt-row{display:grid;grid-template-columns:10px 1fr 28px;gap:7px;align-items:center;
  font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3)}
.vt-row .b{height:5px;background:var(--sur2);border-radius:99px;overflow:hidden}
.vt-row .b i{display:block;height:100%;background:var(--gold)}
.vt-cta{margin-left:auto;background:var(--ink);color:#fff;border-radius:var(--r2);
  padding:11px 19px;font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:7px}
.vt-cta:hover{background:var(--red)}
.vt-cta .exp{background:var(--gold);color:var(--ink);font-size:10px;font-weight:800;
  border-radius:99px;padding:1px 7px}
.pt{padding:15px 0;display:grid;grid-template-columns:1fr;gap:11px;align-items:center;
  border-bottom:1px solid var(--line)}
@media(min-width:640px){.pt{grid-template-columns:minmax(0,1fr) 300px;gap:22px}}
.pt:last-of-type{border-bottom:none}
.pt .tx{font-size:13.5px;font-weight:700;line-height:1.6;letter-spacing:-.015em}
.pt .tx i{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);font-weight:400}
.pt .mk2{display:flex;align-items:center;gap:10px}
/* 評価ゲージ */
.gauge{display:flex;align-items:center;gap:13px}
.gg-w{flex:1;min-width:0}
.gg-cells{display:flex;gap:2px;height:13px}
.gg-cells i{flex:1;background:var(--sur2);border-radius:2px}
.gg-cells i.on{background:#B9B4A6}
.gg-cells i.hi{background:var(--red)}
.gg-sc{display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink3);
  margin-top:5px;letter-spacing:.02em}
/* v0.0.361: 幅を固定していたので、長い言葉（むずかしい 等）が枠からはみ出して
   スマホで重なっていた。**下限は今までどおり、上限まで伸びる**形にする。
   短い言葉（とても・まあまあ）は下限で止まるので、見た目は変わらない。 */
.gg-lab{flex:none;min-width:72px;max-width:112px;text-align:right;word-break:keep-all}
.gg-lab b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em}
.gg-lab em{font-style:normal;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.gg-lab.hi b{color:var(--red)}
.pt.lock .gauge{opacity:.45}
.pt.lock .tx{color:var(--ink3)}
.pt.lock button{font-size:12.5px;font-weight:700;color:var(--red);border:1px dashed var(--line2);
  border-radius:7px;padding:6px 13px}
.pt.lock button:hover{border-style:solid;border-color:var(--red)}

/* ── RANKING ── */
.rk-tabs,.bfil,.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:14px}
.rk-tabs::-webkit-scrollbar,.bfil::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.rk-tabs button,.bfil button,.tabs button{flex:none;font-size:12.5px;font-weight:700;
  padding:7px 14px;border-radius:99px;border:1px solid var(--line2);background:var(--paper);min-height:36px}
.rk-tabs button:hover,.bfil button:hover,.tabs button:hover{border-color:var(--ink)}
.rk-tabs button.on,.bfil button.on,.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.rk{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.rr{display:grid;grid-template-columns:40px 50px 1fr auto;gap:12px;align-items:center;
  padding:10px 14px 10px 6px;text-align:left;width:100%;border-top:1px solid var(--line)}
.rr:first-child{border-top:none}
.rr:hover{background:var(--sur)}
.rr .no{font-size:17px;font-weight:800;text-align:center;color:var(--ink3);
  font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.rr:nth-child(1) .no,.rr:nth-child(2) .no,.rr:nth-child(3) .no{color:#fff;background:var(--ink);
  border-radius:7px;padding:3px 0;font-size:16px}
.rr:nth-child(1) .no{background:var(--gold);color:var(--ink)}
.rr .th{width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.rr .th .mk{font-size:20px;font-weight:800;color:rgba(255,255,255,.36)}
.rr .t{font-size:13.5px;font-weight:700;line-height:1.45;letter-spacing:-.015em}
.rr .tg{font-size:11px;color:var(--ink3);margin-top:2px}
.rr .rt{text-align:right;font-size:11px;color:var(--ink3);white-space:nowrap}
.rr .rt b{display:block;font-size:14px;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.rr .rt .up{color:var(--red);font-weight:700}
@media(max-width:560px){.rr{grid-template-columns:30px 44px 1fr}
  .rr .rt{grid-column:2/-1;text-align:left;display:flex;gap:12px;align-items:baseline}
  .rr .rt b{display:inline}}

/* ── CODES ── */
.cgame{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  overflow:hidden;margin-bottom:11px}
.cgame-h{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line)}
.cgame-h .ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex:none;font-size:14px;font-weight:800;color:rgba(255,255,255,.4)}
.cgame-h .nm{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.015em}
.cgame-h .mt{display:block;font-size:11px;color:var(--ink3);margin-top:1px}
.cgame-h .go2{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--red);
  display:flex;align-items:center;gap:3px;white-space:nowrap}
.crow{padding:13px 14px;border-top:1px solid var(--line)}
.crow:first-of-type{border-top:none}
.crow .l1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crow .cc{font-family:'DM Mono',monospace;font-size:14px;font-weight:500;
  background:var(--sur);border:1px solid var(--line2);border-radius:6px;padding:5px 12px}
.crow .rw{font-size:12.5px;color:var(--ink2);flex:1;min-width:130px}
.crow .copy{border:1px solid var(--ink);border-radius:6px;padding:6px 14px;font-size:12.5px;
  font-weight:700;display:flex;align-items:center;gap:6px}
.crow .copy:hover{background:var(--ink);color:#fff}
.crow .l2{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.crow .l2 .q{font-size:11.5px;color:var(--ink3)}
.vt2{font-size:12px;font-weight:700;border:1px solid var(--line2);border-radius:6px;padding:5px 12px}
.vt2:hover{border-color:var(--ink)}
.vt2[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.crow .rate2{margin-left:auto;font-size:11px;color:var(--ok);font-weight:700}
.crow.exp2{opacity:.5}
.crow.exp2 .cc{text-decoration:line-through}

/* ── フォーム ── */
.step{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.step .n{width:23px;height:23px;border-radius:6px;background:var(--red);color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.step .t{font-size:14px;font-weight:800;letter-spacing:-.02em}
.step .r{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;color:var(--ink3)}
.urlbox{display:flex;gap:8px;flex-wrap:wrap}
.urlbox input{flex:1;min-width:200px;border:1px solid var(--line2);border-radius:var(--r2);
  padding:12px 14px;font:inherit;font-size:14px;outline:none;background:var(--paper)}
.urlbox input:focus{border-color:var(--red)}
.urlbox button{background:var(--ink);color:#fff;border-radius:var(--r2);padding:12px 22px;
  font-weight:700;font-size:14px}
.urlbox button:hover{background:var(--red)}
.auto{display:none;margin-top:15px;border:1px solid var(--ok);border-radius:var(--r);overflow:hidden}
.auto.on{display:block}
.auto-h{background:#EFF9F2;color:var(--ok);padding:8px 14px;font-size:12px;font-weight:700;
  display:flex;align-items:center;gap:7px;border-bottom:1px solid #CFE8D9}
.auto-b{padding:15px 14px;display:grid;grid-template-columns:62px 1fr;gap:15px;align-items:start}
.auto-b .ic{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center}
.auto-b .ic .mk{font-size:25px;font-weight:800;color:rgba(255,255,255,.36)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 13px;font-size:12.5px;margin-top:8px}
.kv dt{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--ink3);
  white-space:nowrap;padding-top:3px}
.kv dd{font-weight:500}
.fld{margin-top:15px}
.fld label{font-size:13px;font-weight:700;display:block;margin-bottom:5px}
.fld .hint{font-size:11.5px;color:var(--ink3);font-weight:400;display:block;margin-top:2px}
.fld input,.fld textarea{width:100%;border:1px solid var(--line2);border-radius:var(--r2);
  padding:11px 13px;font:inherit;font-size:14px;outline:none;background:var(--paper)}
.fld input:focus,.fld textarea:focus{border-color:var(--red)}
.ai-sug{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;align-items:center}
.ai-sug .lb{font-size:11.5px;color:var(--ink3)}
.ai-sug button{font-size:12px;border:1px solid var(--line2);border-radius:99px;padding:4px 11px;font-weight:600}
.ai-sug button:hover{border-color:var(--red);color:var(--red)}
.bigbtn{width:100%;background:var(--red);color:#fff;border-radius:var(--r2);padding:14px;
  font-size:15px;font-weight:800;margin-top:18px;box-shadow:0 3px 0 var(--red-d)}
.bigbtn:hover{background:var(--red-d);box-shadow:0 1px 0 var(--red-d);transform:translateY(2px)}
.picked{border:1px dashed var(--line2);border-radius:var(--r);padding:13px;min-height:74px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start}
.picked .ph{color:var(--ink3);font-size:13px;margin:auto}
.pick{display:flex;align-items:center;gap:8px;background:var(--sur);border-radius:7px;
  padding:5px 8px 5px 5px;font-size:12.5px;font-weight:700}
.pick .ic{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;flex:none;font-size:10px;font-weight:800;color:rgba(255,255,255,.5)}
.pick .rm{color:var(--ink3);display:flex}
.pick .rm:hover{color:var(--red)}
.radios{display:grid;gap:8px}
@media(min-width:680px){.radios{grid-template-columns:repeat(3,1fr)}}
.radio{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line2);
  border-radius:var(--r2);padding:12px 14px;text-align:left}
.radio[aria-pressed="true"]{border-color:var(--red);background:var(--red-s)}
.radio .dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line2);flex:none;margin-top:4px}
.radio[aria-pressed="true"] .dot{border-color:var(--red);border-width:5px}
.radio .t{font-size:13px;font-weight:700}
.radio .d{font-size:11.5px;color:var(--ink3);line-height:1.55}

/* ── ログインゲート ── */
.gate{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:36px 22px;text-align:center;max-width:460px;margin:8px auto 0}
.gate .ic{width:46px;height:46px;border-radius:12px;background:var(--red-s);color:var(--red);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.gate h3{font-size:17px;font-weight:800;letter-spacing:-.025em}
.gate p{font-size:13px;color:var(--ink2);margin-top:8px}
.gate .gbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--ink);color:#fff;border-radius:var(--r2);padding:14px;font-weight:700;
  font-size:14.5px;margin-top:18px}
.gate .gbtn:hover{background:var(--red)}
.gate .sub{font-size:11.5px;color:var(--ink3);margin-top:12px;line-height:1.7}

/* ── BOARD ── */
.post-box{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  overflow:hidden;margin-bottom:20px}
.post-box .h{padding:11px 14px;font-size:12.5px;font-weight:800;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px}
.post-box .b{padding:14px}
.post-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sel{flex:1;min-width:180px;border:1px solid var(--line2);border-radius:var(--r2);
  background:var(--paper);padding:10px 12px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:9px;text-align:left}
.sel:hover{border-color:var(--ink)}
.sel .ic{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;flex:none;font-size:10px;font-weight:800;color:rgba(255,255,255,.5)}
.sel .ar{margin-left:auto;color:var(--ink3);font-size:11.5px;font-weight:400}
.post-box textarea{width:100%;border:1px solid var(--line2);border-radius:var(--r2);
  padding:11px 13px;font:inherit;font-size:14px;min-height:74px;resize:vertical;outline:none}
.post-box textarea:focus{border-color:var(--red)}
.post-foot{display:flex;align-items:center;gap:11px;margin-top:11px;flex-wrap:wrap}
.post-foot .cau{font-size:11.5px;color:var(--ink3);flex:1;min-width:190px;line-height:1.6}
.post-foot .sub{background:var(--red);color:#fff;border-radius:var(--r2);font-weight:800;
  font-size:14px;padding:11px 24px}
.post-foot .sub:hover{background:var(--red-d)}
.plist{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.po{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px;text-align:left;width:100%;
  border-top:1px solid var(--line)}
.po:first-child{border-top:none}
.po:hover{background:var(--sur)}
.po .ic{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;color:rgba(255,255,255,.4)}
.po .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.po .gm{font-size:12px;font-weight:700;color:var(--red)}
.po .kd{font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:4px;
  background:var(--sur);color:var(--ink2)}
.po .bd{font-size:13.5px;line-height:1.7}
.po .mt{display:flex;gap:13px;margin-top:6px;font-size:11px;color:var(--ink3);
  align-items:center;flex-wrap:wrap}
.po .mt .rep{color:var(--ink2);font-weight:600;display:flex;align-items:center;gap:4px}
.po .mt .rp{margin-left:auto;display:flex;align-items:center;gap:4px}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:640px){.shots{grid-template-columns:repeat(4,1fr)}}
.shot{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  overflow:hidden;text-align:left}
.shot:hover{border-color:var(--ink)}
.shot .im{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.shot .im .mk{font-size:26px;font-weight:800;color:rgba(255,255,255,.36)}
.shot .cp{padding:11px 13px 13px}
.shot .cp b{display:block;font-size:12.5px;font-weight:700;line-height:1.5;letter-spacing:-.015em}
.shot .cp i{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);margin-top:4px}
.safe{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);margin-top:20px}
.safe .h{padding:12px 15px;font-size:13px;font-weight:800;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px}
.safe ul{padding:13px 16px 15px;list-style:none;display:grid;gap:7px}
.safe li{font-size:12.5px;color:var(--ink2);padding-left:15px;position:relative;line-height:1.75}
.safe li::before{content:'';position:absolute;left:0;top:10px;width:5px;height:5px;
  border-radius:50%;background:var(--red)}

/* ── PROFILE / ROBRANK ── */
.pf{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);overflow:hidden}
.pf-band{height:6px;background:linear-gradient(90deg,var(--red),var(--gold))}
.pf-in{padding:20px 17px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pf-av{width:60px;height:60px;border-radius:14px;background:#4A5568;flex:none}
.pf .nm{font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.pf .sub{font-size:11.5px;color:var(--ink3)}
.pf-st{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.pf-st .n{font-size:20px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.pf-st .l{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;color:var(--ink3)}
.robrank{border-top:1px solid var(--line);padding:16px 17px;background:var(--sur)}
.rb-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rb-lv{background:var(--ink);color:#fff;border-radius:8px;padding:5px 11px;font-size:11px;
  font-weight:800;letter-spacing:.06em;flex:none}
.rb-lv b{color:var(--gold)}
.rb-nm{font-size:16px;font-weight:800;letter-spacing:-.02em}
.rb-en{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--ink3)}
.rb-exp{margin-left:auto;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.rb-exp b{font-size:15px;font-weight:800;color:var(--ink)}
.rb-bar{height:9px;background:var(--paper);border:1px solid var(--line2);border-radius:99px;
  overflow:hidden;margin-top:11px}
.rb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--red))}
.rb-next{font-size:11.5px;color:var(--ink3);margin-top:6px}
.ms{display:grid;gap:8px}
.msi{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:var(--r2);padding:12px 14px;background:var(--paper)}
.msi.done{background:var(--sur);border-style:dashed}
.msi .ck{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line2);flex:none;
  display:flex;align-items:center;justify-content:center;color:transparent}
.msi.done .ck{background:var(--ok);border-color:var(--ok);color:#fff}
.msi .t{font-size:13.5px;font-weight:700;letter-spacing:-.015em}
.msi .d{font-size:11.5px;color:var(--ink3)}
.msi.done .t{color:var(--ink3);text-decoration:line-through}
.msi .xp{margin-left:auto;background:var(--gold-s);color:#8A6400;border:1px solid #F0DFAE;
  border-radius:99px;padding:3px 11px;font-size:12px;font-weight:800;flex:none}
.msi.done .xp{background:var(--sur2);color:var(--ink3);border-color:var(--line2)}
.ranks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden}
.rkrow{background:var(--paper);padding:10px 14px;display:flex;align-items:center;gap:12px}
.rkrow.now{background:var(--gold-s)}
.rkrow .lv{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink3);width:34px;flex:none}
.rkrow .nm2{font-size:13px;font-weight:700}
.rkrow .en2{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);letter-spacing:.1em}
.rkrow .cond{margin-left:auto;font-size:11.5px;color:var(--ink3);text-align:right}
.setrow{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.setrow:last-child{border-bottom:none}
.setrow .t{font-size:13.5px;font-weight:700}
.setrow .d{font-size:11.5px;color:var(--ink3);line-height:1.6}
.seg{margin-left:auto;display:flex;background:var(--sur);border-radius:8px;padding:3px;flex:none}
.seg button{font-size:12px;font-weight:700;padding:7px 15px;border-radius:6px;color:var(--ink3)}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ── DEV ── */
.dev-lock{border:1px solid var(--line2);background:var(--paper);border-radius:var(--r);
  padding:13px 15px;margin-bottom:13px;font-size:12.5px;color:var(--ink2);line-height:1.7;
  display:flex;gap:11px;align-items:flex-start}
.dev-lock b{font-family:'DM Mono',monospace;font-weight:500;color:var(--ink)}
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:760px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi div{background:var(--paper);padding:14px 15px}
.kpi .l{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3)}
.kpi .v{font-size:25px;font-weight:800;line-height:1.25;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.kpi .v small{font-size:13px;color:var(--ink3);font-weight:600}
.kpi .dl{font-size:11px;color:var(--red);font-weight:700}
.pan{display:grid;gap:11px;margin-top:11px}
@media(min-width:820px){.pan{grid-template-columns:1fr 1fr}}
.p{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:16px}
.p h4{font-size:12.5px;font-weight:800;margin-bottom:13px;display:flex;align-items:center;gap:8px}
.p h4 span{margin-left:auto;font-family:'DM Mono',monospace;font-size:9.5px;
  letter-spacing:.1em;color:var(--ink3)}
.hb{display:grid;grid-template-columns:54px 1fr 36px;gap:9px;align-items:center;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--ink2);margin-bottom:6px}
.hb .t{height:13px;background:var(--sur2);border-radius:3px;overflow:hidden}
.hb .t i{display:block;height:100%;background:var(--ink3)}
.hb .t i.hi{background:var(--red)}
.hb .p2{text-align:right;color:var(--ink)}
.dnt{display:flex;align-items:center;gap:18px}
.dg{width:100px;height:100px;border-radius:50%;flex:none;
  background:conic-gradient(var(--red) 0 61%,#E9857F 61% 84%,#C4BDB0 84% 96%,#E5E0D5 96%)}
.dg::after{content:'';display:block;width:52px;height:52px;margin:24px;border-radius:50%;background:#fff}
.dl2{font-size:12px;display:grid;gap:6px;flex:1}
.dl2 div{display:flex;align-items:center;gap:8px}
.dl2 i{width:9px;height:9px;border-radius:2px;flex:none}
.dl2 b{font-family:'DM Mono',monospace;font-weight:500;margin-left:auto}
.spark{display:flex;align-items:flex-end;gap:4px;height:72px}
.spark i{flex:1;background:var(--sur2);border-radius:2px 2px 0 0}
.spark i:last-child{background:var(--red)}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);text-align:left;padding:0 0 7px;border-bottom:1px solid var(--line);font-weight:400}
.tbl td{padding:8px 0;border-bottom:1px solid var(--line)}
.tbl td:last-child,.tbl th:last-child{text-align:right;font-family:'DM Mono',monospace}
.quotes li{list-style:none;font-size:12.5px;color:var(--ink2);padding:8px 0 8px 14px;
  border-left:2px solid var(--red-s)}
.quotes li b{font-weight:700;color:var(--ink)}

/* ── フッター ── */
.ft{background:var(--ink);color:rgba(255,255,255,.6);margin-top:52px;padding:34px 0 30px}
.ft-in{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:720px){.ft-in{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}}
.ft .brand{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.03em;
  display:flex;align-items:center;gap:7px}
.ft .brand i{width:7px;height:7px;background:var(--red);border-radius:2px;font-style:normal}
.ft .bd{font-size:12px;line-height:1.85;margin-top:9px;max-width:30em}
.ft h5{font-size:11px;font-weight:700;color:#fff;letter-spacing:.1em;margin-bottom:9px;
  text-transform:uppercase;font-family:'DM Mono',monospace}
.ft ul{list-style:none;display:grid;gap:6px}
.ft li a,.ft li button{font-size:12.5px;color:rgba(255,255,255,.6);text-align:left}
.ft li a:hover,.ft li button:hover{color:#fff}
.ft-btm{border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:16px;
  font-size:11px;line-height:1.9;color:rgba(255,255,255,.4)}
.ft-btm .mono{color:rgba(255,255,255,.28)}

/* ── 下部バー ── */
#bottom{position:fixed;left:0;right:0;bottom:0;z-index:400;background:rgba(250,248,243,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--line2)}
.bt-in{display:flex;gap:9px;align-items:stretch;max-width:1120px;margin:0 auto;padding:11px 16px 13px}
#bottom.nav .bt-in{gap:0;padding:4px 6px 6px}
#bottom .ib{flex:none;width:58px;min-height:54px;border:1px solid var(--line2);border-radius:var(--r2);
  background:var(--paper);display:flex;align-items:center;justify-content:center}
#bottom .ib:hover{border-color:var(--ink)}
#bottom .ib[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
#bottom .ib[aria-pressed="true"] svg{fill:var(--ink)}
#bottom .rate{flex:none;padding:0 20px;min-height:54px;border:1px solid var(--ink);border-radius:var(--r2);
  background:var(--paper);font-size:13.5px;font-weight:800}
#bottom .rate:hover{background:var(--ink);color:#fff}
#bottom .go{flex:1;min-height:54px;background:var(--red);color:#fff;border-radius:var(--r2);display:flex;
  align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:800}
#bottom .go:hover{background:var(--red-d)}
#bottom .nb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:11px 0 9px;min-height:56px;border-radius:9px;color:var(--ink3)}
#bottom .nb:hover{background:var(--sur)}
#bottom .nb .l{font-size:10.5px;font-weight:700;letter-spacing:.01em}
#bottom .nb.on{color:var(--red)}

/* ── 評価シート ── */
#ov{position:fixed;inset:0;z-index:600;background:rgba(22,24,29,.55);display:none;
  align-items:flex-end;justify-content:center}
@media(min-width:640px){#ov{align-items:center;padding:24px}}
#ov.on{display:flex}
.sheet{background:#fff;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  border-radius:14px 14px 0 0}
@media(min-width:640px){.sheet{border-radius:var(--r)}}
.sh-h{position:sticky;top:0;background:#fff;padding:17px 18px 13px;
  border-bottom:1px solid var(--line);z-index:2}
.sh-h .r1{display:flex;align-items:center;gap:10px}
.sh-h h3{font-size:15.5px;font-weight:800;letter-spacing:-.025em}
.sh-h .x{margin-left:auto;color:var(--ink3);width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center}
.sh-h .x:hover{background:var(--sur)}
.sh-h .sb{font-size:11.5px;color:var(--ink3);margin-top:2px;display:flex;align-items:center;gap:8px}
.sh-h .sb .xp{background:var(--gold-s);color:#8A6400;border:1px solid #F0DFAE;
  border-radius:99px;padding:1px 8px;font-weight:800;font-size:11px}
.prog{height:4px;background:var(--sur2);border-radius:99px;margin-top:12px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--red);transition:width .25s}
.sh-b{padding:4px 18px 16px}
.q{padding:16px 0;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:none}
.q .ql{font-size:14px;font-weight:800;letter-spacing:-.02em}
.q .qs{font-size:11.5px;color:var(--ink3);margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{padding:9px 14px;border:1px solid var(--line2);background:#fff;border-radius:7px;
  font-size:13px;min-height:42px}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.opts.st .opt{min-width:50px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.sh-f{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 18px 16px}
.sh-f .send{width:100%;background:var(--red);color:#fff;border-radius:var(--r2);
  font-weight:800;font-size:15px;padding:14px}
.sh-f .send:disabled{background:var(--sur2);color:var(--ink3);cursor:not-allowed}
.sh-f .nt{font-size:11.5px;color:var(--ink3);text-align:center;margin-top:9px;line-height:1.7}

#toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,12px);z-index:700;
  background:var(--ink);color:#fff;padding:12px 19px;border-radius:8px;font-size:13px;
  font-weight:600;line-height:1.75;opacity:0;pointer-events:none;transition:.2s;
  max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast .xp{color:var(--gold);font-weight:800;margin-left:7px}

.page{padding-top:24px}
.page.home{padding-top:0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;transform:none!important}}

/* ══════════════════════════════════════════════
   theme overrides — モックでは button だった要素を
   実サイトでは a に置き換えているため、同じ見た目を当てる
   ══════════════════════════════════════════════ */
.hnav a{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);padding:6px 11px;
  border-radius:6px;white-space:nowrap;flex:none;display:block}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.hnav a.on{color:#fff;background:var(--red)}
.rk-tabs a{flex:none;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:99px;
  border:1px solid var(--line2);background:var(--paper);min-height:36px;display:flex;
  align-items:center}
.rk-tabs a:hover{border-color:var(--ink)}
.rk-tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}
#bottom .nb{text-decoration:none}
.sec-hd a.more{margin-left:auto}
.blk-h a.n{margin-left:auto;color:var(--red);font-weight:700}
.crumb a:hover,.mono a:hover{color:var(--red)}
.gh-ic img{border-radius:16px}
/* 画像が入るまでのプレースホルダは object-fit で埋める */
.gc-th img,.pk .im img,.rr .th img{width:100%;height:100%;object-fit:cover}


/* ══ v0.0.10 デザイン改修 ══════════════════════════════ */
/* 詰まり解消: margin-top:18px を撤去し、余白はパディングで取る */
.rbx{margin-top:0;border-top:1.5px solid var(--line)}
.rbx div{padding:14px 6px}
.rbx .l{font-size:10.5px;margin-bottom:3px;letter-spacing:.04em}
.rbx .v{font-size:18px}
.rbx-note{padding:9px 18px}
.gh-in{padding:20px 18px 16px}
@media(min-width:700px){.gh-in{padding:28px 28px 18px}}
.gh .by{margin-top:10px}
.gh-desc{margin-top:12px !important}

/* ゲージ: セルを大きく・点灯色を濃く・行間を広く */
.gg-cells{height:17px;gap:2.5px}
.gg-cells i{border-radius:3px}
.gg-cells i.on{background:#8F8A7A}
.gg-sc{font-size:10px;margin-top:6px}
.gg-lab b{font-size:14.5px}
.gg-lab em{font-size:11.5px}
.pt{padding:18px 0;gap:13px}
@media(max-width:639px){.gauge{gap:10px}.gg-lab{min-width:64px;max-width:98px}}

/* あなたの記録: Roblox データ枠と視覚的に区別するユーザー領域 */
.ulog{background:#FAF6EC;border:1.5px dashed #D8D2C2;border-radius:var(--r2,14px);
  padding:14px 14px 12px;margin-top:16px}
.ulog .blk-h{border:0;padding:0 2px 8px}
.ulog .acts{margin-top:4px}
.ulog .act{background:#fff}

/* プロフィール: 折りたたみと編集 */
details.fold>summary{cursor:pointer;list-style:none;user-select:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .chev{margin-left:auto;font-weight:800;color:var(--ink3);
  font-family:'DM Mono',monospace;font-size:14px}
details.fold[open]>summary .chev::before{content:"−"}
details.fold:not([open])>summary .chev::before{content:"+"}
details.fold:not([open]){padding-bottom:2px}
.pf-edit{font-size:12px;font-weight:700;padding:7px 14px;border:1.5px solid var(--line2);
  border-radius:8px;background:#fff;margin-left:auto;align-self:start;cursor:pointer}
.pf-edit:hover{border-color:var(--ink)}
.pf-form{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pf-form input{flex:1;min-width:180px;font:inherit;padding:9px 12px;
  border:1.5px solid var(--line2);border-radius:8px}
.pf-form button{font:inherit;font-weight:700;padding:9px 16px;border-radius:8px;
  background:var(--ink);color:#fff;cursor:pointer}


/* ══ v0.0.12 デザイン第3弾 ══════════════════════════════ */
/* カードの統計行: 左右の余白バランスとラベル/数字の分離 */
.gc-st div{padding:7px 10px;text-align:left;display:flex;align-items:baseline;
  justify-content:space-between;gap:6px;min-width:0}
.gc-st .l{font-size:9.5px;letter-spacing:.05em;white-space:nowrap}
.gc-st .v{font-size:13px}

/* ゲーム詳細の統計セル: ラベルと数字を寄せて締める */
.rbx div{padding:12px 8px 11px}
.rbx .l{margin-bottom:1px;font-size:10.5px}
.rbx .v{font-size:17.5px;letter-spacing:-.02em}

/* ゲージ: 参照画像の構造を採用（大きいセル・値チップ）。
   色は確定ルール（信号色を使わない）に従いニュートラル濃淡+先端赤のまま */
.gg-cells{height:20px;gap:3px}
.gg-cells i{border-radius:4px;background:#EAE6DA}
.gg-cells i.on{background:#A39C8A}
.gg-cells i.on:nth-child(n+9){background:#8F8878}
.gg-cells i.on:nth-child(n+13){background:#7A7364}
.gg-cells i.hi{background:var(--red)}
.gg-sc{font-size:10.5px;margin-top:6px;font-weight:600}
.gg-lab{width:auto;min-width:72px}
.gg-lab b{display:inline-block;font-size:13.5px;padding:6px 13px;border-radius:9px;
  background:var(--sur);letter-spacing:0}
.gg-lab.hi b{background:#FBECEA;color:var(--red)}
.gg-lab em{display:block;margin-top:3px;text-align:right}
.pt{padding:19px 0}

/* ROBRANK: 現在Tierの強調 */
.rkrow{position:relative}
.rkrow .here{display:none;font-size:10.5px;font-weight:800;color:#fff;background:var(--red);
  border-radius:6px;padding:3px 9px;letter-spacing:.04em;flex:none}
.rkrow.now{background:#FBF4E4;border-left:4px solid #D4A017;padding-left:12px}
.rkrow.now .nm2{font-weight:900}
.rkrow.now .here{display:inline-block}

/* プロフィール: 編集ボタンを名前の横に */
.nm-row{display:flex;align-items:center;gap:10px}
.pf-edit{margin-left:0;padding:5px 12px;font-size:11.5px;border-radius:7px}


/* ══ v0.0.14 ══════════════════════════════════════════ */
/* 表示切替ユーティリティ */
.sp-only{display:none}
@media(max-width:640px){.sp-only{display:block}.pc-only{display:none !important}}

/* ランキング: 余白と行レイアウト（SPで数字をタイトル横に） */
.rk-tabs{padding-bottom:10px;margin-top:4px}
.rk-sel{width:100%;font:inherit;font-weight:700;font-size:14px;padding:11px 14px;margin:4px 0 12px;
  border:1.5px solid var(--line2);border-radius:10px;background:#fff;appearance:auto}
.rk{margin-top:2px}
.rr .t{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rt{white-space:nowrap}
@media(max-width:640px){
  .rr{grid-template-columns:32px 44px minmax(0,1fr) auto;gap:9px;padding:12px 2px}
  .rr .t{font-size:13.5px}
  .rr .tg{display:none}
  .rt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
  .rt b{font-size:14px}
}

/* ゲーム詳細ヘッダ下段（説明+ギャラリー、アイコン列に食い込まない全幅） */
.gh-body{padding:2px 18px 16px}
@media(min-width:700px){.gh-body{padding:2px 28px 18px}}
.gh-body:empty{display:none}

/* ゲージ行: 左詰まり解消と「ゲージ｜評価｜回答」の整列 */
.pt{padding:18px 4px}
.gauge{gap:16px}
.pt .mk2{display:flex;align-items:center;gap:16px;width:100%}
.pt .mk2 .gauge{flex:1;min-width:0}
.pt .mk2 button{flex:none;margin-left:auto}
@media(max-width:639px){
  .pt{padding:16px 2px;gap:10px}
  .gauge{gap:12px}
  .gg-cells{height:15px;gap:2px}
  .gg-lab b{font-size:12.5px;padding:5px 10px}
  .gg-sc{font-size:9.5px}
}

/* カード統計行の再設計: ベージュのピルを廃止し、区切り線+2行のクリーンな表組みに。
   ラベルは濃く、数字は右寄せ nowrap でどんな桁でも崩れない */
.gc-st{display:block;background:none;margin-top:auto;border-top:1px solid var(--line);padding-top:2px}
.gc-st div,.gc-st>span{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;background:none;padding:5px 2px 0;min-width:0}
.gc-st .l{font-size:10px;color:var(--ink2);letter-spacing:.06em;font-weight:600;white-space:nowrap}
.gc-st .v{font-size:13px;font-weight:800;white-space:nowrap}


/* ══ v0.0.15 ══════════════════════════════════════════ */
/* トップ統計: セル数=項目数（空セルを出さない）+ 内側パディングを上下左右で揃える */
.stats{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats>div{padding:16px 18px}

/* カード統計: 縁に張り付かせない。上下の呼吸を揃える */
.gc-st{padding:6px 4px 4px;margin-top:auto}
.gc-st div,.gc-st>span{padding:5px 6px}
.gc-b{padding-bottom:12px}

/* ゲージ: 行の呼吸をさらに確保。未回答セルも視認できる濃さに */
.pt{padding:22px 6px;gap:14px}
.gauge{gap:18px}
.gg-cells{height:21px}
.gg-cells i{background:#E4DFD0}
.pt.lock .gauge{opacity:.6}
.pt .tx{padding-right:8px}
@media(min-width:640px){.pt{grid-template-columns:minmax(0,1fr) 360px;gap:28px}}

/* 空状態の文言: 行間と余白 */
.note{line-height:1.9;padding:16px 18px}


/* ══ v0.0.16（SP 修正）════════════════════════════════ */
/* ゲーム詳細: 開発者行と説明文の間隔を締める（gh-in 下端 + gh-body 上端の二重余白を解消） */
.gh-in{padding-bottom:4px}
@media(min-width:700px){.gh-in{padding-bottom:6px}}
.gh-body{padding-top:10px}

/* ランキング行:
   PC = 従来（右端に数値ブロック）
   SP = 数値はタイトルの真下にインライン横並び。右端の縦積みは廃止 */
.rt-in{display:none}
@media(max-width:640px){
  .rr{grid-template-columns:34px 46px minmax(0,1fr);gap:10px;align-items:center;padding:13px 6px}
  .rr .no{justify-self:center}
  .rt{display:none}
  .rt-in{display:flex;align-items:baseline;gap:10px;margin-top:3px;
    font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
  .rt-in b{font-size:14.5px;font-weight:800;color:var(--ink)}
  .rr .t{font-size:14px;line-height:1.35}
  .rr .tg{display:none}
}

/* トップ: MISSION バーの上下マージンを対称に */
.mbar{margin:8px 0 24px}
@media(max-width:640px){.mbar{margin:6px 0 20px}}


/* ══ v0.0.17 ══════════════════════════════════════════ */
/* 編集フォーム: hidden 属性を display:flex が潰していた不具合の修正 */
.pf-form[hidden]{display:none}

/* アカウントメニュー（ヘッダのアバター/ランクから開く） */
.hacct{position:relative}
.hacct .hrank{cursor:pointer;background:none;border:0;padding:0;display:flex;align-items:center;gap:8px}
.hmenu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:230px;
  background:#16181D;color:#fff;border-radius:14px;padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;flex-direction:column}
.hmenu[hidden]{display:none}
.hmenu .hm-mail{font-size:11px;color:rgba(255,255,255,.55);padding:8px 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:6px;word-break:break-all}
.hmenu a,.hmenu button{display:block;text-align:left;font:inherit;font-size:13px;font-weight:700;
  color:#fff;background:none;border:0;padding:10px 12px;border-radius:9px;cursor:pointer}
.hmenu a:hover,.hmenu button:hover{background:rgba(255,255,255,.09)}
.hmenu [data-mn-logout]{color:#FF8A80;margin-top:4px;border-top:1px solid rgba(255,255,255,.12);
  border-radius:0 0 9px 9px;padding-top:12px}

.hacct .me{display:inline-block}


/* ══ v0.0.19: 掲示板のゲーム検索ピッカー ══ */
.gpick-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;background:#fff;
  border:1.5px solid var(--line2);border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.1);
  overflow:hidden;max-height:280px;overflow-y:auto}
.gpick-list[hidden]{display:none}
.gpick-list button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font:inherit;font-size:13px;font-weight:700;padding:10px 12px;background:#fff;border:0;cursor:pointer}
.gpick-list button:hover{background:var(--sur)}
.gpick-list img{width:28px;height:28px;border-radius:7px;object-fit:cover;flex:none}


/* ══ v0.0.20: ローダー ══════════════════════════════════
   上端の細い進行バー。出るのは 120ms 以上かかった処理だけ（JS 側で制御）。
   ・レイアウトを一切押し出さない（position:fixed / height 3px）
   ・消えるときは即時。opacity のフェードだけ .12s
   ・ヘッダ(z-index 500)より上、トースト(700)より下 */
#mn-load{position:fixed;inset:0;z-index:600;background:rgba(20,20,20,.28);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:0;pointer-events:none;transition:opacity .12s}
#mn-load.on{opacity:1;pointer-events:auto}
.mn-spin{width:46px;height:46px;border-radius:50%;
  border:4px solid rgba(255,255,255,.4);border-top-color:var(--red);
  animation:mnspin .7s linear infinite;background:transparent}
@keyframes mnspin{to{transform:rotate(360deg)}}
/* v0.0.190: 待っている理由を輪の下に出す（「送信中です…」など）。
   文言を渡さなければ hidden のままで、これまでどおり輪だけ。
   ※ .mn-load-t / .btn-spin は grep して未使用を確認した新クラス名 */
.mn-load-t{font-size:14px;font-weight:800;color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.mn-load-t[hidden]{display:none}
/* ボタンの中で回す小さい輪。送信ボタンが「効いている」ことを示す */
.btn-spin{display:inline-block;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  margin-right:8px;vertical-align:-2px;animation:mnspin .7s linear infinite}
.sh-f .send:disabled .btn-spin{border-color:rgba(22,24,29,.25);border-top-color:var(--ink2)}


/* ══ v0.0.22 ══════════════════════════════════════════ */

/* ① SP ランキングの重複表示を根絶。
   原因: 基礎CSSの @media(560px) 内 .rr .rt {display:flex;...}（特異性 0,2,0）が、
   v0.0.16 の .rt{display:none}（0,1,0）に勝ち続けていた。同じ特異性で潰す。 */
@media(max-width:640px){
  .rr .rt{display:none}
  .rt-in{display:flex;align-items:baseline;gap:4px 14px;margin-top:4px;flex-wrap:wrap}
  .rt-in b{font-size:16.5px;font-weight:900;color:var(--ink);letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .rt-in span{font-size:12.5px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
}

/* ② ヘッダのアカウントメニューが開かなかった原因:
   .hdr-in の overflow:hidden が、絶対配置のドロップダウンを丸ごとクリップしていた。 */
.hdr-in{overflow:visible}

/* ③ ホーム: セクションは6件表示（PC は 5列が揃うよう6件目を隠す）+ もっと見るボタン */
@media(min-width:980px){.grid.g6>*:nth-child(6){display:none}}
.sec-btn{display:block;width:100%;max-width:420px;margin:16px auto 0;text-align:center;
  border:1.5px solid var(--ink);border-radius:9px;padding:12px;font-weight:800;font-size:13.5px;
  background:var(--paper)}
.sec-btn:hover{background:var(--ink);color:#fff}

/* ④ さがす: フォーム化した絞り込み。
   下部固定バーに条件が隠れる問題は、サイドバー内スクロール + 余白で解消 */
.fil{display:block}
@media(min-width:900px){
  .fil{position:sticky;top:70px;max-height:calc(100vh - 170px);overflow-y:auto}
}
@media(max-width:899px){
  .fil{position:static;max-height:none;margin-bottom:16px}
}
.dsc{padding-bottom:24px}
.fil-q{width:100%;font:inherit;font-size:13px;padding:9px 11px;
  border:1.5px solid var(--line2);border-radius:8px;background:#fff}
.fil-q:focus{outline:none;border-color:var(--red)}
.fil .fg select{width:100%;font:inherit;font-size:13px;font-weight:600;padding:9px 11px;
  border:1.5px solid var(--line2);border-radius:8px;background:#fff;appearance:auto}
label.chip{display:inline-flex;align-items:center;cursor:pointer;user-select:none}
label.chip input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
label.chip:has(input:checked),label.chip.on{background:var(--red);border-color:var(--red);
  color:#fff;font-weight:700}
.fil-apply{display:block;width:100%;background:var(--red);color:#fff;font-weight:800;
  border-radius:8px;padding:12px;font-size:13.5px;box-shadow:0 2px 0 var(--red-d)}
.fil-apply:hover{background:var(--red-d)}
.fil-clear{display:block;text-align:center;font-size:12px;font-weight:700;color:var(--ink3);
  margin-top:9px;text-decoration:underline}


/* ══ v0.0.23: 記事タイポグラフィ ══════════════════════════
   投稿本文（.article）専用。サイトのトンマナに合わせる:
   ・見出しはセクション天罫（2px の近黒ライン）+ 赤の角マーカー
   ・数字とラベルは DM Mono / 本文は Noto Sans JP 1.9行間
   ・表は白カードに包み、SP では横スクロール（列を潰して壊さない）
   ・アクセントは var(--red) のみ。信号色・絵文字は使わない */

.post{max-width:760px;margin:0 auto}
.crumb{font-size:11px;color:var(--ink3);margin-bottom:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb a:hover{color:var(--red)}
.post .pg-h{font-size:clamp(22px,4.6vw,31px);line-height:1.5}
.post-meta{display:flex;gap:16px;font-size:11px;color:var(--ink3);
  margin:12px 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line)}

.article{font-size:15px;line-height:2;color:var(--ink);margin-top:8px;
  overflow-wrap:break-word}
.article>*+*{margin-top:1.2em}

/* 見出し */
.article h2{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.5;
  margin-top:56px;padding-top:16px;border-top:2px solid var(--ink);
  display:flex;align-items:baseline;gap:10px}
.article h2::before{content:'';width:8px;height:8px;background:var(--red);
  border-radius:2px;flex:none;transform:translateY(-2px)}
.article h3{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.55;
  margin-top:40px;padding-left:12px;border-left:4px solid var(--red)}
.article h4{font-size:15px;font-weight:800;margin-top:30px}
.article h2+p,.article h3+p,.article h4+p{margin-top:.8em}

/* 本文要素 */
.article p{font-size:14.5px;color:var(--ink2)}
.article strong,.article b{color:var(--ink);font-weight:700}
.article a{color:var(--red);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.article a:hover{text-decoration-thickness:2px}
.article em{font-style:normal;background:linear-gradient(transparent 68%, var(--gold-s) 68%)}

/* リスト: 赤の点 / 太字番号 */
.article ul,.article ol{padding-left:2px;display:grid;gap:8px}
.article ul li,.article ol li{font-size:14px;color:var(--ink2);line-height:1.85;
  padding-left:22px;position:relative;list-style:none}
.article ul li::before{content:'';position:absolute;left:4px;top:12px;
  width:6px;height:6px;border-radius:50%;background:var(--red)}
.article ol{counter-reset:mn-ol}
.article ol li{counter-increment:mn-ol;padding-left:30px}
.article ol li::before{content:counter(mn-ol);position:absolute;left:0;top:3px;
  width:21px;height:21px;border-radius:6px;background:var(--ink);color:#fff;
  font-family:'DM Mono',monospace;font-size:11.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center}
.article li>ul,.article li>ol{margin-top:8px}

/* 表: 白カード + 濃色ヘッダ。JS が .tblwrap で包み、SP は横スクロール（v0.0.45 で display:block を廃止）*/
/* v0.0.186: 囲みの作法（1.5px / 角丸12）に合わせ、字と余白を1段大きく */
.article .tblwrap,.article figure.wp-block-table{overflow-x:auto;margin:16px 0 22px;
  border:1.5px solid var(--line2);border-radius:12px;background:var(--paper);
  -webkit-overflow-scrolling:touch}
.article table{width:100%;border-collapse:collapse;margin:0;background:var(--paper)}
.article table th,.article table td{padding:13px 15px;font-size:13.5px;
  line-height:1.8;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.article table th{background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;white-space:nowrap;border-bottom:none}
.article table tr:last-child td{border-bottom:none}
.article table tbody tr:nth-child(even) td{background:var(--sur)}
.article table td:first-child{font-weight:700;color:var(--ink)}
.article table .num,.article table td:where([data-num]){font-variant-numeric:tabular-nums}
.article table tr:has(> th):not(:has(> th:not(:empty))){display:none}
@media(max-width:640px){
  .article .tblwrap.wide table,.article figure.wp-block-table table{min-width:620px}
  .article table th,.article table td{padding:11px 13px;font-size:12.5px}
}

/* 画像・動画 */
.article img{border-radius:var(--r);border:1px solid var(--line);height:auto}
.article figure{margin:0}
.article figcaption{font-size:11px;color:var(--ink3);margin-top:7px;text-align:center}
.article iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r)}
.article .wp-block-embed{margin:1.4em 0}

/* 引用・区切り・コード */
.article blockquote{background:var(--sur);border-left:4px solid var(--line2);
  border-radius:0 var(--r2) var(--r2) 0;padding:14px 16px;font-size:13.5px;color:var(--ink2)}
.article blockquote p{font-size:13.5px}
.article hr{border:0;border-top:2px solid var(--ink);margin:48px 0 0;opacity:.9}
.article code{font-family:'DM Mono',monospace;font-size:13px;background:var(--sur);
  border:1px solid var(--line2);border-radius:5px;padding:1px 7px}
.article pre{background:var(--ink);color:#fff;border-radius:var(--r);padding:14px 16px;
  overflow-x:auto;font-size:12.5px;line-height:1.7}
.article pre code{background:none;border:0;color:inherit;padding:0}

/* WP 既定クラスの受け */
.article .aligncenter{margin-left:auto;margin-right:auto}
.article .wp-block-button__link{background:var(--red);color:#fff;border-radius:var(--r2);
  padding:12px 22px;font-weight:800;text-decoration:none;display:inline-block}
.article .wp-block-button__link:hover{background:var(--red-d)}

/* 記事末尾の回遊 */
.post-next{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:18px 16px 20px;margin-top:52px}
.post-next .blk-h{margin-bottom:6px}
.post-next-btns{display:grid;gap:9px;margin-top:12px}
@media(min-width:680px){.post-next-btns{grid-template-columns:repeat(3,1fr)}
  .post-next-btns .sec-btn{margin:0;max-width:none}}

/* アーカイブ（検索・カテゴリ一覧）の行 */
.arch-row{display:block;padding:15px 2px;border-bottom:1px solid var(--line)}
.arch-row .t{font-size:14.5px;font-weight:800;line-height:1.55;letter-spacing:-.015em}
.arch-row:hover .t{color:var(--red)}
.arch-row .d{font-size:12px;color:var(--ink2);margin-top:4px;line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.arch-row .mt{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--ink3);margin-top:5px}


/* ══ v0.0.24 ══════════════════════════════════════════ */

/* ① ランキング: 順位バッジを正方形に統一（縦長ピル化の廃止）。
   基礎CSSの nth-child(1..3) の padding:3px 0 が SP の狭い列で縦長になっていた */
.rr .no{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  padding:0;border-radius:9px;font-size:15px;justify-self:center}
.rr:nth-child(1) .no,.rr:nth-child(2) .no,.rr:nth-child(3) .no{padding:0;font-size:15px}

/* ② ランキング: 数値のラベル化（PC = 右端2行、SP = タイトル下に並列） */
.rr .rt{display:grid;grid-template-columns:auto auto;gap:3px 8px;
  align-items:baseline;justify-items:end;text-align:right;white-space:nowrap}
.rr .rt .lb{font-size:10px;font-weight:700;color:var(--ink3);letter-spacing:.05em}
.rr .rt b{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums}
.rr .rt .n2{font-size:12.5px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.rt-in .pair{display:inline-flex;align-items:baseline;gap:5px}
.rt-in .lb{font-size:10.5px;font-weight:700;color:var(--ink3)}
@media(max-width:640px){
  .rr{grid-template-columns:38px 48px minmax(0,1fr);gap:12px;padding:14px 10px}
  .rr .rt{display:none}
  .rt-in{display:flex;gap:6px 18px;margin-top:6px;flex-wrap:wrap}
  .rt-in b{font-size:16px}
  .rt-in .n2,.rt-in .pair>span:last-child{font-size:13px;font-weight:700;color:var(--ink2);
    font-variant-numeric:tabular-nums}
}

/* ③ 掲示板一覧: アイコン付きの整列グリッド */
.po2{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;
  padding:15px 12px;border-bottom:1px solid var(--line);align-items:start}
.po2:last-child{border-bottom:none}
.po2 .ic{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--sur2)}
.po2 .ic img{width:100%;height:100%;object-fit:cover}
.po2 .ic .mk{font-size:17px;font-weight:800;color:rgba(255,255,255,.5)}
.po2 .l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.po2 .gm{font-size:13px;font-weight:800;color:var(--red)}
.po2 .kd{font-size:10.5px;font-weight:700;background:var(--sur);color:var(--ink2);
  border-radius:6px;padding:2px 9px;flex:none}
.po2 .au{font-size:12px;font-weight:700}
.po2 .tm{font-size:10.5px;color:var(--ink3);margin-left:auto;flex:none}
.po2 p{font-size:13.5px;line-height:1.85;margin-top:5px;color:var(--ink2);overflow-wrap:break-word}
.po2.fresh{animation:mn-in .35s ease}
@keyframes mn-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ④ FAQ・保護者Q&A: 上下均等の余白 + 行全体をタッチ範囲に */
.qa{padding:0;margin-top:10px}
.qa>summary{display:flex;align-items:center;gap:12px;padding:18px;margin:0;
  border:0;min-height:58px;cursor:pointer}
.qa>summary h3{font-size:14px;font-weight:800;letter-spacing:-.015em;line-height:1.6;flex:1}
.qa>summary .chev{margin-left:0}
.qa .qa-a{font-size:13px;line-height:1.95;color:var(--ink2);padding:0 18px 18px}
.qa[open]>summary{padding-bottom:12px}


/* ══ v0.0.26 ══════════════════════════════════════════ */

/* ① ゲーム詳細のページ内タブナビ（ロブ郎の機能踏襲・横スクロールピル） */
.gnav{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin-top:14px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{flex:none;font-size:12.5px;font-weight:800;border:1.5px solid var(--line2);
  border-radius:99px;padding:8px 15px;background:var(--paper);color:var(--ink);white-space:nowrap}
.gnav a:hover{border-color:var(--ink)}
.blk-h[id]{scroll-margin-top:74px}
.blk-h .cnt{font-size:11px;font-weight:800;color:#1B8A4B;background:#EAF6EE;
  border-radius:99px;padding:3px 10px;margin-left:2px}

/* ② ゲーム別コードページ（サマリ / NEW / 使い方 / 期限切れ） */
.csum{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:baseline;margin:16px 0 18px;
  border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:14px 16px;
  font-size:12.5px;font-weight:700;color:var(--ink2)}
.csum b{font-size:19px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;margin:0 2px}
.csum .c3{margin-left:auto;font-size:10.5px;color:var(--ink3)}
.chow ol{counter-reset:mn-ol;display:grid;gap:8px;margin-top:4px}
.chow ol li{counter-increment:mn-ol;position:relative;padding-left:30px;
  font-size:13px;line-height:1.85;color:var(--ink2);list-style:none}
.chow ol li::before{content:counter(mn-ol);position:absolute;left:0;top:2px;
  width:21px;height:21px;border-radius:6px;background:var(--ink);color:#fff;
  font-family:'DM Mono',monospace;font-size:11.5px;display:flex;align-items:center;justify-content:center}
.chow .cau{display:block;margin-top:10px}
.newb{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--red);
  border-radius:5px;padding:2px 7px;flex:none}
.cexp{border:1px solid var(--line);background:var(--sur);border-radius:var(--r);
  margin-top:18px;padding:0}
.cexp>summary{display:flex;align-items:center;gap:10px;padding:15px 16px;cursor:pointer;
  font-size:13px;font-weight:800;color:var(--ink2)}
.cexp .crow{margin:0 12px 10px;opacity:.62}
.cexp .crow .cc{text-decoration:line-through}
.cgame-h a.nm:hover{color:var(--red)}

/* ③ 最近見たゲーム（localStorage 履歴・横スクロール） */
.recent .sec-hd .n{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink3);
  background:none;border:0;cursor:pointer;text-decoration:underline;font-family:inherit}
.recent-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;
  -webkit-overflow-scrolling:touch}
.recent-row .rc{flex:none;width:150px;border:1px solid var(--line);border-radius:var(--r2);
  background:var(--paper);padding:10px;display:flex;align-items:center;gap:9px}
.recent-row .rc:hover{border-color:var(--ink)}
.recent-row .rc img,.recent-row .rc .mk{width:34px;height:34px;border-radius:8px;
  object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--sur2);font-weight:800;color:var(--ink3)}
.recent-row .rc .t{font-size:11.5px;font-weight:800;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ══ v0.0.27 ══════════════════════════════════════════ */

/* ① ジャンルチップ */
.gtags{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.gtag{font-size:13px;font-weight:800;border:1.5px solid var(--line2);border-radius:99px;
  padding:9px 17px;background:var(--paper);color:var(--ink)}
.gtag:hover{border-color:var(--red);color:var(--red)}

/* ② ホーム「今日遊ぶゲームが決まらない？」 */
.pick2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:4px}
.pk{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper);padding:18px 18px 19px}
.pk:hover{border-color:var(--ink)}
.pk .k{font-size:10px;letter-spacing:.14em;color:var(--red);font-weight:500;text-transform:uppercase}
.pk .t{font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.pk .d{font-size:12px;color:var(--ink2);line-height:1.75}

/* ③ ルーレット */
.rou{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:26px 18px;margin-top:20px;display:grid;gap:14px;justify-items:center}
.rou-stage{width:100%;max-width:420px;background:var(--ink);border-radius:var(--r);
  padding:26px 16px;display:flex;justify-content:center}
.rou-card{display:flex;flex-direction:column;align-items:center;gap:11px;min-height:150px;
  justify-content:center;text-align:center}
.rou-card img,.rou-card .mk{width:86px;height:86px;border-radius:18px;object-fit:cover;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);
  font-size:34px;font-weight:800;color:rgba(255,255,255,.65)}
.rou-card .t{font-size:14.5px;font-weight:800;color:#fff;max-width:340px;line-height:1.5}
.rou-card.hit img{outline:3px solid var(--gold);outline-offset:3px}
.rou-btn{font:inherit;font-size:15px;font-weight:800;background:var(--red);color:#fff;
  border:0;border-radius:10px;padding:14px 46px;cursor:pointer;box-shadow:0 2px 0 var(--red-d)}
.rou-btn:hover{background:var(--red-d)}
.rou-btn:disabled{background:var(--sur2);color:var(--ink3);box-shadow:none;cursor:default}
.rou-note{font-size:11px;color:var(--ink3)}
.rou .sec-btn{margin-top:2px}

/* ④ 3問診断 */
.fdr{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:22px 18px 24px;margin-top:20px}
.fdr-no{font-size:11px;color:var(--ink3)}
.fdr-t{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:6px 0 16px}
.fdr-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.fdr-opt{font:inherit;text-align:left;font-size:14px;font-weight:800;border:1.5px solid var(--line2);
  border-radius:11px;background:#fff;padding:16px;cursor:pointer;line-height:1.6}
.fdr-opt:hover{border-color:var(--red);color:var(--red)}


/* ══ v0.0.28: ゲームサブページのヒーロー ══════════════════ */
.ghero{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);
  padding:16px 16px 0;margin:16px 0 22px}
.ghero-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ghero .ic{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;
  color:rgba(255,255,255,.6)}
.ghero .meta{flex:1;min-width:180px}
.ghero .t{font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.45;color:var(--ink)}
.ghero .t:hover{color:var(--red)}
.ghero .o{font-size:10.5px;color:var(--ink3);margin-top:4px}
.rbx2{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  border:1.5px solid var(--ink);border-radius:9px;padding:9px 14px;color:var(--ink);flex:none}
.rbx2:hover{background:var(--ink);color:#fff}
.ghero-th{display:flex;gap:8px;overflow-x:auto;margin-top:13px;-webkit-overflow-scrolling:touch}
.ghero-th img{height:88px;border-radius:9px;border:1px solid var(--line);flex:none}
.ghero-tabs{display:flex;gap:6px;overflow-x:auto;margin-top:13px;padding-bottom:12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.ghero-tabs::-webkit-scrollbar{display:none}
.ghero-tabs a{flex:none;font-size:12px;font-weight:800;border-radius:99px;padding:8px 15px;
  border:1.5px solid var(--line2);color:var(--ink);white-space:nowrap}
.ghero-tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ghero-tabs a:not(.on):hover{border-color:var(--ink)}
@media(max-width:560px){.ghero .rbx2{width:100%;justify-content:center}}


/* ══ v0.0.29 ══════════════════════════════════════════ */

/* ① ホーム Quick pick: 近黒ストリップ（独自トーン） */
.qp{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:4px}
.qp-i{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;
  border-radius:var(--r);padding:18px 18px}
.qp-i .no{font-size:11px;color:var(--red);letter-spacing:.1em;flex:none}
.qp-i .tx{flex:1;display:flex;flex-direction:column;gap:3px}
.qp-i .tx b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:#fff}
.qp-i .tx small{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.7}
.qp-i .ar{flex:none;color:var(--red)}
.qp-i:hover{background:#000;color:#fff}
.qp-i:hover .ar{transform:translateX(3px)}

/* ② ゲーム内タブ: SP はドロップダウン */
.gnav-sel,.ghero-sel{display:none;width:100%;font:inherit;font-size:13.5px;font-weight:700;
  padding:11px 13px;border:1.5px solid var(--line2);border-radius:9px;background:#fff;
  margin-top:14px;appearance:auto}
.ghero-sel{margin:13px 0 14px}
@media(max-width:640px){
  .gnav{display:none}
  .gnav-sel{display:block}
  .ghero-tabs{display:none}
  .ghero-sel{display:block}
}

/* ③ さがす: 小見出し */
.fil .fsub{font-size:11px;font-weight:800;color:var(--ink2);margin:11px 0 7px}
.fil .fg .chips{gap:7px}


/* ══ v0.0.30: ゲージを信号色グラデーションに（本人指示で解禁） ══
   赤=ダメ / 黄=普通 / 緑=良い。15セル = 5段階×3セルの帯。
   色はセルの位置で固定し、点灯した分だけ色が見える。先端は明度で強調。 */
.gg-cells i.on:nth-child(-n+3){background:#E0524A}
.gg-cells i.on:nth-child(n+4):nth-child(-n+6){background:#EF8B3D}
.gg-cells i.on:nth-child(n+7):nth-child(-n+9){background:#EFC53F}
.gg-cells i.on:nth-child(n+10):nth-child(-n+12){background:#9DBE4D}
.gg-cells i.on:nth-child(n+13){background:#4BA45B}
.gg-cells i.on.hi{filter:brightness(.82)}
.gg-lab.b-r b{color:#C13B34}
.gg-lab.b-y b{color:#A87B12}
.gg-lab.b-g b{color:#2F8A44}
.gg-lab.b-r{background:#FBECEA;border-color:#F2CFCB}
.gg-lab.b-y{background:#FBF4DE;border-color:#EFE0AC}
.gg-lab.b-g{background:#EAF6EE;border-color:#CBE8D3}

/* v0.0.80: 評価ラベルの中身を中央に揃える。
   b（まあまあ等）は inline-block、em（4.0）は右寄せのままで、
   帯の中で左右の重心がズレて崩れて見えていた */
.gg-lab{text-align:center;padding:9px 12px;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.gg-lab b{display:block;padding:0;background:none!important;border-radius:0}
.gg-lab em{display:block;margin-top:0;text-align:center}
@media(max-width:639px){.gg-lab{padding:7px 9px}}

/* ══ 今日のゲーム占い（v0.0.31）══ */
.frt{margin:22px 0 8px}
.frt-stage{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:34px 20px;border:1.5px solid var(--line2);border-radius:16px;background:var(--bg2,#fff)}
.mkj{position:relative;width:96px;height:158px;margin-top:14px;border-radius:14px 14px 18px 18px;
  background:linear-gradient(160deg,#2c2c2c,#141414 62%);
  box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.08);
  transform-origin:50% 88%}
.mkj-top{position:absolute;top:-9px;left:6px;right:6px;height:18px;border-radius:10px;
  background:var(--red);box-shadow:0 3px 0 rgba(0,0,0,.22)}
.mkj-top::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:7px;margin:-3.5px 0 0 -13px;
  border-radius:99px;background:#141414;opacity:.55}
.mkj-label{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  color:#fff;font-weight:800;font-size:15px;line-height:1.55;letter-spacing:.1em;text-align:center;
  padding:8px 7px;border:1.5px solid rgba(255,255,255,.5);border-radius:8px;background:rgba(255,255,255,.06)}
.mkj-stick{position:absolute;left:50%;top:-4px;width:12px;height:52px;margin-left:-6px;z-index:-1;
  transform:translateY(26px);transition:transform .3s}
.mkj-stick i{display:block;width:100%;height:100%;border-radius:6px 6px 3px 3px;
  background:linear-gradient(#F0E3C0,#D9C89A)}
.mkj.shake{animation:mkj-shake 1.7s ease-in-out}
.mkj.shake .mkj-stick{transform:translateY(-16px);transition-delay:1.35s}
@keyframes mkj-shake{
  0%{transform:rotate(0)}
  10%{transform:rotate(-14deg) translateY(-4px)}
  20%{transform:rotate(12deg) translateY(-7px)}
  30%{transform:rotate(-16deg) translateY(-9px)}
  40%{transform:rotate(14deg) translateY(-10px)}
  52%{transform:rotate(-12deg) translateY(-8px)}
  64%{transform:rotate(9deg) translateY(-6px)}
  76%{transform:rotate(-6deg) translateY(-3px)}
  88%{transform:rotate(3deg) translateY(-1px)}
  100%{transform:rotate(0) translateY(0)}
}
@media(prefers-reduced-motion:reduce){.mkj.shake{animation:none}}
.frt-res{margin-top:14px;padding:22px 20px 20px;border:2px solid var(--ink,#141414);border-radius:16px;
  background:var(--bg2,#fff);text-align:center;box-shadow:5px 5px 0 rgba(20,20,20,.08)}
.frt-res .k{font-size:10.5px;letter-spacing:.14em;color:var(--ink3)}
.frt-res .lk{font-size:42px;font-weight:900;letter-spacing:-.02em;color:var(--red);margin:6px 0 2px}
.frt-res .ms{margin:0 0 14px;font-size:13.5px;color:var(--ink2)}
.frt-res .lb{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ink3);margin-bottom:8px}
.frt-res .tg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.frt-res .gtag{display:inline-block;padding:9px 16px;border:1.5px solid var(--ink,#141414);border-radius:999px;
  font-size:13.5px;font-weight:800;text-decoration:none;color:inherit;background:var(--bg,#F7F5EF)}
.frt-res a.gtag:hover{background:var(--ink,#141414);color:#fff}
.frt-res .nt{margin:12px 0 0;font-size:11.5px;color:var(--ink3)}

/* ══ ルーレット結果カード（v0.0.31）══ */
.rou-res{width:100%;max-width:560px;margin-top:16px;border:2px solid var(--ink,#141414);border-radius:16px;
  background:var(--bg2,#fff);padding:16px 18px 18px;box-shadow:5px 5px 0 rgba(20,20,20,.08);text-align:left}
.rou-res .k{font-size:10.5px;letter-spacing:.14em;color:var(--red);font-weight:700;margin-bottom:10px}
.rou-res .bd{display:flex;gap:14px;align-items:center}
.rou-res .ic{width:84px;height:84px;border-radius:16px;object-fit:cover;flex:none;
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:800;background:var(--bg,#F7F5EF)}
.rou-res .meta{min-width:0}
.rou-res .t{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.rou-res .tg{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.rou-res .tg span{font-size:10.5px;padding:3px 8px;border:1px solid var(--line2);border-radius:999px;color:var(--ink2)}
.rou-res .st{display:flex;gap:14px;margin-top:8px;font-size:11.5px;color:var(--ink3)}
.rou-res .st b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.rou-res .go{display:block;margin-top:14px;text-align:center;background:var(--red);color:#fff;
  font-weight:800;font-size:14px;padding:12px;border-radius:12px;text-decoration:none}
.rou-res .go:hover{opacity:.9}
.rou-cd{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 16px;
  border:1.5px dashed var(--line2);border-radius:12px;font-size:12px;color:var(--ink2)}
.rou-cd b{font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.rou-cd .s{color:var(--ink3);font-size:11px}
.recent-row .rc small{display:block;font-size:9.5px;color:var(--ink3);letter-spacing:.04em}
@media(max-width:640px){
  .frt-res .lk{font-size:34px}
  .rou-res .ic{width:64px;height:64px}
}
.frt-res .nt2{margin:10px 0 0;font-size:10.5px;letter-spacing:.08em;color:var(--ink3)}
/* ══ 占い・ルーレット: 終了後は結果のみ + なめらかな切替（v0.0.34）══ */
.frt-stage[hidden]{display:none}
.frt-stage,.mn-fadeable{transition:opacity .35s ease,transform .35s ease}
.frt-stage.fade{opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none}
.rou.done [data-mn-rou-card],.rou.done [data-mn-rou-btn],.rou.done [data-mn-rou-note]{display:none}
.rou.fade [data-mn-rou-card],.rou.fade [data-mn-rou-btn],.rou.fade [data-mn-rou-note]{
  opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;
  transition:opacity .32s ease,transform .32s ease}
.rou [data-mn-rou-card],.rou [data-mn-rou-btn],.rou [data-mn-rou-note]{
  transition:opacity .32s ease,transform .32s ease}
@keyframes mnPop{
  0%{opacity:0;transform:translateY(16px) scale(.96)}
  60%{opacity:1;transform:translateY(-3px) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.frt-res.pop,.rou-res.pop{animation:mnPop .5s cubic-bezier(.22,.9,.3,1.2) both}
.frt-res.pop .lk{animation:mnPop .55s .12s cubic-bezier(.22,.9,.3,1.2) both}
@media(prefers-reduced-motion:reduce){
  .frt-res.pop,.rou-res.pop,.frt-res.pop .lk{animation:none}
  .frt-stage.fade,.rou.fade [data-mn-rou-card]{transition:none}
}
/* ══ プロフィールの閲覧履歴: 折りたたみ + カードグリッド（v0.0.35）══ */
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.recent-grid .rc{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:16px 10px 13px;border:1.5px solid var(--line2);border-radius:14px;background:var(--bg2,#fff);
  text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.recent-grid .rc:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,20,20,.08)}
.recent-grid .rc img,.recent-grid .rc .mk{width:64px;height:64px;border-radius:14px;object-fit:cover;
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;background:var(--bg,#F7F5EF)}
.recent-grid .rc .t{font-size:12.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recent-grid .rc .t small{display:none}
.recent-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.recent-ft .note{margin:0}
.rec-clear{background:none;border:1.5px solid var(--line2);border-radius:999px;padding:7px 14px;
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink2)}
.rec-clear:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:640px){.recent-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}}
/* ══ 全体コード一覧のリッチ化（v0.0.36）══ */
.cgame{border:1.5px solid var(--line2);border-radius:16px;background:var(--bg2,#fff);
  padding:0 18px 14px;margin-bottom:18px;overflow:hidden}
.cgame-h2{display:flex;align-items:center;gap:14px;padding:15px 0 13px;margin:0 -18px 4px;
  padding-left:18px;padding-right:18px;border-bottom:1.5px solid var(--line2);
  background:linear-gradient(180deg,rgba(20,20,20,.03),transparent)}
.cgame-h2 .ic2{width:56px;height:56px;border-radius:13px;flex:none;overflow:hidden;
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;text-decoration:none}
.cgame-h2 .ic2 img{width:100%;height:100%;object-fit:cover}
.cgame-h2 .ic2 .mk{font-size:20px;font-weight:800;color:var(--ink)}
.cgame-h2 .ttl{min-width:0;display:flex;flex-direction:column;gap:4px}
.cgame-h2 .nm{font-size:16px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgame-h2 .nm:hover{text-decoration:underline}
.cgame-h2 .mt2{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--ink3)}
.cgame-h2 .mt2 .ok{color:var(--red);font-weight:800}
.cgame-h2 .go2{margin-left:auto;flex:none}
.cmore{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:11px;
  border:1.5px dashed var(--line2);border-radius:12px;font-size:13px;font-weight:800;
  text-decoration:none;color:var(--ink2)}
.cmore:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:640px){
  .cgame-h2 .ic2{width:46px;height:46px}
  .cgame-h2 .nm{font-size:14.5px}
  .cgame-h2 .go2{display:none}
}
/* ══ ゲーム編集ノート表示 + 投票ボタンの押下色（v0.0.37）══ */
.gn-intro{margin:0;font-size:14px;line-height:2;color:var(--ink2)}
.gn-f3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.gn-fc{position:relative;border:1.5px solid var(--line2);border-radius:14px;background:var(--bg,#F7F5EF);
  padding:34px 15px 14px}
.gn-fc .no{position:absolute;top:12px;left:15px;width:24px;height:24px;border-radius:8px;
  background:var(--ink,#141414);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.gn-fc b{display:block;font-size:14px;letter-spacing:-.01em;margin-bottom:6px}
.gn-fc p{margin:0;font-size:12.5px;line-height:1.8;color:var(--ink2)}
.gn-rec{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.gn-rec li{position:relative;padding:12px 14px 12px 34px;border:1.5px solid var(--line2);
  border-radius:12px;background:var(--bg2,#fff);font-size:13.5px;font-weight:700}
.gn-rec li::before{content:"";position:absolute;left:15px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-radius:50%;background:var(--red)}
.gnote-faq{margin-top:22px}
.vt2[data-mn-vote="1"][aria-pressed="true"]{background:#2E7D46;border-color:#2E7D46;color:#fff}
.vt2[data-mn-vote="0"][aria-pressed="true"]{background:#B3403A;border-color:#B3403A;color:#fff}
@media(max-width:640px){.gn-f3{grid-template-columns:1fr}}
/* ══ ミッション（26件カタログ+モーダル）v0.0.39 ══ */
.msrow{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1.5px solid var(--line2);
  border-radius:12px;background:var(--bg2,#fff);text-decoration:none;color:inherit;
  transition:transform .13s,border-color .13s}
.msrow:hover{transform:translateY(-1px);border-color:var(--ink)}
.msrow .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.msrow .tx b{font-size:13.5px;letter-spacing:-.01em}
.msrow .tx small{font-size:11.5px;color:var(--ink3);line-height:1.5}
.msrow .xp{margin-left:auto;flex:none;font-size:11px;font-weight:700;color:#B8860B;
  background:rgba(255,196,0,.14);border:1px solid rgba(184,134,11,.35);border-radius:999px;padding:4px 10px}
.msrow .ico{flex:none;color:var(--ink3)}
.msrow .xp+.ico{margin-left:0}
.msrow .tx+.ico{margin-left:auto}
.ms-more{display:block;width:100%;margin-top:12px;padding:12px;border:1.5px dashed var(--line2);
  border-radius:12px;background:none;font:inherit;font-size:13px;font-weight:800;cursor:pointer;color:var(--ink2)}
.ms-more:hover{border-color:var(--ink);color:var(--ink)}
.msov{position:fixed;inset:0;z-index:80;background:rgba(20,20,20,.55);display:flex;
  align-items:center;justify-content:center;padding:20px}
.msov[hidden]{display:none}
.msov-in{width:min(680px,100%);max-height:84vh;overflow:auto;background:var(--bg,#F7F5EF);
  border-radius:18px;padding:20px 20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.3);
  animation:mnPop .35s ease both}
.msov-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.msov-h h3{margin:0;font-size:17px;letter-spacing:-.02em}
.msov-h .en{font-size:10px;letter-spacing:.14em;color:var(--ink3)}
.msov-h .x{margin-left:auto;width:34px;height:34px;border:1.5px solid var(--line2);border-radius:10px;
  background:var(--bg2,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center}
.msov-h .x:hover{border-color:var(--ink)}
/* ══ 旧テーマ互換ショートコード（v0.0.42）══ */
.article .st-mybox{padding:0;overflow:hidden}
.article .st-mybox-t{padding:12px 18px 10px;border-bottom:1.5px solid rgba(20,20,20,.08);
  font-size:14px;letter-spacing:-.01em;background:rgba(20,20,20,.025)}
.article .st-mybox-b{padding:14px 18px 16px}
.article .st-mybox-b>p:first-child{margin-top:0}
.article .st-mybox-b>p:last-child{margin-bottom:0}
.article .st-myblock{margin:0 0 25px}
.article .st-myblock>p:first-child{margin-top:0}
/* ══ 旧テーマの本文クラス互換（v0.0.43）══ */
.article .h3modoki{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:26px 0 12px}
.article .h4modoki{font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin:20px 0 10px}
.article .komozi{font-size:12px;color:var(--ink3);line-height:1.9}
.article .center{text-align:center}
.article .st-mybutton:hover{opacity:.92}
/* ══ 記事トップのサムネ（アイキャッチ）v0.0.46 ══ */
.post-hero{margin:18px 0 26px}
.post-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:16px;border:1px solid var(--line)}
@media(max-width:640px){.post-hero{margin:14px 0 20px}.post-hero img{border-radius:12px}}

/* ══ v0.0.49 ══════════════════════════════════════════
   T3 下部タブバー / T1 さがすの件数・並び替え・ページング /
   T2 ロゴ画像 / T4 ホーム画面追加バナー
   ※ 新規クラスはすべて mn- か既存 #bottom 配下に限定（名前衝突の予防） */

/* ── T3: 下部固定タブバー（ボタン感・現在地・セーフエリア）── */
body{padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))}
#bottom{border-top:1.5px solid var(--line2);
  box-shadow:0 -1px 0 rgba(20,20,20,.04), 0 -8px 24px rgba(20,20,20,.06);
  padding-bottom:env(safe-area-inset-bottom, 0px)}
#bottom.nav .bt-in{gap:2px;padding:5px 8px 7px}
#bottom .nb{position:relative;color:var(--ink);gap:3px;padding:9px 0 7px;min-height:56px;
  transition:background .12s ease, transform .08s ease}
#bottom .nb .l{font-size:11px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
#bottom .nb .ico{stroke-width:2}
#bottom .nb::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 3px 3px;background:transparent}
#bottom .nb.on{color:var(--red);background:var(--red-s)}
#bottom .nb.on .l{font-weight:900}
#bottom .nb.on .ico{stroke-width:2.4}
#bottom .nb.on::before{background:var(--red)}
#bottom .nb:active,#bottom .ib:active,#bottom .rate:active,#bottom .go:active{transform:scale(.94)}
#bottom .ib,#bottom .rate,#bottom .go{transition:transform .08s ease}
@media(hover:hover){#bottom .nb:hover{background:var(--sur)}#bottom .nb.on:hover{background:var(--red-s)}}
@media(prefers-reduced-motion:reduce){#bottom .nb:active,#bottom .ib:active,
  #bottom .rate:active,#bottom .go:active{transform:none}}
#toast{bottom:calc(92px + env(safe-area-inset-bottom, 0px))}

/* ── T2: 画像ロゴ ── */
.logo.has-img i,.ft .brand.has-img i{display:none}
.logo.has-img,.ft .brand.has-img{gap:0}
.logo.has-img img,.ft .brand.has-img img{display:block}

/* ── T1: 結果バー（総件数・並び替え）とページング ── */
.res-bar{gap:8px 14px}
.res-bar .c .sub{font-size:12px;font-weight:600;color:var(--ink3);margin-left:6px}
.res-sort{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none}
.res-sort label{font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.04em}
.res-sort select{font:inherit;font-size:12.5px;font-weight:700;padding:7px 10px;
  border:1.5px solid var(--line2);border-radius:8px;background:#fff;appearance:auto;cursor:pointer}
.res-sort select:hover{border-color:var(--ink)}
@media(max-width:520px){.res-sort{width:100%;margin-left:0}.res-sort select{flex:1}}
.mn-more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;
  margin:18px auto 0;padding:14px;border:1.5px solid var(--ink);border-radius:10px;
  background:var(--paper);font-size:14px;font-weight:800;color:var(--ink)}
.mn-more:hover{background:var(--ink);color:#fff}
.mn-more .mono{font-size:11px;font-weight:500;color:var(--ink3)}
.mn-more:hover .mono{color:rgba(255,255,255,.6)}
.mn-more-end{text-align:center;margin-top:18px;font-size:11.5px;color:var(--ink3)}

/* ── T4: ホーム画面に追加の案内バナー ──
   [hidden] と display の取り合いを避けるため、表示は .on だけで決める */
#mn-a2hs{position:fixed;left:0;right:0;z-index:450;display:none;
  bottom:calc(80px + env(safe-area-inset-bottom, 0px));padding:0 12px}
#mn-a2hs.on{display:block;animation:mnPop .4s cubic-bezier(.22,.9,.3,1.2) both}
.a2-in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:14px;padding:12px 12px 12px 14px;
  box-shadow:0 12px 30px rgba(0,0,0,.28)}
.a2-ic{width:34px;height:34px;border-radius:9px;background:#000;flex:none;position:relative}
.a2-ic::after{content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;
  background:var(--red);border-radius:4px}
.a2-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.a2-tx b{font-size:13px;font-weight:800;letter-spacing:-.01em;line-height:1.5}
.a2-tx small{font-size:11px;color:rgba(255,255,255,.62);line-height:1.6}
.a2-go{flex:none;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;
  border-radius:9px;padding:10px 16px}
.a2-go:hover{background:var(--red-d)}
.a2-x{flex:none;width:30px;height:30px;border-radius:8px;color:rgba(255,255,255,.6);
  font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
.a2-x:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:420px){.a2-tx small{display:none}.a2-go{padding:10px 13px}}

/* ══ v0.0.50 ══════════════════════════════════════════
   攻略ガイド（/game/{slug}/guide/）+ ジャンル一覧の改修 */

/* ── ジャンル: 件数バッジ・グループカード ── */
.gtag{display:inline-flex;align-items:center;gap:7px}
.gtag .cnt{font-size:10px;font-weight:500;color:var(--ink3);background:var(--sur);
  border-radius:99px;padding:1px 7px;letter-spacing:.02em}
.gtag:hover .cnt{color:var(--red);background:var(--red-s)}
.gtag.dim{opacity:.45}
.gtg-card{margin-top:0}
.gtg-card .gtags{margin-top:2px}
.gtg-d{font-size:12px;color:var(--ink3);margin:0 0 12px}
.gtg-hot{margin-bottom:30px;border-width:1.5px;border-color:var(--line2)}

/* ── ゲーム詳細: 攻略ガイドへの導線 ── */
.gd-cta{display:flex;align-items:center;gap:12px;margin:4px 0 16px;padding:14px 16px;
  background:var(--ink);color:#fff;border-radius:var(--r)}
.gd-cta .k{font-size:9.5px;letter-spacing:.18em;color:var(--red);flex:none}
.gd-cta b{flex:1;font-size:13.5px;font-weight:800;letter-spacing:-.015em;line-height:1.5}
.gd-cta .ico{color:var(--red);flex:none}
.gd-cta:hover{background:#000}
.gd-cta:hover .ico{transform:translateX(3px)}

/* ── ガイド: 目次 ── */
.gd-toc-g{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:680px){.gd-toc-g{grid-template-columns:1fr 1fr}}
.gd-toc-g a{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line2);
  border-radius:10px;padding:11px 13px;font-size:13px;font-weight:700;line-height:1.5;
  background:var(--paper)}
.gd-toc-g a:hover{border-color:var(--red)}
.gd-toc-g .no{flex:none;font-size:10.5px;color:var(--red);letter-spacing:.08em}
.gd-toc-g .tt{min-width:0}

/* ── ガイド: 本文セクション ── */
.gd-sec{scroll-margin-top:74px}
.gd-body{font-size:14px;line-height:2;color:var(--ink2);margin:0}
.gd-pts{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:8px}
.gd-pts li{position:relative;padding:12px 15px 12px 34px;border:1px solid var(--line);
  border-radius:10px;background:var(--sur);font-size:13.5px;line-height:1.85;color:var(--ink)}
.gd-pts li::before{content:'';position:absolute;left:15px;top:20px;width:6px;height:6px;
  border-radius:50%;background:var(--red)}

/* ── ガイド: 早見表 ── */
.gd-tblwrap{overflow-x:auto;margin-top:13px;border:1.5px solid var(--line2);border-radius:12px;
  background:var(--paper);-webkit-overflow-scrolling:touch}
.gd-tbl{width:100%;border-collapse:collapse;min-width:620px}
.gd-tbl th{background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-align:left;padding:12px 15px;white-space:nowrap}
.gd-tbl td{padding:13px 15px;font-size:13.5px;line-height:1.8;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--ink2)}
.gd-tbl td:first-child{font-weight:800;color:var(--ink);white-space:nowrap}
.gd-tbl tbody tr:nth-child(even) td{background:var(--sur)}
.gd-tbl tr:last-child td{border-bottom:none}

/* ── ガイド: 用語集 ── */
.gd-dl{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden}
.gd-dl .row{display:grid;grid-template-columns:150px 1fr;background:var(--paper)}
@media(max-width:560px){.gd-dl .row{grid-template-columns:112px 1fr}}
.gd-dl dt{padding:13px 15px;font-size:13px;font-weight:800;background:var(--sur);
  border-right:1px solid var(--line)}
.gd-dl dd{margin:0;padding:13px 15px;font-size:13.5px;line-height:1.85;color:var(--ink2)}

/* ── ガイド: 注記 ── */
.gd-note{margin-top:24px}
.gd-note a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:2px}


/* ══ v0.0.52: ゲームリスト ══ */
.ls-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:2px solid var(--ink);border-radius:14px;padding:18px 20px;margin:18px 0 6px;background:#fff}
.ls-cta .tx b{display:block;font-size:17px}
.ls-cta .tx small{color:#666}
.ls-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:760px){.ls-themes{grid-template-columns:1fr 1fr}}
.ls-theme{display:flex;flex-direction:column;gap:3px;border:1.5px solid #e2ddd3;border-radius:12px;
  padding:13px 15px;background:#fff;text-decoration:none;color:inherit;transition:border-color .12s}
.ls-theme:hover{border-color:var(--red)}
.ls-theme b{font-size:14px}
.ls-theme small{color:#777;font-size:12px}
.ls-theme .go{color:var(--red);font-size:11px;margin-top:5px}
.ls-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.ls-grid{grid-template-columns:1fr}}
.ls-card{display:flex;gap:13px;align-items:flex-start;border:1.5px solid #e2ddd3;border-radius:12px;
  padding:13px;background:#fff;text-decoration:none;color:inherit;transition:border-color .12s}
.ls-card:hover{border-color:var(--ink)}
.ls-card .ic4{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:76px;flex:none}
.ls-card .ic4 i{display:block;width:36px;height:36px;border-radius:7px;background:#eee;overflow:hidden}
.ls-card .ic4 img{width:100%;height:100%;object-fit:cover;display:block}
.ls-card .tx{min-width:0}
.ls-card .mt{font-size:11px;color:#888;display:block}
.ls-card .tx b{display:block;font-size:15px;margin:2px 0}
.ls-card .tx small{color:#666;display:block;overflow:hidden}
.ls-card.mine{border-style:dashed}
.ls-meta{color:#777;font-size:12.5px;margin:4px 0 12px}
.ls-meta .unl{color:#a06a00}
.ls-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.ls-own{border-style:dashed}
.ls-own-row{display:grid;grid-template-columns:86px 1fr;gap:9px;align-items:center;margin-top:9px}
.ls-own-row label{font-size:12.5px;color:#666}
.ls-own-row input,.ls-own-row select{border:1.5px solid #ddd;border-radius:9px;padding:8px 11px;font:inherit;width:100%}
.ls-own-btns{display:flex;gap:9px;margin-top:13px}
.sec-btn.danger{color:#b3261e;border-color:#e6b6b2}
/* 詳細ページ: リストに追加ボタンとモーダル */
.act.act-list .c{font-size:15px}
.lsm-wrap{position:fixed;inset:0;z-index:220}
.lsm-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.lsm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,92vw);
  background:#fff;border-radius:16px;padding:17px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.lsm-h{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:11px}
.lsm-x{border:0;background:none;font-size:21px;cursor:pointer;line-height:1;padding:4px 8px}
.lsm-list{max-height:44vh;overflow:auto;display:flex;flex-direction:column;gap:7px}
.lsm-row{display:flex;align-items:center;gap:10px;border:1.5px solid #e2ddd3;border-radius:10px;
  padding:10px 12px;background:#fff;font:inherit;cursor:pointer;text-align:left;transition:border-color .12s}
.lsm-row .chk{width:19px;height:19px;border:2px solid #bbb;border-radius:6px;flex:none;position:relative}
.lsm-row[aria-pressed="true"]{border-color:var(--red)}
.lsm-row[aria-pressed="true"] .chk{border-color:var(--red);background:var(--red)}
.lsm-row[aria-pressed="true"] .chk:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(41deg)}
.lsm-row .t{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsm-row .m{font-size:11px;color:#999;flex:none}
.lsm-new{display:flex;gap:8px;margin-top:12px}
.lsm-new input{flex:1;border:1.5px solid #ddd;border-radius:9px;padding:9px 12px;font:inherit;min-width:0}
.lsm-note{color:#999;font-size:11.5px;margin:9px 0 0}
/* 作成ページ: 検索結果と選択チップ */
.pick-res{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pick-res .pr{display:flex;align-items:center;gap:10px;border:1.5px solid #e2ddd3;border-radius:10px;
  padding:8px 11px;background:#fff;font:inherit;cursor:pointer;text-align:left}
.pick-res .pr:hover{border-color:var(--ink)}
.pick-res .pr img{width:30px;height:30px;border-radius:7px;object-fit:cover;flex:none}
.pick-res .pr span{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-res .pr b{color:var(--red)}
.picked .pick{border:1.5px solid var(--ink);border-radius:99px;background:#fff;font:inherit;
  font-size:12.5px;padding:6px 12px;margin:0 6px 6px 0;cursor:pointer}


/* ══ v0.0.53: マイゲーム描画 ══ */
.mycard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.mycard .thumb{width:100%;aspect-ratio:1/1;border-radius:12px;object-fit:cover;background:#eee;display:block}
.mycard .t{font-size:13px;font-weight:700;margin-top:7px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.myrev{display:flex;flex-direction:column;gap:5px;border:1.5px solid #e2ddd3;border-radius:12px;
  padding:13px 15px;background:#fff;text-decoration:none;color:inherit;grid-column:span 2}
@media(max-width:760px){.myrev{grid-column:1/-1}}
.myrev b{font-size:14px}
.myrev .tx{color:#555;font-size:13px;line-height:1.5}
.myrev .mt{color:#999;font-size:11px}


/* ══ v0.0.54: 新着ガイド・コード ══ */
.gd-list{display:flex;flex-direction:column;gap:8px}
.gd-row{display:flex;align-items:center;gap:12px;border:1.5px solid #e2ddd3;border-radius:11px;
  padding:9px 13px;background:#fff;text-decoration:none;color:inherit;transition:border-color .12s}
.gd-row:hover{border-color:var(--ink)}
.gd-row img,.gd-row .ph{width:38px;height:38px;border-radius:9px;object-fit:cover;background:#eee;flex:none;display:block}
.gd-row .t{flex:1;min-width:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-row .t small{display:block;font-weight:500;color:#777;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-row .t .cd{color:var(--red);letter-spacing:.02em}
.gd-row .d{flex:none;color:#999;font-size:11.5px}
@media(max-width:760px){.home-clip>*:nth-child(n+7){display:none}}


/* ══ v0.0.55: 記事テーブルの見出しセル内 strong の色喪失を修正 ══ */
.article th strong,.article th b,.article thead strong,.article thead b{color:inherit}


/* ══ v0.0.57: ホーム新着ガイド=記事カード2列 ══ */
.gcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.gcard-grid{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;border:1.5px solid #e2ddd3;border-radius:13px;overflow:hidden;
  background:#fff;text-decoration:none;color:inherit;transition:border-color .12s}
.gcard:hover{border-color:var(--ink)}
.gc-thumb{display:block;aspect-ratio:16/7;background:#eee;overflow:hidden}
.gc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gc-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 13px}
.gc-body b{font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-meta{color:#999;font-size:11px}
.gc-read{color:var(--red);font-weight:800;font-size:12.5px;margin-top:3px}

/* ══ v0.0.57: 新着コード=クーポン2列 ══ */
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.cp-grid{grid-template-columns:1fr}}
.cp{position:relative;display:flex;align-items:center;gap:12px;border:1.7px dashed var(--ink);
  border-radius:13px;background:#fff;padding:12px 14px}
.cp:before,.cp:after{content:"";position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:1.7px dashed var(--ink);transform:translateY(-50%)}
.cp:before{left:-9px;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;
  clip-path:inset(0 0 0 50%)}
.cp:after{right:-9px;clip-path:inset(0 50% 0 0)}
.cp-g{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:74px;
  text-decoration:none;color:inherit}
.cp-g img{width:44px;height:44px;border-radius:10px;object-fit:cover;display:block;background:#eee}
.cp-g span{font-size:10px;color:#777;text-align:center;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-mid{flex:1;min-width:0}
.cp-mid b{display:block;font-size:16.5px;color:var(--red);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-mid small{display:block;color:#777;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-copy{flex:none;border:1.7px solid var(--ink);background:var(--ink);color:#fff;
  border-radius:9px;font:inherit;font-size:12.5px;font-weight:800;padding:9px 14px;cursor:pointer;
  transition:transform .1s}
.cp-copy:active{transform:scale(.94)}

/* ══ v0.0.57: 記事内ゲームカード ══ */
.article .mn-gamecard,.mn-gamecard{display:flex;gap:16px;border:2px solid var(--ink);border-radius:14px;
  background:#fff;padding:16px;margin:22px 0}
.mgc-thumb{flex:none;width:112px}
.mgc-thumb img{width:112px;height:112px;border-radius:12px;object-fit:cover;display:block;background:#eee}
.mgc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.article .mgc-t,.mgc-t{font-size:17px;font-weight:800;color:inherit;text-decoration:none;line-height:1.35}
.mgc-stats{display:flex;gap:18px}
.mgc-stats span{display:flex;flex-direction:column}
.mgc-stats small{color:#888;font-size:11px}
.mgc-stats b{font-size:16px}
.mgc-btns{display:flex;flex-direction:column;gap:7px}
.article .mgc-btns a,.mgc-btns a{display:block;text-align:center;border:1.7px solid var(--ink);
  border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:800;color:inherit;text-decoration:none;
  background:#fff;transition:background .12s,color .12s}
.mgc-btns a:hover{background:var(--ink);color:#fff}
.mgc-btns a:first-child{background:var(--red);border-color:var(--red);color:#fff}
.mgc-btns a:first-child:hover{opacity:.88}
@media(max-width:560px){
  .mn-gamecard{flex-direction:column}
  .mgc-thumb{width:100%}
  .mgc-thumb img{width:88px;height:88px;margin:0 auto}
}

/* ══ v0.0.57: 動画ページ ══ */
.vd-filter{display:flex;gap:8px;margin:12px 0 16px}
.vd-filter button{border:1.7px solid var(--ink);background:#fff;border-radius:99px;font:inherit;
  font-size:13px;font-weight:800;padding:7px 16px;cursor:pointer}
.vd-filter button.on{background:var(--ink);color:#fff}
.vd-filter .num{font-family:'DM Mono',monospace;font-weight:400;margin-left:4px}
.vd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.vd-grid{grid-template-columns:1fr}}
.vd{display:flex;flex-direction:column;gap:7px}
.vd-play{position:relative;display:block;border:0;padding:0;cursor:pointer;border-radius:12px;
  overflow:hidden;background:#000;aspect-ratio:16/9}
.vd-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.vd-play .tri{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;
  background:rgba(226,35,26,.94);border-radius:50%}
.vd-play .tri:after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.vd-frame{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.vd-frame iframe{width:100%;height:100%;border:0;display:block}
/* v0.0.76: 日本語タイトルの下に原題を小さく / その下に日本語要約 */
.vd-orig{font-size:11.5px;color:var(--ink3);line-height:1.55;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vd-sum{font-size:12.5px;color:var(--ink2);line-height:1.85;
  background:var(--sur);border-radius:var(--r2);padding:10px 12px}
.vd-t{font-size:14px;font-weight:800;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vd-m{display:flex;flex-wrap:wrap;gap:4px 12px;color:#888;font-size:11px}
.vd-m .ch{color:var(--ink);font-weight:600}

.vd-cta{margin-top:8px}


/* ══ v0.0.58: コード行のSP修正（コピーはコードの横）+ ガイドのライブコード ══ */
.crow .l1{flex-wrap:nowrap}
.crow .cc{flex:none;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.crow .rw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .copy{flex:none;margin-left:auto;white-space:nowrap}
@media(max-width:560px){
  .crow .l1{gap:7px}
  .crow .rw{display:none}
  .crow .cc{max-width:none;flex:1;min-width:0}
  .crow .l2{flex-wrap:wrap}
}
@media(max-width:560px){
  .crow .l1 + .rw-sp{display:block;font-size:11.5px;color:var(--ink2);margin:5px 2px 0}
}
.rw-sp{display:none}
.gd-codes{display:flex;flex-direction:column;gap:8px}
.gdc{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--ink);border-radius:11px;
  padding:10px 13px;background:#fff}
.gdc .cc{font-size:15px;color:var(--red);font-weight:600;flex:none;letter-spacing:.02em}
.gdc .rw{flex:1;min-width:0;color:#777;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdc .copy{flex:none;margin-left:auto;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  border-radius:8px;font:inherit;font-size:12px;font-weight:800;padding:7px 13px;cursor:pointer}


/* ══ v0.0.59: コード行をクーポン型に統一（コード一覧・ゲーム別）══ */
.crow{border:1.7px dashed var(--ink);border-radius:12px;background:var(--paper);
  padding:12px 14px;margin-top:10px}
.crow:first-of-type{border-top:1.7px dashed var(--ink)}
.crow .cc{background:none;border:0;padding:0;font-size:16.5px;font-weight:600;
  color:var(--red);letter-spacing:.02em}
.crow .copy{background:var(--ink);color:#fff;border:1.7px solid var(--ink);border-radius:9px;
  font-weight:800;padding:8px 15px}
.crow .copy:active{transform:scale(.94)}
.crow .copy .ico{color:#fff}
.crow .l2{border-top:1px dashed var(--line2);margin-top:10px;padding-top:9px}
.crow .newb{border-radius:6px}


/* ══ v0.0.60: SP ハンバーガー + ドロワー ══ */
.hmb{display:none;flex-direction:column;justify-content:center;gap:4.5px;width:40px;height:40px;
  border:0;background:none;cursor:pointer;padding:8px;flex:none}
.hmb span{display:block;height:2px;border-radius:2px;background:#fff}
@media(max-width:980px){.hmb{display:flex}}
.drawer{position:fixed;inset:0;z-index:300}
.dr-bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.dr-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:#141414;color:#fff;
  display:flex;flex-direction:column;padding:18px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto;box-shadow:-14px 0 44px rgba(0,0,0,.4)}
.dr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dr-x{border:0;background:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:6px 10px}
.dr-nav{display:flex;flex-direction:column}
.dr-nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:16px;font-weight:700;
  padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.09)}
.dr-nav a.on{color:var(--red)}
.dr-nav a:active{opacity:.7}
.dr-foot{margin-top:auto;padding-top:18px;color:rgba(255,255,255,.4);font-size:11.5px}

/* ══ v0.0.60: 記事内ゲームカード拡大 ══ */
.article .mn-gamecard,.mn-gamecard{gap:20px;padding:20px}
.mgc-thumb{width:176px}
.mgc-thumb img{width:176px;height:176px;border-radius:16px}
.mgc-body{gap:12px}
.article .mgc-t,.mgc-t{font-size:23px;line-height:1.3}
.mgc-stats{gap:26px}
.mgc-stats small{font-size:12px}
.mgc-stats b{font-size:22px}
.mgc-btns a{font-size:14.5px;padding:11px 14px}
@media(max-width:560px){
  .mgc-thumb img{width:128px;height:128px}
  .article .mgc-t,.mgc-t{font-size:19px;text-align:center}
  .mgc-stats{justify-content:center}
  .mgc-stats b{font-size:19px}
}


/* ══ v0.0.61: 記事内コード一覧カード [mn_codes] ══ */
.article .mn-codes,.mn-codes{border:2px solid var(--ink);border-radius:14px;background:var(--paper);
  padding:16px;margin:22px 0;display:flex;flex-direction:column;gap:9px}
.mnc-h{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.mnc-h img{width:36px;height:36px;border-radius:9px;object-fit:cover;flex:none}
.article .mnc-h b,.mnc-h b{font-size:16.5px;flex:1;min-width:0}
.mnc-n{flex:none;color:var(--red);font-size:12px;font-weight:700}
.mnc-none{border:1.7px dashed var(--line2);border-radius:11px;padding:14px;text-align:center;
  color:var(--ink3);font-size:13.5px}
.article .mnc-more,.mnc-more{color:var(--red);font-weight:800;font-size:13px;text-decoration:none;margin-top:2px}
.mnc-more:hover{text-decoration:underline}

@media(prefers-reduced-motion:reduce){.mn-spin{animation-duration:1.6s}}

/* ══ v0.0.62: 記事内カード（サムネ縦中央・感想ボタンをタイトル横に）══ */
.mgc-thumb{align-self:center}
.mgc-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mgc-top .mgc-t{flex:1;min-width:200px}
.article .mgc-fb,.mgc-fb{flex:none;display:inline-block;background:var(--red);border:1.7px solid var(--red);
  color:#fff;border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:800;
  text-decoration:none;transition:opacity .12s}
.mgc-fb:hover{opacity:.88}
@media(max-width:560px){
  .mgc-top{flex-direction:column;align-items:stretch;gap:9px}
  .mgc-top .mgc-t{min-width:0;text-align:center}
  .mgc-fb{text-align:center}
}


/* ══ v0.0.63: ゲームヒーロー大型化 + ボタンの押せる感を全面強化 ══ */

/* --- サブページ共通ヒーロー（ガイド・コード・掲示板・動画）--- */
.ghero .ic{width:112px;height:112px;border-radius:18px}
.ghero .t{font-size:26px;line-height:1.3}
.ghero .o{font-size:13px;margin-top:7px}
.ghero-in{gap:20px}
.ghero-th{gap:12px;margin-top:16px}
.ghero-th img{height:168px;border-radius:12px}
@media(max-width:760px){
  .ghero .ic{width:76px;height:76px}
  .ghero .t{font-size:19px}
  .ghero-th img{height:112px}
}

/* --- ゲーム詳細のスクショ --- */
.shots img{height:190px!important}
@media(max-width:760px){.shots img{height:126px!important}}

/* --- 押せるピルボタン（サイト共通言語: 太枠 + 押し出し影 + 沈む押下）--- */
.ghero-tabs a,.gnav a,.vd-filter button,.sec-btn{
  border:1.7px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:0 3px 0 var(--ink);cursor:pointer;
  transition:transform .1s,box-shadow .1s;text-decoration:none}
.ghero-tabs a:not(.on):hover,.gnav a:hover,.vd-filter button:not(.on):hover,.sec-btn:hover{
  transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.ghero-tabs a:active,.gnav a:active,.vd-filter button:active,.sec-btn:active{
  transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ghero-tabs a.on,.vd-filter button.on{
  background:var(--ink);color:#fff;box-shadow:0 3px 0 rgba(22,24,29,.35)}
.ghero-tabs{gap:10px;padding-bottom:14px}
.ghero-tabs a{font-size:13.5px;padding:11px 20px;border-radius:99px}
.gnav{gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 14px}
.gnav::-webkit-scrollbar{display:none}
.gnav a{flex:none;font-size:13.5px;font-weight:800;border-radius:99px;padding:11px 20px}
.dtabs{border:1.7px solid var(--ink);border-radius:12px;overflow:hidden}
.dtabs button{cursor:pointer;font-size:12.5px;padding:10px 6px}
.dtabs button:not(.on):hover{background:var(--sur)}


/* ══ v0.0.64: 見出し階層の是正（レベルだけ変更・見た目は据え置き）══ */
.sec-hd h2,.sec-hd h3{font-size:16.5px;font-weight:800;letter-spacing:-.025em}
.blk-h h2,.blk-h h3{font-size:15px;font-weight:800;letter-spacing:-.025em}
.fg h2,.fg h3,.fg h4{font-size:12px;font-weight:700;margin-bottom:8px}
.gate h2,.gate h3{font-size:17px;font-weight:800;letter-spacing:-.025em}
.sh-h h2,.sh-h h3{font-size:15.5px;font-weight:800;letter-spacing:-.025em}
.msov-h h2,.msov-h h3{margin:0;font-size:17px;letter-spacing:-.02em}
.qa>summary h2,.qa>summary h3,.qa>summary h4{font-size:14px;font-weight:800;letter-spacing:-.015em;line-height:1.6;flex:1}
.ft .f-h{font-size:11px;font-weight:700;color:#fff;letter-spacing:.1em;margin-bottom:9px;
  font-family:'DM Mono',monospace;text-transform:uppercase}
.scr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 攻略ガイド: コード表示を他ページのクーポン型に統一（.gdc は廃止）*/
.gd-sec > .crow:first-of-type{margin-top:0}
.mn-codes .crow{margin-top:9px}
.mn-codes .crow:first-of-type{margin-top:4px}
.gd-lead{white-space:pre-line}


/* ══ v0.0.65: ホームの攻略ガイドカードをコンパクト化（PC/SP とも最大6件・3列/2列）══ */
.gcard-grid{grid-template-columns:repeat(3,1fr);gap:10px}
.gcard{flex-direction:row;align-items:center;gap:11px;padding:10px 12px;border-radius:12px}
.gc-thumb{aspect-ratio:auto;width:52px;height:52px;border-radius:11px;flex:none}
.gc-body{padding:0;gap:3px;min-width:0}
.gc-body b{font-size:12.5px;line-height:1.45}
.gc-read{font-size:11.5px;margin-top:0}
@media(max-width:760px){
  .gcard-grid{grid-template-columns:1fr 1fr;gap:8px}
  .gcard{padding:9px 10px;gap:9px}
  .gc-thumb{width:44px;height:44px;border-radius:9px}
  .gc-body b{font-size:11.5px;-webkit-line-clamp:3}
  .gc-read{font-size:11px}
}
/* ガイドページのコード行: ゲームアイコン */
.crow .l1 .gic{width:30px;height:30px;border-radius:8px;flex:none;object-fit:cover}
@media(max-width:560px){.crow .l1 .gic{width:26px;height:26px}}
.gd-ovw{margin-top:14px}

/* ══ v0.0.68 ══════════════════════════════════════════════════ */
/* ① 早見表: SP で1列目を固定してスクロールしても項目が分かるように */
@media(max-width:760px){
  .gd-tblwrap-stick .gd-tbl th:first-child,
  .gd-tblwrap-stick .gd-tbl td:first-child{position:sticky;left:0;z-index:2}
  .gd-tblwrap-stick .gd-tbl th:first-child{background:var(--ink)}
  .gd-tblwrap-stick .gd-tbl td:first-child{background:var(--paper)}
  .gd-tblwrap-stick .gd-tbl tbody tr:nth-child(even) td:first-child{background:var(--sur)}
  .gd-tblwrap-stick .gd-tbl th:first-child::after,
  .gd-tblwrap-stick .gd-tbl td:first-child::after{content:'';position:absolute;
    top:0;right:0;bottom:0;width:6px;pointer-events:none;
    background:linear-gradient(90deg,rgba(22,24,29,.13),rgba(22,24,29,0))}
  .gd-tblwrap-stick .gd-tbl td:first-child{max-width:38vw;white-space:normal}
}

/* ② 絞り込み: SP は閉じた状態で開始（押せることが分かる見た目にする） */
.fil-tg{display:none}
.fil-body{display:block}
#mn-results{scroll-margin-top:78px}
@media(max-width:899px){
  .fil-h{padding:0;border-bottom:none}
  .fil-tg{display:flex;width:100%;align-items:center;gap:9px;cursor:pointer;
    font:inherit;font-size:13.5px;font-weight:800;color:var(--ink);text-align:left;
    padding:14px 15px;background:var(--paper);border:1.7px solid var(--ink);
    border-radius:12px;box-shadow:0 3px 0 var(--ink)}
  .fil-tg:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
  .fil-tg-n{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
    min-width:19px;height:19px;border-radius:99px;display:inline-flex;
    align-items:center;justify-content:center;padding:0 5px}
  .fil-tg-o{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink3)}
  .fil-tg-c{width:9px;height:9px;border-right:2.2px solid var(--ink);
    border-bottom:2.2px solid var(--ink);transform:rotate(45deg);margin:-4px 2px 0 0;
    transition:transform .16s}
  .fil{border:none;background:none;padding:0}
  .fil-body{display:none;border:1px solid var(--line);background:var(--paper);
    border-radius:var(--r);margin-top:10px;padding:4px 0 2px}
  .fil.open .fil-body{display:block}
  .fil.open .fil-tg-c{transform:rotate(-135deg);margin-top:2px}
  .fil.open .fil-tg-o{visibility:hidden}
}

/* ③ KV（キービジュアル）: 背景画像 + マスコットアイコン */
#hero.kv-on{background-repeat:no-repeat}
#hero.kv-on::after{display:none}
.kv-ic{position:absolute;z-index:0;pointer-events:none;
  max-width:44%;height:auto;object-fit:contain}
@media(max-width:760px){.kv-ic{max-width:60%}}
/* v0.0.82: マスコットは PC / スマホとも KV に重ねたまま。位置は px 指定（インライン）。
   スマホ用の画像を別に入れたときだけ、PC 用と入れ替える */
.kv-ic.only-sp{display:none}
@media(max-width:760px){
  .kv-ic.only-pc{display:none}
  .kv-ic.only-sp{display:block}
}
#hero .stats{max-width:640px;margin-right:auto}
@media(min-width:640px){#hero .stats{grid-template-columns:repeat(4,1fr)}}
/* v0.0.84: スマホも4つを1行に収める。2行に折れると縦を食って
   マスコットの居場所が無くなるため、文字を詰めて横に並べる */
@media(max-width:639px){
  #hero .stats{grid-template-columns:repeat(4,1fr)}
  /* v0.0.85: さらに詰める。縦を削ったぶんヒーローに余白を作れる */
  /* v0.0.87: さらに詰める。ここで縦を稼いだぶん、絵が見える面積が増える */
  #hero .stats div{padding:6px 4px;text-align:center}
  #hero .stats .l{font-size:8px;letter-spacing:0;line-height:1.3}
  #hero .stats .v{font-size:12.5px;margin-top:0;line-height:1.25}
  #hero .stats .v small{font-size:8px;margin-left:0}
  #hero .hero-sub{margin-top:7px;font-size:12.5px;line-height:1.75}
  #hero .bigsearch{margin-top:12px}
  #hero .stats{margin-top:10px}
  #hero{padding-bottom:22px}
}
/* マスコットは必ず文字より後ろに置く */
.kv-ic{z-index:0}
#hero .hero-in{position:relative;z-index:2}
/* 背景画像があるときは、文字が沈まないように薄い影を敷く */
#hero.kv-on .hero-h1,#hero.kv-on .hero-sub,#hero.kv-on .eye{
  text-shadow:0 1px 2px rgba(255,255,255,.55)}

/* ══ v0.0.69 ══════════════════════════════════════════════════ */
/* ① ヒーロー内「どんなゲーム？」の見出しがはみ出していたのを修正 */
.ghero-ovw .blk-h{flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.ghero-ovw .blk-h h2{font-size:15px;line-height:1.5;min-width:0;flex:1 1 auto}
.ghero-ovw .blk-h .en{flex:none}
@media(max-width:560px){
  .ghero-ovw{padding:13px 13px 14px}
  .ghero-ovw .blk-h .en{display:none}
}

/* ══ v0.0.86: バナー ══════════════════════════════════════════
   出し方は2種類。既定は「中央にポップアップ」（画像を大きく見せる）。
   もう一方は従来の「画面下に細いバー」。 */

/* ── 共通 ── */
#mn-bn{z-index:700}

/* ── ① 中央ポップアップ ── */
#mn-bn.bn-modal{position:fixed;inset:0;display:none;align-items:center;
  justify-content:center;padding:20px;background:rgba(16,16,18,.72)}
#mn-bn.bn-modal.on{display:flex}
#mn-bn.bn-modal .bn-in{position:relative;background:var(--paper);
  border-radius:18px;width:min(720px,100%);max-height:92vh;overflow-y:auto;
  padding:0 0 18px;box-shadow:0 24px 70px rgba(0,0,0,.4);text-align:center}
#mn-bn.bn-modal .bn-img{display:block;width:100%;height:auto;
  border-radius:18px 18px 0 0}
#mn-bn.bn-modal .bn-tx{padding:18px 22px 0}
#mn-bn.bn-modal .bn-tx b{display:block;font-size:17px;font-weight:800;
  letter-spacing:-.02em;line-height:1.55}
#mn-bn.bn-modal .bn-tx small{display:block;font-size:13px;color:var(--ink2);
  line-height:1.85;margin-top:7px}
#mn-bn.bn-modal .bn-go{display:block;margin:18px 22px 0;color:#fff;
  font-size:16px;font-weight:800;border-radius:12px;padding:17px 22px}
#mn-bn.bn-modal .bn-go:hover{filter:brightness(1.08);color:#fff}
#mn-bn.bn-modal .bn-x{position:absolute;top:12px;right:12px;width:36px;height:36px;
  border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:20px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.18)}
#mn-bn.bn-modal .bn-x:hover{background:#fff}
@media(max-width:560px){
  #mn-bn.bn-modal{padding:14px}
  #mn-bn.bn-modal .bn-in{border-radius:14px}
  #mn-bn.bn-modal .bn-img{border-radius:14px 14px 0 0}
  #mn-bn.bn-modal .bn-tx{padding:15px 16px 0}
  #mn-bn.bn-modal .bn-tx b{font-size:15px}
  #mn-bn.bn-modal .bn-go{margin:15px 16px 0;font-size:15px;padding:15px 18px}
}

/* ── ② 画面下の細いバー（従来） ── */
#mn-bn.bn-bar{position:fixed;left:50%;
  transform:translateX(-50%) translateY(140%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 74px);
  width:min(680px,calc(100% - 24px));transition:transform .28s ease}
#mn-bn.bn-bar.on{transform:translateX(-50%) translateY(0)}
@media(min-width:981px){#mn-bn.bn-bar{bottom:22px}}
#mn-bn.bn-bar .bn-in{display:flex;align-items:center;gap:13px;background:var(--ink);
  color:#fff;border-radius:14px;padding:14px 15px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
#mn-bn.bn-bar .bn-img{width:46px;height:46px;border-radius:10px;object-fit:cover;
  flex:none;background:#000;order:1}
#mn-bn.bn-bar .bn-tx{flex:1;min-width:0;order:2}
#mn-bn.bn-bar .bn-tx b{display:block;font-size:13.5px;font-weight:800;line-height:1.5}
#mn-bn.bn-bar .bn-tx small{display:block;font-size:11.5px;color:rgba(255,255,255,.62);
  line-height:1.6;margin-top:2px}
#mn-bn.bn-bar .bn-tx small a{color:#fff;text-decoration:underline}
#mn-bn.bn-bar .bn-go{flex:none;color:#fff;font-size:13px;font-weight:800;
  border-radius:9px;padding:11px 18px;white-space:nowrap;order:3}
#mn-bn.bn-bar .bn-x{flex:none;background:none;border:0;color:rgba(255,255,255,.6);
  font-size:20px;line-height:1;cursor:pointer;padding:0 2px;order:4}
#mn-bn.bn-bar .bn-x:hover{color:#fff}
@media(max-width:560px){
  #mn-bn.bn-bar .bn-in{flex-wrap:wrap;gap:10px}
  #mn-bn.bn-bar .bn-tx{flex:1 1 60%}
  #mn-bn.bn-bar .bn-go{flex:1 1 100%;text-align:center;order:5}
}

/* PC / スマホの画像の出し分け。
   v0.0.87 までは `#mn-bn.bn-modal .bn-img{display:block}` と同じ強さで、
   しかも後ろに書かれていたため負けて両方出ていた。
   要素セレクタを足して強くし、位置も後ろに置く */
@media(min-width:641px){ #mn-bn img.bn-img.only-sp{display:none} }
@media(max-width:640px){ #mn-bn img.bn-img.only-pc{display:none} }

/* ══ v0.0.75: 3択投票とかんたんアンケート ═══════════════════════
   色は増やさない。構成比はキーカラー・薄い罫線色・グレーの3段で出す */
.vt3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 15px}
@media(max-width:520px){.vt3{gap:7px}}
/* v0.0.76: 選ばれた選択肢だけ色が付く。緑=おもしろい / 黄=ふつう / 赤=おもしろくない。
   既存の信号色トークン（--ok / --gold）を流用し、赤だけ新設。
   黄は明るいので文字は黒、緑と赤は白にして読めるようにする */
.vt3 button{font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1.7px solid var(--ink);
  border-radius:12px;padding:14px 8px;box-shadow:0 3px 0 var(--ink);
  transition:transform .12s,box-shadow .12s,background .12s,color .12s}
@media(max-width:520px){.vt3 button{font-size:12px;padding:13px 4px}}
.vt3 button:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.vt3 button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.vt3 button.on[data-mn-vote3="fun"]{background:var(--ok);border-color:var(--ok);color:#fff}
.vt3 button.on[data-mn-vote3="normal"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.vt3 button.on[data-mn-vote3="notfun"]{background:var(--bad);border-color:var(--bad);color:#fff}

.vt3-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;
  background:var(--sur2);border:1px solid var(--line)}
.vt3-bar i.fun{background:var(--ok)}
.vt3-bar i.normal{background:var(--gold)}
.vt3-bar i.notfun{background:var(--bad)}
.vt3-lg{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:11px;font-size:12.5px}
.vt3-lg span{display:inline-flex;align-items:center;gap:6px;color:var(--ink2)}
.vt3-lg i{width:10px;height:10px;border-radius:3px;flex:none}
.vt3-lg i.fun{background:var(--ok)}
.vt3-lg i.normal{background:var(--gold)}
.vt3-lg i.notfun{background:var(--bad)}
.vt3-lg b{font-weight:800;color:var(--ink)}
.vt3-lg em{font-style:normal;font-size:11px;color:var(--ink3)}
.vt3-total{margin-top:8px;font-size:11px;color:var(--ink3)}
.vt3-empty{font-size:13px;color:var(--ink3);background:var(--sur);
  border-radius:var(--r2);padding:13px 14px}

#mn-survey{position:fixed;inset:0;z-index:800;background:rgba(20,20,20,.55);
  display:none;align-items:flex-end;justify-content:center;padding:0}
#mn-survey.on{display:flex}
@media(min-width:700px){#mn-survey{align-items:center;padding:24px}}
.sv-box{background:var(--paper);width:100%;max-width:560px;max-height:92vh;
  display:flex;flex-direction:column;border-radius:16px 16px 0 0;overflow:hidden}
@media(min-width:700px){.sv-box{border-radius:16px}}
.sv-h{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;
  border-bottom:2px solid var(--ink)}
.sv-h h2{font-size:16px;font-weight:800;letter-spacing:-.025em;margin:0}
.sv-x{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;
  cursor:pointer;color:var(--ink3);padding:0 4px}
.sv-note{margin:0;padding:12px 16px;background:var(--sur);font-size:12px;
  color:var(--ink2);line-height:1.8}
.sv-b{padding:4px 16px 16px;overflow-y:auto}
.sv-q{margin-top:18px}
.sv-l{font-size:13.5px;font-weight:800;margin-bottom:9px;display:flex;
  align-items:center;gap:8px}
.sv-l .rq{font-size:10px;font-weight:800;color:#fff;background:var(--red);
  border-radius:99px;padding:2px 8px}
.sv-l .op{font-size:10px;font-weight:700;color:var(--ink3);
  border:1px solid var(--line);border-radius:99px;padding:2px 8px}
.sv-o{display:flex;flex-wrap:wrap;gap:7px}
.sv-o button{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--line2);
  border-radius:99px;padding:9px 15px}
.sv-o button:hover{border-color:var(--ink)}
.sv-o button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sv-t{width:100%;font:inherit;font-size:14px;padding:11px 13px;
  border:1.5px solid var(--line2);border-radius:9px;background:var(--paper)}
.sv-f{padding:13px 16px;border-top:1px solid var(--line);background:var(--paper)}
.sv-go{width:100%;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;
  background:var(--ink);color:#fff;border:0;border-radius:11px;padding:14px}
.sv-go:disabled{background:var(--sur2);color:var(--ink3);cursor:default}

/* ══ v0.0.72: 攻略ガイドの構造可視化 ══════════════════════════
   色は増やさない。番号・罫線・背景濃度・線アイコン・レイアウトだけで型を出し分ける */
.gd-sh{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px;
  border-bottom:2px solid var(--ink);padding-bottom:10px}
.gd-sh .no{font-size:12px;color:var(--red);font-weight:500;padding-top:3px;flex:none}
.gd-sh h2{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.45;margin:0}
.gd-sh .kd{margin-left:auto;font-size:9px;letter-spacing:.14em;color:var(--ink3);
  border:1px solid var(--line);border-radius:99px;padding:3px 8px;flex:none;margin-top:4px}

/* ══ v0.0.186: 本文の囲み（ボックス・チェック・リスト・表）を作り直す ══
   これまで 1px / 1.7px / 左3px / 破線 / ゼブラ が入り混じり、囲みごとに
   別のサイトのように見えていた。次の規則に統一する。
   ・囲みは 1.5px の罫 ＋ 角丸 12px。面は白（--paper）、補助面だけ --sur
   ・押し出し影は「押せる」の合図。**押せない囲みには付けない**
   ・見出しは 13px の太字 ＋ 下に細い罫。種別ラベルだけ黒地に白抜きの DM Mono
   ・行頭の印はキーカラーの丸（本文の箇条書きと同じ）。ゼブラはリストに使わない（表だけ）
   ・色は増やさない（--ink / --red / --sur / --line 系のみ） */

/* 結論の帯 */
.gd-take{display:flex;gap:12px;align-items:flex-start;background:var(--red-s);
  border:1.5px solid var(--line2);border-left:5px solid var(--red);
  border-radius:12px;padding:14px 16px;margin-bottom:14px}
.gd-take .lb{font-size:9.5px;letter-spacing:.14em;font-weight:500;color:#fff;
  background:var(--ink);border-radius:99px;padding:4px 10px;flex:none;margin-top:3px;line-height:1.4}
.gd-take b{font-size:15px;font-weight:800;line-height:1.75;letter-spacing:-.01em;color:var(--ink)}

/* 手順 */
.gd-steps{counter-reset:gs;margin:0;padding:0;list-style:none}
.gd-steps li{position:relative;padding:0 0 20px 46px;counter-increment:gs}
.gd-steps li:before{content:counter(gs,decimal-leading-zero);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:9px;background:var(--ink);color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;display:flex;align-items:center;justify-content:center}
.gd-steps li:after{content:'';position:absolute;left:13px;top:34px;bottom:2px;
  width:2px;background:var(--line)}
.gd-steps li:last-child{padding-bottom:0}
.gd-steps li:last-child:after{display:none}
.gd-steps .st{font-size:14.5px;font-weight:800;display:block;margin-bottom:4px;line-height:1.6}
.gd-steps .sd{font-size:13.5px;color:var(--ink2);line-height:1.85;display:block}

/* チェックリスト（ゼブラと薄いチェックをやめ、印を塗りつぶしにした） */
.gd-check{list-style:none;margin:0;padding:0;border:1.5px solid var(--line2);
  border-radius:12px;background:var(--paper);overflow:hidden}
.gd-check li{display:flex;gap:12px;padding:14px 16px;font-size:14.5px;
  border-top:1px solid var(--line);align-items:flex-start}
.gd-check li:first-child{border-top:none}
.gd-check .bx{width:18px;height:18px;border-radius:5px;background:var(--red);
  flex:none;margin-top:3px;position:relative}
.gd-check .bx:after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)}
.gd-check li b{font-size:14.5px;font-weight:800;line-height:1.6}
.gd-check .d{display:block;color:var(--ink2);font-size:13.5px;margin-top:3px;line-height:1.85}

/* コツの箱 */
.gd-tips{border:1.5px solid var(--line2);border-radius:12px;background:var(--sur);
  padding:15px 17px}
.gd-tips .hh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;
  color:var(--ink);margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.gd-tips .hh .ico{color:var(--red)}
.gd-tips ul{margin:0;padding:0;display:grid;gap:9px}
.gd-tips li{list-style:none;position:relative;padding-left:19px;margin:0;
  font-size:13.5px;color:var(--ink2);line-height:1.85}
.gd-tips li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--red)}

/* 注意の箱（押し出し影は撤去。押せる部品と区別が付かなくなるため） */
.gd-warn{border:1.5px solid var(--ink);border-radius:12px;padding:15px 17px;
  background:var(--paper)}
.gd-warn .hh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;
  margin-bottom:4px}
.gd-warn p{font-size:13.5px;color:var(--ink2);margin:0 0 7px}
.gd-warn p:last-child{margin-bottom:0}
.gd-tips .ico,.gd-warn .ico{stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px;flex:none}

/* まとめ（箱の中に箱を入れるのをやめ、カードを並べる） */
.gd-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;background:none}
@media(max-width:640px){.gd-sum{grid-template-columns:1fr}}
.gd-sum .i{background:var(--sur);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.gd-sum .k{font-size:9.5px;letter-spacing:.12em;color:var(--ink3);display:block;margin-bottom:4px}
.gd-sum .v{font-size:13.5px;font-weight:700;line-height:1.65}

/* 差し込み: 本文（細枠）とは別レイヤーに見せる */
.gd-ins{margin-top:14px;border:1.7px solid var(--ink);border-radius:var(--r);
  background:var(--paper);padding:18px 16px;box-shadow:0 4px 0 var(--ink)}
@media(min-width:700px){.gd-ins{padding:22px}}
.gd-ins-h{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.gd-ins-h b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.gd-ins-h .en{font-size:9.5px;letter-spacing:.2em;color:var(--ink3);
  margin-left:auto;text-transform:uppercase}

/* 目次: 型ラベルと現在地。
   v0.0.74: 追従（sticky）は廃止。項目が10個を超えるガイドでは画面の大半を覆って
   本文が読めなくなり、明確に邪魔だった */
.gd-toc-g a .kd{margin-left:auto;font-size:9px;letter-spacing:.12em;color:var(--ink3);
  border:1px solid var(--line);border-radius:99px;padding:2px 7px;flex:none}
.gd-toc-g a.on{border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}

/* v0.0.74: 用語集のすぐ下に FAQ の黒線が来て窮屈だった */
.gd-faq{margin-top:34px}
.gd-faq .sec-hd{margin-bottom:16px}

/* ④ v0.0.71: 動画カードの「サムネイル画像」（YouTube 自動生成フレーム）と拡大表示 */
/* v0.0.76: 縦線は見出しの横だけ。画像の下まで伸ばさない */
.vd-frames{margin-top:2px}
.vd-fr-h{font-size:11px;font-weight:800;color:var(--ink2);display:flex;
  align-items:center;gap:8px;margin-bottom:8px;
  border-left:3px solid var(--red);padding-left:9px}
.vd-fr-h span{margin-left:auto;font-size:10px;font-weight:600;color:var(--ink3)}
.vd-fr-g{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.vd-fr{border:1px solid var(--line);background:none;padding:0;cursor:pointer;
  border-radius:8px;overflow:hidden;aspect-ratio:16/9;display:block}
.vd-fr img{width:100%;height:100%;object-fit:cover;display:block}
.vd-fr:hover{border-color:var(--ink)}
.vd-fr-g:empty{display:none}
@media(max-width:560px){.vd-fr-g{grid-template-columns:repeat(2,1fr)}
  .vd-fr-g .vd-fr:nth-child(3){display:none}}
#mn-zoom{position:fixed;inset:0;z-index:900;background:rgba(20,20,20,.82);
  display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
#mn-zoom.on{display:flex}
#mn-zoom img{max-width:100%;max-height:100%;border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* ③ ヒーローの動線: 主ボタン=ゲーム詳細 / その下に Roblox */
.ghero-act{display:flex;flex-direction:column;gap:7px;flex:none;align-items:stretch}
.gh-detail{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;font-weight:800;border-radius:9px;padding:10px 16px;
  background:var(--ink);color:#fff;border:1.7px solid var(--ink);
  box-shadow:0 3px 0 rgba(22,24,29,.35)}
.gh-detail:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(22,24,29,.35);color:#fff}
.gh-detail:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(22,24,29,.35)}
.ghero-act .rbx2{justify-content:center}
@media(max-width:560px){.ghero-act{width:100%}}

/* ② ミッションバー: SP は説明を改行して読ませる / PC は左の余白を確保 */
.mbar{gap:12px 14px}
.mbar .tag{margin-right:2px}
.mbar>span:not(.tag):not(.exp){flex:1 1 260px;min-width:0;
  display:flex;flex-direction:column;gap:3px;padding-left:2px}
.mbar .t,.mbar .d{display:block}
.mbar .d{line-height:1.6}
@media(max-width:640px){
  .mbar{padding:14px 15px;gap:10px}
  .mbar>span:not(.tag):not(.exp){flex:1 1 100%}
  .mbar .exp{margin-left:0}
  .mbar .go{margin-left:auto}
}
/* v0.0.67: ヒーローカード内の「◯◯ はどんなゲーム？」 */
.ghero-ovw{margin-top:15px;border:1px solid var(--line);border-radius:var(--r2);
  padding:15px 15px 16px;background:var(--paper)}
.ghero-ovw .blk-h{margin-bottom:12px}
.ghero-ovw .gd-body{margin:0}
@media(min-width:700px){.ghero-ovw{padding:18px 20px 20px}}

/* ══════ v0.0.89 ══════
   1) 掲示板が0件のとき: .plist は overflow:hidden なので中の .note の margin-top:15px が
      外に逃げられず、白いカードの上に空の白帯が出ていた。0件時はカード自体を外す
   2) 攻略ガイド: セクションボックスの一番下に置く掲示板ボタン
   3) ゲーム詳細のレビュー: 未ログイン時の案内 + ログイン導線
   ※ 既存より後ろに書いて勝たせる（順序・強さ由来のバグ対策） */
.plist.is-empty{border:0;background:transparent;border-radius:0;overflow:visible}
.plist.is-empty .note{margin-top:0}

.gd-sec .sec-btn.gd-ask{margin:20px auto 0}

.rv-gate{margin-top:14px}
.rv-gate-t{font-size:12.5px;line-height:1.8;color:var(--ink3);text-align:center;margin:0}
.rv-gate .sec-btn{margin:11px auto 0}

/* ══ v0.0.90: 画像の添付と表示 ═══════════════════════════════════
   色は増やさない。枠線・背景濃度・レイアウトだけで状態を出す。
   ※ 出し分けの指定は他所より後ろに置き、要素セレクタで強さを確保する
     （v0.0.88 で「後ろの無条件指定に負ける」を踏んだため） */
.imgpick{margin-top:10px;border:1px dashed var(--line2);border-radius:var(--r2);
  padding:11px 12px;background:var(--sur)}
.ip-row{display:flex;align-items:center;gap:10px}
.ip-add{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;
  font-weight:800;border:1.7px solid var(--ink);border-radius:9px;padding:8px 14px;
  background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.ip-add:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.ip-add:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ip-add .ico{stroke:currentColor;fill:none;stroke-width:2.2;width:13px;height:13px}
.ip-count{margin-left:auto;font-size:11px;color:var(--ink3)}
.ip-note{font-size:11px;line-height:1.7;color:var(--ink3);margin:9px 0 0}
.ip-thumbs{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.ip-thumbs:empty{display:none}
.ip-th{position:relative;width:96px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--paper)}
.ip-th img,.ip-th .ph{display:block;width:100%;height:72px;object-fit:cover;background:var(--sur)}
.ip-th.ng{border-color:var(--ink);opacity:.85}
.ip-st{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;font-weight:700;
  text-align:center;padding:3px 2px;background:rgba(22,24,29,.72);color:#fff}
.ip-rs{display:block;font-size:10px;line-height:1.5;padding:4px 5px;color:var(--ink2)}
.ip-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;border-radius:50%;
  background:rgba(22,24,29,.72);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}
.ip-x:hover{background:var(--ink)}

/* 投稿・レビューに出る画像（クリックで拡大＝既存の #mn-zoom を流用） */
.ug-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.ug-img{border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;
  background:none;cursor:zoom-in;display:block;width:132px}
.ug-img img{display:block;width:100%;height:88px;object-fit:cover}
.ug-img:hover{border-color:var(--ink)}
@media(max-width:560px){
  .ug-img{width:calc(50% - 4px)}
  .ug-img img{height:96px}
  .ip-th{width:calc(33.333% - 6px)}
}

/* プロフィールのアイコン */
.pf-av{position:relative;overflow:visible}
.pf-av img{width:100%;height:100%;border-radius:14px;object-fit:cover;display:block}
.pf-av-note{font-size:11.5px;color:var(--ink2);margin-top:8px;line-height:1.7}

/* ══ v0.0.91: プロフィールの編集を1つの入口にまとめる ═══════════════
   名前の横の鉛筆だけが入口。押すと「表示名（上）」と「アイコン（下）」が出る。
   ★ display の指定は [hidden] より後ろに書くので、必ず同じ強さの
     [hidden] 側も後ろで打ち直す（v0.0.88 の取り合いを繰り返さないため） */
.pf-edit{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border-radius:50%;
  border:1.5px solid var(--line2);background:var(--paper);color:var(--ink);cursor:pointer}
.pf-edit .ico{stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}
.pf-edit:hover{border-color:var(--ink)}

.pf-form.pf-in{display:block}
.pf-form.pf-in[hidden]{display:none}
.pfe{max-width:640px}
.pfe-h{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;
  margin:16px 0 8px}
.pfe-h:first-child{margin-top:0}
.pfe-h .xp{font-size:10.5px;font-weight:700;color:#8A6400;background:var(--gold-s);
  border:1px solid #F0DFAE;border-radius:99px;padding:2px 9px}
.pfe-row{display:flex;gap:8px;flex-wrap:wrap}
.pfe-row input{flex:1;min-width:180px;font:inherit;padding:9px 12px;
  border:1.5px solid var(--line2);border-radius:8px;background:#fff}
.pfe-row button{font:inherit;font-weight:700;padding:9px 18px;border-radius:8px;
  border:0;background:var(--ink);color:#fff;cursor:pointer}
.pfe-note{font-size:11px;color:var(--ink3);line-height:1.7;margin:8px 0 0}

/* ══ v0.0.92: 「確認まち」の見せ方 ═══════════════════════════════ */
.pend-note{display:block;border:1.7px dashed var(--line2);border-radius:var(--r2);
  background:var(--sur);padding:12px 14px;margin:14px 0 0}
.pend-note[hidden]{display:none}
.pend-note b{display:block;font-size:13px;font-weight:800;margin-bottom:4px}
.pend-note span{display:block;font-size:12px;line-height:1.8;color:var(--ink2)}

.rev-mine{display:block;border:1.7px solid var(--ink);border-radius:var(--r2);
  padding:14px 15px;margin:14px 0 0;background:var(--paper);box-shadow:0 3px 0 var(--ink)}
.rev-mine[hidden]{display:none}
.rv-mine-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.rv-mine-h b{font-size:13px;font-weight:800}
.rv-badge{font-size:10.5px;font-weight:700;color:#8A6400;background:var(--gold-s);
  border:1px solid #F0DFAE;border-radius:99px;padding:2px 9px}
.rev-mine p{font-size:13px;line-height:1.8;color:var(--ink2);margin:0}
.rv-mine-n{font-size:11px;color:var(--ink3);line-height:1.7;margin-top:8px}

/* ══ v0.0.93: ヘッダーのアイコン / ランキングの出典 ═══════════════ */
.hacct .me.has-img{background-size:cover;background-position:center;background-color:transparent}
.rk-src{font-size:11px;line-height:1.7;color:var(--ink3);margin:14px 0 0}

/* ══ v0.0.95: 画像の拡大が大きすぎたので2割ほど小さく ══ */
#mn-zoom img{max-width:80%;max-height:80%}
@media(max-width:760px){#mn-zoom img{max-width:92%;max-height:80%}}

/* ══ v0.0.100: KV に背景画像があるときの読みやすさ ══════════════
   紫の背景に紫の文字（ROBLOX のラベル・「日本のプレイヤーの評価」の強調）が
   乗ると沈んで読めない。色を増やさずに、白を敷いて浮かせる。
   ※ テーマ設定の色指定（<style id="mn-kv">）は これより後ろに出力されるので、
     手で色を入れた場合はそちらが優先される（意図的） */

/* 上の小さいラベル: キーカラー → 近黒。線だけキーカラーのまま残す */
#hero.kv-on .eye{color:var(--ink)}
#hero.kv-on .eye::before{background:var(--ink)}

/* 見出しの強調部分: 白いマーカーを敷いて、紫の文字を浮かせる */
#hero.kv-on .hero-h1 em{
  background:rgba(255,255,255,.86);
  border-radius:5px;
  padding:0 .1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone}

/* 影を強めて、どんな絵の上でも輪郭が出るようにする */
#hero.kv-on .hero-h1,#hero.kv-on .hero-sub,#hero.kv-on .eye{
  text-shadow:0 1px 3px rgba(255,255,255,.8), 0 0 1px rgba(255,255,255,.9)}
#hero.kv-on .hero-h1 em{text-shadow:none}

/* 説明文も白を薄く敷いて、絵の上でも読める状態にする */
#hero.kv-on .hero-sub{
  display:inline-block;
  background:rgba(255,255,255,.6);
  border-radius:8px;
  padding:6px 10px;
  margin-left:-10px}
@media(max-width:760px){
  #hero.kv-on .hero-sub{margin-left:0;padding:6px 9px}
}

/* ══ v0.0.101: ランキングのタブと見出しの間隔 ══════════════════
   v0.0.93 でタイトル直下の説明文を下へ移したため、
   見出しとタブがくっついて見えるようになっていた。上の余白を戻す */
#hero ~ .wrap .rk-tabs,
.rk-tabs{margin-top:18px}
.rk-sel{margin-top:16px}
@media(max-width:760px){
  .rk-tabs{margin-top:14px}
  .rk-sel{margin-top:12px}
}

/* ══ v0.0.102 ═══════════════════════════════════════════════════ */
/* ① SP のドロワーがヘッダーの下に潜っていた。
      #hdr は position:sticky で z-index:500、.drawer は 300 だったため、
      開いてもヘッダーだけが上に残って「埋もれて」見えていた。
      ドロワーはヘッダーより手前に出す（下部タブバー 400 よりも上） */
.drawer{z-index:600}

/* ② 追加申請の完了パネル */
.req-done{text-align:center;padding:30px 20px 26px}
.req-done[hidden]{display:none}
.req-done .rq-ic{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  border:1.7px solid var(--ink);display:flex;align-items:center;justify-content:center}
.req-done .rq-ic .ico{stroke:var(--ink);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}
.req-done .rq-h{font-size:19px;font-weight:900;letter-spacing:-.03em;margin:0 0 8px}
.req-done .rq-t{font-size:13px;line-height:1.9;color:var(--ink2);margin:0 auto 6px;max-width:420px}
.req-done .rq-name{font-size:13.5px;font-weight:800;margin-bottom:18px;min-height:1em}
.req-done .bigbtn{max-width:340px;margin:0 auto}

/* ══ v0.0.103 ═══════════════════════════════════════════════════ */
/* ① おみくじ: 引く前から棒が筒の上に見えていた。
      .mkj-stick は top:-4px で筒の外に出ており、z-index:-1 で後ろに回しているだけなので
      はみ出した部分が見えていた。初期位置を筒の中へ下げ、振ったあとに出てくる動きにする。 */
.mkj-stick{top:6px;transform:translateY(40px)}
.mkj.shake .mkj-stick{transform:translateY(-22px)}

/* ② キャラクター配置（設定は WP管理「テーマ設定」→ キャラクター配置） */
.mn-chara{position:absolute;z-index:1;pointer-events:none;user-select:none;
  height:auto;max-width:46%;display:block}
@media(max-width:760px){
  .mn-chara{max-width:38%}
}

/* ══ v0.0.105 ═══════════════════════════════════════════════════ */
/* ルーレット: 結果が出たら回転中の黒い箱を消す。
   .rou-stage は display:flex 系の指定があるので、[hidden] を後ろで打ち直す
   （display の指定が [hidden] に勝つ取り合いを繰り返さないため） */
.rou-stage[hidden]{display:none}

/* ══ v0.0.106 ═══════════════════════════════════════════════════ */
/* ① コードの投票行がスマホで折れて崩れる。
      質問文を1行占有させ、2つのボタンは必ず横並びのままにする */
.crow .l2 .q{flex:none}
.vt2{white-space:nowrap;flex:none}
@media(max-width:560px){
  .crow .l2{flex-wrap:wrap;gap:7px}
  .crow .l2 .q{flex-basis:100%;margin-bottom:2px}
  .crow .rate2{margin-left:auto}
}
@media(max-width:380px){
  .vt2{padding:5px 9px;font-size:11.5px}
}

/* ② コードのシェア */
.cshare{margin-top:9px}
.cshare-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;
  font-weight:700;border:1.5px solid var(--line2);border-radius:99px;padding:6px 13px;
  background:var(--paper);color:var(--ink2);cursor:pointer}
.cshare-btn:hover{border-color:var(--ink);color:var(--ink)}
.cshare-btn .ico{stroke:currentColor;fill:none;stroke-width:2.2;width:12px;height:12px}
.cshare-menu{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.cshare-menu[hidden]{display:none}
.cshare-menu a,.cshare-menu button{font:inherit;font-size:11.5px;font-weight:700;
  border:1.5px solid var(--ink);border-radius:8px;padding:6px 14px;background:var(--paper);
  color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:0 2px 0 var(--ink)}
.cshare-menu a:hover,.cshare-menu button:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--ink)}

/* ③ 攻略ガイドの下の動画 */
.gd-vd{margin-top:26px}
.gd-vd-t{font-size:12.5px;color:var(--ink3);line-height:1.8;margin:0 0 12px}
.gd-vd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.gd-vd-row{grid-template-columns:1fr;gap:16px}}
.gd-vd-more{display:block;max-width:340px;margin:16px auto 0;text-align:center}

/* ══ v0.0.107: 日本プレイヤー評価（HERO）と「このゲーム、あなたに合う？」══
   ・HERO は総合だけ。軸の内訳は早見表に置き、役割を重複させない
   ・色は増やさない。既存の金（--gold-s）と近黒だけで組む */
.gh-jp{display:inline-flex;align-items:center;gap:8px;margin-top:11px;
  border:1.7px solid var(--ink);border-radius:99px;padding:7px 15px;
  background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;
  font:inherit;box-shadow:0 3px 0 var(--ink)}
.gh-jp:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.gh-jp .fl{font-size:14px;line-height:1}
.gh-jp .lb{font-size:11.5px;font-weight:700;color:var(--ink2)}
.gh-jp .v{font-size:19px;font-weight:900;letter-spacing:-.02em}
.gh-jp .d{font-size:11px;color:var(--ink3);margin-left:-4px}
.gh-jp .n{font-size:11px;color:var(--ink3)}
.gh-jp.is-none .v{font-size:12.5px;font-weight:800}
@media(max-width:560px){
  .gh-jp{padding:6px 12px;gap:6px}
  .gh-jp .v{font-size:17px}
}

.fit{border:1.7px solid var(--ink);border-radius:var(--r);background:var(--paper);
  padding:18px 18px 16px;margin-top:16px;box-shadow:0 4px 0 var(--ink)}
.fit .blk-h{margin-bottom:12px}
.fit-rows{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
@media(max-width:640px){.fit-rows{grid-template-columns:1fr}}
.fit-r{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px dashed var(--line2)}
.fit-l{font-size:12.5px;font-weight:700;flex:1;min-width:0}
.fit-s{flex:none;letter-spacing:1px;font-size:13px;color:var(--line2)}
.fit-s i{font-style:normal}
.fit-s i.on{color:#E8A33D}
.fit-n{flex:none;font-size:11.5px;color:var(--ink3);width:26px;text-align:right}
.fit-w{flex:none;font-size:12.5px;font-weight:800}
.fit-fun{font-size:13px;margin:12px 0 0;font-weight:700}
.fit-fun b{font-size:17px}
.fit-fun .mono{font-size:11px;color:var(--ink3);font-weight:400}
.fit-more{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;
  color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.fit-cta{margin-top:12px}
.fit-need{font-size:12.5px;color:var(--ink2);margin:0 0 9px;line-height:1.7}
.fit-cta .sec-btn{max-width:320px}

/* ══ v0.0.107b: 「ここは気をつけて」を読みやすく ═══════════════
   同じ大きさの文が5行並ぶと目が滑るので、1件ずつ区切って印を付ける。
   色は増やさず、罫線と印だけで差を出す */
.gd-warn .wi{display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-top:1px solid var(--line)}
.gd-warn .wi:first-of-type{border-top:0;padding-top:4px}
.gd-warn .wi:last-of-type{padding-bottom:2px}
.gd-warn .wi .mk{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--ink);margin-top:7px}
.gd-warn .wi .tx{font-size:13.5px;line-height:1.85;color:var(--ink2)}
.gd-warn .wi .tx b{color:var(--ink);font-weight:800}
.gd-warn .wi .tx .d{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px}
@media(max-width:560px){
  .gd-warn .wi{gap:9px;padding:10px 0}
  .gd-warn .wi .tx{font-size:13px}
}

/* 攻略ガイド内の動画（セクションの中に置くので、上に区切りを入れる） */
.gd-sec .gd-vd{margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--line2)}
.gd-vd-h{display:block;font-size:12.5px;font-weight:800;margin-bottom:11px}

/* ══ v0.0.109: 詰まりすぎた余白をまとめて広げる ═══════════════
   本文とリスト・本文とボックスの間が近すぎて、どこまでが説明でどこからが
   項目なのか読み取れなかった。ガイドと詳細の主要ブロックだけを広げる */

/* 攻略ガイド: 本文 → 各種リストの間 */
.gd-sec .gd-body{margin:0 0 4px}
.gd-sec .gd-steps,
.gd-sec .gd-check,
.gd-sec .gd-pts,
.gd-sec .gd-tips,
.gd-sec .gd-warn,
.gd-sec .gd-sum,
.gd-sec .gd-tblwrap{margin-top:20px}
.gd-sec .gd-take{margin-bottom:16px}
/* v0.0.186: ここにあった .gd-steps / .gd-check / .gd-tips / .gd-warn の
   余白の打ち直しは、上のブロックと数字が食い違うだけだったので撤去した。
   （後ろに書いた同じ強さの指定が勝つので、直したつもりが戻っていた） */

/* 「あなたに合う？」募集モード */
.fit-lead{font-size:13px;line-height:1.95;color:var(--ink2);margin:0 0 14px}
.fit .fit-cta{margin-top:16px}

/* ゲーム詳細の主要ブロックの内側と、ブロック同士の間 */
.blk{margin-top:18px}
.blk .blk-h{margin-bottom:14px}
.gnav{margin-top:20px}

/* ══ v0.0.110: コードの「もっと見る」ボタン ══ */
.cd-more{display:block;max-width:340px;margin:16px auto 0;text-align:center}

/* ══ v0.0.111→112b: ゲーム詳細の下バー ════════════════════════
   周りと同じ作法に揃える: 高さ 54px・角丸 var(--r2)・1px 罫線・var(--paper)。
   高さがバラバラだったのと、SP でドロップダウンだけ別物に見えていたのを直す */
#bottom .bt-game{display:flex;align-items:stretch;gap:9px}
#bottom .bt-log{display:flex;gap:7px;flex:none}
#bottom .bl{flex:none;width:64px;min-height:54px;border:1px solid var(--line2);
  border-radius:var(--r2);background:var(--paper);color:var(--ink2);font:inherit;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#bottom .bl .ico{stroke:currentColor;fill:none;stroke-width:2;width:17px;height:17px}
#bottom .bl .l{font-size:10px;font-weight:800;line-height:1;letter-spacing:-.02em}
#bottom .bl:hover{border-color:var(--ink);color:var(--ink)}
#bottom .bl[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
#bottom .bl[aria-pressed="true"] .ico{stroke:var(--ink)}

/* SP のページ内メニュー。見た目と高さを他のボタンに合わせる */
#bottom .bt-nav{display:none;min-height:54px;font:inherit;font-size:13px;font-weight:800;
  color:var(--ink);background:var(--paper);border:1px solid var(--line2);
  border-radius:var(--r2);padding:0 34px 0 14px;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 24px, calc(100% - 14px) 24px;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
#bottom .bt-nav:hover{border-color:var(--ink)}

#bottom .bt-game .rate{flex:none}
#bottom .bt-game .go{flex:1;max-width:320px;margin-left:auto}

@media(max-width:1000px){
  #bottom .bl{width:56px}
  #bottom .bl .l{font-size:9.5px}
  #bottom .bt-game .go{max-width:230px}
}
/* SP: 記録はページ内の「あなたの記録」に任せ、バーはメニュー・評価・遊ぶの3つ */
@media(max-width:760px){
  #bottom .bt-log{display:none}
  #bottom .bt-nav{display:block;flex:1;min-width:0}
  #bottom .bt-game{gap:8px}
  #bottom .bt-game .rate{padding:0 15px;font-size:13px}
  #bottom .bt-game .go{flex:1.15;max-width:none;font-size:13.5px}
}
@media(max-width:380px){
  #bottom .bt-game .rate{padding:0 11px;font-size:12.5px}
  #bottom .bt-nav{font-size:12px;padding:0 30px 0 11px}
}
/* PC ではページ内の「あなたの記録」を出さない（バーに入れたので重複する） */
@media(min-width:761px){
  .blk.ulog{display:none}
}

/* 初心者攻略のポイント（結論だけ） */
.gd-tk{list-style:none;margin:0;padding:0}
.gd-tk li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;
  border-top:1px solid var(--line)}
.gd-tk li:first-child{border-top:0;padding-top:2px}
.gd-tk .no{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);
  color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.gd-tk .tx b{display:block;font-size:14px;font-weight:800;margin-bottom:3px}
.gd-tk .tx .d{font-size:13px;line-height:1.85;color:var(--ink2)}
.gd-tk-more{display:block;max-width:420px;margin:18px auto 0;text-align:center}

/* ══ v0.0.112: 動画の見せ方 ═══════════════════════════════════
   ・SP は縦に積むと画面を占領するので、横スクロールにして1枚だけ見せる
     （右端に次の1枚を少しのぞかせて、動かせることを分からせる）
   ・見出しが小さく無機質だったので、記号を付けて大きくする */
.gd-vd-h{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:900;
  letter-spacing:-.02em;margin-bottom:13px}
.gd-vd-h .ico{flex:none;width:19px;height:19px;fill:var(--ink);stroke:none}
.gd-vd-h .tt{line-height:1.5}
.gd-vd-t{font-size:13px;line-height:1.9;color:var(--ink2);margin:0 0 14px}

@media(max-width:760px){
  .gd-vd-h{font-size:15.5px;margin-bottom:11px}
  /* 横スクロール。1枚を大きく見せ、次の1枚を少しのぞかせる */
  .gd-vd-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:-16px;padding-inline:16px;padding-bottom:4px}
  .gd-vd-row::-webkit-scrollbar{display:none}
  .gd-vd-row .vd{flex:0 0 84%;scroll-snap-align:start}
  .gd-vd-row .vd .vd-play img{height:auto;aspect-ratio:16/9}
  .gd-vd-more{margin-top:14px}
}

/* ══ v0.0.112b: スマホの評価行を整える ═══════════════════════════
   ラベルと目盛りとスコアが詰まって、スコアの箱だけが大きく浮いていた。
   目盛りを幅いっぱいに使い、スコアは小さめにして高さを揃える */
@media(max-width:639px){
  .pt{padding:16px 0;gap:10px}
  .pt .tx{font-size:13.5px}
  .pt .tx i{font-size:11px;line-height:1.6;margin-top:3px}
  .gauge{gap:11px;align-items:flex-start}
  .gg-cells{height:12px}
  .gg-lab{width:60px;padding-top:0}
  .gg-lab b{font-size:12px;line-height:1.35}
  .gg-lab em{font-size:11px}
  /* 未回答の行の「回答する」も他のボタンと高さを揃える */
  .pt.lock .mk2{gap:9px}
  .pt.lock button{padding:7px 12px;font-size:12px;white-space:nowrap}
}
/* 総合点と「評価する」の並び。スマホで縦に潰れないようにする */
@media(max-width:520px){
  .vote-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .vote-top .vt-cta{flex:none}
}

/* ══ v0.0.114: 下バーとスマホのはみ出しを直す ═══════════════════
   ・PC: バーの左右をヘッダー（.wrap）と同じ位置に揃える。
     .wrap は 900px 以上で padding 28px なのに、バーは 16px のままで
     左端がロゴより外に出ていた
   ・「Roblox で遊ぶ」は残り幅いっぱいに広げ、右の余白をなくす
   ・SP: 3つ並べると横に収まらないので「評価する」を 👍 だけにする */
.bt-in{padding-left:16px;padding-right:16px}
@media(min-width:900px){.bt-in{padding-left:28px;padding-right:28px}}

#bottom .bt-game .go{flex:1;max-width:none;margin-left:0}
#bottom .rate .ic{display:none;font-size:19px;line-height:1}

@media(max-width:760px){
  #bottom .bt-game{gap:8px}
  #bottom .bt-nav{flex:1 1 auto;min-width:0}
  /* v0.0.148: ここにあった #bottom .rate{width:54px} が、v0.0.123 で
     ボタンを 👍 から「ゲームを評価」の文字に戻したあとも生き残っていた。
     以降の上書きは全部 #bottom .bt-game .rate（詳細度が上）で書かれていて
     width には触れていないため、54px の箱に nowrap の6文字が入り、
     はみ出した文字が「Roblox で遊ぶ」の下にもぐり込んでいた（＝真因）。
     .tx / .ic の切り替えも v0.0.123 が打ち消し済みで、この3行はすべて死んでいる。 */
  #bottom .bt-game .go{flex:1 1 auto;min-width:0;font-size:13.5px;gap:6px}
  #bottom .bt-game .go .ico{flex:none}
}
@media(max-width:380px){
  #bottom .bt-game .go{font-size:12.5px}
  #bottom .bt-nav{font-size:12px}
}

/* 攻略ガイドの動画: 横スクロールがカードの外へはみ出していた。
   負のマージンをやめて、枠の内側で収める */
@media(max-width:760px){
  .gd-vd-row{margin-inline:0;padding-inline:0;padding-right:10px}
  .gd-vd-row .vd{flex:0 0 88%}
}

/* ══ v0.0.116 ═══════════════════════════════════════════════════ */
/* ① 攻略の「知っておくと得するコツ」の本文が薄くて読みにくかった */
.gd-tips ul li{color:var(--ink);font-size:13.5px}
.gd-warn .wi .tx{color:var(--ink)}

/* ② 記事の中のゲームカード */
.mn-gamecard .mgc-stats{display:flex;gap:10px;margin:12px 0 14px}
.mn-gamecard .mgc-stats span{flex:1;display:block;background:var(--sur);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center}
.mn-gamecard .mgc-stats small{display:block;font-size:10.5px;font-weight:700;
  color:var(--ink3);letter-spacing:.02em;margin-bottom:4px}
.mn-gamecard .mgc-stats b{display:block;font-size:21px;font-weight:900;letter-spacing:-.03em;
  line-height:1.15}
.mn-gamecard .mgc-btns{display:block}
.mn-gamecard .mgc-go{display:flex;align-items:center;justify-content:center;min-height:50px;
  border-radius:var(--r2);background:var(--red);color:#fff;font-size:14px;font-weight:800;
  text-decoration:none}
.mn-gamecard .mgc-go:hover{background:var(--red-d)}

.mgc-vote{margin-top:14px;border-top:1px dashed var(--line2);padding-top:13px}
.mgc-vote .q{font-size:13px;font-weight:800;margin-bottom:9px}
.mgc-vote .bs{display:flex;gap:7px}
.mgc-vote .bs button{flex:1;min-height:42px;font:inherit;font-size:12.5px;font-weight:800;
  border:1.5px solid var(--line2);border-radius:10px;background:var(--paper);
  color:var(--ink);cursor:pointer;padding:0 4px}
.mgc-vote .bs button:hover{border-color:var(--ink)}
.mgc-vote .bs button.on{background:var(--gold);border-color:var(--gold)}
.mgc-vote .msg{font-size:11.5px;color:var(--ink3);margin-top:9px;min-height:1em}
@media(max-width:520px){
  .mgc-vote .bs{flex-wrap:wrap}
  .mgc-vote .bs button{flex:1 1 calc(50% - 4px);font-size:12px}
  .mn-gamecard .mgc-stats b{font-size:19px}
}

/* ③ 記事に1本だけゲームが出るときの下バー */
#bottom .bt-post{display:flex;align-items:center;gap:12px}
#bottom .bp-t{flex:1;min-width:0;font-size:13px;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bottom .bt-post .go{flex:none;min-width:260px;min-height:54px}
@media(max-width:640px){
  #bottom .bp-t{display:none}
  #bottom .bt-post .go{flex:1;min-width:0;font-size:13.5px}
}

/* ══ v0.0.117 ═══════════════════════════════════════════════════ */
/* ① トップの検索バーの候補（main.js が body 直下に出す）
      #hero は overflow:hidden なので、フォームの中に置くと候補が切れる。
      position:fixed + 座標計算で外に出している（top/left/width は JS が入れる） */
.mn-ac{position:fixed;z-index:520;background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--r2);box-shadow:0 12px 30px rgba(20,20,20,.18);overflow-y:auto;
  -webkit-overflow-scrolling:touch;text-align:left}
.mn-ac[hidden]{display:none}
.mn-ac-i{display:flex;align-items:center;gap:11px;padding:9px 12px;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--line)}
.mn-ac-i img,.mn-ac-i .ph{width:42px;height:42px;flex:none;border-radius:10px;object-fit:cover;
  background:var(--sur);display:block}
.mn-ac-i .tx{min-width:0;flex:1}
.mn-ac-i b{display:block;font-size:14px;font-weight:800;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-ac-i small{display:block;font-size:11px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-ac-i.on,.mn-ac-i:hover{background:var(--red-s)}
/* .bigsearch button（キーカラーの検索ボタン）に負けないよう、要素まで含めて指定する */
.mn-ac .mn-ac-all,.bigsearch .mn-ac-all{display:block;width:100%;text-align:left;padding:11px 13px;
  font:inherit;font-size:12.5px;font-weight:800;color:var(--red);background:var(--paper);
  border:0;border-radius:0;cursor:pointer}
.mn-ac .mn-ac-all:hover{background:var(--sur)}

/* ② 記事の中のゲームカード: 縦積み・中央ぞろえ（サムネ→タイトル→数値→ボタン→3択） */
.article .mn-gamecard,.mn-gamecard{display:block;padding:22px 20px}
.mn-gamecard .mgc-thumb{display:block;width:auto;margin:0 auto}
.mn-gamecard .mgc-thumb img{width:168px;height:168px;margin:0 auto;border-radius:20px}
.mn-gamecard .mgc-body{display:block;min-width:0}
.article .mn-gamecard .mgc-t,.mn-gamecard .mgc-t{display:block;text-align:center;
  font-size:22px;font-weight:900;line-height:1.35;margin:16px 0 0}
.mn-gamecard .mgc-stats{margin:14px 0}
.mn-gamecard .mgc-vote{margin-top:16px}
.mn-gamecard .mgc-vote .q{font-size:13.5px;font-weight:800;margin-bottom:2px}
.mn-gamecard .mgc-vote .vt3{margin:10px 0 0}
.mn-gamecard .mgc-res{margin-top:13px;min-height:1em}
/* .article em の黄色マーカーが票数（.vt3-lg em）に乗るので、カードの中だけ外す */
.mn-gamecard .vt3-lg em{background:none}
@media(max-width:560px){
  .article .mn-gamecard,.mn-gamecard{padding:18px 15px}
  .mn-gamecard .mgc-thumb img{width:132px;height:132px;border-radius:16px}
  .article .mn-gamecard .mgc-t,.mn-gamecard .mgc-t{font-size:19px;margin-top:13px}
}

/* ══ v0.0.118 ═══════════════════════════════════════════════════ */
/* ① 記事の中のゲームカード: 区切り線を出さない
      ・破線は .mgc-vote の border-top
      ・「このゲーム、おもしろい？」の下の実線は、評価シート用の共通クラス .q が
        当たっていたもの（border-bottom + 上下16px の余白）。クラス名を .mgc-q に変えて回避 */
.mn-gamecard .mgc-vote{border-top:0;padding-top:0;margin-top:18px}
.mn-gamecard .mgc-q{font-size:13.5px;font-weight:800;padding:0;border:0;margin:0 0 10px}

/* ② 記事に1本だけゲームが出るときの下バー
      PC = サムネ + タイトル + 高評価率 / 現在人数 + ボタン
      SP = 上段「サムネ｜タイトル」、下段にボタン（何の掲示板・攻略か分かるように） */
#bottom .bt-post{display:flex;align-items:center;gap:14px}
#bottom .bp-g{display:flex;align-items:center;gap:11px;min-width:0;flex:1;
  text-decoration:none;color:var(--ink)}
#bottom .bp-ic{width:44px;height:44px;flex:none;border-radius:11px;object-fit:cover;
  background:var(--sur);display:block}
#bottom .bp-t{flex:1;min-width:0;font-size:14px;font-weight:800;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
#bottom .bp-g:hover .bp-t{text-decoration:underline}
#bottom .bp-st{display:flex;gap:10px;flex:none}
#bottom .bp-st span{display:block;background:var(--sur);border:1px solid var(--line);
  border-radius:10px;padding:5px 13px;text-align:center;min-width:96px}
#bottom .bp-st small{display:block;font-size:9.5px;font-weight:700;color:var(--ink3);
  letter-spacing:.02em}
#bottom .bp-st b{display:block;font-size:15px;font-weight:900;letter-spacing:-.03em;line-height:1.2}
#bottom .bt-post .go{flex:none;min-width:268px;min-height:54px}
@media(max-width:900px){
  #bottom .bp-st span{min-width:0;padding:5px 10px}
  #bottom .bt-post .go{min-width:212px}
}
@media(max-width:760px){
  #bottom .bt-post{flex-wrap:wrap;gap:9px}
  #bottom .bp-g{flex:1 1 100%;order:1}
  #bottom .bp-ic{width:34px;height:34px;border-radius:9px}
  #bottom .bp-t{display:block;font-size:13px}     /* 640px 以下で消していたのを取り消す */
  #bottom .bp-st{display:none}                    /* 数値は本文のカードに出ているので省く */
  #bottom .bt-post .go{flex:1 1 100%;order:2;min-width:0;min-height:50px;font-size:14px}
  body.mn-btpost{padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px))}
}

/* ══ v0.0.119 ═══════════════════════════════════════════════════ */
/* プロフィールの「ふりがな オン」が効いていなかった。
   main.js は body に .furi を付けていたが、CSS 側に受け皿が無く、
   ルビが出るのは Kids View のときだけになっていた。
   既存の body:not(.kids) rt{display:none}（0,0,2,1）に勝たせる必要があるので
   :not(.kids) を足して 0,0,3,1 にしている。 */
body.furi:not(.kids) ruby{display:ruby}
body.furi:not(.kids) rt{display:ruby-text;font-size:.5em;color:var(--ink3)}

/* ══ v0.0.120 ══ */
/* ① ルビは漢字の上に出す。
      display:inline だと ruby レイアウトが切れて横に並ぶので、
      ruby / ruby-text を明示する（前版で実際に踏んだ） */
.kids ruby, body.furi ruby{display:ruby}
.kids rt, body.furi rt{display:ruby-text;font-size:.5em;color:var(--ink3)}

/* ② 記事の下バー: PC は全体を中央に寄せる（間の空白を埋める）。
      SP はサムネとタイトルを中央に */
#bottom .bt-post{justify-content:center}
#bottom .bp-g{flex:0 1 auto;min-width:0}
#bottom .bt-post .go{flex:0 0 auto}
@media(max-width:760px){
  #bottom .bp-g{flex:1 1 100%;justify-content:center;text-align:center}
  #bottom .bp-t{flex:0 1 auto}
  #bottom .bt-post .go{flex:1 1 100%}
}

/* ══ v0.0.121 ═══════════════════════════════════════════════════ */
/* ① SP でフォームに触れると拡大する（iOS は 16px 未満の入力欄でズームする）。
      拡大されると候補のドロップダウンが位置ズレして見えるので、
      入力欄のフォントを 16px にして拡大自体を起こさせない。
      viewport の maximum-scale で止める方法は、指で拡大もできなくなるので採らない */
.bigsearch input, .fil-q, .sv-t, .mnsv-ta { font-size: 16px; }

/* ② ゲーム詳細（SP）: 下バーにページ内メニューを移したのに、本文側にも出ていた。
      main.js は hidden を付けているが、@media の display:block が勝っていたため。
      同じ強さの [hidden] を後ろで打ち直す（この形は今回で3度目） */
.gnav-sel[hidden], .ghero-sel[hidden] { display: none; }

/* ③ HERO の3択（タイトルとボタンだけの簡易版） */
.gh-vote{border:1.7px solid var(--line2);border-radius:14px;padding:14px 16px 16px;margin:0 0 16px;
  background:var(--paper)}
.gh-vote .ghv-q{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.gh-vote .vt3{margin:11px 0 0}
.gh-vote .vt3 button{font-size:13px;padding:12px 6px}
.gh-vote .ghv-res{margin-top:12px}
.gh-vote .vt3-empty{background:transparent;padding:0;font-size:12px}
@media(max-width:520px){
  .gh-vote{padding:13px 13px 15px}
  .gh-vote .vt3 button{font-size:12px;padding:12px 3px}
}

/* ══ v0.0.123 ═══════════════════════════════════════════════════ */
/* ① さがす（SP）の絞り込みボタンが崩れていた。
      原因は PC 用の `.fil-h span{margin-left:auto;background:var(--red);…}`。
      これがボタンの中の span 全部（ラベル・件数・「条件を開く」・矢印）に当たっていた。
      要素セレクタ入りで 0,0,1,1 あるので、クラス2つ以上で打ち消す */
@media(max-width:899px){
  .fil-h .fil-tg span{background:none;color:inherit;margin-left:0;padding:0;border-radius:0}
  .fil-h .fil-tg .fil-tg-n{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
    min-width:19px;height:19px;border-radius:99px;display:inline-flex;
    align-items:center;justify-content:center;padding:0 5px}
  .fil-h .fil-tg .fil-tg-o{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink3)}
  .fil-h .fil-tg .fil-tg-c{width:9px;height:9px;background:none;
    border-right:2.2px solid var(--ink);border-bottom:2.2px solid var(--ink);
    transform:rotate(45deg);margin:-4px 2px 0 0}
  .fil.open .fil-h .fil-tg .fil-tg-c{transform:rotate(-135deg);margin-top:2px}
}

/* ② 下部メニュー（SP）: 端に寄りすぎていた。
      左右に余白を足し、ホームバーぶんの下余白を明示的に確保する */
@media(max-width:760px){
  #bottom.nav .bt-in{padding:6px 14px calc(10px + env(safe-area-inset-bottom, 0px));gap:2px}
  #bottom .nb{padding:8px 0 6px;min-height:52px;gap:4px}
  #bottom .nb .l{font-size:11.5px}
  #bottom .nb .ico{width:21px;height:21px}
  body{padding-bottom:calc(102px + env(safe-area-inset-bottom, 0px))}
}

/* ③ ゲーム詳細の下バー: 評価ボタンは文字で出す（👍 だけでは意味が伝わらない） */
#bottom .rate .ic{display:none}
#bottom .rate .tx{display:block}
@media(max-width:760px){
  #bottom .rate .tx{display:block}
  #bottom .bt-game .rate{flex:0 0 auto;padding:0 12px;font-size:12.5px}
  #bottom .bt-nav{flex:0 1 34%}
  #bottom .bt-game .go{flex:1 1 auto;font-size:13px}
}
@media(max-width:380px){
  #bottom .bt-game .rate{padding:0 9px;font-size:11.5px}
  #bottom .bt-nav{flex:0 1 30%;font-size:11.5px;padding:0 26px 0 9px}
  #bottom .bt-game .go{font-size:12px}
}

/* ══ v0.0.124 ══ */
/* 見出しの白マーカーの左右がさわって見えていた。
   .hero-h1 は letter-spacing:-.045em 。文字間の余白は「各文字の後ろ」に付くので、
   em の最後の文字だけ右側が .045em 分短くなる（左 .1em / 右 .055em 相当）。
   その分を右の padding で戻して左右を揃える */
#hero .hero-h1 em{padding-left:.1em;padding-right:calc(.1em + .045em)}

/* ══ v0.0.125 ═══════════════════════════════════════════════════ */
/* ① ゲーム詳細: HERO の3択は枠で囲まない（HERO の一部として見せる） */
.gh-vote{border:0;border-radius:0;background:none;padding:0;margin:0 0 18px}

/* ② トップの説明文: 白い下敷きが左にはみ出していた。
      margin-left:-10px で左へずらしていたのが原因（padding だけで足りる） */
#hero.kv-on .hero-sub{margin-left:0}

/* ③ 占い: 枠を外す。おみくじの棒は振るまで見せない
      （z-index だけで隠していたが、アニメーション中に重なり順が変わって見えていた） */
.frt-stage{border:0;background:none;padding:22px 0 8px}
.mkj-stick{opacity:0}
.mkj.shake .mkj-stick{opacity:1}

/* ④ ゲームリスト: 枠をやめて面で見せる。セクションの間隔はトップと同じ 44px に揃える */
.ls-cta{border:0;background:var(--sur);margin:18px 0 44px;padding:20px 22px}
.ls-theme,.ls-card{border:0;background:var(--sur)}
.ls-theme:hover{background:var(--red-s)}
.ls-card:hover{background:var(--red-s)}
.ls-card.mine{outline:1.5px dashed var(--line2);outline-offset:-1px}

/* ══ v0.0.126: コードの出所バッジ ══════════════════════════════ */
.crow .cmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px}
.crow .cmeta:empty{display:none}
.cbadge{font-size:10.5px;font-weight:800;border-radius:99px;padding:3px 10px;
  border:1px solid var(--line2);color:var(--ink2);background:var(--paper)}
.cbadge.ok{border-color:var(--ok);color:var(--ok)}
.cbadge.multi{border-color:var(--red);color:var(--red)}
.cbadge.single{border-color:var(--line2);color:var(--ink3)}
.cbadge.un{border-color:var(--line2);color:var(--ink3)}
.cchk{font-size:10.5px;color:var(--ink3)}

/* ══ v0.0.127 ══ */
/* ① 見出しのマーカーは余白を取らない（本人指示） */
#hero .hero-h1 em{padding-left:0;padding-right:0}

/* ② 総票数は 3択の見出し行の右端に */
.gh-vote .ghv-q{display:flex;align-items:baseline;gap:10px}
.vt3-n{margin-left:auto;font-size:11px;color:var(--ink3);font-weight:400}
.vt3-n:empty{display:none}

/* ══ v0.0.128 ═══════════════════════════════════════════════════ */
/* SP の下バー「ゲームを評価」が3行に折れて潰れていた。
   文字を折り返さないようにし、幅の取り合いは「目次」と「遊ぶ」に譲らせる */
@media(max-width:760px){
  #bottom .bt-game .rate{white-space:nowrap;flex:0 0 auto;padding:0 12px;font-size:12.5px}
  #bottom .bt-nav{flex:1 1 0;min-width:0}
  #bottom .bt-game .go{flex:1 1 0;min-width:0;white-space:nowrap}
}
@media(max-width:400px){
  #bottom .bt-game .rate{padding:0 9px;font-size:11.5px}
  #bottom .bt-nav{font-size:11.5px;padding:0 24px 0 9px}
  #bottom .bt-game .go{font-size:11.5px;gap:4px}
}

/* ══ v0.0.131: プロフィール編集の保存ボタン ══════════════════════
   名前の横ではなく、名前とアイコンの下にまとめて1つ置く */
.pfe-save{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.pf-form .pfe-go{width:100%;min-height:50px;font-size:15px;font-weight:800;
  background:var(--red);color:#fff;border:0;border-radius:12px;cursor:pointer}
.pf-form .pfe-go:hover{background:var(--red-d)}
.pfe-save .pfe-note{margin-top:9px;text-align:center}

/* ══ v0.0.134: 攻略ガイドの本文に差し込むスクリーンショット ══════
   v0.0.136: 幅いっぱいだと主役になりすぎるので 60%・中央寄せ・上下同じ余白に。
   SP は 60% だと小さすぎるので幅いっぱいに戻す */
.gd-shot{display:block;width:60%;max-width:520px;height:auto;aspect-ratio:16/9;
  object-fit:cover;border-radius:12px;border:1px solid var(--line2);
  margin:16px auto;background:var(--sur)}
@media(max-width:600px){.gd-shot{width:100%;max-width:none;margin:14px auto}}

/* ══ v0.0.135: 攻略ガイドの「いま使えるコード」を本文となじませる ══
   黒2px枠＋落ち影＋破線のカードは、本文のセクション（細い線）から浮いていた。
   見出しはセクションと同じ「下に2px」、行は薄い区切り線だけにする */
.gd-ins{border:1px solid var(--line);box-shadow:none}
.gd-ins-h{border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:14px}
.gd-ins-h b{font-size:17px;letter-spacing:-.03em}
.gd-ins .crow{border:0;border-top:1px solid var(--line);border-radius:0;
  background:none;margin-top:0;padding:14px 2px}
.gd-ins .crow:first-of-type{border-top:0;padding-top:2px}
.gd-ins .crow .cc{font-size:15.5px}

/* v0.0.139: 差し込みブロックの見出しにも番号を出す（本文セクションと同じ形） */
.gd-ins-h .no{font-size:12px;color:var(--red);font-weight:500;flex:none}

/* ══ v0.0.140 ═══════════════════════════════════════════════════ */
/* 目次の折りたたみ（SP だけ閉じて始まる。開閉は main.js が決める） */
.gd-toc > summary{list-style:none;cursor:pointer}
.gd-toc > summary::-webkit-details-marker{display:none}
.gd-toc > summary .chev{width:9px;height:9px;margin-left:10px;flex:none;
  border-right:2.2px solid var(--ink);border-bottom:2.2px solid var(--ink);
  transform:rotate(45deg);margin-top:-4px;transition:transform .16s}
.gd-toc[open] > summary .chev{transform:rotate(-135deg);margin-top:2px}

/* 記事の終わりに出す小さいヒーロー */
.gmini{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;
  border:1px solid var(--line2);border-radius:var(--r2);background:var(--paper);
  padding:13px 15px;margin-bottom:14px}
.gmini:hover{border-color:var(--ink)}
.gmini .ic{width:52px;height:52px;border-radius:13px;object-fit:cover;flex:none}
.gmini .ic.mk{display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:20px}
.gmini .tx{min-width:0;flex:1}
.gmini .tx b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;
  line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmini .o{display:block;font-size:11px;color:var(--ink3);margin-top:3px}
.gmini .ico{flex:none;color:var(--ink3)}
@media(max-width:560px){
  .gmini .ic{width:44px;height:44px;border-radius:11px}
  .gmini .tx b{font-size:14px;white-space:normal}
  .gmini .o{font-size:10.5px}
}

/* ══ v0.0.148: ゲーム詳細の SP 下バーを1か所で決め切る ═══════════
   これまで v0.0.112b / 114 / 123 / 128 の4ブロックが同じ3つのボタンを
   別々に上書きしていて、どれが最終値なのか追えなくなっていた。
   幅の取り合いはここだけで決める（前のブロックは font-size などの
   微調整として残るが、flex と width はこの最終ブロックが勝つ）。

   配分:
     目次   = 固定幅。中身は常に「目次」（選ぶと main.js が value を空に戻す）
              ので、セクション名ぶんの幅は要らない
     評価   = 内容ぶん（nowrap・width は auto に戻す）
     遊ぶ   = 残り全部 */
@media(max-width:760px){
  #bottom .bt-game{gap:7px}
  #bottom .bt-nav{flex:0 0 auto;width:84px;min-width:0;font-size:12.5px;
    padding:0 21px 0 10px;
    background-position:calc(100% - 14px) 24px, calc(100% - 9px) 24px}
  #bottom .bt-game .rate{flex:0 0 auto;width:auto;white-space:nowrap;
    padding:0 11px;font-size:12.5px}
  #bottom .bt-game .go{flex:1 1 0;min-width:0;white-space:nowrap;
    font-size:13px;gap:5px;padding:0 6px}
}
@media(max-width:400px){
  #bottom .bt-in{padding-left:12px;padding-right:12px}
  #bottom .bt-game{gap:6px}
  #bottom .bt-nav{width:74px;font-size:11.5px;padding:0 19px 0 8px;
    background-position:calc(100% - 13px) 24px, calc(100% - 8px) 24px}
  #bottom .bt-game .rate{padding:0 9px;font-size:11.5px}
  #bottom .bt-game .go{font-size:11.5px;gap:4px}
}
@media(max-width:340px){
  #bottom .bt-nav{width:66px;font-size:11px;padding:0 17px 0 7px}
  #bottom .bt-game .rate{padding:0 7px;font-size:11px}
  #bottom .bt-game .go{font-size:11px}
}

/* ══ v0.0.149: 期限切れコードの「いつのことか」 ══════════════
   .cexp .crow の中に新しく入れる子要素。
   .l1 は要素セレクタ混じりの汎用ルールを持っていないか grep して確認ずみ
   （.fil-h span / .article em で同じ事故を3回やっている）。 */
.cexp .crow .dead-at{margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--ink3);
  white-space:nowrap;text-decoration:none}
@media(max-width:560px){
  .cexp .crow .dead-at{margin-left:0;width:100%;padding-top:2px}
}

/* ══ v0.0.150: 攻略ガイドのカード / 掲示板の新着 / ベストショット ══
   トンマナは既存のまま（温かい白・1.5px の枠・12px 前後の丸み・
   アクセントは --red、数字は mono）。影は使わず、枠と余白で作る。 */

/* ── /guides/ のカード ── */
.gd-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:760px){.gd-cards{grid-template-columns:1fr;gap:11px}}
.gd-card{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:14px;
  background:var(--paper);overflow:hidden;transition:border-color .12s,transform .12s}
.gd-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.gd-kv{position:relative;display:block;height:104px;background:var(--sur2) center/cover no-repeat}
.gd-kv::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,24,29,0) 34%,rgba(22,24,29,.55) 100%)}
.gd-kv .gd-ic{position:absolute;left:12px;bottom:-16px;z-index:2;width:52px;height:52px;
  border-radius:13px;object-fit:cover;border:2.5px solid var(--paper);background:var(--sur2)}
.gd-kv .gd-tag{position:absolute;right:10px;top:10px;z-index:2;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;color:#fff;background:rgba(22,24,29,.72);border-radius:99px;padding:3px 9px}
.gd-bd{display:flex;flex-direction:column;gap:6px;padding:24px 14px 13px}
.gd-day{font-size:11px;color:var(--red);font-weight:700}
.gd-t{font-size:14.5px;font-weight:800;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gd-ex{font-size:12.5px;color:var(--ink2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gd-tgs{display:flex;gap:5px;flex-wrap:wrap}
.gd-tgs span{font-size:10.5px;color:var(--ink2);background:var(--sur);
  border-radius:99px;padding:2px 8px;white-space:nowrap}
.gd-ft{display:flex;align-items:center;gap:12px;margin-top:3px;padding-top:10px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.gd-n{display:flex;align-items:baseline;gap:5px}
.gd-n i{font-style:normal;font-size:10.5px;color:var(--ink3)}
.gd-n b{font-size:13px;font-weight:800}
.gd-go{margin-left:auto;font-size:12px;font-weight:800;color:var(--red);white-space:nowrap}
@media(max-width:400px){
  .gd-ft{gap:9px}
  .gd-go{margin-left:0;width:100%;padding-top:4px}
}

/* ── トップ: 攻略ガイドカードの更新日 ── */
.gcard .gc-day{display:block;font-size:10.5px;font-weight:700;color:var(--red);margin-bottom:2px}

/* ── トップ: 掲示板の新着 ── */
.hb-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:760px){.hb-list{grid-template-columns:1fr}}
.hb-i{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--paper);padding:10px 12px;transition:border-color .12s}
.hb-i:hover{border-color:var(--ink)}
.hb-i .ic{flex:none;width:34px;height:34px;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.hb-i .ic img{width:100%;height:100%;object-fit:cover}
.hb-i .ic .mk{font-size:14px;font-weight:800;color:#fff}
.hb-i .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hb-i .l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hb-i .l1 b{font-size:12.5px;font-weight:800}
.hb-i .kd{font-size:10px;color:var(--ink2);background:var(--sur);border-radius:99px;padding:1px 7px}
.hb-i .tm{font-size:10.5px;color:var(--ink3);margin-left:auto}
.hb-i .l2{font-size:12px;color:var(--ink2);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── トップ: みんなのベストショット ── */
/* v0.0.164: 画像が主役なので大きく出す。PC は最大4枚・SP は2枚 */
.bs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.bs-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
/* v0.0.161: コメントは画像に重ねず下に置く。画像は押すと拡大（ページ遷移しない） */
.bs-i{display:flex;flex-direction:column;border:1.5px solid var(--line);
  border-radius:12px;overflow:hidden;background:var(--paper)}
.bs-i:hover{border-color:var(--ink)}
.bs-im{display:block;width:100%;padding:0;background:var(--sur2);
  aspect-ratio:4/3;overflow:hidden;cursor:zoom-in}
.bs-im img{width:100%;height:100%;object-fit:cover}
.bs-c{display:flex;flex-direction:column;gap:4px;padding:11px 13px 13px}
.bs-c b{font-size:13.5px;font-weight:700;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bs-c .m{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.bs-c .m a{font-size:11.5px;font-weight:700;color:var(--red);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media(max-width:560px){
  .bs-c{padding:9px 10px 11px}
  .bs-c b{font-size:12.5px}
}
.bs-empty{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  border:1.5px dashed var(--line2);border-radius:14px;background:var(--sur);padding:26px 18px}
.bs-empty:hover{border-color:var(--ink)}
.bs-e1{font-size:14px;font-weight:800}
.bs-e2{font-size:12.5px;color:var(--ink2);line-height:1.7;max-width:36em}
.bs-e3{margin-top:5px;font-size:12.5px;font-weight:800;color:var(--red)}

/* v0.0.152: コード件数が上限に当たったときの注記。
   .csum .c3 は margin-left:auto で右端に寄るので、その手前に置く */
.csum .c4{font-size:11px;color:var(--ink3)}

/* ══ v0.0.154: 掲示板の返信 ════════════════════════════════
   .po2 .bd2 の中に入る新しい子要素。
   .bd2 に要素セレクタ混じりの汎用ルール（.bd2 p など）が無いか grep 済み。
   .bd2 p は本文用にあるので、返信の本文は .rep p として別に当てる。 */
/* PHP が改行とインデントを吐くので `.rep-w:empty` は当たらない。
   余白は行そのものに持たせて、返信が無いときは何も足さない */
.rep-w{display:flex;flex-direction:column;gap:0}
.rep{border-left:2px solid var(--line2);padding:8px 0 8px 11px;margin-top:8px}
.rep .l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rep .l1 .au{font-size:12px;font-weight:800}
.rep .l1 .tm{font-size:10.5px;color:var(--ink3)}
.po2 .bd2 .rep p{font-size:13px;line-height:1.75;margin-top:3px;color:var(--ink2)}
.rep.fresh{animation:mnRepIn .25s ease-out}
@keyframes mnRepIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.rep-open{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:12px;font-weight:700;color:var(--ink2);
  border:1.5px solid var(--line);border-radius:99px;padding:5px 13px;background:var(--paper)}
.rep-open:hover{border-color:var(--ink);color:var(--ink)}
.rep-open .n{font-size:11px;color:var(--red);font-weight:800}
@media(hover:none){.rep-open:hover{border-color:var(--line);color:var(--ink2)}}

.rep-form{display:flex;flex-direction:column;gap:7px;margin-top:9px;
  border:1.5px solid var(--line2);border-radius:11px;background:var(--sur);padding:10px}
.rep-form[hidden]{display:none}
.rep-form .rep-name,.rep-form .rep-body{font:inherit;font-size:13px;padding:8px 11px;
  border:1.5px solid var(--line2);border-radius:9px;background:#fff;width:100%}
.rep-form .rep-name{max-width:220px}
.rep-form .rep-body{resize:vertical;min-height:56px;line-height:1.7}
.rep-act{display:flex;gap:8px;justify-content:flex-end}
.rep-cancel{font-size:12.5px;font-weight:700;color:var(--ink3);padding:7px 12px}
.rep-send{font-size:12.5px;font-weight:800;color:#fff;background:var(--red);
  border-radius:9px;padding:7px 20px}
.rep-send:disabled{opacity:.5}

/* ══ v0.0.181: 掲示板の一覧は1カラム ══════════════════════
   v0.0.156 で PC を2列にしたが、返信が付くと左右で高さが揃わず、
   会話の流れも追いにくい。**掲示板は上から下に読むもの**なので1列に戻す。
   件数の打ち止めは画面幅によらず同じにする。 */
.plist .po2:nth-child(n+16){display:none}

/* v0.0.159: 上の罫線を外し、余白を詰める（掲示板の一覧と続けて読ませる） */
.bs-sec{margin-top:18px;padding-top:0}
/* v0.0.161: 節の見出しが小さすぎたので、ページ見出しに近い大きさにする */
.bs-sec .blk-h{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:2px solid var(--ink)}
.bs-sec .blk-h h2{font-size:23px;font-weight:800;letter-spacing:-.03em}
@media(max-width:600px){.bs-sec .blk-h h2{font-size:19px}}
.bs-sec .blk-h .en{font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.bs-lead{font-size:13px;line-height:1.85;color:var(--ink2);margin-bottom:16px;max-width:46em}
/* v0.0.321: 下マージンが無く、すぐ下の .shot-box（投稿フォーム）の枠と
   辺が接して線が二重に見えていた。画像が並ぶときの .bs-grid は
   margin-bottom:16px を持っているので、そちらに合わせる。 */
.bs-none{font-size:13px;color:var(--ink2);background:var(--sur);
  border:1.5px dashed var(--line2);border-radius:12px;padding:22px 18px;text-align:center;
  margin-bottom:16px}
.bs-sec .bs-grid{margin-bottom:16px}

/* ══ v0.0.157: 初心者ガイド / 用語集 / 記事内の関連・ランキング ══ */

/* ハブ: 最初に読む3つ */
.bg-top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.bg-top{grid-template-columns:1fr}}
.bg-t{display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--line);
  border-radius:13px;background:var(--paper);padding:15px 16px;transition:border-color .12s}
.bg-t:hover{border-color:var(--ink)}
.bg-t .no{width:24px;height:24px;border-radius:99px;background:var(--red-s);color:var(--red);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.bg-th{display:flex;align-items:center;gap:7px}
.bg-th .tag{font-size:10.5px;font-weight:700;color:var(--gk,var(--ink2));
  background:var(--gks,var(--sur));border-radius:99px;padding:3px 9px}
.bg-t b{font-size:14.5px;line-height:1.6}
.bg-t .d{font-size:12.5px;color:var(--ink2);line-height:1.75}

/* ハブ: 目的別 */
/* ══ v0.0.263: 初心者ガイドのハブ（/basics/）═══════════════════
   旧 .bg-groups（2列のカード囲み）は廃止。本数が偏るとカードの高さが
   揃わず、1グループに25本入ると縦長の柱になっていた。
   代わりに「帯見出し + 2列のリンク行」。本数が偏っても崩れない。
   クラス名は grep 済み（.bg-chips / .bg-band / .bg-rows / .bg-r / .k-a〜f）。 */

/* グループの色。意味づけは views/basics.php の $gmeta 側で決める */
.k-a{--gk:#6C5CE7;--gks:#EEEDFE}
.k-b{--gk:#0F6E56;--gks:#E1F5EE}
.k-c{--gk:#185FA5;--gks:#E6F1FB}
.k-d{--gk:#993C1D;--gks:#FAECE7}
.k-e{--gk:#854F0B;--gks:#FAEEDA}
.k-f{--gk:#A32D2D;--gks:#FCEBEB}

/* 絞り込みのチップ */
.bg-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.bg-chips button{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border:1.5px solid var(--line2);background:var(--paper);color:var(--ink);
  border-radius:99px;padding:7px 15px;line-height:1.2}
.bg-chips button .n{margin-left:6px;font-weight:400;color:var(--ink3)}
.bg-chips button:hover{border-color:var(--ink)}
.bg-chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.bg-chips button.on .n{color:rgba(255,255,255,.7)}

/* グループの帯 */
.bg-band{margin:0 0 26px}
.bg-band[hidden]{display:none}
.bg-bh{display:flex;align-items:center;gap:10px}
.bg-bh .ic{width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:var(--gks,var(--sur));position:relative}
.bg-bh .ic:after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:3px;
  background:var(--gk,var(--ink))}
.bg-bh .t{font-size:16px;font-weight:800;color:var(--ink)}
.bg-bh .n{font-size:11px;font-weight:700;color:var(--gk,var(--ink2));
  background:var(--gks,var(--sur));border-radius:99px;padding:3px 9px}
.bg-bd{font-size:12.5px;color:var(--ink2);margin:2px 0 10px 40px;line-height:1.6}

/* 記事の行。カードで囲まないので本数差で高さが崩れない */
.bg-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.bg-r{display:block;border-top:1px solid var(--line);padding:11px 2px;
  text-decoration:none;color:var(--ink)}
.bg-r .t{display:block;font-size:14px;font-weight:700;line-height:1.55}
.bg-r .d{display:block;font-size:11.5px;color:var(--ink3);line-height:1.6;margin-top:3px}
.bg-r:hover .t{color:var(--gk,var(--red))}
@media(max-width:760px){
  .bg-rows{grid-template-columns:1fr;gap:0}
  .bg-bd{margin-left:0}
}

/* 用語集 */
.gl-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
@media(max-width:760px){.gl-list{grid-template-columns:1fr}}
.gl-i{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--paper);padding:13px 15px}
.gl-i:hover{border-color:var(--ink)}
.gl-i b{font-size:13.5px}
.gl-i .d{font-size:12px;color:var(--ink2);line-height:1.7}

/* 記事内: 次に知りたいこと */
.mn-rel{margin:30px 0;border:1.5px solid var(--line);border-radius:14px;
  background:var(--sur);padding:16px}
.mn-rel-h{font-size:14px;font-weight:800;margin-bottom:11px}
.mn-rel-g{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:600px){.mn-rel-g{grid-template-columns:1fr}}
.mn-rel-i{display:flex;flex-direction:column;gap:3px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.mn-rel-i:hover{border-color:var(--ink)}
.mn-rel-i .g{font-size:10px;font-weight:700;color:var(--red)}
.mn-rel-i b{font-size:13px;line-height:1.55}
.mn-rel-i .d{font-size:11.5px;color:var(--ink3);line-height:1.65}

/* 記事内: 11位以降のランキング行 */
.mn-rl{border:1.5px solid var(--line);border-radius:14px;background:var(--paper);
  overflow:hidden;margin:22px 0}
.mn-rl-i{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-top:1px solid var(--line)}
.mn-rl-i:first-child{border-top:none}
.mn-rl-i:hover{background:var(--sur)}
.mn-rl-i[hidden]{display:none}
.mn-rl-i .no{flex:none;width:26px;text-align:right;font-size:13px;font-weight:800;color:var(--ink3)}
.mn-rl-i img{flex:none;width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--sur2)}
.mn-rl-i .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mn-rl-i .tx b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-rl-i .tx small{font-size:11px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-rl-i .nm{flex:none;display:flex;gap:14px}
.mn-rl-i .nm span{display:flex;flex-direction:column;align-items:flex-end}
.mn-rl-i .nm i{font-style:normal;font-size:10px;color:var(--ink3)}
.mn-rl-i .nm b{font-size:13px;font-weight:800}
@media(max-width:560px){
  .mn-rl-i{gap:9px;padding:10px 11px}
  .mn-rl-i img{width:34px;height:34px}
  .mn-rl-i .nm{gap:9px}
  .mn-rl-i .nm b{font-size:11.5px}
}
.mn-rl-more{display:block;width:100%;padding:13px;font-size:13px;font-weight:800;
  border-top:1.5px solid var(--line);background:var(--sur);color:var(--ink)}
.mn-rl-more:hover{background:var(--sur2)}

/* 公式ヘルプへの案内 */
.mn-official a{font-size:12.5px;font-weight:700;color:var(--red)}
.mn-official{margin:6px 0 14px}

/* ══ v0.0.159: ベストショットの投稿フォーム ══
   掲示板の投稿欄（.post-box）とは別物。ゲーム・一言・画像だけ。 */
.shot-box{border:1.5px solid var(--line2);border-radius:14px;background:var(--paper);
  overflow:hidden;margin-bottom:16px}
.shot-box .h{display:flex;align-items:center;gap:8px;padding:12px 16px;
  font-size:13.5px;font-weight:800;background:var(--sur);border-bottom:1px solid var(--line)}
.shot-box .b{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.shot-g{position:relative}
.shot-g input,.shot-cm{width:100%;font:inherit;font-size:13px;padding:10px 13px;
  border:1.5px solid var(--line2);border-radius:9px;background:#fff}
.shot-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.shot-note{font-size:11.5px;color:var(--ink3)}
.shot-send{margin-left:auto;font-size:13px;font-weight:800;color:#fff;background:var(--red);
  border-radius:9px;padding:9px 26px}
.shot-send:disabled{opacity:.5}
@media(max-width:480px){
  .shot-send{margin-left:0;width:100%}
}



/* v0.0.162: 弾かれた理由をサムネの下に読める形で出す（中に重ねると読めない） */
/* v0.0.173: 理由はサムネの下に置く。中に重ねると「載せられません」の
   バッジと重なって、どちらも読めなくなっていた */
.ip-th{position:relative}
.ip-th .ip-rs{position:static;display:block;margin-top:5px;padding:0 2px;
  font-size:11px;line-height:1.5;color:var(--bad);white-space:normal;
  background:none;max-width:150px;word-break:break-all}

/* ══ v0.0.169: SP で入力欄を押したときにページを拡大させない ══════
   iOS Safari は **font-size が 16px 未満の入力欄**にフォーカスすると
   ページを勝手にズームする。戻す手段が無く、ユーザーは崩れた画面のまま。
   これまで個別の欄を直していたが、新しい欄を足すたびに再発していた。
   **ここで全部まとめて止める。**個別の指定より後ろに置き、
   inline style にも勝つよう !important を付ける（inline は詳細度で勝てない）。
   新しい入力欄を足すときも、もうここを気にしなくてよい。 */
@media (max-width: 760px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ══ v0.0.175: 初心者ガイド・用語集の記事デザイン ══════════════
   本文は AI が出す h2 / p / ul の繰り返し。そのままだと単調なので、
   見出しに番号、目次カード、差し込み画像で読み進められる形にする。 */

/* 見出しに通し番号 */
.article .mn-bg{counter-reset:mn-sec}
/* 素の .article h2 は display:flex + 8px の四角。ここは番号バッジに差し替える。
   同じ ::before を上書きするので、width/height/border-radius を全部打ち直す。 */
.article .mn-bg h2{counter-increment:mn-sec;align-items:center;gap:12px;
  padding-top:14px;margin-top:46px}
.article .mn-bg h2::before{content:counter(mn-sec,decimal-leading-zero);
  width:34px;height:34px;border-radius:9px;transform:none;
  background:var(--red);color:#fff;font-family:'DM Mono',monospace;font-size:13px;
  font-weight:500;display:flex;align-items:center;justify-content:center}
@media(max-width:560px){
  .article .mn-bg h2{font-size:18px;gap:10px}
  .article .mn-bg h2::before{width:29px;height:29px;font-size:12px}
}

/* 目次カード */
.mn-toc{border:1.5px solid var(--line2);border-radius:14px;background:var(--sur);
  padding:16px 18px;margin:26px 0 8px}
.mn-toc-h{font-size:14px;font-weight:800;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.article .mn-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;
  counter-reset:none;padding-left:0}
@media(max-width:640px){.article .mn-toc ol{grid-template-columns:1fr}}
.article .mn-toc li{padding-left:0;margin:0;counter-increment:none}
.article .mn-toc li::before{display:none}
.mn-toc li a{display:flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  text-decoration:none;color:var(--ink);font-weight:700;font-size:13px}
.mn-toc li a:hover{border-color:var(--ink)}
.mn-toc li a .no{flex:none;width:20px;height:20px;border-radius:99px;
  background:var(--red-s);color:var(--red);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.mn-toc li a .tx{flex:1;min-width:0;line-height:1.5}

/* 見出し下の差し込み画像 */
.article figure.mn-gs{margin:18px 0 22px;text-align:center}
/* v0.0.184: **ここが原因だった。**figure の中の a を全部 display:block に
   していたので、figcaption のゲーム名リンクまで改行されて2行になっていた。
   直下の a（画像のリンク）だけに限定する。 */
.article figure.mn-gs > a{display:block;text-decoration:none}
.article figure.mn-gs img{width:72%;max-width:520px;border-radius:12px;
  border:1.5px solid var(--line);display:block;margin:0 auto}
.article figure.mn-gs figcaption{margin-top:7px;font-size:11.5px;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article figure.mn-gs figcaption a{display:inline;color:var(--ink3);font-weight:700}
@media(max-width:600px){.article figure.mn-gs img{width:100%}}

/* ══ v0.0.176: 公式ヘルプへの案内 ══════════════════════════════
   全部同じ文言のリンクを並べていたのをやめ、
   「どのページに行くのか」「そこに何が書いてあるのか」を出すカードにする。 */
.article p.mn-official{margin:16px 0 20px}
/* v0.0.186: 他の囲みと同じ作法（白面・1.5px・角丸12・左にキーカラー）に統一。
   下線ではなく右端の矢印で「外部に飛ぶ」ことを示す。 */
.mn-oflink{display:flex;flex-direction:column;gap:4px;
  border:1.5px solid var(--line2);border-left:5px solid var(--red);
  border-radius:12px;background:var(--paper);padding:13px 16px;
  text-decoration:none !important}
.mn-oflink:hover{border-color:var(--ink);border-left-color:var(--red);background:var(--sur)}
.mn-oflink .l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mn-oflink .l1 b{font-size:14.5px;font-weight:800;color:var(--ink);text-decoration:none}
.mn-oflink .l1::after{content:'→';margin-left:auto;font-family:'DM Mono',monospace;
  font-size:13px;color:var(--red);flex:none}
.mn-oflink .ex{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.04em;
  color:var(--ink3);border:1px solid var(--line2);border-radius:99px;padding:1px 8px}
.mn-oflink .l2{font-size:12.5px;color:var(--ink2);line-height:1.75}

/* v0.0.177: 運営が置いた話題の印。ユーザーの書きこみと見分けが付くように */
.seedbadge{flex:none;font-size:10px;font-weight:700;letter-spacing:.02em;
  color:var(--ink2);background:var(--sur2);border:1px solid var(--line2);
  border-radius:99px;padding:1px 8px;line-height:1.7}

/* v0.0.178: NEWBIES のスターター。誰が書いたか分かる形にする */
.nbic{flex:none;width:20px;height:20px;border-radius:99px;object-fit:cover;
  background:var(--sur2);border:1px solid var(--line)}

/* ══ v0.0.179: 返信は本文より一段下げる ══════════════════════
   同じ左端に並ぶと、どれが返事か分からない。 */
.po2 .bd2 .rep{margin-left:16px;padding-left:12px;border-left:2px solid var(--line2)}
.po2 .bd2 .rep[hidden]{display:none}
.rep-more{display:inline-flex;align-items:center;margin:2px 0 0 16px;
  font-size:12px;font-weight:700;color:var(--red);background:none;padding:4px 0}
.rep-more:hover{text-decoration:underline}

/* ══ v0.0.184: ゲーム詳細から攻略ガイドへのカード ══════════
   **クラス名は .gdlink。**v0.0.179 で `.gd-card` を使ったが、
   それは攻略一覧（/guides/）のカードが先に使っていた名前で、
   後から書いた指定が一覧を丸ごと壊していた。名前を分ける。
   形は「左3割に絵・右にテキスト」。押せることが分かるよう黒枠と影は残す。 */
.gdlink{display:flex;align-items:stretch;gap:0;width:100%;margin-top:18px;
  border:1.5px solid var(--ink);border-radius:14px;background:var(--paper);
  overflow:hidden;text-decoration:none;box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s,box-shadow .1s}
.gdlink:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}

/* v0.0.185: サムネの上下が切れていた。
   原因は img に直接 object-fit:cover を掛け、align-items:stretch で
   箱の高さ（＝文字の高さ）に引き伸ばしていたこと。16:9 の絵を
   横長すぎる箱に cover で入れるので上下が削られる。
   → 絵は「枠（.gdkv）＋中の img」に分け、img は 16:9 のまま置く。
     箱が余ったときは切らずに背景で埋める。 */
.gdlink .gdkv{flex:0 0 30%;max-width:30%;align-self:stretch;display:flex;
  align-items:center;justify-content:center;overflow:hidden;margin:0;
  background:var(--sur2);border-right:1.5px solid var(--ink)}
.gdlink .gdkv img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
/* v0.0.189: 中身は「GUIDE ＋ タイトル」が左上、「攻略記事を読む」は**右下**。
   PC / SP とも同じ形にする（横一列に並べる形はやめた）。 */
.gdlink .tx{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-start;gap:6px;padding:15px 17px}
.gdlink .tt{min-width:0;display:flex;flex-direction:column;gap:6px}
.gdlink .tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;
  color:var(--ink3);text-transform:uppercase}
.gdlink b{font-size:17px;font-weight:800;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* margin-top:auto で下へ、align-self:flex-end で右へ。中身が短くても右下に付く */
.gdlink .go{display:inline-flex;align-items:center;gap:6px;
  align-self:flex-end;margin-top:auto;padding-top:8px;
  font-size:13px;font-weight:800;color:var(--red);white-space:nowrap}
@media(max-width:560px){
  .gdlink .tx{padding:12px 13px;gap:4px}
  .gdlink .tt{gap:4px}
  .gdlink b{font-size:14.5px}
  .gdlink .go{font-size:12.5px;padding-top:6px}
}

/* v0.0.182: 評価シートの自由コメント欄 */
.rt-cm{width:100%;font:inherit;font-size:14px;line-height:1.8;padding:11px 13px;
  border:1.5px solid var(--line2);border-radius:10px;background:#fff;resize:vertical}
.rt-cm:focus{outline:none;border-color:var(--ink)}

/* v0.0.182: Hero のゲーム名の下に原題（小さく） */
.ghero .meta .og{font-size:11.5px;color:var(--ink3);letter-spacing:.01em;
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v0.0.182: みんなの声（評価に付いたコメント） */
.voices{display:grid;gap:12px;margin-top:16px}
.voice{border:1.5px solid var(--line);border-radius:12px;background:var(--paper);padding:13px 15px}
.voice .l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.voice .l1 .au{font-size:13px;font-weight:800}
.voice .l1 .sc{font-size:11px;color:var(--red);background:var(--red-s);
  border-radius:99px;padding:1px 9px}
.voice .l1 .mt{font-size:11px;color:var(--ink3)}
.voice p{font-size:14px;line-height:1.9;color:var(--ink2)}

/* v0.0.183: レビュー投稿フォームを撤去した跡の案内 */
.rv-cta{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2)}
.rv-cta .rv-gate-t{margin-bottom:10px}

/* ══ v0.0.184: 初心者ガイドの本文に、攻略記事の部品を流用する ══
   攻略記事で作った「結論の帯」「コツの箱」をそのまま使う。
   別々に作ると必ずズレるので、既存クラス（.gd-take / .gd-tips）に寄せる。 */
.article .mn-bg .gd-take{margin:14px 0 16px}
.article .mn-bg .gd-take b{font-size:14px}
.article .mn-bg .gd-tips{margin:18px 0}
/* v0.0.186: 記事側だけ黒丸（list-style:disc）に落としていたので、
   攻略記事と印が違って見えていた。ガイドと同じキーカラーの丸に揃える。 */
.article .mn-bg .gd-tips ul{display:grid;gap:9px;padding:0;margin:0}
.article .mn-bg .gd-tips ul li{font-size:13.5px;line-height:1.85;padding-left:19px;
  list-style:none;margin:0;position:relative}
.article .mn-bg .gd-tips ul li::before{display:block;content:'';position:absolute;
  left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.article .mn-bg p{margin-top:1em}

/* ══ v0.0.185: 「あなたの記録」の押した状態を、記録の種類ごとに色分け ══
   これまでは4つとも同じ黄（下バー）で、何を押したのか色から分からなかった。
   使う色は既存の変数だけ（新しい色は増やさない）:
     遊びたい=近黒 / プレイ中=キーカラー / プレイ済み=緑（完了） / お気に入り=金

   **SP で押すと白く消えていたバグもここで直す。**
   真因は 753 行目の `.ulog .act{background:#fff}`。
   `.act[aria-pressed="true"]`（0,0,2,0）と同じ強さで、しかも後ろにあるため
   背景だけ白に戻り、文字色は白のまま＝白地に白文字になっていた。
   ここは `.acts .act[...][...]`（0,0,4,0）で確実に勝たせる。 */
.acts .act[aria-pressed="true"],
#bottom .bt-log .bl[aria-pressed="true"]{color:#fff}
.acts .act[data-act="want"][aria-pressed="true"],
#bottom .bt-log .bl[data-act="want"][aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:#fff}
.acts .act[data-act="playing"][aria-pressed="true"],
#bottom .bt-log .bl[data-act="playing"][aria-pressed="true"]{
  background:var(--red);border-color:var(--red);color:#fff}
.acts .act[data-act="played"][aria-pressed="true"],
#bottom .bt-log .bl[data-act="played"][aria-pressed="true"]{
  background:var(--ok);border-color:var(--ok);color:#fff}
.acts .act[data-act="fav"][aria-pressed="true"],
#bottom .bt-log .bl[data-act="fav"][aria-pressed="true"]{
  background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* 件数の小さい数字と線画アイコンは、その面の文字色に合わせる */
.acts .act[aria-pressed="true"] .c{color:rgba(255,255,255,.62)}
.acts .act[data-act="fav"][aria-pressed="true"] .c{color:rgba(22,24,29,.55)}
#bottom .bt-log .bl[aria-pressed="true"] .ico{stroke:currentColor}

/* ══ v0.0.207: 記事下バーのボタンの文字がはみ出していた ══════════
   真因は `.bt-post .go` に**左右の余白が無い**こと。
   幅は min-width（268px）任せで、ラベルが長いと文字が箱の外へ出て
   切れて見えていた（「わからないところを掲示板で聞いてみる」で発生）。
   → 文字ぶんの余白を持たせ、狭い画面では字と余白を段階的に詰める。
   詰めきれない幅では**数値（高評価率・現在人数）を先に畳む**。
   数値は本文のカードにも出ているが、ボタンは押せないと意味がないため。 */
#bottom .bt-post .go{padding:0 22px;white-space:nowrap;text-align:center;
  font-size:14.5px;line-height:1.25;min-width:0}

/* v0.0.210: **レイアウトには触らない。**
   v0.0.207 で「ボタンの文字を収める」ために `.bp-g` を伸ばし、
   v0.0.209 で左寄せにしたが、この下バーは投稿記事と共通の部品なので
   記事側の見た目まで変えてしまった。指示は文言の変更だけだった。
   → 並び（中央寄せ・v0.0.116 のまま）は元に戻し、
     ここで足すのは**ボタンの余白と字の詰め方だけ**にする。 */
@media(max-width:1180px){
  #bottom .bt-post .go{font-size:13.5px;padding:0 16px}
  #bottom .bp-st span{min-width:0;padding:5px 9px}
  #bottom .bp-st b{font-size:14px}
}
@media(max-width:980px){
  #bottom .bt-post .go{font-size:13px;padding:0 13px}
  #bottom .bp-st{display:none}
}
@media(max-width:760px){
  /* SP は横幅いっぱいなので、切るより折り返したほうが読める */
  #bottom .bt-post .go{white-space:normal;font-size:14px;padding:0 12px;line-height:1.35}
}


/* ══ v0.0.213: コードページの情報量を上げる ══════════════════
   ・確認日を見出しの直下に大きく出す（鮮度が信頼の核）
   ・要確認（外部サイト由来でまだ確認していない）を別枠で正直に出す
   クラス名は grep して未使用を確認済み（.cfresh / .cpend / .pendb / .chow-g）。
   囲みの作法（v0.0.186）に合わせる: 1.5px 罫＋角丸12 / 押し出し影は押せる部品だけ。 */
.cfresh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border:1.5px solid var(--line2);border-radius:12px;background:var(--paper);
  padding:12px 16px;margin:0 0 18px}
.cfresh .cf-l{font-size:11.5px;font-weight:700;color:var(--ink2);letter-spacing:.04em}
.cfresh .cf-d{font-size:19px;font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cfresh .cf-n{font-size:11.5px;color:var(--ink3);margin-left:auto}
@media(max-width:560px){
  .cfresh{padding:11px 13px;gap:8px}
  .cfresh .cf-d{font-size:17px}
  .cfresh .cf-n{margin-left:0;flex-basis:100%}
}

/* ゲームごとの入力手順（汎用文のときは既存の ol がそのまま出る） */
.chow-g{margin:0;padding-left:0;list-style:none;counter-reset:chowg}
.chow-g li{counter-increment:chowg;position:relative;padding:8px 0 8px 34px;
  font-size:13.5px;line-height:1.85;border-bottom:1px solid var(--line)}
.chow-g li:last-child{border-bottom:0}
.chow-g li::before{content:counter(chowg);position:absolute;left:0;top:9px;
  width:23px;height:23px;border-radius:7px;background:var(--ink);color:#fff;
  font-family:'DM Mono',monospace;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}

/* 確認まち */
.cpend{border:1.5px solid var(--line2);border-radius:12px;background:var(--sur);
  padding:12px 15px;margin-top:14px}
.cpend>summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:800;
  display:flex;align-items:center;gap:8px}
.cpend>summary::-webkit-details-marker{display:none}
.cpend>summary .chev{margin-left:auto;font-family:'DM Mono',monospace;
  font-size:14px;font-weight:800;color:var(--ink3)}
.cpend[open]>summary .chev::before{content:"−"}
.cpend:not([open])>summary .chev::before{content:"+"}
.cpend-n{font-size:12px;color:var(--ink2);line-height:1.9;margin:10px 0 6px}
.cpend .crow{background:var(--paper)}
.pendb{flex:none;font-size:10px;font-weight:800;color:#8a6d1a;background:var(--gold-s);
  border:1px solid #F0DFAE;border-radius:99px;padding:2px 9px;letter-spacing:.04em}


/* ══ v0.0.214: 弾かれた画像の理由が読めない問題 ══════════════════
   .ip-rs は v0.0.173 で position:static にしてサムネの下に出した。
   ところが「載せられません」のバッジ（.ip-st）は .ip-th に対する
   absolute の bottom:0 のままなので、**箱が縦に伸びた分だけ下がり、
   理由の文字の上に重なっていた**（実機で image_limit_reached が
   バッジと重なって両方読めなかった）。
   理由を出しているときはバッジを出さない。同じことを2回言う必要もない。
   幅も 96px に対して 150px を指定していたので、右へはみ出していた。 */
.ip-th.ng .ip-st{display:none}
.ip-th .ip-rs{max-width:100%;width:100%;word-break:break-word}
@media(min-width:561px){
  .ip-th.ng{width:150px}
}


/* ══ v0.0.216 ═══════════════════════════════════════════════════
   ① 確認日ボックスの上が詰まりすぎ（見出しにくっついていた）
   ② コードページ SP のファーストビュー＝1枚目のサムネを大きく
   ③ コード行をトップの新着コードと同じ見た目に（.cplist の中だけ）
   ④ シェアは1タップでアプリが開く形に
   ⑤ ゲーム詳細 SP のファーストビューにキービジュアル
   クラス名は grep して未使用を確認済み（.cplist / .gh-kv / .cs-b / .cs-l / .nsh）。 */

/* ① 見出しとの間を空ける */
.cfresh{margin:22px 0 24px}
@media(max-width:560px){ .cfresh{margin:16px 0 18px} }

/* ② サブページのヒーロー: SP は1枚目を大きく、残りを3列で下に */
@media(max-width:760px){
  .ghero-th{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
    overflow:visible;margin-top:14px}
  .ghero-th img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
    border-radius:10px;flex:initial}
  .ghero-th img:first-child{grid-column:1/-1;border-radius:14px}
}

/* ③ コード行をトップのクーポンと同じ見た目に（コードページの中だけ） */
.cplist .crow{position:relative;padding:16px 18px}
.cplist .crow:before,.cplist .crow:after{content:"";position:absolute;top:50%;
  width:16px;height:16px;border-radius:50%;background:var(--paper);
  border:1.7px dashed var(--ink);margin-top:-8px}
.cplist .crow:before{left:-9px;clip-path:inset(0 0 0 50%)}
.cplist .crow:after{right:-9px;clip-path:inset(0 50% 0 0)}
.cplist .crow .gic{width:44px;height:44px;border-radius:10px}
.cplist .crow .cc{font-size:19px;letter-spacing:.02em}
.cplist .crow .copy{border:1.7px solid var(--ink);background:var(--ink);color:#fff;
  border-radius:10px;padding:9px 15px;font-size:12.5px;font-weight:800}
.cplist .crow .copy:active{transform:scale(.94)}
@media(max-width:560px){
  .cplist .crow{padding:14px 15px}
  .cplist .crow .cc{font-size:17px}
  .cplist .crow .gic{width:38px;height:38px}
}

/* ④ シェア: トグルをやめて横1列。押した瞬間にアプリが開く */
.cshare{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.cshare .cs-l{font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.04em}
.cs-b{font:inherit;font-size:11.5px;font-weight:800;line-height:1;cursor:pointer;
  text-decoration:none;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line2);border-radius:99px;padding:8px 14px;
  display:inline-flex;align-items:center}
.cs-b:hover{border-color:var(--ink)}
.cs-b:active{transform:scale(.95)}
.cs-b.x{background:#141414;border-color:#141414;color:#fff}
.cs-b.ln{background:#06C755;border-color:#06C755;color:#fff}
.cs-b[hidden]{display:none}

/* ⑤ ゲーム詳細: SP だけキービジュアルを出す */
.gh-kv{display:none}
@media(max-width:760px){
  .gh-kv{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
    border-radius:14px;border:1.5px solid var(--line);margin:0 0 14px}
}


/* ══ v0.0.217 ═══════════════════════════════════════════════════
   ・シェアのコピーが .cp（トップの新着コードカード）と**クラス名が衝突**して
     破線とノッチが乗っていた → .cs-cp に改名して普通の丸枠に
   ・コード詳細のファーストビュー: SP は**画像を先頭**に（ロブ郎と同じ並び）
   ・ジャンルは押せる（説明欄の下）
   ・攻略ガイドのヒーローにもキービジュアル
   クラス名は grep して未使用を確認済み（.cs-cp / .ghero-kv）。 */

/* シェアのコピー: 普通の丸枠 */
.cs-b.cs-cp{background:var(--paper);border:1.5px solid var(--line2);color:var(--ink);
  border-radius:99px;padding:8px 16px}
.cs-b.cs-cp:hover{border-color:var(--ink)}

/* コード詳細 SP: 画像を先頭に出す */
@media(max-width:760px){
  .ghero{display:flex;flex-direction:column}
  .ghero-th{order:-1;margin:0 0 14px}
  .ghero-in{order:0}
}

/* ジャンル: 押せるチップ */
.gh-tags a{font-size:12px;padding:3px 10px;border-radius:6px;background:var(--sur);
  color:var(--ink2);text-decoration:none;border:1px solid transparent}
.gh-tags a:hover{border-color:var(--ink);color:var(--ink)}
.gh-body .gh-tags{margin-top:14px}

/* 攻略ガイドのヒーローのキービジュアル（PC でも出す） */
.ghero-kv{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:14px;border:1.5px solid var(--line);margin:14px 0 0}


/* ══ v0.0.218: コードカードをコンパクトに ═══════════════════════
   直したこと
   ・確認日と件数を1つの箱にまとめた（箱が2つ続いていた）
   ・手順はコードの後ろへ（PHP 側で移動）
   ・**注意書きが手順より大きかった**ので、手順 > 注意書き の順に直した
   ・カードの並びを「印 → コード → 報酬 → 区切り → 使えた？」に。
     ゲームのアイコンはこのページでは全部同じなので出さない（場所を食うだけ）
   .cplist の中だけ。ゲーム詳細・攻略ガイド・全体一覧のコード行は触らない。 */

.csum .c0{font-size:11.5px;color:var(--ink3);font-weight:700}
.csum .c0 b{font-size:15px;margin-left:6px}

/* 手順のほうを大きく、注意書きは小さく */
.chow ol li{font-size:13.5px;line-height:1.8}
.chow .cau,.chow-g + .cau{font-size:11.5px;line-height:1.75;color:var(--ink3);margin-top:12px}

/* カード本体 */
.cplist .crow{padding:12px 14px}
.cplist .crow .gic{display:none}
.cplist .crow .l1{flex-wrap:wrap;gap:8px;align-items:center}
.cplist .crow .newb{order:-1;flex-basis:100%;width:max-content}
.cplist .crow .cc{font-size:18px;flex:1 1 auto;min-width:0;max-width:none}
.cplist .crow .copy{flex:none;margin-left:auto;border:1.5px solid var(--line2);
  background:var(--paper);color:var(--ink);border-radius:10px;
  padding:8px 14px;font-size:12px;font-weight:800}
.cplist .crow .copy:hover{border-color:var(--ink);background:var(--ink);color:#fff}
/* 報酬はピルで1行下に */
.cplist .crow .rw{flex-basis:100%;flex-grow:0;font-size:12px;color:var(--ink2);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;
  width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cplist .crow .rw:empty{display:none}
.cplist .crow .rw-sp{display:none}
/* 使えた？ */
.cplist .crow .l2{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line2);
  gap:8px}
.cplist .crow .l2 .q{flex-basis:100%;font-size:12px;font-weight:800;color:var(--ink2)}
.cplist .crow .vt2{flex:1 1 0;min-width:120px;justify-content:center;padding:10px 12px;
  font-size:12.5px}
.cplist .crow .rate2{flex-basis:100%;margin-left:0}
.cplist .cshare{margin-top:9px}
@media(max-width:560px){
  .cplist .crow{padding:11px 12px}
  .cplist .crow .cc{font-size:16.5px}
  .cplist .crow .vt2{min-width:0}
}


/* ══ v0.0.219 ═══════════════════════════════════════════════════
   ・**破線カードの横に出ていた半円を消した。**（.cp / .cplist .crow の
     ::before / ::after で作っていた「切り欠き」。線が飛び出して見える）
   ・確認日と件数の箱を、折り返さず並ぶ形に
   ・コピーボタンを目立たせ、アイコンと文字の縦ズレを直す
   ・ヒーローの作者・人数・評価率を箱に分けて並べる
   クラス名は grep 済み（.ghero-st）。 */

/* 半円の切り欠きを撤去 */
.cp:before,.cp:after,
.cplist .crow:before,.cplist .crow:after{content:none}

/* 確認日と件数: 折り返さず等分に並べる */
.csum{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:0;align-items:stretch;padding:0}
.csum > span{display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:13px 12px;text-align:center;border-left:1px solid var(--line);
  font-size:10.5px;color:var(--ink3);font-weight:700;letter-spacing:.02em}
.csum > span:first-child{border-left:0}
.csum > span b{display:block;font-size:16px;margin:0}
.csum .c0 b{font-size:14.5px;margin-left:0}
.csum .c3{margin-left:0}
@media(max-width:560px){
  .csum > span{padding:11px 6px;font-size:10px}
  .csum > span b{font-size:14px}
  .csum .c0 b{font-size:12.5px}
}

/* コピー: 目立たせる。アイコンと文字の高さをそろえる */
.cplist .crow .copy{display:inline-flex;align-items:center;gap:6px;line-height:1;
  border:1.7px solid var(--red);background:var(--red);color:#fff;
  border-radius:10px;padding:9px 16px;font-size:12.5px;font-weight:800;
  box-shadow:0 3px 0 var(--red-d)}
.cplist .crow .copy .ico{stroke:currentColor;fill:none;width:13px;height:13px;flex:none}
.cplist .crow .copy:hover{background:var(--red-d);border-color:var(--red-d);
  transform:translateY(-1px);box-shadow:0 4px 0 var(--red-d)}
.cplist .crow .copy:active{transform:translateY(2px);box-shadow:0 1px 0 var(--red-d)}

/* ヒーロー: 作者・人数・評価率の箱 */
.ghero-st{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:8px;margin-top:12px}
.ghero-st > div{border:1.5px solid var(--line2);border-radius:10px;
  background:var(--paper);padding:9px 10px;min-width:0}
.ghero-st span{display:block;font-size:10px;color:var(--ink3);font-weight:700;
  letter-spacing:.03em;margin-bottom:3px}
.ghero-st b{display:block;font-size:14px;font-weight:900;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  .ghero-st{gap:6px;margin-top:10px}
  .ghero-st > div{padding:8px}
  .ghero-st b{font-size:12.5px}
}


/* ══ v0.0.220 ═══════════════════════════════════════════════════
   ① 「使えた！／使えなかった」に印を付ける（丸の中に ✓ と ×）。
      押したら色で分かるようにする（使えた＝緑・使えなかった＝赤）。
      印は擬似要素で作るので、HTML と JS は触らない。
   ② 攻略ガイドへの導線の絵に、上下の余白（灰色の帯）が出ていた。
      v0.0.185 で「箱が余ったら切らずに背景で埋める」と書いたが、
      **実際には余白が見えるだけで、埋めた意味が無かった。**
      絵を箱いっぱいに広げて、はみ出す分は切る。 */

/* ① 投票ボタン */
.cplist .crow .vt2{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;border:1.5px solid var(--line2);background:var(--paper);
  border-radius:10px;font-weight:800;color:var(--ink2)}
.cplist .crow .vt2::before{content:"";flex:none;width:19px;height:19px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;line-height:1;
  background:var(--sur);color:var(--ink3);border:1.5px solid var(--line2)}
.cplist .crow .vt2[data-mn-vote="1"]::before{content:"✓"}
.cplist .crow .vt2[data-mn-vote="0"]::before{content:"×"}
.cplist .crow .vt2[data-mn-vote="1"]:hover{border-color:var(--ok);color:var(--ok)}
.cplist .crow .vt2[data-mn-vote="0"]:hover{border-color:var(--bad);color:var(--bad)}
/* 押したあと */
.cplist .crow .vt2[data-mn-vote="1"][aria-pressed="true"]{background:var(--ok);
  border-color:var(--ok);color:#fff}
.cplist .crow .vt2[data-mn-vote="0"][aria-pressed="true"]{background:var(--bad);
  border-color:var(--bad);color:#fff}
.cplist .crow .vt2[aria-pressed="true"]::before{background:rgba(255,255,255,.28);
  border-color:transparent;color:#fff}

/* ② 攻略導線の絵を箱いっぱいに */
.gdlink .gdkv{background:none}
.gdlink .gdkv img{height:100%;aspect-ratio:auto;object-fit:cover}


/* ══ v0.0.221 ═══════════════════════════════════════════════════
   ① 件数が「4」と「件」で改行していた。
      v0.0.219 で箱を縦積み（flex-direction:column）にしたため、
      **b が block になり、ラベル・数字・単位が3行に割れていた。**
      横1行に戻す。
   ② 作者はタイトルの下に小さく（箱から出した）。
   ③ 「このコードは使えましたか？」の上下に線が2本出ていた。
      .l2 の border-top と、共通クラス .q の border-bottom。
      **ボタンが箱で囲われているので、線はどちらも要らない。**
      余白も詰める。 */

/* ① 件数を1行に */
.csum > span{display:block;text-align:center;padding:12px 10px;line-height:1.7}
.csum > span b{display:inline-block;font-size:16px;margin:0 3px;vertical-align:baseline}
.csum .c0 b{display:block;font-size:13.5px;margin:2px 0 0}
@media(max-width:560px){
  .csum > span{padding:10px 6px}
  .csum > span b{font-size:14px}
  .csum .c0 b{font-size:12px}
}

/* ② 作者 */
.ghero-cr{font-size:11.5px;color:var(--ink3);margin-top:6px}
.ghero-cr b{font-weight:800;color:var(--ink2);margin-left:4px}

/* ③ 線を消して余白を詰める */
.cplist .crow .l2{margin-top:9px;padding-top:0;border-top:0}
.cplist .crow .l2 .q{padding:0;border-bottom:0;margin-bottom:7px}
.cplist .crow .vt2{padding:9px 12px}


/* ══ v0.0.221b: 確認日と件数の並び ═══════════════════════════════
   1行目「チェック日：2026年8月20日」
   2行目「有効 4件 ｜ 期限切れ 0件」
   3列に割るのをやめ、上下2段にする。区切りは縦棒。 */
.csum{display:block;padding:13px 16px}
.csum > span{display:inline;padding:0;border:0;text-align:left;font-size:12px}
.csum > span b{display:inline;font-size:15px;margin:0 2px}
.csum .c0{display:block;color:var(--ink3);font-weight:700;margin-bottom:5px}
.csum .c0 b{display:inline;font-size:15px;color:var(--ink);margin:0}
.csum .c1{font-weight:800;color:var(--ink)}
.csum .c2,.csum .c4{color:var(--ink2)}
.csum .c2::before,.csum .c4::before{content:"｜";color:var(--line2);margin:0 6px 0 4px;
  font-weight:400}
@media(max-width:560px){
  .csum{padding:12px 14px}
  .csum > span{font-size:11.5px}
  .csum > span b,.csum .c0 b{font-size:14px}
}


/* ══ v0.0.223: コードのタブ ═════════════════════════════════════
   有効 / 期限切れ / 要確認 を切り替える。位置は「チェック日」の箱の下。
   押せる部品なので、既存の押し出し影の作法（v0.0.63）にそろえる。
   クラス名は grep 済み（.ctabs）。 */
.ctabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.ctabs button{font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  color:var(--ink);background:var(--paper);border:1.7px solid var(--ink);
  border-radius:99px;padding:9px 16px;line-height:1;
  box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.ctabs button b{font-size:14px;margin:0 2px}
.ctabs button:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.ctabs button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ctabs button.on{background:var(--ink);color:#fff}
.cexp[hidden],.cpend[hidden],.cplist[hidden]{display:none}
.cpend{border:1.5px solid var(--line2);border-radius:12px;background:var(--sur);
  padding:14px 15px}
@media(max-width:560px){
  .ctabs{gap:6px;margin-bottom:12px}
  .ctabs button{font-size:11.5px;padding:8px 13px}
  .ctabs button b{font-size:13px}
}


/* ══ v0.0.224 ═══════════════════════════════════════════════════
   ① **私が SP の指示を PC にも当ててしまっていた。**
      ヒーローのアイコン削除・統計の箱化・作者の移動は**SP だけ**にする。
      PC は v0.0.219 より前の見た目（アイコン＋1行）に戻す。
   ② コードページの SP はページ内メニュー（select）を出さない。
   ③ 「使えた！／使えなかった」が PC で横に伸びすぎていた。幅を止める。 */

/* ① PC は元の形 / SP だけ新しい形 */
@media(min-width:761px){
  .ghero-cr,.ghero-st{display:none}
}
@media(max-width:760px){
  .ghero-in > .ic{display:none}
  .ghero .meta .o{display:none}
}

/* ② コードページの SP はメニューを出さない */
@media(max-width:760px){
  .ghero-codes .ghero-sel{display:none}
}

/* ③ 投票ボタンの幅を止める（PC で画面半分まで伸びていた） */
.cplist .crow .vt2{flex:0 1 auto;min-width:150px;max-width:220px}
@media(max-width:560px){
  .cplist .crow .vt2{flex:1 1 0;min-width:0;max-width:none}
}


/* ══ v0.0.225 ═══════════════════════════════════════════════════
   攻略ガイドのヒーローに入れたキービジュアル（v0.0.217）を **SP だけ**にする。
   「ファーストビューが弱い」という指摘は SP の話だったのに、
   PC でも出すように書いたのは私の判断ミス。PC は元のまま。 */
.ghero-kv{display:none}
@media(max-width:760px){
  .ghero-kv{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
    border-radius:14px;border:1.5px solid var(--line);margin:14px 0 0}
}


/* ══ v0.0.226: 攻略ガイドの SP をコードページと同じ流れにする ══════
   コードページ SP は「画像 → タイトル → 作者 → 数字 → ボタン」の順。
   攻略ガイドは画像がタイトルより下に出ていた。
   **CSS の order だけで先頭に出す。HTML は触らない。**
   PC は v0.0.225 のまま（画像を出さない）。 */
@media(max-width:760px){
  .ghero-kv{order:-1;margin:0 0 14px}
}


/* ══ v0.0.229: PC は質問とボタンを1行に ═══════════════════════════
   「このコードは使えましたか？」を .q に flex-basis:100% で置いていたため、
   PC でも質問だけで1行を使い、ボタンが下に落ちていた。
   **PC だけ**横1列にする（761px 以上）。SP は縦積みのまま。 */
@media(min-width:761px){
  .cplist .crow .l2{flex-wrap:nowrap;align-items:center}
  .cplist .crow .l2 .q{flex:0 0 auto;margin-bottom:0;margin-right:8px;white-space:nowrap}
}


/* ══ v0.0.232: ジャンル別ランキング /genre/{slug}/ ═══════════════
   順位・サムネ・タイトル・タグ・数字4つを1行のカードに並べる。
   囲みの作法（v0.0.186）に合わせる: 1.5px 罫＋角丸12 / 面は白 /
   押し出し影は押せる部品だけ。
   クラス名は grep して未使用を確認済み
   （.grank / .gr-no / .gr-card / .gr-th / .gr-tx / .gr-t / .gr-og /
     .gr-tags / .gr-st / .gr-meta / .gr-chip）。 */

.gr-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}
.gr-chip{font-size:11.5px;font-weight:800;color:var(--ink2);background:var(--paper);
  border:1.5px solid var(--line2);border-radius:99px;padding:7px 14px}

.grank{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.grank-i{display:flex;align-items:stretch;gap:10px}
.gr-no{flex:none;width:44px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;color:var(--ink3);
  border:1.5px solid var(--line2);border-radius:12px;background:var(--paper)}
.grank-i:nth-child(1) .gr-no{color:#fff;background:var(--ink);border-color:var(--ink)}
.grank-i:nth-child(2) .gr-no,.grank-i:nth-child(3) .gr-no{color:var(--ink);border-color:var(--ink)}

.gr-card{flex:1;min-width:0;display:flex;gap:14px;align-items:flex-start;
  border:1.5px solid var(--line2);border-radius:12px;background:var(--paper);padding:14px}
.gr-th{flex:none;width:104px;height:104px;border-radius:12px;overflow:hidden;
  background:var(--sur);display:block}
.gr-th img{width:100%;height:100%;object-fit:cover;display:block}
.gr-tx{flex:1;min-width:0}
.gr-t{display:block;font-size:17px;font-weight:800;color:var(--ink);text-decoration:none;
  line-height:1.5}
.gr-t:hover{text-decoration:underline}
.gr-og{font-size:11.5px;color:var(--ink3);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gr-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.gr-tags a,.gr-tags span{font-size:11.5px;padding:3px 10px;border-radius:6px;
  background:var(--sur);color:var(--ink2);text-decoration:none}
.gr-tags a:hover{background:var(--ink);color:#fff}
.gr-st{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}
.gr-st > div{border:1.5px solid var(--line);border-radius:10px;padding:7px 9px;min-width:0}
.gr-st span{display:block;font-size:10px;color:var(--ink3);font-weight:700;margin-bottom:2px}
.gr-st b{display:block;font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .grank-i{gap:8px}
  .gr-no{width:34px;font-size:16px}
  .gr-card{gap:11px;padding:11px}
  .gr-th{width:76px;height:76px}
  .gr-t{font-size:14.5px}
  .gr-st{grid-template-columns:repeat(2,1fr);gap:6px}
  .gr-st b{font-size:13px}
}


/* ══ v0.0.234: NEW バッジ ══════════════════════════════════════
   v0.0.218 で `flex-basis:100%` を付けたせいで、**行いっぱいに伸びた帯**に
   なっていた（幅を max-content にしても flex-basis のほうが効く）。
   1行使うのをやめ、コードと同じ行の先頭に小さく戻す。
   色は**赤**（キーカラーは紫なので var(--red) は使わない）。
   光が流れるアニメーションで新着らしさを出す。
   動きを減らす設定の端末では光らせない。
   キーフレーム名は grep して未使用を確認済み（mnshine）。 */
.cplist .crow .newb{order:-1;flex:0 0 auto;flex-basis:auto;width:auto;
  align-self:center;position:relative;overflow:hidden;
  background:linear-gradient(100deg,#E2231A,#FF6A3D 48%,#E2231A);
  color:#fff;border:0;border-radius:99px;padding:4px 11px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;line-height:1;
  box-shadow:0 2px 0 #9E1810}
.cplist .crow .newb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.8) 50%,transparent 78%);
  transform:translateX(-130%);animation:mnshine 2.6s ease-in-out infinite}
@keyframes mnshine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion: reduce){
  .cplist .crow .newb::after{animation:none;opacity:0}
}


/* ══ v0.0.235: ジャンル別ランキングの SP を詰める ═══════════════
   直したところ
   ・順位が**縦に長い黒い棒**になっていた（高さを揃えていたため）。
     小さい四角にして左上に置く。4位以降は黒くしない。
   ・カードの余白・サムネ・文字が大きすぎて、1件で画面を占領していた。
   ・数字4つの箱が白＋罫線で重く見えたので、面（--sur）にして罫線を外す。
   PC（761px 以上）は触っていない。 */
@media(max-width:760px){
  .grank{gap:10px}
  .grank-i{gap:8px;align-items:flex-start}
  .gr-no{flex:none;width:26px;height:26px;margin-top:11px;border:0;border-radius:8px;
    background:var(--sur);color:var(--ink2);font-size:13px;font-weight:900}
  .grank-i:nth-child(1) .gr-no,
  .grank-i:nth-child(2) .gr-no,
  .grank-i:nth-child(3) .gr-no{background:var(--ink);color:#fff;border-color:var(--ink)}
  .gr-card{padding:10px;gap:10px;align-items:flex-start}
  .gr-th{width:68px;height:68px;border-radius:10px}
  .gr-t{font-size:14.5px;line-height:1.45}
  .gr-og{font-size:10.5px;margin-top:1px}
  .gr-tags{gap:4px;margin-top:6px}
  .gr-tags a,.gr-tags span{font-size:10.5px;padding:2px 8px;border-radius:5px}
  .gr-st{grid-template-columns:repeat(2,1fr);gap:5px;margin-top:8px}
  .gr-st > div{border:0;background:var(--sur);border-radius:8px;padding:6px 9px}
  .gr-st span{font-size:9.5px;margin-bottom:1px}
  .gr-st b{font-size:13.5px}
  .gr-meta{gap:6px;margin:12px 0 16px}
  .gr-chip{font-size:11px;padding:6px 12px}
}


/* ══ v0.0.236: ランキング行の1行キャッチ ════════════════════════
   タイトルの下に、そのゲームがどんなゲームかを1文で。
   ロブ郎の「正体を見抜いて生き残れ」に当たる行。
   材料はゲーム編集ノートの紹介文の1文目（DB も Function も足していない）。
   クラス名は grep 済み（.gr-cat）。 */
.gr-cat{font-size:13px;font-weight:800;color:var(--red);line-height:1.5;margin-top:3px}
@media(max-width:760px){
  .gr-cat{font-size:12px;margin-top:2px}
}


/* ══ v0.0.237: ランキング行の並びを変える ═══════════════════════
   タイトル（＋キャッチ＋原題）を**カードの一番上に全幅**で。
   その下に「サムネ ｜ タグ・数字」を横に並べる。
   .gr-card はこれまで flex の横並びだったので block に戻し、
   横並びは中の .gr-body が受け持つ。 */
.gr-card{display:block;padding:14px}
.gr-head{margin-bottom:10px}
.gr-body{display:flex;gap:14px;align-items:flex-start}
.gr-body .gr-tx{flex:1;min-width:0}
@media(max-width:760px){
  .gr-card{padding:11px}
  .gr-head{margin-bottom:8px}
  .gr-body{gap:10px}
}


/* ══ v0.0.238: ランキング行の並びと色 ═══════════════════════════
   並び: 「アイコン ｜ タイトル」→ ジャンル → 数字の箱
   色  : ジャンルは面（--sur）、**数字の箱は白**。同じ色で並べない。
   クラス名は grep 済み（.gr-ttl）。 */
.gr-head{display:flex;gap:12px;align-items:center;margin-bottom:0}
.gr-ttl{flex:1;min-width:0}
.gr-body{display:block;margin-top:10px}
.gr-tags{margin-top:0}
.gr-st{margin-top:10px}
.gr-st > div{background:#fff;border:1.5px solid var(--line2);border-radius:10px}
@media(max-width:760px){
  .gr-head{gap:10px}
  .gr-body{margin-top:8px}
  .gr-st{margin-top:8px;grid-template-columns:repeat(2,1fr)}
  .gr-st > div{background:#fff;border:1.5px solid var(--line2);padding:7px 9px}
}


/* ══ v0.0.240: SP 下部メニューのアイコンに色（案C）══════════════
   ・アイコンは**押していなくても色が付く**（意味に合わせた固定色）
       ホーム=キーカラー / さがす=青 / ランキング=金 /
       掲示板=緑 / プロフィール=ピンク
   ・**現在地は座布団**（薄い面のピル）＋ラベルもキーカラー
   ・ラベルは黒のまま。色はアイコンだけに乗せる（文字が読みにくくならない）
   HTML と JS は触っていない（main.js の drawBottom が出す .nb の順番で当てる）。
   v0.0.114 の上の帯（::before）は座布団と二重になるので、通常時は出さない。 */
#bottom.nav .nb .ico{color:inherit}
#bottom.nav .nb:nth-child(1) .ico{color:var(--red)}
#bottom.nav .nb:nth-child(2) .ico{color:#378ADD}
#bottom.nav .nb:nth-child(3) .ico{color:#EF9F27}
#bottom.nav .nb:nth-child(4) .ico{color:#1D9E75}
#bottom.nav .nb:nth-child(5) .ico{color:#D4537E}
#bottom.nav .nb .ico{stroke:currentColor}

/* 座布団: 面はキーカラーの薄色。背景全体を塗るのはやめる */
#bottom.nav .nb{background:none;color:var(--ink)}
#bottom.nav .nb .ico{position:relative;z-index:1;
  padding:5px 14px;border-radius:99px;box-sizing:content-box}
#bottom.nav .nb.on{background:none;color:var(--red)}
#bottom.nav .nb.on .ico{background:var(--red-s);color:var(--red)}
#bottom.nav .nb.on .l{color:var(--red);font-weight:900}
#bottom.nav .nb::before,#bottom.nav .nb.on::before{background:transparent}
@media(hover:hover){
  #bottom.nav .nb:hover{background:none}
  #bottom.nav .nb:hover .ico{background:var(--sur)}
  #bottom.nav .nb.on:hover .ico{background:var(--red-s)}
}


/* ══ v0.0.241: ゲーム詳細の下バーの文字を 12.5px にそろえる ═══════
   目次（select.bt-nav）だけ大きかった。
   原因は v0.0.169 の全体ルール `input/textarea/select{font-size:16px !important}`
   （iOS の自動ズーム対策）が select にも当たっていたこと。
   **ここは指示どおり 12.5px に落とす。**打ち消すには !important が要る。
   ※ iOS Safari は 16px 未満の select でも拡大することがある。
      目次を押したときに画面が拡大したら言ってください。戻します。
   対象はゲーム詳細の下バーの中だけ（#bottom .bt-game）。
   通常のタブバー（#bottom.nav）と入力欄は触っていない。 */
@media (max-width: 760px), (pointer: coarse) {
  #bottom .bt-game,
  #bottom .bt-game *{font-size:12.5px !important}
  #bottom .bt-game .ico{font-size:inherit !important}
}


/* ══ v0.0.245: 記事内ゲームカードのボタンを3択の下に ═══════════
   順番を入れ替えたので、区切り線と余白の付き方を直す。
   ・3択（.mgc-vote）は上に破線 → そのまま
   ・ボタン（.mgc-btns）は3択の下なので、上の余白だけ足す */
.mn-gamecard .mgc-btns{margin-top:14px}


/* ══ v0.0.246: 記事内カードの余白 ═══════════════════════════════
   3択とボタンの間が空いていたのは、**投票結果の入れ物（.mgc-res）が
   中身ゼロでも高さを持っていた**から（min-height:1em ＋ margin-top:13px）。
   投票前は何も無いので、空のときは出さない。
   ボタンの上の余白も 14 → 10px に詰める。 */
.mn-gamecard .mgc-res:empty{display:none;margin:0;min-height:0}
/* v0.0.248: 3択とボタンの間。10px は詰めすぎだった（実機で確認された値に合わせる） */
.mn-gamecard .mgc-btns{margin-top:25px}
@media(max-width:760px){
  .mn-gamecard .mgc-btns{margin-top:20px}
}


/* ══ v0.0.250: 下バーの「前のページに戻る」（PWA のときだけ）═══════
   ホーム画面から起動していると端末の戻るボタンが無いので、画面に置く。
   ブラウザでは出さない（端末の戻ると重複して幅を食うだけ）。
   出す/出さないは JS が body.mn-pwa と履歴の有無で決める。
   見た目は既存の押せる部品の作法（太枠＋押し出し影）にそろえる。
   クラス名は grep 済み（.bt-back）。 */
#bottom .bt-back{flex:none;width:44px;height:44px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1.7px solid var(--ink);border-radius:12px;background:var(--paper);
  color:var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease}
#bottom .bt-back .ico{width:22px;height:22px;stroke:currentColor;fill:none}
#bottom .bt-back:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
@media(max-width:560px){
  #bottom .bt-back{width:40px;height:40px;border-radius:11px}
  #bottom .bt-back .ico{width:20px;height:20px}
}


/* ══ v0.0.251 ═══════════════════════════════════════════════════
   ① 記事の h2 の罫線が**見出しの上**にあった（border-top）。
      見出しと本文の区切りなので、**下に引く**のが正しい。
   ② [mn_ranklist] の行に下線が付いていた。
      `.article a` の下線（記事本文のリンクは下線を引く指定）が
      ランキング行の中のリンクにも当たっていた。行そのものがリンクなので
      文字に下線は要らない。 */

/* ① 罫線は見出しの下 */
.article h2{border-top:0;padding-top:0;padding-bottom:12px;
  border-bottom:2px solid var(--ink)}
.article h2+p,.article h3+p,.article h4+p{margin-top:1.1em}

/* ② ランキング行の下線を消す */
.article .mn-rl-i,
.article .mn-rl-i:hover,
.article .mn-rl-i *{text-decoration:none}


/* ══ v0.0.252: 記事系の下バーの並び ═════════════════════════════
   指定どおりの2段にする。
       1段目: アイコン ＋ ゲームタイトル
       2段目: ◀（戻る） ｜ ボタン
   v0.0.250 で戻るを先頭に足したら、1段目に入って中央に浮いていた。
   ゲーム詳細（.bt-game）には戻るボタンを置かない（目次の中に入れた）。 */
@media(max-width:760px){
  #bottom .bt-post .bt-back{order:2;flex:none}
  #bottom .bt-post .go{flex:1 1 auto;order:2;min-width:0}
  #bottom .bt-post{justify-content:flex-start}
  #bottom .bp-g{order:1;flex:1 1 100%}
}
/* PC は横1列のまま。戻るは左端 */
@media(min-width:761px){
  #bottom .bt-post .bt-back{order:0;margin-right:2px}
}


/* ══ v0.0.253: トップの「はじめての人・保護者向けガイド」═══════════
   初心者ガイドの記事を2列で並べる。押せる部品の作法にそろえる。
   クラス名は grep 済み（.bg-links）。 */
.bg-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bg-links a{display:flex;align-items:center;min-height:56px;
  border:1.5px solid var(--line2);border-radius:12px;background:var(--paper);
  padding:12px 16px;font-size:14px;font-weight:800;color:var(--ink);
  text-decoration:none;line-height:1.5}
.bg-links a:hover{border-color:var(--ink)}
.bg-links a:active{transform:scale(.99)}
@media(max-width:640px){
  .bg-links{grid-template-columns:1fr;gap:8px}
  .bg-links a{min-height:50px;padding:11px 13px;font-size:13.5px}
}

/* ══ v0.0.257: 攻略動画ページ SP = タイトル → 動画サムネ の順 ═══════
   HTML は触っていない。順番を入れ替えているのは flex の order だけで、
   効くのは 760px 以下・動画ページの一覧（.vd-grid）だけ。
   PC と、攻略ガイドの中の横スクロール動画（.gd-vd-row .vd）は従来のまま。

   v0.0.257: 1列に積むと動画どうしの切れ目が分からないので、
   1本ぶんを「区切り線 + たっぷりの余白」で囲み、
   タイトルは行頭にキーカラーの縦棒を付けた見出しの形にする
   （.vd-fr-h と同じ作法。あちらは細い棒・小さい字なので役割は混ざらない）。 */
@media(max-width:760px){
  .vd-grid{gap:0}
  .vd-grid .vd{padding:22px 0 24px;border-top:1.5px solid var(--line2)}
  .vd-grid .vd:first-child{border-top:0;padding-top:2px}

  .vd-grid .vd .vd-t{order:1;
    font-size:17px;line-height:1.5;-webkit-line-clamp:3;
    padding-left:12px;border-left:4px solid var(--red);margin-bottom:3px}
  .vd-grid .vd .vd-play{order:2}
  .vd-grid .vd .vd-orig{order:3}
  .vd-grid .vd .vd-sum{order:4}
  .vd-grid .vd .vd-m{order:5}
  .vd-grid .vd .vd-frames{order:6;margin-top:6px}

  /* v0.0.258: 「サムネイル画像」の見出し（A 罫線ラベル）。
     タイトルと同じ縦棒だと切れ目がぼやけるので、SP では縦棒をやめて
     「文字 + 細い罫 + タップで拡大」の形にする。
     字はグレー（--ink2）をやめて本文と同じ濃さ（--ink）。
     並びは flex の order。子は [文字ノード, span] なので、
     ::after を間（order:2）に置いて罫線にする。 */
  .vd-grid .vd .vd-fr-h{
    border-left:0;padding-left:0;
    font-size:12px;color:var(--ink);letter-spacing:.04em}
  .vd-grid .vd .vd-fr-h:after{content:"";order:2;flex:1;height:1px;
    background:var(--line2);margin:0 2px}
  .vd-grid .vd .vd-fr-h span{order:3;margin-left:0;color:var(--ink3)}
}

/* ══ v0.0.268: 「どんなリストを作る？」の切り口カード ═══════════
   白面＋太枠＋押し出し影（.sec-btn / .ghero-tabs と同じ押せる部品の作法）。
   **アイコンの背景は敷かない。**色が付くのはアイコンの線とラベルの面だけ。
   色は初心者ガイドのハブと同じ .k-a〜f（既に定義済み）を使い回す。 */
.ls-themes .ls-theme{
  border:1.7px solid var(--ink);border-radius:14px;background:var(--paper);
  box-shadow:0 3px 0 var(--ink);padding:15px 16px 17px;gap:2px;
  transition:transform .12s, box-shadow .12s}
.ls-themes .ls-theme:hover{
  background:var(--paper);border-color:var(--ink);
  transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.ls-themes .ls-theme:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.lt-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lt-ic{width:22px;height:22px;color:var(--gk,var(--ink))}
.ls-theme .tag{font-size:10.5px;font-weight:800;line-height:1;
  color:var(--gk,var(--ink2));background:var(--gks,var(--sur));
  border-radius:99px;padding:5px 10px}
.ls-themes .ls-theme b{font-size:14.5px;line-height:1.5;color:var(--ink)}
.ls-themes .ls-theme small{font-size:12px;color:var(--ink2);margin-top:2px}
@media(max-width:560px){
  .ls-themes .ls-theme{padding:13px 13px 15px}
  .ls-themes .ls-theme b{font-size:13.5px}
}

/* ══ v0.0.273: リスト詳細の共有ブロック（ページ末尾）══════════════
   下の回遊ボタン（.post-next-btns）と同じ形だとボタンが4つ並んで
   役割が読めないので、共有だけ「箱」にして形を変える。
   クラス名は grep 済み（.ls-share / .lsh-*）。 */
.ls-share{border:1.7px solid var(--ink);border-radius:14px;background:var(--paper);
  padding:14px 16px;margin-top:30px}
.lsh-t{font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:10px}
.lsh-row{display:flex;gap:8px;align-items:center}
.lsh-url{flex:1;min-width:0;border:1.5px dashed var(--line2);border-radius:10px;
  padding:9px 12px;font-size:12px;color:var(--ink2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lsh-cp{font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;
  border:0;border-radius:10px;padding:11px 18px;background:var(--red);color:#fff}
.lsh-cp:hover{background:var(--red-d)}
.lsh-cp:active{transform:translateY(1px)}
.lsh-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.lsh-foot .d{font-size:12.5px;color:var(--ink2)}
.lsh-new{display:inline-block;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:800;color:var(--ink);
  border:1.7px solid var(--ink);border-radius:10px;background:var(--paper);
  box-shadow:0 3px 0 var(--ink);padding:9px 16px}
.lsh-new:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.lsh-new:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

/* 回遊ボタンは共有より一段弱く（役割の順を見た目で出す） */
.ls-share ~ .post-next .post-next-btns .sec-btn{
  border-width:1.5px;border-color:var(--line2);box-shadow:none;
  color:var(--ink);font-size:13px}
/* v0.0.274: ホバーの文字色を必ず白に戻す。
   上の1行（color:var(--ink)）は詳細度 0,0,4,0 で、
   既存の .sec-btn:hover{color:#fff}（0,0,2,0）に勝ってしまい、
   黒地に黒文字になっていた。同じ詳細度＋:hover で打ち消す。 */
.ls-share ~ .post-next .post-next-btns .sec-btn:hover{
  background:var(--ink);border-color:var(--ink);color:#fff;transform:none}

@media(max-width:760px){
  /* URL とボタンは縦積み。横並びのままだと URL が潰れて読めない */
  .lsh-row{display:block}
  .lsh-url{display:block;margin-bottom:8px;font-size:11.5px}
  .lsh-cp{display:block;width:100%;padding:12px}
  .lsh-foot{display:block}
  .lsh-foot .d{display:block;margin-bottom:8px;font-size:12px}
  .lsh-new{display:block;text-align:center;padding:11px}
  /* 下の固定バーに最後のボタンが潜らないよう、末尾に余白を足す */
  .ls-share ~ .post-next{margin-bottom:22px}
  body.mn-pwa .ls-share ~ .post-next{margin-bottom:44px}
}

/* ══ v0.0.278: イベント（/events/・ゲーム詳細・攻略ガイド）════════
   コードのカードと同じ作法（囲みは 1.5px 罫＋角丸12・面は白）。
   押せる部品ではないので**押し出し影は付けない**（v0.0.186 の取り決め）。
   クラス名は grep 済み（.ev / .ev-*）。 */
.ev-list{display:grid;gap:10px}
@media(min-width:761px){.ev-list{grid-template-columns:1fr 1fr}}
.ev{border:1.5px solid var(--line2);border-radius:12px;background:var(--paper);
  padding:13px 15px 15px}
.ev-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ev-st{font-size:10.5px;font-weight:800;line-height:1;border-radius:99px;padding:5px 10px;
  background:var(--sur);color:var(--ink2)}
.ev-live .ev-st{background:var(--red-s);color:var(--red)}
.ev-upcoming .ev-st{background:#EAF3DE;color:#3B6D11}
.ev-d{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.ev-t{font-size:15px;font-weight:800;line-height:1.5;margin:0}
.ev-sub{font-size:12px;color:var(--ink2);margin-top:3px}
.ev-b{font-size:12.5px;color:var(--ink2);line-height:1.8;margin-top:7px}
.ev-note{font-size:11.5px;color:var(--red);font-weight:700;margin-top:8px}
.ev-ended{opacity:.72}
/* 詳細・ガイドに差し込む小さい版 */
.ev-mini .ev-bd{padding:13px 15px 15px}
.ev-mini .ev-t{font-size:14.5px}
.ev-mini .ev-b{font-size:12.5px;margin-top:8px}
/* v0.0.290: 記事内の差し込みは攻略動画と同じ挙動。
   PC は3列、SP は横スクロールで1枚を大きく見せ次を少しのぞかせる */
@media(min-width:761px){.ev-mini{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:760px){
  .ev-mini[hidden]{display:none}
  .ev-mini{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:-16px;padding-inline:16px;padding-bottom:4px}
  .ev-mini::-webkit-scrollbar{display:none}
  .ev-mini .ev{flex:0 0 84%;scroll-snap-align:start}
}
@media(max-width:760px){
  .ev-t{font-size:14.5px}
  .ev-b{font-size:12px}
}

/* ══ v0.0.281: トップの統計ボックス（PC だけ）════════════════
   ラベルが長くなり「本日追加したゲーム／数」と最悪の位置で折れていた。
   さらに1行のラベル（掲載ゲーム数）と2行のラベルで数字の高さがズレていた。

   ・text-wrap:balance … 行の長さを揃えて折る。「本日追加した／ゲーム数」になる。
     **未対応のブラウザでは無視されるだけ**（いまと同じ挙動に戻る）
   ・ラベルの高さを2行ぶんで固定し、数字を下端へ寄せて高さを揃える

   **SP（639px 以下）は 1×4 のまま。ここには一切かからない。** */
@media(min-width:640px){
  #hero .stats > div{display:flex;flex-direction:column}
  #hero .stats .l{line-height:1.45;min-height:2.9em;text-wrap:balance}
  #hero .stats .v{margin-top:auto}
}


/* ══ v0.0.289: イベントのカード ═══════════════════════════════
   ・ゲーム個別（.ev）… サムネ 16:9 を上に敷き、状態と期間を重ねる。PC 2列
   ・トップ（.evh）  … 小さい横並び。左に固定幅のサムネ
   ・一覧            … 攻略ガイドと同じ .gd-card を流用（.ev-card で色だけ変える） */

/* ── ゲーム個別 ── */
/* v0.0.291: **[hidden] を先に効かせる。**
   .ev-list{display:grid} が hidden 属性の display:none に勝ってしまい、
   タブで隠したパネル（開催予定・終了済み）が常に出ていた。 */
.ev-list[hidden],.ev-home[hidden],.gd-cards[hidden]{display:none}
.ev-list{display:grid;gap:12px}
/* v0.0.290: 攻略動画（.gd-vd-row）と同じく3列。2列だと3件目の右が空く */
@media(min-width:761px){.ev-list{grid-template-columns:repeat(3,1fr)}}
.ev{border:1.5px solid var(--line2);border-radius:14px;background:var(--paper);
  overflow:hidden;display:flex;flex-direction:column}
.ev-kv{position:relative;display:block;aspect-ratio:16/9;background-size:cover;
  background-position:center;background-color:var(--sur)}
.ev-kv.none{display:flex;align-items:center;justify-content:center}
.ev-kv.none i{font-style:normal;font-size:11px;color:var(--ink3)}
.ev-kv .ev-st{position:absolute;top:11px;left:11px;font-size:10.5px;font-weight:800;
  line-height:1;color:#fff;background:rgba(26,26,24,.82);border-radius:99px;padding:6px 12px}
.ev-live .ev-kv .ev-st{background:rgba(163,45,45,.92)}
.ev-upcoming .ev-kv .ev-st{background:rgba(59,109,17,.92)}
.ev-kv .ev-d{position:absolute;top:11px;right:11px;font-size:10.5px;color:var(--ink);
  background:rgba(255,255,255,.92);border-radius:99px;padding:6px 12px}
.ev-bd{display:block;padding:16px 18px 18px}
.ev-t{font-size:16px;font-weight:800;line-height:1.5;margin:0}
.ev-sub{display:block;font-size:12px;color:var(--ink3);margin-top:5px}
.ev-b{font-size:13px;color:var(--ink2);line-height:1.9;margin-top:10px}
.ev-left{display:block;border-top:1px solid var(--line);margin-top:14px;padding-top:12px;
  font-size:13px;font-weight:800;color:var(--red)}
.ev-cd{display:flex;align-items:center;gap:12px;background:var(--sur);
  border-radius:11px;margin-top:12px;padding:12px 15px}
.ev-cd b{font-size:26px;font-weight:800;line-height:1;color:var(--key,#6C5CE7)}
.ev-cd span{font-size:12.5px;color:var(--ink);line-height:1.6}
.ev-cd i{display:block;font-style:normal;font-size:11.5px;color:var(--ink3)}
.ev-ended{opacity:.72}
@media(max-width:760px){
  .ev-bd{padding:14px 16px 16px}
  .ev-t{font-size:15px}
  .ev-b{font-size:12.5px}
  .ev-cd b{font-size:23px}
}

/* ── トップ（小さい横並び）── */
.ev-home{display:grid;gap:10px}
@media(min-width:761px){.ev-home{grid-template-columns:1fr 1fr}}
.evh{display:flex;gap:11px;align-items:stretch;text-decoration:none;color:inherit;
  border:1.5px solid var(--line2);border-radius:12px;background:var(--paper);padding:11px;
  transition:border-color .12s, transform .12s}
.evh:hover{border-color:var(--ink);transform:translateY(-2px)}
.evh-kv{flex:none;width:104px;border-radius:8px;background-size:cover;background-position:center;
  background-color:var(--sur);aspect-ratio:16/9}
.evh-bd{min-width:0;display:flex;flex-direction:column;justify-content:center}
.evh-g{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.evh-g img{width:16px;height:16px;border-radius:5px;object-fit:cover;flex:none}
.evh-g i{font-style:normal;font-size:10.5px;color:var(--ink2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.evh-g .ev-st{margin-left:auto;flex:none;font-size:9.5px;font-weight:800;line-height:1;
  border-radius:99px;padding:3px 8px;background:var(--sur);color:var(--ink2)}
.evh.ev-live .evh-g .ev-st{background:var(--red-s);color:var(--red)}
.evh.ev-upcoming .evh-g .ev-st{background:#EAF3DE;color:#3B6D11}
.evh-bd b{font-size:13px;font-weight:800;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evh-d{display:block;font-size:10.5px;color:var(--ink3);margin-top:5px}

/* ── 一覧（攻略ガイドのカードを流用）── */
.gd-card.ev-card.is-live .gd-tag{background:var(--red);color:#fff}
.gd-card.ev-card .gd-ft .gd-n{overflow:hidden}
.gd-card.ev-card .gd-ft .gd-n b{font-size:11.5px;font-weight:700;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}

/* ══ v0.0.290: ページャ（攻略ガイド一覧・イベント一覧）════════════
   「もっと見る」1本だと前に戻れない。前後リンクと現在ページを出す。
   総ページ数は出さない（数えるには全件取得が必要で、その価値がない）。 */
.mn-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.mn-pager a{text-decoration:none;font-size:13px;font-weight:800;color:var(--ink);
  border:1.7px solid var(--ink);border-radius:11px;background:var(--paper);
  box-shadow:0 3px 0 var(--ink);padding:10px 16px}
.mn-pager a:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.mn-pager a:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.mn-pager .pg-now{font-size:12px;color:var(--ink3);padding:0 4px}
@media(max-width:560px){
  .mn-pager a{font-size:12.5px;padding:9px 13px}
  .mn-pager .pg-now{font-size:11px}
}

/* v0.0.298: トップのイベントは PC 8件 / SP 6件。
   HTML は8件ぶん出し、SP では7〜8件目を隠す（サーバー側で画面幅は分からないため）。 */
@media(max-width:760px){
  .ev-home .evh:nth-child(n+7){display:none}
}

/* ══ v0.0.301 さがす：ジャンルタグの絞り込み・条件チップ ══════════════
   .fil の中のチップに件数バッジを出す（ジャンル一覧の .gtag .cnt と同じ見た目）。
   選択中は白抜きにする。 */
.fil .fg .chips label.chip{gap:6px}
.fil .chip .cnt{font-size:10px;font-weight:500;color:var(--ink3);background:var(--sur);
  border-radius:99px;padding:1px 6px;letter-spacing:.02em}
.fil label.chip:has(input:checked) .cnt{background:rgba(255,255,255,.24);color:#fff}
/* 「もっと見る」。残り件数は薄くしない（読ませたい情報なので本文と同じ濃さ） */
.fil details.fold{margin-top:7px}
.fil details.fold>summary{display:flex;align-items:center;gap:6px;padding:5px 0;
  font-size:11.5px;font-weight:800;color:var(--ink)}
.fil details.fold>summary:hover{color:var(--red)}
.fil details.fold>summary .fold-n{font-weight:700;color:var(--ink2)}
.fil details.fold>summary .chev{margin-left:auto}
.fil details.fold .chips{margin-top:7px}

/* 結果の上に出す「絞り込み中」の帯。押すとその条件だけ外れる */
.actv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;
  padding:11px 13px;border:1px solid var(--line);background:var(--paper);border-radius:var(--r)}
.actv-h{font-size:11px;font-weight:800;color:var(--ink2);margin-right:2px}
.rmv-c{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  border:1.5px solid var(--line2);border-radius:99px;padding:6px 12px;
  background:var(--paper);color:var(--ink)}
.rmv-c:hover{border-color:var(--red);color:var(--red);background:var(--red-s)}
.rmv-c .x{font-family:'DM Mono',monospace;font-size:14px;font-weight:800;color:var(--ink3);
  line-height:1;margin-top:-1px}
.rmv-c:hover .x{color:var(--red)}
.rmv-c .cnt{font-size:10.5px;font-weight:700;color:var(--ink3);background:var(--sur);
  border-radius:99px;padding:2px 8px}
.rmv-c:hover .cnt{color:#fff;background:var(--red)}
.actv-clr{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink3);
  text-decoration:underline;white-space:nowrap}
.actv-clr:hover{color:var(--red)}

/* 0件のとき */
.nohit{border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:18px}
.nohit-t{font-size:15px;font-weight:800;margin-bottom:6px}
.nohit-d{font-size:13px;color:var(--ink2);line-height:1.7}
@media(max-width:640px){
  .actv{gap:7px;padding:10px 11px}
  .actv-clr{margin-left:0}
}

/* v0.0.305: 結果を差し替えている間。**高さは動かさない**（下の内容が飛び跳ねる） */
#mn-dsc-res.is-loading{opacity:.45;transition:opacity .12s;pointer-events:none}

/* v0.0.316: カードの**途中**に置く見出し。
   .blk-h は上マージンを持たない（カードの先頭に置く前提の部品）ので、
   6問評価の並びの直後に差し込むと直前の行にくっつく。 */
.blk .blk-h.mn-h-mid{margin-top:30px}
@media(max-width:640px){.blk .blk-h.mn-h-mid{margin-top:24px}}

/* ══ v0.0.318 掲示板のリアクション ══════════════════════════════
   返信する と 3つのリアクションを1行に並べる。
   アイコンは**塗り**で色を固定（いいね=青 / ありがとう=赤 / 参考になった=黄）。
   下部タブバー（v0.0.211 の案C）と同じ考え方で、押していなくても色は付く。 */
.po-acts{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:9px}
.po-acts .rep-open{margin-top:0;flex:none}
.rxg{display:inline-flex;align-items:center;flex:none}
.rx{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--ink2);border:1.5px solid var(--line);border-radius:99px;
  padding:5px 13px;background:var(--paper);cursor:pointer;white-space:nowrap}
.rxg .rx + .rx{margin-left:8px}
.rx:hover{border-color:var(--ink);color:var(--ink)}
.rx:active{transform:translateY(1px)}
.rx .ico{width:15px;height:15px;flex:none}
.rx .n{font-size:11px;font-weight:800;color:var(--ink3);font-family:'DM Mono',monospace}
.rx .n[hidden]{display:none}
/* v0.0.319: **押す前は色を付けない。**押してから色が乗る。
   押していない状態で3色が並ぶと、もう押したように見えてしまう。 */
.rx .ico{color:var(--ink3)}
.rx:hover .ico{color:var(--ink2)}
.rx.on{border-color:var(--ink);color:var(--ink);background:var(--sur)}
.rx.on .n{color:var(--ink)}
.rx-like.on  {border-color:#2F7BF6;background:rgba(47,123,246,.10);color:#2F7BF6}
.rx-thanks.on{border-color:#E5352B;background:rgba(229,53,43,.10);color:#E5352B}
.rx-useful.on{border-color:#D79E00;background:rgba(242,183,5,.14);color:#B07F00}
.rx-like.on .ico  {color:#2F7BF6}
.rx-thanks.on .ico{color:#E5352B}
.rx-useful.on .ico{color:#F2B705}
.rx-like.on .n  {color:#2F7BF6}
.rx-thanks.on .n{color:#E5352B}
.rx-useful.on .n{color:#B07F00}
.rx.busy{opacity:.55;pointer-events:none}

@media(max-width:640px){
  .po-acts{gap:7px}
  .rx .lb{display:none}
  /* 3つを1本のピルにまとめる（個々の枠と余白ぶんが浮いて折り返さなくなる） */
  .rxg{border:1.5px solid var(--line);border-radius:99px;background:var(--paper);overflow:hidden}
  .rxg .rx{border:0;border-radius:0;padding:5px 12px;gap:5px;background:none}
  .rxg .rx + .rx{margin-left:0;border-left:1.5px solid var(--line)}
  .rxg .rx.on{border-color:transparent}
  .rxg .rx-like.on  {background:rgba(47,123,246,.12)}
  .rxg .rx-thanks.on{background:rgba(229,53,43,.12)}
  .rxg .rx-useful.on{background:rgba(242,183,5,.18)}
}

/* v0.0.318: トップの掲示板は PC 6 件 / SP 4 件。
   HTML は6件出し、SP では5件目以降を隠す（クローラーには6件とも見える）。
   .hb-list は1列に落ちる 760px ではなく、他の節と同じ 640px を境にする。 */
@media(max-width:640px){
  .hb-list .hb-i:nth-child(n+5){display:none}
}

/* ══ v0.0.325 概要の原文切り替え ══════════════════════════════
   .gh-desc は元々インラインで指定していた見た目を、そのままクラスへ移した
   （2つ並ぶので同じ指定を2回書きたくない）。
   **[hidden] は display の後ろで打ち直す**（v0.0.88 / v0.0.291 で2回踏んでいる）。 */
.gh-descwrap{margin:0}
.gh-desc{display:block;margin:0;font-size:13.5px;line-height:1.85;color:var(--ink2)}
.gh-desc[hidden]{display:none}
/* v0.0.326: 見出し（ゲーム概要）と「原文を見る」を同じ行に置く（案C）。
   下の罫線で本文と切り分ける。 */
.dsc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 7px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.dsc-h b{font-size:12.5px;font-weight:800;color:var(--ink)}
.desc-sw{display:inline-flex;align-items:center;flex:none;
  font-size:11.5px;font-weight:800;color:var(--ink2);
  border:1.5px solid var(--line);border-radius:99px;padding:4px 12px;
  background:var(--paper);cursor:pointer}
.desc-sw:hover{border-color:var(--ink);color:var(--ink)}
.desc-sw[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--sur)}

/* v0.0.337: みんなの声は3件表示＋「もっと見る」。投稿日を名前の右に小さく */
.voice .l1{display:flex;align-items:baseline;gap:10px}
.voice .l1 .tm{font-size:11px;color:var(--ink3)}
.voices .voice[hidden]{display:none}
.vc-more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-size:12.5px;font-weight:800;color:var(--ink2);
  border:1.5px solid var(--line2);border-radius:99px;padding:7px 16px;
  background:var(--paper);cursor:pointer}
.vc-more:hover{border-color:var(--ink);color:var(--ink)}
.vc-more .n{font-size:11px;font-weight:700;color:var(--ink3)}


/* ══ v0.0.338 イベント概要（加筆）══════════════════════════════
   部品は攻略ガイドの流用（.gd-sh / .gd-take / .gd-tbl / .gd-tips / .gd-warn / .qa）。
   ここで足すのは**節と節の間の余白だけ**。 */
.ev-note-sec + .ev-note-sec{margin-top:26px}
.blk .ev-note-sec:first-of-type{margin-top:26px}
@media(max-width:640px){
  .ev-note-sec + .ev-note-sec{margin-top:22px}
  .blk .ev-note-sec:first-of-type{margin-top:22px}
}


/* ══ v0.0.345: 句読点のあとが詰まる問題 ═══════════════════════════
   原因は body に当てていた font-feature-settings:'palt' 1。
   palt は約物（。、」）の左右の余白を詰める指定で、**見出しの間延びを防ぐ**
   ために入れていたが、本文にも効くので「。」のあとがほとんど空かなかった。
   → body から外し、**見出しにだけ**戻す。
     本文・注記・箇条書き・表のセルには付けない。 */
.pg-t,
.blk-h h2, .blk-h h3,
.gd-sh h2, .gd-sh h3,
.gd-take b,
.ev-t,
.gc-t{font-feature-settings:'palt' 1}