/* =====================================================
       INVENTORY BAR
    ===================================================== */
/* =====================================================
       TOP NAV
    ===================================================== */
/* =====================================================
       GIVEAWAY PAGE
    ===================================================== */
    .giveaway-page { padding-bottom: 0; }

    .giveaway-page .breadcrumb-home {
      background: transparent;
      border: 0;
      border-radius: 0;
      color: #e2a915;
    }

    .giveaway-page .breadcrumb-home:hover {
      background: transparent;
      border: 0;
      color: #e2a915;
    }

    .giveaway-page .breadcrumb-home svg {
      fill: none;
      stroke: currentColor;
    }

    .giveaway-title-wrap { text-align: center; padding: 16px 24px 4px; }
    .giveaway-title {
      font-size: 26px; font-weight: 800;
      text-transform: uppercase; letter-spacing: 3px; color: #fff;
    }

    /* =====================================================
       GIVEAWAY GRID
    ===================================================== */
    .giveaway-section {
      padding: 20px 24px 0;
      margin-bottom: 20px;
    }
    .giveaway-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      max-width: 1200px; margin: 0 auto;
    }

    /* =====================================================
       GIVEAWAY CARD
    ===================================================== */
    .gw-card {
      background: linear-gradient(180deg, #1c1c2e 0%, #16162a 100%);
      border: 1px solid #252540; border-radius: 14px;
      display: flex; flex-direction: column; overflow: hidden;
    }

    /* Top section: left info + right prize */
    .gw-card-body {
      display: flex; gap: 0; padding: 16px 16px 14px;
    }
    .gw-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-right: 10px; }

    .gw-title {
      font-size: 15px; font-weight: 700; color: #ffffff; line-height: 1.35;
    }
    .gw-subtitle {
      font-size: 10px; color: #687894; line-height: 1.4;
    }

    /* Participants row */
    .gw-pax-row {
      display: flex; align-items: center; gap: 0;
    }
    .gw-pax-left {
      display: flex; align-items: center; gap: 5px; flex: 1;
    }
    .gw-pax-label { font-size: 10px; color: #687894; }
    .gw-pax-icon svg { width: 14px; height: 14px; opacity: 0.65; color: #8888aa; fill: none; stroke: currentColor; }
    .gw-pax-num { font-size: 12px; color: #ffffff; font-weight: 600; }
    .gw-pax-max {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; color: #ffffff; font-weight: 600;
    }
    .gw-pax-max-icon {
      display: flex; align-items: center; justify-content: center;
      width: 14px; height: 14px;
    }
    .gw-pax-max-icon svg {
      width: 14px; height: 14px;
      color: #8888aa;
      fill: currentColor;
    }

    /* Timer row */
    .gw-timer {
      display: flex; align-items: flex-end; gap: 4px;
    }
    .gw-tcell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .gw-tnum {
      font-size: 21px; font-weight: 800; color: #ffffff; line-height: 1;
      background: #0f0f1e; border-radius: 6px;
      padding: 5px 8px; min-width: 40px; text-align: center;
      letter-spacing: 1px;
    }
    .gw-tlabel { font-size: 9px; color: #687894; text-transform: none; letter-spacing: 0.2px; }
    .gw-tsep { font-size: 18px; color: #2a2a4a; font-weight: 700; margin-bottom: 16px; }

    /* Active badge */
    .gw-active {
      display: flex; align-items: center; gap: 8px; margin-top: 2px;
    }
    .gw-active-bar {
      width: 48px; height: 3px; border-radius: 2px; flex-shrink: 0;
      background: linear-gradient(90deg, #eb4b4b, #ff4444);
    }
    .gw-active-text { font-size: 10px; color: #8888aa; }

    /* Right prize column */
    .gw-prize {
      display: flex; flex-direction: column; align-items: flex-end;
      flex-shrink: 0; width: 120px;
    }
    .gw-minmax {
      display: flex; gap: 8px; margin-bottom: 6px;
    }
    .gw-mm-item {
      display: flex; align-items: center; gap: 4px;
      font-size: 11px; color: #8888aa;
    }
    .gw-mm-item img {
      width: 11px; height: 11px; object-fit: contain; flex-shrink: 0;
    }

    /* Gun image area */
    .gw-gun-area {
      width: 120px; height: 100px;
      position: relative; border-radius: 8px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .gw-gun-bg {
      position: absolute; inset: 0;
      background-image: url('/static/site/img/bg_img_4.svg');
      background-size: cover; background-position: center;
      opacity: 0.85;
    }
    .gw-gun-bg.purple { background-image: url('/static/site/img/bg_img.svg'); }
    .gw-gun-bg.red { background-image: url('/static/site/img/bg_img_1.svg'); }
    .gw-gun-bg.blue { background-image: url('/static/site/img/bg_img_2.svg'); }
    .gw-gun-bg.yellow { background-image: url('/static/site/img/bg_img_3.svg'); }
    .gw-gun-bg.gray,
    .gw-gun-bg.green { background-image: url('/static/site/img/bg_img_4.svg'); }
    .gw-gun-img {
      position: relative; z-index: 1;
      width: 110px; height: 80px; object-fit: contain;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
    }

    /* Gun info below */
    .gw-gun-info { text-align: right; margin-top: 4px; }
    .gw-gun-name { font-size: 10px; color: #8888aa; }
    .gw-gun-sub { font-size: 11px; color: #ffffff; font-weight: 700; }
    .gw-gun-price {
      display: flex; align-items: center; gap: 4px; justify-content: flex-end;
      font-size: 12px; color: #4BB543; font-weight: 700; margin-top: 2px;
    }
    .gw-gun-price img {
      width: 12px; height: 12px; object-fit: contain; flex-shrink: 0;
    }

    /* Join button */
    .gw-btn-wrap { padding: 0 16px 14px; }
    .gw-join-btn {
      width: 100%; padding: 13px;
      background: linear-gradient(135deg, #FFD700, #FFA500);
      border: none; border-radius: 10px;
      color: #ffffff; font-weight: 800; font-size: 13px; letter-spacing: 0.5px;
      cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; text-transform: uppercase;
    }
    .gw-join-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,193,7,0.4); }
    .gw-card.unavailable .gw-active-bar {
      background: #4a4a6a;
    }
    .gw-card.unavailable .gw-active-text {
      color: #687894;
    }
    .gw-join-btn:disabled {
      cursor: not-allowed;
      color: #8888aa;
      background: #202036;
      box-shadow: none;
      transform: none;
    }
    .gw-join-btn:disabled:hover {
      box-shadow: none;
      transform: none;
    }
    .gw-status {
      margin-top: 8px;
      color: #8888aa;
      font-size: 12px;
      line-height: 1.4;
      text-align: center;
    }

    /* Participants section */
    .gw-plist { padding: 14px 16px 16px; border-top: 1px solid #1e1e38; }
    .gw-plist-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px; cursor: pointer; user-select: none;
    }
    .gw-plist-title { font-size: 13px; font-weight: 700; color: #ffffff; }
    .gw-plist-right { display: flex; align-items: center; gap: 8px; }
    .gw-plist-top { font-size: 11px; color: #687894; }
    .gw-plist-chevron {
      display: flex; align-items: center; transition: transform 0.25s;
    }
    .gw-plist-chevron svg { width: 14px; height: 14px; fill: #8888aa; }
    .gw-plist-chevron.open { transform: rotate(180deg); }

    .gw-plist-body { display: flex; flex-direction: column; gap: 11px; }
    .gw-prow { display: flex; align-items: center; gap: 8px; }
    .gw-prow.muted {
      justify-content: center;
      min-height: 30px;
    }
    .gw-prank { font-size: 12px; color: #4a4a6a; font-weight: 600; width: 12px; flex-shrink: 0; text-align: center; }
    .gw-pavatar {
      width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
      background: #1e1e35; border: 1px solid #2a2a44;
    }
    .gw-pavatar img { width: 100%; height: 100%; object-fit: cover; }
    .gw-pname { font-size: 12px; color: #cccccc; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .gw-pscore {
      display: flex; align-items: center; gap: 4px;
      font-size: 12px; color: #ffffff; font-weight: 600; flex-shrink: 0;
    }
    .gw-pscore img { width: 13px; height: 13px; object-fit: contain; }

/* =====================================================
       JOIN ANIMATION
    ===================================================== */
    @keyframes joinPulse {
      0%   { transform: scale(1); }
      30%  { transform: scale(0.96); }
      60%  { transform: scale(1.03); }
      100% { transform: scale(1); }
    }
    @keyframes joinGlow {
      0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
      40%  { box-shadow: 0 0 28px 10px rgba(255,215,0,0.30); }
      100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
    }
    @keyframes joinSpark {
      0%   { opacity: 1; transform: translate(0,0) scale(1); }
      100% { opacity: 0; transform: translate(var(--sx),var(--sy)) scale(0.2); }
    }
    @keyframes joinBtnSuccess {
      0%   { background: linear-gradient(135deg,#FFD700,#FFA500); }
      100% { background: linear-gradient(135deg,#22c55e,#16a34a); }
    }
    @keyframes checkAppear {
      0%   { opacity:0; transform:scale(0.4) rotate(-20deg); }
      60%  { opacity:1; transform:scale(1.15) rotate(3deg); }
      100% { opacity:1; transform:scale(1) rotate(0deg); }
    }
    @keyframes confettiFall {
      0%   { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); }
      100% { opacity:0; transform:translate(var(--cx),var(--cy)) rotate(var(--cr)) scale(0.4); }
    }

    .gw-join-btn.joining {
      animation: joinPulse 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .gw-join-btn.joined {
      animation: joinBtnSuccess 0.35s forwards;
    }
    .gw-card.joined {
      animation: joinGlow 0.9s ease forwards;
    }
    .join-spark {
      position: fixed; width: 7px; height: 7px; border-radius: 50%;
      pointer-events: none; z-index: 9999;
      animation: joinSpark 0.65s ease-out forwards;
    }
    .join-confetti {
      position: fixed; width: 8px; height: 8px; border-radius: 2px;
      pointer-events: none; z-index: 9999;
      animation: confettiFall 0.85s ease-out forwards;
    }
    .join-check {
      display: inline-flex; align-items: center; gap: 6px;
      animation: checkAppear 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .join-check svg {
      width: 17px; height: 17px; flex-shrink: 0;
    }
    .join-badge {
      position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
      background: rgba(34,197,94,0.18); border: 1px solid rgba(34,197,94,0.45);
      color: #22c55e; font-size: 11px; font-weight: 700;
      padding: 4px 14px; border-radius: 20px; white-space: nowrap;
      z-index: 10; letter-spacing: 0.3px;
      animation: checkAppear 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    .gw-btn-wrap { position: relative; }

    /* =====================================================
       RESPONSIVE
    ===================================================== */
    @media (max-width: 1024px) and (min-width: 768px) {
      .gw-title { font-size: 13px; }
      .gw-tnum { font-size: 17px; min-width: 33px; padding: 4px 5px; }
      .gw-gun-area { width: 100px; height: 85px; }
      .gw-gun-img { width: 95px; height: 68px; }
      .gw-prize { width: 100px; }
    }
    @media (max-width: 900px) {
      .giveaway-grid { grid-template-columns: 1fr; max-width: 520px; }
    }
    @media (max-width: 767px) {
      .giveaway-section { padding: 16px 12px 0; }
      .giveaway-grid { max-width: 100%; }
      .gw-tnum { font-size: 18px; min-width: 36px; }
    }