/* Giveaways (/giveaways), Application Status and the website admin.
   Built on the DDoS Protection page style: three-step hero, dd-section, dd-layers. */

.gv-title { white-space: normal !important; }
.st-step.st-done { --c: #22c55e; }

/* running giveaways: wide rows (R-3) */
.rr { border-top: 1px solid var(--primary); margin-top: 10px; }
.rr-row { display: grid; grid-template-columns: 120px 1fr 190px 230px; align-items: center; gap: 30px; padding: 34px 10px; border-bottom: 1px solid rgba(148, 163, 184, .18); }
.rr-num { font-family: var(--font-fancy); font-size: 3.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--primary); }
.rr-row h3 { margin: 0 0 8px; color: #fff; font-size: 1.3rem; letter-spacing: 1px; text-transform: uppercase; }
.rr-row p { margin: 0; color: var(--text-dim); line-height: 1.7; text-transform: none; }
.rr-k { display: block; font-size: .62rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; }
.rr-v { display: block; color: #fff; font-size: 1.05rem; margin: 6px 0 0; }
.rr-k + .rr-v + .rr-k { margin-top: 12px; }
.rr-row .btn { justify-content: center; white-space: nowrap; }
.rr-empty { text-align: center; padding: 50px 20px; border-bottom: 1px solid rgba(148, 163, 184, .18); }
.rr-empty h3 { color: #fff; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; }
.rr-empty p { color: var(--text-dim); margin: 0 auto 24px; max-width: 560px; line-height: 1.8; text-transform: none; }

/* giveaway page: server boxes */
.gv-li { display: flex; align-items: center; gap: 24px; }
.gv-li > div { flex: 1; min-width: 0; }
.gv-li .btn { flex-shrink: 0; min-width: 150px; justify-content: center; }
.gv-state { flex-shrink: 0; font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.gv-state.ok { color: #22c55e; }
.gv-state.no { color: #f43f5e; }
.gv-who { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--text-dim); font-size: .8rem; margin-top: 10px; }
.gv-who button { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color .3s; }
.gv-who button:hover { color: #fff; }
.gv-meta { display: block; margin-top: 6px; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); }
.gv-note { margin: 0 0 24px; padding: 16px 20px; border: 1px solid rgba(148, 163, 184, .25); border-left: 3px solid var(--primary); color: #e2e8f0; line-height: 1.7; text-transform: none; }
.gv-note.err { border-left-color: #f43f5e; }
.gv-note.ok { border-left-color: #22c55e; }
.st-btns form { display: contents; }
.st-btns .btn i { margin-right: 10px; }
.btn.gv-entered { border-color: rgba(34, 197, 94, .5) !important; color: #22c55e !important; cursor: default; }

@media (max-width: 1000px) {
  .rr-row { grid-template-columns: 80px 1fr; gap: 18px 24px; padding: 28px 4px; }
  .rr-num { font-size: 2.6rem; }
  .rr-row > div:nth-of-type(2) { grid-column: 2; display: flex; gap: 30px; }
  .rr-k + .rr-v + .rr-k { margin-top: 0; }
  .rr-row .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
  .rr-row { grid-template-columns: 1fr; }
  .rr-row > div:nth-of-type(2), .rr-row .btn { grid-column: 1; }
  .rr-row .btn { width: 100%; }
  .gv-li { flex-direction: column; align-items: flex-start; gap: 14px; }
  .gv-li .btn { width: 100%; }
}


/* ---- Giveaway page: details (two cards, approved "B") ---- */
.gd-head { text-align: center; margin: 0 auto 46px; max-width: 760px; }
.gd-head h2 { font-family: var(--font-fancy); text-transform: uppercase; color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: 1px; margin: 0 0 12px; }
.gd-head h2 span { color: var(--primary); }
.gd-head p { color: var(--text-dim); line-height: 1.8; margin: 0; text-transform: none; }
.gd-flash { max-width: 760px; margin: -20px auto 30px; }
.gd-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.gd-card { border: 1px solid rgba(148, 163, 184, .22); padding: 34px; position: relative; min-width: 0; }
.gd-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 70px; height: 3px; background: var(--primary); }
.gd-card h3 { margin: 0 0 22px; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: .8rem; }
.gd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(148, 163, 184, .15); font-size: .9rem; }
.gd-row span { color: var(--text-dim); flex-shrink: 0; text-transform: uppercase; }
.gd-row b { color: #fff; font-weight: 600; text-align: right; text-transform: uppercase; overflow-wrap: anywhere; }
.gd-d { color: var(--text-dim); line-height: 1.8; margin: 22px 0 0; text-transform: none; font-size: .9rem; }
.gd-d + .gd-d { margin-top: 12px; }
.gd-sv { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(148, 163, 184, .15); }
.gd-sv:first-of-type { padding-top: 4px; }
.gd-n { font-family: var(--font-fancy); font-size: 2rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--primary); width: 46px; flex-shrink: 0; }
.gd-dc { width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid rgba(88, 101, 242, .55); color: #5865F2; font-size: 1.5rem; }
.gd-dc.gd-trophy { border-color: rgba(34, 197, 94, .5); color: #22c55e; font-size: 1.2rem; }
.gd-sv > div { flex: 1; min-width: 0; }
.gd-sv h4 { margin: 0 0 4px; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; overflow-wrap: anywhere; }
.gd-sv p { margin: 0; color: var(--text-dim); font-size: .82rem; line-height: 1.6; text-transform: none; }
.gd-sv .btn { min-width: 140px; justify-content: center; flex-shrink: 0; }
.gd-chip { flex-shrink: 0; min-width: 140px; text-align: center; font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; padding: 13px 12px; border: 1px solid rgba(34, 197, 94, .45); color: #22c55e; white-space: nowrap; }
.gd-chip i { margin-right: 6px; }
.gd-note { margin: 18px 0 0; color: var(--text-dim); font-size: .82rem; line-height: 1.7; text-transform: none; }
.gd-who { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, .15); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
.gd-who i { color: #5865F2; margin-right: 6px; }
.gd-who button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--primary); cursor: pointer; transition: color .2s, transform .2s; }
.gd-who button:hover { color: #fff; transform: translateY(-2px); }
@media (max-width: 900px) {
  .gd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gd-card { padding: 26px 20px; }
  .gd-sv { flex-wrap: wrap; gap: 14px; }
  .gd-n { display: none; }
  .gd-sv > div { flex: 1 1 calc(100% - 72px); }
  .gd-sv .btn, .gd-chip { width: 100%; min-width: 0; }
  .gd-row { flex-direction: column; gap: 4px; }
  .gd-row b { text-align: left; }
}

/* prizes in the "About The Prize" card */
.gd-prize { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(148, 163, 184, .15); }
.gd-prize:first-of-type { padding-top: 2px; }
.gd-prize > div { flex: 1; min-width: 0; }
.gd-prize h4 { margin: 0 0 4px; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; overflow-wrap: anywhere; }
.gd-prize p { margin: 0; color: var(--text-dim); font-size: .82rem; line-height: 1.6; text-transform: none; }
@media (max-width: 560px) { .gd-prize .gd-n { display: block; width: 38px; font-size: 1.6rem; } }

/* giveaway page: enter with a Discord username */
.gd-form { display: grid; gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(148, 163, 184, .15); }
.gd-form .btn { justify-self: start; min-width: 220px; justify-content: center; }
.gd-form .gd-note { margin: 0; }
.gd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gd-check span { text-transform: none; }
.gd-done { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 18px 20px; border: 1px solid rgba(34, 197, 94, .45); }
.gd-done > i { color: #22c55e; font-size: 1.4rem; }
.gd-done b { display: block; color: #fff; letter-spacing: 1px; text-transform: none; overflow-wrap: anywhere; }
.gd-done small { display: block; color: var(--text-dim); margin-top: 4px; line-height: 1.6; text-transform: none; }
#enter { scroll-margin-top: 120px; }
@media (max-width: 560px) { .gd-form .btn { width: 100%; min-width: 0; } }
.gd-sv + .gd-form { border-top: 0; padding-top: 2px; }