/* Dark mode game UI consolidated */
:root{
  --bg1: #071025;
  --bg2: #0b1220;
  --accent: #ffb86b;
  --accent2: #7afcff;
  --card-bg: rgba(255,255,255,0.03);
  --muted: rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
body{ margin:0; padding:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(180deg, var(--bg1), var(--bg2)); color:#eef2ff; padding-bottom:90px;}

/* header */
.app-header{ position:fixed; top:0; left:0; right:0; height:64px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,0.03); z-index:1000; padding:8px 14px;}
.app-main{ margin-top:78px; padding-bottom:20px; }

.avatar{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#ffd27a,#ff9a9a); color:#112; font-weight:700; font-size:18px; }
.balance{ font-weight:700; font-size:16px; display:flex; align-items:center; gap:6px; }
.coin{ transform: translateY(2px); }

/* hero card */
.hero-card{ background: var(--card-bg); border-radius:14px; padding:16px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.hero-coin{ font-size:42px; }
.logo{ width:100px; height:100px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:40px; background: linear-gradient(135deg,#ffd27a,#ff9a9a); color:#112; box-shadow: 0 10px 30px rgba(255,166,96,0.12); }

.small-note{ font-size:13px; color:var(--muted); margin-top:6px; }

/* buttons */
.btn-game{ background: linear-gradient(90deg,#ff9a9a,#ffd27a); color:#112; font-weight:700; border:none; padding:10px 14px; border-radius:12px; cursor:pointer; box-shadow: 0 8px 24px rgba(255,154,154,0.08); }
.btn-game:active{ transform: translateY(1px); }

/* action grid */
.action-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-top:8px; }
.card-action{ background: rgba(255,255,255,0.02); border-radius:12px; padding:14px; text-align:center; transition: transform .18s ease, box-shadow .18s; cursor:pointer; }
.card-action:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 40px rgba(0,0,0,0.6); }
.card-action .emoji{ font-size:28px; display:block; margin-bottom:8px; }
.fw-bold{ font-weight:700; color:#fff; }

/* modal adjustments */
.modal-content{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; border:none; }
.modal-header .btn-close{ filter: invert(1); }

/* footer */
.app-footer{ position:fixed; bottom:0; left:0; right:0; height:64px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-top:1px solid rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:space-around; z-index:1000; }
.footer-link{ color:#dbeafe; text-decoration:none; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.footer-link div:first-child{ font-size:20px; }

/* responsive */
@media(max-width:480px){
  .logo{ width:86px; height:86px; font-size:34px }
  .hero-coin{ font-size:32px }
  .btn-game{ font-size:14px; padding:8px 10px }
  .action-grid{ grid-template-columns: repeat(1,1fr); }
}