/* ==========================================================================
   Integrame.ro - stiluri proprii
   Tailwind acopera restul; aici sta doar ce nu se poate face cu utilitati.
   ========================================================================== */

.puzzle-preview-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}

.btn-press:active {
    transform: translateY(2px);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Grila de integrama
   ========================================================================== */

.integrama {
    --celula: 46px;
    --linie: #1e293b;

    /* Culorile casutelor, adunate aici ca sa se schimbe dintr-un singur loc.

       Deosebirea dintre casuta in care se scrie si cea blocata trebuie sa se
       vada dintr-o privire, altfel jucatorul incearca sa tasteze acolo unde
       nu are ce scrie. */
    --casuta-scris:     #ffffff;   /* aici se tasteaza */
    --casuta-blocata:   #9aa8ba;   /* aici nu se poate scrie nimic */
    --casuta-definitie: #c3cede;   /* casuta cu definitii */

    display: grid;
    grid-template-columns: repeat(var(--coloane), var(--celula));
    grid-auto-rows: var(--celula);
    gap: 0;

    width: max-content;
    max-width: 100%;
    margin: 0 auto;

    background: var(--linie);
    border: 2px solid var(--linie);
    border-radius: 6px;
    overflow: hidden;

    font-family: Lexend, system-ui, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.integrama__celula {
    position: relative;
    background: var(--casuta-blocata);
    box-shadow: inset -1px -1px 0 var(--linie);
}

/* --- celula in care se scrie o litera --- */

.integrama__litera {
    background: var(--casuta-scris);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: calc(var(--celula) * 0.55);
    font-weight: 600;
    line-height: 1;
    color: #00288e;
    text-transform: uppercase;

    transition: background-color .12s ease;
}

.integrama__litera.este-cheie {
    background: #fefce8;
}

.integrama__litera.selectata {
    background: #dbeafe;
}

.integrama__litera.este-cheie.selectata {
    background: #fef3c7;
}

.integrama__litera.activa {
    background: #00288e;
    color: #ffffff;
    box-shadow: inset 0 0 0 2px #00288e, inset -1px -1px 0 var(--linie);
}

.integrama__litera.gresita {
    background: #ffdad6;
    color: #93000a;
}

.integrama__litera.gresita.activa {
    background: #ba1a1a;
    color: #ffffff;
}

/* Input invizibil care aduce tastatura pe telefon */
.integrama__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 16px; /* sub 16px iOS face zoom */
    cursor: pointer;
}

/* --- celula cu definitii --- */

.integrama__definitii {
    background: var(--casuta-definitie);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.integrama__definitie {
    flex: 1 1 0;
    min-height: 0;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 1px 2px;
    overflow: hidden;

    font-family: 'Work Sans', system-ui, sans-serif;
    font-size: clamp(7px, calc(var(--celula) * 0.185), 12px);
    line-height: 1.08;
    font-weight: 500;
    color: #1e293b;
    word-break: break-word;
    hyphens: auto;

    transition: background-color .12s ease;
}

.integrama__definitii > .integrama__definitie + .integrama__definitie {
    border-top: 1px solid #94a3b8;
}

/* Doua definitii intr-o casuta au jumatate de loc fiecare */
.integrama__definitii:has(.integrama__definitie + .integrama__definitie) .integrama__definitie {
    font-size: clamp(6px, calc(var(--celula) * 0.155), 10px);
    line-height: 1.02;
}

.integrama__definitie:hover {
    background: #b6c2d2;
}

.integrama__definitie.activa {
    background: #e9e5b0;
    color: #1e1c00;
}

/* Sageata care arata unde incepe cuvantul */
.integrama__sageata {
    position: absolute;
    z-index: 6;
    width: 13px;
    height: 13px;
    color: #00288e;
    pointer-events: none;
}

.integrama__sageata svg {
    display: block;
    width: 100%;
    height: 100%;
}

.integrama__sageata--dreapta { right: -1px; top: 50%; transform: translateY(-50%); }
.integrama__sageata--jos     { bottom: -1px; left: 50%; transform: translateX(-50%); }
.integrama__sageata--stanga  { left: -1px;  top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   Bara cu definitia curenta
   ========================================================================== */

.definitie-curenta {
    min-height: 56px;
}

/* ==========================================================================
   Tastatura de pe telefon
   ========================================================================== */

.tastatura {
    display: none;
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: #e7eeff;
    border-top: 1px solid #c4c5d5;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}

.tastatura.vizibila {
    display: block;
}

.tastatura__rand {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 5px;
}

.tastatura__rand:last-child {
    margin-bottom: 0;
}

.tastatura__tasta {
    flex: 1 1 0;
    max-width: 42px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    border: 0;
    border-bottom: 2px solid #b8c4ff;
    border-radius: 6px;

    font-family: Lexend, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #00288e;
    cursor: pointer;
}

.tastatura__tasta:active {
    transform: translateY(2px);
    border-bottom-width: 0;
    background: #dde1ff;
}

.tastatura__tasta--lata {
    max-width: 76px;
    background: #dee8ff;
}

/* ==========================================================================
   Editorul de integrame
   ========================================================================== */

/* In editor, casutele goale sunt exact acolo unde ai voie sa pui cuvinte,
   deci raman deschise. Griul inchis de la rezolvare ar spune pe dos. */
.integrama--editor .integrama__celula {
    cursor: cell;
    background: #eef2f7;
}

.integrama--editor .integrama__celula:hover {
    background: #dde5ef;
}

.integrama--editor .integrama__litera {
    background: var(--casuta-scris);
}

.integrama--editor .integrama__definitii {
    background: var(--casuta-definitie);
}

/* Casuta de unde incepe cuvantul in lucru */
.integrama--editor .integrama__celula.cursor-editor {
    background: #ffe9e6;
}

/* Cuvantul aflat in editare, incadrat pe toata lungimea lui.
   Chenarul se pune doar pe laturile din marginea cuvantului, ca sa iasa un
   contur continuu in loc de casute incadrate una cate una. Cu box-sizing
   border-box (pus de Tailwind), chenarul nu deplaseaza grila. */
.integrama--editor .integrama__celula.cuvant-editat {
    position: relative;
    z-index: 3;
}

/* Cuvantul selectat la rezolvare, incadrat pe toata lungimea lui */
.integrama__celula.cuvant-selectat {
    position: relative;
    z-index: 3;
}

/* Chenarul se pune doar pe laturile din marginea cuvantului. Culoarea vine
   de la clasa parinte: rosu in editor, bleumarin la rezolvare. */
.cuvant-editat   { --chenar: #ba1a1a; }
.cuvant-selectat { --chenar: #00288e; }

.m-sus     { border-top:    2px solid var(--chenar); }
.m-jos     { border-bottom: 2px solid var(--chenar); }
.m-stanga  { border-left:   2px solid var(--chenar); }
.m-dreapta { border-right:  2px solid var(--chenar); }

/* ==========================================================================
   Accesibilitate
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid #00288e;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    header, footer, .noprint, .tastatura { display: none !important; }
    .integrama { break-inside: avoid; }
}