/* ============================================================
   xMAFIA R6.1 — FUNCTIONAL UI FOUNDATION

   Two display modes:

       original
           Existing restoration visuals remain authoritative.

       qa
           Functional inspection skin.
           Real browser controls are intentionally visible.

   IMPORTANT:
   No gameplay/server decisions live here.
   ============================================================ */


/* ------------------------------------------------------------
   OUTSIDE-FLASH MODE SWITCHER
   ------------------------------------------------------------ */

.xmafia-ui-switcher {
    position: fixed;

    right: 12px;
    bottom: 12px;

    z-index: var(--xm-z-inspector);

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 7px;

    border: 1px solid #777;
    border-radius: 7px;

    background: rgba(15, 15, 15, .94);

    font-family: var(--xm-font-ui);
    font-size: 11px;

    color: #eee;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .4);
}

.xmafia-ui-switcher button {
    min-width: 64px;
    height: 28px;

    padding: 0 9px;

    border: 1px solid #777;
    border-radius: 4px;

    background: #292929;
    color: #eee;

    cursor: pointer;
}

.xmafia-ui-switcher button:hover {
    background: #3c3c3c;
}

.xmafia-ui-switcher button.is-active {
    border-color: #f0c85a;
    color: #f0c85a;
}

.xmafia-ui-mode-label {
    min-width: 72px;

    color: #aaa;
}


/* ------------------------------------------------------------
   SEMANTIC ATTRIBUTES

   Foundation JS adds data-ui-role/data-ui-name/data-ui-state.
   Original mode receives no new visual treatment from them.
   ------------------------------------------------------------ */

[data-ui-role] {
    box-sizing: border-box;
}


/* ============================================================
   QA MODE
   ============================================================ */

body[data-xmafia-ui="qa"] {
    background:
        repeating-linear-gradient(
            45deg,
            #101010,
            #101010 8px,
            #151515 8px,
            #151515 16px
        );

    color: var(--xm-text);
}


/*
 * Stage boundary.
 */

body[data-xmafia-ui="qa"] #flashStage {
    outline:
        3px solid var(--xm-accent) !important;

    outline-offset:
        2px;

    background:
        #171717 !important;
}


/*
 * Fade decorative art instead of deleting it.
 *
 * This allows us to see where the historical artwork is located
 * while functional DOM controls remain obvious.
 */

body[data-xmafia-ui="qa"]
#flashStage img:not(
    [data-ui-keep-art="1"]
) {
    opacity: .16;
}


/*
 * Every semantic panel/modal gets a readable boundary.
 */

body[data-xmafia-ui="qa"]
[data-ui-role="panel"],
body[data-xmafia-ui="qa"]
[data-ui-role="modal"] {
    outline:
        1px dashed var(--xm-info) !important;

    background:
        rgba(25, 25, 25, .82) !important;
}


/*
 * Real button hit area.
 */

body[data-xmafia-ui="qa"]
button {
    min-width:
        var(--xm-hit-min);

    min-height:
        var(--xm-hit-min);

    border:
        1px solid var(--xm-border-strong) !important;

    border-radius:
        var(--xm-radius-sm) !important;

    background:
        var(--xm-bg-control) !important;

    color:
        var(--xm-text) !important;

    opacity:
        1 !important;

    cursor:
        pointer !important;

    pointer-events:
        auto !important;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.55) !important;
}

body[data-xmafia-ui="qa"]
button:hover {
    background:
        var(--xm-bg-control-hover) !important;

    border-color:
        var(--xm-accent) !important;
}


/*
 * Many restored controls contain an original image.
 * In QA mode the image becomes a faint reference background.
 */

body[data-xmafia-ui="qa"]
button > img {
    opacity:
        .25 !important;

    pointer-events:
        none !important;
}


/*
 * Expose a human-readable name on empty/image-only controls.
 */

body[data-xmafia-ui="qa"]
button[data-ui-name]::after {
    content:
        attr(data-ui-name);

    position:
        absolute;

    left:
        2px;
    right:
        2px;
    bottom:
        1px;

    z-index:
        10;

    overflow:
        hidden;

    font:
        9px/11px var(--xm-font-ui);

    color:
        #fff;

    text-align:
        center;

    white-space:
        nowrap;

    pointer-events:
        none;

    text-shadow:
        0 1px 2px #000;
}


/*
 * Inputs/textareas/selects become unmistakable.
 */

body[data-xmafia-ui="qa"]
input,
body[data-xmafia-ui="qa"]
textarea,
body[data-xmafia-ui="qa"]
select {
    border:
        2px solid var(--xm-info) !important;

    outline:
        none !important;

    background:
        #090d12 !important;

    color:
        #fff !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;

    caret-color:
        var(--xm-accent);
}

body[data-xmafia-ui="qa"]
input:focus,
body[data-xmafia-ui="qa"]
textarea:focus,
body[data-xmafia-ui="qa"]
select:focus {
    border-color:
        var(--xm-accent) !important;
}


/*
 * Invisible controls/hit-zones are important during QA.
 */

body[data-xmafia-ui="qa"]
[data-ui-role="hit-zone"] {
    outline:
        2px solid var(--xm-warning) !important;

    background:
        rgba(243,187,85,.12) !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;
}


/*
 * Close buttons should be impossible to miss.
 */

body[data-xmafia-ui="qa"]
[data-ui-action="close"] {
    border-color:
        var(--xm-danger) !important;

    background:
        #572424 !important;

    color:
        #fff !important;
}

body[data-xmafia-ui="qa"]
[data-ui-action="close"]::after {
    content:
        "CLOSE";

    position:
        absolute;

    inset:
        0;

    display:
        grid;
    place-items:
        center;

    color:
        white;

    font:
        bold 9px var(--xm-font-ui);

    pointer-events:
        none;
}


/*
 * Chat differentiation.
 */

body[data-xmafia-ui="qa"]
.game-chat-line {
    border-left:
        3px solid #777;

    padding-left:
        4px;
}

body[data-xmafia-ui="qa"]
.game-chat-line.is-private {
    border-left-color:
        var(--xm-private) !important;

    background:
        rgba(103,217,154,.12) !important;
}

body[data-xmafia-ui="qa"]
.game-chat-line.is-mafia {
    border-left-color:
        var(--xm-danger) !important;

    background:
        rgba(233,106,106,.12) !important;
}

body[data-xmafia-ui="qa"]
.game-chat-line.is-system {
    border-left-color:
        var(--xm-warning) !important;
}


/*
 * Recipient state.
 */

body[data-xmafia-ui="qa"]
[data-ui-state~="private"] {
    outline:
        2px solid var(--xm-private) !important;
}


/*
 * Game smile control.
 */

body[data-xmafia-ui="qa"]
#gameSmileButton {
    width:
        32px !important;

    height:
        32px !important;

    z-index:
        900 !important;
}

body[data-xmafia-ui="qa"]
.xmafia-game-smile-window {
    outline:
        3px solid #ff4 !important;

    background:
        #181818 !important;

    opacity:
        1 !important;

    z-index:
        1200 !important;
}

body[data-xmafia-ui="qa"]
.xmafia-game-smile-window img {
    opacity:
        1 !important;
}


/*
 * Wall specifically.
 *
 * We do NOT move controls.
 * QA only reveals their actual rectangles.
 */

body[data-xmafia-ui="qa"]
.xmafia-wall-r350 {
    outline:
        3px solid #b86cff !important;

    background:
        rgba(30,15,45,.88) !important;
}

body[data-xmafia-ui="qa"]
.xmafia-wall-close {
    outline:
        3px solid red !important;

    background:
        rgba(255,0,0,.35) !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;

    z-index:
        2000 !important;
}

body[data-xmafia-ui="qa"]
.xmafia-wall-input {
    outline:
        3px solid #3fcfff !important;

    background:
        rgba(0,25,35,.85) !important;
}


/*
 * Daily bonus close.
 */

body[data-xmafia-ui="qa"]
.xmafia-daily-bonus-close {
    outline:
        3px solid red !important;

    background:
        rgba(255,0,0,.35) !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;

    z-index:
        2000 !important;
}


/*
 * Profile presents.
 */

body[data-xmafia-ui="qa"]
.xmafia-profile-presents-compact {
    outline:
        3px solid #42f5a7 !important;

    background:
        rgba(0,65,40,.3) !important;
}

body[data-xmafia-ui="qa"]
.xmafia-profile-present-slot {
    outline:
        1px solid #42f5a7 !important;
}


/*
 * User list controls.
 */

body[data-xmafia-ui="qa"]
[data-ui-family="user-control"] {
    outline:
        1px solid #ff75cf !important;
}


/*
 * Disabled semantics.
 */

body[data-xmafia-ui="qa"]
button:disabled,
body[data-xmafia-ui="qa"]
[aria-disabled="true"] {
    opacity:
        .45 !important;

    cursor:
        not-allowed !important;
}


/* ------------------------------------------------------------
   DEBUG LABEL

   Small tag shown on semantic panels.
   ------------------------------------------------------------ */

body[data-xmafia-ui="qa"]
[data-ui-role="panel"][data-ui-name]::before,
body[data-xmafia-ui="qa"]
[data-ui-role="modal"][data-ui-name]::before {
    content:
        attr(data-ui-name);

    position:
        absolute;

    left:
        0;
    top:
        0;

    z-index:
        4000;

    padding:
        2px 4px;

    background:
        #1266a8;

    color:
        white;

    font:
        9px/12px var(--xm-font-ui);

    pointer-events:
        none;
}

/* XMAFIA_R62_WIRING_STATUS */

body[data-xmafia-ui="qa"]
button[data-ui-wiring="wired"] {
    box-shadow:
        0 0 0 2px #31d17c !important;
}

body[data-xmafia-ui="qa"]
button[data-ui-wiring="unknown"] {
    box-shadow:
        0 0 0 2px #ff5757 !important;
}

body[data-xmafia-ui="qa"]
button[data-ui-wiring="disabled"] {
    box-shadow:
        0 0 0 2px #999 !important;
}

/* ============================================================
   XMAFIA_R63_WIRING_SEMANTICS

   amber = known/identified control
   red   = unknown/unclassified
   gray  = disabled

   Green is reserved for future behaviour that has actually been
   confirmed, not inferred from DOM metadata.
   ============================================================ */

body[data-xmafia-ui="qa"]
button[data-ui-wiring="known"] {
    box-shadow:
        0 0 0 2px #e8b94e !important;
}

body[data-xmafia-ui="qa"]
button[data-ui-wiring="wired"] {
    box-shadow:
        0 0 0 2px #e8b94e !important;
}

/* XMAFIA_R64_ACTION_STATE */

/*
 * Green is now reserved for an action which actually reached
 * its bound browser handler during this session.
 */
body[data-xmafia-ui="qa"]
button[data-ui-action-state="fired"] {
    box-shadow:
        0 0 0 3px #31d17c !important;
}

/* ============================================================
   XMAFIA_R65_DELETE_GAME_QA

   Bot autofill can consume a ticket before a human can perform a
   reliable manual remove-game test.

   Green fired-state remains proof that the actual click handler ran.
   ============================================================ */

body[data-xmafia-ui="qa"]
.original-ticket-operation[data-operation="remove"] {
    outline: 3px solid #ffbf47 !important;
}