/* ============================================================
     モード選択画面（出題設定・#screen-mode）
     ============================================================ */
  #screen-mode{
    justify-content:flex-start; gap:18px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    font-family:'Yuji Syuku',serif;
  }
  #screen-mode .link-back{ font-family:'Zen Kaku Gothic New',sans-serif; }
  #screen-mode .mode-heading{ margin-top:32px; }
  .mode-heading{
    text-align:center; margin-bottom:2px;
  }
  .mode-heading h2{
    font-family:'Yuji Syuku',serif;
    font-size:22px; margin:0 0 6px; color:var(--bone);
  }
  .mode-heading p{ margin:0; font-size:13px; color:var(--bone-dim); }
  .link-info{
    display:inline-block;
    font-size:12px; color:var(--bone-dim);
    background:none; border:none; cursor:pointer; padding:4px 8px;
    text-decoration:underline; text-underline-offset:3px;
  }

  .option-group-label{
    font-size:14px; letter-spacing:.1em; color:#d8d0c0; margin-bottom:8px;
  }
  .option-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(64px, 1fr)); gap:8px; }
  .option-pill-wrap{ position:relative; min-width:64px; }
  .option-pill-wrap .option-pill{ width:100%; }
  /* 吹き出し：絶対配置でボタンの下に重ねるため、表示/非表示でレイアウトが動かない */
  .option-pill-caption{
    display:none;
    position:absolute;
    left:50%; top:calc(100% + 9px);
    transform:translateX(-50%);
    white-space:nowrap;
    background:var(--bg-panel-2);
    border:1px solid var(--ash-purple-2);
    border-radius:6px;
    padding:5px 9px;
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:11px; letter-spacing:.02em; color:var(--bone);
    box-shadow:0 6px 16px rgba(0,0,0,0.45);
    z-index:6;
  }
  .option-pill-caption::after{
    content:"";
    position:absolute;
    bottom:100%; left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-bottom-color:var(--ash-purple-2);
  }
  .option-pill.selected ~ .option-pill-caption{ display:block; }
  .option-pill{
    flex:1; min-width:64px;
    min-height:46px;
    padding:10px 8px;
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--bone-dim);
    font-size:14px;
    white-space:nowrap;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
  }
  .option-pill:active{ transform:scale(0.96); }
  .option-pill.selected{
    border-color:var(--ash-purple-2);
    color:var(--bone);
    background:rgba(92,42,110,0.22);
    box-shadow:0 0 0 1px rgba(92,42,110,0.18) inset;
  }
  .option-pill .m-tag{ font-size:9.5px; padding:1px 6px; }
  .option-pill:disabled{
    opacity:.35; cursor:not-allowed;
  }
  .option-pill:disabled.selected{
    border-color:var(--line); background:var(--bg-panel); color:var(--bone-dim);
  }
  .option-pill-glow{
    animation:pillGlowPulsePurple 2.6s ease-in-out infinite;
  }
  .option-pill-glow.selected{
    animation:pillGlowPulseRed 1.8s ease-in-out infinite;
    border-color:var(--blood-bright);
  }
  @keyframes pillGlowPulsePurple{
    0%, 100% { background-color:var(--bg-panel); box-shadow:inset 0 0 6px 0 rgba(92,42,110,0.2); }
    50% { background-color:rgba(92,42,110,0.4); box-shadow:inset 0 0 16px 2px rgba(150,60,190,0.6); }
  }
  @keyframes pillGlowPulseRed{
    0%, 100% { background-color:rgba(139,26,43,0.28); box-shadow:inset 0 0 8px 0 rgba(201,42,61,0.35); }
    50% { background-color:rgba(201,42,61,0.6); box-shadow:inset 0 0 18px 3px rgba(201,42,61,0.8); }
  }
  @media (prefers-reduced-motion: reduce){
    .option-pill-glow{ animation:none; background-color:rgba(92,42,110,0.3); box-shadow:inset 0 0 8px 0 rgba(92,42,110,0.4); }
    .option-pill-glow.selected{ animation:none; background-color:rgba(201,42,61,0.45); box-shadow:inset 0 0 8px 0 rgba(201,42,61,0.5); border-color:var(--blood-bright); }
  }


  .format-cards{ display:flex; flex-direction:row; gap:10px; }
  .mode-card{
    flex:1;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:10px 8px;
    min-height:46px;
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-left:3px solid var(--line);
    border-radius:6px;
    color:var(--bone-dim);
    cursor:pointer;
    transition:border-color .15s ease, transform .12s ease, background .15s ease, color .15s ease;
  }
  .mode-card:active{ transform:scale(0.98); background:var(--bg-panel-2); }
  .mode-card.selected{
    border-left-color:var(--ash-purple-2); border-color:var(--ash-purple-2);
    background:rgba(92,42,110,0.22); color:var(--bone);
  }
  .mode-card .m-title{ font-size:14px; display:flex; align-items:center; gap:8px; }
  .mode-card .m-desc{ font-size:12.5px; color:var(--bone-dim); line-height:1.5; }

  #screen-mode .btn-start{ margin-top:28px; width:60%; align-self:center; }