/* PingMePaisa: the app's own world. A plum night, cream paper, clay, brass and marigold; Rozha One for display, Hind for text.
   Colours from the app's ui/theme/Theme.kt and launcher icon. */
@font-face { font-family: "Rozha One"; src: url("../fonts/rozha_one.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Hind"; src: url("../fonts/hind_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hind"; src: url("../fonts/hind_semibold.ttf") format("truetype"); font-weight: 600 900; font-display: swap; }

:root {
  --plum: #2B0F2A; --plum2: #4A1C47; --clay: #C65C34; --clay-light: #EE9A6A; --cream: #F7E6CF; --marigold: #F3A712; --brass: #E3B23C; --teal: #22B3A6; --violet: #5B4BC4;
  --bg: #1A0819; --bg2: #2B0F2A; --fg: #F7E6CF; --fg2: rgba(247, 230, 207, .76); --fg3: rgba(247, 230, 207, .5);
  --line: rgba(243, 167, 18, .18); --card: rgba(247, 230, 207, .05);
  --accent: #F3A712; --accent-ink: #2B0F2A; --accent2: #22B3A6;
  --display: "Rozha One", Georgia, serif; --body: "Hind", system-ui, sans-serif; --radius: 26px;
}
body { background: radial-gradient(1200px 700px at 80% -10%, rgba(198, 92, 52, .22), transparent 60%), var(--bg); }
.hl { color: var(--marigold); }
.title { font-size: clamp(56px, 8.4vw, 132px); letter-spacing: -.01em; }
.tagline { font-family: var(--body); font-weight: 600; letter-spacing: -.01em; }
.eyebrow::before { background: linear-gradient(90deg, var(--marigold), var(--clay)); }
.btn { background: linear-gradient(180deg, #F9BE3F, var(--marigold) 60%, #D48C08); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hero-shade { background: linear-gradient(90deg, rgba(26, 8, 25, .92) 0%, rgba(26, 8, 25, .45) 44%, transparent 68%), linear-gradient(0deg, var(--bg) 0%, transparent 26%); }
@media (max-width: 900px) { .hero-shade { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(26, 8, 25, .85) 56%, var(--bg) 100%); } }

/* the saved counter beside the scene: counts up as coins drop into the gullak */
.saved { margin-top: 30px; display: inline-flex; align-items: baseline; gap: 12px; padding: 12px 20px; border-radius: 18px; background: rgba(43, 15, 42, .7); border: 1px solid rgba(227, 178, 60, .35); }
.saved span { font: 600 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); }
.saved b { font: 400 30px/1 var(--display); color: var(--brass); font-variant-numeric: tabular-nums; min-width: 4.5em; }
html:not(.js) .saved { display: none; }

/* features: brass-edged cards on a guilloche */
.feat { background: radial-gradient(120% 80% at 0% 0%, rgba(198, 92, 52, .2), transparent 60%), linear-gradient(180deg, rgba(247, 230, 207, .06), rgba(247, 230, 207, .02)); border-color: rgba(227, 178, 60, .22); }
.feat:hover { border-color: rgba(243, 167, 18, .5); }
.feat-n { padding: 7px 12px; border-radius: 999px; background: rgba(243, 167, 18, .14); letter-spacing: .14em; text-transform: uppercase; font-size: 11.5px; }

/* three worlds */
.world-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.world { position: relative; padding: 26px 26px 30px; border-radius: 30px; border: 1px solid var(--line); overflow: hidden; }
.world > * { position: relative; }
.w-kicker { font: 600 13px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg3); margin: 20px 0 10px; }
.world h3 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 10px; }
.world p:last-child { color: var(--fg2); }
.w-art { height: 190px; border-radius: 22px; display: grid; place-items: center; position: relative; overflow: hidden; }
.w-haath { background: linear-gradient(180deg, rgba(34, 179, 166, .12), transparent 60%); }
.w-haath .w-art { background: radial-gradient(circle, #F7E6CF 0 30%, #EBD4B2 31% 100%); }
.rosette { position: absolute; width: 150px; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(34, 179, 166, .55) 0 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(circle, transparent 38%, #000 39% 70%, transparent 71%); mask: radial-gradient(circle, transparent 38%, #000 39% 70%, transparent 71%); animation: spin 40s linear infinite; }
.rosette.r2 { width: 110px; background: repeating-conic-gradient(rgba(91, 75, 196, .6) 0 3deg, transparent 3deg 12deg); animation-direction: reverse; animation-duration: 26s; }
.w-haath .w-art b { font: 400 54px/1 var(--display); color: #1F6F68; position: relative; }
.w-kharcha { background: linear-gradient(180deg, rgba(91, 75, 196, .14), transparent 60%); }
.w-kharcha .w-art { background: linear-gradient(180deg, #2F2A6E, #1C1846); }
.matka { position: relative; width: 120px; height: 120px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, var(--clay-light), var(--clay) 55%, #8A3216); overflow: hidden; box-shadow: inset -10px -14px 24px rgba(0, 0, 0, .35); }
.matka::before { content: ""; position: absolute; left: 30%; right: 30%; top: -6px; height: 20px; border-radius: 6px; background: #8F3C1F; z-index: 2; }
.water { position: absolute; left: -20%; right: -20%; bottom: 0; height: 58%; background: linear-gradient(180deg, rgba(127, 200, 255, .9), rgba(34, 179, 166, .9)); border-radius: 45% 48% 0 0; animation: slosh 4s ease-in-out infinite; mix-blend-mode: screen; opacity: .8; }
.w-bachat { background: linear-gradient(180deg, rgba(198, 92, 52, .16), transparent 60%); }
.w-bachat .w-art { background: radial-gradient(circle at 50% 120%, rgba(243, 167, 18, .35), transparent 60%), #2B0F2A; }
.pot { position: relative; width: 130px; height: 110px; border-radius: 50% 50% 44% 44% / 56% 56% 44% 44%; background: radial-gradient(circle at 32% 28%, var(--clay-light), var(--clay) 50%, #8A3216 100%); box-shadow: inset -12px -14px 26px rgba(0, 0, 0, .35); margin-top: 30px; }
.pot::before { content: ""; position: absolute; inset: 40% 6% auto; height: 16px; background: repeating-linear-gradient(90deg, var(--marigold) 0 12px, var(--teal) 12px 24px); border-radius: 8px; opacity: .9; }
.pot::after { content: ""; position: absolute; left: 38%; right: 38%; top: 6px; height: 7px; border-radius: 4px; background: #3A130F; }
.coin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0A8, var(--brass) 45%, #A8751A); box-shadow: 0 0 0 2px #8A5B12 inset; top: 18px; animation: drop 2.6s cubic-bezier(.5, 0, .7, .4) infinite; }
.coin.c2 { animation-delay: 1.3s; }
@keyframes drop { 0% { transform: translate(-30px, -40px) rotate(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(0, 46px) rotate(260deg); opacity: 1; } 75%, 100% { transform: translate(0, 50px) scale(.4); opacity: 0; } }
@keyframes slosh { 50% { transform: translateX(12%) rotate(4deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .world-row { grid-template-columns: 1fr; } }

/* steps, promise, early access in the app's materials */
.step b { background: radial-gradient(circle at 35% 30%, #FFF0A8, var(--brass) 45%, #A8751A); color: #4A2A05; border: 0; box-shadow: inset 0 0 0 4px #8A5B12, 0 10px 30px rgba(227, 178, 60, .25); }
.promise { background: linear-gradient(90deg, var(--clay), #A8461F); color: var(--cream); }
.early { background: radial-gradient(90% 120% at 0% 0%, rgba(198, 92, 52, .35), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(34, 179, 166, .18), transparent 70%), var(--bg2); border-color: rgba(227, 178, 60, .3); }
.fam { background: rgba(247, 230, 207, .04); }

@media (prefers-reduced-motion: reduce) { .rosette, .water, .coin { animation: none; } }