/* X Post Page Styles - Extracted from inline styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #000;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .gallery-btn {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 6px 12px;
      text-decoration: none;
      font-size: clamp(0.7rem, 1.3vw, 0.8rem);
      letter-spacing: 0.1em;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      border-radius: 3px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .gallery-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 1);
      border-color: rgba(255, 255, 255, 0.4);
    }

    .tweet-container {
      flex: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 45px 15px 10px;
      max-height: calc(100vh - 250px);  /* ビューポート高さから広告分を自動差し引き */
      overflow-y: auto;  /* コンテンツが長い場合はスクロール可能 */
    }

    .tweet-card {
      max-width: 550px;
      margin: 0 auto;
    }

    .tweet-card img {
      max-height: calc(100vh - 400px);  /* 画像高さを自動調整 */
      width: 100%;
      object-fit: contain;  /* アスペクト比を保持 */
    }

    @keyframes colorBarGlitch {
      0% {
        filter: brightness(1) contrast(1);
        opacity: 1;
      }
      10% {
        filter: brightness(0.95) contrast(1.05);
        opacity: 0.98;
      }
      20% {
        filter: brightness(1.05) contrast(0.95);
        opacity: 1;
      }
      30% {
        filter: brightness(0.9) contrast(1.1);
        opacity: 0.95;
      }
      40% {
        filter: brightness(1) contrast(1);
        opacity: 1;
      }
      50% {
        filter: brightness(1.02) contrast(0.98);
        opacity: 0.99;
      }
      60% {
        filter: brightness(0.97) contrast(1.03);
        opacity: 1;
      }
      70% {
        filter: brightness(1.05) contrast(0.95);
        opacity: 0.97;
      }
      80% {
        filter: brightness(0.93) contrast(1.07);
        opacity: 0.98;
      }
      90% {
        filter: brightness(1.01) contrast(0.99);
        opacity: 1;
      }
      100% {
        filter: brightness(1) contrast(1);
        opacity: 1;
      }
    }

    @keyframes scanline {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
      }
    }

    .ad-bottom {
      width: 100%;
      min-height: clamp(100px, 15vh, 200px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: linear-gradient(to right,
        #C0C0C0 0%, #C0C0C0 14.28%,
        #C0C000 14.28%, #C0C000 28.56%,
        #00C0C0 28.56%, #00C0C0 42.84%,
        #00C000 42.84%, #00C000 57.12%,
        #C000C0 57.12%, #C000C0 71.40%,
        #C00000 71.40%, #C00000 85.68%,
        #0000C0 85.68%, #0000C0 100%
      );
      position: relative;
      overflow: hidden;
      animation: colorBarGlitch 3s infinite;
    }

    .ad-bottom::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
      );
      pointer-events: none;
      z-index: 1;
    }

    .ad-bottom::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
      );
      animation: scanline 4s linear infinite;
      z-index: 2;
      pointer-events: none;
    }

    .ad-text {
      position: relative;
      z-index: 10;
      color: rgba(255, 255, 255, 0.9);
      font-size: clamp(1.5rem, 5vw, 3.5rem);
      font-weight: 900;
      letter-spacing: 0.3em;
      font-family: -apple-system, BlinkMacSystemFont, 'Arial Black', sans-serif;
      text-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 255, 255, 0.3);
      text-transform: uppercase;
      animation: textGlitch 0.5s infinite;
    }

    .nav-arrow {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.15);
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 20px;
      line-height: 1;
      border-radius: 50%;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      cursor: pointer;
      opacity: 0.7;
    }

    .nav-arrow:hover {
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 1);
      border-color: rgba(255, 255, 255, 0.4);
      opacity: 1;
    }

    .nav-arrow.disabled {
      opacity: 0.2;
      cursor: not-allowed;
      pointer-events: none;
    }

    .nav-arrow-left {
      left: calc(50% - 350px);
    }

    .nav-arrow-right {
      right: calc(50% - 350px);
    }

    @media (max-width: 640px) {
      .gallery-btn {
        top: 8px;
        left: 8px;
        padding: 5px 10px;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
      }

      .tweet-container {
        padding: 40px 10px 8px;
      }

      .nav-arrow {
        display: none;  /* スマホではボタン非表示 */
      }
    }


    @keyframes textGlitch {
      0% { text-shadow: 2px 0 rgba(255, 0, 255, 0.4), -2px 0 rgba(0, 255, 255, 0.4); }
      25% { text-shadow: -2px 0 rgba(255, 0, 255, 0.4), 2px 0 rgba(0, 255, 255, 0.4); }
      50% { text-shadow: 2px 2px rgba(255, 0, 255, 0.4), -2px -2px rgba(0, 255, 255, 0.4); }
      75% { text-shadow: -2px 2px rgba(255, 0, 255, 0.4), 2px -2px rgba(0, 255, 255, 0.4); }
      100% { text-shadow: 0 0 rgba(255, 0, 255, 0.4), 0 0 rgba(0, 255, 255, 0.4); }
    }

    @keyframes engagementGlitch {
      0% { text-shadow: 1px 0 rgba(255, 0, 255, 0.25), -1px 0 rgba(0, 255, 255, 0.25); }
      25% { text-shadow: -1px 0 rgba(255, 0, 255, 0.25), 1px 0 rgba(0, 255, 255, 0.25); }
      50% { text-shadow: 1px 1px rgba(255, 0, 255, 0.25), -1px -1px rgba(0, 255, 255, 0.25); }
      75% { text-shadow: -1px 1px rgba(255, 0, 255, 0.25), 1px -1px rgba(0, 255, 255, 0.25); }
      100% { text-shadow: 0 0 rgba(255, 0, 255, 0.25), 0 0 rgba(0, 255, 255, 0.25); }
    }

    .tweet-card > div:first-child {
      animation: textGlitch 0.3s infinite;
      position: relative;
      filter: contrast(1.1) brightness(0.95);
    }

    .tweet-card > div:first-child::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: rgba(255, 0, 255, 0.3);
      mix-blend-mode: screen;
      animation: textGlitch 0.5s infinite reverse;
      clip-path: inset(0 0 0 0);
    }

    .tweet-card > div:first-child::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: rgba(0, 255, 255, 0.3);
      mix-blend-mode: screen;
      animation: textGlitch 0.7s infinite;
      clip-path: inset(0 0 0 0);
    }

    .engagement-number {
      animation: engagementGlitch 0.4s infinite;
      filter: contrast(1.05) brightness(0.98);
    }

    .engagement-number::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: rgba(255, 0, 255, 0.2);
      mix-blend-mode: screen;
      animation: engagementGlitch 0.6s infinite reverse;
      clip-path: inset(0 0 0 0);
    }

    .engagement-number::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: rgba(0, 255, 255, 0.2);
      mix-blend-mode: screen;
      animation: engagementGlitch 0.8s infinite;
      clip-path: inset(0 0 0 0);
    }