/* Custom styles to override or enhance Tailwind */

@font-face {
    font-family: 'Antenna';
    src: url('./fonts/Antenna-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'Antenna', sans-serif;
    background-color: #FFF5F6; /* Light blue-gray background */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Smanjen padding za mobilne telefone */
}

#app-container {
    background-color: #ffffff;
    border-radius: 1.5rem; /* More rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 1rem; /* Smanjen padding za mobilne telefone */
    max-width: 95%; /* Veća maksimalna širina na manjim ekranima */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    color: #ED1A3B; /* Darker blue for headings */
    margin-bottom: 1rem; /* Smanjen margin-bottom */
    font-size: clamp(1.5rem, 3.5vw, 2.5vw)!important; /* Responzivna veličina fonta */
    font-weight: 700 !important;
    text-align: center;
}

#crossword-grid {
    display: grid;
    /* Koristimo minmax za fleksibilnije kolone koje se smanjuju i šire */
    grid-template-columns: repeat(16, minmax(20px, 1fr)); /* 15 kolona, min 20px po ćeliji */
    grid-template-rows: repeat(12, minmax(20px, 1fr));    /* 12 redova, min 20px po ćeliji */
    border: 2px solid #d51735; /* Lighter gray border */
    /* Max širina mreže, koristi min() da se prilagodi ekranu */
    max-width: min(800px, 95vw); /* Maksimalno 600px ili 95% širine viewporta */
    width: 100%; /* Osigurava da zauzima punu širinu kontejnera do max-width */
    margin-bottom: 1.5rem; /* Smanjen margin-bottom */
    background-color: #4a5568; /* Light green background for grid as requested */
    position: relative; /* Needed for absolute positioning of image wrappers and tooltips */
    /* aspect-ratio na nivou mreže pomaže, ali individualne ćelije su ključ za kvadratnost */
    aspect-ratio: 16 / 12; /* Odnos kolona prema redovima za cijelu mrežu */
   
}

.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #cbd5e0; /* Subtle cell borders */
    position: relative;
    background-color: #ffffff; /* White background for active cells */
    box-sizing: border-box; /* Ensure padding/border doesn't increase size */
    aspect-ratio: 1 / 1; /* Ključno: Osigurava da je svaka ćelija kvadratna */
    /* Uklonjene fiksne širine i visine */
}

.grid-cell.black {
    background-color: #4a5568; /* Darker gray for black cells */
    border: 1px solid #2d3748; /* Even darker border for black cells */
}

.grid-cell.image-cell-placeholder {
    background-color: transparent; /* Cells under the image are transparent */
    border: none;
    box-shadow: none;
    pointer-events: none; /* Prevent interaction with these underlying cells */
}

.grid-cell input {
    width: 90%; /* Slightly smaller to show cell borders */
    height: 90%;
    text-align: center;
    border: none;
    outline: none;
    font-size: clamp(0.8em, 2.5vw, 1.2em); /* Responzivna veličina fonta za input */
    font-weight: bold;
    text-transform: uppercase;
    background-color: transparent;
    color: #333; /* Dark text color */
}

.grid-cell input:focus {
    background-color: #bee3f8; /* Light blue on focus */
    border-radius: 0.25rem;
    /* outline: 2px solid #3182ce; 
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.5); */
}

.clue-number {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: clamp(0.3em, 1.5vw, 0.65em); /* Responzivna veličina fonta za brojeve tragova */
    color: #d81836; /* Purple-blue for numbers */
    font-weight: 600;
}

.crossword-image-wrapper {
    position: absolute; /* Position over the grid cells */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 5; /* Ensure it's above grid cells but below tooltips */
    border: 0px solid #d51735;   
    border-radius: 0rem;
    box-sizing: border-box;
    background-color: #ffffff; /* White background for the image wrapper */
}

.crossword-image-wrapper img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ensures image covers the area */
}

/* Styles for the clue tooltip */
.clue-tooltip {
    position: absolute;
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 10px;
    border-radius: 0.5rem;
    font-size: clamp(0.75em, 2.5vw, 0.85em); /* Responzivna veličina fonta za tooltip */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Ensure it's above everything else */
    min-width: 150px; /* Smanjen min-width */
    max-width: 250px; /* Smanjen max-width */
    pointer-events: none; /* Allow mouse events to pass through to the cell below */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out; /* Smooth fade in/out */
    text-align: left;
}

.clue-tooltip.visible {
    opacity: 1; /* Show when visible class is added */
}

.clue-tooltip .clue-item {
    margin-bottom: 5px;
}

.clue-tooltip .clue-item:last-child {
    margin-bottom: 0;
}

.clue-tooltip .clue-separator {
    border-top: 1px solid #666; /* Separator line */
    margin: 5px 0;
}

#clues-container {
    display: flex;
    flex-direction: column; /* Stack on small screens */
    gap: 1rem; /* Smanjen gap */
    width: 100%;
    max-width: 800px;
}

@media (min-width: 768px) { /* md breakpoint */
    #clues-container {
        flex-direction: row; /* Side-by-side on larger screens */
        justify-content: space-between;
    }
}

.clues-section {
    background: linear-gradient(to bottom, #FFF5F6, #FFE0E5);
    border-radius: 0.75rem;
    padding: 1rem; /* Smanjen padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    flex: 1; /* Allow sections to grow */
    /* border:1px solid #d51735; */
    
}

.clues-section h2 {
    color: #ed1a3b; 
    margin-bottom: 0.8rem; /* Smanjen margin-bottom */
    font-size: clamp(1.2rem, 3.5vw, 1.5rem); /* Responzivna veličina fonta */
    font-weight: 600;
}

.clues-section ol {
    list-style-type: none;
    padding-left: 0;
}

.clues-section li {
    margin-bottom: 0.4rem; /* Smanjen margin-bottom */
    font-size: clamp(0.85rem, 2.5vw, 0.95rem); /* Responzivna veličina fonta */
    line-height: 1.4;
    color: #530915; /* Darker gray for list items */
}

.button-group {
    margin-top: 3rem; /* Prilagođen margin-top za dugmad */
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap; /* Omogućava prelamanje dugmadi na manjim ekranima */
    gap: 0.8rem; /* Smanjen gap */
    justify-content: center;
    width: 100%;
    align-items: center;
    text-align: center;
}

.btn {
    padding: 0.6rem 1.2rem; /* Smanjen padding dugmadi */
    border-radius: 0.75rem; /* Rounded buttons */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: clamp(0.9rem, 2.5vw, 1rem); /* Responzivna veličina fonta za dugmad */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: #ed1a3b; 
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: #d51735; /* Darker blue on hover */
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #a0aec0; /* Gray */
    color: white;
    border: none;
}

.btn-secondary:hover {
    background-color: #718096; /* Darker gray on hover */
    transform: translateY(-2px);
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
    white-space: normal;
}

.modal-content {
    background-color: #fefefe;
    margin: 12px;
    padding: 12px; /* Smanjen padding */
    border: 1px solid #888; /* Original border for modal */
    width: 90%; /* Veća širina na mobilnim telefonima */
    max-width: 350px; 
    /* max-height: 100px; */
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    text-align: center;
    align-items: center;
   
}

.modal-close {
    color: #aaa; /* Original color for close button */
    float: right;
    font-size: 24px; /* Smanjen font-size */
    font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
    color: black; /* Original hover color for close button */
    text-decoration: none;
    cursor: pointer;
}
.hidden-for-release {
    display: none !important; 
}
.btn.btn-icon {
    background-color: #c4c8cd; /* Malo tamnija siva */
    padding: 0.6rem;
    /* Fiksne dimenzije da bude kvadratno */
    aspect-ratio: 1 / 1;
    color: #656669;
}

.btn.btn-icon:hover {
    background-color: #a8a9ab;
}

/* Stil za Facebook dugme u modalu */
.btn.btn-facebook {
    background-color: #1877F2; /* Zvanična Facebook plava */
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    transition: background-color 0.2s ease-in-out;
}

.btn.btn-facebook:hover {
    background-color: #166FE5; /* Malo tamnija plava na hover */
}
/* Keyframe animacija za pojavljivanje */
@keyframes scaleIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Osnovni stil za kontejner ikonice */
#modal-icon {
    margin: 0 auto 15px auto; /* Razmak ispod ikonice */
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Da bude krug */
    position: relative;
    display: none; /* Sakriven po defaultu */
    box-sizing: border-box;
    animation: scaleIn 0.3s ease-in-out; /* Primenjujemo animaciju */
}

/* Stil za USPEH - Zeleni znak ✓ */
#modal-icon.success {
    display: block; /* Prikazujemo ga kad ima klasu .success */
    border: 4px solid #4CAF50; /* Zeleni krug */
}

/* Crtanje znaka ✓ pomoću CSS-a */
#modal-icon.success::after {
    content: '';
    position: absolute;
    left: 26px;
    top: 13px;
    width: 20px;
    height: 40px;
    border-style: solid;
    border-color: #4CAF50;
    border-width: 0 6px 6px 0;
    transform: rotate(45deg);
}

/* STIL ZA GREŠKU - Crveni znak ✗ (sa ispravljenim centriranjem) */
#modal-icon.error {
    display: block;
    border: 4px solid #F44336; /* Crveni krug */
}

/* Crtanje znaka ✗ pomoću dva pseudo-elementa */
#modal-icon.error::before,
#modal-icon.error::after {
    content: '';
    position: absolute;
    
    /* Postavljamo početnu tačku na centar kruga */
    left: 50%;
    top: 50%;
    
    /* Definišemo dimenzije linija */
    width: 6px;
    height: 40px;
    border-radius: 2px;
    background-color: #F44336;
}

/* Prva linija X-a, rotirana za 45 stepeni */
#modal-icon.error::before {
    /* Savršeno centriranje i rotacija */
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Druga linija X-a, rotirana za -45 stepeni */
#modal-icon.error::after {
    /* Savršeno centriranje i rotacija */
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Stil za padajući meni za izbor ukrštenice */
.crossword-selector-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 400px;
}

.crossword-selector-wrapper label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #530915;
}

#crossword-selector {
    width: 100%;
    padding: 0.6rem 1rem;
    padding-right: 2rem;
    border-radius: 0.75rem;
    border: 1px solid #ed1a3b;
    background-color: #fff;
    font-family: 'Antenna', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#crossword-selector:focus {
    outline: none;
    border-color: #d51735;
    box-shadow: 0 0 0 2px rgba(252, 108, 129, 0.3);
}