/* HourPlay 公開サイトの共通スタイル。
   ここが唯一の定義。ページ側に <style> を書かないこと
   （以前は使い方ページと設定一覧ページで同じ変数を二重に持っていた）。 */
/* ===== tokens (dark = base) ===== */
  :root{
    --bg:#0e1116; --bg2:#12161d; --panel:#171b22; --panel2:#1d222c;
    --line:#272d38; --line2:#39424f;
    --text:#e7edf4; --muted:#9aa7b7; --faint:#6b7688;
    --accent:#3ddc84; --accent-ink:#052a17; --accent-soft:rgba(61,220,132,.14);
    --blurple:#5865F2; --blurple-ink:#fff;
    --amber:#f5c451; --cold:#5aa8ff; --danger:#ff6b6b;
    --radius:14px; --maxw:960px;
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 34px rgba(0,0,0,.38);
    --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    --sans:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  }
  @media (prefers-color-scheme: light){
    :root{
      --bg:#f4f7fa; --bg2:#eaeef4; --panel:#ffffff; --panel2:#f5f7fb;
      --line:#e3e8ef; --line2:#d0d8e2;
      --text:#111821; --muted:#54606f; --faint:#8b97a6;
      --accent:#0f9d57; --accent-ink:#ffffff; --accent-soft:rgba(15,157,87,.12);
      --blurple:#4a55d4; --amber:#a9761a; --cold:#2f7fd6; --danger:#d64848;
      --shadow:0 1px 0 rgba(0,0,0,.02), 0 10px 26px rgba(24,38,63,.09);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0e1116; --bg2:#12161d; --panel:#171b22; --panel2:#1d222c;
    --line:#272d38; --line2:#39424f;
    --text:#e7edf4; --muted:#9aa7b7; --faint:#6b7688;
    --accent:#3ddc84; --accent-ink:#052a17; --accent-soft:rgba(61,220,132,.14);
    --blurple:#5865F2; --amber:#f5c451; --cold:#5aa8ff; --danger:#ff6b6b;
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 34px rgba(0,0,0,.38);
  }
  :root[data-theme="light"]{
    --bg:#f4f7fa; --bg2:#eaeef4; --panel:#ffffff; --panel2:#f5f7fb;
    --line:#e3e8ef; --line2:#d0d8e2;
    --text:#111821; --muted:#54606f; --faint:#8b97a6;
    --accent:#0f9d57; --accent-ink:#ffffff; --accent-soft:rgba(15,157,87,.12);
    --blurple:#4a55d4; --amber:#a9761a; --cold:#2f7fd6; --danger:#d64848;
    --shadow:0 1px 0 rgba(0,0,0,.02), 0 10px 26px rgba(24,38,63,.09);
  }

  *{box-sizing:border-box}
  body{margin:0;background:
      radial-gradient(1100px 460px at 78% -8%, var(--accent-soft), transparent 60%),
      var(--bg);
    color:var(--text);font-family:var(--sans);line-height:1.7;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
  a{color:inherit;text-decoration:none}
  code,.mono{font-family:var(--mono)}
  h1,h2,h3{text-wrap:balance;margin:0}
  section{padding:64px 0;border-top:1px solid var(--line)}
  .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    font-weight:700;margin-bottom:12px}
  h2.title{font-size:clamp(22px,3.4vw,30px);letter-spacing:-.01em}
  .lead{color:var(--muted);max-width:60ch;margin:10px 0 0}

  .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;
    padding:11px 18px;border-radius:11px;font-weight:700;font-size:14px;cursor:pointer;
    transition:transform .12s ease, filter .12s ease, border-color .12s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn-accent{background:var(--accent);color:var(--accent-ink)}
  .btn-discord{background:var(--blurple);color:#fff}
  .btn-ghost{background:transparent;border-color:var(--line2);color:var(--text)}
  .btn-ghost:hover{border-color:var(--accent)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

  /* ===== nav ===== */
  nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;gap:18px;height:60px}
  .brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em;font-size:17px}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft)}
  .navlinks{display:none;gap:20px;margin-left:auto;font-size:14px;color:var(--muted)}
  .navlinks a:hover{color:var(--text)}
  nav .btn{margin-left:auto;padding:8px 14px}
  @media(min-width:820px){ .navlinks{display:flex} nav .btn{margin-left:8px} }

  /* ===== hero ===== */
  header.hero{padding:66px 0 20px;text-align:center}
  .badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
    border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 13px;margin-bottom:22px}
  h1{font-size:clamp(30px,6vw,52px);line-height:1.1;letter-spacing:-.025em}
  h1 .hl{color:var(--accent)}
  header .sub{color:var(--muted);font-size:clamp(15px,2.3vw,18px);max-width:52ch;margin:18px auto 0}
  .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

  /* ===== discord mock ===== */
  .stage{margin:44px auto 0;max-width:560px}
  .chat{background:var(--panel);border:1px solid var(--line);border-radius:16px;
    box-shadow:var(--shadow);overflow:hidden;text-align:left}
  .chat .bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line);
    color:var(--faint);font-size:13px}
  .chan{color:var(--muted);font-weight:600}
  .traffic{width:11px;height:11px;border-radius:50%;background:var(--line2)}
  .msg{display:flex;gap:12px;padding:14px 16px}
  .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
    font-weight:800;font-size:15px;color:#fff}
  .av.u{background:linear-gradient(150deg,#8a93a6,#5c6577)}
  .av.b{background:linear-gradient(150deg,var(--accent),#22a866);color:var(--accent-ink)}
  .who{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px}
  .tag{font-size:10px;font-weight:800;letter-spacing:.04em;background:var(--blurple);color:#fff;
    padding:1px 6px;border-radius:5px;text-transform:uppercase}
  .body{font-size:14.5px;margin-top:3px}
  .cmd{font-family:var(--mono);background:var(--panel2);border:1px solid var(--line);
    padding:2px 7px;border-radius:7px;font-size:13.5px}
  .cmd .slash{color:var(--accent)}
  .rich{margin-top:8px;border-left:3px solid var(--accent);background:var(--panel2);
    border-radius:0 10px 10px 0;padding:11px 14px;font-size:14px}
  .rich .k{color:var(--muted)}
  .addr{font-family:var(--mono);color:var(--accent);font-size:13.5px}
  .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
  .pill{font-size:12.5px;font-weight:700;border-radius:8px;padding:6px 11px;border:1px solid var(--line2);
    background:var(--panel);color:var(--text)}
  .pill.stop{border-color:transparent;background:var(--danger);color:#fff}

  /* ===== steps ===== */
  .steps{display:grid;gap:16px;grid-template-columns:1fr;counter-reset:s}
  @media(min-width:720px){ .steps{grid-template-columns:repeat(3,1fr)} }
  .step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:24px 22px 22px}
  .step .n{counter-increment:s;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent-ink);
    background:var(--accent);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:14px}
  .step .n::before{content:counter(s)}
  .step h3{font-size:16px}
  .step p{color:var(--muted);font-size:14px;margin:6px 0 0}

  /* ===== command groups ===== */
  .cmdgroup{margin-top:26px}
  .cmdgroup>h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
    margin-bottom:12px;font-weight:700}
  .cmdgrid{display:grid;gap:10px;grid-template-columns:1fr}
  @media(min-width:640px){ .cmdgrid{grid-template-columns:1fr 1fr} }
  .crow{display:flex;gap:14px;align-items:baseline;background:var(--panel);border:1px solid var(--line);
    border-radius:11px;padding:13px 15px}
  .crow .c{font-family:var(--mono);font-size:13.5px;white-space:nowrap;color:var(--text)}
  .crow .c b{color:var(--accent);font-weight:400}
  .crow .d{color:var(--muted);font-size:13.5px}
  .ownerbadge{font-size:10px;font-weight:800;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%, transparent);
    border-radius:5px;padding:0 5px;margin-left:4px;white-space:nowrap}

  /* ===== pricing ===== */
  .plans{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
  @media(min-width:820px){ .plans{grid-template-columns:repeat(4,1fr)} }
  .plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;position:relative}
  .plan.top{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .plan .flag{position:absolute;top:-10px;left:18px;font-size:11px;font-weight:800;letter-spacing:.04em;
    background:var(--accent);color:var(--accent-ink);padding:2px 9px;border-radius:7px}
  .plan .t{font-family:var(--mono);font-weight:700;color:var(--cold)}
  .plan .ppl{color:var(--muted);font-size:13px;margin:2px 0 12px}
  .plan .yen{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .plan .yen small{font-size:13px;color:var(--muted);font-weight:600}

  /* ===== two-col cards ===== */
  .cols{display:grid;gap:16px;grid-template-columns:1fr}
  @media(min-width:720px){ .cols{grid-template-columns:1fr 1fr} }
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .card h3{font-size:16px;display:flex;align-items:center;gap:9px}
  .card p{color:var(--muted);font-size:14px;margin:8px 0 0}
  .card ul{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:8px}
  .card li{position:relative;padding-left:22px;font-size:14px;color:var(--muted)}
  .card li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
  .note{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%, transparent);
    border-radius:11px;padding:12px 14px;font-size:13.5px;color:var(--text);margin-top:14px}

  /* connect steps */
  .flow{display:grid;gap:10px;counter-reset:f}
  .fitem{display:flex;gap:13px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
    border-radius:11px;padding:14px 16px}
  .fitem .fn{counter-increment:f;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);
    border:1px solid var(--line2);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
  .fitem .fn::before{content:counter(f)}
  .fitem p{margin:0;font-size:14px}
  .fitem .k{color:var(--muted);font-size:13px}

  /* status legend */
  .states{display:grid;gap:10px}
  .state{display:flex;gap:13px;align-items:center;background:var(--panel);border:1px solid var(--line);
    border-radius:11px;padding:12px 15px}
  .sdot{width:11px;height:11px;border-radius:50%;flex:none}
  .state b{font-size:14px}
  .state span{color:var(--muted);font-size:13.5px}

  /* faq */
  details{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:0;margin-bottom:10px;overflow:hidden}
  summary{cursor:pointer;list-style:none;padding:15px 17px;font-weight:650;font-size:15px;
    display:flex;justify-content:space-between;align-items:center;gap:12px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:400;line-height:1;transition:transform .18s}
  details[open] summary::after{transform:rotate(45deg)}
  details .a{padding:0 17px 16px;color:var(--muted);font-size:14px}

  footer{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--faint)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start}
  footer .fine{font-size:12px;max-width:60ch;line-height:1.6}

  /* ===== comparison / simulation tables ===== */
  .tablewrap{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
  table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
  th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line)}
  thead th{color:var(--faint);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:700;background:var(--panel2);white-space:nowrap}
  tbody tr:last-child td{border-bottom:none}
  td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
  .ours{color:var(--accent);font-weight:700}
  .rowhead{font-weight:650;white-space:nowrap}
  .yes{color:var(--accent);font-weight:700}
  .no{color:var(--danger);font-weight:700}

  /* ===== concept: before / after ===== */
  .ba{display:grid;gap:16px;grid-template-columns:1fr;margin-top:26px}
  @media(min-width:720px){ .ba{grid-template-columns:1fr 1fr} }
  .ba .card.bad{border-color:color-mix(in srgb,var(--danger) 32%, var(--line))}
  .ba .card.bad li::before{background:var(--danger)}
  .meter{margin-top:16px;height:9px;border-radius:999px;background:var(--panel2);overflow:hidden;
    border:1px solid var(--line)}
  .meter i{display:block;height:100%}
  .meter i.full{width:100%;background:var(--danger)}
  .meter i.part{width:8%;background:var(--accent)}
  .metercap{color:var(--faint);font-size:12.5px;margin-top:7px}

  /* ===== games ===== */
  .games{display:grid;gap:16px;grid-template-columns:1fr;margin-top:26px}
  @media(min-width:720px){ .games{grid-template-columns:repeat(3,1fr)} }
  .game{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .game .gt{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
  .game .gs{color:var(--muted);font-size:13.5px;margin-top:7px}
  .game.soon{border-style:dashed;opacity:.78}
  .chip{font-size:10.5px;font-weight:800;letter-spacing:.04em;border-radius:5px;padding:1px 6px;
    background:var(--accent);color:var(--accent-ink);text-transform:uppercase}
  .chip.wip{background:var(--panel2);color:var(--faint);border:1px solid var(--line2)}

  /* ===== honest / fit ===== */
  .fit{display:grid;gap:16px;grid-template-columns:1fr;margin-top:26px}
  @media(min-width:720px){ .fit{grid-template-columns:1fr 1fr} }

  @media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }

/* ===== タブ（ゲーム設定の一覧） =====
   タブの並びは JS が有効なときだけ表示する。無効なら全パネルが縦に並ぶので、
   内容はどちらでも読める（押しても動かないボタンを見せないための作り）。 */
.tablist{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 26px;
  border-bottom:1px solid var(--line);padding-bottom:0}
.tablist[hidden]{display:none}
.tablist [role="tab"]{appearance:none;background:transparent;border:0;
  border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;
  font:inherit;font-weight:700;padding:10px 14px;margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:8px;border-radius:8px 8px 0 0}
.tablist [role="tab"]:hover{color:var(--text);background:var(--panel2)}
.tablist [role="tab"][aria-selected="true"]{color:var(--accent);
  border-bottom-color:var(--accent)}
.tablist [role="tab"] .k{font-weight:400;font-size:12px}
.tabpanel:focus{outline:none}
.tabpanel[hidden]{display:none}

/* ===== はじめかた（4ステップ） =====
   以前はページ側に <style> を書いていた。スタイルの置き場を1箇所に保つため移設。 */
@media(min-width:720px){ #start .steps{grid-template-columns:repeat(4,1fr)} }

/* 「初回だけ聞かれること」など、手順の補足に使う小さな囲み */
.substep{margin-top:10px;padding:10px 12px;border-left:3px solid var(--line2);
  background:var(--panel2);border-radius:0 8px 8px 0;font-size:13.5px;color:var(--muted)}
.substep b{color:var(--text)}

/* ===== 目次（トップページ） =====
   節が多いので「何がどこに書いてあるか」を先に見せる。
   1行の説明を必ず添えること（見出しだけでは中身が想像できない）。 */
.tocgrid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:26px}
@media(min-width:640px){ .tocgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .tocgrid{grid-template-columns:repeat(3,1fr)} }
.toccard{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;transition:border-color .12s ease,transform .12s ease}
.toccard:hover{border-color:var(--accent);transform:translateY(-1px)}
.toccard b{display:block;font-size:15px}
.toccard span{display:block;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.6}
.toccard code{font-size:12px}
.tocmore{margin-top:22px;color:var(--muted);font-size:14px;line-height:2}
.tocmore a{color:var(--accent)}

/* 末尾の導線。読み終えた人がその場で始められるように */
#cta{background:var(--panel);border-top:1px solid var(--line)}