.raffle-wrap{max-width:1150px;margin:22px auto;padding:14px;font-family:system-ui}
.raffle-card{border:3px solid #000;border-radius:18px;padding:18px;text-align:center;background:#fff}
.raffle-title{font-size:44px;font-weight:950}
.raffle-sub{margin-top:6px;font-size:14px;opacity:.75}
.raffle-number{margin:14px auto 10px;font-size:110px;font-weight:1000;line-height:1;min-height:120px}

.raffle-msg{margin:12px auto 0;display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid}
.raffle-msg.ok{border-color:#0a0;background:#f4fff4}
.raffle-msg.err{border-color:#b00;background:#fff5f5}

.raffle-stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0 14px}
.raffle-stats .box{border:2px solid #000;border-radius:14px;padding:10px 14px;min-width:190px}
.raffle-stats .k{font-size:12px;opacity:.7}
.raffle-stats .v{font-size:22px;font-weight:900}

.raffle-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.raffle-btn{
  appearance:none !important;-webkit-appearance:none !important;
  border:2px solid #000 !important;background:#fff !important;color:#000 !important;
  border-radius:14px !important;font-weight:900 !important;line-height:1 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:10px !important;cursor:pointer !important;text-decoration:none !important;
  padding:16px 16px !important;
}
.raffle-btn.big{font-size:26px !important;padding:18px 34px !important}
.raffle-btn.tall{height:72px !important;padding:0 26px !important;font-size:20px !important}
.raffle-btn:disabled{opacity:.6 !important;cursor:not-allowed !important}

.raffle-grid{margin-top:12px;display:grid;grid-template-columns:1fr;gap:12px}
.raffle-panel{border:2px solid #000;border-radius:16px;padding:16px;background:#fff}
.panel-title{font-size:22px;font-weight:950}
.panel-note{font-size:13px;opacity:.75;margin-top:4px}
.panel-sub{font-weight:950;margin:14px 0 8px}
.settings-row{margin-top:10px;display:flex;gap:22px;flex-wrap:wrap;align-items:end}
.field .lbl{font-size:13px;opacity:.7;margin-bottom:8px}

.raffle-input{
    

  width:280px !important;height:72px !important;
  font-size:28px !important;font-weight:900 !important;
  text-align:center !important;
  border:2px solid #000 !important;border-radius:16px !important;
  padding:0 !important;background:#fff !important;color:#000 !important;
}

.raffle-textarea{
  width:100% !important;max-width:100% !important;
  font-size:14px !important;padding:12px !important;
  border:2px solid #000 !important;border-radius:14px !important;
}

.table-wrap{overflow:auto;margin-top:12px}
.raffle-table{width:100%;border-collapse:collapse}
.raffle-table th{border-bottom:2px solid #000;padding:10px;text-align:left}
.raffle-table td{border-bottom:1px solid #ddd;padding:10px}
.bold{font-weight:900}
.muted{opacity:.85}

/* Overlay */
#raffle-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:999999;
  align-items:center;justify-content:center;
}
#raffle-overlay.show{display:flex}
.overlay-card{
  background:#fff;border:3px solid #000;border-radius:22px;
  padding:26px 26px 22px;text-align:center;min-width:320px;max-width:90vw;
}
.overlay-title{font-size:18px;font-weight:900;margin-bottom:10px}
#raffle-slot{
  font-size:84px;font-weight:1000;letter-spacing:2px;line-height:1;
  border:2px solid #000;border-radius:18px;padding:18px 22px;display:inline-block;min-width:220px;
  animation: slotRoll .08s infinite alternate;
}
@keyframes slotRoll{0%{transform:translateY(0)}100%{transform:translateY(-6px)}}
.overlay-sub{margin-top:14px;font-size:14px;opacity:.75}
#raffle-bar{height:10px;margin:16px auto 0;border:2px solid #000;border-radius:999px;overflow:hidden;max-width:360px}
#raffle-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#00c853,#ffd600,#ff1744);transition:width 1.2s linear}
#raffle-sparkles{position:absolute;inset:0;pointer-events:none}
#raffle-sparkles .sp{
  position:absolute;width:10px;height:10px;border-radius:2px;top:50%;left:50%;
  transform:translate(-50%,-50%);opacity:.9;animation:fly 1.2s ease-out forwards;
}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ===== HARD FIX: Logos never exceed title height ===== */

.raffle-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;

  /* This is the key: fixed banner height */
  height:120px !important;
  min-height:120px !important;

  flex-wrap:nowrap !important;
  overflow:hidden !important;
}

.raffle-title-row > *{
  flex:0 0 auto !important;
}

.raffle-title{
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.1 !important;
}

.raffle-logo{
  /* Never exceed the banner */
  max-height:100% !important;
  height:100% !important;

  /* Keep proportions */
  width:auto !important;
  max-width:130px !important;

  object-fit:contain !important;
  display:block !important;
}

/* Fine tune the text so it fits nicely inside the banner */
.raffle-title{
  font-size:38px !important;
  font-weight:900 !important;
}

.raffle-subtitle{
  display:block !important;
  font-size:24px !important;
  font-weight:700 !important;
  margin-top:4px !important;
}

/* Mobile: smaller banner + logos */
@media (max-width: 700px){
  .raffle-title-row{
    height:90px !important;
    min-height:90px !important;
    gap:10px !important;
  }
  .raffle-logo{
    max-width:80px !important;
  }
  .raffle-title{ font-size:26px !important; }
  .raffle-subtitle{ font-size:18px !important; }
}
