/*
 * TESERA MOBILE LEGACY FALLBACK
 * Applies only to legacy tesera.ru pages on small screens.
 * Desktop layout is untouched.
 */
@media screen and (max-width: 767px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body {
        overflow-x: hidden;
    }

    #container,
    #footer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .mainnav-cont,
    .visual,
    .visual div.ins,
    .topnav,
    .subtopnav,
    .classnav {
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-x: hidden !important;
    }

    .mainnav {
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    .visual div.ins div.floater {
        width: calc(100% - 10px) !important;
        max-width: 347px !important;
        left: 5px !important;
        margin-left: 0 !important;
    }

    .breadcrumbs,
    .breadcrumbs-right {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .main {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
    }

    .game,
    .game-left,
    .game-person,
    .leftcol {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .rightcol {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .game-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .game h3 {
        margin-right: 0 !important;
    }

    .game-left .rating,
    .game-person .rating,
    .usertimes .rating {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        text-align: left !important;
        box-sizing: border-box;
    }

    .game-left .list-rating {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    ul.gallery,
    div.gallery {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    .games-filter .favTypes,
    .leftcol .tinymce,
    #tsetContainer table,
    #medsetContainer table {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    img,
    video,
    iframe,
    object,
    embed,
    canvas,
    svg {
        max-width: 100% !important;
        height: auto;
    }

    table {
        max-width: 100% !important;
    }

    td,
    th,
    p,
    li,
    a,
    span,
    div.raw_text_output {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    pre {
        max-width: 100% !important;
        overflow: auto !important;
        white-space: pre-wrap !important;
    }
}


/* TESERA_YANDEX_MOBILE_RESPONSIVE_FINAL_20260813 */
@media screen and (max-width: 767px) {

    /*
     * Candidate only.
     * Nothing here is installed on production by this test.
     */

    /* ---------------------------------------------------------
       1. Global legacy header / search area
       Current 347px children overflow a 320px viewport.
       --------------------------------------------------------- */

    .visual div.ins div.floater div.hldr {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .visual div.ins div.floater .comboboxContainer {
        left: auto !important;
        right: 2px !important;
    }

    p.tlogo {
        width: calc(100% - 78px) !important;
        max-width: 262px !important;
        box-sizing: border-box !important;
    }

    div.autolinks {
        width: auto !important;
        max-width: calc(100% - 130px) !important;
        box-sizing: border-box !important;
    }


    /* ---------------------------------------------------------
       2. Object titles.
       Legacy CSS/markup keeps several titles nowrap.
       --------------------------------------------------------- */

    h1#game_title,
    h1#person_title,
    h1#event_title,
    h1#article_title,
    h1#new_title,
    h1#project_title {
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    h1#game_title a,
    h1#game_title span,
    h1#person_title a,
    h1#person_title span,
    h1#event_title a,
    h1#event_title span,
    h1#article_title a,
    h1#article_title span,
    h1#new_title a,
    h1#new_title span,
    h1#project_title a,
    h1#project_title span {
        white-space: normal !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }


    /* ---------------------------------------------------------
       3. User profile legacy 3-column table.
       Current table.up-grid reaches ~891px.
       Stack only the top-level profile columns.
       --------------------------------------------------------- */

    table.up-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    table.up-grid > tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table.up-grid > tbody > tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table.up-grid > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    table.up-grid td.images,
    table.up-grid td.description {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* ---------------------------------------------------------
       4. Person/object old 3-column blocks.
       --------------------------------------------------------- */

    .cols {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .colleft,
    .colmid,
    .colright {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    table.specs {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    table.specs td {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }


    /* ---------------------------------------------------------
       5. Legacy comment body.
       One audited family currently has width ~620px.
       --------------------------------------------------------- */

    div.commentos div.item div.body,
    div.commentos div.body {
        width: auto !important;
        max-width: calc(100% - 40px) !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }


    /* ---------------------------------------------------------
       6. Legacy game lists where content starts near x=150.
       Keep the image/text concept but prevent heading from
       extending beyond the screen.
       --------------------------------------------------------- */

    .game h3 {
        width: auto !important;
        max-width: calc(100% - 150px) !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .game h3 a,
    .game h3 span {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}


/* =========================================================
   CANDIDATE V2 — residual fixes proven by DOM forensic
   2026-08-13
   ========================================================= */

@media screen and (max-width: 767px) {

    /*
     * 1. Video publication titles.
     *
     * Forensic:
     * h2#game_title    -> nowrap -> 384px
     * h2#project_title -> nowrap -> 1028px
     */

    h2#game_title,
    h2#project_title {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    h2#game_title a,
    h2#game_title span,
    h2#project_title a,
    h2#project_title span {
        white-space: normal !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }


    /*
     * 2. Legacy linked-game cards.
     *
     * Forensic showed:
     * div.gameslinked > div.text > h3
     * content width = 120px
     * padding-right = 120px
     * resulting border-box = 240px.
     */

    div.gameslinked div.text h3 {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    div.gameslinked div.text h3 a,
    div.gameslinked div.text h3 span {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }


    /*
     * 3. User-profile Yandex map.
     *
     * Actual markup contains:
     * <div id="map" style="width:460px;height:340px">
     *
     * Keep the map, only make its top-level viewport responsive.
     * Internal map tiles are intentionally positioned outside the
     * visible pane and are clipped by Yandex Maps itself.
     */

    #map {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #map > ymaps,
    #map > ymaps > ymaps {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /*
     * 4. Game-event / diary separators.
     *
     * Exact forensic markup:
     * border-bottom:1px solid #555;
     * margin:3px -16px 15px -22px;
     *
     * Do NOT modify arbitrary divs; restrict to game-events block
     * and this exact legacy separator signature.
     */

    [id$="_item_game_events"] .main >
    div[style*="border-bottom: 1px solid #555"][style*="margin: 3px -16px 15px -22px"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}