/*
============================================================================
PROJECTE: Vocabulari Matemàtic
FITXER: css/vocabulari.css
ROL: Estils complets de l'activitat (standalone, sense shared.css).
ESTÈTICA: Geomètrica / educativa — violetes, fons càlid, net.

RESPONSIVE STRATEGY:
  - Mobile-first base
  - Breakpoints portrait: 480 / 600 / 820 / 900px
  - Landscape mòbil (max-height:520px): layout 2 columnes figura|controls
  - dvh per al body: el teclat virtual no desplaça el layout
  - Touch targets mínims 44px (Apple HIG / WCAG 2.5.5)
  - safe-area-inset per a mòbils amb notch/Dynamic Island
  - shape-rendering: geometricPrecision per a SVG en pantalles d'alta densitat
============================================================================
*/

/* ══════════════════════════════════════════════
   VARIABLES
══════════════════════════════════════════════ */
:root {
    --bg-color:      #fafaf7;
    --panel-bg:      #ffffff;
    --text-main:     #1e293b;
    --text-muted:    #64748b;
    --primary:       #7c3aed;
    --primary-light: #ede9fe;
    --primary-hover: #6d28d9;
    --primary-dark:  #4c1d95;
    --danger:        #ef4444;
    --danger-light:  #fef2f2;
    --success:       #10b981;
    --border-color:  #e2e8f0;
    --border-heavy:  #cbd5e1;
    --radius:        8px;
}

/* ══════════════════════════════════════════════
   RESET BASE
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════════
   BODY
   dvh = dynamic viewport height: es redueix quan apareix
   el teclat virtual, evitant que el contingut quedi tapat.
══════════════════════════════════════════════ */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 16px
             max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-left));
    height: 100dvh;
    overflow: hidden;
    transition: background-color 1s ease;
}

/* ══════════════════════════════════════════════
   TÍTOL I SUBTÍTOL
══════════════════════════════════════════════ */
h1 {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #3b0764;
    font-size: 1.6em;
    margin: 0 0 5px 0;
    text-align: center;
}

.subtitle {
    color: var(--text-muted);
    font-size: 1.1em;
    margin-bottom: 16px;
    text-align: center;
}

/* ══════════════════════════════════════════════
   ICONA HOME
══════════════════════════════════════════════ */
.title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 5px;
    width: 100%;
    max-width: 910px;
}
.title-row h1 { margin: 0; }

.home-icon-link {
    display: block;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}
.home-icon-link:hover {
    opacity: 1;
    animation: home-blink-shake 0.55s ease forwards;
}
.home-icon-link img { width: 100%; height: 100%; object-fit: contain; }

/* ══════════════════════════════════════════════
   PANELL PRINCIPAL
══════════════════════════════════════════════ */
.panel {
    background-color: var(--panel-bg);
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 910px;
    overflow: visible;
    border: 1px solid var(--border-color);
    border-top: 6px solid var(--primary);
    transition: border-color 0.3s;
    position: relative;
    /* Flex column: distribueix espai vertical cap als fills */
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* ══════════════════════════════════════════════
   CAPÇALERA DEL JOC
══════════════════════════════════════════════ */
.header-info {
    background-color: #f5f3ff;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    flex-wrap: wrap;
    gap: 8px;
    /* [ROUND 1 — imatge 3] .panel ja no fa overflow:hidden, per tant
     * el fons del header ha de tenir ell mateix les cantonades arrodonides
     * per mantenir l'aspecte visual original */
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* [ROUND 1 — sessió i figura en una sola fila; guanya espai vertical] */
.header-left  { display: flex; flex-direction: row; align-items: baseline; gap: 14px; }
.session-text { font-size: 0.9em; color: var(--text-muted); }
.session-text::after { content: '·'; margin-left: 14px; color: var(--border-heavy); }
.level-text   { font-size: 1.15em; color: #3b0764; }
.score-text   { font-size: 1.15em; color: var(--primary); font-family: monospace; }

.attempts-counter {
    font-family: monospace;
    font-size: 1.15em;
    color: var(--text-muted);
    padding: 5px 10px;
    min-height: 40px;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 4px;
    border: 1px solid var(--border-heavy);
    transition: all 0.3s;
}
.attempts-counter.danger { color: var(--danger); border-color: var(--danger); }

/* ══════════════════════════════════════════════
   ZONA PRINCIPAL DEL JOC
══════════════════════════════════════════════ */

/* game-screen: fill vertical d'espai dins .panel */
#game-screen {
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

#game-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 16px;
    position: relative;
    /* Omple l'espai restant dins game-screen */
    flex: 1 1 0;
    min-height: 0;
}

/* ══════════════════════════════════════════════
   SVG FIGURA
══════════════════════════════════════════════ */
#figure-container {
    width: 100%;
    max-width: 520px;
    position: relative;
}

#figure-svg {
    width: 100%;
    height: auto;
    display: block;
    shape-rendering: geometricPrecision;  /* millor render en Retina/HiDPI */
    /* [ROUND 1 — imatge 3] les drop-zones amb ly prop de 0 surten fora del
     * viewBox 500×340; overflow:visible les fa visibles */
    overflow: visible;
}

/* ══════════════════════════════════════════════
   DROP ZONES
══════════════════════════════════════════════ */
.drop-zone { cursor: pointer; transition: all 0.2s; }

/* [ROUND 1 — imatge 1] connector (línia) dins del <g class="drop-zone">:
 * el color canvia amb l'estat del pare. Sense cercle terminal. */
.drop-zone .dz-connector              { stroke: var(--primary);       }
.drop-zone.dz-over    .dz-connector  { stroke: var(--primary-hover);  }
.drop-zone.dz-correct .dz-connector  { stroke: var(--success);        }
.drop-zone.dz-wrong   .dz-connector  { stroke: var(--danger);         }

.drop-zone rect.dz-bg {
    fill: white;
    stroke: var(--primary);
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
    rx: 5;
    opacity: 0.85;
}
.drop-zone.dz-over    rect.dz-bg { fill: var(--primary-light); stroke-width: 2.5; stroke-dasharray: none; }
.drop-zone.dz-correct rect.dz-bg { fill: #d1fae5; stroke: var(--success); stroke-dasharray: none; }
.drop-zone.dz-wrong   rect.dz-bg { fill: #fee2e2; stroke: var(--danger);  stroke-dasharray: none; }

.drop-zone text.dz-label {
    font-family: 'Segoe UI', sans-serif;
    font-size: 14.3px;
    fill: #334155;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    font-weight: 600;
}
/* [ROUND 3 — font hint +30%] etiqueta "Com es diu la figura?" */
.drop-zone text.dz-label-hint {
    font-size: 16.5px; /* 15px × 1.10 */
}
.drop-zone.dz-correct text.dz-label { fill: #065f46; }
.drop-zone.dz-wrong   text.dz-label { fill: #991b1b; }

/* ── Casella activa (mode B): taronja amb blink-and-shake ── */
.drop-zone.dz-active rect.dz-bg {
    fill: #fff7ed;
    stroke: #ea580c;
    stroke-width: 2.5;
    stroke-dasharray: none;
    animation: dz-blink-shake 1.2s ease;
}
.drop-zone.dz-active .dz-connector { stroke: #ea580c; }
.drop-zone.dz-active text.dz-label { fill: #9a3412; }

/* ── Casella activa estàtica (mode B, després d'un error): taronja sense animació ── */
.drop-zone.dz-active-still rect.dz-bg {
    fill: #fff7ed;
    stroke: #ea580c;
    stroke-width: 2;
    stroke-dasharray: none;
}
.drop-zone.dz-active-still .dz-connector { stroke: #ea580c; }
.drop-zone.dz-active-still text.dz-label { fill: #9a3412; }

/* ══════════════════════════════════════════════
   POOL DE PARAULES (modalitat A)
══════════════════════════════════════════════ */
#word-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    min-height: 52px;
    padding: 10px;
    border: 2px dashed var(--border-heavy);
    border-radius: 10px;
    width: 100%;
    /* [ROUND 2 — imatge 1] pool desacoblat de la figura: usa tot l'ample
     * disponible del game-area (≤860px) per reduir el wrapping dels chips */
    max-width: 860px;
    background: white;
}

.word-chip {
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: 8px 18px;
    min-height: 44px;           /* target tàctil mínim */
    display: flex;
    align-items: center;
    font-size: 0.95em;
    font-weight: 700;
    cursor: grab;
    user-select: none;
    touch-action: none;         /* imprescindible per al drag tàctil */
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.word-chip:active   { cursor: grabbing; }
.word-chip.dragging { opacity: 0.4; }
.word-chip.used     { opacity: 0.25; pointer-events: none; }
/* Chip seleccionat en mode tap-to-select (mòbil portrait) */
.word-chip.chip-selected {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}
@media (hover: hover) {
    .word-chip:not(.used):not(.dragging):hover {
        background: #e2e8f0;
        border-color: #94a3b8;
        color: #1e293b;
    }
}

/* ══════════════════════════════════════════════
   LAYOUT MODE A — pool vertical esquerra + figura dreta
   [ROUND 3 — imatge: botons en columna a l'esquerra]
══════════════════════════════════════════════ */
#game-area.layout-a {
    flex-direction: row;
    align-items: stretch;  /* fills ocupen tota l'alçada disponible */
    padding: 16px;
    gap: 16px;
}

/* Pool: columna fixa a l'esquerra amb scroll si hi ha molts ítems */
#game-area.layout-a #word-pool {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 160px;
    min-width: 140px;
    max-width: 180px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    align-items: stretch;
    border-radius: 10px;
    padding: 8px;
    gap: 12px;
}

/* Chips en mode vertical: plens d'ample, text centrat, sense border-radius rodona */
#game-area.layout-a .word-chip {
    width: 100%;
    justify-content: center;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9em;
}

/* Figura: ocupa la resta de l'ample */
#game-area.layout-a #figure-container {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    max-width: none;
}

/* SVG en layout de fila: s'adapta a l'alçada disponible.
   preserveAspectRatio (default: xMidYMid meet) manté la proporció. */
#game-area.layout-a #figure-svg,
#game-area.layout-b #figure-svg {
    height: 100%;
}

/* ══════════════════════════════════════════════
   LAYOUT MODE B — figura esquerra + write-panel dreta
   Simètric al layout-a: la figura ocupa la major part
   de l'ample i el panell d'escriptura va a la dreta.
══════════════════════════════════════════════ */
#game-area.layout-b {
    flex-direction: row;
    align-items: stretch;  /* fills ocupen tota l'alçada disponible */
    padding: 16px;
    gap: 16px;
}

/* Figura: ocupa la major part de l'ample */
#game-area.layout-b #figure-container {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    max-width: none;
}

/* Write-panel: columna fixa a la dreta, scroll si cal */
#game-area.layout-b #write-panel {
    width: 180px;
    min-width: 160px;
    max-width: 200px;
    flex-shrink: 0;
    align-items: stretch;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
}

#game-area.layout-b .write-prompt {
    font-size: 1.08em;
    text-align: center;
    color: #ea580c;
}

#game-area.layout-b .write-progress {
    font-size: 0.85em;
    text-align: center;
}

#game-area.layout-b .write-input-row {
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#game-area.layout-b #write-input {
    width: calc(100% - 62px);   /* 52px botó + 10px gap */
    font-size: 1.1em;
}

#game-area.layout-b .btn-submit#btn-submit-write {
    /* quadrat: mides definides a #btn-submit-write */
    flex-shrink: 0;
}

/* Botó "Canviar de casella" — estètica paral·lela al btn-submit, taronja molt clar */
.btn-cycle {
    background-color: #fed7aa;
    color: #1e293b;
    border: none;
    padding: 12px 20px;
    min-height: 48px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    touch-action: manipulation;
    transition: background-color 0.2s;
}
.btn-cycle:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-cycle:active { transform: scale(0.95); }
@media (hover: hover) { .btn-cycle:hover { background-color: #f97316; } }

/* Dins layout-b: amplada moderada (no full-width), centrat */
#game-area.layout-b .btn-cycle {
    width: 90%;
    align-self: center;
    padding: 10px 12px;
    font-size: 0.88em;
}

#game-area.layout-b .typo-warning {
    font-size: 0.8em;
    max-width: none;
}

/* Chip fantasma que segueix el cursor/dit */
#drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.95em;
    font-weight: 700;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    display: none;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════
   ZONA D'ESCRIPTURA (modalitat B)
══════════════════════════════════════════════ */
#write-panel {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.write-prompt {
    font-size: 1.05em;
    font-weight: 700;
    color: #3b0764;
    text-align: center;
    line-height: 1.4;
}

.write-progress {
    font-size: 0.9em;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

.write-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;     /* en pantalles molt estretes el botó baixa */
}

#write-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px 14px;
    min-height: 48px;    /* target tàctil */
    border: 2px solid var(--border-heavy);
    border-radius: 6px;
    outline: none;
    width: 308px;
    text-align: center;
    transition: border-color 0.2s;
    /* Evita correccions automàtiques en iOS/Android que confonen l'alumne */
    -webkit-user-modify: read-write-plaintext-only;
}
#write-input:focus { border-color: var(--primary); }

.typo-warning {
    display: none;
    background: #fefce8;
    border: 1.5px solid #fbbf24;
    color: #92400e;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    animation: fadeIn 0.3s;
    max-width: 400px;
    width: 100%;
}
.typo-warning.visible { display: flex; }

/* ── Layout intern del typo-warning: missatge + paraula en columna ── */
.typo-warning {
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* ── Línia del missatge explicatiu ("Revisa l'accentuació", etc.) ── */
.typo-msg {
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    color: #92400e;
}

/* ── Paraula escrita per l'alumne dins el typo-warning ──
   Monoespai + mida gran: cada caràcter és clarament llegible.
   Sense color diferent: el context (⚠️ + posició) és el missatge. */
.typo-written {
    display: block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.35em;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #92400e;
}

/* ── Caràcter problemàtic ──
   Vermell + subratllat ondulat: indica "aquí hi ha quelcom a revisar"
   sense especificar ni la causa ni la solució. */
.typo-err {
    color: #dc2626;
    background: none;
    text-decoration: underline wavy #dc2626;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Indicador de lletra que falta al final ──
   L'underscore cursiva indica "falta alguna cosa al final". */
.typo-err--gap {
    opacity: 0.6;
    font-style: italic;
}

/* ══════════════════════════════════════════════
   INSTRUCCIÓ CONTEXTUAL
══════════════════════════════════════════════ */
#context-instruction {
    font-size: 0.95em;
    color: #475569;
    text-align: center;
    font-weight: 600;
    min-height: 20px;
}
#context-instruction.error { color: var(--danger); }

/* ══════════════════════════════════════════════
   BOTÓ SUBMIT
══════════════════════════════════════════════ */
.btn-submit {
    background-color: #475569;
    color: white;
    border: none;
    padding: 12px 24px;
    min-height: 48px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    touch-action: manipulation;
}
.btn-submit:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-submit:active        { transform: scale(0.95); }
@media (hover: hover) { .btn-submit:hover { background-color: #334155; } }
.btn-submit.error-shake   { background-color: var(--danger); animation: shake 0.2s; }

/* Botó OK (mode B) — gris clar, forma quadrada */
#btn-submit-write {
    background-color: #cbd5e1;
    color: #1e293b;
    width: 52px;
    min-height: 52px;
    padding: 0;
    font-size: 1.05em;
    align-self: center;
}
@media (hover: hover) { #btn-submit-write:hover { background-color: #0f172a; color: white; } }

/* ══════════════════════════════════════════════
   MINI OVERLAY (entre figures)
   [ROUND 1 — position:absolute → fora del flux (no causa scroll)
              Mode A (layout-a): sobre el word-pool (dreta)
              Mode B / default: targeta centrada a la part baixa]
══════════════════════════════════════════════ */
#mini-overlay {
    /* Tret del flux; posicionat dins #game-area (position:relative) */
    position: absolute;
    z-index: 10;
    /* Mode B default: centrat horitzontalment, a la part baixa */
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    width: 270px;
    /* Estil targeta flotant */
    padding: 18px 16px;
    background: white;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.11);
    /* Layout intern */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}

/* Mode A: sobre el word-pool (columna dreta, 160px d'ample) */
#game-area.layout-a #mini-overlay {
    left: auto;
    bottom: auto;
    transform: none;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 165px;
}

/* Mode B: sobre el write-panel (columna dreta) */
#game-area.layout-b #mini-overlay {
    left: auto;
    bottom: auto;
    transform: none;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 185px;
}

.mini-overlay-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;        /* [ROUND 1 — reduït de 15px] */
    margin-bottom: 8px;
}

/* [ROUND 1 — mides reduïdes per al format compacte] */
.mini-icon   { font-size: 2em;   animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-shadow: 0px 4px 15px rgba(250, 204, 21, 0.6); }
.mini-text   { color: #047857;   font-size: 1.35em; font-weight: bold; text-shadow: 0px 2px 5px white; }
.mini-points {
    color: #059669; font-size: 1em; font-weight: bold; font-family: monospace;
    background: rgba(255,255,255,0.95); padding: 4px 14px;
    border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Botó "Figura següent" dins el mini-overlay */
.btn-next-figure {
    margin-top: 10px;
    background-color: #475569;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    touch-action: manipulation;
    animation: fadeIn 0.5s;
}
.btn-next-figure:active { transform: scale(0.95); }
@media (hover: hover) { .btn-next-figure:hover { background-color: #334155; } }

/* ══════════════════════════════════════════════
   PANTALLA FINAL
══════════════════════════════════════════════ */
#summary-screen {
    display: none;
    padding: 36px 20px 40px;
    text-align: center;
    /* Flex fill + scroll si el resum és més alt que la viewport */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

#summary-screen h2 { color: var(--success); font-size: 1.8em; margin-bottom: 20px; }

/* Botons d'acció del resum final */
.final-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-top: 12px;
}
.final-actions > button {
    width: 100%;
    max-width: 280px;
    padding: 10px 14px;
    font-size: 0.95em;
}
.btn-action-informe { background-color: var(--primary) !important; }
.btn-action-copiar  { background-color: #a84359 !important; color: white; }

/* Pantalla d'informe (historial encerts/errades) */
#history-summary-screen {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.summary-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0 auto 20px auto;
    max-width: 480px;
    flex-wrap: wrap-reverse;
}

.summary-data {
    flex: 1;
    text-align: left;
    font-size: 1.05em;
    line-height: 1.8;
    min-width: 200px;
}

.summary-data .session-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
    font-family: monospace;
    font-size: 1.05em;
}

.trophy-icon { font-size: 4.5em; animation: bounce 1.5s infinite; }

.btn-restart {
    background-color: #059669;
    color: white;
    border: none;
    padding: 14px 35px;
    min-height: 48px;
    font-size: 1.05em;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    touch-action: manipulation;
    margin-top: 20px;
}
.btn-restart:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-restart:active        { transform: scale(0.95); }
@media (hover: hover) { .btn-restart:hover { background-color: #047857; } }

/* ══════════════════════════════════════════════
   RESPONSIVE — PORTRAIT MÒBIL (≤600px)
   Mode A: top (figura) / bottom (pool horitzontal desplaçable)
   Interacció tap-to-select: toca un chip per seleccionar-lo,
   toca la casella del SVG per col·locar-lo.
   (El drag-and-drop queda per a desktop i landscape.)
══════════════════════════════════════════════ */
@media (max-width: 600px) and (orientation: portrait) {

    /* Layout columna: figura a dalt, pool a baix */
    #game-area.layout-a {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 8px 6px;
        gap: 8px;
    }

    /* Figura: omple l'espai disponible */
    #game-area.layout-a #figure-container {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        max-width: none;
    }

    /* Pool: franja horitzontal desplaçable.
       ⚠️  SENSE border-radius ni border aquí:
       overflow-x:auto + border-radius en WebKit/Chrome mòbil clipeja
       el contingut als cantons arrodonits i talla el primer i últim chip.
       L'estètica arrodonida la dona #pool-rail-wrapper (no fa overflow). */
    #game-area.layout-a #word-pool {
        flex-direction: row;
        flex-wrap: nowrap;
        /* FIX: justify-content:center heretada del base causa que el contingut
           es desborda simètricament i scrollLeft no pot arribar a l'extrem
           esquerre → el primer chip queda fora de la zona de scroll. */
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        width: 100%;
        max-width: none;
        min-height: 54px;
        flex-shrink: 0;
        padding: 8px 0;
        gap: 10px;
        border: none;
        border-radius: 0;
        background: transparent;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) var(--primary-light);
    }
    #game-area.layout-a #word-pool::-webkit-scrollbar       { height: 4px; }
    #game-area.layout-a #word-pool::-webkit-scrollbar-track  { background: var(--primary-light); }
    #game-area.layout-a #word-pool::-webkit-scrollbar-thumb  { background: var(--primary); border-radius: 2px; }

    /* Wrapper visual: conté el border i el border-radius sense fer scroll,
       de manera que mai clipeja el contingut del pool intern. */
    #pool-rail-wrapper {
        width: 100%;
        flex-shrink: 0;
        background: white;
        border: 2px dashed var(--border-heavy);
        border-radius: 12px;
        overflow: visible;
    }

    /* Spacers DOM: marge real als extrems del scroll (cross-browser). */
    #game-area.layout-a #word-pool .pool-spacer {
        display: block;
        flex-shrink: 0;
        width: 12px;
        min-width: 12px;
        pointer-events: none;
    }

    /* Chips: mantenen el format pill, no creixen d'ample */
    #game-area.layout-a .word-chip {
        flex-shrink: 0;
        width: auto;
        border-radius: 20px;
        padding: 8px 16px;
        font-size: 0.9em;
        touch-action: auto;   /* permet el scroll del pool quan es toca el chip */
    }

    /* Drop-zones: cursor pointer per indicar que es pot tocar */
    #game-area.layout-a .drop-zone:not(.dz-correct) {
        cursor: pointer;
    }

    /* Mini-overlay: centrat sobre la figura, per sobre del pool */
    #game-area.layout-a #mini-overlay {
        right: auto;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 68px;   /* per sobre de la franja del pool */
        width: 240px;
    }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — PORTRAIT PETIT (≤480px)
   Mòbils en vertical: Gama A/B Android, iPhone SE…
══════════════════════════════════════════════ */
@media (max-width: 820px) { .panel { width: 98%; } }

@media (max-width: 600px) {
    .home-icon-link { width: 48px; height: 48px; }
    .title-row      { gap: 10px; }
    h1              { font-size: 1.35em; }
}

@media (max-width: 480px) {
    body {
        padding: 8px
                 max(8px, env(safe-area-inset-right))
                 max(8px, env(safe-area-inset-bottom))
                 max(8px, env(safe-area-inset-left));
    }
    h1              { font-size: 1.2em; }
    .subtitle       { font-size: 0.9em; margin-bottom: 8px; }
    .header-info    { flex-direction: column; gap: 6px; padding: 10px 12px; }
    .header-left    { align-items: center; }
    .level-text, .score-text { font-size: 1.05em; }
    .attempts-counter        { font-size: 1.05em; width: 100%; justify-content: center; }
    .session-text   { font-size: 0.9em; }
    #game-area      { padding: 10px 8px; gap: 12px; }
    .word-chip      { font-size: 0.85em; padding: 6px 12px; min-height: 44px; }
    #write-input    { width: 155px; font-size: 1.05em; }
    .write-prompt   { font-size: 0.9em; }

    /* Layout-b col·lapsa a columna en pantalles petites */
    #game-area.layout-b { flex-direction: column; align-items: center; overflow-y: auto; }
    #game-area.layout-b #figure-svg { height: auto; }
    #game-area.layout-b #write-panel {
        width: 100%; max-width: 400px; min-width: unset;
    }
    #game-area.layout-b .write-input-row { flex-direction: row; }
    #game-area.layout-b #write-input { width: 155px; }
    .mini-icon      { font-size: 2.5em; }
    .mini-text      { font-size: 1.5em; }
    .mini-points    { font-size: 1em; }
    #summary-screen h2 { font-size: 1.4em; }
    .trophy-icon       { font-size: 3.5em; }
}

/* ══════════════════════════════════════════════
   OVERLAY "COL·LOCA EL MÒBIL EN VERTICAL"
   S'activa quan el dispositiu tàctil és en
   landscape (mòbil girat). Tapa tota la pantalla
   i bloqueja la interacció.
══════════════════════════════════════════════ */
#rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--panel-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px;
    text-align: center;
}
#rotate-overlay.visible { display: flex; }

.rotate-icon {
    font-size: 3.5em;
    animation: rotate-hint 2.5s ease-in-out infinite;
}
@keyframes rotate-hint {
    0%   { transform: rotate(0deg)   scale(1);    }
    30%  { transform: rotate(-90deg) scale(1.1);  }
    60%  { transform: rotate(-90deg) scale(1.1);  }
    90%  { transform: rotate(0deg)   scale(1);    }
    100% { transform: rotate(0deg)   scale(1);    }
}

.rotate-msg {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--primary);
    max-width: 280px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET PORTRAIT (≥600px)
   iPad, Galaxy Tab, Lenovo Tab…
══════════════════════════════════════════════ */
@media (min-width: 600px) and (orientation: portrait) {
    #figure-container, #write-panel { max-width: 580px; }
    /* word-pool hereta el 860px base; no cal sobreescriure */
    #write-input { width: 260px; }
    .word-chip   { font-size: 1em; padding: 8px 20px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — CHROMEBOOK / LAPTOP (≥900px)
   Panell ample, figura gran, chips còmodes.
══════════════════════════════════════════════ */
@media (min-width: 900px) {
    #figure-container, #write-panel { max-width: 620px; }
    /* word-pool hereta el 860px base; no cal sobreescriure */
    #write-input { width: 280px; font-size: 1.35em; }
    .word-chip   { font-size: 1em; padding: 9px 22px; }
}

/* ══════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════ */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-5px); }
    75%       { transform: translateX(5px); }
}

/* Thumb-up de confirmació (mode B) — element SVG sobre la casella encertada */
.thumbs-up-anim text {
    transform-box: fill-box;
    transform-origin: center;
    animation: thumbsUpPop 1.0s ease forwards;
}
@keyframes thumbsUpPop {
    0%   { opacity: 0; transform: scale(0.4); }
    35%  { opacity: 1; transform: scale(1.3); }
    65%  { opacity: 1; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(0.85); }
}

/* [ROUND 4] Shake del chip quan l'usuari clica en lloc d'arrossegar */
@keyframes chip-shake {
    0%, 100% { transform: translateX(0) scale(1); }
    15%      { transform: translateX(-7px) scale(1.05); }
    35%      { transform: translateX( 7px) scale(1.05); }
    55%      { transform: translateX(-5px); }
    75%      { transform: translateX( 4px); }
}
.word-chip.chip-shake { animation: chip-shake 0.5s ease; }

/* Blink-and-shake de la casella activa (mode B, 0.8s) */
@keyframes dz-blink-shake {
    0%       { transform: translateX(0);    opacity: 0.5; }
    15%      { transform: translateX(-4px); opacity: 1;   }
    30%      { transform: translateX( 4px); opacity: 0.6; }
    50%      { transform: translateX(-3px); opacity: 1;   }
    70%      { transform: translateX( 2px); opacity: 0.7; }
    85%      { transform: translateX(-1px); opacity: 1;   }
    100%     { transform: translateX(0);    opacity: 1;   }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
    0%   { transform: scale(0); }
    80%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-15px); }
}

@keyframes home-blink-shake {
    0%   { transform: scale(1)    rotate(0deg);  opacity: 1;   }
    15%  { transform: scale(1.15) rotate(-8deg); opacity: 0.3; }
    30%  { transform: scale(1.15) rotate( 8deg); opacity: 1;   }
    45%  { transform: scale(1.1)  rotate(-5deg); opacity: 0.3; }
    60%  { transform: scale(1.1)  rotate( 5deg); opacity: 1;   }
    80%  { transform: scale(1.05) rotate(-2deg); opacity: 0.7; }
    100% { transform: scale(1)    rotate(0deg);  opacity: 1;   }
}

/* [FIX m6] En landscape molt petit, permetre scroll per veure botons tallats.
   En portrait i landscape normal, overflow:hidden es manté per al drag-and-drop. */
@media (orientation: landscape) and (max-height: 500px) {
    body { overflow-y: auto; }
}