* { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: #000;
      color: #fff;
      font-family: 'M PLUS 1p', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
      min-height: 100dvh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    #app {
      width: 100%;
      max-width: 500px;
      min-height: 100dvh;
      padding: 0 0 100px;
    }

    /* ===== ヘッダー ===== */
    .header {
      background: #111;
      border-bottom: 1px solid #222;
      padding: 14px 20px 0;
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .header h1 {
      font-size: 15px;
      font-weight: 800;
      color: #f59e0b;
      letter-spacing: 0.05em;
      padding-bottom: 10px;
    }
    .header-search {
      padding: 0 0 10px;
    }
    .header-search .filter-input-wrap {
      margin-bottom: 0;
    }
    .header-search .filter-hint {
      font-size: 11px;
      margin-top: 4px;
      min-height: 0;
    }

    /* タブ */
    .tabs {
      display: flex;
      border-top: 1px solid #222;
      margin: 0 -20px;
    }
    .tab-btn {
      flex: 1;
      background: none;
      border: none;
      color: #555;
      font-size: 13px;
      font-weight: 700;
      padding: 11px 0;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.15s;
      letter-spacing: 0.03em;
    }
    .tab-btn.active { color: #f59e0b; border-bottom-color: #f59e0b; }

    /* 共通入力欄 */
    .filter-input-wrap {
      position: relative;
    }
    .filter-input-wrap input[type="text"] {
      width: 100%;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      color: #fff;
      padding: 12px 36px 12px 14px;
      font-size: 15px;
      outline: none;
      transition: border-color 0.2s;
    }
    .filter-input-wrap input[type="text"]:focus { border-color: #f59e0b; }
    .filter-input-wrap input[type="text"]::placeholder { color: #555; }
    .filter-clear-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #555;
      font-size: 18px;
      cursor: pointer;
      display: none;
      line-height: 1;
      padding: 4px;
    }
    .filter-clear-btn.show { display: block; }
    .bm-notice {
      background: #1a1200;
      border: 1px solid rgba(245,158,11,0.3);
      border-radius: 8px;
      padding: 10px 13px;
      font-size: 12px;
      color: #b45309;
      line-height: 1.7;
      margin-bottom: 14px;
    }
    .filter-hint {
      margin-top: 6px;
      font-size: 12px;
      color: #555;
      min-height: 16px;
    }

    /* ===== 弾選択画面（TOP） ===== */
    #set-screen { padding: 16px 16px 0; }

    .top-filter-block { margin-bottom: 16px; }


    .group-title {
      font-size: 11px;
      font-weight: 700;
      color: #555;
      letter-spacing: 0.1em;
      margin: 16px 0 8px;
    }

    .set-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-bottom: 4px;
    }

    .set-btn {
      background: #1a1000;
      border: 1px solid #f59e0b55;
      border-radius: 8px;
      color: #f59e0b;
      font-size: 12px;
      font-weight: 700;
      padding: 11px 4px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
      line-height: 1.3;
      position: relative;
    }
    .set-btn .sname { display: block; }
    .set-btn .scnt {
      display: block;
      font-size: 10px;
      color: #a07030;
      font-weight: 400;
      margin-top: 3px;
    }
    .set-btn:active { opacity: 0.7; transform: scale(0.97); }
    .set-btn.dimmed { opacity: 0.25; }
    .set-btn.rule { background: #001a2a; border-color: #3b82f655; color: #60a5fa; }
    .set-btn.rule .scnt { color: #2a5a8a; }
    .set-btn.completed { background: #001a0a; border-color: #22c55e55; color: #22c55e; }
    .set-btn.completed .scnt { color: #1a6a30; }


    /* ===== カードリスト画面 ===== */
    #cardlist-screen { display: none; padding: 16px 16px 0; }

    .cardlist-empty {
      text-align: center;
      padding: 48px 20px;
      color: #555;
      font-size: 14px;
      line-height: 1.8;
    }

    /* アコーディオン */
    .qa-item {
      background: #111;
      border: 1px solid #222;
      border-radius: 10px;
      margin-bottom: 8px;
      overflow: hidden;
    }
    .qa-question {
      padding: 14px;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .qa-question:active { background: #1a1a1a; }
    .qa-card-tag {
      flex-shrink: 0;
      background: #1a1a1a;
      border: 1px solid #f59e0b33;
      border-radius: 4px;
      padding: 2px 7px;
      font-size: 10px;
      color: #f59e0b;
      font-weight: 700;
      margin-top: 2px;
    }
    .qa-q-wrap { flex: 1; min-width: 0; }
    .qa-q-num { font-size: 10px; color: #555; margin-bottom: 4px; }
    .qa-q-text { font-size: 14px; line-height: 1.65; color: #ddd; }
    .qa-toggle { flex-shrink: 0; font-size: 16px; color: #555; margin-top: 2px; transition: transform 0.2s; }
    .qa-item.open .qa-toggle { transform: rotate(180deg); color: #f59e0b; }
    .qa-answer { display: none; padding: 0 14px 14px; }
    .qa-item.open .qa-answer { display: block; }
    .qa-answer-label { font-size: 10px; font-weight: 700; color: #f59e0b; margin-bottom: 8px; letter-spacing: 0.05em; }
    .qa-answer-text {
      font-size: 13px;
      line-height: 1.85;
      color: #bbb;
      white-space: pre-wrap;
      word-break: break-all;
      border-top: 1px solid #222;
      padding-top: 12px;
    }

    .load-more-btn {
      width: 100%;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      color: #aaa;
      padding: 14px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 4px;
      margin-bottom: 16px;
    }
    .load-more-btn:active { background: #222; }

    /* ===== クイズ画面 ===== */
    #quiz-screen { display: none; }

    .quiz-nav-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px 0;
      gap: 8px;
    }
    .quiz-nav-right { display: flex; gap: 8px; }
    .quiz-nav-btn {
      touch-action: manipulation;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      color: #888;
      font-size: 12px;
      font-weight: 700;
      padding: 9px 14px;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .quiz-nav-btn:active { background: #252525; }
    .quiz-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
    .quiz-nav-btn.primary { background: #f59e0b; border-color: #f59e0b; color: #000; }
    .quiz-nav-btn.primary:active { opacity: 0.85; }

    .progress-bar-wrap { padding: 16px 20px 0; }
    .progress-info { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-bottom: 6px; }
    .progress-track { width: 100%; height: 3px; background: #222; border-radius: 2px; }
    .progress-fill { height: 100%; background: #f59e0b; border-radius: 2px; transition: width 0.3s ease; }

    .card-image-wrap { padding: 16px 8px 0; display: flex; justify-content: center; }
    .card-image-wrap img {
      width: 100%; max-width: 480px; height: auto;
      border-radius: 10px; border: 1px solid #333; background: #111; display: block;
    }
    .card-image-wrap img.hidden { display: none; }

    .question-block { padding: 20px 20px 0; }
    .card-label {
      display: inline-block;
      background: #1a1a1a;
      border: 1px solid #f59e0b33;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 11px;
      color: #f59e0b;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: 0.03em;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .card-label:hover, .card-label:active { background: #2a1f00; border-color: #f59e0b88; }
    .card-label-hint { font-size: 10px; color: #444; margin-bottom: 10px; }
    .question-text { font-size: 15px; line-height: 1.75; color: #eee; font-weight: 500; }

    .reveal-btn {
      touch-action: manipulation;
      display: block;
      width: calc(100% - 40px);
      margin: 20px 20px 0;
      background: #f59e0b;
      border: none;
      border-radius: 12px;
      color: #000;
      padding: 16px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      text-align: center;
    }
    .reveal-btn:active { opacity: 0.8; }

    .explanation {
      margin: 16px 20px 0;
      background: #111;
      border: 1px solid #2a2a2a;
      border-radius: 10px;
      padding: 16px;
      display: none;
    }
    .explanation.show { display: block; }
    .explanation-label { font-size: 11px; font-weight: 700; color: #f59e0b; margin-bottom: 10px; letter-spacing: 0.05em; }
    .explanation-text { font-size: 14px; line-height: 1.85; color: #ddd; white-space: pre-wrap; word-break: break-all; }


    /* ===== 結果画面 ===== */
    #result-screen { padding: 40px 20px; text-align: center; display: none; }
    .score-circle {
      width: 160px; height: 160px; border-radius: 50%; border: 4px solid #f59e0b;
      display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 24px;
    }
    .score-num { font-size: 48px; font-weight: 800; color: #f59e0b; line-height: 1; }
    .score-denom { font-size: 14px; color: #666; margin-top: 6px; }
    .score-label { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
    .score-sub { font-size: 13px; color: #22c55e; margin-bottom: 32px; line-height: 1.7; }
    .result-btns { display: flex; flex-direction: column; gap: 10px; }
    .result-btn { touch-action: manipulation; width: 100%; background: #111; border: 1px solid #333; border-radius: 10px; color: #fff; padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
    .result-btn.primary { background: #f59e0b; border-color: #f59e0b; color: #000; }

    #loading { padding: 60px 20px; text-align: center; color: #666; font-size: 14px; display: none; }

    /* ===== 関連カード画像 ===== */
    /* カードリスト 画像グリッド */
    .cl-img-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 4px 0 12px;
    }
    .cl-img-card {
      cursor: pointer;
      border-radius: 8px;
      overflow: hidden;
      background: #111;
      border: 1px solid #222;
      transition: opacity 0.15s;
    }
    .cl-img-card:active { opacity: 0.65; }
    .cl-img-card img { width: 100%; height: auto; display: block; }
    .cl-img-grid-more {
      grid-column: 1 / -1;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 8px;
      color: #aaa;
      font-size: 13px;
      font-weight: 700;
      padding: 12px;
      cursor: pointer;
      text-align: center;
    }
    #cl-set-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 16px 8px;
      max-height: 82px;
      overflow: hidden;
    }
    #cl-set-nav.expanded { max-height: none; }
    .cl-sn-btn {
      background: #1a2a1a;
      color: #4ade80;
      border: 1px solid #2a4a2a;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
    }
    .cl-sn-btn:active { background: #2a4a2a; }
    #cl-set-nav-toggle {
      display: block;
      width: calc(100% - 32px);
      margin: 0 16px 8px;
      background: #111;
      color: #888;
      border: 1px solid #333;
      border-radius: 6px;
      padding: 5px 0;
      font-size: 12px;
      cursor: pointer;
      text-align: center;
    }
    #cl-set-nav-toggle:active { background: #1a1a1a; }
    #cl-top-btn {
      display: none;
      position: fixed;
      bottom: 24px;
      right: 16px;
      z-index: 200;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #1a2a1a;
      color: #4ade80;
      border: 1px solid #2a4a2a;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
    #cl-top-btn.visible { display: block; }
    .cl-set-divider {
      grid-column: 1 / -1;
      background: #181808;
      border-top: 1px solid #3a3000;
      border-bottom: 1px solid #3a3000;
      color: #f59e0b;
      font-size: 11px;
      font-weight: 700;
      padding: 8px 6px;
      letter-spacing: 0.04em;
      margin-top: 6px;
    }

    .related-cards-wrap {
      padding: 10px 8px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .related-card-item { width: 100%; display: flex; justify-content: center; }
    .related-card-img {
      width: 100%;
      max-width: 480px;
      height: auto;
      border-radius: 10px;
      border: 1px solid #333;
      background: #111;
      display: block;
    }
    .related-card-no {
      display: none;
    }

    /* ===== キーワードチップ ===== */
    .kw-chip {
      display: inline;
      background: rgba(245,158,11,0.15);
      border: 1px solid rgba(245,158,11,0.45);
      border-radius: 4px;
      padding: 1px 4px;
      color: #f59e0b;
      cursor: pointer;
      font-size: inherit;
      line-height: inherit;
      white-space: nowrap;
    }
    .kw-chip:active { background: rgba(245,158,11,0.32); }

    /* ===== キーワードポップアップ（ボトムシート） ===== */
    #kw-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.62);
      z-index: 300;
    }
    #kw-overlay.show { display: block; }

    #kw-popup {
      position: fixed;
      bottom: 0;
      left: 50%;
      width: 100%;
      max-width: 500px;
      background: #111;
      border-top: 1px solid #2a2a2a;
      border-radius: 16px 16px 0 0;
      padding: 20px 20px 44px;
      z-index: 301;
      max-height: 62vh;
      overflow-y: auto;
      transform: translateX(-50%) translateY(100%);
      transition: transform 0.25s ease;
    }
    #kw-popup.show { transform: translateX(-50%) translateY(0); }

    .kw-popup-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .kw-popup-name { font-size: 20px; font-weight: 800; color: #f59e0b; }
    .kw-type-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .kw-type-badge.clickable { cursor: pointer; }
    .kw-type-badge.clickable::after { content: ' ▼'; font-size: 8px; }
    .kw-type-badge.clickable.open::after { content: ' ▲'; }
    #kw-type-rule-wrap {
      display: none;
      background: #0c1a0c;
      border: 1px solid #1a3320;
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 12px;
    }
    #kw-type-rule-wrap.show { display: block; }
    #kw-type-rule-section {
      font-size: 10px;
      color: #4ade80;
      font-weight: 700;
      margin-bottom: 6px;
    }
    #kw-type-rule-text {
      font-size: 12px;
      color: #aaa;
      line-height: 1.7;
      white-space: pre-wrap;
    }
    .kw-type-badge.持続  { background: #1e3a5f; color: #60a5fa; }
    .kw-type-badge.誘発  { background: #1a3320; color: #4ade80; }
    .kw-type-badge.即時  { background: #1a2a1a; color: #86efac; }
    .kw-type-badge.起動  { background: #2d1f00; color: #f59e0b; }
    .kw-type-badge.処理  { background: #1a1a2e; color: #818cf8; }
    .kw-type-badge.特殊進化 { background: #2a0040; color: #c084fc; }
    .kw-type-badge.rule-term { background: #1a1a2a; color: #94a3b8; font-size: 10px; }
    .rule-term-chip { color: #60a5fa; text-decoration: underline dotted; cursor: pointer; }

    .kw-popup-close {
      margin-left: auto;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 6px;
      color: #888;
      padding: 6px 14px;
      cursor: pointer;
      font-size: 13px;
      flex-shrink: 0;
    }
    .kw-popup-close:active { background: #222; }
    .kw-popup-short {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 12px;
      line-height: 1.55;
    }
    .kw-popup-detail {
      font-size: 13px;
      color: #aaa;
      line-height: 1.9;
      margin-bottom: 14px;
      white-space: pre-wrap;
    }
    .kw-popup-caution {
      background: #1a0f00;
      border: 1px solid rgba(245,158,11,0.22);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 12px;
      color: #d97706;
      line-height: 1.8;
      white-space: pre-wrap;
    }
    /* ===== フッター ===== */
    .site-footer {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 500px;
      background: #0a0a0a;
      border-top: 1px solid #222;
      text-align: center;
      padding: 10px 16px;
      z-index: 50;
    }
    .site-footer a {
      color: #64748b;
      font-size: 12px;
      text-decoration: none;
      letter-spacing: 0.04em;
    }
    .site-footer a:active { color: #94a3b8; }

    .kw-rule-link {
      display: block;
      margin-top: 18px;
      padding: 10px 14px;
      background: #0f1f0f;
      border: 1px solid #2a4a2a;
      border-radius: 8px;
      color: #4ade80;
      font-size: 13px;
      text-decoration: none;
      text-align: center;
    }
    .kw-rule-link:active { background: #1a2e1a; }
    .kw-popup-caution-label {
      font-size: 11px;
      font-weight: 700;
      color: #f59e0b;
      margin-bottom: 6px;
      letter-spacing: 0.04em;
    }

    /* ===== カード検索結果リスト（クイズタブ） ===== */
    #search-result-list {
      display: none;
      padding: 8px 0 80px;
    }
    .sr-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid #1e1e1e;
      cursor: pointer;
      transition: background 0.1s;
    }
    .sr-item:active { background: #1a1a0a; }
    .sr-thumb {
      width: 56px;
      flex-shrink: 0;
      border-radius: 5px;
      overflow: hidden;
      background: #111;
      border: 1px solid #2a2a2a;
    }
    .sr-thumb img { width: 100%; height: auto; display: block; }
    .sr-info { flex: 1; min-width: 0; }
    .sr-card-no {
      font-size: 10px;
      font-weight: 700;
      color: #f59e0b;
      letter-spacing: 0.04em;
      margin-bottom: 2px;
    }
    .sr-card-name {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sr-q-num {
      font-size: 10px;
      color: #666;
      margin-bottom: 3px;
    }
    .sr-q-preview {
      font-size: 12px;
      color: #999;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sr-arrow {
      font-size: 16px;
      color: #444;
      align-self: center;
      flex-shrink: 0;
    }

    /* 検索結果から開いたクイズの「←検索結果一覧」ボタン */
    #back-to-search-btn { width: 100%; }
    #bookmark-btn.bookmarked, #bookmark-btn-bottom.bookmarked { color: #f59e0b; border-color: #f59e0b; background: #1a1200; }