/* popupStyles.css
   CSS frames for the global popups (About Us, Contact Us, Exit, Buy).
   The style is chosen by V-PopupStyle in SettableVariables.csv, which
   puts one of these classes on #wargrid-viewport:
       A -> popstyle-console | B -> popstyle-fieldmanual | C -> popstyle-nightops */

/* --pop-warn colours titles on the dark title bar; --pop-alert colours
   warnings in the body of a popup, where it must read on the popup's own
   background. */

/* ---------- Style A: Command Console (dark olive, brass, gold) ---------- */
.popstyle-console {
    --pop-bg: linear-gradient(180deg, #153d11, #0d290a);
    --pop-border: 3px solid #a3915e;
    --pop-radius: 0;
    --pop-radius-sm: 0;
    --pop-shadow: 0 0 0 1px #000, inset 0 0 0 2px #0a1a07, 0 18px 60px rgba(0, 0, 0, .75);
    --pop-ink: #f1edd5;
    --pop-muted: #b9b493;
    --pop-title-font: 'Freeman', sans-serif;
    --pop-title-track: .05em;
    --pop-title: #f2d16b;
    --pop-warn: #ff8a5c;
    --pop-alert: #ff8a5c;
    --pop-head-bg: linear-gradient(180deg, #0b130a, #050905);
    --pop-line: 2px solid #5e5536;
    --pop-x-ink: #f2d16b;
    --pop-x-bg: #070b06;
    --pop-x-border: 2px solid #a3915e;
    --pop-field-bg: #071406;
    --pop-field-border: 2px solid #5e5536;
    --pop-focus: #f2d16b;
    --pop-btn-ink: #f1edd5;
    --pop-btn-bg: #050805;
    --pop-btn-border: 2px solid #a3915e;
    --pop-danger-ink: #fff1e0;
    --pop-danger-bg: #6b1a0d;
    --pop-danger-border: 2px solid #d9734e;
    --pop-logo-glow: drop-shadow(0 0 1px rgba(255, 255, 255, .5));
}

/* ---------- Style B: Field Manual (light khaki paper, olive) ---------- */
.popstyle-fieldmanual {
    --pop-bg:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(80, 96, 40, .08) 31px 32px),
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(80, 96, 40, .08) 31px 32px),
        #efe7cd;
    --pop-border: 4px solid #3f4b22;
    --pop-radius: 0;
    --pop-radius-sm: 0;
    --pop-shadow: inset 0 0 0 2px #c9b98a, 0 18px 60px rgba(0, 0, 0, .7);
    --pop-ink: #22290f;
    --pop-muted: #5c5a3e;
    --pop-title-font: 'Freeman', sans-serif;
    --pop-title-track: .06em;
    --pop-title: #f4ecd0;
    --pop-warn: #ffd27a;
    --pop-alert: #9a2a12;
    --pop-head-bg: #3f4b22;
    --pop-line: 2px solid #c9b98a;
    --pop-x-ink: #f4ecd0;
    --pop-x-bg: #2c3517;
    --pop-x-border: 2px solid #c9b98a;
    --pop-field-bg: #fbf7e8;
    --pop-field-border: 2px solid #a99a6c;
    --pop-focus: #3f4b22;
    --pop-btn-ink: #f4ecd0;
    --pop-btn-bg: #3f4b22;
    --pop-btn-border: 2px solid #2a3215;
    --pop-danger-ink: #fff4e4;
    --pop-danger-bg: #8a2414;
    --pop-danger-border: 2px solid #5a160b;
    --pop-logo-glow: none;
}
.popstyle-fieldmanual #POP-ExitBox .wg-pop-head { background: #8a2414; }

/* ---------- Style C: Night Ops HUD (black glass, phosphor green) ---------- */
.popstyle-nightops {
    --pop-bg:
        repeating-linear-gradient(0deg, rgba(120, 255, 150, .035) 0 1px, transparent 1px 4px),
        #040c07;
    --pop-border: 2px solid rgba(120, 255, 150, .55);
    --pop-radius: 0;
    --pop-radius-sm: 0;
    --pop-shadow: 0 0 24px rgba(90, 255, 130, .18), 0 18px 60px rgba(0, 0, 0, .8);
    --pop-ink: #d6f5dc;
    --pop-muted: #6fae80;
    --pop-title-font: 'Share Tech Mono', 'Roboto Condensed', monospace;
    --pop-title-track: .14em;
    --pop-title: #7dff9a;
    --pop-warn: #ffb02e;
    --pop-alert: #ffb02e;
    --pop-head-bg: rgba(120, 255, 150, .07);
    --pop-line: 1px solid rgba(120, 255, 150, .3);
    --pop-x-ink: #7dff9a;
    --pop-x-bg: transparent;
    --pop-x-border: 1px solid rgba(120, 255, 150, .55);
    --pop-field-bg: rgba(0, 0, 0, .45);
    --pop-field-border: 1px solid rgba(120, 255, 150, .45);
    --pop-focus: #7dff9a;
    --pop-btn-ink: #7dff9a;
    --pop-btn-bg: transparent;
    --pop-btn-border: 1px solid #7dff9a;
    --pop-danger-ink: #ffb02e;
    --pop-danger-bg: rgba(255, 176, 46, .08);
    --pop-danger-border: 1px solid #ffb02e;
    --pop-logo-glow: drop-shadow(0 0 2px rgba(125, 255, 154, .6));
}
.popstyle-nightops .wg-popup::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border: 4px solid #7dff9a;
    border-left: 0;
    border-top: 0;
    pointer-events: none;
}
.popstyle-nightops .wg-pop-head::before {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    width: 28px;
    height: 28px;
    border: 4px solid #7dff9a;
    border-right: 0;
    border-bottom: 0;
    pointer-events: none;
}
.popstyle-nightops #POP-ExitBox { --pop-border: 2px solid rgba(255, 176, 46, .7); }
.popstyle-nightops #POP-ExitBox::after,
.popstyle-nightops #POP-ExitBox .wg-pop-head::before { border-color: #ffb02e; }


/* ---------- Shared popup frame ---------- */
.wg-popup {
    background: var(--pop-bg);
    border: var(--pop-border);
    border-radius: var(--pop-radius);
    box-shadow: var(--pop-shadow);
    color: var(--pop-ink);
    overflow: hidden;
    animation: wg-pop-open .16s ease-out;
}

@keyframes wg-pop-open {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

.wg-pop-head {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 50px;
    padding: 0 60px 0 18px;
    display: flex;
    align-items: center;
    background: var(--pop-head-bg);
    border-bottom: var(--pop-line);
}

.wg-pop-title {
    font-family: var(--pop-title-font);
    font-size: 26px;
    letter-spacing: var(--pop-title-track);
    text-transform: uppercase;
    color: var(--pop-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Draggable popups: drag by the title bar */
.wg-pop-drag { cursor: move; touch-action: none; user-select: none; }
.wg-pop-drag.dragging { cursor: grabbing; }

#POP-ExitBox .wg-pop-title { color: var(--pop-warn); }
#POP-ExitBox .wg-pop-title::before { content: "\26A0\FE0E  "; }

/* Close X */
.wg-pop-close {
    display: grid !important;
    place-items: center;
    background: var(--pop-x-bg);
    border: var(--pop-x-border);
    border-radius: var(--pop-radius-sm);
    cursor: pointer;
    z-index: 20 !important;
}
.wg-pop-close::after {
    content: "\2715";
    font-size: 24px;
    line-height: 1;
    color: var(--pop-x-ink);
}
.wg-pop-close:hover { filter: brightness(1.25); }

/* Text zones: colour comes from the style; font and size from the CSV */
.wg-pop-text {
    color: var(--pop-ink) !important;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    padding: 6px 6px 6px 0;
    line-height: 1.5;
    scrollbar-width: thin;
}

/* Small TimeRoll logo at top left; the text flows around it */
#BOX-AboutUsTxtZone::before,
#BOX-ContactUsTxtZone::before,
#BOX-BuyTxtZone::before {
    content: "";
    float: left;
    width: 84px;
    height: 84px;
    margin: 2px 16px 6px 0;
    background: var(--pop-logo-image) center / contain no-repeat;
    filter: var(--pop-logo-glow);
}

/* Form labels and fields */
.wg-pop-label {
    color: var(--pop-muted) !important;
    font-style: italic;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}
#TXT-DescriptionLabel { text-align: left; }

.wg-pop-field {
    background: var(--pop-field-bg);
    border: var(--pop-field-border);
    border-radius: var(--pop-radius-sm);
}
.wg-pop-field:focus-within { border-color: var(--pop-focus); }

.wg-popup input,
.wg-popup textarea {
    color: var(--pop-ink) !important;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    line-height: 1.35;
    caret-color: var(--pop-focus);
}
.wg-popup textarea { overflow-y: auto; scrollbar-width: thin; }

/* The logged-in player's name, filled in by contactUs.js */
#Z-FetchUN {
    color: var(--pop-ink);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
}

/* Contact Us "Send to" strips: the recipients, highlighted, not typed */
#FLD-SendTo1, #FLD-SendTo2 {
    background: rgba(242, 209, 107, .16);
    border-color: var(--pop-focus);
}
.popstyle-fieldmanual #FLD-SendTo1, .popstyle-fieldmanual #FLD-SendTo2 { background: #f3e2a6; }
#Z-SendTo1, #Z-SendTo2 {
    color: var(--pop-ink);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* New player pop-up: compact, centred text, no scroll */
#POP-NewPlayerBox .wg-pop-title { font-size: 23px; }
#BOX-NewPlayerTxtZone,
#BOX-NewPlayerNoteZone {
    padding: 0;
    line-height: 1.3;
    text-align: center;
    overflow: hidden;
}
#BOX-NewPlayerNoteZone { color: var(--pop-muted) !important; }

/* Buttons (Yes / No / Send) */
.wg-pop-btn {
    display: grid !important;
    place-items: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pop-btn-ink);
    background: var(--pop-btn-bg);
    border: var(--pop-btn-border);
    border-radius: var(--pop-radius-sm);
    cursor: pointer;
    z-index: 20 !important;
}
.wg-pop-btn:hover { filter: brightness(1.25); }
#BTN-ExitYes.wg-pop-btn {
    color: var(--pop-danger-ink);
    background: var(--pop-danger-bg);
    border: var(--pop-danger-border);
}

/* Dims the game behind an open popup */
#wg-popup-backdrop {
    position: absolute;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, .6);
    z-index: 4999;
}


/* ---------- Help screen ---------- */

/* Headings list (left column) */
#BOX-HelpNavZone {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 0 18px;
    background: rgba(0, 0, 0, .18);
    border-right: var(--pop-line);
    scrollbar-width: thin;
}
.popstyle-fieldmanual #BOX-HelpNavZone { background: rgba(63, 75, 34, .10); }

.wg-help-logo {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    background: var(--pop-logo-image) center / contain no-repeat;
    filter: var(--pop-logo-glow);
}

.wg-help-nav-title {
    font-family: var(--pop-title-font);
    font-size: 18px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pop-muted);
    padding: 0 20px 8px;
}

.wg-help-nav-item {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.25;
    color: var(--pop-ink);
    padding: 7px 16px 7px 17px;
    border-left: 4px solid transparent;
    cursor: pointer;
}
.wg-help-nav-item:hover { filter: brightness(1.2); background: rgba(255, 255, 255, .04); }
.wg-help-nav-item.on {
    color: var(--pop-title);
    background: rgba(242, 209, 107, .14);
    border-left-color: var(--pop-focus);
}
.popstyle-fieldmanual .wg-help-nav-item.on { color: #f4ecd0; background: #3f4b22; border-left-color: #b5832b; }
.popstyle-nightops .wg-help-nav-item.on { background: rgba(125, 255, 154, .12); }

/* Sub-headings show only under the section being read */
.wg-help-nav-sub {
    display: none;
    font-weight: 400;
    font-size: 17px;
    padding: 4px 16px 4px 34px;
}
.wg-help-nav-sub.open { display: block; }

/* Reading panel: the Word document on a sheet of paper */
#BOX-HelpTxtZone {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    background: #fbfaf5;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 6px 10px -6px rgba(0, 0, 0, .45);
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}
#BOX-HelpTxtZone::-webkit-scrollbar { display: none; }

.wg-help-doc section.docx {
    margin: 0 auto;
    background: transparent;
}

/* QUICK INTRODUCTION button above section 1 (helpModule.js); lined up with
   the document's 0.5 in margin on its 11.5 in page */
.wg-help-intro-bar {
    max-width: 11.5in;
    margin: 0 auto;
    padding: 22px 0.5in 4px;
    box-sizing: border-box;
}
.wg-help-intro-btn {
    padding: 10px 24px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f2d16b;
    background: linear-gradient(180deg, #1d4d17, #0d290a);
    border: 2px solid #a3915e;
    cursor: pointer;
    user-select: none;
}
.wg-help-intro-btn::before { content: "\25B6\FE0E  "; font-size: 15px; }
.wg-help-intro-btn:hover { filter: brightness(1.2); }
.wg-help-intro-btn:focus-visible { outline: 3px solid #c9a227; outline-offset: 3px; }

.wg-help-status {
    display: none;
    padding: 40px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    color: #5c5a3e;
}

mark.wg-help-hit { background: #ffe680; color: inherit; padding: 0; }
mark.wg-help-hit.current { background: #ff9d3c; outline: 2px solid #c25e00; }

/* Search row */
#TXT-HelpSearchCount {
    text-align: left;
    font-style: normal;
}

/* Scroll rail against the right border */
#BTN-TxtMoveUp, #BTN-TxtMoveDown {
    font-size: 16px;
    letter-spacing: 0;
    border-radius: 0;
}
#BOX-HelpScrollTrack {
    background: rgba(0, 0, 0, .25);
    border-left: var(--pop-line);
    cursor: pointer;
}
.popstyle-fieldmanual #BOX-HelpScrollTrack { background: rgba(63, 75, 34, .12); }

.wg-help-thumb {
    position: absolute;
    left: 13px;
    right: 13px;
    top: 0;
    border-radius: 9px;
    background: var(--pop-focus);
    opacity: .85;
    cursor: grab;
    touch-action: none;
}
.wg-help-thumb:active { cursor: grabbing; opacity: 1; }

/* ---------- UPGRADE pop-up text (buyModule.js renderBuyText) ---------- */
#BOX-BuyTxtZone .wg-buy-h1 {
    margin: .2em 0 .25em;
    font-family: var(--pop-title-font, 'Freeman', sans-serif);
    font-size: 1.15em;
    color: var(--pop-title);
}
#BOX-BuyTxtZone .wg-buy-h2 {
    margin: .35em 0 .1em;
    font-weight: bold;
    color: var(--pop-title);
}
#BOX-BuyTxtZone .wg-buy-li { padding-left: 1.2em; text-indent: -0.8em; }
#BOX-BuyTxtZone .wg-buy-gap { height: .7em; }
#BOX-BuyTxtZone .wg-buy-mail { color: var(--pop-title); font-weight: bold; }

/* ---------- Contact Us: link to the UPGRADE pop-up ---------- */
.wg-contact-upgrade-link {
    margin-top: .4em;
    color: var(--pop-title);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- About Us: UPGRADE button and links in the text (aboutUs.js) ---------- */
.wg-about-upgrade {
    display: inline-block;
    padding: .05em .55em;
    font: bold .9em 'Roboto Condensed', sans-serif;
    letter-spacing: .03em;
    color: #ffffff;
    background: #0a0a0a;
    border: 2px solid #e9e4c8;
    border-radius: 0;
    cursor: pointer;
    pointer-events: auto;
    vertical-align: baseline;
}
.wg-about-link {
    color: var(--pop-title);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    pointer-events: auto;
}

/* ---------- Payment buttons at the end of UPGRADE (paymentButtons.js) ----------
   Sizes in em: they follow the UPGRADE text's size (larger on a phone). */
.wg-pay {
    margin-top: .8em;
    padding-top: .3em;
    border-top: var(--pop-line);
}
.wg-pay-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45em;
    margin: .3em 0 .2em;
}
.wg-pay-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .05em;
    padding: .45em .2em;
    font: inherit;
    color: #fff;
    text-decoration: none;
    border: 2px solid #a3915e;
    border-radius: 0;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35);
    cursor: pointer;
    pointer-events: auto;
}
.wg-pay-btn:hover { filter: brightness(1.15); }
.wg-pay-upi { background: #1f5e8c; }
.wg-pay-paypal { background: #003087; }
.wg-pay-chosen { outline: 3px solid var(--pop-title); outline-offset: 1px; }
.wg-pay-off { opacity: .4; cursor: default; filter: grayscale(.6); }
.wg-pay-off:hover { filter: grayscale(.6); }
.wg-pay-level { font-size: .85em; letter-spacing: .03em; }
.wg-pay-amount {
    font-family: var(--pop-title-font, 'Freeman', sans-serif);
    font-size: 1.2em;
    color: var(--pop-title);
}
.wg-pay-hint { font-size: .85em; color: var(--pop-muted); margin-top: .2em; }
.wg-pay-warn { color: var(--pop-alert); margin: .2em 0 .4em; }
.wg-pay-qr {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: .5em;
    padding: .6em;
    background: var(--pop-field-bg);
    border: var(--pop-field-border);
}
.wg-pay-qr-img { flex: none; width: 8em; height: 8em; background: #fff; }
.wg-pay-qr-img svg { display: block; width: 100%; height: 100%; }
.wg-pay-qr-title {
    font-family: var(--pop-title-font, 'Freeman', sans-serif);
    font-size: 1.1em;
    color: var(--pop-title);
    margin-bottom: .2em;
}
.wg-pay-note {
    margin-top: .8em;
    padding: .45em .6em;
    font-size: .88em;
    line-height: 1.3;
    background: var(--pop-field-bg);
    border: var(--pop-field-border);
}
.wg-pay-help { margin-top: .5em; }

/* ---------- Challenge accepted: band under the picture (challengePopups.js) ---------- */
#POP-ChallengeAccepted { overflow: visible !important; }
.wg-accepted-band {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    box-sizing: border-box;
    padding: 8px 14px 10px;
    background: #d2dbab;
    border: 3px solid #29400f;
    border-top: none;
    color: #1c2a0e;
    font: 18px/1.25 'Roboto Condensed', sans-serif;
}
.wg-accepted-note { margin-bottom: 8px; font-weight: bold; }
.wg-accepted-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wg-accepted-timer { font-weight: bold; color: #7a1a12; white-space: nowrap; }
#POP-ChallengeAccepted .wg-accepted-play { position: static !important; width: 98px !important; height: 37px !important; display: block; cursor: pointer; }
.wg-accepted-band.wg-mob { padding: 14px 24px 18px; font-size: 32px; }
#POP-ChallengeAccepted .wg-accepted-band.wg-mob .wg-accepted-play { width: 240px !important; height: 102px !important; }