/* ── Wingo Play — shared mobile-first styles ── */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Sora:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #07080b;
    --bg-glow: #1a0a0e;
    --panel: #12131a;
    --panel-2: #0c0d12;
    --panel-hi: #1a1c24;
    --border: #2a2d38;
    --border-soft: rgba(255,255,255,.06);
    --accent: #e5192a;
    --accent-2: #ff2b3d;
    --accent-soft: rgba(229,25,42,.16);
    --green: #16c784;
    --green-soft: rgba(22,199,132,.16);
    --red: #e5192a;
    --loss: #ff5a5f;
    --text: #f4f5f7;
    --muted: #8b919e;
    --radius: 14px;
    --shadow: 0 10px 28px rgba(0,0,0,.35);
    --font: 'Sora', system-ui, sans-serif;
    --display: 'Exo 2', 'Sora', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body { overflow-x: hidden; }

body {
    font-family: var(--font);
    background:
        radial-gradient(1200px 500px at 50% -80px, var(--bg-glow), transparent 60%),
        linear-gradient(180deg, #0b0c10 0%, var(--bg) 40%, #050608 100%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
}

a { color: var(--accent-2); text-decoration: none; }

/* App shell — narrow, phone-first */
.shell {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.shell.wide { max-width: 900px; }

/* Top bar — shared on all logged-in pages */
.abar, .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(12,13,18,.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.abar .logo, .logo {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--display);
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    color: var(--accent);
    letter-spacing: -.5px;
}
.abar .logo img, .logo img {
    height: 36px;
    margin: -6px 0 -4px -2px;
    mix-blend-mode: screen;
}
.bal-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bal-pill, .balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg,#1d1e26,#15161c);
    border: 1px solid #2c2e38;
    border-radius: 16px;
    padding: 6px 8px 6px 14px;
    font-weight: 800;
    font-size: 15px;
    color: var(--green);
}
.wallet-chip {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #c9ced8;
    text-decoration: none;
}
.wallet-chip svg { width: 16px; height: 16px; }
.menu-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
}
.menu-btn svg { width: 24px; height: 24px; }
.menu-sheet {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 40;
    width: 100%;
    max-width: 480px;
    transform: translate(-50%, -105%);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
    background: linear-gradient(180deg,#171923,#101118);
    border-bottom: 1px solid var(--border);
    padding: 14px;
    padding-top: 68px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.menu-sheet.open { transform: translate(-50%, 0); }
@media (max-width: 480px) {
    .menu-sheet {
        left: 0;
        transform: translateY(-105%);
    }
    .menu-sheet.open { transform: translateY(0); }
}
.menu-sheet a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.menu-sheet a:last-child { border-bottom: none; }
.menu-sheet a span {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    font-size: 14px;
}
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 35;
    display: none;
    backdrop-filter: blur(2px);
}
.menu-overlay.open { display: block; }

/* legacy brand aliases (unused by new header) */
.brand {
    font-family: var(--display);
    font-weight: 900;
    font-style: italic;
    font-size: 22px;
    color: var(--accent);
    letter-spacing: -.5px;
}
.brand small {
    color: var(--muted);
    font-family: var(--font);
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    display: block;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.fun-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--accent);
    border: 1px solid rgba(229,25,42,.45);
    border-radius: 5px;
    padding: 2px 5px;
    margin-left: 2px;
    background: var(--accent-soft);
}

/* Nav row */
.nav {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}
.nav a {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.nav a.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Content */
.content { flex: 1; padding: 16px 14px 84px; }

/* Shared bottom navigation */
.bnav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    background: rgba(14,15,20,.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-soft);
    z-index: 30;
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.bnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 9px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    transition: color .15s;
}
.bnav a.active { color: var(--accent-2); }
.bnav a.center { color: #fff; }
.bnav svg { width: 22px; height: 22px; }
.bnav .center .ic {
    width: 46px;
    height: 46px;
    margin-top: -18px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--accent-2), #b90f1e);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(229,25,42,.45);
    border: 2px solid rgba(255,255,255,.12);
}
.bnav .center .ic svg { width: 22px; height: 22px; }

/* Cards */
.card {
    background: linear-gradient(180deg, var(--panel-hi), var(--panel));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.card h2 {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 12px;
}
.card h3 { font-size: 14px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }

/* Forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.input {
    width: 100%;
    padding: 13px 14px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #fff;
    font-family: var(--font);
    font-size: 16px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus {
    border-color: rgba(229,25,42,.7);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff;
    background: linear-gradient(180deg, var(--accent-2), #b90f1e);
    cursor: pointer;
    transition: filter .15s, transform .05s;
    box-shadow: 0 6px 16px rgba(229,25,42,.28);
}
.btn:active { transform: scale(.99); }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.green { background: linear-gradient(180deg, #1adf98, #109a68); box-shadow: 0 6px 16px rgba(22,199,132,.28); }
.btn.red { background: linear-gradient(180deg, var(--accent-2), #b90f1e); }
.btn.ghost {
    background: var(--panel-2);
    border: 1px solid var(--border);
    box-shadow: none;
}
.btn.sm { width: auto; padding: 8px 14px; font-size: 13px; display: inline-block; }

.alert { padding: 11px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.alert.err { background: rgba(229,72,77,.15); border: 1px solid var(--red); color: #ff9ba0; }
.alert.ok  { background: rgba(40,200,64,.13); border: 1px solid var(--green); color: #8ff0a0; }

.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.mt { margin-top: 14px; }

/* Auth pages */
.auth-abar .auth-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-abar .auth-nav a {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
}
.auth-abar .auth-nav a.on { color: #fff; }
.auth-abar .auth-nav a.pill {
    color: #fff;
    background: linear-gradient(180deg, #1adf98, #109a68);
    box-shadow: 0 4px 12px rgba(24,214,143,.25);
}
.auth-abar .auth-nav a.pill.on {
    filter: brightness(1.05);
}
.auth-wrap {
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 14px 28px;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}
.auth-card {
    margin: 0;
    padding: 20px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #191a21, #12131a);
    border: 1px solid #2a2c34;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    position: relative;
}
.auth-card h2 {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 900;
    font-style: italic;
    margin-bottom: 14px;
}
.auth-hero {
    margin-bottom: 16px;
    padding: 16px 14px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 90% 80% at 100% 0%, rgba(229,25,42,.2), transparent 55%),
        linear-gradient(180deg, #1b1c24, #12131a);
    border: 1px solid #2a2c34;
}
.auth-hero h1 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    margin-bottom: 4px;
}
.auth-hero p {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}
.auth-foot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 18px 14px 28px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
.auth-foot a { color: #c9ced8; text-decoration: none; }
.auth-foot a:hover { color: #fff; }

.auth-logo { text-align: center; margin-bottom: 26px; position: relative; }
.auth-logo .brand { font-size: 34px; }
.auth-logo .plane {
    display: inline-block;
    width: 42px;
    height: 42px;
    margin-left: 4px;
    vertical-align: -8px;
    animation: planeDrift 3.2s ease-in-out infinite;
}
@keyframes planeDrift {
    0%, 100% { transform: translate(0, 0) rotate(-6deg); }
    50% { transform: translate(6px, -5px) rotate(4deg); }
}

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tag.win { background: var(--green-soft); color: #6fe884; }
.tag.loss { background: rgba(229,72,77,.15); color: #ff9ba0; }
.tag.admin { background: rgba(240,138,26,.15); color: #f0b45a; }

/* Stat grid */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.stat {
    background: linear-gradient(180deg, var(--panel-hi), var(--panel));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
}
.stat .n {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
}
.stat .l { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* Copy box */
.copy-box { display: flex; gap: 8px; align-items: stretch; }
.copy-box input { flex: 1; }

/* Profile avatar */
.avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-2), #8a0c18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 30px;
    font-weight: 900;
    margin: 0 auto 12px;
    border: 2px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 22px rgba(229,25,42,.35);
}

@media (min-width: 900px) {
    .stats { grid-template-columns: repeat(4, 1fr); }
}

/* ── Mobile polish — tighter type / icons across all pages ── */
@media (max-width: 480px) {
    .abar, .topbar { padding: 8px 12px; gap: 8px; }
    .abar .logo, .logo { font-size: 20px; }
    .abar .logo img, .logo img { height: 28px; margin: -4px 0 -2px -2px; }
    .bal-pill, .balance-pill {
        font-size: 12.5px; padding: 4px 5px 4px 10px; gap: 7px; border-radius: 12px;
    }
    .wallet-chip { width: 28px; height: 28px; border-radius: 8px; }
    .wallet-chip svg { width: 14px; height: 14px; }
    .menu-btn { width: 34px; height: 34px; border-radius: 9px; }
    .menu-btn svg { width: 20px; height: 20px; }
    .menu-sheet { padding: 12px; padding-top: 60px; }
    .menu-sheet a { padding: 11px 10px; font-size: 13.5px; gap: 8px; }
    .menu-sheet a span { width: 24px; height: 24px; font-size: 12px; }

    .content { padding: 12px 12px 78px; }
    .card { padding: 13px; margin-bottom: 12px; border-radius: 14px; }
    .card h2 { font-size: 15px; margin-bottom: 10px; }

    .bnav a { font-size: 10px; padding: 7px 0 8px; gap: 1px; }
    .bnav svg { width: 18px; height: 18px; }
    .bnav .center .ic {
        width: 40px; height: 40px; margin-top: -14px;
    }
    .bnav .center .ic svg { width: 18px; height: 18px; }

    .input { padding: 11px 12px; font-size: 15px; border-radius: 10px; }
    .btn { padding: 12px; font-size: 14px; border-radius: 11px; }
    .alert { padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
    .field label { font-size: 12px; }
    .stat { padding: 11px; }
    .stat .n { font-size: 18px; }
    .stat .l { font-size: 11px; }
    .avatar-lg { width: 56px; height: 56px; font-size: 22px; margin-bottom: 8px; }

    .auth-hero h1 { font-size: 18px; }
    .auth-hero p { font-size: 12px; }
    .auth-card h2 { font-size: 17px; }
    .auth-logo .brand { font-size: 28px; }
    .auth-logo .plane { width: 32px; height: 32px; }

    /* Shared payment method logos */
    .pm-logo { width: 22px !important; height: 22px !important; border-radius: 6px !important; }
    .pm-name { font-size: 12px !important; }
    .pm-box { padding: 10px 8px !important; gap: 6px !important; border-radius: 10px !important; }
}