/* price-billboard.css */
#gasboard{
  /* Import Segment7 font for the dot-matrix effect */
  @font-face {
      font-family: 'Segment7';
      src: url('https://raw.githubusercontent.com/BigEvilCorporation/DSEG/master/DSEG7Classic-Bold.ttf') format('truetype');
      /* Note: This URL might not work directly in all environments.
        For production, consider self-hosting the font file. */
  }

  /* Base style for each individual item (the 'electronic billboard' look) */
  .item {
    font-family: 'Segment7', sans-serif; /* Apply dot-matrix font */
    background-color: #2c2c2c; /* Dark base for the board */
    border: 8px solid #000;
    padding: 20px 15px; /* Adjusted padding for smaller columns */
    border-radius: 15px;
    box-shadow: 0 0 40px rgba(255,255,0,0.3), inset 0 0 15px rgba(0,0,0,0.7); /* Yellow glow and inner shadow */
    text-align: center;
    position: relative;/* 這裡要確保有 position: relative; 才能讓內部圖片正確絕對定位 */
    overflow: hidden;
    transform: rotateX(8deg) rotateY(-3deg); /* Slight 3D tilt */
    transform-style: preserve-3d;
    animation: flicker 1.5s infinite alternate; /* Simulate old electronic display flicker */
    box-sizing: border-box;
    margin-bottom: 20px; /* Spacing between items if they stack */
    
      
  }

  /* Overlay for the LED dot-matrix effect */
  .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="3" cy="3" r="1.5" fill="%23ffff00" opacity="0.1"/%3E%3C/svg%3E'); /* Yellow LED dots */
    opacity: 0.6;
    z-index: -1;
    transform: translateZ(-1px); /* Place background behind text */
    overflow: hidden; /* 確保圖片重疊部分不會超出 .item 的範圍 */
  }

  /* Flicker animation */
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.98; } /* Subtle flicker */
  }

  /* Styling for the content within each price item */
  .item .price-item {
    position: relative;
    z-index: 1; /* Ensure content is above the dot-matrix overlay */
    padding: 10px 0; /* Add some internal padding */
  }

  /* Product title (e.g., Natural Gas 1) */
  .item .price-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.8em; /* Adjusted font size for smaller items */
    color: #ffff00; /* Yellow product name */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px rgba(255,255,0,0.5); /* Yellow shadow */
  }

  /* Date information */
  .item .price-item p {
    margin: 8px 0;
    font-size: 0.9em;
    color: #ffee00; /* Light yellow date */
  }

  /* Price display */
  .item .price {
    font-size: 3.5em; /* Adjusted price font size */
    font-weight: bold;
    color: #ffff00; /* Yellow price */
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(255,255,0,1); /* Strong yellow glow */
    margin-top: 15px;
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(50,50,0,0.6); /* Darker yellow-toned background */
    border-radius: 8px;
    border: 1px solid rgba(255,255,0,0.3); /* Yellow border */
  }

@media (max-width: 768px) {

    .item .price {
        font-size: 2.5em; /* Adjusted price font size */
    }
}

  /* 提高價格數字的 z-index，確保它在圖片上方 */
  .item .price-item .price {
    position: relative;
    /*z-index: 12;  z-index 值高於圖片，確保顯示在最上層 */
  }

  /* 圖片容器的樣式 */
  .gas-truck-overlay {
    position: absolute;
    bottom: 0px; /* 圖片底部稍微低於 .item 底部，提供更好的視覺效果 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: 100%; /* 圖片寬度填滿 .item 寬度 */
    max-width: 300px; /* 限制圖片最大寬度 */
    pointer-events: none; /* 讓圖片不影響點擊事件 */
    z-index: 1; /* 圖片層級在價格下方，但在背景上方 */
  }

  .gas-truck-overlay img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    /* 關鍵調整：圖片向上重疊，但不會擋住價格 */
    top: 120px; /* 向上移動一個固定像素值，避免遮擋文字 */
    
  }
}