/* ==========================================
   MONUMENTAS — leaderboardm.css
   Leaderboard button + panel, and the "LIVE" badge on the cube canvas.
   Matches the site's light theme (rounded pills, soft shadows, Inter).
========================================== */

/* ---- nav: group the leaderboard button with the login/account control ---- */
.navActions{
    display:flex;
    align-items:center;
    gap:14px;
}

/* The site's global `.hidden{display:none}` lives in stylem.css, which loads
   BEFORE this file. Because our `.leaderboardModal`/`.liveBadge` display rules
   have equal specificity but come later in source order, they'd otherwise beat
   `.hidden`. These two-class selectors (higher specificity) make `hidden` win
   regardless of order — without them the modal/badge show even when hidden. */
.leaderboardModal.hidden,
.liveBadge.hidden{
    display:none;
}

.leaderboardButton{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    color:#111;
    padding:11px 18px;
    border-radius:999px;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    font-family:inherit;
    transition:.3s;
}
.leaderboardButton svg{ color:#e0a500; flex:none; }

/* Account button holds a person icon + a text label. Desktop shows only the
   label (the name / "Sign in") exactly as before; the icon is hidden. On mobile
   the signed-in state swaps to just the icon (see the mobile block). */
.loginButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.userIcon{ display:none; }
.leaderboardButton:hover{
    transform:translateY(-2px);
    border-color:rgba(0,0,0,.2);
    box-shadow:0 8px 22px rgba(0,0,0,.08);
}

/* ==========================================
   LIVE BADGE (green blinking pill on the cube canvas)
========================================== */
.liveBadge{
    position:absolute;
    top:20px;
    right:20px;
    z-index:50;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 13px;
    border-radius:999px;
    background:rgba(15,16,23,.82);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    user-select:none;
    pointer-events:none;
}
.liveDot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.7);
    animation:liveBlink 1.4s ease-in-out infinite;
}
.liveText{ color:#fff; }
@keyframes liveBlink{
    0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(34,197,94,.6); }
    50%{ opacity:.35; box-shadow:0 0 0 6px rgba(34,197,94,0); }
}

/* ==========================================
   CONTENT EDITOR (upload modal) additions
========================================== */
.areaProgress{
    font-size:13px;
    font-weight:600;
    color:#888;
    margin-bottom:10px;
}
.contentTypeTabs{
    display:flex;
    gap:4px;
    background:#f2f2f2;
    border-radius:999px;
    padding:4px;
    margin-bottom:16px;
}
.contentTypeTab{
    flex:1;
    border:none;
    background:none;
    padding:9px 6px;
    border-radius:999px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    color:#666;
    font-family:inherit;
    transition:.2s;
}
.contentTypeTab:hover{ color:#111; }
.contentTypeTab.active{ background:#fff; color:#111; box-shadow:0 2px 8px rgba(0,0,0,.1); }

.colorStage{ margin-bottom:14px; }
.colorPickRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:15px;
    font-weight:500;
}
.colorPickRow input[type="color"]{
    width:56px;
    height:40px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:none;
    cursor:pointer;
    padding:2px;
}

/* ==========================================
   MULTI-AREA SELECTION PANEL additions
========================================== */
/* Toolbar collapse: the menu (hamburger) button is hidden until the toolbar is
   collapsed during a mobile selection. */
.toolbarMenuButton{ display:none; align-items:center; justify-content:center; }
.toolbar.collapsed .toolGroup{ display:none; }
.toolbar.collapsed .toolbarMenuButton{ display:flex; }
.toolbar.collapsed.expanded .toolGroup{ display:flex; }

/* Step navigation (Next / Back) is mobile-only; desktop shows a single flow.
   Next sits in the button row and reads as the primary action like Continue. */
.selStepNav{ display:none; }
#selNextButton{ background:#111; color:#fff; font-weight:600; }
#selNextButton:disabled{ background:#ccc; color:#fff; cursor:not-allowed; }

.selTopRow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}
.drawToggle{
    flex:none;
    border:1px solid rgba(0,0,0,.15);
    background:#fff;
    color:#111;
    padding:9px 15px;
    border-radius:999px;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    transition:.2s;
}
.drawToggle:hover{ border-color:rgba(0,0,0,.3); }
.drawToggle.active{ background:#111; color:#fff; border-color:#111; }

/* The hand (pan) toggle is mobile-only; desktop keeps the single Draw toggle. */
.panToggle{ display:none; }
.selTopHint{ font-size:12px; color:#888; line-height:1.35; }

.selAreasList{ display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.selAreaRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:#f4f4f4;
    border-radius:10px;
    padding:8px 12px;
    font-size:13px;
    color:#333;
}
.selAreaRemove{
    flex:none;
    border:none;
    background:none;
    color:#c0362c;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:0 2px;
}
.selAreaRemove:hover{ color:#8f251d; }

/* ==========================================
   "DONE VIEWING" CONTROL
   Floats over the cube while an owner's spaces are shown (leaderboard row or
   "My spots"), letting the viewer dismiss the pins and do something else.
========================================== */
.spotsExit{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    z-index:50;
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:calc(100% - 40px);
    padding:11px 18px;
    border:none;
    border-radius:999px;
    background:rgba(15,16,23,.9);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.22);
    transition:transform .2s, background .2s;
}
.spotsExit:hover{ transform:translateX(-50%) translateY(-2px); background:#000; }
.spotsExitX{ font-size:19px; line-height:1; flex:none; }
#spotsExitLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Higher-specificity override so the global .hidden (stylem.css, loaded first)
   still wins over this file's later .spotsExit display rule. */
.spotsExit.hidden{ display:none; }

/* ==========================================
   LEADERBOARD PANEL
========================================== */
.leaderboardModal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:9999;
    overscroll-behavior:contain;
}
body:has(.leaderboardModal:not(.hidden)){ overflow:hidden; }

.leaderboardPanel{
    position:relative;
    width:460px;
    max-width:100%;
    background:#fff;
    border-radius:30px;
    padding:38px 32px 30px;
    animation:popup .25s ease;
    max-height:calc(100dvh - 40px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.leaderboardPanel h2{
    font-size:26px;
    font-weight:700;
    letter-spacing:-.5px;
}
.lbSubtitle{
    color:#666;
    font-size:14px;
    margin-top:6px;
}

/* Segmented tab control */
.lbTabs{
    display:flex;
    gap:4px;
    background:#f2f2f2;
    border-radius:999px;
    padding:4px;
    margin:22px 0 18px;
}
.lbTab{
    flex:1;
    border:none;
    background:none;
    padding:9px 6px;
    border-radius:999px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    color:#666;
    font-family:inherit;
    transition:.2s;
    white-space:nowrap;
}
.lbTab:hover{ color:#111; }
.lbTab.active{
    background:#fff;
    color:#111;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* The scrollable list */
.lbList{
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    margin:0 -8px;
    padding:0 8px;
    scrollbar-width:thin;
    scrollbar-color:#c4c4c4 transparent;
}
.lbList::-webkit-scrollbar{ width:8px; }
.lbList::-webkit-scrollbar-thumb{ background:#c4c4c4; border-radius:999px; }

.lbRow{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    text-align:left;
    border:none;
    background:none;
    border-radius:16px;
    padding:12px 12px;
    cursor:pointer;
    font-family:inherit;
    transition:background .15s;
}
.lbRow + .lbRow{ border-top:1px solid rgba(0,0,0,.05); border-radius:0; }
.lbRow:hover{ background:#f6f6f6; border-radius:16px; }
.lbRow.top3{ background:linear-gradient(90deg,rgba(224,165,0,.07),transparent); }
.lbRow.top3:hover{ background:linear-gradient(90deg,rgba(224,165,0,.14),rgba(0,0,0,.02)); }

/* Rank cell: crown for 1-3, number circle for the rest */
.lbRank{
    flex:none;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.lbRank.num{
    font-size:15px;
    font-weight:700;
    color:#999;
    background:#f0f0f0;
    border-radius:50%;
}
.lbRank.crown.gold{ color:#f0b400; }
.lbRank.crown.silver{ color:#9aa6b2; }
.lbRank.crown.bronze{ color:#c9803f; }

.lbWho{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.lbName{
    font-size:16px;
    font-weight:600;
    color:#111;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.lbActivity{
    font-size:12px;
    color:#999;
}

.lbMetrics{
    flex:none;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
}
.lbPrimary{
    font-size:16px;
    font-weight:700;
    color:#111;
    font-variant-numeric:tabular-nums;
}
.lbPrimary em{
    font-style:normal;
    font-weight:500;
    font-size:12px;
    color:#999;
}
.lbSecondary{
    font-size:12px;
    color:#888;
    font-variant-numeric:tabular-nums;
}

.lbEmpty{
    color:#888;
    font-size:14px;
    text-align:center;
    padding:40px 10px;
    line-height:1.5;
}
.lbHint{
    margin-top:16px;
    font-size:12px;
    color:#aaa;
    text-align:center;
}

.leaderboardPanel .closePanelButton{
    position:absolute;
    top:18px;
    right:18px;
}

/* ==========================================
   MOBILE
========================================== */
@media(max-width:900px){
    /* Mobile buy flow: draw-only (no +/- steppers) and split into two short
       steps (1 = size, 2 = agree + pay) so the panel stays small and the cube
       shows through. Desktop keeps the full single-panel flow untouched. */
    #selectionInfo[data-step="1"] .selStep2{ display:none; }
    #selectionInfo[data-step="2"] .selStep1{ display:none; }
    #selectionInfo[data-step="1"] #selNextButton{ display:block; }
    #selectionInfo[data-step="2"] #selBackButton{ display:block; }

    /* Grid so Draw pairs with "Add area" on one row; everything else spans full
       width. Placed by named areas so it's independent of DOM order (desktop is
       untouched — this whole block is mobile-only). */
    .selectionPanel:not(.hidden){
        display:grid;
        grid-template-columns:auto auto 1fr;
        column-gap:8px;
        row-gap:8px;
        align-content:start;
        grid-template-areas:
            "draw hand addarea"
            "list list list"
            "total total total"
            "price price price"
            "warn warn warn"
            "agree agree agree"
            "buttons buttons buttons";
    }
    .selectionPanel .selTopRow{ display:contents; }
    .selectionPanel .selTopHint{ display:none; }  /* the pencil is self-explanatory */
    .drawLabel{ display:none; }                    /* Draw button shows just the pencil */
    #selectionInfo .selGrid{ display:none; }        /* no +/- steppers on mobile */

    #drawToggle{ grid-area:draw; justify-content:center; }
    .panToggle{ display:inline-flex; align-items:center; justify-content:center; grid-area:hand; }
    #addAreaButton{ grid-area:addarea; margin:0; }
    #selAreasList{ grid-area:list; }
    .selTotalRow{ grid-area:total; }
    .selPriceRow{ grid-area:price; }
    #selectionWarning{ grid-area:warn; }
    .selectionPanel .agreeRow{ grid-area:agree; }
    /* Buttons back at the BOTTOM (undo the earlier order:-1 that put them on top). */
    .selectionPanel .panelButtons{ grid-area:buttons; order:0; margin:2px 0 0; }
    /* Super-admin give-free block: span the full width in an implicit trailing
       row (it isn't in grid-template-areas). Hidden for everyone but the super
       admin, so it never affects a normal buyer's mobile layout. */
    .selectionPanel .adminGiveRow{ grid-column:1 / -1; order:1; }

    /* On mobile a bottom-anchored control gets hidden behind the phone's browser
       toolbar (same reason the fullscreen button lives top-left here), so the
       "Done viewing" pill moves to the top, just under the wrapped tool row,
       where it's always visible and tappable. */
    .spotsExit{
        top:224px;
        bottom:auto;
    }

    .navActions{ gap:10px; }
    /* Icon-only trophy button to save header width next to Sign in. */
    .leaderboardButtonLabel{ display:none; }
    .leaderboardButton{ padding:11px; }

    /* Signed in: collapse the account button to a compact circular person icon
       so a long display name can't crowd out the leaderboard button. This keeps
       the header as: MONUMENTAS (left) · gap · trophy + person (right).
       Signed out stays the short "Sign in" text button, which already fits. */
    .loginButton.signedIn{
        padding:0;
        width:42px;
        height:42px;
        border-radius:50%;
        gap:0;
    }
    .loginButton.signedIn .loginButtonLabel{ display:none; }
    .loginButton.signedIn .userIcon{ display:block; }

    .leaderboardPanel{
        width:100%;
        padding:30px 20px 22px;
        border-radius:26px;
    }
    .leaderboardPanel h2{ font-size:23px; }
    .liveBadge{ top:14px; right:14px; }
}