:root { --giveaway-red: #c0202a; }

::selection { background: var(--giveaway-red); color: #fff; }
:focus-visible { outline: 2px solid #ff4d5b; outline-offset: 3px; }
input, button { border-radius: 2px; }
input { caret-color: #ff4d5b; }

.giveaway-main { width: min(100% - 32px, 1120px); margin: 24px auto 64px; }
.giveaway-main .titlebar { min-height: 112px; padding: 24px; }
.giveaway-main .titlebar h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: .9; }
.preview-note { margin: 0; padding: 10px 40px; border: 1px solid var(--giveaway-red); border-top: 0; color: #fff; background: var(--giveaway-red); font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.giveaway-console { display: grid; grid-template-columns: 380px minmax(0, 1fr); border: 1px solid var(--line); border-top: 0; background: var(--surface); }
.giveaway-setup { padding: 24px; border-right: 1px solid var(--line); }
.giveaway-setup header, .draw-stage > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.giveaway-setup header { margin-bottom: 20px; }
.giveaway-setup h2, .draw-stage h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; text-transform: uppercase; }
.giveaway-setup > label, .setup-grid label, .form-status, .draw-clock span, .winner-stage small { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.giveaway-setup > label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; }
.giveaway-setup label small { color: var(--muted); font-weight: 400; }
.giveaway-setup > input, .setup-grid input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #3a3a3a; background: #050505; color: #fff; font: 500 15px "Barlow Semi Condensed", sans-serif; }
.giveaway-setup input:focus { border-color: var(--giveaway-red); outline: 0; }
.giveaway-setup input:disabled { opacity: .55; }
.setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.setup-grid label { display: grid; gap: 9px; color: #fff; }
.setup-grid small { color: var(--muted); }
.setup-actions { display: grid; margin-top: 20px; }
.setup-actions button, .winner-actions button { min-height: 46px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: #fff; cursor: pointer; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.setup-actions .start-button, .draw-button { border-color: var(--giveaway-red); background: var(--giveaway-red); }
.setup-actions button:hover:not(:disabled), .winner-actions button:hover:not(:disabled) { border-color: #fff; background: #fff; color: #050505; }
button:disabled { cursor: not-allowed; opacity: .42; }
.form-status { min-height: 16px; margin: 14px 0 0; color: #ff4d5b; }

.draw-stage { display: grid; grid-template-rows: auto auto minmax(180px, 1fr) auto auto; min-height: 430px; padding: 24px; }
.draw-stage > header { grid-row: 1; }
.draw-clock { grid-row: 2; }
.winner-stage { grid-row: 3; }
.winner-reply { grid-row: 4; }
.winner-actions { grid-row: 5; }
.draw-clock { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.draw-clock span { color: var(--muted); }
.draw-clock strong { font: 500 clamp(30px, 4vw, 50px) "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.winner-stage { display: grid; align-content: center; min-height: 180px; text-align: center; }
.draw-reel { position: relative; height: 180px; overflow: hidden; }
.draw-reel::after { position: absolute; top: 60px; right: 0; left: 0; height: 58px; border-block: 1px solid var(--giveaway-red); content: ""; pointer-events: none; }
.draw-reel-track { padding-block: 60px; will-change: transform; }
.draw-reel-name { height: 60px; overflow: hidden; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 60px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.winner-stage span, .winner-stage small { color: var(--muted); }
.winner-stage strong { overflow-wrap: anywhere; margin: 8px 0; font-size: clamp(2.7rem, 6vw, 4.5rem); font-weight: 600; line-height: .82; letter-spacing: -.035em; text-transform: uppercase; }
.winner-stage.has-winner strong { color: #fff; }
.winner-stage.is-drawing strong { color: #ff4d5b; filter: blur(1px); }
.winner-stage.has-winner { animation: winner-hit 520ms cubic-bezier(.16,1,.3,1); }
.winner-reply { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--giveaway-red); background: #0a0a0a; }
.winner-reply > span { color: #ff4d5b; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.winner-reply p { display: flex; gap: 10px; margin: 7px 0 0; font-size: 15px; }
.winner-reply p strong { flex: 0 0 auto; color: #fff; }
.winner-reply p span { min-width: 0; overflow-wrap: anywhere; color: #ddd; }
.winner-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.winner-actions button { height: 50px; min-height: 50px; }
.winner-actions .draw-button { border-color: var(--giveaway-red); background: var(--giveaway-red); }
.winner-reward { display: grid; grid-template-columns: 1fr 110px; height: 50px; }
.winner-reward input { min-width: 0; height: 50px; padding: 0 10px; border: 1px solid var(--line); background: #050505; color: #fff; font: 500 13px "IBM Plex Mono", monospace; }
.winner-reward button { height: 50px; border-color: var(--giveaway-red); color: #ff4d5b; }
.winner-actions .winner-reward button:hover:not(:disabled) { border-color: var(--giveaway-red); background: var(--giveaway-red); color: #fff; }
.entrant-board { border: 1px solid var(--line); border-top: 0; background: var(--surface); }
.entrant-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.entrant-actions strong { color: var(--muted); font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .06em; }
.entrant-actions input { width: min(260px, 38vw); height: 36px; margin-left: auto; padding: 0 11px; border: 1px solid var(--line); background: #050505; color: #fff; font: 500 13px "Barlow Semi Condensed", sans-serif; }
.entrant-actions input:focus { border-color: var(--giveaway-red); outline: 0; }
.entrant-actions button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.entrant-actions button:hover:not(:disabled) { border-color: var(--giveaway-red); color: #fff; }
.entrant-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.entrant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--line); }
.entrant-row:nth-child(odd) { border-right: 1px solid var(--line); }
.entrant-name { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.entrant-row .subscriber-badge { grid-column: 2; width: 24px; height: 24px; justify-self: center; }
.entrant-row .subscriber-badge svg { width: 17px; height: 17px; }
.entrant-remove { display: grid; grid-column: 3; width: 34px; height: 34px; padding: 0; place-items: center; justify-self: center; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.entrant-remove:hover { border-color: var(--giveaway-red); color: #fff; }
.entrant-remove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.entrant-row.is-new { animation: entrant-hit 520ms cubic-bezier(.16,1,.3,1); }
.empty-row { grid-column: 1 / -1; padding: 50px 40px; color: var(--muted); font: 10px "IBM Plex Mono", monospace; text-align: center; text-transform: uppercase; }

@keyframes winner-hit { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes entrant-hit { from { background: rgba(192,32,42,.32); transform: translateY(-5px); } to { background: transparent; transform: translateY(0); } }

@media (max-width: 940px) {
  .giveaway-console { grid-template-columns: 1fr; }
  .giveaway-setup { border-right: 0; border-bottom: 1px solid var(--line); }
  .draw-stage { min-height: 390px; }
}

@media (max-width: 640px) {
  .giveaway-main { width: 100%; margin-top: 16px; }
  .giveaway-main .titlebar { display: grid; gap: 24px; align-items: end; }
  .giveaway-main .titlebar a { justify-self: start; }
  .giveaway-console, .entrant-board { border-inline: 0; }
  .giveaway-setup, .draw-stage { padding: 22px 18px; }
  .giveaway-setup > label, .draw-stage > header { align-items: flex-start; flex-direction: column; }
  .setup-grid { grid-template-columns: 1fr; }
  .draw-clock { align-items: flex-start; flex-direction: column; gap: 16px; }
  .draw-clock strong { font-size: 30px; }
  .winner-stage { min-height: 150px; }
  .winner-stage strong { font-size: clamp(2.7rem, 14vw, 3.8rem); }
  .entrant-list { grid-template-columns: 1fr; }
  .entrant-actions { flex-wrap: wrap; gap: 8px; }
  .entrant-actions input { order: 3; width: 100%; margin-left: 0; }
  .entrant-row { padding-inline: 18px; border-right: 0 !important; }
  .preview-note { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) { .winner-stage.has-winner, .entrant-row.is-new { animation: none; } }