/* tomoy-apps-fd.css — Filtered Digits 固有CSS */
/* 同名クラスがTDと存在するが、別ファイルのため衝突なし */

/* -- RULE SCREEN -- */
    /* ===== RULE SCREEN ===== */
    .rule-screen-label {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 16px;
      font-weight: 500;
    }

    .rule-screen-badge {
      font-family: 'Space Mono', monospace;
      font-size: clamp(22px, 8vw, 36px);
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #fd79a8, #e84393);
      padding: 18px 32px;
      border-radius: 16px;
      margin-bottom: 32px;
      box-shadow: 0 8px 28px rgba(232, 67, 147, 0.45);
      letter-spacing: 2px;
      animation: bounceIn 0.4s ease;
    }

    /* ===== RULE BADGE (Show/Input screen small badge) ===== */
    .rule-badge {
      display: inline-block;
      background: linear-gradient(135deg, #fd79a8, #e84393);
      color: #fff;
      font-family: 'Space Mono', monospace;
      font-size: clamp(13px, 4vw, 18px);
      font-weight: 700;
      letter-spacing: 1px;
      padding: 8px 20px;
      border-radius: 30px;
      margin-bottom: 12px;
      box-shadow: 0 4px 16px rgba(232, 67, 147, 0.4);
      animation: fadeIn 0.3s ease;
    }

/* -- INPUT SCREEN -- */
    .input-rule-badge {
      display: inline-block;
      background: rgba(232, 67, 147, 0.25);
      color: #fd79a8;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 4px 14px;
      border-radius: 20px;
      border: 1px solid rgba(232, 67, 147, 0.4);
      margin-bottom: 8px;
    }

/* -- RESULT SCREEN -- */
    .result-text span.rule-highlight {
      color: #fd79a8;
    }

/* -- RESPONSIVE (FD-specific overrides only) -- */
    @media (max-height: 700px) {
      .rule-badge {
        font-size: 13px;
        padding: 6px 14px;
        margin-bottom: 8px;
      }

      /* Rule Screen */
      .rule-screen-label {
        font-size: 11px;
        margin-bottom: 10px;
      }

      .rule-screen-badge {
        font-size: 20px;
        padding: 12px 20px;
        margin-bottom: 16px;
      }

    }

/* -- HELP MODAL -- */
    .help-example-rule {
      text-align: center;
      margin-bottom: 12px;
    }

    .help-example-rule-badge {
      display: inline-block;
      background: linear-gradient(135deg, #fd79a8, #e84393);
      color: #fff;
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 14px;
      border-radius: 20px;
    }

    .help-example-box.filtered {
      border-color: #fd79a8;
      background: #fff0f6;
      color: #e84393;
      text-decoration: line-through;
      opacity: 0.5;
    }