/* エンドロール（public/js/endroll.js）。全面の層の中に、横長は 1920×1080・縦長（スマホ）は 1080×1920 の舞台を置いて拡大縮小する。 */
.endroll { position: fixed; inset: 0; z-index: 1000; background: #0c0c10; color: var(--text); overflow: hidden; cursor: pointer; }
.er-box { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.er-box.land { width: 1920px; height: 1080px; }
.er-box.port { width: 1080px; height: 1920px; }

/* ふりかえり（横長は左・縦長は上） */
.er-replay { position: absolute; display: flex; flex-direction: column; gap: 14px; }
.land .er-replay { left: 80px; top: 70px; width: 1100px; height: 900px; }
.port .er-replay { left: 50px; top: 60px; width: 980px; height: 1000px; }
.er-topic { margin: 0; display: flex; align-items: baseline; gap: 16px; font-weight: 900; font-size: 40px; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.er-topic bdi { overflow: hidden; text-overflow: ellipsis; }
.er-k { flex: none; font-size: 24px; color: #0c0c10; background: var(--accent); border-radius: 8px; padding: 2px 12px; }
.er-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; background: #16161b; border: 3px solid #2d2f39; border-radius: 18px; padding: 18px; }
.er-tier { flex: 1; min-height: 0; --label-w: 110px; --label-fs: 40px; --chip-fs: 26px; }
.er-cap { flex: none; min-height: 84px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 30px; font-weight: 800; }
.er-cap .er-w { background: #fff; color: #222; border-radius: 999px; padding: .1em .7em; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-cap .er-w.wimg { padding: 0; background: none; }
.er-cap .er-w.wimg img { height: 64px; width: auto; border-radius: 8px; vertical-align: middle; }
.er-n { color: var(--sub); font-size: 26px; }
.er-rank { min-width: 64px; text-align: center; border-radius: 10px; padding: 2px 10px; font-weight: 900; }
.er-v.ok { color: var(--ok); }
.er-v.ng { color: var(--ng); }
.er-unlock { font-size: 24px; color: #0c0c10; background: var(--accent); border-radius: 999px; padding: 2px 14px; }
.er-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.er-name bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.er-tag { margin: 0; display: flex; flex-direction: column; gap: 6px; color: var(--sub); font-size: 24px; font-weight: 800; letter-spacing: .08em; }
.er-tag::before { content: ''; width: 120px; height: 4px; border-radius: 2px; background: #ff7a1a; }

/* クレジット（横長は右・縦長は下）。下から上へ流れる（endroll.js が transform を動かす） */
.er-credits { position: absolute; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.land .er-credits { left: 1260px; top: 0; width: 600px; height: 960px; }
.port .er-credits { left: 60px; top: 1090px; width: 960px; height: 700px; }
.er-scroll { display: flex; flex-direction: column; gap: 84px; text-align: center; transform: translateY(2000px); }
.er-sec { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.er-h { margin: 0 0 6px; color: #ffb02e; font-size: 26px; font-weight: 900; letter-spacing: .06em; }
.er-big { margin: 0; font-size: 42px; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; max-width: 100%; }
.er-p { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.3; max-width: 100%; }
.er-names { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.er-names[data-cols] { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 8px 40px; }
.port .er-names[data-cols] { grid-template-columns: repeat(3, minmax(0, max-content)); }
.er-names[data-cols] .er-p { font-size: 26px; text-align: start; min-width: 0; }
.land .er-names[data-cols] .er-name bdi { max-width: 200px; }
.port .er-names[data-cols] .er-name bdi { max-width: 220px; }
.er-org { color: var(--sub); font-size: 26px; }
.er-more { color: var(--sub); }
.er-reference { position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
.er-card-window { width: 100%; overflow: hidden; text-align: start; }
.er-card-strip { display: flex; width: max-content; gap: 16px; padding: 10px 0; font-size: 24px; }
.er-card { flex: none; white-space: nowrap; border: 1px solid #555; border-radius: 8px; padding: 4px 12px; }
.er-card.wimg img { height: 52px; width: auto; }
.er-cast-rank { min-width: 100px; border-radius: 8px; padding: 2px 12px; }
.er-ending-number { margin: 0; color: var(--sub); font-size: 26px; letter-spacing: .12em; }

/* 後の場面（全面） */
.er-outro { position: absolute; inset: 0; z-index: 5; background: #0c0c10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 0 140px; text-align: center; animation: er-in .8s ease-out; }
.port .er-outro { padding: 0 70px; }
.er-ending { margin: 0; font-size: 54px; font-weight: 800; line-height: 1.6; max-width: 1500px; overflow-wrap: break-word; animation: er-in 1.6s ease-out; }
.port .er-ending { font-size: 50px; }
/* 結末の一文の折り返し（2026-11-04）: 前半（決まり文句の節）と後半は別の行。語・文節の途中では折らない（hyphens なし）・行の長さをそろえて 1〜2 文字だけの行を作らない。
   日本語・中国語は endroll.js が塊の間に <wbr> を入れる（keep-all で、その切れ目でだけ折り返す）。 */
.er-ending { hyphens: none; text-wrap: balance; overflow-wrap: normal; } /* break-word だと、行をそろえる計算（balance）が塊の途中で折る案を選ぶことがある */
.er-e1, .er-e2 { display: block; }
.er-nb { white-space: nowrap; }
.er-ending:lang(ja), .er-ending:lang(zh-hans), .er-ending:lang(zh-hant), .er-ending:lang(ko) { word-break: keep-all; text-wrap: pretty; } /* 日本語・中国語は balance だと <wbr> を無視して塊の途中で折ることがあるので pretty（最後の行が短くなりすぎない） */
.port .er-ending:lang(ja) { font-size: 40px; }
.er-ach { margin: 0; font-size: 32px; font-weight: 800; color: #0c0c10; background: var(--accent); border-radius: 999px; padding: 10px 32px; animation: er-in 1s ease-out 1.2s both; }
.er-ach-why { margin: -20px 0 0; font-size: 26px; font-weight: 700; color: #c9c9d2; animation: er-in 1s ease-out 1.5s both; }
/* 名前の場面: 部屋の上限 111 人も同じ画面に。名前は bdi のまま、長い物は各セル内で省略する。 */
.er-celebration { width: 100%; height: 880px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; min-width: 0; }
.port .er-celebration { height: 1660px; }
.er-streak { margin: 0; flex: none; font-size: 48px; line-height: 1.2; font-weight: 900; color: var(--accent); overflow-wrap: anywhere; text-wrap: balance; }
.er-player-count { margin: 0; flex: none; font-size: 32px; line-height: 1.2; font-weight: 800; }
/* 40 人までは名前の塊を中央に寄せる（8 人で画面いっぱいに散らばらない。列の数は endroll.js の --er-cols） */
.er-roster { flex: 0 1 auto; min-height: 0; max-width: 100%; margin-top: 24px; display: grid; grid-template-columns: repeat(var(--er-cols, 3), minmax(0, max-content)); grid-auto-rows: auto; align-content: center; justify-content: center; gap: 14px 64px; --er-face: 36px; }
.er-player { max-width: 560px; }
.er-roster[data-size='xs'] { --er-cols: 1; }
.er-roster[data-size='s'], .er-roster[data-size='m'] { --er-cols: 2; }
.port .er-roster { --er-cols: 2; }
.port .er-roster[data-size='xs'], .port .er-roster[data-size='s'] { --er-cols: 1; }
.er-player { min-width: 0; min-height: 0; display: flex; align-items: center; font-size: 32px; line-height: 1.2; font-weight: 700; text-align: start; }
.er-roster .er-name { width: 100%; gap: 8px; }
.er-roster bdi { flex: 1; min-width: 0; max-width: none; }
.er-roster .av { width: var(--er-face); height: var(--er-face); font-size: calc(var(--er-face) * .5); }
.dense .er-roster { flex: 1; width: 100%; margin-top: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); justify-content: stretch; gap: 4px 16px; --er-face: 24px; }
.dense .er-player { max-width: none; }
.dense .er-player { font-size: 22px; }
.port .dense .er-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); --er-face: 28px; }
.port .dense .er-player { font-size: 24px; }
.er-logo { --logo-h: 300px; } /* 板の大きさ・余白・角丸は common.css の .logo-plate（--logo-h だけで決まる）。img の高さは上書きしない */
.port .er-logo { --logo-h: 230px; }
.er-thanks { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: .1em; color: var(--sub); }
@keyframes er-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .er-outro, .er-ending, .er-ach, .er-ach-why { animation: none; } }

/* とばす・閉じる（右下・縦長は下） */
.er-btns { position: absolute; display: flex; gap: 16px; z-index: 6; }
/* 後の場面の間は、下の振り返りとクレジットを描かない（新しく開いた段の動きが上に出ないように） */
.endroll:not([data-phase=roll]) .er-replay, .endroll:not([data-phase=roll]) .er-credits { visibility: hidden; }
.land .er-btns { right: 40px; bottom: 30px; }
.port .er-btns { right: 50px; bottom: 40px; }
.er-btn { background: rgba(45, 47, 57, .9); color: var(--text); border-radius: 999px; padding: 12px 30px; font-size: 26px; font-weight: 800; outline: 4px solid transparent; }
.er-btn:focus-visible, body[data-pad] .er-btn:focus { outline-color: #fff; }
[dir=rtl] .land .er-replay { left: 740px; }
[dir=rtl] .land .er-credits { left: 60px; }
[dir=rtl] .land .er-btns { right: auto; left: 40px; }
[dir=rtl] .port .er-btns { right: auto; left: 50px; }

/* クリアの画面の［エンドロールを見る］ */
.endroll-btn { display: block; width: 100%; margin: 10px 0; background: #ff7a1a; color: #fff; border-radius: 14px; padding: 14px 18px; font-size: calc(26px * var(--fs, 1)); font-weight: 900; line-height: 1.25; overflow-wrap: break-word; }
.endroll-btn:focus-visible, body[data-pad] .endroll-btn:focus { outline: 5px solid #fff; outline-offset: 3px; }