/* /Components/Numblox/HowToPlay.razor.rz.scp.css */
/* overlay */
.how-to-play-overlay[b-jealfz2u3p] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1009;
    backdrop-filter: saturate(110%) blur(8px);
}

/* Modal panel */
.popup[b-jealfz2u3p] {
    /* Center it */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;

    /* Sizing */
    width: calc(100vw - 2rem);     /* breathable on mobile */
    max-width: 550px;              /* your target on laptop */
    max-height: min(80vh, 720px);  /* avoid full-screen takeover */
    overflow: auto;

    /* Visual style */
    background: #0b0b0b;           /* near-black */
    color: #fff;
    /* Your request: heavy rounding + blue border */
    border-radius: 24px;           /* (Better UX than 25%; pill-like can feel odd) */
    border: 2px solid #2b6cff;     /* blue edge */
    box-shadow:
        0 12px 40px rgba(0,0,0,.55),
        0 2px 10px rgba(0,0,0,.35);

    /* Spacing */
    padding: 1rem 1rem 1.25rem;

    /* Layer */
    z-index: 1010;

    /* Animation */
    transition: transform .18s ease, opacity .18s ease;
}

/* Header */
.popup-header[b-jealfz2u3p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    position: sticky; top: 0;      /* keeps close button visible when long content */
    background: linear-gradient(#0b0b0b, #0b0b0b); /* ensures sticky looks clean */
    padding-top: .25rem;
    z-index: 1;
}

.popup-header h2[b-jealfz2u3p] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .2px;
}

/* Close button */
.popup-close[b-jealfz2u3p] {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .25rem;
    border-radius: .5rem;
}

.popup-close:hover[b-jealfz2u3p] { background: rgba(255,255,255,.08); }

/* Body sections */
.popup-body[b-jealfz2u3p] {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}

.popup-section[b-jealfz2u3p] {
    padding: .75rem .5rem .25rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.popup-section:first-of-type[b-jealfz2u3p] {
    border-top: none;
}

/* Typography */
.popup-section h3[b-jealfz2u3p] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}

.popup-section p[b-jealfz2u3p], li[b-jealfz2u3p] {
    margin: 0 0 .25rem 0;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
}

/* Small screens: give it more breathing room */
@media (max-width: 420px) {
    .popup[b-jealfz2u3p] { border-radius: 18px; }
}
/* /Components/Numblox/Stats.razor.rz.scp.css */
/* overlay */
.stats-overlay[b-ys3jfz0z78] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1007;
    backdrop-filter: saturate(110%) blur(8px);
}

.toolbar[b-ys3jfz0z78] {
  display: flex;
  justify-content: flex-end; /* right-align the icons */
  width: 100%;
  margin-inline: auto; /* centers with the board */
  padding-top: .5rem;
}

.toolbar h2[b-ys3jfz0z78] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-right: auto;
    letter-spacing: .2px;
    padding-left: .5rem;
}

/* Modal panel */
.popup[b-ys3jfz0z78] {
    /* Center it */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;

    /* Sizing */
    width: calc(100vw - 2rem);     /* breathable on mobile */
    max-width: 550px;              /* your target on laptop */
    max-height: min(80vh, 720px);  /* avoid full-screen takeover */
    overflow: auto;

    /* Visual style */
    background: #0b0b0b;           /* near-black */
    color: #fff;
    /* Your request: heavy rounding + blue border */
    border-radius: 24px;           /* (Better UX than 25%; pill-like can feel odd) */
    border: 2px solid #2b6cff;     /* blue edge */
    box-shadow:
        0 12px 40px rgba(0,0,0,.55),
        0 2px 10px rgba(0,0,0,.35);

    /* Spacing */
    padding: 1rem 1rem 1.25rem;

    /* Layer */
    z-index: 1008;

    /* Animation */
    transition: transform .18s ease, opacity .18s ease;
}

.popup-mini[b-ys3jfz0z78] {
    /* Center it */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;

    /* Sizing */
    width: calc(100vw - 2rem) * 0.8;     /* breathable on mobile */
    max-width: 550px * 0.8;              /* your target on laptop */
    max-height: min(80vh, 720px);  /* avoid full-screen takeover */
    overflow: auto;

    /* Visual style */
    background: #0b0b0b;           /* near-black */
    color: #fff;
    /* Your request: heavy rounding + blue border */
    border-radius: 24px;           /* (Better UX than 25%; pill-like can feel odd) */
    border: 2px solid #2b6cff;     /* blue edge */
    box-shadow:
        0 12px 40px rgba(0,0,0,.55),
        0 2px 10px rgba(0,0,0,.35);

    /* Spacing */
    padding: 1rem 1rem 1.25rem;

    /* Layer */
    z-index: 1008;

    /* Animation */
    transition: transform .18s ease, opacity .18s ease;
}

/* Header */
.popup-header[b-ys3jfz0z78] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    position: sticky; top: 0;      /* keeps close button visible when long content */
    background: linear-gradient(#0b0b0b, #0b0b0b); /* ensures sticky looks clean */
    padding-top: .25rem;
    z-index: 1;
}

.popup-header h2[b-ys3jfz0z78] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .2px;
}

/* Close button */
.popup-close[b-ys3jfz0z78] {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .25rem;
    border-radius: .5rem;
}

.popup-close:hover[b-ys3jfz0z78] { background: rgba(255,255,255,.08); }

/* Body sections */
.popup-body[b-ys3jfz0z78] {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}

.popup-section[b-ys3jfz0z78] {
    padding: .75rem .5rem .25rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.popup-section:first-of-type[b-ys3jfz0z78] {
    border-top: none;
}

/* Typography */
.popup-section h3[b-ys3jfz0z78] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}

.popup-section p[b-ys3jfz0z78], li[b-ys3jfz0z78] {
    margin: 0 0 .25rem 0;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
}

/* Small screens: give it more breathing room */
@media (max-width: 420px) {
.popup[b-ys3jfz0z78] { border-radius: 18px; }
}

/* Icon buttons */
.icon-btn[b-ys3jfz0z78] {
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  padding: .25rem .25rem;
  margin-right: 1.5rem;
  cursor: pointer;
  transition: transform .1s ease, opacity .15s ease;
}

.icon-btn:hover[b-ys3jfz0z78] {
  transform: scale(1.1);
  opacity: 0.85;
}

.icon-btn:focus-visible[b-ys3jfz0z78] {
  outline: 2px solid var(--sum-focus, #0af);
  border-radius: 6px;
}
/* /Layout/DrawerMenu.razor.rz.scp.css */
/* overlay */
.drawer-overlay[b-1diugwbs9b] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 996;
}

/* drawer panel */
.drawer[b-1diugwbs9b] {
    /* ← tweak width/height/position right here */
    position: fixed;
    top: 0;
    right: 0;               /* change to left:0 for left-side drawer */
    height: 100vh;          /* full height; make 80vh if you want, etc. */
    width: 320px;           /* ← change width as you like */
    max-width: 90vw;

    background: #111;
    color: #fff;
    box-shadow: -8px 0 24px rgba(0,0,0,.35);
    z-index: 997;

    /* slide-in animation */
    transform: translateX(100%);
    transition: transform .22s ease;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.drawer.open[b-1diugwbs9b] { transform: translateX(0); }

/* internals */
.drawer-nav[b-1diugwbs9b] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.drawer-nav button[b-1diugwbs9b] {
    text-align: left;
    color: #fff;
    background: transparent;
    border: none;
    font: inherit;
    text-decoration: none;
    padding: .4rem 0;
}

.drawer-nav button:hover[b-1diugwbs9b] { text-decoration: underline; }

.drawer-nav a[b-1diugwbs9b] {
    color: #fff;
    text-decoration: none;
    padding: .4rem 0;
}

.drawer-nav a:hover[b-1diugwbs9b] { text-decoration: underline; }

.drawer-nav hr[b-1diugwbs9b] {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.15);
    margin: .75rem 0;
}

.popup-header[b-1diugwbs9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.popup-close[b-1diugwbs9b] {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-6ml6dwifdu] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-6ml6dwifdu] {
    flex: 1;
}

.sidebar[b-6ml6dwifdu] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-6ml6dwifdu] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-6ml6dwifdu]  a, .top-row[b-6ml6dwifdu]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-6ml6dwifdu]  a:hover, .top-row[b-6ml6dwifdu]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-6ml6dwifdu]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* @media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
} */

@media (min-width: 641px) {
    .page[b-6ml6dwifdu] {
        flex-direction: row;
    }

    .sidebar[b-6ml6dwifdu] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-6ml6dwifdu] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-6ml6dwifdu]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-6ml6dwifdu], article[b-6ml6dwifdu] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* new: tiny button style for the top bar */
.top-menu-btn[b-6ml6dwifdu] {
    margin-left: 1rem;
    padding: .4rem .6rem;
    border: 1px solid #d6d5d5;
    background: #fff;
    border-radius: .375rem;
    cursor: pointer;
}

.top-menu-btn:hover[b-6ml6dwifdu] { background: #f1f1f1; }
/* /Pages/Home.razor.rz.scp.css */
.home-container[b-j1c5zpohm5] {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    gap: .25rem;
    justify-content: center;
    align-items: center;
}

.home-container h2[b-j1c5zpohm5] {
    text-align: center;
}

.home-header[b-j1c5zpohm5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    position: sticky; top: 0;      /* keeps close button visible when long content */
    background: linear-gradient(#0b0b0b, #0b0b0b); /* ensures sticky looks clean */
    padding-top: .25rem;
    z-index: 1;
}

.home-header h2[b-j1c5zpohm5] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .2px;
}

.home-body[b-j1c5zpohm5] {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}

.home-section[b-j1c5zpohm5] {
    padding: .75rem .5rem .25rem;
    text-align: center;
}

.home-game[b-j1c5zpohm5] {
    padding: .75rem .5rem .25rem;
    text-align: left;
}

.home-game:hover[b-j1c5zpohm5] {
    transform: translate(.1rem, .1rem);
    background-color: #9BF8F4;
    cursor: pointer;
}

/* Typography */
.home-section h3[b-j1c5zpohm5] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}

.home-section p[b-j1c5zpohm5], button[b-j1c5zpohm5] {
    margin: 0 0 .25rem 0;
    line-height: 1.5;
    color: rgba(0, 0, 0);
}

.home-game h3[b-j1c5zpohm5] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}

.home-game p[b-j1c5zpohm5] {
    margin: 0 0 .25rem 0;
    line-height: 1.25;
    color: rgba(0, 0, 0);
    text-decoration: none;
}
/* /Pages/Legal/Credits.razor.rz.scp.css */
/* Page wrapper */
.legal-page[b-a0kjeason6] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--qb-bg, #0b0b0d);
    color: var(--qb-text, #f4f4f6);
}

/* Hero header */
.legal-hero[b-a0kjeason6] {
    background: radial-gradient(1200px circle at 20% -10%, #1a1a22, transparent 60%),
                radial-gradient(1000px circle at 90% 0%, #12121a, transparent 55%),
                #0d0d12;
    /* background: #0d0d12; */
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: clamp(2rem, 4vw, 3.5rem) 1.25rem;
}

.legal-hero__inner[b-a0kjeason6] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
}

.legal-title[b-a0kjeason6] {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem 0;
    font-weight: 800;
}

.legal-subtitle[b-a0kjeason6] {
    margin: 0 0 1.25rem 0;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    opacity: 0.85;
    line-height: 1.6;
}

/* Meta strip */
.legal-meta[b-a0kjeason6] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.legal-meta__label[b-a0kjeason6] {
    opacity: 0.7;
}

.legal-back[b-a0kjeason6] {
    display: inline-flex;
    /* gap: 0.5rem; */
    border: none;
    align-items: center;
    background: rgba(255,255,255,0.04);
    font-size: 1.5rem;
    background: none;
}

.legal-meta__value[b-a0kjeason6] {
    font-weight: 600;
}

/* Content area */
.legal-content[b-a0kjeason6] {
    flex: 1;
    padding: clamp(1.25rem, 3vw, 2rem) 1.25rem 3rem;
}

.legal-article[b-a0kjeason6] {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

/* Sections */
.legal-section[b-a0kjeason6] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    line-height: 1.7;
}

.legal-section h2[b-a0kjeason6] {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 700;
}

.legal-section p[b-a0kjeason6] {
    margin: 0.25rem 0 0 0;
    opacity: 0.92;
}

.legal-section ul[b-a0kjeason6] {
    margin: 0.5rem 0 0 1.1rem;
    padding: 0;
}

.legal-section li[b-a0kjeason6] {
    margin: 0.25rem 0;
}

/* Callout / emphasized section */
.legal-section--callout[b-a0kjeason6] {
    background: rgba(80,120,255,0.08);
    border-color: rgba(80,120,255,0.25);
}

/* Links */
.legal-section a[b-a0kjeason6],
.legal-footer a[b-a0kjeason6] {
    color: #9db6ff;
    text-decoration: none;
    font-weight: 600;
}

.legal-section a:hover[b-a0kjeason6],
.legal-footer a:hover[b-a0kjeason6] {
    text-decoration: underline;
}

/* Footer */
.legal-footer[b-a0kjeason6] {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.95rem;
    opacity: 0.9;
}

.legal-footer__links[b-a0kjeason6] {
    display: inline-flex;
    gap: 1rem;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .legal-footer[b-a0kjeason6] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Legal/PrivacyPolicy.razor.rz.scp.css */
/* Page wrapper */
.legal-page[b-8g1q93g0w0] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--qb-bg, #0b0b0d);
    color: var(--qb-text, #f4f4f6);
}

/* Hero header */
.legal-hero[b-8g1q93g0w0] {
    background: radial-gradient(1200px circle at 20% -10%, #1a1a22, transparent 60%),
                radial-gradient(1000px circle at 90% 0%, #12121a, transparent 55%),
                #0d0d12;
    /* background: #0d0d12; */
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: clamp(2rem, 4vw, 3.5rem) 1.25rem;
}

.legal-hero__inner[b-8g1q93g0w0] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
}

.legal-title[b-8g1q93g0w0] {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem 0;
    font-weight: 800;
}

.legal-subtitle[b-8g1q93g0w0] {
    margin: 0 0 1.25rem 0;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    opacity: 0.85;
    line-height: 1.6;
}

/* Meta strip */
.legal-meta[b-8g1q93g0w0] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.legal-meta__label[b-8g1q93g0w0] {
    opacity: 0.7;
}

.legal-back[b-8g1q93g0w0] {
    display: inline-flex;
    /* gap: 0.5rem; */
    border: none;
    align-items: center;
    background: rgba(255,255,255,0.04);
    font-size: 1.5rem;
    background: none;
}

.legal-meta__value[b-8g1q93g0w0] {
    font-weight: 600;
}

/* Content area */
.legal-content[b-8g1q93g0w0] {
    flex: 1;
    padding: clamp(1.25rem, 3vw, 2rem) 1.25rem 3rem;
}

.legal-article[b-8g1q93g0w0] {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

/* Sections */
.legal-section[b-8g1q93g0w0] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    line-height: 1.7;
}

.legal-section h2[b-8g1q93g0w0] {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 700;
}

.legal-section p[b-8g1q93g0w0] {
    margin: 0.25rem 0 0 0;
    opacity: 0.92;
}

.legal-section ul[b-8g1q93g0w0] {
    margin: 0.5rem 0 0 1.1rem;
    padding: 0;
}

.legal-section li[b-8g1q93g0w0] {
    margin: 0.25rem 0;
}

/* Callout / emphasized section */
.legal-section--callout[b-8g1q93g0w0] {
    background: rgba(80,120,255,0.08);
    border-color: rgba(80,120,255,0.25);
}

/* Links */
.legal-section a[b-8g1q93g0w0],
.legal-footer a[b-8g1q93g0w0] {
    color: #9db6ff;
    text-decoration: none;
    font-weight: 600;
}

.legal-section a:hover[b-8g1q93g0w0],
.legal-footer a:hover[b-8g1q93g0w0] {
    text-decoration: underline;
}

/* Footer */
.legal-footer[b-8g1q93g0w0] {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.95rem;
    opacity: 0.9;
}

.legal-footer__links[b-8g1q93g0w0] {
    display: inline-flex;
    gap: 1rem;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .legal-footer[b-8g1q93g0w0] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Legal/TermsOfService.razor.rz.scp.css */
/* Page wrapper */
.legal-page[b-t9z9s0jrl1] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--qb-bg, #0b0b0d);
    color: var(--qb-text, #f4f4f6);
}

/* Hero header */
.legal-hero[b-t9z9s0jrl1] {
    background: radial-gradient(1200px circle at 20% -10%, #1a1a22, transparent 60%),
                radial-gradient(1000px circle at 90% 0%, #12121a, transparent 55%),
                #0d0d12;
    /* background: #0d0d12; */
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: clamp(2rem, 4vw, 3.5rem) 1.25rem;
}

.legal-hero__inner[b-t9z9s0jrl1] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
}

.legal-title[b-t9z9s0jrl1] {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.02em;
    margin: 0 0 0.5rem 0;
    font-weight: 800;
}

.legal-subtitle[b-t9z9s0jrl1] {
    margin: 0 0 1.25rem 0;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    opacity: 0.85;
    line-height: 1.6;
}

/* Meta strip */
.legal-meta[b-t9z9s0jrl1] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.legal-meta__label[b-t9z9s0jrl1] {
    opacity: 0.7;
}

.legal-back[b-t9z9s0jrl1] {
    display: inline-flex;
    /* gap: 0.5rem; */
    border: none;
    align-items: center;
    background: rgba(255,255,255,0.04);
    font-size: 1.5rem;
    background: none;
}

.legal-meta__value[b-t9z9s0jrl1] {
    font-weight: 600;
}

/* Content area */
.legal-content[b-t9z9s0jrl1] {
    flex: 1;
    padding: clamp(1.25rem, 3vw, 2rem) 1.25rem 3rem;
}

.legal-article[b-t9z9s0jrl1] {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

/* Sections */
.legal-section[b-t9z9s0jrl1] {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    line-height: 1.7;
}

.legal-section h2[b-t9z9s0jrl1] {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 700;
}

.legal-section p[b-t9z9s0jrl1] {
    margin: 0.25rem 0 0 0;
    opacity: 0.92;
}

.legal-section ul[b-t9z9s0jrl1] {
    margin: 0.5rem 0 0 1.1rem;
    padding: 0;
}

.legal-section li[b-t9z9s0jrl1] {
    margin: 0.25rem 0;
}

/* Callout / emphasized section */
.legal-section--callout[b-t9z9s0jrl1] {
    background: rgba(80,120,255,0.08);
    border-color: rgba(80,120,255,0.25);
}

/* Links */
.legal-section a[b-t9z9s0jrl1],
.legal-footer a[b-t9z9s0jrl1] {
    color: #9db6ff;
    text-decoration: none;
    font-weight: 600;
}

.legal-section a:hover[b-t9z9s0jrl1],
.legal-footer a:hover[b-t9z9s0jrl1] {
    text-decoration: underline;
}

/* Footer */
.legal-footer[b-t9z9s0jrl1] {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.95rem;
    opacity: 0.9;
}

.legal-footer__links[b-t9z9s0jrl1] {
    display: inline-flex;
    gap: 1rem;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .legal-footer[b-t9z9s0jrl1] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Numblox.razor.rz.scp.css */
/* Blue Highlight Colors */
/* 85BAF6 - Dark */
/* 8CCEF5 - Medium Dark */
/* 94E3F5 - Medium */
/* 9BF8F4 - Light */

/* Other Colors */

/* F39237 - Orange */

.board-wrapper[b-mw8v77px4m] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.toolbar[b-mw8v77px4m] {
  display: flex;
  justify-content: flex-end; /* right-align the icons */
  width: 100%;
  max-width: calc(4.25 * clamp(64px, 8vw, 96px) + 4 * 0.25rem);
  margin-inline: auto; /* centers with the board */
}

.home-btn[b-mw8v77px4m] {
  margin-right: auto; /* pushes other icons to the right */
}

/* Icon buttons */
.icon-btn[b-mw8v77px4m] {
  background: none;
  border: none;
  color: #000;
  font-size: 1.4rem;
  padding: .25rem .25rem;
  cursor: pointer;
  transition: transform .1s ease, opacity .15s ease;
}

.icon-btn:hover[b-mw8v77px4m] {
  transform: scale(1.1);
  opacity: 0.85;
}

.icon-btn:focus-visible[b-mw8v77px4m] {
  outline: 2px solid var(--sum-focus, #0af);
  border-radius: 6px;
}

.board[b-mw8v77px4m] {
  display: grid;
  gap: 0.25rem;

  /* test */
  /* grid-template-columns: 80px 80px 80px 40px 80px;
  grid-template-rows:    80px 80px 80px 40px 80px; */

  /* Columns 1,2,3,5 = normal; column 4 = thin */
  grid-template-columns: clamp(64px, 8vw, 96px) clamp(64px, 8vw, 96px) clamp(64px, 8vw, 96px) calc(clamp(64px, 8vw, 96px) / 4) clamp(64px, 8vw, 96px);

  /* Rows 1,2,3,5 = normal; row 4 = flat */
  grid-template-rows: clamp(64px, 8vw, 96px) clamp(64px, 8vw, 96px) clamp(64px, 8vw, 96px) calc(clamp(64px, 8vw, 96px) / 4) clamp(64px, 8vw, 96px);

  width: calc(4.5 * clamp(64px, 8vw, 96px) + 4 * 0.25rem);
  margin-inline: auto; /* center the board */
}



.cell:hover[b-mw8v77px4m] {
  transform: translate(.1rem, .1rem);
}

.tile[b-mw8v77px4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    box-sizing: border-box;
    /* no width */
    /* no aspect-ratio */
}


input[b-mw8v77px4m] {
  border: 5px thick black;
  background-color: #9BF8F4;
  caret-color: transparent;
  cursor: pointer;
}

.tile:focus[b-mw8v77px4m] { 
  box-shadow: 0 0 0 2px #80b3ff;
  background-color: #85BAF6;
}

.tile--peer[b-mw8v77px4m] {
  background-color: #94E3F5;
}

.tile--active.tile--duplicate[b-mw8v77px4m] {
  background-color: #d74a48;
}

.tile--sum[b-mw8v77px4m] {
  background-color: #8CCEF5;
}

.tile--duplicate[b-mw8v77px4m] {
  background-color: #d36b69;
}

/* .tile--locked { opacity: .65; } */

.tile--green[b-mw8v77px4m] {
  box-shadow: 0 0 4px 4px rgb(0, 165, 86);
  border-color: rgb(0, 255, 132);
  background-color:rgb(97, 255, 179);
}

.rotate-90[b-mw8v77px4m] {
  transform: rotate(90deg);
  transform-origin: center;
}

.noselect[b-mw8v77px4m] {
  user-select: none;
  pointer-events: none; /* optional: blocks clicks/focus */
  caret-color: transparent; /* hides blinking cursor if focus happens */
}


.won-overlay[b-mw8v77px4m] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 996;
}

.is-won-backdrop[b-mw8v77px4m] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1008;
    backdrop-filter: saturate(110%) blur(2px);
}

/* Modal panel */
.popup[b-mw8v77px4m] {
    /* Center it */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.98);
    opacity: 0;
    pointer-events: none;

    /* Sizing */
    width: calc(100vw - 2rem);     /* breathable on mobile */
    max-width: 550px;              /* your target on laptop */
    max-height: min(80vh, 720px);  /* avoid full-screen takeover */
    overflow: auto;

    /* Visual style */
    background: #0b0b0b;           /* near-black */
    color: #fff;
    /* Your request: heavy rounding + blue border */
    border-radius: 24px;           /* (Better UX than 25%; pill-like can feel odd) */
    border: 2px solid #2b6cff;     /* blue edge */
    box-shadow:
        0 12px 40px rgba(0,0,0,.55),
        0 2px 10px rgba(0,0,0,.35);

    /* Spacing */
    padding: 1rem 1rem 1.25rem;

    /* Layer */
    z-index: 1010;

    /* Animation */
    transition: transform .18s ease, opacity .18s ease;
}

/* Open state toggled by your component */
.congrats-popup[b-mw8v77px4m] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Header (you renamed these, good call) */
.popup-header[b-mw8v77px4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    position: sticky; top: 0;      /* keeps close button visible when long content */
    background: linear-gradient(#0b0b0b, #0b0b0b); /* ensures sticky looks clean */
    padding-top: .25rem;
    z-index: 1;
}

.popup-header h2[b-mw8v77px4m] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .2px;
}

/* Close button */
.popup-close[b-mw8v77px4m] {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .25rem;
    border-radius: .5rem;
}

.popup-close:hover[b-mw8v77px4m] { background: rgba(255,255,255,.08); }

/* Body sections */
.popup-body[b-mw8v77px4m] {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}

.popup-section[b-mw8v77px4m] {
    padding: .75rem .5rem .25rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.popup-section:first-of-type[b-mw8v77px4m] {
    border-top: none;
}

/* Typography */
.popup-section h3[b-mw8v77px4m] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem 0;
}

.popup-section p[b-mw8v77px4m] {
    margin: 0 0 .25rem 0;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
}

/* Small screens: give it more breathing room */
@media (max-width: 420px) {
.popup[b-mw8v77px4m] { border-radius: 18px; }
}