/* 疑似セレクトボックス（pseudo-select.js）。OBSのブラウザソースでも選べるよう、選択肢をHTMLで描く。 */
select.kSelectNative{ display:none !important; }
.kSelect{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:120px; max-width:100%; margin:0; padding:9px 14px; border:2px solid #e3c5df; border-radius:12px;
  background:#fff; color:#5b4362; font:800 21px 'M PLUS Rounded 1c',sans-serif; line-height:1.3; text-align:left; cursor:pointer;
}
.kSelect::after{
  content:''; flex:none; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:9px solid currentColor; opacity:.65; transition:transform .15s;
}
.kSelect[aria-expanded="true"]{ border-color:#d48fc4; box-shadow:0 0 0 4px rgba(255,210,87,.45); }
.kSelect[aria-expanded="true"]::after{ transform:rotate(180deg); }
.kSelect:disabled{ cursor:default; opacity:1; background:#f5eef5; color:#786480; }
.kSelect:disabled::after{ opacity:.22; }
.kSelect:focus-visible{ outline:3px solid #e1b5e6; outline-offset:2px; }
.kSelectLabel{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 選択肢（画面の一番手前に出す。位置・倍率・文字の大きさは pseudo-select.js がボタンに合わせる） */
.kSelectList{
  position:fixed; left:0; top:0; z-index:10050; box-sizing:border-box; margin:0; padding:6px; overflow-y:auto; overscroll-behavior:contain;
  border:2px solid #d9b2e7; border-radius:14px; background:#fffdf8; color:#5b4362; line-height:1.3;
  box-shadow:0 10px 26px rgba(83,53,104,.3); transform-origin:left top; user-select:none; -webkit-user-select:none;
}
.kSelectOption{ display:flex; align-items:center; gap:8px; padding:9px 14px 9px 10px; border-radius:9px; cursor:pointer; white-space:nowrap; }
.kSelectOption::before{ content:'✓'; flex:none; width:1em; color:#e2537e; text-align:center; visibility:hidden; }
.kSelectOption[aria-selected="true"]{ color:#a23c69; }
.kSelectOption[aria-selected="true"]::before{ visibility:visible; }
.kSelectOption.active{ background:#f8e3f1; }
.kSelectOption[aria-disabled="true"]{ opacity:.45; cursor:default; }

/* ---- 置き場所ごとの大きさ（元の <select> の見た目に合わせる） ---- */
/* 部屋のルール・制限時間 */
.olRoomRules .kSelect{ min-width:190px; }
/* 部屋のチーム編成 */
.olTeamAssignments .kSelect{ min-width:118px; margin-left:auto; padding:6px 8px; gap:6px; border-color:#cbb4c7; border-radius:8px; color:#62455c; font:inherit; }
.olTeamAssignments .kSelect::after{ border-left-width:5px; border-right-width:5px; border-top-width:7px; }
/* リクエストの「種類」 */
.requestField .kSelect{ display:flex; width:100%; padding:9px 14px; border:3px solid #edd5ec; border-radius:14px; color:#444; font-size:21px; }
.requestField .kSelect[aria-expanded="true"]{ border-color:#e2537e; }
/* デザインタブの「マスの書体」 */
.cpFontRow .kSelect{ flex:1; min-width:0; padding:8px 10px; border-color:#d7b5d8; border-radius:10px; color:var(--ck-ink,#5b4362); font-size:18px; }

/* ---- スマホ表示 ---- */
html[data-device="mobile"] .kSelectOption{ padding:11px 14px 11px 10px; }
html[data-device="mobile"] .olRoomRules .kSelect{ flex:1 1 auto; min-width:0; width:auto; padding:7px 10px; font-size:15px; }
html[data-device="mobile"] .olTeamAssignments .kSelect{ min-width:0; padding:5px 6px; font-size:12px; }
html[data-device="mobile"] .requestField .kSelect{ padding:7px 10px; border-width:2px; border-radius:10px; font-size:16px; }
html[data-device="mobile"] .cpFontRow .kSelect{ padding:6px 8px; font-size:14px; }

@media (prefers-reduced-motion:reduce){ .kSelect::after{ transition:none; } }