* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--tg-theme-bg-color, #12161f);
    color: var(--tg-theme-text-color, #fff);
    min-height: 100vh;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    padding-bottom: 62px;
}

#app { width: 100%; max-width: 560px; margin: 0 auto; padding: 12px; }

#header { text-align: center; margin-bottom: 14px; }
#header h1 { font-size: 19px; margin-bottom: 5px; }
#user-line { display: flex; justify-content: center; gap: 16px; font-size: 14px; opacity: .9; }
#balance { color: #ffd54f; font-weight: 600; }

.screen.hidden { display: none; }
.section-title { font-size: 15px; font-weight: 700; margin: 16px 4px 8px; opacity: .9; }

.game-card, .promo-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--tg-theme-secondary-bg-color, #1d2432);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
    cursor: pointer; transition: transform .08s, opacity .2s;
    text-decoration: none; color: inherit;
}
.game-card:active, .promo-card:active { transform: scale(.98); opacity: .85; }
.game-card .emoji, .promo-card .emoji { font-size: 30px; }
.game-card .info, .promo-card .info { flex: 1; }
.game-card .name, .promo-card .name { font-weight: 700; font-size: 16px; }
.game-card .desc, .promo-card .desc { font-size: 12px; opacity: .7; margin-top: 2px; }
.game-card .best { font-size: 12px; opacity: .8; color: #ffd54f; }
.promo-card::after { content: "›"; font-size: 22px; opacity: .5; }

.btn {
    border: none; border-radius: 10px; padding: 10px 16px;
    background: var(--tg-theme-button-color, #3a7bd5);
    color: var(--tg-theme-button-text-color, #fff);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn:active { opacity: .8; }
.btn-small { padding: 7px 11px; font-size: 13px; }
.btn-ghost { background: var(--tg-theme-secondary-bg-color, #1d2432); }
.btn-block { display: block; width: 100%; margin-top: 4px; }

.top-block { background: var(--tg-theme-secondary-bg-color, #1d2432);
    border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
.top-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.top-title { font-weight: 700; }
.top-switch { display: flex; gap: 4px; }
.top-switch button {
    border: none; border-radius: 8px; padding: 4px 8px; font-size: 11px;
    background: rgba(255,255,255,.08); color: inherit; cursor: pointer;
}
.top-switch button.active { background: var(--tg-theme-button-color, #3a7bd5); color: #fff; }
.top-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.top-row .score { font-weight: 700; color: #ffd54f; }
.top-empty { font-size: 13px; opacity: .6; }

#profile-box { background: var(--tg-theme-secondary-bg-color, #1d2432);
    border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.7; }
#profile-box b { color: #ffd54f; }
.profile-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.profile-name { font-size: 18px; font-weight: 700; }

.badge-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tg-theme-secondary-bg-color, #1d2432);
    border: 2px solid transparent; border-radius: 10px;
    padding: 8px 10px; margin: 0 6px 8px 0; font-size: 15px; cursor: pointer; color: inherit;
}
.badge-btn.active { border-color: var(--tg-theme-button-color, #3a7bd5); }
.badge-btn small { opacity: .7; font-size: 11px; }

#game-topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#game-title { flex: 1; font-weight: 700; font-size: 16px; }
#game-best { font-size: 13px; color: #ffd54f; }

#game-container {
    background: var(--tg-theme-secondary-bg-color, #1d2432);
    border-radius: 14px; padding: 10px; min-height: 300px;
    display: flex; justify-content: center; align-items: center;
}

#tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; background: var(--tg-theme-secondary-bg-color, #161c28);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
#tabbar .tab {
    flex: 1; border: none; background: none; color: inherit;
    font-size: 13px; padding: 11px 0 10px; cursor: pointer; opacity: .65;
}
#tabbar .tab.active { opacity: 1; color: var(--tg-theme-button-color, #ffd54f); font-weight: 700; }

#toast {
    position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%);
    background: rgba(20, 26, 36, .96); border: 1px solid rgba(255,255,255,.12);
    color: #fff; padding: 10px 18px; border-radius: 12px;
    font-size: 14px; z-index: 50; transition: opacity .3s;
    max-width: 90vw; text-align: center;
}
#toast.hidden { opacity: 0; pointer-events: none; }