/* garlicoin.org: the faucet, /faucet/books/ and the certificate.
   Loaded after /assets/site.css by the pages that need it (their <head> links it). Split out of site.css on
   2026-10-21: keep a rule here only if just these pages use it; anything shared goes in site.css. */

/* ---------- faucet ---------- */
.faucet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.faucet-head { display: flex; align-items: center; gap: 16px; }
.faucet-head img { width: 56px; height: 56px; flex: none; }
.faucet-head h1 { font-size: clamp(1.6rem, 3.6vw, 2rem); }
.roll-form, .roll-form-locked { margin-top: 8px; font-weight: 400; }
.roll-fields { display: flex; flex-direction: column; gap: 16px; border: 0; margin: 0; padding: 0; min-width: 0; }
/* waiting for the next roll: the form is there but switched off (faucet/index.php) */
.roll-fields:disabled input[type="text"], .roll-fields:disabled .btn { opacity: .5; cursor: not-allowed; }
.roll-fields:disabled .btn:hover svg { animation: none; }
.roll-fields input[type="text"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
}
.roll-fields .g-recaptcha { min-height: 78px; }
.roll-fields .btn { width: 100%; padding: 15px 22px; font-size: 1.1rem; }
.balance-value small { font-size: .5em; font-weight: 700; color: var(--muted); }
.how .ip { margin-top: 12px; font-size: .85rem; color: var(--muted); }
@media (max-width: 860px) {
  /* ---------- responsive ---------- */
  .faucet-layout { grid-template-columns: minmax(0, 1fr); }
}
/* faucet */
.roll-card { border-top: 6px solid var(--gold); }
.faucet-head img { animation: bob 5s ease-in-out infinite; }
.roll-fields .btn { font-size: 1.25rem; }
.roll-fields .btn svg { width: 24px; height: 24px; }
.roll-fields .btn:hover svg { animation: spin .6s ease; }
@keyframes spin { to { transform: rotate(360deg); } }
.balance-card {
  background: var(--hero-grad);
  border: 2px solid rgba(184, 122, 12, .25);
  position: relative;
  overflow: hidden;
}
.balance-card::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -40px;
  top: -50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
}
.balance-card .label { color: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .balance-card .label { color: var(--gold-text); }
  :root:not([data-theme="light"]) .balance-card::after { background: rgba(255, 210, 100, .06); }
}
.balance-card .balance-value { font-size: 2.6rem; }
/* price card */
.price-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; }
.price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price-usd { font-family: var(--font-fun); font-weight: 600; font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-btc { color: var(--muted); font-variant-numeric: tabular-nums; }
.price-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; color: var(--muted); font-size: .92rem; }
.price-facts strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.price-source { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.price-card[hidden] { display: none; }
.tx-track { display: grid; gap: 6px; margin: 4px 0 10px; }
.tx-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tx-steps span { height: 8px; border-radius: 999px; background: var(--gold-soft); border: 1px solid var(--line); transition: background .3s; }
.tx-steps span.done { background: var(--gold); border-color: var(--gold-deep); }
.tx-done .tx-steps span.done { background: var(--ok); border-color: var(--ok); }
.tx-text { margin: 0; color: var(--muted); }
.price-card .price-more { align-self: center; white-space: nowrap; }
@media (max-width: 640px) {
  .price-card { grid-template-columns: minmax(0, 1fr); }
  .price-card .price-more { justify-self: start; }
}
.jackpot-card { border-color: var(--gold); }
/* oven */
.oven-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.oven-panel { text-align: center; position: sticky; top: 80px; }
.oven-count { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.oven-count small { display: block; font-size: .9rem; color: var(--muted); font-weight: 700; }
.oven-btn { position: relative; width: min(100%, 260px); margin: 16px auto; border: 0; border-radius: 28px; background: linear-gradient(#5b4a32, #3d3122); box-shadow: inset 0 -8px 0 rgba(0,0,0,.25), var(--shadow); cursor: pointer; padding: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.oven-btn:active, .oven-btn.pop { transform: scale(.96); }
.oven-btn .oven-window { display: block; width: 100%; height: 170px; border-radius: 16px; background: #1d150b; border: 4px solid #8a7351; position: relative; overflow: hidden; }
.oven-btn .oven-window::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,140,30,.9), rgba(255,90,0,.15) 60%, transparent 75%); }
.oven-btn .oven-window::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 14%; height: 36%; border-radius: 50% 50% 18% 18%; background: linear-gradient(#f6c15b, #c47d1a); }
.oven-btn .oven-label { color: #fff3d0; font-weight: 800; font-size: 1.1rem; }
.oven-btn .float { position: absolute; color: var(--gold-text); font-weight: 800; pointer-events: none; animation: floatup .9s ease-out forwards; transform: translate(-50%, -50%); }
.block-bonus { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); border: 1px solid var(--gold); font-weight: 700; }
.block-bonus.show { animation: fresh 1s ease-out; }
/* certificate */
.cert { --ink: #2b2416; position: relative; background: #fffdf5; border: 3px double var(--gold-deep); border-radius: 6px; padding: 28px 32px; max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 170px; gap: 24px; align-items: center; box-shadow: var(--shadow); }
.cert::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--gold); border-radius: 4px; pointer-events: none; }
.cert-title { font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-text); font-weight: 800; margin: 0 0 6px; }
.cert h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 14px; line-height: 1.15; }
.cert p { margin: 0 0 10px; line-height: 1.5; }
.cert .cert-addr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; word-break: break-all; font-weight: 700; }
.cert .cert-amount { font-size: 1.6rem; font-weight: 800; }
.cert-art { text-align: center; font-size: .72rem; color: var(--muted); }
.cert-art .garlic-art { border-radius: 14px; margin-bottom: 6px; }
.cert-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .7rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.cert-foot .mono { font-size: .68rem; }
.cert-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 16px 0 0; }
@media (max-width: 560px) {
  .cert { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .cert-art { order: -1; }
}
@media print {
  body:has(.cert) .cert, body:has(.cert) .cert * { visibility: visible; }
  .cert { position: absolute; left: 0; top: 0; right: 0; margin: 0; box-shadow: none; }
  .cert-actions { display: none; }
}
:root[data-theme="dark"] .balance-card .label { color: var(--gold-text); }
:root[data-theme="dark"] .balance-card::after { background: rgba(255, 210, 100, .06); }
.happy-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(120deg, #ffe08a, #f2b632); color: #2b2416; font-size: 1rem; box-shadow: 0 3px 0 #c98a0c; animation: wall-wait 2s ease-in-out infinite; }
/* /faucet/books/ */
.books-stats .stat-sub { min-height: 3lh; }
@media (max-width: 600px) {
  .books-stats .stat-sub { min-height: 2lh; }
}
/* ---------- faucet: one suggestion after a claim ---------- */
.faucet-next { display: grid; gap: 2px; margin: 14px 0 4px; padding: 12px 16px; border: 2px solid var(--gold); border-radius: 14px; background: var(--gold-soft); color: var(--ink); text-decoration: none; text-align: left; }
.faucet-next:hover { border-color: var(--gold-text); }
.faucet-next strong { color: var(--gold-text); font-size: 1.05rem; }
.faucet-next .label { margin: 0; }
.faucet-next .btn { justify-self: start; margin-top: 8px; }
/* ---------- /faucet/books/ ---------- */
.books-stats { margin-bottom: 20px; }
.books-in { list-style: none; padding: 0; margin: 0; }
.books-in li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.books-in li:first-child { border-top: 0; }
.books-plus { color: var(--ok); font-weight: 700; }
@media (max-width: 760px) {
  .books-stats { grid-template-columns: minmax(0, 1fr); }
}
.faucet-new { margin: -4px 0 8px; }
.price-head .card-title { margin: 0; }
/* ================= 2026-10-19: the certificate is paper: the same dark-on-cream colors in every theme ================= */
.cert { --ink: #2b2416; --muted: #6b5a43; --line: #e2d2b2; --gold-text: #8a5a00; color: var(--ink); }
.cert h2, .cert strong, .cert .cert-addr, .cert .cert-amount { color: var(--ink); }
/* ---------- faucet: the "Next step" box isn't a message pill (.messages strong pads every bold line) ---------- */
.messages .faucet-next strong { padding: 0; border-radius: 0; font-weight: 800; }
.messages .faucet-next #lotto-out strong { display: inline; font-weight: 700; font-size: inherit; color: var(--ink); }