/* The ZAZA Faucet's window (js/faucet-ui.js): the card hunt window's website look (hunt.css: navy cards with a thin edge,
   Titan One names, gold for $ZAZA, brass studs on the corners), the painted faucet in its header. */
.fc-hero { display: flex; align-items: center; gap: 18px; margin: -22px -22px 14px; padding: 18px 48px 16px 22px; background: radial-gradient(120% 150% at 14% 50%, #4a22a8 0%, #22146a 36%, #0d1446 72%); border-bottom: 3px solid #8a6410; box-shadow: inset 0 -1px 0 #ffe066; }
.fc-art { flex: none; width: 92px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(255, 210, 63, 0.35)); }
.fc-hero h2 { margin: 0 0 4px; font-family: "Titan One", sans-serif; color: #ffd23f; text-shadow: 0 2px 0 #1b1424; }
.fc-hero .sub { margin: 0 0 8px; color: var(--hx-soft); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* The meter (owner: "show nicelly the % of faucets left"): a gold bar that drains as places are taken, red when little is left. */
.fc-meter { max-width: 340px; }
.fc-meter-top { display: flex; align-items: baseline; gap: 6px; }
.fc-meter-top b { font-family: "Titan One", sans-serif; font-weight: normal; font-size: 26px; line-height: 1; color: #ffd23f; text-shadow: 0 2px 0 #1b1424; }
.fc-meter-top span { font-size: 13px; color: var(--hx-soft); }
.fc-bar { position: relative; height: 12px; margin: 5px 0 4px; border-radius: 999px; background: rgba(13, 20, 70, 0.9); border: 1px solid var(--hx-edge); overflow: hidden; }
.fc-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(180deg, #fff3a0, #ffd23f 45%, #d99a14); box-shadow: 0 0 10px rgba(255, 210, 63, 0.55); }
.fc-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60% 100%); background-size: 220% 100%; animation: fcShine 2.6s linear infinite; }
.fc-meter.low .fc-bar i { background: linear-gradient(180deg, #ffb3a0, #ff6b4a 45%, #b8361b); box-shadow: 0 0 10px rgba(255, 107, 74, 0.5); }
.fc-meter small { font-size: 12px; color: var(--hx-soft); }
/* Today's claims all taken: the clock to 00:00 UTC. */
.fc-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0 0; padding: 7px 10px; border: 1px solid rgba(255, 210, 63, 0.45); border-radius: 10px; background: rgba(255, 210, 63, 0.08); }
.fc-day span { font-size: 13px; color: #fff3c4; }
.fc-day .fc-clock { font-family: "Titan One", sans-serif; font-weight: normal; font-size: 22px; line-height: 1; color: #ffd23f; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #1b1424; }
@keyframes fcShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .fc-bar i::after { animation: none; } }
.fc-chip { padding: 3px 10px; border-radius: 999px; background: rgba(13, 20, 70, 0.8); border: 1px solid var(--hx-edge); font-size: 13px; color: var(--hx-soft); }
.fc-chip b { font-family: "Titan One", sans-serif; font-weight: normal; color: #ffd23f; }
.fc-step { position: relative; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--hx-studs), var(--hx-card); border: 1px solid var(--hx-edge); }
.fc-step.ready { border-color: #ffd23f; box-shadow: 0 0 0 1px rgba(255, 210, 63, 0.35), 0 0 18px rgba(255, 210, 63, 0.18); }
.fc-step.done { border-color: #3f8f5c; }
.fc-step h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: "Titan One", sans-serif; font-weight: normal; font-size: 18px; color: #fff; }
.fc-step h3 span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffd23f; color: #1b1424; font-size: 14px; }
.fc-step p { margin: 4px 0; font-size: 14px; color: var(--hx-soft); }
/* What's left before a claim (owner, 2026-10-15: "make the pips quest and 15 mins player, things to checkout a lot more
   apparent and clear"): a row each, big enough to read at a glance. A number in a ring, the name in Titan One, the step or
   the minutes' bar under it, a button to it on the right; ticked = green ring with ✓ and Done; the next one to do has a
   gold edge. The Claim button waits under them, locked, until all three are ticked. */
.fc-todo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; }
.fc-todo-head b { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan, #7fdcff); }
.fc-todo-head span { padding: 2px 10px; border-radius: 999px; background: rgba(255, 210, 63, 0.14); border: 1px solid rgba(255, 210, 63, 0.45); font-size: 13px; font-weight: 700; color: #fff3a0; }
.fc-todo-head span.ok { background: rgba(63, 143, 92, 0.25); border-color: #3f8f5c; color: #9af0b4; }
.fc-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fc-todo li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(13, 20, 70, 0.75); border: 1px solid var(--hx-edge); }
.fc-todo li.now { border-color: #ffd23f; box-shadow: 0 0 0 1px rgba(255, 210, 63, 0.3); }
.fc-todo li.ok { background: rgba(30, 70, 52, 0.45); border-color: #3f8f5c; }
.fc-box { display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255, 210, 63, 0.7); font-family: "Titan One", sans-serif; font-size: 16px; line-height: 1; color: #ffd23f; }
.fc-todo li.ok .fc-box { background: #5fd678; border-color: #5fd678; font-family: inherit; font-size: 19px; font-weight: 900; color: #0b1a3a; }
.fc-todo-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fc-todo-main > b { font-family: "Titan One", sans-serif; font-weight: normal; font-size: 17px; line-height: 1.15; color: #fff; }
.fc-todo li.ok .fc-todo-main > b { color: #b9f2c3; }
.fc-todo-main small { font-size: 13px; line-height: 1.3; color: var(--hx-soft); }
.fc-todo-bar { position: relative; display: block; height: 10px; margin: 3px 0 1px; border-radius: 999px; background: rgba(5, 10, 40, 0.9); border: 1px solid var(--hx-edge); overflow: hidden; }
.fc-todo-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(180deg, #fff3a0, #ffd23f 45%, #d99a14); }
.fc-todo li.ok .fc-todo-bar i { background: linear-gradient(180deg, #b9f2c3, #5fd678 50%, #2f9a4c); }
.fc-todo-n { font-size: 14px; font-weight: 700; color: #fff; }
.fc-todo-n em { font-style: normal; color: #ffd23f; }
.fc-todo-tag { padding: 3px 10px; border-radius: 999px; background: rgba(95, 214, 120, 0.18); font-size: 13px; font-weight: 700; color: #9af0b4; }
.fc-do { padding: 6px 12px; font-size: 14px; white-space: nowrap; }
.fc-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.fc-locked .fc-claim { margin-top: 0; }
.fc-locked span { font-size: 13px; color: var(--hx-soft); }
@media (max-width: 520px) { .fc-todo li { gap: 6px 10px; padding: 9px 10px; } .fc-box { width: 28px; height: 28px; font-size: 14px; } .fc-todo-main > b { font-size: 16px; } .fc-todo li > .fc-do { grid-column: 2; justify-self: start; padding: 5px 12px; } }
.fc-claim { margin-top: 6px; font-size: 16px; }
.fc-done { color: #7fe0a0 !important; }
.fc-wait { color: #ffe27a !important; }
.fc-why { color: #ffcf99 !important; }
.fc-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(63, 143, 92, 0.18); border: 1px solid #3f8f5c; font-size: 14px; }
.fc-note.err { background: rgba(170, 60, 60, 0.18); border-color: #a04040; }
.fc-step a, .fc-note a, .fc-foot a { color: #ffd23f; }
.fc-foot { margin: 8px 0 0; font-size: 12px; color: var(--hx-soft); opacity: 0.85; }
/* Duplicate accounts (owner, 2026-10-16: "put a warning regarding duplicate accounts.. that those will be triggered"): a
   red-edged box under step 1, a "!" in a ring like the docs' warnings, the rule in Titan One. */
.fc-warn { display: flex; gap: 10px; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: rgba(150, 36, 24, 0.24); border: 1px solid #ff6b4a; border-left-width: 4px; }
.fc-warn-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #ff6b4a; font: 900 14px/1 sans-serif; color: #1b1424; }
.fc-warn > div { min-width: 0; }
.fc-warn b { font-family: "Titan One", sans-serif; font-weight: normal; font-size: 16px; color: #ffb3a0; }
.fc-warn p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #ffe0d6; }
@media (max-width: 520px) { .fc-hero { gap: 12px; padding: 14px 40px 12px 14px; } .fc-art { width: 64px; } }

/* The tutorial's first-quest page: the free $ZAZA after Pip's quest, a card of its own while the faucet pours for you
   (ui.js showTutorial; owner, 2026-10-14: "showcase better the claim 10,000 free $ZAZA, and be able to participate in real
   card hunt!"): the painted faucet on the window's purple glow, "Claim 10,000 free $ZAZA" in big gold Titan One, what it
   opens (the real card hunt), the way there as steps ticked green as you go, and a real card. */
.tut-free { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "art text card" "art ways card"; align-items: center; gap: 0 12px; max-width: 600px; margin: 12px auto 0; padding: 10px 14px 10px 8px; border-radius: 12px; text-align: left; background: radial-gradient(120% 170% at 6% 50%, #4a22a8 0%, #22146a 38%, #0d1446 76%); border: 2px solid #ffd23f; box-shadow: inset 0 0 0 1px rgba(255, 243, 160, 0.22), 0 0 18px rgba(255, 210, 63, 0.25), 0 4px 0 rgba(0, 0, 0, 0.3); }
.tut-free-art { grid-area: art; display: grid; place-items: center; width: 62px; }
.tut-free-art img { display: block; width: 46px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(255, 210, 63, 0.45)); }
.tut-free-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tut-free-text > small { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.tut-free-text > b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.05; color: #ffd23f; text-shadow: 0 2px 0 #1b1424; }
.tut-free-text > span { font-size: 15px; line-height: 1.2; color: #eef2ff; }
.tut-free-text em { font-style: normal; font-weight: 700; color: #fff3a0; }
.tut-free-steps { grid-area: ways; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; }
.tut-free-steps li { display: flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; background: rgba(13, 20, 70, 0.85); border: 1px solid rgba(255, 210, 63, 0.35); font-size: 13px; line-height: 1.2; color: #dfe6ff; }
.tut-free-steps li i { display: grid; place-items: center; flex: none; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.45); font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; }
.tut-free-steps li.done { border-color: rgba(95, 214, 120, 0.5); color: #b9f2c3; }
.tut-free-steps li.done i { background: var(--green); border-color: var(--green); color: #0b1a3a; }
.tut-free-steps li:last-child { border-color: #ffd23f; color: #fff3a0; }
.tut-free-now { grid-area: ways; margin: 4px 0 0; font-size: 14px; color: #fff3a0; }
.tut-free-card { grid-area: card; width: 52px; height: auto; border-radius: 4px; transform: rotate(6deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 210, 63, 0.35); }
/* Phones: the steps run under the faucet too, and the card stays out (room for the amount on one line). */
@media (max-width: 520px) {
  .tut-free { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art text" "ways ways"; gap: 0 8px; padding: 8px 10px 9px 6px; }
  .tut-free-art { width: 42px; }
  .tut-free-art img { width: 34px; }
  .tut-free-text > b { font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
  .tut-free-text > span { font-size: 13px; }
  .tut-free-steps { justify-content: center; }
  .tut-free-steps li { font-size: 12px; padding-right: 7px; }
  .tut-free-card, .tut-free-where { display: none; }
}
/* The faucet's row in the quest tracker (rpg/ui-quests.js), right under your quest, in the look of the note under the
   minimap it replaced (owner, 2026-10-14: "i like how the top one pops, but how they are connected.. so i would put the
   style of the top button but under the quest attached"): the faucet window's purple and gold with a gold edge of its own,
   🚰 "Try it free" in gold Titan One and the claims left on a pill, then the step. A claim ready: "Claim it now", glowing
   gold, with ➜ Go on it. */
.quest-track .qt-line.qt-faucet { background: linear-gradient(180deg, rgba(58, 30, 130, 0.94), rgba(13, 20, 70, 0.94)); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.85), inset 0 0 10px rgba(255, 210, 63, 0.2); }
.quest-track .qt-line.qt-faucet + .qt-line, .quest-track .qt-line + .qt-line.qt-faucet { border-color: transparent; }
.quest-track .qt-line.qt-faucet:first-child { border-top-left-radius: 7px; }
.quest-track .qt-line.qt-faucet:last-child { border-bottom-left-radius: 7px; }
/* Folded it's a cell of the strip, like the quest's beside it (owner, 2026-11-07: "format better"): the purple alone, no
   frame or pill of its own, the claims left in the quest count's letters. Ready, it still glows. */
.quest-track.folded .qt-line.qt-faucet { box-shadow: none; border-radius: 0; }
.quest-track.folded .qt-line.qt-faucet:first-child { border-radius: 10px 0 0 10px; }
.quest-track.folded .qt-faucet .qt-name b { margin: 0; padding: 0; background: none; font: inherit; color: #fff; }
.qt-faucet .qt-ico { font-size: 17px; }
.qt-faucet .qt-name { font-family: var(--display); font-size: 15px; color: #ffd23f; translate: none; }
.qt-faucet .qt-name b { display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 99px; background: rgba(255, 210, 63, 0.16); font-family: var(--ui-font); font-size: 13px; line-height: 1; color: #fff3a0; vertical-align: 1px; }
.qt-faucet .qt-name b:empty { display: none; }
.qt-faucet .qt-step { margin-top: 3px; font-size: 14px; line-height: 1.1; color: #eef2ff; }
.quest-track .qt-faucet .qt-main:hover .qt-step { color: #fff3a0; }
.quest-track .qt-line.qt-faucet.ready { animation: qtf-glow 1.6s ease-in-out infinite; }
@keyframes qtf-glow { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.85), inset 0 0 6px rgba(255, 210, 63, 0.35); } 50% { box-shadow: inset 0 0 0 2px #ffd23f, inset 0 0 16px rgba(255, 210, 63, 0.8); } }
@media (prefers-reduced-motion: reduce) { .quest-track .qt-line.qt-faucet.ready { animation: none; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) { .qt-faucet .qt-name { font-size: 13px; } .qt-faucet .qt-name b { font-size: 12px; } .qt-faucet .qt-step { font-size: 12px; } }