@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root { --navy: #0e122f; --panel: #1a2e73; --panel-light: #233f8e; --blue: #49c5ff; --cyan: #6df5ff; --pink: #5888e8; --yellow: #ffda36; --text: #ffffff; --muted: #a8d1f2; --line: rgba(88, 136, 232, .4); --violet: #6a78ef; --live: #0fde00; --sans: 'Manrope', sans-serif; --display: 'Barlow Condensed', sans-serif; --mono: 'DM Mono', monospace; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); background: #080b20; font-family: var(--sans); } button, input, select { font: inherit; } button { color: inherit; border: 0; cursor: pointer; } button, a { -webkit-tap-highlight-color: transparent; } .app-shell { min-height: 100vh; max-width: 680px; margin: 0 auto; overflow: hidden; background: radial-gradient(circle at 80% 0, rgba(73, 197, 255, .18), transparent 30%), var(--navy); }
.app-header { height: 66px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(14, 18, 47, .92); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 8; }.logo-button { display: flex; gap: 9px; align-items: center; padding: 0; background: transparent; }.bird-logo { width: 31px; height: 25px; position: relative; display: block; }.bird-logo::after { content: ''; position: absolute; left: 12px; top: 9px; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: linear-gradient(135deg, #6df5ff, #49c5ff); transform: rotate(-44deg); }.bird-logo i, .bird-logo b { position: absolute; display: block; width: 22px; height: 14px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #ffffff, #6df5ff 60%, #5888e8); }.bird-logo i { left: 0; top: 2px; transform: rotate(26deg); }.bird-logo b { left: 8px; top: 11px; transform: rotate(-22deg) scale(.82); opacity: .92; }.logo-copy { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: .08em; }.logo-copy span { color: var(--blue); }.header-actions { display: flex; gap: 8px; align-items: center; }.nick-chip { display: flex; gap: 6px; align-items: center; padding: 5px 8px 5px 5px; border: 1px solid var(--line); border-radius: 20px; background: rgba(26, 46, 115, .55); font-size: 10px; }.avatar-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--navy); background: linear-gradient(145deg, #ffda36, #49c5ff); font-size: 10px; font-weight: 800; }.nick-name { display: none; }.deposit-button, .color-button { padding: 10px 13px; border-radius: 4px; color: #0e122f; background: linear-gradient(100deg, #ffda36, #6df5ff 70%); box-shadow: 0 6px 18px rgba(73, 197, 255, .22); font-size: 11px; font-weight: 800; white-space: nowrap; }.deposit-button span { padding-left: 6px; font-size: 15px; }
.app-content { padding: 0 16px 104px; }.live-wins { min-height: 34px; display: flex; align-items: center; gap: 7px; overflow: hidden; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 9px; white-space: nowrap; }.pulse-dot, .online-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #5fffc0; box-shadow: 0 0 0 4px rgba(95, 255, 192, .1); }.live-label { color: #62e9de; letter-spacing: .12em; }.win-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; }.live-wins strong { color: var(--yellow); }.win-game { color: #6d86ad; margin-left: auto; }.promo-feed { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; }.promo-card { min-height: 180px; display: flex; align-items: center; padding: 20px; border: 1px solid rgba(146, 193, 255, .2); border-radius: 16px; background-position: center; background-size: cover; box-shadow: 0 13px 36px rgba(0, 0, 0, .18); }.promo-card.deposit { min-height: 202px; }.promo-copy { max-width: 73%; }.promo-tag, .overline { display: block; color: var(--blue); font-family: var(--mono); font-size: 8px; letter-spacing: .13em; }.promo-card h2 { max-width: 250px; margin: 8px 0 7px; font-size: 24px; line-height: 1.08; letter-spacing: -.04em; }.promo-card p { margin: 0 0 17px; color: #bfd4f4; font-size: 11px; line-height: 1.45; }.color-button { display: inline-flex; align-items: center; gap: 14px; }.color-button span { font-size: 16px; }.promo-card.trend .promo-tag { color: var(--pink); }.promo-card.tournament .promo-tag { color: var(--yellow); }.quick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 20px; }.quick-row button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 76px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(14, 39, 93, .62); text-align: left; font-size: 9px; }.quick-row span { color: var(--cyan); font-size: 20px; }
.screen-heading { display: flex; align-items: end; justify-content: space-between; padding: 26px 0 18px; }.screen-heading h1 { margin: 5px 0 0; font-size: 30px; letter-spacing: -.05em; }.search-box { display: flex; align-items: center; gap: 6px; width: 132px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--blue); }.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }.search-box input::placeholder { color: var(--muted); }.category-pills { display: flex; gap: 7px; padding-bottom: 24px; overflow-x: auto; scrollbar-width: none; }.category-pills::-webkit-scrollbar, .game-rail::-webkit-scrollbar { display: none; }.category-pills button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); background: var(--panel); font-size: 10px; white-space: nowrap; }.category-pills button.selected { border-color: var(--cyan); color: var(--navy); background: var(--cyan); }.category-pills b { color: var(--pink); font-size: 8px; }.game-section { margin-bottom: 28px; }.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }.section-title h2 { margin: 0; font-size: 16px; }.section-title button { color: var(--blue); background: transparent; font-size: 10px; }.section-title button span { font-size: 16px; }.game-rail { display: flex; gap: 11px; overflow-x: auto; scrollbar-width: none; }.game-tile { width: 112px; flex: 0 0 112px; padding: 0; background: transparent; text-align: left; }.game-art { height: 126px; display: block; position: relative; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 8px 16px rgba(0, 0, 0, .22); }.game-art i { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: white; background: rgba(6, 20, 59, .75); font-style: normal; font-size: 13px; }.game-tile strong, .game-tile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.game-tile strong { margin-top: 8px; font-size: 10px; }.game-tile small { margin-top: 3px; color: var(--muted); font-size: 8px; }.secure-badge { padding: 6px 8px; border-radius: 20px; color: var(--cyan); background: rgba(30, 224, 220, .1); font-family: var(--mono); font-size: 9px; }.balance-card { padding: 19px; border: 1px solid rgba(118, 217, 255, .27); border-radius: 16px; background: linear-gradient(140deg, #113271, #102359 58%, #24366c); box-shadow: inset 0 1px rgba(255, 255, 255, .08); }.balance-card > span { color: var(--muted); font-family: var(--mono); font-size: 9px; }.balance-card strong { display: block; margin: 4px 0 8px; font-size: 37px; letter-spacing: -.06em; }.balance-card strong span { color: var(--blue); font-size: 22px; }.balance-card select { border: 0; color: var(--blue); background: transparent; font-size: 10px; outline: none; }.balance-actions { display: flex; gap: 8px; margin-top: 20px; }.outline-button { padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(3, 16, 50, .35); font-size: 11px; font-weight: 700; }.outline-button span { color: var(--blue); padding-left: 10px; }.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 13px; }.wallet-grid button { position: relative; min-height: 102px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); text-align: left; }.wallet-grid b, .wallet-grid small { display: block; }.wallet-grid b { margin-top: 9px; font-size: 11px; }.wallet-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; }.wallet-grid i { position: absolute; right: 13px; bottom: 14px; color: var(--blue); font-style: normal; }.wallet-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; font-size: 15px; }.wallet-icon.pink { color: #ffb0dc; background: rgba(255, 95, 152, .2); }.wallet-icon.yellow { color: var(--yellow); background: rgba(255, 209, 92, .2); }.wallet-icon.blue { color: var(--blue); background: rgba(115, 217, 255, .2); }.wallet-icon.green { color: var(--cyan); background: rgba(30, 224, 220, .2); }
.tournament-list { display: flex; flex-direction: column; gap: 12px; }.tournament-card { min-height: 200px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background-position: center; background-size: cover; }.tournament-card h2 { margin: 6px 0; font-size: 23px; }.tournament-card p { margin: 0; color: #bfd4f4; font-size: 10px; }.trophy { color: var(--yellow); font-size: 28px; }.profile-hero { display: flex; align-items: center; gap: 12px; padding: 24px 0 18px; }.profile-hero h1 { margin: 4px 0; font-size: 26px; }.profile-hero p { margin: 0; color: var(--muted); font-size: 10px; }.profile-hero > button { align-self: flex-start; margin-left: auto; padding: 7px; border-radius: 8px; color: var(--blue); background: var(--panel); }.profile-avatar { position: relative; display: grid; place-items: center; width: 61px; height: 61px; flex: 0 0 61px; border: 2px solid var(--cyan); border-radius: 50%; color: var(--navy); background: linear-gradient(145deg, #ffdb70, #ff5f98); font-size: 24px; font-weight: 800; }.badge { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid var(--navy); border-radius: 50%; color: var(--navy); background: var(--cyan); font-size: 10px; }.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 15px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.profile-stats div { text-align: center; border-right: 1px solid var(--line); }.profile-stats div:last-child { border: 0; }.profile-stats strong, .profile-stats span { display: block; }.profile-stats strong { font-size: 16px; }.profile-stats span { margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 8px; }.profile-list { margin-top: 24px; }.profile-list h2 { margin: 0 0 8px; font-size: 14px; }.profile-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 2px; border-bottom: 1px solid var(--line); color: #d5e1f6; background: transparent; text-align: left; font-size: 11px; }.profile-list i { color: var(--blue); font-style: normal; font-size: 16px; }
.bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 680px; margin: 0 auto; padding: 8px 7px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(4, 15, 48, .94); backdrop-filter: blur(20px); }.bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); background: transparent; font-size: 8px; }.bottom-nav button span { font-size: 19px; line-height: 1; }.bottom-nav button.active { color: var(--cyan); }.chat-overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 5, 24, .66); }.chat-panel { width: min(100%, 680px); height: 72vh; display: flex; flex-direction: column; border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; background: #0a1e50; box-shadow: 0 -20px 50px rgba(0, 0, 0, .35); }.chat-panel header { display: flex; justify-content: space-between; padding: 17px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; }.chat-panel header div { display: flex; align-items: center; gap: 8px; }.chat-panel header button { color: var(--muted); background: transparent; font-size: 22px; }.chat-messages { flex: 1; padding: 20px 17px; }.support-message { width: 82%; padding: 12px; border-radius: 12px 12px 12px 3px; background: var(--panel-light); font-size: 10px; }.support-message b { color: var(--blue); }.support-message p { margin: 8px 0; color: #d5e1f6; }.support-message small { color: var(--muted); font-size: 8px; }.chat-options { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }.chat-options button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 16px; color: var(--blue); background: transparent; font-size: 9px; }.chat-panel form { display: flex; gap: 8px; padding: 12px 17px 20px; border-top: 1px solid var(--line); }.chat-panel input { flex: 1; padding: 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--text); background: var(--navy); font-size: 11px; }.chat-panel form button { width: 37px; border-radius: 9px; color: var(--navy); background: var(--cyan); font-size: 18px; }.toast { position: fixed; left: 50%; bottom: 90px; z-index: 30; padding: 12px 15px; border: 1px solid var(--cyan); border-radius: 10px; opacity: 0; color: var(--navy); background: var(--cyan); transform: translate(-50%, 12px); transition: .22s ease; pointer-events: none; font-size: 10px; font-weight: 800; white-space: nowrap; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 681px) { .app-shell { min-height: 100vh; box-shadow: 0 0 70px rgba(245, 151, 59, .12); }.app-header { padding-inline: 28px; }.nick-name { display: inline; }.app-content { padding-inline: 28px; }.bottom-nav { border-right: 1px solid var(--line); border-left: 1px solid var(--line); }.promo-feed { display: grid; grid-template-columns: 1.15fr .85fr; }.promo-card.deposit { grid-row: span 2; min-height: 395px; }.promo-card.trend, .promo-card.tournament { min-height: 191px; }.promo-card h2 { font-size: 27px; } }

/* BirdSpin-inspired graphic finish: deep navy, electric cyan, royal blue, and yellow. */
.live-wins { border-bottom-color: rgba(73, 197, 255, .35); }.pulse-dot, .online-dot { background: var(--live); box-shadow: 0 0 0 4px rgba(15, 222, 0, .12); }.live-label { color: var(--live); }.win-game { color: #789bc7; }.promo-card { border-color: rgba(88, 136, 232, .45); border-radius: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }.promo-card h2, .screen-heading h1, .tournament-card h2, .profile-hero h1 { font-family: var(--display); text-transform: uppercase; letter-spacing: .015em; }.promo-card h2 { font-size: 29px; line-height: .96; }.promo-tag, .overline { color: var(--blue); font-weight: 700; }.promo-card p, .tournament-card p { color: #d5e7ff; }.quick-row button { border-radius: 8px; background: var(--panel); }.quick-row span { color: var(--cyan); }.category-pills button { border-radius: 7px; background: var(--panel); }.category-pills button.selected { border-color: var(--yellow); color: var(--navy); background: var(--yellow); }.game-art { border-radius: 8px; }.game-art i { border-radius: 6px; background: var(--blue); color: var(--navy); }.game-tile strong, .section-title h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; }.balance-card { border-color: rgba(73, 197, 255, .45); border-radius: 8px; background: linear-gradient(140deg, #1a2e73, #0f1c42 58%, #233f8e); }.wallet-grid button { border-radius: 8px; }.tournament-card { border-radius: 8px; }.profile-avatar { border-color: var(--cyan); }.profile-list button { border-bottom-color: rgba(88, 136, 232, .28); }.bottom-nav { background: rgba(14, 18, 47, .96); }.bottom-nav button.active { color: var(--cyan); }.toast { border-color: var(--yellow); color: var(--navy); background: var(--yellow); }
.promo-card .color-button, .tournament-card .color-button, .balance-actions .color-button { color: #ffffff; background-color: #18ad28; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1px, transparent 1.5px); background-size: 14px 14px; border: 1px solid rgba(130, 230, 111, .55); border-radius: 5px; box-shadow: none; text-shadow: none; transition: background-color .16s ease, border-color .16s ease; }
.promo-card .color-button:hover, .tournament-card .color-button:hover, .balance-actions .color-button:hover { filter: none; transform: none; background-color: #229c31; border-color: rgba(158, 237, 139, .7); box-shadow: none; }
.app-header .deposit-button { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; color: #ffffff; background-color: #18ad28; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.1) 1px, transparent 1.5px); background-size: 14px 14px; border: 1px solid rgba(130, 230, 111, .55); border-radius: 5px; box-shadow: none; text-shadow: none; font-weight: 800; text-align: center; transition: background-color .16s ease, border-color .16s ease; }
.app-header .deposit-button:hover { background-color: #229c31; border-color: rgba(158, 237, 139, .7); box-shadow: none; }

@media (max-width: 390px) {
	.app-shell { width: 100%; min-height: 812px; }
	.app-header { height: 60px; padding: 0 13px; }
	.logo-copy { font-size: 18px; }
	.bird-logo { transform: scale(.9); transform-origin: left center; }
	.header-actions { gap: 5px; }
	.app-header .deposit-button { padding: 9px 10px; font-size: 10px; }
	.app-content { padding: 0 13px 99px; }
	.live-wins { gap: 5px; font-size: 8px; }
	.promo-feed { gap: 9px; padding: 13px 0; }
	.promo-card { min-height: 157px; padding: 16px; }
	.promo-card.deposit { min-height: 177px; }
	.promo-copy { max-width: 82%; }
	.promo-card h2 { margin-top: 6px; font-size: 25px; }
	.promo-card p { margin-bottom: 13px; font-size: 10px; }
	.promo-card .color-button { padding: 8px 10px; font-size: 10px; }
	.quick-row { gap: 6px; padding-bottom: 14px; }
	.quick-row button { min-height: 68px; padding: 9px; font-size: 8px; }
	.quick-row span { font-size: 17px; }
	.screen-heading { padding: 21px 0 14px; }
	.screen-heading h1 { font-size: 28px; }
	.search-box { width: 116px; }
	.category-pills { padding-bottom: 19px; }
	.game-section { margin-bottom: 23px; }
	.game-tile { width: 77px; flex-basis: 77px; }
	.game-art { height: 77px; }
	.bottom-nav { padding-top: 7px; }
	.bottom-nav button { font-size: 7px; }
	.bottom-nav button span { font-size: 17px; }
}

.game-art { aspect-ratio: 1 / 1; height: auto; }