/* Small custom layer: Bootstrap handles layout, spacing, cards, navbar and controls. */
:root { --gold:#ffd044; --dark:#050810; }
body { background:radial-gradient(ellipse at top,#17140c 0%,#080b13 48%,#03060d 100%); color:#f6f7fb; min-height:100vh; }
.app { max-width:720px; }
.gold { color:var(--gold)!important; }
.brand { letter-spacing:-.4px; font-size:18px; }
.brand-icon { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,#ffe98d,#d99a2d); color:#211603; }
.level { color:var(--gold); background:#2c2414; border:1px solid #8e671d; padding:8px 13px; }
.reset-btn { width:38px; height:38px; color:#aab5c6; border-color:#30394a; }
.balance { font-size:46px; font-weight:800; line-height:1.1; }
.stat { background:#202735; color:#f1f3f8; padding:9px 13px; }
.coin-stage { width:min(84vw,360px); aspect-ratio:1; display:grid; place-items:center; position:relative; }
.orbit { position:absolute; border:1px solid #dca42a26; border-radius:50%; pointer-events:none; }
.orbit-1 { width:67%; height:67%; }
.orbit-2 { width:83%; height:83%; }
.orbit-3 { width:100%; height:100%; }
.coin { width:67%; aspect-ratio:1; border:0; border-radius:50%; padding:10px; position:relative; z-index:1; background:linear-gradient(145deg,#fff0a0,#ffcf4b 35%,#e9a82e 70%,#9c611c); box-shadow:inset 0 4px 3px #fff5b5,inset 0 -10px 15px #88501380,0 0 40px #ffb91f35; }
.coin:before { content:""; position:absolute; inset:5%; border:2px dashed #b67c20a8; border-radius:50%; }
.coin-center { position:absolute; inset:14%; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 25%,#ffdf70,#efb83e 66%,#d69528); color:#1d1507; box-shadow:inset 0 4px 10px #fff2a255,inset 0 -8px 13px #9b641e35; }
.coin-center i { font-size:clamp(36px,8vw,48px); margin-bottom:8px; }
.coin-center small { font-size:10px; font-weight:800; letter-spacing:4px; }
.coin.shake { animation:shake .38s ease; }
@keyframes shake { 0%,100%{transform:translateX(0) rotate(0) scale(1)} 20%{transform:translateX(-7px) rotate(-4deg) scale(1.03)} 40%{transform:translateX(7px) rotate(4deg)} 60%{transform:translateX(-5px) rotate(-3deg)} 80%{transform:translateX(3px) rotate(2deg)} }
.hint,.muted { color:#9ba7ba!important; }
.progress-wrap { max-width:420px; }
.progress { height:6px; background:#222b3a; }
.progress-bar { background:linear-gradient(90deg,#d79524,#ffe16b); }
.page { display:none; padding-top:12px; }
.page.active { display:block; animation:appear .22s ease; }
@keyframes appear { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.reward-card,.stat-card { background:#0d1523; color:#f6f7fb; border:1px solid #202b3e; border-radius:18px; }
.reward-icon,.avatar { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:#342911; color:var(--gold); font-size:22px; }
.avatar { width:72px; height:72px; border-radius:50%; font-size:28px; background:linear-gradient(145deg,#ffe27a,#d99928); color:#251a05; }
.timer { font-size:clamp(32px,8vw,48px); font-weight:800; letter-spacing:2px; }
.bottom-nav { background:rgba(5,10,21,.96); border-top:1px solid #1e2b40; backdrop-filter:blur(15px); }
.nav-item { color:#a9b5c8!important; flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 1px 10px; font-size:11px; border:0; background:transparent; position:relative; }
.nav-item i { font-size:19px; }
.nav-item.active { color:var(--gold)!important; }
.nav-item.active:after { content:""; position:absolute; bottom:3px; width:34px; height:3px; border-radius:5px; background:var(--gold); }
.nav-item.bump { animation:bump .32s ease; }
@keyframes bump { 40%{transform:translateY(-4px) scale(1.07)} 75%{transform:translateY(1px)} }
body.reduced-motion *,body.reduced-motion *:before { animation-duration:.01ms!important; }
body.reduced-motion .coin.shake { animation:tapPress .15s ease!important; }
@keyframes tapPress { 50%{transform:scale(.94)} }
@media(max-width:380px){ .nav-item{font-size:9px}.nav-item i{font-size:17px}.brand{font-size:16px}.balance{font-size:40px} }