@font-face {
  font-family: 'Press Start 2P';
  src: url(fonts/PressStart2P-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
    --bg-dark: #2a3235;
    --bg-medium: #2c3539;
    --bg-light: #333c41;
    --accent-blue: #1e6c93;
    --text-color: #e0e0e0;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Animation for incorrect letter placement */
@keyframes flash-red {
    50% { background-color: #c94a4a; }
}

.invalid-placement {
    animation: flash-red 0.4s ease;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bg-dark);
  color: var(--text-color);
  font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
  font-size: 14px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Main container and logo */
.game-container {
    padding: 0 5px 5px;
    /* Styles for "sticky" footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

.content-wrapper {
    flex: 1 0 auto; /* Allows this block to grow to fill space */
}

.game-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    padding: 10px 0 10px;
    border-bottom: 3px solid var(--bg-light);
}

.game-header h1 {
    font-size: 5rem;
    color: var(--accent-blue);
    text-shadow: 5px 5px 0px var(--bg-medium);
    margin: 0;
    line-height: 1;
    border-bottom: none;
    margin-bottom: 10px;
}

/* User menu */
.user-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.8rem;
}

/* Music control button */
.music-control {
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-color);
    transition: color 0.2s;
}

.music-control:hover {
    color: var(--accent-blue);
}

.user-menu span {
    color: var(--text-color);
}

.btn-logout {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    padding: 8px 12px;
    background-color: var(--bg-light);
    color: var(--text-color);
    border: 2px solid var(--bg-medium);
    border-radius: 6px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s;
}
.btn-logout:hover {
    background-color: #c94a4a;
}

/* Game menu */
.game-nav {
    margin-top: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-link {
    font-family: 'Press Start 2P', monospace;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.nav-link:hover {
    color: var(--accent-blue);
}

.nav-link.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* Main content layout */
.main-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.game-area {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Make the container positioned for child absolute elements */
}

.sidebar {
    flex: 1.5;
}

#game-space {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Game field */
.word-display, #word-display-container {
    text-align: left;
    margin-bottom: 0; /* Margin is now controlled by the grid below */
    padding: 10px 20px;
    font-size: 1.5rem;
    background-color: var(--bg-medium);
    border-radius: 8px;
    min-height: 30px; /* Ensure consistent height */
    border: 3px solid var(--bg-light);
    font-family: 'Press Start 2P', monospace;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 15px;
}

.word-display.error, #word-display-container.error {
    animation: shake 0.5s ease-in-out;
    border-color: #c94a4a;
}

/* Label for "YOUR WORD:" */
.word-display-label {
    color: var(--accent-blue);
    margin-right: 15px;
}

/* The actual word being built by the player */
#current-word-display {
    color: var(--accent-blue);
    font-weight: bold;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.status-text {
    color: var(--accent-blue);
    font-weight: normal;
    width: 100%;
    text-align: center;
}

.word-char {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-light);
    border: 2px solid var(--accent-blue);
    border-radius: 4px;
    padding: 5px 10px;
    min-width: 25px;
    min-height: 35px;
    box-sizing: border-box;
}

.word-char-letter {
    font-size: 1.5rem;
    color: var(--text-color);
    min-width: 100px;
    display: inline-block;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    background-color: var(--bg-dark);
    padding: 10px;
    border: 3px solid var(--bg-light);
    border-radius: 8px;
    width: 100%;
    max-width: 350px;
    margin: 15px auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

.grid-cell {
    position: relative; /* Для абсолютного позиціонування номера */
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-light);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.5rem, 8vw, 3rem);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    user-select: none;
    box-sizing: border-box;
    border: 2px solid transparent;
}
.grid-cell:hover {
    background-color: #4a555c;
}
.grid-cell.fixed {
    background-color: var(--bg-medium);
    border-color: var(--accent-blue);
    cursor: default;
}

/* Style for a newly added letter (blue background, transparent border) */
.grid-cell.pinned {
    background-color: var(--accent-blue);
}

/* Style for letters that are part of a word (blue background, light border) */
.grid-cell.selected {
    background-color: var(--accent-blue);
    border-color: var(--text-color);
}

/* Style for successful word highlight */
.grid-cell.highlight-success {
    background-color: #5cb85c; /* Green */
    transition: background-color 0.3s ease-in-out;
}

/* Utility class to disable transitions during animations */
.grid-cell.no-transition {
    transition: none !important;
}

    /* Style for hint highlight (no transition to avoid glitches) */
    .grid-cell.highlight-hint {
        background-color: #17a2b8; /* Teal/Info color, same as hint button */
        color: #fff;
    }

/* Style for failed word highlight */
/* This is now handled in the "Player-specific highlight colors" section for consistency. */

/* Стиль для номерів літер у слові */
.word-order-number {
    display: none; /* Ховаємо номери за замовчуванням */
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 19px;
    height: 19px;
    background-color: #2a3235; /* Темний, як фон логотипу */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.7); /* Біла рамка для контрасту */
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    line-height: 17px; /* Вертикальне центрування тексту */
    z-index: 2;
    pointer-events: none; /* Щоб номер не заважав клікам по клітинці */
    user-select: none; /* Щоб не можна було виділити текст номера */
    box-sizing: border-box;
}

/* Показуємо номери тільки на клітинках, що є частиною слова, яке складається, або успішно складеного слова */
.grid-cell.selected .word-order-number,
    .grid-cell.highlight-success .word-order-number,
    .grid-cell.highlight-hint .word-order-number {
    display: block;
}

/* Buttons */
.btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: var(--text-color);
    padding: 15px 25px;
    border-radius: 6px;
    border: 3px solid var(--bg-light);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.1s ease-in-out;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}
.btn-submit {
    background-color: var(--accent-blue);
    border-color: #1b6286; /* Темніший відтінок для 3D ефекту */
}
.btn-submit:hover {
    background-color: #2a8bc7;
}
/* Class for secondary/neutral buttons */
.btn-secondary {
    background-color: var(--bg-light);
}
.btn-secondary:hover {
    background-color: #4a555c;
}
.btn.disabled,
.btn:disabled {
    background-color: var(--bg-light);
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none; /* Prevent clicks on disabled <a> tags */
}

/* Sidebar */
.panel {
    background-color: var(--bg-medium);
    border: 3px solid var(--bg-light);
    border-radius: 8px;
    padding: 15px;
}
.player-panel {
    display: flex;
    gap: 15px;
}

.player-info-column {
    flex: 1;
    box-sizing: border-box;
}
.player-info-column:first-of-type {
    padding-right: 15px;
    border-right: 2px solid var(--bg-light);
}
.player-panel h2 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--bg-light);
    color: var(--accent-blue);
}
.player-panel p {
    margin: 0 0 10px 0;
}
.player-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}
.player-panel li {
    padding: 3px 0;
}

/* Word definition panel */
.word-definition-panel {
    max-width: 900px;
    width: 100%;
    margin: 15px auto 0 auto;
    box-sizing: border-box;
    padding: 12px;
    background-color: var(--bg-dark);
    border: 2px solid var(--accent-blue);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.word-definition-panel h3 {
    font-size: 1.2rem;
    color: var(--accent-blue);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bg-light);
    display: flex;
    align-items: center;
}

.word-definition-panel h3::before {
    content: '\1F4D6';
    font-size: 1.5rem;
    margin-right: 10px;
    opacity: 0.8;
}

.word-definition-panel .word-title {
    color: var(--text-color);
    font-style: italic;
}

.word-definition-panel .definition-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    max-height: 120px;
    overflow-y: auto;
    padding-right: 10px;
    color: #c7c7c7;
}

/* --- Generic Content Box --- */
.content-box {
    background-color: var(--bg-medium);
    padding: 25px;
    border-radius: 8px;
    border: 3px solid var(--bg-light);
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* --- Feedback Page Container --- */
.feedback-container {
    max-width: 900px;
}

/* --- Feedback Page List --- */
.feedback-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.feedback-item {
    background-color: var(--bg-dark);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--bg-light);
    transition: border-color 0.2s;
}

.feedback-item.unread {
    border-left: 4px solid var(--accent-blue);
}

.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to top for better look with multiline subjects */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bg-light);
    font-size: 0.8rem;
    margin-bottom: 15px;
    color: #a0a0a0;
}

.feedback-author a,
.feedback-author a:visited {
    color: var(--accent-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-blue);
    transition: color 0.2s, border-color 0.2s;
}

.feedback-author a:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}

.feedback-subject {
    margin-bottom: 10px;
    font-size: 1.1rem;
    padding-bottom: 10px;
}

.feedback-message {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.6;
    margin-bottom: 15px;
}

.feedback-actions {
    text-align: right;
}

/* --- Page Title --- */
.page-title {
    font-size: 2rem;
    color: var(--accent-blue);
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--bg-light);
    text-align: center;
}

/* Style for the logo link */
.logo-link {
    text-decoration: none;
}

/* Profile page styles */
.profile-container {
    max-width: 700px;
}

.profile-details p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    line-height: 1.8;
}

.profile-details .label {
    color: var(--accent-blue);
    display: inline-block;
    width: 300px;
    font-weight: bold;
}

/* Rating page styles */
.rating-container {
    max-width: 900px;
}

.rating-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-family: 'Courier New', Courier, monospace;
}

.rating-table th,
.rating-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 2px solid var(--bg-light);
}

.rating-table thead th {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: var(--accent-blue);
}

.rating-table tbody tr:hover {
    background-color: var(--bg-light);
}

/* Letters panel style */
#letters-panel {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-medium);
    border: 3px solid var(--accent-blue);
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-radius: 8px;
    flex-direction: column;
    gap: 8px;
}

.letter-panel-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.letter-button {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    background-color: var(--bg-light);
    color: var(--text-color);
    border: 2px solid var(--bg-medium);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.letter-button:hover {
    background-color: var(--accent-blue);
}

/* Game timer styles */
.game-timer-panel {
    text-align: center;
    margin-bottom: 20px;
}

.game-timer-panel h3 {
    font-size: 1.2rem;
    font-family: 'Press Start 2P', monospace;
    color: var(--text-color);
    margin: 0 0 10px 0;
    font-weight: normal;
}

#timer-display {
    font-size: 1.8rem;
    font-family: 'Press Start 2P', monospace;
    color: var(--accent-blue);
}

/* Hint counter display in the sidebar */
.hint-display {
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--text-color);
}

/* Tooltip */
.word-tooltip-popup {
    position: absolute;
    z-index: 9999;
    background-color: var(--bg-dark);
    color: var(--text-color);
    border: 2px solid var(--accent-blue);
    border-radius: 6px;
    /* Збільшено відступи для кращої читабельності */
    padding: 12px;
    max-width: 280px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

/* Скидаємо вертикальні відступи для параграфів всередині підказки,
   щоб керувати простором тільки через padding самої підказки. */
.word-tooltip-popup p {
    margin: 0;
}

/* --- NEW: Styles for links inside tooltips --- */
.word-tooltip-popup a,
.word-tooltip-popup a:visited {
    color: var(--accent-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-blue);
    transition: color 0.2s, border-color 0.2s;
}
.word-tooltip-popup a:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}

.word-tooltip-popup.wide-tooltip {
    max-width: 450px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 15px; /* Збільшено для компенсації скролбару */
    pointer-events: auto;
}

.word-tooltip-popup::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 100%;
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--accent-blue) transparent transparent;
}

.word-tooltip-popup.tooltip-on-left::after {
    right: auto;
    left: 100%;
    border-color: transparent transparent transparent var(--accent-blue);
}

.word-tooltip-popup.wide-tooltip::after {
    top: 20px;
    margin-top: 0;
}

.word-tooltip-popup i,
.definition-text i {
    margin: 0 0.4em;
}

/* Rules page styles */
.rules-container {
    padding: 15px 20px;
    max-width: 900px;
}

.rules-container h2 {
    font-size: 1.5rem;
    color: var(--accent-blue);
    margin-top: 20px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-medium);
}

.rules-container p,
.rules-container li {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

/* --- REFACTORED: Use standard list styles for better readability --- */
/* Ordered list (for main rules) */
.rules-container ol {
    list-style-type: none; /* Remove numbers as requested */
    padding-left: 0;       /* Remove default list padding */
}

.rules-container ol li {
    padding-left: 0; /* Remove indent as requested */
    margin-bottom: 12px;
}

/* Unordered list (for bot difficulty, etc.) */
.rules-container ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: 20px; /* Indent for custom bullets */
}

.rules-container ul li::before {
    content: "•"; /* Use a standard bullet character */
    color: var(--accent-blue);
    display: inline-block;
    width: 1em;
    margin-left: -1em; /* Pull the bullet back into the padding area */
}

/* --- Dictionary Manager Styles --- */
.word-table tbody td:nth-child(2) {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
    vertical-align: top; /* Align text to the top for long explanations */
    word-wrap: break-word; /* Ensure long words without spaces wrap */
}

/* Spinner for the "Checking word..." text */
#turn-indicator .spinner {
    /*
    The spinner is now a flex item. Its space is always reserved,
    and it's hidden with `visibility: hidden` via JS when not needed.
    This prevents any layout shift when the status changes.
    */
    width: 1.2em;
    height: 1.2em;
    border: 0.25em solid rgba(224, 224, 224, 0.3); /* Lighter track */
    border-left-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0; /* Prevent the spinner from shrinking */
}

/* Logout page styles */
.logout-container p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 25px 0;
    text-align: center;
}

.profile-container p a {
    color: var(--accent-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-blue);
    transition: color 0.2s, border-color 0.2s;
}
.profile-container p a:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}

.profile-container .secondaryAction {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 1px dotted var(--text-color);
    padding-bottom: 2px;
}
.profile-container .secondaryAction:hover {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* Style for "Remember me" field */
.form-field-remember {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 20px 0;
    font-family: 'Courier New', Courier, monospace;
}

.form-field-remember label {
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.form-field-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Style for individual field errors */
.field-error {
    color: #c94a4a;
    font-size: 0.8rem;
    margin-top: 5px;
    display: block;
}

/* Social login */
.social-login-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--bg-light);
    background-color: var(--bg-light);
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

.btn-social:hover {
    background-color: var(--bg-medium);
    border-color: var(--accent-blue);
}

.btn-social i {
    font-size: 1.2rem;
    width: 30px;
    text-align: center;
    margin-right: 10px;
}

.btn-facebook i {
    color: #1877F2;
}

.btn-google i {
    color: #DB4437;
}

/* Auth forms container */
.auth-container {
    max-width: 500px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.auth-container > * {
    width: 100%; /* Переконуємось, що дочірні елементи займають всю ширину контейнера */
}

.auth-prompt {
    text-align: center;
    margin-bottom: 0;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.6;
}

.auth-prompt a,
.auth-prompt a:visited {
    color: var(--accent-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-blue);
    transition: color 0.2s, border-color 0.2s;
}

.auth-prompt a:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}

/* --- Feedback prompt on index page --- */
.feedback-prompt {
    text-align: center;
    margin-top: 30px;
    font-family: 'Courier New', Courier, monospace;
}

.feedback-prompt a,
.feedback-prompt a:visited {
    color: var(--accent-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-blue);
    transition: color 0.2s, border-color 0.2s;
}
.feedback-prompt a:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}

/* Standard form styles */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: normal;
    font-size: 0.9rem;
    font-family: 'Press Start 2P', monospace;
    color: var(--accent-blue);
}

/* Загальний стиль для текстових полів вводу у формах */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--bg-light);
    background-color: var(--bg-light);
    color: var(--text-color);
    font-family: 'Press Start 2P', monospace; /* Додано для консистентності */
    font-size: 1rem;
    transition: border-color 0.2s;
    box-sizing: border-box; /* FIX: Включаємо відступи в загальну ширину елемента */
}

/* Загальний стиль для фокусу на полях вводу */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-group input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.form-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    width: 100%;
    justify-content: flex-start; /* Default alignment: left */
}

/* Container for hint button and counter */
.hint-control-group {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-color);
}

.justify-center {
    justify-content: center;
}

/* Стиль для вторинних посилань у формах (напр. "Забули пароль?") */
.form-controls .secondaryAction {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 1px dotted var(--text-color);
    padding-bottom: 2px;
}

.form-controls .secondaryAction:hover {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* "or" divider */
.login-or {
    text-align: center;
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    color: #a0a0a0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.login-or::before,
.login-or::after {
    content: '';
    flex-grow: 1;
    height: 2px;
    background-color: var(--bg-light);
}

/* Form errors block */
.form-errors {
    background-color: #a94442;
    color: white;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
}

.form-errors p {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.modal-window h1 {
    font-size: 1.6rem;
    color: var(--accent-blue);
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: normal;
    line-height: 1.4;
    transition: font-size 0.2s ease-in-out;
    /* Додаємо симетричні відступи, щоб текст не заходив під кнопку закриття і залишався по центру */
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.modal-window #game-over-message {
    font-size: 2rem;
    line-height: 1.8;
    margin: 25px 0;
    color: var(--text-color);
}

.modal-window #game-over-message .final-score-text {
    font-size: 1.5rem; /* Робимо меншим, як на сторінці результатів */
    line-height: 1.6;
}

/* Таблиця з фінальним рахунком у модальному вікні */
.final-score-table {
    width: 90%;
    margin: 25px auto 0;
    border-collapse: collapse;
    text-align: center;
}

.final-score-table .player-name-cell {
    font-size: 1.1rem;
    padding-bottom: 15px;
    color: var(--text-color);
    width: 50%;
    border-bottom: 2px solid var(--bg-light);
}

.final-score-table .score-cell {
    font-size: 2rem;
    font-size: 2.5rem;
    padding-top: 15px;
    color: var(--accent-blue);
    font-weight: bold;
}

/* Скидаємо індивідуальні стилі для очок всередині таблиці, щоб вони успадковували стиль від комірки */
.final-score-table .score-value {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* --- Уніфіковані стилі модальних вікон --- */
.modal-overlay {
    display: none; /* Hidden by default, controlled by JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000; /* High z-index for consistency */
}

.modal-window {
    display: none; /* Hidden by default, controlled by JS */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001; /* Above the overlay */

    background-color: var(--bg-medium);
    padding: 25px 30px;
    border-radius: 8px;
    border: 3px solid var(--bg-light);
    width: 90%;
    max-width: 500px;
    max-height: 90vh; /* Good for responsiveness */
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    overflow-y: auto; /* Allow scrolling for tall content */
}

/* Універсальна кнопка закриття для модальних вікон */
.modal-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 2rem; /* Зроблено більшим для кращої видимості */
    font-weight: bold;
    color: #a0a0a0;
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.2s;
    padding: 5px;
    line-height: 1;
    z-index: 10; /* Переконатись, що кнопка над контентом */
}
.modal-close-btn:hover {
    color: #fff;
}

/* Styles for custom scrollbars */
/* For WebKit-based browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-radius: 4px;
    border: 1px solid var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg-light);
    border-radius: 4px;
    border: 2px solid var(--bg-dark);
    transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-blue);
}

/* For Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) var(--bg-dark); /* thumb_color track_color */
}

/* Adaptive behaviour for mobile devices */
@media (max-width: 768px) {
    .game-header {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }

    .user-menu {
        position: static;
        order: 1;
        width: 100%;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

    .logo-link { order: 2; }

    .game-nav {
        order: 3;
        flex-direction: column;
        gap: 15px;
    }
}

/* --- Lobby Styles --- */
.lobby-container {
    max-width: 700px;
    text-align: center;
}

.lobby-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.lobby-container p {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.6;
    margin-bottom: 30px;
}

.lobby-container .login-or {
    margin: -10px auto 10px auto;
}

.btn-pink {
    background-color: #FFB6C1; /* Light Pink */
    border-color: #FFB6C1;
    color: #2a3235; /* Темний текст для кращої читабельності */
}
.btn-pink:hover {
    background-color: #ff9aab;
    border-color: #ff9aab;
    color: #2a3235;
}
.btn-info {
    background-color: #17a2b8; /* Teal/Info color */
    border-color: #138496; /* Darker shade for 3D effect */
    color: #fff;
}
.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}
.btn-success {
    background-color: #28a745; /* Насичений зелений */
    border-color: #218838; /* Темніший для 3D ефекту */
    color: #fff;
}
.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
.btn-warning {
    background-color: #ffc107;
    border-color: #e0a800;
    color: #000; /* Чорний текст для кращого контрасту на жовтому */
}
.btn-warning:hover {
    background-color: #ec971f;
    border-color: #d58512;
    color: #000;
}
.btn-danger {
    background-color: #dc3545;
    border-color: #c82333;
    color: #fff;
}
.btn-danger:hover {
    background-color: #c9302c;
    border-color: #ac2525;
}
#player-list-container {
    margin-bottom: 20px;
    min-height: 200px; /* Зробили блок більшим */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
}
#player-list-container h2 {
    font-size: 1.2rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bg-light);
    text-align: center; /* Центруємо заголовок по горизонталі */
    margin-bottom: 15px;
    margin-top: 0;
}
#player-list {
    flex-grow: 1; /* Дозволяє списку заповнити весь доступний простір */
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}
.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--bg-light);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
}
.player-item:last-child {
    border-bottom: none;
}

.btn-invite {
    font-size: 0.8rem;
    padding: 8px 12px;
    background-color: var(--accent-blue);
    border: none;
}
.btn-invite:hover {
    background-color: #2a8bc7;
}
.btn-invite:disabled {
    background-color: var(--bg-light);
    cursor: not-allowed;
}
.no-players {
    flex-grow: 1; /* Дозволяє тексту "Очікування" заповнити простір */
    display: flex;
    justify-content: center; /* і центруватися по вертикалі та горизонталі */
    align-items: center;
    color: #888;
}
/* For the error message in the lobby */
.no-players.error {
    color: #c94a4a;
    font-family: 'Courier New', Courier, monospace;
}

/* Styles for the bot difficulty modal */
#bot-difficulty-modal {
    width: auto; /* Allow the modal to shrink if needed */
    min-width: 440px; /* Adjusted min-width for three buttons */
    max-width: 90%;
}
.difficulty-buttons {
    gap: 10px;
    flex-wrap: wrap; /* Allow wrapping on very small screens */
}

/* --- Privacy Policy Page --- */
.privacy-policy-container {
    padding: 30px;
    max-width: 800px; /* Increased width for better readability */
}
.privacy-policy-container h2 {
    font-size: 1.5rem;
    color: var(--accent-blue);
    margin-top: 25px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-light);
}

/*
 * Switched to a more readable font for the main text, similar to other text-heavy pages.
*/
.privacy-policy-container p,
.privacy-policy-container li {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
}

.privacy-policy-container ul {
    list-style-type: disc;
    padding-left: 30px;
}

/* Game result page styles */
.result-container {
    max-width: 700px;
    text-align: center;
}

.result-container .winner-message {
    color: var(--text-color);
    font-size: 2rem;
    margin: 30px 0;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.winner-name {
    font-size: 2.8rem;
    color: var(--accent-blue);
}

.score-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-blue);
}

/* --- NEW: Note for bot score multiplier on results page --- */
.score-multiplier-note {
    display: block;
    font-size: 1rem; /* Made it a bit larger to be readable */
    font-family: 'Courier New', Courier, monospace;
    color: #a0a0a0;
    font-style: italic;
    margin-top: 5px;
}

.result-container .result-players {
    text-align: left;
    max-width: 100%;
    margin: 25px auto;
    justify-content: space-around;
}

.result-container .result-players ul {
    /* Збільшуємо висоту списків слів на сторінці результатів */
    max-height: 400px;
    margin-top: 15px; /* Додаємо відступ зверху, оскільки заголовок h2 видалено */
    text-align: center;
}

.result-container .controls {
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 15px;
}

/* Footer */
.page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 3px solid var(--bg-light);
    font-size: 0.7rem;
    color: #a0a0a0;
    flex-shrink: 0;
}

.page-footer p { margin: 0; }

.page-footer .designer-name {
    color: var(--text-color);
}

.page-footer a {
    color: var(--text-color);
    text-decoration: none;
}

.page-footer a:hover {
    color: var(--accent-blue);
}

.highlight-hover {
    background-color: rgba(255, 255, 0, 0.6) !important; /* Напівпрозорий жовтий */
    transition: background-color 0.15s ease-in-out;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Player-specific highlight colors --- */

/* Player 1 (Balanced Green) */
.grid-cell.highlight-success.highlight-p1,
.grid-cell.highlight-hover.highlight-p1 {
    background-color: #43A047 !important;
    color: white;
    border: 2px solid #388E3C !important;
}

/* Player 2 (Balanced Blue) */
.grid-cell.highlight-success.highlight-p2,
.grid-cell.highlight-hover.highlight-p2 {
    background-color: #1E88E5 !important;
    color: white;
    border: 2px solid #1976D2 !important;
}

/* Error Highlight (Strong Red) */
.grid-cell.highlight-error {
    background-color: #E53935 !important;
    color: white;
    border: 2px solid #D32F2F !important;
}

/* Спеціальний стиль для доданої літери під час помилки */
.grid-cell.pinned.highlight-error {
    /* Зберігаємо синій фон, але додаємо червону рамку та анімацію */
    background-color: var(--accent-blue) !important;
    border-color: #E53935 !important;
    animation: shake 0.5s ease-in-out;
}

/* Player name background colors */
#player1-username {
    background-color: #43A047;
    color: white;
    padding: 8px;
    border-radius: 4px;
    border-bottom: none;
}

#player2-username {
    background-color: #1E88E5;
    color: white;
    padding: 8px;
    border-radius: 4px;
    border-bottom: none;
}

/* --- Spinner Styles --- */

/* Spinner for the global loading overlay */
#global-spinner-overlay {
    z-index: 9999;
    background-color: transparent;
    pointer-events: none;
}

#global-spinner-overlay .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px; /* Center it */
    border: 5px solid rgba(224, 224, 224, 0.3); /* Lighter track */
    border-left-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner for inline use, e.g., in modal titles */
.spinner-inline {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0.2em solid rgba(224, 224, 224, 0.3);
    border-left-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: -0.15em; /* Align better with text */
    margin-left: 0.5em;
}