body {
background-color: #12181f;
color: #e2e8f0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
#app-container {
width: 100%;
max-width: 800px;
background: #1e293b;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.header-panel {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #334155;
padding-bottom: 15px;
margin-bottom: 20px;
}
.selectors {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
.selectors select {
background: #334155;
color: white;
border: 1px solid #475569;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
/* СТИЛИ ДЛЯ ВЫПАДАЮЩЕГО СПИСКА ТЕМ С ЧЕКБОКСАМИ */
.dropdown-checkbox-container {
position: relative;
width: 200px;
}
.dropdown-checkbox-trigger {
background: #334155;
color: white;
border: 1px solid #475569;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown-checkbox-content {
display: none;
position: absolute;
background: #1e293b;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
border: 1px solid #475569;
border-radius: 6px;
padding: 10px;
z-index: 50;
max-height: 250px;
overflow-y: auto;
}
.dropdown-checkbox-container.open .dropdown-checkbox-content {
display: block;
}
.theme-checkbox-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 4px;
cursor: pointer;
font-size: 13px;
border-bottom: 1px solid #334155;
}
.theme-checkbox-item:last-child {
border-bottom: none;
}
.theme-checkbox-item:hover {
background: #334155;
}
.theme-checkbox-item label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
width: 100%;
}
.theme-word-count {
color: #38bdf8;
font-size: 11px;
font-weight: bold;
background: #0f172a;
padding: 2px 6px;
border-radius: 10px;
margin-left: 5px;
}
/* ИГРОВАЯ ЗОНА И КАРТОЧКА СЛОВА */
#question-card {
background: #0f172a;
padding: 25px 30px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
#transcription-display {
font-size: 18px;
color: #94a3b8;
text-align: center;
min-height: 24px;
}
/* Служебная строка: ID и Динамик по центру */
.word-meta-row {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
width: 100%;
}
/* Строка слова: на всю ширину под длинные фразы */
.word-row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
text-align: center;
}
#word-to-guess {
font-size: 36px;
font-weight: 700;
color: #f1f5f9;
word-break: break-word;
line-height: 1.3;
}
.word-id-badge {
background: #334155;
color: #94a3b8;
font-size: 14px;
font-family: monospace;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}
.word-id-badge:hover {
background: #0284c7;
color: white;
}
.icon-btn {
background: #334155;
border: none;
color: white;
font-size: 22px;
padding: 6px 10px;
border-radius: 5px;
cursor: pointer;
transition: background 0.2s;
}
.icon-btn:hover { background: #475569; }
/* СЕТКА ВАРИАНТОВ ОТВЕТОВ */
.grid-8 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
@media(min-width: 600px) {
.grid-8 { grid-template-columns: repeat(4, 1fr); }
}
.option-btn {
background: #334155;
color: #f1f5f9;
border: 2px solid transparent;
padding: 15px 10px;
border-radius: 8px;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
word-break: break-word;
}
.option-btn:hover { background: #475569; }
.option-btn.empty-btn { background: #1e293b; border: 2px dashed #475569; color: #64748b; }
.option-btn.empty-btn:hover { border-color: #38bdf8; color: #38bdf8; }
.game-controls {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
.primary-btn, .secondary-btn, .save-session-btn, .danger-btn {
width: 100%;
padding: 12px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
border: none;
font-size: 16px;
}
.primary-btn { background: #0284c7; color: white; }
.primary-btn:hover { background: #0369a1; }
.secondary-btn { background: #475569; color: white; }
.secondary-btn:hover { background: #334155; }
.save-session-btn { background: #16a34a; color: white; }
.save-session-btn:hover { background: #15803d; }
.danger-btn { background: #dc2626; color: white; }
.danger-btn:hover { background: #b91c1c; }
/* ДНЕВНИК УСПЕВАЕМОСТИ И СЧЕТЧИКИ ВНИЗУ */
#diary-zone {
background: #0f172a;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 25px;
border-left: 4px solid #38bdf8;
}
#diary-zone h3 { margin: 0 0 10px 0; font-size: 16px; }
.diary-stats { display: flex; justify-content: space-between; font-size: 14px; color: #94a3b8; }
.diary-stats span { color: white; font-weight: bold; }
.diary-stats small { color: #64748b; margin-left: 5px; }
#database-zone {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media(min-width: 700px) {
#database-zone { grid-template-columns: 1fr 1fr; }
}
#add-word-zone, #file-zone {
background: #0f172a;
padding: 20px;
border-radius: 8px;
box-sizing: border-box;
}
#add-word-zone { border-top: 4px solid #0284c7; }
#file-zone { border-top: 4px solid #a855f7; }
.form-group input, .form-group textarea {
width: 100%;
box-sizing: border-box;
background: #1e293b;
border: 1px solid #334155;
color: white;
padding: 10px;
border-radius: 6px;
margin-bottom: 10px;
font-size: 14px;
}
.form-group textarea { height: 60px; resize: none; }
.file-buttons {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 25px;
}
.table-btn {
display: block;
text-align: center;
padding: 14px;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
font-size: 14px;
}
.get-btn { background: #16a34a; color: white; border: none; width: 100%; }
.get-btn:hover { background: #15803d; }
.load-btn { background: #ea580c; color: white; }
.load-btn:hover { background: #c2410c; }
/* МОДАЛЬНЫЕ ОКНА */
.modal {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
display: flex; justify-content: center; align-items: center;
z-index: 1000;
}
.modal.hidden { display: none; }
.modal-content {
background: #1e293b; padding: 25px; border-radius: 12px;
width: 90%; max-width: 550px; text-align: center;
}
.modal-content textarea {
width: 100%; height: 120px; box-sizing: border-box;
background: #0f172a; color: white; border: 1px solid #334155;
padding: 10px; border-radius: 6px; font-size: 15px; resize: none;
}
.char-count { text-align: right; color: #64748b; font-size: 12px; margin: 5px 0 15px; }
.modal-buttons { display: flex; gap: 10px; }