/* DAILY DROP — shared theme: dark night #0d0d12 + gold #d4af37 */
:root{
  --bg:#0d0d12; --panel:#14141c; --panel2:#1a1a24;
  --gold:#d4af37; --gold-dim:#b9a86a; --amber:#8a5a1e;
  --ink:#f5ecd7; --muted:#8f8672; --line:#2a251b;
  --green:#3fae5a; --red:#c0392b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  padding:64px 12px 92px;
}
h1{margin:6px 0 2px;font-size:24px;letter-spacing:3px;color:var(--gold);text-align:center}
.sub{font-size:13px;color:var(--gold-dim);margin-bottom:14px;text-align:center;padding:0 16px}

/* preview badge */
.pbadge{position:fixed;top:10px;right:10px;background:#0f0d08;border:1px solid var(--gold);
  color:var(--gold);font-size:10px;letter-spacing:1px;padding:5px 10px;border-radius:20px;z-index:60}

/* ad slots */
.adslot{width:min(96vw,480px);margin:0 auto 12px;background:var(--panel);
  border:1px dashed #4a3f22;border-radius:10px;color:var(--muted);
  font-size:11px;letter-spacing:1px;text-align:center;padding:10px 6px}
.ad-banner{min-height:56px;display:flex;align-items:center;justify-content:center}
.ad-sticky{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100vw,480px);
  min-height:52px;margin:0;border-radius:10px 10px 0 0;z-index:55;
  display:flex;align-items:center;justify-content:center;background:#101018}

/* buttons */
.btn{display:inline-block;padding:13px 22px;font-size:15px;font-weight:700;border-radius:12px;
  border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;
  text-decoration:none;text-align:center}
.btn:active{background:var(--gold);color:#141410}
.btn.solid{background:var(--gold);color:#141410}
.btn.solid:active{filter:brightness(1.1)}
.btn.small{padding:9px 14px;font-size:13px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}

/* cards (hub) */
.card{display:block;width:min(94vw,440px);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px;margin:0 auto 12px;text-decoration:none;color:var(--ink)}
.card:active{border-color:var(--gold)}
.card h2{margin:0 0 4px;font-size:19px;color:var(--gold);letter-spacing:1px}
.card p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.card .status{font-size:14px;font-weight:700;color:var(--ink)}
.card .status.done{color:var(--green)}
.card .go{float:right;color:var(--gold);font-size:20px}

/* overlays: modal / howto / interstitial */
.overlay{position:fixed;inset:0;background:rgba(5,5,8,.82);display:none;
  align-items:center;justify-content:center;z-index:70;padding:20px}
.overlay.open{display:flex}
.sheet{width:min(92vw,400px);background:var(--panel2);border:1px solid var(--gold);
  border-radius:16px;padding:22px;text-align:center}
.sheet h2{margin:0 0 8px;color:var(--gold);font-size:20px;letter-spacing:1px}
.sheet p{font-size:14px;color:var(--ink);line-height:1.55;margin:0 0 12px}
.sheet .fine{font-size:12px;color:var(--muted)}

/* toast */
#toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);
  background:#1d1810;border:1px solid var(--gold);color:var(--ink);font-size:14px;
  padding:10px 18px;border-radius:24px;opacity:0;pointer-events:none;transition:all .25s;z-index:80;
  max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* misc */
.legend{display:flex;gap:14px;font-size:12px;color:var(--gold-dim);margin-bottom:12px;
  flex-wrap:wrap;justify-content:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.streakline{font-size:15px;color:var(--gold-dim);text-align:center;margin:6px 0 14px}
.streakline b{color:var(--gold);font-size:19px}
.hubnav{display:flex;gap:10px;justify-content:center;margin:16px 0 4px;flex-wrap:wrap}
.modebar{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.modebar .btn.on{background:var(--gold);color:#141410}
.rewardbtn{margin-top:10px}
textarea.sharebox{width:100%;min-height:110px;background:#0f0d08;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;display:none}