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

  body{
    background-color: var(--green-dark);
    background-image:
      radial-gradient(circle at 18% 8%, rgba(217,164,65,0.07), transparent 42%),
      radial-gradient(circle at 82% 92%, rgba(217,164,65,0.06), transparent 46%);
    color: var(--paper);
    font-family:'DM Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- Header ---------- */
  .site-header{ padding: 44px 24px 30px; text-align:center; border-bottom: 1px solid rgba(247,239,219,0.12); }
  .site-header__stamp{
    display:inline-block; font-family:'Anton',sans-serif; font-size: clamp(2.1rem,6vw,3.2rem);
    letter-spacing:2px; color: var(--gold-light); padding:6px 22px;
    border:3px dashed var(--gold); border-radius:4px; transform: rotate(-3deg);
  }
  .site-header__tag{ margin:18px auto 0; max-width:480px; font-size:0.95rem; color: rgba(247,239,219,0.65); letter-spacing:0.3px; }

  /* ---------- Intro ---------- */
  .intro{ max-width:1200px; margin:0 auto; padding: 38px 24px 6px; }
  .intro__live{ display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono',monospace; font-size:0.78rem; color: var(--gold-light); text-transform:uppercase; letter-spacing:1px; }
  .intro__dot{ width:8px; height:8px; border-radius:50%; background: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.35; transform:scale(0.65);} }
  .intro__title{ font-family:'Anton',sans-serif; font-size: clamp(1.5rem,4vw,2.2rem); margin:14px 0 6px; letter-spacing:0.3px; }
  .intro__sub{ color: rgba(247,239,219,0.6); font-size:0.95rem; margin:0; max-width:560px; }

  /* ---------- Grid ---------- */
  .grid-section{ max-width:1200px; margin:0 auto; padding: 26px 24px 80px; }
  .raffle-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap:32px 28px; }

  .card{ background:transparent; border-radius:10px; display:flex; flex-direction:column; box-shadow: 0 14px 30px rgba(0,0,0,0.28); transition: transform .25s ease, box-shadow .25s ease; }
  .card:hover{ transform: translateY(-6px) rotate(-0.3deg); box-shadow: 0 22px 42px rgba(0,0,0,0.35); }

  .card__image{ position:relative; height:178px; border-radius:10px 10px 0 0; overflow:hidden; background: linear-gradient(135deg, var(--green-light), var(--green-dark)); display:flex; align-items:center; justify-content:center; }
  .card__icon{ width:68px; height:68px; color: var(--gold-light); }
  .card__badge{ position:absolute; top:10px; left:10px; background: var(--red); color: var(--paper); font-family:'Space Mono',monospace; font-size:0.66rem; padding:4px 9px; border-radius:3px; transform: rotate(-3deg); letter-spacing:0.4px; }

  .card__perforation{ position:relative; height:0; border-top: 2px dashed rgba(27,24,18,0.28); margin:0 16px; background: var(--paper); }
  .card__perforation::before, .card__perforation::after{ content:""; position:absolute; top:-8px; width:16px; height:16px; border-radius:50%; background: var(--green-dark); }
  .card__perforation::before{ left:-14px; }
  .card__perforation::after{ right:-14px; }

  .card__body{ background: var(--paper); border-radius:0 0 10px 10px; padding: 22px 20px 20px; display:flex; flex-direction:column; gap:14px; flex:1; }
  .card__title{ font-family:'Anton',sans-serif; font-size:1.25rem; color: var(--ink); letter-spacing:0.2px; line-height:1.18; margin:0; }

  .card__stats{ display:flex; justify-content:space-between; gap:10px; }
  .card__stat{ display:flex; flex-direction:column; gap:3px; }
  .card__stat-label{ font-size:0.66rem; text-transform:uppercase; letter-spacing:0.6px; color: var(--gray); }
  .card__stat-value{ font-family:'Space Mono',monospace; font-weight:700; font-size:1.02rem; color: var(--ink); }
  .card__stat-value--accent{ color: var(--red-dark); }

  .card__tiers{ display:flex; flex-wrap:wrap; gap:6px; }
  .card__tier-chip{ font-family:'Space Mono',monospace; font-size:0.66rem; color: var(--ink); background: var(--paper-deep); border:1px solid rgba(27,24,18,0.15); border-radius:999px; padding:3px 9px; }

  .card__progress-track{ height:6px; background: var(--paper-deep); border-radius:4px; overflow:hidden; }
  .card__progress-fill{ height:100%; background: linear-gradient(90deg, var(--gold), var(--red)); }

  .card__cta{ margin-top:auto; font-family:'Anton',sans-serif; letter-spacing:1px; font-size:0.92rem; background: #E3AB46; color: var(--ink); border:none; padding:12px; border-radius:5px; cursor:pointer; outline:2px dashed var(--gold); outline-offset:4px; transition: background .2s, transform .2s; }
  .card__cta:hover{ background: #c9922f; transform: translateY(-2px); }
  .card__cta:focus-visible{ outline-color: var(--paper-deep); }

  /* ---------- Footer ---------- */
  .site-footer{ text-align:center; padding:26px; font-size:0.8rem; color: rgba(247,239,219,0.4); border-top:1px solid rgba(247,239,219,0.1); }

  /* ---------- Modal ---------- */
  .modal-overlay{ position:fixed; inset:0; background: rgba(8,18,14,0.78); backdrop-filter: blur(3px); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; }
  .modal-overlay.is-open{ display:flex; }
  .modal{ background: var(--paper); width:100%; max-width:680px; max-height:88vh; overflow-y:auto; border-radius:14px; position:relative; box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
  .modal__close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background: var(--ink); color: var(--paper); font-size:1.3rem; line-height:1; cursor:pointer; z-index:2; }
  .modal__close:hover{ background: var(--green-dark); }

  .modal__header{ position:relative; height:200px; border-radius:14px 14px 0 0; overflow:hidden; background: linear-gradient(135deg, var(--green-light), var(--green-dark)); display:flex; align-items:center; justify-content:center; }
  .modal__icon{ width:90px; height:90px; color: var(--gold-light); }
  .modal__title-wrap{ position:absolute; bottom:0; left:0; right:0; padding:16px 22px; background: linear-gradient(180deg, transparent, rgba(8,30,24,0.88)); }
  .modal__title{ font-family:'Anton',sans-serif; color: var(--paper); font-size:1.5rem; margin:0; }

  .modal__body{ padding:24px; }
  .modal__description{ color: var(--ink); opacity:0.82; line-height:1.55; margin:0 0 18px; }

  .modal__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
  .modal__stat{ background: var(--paper-deep); border-radius:8px; padding:10px 12px; }

  .modal__numbers-title{ font-family:'Anton',sans-serif; font-size:0.98rem; color: var(--ink); margin:0 0 10px; }
  .modal__numbers-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin-bottom:14px; }
  .num-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:0.7rem; border-radius:4px; user-select:none; }
  .num-cell.is-sold{ background: rgba(27,24,18,0.12); color: rgba(27,24,18,0.35); text-decoration: line-through; cursor:not-allowed; }
  .num-cell.is-available{ background: var(--paper); border:1.5px solid var(--gold); color: var(--ink); cursor:pointer; transition: background .15s, transform .15s; }
  .num-cell.is-available:hover{ background: var(--gold-light); transform: scale(1.07); }
  .num-cell.is-selected{ background: var(--red) !important; border-color: var(--red); color: var(--paper); }
  .num-cell:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

  .modal__selection-summary{ font-family:'Space Mono',monospace; font-size:0.88rem; color: var(--ink); margin: 0 0 14px; }
  .modal__confirm{ width:100%; font-family:'Anton',sans-serif; letter-spacing:1px; background: var(--red); color: var(--paper); border:none; padding:14px; border-radius:6px; font-size:1rem; cursor:pointer; outline:2px dashed var(--gold); outline-offset:4px; }
  .modal__confirm:hover{ background: var(--red-dark); }
  .modal__confirm-msg{ margin-top:10px; font-size:0.85rem; color: var(--green-dark); font-weight:700; text-align:center; display:none; }
  .modal__confirm-msg.is-shown{ display:block; }

  @media (max-width:480px){
    .modal__stats{ grid-template-columns:repeat(1,1fr); }
    .modal__numbers-grid{ grid-template-columns:repeat(6,1fr); }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }


  .search-box{
  margin-top:24px;
  max-width:1200px;
  padding: 0px 26px;
  margin: 0 auto;  
}

.search-box input{
  width:100%;
  padding:14px 18px;
  border:none;
  border-radius:8px;
  background:rgba(247,239,219,.08);
  border:1px solid rgba(247,239,219,.15);
  color:var(--paper);
  font-size:1rem;
  outline:none;
  transition:.2s;
}

.search-box input::placeholder{
  color:rgba(247,239,219,.5);
}

.search-box input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(217,164,65,.18);
  background:rgba(247,239,219,.12);
}