/*############################################################################################################*/
												/* STYLE.CSS */
/*############################################################################################################*/
/*************
* Basic reset
**************/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/******************
* HTML + BODY base
*******************/
html {
    font-size: 14px;           /* base font size */
    scroll-behavior: smooth;   /* smooth scrolling */
    scrollbar-gutter: stable;  /* always reserve scrollbar space, even on
        short pages — otherwise switching between a page that needs a
        scrollbar and one that doesn't shifts the whole layout sideways
        by the scrollbar's width (e.g. Scorecard's date filters) */
}
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    color: #222;
    background-color: #fff;
    /* prevents horizontal scroll bugs */
    overflow-x: hidden;
    /* makes page fill screen */
    min-height: 100vh;
    /* better text rendering */
    -webkit-font-smoothing: antialiased;
}
/* Page layout */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
/**************************
* Remove annoying defaults
***************************/
img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}
/*****************
* Global settings
******************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: #f6f8fb;
}
/* Centered content width */
.container {
    width: 1200px;
    max-width: 92%;
    margin: auto;
}

/****************************************************************************************************************************
															* Header
*****************************************************************************************************************************/
/**************
* Top logo bar
***************/
.top-bar {
    background: white;
    border-bottom: 1px solid #e5e8ee;
    padding: 8px 0;
}
.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-greeting-wrap {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-right: 20px;
    position: relative;
    top: 4px;
}

.plan-badge {
    flex-shrink: 0;
    position: relative;
    top: -2px;
    cursor: help;
}

.plan-badge-free      { color: #6b7480; }
.plan-badge-player    { color: #145AEB; }
.plan-badge-pro       { color: #FF0000; }
.plan-badge-champion  { color: #D500D5; }
.user-greeting {
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #1d2a3a;
    padding-right: 4px; /* small breathing room from the container's own edge */
}
/* Username in the header greeting -- links to the player's own vanity
   profile page (/username). Same blue as the buttons (#2f6fed); the
   dotted underline (a border, not text-decoration) turns solid on hover.
   currentColor keeps the line the same color as the text. */
.user-greeting-link {
    color: #2f6fed; /* exact button blue */
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px; /* keeps the dots from touching the letters */
}
.user-greeting-link:hover {
    border-bottom-style: solid;
}
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* 380x70 native size, at 35px height: 380/70*35 = 190px exactly. */
#siteLogoImage {
    position: relative;
    width: 190px;
    height: 35px;
    background-image: url('../image/website-logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}
/* Forces the browser to discover, fetch, AND fully decode/rasterize
   the hover image up front — the same natural path the base logo
   above already gets via its own plain background-image, since CSS-
   discovered resources are treated as "real", immediately-needed
   resources, unlike one only ever referenced inside a :hover rule
   (which browsers fetch lazily, on first hover, causing a brief
   flash the very first time). 0-sized and clipped rather than
   display:none, since display:none resources don't load at all. */
#siteLogoImage::before {
    content: url('../image/website-logo-hover.svg');
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
#siteLogoImage:hover {
    background-image: url('../image/website-logo-hover.svg');
}
.logo span {
    font-size: 22px;
    font-weight: 600;
    color: #1d2a3a;
}
/* Slogan next to the logo (header.php). Beside the logo on wide screens;
   under it, smaller, on narrower ones (so it never pushes into the
   greeting on the right); hidden on very small phones. ".logo .site-slogan"
   rather than ".site-slogan" alone: it must beat ".logo span" just above. */
.logo .site-slogan {
    font-size: 13px;
    font-style: italic;
    font-weight: 600;
    color: #6b7480;
    white-space: nowrap;
    position: relative;
    top: 3px; /* lines up with the logo's own text baseline */
}
@media (max-width: 760px) {
    .logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .logo .site-slogan {
        font-size: 11px;
        top: 0;
    }
}
@media (max-width: 380px) {
    .logo .site-slogan { display: none; }
}

/**********
* Menu bar
***********/
.menu-bar {
    background: white;
    border-bottom: 1px solid #e5e8ee;
}
.menu-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
}
/* Left links */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 32px;
    padding-left: 0;
}
.nav-menu a {
    text-decoration: none;
    color: #3b4a5a;
    font-size: 15px;
    font-weight: 500;
    transition: 0.2s;
}
.nav-menu a:hover {
    color: #2f6fed;
}
/* Right area (login + button) */
.menu-right {
    display: flex;
    align-items: center;
    gap: 22px;
}
.login {
    text-decoration: none;
    color: #3b4a5a;
    font-weight: 500;
}
.login:hover {
    color: #2f6fed;
}
/* CTA button */
.btn-primary {
    background: #2f6fed;
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}
.btn-primary:hover {
    background: #2457c7;
}

.btn-disabled {
    background: #e0e0e0;
    color: #999;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: not-allowed;
    display: inline-block;
}

/* Same specificity fix as the Scorecard preset buttons: any .btn-primary
   link that ends up inside #PageContent (e.g. the pricing page's CTA
   buttons) otherwise loses its white text/no-underline styling to the
   site-wide #PageContent a rule, since an ID selector always beats a
   plain class regardless of which one is more "specific" in spirit. */
#PageContent .btn-primary,
#PageContent .btn-primary:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: none;
}
/* Same fix, btn-secondary variant (e.g. the logged-in homepage's
   Scorecard/Journal buttons) — unlike btn-primary, this one has its
   own genuine border on all four sides (part of its outlined-pill
   look), so the fix restores the correct gray instead of removing
   the bottom edge outright — otherwise the border looks broken/open
   on that one side instead of just losing the unwanted blue tint. */
#PageContent .btn-secondary {
    text-decoration: none;
    border-bottom: 1px solid #c8d0da;
}
#PageContent .btn-secondary:hover {
    text-decoration: none;
    border-bottom: 1px solid #b8c2cf;
}
/****************
* HAMBURGER ICON
*****************/
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    padding: 13px 0; /* container height is now auto (driven by content) —
        without this, the closed-state bar shrinks to the hamburger's own
        tiny ~19px natural size and hugs the top/bottom borders directly */
}
.hamburger span {
    width: 24px;
    height: 3px;
    background: #333;
    display: block;
}
/* MOBILE MODE */
@media (max-width: 900px) {
    .hamburger {
        display: flex;
    }

    /* Lets nav-menu and menu-right each wrap onto their own full-width
       row, stacked in DOM order beneath the hamburger row — no matter
       how tall either one turns out to be, so nothing needs a hardcoded
       pixel offset that would break the moment a link gets added or
       padding changes. */
    .menu-bar .container {
        flex-wrap: wrap;
        height: auto; /* desktop's fixed 46px would otherwise stay locked
            while the wrapped rows visually overflow past it — #PageContent
            (the next element in the DOM) would then render starting right
            after that fixed 46px, landing on top of the overflow instead
            of being pushed down by it. */
    }

    .nav-menu {
        width: 100%;
        background: white;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 25px 0;
        display: none;
        border-top: 1px solid #e5e8ee;
        border-bottom: 1px solid #e5e8ee;
    }

    .nav-menu.active {
        display: flex;
    }

    .menu-right {
        width: 100%;
        background: white;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 20px 0 25px;
        display: none;
        border-bottom: 1px solid #e5e8ee;
    }

    .menu-right.active {
        display: flex;
    }
}

/****************************************************************************************************************************
														 * Page content
*****************************************************************************************************************************/
#PageContent {
    flex: 1; /* flex: 1 = take all remaining vertical space. This pushes the footer to the bottom when page is short. */
    padding-bottom: 60px;
}
.PageTitle {
    font-size: 22px;
    font-weight: 600;
    color: #1d2a3a;

    margin-top: 12px;     /* space after header */
    margin-bottom: 12px;  /* space before content */
}

/* Separator in the admin page title ("Admin › Users") -- lighter and
   spaced out so the section name reads as the main part of the title. */
.admin-title-sep {
    color: #9aa6b2;
    font-weight: 400;
    margin: 0 10px;
}

.vanity-title {
    display: flex;
    align-items: center;
}

.vanity-title-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
/* On the play page specifically, the board panel already has its own
   "Roulette Table" heading, so the page title can be even tighter —
   add class="play-page" in header.php's page-class switch to use this. */
.play-page .PageTitle {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 18px;
}

.article-page-title {
    font-size: 28px;
}
/* Links */
#PageContent a {
    color: #1e90ff;                 /* your main blue */
    text-decoration: none;
	font-weight: 600;
    border-bottom: 1px dotted #1e90ff; /* reserve space */
    transition: 0.2s;
}
#PageContent a:hover {
    color: #1e90ff;                 /* keep same color */
    border-bottom: 1px solid #1e90ff;   /* dotted underline appears */
}

/****************************************************************************************************************************
															* Footer
*****************************************************************************************************************************/
/* #FooterDiv{ min-height: 150px; padding: 30px 0; background: #f7f7f7; border-top: 1px solid #e5e5e5; } */
#FooterDiv {
    background: #f7f7f7;
    border-top: 1px solid #e5e5e5;
    padding-top: 40px;
    margin-top: 80px;
}

/* Container */
.footer-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 0 20px 40px;
}

/* Columns */
.footer-column h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 8px;
}

.footer-column a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.footer-column a:hover {
    color: #000;
}

/* Social icons (X, YouTube) — one row, icon-only; their text labels
   moved into title= tooltips instead of staying visible (see
   footer.php), so there's no adjacent link text for .footer-social-icon
   to align against or space itself from anymore — flex handles both
   directly on the row itself. */
.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social-link {
    display: inline-flex;
}

/* A shade darker than the link text used elsewhere in this footer,
   so it still reads as a small logo mark rather than blending into
   the line, but noticeably lighter than pure black now that these
   icons are large enough for full black to feel heavy-handed;
   currentColor would tie it to the body links' own lighter #666
   instead, which is why this stays its own fixed shade. */
.footer-social-icon {
    fill: #6b6b6b;
}

.footer-social-link:hover .footer-social-icon {
    fill: #444;
}

/* Bottom copyright bar */
.footer-bottom {
    border-top: 1px solid #e5e5e5;
    padding: 18px;
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-disclaimer {
    max-width: 1100px;
    margin: 0 auto 24px;
    padding: 14px 16px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    text-align: center;
}

.footer-lang-select {
    font-size: 12px;
    font-weight: 600;
    color: #3b4a5a;
    background: #fff;
    border: 1px solid #d8dbe3;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    max-width: 140px;
}

.footer-lang-select:hover {
    border-color: #3b4a5a;
}

/****************************************************************************************************************************
															* Form
*****************************************************************************************************************************/
/****************
* Form container
*****************/
.form-container {
    max-width: 500px;   /* ideal form width */
}

.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

.settings-avatar-preview {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.settings-delete-avatar-btn {
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #777;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
    white-space: nowrap;
}

.settings-delete-avatar-btn:hover {
    background: var(--rc-red);
    border-color: var(--rc-red);
    color: #fff;
}

.form-group {
    margin-bottom: 20px;
}
/* Label */
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #2d3a4a;
}

.admin-form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.admin-form-label-row .form-label {
    margin-bottom: 0;
}

.admin-view-article-link {
    font-size: 13px;
    font-weight: 600;
}
.form-label.required::after {
    content: " *";
    color: crimson;
    font-weight: 600;
}
.admin-mm-field-label.required::after {
    content: " *";
    color: crimson;
    font-weight: 600;
}
.form-required-note {
    font-size: 12px;
    color: #7a8896;
    font-style: italic;
    text-align: right;     /* aligns text to the right */
    margin-top: 10px;
    margin-right: 20px;    /* small offset from edge */
}
.required-mark {
    color: crimson;
    font-weight: 600;
}
/******************************************
* Inputs (text, email, password, textarea)
*******************************************/
.form-control {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #2d3a4a;

    background: #fff;
    border: 1px solid #d6dbe3;
    border-radius: 6px;

    transition: border-color 0.2s, box-shadow 0.2s;
}
/* Focus state */
.form-control:focus {
    outline: none;
    border-color: #2f6fed;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}
/* Placeholder */
.form-control::placeholder {
    color: #9aa6b2;
}
/* Textarea (specific) */
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}
/* Counter under Textarea */
#message-counter {
    text-align: right;
    font-size: 11px;
}
/* Helper text (under input fields) */
.form-text {
    font-size: 12px;
    color: #7a8896;
    margin-top: 5px;
}
.form-text::before {
    content: "•";
    margin-right: 3px;
    color: #7a8896; /* same as your text or slightly lighter */
}
.form-text.no-bullet::before {
    content: none;
}
.form-radio-option {
    display: block;
    font-size: 14px;
    color: #2d3a4a;
    margin-bottom: 4px;
    cursor: pointer;
}
.form-radio-option input[type="radio"] {
    margin-right: 6px;
}
/**********************************
* Ajax feedback on username choice
***********************************/
/* Ajax feedback placeholder div */
#username-ajax-feedback { margin-top: 6px; }
/* Hide username ajax feedback line when empty (also hides the bullet) */
#username-ajax-feedback:empty {
    display: none;
}
#username-ajax-feedback.ok {
    color: #28a745; /* green */
}
#username-ajax-feedback.ko {
    color: #dc3545; /* red */
}
/******************
* Password wrapper
*******************/
.password-wrapper {
    position: relative;
}
/* Add space for the icon */
.password-wrapper .form-control {
    padding-right: 40px;
}
/* Eye icon */
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #7a8896; 	/* default gray */
    user-select: none;
	transition: color 0.2s;
}
.toggle-password:hover {
    color: #2f6fed;
}
.toggle-password.active {
    color: crimson;   /* when password is visible */
}
/*********************************
* Password Strength bar container
**********************************/
.password-strength {
    height: 6px;
    background: #e5e8ee;
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}
/* Actual bar */
.strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
}
/* Colors */
.strength-weak {
    background: #dc3545;
}
.strength-medium {
    background: #f0ad4e;
}
.strength-strong {
    background: #28a745;
}
/*********
* Buttons
**********/
.form-actions {
    margin-top: 25px;
    display: flex;
    gap: 10px;
    /* justify-content: flex-end; */
}
.btn {
    display: inline-block;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}
/* Primary */
.btn-primary {
    background: #2f6fed;
    color: #fff;
}
.btn-primary:hover {
    background: #2457c7;
}
/* Smaller variant, used for Logout so it doesn't dominate the nav bar
   like the main Register CTA — sized to match the roulette board's
   Validate / "what to play next" buttons. */
.btn-primary.btn-compact {
    padding: 8px 14px;
}
.btn-secondary {
    background: #dfe6ef;   /* darker than before */
    color: #2d3a4a;
	border: 1px solid #c8d0da;
}

.btn-secondary:hover {
    background: #cfd8e3;
	border-color: #b8c2cf;
}

.btn-danger {
    background: #b0281e;
    color: #fff;
    border: 1px solid #8f1f17;
}

.btn-danger:hover {
    background: #8f1f17;
}

.account-management-option {
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
}

.account-management-option form {
    margin-top: 14px;
}

.account-management-option:last-child {
    border-bottom: none;
}

.account-management-option h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
}

.account-management-option-danger h3 {
    color: #b0281e;
}
/* Gives a subtle “click” feeling */
.btn:active {
    transform: translateY(1px);
}
/******************
* Checkbox & Radio
*******************/
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}

.admin-mm-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.admin-mm-field-label {
    font-size: 14px;
    white-space: nowrap;
}

.admin-section-level-label {
    font-weight: 500;
}

.admin-mm-number-input {
    width: 90px;
    flex: none;
}

.admin-sim-count-input {
    width: 65px;
}

.cf-turnstile + .form-check {
    margin-top: 20px;
}
/* Hide default */
.form-check input {
    display: none;
}
/* Custom box */
.form-check-label {
    position: relative;
    padding-left: 26px;
    cursor: pointer;
}
/* Checkbox square */
.form-check-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border: 1px solid #c8d0da;
    border-radius: 4px;
    background: #fff;
}
/* Checked state */
.form-check input:checked + .form-check-label::before {
    background: #2f6fed;
    border-color: #2f6fed;
}
/* Checkmark */
.form-check input:checked + .form-check-label::after {
    content: "✓";
    position: absolute;
    left: 3px;
    top: 0;
    font-size: 12px;
    color: white;
}
/***************
* Radio buttons
****************/
.form-radio-label::before {
    border-radius: 50%;
}
.form-check input[type="radio"]:checked + .form-radio-label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}
/****************************************************************************************************************************
														 * Messages
*****************************************************************************************************************************/
.alert {
	position: relative;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid transparent;
}
/* Error (red) */
.alert-error {
    background: #fdecea;
    color: #b42318;
    border-color: #f5c2c0;
	border-left: 4px solid #dc3545;
}
/* Success (green) */
.alert-success {
    background: #edf7ed;
    color: #1e7e34;
    border-color: #c3e6cb;
	border-left: 4px solid #28a745;
}
/* Info (blue) */
.alert-info {
    background: #eaf2fe;
    color: #1a4d8f;
    border-color: #c3d9f5;
	border-left: 4px solid #2f6fed;
}

/* Brief, self-dismissing toast -- used by "Set as default" so the admin
   never has to reload the page or manually close a persistent alert. */
.admin-sim-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.admin-sim-toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.admin-sim-toast-success {
    background: #edf7ed;
    color: #1e7e34;
    border-left: 4px solid #28a745;
}

.admin-sim-toast-error {
    background: #fdecea;
    color: #b42318;
    border-left: 4px solid #dc3545;
}

/* Close button in form messages */
.alert-close {
    position: absolute;
    right: 12px;
    top: 10px;
    cursor: pointer;
    font-size: 16px;
    color: inherit;
    opacity: 0.6;
}
.alert-close:hover {
    opacity: 1;
}
/* Hide confirm new email or password fields at page opening */
.confirm-email-group,
.confirm-password-group {
    display: none;
}
/****************************************************************************************************************************
														 * Document table
*****************************************************************************************************************************/
/* Table container */
.table-container {
    width: 100%;
    overflow-x: auto;
}
/* Table base */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
/* Header */
.table thead th {
    text-align: center;
    padding: 10px;
    border: 1px solid #e0e0e0;
    background: #f5f7fa;
    font-weight: 600;
}
/* Rows */
.table tbody td {
    padding: 10px;
    border: 1px solid #eaeaea;
}
/* Alternate row colors */
.table tbody tr:nth-child(even) {
    background-color: #f0f6ff; /* light blue */
}
.table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}
/* Center specific columns */
.table tbody td:nth-child(1), /* ID */
.table tbody td:nth-child(3), /* Date */
.table tbody td:nth-child(4)  /* Status */
{
    text-align: center;
}
/* Optional: hover effect */
.table tbody tr:hover {
    background-color: #e6f0ff;
}
/* Status styles */
.status-active,
.status-inactive {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
.status-active {
    background-color: #e8f5e9;
    color: #2e7d32;
}
.status-inactive {
    background-color: #fdecea;
    color: #c62828;
}
/* Column sizing */
.col-doc-id {
    width: 80px;
    text-align: center;
}
.col-doc-creation-date {
    width: 140px;
    text-align: center;
    white-space: nowrap;
}
.col-doc-status {
    width: 120px;
    text-align: center;
}
/* Let title take remaining space */
.table td:not(.col-doc-id):not(.col-doc-creation-date ):not(.col-doc-status) {
    width: auto;
}

/************
* Pagination
*************/
.pagination {
    margin-top: 20px;
    text-align: center;
}
.page-link {
    display: inline-block;
    margin: 0 4px;
    padding: 6px 10px;
    border: 1px solid #ddd !important;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background: #fff;
}
.page-link:hover {
    background: #f0f6ff;
}
.page-link.active {
    background: #007bff;
    color: #fff !important; /* force white text */
    border-color: #007bff;
}
.page-link:focus {
    outline: none;
}
.page-dots {
    display: inline-block;
    margin: 0 6px;
    color: #999;
}
/****************************************************************************************************************************
                                                        * Legal pages (Privacy / Terms)
*****************************************************************************************************************************/
.legal-page {
    /* Deliberately no width/margin rules here — legal-page and container
       are the SAME element (#PageContent), so anything set here replaces
       container's own centering entirely rather than narrowing content
       within it. The readable-width cap lives on .legal-card (an inner
       element) instead, so the outer container stays positioned exactly
       like every other page (matching the nav's own alignment). */
}
.legal-card {
    background: #fff;
    border: 1px solid #e5e8ee;
    border-radius: 10px;
    padding: 20px 22px;
    max-width: min(900px, 92vw); /* readable line length, without
        replacing the outer container's own centering/positioning —
        this naturally sits flush at the container's left edge,
        same as the nav above it */
}
.legal-updated {
    color: #7a8896;
    font-size: 13px;
    margin-top: -10px;
    margin-bottom: 18px;
}
.legal-page h2 {
    margin-top: 18px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #1d2a3a;
}
.legal-page p {
    margin-bottom: 12px;
    color: #2d3a4a;
}
.legal-page ul {
    list-style: disc;
    padding-left: 20px;
    margin: 8px 0 12px;
}
.legal-page li {
    margin-bottom: 8px;
    color: #2d3a4a;
}
.legal-page .muted {
	margin-top: 20px;
    color: #7a8896;
}
.legal-page .note {
    background: #f5f7fa;
    border: 1px solid #e5e8ee;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 14px 0;
    color: #2d3a4a;
}
/****************************************************************
* Pricing page
*****************************************************************/

.pr-intro {
    max-width: 900px;
    margin: 0 auto 30px;
    text-align: center;
}

.pr-payments-notice {
    max-width: 900px;
    margin: 0 auto 24px;
    padding: 14px 16px;
    background: #fff8e6;
    border: 1px solid #f0dca0;
    border-radius: 8px;
    font-size: 14px;
    color: #4a3c1a;
    line-height: 1.5;
    text-align: center;
}

.pr-free-bonus-notice {
    max-width: 900px;
    margin: 0 auto 24px;
    padding: 14px 16px;
    background: #e8f8ee;
    border: 1px solid #a3ddb8;
    border-radius: 8px;
    font-size: 14px;
    color: #1e6b3c;
    line-height: 1.5;
    text-align: center;
}

.pr-intro p {
    font-size: 15px;
    line-height: 1.6;
    color: #3b4a5a;
}

.pr-billing-toggle {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}

.pr-toggle-btn {
    padding: 8px 18px;
    border: 1px solid #d6dbe3;
    border-radius: 20px;
    background: #fff;
    color: #3b4a5a;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.pr-toggle-btn:hover {
    border-color: #2f6fed;
}

.pr-toggle-btn.pr-toggle-active {
    background: #2f6fed;
    border-color: #2f6fed;
    color: #fff;
}

.pr-toggle-btn.pr-toggle-active:hover {
    background: #2457c7;
    border-color: #2457c7;
}

.pr-toggle-badge {
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

.pr-table {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.pr-column {
    position: relative;
    background: #fff;
    border: 1px solid #e5e8ee;
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.pr-column-featured {
    border: 2px solid #2f6fed;
    box-shadow: 0 4px 16px rgba(47,111,237,0.15);
}

.pr-featured-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #2f6fed;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap; /* grows wider (symmetrically, since it's centered) rather than wrapping "Most popular" onto 2 lines at a narrow viewport (e.g. half-screen, playing alongside charts) — a wrapped 2nd line was covering the Pro column's own title text right underneath it */
    z-index: 3; /* stays above .pr-compare-featured-border's own z-index: 2 */
}

.pr-column-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1d2a3a;
    margin-bottom: 14px;
}

.pr-price {
    margin-bottom: 4px;
}

.pr-price-amount {
    font-size: 34px;
    font-weight: 700;
    color: #1d2a3a;
}

.pr-price-period {
    font-size: 13px;
    color: #777;
}

.pr-price-note {
    font-size: 12px;
    color: #999;
    min-height: 16px;
    margin-bottom: 0px;
}

.pr-sessions {
    font-size: 14px;
    font-weight: 600;
    color: #3b4a5a;
    background: #f6f8fb;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 20px;
}

.pr-cta {
    margin-top: auto;
    margin-bottom: 5px;
    width: 100%;
    min-width: 100px;
    box-sizing: border-box;
    text-align: center;
}

/* Explicit, unambiguous hover — same darker blue as the homepage's
   Play button (.btn-primary:hover already does this via the global
   rule, but this makes it certain rather than relying on cascade). */
#PageContent .pr-cta:hover {
    background: #2457c7;
}

.pr-note {
    max-width: 900px;
    margin: 24px auto 0;
    text-align: center;
}

/* New feature-comparison table (pricing page redesign) - a 5-column
   CSS grid (feature-label column + 4 plan columns), items emitted in
   row-major order so grid-auto-flow lays them out correctly without
   an actual table element, same general approach the old 4-column
   .pr-table already used. */
.pr-compare-table {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid #e5e8ee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    /* Breathing room specifically so the "Most popular" pill can sit
       right on the featured column's own top border again (poking
       above row 1, its original look) without this same overflow:hidden
       (needed for the rounded corners at the table's actual edges)
       clipping it off — the pill now pokes into this padding instead
       of into row 1 itself. */
    padding-top: 16px;
}

.pr-compare-cell {
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pr-compare-label-header {
    border-bottom: 1px solid #eef0f4;
}

.pr-compare-feature-label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    font-size: 14px;
    color: #3b4a5a;
}

.pr-compare-feature-sublabel {
    font-size: 12px;
    font-weight: 400;
    color: #8592a3;
    margin-top: 3px;
}

.pr-compare-plan-header {
    flex-direction: column;
    padding: 24px 16px;
    position: relative;
    background: #fafbfc;
}

.pr-compare-plan-header.pr-column-featured {
    background: #eef4ff;
    /* Explicitly cancels the border/box-shadow this would otherwise
       still inherit from the shared base .pr-column-featured rule
       (only its OWN box-shadow is overridden above by a more specific
       selector -- border was never redeclared here, so it kept
       applying to just this header cell). The .pr-compare-featured-border
       overlay now draws ONE continuous border around the whole column,
       rounded top corners included, so this header's own separate
       inset-shadow accent line was just duplicating that same top
       edge as a second, slightly offset straight line above it. */
    border: none;
    box-shadow: none;
}

/* Spans the featured plan's own column from the header through the
   last feature row via an explicit grid-row/grid-column set inline in
   pricing.php (this rule's own grid-row: 1 / -1 is just a fallback,
   overridden there). A real grid item like every other cell, just
   layered visually on top rather than holding real content.
   position:relative (with no visual effect of its own) is required
   here specifically so this paints ABOVE .pr-compare-plan-header,
   which needs position:relative for its own "Most popular" pill —
   CSS always paints a positioned element over a non-positioned
   sibling regardless of DOM order, so without this the header cell's
   own background was covering this border's left/right edges
   wherever they crossed the header row (only the top edge, sitting
   outside the header cell's own box in the table's padding, and the
   sides below the header, were ever actually visible). */
.pr-compare-featured-border {
    grid-row: 1 / -1;
    position: relative;
    z-index: 2;
    border: 2px solid #2f6fed;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(47,111,237,0.15);
    pointer-events: none;
}

.pr-compare-subtitle {
    grid-column: 1 / -1;
    padding: 12px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8592a3;
    background: #f6f8fb;
    border-bottom: 1px solid #eef0f4;
}

.pr-compare-value {
    font-size: 14px;
    font-weight: 600;
    color: #3b4a5a;
}

.pr-compare-featured-col {
    background: #f7faff;
}

.pr-check {
    color: #1e7e34;
    font-size: 18px;
    font-weight: 700;
}

.pr-dash {
    color: #b7bec9;
    font-size: 16px;
}

@media (max-width: 800px) {
    .pr-compare-table {
        grid-template-columns: minmax(160px, 1.2fr) repeat(4, minmax(90px, 1fr));
        overflow-x: auto;
    }
    .pr-compare-cell, .pr-compare-feature-label, .pr-compare-value {
        font-size: 12px;
        padding: 10px 8px;
    }
}

@media (max-width: 900px) {
    .pr-table {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pr-table {
        grid-template-columns: 1fr;
    }
    .pr-billing-toggle {
        flex-wrap: wrap;
    }
}

/****************************************************************
* Admin back-office
*****************************************************************/

.admin-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    width: 200px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 8px;
    position: sticky;
    top: 16px;
}

.admin-main-content {
    flex: 1;
    min-width: 0; /* lets tables/long content shrink instead of overflowing the flex item */
}

.admin-tab {
    padding: 10px 14px;
    color: #3b4a5a;
    text-decoration: none;
    font-weight: 600;
    border-left: 3px solid transparent;
    border-radius: 4px;
}

.admin-tab.admin-tab-active {
    border-left-color: #2f6fed;
    background: #eaf2fe;
    color: #2f6fed;
}

/* Below this, even a narrow sidebar competes too much with the main
   content for space — drop back to a horizontal bar across the top,
   same as before this redesign. */
@media (max-width: 700px) {
    .admin-layout {
        flex-direction: column;
    }
    .admin-sidebar {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        position: static;
    }
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
}

.admin-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f6f8fb;
    border-bottom: 2px solid #e5e8ee;
    color: #3b4a5a;
}

.admin-table th a {
    color: #3b4a5a;
    text-decoration: none;
    font-weight: inherit;
}

.admin-table th a:hover {
    text-decoration: underline;
}

.admin-table th.admin-col-id {
    min-width: 60px;
}

.admin-table th.admin-col-id a {
    white-space: nowrap;
}

.admin-table th.admin-col-wide {
    min-width: 160px;
}

.admin-table th.admin-col-date {
    min-width: 100px;
}

.admin-article-order-cell {
    white-space: nowrap;
    width: 1%;
}

.admin-article-order-btn {
    background: none;
    border: 1px solid #d8dbe3;
    border-radius: 4px;
    color: #5a6472;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    margin-right: 2px;
}

.admin-article-order-btn:hover {
    background: #f0f2f5;
    color: #2d3a4a;
}

.admin-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.admin-badge-active {
    background: #d4edda;
    color: #155724;
}

.admin-badge-inactive {
    background: #e2e3e5;
    color: #383d41;
}

.admin-badge-self-excluded {
    background: #fff3cd;
    color: #856404;
}

.admin-badge-suspended {
    background: #f8d7da;
    color: #721c24;
}

/* Column given some breathing room now that .admin-plan-display-cell
   above has given it back up — a bare icon button next to the pill no
   longer needs to wrap onto its own line the way full "Suspend"/
   "Unsuspend" text did. */
.admin-table th.admin-col-status,
.admin-table td.admin-col-status {
    min-width: 110px;
    white-space: nowrap;
}

.admin-suspend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: #c0392b;
    color: #fff;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
}

.admin-suspend-btn.admin-suspend-btn-unsuspend {
    background: #2e7d32; /* green — a visibly distinct, "restorative" action from the red "suspend" state, not just the same button re-labeled */
}

.admin-suspend-btn:hover:not(:disabled) {
    background: #a5281b;
}

.admin-suspend-btn.admin-suspend-btn-unsuspend:hover:not(:disabled) {
    background: #245e28;
}

.admin-suspend-btn:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
}

.admin-suspend-btn svg {
    width: 14px;
    height: 14px;
}

.admin-plan-cell {
    min-width: 220px;
    white-space: nowrap;
}

/* Higher specificity than .admin-plan-cell alone (both classes, not one)
   so this wins regardless of source order — the plain "Plan" column
   only ever shows a single short word, unlike admin-plan-edit-cell which
   shares the same base class but genuinely needs the room for its
   own select + Save button. */
.admin-plan-cell.admin-plan-display-cell {
    min-width: 80px;
}

.admin-login-empty {
    margin-top: 16px;
}

.admin-login-flag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 4px;
    white-space: nowrap;
}

.admin-login-flag-ip {
    background: #fff3cd;
    color: #856404;
}

.admin-login-flag-device {
    background: #f8d7da;
    color: #721c24;
}

.admin-login-flag-vpn {
    background: #d1ecf1;
    color: #0c5460;
}

.admin-login-device-cell {
    font-family: monospace;
    font-size: 12px;
    color: #5a6472;
}

.admin-login-ua-cell {
    font-size: 12px;
    color: #5a6472;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.admin-bp-unlimited-row {
    margin-top: 8px;
}

.admin-price-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-price-currency {
    font-weight: 600;
    color: #5a6472;
}

.admin-sim-skip-sub {
    display: none;
    margin: -4px 0 12px 26px;
    gap: 16px;
    align-items: center;
}

.admin-sim-skip-sub input[type="number"] {
    max-width: 100px;
}

.admin-sim-skip-sub label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
}

.admin-sim-multi-method-pool {
    margin: 4px 0 12px 26px;
    padding: 10px 14px;
    background: #f7f8fa;
    border-radius: 6px;
}

.admin-sim-multi-method-pool .form-text {
    margin-bottom: 8px;
}

.admin-col-mode-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 10px 0;
}

.admin-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    color: #2d3a4a;
}

.admin-plan-select {
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}

.admin-plan-save-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: #2f6fed;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
}

.admin-plan-save-btn:hover {
    background: #2457c7;
}

.admin-sessions-today-cell {
    white-space: nowrap;
}

.admin-reset-sessions-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    background: #d35400; /* same orange used for the suggestion-expiry warning toast — a distinct "granting something extra" action, not a routine data edit */
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 6px;
}

.admin-reset-sessions-btn:hover {
    background: #b8460a;
}

.admin-contacts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-contact-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.admin-contact-card.admin-contact-unread {
    border-left: 4px solid var(--rc-blue);
}

.admin-contact-header {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 13px;
}

.admin-contact-date {
    color: #999;
    font-size: 12px;
}

.admin-contact-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.admin-contact-read-btn,
.admin-contact-delete-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #777;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

.admin-contact-read-btn:hover {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #fff;
}

.admin-contact-delete-btn:hover {
    background: var(--rc-red);
    border-color: var(--rc-red);
    color: #fff;
}

.admin-contact-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-contact-filter-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #d6dbe3;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

#PageContent .admin-contact-filter-btn.admin-contact-filter-active {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #fff;
}

.admin-contact-subject {
    font-weight: 700;
    color: #1d2a3a;
    margin-bottom: 6px;
}

.admin-contact-message {
    font-size: 14px;
    line-height: 1.5;
    color: #2d3a4a;
    white-space: pre-wrap;
}

.admin-empty {
    color: #777;
    font-style: italic;
}

.admin-sim-summary {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 14px 16px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    font-size: 14px;
}

.admin-sim-session {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 12px 16px;
    margin-bottom: 12px;
}

.admin-sim-session-header {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 14px;
}

.admin-sim-session-status {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
}

.admin-sim-session-spins {
    font-size: 12px;
    color: #888;
}

.admin-sim-mm-stop {
    font-size: 12px;
    font-weight: bold;
    color: #b45309;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 4px;
}

.admin-sim-status-aborted {
    color: var(--rc-red);
}

.admin-sim-status-incomplete {
    color: #e0a800;
}

.admin-table td.admin-sim-positive {
    color: #1e7e34;
    font-weight: 700;
}

.admin-table td.admin-sim-negative {
    color: var(--rc-red);
    font-weight: 700;
}

.admin-table td.admin-sim-neutral {
    color: #000;
    font-weight: 700;
}

/* Detail page's "Total net chips" header line -- same color logic and
   values as the recap table's own admin-sim-positive/negative/neutral,
   just not table-scoped, plus bold + a slightly larger size per request. */
.admin-sim-total-line {
    font-size: 16px;
}

.admin-sim-total-value {
    font-weight: 700;
    font-size: 17px;
}

.admin-sim-total-positive {
    color: #1e7e34;
}

.admin-sim-total-negative {
    color: var(--rc-red);
}

.admin-sim-total-neutral {
    color: #555;
}


.admin-sim-delete-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #777;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

.admin-sim-delete-btn:hover {
    background: var(--rc-red);
    border-color: var(--rc-red);
    color: #fff;
}

.admin-table th.admin-table-center,
.admin-table-center {
    text-align: center;
}

.admin-tag-edit-link {
    margin-right: 10px;
}

.admin-tag-merge-select {
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #d8dbe3;
    border-radius: 4px;
    margin-left: 6px;
}

.admin-tag-merge-btn {
    background: none;
    border: 1px solid #d8dbe3;
    border-radius: 4px;
    color: #5a6472;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
    margin-left: 2px;
}

.admin-tag-merge-btn:hover {
    background: #f0f2f5;
    color: #2d3a4a;
}

.admin-sim-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-sim-pool-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.admin-sim-bulk-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.15s;
}

.admin-sim-bulk-btn:hover {
    background: #f0f0f0;
    border-color: #999;
}

.admin-articles-subnav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.admin-articles-subnav a {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #d6dbe3;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
}

#PageContent .admin-articles-subnav a.admin-subnav-active {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #fff;
}

.admin-article-status {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
}

.admin-article-status-draft {
    background: #f0f0f0;
    color: #777;
}

.admin-article-status-published {
    background: #e6f4ea;
    color: #1e7e34;
}

.admin-article-form-container {
    max-width: 700px; /* wider than the standard 500px form-container — this one holds a full article body */
}

.admin-markdown-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.admin-markdown-toolbar button {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #3b4a5a;
    font-size: 12px;
    cursor: pointer;
    transition: 0.15s;
}

.admin-markdown-toolbar button:hover {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #fff;
}

.admin-article-body-textarea {
    min-height: 320px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
}

.admin-article-tag-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-article-tag-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: normal;
    cursor: pointer;
}

.admin-article-image-preview {
    display: block;
    max-width: 300px;
    border-radius: 6px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ============================================================
   Public article listing (articles.php) and individual article
   page (article.php).
   ============================================================ */

.articles-layout {
    align-items: flex-start;
}

.articles-main {
    flex: 1;
    min-width: 0;
}

.articles-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 16px;
}

.articles-sidebar-title {
    font-weight: 700;
    color: #1d2a3a;
    margin-bottom: 12px;
    font-size: 15px;
}

.articles-sidebar-empty {
    color: #777;
    font-size: 13px;
    font-style: italic;
}

.articles-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.articles-tag-list li {
    margin-bottom: 8px;
}

.articles-tag-list a {
    color: #3b4a5a;
    text-decoration: none;
    font-size: 14px;
    border-bottom: none;
}

.articles-tag-list a:hover,
.articles-tag-list a.articles-tag-active {
    color: var(--rc-blue);
}

.articles-tag-count {
    color: #999;
    font-size: 12px;
}

.articles-filter-notice {
    background: #eaf2fe;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 14px;
}

.article-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 16px;
}

.article-card-thumb-link {
    flex-shrink: 0;
}

.article-card-thumb {
    display: block;
    max-width: 140px;
    height: auto;
    border-radius: 4px;
}

.article-card-body {
    flex: 1;
    min-width: 0;
}

.article-card-more-link {
    color: var(--rc-blue);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .article-card {
        flex-direction: column;
    }
    .article-card-thumb {
        max-width: 100%;
    }
}

.article-card-title {
    font-size: 19px;
    margin: 0 0 6px;
}

.article-card-title a {
    color: #1d2a3a;
    text-decoration: none;
    border-bottom: none;
}

.article-card-title a:hover {
    color: var(--rc-blue);
}

.article-card-date {
    color: #999;
    font-size: 12px;
    margin-bottom: 10px;
}

.article-card-excerpt {
    color: #3b4a5a;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 10px;
}

.article-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#PageContent .article-tag-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background: #eaf2fe;
    color: var(--rc-blue);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: none;
}

#PageContent .article-tag-pill:hover {
    background: var(--rc-blue);
    color: #fff;
    border-bottom: none;
}

/* --- Individual article page --- */

.article-meta {
    color: #999;
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.article-meta-tags {
    display: flex;
    gap: 6px;
}

.article-featured-image {
    display: block;
    max-width: min(1000px, 100%);
    height: auto;
    border-radius: 6px;
    margin-bottom: 24px;
}

.article-admin-edit-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #b0281e;
    margin-bottom: 12px;
}

.article-body {
    font-size: 16px;
    line-height: 1.7;
    color: #2d3a4a;
    max-width: 720px;
}

/* In-body images (inserted via admin's "Insert Image" button) are
   plain Markdown ![](url) syntax -- no special shortcode needed, just
   this CSS to center them. Deliberately no width/height cap in
   principle (admin pre-sizes every image themselves before
   uploading), but max-width:100% + height:auto stays as a safety net
   purely for narrow/mobile viewports, so a genuinely oversized image
   can't overflow and break the layout there -- it has zero effect on
   an image already sized to fit the article's own content width. */
.article-body img {
    display: block;
    margin: 24px auto;
    max-width: 100%;
    height: auto;
}

.article-body h1 {
    font-size: 26px;
}

.article-body h2 {
    font-size: 21px;
}

.article-body h3 {
    font-size: 18px;
}

.article-body h1,
.article-body h2,
.article-body h3 {
    color: #1d2a3a;
    margin-top: 28px;
    margin-bottom: 12px;
}

.article-body p {
    margin: 0 0 16px;
}

.article-body ul {
    margin: 0 0 16px;
    padding-left: 24px;
    list-style-type: disc; /* explicit small round bullets, not left to browser default */
}

.article-body li {
    margin-bottom: 4px;
}

.article-body u {
    text-decoration: underline;
}

.article-body a {
    color: var(--rc-blue);
}

.article-divider {
    border: none;
    border-top: 1px solid #e5e8ee;
    margin: 32px 0;
    max-width: 720px;
}

.article-comments {
    max-width: 720px;
}

.article-comments-title {
    font-size: 19px;
    color: #1d2a3a;
    margin-bottom: 16px;
}

.article-comment {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.article-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.article-comment-body-wrap {
    flex: 1;
}

.article-comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 13px;
}

.article-comment-date {
    color: #999;
    font-size: 12px;
}

.article-comment-delete-form {
    margin-left: auto;
}

.article-comment-delete-btn {
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    color: #777;
    font-size: 11px;
    cursor: pointer;
    transition: 0.15s;
}

.article-comment-delete-btn:hover {
    background: var(--rc-red);
    border-color: var(--rc-red);
    color: #fff;
}

.article-comment-text {
    font-size: 14px;
    line-height: 1.6;
    color: #3b4a5a;
}

.article-login-prompt {
    background: #f6f8fb;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    font-size: 14px;
}

.admin-sim-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.admin-sim-detail-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2d3a4a;
}
/****************************************************************************************************************************
                                                            * Homepage
*****************************************************************************************************************************/

/* --- Hero --- */
.hp-hero {
    max-width: 700px;
    margin: 60px auto 40px; /* bottom margin trimmed from 70px so the feature grid sits ~30px closer to the CTA button above it */
    text-align: center;
    padding: 0 16px;
}
.hp-hero-title {
    font-size: 44px;
    font-weight: 800;
    color: #1d2a3a;
    line-height: 1.2;
    margin-bottom: 18px;
}
.hp-hero-subtitle {
    font-size: 18px;
    color: #3b4a5a;
    line-height: 1.6;
    margin-bottom: 28px;
}
/* The "randomness" positioning line — a confident secondary
   statement, not a hedge or a footnote. Deliberately NOT styled like
   .hp-hero-note below (small, muted gray): that treatment reads as an
   apology tucked in after the fact. This is a thesis, so it gets real
   weight and the brand's own accent blue, sitting between the
   subtitle and the CTA — established before the feature cards explain
   what the discipline itself actually looks like. */
.hp-hero-manifesto {
    font-size: 16px;
    font-weight: 600;
    color: #2f6fed;
    line-height: 1.5;
    margin-bottom: 28px;
}
.hp-hero-cta {
    font-size: 16px;
    padding: 14px 36px;
    display: inline-block;
}
.hp-hero-note {
    margin-top: 14px;
    font-size: 13px;
    color: #6b7686;
}

/* --- Feature grid --- */
.hp-features {
    max-width: 1000px;
    margin: 0 auto 70px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.hp-feature-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e8ee;
    border-radius: 10px;
    padding: 30px 26px 26px;
}
.hp-feature-number {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #2f6fed;
    background: rgba(47, 111, 237, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}
.hp-feature-title {
    font-size: 19px;
    font-weight: 700;
    color: #1d2a3a;
    margin-bottom: 10px;
}
.hp-feature-body {
    font-size: 15px;
    color: #3b4a5a;
    line-height: 1.6;
}

/* --- Closing CTA --- */
.hp-closing {
    max-width: 920px; /* 20px less per side than the previous 960px — still close to .hp-features' own 1000px, just pulled in slightly narrower on each edge */
    margin: 0 auto -20px; /* last block of the home page: #PageContent's padding-bottom (60px) + the footer's margin-top (80px) leave 140px before the footer; -20px brings it to 120px on the home page only, so the bottom disclaimer is reached with less scrolling (mobile) */
    padding: 46px 20px;
    text-align: center;
    background: #eef4ff; /* light tint of the site's accent blue */
    border-radius: 12px;
}
.hp-closing-title {
    font-size: 28px;
    font-weight: 800;
    color: #1d2a3a;
    margin-bottom: 14px;
}
.hp-closing-body {
    font-size: 16px;
    color: #3b4a5a;
    line-height: 1.6;
    margin-bottom: 24px;
}
.hp-closing-cta {
    font-size: 16px;
    padding: 14px 36px;
    display: inline-block;
}

/* --- Logged-in welcome back --- */
.hp-welcome-back {
    max-width: 600px;
    margin: 70px auto;
    text-align: center;
    padding: 0 16px;
}
.hp-welcome-back h1 {
    font-size: 32px;
    font-weight: 800;
    color: #1d2a3a;
    margin-bottom: 10px;
}
.hp-welcome-back p {
    font-size: 16px;
    color: #3b4a5a;
    margin-bottom: 24px;
}
.hp-welcome-back-links {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Pill shape for all three homepage buttons (Play/Scorecard/Journal),
   matching the pricing page's billing-toggle buttons exactly. Play
   keeps its existing blue .btn-primary look — only the shape changes;
   Scorecard/Journal get a full white/black restyle below, since the
   previous gray-background/blue-text combination read as dated.
   #PageContent prefix needed to beat the existing #PageContent
   .btn-secondary rule's specificity (an ID always outweighs any number
   of combined classes), otherwise this silently loses to that fix. */
#PageContent .hp-welcome-back-links .btn-primary,
#PageContent .hp-welcome-back-links .btn-secondary {
    border-radius: 20px;
    display: inline-block;
    min-width: 110px;
    text-align: center;
    box-sizing: border-box;
}

#PageContent .hp-welcome-back-links .btn-secondary {
    background: #fff;
    color: #000;
    border: 1px solid #d6dbe3;
}

#PageContent .hp-welcome-back-links .btn-secondary:hover {
    border-color: #2f6fed;
    color: #000;
}

/* --- Mobile --- */
@media (max-width: 900px) {
    .hp-hero-title {
        font-size: 32px;
    }
    .hp-hero-subtitle {
        font-size: 16px;
    }
    .hp-hero-manifesto {
        font-size: 15px;
    }
    .hp-features {
        grid-template-columns: 1fr;
    }
    .hp-welcome-back-links {
        flex-direction: column;
    }
}

/* ============================================================
   Roulette Simulator (roulette-simulator.php)
   ============================================================ */

.strat-container {
    max-width: 1100px;
    margin: 0 auto;
}

.strat-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    color: #3b4a5a;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    flex-shrink: 0;
}

.strat-icon-btn:hover {
    background: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #fff;
}

.strat-icon-btn.strat-x2-btn {
    font-size: 15px;
    font-weight: 800;
}

.strat-balance-bet-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.strat-insufficient-funds {
    color: #b0281e;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.strat-insufficient-funds.strat-insufficient-funds-visible {
    opacity: 1;
}

.strat-reset-balance-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.strat-reset-balance-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.strat-game-options {
    margin-top: 12px;
}

.strat-option-toggle {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #4a5568;
    cursor: pointer;
    line-height: 1.5;
}

.strat-option-toggle input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

.strat-option-toggle strong {
    color: #1a2333;
}

.strat-game-options-disabled .strat-option-toggle {
    opacity: 0.55;
    pointer-events: none;
}

.strat-game-options {
    width: 100%;
    max-width: 500px;
}

.strat-options-login-notice {
    font-size: 13px;
    color: #4a5568;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.strat-options-login-notice a {
    color: #b0281e;
    font-weight: 700;
    text-decoration: underline;
}

.strat-options-login-notice a:hover {
    text-decoration: none;
}

.strat-balance-bet-table {
    display: flex;
    border: 1px solid #d6dbe3;
    border-radius: 8px;
    overflow: hidden;
}

.strat-balance-bet-cell {
    padding: 8px 20px;
    text-align: center;
    border-right: 1px solid #d6dbe3;
    min-width: 100px;
}

.strat-balance-bet-cell:last-child {
    border-right: none;
}

.strat-balance-bet-label {
    color: #7a8896;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 2px;
}

.strat-balance-bet-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.strat-balance-color {
    color: #1e7e34;
}

.strat-bet-color {
    color: #b0281e;
}

/* Replaces the old status-bar/progress-tyre/countdown-display trio
   entirely — nothing draws automatically any more, so there's no
   "time until next draw" left to show. Right-aligned below the table,
   matching where the old status bar used to sit. */
.strat-spin-btn {
    margin-left: auto; /* pushes it to the right end of .strat-balance-bet-row, keeping it prominent */
    margin-right: 4px; /* tiny breathing room from the true edge */
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    background: var(--rc-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: background 0.15s ease;
}

.strat-spin-btn:hover:not(:disabled) {
    background: var(--rc-blue-hover);
}

.strat-spin-btn:disabled {
    background: #b7bcc4;
    color: #eef0f3;
    cursor: not-allowed;
    box-shadow: none;
}

.strat-table-stage {
    position: relative;
}

/* --- The fading result callout — an overlay anchored to the top of
   the table stage, NOT part of normal document flow, so it never
   reserves layout space even while invisible between draws. This is
   also what previously pushed the whole table down the page. --- */

.strat-result-callout {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px)) scale(0.7);
    transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    z-index: 5;
}

.strat-result-callout.strat-callout-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 10px)) scale(1);
}

.strat-callout-red { background: #b0281e; }
.strat-callout-black { background: #1a1a1a; }
.strat-callout-green { background: #1e7e34; }

/* --- Table layout --- */

.strat-play-area {
    display: flex;
    flex-direction: column;
}

.strat-table-wrapper {
    background: #0b3d24; /* dark casino-green felt */
    border: 6px solid #7a5a2e; /* gold-brown wood-style border */
    border-radius: 10px;
    padding: 14px;
    width: 100%;
}

.strat-table {
    display: flex;
    align-items: stretch;
    position: relative;
}

.strat-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.6);
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.15s ease;
}

.strat-cell:hover {
    box-shadow: 0 0 8px 2px rgba(135, 206, 250, 0.75);
    border-color: #87cefa;
    z-index: 1;
}

.strat-zero {
    width: 46px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    font-size: 18px;
}

.strat-number-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.strat-number-row {
    display: flex;
    flex: 1;
}

.strat-number {
    flex: 1;
    min-height: 64px;
}

.strat-red { background: #b0281e; }
.strat-black { background: #1a1a1a; }
.strat-green { background: #1e7e34; }

.strat-column-bets {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.strat-column-bets .strat-cell {
    flex: 1;
    background: #0b3d24;
    font-size: 11px;
    text-align: center;
}

.strat-dozen-bets,
.strat-outside-bets {
    display: flex;
    margin-left: 46px;  /* aligns with the number grid, excluding the zero cell's width */
    margin-right: 60px; /* excludes the column-bets cell's width */
    margin-top: 6px;
}

.strat-dozen-bets .strat-cell,
.strat-outside-bets .strat-cell {
    flex: 1;
    background: #0b3d24;
    min-height: 50px;
    font-size: 13px;
    margin-right: 1px;
}

.strat-diamond {
    display: inline-block;
    width: clamp(14px, 3.5vw, 22px);
    height: clamp(14px, 3.5vw, 22px);
    transform: scaleX(1.4) rotate(45deg);
    border: 2px solid #fff;
    flex-shrink: 0;
}

.strat-diamond-red {
    background: #b0281e;
}

.strat-diamond-black {
    background: #1a1a1a;
}

/* --- Chip stack shown on a cell once bet --- */

.strat-chip-stack {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(18px, 6vw, 40px);
    height: clamp(18px, 6vw, 40px);
    border-radius: 50%;
    border: 2px dashed #fff;
    background: #7a5a2e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(8px, 2vw, 12px);
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    z-index: 3;
    pointer-events: none; /* clicks always go to the underlying cell, never absorbed by the chip token on top of it */
}

/* --- Winning-number marker (the dealer's "masse") --- */

.strat-winning-marker {
    border-radius: 8px;
    animation: stratWinPulse 1s ease-in-out 5;
    z-index: 2;
}

.strat-hover-highlight {
    border-color: #87cefa;
    color: #87cefa;
}

.strat-hitzone {
    position: absolute;
    z-index: 4;
    cursor: pointer;
}

.strat-hitzone::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
}

.strat-hitzone:hover::after {
    background: rgba(135, 206, 250, 0.9);
    box-shadow: 0 0 6px 2px rgba(135, 206, 250, 0.7);
}

@keyframes stratWinPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px #f5c518, 0 0 16px 4px rgba(245, 197, 24, 0.8);
    }
    50% {
        box-shadow: 0 0 0 6px #f5c518, 0 0 26px 8px rgba(245, 197, 24, 1);
    }
}

/* --- Side panel: last 20 numbers --- */

.strat-side-panel {
    width: fit-content;
    max-width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    padding: 14px;
    margin-top: 12px;
}

.strat-login-invite {
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff8e6;
    border: 1px solid #f0dca0;
    border-radius: 8px;
    font-size: 14px;
    color: #4a3c1a;
    line-height: 1.5;
    max-width: fit-content;
}

.strat-login-invite a {
    color: #b0281e;
    font-weight: 700;
    text-decoration: underline;
}

.strat-login-invite a:hover {
    text-decoration: none;
}

.strat-scope-notice {
    margin-top: 20px;
    padding: 14px 16px;
    background: #fdeceb;
    border: 1px solid #f3b4ae;
    border-radius: 8px;
    font-size: 13px;
    color: #7a2620;
    line-height: 1.5;
}

.strat-scope-notice p {
    margin: 0 0 8px 0;
}

.strat-scope-notice p:last-child {
    margin-bottom: 0;
}

.strat-history-title {
    font-weight: 700;
    color: #1d2a3a;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 14px;
}

/* Wraps the "Last 70 numbers" title + the Copy button on one row,
   title left / button right — replaces the old copy row that sat
   below the table entirely. max-width matches .strat-side-panel's own
   width below it (674px history-list content + 14px padding each
   side = 702px), so the row's own right edge lines up with the
   table's right edge; the button itself gets a 2px right margin
   for a touch of breathing room off that edge. Both shrink together
   via max-width:100% on narrow screens. */
.strat-history-header {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 702px;
    margin-top: 20px;
}

.strat-history-header .strat-history-title {
    margin-top: 0; /* the wrapper itself carries the standard 20px top spacing instead */
    flex: 1 1 auto;
}

.strat-history-header .strat-copy-confirmation {
    flex: 0 0 auto;
}

.strat-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /* Caps a row at exactly 20 chips on wide screens: 20 * 28px chip
       + 19 * 6px gap = 674px. Deliberately no explicit width — as the
       viewport (and .strat-side-panel's own max-width:100% below)
       shrinks past that, flex-wrap drops chips onto additional rows
       automatically, still left-aligned (flex's own default
       justify-content: flex-start) so the left margin never moves. */
    max-width: 674px;
}

.strat-history-chip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.strat-history-red { background: #b0281e; }
.strat-history-black { background: #1a1a1a; }
.strat-history-green { background: #1e7e34; }

.strat-copy-history-btn {
    flex: 0 0 auto;
    margin-right: 4px;
    padding: 6px 14px;
    border: 1px solid #d8dbe3;
    border-radius: 6px;
    background: #f4f5f8;
    color: #3b4a5a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.strat-copy-history-btn:hover {
    background: #e5e8ee;
}

.strat-copy-confirmation {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #1e7e34;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.strat-copy-confirmation.strat-copy-confirmation-visible {
    opacity: 1;
}

/* --- Chip rack --- */

.strat-chip-rack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.strat-chip {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px dashed #fff;
    background: #7a5a2e;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.strat-chip.strat-chip-selected {
    border-color: #f5c518;
    box-shadow: 0 0 0 3px #f5c518, 0 2px 5px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
    .strat-zero {
        width: 28px;
        font-size: 13px;
    }
    .strat-column-bets {
        width: 28px;
    }
    .strat-column-bets .strat-cell {
        font-size: 0; /* hides "2 to 1" — hover already makes the bet clear at this width */
    }
}

/* Scorecard: plan-indicator icon before "Session #..." -- a shield
   (same icon used in the header/pricing badges), not a plain circle
   anymore. Free is plain black here specifically (not the gray
   #6b7480 used for the Free label in the watchlist's own locked-
   column teaser), per explicit request. */
.sc-plan-dot {
    display: inline-block;
    margin-right: -10px;
    vertical-align: middle;
    cursor: help;
    position: relative;
    top: 0px;
}

.sc-plan-dot-free      { color: #6b7480; } /* same gray as the header's .plan-badge-free */
.sc-plan-dot-player    { color: #145AEB; }
.sc-plan-dot-pro       { color: #FF0000; }
.sc-plan-dot-champion  { color: #D500D5; }

/* Scorecard: calendar icon marking the start of each new day group --
   classic "tear-off calendar page" look (red top strip, white body,
   day number in black), so a new day is unmistakable at a glance
   rather than just a slightly different-looking text line. Fixed
   size regardless of digit count (single vs double-digit days use
   the exact same icon dimensions and font-size) so the row never
   visually shifts based on which day it happens to be.
   NB: .sc-day-separator/.sc-day-date themselves aren't in this file
   (they must live in style-table.css) -- this assumes that container
   is already laid out with vertical centering; if the icon doesn't
   align cleanly with the date text once live, that's the file to
   check/adjust. */
.sc-day-calendar-icon {
    display: inline-flex;
    flex-direction: column;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #d0433a;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
}

.sc-day-calendar-strip {
    height: 7px;
    background: #e5443a;
}

.sc-day-calendar-number {
    flex: 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    position: relative;
    top: -1px;
}

/* Practice dialog — plan select (roulette.js buildPracticeDisclaimerHtml()) */
.rc-practice-plan-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
}
.rc-practice-plan-label {
    font-size: 14px;
    font-weight: 600;
    color: #3a4552;
}
.rc-practice-plan-select {
    font-size: 14px;
    font-weight: 600;
    color: #2d3a4a;
    padding: 5px 8px;
    border: 1px solid #d6dbe3;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.rc-practice-plan-select:focus {
    outline: none;
    border-color: #2f6fed;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
}

/****************************************************************************************************************************
 * Roulette simulator — narrow screens
 *****************************************************************************************************************************/
/* The Balance / Current bet table is never squeezed (its amounts used to
   disappear when the row got too narrow): the row wraps instead. */
.strat-balance-bet-row {
    flex-wrap: wrap;
}
.strat-balance-bet-table {
    flex: 0 0 auto;
}
@media (max-width: 600px) {
    /* The bets under the numbers (dozens, then 1-18 … 19-36) line up
       exactly with the numbers above: same narrower zero (28px) and
       "2 to 1" column (28px) as the table itself at this width, and
       cells of equal width whatever their text. */
    .strat-dozen-bets,
    .strat-outside-bets {
        margin-left: 28px;
        margin-right: 28px;
    }
    .strat-dozen-bets .strat-cell,
    .strat-outside-bets .strat-cell {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 2px;
        font-size: 12px;
        text-align: center;
    }
    /* Balance / Current bet: the full width on a line of their own,
       Reset balance and Spin on the next one. */
    .strat-balance-bet-row {
        gap: 12px;
    }
    .strat-balance-bet-table {
        flex: 1 1 100%;
    }
    .strat-balance-bet-cell {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 10px;
    }
}

/* The simulator's play zone (table, chips, balance / Spin row): no text
   selection, no copy / paste bubble, no long-press menu and no grey tap
   flash on a phone — taps there only ever place bets. touch-action:
   manipulation also stops a quick double tap from zooming the page.
   The rest of the page (last numbers, options, texts) stays selectable. */
.strat-table-stage,
.strat-chip-rack,
.strat-balance-bet-row {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Narrow screens: smaller chips and round buttons, so the 9 chips, the
   undo button and the "same bet / X2" button always fit on 2 lines
   (X2 never drops to a 3rd one) — Balance and Spin stay closer. */
@media (max-width: 600px) {
    .strat-chip-rack {
        gap: 6px;
    }
    .strat-chip {
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 12px;
    }
    .strat-icon-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .strat-icon-btn.strat-x2-btn {
        font-size: 14px;
    }
}
@media (max-width: 360px) {
    .strat-chip {
        width: 40px;
        height: 40px;
        font-size: 11px;
    }
    .strat-icon-btn {
        width: 36px;
        height: 36px;
    }
}

/****************************************************************************************************************************
 * Pricing page — narrow screens
 *****************************************************************************************************************************/
@media (max-width: 800px) {
    /* Plan headers: the shield above the plan's name, both smaller. */
    .pr-compare-plan-header {
        justify-content: flex-start; /* the 4 shields and names on the same line, whatever the price below */
        padding: 36px 4px 10px; /* top: room for the 2-line "Most popular" pill over Pro — the same for every plan, so the 4 names stay aligned */
    }
    .pr-column-header {
        flex-direction: column;
        gap: 2px;
        font-size: 15px;
        margin-bottom: 8px;
    }
    .pr-column-header .plan-badge {
        width: 22px;
        height: 22px;
        top: 0;
    }
    /* Prices sized to their column. */
    .pr-price {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2px;
    }
    .pr-price-amount {
        font-size: 19px;
        line-height: 1.15;
    }
    .pr-price-period {
        font-size: 11px;
    }
    .pr-price-note {
        font-size: 10px;
        line-height: 1.25;
    }
    /* "Most popular" on 2 lines, smaller, clear of the Pro title. */
    .pr-featured-tag {
        top: -10px;
        white-space: normal;
        width: min-content; /* "Most / popular": as wide as its longest word, never the whole column */
        max-width: none;
        padding: 3px 8px;
        font-size: 10px;
        line-height: 1.15;
        text-align: center;
    }
    /* Start free / Choose X: real buttons again, not the full column. */
    .pr-cta {
        /* The 4 buttons share ONE fixed width — the one "Choose / Champion"
           (the longest word) needs — narrower than the column. */
        width: 76px;
        /* Always 2 lines tall (Start free on 1 line is centred in it):
           the 4 buttons the same height. */
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(2.4em + 12px);
        min-width: 0;
        align-self: center;
        padding: 6px 8px;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
        margin-top: auto; /* the 4 buttons on the same line, at the bottom */
    }
    .pr-price-note {
        margin-bottom: 8px;
    }
}
@media (max-width: 480px) {
    /* Phones: the whole table fits the screen (no sideways scrolling) —
       a narrower feature column, the 4 plans sharing the rest. */
    .pr-compare-table {
        grid-template-columns: minmax(104px, 1.25fr) repeat(4, minmax(58px, 1fr));
    }
    .pr-compare-cell, .pr-compare-feature-label, .pr-compare-value {
        padding: 9px 4px;
    }
    .pr-compare-feature-label {
        padding-left: 8px;
        font-size: 11.5px;
    }
    .pr-compare-feature-sublabel {
        font-size: 10.5px;
    }
    .pr-compare-plan-header {
        padding: 36px 3px 10px;
    }
    .pr-column-header {
        font-size: 13.5px;
    }
    .pr-price-amount {
        font-size: 16px;
    }
    .pr-price-period,
    .pr-price-note {
        font-size: 9.5px;
    }
    .pr-cta {
        width: 60px;
        padding: 5px 3px;
        font-size: 10.5px;
    }
    .pr-compare-subtitle {
        padding: 10px 8px 5px;
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .pr-compare-table {
        grid-template-columns: minmax(88px, 1fr) repeat(4, minmax(54px, 1fr));
    }
    .pr-compare-plan-header {
        padding: 36px 1px 10px;
    }
    .pr-column-header {
        font-size: 11px;
    }
    .pr-price-amount {
        font-size: 14px;
    }
    .pr-cta {
        width: 54px;
        padding: 5px 2px;
        font-size: 10px;
    }
}