.drops { max-width: 1180px; margin: 12px auto 20px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 12px; color: #f5f2ff; font-family: inherit; }
.drops [hidden] { display: none !important; }
.drops-hero { position: relative; overflow: hidden; min-height: 0; border: 1px solid #65518a; border-radius: 24px; background: radial-gradient(ellipse at 88% 80%, #6531a8 0, transparent 65%), #191827; padding: 20px; }
.drops-hero-copy { position: relative; z-index: 1; max-width: 76%; }
.drops-brands { display: flex; align-items: center; gap: 18px; }
.drops-brands img { width: 110px; height: 32px; object-fit: contain; }
.drops-twitch { font-size: 23px; color: #cdb4ff; letter-spacing: -1px; }
.drops h1 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18; margin: 8px 0; letter-spacing: -.04em; }
.drops h2 { font-size: 16px; margin: 8px 0; }
.drops p { line-height: 1.45; overflow-wrap: anywhere; color: #c6c5d7; margin: 5px 0; }
.drops .drops-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; color: #bd9dff; }
.drops-character { position: absolute; width: 54%; right: -45px; bottom: 0; }
.drops-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; grid-column: 1 / -1; grid-row: 2; }
.drops-card { border: 1px solid #3c3854; border-radius: 20px; background: #1b1b2a; padding: 14px; }
.drops-guide .drops-card { display: flex; gap: 12px; align-items: center; }
.drops-guide img { width: 48px; height: 54px; object-fit: contain; }
.drops-guide p { font-size: 12px; }
.drops-account { text-align: center; padding: 16px; grid-column: 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-color: #7950b0; background: linear-gradient(130deg, #242034, #191b2a); margin-top: 0; }
.drops-nickname { font-size: clamp(20px, 2.3vw, 26px); color: white; overflow-wrap: anywhere; }
.drops button, .drops a { font: inherit; cursor: pointer; }
.drops .drops-primary { display: inline-block; padding: 10px 16px; margin: 8px 0 0; border: 1px solid #ac78ff; border-radius: 12px; background: #9146ff; color: white; font-weight: 750; text-decoration: none; }
.drops .drops-primary:hover { background: #a364ff; }
.drops .drops-text, .drops-back { display: block; width: fit-content; margin: 8px auto 0; border: 0; background: none; color: #beb7d3; text-underline-offset: 4px; }
.drops button:disabled { opacity: .5; cursor: wait; }
.drops :focus-visible { outline: 3px solid #e3cfff; outline-offset: 4px; }
#drops-message { color: #ffc4aa; }
#drops-success { color: #99e7c4; }
.drops-tracks { margin: 0; grid-column: 1 / -1; grid-row: 3; min-width: 0; }
.drops-track { margin: 0 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.drops-track-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 6px 0; margin: 0; list-style: none; grid-column: 1 / -1; }
.drops-track-reward { position: relative; box-sizing: border-box; border: 1px solid #665082; border-radius: 16px; background: linear-gradient(155deg, #38264f, #202035); padding: 8px; text-align: center; min-width: 0; }
.drops-track-reward h3 { color: #fff; font-size: 14px; overflow-wrap: anywhere; }
.drops-track-reward .drops-track-time { color: #d1b5ff; font-size: 14px; font-weight: 750; }
.drops-track-image { width: 58px; height: 58px; object-fit: contain; }
.drops-track-reward .drops-track-status { font-size: 11px; margin-bottom: 0; }
.drops-track-reward.is-delivered { border-color: #70ceb2; }
.drops-track-reward.is-delivered .drops-track-status { color: #99e7c4; }
.drops-track .drops-track-help, .drops-track .drops-track-period { font-size: 13px; }

#drops-manage { margin: 10px auto 0; max-width: 560px; border-top: 1px solid #494057; padding-top: 10px; }
#drops-manage summary { color: #c6b9db; cursor: pointer; font-size: 14px; }
#drops-manage p, #drops-change-warning { font-size: 13px; }
#drops-cooldown { color: #ffd69b; }

.drops-track-reward.is-featured { border-color: #f2c66d; background: linear-gradient(155deg, #61432d, #30223f); box-shadow: 0 0 18px #edbb4722; }
.drops-track-featured { color: #ffe2a3; font-size: 12px; font-weight: 700; }

.drops > * { min-width: 0; }
.drops-hero { grid-column: 1; grid-row: 1; }
.drops-hero-copy > p:last-child { font-size: 13px; }
.drops-track > .drops-eyebrow, .drops-track > h2 { grid-column: 1; margin: 0; }
.drops-track > .drops-track-period { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 11px; }
.drops-track .drops-track-help { align-self: center; margin: 0; font-size: 11px; }
.drops-track > .drops-primary { margin: 0; align-self: center; font-size: 13px; text-align: center; }
.drops-back { grid-column: 1 / -1; margin: 0 auto; }
#drops-message:empty { display: none; }
@media (max-width: 720px) {
  .drops { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 8px auto; }
  .drops-hero { grid-column: 1; grid-row: 1; padding: 12px; }
  .drops-hero-copy { max-width: 85%; }
  .drops h1 { font-size: 22px; margin: 4px 0; }
  .drops-hero-copy > .drops-eyebrow { display: none; }
  .drops-character { width: 48%; opacity: .5; right: -30px; }
  .drops-brands img { width: 90px; height: 24px; }
  .drops-twitch { font-size: 20px; }
  .drops-guide { grid-row: 2; gap: 8px; }
  .drops-guide .drops-card { display: block; padding: 10px; }
  .drops-guide img { display: none; }
  .drops-guide h2 { font-size: 14px; margin: 4px 0; }
  .drops-guide p { font-size: 11px; }
  .drops-guide .drops-eyebrow { font-size: 9px; letter-spacing: 0; }
  .drops-tracks { grid-row: 3; }
  .drops-track { padding: 10px; gap: 3px 8px; }
  .drops-track > .drops-track-period { grid-column: 1 / -1; grid-row: auto; }
  .drops-track > h2 { grid-column: 1 / -1; font-size: 15px; }
  .drops-track-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .drops-track-reward { padding: 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 4px; align-items: center; }
  .drops-track-image { width: 34px; height: 34px; grid-column: 1; grid-row: 2; }
  .drops-track-reward h3 { font-size: 12px; margin: 2px 0; }
  .drops-track-time, .drops-track-status, .drops-track-featured { grid-column: 1 / -1; }
  .drops-track-reward .drops-track-time { font-size: 12px; margin: 0; }
  .drops-track-reward .drops-track-status { font-size: 10px; margin-top: 2px; }
  .drops-track-featured { font-size: 10px; margin: 0 !important; }
  .drops-account { grid-column: 1; grid-row: 4; padding: 10px; }
  .drops-account h2 { margin: 2px 0; }
  .drops-account p { font-size: 12px; margin: 2px 0; }
  .drops-account .drops-primary { font-size: 13px; margin-top: 6px; }
  .drops-nickname { font-size: 20px; }
}
/* Keep the default four-step campaign within a 720px-high webview. */
.drops { margin-top: 4px; margin-bottom: 8px; gap: 10px; }
.drops-hero { padding: 14px; }
.drops-guide .drops-card { padding: 10px 12px; }
.drops-guide h2 { margin: 4px 0; }
.drops-guide p { margin: 3px 0; }
.drops-track-reward h3 { margin: 4px 0; line-height: 1.3; }
.drops-track-image { width: 48px; height: 48px; }
.drops-track-reward p { margin: 3px 0; }
.drops-track-featured { line-height: 1.2; }
.drops-track { margin-bottom: 0; }
@media (max-width: 720px) {
  .drops-track-image { width: 30px; height: 30px; }
  .drops-guide .drops-card { padding: 8px; }
  .drops-hero { padding: 10px; }
}
/* This stylesheet is loaded only by the standalone Drops page. */
.app-shell { padding: 12px; }
@media (max-width: 720px) {
  .app-shell { padding: 8px; }
  .drops { margin: 0 auto; gap: 6px; }
}

/* Account linking is the primary action; reading and watching are secondary. */
.drops { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); }
.drops-account {
  grid-column: 1;
  border: 2px solid #768345;
  background: radial-gradient(ellipse at top, #30382a, transparent 85%), #1c2029;
  box-shadow: 0 0 24px #dbf56a16;
}
.drops-hero { grid-column: 2; }
.drops-account .drops-eyebrow, .drops-account #drops-link { color: #eee2ff; }
.drops-account #drops-connect, .drops-account #drops-confirm, .drops-account #drops-watch {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: #dcf56a;
  border-color: #ecff9a;
  color: #222b0d;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 4px 18px #b9d94a30;
}
.drops-account #drops-connect:hover, .drops-account #drops-confirm:hover, .drops-account #drops-watch:hover { background: #ebff96; }
.drops-track > .drops-primary { background: transparent; border-color: #6c617e; color: #d3c7e6; box-shadow: none; }
.drops-track > .drops-primary:hover { background: #30273d; }
@media (max-width: 720px) {
  .drops { grid-template-columns: minmax(0, 1fr); }
  .drops-account { grid-column: 1; grid-row: 1; }
  .drops-hero { grid-column: 1; grid-row: 2; }
  .drops-guide { grid-row: 3; }
  .drops-tracks { grid-row: 4; }
  .drops-account #drops-connect, .drops-account #drops-confirm, .drops-account #drops-watch { font-size: 15px; padding: 10px 12px; }
}

.drops-track .drops-track-help { grid-column: 1 / -1; }
@media (max-width: 720px) {
  /* The two guide cards immediately below provide this same introduction. */
  .drops-hero-copy > p:last-child { display: none; }
}

.drops-account #drops-steam { min-height: 48px; display: flex; align-items: center; justify-content: center; background: #dcf56a; color: #222b0d; border-color: #ecff9a; font-size: 17px; font-weight: 800; }
.drops-account #drops-requires-game { background: #292b34; border-color: #565762; color: #999ba8; cursor: not-allowed; box-shadow: none; font-size: 13px; }
.drops-account .drops-game-needed { font-size: 18px; font-weight: 700; color: #f5f2ff !important; }
.drops-pending-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 10px; }
.drops-pending-identity { flex: 1; min-width: 0; text-align: left; }
.drops-pending-identity > span { display: block; }
#drops-pending-name { display: block; color: #d1a1ff; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.25; overflow-wrap: anywhere; }
.drops-pending-row #drops-confirm { flex-shrink: 0; margin: 0; font-size: 15px; }
#drops-pending > .drops-text { margin-top: 10px; }
@media (max-width: 720px) {
  .drops-pending-row { gap: 10px; }
  .drops-pending-row #drops-confirm { font-size: 13px; padding: 10px; }
}
.drops-pending-row { margin-top: 6px; }
.drops-account #drops-retry { margin-top: 6px; font-size: 13px; line-height: 1.35; }

#drops-confirm-status:empty { display: none; }
#drops-confirm-status { font-size: 13px; color: #e2e8c7; margin: 8px 0; }
#drops-confirm-status.is-error { color: #ffc4aa; padding: 8px; border: 1px solid #805345; border-radius: 8px; background: #382a2a; }

.drops .drops-connected-status { color: #ade6bd; font-size: 12px; font-weight: 750; margin: 0 0 10px; }
.drops-account-pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 6px; align-items: center; }
.drops-identity { padding: 12px 8px; border: 1px solid #697244; border-radius: 12px; background: #262e23; min-width: 0; }
.drops-identity span { display: block; color: #c6c5d7; font-size: 11px; margin-bottom: 5px; }
.drops-identity strong { display: block; color: #e9f5c0; font-size: clamp(18px, 2vw, 24px); line-height: 1.25; overflow-wrap: anywhere; }
.drops-twitch-identity { background: #302240; border-color: #8860b1; }
.drops-twitch-identity strong { color: #d1a1ff; }
.drops-chain { color: #ade6bd; font-size: 26px; }
.drops a.drops-inventory { display: block; color: #e5ccff; font-size: 12px; padding: 7px 4px; border: 1px solid #8860b1; border-radius: 8px; margin-top: 6px; text-decoration: none; }
.drops a.drops-inventory:hover { background: #49315f; }
.drops-account-pair { align-items: stretch; }
.drops-identity { display: flex; flex-direction: column; justify-content: center; }
.drops-chain { align-self: center; }

@media (max-width: 720px) {
  .drops[data-connected="true"] .drops-hero { padding: 10px 14px; }
  .drops[data-connected="true"] .drops-hero h1,
  .drops[data-connected="true"] .drops-hero .drops-eyebrow { display: none; }
}

.drops-received { grid-column: 1 / -1; grid-row: 2; }
.drops-received h2 { margin: 0 0 4px; }
.drops-received p { font-size: 12px; }
#drops-received-list { list-style: none; padding: 0; margin: 6px 0 0; max-height: 180px; overflow-y: auto; }
.drops-received-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid #3c3854; font-size: 13px; }
.drops-received-item strong { overflow-wrap: anywhere; }
.drops-received-item span { color: #c6c5d7; flex-shrink: 0; }
.drops-received-item .drops-received-done { color: #99e7c4; }
.drops-track > .drops-inventory { grid-column: 1 / -1; margin: 0; padding: 4px; text-align: center; }
@media (max-width: 720px) {
 .drops-received { grid-row: 3; padding: 10px; }
 .drops-received-item { font-size: 12px; }
}

.drops-track-help a.drops-inventory { display: inline; border: 0; padding: 0; font-size: inherit; text-decoration: underline; }
.drops-received { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.drops-received h2 { font-size: 14px; }
.drops-received-help { grid-column: 2; }
#drops-received-empty, #drops-received-list { grid-column: 1 / -1; }
#drops-received-list:empty { display: none; }
@media (max-width: 720px) {
 .drops[data-connected="true"] .drops-hero { padding: 8px 14px; }
}
.drops-received { padding: 8px 12px; }
.drops-received p { margin: 0; }
.drops-received h2 { margin: 0; }

.drops-track-list:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 720px) {
 .drops-track-list:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
 .drops-track-list:has(> li:nth-child(5)) .drops-track-image { width: 34px; height: 34px; }
}
@media (max-width: 720px) {
 .drops-track-list:has(> li:nth-child(5)) .drops-track-reward { padding: 4px; }
}