.sfg-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: 18px;
    color: #f4f4fb;
    font-family: system-ui, "Segoe UI", sans-serif;
}
.sfg-contact-modal[hidden] { display: none; }
.sfg-contact-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 13, 0.58);
}
.sfg-contact-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: min(760px, calc(var(--oct-frame-h, 100dvh) - 36px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 24px;
    border: 1px solid rgba(111, 112, 150, 0.92);
    border-radius: 16px;
    background: #151522;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.72);
}
/* The panel takes focus on open instead of the first field (see sfg-contact.js);
   that focus is programmatic, so suppress the ring the browser would otherwise
   draw around the whole dialog. */
.sfg-contact-panel[tabindex="-1"]:focus { outline: none; }
.sfg-contact-panel h2 {
    margin: 0 34px 18px 0;
    color: #fff;
    font-size: 28px;
    line-height: 1.1;
}
.sfg-contact-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid #565773;
    border-radius: 50%;
    background: #26273b;
    color: #fff;
    font: 900 18px system-ui, "Segoe UI", sans-serif;
    cursor: pointer;
}
.sfg-contact-form {
    display: grid;
    gap: 13px;
}
.sfg-contact-form label {
    display: grid;
    gap: 6px;
    color: #d8d8e6;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}
.sfg-contact-form input,
.sfg-contact-form select,
.sfg-contact-form textarea {
    width: 100%;
    border: 1px solid #50516d;
    border-radius: 11px;
    background: #0d0d17;
    color: #fff;
    font: 700 15px system-ui, "Segoe UI", sans-serif;
}
.sfg-contact-form input,
.sfg-contact-form select {
    min-height: 44px;
    padding: 10px 12px;
}
.sfg-contact-form textarea {
    min-height: 150px;
    resize: vertical;
    padding: 12px;
    line-height: 1.4;
}
.sfg-contact-form input:focus,
.sfg-contact-form select:focus,
.sfg-contact-form textarea:focus {
    border-color: #65e8ed;
    outline: 2px solid rgba(101, 232, 237, 0.2);
}
.sfg-contact-message-label { position: relative; }
.sfg-contact-count {
    justify-self: end;
    margin-top: -27px;
    padding: 0 10px 6px 0;
    color: #aaaabd;
    font-size: 12px;
    font-weight: 750;
    text-transform: none;
}
.sfg-contact-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}
.sfg-contact-captcha {
    min-height: 0;
}
.sfg-contact-captcha.is-loading,
.sfg-contact-captcha.is-error {
    display: grid;
    place-items: center;
    min-height: 70px;
    padding: 10px;
    border: 1px solid #50516d;
    border-radius: 11px;
    background: #0d0d17;
    color: #aaaabd;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}
.sfg-contact-captcha.is-error {
    color: #ff9a9a;
}
.sfg-contact-status {
    min-height: 22px;
    color: #7ff;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}
.sfg-contact-status.error { color: #ff9a9a; }
/* "Sending…" needs to look like it is doing something -- the form disables
   every control while the request runs, so without this the modal just goes
   quiet. Matches the spinner the games use; this file is loaded on pages that
   do not have theirs. */
.sfg-contact-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,.28);
    border-top-color: #7ff;
    border-radius: 50%;
    vertical-align: -3px;
    animation: sfg-contact-spin .7s linear infinite;
}
@keyframes sfg-contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sfg-contact-spinner { animation-duration: 2.1s; }
}
.sfg-contact-status[hidden] { display: none; }
.sfg-contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sfg-contact-actions button,
.sfg-contact-ok {
    min-height: 48px;
    border: 1px solid #565773;
    border-radius: 12px;
    color: #fff;
    font: 850 15px system-ui, "Segoe UI", sans-serif;
    cursor: pointer;
}
.sfg-contact-cancel {
    background: #242536;
}
.sfg-contact-send,
.sfg-contact-ok {
    background: #1c884e;
    border-color: #2ca65d;
}
.sfg-contact-actions button:hover,
.sfg-contact-ok:hover,
.sfg-contact-close:hover {
    filter: brightness(1.12);
}
.sfg-contact-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}
.sfg-contact-thanks-view {
    text-align: center;
}
.sfg-contact-thanks-view p {
    margin: 10px 0;
    color: #d2d2e0;
    font-size: 16px;
    line-height: 1.45;
}
.sfg-contact-ok {
    width: min(220px, 100%);
    margin-top: 18px;
}
@media (max-width: 480px) {
    .sfg-contact-modal {
        align-items: start;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }
    .sfg-contact-modal.is-thanks {
        align-items: center;
    }
    .sfg-contact-panel {
        max-height: calc(var(--oct-frame-h, 100dvh) - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
        padding: 20px 16px 35px;
    }
    .sfg-contact-panel h2 { font-size: 24px; }
}

/* ---------- Full-view presentation (opt-in) ----------
   For a host whose every other screen is a full view with a "<" in the top-left
   corner -- see <html data-sfg-contact-fullscreen>. Only rules under
   .is-fullscreen change, so a host that has not opted in renders the centred
   card exactly as before. Mirrors sfg-player-account.css's block of the same
   name, deliberately: the two overlays should be one screen family.

   The card's colours and the clearance above and below it are host tokens --
   this file has no business knowing that a host has a header and a copyright
   line to clear. The defaults are the ones OctoBahn's own pages use. */
.sfg-contact-modal.is-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    place-items: initial;
    padding: var(--sfg-contact-full-top, 18px) 16px var(--sfg-contact-full-bottom, 18px);
}
.sfg-contact-modal.is-fullscreen .sfg-contact-panel {
    width: min(560px, 94vw);
    max-width: none;
    height: 100%;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    position: relative;
    inset: auto;
    overflow: hidden;
    padding: 18px 16px 16px;
    border: 1px solid var(--sfg-contact-card-border, #33334a);
    border-radius: 14px;
    background: var(--sfg-contact-card-bg, #14141f);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6);
}
/* The panel IS the screen now, so there is nothing behind it to dim. */
.sfg-contact-modal.is-fullscreen .sfg-contact-backdrop {
    background: var(--sfg-contact-full-bg, #0b0b12);
}
/* The back button is in the SCREEN's corner, beside the host's own chrome --
   not in the card's, which is inset well away from it. */
.sfg-contact-modal.is-fullscreen .sfg-contact-back {
    position: fixed;
}
/* The card is the frame; the fields inside it are what scrolls, so the action
   bar at the foot of the view stays put. */
.sfg-contact-modal.is-fullscreen .sfg-contact-form-view:not([hidden]),
.sfg-contact-modal.is-fullscreen .sfg-contact-thanks-view:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sfg-contact-modal.is-fullscreen .sfg-contact-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sfg-contact-modal.is-fullscreen .sfg-contact-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Room for a focus ring against the scroll container's edge. */
    padding: 2px 3px;
    margin: -2px -3px;
}
/* Matches the circular back control the host uses elsewhere: same size, same
   corner, same chevron, so it reads as the same button rather than a second
   way out. */
.sfg-contact-back {
    position: absolute;
    z-index: 2;
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(125, 157, 192, 0.48);
    background: rgba(28, 37, 52, 0.92);
    color: rgba(239, 246, 255, 0.92);
    cursor: pointer;
}
.sfg-contact-back:hover { border-color: rgba(125, 157, 192, 0.8); }
.sfg-contact-back svg { display: block; }

/* The fields are a grid in their own right now that they sit in a scrolling
   body rather than being the form's direct children. */
.sfg-contact-form-body {
    display: grid;
    align-content: start;
    gap: 13px;
}

/* One pinned bar of icon-over-label actions, the same shape the account
   screens end in. */
.sfg-contact-actions {
    flex: 0 0 auto;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #2b3546;
}
.sfg-contact-actions-single {
    grid-template-columns: 1fr;
}
.sfg-contact-actionbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
/* Fixed box per icon, so every mark in the row sits on the same line whatever
   its own drawing does. */
.sfg-contact-actionbtn-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}
.sfg-contact-actionbtn-icon svg { display: block; }
.sfg-contact-actionbtn-label { overflow-wrap: anywhere; }

/* The thanks screen's OK is a bar action now, not a floating button. */
.sfg-contact-thanks-view .sfg-contact-ok {
    width: auto;
    margin-top: 0;
}

html.sfg-contact-lock,
html.sfg-contact-lock body {
    overflow: hidden;
}

/* Three actions will not sit side by side as labelled pills on a phone, so the
   bar becomes icon-over-label instead of wrapping or truncating -- the same
   breakpoint and the same shape the account bar uses. */
@media (max-width: 560px) {
    .sfg-contact-actionbtn {
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px;
        font-size: 12px;
    }
    .sfg-contact-actionbtn-label {
        display: block;
        width: 100%;
        min-height: 2.3em;
    }
}

/* ---------- Last word on visibility ----------
   The full-view rule above gives the modal its own `display` at the same
   weight as this [hidden] rule but later in the file, which would silently
   outrank it and leave a closed panel on screen. Keep this rule last.
   (The account stylesheet carries the identical guard, for the identical
   reason: see the comment there.)

   The two VIEWS inside it are handled differently, with :not([hidden]) on the
   rules that style them -- there the full-view selector is more specific, so
   ordering a guard after it would not have helped. */
.sfg-contact-modal[hidden] {
    display: none;
}

/* Soft keyboard up: the pinned bar goes (see sfg-soft-keyboard.js). The
   message box is the whole point of this screen, so it gets the room. */
html.sfg-keyboard-open .sfg-contact-actions { display: none; }