/* 「みんなの同じ瞬間」（nowgrid.js） */
.now-grid-modal { z-index: 60; }
.ng-body { max-width: 720px; background: #14100e; color: #faf5ec; border-color: #3b332e; }
.ng-body .muted { color: #b5a99f; }
.ng-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ng-head h2 { margin: 0; font-size: 18px; }
.now-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 6px; }
.ng-name { display: block; padding: 4px 8px 6px; text-align: left; font-weight: 700; font-size: 13px; color: #faf5ec; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-cell { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #221c19; cursor: pointer; display: block; width: 100%; }
.ng-stage { aspect-ratio: 16 / 9; width: 100%; container-type: inline-size; }
.ng-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ng-cell.failed::after { content: "読み込めませんでした"; position: absolute; inset: 0; display: grid; place-items: center; background: #221c19; color: #b5a99f; font-size: 12px; }
.ng-toggle { color: #faf5ec; border-color: #5a4f48; }
.now-grid-link { display: inline-flex; align-items: center; gap: 6px; }

.ng-body p { margin: 0; }
.now-line .now-grid-link { border: 0; background: none; padding: 2px 0; min-height: 0; color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.now-line:has(.now-grid-link) { border-radius: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.ng-body h2, .ng-body strong { color: #faf5ec; }
.ng-body .ghost { color: #faf5ec; border-color: #5a4f48; background: transparent; }
/* 読み込めなかったセルの文言（CSS の content は辞書を使えないので、言語ごとに書く） */
:lang(en) .ng-cell.failed::after { content: "Couldn't load"; }
:lang(ko) .ng-cell.failed::after { content: "불러오지 못했어요"; }
:lang(zh-Hant) .ng-cell.failed::after { content: "無法載入"; }
