/* ============================================================================
   DropRadar design system v4.13, built to the approved maquette.
   One token block. !important appears only where a mobile breakpoint has to beat
   a more specific desktop rule, and in the reduced-motion block.
   ========================================================================= */

@font-face{font-family:"Poppins";src:url("/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("/fonts/poppins-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"InterDR";src:url("/fonts/inter-variable.woff2") format("woff2-variations");font-weight:400 700;font-display:swap}

:root{
  /* ground */
  --dr-bg:#09090C;
  --dr-bg-2:#0B0B10;
  --dr-surface:#111118;
  --dr-surface-2:#15151D;
  --dr-header:#08080B;

  /* structure */
  --dr-line:#1E1E28;
  --dr-line-2:#2A2A36;

  /* text */
  --dr-text:#F6F6F9;
  --dr-text-2:#C9C9D4;
  --dr-dim:#8B8B9C;
  --dr-dim-2:#5E5E6E;

  /* the accent */
  --dr-red:#FF2E4E;
  --dr-red-hot:#FF4D68;
  --dr-red-deep:#D11036;
  --dr-orange:#FF6B35;
  --dr-red-wash:rgba(255,46,78,.12);
  --dr-red-edge:rgba(255,46,78,.38);
  --dr-red-glow:rgba(255,46,78,.30);

  /* supporting, each with a job */
  --dr-gold:#E8B339;
  --dr-green:#22C55E;
  --dr-green-wash:rgba(34,197,94,.14);

  /* CS2 rarity, drives an item's glow */
  --dr-r-milspec:#4B69FF;
  --dr-r-restricted:#8847FF;
  --dr-r-classified:#D32CE6;
  --dr-r-covert:#EB4B4B;
  --dr-r-rare:#FFD700;
  --dr-r-unknown:#2A2A36;

  --dr-font:"InterDR","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --dr-display:"Poppins","InterDR","Inter",system-ui,sans-serif;
  --dr-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  --dr-r-sm:8px;
  --dr-r-md:10px;
  --dr-r-lg:14px;
  --dr-r-xl:18px;
  --dr-pill:999px;

  --dr-gutter:40px;
  --dr-max:1360px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--dr-bg);color:var(--dr-text);
  font-family:var(--dr-font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--dr-display);font-weight:700;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
::selection{background:var(--dr-red);color:#fff}
:focus-visible{outline:2px solid var(--dr-red);outline-offset:2px;border-radius:4px}

.dr-wrap{max-width:var(--dr-max);margin:0 auto;padding:0 var(--dr-gutter)}
.dr-mono{font-family:var(--dr-mono);font-variant-numeric:tabular-nums}
.dr-hot{color:var(--dr-red)}

/* ---- Buttons -------------------------------------------------------------- */
.dr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;font-size:14px;font-weight:600;line-height:1.2;
  border:1px solid var(--dr-line-2);border-radius:var(--dr-r-md);
  background:var(--dr-surface);color:var(--dr-text);cursor:pointer;white-space:nowrap;
  transition:background-color .14s,border-color .14s,color .14s,transform .14s;
}
.dr-btn:hover{background:var(--dr-surface-2);border-color:#38384a}
.dr-btn:active{transform:translateY(1px)}
.dr-btn--red{background:var(--dr-red);border-color:var(--dr-red);color:#fff}
.dr-btn--red:hover{background:var(--dr-red-hot);border-color:var(--dr-red-hot)}
.dr-btn--red:active{background:var(--dr-red-deep);border-color:var(--dr-red-deep)}
.dr-btn--ghost{background:transparent}
.dr-btn--outline{background:transparent;border-color:var(--dr-red-edge);color:var(--dr-text)}
.dr-btn--outline:hover{background:var(--dr-red-wash);border-color:var(--dr-red)}
.dr-btn--sm{padding:8px 14px;font-size:13px}
.dr-btn--lg{padding:14px 26px;font-size:15px}
.dr-btn--full{width:100%}
.dr-btn[disabled]{opacity:.45;cursor:not-allowed}
.dr-btn svg{width:16px;height:16px;flex:none}

/* ---- Header --------------------------------------------------------------- */
.dr-head{
  position:sticky;top:0;z-index:60;background:var(--dr-header);
  border-bottom:1px solid var(--dr-line);
}
.dr-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--dr-red-edge) 22%,var(--dr-red) 50%,var(--dr-red-edge) 78%,transparent);
  opacity:.75;pointer-events:none;
}
.dr-head__in{
  max-width:var(--dr-max);margin:0 auto;padding:0 var(--dr-gutter);
  height:68px;display:flex;align-items:center;gap:22px;
}
.dr-logo{display:inline-flex;align-items:center;gap:10px;flex:none}
.dr-burger{
  display:none;width:38px;height:38px;place-items:center;flex:none;
  background:transparent;border:1px solid var(--dr-line-2);border-radius:var(--dr-r-sm);
  color:var(--dr-text-2);cursor:pointer;padding:0;
}
.dr-burger svg{width:19px;height:19px}
.dr-burger:hover{color:var(--dr-text);background:var(--dr-surface)}
.dr-logo__mark{width:28px;height:28px;flex:none;color:var(--dr-red)}
.dr-logo__text{font-family:var(--dr-display);font-weight:700;font-size:21px;letter-spacing:-.025em}
.dr-logo__text i{font-style:normal;color:var(--dr-red)}
/* The "o" of Drop is a radar scope. It is sized from the font so it keeps matching
   the letters either side at every logo size, and sits on the x-height. */
.dr-logo__o{
  width:.72em;height:.72em;display:inline-block;vertical-align:-.04em;
  margin:0 .02em;color:var(--dr-red);
}
.dr-steam-logo{width:19px;height:19px;flex:none}

.dr-nav{display:flex;align-items:center;gap:4px;flex:none}
.dr-nav > a,.dr-nav__trigger{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px;font-size:14.5px;font-weight:500;color:var(--dr-dim);
  background:none;border:0;border-radius:var(--dr-r-sm);cursor:pointer;
}
.dr-nav > a:hover,.dr-nav__trigger:hover{color:var(--dr-text)}
.dr-nav > a.is-active,.dr-nav__item.is-active .dr-nav__trigger{color:var(--dr-text)}
.dr-nav > a.is-active::after,.dr-nav__item.is-active .dr-nav__trigger::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--dr-red);border-radius:2px;
}
.dr-nav__chev{width:13px;height:13px;transition:transform .15s}
.dr-nav__item{position:relative}
.dr-nav__item.is-open .dr-nav__chev{transform:rotate(180deg)}
.dr-nav__menu{
  display:none;position:absolute;left:0;top:calc(100% + 10px);min-width:218px;z-index:70;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);
  padding:7px;box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.dr-nav__item.is-open .dr-nav__menu{display:block}
.dr-nav__menu a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--dr-r-sm);
  font-size:14px;color:var(--dr-text-2);
}
.dr-nav__menu a:hover{background:var(--dr-surface-2);color:var(--dr-text)}
.dr-nav__menu a.is-active{background:var(--dr-red-wash);color:var(--dr-red)}
.dr-nav__menu svg{width:16px;height:16px;flex:none;opacity:.85}

/* Search, maquette variante 4: pilule en contour rouge avec halo, loupe et
   placeholder rouges, bouton d'envoi plein collé au bord droit. */
.dr-search{
  position:relative;flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:11px;
  height:44px;padding:0 0 0 17px;background:var(--dr-bg-2);
  border:1px solid var(--dr-red);border-radius:var(--dr-pill);
  box-shadow:0 0 0 1px rgba(255,46,78,.12),0 0 18px rgba(255,46,78,.18);
  transition:box-shadow .18s,border-color .18s;
}
.dr-search:hover{box-shadow:0 0 0 1px rgba(255,46,78,.18),0 0 24px rgba(255,46,78,.26)}
.dr-search:focus-within{
  border-color:var(--dr-red-hot);
  box-shadow:0 0 0 1px rgba(255,46,78,.28),0 0 30px rgba(255,46,78,.34);
}
.dr-search > svg{width:18px;height:18px;flex:none;color:var(--dr-red);transition:transform .18s}
.dr-search:focus-within > svg{transform:scale(1.08)}
.dr-search input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--dr-text);font:inherit;font-size:14px;
}
.dr-search input::placeholder{color:var(--dr-red);opacity:.72}
.dr-search__go{
  flex:none;width:52px;align-self:stretch;margin:3px 3px 3px 10px;
  display:grid;place-items:center;border:0;cursor:pointer;padding:0;
  background:var(--dr-red);color:#fff;border-radius:var(--dr-pill);
  transition:background .18s;
}
.dr-search__go:hover{background:var(--dr-red-hot)}
.dr-search__go svg{width:19px;height:19px;transition:transform .18s}
.dr-search__go:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .dr-search__go:hover svg,.dr-search:focus-within > svg{transform:none}
}

.dr-head__right{display:flex;align-items:center;gap:14px;flex:none}
.dr-head__sep{width:1px;height:26px;background:var(--dr-line-2)}
.dr-lang{position:relative}
.dr-lang__btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-size:13.5px;
  color:var(--dr-text-2);background:var(--dr-surface);border:1px solid var(--dr-line-2);
  border-radius:var(--dr-r-md);cursor:pointer;
}
.dr-lang__btn img{width:19px;height:13px;object-fit:cover;border-radius:2px}
.dr-lang__btn svg{width:13px;height:13px;opacity:.7}
.dr-lang__menu{
  display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:182px;z-index:70;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);padding:6px;
}
.dr-lang.is-open .dr-lang__menu{display:block}
.dr-lang__menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--dr-r-sm);
  background:none;border:0;color:var(--dr-text-2);font-size:13.5px;cursor:pointer;text-align:left;
}
.dr-lang__menu button:hover{background:var(--dr-surface-2);color:var(--dr-text)}
.dr-lang__menu img{width:19px;height:13px;object-fit:cover;border-radius:2px}
.dr-lang__menu small{margin-left:auto;color:var(--dr-dim-2)}

.dr-login{
  display:inline-flex;align-items:center;gap:9px;padding:10px 20px;font-size:14px;font-weight:600;
  color:var(--dr-text);background:transparent;border:1px solid var(--dr-red-edge);
  border-radius:var(--dr-r-md);cursor:pointer;
}
.dr-login:hover{background:var(--dr-red-wash);border-color:var(--dr-red)}
.dr-login svg{width:17px;height:17px;color:var(--dr-red)}

/* account menu replaces the login button once signed in */
.dr-acct{position:relative;flex:none}
.dr-acct__btn{
  display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-pill);
  cursor:pointer;color:var(--dr-text);font:inherit;
}
.dr-acct__btn:hover{border-color:#38384a;background:var(--dr-surface-2)}
.dr-acct.is-open .dr-acct__btn{border-color:var(--dr-red);background:var(--dr-red-wash)}
.dr-avatar{
  width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--dr-surface-2);color:var(--dr-dim);font-size:12px;font-weight:700;
}
.dr-avatar img{width:100%;height:100%;object-fit:cover}
.dr-avatar--lg{width:42px;height:42px;font-size:17px}
/* The name is shown in full. It used to be clipped to 120px, which turned a
   perfectly short pseudonym into "Di…". */
.dr-acct__name{font-size:13.5px;font-weight:600;white-space:nowrap}

.dr-acct__menu{
  display:none;position:absolute;right:0;top:calc(100% + 10px);width:300px;z-index:70;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);
  padding:8px;box-shadow:0 26px 58px rgba(0,0,0,.7);
}
.dr-acct.is-open .dr-acct__menu{display:block}

.dr-acct__head{display:flex;gap:12px;align-items:center;padding:10px 10px 12px}
.dr-acct__who{flex:1;min-width:0}
.dr-acct__head strong{display:block;font-family:var(--dr-display);font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-acct__head small{display:block;font-size:12.5px;color:var(--dr-dim-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-acct__role{
  flex:none;padding:4px 9px;border-radius:var(--dr-pill);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  background:var(--dr-red);color:#fff;
}
.dr-acct__group{display:grid;gap:2px}
.dr-acct__menu a,.dr-acct__out button{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 10px;
  border-radius:var(--dr-r-sm);color:var(--dr-text-2);background:none;border:0;cursor:pointer;
  font:inherit;text-decoration:none;
}
.dr-acct__menu svg{width:17px;height:17px;flex:none;color:var(--dr-dim);transition:color .15s}
.dr-acct__menu b{display:block;font-size:13.5px;font-weight:600}
.dr-acct__menu small{display:block;font-size:11.5px;color:var(--dr-dim-2);margin-top:1px;line-height:1.35}
.dr-acct__menu a:hover,.dr-acct__out button:hover{background:var(--dr-surface-2);color:var(--dr-text)}
.dr-acct__menu a:hover svg{color:var(--dr-red)}
.dr-acct__out button:hover{color:var(--dr-red)}
.dr-acct__out button:hover svg{color:var(--dr-red)}
.dr-acct__sep{height:1px;background:var(--dr-line);margin:7px 4px}

/* ---- Hero ----------------------------------------------------------------- */
.dr-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--dr-line)}
.dr-hero__art{
  position:absolute;right:0;top:0;bottom:0;width:58%;pointer-events:none;
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);
  mask-image:linear-gradient(90deg,transparent,#000 34%);
}
/* The artwork is the prize that draws next, not stock art, so it is an <img>
   rather than a background and is never cropped. */
.dr-hero__art img{
  position:absolute;right:3%;top:50%;transform:translateY(-50%);
  width:84%;max-height:76%;object-fit:contain;
  filter:drop-shadow(0 26px 64px rgba(255,46,78,.30));
}
.dr-hero__glow{
  position:absolute;right:6%;top:50%;width:620px;height:620px;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(255,46,78,.22) 0%,rgba(255,46,78,0) 62%);pointer-events:none;
}
.dr-hero__in{position:relative;max-width:var(--dr-max);margin:0 auto;padding:78px var(--dr-gutter) 62px}
.dr-hero__copy{max-width:620px}
.dr-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.04;letter-spacing:-.035em}
.dr-hero h1 .dr-grad{display:block;color:var(--dr-red)}
.dr-hero__lede{margin-top:20px;font-size:17px;color:var(--dr-dim);max-width:52ch;line-height:1.6}
.dr-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* The stat row is wider than the headline column it sits in, so it keeps all four
   on one line instead of wrapping into a block under the copy. */
.dr-stats{display:flex;align-items:center;gap:0;margin-top:40px;flex-wrap:wrap;max-width:780px}
.dr-stat{display:flex;align-items:center;gap:13px;padding-right:26px;margin-right:26px;border-right:1px solid var(--dr-line-2)}
.dr-stat:last-child{border-right:0;margin-right:0;padding-right:0}
/* The icon is a plain red glyph, as on the reference. The tinted square behind it
   read as a muddy maroon box against the dark page and added nothing. */
.dr-stat__ic{
  flex:none;display:grid;place-items:center;
  width:24px;height:24px;color:var(--dr-red);background:none;
}
.dr-stat__ic svg{width:22px;height:22px}
.dr-stat b{display:block;font-family:var(--dr-display);font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
/* Scoped to the label, which sits inside the inner <div>. Unscoped it also matched
   .dr-stat__ic and painted the icon grey. */
.dr-stat div span{display:block;font-size:13px;color:var(--dr-dim);margin-top:1px}

/* ---- Section heads -------------------------------------------------------- */
.dr-sec{max-width:var(--dr-max);margin:0 auto;padding:46px var(--dr-gutter) 0}
.dr-sec__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.dr-sec__title{display:flex;align-items:center;gap:13px}
.dr-sec__title svg{width:28px;height:28px;flex:none}
.dr-sec__title h2{font-size:clamp(23px,2.6vw,29px)}
.dr-sec__sub{font-size:14px;color:var(--dr-dim);margin-top:5px;padding-left:41px}
.dr-sec__sub--flush{padding-left:0}
.dr-crown{color:var(--dr-gold)}

/* ---- Giveaway card -------------------------------------------------------- */
.dr-cards{display:grid;gap:22px}
.dr-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dr-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dr-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* the glow frame: 2px gradient edge plus a soft bloom behind it */
.dr-card{position:relative;border-radius:var(--dr-r-xl);padding:2px;background:var(--dr-line-2)}
.dr-card::before{
  content:"";position:absolute;inset:-7px;border-radius:calc(var(--dr-r-xl) + 7px);
  background:inherit;filter:blur(17px);opacity:0;transition:opacity .2s;z-index:0;
}
.dr-card:hover::before{opacity:.5}
/* The sponsored frame turns. --dr-spin is registered as an angle so it can be
   animated; where @property is unsupported the conic gradient still paints, it
   simply holds still, which is the old look rather than a broken one. */
@property --dr-spin{syntax:'<angle>';initial-value:0deg;inherits:false}
.dr-card--glow{
  --dr-spin:0deg;
  background:conic-gradient(from var(--dr-spin),
    #22D3EE 0deg,#A855F7 90deg,#EC4899 180deg,#FF6B35 250deg,#22D3EE 360deg);
  animation:dr-spin 7s linear infinite;
}
.dr-card--glow::before{opacity:.42;animation:dr-spin 7s linear infinite}
.dr-card--glow:hover::before{opacity:.78}
@keyframes dr-spin{to{--dr-spin:360deg}}
@media (prefers-reduced-motion:reduce){
  .dr-card--glow,.dr-card--glow::before{animation:none}
}
/* Rarity frames are information, not decoration: the dark layer keeps them a tint
   so a Covert listing is never mistaken for a paid placement. */
.dr-card--rarity{background:
  linear-gradient(118deg,rgba(9,9,12,.52),rgba(9,9,12,.70) 60%,rgba(9,9,12,.52)),
  linear-gradient(118deg,var(--dr-rarity,#2A2A36),rgba(255,255,255,.04) 60%,var(--dr-rarity,#2A2A36))}
.dr-card--rarity:hover{background:
  linear-gradient(118deg,rgba(9,9,12,.30),rgba(9,9,12,.52) 60%,rgba(9,9,12,.30)),
  linear-gradient(118deg,var(--dr-rarity,#2A2A36),rgba(255,255,255,.04) 60%,var(--dr-rarity,#2A2A36))}
.dr-card__in{
  position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  background:var(--dr-surface);border-radius:calc(var(--dr-r-xl) - 2px);overflow:hidden;
}
.dr-card__body{display:flex;gap:18px;padding:18px}
.dr-card__media{
  position:relative;flex:none;width:190px;border-radius:var(--dr-r-lg);overflow:hidden;
  background:radial-gradient(ellipse at 50% 58%,#1A1620 0%,#0B0B10 72%);
  display:grid;place-items:center;min-height:148px;
}
.dr-card__media img{width:100%;height:100%;object-fit:contain;padding:14px}
/* A <button> is fit-content even when told to be a grid, and it collapsed the artwork
   to zero width. Explicit block + width keeps the clickable media the size of the slot. */
button.dr-card__media{display:block;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left;padding:0}
/* width stays with the variant: 190px in the horizontal card, full width in the vertical one.
   Setting it on the element selector here overrode both. */
.dr-card--v button.dr-card__media{width:100%}
.dr-card__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#2B2B38;font-size:11.5px}
.dr-card__ph svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6}
.dr-badge{
  position:absolute;top:11px;left:11px;z-index:2;padding:5px 11px;border-radius:var(--dr-pill);
  background:var(--dr-red);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.07em;
}
.dr-badge--hosted{background:#2563EB}
.dr-badge--external{background:var(--dr-surface-2);color:var(--dr-text-2);border:1px solid var(--dr-line-2)}
.dr-card__main{flex:1;min-width:0;display:flex;flex-direction:column}
.dr-card__title{font-family:var(--dr-display);font-size:18px;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.dr-card__title em{font-style:normal;display:block;color:var(--dr-text-2);font-weight:500}
.dr-card__host{font-size:13.5px;color:var(--dr-dim);margin-top:6px}
.dr-card__chips{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}
.dr-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--dr-pill);
  font-size:13px;font-weight:600;background:var(--dr-surface-2);color:var(--dr-text-2);
}
.dr-chip svg{width:13px;height:13px}
.dr-chip--value{background:var(--dr-green-wash);color:var(--dr-green)}
.dr-chip--muted{background:transparent;color:var(--dr-dim);padding-left:0;font-weight:500}

/* countdown: four fixed-width groups so digits never jump */
.dr-count{
  display:flex;align-items:center;gap:0;margin-top:14px;padding:11px 6px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:var(--dr-r-md);
}
.dr-count__u{flex:1;text-align:center;min-width:0}
.dr-count__u b{
  display:block;font-family:var(--dr-display);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.dr-count__u span{display:block;font-size:9.5px;color:var(--dr-dim-2);letter-spacing:.09em;margin-top:3px}
.dr-count__sep{color:var(--dr-dim-2);font-size:17px;font-weight:700;padding-bottom:13px}
.dr-count.is-urgent b{color:var(--dr-red)}
.dr-count.is-ended{justify-content:center;color:var(--dr-dim)}
.dr-card__act{padding:0 18px 18px;margin-top:auto}

/* Vertical card (maquette): the artwork bleeds to the frame, no inner box.
   The image still uses contain so a skin render is never clipped. */
.dr-card--v .dr-card__body{flex-direction:column;gap:0;padding:0}
.dr-card--v .dr-card__media{
  width:auto;min-height:0;aspect-ratio:16/10;border-radius:0;
  background:radial-gradient(ellipse at 50% 56%,#1D1726 0%,#0A0A0F 76%);
}
.dr-card--v .dr-card__media img{padding:10px 14px}
.dr-card--v .dr-card__main{padding:15px 16px 0}
.dr-card--v .dr-card__title{font-size:16.5px}
.dr-card--v .dr-card__act{padding:14px 16px 16px}

/* Second badge, top right: the Counter-Strike rarity of the first prize. */
.dr-badge--rarity{
  left:auto;right:11px;background:var(--dr-rarity-wash,rgba(42,42,54,.82));
  color:var(--dr-rarity,#C9C9D4);border:1px solid var(--dr-rarity,#2A2A36);
  backdrop-filter:blur(6px);
}
.dr-badge--sponsored{background:linear-gradient(96deg,var(--dr-red),#FF3D7F)}
/* The horizontal card's media is only 190px wide, so a second badge pinned to its
   right edge lands on top of the first. The maquette's homepage cards carry the
   status badge alone, so the rarity one is dropped there. */
.dr-card:not(.dr-card--v) .dr-badge--rarity{display:none}

/* Meta line: value on the left, counters trailing, last one pushed to the edge. */
.dr-meta{display:flex;align-items:center;gap:14px;margin-top:11px;font-size:13px;font-weight:600}
.dr-meta svg{width:14px;height:14px;flex:none}
.dr-meta__v{display:inline-flex;align-items:center;gap:6px;color:var(--dr-red)}
.dr-meta__n{display:inline-flex;align-items:center;gap:6px;color:var(--dr-dim)}
.dr-meta__n--end{margin-left:auto}

/* ---- Page search field ----------------------------------------------------- */
.dr-find{
  display:flex;align-items:center;gap:9px;flex:0 1 330px;min-width:220px;padding:9px 16px;
  border-radius:var(--dr-pill);background:var(--dr-surface);border:1px solid var(--dr-line-2);
}
.dr-find svg{width:15px;height:15px;color:var(--dr-dim-2);flex:none}
.dr-find input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--dr-text);
  font:inherit;font-size:13.5px;outline:none;
}
.dr-find input::placeholder{color:var(--dr-dim-2)}
.dr-find:focus-within{border-color:#3A3A4C}

/* ---- Promo code card ------------------------------------------------------- */
.dr-promo{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-xl);
  padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
}
.dr-promo__logo{
  width:46px;height:46px;border-radius:var(--dr-r-md);display:grid;place-items:center;
  background:var(--dr-surface-2);font-family:var(--dr-display);font-weight:700;font-size:19px;
  color:var(--dr-red);overflow:hidden;margin-bottom:10px;
}
.dr-promo__logo img{width:100%;height:100%;object-fit:contain}
.dr-promo__host{font-family:var(--dr-display);font-size:17px;font-weight:600}
.dr-promo__off{font-family:var(--dr-display);font-size:27px;font-weight:700;color:var(--dr-red);margin-top:10px;letter-spacing:-.02em}
.dr-promo__code{font-size:13px;color:var(--dr-dim);margin-top:5px}
.dr-promo__code b{color:var(--dr-text-2);font-family:var(--dr-mono);letter-spacing:.04em}
.dr-promo__desc{font-size:13px;color:var(--dr-dim);margin-top:11px;line-height:1.55}
.dr-promo .dr-btn{margin-top:16px;width:100%}
.dr-promo .dr-btn.revealed{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.dr-promo__seen{font-size:11.5px;color:var(--dr-dim-2);margin-top:9px}
.dr-promo .promo-copy-note{font-size:11.5px;color:var(--dr-green);margin-top:5px;min-height:15px}
.dr-promo .dr-btn--sm{margin-top:8px}

/* ---- FAQ ------------------------------------------------------------------- */
.dr-faq{display:grid;gap:12px;max-width:860px}
.dr-faq details{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);
}
.dr-faq summary{
  cursor:pointer;list-style:none;padding:17px 20px;font-family:var(--dr-display);
  font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.dr-faq summary::-webkit-details-marker{display:none}
.dr-faq summary::after{content:"+";color:var(--dr-red);font-size:20px;font-weight:600;line-height:1}
.dr-faq details[open] summary::after{content:"\2212"}
.dr-faq details[open] summary{border-bottom:1px solid var(--dr-line)}
.dr-faq p{padding:15px 20px 19px;font-size:14.5px;color:var(--dr-dim);line-height:1.68}
.dr-faq p + p{padding-top:0}

/* ---- Finished listing ------------------------------------------------------ */
/* Deliberately flat: an ended giveaway must not look like one you can still enter. */
.dr-done{
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:var(--dr-r-lg);
  padding:16px 18px;border-left:3px solid var(--dr-rarity,var(--dr-line-2));
}
.dr-done h3{font-family:var(--dr-display);font-size:14.5px;font-weight:600;color:var(--dr-dim);overflow-wrap:anywhere}
.dr-done p{font-size:12.5px;color:var(--dr-dim-2);margin-top:6px}

/* ---- Creator tiles --------------------------------------------------------- */
.dr-creator{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-xl);
  padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.dr-creator .dr-avatar{width:62px;height:62px;font-size:22px}
.dr-creator__name{font-family:var(--dr-display);font-size:16.5px;font-weight:600;margin-top:13px}
.dr-creator__meta{font-size:13px;color:var(--dr-dim);margin-top:5px}
.dr-creator .dr-btn{margin-top:16px;width:100%}

/* ---- Filter pills --------------------------------------------------------- */
.dr-pills{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.dr-pill{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--dr-pill);
  font-size:13.5px;font-weight:500;color:var(--dr-dim);background:var(--dr-surface);
  border:1px solid var(--dr-line-2);cursor:pointer;
}
.dr-pill:hover{color:var(--dr-text);border-color:#38384a}
.dr-pill.is-active{background:var(--dr-red);border-color:var(--dr-red);color:#fff}
/* The sort group is a second axis, not a second primary choice: one red pill per row. */
.dr-pill--sort.is-active{background:var(--dr-surface-2);border-color:#3A3A4C;color:var(--dr-text)}
/* Filter dropdowns. Built on <details> so they open and close with no JavaScript;
   the script only adds closing them by clicking elsewhere. */
.dr-drop{position:relative}
.dr-drop > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px 8px 15px;border-radius:var(--dr-pill);font-size:13.5px;font-weight:500;
  color:var(--dr-text-2);background:var(--dr-surface);border:1px solid var(--dr-line-2);
}
.dr-drop > summary::-webkit-details-marker{display:none}
.dr-drop > summary:hover{color:var(--dr-text);border-color:#38384a}
.dr-drop > summary svg{width:14px;height:14px;opacity:.7;transition:transform .16s}
.dr-drop[open] > summary svg{transform:rotate(180deg)}
.dr-drop--on > summary{background:var(--dr-red);border-color:var(--dr-red);color:#fff}
.dr-drop--on > summary svg{opacity:1}
.dr-drop__menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:50;min-width:196px;padding:6px;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-md);
  box-shadow:0 20px 44px rgba(0,0,0,.6);
}
.dr-drop__menu a{
  display:block;padding:9px 12px;border-radius:var(--dr-r-sm);
  font-size:13.5px;color:var(--dr-dim);white-space:nowrap;
}
.dr-drop__menu a:hover{background:var(--dr-surface-2);color:var(--dr-text)}
.dr-drop__menu a.is-active{color:var(--dr-red);font-weight:600}

.dr-pills__sep{width:1px;height:20px;background:var(--dr-line-2);margin:0 5px;flex:none}

/* ---- Page shell ----------------------------------------------------------- */
.dr-page{max-width:var(--dr-max);margin:0 auto;padding:44px var(--dr-gutter) 72px}
.dr-page__head{margin-bottom:28px}
.dr-page__head h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em}
.dr-page__head p{font-size:15px;color:var(--dr-dim);margin-top:10px;max-width:70ch}
.dr-page__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.dr-notice{
  border:1px solid var(--dr-line-2);border-left:3px solid var(--dr-red);border-radius:var(--dr-r-md);
  padding:15px 18px;font-size:14px;color:var(--dr-dim);margin-bottom:24px;background:var(--dr-surface);
}
.dr-notice strong{color:var(--dr-text)}
.dr-empty{
  border:1px dashed var(--dr-line-2);border-radius:var(--dr-r-lg);padding:54px 24px;text-align:center;
}
.dr-empty h3{font-size:19px}
.dr-empty p{font-size:14px;color:var(--dr-dim);margin-top:8px}
.dr-empty .dr-btn{margin-top:20px}

/* ---- Footer --------------------------------------------------------------- */
.dr-foot{border-top:1px solid var(--dr-line);background:var(--dr-header);margin-top:60px}
.dr-foot__in{
  max-width:var(--dr-max);margin:0 auto;padding:30px var(--dr-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.dr-foot__brand small{display:block;font-size:12.5px;color:var(--dr-dim-2);margin-top:5px}
.dr-foot__nav{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;flex:1}
.dr-foot__nav a{position:relative;font-size:14px;color:var(--dr-dim)}
.dr-foot__nav a:hover{color:var(--dr-text)}
.dr-foot__nav a.is-active{color:var(--dr-text)}
.dr-foot__nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--dr-red);border-radius:2px}
.dr-foot__right{display:flex;align-items:center;gap:16px}
.dr-social{display:flex;gap:10px}
.dr-social a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--dr-r-sm);
  color:var(--dr-dim);border:1px solid transparent;
}
.dr-social a:hover{color:var(--dr-text);border-color:var(--dr-line-2);background:var(--dr-surface)}
.dr-social svg{width:17px;height:17px}
.dr-foot__legal{
  border-top:1px solid var(--dr-line);
}
.dr-foot__legal div{
  max-width:var(--dr-max);margin:0 auto;padding:16px var(--dr-gutter);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--dr-dim-2);
}
.dr-foot__legal b{color:var(--dr-text-2);font-weight:600}
.dr-foot__legal a{color:var(--dr-red)}

/* ---- Motion --------------------------------------------------------------- */
@keyframes dr-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.dr-live-dot{width:7px;height:7px;border-radius:50%;background:var(--dr-red);display:inline-block;animation:dr-pulse 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:1420px){
  .dr-search{display:none}
  .dr-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .dr-cards--2,.dr-cards--3{grid-template-columns:1fr}
  .dr-hero__art{width:100%;opacity:.2}
  .dr-hero__in{padding-top:52px;padding-bottom:44px}
}
@media (max-width:820px){
  :root{--dr-gutter:18px}
  .dr-burger{display:grid}
  /* The nav becomes a panel under the bar instead of disappearing. */
  .dr-nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--dr-gutter) 14px;
    background:var(--dr-header);border-bottom:1px solid var(--dr-line);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
  }
  .dr-head.is-menu .dr-nav{display:flex}
  .dr-nav > a,.dr-nav__trigger{padding:13px 2px;font-size:16px;width:100%;text-align:left}
  .dr-nav__item{width:100%}
  .dr-nav__menu{
    position:static;display:none;box-shadow:none;border:0;background:transparent;
    padding:0 0 6px 14px;min-width:0;opacity:1;transform:none;
  }
  .dr-nav__item.is-open .dr-nav__menu{display:block}
  /* The desktop underline would run the whole panel width here, so the open item is
     marked by colour instead. */
  .dr-nav > a.is-active::after,.dr-nav__item.is-active::after{display:none}
  .dr-nav > a.is-active,.dr-nav__item.is-active > .dr-nav__trigger{color:var(--dr-red)}
  .dr-head__sep,.dr-lang{display:none}
  .dr-head__in{height:60px;gap:12px}
  .dr-logo__text{font-size:19px}
  .dr-login{padding:9px 14px}
  .dr-hero h1{font-size:clamp(32px,8vw,42px)}
  .dr-stats{gap:18px 0;margin-top:30px}
  .dr-stat{width:50%;padding-right:0;margin-right:0;border-right:0}
  .dr-card__body{flex-direction:column;gap:14px}
  .dr-card__media{width:100%;min-height:168px}
  .dr-foot__in{flex-direction:column;align-items:flex-start;gap:22px}
  .dr-foot__nav{justify-content:flex-start;gap:16px}
}

/* ---- Wizard steps, forms, type picker (Create page) ------------------------ */
.dr-page__title{display:flex;align-items:center;gap:15px;margin-bottom:26px}
.dr-page__title h1{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em}
.dr-page__icon{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--dr-red);color:#fff;box-shadow:0 0 26px rgba(255,46,78,.42);
}
.dr-page__icon svg{width:23px;height:23px}

.dr-steps{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:28px}
.dr-step{
  display:inline-flex;align-items:center;gap:10px;padding:11px 19px;border-radius:var(--dr-r-md);
  background:var(--dr-surface);border:1px solid var(--dr-line-2);
  font-size:14px;font-weight:500;color:var(--dr-dim);cursor:pointer;
}
.dr-step:hover{color:var(--dr-text);border-color:#38384a}
.dr-step__n{
  width:21px;height:21px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--dr-surface-2);color:var(--dr-dim);font-size:11.5px;font-weight:700;
}
.dr-step.is-active{background:var(--dr-red-wash);border-color:var(--dr-red);color:var(--dr-text)}
.dr-step.is-active .dr-step__n{background:var(--dr-red);color:#fff}

.dr-form{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);
  border-radius:var(--dr-r-xl);padding:26px;margin-bottom:22px;
}
.dr-form > h2{
  font-family:var(--dr-display);font-size:18px;font-weight:600;
  color:var(--dr-red);margin-bottom:20px;letter-spacing:-.01em;
}
.dr-form > p{font-size:14px;color:var(--dr-dim);margin:-14px 0 20px;line-height:1.6}
.dr-form label{display:block;margin-bottom:18px;font-size:13.5px;font-weight:600;color:var(--dr-text-2)}
.dr-form label > span.req{color:var(--dr-red);margin-left:3px}
.dr-form input[type=text],.dr-form input[type=url],.dr-form input[type=number],
.dr-form input[type=datetime-local],.dr-form input:not([type]),.dr-form select,.dr-form textarea{
  display:block;width:100%;margin-top:9px;padding:12px 15px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-md);
  color:var(--dr-text);font:inherit;font-size:14px;font-weight:400;outline:none;
}
.dr-form textarea{resize:vertical;min-height:108px;line-height:1.6}
.dr-form input:focus,.dr-form select:focus,.dr-form textarea:focus{border-color:var(--dr-red-edge)}
.dr-form input::placeholder,.dr-form textarea::placeholder{color:var(--dr-dim-2)}
.dr-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.dr-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--dr-text-2)}
.dr-check input{width:17px;height:17px;accent-color:var(--dr-red);margin:0}

.dr-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:10px}
.dr-type{
  display:block;padding:16px;border-radius:var(--dr-r-md);text-align:left;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);
}
.dr-type:hover{border-color:#38384a}
.dr-type b{display:flex;align-items:center;gap:9px;font-family:var(--dr-display);font-size:14.5px;font-weight:600;color:var(--dr-text)}
.dr-type b svg{width:16px;height:16px;flex:none}
.dr-type small{display:block;font-size:12.5px;color:var(--dr-dim);margin-top:7px;line-height:1.5}
.dr-type.is-active{background:var(--dr-red-wash);border-color:var(--dr-red)}
.dr-type.is-active b{color:var(--dr-red)}
.dr-type.is-active b svg{color:var(--dr-red)}

.dr-submit{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dr-submit small{display:block;font-size:12.5px;color:var(--dr-dim);margin-top:5px}
.dr-error{
  border:1px solid var(--dr-red);border-left:3px solid var(--dr-red);border-radius:var(--dr-r-md);
  padding:14px 17px;font-size:14px;color:var(--dr-text-2);margin-bottom:18px;background:var(--dr-red-wash);
}

/* ---- Creator profile ------------------------------------------------------- */
.dr-prof{display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap;margin-bottom:10px}
.dr-prof__av{width:104px;height:104px;border-radius:50%;flex:none;object-fit:cover;background:var(--dr-surface-2);
  display:grid;place-items:center;font-family:var(--dr-display);font-size:38px;font-weight:700;color:var(--dr-dim)}
.dr-prof__id{flex:1;min-width:220px}
.dr-prof__name{display:flex;align-items:center;gap:10px;font-size:clamp(26px,3vw,34px);letter-spacing:-.03em}
.dr-prof__check{width:22px;height:22px;flex:none;color:#3B9EFF}
.dr-prof__at{font-size:14.5px;color:var(--dr-dim);margin-top:4px}
.dr-prof__tag{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 13px;
  border-radius:var(--dr-pill);background:var(--dr-red-wash);border:1px solid var(--dr-red-edge);
  font-size:12.5px;font-weight:600;color:var(--dr-red);
}
.dr-prof__nums{display:flex;align-items:center;gap:0;margin-left:auto;flex-wrap:wrap}
.dr-prof__num{text-align:center;padding:0 28px;border-right:1px solid var(--dr-line-2)}
.dr-prof__num:last-child{border-right:0;padding-right:0}
.dr-prof__num b{display:block;font-family:var(--dr-display);font-size:24px;font-weight:700;letter-spacing:-.02em}
.dr-prof__num span{display:block;font-size:13px;color:var(--dr-dim);margin-top:3px}
.dr-tabs{display:flex;gap:28px;border-bottom:1px solid var(--dr-line);margin:30px 0 28px}
.dr-tabs a{position:relative;padding:0 0 13px;font-size:15px;font-weight:500;color:var(--dr-dim)}
.dr-tabs a:hover{color:var(--dr-text)}
.dr-tabs a.is-active{color:var(--dr-text)}
.dr-tabs a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--dr-red);border-radius:2px}
.dr-bio{font-size:15px;color:var(--dr-dim);line-height:1.72;max-width:72ch}

@media (max-width:820px){
  .dr-form__grid,.dr-types{grid-template-columns:1fr}
  .dr-form{padding:19px}
  .dr-prof__nums{margin-left:0;width:100%}
  .dr-prof__num{padding:0 20px 0 0}
  .dr-prof__num:first-child{padding-left:0}
}

/* create-giveaway.js marks the chosen prize count with .selected, so that is the
   class the active pill styling has to key off here. */
.dr-prize-count-button{min-width:42px;justify-content:center}
.dr-prize-count-button.selected{background:var(--dr-red);border-color:var(--dr-red);color:#fff}

/* Skin picker rows, injected by create-giveaway.js. These class names come from
   that script's template, not from here, so they must match it exactly. */
.dr-prize-list{display:grid;gap:14px}
.dr-prize-field{
  display:grid;grid-template-columns:34px 1fr 96px;gap:14px;align-items:start;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:var(--dr-r-md);padding:14px;
}
.dr-prize-number{
  font-family:var(--dr-display);font-size:13px;font-weight:700;color:var(--dr-dim-2);
  padding-top:30px;font-variant-numeric:tabular-nums;
}
.dr-skin-picker{position:relative;min-width:0}
.dr-skin-picker label{margin-bottom:12px}
.dr-float-field small{color:var(--dr-dim-2);font-weight:400}
.dr-skin-preview{
  width:96px;height:72px;border-radius:var(--dr-r-sm);background:var(--dr-surface-2);
  display:grid;place-items:center;overflow:hidden;font-size:12px;color:var(--dr-dim-2);
}
.dr-skin-preview img{width:100%;height:100%;object-fit:contain;padding:6px}
.dr-skin-results{
  position:absolute;top:70px;left:0;right:0;z-index:40;max-height:270px;overflow:auto;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-md);
  box-shadow:0 20px 44px rgba(0,0,0,.6);padding:5px;
}
.dr-skin-result{
  display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;cursor:pointer;
  background:transparent;color:var(--dr-text-2);font:inherit;font-size:13.5px;text-align:left;
  border-radius:var(--dr-r-sm);
}
.dr-skin-result:hover{background:var(--dr-surface-2);color:var(--dr-text)}
.dr-skin-result img{width:44px;height:32px;object-fit:contain;flex:none}
.dr-skin-none{padding:11px;font-size:13px;color:var(--dr-dim-2)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:820px){ .dr-prize-field{grid-template-columns:1fr} .dr-prize-number{padding-top:0} .dr-skin-preview{width:100%} }

/* ---- Search suggestions ---------------------------------------------------- */
.dr-suggest{
  position:absolute;top:calc(100% + 9px);left:0;right:0;z-index:70;
  max-height:min(420px,70vh);overflow:auto;padding:6px;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);
  box-shadow:0 24px 54px rgba(0,0,0,.66);
}
.dr-suggest__row{
  display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--dr-r-sm);
  text-decoration:none;color:var(--dr-text-2);
}
.dr-suggest__row:hover,.dr-suggest__row.is-on{background:var(--dr-surface-2);color:var(--dr-text)}
.dr-suggest__art{
  width:54px;height:40px;flex:none;border-radius:6px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 56%,#1D1726 0%,#0A0A0F 76%);
  display:grid;place-items:center;
}
.dr-suggest__art img{width:100%;height:100%;object-fit:contain;padding:3px}
.dr-suggest__txt{flex:1;min-width:0}
.dr-suggest__txt b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-suggest__txt small{display:block;font-size:12px;color:var(--dr-dim);margin-top:2px}
.dr-suggest__v{flex:none;font-size:13px;font-weight:700;color:var(--dr-red);font-variant-numeric:tabular-nums}
.dr-suggest__tag{
  flex:none;padding:3px 8px;border-radius:var(--dr-pill);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  background:var(--dr-surface-2);color:var(--dr-dim);border:1px solid var(--dr-line-2);
}
.dr-suggest__tag.is-hosted{background:#2563EB;color:#fff;border-color:#2563EB}
.dr-suggest__none{padding:16px 12px;font-size:13px;color:var(--dr-dim-2);text-align:center}
.dr-suggest__all{
  display:block;margin-top:4px;padding:11px;border-top:1px solid var(--dr-line);
  font-size:12.5px;font-weight:600;color:var(--dr-red);text-align:center;text-decoration:none;
}
.dr-suggest__all:hover{background:var(--dr-red-wash)}

/* ---- Hero sponsored rail --------------------------------------------------- */
/* With a sponsor to show, the hero becomes two columns: the pitch on the left and
   paid placement on the right, where the eye lands first. */
.dr-hero--split .dr-hero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:52px;align-items:center;
}
.dr-hero--split .dr-hero__copy{max-width:none}
/* The left column is narrower once the rail takes the right half, and four stats
   in a row no longer fit; a 2x2 block reads better than a cramped wrapped line. */
.dr-hero--split .dr-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 0;margin-top:34px;max-width:560px;
}
.dr-hero--split .dr-stat{padding-right:24px;margin-right:0;border-right:0}
.dr-hero--split .dr-stat:nth-child(odd){border-right:1px solid var(--dr-line-2)}
.dr-hero--split .dr-stat b{font-size:21px}

.dr-promo-rail{position:relative;min-width:0}
.dr-promo-rail__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px}
.dr-promo-rail__tag{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--dr-display);
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dr-gold);
}
.dr-promo-rail__tag svg{width:19px;height:19px}
.dr-promo-rail__nav{display:flex;align-items:center;gap:9px}
.dr-rail__btn{
  width:32px;height:32px;display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:50%;border:1px solid var(--dr-line-2);background:var(--dr-surface);color:var(--dr-text-2);
}
.dr-rail__btn:hover{color:var(--dr-text);border-color:var(--dr-red);background:var(--dr-red-wash)}
.dr-rail__btn svg{width:16px;height:16px}
.dr-rail__count{font-size:12.5px;color:var(--dr-dim);font-variant-numeric:tabular-nums}
.dr-rail__count b{color:var(--dr-text);font-weight:700}

/* One slide is visible at a time. Without JS every slide simply stacks and stays
   readable, which is why the track is a grid rather than a translated strip. */
.dr-promo-rail__track{display:grid}
.dr-promo-rail__slide{grid-area:1 / 1;min-width:0}
.is-many .dr-promo-rail__slide{opacity:0;visibility:hidden;transition:opacity .45s ease}
.is-many .dr-promo-rail__slide.is-on{opacity:1;visibility:visible}

.dr-rail__dots{display:flex;gap:7px;justify-content:center;margin-top:15px}
.dr-rail__dot{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;border:0;
  background:var(--dr-line-2);transition:width .25s,background .25s;
}
.dr-rail__dot.is-on{width:22px;border-radius:4px;background:var(--dr-red)}

@media (max-width:1100px){
  .dr-hero--split .dr-hero__in{grid-template-columns:1fr;gap:38px}
  .dr-hero--split .dr-stats{max-width:780px}
}
@media (prefers-reduced-motion:reduce){
  .is-many .dr-promo-rail__slide{transition:none}
}

/* ---- Card facts line ------------------------------------------------------- */
/* Small, factual labels: rarity, float, how long is left, whether a deposit is
   needed. They sit under the figures so the card can be scanned without opening it. */
.dr-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dr-fact{
  padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.02em;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);color:var(--dr-dim);
}
.dr-fact--rarity{border-color:currentColor;background:transparent}
.dr-fact--float{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px}
.dr-fact--when{color:var(--dr-text-2)}
.dr-fact--warn{color:var(--dr-orange);border-color:rgba(255,107,53,.34);background:rgba(255,107,53,.09)}
.dr-fact--free{color:var(--dr-green);border-color:rgba(34,197,94,.3);background:var(--dr-green-wash)}
.dr-card__host a{color:var(--dr-text-2);text-decoration:none}
.dr-card__host a:hover{color:var(--dr-red)}
.dr-meta:empty{display:none}

/* ---- Dashboard rows -------------------------------------------------------- */
.dr-rows{display:grid;gap:12px}
.dr-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);padding:16px 18px;
}
.dr-row.is-sponsored{border-color:var(--dr-red-edge);background:linear-gradient(90deg,var(--dr-red-wash),var(--dr-surface) 32%)}
.dr-row__art{
  width:96px;height:68px;flex:none;border-radius:var(--dr-r-md);overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 56%,#1D1726 0%,#0A0A0F 76%);
  border-left:3px solid var(--dr-rarity,transparent);
  font-family:var(--dr-display);font-size:14px;font-weight:700;color:#2B2B38;
}
.dr-row__art img{width:100%;height:100%;object-fit:contain;padding:6px}
.dr-row__main{flex:1;min-width:230px}
.dr-row__main h3{font-family:var(--dr-display);font-size:16px;font-weight:600;overflow-wrap:anywhere}
.dr-row__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.dr-tag{
  padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);color:var(--dr-dim);
}
.dr-tag--ok{color:var(--dr-green);border-color:rgba(34,197,94,.3);background:var(--dr-green-wash)}
.dr-tag--wait{color:var(--dr-gold);border-color:rgba(232,179,57,.3);background:rgba(232,179,57,.08)}
.dr-tag--bad{color:var(--dr-red);border-color:var(--dr-red-edge);background:var(--dr-red-wash)}
.dr-tag--hosted{color:#8AB4FF;border-color:rgba(37,99,235,.42);background:rgba(37,99,235,.14)}
.dr-tag--on{color:#fff;background:var(--dr-red);border-color:var(--dr-red)}
.dr-row__act{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dr-row__note{font-size:12.5px;color:var(--dr-dim-2);line-height:1.5;display:block}
.dr-row__side{flex:none;min-width:210px;max-width:240px}
.dr-row__sidecap{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--dr-dim-2);margin-bottom:9px;text-transform:uppercase}
.dr-btn--danger{color:var(--dr-red)}
.dr-btn--danger:hover{background:var(--dr-red-wash);border-color:var(--dr-red)}

.dr-boosts{display:grid;gap:7px}
.dr-boost{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;
  padding:9px 12px;border-radius:var(--dr-r-sm);cursor:pointer;text-align:left;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);color:var(--dr-text-2);font:inherit;
}
.dr-boost:hover{border-color:var(--dr-red);background:var(--dr-red-wash);color:var(--dr-text)}
.dr-boost b{font-size:13px;font-weight:600}
.dr-boost small{font-size:11.5px;color:var(--dr-dim);white-space:nowrap}

/* ---- Visibility plans ------------------------------------------------------ */
.dr-plan{
  position:relative;background:var(--dr-surface);border:1px solid var(--dr-line-2);
  border-radius:var(--dr-r-xl);padding:14px;
}
.dr-plan.is-popular{border-color:var(--dr-red-edge)}
.dr-plan__flag{
  position:absolute;top:-10px;left:14px;padding:4px 11px;border-radius:var(--dr-pill);
  background:var(--dr-red);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;
}
/* The artwork is a diagram of where the card lands, so it is capped rather than
   stretched: at full width it dominated the page. */
.dr-plan__art{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:var(--dr-r-md)}
.dr-plan__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px}
.dr-plan__name{font-family:var(--dr-display);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--dr-dim)}
.dr-plan__price{font-family:var(--dr-display);font-size:19px;font-weight:700;color:var(--dr-text)}
.dr-plan__price small{font-size:11.5px;font-weight:500;color:var(--dr-dim);margin-left:5px}
.dr-plan__what{font-size:13px;color:var(--dr-dim);margin-top:7px;line-height:1.55}

.dr-stats--inline{margin-top:0;gap:0}
.dr-stats--inline .dr-stat{padding-right:22px;margin-right:22px}
.dr-stats--inline .dr-stat b{font-size:19px}

@media (max-width:820px){
  .dr-row__side{min-width:0;max-width:none;width:100%}
  .dr-row__art{width:100%;height:120px}
  .dr-plan__art{max-width:none}
}
.dr-seed{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:5px;
  padding:7px 9px;color:var(--dr-text-2);overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;
}

/* Where a sponsored giveaway runs, hero card only, pinned opposite the SPONSORED tag. */
/* Bottom-left, not top-right: on the 190px hero thumbnail, SPONSORED and EXTERNAL
   side by side are wider than the frame and would collide. */
.dr-badge--where{top:auto;bottom:11px;left:11px;backdrop-filter:blur(6px)}
.dr-badge--where.is-hosted{background:rgba(37,99,235,.9);color:#fff}
.dr-badge--where.is-external{background:rgba(21,21,29,.86);color:var(--dr-text-2);border:1px solid var(--dr-line-2)}
.dr-meta__n svg{width:13px;height:13px;opacity:.75}

/* ---- Sign-in page ---------------------------------------------------------- */
.dr-auth{
  position:relative;max-width:var(--dr-max);margin:0 auto;
  padding:52px var(--dr-gutter) 80px;
}
/* A soft red bloom behind the panel, same family as the hero, so the page is not
   a bare form on a black field. */
.dr-auth::before{
  content:"";position:absolute;left:50%;top:-80px;width:760px;height:560px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(255,46,78,.13),rgba(255,46,78,0) 66%);
}
.dr-auth__wrap{position:relative;z-index:1;max-width:560px;margin:0 auto}
.dr-auth__split{
  position:relative;z-index:1;display:grid;gap:36px;
  grid-template-columns:minmax(0,1fr) minmax(0,330px);align-items:start;
  max-width:980px;margin:0 auto;
}
.dr-auth__card{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);
  border-radius:var(--dr-r-xl);padding:34px;
}
.dr-auth__brand{display:inline-flex;margin-bottom:22px;color:var(--dr-text)}
.dr-auth__card h1{font-size:clamp(24px,3vw,31px);letter-spacing:-.03em}
.dr-auth__lede{font-size:14.5px;color:var(--dr-dim);margin-top:9px;line-height:1.6}
.dr-auth__lede strong{color:var(--dr-text-2)}
.dr-auth__line{height:1px;background:var(--dr-line);margin:24px 0}

/* Steam, the primary way in */
.dr-steam-btn{
  display:flex;align-items:center;gap:14px;margin-top:24px;padding:15px 18px;
  border-radius:var(--dr-r-md);text-decoration:none;color:var(--dr-text);
  background:linear-gradient(100deg,#1B2838,#2A475E);border:1px solid #3A5A74;
  transition:border-color .18s,transform .18s;
}
.dr-steam-btn:hover{border-color:#66C0F4;transform:translateY(-1px)}
.dr-steam-btn .steam-mark{width:28px;height:28px;flex:none}
.dr-steam-btn > span{flex:1;min-width:0}
.dr-steam-btn b{display:block;font-size:15px;font-weight:600}
.dr-steam-btn small{display:block;font-size:12.5px;color:#9FC4DD;margin-top:2px}
.dr-steam-btn > svg{width:18px;height:18px;flex:none;color:#66C0F4}

.dr-auth__or{display:flex;align-items:center;gap:14px;margin:26px 0 20px;color:var(--dr-dim-2);font-size:12.5px}
.dr-auth__or::before,.dr-auth__or::after{content:"";flex:1;height:1px;background:var(--dr-line)}

/* Radio tabs, no script, the checked input selects the panel */
.dr-tabsw > input{position:absolute;opacity:0;pointer-events:none}
.dr-tabsw__bar{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--dr-bg-2);border-radius:var(--dr-r-md);border:1px solid var(--dr-line)}
.dr-tabsw__bar label{
  margin:0;padding:10px;text-align:center;border-radius:var(--dr-r-sm);cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--dr-dim);transition:background .15s,color .15s;
}
.dr-tabsw__bar label:hover{color:var(--dr-text)}
#dr-tab-in:checked ~ .dr-tabsw__bar label[for="dr-tab-in"],
#dr-tab-up:checked ~ .dr-tabsw__bar label[for="dr-tab-up"]{background:var(--dr-red);color:#fff}
.dr-tabsw__panel{display:none;margin-top:20px}
#dr-tab-in:checked ~ .dr-tabsw__panel[data-panel="in"],
#dr-tab-up:checked ~ .dr-tabsw__panel[data-panel="up"]{display:block}
.dr-tabsw__panel label{display:block;margin-bottom:16px;font-size:13.5px;font-weight:600;color:var(--dr-text-2)}
.dr-tabsw__panel label small{color:var(--dr-dim-2);font-weight:400;margin-left:5px}
.dr-tabsw__panel input{
  display:block;width:100%;margin-top:9px;padding:12px 15px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-md);
  color:var(--dr-text);font:inherit;font-size:14px;font-weight:400;outline:none;
}
.dr-tabsw__panel input:focus{border-color:var(--dr-red-edge)}
.dr-tabsw__panel .dr-btn{margin-top:4px}

.dr-auth__warn{font-size:12.5px;color:var(--dr-dim-2);line-height:1.6;margin-top:22px;text-align:center}

/* Right-hand column */
.dr-auth__side{padding-top:8px}
.dr-auth__side h2{font-family:var(--dr-display);font-size:17px;font-weight:600;margin-bottom:18px}
.dr-auth__pts{list-style:none;display:grid;gap:18px}
.dr-auth__pts li{position:relative;padding-left:22px}
.dr-auth__pts li::before{
  content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--dr-red);
}
.dr-auth__pts b{display:block;font-size:14px;font-weight:600}
.dr-auth__pts span{display:block;font-size:13px;color:var(--dr-dim);margin-top:3px;line-height:1.55}
.dr-auth__note{
  margin-top:26px;padding:14px 16px;border-radius:var(--dr-r-md);font-size:12.5px;color:var(--dr-dim);
  background:var(--dr-surface);border:1px solid var(--dr-line);
}

/* Signed-in panel */
.dr-avatar--xl{width:62px;height:62px;font-size:24px}
.dr-auth__me{display:flex;align-items:center;gap:17px;margin-bottom:26px}
.dr-auth__me h1{font-size:25px}
.dr-auth__me p{font-size:14px;color:var(--dr-dim);margin-top:3px}
.dr-auth__links{display:grid;gap:8px}
.dr-auth__links a{
  display:block;padding:14px 16px;border-radius:var(--dr-r-md);text-decoration:none;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);color:var(--dr-text-2);
}
.dr-auth__links a:hover{border-color:var(--dr-red-edge);background:var(--dr-red-wash);color:var(--dr-text)}
.dr-auth__links b{display:block;font-size:14px;font-weight:600}
.dr-auth__links small{display:block;font-size:12.5px;color:var(--dr-dim-2);margin-top:2px}
.dr-auth__steam{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dr-auth__steam .steam-mark{width:26px;height:26px;flex:none;opacity:.55}
.dr-auth__steam.is-on .steam-mark{opacity:1}
.dr-auth__steam > div{flex:1;min-width:170px}
.dr-auth__steam b{display:block;font-size:14px;font-weight:600}
.dr-auth__steam small{display:block;font-size:12.5px;color:var(--dr-dim);margin-top:3px;line-height:1.5}
.dr-auth__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dr-auth__pair .dr-form{padding:20px}
.dr-auth__pair h2{font-size:15px;color:var(--dr-red);margin-bottom:16px}
.dr-auth__pair p{font-size:12.5px;color:var(--dr-dim);margin:-10px 0 16px;line-height:1.55}

@media (max-width:900px){
  .dr-auth__split{grid-template-columns:1fr;max-width:560px}
  .dr-auth__side{order:-1}
  .dr-auth__pair{grid-template-columns:1fr}
}
@media (max-width:560px){
  .dr-auth__card{padding:22px}
  .dr-auth{padding-top:30px}
}

/* ---- Create control (header) ----------------------------------------------- */
.dr-make-wrap{position:relative;flex:none}
.dr-make{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;flex:none;cursor:pointer;
  border-radius:var(--dr-pill);border:1px solid var(--dr-red);background:var(--dr-red);
  color:#fff;font:inherit;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.dr-make:hover{background:var(--dr-red-hot);border-color:var(--dr-red-hot)}
.dr-make svg{width:15px;height:15px;flex:none}
.dr-make__menu{
  display:none;position:absolute;right:0;top:calc(100% + 9px);width:286px;z-index:70;padding:7px;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);
  box-shadow:0 24px 54px rgba(0,0,0,.66);
}
.dr-make-wrap.is-open .dr-make__menu{display:block}
.dr-make__menu a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--dr-r-sm);
  color:var(--dr-text-2);text-decoration:none;
}
.dr-make__menu a:hover{background:var(--dr-surface-2);color:var(--dr-text)}
.dr-make__menu svg{width:17px;height:17px;flex:none;color:var(--dr-dim)}
.dr-make__menu a:hover svg{color:var(--dr-red)}
.dr-make__menu b{display:block;font-size:13.5px;font-weight:600}
.dr-make__menu small{display:block;font-size:11.5px;color:var(--dr-dim-2);margin-top:2px}

/* The bar is crowded; below these widths the label and then the whole control go. */
@media (max-width:1120px){ .dr-make span{display:none} .dr-make{padding:9px 11px} }
@media (max-width:820px){ .dr-make,.dr-make-wrap{display:none} }
/* The pill version of this control is hidden on narrow screens, so the nav panel
   carries it there instead, because listing a giveaway must stay reachable on a phone. */
.dr-nav > a.dr-nav__make{display:none}
@media (max-width:820px){
  .dr-nav > a.dr-nav__make{
    display:block;margin-top:10px;padding:13px !important;text-align:center !important;
    border-radius:var(--dr-r-md);background:var(--dr-red);color:#fff !important;font-weight:600;
  }
  .dr-nav > a.dr-nav__make::after{display:none}
}

/* ---- Error pages ----------------------------------------------------------- */
.dr-err{
  position:relative;max-width:720px;margin:0 auto;
  padding:72px var(--dr-gutter) 90px;text-align:center;
}
.dr-err::before{
  content:"";position:absolute;left:50%;top:0;width:620px;height:420px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,46,78,.12),rgba(255,46,78,0) 66%);
  pointer-events:none;z-index:0;
}
.dr-err > *{position:relative;z-index:1}
.dr-err__code{
  font-family:var(--dr-display);font-size:clamp(84px,16vw,140px);font-weight:700;
  line-height:.9;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:2px var(--dr-line-2);
}
.dr-err h1{font-size:clamp(23px,3.2vw,31px);letter-spacing:-.03em;margin-top:14px}
.dr-err__lede{font-size:15.5px;color:var(--dr-dim);margin-top:12px;line-height:1.65}
.dr-err__act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.dr-err__links{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:40px;text-align:left;
}
.dr-err__links a{
  display:block;padding:14px 16px;border-radius:var(--dr-r-md);text-decoration:none;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);color:var(--dr-text-2);
}
.dr-err__links a:hover{border-color:var(--dr-red-edge);background:var(--dr-red-wash);color:var(--dr-text)}
.dr-err__links b{display:block;font-size:14px;font-weight:600}
.dr-err__links small{display:block;font-size:12.5px;color:var(--dr-dim-2);margin-top:2px}
.dr-err__ref{font-size:12.5px;color:var(--dr-dim-2);margin-top:28px;line-height:1.6}
.dr-err__ref a{color:var(--dr-red)}
.dr-err__ref code{
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--dr-text-2);
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:5px;padding:2px 7px;
}
@media (max-width:560px){ .dr-err__links{grid-template-columns:1fr} }

/* ---- Multi-prize image rotation -------------------------------------------- */
/* All the prize pictures stack in the same cell and cross-fade. Without the script
   the first one simply stays visible, which is the single-prize behaviour. */
.dr-shots{position:absolute;inset:0;display:grid}
.dr-shot{grid-area:1 / 1;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s ease}
.dr-shot.is-on{opacity:1}
.dr-card--v .dr-shot{padding:10px 14px}
.dr-card:not(.dr-card--v) .dr-shot{padding:14px}
.dr-shots__n{
  position:absolute;right:9px;bottom:9px;z-index:3;padding:3px 8px;border-radius:var(--dr-pill);
  background:rgba(9,9,12,.78);border:1px solid var(--dr-line-2);backdrop-filter:blur(6px);
  font-size:10.5px;font-weight:600;color:var(--dr-dim);font-variant-numeric:tabular-nums;
}
.dr-shots__n b{color:var(--dr-text)}
@media (prefers-reduced-motion:reduce){ .dr-shot{transition:none} }
.dr-faqgrp{margin-bottom:34px}
.dr-faqgrp h2{
  font-family:var(--dr-display);font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dr-red);margin-bottom:14px;
}

/* ===========================================================================
   Hosted giveaway page
   The prize stays in view on the left while the entry flow scrolls on the right:
   people need to see what they are entering for while they work through modules.
   =========================================================================== */
.dr-hg{
  max-width:var(--dr-max);margin:0 auto;padding:40px var(--dr-gutter) 80px;
  display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:34px;align-items:start;
}
.dr-hg__aside{position:sticky;top:88px;display:grid;gap:14px}

.dr-hg__prize{
  position:relative;background:var(--dr-surface);border:1px solid var(--dr-line-2);
  border-radius:var(--dr-r-xl);padding:18px;
}
.dr-hg__art{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--dr-r-lg);overflow:hidden;
  background:radial-gradient(ellipse at 50% 56%,#1D1726 0%,#0A0A0F 76%);
  display:grid;place-items:center;font-family:var(--dr-display);font-size:19px;color:#2B2B38;
}
.dr-hg__art img{width:100%;height:100%;object-fit:contain;padding:18px}
.dr-hg__value{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:17px}
.dr-hg__value small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dr-dim-2)}
.dr-hg__value strong{font-family:var(--dr-display);font-size:26px;font-weight:700;color:var(--dr-red);letter-spacing:-.02em}
.dr-hg__by{font-size:13.5px;color:var(--dr-dim);margin-top:7px;line-height:1.5}
.dr-hg__by a{color:var(--dr-text-2)}

.dr-hg__clock{
  margin-top:17px;padding:15px;border-radius:var(--dr-r-md);text-align:center;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);
}
.dr-hg__clock small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dr-dim-2)}
.dr-hg__clock strong{
  display:block;margin:7px 0 6px;font-family:var(--dr-display);font-size:29px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.dr-hg__clock span{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--dr-dim-2)}

.dr-hg__report{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:10px;
  background:none;border:1px solid var(--dr-line);border-radius:var(--dr-r-sm);cursor:pointer;
  color:var(--dr-dim-2);font:inherit;font-size:12.5px;
}
.dr-hg__report:hover{color:var(--dr-red);border-color:var(--dr-red-edge);background:var(--dr-red-wash)}
.dr-hg__report svg{width:14px;height:14px}

.dr-hg__safe{
  display:flex;gap:12px;padding:15px 16px;border-radius:var(--dr-r-md);
  background:var(--dr-green-wash);border:1px solid rgba(34,197,94,.26);
}
.dr-hg__safe svg{width:20px;height:20px;flex:none;color:var(--dr-green)}
.dr-hg__safe b{display:block;font-size:13px;font-weight:600;color:var(--dr-green)}
.dr-hg__safe small{display:block;font-size:12px;color:var(--dr-dim);margin-top:4px;line-height:1.5}

/* ---- right column ---------------------------------------------------------- */
.dr-hg__main{min-width:0;display:grid;gap:16px}
.dr-hg__head{margin-bottom:4px}
.dr-hg__tag{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:var(--dr-pill);
  background:var(--dr-red-wash);border:1px solid var(--dr-red-edge);
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dr-red);
}
.dr-hg__head h1{font-size:clamp(25px,3.4vw,36px);letter-spacing:-.03em;margin-top:14px;overflow-wrap:anywhere}
.dr-hg__head p{font-size:14.5px;color:var(--dr-dim);margin-top:10px;line-height:1.6;max-width:68ch}

.dr-hg__step{
  background:var(--dr-surface);border:1px solid var(--dr-line-2);
  border-radius:var(--dr-r-xl);padding:24px;
}
.dr-hg__steph{display:flex;gap:15px;align-items:flex-start;margin-bottom:20px}
.dr-hg__n{
  width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--dr-red);color:#fff;font-family:var(--dr-display);font-size:14px;font-weight:700;
}
.dr-hg__n--gold{background:var(--dr-gold);color:#1A1407;font-size:15px}
.dr-hg__n--plain{background:var(--dr-surface-2);color:var(--dr-dim)}
.dr-hg__n--plain svg{width:16px;height:16px}
.dr-hg__steph h2{font-family:var(--dr-display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.dr-hg__steph p{font-size:13.5px;color:var(--dr-dim);margin-top:5px;line-height:1.55}

/* The "?" help marker: a tooltip on hover and on keyboard focus. */
.dr-tip{
  position:relative;display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;
  border-radius:50%;background:var(--dr-surface-2);border:1px solid var(--dr-line-2);
  font-size:10.5px;font-weight:700;color:var(--dr-dim);cursor:help;vertical-align:1px;
}
.dr-tip:hover,.dr-tip:focus-visible{color:var(--dr-text);border-color:var(--dr-red)}
.dr-tip::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  width:min(280px,70vw);padding:11px 13px;border-radius:var(--dr-r-sm);z-index:60;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);box-shadow:0 16px 36px rgba(0,0,0,.6);
  font-size:12px;font-weight:400;line-height:1.5;color:var(--dr-text-2);text-align:left;
  opacity:0;visibility:hidden;transition:opacity .15s;
}
.dr-tip:hover::after,.dr-tip:focus-visible::after{opacity:1;visibility:visible}

.dr-hg__step form label{display:block;margin-bottom:16px;font-size:13.5px;font-weight:600;color:var(--dr-text-2)}
.dr-hg__step form label small{color:var(--dr-dim-2);font-weight:400;margin-left:5px}
.dr-hg__step input[type=text],.dr-hg__step input:not([type]),.dr-hg__step textarea{
  display:block;width:100%;margin-top:9px;padding:12px 15px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-md);
  color:var(--dr-text);font:inherit;font-size:14px;font-weight:400;outline:none;
}
.dr-hg__step textarea{resize:vertical;line-height:1.6}
.dr-hg__step input:focus,.dr-hg__step textarea:focus{border-color:var(--dr-red-edge)}

.dr-hg__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dr-hg__box{background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:var(--dr-r-md);padding:16px}
.dr-hg__boxh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:13.5px}
.dr-hg__facts{display:grid;gap:12px}
.dr-hg__facts div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dr-hg__facts small{font-size:12.5px;color:var(--dr-dim)}
.dr-hg__facts strong{font-size:13.5px;font-weight:600;text-align:right;overflow-wrap:anywhere}
.dr-hg__proof{margin-top:16px;border-top:1px solid var(--dr-line);padding-top:14px}
.dr-hg__proof summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--dr-red);list-style:none}
.dr-hg__proof summary::-webkit-details-marker{display:none}
.dr-hg__proof summary::before{content:"+ ";font-weight:700}
.dr-hg__proof[open] summary::before{content:"\2212 "}
.dr-hg__proof p{font-size:12.5px;color:var(--dr-dim);margin:12px 0 14px;line-height:1.55}
.dr-hg__proof label{display:block;margin-bottom:12px;font-size:11.5px;font-weight:600;color:var(--dr-dim-2)}
.dr-hg__proof textarea{
  display:block;width:100%;margin-top:6px;padding:9px 11px;resize:vertical;
  background:var(--dr-bg);border:1px solid var(--dr-line);border-radius:var(--dr-r-sm);
  color:var(--dr-text-2);font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;
}
.dr-hg__algo{display:block;font-size:11px;color:var(--dr-dim-2)}
.dr-hg__algo code{font-family:ui-monospace,Menlo,monospace;color:var(--dr-dim)}

/* entrants + modules, both injected by the script */
.dr-hosted-entrants{display:grid;gap:7px;max-height:260px;overflow:auto}
.dr-hosted-entrants > *{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--dr-r-sm);
  background:var(--dr-surface);font-size:13px;color:var(--dr-text-2);
}
.dr-hosted-rules{display:grid;gap:10px}
.dr-hosted-rules > *{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:14px 16px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:var(--dr-r-md);
  font-size:13.5px;color:var(--dr-text-2);
}
.dr-hosted-rules button{
  margin-left:auto;padding:9px 16px;border-radius:var(--dr-pill);cursor:pointer;
  background:var(--dr-red);border:1px solid var(--dr-red);color:#fff;font:inherit;font-size:13px;font-weight:600;
}
.dr-hosted-rules button:hover{background:var(--dr-red-hot)}
.dr-hosted-rules button:disabled{background:var(--dr-surface-2);border-color:var(--dr-line-2);color:var(--dr-dim);cursor:default}
.dr-hosted-rules input[type=text],.dr-hosted-rules input:not([type]){margin-top:0;flex:1;min-width:150px}
.dr-hosted-rules a{color:var(--dr-red)}

/* review */
.dr-hg__ask{border:0;padding:0;margin:0 0 18px}
.dr-hg__ask legend{font-size:13.5px;font-weight:600;color:var(--dr-text-2);margin-bottom:11px;padding:0}
.dr-hg__yn{
  display:inline-flex !important;align-items:center;gap:8px;margin:0 16px 0 0 !important;
  font-size:14px;font-weight:500 !important;cursor:pointer;
}
.dr-hg__yn input{width:17px;height:17px;accent-color:var(--dr-red);margin:0}
.dr-stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.dr-stars input{position:absolute;opacity:0;width:0;height:0}
.dr-stars label{
  margin:0 !important;font-size:27px;line-height:1;color:var(--dr-line-2);cursor:pointer;
  transition:color .12s;
}
.dr-stars label:hover,.dr-stars label:hover ~ label,
.dr-stars input:checked ~ label{color:var(--dr-gold)}
.dr-stars input:focus-visible + label{outline:2px solid var(--dr-red);outline-offset:3px;border-radius:3px}

/* share */
.dr-hg__export{
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:var(--dr-r-md);
  padding:15px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.6;
  color:var(--dr-dim);white-space:pre-wrap;word-break:break-word;margin:0 0 14px;max-height:190px;overflow:auto;
}
.dr-hg__shareacts{display:flex;gap:10px;flex-wrap:wrap}
.dr-share-x svg{width:14px;height:14px}

/* winner overlay */
.dr-hg__overlay{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(5,5,8,.82);backdrop-filter:blur(7px);
}
.dr-hg__overlay[hidden]{display:none}
.dr-hg__won{
  max-width:430px;text-align:center;padding:34px 30px;border-radius:var(--dr-r-xl);
  background:var(--dr-surface);border:1px solid var(--dr-red-edge);
  box-shadow:0 0 70px rgba(255,46,78,.26);
}
.dr-hg__wontag{
  display:inline-block;padding:5px 13px;border-radius:var(--dr-pill);margin-bottom:16px;
  background:var(--dr-red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.dr-hg__won h2{font-size:27px;letter-spacing:-.02em;overflow-wrap:anywhere}
.dr-hg__won p{font-size:13.5px;color:var(--dr-dim);margin:12px 0 22px;line-height:1.6}

@media (max-width:1040px){
  .dr-hg{grid-template-columns:1fr}
  .dr-hg__aside{position:static}
  .dr-hg__art{aspect-ratio:16/9}
}
@media (max-width:620px){
  .dr-hg__grid{grid-template-columns:1fr}
  .dr-hg__step{padding:18px}
}

/* ===========================================================================
   Hosted page: the parts hosted-giveaway.js injects
   These class names come from that script's templates, not from here, so they
   have to match it exactly. Without them the module rows collapsed into one run
   of text and the countdown stacked into a vertical list.
   =========================================================================== */

/* ---- Countdown: the same four boxes as the giveaway cards ------------------ */
/* The script rewrites these every second, so the only thing missing was the shape. */
#hosted-countdown{
  display:flex;align-items:stretch;justify-content:center;gap:0;
  margin:10px 0 8px !important;font-size:0 !important;
}
.dr-time-chip{
  position:relative;flex:1;min-width:0;padding:9px 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.dr-time-chip + .dr-time-chip::before{
  content:":";position:absolute;left:-3px;top:50%;transform:translateY(-62%);
  font-family:var(--dr-display);font-size:17px;font-weight:700;color:var(--dr-dim-2);
}
.dr-time-chip b{
  display:block;font-family:var(--dr-display);font-size:25px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.01em;color:var(--dr-text);
}
.dr-time-chip small{
  display:block;margin-top:4px;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dr-dim-2);
}
/* The seconds box breathes once per tick, so the page reads as live at a glance. */
.dr-time-chip:last-child b{color:var(--dr-red);animation:dr-tick 1s ease-in-out infinite}
@keyframes dr-tick{0%,70%{opacity:1}85%{opacity:.45}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .dr-time-chip:last-child b{animation:none} }

/* ---- Entry modules --------------------------------------------------------- */
.dr-hosted-rules{display:grid;gap:10px}
.dr-hosted-rules > .dr-hosted-step{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:15px 17px;
  background:var(--dr-bg-2);border:1px solid var(--dr-line);border-radius:var(--dr-r-md);
  transition:border-color .18s,background .18s;
}
.dr-hosted-rules > .dr-hosted-step.done{
  border-color:rgba(34,197,94,.3);background:linear-gradient(90deg,var(--dr-green-wash),var(--dr-bg-2) 42%);
}
.dr-hosted-step-main{display:flex;align-items:center;gap:14px;flex:1;min-width:230px}
.dr-hosted-step-number{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--dr-surface-2);border:1px solid var(--dr-line-2);
  font-family:var(--dr-display);font-size:13px;font-weight:700;color:var(--dr-dim);
}
/* A completed module shows a tick instead of its number, the fastest way to read
   "what is left" down a column. */
.done .dr-hosted-step-number{background:var(--dr-green);border-color:var(--dr-green);color:#06240F;font-size:0}
.done .dr-hosted-step-number::after{content:"\2713";font-size:15px;font-weight:700;line-height:1}
.dr-hosted-step-copy{min-width:0}
.dr-hosted-step-copy strong{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  font-family:var(--dr-display);font-size:14.5px;font-weight:600;color:var(--dr-text);
}
.dr-hosted-step-copy > small{display:block;font-size:12.5px;color:var(--dr-dim);margin-top:4px}
.done .dr-hosted-step-copy > small{color:var(--dr-green)}
.dr-module-sub{display:block;font-size:11.5px;color:var(--dr-dim-2);margin-top:3px}
.dr-module-sub b{color:var(--dr-text-2);font-family:ui-monospace,Menlo,monospace}
.dr-hosted-step-side{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-left:auto}

.dr-rule-mode-badge{
  padding:4px 10px;border-radius:var(--dr-pill);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--dr-surface-2);border:1px solid var(--dr-line-2);color:var(--dr-dim);
}
.dr-rule-mode-badge.required{color:var(--dr-red);border-color:var(--dr-red-edge);background:var(--dr-red-wash)}
.dr-rule-mode-badge.bonus{color:var(--dr-gold);border-color:rgba(232,179,57,.3);background:rgba(232,179,57,.09)}
.done .dr-rule-mode-badge.required{color:var(--dr-green);border-color:rgba(34,197,94,.3);background:var(--dr-green-wash)}

/* The action on a module row: a button, a link, or an answer field. */
.dr-mini-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 17px;border-radius:var(--dr-pill);cursor:pointer;white-space:nowrap;
  background:var(--dr-red);border:1px solid var(--dr-red);color:#fff;
  font:inherit;font-size:13px;font-weight:600;text-decoration:none;
}
.dr-mini-btn:hover{background:var(--dr-red-hot);border-color:var(--dr-red-hot);color:#fff}
.dr-mini-btn:disabled,.done .dr-mini-btn{
  background:var(--dr-surface-2);border-color:var(--dr-line-2);color:var(--dr-dim);cursor:default;
}
.dr-hosted-step-side input{
  margin:0 !important;width:auto !important;min-width:190px;padding:10px 14px !important;
  background:var(--dr-surface) !important;
}

/* The organiser's own free-text conditions sit under the modules, as a note. */
.dr-hosted-rules > .dr-notice{margin:4px 0 0;font-size:13.5px;white-space:pre-wrap}

/* The legacy "?" marker the script injects, matched to .dr-tip */
.dr-help-tip{
  position:relative;display:inline-grid;place-items:center;width:17px;height:17px;margin-left:6px;
  border-radius:50%;background:var(--dr-surface-2);border:1px solid var(--dr-line-2);
  font-size:10.5px;font-weight:700;color:var(--dr-dim);cursor:help;flex:none;
}
.dr-help-tip:hover{color:var(--dr-text);border-color:var(--dr-red)}
.dr-help-tip::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  width:min(290px,70vw);padding:11px 13px;border-radius:var(--dr-r-sm);z-index:60;
  background:var(--dr-bg-2);border:1px solid var(--dr-line-2);box-shadow:0 16px 36px rgba(0,0,0,.6);
  font-family:var(--dr-font);font-size:12px;font-weight:400;line-height:1.5;
  color:var(--dr-text-2);text-align:left;letter-spacing:normal;text-transform:none;
  opacity:0;visibility:hidden;transition:opacity .15s;
}
.dr-help-tip:hover::after{opacity:1;visibility:visible}

/* ---- Step 2: the entry form ------------------------------------------------ */
/* When every module is done the notice turns green, so "you can enter now" is
   visible without reading it. */
#hosted-entry-progress{border-left-color:var(--dr-gold);background:var(--dr-surface)}
#hosted-entry-progress.ready,
#hosted-entry-progress:has(~ #hosted-entry-button:not(:disabled)){
  border-left-color:var(--dr-green);color:var(--dr-text-2);
}
#hosted-entry-button:disabled{opacity:.55;cursor:not-allowed}
#hosted-entry-button:not(:disabled){box-shadow:0 0 26px rgba(255,46,78,.3)}

/* ---- Entrant list ---------------------------------------------------------- */
.dr-hosted-entrant{
  display:flex !important;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--dr-r-sm);
  background:var(--dr-surface);font-size:13px;color:var(--dr-text-2);
}
.dr-hosted-entrant strong{
  flex:none;width:26px;font-family:var(--dr-display);font-size:11.5px;font-weight:700;color:var(--dr-dim-2);
}
.dr-hosted-entrant span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-hosted-entrant small{flex:none;font-size:11px;color:var(--dr-dim-2)}
.dr-muted{color:var(--dr-dim);font-size:13px}
.dr-inline-trust{font-size:12.5px;color:var(--dr-dim-2)}

@media (max-width:620px){
  .dr-hosted-step-side{margin-left:0;width:100%}
  .dr-hosted-step-side .dr-mini-btn{flex:1}
  .dr-hosted-step-side input{min-width:0;flex:1}
}

/* ---- Toasts ---------------------------------------------------------------- */
.dr-toasts{
  position:fixed;right:20px;bottom:20px;z-index:300;
  display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 40px));
  pointer-events:none;
}
.dr-toast{
  display:flex;align-items:flex-start;gap:12px;padding:14px 15px;pointer-events:auto;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-left:3px solid var(--dr-dim-2);
  border-radius:var(--dr-r-md);box-shadow:0 20px 44px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;
}
.dr-toast.is-in{opacity:1;transform:none}
.dr-toast.is-out{opacity:0;transform:translateY(6px)}
.dr-toast__ic{flex:none;width:19px;height:19px;margin-top:1px}
.dr-toast__ic svg{width:19px;height:19px}
.dr-toast p{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:var(--dr-text-2)}
.dr-toast.is-large p{font-size:14.5px}
.dr-toast__x{
  flex:none;width:22px;height:22px;margin:-2px -4px 0 0;padding:0;cursor:pointer;line-height:1;
  background:none;border:0;color:var(--dr-dim-2);font-size:19px;
}
.dr-toast__x:hover{color:var(--dr-text)}
.dr-toast--error{border-left-color:var(--dr-red)}
.dr-toast--error .dr-toast__ic{color:var(--dr-red)}
.dr-toast--success{border-left-color:var(--dr-green)}
.dr-toast--success .dr-toast__ic{color:var(--dr-green)}
.dr-toast--info{border-left-color:var(--dr-gold)}
.dr-toast--info .dr-toast__ic{color:var(--dr-gold)}
@media (prefers-reduced-motion:reduce){ .dr-toast{transition:none} }
@media (max-width:560px){ .dr-toasts{right:12px;left:12px;bottom:12px;width:auto} }

/* Links inside notices were inheriting body colour and did not read as links. */
.dr-notice a{color:var(--dr-red);text-decoration:underline;text-underline-offset:2px}
.dr-notice a:hover{color:var(--dr-red-hot)}

/* ---- Contact --------------------------------------------------------------- */
.dr-ct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dr-ct__card{
  display:flex;flex-direction:column;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);
  border-radius:var(--dr-r-xl);padding:22px;
}
.dr-ct__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.dr-ct__ic{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--dr-r-md);
  background:var(--dr-red-wash);border:1px solid var(--dr-red-edge);color:var(--dr-red);
}
.dr-ct__ic svg{width:19px;height:19px}
.dr-ct__tag{
  padding:4px 10px;border-radius:var(--dr-pill);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  background:var(--dr-surface-2);border:1px solid var(--dr-line-2);color:var(--dr-dim);
}
.dr-ct__card h2{font-family:var(--dr-display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.dr-ct__lede{font-size:13.5px;color:var(--dr-dim);margin-top:8px;line-height:1.6}
.dr-ct__hint{
  font-size:12.5px;color:var(--dr-dim);line-height:1.6;margin-top:14px;
  padding:12px 14px;border-radius:var(--dr-r-sm);
  background:var(--dr-bg-2);border:1px solid var(--dr-line);
}
.dr-ct__hint strong{color:var(--dr-text-2)}
.dr-ct__card .dr-btn{margin-top:auto;margin-top:18px}

.dr-ct__strip{margin-top:34px}
.dr-ct__strip h2{
  font-family:var(--dr-display);font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dr-dim-2);margin-bottom:14px;
}
.dr-ct__chans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dr-ct__chan{
  display:flex;align-items:center;gap:13px;padding:15px 16px;text-decoration:none;
  background:var(--dr-surface);border:1px solid var(--dr-line-2);border-radius:var(--dr-r-lg);
  color:var(--dr-text-2);
}
a.dr-ct__chan:hover{border-color:var(--dr-red-edge);background:var(--dr-red-wash);color:var(--dr-text)}
.dr-ct__chanic{width:22px;height:22px;flex:none;color:var(--dr-dim)}
.dr-ct__chanic svg{width:22px;height:22px}
a.dr-ct__chan:hover .dr-ct__chanic{color:var(--dr-red)}
.dr-ct__chantxt{flex:1;min-width:0}
.dr-ct__chantxt b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-ct__chantxt small{display:block;font-size:11.5px;color:var(--dr-dim-2);margin-top:2px;line-height:1.4}
.dr-ct__copy{
  flex:none;padding:6px 11px;border-radius:var(--dr-pill);cursor:pointer;
  background:var(--dr-surface-2);border:1px solid var(--dr-line-2);color:var(--dr-dim);
  font:inherit;font-size:11.5px;font-weight:600;
}
.dr-ct__copy:hover{color:var(--dr-text);border-color:var(--dr-red)}

@media (max-width:860px){ .dr-ct,.dr-ct__chans{grid-template-columns:1fr} }

/* Unfinished legal clause, admin view only. Deliberately loud: it must not be
   mistaken for finished policy text by whoever is reading the page. */
.dr-faq details.dr-legal-todo{border-color:#E8B339}
.dr-faq details.dr-legal-todo>summary{color:#E8B339}
.dr-legal-todo__tag{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;
  background:rgba(232,179,57,.14);border:1px solid rgba(232,179,57,.4);
  color:#E8B339;font-size:10px;font-weight:700;letter-spacing:.08em;vertical-align:middle}

/* "This page is only available in English", shown on Privacy and Terms when the
   site is in another language. Quiet: it is a note, not a warning. */
.dr-legal-lang{margin:0 0 18px;padding:9px 13px;border:1px solid var(--dr-line);
  border-left:2px solid var(--dr-red);border-radius:var(--dr-r-sm,8px);
  background:var(--dr-surface);color:var(--dr-dim);font-size:13px}