/*
 * ============================================================
 * xMafia HTML restoration
 * Clean client architecture
 * ============================================================
 *
 * This stylesheet intentionally contains almost NO historical
 * component styling yet.
 *
 * First we establish correct screen ownership:
 *
 *   BootView
 *   MainView
 *   MainModalLayer
 *   GameView
 *   GameModalLayer
 *
 * Original visuals are added only after each MovieClip has been
 * classified and checked for flattened dynamic children.
 * ============================================================
 */

* {
    box-sizing: border-box;
}

html,
body {
    min-width: 100%;
    min-height: 100%;

    margin: 0;
}

body {
    background: #111;

    color: #ddd;

    font-family:
        Arial,
        Tahoma,
        sans-serif;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* ============================================================
   PAGE
   ============================================================ */

.restoration-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding: 10px;
}


/* ============================================================
   RESTORATION DEBUG UI

   Explicitly OUTSIDE original Flash stage.
   ============================================================ */

.debug-bar {
    width: 760px;

    min-height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 4px 6px;

    background: #202020;

    border: 1px solid #333;

    color: #999;

    font-size: 11px;
}

.debug-title {
    margin-right: auto;

    color: #706b60;
}

.debug-bar button {
    min-width: 70px;

    height: 24px;

    padding: 0 8px;

    border: 1px solid #454545;

    background: #292929;

    color: #aaa;

    cursor: pointer;
}

.debug-bar button:hover {
    background: #343434;
}

.debug-connection {
    min-width: 62px;

    text-align: right;
}

.debug-connection.is-online {
    color: #80a66e;
}


/* ============================================================
   ORIGINAL FLASH STAGE
   ============================================================ */

.flash-stage {
    position: relative;

    width: 760px;
    height: 600px;

    flex: 0 0 760px;

    overflow: hidden;

    background: #000;
}


/* ============================================================
   VIEW SYSTEM
   ============================================================ */

.client-view {
    position: absolute;

    inset: 0;

    width: 760px;
    height: 600px;
}

.is-hidden {
    display: none !important;
}

.view-layer {
    position: absolute;

    inset: 0;

    width: 760px;
    height: 600px;
}


/* ============================================================
   BOOT VIEW
   ============================================================ */

.boot-view {
    z-index: 100;
}

.boot-art {
    position: absolute;

    left: 0;
    top: 0;

    width: 760px;
    height: 600px;

    display: block;

    pointer-events: none;
}

.boot-progress-mask {
    position: absolute;

    left: 288px;
    top: 480px;

    width: 184px;
    height: 3px;

    overflow: hidden;
}

.boot-progress {
    width: 100%;
    height: 100%;

    transform: scaleX(0);
    transform-origin: left center;

    background: rgba(
        218,
        184,
        114,
        .65
    );
}


/* ============================================================
   MAIN VIEW
   ============================================================ */

.main-view {
    z-index: 10;

    background: #161616;
}

.main-view .artwork-layer {
    z-index: 1;
}

.main-profile-layer {
    z-index: 10;
}

.main-games-holder {
    z-index: 20;
}

.main-chat-holder {
    z-index: 30;
}

.main-users-holder {
    z-index: 40;
}

.main-view .controls-layer {
    z-index: 50;
}


/* ============================================================
   GAME VIEW
   ============================================================ */

.game-view {
    z-index: 20;

    background: #161616;
}

.game-view .artwork-layer {
    z-index: 1;
}

.game-state-holder {
    z-index: 10;
}

.game-players-holder {
    z-index: 20;
}

.game-roles-holder {
    z-index: 30;
}

.game-chat-holder {
    z-index: 40;
}

.game-users-holder {
    z-index: 50;
}

.game-view .controls-layer {
    z-index: 60;
}


/* ============================================================
   MODAL LAYERS
   ============================================================ */

.modal-layer {
    position: absolute;

    inset: 0;

    width: 760px;
    height: 600px;

    z-index: 1000;

    pointer-events: none;
}

.modal-layer > * {
    pointer-events: auto;
}


/*
 * Important:
 *
 * No historical Lobby/Game/NewGame graphics are added here yet.
 *
 * This is deliberate.
 *
 * We first prove that a DOM node belongs to the correct original
 * state before drawing it.
 */


/* ============================================================
   NARROW BROWSER

   Preserve historical coordinates instead of rearranging them.
   ============================================================ */

@media (max-width: 780px) {

    .restoration-page {
        align-items: flex-start;

        overflow-x: auto;
    }

}

/* ============================================================
   R2.1 — ORIGINAL MAINVIEW SHELL
   ============================================================ */

.main-view {
    position: absolute;
    inset: 0;

    width: 760px;
    height: 600px;

    overflow: hidden;

    background: #161616;
}

.main-art {
    position: absolute;
    display: block;

    max-width: none;

    user-select: none;
    pointer-events: none;
}

/* symbol50 */
.main-bottom-fullscreen {
    left: 0;
    top: -0.25px;

    z-index: 3;
}

/* symbol52 */
.main-delimiter {
    left: 4px;
    top: 46px;

    z-index: 8;
}

/* symbol54 */
.main-top-fullscreen {
    left: 0;
    top: 0;

    z-index: 12;
}

/* symbol56 */
.main-bottom {
    left: 0;
    top: 0;

    z-index: 18;
}

/* symbol143 */


/* userName from MainTemplate symbol200 */
.main-user-name {
    position: absolute;

    left: 78px;
    top: 6.65px;

    z-index: 70;

    min-width: 90px;

    color: #c9c0b0;

    font-size: 12px;
    line-height: 18px;
}

/* userLevel original holder area */
.main-user-level {
    position: absolute;

    left: 57px;
    top: 7.5px;

    z-index: 71;

    width: 18px;
    height: 18px;

    color: #d4c79e;

    font-size: 9px;
    line-height: 18px;

    text-align: center;
}

/* mafiaGamesHolder */
.main-games-holder {
    position: absolute;

    left: 9.6px;
    top: 81px;

    width: 545px;
    height: 222px;

    z-index: 30;

    overflow: hidden;
}

/* messageContainerHolder */
.main-chat-holder {
    position: absolute;

    left: 5.6px;
    top: 326.9px;

    width: 540px;
    height: 230px;

    z-index: 40;

    overflow: hidden;
}

/* userListHolder */
.main-users-holder {
    position: absolute;

    left: 551px;
    top: 53px;

    width: 205px;
    height: 500px;

    z-index: 50;

    overflow: hidden;
}

.main-original-button {
    position: absolute;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    cursor: pointer;
}

.main-original-button img {
    display: block;

    pointer-events: none;
}

/* btnCreateGame */
.main-create-game {
    left: 339.95px;
    top: 6px;

    z-index: 80;
}

/* ============================================================
   R2.2 — SYMBOL200 EXACT STATIC CONTROL PLACEMENTS
   Coordinates copied from original SWF display list.
   ============================================================ */

.main-join-game {
    left: 226.35px;
    top: 6px;
    z-index: 80;
}

.main-create-game {
    left: 339.95px;
    top: 6px;
    z-index: 74;
}

.main-wall {
    left: 453.95px;
    top: 11px;
    z-index: 78;
}

.main-friends {
    left: 515.85px;
    top: 7.85px;
    z-index: 84;
}

.main-top {
    left: 585.85px;
    top: 8.85px;
    z-index: 86;
}

.main-vip {
    left: 170px;
    top: 4px;
    z-index: 105;
}

.main-profile {
    left: 58.95px;
    top: 4.45px;
    z-index: 96;

    /*
     * Original PlaceObject matrix:
     * scaleX=.73339844
     * scaleY=1.3220215
     */
    transform:
        scale(.73339844, 1.3220215);

    transform-origin:
        left top;
}





.main-smile {
    left: 604.7px;
    top: 569.75px;

    z-index: 94;
}

.main-send {
    left: 625.5px;
    top: 566.75px;

    z-index: 20;
}

.main-message-input {
    position: absolute;

    left: 34px;
    top: 572.65px;

    width: 560px;
    height: 17px;

    z-index: 25;

    padding: 1px 4px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #584738;

    font-size: 10px;
    line-height: 15px;
}

.main-counter {
    position: absolute;

    top: 62px;

    z-index: 90;

    height: 15px;

    color: #9d9587;

    font-size: 9px;
    line-height: 15px;
}

.main-players-in-game {
    left: 13px;
}

.main-players-waiting {
    left: 285.05px;
}

/*
 * HOLDERS from symbol200.
 *
 * They intentionally remain empty during R2.2.
 * Components are mounted independently in later stages.
 */

.main-games-holder {
    left: 9.6px;
    top: 81px;
}

.main-chat-holder {
    left: 5.6px;
    top: 326.9px;
}

.main-users-holder {
    left: 551px;
    top: 53px;
}


/*
 * XMAFIA R2.2.2
 * Main navigation buttons.
 *
 * These dimensions come directly from the original SWF
 * exported MovieClips and must remain pixel-perfect.
 */

.main-wall {
    left: 453.95px;
    top: 11px;
    width: 49px;
    height: 32px;
}

.main-wall img {
    display: block;
    width: 49px;
    height: 32px;
    max-width: none;
}

.main-friends {
    left: 515.85px;
    top: 7.85px;
    width: 58px;
    height: 38px;
}

.main-friends img {
    display: block;
    width: 58px;
    height: 38px;
    max-width: none;
}

.main-top {
    left: 585.85px;
    top: 8.85px;
    width: 62px;
    height: 34px;
}

.main-top img {
    display: block;
    width: 62px;
    height: 34px;
    max-width: none;
}

/*
 * Never render the flattened symbol143 export.
 * It is 748x583 and represents a Flash display tree,
 * not one visual HTML control.
 */
.main-top-right,
.main-present-indicator,
.main-bug,
.bug-tracker,
.btn-bug {
    display: none !important;
}

/* ============================================================
   XMAFIA R2.3 — ORIGINAL ONLINE USER PANEL

   Original Flash geometry:

     MainTemplate.userListHolder = 551,53
     OnlineUserPanel.panelTitle.y = 5
     OnlineUserPanel.userListContainer.y = 30
     mask = 220x470
     UserInfo row step = 20px

   UserInfoMC itself is symbol260 (197x23).
   ============================================================ */

.main-users-holder {
    position: absolute;

    left: 551px;
    top: 53px;

    width: 220px;
    height: 500px;

    overflow: visible;

    z-index: 23;
}

.original-online-panel {
    position: relative;

    width: 220px;
    height: 500px;

    overflow: hidden;

    font-family: Arial, sans-serif;
}

.original-online-title {
    position: absolute;

    left: 0;
    top: 5px;

    width: 197px;
    height: 18px;

    box-sizing: border-box;

    color: #fffce6;

    font-size: 11px;
    line-height: 16px;

    text-align: center;

    white-space: nowrap;

    pointer-events: none;
}

.original-online-viewport {
    position: absolute;

    left: 0;
    top: 30px;

    width: 220px;
    height: 470px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
}

.original-online-list {
    position: relative;

    width: 197px;

    min-height: 1px;
}

.original-user-row {
    position: absolute;

    left: 0;

    width: 197px;
    height: 23px;

    box-sizing: border-box;

    font-family: Arial, sans-serif;

    opacity: 1;
}

.original-user-row.is-muted {
    opacity: .3;
}

/*
 * btnSelectUser is character62.
 * In the original SWF this is an invisible 126x13 hit-area.
 */
.original-user-select {
    position: absolute;

    left: .25px;
    top: 2.35px;

    width: 126px;
    height: 13px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 5;
}

.original-user-select:disabled {
    cursor: default;
}

/* symbol148 */
.original-user-level {
    position: absolute;

    left: 0;
    top: 2.85px;

    width: 18px;
    height: 16px;

    z-index: 10;
}

.original-user-level img {
    position: absolute;

    left: 0;
    top: 0;

    display: block;

    max-width: none;
}

.original-user-level-value {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-bottom: 1px;

    color: #fff;

    font-size: 9px;
    line-height: 12px;

    text-align: center;

    pointer-events: none;
}

/*
 * UserInfo.as finally forces userName.x = 18.
 * Original SWF text uses Arial 11.
 */
.original-user-name {
    position: absolute;

    left: 18px;
    top: 2px;

    max-width: 110px;

    overflow: hidden;

    color: #ffdf19;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 14px;

    white-space: nowrap;

    pointer-events: none;

    z-index: 11;
}

.original-user-row.is-main .original-user-name {
    color: #fff;
}

.original-user-row.is-in-game:not(.is-main)
.original-user-name {
    color: #b48080;
}

.original-user-action {
    position: absolute;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 20;
}

.original-user-action img {
    display: block;

    max-width: none;

    pointer-events: none;
}

/*
 * UserInfo.as recalculates X from userName.textWidth.
 * JS reproduces that calculation after DOM rendering.
 */
.original-user-private {
    top: 2.85px;

    width: 16px;
    height: 11px;
}

.original-user-info {
    top: 2.9px;

    width: 16px;
    height: 16px;
}


/*
 * R7.2A — UserInfo.btnInfo VIP visual contract.
 *
 * Original Flash btnInfo owns `standart` and `crown` layers.
 * Both occupy the same semantic profile button.
 *
 * Never attach separate behaviour to the crown image.
 */
.original-user-info {
    overflow: visible;
}

.original-user-info-standard,
.original-user-info-crown {
    position: absolute;

    left: 0;
    top: 0;

    width: 16px;
    height: 16px;

    object-fit: contain;

    pointer-events: none;
}

.original-user-info-crown {
    display: none;
}

.original-user-info.is-vip
.original-user-info-standard {
    display: none;
}

.original-user-info.is-vip
.original-user-info-crown {
    display: block;
}

.original-user-moderator {
    top: .7px;

    width: 16px;
    height: 16px;
}

.original-user-ban-marker {
    position: absolute;

    left: 20px;

    width: 16px;
    height: 16px;

    z-index: 25;
}

.original-user-no-game {
    top: 1.35px;
}

.original-user-no-talk {
    top: .85px;
}

.original-user-ban-marker img {
    display: block;

    width: 16px;
    height: 16px;

    max-width: none;
}

.original-user-tooltip {
    position: absolute;

    left: 20px;
    top: 0;

    min-width: 130px;

    padding: 4px 8px;

    border: 1px solid rgba(255,255,255,.3);
    border-radius: 3px;

    background: rgba(34,24,16,.96);

    color: #fffce6;

    font-size: 10px;
    line-height: 13px;

    white-space: pre-line;

    pointer-events: none;

    z-index: 1000;
}

/* ============================================================
   R2.4 — UserInfo.setAsPlayerInGame() exact color precedence

   Original AS3 directly assigns userName.textColor = 11828224
   after the row has already been created. Therefore in-game
   color wins even over the normal white "(это ты)" styling.
   ============================================================ */

.original-user-row.is-in-game .original-user-name {
    color: #b48080;
}

/* ============================================================
   XMAFIA R2.5 — ORIGINAL MAIN CHAT

   ChatMessageContainer:
     holder position comes from MainTemplate
     chatMaxHeight = 230
     Arial 11
   ============================================================ */

.main-chat-holder {
    position: absolute;

    left: 5.6px;
    top: 326.9px;

    width: 538px;
    height: 230px;

    overflow: hidden;

    z-index: 22;
}

.original-chat-viewport {
    width: 100%;
    height: 230px;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 0 5px 0 0;

    box-sizing: border-box;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 14px;

    scrollbar-width: thin;
}

.original-chat-message {
    min-height: 14px;

    margin: 0;
    padding: 0;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.original-chat-time {
    color: inherit;
}

.original-chat-author {
    display: inline;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    font: inherit;
    line-height: inherit;

    text-decoration: none;

    cursor: pointer;
}

.original-chat-author:hover {
    text-decoration: underline;
}

.original-chat-text {
    color: inherit;
}

/* ============================================================
   XMAFIA R2.6 CORE
   UserForSending / MainTemplate input lifecycle

   Behaviour ported from original AS3.
   ============================================================ */

/*
 * Flash TextField inputMessage:
 *
 * x = 34
 * y = 572.65
 * width reset by MainTemplate to 575
 */
.main-message-input {
    left: 34px;
    top: 572.65px;

    width: 575px;
    height: 17px;

    z-index: 120;

    box-sizing: border-box;

    padding: 1px 4px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #584738;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 15px;

    pointer-events: auto;
    cursor: text;
    caret-color: #584738;
}


/*
 * HTML equivalent of UserForSendingMC / symbol296.
 *
 * Actual width is assigned by JS:
 *     rendered userName textWidth + 30
 */
.original-user-for-sending {
    position: absolute;

    height: 17px;

    z-index: 125;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    border-radius: 2px;

    background:
        linear-gradient(
            to bottom,
            rgba(137, 126, 103, .95),
            rgba(91, 82, 66, .95)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.16);

    pointer-events: auto;
}


.original-user-for-sending.is-private {
    background:
        linear-gradient(
            to bottom,
            rgba(157, 61, 54, .98),
            rgba(100, 34, 31, .98)
        );
}


.original-user-for-sending-toggle {
    flex: 1 1 auto;

    min-width: 0;
    height: 17px;

    margin: 0;
    padding: 0 3px 0 5px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #f2ead8;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 17px;

    white-space: nowrap;
    overflow: hidden;

    text-align: left;

    cursor: pointer;
}


.original-user-for-sending-close {
    flex: 0 0 20px;

    width: 20px;
    height: 17px;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #eee2d2;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 15px;

    cursor: pointer;
}


.original-user-for-sending-close:hover,
.original-user-for-sending-toggle:hover {
    background:
        rgba(255,255,255,.08);
}


/*
 * Controls are independently clickable like Flash MovieClips.
 */
.main-send,
.main-smile,
.main-message-input,
.original-user-for-sending {
    pointer-events: auto;
}

.main-send {
    z-index: 130;
}

.main-smile {
    z-index: 130;
}

/* ============================================================
   XMAFIA R3.0 — ORIGINAL MafiaGame HTML PORT

   Source of truth:
     MafiaGame.as
     MafiaGamePlayersContainer.as
     MafiaGamePlayer.as
     MainTemplateMC / symbol200
     PlayerInGameMC / symbol596

   Game rules remain in preserved mafiaGames.js.
   ============================================================ */

.game-view {
    background:
        linear-gradient(
            180deg,
            rgba(42, 31, 23, .97),
            rgba(16, 12, 10, .99)
        );
    overflow: hidden;
    color: #dedfde;
    font-family: Arial, sans-serif;
}

.game-artwork-layer {
    pointer-events: none;
}

.game-original-back {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 45% 35%,
            rgba(107, 77, 47, .28),
            transparent 50%
        );
}


/* ------------------------------------------------------------
   MafiaStateContainer
   ------------------------------------------------------------ */

.game-state-holder {
    left: 8px;
    top: 54px;

    width: 235px;
    height: 215px;

    z-index: 20;
}

.original-game-state {
    position: relative;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    border: 1px solid rgba(196, 164, 110, .24);
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(69, 52, 38, .82),
            rgba(30, 23, 19, .86)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.07);
}

.game-state-title {
    min-height: 18px;

    color: #f4e4bf;
    font-size: 12px;
    font-weight: bold;
}

.game-state-move {
    margin-top: 2px;

    color: #ff9933;
    font-size: 14px;
    font-weight: bold;
}

.game-move-question {
    min-height: 34px;
    margin-top: 8px;

    color: #dedfde;
    font-size: 12px;
    line-height: 16px;
}

.game-timer {
    position: absolute;

    right: 12px;
    top: 10px;

    color: #fff4cb;
    font-size: 13px;
    font-weight: bold;
}

.game-my-role-block {
    position: absolute;

    left: 12px;
    bottom: 12px;

    width: 205px;
    height: 62px;
}

.game-my-role-icon {
    position: absolute;

    left: 0;
    top: 3px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(205,174,115,.35);
    border-radius: 4px;

    background: rgba(0,0,0,.25);

    color: #ff9933;
    font-size: 22px;
    font-weight: bold;
}

.game-my-name,
.game-my-role {
    position: absolute;

    left: 58px;
    width: 145px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-my-name {
    top: 8px;

    color: #fff0cd;
    font-size: 12px;
}

.game-my-role {
    top: 29px;

    color: #ff9933;
    font-size: 11px;
}

.game-close-button {
    position: absolute;

    right: 10px;
    bottom: 8px;

    height: 20px;
}


/* ------------------------------------------------------------
   MafiaGamePlayersContainer

   Original:
       container x = 252
       row step    = 47
       mask        = 285 × 255
   ------------------------------------------------------------ */

.game-players-holder {
    left: 252px;
    top: 54px;

    width: 290px;
    height: 263px;

    z-index: 25;
}

.game-players-viewport {
    position: absolute;

    left: -5px;
    top: -8px;

    width: 285px;
    height: 255px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
}

.game-players-list {
    position: relative;

    width: 270px;
    min-height: 1px;
}

.game-player-row {
    position: absolute;

    left: 0;

    width: 270px;
    height: 44px;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(205,174,115,.10);

    background:
        linear-gradient(
            90deg,
            rgba(39,30,25,.75),
            rgba(56,42,31,.38)
        );

    font-size: 11px;
}

.game-player-row.is-me {
    background:
        linear-gradient(
            90deg,
            rgba(91,67,36,.78),
            rgba(58,43,31,.42)
        );
}

.game-player-row.is-out {
    opacity: .42;
}

.game-player-icon {
    position: absolute;

    left: 3px;
    top: 2px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 3px;

    background: rgba(0,0,0,.25);

    color: #ff9933;

    font-size: 10px;
    font-weight: bold;
}

.game-player-name {
    position: absolute;

    left: 48px;
    top: 5px;

    max-width: 126px;

    color: #f5ead6;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    cursor: pointer;
}

.game-player-target {
    position: absolute;

    left: 48px;
    top: 23px;

    max-width: 135px;

    color: #bfb7a9;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-player-votes {
    position: absolute;

    right: 47px;
    top: 6px;

    width: 36px;

    text-align: center;

    color: #00ff00;
}

.game-player-action {
    position: absolute;

    right: 3px;
    top: 7px;

    min-width: 38px;
    height: 28px;

    padding: 0 5px;

    border: 1px solid rgba(255,153,51,.46);
    border-radius: 3px;

    background: rgba(78,48,24,.82);

    color: #ffe1b6;
    font-size: 10px;

    cursor: pointer;
}

.game-player-action:hover {
    filter: brightness(1.25);
}

.game-player-action:disabled {
    display: none;
}


/* ------------------------------------------------------------
   TextRolesInGameMC
   ------------------------------------------------------------ */

.game-roles-holder {
    left: 8px;
    top: 280px;

    width: 230px;
    height: 22px;

    z-index: 25;
}

.game-roles-text {
    color: #d8d0c5;
    font-size: 11px;
}

.game-roles-count {
    color: #ff9933;
    font-weight: bold;
}


/* ------------------------------------------------------------
   Game Chat — original MainTemplate bottom area
   ------------------------------------------------------------ */

.game-chat-holder {
    left: 8px;
    top: 315px;

    width: 535px;
    height: 278px;

    z-index: 30;
}

.game-chat-messages {
    position: absolute;

    left: 0;
    top: 0;

    width: 525px;
    height: 230px;

    box-sizing: border-box;

    padding: 4px 7px;

    overflow-y: auto;
    overflow-x: hidden;

    background: rgba(0,0,0,.18);

    font-size: 11px;
    line-height: 15px;

    scrollbar-width: thin;
}

.game-chat-line {
    min-height: 15px;
    word-break: break-word;
}

.game-chat-time {
    color: #888;
    margin-right: 4px;
}

.game-chat-name {
    color: #e6e12d;
    margin-right: 4px;
}

.game-chat-line.is-private {
    color: #30f81b;
}

.game-chat-line.is-mafia {
    color: #ba2f2f;
}

.game-chat-line.is-system {
    color: #dedfde;
}

.game-recipient {
    position: absolute;

    left: 26px;
    bottom: 20px;

    height: 19px;

    display: flex;
    align-items: center;
}

.game-recipient button {
    height: 19px;

    border: 0;

    color: #fff;
    font-size: 10px;

    cursor: pointer;
}

#gameRecipientMode {
    padding: 0 7px;

    background: rgba(102,73,42,.9);
}

#gameRecipientMode.is-private {
    background: rgba(112,30,30,.92);
}

#gameRecipientClear {
    width: 19px;
    padding: 0;

    background: rgba(30,30,30,.9);
}

.game-message-input {
    position: absolute;

    left: 26px;
    bottom: 0;

    width: 473px;
    height: 18px;

    box-sizing: border-box;

    border: 1px solid rgba(96,76,54,.55);
    outline: none;

    background: rgba(245,232,205,.78);

    color: #49392d;

    font-family: Arial, sans-serif;
    font-size: 11px;
}

.game-send-button {
    position: absolute;

    right: 2px;
    bottom: 0;

    width: 29px;
    height: 18px;

    padding: 0;

    border: 0;

    background: rgba(98,67,38,.85);

    color: #f7e7c4;

    cursor: pointer;
}


/* ------------------------------------------------------------
   Game OnlineUserPanel
   ------------------------------------------------------------ */

.game-users-holder {
    left: 551px;
    top: 53px;

    width: 205px;
    height: 500px;

    z-index: 40;
}

.game-users-title {
    height: 24px;

    text-align: center;

    color: #fffce6;
    font-size: 11px;
}

.game-users-list {
    height: 460px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
}

.game-user-line {
    height: 20px;

    box-sizing: border-box;

    padding: 2px 4px;

    color: #dedfde;
    font-size: 11px;

    cursor: pointer;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-user-line:hover {
    background: rgba(255,255,255,.06);
}

.game-controls-layer {
    pointer-events: none;
}

.game-controls-layer button,
.game-message-input,
.game-send-button,
.game-player-action,
.game-player-name,
.game-user-line,
.game-recipient {
    pointer-events: auto;
}

/* ============================================================
   XMAFIA R3.1 — ORIGINAL NEW GAME / MAFIAGAMELIST

   Behaviour source:
     NewGamePanel.as
     MafiaGameList.as
     MafiaGameListItem.as

   This layer contains NO Mafia game rules.
   ============================================================ */


/* ------------------------------------------------------------
   MafiaGameList
   Original mask:
      width  = 545
      height = 220
   ------------------------------------------------------------ */

.main-games-holder {
    position: absolute;

    /*
     * R3.27 — restore MainTemplate.mafiaGamesHolder geometry.
     *
     * Historical MainTemplate / symbol200:
     *
     *     x = 9.6
     *     y = 81
     *
     * The previous R3.1 browser-list styling accidentally moved
     * the holder to y=53, causing MafiaGameList contents to occupy
     * the counters row at y=62.
     *
     * Scrolling belongs INSIDE the historical holder; it must not
     * change the holder's original stage coordinates.
     */
    left: 9.6px;
    top: 81px;

    width: 545px;
    height: 222px;

    z-index: 35;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
}

.original-game-list {
    position: relative;

    width: 524px;
    min-height: 220px;
}

.original-no-games {
    position: absolute;

    left: 160px;
    top: 60px;

    color: rgba(232, 223, 204, .72);

    font-size: 12px;
}


/* ------------------------------------------------------------
   MafiaGameListItem / symbol650
   ------------------------------------------------------------ */

.original-game-ticket {
    position: relative;

    box-sizing: border-box;

    width: 520px;

    margin: 0 0 10px;
    padding: 9px 43px 9px 11px;

    border: 1px solid rgba(145, 116, 80, .25);
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(70, 53, 38, .67),
            rgba(37, 29, 24, .73)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.04);

    color: #ddd2bf;

    font-family: Arial, sans-serif;
    font-size: 11px;
}

.original-game-ticket.is-mine {
    border-color: rgba(220, 173, 89, .48);
}

.original-ticket-title {
    min-height: 17px;

    color: #f4e3c0;

    font-size: 12px;
    font-weight: bold;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.original-ticket-info {
    display: flex;

    gap: 11px;

    margin-top: 3px;

    color: #aaa096;
}

.original-ticket-status {
    color: #dedfde;
}

.original-ticket-users {
    display: flex;
    flex-wrap: wrap;

    gap: 3px 8px;

    margin-top: 7px;
}

.original-ticket-user {
    color: #c8bba9;

    white-space: nowrap;
}

.original-ticket-user.is-owner {
    color: #e6e12d;
}

.original-ticket-operation {
    position: absolute;

    right: 8px;
    top: 11px;

    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(203,159,83,.38);
    border-radius: 50%;

    background: rgba(56,42,31,.92);

    color: #f7dca8;

    font-size: 18px;
    line-height: 25px;

    cursor: pointer;
}

.original-ticket-operation:hover {
    filter: brightness(1.25);
}

.original-ticket-operation:disabled {
    opacity: .25;
    cursor: default;
}


/* ------------------------------------------------------------
   MainModalLayer / NewGamePanel
   ------------------------------------------------------------ */

#mainModalLayer {
    position: absolute;

    inset: 0;

    z-index: 1000;

    pointer-events: auto;
}

#mainModalLayer.is-hidden {
    display: none;
}

.original-modal-shade {
    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.48);
}

.original-new-game-panel {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 330px;

    transform: translate(-50%, -50%);

    box-sizing: border-box;

    padding: 14px 17px 15px;

    border: 1px solid rgba(202,166,105,.48);
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #564332 0%,
            #30251e 100%
        );

    box-shadow:
        0 10px 35px rgba(0,0,0,.55),
        inset 0 1px rgba(255,255,255,.09);

    color: #dedfde;

    font-family: Arial, sans-serif;
}

.original-new-game-heading {
    margin-bottom: 12px;

    color: #f4e3c0;

    text-align: center;

    font-size: 13px;
    font-weight: bold;
}

.original-new-game-title {
    width: 100%;
    height: 23px;

    box-sizing: border-box;

    padding: 2px 5px;

    border: 1px solid rgba(89,69,52,.8);
    outline: 0;

    background: #eee0c7;

    color: #4b3a2c;

    font-family: Arial, sans-serif;
    font-size: 11px;
}

.original-new-game-row {
    display: grid;

    grid-template-columns: 127px 1fr;

    align-items: center;

    min-height: 33px;

    border-bottom: 1px solid rgba(255,255,255,.035);
}

.original-new-game-label {
    color: #cfc4b4;

    font-size: 11px;
}

.original-spinner {
    display: grid;

    grid-template-columns: 25px 1fr 25px;

    align-items: center;

    height: 24px;
}

.original-spinner button {
    height: 22px;

    padding: 0;

    border: 1px solid rgba(164,127,76,.4);

    background: rgba(50,37,28,.9);

    color: #f4d49c;

    cursor: pointer;
}

.original-spinner button:disabled {
    opacity: .22;
    cursor: default;
}

.original-spinner-value {
    text-align: center;

    color: #fff2d8;

    font-size: 11px;
}

.original-new-game-buttons {
    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 14px;
}

.original-new-game-buttons button {
    min-width: 92px;
    height: 25px;

    border: 1px solid rgba(182,143,83,.5);
    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            rgba(104,75,43,.95),
            rgba(68,49,31,.95)
        );

    color: #f8e5be;

    cursor: pointer;
}

.original-new-game-buttons button:hover {
    filter: brightness(1.15);
}

/* ============================================================
   XMAFIA R3.2 — ORIGINAL GAMEVIEW ARTWORK
   ============================================================ */

.game-view {
    background: #211914;
}

.game-main-art {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.game-main-bottom {
    left: 0;
    top: 0;

    width: 760px;
    height: 600px;

    z-index: 1;
}

.game-main-delimiter {
    left: 0;
    top: 0;

    z-index: 2;
}

.game-main-top-fullscreen,
.game-main-bottom-fullscreen {
    display: none;
}

.game-state-holder {
    z-index: 20;
}

.game-players-holder,
.game-roles-holder {
    z-index: 25;
}

.game-chat-holder {
    z-index: 30;
}

.game-users-holder {
    z-index: 40;
}


/* Exact PlayerInGameMC / symbol596 */

.game-player-row {
    height: 47px;

    border: 0;

    background-image:
        url('/rebuild/assets/game/player-in-game.png');

    background-repeat:
        no-repeat;

    background-position:
        left top;

    background-size:
        auto 47px;

    box-sizing:
        border-box;
}

.game-player-row.is-me {
    background-image:
        url('/rebuild/assets/game/player-in-game.png');
}

.game-player-row.is-out {
    opacity: .52;
}

.game-player-icon {
    background:
        rgba(19,14,11,.34);

    border:
        1px solid rgba(255,255,255,.07);
}

.game-player-name {
    border: 0;

    background:
        transparent;

    text-align:
        left;

    font-family:
        Arial, sans-serif;
}


/*
 * Until the exact MafiaStateContainer child art
 * is installed, expose MainTemplate beneath it.
 */

.original-game-state {
    border-color:
        rgba(181,143,87,.18);

    background:
        rgba(34,25,19,.36);

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.035);
}

.game-chat-messages {
    background:
        rgba(20,15,12,.08);
}

.game-users-holder {
    background:
        transparent;
}

/* ============================================================
   XMAFIA R3.3 — ORIGINAL PLAYER ROLES & STATES
   ============================================================ */

.game-player-row {
    position: absolute;

    min-height: 47px;

    overflow: hidden;
}


/*
 * PlayerIconSmallMC / symbol351.
 *
 * Every original exported frame is exactly 42x42.
 */

.game-player-icon {
    position: absolute;

    left: 3px;
    top: 2px;

    width: 42px;
    height: 42px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 0;

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 42px 42px;

    box-shadow: none;

    font-size: 0;

    overflow: hidden;
}


/*
 * Original MafiaGamePlayer fades role/name after a final state.
 *
 * playerFinalStatus artwork is restored below from the exact
 * historical DefineSprite_581 frame mapping.
 */

.game-player-row.is-dead .game-player-icon,
.game-player-row.is-prison .game-player-icon,
.game-player-row.is-timeout .game-player-icon {
    opacity: .2;
}

.game-player-row.is-dead .game-player-name,
.game-player-row.is-prison .game-player-name,
.game-player-row.is-timeout .game-player-name {
    opacity: .3;
}


/*
 * Historical compatibility block retained for cascade safety.
 * Its pseudo-element labels are disabled by the exact
 * DefineSprite_581 restoration below.
 */

.game-player-row::after {
    position: absolute;

    right: 5px;
    bottom: 1px;

    z-index: 8;

    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 10px;

    color: rgba(226, 211, 187, .55);

    pointer-events: none;
}

.game-player-row.is-dead::after {
    content: "убит";
}

.game-player-row.is-prison::after {
    content: "в тюрьме";
}

.game-player-row.is-timeout::after {
    content: "вышел";
}


/*
 * R3.2 used one global row opacity.
 * Original MafiaGamePlayer actually fades icon/name separately.
 */

.game-player-row.is-out,
.game-player-row.is-dead,
.game-player-row.is-prison,
.game-player-row.is-timeout {
    opacity: 1;
}

/* ============================================================
   XMAFIA R3.4 — ORIGINAL GAMEVIEW GEOMETRY

   Historical coordinate basis:
       MainTemplateMC: 760 x 600
       MafiaGamePlayersContainer: x=252, y=-19 inside mafiaGamesHolder
       TextRolesInGameMC: x=8, y=280
       Chat mask: ~550 x 225
   ============================================================ */


/* ------------------------------------------------------------
   Entire active game is one fixed historical Flash stage.
   ------------------------------------------------------------ */

#gameView {
    position: relative;

    width: 760px;
    height: 600px;

    min-width: 760px;
    min-height: 600px;

    max-width: 760px;
    max-height: 600px;

    overflow: hidden;

    box-sizing: border-box;
}


/* Artwork must fill the same 760x600 stage. */

.game-artwork-layer {
    position: absolute;

    left: 0;
    top: 0;

    width: 760px;
    height: 600px;

    overflow: hidden;

    z-index: 1;

    pointer-events: none;
}

.game-main-bottom {
    position: absolute;

    left: 0;
    top: 0;

    width: 760px;
    height: 600px;

    object-fit: fill;
}


/* ------------------------------------------------------------
   MafiaStateContainer
   Original lives in the upper-left game area.
   Historical oversized reconstruction removed.
   ------------------------------------------------------------ */

.game-state-holder {
    position: absolute;

    left: 8px;
    top: 8px;

    width: 230px;
    height: 245px;

    z-index: 30;

    overflow: visible;

    pointer-events: none;
}

.original-game-state {
    position: relative;

    width: 230px;
    height: 245px;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    overflow: visible;
}

.game-state-title {
    position: absolute;

    left: 8px;
    top: 46px;

    width: 150px;

    min-height: 14px;

    color: #dedfde;

    font-size: 11px;
    line-height: 14px;

    white-space: nowrap;
}

.game-state-move {
    position: absolute;

    left: 8px;
    top: 62px;

    width: 160px;

    margin: 0;

    color: #ff9933;

    font-size: 12px;
    line-height: 14px;
}

.game-move-question {
    position: absolute;

    left: 8px;
    top: 86px;

    width: 170px;

    min-height: 30px;

    margin: 0;

    color: #dedfde;

    font-size: 11px;
    line-height: 14px;
}

.game-timer {
    position: absolute;

    left: 172px;
    top: 46px;

    right: auto;

    width: 50px;

    text-align: right;

    color: #dedfde;

    font-size: 11px;
    line-height: 14px;
}


/* main user's role block */

.game-my-role-block {
    position: absolute;

    left: 8px;
    top: 130px;
    bottom: auto;

    width: 210px;
    height: 72px;
}

.game-my-role-icon {
    position: absolute;

    left: 0;
    top: 0;

    width: 42px;
    height: 42px;

    display: block;

    border: 0;
    border-radius: 0;

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 42px 42px;

    font-size: 0;
}

.game-my-name {
    position: absolute;

    left: 49px;
    top: 3px;

    width: 150px;

    color: #dedfde;
    font-size: 11px;
}

.game-my-role {
    position: absolute;

    left: 49px;
    top: 21px;

    width: 150px;

    color: #ff9933;
    font-size: 11px;
}

.game-close-button {
    position: absolute;

    left: 120px;
    top: 210px;

    right: auto;
    bottom: auto;
}


/* ------------------------------------------------------------
   MafiaGamePlayersContainer

   Actual AS3:
       x = 260 - 8 = 252
       y = 36 - 55 = -19

   mafiaGamesHolder itself sits in the upper game area, so our
   HTML equivalent starts close to the top of MainTemplate.
   ------------------------------------------------------------ */

.game-players-holder {
    position: absolute;

    left: 252px;
    top: 18px;

    width: 285px;
    height: 255px;

    z-index: 40;

    overflow: visible;
}

.game-players-viewport {
    position: absolute;

    left: 0;
    top: 0;

    width: 285px;
    height: 255px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
}

.game-players-viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.game-players-list {
    position: relative;

    left: 0;
    top: 0;

    width: 253px;

    min-height: 54px;
}


/* Exact exported PlayerInGameMC is 253x54. */

.game-player-row {
    position: absolute;

    left: 0;

    width: 253px;
    height: 54px;

    min-height: 54px;

    overflow: hidden;

    background-image:
        url('/rebuild/assets/game/player-in-game.png');

    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 253px 54px;

    border: 0;

    box-sizing: border-box;
}


/*
 * Historical container advances 47 px, so rows overlap slightly
 * exactly as Flash did.
 */

.game-player-icon {
    position: absolute;

    left: 3px;
    top: 5px;

    width: 42px;
    height: 42px;

    z-index: 3;
}

.game-player-name {
    position: absolute;

    left: 50px;
    top: 8px;

    width: 112px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #dedfde;

    text-align: left;

    font-size: 11px;
    line-height: 13px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-player-target {
    position: absolute;

    left: 50px;
    top: 27px;

    width: 125px;

    color: #a7a29c;

    font-size: 10px;
    line-height: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-player-votes {
    position: absolute;

    right: 47px;
    top: 8px;

    width: 28px;

    color: #00ff00;

    text-align: center;

    font-size: 10px;
}

.game-player-action {
    position: absolute;

    right: 4px;
    top: 9px;

    width: 38px;
    height: 27px;

    min-width: 38px;

    padding: 0;

    font-size: 9px;
}


/* ------------------------------------------------------------
   TextRolesInGameMC
   Exact AS3: x=8 / y=280
   ------------------------------------------------------------ */

.game-roles-holder {
    position: absolute;

    left: 8px;
    top: 280px;

    width: 235px;
    height: 18px;

    z-index: 45;
}

.game-roles-text {
    color: rgba(222,223,222,.65);

    font-size: 11px;
    line-height: 14px;
}


/* ------------------------------------------------------------
   ChatMessageContainer

   Original mask:
       y = 325
       width = 550
       height = 225
   ------------------------------------------------------------ */

.game-chat-holder {
    position: absolute;

    left: 0;
    top: 300px;

    width: 550px;
    height: 300px;

    z-index: 35;
}

.game-chat-messages {
    position: absolute;

    left: 0;
    top: 25px;

    width: 550px;
    height: 225px;

    padding: 5px 8px;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    background: transparent;

    color: #dedfde;

    font-size: 11px;
    line-height: 15px;
}


/*
 * Original inputMessage is at bottom of MainTemplate.
 */

.game-message-input {
    position: absolute;

    left: 34px;
    bottom: 8px;

    width: 500px;
    height: 18px;

    box-sizing: border-box;
}

.game-send-button {
    position: absolute;

    right: 4px;
    bottom: 8px;

    width: 28px;
    height: 18px;
}

.game-recipient {
    position: absolute;

    left: 34px;
    bottom: 28px;
}


/* ------------------------------------------------------------
   Game OnlineUserPanel — original right column.
   ------------------------------------------------------------ */

.game-users-holder {
    position: absolute;

    left: 550px;
    top: 38px;

    width: 210px;
    height: 515px;

    z-index: 50;

    overflow: hidden;

    background: transparent;
}

.game-users-title {
    width: 100%;
    height: 20px;

    color: #f0eadf;

    text-align: center;

    font-size: 10px;
    line-height: 18px;
}

.game-users-list {
    width: 100%;
    height: 485px;

    overflow-y: auto;
    overflow-x: hidden;
}


/* ------------------------------------------------------------
   Historical oversized R3.0 reconstruction removed.
   ------------------------------------------------------------ */

.game-state-holder,
.game-players-holder,
.game-chat-holder,
.game-users-holder,
.game-roles-holder {
    box-sizing: border-box;
}


/*
 * Make debugging obvious if players exist:
 * no display:none / visibility traps are allowed.
 */

.game-players-holder,
.game-players-viewport,
.game-players-list {
    display: block !important;
    visibility: visible !important;
}


/* Main artwork must never cover controls/content. */

.game-artwork-layer {
    pointer-events: none;
}

.game-state-holder,
.game-players-holder,
.game-chat-holder,
.game-users-holder,
.game-roles-holder {
    pointer-events: auto;
}

/* ============================================================
   XMAFIA R3.6 — SEMANTIC PlayerInGameMC

   This section intentionally styles semantic components only.

   Historical game behavior lives in JavaScript.
   Exact SWF artwork may later replace this theme without changing
   the DOM/state contract established here.
   ============================================================ */


/* ------------------------------------------------------------
   votesCount / votesTxt / blackBox
   ------------------------------------------------------------ */

.game-player-votes {
    position: absolute;

    right: 43px;
    top: 4px;

    width: 55px;
    height: 30px;

    z-index: 10;

    display: none;

    pointer-events: none;
}

.game-player-votes.has-votes {
    display: block;
}

.game-player-vote-blackbox {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.58);

    border-radius: 2px;
}

.game-player-votes-count,
.game-player-votes-text {
    position: relative;

    z-index: 2;

    color: #00ff00;

    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 11px;

    pointer-events: none;
}

.game-player-votes-count {
    display: block;

    padding-top: 3px;

    text-align: center;

    font-weight: bold;
}

.game-player-votes-text {
    display: block;

    text-align: center;
}


/* ------------------------------------------------------------
   playerFinalStatus

   Semantic DOM node corresponding to the historical
   PlayerInGameMC.playerFinalStatus MovieClip.

   Exact DefineSprite_581 artwork and frame mapping are applied
   later in this stylesheet.
   ------------------------------------------------------------ */

.game-player-final-status {
    position: absolute;

    left: 0;
    top: 0;

    width: 253px;
    height: 54px;

    z-index: 7;

    pointer-events: none;
}

.game-player-final-status[data-status="live"] {
    display: none;
}

.game-player-final-status[data-status="dead"]::after,
.game-player-final-status[data-status="prison"]::after,
.game-player-final-status[data-status="timeout"]::after {
    position: absolute;

    right: 5px;
    bottom: 3px;

    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 10px;

    color: rgba(222,223,222,.62);
}

.game-player-final-status[data-status="dead"]::after {
    content: "убит";
}

.game-player-final-status[data-status="prison"]::after {
    content: "в тюрьме";
}

.game-player-final-status[data-status="timeout"]::after {
    content: "вышел";
}


/*
 * Original MafiaGamePlayer:
 *
 *   playerIcon.alpha = 0.2
 *   playerName.alpha = 0.3
 */

.game-player-row[data-final-status="dead"] .game-player-icon,
.game-player-row[data-final-status="prison"] .game-player-icon,
.game-player-row[data-final-status="timeout"] .game-player-icon {
    opacity: .2;
}

.game-player-row[data-final-status="dead"] .game-player-name,
.game-player-row[data-final-status="prison"] .game-player-name,
.game-player-row[data-final-status="timeout"] .game-player-name {
    opacity: .3;
}


/*
 * Earlier reconstructed ::after status label disabled.
 * playerFinalStatus now owns this responsibility explicitly.
 */

.game-player-row.is-dead::after,
.game-player-row.is-prison::after,
.game-player-row.is-timeout::after {
    content: none !important;
}


/* ------------------------------------------------------------
   action MovieClip semantic equivalent
   ------------------------------------------------------------ */

.game-player-action[data-action="noAction"] {
    visibility: hidden;
    pointer-events: none;
}

.game-player-action:not([data-action="noAction"]) {
    visibility: visible;
}


/*
 * Current text is only a compatibility presentation.
 * Exact action MovieClip frames will replace this visual layer
 * without altering data-action or click behavior.
 */

.game-player-action {
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 11px;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   Player name behavior
   ------------------------------------------------------------ */

.game-player-name {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/*
 * The current user is not clickable in historical MafiaGamePlayer.
 * Keep appearance intact rather than using browser's default
 * disabled-button styling.
 */

.game-player-row.is-me .game-player-name {
    opacity: 1;

    cursor: default;
}

/* ============================================================
   XMAFIA R3.9 — ORIGINAL SWF PlayerInGameMC ACTION ART

   Source:
     DefineSprite_595

   Exact original timeline:
     1 citizen
     2 mafia
     3 maniac
     4 commissioner
     5 doctor
     6 noAction

   JS continues to own action availability and protocol behavior.
   This CSS is presentation only.
   ============================================================ */

.game-player-action {
    width: 32px;
    height: 32px;

    padding: 0;
    margin: 0;

    border: 0;
    outline: 0;

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;

    font-size: 0;
    line-height: 0;

    color: transparent;

    cursor: pointer;

    image-rendering: auto;
}

.game-player-action[data-action="citizen"] {
    background-image:
        url("/rebuild/assets/game/ui/action/citizen.png");
}

.game-player-action[data-action="mafia"] {
    background-image:
        url("/rebuild/assets/game/ui/action/mafia.png");
}

.game-player-action[data-action="maniac"] {
    background-image:
        url("/rebuild/assets/game/ui/action/maniac.png");
}

.game-player-action[data-action="commissioner"] {
    background-image:
        url("/rebuild/assets/game/ui/action/commissioner.png");
}

.game-player-action[data-action="doctor"] {
    background-image:
        url("/rebuild/assets/game/ui/action/doctor.png");
}

.game-player-action[data-action="noAction"] {
    background-image:
        url("/rebuild/assets/game/ui/action/noAction.png");

    visibility: hidden;
    pointer-events: none;
}

.game-player-action:disabled {
    cursor: default;
}


/* ============================================================
   XMAFIA R3.9 — ORIGINAL SWF playerFinalStatus ART

   Source:
     DefineSprite_581

   Exact labels:
     timeout -> frame 1
     prison  -> frame 2
     dead    -> frame 3
     live    -> frame 4

   Note:
   timeout and dead use byte-identical original raster artwork.
   ============================================================ */

.game-player-final-status {
    width: 25px;
    height: 20px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 20px;
}

.game-player-final-status[data-status="live"] {
    display: block;

    background-image:
        url("/rebuild/assets/game/ui/status/live.png");
}

.game-player-final-status[data-status="dead"] {
    background-image:
        url("/rebuild/assets/game/ui/status/dead.png");
}

.game-player-final-status[data-status="prison"] {
    background-image:
        url("/rebuild/assets/game/ui/status/prison.png");
}

.game-player-final-status[data-status="timeout"] {
    background-image:
        url("/rebuild/assets/game/ui/status/timeout.png");
}


/*
 * Earlier reconstructed text status overlays disabled.
 * R3.9 now uses exact original SWF pixels.
 */

.game-player-final-status[data-status="dead"]::after,
.game-player-final-status[data-status="prison"]::after,
.game-player-final-status[data-status="timeout"]::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   XMAFIA R3.9.1 — REMOVE BAKED PlayerInGameMC SNAPSHOT

   Historical PlayerInGameMC / symbol596 is a container composed
   from independent children:

       playerIcon
       blackBox
       playerName
       targetPlayerName
       playerFinalStatus
       votesCount
       votesTxt
       action
       iconBtn
       userNameBtn

   player-in-game.png is a flattened forensic rendering of that
   complete container. It must NOT be used behind the live DOM,
   otherwise original children are rendered twice.

   Keep historical geometry (253x54 / 47px row advance), but let
   the semantic live children own all visible player UI.
   ============================================================ */

.game-player-row,
.game-player-row.is-me {
    background-image: none;
    background-color: transparent;
}

/* ============================================================
   XMAFIA R3.10 — EXACT PlayerInGameMC / DefineSprite_596

   Authoritative source:
     reference-client.xml
     DefineSprite_596

   Flash uses 20 twips = 1 CSS pixel.

   This layer controls GEOMETRY ONLY.
   It does not determine roles, visibility, moves or game rules.

   Original placements:

     playerFinalStatus   10.00,   6.00
     playerIcon          47.00,   0.00
     blackBox            48.00,   1.00
     votesCount          49.00,  -3.40
     votesTxt            45.00,  27.05
     playerName          95.00,   4.00
     targetPlayerName    95.00,  19.35
     action             234.00,   3.00

   Historical player row advance remains 47px.
   ============================================================ */


/* ------------------------------------------------------------
   PlayerInGameMC root
   ------------------------------------------------------------ */

.game-player-row {
    position: absolute;

    width: 253px;
    height: 54px;

    overflow: visible;

    background-image: none;
    background-color: transparent;
}


/* ------------------------------------------------------------
   playerIcon
   DefineSprite_572
   x=940 twips / y=0
   ------------------------------------------------------------ */

.game-player-icon {
    position: absolute;

    left: 47px;
    top: 0;

    width: 42px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    z-index: 1;

    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 42px 42px;

    box-shadow: none;
}


/* ------------------------------------------------------------
   playerName
   DefineEditText_573
   x=1900 / y=80
   ------------------------------------------------------------ */

.game-player-name {
    position: absolute;

    left: 95px;
    top: 4px;

    width: 170px;
    height: 17px;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    z-index: 5;

    color: #fffce6;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 15px;

    text-align: left;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   targetPlayerName
   DefineEditText_574
   x=1900 / y=387 = 19.35px
   ------------------------------------------------------------ */

.game-player-target {
    position: absolute;

    left: 95px;
    top: 19.35px;

    width: 168px;
    height: 17px;

    margin: 0;
    padding: 0;

    z-index: 6;

    color: #9f9f9f;

    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 14px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   playerFinalStatus
   DefineSprite_581
   x=200 / y=120
   ------------------------------------------------------------ */

.game-player-final-status {
    position: absolute;

    left: 10px;
    top: 6px;

    width: 25px;
    height: 20px;

    z-index: 7;

    margin: 0;
    padding: 0;

    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 25px 20px;

    pointer-events: none;
}

.game-player-final-status[data-status="live"] {
    display: block;
}


/* ------------------------------------------------------------
   votes composite

   The HTML implementation owns one semantic votes container.
   Its children reproduce the three independent Flash instances.

   votesTxt:
      x=45 / y=27.05

   blackBox:
      x=48 / y=1

   votesCount:
      x=49 / y=-3.40
   ------------------------------------------------------------ */

.game-player-votes {
    position: absolute;

    left: 45px;
    top: -4px;

    width: 55px;
    height: 52px;

    z-index: 9;

    margin: 0;
    padding: 0;

    pointer-events: none;
}

.game-player-vote-blackbox {
    position: absolute;

    /* global x = 45 + 3 = 48 */
    left: 3px;

    /* global y = -4 + 5 = 1 */
    top: 5px;
}

.game-player-votes-count {
    position: absolute;

    /* global x = 45 + 4 = 49 */
    left: 4px;

    /*
     * XML y = -3.40.
     * CSS container top=-4, child top=.6.
     */
    top: .6px;

    margin: 0;
    padding: 0;

    color: #00ff00;

    line-height: 13px;
    text-align: center;
}

.game-player-votes-text {
    position: absolute;

    /* global x = 45 */
    left: 0;

    /*
     * XML y = 27.05.
     * 27.05 - (-4) = 31.05.
     */
    top: 31.05px;

    margin: 0;
    padding: 0;

    color: #00ff00;

    white-space: nowrap;

    line-height: 12px;
}


/* ------------------------------------------------------------
   action
   DefineSprite_595
   x=4680 / y=60
   ------------------------------------------------------------ */

.game-player-action {
    position: absolute;

    left: 234px;
    top: 3px;

    right: auto;

    width: 32px;
    min-width: 32px;
    height: 32px;

    margin: 0;
    padding: 0;

    z-index: 11;

    border: 0;
    border-radius: 0;
    outline: 0;

    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 32px 32px;

    box-shadow: none;

    font-size: 0;
    line-height: 0;

    color: transparent;

    cursor: pointer;
}


/*
 * In original Flash noAction removes the action display object
 * from the visible timeline.
 */
.game-player-action[data-action="noAction"] {
    visibility: hidden;
    pointer-events: none;
}


/* ------------------------------------------------------------
   Current-user row

   Do not move components for .is-me.
   Flash uses the same PlayerInGameMC geometry.
   ------------------------------------------------------------ */

.game-player-row.is-me .game-player-icon {
    left: 47px;
    top: 0;
}

.game-player-row.is-me .game-player-name {
    left: 95px;
    top: 4px;
}

/* ============================================================
   XMAFIA R3.13 — EXACT MafiaGamePlayer.setKilled() ALPHA

   MafiaGamePlayer.as:

       playerIcon.alpha = 0.2
       playerName.alpha = 0.3

   This applies to every eliminated player, including main user.
   Earlier .is-me styling must not override historical alpha.
   ============================================================ */

.game-player-row.is-me[data-live-status="dead"] .game-player-icon,
.game-player-row.is-me[data-live-status="prison"] .game-player-icon,
.game-player-row.is-me[data-live-status="timeout"] .game-player-icon {
    opacity: .2;
}

.game-player-row.is-me[data-live-status="dead"] .game-player-name,
.game-player-row.is-me[data-live-status="prison"] .game-player-name,
.game-player-row.is-me[data-live-status="timeout"] .game-player-name {
    opacity: .3;
}


/*
 * Historical MafiaGamePlayer::clearActionBtn() removes action
 * availability for any non-live player.
 *
 * JS already derives noAction from liveStatus. This CSS makes
 * that presentation boundary explicit as well.
 */

.game-player-row:not([data-live-status="live"])
.game-player-action {
    visibility: hidden;
    pointer-events: none;
}


/* ============================================================
   XMAFIA R3.28 — ORIGINAL MafiaGameListItem / symbol650

   Historical contract:

       gameUsersContainer.x = 13
       gameUsersContainer.y = 20

       users:
           x = 0, 170, 340
           y step = 17

       gameItemBox.height  = rowY + 25
       gameItemBack.height = rowY + 45

       MafiaGameList:
           ticket gap = 10

   Game/socket semantics remain in app.js.
   This layer is presentation only.
   ============================================================ */


.original-game-ticket {
    position: relative;

    width: 520px;
    min-height: 45px;

    margin: 0 0 10px;
    padding: 0;

    box-sizing: border-box;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    background:
        url("/rebuild/assets/game/lobby/mafia-game-list-item.png")
        left top / 520px auto
        no-repeat;

    color: #ddd2bf;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    overflow: hidden;
}


/*
 * No artificial "my card" frame existed in MafiaGameListItem.
 */
.original-game-ticket.is-mine {
    border: 0;
    box-shadow: none;
}


/*
 * gameTitle / symbol650 text field
 */
.original-ticket-title {
    position: absolute;

    left: 11px;
    top: 3px;

    width: 205px;
    min-height: 13px;

    margin: 0;

    overflow: hidden;

    color: #d2c8b7;

    font-size: 10px;
    line-height: 13px;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/*
 * Browser wrapper only.
 * Children are positioned like Flash TextFields.
 */
.original-ticket-info {
    position: static;

    display: block;

    margin: 0;

    color: inherit;
}


.original-ticket-status {
    position: absolute;

    left: 225px;
    top: 4px;

    width: 100px;

    color: #80786c;

    font-size: 9px;
    line-height: 13px;

    white-space: nowrap;
}


.original-ticket-info > span:not(
    .original-ticket-status
):not(
    .original-ticket-time
) {
    position: absolute;

    left: 325px;
    top: 4px;

    width: 78px;

    color: #80786c;

    font-size: 9px;
    line-height: 13px;

    white-space: nowrap;
}


.original-ticket-info > span[hidden] {
    display: none !important;
}


.original-ticket-time {
    position: absolute;

    left: 402px;
    top: 4px;

    width: 45px;

    color: #918877;

    font-size: 9px;
    line-height: 13px;

    text-align: center;

    white-space: nowrap;
}


.original-ticket-time.is-ending {
    color: #aa0000;
}


/*
 * gameUsersContainer:
 * x=13, y=20
 *
 * CSS grid gives exact historical positions:
 *
 * 0
 * 170
 * 340
 */
.original-ticket-users {
    position: relative;

    left: 13px;
    top: 20px;

    width: 505px;

    margin: 0;
    padding: 0;

    display: grid;

    grid-template-columns:
        165px
        165px
        165px;

    grid-auto-rows: 17px;

    column-gap: 5px;
    row-gap: 0;

    align-items: start;

    pointer-events: none;
}


/*
 * UserInfo(gameTicket) is 165 × 17 in this reconstruction.
 */
.original-ticket-user {
    position: relative;

    width: 165px;
    height: 17px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: #fff099;

    font-size: 9px;
    line-height: 17px;

    white-space: nowrap;

    pointer-events: auto;

    background:
        transparent;

    border: 0;
}


.original-ticket-user.is-owner {
    color: #fff099;
}


/*
 * Dynamic ticket height:
 *
 * One row = 45px.
 * Every additional row adds 17px.
 *
 * CSS :has() lets the browser reproduce
 * MafiaGameListItem.refreshUsers() without JS geometry code.
 */
.original-game-ticket:has(
    .original-ticket-user:nth-child(4)
) {
    min-height: 62px;
}


.original-game-ticket:has(
    .original-ticket-user:nth-child(7)
) {
    min-height: 79px;
}


.original-game-ticket:has(
    .original-ticket-user:nth-child(10)
) {
    min-height: 96px;
}


.original-game-ticket:has(
    .original-ticket-user:nth-child(13)
) {
    min-height: 113px;
}


/*
 * btnGameOperation.
 *
 * Original Flash uses ONE control:
 *
 * owner  -> Удалить игру + X
 * member -> Выйти из игры + -
 * other  -> Войти в игру + +
 */
.original-ticket-operation {
    position: absolute;

    right: 7px;
    top: 2px;

    width: 119px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 4px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    outline: 0;

    background: transparent;

    box-shadow: none;

    color: #b99b60;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;
    line-height: 17px;

    cursor: pointer;
}


.original-ticket-operation::before {
    content: attr(title);

    color: #8c8375;

    font-size: 8px;
    line-height: 17px;

    white-space: nowrap;
}


.original-ticket-operation:hover {
    filter: brightness(1.35);
}


.original-ticket-operation:disabled {
    opacity: .25;
    cursor: default;
}


/*
 * Earlier reconstructed card decoration removed.
 */
.original-game-ticket,
.original-game-ticket:hover,
.original-game-ticket:focus {
    transform: none;
}


/*
 * Historical MafiaGameList mask width.
 */
.original-game-list {
    width: 524px;
    min-height: 220px;
}

/* ============================================================
   XMAFIA R3.29 — ORIGINAL INTERACTION RESTORATION

   symbol650 already contains the historical ticket artwork.
   Do not create an additional browser-only operation caption
   from the HTML title attribute over that artwork.
   ============================================================ */

.original-ticket-operation::before {
    content: none !important;
    display: none !important;
}

.main-chat-holder,
.original-chat-viewport {
    pointer-events: auto;
}

.original-chat-viewport {
    touch-action: pan-y;
    overscroll-behavior: contain;
}


/* ============================================================
   XMAFIA R3.30 — ChatMessageMC.messageText restoration

   Original Flash architecture:

       ChatMessageContainer
           -> ChatMessageMC
               -> messageText : TextField
               -> smileHolder : MovieClip

   The browser therefore keeps ONE accumulated text-field layer.
   It does not create vertically-positioned cards/rows.

   Main and MafiaGame smile systems are restored.
   ============================================================ */


.original-chat-viewport {
    position: relative;

    width: 100%;
    height: 230px;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 0 5px 0 0;

    box-sizing: border-box;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 14px;

    pointer-events: auto;

    touch-action: pan-y;
    overscroll-behavior: contain;
}


.original-chat-textfield {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    min-height: 0;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    color: #cccccc;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 14px;
}


/*
 * Legacy row object is now only a temporary formatter.
 * It is unpacked into messageText immediately and never mounted
 * as a block-level chat row.
 */
.original-chat-message {
    display: inline;

    min-height: 0;

    margin: 0;
    padding: 0;
}


.original-chat-time,
.original-chat-text {
    display: inline;
}


.original-chat-author {
    display: inline;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    font: inherit;
    line-height: inherit;

    cursor: pointer;

    vertical-align: baseline;
}


/* ============================================================
   XMAFIA R3.30.1 — exact TEXTFORMAT/P accumulation model

   Flash SmileReplacer appends complete TEXTFORMAT/P blocks to
   chatMessageContainerMC.messageText.

   Each browser .original-chat-message therefore represents one
   complete formatted message paragraph.
   ============================================================ */

.original-chat-textfield {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
}


.original-chat-textfield > .original-chat-message,
.original-chat-textformat {
    display: block !important;

    width: 100%;

    min-height: 14px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    line-height: 14px;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/*
 * Children remain inline INSIDE one historical message paragraph.
 */
.original-chat-textformat > .original-chat-time,
.original-chat-textformat > .original-chat-author,
.original-chat-textformat > .original-chat-text {
    display: inline;
}


/* ============================================================
   XMAFIA R3.31 — original chatScrollerHolder

   MainTemplate normal-mode contract:
       Scroller(0, -2, 232)

   Historical behavior follows Scroller.as.

   R4 FINAL:
   visible artwork below is replaced by exact SliderMC / symbol40
   pixels extracted from the authoritative SWF.
   ============================================================ */


.original-chat-scroller-holder {
    position: absolute;

    left: 543px;
    top: 324.9px;

    width: 12px;
    height: 232px;

    z-index: 60;

    display: none;

    pointer-events: auto;
}


.original-chat-scroller-holder.is-active {
    display: grid;

    grid-template-rows:
        13px
        1fr
        13px;
}


.original-chat-scroller-up,
.original-chat-scroller-down {
    width: 12px;
    height: 13px;

    margin: 0;
    padding: 0;

    border: 0;

    background:
        rgba(35, 28, 23, .92);

    color:
        #b69b69;

    font-size: 7px;
    line-height: 13px;

    cursor: pointer;
}


.original-chat-scroller-track {
    position: relative;

    width: 12px;

    background:
        rgba(20, 16, 14, .55);

    cursor: pointer;
}


.original-chat-scroller-thumb {
    position: absolute;

    left: 1px;
    top: 0;

    width: 10px;
    height: 28px;

    background:
        linear-gradient(
            90deg,
            #5b4934,
            #9a7a4e,
            #4b3b2c
        );

    cursor: grab;

    touch-action: none;
}


.original-chat-scroller-thumb:active {
    cursor: grabbing;
}


/*
 * Original UI owns the visible scrollbar.
 * Browser scrollbar remains only as an implementation primitive.
 */
.original-chat-viewport {
    scrollbar-width: none;
}


.original-chat-viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* ============================================================
   XMAFIA R3.36 — MafiaGameListItemMC / symbol650

   AUTHORITATIVE SOURCE:
       original xMafia SWF
       DefineSprite 650
       MafiaGameListItem.as

   The old 517x53 flattened PNG is intentionally NOT used here.

   SWF depth map:

       1   631 unnamed
       3   631 gameItemBack
       5   633 gameItemBox
       8   634 gameTitle
       9   635 gameStatus
       10  645 btnGameOperation
       18  647 unnamed overlay
       19  648 timeStatus
       20  148 minLevel
       23  148 maxLevel
       26  649 minMaxLevel
   ============================================================ */


.original-game-ticket {
    position: relative;

    width: 517px;
    min-height: 45px;

    margin: 0 0 10px;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: none !important;

    box-shadow: none;

    overflow: hidden;

    color: #ddd2bf;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
}


.original-game-ticket.is-mine {
    border: 0;
    box-shadow: none;
}


/* ------------------------------------------------------------
   Generic exported SWF layer
   ------------------------------------------------------------ */

.original-ticket-layer {
    position: absolute;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    max-width: none;

    pointer-events: none;

    user-select: none;

    transform-origin:
        left top;
}


/*
 * depth 1 / chid 631
 *
 * matrix:
 * x=0 y=0
 * scaleY=0.29411316
 */
.original-ticket-base {
    left: 0;
    top: 0;

    z-index: 1;

    transform:
        scaleY(0.29411316);
}


/*
 * depth 3 / gameItemBack / chid 631
 *
 * x=0 y=1
 * alphaMultTerm = 154 / 256
 */
.original-ticket-back {
    left: 0;
    top: 1px;

    z-index: 3;

    opacity: 0.6015625;

    object-fit: fill;
}


/*
 * depth 5 / gameItemBox / chid 633
 *
 * x=5 y=15
 * alphaMultTerm = 154 / 256
 */
.original-ticket-box {
    left: 5px;
    top: 15px;

    z-index: 5;

    opacity: 0.6015625;

    object-fit: fill;
}


/*
 * depth 8 / gameTitle / chid 634
 *
 * x=99 twips / 20 = 4.95px
 * y=40 twips / 20 = 2px
 */
.original-ticket-title {
    position: absolute;

    left: 4.95px;
    top: 2px;

    z-index: 8;

    width: 165px;
    height: 14px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: #d2c8b7;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;
    line-height: 13px;

    font-weight: normal;

    white-space: nowrap;

    text-overflow: ellipsis;

    pointer-events: none;
}


/*
 * Browser semantic wrapper only.
 */
.original-ticket-info {
    position: static;

    display: contents;

    margin: 0;
    padding: 0;
}


/*
 * depth 9 / gameStatus / chid 635
 *
 * x=5199 twips / 20 = 259.95px
 * y=40 twips / 20 = 2px
 */
.original-ticket-status {
    position: absolute;

    left: 259.95px;
    top: 2px;

    z-index: 9;

    width: 90px;
    height: 14px;

    margin: 0;
    padding: 0;

    color: #80786c;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
    line-height: 13px;

    white-space: nowrap;

    pointer-events: none;
}


/*
 * depth 10 / btnGameOperation / chid 645
 *
 * x=3480 twips / 20 = 174px
 * y=0
 */
.original-ticket-operation {
    position: absolute;

    left: 174px;
    top: 0;

    z-index: 10;

    width: 82px;
    height: 17px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    outline: 0;

    background: transparent;

    box-shadow: none;

    cursor: pointer;

    overflow: hidden;
}


.original-ticket-operation::before {
    content: none !important;
    display: none !important;
}


.original-ticket-operation-label {
    position: absolute;

    left: 0;
    top: 0;

    height: 17px;

    color: #8c8375;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;
    line-height: 17px;

    white-space: nowrap;

    pointer-events: none;
}


.original-ticket-operation-icon {
    position: absolute;

    right: 0;
    top: 0;

    display: block;

    max-width: none;

    pointer-events: none;

    user-select: none;
}


.original-ticket-operation:hover {
    filter:
        brightness(1.25);
}


.original-ticket-operation:disabled {
    opacity: .25;

    cursor: default;
}


/*
 * gameUsersContainer:
 *
 * x=13
 * y=20
 *
 * children:
 * x = 0,170,340
 * y step = 17
 */
.original-ticket-users {
    position: absolute;

    left: 13px;
    top: 20px;

    z-index: 15;

    width: 505px;

    margin: 0;
    padding: 0;

    display: grid;

    grid-template-columns:
        165px
        165px
        165px;

    grid-auto-rows:
        17px;

    column-gap:
        5px;

    row-gap:
        0;

    align-items:
        start;

    pointer-events:
        none;
}


.original-ticket-user {
    position: relative;

    width: 165px;
    height: 17px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    color: #fff099;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
    line-height: 17px;

    white-space: nowrap;

    pointer-events: auto;

    background: transparent;

    border: 0;
}


.original-ticket-user.is-owner {
    color: #fff099;
}


/*
 * depth 18 / chid 647
 */
.original-ticket-overlay {
    left: 0;
    top: 0;

    z-index: 18;
}


/*
 * depth 19 / timeStatus / chid 648
 *
 * x=5805 / 20 = 290.25px
 * y=40 / 20 = 2px
 */
.original-ticket-time {
    position: absolute;

    left: 290.25px;
    top: 2px;

    z-index: 19;

    width: 62px;
    height: 14px;

    margin: 0;
    padding: 0;

    color: #918877;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
    line-height: 13px;

    white-space: nowrap;

    text-align: center;

    pointer-events: none;
}


.original-ticket-time.is-ending {
    color: #aa0000;
}


/* ------------------------------------------------------------
   symbol148 level widgets
   ------------------------------------------------------------ */

.original-ticket-level {
    position: absolute;

    z-index: 20;

    display: block;

    width: 28px;
    height: 15px;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


.original-ticket-level > img {
    position: absolute;

    left: 0;
    top: 0;

    display: block;

    max-width: none;

    pointer-events: none;
}


.original-ticket-level-value {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #efe4cb;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;
    line-height: 15px;

    text-align: center;
}


/*
 * depth 20
 * x=7155 / 20 = 357.75
 * y=35 / 20 = 1.75
 */
.original-ticket-min-level {
    left: 357.75px;
    top: 1.75px;

    z-index: 20;
}


/*
 * depth 23
 * x=7921 / 20 = 396.05
 * y=35 / 20 = 1.75
 */
.original-ticket-max-level {
    left: 396.05px;
    top: 1.75px;

    z-index: 23;
}


/*
 * depth 26 / minMaxLevel
 * x=7454 / 20 = 372.70
 * y=34 / 20 = 1.70
 */
.original-ticket-minmax-level {
    position: absolute;

    left: 372.70px;
    top: 1.70px;

    z-index: 26;

    width: 28px;
    height: 14px;

    color: #80786c;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
    line-height: 13px;

    text-align: center;

    pointer-events: none;
}


.original-ticket-level[hidden],
.original-ticket-minmax-level[hidden] {
    display: none !important;
}


/*
 * R3.28 height reconstruction is superseded by the
 * exact JS implementation of MafiaGameListItem.refreshUsers().
 */
.original-game-ticket:has(
    .original-ticket-user:nth-child(4)
),
.original-game-ticket:has(
    .original-ticket-user:nth-child(7)
),
.original-game-ticket:has(
    .original-ticket-user:nth-child(10)
),
.original-game-ticket:has(
    .original-ticket-user:nth-child(13)
) {
    min-height: 0;
}


/*
 * Explicitly forbid the old flattened symbol650 background.
 */
.original-game-ticket {
    background-image:
        none !important;
}


/* ============================================================
   XMAFIA R3.37 — NewGamePanelMC / symbol497

   Exact display-list geometry from original final SWF.

   Existing JS behaviour is intentionally preserved.
   This section changes presentation only.

   Relevant original placements:

   windowBack          d1   x=0      y=0
   panelBack           d3   x=131.30 y=95.45

   gameTitle           d8   x=222.10 y=375.00

   btnOK               d15  x=252.50 y=419.00
   btnCancel           d20  x=401.95 y=419.00

   btnUp               d25  x=517.30 y=138.00
   btnDown             d28  x=389.95 y=138.00

   btnTimeUp           d31  x=517.30 y=177.00
   btnTimeDown         d34  x=389.95 y=177.00

   btnMinLevelUp       d37  x=517.30 y=236.00
   btnMinLevelDown     d40  x=389.95 y=236.00

   btnMaxLevelUp       d43  x=517.30 y=275.00
   btnMaxLevelDown     d46  x=389.95 y=275.00

   playerCount         d49  x=434.80 y=149.65
   timeCount           d50  x=434.80 y=188.65
   minPlayersLevel     d51  x=434.80 y=247.65
   maxPlayersLevel     d52  x=434.80 y=286.65
   ============================================================ */


/*
 * MainModalLayer is the original 760x600 Flash stage.
 */
#mainModalLayer {
    position: absolute;

    inset: 0;

    width: 760px;
    height: 600px;

    z-index: 1000;

    overflow: hidden;

    pointer-events: auto;
}


/*
 * windowBack / character16.
 *
 * Exported sprite16 is exactly 760x600.
 */
.original-modal-shade {
    position: absolute;

    left: 0;
    top: 0;

    width: 760px;
    height: 600px;

    background:
        transparent
        url("/rebuild/assets/game/lobby/new-game/window-back.png")
        left top /
        760px 600px
        no-repeat;

    pointer-events: auto;
}


/*
 * The DOM panel itself represents symbol497.
 *
 * Do NOT center a modern 330px card anymore.
 */
.original-new-game-panel {
    position: absolute;

    left: 0;
    top: 0;

    width: 760px;
    height: 600px;

    transform: none;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    overflow: hidden;

    color: #fff;

    font-family:
        Arial,
        sans-serif;
}


/*
 * panelBack / character279.
 *
 * Original matrix:
 * x=131.30
 * y=95.45
 *
 * FFDec export:
 * 501x398
 */
.original-new-game-panel::before {
    content: "";

    position: absolute;

    left: 131.30px;
    top: 95.45px;

    z-index: 3;

    width: 501px;
    height: 398px;

    background:
        transparent
        url("/rebuild/assets/game/lobby/new-game/panel-back.png")
        left top /
        501px 398px
        no-repeat;

    pointer-events: none;
}


/*
 * Current hand-written heading is retained only as dynamic/static
 * text equivalent until character496 is independently decoded.
 *
 * Its location follows original depth53 object near panel heading.
 */
.original-new-game-heading {
    position: absolute;

    left: 301.05px;
    top: 101.50px;

    z-index: 53;

    width: 220px;
    height: 28px;

    margin: 0;
    padding: 0;

    color: #d9c7a5;

    font-family:
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 28px;

    font-weight: normal;

    text-align: center;

    pointer-events: none;
}


/*
 * gameTitle / original depth8.
 */
.original-new-game-title {
    position: absolute;

    left: 222.10px;
    top: 375px;

    z-index: 8;

    width: 390px;
    height: 23px;

    box-sizing: border-box;

    margin: 0;
    padding: 2px 5px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #4b3a2c;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 19px;
}


/*
 * Existing logical rows become transparent containers.
 * Their labels stay available as the browser equivalents of the
 * original static text children 489..493.
 */
.original-new-game-row {
    position: absolute;

    display: block;

    width: 390px;
    height: 30px;

    min-height: 0;

    margin: 0;
    padding: 0;

    border: 0;
}


/*
 * Original label artwork/text begins at x=218.
 */
.original-new-game-label {
    position: absolute;

    left: 0;
    top: 0;

    width: 165px;
    height: 24px;

    color: #cfc4b4;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
    line-height: 24px;

    pointer-events: none;
}


/*
 * Row positions follow the static display-list objects.
 */
.original-new-game-players {
    left: 218px;
    top: 138px;
}


.original-new-game-time {
    left: 218px;
    top: 177px;
}


.original-new-game-min-level {
    left: 218px;
    top: 236px;
}


.original-new-game-max-level {
    left: 218px;
    top: 275px;
}


/*
 * Remove modern grid spinner layout entirely.
 */
.original-spinner {
    position: absolute;

    left: 0;
    top: 0;

    display: block;

    width: 350px;
    height: 30px;
}


/*
 * DefineEditText character495:
 *
 * bounds:
 *   Xmin = -40 twips  = -2px
 *   Xmax = 1443       = 72.15px
 *   Ymin = -40        = -2px
 *   Ymax = 376        = 18.80px
 *
 * instance positions:
 *   player 434.80,149.65
 *   time   434.80,188.65
 *   min    434.80,247.65
 *   max    434.80,286.65
 *
 * Relative to row x=218:
 *   left = 216.8px
 *
 * Relative to row y:
 *   top = 11.65px
 */
.original-spinner-value {
    position: absolute;

    left: 216.80px;
    top: 11.65px;

    width: 74.15px;
    height: 20.80px;

    margin: 0;
    padding: 0;

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 20px;

    font-weight: bold;

    text-align: center;

    pointer-events: none;
}


/*
 * Original arrow buttons.
 *
 * Exported sprite284/287 are 51x54 including their three frames.
 * Runtime uses the first frame as the resting visual.
 *
 * Placement below uses the original MovieClip instance coordinates.
 */
.original-spinner button {
    position: absolute;

    width: 51px;
    height: 54px;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background-color: transparent;

    background-repeat: no-repeat;
    background-position: left top;
    background-size: 51px 54px;

    color: transparent;

    font-size: 0;

    cursor: pointer;

    overflow: hidden;
}


/*
 * xDown = 389.95
 * relative row x = 218
 */
.original-spinner .original-swf-arrow-down {
    left: 171.95px;
    top: 0;

    background-image:
        url("/rebuild/assets/game/lobby/new-game/arrow-down.png");
}


/*
 * xUp = 517.30
 * relative row x = 218
 */
.original-spinner .original-swf-arrow-up {
    left: 299.30px;
    top: 0;

    background-image:
        url("/rebuild/assets/game/lobby/new-game/arrow-up.png");
}


.original-spinner button:disabled {
    opacity: .25;

    cursor: default;
}


/*
 * Existing button wrapper becomes display-list neutral.
 */
.original-new-game-buttons {
    display: contents;

    margin: 0;
    padding: 0;
}


/*
 * OK / character226
 *
 * FFDec export = 108x46
 * original x=252.5 y=419
 */
.original-swf-new-game-ok {
    position: absolute;

    left: 252.50px;
    top: 419px;

    z-index: 15;

    width: 108px !important;
    min-width: 0 !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent
        url("/rebuild/assets/game/lobby/new-game/button-ok.png")
        left top /
        108px 46px
        no-repeat !important;

    box-shadow: none !important;

    color: transparent !important;

    font-size: 0 !important;

    cursor: pointer;
}


/*
 * Cancel / character447
 *
 * FFDec export = 111x48
 * original x=401.95 y=419
 */
.original-swf-new-game-cancel {
    position: absolute;

    left: 401.95px;
    top: 419px;

    z-index: 20;

    width: 111px !important;
    min-width: 0 !important;

    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        transparent
        url("/rebuild/assets/game/lobby/new-game/button-cancel.png")
        left top /
        111px 48px
        no-repeat !important;

    box-shadow: none !important;

    color: transparent !important;

    font-size: 0 !important;

    cursor: pointer;
}


/*
 * Preserve browser interaction states without inventing new artwork.
 */
.original-swf-new-game-ok:hover,
.original-swf-new-game-cancel:hover,
.original-spinner button:hover:not(:disabled) {
    filter:
        brightness(1.12);
}


/* ============================================================
   NoGameMC / symbol487

   DefineSprite487:
       depth1 -> character486 x=0 y=0

   Exported exact visual:
       199x115
   ============================================================ */

.original-no-games {
    position: absolute;

    left: 173px;
    top: 45px;

    width: 199px;
    height: 115px;

    margin: 0;
    padding: 0;

    color: transparent;

    font-size: 0;

    pointer-events: none;
}


.original-no-games-image {
    display: block;

    width: 199px;
    height: 115px;

    margin: 0;
    padding: 0;

    border: 0;

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   XMAFIA R3.37.4 — exact symbol497 TextFields

   Source:
       original SWF
       characters 489-496
       exact MATRIX positions + RECT bounds

   20 SWF twips = 1 browser pixel.
   ============================================================ */


/*
 * Earlier browser labels created by makeSpinner() are no longer
 * visual. Their semantic DOM may remain because spinner behaviour
 * already depends on those structures.
 */
.original-new-game-label {
    display: none !important;
}


/*
 * Earlier reconstructed window heading is superseded by
 * exact character496.
 */
.original-new-game-heading {
    display: none !important;
}


/* Generic original static TextField. */
.original-new-game-static-text {
    position: absolute;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    box-sizing: border-box;

    pointer-events: none;

    white-space: pre-line;

    overflow: visible;

    font-family:
        Arial,
        sans-serif;

    font-weight: bold;

    text-rendering:
        optimizeLegibility;
}


/*
 * Character489
 *
 * "Количество игроков:"
 *
 * PlaceObject:
 *   x=218
 *   y=148.55
 *
 * RECT:
 *   xmin=-2
 *   xmax=173.4
 *   ymin=-2
 *   ymax=17.9
 *
 * effective:
 *   width=175.4
 *   height=19.9
 *
 * Arial 12 / bold / #cccccc
 */
.original-new-game-static-489 {
    left: 216px;
    top: 146.55px;

    z-index: 9;

    width: 175.40px;
    height: 19.90px;

    color: #cccccc;

    font-size: 12px;
    line-height: 20px;
}


/*
 * Character491
 *
 * "Длительность заявки:"
 */
.original-new-game-static-491 {
    left: 216px;
    top: 186.55px;

    z-index: 11;

    width: 175.40px;
    height: 19.90px;

    color: #cccccc;

    font-size: 12px;
    line-height: 20px;
}


/*
 * Character492
 *
 * "Минимальный
 *  уровень игроков:"
 *
 * MATRIX x=218 y=240.55
 *
 * RECT:
 * width = (2613 - -40) / 20 = 132.65
 * height = (711 - -40) / 20 = 37.55
 */
.original-new-game-static-492 {
    left: 216px;
    top: 238.55px;

    z-index: 12;

    width: 132.65px;
    height: 37.55px;

    color: #cccccc;

    font-size: 12px;
    line-height: 17.5px;
}


/*
 * Character493
 *
 * "Максимальный
 *  уровень игроков:"
 */
.original-new-game-static-493 {
    left: 216px;
    top: 279.55px;

    z-index: 13;

    width: 141.65px;
    height: 37.55px;

    color: #cccccc;

    font-size: 12px;
    line-height: 17.5px;
}


/*
 * Character490
 *
 * "Название игры"
 *
 * MATRIX x=218 y=344.5
 */
.original-new-game-static-490 {
    left: 216px;
    top: 342.50px;

    z-index: 10;

    width: 165.30px;
    height: 19.90px;

    color: #cccccc;

    font-size: 12px;
    line-height: 20px;
}


/*
 * Character494
 *
 * Static original text exported directly by FFDec.
 *
 * MATRIX:
 *   x=453.95
 *   y=320.85
 *
 * RECT:
 *   width = 1973/20 = 98.65
 *   height = (202 - -7)/20 = 10.45
 *
 * Original:
 *   Arial
 *   8px
 *   #666666
 */
.original-new-game-static-494 {
    left: 453.95px;
    top: 320.50px;

    z-index: 14;

    width: 98.65px;
    height: 10.45px;

    color: #666666;

    font-size: 8px;
    line-height: 10px;

    font-weight: normal;

    white-space: nowrap;
}


/*
 * Character496
 *
 * "Создать игру"
 *
 * MATRIX:
 *   x=301.05
 *   y=101.50
 *
 * RECT:
 *   xmin=57twips = 2.85px
 *   xmax=2823twips = 141.15px
 *   width=138.30px
 *
 *   ymin=-40twips = -2px
 *   ymax=577twips = 28.85px
 *   height=30.85px
 *
 * Original:
 *   Cambria 20
 *   #f5cb67
 *   centered
 */
.original-new-game-static-496 {
    left: 303.90px;
    top: 99.50px;

    z-index: 53;

    width: 138.30px;
    height: 30.85px;

    color: #f5cb67;

    font-family:
        Cambria,
        Georgia,
        serif;

    font-size: 20px;
    line-height: 30px;

    font-weight: normal;

    text-align: center;

    white-space: nowrap;
}


/* ============================================================
   Character495 — dynamic values

   This one is NOT duplicated with static DOM.

   The existing spinner value elements are the browser equivalent
   of the original four character495 instances.

   Original RECT:
       xmin=-40  -> -2px
       xmax=1443 -> 72.15px
       width=74.15

       ymin=-40  -> -2px
       ymax=376  -> 18.8px
       height=20.8

   Original style:
       Arial 13
       bold
       #ffffff
       centered
   ============================================================ */

.original-spinner-value {
    width: 74.15px;
    height: 20.80px;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 20.80px;

    font-weight: bold;

    text-align: center;
}


/*
 * Existing row origins were deliberately chosen from the original
 * button matrices:
 *
 * players: 218,138
 * time:    218,177
 * min:     218,236
 * max:     218,275
 *
 * Character495 locations are all +216.8 X and +11.65 Y.
 */
.original-new-game-players .original-spinner-value,
.original-new-game-time .original-spinner-value,
.original-new-game-min-level .original-spinner-value,
.original-new-game-max-level .original-spinner-value {
    left: 216.80px;
    top: 11.65px;
}


/*
 * gameTitle / character211 remains the REAL editable browser input.
 *
 * The newly-restored character490 above is only its original label.
 */
.original-new-game-title {
    left: 222.10px;
    top: 375px;

    z-index: 8;
}


/* ============================================================
   XMAFIA R3.37.5 — symbol497 interactive display depths

   panelBack is depth 3.

   Previous browser rows had z-index:auto and therefore their
   controls could be painted underneath panelBack.

   These z-indices reproduce the original Flash display list.
   ============================================================ */


/*
 * The semantic row itself must sit above panelBack.
 * Individual children then receive their exact depths.
 */
.original-new-game-row {
    z-index: 24;

    pointer-events: none;
}


.original-spinner {
    z-index: 24;

    pointer-events: none;
}


/*
 * Buttons must receive mouse input just like original ControlButton.
 */
.original-spinner button {
    pointer-events: auto;
}


/* ------------------------------------------------------------
   Original button depths
   ------------------------------------------------------------ */

.original-depth-25 {
    z-index: 25 !important;
}

.original-depth-28 {
    z-index: 28 !important;
}

.original-depth-31 {
    z-index: 31 !important;
}

.original-depth-34 {
    z-index: 34 !important;
}

.original-depth-37 {
    z-index: 37 !important;
}

.original-depth-40 {
    z-index: 40 !important;
}

.original-depth-43 {
    z-index: 43 !important;
}

.original-depth-46 {
    z-index: 46 !important;
}


/* ------------------------------------------------------------
   Original dynamic TextField depths
   ------------------------------------------------------------ */

.original-depth-49 {
    z-index: 49 !important;
}

.original-depth-50 {
    z-index: 50 !important;
}

.original-depth-51 {
    z-index: 51 !important;
}

.original-depth-52 {
    z-index: 52 !important;
}


.original-spinner-value {
    pointer-events: none;

    visibility: visible !important;

    opacity: 1 !important;
}


/*
 * gameTitle / character211 / depth8
 *
 * Keep the actual browser input interactive.
 * Original panelBack is only depth3.
 */
.original-new-game-title {
    z-index: 8 !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    caret-color: #ffffff;

    color: #ffffff !important;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 19px;
}


/*
 * The original panel's artwork provides the field's surrounding
 * visual treatment, so do not invent a modern input border.
 *
 * A tiny transparent inset remains clickable across the full
 * historical TextField rectangle.
 */
.original-new-game-title:focus {
    outline: none;
}


/*
 * Keep original static fields non-interactive so they never steal
 * clicks from arrows or the editable title.
 */
.original-new-game-static-text,
.original-no-games-image {
    pointer-events: none;
}


/* ============================================================
   XMAFIA R3.44 — TopRigthPanelMC / symbol143

   Original MainTemplate placement:

       symbol143
       depth 53
       x = 485.30
       y = 7.00

   IMPORTANT:

   Despite its historical class name, TopRightPanel is effectively
   a stage-wide controls container.

   Negative child coordinates are intentional Flash geometry.
   ============================================================ */


.main-top-right-panel {
    position: absolute;

    left: 485.30px;
    top: 7px;

    z-index: 53;

    width: 0;
    height: 0;

    overflow: visible;

    pointer-events: none;
}


/*
 * Each button remains an independent MovieClip equivalent.
 */
.original-top-right-control {
    position: absolute;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    overflow: visible;

    cursor: pointer;

    pointer-events: auto;
}


.original-top-right-control > img {
    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    max-width: none;

    pointer-events: none;

    user-select: none;
}


/*
 * AS3 onMouseOver:
 *
 *     Srvc.getAdjustColorFilter(80,0,0,0)
 *
 * Browser adapter uses brightness only for now while preserving
 * the historical hover ownership on the individual MovieClip.
 */
.original-top-right-control:hover {
    filter:
        brightness(1.20);
}


/* ------------------------------------------------------------
   symbol143 exact children
   ------------------------------------------------------------ */


/*
 * btnBank / symbol122
 *
 * depth 1
 * local x = -383.95
 * local y =   13.10
 *
 * global:
 * x = 101.35
 * y = 20.10
 */
.original-top-right-bank {
    left: -383.95px;
    top: 13.10px;

    z-index: 1;
}


/*
 * btnChangeSound / symbol127
 *
 * depth 6
 * local x = 171.50
 * local y =   2.00
 *
 * global:
 * x = 656.80
 * y = 9.00
 */
.original-top-right-sound {
    left: 171.50px;
    top: 2px;

    z-index: 6;
}


/*
 * btnFullscreenOnOff / symbol133
 *
 * depth 8
 * global x = 725.95
 * global y = 8.70
 */
.original-top-right-fullscreen {
    left: 240.65px;
    top: 1.70px;

    z-index: 8;
}


/*
 * btnHelp / symbol137
 *
 * depth 10
 * global x = 692.80
 * global y = 9.00
 */
.original-top-right-help {
    left: 207.50px;
    top: 2px;

    z-index: 10;
}


/*
 * btnBug / symbol142
 *
 * depth 12
 *
 * local x = -476.45
 * local y =  566.35
 *
 * global:
 * x = 8.85
 * y = 573.35
 */
.original-top-right-bug {
    left: -476.45px;
    top: 566.35px;

    z-index: 12;
}


/*
 * Dynamic btnBank.accountValue is positioned in R3.44 only if the
 * original nested symbol exposes the instance directly.
 */
.original-bank-account-value {
    position: absolute;

    pointer-events: none;

    white-space: nowrap;
}

/*
 * btnBank.accountValue
 * recovered directly from symbol122.
 */
.original-bank-account-value {
    left: 40.00px;
    top: 3.70px;

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
}


/* ============================================================
   XMAFIA R3.46 — btnBank / symbol122 accountValue

   Authoritative symbol122 display list:

       depth 2
       character 118
       name accountValue
       x = 40.00
       y = 3.70
   ============================================================ */

.original-top-right-bank {
    /*
     * accountValue is a nested child, therefore the bank button
     * itself owns its positioning context.
     */
    position: absolute;
}


.original-bank-account-value {
    left: 40px !important;
    top: 3.70px !important;

    z-index: 2;

    pointer-events: none;

    white-space: nowrap;
}



/*
 * R3.44 used an earlier CSS brightness reconstruction before
 * the original MovieClip frames were mapped.
 *
 * Frame-driven presentation is authoritative now.
 */
.original-top-right-control:hover {
    filter: none;
}

/* ============================================================
   XMAFIA R3.59 — accumulated ChatMessageMC rows

   Original Flash contract:
     ChatMessageContainerMC contains one accumulated messageText.
     Each TEXTFORMAT/P block contributes to document flow.

   Browser restoration:
     rendered message blocks must participate in normal vertical
     flow. They must never occupy the same absolute coordinates.

   This layer changes presentation only:
     - no protocol changes
     - no message/history changes
     - no server changes
   ============================================================ */

.original-chat-textfield {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
}

.original-chat-textfield > .original-chat-textformat {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.original-chat-textformat::after {
    content: "";
    display: block;
    clear: both;
}

/* ============================================================
   XMAFIA R3.78D — original running-game exit controls
   ============================================================ */

#gameView {
    position: relative;
}

/*
 * Original MafiaGame dynamically placed BtnKillSelf at:
 *     x = 120
 *     y = 275 + 20 = 295
 */
.game-kill-self-button {
    position: absolute;
    z-index: 40;

    left: 120px;
    top: 295px;

    width: 16px;
    height: 16px;

    padding: 0;
    border: 0;

    background:
        url("/rebuild/assets/game/r378-exit/kill-self-normal.png")
        no-repeat
        0 0;

    background-size: 16px 16px;

    cursor: pointer;
}

.game-kill-self-button:hover {
    background-image:
        url("/rebuild/assets/game/r378-exit/kill-self-hover.png");
}

.game-kill-self-button:active {
    background-image:
        url("/rebuild/assets/game/r378-exit/kill-self-pressed.png");
}


/*
 * Original btnCloseByMoney belongs to MafiaStateContainer
 * symbol 116:
 *
 *     x = 25
 *     y = 173.55
 *
 * The semantic browser game view preserves that local position.
 */
.game-paid-exit-button {
    position: absolute;
    z-index: 41;

    left: 25px;
    top: 173.55px;

    min-width: 46px;
    height: 24px;

    padding: 0 5px;

    border: 0;

    font: 11px Arial, sans-serif;

    cursor: pointer;
}

.game-paid-exit-button[hidden] {
    display: none !important;
}

.game-paid-exit-button.is-locked {
    opacity: 0.5;
    pointer-events: none;
}


/*
 * ConfirmKillSelfMC is an original full-stage 820x660 asset.
 */
.game-kill-self-confirm {
    position: absolute;
    z-index: 200;

    inset: 0;

    width: 820px;
    height: 660px;
}

.game-kill-self-confirm.is-hidden {
    display: none;
}

.game-kill-self-confirm-art {
    position: absolute;

    left: 0;
    top: 0;

    width: 820px;
    height: 660px;

    pointer-events: none;
}

.game-kill-self-confirm-actions {
    position: absolute;

    left: 0;
    top: 0;

    width: 820px;
    height: 660px;
}

.game-kill-self-confirm-actions button {
    position: absolute;

    width: 92px;
    height: 28px;
}

/*
 * Button positions inside ConfirmKillSelfMC are temporarily semantic
 * hit areas over the authoritative full raster. They will be checked
 * during visual match QA before redesign work.
 */
#gameKillSelfConfirmOk {
    left: 300px;
    top: 370px;
}

#gameKillSelfConfirmCancel {
    left: 420px;
    top: 370px;
}

/* R3.89 original main-player death */

#gameMyName.is-original-dead {
    color: #888888 !important;
}

#gameMyRoleIcon {
    position: relative;
}

#gameMyRoleIcon.is-original-dead::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: #000;
    opacity: 0.6;
    pointer-events: none;
}

/* R3.89 original autoscroll indicator */

/*
 * Historical Flash:
 *
 * ON:
 *   "автоскроллинг вкл."
 *   subdued / alpha 0.3
 *
 * OFF:
 *   "автоскроллинг выкл."
 *   red / alpha 1
 */
.original-autoscroll-indicator {
    position: relative;
    z-index: 30;

    height: 14px;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 14px;

    color: #dddddd;
    opacity: 0.3;

    user-select: none;
    pointer-events: none;
}

.original-autoscroll-indicator.is-off {
    color: #ff0000;
    opacity: 1;
}

/* R3.89C original symbol148 frames */

.original-user-level,
.original-main-level-badge {
    width: 18px;
    height: 16px;
    overflow: visible;
}

.original-user-level {
    position: absolute;
    left: 0;
    top: 2.85px;
    z-index: 10;
}

.main-user-level {
    height: 16px;
    overflow: visible;
}

.original-level-frame {
    position: absolute;
    left: 0;
    top: 0;

    z-index: 2;

    display: block;

    width: 18px;
    height: 16px;

    max-width: none;

    pointer-events: none;
}

.original-level-color-fill {
    position: absolute;

    left: 0;
    top: 0;

    z-index: 1;

    width: 17.5px;
    height: 12.25px;

    pointer-events: none;
}

.original-user-level-value {
    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-bottom: 1px;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 12px;

    text-align: center;

    pointer-events: none;
}

/* R3.90 MafiaGame MainTemplate.userLevel */

/*
 * Reuses the exact symbol148 artwork restored in R3.89C.
 *
 * The holder lives in the same restored identity/state block as the
 * local player name. No new decorative artwork is introduced.
 */
.game-main-level {
    position: absolute;

    left: 2px;
    top: 51px;

    width: 18px;
    height: 16px;

    z-index: 22;

    overflow: visible;
}

/*
 * ============================================================
 * R3.94 restoration debug login interaction safety
 *
 * RESTORATION tooling is deliberately outside the historical
 * 760x600 Flash stage.
 *
 * It must remain clickable even while Boot/Preloader owns the
 * historical stage.
 *
 * This does not alter the original xMafia presentation.
 * ============================================================
 */

#debugBar {
    position: relative;
    z-index: 2147483647;
    pointer-events: auto;
    isolation: isolate;
}

#debugBar button,
#debugBar [data-debug-user] {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* XMAFIA_R398_DEVELOPMENT_ALERT_CSS
   Presentation for the original MainTemplate development Alert. */

.original-development-alert {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 300px;
    min-height: 118px;

    transform: translate(-50%, -50%);

    box-sizing: border-box;

    padding: 28px 20px 16px;

    text-align: center;

    background: #202020;

    border: 1px solid #686868;

    z-index: 50;
}

.original-development-alert-message {
    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #eeeeee;

    font-size: 14px;
}

.original-development-alert-button {
    min-width: 72px;
    height: 26px;

    margin-top: 8px;

    cursor: pointer;
}

/* XMAFIA_R400_VIP_CONFIG_CSS */

.original-vip-config-panel {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 820px;
    height: 660px;

    transform:
        translate(-50%, -50%)
        scale(0.92);

    transform-origin: center;

    z-index: 300;
}

.original-vip-config-background {
    position: absolute;
    inset: 0;

    width: 820px;
    height: 660px;

    pointer-events: none;
    user-select: none;
}

.original-vip-config-controls {
    position: absolute;
    inset: 0;

    z-index: 2;
}

.original-vip-checkbox-row {
    position: absolute;

    width: 24px;
    height: 24px;

    cursor: pointer;
}

.original-vip-checkbox-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.original-vip-checkbox-visual {
    display: block;

    width: 24px;
    height: 24px;

    background-image:
        url("/rebuild/assets/vip-bonus/checkbox-unchecked.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.original-vip-checkbox-row input:checked
+ .original-vip-checkbox-visual {
    background-image:
        url("/rebuild/assets/vip-bonus/checkbox-checked.png");
}

.original-vip-checkbox-row.is-locked {
    opacity: 0.5;
    cursor: default;
}

/*
 * Logical placement over the preserved VIPConfigMC artwork.
 * Artwork remains the visual authority; labels are not recreated.
 */

.original-vip-checkbox-row[data-vip-name="noAva"] {
    left: 247px;
    top: 182px;
}

.original-vip-checkbox-row[data-vip-name="noAge"] {
    left: 247px;
    top: 218px;
}

.original-vip-checkbox-row[data-vip-name="noSex"] {
    left: 247px;
    top: 254px;
}

.original-vip-checkbox-row[data-vip-name="noCity"] {
    left: 247px;
    top: 290px;
}

.original-vip-checkbox-row[data-vip-name="noProfile"] {
    left: 247px;
    top: 326px;
}

.original-vip-checkbox-row[data-vip-name="isColorNick"] {
    left: 465px;
    top: 182px;
}

.original-vip-checkbox-row[data-vip-name="isColorMess"] {
    left: 465px;
    top: 218px;
}

.original-vip-checkbox-row[data-vip-name="isSelfAva"] {
    left: 465px;
    top: 254px;
}

.original-vip-palette {
    position: absolute;

    display: grid;

    grid-template-columns:
        repeat(3, 30px);

    gap: 0;

    padding: 5px;

    background: rgba(20, 20, 20, 0.95);

    border: 1px solid #555;
}

.original-vip-palette[data-vip-palette="colorNick"] {
    left: 478px;
    top: 300px;
}

.original-vip-palette[data-vip-palette="colorMess"] {
    left: 588px;
    top: 300px;
}

.original-vip-palette.is-locked {
    opacity: 0.5;
    pointer-events: none;
}

.original-vip-swatch {
    width: 30px;
    height: 30px;

    padding: 0;
    margin: 0;

    border: 1px solid transparent;

    cursor: pointer;
}

.original-vip-swatch.is-selected {
    border-color: #ffffff;
}

.original-vip-preview {
    position: absolute;

    width: 170px;

    overflow: hidden;
    white-space: nowrap;

    font-size: 13px;
}

.original-vip-preview-nick {
    left: 470px;
    top: 420px;
}

.original-vip-preview-message {
    left: 470px;
    top: 446px;
}

.original-vip-nick-color-alert {
    position: absolute;

    left: 458px;
    top: 278px;

    width: 150px;
    height: 20px;
}

.original-vip-avatar-button {
    position: absolute;

    left: 238px;
    top: 395px;

    width: 145px;
    height: 28px;

    opacity: 0.5;
}

.original-vip-config-buttons {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 72px;

    display: flex;
    justify-content: center;

    gap: 18px;
}

.original-vip-config-buttons button {
    min-width: 78px;
    height: 28px;
}

/* XMAFIA_R403_ORIGINAL_BUG_REPORTER */

.original-bug-reporter-layer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.58);
}

.original-bug-reporter-panel {
    position: relative;
    width: 820px;
    height: 660px;
    max-width: 96vw;
    max-height: 96vh;
    transform-origin: center center;
}

.original-bug-reporter-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.original-bug-reporter-input {
    position: absolute;
    left: 17.8%;
    top: 29.5%;
    width: 64.5%;
    height: 38%;
    box-sizing: border-box;
    resize: none;
    border: 0;
    outline: none;
    background: transparent;
    color: #2a2118;
    font: 18px/1.35 Arial, sans-serif;
    padding: 12px;
}

.original-bug-reporter-hit {
    position: absolute;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.original-bug-reporter-close {
    right: 8.5%;
    top: 8%;
    width: 7%;
    height: 8%;
}

.original-bug-reporter-ok {
    left: 29%;
    bottom: 13%;
    width: 19%;
    height: 10%;
}

.original-bug-reporter-cancel {
    right: 29%;
    bottom: 13%;
    width: 19%;
    height: 10%;
}

@media (max-width: 820px), (max-height: 660px) {
    .original-bug-reporter-panel {
        transform: scale(
            min(
                calc(96vw / 820px),
                calc(96vh / 660px)
            )
        );
    }
}

/* ============================================================
   R4.04 — original AppNotWorkingPanelMC / symbol19
   ============================================================ */

.original-app-not-working {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 760px;
    height: 600px;
    transform: translate(-50%, -50%);
    z-index: 2147483000;
    pointer-events: all;
}

.original-app-not-working[hidden] {
    display: none !important;
}

.original-app-not-working img {
    display: block;
    width: 760px;
    height: 600px;
    border: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    user-select: none;
}


/* XMAFIA_R4_FINAL_EXACT_SLIDERMC_40
   ============================================================
   Exact original SliderMC / symbol40 artwork.

   Authoritative SWF display list:

     back         character 27  depth 1
                  x=0, y=5
                  original source 11x4, vertically stretched

     btnArrowUp   character 31  depth 3
                  x=0, y=0
                  11x11

     btnArrowDown character 35  depth 5
                  x=0, y=220 in authored symbol;
                  Scroller.as moves it to y=218 for height 232

     scrollBar    character 39  depth 7
                  x=0.5, y=12
                  10x56

   Scroller(0, -2, 232) is the MainTemplate contract.

   Browser geometry keeps the behavioral slider range equal to
   Flash:

       218 - 11 - 56 = 151 px
   ============================================================ */

.original-chat-scroller-holder {
    width: 11px;
    height: 232px;

    display: none;

    background: none;

    overflow: visible;
}

.original-chat-scroller-holder.is-active {
    display: block;
}


/*
 * SliderMC.back / character27.
 *
 * In Scroller.as:
 *   back.height = sliderHeight - 10
 *
 * 232 - 10 = 222.
 */
.original-chat-scroller-holder::before {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 11px;
    height: 222px;

    background-image:
        url("/rebuild/assets/main/chat-scroller/back.png");

    background-repeat: stretch;
    background-size: 11px 222px;

    pointer-events: none;

    z-index: 1;
}


/* btnArrowUp / character31 */

.original-chat-scroller-up {
    position: absolute;

    left: 0;
    top: 0;

    width: 11px;
    height: 11px;

    margin: 0;
    padding: 0;

    border: 0;

    background-color: transparent;
    background-image:
        url("/rebuild/assets/main/chat-scroller/arrow-up-1.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 11px 11px;

    font-size: 0;
    color: transparent;

    cursor: pointer;

    z-index: 4;
}

.original-chat-scroller-up:hover {
    background-image:
        url("/rebuild/assets/main/chat-scroller/arrow-up-2.png");
}

.original-chat-scroller-up:active {
    background-image:
        url("/rebuild/assets/main/chat-scroller/arrow-up-3.png");
}


/* btnArrowDown / character35 */

.original-chat-scroller-down {
    position: absolute;

    left: 0;
    top: 218px;

    width: 11px;
    height: 11px;

    margin: 0;
    padding: 0;

    border: 0;

    background-color: transparent;
    background-image:
        url("/rebuild/assets/main/chat-scroller/arrow-down-1.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 11px 11px;

    font-size: 0;
    color: transparent;

    cursor: pointer;

    z-index: 4;
}

.original-chat-scroller-down:hover {
    background-image:
        url("/rebuild/assets/main/chat-scroller/arrow-down-2.png");
}

.original-chat-scroller-down:active {
    background-image:
        url("/rebuild/assets/main/chat-scroller/arrow-down-3.png");
}


/*
 * Transparent interaction track.
 *
 * Flash scrollBar legal Y:
 *
 *   minimum = btnArrowUp.height = 11
 *   maximum = btnArrowDown.y - scrollBar.height
 *           = 218 - 56
 *           = 162
 *
 * range = 151
 *
 * A 207px browser track with a 56px thumb produces the exact
 * same 151px movement range.
 */

.original-chat-scroller-track {
    position: absolute;

    left: 0;
    top: 11px;

    width: 11px;
    height: 207px;

    background: transparent;

    cursor: pointer;

    z-index: 3;
}


/* scrollBar / character39 */

.original-chat-scroller-thumb {
    position: absolute;

    left: 0;
    top: 0;

    width: 10px;
    height: 56px;

    margin-left: .5px;

    background-color: transparent;
    background-image:
        url("/rebuild/assets/main/chat-scroller/thumb-1.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 10px 56px;

    cursor: grab;

    touch-action: none;
}

.original-chat-scroller-thumb:hover {
    background-image:
        url("/rebuild/assets/main/chat-scroller/thumb-2.png");
}

.original-chat-scroller-thumb:active {
    background-image:
        url("/rebuild/assets/main/chat-scroller/thumb-3.png");

    cursor: grabbing;
}

/* XMAFIA_R5_GAME_SMILE_BUTTON
   Original MafiaGame.btnOpenSmileWindow browser hit target. */

.game-smile-button {
    position: relative;

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;

    overflow: visible;
}

.game-smile-button > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
}

.xmafia-game-smile-window {
    z-index: 500;
}

/* XMAFIA_R53_GAME_SMILE_POINTER_FIX */

.game-smile-button {
    z-index: 220;
    pointer-events: auto;
}

.xmafia-game-smile-window {
    z-index: 600;

    pointer-events: auto !important;
}

.xmafia-game-smile-window * {
    pointer-events: auto;
}

/* XMAFIA_R62_MAIN_CONTROL_LAYER */

#mainProfileButton,
#mainVipButton {
    z-index: 140 !important;
    pointer-events: auto !important;
}

#mainBankButton {
    z-index: 130 !important;
}

/* ============================================================
   XMAFIA_R63_LOBBY_OPERATION_OWNERSHIP

   btnGameOperation is above the decorative ticket layers in the
   original display list. Browser artwork/overlays must never steal
   its pointer.
   ============================================================ */

.original-game-ticket {
    isolation: isolate;
}

.original-ticket-operation {
    position: absolute;

    z-index: 500 !important;

    pointer-events: auto !important;

    cursor: pointer !important;
}

.original-ticket-operation > * {
    pointer-events: none !important;
}

/*
 * QA: make the operation rectangle unambiguous without moving it.
 */
body[data-xmafia-ui="qa"]
.original-ticket-operation {
    outline:
        3px solid #31d17c !important;

    background:
        rgba(49, 209, 124, .24) !important;
}

/* XMAFIA_R63_GAME_SMILE_VISIBILITY */

body[data-xmafia-ui="qa"]
.xmafia-game-smile-window {
    width: 310px !important;
    height: 370px !important;

    overflow: visible !important;
}

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

    pointer-events: auto !important;
}

/* ============================================================
   XMAFIA_R63_MODAL_POINTER_BARRIER

   mainModalLayer itself remains transparent when empty.
   When it owns a modal child, the child controls all pointer
   activity in its own rectangle; Main controls never float above
   modal content.
   ============================================================ */

#mainModalLayer {
    z-index: 1000;
}

#mainModalLayer > * {
    position: relative;

    z-index: 1;

    pointer-events: auto;
}

#mainView .controls-layer {
    z-index: 100 !important;
}

/* XMAFIA_R64_TICKET_PROFILE */

.original-ticket-user[data-user-uid] {
    cursor: pointer;
}

body[data-xmafia-ui="qa"]
.original-ticket-user[data-user-uid] {
    outline: 1px solid #69b7ff;
    background: rgba(60,130,190,.14);
}

/* XMAFIA_R64_GAME_PLAYER_PROFILE */

.game-player-row {
    position: relative;
}

.xmafia-game-player-profile {
    position: absolute;

    right: 2px;
    top: 2px;

    width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;

    z-index: 600;

    border: 0;
    background: transparent;

    cursor: pointer;
}

body[data-xmafia-ui="qa"]
.xmafia-game-player-profile {
    border: 2px solid #69b7ff !important;
    background: rgba(70,140,210,.35) !important;
}

body[data-xmafia-ui="qa"]
.xmafia-game-player-profile::after {
    content: "i";

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    color: white;

    font:
        bold 11px Arial,
        sans-serif;
}

/* XMAFIA_R64_GAME_SMILE_CATALOG */

.xmafia-game-smile-window {
    overflow: visible !important;
}

.xmafia-game-smile-window
.xmafia-original-smile {
    width: 40px !important;
    height: 40px !important;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.xmafia-game-smile-window
.xmafia-original-smile img {
    display: block;

    max-width: 40px;
    max-height: 40px;

    margin: auto;

    opacity: 1 !important;

    pointer-events: none;
}

/* ============================================================
   XMAFIA_R65_GAME_PLAYER_PROFILE_REACHABILITY
   ============================================================ */

.game-player-row {
    overflow: visible !important;
}

.game-controls-layer
.xmafia-game-player-profile,
.xmafia-game-player-profile {
    pointer-events: auto !important;
    z-index: 1200 !important;
    cursor: pointer !important;
}

body[data-xmafia-ui="qa"]
.xmafia-game-player-profile {
    width: 24px !important;
    height: 24px !important;

    right: 1px !important;
    top: 1px !important;

    border: 2px solid #69b7ff !important;
    border-radius: 50% !important;

    background: rgba(20,80,150,.92) !important;

    opacity: 1 !important;
    visibility: visible !important;
}

body[data-xmafia-ui="qa"]
.xmafia-game-player-profile::after {
    content: "i" !important;

    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: #fff;

    font: bold 14px/1 Arial, sans-serif;

    pointer-events: none;
}

/* ============================================================
   R7.2A — UserInfo clickable action layer

   `btnSelectUser` is the original large invisible nickname hit-area.
   Private / Info(VIP) / Moderator are separate Flash controls and
   therefore MUST remain above that hit-area.

   Visual bitmap size and clickable browser area are intentionally
   separate: this improves browser hit reliability without changing
   the authoritative UserInfo X coordinates.
   ============================================================ */

.original-user-row {
    isolation: isolate;
}

.original-user-select {
    z-index: 5;
}

.original-user-name {
    z-index: 11;
}

.original-user-action {
    z-index: 100;

    pointer-events: auto;

    min-width: 16px;
    min-height: 16px;

    overflow: visible;
}

.original-user-private {
    /*
     * Original envelope artwork is only 16x11, but the Flash control
     * lives in a user row roughly 20px high. Keep artwork unchanged
     * while giving the browser a reliable 16x18 hit rectangle.
     */
    height: 18px;
    top: 0;
}

.original-user-info,
.original-user-moderator {
    width: 18px;
    height: 18px;

    top: 0;
}

.original-user-action > img {
    pointer-events: none;
}


/* ============================================================
   R7.2A — WEB-NATIVE USERINFO ROW

   IMPORTANT ARCHITECTURE DECISION

   The original SWF UserInfo geometry remains documented as forensic
   truth, including btnSelectUser and 30/50/65 + textWidth positioning.

   The browser presentation deliberately does NOT reproduce overlapping
   Flash hit areas.

   Semantic order:

       level | ban? | nickname | private | info/VIP | moderator?

   Every visible action is its own native DOM control.

   This presentation layer may later be completely redesigned without
   changing chat/profile/moderation semantics.
   ============================================================ */

.original-user-row {
    display: flex;

    align-items: center;

    gap: 3px;

    width: 197px;
    height: 20px;

    padding: 0;

    box-sizing: border-box;

    overflow: visible;

    isolation: isolate;
}


/*
 * Historical invisible btnSelectUser is no longer used for browser
 * pointer interaction. Its original existence/geometry remains in
 * restoration documentation and JS forensic structure.
 */
.original-user-select {
    display: none !important;

    pointer-events: none !important;
}


/* Level symbol remains first. */
.original-user-level {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    flex: 0 0 18px;

    width: 18px;
    height: 16px;

    z-index: auto;
}


/* Ban symbol, when present, becomes a normal flex item. */
.original-user-ban-marker {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    z-index: auto;
}


/*
 * Visible nickname is now the real recipient-selection button.
 */
.original-user-name {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    flex: 0 1 auto;

    min-width: 0;
    max-width: 105px;

    height: 18px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 18px;

    color: #ffdf19;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;

    text-align: left;

    pointer-events: auto;

    cursor: pointer;

    z-index: auto;
}

.original-user-name-button:disabled {
    cursor: default;
}

.original-user-row.is-main
.original-user-name {
    color: #fff;
}

.original-user-row.is-in-game
.original-user-name {
    color: #b48080;
}


/*
 * Private / Info(VIP) / Moderator are normal independent DOM buttons.
 *
 * Inline `left` values may still be calculated by the restoration
 * forensic code, but they are intentionally ignored by this web-native
 * presentation layer.
 */
.original-user-action {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    flex: 0 0 auto;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    overflow: visible;

    cursor: pointer;

    pointer-events: auto;

    z-index: auto;

    font-size: 0;
    line-height: 0;
}


/* Envelope */
.original-user-private {
    width: 16px;
    height: 16px;
}

.original-user-private > img {
    width: 16px;
    height: 11px;

    object-fit: contain;
}


/* Info or VIP crown — still ONE semantic profile button. */
.original-user-info {
    width: 16px;
    height: 16px;
}

.original-user-info-standard,
.original-user-info-crown {
    width: 16px;
    height: 16px;

    object-fit: contain;

    pointer-events: none;
}


/* Moderator terminal */
.original-user-moderator {
    width: 16px;
    height: 16px;
}

.original-user-moderator > img {
    width: 16px;
    height: 16px;

    object-fit: contain;
}


/*
 * Images are presentation only.
 * The native button always owns hit-testing.
 */
.original-user-action img {
    pointer-events: none !important;
}


/* ============================================================
   R7.2A — MAIN CONTROLS POINTER PASSTHROUGH

   Live DOM QA proved that #mainControlsLayer spans the full stage
   above the OnlineUserPanel and receives pointer events even in
   transparent areas.

   elementsFromPoint() showed:

       #mainControlsLayer
       -> UserInfo row
       -> OnlineUserPanel

   Therefore the controls container itself must be transparent to
   pointer hit-testing.

   Real interactive controls inside it explicitly retain pointer
   interaction.

   This mirrors the already established modal-layer architecture:
   structural layer = no pointer capture;
   actual controls = interactive.
   ============================================================ */

#mainControlsLayer {
    pointer-events: none;
}

#mainControlsLayer button,
#mainControlsLayer input,
#mainControlsLayer textarea,
#mainControlsLayer select,
#mainControlsLayer a,
#mainControlsLayer [role="button"],
#mainControlsLayer .main-original-button {
    pointer-events: auto;
}


/* ============================================================
   R7.2A FINAL — Info / VIP is ONE semantic profile control

   Flash btnInfo contains two presentation states:
       standart
       crown

   Browser rule:
       normal user -> standard Info image only
       active VIP  -> crown image only

   Never render both simultaneously.
   ============================================================ */

.original-user-info {
    position: relative !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 16px !important;
    height: 16px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    outline: 0;

    background: transparent !important;

    overflow: visible;
}

.original-user-info-standard,
.original-user-info-crown {
    position: static !important;

    left: auto !important;
    top: auto !important;

    width: 16px !important;
    height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0;

    background: transparent !important;

    object-fit: contain;

    pointer-events: none !important;
}

/* Normal profile presentation. */
.original-user-info-standard {
    display: block !important;
}

.original-user-info-crown {
    display: none !important;
}

/* Active VIP replaces standard Info visually. */
.original-user-info.is-vip
.original-user-info-standard {
    display: none !important;
}

.original-user-info.is-vip
.original-user-info-crown {
    display: block !important;
}


/* ============================================================
   R7.2A FINAL — structural controls layer must not steal clicks.

   Live document.elementsFromPoint() proved that this transparent
   full-stage layer was above OnlineUserPanel.

   Actual controls inside it explicitly remain interactive.
   ============================================================ */

#mainControlsLayer {
    pointer-events: none !important;
}

#mainControlsLayer button,
#mainControlsLayer input,
#mainControlsLayer textarea,
#mainControlsLayer select,
#mainControlsLayer a,
#mainControlsLayer [role="button"],
#mainControlsLayer .main-original-button {
    pointer-events: auto !important;
}


/* ============================================================
   R7.2A — AUTHORITATIVE USERINFO ICON FALLBACK

   Proven:
     /rebuild/assets/users/info.png = UserInfo standard profile icon.

   Not proven yet:
     exact standalone bitmap for BtnInfoForPanel.crown / symbol249.

   Therefore both standard and VIP UserInfo states currently render the
   proven standard icon.

   IMPORTANT:
   VIP semantics are NOT removed. Only the incorrect 47x42 MainTemplate
   VIP header artwork is removed from the UserInfo row.

   When symbol249.crown is exported exactly, only the visual source needs
   replacement; the semantic button contract remains unchanged.
   ============================================================ */

.original-user-info {
    width: 16px !important;
    height: 16px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;

    overflow: visible;
}

.original-user-info-standard {
    display: block !important;

    position: static !important;

    width: 16px !important;
    height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    object-fit: contain;

    pointer-events: none !important;
}


/*
 * There is deliberately NO .original-user-info-crown bitmap in the
 * live DOM until the exact SWF symbol249 crown state is extracted.
 */
.original-user-info-crown {
    display: none !important;
}


/*
 * VIP currently keeps the standard info artwork.
 * The difference remains semantic/data-driven, not fabricated visually.
 */
.original-user-info.is-vip
.original-user-info-standard {
    display: block !important;
}


/* ============================================================
   R7.2A FINAL — EXACT ORIGINAL BTNINFOFORPANEL STATES

   Authoritative original SWF export:
     243.png -> standart / blue [i]
     246.png -> crown / active VIP

   They are two visual states of ONE profile action.
   ============================================================ */

.original-user-info {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 16px !important;
    height: 16px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;

    overflow: visible !important;
}

.original-user-info-standard,
.original-user-info-crown {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    object-fit: contain;

    pointer-events: none !important;
}

/* Original standard [i] is 12x11. */
.original-user-info-standard {
    display: block !important;

    width: 12px !important;
    height: 11px !important;
}

/* VIP crown replaces [i]. */
.original-user-info-crown {
    display: none !important;

    width: 16px !important;
    height: 16px !important;
}

.original-user-info.is-vip
.original-user-info-standard {
    display: none !important;
}

.original-user-info.is-vip
.original-user-info-crown {
    display: block !important;
}


/* ============================================================
   R7.2A FINAL — EXACT PRIVATE / MODERATOR
   ============================================================ */

.original-user-private img {
    width: 16px !important;
    height: 11px !important;
}

.original-user-moderator img {
    width: 16px !important;
    height: 16px !important;
}


/* ============================================================
   R7.2A LEVEL ADAPTER

   The current rasterized symbol148 frame contains the dynamic
   authoring text "99". The real level is already calculated by
   originalLevelFromPointsTotal(), matching LevelCalculator.as.

   Do not display rasterized dynamic text in browser presentation.
   Keep the authoritative frame contract in data/docs, but render
   the dynamic level value itself cleanly.

   This is a browser adapter for Flash dynamic TextField content.
   ============================================================ */

.original-user-level {
    position: relative !important;

    width: 18px !important;
    height: 16px !important;

    flex: 0 0 18px !important;

    box-sizing: border-box;

    border: 1px solid rgba(190, 139, 26, .95);
    background:
        linear-gradient(
            180deg,
            rgba(115, 75, 8, .96),
            rgba(67, 42, 5, .96)
        );

    overflow: hidden;
}

.original-user-level
.original-level-frame {
    display: none !important;
}

.original-user-level-value {
    position: absolute !important;

    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 3;

    color: #ffe37b;

    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: bold;
    line-height: 14px;

    text-align: center;

    pointer-events: none;
}

.original-level-color-fill {
    position: absolute;

    left: 1px;
    top: 1px;

    width: 16px;
    height: 12px;

    z-index: 1;

    pointer-events: none;
}