/**
 * tweet-grid.css - ツイートグリッド + モーダル
 * detail.php / index.php 共通
 * @version 1
 *
 * 【仕様】
 * - 3列タイルグリッド（画像/テキスト混在）
 * - 複数画像タイル: crossfadeアニメーション
 * - タイル入替: 6x6マスク分解アニメーション
 * - モーダル: 画像スライダー + テキスト + 店舗遷移ボタン
 * - 無限スクロール: IntersectionObserver + JSON API
 */

/* ===== セクションヘッダー（枠なし用） ===== */
.sec-title{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:10px;padding:0 2px;display:flex;align-items:center;gap:6px}

/* ===== グリッド ===== */
.tw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:var(--radius-md);overflow:hidden}
.tw-grid--infinite{border-radius:0}

/* ===== タイル共通 ===== */
.tw-tile{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer}

/* 画像タイル */
.tw-tile--img{background:#222}
.tw-tile__img{position:absolute;inset:0;background-size:cover;background-position:center}
.tw-tile__img-stack{position:absolute;inset:0}
.tw-tile__img-layer{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .8s ease}
.tw-tile__multi{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border-radius:5px;padding:1px 5px;font-size:.52rem;font-weight:700;color:#fff;z-index:3}
.tw-tile__caption{position:absolute;bottom:0;left:0;right:0;padding:14px 5px 4px;z-index:3;background:linear-gradient(transparent,rgba(0,0,0,.6));font-size:.55rem;line-height:1.3;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-tile__shop{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border-radius:5px;padding:1px 6px;font-size:.5rem;font-weight:600;color:var(--accent-blue-light);z-index:3;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-tile__cast{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border-radius:5px;padding:1px 6px;font-size:.5rem;font-weight:600;color:#f0abfc;z-index:3;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* テキストタイル */
.tw-tile--text{display:flex !important;flex-wrap:wrap !important;align-items:center !important;align-content:center !important;justify-content:center !important;padding:6px !important;text-align:center !important;line-height:1.35 !important;word-break:break-word !important}
.tw-tile--text,.tw-tile--text *{writing-mode:horizontal-tb !important}
.tw-tile__word{display:inline !important}
.tw-tile__word--xl{font-size:1.3em;font-weight:900}
.tw-tile__word--lg{font-size:1.1em;font-weight:700}
.tw-tile__word--md{font-size:.88em;font-weight:500}
.tw-tile__word--sm{font-size:.76em}
.tw-tile__word--xs{font-size:.68em}

/* テキストタイル背景 */
.tbg1{background:#1a1a2e}.tbg2{background:#16213e}.tbg3{background:#1b1b2f}.tbg4{background:#0f3460}
.tbg5{background:#1a0a2e}.tbg6{background:#2d132c}.tbg7{background:#1c1427}.tbg8{background:#10253e}

/* テキストタイルフォント */
.tfn1{font-family:'Dela Gothic One',cursive;font-size:.68rem}
.tfn2{font-family:'Reggae One',cursive;font-size:.68rem}
.tfn3{font-family:'Hachi Maru Pop',cursive;font-size:.64rem}
.tfn4{font-family:'Yusei Magic',sans-serif;font-size:.66rem}
.tfn5{font-family:'RocknRoll One',sans-serif;font-size:.68rem}
.tfn6{font-family:'Kosugi Maru',sans-serif;font-size:.66rem}

/* テキストタイルグラデーション */
.tgr1 .tw-tile__word{background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tgr2 .tw-tile__word{background:linear-gradient(135deg,#4facfe,#00f2fe);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tgr3 .tw-tile__word{background:linear-gradient(135deg,#43e97b,#38f9d7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tgr4 .tw-tile__word{background:linear-gradient(135deg,#fa709a,#fee140);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tgr5 .tw-tile__word{background:linear-gradient(135deg,#a18cd1,#fbc2eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tgr6 .tw-tile__word{background:linear-gradient(135deg,#ffecd2,#fcb69f);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tgr7 .tw-tile__word{background:linear-gradient(135deg,#89f7fe,#66a6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tgr8 .tw-tile__word{background:linear-gradient(135deg,#fddb92,#d1fdff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ===== 6x6マスク（タイル入替アニメ） ===== */
.tw-tile__mask{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none}
.tw-tile__mask-cell{background:var(--bg-main, #111);opacity:0;transition:opacity .35s ease}

/* ===== ポップアップモーダル ===== */
.tw-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:24px 20px}
.tw-modal.is-open{opacity:1;pointer-events:auto}
.tw-modal__popup{width:100%;max-width:340px;background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:scale(.92) translateY(20px);transition:transform .3s cubic-bezier(.22,1,.36,1);max-height:85vh;display:flex;flex-direction:column}
.tw-modal.is-open .tw-modal__popup{transform:scale(1) translateY(0)}
.tw-modal__images{position:relative;width:100%;flex-shrink:0}
.tw-modal__slider{display:flex;transition:transform .3s ease}
.tw-modal__slide{flex:0 0 100%}
.tw-modal__slide img{width:100%;display:block;max-height:50vh;object-fit:contain;background:#111}
.tw-modal__dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px}
.tw-modal__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);border:none;cursor:pointer}
.tw-modal__dot.is-active{background:#fff}
.tw-modal__text{padding:14px 16px 18px;overflow-y:auto;flex:1;min-height:0}
.tw-modal__body{font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.85);word-break:break-word}
.tw-modal__meta{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.tw-modal__date{font-size:.68rem;color:var(--text-secondary)}
.tw-modal__shop-name{font-size:.72rem;color:var(--accent-blue-light);font-weight:600}
.tw-modal__textonly{padding:28px 20px;text-align:center;overflow-y:auto}
.tw-modal__textonly .tw-modal__body{font-size:.95rem}
.tw-modal__actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.tw-modal__go-shop{flex:1;padding:10px;border-radius:var(--radius-md);background:var(--accent-blue);color:#fff;font-size:.82rem;font-weight:700;border:none;cursor:pointer;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
.tw-modal__close{padding:10px 16px;border-radius:var(--radius-md);background:rgba(255,255,255,.1);color:var(--text-secondary);font-size:.78rem;border:none;cursor:pointer}

/* ===== 無限スクロールローダー ===== */
.infinite-loader{text-align:center;padding:24px;color:var(--text-secondary);font-size:.75rem}
.infinite-loader__dots{display:inline-flex;gap:4px}
.infinite-loader__dots span{width:6px;height:6px;border-radius:50%;background:var(--text-secondary);animation:twDotPulse 1.2s ease-in-out infinite}
.infinite-loader__dots span:nth-child(2){animation-delay:.2s}
.infinite-loader__dots span:nth-child(3){animation-delay:.4s}
@keyframes twDotPulse{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* ===== モーダル スクロールバー ===== */
.tw-modal__text::-webkit-scrollbar,
.tw-modal__textonly::-webkit-scrollbar{width:4px}
.tw-modal__text::-webkit-scrollbar-track,
.tw-modal__textonly::-webkit-scrollbar-track{background:transparent}
.tw-modal__text::-webkit-scrollbar-thumb,
.tw-modal__textonly::-webkit-scrollbar-thumb{background:rgba(124,179,240,.3);border-radius:4px}
.tw-modal__text::-webkit-scrollbar-thumb:hover,
.tw-modal__textonly::-webkit-scrollbar-thumb:hover{background:rgba(124,179,240,.5)}
.tw-modal__text,
.tw-modal__textonly{scrollbar-width:thin;scrollbar-color:rgba(124,179,240,.3) transparent}