/* ========== DARK THEME — Steam-like (body.dark-theme) ========== */
body.dark-theme {
    background: #121212; /* основной фон */
    color: #c6c6c6;      /* основной текст */

}

/* Заголовки */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3 {
    color: #f5f5f5;
}

/* Ссылки */
body.dark-theme a {
    color: #b91616;
    text-decoration: none;
}
body.dark-theme a:hover {
    color: red;
}

/* Карточки новостей */
body.dark-theme .news-item,
body.dark-theme .news-full,  .p-comments {
    background: #1e1e1e;
    color: #c6c6c6;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

body.dark-theme .news-not-img {
    background: #1e1e1e;
}
body.dark-theme .news-text h2,
body.dark-theme .news-full .p-comments h1 {
    color: #f5f5f5;
}
body.dark-theme .news-text .meta,
body.dark-theme .news-full .p-comments .meta {
    color: #8a8a8a;
}
body.dark-theme .news-text a,
body.dark-theme .news-full .p-comments a {
    color: #66c0f4;
}
body.dark-theme .news-text a:hover,
body.dark-theme .news-full .p-comments a:hover {
    color: #a1d0ff;
}

/* Формы и поля ввода */
body.dark-theme form,
body.dark-theme .comment-form {
    background: #1e1e1e;
    color: #c6c6c6;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
body.dark-theme input,
body.dark-theme textarea {
    background: #2a2a2a;
    color: #c6c6c6;
    border: 1px solid #3c3c3c;
}

/* Кнопки */
body.dark-theme button,
body.dark-theme .add-btn {
    background: #2a2a2a;
    color: white;
    border-radius: 6px;

}
body.dark-theme button:hover,
body.dark-theme .add-btn:hover {
    background: #1b3d75;
}

/* Хедер */
body.dark-theme .site-header {
    background: #1e1e1e;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
body.dark-theme .logo {
    color: #f5f5f5;
}
body.dark-theme .icon-btn  {
    background: #2a2a2a;
    color: #c6c6c6;
}
body.dark-theme .icon-btn:hover  {
    background: #3c3c3c;
}

/* Комментарии */
body.dark-theme .comment-item {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    color: #c6c6c6;
}
body.dark-theme .comment-head strong {
    color: #f5f5f5;
}
body.dark-theme .comment-body {
    color: #c6c6c6;
}
body.dark-theme .comment-form button {
    background: #2a5caa;
}
body.dark-theme .comment-form button:hover {
    background: #1b3d75;
}
body.dark-theme .comment-date,
body.dark-theme .meta,
body.dark-theme .no-comments {
    color: #8a8a8a;
}

/* Loader */
body.dark-theme #loader {
    color: #8a8a8a;
}
/* ========== white THEME (body-theme) ========== */
body {
    font-family: 'Roboto', Arial, sans-serif;
    max-width: 450px;
    margin: 0 auto;
    padding: 10px;
    background: #f5f5f5;
    color: #333;
}
}
body a {
    color: #0077ff;
    text-decoration: none;
}
body a:hover {
    color: #3692fc;
    text-decoration: none;
}

.title {
    font-size: 2px; /* уменьшает текст до 10px */
    line-height: 12px; /* по желанию, чтобы текст не «сплющивался» */
}

.news-item {
display:flex; 
align-items:flex-start; 
background:white; 
padding:10px; 
margin-bottom:10px; 
border-radius:8px; 
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
.news-item img {
width:130px; 
height:100px; 
object-fit:cover; 
border-radius:5px; 
margin-right:10px;
}
.news-not-img{
    width:130px;
    height:100px;
    background:white;
    border-radius:5px;
    margin-right:10px;
}
.news-text {
flex:1;
}
.news-text h2 {
margin:0 0 5px; 
font-size:16px;
}
.news-text .meta {
color:#777; 
font-size:12px; 
margin-bottom:5px;
}
.news-text a {
color:rgb(65, 65, 65);
 text-decoration:none;
 }
.news-text a:hover {

text-decoration:none;
}
#loader {
text-align:center; 
padding:10px; 
color:#555;
}
.news-full {
    background: #ffffff;       /* светлый фон */
    color: #222222;            /* основной текст тёмный для хорошего контраста */
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.news-full .meta {
    color: #555555;            /* тёмнее для лучшего контраста */
    font-size: 12px;
    margin-bottom: 10px;
}

.news-full h1 {
    font-size: 20px;           /* чуть больше для заголовка */
    margin-bottom: 10px;
    color: #111111;            /* максимально контрастный заголовок */
}
.news-full img,
.news-full iframe,
.news-full video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius:5px; 
margin-bottom:10px;
}

form {
    background:white;
    padding:15px;
    border-radius:8px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
input, textarea {
    width:95%;
    padding:8px;
    border:1px solid #ccc;
    border-radius:5px;
}

/* ===== HEADER ===== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
}

.header-center {
    flex: 1;
    justify-content: center;
}

/* ====== Steam-like Mobile Logo — Game-Grab (mobile, strict) ====== */
.logo {
    display: flex;
    align-items: center;
    gap: 2px; /* очень тесно */
    
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px; /* уменьшено для плотности */
    font-size: 20px;
    text-decoration: none; /* убираем подчеркивание */
    transition: none; /* без hover эффекта */
}

/* Клевер */
.logo .clover {
    font-size: 22px;
    transform: translateY(-1px);
}

/* Текст */
.logo .text {
    font-size: 20px;
}

/* Акцент "-" */
.logo .text span {
    
    margin: 0 1px;
}

/* Цвета под темы */
/* Светлая тема */
body:not(.dark-theme) .logo {
    color: #222;
}

/* Тёмная тема */
body.dark-theme .logo {
    color: #f5f5f5;
}



.icon-btn {
    background: #f0f0f0;
    border: 0;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
}

.icon-btn:hover {
    background:#e2e2e2;
}

.add-btn {
    margin-right: 10px;
    background: #f0f0f0;
    padding: 7px 13px;
    color: rgb(105, 105, 105);
    font-size:20px;
    border-radius: 6px;
    text-decoration:none;
}

.add-btn:hover {
    background:#e2e2e2;
}
.comment-success {
    color: green;
    margin-bottom: 10px;
}

.comment-error {
    color: red;
    margin-bottom: 10px;
}



.comments h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
}

/* Форма */
.comment-form {
    margin-bottom: 15px;
}

.comment-form input,
.comment-form textarea {
    width: 95%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
}

.comment-form button {
    padding: 8px 15px;
    border: none;
    width: 50%;
    height: 40px;
    font-size: 15px;
    border-radius: 5px;
    background: #0056b3;  /* чуть темнее для большего контраста */
    color: #ffffff;       /* белый текст на тёмном фоне */
    font-weight: bold;    /* лучше читается */
    cursor: pointer;
    transition: background 0.3s ease;
}

.comment-form button:hover {
    background: #003f7f;  /* более тёмный синий при наведении */
}

/* Список комментариев */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment-item {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.comment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-head strong {
    color: #333;
}

.comment-date {
    color: #777;
    font-size: 12px;
}

.comment-body {
    margin-top: 5px;
    color: #333;
}

.no-comments {
    color: #333333;
}
.search-form {
    display: flex;
    gap: 6px;
    margin: 10px 0 20px;
}

.search-form input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #f7f7f7;
    background: white;
    color: #888;
    outline: none;
}

.search-form input::placeholder {
    color: #888;
}

.search-form button {
    padding: 0 14px;
    border-radius: 6px;
    border: none;
    background: #f0f0f0;
    color: rgb(105, 105, 105);
    cursor: pointer;
}