:root {
  --bg: #fff7e0;          /* 画面の背景 */
  --fg: #3a2a10;          /* 文字、濃い枠線 */
  --accent: #ff5a3c;      /* 大きなボタン、結果の文字、バーの伸びる部分 */
  --accent-dark: #c23a22; /* 大きなボタンの影 */
  --dim: #cbb98f;         /* 薄い枠線、影、振る前の「?」 */
  --muted: #806f48;       /* 説明文など、控えめに見せる文字 */
  --card: #fffdf5;        /* カードと「このアプリについて」の地の色 */
  --on-fg: #fff;          /* --fg で塗った部分（選択中のデッキ、「?」の説明）の上の文字 */
  --on-accent: #fff;      /* 大きなボタンの上の文字 */
  --die: #fff;            /* サイコロの面 */
  --pip: var(--fg);       /* サイコロの点 */
  --track: var(--dim);    /* バーの溝 */
  --lyric: color-mix(in srgb, var(--fg) 70%, transparent); /* バーの上の歌詞（少し薄くして下の色を透かす。溝の上でも、伸びた部分の上でも読める濃さにする） */
  --pattern: color-mix(in srgb, var(--fg) 5%, var(--bg)); /* 背景の模様（背景より、ほんの少しだけ濃い色） */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* スマホでアドレスバーが出ているときも、見えている高さに合わせる */
  display: flex;
  flex-wrap: wrap; /* 広い画面では左右に並べ、狭い画面では縦に積む */
  align-items: center;
  justify-content: center;
  gap: 32px 56px;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
/* 背景の模様: 少し傾いたサイコロ（5の目と3の目）を、薄く並べる。
   色を変数で決められるよう、絵柄は画像としてではなく、色を塗った面の型抜きに使う。
   大きい表示（body.big の #stage）は画面全体を覆うので、そこにも同じ模様を敷く */
body::before, body.big #stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--pattern);
  --dice-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='rotate(-12 30 30)'%3E%3Crect x='10' y='10' width='40' height='40' rx='9' fill='none' stroke='black' stroke-width='3'/%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='40' cy='20' r='3'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='20' cy='40' r='3'/%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3C/g%3E%3Cg transform='rotate(15 90 90)'%3E%3Crect x='70' y='70' width='40' height='40' rx='9' fill='none' stroke='black' stroke-width='3'/%3E%3Ccircle cx='80' cy='100' r='3'/%3E%3Ccircle cx='90' cy='90' r='3'/%3E%3Ccircle cx='100' cy='80' r='3'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--dice-tile) 0 0 / 120px 120px;
  mask: var(--dice-tile) 0 0 / 120px 120px;
}
/* 画面には出さず、スクリーンリーダーにだけ読ませる */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 左（上）: サイコロを振る場所 */
#stage {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* いま選んでいるデッキの名前。動くもの（サイコロとテーマ）の外に、小さく置く。
   サイコロは転がる間に約34px上に出るので、重ならないよう、下を広めに空ける */
#current-deck {
  max-width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: bold;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 右（下）: サイコロの中身を決める場所 */
#topic-card {
  position: relative;
  width: min(360px, 100%);
  /* 外枠を正方形にする。余った高さは、テーマの行の間隔に配る。
     幅が狭くて中身が収まらないときは、中身に合わせて縦に伸びる */
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid var(--dim);
  border-radius: 16px;
  background: var(--card);
}
#topic-card header {
  position: relative; /* 「?」の説明を、この見出しのすぐ下に出すための基準 */
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#topic-card h2 { margin: 0; font-size: 15px; white-space: nowrap; } /* 見出しは折り返さない */
.help {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}
/* 説明文。？にフォーカスが当たるか、マウスを乗せたときだけ見出しの下に出す */
.help-text {
  display: none;
  position: absolute;
  z-index: 1;
  top: calc(100% + 6px); /* 見出しのすぐ下 */
  left: 0;
  right: 0;
  margin: 0;
  padding: 10px 12px 10px 28px; /* 左は、箇条書きの点のぶん広くする */
  border-radius: 10px;
  background: var(--fg);
  color: var(--on-fg);
  font-size: 12px;
  line-height: 1.7;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}
.help-text li + li { margin-top: 4px; }
.help:focus + .help-text,
.help:hover + .help-text { display: block; }
button { font: inherit; font-weight: bold; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: default; }
#play {
  font-size: 24px;
  padding: 20px 44px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 0 var(--accent-dark);
}
#play:active:not(:disabled) {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--accent-dark);
}
#remake {
  margin-left: auto;
  font-size: 13px;
  padding: 6px 14px;
  border: 2px solid var(--fg);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
}
/* サイコロ。--size を変えると、同じ見た目のまま大きさだけ変わる */
.die {
  --size: 96px;
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  padding: calc(var(--size) * 0.146);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  background: var(--die);
  border: calc(var(--size) * 0.031) solid var(--pip);
  border-radius: calc(var(--size) * 0.1875);
  box-shadow: 0 calc(var(--size) * 0.0625) 0 var(--dim);
}
.pip {
  width: calc(var(--size) * 0.167);
  height: calc(var(--size) * 0.167);
  border-radius: 50%;
}
.pip.on { background: var(--pip); }
.die[data-face="1"] .pip.on { background: var(--accent); transform: scale(1.5); }
/* 振る前は目を出さず「？」の面にする */
.die.unknown::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--dim);
  font-size: calc(var(--size) * 0.625);
  font-weight: bold;
  line-height: 1;
}
#die.fixed { animation: pop 0.35s ease-out; }
@keyframes pop {
  0%   { transform: scale(1.5); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #die.fixed { animation: none; }
}
#topic {
  min-height: 73px; /* 結果2行分。案内文のときも結果が2行のときも、下のボタンが動かないようにする */
  display: flex;
  align-items: center;
  font-size: 26px;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  color: var(--dim);
}
#topic.fixed { color: var(--accent); }
#topic.prompt { font-size: 15px; font-weight: normal; color: var(--muted); }
/* サイコロと結果をまとめた範囲 */
#result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* 抽選までの進み具合を示すバー。歌詞を、歌うタイミングに対応する位置に重ねて表示する。押すと、歌詞を出す・隠すを切り替えられる */
#progress {
  flex: none;
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 22px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
#bar {
  width: 0;
  height: 100%;
  background: var(--accent);
}
#lyrics {
  position: absolute;
  inset: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 22px;
  white-space: nowrap;
  color: var(--lyric);
}
body.no-lyrics #lyrics { display: none; }
#progress:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* 各文字は left（＝歌い始める時刻の位置）で置く。バーの端がその文字に届いたときが、歌うタイミング */
#lyrics span {
  position: absolute;
  transform: translateX(5px); /* 丸い左端で文字が欠けないよう、少しだけ右に寄せる */
}
/* 最後の「♪」は時刻の位置ではなく右端に置く。左端と同じ余白にして、歌詞全体を左右対称に見せる */
#lyrics span.end {
  right: 5px;
  transform: none;
}
/* スイッチを横に並べる行（サウンド、大きく表示） */
#switches {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: -14px; /* バーのすぐ下に寄せる */
}
#sound-label, #big-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
/* 音量。サウンドがオフの間は薄くして、動かせない */
#volume {
  flex: 0 1 72px;
  min-width: 0;
  margin: 0 0 0 -8px;
  accent-color: var(--accent);
  cursor: pointer;
}
#volume:disabled { opacity: 0.4; cursor: default; }
/* 振っている間は、大きい表示を切り替えられない */
#big-label:has(:disabled) { opacity: 0.5; cursor: default; }
#big-switch:disabled { cursor: default; }
/* スイッチ。オフは薄い茶色、オンは赤で、つまみが右に動く */
#sound, #big-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  margin: 0;
  border-radius: 999px;
  background: var(--track);
  cursor: pointer;
  transition: background-color 0.15s;
}
#sound::before, #big-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
#sound:checked, #big-switch:checked { background: var(--accent); }
#sound:checked::before, #big-switch:checked::before { transform: translateX(14px); }
#sound:focus-visible, #big-switch:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #sound, #sound::before, #big-switch, #big-switch::before { transition: none; }
}
/* いちばん下に置く、控えめな入口 */
footer {
  flex-basis: 100%;
  margin-top: -12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
#about-open, #app-share {
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: normal;
  text-decoration: underline;
}
/* 「このアプリについて」の窓 */
#about, #deck-editor, #deck-delete-confirm, #deck-import-dialog, #notice {
  width: min(360px, calc(100% - 32px));
  padding: 20px;
  border: none;
  border-radius: 16px;
  background: var(--card);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.7;
}
#about::backdrop, #deck-editor::backdrop, #deck-delete-confirm::backdrop, #deck-import-dialog::backdrop, #notice::backdrop { background: rgb(58 42 16 / 0.45); }
#about h2, #deck-editor h2 { margin: 0 0 8px; font-size: 18px; }
#about p, #deck-editor p { margin: 0 0 10px; }
#about .note, #deck-editor .note { font-size: 12px; color: var(--muted); }
#about a { color: inherit; }
#about hr { margin: 14px 0; border: none; border-top: 1px solid var(--dim); }
#about button, #deck-editor button, #deck-delete-confirm button, #deck-import-dialog button, #notice button {
  padding: 6px 14px;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
}
#reset-row { min-height: 34px; margin-bottom: 16px; font-size: 13px; }
/* 確認は、問いかけを1行、ボタン2つをその下の1行に並べる（画面の幅によって折り返し方が変わらないようにする） */
#about #reset-confirm p { margin: 0 0 8px; }
#reset-decks-label { display: block; margin: 0 0 10px; cursor: pointer; }
#reset-decks-label[hidden] { display: none; }
/* 取り返しのつかない操作の入口は、赤い枠と赤い文字で控えめに知らせる。塗りつぶしの赤は、確認のあとの実行のボタンだけ */
#about #reset { border-color: var(--accent-dark); color: var(--accent-dark); }
#about #reset-yes, #deck-delete-confirm #deck-delete-yes { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; }
#about-close { display: block; margin-left: auto; }
/* 押すと開く説明（データの保存について、ご利用にあたって） */
#about details { margin: 0 0 6px; }
#about details:last-of-type { margin-bottom: 12px; }
#about summary { padding: 2px 0; font-size: 13px; font-weight: bold; cursor: pointer; }
#about summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#about details p { margin: 6px 0 0 1.1em; }
#about details[open] { margin-bottom: 12px; }
/* ホーム画面に追加したアプリとして開いているときは、追加の案内を出さない */
@media (display-mode: standalone) {
  #install-hint { display: none; }
}
/* バージョンの行の「更新」は、文の中に収まる小さなボタンにする */
#about #version-update { padding: 1px 10px; font-size: 12px; }
/* 「更新を確認」は、確かめるだけの操作なので、枠のない下線つきの文字にする（押すと実際に更新する「更新」のボタンと、形で見分ける） */
#about #version-check { padding: 0 2px; border: none; color: inherit; font-size: 12px; font-weight: normal; text-decoration: underline; text-underline-offset: 2px; }
#version-check[hidden], #version-update[hidden] { display: none; }
/* 大きい表示。振る場所を画面いっぱいに広げて、離れた人にも見えるようにする。
   部品はふつうの画面と同じもので、並べ方と大きさだけを変える（後ろのカードなどは、この下に隠れる） */
body.big { overflow: hidden; }
body.big #stage {
  --die-size: min(24vmin, 18vh); /* 下にバーやボタンがあるので、画面の高さにも合わせる */
  position: fixed;
  inset: 0;
  z-index: 10;
  width: auto;
  padding: max(2.5vmin, env(safe-area-inset-top)) 6vmin max(5vmin, env(safe-area-inset-bottom));
  background: var(--bg);
  animation: big-in 0.25s ease-out;
}
body.big #current-deck { margin-bottom: 0; font-size: clamp(14px, 2.4vmin, 26px); }
/* サイコロとテーマは、残った高さの真ん中に置く。上の余白は、サイコロが転がって上に出るぶん */
body.big #result {
  flex: 1;
  min-height: 0;
  justify-content: center;
  gap: 3vmin;
  padding-top: calc(var(--die-size) * 0.4);
}
body.big #die { --size: var(--die-size); }
body.big #topic {
  min-height: 0; /* 高さは、app.js が6つのテーマに合わせて決める */
  max-width: 100%;
  justify-content: center;
  font-size: var(--topic-size, clamp(28px, min(13vw, 13vh), 180px)); /* 収まらないときは、app.js が --topic-size で小さくする */
  line-height: 1.3;
  text-wrap: balance;
  word-break: auto-phrase; /* 対応ブラウザでは、文節の切れ目で折り返す */
  overflow-wrap: anywhere; /* 切れ目が見つからない長い文字列でも、画面からはみ出さないようにする */
}
/* 振る前の案内文は、大きい表示でも、結果より小さく控えめに出す */
body.big #topic.prompt { font-size: clamp(16px, 3.2vmin, 36px); }
body.big #progress, body.big #switches, body.big #play { flex: none; }
body.big #progress { width: min(360px, 100%); }
@keyframes big-in {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.big #stage { animation: none; }
}
/* デッキの選択。ラジオボタンを丸いボタンの見た目にする */
#decks {
  /* 画面に出さないラジオボタン（位置を absolute にしている）の基準にする */
  position: relative;
  display: flex;
  flex: none;
  /* 最初から入っているデッキ、追加したデッキ、「＋」を、行を分けずに続けて並べる。収まらないぶんは、下の行に折り返す */
  flex-wrap: wrap;
  gap: 6px;
  /* 下の「サイコロの設定」とは、線で区切る */
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--dim);
}
#decks label { flex: none; }
#decks label span {
  display: block;
  padding: 3px 11px;
  border: 1.5px solid var(--dim);
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}
/* 追加したデッキは、形は同じまま、名前に下線を引いて、最初から入っているデッキと見分ける。
   選んだ状態でもう一度押すと、編集の窓が開く */
#decks label.custom span { text-decoration: underline; text-underline-offset: 2px; }
/* デッキを作る「＋」。追加したデッキの後ろに置く */
#deck-add {
  flex: none;
  padding: 3px 9px;
  border: 1.5px dashed var(--dim);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}
#decks input:checked + span { border-color: var(--fg); background: var(--fg); color: var(--on-fg); }
#decks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
#decks input:disabled + span { opacity: 0.6; cursor: default; }
#topic-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding-left: 1.6em;
  font-size: 15px;
  line-height: 1.35;
}
/* 6つ出し切ったあとの動きを選ぶ、チェックボックス */
#renew-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
#renew-label:has(:disabled) { cursor: default; }
#topic-list li.on { color: var(--accent); font-weight: bold; }
/* まだ出ていないテーマは、太字にして目立たせる（番号も太くなる） */
#topic-list li:not(.done) { font-weight: bold; }
#topic-list input {
  width: calc(100% - 34px);
  padding: 2px 6px;
  border: 1px solid var(--dim);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
}
#topic-list li.on input { border-color: var(--accent); }
/* 出たテーマの印。その行の 🔄 と入れ替わりで、同じ位置・同じ大きさで出る。
   前に出た行は ✓。済んだものなので、絵文字ではなく、薄い色の文字にして目立たせない。
   いまの結果の行は 👈（絵文字なので、ここで決めた色は効かない）。出し分けは app.js の render() */
#topic-list .done-mark {
  display: none;
  padding: 0 4px;
  font-size: 15px;
  color: var(--dim);
  font-weight: bold;
}
#topic-list li.done .done-mark { display: inline-block; }
#topic-list li.done button { display: none; }
/* 前に出たテーマは、まだ出ていないテーマと見分けやすいよう、細字のまま、行ごと薄くする（取り消し線は引かない）。
   書き換えるために選んだときは、読みやすい濃さに戻す。いま出ている結果の行（.on）は、薄くしない */
#topic-list li.done:not(.on) input { color: var(--muted); opacity: 0.5; }
#topic-list li.done:not(.on) input:focus { opacity: 1; }
#topic-list li.done:not(.on)::marker { color: var(--dim); }
#topic-list button {
  padding: 0 4px;
  border: none;
  background: transparent;
  font-size: 15px;
}
/* スマホの縦持ちでは、振る場所・カード・いちばん下の入口が縦に積まれる。1画面に収まるよう、間と上下の余白を少し詰める */
@media (max-width: 480px) {
  body { row-gap: 18px; padding-block: 12px; }
}
/* 幅の狭い画面では、カードの中の余白を少しずつ詰めて、正方形に収まるようにする */
@media (max-width: 379px) {
  #topic-card { padding: 12px; }
  #topic-card header { margin-bottom: 4px; }
  #renew-label { margin-top: 2px; font-size: 12px; }
  #topic-list { line-height: 1.3; }
  #decks { gap: 5px; }
  #decks { padding-bottom: 6px; margin-bottom: 6px; }
  #decks label span { padding: 3px 9px; }
}
/* デッキを作る・直す窓 */
#deck-editor label, #deck-import-dialog label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: bold; }
#deck-editor input, #deck-editor textarea, #deck-import-dialog input, #notice input {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--dim);
  border-radius: 8px;
  background: var(--die);
  color: var(--fg);
  font: inherit;
  font-size: 16px; /* これより小さいと、iPhone で入力欄を選んだときに画面が拡大される */
}
#deck-editor textarea { resize: vertical; line-height: 1.5; }
/* 最初から入っているデッキは見るだけ。保存のボタンを出さず、入力欄は地の色にして、直せないことが分かるようにする */
#deck-editor.view #deck-save { display: none; }
#deck-editor.view input, #deck-editor.view textarea { background: transparent; }
#deck-editor #deck-count { margin: 4px 0 0; }
#deck-editor #deck-edit-note { margin: 2px 0 0; }
#deck-editor #deck-view-note { margin: 6px 0 0; }
#deck-errors { margin: 8px 0 0; padding-left: 1.2em; color: var(--accent-dark); font-size: 13px; }
#deck-errors:empty { display: none; }
#deck-editor .actions { display: flex; gap: 8px; margin-top: 14px; }
/* 保存は、この窓の主な操作。「なにでる？」ボタンと同じ色にする */
#deck-editor #deck-save { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
#deck-menu[hidden], #deck-menu button[hidden] { display: none; }
/* 見出しの右の「•••」と、そこから開くメニュー */
#deck-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#deck-editor #deck-head h2 { margin: 0; }
#deck-editor #deck-more { padding: 4px 8px; border: none; color: var(--muted); font-size: 11px; letter-spacing: 2px; }
#deck-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--dim);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 6px 20px rgb(58 42 16 / 0.2);
}
#deck-editor #deck-menu button { padding: 12px 22px 12px 14px; border: none; border-radius: 8px; font-size: 16px; text-align: left; }
#deck-editor #deck-menu button:hover:not(:disabled), #deck-editor #deck-menu button:focus-visible { background: var(--bg); }
#deck-editor #deck-menu #deck-delete { color: var(--accent-dark); }
/* 項目の前の絵文字。読み上げでは飛ばす（2つめの指定が効かないブラウザでは、1つめが使われる） */
#deck-menu button::before { display: inline-block; width: 1.6em; }
#deck-import::before { content: "📥"; content: "📥" / ""; }
#deck-share::before { content: "📤"; content: "📤" / ""; }
#deck-copy::before { content: "📋"; content: "📋" / ""; }
#deck-delete::before { content: "🗑️"; content: "🗑️" / ""; }
/* 削除の確認の窓。問いかけと、ボタン2つだけの小さな窓 */
#deck-delete-confirm { width: min(300px, calc(100vw - 48px)); }
#deck-delete-confirm p { margin: 0 0 14px; font-weight: bold; }
#deck-delete-confirm .actions, #deck-import-dialog .actions { display: flex; gap: 8px; }
/* リンクを貼り付ける窓と、お知らせの窓 */
#deck-import-dialog label { margin-top: 0; }
#deck-import-dialog .actions { margin-top: 14px; }
#deck-import-dialog #deck-import-yes { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
#deck-import-error { margin: 8px 0 0; color: var(--accent-dark); font-size: 13px; }
#deck-import-error:empty { display: none; }
#notice { width: min(320px, calc(100vw - 48px)); }
#notice p { margin: 0 0 14px; }
#notice input { margin-bottom: 14px; font-size: 13px; }
#notice input[hidden] { display: none; }
#notice-close { display: block; margin-left: auto; }