:root{
    --glass-bg: rgba(10, 20, 35, .55);
    --glass-border: rgba(255,255,255,.10);
    --glass-shadow: 0 10px 40px rgba(0,0,0,.35);

    --top-h: 76px;
    --ctrl-h: 64px;
}

html, body {
    height: 100%;
}
body{
    margin:0;
    overflow:hidden;
    background:
        radial-gradient(1200px 800px at 20% 10%, rgba(60,140,255,.20), transparent 60%),
        radial-gradient(1200px 900px at 80% 30%, rgba(0,255,180,.10), transparent 55%),
        linear-gradient(180deg, #061325, #030812);
    color:#e9eefc;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Reserve space for fixed top bar + bottom controls */
#stageWrap{
    position:absolute;
    inset:0;
    /*padding-top: calc(var(--top-h) + 12px);*/
    padding-bottom: calc(var(--ctrl-h) + 18px);
}
canvas{
    display:block;
}

/* Glass utility */
.ui-glass{
    background: var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow);
}

/* TOP BAR (logo + stats + avatar) */
.topbar{
    position: fixed;
    left: 12px;
    right: 12px;
    top: 10px;
    height: var(--top-h);
    z-index: 80;
    display:flex;
    align-items:center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-radius: 18px;
}

.brandmark{
    display:flex;
    align-items:center;
    gap:.6rem;
    min-width: 190px;
    flex: 0 0 auto;
}
.logo-badge{
    width:44px;
    height:44px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    font-weight:900;
    letter-spacing:.5px;
}
.brand-title{
    line-height: 1.05;
    min-width: 0;
}
.brand-title .name{
    font-weight:900;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.brand-title .sub{
    font-size: .75rem;
    opacity:.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.statstrip{
    display:flex;
    align-items:center;
    gap:.55rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow:auto;
    scrollbar-width: thin;
}
.statstrip::-webkit-scrollbar{
    height:6px;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.35rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    white-space:nowrap;
    font-size:.9rem;
}
.pill b{
    font-weight:900;
}

/* Avatar + dropup */
.avatar-btn{
    width:46px;
    height:46px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), rgba(255,255,255,.05));
    box-shadow: 0 10px 20px rgba(0,0,0,.25);
    display:grid;
    place-items:center;
    font-weight:900;
    color:#f1f6ff;
}
.avatar-btn::after{
    margin-left:.4rem;
} /* dropdown caret */
.avatar-mini{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), rgba(255,255,255,.05));
    display:grid;
    place-items:center;
    flex:0 0 auto;
    font-weight:900;
}

.dropdown-menu{
    background: rgba(10,20,35,.92);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.menu-list{
    display:flex;
    flex-direction:column;
    gap:.35rem;
}
.menu-item{
    width:100%;
    text-align:left;
    padding:.55rem .7rem;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color:#e9eefc;
    font-size: .95rem;
}
.menu-item:hover{
    background: rgba(255,255,255,.10);
}
.menu-danger{
    border-color: rgba(255,120,120,.22);
    background: rgba(255,70,70,.10);
}
.menu-danger:hover{
    background: rgba(255,70,70,.16);
}

/* BOTTOM GAME CONTROL PANEL */
.game-control-footer{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: var(--ctrl-h);
    z-index: 90;
    display:flex;
    align-items:center;
    gap:.6rem;
    padding: .5rem .75rem;
    border-radius: 18px;
}

.btn-ic{
    width:42px;
    height:42px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.06) !important;
    color:#e9eefc !important;
}
.btn-ic:hover{
    background: rgba(255,255,255,.10) !important;
}

.ctrl-sep{
    width:1px;
    height:34px;
    background: rgba(255,255,255,.14);
    margin: 0 .25rem;
}

.ctrl-center, .ctrl-left, .ctrl-right{
    display:flex;
    align-items:center;
    gap:.45rem;
}

.ctrl-search{
    width: min(320px, 42vw);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#e9eefc;
}
.ctrl-search::placeholder{
    color: rgba(233,238,252,.55);
}

/* Modal image fit */
.modal-img{
    width:100%;
    height: 240px;
    object-fit: contain;
    background: rgba(0,0,0,.12);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 576px){
    :root{
        --top-h: 78px;
        --ctrl-h: 70px;
    }
    .brandmark{
        min-width: 150px;
    }
    .brand-title .name, .brand-title .sub{
        max-width: 150px;
    }
    .pill{
        font-size:.85rem;
    }
    .ctrl-center{
        display:none;
    }
    .ctrl-search{
        width: 48vw;
    }
}


/* ================= AVATAR ================= */
.avatar-trigger{
    width:46px;
    height:46px;
    border-radius:50%;
    padding:0;
    border:none;
    background:none;
    overflow:hidden;
    position:relative;
}

.avatar-trigger img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.avatar-caret{
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:rgba(15,25,45,.95);
    border:1px solid rgba(255,255,255,.25);
    display:grid;
    place-items:center;
    font-size:10px;
}


.player-menu-header{
    padding:14px;
    display:flex;
    gap:12px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.player-menu-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
}



.player-name{
    font-weight: 800;
    line-height: 1.1;
    color: white;
}

.player-meta{
    margin-top: 4px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;

    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);

    font-size: .82rem;
    color: rgba(233,238,252,.85);
}

.meta-pill b{
    font-weight: 900;
    color: #e9eefc;
}




/* SIDEBAR */
.sidebar{
    position: fixed;
    left: 12px;
    top: calc(var(--top-h) + 22px);
    bottom: calc(var(--ctrl-h) + 22px);
    width: 340px;
    z-index: 85;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    transform: translateX(-110%);
    transition: transform .18s ease;
    pointer-events: none;
}
.sidebar.is-open{
    transform: translateX(0);
    pointer-events: auto;
}
.sidebar-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 84;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.sidebar-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
}
.sidebar-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: .6rem .7rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.sidebar-body{
    padding: .55rem .6rem .75rem;
    overflow: auto;
    scrollbar-width: thin;
}
.sidebar-acc-item{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: .55rem;
    background: rgba(255,255,255,.03);
}
.sidebar-acc-btn{
    background: rgba(255,255,255,.03) !important;
    color: #e9eefc !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: .65rem .75rem;
}
.accordion-button::after{
    filter: invert(1) opacity(.75);
}
.sidebar-acc-body{
    padding: .65rem .75rem;
}

.sb-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}
.sb-card{
    padding: .55rem .6rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
}
.sb-k{
    font-size: .78rem;
    opacity:.75;
}
.sb-v{
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.1;
}
.sb-sfx{
    font-size: .82rem;
    opacity:.75;
    margin-left: 6px;
    font-weight: 700;
}

.sb-row{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}
.sb-k2{
    font-size: .88rem;
    font-weight: 800;
    opacity:.9;
    min-width: 110px;
}
.sb-ctl{
    flex: 1 1 auto;
}
.sb-mini{
    font-size: .78rem;
    opacity:.75;
    margin-top: 2px;
    text-align:right;
}
.sb-select{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #e9eefc;
}
.sb-select:focus{
    box-shadow:none;
}

.sb-check{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    font-size: .88rem;
    cursor: pointer;
    user-select: none;
}
.sb-check input{
    transform: translateY(1px);
}

@media (max-width: 576px){
    .sidebar{
        width: min(92vw, 360px);
    }
}


/* === MOBILE FIX: Bottom search overflow === */
@media (max-width: 576px) {
    .game-control-footer {
        gap: .4rem;
        padding: .5rem;
    }

    .ctrl-right {
        flex: 1 1 auto;
        min-width: 0; /* IMPORTANT */
    }


    .ctrl-search {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0; /* IMPORTANT */
    }
}


/* Search icon -> expand */
.ctrl-searchwrap{
    display:flex;
    align-items:center;
    gap:.45rem;
    min-width: 0;
}

.ctrl-search{
    width: min(320px, 42vw);
    min-width: 0;
}


/* Desktop: keep search on the RIGHT side of the footer panel */
@media (min-width: 577px){
    .ctrl-right{
        display:flex;
        justify-content:flex-end; /* push contents to the right edge */
        flex: 1 1 auto;
        min-width: 0;
    }

    .ctrl-searchwrap{
        margin-left: auto;        /* ensure search stays right-most within ctrl-right */
        justify-content: flex-end;
    }
}



/* Mobile: collapsed by default; expands on tap */
@media (max-width: 576px){
    .ctrl-searchwrap{
        flex: 1 1 auto;
        justify-content:flex-end;
    }
    .ctrl-search{
        width: 0;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        opacity: 0;
        pointer-events: none;
        transition: width .18s ease, opacity .18s ease, padding .18s ease, border-color .18s ease;
    }
    .ctrl-searchwrap.is-open .ctrl-search{
        width: 48vw;
        padding-left: .75rem;
        padding-right: .75rem;
        border-color: rgba(255,255,255,.12);
        opacity: 1;
        pointer-events: auto;
    }
}


/* Player stats @ Sidebar */
/* ===== Sidebar Stat Cards – force light text (dark UI fix) ===== */
.sidebar-acc-body .sb-card,
.sidebar-acc-body .sb-k,
.sidebar-acc-body .sb-v,
.sidebar-acc-body .sb-sfx {
    color: rgba(255, 255, 255, 0.92);
}

/* Secondary labels slightly muted */
.sidebar-acc-body .sb-k {
    color: rgba(255, 255, 255, 0.65);
}

/* Numeric values brighter */
.sidebar-acc-body .sb-v {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* Accordion button text (header) */
.sidebar-acc-btn {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Stats card - nice polish */

.sidebar-acc-body .sb-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}