:root{
  --page:#050505;
  --shell:rgba(13,13,18,0.95);
  --text:#f6f7fb;
  --muted:#b0b5c9;
  --accent:#7de2d1;
  --accent-strong:#ffb347;
  --stroke:rgba(255,255,255,0.08);
  --card:rgba(20,20,28,0.9);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  background:var(--page);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.mobile-shell{width:100%;max-width:420px;min-height:100vh;background:linear-gradient(180deg,rgba(18,18,25,0.9),rgba(5,5,7,0.95));border-left:1px solid rgba(255,255,255,0.03);border-right:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column}
.mobile-app{flex:1;padding:24px 20px 80px;display:flex;flex-direction:column;gap:1rem}
.card{border:1px solid var(--stroke);border-radius:24px;background:var(--card);padding:1.5rem}
.app-header{display:flex;justify-content:space-between;align-items:center}
.app-header h1{margin:0;font-size:1.4rem}
.app-header p{margin:0.3rem 0 0;color:var(--muted)}
.logout-link{color:var(--accent);text-decoration:none}
/* Games grid */
.games-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}
.game-card{display:flex;flex-direction:column;align-items:center;padding:.6rem;border:1px solid var(--stroke);border-radius:12px;background:rgba(255,255,255,0.02);text-decoration:none;color:inherit;cursor:pointer;transition:all .2s}
.game-card:hover{background:rgba(125,226,209,0.08);border-color:var(--accent);transform:translateY(-2px)}
.game-logo{width:60px;height:60px;object-fit:cover;border-radius:8px;background:rgba(0,0,0,0.2);margin-bottom:.3rem}
.game-name{font-size:.75rem;font-weight:600;text-align:center;color:var(--text);line-height:1.2}
/* Price list */
.price-item{border:1px solid var(--stroke);border-radius:12px;background:rgba(255,255,255,0.02);margin-bottom:.7rem;display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;cursor:pointer;transition:all .2s}
.price-item.selected,.price-item:hover{background:rgba(125,226,209,0.08);border-color:var(--accent);box-shadow:0 0 10px rgba(125,226,209,0.04)}
.price-info h3{margin:0 0 .3rem;font-size:.95rem;font-weight:600;color:var(--accent)}
.price-amount{ text-align:right }
.price-value{font-size:1.1rem;font-weight:600;color:var(--accent-strong);margin:0}
.price-unit{font-size:.8rem;color:var(--muted);margin:0}
.buy-btn{margin-top:1.2rem;width:100%;padding:.95rem;border:none;border-radius:16px;background:linear-gradient(120deg,var(--accent-strong),var(--accent));color:#050505;font-weight:600;cursor:pointer;font-size:.95rem}
.buy-btn:disabled{opacity:.5;cursor:not-allowed}
.selected-price-info{background:linear-gradient(135deg,rgba(125,226,209,0.08),rgba(255,179,71,0.06));border-radius:12px;padding:.7rem 1rem;margin-bottom:1rem;font-size:.9rem;color:var(--accent)}
.order-form{margin-top:1.5rem;padding:1.2rem;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04)}
.form-field label{display:block;font-weight:600;margin-bottom:.35rem;color:var(--muted);font-size:.9rem}
.form-field input, .form-field textarea, select{width:100%;padding:.9rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);font-size:.97rem}
.form-field input:focus, select:focus, textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(125,226,209,0.06);transform:translateY(-1px);background:rgba(255,255,255,0.03)}
.form-field .hint{font-size:.78rem;color:var(--muted);margin-top:.35rem}
.notice-box{padding:.85rem 1rem;border-radius:12px;margin-bottom:1rem;border:1px solid}
.notice-box.error{background:rgba(255,138,138,0.08);border-color:rgba(255,138,138,0.28);color:#ff9d9d}
.notice-box.success{background:rgba(125,226,209,0.08);border-color:rgba(125,226,209,0.28);color:var(--accent)}
.status-badge{display:inline-block;padding:.3rem .8rem;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.status-badge.pending{background:rgba(255,179,71,0.2);color:var(--accent-strong);border:1px solid rgba(255,179,71,0.28)}
.status-badge.processing{background:rgba(125,226,209,0.2);color:var(--accent);border:1px solid rgba(125,226,209,0.4)}
.status-badge.completed{background:rgba(125,226,209,0.3);color:var(--accent);border:1px solid rgba(125,226,209,0.5)}
.status-badge.failed{background:rgba(255,138,138,0.2);color:#ff9d9d;border:1px solid rgba(255,138,138,0.4)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(10,10,14,0.95);border-top:1px solid rgba(255,255,255,0.08);z-index:10;min-height:48px} 
.nav-item{flex:1;text-align:center;padding:.35rem 0;color:var(--muted);font-size:.85rem;display:flex;flex-direction:column;align-items:center}
.nav-item svg{width:16px;height:16px;margin-bottom:3px}
.nav-item span{display:block;font-size:0.62rem;letter-spacing:0.08em}
.nav-item.active{color:var(--accent)}
.empty-state{text-align:center;padding:2rem 1rem;color:var(--muted)}
.admin-note{margin-top:.8rem;padding:.7rem;background:rgba(125,226,209,0.08);border-radius:12px;font-size:.85rem;color:var(--muted);border-left:3px solid var(--accent)}
@media(max-width:420px){.games-grid{grid-template-columns:1fr 1fr;gap:.8rem}.game-logo{width:70px;height:70px}}
@media(max-width:360px){.app-header h1{font-size:1.25rem}.card{padding:1rem;border-radius:18px}}

/* topup.php — moved from inline styles */
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--muted);margin:0}
form{display:flex;flex-direction:column;gap:1rem}
label{display:block;font-weight:500;margin-bottom:.35rem}
input,textarea{width:100%;border-radius:16px;border:1px solid var(--stroke);background:#0b0b11;color:var(--text);padding:.85rem 1rem;font-size:1rem}
textarea{resize:vertical;min-height:90px}
button{border:none;border-radius:16px;padding:.95rem 1.25rem;font-size:1rem;font-weight:600;background:linear-gradient(120deg,var(--accent-strong),var(--accent));color:#050505;cursor:pointer}
.notice{border-radius:16px;padding:.85rem 1rem;border:1px solid rgba(255,255,255,0.1);margin-bottom:.6rem}
.notice.error{color:#ff9d9d;border-color:rgba(255,138,138,0.4)}
.banks-list{display:flex;flex-direction:column;gap:1rem}
.bank-item{padding:1rem;border:1px solid var(--stroke);border-radius:12px;background:rgba(255,255,255,0.02)}
.bank-item h3{margin:0 0 .5rem 0;font-size:1rem}
.bank-item p{margin:.25rem 0;font-size:.9rem;color:var(--muted)}
.orders-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.8rem}
.order-item{padding:.75rem .9rem;border-radius:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04)}
.order-head{display:flex;justify-content:space-between;font-weight:600}
.order-meta{display:flex;justify-content:space-between;font-size:.85rem;margin-top:.4rem;color:var(--muted)}
.status-tag{border-radius:999px;padding:.1rem .75rem;font-size:.75rem;text-transform:capitalize;border:1px solid rgba(255,255,255,0.1)}
.status-tag.approved{color:var(--accent);border-color:rgba(125,226,209,0.4)}
.status-tag.pending{color:var(--accent-strong);border-color:rgba(255,179,71,0.4)}
.status-tag.rejected{color:#ff9d9d;border-color:rgba(255,138,138,0.4)}
.helper-links{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-top:.5rem}
.helper-links a{color:var(--accent);text-decoration:none;font-weight:500}

@media(max-width:360px){input,textarea,button{font-size:.95rem;padding:.8rem .9rem}.order-item{padding:.65rem .75rem}.helper-links{flex-direction:column;gap:.5rem;text-align:center}.bottom-nav{font-size:.75rem}}

/* home.php — moved from inline styles */
.hero-card{background:linear-gradient(135deg,rgba(125,226,209,0.15),rgba(255,179,71,0.15));border:none}
.primary-btn{margin-top:1rem;display:inline-flex;justify-content:center;align-items:center;width:100%;border:none;border-radius:16px;padding:.9rem 1.2rem;background:linear-gradient(120deg,var(--accent-strong),var(--accent));color:#050505;font-weight:600;text-decoration:none}
.details-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem;color:var(--muted)}
.card-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.8rem}
.card-title{margin:0;font-size:1.1rem}
.link-inline{font-size:.85rem;color:var(--accent);text-decoration:none}
.notification-card{background:linear-gradient(135deg,rgba(125,226,209,0.1),rgba(255,179,71,0.08));border-color:rgba(125,226,209,0.3)}
.notification-item{padding:.75rem .9rem;border-radius:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04)}
.notif-title{font-weight:600;margin:0 0 .3rem;color:var(--accent)}
.notif-body{font-size:.9rem;margin:.3rem 0;color:var(--muted);line-height:1.4}
.notif-time{font-size:.75rem;color:rgba(255,255,255,0.4);margin-top:.3rem}
.games-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.game-thumbnail{display:flex;flex-direction:column;align-items:center;padding:.6rem;border:1px solid var(--stroke);border-radius:12px;background:rgba(255,255,255,0.02);text-decoration:none;color:inherit;cursor:pointer;transition:all .2s}
.game-thumbnail:hover{background:rgba(125,226,209,0.1);border-color:var(--accent);transform:translateY(-2px)}
.game-thumb-img{width:60px;height:60px;object-fit:cover;border-radius:8px;background:rgba(0,0,0,0.2);margin-bottom:.3rem}
.game-thumb-name{font-size:.7rem;font-weight:600;text-align:center;color:var(--text);line-height:1.2}
.see-all-games{color:var(--accent);text-decoration:none;font-size:.8rem;font-weight:600}
.see-all-games:hover{opacity:.8}

@media(max-width:420px){.app-header{flex-wrap:wrap}.balance{font-size:2rem}.games-grid{grid-template-columns:1fr 1fr;gap:.8rem}.game-thumb-img{width:70px;height:70px}.card{padding:1.25rem}}
@media(max-width:360px){.balance{font-size:1.75rem}.games-grid{gap:.5rem}.game-thumb-img{width:60px;height:60px}.game-thumb-name{font-size:.65rem}}

/* auth (login/signup) */
.backdrop{position:fixed;inset:0;background:radial-gradient(circle at top right,rgba(125,226,209,0.2),transparent 45%),radial-gradient(circle at bottom left,rgba(120,141,255,0.18),transparent 35%),linear-gradient(135deg,var(--page),var(--shell));z-index:-1}
main.auth-shell{width:min(1100px,100%);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.info-card,.auth-card{border:1px solid var(--stroke);border-radius:24px;background:rgba(16,16,20,0.95);padding:2.5rem}
.info-card{background:rgba(20,20,28,0.95);display:flex;flex-direction:column;gap:1rem}
.info-card h1{font-size:2rem;margin:0}
.info-card p{color:var(--muted);margin:0;line-height:1.6}
.info-card .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;color:var(--accent)}
.secondary-link{color:var(--text);text-decoration:none;font-weight:500}
.secondary-link:hover{color:var(--accent)}
.auth-card h2{margin-top:0;font-size:2rem}
.auth-card form, form.auth-form{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
label{font-weight:500}
input{border-radius:12px;border:1px solid var(--stroke);background:#0a0a0f;color:var(--text);padding:.85rem 1rem;font-size:1rem}
input:focus{outline:2px solid var(--accent);outline-offset:2px}
button{border:none;border-radius:999px;padding:.95rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;background:linear-gradient(120deg,var(--accent-strong),var(--accent));color:#050505;transition:transform 200ms ease,box-shadow 200ms ease}
button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(125,226,209,0.35)}
.notice{padding:.9rem 1.1rem;border-radius:12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:var(--muted);margin:0 0 1rem}
.notice.error{color:#ff8a8a;border-color:rgba(255,138,138,0.5)}
@media(max-width:768px){body{padding:1.5rem}.info-card,.auth-card{padding:1.75rem}main.auth-shell{grid-template-columns:1fr}.info-card h1{font-size:2rem}}
@media(max-width:480px){body{padding:1rem}.info-card,.auth-card{padding:1.5rem}.info-card h1{font-size:1.75rem}h2{font-size:1.35rem}input,button{font-size:.95rem}}

/* history.php — tabs & order details */
.tab-container{margin-bottom:1.5rem}
.tab-nav{display:flex;background:rgba(255,255,255,0.05);border-radius:12px;padding:.25rem;margin-bottom:1.5rem}
.tab-button{flex:1;padding:.75rem 1rem;border:none;background:transparent;color:var(--muted);font-size:.9rem;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s ease;text-align:center}
.tab-button.active{background:var(--accent);color:#020205;font-weight:600}
.tab-button:hover:not(.active){background:rgba(255,255,255,0.1);color:var(--text)}
.tab-content{display:none}
.tab-content.active{display:block}
.order-note{margin-top:.6rem;font-size:.85rem;color:var(--muted)}
.proof-link{margin-top:.6rem;display:inline-flex;color:var(--accent);font-size:.85rem;text-decoration:none}

/* profile.php specifics */
.pill{display:inline-flex;padding:.35rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,0.08);font-size:.85rem;color:var(--muted)}
.stat-grid{display:flex;gap:.8rem}
.stat-card{padding:.95rem;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid var(--stroke);display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.amount{font-size:1.4rem;font-weight:600;margin:.35rem 0}
.info-row{display:flex;justify-content:space-between;gap:1rem;align-items:center}

/* game orders / games page helpers */
.order-form{margin-top:1.5rem;padding:1.2rem;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04)}
.form-field label{display:block;font-weight:600;margin-bottom:.35rem;color:var(--muted);font-size:.9rem}
.form-field input,.form-field textarea,select{width:100%;padding:.9rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);font-size:.97rem}
.form-field input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(125,226,209,0.06);transform:translateY(-1px);background:rgba(255,255,255,0.03)}
.form-field .hint{font-size:.78rem;color:var(--muted);margin-top:.35rem}

/* status badges (reused across pages) */
.status-tag,.status-badge{border-radius:999px;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:capitalize;border:1px solid rgba(255,255,255,0.1)}
.status-tag.approved,.status-badge.completed{color:var(--accent);border-color:rgba(125,226,209,0.4)}
.status-tag.pending,.status-badge.pending{color:var(--accent-strong);border-color:rgba(255,179,71,0.4)}
.status-tag.rejected,.status-badge.failed{color:#ff9d9d;border-color:rgba(255,138,138,0.4)}

@media(max-width:420px){.mobile-app{padding:20px 16px 80px}.games-grid{grid-template-columns:1fr 1fr;gap:.8rem}}
@media(max-width:360px){.mobile-app{padding:16px 12px 80px;gap:1.2rem}.order-item{padding:.65rem .75rem}.bottom-nav{font-size:.75rem}}

/* Admin panel (Android/Material mobile style) */
.admin-root {
  --bg: #020205;
  --bg-accent: #0b0b12;
  --card: rgba(16, 16, 22, 0.95);
  --text: #f6f6f8;
  --subtle: #9da2c4;
  --accent: #7de2d1;
  --accent-strong: #ffb347;
  --border: rgba(255,255,255,0.08);
}
.admin-root, .admin-root * { box-sizing: border-box; }
.admin-root body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Roboto', 'Space Grotesk', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 5rem;
}
.admin-root .backdrop {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(125,226,209,0.2), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,179,71,0.2), transparent 45%),
    linear-gradient(135deg, var(--bg), var(--bg-accent));
  z-index: -1;
}
.admin-root header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.admin-root nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--bg-accent); border-top: 1px solid var(--border); z-index: 10; }
.admin-root nav a { flex: 1; text-align: center; padding: 0.5rem 0; text-decoration: none; color: var(--text); display: flex; flex-direction: column; align-items: center; font-size: 0.85rem; transition: color 0.2s; }
.admin-root nav a svg { width: 20px; height: 20px; margin-bottom: 2px; }
.admin-root nav a span { display: block; font-size: 0.7rem; letter-spacing: 0.08em; }
.admin-root nav a:hover, .admin-root nav a.active { color: var(--accent); }
.admin-root .card { border: 1px solid var(--border); border-radius: 24px; background: var(--card); padding: 1.75rem; }
.admin-root form { display: grid; gap: 1.2rem; }
.admin-root label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--subtle); margin-bottom: 0.5rem; display: block; }
.admin-root input, .admin-root select, .admin-root textarea { width: 100%; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,0.2); color: var(--text); font-size: 1rem; font-family: inherit; }
.admin-root input:focus, .admin-root select:focus, .admin-root textarea:focus { outline: none; border-color: var(--accent); }
.admin-root button { border: none; border-radius: 999px; padding: 0.9rem 1.5rem; font-size: 1rem; cursor: pointer; background: linear-gradient(120deg, var(--accent), var(--accent-strong)); color: #020205; font-weight: 600; margin-top: 0.5rem; transition: opacity 0.2s; }
.admin-root button:hover { opacity: 0.9; }
.admin-root .notice { padding: 1rem; border-radius: 12px; border: 1px solid rgba(125,226,209,0.4); background: rgba(125,226,209,0.1); color: var(--accent); margin-bottom: 1.5rem; }
.admin-root .error { border-color: rgba(255,138,138,0.4); background: rgba(255,138,138,0.1); color: #ff9d9d; }
.admin-root table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.admin-root th { background: rgba(0,0,0,0.3); padding: 1rem; text-align: left; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--subtle); border-bottom: 1px solid var(--border); }
.admin-root td { padding: 1rem; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.admin-root tr:hover { background: rgba(125,226,209,0.05); }
.admin-root .action-btn { padding: 0.5rem 1rem; margin-right: 0.5rem; font-size: 0.85rem; border: none; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-block; color: #020205; font-weight: 600; }
.admin-root .btn-delete { background: rgba(255,138,138,0.8); }
.admin-root .btn-delete:hover { background: rgba(255,138,138,1); }
.admin-root h2 { margin-top: 0; color: var(--accent); }
.admin-root .empty-state { text-align: center; padding: 2rem; color: var(--subtle); }
.admin-root .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.admin-root .form-row.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .admin-root .form-row.three { grid-template-columns: 1fr; } }
.admin-root .price-display { background: rgba(125,226,209,0.1); padding: 0.5rem 1rem; border-radius: 8px; color: var(--accent-strong); font-weight: 600; }
.admin-root .grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.admin-root .history-list { list-style: none; padding: 0; margin: 0; max-height: 500px; overflow-y: auto; }
.admin-root .history-item { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.admin-root .history-item:last-child { border-bottom: none; }
.admin-root .h-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.admin-root .h-user { font-weight: 600; color: var(--accent); }
.admin-root .h-date { font-size: 0.8rem; color: var(--subtle); }
.admin-root .h-title { font-weight: 500; margin-bottom: 0.25rem; }
.admin-root .h-body { font-size: 0.9rem; color: var(--subtle); line-height: 1.4; }
.admin-root .form-group { display: grid; gap: 0.5rem; }
.admin-root .pill { display: inline-flex; padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 0.85rem; color: var(--subtle); }
.admin-root .actions { display: flex; gap: 0.5rem; }
.admin-root .btn-small { padding: 0.4rem 0.8rem; font-size: 0.8rem; border-radius: 6px; }
.admin-root .btn-edit { background: var(--accent); color: var(--bg); }
.admin-root .btn-delete { background: #ff9d9d; color: var(--bg); }
.admin-root .table-container { overflow-x: auto; }
.admin-root .logo-img { max-width: 50px; max-height: 50px; border-radius: 8px; }

/* Android / Material-inspired mobile adjustments */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

@media (max-width:480px) {
  :root{
    --material-primary:#6200EE;
    --material-primary-variant:#3700B3;
    --material-secondary:#03DAC6;
    --material-surface:rgba(255,255,255,0.02);
    --material-on-primary:#ffffff;
  }

  /* use Roboto on mobile for Android feel */
  body, input, button, textarea, select { font-family: 'Roboto', 'Space Grotesk', sans-serif; }

  /* slightly flatter radii and material elevation */
  .info-card, .auth-card, .card, .game-card, .price-item, .order-item { border-radius:12px; box-shadow: 0 6px 18px rgba(2,6,23,0.45); }

  /* buttons: material colored, shorter radius on mobile */
  button, .primary-btn, .buy-btn { border-radius:12px; background: linear-gradient(120deg,var(--material-primary-variant),var(--material-primary)); color:var(--material-on-primary); box-shadow: 0 8px 20px rgba(98,0,238,0.18); }
  button:active, .nav-item:active { transform: translateY(0); opacity: .94; }

  /* app shell padding tuned for phones */
  .mobile-app { padding: 16px 14px 84px; gap: .9rem }

  /* bottom nav: larger icons and clearer labels like Android */
  .bottom-nav{min-height:56px;padding:6px 6px;background:linear-gradient(180deg,rgba(6,6,10,0.98),rgba(8,8,12,0.99));border-top:1px solid rgba(255,255,255,0.04)}
  .nav-item{padding:.45rem 0;font-size:.9rem}
  .nav-item svg{width:22px;height:22px;margin-bottom:4px}
  .nav-item span{font-size:.72rem;letter-spacing:0.04em}
  .nav-item.active{color:var(--material-secondary);}

  /* elevated header look */
  .app-header{padding:.35rem .5rem;border-radius:12px;background:var(--material-surface);box-shadow:0 6px 12px rgba(2,6,23,0.35)}

  /* form inputs slightly reduced radius and fuller hit area */
  input, textarea, select{border-radius:10px;padding:.85rem 1rem}

  /* auth headings scaled for phones */
  .auth-card h2{font-size:1.4rem}
  .info-card h1{font-size:1.6rem}

  /* subtle ripple-like active effect for interactive elements */
  .game-card:active, .price-item:active, button:active { filter:brightness(.98); }
}