/* ========== ラジオボタン (自風) ========== */
  .toggle-radio {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .toggle-radio input[type="radio"] {
    display: none;
  }

  .toggle-radio label {
    padding: 8px 14px;
    border-radius: 8px;
    background: #e9ecef;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.18s ease;
  }

  .toggle-radio input[type="radio"]:checked+label {
    background: #E6A35B;
    color: #fff;
  }

  /* ホバー時に軽く浮く */
  .toggle-radio label:hover {
    background-color: #EFD1B0;
    /* 緑寄りの淡色 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  /* ========== 点数 (score-row) ========== */

  .score-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }


  .score-block {
    display: flex;
    align-items: center;
    gap: 6px;
  }


  .score-block label {
    font-weight: 600;
  }

  .score-row input[type="number"] {
    width: 60px;
    padding: 6px;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;

  }


  /* ========== 牌画像行 (tile-row) ========== */
  .tile-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
    margin-bottom: 8px;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    padding-inline: max(env(safe-area-inset-left), 8px) max(env(safe-area-inset-right), 8px);
  }

  .tile-row img {
    width: clamp(28px, 8vw, 42px);
    background-color: white;
    height: auto;
    margin-inline: 2px;
    background-color: white;
  }


  .tile-wrapper.selected {
    background-color: rgba(255, 0, 0, 0.25) !important;
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.25);
    border-radius: 4px;
  }

  .rotate-90 {
    transform: rotate(90deg);
    transform-origin: center center;
  }


  /* ========== 手牌画像グリッド ========== */
  #tehai-image-row,
  #compare-base-tehai {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    ;
    /* ← 等間隔に並べる */
    gap: 0;
    padding: 0 4px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
  }



  /* PC（768px 以上）は 40px 固定マス */
  @media (min-width: 768px) {

    #tehai-image-row,
    #compare-base-tehai {
      display: grid;
      grid-template-columns: repeat(14, 50px);
      gap: 0;
      justify-content: flex-start;
    }
  }

  /* 共通の牌画像・プレースホルダーサイズ */
  #tehai-image-row img,
  #compare-base-tehai img,
  .tile-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-width: 40px;
    height: auto;
    background-color: transparent;
    border-radius: 4px;
    padding: 1px;
  }

  /* プレースホルダーは枠だけ確保して不可視 */
  .tile-placeholder {
    visibility: hidden;
    pointer-events: none;
  }

  .tile-wrapper {
    background-color: white;
    padding: 4px;
    /* ← ここで“1回り大きく”する */
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    margin: 0;
    display: flex;
    justify-content: center;

  }

  @media (max-width: 768px) {
    .tile-wrapper {
      padding: 0;
      padding: 1px;
      border: none;
      background: none;
      border: 1px solid #ccc;
      background-color: white;
      border-radius: 3px;
    }
  }

  .tile-wrapper.tsumo-separator {
    margin-right: 8px;
    /* ← ツモとの間のスペース */
  }


  .tile-img,
  .tehai-tile {
    width: 100%;
    height: auto;
    display: block;
    justify-content: center;
  }

  /* デフォルト：スマホ基準（画像小さめ） */
  #cut-results-container img {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-width: 20px;
    height: auto;
    background-color: white;
    border-radius: 4px;
  }

  /* PC画面（768px以上）では大きく表示 */
  @media (min-width: 768px) {
    #cut-results-container img {
      max-width: 40px;
      /* ← お好みで調整：例 40〜48px */
    }
  }

  .cut-display-row {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-block: 10px;
    justify-content: center;
  }

  .cut-control-row {
    display: flex;
    justify-content: flex-start;
    /* ← 好きな位置に変えられる */
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
  }



  /* フォーカス時 */
  .form-row input:focus,
  .form-row select:focus {
    border-color: #EFD1B0;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
  }

  input::placeholder {
    color: #aaa;
  }

  .select-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
  }


  /* チェックされたラベル
.toggle-radio input[type="radio"]:checked + label {
  background-color: #E6A35B;
  color: white;
  border-color: #E6A35B;
  box-shadow: 0 2px 6px rgba(167, 97, 40, 0.3);
} */

  .toggle-radio label.active-input {
    background-color: #E6A35B !important;
    color: white !important;
    border-color: #E6A35B !important;
    box-shadow: 0 2px 6px rgba(167, 97, 40, 0.3) !important;
  }

  #selectTsumoBtn {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    /* OFFのときの背景 */
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  #selectTsumoBtn:hover {
    background-color: #eaeaea;
    /* ホバー時 */
  }

  /* ON状態 */
  #selectTsumoBtn.active-input {
    background-color: #E6A35B;
    color: white;
    border-color: #E6A35B;
    box-shadow: 0 2px 6px rgba(167, 97, 40, 0.3);
  }



  /* ドロップダウン */
  select {
    appearance: none;
    /* モダンブラウザで矢印非表示 */
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 10px 14px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    width: 100%;
    max-width: 250px;
    margin-bottom: 8px;
  }

  /* ホバー＆フォーカス */
  select:focus,
  select:hover {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
  }

  /* 矢印アイコン（背景画像でカスタム） */
  select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z' fill='%23333'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
  }





  /* ボタン */
  .form-row button {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.9rem;
    margin-left: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form-row button:hover {
    background-color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }

  .form-row button:first-of-type {
    background-color: #d0e7ff;
    border-color: #7abaff;
    color: #1a4f8b;
  }

  .form-row button:first-of-type:hover {
    background-color: #c2dbf7;
  }





  /* ───────────── レイアウト全体 ───────────── */
  .form-section {
    overflow-x: hidden;
    /* 横スクロール完全禁止 */
    width: 100%;
    max-width: 100%;
  }

  /* ─ JSON 出力欄（スマホ折返し） ─ */
  #jsonOutput {
    width: 100%;
    box-sizing: border-box;
  }

  button,
  .toggle-radio label,
  .tile-row img {
    touch-action: manipulation;
    /* 300ms遅延&ダブルタップズームを抑制 */
  }

  input,
  select,
  textarea {
    font-size: 16px;
    /* ← 15px 以下だと iOS が拡大する */
  }


  textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    border: 1px solid #cdd1d6;
    border-radius: 6px;
    margin-top: 8px;
    background: #fafbfc;
  }


  /* TOP用セクションカード */
  .section-card {
    border-left: 4px solid #d98c4d;
    padding: 24px 28px;
    background: #fff;
    margin-bottom: 32px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
  }

  .section-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .section-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #d98c4d;
    margin-top: 0;
  }

  .section-content p {
    font-size: 1rem;
    color: #4e3c2a;
    margin: 0.5em 0 0;
  }

  .block {
    margin: 48px 0;
    padding: 0 12px;
  }

  .block-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #d98c4d;
    /* 上品な薄橙 */
    margin-bottom: 4px;
    font-family: 'Playfair Display', serif;
  }

  .block-subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: #c89b6e;
    font-family: 'Playfair Display', serif;
    margin-bottom: 16px;
  }

  .block-list {
    list-style: none;
    padding-left: 0;
    font-size: 1rem;
    line-height: 1.8;
    color: #584232;
  }

  .block-list li {
    margin-bottom: 24px;
  }


  /* ナビバー */
  .header {
    position: relative;
    background-color: #fff9f5;
    padding: 16px;
  }

  /* さちゅきちの画像 */
  .block-list-character-image {
    position: absolute;
    bottom: 0;
    left: 100px;
    width: 150px;
    /* ←サイズ調整 */
    opacity: 0.4;
    /* ←透過度（目安：0.1〜0.3） */
    pointer-events: none;
    /* ←クリックなどの邪魔をしない */
    z-index: -3;
  }

  .operator-profile {
    position: relative;
    z-index: 1;
    /* ← テキストが前に来るように */
  }

  .tile-selector-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 中央に表示 */
    width: 90vw;
    /* 画面幅の90% */
    max-width: 480px;
    /* 上限サイズ（PC時） */
    max-height: 70vh;
    /* 高さは70%まで */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 16px;
    z-index: 999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    /* ← ✖ボタンの位置指定の基準にする */

  }



  .tile-selector-popup img {
    width: 32px;
    height: auto;
    cursor: pointer;
  }

  .hidden {
    display: none;
  }

  .popup-close-button {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 1001;
    color: #555;
  }

  /* ✖ボタンのスペース確保用 */
  .tile-selector-popup::before {
    content: "";
    display: block;
    height: 32px;
    /* ← スペースの高さ調整（1行分） */
  }

  .popup-close-button:hover {
    color: #000;
  }

  /* tool-haishi用の囲い */
  .tile-card {
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    /* 区切り線だけにする */
    margin: 20px 0;
    grid-column: 1 / -1;
  }

/* 生成された行画像に“比率固定/幅100%”などを絶対に当てない */
.tool-haishi #tehai-image-row > img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;  /* 画面が狭い時だけ縮む */
  aspect-ratio: auto !important;
  transform: none !important;
  object-fit: contain !important; /* 念のため、はみ出し時の潰れ防止 */
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  margin: 8px 0;
}


/* 砂場：画面外に置くだけ（幅・高さは制限しない） */
.tool-haishi #tehai-image-row .capture-sandbox {
  position: absolute;
  left: -9999px;
  top: 0;
  /* width/height/overflow は指定しない */
}