.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.title-hero svg {
  pointer-events: none;
}

.collapsible {
  width: 100%;
  flex-basis: 100%;
}
/* ユーザー選択・グループ選択の幅を7文字基準に制限 */
#userSelect,
#currentGroupSelect {
  width: 17ch;        /* ← 日本語7文字分ぴったり */
}
#groupCreateName,
#groupSearchInput {
  width: 13ch;        /* ← 日本語7文字分ぴったり */
  box-sizing: content-box;
}
/* 設定パネルの表示制御 */
.collapsible {
  display: none;
}

.collapsible.open {
  display: block;
}

/* ⚙ アイコンが開いているとき回転 */
.iconBtn.open {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}
/* ユーザー・グループカードを常に横並び（スマホ含む） */
.topControls {
  display: flex;
  flex-wrap: nowrap;   /* 折り返さない */
}

/* カードを均等幅にし、はみ出し防止 */
.topControls > .headerCard {
  flex: 1 1 0;
  min-width: 0;        /* select のはみ出し防止（重要） */
}

/* カードヘッダー（タイトル＋設定アイコン） */
.cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* カードタイトル */
.cardTitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
}

/* 設定アイコンボタン */
.iconBtn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
}

.iconBtn:hover,
.iconBtn:focus-visible {
  background: #f0f0f0;
  border-radius: 50%;
}

.article-page {
  font-size: 1.05rem;      /* PCでも少し大きく */
  line-height: 1.9;
  color: #222;
}
.article-page h1 {
  font-size: 2rem;
  margin-bottom: 1em;
}
.article-page h2 {
  font-size: 1.5rem;
  margin-top: 2em;
}
.article-page p {
  font-size: 1.05rem;
  margin-bottom: 1.2em;
}
/* スマホ最適化 */
@media (max-width: 600px) {
  .article-page {
    font-size: 1.15rem;   /* スマホで明確に大きく */
    line-height: 2;
  }
  .article-page h1 {
    font-size: 1.7rem;
  }
  .article-page h2 {
    font-size: 1.3rem;
  }
  .article-page p {
    font-size: 1.1rem;
  }
}

p.indent{margin-left:1.5em;}

.card{
  border:1px solid #ddd;
  border-radius:10px;
  padding:4px 10px;
  background:#fff;
}
.card.featureCard{padding:4px 4px}
.card.headerCard{padding:4px 4px}
.row{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
}
/* スマホだけ改行として機能 */
@media (max-width: 600px){
  .sp-break{
    flex-basis:100%;
    height:0;
  }
}

/* PCでは無効 */
@media (min-width: 601px){
  .sp-break{
    display:none;
  }
}
#lengthGroup{
  margin-right: 12px; /* 好みで調整 */
}

.inputHeader{
  display:flex;
  align-items:center;
  gap:8px; /* 好みで調整 */
}

select,button,input[type="text"],textarea{
  font-size:1.0rem;
  padding:4px 2px;
  border-radius:5px;
  border:1px solid #bbb;
  background:#fff;
}

button{
  font-size:1.0rem;
  border:1px solid #222;
  border-radius:5px;
  padding:4px 4px;
  cursor:pointer;
}
button[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

.toggle{
  font-size:1.0rem;
  display:inline-flex;
  align-items:center;
  gap:0px;
  border:1px solid #bbb;
  border-radius:5px;
  padding:1px 2px;
  background:#fff;
  user-select:none;
  margin-right: 12px; /* 好みで調整 */
}
.toggle input{width:14px;height:14px;}

.short-text #text,
.short-text #input{
  font-size:0.95rem;
  line-height:1.6;
}

.medium-text #text,
.medium-text #input{
  font-size:0.9rem;
  line-height:1.5;
}

.long-text #text,
.long-text #input{
  font-size:.85rem;
  line-height:1.4;
}

.xl-text #text,
.xl-text #input{
  font-size:.8rem;
  line-height:1.3;
}


.ok{
  color:#0b5ed7;
  font-weight:400;
  text-shadow:.4px 0 0 currentColor,-.4px 0 0 currentColor;
}
.ng{
  color:#c00000;
  font-weight:400;
  text-shadow:.4px 0 0 currentColor,-.4px 0 0 currentColor;
}

.typingArea{position:relative;}
#result{margin-top:10px;font-weight:800;}

ul{padding-left:1.2em;}

#ranking li,
#dailyRanking li,
#myRecent li,
#bestByDifficulty li{
  margin-bottom:6px;
}

.split{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr;}
}

canvas{
  width:100%;
  height:220px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
}

details{
  border:1px solid #ddd;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
details+details{margin-top:10px;}

footer{
  padding-bottom:28px;
  color:#666;
}

.modalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0); /* 透明でもOK */
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  display:none;
  pointer-events:none;      /* ★重要 */
  z-index:9999;
}

.modalBackdrop.open{
  display:flex;
  pointer-events:auto;      /* 表示中のみ有効 */
}


.modal{
  width:min(720px,100%);
  background:#fff;
  border-radius:14px;
  border:1px solid #ddd;
  padding:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  max-width: 420px;
  width: calc(100% - 32px); /* スマホ対応 */
}
.modal h3{margin:0 0 10px;}

.modal .grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media(min-width:720px){
  .modal .grid{grid-template-columns:1fr 1fr;}
}

.kpi{
  border:1px solid #eee;
  border-radius:12px;
  padding:12px;
  background:#fafafa;
}
.kpi .v{
  font-size:1.35rem;
  font-weight:900;
}

.modalActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}

.diffTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 8px;
}
.diffTab{
  padding:6px 12px;
  border-radius:10px;
  border:1px solid #999;
  background:#fff;
  cursor:pointer;
  font-size:.95rem;
}
.diffTab.active{
  background:#222;
  color:#fff;
  border-color:#222;
}
.hint{
  font-size:.8rem;
  color:#666;
  margin:0 0 0;
}

.inlineBtns{
  display:inline-flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.collapsible{display:none;width:auto;}
.collapsible.open{display:block;}

.dividerLine{
  width:100%;
  height:1px;
  background:#eee;
  margin:5px 0;
}

.topControls{
  align-items:center;
  gap:5px;
  align-items:flex-start;
}

.typingCard{
  border:2px solid #ddd;
}

#authBadge{display:none!important;}

.featureCard summary{font-size:.9rem;}
.featureCard{margin-bottom:5px;}

.headerCard select{
  height:26px;
  padding:0 2px;
}
.headerCard .sectionTitle,
.headerCard .toggleBtn{
  line-height:36px;
}

.rankUpMsg{
  margin-top:10px;
  font-weight:800;
  font-size:1.05rem;
  line-height:1.35;
}

.rankGold{
  color:#b8860b;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}

.powerTable{                     /* パワー表示用テーブル全体のスタイル */
  border:2px solid #000;         /* テーブル外枠を黒の2px実線で表示 */
  border-collapse:collapse;      /* セルの境界線を重ねて表示 */
  font-size:1rem;                /* テーブル全体の文字サイズを標準に設定 */
  margin-top:8px;                /* テーブル上部に余白を追加 */
}

.powerTable td{                  /* テーブル内の各セル(td)のスタイル */
  border:1px solid #000;         /* セルごとの枠線を黒の1pxで表示 */
  padding:6px 20px;              /* セル内の上下左右の余白 */
  text-align:center;             /* 文字を中央揃え */
  white-space:nowrap;            /* 文字の自動改行を防止 */
}

.powerTable .label{              /* 見出し・ラベル用セル */
  background:#f5f5f5;            /* 背景色を薄いグレーに設定 */
  font-weight:700;               /* 文字を太字にする */
}

.powerTable .rank{               /* ランク表示用の文字 */
  font-size:1.4em;               /* 通常より大きめの文字サイズ */
  font-weight:900;               /* 非常に太い文字 */
}

.powerTable .score{              /* スコア表示用の文字 */
  font-size:1.2em;               /* 少し大きめの文字サイズ */
  font-weight:800;               /* 太字表示 */
}

.powerTable .message{            /* メッセージ表示用セル */
  padding:10px;                  /* セル内の余白を広めに確保 */
  line-height:1.5;               /* 行間を広げて読みやすくする */
  white-space:normal;            /* 自動改行を許可 */
  word-break:break-word;         /* 単語途中でも折り返し可能にする */
  overflow-wrap:anywhere;        /* どこでも折り返し可能にする */
  text-align:center;             /* 文字を中央揃え */
}

.powerBlock{                     /* 全体を包むブロック */
  display:flex;                  /* フレックスボックスを使用 */
  flex-direction:column;         /* 縦方向に要素を並べる */
  align-items:center;            /* 子要素を中央揃え */
}

.powerTitle{                     /* タイトル表示 */
  font-size:1.4rem;              /* タイトル用の大きめ文字 */
  font-weight:900;               /* 太字で強調 */
  margin-bottom:5px;             /* 下に余白を追加 */
  text-align:center;             /* 中央揃え */
}

.powerInner{                     /* テーブルと画像をまとめる内部枠 */
  display:flex;                  /* 横並びレイアウト */
  gap:0;                         /* 要素間の隙間なし */
  align-items:stretch;           /* 高さを揃える */
  border:4px solid #000;         /* 全体を囲む黒枠 */
}

.powerTable{                     /* powerInner内でのテーブル再定義 */
  border:none;                   /* 外枠はpowerInnerに任せる */
  margin:0;                      /* 余白をリセット */
  min-width:0;                   /* flex内でのはみ出し防止 */
}

#rankImageBox{                   /* ランク画像用の枠 */
  width:190px;                   /* 枠の横幅を190pxに固定 */
  height:189px;                  /* 枠の高さを190pxに固定 */
  background:#fff;               /* 背景を白に設定 */
  border:none;                   /* 枠線は一旦なし */
  border-left:1px solid #000;    /* 左側だけ区切り線を表示 */
  display:flex;                  /* 中央配置用にflex使用 */
  align-items:center;            /* 縦方向中央揃え */
  justify-content:center;        /* 横方向中央揃え */
  box-sizing:border-box;         /* 枠線込みでサイズ計算 */
}

/* webp画像本体 */
#rankImageBox img{               /* 枠内の画像(webp) */
  width:90%;                    /* 枠の横幅 */
  height:90%;                   /* 枠の高さ */
  object-fit:contain;            /* 縦横比を保ったまま収める */
  display:block;                 /* 余計な隙間を防ぐ */
}


@media(max-width:600px){
  .powerInner{
    flex-direction:row;
    flex-wrap:nowrap;
  }
  #rankImageBox{
    width:130px;
    height:190px;
  }
}


.input-time{
  font-size:.85rem;
  color: #ff9800;
  text-align:left;
  min-height:1em;
}
@media (min-width: 530px) {
  .headerCard .cardHeader {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
  }

  .headerCard select {
    width: 100%;
    min-width: 0;
  }

  .cardTitle {
    white-space: nowrap;
  }
}
/* ===== スマホ表示：ラベル＋⚙ → 下に select ===== */
@media (max-width: 530px) {

  /* ヘッダーを2段構成に */
  .headerCard .cardHeader {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title icon"
      "select select";
    align-items: center;
  }

  .headerCard .cardTitle {
    grid-area: title;
    white-space: nowrap;   /* 縦崩れ防止 */
  }

  .headerCard .iconBtn {
    grid-area: icon;
  }

  .headerCard select {
    grid-area: select;
    width: 100%;
  }
}