:root { --accent: #4da3ff; --dot: "DotGothic16", monospace; --maxw: 1600px; --gut: 48px; --title: "Russo One", "Dela Gothic One", sans-serif; --title-w: 400; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: "Inter", "Noto Sans JP", sans-serif; background: #05070d; color: #fff; overflow-x: hidden; }
  body.booting { overflow: hidden; }
  button { font: inherit; color: inherit; }

  /* ===== 起動画面 ===== */
  .boot { position: fixed; inset: 0; z-index: 100; background: #05070d; display: grid; place-items: center; cursor: pointer;
          transition: opacity .5s ease, visibility .5s; }
  .boot.done { opacity: 0; visibility: hidden; }
  .boot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                 background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
  .boot-inner { width: min(420px, calc(100% - 32px)); font-family: var(--dot); }
  .boot-logo { font-family: "Noto Sans JP"; font-weight: 900; font-size: clamp(26px, 6vw, 36px); text-align: center; animation: glitch .45s steps(3) 1 both; }
  .boot-sub { text-align: center; letter-spacing: .35em; font-size: 12px; opacity: .55; margin-top: 4px; }
  @keyframes glitch { 0% { opacity: 0; transform: translateX(-4px); } 20% { opacity: 1; transform: translateX(3px); } 40% { transform: none; } }
  .boot-log { margin-top: 28px; min-height: 150px; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.75); white-space: pre; }
  .boot-log .ok { color: #3ddc97; } .boot-log .new { color: #ff6b85; }
  .boot-bar { margin-top: 14px; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; height: 12px; }
  .boot-bar i { background: rgba(255,255,255,.1); }
  .boot-bar i.fill { background: #4da3ff; box-shadow: 0 0 6px #4da3ff; }
  .boot-skip { margin-top: 18px; text-align: center; font-size: 12px; opacity: .45; }
  .boot-ready { margin-top: 18px; text-align: center; font-size: 18px; letter-spacing: .2em; opacity: 0; }
  .boot-ready.show { opacity: 1; animation: blink .5s steps(2) 2; }
  @keyframes blink { 50% { opacity: 0; } }

  /* ===== ホーム画面 ===== */
  .hero { position: relative; min-height: 100vh; padding: 20px 0 72px; display: flex; flex-direction: column; overflow: hidden; }
  /* 中身は最大幅を決めて中央寄せ（背景だけ画面いっぱい） */
  .wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
  .hero > .wrap { display: flex; flex-direction: column; flex: 1; }

  .bg { position: absolute; inset: 0; z-index: 0; }
  .bg .layer { position: absolute; inset: -30px; opacity: 0; transition: opacity .7s ease, transform 1.2s ease; transform: scale(1.06); }
  .bg .layer.on { opacity: 1; transform: scale(1); }
  .bg .big { position: absolute; right: 0; bottom: 8vh; font-weight: 800; font-size: 32vw; line-height: .8; letter-spacing: -.04em;
             color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.12); white-space: nowrap; user-select: none;
             transform: translate(var(--px, 0), var(--py, 0)); transition: transform .4s ease-out; }
  .bg .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); pointer-events: none; }
  .bg::after { content: ""; position: absolute; inset: 0;
               background: linear-gradient(90deg, rgba(5,7,13,.92) 0%, rgba(5,7,13,.55) 45%, rgba(5,7,13,.2) 100%),
                           linear-gradient(0deg, rgba(5,7,13,1) 0%, rgba(5,7,13,0) 40%); }
  .hero > *:not(.bg) { position: relative; z-index: 1; }

  /* 上部バー：左＝サイト名とメニュー／右＝プレイヤー情報と設定 */
  .topbar { display: flex; align-items: center; justify-content: space-between; font-size: 14px; gap: 12px; }
  .topbar .left { display: flex; gap: 32px; align-items: center; }
  .logo { font-family: "Noto Sans JP"; font-weight: 900; font-size: 18px; letter-spacing: .02em; white-space: nowrap; }
  .logo small { display: block; font-family: var(--dot); font-weight: 400; font-size: 11px; letter-spacing: .25em; opacity: .6; }
  .menu { display: flex; gap: 6px; }
  .menu a { color: #fff; text-decoration: none; font-weight: 600; padding: 7px 14px; border-radius: 99px; opacity: .6; transition: opacity .2s, background .2s; }
  .menu a:hover { opacity: 1; background: rgba(255,255,255,.08); }
  .menu a.active { opacity: 1; background: rgba(255,255,255,.14); }
  .topbar .right { display: flex; gap: 10px; align-items: center; }
  .icon-btn { height: 36px; min-width: 36px; padding: 0 12px; border-radius: 99px; display: flex; gap: 6px; align-items: center; justify-content: center;
              background: rgba(255,255,255,.08); cursor: pointer; border: none; font-size: 14px; }
  .icon-btn .lbl { font-size: 12px; font-weight: 600; }
  .icon-btn.on { background: var(--accent); color: #05070d; }
  .clock { font-family: var(--dot); font-size: 16px; margin-left: 4px; }

  /* 読者レベル */
  .player { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
            border-radius: 99px; padding: 4px 14px 4px 4px; font-family: var(--dot); }
  .player .ava { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #05070d); display: grid; place-items: center; font-size: 15px; }
  .player .lv { font-size: 13px; line-height: 1; }
  .player .lv b { font-size: 17px; font-weight: 400; color: var(--accent); }
  .player .exp { display: grid; grid-template-columns: repeat(3, 14px); gap: 2px; margin-top: 4px; }
  .player .exp i { height: 5px; background: rgba(255,255,255,.15); }
  .player .exp i.fill { background: var(--accent); }
  .player .next { font-size: 11px; opacity: .6; white-space: nowrap; }
  .player.up { animation: shine .8s ease 2; }
  @keyframes shine { 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent); } }

  /* タイル列 */
  .tiles { display: flex; gap: 16px; align-items: flex-end; margin-top: 36px; height: 196px; }
  .tile { position: relative; width: 132px; height: 132px; border-radius: 22px; cursor: pointer; flex: none;
          transition: width .3s ease, height .3s ease, transform .3s ease;
          display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; border: none; text-align: left; }
  .tile .num { position: absolute; top: 12px; left: 14px; font-family: var(--dot); font-size: 13px; opacity: .8; }
  .tile .glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-58%); font-size: 54px; transition: font-size .3s; }
  .tile .name { font-size: 14px; font-weight: 700; opacity: .9; transition: opacity .2s; }
  .tile .badge { position: absolute; top: -9px; right: -7px; background: #ff3b5c; font-family: var(--dot); font-size: 12px; padding: 2px 8px; border-radius: 99px;
                 box-shadow: 0 2px 8px rgba(255,59,92,.5); animation: bob 1.6s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-3px); } }
  .tile.active { width: 190px; height: 190px; animation: pulse 1.8s ease-in-out infinite; }
  .tile.active .glyph { font-size: 80px; }
  .tile.active .name { font-size: 16px; opacity: 1; }
  .tile.active::before { content: ""; position: absolute; inset: -10px; pointer-events: none;
    background:
      linear-gradient(#fff,#fff) top left / 18px 3px, linear-gradient(#fff,#fff) top left / 3px 18px,
      linear-gradient(#fff,#fff) top right / 18px 3px, linear-gradient(#fff,#fff) top right / 3px 18px,
      linear-gradient(#fff,#fff) bottom left / 18px 3px, linear-gradient(#fff,#fff) bottom left / 3px 18px,
      linear-gradient(#fff,#fff) bottom right / 18px 3px, linear-gradient(#fff,#fff) bottom right / 3px 18px;
    background-repeat: no-repeat; animation: cursor .9s ease-in-out infinite; }
  @keyframes cursor { 50% { inset: -14px; } }
  @keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 24px 2px var(--accent), 0 18px 40px rgba(0,0,0,.5); }
                     50%     { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 44px 8px var(--accent), 0 18px 40px rgba(0,0,0,.5); } }
  .tile:not(.active):hover { transform: translateY(-4px); }
  .tile:focus-visible { outline: none; }

  /* 選択中カテゴリの情報 */
  .main { display: flex; gap: 56px; align-items: flex-end; justify-content: space-between; margin-top: 32px; flex-wrap: wrap; }
  .info { max-width: 540px; flex: 1 1 380px; }
  .info .kicker { font-family: var(--dot); font-size: 14px; letter-spacing: .2em; color: var(--accent); }
  .info #title { font-family: "Noto Sans JP"; font-weight: 900; font-size: clamp(36px, 5vw, 60px); line-height: 1.15; margin: 6px 0 10px; }
  /* 説明文は常に2行分の高さを確保 → カテゴリーを切り替えても下がガタつかない */
  .info p { font-family: "Noto Sans JP"; opacity: .82; line-height: 1.8; font-size: 15px; min-height: calc(1.8em * 2); }
  .actions { display: flex; gap: 12px; margin-top: 18px; align-items: center; }
  .btn-main { background: #fff; color: #05070d; font-weight: 800; padding: 13px 26px; border-radius: 99px; font-size: 15px; border: none; cursor: pointer;
              font-family: "Noto Sans JP"; display: flex; align-items: center; gap: 10px; transition: transform .1s; white-space: nowrap; }
  .btn-main .cnt { font-family: var(--dot); font-weight: 400; font-size: 13px; background: #05070d; color: #fff; border-radius: 99px; padding: 1px 8px; }
  .btn-main:active, .btn-main.press { transform: scale(.95); }
  .btn-sub { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 18px; cursor: pointer; border: none; flex: none; }

  /* ステータス（RPG風） */
  .stats { flex: 0 1 380px; background: rgba(5,7,13,.55); border: 2px solid rgba(255,255,255,.18); border-radius: 6px; padding: 16px 18px 14px;
           font-family: var(--dot); position: relative; backdrop-filter: blur(6px); }
  .stats::before { content: "STATUS"; position: absolute; top: -10px; left: 12px; background: #05070d; padding: 0 8px; font-size: 12px; letter-spacing: .2em; color: var(--accent); }
  .stat { display: grid; grid-template-columns: 76px 1fr 68px; gap: 10px; align-items: center; font-size: 14px; padding: 5px 0; white-space: nowrap; }
  .stat .val { text-align: right; opacity: .85; }
  .stat.mine { border-top: 1px dashed rgba(255,255,255,.18); margin-top: 6px; padding-top: 10px; }
  .gauge { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 12px; }
  .gauge i { background: rgba(255,255,255,.1); border-radius: 1px; transition: background .15s; }
  .gauge i.fill { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
  .gauge.gold i.fill { background: #ffd84d; box-shadow: 0 0 6px #ffd84d; }
  .stars { letter-spacing: 3px; color: #ffd84d; }
  .stars .off { color: rgba(255,255,255,.18); }
  .stat-note { margin-top: 8px; font-size: 12px; opacity: .6; }

  /* 最新記事：横スクロールの列＋最後に「すべて見る」 */
  .shelf-head { margin-top: auto; padding-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .shelf-head .label { font-family: var(--dot); font-size: 14px; opacity: .8; letter-spacing: .05em; }
  .shelf-head .nav { display: flex; gap: 8px; }
  .shelf-head .nav button { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); cursor: pointer; font-size: 14px; }
  .shelf-head .nav button:hover { background: rgba(255,255,255,.2); }
  .cards { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 16px; margin: 12px calc(var(--gut) * -1) 0; padding: 4px var(--gut) 14px;
           overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
  .card { background: rgba(255,255,255,.07); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
          overflow: hidden; cursor: pointer; transition: transform .25s, background .25s; animation: rise .45s ease both; position: relative;
          scroll-snap-align: start; display: flex; flex-direction: column; }
  .card:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
  .card .thumb { aspect-ratio: 16/8; position: relative; flex: none; }
  .card .thumb > span { position: absolute; left: 12px; bottom: 10px; font-family: var(--dot); font-size: 12px; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 4px; }
  .card .read { position: absolute; top: 10px; right: 10px; font-family: var(--dot); font-size: 11px; background: #ffd84d; color: #05070d; padding: 2px 8px; border-radius: 4px; }
  .card .body { padding: 14px 16px 16px; font-family: "Noto Sans JP"; display: flex; flex-direction: column; flex: 1; }
  /* タイトルは2行で固定 → カードの高さが揃う */
  .card h3 { font-size: 14px; line-height: 1.6; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.6em * 2); }
  .card .date { font-family: var(--dot); font-size: 12px; opacity: .55; margin-top: auto; padding-top: 8px; }
  .card.more { display: grid; place-items: center; text-align: center; border-style: dashed; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); }
  .card.more .in { font-family: "Noto Sans JP"; font-weight: 700; font-size: 15px; line-height: 1.6; }
  .card.more .circle { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #05070d; display: grid; place-items: center; font-size: 20px; margin: 0 auto 12px; }
  .card.more small { display: block; font-family: var(--dot); font-weight: 400; font-size: 13px; opacity: .6; margin-top: 2px; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* 操作ガイド（画面下・PCのみ） */
  .guide { position: absolute !important; left: 0; right: 0; bottom: 0; display: flex; gap: 26px; justify-content: flex-end; align-items: center;
           padding: 12px max(var(--gut), calc((100% - var(--maxw)) / 2)); font-family: "Noto Sans JP"; font-size: 13px; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0)); }
  .guide span { display: flex; align-items: center; gap: 6px; opacity: .75; }
  kbd { font-family: var(--dot); font-size: 12px; border: 1.5px solid rgba(255,255,255,.6); border-bottom-width: 3px; border-radius: 5px; padding: 1px 6px; }

  /* スマホ用：下部タブバー（ソシャゲのメニューバー風） */
  .tabbar { display: none; }

  /* LEVEL UP 通知 */
  .toast { position: fixed; top: 76px; left: 50%; transform: translate(-50%, -20px); z-index: 50; opacity: 0; pointer-events: none;
           font-family: var(--dot); background: #05070d; border: 2px solid #ffd84d; color: #ffd84d; padding: 10px 22px; border-radius: 6px;
           font-size: 18px; letter-spacing: .1em; box-shadow: 0 0 30px rgba(255,216,77,.4); transition: opacity .3s, transform .3s; text-align: center; white-space: nowrap; }
  .toast small { display: block; font-size: 12px; color: #fff; opacity: .8; letter-spacing: 0; margin-top: 2px; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }


  /* ===== 下段：チュートリアル・新着・ランキング・YouTube ===== */
  .lower { background: #0a0d16; padding: 72px 0 40px; font-family: "Noto Sans JP"; }
  .sec { margin-bottom: 72px; }
  .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  .sec-head .en { font-family: var(--dot); font-size: 13px; letter-spacing: .25em; color: var(--accent); }
  .sec-head h2 { font-size: 26px; font-weight: 900; margin-top: 2px; }
  .link-more { color: #fff; opacity: .7; font-size: 14px; text-decoration: none; font-weight: 700; white-space: nowrap; }
  .link-more:hover { opacity: 1; }

  .bars { width: 100%; display: flex; flex-direction: column; gap: 5px; }
  .bar { display: grid; grid-template-columns: 38% 1fr; gap: 8px; align-items: center; font-family: var(--dot); font-size: 11px; }
  .bar .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
  .bar .tr { height: 7px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
  .bar .tr i { display: block; height: 100%; background: linear-gradient(90deg, #ffd84d, #ffb020); border-radius: 2px; }

  /* 性能比較データベース */
  .db-note { font-size: 13px; opacity: .6; }
  .db { display: block; }
  .db-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 32px; align-items: center; }
  .db-body:hover { transform: none; }
  .db-body .db-chart { margin-top: 0; }
  .db-tabs { display: inline-flex; gap: 4px; background: rgba(0,0,0,.35); border-radius: 99px; padding: 4px; margin-bottom: 18px; }
  .db-tab { border: none; background: transparent; padding: 7px 18px; border-radius: 99px; font-weight: 800; cursor: pointer; opacity: .6; font-family: "Noto Sans JP"; }
  .db-tab:hover { opacity: 1; }
  .db-tab.on { background: #ffd84d; color: #05070d; opacity: 1; }
  .db-card { border-radius: 20px; padding: 24px; border: 2px solid rgba(255,216,77,.55); position: relative; overflow: hidden;
             background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 60%), #0f1320; transition: transform .2s, box-shadow .2s; }
  .db-card:hover { transform: translateY(-3px); box-shadow: 0 0 30px rgba(255,216,77,.2); }
  .db-top { display: flex; gap: 16px; align-items: center; }
  .db-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 34px; flex: none; background: linear-gradient(135deg, var(--c1), var(--c0)); }
  .db-kicker { font-family: var(--dot); font-size: 12px; color: #ffd84d; letter-spacing: .05em; }
  .db-card h3 { font-size: 24px; font-weight: 900; margin: 2px 0; }
  .db-card p { font-size: 13px; opacity: .7; }
  .db-chart { margin-top: 18px; background: rgba(0,0,0,.3); border-radius: 12px; padding: 14px 16px; }
  .db-chart-h { font-family: var(--dot); font-size: 12px; opacity: .7; margin-bottom: 10px; }
  .db-chart-h small { opacity: .6; }
  .db-chart .bar { font-size: 13px; grid-template-columns: 42% 1fr; }
  .db-chart .bar .tr { height: 10px; }
  .db-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
  .db-foot span { font-family: var(--dot); font-size: 12px; opacity: .55; }
  .db-btn { background: #ffd84d; color: #05070d; border: none; border-radius: 99px; padding: 11px 22px; font-weight: 900; cursor: pointer; white-space: nowrap; }

  /* チュートリアル（初心者ガイド） */
  .tutorial { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 30px 34px; border-radius: 20px;
              background: linear-gradient(120deg, #1d2a5a, #0f1630 60%); border: 1px solid rgba(255,255,255,.12); position: relative; overflow: hidden; }
  .tutorial::after { content: "TUTORIAL"; position: absolute; right: -10px; bottom: -28px; font-family: Inter; font-weight: 800; font-size: 120px;
                     color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.07); pointer-events: none; }
  .tutorial .en { font-family: var(--dot); font-size: 13px; letter-spacing: .25em; color: #ffd84d; }
  .tutorial h2 { font-size: 24px; font-weight: 900; margin: 4px 0 16px; }
  .steps { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .step { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 700; }
  .step b { font-family: var(--dot); font-weight: 400; width: 22px; height: 22px; border-radius: 50%; background: #ffd84d; color: #05070d; display: grid; place-items: center; font-size: 12px; }
  .steps .arrow { opacity: .4; font-size: 12px; }
  .btn-yellow { background: #ffd84d; color: #05070d; border: none; border-radius: 99px; padding: 14px 26px; font-weight: 900; cursor: pointer; white-space: nowrap; position: relative; z-index: 1; }

  /* 新着：絞り込みチップ＋グリッド */
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .chip { border: 1px solid rgba(255,255,255,.18); background: transparent; border-radius: 99px; padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; opacity: .75; }
  .chip:hover { opacity: 1; }
  .chip.on { opacity: 1; background: var(--c, #fff); border-color: var(--c, #fff); color: #05070d; }
  .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .post { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .2s, background .2s; animation: rise .4s ease both; }
  .post:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); }
  .post .thumb { aspect-ratio: 16/9; position: relative; }
  .post .cat { position: absolute; left: 10px; top: 10px; font-family: var(--dot); font-size: 12px; padding: 2px 8px; border-radius: 4px; color: #05070d; }
  .post .body { padding: 12px 14px 14px; }
  .post h3 { font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.6em * 2); }
  .post .date { font-family: var(--dot); font-size: 12px; opacity: .5; margin-top: 8px; }
  .more-row { text-align: center; margin-top: 24px; }
  .btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.35); border-radius: 99px; padding: 12px 28px; font-weight: 700; cursor: pointer; }
  .btn-ghost:hover { background: rgba(255,255,255,.08); }

  /* ランキング＋YouTube の2列 */
  .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: stretch; }
  .duo > .sec { display: flex; flex-direction: column; }
  .duo .rank { flex: 1; }
  .duo .rank li { flex: 1; }
  .rank { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .rank li { display: grid; grid-template-columns: 44px 88px 1fr; gap: 12px; align-items: center; background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px; cursor: pointer; transition: background .2s; }
  .rank li:hover { background: rgba(255,255,255,.09); }
  .rank .no { font-family: var(--dot); font-size: 22px; text-align: center; opacity: .6; }
  .rank li:nth-child(1) .no { color: #ffd84d; opacity: 1; } .rank li:nth-child(2) .no { color: #d6dde8; opacity: 1; } .rank li:nth-child(3) .no { color: #e2a06b; opacity: 1; }
  .rank .th { aspect-ratio: 16/10; border-radius: 8px; }
  .rank .tt { font-size: 13px; font-weight: 700; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rank .meta { display: block; font-family: var(--dot); font-size: 11px; opacity: .5; margin-top: 4px; }

  .yt-main { aspect-ratio: 16/9; border-radius: 16px; position: relative; overflow: hidden; cursor: pointer;
             background: linear-gradient(135deg, #2a0f14, #5a1420 50%, #12060a); display: grid; place-items: center; }
  .yt-main .play { width: 76px; height: 54px; border-radius: 14px; background: #ff0033; display: grid; place-items: center; font-size: 22px; transition: transform .2s; }
  .yt-main:hover .play { transform: scale(1.08); }
  .yt-main .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); }
  .yt-main .cap .now { font-family: var(--dot); font-size: 12px; color: #ff6b85; letter-spacing: .15em; }
  .yt-main .cap h3 { font-size: 17px; margin-top: 4px; }
  .yt-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
  .yt-sub { cursor: pointer; }
  .yt-sub .th { aspect-ratio: 16/9; border-radius: 10px; position: relative; display: grid; place-items: center; }
  .yt-sub .th::after { content: "▶"; width: 34px; height: 24px; border-radius: 7px; background: rgba(0,0,0,.55); display: grid; place-items: center; font-size: 11px; }
  .yt-sub p { font-size: 12px; font-weight: 700; line-height: 1.5; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .btn-red { background: #ff0033; color: #fff; border: none; border-radius: 99px; padding: 10px 20px; font-weight: 800; cursor: pointer; white-space: nowrap; font-size: 13px; }

  /* フッター */
  .footer { background: #05070d; border-top: 1px solid rgba(255,255,255,.08); padding: 56px 0 28px; font-family: "Noto Sans JP"; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
  .foot-grid .logo { font-size: 20px; }
  .tagline { margin-top: 12px; font-size: 14px; opacity: .7; line-height: 1.8; }
  .sns { display: flex; gap: 10px; margin-top: 16px; }
  .sns a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; text-decoration: none; font-size: 14px; font-weight: 800; }
  .foot-col h4 { font-family: var(--dot); font-weight: 400; font-size: 13px; letter-spacing: .2em; opacity: .5; margin-bottom: 12px; }
  .foot-col a { display: block; color: #fff; opacity: .75; text-decoration: none; font-size: 14px; padding: 5px 0; }
  .foot-col a:hover { opacity: 1; }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
  .foot-bottom small { font-family: var(--dot); opacity: .5; font-size: 12px; }
  .to-top { font-family: var(--dot); background: transparent; border: 1.5px solid rgba(255,255,255,.3); border-radius: 6px; padding: 8px 16px; cursor: pointer; font-size: 13px; }
  .to-top:hover { border-color: var(--accent); color: var(--accent); }

  /* ===== 大きい画面（WQHD・4K）では一段ずつ大きく ===== */
  @media (min-width: 1800px) {
    :root { --maxw: 1760px; --gut: 64px; }
    .topbar { font-size: 15px; } .logo { font-size: 21px; }
    .tiles { height: 236px; gap: 20px; margin-top: 44px; }
    .tile { width: 158px; height: 158px; border-radius: 26px; } .tile .glyph { font-size: 66px; } .tile .name { font-size: 15px; }
    .tile.active { width: 226px; height: 226px; } .tile.active .glyph { font-size: 96px; } .tile.active .name { font-size: 18px; }
    .info { max-width: 640px; } .info #title { font-size: 76px; } .info p { font-size: 17px; }
    .stats { flex-basis: 440px; } .stat { font-size: 16px; grid-template-columns: 90px 1fr 76px; }
    .cards { grid-auto-columns: 330px; } .card h3 { font-size: 16px; }
    .grid { gap: 22px; } .post h3 { font-size: 15px; }
    .sec-head h2 { font-size: 30px; }
  }
  @media (min-width: 2300px) {
    :root { --maxw: 2000px; --gut: 80px; }
    .tiles { height: 270px; }
    .tile { width: 180px; height: 180px; } .tile .glyph { font-size: 76px; }
    .tile.active { width: 258px; height: 258px; } .tile.active .glyph { font-size: 110px; }
    .info #title { font-size: 88px; } .info p { font-size: 18px; }
    .stats { flex-basis: 480px; } .stat { font-size: 17px; }
    .cards { grid-auto-columns: 370px; } .card h3 { font-size: 17px; }
  }

  /* ===== 特徴のある書体（タイトル類） ===== */
  .logo, .boot-logo, .info #title, .sec-head h2, .tutorial h2, .db-card h3 { font-family: var(--title); font-weight: var(--title-w); letter-spacing: .01em; }

  /* ===== スクロール演出 ===== */
  .lower { transition: background-color .9s ease; overflow-x: clip; }
  .stg { color: #fff; opacity: .55; }
  /* 見出し：左から差し込む＋下線が走る */
  .sec .sec-head > div:first-child { position: relative; }
  .sec .sec-head > div:first-child::after { content: ""; display: block; height: 3px; width: 0; margin-top: 10px; background: var(--accent); transition: width .8s .2s cubic-bezier(.2,.8,.2,1); }
  .sec.in .sec-head > div:first-child::after { width: 64px; }
  .sec .sec-head h2 { transform: translateX(-24px); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
  .sec.in .sec-head h2 { transform: none; opacity: 1; }
  /* 中身：下からふわっと */
  .sec .rv { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .sec.in .rv { opacity: 1; transform: none; }
  .sec.in .rv:nth-of-type(2) { transition-delay: .1s; }
  /* グラフが伸びる */
  .db-chart .bar { grid-template-columns: 40% 1fr 64px; }
  .db-chart .bar .tr i { width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.3s + var(--i) * .09s); }
  .db-body.go .db-chart .bar .tr i { width: var(--w); }
  .bar .sc { font-family: var(--dot); text-align: right; font-size: 13px; color: #ffd84d; }
  /* 斜めの帯 */
  .ribbon { position: relative; width: 104%; margin-left: -2%; transform: rotate(-2deg); overflow: hidden; padding: 12px 0; margin-bottom: 64px;
            background: #ffd84d; color: #05070d; font-family: var(--dot); font-size: 18px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
  .ribbon.r2 { width: 100vw; margin-left: calc(50% - 50vw); transform: rotate(1.5deg); background: #ff3b5c; color: #fff; margin-top: -8px; }
  .ribbon .track { display: inline-flex; animation: marquee 40s linear infinite; }
  .ribbon.r2 .track { animation-direction: reverse; animation-duration: 50s; }
  .ribbon .track span { padding-right: 0; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  /* チュートリアルを斜めにカット */
  .tutorial { clip-path: polygon(0 0, 100% 0, 100% 82%, 97% 100%, 0 100%); border-radius: 20px 20px 0 20px; }
  /* ステージ表示（右端） */
  .hud { position: fixed; right: 16px; bottom: 16px; transform: translateY(160%); z-index: 30; font-family: var(--dot); text-align: right;
         background: rgba(5,7,13,.75); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 10px 12px;
         transition: transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
  .hud.show { transform: none; }
  .hud-st { font-size: 12px; color: #ffd84d; letter-spacing: .15em; }
  .hud-nm { font-size: 14px; margin-top: 2px; }
  .hud-dots { display: flex; gap: 4px; justify-content: flex-end; margin-top: 8px; }
  .hud-dots i { width: 14px; height: 4px; background: rgba(255,255,255,.2); }
  .hud-dots i.on { background: #ffd84d; }
  .hud.flash .hud-nm { animation: hudflash .5s steps(2) 2; }
  @keyframes hudflash { 50% { opacity: 0; } }

  /* ===== メニューの目立つボタン ===== */
  .menu a.cta { opacity: 1; background: #ffd84d; color: #05070d; font-weight: 800; }
  .menu a.cta:hover { background: #ffe27a; }

  /* ===== BTOパソコン検索 ===== */
  .bto { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); border-radius: 24px; overflow: hidden;
         border: 2px solid rgba(255,216,77,.5); box-shadow: 0 0 60px rgba(255,216,77,.12); background: #141008; }
  .bto-side { padding: 34px; background: radial-gradient(ellipse at 0% 0%, rgba(255,216,77,.28), transparent 65%), linear-gradient(160deg, #2a210a, #120e04);
              display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
  .bto-side::after { content: "SEARCH"; position: absolute; left: -8px; bottom: -30px; font-family: "Russo One"; font-size: 110px; color: transparent;
                     -webkit-text-stroke: 1.5px rgba(255,255,255,.06); pointer-events: none; }
  .bto-badge { align-self: flex-start; font-family: var(--dot); font-size: 12px; background: #ffd84d; color: #05070d; padding: 3px 10px; border-radius: 4px; letter-spacing: .1em; }
  .bto-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .bto-total b { font-family: "Russo One", var(--dot); font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 1; color: #ffd84d; text-shadow: 0 0 30px rgba(255,216,77,.45); font-variant-numeric: tabular-nums; }
  .bto-total span { font-weight: 900; font-size: 18px; }
  .bto-side p { font-size: 14px; line-height: 1.8; opacity: .8; }
  .bto-makers { font-size: 12px; opacity: .55; margin-top: auto; }
  .bto-panel { padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; }
  .bto-row { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
  .bto-lbl { font-family: var(--dot); font-size: 14px; opacity: .7; }
  .bto-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .bto-opts button { border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s; }
  .bto-opts button:hover { border-color: rgba(255,255,255,.4); }
  .bto-opts button.on { border-color: #ffd84d; background: rgba(255,216,77,.16); color: #ffd84d; box-shadow: 0 0 0 1px #ffd84d inset; }
  .bto-range { display: flex; align-items: center; gap: 14px; }
  .bto-range input { flex: 1; accent-color: #ffd84d; height: 24px; }
  .bto-range span { font-family: var(--dot); font-size: 16px; min-width: 84px; text-align: right; }
  .bto-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,.35); flex-wrap: wrap; }
  .bto-hit { display: flex; align-items: baseline; gap: 8px; font-weight: 900; }
  .bto-hit b { font-family: "Russo One"; font-weight: 400; font-size: 44px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
  .bto-hit b.zero { color: #ff6b85; }
  .bto-go { background: #ffd84d; color: #05070d; border: none; border-radius: 99px; padding: 15px 28px; font-weight: 900; font-size: 15px; cursor: pointer; transition: transform .1s, box-shadow .2s; box-shadow: 0 0 24px rgba(255,216,77,.4); }
  .bto-go:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(255,216,77,.6); }
  .bto-tags { font-size: 12px; opacity: .85; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .bto-tags button { background: none; border: none; color: #ffd84d; cursor: pointer; font-size: 12px; font-weight: 700; padding: 2px 4px; }
  .bto-tags button:hover { text-decoration: underline; }

  /* ===== 性能対決（VS） ===== */
  .vs-tabs { display: inline-flex; gap: 4px; background: rgba(255,255,255,.06); border-radius: 99px; padding: 4px; }
  .vs-tabs button { border: none; background: transparent; padding: 8px 18px; border-radius: 99px; font-weight: 800; cursor: pointer; opacity: .6; }
  .vs-tabs button.on { background: #fff; color: #05070d; opacity: 1; }
  .vs { border-radius: 24px; padding: 30px; background: radial-gradient(ellipse at 15% 50%, rgba(77,107,255,.22), transparent 55%),
        radial-gradient(ellipse at 85% 50%, rgba(255,59,92,.22), transparent 55%), #0d0a16; border: 1px solid rgba(255,255,255,.1); }
  .vs-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
  .fighter { position: relative; border-radius: 18px; padding: 22px; text-align: center; transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s, box-shadow .4s; }
  .fighter.left { background: linear-gradient(135deg, rgba(77,107,255,.35), rgba(77,107,255,.08)); border: 2px solid rgba(122,147,255,.6); }
  .fighter.right { background: linear-gradient(225deg, rgba(255,59,92,.35), rgba(255,59,92,.08)); border: 2px solid rgba(255,107,133,.6); }
  .f-side { position: absolute; top: 10px; left: 14px; font-family: var(--dot); font-size: 13px; opacity: .7; }
  .fighter.right .f-side { left: auto; right: 14px; }
  .fighter select { width: 100%; max-width: 280px; font-family: "Russo One", var(--title); font-size: 22px; color: #fff; background: rgba(0,0,0,.35);
                    border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 10px 12px; text-align: center; cursor: pointer; margin-top: 14px; }
  .fighter select option { color: #111; font-size: 15px; }
  .f-score { margin-top: 14px; }
  .f-score b { display: block; font-family: "Russo One"; font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; font-variant-numeric: tabular-nums; }
  .f-score small { font-family: var(--dot); font-size: 12px; opacity: .6; }
  .f-stamp { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) scale(0) rotate(-10deg); font-family: "Russo One"; font-size: 26px; color: #05070d;
             background: #ffd84d; padding: 4px 18px; border-radius: 8px; box-shadow: 0 0 30px rgba(255,216,77,.7); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .fighter.win { transform: scale(1.04); box-shadow: 0 0 0 3px #ffd84d, 0 0 50px rgba(255,216,77,.35); }
  .fighter.win .f-stamp { transform: translateX(-50%) scale(1) rotate(-6deg); }
  .fighter.lose { filter: grayscale(.8) brightness(.6); transform: scale(.97); }
  .vs-mid { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .vs-word { font-family: "Russo One"; font-size: clamp(54px, 7vw, 96px); line-height: 1; font-style: italic;
             background: linear-gradient(180deg, #fff 30%, #ffd84d); -webkit-background-clip: text; background-clip: text; color: transparent;
             filter: drop-shadow(0 0 18px rgba(255,216,77,.5)); }
  .vs-word.hit { animation: vshit .6s cubic-bezier(.3,1.6,.5,1); }
  @keyframes vshit { 0% { transform: scale(2.2); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 80% { transform: scale(1.06) rotate(-3deg); } 100% { transform: none; } }
  .vs-fight { background: #fff; color: #05070d; border: none; border-radius: 99px; padding: 10px 20px; font-family: "Russo One"; font-size: 14px; cursor: pointer; }
  .vs-fight:hover { background: #ffd84d; }
  .vs-bar { position: relative; height: 18px; border-radius: 99px; background: rgba(255,255,255,.08); margin: 26px 0 8px; overflow: visible; }
  .vs-bar i { position: absolute; top: 0; bottom: 0; width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
  .vs-bar .l { left: 0; border-radius: 99px 0 0 99px; background: linear-gradient(90deg, #4d6bff, #7a93ff); box-shadow: 0 0 16px rgba(122,147,255,.6); }
  .vs-bar .r { right: 0; border-radius: 0 99px 99px 0; background: linear-gradient(270deg, #ff3b5c, #ff6b85); box-shadow: 0 0 16px rgba(255,107,133,.6); }
  .spark { position: absolute; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; opacity: 0; pointer-events: none;
           background: radial-gradient(circle, #fff 0%, #ffd84d 35%, transparent 70%); }
  .spark.on { animation: spark .6s ease-out; }
  @keyframes spark { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }
  .vs-specs { display: grid; gap: 6px; margin-top: 18px; }
  .spec { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); }
  .spec .k { text-align: center; font-family: var(--dot); font-size: 13px; opacity: .6; }
  .spec .v { font-family: "Russo One", var(--dot); font-size: 16px; opacity: .65; }
  .spec .v:first-child { text-align: right; }
  .spec .v.w { opacity: 1; color: #ffd84d; }
  .spec .v.w::after { content: " ◀"; font-size: 11px; }
  .spec .v:last-child.w::after { content: ""; }
  .spec .v:last-child.w::before { content: "▶ "; font-size: 11px; }
  .vs-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
  .vs-foot small { font-size: 12px; opacity: .5; }

  /* ===== CONTINUE? ===== */
  .cont { margin-top: 20px; min-height: 80vh; display: grid; place-items: center; text-align: center; padding: 60px 16px;
          background: radial-gradient(ellipse at 50% 60%, rgba(255,59,92,.18), transparent 60%), #000; position: relative; overflow: hidden; }
  .cont::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); }
  .cont-q { font-family: "Russo One"; font-size: clamp(40px, 7vw, 96px); letter-spacing: .06em; animation: blink 1.2s steps(2) infinite; }
  .cont-num { font-family: "Russo One"; font-size: clamp(120px, 20vw, 260px); line-height: 1; color: #ff3b5c; text-shadow: 0 0 40px rgba(255,59,92,.6); margin: 10px 0 24px; font-variant-numeric: tabular-nums; }
  .cont.over .cont-num { font-size: clamp(48px, 9vw, 120px); color: #fff; text-shadow: none; margin: 40px 0 40px; }
  .cont-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
  .cont-btns button { border-radius: 14px; padding: 14px 28px; font-family: "Russo One", var(--title); font-size: 20px; cursor: pointer; display: grid; gap: 2px; min-width: 220px; }
  .cont-btns small { font-family: "Noto Sans JP"; font-size: 12px; font-weight: 700; opacity: .7; }
  .cont-yes { background: #ffd84d; color: #05070d; border: none; box-shadow: 0 0 30px rgba(255,216,77,.4); }
  .cont-yes:hover { transform: translateY(-2px); }
  .cont-no { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); }
  .cont-msg { margin-top: 26px; font-size: 14px; opacity: .7; position: relative; z-index: 1; }

  /* ===== ヘッダー：BTO検索ボタン（いちばん目立たせる） ===== */
  .bto-cta { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #05070d; position: relative; overflow: hidden;
             background: linear-gradient(135deg, #ffe680, #ffc21a); border-radius: 14px; padding: 7px 18px 7px 8px; margin-right: 6px;
             box-shadow: 0 0 0 2px rgba(255,216,77,.35), 0 0 28px rgba(255,216,77,.45); animation: ctaGlow 2.4s ease-in-out infinite; transition: transform .15s; }
  .bto-cta:hover { transform: translateY(-2px) scale(1.02); }
  .bto-cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
                    background: linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent); animation: ctaShine 3.2s ease-in-out infinite; }
  @keyframes ctaShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
  @keyframes ctaGlow { 50% { box-shadow: 0 0 0 3px rgba(255,216,77,.55), 0 0 46px rgba(255,216,77,.7); } }
  .bto-cta-ic { width: 34px; height: 34px; border-radius: 10px; background: #05070d; color: #ffd84d; display: grid; place-items: center; font-size: 16px; }
  .bto-cta b { display: block; font-family: "Noto Sans JP"; font-weight: 900; font-size: 15px; line-height: 1.25; }
  .bto-cta small { display: block; font-family: var(--dot); font-size: 11px; opacity: .75; }
  @media (max-width: 1440px) { .player .next, .clock { display: none; } }

  /* ===== アイキャッチのズーム ===== */
  .card .thumb, .post .thumb, .rank .th { position: relative; overflow: hidden; }
  .thumb .img, .rank .th .img { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
  .thumb .img i, .rank .th .img i { font-style: normal; font-size: 56px; opacity: .3; }
  .rank .th .img i { font-size: 24px; }
  .card:hover .img, .post:hover .img, .rank li:hover .img { transform: scale(1.15); filter: brightness(1.15); }

  /* ===== BTO検索：ステップ式 ===== */
  .bto { grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); }
  .bto-panel { gap: 18px; }
  .bto-lead { font-size: 13px; opacity: .7; }
  .bto-step-h { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 15px; margin-bottom: 10px; }
  .bto-step-h b { width: 24px; height: 24px; border-radius: 50%; background: #ffd84d; color: #05070d; display: grid; place-items: center; font-family: var(--dot); font-weight: 400; font-size: 13px; flex: none; }
  .bto-step-h small { font-weight: 700; font-size: 12px; opacity: .55; }
  .bto-opts button { padding: 11px 16px; font-size: 14px; }
  .bto-hit small { font-size: 13px; font-weight: 700; opacity: .5; margin-left: 4px; }

  /* ===== VS：キャラ選択画面風 ===== */
  .vs { position: relative; }
  .vs-lead { text-align: center; font-weight: 900; font-size: 16px; margin-bottom: 20px; }
  .vs-lead span { display: block; font-size: 12px; font-weight: 700; opacity: .6; margin-top: 2px; }
  .f-pick { width: 100%; margin-top: 14px; display: grid; gap: 6px; padding: 14px 12px; cursor: pointer; border-radius: 12px;
            background: rgba(0,0,0,.35); border: 1.5px dashed rgba(255,255,255,.35); transition: border-color .2s, background .2s; }
  .f-pick:hover { border-color: #fff; background: rgba(0,0,0,.55); }
  .f-name { font-family: "Russo One"; font-size: 24px; line-height: 1.2; }
  .f-change { font-size: 12px; font-weight: 800; color: #ffd84d; }
  .f-pick:hover .f-change { text-decoration: underline; }
  .vs-picker { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; padding: 24px; border-radius: 24px;
               background: rgba(8,6,14,.95); backdrop-filter: blur(8px); }
  .vs-picker.open { display: flex; animation: pkin .25s ease; }
  @keyframes pkin { from { opacity: 0; transform: scale(.97); } }
  .vs-picker-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-family: var(--dot); font-size: 18px; color: #ffd84d; }
  .vs-picker-h button { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); cursor: pointer; }
  .vs-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; overflow: auto; align-content: start; }
  .pk { position: relative; display: grid; gap: 10px; text-align: left; padding: 16px 14px; border-radius: 12px; cursor: pointer;
        background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12); transition: transform .15s, border-color .15s; }
  .pk:hover { transform: translateY(-3px); border-color: #ffd84d; }
  .pk.cur { border-color: #ffd84d; background: rgba(255,216,77,.1); }
  .pk-n { font-family: "Russo One"; font-size: 17px; padding-right: 60px; }
  .pk-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
  .pk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd84d, #ffb020); }
  .pk-tags { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
  .pk-tags em { font-style: normal; font-family: var(--dot); font-size: 11px; padding: 1px 6px; border-radius: 4px; }
  .pk-tags .t1 { background: #4d6bff; } .pk-tags .t2 { background: #ff3b5c; }

  /* ===== 性能ランク表（Tier表） ===== */
  .tier { border-radius: 24px; padding: 26px; background: #0d1020; border: 1px solid rgba(255,255,255,.1); }
  .tier-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
  .tier-lead { font-weight: 800; font-size: 16px; }
  .tier-lead b { color: #ffd84d; }
  .tier-lead span { display: block; font-size: 12px; font-weight: 700; opacity: .6; margin-top: 2px; }
  .tier-find { display: flex; align-items: center; gap: 8px; min-width: 320px; padding: 4px 18px; border-radius: 99px;
               background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.2); transition: border-color .2s; }
  .tier-find:focus-within { border-color: #ffd84d; }
  .tier-find input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 14px; padding: 9px 0; font-family: "Noto Sans JP"; }
  .tier-rows { display: flex; flex-direction: column; gap: 8px; }
  .tier-row { display: grid; grid-template-columns: 220px 1fr; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.035);
              opacity: 0; transform: translateX(-30px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--r) * .09s + .2s); }
  .sec.in .tier-row { opacity: 1; transform: none; }
  .tier-lbl { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--tc); color: #05070d; }
  .tier-lbl b { font-family: "Russo One"; font-weight: 400; font-size: 42px; line-height: 1; }
  .tier-lbl small { font-size: 12px; font-weight: 800; line-height: 1.4; }
  .tier-items { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; }
  .tier-chip { border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 10px; padding: 9px 14px;
               font-family: "Russo One"; font-size: 14px; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
  .tier-chip:hover { transform: translateY(-2px); border-color: var(--tc); }
  .tier-chip.on { background: var(--tc); border-color: var(--tc); color: #05070d; box-shadow: 0 0 22px color-mix(in srgb, var(--tc) 60%, transparent); }
  .tier-chip.found { animation: found .8s ease 2; }
  @keyframes found { 50% { transform: scale(1.14); box-shadow: 0 0 0 4px #fff, 0 0 30px var(--tc); } }
  .tier-detail { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 70px;
                 margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px dashed rgba(255,255,255,.15); }
  .td-hint { font-size: 13px; opacity: .6; }
  .td-main { display: flex; align-items: center; gap: 14px; }
  .td-main b { display: block; font-family: "Russo One"; font-weight: 400; font-size: 22px; }
  .td-main small { font-size: 13px; opacity: .75; }
  .td-rank { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--tc); color: #05070d; font-family: "Russo One"; font-size: 26px; }
  .td-acts { display: flex; gap: 8px; flex-wrap: wrap; }
  .td-btn { background: #ffd84d; color: #05070d; border: none; border-radius: 99px; padding: 11px 20px; font-weight: 900; cursor: pointer; font-family: "Noto Sans JP"; }
  .td-btn em { font-style: normal; font-family: var(--dot); font-weight: 400; background: #05070d; color: #ffd84d; padding: 1px 8px; border-radius: 99px; margin-left: 4px; }
  .td-btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
  .bto.flash { animation: btoflash 1.4s ease 1; }
  @keyframes btoflash { 25% { box-shadow: 0 0 0 4px #ffd84d, 0 0 90px rgba(255,216,77,.6); } }

  /* ===== 新着記事：雑誌風 ===== */
  .mag { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
  .mag-top { position: relative; min-height: 440px; border-radius: 20px; }
  .mag-top .thumb { position: absolute; inset: 0; aspect-ratio: auto; }
  .mag-top .img i { font-size: 150px; }
  .mag-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 28px 26px; background: linear-gradient(0deg, rgba(0,0,0,.88), transparent); }
  .mag-tag { display: inline-block; font-family: var(--dot); font-size: 12px; color: #05070d; padding: 2px 10px; border-radius: 4px; }
  .mag-new { font-family: var(--dot); font-size: 12px; color: #ff6b85; margin-left: 10px; animation: blink 1.2s steps(2) infinite; }
  .mag-top h3 { font-family: "Noto Sans JP"; font-size: 26px; font-weight: 900; line-height: 1.5; margin-top: 10px; -webkit-line-clamp: 3; min-height: 0; }
  .mag-list { display: flex; flex-direction: column; gap: 10px; }
  .mag-row { display: grid; grid-template-columns: 160px 1fr; align-items: stretch; border-radius: 14px; flex: 1; }
  .mag-row .thumb { aspect-ratio: auto; min-height: 76px; }
  .mag-row .img i { font-size: 32px; }
  .mag-row .body { padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; }
  .mag-row h3 { font-size: 14px; min-height: 0; }
  .mag-cat { font-family: var(--dot); font-size: 12px; }
  .mag-row .date { margin-top: 4px; }

  /* 性能ランク表：GPU/CPU 切り替えスイッチ */
  .tier-kind { display: inline-block; font-size: .6em; vertical-align: middle; background: #ffd84d; color: #05070d; padding: 2px 12px; border-radius: 8px; margin-left: 6px; }
  .tier-switch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .ts-lbl { font-weight: 900; font-size: 14px; }
  .ts-lbl::after { content: " ▶"; color: #ffd84d; font-size: 11px; }
  .ts-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 16px; background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.18); min-width: 360px; }
  .ts-knob { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 12px; background: linear-gradient(135deg, #ffe680, #ffc21a);
             box-shadow: 0 0 20px rgba(255,216,77,.45); transition: transform .35s cubic-bezier(.3,1.3,.5,1); }
  .ts-seg[data-k="cpu"] .ts-knob { transform: translateX(100%); }
  .ts-seg button { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left;
                   background: none; border: none; padding: 8px 14px; cursor: pointer; color: #fff; transition: color .25s; }
  .ts-seg button span { grid-row: span 2; font-size: 22px; }
  .ts-seg button b { font-family: "Russo One"; font-weight: 400; font-size: 18px; line-height: 1.1; }
  .ts-seg button small { font-size: 11px; font-weight: 700; opacity: .7; }
  .ts-seg button.on { color: #05070d; }
  .tier-top { margin-bottom: 10px; }
  .tier-lead { margin-bottom: 16px; }

  /* ===== 見た目の個性：絵文字は使わない／角を立てる／背景に模様 ===== */
  /* 線だけの単色アイコン */
  .ic-svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; flex: none; }
  .icon-btn .ic-svg { width: 18px; height: 18px; }
  .bto-cta-ic .ic-svg { width: 18px; height: 18px; stroke-width: 2.2; }
  .tier-find .ic-svg { opacity: .6; width: 18px; height: 18px; }
  .player .ava { font-family: var(--dot); font-size: 12px; border-radius: 4px; }

  /* カテゴリーのタイル：英字のロゴ文字 */
  .tile { border-radius: 6px; }
  .tile .code { position: absolute; left: 14px; right: 8px; top: 50%; transform: translateY(-60%); font-family: "Russo One"; line-height: 1; letter-spacing: .02em;
                font-size: calc(30px * var(--k)); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); transition: font-size .3s; }
  .tile.active .code { font-size: calc(46px * var(--k)); }
  .tile .name { font-size: 11px; opacity: .85; }
  .tile.active .name { font-size: 13px; }
  @media (min-width: 1800px) { .tile .code { font-size: calc(36px * var(--k)); } .tile.active .code { font-size: calc(56px * var(--k)); } }
  @media (min-width: 2300px) { .tile .code { font-size: calc(40px * var(--k)); } .tile.active .code { font-size: calc(64px * var(--k)); } }

  /* 仮サムネイル：英字を線で＋斜線の模様（本番は記事画像に置き換わる） */
  .thumb .img::after, .rank .th .img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 10px); }
  .thumb .img i, .rank .th .img i { font-style: normal; font-family: "Russo One"; opacity: 1; color: transparent; letter-spacing: .02em;
    -webkit-text-stroke: 1.5px rgba(255,255,255,.4); font-size: 46px; white-space: nowrap; }
  .mag-top .img i { font-size: 150px; -webkit-text-stroke-width: 2px; }
  .mag-row .img i { font-size: 22px; -webkit-text-stroke-width: 1px; }
  .rank .th .img i { font-size: 15px; -webkit-text-stroke-width: 1px; }

  /* 角丸を控えめに（丸いカードの量産感をなくす） */
  .card, .post, .rank li, .yt-main, .bto, .tier, .tier-row, .tier-detail, .bto-result, .stats, .mag-top, .mag-row, .rank .th { border-radius: 4px !important; }
  .btn-main, .btn-sub, .bto-go, .td-btn, .db-btn, .btn-ghost, .btn-red, .chip, .bto-opts button, .tier-chip, .icon-btn, .player,
  .cont-btns button, .to-top, .menu a, .ts-seg, .ts-knob, .tier-find, .bto-cta, .shelf-head .nav button, .bto-badge, .tier-kind { border-radius: 3px !important; }
  /* 大きなパネルは角を斜めに落とす（ゲームの画面表示風） */
  :root { --cut: 18px; }
  .bto, .tier, .mag-top, .yt-main {
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
  /* 主役のボタンは平行四辺形に */
  .btn-main, .bto-go, .td-btn, .db-btn, .cont-yes { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-left: 30px; padding-right: 30px; }
  .bto-go, .td-btn, .db-btn { box-shadow: none !important; }

  /* 背景の模様：細かいドットの格子＋セクション名を大きく薄く */
  .lower { background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.3px); background-size: 22px 22px; }
  .sec { position: relative; isolation: isolate; }
  .sec::before { content: attr(data-name); position: absolute; z-index: -1; right: -1%; top: -46px; pointer-events: none; white-space: nowrap;
                 font-family: "Russo One"; font-size: clamp(64px, 10vw, 170px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); }
  .duo .sec::before { font-size: clamp(48px, 6vw, 110px); right: 0; }
  /* 見出しの上に、計器のような目盛り線 */
  .sec::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -20px; height: 8px; pointer-events: none;
                background: linear-gradient(90deg, rgba(255,255,255,.22), transparent 70%) top / 100% 1px no-repeat,
                            repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 12px) top / 50% 6px no-repeat; }
  /* ヒーロー：細い方眼を重ねる */
  .bg .scan { background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
                          linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 64px 64px,
                          linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 64px 64px; }

  /* ===== カテゴリーのタイル：枠だけ。選ぶと後ろがぼわっと色づく ===== */
  .tile { background: rgba(255,255,255,.035); border: 1.5px solid rgba(255,255,255,.16); isolation: isolate; backdrop-filter: blur(6px);
          display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 14px 14px 14px;
          transition: width .3s ease, height .3s ease, transform .3s ease, border-color .3s, background .3s; }
  .tile .glow { position: absolute; inset: -22%; z-index: -1; border-radius: 50%; pointer-events: none;
                background: radial-gradient(circle, var(--tc) 0%, transparent 66%); filter: blur(22px);
                opacity: 0; transform: scale(.7); transition: opacity .45s, transform .6s cubic-bezier(.2,.8,.2,1); }
  .tile:hover { border-color: color-mix(in srgb, var(--tc) 70%, transparent); background: rgba(255,255,255,.06); }
  .tile:hover .glow { opacity: .4; transform: scale(.9); }
  .tile.active { border-color: var(--tc); background: rgba(0,0,0,.25); }
  .tile.active .glow { opacity: .85; transform: scale(1.05); }
  .tile .num { position: static; font-family: "Press Start 2P", var(--dot); font-size: 16px; line-height: 1; color: var(--tc); opacity: 1;
               text-shadow: 0 0 10px color-mix(in srgb, var(--tc) 60%, transparent); transition: font-size .3s; }
  .tile.active .num { font-size: 22px; }
  /* 英字と日本語は下にまとめて縦に積む（重ならない） */
  .tile .code { position: static; transform: none; left: auto; right: auto; margin-top: auto; font-size: calc(26px * var(--k)); }
  .tile.active .code { font-size: calc(40px * var(--k)); }
  .tile .name { margin-top: 6px; opacity: .75; }
  @media (min-width: 1800px) {
    .tile .num { font-size: 18px; } .tile.active .num { font-size: 26px; }
    .tile .code { font-size: calc(32px * var(--k)); } .tile.active .code { font-size: calc(50px * var(--k)); }
  }
  @media (min-width: 2300px) {
    .tile .num { font-size: 20px; } .tile.active .num { font-size: 30px; }
    .tile .code { font-size: calc(36px * var(--k)); } .tile.active .code { font-size: calc(58px * var(--k)); }
  }

  /* ===== アイキャッチの比率を実際の画像（16:9）に合わせる ===== */
  .card .thumb { aspect-ratio: 16/9; }
  .mag-top { min-height: 0; display: flex; flex-direction: column; background: rgba(255,255,255,.05); }
  .mag-top .thumb { position: relative; inset: auto; aspect-ratio: 16/9; }
  .mag-cap { position: static; padding: 18px 22px 22px; background: none; }
  .mag-top h3 { font-size: 22px; }
  .mag-row { grid-template-columns: 168px 1fr; align-items: center; }
  .mag-row .thumb { aspect-ratio: 16/9; min-height: 0; }

  /* ===== 中くらいの幅（小さめのノートPC・タブレット）：ヘッダーを1行に収める ===== */
  .menu a, .bto-cta b, .logo { white-space: nowrap; }
  @media (max-width: 1240px) {
    .topbar .left { gap: 18px; }
    .menu { gap: 2px; }
    .menu a { padding: 7px 10px; font-size: 13px; }
    .bto-cta { padding-right: 14px; }
    .bto-cta small, .icon-btn .lbl { display: none; }
  }
  @media (max-width: 1020px) { .menu { display: none; } }

  /* ===== 引き算：光は2か所だけ／飾りは2つだけ／色は黒・白・黄＋選んだときだけカテゴリー色／ドット書体は一部だけ ===== */
  :root { --dot: "Inter", "Noto Sans JP", sans-serif; --pixel: "DotGothic16", monospace; }
  body, .footer { background: #08080a; }
  .lower { background-color: #0b0b0d; }

  /* 1. 光らせるのは「選んだタイル」と「BTO検索ボタン」だけ */
  .tile.active { animation: none; box-shadow: none; }
  .tile .num, .tile .code { text-shadow: none; }
  .tile .badge { animation: none; box-shadow: none; }
  .gauge i.fill, .gauge.gold i.fill, .boot-bar i.fill { box-shadow: none !important; }
  .bto { box-shadow: none; }
  .bto-total b { text-shadow: none; }
  .tier-chip.on, .ts-knob, .cont-yes, .player.up { box-shadow: none !important; }
  .cont-num { text-shadow: none; color: #ffd84d; }
  .mag-new { animation: none; }
  .tile .num { color: rgba(255,255,255,.45); transition: color .3s, font-size .3s; }
  .tile:hover .num, .tile.active .num { color: var(--tc); }

  /* 2. 飾りは「セクション名の大きな英字」と「流れる帯」の2つだけ */
  .bg .scan, .cont::after { display: none; }
  .lower { background-image: none; }
  .sec::after { display: none; }
  .thumb .img::after, .rank .th .img::after, .bto-side::after { display: none; }

  /* 3. 色は黒・白・黄色。カテゴリー色はヒーローで選んだときだけ */
  .thumb .img, .rank .th .img { background: linear-gradient(135deg, #24252b, #141519) !important; }
  .thumb .img i, .rank .th .img i { -webkit-text-stroke-color: rgba(255,255,255,.22); }
  .sec-head .en { color: #ffd84d; }
  .chip.on { background: #fff !important; border-color: #fff !important; color: #05070d; }
  .mag-tag { background: #fff !important; color: #05070d; }
  .mag-cat { color: rgba(255,255,255,.55) !important; }
  .ribbon.r2 { background: #f2f2f2; color: #05070d; }
  .tier { background: #111114; }
  .bto-side { background: #16130a; }

  /* 4. ドットの書体は「番号」と「ゲーム画面らしい場所」だけ（ステータス・起動画面・ステージ表示） */
  .stats, .boot-inner, .hud, .logo small { font-family: var(--pixel); }

  /* ===== メニューのジャンプと、PC用の追従ヘッダー ===== */
  html { scroll-behavior: smooth; }
  .sec { scroll-margin-top: 120px; }
  .minibar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; background: rgba(8,8,10,.88); backdrop-filter: blur(12px);
             border-bottom: 1px solid rgba(255,255,255,.1); transform: translateY(-105%); transition: transform .3s ease; }
  .minibar.show { transform: none; }
  .minibar-in { display: flex; align-items: center; gap: 28px; height: 60px; }
  .minibar .logo { font-size: 16px; }
  .minibar .menu { flex: 1; }
  .minibar .bto-cta { padding-top: 5px; padding-bottom: 5px; }
  .minibar .bto-cta small { display: none; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* ===== スマホ ===== */
  @media (max-width: 760px) {
    body { padding-bottom: 68px; }
    :root { --gut: 16px; }
    .hero { padding: 14px 0 28px; min-height: auto; }
    .menu, .clock, .icon-btn .lbl, .icon-btn.search, .player .next { display: none; }
    .logo { font-size: 16px; }
    .logo small { font-size: 9px; }
    .player { padding-right: 10px; }
    .tiles { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; gap: 14px; margin-top: 22px; }
    .tile, .tile.active { width: auto; height: auto; aspect-ratio: 1; border-radius: 18px; padding: 10px; }
    .tile .name, .tile.active .name { font-size: 12px; }
    .tile .glyph, .tile.active .glyph { font-size: 40px; }
    .tile .num { top: 8px; left: 10px; font-size: 11px; }
    .tile.active::before { inset: -7px; }
    @keyframes cursor { 50% { inset: -10px; } }
    .main { margin-top: 22px; gap: 28px; }
    .stats { flex: 1 1 100%; }
    .shelf-head { margin-top: 0; padding-top: 30px; }
    .shelf-head .nav { display: none; }
    .cards { grid-auto-columns: 72%; margin-top: 10px; padding-bottom: 12px; }
    .guide { display: none; }
    .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
              background: rgba(10,12,20,.92); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.1);
              padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
    .tabbar a { color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; opacity: .55; padding: 4px 0; }
    .tabbar a .ic { font-size: 20px; line-height: 1.2; }
    .tabbar a.active { opacity: 1; color: var(--accent); }
    .toast { top: 64px; }
    .lower { padding: 48px 0 24px; }
    .sec { margin-bottom: 52px; }
    .sec-head h2 { font-size: 22px; }
    .tutorial { grid-template-columns: 1fr; padding: 22px 20px; }
    .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 4px; }
    .chip { flex: none; }
    .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .post .body { padding: 10px; } .post h3 { font-size: 13px; }
    .db-body { grid-template-columns: 1fr; gap: 18px; }
    .hud { display: none; }
    .minibar { display: none; }
    .sec { scroll-margin-top: 40px; }

    .tile .code, .tile.active .code { font-size: calc(21px * var(--k)); }
    .tile, .tile.active { padding: 10px; }
    .tile .num, .tile.active .num { font-size: 12px; }
    .mag-top h3 { font-size: 18px; }
    .mag-row { grid-template-columns: 120px 1fr; }
    .tile .name, .tile.active .name { font-size: 10px; }
    .tabbar a .ic .ic-svg { width: 22px; height: 22px; }
    .tabbar a.cta .ic { color: #05070d; border-radius: 6px !important; }
    .tabbar a.cta .ic .ic-svg { width: 24px; height: 24px; stroke-width: 2.2; }
    .sec::before { top: -34px; }
    .thumb .img i { font-size: 34px; }

    .tier { padding: 16px 12px; }
    .tier-find { min-width: 0; width: 100%; }
    .ts-seg { min-width: 0; width: 100%; }
    .ts-seg button { padding: 8px 10px; }
    .tier-row { grid-template-columns: 1fr; }
    .tier-lbl { padding: 8px 12px; }
    .tier-lbl b { font-size: 28px; }
    .tier-items { padding: 10px; gap: 6px; }
    .tier-chip { padding: 8px 10px; font-size: 13px; }
    .td-acts, .td-btn { width: 100%; }
    .mag { grid-template-columns: 1fr; }
    .mag-top { min-height: 280px; }
    .mag-top h3 { font-size: 19px; }
    .mag-row { grid-template-columns: 110px 1fr; }
    .bto-cta { display: none; }
    .tabbar a.cta { opacity: 1; color: #ffd84d; }
    .tabbar a.cta .ic { width: 54px; height: 54px; margin-top: -28px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
                        background: linear-gradient(135deg, #ffe680, #ffc21a); box-shadow: 0 0 0 4px #0a0c14, 0 0 22px rgba(255,216,77,.6); animation: ctaGlow 2.4s ease-in-out infinite; }
    .bto-opts button { padding: 10px 12px; font-size: 13px; }
    .f-name { font-size: 16px; }
    .vs-picker { padding: 14px; }
    .vs-picker-grid { grid-template-columns: 1fr 1fr; }
    .pk { padding: 12px 10px; }
    .pk-n { font-size: 14px; padding-right: 0; padding-top: 14px; }

    .bto { grid-template-columns: 1fr; }
    .bto-side { padding: 22px; }
    .bto-panel { padding: 20px 18px; }
    .bto-row { grid-template-columns: 1fr; gap: 8px; }
    .bto-result { flex-direction: column; align-items: stretch; text-align: center; }
    .bto-hit { justify-content: center; }
    .bto-go { width: 100%; }
    .vs { padding: 18px 14px; }
    .vs-arena { grid-template-columns: 1fr 1fr; gap: 12px; }
    .vs-mid { grid-column: 1 / -1; grid-row: 1; flex-direction: row; justify-content: center; }
    .vs-word { font-size: 52px; }
    .fighter { padding: 16px 10px; }
    .fighter select { font-size: 15px; padding: 8px 6px; }
    .f-stamp { font-size: 18px; }
    .spec { grid-template-columns: 1fr 76px 1fr; padding: 7px 8px; }
    .spec .v { font-size: 13px; }
    .cont-btns button { min-width: 0; width: 100%; }
    .cont { min-height: 70vh; }

    .ribbon { font-size: 14px; padding: 9px 0; margin-bottom: 44px; }
    .db-card { padding: 18px; } .db-card h3 { font-size: 20px; }
    .duo { grid-template-columns: 1fr; gap: 0; }
    .rank li { grid-template-columns: 34px 76px 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-grid > :first-child { grid-column: 1 / -1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sec .rv, .sec .sec-head h2, .tier-row { opacity: 1 !important; transform: none !important; }
    .db-chart .bar .tr i { width: var(--w) !important; }
    *, *::before { animation: none !important; transition: none !important; }
  }

  /* ===================================================================
     WordPress 組み込み用の追加
     =================================================================== */
  .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  a.card, a.post, .rank a, .mag a { color: inherit; text-decoration: none; }
  .rank li > a { display: contents; }
  /* アイキャッチ画像 */
  .thumb .img img, .rank .th .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .img.has-img i { display: none; }
  .img.has-img { background: #111 !important; }
  /* 記事がまだないとき */
  .empty-msg { padding: 28px 20px; border: 1px dashed rgba(255,255,255,.2); border-radius: 4px; font-size: 14px; opacity: .7; }
  .cards .empty-msg { min-width: 280px; }
  /* YouTube：クリックしたときに動画を読み込む */
  .yt-main { background-size: cover; background-position: center; }
  .yt-main.has-thumb::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
  .yt-main .play, .yt-main .cap { position: relative; z-index: 1; }
  .yt-main .cap { position: absolute; }
  .yt-main iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
  a.btn-red { text-decoration: none; display: inline-block; }
  /* BTO検索：準備中・台数を出さないとき */
  .bto-go[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; }
  .bto.no-count .bto-hit { display: none; }
  .bto.no-count .bto-result { justify-content: flex-end; }
  .bto-soon { display: inline-block; font-size: 12px; font-weight: 800; color: #05070d; background: #ffd84d; padding: 2px 8px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }
  .bto-total .soon { font-family: "Noto Sans JP"; font-size: 22px; font-weight: 900; color: #ffd84d; }
  a.bto-cta.is-soon small, .minibar a.bto-cta.is-soon small { display: block; }
  /* カテゴリーの「すべて見る」がリンクのとき */
  a.card.more { text-decoration: none; color: inherit; }
  /* サイト内検索のパネル */
  .search-ov { position: fixed; inset: 0; z-index: 90; display: none; place-items: start center; padding-top: 18vh; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
  .search-ov.open { display: grid; }
  .search-ov form { width: min(640px, calc(100% - 32px)); display: flex; gap: 8px; }
  .search-ov input { flex: 1; font: inherit; font-size: 17px; padding: 16px 18px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.3); background: #111114; color: #fff; outline: none; }
  .search-ov input:focus { border-color: #ffd84d; }
  .search-ov button { font: inherit; font-weight: 900; padding: 0 22px; border: none; border-radius: 3px; background: #ffd84d; color: #05070d; cursor: pointer; }
  /* 管理バーが出ているとき（ログイン中） */
  body.admin-bar .minibar { top: 32px; }
  @media (max-width: 782px) { body.admin-bar .minibar { top: 46px; } }
  [hidden] { display: none !important; }
  a.btn-main, a.td-btn, a.db-btn, .logo { text-decoration: none; }
  a.td-btn, a.db-btn { display: inline-block; }
  a.logo { color: inherit; }

  /* ===== 性能ランク表：派手な色分けをやめ、Sだけ黄色・ほかは濃淡で ===== */
  .tier-lbl { background: #17171b; color: #fff; border-left: 4px solid var(--tc); }
  .tier-lbl b { color: var(--tc); }
  .tier-lbl small { color: rgba(255,255,255,.7); }
  .tier-row { background: rgba(255,255,255,.025); }
  .tier-chip:hover { border-color: rgba(255,255,255,.6); }
  .tier-chip.on { background: #ffd84d; border-color: #ffd84d; color: #05070d; box-shadow: none; }
  .tier-chip.found { animation: none; background: #ffd84d; border-color: #ffd84d; color: #05070d; }
  .td-rank { background: #17171b; color: var(--tc); border: 2px solid var(--tc); }
  .td-score { display: block; margin-top: 4px; font-size: 12px; opacity: .75; }
  .td-score b { font-family: "Russo One"; font-weight: 400; font-size: 15px; color: #ffd84d; margin-left: 4px; }

  /* 起動画面を出さないとき */
  .utp-skip-boot .boot { display: none; }

  /* ===== ヒーローより下は横幅を狭めて読みやすく（大きい画面でも広がりすぎない） ===== */
  .lower .wrap, .footer .wrap { max-width: calc(1180px + var(--gut) * 2); }
  .mag { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mag-top h3 { font-size: 20px; }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .sec::before { font-size: clamp(56px, 7vw, 120px); }
  .sns .sns-note { width: auto; padding: 0 12px; border-radius: 19px; font-size: 12px; }
  @media (max-width: 760px) { .mag, .duo { grid-template-columns: 1fr; } .duo { gap: 0; } }

  /* ===== スマホ：タイルのすぐ下に記事のカードを置き、タップした結果がその場で見えるように ===== */
  @media (max-width: 760px) {
    .hero > .wrap > .topbar { order: 0; }
    .hero > .wrap > .tiles { order: 1; margin-top: 16px; gap: 10px; }
    .hero > .wrap > .shelf-head { order: 2; padding-top: 16px; }
    .hero > .wrap > .cards { order: 3; }
    .hero > .wrap > .main { order: 4; margin-top: 18px; }
    .tile, .tile.active { aspect-ratio: 5 / 4; }
    .tile .code, .tile.active .code { font-size: calc(19px * var(--k)); }
    .shelf-head .label { font-size: 13px; opacity: 1; color: var(--accent); }
    .info #title { font-size: 30px; margin: 2px 0 6px; }
    .info p { min-height: 0; font-size: 14px; }
    .actions { margin-top: 12px; }
  }

  /* ===== ヘッダーのBTO検索ボタンを大きく（画面幅に合わせて段階的に） ===== */
  .topbar .bto-cta { min-width: 270px; padding: 10px 26px 10px 10px; gap: 12px; }
  .topbar .bto-cta-ic { width: 42px; height: 42px; border-radius: 12px; }
  .topbar .bto-cta-ic .ic-svg { width: 21px; height: 21px; }
  .topbar .bto-cta b { font-size: 18px; letter-spacing: .02em; }
  .topbar .bto-cta small { font-size: 12px; }
  @media (max-width: 1440px) { .topbar .bto-cta { min-width: 236px; } .topbar .bto-cta b { font-size: 16px; } }
  @media (max-width: 1240px) { .topbar .bto-cta { min-width: 0; padding: 8px 18px 8px 8px; } .topbar .bto-cta-ic { width: 34px; height: 34px; } }
  .icon-btn .lbl { white-space: nowrap; }
  @media (max-width: 1440px) { .topbar .icon-btn .lbl { display: none; } }

  /* ===== ヒーローの背景動画 ===== */
  .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .bg.has-media .layer { z-index: 1; }
  .bg.has-media .layer.on { opacity: .5; }
  .bg.has-media .big { -webkit-text-stroke-color: rgba(255,255,255,.08); }
  .bg.has-media::after { z-index: 2;
    background: linear-gradient(90deg, rgba(5,7,13,.9) 0%, rgba(5,7,13,.55) 45%, rgba(5,7,13,.25) 100%),
                linear-gradient(0deg, rgba(5,7,13,1) 0%, rgba(5,7,13,0) 45%); }