/* design/mock/index.html の <style> から書き出し */

  .hero { padding: 28px 0 8px; }
  .hero h1 { font-size: 24px; }
  .hero .lead { color: var(--muted); font-size: 15px; }
  .last-game { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; margin: 12px 0 0; }

  /* ゲームをえらぶ：ゲームごとのアクセント色で左の帯を変える（使い回しの見本） */
  .game-cards { display: grid; gap: 12px; }
  @media (min-width: 640px) { .game-cards { grid-template-columns: 1fr 1fr; } }
  .game-card {
    display: block; position: relative; text-decoration: none; color: var(--text);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 16px 16px 22px; min-height: 44px; overflow: hidden;
  }
  .game-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--main); }
  .game-card h3 { margin: 0 0 4px; font-size: 20px; color: var(--main); }
  .game-card p { margin: 0; font-size: 14px; color: var(--muted); }
  .game-card .go { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--main); }
  .game-card[aria-disabled="true"] { cursor: default; }
  .game-card[aria-disabled="true"] h3 { color: var(--text); }

  /* ポケモンの区画 */
  .zone-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .zone-head .pill { font-size: 12px; }
  .feature { border: 2px solid var(--main); }
  .feature .kicker { font-size: 12px; color: var(--main); font-weight: 700; margin: 0; }
  .feature h3 { font-size: 20px; margin: 2px 0 4px; }
  .feature .meta { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
  .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 48px; padding: 8px; border-radius: 10px; font-weight: 700; font-size: 14px;
    text-decoration: none; border: 1.5px solid var(--main); color: var(--main); background: var(--surface);
  }
  .quick a.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile {
    display: flex; flex-direction: column; gap: 4px; min-height: 112px; padding: 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    text-decoration: none; color: var(--text);
  }
  .tile .q { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--main); }
  .tile .a { font-size: 13px; color: var(--muted); line-height: 1.6; }

  .search { display: flex; gap: 8px; }
  .search input {
    flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; font: inherit;
    border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text);
  }
  .search input::placeholder { color: var(--muted); }
  .search button { flex: 0 0 auto; }

  .game-list { list-style: none; margin: 0; padding: 0; }
  .game-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .game-list li:last-child { border-bottom: none; }
  .game-list .nm { flex: 1; }
  .game-list a { font-weight: 700; }