#game_flash{
  max-width: 920px !important;   /* или 720 */
  width: 100% !important;
  margin: 0 auto;
}

#game_flash iframe{
  width: 100% !important;
  min-height: 540px !important;      /* добавь */
  height: 70vh !important;/* вместо фикс 700px лучше так */
  max-height: 900px;
  display:block;
  border:0;
}

        :root {
            /* === ПАЛИТРА === */
            --bg-base: #f0f8ff;
            --bg-gradient: linear-gradient(180deg, #e6f7ff 0%, #f0f8ff 100%);
            
            --primary: #2563eb;       
            --primary-hover: #1d4ed8;
            --accent: #ff4757;        
            --star-color: #fbbf24;    
            
            --text-main: #0f172a;
            --text-muted: #475569;
            
            --card-bg: #ffffff;
            --radius: 20px;
            
            --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
            
            --font-logo: var(--font-main);

            --font-main: 'Nunito', sans-serif;
        }

        /* 1. БАЗОВЫЕ СТИЛИ (КРУПНЫЙ ШРИФТ) */
        body {
            margin: 0;
            font-family: var(--font-main);
            font-size: 19px;
            line-height: 1.6;
            color: var(--text-main);
            background: var(--bg-base);
            background-image: var(--bg-gradient);
            min-height: 100vh;
        }

        * { box-sizing: border-box; }
        a { text-decoration: none; color: inherit; transition: 0.2s; }
        img { display: block; max-width: 100%; }
        button { font-family: inherit; }
        h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -0.01em; }

        /* ФОН: ПУЗЫРИ */
        .bubbles-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
        .bubble { position: absolute; bottom: -150px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(37, 99, 235, 0.2)); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15); animation: floatUp infinite ease-in; }
        .b1 { width: 90px; height: 90px; left: 10%; animation-duration: 9s; }
        .b2 { width: 60px; height: 60px; left: 25%; animation-duration: 12s; animation-delay: 1s; }
        .b3 { width: 120px; height: 120px; left: 70%; animation-duration: 15s; animation-delay: 2s; }
        .b4 { width: 50px; height: 50px; left: 85%; animation-duration: 10s; }
        @keyframes floatUp { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-120vh) scale(1.1); opacity: 0; } }

        /* ШАПКА */
        .header {
            /*position: sticky; */ top: 0; z-index: 100;
            background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.06);
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
        }
        .container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
        .header__inner { display: flex; justify-content: space-between; align-items: center; height: 85px; }

        /* ЛОГОТИП */
        .logo { display: flex; align-items: center; gap: 16px; font-family: var(--font-logo); font-size: 38px; font-weight: 1000; color: var(--text-main); }
        .logo span { color: var(--primary); }
        .bounce-anim { display: flex; gap: 6px; padding-top: 8px; }
        .ball { width: 16px; height: 16px; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
        .ball:nth-child(1) { background: #ff4757; animation-delay: -0.32s; }
        .ball:nth-child(2) { background: #ffa502; animation-delay: -0.16s; }
        .ball:nth-child(3) { background: #2ed573; }
        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

        /* ПАНЕЛЬ УПРАВЛЕНИЯ В ШАПКЕ */
        .controls { display: flex; align-items: center; gap: 15px; }
        
        .search-wrap { display: none; position: relative; }
        .search-inp { padding: 12px 20px 12px 45px; border-radius: 30px; border: 2px solid #e2e8f0; background: #f8fafc; font-size: 17px; width: 250px; outline: none; transition: 0.2s; }
        .search-inp:focus { border-color: var(--primary); background: #fff; }
        .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 22px; opacity: 0.5; }

        /* Кнопка Случайная */
        .btn-rand {
            background: #ecfdf5; color: #10b981; padding: 10px 20px; border-radius: 30px;
            font-weight: 800; font-size: 17px; border: 1px solid #d1fae5; cursor: pointer;
            display: flex; align-items: center; gap: 8px; transition: 0.2s; white-space: nowrap;
        }
        .btn-rand:hover { background: #10b981; color: #fff; transform: translateY(-2px); }

        /* Кнопка Избранное */
        .btn-star {
            width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--star-color);
            background: #fff; color: var(--star-color); font-size: 28px; cursor: pointer;
            display: flex; align-items: center; justify-content: center; transition: 0.2s;
        }
        .btn-star:hover { background: var(--star-color); color: #fff; transform: scale(1.1); }

        .burger { display: none; background: none; border: none; font-size: 34px; cursor: pointer; margin-left: 5px; }
        @media (min-width: 900px) { .search-wrap { display: block; } }

        /* MAIN CONTENT */
        .main { padding: 50px 0; }
        .sec-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 30px; }
        .sec-title { font-size: 36px; color: var(--text-main); line-height: 1.2; }
        .sec-count { font-size: 20px; color: var(--text-muted); font-weight: 700; }

        /* ХИТЫ НЕДЕЛИ */
        .hits-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px; margin-bottom: 70px; }
        .hit-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); transition: 0.3s; position: relative; border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
        .hit-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--primary); }

        /* Высокие картинки */
        .hit-img-wrap { width: 100%; height: 180px; position: relative; overflow: hidden; background: #f1f5f9; }
        .hit-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
        .hit-card:hover .hit-img { transform: scale(1.1); }
        
        .hit-info { padding: 20px 10px; text-align: center; background: #fff; flex-grow: 1; display: flex; align-items: center; justify-content: center; }
        .hit-title { font-size: 20px; font-weight: 800; color: var(--text-main); line-height: 1.3; }
        
        .badge { position: absolute; top: 12px; left: 12px; padding: 6px 14px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 800; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 2; }

        /* === МОНИТОР (УМНЫЙ FULLSCREEN) === */
        .monitor-container { 
            position: relative; 
            background: #fff; padding: 15px; border-radius: 28px;
            box-shadow: 0 20px 60px -10px rgba(37, 99, 235, 0.2); border: 1px solid #cbd5e1;
            margin-bottom: 80px; 
            transition: all 0.3s ease;
        }

        /* Стиль для режима "На весь экран" */
        .monitor-container.fullscreen-active {
            position: fixed !important; top: 0; left: 0; width: 100% !important; height: 100% !important;
            z-index: 99999; padding: 0; border-radius: 0; border: none; margin: 0;
            background: #000; /* ЧЕРНЫЙ ФОН (КИНОТЕАТР) */
            display: flex; flex-direction: column;
        }
        
        /* В фуллскрине экран игры растягивается */
        .monitor-container.fullscreen-active .monitor-screen {
            border-radius: 0; flex-grow: 1; height: auto; background: #000;
        }
        
        /* Панель в фуллскрине */
        .monitor-container.fullscreen-active .monitor-bar {
            background: #111; color: #fff; padding: 10px 20px; border-top: 1px solid #333;
        }
        .monitor-container.fullscreen-active .game-name-txt { color: #fff; }
        .monitor-container.fullscreen-active .monitor-btn {
            background: #dc2626; /* Красная кнопка выхода */
            color: #fff;
        }

        .monitor-screen { width: 100%; min-height: 70vh !important; border-radius: 20px; overflow: hidden; text-align: center }
        .monitor-screen iframe { width: 100%; min-height: 70vh !important; height: 100%; border: none; text-align: center}
        
        .monitor-bar { padding: 20px 10px 5px; display: flex; justify-content: space-between; align-items: center; }
        .game-name-txt { font-size: 22px; font-weight: 800; color: var(--text-main); }
        
        .monitor-btn { 
            background: var(--primary); color: #fff; padding: 12px 30px; border-radius: 40px; 
            font-weight: 700; font-size: 18px; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); 
            cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 8px; 
        }
        .monitor-btn:hover { background: var(--primary-hover); transform: translateY(-2px); }

        /* СЕТКА ИГР */
        .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px; }
        .game-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); transition: 0.3s; border: 1px solid #f1f5f9; display: block; }
        .game-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
        
        .gc-img-box { width: 100%; aspect-ratio: 4/3; background: #eee; position: relative; }
        .gc-img { width: 100%; height: 100%; object-fit: cover; }
        
        .gc-info { padding: 20px; text-align: center; }
        .gc-title { font-size: 20px; font-weight: 800; color: var(--text-main); margin-bottom: 10px; }
        
        /* КРУПНЫЙ РЕЙТИНГ */
        .gc-rating { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-muted); }
        .stars { color: var(--star-color); font-size: 24px; letter-spacing: -2px; line-height: 1; }

        /* ОПИСАНИЕ САЙТА */
        .seo-box { background: #fff; border-radius: 28px; padding: 60px; margin-top: 100px; box-shadow: var(--shadow-card); border: 1px solid #e2e8f0; }
        .seo-box h2 { font-size: 32px; margin-bottom: 25px; color: var(--text-main); }
        .seo-box p { font-size: 19px; line-height: 1.8; color: var(--text-muted); margin-bottom: 40px; }
        
        .faq-item { border-bottom: 1px solid #f1f5f9; margin-bottom: 15px; }
        .faq-sum { padding: 20px 0; font-weight: 800; font-size: 22px; cursor: pointer; display: flex; justify-content: space-between; list-style: none; }
        .faq-sum::-webkit-details-marker { display: none; }
        .faq-sum::after { content: '+'; color: var(--primary); font-size: 30px; font-weight: 400; }
        details[open] .faq-sum::after { content: '−'; }
        details[open] p { margin-top: 0; }

        /* ФУТЕР (РАСШИРЕННЫЙ) */
        .footer { background: #fff; border-top: 1px solid #cbd5e1; margin-top: 100px; padding-top: 80px; font-size: 18px; }
        .ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
        .ft-col h3 { font-size: 24px; margin-bottom: 30px; }
        .ft-list li { margin-bottom: 15px; }
        .ft-list a { font-size: 18px; color: var(--text-muted); font-weight: 600; }
        .ft-list a:hover { color: var(--primary); text-decoration: underline; }
        .ft-bottom { border-top: 1px solid #f1f5f9; padding: 30px 0; text-align: center; color: #94a3b8; font-size: 16px; }

        /* MODAL */
        .modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
        .modal.active { display: flex; }
        .modal-box { background: #fff; padding: 50px; border-radius: 28px; text-align: center; width: 90%; max-width: 450px; animation: popIn 0.3s; }
        @keyframes popIn { from{transform:scale(0.8);opacity:0;}to{transform:scale(1);opacity:1;} }

        /* АДАПТИВНОСТЬ */
        @media (max-width: 1000px) {
            .hits-grid { grid-template-columns: repeat(3, 1fr); }
            .ft-grid { grid-template-columns: 1fr; gap: 40px; }
        }
        @media (max-width: 600px) {
            .hits-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
            .hit-img-wrap { height: 140px; }
            .games-grid { grid-template-columns: repeat(1, 1fr); gap: 20px; } 
            .btn-rand span { display: none; } 
            .btn-rand { padding: 12px; border-radius: 50%; }
            .burger { display: block; }
            .logo { font-size: 24px; }
            .monitor-screen { height: 350px; }
            .seo-box { padding: 30px; }
            .search-wrap { display: none; }
        }



         /* ОДНА ПАНЕЛЬ: рейтинг + fullscreen в один ряд и по центру */
.monitor-bar.monitor-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding: 18px 10px 12px;
  flex-wrap:wrap;
}

/* число рейтинга */
#rating-val{
  font-weight: 900;
  font-size: 20px;
  color: var(--text-main);
  min-width: 44px;
  text-align: left;
}

/* кнопки рейтинга (как у тебя) */
.rating-container{
  display:flex;
  align-items:center;
  background: transparent;
  padding: 0;
  gap: 10px;
}

.rate-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#f1f3f4;
  border-radius:8px;
  padding:10px 14px;
  border:none;
  cursor:pointer;
  color:#5f6368;
  transition: background-color .2s;
}
.rate-btn:hover{ background-color:#e2e5e9; }

.rate-btn svg{
  width:24px;
  height:24px;
  display:block;
  pointer-events:none;
} 
/* выбранная кнопка */
.rate-btn.chosen[data-vote="1"]{
  background:#d4edda !important;
  color:#14532d !important;
}
.rate-btn.chosen[data-vote="-1"]{
  background:#f8d7da !important;
  color:#7f1d1d !important;
}


/* В fullscreen режиме сделаем читаемым рейтинг */
.monitor-container.fullscreen-active #rating-val{ color:#fff; }
.monitor-container.fullscreen-active .rate-btn{
  background:#222;
  color:#ddd;
}
.monitor-container.fullscreen-active .rate-btn:hover{
  background:#333;
}




/* ===== FULLSCREEN: #game_flash занимает весь экран ===== */

/* modern */
#game_flash:fullscreen{
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  background: #000 !important;
}

/* Safari */
#game_flash:-webkit-full-screen{
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  background: #000 !important;
}

/* old Edge/IE */
#game_flash:-ms-fullscreen{
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  background: #000 !important;
}

/* Растягиваем содержимое игры на 100% высоты fullscreen */
#game_flash:fullscreen iframe,
#game_flash:fullscreen embed,
#game_flash:fullscreen object{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  border: 0 !important;
}

#game_flash:-webkit-full-screen iframe,
#game_flash:-webkit-full-screen embed,
#game_flash:-webkit-full-screen object{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  border: 0 !important;
}

#game_flash:-ms-fullscreen iframe,
#game_flash:-ms-fullscreen embed,
#game_flash:-ms-fullscreen object{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  border: 0 !important;
}


/* запрет прокрутки страницы, когда fullscreen-active */
html.no-scroll, body.no-scroll {
  overflow: hidden !important;
}

/* === FULLSCREEN: скрыть заголовки/название и оставить только кнопки снизу === */
.monitor-container.fullscreen-active .page-article__title-h1,
.monitor-container.fullscreen-active .game-name-txt,
.monitor-container.fullscreen-active .game-description{
  display: none !important;
}

/* Чёрный фон в fullscreen (перебиваем твои white !important) */
.monitor-container.fullscreen-active,
.monitor-container.fullscreen-active .monitor-screen,
.monitor-container.fullscreen-active #game_flash{
  background: #000 !important;
  background-color: #000 !important;
}

/* Убираем ограничения и растягиваем контейнер игры */
.monitor-container.fullscreen-active #game_flash{
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;

  display: flex !important;
  flex: 1 1 auto !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 0 !important;
}

/* Растянуть iframe/embed на весь экран */
.monitor-container.fullscreen-active #game_flash iframe,
.monitor-container.fullscreen-active #game_flash embed,
.monitor-container.fullscreen-active #game_flash object{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
}

/* Панель снизу остаётся (рейтинг + кнопка выхода), фон чёрный */
.monitor-container.fullscreen-active .monitor-bar{
  background: #111 !important;
  color: #fff !important;
}

/* ===== helpers ===== */
.no-scroll{
  overflow: hidden !important;
  height: 100% !important;
}

/* ===== FULLSCREEN: гарантируем нижнюю черную панель + игра занимает всё ===== */
.monitor-container.fullscreen-active{
  background: #000 !important;
}

/* прячем заголовок игры в fullscreen (он и давал “название слева/сверху”) */
.monitor-container.fullscreen-active .monitor-screen h1,
.monitor-container.fullscreen-active .page-article__title-h1{
  display: none !important;
}

/* monitor-screen должен уметь СЖИМАТЬСЯ, иначе выталкивает панель вниз */
.monitor-container.fullscreen-active .monitor-screen{
  flex: 1 1 auto !important;
  min-height: 0 !important;     /* критично */
  height: auto !important;
  border-radius: 0 !important;
  background: #000 !important;
  display: flex !important;
}

/* контейнер игры тоже делаем*
/* ===== helpers ===== */
.no-scroll{
  overflow: hidden !important;
  height: 100% !important;
}

/* ===== FULLSCREEN: гарантируем нижнюю черную панель + игра занимает всё ===== */
.monitor-container.fullscreen-active{
  background: #000 !important;
}

/* прячем заголовок игры в fullscreen (он и давал “название слева/сверху”) */
.monitor-container.fullscreen-active .monitor-screen h1,
.monitor-container.fullscreen-active .page-article__title-h1{
  display: none !important;
}

/* monitor-screen должен уметь СЖИМАТЬСЯ, иначе выталкивает панель вниз */
.monitor-container.fullscreen-active .monitor-screen{
  flex: 1 1 auto !important;
  min-height: 0 !important;     /* критично */
  height: auto !important;
  border-radius: 0 !important;
  background: #000 !important;
  display: flex !important;
}

/* контейнер игры тоже делаем “растягиваемым” */
.monitor-container.fullscreen-active #game_flash{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;

  flex: 1 1 auto !important;
  min-height: 0 !important;     /* критично */
  height: 100% !important;

  display: flex !important;
  align-items: stretch !important;
}

/* самое важное — убиваем твои 70vh / 540px / 900px именно в fullscreen */
.monitor-container.fullscreen-active #game_flash iframe,
.monitor-container.fullscreen-active #game_flash embed,
.monitor-container.fullscreen-active #game_flash object{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;     /* критично */
  max-height: none !important;
  border: 0 !important;
  display: block !important;
}

/* нижняя панель всегда видна + поверх iframe */
.monitor-container.fullscreen-active .monitor-bar.monitor-actions{
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 100000 !important;

  background: #111 !important;
  color: #fff !important;
  border-top: 1px solid #333 !important;

  padding: 12px 16px !important;
  margin: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
}