/* =====================================================================
   0.12.1：さそう・シェア（ui/share.js）と、タイトル画面の「にぎわい・いいところ」
   ===================================================================== */

/* ---- タイトル画面：いいところ（無料・登録かんたん・スマホ・協力） */
.title-points { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.title-points li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid rgba(227, 179, 65, .5); background: rgba(227, 179, 65, .1); color: var(--brass-hi); font-size: var(--fs-min); font-weight: 700; line-height: 1.5; }
.title-points li::before { content: '✔'; font-size: .85em; color: var(--hp); }
.title-meta { margin-top: 12px; }
.chip.crowd { background: rgba(111, 168, 245, .16); color: #cfe0ff; }
.chip.crowd b, .chip.ok b { color: inherit; }
.title-about { text-decoration: none; }

/* ---- タイトル画面：さそいのリンクで来た人への一言 */
.title-ann.title-inv { background: rgba(255, 134, 179, .13); border-color: rgba(255, 134, 179, .65); }
.title-ann.title-inv b { color: #ffc2d9; }
#title-inv:empty { display: none; }


/* ---- せまい画面の登録：職業の説明をたたむ */
.jd-more { margin-top: 8px; }
.jd-more > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: var(--brass-hi); font-weight: 700; font-size: calc(14px * var(--fs-k)); cursor: pointer; list-style: none; }
.jd-more > summary::-webkit-details-marker { display: none; }
.jd-more > summary::before { content: '▸'; display: inline-block; transition: transform .15s; }
.jd-more[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .jd-more > summary::before { transition: none; } }

/* ---- シェアの小窓・「さそう」のページ */
.sh h2 { display: flex; align-items: center; gap: 8px; }
.sh-text { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(5, 12, 9, .45); border: 1.5px solid var(--line); color: var(--text); font-size: calc(14px * var(--fs-k)); line-height: 1.7; overflow-wrap: anywhere; }
.sh-url { display: flex; gap: 8px; margin: 10px 0 0; }
.sh-url input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px; border-radius: var(--r-btn); border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .6); color: var(--text); font: inherit; font-size: calc(14px * var(--fs-k)); }
.sh-url .btn { flex: none; }
.sh-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.sh-btns .btn { justify-content: center; text-align: center; text-decoration: none; min-height: 44px; }
.sh-btns .sh-x { background: #101418; border-color: #5b6770; color: #fff; }
.sh-btns .sh-x:hover { background: #1b232a; }
.sh-btns .sh-line { background: #0b3d22; border-color: #3fae6b; color: #d7ffe6; }
.sh-btns .sh-line:hover { background: #0f4c2b; }
.sh-note { margin-top: 8px; }
@media (max-width: 420px) { .sh-url { flex-direction: column; } .sh-btns { grid-template-columns: 1fr; } }

.iv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.iv-stats > div { padding: 8px 10px; border-radius: 10px; background: rgba(5, 12, 9, .35); border: 1.5px solid var(--line); text-align: center; }
.iv-stats dt { color: var(--faint); font-size: var(--fs-min); }
.iv-stats dd { margin: 2px 0 0; color: var(--text); font-size: calc(14px * var(--fs-k)); }
.iv-stats dd b { font-size: calc(20px * var(--fs-k)); color: var(--brass-hi); }
.iv-list { margin: 10px 0 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; border-radius: 10px; border: 1.5px solid var(--line); }
.iv-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line); }
.iv-list li:first-child { border-top: 0; }
.iv-list li b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-list li .num { flex: none; color: var(--muted); }
.iv-none, .iv-by { margin-top: 10px; }
.iv-rules { margin: 12px 0 0; padding: 0 12px; border-radius: 10px; background: rgba(5, 12, 9, .3); border: 1.5px solid var(--line); }
.iv-rules > summary { min-height: 44px; display: flex; align-items: center; color: var(--muted); font-weight: 700; cursor: pointer; }
.iv-rules ul { margin: 0 0 12px; padding-left: 1.3em; color: var(--muted); font-size: var(--fs-min); line-height: 1.7; }
.iv-cheer { margin: 14px 0 0; padding-top: 12px; border-top: 1.5px dashed var(--line-2); }
.iv-cheer h3 { margin: 0 0 6px; font-size: calc(15px * var(--fs-k)); color: var(--brass-hi); }
.iv-cheer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.iv-cheer li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.iv-cheer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brass-hi); text-underline-offset: 3px; }
.iv-cheer small { color: var(--faint); font-size: var(--fs-min); }

/* ---- さそいの知らせ（おくりもの）の小窓：大封印戦の小窓の形を借りる */
.iv-r .sl-r-list li { display: grid; gap: 2px; }
.iv-r .sl-r-list small { color: var(--muted); }

/* ---- 大封印戦の札：「なかまを呼ぶ」 */
.sl-call { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.sl-call small { color: var(--faint); font-size: var(--fs-min); }

/* ---- 読みこみ中の画面：ひとことの紹介（検索の案内役にも読める文） */
.boot-about { margin: 6px 0 0; font-size: var(--fs-min); color: var(--faint); }
.boot-about a { color: var(--brass-hi); text-underline-offset: 3px; }

/* ---- メニュー：「友だちをさそう」の帯（ボタンのならびの下） */
.wm-invite { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 10px 0 0; padding: 8px 14px; border-radius: var(--r-panel); border: 1.5px solid rgba(255, 134, 179, .55); background: rgba(255, 134, 179, .1); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wm-invite:hover, .wm-invite:focus-visible { background: rgba(255, 134, 179, .18); }
.wm-invite .ic { flex: none; font-size: 26px; line-height: 1; }
.wm-invite-t { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.4; }
.wm-invite-t b { color: #ffc2d9; }
.wm-invite-t small { color: var(--muted); font-size: var(--fs-min); }
.wm-invite-go { flex: none; color: var(--faint); font-size: 22px; line-height: 1; }

/* ---- 0.12.4：メニュー：「さっきの戦いの記録」（あるときだけ。友だちをさそう の下に、ひかえめな1行） */
.wm-lastlog { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 6px 14px; border-radius: var(--r-panel); border: 1.5px solid var(--line); background: rgba(159, 195, 232, .07); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wm-lastlog:hover, .wm-lastlog:focus-visible { background: rgba(159, 195, 232, .15); }
.wm-lastlog .ic { flex: none; font-size: 22px; line-height: 1; }
.wm-ll-t { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.4; }
.wm-ll-t b { color: #cfe2f6; }
.wm-ll-t small { color: var(--muted); font-size: var(--fs-min); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-ll-go { flex: none; color: var(--faint); font-size: 22px; line-height: 1; }
/* ---- 0.12.4：さっきの戦いの記録の窓（戦いの画面の「記録」と同じ行の見た目。高さは画面に合わせる） */
.ll-title { margin: 0 0 4px; font-size: calc(18px * var(--fs-k)); }
.ll-sub { margin: 0 0 8px; }
.ll-log { height: min(52vh, 460px); border-radius: 12px; border: 1.5px solid var(--line); background: rgba(13, 23, 19, .6); margin-bottom: 8px; }

/* =====================================================================
   0.12.3：宣伝まわりを、もう少し目立つ所に（公式 X・ひろめる・応援する）
   ===================================================================== */

/* ---- タイトル画面：上の「公式 X」のボタン */
.title-x { text-decoration: none; }

/* ---- タイトル画面：お知らせの下の「ひろめる・応援する」のカード（前は、いちばん下の小さな文字のリンクだった） */
.title-side { grid-area: news; min-width: 0; display: grid; gap: 14px; align-content: start; }
.title-side .title-newsbox { grid-area: auto; }
/* 「ログイン」のタブのときは、ログインの窓のすぐ下に出す（窓とカードを、1つの列に入れる） */
.title-cardcol { grid-area: card; min-width: 0; display: grid; gap: 20px; align-content: start; }
.title-cardcol .title-card { grid-area: auto; }
.title-cheer { min-width: 0; padding: 14px 16px 16px; border-radius: var(--r-panel); border: 1.5px solid rgba(227, 179, 65, .5); background: linear-gradient(180deg, rgba(227, 179, 65, .1), rgba(227, 179, 65, .03)); }
.title-cheer h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: calc(16px * var(--fs-k)); color: var(--brass-hi); }
.tc-lead { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-min); line-height: 1.6; }
.tc-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.tc-b { display: grid; gap: 1px; align-content: center; justify-items: center; min-width: 0; min-height: 56px; padding: 6px 10px; text-align: center; text-decoration: none; line-height: 1.35; white-space: normal; }
.tc-b b { font-size: calc(15px * var(--fs-k)); }
.tc-b small { font-size: var(--fs-min); font-weight: 400; opacity: .9; overflow-wrap: anywhere; }
.tc-share { grid-column: 1 / -1; background: var(--brass); color: var(--brass-ink); border-color: var(--brass); box-shadow: 0 3px 0 var(--brass-deep); }
.tc-share:hover { background: var(--brass-hi); }
.tc-share:active { box-shadow: 0 1px 0 var(--brass-deep); transform: translateY(2px); }
.tc-btns > .tc-b:last-child:nth-child(even) { grid-column: 1 / -1; } /* 下の段が1つだけのときは、はば いっぱいに */
.tc-x { background: #101418; border-color: #5b6770; color: #fff; }
.tc-x:hover { background: #1b232a; }
.tc-mugen { background: rgba(111, 168, 245, .14); border-color: rgba(111, 168, 245, .6); color: #dbe8ff; }
.tc-mugen:hover { background: rgba(111, 168, 245, .24); }
/* 0.12.5：サーバー代の応援（お金の応援だと分かるように、ほかのボタンと色を分ける。ゲームの操作のボタンとは、形も場所もちがう） */
.tc-sup { background: rgba(240, 150, 170, .14); border-color: rgba(240, 150, 170, .6); color: #ffe3ea; }
.tc-sup:hover { background: rgba(240, 150, 170, .24); }
.tc-sup-note { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-min); line-height: 1.6; }
.tc-vote { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.tc-vote[hidden] { display: none; }
.title-cheer .tv-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 200px; color: var(--brass-hi); }

/* ---- シェアの小窓の下：公式 X の一言 */
.sh-xf { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-min); line-height: 1.6; }
.sh-xf a { color: var(--brass-hi); text-underline-offset: 3px; }

/* ---- メニュー：「友だちをさそう」の下の「応援する」のならび（公式 X・投票・感想）。せまい画面では、公式 X を上の段に はば いっぱいで */
.wm-cheer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
.wm-c { display: grid; gap: 0 8px; align-content: center; justify-items: center; min-width: 0; min-height: 48px; padding: 5px 8px; border-radius: var(--r-btn); border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .35); color: var(--text); text-align: center; text-decoration: none; line-height: 1.3; }
.wm-c b { font-size: var(--fs-min); }
.wm-c small { max-width: 100%; color: var(--muted); font-size: var(--fs-min); overflow-wrap: anywhere; }
.wm-c:hover, .wm-c:focus-visible { background: rgba(227, 179, 65, .12); border-color: rgba(227, 179, 65, .55); }
.wm-c:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.wm-c.k-x { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; align-items: baseline; background: #101418; border-color: #5b6770; }
.wm-c.k-x b { color: #fff; }
.wm-c.k-x small { color: #c9d3da; }
.wm-c.k-x:hover, .wm-c.k-x:focus-visible { background: #1b232a; border-color: #8b97a0; }
.wm-cheer > .wm-c:only-child, .wm-cheer > .k-x + .wm-c:last-child { grid-column: 1 / -1; } /* 1つだけの段は、はば いっぱいに */
/* 0.12.5：サーバー代の応援（ほかの3つの下に、1段で。お金の応援だと分かるように、色を分ける） */
.wm-sup { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 10px; min-height: 48px; margin: 8px 0 0; padding: 6px 10px; border-radius: var(--r-btn); border: 1.5px solid rgba(240, 150, 170, .5); background: rgba(240, 150, 170, .08); color: var(--text); text-align: center; text-decoration: none; line-height: 1.4; align-content: center; }
.wm-sup b { font-size: var(--fs-min); color: #ffe3ea; }
.wm-sup small { color: var(--muted); font-size: var(--fs-min); overflow-wrap: anywhere; }
.wm-sup:hover, .wm-sup:focus-visible { background: rgba(240, 150, 170, .16); border-color: rgba(240, 150, 170, .85); }
.wm-sup:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
@media (min-width: 520px) {
  .wm-cheer { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .wm-cheer > .wm-c { grid-column: auto; }
  .wm-c.k-x { grid-auto-flow: row; align-items: center; }
}

/* ---- 町の部屋：「ひろめる」帯（「つぎ」の帯と同じ形で、色だけ変える。ui/share.js の promoStripHtml） */
.rm-strip.k-promo a.rm-strip-go { color: var(--text); text-decoration: none; }
.rm-strip.k-promo .rm-strip-go b { font-size: 18px; line-height: 1; }
.rm-strip.k-promo.k-invite, .rm-strip.k-promo.k-seal { border-color: rgba(255, 134, 179, .6); background: linear-gradient(90deg, rgba(255, 134, 179, .18), rgba(255, 134, 179, .04)); }
.rm-strip.k-promo.k-invite .rm-strip-ar, .rm-strip.k-promo.k-seal .rm-strip-ar { color: #ffc2d9; }
.rm-strip.k-promo.k-invite .rm-strip-x, .rm-strip.k-promo.k-seal .rm-strip-x { border-left-color: rgba(255, 134, 179, .3); }
.rm-strip.k-promo.k-x, .rm-strip.k-promo.k-mugen, .rm-strip.k-promo.k-vote { border-color: rgba(111, 168, 245, .6); background: linear-gradient(90deg, rgba(111, 168, 245, .18), rgba(111, 168, 245, .04)); }
.rm-strip.k-promo.k-x .rm-strip-ar, .rm-strip.k-promo.k-mugen .rm-strip-ar, .rm-strip.k-promo.k-vote .rm-strip-ar { color: #cfe0ff; }
.rm-strip.k-promo.k-x .rm-strip-x, .rm-strip.k-promo.k-mugen .rm-strip-x, .rm-strip.k-promo.k-vote .rm-strip-x { border-left-color: rgba(111, 168, 245, .3); }